LETS HTML5ify  DRUPAL!     core conversation  HTML5 WORKING GROUP
SLIDES AT:jen.cm/h6
WHAT ISHAPPENING ALREADYand has been since July 2010
HTML5 DRUPALWORKING GROUP groups.drupal.org/html5    irc: #drupal-html5
THE GROUPS GOALS  Use HTML5 today on Drupal 6 & 7 websites.  Figure out best practices for Drupal + HTML5through real worl...
HTML5  TOOLS MODULEdrupal.org/project/html5_tools
TOOLS   Implement HTML5 Forms     Simplify the output of:$scripts, $styles, $submitted, etc.  Add HTML5 Elements to the   ...
HTML5   BASE  THEMEdrupal.org/project/html5_base
HTML5 BASE        Override core templates  (node.tpl, page.tpl, block.tpl, comment.tpl,comment-wrapper.tpl, region.tpl, ht...
We are working inthe HTML5 Tools &HTML5 baseissue queuesand on g.d.o
Andrei Matteescu                                                       Mason WendellEric Duran                            ...
LOGO           TWITTERSTICKERS           @drupalhtml5
HTML5ify D8Form API                     Javascript improvements                             with Web WorkersHardcoded bits...
IN CONTRIBGeolocation Tools            Things made with CanvasVideo and Audio              Websocket-based FeaturesImpleme...
Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
10 GUIDINGPRINCIPLES
0. HTML5ify          HTML5 is the future.              Its ready now.Drupal core should output HTML5 markup          and u...
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. ...
3. MAINTAIN      EXISTING  FUNCTIONALITYTo swap-out existing technology with HTML5- powered replacements, polyfills are req...
"POLYFILL"
OPTION 1                                   OPTION 2Use HTML 4 default and nothing else     Use javascript to implement the...
3. MAINTAIN       EXISTING   FUNCTIONALITYUse polyfills when replacing existing functionality        with an HTML5 implemen...
4. PERFORM       Slow performance is a problem.HTML5ifying Drupal cannot make Drupal slower.If fact, there are a lot of th...
5. BE ACCESSIBLE      If a choice has to be made betweenthe recommendations of HTML5 spec authors            and accessibi...
6. GET SEMANTIC   Historically, getting Drupal to outputsemantic HTML has been a very low priority. To do HTML5 well, cont...
7. FULFILL THECOMMON USE CASE,NOT THE EDGE CASE If certain markup makes sense for the majority    of usecases, but not all...
8. MIMIC XHTML.    BE HTML.Use XML syntax in forming our HTML. Quote our attributes. Use lowercase.   Everything we are al...
9. VALUE FINDABILITY.   NOT MYTHOLOGY.     Look to web standards leaders,          not the SEO industry,    for informatio...
10. VALUE    PRACTICALITY    OVER PURITY.  Just like the Design Principles of HTML5.If we have to ‘cheat’ to make it work,...
11. SUPPORTEVOLUTIONWe will keep changing Drupals "HTML5y-ness" over time.    Its not all or nothing.          Its a proce...
10 GUIDING PRINCIPLES             1. Support older browsers.       2. Lean into the diversity of devices.        3. Mainta...
CODE SPRINT  FRIDAY        forHTML5 TOOLS & BASE
Let's HTML5ify drupal
Upcoming SlideShare
Loading in...5
×

Let's HTML5ify drupal

3,766

Published on

A presentation to the community who creates Drupal about making Drupal 8 do HTML5. DrupalCon Chicago, March 2011.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,766
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Let's HTML5ify drupal

  1. 1. LETS HTML5ify DRUPAL! core conversation HTML5 WORKING GROUP
  2. 2. SLIDES AT:jen.cm/h6
  3. 3. WHAT ISHAPPENING ALREADYand has been since July 2010
  4. 4. HTML5 DRUPALWORKING GROUP groups.drupal.org/html5 irc: #drupal-html5
  5. 5. THE GROUPS GOALS Use HTML5 today on Drupal 6 & 7 websites. Figure out best practices for Drupal + HTML5through real world experiences, sharing knowledge and building community consensus. HTML5ify Drupal 8.
  6. 6. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  7. 7. TOOLS Implement HTML5 Forms Simplify the output of:$scripts, $styles, $submitted, etc. Add HTML5 Elements to the Filtered HTML input filter basically alter cores XHTML before its markup goes to the theme
  8. 8. HTML5 BASE THEMEdrupal.org/project/html5_base
  9. 9. HTML5 BASE Override core templates (node.tpl, page.tpl, block.tpl, comment.tpl,comment-wrapper.tpl, region.tpl, html.tpl, etc…) basically HTML5ify Stark
  10. 10. We are working inthe HTML5 Tools &HTML5 baseissue queuesand on g.d.o
  11. 11. Andrei Matteescu Mason WendellEric Duran Alan Burke (amateescu) (carnarymason) Lin Clark Dave Reid Je Burnz Tim Plunkett (jburnz) Alex Ross Theresa Summa Nathan Smith Jen Simmons (bleen) (theresaanna) Jack Aponte John Zavocki Forest Mars John Albin Wilkins (jackalope) (johnvsc) (johnalbin) Laura Scott Jared Ponchot Adrian Simmons (laura s) Matt Farina (jponch) (adrinux) (mfer) Stan Angelo Jen Lampton Paul Irish Jacine Luisi Tom Behets Divya Manian (betz) (medden) Pontus Nilsson (nimbupani) Mark Krug (devildogmrk) António Almeida John Roberts Wilson (jrwilson) Jody Hamilton (perusio) … AND MORE! (Jody Lynn)
  12. 12. LOGO TWITTERSTICKERS @drupalhtml5
  13. 13. HTML5ify D8Form API Javascript improvements with Web WorkersHardcoded bits of HTML Storage & caching.tpls files in core modulesand themes Communication APIsInput filters and security Drag & Dropchecks Progress & Meter and other stu …
  14. 14. IN CONTRIBGeolocation Tools Things made with CanvasVideo and Audio Websocket-based FeaturesImplementationBase Themes galore …everything else *core just has to stay out of the way
  15. 15. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  16. 16. 10 GUIDINGPRINCIPLES
  17. 17. 0. HTML5ify HTML5 is the future. Its ready now.Drupal core should output HTML5 markup and use HTML5 APIs.
  18. 18. 1. SUPPORT OLDER BROWSERS Remain fully compatible with Internet Explorer 6, 7, 8 and other older browsers.
  19. 19. 2. LEAN IN TO THE DIVERSITY OF DEVICESDrupal websites do not have to work or look the same on every device. They already dont.
  20. 20. 3. MAINTAIN EXISTING FUNCTIONALITYTo swap-out existing technology with HTML5- powered replacements, polyfills are required.
  21. 21. "POLYFILL"
  22. 22. OPTION 1 OPTION 2Use HTML 4 default and nothing else Use javascript to implement the better UX for all browsers. Works if javascript support is on. Falls back to option 1. OPTION 3 OPTION 4Use HTML5. Older browsers look like Use HTML5 plus a "polyfill". Basically regular XHTML search box. Newer Option #3 for modern browsers plus #2 for browsers get the better thing. older browsers. Falls back to #1 for IE w/o js.
  23. 23. 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.
  24. 24. 4. PERFORM Slow 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. Lets do that.
  25. 25. 5. BE ACCESSIBLE If a choice has to be made betweenthe recommendations of HTML5 spec authors and accessibility experts, choose the accessibility experts.
  26. 26. 6. GET SEMANTIC Historically, getting Drupal to outputsemantic HTML has been a very low priority. To do HTML5 well, content must be markedup semantically. This is a chance to get serious about valuing semantics.
  27. 27. 7. FULFILL THECOMMON USE CASE,NOT THE EDGE CASE If certain markup makes sense for the majority of usecases, but not all, lets do it. It can be overridden for the rest. Choosing to be super generic instead is not a solution for anyone.
  28. 28. 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"
  29. 29. 9. VALUE FINDABILITY. NOT MYTHOLOGY. Look to web standards leaders, not the SEO industry, for information on best practices.
  30. 30. 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?
  31. 31. 11. SUPPORTEVOLUTIONWe will keep changing Drupals "HTML5y-ness" over time. Its not all or nothing. Its a process.
  32. 32. 10 GUIDING PRINCIPLES 1. 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.
  33. 33. CODE SPRINT FRIDAY forHTML5 TOOLS & BASE
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×