HTML5, makkelijker kunnen we het niet maken!

HTML makkelijker kunnen we het niet maken!Wednesday, February 1, 12

HenkWednesday, February 1, 12

http://www.apple.com/hotnews/thoughts-on-ﬂash/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 + JSWednesday, February 1, 12

HTML5 features SemanticsWednesday, February 1, 12

HTML5 features Semantics CSS3Wednesday, February 1, 12

HTML5 features Semantics CSS3 MultimediaWednesday, February 1, 12

HTML5 features Semantics Graphics & 3D CSS3 MultimediaWednesday, February 1, 12

HTML5 features Semantics Graphics & 3D CSS3 Device Access MultimediaWednesday, February 1, 12

HTML5 features Semantics Graphics & 3D CSS3 Device Access Multimedia Ofﬂine & StorageWednesday, February 1, 12

HTMLWednesday, February 1, 12

HTML (1.0) 1991 HTML Tags speciﬁcationWednesday, February 1, 12

HTML (1.0) 1991 HTML Tags speciﬁcation 1993 HTML speciﬁcationWednesday, February 1, 12

HTML 2.0, 3.0 1995 HTML 2.0Wednesday, February 1, 12

HTML 2.0, 3.0 1995 HTML 2.0 1995 HTML 3.0, proposalWednesday, 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.0Wednesday, February 1, 12

HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01Wednesday, February 1, 12

HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01 2000 XHTML 1.0Wednesday, February 1, 12

HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1Wednesday, 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.0Wednesday, February 1, 12

WHATWG MozillaWednesday, February 1, 12

Wednesday, February 1, 12

HTML5 2008 HTML5 working draft W3CWednesday, February 1, 12

HTML5 2008 HTML5 working draft W3C 2009 XHTML 2.0 droppedWednesday, February 1, 12

HTML5 2012 Candidate RecommendationWednesday, February 1, 12

HTML5 2012 Candidate Recommendation 2022 Proposed RecommendationWednesday, February 1, 12

HTMLWednesday, February 1, 12

SemanticsWednesday, 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

<div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>Wednesday, February 1, 12

<header> <nav> <section> <sidebar> <article> <footer>Wednesday, February 1, 12

MicrodataWednesday, 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

MultimediaWednesday, 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 ﬁrefox MP4 x x x H.264 x x WebM x x Ogg x xWednesday, February 1, 12

Demo http://html5demos.com/videoWednesday, February 1, 12

Web FormsWednesday, February 1, 12

No javascriptWednesday, February 1, 12

No javascript Client side validationWednesday, February 1, 12

No javascript Client side validation different input types like email, url, nummerWednesday, February 1, 12

No javascript Client side validation different input types like email, url, nummer color picker, date pickerWednesday, February 1, 12

Email Address: <input type="email" name="email" requiredWednesday, 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

Device AccessWednesday, February 1, 12

GeolocationWednesday, February 1, 12

Geolocation Drag & DropWednesday, February 1, 12

Geolocation Drag & Drop Speech inputWednesday, February 1, 12

Geolocation Drag & Drop Speech input Device orientationWednesday, February 1, 12

GeolocationWednesday, 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/geoWednesday, February 1, 12

Drag & Drop Events: dragover, dragenter, dropWednesday, February 1, 12

Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or imageWednesday, February 1, 12

Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or image links & images draggable by defaultWednesday, February 1, 12

Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or image links & images draggable by default other elements : draggable=”true”Wednesday, February 1, 12

demo http://html5demos.com/dragWednesday, February 1, 12

Device orientation window.addEventListener(deviceorientation , function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; }, false); http://slides.html5rocks.com/#slide-orientationWednesday, February 1, 12

File API var reader = new FileReader(); reader.readAsDataURL(e.dataTransfer.ﬁles[0]);Wednesday, February 1, 12

demoWednesday, February 1, 12

Speech input <input type="text" x-webkit-speech /> http://slides.html5rocks.com/#speech-inputWednesday, February 1, 12

Graphics & 3DWednesday, February 1, 12

Canvas 2D drawing platform Bitmap systemWednesday, February 1, 12

When to use?Wednesday, February 1, 12

data visualisationWednesday, February 1, 12

animated graphicsWednesday, February 1, 12

gamesWednesday, February 1, 12

<canvas height=”600” width=”800”></canvas>Wednesday, February 1, 12

(0,0) x yWednesday, February 1, 12

canvas 2d rendering contextWednesday, 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

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

WebGL gl = canvas.getContext("moz-webgl"); // Firefox gl = canvas.getContext("webkit-3d"); // Safari or ChromeWednesday, February 1, 12

demo http://www.zygotebody.com/#nav=1.61,126.68,176.3Wednesday, February 1, 12

CSS3Wednesday, February 1, 12

CSS selectorsWednesday, February 1, 12

CSS selectors ColumnsWednesday, February 1, 12

CSS selectors Columns Rounded CornersWednesday, February 1, 12

CSS selectors Columns Rounded Corners GradientsWednesday, February 1, 12

CSS selectors Shadows Columns Rounded Corners GradientsWednesday, February 1, 12

CSS selectors Shadows Columns Transitions Rounded Corners GradientsWednesday, February 1, 12

CSS selectors Shadows Columns Transitions Rounded Corners Transforms GradientsWednesday, February 1, 12

CSS Selectors .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }Wednesday, February 1, 12

Speciﬁc 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-columnsWednesday, 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.htmlWednesday, 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.htmlWednesday, February 1, 12

Transitions & Transforms http://www.css3maker.com/css3-transform.htmlWednesday, February 1, 12

Text http://mrdoob.com/projects/chromeexperiments/google_gravity/ http://mrdoob.com/projects/chromeexperiments/google_sphere/Wednesday, February 1, 12

Ofﬂine & StorageWednesday, February 1, 12

Ofﬂine Web Applications application caching ofﬂine storageWednesday, February 1, 12

application caching HTML5 online/ofﬂine detection caching resources manifestWednesday, February 1, 12

navigator.onLine() addEventListener("online", function () {...} addEventListener("ofﬂine", function () {...} http://html5demos.com/ofﬂineWednesday, February 1, 12

appCache ﬁle 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 available NETWORK: / # Fallback content FALLBACK: / fallback.htmlWednesday, February 1, 12

<!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title>Wednesday, February 1, 12

Ofﬂine Storage Web StorageWednesday, February 1, 12

Ofﬂine Storage Web Storage Web Database StorageWednesday, February 1, 12

localStorage & sessionStorage window.localStorage.setItem(value, area.value); window.localStorage.setItem(timestamp, (new Date()).getTime()); textarea.value = window.localStorage.getItem(value);Wednesday, February 1, 12

IndexedDB Object Store asynchronous transactionsWednesday, February 1, 12

LearnWednesday, February 1, 12

http://diveintohtml5.info/Wednesday, February 1, 12

http://html5doctor.com/Wednesday, February 1, 12

http://www.html5rocks.com/en/Wednesday, February 1, 12

http://caniuse.com/Wednesday, February 1, 12

http://html5demos.com/Wednesday, February 1, 12

http://www.initializr.com/Wednesday, February 1, 12

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

HTML5, makkelijker kunnen we het niet maken!

by Henk Jurriens

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML5, makkelijker kunnen we het niet maken! Presentation Transcript