Enviar búsqueda
Cargar
HTML 5 en CSS 3
•
2 recomendaciones
•
877 vistas
Bart Hanssens
Seguir
Kort overzicht van enkele nieuwigheden in HTML 5, CSS 3.
Leer menos
Leer más
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 36
Descargar ahora
Descargar para leer sin conexión
Recomendados
Ict2 trm- werking internet
Ict2 trm- werking internet
250491
test
test
guesta211f3
Adobe cloud software
Adobe cloud software
dhekanenandkishor
Titrovo.it noleggio domini web
Titrovo.it noleggio domini web
TiTrovo
Plan vida copia
Plan vida copia
Ps Beatriz Pereira Cartes
Open Data: DCAT en tools
Open Data: DCAT en tools
Bart Hanssens
Introductie Drupal development
Introductie Drupal development
Bart Hanssens
IPv6 omzendbrief
IPv6 omzendbrief
Bart Hanssens
Recomendados
Ict2 trm- werking internet
Ict2 trm- werking internet
250491
test
test
guesta211f3
Adobe cloud software
Adobe cloud software
dhekanenandkishor
Titrovo.it noleggio domini web
Titrovo.it noleggio domini web
TiTrovo
Plan vida copia
Plan vida copia
Ps Beatriz Pereira Cartes
Open Data: DCAT en tools
Open Data: DCAT en tools
Bart Hanssens
Introductie Drupal development
Introductie Drupal development
Bart Hanssens
IPv6 omzendbrief
IPv6 omzendbrief
Bart Hanssens
Sentiment analysis 20140910
Sentiment analysis 20140910
Bart Hanssens
Websites testen met Selenium
Websites testen met Selenium
Bart Hanssens
Cataluña y país vasco NURIA MURCIA RABADÁN
Cataluña y país vasco NURIA MURCIA RABADÁN
martiniko97
Publiceren met SKOS
Publiceren met SKOS
Bart Hanssens
DCAT-AP exchanging metadata
DCAT-AP exchanging metadata
Bart Hanssens
Intec ipv6-201306182
Intec ipv6-201306182
Bart Hanssens
Inleiding HTTP/2
Inleiding HTTP/2
Bart Hanssens
Introductie RDF
Introductie RDF
Bart Hanssens
Relex Finale
Relex Finale
Bart Hanssens
Drupal Simple DCAT Export module
Drupal Simple DCAT Export module
Bart Hanssens
Websites testen met Selenium en Behave
Websites testen met Selenium en Behave
Bart Hanssens
Insu Eid 20111018
Insu Eid 20111018
Bart Hanssens
Ecp digitalehandtekening 20131203
Ecp digitalehandtekening 20131203
Bart Hanssens
Inleiding Internet of Things
Inleiding Internet of Things
Bart Hanssens
OIDC16: Open Data in Belgium
OIDC16: Open Data in Belgium
Bart Hanssens
Refresher HTML(5) and CSS(3) - CC FE & UX
Refresher HTML(5) and CSS(3) - CC FE & UX
JWORKS powered by Ordina
Toegankelijkheid
Toegankelijkheid
Atticus
Html5 jeugdwerknet
Html5 jeugdwerknet
Hans Rossel
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
NLJUG
HTML5 Overview
HTML5 Overview
Maurice De Beijer [MVP]
App academy - Parse
App academy - Parse
Timan Rebel
Plone add-on packages uit Nederland - Fred van Dijk
Plone add-on packages uit Nederland - Fred van Dijk
Zest Software
Más contenido relacionado
Destacado
Sentiment analysis 20140910
Sentiment analysis 20140910
Bart Hanssens
Websites testen met Selenium
Websites testen met Selenium
Bart Hanssens
Cataluña y país vasco NURIA MURCIA RABADÁN
Cataluña y país vasco NURIA MURCIA RABADÁN
martiniko97
Publiceren met SKOS
Publiceren met SKOS
Bart Hanssens
DCAT-AP exchanging metadata
DCAT-AP exchanging metadata
Bart Hanssens
Intec ipv6-201306182
Intec ipv6-201306182
Bart Hanssens
Inleiding HTTP/2
Inleiding HTTP/2
Bart Hanssens
Introductie RDF
Introductie RDF
Bart Hanssens
Relex Finale
Relex Finale
Bart Hanssens
Drupal Simple DCAT Export module
Drupal Simple DCAT Export module
Bart Hanssens
Websites testen met Selenium en Behave
Websites testen met Selenium en Behave
Bart Hanssens
Insu Eid 20111018
Insu Eid 20111018
Bart Hanssens
Ecp digitalehandtekening 20131203
Ecp digitalehandtekening 20131203
Bart Hanssens
Inleiding Internet of Things
Inleiding Internet of Things
Bart Hanssens
OIDC16: Open Data in Belgium
OIDC16: Open Data in Belgium
Bart Hanssens
Destacado
(15)
Sentiment analysis 20140910
Sentiment analysis 20140910
Websites testen met Selenium
Websites testen met Selenium
Cataluña y país vasco NURIA MURCIA RABADÁN
Cataluña y país vasco NURIA MURCIA RABADÁN
Publiceren met SKOS
Publiceren met SKOS
DCAT-AP exchanging metadata
DCAT-AP exchanging metadata
Intec ipv6-201306182
Intec ipv6-201306182
Inleiding HTTP/2
Inleiding HTTP/2
Introductie RDF
Introductie RDF
Relex Finale
Relex Finale
Drupal Simple DCAT Export module
Drupal Simple DCAT Export module
Websites testen met Selenium en Behave
Websites testen met Selenium en Behave
Insu Eid 20111018
Insu Eid 20111018
Ecp digitalehandtekening 20131203
Ecp digitalehandtekening 20131203
Inleiding Internet of Things
Inleiding Internet of Things
OIDC16: Open Data in Belgium
OIDC16: Open Data in Belgium
Similar a HTML 5 en CSS 3
Refresher HTML(5) and CSS(3) - CC FE & UX
Refresher HTML(5) and CSS(3) - CC FE & UX
JWORKS powered by Ordina
Toegankelijkheid
Toegankelijkheid
Atticus
Html5 jeugdwerknet
Html5 jeugdwerknet
Hans Rossel
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
NLJUG
HTML5 Overview
HTML5 Overview
Maurice De Beijer [MVP]
App academy - Parse
App academy - Parse
Timan Rebel
Plone add-on packages uit Nederland - Fred van Dijk
Plone add-on packages uit Nederland - Fred van Dijk
Zest Software
Voordeel halen uit zoekmachines en semantic web
Voordeel halen uit zoekmachines en semantic web
Bart Hanssens
Rollbase via de REST adapter koppelen met OpenEdge
Rollbase via de REST adapter koppelen met OpenEdge
Joris Kroes
Flex In De Praktijk
Flex In De Praktijk
marcel panse
Presentatie WordPress Theme Frameworks WordCamp NL 2010
Presentatie WordPress Theme Frameworks WordCamp NL 2010
Remkus de Vries
Toegankelijke en semantische HTML formulieren
Toegankelijke en semantische HTML formulieren
Thomas Byttebier
Prosite Webinar 2010
Prosite Webinar 2010
Jan Ottenbourg
Website-tool: CMS of Framework
Website-tool: CMS of Framework
Nils Breunese
UiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNet
Sven Houtmeyers
HTML5 (Dutch)
HTML5 (Dutch)
Maurice De Beijer [MVP]
Lucius Drupal Development Cursus
Lucius Drupal Development Cursus
Luciuswebsystems
Presentatie webrichtlijnen
Presentatie webrichtlijnen
Tjitte Folkertsma
WSO2 Mashup Server
WSO2 Mashup Server
Nils Breunese
Magento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beheren
Michel Doens
Similar a HTML 5 en CSS 3
(20)
Refresher HTML(5) and CSS(3) - CC FE & UX
Refresher HTML(5) and CSS(3) - CC FE & UX
Toegankelijkheid
Toegankelijkheid
Html5 jeugdwerknet
Html5 jeugdwerknet
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
Real-time user interfaces - sosm gewoon makkelijker - Allard Buijze
HTML5 Overview
HTML5 Overview
App academy - Parse
App academy - Parse
Plone add-on packages uit Nederland - Fred van Dijk
Plone add-on packages uit Nederland - Fred van Dijk
Voordeel halen uit zoekmachines en semantic web
Voordeel halen uit zoekmachines en semantic web
Rollbase via de REST adapter koppelen met OpenEdge
Rollbase via de REST adapter koppelen met OpenEdge
Flex In De Praktijk
Flex In De Praktijk
Presentatie WordPress Theme Frameworks WordCamp NL 2010
Presentatie WordPress Theme Frameworks WordCamp NL 2010
Toegankelijke en semantische HTML formulieren
Toegankelijke en semantische HTML formulieren
Prosite Webinar 2010
Prosite Webinar 2010
Website-tool: CMS of Framework
Website-tool: CMS of Framework
UiTwidgets build on Drupal7 by CultuurNet
UiTwidgets build on Drupal7 by CultuurNet
HTML5 (Dutch)
HTML5 (Dutch)
Lucius Drupal Development Cursus
Lucius Drupal Development Cursus
Presentatie webrichtlijnen
Presentatie webrichtlijnen
WSO2 Mashup Server
WSO2 Mashup Server
Magento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beheren
Más de Bart Hanssens
OpenFed, a Drupal distribution
OpenFed, a Drupal distribution
Bart Hanssens
Open Summer of Code in Belgium
Open Summer of Code in Belgium
Bart Hanssens
Open Belgium 2022: Prepare To Code
Open Belgium 2022: Prepare To Code
Bart Hanssens
Werkgroep metadata: INSPIRE - DCAT-AP mapping
Werkgroep metadata: INSPIRE - DCAT-AP mapping
Bart Hanssens
Overzicht DCAT-AP
Overzicht DCAT-AP
Bart Hanssens
Quarkus, Jib én OpenJ9
Quarkus, Jib én OpenJ9
Bart Hanssens
Open Data at the Federal Level 2021
Open Data at the Federal Level 2021
Bart Hanssens
Open Data workshop Agoria ICT
Open Data workshop Agoria ICT
Bart Hanssens
Atelier Open Data / Agoria ICT
Atelier Open Data / Agoria ICT
Bart Hanssens
Open Source and Open Data
Open Source and Open Data
Bart Hanssens
Données ouvertes
Données ouvertes
Bart Hanssens
Open Data
Open Data
Bart Hanssens
Open Community Projects
Open Community Projects
Bart Hanssens
From webform to API using microframeworks
From webform to API using microframeworks
Bart Hanssens
Linked Data: Introductie
Linked Data: Introductie
Bart Hanssens
JavaVMs en GraalVM
JavaVMs en GraalVM
Bart Hanssens
Open data, what's cooking at the federal level 2020
Open data, what's cooking at the federal level 2020
Bart Hanssens
BOSA DG DT: opendata et intégrateur de services
BOSA DG DT: opendata et intégrateur de services
Bart Hanssens
Local and Regional digital transformation in Belgium
Local and Regional digital transformation in Belgium
Bart Hanssens
Presentatie data.gov.be
Presentatie data.gov.be
Bart Hanssens
Más de Bart Hanssens
(20)
OpenFed, a Drupal distribution
OpenFed, a Drupal distribution
Open Summer of Code in Belgium
Open Summer of Code in Belgium
Open Belgium 2022: Prepare To Code
Open Belgium 2022: Prepare To Code
Werkgroep metadata: INSPIRE - DCAT-AP mapping
Werkgroep metadata: INSPIRE - DCAT-AP mapping
Overzicht DCAT-AP
Overzicht DCAT-AP
Quarkus, Jib én OpenJ9
Quarkus, Jib én OpenJ9
Open Data at the Federal Level 2021
Open Data at the Federal Level 2021
Open Data workshop Agoria ICT
Open Data workshop Agoria ICT
Atelier Open Data / Agoria ICT
Atelier Open Data / Agoria ICT
Open Source and Open Data
Open Source and Open Data
Données ouvertes
Données ouvertes
Open Data
Open Data
Open Community Projects
Open Community Projects
From webform to API using microframeworks
From webform to API using microframeworks
Linked Data: Introductie
Linked Data: Introductie
JavaVMs en GraalVM
JavaVMs en GraalVM
Open data, what's cooking at the federal level 2020
Open data, what's cooking at the federal level 2020
BOSA DG DT: opendata et intégrateur de services
BOSA DG DT: opendata et intégrateur de services
Local and Regional digital transformation in Belgium
Local and Regional digital transformation in Belgium
Presentatie data.gov.be
Presentatie data.gov.be
HTML 5 en CSS 3
1.
HTML 5 en
CSS 3 Fedict – 09/jan/2014 © Fedict 2014. All rights reserved
2.
Agenda HTML5 CSS 3 Nieuwe APIs
(Javascript) Vragen ? © Fedict 2014. All rights reserved | p. 2
3.
HTML5 © 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
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.
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.
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.
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
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.
CSS3 © Fedict 2014.
All rights reserved
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
25.
Javascript APIs © Fedict
2014. All rights reserved
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
33.
Vragen ? © Fedict
2014. All rights reserved
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.
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.
Bedankt ! Bart Hanssens
/ Fedict @BartHanssens bart.hanssens [at] fedict.be | www.fedict.belgium.be © Fedict 2014. All rights reserved
Descargar ahora