HTML 5 Drupalcamp Ireland Dublin 2010

DrupalCamp Dublin
20th November 2010

When will HTML5 be ready?
[Too Late - its already here]

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”

<!DOCTYPE html>
<meta charset="utf-8" />
<script src="file.js"></script>
<link rel="stylesheet" href="file.css" />
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!

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-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 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" />

</head>

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>
<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" />

</head>

Drupal 6.19 + Base + Tools
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<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" />



</head>

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"/>
More Elements

How do we get those in Drupal?

Other APIs
Geolocation
Websockets
Web Workers
Web Storage

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=”Your Question here" />

HTML 5 Drupalcamp Ireland Dublin 2010

More Related Content

What's hot

Similar to HTML 5 Drupalcamp Ireland Dublin 2010

Recently uploaded

HTML 5 Drupalcamp Ireland Dublin 2010