-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (169 loc) · 7.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Use HTML5 Now, Dammit!</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" media="all" href="html5dammit.css"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
</head>
<body>
<article id="useHTML5dammit">
<header id="intro">
<h1>Use HTML5 Now, Dammit!</h1>
<h2>or, at the very least use <!doctype html></h2>
<ul class="slide_nav">
<li><a href="#doctype" class="next">Next</a></li>
</ul>
</header>
<section id="doctype">
<header>
<h1>If you remember nothing else, remember this: <!doctype html></h1>
</header>
<p>Simplest DOCTYPE that will keep browsers out of dreaded <a href="http://quirksmode.org/">quirks mode</a></p>
<p>For a great overview of three strategies for picking a doctype, read <a href="http://cognition.happycog.com/article/are-doctypes-the-new-lunch-tables">Jenn Lukas' article in Cognition</a></p>
<ul class="slide_nav">
<li><a href="#intro" class="reset">Previous</a></li>
<li><a href="#whatisit" class="next">Next</a></li>
</ul>
</section>
<section id="whatisit">
<header>
<h1>What is HTML5?</h1>
</header>
<p>Simply put, it's “the latest iteration of the web’s lingua franca” — <a href="http://adactio.com">Jeremy Keith</a></p>
<p>There are many technologies which often get lumped under the banner of HTML5. Some make less sense than others (SVG, CSS3)</p>
<p>Just remember, HTML is markup</p>
<ul class="slide_nav">
<li><a href="#doctype" class="prev">Previous</a></li>
<li><a href="#whatisntit" class="next">Next</a></li>
</ul>
</section>
<section id="whatisntit">
<header>
<h1>What isn't HTML5?</h1>
</header>
<h2>HTML5 may or may not be:</h2>
<ul>
<li>The silver bullet for all the web's problems</li>
<li><a href="http://areunicorns.partofhtml5.com/?" title="yEs!">Unicorns</a></li>
<li><a href="http://media.chikuyonok.ru/ambilight" title="OMG! Double rainbow all the way across the sky!">Rainbows</a></li>
</ul>
<ul class="slide_nav">
<li><a href="#whatisit" class="prev">Previous</a></li>
<li><a href="#why" class="next">Next</a></li>
</ul>
</section>
<section id="why">
<header>
<h1>Why?</h1>
</header>
<p>More semantic elements to choose from mean less cruft, more efficient markup</p>
<ul class="inline">
<li><code>header</code></li>
<li><code>footer</code></li>
<li><code>article</code></li>
<li><code>section</code></li>
<li><code>nav</code></li>
</ul>
<p>No more plug-ins, audio and video may now be displayed directly by the browser</p>
<p>App-like features: off-line storage, drag-and-drop, multithreading (via Web Workers)</p>
<ul class="slide_nav">
<li><a href="#whatisntit" class="prev">Previous</a></li>
<li><a href="#inputtypes" class="next">Next</a></li>
</ul>
</section>
<section id="inputtypes">
<header>
<h1>New <input> types</h1>
</header>
<ul>
<li><code>email</code></li>
<li><code>tel</code></li>
<li><code>date</code></li>
<li><code>datetime</code></li>
</ul>
<ul class="slide_nav">
<li><a href="#why" class="prev">Previous</a></li>
<li><a href="#av" class="next">Next</a></li>
</ul>
</section>
<section id="av">
<header>
<h1><audio/> &amp; <video/></h1>
</header>
<p>Browser-native media, no plug-ins necessary</p>
<p>Codecs are a pain</p>
<p>IE is a pain, but no more than usual</p>
<p>Keep your eyes peeled for a detailed presentation on <video/> from Tim Badaczewski!</p>
<ul class="slide_nav">
<li><a href="#inputtypes" class="prev">Previous</a></li>
<li><a href="#progenhance" class="next">Next</a></li>
</ul>
</section>
<section id="progenhance">
<header>
<h1>A Note on Progressive Enhancement</h1>
</header>
<p>You can use nearly all features of HTML5, CSS3, and the latest JavaScript, but treat all of the above as bonuses for those fortunate enough to use modern browsers. Don't forget the poor folks shackled with Internet Explorer 6 (or 7, or 8...)</p>
<ul>
<li><a href="http://modernizr.com">modernizr</a></li>
<li><a href="http://code.google.com/p/html5shim/">html5 shim</a></li>
<li><a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> – “A shim that mimics a future API providing fallback functionality to older browsers” — <a href="http://paulirish.com/">Paul Irish</a></li>
</ul>
<ul class="slide_nav">
<li><a href="#av" class="prev">Previous</a></li>
<li><a href="#mobile" class="next">Next</a></li>
</ul>
</section>
<section id="mobile">
<header>
<h1>Mobile</h1>
</header>
<p>WebKit dominates in some form or another</p>
<p>HTML5 is good for mobile</p>
<ul>
<li>More semantic elements means less classitis, fewer bytes</li>
<li>Offline storage</li>
<li>Web workers</li>
<li>Geolocation</li>
</ul>
<ul class="slide_nav">
<li><a href="#progenhance" class="prev">Previous</a></li>
<li><a href="#resources" class="next">Next</a></li>
</ul>
</section>
<section id="resources">
<header>
<h1>Further Reading</h1>
</header>
<h2>Webbish</h2>
<ul class="inline">
<li><a href="http://diveintohtml5.org">diveintohtml5.org</a></li>
<li><a href="http://html5doctor.com">html5doctor.com</a></li>
<li><a href="http://html5rocks.com">html5rocks.com</a></li>
<li><a href="http://slides.html5rocks.com">slides.html5rocks.com</a></li>
<li><a href="http://html5demos.com">html5demos.com</a></li>
</ul>
<h2>Dead Treeish</h2>
<ul class="inline">
<li><a href="http://www.abookapart.com/products/html5-for-web-designers">HTML5 for Web Designers</a></li>
<li><a href="http://introducinghtml5.com/">Introducing HTML5</a></li>
</ul>
<ul class="slide_nav">
<li><a href="#mobile" class="prev">Previous</a></li>
<li><a href="#intro" class="reset">Reset</a></li>
</ul>
</section>
<footer>
<small>as presented to the Interactive Media Technology Center, <time datetime="2011-04-27">April 27, 2011</time></small>
</footer>
</article>
<!-- Fork me on Github ribbon -->
<a href="http://github.com/lroggendorff/HTML5Dammit"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/ce742187c818c67d98af16f96ed21c00160c234a/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="html5dammit.js"></script>
</body>
</html>