Frontend ontwikkeling

Transcriptie

1 Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007

2 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft nog steeds geen goede gebruikerservaring

3 Frontend ontwikkeling Begin je product altijd met een ontwerp: Het is makkelijker te schetsen op een stukje papier, Het is makkelijker aan te passen dan je applicatie code, Het geeft het duidelijkste beeld van de functionaliteit van een applicatie (Bron: Getting Real, 37signals)

4 Frontend ontwikkeling Een goede werkwijze helpt je bij het opzetten en onderhouden van je interface: Valide, semantische xhtml CSS voor de stijling

5 Deze workshop Introductie op xhtml en semantiek Stijling van xhtml via CSS Browser compatibility Use case: weblog

6 xhtml

7 Inhoud xhtml Oorsprong van xhtml Semantiek Microformatting Stijlbaarheid

8 Oorsprong van xhtml

9 Oorsprong van HTML Hypertext Markup Language Ontwikkelt door CERN in 1991 Gebaseerd op SGML Vrij losse taal, geen stricte syntax: Afsluiten van tags is niet nodig Tags en attributen in hoofdletters Attributen zonder quotes Attributen zonder waarde

10 Oorsprong van xhtml Sinds 2002 Stricte syntax, vergelijkbaar met XML xhtml is makkelijker te parsen dan HTML

11 XML

12 xhtml

13 xhtml Tags en attributen lowercase Waarden van attributen tussen aanhalingstekens Lege tags afsluiten: <br />

14 xhtml versies Strict: vergelijkbaar met HTML, alleen met veel beperkingen Transitional: heeft ook extra presentatie tags, zoals <center> en <applet> Frameset: voor het gebruik van frames

15 xhtml versies Gebruik zoveel mogelijk strict De extra s van Transitional zijn grotendeels ook via CSS te realiseren Frameset in sommige gevallen nodig, maar het gebruik van frames voor normale websites is af te raden

16 Semantiek

17 Semantiek Tags geven de inhoud een bepaalde betekenis: de h1 tag zegt dat de inhoud de belangrijkste kop op de pagina is. Maakt de xhtml van een webpagina ook leesbaar (voor mens en computer)

18 Semantiek De voordelen van semantiek: Leesbaarheid van de xhtml tijdens de ontwikkeling Leesbaarheid voor zoekmachine s Leesbaarheid voor screen readers

19 Semantiek

20 Geen semantiek

21 Block vs. Inline Twee typen HTML tags: Block elementen bepalen de hoofdstructuur van een pagina Inline elementen bepalen de structuur van elementen binnen een block element

22 Block vs.inline Block elementen: p table form h1, h2, h3, h4, h5 div

23 Block vs. Inline Inline elementen: a em, strong span abbr small

24 Semantische betekenis Uitleg over de betekenis van de volgende elementen: Headings Lijsten Paragrafen Tabellen Inline elementen

25 Headings Bepalen de hoofdstructuur van een pagina Vergelijkbaar met een inhoudsopgave Gebruikers scannen vaak alleen de pagina: koppen zijn van groot belang Zoekmachine s snappen koppen ook!

26 Headings

27 Lijsten Geven een opsomming van elementen, bijvoorbeeld: Een menu (opsomming van links) Een lijst met nieuwsberichten Een lijst met gebruikers

28 Lijsten

29 Paragrafen Bevatten de uiteindelijke inhoud van een pagina Plaats tekst zoveel mogelijk in alinea s Gebruik nooit de <br /> tag om ruimte tussen tekst te krijgen: dat los je in CSS op

30 Paragrafen

31 Tabellen Bevatten tabulaire gegevens (en dus niet je complete website) Gebruikt om informatie overzichtelijk weer te geven Vergeet niet de specialere tabel tags: th, caption, tbody, etc.

32

33 Inline elementen Inline elementen mogen voorkomen binnen alle elementen Bedoeld om kenmerken aan tekst te geven Bijvoorbeeld: a, strong, em, small

34 Inline elementen

35 Microformatting (even tussendoor)

36 Microformatting Semantische xhtml: via tags de inhoud een betekenis geven Microformatting: via attributen de inhoud een nog specifiekere betekenis geven

37 Zonder microformatting

38 Met microformatting

39 Microformatting Elk woord een betekenis geven gaat ver Maar de theorie kan wel helpen om je HTML stijlbaar te maken Meer informatie over microformatting:

40 Stijlbaarheid

41 Stijlbaarheid xhtml zal in de meeste gevallen een stijl krijgen via CSS Zorg ervoor dat je xhtml stijlbaar is

42 Stijlbaarheid 1. Gebruik naast correcte tags ook: Id attributen Class attributen

43 Stijlbaarheid 2. Plaats bepaalde delen van de HTML tussen div tags, ook wel containers genoemd en geef deze containers een class of id Per container kun je in CSS makkelijk een stijl definiëren.

44 Stijlbaarheid 3. Gebruik omschrijvende id s en classes: header, content, footer left_column, right_column menu

45 Stijlbaarheid

46 CSS

47 CSS inhoud Introductie CSS Selectors Declaraties Frameworks Box model Design patterns

48 Introductie CSS

49 Introductie CSS Cascading Style Sheets Sinds 1994 Bepalen de stijl van een webpagina

50 Introductie CSS Cascading: Elk element neemt de stijl over van zijn parent, tenzij een aparte stijl gedefinieerd is.

51 Selectors

52 Selectors Via een selector bepaal je welk element je een stijling gaat geven. Onderdelen van een selector:

53 Tag selector

54 Id selector

55 Class selector

56 Pseudoclass selector

