Rockin' HTML5 With Drupal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Rockin' HTML5 With Drupal

  • 6,213 views
Uploaded 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.

  • 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
6,213
On Slideshare
5,077
From Embeds
1,136
Number of Embeds
9

Actions

Shares
Downloads
56
Comments
0
Likes
4

Embeds 1,136

http://jensimmons.com 1,059
http://www.jensimmons.com 29
http://dev.jensimmons.gotpantheon.com 18
http://abelsutilo.tumblr.com 15
http://teaching.jensimmons.com 9
http://safe.tumblr.com 2
http://pm.geekpolis.com 2
http://3ghood.com 1
http://flavors.me 1

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!