Talk 02 html5-css3

Ward Monteyne / UX Designer
HTML/CSS, Design, Informatie Architectuur

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/webapps
Universeel en connectief

1991HTML 17 tags + a href > Tim Berners-Lee (Robert Cailliau)

1992HTML+
1994HTML 2 Oprichting IETF (Internet Engineering Task Force) & W3C

1995HTML 3 IETF ontmanteld

1997HTML 3.2
1998HTML 4
2000XHTML 1.0
2001XHTML 1.1
2004HTML 5 Schisma W3C >< WHATWG
(Web Hypertext Application Working Group)

2008HTML5 Ian Hickson

Meer dan
zoveelste upgrade…

Aanpak grondig
vanuit basis

}
Eenduidig
Semantisch
{
Browsers
devices

element attributen
auto 4x4 - 4 deurs – open dak

input type=“email” class=“bigField”

tag
auto 4x4 met 4 deuren en open dak

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

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>

Semantics, Waarom?
Hoeksteen in html ontwikkeling

 Toegankelijkheid (screenreaders)
 Zoek- en vindbaarheid (SEO)
 Internationalisatie (bi-directional (“bidi”) writing)
 Interoperatieel (cross system/devices)

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

En niet te vergeten
 Live notifications
 Contenteditable
 Drag „n Drop
 LocalStorage
 …

Probleem HTML5
Browser ondersteuning

Oplossing
Backwards compatibility
Javascript fallback
(Modernizr, html5shiv)

Laatste versie van CSS
Cascading Style Sheets

Basistaal om
verschillende stijleigenschappen te definieren
van elementen binnen een HTML pagina.

1995CSS 1 1ste concept Cascading StyleSheets

1997CSS 1 Finale aanbeveling

1998CSS 2 1ste concept

1999CSS 3 1ste concept

2011 CSS 2.1 Finale aanbeveling

2011 CSS 4 1ste concept

2012CSS 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
 …

selector declaration
auto Citroën 2CV 4x4 grijs – hoogte 66cm

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

 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 CSS3
Browser ondersteuning

Oplossing
Progressive enhancement
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

=
Conditional statements, browser hacks en prefixes

a.button
{
color: #FFF;
padding: 20px;
font-size: 24px;
font-family: Susa;
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;
font-size: 24px;
font-family: Susa;
-webkit-border-radius: 15px;
-moz-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);
}

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

Talk 02 html5-css3

More Related Content

Viewers also liked (11)

Similar to Talk 02 html5-css3 (20)

More from Monkeyshot (20)

Talk 02 html5-css3

Editor's Notes