Let's HTML5ify drupal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Let's HTML5ify drupal

on

  • 3,425 views

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

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

Statistics

Views

Total Views
3,425
Views on SlideShare
2,774
Embed Views
651

Actions

Likes
1
Downloads
18
Comments
0

5 Embeds 651

http://jensimmons.com 597
http://www.jensimmons.com 39
http://dev.jensimmons.gotpantheon.com 7
http://dev.jensimmons.gotpantheon.com 7
http://dev.jen-simmons.gotpantheon.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Let's HTML5ify drupal Presentation Transcript

  • 1. LETS HTML5ify DRUPAL! core conversation HTML5 WORKING GROUP
  • 2. SLIDES AT:jen.cm/h6
  • 3. WHAT ISHAPPENING ALREADYand has been since July 2010
  • 4. HTML5 DRUPALWORKING GROUP groups.drupal.org/html5 irc: #drupal-html5
  • 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. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  • 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. HTML5 BASE THEMEdrupal.org/project/html5_base
  • 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. We are working inthe HTML5 Tools &HTML5 baseissue queuesand on g.d.o
  • 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. LOGO TWITTERSTICKERS @drupalhtml5
  • 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. 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. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  • 16. 10 GUIDINGPRINCIPLES
  • 17. 0. HTML5ify HTML5 is the future. Its ready now.Drupal core should output HTML5 markup and use HTML5 APIs.
  • 18. 1. SUPPORT OLDER BROWSERS Remain fully compatible with Internet Explorer 6, 7, 8 and other older browsers.
  • 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. 3. MAINTAIN EXISTING FUNCTIONALITYTo swap-out existing technology with HTML5- powered replacements, polyfills are required.
  • 21. "POLYFILL"
  • 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. 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. 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. 5. BE ACCESSIBLE If a choice has to be made betweenthe recommendations of HTML5 spec authors and accessibility experts, choose the accessibility experts.
  • 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. 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. 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. 9. VALUE FINDABILITY. NOT MYTHOLOGY. Look to web standards leaders, not the SEO industry, for information on best practices.
  • 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. 11. SUPPORTEVOLUTIONWe will keep changing Drupals "HTML5y-ness" over time. Its not all or nothing. Its a process.
  • 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. CODE SPRINT FRIDAY forHTML5 TOOLS & BASE