html5, makkelijker kunnen we het niet maken!
DESCRIPTION
Introduction into HTML5TRANSCRIPT
HTML
makkelijker kunnen we het niet maken!
Wednesday, February 1, 12
Henk
Wednesday, February 1, 12
Henk
Wednesday, February 1, 12
Henk
Wednesday, February 1, 12
http://www.apple.com/hotnews/thoughts-on-flash/
Wednesday, February 1, 12
http://forums.silverlight.net/p/230502/562077.aspxWednesday, February 1, 12
HTML5 ~= + +
Wednesday, February 1, 12
HTML5 ~= HTML + +
Wednesday, February 1, 12
HTML5 ~= HTML + CSS +
Wednesday, February 1, 12
HTML5 ~= HTML + CSS + JS
Wednesday, February 1, 12
HTML5 features
Semantics
Wednesday, February 1, 12
HTML5 features
SemanticsCSS3
Wednesday, February 1, 12
HTML5 features
SemanticsCSS3
Multimedia
Wednesday, February 1, 12
HTML5 features
SemanticsCSS3
Multimedia
Graphics & 3D
Wednesday, February 1, 12
HTML5 features
SemanticsCSS3
Multimedia
Graphics & 3DDevice Access
Wednesday, February 1, 12
HTML5 features
SemanticsCSS3
Multimedia
Graphics & 3DDevice Access
Offline & Storage
Wednesday, February 1, 12
HTML
Wednesday, February 1, 12
HTML (1.0)
1991 HTML Tags specification
Wednesday, February 1, 12
HTML (1.0)
1991 HTML Tags specification
1993 HTML specification
Wednesday, February 1, 12
HTML 2.0, 3.0
1995 HTML 2.0
Wednesday, February 1, 12
HTML 2.0, 3.0
1995 HTML 2.0
1995 HTML 3.0, proposal
Wednesday, February 1, 12
HTML 3.2, 4.0
1997 HTML 3.2 ( W3C )
Wednesday, February 1, 12
HTML 3.2, 4.0
1997 HTML 3.2 ( W3C )
1997 HTML 4.0
Wednesday, February 1, 12
HTML 4.01, XHTML, WEB 2.0
1999 HTML 4.01
Wednesday, February 1, 12
HTML 4.01, XHTML, WEB 2.0
1999 HTML 4.01
2000 XHTML 1.0
Wednesday, February 1, 12
HTML 4.01, XHTML, WEB 2.0
1999 HTML 4.01
2000 XHTML 1.0
2001 XHTML 1.1
Wednesday, February 1, 12
HTML 4.01, XHTML, WEB 2.0
1999 HTML 4.01
2000 XHTML 1.0
2001 XHTML 1.1
2004 WEB 2.0
Wednesday, February 1, 12
WHATWG
Mozilla
Wednesday, February 1, 12
Wednesday, February 1, 12
HTML5
2008 HTML5 working draft W3C
Wednesday, February 1, 12
HTML5
2008 HTML5 working draft W3C
2009 XHTML 2.0 dropped
Wednesday, February 1, 12
HTML5
2012 Candidate Recommendation
Wednesday, February 1, 12
HTML5
2012 Candidate Recommendation
2022 Proposed Recommendation
Wednesday, February 1, 12
HTML
Wednesday, February 1, 12
Semantics
Wednesday, February 1, 12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML >
Wednesday, February 1, 12
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset=utf-8>
Wednesday, February 1, 12
<script src=”foo.js” > </script>
<link href=”foo.css”></link>
Wednesday, February 1, 12
<div id=”header”>
<div id=”nav”>
<div id=”article”> <div id=”sidebar”>
<div id=”footer”>
Wednesday, February 1, 12
<header>
<nav>
<sidebar>
<footer>
<article>
<section>
Wednesday, February 1, 12
Microdata
Wednesday, February 1, 12
<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>
Wednesday, February 1, 12
Multimedia
Wednesday, February 1, 12
<video src=”movie.ogg” />
<video src=”movie.ogg” controls/>
Wednesday, February 1, 12
<video controls><source src=”movie.mp4” /><source src=”movie.ogg” />
</video>
Wednesday, February 1, 12
safari chrome IE9 firefox
MP4 x x x
H.264 x x
WebM x x
Ogg x x
Wednesday, February 1, 12
Demo
http://html5demos.com/video
Wednesday, February 1, 12
Web Forms
Wednesday, February 1, 12
No javascript
Wednesday, February 1, 12
No javascript
Client side validation
Wednesday, February 1, 12
No javascript
Client side validation
different input typeslike email, url, nummer
Wednesday, February 1, 12
No javascript
Client side validation
different input typeslike email, url, nummer
color picker, date picker
Wednesday, February 1, 12
No javascript
Client side validation
different input typeslike email, url, nummer
color picker, date picker
Wednesday, February 1, 12
Email Address: <input type="email" name="email" required
Wednesday, February 1, 12
Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">
Wednesday, February 1, 12
Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">
Wednesday, February 1, 12
Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Wednesday, February 1, 12
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">
Wednesday, February 1, 12
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">
Wednesday, February 1, 12
Device Access
Wednesday, February 1, 12
Geolocation
Wednesday, February 1, 12
Geolocation
Drag & Drop
Wednesday, February 1, 12
Geolocation
Drag & Drop
Speech input
Wednesday, February 1, 12
Geolocation
Drag & Drop
Speech input
Device orientation
Wednesday, February 1, 12
Geolocation
Wednesday, February 1, 12
Wednesday, February 1, 12
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);}
Wednesday, February 1, 12
demo
http://html5demos.com/geo
Wednesday, February 1, 12
Events: dragover, dragenter, drop
Drag & Drop
Wednesday, February 1, 12
Events: dragover, dragenter, drop
event.transferData contains text and/ or image
Drag & Drop
Wednesday, February 1, 12
Events: dragover, dragenter, drop
event.transferData contains text and/ or image
links & images draggable by default
Drag & Drop
Wednesday, February 1, 12
Events: dragover, dragenter, drop
event.transferData contains text and/ or image
links & images draggable by default
other elements : draggable=”true”
Drag & Drop
Wednesday, February 1, 12
demo
http://html5demos.com/drag
Wednesday, February 1, 12
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);
Wednesday, February 1, 12
File API
var reader = new FileReader();
reader.readAsDataURL(e.dataTransfer.files[0]);
Wednesday, February 1, 12
demo
Wednesday, February 1, 12
Speech input
http://slides.html5rocks.com/#speech-input
<input type="text" x-webkit-speech />
Wednesday, February 1, 12
Wednesday, February 1, 12
Graphics & 3D
Wednesday, February 1, 12
Canvas
2D drawing platform
Bitmap system
Wednesday, February 1, 12
When to use?
Wednesday, February 1, 12
data visualisation
Wednesday, February 1, 12
animated graphics
Wednesday, February 1, 12
games
Wednesday, February 1, 12
<canvas height=”600” width=”800”></canvas>
Wednesday, February 1, 12
x
y
(0,0)
Wednesday, February 1, 12
2d rendering contextcanvas
Wednesday, February 1, 12
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
Wednesday, February 1, 12
ctx.fillStyle = ‘rgb(65, 60, 50)’;ctx.fillRect(25, 50, 100, 100);
ctx.strokeStyle = ‘rgb(65, 60, 50)’;ctx.strokeRect(130, 500, 40, 70);
Wednesday, February 1, 12
Wednesday, February 1, 12
lineTo(x,y)
rect(x,y,w,h)
arc(x,y, radius, startAngle, endAngle, anticlockwise)
Wednesday, February 1, 12
demo
http://hakim.se/experiments/html5/origami/
Wednesday, February 1, 12
gl = canvas.getContext("moz-webgl"); // Firefox gl = canvas.getContext("webkit-3d"); // Safari or Chrome
WebGL
Wednesday, February 1, 12
demo
http://www.zygotebody.com/#nav=1.61,126.68,176.3
Wednesday, February 1, 12
CSS3
Wednesday, February 1, 12
CSS selectors
Wednesday, February 1, 12
CSS selectors
Columns
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Shadows
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Shadows
Transitions
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Shadows
Transitions
Transforms
Wednesday, February 1, 12
CSS selectors
Columns
Rounded Corners
Gradients
Shadows
Transitions
Transforms
Wednesday, February 1, 12
CSS Selectors
.row:nth-child(even) { background: #dde;}.row:nth-child(odd) { background: white;}
Wednesday, February 1, 12
Specific attributes
input[type="text"] { background: #eee;}
Wednesday, February 1, 12
Negation
:not(.box) { color: #00c; } :not(span) { display: block; }
Wednesday, February 1, 12
Columns
-webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em;
http://slides.html5rocks.com/#css-columns
Wednesday, February 1, 12
Rounded Corners
box: border-radius: 22px;
Wednesday, February 1, 12
Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00))
Wednesday, February 1, 12
demo
http://www.css3maker.com/css-gradient.html
Wednesday, February 1, 12
Shadows
text-shadow: rgb(5, 5, 5, #000000)
box-shadow: rgb(5, 5, 5, #000000)
Wednesday, February 1, 12
demo
http://www.css3maker.com/text-shadow.html
Wednesday, February 1, 12
Transitions & Transforms
http://www.css3maker.com/css3-transform.html
Wednesday, February 1, 12
Texthttp://mrdoob.com/projects/chromeexperiments/google_gravity/
http://mrdoob.com/projects/chromeexperiments/google_sphere/
Wednesday, February 1, 12
Offline & Storage
Wednesday, February 1, 12
Offline Web Applications
application cachingoffline storage
Wednesday, February 1, 12
application caching
HTML5 online/offline detectioncaching resources
manifest
Wednesday, February 1, 12
navigator.onLine()
addEventListener("online", function () {...} addEventListener("offline", function () {...}
http://html5demos.com/offline
Wednesday, February 1, 12
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
Wednesday, February 1, 12
<!DOCTYPE html><html manifest="offline.appcache"><head><title>HTML5 Application Cache Rocks!</title>
Wednesday, February 1, 12
Offline Storage
Web Storage
Wednesday, February 1, 12
Offline Storage
Web StorageWeb Database Storage
Wednesday, February 1, 12
window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime());
textarea.value = window.localStorage.getItem('value');
localStorage & sessionStorage
Wednesday, February 1, 12
IndexedDB
Object Storeasynchronoustransactions
Wednesday, February 1, 12
var db = todoDB.indexedDB.db; var trans = db.transaction(['todo'], IDBTransaction.READ_WRITE); var store = trans.objectStore('todo');
var data = { "text": todoText, // todoText should be visible here "timeStamp": new Date().getTime() };
var request = store.put(data);
request.onsuccess = function(e) { todoDB.indexedDB.getAllTodoItems(); };
request.onerror = function(e) { console.log("Error Adding: ", e); };
http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/
Wednesday, February 1, 12
Learn
Wednesday, February 1, 12
http://diveintohtml5.info/
Wednesday, February 1, 12
http://www.html5rocks.com/en/
Wednesday, February 1, 12
http://www.initializr.com/
Wednesday, February 1, 12
http://www.processing.jsWednesday, February 1, 12