frontend ontwikkeling
DESCRIPTION
Workshop for frontend webdevelopment.TRANSCRIPT
Frontend ontwikkeling
Mark JansenEdwin Vlieg
PHPFreakz ledendag 10 november 2007
Frontend ontwikkeling
• De interface is je product richting de eindgebruiker
• Goede PHP code met een slechte interface geeft nog steeds geen goede gebruikerservaring
Frontend ontwikkeling 2
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)
Frontend ontwikkeling 3
Frontend ontwikkeling
• Een goede werkwijze helpt je bij het opzetten en onderhouden van je interface:– Valide, semantische xHTML– CSS voor de stijling
Frontend ontwikkeling 4
Deze workshop
• Introductie op xHTML en semantiek
• Stijling van xHTML via CSS• Browser compatibility• Use case: weblog
Frontend ontwikkeling 5
xHTML
Frontend ontwikkeling 6
Frontend ontwikkeling 7
Inhoud xHTML
• Oorsprong van xHTML• Semantiek• Microformatting• Stijlbaarheid
Oorsprong van xHTML
Frontend ontwikkeling 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
Oorsprong van xHTML
• Sinds 2002• Stricte syntax, vergelijkbaar met
XML• xHTML is makkelijker te parsen
dan HTML
Frontend ontwikkeling 10
Frontend ontwikkeling 11
XML
Frontend ontwikkeling 12
xHTML
Frontend ontwikkeling 13
xHTML
• Tags en attributen lowercase• Waarden van attributen tussen
aanhalingstekens• Lege tags afsluiten: <br />
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
Frontend ontwikkeling 14
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
Frontend ontwikkeling 15
Semantiek
Frontend ontwikkeling 16
Frontend ontwikkeling 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)
Semantiek
• De voordelen van semantiek:– Leesbaarheid van de xHTML tijdens
de ontwikkeling– Leesbaarheid voor zoekmachine’s– Leesbaarheid voor screen readers
Frontend ontwikkeling 18
Frontend ontwikkeling 19
Semantiek
Frontend ontwikkeling 20
Geen semantiek
Frontend ontwikkeling 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
Frontend ontwikkeling 22
Block vs.Inline
• Block elementen:– p– table– form– h1, h2, h3, h4, h5– div
Frontend ontwikkeling 23
Block vs. Inline
• Inline elementen:– a– em, strong– span– abbr– small
Frontend ontwikkeling 24
Semantische betekenis
• Uitleg over de betekenis van de volgende elementen:– Headings– Lijsten– Paragrafen– Tabellen– Inline elementen
Frontend ontwikkeling 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!
Frontend ontwikkeling 26
Headings
Lijsten
• Geven een opsomming van elementen, bijvoorbeeld:– Een menu (opsomming van links)– Een lijst met nieuwsberichten– Een lijst met gebruikers
Frontend ontwikkeling 27
Lijsten
Frontend ontwikkeling 28
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
Frontend ontwikkeling 29
Paragrafen
Frontend ontwikkeling 30
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.
Frontend ontwikkeling 31
Frontend ontwikkeling 32
Inline elementen
• Inline elementen mogen voorkomen binnen alle elementen
• Bedoeld om kenmerken aan tekst te geven
• Bijvoorbeeld: a, strong, em, small
Frontend ontwikkeling 33
Inline elementen
Frontend ontwikkeling 34
Microformatting
(even tussendoor)
Microformatting
• Semantische xHTML: via tags de inhoud een betekenis geven
• Microformatting: via attributen de inhoud een nog specifiekere betekenis geven
Frontend ontwikkeling 36
Zonder microformatting
Frontend ontwikkeling 37
Met microformatting
Frontend ontwikkeling 38
Microformatting
• Elk woord een betekenis geven gaat ver
• Maar de theorie kan wel helpen om je HTML stijlbaar te maken
• Meer informatie over microformatting:– http://en.wikipedia.org/wiki/Microformats
Frontend ontwikkeling 39
Stijlbaarheid
Stijlbaarheid
• xHTML zal in de meeste gevallen een stijl krijgen via CSS
• Zorg ervoor dat je xHTML stijlbaar is
Frontend ontwikkeling 41
Stijlbaarheid
1. Gebruik naast correcte tags ook:– Id attributen– Class attributen
Frontend ontwikkeling 42
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.
Frontend ontwikkeling 43
Stijlbaarheid
3. Gebruik omschrijvende id’s en classes:– header, content, footer– left_column, right_column– menu
Frontend ontwikkeling 44
Stijlbaarheid
Frontend ontwikkeling 45
CSS
CSS inhoud
• Introductie CSS• Selectors• Declaraties• Frameworks• Box model• Design patterns
Frontend ontwikkeling 47
Introductie CSS
Introductie CSS
• Cascading Style Sheets• Sinds 1994• Bepalen de stijl van een
webpagina
Frontend ontwikkeling 49
Introductie CSS
Cascading:Elk element neemt de stijl over van
zijn parent, tenzij een aparte stijl gedefinieerd is.
Frontend ontwikkeling 50
Selectors
Selectors
• Via een selector bepaal je welk element je een stijling gaat geven.
• Onderdelen van een selector:
Frontend ontwikkeling 52
Tag selector
Frontend ontwikkeling 53
Id selector
Frontend ontwikkeling 54
Class selector
Frontend ontwikkeling 55
Pseudoclass selector
Frontend ontwikkeling 56
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
Frontend ontwikkeling 57
Selectors: combinaties
Frontend ontwikkeling 58
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
Frontend ontwikkeling 59
Selectors volgorde
Frontend ontwikkeling 60
Selectors volgorde
• Firebug kan overerving goed weergeven:
Frontend ontwikkeling 61
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.
Frontend ontwikkeling 62
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: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Frontend ontwikkeling 63
Declaraties
Declaraties
• Declaraties bepalen de stijl van het geselecteerde element.
• Altijd een combinatie van attribuut en waarde
Frontend ontwikkeling 65
Declaraties
Frontend ontwikkeling 66
Declaraties
• Veel attributen hebben een kleine en grote versie
• Onder andere margin, padding, font en background.
Frontend ontwikkeling 67
Declaraties
Frontend ontwikkeling 68
Declaraties
Frontend ontwikkeling 69
Declaraties
• Details over attributen en toegestane waarden zijn te vinden op W3C– http://www.w3schools.com/css/
css_reference.asp– http://www.w3.org/TR/REC-CSS2/
Frontend ontwikkeling 70
Frameworks
Frameworks
• CSS frameworks kunnen je helpen bij veel voorkomende problemen
• Bevatten vaak:– Globale reset– Typografie basis– Grid
Frontend ontwikkeling 72
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
Frontend ontwikkeling 73
Frameworks: globale reset
Frontend ontwikkeling 74
Frameworks: typografie
• Bouwen een nieuwe basis bovenop de globale reset
• Geeft elementen een goede font-size, margin en padding
• Zorgen voor een goede baseline
Frontend ontwikkeling 75
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”
Frontend ontwikkeling 76
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 frameworkFrontend ontwikkeling 77
Frameworks
• http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
• http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Frontend ontwikkeling 78
Box model
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
Frontend ontwikkeling 80
Box model
Frontend ontwikkeling 81
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.
Frontend ontwikkeling 82
Design patterns
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
Frontend ontwikkeling 84
Design patterns
• Een design pattern bestaat uit:– Probleem omschrijving: wat wil je
bereiken?– Een oplossing: hoe kan je het
voorkomende probleem oplossen
Frontend ontwikkeling 85
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
Frontend ontwikkeling 86
Centreren
Frontend ontwikkeling 87
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
Frontend ontwikkeling 88
Verticaal centreren
Frontend ontwikkeling 89
Kolommen
• Probleem: “Ik wil in mijn HTML meerdere kolommen hebben”
• Oplossing: Geef elke kolom een vaste breedte en float alle kolommen naar links
Frontend ontwikkeling 90
Frontend ontwikkeling 91
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
Frontend ontwikkeling 92
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
Frontend ontwikkeling 93
Kolommen
• Na kolommen moet je floating ‘clearen’ om alle elementen eronder weer tegen de linker marge te zetten:
• clear: left/right/both;
Frontend ontwikkeling 94
Kolommen
demo
Lijsten als navigatie
• Probleem: “Ik wil een HTML lijst als vertical navigatie gebruiken”
• Oplossing: Verwijder de bullets en marges van de lijst
Frontend ontwikkeling 96
Frontend ontwikkeling 97
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
Frontend ontwikkeling 98
Frontend ontwikkeling 99
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
Frontend ontwikkeling 100
Frontend ontwikkeling 101
Bronnen
• http://www.smashingmagazine.com/category/css/
Frontend ontwikkeling 102
Browser compatibility
Browser compatibility
• Elke browser geeft webpagina’s anders weer
• Controle in meest gebruikte browsers is daarom nodig
Frontend ontwikkeling 104
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
Frontend ontwikkeling 105
Browser compatibility
• Valt (te)veel over te vertellen• In de use case zullen praktische
voorbeelden gegeven worden
Frontend ontwikkeling 106
Use case
Uitwerking van een simpele weblog in xHTML en CSS