html 5 en css 3

© Fedict 2014. All rights reserved

HTML 5 en CSS 3Fedict – 09/jan/2014

© Fedict 2014. All rights reserved | p. 2

Agenda

HTML5

CSS 3

Nieuwe APIs (Javascript)

Vragen ?


HTML5


HTML 5

Meestal bedoelt men hele reeks van specs: HTML 5 (opmaak) Allerhande CSS 3 (layout) Allerhande Javascript APIs (code)

W3C / WhatNG groep

Nooit echt af 5.1 is al in de maak

Veel elementen al ondersteund door browsers Modernizr script voor oude browsers


HTML 5 (2)

HTML of XML serialisatie “los” of “strikt” met sluiten elementen e.d.

Nieuwe elementen O.a. structuur, multimedia

Nieuwe attributen O.a. invoervelden, accessibility

Oude elementen / attributen verwijderd

“Offline”: caching webpagina's


Nieuwe elementen

Structuur <header>, <footer, <aside>, <nav> <section>, <article> => verbetering t.o.v <div>, browser kan “slimmer” zijn

Form controls <progress>, <meter>, <datalist> <output>


Voorbeeld structuur

<!DOCTYPE html><html><head><title>Demo page</title></head><body> <header> <nav> <a href=”contact.html”>Contact</a> <a href=”about.html”>About</a> </nav> </header> <footer>Powered by HTML 5</footer></body></html>


Voorbeeld structuur (2)

…<section> <article> <header> <h1>Breaking news: it works !</h1> <p> By John Doe – 7 jan 2014 </p> </header> <p>...</p> </article> …</section><section>….


Voorbeeld form output element

<form onsubmit=”return false” oninput=”o.value = a.valueAsNumber * b.valueAsNumber”>

<input id=”a” value=”0” type=”number” step=”any”> x <input id=”b” value=”0” type=”number” step=”any”> =

<output id=”o” for=”a b”></output></form>


Nieuwe elementen (2)

Multimedia <figure> <audio>, <video> <source>, <track> HTML5 legt geen multimedia formaten op => vooral om “player” toe te voegen zonder Flash / JS

Overige <time datetime=”2014-01-09”>vandaag </time> Deze tekst bevat een <mark> zoekterm </mark>


Voorbeeld multimedia

<video controls loop width=”300” height=”200” poster=”http://fedict.be/logo.jpg” src=”http://fedict.be/video.mpg”> <p>You can also <a href=”http://fedict.be/video.mpg”>download the video</p></video>

<audio> <source src=”http://fedict.be/sound.mp3” /> <source src=”http://fedict.be/sound.wav” /> <track kind=”subtitles” src=”http://fedict.be/subtitle_en.srt” srclang=”en” label=”English” /></audio>

http://fedict.be/sound.mp3

http://fedict.be/sound.wav

http://fedict.be/subtitle_en.srt


Nieuwe attributen

Op <input> element Type: number, tel, search, url, email, range, color Validatie: min, max, step, required, pattern Varia: form, placeholder

=> minder javascript nodig voor validatie Ook consistentere look'n'feel over verschillende sites


Nieuwe attributen (2)

Bewerken content contenteditable, spellcheck, translate draggable, dropzone

Toegankelijkheid role, aria-*

Semantiek (microdata / RDFa) typeof, property


Voorbeeld invoervelden

<form role=”search”> <input name=”search” type=”search” placeholder=”search term”/> ...</form>

<form role=”form”> <input name=”contact” type=”email” multiple /> <input name=”happy” type=”range” min=”0” max=”100” step=”5” /> <input name=”favorite” type=”url” required />...</form>


Nieuwe elementen (3)

Canvas Plaats om te tekenen => (javascript) games

SVG (Scalable Vector Graphics) Was al afzonderlijke specificatie 2D tekeningen in XML => logo's, plattegronden, grafieken, iconen, ...


Verouderde elementen

Layout <center>, <font>, <strike>, <u> => via CSS

Frames <frame>, <frameset>, <noframes> => frames zijn “out”

Allerlei <applet> => <object> gebruiken


CSS3


Cascading Style Sheets

Scheiden content en visuele opmaak Vb: lettertype, kleur tekst, marges, …

CSS 3 is een groepering van allerlei delen Gekende “Level 1” en “Level 2” maar dan modulair Plus allerlei nieuwe modules

Browser-ondersteuning varieert Zelfs in recentste browsers werkt niet alles Verschil tussen browsers Soms browser-specifieke prefix nodig (= dubbel werk)


Enkele CSS 3 modules

Selectors Level 3

Multiple Columns Makkelijker om content in 3, 4, … kolommen te plaatsen

Effecten Text Effects, Fonts, Gradients 2D / 3D Transforms, Transitions, Animations => logo's, achtergronden, titelblokken, ...


Voorbeeld meerdere kolommen

