1. 269200 Web Programming Language Week 13 Ken Cosh HTML 5

2. The latest new version of HTML New markup New Tags New APIs Initial Release:- 28 th October 2014 Flash

3. Browser Compatability In development for a decade, but still not 100% fully supported… http://caniuse.com/#cats=HTML5

4. HTML5 Leap Forward in web design, layout & usability Graphics! Tidies up HTML’s evolution Geolocation handling Web Workers Local Storage Mobile

5. THE CANVAS!

6. The Canvas Originally for Safari Allows graphics to be drawn on webpage Simply an element on the webpage with width & height, with an ID, so Javascript can be used to draw graphics on it.

7. Canvas This is a canvas element, but your browser isn’t HTML5!

8. Canvas $(document).ready(function(){ canvas = $('#mycanvas')[0] context = canvas.getContext('2d') context.fillStyle = 'red' $(canvas).css("border", "1px solid black") context.beginPath() context.moveTo(160, 120) context.arc(160, 120, 70, 0, Math.PI * 2, false) context.closePath() context.fill() });

9. Filling Rectangles fillStyle() fillRect() clearRect() strokeRect()

10. Gradients? Mixing from colour to colour… context.createLinearGradient 4 parameters – x, y, width & height Diagonal? – easy! Multiple colours? – easy! Radial rather than Linear? – easy! context.createRadialGradient()

11. Canvas Filling with a pattern image = new Image() image.src = 'smile.png‘ pattern = context.createPattern(image, 'repeat') context.fillStyle = pattern

12. Text In case you need to place text into a canvas; context.strokeText(‘ISNE Rocks!’, 0, 0)

13. Lines lineCap butt, round, square lineJoin round, bevel, miter context.beginPath() context.moveTo() context.lineTo() context.stroke() context.closePath()

14. Images Complex Computer Graphics operations resize shadows compositing lighter darker transforms scale skew rotate

15. AUDIO & VIDEO

16. Audio & Video The web is not just about text & pictures No longer do we need to download and install a plugin player remember RealPlayer? FlashPlayer RealAudio

17. Codecs Codecs (enCODer/DECoder) HTML 5 supports several AAC MPS PCM Vorbis Different browsers support different codecs

18. HTML5 Audio & Video 2 new tags inside the tags you link to each of the different codecs you support

19. Geolocation

20. Where are you? Satellite data? GPS Data signals from known towers Fixed Wifi access points IP Address

21. Local Storage

22. Beyond Cookies Cookies are limited in size HTML5 allows access to a larger storage space (5-10MB depending on browser) remains through page loads, different visits & reboot

23. localStorage object localStorage.setItem(‘username’, ‘ken’) username = localStorage.getItem(‘username’) localStorage.removeItem(‘username’) localStorage.clear()

24. Web Workers

25. Webworkers Can work in the background When it finishes, it creates an event to send information back