The Next Generation Webpresentatietechniek nieuwe stijl bij www.minvws.nl Peter Arxhoek Michiel Groeneveld Raph de Rooij Sierd Westerfield Cursus ‘Winst met ICT’ januari 2004 The Next Generation Webpresentatietechniek nieuwe stijl bij www.minvws.nl Contactgegevens Raph de Rooij E raph@dds.nl

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

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

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)

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)

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

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: www.w3.org/TR/REC-CSS2/media.html#media-types CSS HTML HTML zie ook: www.w3.org/TR/REC-CSS2/media.html#media-types

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.

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

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

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

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

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

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 www.minvws.nl 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

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

Meer informatie www.minvws.nl/organisatie/site/meermetminder.asp www.webstandards.org/learn/reference/web_standards_for_business.html www.csszengarden.com www.raph.nl/toegankelijkheid/referentiebrowsers.shtml Meer informatie www.minvws.nl/organisatie/site/meermetminder.asp www.webstandards.org/learn/reference/web_standards_for_business.html www.advies.overheid.nl/thenextgeneration www.advies.overheid.nl/referentiebrowsers www.csszengarden.com