State of                         HTML5 in Drupalhttp://cf1.8tracks.us/mix_covers/000/706/621/90510.max1024.jpg
Jesse Beach● Joined Acquia in March  2010● CSS/Theming expert● Came to Drupal from  Wordpress● Involved in improving the  ...
Rob Loach● Joined Acquia in December  2009● One of the top Drupal Core  contributors (commits in 96 modules -     1088 com...
HTML5 is a specification1. Responds to the needs of web applications.2. Paves some cow paths of web development   e.g. the...
HTML5 is a buzzword1. CSS3 is often, incorrectly, lumped together   with HTML52. Other than the doctype, nothing makes an ...
Major Browser Support           IE            Firefox   Chrome   Safari   Opera   IOS       Opera     Opera    Android    ...
Doesnt Drupal use  HTML5 today?      Well, yes.
Themeryhttp://themery.com/
Zen 5http://drupal.org/project/zen   http://www.palantir.net/blog/all-new-zen-same-guiding-principles
Fenceshttp://drupal.org/project/fences
HTML 5 Toolshttp://drupal.org/project/html5_tools
OmegaThemehttp://omega.developmentgeeks.com
We Want HTML5  Directly in   Drupal 8!
Welcome to the HTML5 InitiativeBringing Drupals markup tothe HTML5 specification●   Jacine Luisi●   Tag: HTML5●   #drupal-...
HTML5 Initiative Goals● Have the most benefit for end users● Enable contributed modules and themes to  evolve using HTML5●...
Drupal HTML5 initiative issues
Its most important to note                                 the crossed-out ( closed                                 issues...
Contrib in Drupal 8?● Cleaner markup as HTML5 is provided out of  the box● More CSS themes● Less template overrides● Addit...
Improvements committed so far      ● Introduction of the <html> doctype      ● Numerous template and CSS improvements     ...
Cleaner Doctype     Drupal 7                                Drupal 8     <!DOCTYPE html PUBLIC "-//W3C//DTD      <!DOCTYPE...
Semantic Markup     Drupal 7                                    Drupal 8     <div id="page">                             <...
HTML5 Form Elements                                $form[telephone] = array(                                     #type => ...
Client-side Form Validation     Drupal 7                                 Drupal 8     Required contributed modules        ...
HTML5     Shiv     Bringing     HTML5 to     older browsers     via JavaScripthttp://drupal.org/node/1077878http://github....
Whats Missing?      ● Native <video> and <audio> media support             ○ Possible streaming from filefields      ● Add...
What can we expect to have in D8?     1. Twig for the templating engine (?)     2. Better support for asynchronous content...
Twig template support in core<!DOCTYPE html><html>    <head>          {% block head %}              <link rel="stylesheet"...
Other Drupal Initiatives  It doesnt just stop at HTML5...        http://groups.drupal.org/drupal-initiatives
WSCCI - Web ServicesLike Services module, butfor Drupal core●   Larry "Crell" Garfield●   Tag: WSCCI●   #drupal-wscci●   h...
Mobile InitiativeMaking Drupal a first-classmobile platform●   John Albin Wilkins●   Tag: Mobile●   #drupal-mobile●   http...
I Want To Help!●   http://groups.drupal.org/html5●   http://jacine.net/post/5614672142/html5●   http://buytaert.net/html5-...
Thank you, thank you                                             Questions?/vickicaruana.blogspot.ca/2011/01/are-you-afrai...
Upcoming SlideShare
Loading in …5
×

The State of Html5 Support in Drupal

7,264
-1

Published on

Published in: Technology

The State of Html5 Support in Drupal

  1. 1. State of HTML5 in Drupalhttp://cf1.8tracks.us/mix_covers/000/706/621/90510.max1024.jpg
  2. 2. Jesse Beach● Joined Acquia in March 2010● CSS/Theming expert● Came to Drupal from Wordpress● Involved in improving the Drupal 8 theming layer● Has a light-saber (fact)http://drupal.org/user/748566
  3. 3. Rob Loach● Joined Acquia in December 2009● One of the top Drupal Core contributors (commits in 96 modules - 1088 commits)● Came to Drupal from a C# ASP.NET background● Enjoys playing the Ukulele (fact)http://drupal.org/user/61114
  4. 4. HTML5 is a specification1. Responds to the needs of web applications.2. Paves some cow paths of web development e.g. the header and article elements.3. Introduces new embedded content e.g. audio, video and canvas.Comparison of HTML4 to HTML5: http://www.w3.org/TR/html5-diff
  5. 5. HTML5 is a buzzword1. CSS3 is often, incorrectly, lumped together with HTML52. Other than the doctype, nothing makes an HTML document HTML53. Set of enhanced capabilities to make your HTML more interactive and more semantichttp://iscss3partofhtml5.com/
  6. 6. Major Browser Support IE Firefox Chrome Safari Opera IOS Opera Opera Android Safari Mini Mobile Browser 3.6 8.0 9.0 10.0 2.1 6.0 10.0 3.2 11.0 2.2 7.0 11.0 17.0 4.0-4.1 11.1 2.3 8.0 12.0 18.0 5.0 4.2-4.3 11.5 3.0Current 9.0 13.0 19.0 5.1 11.6 5.0 5.0-6.0 12.0 4.9Near 10.0 14.0 20.0 5.2 12.0futureFarther 15.9 21.0future http://caniuse.com
  7. 7. Doesnt Drupal use HTML5 today? Well, yes.
  8. 8. Themeryhttp://themery.com/
  9. 9. Zen 5http://drupal.org/project/zen http://www.palantir.net/blog/all-new-zen-same-guiding-principles
  10. 10. Fenceshttp://drupal.org/project/fences
  11. 11. HTML 5 Toolshttp://drupal.org/project/html5_tools
  12. 12. OmegaThemehttp://omega.developmentgeeks.com
  13. 13. We Want HTML5 Directly in Drupal 8!
  14. 14. Welcome to the HTML5 InitiativeBringing Drupals markup tothe HTML5 specification● Jacine Luisi● Tag: HTML5● #drupal-html5● http://groups.drupal. org/html5
  15. 15. HTML5 Initiative Goals● Have the most benefit for end users● Enable contributed modules and themes to evolve using HTML5● Allow theme developers to control where to use the new semantic elements, and opt out entirely if they so choose
  16. 16. Drupal HTML5 initiative issues
  17. 17. Its most important to note the crossed-out ( closed issues), the 3 yellow issues (in review) and the two remaining in-progress issues. For the most part, the template HTML5 updates are done with a couple exceptions.http://drupal.org/node/1193054
  18. 18. Contrib in Drupal 8?● Cleaner markup as HTML5 is provided out of the box● More CSS themes● Less template overrides● Additional focus on mobile and responsive layouts● Fun experimental stuff like geolocation and local storage!
  19. 19. Improvements committed so far ● Introduction of the <html> doctype ● Numerous template and CSS improvements ○ http://drupal.org/node/1193054 ● Form API HTML5 additions ○ http://drupal.org/node/1183606 ● HTML5 Shivhttp://bit.ly/KXRVax
  20. 20. Cleaner Doctype Drupal 7 Drupal 8 <!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html> XHTML+RDFa 1.0//EN" "http://www.w3. <html<?php print $html_attributes; ?>> org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <head> <html xmlns="http://www.w3. org/1999/xhtml" xml:lang="<?php print <?php print $head; ?> $language->language; ?>" version=" <title><?php print $head_title; ? XHTML+RDFa 1.0" dir="<?php print ></title> $language->dir; ?>"<?php print <?php print $styles; ?> $rdf_namespaces; ?>> <?php print $scripts; ?> </head> <head profile="<?php print $grddl_profile; ?>"> <?php print $head; ?> <title><?php print $head_title; ? ></title> <?php print $styles; ?> <?php print $scripts; ?> </head>http://drupal.org/node/1077566
  21. 21. Semantic Markup Drupal 7 Drupal 8 <div id="page"> <div id="page"> <div id="header" class="with-secondary- <header id="header"> menu"> <h1 id="site-name">Home</h1> <div class="section clearfix"> <nav role="navigation"> <div id="name-and-slogan"> <ul id="main-menu" <div id="site-name">Drupal ><li>Home</li></ul> 7</div> </nav> </div> </header> <div id="main-menu" class=" </div> navigation"> <h2 class="element-invisible">Main menu</h2> <ul id="main-menu-links" class=" links clearfix"> <li>Home</li> </ul> </div></div></div>http://drupal.org/node/1077578
  22. 22. HTML5 Form Elements $form[telephone] = array( #type => tel, #title => t(Phone), ); $form[website] = array( #type => url, #title => t(Website), ); $form[email] = array( #type => email, #title => t(Email), ); $form[tickets] = array( #type => number, #title => t(Tickets required), );http://drupal.org/node/675348
  23. 23. Client-side Form Validation Drupal 7 Drupal 8 Required contributed modules The pattern attribute is validated on ● http://dgo.to/clientside_validation both client-side and server-side $form[website] = array( #type => textfield, #title => Website, #pattern => https?://.+, );http://drupal.org/node/1174766
  24. 24. HTML5 Shiv Bringing HTML5 to older browsers via JavaScripthttp://drupal.org/node/1077878http://github.com/aFarkas/html5shiv
  25. 25. Whats Missing? ● Native <video> and <audio> media support ○ Possible streaming from filefields ● Additional form elements ○ http://drupal.org/node/1183606 ● Larger features of the HTML5 Spec ○ Geo-location API ○ Local storage ○ Workers ○ Drag and drop file uploads ○ HTML Manifest ● Better client-side performance with "data-" attributes instead of JavaScript behaviors ● HTML5 support for Bartikhttp://bit.ly/M7Cfxs
  26. 26. What can we expect to have in D8? 1. Twig for the templating engine (?) 2. Better support for asynchronous content delivery page component caching 3. Break our page delivery into smaller bits and vary cache policies by components rather than at page-level scopes 4. Responsive Bartik 5. <progress> HTML5 tag for the Progress Barshttp://bit.ly/M18r7n
  27. 27. Twig template support in core<!DOCTYPE html><html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - My Webpage</title> {% endblock %} </head> <body> <header>{% block header %}{% endblock %}</header <div id="content">{% block content %}{% endblock %}</div> <footer> {% block footer %} &copy; Copyright 2012</a>. {% endblock %} </footer> </body></html>http://twig.sensiolabs.org/documentation
  28. 28. Other Drupal Initiatives It doesnt just stop at HTML5... http://groups.drupal.org/drupal-initiatives
  29. 29. WSCCI - Web ServicesLike Services module, butfor Drupal core● Larry "Crell" Garfield● Tag: WSCCI● #drupal-wscci● http://groups.drupal. org/wscci
  30. 30. Mobile InitiativeMaking Drupal a first-classmobile platform● John Albin Wilkins● Tag: Mobile● #drupal-mobile● http://groups.drupal. org/mobile/drupal-8
  31. 31. I Want To Help!● http://groups.drupal.org/html5● http://jacine.net/post/5614672142/html5● http://buytaert.net/html5-in-drupal-8● http://dgo.to/i/drupal?issue_tags=html5
  32. 32. Thank you, thank you Questions?/vickicaruana.blogspot.ca/2011/01/are-you-afraid-to-raise-your-hand.html
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×