HTML5 - One spec to rule them all

1.
HTML5One spec torule them all

2.
About MeWho: StuKing – User Experience DesignerWhere: Magenic Studios – Magenic Technologies, Inc.Focused on Design, User Experience Analysis and RIA developmentWhat: Designer and Front-end DeveloperOn the web: www.thedesigndrifter.comOn the twitter: @designdrifter

3.
About this presentationHowthis presentation is going to work

4.
Browser Support forHTML5A browser’s ability to support the features of HTML5 is based on the layout engine it usesLayout Engines

5.
Gecko – AllMozilla software, Fire Fox

6.
WebKit – Chrome and Safari

7.
Trident – InternetExplorer

8.
Presto – Opera

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.
If there isNO support for the feature the browser’s logo will not appear at allBrowser Support for HTML5Indicates full support for the HTML5 elementIndicates partial support for the HTML5 element

11.
Why do weneed HTML5?What’s in it and why is it so important

12.
The HTML5 specstrives to…Establish official rules regarding the use of older HTML elements and support existing contentEstablish standards for error handling that all browsers will followEstablish clearer rules regarding proper document structure for the benefit of accessibility and screen readersProvide client side form validation right in the browser

13.
Obsolete vs. DeprecatedTermsand conditions

14.
Obsolete vs. DeprecatedManyelements 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.

15.
<center>

16.
<dir>

17.
<font>

18.
<u>

19.
<s>

20.
<menu>

21.
Etc.Obsolete vs. DeprecatedArethey 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.

22.
<frame>, <frameset> and<noframes>

23.
<big>

24.
<font>

25.
<center>

26.
<strike>Obsolete vs. DeprecatedTherule 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.

27.
bgcolor

28.
cellpadding

29.
cellspacing

30.
valign

31.
alignObsolete vs. DeprecatedNotall presentational elements are out but in most cases their meaning has changed to something semantic.<small>

32.
Used to mean– “small font size”

33.
Now means –“the small print”

34.
<b>

35.
Used to mean– “render the text bold”

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.

37.
<i>

38.
Used to mean– “render this text in italics”

39.
Now means –“in an alternate voice or mood”Document MarkupIt’s the content that matters

40.
What does itall 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 thematicallyrelated content<section> <h1>Code Camp</h1> <p>This event is awesome!</p> <p>so says Stu</p></section>

42.
<header></header>Header has nothingto 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 nothingto 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 beused 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 analternate 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 designedto contain major navigation elements.<nav> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul></nav>

47.
Rich mediaWill westill need plugins?

48.
<canvas></canvas>Canvas allows youto 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 embedaudio into a web page.<audio src=“music/musicfile.mp3”></audio>

50.
<audio></audio>Automatically start theaudio file.<audio src=“music/musicfile.mp3” autoplay></audio>How about a “loop”?<audio src=“music/musicfile.mp3” autoplay loop></audio>

51.
<audio></audio>Include audio controls.<audiosrc=“music/musicfile.mp3” controls></audio>

52.
<audio></audio>Gracefully fall backto 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 elementsworks just like the audio element<video src=“video/videofile.mp4” width=“360” height=“240”></video>

55.
<video></video>Add controls<video src=“video/videofile.mp4”width=“360” height=“240” controls></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>

57.
Web formsWhat hasbeen changed or improved?

58.
Placeholder TextSet placeholdertext for and input field <form> <input name=“first” placeholder=“First Name”> </form>

59.
Autofocus FieldsSet thefocus on an input field <form> <input name=“first” autofocus> </form>

60.
Required FieldsSet aninput field to be required <form> <input name=“first” required> </form>

61.
New Input typesHTML5has 13 new input types and, of course, all the old ones still work as we would expect. Email

62.
URL

63.
Tel

64.
Search

65.
Color

66.
Week

67.
Month

68.
Date

69.
Time

70.
Datetime

71.
Datetime-local

72.
Range

73.
NumberNOTE: Support forinput 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”.

74.
Email Input <form> <input type=“email”> </form>

75.
Web address input <form> <inputtype=“url”> </form>

76.
Spinboxes <form> <input type=“number” min=“0” max=“10” step=“2” value=“6”> </form>

77.
Sliders <form> <input type=“range” min=“0” max=“10” step=“2” value=“6”> </form>

78.
Form ValidationSo whybother 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

79.
Skip the complexityand offload the job to the browserIf you don’t want validation simply add “novalidate” to your form tag.<form novalidate>

80.
How Can weuse it now?What we can do to prepare?

81.
How do weplan 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 welearn more?The when, what and where can if find it of HTML5

83.
HTML5 ResourcesGet abook – HTML5 for Web Designers – by Jeremy KeithThe official HTML5 Specification from W3Chttp://Dev.w3.org/html5/spec/overview.htmlHTML5 help and development resourceshttp://html5doctor.comGreat examples of HTML5 in actionhttp://html5gallery.comWhen 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…

84.
Thank youQ&A

HTML5 - One spec to rule them all

More Related Content

What's hot

Viewers also liked

Similar to HTML5 - One spec to rule them all

Recently uploaded

HTML5 - One spec to rule them all

Editor's Notes