Downloaded 41 times
![ARIA: Landmarks
HTML <div role="main">…</div>
CSS div[role=main] {
color:#999;
}](https://image.slidesharecdn.com/html5drupal-110128164356-phpapp02/75/SW-Drupal-Summit-HTML5-Drupal-38-2048.jpg)
Uploaded byJen Simmons
SW Drupal Summit: HTML5+Drupal
The document summarizes Jen Simmons' presentation on using HTML5 with Drupal. It discusses how HTML5 was designed with backwards and forwards compatibility in mind so it can be used today. It outlines new HTML5 semantic elements, forms, and APIs as well as tools for using HTML5 in Drupal like the HTML5 Tools and Elements modules. Resources for learning more about HTML5 are also provided.
More Related Content
Similar to SW Drupal Summit: HTML5+Drupal
![[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!](https://cdn.slidesharecdn.com/ss_thumbnails/eduiconf-html5-cheezeburgers-111013121954-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
SW Drupal Summit: HTML5+Drupal
- 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.
- 5. SO CAN WEUSE HTML5 TODAY?
- 6. YES. It was madewith backwards and forwards compatibility in mind.
- 7. Old Browser New Browser New Website Old Website Must work both ways.
- 8. A SUPER-FAST HISTORY
- 9. Tim Berners-Lee created HTML andinvented 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
- 15. XHTML 1.0 <divclass="blog-post"> .blog-post { color:green } NOT <FONT COLOR=GREEN>
- 16. XHTML 1.1 “text/html” mime-typenot allowed but IE can’t read the xml mime-type…
- 17. XHTML 2 if weknew then what we know now…
- 18. Then some stuhappened. 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.
- 21. W3C XHTML 2 WHATWG HTML5 HTML HTML5 HTML5=CSS3
- 23. Jeremy Keith's Keynote AT DRUPALCON COPENHAGEN drupalradar.com/video-jeremy-keith-keynote-session
- 24. SO CAN WEUSE HTML5 TODAY?
- 25. YES. It was madewith backwards and forwards compatibility in mind.
- 26.
- 27.
- 28. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
- 29. Drupal Document Head $head $styles $scripts
- 30. HTML5 TOOLS MODULE drupal.org/project/html5_tools
- 31. New Structural Elements <section> <aside> <article> <nav> <header> <pubdate> <footer> + outlining
- 32. node.tpl.php <article id="node-title" class="nodeclearfix" > <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. Supporting New Elements $submitted Menu system Filtered HTML input format
- 34. Other New (orre-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
- 35. HTML5 BASE THEME drupal.org/project/html5_base
- 36. ARIA Accessible Rich InternetApplications roles, states and properties
- 37. ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
- 38. ARIA: Landmarks HTML <divrole="main">…</div> CSS div[role=main] { color:#999; }
- 39. ARIA Roles Accessible RichInternet Applications W3C Project, http://www.w3.org/TR/ wai-aria A List Apart, April 2007, http:// www.alistapart.com/articles/waiaria
- 40.
- 41. FORMS <label for="favorite-cms">Your Favorite CMS</label> <inputid="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" /> />
- 42. 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">
- 43.
- 44. HTML5 Forms date picker searchbox number as a slider with a range color picker
- 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> <inputid="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"/>
- 49. HTML5 TOOLS MODULE drupal.org/project/html5_tools
- 50.
- 51. PUT HTML5 FORM INPUT ELEMENT SUPPORT INTO D7 CORE? drupal.org/node/675348
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. HTML5 OTHER APIs Geolocation Web Workers Communication Web Storage APIs O ine Websockets Applications
- 59.
- 60. Jeremy Keith's Keynote AT DRUPALCON COPENHAGEN drupalradar.com/video-jeremy-keith-keynote-session
- 61. HTML5 for WebDesigners Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
- 62.
- 63. Pro HTML5 Programming Peter Lubbers, BrianAlbers, and Frank Salim prohtml5.com
- 64.
- 65.
- 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
- 72.
- 73. PLEASE COMMENT AND SHARE AT jen.cm/h3