Showcase De Amsterdamse Canon

Showcase De Amsterdamse Canon Een kijkje achter de schermen bij de totstandkoming van de centrale Drupal website ter bevordering van het historisch bewustzijn en sociale cohesie in Amsterdam, ontwikkeld door Internet Unlimited, onderdeel van Byelex. Imre Gmelig Meijling 7 April 2009

De Amsterdamse Canon In navolging van de Nationale Canon, is er sinds september 2008 de Amsterdamse Canon, een project op initiatief van de Gemeenteraad van Amsterdam. De canon moet historisch bewustzijn van Amsterdammers en het ‘Wij Amsterdammers’ gevoel onder Amsterdammers vergroten. Het Platform Amsterdam Samen (PAS), onderdeel van de Gemeente Amsterdam, was, samen met Ewoud Poerink van het Instituut voor Publiek en Politiek, verantwoordelijk voor de totstandkoming Amsterdamse Canon. In de zomer van 2008 is uit drie aanbieders gekozen en is Internet Unlimited gevraagd om de website te ontwikkelen. De Canon is een verzameling van 50 'vensters' waarin de geschiedenis van Amsterdam wordt uitgebeeld. Tot aan september 2008 heeft een Canoncommissie, onder leiding van Prof. Dr. Piet de Rooij (hoogleraar Nederlandse geschiedenis aan de UvA) die mede daarvoor een onderscheiding kreeg van burgemeester Job Cohen, de inhoud van de Canon vastgesteld. De website is het centrale communicatie portaal rond de Canon. Op de website zullen de 50 vensters te zien zijn. Ook wekelijkse uitzendingen van AT5 kunnen via de website worden bekeken en krijgen Amsterdammers de mogelijkheid te reageren. Bezoekers kunnen reageren op de vensters en kunnen zelf eenvoudig hun Eigen Canon aanmaken op de website. Tijdens een officiële bijeenkomst in het Amsterdams Historisch Museum is de Canon op ceremoniële wijze overhandigd aan burgemeester Cohen. De website is een spraakmakend voorbeeld van een eigentijdse website ontwikkeld in het populaire content management systeem Drupal. De website heeft een duidelijke rol als community platform. Deze showcase geeft een kijkje achter de schermen van de ontwikkeling van een campagne website die onze Drupal grenzen heeft verlegd.

“Het is een project voor de inwoners van Amsterdam. Dit moet zich vertalen in het visueel ontwerp van de website. Het is een website van Amsterdammers, niet zozeer van de Gemeente Amsterdam.”

2|Pagina

Doelstellingen & Eigenschappen De website moet het historisch bewustzijn van Amsterdammers vergroten en het wijAmsterdammers gevoel versterken. De website moet de centrale rol vervullen in alles wat rond de Amsterdamse canon gebeurt. Dit wordt bereikt door de 50 vensters waaruit de canon bestaat in tekst en beeld te presenteren. Daarnaast dient de website de mogelijkheid te bieden als community met interactiviteit in de vorm van discussie, downloads en een plaats waar mensen een eigen canon kunnen samenstellen.

Doelgroep Alle Amsterdammers, met speciale aandacht voor onderwijs en jongeren.

3|Pagina

Uitgangspunten Uitgangspunt was een website waarbij Amsterdammers zich “Amsterdammers” bij zouden voelen. Een website door en voor de eigen inwoners. Wèl een hoog Amsterdam gehalte, maar niet strict binnen de stijl van Gemeente Amsterdam, welke zij wel zeer strict en consistent heeft vastgelegd.

Stijlgids IAmsterdam is verwant aan de campagne van de Canon om het wij-Amsterdammers gevoel te vergroten. De uitingen welke door de gehele stad groot en zichtbaar zijn uitgevoerd lijken wel wat op de website zoals deze uiteindelijk is geworden. Natuurlijk hebben we de stijlgids van de gemeente Amsterdam bekeken en doorgenomen. Toch hebben we het als een vrijheid ervaren om zonder invloed van stijlgids en huisstijl bewakers een ontwerp te kunnen maken voor zo’n kenmerkend Amsterdams project.

