Your SlideShare is downloading. ×
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With Drupal
Rockin' HTML5 With 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

Rockin' HTML5 With Drupal

5,663

Published on

What's up with HTML5? How can I use it with Drupal? A presentation from DrupalCon Chicago, March 2011.

What's up with HTML5? How can I use it with Drupal? A presentation from DrupalCon Chicago, March 2011.

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,663
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
59
Comments
0
Likes
4
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 DRUPAL JEN SIMMONS
  • 2. JEN SIMMONS Creator of Bartik, the default theme in Drupal 7 Designer, front end developer & drupal architectDrupaling since 2007, building websites since 1996 Senior Developer at Palantir jensimmons.com twitter: jensimmons
  • 3. SLIDES AT:jen.cm/h5
  • 4. EVOLUTIONOF SUCCESSFUL TECHNOLOGY
  • 5. AB
  • 6. WEB 1.0Find somethingReadLook at imagesClick links to find more things
  • 7. WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
  • 8. 1996 1999 20012005 today
  • 9. WEB 3.0 ?
  • 10. HTML5SEMANTIC MARKUP
  • 11. Simplified Document Head<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="stylesheet" href="file.css" />
  • 12. Drupal Document Head $head $styles $scripts
  • 13. New Structural Elements <section> <aside> <article> <nav> + outlining
  • 14. New Elements<header> <mark><footer> <time><fig> <meter><figcaption> <progress>
  • 15. ARIA: Landmark Roles<header role="banner"><div role="main"><nav role="navigation">
  • 16. html5doctor.com
  • 17. 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>
  • 18. Drupal HTML $submitted menu systemfiltered HTML input format security cleaning
  • 19. HTML5FORMS
  • 20. FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder="Drupal. What else?" /> />
  • 21. 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">
  • 22. *http://diveintohtml5.org/forms.html
  • 23. HTML5 Formssearch boxdate pickerrange with a slidercolor picker
  • 24. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css
  • 25. HTML5 Form Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" required><input type="range" min=1 max=11 name=tap>
  • 26. <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"/>
  • 27. HTML5 TOOLSMODULE drupal.org/project/html5_tools
  • 28. TOOLS Implement HTML5 Forms Simplify the output of:$scripts, $styles, $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter cores XHTML before its markup goes to the theme
  • 29. MORE HTML5AWESOMENESS(and some non-HTML5 awesomeness)
  • 30. VIDEOAUDIOGAMES
  • 31. <video> <audio><canvas>
  • 32. WEB STORAGE project.mahemo .com/sql.html
  • 33. WEB STORAGE Web SQL Index DB
  • 34. OFFLINEAPPLICATIONS
  • 35. GEOLOCATION
  • 36. DRAG & DROP
  • 37. WEB WORKERS
  • 38. WEB SOCKETS
  • 39. html5demos.com/web-socket
  • 40. COMMUNICATION & MESSAGING
  • 41. SO CAN WE USE HTML5 TODAY?
  • 42. NOT IFyou have to support three particular formerly-popular browsers
  • 43. INTERNET EXPLORER 4NETSCAPE NAVIGATOR 9 FIREFOX 2
  • 44. YES.
  • 45. Old Browser New BrowserNew Website Old Website Must work both ways.
  • 46. YOU CANT NOTHAVE YOUR SITE BE HTML5 (psssst… it already is)
  • 47. WHEN CAN I USE? caniuse.com
  • 48. *The HTML5 Enabling Script aka HTML5 Shiv fixes the lack of support in IE ejohn.org/blog/html5-shiv
  • 49. quirksmode.org/html5/inputs.htmlquirksmode.org/html5/inputs_mobile.html
  • 50. HTML5 DRUPAL WORKING GROUPgroups.drupal.org/html5 irc: #drupal-html5
  • 51. Andrei Matteescu Mason WendellEric Duran Alan Burke (amateescu) (carnarymason) Lin Clark Dave Reid Je Burnz Tim Plunkett (jburnz) Alex Ross Theresa Summa Nathan Smith Jen Simmons (bleen) (theresaanna) Jack Aponte John Zavocki Forest Mars John Albin Wilkins (jackalope) (johnvsc) (johnalbin) Laura Scott Jared Ponchot Adrian Simmons (laura s) Matt Farina (jponch) (adrinux) (mfer) Stan Angelo Jen Lampton Paul Irish Jacine Luisi Tom Behets Divya Manian (betz) (medden) Pontus Nilsson (nimbupani) Mark Krug (devildogmrk) António Almeida John Roberts Wilson (jrwilson) Jody Hamilton (perusio) … AND MORE! (Jody Lynn)
  • 52. LOGO TWITTERSTICKERS @drupalhtml5
  • 53. THE GROUPS GOALS Use HTML5 today on Drupal 6 & 7 websites. Figure out best practices for Drupal + HTML5through real world experiences, sharing knowledge and building community consensus. HTML5ify Drupal 8.
  • 54. HTML5 TOOLSMODULE drupal.org/project/html5_tools
  • 55. TOOLS Implement HTML5 Forms Simplify the output of:$scripts, $styles, $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter cores XHTML before its markup goes to the theme
  • 56. HTML5 BASETHEME drupal.org/project/html5_base
  • 57. HTML5 BASE Override core templates (node.tpl, page.tpl, block.tpl, comment.tpl,comment-wrapper.tpl, region.tpl, html.tpl, etc…) basically HTML5ify Stark
  • 58. LEARNMORE
  • 59. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  • 60. HTML5 for Web Designers Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
  • 61. IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
  • 62. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  • 63. THE SPEC ITSELF developers.whatwg.org
  • 64. html5doctor.com
  • 65. HTML5 DRUPAL GROUPgroups.drupal.org/html5 irc: #drupal-html5 twitter: drupalhtml5
  • 66. CORE CONVERSATIONLETS HTML5ify DRUPAL!WEDNESDAY • 1:00PM MICHIGAN A/B
  • 67. PLEASE COMMENT AND SHARE ATjen.cm/h5 jensimmons.comtwitter: jensimmons
  • 68. What did you think?Go to:chicago2011.drupal.org/sessions/rockin-html5-drupalClick the “Take the Survey” link.Or use the app on your phone.Thanks!

×