LET'S HTML5ifyDRUPAL!

core conversation

HTML5 WORKING GROUP

SLIDES AT:

jen.cm/h6

WHAT IS HAPPENING

ALREADYand has been since July 2010

HTML5 DRUPAL

WORKINGGROUP

groups.drupal.org/html5irc: #drupal-html5

THE GROUP'S GOALSUse HTML5 today on Drupal 6 & 7 websites.

Figure out best practices for Drupal + HTML5 through real world experiences, sharing knowledge

and building community consensus.

HTML5ify Drupal 8.

HTML5 TOOLS

MODULE

drupal.org/project/html5_tools

TOOLSImplement HTML5 Forms

Simplify the output of: $scripts, $styles, $submitted, etc.

Add HTML5 Elements to the Filtered HTML input filter

basically alter core's XHTML before it's markup goes to the theme

HTML5 BASE

THEME

drupal.org/project/html5_base

HTML5 BASEOverride core templates

(node.tpl, page.tpl, block.tpl, comment.tpl, comment-wrapper.tpl, region.tpl, html.tpl, etc…)

basically HTML5ify Stark

We are working in the HTML5 Tools & HTML5 baseissue queuesand on g.d.o

Eric Duran

Alex Ross (bleen)

Jack Aponte(jackalope)

Jen Lampton

Tim PlunkettLin Clark

Alan Burke

Forest Mars

Jared Ponchot (jponch)

Jacine Luisi

Theresa Summa (theresaanna)

Mason Wendell (carnarymason)

Andrei Matteescu (amateescu)

Laura Scott (laura s)

Je! Burnz(jburnz)

Mark Krug (devildogmrk)

John Zavocki (johnvsc)

Matt Farina(mfer)

Pontus Nilsson

Adrian Simmons(adrinux)

(medden)

Stan Angelo!Paul Irish

Nathan Smith

Tom Behets(betz)

António Almeida(perusio)

John Roberts Wilson(jrwilson)

John Albin Wilkins(johnalbin)

Jody Hamilton(Jody Lynn) … AND MORE!

Divya Manian(nimbupani)

Dave Reid

Jen Simmons

TWITTER

@drupalhtml5

STICKERS

LOGO

HTML5ify D8Form API

Hardcoded bits of HTML

.tpls files in core modules and themes

Input filters and security checks

Javascript improvements with Web Workers

Storage & caching

Communication APIs

Drag & Drop

Progress & Meter

and other stu!…

IN CONTRIBGeolocation Tools

Video and Audio Implementation

Base Themes galore

Things made with Canvas

Websocket-based Features

…everything else

*core just has to stay out of the way

Pro HTML5 ProgrammingPeter Lubbers, Brian Albers,and Frank Salim

prohtml5.com

10 GUIDING PRINCIPLES

0. HTML5ify

HTML5 is the future.It's ready now.

Drupal core should output HTML5 markup and use HTML5 APIs.

1. SUPPORT OLDER BROWSERS

Remain fully compatible with Internet Explorer 6, 7, 8 and other older browsers.

2. LEAN IN TO THE DIVERSITY OF

DEVICESDrupal websites do not have to work or look the same

on every device. They already don't.

3. MAINTAIN EXISTING

FUNCTIONALITYTo swap-out existing technology with HTML5-powered replacements, polyfills are required.

"POLYFILL"

OPTION 1Use HTML 4 default and nothing else

OPTION 2Use javascript to implement the better UX for all browsers. Works if javascript

support is on. Falls back to option 1.

OPTION 3Use HTML5. Older browsers look like

regular XHTML search box. Newer browsers get the better thing.

OPTION 4Use HTML5 plus a "polyfill". Basically

Option #3 for modern browsers plus #2 for older browsers. Falls back to #1 for IE w/o js.

3. MAINTAIN EXISTING

FUNCTIONALITYUse polyfills when replacing existing functionality

with an HTML5 implementation.Consider polyfills for new functionality on a

case-by-case basis, leaning towards simplicity.

4. PERFORMSlow performance is a problem.

HTML5ifying Drupal cannot make Drupal slower.

If fact, there are a lot of things about HTML5 that could make Drupal run faster. Let's do that.

5. BE ACCESSIBLE

If a choice has to be made between the recommendations of HTML5 spec authors

and accessibility experts, choose the accessibility experts.

6. GET SEMANTICHistorically, getting Drupal to output

semantic HTML has been a very low priority.

To do HTML5 well, content must be marked up semantically. This is a chance to get serious

about valuing semantics.

7. FULFILL THE COMMON USE CASE, NOT THE EDGE CASE

If certain markup makes sense for the majority of usecases, but not all, let's do it. It can be

overridden for the rest. Choosing to be super generic instead is not a solution for anyone.

8. MIMIC XHTML. BE HTML.

Use XML syntax in forming our HTML. Quote our attributes. Use lowercase.

Everything we are already doing. *although maybe make an exception for boolean attributes like 'pubdate'

Do not do XHTML5. Period.Meaning no mime-type of "application/xml"

9. VALUE FINDABILITY. NOT MYTHOLOGY.

Look to web standards leaders, not the SEO industry,

for information on best practices.

10. VALUE PRACTICALITY OVER PURITY.

Just like the Design Principles of HTML5. If we have to ‘cheat’ to make it work, oh well.

*We already have hacks to make it work in IE, why is this a time to get purist?

11. SUPPORT EVOLUTIONWe will keep changing Drupal's

"HTML5y-ness" over time. It's not all or nothing.

It's a process.

10 GUIDING PRINCIPLES1. Support older browsers.

2. Lean into the diversity of devices.3. Maintain existing functionality.

4. Perform.5. Be accessible.6. Get semantic.

7. Fulfill the common use case, not the edge case.8. Mimic XHTML. Be HTML.

9. Value findability. Not mythology.10. Value practicality over purity.

11. Support evolution.

CODE SPRINTFRIDAY

for

HTML5 TOOLS & BASE