The Next Generation Webpresentatietechniek nieuwe stijl

Presentatie over: "The Next Generation Webpresentatietechniek nieuwe stijl"— Transcript van de presentatie:

1 The Next Generation Webpresentatietechniek nieuwe stijl
bij Peter Arxhoek Michiel Groeneveld Raph de Rooij Sierd Westerfield Cursus ‘Winst met ICT’ januari 2004 The Next Generation Webpresentatietechniek nieuwe stijl bij Contactgegevens Raph de Rooij E

2 De huidige generatie websites
Zwaar Complex Beperkt (her)bruikbaar Weinig robuust Matig toegankelijk Oorzaken: Toegepaste techniek Visuele vormgeving De huidige generatie websites De huidige generatie websites is complex, zwaar, beperkt (her)bruikbaar, weinig robuust en matig toegankelijk Belangrijke oorzaak is de techniek die wordt gebruikt bij het maken van websites Deze techniek is grotendeels gebaseerd op oude versies van populaire (èn van inmiddels bijna vergeten) browsers en via veel 'trial and error' ontstaan Vorm gaat vaak boven functie

3 Het voorbeeld: www.minvws.nl
oud nieuw Het voorbeeld: Er zijn wel verschillen, maar die zijn klein

4 Is er een verschil? oud nieuw Bush TR 82 (1959) Is er een verschil?
De vernieuwing is te vergelijken met de twee radio’s op deze pagina. De een kwam op de markt in 1957, de ander in 1959 en ze zien er hetzelfde uit. Bush MB 60 (1957)

5 Het verschil: onderhuids
oud: buizenradio Bush TR 82 (1959) nieuw: transistorradio Het verschil: onderhuids Beide radio’s werken hetzelfde: ze ontvangen dezelfde station, het volume is regelbaar etc. Ze hebben dus exact dezelfde vorm en functie. De techniek van beide radio’s is echter volledig verschillend: de radio uit 1957 is een buizenradio, terwijl die uit 1959 een van de eerste transistorradio’s was. Overigens kwam in 1997 een replica uit van de Bush TR82. Deze replica heeft zelfs geen transistors meer, maar maakt gebruik van de huidige generatie readiotechniek, gebaseerd op IC’s. Bush MB 60 (1957)

6 De voordelen Van een ‘next generation’ website
...en van een transistorradio: Relatieve eenvoud van het ontwerp Robuuster Lichter Sneller Goedkoper De voordelen Van een ‘next generation’ website ...en van een transistorradio: Relatieve eenvoud van het ontwerp Robuuster Lichter Sneller Goedkoper

7 Het fundamentele verschil
Oude techniek Inhoud en weergave zijn geïntegreerd Nieuwe techniek Inhoud en weergave zijn strikt gescheiden handheld printer geluid televisie brailleleesregel CSS Weergave ingebed in HTML Het fundamentele verschil Oude techniek: Inhoud en weergave zijn geïntegreerd Nieuwe techniek: Inhoud en weergave zijn strikt gescheiden De weergave is variabel. Daardoor kunnen via één ‘kanaal’ eenvoudig verschillende verschijningsvormen worden ondersteund: Beeldscherm Afdruk op papier Handheld computer Spraak synthesizer Braille leesregel Projectiescherm Televisie zie ook: CSS HTML HTML zie ook:

8 Weergave op papier oud nieuw Weergave op papier
De weergave is geoptimaliseerd voor papier, zonder navigatie-elementen. Let op de rechtrerkant van de ‘oude’ afdruk: deze loopt van het papier af. Daaruit blijkt dat de vormgeving, die is geoptimaliseerd voor weergave op een scherm, maar matig geschikt is voor weergave op papier.

9 Weergave op een ‘handheld’
oud nieuw Weergave op een ‘handheld’ Ook hier blijkt dat de vormgeving, die is geoptimaliseerd voor weergave op een computerscherm, niet geschikt is voor een kleiner beeldscherm. Voorbeeld: Opera SSR

