WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.

Presentatie over: "WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003."— Transcript van de presentatie:

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 WWWHistory 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 editorEerste browser HTML editor Dit is een kop

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/ 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: Dit is een grote blauwe kop

14 CSS – op documentniveau Opmaakmodel in het head-gedeelte van een HTML-document Voorbeeld: h1 {font-size: 16px; color: green;} p {font-size: 10px; color: #6f2} Dit is een grote groene kop en hier staat wat tekst van 10px

15 CSS – externe opmaakmodellen Opmaakmodel in een apart tekstbestand Voorbeeld: mijnopmaak.css: body {background-color : white;} h1, h2 {color: red;} p {font-size: 12px;} Html-pagina: Dit is een rode kop op een witte achtergrond en hier staat wat tekst van 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.orgw3c.org CSS/XHTML sites: –Stijlstek.nlStijlstek.nl –alistapart.comalistapart.com –Bitstorm.org (cursus css)Bitstorm.org (cursus css) –saila.com: tables or css?saila.com: tables or css? –webdesign.about.com: avoid tableswebdesign.about.com: avoid tables –thenoodleincident.comthenoodleincident.com –csszengarden.comcsszengarden.com –www.khlim.be : xhtmlwww.khlim.be : xhtml –w3schools.com : xhtmlw3schools.com : xhtml Geschiedenis sites: –webhistory.org : geschiedenis van het webwebhistory.org : geschiedenis van het web –ei.cs.vt.edu : geschiedenis van wwwei.cs.vt.edu : geschiedenis van www Divers: –aboyandhiscomputer.com : slechte websitesaboyandhiscomputer.com : slechte websites Boeken: –Eric Meyer: On CSS –Eric Meyer: CSS Kort en Krachtig –Sybex/Het Beste Boek: HTML

19 EINDE