html & css | competence center front-end & ux, ordina

HTML & CSSOpfrissen van HTML & CSSWat is nieuw in HTML5 & CSS3

Competence Center Front-end & UX

Jan De WildeFront-end ontwikkelaar

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

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

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

CSS | Box model

Alles optellen bij inhoud:

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

box-model.html

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!

CSS | Positionering

position: fixed;Zweeft boven de paginaParent is altijd body

positionering.html

CSS | Pseudo elementen

:active

:hover

:visited

:first-child

:last-child

:before

:after

:first-letter

:first-line

:focus

:link

CSS | Pseudo elementen - voorbeeld

@media print {

a[href]:after {

content: " (" attr(href) ") ";

}

}

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

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

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?

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

CSS3

Animaties en transitiesWaarden berekenen met calc()Meer geavanceerde selectorsGegenereerde inhoud en countersGradientsWebfontsBorder RadiusBox Shadow

Box SizingBorder imagesMedia queriesMeerdere achtergrondenCSS ColumnsCSS 3D TransformsFlexbox…

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

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

CSS3 | Transitie

transition: background-position 0.8s ease 1s;

1. CSS Property

2. Duur transitie

3. Type transitie

4. Delay

transitie.html

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

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

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

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

http://www.html5rocks.com


http://www.diveintohtml5.info

http://www.diveintohtml5.info

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

https://code.google.com/p/html5shim/

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

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>

HTML5 | Nieuwe elementen

<header>

<nav>

<section>

<article>

<aside>

<footer>

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.

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

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>

HTML5 | Features detecteren

Features detecteren cruciaalBetere gebruikerservaringProgressive enhancement

Betere ervaring voor wie bepaalde features ondersteundEventueel zelfs kijken naar de beschikbare bandbreedte

Oplossing: Modernizr

http://modernizr.com/

Voorbeeld met canvas:

if (Modernizr.canvas) {

// let's draw some shapes!

} else {

// no native canvas support available :(

}

HTML5 | Features detecteren

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!}

}

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!}

}

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

HTML5 | Geolocatie - geoPosition.js

Geolocatie API is niet uniformW3C Geolocation APIIP Geolocation ServicesAPI’s of mobile platforms

Fallback voor:IE 6, 7, 8BlackberryPalm OS

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


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


Limitaties

Gemiddeld 5 MBIs suggestie in de specQUOTA_EXCEEDED_ERR wanneer over limietNiet mogelijk meer ruimte te vragen

Vragen?

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/


http://diveintohtml5.info/

http://wtfhtmlcss.com/

http://adamschwartz.co/magic-of-css/

http://flukeout.github.io/

http://www.adamkaplan.me/grid/

https://webmail.ordina.be/owa/redir.aspx?C=1k0oUxhzOECEolb_GeLR-WQJPjbsB9EId1o2fMzXDjf-MEM-cPb8GDGeEkQ8z4iwEFwVKfl3gMQ.&URL=http%3a%2f%2fwww.slideshare.net%2fjandewilde%2fresponsive-web-design-hidpi-displays-and-the-transition-period



http://bradfrost.github.io/this-is-responsive/

https://webmail.ordina.be/owa/redir.aspx?C=1k0oUxhzOECEolb_GeLR-WQJPjbsB9EId1o2fMzXDjf-MEM-cPb8GDGeEkQ8z4iwEFwVKfl3gMQ.&URL=http%3a%2f%2fgetbootstrap.com%2f

https://webmail.ordina.be/owa/redir.aspx?C=1k0oUxhzOECEolb_GeLR-WQJPjbsB9EId1o2fMzXDjf-MEM-cPb8GDGeEkQ8z4iwEFwVKfl3gMQ.&URL=http%3a%2f%2ffoundation.zurb.com%2f

html & css | competence center front-end & ux, ordina

Internet

css intro css

css box model ieder

css aanroepen inline

competence center frontend

box model bug

op bij het element

head extern

wilde frontend ontwikkelaar