Het Nut Van Css

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

Slide 2: De kracht van CSS: 2 CSS Zengarden Het nut van CSS 2/20 Pecha Kucha / Paul van Buuren

Slide 3: CSS voor n00bs (1) 3 Het nut van CSS 3/20 Pecha Kucha / Paul van Buuren

Slide 4: CSS voor n00bs (2) 4 Het nut van CSS 4/20 Pecha Kucha / Paul van Buuren

Slide 5: CSS voor n00bs (3) 5 Het nut van CSS 5/20 Pecha Kucha / Paul van Buuren

Slide 6: Verschillende media 6 Vormgeving van webcontent voor: –Browsers –PDA’s & mobiele telefoons –Print –Braille-apparaten, spraaksynthesizers –TV, projectors Het nut van CSS 6/20 Pecha Kucha / Paul van Buuren

Slide 7: Cascading 7 • Meerdere style sheets in een pagina • Meerdere regels voor hetzelfde element • Piramide: uiteindelijk wint de meest specifieke definitie Het nut van CSS 7/20 Pecha Kucha / Paul van Buuren

Slide 8: Standaarden 8 • W3C: valide code / valide CSS • Webrichtlijnen ( www.webrichtlijnen.nl/richtlijnen/) Het nut van CSS 8/20 Pecha Kucha / Paul van Buuren

Slide 9: Gebod 1: 9 Gij zult inhoud en vormgeving gescheiden houden (tenzij het beter uitkomt, natuurlijk) Het nut van CSS 9/20 Pecha Kucha / Paul van Buuren

Slide 10: Gebod 2: 10 Gij met elk type gebruiker rekening houden (tenzij het beter uitkomt, natuurlijk) Het nut van CSS 10/20 Pecha Kucha / Paul van Buuren

Slide 11: Gebod 3: gebruik 11 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 Het nut van CSS 11/20 Pecha Kucha / Paul van Buuren

Slide 12: Browser: 12 the four letter word of web design Het nut van CSS 12/20 Pecha Kucha / Paul van Buuren

Slide 13: Fronteers 13 • Vakvereniging van ‘frontend- programmeurs’ : CSS, JavaScript, xHTML • www.fronteers.nl Het nut van CSS 13/20 Pecha Kucha / Paul van Buuren

Slide 14: Case 1: screen layout 14 Het nut van CSS 14/20 Pecha Kucha / Paul van Buuren

Slide 15: Case 1: handheld layout 15 Het nut van CSS 15/20 Pecha Kucha / Paul van Buuren

Slide 16: Case 1: print layout 16 Het nut van CSS 16/20 Pecha Kucha / Paul van Buuren

Slide 17: Case 2: 17 Het nut van CSS 17/20 Pecha Kucha / Paul van Buuren

Slide 18: 18 VOOR Het nut van CSS 18/20 Pecha Kucha / Paul van Buuren

Slide 19: 19 NA Het nut van CSS 19/20 Pecha Kucha / Paul van Buuren

Slide 20: Het resultaat 20 Het nut van CSS 20/20 Pecha Kucha / Paul van Buuren