Talk 02 html5-css3

55
HTML5/CSS3 wat je zeker moet weten als UX'er

Transcript of Talk 02 html5-css3

Page 1: Talk 02 html5-css3

HTML5/CSS3wat je zeker moet weten als UX'er

Page 2: Talk 02 html5-css3

Ward Monteyne / UX DesignerHTML/CSS, Design, Informatie Architectuur

Page 3: Talk 02 html5-css3
Page 4: Talk 02 html5-css3

Internet

vandaag

Page 5: Talk 02 html5-css3

Verschillende

devices

Page 6: Talk 02 html5-css3

Verschillende

browsers

Page 7: Talk 02 html5-css3

Veel gebruikers

Wie gebruikt wat,

Verschillende locaties?

Page 8: Talk 02 html5-css3

Probleem

Verschillende standaarden

Oplossing

1 standaard

Page 9: Talk 02 html5-css3
Page 10: Talk 02 html5-css3

Laatste versie van html

Hyper Text Markup Language

Basistaal voor alle websites/webappsUniverseel en connectief

Page 11: Talk 02 html5-css3

1991 HTML 17 tags + a href > Tim

Berners-Lee (Robert Cailliau)

1992 HTML+1994 HTML 2 Oprichting IETF (Internet

Engineering Task Force) & W3C

1995 HTML 3 IETF ontmanteld

1997 HTML 3.21998 HTML 42000 XHTML 1.02001 XHTML 1.12004 HTML 5 Schisma W3C >< WHATWG

(Web Hypertext Application Working Group)

2008 HTML5 Ian Hickson

Page 12: Talk 02 html5-css3

Meer dan

zoveelste upgrade…

Aanpak grondig

vanuit basis

Page 13: Talk 02 html5-css3

EenduidigSemantisch

