Upload
bart-hanssens
View
442
Download
5
Embed Size (px)
DESCRIPTION
Kort overzicht van enkele nieuwigheden in HTML 5, CSS 3.
Citation preview
© 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 ?
© Fedict 2014. All rights reserved
HTML5
© Fedict 2014. All rights reserved | p. 4
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
© Fedict 2014. All rights reserved | p. 5
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
© Fedict 2014. All rights reserved | p. 6
Nieuwe elementen
Structuur <header>, <footer, <aside>, <nav> <section>, <article> => verbetering t.o.v <div>, browser kan “slimmer” zijn
Form controls <progress>, <meter>, <datalist> <output>
© Fedict 2014. All rights reserved | p. 7
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>
© Fedict 2014. All rights reserved | p. 8
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>….
© Fedict 2014. All rights reserved | p. 9
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>
© Fedict 2014. All rights reserved | p. 10
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>
© Fedict 2014. All rights reserved | p. 11
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>
© Fedict 2014. All rights reserved | p. 12
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
© Fedict 2014. All rights reserved | p. 13
Nieuwe attributen (2)
Bewerken content contenteditable, spellcheck, translate draggable, dropzone
Toegankelijkheid role, aria-*
Semantiek (microdata / RDFa) typeof, property
© Fedict 2014. All rights reserved | p. 14
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>
© Fedict 2014. All rights reserved | p. 15
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, ...
© Fedict 2014. All rights reserved | p. 16
Verouderde elementen
Layout <center>, <font>, <strike>, <u> => via CSS
Frames <frame>, <frameset>, <noframes> => frames zijn “out”
Allerlei <applet> => <object> gebruiken
© Fedict 2014. All rights reserved
CSS3
© Fedict 2014. All rights reserved | p. 18
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)
© Fedict 2014. All rights reserved | p. 19
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, ...
© Fedict 2014. All rights reserved | p. 20
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;}
© Fedict 2014. All rights reserved | p. 21
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”
© Fedict 2014. All rights reserved | p. 22
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 }
© Fedict 2014. All rights reserved | p. 23
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
© Fedict 2014. All rights reserved | p. 24
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; }}
© Fedict 2014. All rights reserved
Javascript APIs
© Fedict 2014. All rights reserved | p. 26
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
© Fedict 2014. All rights reserved | p. 27
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
© Fedict 2014. All rights reserved | p. 28
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);
© Fedict 2014. All rights reserved | p. 29
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
© Fedict 2014. All rights reserved | p. 30
File API
Toegang tot lokale files
Client-side (dus zonder upload) Opvragen type, grootte, datum van bestand Inlezen bestanden in browser
© Fedict 2014. All rights reserved | p. 31
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);
© Fedict 2014. All rights reserved | p. 32
Web Workers
Threads Communicatie naar / tussen WW via JSON
Uitvoeren scripts zonder pagina te blokkeren Ophalen data in de achtergrond Complexe tekeningen op <canvas>
© Fedict 2014. All rights reserved
Vragen ?
© Fedict 2014. All rights reserved | p. 34
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
© Fedict 2014. All rights reserved | p. 35
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/
© Fedict 2014. All rights reserved
Bedankt !Bart Hanssens / Fedict
@BartHanssens
bart.hanssens [at] fedict.be | www.fedict.belgium.be