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

Rockin’ HTML5 with Drupal // DrupalCon Chicago

Rockin’ HTML5 with Drupal // DrupalCon Chicago

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.

Presented March 8, 2011 at DrupalCon Chicago

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

March 08, 2011
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. ROCKIN' HTML5 with DRUPAL JEN SIMMONS

  2. JEN SIMMONS Creator of Bartik, the default theme in Drupal

    7 Designer, front end developer & drupal architect Drupaling since 2007, building websites since 1996 Senior Developer at Palantir jensimmons.com twitter: jensimmons
  3. SLIDES AT: jen.cm/h5

  4. EVOLUTION OF SUCCESSFUL TECHNOLOGY

  5. None
  6. None
  7. A B

  8. WEB 1.0 Find something Read Look at images Click links

    to find more things
  9. None
  10. WEB 2.0 Comment Sign in Add text, photos, video, audio

    Connect to other users Buy things Participate, not just read
  11. None
  12. 1999 2001 today 2005 1996

  13. WEB 3.0 ?

  14. None
  15. HTML5 SEMANTIC MARKUP

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

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

  18. <section> <article> <aside> <nav> + outlining New Structural Elements

  19. <header> <footer> <fig> <figcaption> <mark> <time> <meter> <progress> New Elements

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

  21. None
  22. None
  23. None
  24. html5doctor.com

  25. 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>
  26. $submitted menu system filtered HTML input format security cleaning Drupal

    HTML
  27. HTML5 FORMS

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

    else?" /> FORMS />
  29. 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">
  30. *http://diveintohtml5.org/forms.html

  31. search box date picker range with a slider color picker

    HTML5 Forms
  32. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css

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

    placeholder <input type="email" required> <input type="range" min=1 max=11 name=tap>
  34. <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"/>
  35. None
  36. HTML5 TOOLS MODULE drupal.org/project/html5_tools

  37. TOOLS Implement HTML5 Forms Simplify the output of: $scripts, $styles,

    $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter core's XHTML before it's markup goes to the theme
  38. MORE HTML5 AWESOMENESS (and some non-HTML5 awesomeness)

  39. VIDEO AUDIO GAMES

  40. <video> <audio> <canvas>

  41. WEB STORAGE project.mahemo .com/sql.html

  42. Web SQL Index DB WEB STORAGE

  43. OFFLINE APPLICATIONS

  44. GEOLOCATION

  45. DRAG & DROP

  46. WEB WORKERS

  47. WEB SOCKETS

  48. html5demos.com/web-socket

  49. COMMUNICATION & MESSAGING

  50. SO CAN WE USE HTML5 TODAY?

  51. NOT IF you have to support three particular formerly-popular browsers

  52. INTERNET EXPLORER 4 NETSCAPE NAVIGATOR 9 FIREFOX 2

  53. YES.

  54. Old Browser New Website New Browser Old Website Must work

    both ways.
  55. YOU CAN'T NOT HAVE YOUR SITE BE HTML5 (psssst… it

    already is)
  56. caniuse.com WHEN CAN I USE?

  57. None
  58. *The HTML5 Enabling Script aka HTML5 Shiv fixes the lack

    of support in IE ejohn.org/blog/html5-shiv
  59. None
  60. quirksmode.org/html5/inputs.html quirksmode.org/html5/inputs_mobile.html

  61. None
  62. HTML5 DRUPAL WORKING GROUP groups.drupal.org/html5 irc: #drupal-html5

  63. Eric Duran Alex Ross (bleen) Jack Aponte (jackalope) Jen Lampton

    Tim Plunkett Lin Clark Alan Burke Forest Mars Jared Ponchot (jponch) Jacine Luisi Theresa Summa (theresaanna) Mason Wendell (carnarymason) Andrei Matteescu (amateescu) Laura Scott (laura s) Je Burnz (jburnz) Mark Krug (devildogmrk) John Zavocki (johnvsc) Matt Farina (mfer) Pontus Nilsson Adrian Simmons (adrinux) (medden) Stan Angelo Paul Irish Nathan Smith Tom Behets (betz) António Almeida (perusio) John Roberts Wilson (jrwilson) John Albin Wilkins (johnalbin) Jody Hamilton (Jody Lynn) … AND MORE! Divya Manian (nimbupani) Dave Reid Jen Simmons
  64. TWITTER @drupalhtml5 STICKERS LOGO

  65. THE GROUP'S GOALS Use HTML5 today on Drupal 6 &

    7 websites. Figure out best practices for Drupal + HTML5 through real world experiences, sharing knowledge and building community consensus. HTML5ify Drupal 8.
  66. HTML5 TOOLS MODULE drupal.org/project/html5_tools

  67. TOOLS Implement HTML5 Forms Simplify the output of: $scripts, $styles,

    $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter core's XHTML before it's markup goes to the theme
  68. HTML5 BASE THEME drupal.org/project/html5_base

  69. HTML5 BASE Override core templates (node.tpl, page.tpl, block.tpl, comment.tpl, comment-wrapper.tpl,

    region.tpl, html.tpl, etc…) basically HTML5ify Stark
  70. None
  71. LEARN MORE

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

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

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

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

    prohtml5.com
  76. developers.whatwg.org THE SPEC ITSELF

  77. html5doctor.com

  78. groups.drupal.org/html5 irc: #drupal-html5 twitter: drupalhtml5 HTML5 DRUPAL GROUP

  79. LET'S HTML5ify DRUPAL! WEDNESDAY • 1:00PM MICHIGAN A/B CORE CONVERSATION

  80. PLEASE COMMENT AND SHARE AT jensimmons.com twitter: jensimmons jen.cm/h5

  81. What did you think? Go to: chicago2011.drupal.org/sessions/rockin-html5-drupal Click the “Take

    the Survey” link. Or use the app on your phone. Thanks!