HTML 5 en CSS 3

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

© Fedict 2014. All rights reserved

Agenda


HTML5



CSS 3



Nieuwe APIs (Javascript)



Vragen ?

© Fedict 2014. All rights reserved | p. 2

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




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


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>


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



Toegankelijkheid




contenteditable, spellcheck, translate
draggable, dropzone

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



Frames





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

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

Allerlei



<applet>
=> <object> gebruiken


CSS3


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)


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



Animatie





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

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”






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


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


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



Bijkomende info







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

Tools



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/


Bedankt !
Bart Hanssens / Fedict
@BartHanssens
bart.hanssens [at] fedict.be | www.fedict.belgium.be


HTML 5 en CSS 3

More Related Content

Viewers also liked (15)

Similar to HTML 5 en CSS 3 (20)

More from Bart Hanssens (20)

HTML 5 en CSS 3