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!

HTML 5 Drupalcamp Ireland Dublin 2010

on

  • 1,476 views

 

Statistics

Views

Total Views
1,476
Views on SlideShare
1,476
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 HTML 5 Drupalcamp Ireland Dublin 2010 Presentation Transcript

  • DrupalCamp Dublin 20th November 2010
  • Are You Ready? HTML 5
  • When will HTML5 be ready?
  • When will HTML5 be ready? [Too Late - its already here]
  • Does it Work?
  • Backwards compatibility AND Forwards compatibility Does it Work?
  • Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. Design principles of HTML5
  • users authors implementors specifiers theoretical purity “Priority of Constituencies”
  • Old Browser - New Website
  • New Browser - Old Website
  • Must work both ways.
  • <!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
  • New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav> + outlining
  • Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
  • DRUPAL + HTML5
  • groups.drupal.org/html5
  • HTML5 BASE drupal.org/project/html5_base
  • HTML5 TOOLS drupal.org/project/html5_tools
  • 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>
  • 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>
  • 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>
  • 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; />
  • 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; />
  • <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
  •  
  • How do we get those in Drupal?
  • HTML5 TOOLS + ELEMENTS
  • Other APIs Geolocation Websockets Web Workers Web Storage
  •  
  •  
  • jen.cm/h2 Resources
  • Resources http://html5doctor.com/ http://diveintohtml5.org/ http://drupalradar.com/ video-jeremy-keithkeynote- session
  • 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; />