HTML5, makkelijker kunnen we het niet maken!

makkelijker kunnen we het niet maken!

Wednesday, February 1, 12

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

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

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 (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

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

2008 HTML5 working draft W3C

2009 XHTML 2.0 dropped

2012 Candidate Recommendation

2022 Proposed Recommendation

Semantics

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

<!DOCTYPE HTML >

Microdata

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

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

</article></section>

Multimedia

</video>

safari chrome IE9 firefox

MP4 x x x

H.264 x x

WebM x x

Ogg x x

http://html5demos.com/video

Web Forms

No javascript

Client side validation

No javascript

different input typeslike email, url, nummer

No javascript

color picker, date picker

No javascript

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

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

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

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

Speech input

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

Graphics & 3D

Canvas

2D drawing platform

Bitmap system

When to use?

data visualisation

animated graphics

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)

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

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

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

CSS selectors

Columns

CSS selectors

Columns

Rounded Corners

CSS selectors

Columns

Rounded Corners

Gradients

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

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

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

Shadows

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

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

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/

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

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/

http://diveintohtml5.info/

http://html5doctor.com/

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

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!

Sollicitanten met een sterk merk vinden makkelijker werk

HTML5 & CSS3 voor slimme mensen zoals u

Opendeurdag html5

HTML5 & CSS3 · 2019-05-28 · Handboek – HTML5 & CSS3 Afbeelding 10.1 Media queries in actie: belastingdienst.nl op drie formaten. query heeft de volgende algemene vorm (let op

SPOTLIGHT MACHINEBOUW - WurthSPOTLIGHT MACHINEBOUW Om het u wat makkelijker te maken, bieden wij u een leidraad voor Würth producten en oplossingen in de Machinebouw. Voor de diverse

1 HTML5 en CSS3 - Managementboek.nl · 1 HTML5 en CSS3 7 Open index.html met de browser door dubbel te klikken op het pictogram van het bestand index.html.Figuur 1.6 Het resultaat

PowerPoint-presentatie - Media en Maatschappij...Door het maken van een simpel als-dan plan, wordt het makkelijker om empowerment-strategieën toe te passen. Door oefening en herhaling

HTML5 (Dutch)

2011 06-20 - drupal jam - html5 video

'leuker kunnen we het niet maken, wel makkelijker' · Implementatie ECK iD in de leermiddelenketen: 'leuker kunnen we het niet maken, wel makkelijker' saMBO-ICT conferentie, HP Köhler

Talk 02 html5-css3

Welkom in een wereld vol - Subaru · 2019-09-18 · uitstappen voor iedereen makkelijker te maken. enmaal ingestapt, merkt u het groter geworden en ruimere interieur, met gerieﬂijkheden

DIGITALE INNOVATIE IN HET ONDERWIJS€¦ · VERSNEL DE INNOVATIE Digitale technologieën maken leren en lesgeven makkelijker en leuker. Adaptief onderwijs, de virtual assistant, het

Innovatie is makkelijker dan je denkt

Help bij Adobe Animate CC · 2016. 6. 15. · Aangepaste HTML5 Canvas-sjablonen maken en koppelen aan profielen voor publicatie Ondersteuning voor OAM-publicatie van AS3-, WebGL-

HTML5: wat, waarom en hoe

Een introductie tot HTML5

HTML5, door Dennis Vroegop op de 4DotNet Developers Day

HTML5 & CSS3 in der Praxis - ReadingSample...Professional Series HTML5 & CSS3 in der Praxis von Alexis Goldstein, Louis Lazaris, Estelle Weyl 1. Auflage Franzis-Verlag 2012 Verlag

Voorlichting COPD Beter leven met COPD!. Doelstelling Zelf actief aan de slag! Makkelijker en beter keuzes maken over uw behandeling Betere kwaliteit.