sw drupal summit: html5+drupal
Post on 18-Jan-2015
2.236 Views
Preview:
DESCRIPTION
TRANSCRIPT
ROCKIN' HTML5
with
DRUPAL
Southwest Drupal SummitJanuary 2011
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
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.
A SUPER-FAST HISTORY
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
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 allowedbut IE can’t read the xml mime-type…
XHTML 2if we knew then what we know now…
Then some stu! 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) Microformatsvs.replacing existing technology with XHTML2 + XForms + SVG + MathML + RDFa
W3C
XHTML 2
WHATWG
HTML5
HTML 5
W3C
XHTML 2
WHATWG
HTML5 HTML
HTML 5 HTML5=CSS3
Jeremy Keith's Keynote
AT DRUPALCON COPENHAGEN
drupalradar.com/video-jeremy-keith-keynote-session
SO CAN WE USE HTML5 TODAY?
YES.It was made with backwards and forwards compatibility in mind.
<!DOCTYPE html>
HTML5SEMANTICS
<!DOCTYPE html>
<meta charset="utf-8" />
<script src="file.js"></script>
<link rel="stylesheet" href="file.css" />
Simplified Document Head
$head
$styles
$scripts
Drupal Document Head
HTML5 TOOLS
MODULE
drupal.org/project/html5_tools
<section>
<article>
<header>
<footer>
<aside>
<nav>
<pubdate>
+ outlining
New Structural Elements
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-->
$submitted
Menu system
Filtered HTML input format
Supporting New Elements
Other New (or re-educated) Elements
<mark>
<time>
<pubdate>
<meter>
<progress>
<small>
<ruby>
+ more!
HTML5 BASE
THEME
drupal.org/project/html5_base
ARIAAccessible Rich Internet Applications
roles, states and properties
<header role="banner">
<div role="main">
<nav role="navigation">
ARIA: Landmark Roles
<div role="main">…</div>
div[role=main] { color:#999;
}
HTML
CSS
ARIA: Landmarks
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
HTML5FORMS
<label for="favorite-cms">Your Favorite CMS</label>
<input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
FORMS
/>
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">
*http://diveintohtml5.org/forms.html
date picker
search box
number as a slider with a range
color picker
HTML5 Forms
host.sonspring.com/formalize/jquery_demo.htmlhttp://sonspring.com/journal/formalize-css
HTML5 Form Attributes
autocomplete, min, max, multiple, pattern, step, required, placeholder
<input type="email" required>
<input type="range" min=1 max=11 name=tap>
<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"/>
HTML5 TOOLS
MODULE
drupal.org/project/html5_tools
ELEMENTSMODULE
drupal.org/project/elements
PUT HTML5 FORM INPUT
ELEMENT SUPPORT INTO
D7 CORE?
drupal.org/node/675348
MORE HTML5 AWESOMENESS
HTML5VIDEOAUDIOGAMES
REALLY COOL.
<video><audio><canvas>
HTML5OTHER
APIs
HTML5 OTHER APIsGeolocation
Communication APIs
Websockets
Web Workers
Web Storage
O"ine Applications
LEARNMORE
Jeremy Keith's Keynote
AT DRUPALCON COPENHAGEN
drupalradar.com/video-jeremy-keith-keynote-session
HTML5 for Web DesignersJeremy Keith
from A Book Apartbooks.alistapart.com/products/html5-for-web-designers
Introducing HTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
Pro HTML5 ProgrammingPeter Lubbers, Brian Albers,and Frank Salimprohtml5.com
dev.w3.org/html5/spec/Overview.html
THE SPEC ITSELF
DRUPALLYHTML5
HTML5 DRUPALGROUP
groups.drupal.org/html5irc: #drupal-html5
HTML5 TOOLS
MODULE
drupal.org/project/html5_tools
HTML5 BASE
THEME
drupal.org/project/html5_base
MEjensimmons.com
twitter: jensimmons
top related