WEBSITES ONTWIKKELINGEN

1
WEBSITES ONTWIKKELINGEN

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

Henk Zegwaard december 2003
2
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
3
HTML het begin

• Behoefte aan manier om documenten over netwerk te
  versturen
• Hypertext Markup Language
• Tags voor de opmaak
• Bijv.
• Lay-out wordt overgelaten aan Browser
• Link Eerste browser HTML editor

ltbodygt lth1gtDit is een koplt/h1gt lt/bodygt
4
HTML voorbeelden

• Van saai
• naar leuk

5
HTML en toen (1)

• Probleem navigatie
• Oplossing Frames

• Probleem controle over indeling pagina
• Oplossing Tabellen

6
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.)

7
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

8
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

9
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/
10
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)

11
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 worden.
• Alle attribuutwaarden moeten gequote worden.
• Het id-attribuut vervangt het name-attribuut.
• Het script-element moet een type-definitie
  krijgen.
• Documenten moet overeenkomstig de XML-regels
  opgesteld worden.
• XHTML krijgen nog enkele verplichte bijkomende
  elementen.

12
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

13
CSS inline stijlen

• Opmaakinformatie voor een afzonderlijk element
• Voorbeeld

ltbodygt lth1 style color blue
font-size 20pt gt Dit is een grote
blauwe kop lt/h1gt lt/bodygt
14
CSS op documentniveau

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

lthtmlgt ltheadgt ltstyle
typetext/cssgt h1 font-size 16px
color green p font-size 10px
color 6f2 lt/stylegt lt/headgt
ltbodygt lth1gtDit is een grote groene kop
lt/h1gt ltpgten hier staat wat tekst van
10pxlt/pgt lt/bodygt lt/htmlgt
15
CSS externe opmaakmodellen

• Opmaakmodel in een apart tekstbestand
• Voorbeeld

Html-pagina lthtmlgt ltheadgt ltlink
rel"stylesheet" type"text/css"
hrefmijnopmaak.css"gt lt/headgt
ltbodygt lth2gtDit is een rode kop op een
witte achtergrond lt/h2gt ltpgten hier staat
wat tekst van 12pxlt/pgt lt/bodygt lt/htmlgt
mijnopmaak.css body background-color
white h1, h2 color red p font-size 12px
16
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

17
CSS-sites voorbeelden

• Voorbeelden van CSS XHTML sites

18
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

19
EINDE