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

An introduction to HTML5. New tags and technologies available to all web developers.

1. A primer on the web’s present and future November 16, 2011 – Daniel Stout HTML5
2. 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?
3. What do I need to do to upgrade to HTML5? Change your DOCTYPE: <!DOCTYPE html> And that’s it. THE DOCTYPE
4. <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
5. <!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
6. MULTIMEDIA Bye bye, Flash!
7. 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
8. 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
9. 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
10. <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
11. 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
12. 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
13. DOES IT ALL WORK? Making sure it does
14. 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
15. 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