rockin' html5 with drupal
DESCRIPTION
What's up with HTML5? How can I use it with Drupal? A presentation from DrupalCon Chicago, March 2011.TRANSCRIPT
ROCKIN' HTML5with
DRUPAL
JEN SIMMONS
JEN SIMMONSCreator of Bartik, the default theme in Drupal 7Designer, front end developer & drupal architect
Drupaling since 2007, building websites since 1996Senior Developer at Palantir
jensimmons.comtwitter: jensimmons
EVOLUTIONOF SUCCESSFUL TECHNOLOGY
A B
WEB 1.0Find somethingReadLook at imagesClick links to find more things
WEB 2.0CommentSign inAdd text, photos, video, audioConnect to other usersBuy thingsParticipate, not just read
1999 2001
today2005
2003
1996
WEB 3.0
?
HTML5SEMANTICMARKUP
<!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
<section>
<article>
<aside>
<nav>
+ outlining
New Structural Elements
<header>
<footer>
<fig>
<figcaption>
<mark>
<time>
<meter>
<progress>
New Elements
<header role="banner">
<div role="main">
<nav role="navigation">
ARIA: Landmark Roles
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>
$submitted
menu system
filtered HTML input format
security cleaning
Drupal HTML
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
search box
date picker
range with a slider
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
TOOLSImplement HTML5 Forms
Simplify the output of: $scripts, $styles, $submitted, etc.
Add HTML5 Elements to the Filtered HTML input filter
basically alter core's XHTML before it's markup goes to the theme
MORE HTML5 AWESOMENESS
(and some non-HTML5 awesomeness)
VIDEOAUDIOGAMES
<video><audio>
<canvas>
WEB STORAGE
project.mahemo!.com/sql.html
Web SQLIndex DB
WEB STORAGE
OFFLINE APPLICATIONS
GEOLOCATION
DRAG & DROP
WEB WORKERS
WEB SOCKETS
COMMUNICATION&
MESSAGING
SO CAN WE USE HTML5 TODAY?
NOT IFyou have to support
three particular formerly-popular
browsers
INTERNET EXPLORER 4
NETSCAPE NAVIGATOR 9
FIREFOX 2
YES.
Old BrowserNew Website
New BrowserOld Website
Must work both ways.
YOU CAN'T NOT HAVE YOUR SITE BE
HTML5
(psssst… it already is)
*The HTML5 Enabling Script aka HTML5 Shiv fixes the lack of support in IE
ejohn.org/blog/html5-shiv
quirksmode.org/html5/inputs.htmlquirksmode.org/html5/inputs_mobile.html
HTML5 DRUPALWORKINGGROUP
groups.drupal.org/html5irc: #drupal-html5
Eric Duran
Alex Ross (bleen)
Jack Aponte(jackalope)
Jen Lampton
Tim PlunkettLin Clark
Alan Burke
Forest Mars
Jared Ponchot (jponch)
Jacine Luisi
Theresa Summa (theresaanna)
Mason Wendell (carnarymason)
Andrei Matteescu (amateescu)
Laura Scott (laura s)
Je! Burnz(jburnz)
Mark Krug (devildogmrk)
John Zavocki (johnvsc)
Matt Farina(mfer)
Pontus Nilsson
Adrian Simmons(adrinux)
(medden)
Stan Angelo!Paul Irish
Nathan Smith
Tom Behets(betz)
António Almeida(perusio)
John Roberts Wilson(jrwilson)
John Albin Wilkins(johnalbin)
Jody Hamilton(Jody Lynn) … AND MORE!
Divya Manian(nimbupani)
Dave Reid
Jen Simmons
THE GROUP'S GOALSUse HTML5 today on Drupal 6 & 7 websites.
Figure out best practices for Drupal + HTML5 through real world experiences, sharing knowledge
and building community consensus.
HTML5ify Drupal 8.
HTML5 TOOLS
MODULE
drupal.org/project/html5_tools
TOOLSImplement HTML5 Forms
Simplify the output of: $scripts, $styles, $submitted, etc.
Add HTML5 Elements to the Filtered HTML input filter
basically alter core's XHTML before it's markup goes to the theme
HTML5 BASE
THEME
drupal.org/project/html5_base
HTML5 BASEOverride core templates
(node.tpl, page.tpl, block.tpl, comment.tpl, comment-wrapper.tpl, region.tpl, html.tpl, etc…)
basically HTML5ify Stark
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 Sharp
introducinghtml5.com
Pro HTML5 ProgrammingPeter Lubbers, Brian Albers,and Frank Salim
prohtml5.com
groups.drupal.org/html5irc: #drupal-html5
twitter: drupalhtml5
HTML5 DRUPALGROUP
LET'S HTML5ifyDRUPAL!
WEDNESDAY • 1:00PMMICHIGAN A/B
CORE CONVERSATION
PLEASE COMMENTAND SHARE AT
jensimmons.comtwitter: jensimmons
jen.cm/h5
What did you think?
Go to:chicago2011.drupal.org/sessions/rockin-html5-drupal
Click the “Take the Survey” link.Or use the app on your phone.
Thanks!