Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rockin' HTML5 with Drupal // BADCamp

Jen Simmons
November 13, 2010
Technology
1
52

Rockin' HTML5 with Drupal // BADCamp

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.

Jen Simmons

November 13, 2010
Tweet

More Decks by Jen Simmons

See All by Jen Simmons
Using the HTML width & height attributes to improve web page loading
jensimmons
3
1.7k
It's Never Been A Better Time to Learn Layout CSS
jensimmons
12
1.3k
Everything About Web Design Just Changed
jensimmons
32
69k
Designing with Grid — An Event Apart Denver
jensimmons
2
910
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
13k
How CSS Grid Changes Everything
jensimmons
7
2k
Designing with Grid — An Event Apart San Francisco
jensimmons
3
440
Designing with Grid — An Event Apart Chicago
jensimmons
1
400
Designing with Grid — An Event Apart D.C.
jensimmons
0
340

Other Decks in Technology

See All in Technology
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
110
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
280
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
130
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
3
760
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
140
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
Platform Engineering for Software Developers and Architects
syntasso
1
530
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
120
Six Lessons from altMBA
skipperchong
27
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Statistics for Hackers
jakevdp
796
220k
It's Worth the Effort
3n
183
27k
We Have a Design System, Now What?
morganepeng
50
7.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Cult of Friendly URLs
andyhume
78
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k

Transcript

  1. Rockin’ HTML5 with DRUPAL BAD CAMP 2010

  2. Jen Simmons designer, front-end developer creating websites since HTML2 made

    the Bartik theme for Drupal 7 member of HTML5 Drupal Group jensimmons.com

  3. These slides are already at: jen.cm/h2

  4. HTML5 What’s up with that?

  5. A SUPER-FAST HISTORY

  6. Tim Berners-Lee created HTML and invented the web. “HTML Tags”

    in 1991 slides at: jen.cm/h2

  7. 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

  8. slides at: jen.cm/h2

  9. None
  10. None

  11. slides at: jen.cm/h2

  12. XHTML 1.0 <div class="blog-post"> .blog-post { color:green } NOT <FONT

    COLOR=GREEN> slides at: jen.cm/h2

  13. slides at: jen.cm/h2 XHTML 1.1 “text/html” mime-type not allowed but

    IE can’t read the xml mime-type…

  14. slides at: jen.cm/h2 XHTML 2 if we knew then what

    we know now…

  15. Then some stu happened. there was a meeting and this

    vote… slides at: jen.cm/h2

  16. 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

  17. W3C XHTML 2 WHATWG HTML5 HTML 5 slides at: jen.cm/h2

  18. slides at: jen.cm/h2 HTML5

  19. slides at: jen.cm/h2 “Priority of Constituencies” users authors implementors specifiers

    theoretical purity

  20. slides at: jen.cm/h2 DESIGN PRINCIPLES Priority of Constituencies. Support existing

    content. Do not reinvent the wheel. Pave the Cowpaths.

  21. Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session slides

    at: jen.cm/h2 HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers

  22. SO CAN WE USE HTML5 TODAY?

  23. YES. It was made with backwards and forwards compatibility in

    mind.

  24. Old Browser New Website New Browser Old Website Must work

    both ways.

  25. HTML5 Semantics (Yummy!)

  26. Simplified Document Head <!DOCTYPE html> <meta charset="utf-8" /> <script src="file.js"></script>

    <link rel="stylesheet" href="file.css" />

  27. New Structural Elements <section> <header> <hgroup> <footer> <aside> <article> <nav>

    + outlining

  28. Other New (or re-educated) Elements <mark> <time> <pubdate> <meter> <progress>

    <small> <ruby> + more!

  29. *screenshot from HTML5 Now

  30. ARIA Roles <header role="banner"> <div role="main"> div[role=main] { color:#999; }

  31. 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

  32. Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at:

    jen.cm/h2

  33. HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2

  34. The Spec Itself slides at: jen.cm/h2 http://www.whatwg.org/html5

  35. DRUPAL + HTML5

  36. slides at: jen.cm/h2

  37. slides at: jen.cm/h2

  38. HTML5 BASE drupal.org/project/html5_base slides at: jen.cm/h2

  39. slides at: jen.cm/h2

  40. HTML5 TOOLS drupal.org/project/html5_tools slides at: jen.cm/h2

  41. slides at: jen.cm/h2

  42. Drupal 6.19 + Basic slides at: jen.cm/h2 <!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>

  43. Drupal 6.19 + Basic + Tools slides at: jen.cm/h2 <!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"

  44. Drupal 6.19 + Base + Tools slides at: jen.cm/h2 <!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>

  45. slides at: jen.cm/h2

  46. slides at: jen.cm/h2

  47. slides at: jen.cm/h2

  48. HTML5 Forms

  49. HTML5 FORM API <label for="favorite-cms">Your Favorite CMS</label> <input id="favorite-cms" name="favorite-cms"

    type="text" placeholder="Drupal. What else?" />

  50. <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"/>

  51. http://diveintohtml5.org/forms.html

  52. HTML5 FORMS date picker search box number as a slider

    with a range input type="color"

  53. slides at: jen.cm/h2

  54. HTML5 TOOLS + ELEMENTS slides at: jen.cm/h2

  55. HTML5 Video & Audio

  56. REALLY COOL.

  57. HTML5 Other APIs

  58. HTML5 APIs Geolocation Communication APIs Websockets Web Workers Web Storage

    O ine Applications

  59. slides at: jen.cm/h2

  60. PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim

    slides at: jen.cm/h2

  61. HTML5 Resources

  62. http://diveintohtml5.org/ slides at: jen.cm/h2

  63. http://html5doctor.com/ slides at: jen.cm/h2

  64. Jeremy Keith's Keynote at DrupalCon Copenhagen http://drupalradar.com/ video-jeremy-keith- keynote-session slides

    at: jen.cm/h2 HTML5 for Web Designers book by Jeremy Keith http://books.alistapart.com/ products/html5-for-web- designers

  65. Introducing HTML5 Bruce Lawson & Remy Sharp introducinghtml5.com slides at:

    jen.cm/h2

  66. HTML5 NOW Tantek Çelik tantek.com/ html5now slides at: jen.cm/h2

  67. PRO HTML5 PROGRAMMING Peter Lubbers, Brian Albers and Frank Salim

    slides at: jen.cm/h2

  68. The Spec Itself slides at: jen.cm/h2 http://www.whatwg.org/html5

  69. HTML5 + Drupal: Drupal HTML5 Group IRC: #drupal-html5 HTML5 Tools

    (& issue queue) HTML5 Base (& issue queue) slides at: jen.cm/h2

  70. Jen Simmons twitter: jensimmons jensimmons.com irc: jensimmons please comment at

    jen.cm/h2