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:
Frontend ontwikkeling
‹#›
xHTML versies • Strict: vergelijkbaar met HTML, alleen met veel beperkingen • Transitional: heeft ook extra ‘presentatie’ tags, zoals
en