©Enrico Webers - http://www.flickr.com/photos/98564894@N00/469666016 Briefing Een briefing op één enkele A4 vormde het uitgangspunt voor de website. Omdat we goed in staat zijn om aan de hand van een uitgangspunt een webconcept te visualiseren, hebben we in een zeer vroeg stadium een aantal mockups gepresenteerd aan de opdrachtgever.

4|Pagina

Creative brief Een aantal strategische sessies met de opdrachtgever over het concept van het Canon project en de rol van de website resulteerde in een samenbrenging van elementen uit de verschillende mockups en een vervolmaakt ontwerp voor de website welke herkenbaar Amsterdams, maar niet gemeentelijk moest zijn. Hieruit onstond de creative brief welke als leidraad diende voor de creatieve aspecten rond het vervolg van het project.

Drie verschillende mockups voor De Amsterdamdse Canon

5|Pagina

6|Pagina

Concept ontwerpen van De Amsterdamse Canon

7|Pagina

Het Prooces Voorr de uitvoering van v projecten hanteren h we ee en aanpak waa arbij vier mijlpa alen worden bereikt voor de oplevering g van het proje ect, in het Enge els de vier D’s genaamd: g nition (definitie)), Design (ontw werp), Developm ment (ontwikke eling) en Deplo oyment Defin (uitro ol/installatie). Deze D worden pe er onderdeel to oegelicht.

Definition n De definitiefase sta art met de inrich hting van het project, waarbij de invulling va an het ectplan een uitkkomst is. Vrijwe el direct daarna a start het traje ect van beeldvo orming proje van de d inhoud van de opdracht en n de invulling van v de wensen. Func ctionele specificities De fu unctionele speccificaties speelden hierbij een n belangrijke ro ol. Dit documen nt geeft antwoord op de vra aag: “Wat gaan n we maken?”. Verder is hierb bij onder meer opge enomen: •

Informatie e architectuur

•

Website structuur s

•

Contentpllan

•

Functiona aliteiten beschrrijving

•

Rolverdeling, toegangsm model en veran ntwoordelijkhed den van de opdrachtg gever

•

Open pun nten en randvoorwaarden

Website structuur van n de Amsterdam mse Canon

8|Pagina

Technische specificaties Voor de ontwikkelaars, software testing, inrichting van de hosting en toekomstig update management is het van belang om vast te stellen wat de specificaties zijn waarbinnen een project zal worden opgeleverd, zoals hardware en software specificaties, te ondersteunen browsers en resoluties en gebruikte Drupal modules. De Amsterdamse Canon is opgeleverd op een server configuratie met de volgende parameters: •

Intel PE 1950 III Quad Core Xeon E5405

•

4GB (2x2gb Dual Rank Dimms) 667MHz FB

•

146 GB SAS 15k 3.5" HD Hot Plug

•

1024x768 pixels resolutie

•

Internet Explorer 6.x, 7.x, Mozilla Firefox 2.x en 3.x

Elk soort pagina is gebaseerd op een content type. Deze hebben we in de technische specificaties vastgelegd. Hierbij beschrijven we het doel van content type, de invulling, de velden en veldeigenschappen (type, lengte, verplichting, etc.).

Design Bij een campagne georiënteerd project licht de focus veelal op het concept en de visuele uitwerking ervan. Daardoor is de opdrachtgever nauw betrokken bij alles wat zich afspeelt in de Design fase, zo zij dit niet al uit eigen beweging doet. Amsterdam Het Wapen van Amsterdam zijn twee leeuwen aan weerzijde van een schild. De drie kruizen zijn onderdeel van het Wapen van Amsterdam welke je aantreft op allerlei karakteristiek Amsterdamse beelden. Rood is de kleur van Amsterdam. Door het raadplegen van de stijlgids van de Gemeente Amsterdam zonder deze als harde richtlijn te hoeven gebruiken, waren we in staat een visueel ontwerp te creëren welke typisch Amsterdams is, maar niet gedicteerd vanuit de richtlijnen.

