2. About Me Who: Stu King – User Experience Designer Where: Magenic Studios – Magenic Technologies, Inc. Focused on Design, User Experience Analysis and RIA development What: Designer and Front-end Developer On the web: www.thedesigndrifter.com On the twitter: @designdrifter
9. For this presentation – If a feature of HTML5 is supported, or partially supported by a browser, the browser logo will be displayed on the slide
10.
11. Why do we need HTML5? What’s in it and why is it so important
12. The HTML5 spec strives to… Establish official rules regarding the use of older HTML elements and support existing content Establish standards for error handling that all browsers will follow Establish clearer rules regarding proper document structure for the benefit of accessibility and screen readers Provide client side form validation right in the browser
36. Now means – “this text is stylistically different but with no extra importance”. In a case where the text is important <strong> would be used instead.
40. What does it all mean? HTML5 gives browsers a new way to understand your content. New tags can be used to replace some of those <div> tags. Better content models mean better accessibility and more efficiency for screen readers. More granular outlines mean more flexible use of standard HTML headers such as <h1>
41. <section></section> Group together thematically related content<section> <h1>Code Camp</h1> <p>This event is awesome!</p> <p>so says Stu</p></section>
42. <header></header> Header has nothing to do with position. Markup header content within a section.<section> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <p>so says Stu</p></section>
43. <footer></footer> Footer has nothing to do with position. Markup footer content within a section.<section> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <footer> <p>so says Stu</p> </footer></section>
44. <aside></aside> Aside can be used for related but non-essential content. Pull quotes a good example of “aside” content.<aside> “Code Camp was a great experience, I plan to come back next year.”</aside>
45. <article></article> Article is an alternate to section, intended for use with syndicated content<article> <header> <h1>Code Camp</h1> </header> <p>This event is awesome!</p> <footer> <p>so says Stu</p> </footer></article>
46. <nav></nav> Nav is designed to contain major navigation elements.<nav> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul></nav>
48. <canvas></canvas> Canvas allows you to dynamically create drawings using JavaScript. More information is available in the HTML5 API. Interesting alternative to Flash and SilverLight for making games due to its ability to respond to user triggered events.<canvas width=“360” height=“240”> <p>No canvas support? Here is an image instead.</p> <imgsrc=“images/placeholder.jpg” alt=“hello”></canvas>
49. <audio></audio> Used to embed audio into a web page.<audio src=“music/musicfile.mp3”></audio>
50. <audio></audio> Automatically start the audio file.<audio src=“music/musicfile.mp3” autoplay></audio> How about a “loop”?<audio src=“music/musicfile.mp3” autoplay loop></audio>
52. <audio></audio> Gracefully fall back to other file formats. <audio controls> <source src=“music/musicfile.ogg”> <source src=“music/musicfile.mp3”> <source src=“music/musicfile.wav”> </audio>
53. <audio></audio> What about IE? IE requires Flash <audio controls> <object type=“application/x-shockwave-flash” data=“player.swf?soundfile=music/musicfile.mp3”> <param name=“movie” value=“player.swf?soundfile=music/musicfile.mp3”> </object> </audio>
54. <video></video> The video elements works just like the audio element<video src=“video/videofile.mp4” width=“360” height=“240”></video>
56. <video></video> Use the “poster” attribute to display an image before the video plays<video src=“video/videofile.mp4” width=“360” height=“240” controls poster=“images/preview.jpg”></video>
73. NumberNOTE: Support for input types is sketchy. Technically, browsers may support many of these input types but may not recognize what to do with them. In cases where they are not supported they will usually be treated as type=“text”.
79. Skip the complexity and offload the job to the browserIf you don’t want validation simply add “novalidate” to your form tag. <form novalidate>
80. How Can we use it now? What we can do to prepare?
81. How do we plan for the future? Admittedly, the HTML5 spec is still a bit fluid but it would be nice to plan for the future. Simply use the HTML5 DOCTYPE <DOCTYPE html> Use new element names as your CSS class names and start thinking in HTML5 terms. <div class=“article”><span class=“header”> <h1>Code Camp</h1></span> <p>This event is awesome!</p><span class=“footer”> <p>so says Stu</p></span></div>
82. How can we learn more? The when, what and where can if find it of HTML5