div.multicol { /* Firefox*/ -moz-column-count: 3; -moz-column-rule : 3px outset #ff0000;

/* Safari en Chrome */ -webkit-column-count: 3; -webkit-column-rule : 3px outset #ff0000;

/* Volgens standaard */ column-count: 3; column-rule :3px outset #ff0000;}


Selectors

Alle of enkel bepaalde elementen / attributen Eerste / laatste / elk N-de / … Alle van een bepaalde “class” / enkel met ID Met naam beginnend met / eindigend op Element voor / na dit element Reeds bezochte links Actieve / niet-actieve optie Combinaties

=> minder server code voor “special effects”


Voorbeeld selectors

/* rijen in tabel afwisselend in verschillende kleuren */tr:nth-child(odd) { background: black }tr:nth-child(even) { background: white }

/* “PDF” toevoegen aan linken eindigend op .pdf */a[href$=".pdf"] :after { content: “ (PDF) “ }

/* aanpassen kleur van geselecteerde tekst (beperkt) */::selection { color: red }

/* lettertype aanpassen van alles wat GEEN paragraaf is */p { font-style: normal }:not(p) { font-style: italic }


Animation, 2D / 3D Transform

Transformatie translate (move), scale, skew, rotate, matrix Combineren mogelijk (vb: roteren + vergroten)

Animatie Verschillende stappen Opties: herhaling, vertraging, timing, totale duur...

=> vervanging “simpele” Flash animaties


Voorbeeld animatie / transformatie

img.anim { position: absolute; animation: myrotate 6s infinite ;}

@keyframes myrotate { from { left: 10px; } 50% { transform: rotate(-180deg) scale(2);

left: 110px; } to { transform: rotate(360deg); left: 210px; }}


Javascript APIs


Heel wat APIs

Richting “mobile devices” Geolocation API Battery Status, Vibration, DeviceOrientation Event … Full Screen, Page Visibility

Storage en communicatie File API, Database APIs WebSocket, WebRTC

Andere Media Capture / Streams, WebAudio WebCrypto, WebCrypto Key Discovery


Geolocation API

Huidige geografische locatie Via GPS, Wifi, …

Geografische coordinaten, geen adres Eventueel omzetten via service (Google, OSM ...)

Gebruiker moet expliciet toestemming geven Sommige browsers sturen Wifi-info naar o.a. Google

=> “nieuws in mijn gemeente”, reclame


Voorbeeld Geolocation

var p = document.getElementById('location');

var options = { timeout: 1000, enableHighAccuracy: true };

function success(pos) { p.innerHTML = 'N : ' + pos.coords.latitude + ', ' + 'E: ' + pos.coords.longitude + ', ' + 'Nauwkeurig (+/- m): ' + pos.coords.accuracy;};

function error(e) { p.innerHTML = 'FOUT ' + e.code + ' : ' + e.message;};

navigator.geolocation.getCurrentPosition(success, error, options);


Web Storage

“cookies on steroids”

Eenvoudige key / value strings Iets geavanceerdere Indexed DB in voorbereiding Web SQL (nog een andere API) is deprecated

Instelbaar maximum MB disk space

Permanent of tot einde sessie localStorage: in alle tabs, ook na sluiten browser sessionStorage: per tab, tot sluiten tab


File API

Toegang tot lokale files

Client-side (dus zonder upload) Opvragen type, grootte, datum van bestand Inlezen bestanden in browser


Voorbeeld File API

var f = document.getElementById('file');var i = document.getElementById('info');

function whenFileSelected(e) { var file = e.target.files[0];

i.innerHTML = file.type + ' (' + file.size + ' bytes) ' + file.lastModifiedDate;}

f.addEventListener('change', whenFileSelected, false);


Web Workers

Threads Communicatie naar / tussen WW via JSON

Uitvoeren scripts zonder pagina te blokkeren Ophalen data in de achtergrond Complexe tekeningen op <canvas>


Vragen ?


Linken

Specificaties http://www.whatwg.org/specs/web-apps/current-work/ http://www.w3.org/TR/html51

Bijkomende info http://www.html5rocks.com http://html5doctor.com http://mobilehtml5.org http://caniuse.com

Tools http://validator.w3.org http://modernizr.com

http://www.whatwg.org/specs/web-apps/current-work/

http://www.w3.org/TR/html51

http://www.html5rocks.com/

http://html5doctor.com/

http://mobilehtml5.org/

http://caniuse.com/

http://validator.w3.org/

http://modernizr.com/


Linken (2)

Demo's: http://www.1stwebdesigner.com/css/advanced-css-text-ef

fects-web-typography-tips/ http://designinstruct.com/web-design/examples-html5-can

vas/

http://www.1stwebdesigner.com/css/advanced-css-text-effects-web-typography-tips/

http://www.1stwebdesigner.com/css/advanced-css-text-effects-web-typography-tips/

http://designinstruct.com/web-design/examples-html5-canvas/

http://designinstruct.com/web-design/examples-html5-canvas/


Bedankt !Bart Hanssens / Fedict

@BartHanssens

bart.hanssens [at] fedict.be | www.fedict.belgium.be

html 5 en css 3

Technology