HTML 5 fruitmand

SURFnet HTML 5 Webinar– 15 november 2011 - Herman van Dompseler

HTML 5

HTML 5 gebruikt als verzamelnaam voor

HTML 5 markup

Javascript scripting

CSS3 vormgeving

Een fruitmand vol

20 cases verdeeld over 5 categorieën

HTML 5 basics◦ Case 1: form elements

HTML 5 storage◦ Case 2: local storage

HTML 5 presentation HTML 5 multimedia

◦ Case 3: video wall

En meer...

Les 1: bezint eer ge begint

Maar eerst...

Factoren om te overwegen:

Welke toepassing ga je maken

Welke HTML features wil je inzetten

Voor welk platform maak je je applicatie

De vraag is: wat je wilt, kan dat wel?

Les 1: bezint eer ge begint

Het antwoord is: caniuse.com

Poll

Voor welk platform zou jij HTML 5 willen inzetten?

Geen

Desktop browsers: IE, firefox, chrome & safari

iOs safari: voor iPad en iPhone

Android browser: voor android phones en tablets

HTML 5 basics

Case 1... nieuwe form elementen:

<form>

<input type=“text”>

Nieuw: <input type=“date”> Of: <input type = “mail”> Of: <input type = “search”>

</form>

HTML 5 basics: voorbeeld

Case 1: <input type=“date”>

HTML 5 basics: les

Belangrijkste les bij de HTML 5 basics

Er zijn eigenlijk maar 2 platformen die voor HTML 5 basics geschikt zijn

1. Opera voor de desktop

2. iOs voor de iphone& ipad

Terug bij de Poll

Voor welk platform zou jij HTML 5 willen inzetten?

Geen

Desktop browsers: IE, firefox, chrome & safari

iOs safari: voor iPad en iPhone

Android browser: voor android phones en tablets

HTML 5 storage

Case 2... verschillende technieken om data bij de browser op te slaan met Javascript

Web storage / local storage

SQL storage

Application cache.

HTML 5 storage: voorbeeld

Case 2: Local storage

HTML 5 storage: les

Belangrijkste lessen bij de HTML 5 storage

1. De gebruikers moeten lokale opslag toestaan

2. Gebruikers kunnen de opslag bewerken

3. De application cache is noodzakelijk voor offline werken.

◦ Een caching strategie plannen is niet triviaal.

HTML 5 multimedia

Case 3... <video> wall met transformaties

Toon een video wall van 2x2, 3x3, 4x4 afhankelijk van device/platform

Gebruik CSS3 transformaties tijdens selecties van videos

Gebruik local storage om video presentatie te versnellen.

HTML 5 multimedia: voorbeeld

Case 3: video wall

HTML 5 multimedia: les

Belangrijkste lessen na implementatie HTML 5 <video> wall applicatie

1. lokale opslag van metadata◦ versneld zoeken en presenteren◦ maar... video’s zelf zijn niet lokaal op te slaan

2. Css 3 3d-transformaties zijn afhankelijk van onderliggende hardware

3. Applicatie werkt op alle platformen

HTML 5 <video>

Caniuse.com:<video>

Meer infoHerman van Dompseler

herman@dompseler.nl

henny@surfnet.nl (voor een exemplaar van het rapport)

http://beta.surfnet.nl/html5 (de demo site, geen garanties )