sw drupal summit: html5+drupal

73

Upload: jen-simmons

Post on 18-Jan-2015

2.235 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: SW Drupal Summit: HTML5+Drupal
Page 2: SW Drupal Summit: HTML5+Drupal

ROCKIN' HTML5

with

DRUPAL

Southwest Drupal SummitJanuary 2011

Page 3: SW Drupal Summit: HTML5+Drupal

JEN SIMMONSdesigner, front end developer & drupal architect

drupaling since 2007, building websites since 1996creator of Bartik, the default theme in Drupal 7

Senior Developer at Palantir.net

jensimmons.comtwitter: jensimmons

Page 4: SW Drupal Summit: HTML5+Drupal

SLIDES AT:

jen.cm/h3

Page 5: SW Drupal Summit: HTML5+Drupal

SO CAN WE USE HTML5 TODAY?

Page 6: SW Drupal Summit: HTML5+Drupal

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

Page 7: SW Drupal Summit: HTML5+Drupal

Old BrowserNew Website

New BrowserOld Website

Must work both ways.

Page 8: SW Drupal Summit: HTML5+Drupal

A SUPER-FAST HISTORY

Page 9: SW Drupal Summit: HTML5+Drupal

Tim Berners-Lee created HTML and invented the web.

“HTML Tags” in 1991

Tim Berners-Lee created HTML and invented the web.

“HTML Tags” in 1991

Page 10: SW Drupal Summit: HTML5+Drupal

HTML Tags (TBL) 1991

HTML 2.0 (IETF) 1995

HTML 3.2 (W3C) 1997

HTML 4.0 (W3C) 1997

HTML 4.01 (W3C) 1999

Page 11: SW Drupal Summit: HTML5+Drupal
Page 12: SW Drupal Summit: HTML5+Drupal
Page 13: SW Drupal Summit: HTML5+Drupal
Page 14: SW Drupal Summit: HTML5+Drupal
Page 15: SW Drupal Summit: HTML5+Drupal

XHTML 1.0<div class="blog-post">

.blog-post {color:green

}

NOT<FONT COLOR=GREEN>

Page 16: SW Drupal Summit: HTML5+Drupal

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

Page 17: SW Drupal Summit: HTML5+Drupal

XHTML 2if we knew then what we know now…

Page 18: SW Drupal Summit: HTML5+Drupal

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

Page 19: SW Drupal Summit: HTML5+Drupal

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

Page 20: SW Drupal Summit: HTML5+Drupal

W3C

XHTML 2

WHATWG

HTML5

HTML 5

Page 21: SW Drupal Summit: HTML5+Drupal

W3C

XHTML 2

WHATWG

HTML5 HTML

HTML 5 HTML5=CSS3

Page 22: SW Drupal Summit: HTML5+Drupal
Page 23: SW Drupal Summit: HTML5+Drupal

Jeremy Keith's Keynote

AT DRUPALCON COPENHAGEN

drupalradar.com/video-jeremy-keith-keynote-session

Page 24: SW Drupal Summit: HTML5+Drupal

SO CAN WE USE HTML5 TODAY?

Page 25: SW Drupal Summit: HTML5+Drupal

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

Page 26: SW Drupal Summit: HTML5+Drupal

<!DOCTYPE html>

Page 27: SW Drupal Summit: HTML5+Drupal

HTML5SEMANTICS

Page 28: SW Drupal Summit: HTML5+Drupal

<!DOCTYPE html>

<meta charset="utf-8" />

<script src="file.js"></script>

<link rel="stylesheet" href="file.css" />

Simplified Document Head

Page 29: SW Drupal Summit: HTML5+Drupal

$head

$styles

$scripts

Drupal Document Head

Page 30: SW Drupal Summit: HTML5+Drupal

HTML5 TOOLS

MODULE

drupal.org/project/html5_tools

Page 31: SW Drupal Summit: HTML5+Drupal

<section>

<article>

<header>

<footer>

<aside>

<nav>

<pubdate>

+ outlining

New Structural Elements

Page 32: SW Drupal Summit: HTML5+Drupal

node.tpl.php<article id="node-title" class="node clearfix" > <header> <h1 class="title"><a href="xxx">My First Node</a></h2 </header> <footer>Published on <time datetime=2011-01-22 pubdate>Jan 22</time> </footer> <p>Blah blah blah</p> <p>Blah blah blah</p> <footer> <div class="taxonomy"><ul><li><a>HTML5</a></li></ul></div> </footer></article> <!-- /node-->

