Het Nut Van Css

20
Het nut van CSS 1/20 Pecha Kucha / Paul van Buuren 1 HET NUT VAN CSS, ofwel: de kunst van het PIXELNEUKEN STYLE SHEETS

description

Het Nut Van Css

Transcript of Het Nut Van Css

Page 1: Het Nut Van Css

Het nut van CSS 1/20Pecha Kucha / Paul van

Buuren

1HET NUT VAN

CSS, ofwel:

de kunst van het

PIXELNEUKEN

STYLE SHEETS

Page 2: Het Nut Van Css

Het nut van CSS 2/20Pecha Kucha / Paul van

Buuren

2De kracht van CSS:CSS Zengarden

Page 3: Het Nut Van Css

Het nut van CSS 3/20Pecha Kucha / Paul van

Buuren

3CSS voor n00bs (1)

Page 4: Het Nut Van Css

Het nut van CSS 4/20Pecha Kucha / Paul van

Buuren

4CSS voor n00bs (2)

Page 5: Het Nut Van Css

Het nut van CSS 5/20Pecha Kucha / Paul van

Buuren

5CSS voor n00bs (3)

Page 6: Het Nut Van Css

Het nut van CSS 6/20Pecha Kucha / Paul van

Buuren

6Verschillende media

Vormgeving van webcontent voor:–Browsers–PDA’s & mobiele telefoons–Print–Braille-apparaten, spraaksynthesizers

–TV, projectors

Page 7: Het Nut Van Css

Het nut van CSS 7/20Pecha Kucha / Paul van

Buuren

7Cascading

• Meerdere style sheets in een pagina• Meerdere regels voor hetzelfde

element• Piramide: uiteindelijk wint de meest

specifieke definitie

Page 8: Het Nut Van Css

Het nut van CSS 8/20Pecha Kucha / Paul van

Buuren

8Standaarden

• W3C: valide code / valide CSS• Webrichtlijnen (

www.webrichtlijnen.nl/richtlijnen/)

Page 9: Het Nut Van Css

Het nut van CSS 9/20Pecha Kucha / Paul van

Buuren

9Gebod 1:

Gij zult inhoud en vormgeving gescheiden houden

(tenzij het beter uitkomt, natuurlijk)

Page 10: Het Nut Van Css

Het nut van CSS 10/20Pecha Kucha / Paul van

Buuren

10Gebod 2:

Gij met elk type gebruiker rekening houden

(tenzij het beter uitkomt, natuurlijk)

Page 11: Het Nut Van Css

Het nut van CSS 11/20Pecha Kucha / Paul van

Buuren

11

Gebod 3: gebruik betekenisvolle code en namen• Kunnen ‘mikken’ op de juiste

elementen.– ID: <div id=“header”>– Class: <div class=“blogpost”>

• Microformats: standaard opmaak voor vaak voorkomende elementen:– hCard– hCalendar

Page 12: Het Nut Van Css

Het nut van CSS 12/20Pecha Kucha / Paul van

Buuren

12Browser: the four letter word of web design

Page 13: Het Nut Van Css

Het nut van CSS 13/20Pecha Kucha / Paul van

Buuren

13Fronteers

• Vakvereniging van ‘frontend-programmeurs’ : CSS, JavaScript, xHTML

• www.fronteers.nl

Page 14: Het Nut Van Css

Het nut van CSS 14/20Pecha Kucha / Paul van

Buuren

14Case 1: screen layout

Page 15: Het Nut Van Css

Het nut van CSS 15/20Pecha Kucha / Paul van

Buuren

15Case 1: handheld layout

Page 16: Het Nut Van Css

Het nut van CSS 16/20Pecha Kucha / Paul van

Buuren

16Case 1: print layout

Page 17: Het Nut Van Css

Het nut van CSS 17/20Pecha Kucha / Paul van

Buuren

17Case 2:

Page 18: Het Nut Van Css

Het nut van CSS 18/20Pecha Kucha / Paul van

Buuren

18

VOOR

Page 19: Het Nut Van Css

Het nut van CSS 19/20Pecha Kucha / Paul van

Buuren

19

NA

Page 20: Het Nut Van Css

Het nut van CSS 20/20Pecha Kucha / Paul van

Buuren

20Het resultaat