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

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

3. Browser Compatability
In development for a decade, but still not 100% fully supported…

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
<canvas id=‘mycanvas’ width=‘320’ height=‘240’> This is a canvas element, but your browser isn’t HTML5! </canvas>

8. <script> $(document)
<script> $(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() }); </script>
Canvas

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 lineJoin context.beginPath() context.closePath()
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? Data signals from known towers
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