Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007
Frontend ontwikkeling <ul><li>De interface is je product richting de eindgebruiker </li></ul><ul><li>Goede PHP code met ee...
Frontend ontwikkeling <ul><li>Begin je product altijd met een ontwerp: </li></ul><ul><ul><li>Het is makkelijker te schetse...
Frontend ontwikkeling <ul><li>Een goede werkwijze helpt je bij het opzetten en onderhouden van je interface: </li></ul><ul...
Deze workshop <ul><li>Introductie op xHTML en semantiek </li></ul><ul><li>Stijling van xHTML via CSS </li></ul><ul><li>Bro...
xHTML Frontend ontwikkeling
Inhoud xHTML <ul><li>Oorsprong van xHTML </li></ul><ul><li>Semantiek </li></ul><ul><li>Microformatting </li></ul><ul><li>S...
Oorsprong van xHTML
Oorsprong van HTML <ul><li>Hypertext Markup Language </li></ul><ul><li>Ontwikkelt door CERN in 1991 </li></ul><ul><li>Geba...
Oorsprong van xHTML <ul><li>Sinds 2002 </li></ul><ul><li>Stricte syntax, vergelijkbaar met XML </li></ul><ul><li>xHTML is ...
XML Frontend ontwikkeling
xHTML Frontend ontwikkeling
xHTML <ul><li>Tags en attributen lowercase </li></ul><ul><li>Waarden van attributen tussen aanhalingstekens </li></ul><ul>...
xHTML versies <ul><li>Strict: vergelijkbaar met HTML, alleen met veel beperkingen </li></ul><ul><li>Transitional: heeft oo...
xHTML versies <ul><li>Gebruik zoveel mogelijk strict </li></ul><ul><li>De extra’s van Transitional zijn grotendeels ook vi...
Semantiek Frontend ontwikkeling
Semantiek <ul><li>Tags geven de inhoud een bepaalde betekenis:  de h1 tag zegt dat de inhoud de belangrijkste kop op de pa...
Semantiek <ul><li>De voordelen van semantiek: </li></ul><ul><ul><li>Leesbaarheid van de xHTML tijdens de ontwikkeling </li...
Semantiek Frontend ontwikkeling
Geen semantiek Frontend ontwikkeling
Block vs. Inline <ul><li>Twee typen HTML tags: </li></ul><ul><ul><li>Block elementen bepalen de hoofdstructuur van een pag...
Block vs.Inline <ul><li>Block elementen: </li></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>table </li></ul></ul><ul><ul><...
Block vs. Inline <ul><li>Inline elementen: </li></ul><ul><ul><li>a </li></ul></ul><ul><ul><li>em, strong </li></ul></ul><u...
Semantische betekenis <ul><li>Uitleg over de betekenis van de volgende elementen: </li></ul><ul><ul><li>Headings </li></ul...
Headings <ul><li>Bepalen de hoofdstructuur van een pagina </li></ul><ul><li>Vergelijkbaar met een inhoudsopgave </li></ul>...
Headings Frontend ontwikkeling
Lijsten <ul><li>Geven een opsomming van elementen, bijvoorbeeld: </li></ul><ul><ul><li>Een menu (opsomming van links) </li...
Lijsten Frontend ontwikkeling
Paragrafen <ul><li>Bevatten de uiteindelijke inhoud van een pagina </li></ul><ul><li>Plaats tekst zoveel mogelijk in aline...
Paragrafen Frontend ontwikkeling
Tabellen <ul><li>Bevatten tabulaire gegevens (en dus niet je complete website) </li></ul><ul><li>Gebruikt om informatie ov...
Frontend ontwikkeling
Inline elementen <ul><li>Inline elementen mogen voorkomen binnen alle elementen </li></ul><ul><li>Bedoeld om kenmerken aan...
Inline elementen Frontend ontwikkeling
Microformatting (even tussendoor)
Microformatting <ul><li>Semantische xHTML: via tags de inhoud een betekenis geven </li></ul><ul><li>Microformatting: via a...
Zonder microformatting Frontend ontwikkeling
Met microformatting Frontend ontwikkeling
Microformatting <ul><li>Elk woord een betekenis geven gaat ver </li></ul><ul><li>Maar de theorie kan wel helpen om je HTML...
Stijlbaarheid
Stijlbaarheid <ul><li>xHTML zal in de meeste gevallen een stijl krijgen via CSS </li></ul><ul><li>Zorg ervoor dat je xHTML...
Stijlbaarheid <ul><li>Gebruik naast correcte tags ook: </li></ul><ul><ul><li>Id attributen </li></ul></ul><ul><ul><li>Clas...
Stijlbaarheid <ul><li>Plaats bepaalde delen van de HTML tussen div tags, ook wel containers genoemd en geef deze container...
Stijlbaarheid <ul><li>Gebruik omschrijvende id’s en classes: </li></ul><ul><ul><li>header, content, footer </li></ul></ul>...
Stijlbaarheid Frontend ontwikkeling
CSS
CSS inhoud <ul><li>Introductie CSS </li></ul><ul><li>Selectors </li></ul><ul><li>Declaraties </li></ul><ul><li>Frameworks ...
Introductie CSS
Introductie CSS <ul><li>Cascading Style Sheets </li></ul><ul><li>Sinds 1994 </li></ul><ul><li>Bepalen de stijl van een web...
Introductie CSS <ul><li>Cascading: </li></ul><ul><li>Elk element neemt de stijl over van zijn parent, tenzij een aparte st...
Selectors
Selectors <ul><li>Via een selector bepaal je welk element je een stijling gaat geven. </li></ul><ul><li>Onderdelen van een...
Tag selector Frontend ontwikkeling
Id selector Frontend ontwikkeling
Class selector Frontend ontwikkeling
Pseudoclass selector Frontend ontwikkeling
Selectors <ul><li>Alle mogelijke combinaties van selectors is mogelijk </li></ul><ul><li>Per declaratie zijn meerder selec...
Selectors: combinaties Frontend ontwikkeling
Selectors: volgorde <ul><li>CSS declaraties kunnen elkaar “overschrijven” </li></ul><ul><li>CSS zal altijd de laatste defi...
Selectors volgorde Frontend ontwikkeling
Selectors volgorde <ul><li>Firebug kan overerving goed weergeven: </li></ul>Frontend ontwikkeling
Specificiteit <ul><li>CSS zal altijd de declaratie van de meest specifieke selector gebruiken. </li></ul><ul><li>Specifici...
Specificiteit <ul><li>Specificiteit is het moeilijkste concept van CSS </li></ul><ul><li>Mogelijke oplossingen: </li></ul>...
Declaraties
Declaraties <ul><li>Declaraties bepalen de stijl van het geselecteerde element. </li></ul><ul><li>Altijd een combinatie va...
Declaraties Frontend ontwikkeling
Declaraties <ul><li>Veel attributen hebben een kleine en grote versie </li></ul><ul><li>Onder andere margin, padding, font...
Declaraties Frontend ontwikkeling
Declaraties Frontend ontwikkeling
Declaraties <ul><li>Details over attributen en toegestane waarden zijn te vinden op W3C </li></ul><ul><ul><li>http://www.w...
Frameworks
Frameworks <ul><li>CSS frameworks kunnen je helpen bij veel voorkomende problemen </li></ul><ul><li>Bevatten vaak: </li></...
Frameworks: globale reset <ul><li>HTML elementen hebben een standaard stijling </li></ul><ul><li>Deze stijling verschilt p...
Frameworks: globale reset Frontend ontwikkeling
Frameworks: typografie <ul><li>Bouwen een nieuwe basis bovenop de globale reset </li></ul><ul><li>Geeft elementen een goed...
Frameworks: grid <ul><li>Biedt een grid waarop je je webpagina kunt positioneren </li></ul><ul><li>Via classes in je HTML ...
Frameworks: grid <ul><li>Voor en nadelen </li></ul><ul><ul><li>Handig voor het snel opzetten van een prototype </li></ul><...
Frameworks <ul><li>http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ </li></ul><ul>...
Box model
Box model <ul><li>Elk element op een webpagina kan gezien worden als een box </li></ul><ul><li>De margin, border, padding ...
Box model Frontend ontwikkeling
Box model <ul><li>De werkelijke afmetingen van een element op een pagina, worden bepaald door: </li></ul><ul><ul><li>De af...
Design patterns
Design patterns <ul><li>In software komen veel problemen vaak terug </li></ul><ul><li>Design patterns zijn oplossingen voo...
Design patterns <ul><li>Een design pattern bestaat uit: </li></ul><ul><ul><li>Probleem omschrijving: wat wil je bereiken? ...
Horizontaal centreren <ul><li>Probleem: “Ik wil een block-level element centreren binnen zijn parent” </li></ul><ul><li>Op...
Centreren Frontend ontwikkeling
Verticaal centreren <ul><li>Probleem: “Ik wil een tekst verticaal centreren” </li></ul><ul><li>Oplossing: maak de line-hei...
Verticaal centreren Frontend ontwikkeling
Kolommen <ul><li>Probleem: “Ik wil in mijn HTML meerdere kolommen hebben” </li></ul><ul><li>Oplossing: Geef elke kolom een...
Frontend ontwikkeling
Kolommen <ul><li>Floating zorgt ervoor dat element gaan ‘drijven’ in de richting die jij opgeeft </li></ul><ul><li>Float a...
Kolommen <ul><li>Een floating element springt altijd terug naar de linker marge als het niet meer naast een vorig element ...
Kolommen <ul><li>Na kolommen moet je floating ‘clearen’ om alle elementen eronder weer tegen de linker marge te zetten: </...
Kolommen demo
Lijsten als navigatie <ul><li>Probleem: “Ik wil een HTML lijst als vertical navigatie gebruiken” </li></ul><ul><li>Oplossi...
Frontend ontwikkeling
Lijsten als navigatie <ul><li>Probleem: “Ik wil een HTML lijst als horizontale navigatie gebruiken” </li></ul><ul><li>Oplo...
Frontend ontwikkeling
Image replacement <ul><li>Probleem: “Ik wil graag een logo op m’n pagina, maar ook een titel voor zoekmachine’s en screenr...
Frontend ontwikkeling
Bronnen <ul><li>http://www.smashingmagazine.com/category/css/ </li></ul>Frontend ontwikkeling
Browser compatibility
Browser compatibility <ul><li>Elke browser geeft webpagina’s anders weer </li></ul><ul><li>Controle in meest gebruikte bro...
Browser compatibility <ul><li>Ontwikkel op Firefox, met extensies: Firebug en HTML validator </li></ul><ul><li>Met de hier...
Browser compatibility <ul><li>Valt (te)veel over te vertellen </li></ul><ul><li>In de use case zullen praktische voorbeeld...
Use case Uitwerking van een simpele weblog in xHTML en CSS
Upcoming SlideShare
Loading in …5
×

