A first look at Html 5

www.orbitone.com
Raas van Gaverestraat 83
B-9000 GENT, BELGIUM
E-mail info@orbitone.com
Website www.orbitone.com
Tel. +32 9 330 15 00
VAT BE 456.457.353
Bank 442-7059001-50 (KBC)
Hans De Smedt
23 April, 2010
HTML5

Goodbye IE6
23 April, 2010
HTML5

A Browser Decomposed
Display
Tree
“DOM”
HTML Objects
CSS Properties
Script Edits
Events Animates
Animation
Timer
Layout Display
Input streams
HTML
CSS
Script
XHTML
Parsed
23 April, 2010
HTML5

GPU on Every Machine
23 April, 2010
HTML5

Flying Images – One Animation GPU
IE8
IE9
IE
8
IE
9
23 April, 2010
HTML5

23 April, 2010
HTML5
Coudn’t draw on the web easly
Use
Flash,
Javascript,
Silverlight
Trapped in a box

23 April, 2010
HTML5
Scalable Vector Graphics (SVG)
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>

23 April, 2010
HTML5
var rect = document.getElementById('myRect');
rect.style.fill = 'green';
rect.onclick = function() { alert('hello'); }

23 April, 2010
HTML5

23 April, 2010
HTML5
Canvas API
JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

23 April, 2010
HTML5
Demos
Mozilla Download Center (FF)
First Person Gifter (FF)
SVG WOW (FF) - SMILE
Population Demo (FF)
Bespin (Safari)
German Election Atlas (Safari)

23 April, 2010
HTML5
When Canvas or SVG?
 SVG -> High level
Import/Export
Easy UIs
Interactive
Medium Animation
Tree of objects
 Canvas -> Low level
No mouse interaction
High Animation
JS Centric
More Bookkeeping
Pixels
Wednesday, October

23 April, 2010
HTML5
http://www.youtube.com/watch?v=XCk22AaRxiE
Google
svg
•Google docs
Canvas
•Performance graphics

23 April, 2010
HTML5
Video is Complicated, and Outside Your Control
HTML 5 makes n<video> as easy as <img>
<video src="http://example.com/myMovie.ogg" controls>
Your browser does not support the video element.
</video>

23 April, 2010
HTML5
Video is Complicated, and Outside Your Control
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the video element.
</video>
•Scripting
var v = document.getElementsByTagName("video")[0];
v.play();

23 April, 2010
HTML5
Demos
Basic Player (FF 3.5)
YouTube (Safari 4) - View Source

23 April, 2010
HTML5
Life’s Better with Location
For
CRM
Social Netork
Ads
Photos
Games
Places
...And Browsers Are Now Location-Enabled
The geolocation api brings browserbased location to your apps

23 April, 2010
HTML5
Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
}
);

23 April, 2010
HTML5
Demo
Google Maps (FF 3.5)

23 April, 2010
HTML5
Web Apps Need to Work Everywhere
database and app cache store user data and app resources
locally
Sticky Notes Demo (Safari 4)

23 April, 2010
HTML5
App Cache
•List resources that you want to take offline
CACHE MANIFEST
/static/stickies.html
/media/deleteButton.png
/media/deleteButtonPressed.png
/css/stickies.css
/js/stickies.js
<body manifest="./cache.manifest">
</body>

23 April, 2010
HTML5
Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
}
);
}

23 April, 2010
HTML5
Web workers
web workers defines an API for running background scripts
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)

23 April, 2010
HTML5
Web Worker
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
};
</script>

23 April, 2010
HTML5
worker.js
function findPrimes() {
// ... prime algorithm here
postMessage(nextPrime);
}
findPrimes();

23 April, 2010
HTML5
HTML5 Support

CSS Infrastructure
CSS3 Selectors
Help you do more on your site with less script, simpler markup
CSS3 Namespaces
Style elements with namespaces in XHTML documents
23 April, 2010
HTML5

Graphically-rich Styling with CSS3
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
23 April, 2010
HTML5

http://9elements.com/io/projects/html5/canvas/
http://onecm.com/projects/canopy/
http://ishtml5readyyet.com/
http://craftymind.com/factory/html5video/CanvasVideo.html
More Demos
23 April, 2010
HTML5

www.orbitone.com
HTML5
23 April, 2010

A first look at Html 5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Orbit One - We create coherence

Mais de Orbit One - We create coherence (20)

Último

Último (20)

A first look at Html 5

Notas do Editor