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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

August 22, 2010
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  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