Browsers devices} {

Page 14: Talk 02 html5-css3

Wat houdt

dit in?

Page 15: Talk 02 html5-css3

Syntax

Page 16: Talk 02 html5-css3

auto

element

attributen4x4 - 4 deurs – open dak

tag

input type=“email” class=“bigField”

<Input type=“email” class=“bigField”>

auto 4x4 met 4 deuren en open dak

Page 17: Talk 02 html5-css3

Eenduidig

Page 18: Talk 02 html5-css3

Notitiewijze/Declaratie <!DOCTYPE html> <link rel=“stylesheet” href=“style.css”> <script src="external.js”></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<link type=“text/css” rel=“stylesheet” href=“style.css” media=“all” />

<script type=“text/javascript” src=“external.js”></script>

Page 19: Talk 02 html5-css3

Semantiek

Page 20: Talk 02 html5-css3

Semantics, Waarom?

Hoeksteen in html ontwikkeling

Toegankelijkheid (screenreaders)

Zoek- en vindbaarheid (SEO)

Internationalisatie (bi-directional (“bidi”) writing)

Interoperatieel (cross system/devices)

Page 21: Talk 02 html5-css3

Structuur

Page 22: Talk 02 html5-css3

Nieuwe Content

elementen

Page 23: Talk 02 html5-css3

Canvas

<canvas>…</canvas>

• http://www.thewildernessdowntown.com/• http://www.cuttherope.ie/

Page 24: Talk 02 html5-css3

Video

<video>…</video>

Videocodex > H.264 – Ogg - WebM/VP8

Page 25: Talk 02 html5-css3

Aandacht voor

gebruiksgemak

Page 26: Talk 02 html5-css3

Content

<meter>…</meter>

<progress>…</progress>

<audio>…</audio>

<input type=“tel” />

<input type=“search” />

<input type=“startdate” />

<input type=“number” />

Page 27: Talk 02 html5-css3

<input type=“email” />

<input type=“url” />

<input type=“numbers” />

Page 28: Talk 02 html5-css3

En niet te vergeten

Live notifications Contenteditable Drag ‘n Drop LocalStorage …

Page 29: Talk 02 html5-css3

Probleem HTML5Browser ondersteuning

OplossingBackwards compatibility

Javascript fallback (Modernizr, html5shiv)

Page 30: Talk 02 html5-css3

Hooray we’re halfway…

Page 31: Talk 02 html5-css3
Page 32: Talk 02 html5-css3

Laatste versie van CSS

Cascading Style Sheets

Basistaal om verschillende stijleigenschappen te

definieren van elementen binnen een HTML pagina.

Page 33: Talk 02 html5-css3

1995 CSS 1 1ste concept

Cascading StyleSheets

1997 CSS 1 Finale aanbeveling

1998 CSS 2 1ste concept

1999 CSS 3 1ste concept

2011 CSS 2.1 Finale aanbeveling

2011 CSS 4 1ste concept

2012 CSS 3 Werkend concept

20?? CSS 3 Finale

aanbeveling

Page 34: Talk 02 html5-css3

CSS 1 als CSS 2=

lijst met alle features

Page 35: Talk 02 html5-css3

CSS 3 =

Collectie van aparte modules(50)

Elk apart niveau van concept & aanbeveling Gefaseerde implementatie en ondersteuning

Page 36: Talk 02 html5-css3

Enkele modules

The Box Model Lists Module Hyperlink Presentation Speech Module Backgrounds and Borders Text Effects Multi-Column Layout …

Page 37: Talk 02 html5-css3

Syntax

Page 38: Talk 02 html5-css3

section #first .bigField {color: #222; font-size: 1em}

auto Citroën 2CV 4x4

selector declarationgrijs – hoogte 66cm

Page 39: Talk 02 html5-css3
Page 40: Talk 02 html5-css3

Belangrijkste nieuwigheden

Page 41: Talk 02 html5-css3

Masks & effects – ronde hoeken, schaduwen

Gradients @fontface Flex box layout Multi-column layout Animaties, rotaties & 2 & 3d

transformaties Transities Media queries …

Page 42: Talk 02 html5-css3

a { color: #FFF;padding: 20px;text-decoration:none;font-size: 24px;background-color: #C00;font-family: Susa;background: linear-gradient(to bottom, #ef979e 0%,#C00 100%);border-radius: 15px;box-shadow: 2px 2px 2px #797979;text-shadow: -1px -1px 0 #873b46

}

Page 43: Talk 02 html5-css3

Probleem CSS3Browser ondersteuning

OplossingProgressive enhancement

Gracefull degradation

Page 44: Talk 02 html5-css3

Gracefull degradation=

Best mogelijke ervaring voor

de breedste groep van gebruikers,

Rekeninghoudend met

beperkingen bepaalde browsers

Zonder in te boeten aan

functies en mogelijkheden

Page 45: Talk 02 html5-css3

Voor de kenners

Gracefull degradation=

Conditional statements, browser hacks en prefixes

Page 46: Talk 02 html5-css3

a.button {

color: #FFF;padding: 20px;text-decoration:none;font-size: 24px;background-color: #C00; font-family: Susa;border-radius: 15px;box-shadow: 2px 2px 2px #797979; ;text-shadow: -1px -1px 0 #873b46;background: linear-gradient(to bottom, #ef979e

0%,#C00 100%); }

Page 47: Talk 02 html5-css3

a.button { color: #FFF;padding: 20px;text-decoration:none;font-size: 24px;background-color: #C00; font-family: Susa;-webkit-border-radius: 15px;-moz-border-radius: 15px; border-radius: 15px;-webkit-box-shadow: 2px 2px 2px #797979;-moz-box-shadow: 2px 2px 2px #797979; ;box-shadow: 2px 2px 2px #797979; ;text-shadow: -1px -1px 0 #873b46;background: linear-gradient(to bottom, #ef979e

0%,#C00 100%); background: -webkit-gradient(linear, 0% 0%, 0%

100%, from (#C00 ), to(#ef979e )); background: -webkit- linear-gradient(top, #ef979e

, #C00 ); background: -moz-linear-gradient(top, #ef979e ,

#C00 ); background: -ms-linear-gradient(top, #ef979e ,

#C00 ); background: -o-linear-gradient(top, #ef979e ,

#C00 );-pie-background: linear-gradient(top, #ef979e , #C00 ) behavior: url (/PIE.htc);

}

Page 48: Talk 02 html5-css3

Conclusie

Page 49: Talk 02 html5-css3

Waarom

HTML5 & CSS3 gebruiken als

UX-ster?

Page 50: Talk 02 html5-css3

Voor de

gebruikservaring van de

gebruiker…

Page 51: Talk 02 html5-css3

Volledig traject van analyse en

wireframe

over design tot

html template

Page 52: Talk 02 html5-css3

In discussie met

designers & ontwikkelaars

Page 53: Talk 02 html5-css3

Hoger niveau van

interfaces

en gebruikservaring

Inzicht in mogelijkheden en

resultaat…

Page 54: Talk 02 html5-css3

HTML5 & CSS3

Geen doel

wel middel

Page 55: Talk 02 html5-css3

Bedankt !