Rockinhtml5withdrupal badcamp

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 Drupal Group
jensimmons.com

These slides are already at:
jen.cm/h2

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

XHTML 1.0
<div class="blog-post">
.blog-post {
color:green
}
NOT
<FONT COLOR=GREEN>

XHTML 1.1
“text/html” mime-type not allowed
but IE can’t read the xml mime-type…

XHTML 2
if we knew then what we know now…

Then some stuff happened.
there was a meeting and this vote…

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

W3C
XHTML 2
WHATWG
HTML5
HTML 5

“Priority of Constituencies”
users
authors
implementors
speciﬁers
theoretical purity

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
HTML5 for Web Designers
book by Jeremy Keith
http://books.alistapart.com/
products/html5-for-web-
designers

YES.
It was made with backwards and
forwards compatibility in mind.

Old Browser
New Website
New Browser
Old Website
Must work both ways.

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!

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 Sharp
introducinghtml5.com

HTML5 NOW
Tantek Çelik
tantek.com/
html5now

The Spec Itself
http://www.whatwg.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-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" />
<!--[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>

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

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

http://diveintohtml5.org/forms.html

HTML5 FORMS
date picker
search box
number as a slider with a range
input type="color"

HTML5 TOOLS
+
ELEMENTS

HTML5 APIs
Geolocation
Communication
APIs
Websockets
Web Workers
Web Storage
Offline
Applications

PRO HTML5
PROGRAMMING
Peter Lubbers,
Brian Albers and
Frank Salim

http://diveintohtml5.org/

http://html5doctor.com/

HTML5 + Drupal:
Drupal HTML5 Group
IRC: #drupal-html5
HTML5 Tools (& issue queue)
HTML5 Base (& issue queue)

Jen Simmons
twitter: jensimmons
jensimmons.com
irc: jensimmons
please comment at jen.cm/h2

Rockinhtml5withdrupal badcamp

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

Rockinhtml5withdrupal badcamp