HTML5all your Drupal XHTML belong to us

Jen Simmonsaka: jensimmons

(creator of Bartik)

Sunday, August 22, 2010

jen.cm/h

Sunday, August 22, 2010

HTML5 for Web DesignersJeremy Keith

Sunday, August 22, 2010

Bruce LawsonRemy Sharp

Introducing HTML5

Sunday, August 22, 2010

HTML5 Awesomeness(That I’m not going to talk about)

• <audio>

• <video>

• <canvas>

• data storage

• applicationCache

• geolocation

• web workers

• messaging API

• web sockets

• javascript APIs

Sunday, August 22, 2010

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>

Sunday, August 22, 2010

HTML5 Form Attributes

• autocomplete, min, max, multiple, pattern, step, required, placeholder

• <input type=email required>

• <input type=range min=1 max=11 name=tap>

Sunday, August 22, 2010

HTML5 Markup• <section>

• <aside>

• <article>

• <header>

• <hrgoup>

• <footer>

• <time>

• <nav>

• <small>

• <mark>

plus ARIA Roles

Sunday, August 22, 2010

HTML5 Header

• <meta charset=“UTF-8”>

• <link rel=”stylesheet” href=“file.css”>

• <script src=“file.js”></script>

Sunday, August 22, 2010

A Node in HTML5<article id="node-title" class="node clearfix" > <header> <h2 class="title"><a href="xxx">My First Node</a></h2> <small>Published on <time datetime=2010-08-22 pubdate>

August 22, 2010</time></small> </header> <p>Blah blah blah</p> <p>Blah blah blah</p> <p>Blah blah blah</p> <footer> <nav class="taxonomy"><ul><li><a>HTML5</a></li></ul> </nav> </footer></article> <!-- /node-->

Sunday, August 22, 2010

HTML5: Pieces of Cake

• <! doctype html>; just change it in the theme

• marking up the page.tpl.php file with HTML5 elements, just do it. Also block.tpl, node.tpl…

Sunday, August 22, 2010

Harder: HTML Deep in Drupal• $submitted

• menus

• $head

• $styles, $scripts

• input forms

• ??????

Sunday, August 22, 2010

Sunday, August 22, 2010

Solution: Short-termoverride everything Drupal does when it makes HTML

Sunday, August 22, 2010

• Allow people developing Drupal sites to more-easily change the HTML markup

• Might mean putting Semantic Views, Semantic CCK, Semantic Menus, Semantic Everything —> into Core

• Or doing something else that’s pretty radical

Solution: Long-termWe may need to seriously rethink how Drupal makes HMTL

Sunday, August 22, 2010

Bottom Line

• HTML5 is all about the markup being more semantic, and conveying information about the content and the context of that content.

• If Drupal gets a reputation of “yeah, but you can’t really do HMLT5 in Drupal without a whole lot of hard work” — we will be in trouble.

Sunday, August 22, 2010

Bottom Line

• The time to get this right is Drupal 8.

• We need to change Drupal so it can do HTML5, well, and correctly.

• And we need to start now.

Sunday, August 22, 2010

MORE• http://groups.drupal.org/html5

• http://groups.drupal.org/node/82664

• HTML Tools http://drupal.org/project/html5_tools

• Elements http://drupal.org/project/elements

• HTML Base http://drupal.org/project/html5_base

Sunday, August 22, 2010