Speak the Web 15.02.2010

The future of web technologies
LET'S FIRE UP THE FLUX CAPACITOR...

Patrick H. Lauke / Speak the Web / Liverpool / 15 February 2010

new technologies you can start using today

history of HTML5

● started at Opera – Web Applications 1.0
● reaction to XHTML's direction

● Mozilla and Apple joined

● W3C HTML5

● Microsoft involvement

HTML5 standardises current browser and
authoring behaviour
(e.g. relaxed coding rules)

HTML5 does not replace HTML 4.01

“...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 HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

HTML5 is umbrella term:
markup elements and JavaScript APIs

new elements for more accurate semantics

HTML5 elements for a typical blog

HTML5 – unambiguous and machine readable

current and old browsers “support” these
(although some need a little extra help)

header, footer, … { display: block; }

Internet Explorer needs extra training wheels
document.createElement('header');
document.createElement('footer');
…

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2

webforms – more powerful form elements

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>

rich form elements – without JavaScript
<input type=”text” list=”mylist”>

<datalist id="mylist">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
…
</datalist>

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

canvas = “scriptable images”

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);
…

canvas mixing things up with external graphics
ctx = canvas.drawImage(…);

Demonstration of canvas

canvas appropriate use for enhanced visuals,
special effects – not pure content
Demonstration: http://www.filamentgroup.com/examples/charting_v2/

<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

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

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" />

</video>

still include fallback for old browsers
http://camendesign.com/code/video_for_everybody

video and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)

1.21 gigawatts? Great Scott!
Patrick frantically mentions lots of other HTML5 goodies in a few minutes...

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;
...
}

detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);

localStorage/sessionStorage
like cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010
23:59:59 UTC; path=/'
…

/* convoluted string operations go here … */

localStorage/sessionStorage
like cookies...on steroids!
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.clear();
localStorage.key = value;
if (localStorage.key == '…') { … }
…

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 */
});
});

cache UI/resource files for offline use
<html manifest=”blah.manifest”>

CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css

and more!
(geolocation, drag and drop, server-sent events, web workers, …)

www.opera.com/developer
people.opera.com/patrickl/presentations/speaktheweb_15.02.2010/speaktheweb_15.02.2010.pdf
patrick.lauke@opera.com

Speak the Web 15.02.2010

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Ähnlich wie Speak the Web 15.02.2010

Ähnlich wie Speak the Web 15.02.2010 (20)

Mehr von Patrick Lauke

Mehr von Patrick Lauke (20)

Speak the Web 15.02.2010