Page 33: SW Drupal Summit: HTML5+Drupal

$submitted

Menu system

Filtered HTML input format

Supporting New Elements

Page 34: SW Drupal Summit: HTML5+Drupal

Other New (or re-educated) Elements

<mark>

<time>

<pubdate>

<meter>

<progress>

<small>

<ruby>

+ more!

Page 35: SW Drupal Summit: HTML5+Drupal

HTML5 BASE

THEME

drupal.org/project/html5_base

Page 36: SW Drupal Summit: HTML5+Drupal

ARIAAccessible Rich Internet Applications

roles, states and properties

Page 37: SW Drupal Summit: HTML5+Drupal

<header role="banner">

<div role="main">

<nav role="navigation">

ARIA: Landmark Roles

Page 38: SW Drupal Summit: HTML5+Drupal

<div role="main">…</div>

div[role=main] { color:#999;

}

HTML

CSS

ARIA: Landmarks

Page 40: SW Drupal Summit: HTML5+Drupal

HTML5FORMS

Page 41: SW Drupal Summit: HTML5+Drupal

<label for="favorite-cms">Your Favorite CMS</label>

<input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />

FORMS

/>

Page 42: SW Drupal Summit: HTML5+Drupal

HTML5 Forms<input type="text">

<input type="email">

<input type="url">

<input type="date">

<input type="time">

<input type="range">

<input type="color">

<input type="text">

<input type="tel">

<input type="week">

Page 44: SW Drupal Summit: HTML5+Drupal

date picker

search box

number as a slider with a range

color picker

HTML5 Forms

Page 46: SW Drupal Summit: HTML5+Drupal

HTML5 Form Attributes

autocomplete, min, max, multiple, pattern, step, required, placeholder

<input type="email" required>

<input type="range" min=1 max=11 name=tap>

Page 47: SW Drupal Summit: HTML5+Drupal

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

Page 49: SW Drupal Summit: HTML5+Drupal

HTML5 TOOLS

MODULE

drupal.org/project/html5_tools

Page 50: SW Drupal Summit: HTML5+Drupal

ELEMENTSMODULE

drupal.org/project/elements

Page 51: SW Drupal Summit: HTML5+Drupal

PUT HTML5 FORM INPUT

ELEMENT SUPPORT INTO

D7 CORE?

drupal.org/node/675348

Page 52: SW Drupal Summit: HTML5+Drupal

MORE HTML5 AWESOMENESS

Page 53: SW Drupal Summit: HTML5+Drupal

HTML5VIDEOAUDIOGAMES

Page 54: SW Drupal Summit: HTML5+Drupal

REALLY COOL.

Page 55: SW Drupal Summit: HTML5+Drupal

<video><audio><canvas>

Page 56: SW Drupal Summit: HTML5+Drupal

HTML5OTHER

APIs

Page 57: SW Drupal Summit: HTML5+Drupal

HTML5 OTHER APIsGeolocation

Communication APIs

Websockets

Web Workers

Web Storage

O"ine Applications

Page 58: SW Drupal Summit: HTML5+Drupal
Page 59: SW Drupal Summit: HTML5+Drupal

LEARNMORE

Page 60: SW Drupal Summit: HTML5+Drupal

Jeremy Keith's Keynote

AT DRUPALCON COPENHAGEN

drupalradar.com/video-jeremy-keith-keynote-session

Page 64: SW Drupal Summit: HTML5+Drupal

dev.w3.org/html5/spec/Overview.html

THE SPEC ITSELF

Page 65: SW Drupal Summit: HTML5+Drupal

DRUPALLYHTML5

Page 67: SW Drupal Summit: HTML5+Drupal

HTML5 DRUPALGROUP

groups.drupal.org/html5irc: #drupal-html5

Page 68: SW Drupal Summit: HTML5+Drupal

HTML5 TOOLS

MODULE

drupal.org/project/html5_tools

Page 69: SW Drupal Summit: HTML5+Drupal

HTML5 BASE

THEME

drupal.org/project/html5_base

Page 73: SW Drupal Summit: HTML5+Drupal

PLEASE COMMENTAND SHARE AT

jen.cm/h3