HTML5: A primer on the web's present and future

A primer on the web’s present and future November 16,
2011 – Daniel Stout HTML5

HTML5 is an umbrella term (HTML, CSS3, etc.). HTML5 is
backward-compatible. HTML5 is a bunch of individual features. HTML5 works. Now. WHAT IS HTML5?

What do I need to do to upgrade to HTML5?
Change your DOCTYPE: <!DOCTYPE html> And that’s it. THE DOCTYPE

<article> (main content) <aside> (sidebar) <figure> & <figcaption> (descriptive
image) <footer> <header> <hgroup> (multilevel heading – <h1> allowed!) <mark> (marked text for some reason) <nav> (navigation) <section> (generic grouping) <time> (Either time or date or both) NEW SEMANTIC TAGS

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-‐8” /> <title>My HTML5</title>
<script src=“myscript.js”></script> (no “type” for JS or CSS) </head> <body> <article> <h1>Hello!</h1> <p>This is a document.</p> </article> </body> </html> HTML5 SIMPLIFIES

MULTIMEDIA Bye bye, Flash!

Browser support for video without a plugin. Problem: Different browsers
support different codecs (H.264, WebM, etc.). The video tag supports multiple sources. Implement like this: <video width="600" height="255" controls> <source src="myVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="myVideo.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="myVideo.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> VIDEO

Easy way to add audio to a page. Most browsers
support Ogg Vorbis, except Safari. Easy: <audio src="BlackEyedPeas-‐MyHumps.ogg" controls preload></audio> Include Safari: <audio controls preload> <source src="BlackEyedPeas-‐MyHumps.mp3" /> (for Safari) <source src="BlackEyedPeas-‐MyHumps.ogg" /> </audio> AUDIO

The canvas tag allows simple or complex drawing. <canvas>
is defined in the HTML and modified via JavaScript. <canvas id="myCanvas" width="350" height="350"></canvas> <script> var aCanvas = document.getElementById("myCanvas"); var aContext = aCanvas.getContext("2d"); aContext.beginPath(); aContext.moveTo(10, 20); aContext.lineTo(320, 63); aContext.strokeStyle = "#000"; aContext.stroke(); </script> DRAWING

<form> <input name=“search” placeholder=“Search the website”> <input type=“email” required> <input
type=“url”> <input type="number" min="0" max="12" step="3" value="6"> <input name=“q” type=“search”> <input type=“submit” value=“Submit”> </form> FORMS

API for determining location. More than one way to figure
out location: IP address, wireless networks, cell towers, GPS. Spec says that user permission must be granted before geolocation can be used. GEOLOCATION

Used to store data onto the user’s computer. 5 MB
of storage by default. Uses named key/value pairs. In the future, more robust solutions will be common: Web SQL Database. HTML5 LOCAL STORAGE

DOES IT ALL WORK? Making sure it does

Internet Explorer before IE9 doesn’t understand tags like <article>. But
JavaScript can fix this. Implement HTML5Shiv in the <head>: <!-‐-‐[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-‐-‐> https://code.google.com/p/html5shiv/ HTML5 SHIV

Modernizr is a JS library that checks HTML5 and CSS3
elements to see if they’re supported in the user’s browser. http://www.modernizr.com/ MODERNIZR

HTML5: A primer on the web's present and future

HTML5: A primer on the web's present and future

Daniel Stout

More Decks by Daniel Stout

Other Decks in Technology

Featured

Transcript

A primer on the web’s present and future November 16,

HTML5 is an umbrella term (HTML, CSS3, etc.). HTML5 is

What do I need to do to upgrade to HTML5?

<article> (main content) <aside> (sidebar) <figure> & <figcaption> (descriptive

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-‐8” /> <title>My HTML5</title>

MULTIMEDIA Bye bye, Flash!

Browser support for video without a plugin. Problem: Different browsers

Easy way to add audio to a page. Most browsers

The canvas tag allows simple or complex drawing. <canvas>

<form> <input name=“search” placeholder=“Search the website”> <input type=“email” required> <input

API for determining location. More than one way to figure

Used to store data onto the user’s computer. 5 MB

DOES IT ALL WORK? Making sure it does

Internet Explorer before IE9 doesn’t understand tags like <article>. But

Modernizr is a JS library that checks HTML5 and CSS3