Frontend ontwikkeling

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

description

Workshop for frontend webdevelopment.

Transcript of Frontend ontwikkeling

Page 1: Frontend ontwikkeling

Frontend ontwikkeling

Mark JansenEdwin Vlieg

PHPFreakz ledendag 10 november 2007

Page 2: Frontend ontwikkeling

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

Page 3: Frontend ontwikkeling

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

Page 4: Frontend ontwikkeling

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

Page 5: Frontend ontwikkeling

Deze workshop

• Introductie op xHTML en semantiek

• Stijling van xHTML via CSS• Browser compatibility• Use case: weblog

Frontend ontwikkeling 5

Page 6: Frontend ontwikkeling

xHTML

Frontend ontwikkeling 6

Page 7: Frontend ontwikkeling

Frontend ontwikkeling 7

Inhoud xHTML

• Oorsprong van xHTML• Semantiek• Microformatting• Stijlbaarheid

Page 8: Frontend ontwikkeling

Oorsprong van xHTML

Page 9: Frontend ontwikkeling

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

Page 10: Frontend ontwikkeling

Oorsprong van xHTML

• Sinds 2002• Stricte syntax, vergelijkbaar met

XML• xHTML is makkelijker te parsen

dan HTML

Frontend ontwikkeling 10

Page 11: Frontend ontwikkeling

Frontend ontwikkeling 11

XML

Page 12: Frontend ontwikkeling

Frontend ontwikkeling 12

xHTML

Page 13: Frontend ontwikkeling

Frontend ontwikkeling 13

xHTML

• Tags en attributen lowercase• Waarden van attributen tussen

aanhalingstekens• Lege tags afsluiten: <br />

Page 14: Frontend ontwikkeling

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

Page 15: Frontend ontwikkeling

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

Page 16: Frontend ontwikkeling

Semantiek

Frontend ontwikkeling 16

Page 17: Frontend ontwikkeling

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)

Page 18: Frontend ontwikkeling

Semantiek

• De voordelen van semantiek:– Leesbaarheid van de xHTML tijdens

de ontwikkeling– Leesbaarheid voor zoekmachine’s– Leesbaarheid voor screen readers

Frontend ontwikkeling 18

Page 19: Frontend ontwikkeling

Frontend ontwikkeling 19

Semantiek

Page 20: Frontend ontwikkeling

Frontend ontwikkeling 20

Geen semantiek

Page 21: Frontend ontwikkeling

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

Page 22: Frontend ontwikkeling

Frontend ontwikkeling 22

Block vs.Inline

• Block elementen:– p– table– form– h1, h2, h3, h4, h5– div

Page 23: Frontend ontwikkeling

Frontend ontwikkeling 23

Block vs. Inline

• Inline elementen:– a– em, strong– span– abbr– small

Page 24: Frontend ontwikkeling

Frontend ontwikkeling 24

Semantische betekenis

• Uitleg over de betekenis van de volgende elementen:– Headings– Lijsten– Paragrafen– Tabellen– Inline elementen

Page 25: Frontend ontwikkeling

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!

Page 26: Frontend ontwikkeling

Frontend ontwikkeling 26

Headings

Page 27: Frontend ontwikkeling

Lijsten

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

Frontend ontwikkeling 27

Page 28: Frontend ontwikkeling

Lijsten

Frontend ontwikkeling 28

Page 29: Frontend ontwikkeling

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

Page 30: Frontend ontwikkeling

Paragrafen

Frontend ontwikkeling 30

Page 31: Frontend ontwikkeling

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

Page 32: Frontend ontwikkeling

Frontend ontwikkeling 32

Page 33: Frontend ontwikkeling

Inline elementen

• Inline elementen mogen voorkomen binnen alle elementen

• Bedoeld om kenmerken aan tekst te geven

• Bijvoorbeeld: a, strong, em, small

Frontend ontwikkeling 33

Page 34: Frontend ontwikkeling

Inline elementen

Frontend ontwikkeling 34

Page 35: Frontend ontwikkeling

Microformatting

(even tussendoor)

Page 36: Frontend ontwikkeling

Microformatting

• Semantische xHTML: via tags de inhoud een betekenis geven

• Microformatting: via attributen de inhoud een nog specifiekere betekenis geven

Frontend ontwikkeling 36

Page 37: Frontend ontwikkeling

Zonder microformatting

Frontend ontwikkeling 37

Page 38: Frontend ontwikkeling

Met microformatting

Frontend ontwikkeling 38

Page 39: Frontend ontwikkeling

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

Page 40: Frontend ontwikkeling

Stijlbaarheid

Page 41: Frontend ontwikkeling

Stijlbaarheid

• xHTML zal in de meeste gevallen een stijl krijgen via CSS

• Zorg ervoor dat je xHTML stijlbaar is

Frontend ontwikkeling 41

Page 42: Frontend ontwikkeling

Stijlbaarheid

1. Gebruik naast correcte tags ook:– Id attributen– Class attributen

Frontend ontwikkeling 42

Page 43: Frontend ontwikkeling

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

Page 44: Frontend ontwikkeling

Stijlbaarheid

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

Frontend ontwikkeling 44

Page 45: Frontend ontwikkeling

Stijlbaarheid

Frontend ontwikkeling 45

Page 46: Frontend ontwikkeling

CSS

Page 47: Frontend ontwikkeling

