Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

HTML 5 Drupalcamp Ireland Dublin 2010

on

  • 1,581 views

 

Statistics

Views

Total Views
1,581
Views on SlideShare
1,581
Embed Views
0

Actions

Likes
1
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML 5 Drupalcamp Ireland Dublin 2010 Presentation Transcript

  • 1. DrupalCamp Dublin 20th November 2010
  • 2. Are You Ready? HTML 5
  • 3. When will HTML5 be ready?
  • 4. When will HTML5 be ready? [Too Late - its already here]
  • 5. Does it Work?
  • 6. Backwards compatibility AND Forwards compatibility Does it Work?
  • 7. Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. Design principles of HTML5
  • 8. users authors implementors specifiers theoretical purity “Priority of Constituencies”
  • 9. Old Browser - New Website
  • 10. New Browser - Old Website
  • 11. Must work both ways.
  • 12. <!DOCTYPE html> <meta charset=&quot;utf-8&quot; /> <script src=&quot;file.js&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;file.css&quot; /> Simplified Document Head
  • 13. New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav> + outlining
  • 14. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
  • 15. DRUPAL + HTML5
  • 16. groups.drupal.org/html5
  • 17. HTML5 BASE drupal.org/project/html5_base
  • 18. HTML5 TOOLS drupal.org/project/html5_tools
  • 19. Drupal 6.19 + Basic <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot; dir=&quot;ltr&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>d6.local</title> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <link rel=&quot;shortcut icon&quot; href=&quot;/misc/favicon.ico&quot; type=&quot;image/x-icon&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/node/node.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/defaults.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system-menus.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/user/user.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/cck/theme/content-module.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/views/css/views.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/default.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/layout.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/style.css?T&quot; /> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;/sites/all/themes/basic/css/print.css?T&quot; /> <!--[if lte IE 6]><style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;/sites/all/themes/basic/css/ie6.css&quot;;</style><![<!--[if IE 7]><style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;/sites/all/themes/basic/css/ie7.css&quot;;</style><![endif]--> </head>
  • 20. Drupal 6.19 + Basic + Tools <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot; dir=&quot;ltr&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>d6.local</title> <link rel=&quot;shortcut icon&quot; href=&quot;/misc/favicon.ico&quot; type=&quot;image/x-icon&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/node/node.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/defaults.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system-menus.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/user/user.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/cck/theme/content-module.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/views/css/views.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/default.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/layout.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/basic/css/style.css?z&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;/sites/all/themes/basic/css/print.css?z&quot; /> <!--[if lte IE 6]><style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;/sites/all/themes/basic/css/ie6.css&quot;;</style><![<!--[if IE 7]><style type=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;/sites/all/themes/basic/css/ie7.css&quot;;</style><![endif]--> </head>
  • 21. Drupal 6.19 + Base + Tools <!DOCTYPE html> <html lang=&quot;en&quot; dir=&quot;ltr&quot; > <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>d6.local</title> <link rel=&quot;shortcut icon&quot; href=&quot;/misc/favicon.ico&quot; type=&quot;image/x-icon&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/node/node.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/defaults.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/system/system-menus.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/modules/user/user.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/cck/theme/content-module.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/modules/views/css/views.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/html5_base/css/default.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/html5_base/css/html5.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/html5_base/css/layout.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;/sites/all/themes/html5_base/css/style.css?G&quot; /> <link rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;/sites/all/themes/html5_base/css/print.css?G&quot; /> <!-- www.phpied.com/conditional-comments-block-downloads/ --> <!--[if IE]><![endif]--> <!--[if lt IE 9]><script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;></script><![endif]--> </head>
  • 22. HTML5 FORM API <label for=&quot;favorite-cms&quot;>Your Favorite CMS</label> <input id=&quot;favorite-cms&quot; name=&quot;favorite-cms&quot; type=&quot;text&quot; placeholder=&quot;Drupal. What else?&quot; />
  • 23. HTML5 FORM API <label for=&quot;favorite-cms&quot;>Your Favorite CMS</label> <input id=&quot;favorite-cms&quot; name=&quot;favorite-cms&quot; type=&quot;text&quot; placeholder=&quot;Drupal. What else?&quot; />
  • 24. <label for=&quot;email&quot;>Email address</label> <input id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot; /> <label for=&quot;website&quot;>Website </label> <input id=&quot;website&quot; name=&quot;website&quot; type=&quot;url&quot; /> <label for=&quot;phone&quot;>Phone number</label> <input id=&quot;phone&quot; name=&quot;phone&quot; type=&quot;tel&quot; /> <label for=&quot;number&quot;>How many?</label> <input id=&quot;number&quot; name=&quot;number&quot; type=&quot;number&quot; min=&quot;0&quot; max=&quot;11&quot; step=&quot;1&quot; value=&quot;5&quot;/> More Elements
  • 25.  
  • 26. How do we get those in Drupal?
  • 27. HTML5 TOOLS + ELEMENTS
  • 28. Other APIs Geolocation Websockets Web Workers Web Storage
  • 29.  
  • 30.  
  • 31. jen.cm/h2 Resources
  • 32. Resources http://html5doctor.com/ http://diveintohtml5.org/ http://drupalradar.com/ video-jeremy-keithkeynote- session
  • 33. Thank You! <label for=&quot;questions&quot;>Any Questions?</label> <input id=&quot;questions&quot; name=&quot;questions&quot; type=&quot;text&quot; placeholder=”Your Question here&quot; />