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

HTML5 and Drupal Core // DrupalCon Copenhagen

HTML5 and Drupal Core // DrupalCon Copenhagen

My presentation to the full group of Drupal core developers at DrupalCon Copenhagen.


Jen Simmons

August 22, 2010

More Decks by Jen Simmons

Other Decks in Technology


  1. HTML5 all your Drupal XHTML belong to us Jen Simmons

    aka: jensimmons (creator of Bartik)
  2. jen.cm/h

  3. HTML5 for Web Designers Jeremy Keith

  4. Bruce Lawson Remy Sharp Introducing HTML5

  5. 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
  6. 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>
  7. HTML5 Form Attributes • autocomplete, min, max, multiple, pattern, step,

    required, placeholder
 • <input type=email required> • <input type=range min=1 max=11 name=tap>
  8. HTML5 Markup • <section> • <aside> • <article> • <header>

    • <hrgoup> • <footer> • <time> • <nav> • <small> • <mark> plus ARIA Roles
  9. HTML5 Header • <meta charset=“UTF-8”> • <link rel=”stylesheet” href=“file.css”> •

    <script src=“file.js”></script>
  10. 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-->
  11. 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…
  12. Harder: HTML Deep in Drupal • $submitted • menus •

    $head • $styles, $scripts • input forms • ??????
  13. None
  14. Solution: Short-term override everything Drupal does when it makes HTML

  15. ! • 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-term We may need to seriously rethink how Drupal makes HMTL
  16. 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.
  17. 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.
  18. 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