Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a SW Drupal Summit: HTML5+Drupal
Similar a SW Drupal Summit: HTML5+Drupal (20)
Más de Jen Simmons
Último
Último (20)
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. 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="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> <!-- /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