269200 Web Programming Language Week 14 Ken Cosh HTML 5

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

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

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

THE CANVAS!

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.

Canvas <canvas id=‘mycanvas’ width=‘320’ height=‘240’> This is a canvas element, but your browser isn’t HTML5! </canvas>

<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

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

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()

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

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

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

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

AUDIO & VIDEO

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

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

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

Geolocation

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

Local Storage

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

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

Web Workers

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