• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Frontend ontwikkeling
 

Frontend ontwikkeling

on

  • 1,999 views

Workshop for frontend webdevelopment.

Workshop for frontend webdevelopment.

Statistics

Views

Total Views
1,999
Views on SlideShare
1,984
Embed Views
15

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 15

http://www.linkedin.com 12
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Iets vertellen over onszelf

Frontend ontwikkeling Frontend ontwikkeling Presentation Transcript

  • Frontend ontwikkeling Mark Jansen Edwin 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
  • 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
  • Frontend ontwikkeling
    • Een goede werkwijze helpt je bij het opzetten en onderhouden van je interface:
      • Valide, semantische xHTML
      • CSS voor de stijling
    Frontend ontwikkeling
  • Deze workshop
    • Introductie op xHTML en semantiek
    • Stijling van xHTML via CSS
    • Browser compatibility
    • Use case: weblog
    Frontend ontwikkeling
  • xHTML Frontend ontwikkeling
  • Inhoud xHTML
    • Oorsprong van xHTML
    • Semantiek
    • Microformatting
    • Stijlbaarheid
    Frontend ontwikkeling
  • Oorsprong van xHTML
  • 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
    Frontend ontwikkeling
  • Oorsprong van xHTML
    • Sinds 2002
    • Stricte syntax, vergelijkbaar met XML
    • xHTML is makkelijker te parsen dan HTML
    Frontend ontwikkeling
  • XML Frontend ontwikkeling
  • xHTML Frontend ontwikkeling
  • xHTML
    • Tags en attributen lowercase
    • Waarden van attributen tussen aanhalingstekens
    • Lege tags afsluiten: <br />
    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
  • 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
  • Semantiek Frontend ontwikkeling
  • 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)
    Frontend ontwikkeling
  • Semantiek
    • De voordelen van semantiek:
      • Leesbaarheid van de xHTML tijdens de ontwikkeling
      • Leesbaarheid voor zoekmachine’s
      • Leesbaarheid voor screen readers
    Frontend ontwikkeling
  • Semantiek Frontend ontwikkeling
  • Geen semantiek Frontend ontwikkeling
  • 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
  • Block vs.Inline
    • Block elementen:
      • p
      • table
      • form
      • h1, h2, h3, h4, h5
      • div
    Frontend ontwikkeling
  • Block vs. Inline
    • Inline elementen:
      • a
      • em, strong
      • span
      • abbr
      • small
    Frontend ontwikkeling
  • Semantische betekenis
    • Uitleg over de betekenis van de volgende elementen:
      • Headings
      • Lijsten
      • Paragrafen
      • Tabellen
      • Inline elementen
    Frontend ontwikkeling
  • 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
  • Headings Frontend ontwikkeling
  • Lijsten
    • Geven een opsomming van elementen, bijvoorbeeld:
      • Een menu (opsomming van links)
      • Een lijst met nieuwsberichten
      • Een lijst met gebruikers
    Frontend ontwikkeling
  • Lijsten 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
  • Paragrafen 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
  • 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
  • Inline elementen Frontend ontwikkeling
  • 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
  • Zonder microformatting Frontend ontwikkeling
  • Met microformatting 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
  • Stijlbaarheid
  • Stijlbaarheid
    • xHTML zal in de meeste gevallen een stijl krijgen via CSS
    • Zorg ervoor dat je xHTML stijlbaar is
    Frontend ontwikkeling
  • Stijlbaarheid
    • Gebruik naast correcte tags ook:
      • Id attributen
      • Class attributen
    Frontend ontwikkeling
  • Stijlbaarheid
    • 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
  • Stijlbaarheid
    • Gebruik omschrijvende id’s en classes:
      • header, content, footer
      • left_column, right_column
      • menu
    Frontend ontwikkeling
  • Stijlbaarheid Frontend ontwikkeling
  • CSS
  • CSS inhoud
    • Introductie CSS
    • Selectors
    • Declaraties
    • Frameworks
    • Box model
    • Design patterns
    Frontend ontwikkeling
  • Introductie CSS
  • Introductie CSS
    • Cascading Style Sheets
    • Sinds 1994
    • Bepalen de stijl van een webpagina
    Frontend ontwikkeling
  • Introductie CSS
    • Cascading:
    • Elk element neemt de stijl over van zijn parent, tenzij een aparte stijl gedefinieerd is.
    Frontend ontwikkeling
  • Selectors
  • Selectors
    • Via een selector bepaal je welk element je een stijling gaat geven.
    • Onderdelen van een selector:
    Frontend ontwikkeling
  • Tag selector Frontend ontwikkeling
  • Id selector Frontend ontwikkeling
  • Class selector Frontend ontwikkeling
  • Pseudoclass selector 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
  • Selectors: combinaties 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
  • Selectors volgorde Frontend ontwikkeling
  • Selectors volgorde
    • Firebug kan overerving goed weergeven:
    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
  • 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
  • Declaraties
  • Declaraties
    • Declaraties bepalen de stijl van het geselecteerde element.
    • Altijd een combinatie van attribuut en waarde
    Frontend ontwikkeling
  • Declaraties Frontend ontwikkeling
  • Declaraties
    • Veel attributen hebben een kleine en grote versie
    • Onder andere margin, padding, font en background.
    Frontend ontwikkeling
  • Declaraties Frontend ontwikkeling
  • Declaraties 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
  • Frameworks
  • Frameworks
    • CSS frameworks kunnen je helpen bij veel voorkomende problemen
    • Bevatten vaak:
      • Globale reset
      • Typografie basis
      • Grid
    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
  • Frameworks: globale reset 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
  • 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
  • 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
    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
  • 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
  • Box model 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
  • 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
  • Design patterns
    • Een design pattern bestaat uit:
      • Probleem omschrijving: wat wil je bereiken?
      • Een oplossing: hoe kan je het voorkomende probleem oplossen
    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
  • Centreren 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
  • Verticaal centreren 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
  • 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
  • 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
  • Kolommen
    • Na kolommen moet je floating ‘clearen’ om alle elementen eronder weer tegen de linker marge te zetten:
    • clear: left/right/both;
    Frontend ontwikkeling
  • 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
  • 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
  • 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
  • Frontend ontwikkeling
  • Bronnen
    • http://www.smashingmagazine.com/category/css/
    Frontend ontwikkeling
  • Browser compatibility
  • Browser compatibility
    • Elke browser geeft webpagina’s anders weer
    • Controle in meest gebruikte browsers is daarom nodig
    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
  • Browser compatibility
    • Valt (te)veel over te vertellen
    • In de use case zullen praktische voorbeelden gegeven worden
    Frontend ontwikkeling
  • Use case Uitwerking van een simpele weblog in xHTML en CSS