Frontend ontwikkeling

1,248 views

Published on

Workshop for frontend webdevelopment.

Published in: Technology, Travel
  • Be the first to comment

  • Be the first to like this

Frontend ontwikkeling

  1. 1. Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007
  2. 2. Frontend ontwikkeling <ul><li>De interface is je product richting de eindgebruiker </li></ul><ul><li>Goede PHP code met een slechte interface geeft nog steeds geen goede gebruikerservaring </li></ul>Frontend ontwikkeling
  3. 3. Frontend ontwikkeling <ul><li>Begin je product altijd met een ontwerp: </li></ul><ul><ul><li>Het is makkelijker te schetsen op een stukje papier, </li></ul></ul><ul><ul><li>Het is makkelijker aan te passen dan je applicatie code, </li></ul></ul><ul><ul><li>Het geeft het duidelijkste beeld van de functionaliteit van een applicatie </li></ul></ul><ul><ul><li>(Bron: Getting Real, 37signals) </li></ul></ul>Frontend ontwikkeling
  4. 4. Frontend ontwikkeling <ul><li>Een goede werkwijze helpt je bij het opzetten en onderhouden van je interface: </li></ul><ul><ul><li>Valide, semantische xHTML </li></ul></ul><ul><ul><li>CSS voor de stijling </li></ul></ul>Frontend ontwikkeling
  5. 5. Deze workshop <ul><li>Introductie op xHTML en semantiek </li></ul><ul><li>Stijling van xHTML via CSS </li></ul><ul><li>Browser compatibility </li></ul><ul><li>Use case: weblog </li></ul>Frontend ontwikkeling
  6. 6. xHTML Frontend ontwikkeling
  7. 7. Inhoud xHTML <ul><li>Oorsprong van xHTML </li></ul><ul><li>Semantiek </li></ul><ul><li>Microformatting </li></ul><ul><li>Stijlbaarheid </li></ul>Frontend ontwikkeling
  8. 8. Oorsprong van xHTML
  9. 9. Oorsprong van HTML <ul><li>Hypertext Markup Language </li></ul><ul><li>Ontwikkelt door CERN in 1991 </li></ul><ul><li>Gebaseerd op SGML </li></ul><ul><li>Vrij ‘losse’ taal, geen stricte syntax: </li></ul><ul><ul><li>Afsluiten van tags is niet nodig </li></ul></ul><ul><ul><li>Tags en attributen in hoofdletters </li></ul></ul><ul><ul><li>Attributen zonder quotes </li></ul></ul><ul><ul><li>Attributen zonder waarde </li></ul></ul>Frontend ontwikkeling
  10. 10. Oorsprong van xHTML <ul><li>Sinds 2002 </li></ul><ul><li>Stricte syntax, vergelijkbaar met XML </li></ul><ul><li>xHTML is makkelijker te parsen dan HTML </li></ul>Frontend ontwikkeling
  11. 11. XML Frontend ontwikkeling
  12. 12. xHTML Frontend ontwikkeling
  13. 13. xHTML <ul><li>Tags en attributen lowercase </li></ul><ul><li>Waarden van attributen tussen aanhalingstekens </li></ul><ul><li>Lege tags afsluiten: <br /> </li></ul>Frontend ontwikkeling
  14. 14. xHTML versies <ul><li>Strict: vergelijkbaar met HTML, alleen met veel beperkingen </li></ul><ul><li>Transitional: heeft ook extra ‘presentatie’ tags, zoals <center> en <applet> </li></ul><ul><li>Frameset: voor het gebruik van frames </li></ul>Frontend ontwikkeling
  15. 15. xHTML versies <ul><li>Gebruik zoveel mogelijk strict </li></ul><ul><li>De extra’s van Transitional zijn grotendeels ook via CSS te realiseren </li></ul><ul><li>Frameset in sommige gevallen nodig, maar het gebruik van frames voor normale websites is af te raden </li></ul>Frontend ontwikkeling
  16. 16. Semantiek Frontend ontwikkeling
  17. 17. Semantiek <ul><li>Tags geven de inhoud een bepaalde betekenis: de h1 tag zegt dat de inhoud de belangrijkste kop op de pagina is. </li></ul><ul><li>Maakt de xHTML van een webpagina ook leesbaar (voor mens en computer) </li></ul>Frontend ontwikkeling
  18. 18. Semantiek <ul><li>De voordelen van semantiek: </li></ul><ul><ul><li>Leesbaarheid van de xHTML tijdens de ontwikkeling </li></ul></ul><ul><ul><li>Leesbaarheid voor zoekmachine’s </li></ul></ul><ul><ul><li>Leesbaarheid voor screen readers </li></ul></ul>Frontend ontwikkeling
  19. 19. Semantiek Frontend ontwikkeling
  20. 20. Geen semantiek Frontend ontwikkeling
  21. 21. Block vs. Inline <ul><li>Twee typen HTML tags: </li></ul><ul><ul><li>Block elementen bepalen de hoofdstructuur van een pagina </li></ul></ul><ul><ul><li>Inline elementen bepalen de structuur van elementen binnen een block element </li></ul></ul>Frontend ontwikkeling
  22. 22. Block vs.Inline <ul><li>Block elementen: </li></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>table </li></ul></ul><ul><ul><li>form </li></ul></ul><ul><ul><li>h1, h2, h3, h4, h5 </li></ul></ul><ul><ul><li>div </li></ul></ul>Frontend ontwikkeling
  23. 23. Block vs. Inline <ul><li>Inline elementen: </li></ul><ul><ul><li>a </li></ul></ul><ul><ul><li>em, strong </li></ul></ul><ul><ul><li>span </li></ul></ul><ul><ul><li>abbr </li></ul></ul><ul><ul><li>small </li></ul></ul>Frontend ontwikkeling
  24. 24. Semantische betekenis <ul><li>Uitleg over de betekenis van de volgende elementen: </li></ul><ul><ul><li>Headings </li></ul></ul><ul><ul><li>Lijsten </li></ul></ul><ul><ul><li>Paragrafen </li></ul></ul><ul><ul><li>Tabellen </li></ul></ul><ul><ul><li>Inline elementen </li></ul></ul>Frontend ontwikkeling
  25. 25. Headings <ul><li>Bepalen de hoofdstructuur van een pagina </li></ul><ul><li>Vergelijkbaar met een inhoudsopgave </li></ul><ul><li>Gebruikers scannen vaak alleen de pagina: koppen zijn van groot belang </li></ul><ul><li>Zoekmachine’s snappen koppen ook! </li></ul>Frontend ontwikkeling
  26. 26. Headings Frontend ontwikkeling
  27. 27. Lijsten <ul><li>Geven een opsomming van elementen, bijvoorbeeld: </li></ul><ul><ul><li>Een menu (opsomming van links) </li></ul></ul><ul><ul><li>Een lijst met nieuwsberichten </li></ul></ul><ul><ul><li>Een lijst met gebruikers </li></ul></ul>Frontend ontwikkeling
  28. 28. Lijsten Frontend ontwikkeling
  29. 29. Paragrafen <ul><li>Bevatten de uiteindelijke inhoud van een pagina </li></ul><ul><li>Plaats tekst zoveel mogelijk in alinea’s </li></ul><ul><li>Gebruik nooit de <br /> tag om ‘ruimte’ tussen tekst te krijgen: dat los je in CSS op </li></ul>Frontend ontwikkeling
  30. 30. Paragrafen Frontend ontwikkeling
  31. 31. Tabellen <ul><li>Bevatten tabulaire gegevens (en dus niet je complete website) </li></ul><ul><li>Gebruikt om informatie overzichtelijk weer te geven </li></ul><ul><li>Vergeet niet de specialere tabel tags: th, caption, tbody, etc. </li></ul>Frontend ontwikkeling
  32. 32. Frontend ontwikkeling
  33. 33. Inline elementen <ul><li>Inline elementen mogen voorkomen binnen alle elementen </li></ul><ul><li>Bedoeld om kenmerken aan tekst te geven </li></ul><ul><li>Bijvoorbeeld: a, strong, em, small </li></ul>Frontend ontwikkeling
  34. 34. Inline elementen Frontend ontwikkeling
  35. 35. Microformatting (even tussendoor)
  36. 36. Microformatting <ul><li>Semantische xHTML: via tags de inhoud een betekenis geven </li></ul><ul><li>Microformatting: via attributen de inhoud een nog specifiekere betekenis geven </li></ul>Frontend ontwikkeling
  37. 37. Zonder microformatting Frontend ontwikkeling
  38. 38. Met microformatting Frontend ontwikkeling
  39. 39. Microformatting <ul><li>Elk woord een betekenis geven gaat ver </li></ul><ul><li>Maar de theorie kan wel helpen om je HTML stijlbaar te maken </li></ul><ul><li>Meer informatie over microformatting: </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/Microformats </li></ul></ul>Frontend ontwikkeling
  40. 40. Stijlbaarheid
  41. 41. Stijlbaarheid <ul><li>xHTML zal in de meeste gevallen een stijl krijgen via CSS </li></ul><ul><li>Zorg ervoor dat je xHTML stijlbaar is </li></ul>Frontend ontwikkeling
  42. 42. Stijlbaarheid <ul><li>Gebruik naast correcte tags ook: </li></ul><ul><ul><li>Id attributen </li></ul></ul><ul><ul><li>Class attributen </li></ul></ul>Frontend ontwikkeling
  43. 43. Stijlbaarheid <ul><li>Plaats bepaalde delen van de HTML tussen div tags, ook wel containers genoemd en geef deze containers een class of id </li></ul><ul><li>Per container kun je in CSS makkelijk een stijl definiëren. </li></ul>Frontend ontwikkeling
  44. 44. Stijlbaarheid <ul><li>Gebruik omschrijvende id’s en classes: </li></ul><ul><ul><li>header, content, footer </li></ul></ul><ul><ul><li>left_column, right_column </li></ul></ul><ul><ul><li>menu </li></ul></ul>Frontend ontwikkeling
  45. 45. Stijlbaarheid Frontend ontwikkeling
  46. 46. CSS
  47. 47. CSS inhoud <ul><li>Introductie CSS </li></ul><ul><li>Selectors </li></ul><ul><li>Declaraties </li></ul><ul><li>Frameworks </li></ul><ul><li>Box model </li></ul><ul><li>Design patterns </li></ul>Frontend ontwikkeling
  48. 48. Introductie CSS
  49. 49. Introductie CSS <ul><li>Cascading Style Sheets </li></ul><ul><li>Sinds 1994 </li></ul><ul><li>Bepalen de stijl van een webpagina </li></ul>Frontend ontwikkeling
  50. 50. Introductie CSS <ul><li>Cascading: </li></ul><ul><li>Elk element neemt de stijl over van zijn parent, tenzij een aparte stijl gedefinieerd is. </li></ul>Frontend ontwikkeling
  51. 51. Selectors
  52. 52. Selectors <ul><li>Via een selector bepaal je welk element je een stijling gaat geven. </li></ul><ul><li>Onderdelen van een selector: </li></ul>Frontend ontwikkeling
  53. 53. Tag selector Frontend ontwikkeling
  54. 54. Id selector Frontend ontwikkeling
  55. 55. Class selector Frontend ontwikkeling
  56. 56. Pseudoclass selector Frontend ontwikkeling
  57. 57. Selectors <ul><li>Alle mogelijke combinaties van selectors is mogelijk </li></ul><ul><li>Per declaratie zijn meerder selectoren te definieren, door de selectoren te scheiden door een komma </li></ul><ul><li>Declaraties kunnen geneste elementen aanwijzen door een spatie in de declaratie te gebruiken </li></ul>Frontend ontwikkeling
  58. 58. Selectors: combinaties Frontend ontwikkeling
  59. 59. Selectors: volgorde <ul><li>CSS declaraties kunnen elkaar “overschrijven” </li></ul><ul><li>CSS zal altijd de laatste definitie van een stijl element gebruiken </li></ul><ul><li>Daarom is de volgorde van selectors vaak van belang </li></ul>Frontend ontwikkeling
  60. 60. Selectors volgorde Frontend ontwikkeling
  61. 61. Selectors volgorde <ul><li>Firebug kan overerving goed weergeven: </li></ul>Frontend ontwikkeling
  62. 62. Specificiteit <ul><li>CSS zal altijd de declaratie van de meest specifieke selector gebruiken. </li></ul><ul><li>Specificiteit is de meest voorkomende reden dat CSS regels niet toegepast worden, terwijl jij van mening bent dat er niets mis is. </li></ul>Frontend ontwikkeling
  63. 63. Specificiteit <ul><li>Specificiteit is het moeilijkste concept van CSS </li></ul><ul><li>Mogelijke oplossingen: </li></ul><ul><ul><li>Kijk goed in Firebug naar de overervingen, meestal kun je de fout dan wel vinden </li></ul></ul><ul><ul><li>Lees het artikel op Smashing Magazine: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ </li></ul></ul>Frontend ontwikkeling
  64. 64. Declaraties
  65. 65. Declaraties <ul><li>Declaraties bepalen de stijl van het geselecteerde element. </li></ul><ul><li>Altijd een combinatie van attribuut en waarde </li></ul>Frontend ontwikkeling
  66. 66. Declaraties Frontend ontwikkeling
  67. 67. Declaraties <ul><li>Veel attributen hebben een kleine en grote versie </li></ul><ul><li>Onder andere margin, padding, font en background. </li></ul>Frontend ontwikkeling
  68. 68. Declaraties Frontend ontwikkeling
  69. 69. Declaraties Frontend ontwikkeling
  70. 70. Declaraties <ul><li>Details over attributen en toegestane waarden zijn te vinden op W3C </li></ul><ul><ul><li>http://www.w3schools.com/css/css_reference.asp </li></ul></ul><ul><ul><li>http://www.w3.org/TR/REC-CSS2/ </li></ul></ul>Frontend ontwikkeling
  71. 71. Frameworks
  72. 72. Frameworks <ul><li>CSS frameworks kunnen je helpen bij veel voorkomende problemen </li></ul><ul><li>Bevatten vaak: </li></ul><ul><ul><li>Globale reset </li></ul></ul><ul><ul><li>Typografie basis </li></ul></ul><ul><ul><li>Grid </li></ul></ul>Frontend ontwikkeling
  73. 73. Frameworks: globale reset <ul><li>HTML elementen hebben een standaard stijling </li></ul><ul><li>Deze stijling verschilt per browser </li></ul><ul><li>Een globale reset zet alle waarden in alle browsers terug </li></ul><ul><li>Goede basis om verder mee te werken </li></ul>Frontend ontwikkeling
  74. 74. Frameworks: globale reset Frontend ontwikkeling
  75. 75. Frameworks: typografie <ul><li>Bouwen een nieuwe basis bovenop de globale reset </li></ul><ul><li>Geeft elementen een goede font-size, margin en padding </li></ul><ul><li>Zorgen voor een goede baseline </li></ul>Frontend ontwikkeling
  76. 76. Frameworks: grid <ul><li>Biedt een grid waarop je je webpagina kunt positioneren </li></ul><ul><li>Via classes in je HTML definieer je de opmaak van je pagina in het grid </li></ul><ul><li>Bijv: class=“column span-12” </li></ul>Frontend ontwikkeling
  77. 77. Frameworks: grid <ul><li>Voor en nadelen </li></ul><ul><ul><li>Handig voor het snel opzetten van een prototype </li></ul></ul><ul><ul><li>Overbodige hoeveelheid classes in je HTML maakt het niet netjes voor uiteindelijke versies </li></ul></ul><ul><ul><li>Kennis van CSS is nog steeds nodig </li></ul></ul><ul><ul><li>Zelf maken is net zo snel vanwege de beperkingen van het framework </li></ul></ul>Frontend ontwikkeling
  78. 78. Frameworks <ul><li>http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ </li></ul><ul><li>http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ </li></ul>Frontend ontwikkeling
  79. 79. Box model
  80. 80. Box model <ul><li>Elk element op een webpagina kan gezien worden als een box </li></ul><ul><li>De margin, border, padding en inhoud bepalen de afmetingen van deze box </li></ul>Frontend ontwikkeling
  81. 81. Box model Frontend ontwikkeling
  82. 82. Box model <ul><li>De werkelijke afmetingen van een element op een pagina, worden bepaald door: </li></ul><ul><ul><li>De afmetingen van de inhoud </li></ul></ul><ul><ul><li>De padding </li></ul></ul><ul><ul><li>De border </li></ul></ul><ul><li>Internet Explorer wijkt hier af. </li></ul>Frontend ontwikkeling
  83. 83. Design patterns
  84. 84. Design patterns <ul><li>In software komen veel problemen vaak terug </li></ul><ul><li>Design patterns zijn oplossingen voor veel voorkomende problemen </li></ul><ul><li>Door een patroon te zoeken in je probleem, kun je snel een oplossing toepassen </li></ul>Frontend ontwikkeling
  85. 85. Design patterns <ul><li>Een design pattern bestaat uit: </li></ul><ul><ul><li>Probleem omschrijving: wat wil je bereiken? </li></ul></ul><ul><ul><li>Een oplossing: hoe kan je het voorkomende probleem oplossen </li></ul></ul>Frontend ontwikkeling
  86. 86. Horizontaal centreren <ul><li>Probleem: “Ik wil een block-level element centreren binnen zijn parent” </li></ul><ul><li>Oplossing: Geef het element een vaste breedte en maak gebruik van een automatische margin </li></ul>Frontend ontwikkeling
  87. 87. Centreren Frontend ontwikkeling
  88. 88. Verticaal centreren <ul><li>Probleem: “Ik wil een tekst verticaal centreren” </li></ul><ul><li>Oplossing: maak de line-height van het element waarin de tekst staat even hoog als de hoogte van het element </li></ul>Frontend ontwikkeling
  89. 89. Verticaal centreren Frontend ontwikkeling
  90. 90. Kolommen <ul><li>Probleem: “Ik wil in mijn HTML meerdere kolommen hebben” </li></ul><ul><li>Oplossing: Geef elke kolom een vaste breedte en float alle kolommen naar links </li></ul>Frontend ontwikkeling
  91. 91. Frontend ontwikkeling
  92. 92. Kolommen <ul><li>Floating zorgt ervoor dat element gaan ‘drijven’ in de richting die jij opgeeft </li></ul><ul><li>Float altijd één kant uit, elementen komen dan goed tegen elkaar te staan </li></ul>Frontend ontwikkeling
  93. 93. Kolommen <ul><li>Een floating element springt altijd terug naar de linker marge als het niet meer naast een vorig element past </li></ul><ul><li>Let altijd goed op de werkelijke breedte van je kolommen (box-model!) </li></ul><ul><li>Plaats een div met vaste breedte om je kolommen om te voorkomen dat een kleinere browser je kolommen onder elkaar ziet </li></ul>Frontend ontwikkeling
  94. 94. Kolommen <ul><li>Na kolommen moet je floating ‘clearen’ om alle elementen eronder weer tegen de linker marge te zetten: </li></ul><ul><li>clear: left/right/both; </li></ul>Frontend ontwikkeling
  95. 95. Kolommen demo
  96. 96. Lijsten als navigatie <ul><li>Probleem: “Ik wil een HTML lijst als vertical navigatie gebruiken” </li></ul><ul><li>Oplossing: Verwijder de bullets en marges van de lijst </li></ul>Frontend ontwikkeling
  97. 97. Frontend ontwikkeling
  98. 98. Lijsten als navigatie <ul><li>Probleem: “Ik wil een HTML lijst als horizontale navigatie gebruiken” </li></ul><ul><li>Oplossing: Verwijder de bullets en marges van de lijst, float alle lijst items naar links </li></ul>Frontend ontwikkeling
  99. 99. Frontend ontwikkeling
  100. 100. Image replacement <ul><li>Probleem: “Ik wil graag een logo op m’n pagina, maar ook een titel voor zoekmachine’s en screenreaders” </li></ul><ul><li>Oplossing: Vervang de inhoud van een element door een afbeelding </li></ul>Frontend ontwikkeling
  101. 101. Frontend ontwikkeling
  102. 102. Bronnen <ul><li>http://www.smashingmagazine.com/category/css/ </li></ul>Frontend ontwikkeling
  103. 103. Browser compatibility
  104. 104. Browser compatibility <ul><li>Elke browser geeft webpagina’s anders weer </li></ul><ul><li>Controle in meest gebruikte browsers is daarom nodig </li></ul>Frontend ontwikkeling
  105. 105. Browser compatibility <ul><li>Ontwikkel op Firefox, met extensies: Firebug en HTML validator </li></ul><ul><li>Met de hiervoor beschreven werkwijze zullen de problemen in andere browsers binnen de perken blijven </li></ul>Frontend ontwikkeling
  106. 106. Browser compatibility <ul><li>Valt (te)veel over te vertellen </li></ul><ul><li>In de use case zullen praktische voorbeelden gegeven worden </li></ul>Frontend ontwikkeling
  107. 107. Use case Uitwerking van een simpele weblog in xHTML en CSS

×