Weitere ähnliche Inhalte Kürzlich hochgeladen (20) Rockinhtml5withdrupal badcamp7. 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
15. Then some stuff 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
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
28. Other New (or re-educated) Elements
<mark>
<time>
<pubdate>
<meter>
<progress>
<small>
<ruby>
+ more!
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
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>
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"/>
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
69. HTML5 + Drupal:
Drupal HTML5 Group
IRC: #drupal-html5
HTML5 Tools (& issue queue)
HTML5 Base (& issue queue)
slides at: jen.cm/h2