speak the web 15.02.2010
TRANSCRIPT
![Page 1: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/1.jpg)
The future of web technologies
Patrick H. Lauke / Speak the Web / Liverpool / 15 February 2010
LET'S FIRE UP THE FLUX CAPACITOR...
![Page 2: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/3.jpg)
new technologies you can start using today
![Page 4: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/4.jpg)
HTML5<!DOCTYPE html>
![Page 5: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/5.jpg)
history of HTML5
● started at Opera – Web Applications 1.0● reaction to XHTML's direction● Mozilla and Apple joined● W3C HTML5● Microsoft involvement
![Page 6: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/6.jpg)
HTML5 standardises current browser and authoring behaviour
(e.g. relaxed coding rules)
![Page 7: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/7.jpg)
HTML5 does not replace HTML 4.01
![Page 8: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/8.jpg)
HTML5 has more bling!
![Page 9: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/9.jpg)
“...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 10: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/10.jpg)
HTML5 is umbrella term:markup elements and JavaScript APIs
![Page 11: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/11.jpg)
new elements for more accurate semantics
![Page 12: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/12.jpg)
HTML5 elements for a typical blog
![Page 13: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/13.jpg)
![Page 14: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/14.jpg)
![Page 15: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/15.jpg)
HTML5 – unambiguous and machine readable
![Page 16: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/16.jpg)
current and old browsers “support” these(although some need a little extra help)
header, footer, … { display: block; }
![Page 17: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/17.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 18: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/18.jpg)
webforms – more powerful form elements
![Page 19: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/19.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 20: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/20.jpg)
rich form elements – without JavaScript
<input type=”text” list=”mylist”><datalist id="mylist"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> …</datalist>
![Page 21: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/21.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 22: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/22.jpg)
<canvas>
![Page 23: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/23.jpg)
canvas = “scriptable images”
![Page 24: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/24.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);…
![Page 25: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/25.jpg)
canvas mixing things up with external graphics
ctx = canvas.drawImage(…);Demonstration of canvas
![Page 26: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/26.jpg)
canvas accessibility concerns
![Page 27: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/27.jpg)
canvas appropriate use for enhanced visuals, special effects – not pure content
Demonstration: http://www.filamentgroup.com/examples/charting_v2/
![Page 28: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/28.jpg)
<video>
![Page 29: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/29.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 30: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/30.jpg)
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 31: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/31.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 32: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/32.jpg)
video format debates – H.264 vs OGG Theora
<video controls autoplay poster="…" width="…" height="…"><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 33: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/33.jpg)
canvas accessibility concerns
![Page 34: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/34.jpg)
video and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 35: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/35.jpg)
1.21 gigawatts? Great Scott!Patrick frantically mentions lots of other HTML5 goodies in a few minutes...
![Page 36: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/36.jpg)
geolocation
![Page 37: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/37.jpg)
find out your location via JavaScript
navigator.geolocation.getCurrentPosition(success, error);function success(position) {
/* where's Waldo? */var lat = position.coords.latitude;var long = position.coords.longitude;...
}
![Page 38: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/38.jpg)
offline support
![Page 39: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/39.jpg)
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
![Page 40: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/40.jpg)
storage
![Page 41: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/41.jpg)
localStorage/sessionStoragelike cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'…/* convoluted string operations go here … */
![Page 42: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/42.jpg)
localStorage/sessionStoragelike cookies...on steroids!
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
![Page 43: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/43.jpg)
Web Database – full relational DB / SQL
var db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */
});});
![Page 44: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/44.jpg)
application cache
![Page 45: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/45.jpg)
cache UI/resource files for offline use
<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.css
![Page 46: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/46.jpg)
and more!(geolocation, drag and drop, server-sent events, web workers, …)
![Page 47: Speak the Web 15.02.2010](https://reader033.vdocuments.site/reader033/viewer/2022060109/55561d12d8b42ae0238b51d9/html5/thumbnails/47.jpg)
www.opera.com/developerpeople.opera.com/patrickl/presentations/speaktheweb_15.02.2010/speaktheweb_15.02.2010.pdf