269200 Web Programming

LanguageWeek 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>

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>

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

• 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

• <audio>

• <video>

• inside the tags you link to each of the different codecs you support

Geolocation

Where are you?

• Satellite data?

• 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