the state of html5 support in drupal
Post on 11-Nov-2014
6.987 Views
Preview:
DESCRIPTION
TRANSCRIPT
State of HTML5 in Drupal
http://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 specification
1. 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 buzzword
1. CSS3 is often, incorrectly, lumped together with HTML5
2. Other than the doctype, nothing makes an HTML document HTML5
3. Set of enhanced capabilities to make your HTML more interactive and more semantic
http://iscss3partofhtml5.com/
Major Browser Support
http://caniuse.com
IE Firefox Chrome Safari Opera IOS Safari
Opera Mini
Opera Mobile
Android 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.0
Current 9.0 13.0 19.0 5.1 11.6 5.0 5.0-6.0 12.0 4.9
Near future
10.0 14.0 20.0 5.2 12.0
Farther future
15.9 21.0
Doesn't Drupal use HTML5 today?
Well, yes.
Zen 5
http://drupal.org/project/zen http://www.palantir.net/blog/all-new-zen-same-guiding-principles
We Want HTML5Directly inDrupal 8!
Welcome to the HTML5 Initiative
Bringing Drupal's markup to the 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
http://drupal.org/node/1193054
It's 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.
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!
● 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 Shiv
Improvements committed so far
http://bit.ly/KXRVax
Cleaner Doctype
Drupal 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
Drupal 8
<!DOCTYPE html>
<html<?php print $html_attributes; ?>>
<head>
<?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
<div id="page">
<div id="header" class="with-secondary-menu">
<div class="section clearfix">
<div id="name-and-slogan">
<div id="site-name">Drupal 7</div>
</div>
<div id="main-menu" class="navigation">
<h2 class="element-invisible">Main menu</h2>
<ul id="main-menu-links" class="links clearfix">
<li>Home</li>
</ul>
</div></div></div>
Drupal 8
<div id="page">
<header id="header">
<h1 id="site-name">Home</h1>
<nav role="navigation">
<ul id="main-menu"><li>Home</li></ul>
</nav>
</header>
</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 Required contributed modules● http://dgo.to/clientside_validation
Drupal 8 The pattern attribute is validated on both client-side and server-side $form['website'] = array(
'#type' => 'textfield',
'#title' => 'Website',
'#pattern' => 'https?://.+',
);
http://drupal.org/node/1174766
HTML5Shiv
Bringing HTML5 toolder browsersvia JavaScript
http://drupal.org/node/1077878http://github.com/aFarkas/html5shiv
What's 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
1. Twig for the templating engine (?)2. Better support for asynchronous content
delivery page component caching3. Break our page delivery into smaller bits and
vary cache policies by components rather than at page-level scopes
4. Responsive Bartik5. <progress> HTML5 tag for the Progress
Bars
What can we expect to have in D8?
http://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 InitiativesIt doesn't just stop at HTML5...
http://groups.drupal.org/drupal-initiatives
WSCCI - Web Services
Like Services module, but for Drupal core ● Larry "Crell" Garfield● Tag: WSCCI● #drupal-wscci● http://groups.drupal.
org/wscci
Mobile Initiative
Making Drupal a first-class mobile 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 youQuestions?
http://vickicaruana.blogspot.ca/2011/01/are-you-afraid-to-raise-your-hand.html
top related