Top Banner
269200 Web Programming Language Week 13 Ken Cosh HTML 5
25

269200 Web Programming Language Week 13 Ken Cosh HTML 5.

Jan 11, 2016

Download

Documents

Daisy Summers
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

269200 Web Programming

LanguageWeek 13

Ken Cosh

HTML 5

Page 2: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

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.

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.

THE CANVAS!

Page 6: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

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.

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.

Filling Rectangles

• fillStyle()

• fillRect()

• clearRect()

• strokeRect()

Page 10: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

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.

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.

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.

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.

AUDIO & VIDEO

Page 16: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

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.

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.

Geolocation

Page 20: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

Local Storage

Page 22: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

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.

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.

Web Workers

Page 25: 269200 Web Programming Language Week 13 Ken Cosh HTML 5.

Webworkers

• Can work in the background

• When it finishes, it creates an event to send information back