ROCKIN HTML5       with   DRUPAL   JEN SIMMONS
JEN SIMMONS Creator of Bartik, the default theme in Drupal 7 Designer, front end developer & drupal architectDrupaling sin...
SLIDES AT:jen.cm/h5
EVOLUTIONOF SUCCESSFUL TECHNOLOGY
AB
WEB 1.0Find somethingReadLook at imagesClick links to find more things
WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
1996   1999           20012005               today
WEB 3.0  ?
HTML5SEMANTIC MARKUP
Simplified Document Head<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="stylesheet" href="fi...
Drupal Document Head       $head       $styles      $scripts
New Structural Elements <section>   <aside> <article>   <nav>             + outlining
New Elements<header>       <mark><footer>       <time><fig>           <meter><figcaption>    <progress>
ARIA: Landmark Roles<header role="banner"><div role="main"><nav role="navigation">
html5doctor.com
node.tpl.php<article id="node-title" class="node clearfix" >   <header>     <h1 class="title"><a href="xxx">My First Node</...
Drupal HTML       $submitted      menu systemfiltered HTML input format    security cleaning
HTML5FORMS
FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder...
HTML5 Forms<input type="text">    <input type="range"><input type="email">   <input type="color"><input type="url">     <i...
*http://diveintohtml5.org/forms.html
HTML5 Formssearch boxdate pickerrange with a slidercolor picker
host.sonspring.com/formalize/jquery_demo.html          http://sonspring.com/journal/formalize-css
HTML5 Form         Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" requ...
<label for="email">Email address</label><input id="email" name="email" type="email" /><label for="website">Website </label...
HTML5 TOOLSMODULE drupal.org/project/html5_tools
TOOLS   Implement HTML5 Forms     Simplify the output of:$scripts, $styles, $submitted, etc.  Add HTML5 Elements to the   ...
MORE HTML5AWESOMENESS(and some non-HTML5 awesomeness)
VIDEOAUDIOGAMES
<video> <audio><canvas>
WEB STORAGE project.mahemo .com/sql.html
WEB STORAGE  Web SQL  Index DB
OFFLINEAPPLICATIONS
GEOLOCATION
DRAG & DROP
WEB WORKERS
WEB SOCKETS
html5demos.com/web-socket
COMMUNICATION      &  MESSAGING
SO CAN WE USE HTML5 TODAY?
NOT IFyou have to support  three particular formerly-popular     browsers
INTERNET EXPLORER 4NETSCAPE NAVIGATOR 9     FIREFOX 2
YES.
Old Browser        New BrowserNew Website        Old Website     Must work both ways.
YOU CANT NOTHAVE YOUR SITE BE     HTML5    (psssst… it already is)
WHEN CAN I USE?    caniuse.com
*The HTML5 Enabling Script aka HTML5 Shiv       fixes the lack of support in IE            ejohn.org/blog/html5-shiv
quirksmode.org/html5/inputs.htmlquirksmode.org/html5/inputs_mobile.html
HTML5              DRUPAL              WORKING              GROUPgroups.drupal.org/html5   irc: #drupal-html5
Andrei Matteescu                                                         Mason WendellEric Duran                          ...
LOGO           TWITTERSTICKERS           @drupalhtml5
THE GROUPS GOALS  Use HTML5 today on Drupal 6 & 7 websites.  Figure out best practices for Drupal + HTML5through real worl...
HTML5 TOOLSMODULE drupal.org/project/html5_tools
TOOLS   Implement HTML5 Forms     Simplify the output of:$scripts, $styles, $submitted, etc.  Add HTML5 Elements to the   ...
HTML5 BASETHEME drupal.org/project/html5_base
HTML5 BASE        Override core templates  (node.tpl, page.tpl, block.tpl, comment.tpl,comment-wrapper.tpl, region.tpl, ht...
LEARNMORE
Jeremy Keiths                             Keynote                              AT DRUPALCON                              C...
HTML5 for Web Designers    Jeremy Keith             from A Book Apart    books.alistapart.com/products/html5-for-web-desig...
IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
THE SPEC ITSELF  developers.whatwg.org
html5doctor.com
HTML5             DRUPAL             GROUPgroups.drupal.org/html5   irc: #drupal-html5  twitter: drupalhtml5
CORE CONVERSATIONLETS HTML5ify  DRUPAL!WEDNESDAY • 1:00PM  MICHIGAN A/B
PLEASE COMMENT    AND SHARE ATjen.cm/h5 jensimmons.comtwitter: jensimmons
What did you think?Go to:chicago2011.drupal.org/sessions/rockin-html5-drupalClick the “Take the Survey” link.Or use the ap...
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Upcoming SlideShare
Loading in …5
×

Rockin' HTML5 With Drupal

6,160 views

Published on

What's up with HTML5? How can I use it with Drupal? A presentation from DrupalCon Chicago, March 2011.

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,160
On SlideShare
0
From Embeds
0
Number of Embeds
1,141
Actions
Shares
0
Downloads
61
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Rockin' HTML5 With Drupal

  1. 1. ROCKIN HTML5 with DRUPAL JEN SIMMONS
  2. 2. JEN SIMMONS Creator of Bartik, the default theme in Drupal 7 Designer, front end developer & drupal architectDrupaling since 2007, building websites since 1996 Senior Developer at Palantir jensimmons.com twitter: jensimmons
  3. 3. SLIDES AT:jen.cm/h5
  4. 4. EVOLUTIONOF SUCCESSFUL TECHNOLOGY
  5. 5. AB
  6. 6. WEB 1.0Find somethingReadLook at imagesClick links to find more things
  7. 7. WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
  8. 8. 1996 1999 20012005 today
  9. 9. WEB 3.0 ?
  10. 10. HTML5SEMANTIC MARKUP
  11. 11. Simplified Document Head<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="stylesheet" href="file.css" />
  12. 12. Drupal Document Head $head $styles $scripts
  13. 13. New Structural Elements <section> <aside> <article> <nav> + outlining
  14. 14. New Elements<header> <mark><footer> <time><fig> <meter><figcaption> <progress>
  15. 15. ARIA: Landmark Roles<header role="banner"><div role="main"><nav role="navigation">
  16. 16. html5doctor.com
  17. 17. 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>
  18. 18. Drupal HTML $submitted menu systemfiltered HTML input format security cleaning
  19. 19. HTML5FORMS
  20. 20. FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder="Drupal. What else?" /> />
  21. 21. HTML5 Forms<input type="text"> <input type="range"><input type="email"> <input type="color"><input type="url"> <input type="text"><input type="date"> <input type="tel"><input type="time"> <input type="week">
  22. 22. *http://diveintohtml5.org/forms.html
  23. 23. HTML5 Formssearch boxdate pickerrange with a slidercolor picker
  24. 24. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css
  25. 25. HTML5 Form Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" required><input type="range" min=1 max=11 name=tap>
  26. 26. <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"/>
  27. 27. HTML5 TOOLSMODULE drupal.org/project/html5_tools
  28. 28. TOOLS Implement HTML5 Forms Simplify the output of:$scripts, $styles, $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter cores XHTML before its markup goes to the theme
  29. 29. MORE HTML5AWESOMENESS(and some non-HTML5 awesomeness)
  30. 30. VIDEOAUDIOGAMES
  31. 31. <video> <audio><canvas>
  32. 32. WEB STORAGE project.mahemo .com/sql.html
  33. 33. WEB STORAGE Web SQL Index DB
  34. 34. OFFLINEAPPLICATIONS
  35. 35. GEOLOCATION
  36. 36. DRAG & DROP
  37. 37. WEB WORKERS
  38. 38. WEB SOCKETS
  39. 39. html5demos.com/web-socket
  40. 40. COMMUNICATION & MESSAGING
  41. 41. SO CAN WE USE HTML5 TODAY?
  42. 42. NOT IFyou have to support three particular formerly-popular browsers
  43. 43. INTERNET EXPLORER 4NETSCAPE NAVIGATOR 9 FIREFOX 2
  44. 44. YES.
  45. 45. Old Browser New BrowserNew Website Old Website Must work both ways.
  46. 46. YOU CANT NOTHAVE YOUR SITE BE HTML5 (psssst… it already is)
  47. 47. WHEN CAN I USE? caniuse.com
  48. 48. *The HTML5 Enabling Script aka HTML5 Shiv fixes the lack of support in IE ejohn.org/blog/html5-shiv
  49. 49. quirksmode.org/html5/inputs.htmlquirksmode.org/html5/inputs_mobile.html
  50. 50. HTML5 DRUPAL WORKING GROUPgroups.drupal.org/html5 irc: #drupal-html5
  51. 51. Andrei Matteescu Mason WendellEric Duran Alan Burke (amateescu) (carnarymason) Lin Clark Dave Reid Je Burnz Tim Plunkett (jburnz) Alex Ross Theresa Summa Nathan Smith Jen Simmons (bleen) (theresaanna) Jack Aponte John Zavocki Forest Mars John Albin Wilkins (jackalope) (johnvsc) (johnalbin) Laura Scott Jared Ponchot Adrian Simmons (laura s) Matt Farina (jponch) (adrinux) (mfer) Stan Angelo Jen Lampton Paul Irish Jacine Luisi Tom Behets Divya Manian (betz) (medden) Pontus Nilsson (nimbupani) Mark Krug (devildogmrk) António Almeida John Roberts Wilson (jrwilson) Jody Hamilton (perusio) … AND MORE! (Jody Lynn)
  52. 52. LOGO TWITTERSTICKERS @drupalhtml5
  53. 53. THE GROUPS GOALS Use HTML5 today on Drupal 6 & 7 websites. Figure out best practices for Drupal + HTML5through real world experiences, sharing knowledge and building community consensus. HTML5ify Drupal 8.
  54. 54. HTML5 TOOLSMODULE drupal.org/project/html5_tools
  55. 55. TOOLS Implement HTML5 Forms Simplify the output of:$scripts, $styles, $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter cores XHTML before its markup goes to the theme
  56. 56. HTML5 BASETHEME drupal.org/project/html5_base
  57. 57. HTML5 BASE Override core templates (node.tpl, page.tpl, block.tpl, comment.tpl,comment-wrapper.tpl, region.tpl, html.tpl, etc…) basically HTML5ify Stark
  58. 58. LEARNMORE
  59. 59. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  60. 60. HTML5 for Web Designers Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
  61. 61. IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
  62. 62. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  63. 63. THE SPEC ITSELF developers.whatwg.org
  64. 64. html5doctor.com
  65. 65. HTML5 DRUPAL GROUPgroups.drupal.org/html5 irc: #drupal-html5 twitter: drupalhtml5
  66. 66. CORE CONVERSATIONLETS HTML5ify DRUPAL!WEDNESDAY • 1:00PM MICHIGAN A/B
  67. 67. PLEASE COMMENT AND SHARE ATjen.cm/h5 jensimmons.comtwitter: jensimmons
  68. 68. What did you think?Go to:chicago2011.drupal.org/sessions/rockin-html5-drupalClick the “Take the Survey” link.Or use the app on your phone.Thanks!

×