10 De werkwijze Eerst structuur, dan pas weergave
Niet enkel voor populaire browsers Open webstandaarden Toegankelijkheid is uitgangspunt Semantische markup: ‘HTML zoals HTML bedoeld is’ De werkwijze Eerst is de structuur bepaald en daarna pas de weergave Uitgangspunt zijn open webstandaarden in plaats van populaire browsers Controle op juiste toepassing van de webstandaarden (validatie van HTML en CSS) Alleen semantische markup: ‘HTML zoals HTML bedoeld is’ Voldoen aan de toegankelijkheidsrichtlijnen is uitgangspunt bij het ontwerp

11 Het resultaat – voor het project
Beter opdrachtgeverschap: Minder interpretatieverschillen Trial-and-error aanpak deels overbodig Minder fouten Minder verstoring van de planning Het resultaat – voor het project Betere invulling van opdrachtgeverschap; in de opdrachtbeschrijving kan worden gerefereerd aan uitgebreide specificaties Minder kans op interpretatieverschillen bij de uitvoering van de opdracht De ‘trial-and-error’ aanpak wordt deels overbodig Minder fouten, daardoor kleinere kans op problemen bij de implementatie Minder verstoring van de planning

12 Het resultaat – voor gebruikers
60% kleinere omvang = sneller laden Bruikbaar in oude en in nieuwe browsers Toegankelijkheid ('Drempels Weg') Beter bereikbaar bij piekbelasting Het resultaat – voor gebruikers Pagina’s lader sneller door de kleinere omvang (60% reductie voor de VWS-site) De site is volledig bruikbaar in oude en in nieuwe browsers Bij piekbelasting blijft de site langer bereikbaar (lagere serverload) De site is gemakkelijk toegankelijk te maken (conform de W3C-eisen) Het ministerie van VWS is de opdrachtgever van ‘Drempels Weg’, dus dit is ook om deze reden een belangrijk punt

13 Het resultaat – voor het beheer
'Look-and-feel' eenvoudig aanpasbaar Hergebruik (intranet, syndicatie, SMS) Geoptimaliseerd voor zoekmachines Kleinere pagina's = minder bandbreedte Toekomstvast: Standaarden (zijn uitgebreid gedocumenteerd) Eenvoudiger overdraagbaar Migratieproblemen worden voorkomen Het resultaat – voor het beheer De look-and-feel is sneller en eenvoudiger aan te passen Hergebruik is eenvoudiger realiseerbaar (intranet, syndicatie, SMS-service) De site is beter te ‘spideren’ door zoekmachines Betere structuur en ‘content-code ratio’ leiden tot hogere positie in zoekmachines De kleinere omvang van de site kost minder bandbreedte Toekomstvast: De gebruikte techniek is uitgebreid gedocumenteerd door het W3C De techniek is eenvoudiger over te dragen aan interne of externe technische ontwikkelaars Toekomstig hergebruik van de inhoud is eenvoudiger door de scheiding en de uniforme aanpak

14 Is www.minvws.nl perfect?
Het kan uiteraard altijd beter: voorbeeld: vergroting van het lettertype in de browser Mozilla Aanpassing is echter eenvoudig vanwege de scheiding van inhoud en vormgeving Is perfect? Het kan uiteraard altijd beter. Eis was dat de ‘look and feel’ van de nieuwe website moest overeenkomen met die van de oude. Dit uitgangspunt zou de oorzaak van het hier getoonde euvel kunnen zijn. Aanpassing is echter eenvoudig vanwege de scheiding van inhoud en vormgeving

15 De nadelen De 'look and feel' in oudere browsers
Ervaring met de nieuwe werkwijze is slechts beperkt voorhanden De innovatie wordt vaak niet als zodanig onderkend of wordt zelfs gebagatelliseerd De nadelen De 'look and feel' is niet gelijk in de wat oudere browsers (de toegankelijkheid is echter geen enkel probleem) Ervaring met de nieuwe werkwijze is slechts beperkt voorhanden De innovatie wordt vaak niet als zodanig onderkend of wordt zelfs gebagatelliseerd

16 Meer informatie www.minvws.nl/organisatie/site/meermetminder.asp
Meer informatie