Mark Embling
Nov 14, 2014
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><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></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> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
Semantic Elements<DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></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> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
Semantic Elements<DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></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> <!-- some more articles --> <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<DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></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> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
Semantic Elements<DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></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> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
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/
<!--[if lt IE 9]><script src="…/html5.js"></script><![endif]-->
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