The State of Html5 Support in Drupal

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 Drupal 8 theming layer● Has a light-saber (fact)http://drupal.org/user/748566

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

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

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/

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

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● http://groups.drupal. org/html5

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

Drupal HTML5 initiative issues

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

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!

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

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

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

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

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

HTML5 Shiv Bringing HTML5 to older browsers via JavaScripthttp://drupal.org/node/1077878http://github.com/aFarkas/html5shiv

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

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

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 %} © Copyright 2012</a>. {% endblock %} </footer> </body></html>http://twig.sensiolabs.org/documentation

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● http://groups.drupal. org/wscci

Mobile InitiativeMaking Drupal a first-classmobile platform● John Albin Wilkins● Tag: Mobile● #drupal-mobile● http://groups.drupal. org/mobile/drupal-8

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

Thank you, thank you Questions?/vickicaruana.blogspot.ca/2011/01/are-you-afraid-to-raise-your-hand.html

The State of Html5 Support in Drupal

by Acquia on Jun 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 160

Statistics

The State of Html5 Support in Drupal Presentation Transcript