Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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