Rockin' HTML5 With Drupal
4 likes1,867 views
The document presents a detailed discussion on integrating HTML5 with Drupal, highlighting new structural elements, forms, and tools for developers. Jen Simmons emphasizes the evolution from Web 1.0 to Web 3.0 and the importance of HTML5's semantic markup for improved user experiences. It encourages the community to adopt HTML5 practices in Drupal and participate in ongoing discussions and improvements.
Rockin' HTML5 With Drupal
- 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
- 7. AB
- 8. WEB 1.0 Find something Read Look at images Click links to find more things
- 10. WEB 2.0 Comment Sign in Add text, photos, video, audio Connect to other users Buy things Participate, not just read
- 12. 1996 1999 2001 2005 today
- 13. WEB 3.0 ?
- 16. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
- 17. Drupal Document Head $head $styles $scripts
- 18. New Structural Elements <section> <aside> <article> <nav> + outlining
- 19. New Elements <header> <mark> <footer> <time> <fig> <meter> <figcaption> <progress>
- 20. ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
- 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. Drupal HTML $submitted menu system filtered HTML input format security cleaning
- 27. HTML5 FORMS
- 28. FORMS <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" /> />
- 29. 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">
- 31. HTML5 Forms search box date picker range with a slider color picker
- 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"/>
- 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)
- 41. WEB STORAGE project.mahemo .com/sql.html
- 42. WEB STORAGE Web SQL Index DB
- 44. GEOLOCATION
- 45. DRAG & DROP
- 46. WEB WORKERS
- 47. WEB SOCKETS
- 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 Browser New Website Old Website Must work both ways.
- 55. YOU CAN'T NOT HAVE YOUR SITE BE HTML5 (psssst… it already is)
- 56. WHEN CAN I USE? caniuse.com
- 58. *The HTML5 Enabling Script aka HTML5 Shiv fixes the lack of support in IE ejohn.org/blog/html5-shiv
- 62. HTML5 DRUPAL WORKING GROUP groups.drupal.org/html5 irc: #drupal-html5
- 63. Andrei Matteescu Mason Wendell Eric 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)
- 64. LOGO TWITTER STICKERS @drupalhtml5
- 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.
- 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
- 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
- 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
- 75. Pro HTML5 Programming Peter Lubbers, Brian Albers, and Frank Salim prohtml5.com
- 76. THE SPEC ITSELF developers.whatwg.org
- 77. html5doctor.com
- 78. HTML5 DRUPAL GROUP groups.drupal.org/html5 irc: #drupal-html5 twitter: drupalhtml5
- 79. CORE CONVERSATION LET'S HTML5ify DRUPAL! WEDNESDAY • 1:00PM MICHIGAN A/B
- 80. PLEASE COMMENT AND SHARE AT jen.cm/h5 jensimmons.com twitter: jensimmons
- 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!