Web Directions @media 2010
-
Upload
patrick-lauke -
Category
Education
-
view
2.082 -
download
4
Transcript of Web Directions @media 2010
![Page 1: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/1.jpg)
Brave new world of HTML5
Patrick H. Lauke / Webdirections @media / London / 11 June 2010
THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA)
![Page 2: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/3.jpg)
new technologies you can start using today
![Page 4: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/4.jpg)
HTML5<!DOCTYPE html>
![Page 5: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/24374884@N08/4603715307/
![Page 6: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/6.jpg)
HTML5 definition without the bullsh*t
![Page 7: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/7.jpg)
history of HTML5
● started at Opera – Web Applications 1.0● reaction to XHTML 2.0● Google, Mozilla and Apple joined● W3C HTML5● Microsoft involvement
![Page 8: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/8.jpg)
“...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 9: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/9.jpg)
HTML5 does not replace HTML 4.01
![Page 10: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/10.jpg)
HTML5 has more bling!
![Page 11: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/11.jpg)
HTML5 standardises current browser and authoring behaviour
(e.g. relaxed coding rules)
![Page 12: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/12.jpg)
HTML5 is stricter?(defines exactly how browsers handle markup/code)
![Page 13: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/13.jpg)
HTML5 brings newmarkup elements and JavaScript APIs
![Page 14: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/14.jpg)
new elements for more accurate semantics
![Page 15: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/15.jpg)
HTML5 elements for a typical blog
![Page 16: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/16.jpg)
![Page 17: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/17.jpg)
![Page 18: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/18.jpg)
unambiguous and machine readable
![Page 19: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/19.jpg)
current and old browsers “support” these(although some need a little extra help)
header, footer, … { display: block; }
![Page 20: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/20.jpg)
Internet Explorer needs extra training wheelsdocument.createElement('header');document.createElement('footer');…http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
![Page 21: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/21.jpg)
webforms – more powerful form elements
![Page 22: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/22.jpg)
rich form elements – without JavaScript
<input type=”date”><input type=”time”><input type=”month”><input type=”week”><input type=”datetime” … ><input type=”range”><input type=”number”><input type=”file” multiple><input … autofocus><input … autocomplete>
![Page 23: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/23.jpg)
type and attributes for built-in validation(of course you should still validate on the server)
<input type=”tel”><input type=”email”><input type=”url”><input … pattern="[a-z]{3}[0-9]{3}"><input … required>Demonstration of webforms
![Page 24: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/24.jpg)
<video>
![Page 25: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/25.jpg)
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
![Page 26: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/26.jpg)
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 27: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/27.jpg)
video as native object...why is it important?
● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
Demonstration of video
![Page 28: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/28.jpg)
video format debate
H.264 vs Ogg Theora
![Page 29: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/29.jpg)
video format debate
H.264 vs Ogg Theora vs WebM
![Page 30: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/30.jpg)
video formats – H.264 + OGG Theora + WebM
<video controls autoplay poster="…" width="…" height="…"><source src="movie.webm" type="video/webm" /><source src="movie.ogv" type="video/ogg" /><source src="movie.mp4" type="video/mp4" /><!-- fallback content -->
</video>
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
![Page 31: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/31.jpg)
<audio>
![Page 32: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/32.jpg)
audio exactly the same
<audio src=”music.mp3” controls autoplay></audio>[...]<audio controls autoplay>
<source src="music.mp3" type="audio/mpeg" /><source src="music.oga" type="audio/ogg" /><!-- fallback content -->
</audio>
MP3, Ogg Vorbis, WAVDemonstration: audio
![Page 33: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/33.jpg)
<canvas>
![Page 34: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/34.jpg)
canvas = “scriptable images”
<canvas width="…" height="…"></canvas>
![Page 35: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/35.jpg)
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);ctx = canvas.drawImage(…);
![Page 36: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/36.jpg)
canvas accessibility concerns
![Page 37: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/37.jpg)
canvas appropriate use for enhanced visuals, special effects – not pure content
![Page 38: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/38.jpg)
video, audio and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 39: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/39.jpg)
![Page 40: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/40.jpg)
![Page 41: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/41.jpg)
![Page 42: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/42.jpg)
![Page 43: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/43.jpg)
![Page 44: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/44.jpg)
But is it safe to use, right now?
![Page 45: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/45.jpg)
feature-detectionprogressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html
![Page 46: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/46.jpg)
HTML5 as Flashkiller?
![Page 47: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/47.jpg)
not a question of HTML5 replacing Flash...
![Page 48: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/48.jpg)
Giving developers a choice!
![Page 49: Web Directions @media 2010](https://reader033.fdocuments.in/reader033/viewer/2022052822/554f8c41b4c9052a518b5188/html5/thumbnails/49.jpg)
www.opera.com/developerpeople.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf