Html5 coredevsummit

1,776 views

Published on

Drupal makes XHTML1.0. But HTML5 is more awesome — so how are we

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,776
On SlideShare
0
From Embeds
0
Number of Embeds
485
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 coredevsummit

  1. 1. HTML5 all your Drupal XHTML belong to us Jen Simmons aka: jensimmons (creator of Bartik) Sunday, August 22, 2010
  2. 2. jen.cm/h Sunday, August 22, 2010
  3. 3. HTML5 for Web Designers Jeremy Keith Sunday, August 22, 2010
  4. 4. Introducing HTML5 Bruce Lawson Remy Sharp Sunday, August 22, 2010
  5. 5. HTML5 Awesomeness (That I’m not going to talk about) • <audio> • geolocation • <video> • web workers • <canvas> • messaging API • data storage • web sockets • applicationCache • javascript APIs Sunday, August 22, 2010
  6. 6. HTML5 Forms • <input type=text> • <input type=range> • <input type=email> • <input type=color> • <input type=url> • <input type=text> • <input type=date> • <input type=tel> • <input type=time> • <input type=week> Sunday, August 22, 2010
  7. 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> Sunday, August 22, 2010
  8. 8. HTML5 Markup • <section> • <footer> • <aside> • <time> • <article> • <nav> • <header> • <small> • <hrgoup> • <mark> plus ARIA Roles Sunday, August 22, 2010
  9. 9. HTML5 Header • <meta charset=“UTF-8”> • <link rel=”stylesheet” href=“file.css”> • <script src=“file.js”></script> Sunday, August 22, 2010
  10. 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--> Sunday, August 22, 2010
  11. 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… Sunday, August 22, 2010
  12. 12. Harder: HTML Deep in Drupal • $submitted • menus • $head • $styles, $scripts • input forms • ?????? Sunday, August 22, 2010
  13. 13. Sunday, August 22, 2010
  14. 14. Solution: Short-term override everything Drupal does when it makes HTML Sunday, August 22, 2010
  15. 15. Solution: Long-term We may need to seriously rethink how Drupal makes HMTL • 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 Sunday, August 22, 2010
  16. 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. Sunday, August 22, 2010
  17. 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. Sunday, August 22, 2010
  18. 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 Sunday, August 22, 2010

×