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

Rockin’ HTML5 with Drupal // DrupalCon Chicago

Rockin’ HTML5 with Drupal // DrupalCon Chicago

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.

Presented March 8, 2011 at DrupalCon Chicago

Jen Simmons

March 08, 2011
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. 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
  2. A B

  3. WEB 2.0 Comment Sign in Add text, photos, video, audio

    Connect to other users Buy things Participate, not just read
  4. 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>
  5. 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">
  6. HTML5 Form Attributes autocomplete, min, max, multiple, pattern, step, required,

    placeholder <input type="email" required> <input type="range" min=1 max=11 name=tap>
  7. <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"/>
  8. TOOLS Implement 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
  9. *The HTML5 Enabling Script aka HTML5 Shiv fixes the lack

    of support in IE ejohn.org/blog/html5-shiv
  10. 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
  11. 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.
  12. TOOLS Implement 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
  13. HTML5 for Web Designers Jeremy Keith from A Book Apart

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