Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Rockinhtml5withdrupal badcamp

on

  • 2,545 views

It's time to start considering HTML5 for your next project. Many aspects of HTML5 work today, others are right around the corner. What is the state of browser support for HTML5? Why would you want to ...

It's time to start considering HTML5 for your next project. Many aspects of HTML5 work today, others are right around the corner. What is the state of browser support for HTML5? Why would you want to use it? And how in the world can you get Drupal to fully-output HTML5? (Some parts are quite easy. Others are not.) I'll talk about this and more, including how you can join the movement to transform Drupal into a HTML5-generating machine.

Statistics

Views

Total Views
2,545
Views on SlideShare
2,420
Embed Views
125

Actions

Likes
3
Downloads
44
Comments
0

2 Embeds 125

http://jensimmons.com 121
http://www.jensimmons.com 4

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

Rockinhtml5withdrupal badcamp Rockinhtml5withdrupal badcamp Presentation Transcript

  • Rockin’ HTML5 with DRUPAL BAD CAMP 2010
  • Jen Simmons designer, front-end developer creating websites since HTML2 made the Bartik theme for Drupal 7 member of HTML5 Drupal Group jensimmons.com
  • These slides are already at: jen.cm/h2
  • HTML5 What’s up with that?
  • A SUPER-FAST HISTORY
  • Tim Berners-Lee created HTML and invented the web. “HTML Tags” in 1991 slides at: jen.cm/h2
  • HTML Tags (TBL) 1991 HTML 2.0 (IETF) 1995 HTML 3.2 (W3C) 1997 HTML 4.0 (W3C) 1997 HTML 4.01 (W3C) 1999 slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT COLOR=GREEN> slides at: jen.cm/h2
  • XHTML 1.1 “text/html” mime-type not allowed but IE can’t read the xml mime-type… slides at: jen.cm/h2
  • XHTML 2 if we knew then what we know now… slides at: jen.cm/h2
  • Then some stu happened. there was a meeting and this vote… slides at: jen.cm/h2
  • THE GREAT WEB STANDARDS / SEMANTICS SCHISM OF JUNE 2004 evolving XHTML1.0 + CSS + DOM (including javascript) + (later) Microformats vs. replacing existing technology with XHTML2 + XForms + SVG + MathML + RDFa slides at: jen.cm/h2
  • W3C XHTML 2 WHATWG HTML5 HTML 5 slides at: jen.cm/h2
  • HTML5 slides at: jen.cm/h2
  • “Priority of Constituencies” users authors implementors specifiers theoretical purity slides at: jen.cm/h2
  • DESIGN PRINCIPLES Priority of Constituencies. Support existing content. Do not reinvent the wheel. Pave the Cowpaths. slides at: jen.cm/h2
  • Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers slides at: jen.cm/h2
  • SO CAN WE USE HTML5 TODAY?
  • YES. It was made with backwards and forwards compatibility in mind.
  • Old Browser New Browser New Website Old Website Must work both ways.
  • HTML5 Semantics (Yummy!)
  • Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script> <link rel="stylesheet" href="file.css" />
  • New Structural Elements <section> <aside> <header> <article> <hgroup> <nav> <footer> + outlining
  • Other New (or re-educated) Elements <mark> <progress> <time> <small> <pubdate> <ruby> <meter> + more!
  • *screenshot from HTML5 Now
  • ARIA Roles <header role="banner"> <div role="main"> div[role=main] { color:#999; }
  • ARIA Roles Accessible Rich Internet Applications W3C Project, http://www.w3.org/TR/ wai-aria A List Apart, April 2007, http:// www.alistapart.com/articles/waiaria
  • Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at: jen.cm/h2
  • HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2
  • The Spec Itself http://www.whatwg.org/html5 slides at: jen.cm/h2
  • DRUPAL + HTML5
  • slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • HTML5 BASE drupal.org/project/html5_base slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • HTML5 TOOLS drupal.org/project/html5_tools slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • Drupal 6.19 + Basic <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?T" /> <link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?T" /> <link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?T" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style> <!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![e </head> slides at: jen.cm/h2
  • Drupal 6.19 + Basic + Tools <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?z" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?z" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/default.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/layout.css?z" /> <link rel="stylesheet" media="all" href="/sites/all/themes/basic/css/style.css?z" /> <link rel="stylesheet" media="print" href="/sites/all/themes/basic/css/print.css?z" /> <!--[if lte IE 6]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie6.css";</style> <!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/basic/css/ie7.css";</style><![e </head> removed type="text/css" slides at: jen.cm/h2
  • Drupal 6.19 + Base + Tools <!DOCTYPE html> <html lang="en" dir="ltr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>d6.local</title> <link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" media="all" href="/modules/node/node.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/defaults.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system.css?G" /> <link rel="stylesheet" media="all" href="/modules/system/system-menus.css?G" /> <link rel="stylesheet" media="all" href="/modules/user/user.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/default.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/html5.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/layout.css?G" /> <link rel="stylesheet" media="all" href="/sites/all/themes/html5_base/css/style.css?G" /> <link rel="stylesheet" media="print" href="/sites/all/themes/html5_base/css/print.css?G" /> <!-- www.phpied.com/conditional-comments-block-downloads/ --> <!--[if IE]><![endif]--> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • slides at: jen.cm/h2
  • HTML5 Forms
  • HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms" type="text" placeholder="Drupal. What else?" />
  • <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"/>
  • http://diveintohtml5.org/forms.html
  • HTML5 FORMS date picker search box number as a slider with a range input type="color"
  • slides at: jen.cm/h2
  • HTML5 TOOLS + ELEMENTS slides at: jen.cm/h2
  • HTML5 Video & Audio
  • REALLY COOL.
  • HTML5 Other APIs
  • HTML5 APIs Geolocation Web Workers Communication Web Storage APIs O ine Websockets Applications
  • slides at: jen.cm/h2
  • PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim slides at: jen.cm/h2
  • HTML5 Resources
  • http://diveintohtml5.org/ slides at: jen.cm/h2
  • http://html5doctor.com/ slides at: jen.cm/h2
  • Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers slides at: jen.cm/h2
  • Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at: jen.cm/h2
  • HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2
  • PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim slides at: jen.cm/h2
  • The Spec Itself http://www.whatwg.org/html5 slides at: jen.cm/h2
  • HTML5 + Drupal: Drupal HTML5 Group IRC: #drupal-html5 HTML5 Tools (& issue queue) HTML5 Base (& issue queue) slides at: jen.cm/h2
  • Jen Simmons twitter: jensimmons jensimmons.com irc: jensimmons please comment at jen.cm/h2