Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rockin' HTML5 with Drupal // Southwest Drupal Summit

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 30, 2010

Rockin' HTML5 with Drupal // Southwest Drupal Summit

It's time to start considering HTML5 for your next project. Many aspects of HTML5 work today, others are right around the corner. What is the state of browser support for HTML5? Why would you want to use it? And how in the world can you get Drupal to fully-output HTML5? (Some parts are quite easy. Others are not.) I'll talk about this and more, including how you can join the movement to transform Drupal into a HTML5-generating machine.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 30, 2010
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. None
  2. ROCKIN' HTML5 with DRUPAL Southwest Drupal Summit January 2011

  3. JEN SIMMONS designer, front end developer & drupal architect drupaling

    since 2007, building websites since 1996 creator of Bartik, the default theme in Drupal 7 Senior Developer at Palantir.net jensimmons.com twitter: jensimmons
  4. SLIDES AT: jen.cm/h3

  5. SO CAN WE USE HTML5 TODAY?

  6. YES. It was made with backwards and forwards compatibility in

    mind.
  7. Old Browser New Website New Browser Old Website Must work

    both ways.
  8. A SUPER-FAST HISTORY

  9. Tim Berners-Lee created HTML and invented the web. “HTML Tags”

    in 1991 Tim Berners-Lee created HTML and invented the web. “HTML Tags” in 1991
  10. HTML Tags (TBL) 1991 HTML 2.0 (IETF) 1995 HTML 3.2

    (W3C) 1997 HTML 4.0 (W3C) 1997 HTML 4.01 (W3C) 1999
  11. None
  12. None
  13. None
  14. None
  15. XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT

    COLOR=GREEN>
  16. XHTML 1.1 “text/html” mime-type not allowed but IE can’t read

    the xml mime-type…
  17. XHTML 2 if we knew then what we know now…

  18. Then some stu happened. there was a meeting and this

    vote…
  19. THE GREAT WEB STANDARDS / SEMANTICS SCHISM OF JUNE 2004

    evolving XHTML1.0 + CSS + DOM (including javascript) + (later) Microformats vs. replacing existing technology with XHTML2 + XForms + SVG + MathML + RDFa
  20. W3C XHTML 2 WHATWG HTML5 HTML 5

  21. W3C XHTML 2 WHATWG HTML5 HTML HTML 5 HTML5=CSS3

  22. None
  23. Jeremy Keith's Keynote AT DRUPALCON COPENHAGEN drupalradar.com/video-jeremy-keith-keynote-session

  24. SO CAN WE USE HTML5 TODAY?

  25. YES. It was made with backwards and forwards compatibility in

    mind.
  26. <!DOCTYPE html>

  27. HTML5 SEMANTICS

  28. <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css"

    /> Simplified Document Head
  29. $head $styles $scripts Drupal Document Head

  30. HTML5 TOOLS MODULE drupal.org/project/html5_tools

  31. <section> <article> <header> <footer> <aside> <nav> <pubdate> + outlining New

    Structural Elements
  32. node.tpl.php <article id="node-title" class="node clearfix" > <header> <h1 class="title"><a href="xxx">My

    First Node</a></h2 </header> <footer>Published on <time datetime=2011-01-22 pubdate>Jan 22</time> </footer> <p>Blah blah blah</p> <p>Blah blah blah</p> <footer> <div class="taxonomy"><ul><li><a>HTML5</a></li></ul></div> </footer> </article> <!-- /node-->
  33. $submitted Menu system Filtered HTML input format Supporting New Elements

  34. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress>

    <small> <ruby> + more!
  35. HTML5 BASE THEME drupal.org/project/html5_base

  36. ARIA Accessible Rich Internet Applications roles, states and properties

  37. <header role="banner"> <div role="main"> <nav role="navigation"> ARIA: Landmark Roles

  38. <div role="main">…</div> div[role=main] { color:#999; } HTML CSS ARIA: Landmarks

  39. ARIA Roles Accessible Rich Internet Applications W3C Project, http://www.w3.org/TR/ wai-aria

    A List Apart, April 2007, http:// www.alistapart.com/articles/waiaria
  40. HTML5 FORMS

  41. <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What

    else?" /> FORMS />
  42. HTML5 Forms <input type="text"> <input type="email"> <input type="url"> <input type="date">

    <input type="time"> <input type="range"> <input type="color"> <input type="text"> <input type="tel"> <input type="week">
  43. *http://diveintohtml5.org/forms.html

  44. date picker search box number as a slider with a

    range color picker HTML5 Forms
  45. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css

  46. HTML5 Form Attributes autocomplete, min, max, multiple, pattern, step, required,

    placeholder <input type="email" required> <input type="range" min=1 max=11 name=tap>
  47. <label for="email">Email address</label> <input id="email" name="email" type="email" /> <label for="website">Website

    </label> <input id="website" name="website" type="url" /> <label for="phone">Phone number</label> <input id="phone" name="phone" type="tel" /> <label for="number">How many?</label> <input id="number" name="number" type="number" min="0" max="11" step="1" value="5"/>
  48. None
  49. HTML5 TOOLS MODULE drupal.org/project/html5_tools

  50. ELEMENTS MODULE drupal.org/project/elements

  51. PUT HTML5 FORM INPUT ELEMENT SUPPORT INTO D7 CORE? drupal.org/node/675348

  52. MORE HTML5 AWESOMENESS

  53. HTML5 VIDEO AUDIO GAMES

  54. REALLY COOL.

  55. <video> <audio> <canvas>

  56. HTML5 OTHER APIs

  57. HTML5 OTHER APIs Geolocation Communication APIs Websockets Web Workers Web

    Storage O ine Applications
  58. None
  59. LEARN MORE

  60. Jeremy Keith's Keynote AT DRUPALCON COPENHAGEN drupalradar.com/video-jeremy-keith-keynote-session

  61. HTML5 for Web Designers Jeremy Keith from A Book Apart

    books.alistapart.com/products/html5-for-web-designers
  62. Introducing HTML5 Bruce Lawson and Remy Sharp introducinghtml5.com

  63. Pro HTML5 Programming Peter Lubbers, Brian Albers, and Frank Salim

    prohtml5.com
  64. dev.w3.org/html5/spec/Overview.html THE SPEC ITSELF

  65. DRUPALLY HTML5

  66. ON TWITTER @drupalhtml5

  67. HTML5 DRUPAL GROUP groups.drupal.org/html5 irc: #drupal-html5

  68. HTML5 TOOLS MODULE drupal.org/project/html5_tools

  69. HTML5 BASE THEME drupal.org/project/html5_base

  70. None
  71. None
  72. ME jensimmons.com twitter: jensimmons

  73. PLEASE COMMENT AND SHARE AT jen.cm/h3