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 H...
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="utf-8" />
<script src="file.js"></script>
<link rel="stylesheet" href="file.css" />
Simplif...
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 "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric...
Drupal 6.19 + Basic + Tools
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm...
Drupal 6.19 + Base + Tools
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<meta http-equiv="Content-Type" content="tex...
HTML5 FORM API
<label for="favorite-cms">Your Favorite
CMS</label>
<input id="favorite-cms" name="favorite-cms"
type="text...
HTML5 FORM API
<label for="favorite-cms">Your Favorite
CMS</label>
<input id="favorite-cms" name="favorite-cms"
type="text...
<label for="email">Email address</label>
<input id="email" name="email" type="email" />
<label for="website">Website </lab...
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="questions">Any Questions?</label>
<input id="questions" name="questions"
type="text" placeholder=”Y...
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
Upcoming SlideShare
Loading in...5
×

HTML 5 Drupalcamp Ireland Dublin 2010

1,483

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,483
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML 5 Drupalcamp Ireland Dublin 2010

  1. 1. DrupalCamp Dublin 20th November 2010
  2. 2. Are You Ready? HTML 5
  3. 3. When will HTML5 be ready?
  4. 4. When will HTML5 be ready? [Too Late - its already here]
  5. 5. Does it Work?
  6. 6. Backwards compatibility AND Forwards compatibility Does it Work?
  7. 7. Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. Design principles of HTML5
  8. 8. users authors implementors specifiers theoretical purity “Priority of Constituencies”
  9. 9. Old Browser - New Website
  10. 10. New Browser - Old Website
  11. 11. Must work both ways.
  12. 12. <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" /> Simplified Document Head
  13. 13. New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav> + outlining
  14. 14. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
  15. 15. DRUPAL + HTML5
  16. 16. groups.drupal.org/html5
  17. 17. HTML5 BASE drupal.org/project/html5_base
  18. 18. HTML5 TOOLS drupal.org/project/html5_tools
  19. 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. 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. 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. 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. 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. 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. 25. How do we get those in Drupal?
  26. 26. HTML5 TOOLS + ELEMENTS
  27. 27. Other APIs Geolocation Websockets Web Workers Web Storage
  28. 28. jen.cm/h2 Resources
  29. 29. Resources http://html5doctor.com/ http://diveintohtml5.org/ http://drupalradar.com/ video-jeremy-keithkeynote- session
  30. 30. Thank You! <label for="questions">Any Questions?</label> <input id="questions" name="questions" type="text" placeholder=”Your Question here" />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×