Your SlideShare is downloading. ×
  • Like
SW Drupal Summit: HTML5+Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SW Drupal Summit: HTML5+Drupal

  • 2,207 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,207
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
36
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ROCKIN HTML5 with DRUPALSouthwest Drupal Summit January 2011
  • 2. JEN SIMMONS designer, front end developer & drupal architectdrupaling since 2007, building websites since 1996 creator of Bartik, the default theme in Drupal 7 Senior Developer at Palantir.net jensimmons.com twitter: jensimmons
  • 3. SLIDES AT:jen.cm/h3
  • 4. SO CAN WE USE HTML5 TODAY?
  • 5. YES.It was made with backwards andforwards compatibility in mind.
  • 6. Old Browser New BrowserNew Website Old Website Must work both ways.
  • 7. A SUPER-FAST HISTORY
  • 8. Tim Berners-Leecreated HTMLand inventedthe web.“HTML Tags” in 1991
  • 9. HTML Tags (TBL) 1991HTML 2.0 (IETF) 1995HTML 3.2 (W3C) 1997HTML 4.0 (W3C) 1997HTML 4.01 (W3C) 1999
  • 10. XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT COLOR=GREEN>
  • 11. XHTML 1.1“text/html” mime-type not allowedbut IE can’t read the xml mime-type…
  • 12. XHTML 2if we knew then what we know now…
  • 13. Then some stu happened.there was a meeting and this vote…
  • 14. THE GREAT WEBSTANDARDS / SEMANTICSSCHISM OF JUNE 2004evolving XHTML1.0 + CSS + DOM(including javascript) + (later) Microformatsvs.replacing existing technology with XHTML2+ XForms + SVG + MathML + RDFa
  • 15. W3CXHTML 2WHATWGHTML5HTML 5
  • 16. W3CXHTML 2WHATWGHTML5 HTMLHTML 5 HTML5=CSS3
  • 17. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  • 18. SO CAN WE USE HTML5 TODAY?
  • 19. YES.It was made with backwards andforwards compatibility in mind.
  • 20. <!DOCTYPE html>
  • 21. HTML5SEMANTICS
  • 22. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
  • 23. Drupal Document Head $head $styles $scripts
  • 24. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  • 25. New Structural Elements<section> <aside><article> <nav><header> <pubdate><footer> + outlining
  • 26. 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-->
  • 27. Supporting New Elements $submitted Menu system Filtered HTML input format
  • 28. Other New (or re-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
  • 29. HTML5 BASE THEMEdrupal.org/project/html5_base
  • 30. ARIAAccessible Rich Internet Applications roles, states and properties
  • 31. ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
  • 32. ARIA: LandmarksHTML <div role="main">…</div>CSS div[role=main] { color:#999; }
  • 33. ARIA RolesAccessible Rich Internet ApplicationsW3C Project, http://www.w3.org/TR/wai-ariaA List Apart, April 2007, http://www.alistapart.com/articles/waiaria
  • 34. HTML5FORMS
  • 35. FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder="Drupal. What else?" /> />
  • 36. 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">
  • 37. *http://diveintohtml5.org/forms.html
  • 38. HTML5 Formsdate pickersearch boxnumber as a slider with a rangecolor picker
  • 39. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css
  • 40. HTML5 Form Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" required><input type="range" min=1 max=11 name=tap>
  • 41. <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"/>
  • 42. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  • 43. ELEMENTS MODULEdrupal.org/project/elements
  • 44. PUT HTML5 FORM INPUT ELEMENT SUPPORT INTO D7 CORE?drupal.org/node/675348
  • 45. MORE HTML5AWESOMENESS
  • 46. HTML5VIDEOAUDIOGAMES
  • 47. REALLY COOL.
  • 48. <video> <audio><canvas>
  • 49. HTML5OTHER APIs
  • 50. HTML5 OTHER APIsGeolocation Web WorkersCommunication Web StorageAPIs O ineWebsockets Applications
  • 51. LEARNMORE
  • 52. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  • 53. HTML5 for Web Designers Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
  • 54. IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
  • 55. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  • 56. THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
  • 57. DRUPALLY HTML5
  • 58. ONTWITTER @drupalhtml5
  • 59. HTML5DRUPALGROUPgroups.drupal.org/html5 irc: #drupal-html5
  • 60. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  • 61. HTML5 BASE THEMEdrupal.org/project/html5_base
  • 62. ME jensimmons.comtwitter: jensimmons
  • 63. PLEASE COMMENT AND SHARE ATjen.cm/h3