let's html5ify drupal
Post on 29-Nov-2014
3.712 Views
Preview:
DESCRIPTION
TRANSCRIPT
LET'S HTML5ifyDRUPAL!
core conversation
HTML5 WORKING GROUP
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
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
top related