the state of html5 support in drupal

32
State of HTML5 in Drupal http://cf1.8tracks.us/mix_covers/000/706/621/90510.max1024.jpg

Upload: acquia

Post on 11-Nov-2014

6.987 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: The State of Html5 Support in Drupal

State of HTML5 in Drupal

http://cf1.8tracks.us/mix_covers/000/706/621/90510.max1024.jpg

Page 2: The State of Html5 Support in Drupal

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

Page 3: The State of Html5 Support in Drupal

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

Page 4: The State of Html5 Support in Drupal

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

Page 5: The State of Html5 Support in Drupal

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/

Page 6: The State of Html5 Support in Drupal

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

Page 7: The State of Html5 Support in Drupal

Doesn't Drupal use HTML5 today?

Well, yes.

Page 8: The State of Html5 Support in Drupal

http://themery.com/

Themery

Page 9: The State of Html5 Support in Drupal

Zen 5

http://drupal.org/project/zen http://www.palantir.net/blog/all-new-zen-same-guiding-principles

Page 10: The State of Html5 Support in Drupal

Fences

http://drupal.org/project/fences

Page 11: The State of Html5 Support in Drupal

HTML 5 Tools

http://drupal.org/project/html5_tools

Page 12: The State of Html5 Support in Drupal

OmegaTheme

http://omega.developmentgeeks.com

Page 13: The State of Html5 Support in Drupal

We Want HTML5Directly inDrupal 8!

Page 14: The State of Html5 Support in Drupal

Welcome to the HTML5 Initiative

Bringing Drupal's markup to the HTML5 specification ● Jacine Luisi● Tag: HTML5● #drupal-html5● http://groups.drupal.

org/html5

Page 15: The State of Html5 Support in Drupal

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

Page 16: The State of Html5 Support in Drupal

Drupal HTML5 initiative issues

Page 17: The State of Html5 Support in Drupal

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.

Page 18: The State of Html5 Support in Drupal

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!

Page 19: The State of Html5 Support in Drupal

● 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

Page 20: The State of Html5 Support in Drupal

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

Page 21: The State of Html5 Support in Drupal

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

Page 22: The State of Html5 Support in Drupal

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

Page 23: The State of Html5 Support in Drupal

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

Page 24: The State of Html5 Support in Drupal

HTML5Shiv

Bringing HTML5 toolder browsersvia JavaScript

http://drupal.org/node/1077878http://github.com/aFarkas/html5shiv

Page 25: The State of Html5 Support in Drupal

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

Page 26: The State of Html5 Support in Drupal

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

Page 27: The State of Html5 Support in Drupal

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

Page 28: The State of Html5 Support in Drupal

Other Drupal InitiativesIt doesn't just stop at HTML5...

http://groups.drupal.org/drupal-initiatives

Page 29: The State of Html5 Support in Drupal

WSCCI - Web Services

Like Services module, but for Drupal core ● Larry "Crell" Garfield● Tag: WSCCI● #drupal-wscci● http://groups.drupal.

org/wscci

Page 30: The State of Html5 Support in Drupal

Mobile Initiative

Making Drupal a first-class mobile platform ● John Albin Wilkins● Tag: Mobile● #drupal-mobile● http://groups.drupal.

org/mobile/drupal-8

Page 31: The State of Html5 Support in Drupal

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

Page 32: The State of Html5 Support in Drupal

Thank you, thank youQuestions?

http://vickicaruana.blogspot.ca/2011/01/are-you-afraid-to-raise-your-hand.html