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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SW Drupal Summit: HTML5+Drupal

2,270

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,270
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
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

×