Post on 04-Jun-2015
HTML5/CSS3wat je zeker moet weten als UX'er
Ward Monteyne / UX DesignerHTML/CSS, Design, Informatie Architectuur
Internet
vandaag
Verschillende
devices
Verschillende
browsers
Veel gebruikers
Wie gebruikt wat,
Verschillende locaties?
Probleem
Verschillende standaarden
Oplossing
1 standaard
Laatste versie van html
Hyper Text Markup Language
Basistaal voor alle websites/webappsUniverseel en connectief
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
Meer dan
zoveelste upgrade…
Aanpak grondig
vanuit basis
EenduidigSemantisch
Browsers devices} {
Wat houdt
dit in?
Syntax
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
Eenduidig
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>
Semantiek
Semantics, Waarom?
Hoeksteen in html ontwikkeling
Toegankelijkheid (screenreaders)
Zoek- en vindbaarheid (SEO)
Internationalisatie (bi-directional (“bidi”) writing)
Interoperatieel (cross system/devices)
Structuur
Nieuwe Content
elementen
Canvas
<canvas>…</canvas>
• http://www.thewildernessdowntown.com/• http://www.cuttherope.ie/
Video
<video>…</video>
Videocodex > H.264 – Ogg - WebM/VP8
Aandacht voor
gebruiksgemak
Content
<meter>…</meter>
<progress>…</progress>
<audio>…</audio>
<input type=“tel” />
<input type=“search” />
<input type=“startdate” />
<input type=“number” />
…
<input type=“email” />
<input type=“url” />
<input type=“numbers” />
En niet te vergeten
Live notifications Contenteditable Drag ‘n Drop LocalStorage …
Probleem HTML5Browser ondersteuning
OplossingBackwards compatibility
Javascript fallback (Modernizr, html5shiv)
Hooray we’re halfway…
Laatste versie van CSS
Cascading Style Sheets
Basistaal om verschillende stijleigenschappen te
definieren van elementen binnen een HTML pagina.
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
CSS 1 als CSS 2=
lijst met alle features
CSS 3 =
Collectie van aparte modules(50)
Elk apart niveau van concept & aanbeveling Gefaseerde implementatie en ondersteuning
Enkele modules
The Box Model Lists Module Hyperlink Presentation Speech Module Backgrounds and Borders Text Effects Multi-Column Layout …
Syntax
section #first .bigField {color: #222; font-size: 1em}
auto Citroën 2CV 4x4
selector declarationgrijs – hoogte 66cm
Belangrijkste nieuwigheden
Masks & effects – ronde hoeken, schaduwen
Gradients @fontface Flex box layout Multi-column layout Animaties, rotaties & 2 & 3d
transformaties Transities Media queries …
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
}
Probleem CSS3Browser ondersteuning
OplossingProgressive enhancement
Gracefull degradation
Gracefull degradation=
Best mogelijke ervaring voor
de breedste groep van gebruikers,
Rekeninghoudend met
beperkingen bepaalde browsers
Zonder in te boeten aan
functies en mogelijkheden
Voor de kenners
Gracefull degradation=
Conditional statements, browser hacks en prefixes
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%); }
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);
}
Conclusie
Waarom
HTML5 & CSS3 gebruiken als
UX-ster?
Voor de
gebruikservaring van de
gebruiker…
Volledig traject van analyse en
wireframe
over design tot
html template
In discussie met
designers & ontwikkelaars
Hoger niveau van
interfaces
en gebruikservaring
Inzicht in mogelijkheden en
resultaat…
HTML5 & CSS3
Geen doel
wel middel
Bedankt !