Rockin’HTML5
with DRUPALBAD CAMP 2010
Jen Simmonsdesigner, front-end developer
creating websites since HTML2made the Bartik theme for Drupal 7member of HTML5 Drupal Group
jensimmons.com
HTML5What’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) 1999slides 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 allowedbut IE can’t read the xml mime-type…
slides at: jen.cm/h2
XHTML 2if we knew then what we know now…
Then some stu! 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) Microformatsvs.replacing existing technology with XHTML2 + XForms + SVG + MathML + RDFa
slides at: jen.cm/h2
W3C
XHTML 2
WHATWG
HTML5
HTML 5slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5
slides at: jen.cm/h2
“Priority of Constituencies”users
authorsimplementors
specifierstheoretical purity
slides at: jen.cm/h2
DESIGN PRINCIPLES
Priority of Constituencies.Support existing content.Do not reinvent the wheel.Pave the Cowpaths.
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
SO CAN WE USE HTML5 TODAY?
YES.It was made with backwards and forwards compatibility in mind.
Old BrowserNew Website
New BrowserOld 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" href="file.css" />
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, http://www.alistapart.com/articles/waiaria
Introducing HTML5
Bruce Lawson & Remy Sharpintroducinghtml5.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/h2http://www.whatwg.org/html5
DRUPAL+
HTML5
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5 BASEdrupal.org/project/html5_base
slides at: jen.cm/h2
slides at: jen.cm/h2
HTML5 TOOLSdrupal.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/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><![endif]--> <!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
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><![endif]--> <!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![endif]--> </head>
removed type="text/css"
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>
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" placeholder="Drupal. What else?" />
<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"/>
http://diveintohtml5.org/forms.html
HTML5 FORMSdate 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 APIsGeolocation
Communication APIs
Websockets
Web Workers
Web Storage
O"ine Applications
slides at: jen.cm/h2
PRO HTML5 PROGRAMMING
Peter Lubbers, Brian Albers and Frank Salim
slides at: jen.cm/h2
HTML5 Resources
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
Introducing HTML5
Bruce Lawson & Remy Sharpintroducinghtml5.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/h2http://www.whatwg.org/html5
HTML5 + Drupal:Drupal HTML5 Group
IRC: #drupal-html5
HTML5 Tools (& issue queue)
HTML5 Base (& issue queue)
slides at: jen.cm/h2
Jen Simmonstwitter: jensimmons
jensimmons.comirc: jensimmons
please comment at jen.cm/h2
Recommended
