WEBSITES ONTWIKKELINGEN • Trends en standaarden op het gebied van webdesign • HTML, DHTML, XHTML, FLASH, CSS

Henk Zegwaard december 2003

Geschiedenis

• 1945- Vannevar Bush (!): "The human mind...operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain." • Theodor Holm Nelson (1981-Xanadu): van menselijk brein naar wereldweb • Ontstaan van het WWW: 1991 door CERN (Tim Berners-Lee) • 1994: World Wide Web Consortium (W3C)

bron:

History of the WWW

HTML – het begin

• Behoefte aan manier om documenten over netwerk te versturen • Hypertext Markup Language – Tags voor de opmaak Bijv.:

Dit is een kop

– Lay-out wordt overgelaten aan Browser – Link: Eerste browser HTML editor

HTML voorbeelden Van saai naar ‘leuk’

HTML – en toen …(1)

• Probleem: navigatie – Oplossing: Frames • Probleem: controle over indeling pagina – Oplossing: Tabellen

HTML – en toen… (2)

• Probleem: controle over vormgeving/lay-out – Oplossing: Flash CSS • Probleem: interactiviteit – Oplossing: DHTML (client-side scripting - javascript) Serverside-scripting (PHP, ASP, JSP etc.)

Frames voor- en nadelen

• Voordelen: – Boek over HTML uit 2000: “…veel gebruikt en keurmerk voor geavanceerde sites…” – Sneller laden (alleen mainframe) – Heldere navigatie – Scheiding content en structuur • Nadelen: – Juridisch (laden van andere site in eigen site) – ‘Deep-linken’ – Browsers gingen verschillend om met frames – Probleem voor zoekmachines

Tabellen voor- en nadelen

• Voordelen: – Controle over positie (geneste tabellen) – Controle over breedte (relatief – absoluut) – Goede ondersteuning door browsers • Nadelen: – Snelheid wordt negatief beinvloed door (vooral geneste) tabellen – Onoverzichtelijkheid – Niet print-vriendelijk

W3C -webstandaarden

• World Wide Web Consortium (W3C) – Opgericht in 1994 – Leidende rol m.b.t. technische ontwikkelingen van het Web – Ontwikkelen van standaarden en aanbevelingen – Toegankelijkheid (Accessibility) en gebruikersvriendelijkheid (Usability) – Validatie van websites Link: http://www.w3.org/

W3C - aanbevelingen

• M.b.t. webdesign: – Tabellen niet voor lay-out, alleen voor data-weergave – Ook frames worden afgeraden (zie nadelen) • Wat dan wel: – aansluiten bij XML XHTML – Scheiden van content en opmaak d.m.v. Cascading Style Sheets (CSS)

• •

XML - XHTML

– – – – – XML: Principe: scheiding van inhoud en lay-out Meta-taal: definieert en beschrijft elke vorm van informatie Platform-onafhankelijk en uitbreidbaar Gebaseerd op gewone tekst (Unicode) Tags zijn zelf te definieren – – – – – – XHTML: Alle tags en attributen moeten in

kleine letters

staan. Alle XHTML elementen moeten

afgesloten

Alle attribuutwaarden moeten

gequote

Het

id-attribuut

worden. worden. vervangt het name-attribuut. Het script-element moet een

type-definitie

krijgen. Documenten moet overeenkomstig de

XML-regels

worden. opgesteld – XHTML krijgen nog enkele

verplichte bijkomende elementen

.

Cascading Style Sheets

• • • • • Vormgeving van (X)HTML-elementen Wordt al langer gebruikt, ook i.c.m. tabellen en frames December 1996: CSS1 werd W3C-aanbeveling Ondersteuning door browsers steeds beter Drie mogelijkheden: – Inline CSS-code – Style Sheet op documentniveau – Style Sheet in extern bestand

CSS – inline stijlen

• • Opmaakinformatie voor een afzonderlijk element Voorbeeld:

Dit is een grote blauwe kop

CSS – op documentniveau

• • Opmaakmodel in het head-gedeelte van een HTML-document Voorbeeld:

Dit is een grote groene kop

en hier staat wat tekst van 10px

• •

CSS – externe opmaakmodellen

Opmaakmodel in een apart tekstbestand Voorbeeld: Html-pagina: mijnopmaak.css: body {background-color : white;} h1, h2 {color: red;} p {font-size: 12px;}

Dit is een rode kop op een witte achtergrond

en hier staat wat tekst van 12px

CSS – voordelen

• • • • Overzichtelijkheid en flexibiliteit door scheiding van inhoud en opmaak Betere controle over opmaak Snelheid (bij gebruik van extern bestand) door caching van het css-bestand Werken volgens aanbevelingen en standaarden van W3C

CSS-sites voorbeelden

• Voorbeelden van CSS – XHTML sites:

• • • • •

Bronnen en links

– Webstandaarden en aanbevelingen: w3c.org

– – – – – – – – – CSS/XHTML sites: Stijlstek.nl

alistapart.com

Bitstorm.org (cursus css) saila.com: tables or css?

webdesign.about.com: avoid tables thenoodleincident.com

csszengarden.com

www.khlim.be : xhtml w3schools.com : xhtml – – Geschiedenis sites: webhistory.org : geschiedenis van het web ei.cs.vt.edu : geschiedenis van www – Divers: aboyandhiscomputer.com : slechte websites – – – Boeken: Eric Meyer: On CSS Eric Meyer: CSS Kort en Krachtig Sybex/Het Beste Boek: HTML

EINDE