Contenu connexe
Similaire à HTML 5 en CSS 3 (20)
Plus de Bart Hanssens (20)
HTML 5 en CSS 3
- 1. HTML 5 en CSS 3
Fedict – 09/jan/2014
© Fedict 2014. All rights reserved
- 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. 4
- 5. HTML 5 (2)
HTML of XML serialisatie
Nieuwe elementen
“los” of “strikt” met sluiten elementen e.d.
O.a. structuur, multimedia
Nieuwe attributen
O.a. invoervelden, accessibility
Oude elementen / attributen verwijderd
“Offline”: caching webpagina's
© Fedict 2014. All rights reserved | p. 5
- 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. 9
- 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. 10
- 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. 11
- 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. 12
- 13. Nieuwe attributen (2)
Bewerken content
Toegankelijkheid
contenteditable, spellcheck, translate
draggable, dropzone
role, aria-*
Semantiek (microdata / RDFa)
typeof, property
© Fedict 2014. All rights reserved | p. 13
- 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. 14
- 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. 15
- 18. Cascading Style Sheets
Scheiden content en visuele opmaak
CSS 3 is een groepering van allerlei delen
Vb: lettertype, kleur tekst, marges, …
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. 18
- 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. 19
- 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. 20
- 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. 21
- 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. 22
- 23. Animation, 2D / 3D Transform
Transformatie
Animatie
translate (move), scale, skew, rotate, matrix
Combineren mogelijk (vb: roteren + vergroten)
Verschillende stappen
Opties: herhaling, vertraging, timing, totale duur...
=> vervanging “simpele” Flash animaties
© Fedict 2014. All rights reserved | p. 23
- 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 | p. 24
- 26. Heel wat APIs
Richting “mobile devices”
Storage en communicatie
Geolocation API
Battery Status, Vibration, DeviceOrientation Event …
Full Screen, Page Visibility
File API, Database APIs
WebSocket, WebRTC
Andere
Media Capture / Streams, WebAudio
WebCrypto, WebCrypto Key Discovery
© Fedict 2014. All rights reserved | p. 26
- 27. Geolocation API
Huidige geografische locatie
Geografische coordinaten, geen adres
Eventueel omzetten via service (Google, OSM ...)
Gebruiker moet expliciet toestemming geven
Via GPS, Wifi, …
Sommige browsers sturen Wifi-info naar o.a. Google
=> “nieuws in mijn gemeente”, reclame
© Fedict 2014. All rights reserved | p. 27
- 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. 28
- 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. 29
- 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. 30
- 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. 31
- 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 | p. 32
- 36. Bedankt !
Bart Hanssens / Fedict
@BartHanssens
bart.hanssens [at] fedict.be | www.fedict.belgium.be
© Fedict 2014. All rights reserved