Your SlideShare is downloading. ×
  • Like
HTML 5 Drupalcamp Ireland Dublin 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML 5 Drupalcamp Ireland Dublin 2010

  • 1,358 views
Published

 

Published in Technology
  • 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
1,358
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
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. 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="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" /> 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 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content- module.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?T" /> <link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?T" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
  • 20. Drupal 6.19 + Basic + Tools <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?z" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?z" /> <link rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?z" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style><![<!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
  • 21. Drupal 6.19 + Base + Tools <!DOCTYPE html> <html lang="en" dir="ltr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?G" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/default.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/html5.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/layout.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/style.css?G" /> <link rel="stylesheet" media="print" href="/sites/all/themes/html5_base/css/print.css?G" /> <!-- www.phpied.com/conditional-comments-block-downloads/ --> <!--[if IE]><![endif]--> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head>
  • 22. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  • 23. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  • 24. <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"/> More Elements
  • 25. How do we get those in Drupal?
  • 26. HTML5 TOOLS + ELEMENTS
  • 27. Other APIs Geolocation Websockets Web Workers Web Storage
  • 28. jen.cm/h2 Resources
  • 29. Resources http://html5doctor.com/ http://diveintohtml5.org/ http://drupalradar.com/ video-jeremy-keithkeynote- session
  • 30. Thank You! <label for="questions">Any Questions?</label> <input id="questions" name="questions" type="text" placeholder=”Your Question here" />