HTML5, makkelijker kunnen we het niet maken!

HTML

makkelijker kunnen we het niet maken!

Wednesday, February 1, 12

Henk


http://www.apple.com/hotnews/thoughts-on-flash/




http://forums.silverlight.net/p/230502/562077.aspxWednesday, February 1, 12

http://forums.silverlight.net/p/230502/562077.aspx

http://forums.silverlight.net/p/230502/562077.aspx

HTML5 ~= + +


HTML5 ~= HTML + +


HTML5 ~= HTML + CSS +


HTML5 ~= HTML + CSS + JS


HTML5 features

Semantics


HTML5 features

SemanticsCSS3


HTML5 features

SemanticsCSS3

Multimedia


HTML5 features

SemanticsCSS3

Multimedia

Graphics & 3D


HTML5 features

SemanticsCSS3

Multimedia

Graphics & 3DDevice Access


HTML5 features

SemanticsCSS3

Multimedia

Graphics & 3DDevice Access

Offline & Storage


HTML


HTML (1.0)

1991 HTML Tags specification


HTML (1.0)

1991 HTML Tags specification

1993 HTML specification


HTML 2.0, 3.0

1995 HTML 2.0


HTML 2.0, 3.0

1995 HTML 2.0

1995 HTML 3.0, proposal


HTML 3.2, 4.0

1997 HTML 3.2 ( W3C )


HTML 3.2, 4.0

1997 HTML 3.2 ( W3C )

1997 HTML 4.0


HTML 4.01, XHTML, WEB 2.0

1999 HTML 4.01



1999 HTML 4.01

2000 XHTML 1.0



1999 HTML 4.01

2000 XHTML 1.0

2001 XHTML 1.1



1999 HTML 4.01

2000 XHTML 1.0

2001 XHTML 1.1

2004 WEB 2.0


WHATWG

Mozilla


HTML5

2008 HTML5 working draft W3C


HTML5

2008 HTML5 working draft W3C

2009 XHTML 2.0 dropped


HTML5

2012 Candidate Recommendation


HTML5

2012 Candidate Recommendation

2022 Proposed Recommendation


HTML


Semantics


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML >


http://www.w3.org/TR/html4/loose.dtd

http://www.w3.org/TR/html4/loose.dtd

Microdata


<section itemscope><article id="pizza-new-york" itemtype="http://data-vocabulary.org/Product">

<header><h1 itemprop="name”>New York Pizza Suprema</h1>

</header><p itemprop="description">The best pizzaria of New York... >

</article></section>


http://data-vocabulary.org/Product

http://data-vocabulary.org/Product

Multimedia


safari chrome IE9 firefox

MP4 x x x

H.264 x x

WebM x x

Ogg x x


Demo

http://html5demos.com/video




Web Forms


No javascript


No javascript

Client side validation


No javascript


different input typeslike email, url, nummer


No javascript


different input typeslike email, url, nummer

color picker, date picker


Email Address: <input type="email" name="email" required


Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">


Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>


Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">


Device Access


Geolocation


Geolocation

Drag & Drop


Geolocation

Drag & Drop

Speech input


Geolocation

Drag & Drop

Speech input

Device orientation


Geolocation


if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map}); map.setCenter(latLng); }, errorHandler);}


demo

http://html5demos.com/geo




Events: dragover, dragenter, drop

Drag & Drop



event.transferData contains text and/ or image

Drag & Drop




links & images draggable by default

Drag & Drop




links & images draggable by default

other elements : draggable=”true”

Drag & Drop


demo

http://html5demos.com/drag




Device orientation

http://slides.html5rocks.com/#slide-orientation

window.addEventListener('deviceorientation', function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma;}, false);




File API

var reader = new FileReader();

reader.readAsDataURL(e.dataTransfer.files[0]);


demo


Speech input

http://slides.html5rocks.com/#speech-input

<input type="text" x-webkit-speech />




Graphics & 3D


Canvas

2D drawing platform

Bitmap system


When to use?


data visualisation


animated graphics


games


x

y

(0,0)


2d rendering contextcanvas


var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");


ctx.fillStyle = ‘rgb(65, 60, 50)’;ctx.fillRect(25, 50, 100, 100);

ctx.strokeStyle = ‘rgb(65, 60, 50)’;ctx.strokeRect(130, 500, 40, 70);


lineTo(x,y)

rect(x,y,w,h)

arc(x,y, radius, startAngle, endAngle, anticlockwise)


demo

http://hakim.se/experiments/html5/origami/




gl = canvas.getContext("moz-webgl"); // Firefox gl = canvas.getContext("webkit-3d"); // Safari or Chrome

WebGL


demo

http://www.zygotebody.com/#nav=1.61,126.68,176.3




CSS3


CSS selectors


CSS selectors

Columns


CSS selectors

Columns

Rounded Corners


CSS selectors

Columns

Rounded Corners

Gradients


CSS selectors

Columns

Rounded Corners

Gradients

Shadows


CSS selectors

Columns

Rounded Corners

Gradients

Shadows

Transitions


CSS selectors

Columns

Rounded Corners

Gradients

Shadows

Transitions

Transforms


CSS Selectors

.row:nth-child(even) { background: #dde;}.row:nth-child(odd) { background: white;}


Specific attributes

input[type="text"] { background: #eee;}


Negation

:not(.box) { color: #00c; } :not(span) { display: block; }


Columns

-webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em;

http://slides.html5rocks.com/#css-columns




Rounded Corners

box: border-radius: 22px;


Gradients

background: -webkit-gradient(linear, left top, left bottom,

from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00))


demo

http://www.css3maker.com/css-gradient.html




Shadows

text-shadow: rgb(5, 5, 5, #000000)

box-shadow: rgb(5, 5, 5, #000000)


demo

http://www.css3maker.com/text-shadow.html




Transitions & Transforms

http://www.css3maker.com/css3-transform.html




Texthttp://mrdoob.com/projects/chromeexperiments/google_gravity/

http://mrdoob.com/projects/chromeexperiments/google_sphere/


http://mrdoob.com/projects/chromeexperiments/google_gravity/

http://mrdoob.com/projects/chromeexperiments/google_gravity/



Offline & Storage


Offline Web Applications

application cachingoffline storage


application caching

HTML5 online/offline detectioncaching resources

manifest


navigator.onLine()

addEventListener("online", function () {...} addEventListener("offline", function () {...}

http://html5demos.com/offline




CACHE MANIFEST# manifest version 1.0.1 # Files to cache/html5/src/logic.js/html5/src/style.css/html5/src/background.png# Use from network if availableNETWORK:/# Fallback contentFALLBACK:/ fallback.html

appCache file


<!DOCTYPE html><html manifest="offline.appcache"><head><title>HTML5 Application Cache Rocks!</title>


Offline Storage

Web Storage


Offline Storage

Web StorageWeb Database Storage


window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime());

textarea.value = window.localStorage.getItem('value');

localStorage & sessionStorage


IndexedDB

Object Storeasynchronoustransactions


Learn


http://diveintohtml5.info/




http://html5doctor.com/




http://www.html5rocks.com/en/




http://caniuse.com/


http://caniuse.com/

http://caniuse.com/

http://html5demos.com/




http://www.initializr.com/




http://www.processing.jsWednesday, February 1, 12



HTML5, makkelijker kunnen we het niet maken!

Technology

Transcript of HTML5, makkelijker kunnen we het niet maken!