Your SlideShare is downloading. ×
0
ROCKIN HTML5         with  DRUPALSouthwest Drupal Summit     January 2011
JEN SIMMONS designer, front end developer & drupal architectdrupaling since 2007, building websites since 1996 creator of ...
SLIDES AT:jen.cm/h3
SO CAN WE USE HTML5 TODAY?
YES.It was made with backwards andforwards compatibility in mind.
Old Browser        New BrowserNew Website        Old Website     Must work both ways.
A SUPER-FAST   HISTORY
Tim Berners-Leecreated HTMLand inventedthe web.“HTML Tags” in 1991
HTML Tags   (TBL)    1991HTML 2.0    (IETF)   1995HTML 3.2    (W3C)    1997HTML 4.0    (W3C)    1997HTML 4.01   (W3C)    1...
XHTML 1.0 <div class="blog-post"> .blog-post {   color:green }                 NOT <FONT COLOR=GREEN>
XHTML 1.1“text/html” mime-type not allowedbut IE can’t read the xml mime-type…
XHTML 2if we knew then what we know now…
Then some stu happened.there was a meeting and this vote…
THE GREAT WEBSTANDARDS / SEMANTICSSCHISM OF JUNE 2004evolving XHTML1.0 + CSS + DOM(including javascript) + (later) Microfo...
W3CXHTML 2WHATWGHTML5HTML 5
W3CXHTML 2WHATWGHTML5 HTMLHTML 5       HTML5=CSS3
Jeremy Keiths                              Keynote                               AT DRUPALCON                             ...
SO CAN WE USE HTML5 TODAY?
YES.It was made with backwards andforwards compatibility in mind.
<!DOCTYPE html>
HTML5SEMANTICS
Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" hre...
Drupal Document Head        $head       $styles       $scripts
HTML5  TOOLS MODULEdrupal.org/project/html5_tools
New Structural Elements<section>    <aside><article>    <nav><header>     <pubdate><footer>     + outlining
node.tpl.php<article id="node-title" class="node clearfix" > <header>   <h1 class="title"><a href="xxx">My First Node</a></...
Supporting New Elements         $submitted        Menu system  Filtered HTML input format
Other New (or re-educated) Elements  <mark>           <progress>  <time>           <small>  <pubdate>        <ruby>  <mete...
HTML5   BASE  THEMEdrupal.org/project/html5_base
ARIAAccessible Rich Internet Applications       roles, states and properties
ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
ARIA: LandmarksHTML <div role="main">…</div>CSS     div[role=main] {             color:#999;         }
ARIA RolesAccessible Rich Internet ApplicationsW3C Project, http://www.w3.org/TR/wai-ariaA List Apart, April 2007, http://...
HTML5FORMS
FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder...
HTML5 Forms<input type="text">    <input type="range"><input type="email">   <input type="color"><input type="url">     <i...
*http://diveintohtml5.org/forms.html
HTML5 Formsdate pickersearch boxnumber as a slider with a rangecolor picker
host.sonspring.com/formalize/jquery_demo.html          http://sonspring.com/journal/formalize-css
HTML5 Form         Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" requ...
<label for="email">Email address</label><input id="email" name="email" type="email" /><label for="website">Website </label...
HTML5  TOOLS MODULEdrupal.org/project/html5_tools
ELEMENTS MODULEdrupal.org/project/elements
PUT HTML5           FORM INPUT             ELEMENT          SUPPORT INTO            D7 CORE?drupal.org/node/675348
MORE HTML5AWESOMENESS
HTML5VIDEOAUDIOGAMES
REALLY COOL.
<video> <audio><canvas>
HTML5OTHER APIs
HTML5 OTHER APIsGeolocation    Web WorkersCommunication Web StorageAPIs              O ineWebsockets    Applications
LEARNMORE
Jeremy Keiths                              Keynote                               AT DRUPALCON                             ...
HTML5 for Web Designers    Jeremy Keith            from A Book Apart    books.alistapart.com/products/html5-for-web-design...
IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
DRUPALLY HTML5
ONTWITTER    @drupalhtml5
HTML5DRUPALGROUPgroups.drupal.org/html5   irc: #drupal-html5
HTML5  TOOLS MODULEdrupal.org/project/html5_tools
HTML5   BASE  THEMEdrupal.org/project/html5_base
ME jensimmons.comtwitter: jensimmons
PLEASE COMMENT  AND SHARE ATjen.cm/h3
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
Upcoming SlideShare
Loading in...5
×

SW Drupal Summit: HTML5+Drupal

2,274

Published on

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

No Downloads
Views
Total Views
2,274
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "SW Drupal Summit: HTML5+Drupal"

  1. 1. ROCKIN HTML5 with DRUPALSouthwest Drupal Summit January 2011
  2. 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.net jensimmons.com twitter: jensimmons
  3. 3. SLIDES AT:jen.cm/h3
  4. 4. SO CAN WE USE HTML5 TODAY?
  5. 5. YES.It was made with backwards andforwards compatibility in mind.
  6. 6. Old Browser New BrowserNew Website Old Website Must work both ways.
  7. 7. A SUPER-FAST HISTORY
  8. 8. Tim Berners-Leecreated HTMLand inventedthe web.“HTML Tags” in 1991
  9. 9. HTML Tags (TBL) 1991HTML 2.0 (IETF) 1995HTML 3.2 (W3C) 1997HTML 4.0 (W3C) 1997HTML 4.01 (W3C) 1999
  10. 10. XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT COLOR=GREEN>
  11. 11. XHTML 1.1“text/html” mime-type not allowedbut IE can’t read the xml mime-type…
  12. 12. XHTML 2if we knew then what we know now…
  13. 13. Then some stu happened.there was a meeting and this vote…
  14. 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. 15. W3CXHTML 2WHATWGHTML5HTML 5
  16. 16. W3CXHTML 2WHATWGHTML5 HTMLHTML 5 HTML5=CSS3
  17. 17. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  18. 18. SO CAN WE USE HTML5 TODAY?
  19. 19. YES.It was made with backwards andforwards compatibility in mind.
  20. 20. <!DOCTYPE html>
  21. 21. HTML5SEMANTICS
  22. 22. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
  23. 23. Drupal Document Head $head $styles $scripts
  24. 24. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  25. 25. New Structural Elements<section> <aside><article> <nav><header> <pubdate><footer> + outlining
  26. 26. node.tpl.php<article id="node-title" class="node clearfix" > <header> <h1 class="title"><a href="xxx">My First Node</a></h2 </header> <footer>Published on <time datetime=2011-01-22 pubdate>Jan 22</time> </footer> <p>Blah blah blah</p> <p>Blah blah blah</p> <footer> <div class="taxonomy"><ul><li><a>HTML5</a></li></ul></div> </footer></article> <!-- /node-->
  27. 27. Supporting New Elements $submitted Menu system Filtered HTML input format
  28. 28. Other New (or re-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
  29. 29. HTML5 BASE THEMEdrupal.org/project/html5_base
  30. 30. ARIAAccessible Rich Internet Applications roles, states and properties
  31. 31. ARIA: Landmark Roles <header role="banner"> <div role="main"> <nav role="navigation">
  32. 32. ARIA: LandmarksHTML <div role="main">…</div>CSS div[role=main] { color:#999; }
  33. 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. 34. HTML5FORMS
  35. 35. FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder="Drupal. What else?" /> />
  36. 36. HTML5 Forms<input type="text"> <input type="range"><input type="email"> <input type="color"><input type="url"> <input type="text"><input type="date"> <input type="tel"><input type="time"> <input type="week">
  37. 37. *http://diveintohtml5.org/forms.html
  38. 38. HTML5 Formsdate pickersearch boxnumber as a slider with a rangecolor picker
  39. 39. host.sonspring.com/formalize/jquery_demo.html http://sonspring.com/journal/formalize-css
  40. 40. HTML5 Form Attributesautocomplete, min, max, multiple, pattern,step, required, placeholder<input type="email" required><input type="range" min=1 max=11 name=tap>
  41. 41. <label for="email">Email address</label><input id="email" name="email" type="email" /><label for="website">Website </label><input id="website" name="website" type="url" /><label for="phone">Phone number</label><input id="phone" name="phone" type="tel" /><label for="number">How many?</label><input id="number" name="number" type="number"min="0" max="11" step="1" value="5"/>
  42. 42. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  43. 43. ELEMENTS MODULEdrupal.org/project/elements
  44. 44. PUT HTML5 FORM INPUT ELEMENT SUPPORT INTO D7 CORE?drupal.org/node/675348
  45. 45. MORE HTML5AWESOMENESS
  46. 46. HTML5VIDEOAUDIOGAMES
  47. 47. REALLY COOL.
  48. 48. <video> <audio><canvas>
  49. 49. HTML5OTHER APIs
  50. 50. HTML5 OTHER APIsGeolocation Web WorkersCommunication Web StorageAPIs O ineWebsockets Applications
  51. 51. LEARNMORE
  52. 52. Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  53. 53. HTML5 for Web Designers Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
  54. 54. IntroducingHTML5Bruce LawsonandRemy Sharpintroducinghtml5.com
  55. 55. Pro HTML5ProgrammingPeter Lubbers,Brian Albers,and Frank Salimprohtml5.com
  56. 56. THE SPEC ITSELFdev.w3.org/html5/spec/Overview.html
  57. 57. DRUPALLY HTML5
  58. 58. ONTWITTER @drupalhtml5
  59. 59. HTML5DRUPALGROUPgroups.drupal.org/html5 irc: #drupal-html5
  60. 60. HTML5 TOOLS MODULEdrupal.org/project/html5_tools
  61. 61. HTML5 BASE THEMEdrupal.org/project/html5_base
  62. 62. ME jensimmons.comtwitter: jensimmons
  63. 63. PLEASE COMMENT AND SHARE ATjen.cm/h3
  1. A particular slide catching your eye?

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

×