57 Selectors Alle mogelijke combinaties van selectors is mogelijk Per declaratie zijn meerder selectoren te definieren, door de selectoren te scheiden door een komma Declaraties kunnen geneste elementen aanwijzen door een spatie in de declaratie te gebruiken

58 Selectors: combinaties

59 Selectors: volgorde CSS declaraties kunnen elkaar overschrijven CSS zal altijd de laatste definitie van een stijl element gebruiken Daarom is de volgorde van selectors vaak van belang

60 Selectors volgorde

61 Selectors volgorde Firebug kan overerving goed weergeven:

62 Specificiteit CSS zal altijd de declaratie van de meest specifieke selector gebruiken. Specificiteit is de meest voorkomende reden dat CSS regels niet toegepast worden, terwijl jij van mening bent dat er niets mis is.

63 Specificiteit Specificiteit is het moeilijkste concept van CSS Mogelijke oplossingen: Kijk goed in Firebug naar de overervingen, meestal kun je de fout dan wel vinden Lees het artikel op Smashing Magazine:

64 Declaraties

65 Declaraties Declaraties bepalen de stijl van het geselecteerde element. Altijd een combinatie van attribuut en waarde

66 Declaraties

67 Declaraties Veel attributen hebben een kleine en grote versie Onder andere margin, padding, font en background.

68 Declaraties

69 Declaraties

70 Declaraties Details over attributen en toegestane waarden zijn te vinden op W3C css_reference.asp

71 Frameworks

72 Frameworks CSS frameworks kunnen je helpen bij veel voorkomende problemen Bevatten vaak: Globale reset Typografie basis Grid

73 Frameworks: globale reset HTML elementen hebben een standaard stijling Deze stijling verschilt per browser Een globale reset zet alle waarden in alle browsers terug Goede basis om verder mee te werken

74 Frameworks: globale reset

75 Frameworks: typografie Bouwen een nieuwe basis bovenop de globale reset Geeft elementen een goede font-size, margin en padding Zorgen voor een goede baseline

76 Frameworks: grid Biedt een grid waarop je je webpagina kunt positioneren Via classes in je HTML definieer je de opmaak van je pagina in het grid Bijv: class= column span-12

77 Frameworks: grid Voor en nadelen Handig voor het snel opzetten van een prototype Overbodige hoeveelheid classes in je HTML maakt het niet netjes voor uiteindelijke versies Kennis van CSS is nog steeds nodig Zelf maken is net zo snel vanwege de beperkingen van het framework

78 Frameworks /09/21/css-frameworks-css-resetdesign-from-scratch/ /05/01/reset-reloaded/

79 Box model

80 Box model Elk element op een webpagina kan gezien worden als een box De margin, border, padding en inhoud bepalen de afmetingen van deze box

81 Box model

82 Box model De werkelijke afmetingen van een element op een pagina, worden bepaald door: De afmetingen van de inhoud De padding De border Internet Explorer wijkt hier af.

83 Design patterns

84 Design patterns In software komen veel problemen vaak terug Design patterns zijn oplossingen voor veel voorkomende problemen Door een patroon te zoeken in je probleem, kun je snel een oplossing toepassen

85 Design patterns Een design pattern bestaat uit: Probleem omschrijving: wat wil je bereiken? Een oplossing: hoe kan je het voorkomende probleem oplossen

86 Horizontaal centreren Probleem: Ik wil een block-level element centreren binnen zijn parent Oplossing: Geef het element een vaste breedte en maak gebruik van een automatische margin

87 Centreren

88 Verticaal centreren Probleem: Ik wil een tekst verticaal centreren Oplossing: maak de line-height van het element waarin de tekst staat even hoog als de hoogte van het element

89 Verticaal centreren

90 Kolommen Probleem: Ik wil in mijn HTML meerdere kolommen hebben Oplossing: Geef elke kolom een vaste breedte en float alle kolommen naar links

91

92 Kolommen Floating zorgt ervoor dat element gaan drijven in de richting die jij opgeeft Float altijd één kant uit, elementen komen dan goed tegen elkaar te staan

93 Kolommen Een floating element springt altijd terug naar de linker marge als het niet meer naast een vorig element past Let altijd goed op de werkelijke breedte van je kolommen (box-model!) Plaats een div met vaste breedte om je kolommen om te voorkomen dat een kleinere browser je kolommen onder elkaar ziet

94 Kolommen Na kolommen moet je floating clearen om alle elementen eronder weer tegen de linker marge te zetten: clear: left/right/both;

95 Kolommen demo

96 Lijsten als navigatie Probleem: Ik wil een HTML lijst als vertical navigatie gebruiken Oplossing: Verwijder de bullets en marges van de lijst

97

98 Lijsten als navigatie Probleem: Ik wil een HTML lijst als horizontale navigatie gebruiken Oplossing: Verwijder de bullets en marges van de lijst, float alle lijst items naar links

99

100 Image replacement Probleem: Ik wil graag een logo op m n pagina, maar ook een titel voor zoekmachine s en screenreaders Oplossing: Vervang de inhoud van een element door een afbeelding

101

102 Bronnen category/css/

103 Browser compatibility

104 Browser compatibility Elke browser geeft webpagina s anders weer Controle in meest gebruikte browsers is daarom nodig

105 Browser compatibility Ontwikkel op Firefox, met extensies: Firebug en HTML validator Met de hiervoor beschreven werkwijze zullen de problemen in andere browsers binnen de perken blijven

106 Browser compatibility Valt (te)veel over te vertellen In de use case zullen praktische voorbeelden gegeven worden

107 Use case Uitwerking van een simpele weblog in xhtml en CSS