The State of Html5 Support in Drupal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

The State of Html5 Support in Drupal

on

  • 6,970 views

 

Statistics

Views

Total Views
6,970
Views on SlideShare
6,804
Embed Views
166

Actions

Likes
7
Downloads
21
Comments
0

1 Embed 166

http://www.acquia.com 166

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The State of Html5 Support in Drupal Presentation Transcript

  • 1. State of HTML5 in Drupalhttp://cf1.8tracks.us/mix_covers/000/706/621/90510.max1024.jpg
  • 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. 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. 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. 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. 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. Doesnt Drupal use HTML5 today? Well, yes.
  • 8. Themeryhttp://themery.com/
  • 9. Zen 5http://drupal.org/project/zen http://www.palantir.net/blog/all-new-zen-same-guiding-principles
  • 10. Fenceshttp://drupal.org/project/fences
  • 11. HTML 5 Toolshttp://drupal.org/project/html5_tools
  • 12. OmegaThemehttp://omega.developmentgeeks.com
  • 13. We Want HTML5 Directly in Drupal 8!
  • 14. Welcome to the HTML5 InitiativeBringing Drupals markup tothe HTML5 specification● Jacine Luisi● Tag: HTML5● #drupal-html5● http://groups.drupal. org/html5
  • 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. Drupal HTML5 initiative issues
  • 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. 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. 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. 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. 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. 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. 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. HTML5 Shiv Bringing HTML5 to older browsers via JavaScripthttp://drupal.org/node/1077878http://github.com/aFarkas/html5shiv
  • 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. 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. 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. Other Drupal Initiatives It doesnt just stop at HTML5... http://groups.drupal.org/drupal-initiatives
  • 29. WSCCI - Web ServicesLike Services module, butfor Drupal core● Larry "Crell" Garfield● Tag: WSCCI● #drupal-wscci● http://groups.drupal. org/wscci
  • 30. Mobile InitiativeMaking Drupal a first-classmobile platform● John Albin Wilkins● Tag: Mobile● #drupal-mobile● http://groups.drupal. org/mobile/drupal-8
  • 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. Thank you, thank you Questions?/vickicaruana.blogspot.ca/2011/01/are-you-afraid-to-raise-your-hand.html