The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
5 ways to embrace HTML5 today
1.
2. ( 5 ways to embrace
HTML5 today
Daniel Ryan
DevChatt
March 2010
)
3.
4.
5. ( What is HTML5?
)
⊛ HTML5 is the next major revision of the HTML
spec.
6. ( What is HTML5?
)
⊛ HTML5 is the next major revision of the HTML
spec.
⊛ It is currently in “Last Call” phase at the
WHATWG.
7. ( What is HTML5?
)
⊛ HTML5 is the next major revision of the HTML
spec.
⊛ It is currently in “Last Call” phase at the
WHATWG.
⊛ It was written both to define new features and
ratify current behavior.
8. ( What is HTML5?
)
⊛ HTML5 is the next major revision of the HTML
spec.
⊛ It is currently in “Last Call” phase at the
WHATWG.
⊛ It was written both to define new features and
ratify current behavior.
⊛ It is scheduled to be a “Proposed
Recommendation” in 2022.
9.
10.
11. ( What browsers
support HTML5? )
⊛ All of them. Sort of.
12. ( What browsers
support HTML5? )
⊛ All of them. Sort of.
⊛ Most of the proposed features can be
implemented today through either native
browser support or a combination of CSS and
JavaScript.
13.
14.
15. ( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes
16. ( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes
⊛ Client side storage
17. ( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes
⊛ Client side storage
⊛ <audio> and <video>
18. ( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes
⊛ Client side storage
⊛ <audio> and <video>
⊛ Geolocation
19. ( 5 Features Ready to
Implement )
⊛ New elements (tags) and attributes
⊛ Client side storage
⊛ <audio> and <video>
⊛ Geolocation
⊛ New form types
25. ( 1: New Elements
⊛ section ⊛ video ⊛ rp
)
⊛ article ⊛ audio ⊛ canvas
⊛ aside ⊛ embed ⊛ command
⊛ hgroup ⊛ mark ⊛ details
⊛ header ⊛ progress ⊛ datalist
⊛ footer ⊛ meter ⊛ keygen
⊛ nav ⊛ time ⊛ output
⊛ figure ⊛ ruby ⊛ dialog
⊛ figcaption ⊛ rt
26.
27.
28. ( 1: New Elements —
Implementation )
⊛ Add this <script> tag just after <head>:
<!--[if lt IE 9]><script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js"></
script><![endif]-->
29. ( 1: New Elements —
Implementation )
⊛ Add this <script> tag just after <head>:
<!--[if lt IE 9]><script src="http://
html5shiv.googlecode.com/svn/trunk/html5.js"></
script><![endif]-->
⊛ Add this line to the top of your CSS file:
section, article, aside, header, footer, nav, figure, dialog
{ display: block; }
52. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
53. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
54. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
55. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
56. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
57. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
<h2>Summary</h2>
58. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
<h2>Summary</h2>
<div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to
maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's
zone. </div>
59. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
<h2>Summary</h2>
<div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to
maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's
zone. </div>
</section>
60. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
<h2>Summary</h2>
<div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to
maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's
zone. </div>
</section>
</section>
61. <!DOCTYPE html>
<html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="/" title="Chattarati Homepage">Chattarati</a>
<nav>
<ul>
<li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="hentry">
<header>
<h1>School Board Upholds Normal Park's Current Zone</h1>
</header>
<footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
<p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
</article>
</section>
<section id="sb">
<section class="summary-article">
<h2>Summary</h2>
<div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to
maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's
zone. </div>
</section>
</section>
<footer id="ft">
78. ( 1: New Attributes —
Miscellaneous )
⊛ ol[reversed]
⊛ iframe[sandbox]
⊛ script[async]
⊛ see more at http://www.w3.org/TR/html5-diff/
#new-attributes
79.
80.
81. ( 1: New Attributes —
Global )
⊛ contenteditable
82. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
83. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
⊛ data-*
84. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
⊛ data-*
⊛ draggable
85. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
⊛ data-*
⊛ draggable
⊛ hidden
86. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
⊛ data-*
⊛ draggable
⊛ hidden
⊛ role and aria-* (http://www.w3.org/TR/wai-
aria/)
87. ( 1: New Attributes —
Global )
⊛ contenteditable
⊛ contextmenu
⊛ data-*
⊛ draggable
⊛ hidden
⊛ role and aria-* (http://www.w3.org/TR/wai-
aria/)
⊛ spellcheck
88.
89.
90. ( 2: Client Side
Storage )
⊛ Store data in the browser via a JavaScript API
(http://bit.ly/b95AIS)
91. ( 2: Client Side
Storage )
⊛ Store data in the browser via a JavaScript API
(http://bit.ly/b95AIS)
⊛ Enable offline syncing or speed up heavy web
apps
92. ( 2: Client Side
Storage )
⊛ Store data in the browser via a JavaScript API
(http://bit.ly/b95AIS)
⊛ Enable offline syncing or speed up heavy web
apps
⊛ Gracefully degrade with http://
plugins.jquery.com/project/jStorage
93. ( 2: Client Side
Storage )
⊛ Store data in the browser via a JavaScript API
(http://bit.ly/b95AIS)
⊛ Enable offline syncing or speed up heavy web
apps
⊛ Gracefully degrade with http://
plugins.jquery.com/project/jStorage
⊛ Store static assets in a manifest for offline
access (http://bit.ly/dnOQYc)
94.
95.
96. ( 3: <audio>
)
⊛ Native support for audio file playback with a
full JavaScript API for controls
97. ( 3: <audio>
)
⊛ Native support for audio file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/awkhmZ)
98. ( 3: <audio>
)
⊛ Native support for audio file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/awkhmZ)
⊛ Fallback with
<audio src=”file.mp3”>
<embed src=”flashplayer.swf”></embed>
</audio>
99. ( 3: <audio>
)
⊛ Native support for audio file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/awkhmZ)
⊛ Fallback with
<audio src=”file.mp3”>
<embed src=”flashplayer.swf”></embed>
</audio>
⊛ Or, get around the format war with http://bit.ly/
bwny0J
100.
101.
102. ( 4: <video>
)
⊛ Native support for video file playback with a
full JavaScript API for controls
103. ( 4: <video>
)
⊛ Native support for video file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/cdmRVx)
104. ( 4: <video>
)
⊛ Native support for video file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/cdmRVx)
⊛ Fallback with
<video src=”file.mp3”>
<embed src=”flashplayer.swf”></embed>
</video>
105. ( 4: <video>
)
⊛ Native support for video file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/cdmRVx)
⊛ Fallback with
<video src=”file.mp3”>
<embed src=”flashplayer.swf”></embed>
</video>
⊛ Or, get around the format war with http://bit.ly/
b3AeXi
106. ( 4: <video>
)
⊛ Native support for video file playback with a
full JavaScript API for controls
⊛ Go full native (http://bit.ly/cdmRVx)
⊛ Fallback with
<video src=”file.mp3”>
<embed src=”flashplayer.swf”></embed>
</video>
⊛ Or, get around the format war with http://bit.ly/
b3AeXi
⊛ See some demos at http://youtube.com/html5
or http://bit.ly/cfI2ML
107.
108.
109. ( 5: New Form Types
⊛ search ⊛ time
)
⊛ tel ⊛ datetime-local
⊛ url ⊛ number
⊛ email ⊛ range
⊛ datetime ⊛ color
⊛ date
⊛ month
⊛ week
110.
111.
112. ( 5: New Form Types
⊛ Write your own JavaScript validation
)
⊛ Use http://code.google.com/p/webforms2/
⊛ Be sure to still do server-side validation, the
client-side is mainly to benefit your users
113.
114.
115. ( Thanks for
listening
http://dryan.com/html5 for more info
)