Het Wapen van Amsterdam leende zich als design element voor de website. Onder druk werd dit de dag voor de lancering weer verwijderd.

9|Pagina

Idea file Een van de eerste stappen in het design proces is het aanleggen van een idea file. Dit zijn screenshots en voorbeelden van bestaande websites die aansluiten bij het concept of welke de opdrachtgever aanspreken. Ook voor website van de Amsterdamse Canon speelde de idea file een belangrijke rol.

De website van SoulSurvivor diende als inspiratie voor de Amsterdamse Canon

Visueel en Interactie ontwerp De mockups uit de opstartfase zijn als uitgangspunt genomen om een ontwerp te slijpen. Bepaalde elementen uit het ene ontwerp spraken aan en hebben we gecombineerd met elementen uit een ander ontwerp. Na het samensmelten van elementen uit de verschillende ontwerpen en de definitieve keuze voor de stijl en layout van de toekomstige website zijn we de diepte in gegaan om alle onderliggende schermen en stadia te ontwerpen. Eerst als wireframes, daarna als concreet visueel design. Hierbij proberen we altijd zoveel mogelijk te werken met het user centered design principe, waarbij we de raakvlakken met de doelstellingen zoveel mogelijk vergroten.

De website Gemeente Amsterdam en een concept van de Amsterdamse Canon

10 | P a g i n a

Laagdrempelig Nadruk lag op de aansluiting bij doelgroep en de identiteit van het project. Maar ook usability principes hebben een belangrijke rol gespeeld. Immers wanneer je je richt op 70.000 potentiële Amsterdammers, behoren zowel de ICT’ers van AIX als de bakker op de hoek tot de doelgroep. De keerzijde van open-source is dat duizenden ontwikkelaars ieder een eigen benadering kunnen kiezen bij de realisatie van gelijke interactie; De ene oplossing werkt met radio buttons, een andere met een selectbox. Dit fenomeen is onderkend door de Drupal community. Voor een breed uitgezette website als de Amsterdamse Canon speelde dit een rol bij de uitvoering van bepaalde functionaliteiten.

Logo Een project als De Amsterdamse Canon is een begrip geworden. Een project geïnitieerd door de Gemeenteraad, gericht op alle Amsterdammers of zij die een band hebben met de stad, uitzendingen op de Amsterdamse televisiezender AT5 en een samenstelling door een commissie, vraagt om een consistente visuele benadering. Het logo is hierbij het belangrijkste beeldmerk wat ontbrak en waaraan we tussen neus en lippen door vorm aan hebben gegeven. Vensters De canon bestaat uit 50 vensters. Elk venster is een opgestelde tekst, met beeld- en videomateriaal. De 50 vensters vormen het hart van de website. De inhoud van de 50 vensters is samengesteld door een onafhankelijke Canon commissie, onder leiding van Prof. Dr. Piet de Rooij. De inhoud van de vensters is vertrouwelijk behandeld tot op de dag van lancering.

11 | P a g i n a Rembrandt Harmensz. van Rijn. Het korporaalschap van kapitein Frans Banninck Cocq en luitenant Willem van Ruytenburch, bekend als de 'Nachtwacht', 1642. Collectie Rijksmuseum, Amsterdam, inv. nr. SK-C-5

Het beeldrecht van elk van de geselecteerde vensters leverde een aanzienlijke discussie en belasting op het project. Terwijl het grootste gedeelte van de beelden tot het publiekelijk erfgoed behoren, moesten er relatief hoge kosten worden gemaakt en heen- en weer worden gemaild voor vrijgave van het beeldmateriaal. Daarnaast werd het verzoek neergelegd om de beelden te beschermen tegen printen, downloaden en andere vormen van bescherming. Een verzoek wat voor internet begrippen zeer moeilijk in te willigen is. We hebben wel een aantal technische maatregelen genomen die het de meeste bezoekers zal belemmeren de beelden te downloaden of te kopiëren. Daarnaast is de disclaimer minutieus samengesteld en is elk beeld voorzien van een eigen copyright statement.