CSS inhoud

• Introductie CSS• Selectors• Declaraties• Frameworks• Box model• Design patterns

Frontend ontwikkeling 47

Page 48: Frontend ontwikkeling

Introductie CSS

Page 49: Frontend ontwikkeling

Introductie CSS

• Cascading Style Sheets• Sinds 1994• Bepalen de stijl van een

webpagina

Frontend ontwikkeling 49

Page 50: Frontend ontwikkeling

Introductie CSS

Cascading:Elk element neemt de stijl over van

zijn parent, tenzij een aparte stijl gedefinieerd is.

Frontend ontwikkeling 50

Page 51: Frontend ontwikkeling

Selectors

Page 52: Frontend ontwikkeling

Selectors

• Via een selector bepaal je welk element je een stijling gaat geven.

• Onderdelen van een selector:

Frontend ontwikkeling 52

Page 53: Frontend ontwikkeling

Tag selector

Frontend ontwikkeling 53

Page 54: Frontend ontwikkeling

Id selector

Frontend ontwikkeling 54

Page 55: Frontend ontwikkeling

Class selector

Frontend ontwikkeling 55

Page 56: Frontend ontwikkeling

Pseudoclass selector

Frontend ontwikkeling 56

Page 57: Frontend ontwikkeling

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

Page 58: Frontend ontwikkeling

Selectors: combinaties

Frontend ontwikkeling 58

Page 59: Frontend ontwikkeling

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

Page 60: Frontend ontwikkeling

Selectors volgorde

Frontend ontwikkeling 60

Page 61: Frontend ontwikkeling

Selectors volgorde

• Firebug kan overerving goed weergeven:

Frontend ontwikkeling 61

Page 62: Frontend ontwikkeling

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

Page 63: Frontend ontwikkeling

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

Page 64: Frontend ontwikkeling

Declaraties

Page 65: Frontend ontwikkeling

Declaraties

• Declaraties bepalen de stijl van het geselecteerde element.

• Altijd een combinatie van attribuut en waarde

Frontend ontwikkeling 65

Page 66: Frontend ontwikkeling

Declaraties

Frontend ontwikkeling 66

Page 67: Frontend ontwikkeling

Declaraties

• Veel attributen hebben een kleine en grote versie

• Onder andere margin, padding, font en background.

Frontend ontwikkeling 67

Page 68: Frontend ontwikkeling

Declaraties

Frontend ontwikkeling 68

Page 69: Frontend ontwikkeling

Declaraties

Frontend ontwikkeling 69

Page 70: Frontend ontwikkeling

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

Page 71: Frontend ontwikkeling

Frameworks

Page 72: Frontend ontwikkeling

Frameworks

• CSS frameworks kunnen je helpen bij veel voorkomende problemen

• Bevatten vaak:– Globale reset– Typografie basis– Grid

Frontend ontwikkeling 72

Page 73: Frontend ontwikkeling

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

Page 74: Frontend ontwikkeling

Frameworks: globale reset

Frontend ontwikkeling 74

Page 75: Frontend ontwikkeling

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

Page 76: Frontend ontwikkeling

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

Page 77: Frontend ontwikkeling

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

Page 78: Frontend ontwikkeling

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

Page 79: Frontend ontwikkeling

Box model

Page 80: Frontend ontwikkeling

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

Page 81: Frontend ontwikkeling

Box model

Frontend ontwikkeling 81

Page 82: Frontend ontwikkeling

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

Page 83: Frontend ontwikkeling

Design patterns

Page 84: Frontend ontwikkeling

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

Page 85: Frontend ontwikkeling

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

Page 86: Frontend ontwikkeling

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

Page 87: Frontend ontwikkeling

Centreren

Frontend ontwikkeling 87

Page 88: Frontend ontwikkeling

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

Page 89: Frontend ontwikkeling

Verticaal centreren

Frontend ontwikkeling 89

Page 90: Frontend ontwikkeling

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

Page 91: Frontend ontwikkeling

Frontend ontwikkeling 91

Page 92: Frontend ontwikkeling

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

Page 93: Frontend ontwikkeling

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

Page 94: Frontend ontwikkeling

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

Page 95: Frontend ontwikkeling

Kolommen

demo

Page 96: Frontend ontwikkeling

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

Page 97: Frontend ontwikkeling

Frontend ontwikkeling 97

Page 98: Frontend ontwikkeling

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

Page 99: Frontend ontwikkeling

Frontend ontwikkeling 99

Page 100: Frontend ontwikkeling

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

Page 101: Frontend ontwikkeling

Frontend ontwikkeling 101

Page 102: Frontend ontwikkeling

Bronnen

• http://www.smashingmagazine.com/category/css/

Frontend ontwikkeling 102

Page 103: Frontend ontwikkeling

Browser compatibility

Page 104: Frontend ontwikkeling

Browser compatibility

• Elke browser geeft webpagina’s anders weer

• Controle in meest gebruikte browsers is daarom nodig

Frontend ontwikkeling 104

Page 105: Frontend ontwikkeling

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

Page 106: Frontend ontwikkeling

Browser compatibility

• Valt (te)veel over te vertellen• In de use case zullen praktische

voorbeelden gegeven worden

Frontend ontwikkeling 106

Page 107: Frontend ontwikkeling

Use case

Uitwerking van een simpele weblog in xHTML en CSS