Your SlideShare is downloading. ×
0
Rockin’
HTML5
with
DRUPAL
BAD CAMP 2010
Jen Simmons
designer, front-end developer
creating websites since HTML2
made the Bartik theme for Drupal 7
member of HTML5...
These slides are already at:
jen.cm/h2
HTML5
What’s up with that?
A SUPER-FAST
HISTORY
Tim Berners-Lee
created HTML
and invented
the web.
“HTML Tags”
in 1991
slides at: jen.cm/h2
HTML Tags (TBL) 1991
HTML 2.0 (IETF) 1995
HTML 3.2 (W3C) 1997
HTML 4.0 (W3C) 1997
HTML 4.01 (W3C) 1999
slides at: jen.cm/h2
slides at: jen.cm/h2
slides at: jen.cm/h2
XHTML 1.0
<div class="blog-post">
.blog-post {
color:green
}
NOT
<FONT COLOR=GREEN>
slides at: jen.cm/h2
slides at: jen.cm/h2
XHTML 1.1
“text/html” mime-type not allowed
but IE can’t read the xml mime-type…
slides at: jen.cm/h2
XHTML 2
if we knew then what we know now…
Then some stuff happened.
there was a meeting and this vote…
slides at: jen.cm/h2
THE GREAT WEB
STANDARDS / SEMANTICS
SCHISM OF JUNE 2004
evolving XHTML1.0 + CSS + DOM
(including javascript) + (later) Mic...
W3C
XHTML 2
WHATWG
HTML5
HTML 5
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5
slides at: jen.cm/h2
“Priority of Constituencies”
users
authors
implementors
specifiers
theoretical purity
slides at: jen.cm/h2
DESIGN PRINCIPLES
Priority of Constituencies.
Support existing content.
Do not reinvent the wheel.
Pa...
Jeremy Keith's Keynote at
DrupalCon Copenhagen
http://drupalradar.com/
video-jeremy-keith-
keynote-session
slides at: jen....
SO CAN WE USE
HTML5 TODAY?
YES.
It was made with backwards and
forwards compatibility in mind.
Old Browser
New Website
New Browser
Old Website
Must work both ways.
HTML5
Semantics
(Yummy!)
Simplified Document Head
<!DOCTYPE html>
<meta charset="utf-8" />
<script src="file.js"></script>
<link rel="stylesheet" hre...
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!
*screenshot from HTML5 Now
ARIA Roles
<header role="banner">
<div role="main">
div[role=main] { color:#999; }
ARIA Roles
Accessible Rich Internet Applications
W3C Project, http://www.w3.org/TR/
wai-aria
A List Apart, April 2007, htt...
Introducing
HTML5
Bruce Lawson &
Remy Sharp
introducinghtml5.com
slides at: jen.cm/h2
HTML5 NOW
Tantek Çelik
tantek.com/
html5now
slides at: jen.cm/h2
The Spec Itself
slides at: jen.cm/h2
http://www.whatwg.org/html5
DRUPAL
+
HTML5
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5 BASE
drupal.org/project/html5_base
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5 TOOLS
drupal.org/project/html5_tools
slides at: jen.cm/h2
slides at: jen.cm/h2
Drupal 6.19 + Basic
slides at: jen.cm/h2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xh...
Drupal 6.19 + Basic + Tools
slides at: jen.cm/h2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.o...
Drupal 6.19 + Base + Tools
slides at: jen.cm/h2
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<meta http-equiv="Conte...
slides at: jen.cm/h2
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5
Forms
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...
http://diveintohtml5.org/forms.html
HTML5 FORMS
date picker
search box
number as a slider with a range
input type="color"
slides at: jen.cm/h2
HTML5 TOOLS
+
ELEMENTS
slides at: jen.cm/h2
HTML5
Video &
Audio
REALLY COOL.
HTML5
Other APIs
HTML5 APIs
Geolocation
Communication
APIs
Websockets
Web Workers
Web Storage
Offline
Applications
slides at: jen.cm/h2
PRO HTML5
PROGRAMMING
Peter Lubbers,
Brian Albers and
Frank Salim
slides at: jen.cm/h2
HTML5
Resources
http://diveintohtml5.org/
slides at: jen.cm/h2
http://html5doctor.com/
slides at: jen.cm/h2
Jeremy Keith's Keynote at
DrupalCon Copenhagen
http://drupalradar.com/
video-jeremy-keith-
keynote-session
slides at: jen....
Introducing
HTML5
Bruce Lawson &
Remy Sharp
introducinghtml5.com
slides at: jen.cm/h2
HTML5 NOW
Tantek Çelik
tantek.com/
html5now
slides at: jen.cm/h2
PRO HTML5
PROGRAMMING
Peter Lubbers,
Brian Albers and
Frank Salim
slides at: jen.cm/h2
The Spec Itself
slides at: jen.cm/h2
http://www.whatwg.org/html5
HTML5 + Drupal:
Drupal HTML5 Group
IRC: #drupal-html5
HTML5 Tools (& issue queue)
HTML5 Base (& issue queue)
slides at: je...
Jen Simmons
twitter: jensimmons
jensimmons.com
irc: jensimmons
please comment at jen.cm/h2
Rockinhtml5withdrupal badcamp
Rockinhtml5withdrupal badcamp
Upcoming SlideShare
Loading in...5
×

Rockinhtml5withdrupal badcamp

2,375

Published on

It's time to start considering HTML5 for your next project. Many aspects of HTML5 work today, others are right around the corner. What is the state of browser support for HTML5? Why would you want to use it? And how in the world can you get Drupal to fully-output HTML5? (Some parts are quite easy. Others are not.) I'll talk about this and more, including how you can join the movement to transform Drupal into a HTML5-generating machine.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,375
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Rockinhtml5withdrupal badcamp"

  1. 1. Rockin’ HTML5 with DRUPAL BAD CAMP 2010
  2. 2. Jen Simmons designer, front-end developer creating websites since HTML2 made the Bartik theme for Drupal 7 member of HTML5 Drupal Group jensimmons.com
  3. 3. These slides are already at: jen.cm/h2
  4. 4. HTML5 What’s up with that?
  5. 5. A SUPER-FAST HISTORY
  6. 6. Tim Berners-Lee created HTML and invented the web. “HTML Tags” in 1991 slides at: jen.cm/h2
  7. 7. HTML Tags (TBL) 1991 HTML 2.0 (IETF) 1995 HTML 3.2 (W3C) 1997 HTML 4.0 (W3C) 1997 HTML 4.01 (W3C) 1999 slides at: jen.cm/h2
  8. 8. slides at: jen.cm/h2
  9. 9. slides at: jen.cm/h2
  10. 10. XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT COLOR=GREEN> slides at: jen.cm/h2
  11. 11. slides at: jen.cm/h2 XHTML 1.1 “text/html” mime-type not allowed but IE can’t read the xml mime-type…
  12. 12. slides at: jen.cm/h2 XHTML 2 if we knew then what we know now…
  13. 13. Then some stuff happened. there was a meeting and this vote… slides at: jen.cm/h2
  14. 14. THE GREAT WEB STANDARDS / SEMANTICS SCHISM OF JUNE 2004 evolving XHTML1.0 + CSS + DOM (including javascript) + (later) Microformats vs. replacing existing technology with XHTML2 + XForms + SVG + MathML + RDFa slides at: jen.cm/h2
  15. 15. W3C XHTML 2 WHATWG HTML5 HTML 5 slides at: jen.cm/h2
  16. 16. slides at: jen.cm/h2 HTML5
  17. 17. slides at: jen.cm/h2 “Priority of Constituencies” users authors implementors specifiers theoretical purity
  18. 18. slides at: jen.cm/h2 DESIGN PRINCIPLES Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths.
  19. 19. Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session slides at: jen.cm/h2 HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers
  20. 20. SO CAN WE USE HTML5 TODAY?
  21. 21. YES. It was made with backwards and forwards compatibility in mind.
  22. 22. Old Browser New Website New Browser Old Website Must work both ways.
  23. 23. HTML5 Semantics (Yummy!)
  24. 24. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
  25. 25. New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav> + outlining
  26. 26. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress> <small> <ruby> + more!
  27. 27. *screenshot from HTML5 Now
  28. 28. ARIA Roles <header role="banner"> <div role="main"> div[role=main] { color:#999; }
  29. 29. ARIA Roles Accessible Rich Internet Applications W3C Project, http://www.w3.org/TR/ wai-aria A List Apart, April 2007, http:// www.alistapart.com/articles/waiaria
  30. 30. Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at: jen.cm/h2
  31. 31. HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2
  32. 32. The Spec Itself slides at: jen.cm/h2 http://www.whatwg.org/html5
  33. 33. DRUPAL + HTML5
  34. 34. slides at: jen.cm/h2
  35. 35. slides at: jen.cm/h2
  36. 36. HTML5 BASE drupal.org/project/html5_base slides at: jen.cm/h2
  37. 37. slides at: jen.cm/h2
  38. 38. HTML5 TOOLS drupal.org/project/html5_tools slides at: jen.cm/h2
  39. 39. slides at: jen.cm/h2
  40. 40. Drupal 6.19 + Basic slides at: jen.cm/h2 <!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><![e </head>
  41. 41. Drupal 6.19 + Basic + Tools slides at: jen.cm/h2 <!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><![e </head> removed type="text/css"
  42. 42. Drupal 6.19 + Base + Tools slides at: jen.cm/h2 <!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>
  43. 43. slides at: jen.cm/h2
  44. 44. slides at: jen.cm/h2
  45. 45. slides at: jen.cm/h2
  46. 46. HTML5 Forms
  47. 47. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  48. 48. <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"/>
  49. 49. http://diveintohtml5.org/forms.html
  50. 50. HTML5 FORMS date picker search box number as a slider with a range input type="color"
  51. 51. slides at: jen.cm/h2
  52. 52. HTML5 TOOLS + ELEMENTS slides at: jen.cm/h2
  53. 53. HTML5 Video & Audio
  54. 54. REALLY COOL.
  55. 55. HTML5 Other APIs
  56. 56. HTML5 APIs Geolocation Communication APIs Websockets Web Workers Web Storage Offline Applications
  57. 57. slides at: jen.cm/h2
  58. 58. PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim slides at: jen.cm/h2
  59. 59. HTML5 Resources
  60. 60. http://diveintohtml5.org/ slides at: jen.cm/h2
  61. 61. http://html5doctor.com/ slides at: jen.cm/h2
  62. 62. Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session slides at: jen.cm/h2 HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers
  63. 63. Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at: jen.cm/h2
  64. 64. HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2
  65. 65. PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim slides at: jen.cm/h2
  66. 66. The Spec Itself slides at: jen.cm/h2 http://www.whatwg.org/html5
  67. 67. HTML5 + Drupal: Drupal HTML5 Group IRC: #drupal-html5 HTML5 Tools (& issue queue) HTML5 Base (& issue queue) slides at: jen.cm/h2
  68. 68. Jen Simmons twitter: jensimmons jensimmons.com irc: jensimmons please comment at jen.cm/h2
  1. A particular slide catching your eye?

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

×