Your SlideShare is downloading. ×
0
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

© Fedict 2014. All rights reserved
HTML 5


Meestal bedoelt men hele reeks van specs:




HTML 5 (opmaak)
Allerhande CSS 3 (layout)
Allerhande Javascript...
HTML 5 (2)


HTML of XML serialisatie




Nieuwe elementen




“los” of “strikt” met sluiten elementen e.d.

O.a. str...
Nieuwe elementen


Structuur






<header>, <footer, <aside>, <nav>
<section>, <article>
=> verbetering t.o.v <div>,...
Voorbeeld structuur
<!DOCTYPE html>
<html>
<head><title>Demo page</title></head>
<body>
<header>
<nav>
<a href=”contact.ht...
Voorbeeld structuur (2)
…
<section>
<article>
<header>
<h1>Breaking news: it works !</h1>
<p> By John Doe – 7 jan 2014 </p...
Voorbeeld form output element
<form onsubmit=”return false”
oninput=”o.value = a.valueAsNumber * b.valueAsNumber”>
<input ...
Nieuwe elementen (2)


Multimedia








<figure>
<audio>, <video>
<source>, <track>
HTML5 legt geen multimedia fo...
Voorbeeld multimedia
<video controls loop
width=”300” height=”200”
poster=”http://fedict.be/logo.jpg”
src=”http://fedict.b...
Nieuwe attributen


Op <input> element






Type: number, tel, search, url, email, range, color
Validatie: min, max,...
Nieuwe attributen (2)


Bewerken content





Toegankelijkheid




contenteditable, spellcheck, translate
draggable,...
Voorbeeld invoervelden
<form role=”search”>
<input name=”search” type=”search” placeholder=”search term”/>
...
</form>
<fo...
Nieuwe elementen (3)


Canvas





Plaats om te tekenen
=> (javascript) games

SVG (Scalable Vector Graphics)




W...
Verouderde elementen


Layout





Frames





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

<frame>, <frameset>, <no...
CSS3

© Fedict 2014. All rights reserved
Cascading Style Sheets


Scheiden content en visuele opmaak




CSS 3 is een groepering van allerlei delen





Vb: ...
Enkele CSS 3 modules


Selectors Level 3



Multiple Columns




Makkelijker om content in 3, 4, … kolommen te plaatse...
Voorbeeld meerdere kolommen
div.multicol {
/* Firefox*/
-moz-column-count: 3;
-moz-column-rule : 3px outset #ff0000;
/* Sa...
Selectors


Alle of enkel bepaalde elementen / attributen










Eerste / laatste / elk N-de / …
Alle van een ...
Voorbeeld selectors
/* rijen in tabel afwisselend in verschillende kleuren */
tr:nth-child(odd) { background: black }
tr:n...
Animation, 2D / 3D Transform


Transformatie





Animatie





translate (move), scale, skew, rotate, matrix
Combi...
Voorbeeld animatie / transformatie
img.anim {
position: absolute;
animation: myrotate 6s infinite ;
}
@keyframes myrotate ...
Javascript APIs

© Fedict 2014. All rights reserved
Heel wat APIs


Richting “mobile devices”






Storage en communicatie





Geolocation API
Battery Status, Vibra...
Geolocation API


Huidige geografische locatie




Geografische coordinaten, geen adres




Eventueel omzetten via se...
Voorbeeld Geolocation
var p = document.getElementById('location');
var options = { timeout: 1000, enableHighAccuracy: true...
Web Storage


“cookies on steroids”



Eenvoudige key / value strings



Iets geavanceerdere Indexed DB in voorbereidi...
File API


Toegang tot lokale files



Client-side (dus zonder upload)



Opvragen type, grootte, datum van bestand
In...
Voorbeeld File API
var f = document.getElementById('file');
var i = document.getElementById('info');
function whenFileSele...
Web Workers


Threads




Communicatie naar / tussen WW via JSON

Uitvoeren scripts zonder pagina te blokkeren



Oph...
Vragen ?

© Fedict 2014. All rights reserved
Linken


Specificaties





Bijkomende info







http://www.whatwg.org/specs/web-apps/current-work/
http://www....
Linken (2)


Demo's:



http://www.1stwebdesigner.com/css/advanced-css-text-ef
fects-web-typography-tips/
http://design...
Bedankt !
Bart Hanssens / Fedict
@BartHanssens
bart.hanssens [at] fedict.be | www.fedict.belgium.be

© Fedict 2014. All ri...
Upcoming SlideShare
Loading in...5
×

HTML 5 en CSS 3

437

Published on

Kort overzicht van enkele nieuwigheden in HTML 5, CSS 3.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
437
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML 5 en CSS 3"

  1. 1. HTML 5 en CSS 3 Fedict – 09/jan/2014 © Fedict 2014. All rights reserved
  2. 2. Agenda  HTML5  CSS 3  Nieuwe APIs (Javascript)  Vragen ? © Fedict 2014. All rights reserved | p. 2
  3. 3. HTML5 © Fedict 2014. All rights reserved
  4. 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. 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
  6. 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. 6
  7. 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. 7
  8. 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. 8
  9. 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. 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. 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. 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. 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. 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. 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
  16. 16. Verouderde elementen  Layout    Frames    <center>, <font>, <strike>, <u> => via CSS <frame>, <frameset>, <noframes> => frames zijn “out” Allerlei   <applet> => <object> gebruiken © Fedict 2014. All rights reserved | p. 16
  17. 17. CSS3 © Fedict 2014. All rights reserved
  18. 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. 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. 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. 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. 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. 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. 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
  25. 25. Javascript APIs © Fedict 2014. All rights reserved
  26. 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. 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. 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. 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. 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. 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. 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
  33. 33. Vragen ? © Fedict 2014. All rights reserved
  34. 34. 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 © Fedict 2014. All rights reserved | p. 34
  35. 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 | p. 35
  36. 36. Bedankt ! Bart Hanssens / Fedict @BartHanssens bart.hanssens [at] fedict.be | www.fedict.belgium.be © Fedict 2014. All rights reserved
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×