HTML 5 en CSS 3
Upcoming SlideShare
Loading in...5
×
 

HTML 5 en CSS 3

on

  • 435 views

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

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

Statistics

Views

Total Views
435
Slideshare-icon Views on SlideShare
435
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML 5 en CSS 3 HTML 5 en CSS 3 Presentation Transcript

    • 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 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • CSS3 © Fedict 2014. All rights reserved
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Javascript APIs © Fedict 2014. All rights reserved
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Vragen ? © Fedict 2014. All rights reserved
    • 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
    • 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
    • Bedankt ! Bart Hanssens / Fedict @BartHanssens bart.hanssens [at] fedict.be | www.fedict.belgium.be © Fedict 2014. All rights reserved