sw drupal summit: html5+drupal

Download SW Drupal Summit: HTML5+Drupal

Post on 18-Jan-2015

2.204 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. ROCKIN HTML5 withDRUPALSouthwest Drupal Summit January 2011

2. JEN SIMMONS designer, front end developer & drupal architectdrupaling since 2007, building websites since 1996 creator of Bartik, the default theme in Drupal 7 Senior Developer at Palantir.netjensimmons.com twitter: jensimmons 3. SLIDES AT:jen.cm/h3 4. SO CAN WE USE HTML5 TODAY? 5. YES.It was made with backwards andforwards compatibility in mind. 6. Old BrowserNew BrowserNew WebsiteOld Website Must work both ways. 7. A SUPER-FAST HISTORY 8. Tim Berners-Leecreated HTMLand inventedthe web.HTML Tags in 1991 9. HTML Tags (TBL)1991HTML 2.0(IETF) 1995HTML 3.2(W3C)1997HTML 4.0(W3C)1997HTML 4.01 (W3C)1999 10. XHTML 1.0

.blog-post { color:green } NOT 11. XHTML 1.1text/html mime-type not allowedbut IE cant read the xml mime-type 12. XHTML 2if we knew then what we know now 13. Then some stu happened.there was a meeting and this vote 14. THE GREAT WEBSTANDARDS / SEMANTICSSCHISM OF JUNE 2004evolving XHTML1.0 + CSS + DOM(including javascript) + (later) Microformatsvs.replacing existing technology with XHTML2+ XForms + SVG + MathML + RDFa 15. W3CXHTML 2WHATWGHTML5HTML 5 16. W3CXHTML 2WHATWGHTML5 HTMLHTML 5 HTML5=CSS3 17. Jeremy KeithsKeynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session 18. SO CAN WE USE HTML5 TODAY? 19. YES.It was made with backwards andforwards compatibility in mind. 20. 21. HTML5SEMANTICS 22. Simplied Document Head 23. Drupal Document Head$head $styles $scripts 24. HTML5TOOLS MODULEdrupal.org/project/html5_tools 25. New Structural Elements + outlining 26. node.tpl.phpMy First NodePublished on Jan 22

Blah blah blah

Blah blah blah

  • HTML5
27. Supporting New Elements $submittedMenu systemFiltered HTML input format 28. Other New (or re-educated) Elements+ more! 29. HTML5 BASETHEMEdrupal.org/project/html5_base 30. ARIAAccessible Rich Internet Applications roles, states and properties 31. ARIA: Landmark Roles
32. ARIA: LandmarksHTML CSS div[role=main] { color:#999; } 33. ARIA RolesAccessible Rich Internet ApplicationsW3C Project, http://www.w3.org/TR/wai-ariaA List Apart, April 2007, http://www.alistapart.com/articles/waiaria 34. HTML5FORMS 35. FORMSYour FavoriteCMS/> 36. HTML5 Forms 37. *http://diveintohtml5.org/forms.html 38. HTML5 Formsdate pickersearch boxnumber as a slider with a rangecolor picker 39. host.sonspring.com/formalize/jquery_demo.htmlhttp://sonspring.com/journal/formalize-css 40. HTML5 Form Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder 41. Email addressWebsite Phone numberHow many? 42. HTML5TOOLS MODULEdrupal.org/project/html5_tools 43. ELEMENTS MODULEdrupal.org/project/elements 44. PUT HTML5 FORM INPUT ELEMENTSUPPORT INTOD7 CORE?drupal.org/node/675348 45. MORE HTML5AWESOMENESS 46. HTML5VIDEOAUDIOGAMES 47. REALLY COOL. 48. 49. HTML5OTHER APIs 50. HTML5 OTHER APIsGeolocationWeb WorkersCommunication Web StorageAPIsO ineWebsocketsApplications 51. LEARNMORE 52. Jeremy KeithsKeynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session 53. HTML5 for Web DesignersJeremy Keithfrom A Book Apartbooks.alistapart.com/products/html5-for-web-designers 54. IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com 55. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com 56. THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html 57. DRUPALLY HTML5 58. ONTWITTER@drupalhtml5 59. HTML5DRUPALGROUPgroups.drupal.org/html5 irc: #drupal-html5 60. HTML5TOOLS MODULEdrupal.org/project/html5_tools 61. HTML5 BASETHEMEdrupal.org/project/html5_base 62. ME jensimmons.comtwitter: jensimmons 63. PLEASE COMMENTAND SHARE ATjen.cm/h3