refresher html(5) and css(3) - cc fe & ux
TRANSCRIPT
![Page 1: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/1.jpg)
HTML & CSSOpfrissen van HTML & CSSWat is nieuw in HTML5 & CSS3
![Page 2: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/2.jpg)
Competence Center Front-end & UX
Jan De WildeFront-end ontwikkelaar
![Page 3: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/3.jpg)
CSS
![Page 4: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/4.jpg)
CSS | Intro
CSS = Cascading Style Sheet
Inline, interne en externe stylesheets
Selectors: .ordina-competence-center .is-de-max { font-weight: bold; }
Gebruik een CSS Reset
Vendor prefixes: -webkit-, -moz-
Vb. -webkit-border-radius: 10px
![Page 5: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/5.jpg)
CSS | Aanroepen
Inline<div style=”font-weight:bold;”></div>
Intern in head<head>
<style type=”text/css”>.ordina-competence-center .is-de-max { font-weight: bold; }
</style></head>
Extern in head<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
![Page 6: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/6.jpg)
CSS | Box model
Ieder element = doos
Omringd door padding, border en marge
Bij normaal gedrag tellen we alles op bij het element
IE box model bug (<= IE6): padding en border worden opgenomen in het element waardoor de doos kleiner is
![Page 7: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/7.jpg)
CSS | Box model
Alles optellen bij inhoud:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-model.html
![Page 8: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/8.jpg)
CSS | Positionering
AlgemeenPositionering: left, top, right, bottompositionering: static (standaard)z-index: elementen sorteren
position: relative;Blijft op zijn plaats binnen de parent
position: absolute;Zweeft boven de paginaBinnen de grenzen van de parent (parent op position: relative; plaatsen!)Parent met allemaal absoluut gepositioneerde elementen klapt toe!
![Page 9: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/9.jpg)
CSS | Positionering
position: fixed;Zweeft boven de paginaParent is altijd body
positionering.html
![Page 10: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/10.jpg)
CSS | Pseudo elementen
:active
:hover
:visited
:first-child
:last-child
:before
:after
:first-letter
:first-line
:focus
:link
![Page 11: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/11.jpg)
CSS | Pseudo elementen - voorbeeld
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}
![Page 12: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/12.jpg)
CSS | float en clear
FloatLinks of rechts floatenElementen die na een float element komen zullen wrappen rond dit element
ClearElementen na een float kan je clearenGeef aan aan welke kant float elementen niet toegelaten zijnDe waarde kan zijn: left, right, both
float-clear.html
![Page 13: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/13.jpg)
CSS | De clearfix hack
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
clearfix.html
![Page 14: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/14.jpg)
InlineNaast elkaarHebben voor en achter het element geen line break
BlockOnder elkaarHebben voor en achter het element een line breakNemen by default de volledige breedte van de parent in
Inline-BlockMaakt block elementen inlineDe block karakteristieken blijven behouden
CSS | inline, block, inline-block?
![Page 15: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/15.jpg)
CSS | Elementen centreren
Via marginmargin: 0 auto;
width: value; of max-width: value;max-width zorgt ervoor dat er flexibel kan geschaald worden
Via absolute positioneringposition: absolute;
left: 50%;
margin-left: -value / 2;
width: value;
centreer.html
![Page 16: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/16.jpg)
CSS3
![Page 17: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/17.jpg)
CSS3
Animaties en transitiesWaarden berekenen met calc()Meer geavanceerde selectorsGegenereerde inhoud en countersGradientsWebfontsBorder RadiusBox Shadow
Box SizingBorder imagesMedia queriesMeerdere achtergrondenCSS ColumnsCSS 3D TransformsFlexbox…
![Page 18: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/18.jpg)
Border radius
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
of:
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
CSS3 | Border radius & box shadow
Box shadow
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
1. Horizontale offset
2. Verticale offset
3. Blur radius
4. Reikwijdte
5. Kleur
![Page 19: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/19.jpg)
CSS3 | Animatie
-webkit-animation: orbit 2s linear infinite;
animation: orbit 2s linear infinite;
1. Animatie naam
2. Duur animatie
3. Type animatie
4. Aantal herhalingen
@-webkit-keyframes orbit {from {
-webkit-transform:rotate(0deg);}to {
-webkit-transform:rotate(360deg);}
}
@keyframes orbit {from {
transform:rotate(0deg);// Future chrome support
-webkit-transform:rotate(0deg);}to {
transform:rotate(360deg);// Future chrome support
-webkit-transform:rotate(360deg);}
}
animatie.html
![Page 20: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/20.jpg)
CSS3 | Transitie
transition: background-position 0.8s ease 1s;
1. CSS Property
2. Duur transitie
3. Type transitie
4. Delay
transitie.html
![Page 21: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/21.jpg)
CSS3 | Webfonts
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */
url('webfont.woff') format('woff'),
/* Modern Browsers */
url('webfont.ttf') format('truetype'),
/* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
@font-face geeft de mogelijkheid om fonts die normaal enkel in design gebruikt werden, online te gaan gebruiken
Rekening houden met rechten
Verschillende platformen: Google Fonts, Typekit, Fontdeck, ...
Verschillende extensies: eot, woff, ttf en svg
![Page 22: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/22.jpg)
CSS3 | Media queries
ResponsiveToestel en scherm afhankelijke stijlenMeta viewport tagOndersteuning is grootFallback voor IE8 en lager voorzien: Respond.jsGa voor mobile first!Zelf schrijven of framework gebruiken
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media only screen and (min-width: 480px) {
...styles for 480px and up go here
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
media-queries.html
![Page 23: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/23.jpg)
Grid
Nog volledig in opbouwHeel weinig ondersteuningSpecifiek om grid systems te bouwenTer vervanging van float en inline-block
Flexbox
Flexible boxMomenteel een W3C Candidate RecommendationGeschikt voor de grote lijnen van een applicatie of interfaceNog niet overal ondersteuning
CSS3 | Flexbox & Grid
![Page 24: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/24.jpg)
HTML5
![Page 25: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/25.jpg)
HTML5
Niet zomaar nieuwe syntaxHet is een specificatieEen verzameling van features (ook JS)Nieuwe features (vb. <video>) maken gebruik van een DOM APIJe hoeft niets weg te gooienBestaande applicaties of websites upgradenMeerdere h1’s op één pagina! www.html5rocks.com
www.diveintohtml5.info
![Page 26: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/26.jpg)
HTML5 | Starten
Geen complexe doctype syntax meer: <!DOCTYPE html>Nieuwe elementen: <header>, <nav>, <section>, <article>, <aside>, <footer>
… en nog veel meer<hgroup> element niet meer in gebruik
Nieuwe features: Geolocatie, Localstorage, Canvas, Video, Native formulier validatie (input types)Fallback (polyfill) voorzien voor IE versies lager dan 9: html5shim
![Page 27: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/27.jpg)
HTML5 | Stukje geschiedenis
Voor HTML5 overmatig gebruik van <div>: divitisStructuur door middel van ID’s en klasses
<div id=”header”>
<div id=”nav”></div>
</div>
<div id=”content”></div>
<div id=”footer”></div>
Niet zichtbaar voor browsers, zoekmachines en screen readersSlechts één h1 per pagina
![Page 28: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/28.jpg)
HTML5 | Nieuwe elementen
Gebruik van minder div’sBetere leesbaarheid:
Voor ontwikkelaarVoor browsers, zoekmachines, screen readers, …
Onze pagina kan er nu zo gaan uitzien:<header>
<nav></nav>
</header>
<section></section>
<footer></footer>
![Page 29: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/29.jpg)
HTML5 | Nieuwe elementen
<header>
<nav>
<section>
<article>
<aside>
<footer>
![Page 30: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/30.jpg)
HTML5 | Role attribuut
Via het role attribuut kan je aan een element meegeven waarvoor dit dient.Als we onze code van daarnet nemen:
<header>
<nav role=”navigation”></nav>
</header>
<section role=”main”></section>
<footer></footer>
En zo zijn er nog veel meer mogelijk opties.
![Page 31: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/31.jpg)
HTML5 | Input types
Automatische validatieNieuw gedrag (datepicker, range,
…)Keyboard past zich aanNog beperkte support
▪ search▪ email▪ url▪ tel▪ number▪ range▪ date▪ month▪ week▪ time▪ datetime▪ datetime-local▪ color
![Page 32: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/32.jpg)
HTML5 | Placeholder text
Extra hulp bij invullen veldIE10+Attribuut placeholder
<form>
<input name="q" placeholder="Go to a Website">
<input type="submit" value="Search">
</form>
![Page 33: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/33.jpg)
HTML5 | Features detecteren
Features detecteren cruciaalBetere gebruikerservaringProgressive enhancement
Betere ervaring voor wie bepaalde features ondersteundEventueel zelfs kijken naar de beschikbare bandbreedte
Oplossing: Modernizr
![Page 34: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/34.jpg)
Voorbeeld met canvas:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
HTML5 | Features detecteren
![Page 35: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/35.jpg)
HTML5 | Geolocatie getCurrentPosition
Locatie delenGebruiker moet bevestigenKan fout gaan: error detectieLager dan IE9 geen supportTwee types locatiebepaling
DriehoeksmetingVia GPS (meer verbruik)
Manuele polling
navigator.geolocation.getCurrentPosition(show_map, handle_error
)
function show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;var accuracy = position.coords.accuracy;// let's show a map or do something
interesting!}
function handle_error(err) { if (err.code == 1) {
// how about no!}
}
![Page 36: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/36.jpg)
HTML5 | Geolocatie watchPosition
Locatie continue updatenZelfde format als getCurrentPosition
succes functionerror function
Toestel zal polling bepalen aan de hand van beweging
navigator.geolocation.watchPosition(show_map, handle_error
)
function show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;var accuracy = position.coords.accuracy;// let's show a map or do something
interesting!}
function handle_error(err) { if (err.code == 1) {
// how about no!}
}
![Page 37: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/37.jpg)
HTML5 | Geolocatie positionoptions object
Drie propertiesenableHighAccuracytimeoutmaximumAge
navigator.geolocation.getCurrentPosition(success_calback, error_callback,positionoptions_object
)
Voorbeeld positionoptions object:
{enableHighAccuracy: true,timeout: 4000,maximumAge: 70000
}
geolocatie.html
![Page 38: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/38.jpg)
HTML5 | Geolocatie - geoPosition.js
Geolocatie API is niet uniformW3C Geolocation APIIP Geolocation ServicesAPI’s of mobile platforms
Fallback voor:IE 6, 7, 8BlackberryPalm OS
![Page 39: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/39.jpg)
HTML5 | Localstorage (Web Storage)
Cookies
Iedere HTTP request dataTraag / TragerGeen encryptie (tenzij alles SSL)4 KB dataWeinig opslag
Localstorage
Op client niveauVeel storageBlijft bestaan na page refreshGeen server interventieKey, value pairs
![Page 40: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/40.jpg)
HTML5 | Localstorage (Web Storage)
Specs
Key, value pairs (JSON)Opslag adhv key naamData ophalen via die naamData = types ondersteund door JSData opgeslagen als stringData ophalen evt parser gebruiken
Set / Get
localStorage.setItem(‘bar’, foo);
var bar = localStorage.getItem(‘bar’);
of
localStorage.setItem[‘bar’] = foo;
var bar = localStorage.getItem[‘bar’];
localstorage.html
![Page 41: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/41.jpg)
HTML5 | Localstorage (Web Storage)
Limitaties
Gemiddeld 5 MBIs suggestie in de specQUOTA_EXCEEDED_ERR wanneer over limietNiet mogelijk meer ruimte te vragen
![Page 42: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/42.jpg)
Vragen?
![Page 43: Refresher HTML(5) and CSS(3) - CC FE & UX](https://reader035.vdocuments.us/reader035/viewer/2022062904/588496901a28ab26058b53bf/html5/thumbnails/43.jpg)
Leesvoer
HTML● HTML5 Rocks: http://www.html5rocks.com● Dive Into HTML5: http://diveintohtml5.info/ ● WTF, HTML and CSS?: http://wtfhtmlcss.com/
CSS● Magic of CSS: http://adamschwartz.co/magic-of-css/ ● CSS Diner: Where we feast on CSS Selectors: http://flukeout.github.io/
Responsive design● Grid: http://www.adamkaplan.me/grid/ ● Responsive web design, HiDPI displays and the transition period: http://www.slideshare.net/jandewilde/responsive-web-design-
hidpi-displays-and-the-transition-period ● This Is Responsive: http://bradfrost.github.io/this-is-responsive/ ● Twitter Bootstrap (check demo's, docs): http://getbootstrap.com/ ● Zurb Foundation (check demo's, docs): http://foundation.zurb.com/