HTML5

Mark Embling

What’s New?

• New semantic elements• New form <input> types• Data attributes• Audio/video capabilities• JS APIs– Canvas– Geo-location– Offline storage

Some of these are technically not part of the HTML5 spec (anymore)

But first…

A doctype which it’s actually possible to remember:

<DOCTYPE html>

• Puts all the browsers into standards mode• That’s about all it does

… and …

<meta charset="utf-8">

instead of

<meta http-equiv="Content-Type" value="text/html;charset=utf-8">

Semantic Elements

<header><hgroup><nav><article><section><aside><figure><figcaption><time>

<meter><progress><mark><footer>

Not a full list

Semantic Elements<DOCTYPE html><html><head></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Bla bla bla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article>  <footer><p>Copyright Me 2011</p></footer></body></html>



<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/things">Things</a></li> <li><a href="/widgets">Widgets</a></li> <li><a href="/doodads">Doodads</a></li> <li><a href="/thingumybobs">Thingumybobs</a></li> <li><a href="/contact">Contact Us</a></li> </ul></nav>



Semantic Elements: IE ≤ 8

• IE ignores them by default– Cannot be styled

• HTML5 Shim– http://remysharp.com/2009/01/07/html5-

enabling-script/– http://code.google.com/p/html5shim/



Dropped Elements

Deprecated elements in HTML 4.01 & XHTML 1 are gone:

<applet><acronym> (use <abbr> instead)<frame> / <frameset><font><center><u><blink> & <marquee><tt>

Good riddance! Not a full list

Form Input Types• More specific input types• Browsers can present optimised

controls/keyboards/UI

emailcolordatedatetimedatetime-

localemailmonthnumberrange

searchteltimeurlweek

• Browser support right now is patchy• If not supported, it’ll default to a standard text input

Form Validation

• Attributes for validation of input

patternrequiredmin/max

• Not quite there yet in terms of support– Opera is probably best now– But no ability to change/style validation

errors

Data Attributes

• Allows arbitrary pieces of data to be attached to any element– The sort of data which doesn’t belong in class or id

• Data can be used via JS– Client-side sorting– Binding/templating– Build client-side visualisations– Anything!

Data Attributes

• Any attribute beginning with data-

<tr data-person-ref="1003">…</tr><tr data-sorting-key="bloggs joe">…</tr><button data-bind="enable: SaveEnabled">…</button>

• Ignored by the browser and validators– No browser (including old ones) will be upset by this– Apply to any element you want

Multimedia

• Native audio and video in the browser (no plugins)

• <audio>– Ogg Vorbis, MP3, AAC (M4A), WAV

(browser dependant)

• <video>– WebM, Ogg (Theora + Vorbis), MP4 (H.264

+ AAC)(browser dependant)

Multimedia

<audio src="music.mp3" controls> Fallback content</audio>

or

<audio controls> <source src="music.m4a" type="audio/mp4"> <source src="music.mp3" type="audio/mpeg"> Fallback content</audio>

Canvas

• A raster-based drawing surface right there in the page

• Manipulate via JavaScript• 2D currently (3D coming)• Browser support: all modern browsers & IE6-8 with

help– Excanvas code.google.com/p/explorercanvas/

<canvas id="mycanvas" width="400" height="300"> Fallback content</canvas>

Canvas

• Data visualisation– Graphs

code.google.com/p/flot/– Dials/gauges

• Animation and effects• Games– Rob Hawkes’ Rawkets

rawkets.com

Rawkets Canvas & websockets game by Rob Hawkesrawkets.com

Canvas

1. Get the context for the canvas. This is what is used for drawing.

var canvas = document.getElementById("mycanvas");var context = canvas.getContext("2d");

or with jQuery…

var canvas = $("#mycanvas").get(0);var context = canvas.getContext("2d");

Canvas

2. Do some drawing

// Draw a couple of rectanglescontext.fillRect(x, y, w, h);context.strokeRect(x, y, w, h);

// Draw a linecontext.beginPath();context.moveTo(x, y);context.lineTo(x, y);context.closePath();

Canvas

3. Repeat step 2Maybe do some more drawing

• fillRect(x, y, w, h)• strokeRect(x, y, w,

h)• beginPath()• closePath()• moveTo(x, y)• fill()• stroke()

• lineTo(x, y)• rect(x, y, w, h)• arc(x, y, radius,

startAngle, endAngle, anticlockwise)

• arcTo(x1, y1, x2, y2,

radius)Plus a lot more

Geo-location

• Find the user’s location via JS• Never happens without the user’s permission

– Asks first

• Returns an object:– coords.latitude– coords.longitude– coords.altitude– coords.accuracy– coords.altitudeAccuracy– coords.heading– coords.speed– timestamp

Resources

Stuff worth looking at

• Dive Into HTML5diveintohtml5.org

• Mozilla Developer Networkdeveloper.mozilla.org

• Rawkes (Rob Hawkes’ Blog)rawkes.com

• HTML5 Logow3.org/html/logo/

Stuff I’ve mentioned

• HTML5 Shimcode.google.com/p/html5shim/

• Excanvas code.google.com/p/explorercanvas/

• Flot (canvas-based graphs)code.google.com/p/flot/

• Rawkets rawkets.com

Thanks for Listening

markembling.info@markembling

Date post:	14-Nov-2014
Category:	Technology
Upload:	mark-embling
View:	649 times
Download:	0 times

HTML5

Technology