269200 web programming language week 13 ken cosh html 5
TRANSCRIPT
![Page 1: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/1.jpg)
269200 Web Programming
LanguageWeek 13
Ken Cosh
HTML 5
![Page 2: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/2.jpg)
HTML5
• The latest new version of HTML
• New markup
• New Tags
• New APIs
• Initial Release:- 28th October 2014
Flash
![Page 3: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/3.jpg)
Browser Compatability
• In development for a decade, but still not 100% fully supported…
• http://caniuse.com/#cats=HTML5
![Page 4: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/4.jpg)
HTML5
• Leap Forward in web design, layout & usability
• Graphics!
• Tidies up HTML’s evolution
• Geolocation handling
• Web Workers
• Local Storage
• Mobile
![Page 5: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/5.jpg)
THE CANVAS!
![Page 6: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/6.jpg)
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.
![Page 7: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/7.jpg)
Canvas
<canvas id=‘mycanvas’ width=‘320’ height=‘240’>
This is a canvas element, but your browser isn’t HTML5!
</canvas>
![Page 8: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/8.jpg)
Canvas
<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>
![Page 9: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/9.jpg)
Filling Rectangles
• fillStyle()
• fillRect()
• clearRect()
• strokeRect()
![Page 10: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/10.jpg)
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()
![Page 11: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/11.jpg)
Canvas
• Filling with a pattern
• image = new Image()
• image.src = 'smile.png‘
• pattern = context.createPattern(image, 'repeat')
• context.fillStyle = pattern
![Page 12: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/12.jpg)
Text
• In case you need to place text into a canvas;
• context.strokeText(‘ISNE Rocks!’, 0, 0)
![Page 13: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/13.jpg)
Lines
• lineCap
• butt, round, square
• lineJoin
• round, bevel, miter
• context.beginPath()
• context.moveTo()
• context.lineTo()
• context.stroke()
• context.closePath()
![Page 14: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/14.jpg)
Images
• Complex Computer Graphics operations
• resize
• shadows
• compositing
• lighter
• darker
• transforms
• scale
• skew
• rotate
![Page 15: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/15.jpg)
AUDIO & VIDEO
![Page 16: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/16.jpg)
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
![Page 17: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/17.jpg)
Codecs
• Codecs (enCODer/DECoder)
• HTML 5 supports several
• AAC
• MPS
• PCM
• Vorbis
• Different browsers support different codecs
![Page 18: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/18.jpg)
HTML5 Audio & Video
• 2 new tags
• <audio>
• <video>
• inside the tags you link to each of the different codecs you support
![Page 19: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/19.jpg)
Geolocation
![Page 20: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/20.jpg)
Where are you?
• Satellite data?
• GPS
• Data signals from known towers
• Fixed Wifi access points
• IP Address
![Page 21: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/21.jpg)
Local Storage
![Page 22: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/22.jpg)
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
![Page 23: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/23.jpg)
localStorage object
• localStorage.setItem(‘username’, ‘ken’)
• username = localStorage.getItem(‘username’)
• localStorage.removeItem(‘username’)
• localStorage.clear()
![Page 24: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/24.jpg)
Web Workers
![Page 25: 269200 Web Programming Language Week 13 Ken Cosh HTML 5](https://reader035.vdocuments.site/reader035/viewer/2022062314/56649ddf5503460f94ad8944/html5/thumbnails/25.jpg)
Webworkers
• Can work in the background
• When it finishes, it creates an event to send information back