Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download PowerPoint-presentatie
Document related concepts
no text concepts found
Transcript
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.:
<body>
<h1>Dit is een kop</h1>
</body>
– 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 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.
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:
<body>
<h1 style= “color: blue; font-size 20pt;” >
Dit is een grote blauwe kop
</h1>
</body>
CSS – op documentniveau
•
•
Opmaakmodel in het head-gedeelte van een
HTML-document
<html>
Voorbeeld:
<head>
<style type=“text/css”>
h1 {font-size: 16px; color: green;}
p {font-size: 10px; color: #6f2}
</style>
</head>
<body>
<h1>Dit is een grote groene kop </h1>
<p>en hier staat wat tekst van 10px</p>
</body>
</html>
CSS – externe opmaakmodellen
•
•
Opmaakmodel in een apart tekstbestand
Html-pagina:
Voorbeeld:
<html>
<head>
<link rel="stylesheet" type="text/css" href=“mijnopmaak.css">
</head>
<body>
mijnopmaak.css:
<h2>Dit is een rode kop op een witte achtergrond </h2>
<p>en hier staat wat tekst van 12px</p>
body {background-color : white;}
h1, h2 {color: red;}
p {font-size: 12px;}
</body>
</html>
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:
–
•
CSS/XHTML sites:
–
–
–
–
–
–
–
–
–
•
webhistory.org : geschiedenis van het web
ei.cs.vt.edu : geschiedenis van www
Divers:
–
•
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:
–
–
•
w3c.org
aboyandhiscomputer.com : slechte websites
Boeken:
–
–
–
Eric Meyer: On CSS
Eric Meyer: CSS Kort en Krachtig
Sybex/Het Beste Boek: HTML
EINDE
