SW Drupal Summit: HTML5+Drupal
1 like1,458 views
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.
![ARIA: Landmarks
HTML <div role="main">โฆ</div>
CSS div[role=main] {
color:#999;
}](https://image.slidesharecdn.com/html5drupal-110128164356-phpapp02/85/SW-Drupal-Summit-HTML5-Drupal-38-320.jpg)
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
- 5. SO CAN WE USE HTML5 TODAY?
- 6. YES. It was made with 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 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
- 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
- 21. W3C XHTML 2 WHATWG HTML5 HTML HTML 5 HTML5=CSS3
- 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. Simpli๏ฌed Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="๏ฌle.js"></script> <link rel="stylesheet" href="๏ฌle.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="node clear๏ฌx" > <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 (or re-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
- 35. HTML5 BASE THEME drupal.org/project/html5_base
- 36. ARIA Accessible Rich Internet Applications roles, states and properties
- 37. ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
- 38. ARIA: Landmarks HTML <div role="main">โฆ</div> CSS div[role=main] { color:#999; }
- 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. FORMS <label for="favorite-cms">Your Favorite CMS</label> <input id="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">
- 44. HTML5 Forms date picker search box 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> <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"/>
- 49. HTML5 TOOLS MODULE drupal.org/project/html5_tools
- 51. PUT HTML5 FORM INPUT ELEMENT SUPPORT INTO D7 CORE? drupal.org/node/675348
- 54. REALLY COOL.
- 56. HTML5 OTHER APIs
- 57. HTML5 OTHER APIs Geolocation Web Workers Communication Web Storage APIs O ine Websockets Applications
- 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
- 63. Pro HTML5 Programming Peter Lubbers, Brian Albers, and Frank Salim prohtml5.com
- 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
- 73. PLEASE COMMENT AND SHARE AT jen.cm/h3