SW Drupal Summit: HTML5+Drupal
Upcoming SlideShare
Loading in...5
×
 

SW Drupal Summit: HTML5+Drupal

on

  • 2,512 views

 

Statistics

Views

Total Views
2,512
Views on SlideShare
2,454
Embed Views
58

Actions

Likes
1
Downloads
34
Comments
0

4 Embeds 58

http://jensimmons.com 55
http://www.jensimmons.com 1
http://teaching.jensimmons.com 1
http://jensimmons.local 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

SW Drupal Summit: HTML5+Drupal SW Drupal Summit: HTML5+Drupal Presentation Transcript

  • ROCKIN HTML5 with DRUPALSouthwest Drupal Summit January 2011
  • 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
  • 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) 1999
  • 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) Microformatsvs.replacing existing technology with XHTML2+ XForms + SVG + MathML + RDFa
  • W3CXHTML 2WHATWGHTML5HTML 5
  • W3CXHTML 2WHATWGHTML5 HTMLHTML 5 HTML5=CSS3
  • Jeremy Keiths Keynote AT DRUPALCON COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  • 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" href="file.css" />
  • 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></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-->
  • Supporting New Elements $submitted Menu system Filtered HTML input format
  • Other New (or re-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
  • 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://www.alistapart.com/articles/waiaria
  • HTML5FORMS
  • FORMS<label for="favorite-cms">Your FavoriteCMS</label><input id="favorite-cms" name="favorite-cms"type="text" placeholder="Drupal. What else?" /> />
  • 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">
  • *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" required><input type="range" min=1 max=11 name=tap>
  • <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"/>
  • 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 COPENHAGENdrupalradar.com/video-jeremy-keith-keynote-session
  • HTML5 for Web Designers Jeremy Keith from A Book Apart books.alistapart.com/products/html5-for-web-designers
  • 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