Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rockin' HTML5 with Drupal // Southwest Drupal S...

Jen Simmons
November 30, 2010

Rockin' HTML5 with Drupal // Southwest Drupal Summit

It's time to start considering HTML5 for your next project. Many aspects of HTML5 work today, others are right around the corner. What is the state of browser support for HTML5? Why would you want to use it? And how in the world can you get Drupal to fully-output HTML5? (Some parts are quite easy. Others are not.) I'll talk about this and more, including how you can join the movement to transform Drupal into a HTML5-generating machine.

Jen Simmons

November 30, 2010
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. JEN SIMMONS designer, front end developer & drupal architect drupaling

    since 2007, building websites since 1996 creator of Bartik, the default theme in Drupal 7 Senior Developer at Palantir.net jensimmons.com twitter: jensimmons
  2. 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
  3. HTML Tags (TBL) 1991 HTML 2.0 (IETF) 1995 HTML 3.2

    (W3C) 1997 HTML 4.0 (W3C) 1997 HTML 4.01 (W3C) 1999
  4. 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
  5. 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-->
  6. 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
  7. 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">
  8. date picker search box number as a slider with a

    range color picker HTML5 Forms
  9. HTML5 Form Attributes autocomplete, min, max, multiple, pattern, step, required,

    placeholder <input type="email" required> <input type="range" min=1 max=11 name=tap>
  10. <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"/>
  11. HTML5 for Web Designers Jeremy Keith from A Book Apart

    books.alistapart.com/products/html5-for-web-designers