1 / 179

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.

AaronGustafson
Download Presentation

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Smart Markup for Smarter Websites Aaron Gustafson Easy Designs, LLC @AaronGustafson slideshare.net/AaronGustafson

  2. HTML5 gives you more control over your documents and apps

  3. Paving our “cowpaths”

  4. The process is ongoing…

  5. …but the end is near. June 2004 WhatWG begins work on Web Applications 1.0 2014 HTML5 Standard? May 2011 HTML5 to Last Call 2007 Work begins at W3C 2004 2014

  6. You can use it now

  7. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.

  8. Browsers ignore what they don’t understand.

  9. For example <input type="date" name="dob"/>

  10. For example <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>

  11. Now back to those cowpaths…

  12. A great idea that we lost. Albert Einstein <fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption> </fig> The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html

  13. Microformats brought it back. Albert Einstein <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Albert Einstein</p> </div> The original “figure” microformat.

  14. HTML5 re-imagined it. Albert Einstein <figure> <img src="photo.jpeg" alt=""/> <legend>Albert Einstein</legend> </figure> The original HTML5 figure.

  15. Microformats adapted. Albert Einstein <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Albert Einstein</p> </div> The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure

  16. Microformats adapted. Albert Einstein <figure> <img src="photo.jpeg" alt=""/> <figcaption>Albert Einstein</figcaption> </figure> The current (dare I say final?) HTML5 figure.

  17. What’s the easiest way to write HTML5?

  18. Use the new doctype <!DOCTYPE html>

  19. The HTML4 Lexicon html meta head link style title base body dl dt dd b bdo script noscript map dfn object param p div ul ol li cite small iframe address area img br a pre code abbr kbd var q samp hr menu sup textarea ins del sub span strong select option optgroup label input form fieldset legend button i em blockquote h1 h2 h3 h4 h5 h6 table caption col colgroup tbody thead tfoot tr th td

  20. The HTML5 Lexicon html meta head link style title base body dl dt dd section article b bdo script noscript map dfn aside details summary canvas nav audio figure object param p div ul ol li cite small video iframe address area img br a figcaption pre code abbr kbd var q samp hr menu header footer command sup time source datalist textarea ins del sub span strong select option optgroup label input output ruby progress form fieldset legend button i em mark meter hgroup blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp tbody thead tfoot tr th td

  21. Our focus today html meta head link style title base body dl dt dd section article b bdo script noscript map dfn aside details summary canvas nav audio figure object param p div ul ol li cite small video iframe address area img br a figcaption pre code abbr kbd var q samp hr menu header footer command sup time source datalist textarea ins del sub span strong select option optgroup label input output ruby progress form fieldset legend button i em mark meter hgroup blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp tbody thead tfoot tr th td

  22. If only life were simpler…

  23. Simplification The html element <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">

  24. Simplification Character encoding <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />

  25. Simplification Styles and scripts <link rel="stylesheet" href="style-original.css" type="text/css" /> <style type=”text/css”> /* … */ </style> <script type=”text/javascript” src=”myscript.js”></script> <link rel="stylesheet" href="style-original.css" /> <style> /* … */ </style> <script src=”myscript.js”></script>

  26. Metamorphosis

  27. Nip/tuck The em element Represents a span of text text with emphatic stress. <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> The strong element Represents a span of text of great importance. <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p>

  28. Evil incarnate The small element Represents so-called “fine print” (e.g. disclaimers, caveats, etc.).

  29. Clarification The cite element The title of a cited work (e.g. a book, magazine, or journal). <p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>

  30. Resurrection The b element Represents a span of text offset from its surrounding content, but of no extra importance. <p>This presentation is about <b>HTML5</b>.</p> The i element Represents a span of text in an alternate voice or mood. <p>The <code>b</code> and <code>i</code> elements have been legitimized in HTML5. <i>Go figure.</i></p>

  31. Deeper meaning The hr element Represents a paragraph-level thematic break.

  32. Raw materials

  33. Organization The section element Represents a section of a document, typically with a title or heading. <section> <!-- pretty much anything can go here --> </section> The article element Represents a section of content that forms an independent part of a document or site. <article> <!-- pretty much anything can go here --> </article>

  34. section 38

  35. section > article 39

  36. 40

  37. article 41

  38. article > section 42

  39. Organization The header element Represents the header of a section. <header> <!-- titles, etc. go here --> </header> The footer element Represents the footer of a section. <footer> <!-- meta/supplementary information goes here --> </footer>

  40. 44

  41. header 45

  42. 46

  43. footer 47

  44. article 48

  45. article > header 49

  46. article 50

More Related