Rockin’ HTML5 with Drupal // DrupalCon Chicago

ROCKIN' HTML5 with DRUPAL JEN SIMMONS

JEN SIMMONS Creator of Bartik, the default theme in Drupal
7 Designer, front end developer & drupal architect Drupaling since 2007, building websites since 1996 Senior Developer at Palantir jensimmons.com twitter: jensimmons

SLIDES AT: jen.cm/h5

EVOLUTION OF SUCCESSFUL TECHNOLOGY

WEB 1.0 Find something Read Look at images Click links
to ﬁnd more things

WEB 2.0 Comment Sign in Add text, photos, video, audio
Connect to other users Buy things Participate, not just read

1999 2001 today 2005 1996

WEB 3.0 ?

HTML5 SEMANTIC MARKUP

<!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> <ﬁg> <ﬁgcaption> <mark> <time> <meter> <progress> New Elements

<header role="banner"> <div role="main"> <nav role="navigation"> ARIA: Landmark Roles

html5doctor.com

node.tpl.php <article id="node-title" class="node clearﬁx" > <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 ﬁltered HTML input format security cleaning Drupal
HTML

HTML5 FORMS

<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.html http://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

TOOLS Implement HTML5 Forms Simplify the output of: $scripts, $styles,
$submitted, etc. Add HTML5 Elements to the Filtered HTML input ﬁlter basically alter core's XHTML before it's markup goes to the theme

MORE HTML5 AWESOMENESS (and some non-HTML5 awesomeness)

VIDEO AUDIO GAMES

WEB STORAGE project.mahemo .com/sql.html

Web SQL Index DB WEB STORAGE

OFFLINE APPLICATIONS

GEOLOCATION

DRAG & DROP

WEB WORKERS

WEB SOCKETS

html5demos.com/web-socket

COMMUNICATION & MESSAGING

SO CAN WE USE HTML5 TODAY?

NOT IF you have to support three particular formerly-popular browsers

INTERNET EXPLORER 4 NETSCAPE NAVIGATOR 9 FIREFOX 2

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

YOU CAN'T NOT HAVE YOUR SITE BE HTML5 (psssst… it
already is)

caniuse.com WHEN CAN I USE?

*The HTML5 Enabling Script aka HTML5 Shiv fixes the lack
of support in IE ejohn.org/blog/html5-shiv

quirksmode.org/html5/inputs.html quirksmode.org/html5/inputs_mobile.html

HTML5 DRUPAL WORKING GROUP groups.drupal.org/html5 irc: #drupal-html5

Eric Duran Alex Ross (bleen) Jack Aponte (jackalope) Jen Lampton
Tim Plunkett Lin 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

TWITTER @drupalhtml5 STICKERS LOGO

THE GROUP'S GOALS Use 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

TOOLS Implement HTML5 Forms Simplify the output of: $scripts, $styles,
$submitted, etc. Add HTML5 Elements to the Filtered HTML input ﬁlter basically alter core's XHTML before it's markup goes to the theme

HTML5 BASE THEME drupal.org/project/html5_base

HTML5 BASE Override core templates (node.tpl, page.tpl, block.tpl, comment.tpl, comment-wrapper.tpl,
region.tpl, html.tpl, etc…) basically HTML5ify Stark

LEARN MORE

Jeremy Keith's Keynote AT DRUPALCON COPENHAGEN drupalradar.com/video-jeremy-keith-keynote-session

HTML5 for Web Designers Jeremy Keith from A Book Apart
books.alistapart.com/products/html5-for-web-designers

Introducing HTML5 Bruce Lawson and Remy Sharp introducinghtml5.com

Pro HTML5 Programming Peter Lubbers, Brian Albers, and Frank Salim
prohtml5.com

developers.whatwg.org THE SPEC ITSELF

html5doctor.com

groups.drupal.org/html5 irc: #drupal-html5 twitter: drupalhtml5 HTML5 DRUPAL GROUP

LET'S HTML5ify DRUPAL! WEDNESDAY • 1:00PM MICHIGAN A/B CORE CONVERSATION

PLEASE COMMENT AND SHARE AT jensimmons.com twitter: 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!

Rockin’ HTML5 with Drupal // DrupalCon Chicago

Rockin’ HTML5 with Drupal // DrupalCon Chicago

More Decks by Jen Simmons

Other Decks in Technology

Featured

Transcript