Development De Amsterdamse Canon is ontwikkeld op basis van het populaire content management systeem Drupal, versie 5. Er is een enorme hoeveelheid aan functionaliteiten voor Drupal. Dit komt vooral door een grote schare van ontwikkelaars die er voortdurend functionaliteiten voor maken, welke als modules (ook wel Contrib Modules genoemd) kunnen worden ingeplugd. Drupal 6 was reeds uitgebracht maar een aantal belangrijke modules als Views, CCK, Panels en Advanced Profile Kit had op dat moment nog geen (stabiele) Drupal 6 versie. De ontwikkeling van de website bood ons twee uitdagingen: Het ontwikkelen van de specifieke functionaliteiten die niet (out-of-the-box) bestonden Het themen van de website zodat deze aansloot bij de campagne en een laagdrempelig, consistent platform tot resultaat zou hebben Tijdlijn De tijdlijn toont de 50 vensters op een interactieve manier, in chronologische volgorde. Hiertoe hebben we in eerste instantie gebruik gemaakt van het SIMILE Timeline project (http://www.simile-widgets.org/timeline/) van de Massaschussetts Institute of Technology (MIT). Van deze javascript library bestond destijds een Drupal 4.7 versie, deze hadden we toen zelf omgebouwd naar Drupal 5. Echter tijdens het ontwikkelen gaf de klant aan dat de standaard SIMILE layout niet voldeed aan hun verwachtingen. Ze hadden liever een timeline waarbij alle evenementen als een “filmstrip” achter elkaar worden weergegeven. Omdat de SIMILE timeline module al reeds was ingebouwd besloten we om de layout van deze library om te bouwen naar de wensen van de klant. mijnCanon Om de betrokkenheid van Amsterdammers te vergroten, kunnen zij registreren en een eigen Canon aanmaken. Deze bestaan uit vensters, die ook weer bestaan uit één of meerdere foto’s en een stuk tekst. Een venster kan gaan over een bepaalde periode of een gebeurtenis die iemand heeft meegemaakt.

“De website moet voor een zeer breed publiek toegankelijk zijn. De trouwe dienders van de stadsreiniging moeten net zo goed in staat kunnen zijn hun canon aan te maken als de surfende scholieren.”

Elke gebruiker kan zijn of haar profiel invulling geven en vensters aanmaken of publiceren. Hierbij is onderscheid gemaakt tussen personen (persoonlijke canon) of groepen.

12 | P a g i n a

(groepscanon). Een groepscanon is bedoeld voor bedrijven of wijken die met elkaar een eigen canon kunnen samenstellen. Voor het mijnCanon gedeelte hebben we als basis de Advanced Profile Kit module gebruikt. Deze bied als voordeel dat je een node als profiel kan gebruiken. Het voordeel van het werken met nodes is dat er binnen Drupal veel meer modules bestaan om te werken met nodes dan met user profielen. Hierdoor was het mogelijk om meer standaard modules te gebruiken.

Voor het maken van venster bij een persoonlijke canon hebben we gebruik gemaakt van de Node family module. Deze module creëert relaties tussen nodes. Tijdens de ontwikkeling van de Amsterdamse Canon was de kwaliteit van de verschillende node relatie modules echter nog vrij slecht. In onze situatie waren er een paar requirements voor de relatie tussen het gebruikers profiel en de vensters behorende bij dit profiel: •

Bij het verwijderen van het profiel moeten ook de vensters verwijderd worden.

•

Bij het (de)publiceren van het profiel moeten ook de vensters ge(de)publiceerd worden.

•

Publiceren van het profiel is alleen mogelijk als er een minimum aantal vensters zijn.

•

Er is een maximum aantal vensters bij een profiel.

Voor deze requirements bestond op dat moment geen module die stabiel genoeg en alle 4 deze functionaliteiten bevatte. Deze functionaliteiten hebben we toen zelf ingebouwd in de Node family module. Vooral op het vlak van relaties tussen nodes is er nog een hoop werk te verzetten voor Drupal.

13 | P a g i n a

Defender De Amsterdamse Canon spreekt Amsterdammers aan. Het gaat om hun stad. In de campagne werden alle Amsterdammers en verwante bezoekers uitgenodigd om onderbouwde suggesties voor veranderingen te doen, voordat de definitieve samenstelling van de Canon in november 2008 zou worden vastgesteld door de Canon commissie.

Amsterdam is een stad waarbij sociale cohesie een veelbesproken politieke onderwerpen is. In een stad met gevoelige onderwerpen als de thuisploeg Ajax, de moord op Theo van Gogh en het ontbreken van de Olympische Spelen in de 50 vensters van de Canon, is de controle over de reacties een pré. De website is gemaakt om reacties van het publiek te faciliteren. Daarbij werd de Defender een belangrijke functionaliteit om aanvallen van ongewenste reacties snel te kunnen verhinderen. De website werd in de eerste weken overspoeld met reacties van het publiek. Deze werden gemodereerd door de Canon redactie waarbij het Dashboard overzichten toont van binnengekomen reacties en controls om deze snel en efficiënt te bewerken.

“Als je iets maakt over een stad als Amsterdam kun je van alles verwachten. We lokken reacties uit. Dat is de bedoeling. Met een dergelijke campagne website in de spotlights, moeten we wel alle poorten dicht kunnen zetten als Geenstijl langskomt om te ‘stresstesten’.”

14 | P a g i n a

Middels de Auto Assign Role module krijgt elke geregistreerde gebruiker automatisch een bepaalde rol bij registratie. Deze rol heeft rechten om comments te plaatsen en nodes aan te maken. De Defender functionaliteit is een custom stukje code. Wanneer de Defender functionaliteit gebruikt wordt, wordt het recht om comments te plaatsen en nodes aan te passen weggehaald bij de rol die alle gebruikers hebben. Hierdoor kunnen de moderators de site overnemen en alle schadelijke content weghalen zonder dat de gebruikers meteen weer nieuwe content bij plaatsen. Contrib Modules De volgende modules zijn gebruikt bij de totstandkoming van de website van De Amsterdamse Canon: •

CCK

•

Views

•

Webform

•

Panels

•

Pathauto (SEO)

•

Global Redirect (SEO)

•

Path Redirect (SEO)

•

Search 404 (SEO)

•

Mollom (Anti Spam)

•

User cancellation (User Management)

•

Advanced Profile Kit (User Management)

•

Advanced User Management (User Management)

•

Node Family, customized (User Management)

•

Embedded Media Field (Media management)

•

Image Field (Media management)

•

Image Cache (Media management)

•

Dynamic Views (voor de vensters pagina)

Custom Modules Naast de Contrib Modules hebben we een aantal functionaliteiten zelf als modules moeten ontwikkelen: •

Shadowbox

•

Defender (Reactie moderatie)

•

Contenttype buttons (verbergen van de preview button en toevoegen van een cancel link)

15 | P a g i n a

Theming Drupal formulieren zijn vooral functioneel. Het concept van Drupal forms maakt een cancel knop overbodig maar dit blijkt voor veel gebruikers verwarrend te zijn. Form theming is een discipline die we vanuit het Amsterdamse Canon project nu standaard doorvoeren. Met een hoge concentratie aan forms binnen de website hebben we belangrijke forms omgezet naar consistente, laagdrempelige interactiemomenten. Drupal heeft standaard een aantal opties voor webformulieren. We hebben dit afgevangen in een template file die ook meteen gestyled kon worden. Met deze code worden overbodige knoppen niet getoond en wordt de mogelijkheid toegevoegd om af te breken middels een Cancel link:

[