© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

HTML5One spec to rule them all

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

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.comOn the twitter: @designdrifter

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

ABOUT THIS PRESENTATIONHow this presentation is going to work

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Browser Support for HTML5

• A browser’s ability to support the features of HTML5 is based on the layout engine it uses• Layout Engines

• Gecko – All Mozilla software, Fire Fox• WebKit – Chrome and Safari• Trident – Internet Explorer• Presto – Opera

• 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

• If there is NO support for the feature the browser’s logo will not appear at all

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Browser Support for HTML5

• Indicates full support for the HTML5 element

• Indicates partial support for the HTML5 element

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

WHY DO WE NEED HTML5?What’s in it and why is it so important

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

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

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

OBSOLETE VS. DEPRECATEDTerms and conditions

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Obsolete vs. Deprecated

• Many elements have been retired but that doesn’t mean you will never see them again. In order to be backward compatible the specification still supports old elements.

• Deprecated – a term used to describe those elements of HTML that we were not supposed to use anymore.• <center>• <dir>• <font>• <u>• <s>• <menu>• Etc.

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Obsolete vs. Deprecated

• Are they crazy? Some deprecated elements have been added back into the specification and re-labeled “Obsolete”. This distinction acknowledges that use of these elements is not recommended but must be supported anyway.

• Obsolete – some elements that are considered obsolete in the new specification.• <frame>, <frameset> and <noframes>• <big>• <font>• <center>• <strike>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Obsolete vs. Deprecated

• The rule is that all elements dealing with “presentational” effects should now be handled by CSS. This includes things like <i>, <b> and <u>.

• In addition, some presentational attributes are also out.• bgcolor• cellpadding• cellspacing• valign• align

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Obsolete vs. Deprecated

• Not all presentational elements are out but in most cases their meaning has changed to something semantic.• <small>

• Used to mean – “small font size”• Now means – “the small print”

• <b>• Used to mean – “render the text bold”• 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.

• <i>• Used to mean – “render this text in italics”• Now means – “in an alternate voice or mood”

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

DOCUMENT MARKUPIt’s the content that matters

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<section></section>

• Group together thematically related content

<section><h1>Code Camp</h1><p>This event is awesome!</p><p>so says Stu</p>

</section>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

RICH MEDIAWill we still need plugins?

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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><img src=“images/placeholder.jpg” alt=“hello”>

</canvas>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<audio></audio>

• Used to embed audio into a web page.

<audio src=“music/musicfile.mp3”></audio>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<audio></audio>

• Include audio controls.

<audio src=“music/musicfile.mp3” controls></audio>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<video></video>

• The video elements works just like the audio element

<video src=“video/videofile.mp4” width=“360” height=“240”></video>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<video></video>

• Add controls

<video src=“video/videofile.mp4” width=“360” height=“240” controls></video>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

<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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

WEB FORMSWhat has been changed or improved?

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Placeholder Text

• Set placeholder text for and input field

<form><input name=“first” placeholder=“First Name”>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Autofocus Fields

• Set the focus on an input field

<form><input name=“first” autofocus>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Required Fields

• Set an input field to be required

<form><input name=“first” required>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

New Input types• HTML5 has 13 new input types and, of course, all the old ones still work

as we would expect. • Email• URL• Tel• Search• Color• Week• Month• Date• Time• Datetime• Datetime-local• Range• Number

NOTE: 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”.

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Email Input

<form><input type=“email”>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Web address input

<form><input type=“url”>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Spinboxes

<form><input type=“number”

min=“0”max=“10”step=“2”value=“6”>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Sliders

<form><input type=“range”

min=“0”max=“10”step=“2”value=“6”>

</form>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

Form Validation

• So why bother with all these new input types? Form validation in HTML, that’s why. HTML5 will be able to replace any client side validation you currently do with JavaScript.• Solve the problem of disabled JavaScript• Skip the complexity and offload the job to the browser

• If you don’t want validation simply add “novalidate” to your form tag.<form novalidate>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

HOW CAN WE USE IT NOW?What we can do to prepare?

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

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>

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

HOW CAN WE LEARN MORE?The when, what and where can if find it of HTML5

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

HTML5 Resources

• Get a book – HTML5 for Web Designers – by Jeremy Keith

• The official HTML5 Specification from W3C• http://Dev.w3.org/html5/spec/overview.html

• HTML5 help and development resources• http://html5doctor.com

• Great examples of HTML5 in action• http://html5gallery.com

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

When is HTML5 going to become official?

• The HTML5 specification is predicted to become a “proposed recommendation” in 2022.

• The HTML5 specification becomes a “candidate recommendation” in 2012.

• The world ends in December of 2012…

© Magenic Technologies, Inc. 2010 Confidential and Proprietary Information

THANK YOUQ&A