Steven Troch. Website voor het OCMW van Niel. Promotor: prof. dr. ir. Wilfried Philips Begeleider: Rik Bellens

Transcriptie

1 Steven Troch Website voor het OCMW van Niel Promotor: prof. dr. ir. Wilfried Philips Begeleider: Rik Bellens Masterproef ingediend tot het behalen van de academische graad van Master in de toegepaste informatica Vakgroep Telecommunicatie en informatieverwerking Voorzitter: prof. dr. ir. Herwig Bruneel Faculteit Ingenieurswetenschappen Academiejaar

2 1

3 DANKWOORD Een jaar geleden was internet voor mij een handig en niet te missen medium waar ik informatie kon afhalen. Ik had mijn adres, kon chatten, zocht allerlei documentatie op, maar zelf dingen aanbieden op het net? Daar had ik totaal geen kaas van gegeten. Ik zou niet geweten hebben hoe ik hieraan moest beginnen. Vandaag, een jaar later leg ik de laatste hand aan mijn Masterproef waarvoor ik een website ontwikkeld heb. Zelf ontwikkeld hé! Een informatieve en voor zover mogelijk dynamische website. Wel leuk om te zeggen. Zeker omdat ik helemaal van nul ben moeten beginnen. Maar een masterproef of website voor een masterproef maak je natuurlijk niet alleen. Zonder de hulp van mijn begeleider Rik Bellens had ik misschien hoogstens een eenvoudige html-website kunnen maken, waarbij ik alleen maar fier kon zijn omdat ik wist welke tags ik moet gebruiken om links en anchors aan te maken. Het had wat flauwtjes geweest. Rik heeft met leren werken met het Content Management System Drupal. Hét mirakel voor de internetdummy van deze tijd! Zo werd het voor mij mogelijk om de site voor deze masterproef te maken. Ik kon met al mijn vragen over de website bij Rik terecht en daar ben ik hem heel dankbaar voor! Het is leuk om een website te maken, maar als je niet weet waarover of voor wie, dan zou het maar stom zijn. Daarom zou ik graag het bestuur van het Nielse OCMW bedanken omdat ze mij de kans gegeven hebben om hun website te ontwerpen. Ik hoop dat het een handige informatietool voor hen wordt. Tot slot zijn er de mensen die altijd voor je klaarstaan en die me ook tijdens de opbouw van deze masterproef met raad en opbouwende kritiek hebben bijgestaan. Dit zijn in de eerste plaats mijn ouders en mijn vriendin, maar ik mag zeker Wim Hendrickx niet vergeten voor al die keren dat ik iets verkeerd gedaan had en dat hij me uit de nood geholpen heeft. Aan allemaal: nen dikke merci! Steven Troch 2

4 INHOUD Samenvatting 8 1. Inleiding Probleemstelling Doelstellingen Toegankelijkheid Persoonlijke informatie doorsturen Documenten uploaden Ontwikkelingsproces website PHP-taal Drupal Drupalbeheer Inhoudelijk beheer Inhoud Inhoudstypes Instellingen voor inzendingen Reacties Webformulieren Site-constructie Contactformulier Interface vertalen Menubeheer Modulebeheer Templates Gebruikersbeheer Gebruikers Gebruikersinstellingen Nodeaccess Rollen 22 3

5 Toegangsrechten Toegangsregels Rapporten Site-instellingen Toegevoegde modules Tiny Tiny MCE GCal Events Poormanscron Google Maps Location User Login Bar Webform Advanced Help JQuery Menu Author Contact Beveiliging inhoud Private Private Upload Node Access Cascading Style Sheets Een introductie Stylesheet Selector Stijldeclaratie Div-element Span-element CSS aanpassen voor OCMW-website Formaat Kleur en vorm Huisstijl OCMW Less is more Afgelijnde vormen Foutjes in stylesheets Het resultaat 43 4

6 6. Doelstellingen behaald? Doelstelling: toegankelijkheid Beheerderszijde Bezoekerszijde Doelstelling: informatie doorsturen Doelstelling: documenten downloaden Conclusies Handleiding Voorwoord Stijlregels Lettertype Gewone tekst Hoofdtitel Tweede titel Derde titel Links met extra uitleg Links in tekst Contactinformatie Paragrafen Inhoud Blok of pagina Blokkenbeheer Blokken slechts op bepaalde pagina s weergeven Enquête Enquête aanmaken Enquête als blok Enquête bewerken Resultaten enquête Pagina Pagina aanmaken Pagina bewerken Verhaal Webformulier 56 5

7 Webformulier aanmaken Naam Type Verplicht Handelingen Formulier bewerken Titel View Handelingen Inhoud verwijderen Bestanden uploaden Zonder beveiliging (voor iedereen toegankelijk) Beveiligde bestanden (toegankelijk onder voorwaarden) Bestanden beveiligen Bestanden onzichtbaar maken Nodes beveiligen Nodes aanmaken voor bepaalde soorten gebruikers Gebruikersbeheer Toegangsrechten Een nieuw soort gebruiker toevoegen Een nieuwe gebruiker toevoegen Rapporten URL-aliassen aanmaken Tiny Tiny MCE Betekenis van de knoppen Afbeelding invoeren Allignment Dimensions Vertical space en horizontal space Border Link invoeren Target Anchor aanmaken Verwijzen naar anchor binnen de pagina Verwijzen naar anchor op andere pagina Tabellen maken 73 6

8 Paginabreak instellen Agendablok Agendapunten toevoegen Referentielijst 75 7

9 SAMENVATTING De lokale OCMW-afdeling van de gemeente Niel wil de bevolking kunnen informeren met behulp van een eigen website. Deze website moet aan drie belangrijke basisvoorwaarden voldoen. Ten eerste moeten de websitebezoekers de informatie op een eenvoudige manier kunnen terugvinden. Ten tweede moet er een vorm van E-Govrnment mogelijk zijn. Dit wil zeggen dat er een interactie moet mogelijk zijn tussen de personeelsleden van het OCMW en de websitebezoeker ( s, online formulieren). Het OCMW-personeel moet ook de mogelijk krijgen om beveiligde documenten op de website te plaatsen en deze documenten ook te kunnen downloaden. Ten derde moet ervoor gezorgd worden dat het OCMW-personeel de website op een eenvoudige manier kan beheren. Deze mensen hebben hier vaak niet de juiste opleiding voor gekregen. Vandaar dat er een gebruiksvriendelijke manier moet gevonden worden om de website up-to-date te houden. Deze derde basisvoorwaarde wordt vervuld door gebruik te maken van een Content Management System (CMS). Hierdoor wordt er een dynamische website gecreëerd waarop bepaalde informatie automatisch vervangen wordt, zonder dat de broncode moet worden aangepast. Zo worden bijvoorbeeld agendapunten automatisch van de website verwijderd als ze niet meer van toepassing zijn. Voor de OCMW-website werd er voor het CMS Drupal gekozen. Dit is momenteel het meest gebruikte gratis CMS ter wereld. Doordat Drupal een groot publiek bereikt dat ook mee aan de verdere uitbouw van dit CMS werkt, zijn er ontzettend veel toepassingen mogelijk die zelfs nog dagelijks uitbreiden. Drupal werkt op basis van nodes (inhoud) en modules. Deze modules zijn kleine programmatjes die ervoor zorgen dat de kernfunctionaliteiten van Drupal functioneren. Enkele voorbeelden van zulke modules zijn: TinyMCE (biedt een eenvoudige tekstverwerker aan), GCal events (biedt een dynamisch agendablok aan) en Webform (maakt het mogelijk om online invulformulieren aan te maken). Deze bestaande modules maken het de websitebeheerder ontzettend eenvoudig om de website up-to-date te houden. Zonder enige PHP-kennis kunnen er nieuwe pagina s, webformulieren of agendapunten worden aangemaakt. De tweede basisvoorwaarde houdt een vorm van E-Govrnment in. Hierdoor kunnen websitegebruikers bepaalde zaken zoals het invullen van formulieren doen via de website en zich zo een verplaatsing naar de OCMW-burelen uitsparen. Dankzij de Webform-module werden er een aantal formulieren op de website geplaatst die inderdaad tijdsbesparend zijn voor de OCMW-klanten en personeelsleden. Er kan nu specifieke informatie of financiële steun aangevraagd worden doormiddel van een online formulier in te vullen. De ingezonden formulieren worden automatisch doorg d naar het bevoegde OCMW-personeel en omgezet in een Excel-bestand, waardoor er 8

10 een snelle verwerking mogelijk is. Drie andere modules Private, Private Upload en Node Access voorzien het tweede luik van deze basisvoorwaarde. Deze modules maken het de personeelsleden van OCMW mogelijk om beveiligde documenten op de website te plaatsen. Beveiligde documenten zijn documenten die alleen bekeken of geraadpleegd kunnen worden door websitebezoekers die voldoende toegangsrechten bezitten. De eerst vernoemde basisvoorwaarde is ook de meest logische. De website biedt de bezoekers op een eenvoudige wijze alle nodige informatie aan. Bezoekers van alle leeftijden en opleidingscategorieën zouden in staat moeten zijn om al het nodige terug te vinden op de website. Hiervoor werd er voor een overzichtelijk en eenvoudig template gekozen. Het zijn niet de prulletjes die tellen voor deze website, maar het gebruiksgemak. Om het gebruiksgemak nog verder te optimaliseren werden er ook aanpassingen gedaan in het CSS-bestand van de template. In het CSSbestand worden alle opmaakvoorwaarden van de website beschreven. Door het aanpassen van kleurenpaletten, afmetingen, link-instellingen werd de website steeds overzichtelijker. Los hiervan staat de belangrijkste tool die ervoor zorgt dat de gebruikers alle informatie snel terugvinden, namelijk de zoekfunctie. Deze zoekfunctie wordt gegenereerd door een module, die de site doorzoekt na het invoeren van een trefwoord. Alle doelstellingen die door het OCMW van Niel werden opgelegd werden behaald. Er werd een informatieve website gecreëerd die eenvoudig te onderhouden is door personeelsleden met de juiste toegangsrechten. Dankzij het dynamische karakter van de website blijft de vluchtige informatie up-to-date en is er interactie mogelijk tussen het OCMW-personeel en de websitebezoekers. 9

11 1. INLEIDING Exact een jaar geleden diende ik mijn Masterproef in als sluitstuk van mijn opleiding Master in de Communicatiewetenschappen. Zoals dit waarschijnlijk bij elke masterproef het geval is kostte dit bloed, zweet en tranen, maar ik was er trots echt trots op. Ik had laten zien tot wat ik in staat was na vier jaar aan de universiteit. En was eigenlijk wel blij dat het achteraf bekeken allemaal toch wel vlotjes gegaan was. Dit jaar verliep het allemaal wat moeilijker. Ik had meer moeite om de lessen te volgen, goede resultaten zouden uitblijven en uiteindelijk zou ik zelfs niet aan alle examens deelnemen. Jammer, maar soms moet je durven toegeven dat je ergens niet zo goed in bent. Gelukkig had ik wel nog wat karakter en moest en zou ik alles uit dit jaar halen wat er voor mij uit te halen viel. Dit alles is terug te vinden in de masterproef die nu voor u ligt en op de website of Dit zijn de bewijzen dat ik toch heel wat heb bijgeleerd. Het is niet allemaal zeer diepgaand of theoretisch, maar het is een mooie basis waar ik in de toekomst verder op kan bouwen. Want het internet is nu eenmaal het medium van de toekomst en vandaag. Een eigen website wordt steeds meer als een basisvereiste gezien voor organisaties, verenigingen of overheidsdiensten. Doormiddel van enkele klikken op de muis kan de websitebezoeker alle informatie verzamelen die hij nodig heeft en zelfs in contact treden met de betreffende organisatie. De lokale OCMW-afdeling van de gemeente Niel zag ook de noodzaak in om vertegenwoordigd te zijn op het internet met een eigen website. Deze website moet wel aan een aantal doelstellingen voldoen zodat de kwaliteiten van het internetmedium optimaal benut kunnen worden. In de eerste plaats moet de website overzichtelijk zijn. Men moet alle informatie eenvoudig kunnen terugvinden en er moet een zoekfunctie aanwezig zijn. Er moet interactie mogelijk zijn tussen de websitebeheerder en de bezoekers. Een derde belangrijk punt is dat de website zo dynamisch mogelijk moet zijn. Verouderde informatie zoals evenementen moet automatisch kunnen verdwijnen zonder telkens aanpassingen te moeten doorvoeren in de html-code. Een vierde doelstelling is dat de leden van de OCMW-raad documenten op de website kunnen plaatsen en raadplegen, zonder dat deze door gewone websitebezoekers bekeken kunnen worden. Tot slot moet de website beheerd kunnen worden door mensen die geen ervaring hebben met websitebeheer. Deze doelstellingen laten direct de keuze vallen op het gebruik van een Content Management Systeem (CMS). Hierdoor wordt het zowel de websiteontwikkelaar als de websitebeheerder eenvoudig gemaakt om te werken met een dynamische website. Voor de OCMW-website viel de 10

12 keuze op Drupal. Een CMS dat werkt op basis van PHP-code en MySQL. Doordat Drupal werkt met behulp van modules is het mogelijk om functies aan de website toe te voegen zonder enige PHPkennis. Het lijkt er dus op dat Drupal alle troeven in handen heeft om internetdummy s zich thuis te laten voelen in het websitebeheer. Het doel van deze masterproef is om alle vooropgestelde doelstellingen die zijn terug te vinden in 3. Doelstellingen in te vullen. Hoe dat gebeurt wordt verder beschreven in deze tekst. 11

13 2. PROBLEEMSTELLING Het OCMW - of voluit Openbaar Centrum voor Maatschappelijk Welzijn heeft als doel het welzijn van alle hulpbehoevende burgers te verbeteren. Ze staan klaar voor jong en oud, rijk of arm, Belg of allochtoon. Iedere burger die nood heeft aan hulp omringen zij met de gepaste zorgen. Het OCMW vervult dus voornamelijk een sociale opdracht in de maatschappij. Het ziet erop toe dat iedereen kan genieten van de sociale grondrechten zoals: goede gezondheidszorgen, een goede huisvesting, voldoende levensmiddelen. Het hoofddoel van het OCMW is om alle burgers zich te laten integreren in de maatschappij. Om deze taak te kunnen vervullen moet men de bevolking goed kunnen informeren. Het internet speelt hier de dag van vandaag een steeds grotere rol in. Dit is ook de lokale OCMW afdeling van de gemeente Niel niet ontgaan. De inwoners van deze gemeente worden voornamelijk via gedrukte media zoals folders en welzijnsgids op de hoogte gebracht van de sociale diensten waarop ze beroep kunnen. Deze informatie is wel correct, maar heeft enkele grote nadelen. Een folder die in de brievenbus wordt gedeponeerd durft wel eens verloren raken waardoor de hulpbehoevenden niet de juiste informatie bezitten wanneer ze er behoefte aan hebben. Een tweede probleem is dat sommige informatie gedateerd of vluchtig is. Het OCMW kan moeilijk voor elke verandering die er optreedt een nieuwe folder of welzijnsgids uitbrengen. Een derde nadeel van de gedrukte informatiebronnen is dat het versnipperd is. De informatie kan in verschillende folders staan, maar welke is de juiste? Vandaar dat het bestuur van deze lokale OCMW afdeling op zoek is naar een medium waarmee ze de bevolking direct en volledig kunnen informeren. Wanneer er aan een medium gedacht wordt waarmee er op een directe en volledige manier kan geïnformeerd worden denkt men direct aan het internet. Dit medium heeft alle troeven in handen die de gedrukte media niet bezitten. De informatie kan niet per ongeluk verloren raken, maar kan telkens opnieuw opgevraagd worden. Omwille van het feit dat het eenvoudig is om oude informatie te wissen of om nieuwe inhoud toe te voegen zal het internet in de toekomst een belangrijk medium worden van het OCMW om de burgers in te lichten. Het internet heeft ook wel enkele nadelen. Voor de bezoeker van een website is het eenvoudig om informatie op te vragen, maar de informatie moet ook nog op de website kunnen geplaatst worden door OCMW-medewerkers, die vaak niets van deze technologie afweten. Hierdoor heeft men behoefte aan een website waar men op een eenvoudige en overzichtelijke manier informatie van kan afhalen, maar evenzeer een website waaraan men als het ware in een handomdraai nieuwe inhoud kan toevoegen of oude inhoud kan wijzigen. 12

14 3. DOELSTELLINGEN De website moet voldoen aan drie basisvereisten. In de eerste plaats moet hij informatie aanbieden die toegankelijk is. Ten tweede moeten de bezoekers persoonlijke informatie kunnen doorsturen doormiddel van online invulformulieren. En tot slot moet de mogelijkheid bestaan voor geverifieerde bezoekers om geheime documenten op te vragen. In de volgende paragrafen worden deze doelstellingen verder uiteengezet TOEGANKELIJKELIJKHEID De website heeft in de eerste plaats als doel de inwoners van Niel te informeren over de diensten van de lokale OCMW afdeling. Alle informatie over hoe men het OCMW kan contacteren, waarvoor men bij het OCMW terecht kan, waar men terecht moet, bij wie men terecht moet, moet op de website aanwezig zijn. Er moet rekening mee gehouden worden dat het OCMW met deze website een zeer gedifferentieerd publiek bereikt dat is opgebouwd uit alle leeftijdscategorieën en lagen van de bevolking. Hierdoor moet erop worden toegezien dat iedereen uit deze brede waaier van bezoekers de mogelijkheid heeft om de gewenste informatie te kunnen vinden. De informatie moet aan een paar inhoudelijke vereisten, maar ook aan een aantal vormvereisten voldoen. Een belangrijke vormvereiste heeft betrekking tot de lettergrootte van de website. Er moet voor gezorgd worden dat de inhoud goed leesbaar is voor oudere website bezoekers, maar tegelijkertijd moet er wel een soort consensus bereikt worden waardoor de jongere bezoekers die gewend zijn aan websites met kleinere lettergrootte dit niet als lastig en onoverzichtelijk beschouwen. Een andere vormvereiste is dat de informatie op de website op een eenvoudige en overzichtelijke manier wordt aangeboden. Aansluitend hierop moet er rekening gehouden worden met de inhoudelijke vereiste Heel wat informatie over het OCMW die zelden wijzigt kan geplaatst worden op statische pagina s. Maar er moeten ook toepassingen voorzien zijn die vergankelijke of snel veranderende informatie zoals agendapunten automatisch van de website verwijderen. Het gebruiksgemak van de website moet niet alleen erg hoog liggen voor de bezoekers, maar ook voor de beheerders. Zodra de site is afgewerkt zal hij worden onderhouden door het OCMWpersoneel, dat vaak niet de nodige opleiding heeft gekregen voor dit soort van taken. Om het beheren van de site eenvoudiger te maken moeten er allerlei functies aanwezig zijn die het schrijven van PHP-code of html-code zo goed als overbodig maken. 13

15 3.2. PERSOONLIJKE INFORMATIE DOORSTUREN Het internet is een belangrijk medium om informatie op te vragen, maar de meerwaarde wordt nog groter als de bezoeker ook informatie kan doorsturen. Op deze manier wordt een verplaatsing naar het OCMW kantoor voor enkele eenvoudige diensten overbodig gemaakt. Vandaar moet de website de mogelijkheid bieden om gegevens van de bezoekers, aanvragen van de bezoekers, van achter hun computer door te sturen naar het OCMW personeel. Zowel voor de bezoeker die een uitstapje uitspaart als voor het OCMW personeel wordt er hierdoor tijd gewonnen. Het personeel hoeft de gegevens niet meer in de computer in te voeren DOCUMENTEN UPLOADEN Er moet een mogelijkheid voorzien zijn voor medewerkers van het OCMW om bepaalde documenten zoals verslagen van vergaderingen te uploaden. Dit systeem heeft als voordeel indien het goed wordt onderhouden dat men steeds de laatste versie van een document kan uploaden. Wanneer er gewerkt wordt met s kunnen er hier fouten door ontstaan. Er moet wel rekening gehouden worden met twee belangrijke vereisten. Ten eerste mogen ongeverifieerde bezoekers geen toegang krijgen tot deze gegevens. Er moet dus voor gezorgd worden dat deze gegevens afgeschermd worden. Ten tweede zijn er verschillende gradaties onder de medewerkers. Bepaalde medewerkers zoals de voorzitter en secretaris moeten de toegang hebben tot alle documenten, maar andere medewerkers zoals andere bestuursleden hebben slechts toegang tot een aantal documenten. Er moet dus rekening gehouden worden met drie verschillende soorten gebruikers. 14

16 4. ONTWIKKELINGSPROCES WEBSITE Een eerste keuze die je moet maken in het ontwikkelingsproces van een website is het programma of de programmeertaal waarmee je wil werken. Een eerste vraag die je jezelf moet stellen is of het om een statische of dynamische website gaat. Op een statische website hoort informatie thuis die zelden of nooit wijzigt. Je voegt alle gegevens in met behulp van html-code. Indien er toch iets aan de website moet worden aangepast, moet je dit in je html-bestanden doen. Voor contactgegevens en openingsuren is dit dus voldoende, maar het is enorm tijdrovend en arbeidsintensief om elke dag de agendapunten of recente nieuwtjes in je html-bestanden bij te werken. Daarom moet er op zoek gegaan worden naar een code die de site dynamisch kan maken. Met andere woorden een code die ervoor zorgt dat bepaalde inhoudelijke aspecten automatisch worden aangepast. Dit brengt ons bij de PHP-taal PHP-TAAL De PHP-taal is een scripttaal die gebruikt wordt om dynamische webpagina s aan te maken. Onder een scripttaal wordt een programmeertaal verstaan die geschikt is om kleine programmatjes te maken die automatisch kunnen uitgevoerd worden. Een van de grote voordelen van de PHP-taal, is dat het een open source taal is. De code is dus vrij te bekijken en te gebruiken. Het is ook een populaire taal die op veel websites gebruikt wordt. De PHP-taal wordt ook vaak gebruikt voor de opbouw van Content management systemen (CMS) (Wikipedia, 2009a) DRUPAL Drupal is vandaag het populairste Content Management System (CMS) dat in omloop is. Een CMS is een softwaretoepassing die het voor mensen met een minimum aan technische kennis mogelijk maakt om een dynamische website te maken. Andere voorbeelden van CMS zijn: Joomla! en Mambo. Voor deze masterproef werd er voor Drupal gekozen omdat dit content management system een grote verspreiding en als gevolg hiervan een grote ondersteuning kent. Reeds honderdduizenden websiteontwikkelaars hebben hun website ontworpen met dit CMS. Heel wat van de Drupal gebruikers helpen mee aan haar verdere ontwikkeling door bijvoorbeeld nieuwe modules te ontwerpen. Deze modules zijn kleine programmatjes die de kernfunctionaliteiten van Drupal uitbreiden. Hierdoor krijgt Drupal bijna dagelijks nieuwe toepassingen en uitbreidingen, waardoor het veruit het interessantste CMS is om mee te werken (Wikipedia, 2009b). 15

17 Mensen die nog nooit een website hebben gemaakt en voor het eerst met Drupal werken zullen voor een aangename verrassing komen te staan. Drupal verwacht niet van zijn gebruiker dat hij kennis heeft van de PHP-code of html-tags. Het Beheer-gedeelte waarmee de website wordt opgebouwd heeft een heel overzichtelijke interface (Figuur 4.1.) die de gebruiker op weg helpt om alle handelingen te verrichten die nodig zijn voor de opbouw van de website. Figuur DRUPALBEHEER Het beheergedeelte van Drupal is onderverdeeld in vier groepen: inhoudelijk beheer, siteconstructie, gebruikersbeheer en site-instellingen. Het inhoudelijke beheer heeft zoals de naam reeds doet vermoeden betrekking op alle toepassingen die je kan uitvoeren met de inhoud van de website. Onder site-constructie vallen alle vormelijke aspecten van de website zoals lay-out, maar ook de dynamische toepassingen of modules die op de site geïnstalleerd zijn. Het gebruikersbeheer maakt het mogelijk om bepaalde rechten toe te kennen aan gebruikers en deze gebruikers ook aan te maken. Tot slot heb je de site-instellingen waarin je de basisopties van de site kan aanpassen. In de volgende paragrafen worden de vier groepen van het beheergedeelte verder uiteengezet aan de hand van de toepassingen die voor de OCMW-website gebruikt werden. 16

18 INHOUDELIJK BEHEER Via het inhoudelijk beheer kan de beheerder nieuwe inhoud toevoegen en bestaande inhoud bewerken of verwijderen. Dit is mogelijk met behulp van de volgende opties: INHOUD Via de optie inhoud kan je de inhoud die op de website aanwezig is weergeven, aanpassen of verwijderen. De verschillende inhouditems die voor het merendeel uit pagina s bestaan worden in een chronologische lijst weergegeven. Bij elk item staat de titel, de naam van de auteur, de status (gepubliceerd of niet gepubliceerd) en het type inhoud (pagina, verhaal, webformulier, ). Via de optie bewerken kan je de inhoud aanpassen of verwijderen INHOUDSTYPES De inhoud is onderverdeeld in verschillende inhoudstypes of nodes. Tot welk inhoudstype een bepaalde pagina behoort, hangt af van het doel van de inhoud. Voor de OCMW-website werden vier hoofd-inhoudstypes aangemaakt, maar ook enkele inhoudstypes die gebaseerd zijn op het type pagina. Het meest gebruikte type is de pagina. Hiermee wordt er een statische webpagina gegenereerd. Dit inhoudstype is dus handig om informatie op te plaatsen die zelden wijzigt, zoals de openingsuren van het OCMW-kantoor. Een tweede inhoudstype is het verhaal. Dit is ongeveer hetzelfde als de pagina, maar er is een dynamisch aspect aan verbonden. Telkens er een verhaal wordt aangemaakt wordt deze bovenaan de inhoud van de home-pagina toegevoegd. Normaal gezien kunnen de bezoekers ook reageren op een verhaal, door er commentaar aan toe te voegen, maar voor de OCMW-website werd deze toepassing uitgeschakeld. Een derde inhoudstype is de enquête. Dit is een eenvoudig invulformulier dat bestaat uit één enkele vraag. Bijvoorbeeld: Wat vindt u van deze website? De bezoekers kunnen via meerkeuze antwoorden hun mening kwijt over deze vraag en kunnen ook de resultaten van deze enquête bekijken. Het vierde en laatste inhoudstype is het webformulier. Hiermee kunnen vragenlijsten of formulieren aangemaakt worden. De resultaten van de ingevulde formulieren worden automatisch opgeslagen, waardoor gebruikers met de juiste rechten deze gegevens eenvoudig kunnen opvragen. Net zoals dit bij het verhaal van toepassing is wordt er op de home-pagina steeds een verwijzing gepubliceerd naar een nieuw aangemaakt formulier. Dit brengt ons meteen bij het volgende onderdeel van het inhoudelijke beheer. 17

19 INSTELLINGEN VOOR INZENDINGEN De optie Instellingen voor inzendingen bevat een aantal parameters waarmee de beheerder de berichten op de home-pagina kan aanpassen. Deze parameters zijn: het aantal berichten dat er op de home-pagina worden weergegeven en de maximum tekenhoeveelheid waaruit één bericht mag bestaan. Zo kan je er voor kiezen om je hele verhaal op de home-pagina te laten verschijnen, of maar een gedeelte ervan. Via de link Lees verder die onderdaan een onderaan een onvolledig verhaal opduikt word je doorverwezen naar de pagina waar het verhaal effectief gepubliceerd staat REACTIES De toepassingen die het luik Reacties biedt zijn niet echt van toepassing voor de website die voor deze masterproef ontworpen werd. De mogelijkheid voor ongeverifieerde gebruikers om een reactie toe te voegen op een bepaalde pagina of verhaal werd uitgeschakeld. Voor geverifieerde bezoekers blijft deze toepassing wel mogelijk. Zij kunnen indien ze dat wensen hun commentaar neerschrijven over een bepaald artikel en deze commentaar ook publiceren. Via de link Reacties kunnen de beheerders van de website alle reacties die op de site gepubliceerd werden in chronologische volgorde bekijken. Er wordt ook extra informatie over de reacties bij vermeld zoals: het onderwerp, naam van de auteur, verwijzing naar het verhaal of pagina waaraan de reactie gekoppeld is en het tijdstip waarop de reactie gepubliceerd werd. De beheerders van de website beschikken over de rechten om reacties te verwijderen WEBFORMULIEREN Het laatste en tevens belangrijk onderdeel van het inhoudelijk beheer is Webformulieren. Onder deze toepassing vind je alle formulieren terug die op de website gepubliceerd werden plus een aantal functies waarmee de beheerder van de website de formulieren of de ingezonden formulieren kan bewerken. Het menu-onderdeel is opgebouwd uit drie delen: titel, view en handelingen. Bij het onderdeel titel staat de naam van het formulier vermeld. View is het meest uitgebreide onderdeel van de drie. Hier wordt de beheerder heel wat mogelijkheden aangeboden om de resultaten van de door websitebezoekers ingevulde formulieren te bekijken en te bewerken. In de eerste plaats krijgt de beheerder de mogelijkheid om de ingezonden formulieren te bekijken. Indien het formulier werd ingediend door een geverifieerde bezoeker krijgt hij hier de naam van de indiener te zien. Vervolgens wordt ook het tijdstip van indienen en het IP-adres van de indiener weergegeven. Verder kan de beheerder ook statistieken opvragen of een tabel waarin alle antwoorden per indiener worden weergegeven. Een zeer nuttige toepassing is de mogelijkheid om de antwoorden van de ingediende formulieren te downloaden en ze automatisch te laten verwerken in een Excel-bestand. Zo kunnen de resultaten eenvoudig verwerkt worden. 18

20 SITE-CONSTRUCTIE Met het beheeronderdeel Site-Constructie kan je beslissen hoe de site eruit gaat zien en welke toepassingen er allemaal op mogelijk zullen zijn. Net zoals het inhoudelijk beheer bestaat dit onderdeel uit verschillende delen. Een eerste deel omvat het beheer van de Blokken. Hiermee kan de beheerder beslissen welke plaats hij toewijst aan een bepaald blok. Hij heeft hiervoor de keuze tussen: linker zijbalk, rechter zijbalk, inhoud, voet of uitgeschakeld. Wanneer de beheerder een blok op de lijst uitgeschakeld plaatst, verwijdert hij het blok niet, maar het zal niet zichtbaar zijn op de website. Met dit blokkenbeheer wordt grotendeels de lay-out van de website bepaald. Op de OCMW-website zijn volgende blokken geactiveerd: menu s (Beheerder, Download Bestanden, Diensten), GCal Ecents (agenda), Navigatie (om de website te beheren), Author Contact, Google Map Static Image Block en User Login Bar. Met behulp van het blokkenbeheer kunnen ook de standaardinstellingen van alle blokken aangepast worden CONTACTFORMULIER Via de optie Contactformulier kan de beheerder instellen aan wie de contactmails die via de website verstuurd worden bezorgd worden. Er kan ook voor de optie gekozen worden om een standaardmail te versturen naar de verzender van de contactmail. Dit doet de beheerder door een standaardtekst in te vullen in het daartoe voorziene kader INTERFACE VERTALEN Dat Drupal een wijdverspreid gebruik kent in verschillende landen wordt bevestigd door het groot aantal talen waarin het programma reeds verschenen is. De beheerder kan zelf kiezen in welke taal hij Drupal op de server installeert. Voor de website van het OCMW werd er uiteraard gekozen voor de Nederlandse versie. De optie Interface Vertalen houdt de statistieken bij van het aantal geïnstalleerde modules waarvoor er vertalingen beschikbaar zijn in de gewenste taal, Nederlands in dit geval. Indien gewenst kunnen er ook nog andere talen aan toegevoegd worden MENUBEHEER Het menubeheer bevat een lijst van alle menu s die op de site geïnstalleerd zijn en biedt de mogelijkheid om de standaardwaarden van deze menu s aan te passen of om nieuwe menu s aan te maken. De taak van een menu bestaat er uit om de bezoekers doorheen de website te navigeren. Er zijn verschillende soorten menu s. Enerzijds zijn er de Primaire links en de Secundaire links die als standaardblokken worden meegegeven en bovenaan de website worden weergegeven. Anderzijds 19

21 zijn er de menu s die de beheerder zelf kan aanmaken. Deze menu s die blokken vormen worden meestal in de linker- of rechterkolom aangebracht. Om een menu aan te maken volstaat het om op de link Menu Toevoegen te klikken. Hierdoor verschijnt er een venster waar de naam van het menu en een eventuele beschrijving ervan kan worden ingevoerd MODULEBEHEER Een module is een programma met een specifieke functie of taak dat meestal in PHP-code geschreven is. Er wordt onderscheid gemaakt tussen drie soorten modules. In de eerste plaats zijn er de Verplichte kernmodules. Deze modules zijn in het standaardpakket van Drupal aanwezig en worden dus sowieso geïnstalleerd. Er kunnen zes kernmodules onderscheiden worden. De eerste is de waakhondmodule. Deze module verzamelt alle informatie over het systeem en bewaart dit in een logboek. Hierdoor kan een beheerder die over de juiste toegangsrechten beschikt deze informatie nakijken. Dankzij deze module kunnen eventuele fouten eenvoudig worden opgespoord (Garrels, 2009a). Een tweede module is de blokmodule die ervoor zorgt dat inhoud op bepaalde plaatsen van de website kan worden weergegeven. Beheerders beschikken over de mogelijkheid om zelf blokken aan te maken, maar meestal worden ze gegenereerd door andere modules (Garrels, 2008). Als derde komen we uit bij de filtermodule. Deze module laat de beheerder toe invoerformaten in te stellen waarmee tekst op de site onder andere doormiddel van inzendingen kan worden ingegeven. Er kan bijvoorbeeld voor gekozen worden om fouten in de HTML-code weg te filteren (Garrels, 2009b). De vierde kernmodule is de node-module. Alle inhoud die op de website verschijnt wordt onderverdeeld in een node. Het is de taak van de node-module om al deze informatie te verwerken. Dit kan gaan over pagina s, verhalen, webformulieren, Elke webpagina die er wordt aangemaakt krijgt een nodenummer mee. Op deze manier wordt de pagina geadresseerd. Door het nodenummer in te vullen achteraan de URL van de website kom je op de pagina terecht die aan het nodenummer verbonden is (Garrels, 2009c). De voorlaatste kernmodule is de systeemmodule. Deze module zorgt ervoor dat bepaalde ingestelde taken automatisch worden ingevoerd. Dit kan gaan over het updaten van de cron of het opslagen van een pagina in de cache (Garrels, 2009d). Als laatste is er de user module die alle taken onderhoudt die te maken hebben met de gebruikers van de website. Dit houdt ondermeer de toegangscontrole in, maar ook het aanmaken, bewerken en verwijderen van gebruikers (Garrels, 2009 e). Naast de kernmodules zijn er ook de optionele kernmodules. Deze worden ook standaard bij Drupal aangeboden, maar de beheerder kan zelf kiezen of hij deze modules al dan niet gebruikt. De optionele kernmodules zijn veel talrijker dan de kernmodules. Vandaar zullen deze verder in de tekst 20

22 niet uitvoerig uitgelegd worden, maar worden ze besproken aan de hand van de korte samenvatting die terug te vinden is in het online handboek van Drupal (Garrels, 2009f). Aggregator Verzamelt gesyndiceerde inhoud (RSS-, RDF- en Atom-feeds) Blog Biedt de mogelijkheid tot een regelmatig aangepaste webpagina of blog Blog API Biedt de mogelijkheid inhoud te plaatsen, gebruikmakend van toepassingen die XML-RPC blog-api s ondersteunen. Book Biedt de mogelijkheid aan gebruikers om samen een boek schrijven. Color Gebruikers kunnen het kleurenschema van bepaalde templates aanpassen. Comment Hiermee kunnen gebruikers reageren op of discussiëren over gepubliceerde inhoud. Contact Schakelt het gebruik van persoonlijke of globale contactformulieren in. Drupal Meld deze website aan bij een centrale server en verbeter de classificatie van Drupalprojecten door informatie te versturen over uw geïnstalleerde modules en templates. Forum Vertakte discussies over algemene onderwerpen inschakelen. Help Beheert de weergave van online hulp. Legacy Zorgt voor erfenisverwerkers voor opwaarderingen van oudere Drupal installaties. Locale Biedt de mogelijkheid om de gebruikersinterface naar andere talen dan Engels te vertalen. Menu Biedt beheerders de mogelijkheid het navigatiemenu aan te passen. Path Biedt de mogelijkheid URL-adressen te hernoemen. Ping Informeert andere sites wanneer de site werd bijgewerkt. Poll Hiermee kan op de site gestemd worden over verschillende onderwerpen in de vorm van meerkeuzevragen. Profile Ondersteuning voor instelbare gebruikersprofielen. Search Biedt de mogelijkheid te zoeken naar trefwoorden over de gehele site. 21

23 Statistics Taxonomy Throttle Tracker Upload Toegangsstatistieken van uw site loggen. Biedt de mogelijkheid inhoud in categorieën onder te verdelen. Schakelt het auto-throttlling mechanisme in om overbelasting van de site te voorkomen. Biedt gebruikers de mogelijkheid recente berichten te volgen. Biedt de mogelijkheid bestanden te uploaden en als bijlage aan inhoud toe te voegen. Tabel 4.1. De derde categorie van modules bestaat uit de Toegevoegde modules. Dit zijn modules die door de leden van de internationale Drupalgemeenschap worden aangemaakt en verzamelt op de officiële website van Drupal. Dit wil zeggen dat er dagelijks nieuwe toegevoegde modules bijkomen die elk een specifieke taak hebben. Over de toegevoegde modules die voor de OCMW-website gebruikt werden wordt meer uitleg gegeven in paragraaf 4.4. Toegevoegde modules TEMPLATES Templates of sjablonen worden in CMS gebruikt om een website in een vooropgestelde vorm te kunnen weergeven. Bij de standaard Drupalinstallatie worden enkele templates meegegeven, maar er bestaat ook de mogelijkheid om extra templates te downloaden via de website Bij de keuze van een template moet wel rekening gehouden worden met de functie van de website. Er zijn templates die ontworpen zijn voor informatieve websites. Deze templates beschikken over andere technische mogelijkheden dan templates die specifiek ontworpen zijn voor verkoopwebsites (Garrels, 2009g) GEBRUIKERSBEHEER Onder gebruikersbeheer vallen alle instellingen die te maken hebben met de toegangsrechten van de website. Dit houdt onder andere de toegansregels in, het aanmaken of bewerken van gebruikers en het toekennen van rollen die de gebruikers mogen uitoefenen. Net zoals bij de andere beheersonderdelen is ook dit opgebouwd uit verschillende onderdelen GEBRUIKERS Via dit onderdeel kunnen de beheerders nieuwe geverifieerde gebruikers aanmaken of de status van bestaande geverifieerde gebruikers wijzigen. Hierdoor kunnen deze gebruikers zich op de site in- of 22

24 uitloggen. Om een gebruiker toe te voegen moet er een login naam, adres en wachtwoord opgegeven worden. Er moet ook aangeduid worden welke rol deze gebruiker vervult. Meer hierover in puntje De beheerder heeft ook de rechten om een geverifieerde gebruiker te activeren of te blokkeren. Wanneer een gebruiker geblokkeerd is kan hij zich niet meer inloggen op de website GEBRUIKERSINSTELLINGEN Hieronder worden de standaardinstellingen in verband met de gebruikers beheerd, zoals het opstellen van activeringsmails, verwelkomingmails, NODEACCESS Dit beheerdersonderdeel is niet standaard aanwezig in Drupal, maar hangt samen met de Node access -module. Met behulp van node acces kan je gebruikers toelaten of weigeren op specifieke nodes ROLLEN Elke gebruiker krijgt een bepaalde rol toebedeeld. Per rol worden er toegangsrechten toegekend. Dit houdt dus in dat er rollen zijn die meer toegangsrechten toegekend krijgen dan andere. De rollen die voor deze Drupal-installatie werden aangemaakt, zijn: anonieme gebruiker (weinig toegangsrechten), geverifieerde gebruiker (toegangsrechten hangen af van het soort geverifieerde gebruiker), gewone gebruiker (heeft meer toegangsrechten dan de anonieme gebruiker), beheerder (heeft alle toegangsrechten) TOEGANGSRECHTEN Elk soort gebruiker beschikt over zijn eigen aantal toegangsrechten. Dit onderdeel van het gebruikersbeheer maakt het mogelijk om toegangsrechten toe te kennen aan alle soorten gebruikers voor alle modules die in de Drupal-installatie werden opgenomen TOEGANGSREGELS In dit onderdeel van het gebruikersbeheer kunnen er op basis van een adres rechten worden verwijderd of toegestaan aan één of meerdere gebruikers. 23

25 RAPPORTEN Drupal houdt heel wat informatie bij in verband met het websitebezoek, maar ook omtrent de status van je Drupal-installatie. Indien er updates mogelijk zijn voor modules en templates zal Drupal je daar automatisch van op de hoogte brengen SITE-INSTELLINGEN Aan de hand van dit beheerdersonderdeel kunnen alle belangrijke basisinstellingen van de website aangepast worden. Dit gaat over basisinstellingen van modules, maar ook over andere essentiële informatie zoals de datum- en tijdsweergave TOEGEVOEGDE MODULES TINY TINY MCE De Tiny Tiny MCE module voorziet de website van een eenvoudige tekstverwerker die het de beheerder makkelijker maakt om nieuwe inhoud toe te voegen. De beheerder krijgt een gebruiksvriendelijke gebruikersinterface met iconen voorgeschoteld waarmee hij allerlei lay-out- of invoertoepassingen kan uitvoeren zonder dat hij html-code hoeft te kennen. Zo wordt het voor de beheerders van de ocmw-website die geen kennis hebben van html- of php-code eenvoudig om de website aan te passen of van nieuwe inhoud te voorzien. Figuur 4.2. toont aan hoe eenvoudig Tiny Tiny MCE het maakt voor de beheerders van de website. In het voorbeeld wordt de lay-out opgemaakt van de onderstaande eenvoudige tekst: Tiny Tiny MCE is zeer nuttig omdat je: op een eenvoudige manier je tekst kan aanpassen de tekst vet of cursief kan publiceren links kan toevoegen zonder gebruik te moeten maken van html-tags! 24

26 Figuur 4.2. In het linkse deel van de figuur wordt het invoerveld weergegeven zonder Tiny Tiny MCE. Om je tekst vet of cursief te maken, of om links toe te voegen moet je hier gebruik maken van tags zoals: <strong>, <em>, <a>, Terwijl dit voor het rechtse deel waarbij Tiny Tiny MCE geïnstalleerd is niet nodig is. Door gebruik te maken van de iconen of toetsencombinaties op het klavier worden te gewenste toepassingen direct uitgevoerd. Belangrijk om te melden is dat er voor het invoeren van zulke inhoud twee invoerformaten mogelijk zijn, namelijk: Filtered HTML en Full HTML. Bij Filtered HTML zullen de websites en e- mailadressen die in de ingevoerde tekst vermeld worden direct omgezet worden naar links, maar tags zoals <a>, <em>, <strong>, <cite>, <code>, <ul>, <ol>, <li>, <dl>, <dt> en <dd> moeten nog steeds door de gebruiker ingevoerd worden. Wanneer Full HTML als invoerformaat gekozen wordt, zal dit niet meer nodig zijn. De tags worden dan automatisch toegevoegd GCAL EVENTS De belangrijkste doelstelling van de ocmw-website is om de bezoekers informatie te bieden. Dit kan om statische als om dynamische informatie gaan. Onder statische informatie wordt inhoud verstaan die niet automatisch aangepast wordt. Pagina s met de openingsuren van het ocmw-kantoor en de gegevens van de bestuursleden kunnen hieronder verstaan worden. Deze informatie wordt op de site geplaatst en zal pas veranderen indien de websitebeheerder de inhoud handmatig aanpast. Voor dynamische informatie verloopt dit anders. Er kan doormiddel van php-code een programma geschreven worden dat de gegevens op de website automatisch aanpast. Een voorbeeld hiervan is een agenda. Het zou zeer arbeidsintensief zijn als de beheerder van de website alle agendapunten in html-taal zou moeten invoegen en weer opnieuw verwijderen indien ze niet meer van toepassing 25

27 zijn. Het is veel praktischer om een stukje php-code te schrijven dat gegevens in dit geval agendapunten opvraagt van een databank. Indien aan deze gegevens meta-informatie is toegevoegd zoals de datum waarop het agendapunt betrekking heeft, kan de geschreven php-code ervoor zorgen dat de agendapunten automatisch worden geüpdate op de website. Dankzij GCal Events is het niet nodig om zelf de php-code neer te schrijven voor de dynamische toepassingen, maar wordt dit allemaal voorzien in een module. Zo ontstaat de mogelijkheid om in drie eenvoudige stappen een dynamische agenda op je site te krijgen. In de eerste stap maakt de beheerder een gmail-account aan op de website: Op deze manier verkrijgt de beheerder een e- mailadres waarmee hij op de online agenda van Google kan inloggen. Vanaf het moment dat er is ingelogd op Google Agenda kan de tweede stap in werking treden. Zoals op de linkse helft van figuur 4.3. wordt weergegeven kan de beheerder op zijn account punten toevoegen aan zijn agenda. Indien de beheerder de derde stap die het activeren van het GCal Evenemt-blok op zijn website inhoudt heeft uitgevoerd, zullen de agendapunten automatisch op zijn website verschijnen wanneer vanaf ze in de nabije toekomst zullen plaatsvinden. Als de agendapunten achterhaald zijn, zullen ze automatisch van de site verwijderd worden. Figuur

28 POORMANSCRON Cron is een programma dat ervoor zorgt dat scripts of commando s automatisch worden uitgevoerd op een voorzien tijdsbestek (Wikipedia, 2009c). Het programma zorgt er bijvoorbeeld voor dat alle inhoud die op je website staat op regelmatige basis bijvoorbeeld om het uur wordt geïndexeerd. Standaard zit deze automatische taakuitvoering niet in Drupal verwerkt en moet de cron handmatig worden uitgevoerd. Dit wil zeggen dat wanneer de beheerder nieuwe informatie aan de site toevoegt, hij zelf de cron moet activeren. Als hij dit niet doet zal de nieuwe inhoud op de website niet geïndexeerd worden. Dit zorgt voor problemen indien bezoekers van de website een zoekopdracht willen uitvoeren. Inhoud die niet geïndexeerd is, zal ook niet gevonden worden door de zoekmodule. Vandaar dat op de OCMW-website de Poormanscron module geïnstalleerd werd. Deze module zorgt ervoor dat de cron-taak op regelmatige tijdstippen automatisch wordt uitgevoerd. Zo zal nieuwe inhoud op de OCMW-website ten laatste een half uur na het invoeren geïndexeerd zijn GOOGLE MAPS LOCATION Net zoals de GCal Events is dit een module die beroep doet op één van de vele functies van Google, namelijk Google Maps. De module genereert een blok waarin een map wordt weergegeven. Via de module-instellingen kan de beheerder van de website één locatie uitkiezen, waarnaar op de kaart verwezen wordt. Voor de OCMW-website verwijst de module naar het kantoor van lokale OCMW afdeling van Niel. Dit gebouw ligt wat verdoken achter de straatlijn waardoor het kan voorkomen dat mensen die wel over het adres beschikken van het kantoor, de juiste plek niet weten te vinden. De bezoeker van de website krijgen niet alleen een kaart te zien van de plaats waar het kantoor gevestigd is, maar een satellietfoto. Hierdoor zien ze duidelijk het gebouw liggen. De Google Maps Location module maakt het ook mogelijk om in- of uit- te zoemen op de kaart of foto. Zo kunnen er eventueel routes uitgestippeld worden van bij de bezoeker thuis naar het kantoor van de lokale OCMW afdeling USER LOGIN BAR Een leuke, maar belangrijke aanvulling aan de website, is dat alle geverifieerde bezoekers bij het inloggen persoonlijk worden aangesproken en welkom worden geheten. Met de standaard login- 27

29 module die Drupal aanbiedt is dit niet mogelijk. Hierdoor zorgt de User Login Bar voor een meer persoonlijke behandeling voor de geverifieerde bezoekers WEBFORM De Webform-module zorgt ervoor dat de beheerders van de website op een eenvoudige manier invulformulieren kunnen aanmaken. Dit kan gaan om vragenlijsten, contactformulieren, polls, De opsteller van een formulier moet enkel de namen van de vragen invullen en het soort datatype aanvinken waarin hij de antwoorden wenst te verkrijgen. Deze klik volstaat om de vragenlijst van een antwoordvenster te voorzien ADVANCED HELP De Advanced Help-module is een hulpmiddel voor de websitebeheerder. Deze module gaat op zoek naar het README.txt -bestanden met installatie- of gebruiksinformatie die normaal gezien in elke modulemap aanwezig zijn. De module genereert uiteindelijk een lijst met alle modulenamen waarvan ze zulk bestand gevonden heeft. Hierdoor is de beheerder slechts één klik verwijderd van de belangrijke informatie die hij nodig heeft tijdens het installatieproces van de modules. Zonder de Advanced Help-module zou de beheerder op de server op zoek moeten gaan naar alle afzonderlijke README.txt -bestanden die in de Module-directory aanwezig zijn. Dit zou een tijdrovende onderneming zijn JQUERY MENU De zijmenu s die standaard in het Four Seasons -template verwerkt zitten beschikken over de mogelijkheid doormiddel van een muisklik open te klappen wanneer er onderliggende menuonderdelen weergegeven moeten worden. Het nadeel van deze menu s is dat ze niet de mogelijkheid voorzien om terug dicht te klappen en zodoende de onderliggende menuonderdelen weer te verbergen. Deze tekortkoming wordt weggewerkt door de Jqueru menu -module. Deze module voorziet alle menu-items met onderliggende onderdelen van een knop. Doormiddel van deze knop kan het menu in- of uitklappen zoals wordt weergegeven in figuur

30 Figuur AUTHOR CONTACT Bezoekers moeten de mogelijkheid hebben om hun bedenkingen over de website of eventuele aanvullingen voor de website door te sturen naar de beheerders. Indien dit via mail zou gebeuren zou dit omslachtig kunnen worden. Niet iedereen beschikt over iets als Windows Live Mail waarmee er door één klik op een link direct een mailtje kan gestuurd worden naar de auteur van de websiteinhoud. Daarom is er nood aan een module die het mogelijk maakt om s te versturen van op de website. De module Author Contact maakt dit mogelijk door een blok te creëren waarin elke bezoeker zijn naam, adres en boodschap kan achterlaten. Deze gegevens worden doorg d naar de auteur van de node waarin het blok wordt weergegeven BEVEILIGING INHOUD De volgende drie modules hebben te maken met de beveiliging van de bepaalde inhoud die op de website geplaatst wordt. De OCMW-medewerkers moeten de mogelijkheid krijgen om documenten van de website te downloaden die niet zichtbaar of onbereikbaar zijn voor gewone websitebezoekers. Zowel de module Private, Private Upload als Node Access zorgen ervoor dat dit op een veilige manier kan gebeuren PRIVATE Bij het aanmaken of het bewerken van een pagina bestaat de mogelijkheid om bestanden te uploaden via het onderdeel Bestandbijlages. De private module genereert in dit onderdeel een checkbox die kan aangevinkt worden indien de bestandsbijlagen slechts door bepaalde bezoekers mag bekeken worden (figuur 4.5. groene kader). De module beveiligd dus niet de bestanden, ze zorgt er enkel voor dat bezoekers die niet over de juiste toegangsrechten beschikken de link naar de bestanden niet te zien krijgen. De module zorgt er dus enkel voor dat de bezoekers zonder de juiste 29

31 toegangsrechten niet weten dat er extra documenten zijn toegevoegd aan de pagina. Indien ze de link kunnen achterhalen die verwijst naar de locatie waarop de documenten worden bewaard bijvoorbeeld: - kunnen ze deze toch openen. Hierdoor is er nood aan een aanvullende module die de documenten effectief beveiligt. Figuur PRIVATE UPLOAD De beveiliging van de documenten wordt op zich genomen door de Private Upload -module. In tegenstelling tot de Private -module die enkel de link naar de afgeschermde documenten verwijdert, zal deze module effectief de documenten zelf beveiligen. Ook deze module genereert hiervoor een checkbox, die weergegeven wordt in de blauwe kader op figuur Wanneer deze box wordt aangevinkt zullen de bijlagen beveiligd worden. Dit gebeurt door de bijlagen op te slaan in een beveiligde map. Normaal gezien worden bijlagen opgeslagen in de map sites/default/files, maar beveiligde bijlagen worden opgeslagen in de map sites/default/files/private. Documenten uit deze map kunnen niet opgevraagd worden door websitebezoekers die niet over de juiste toegangsrechten beschikken. Het probleem van de Private -module waarbij het mogelijk was via het kopiëren van de link de beschermde bestanden te bereiken wordt ook opgelost door deze beveiligde map. Bezoekers die niet over de juiste toegangsrechten beschikken en de link zouden kopiëren krijgen het scherm te zien dat in figuur 4.5. wordt afgebeeld. Buiten een checkbox waarmee de bijlagen beveiligd kunnen worden voorziet de module ook nog de mogelijkheid om te kiezen welke gebruikers je precies toelaat tot het beveiligde bestand. 30

32 Figuur NODE ACCESS De vorige twee modules zorgde voor de beveiliging van documenten. Dit wil zeggen dat het tot nu toe onmogelijk was om volledige pagina s of webformulieren te beveiligen. Daarom werd er voor de website beroep gedaan op een derde beveiligingsmodule, Node Access. Zoals in paragraaf werd aangehaald wordt een website in Drupal opgebouwd uit verschillende inhoudstypes of nodes. De Node Acces -module maakt het mogelijk om rechten te weigeren of toe te staan aan de verschillende soorten gebruikers van de website. In figuur 4.7. wordt een voorbeeld gegeven van dit principe. Figuur 4.7. Voor de OCMW-website werd er een Private pagina -node aangemaakt. Op deze manier kunnen pagina s gecreëerd worden waaraan de beheerder bepaalde toegangsrechten aan kan koppelen. Dit kan de beheerder doen in het gebruikersbeheer. Daar wordt een lijst weergegeven van alle nodes die op de website aanwezig zijn. Door het aanvinken van de checkboxen worden bepaalde rechten aan bepaalde gebruikers toegewezen. Een private pagina mag uitsluitend bekeken kunnen worden door de beheerders en gewone gebruikers. Alleen de beheerder heeft het recht om een private pagina te bewerken of te verwijderen. 31

33 5. CASCADING STYLE SHEETS De lay-out van de OCMW werd grotendeels vastgelegd door het template Four Seasons, maar er werden een aantal essentiële veranderingen aangebracht om de website nog aantrekkelijker en gebruiksvriendelijker te maken. Deze veranderingen die het uitzicht van de website drastisch verandert hebben werden aangebracht in het Cascading Style Sheet van het template EEN INTRODUCTIE Cascading Style Sheets of kortweg CSS werden in het leven geroepen om extra lay-outmogelijkheden te creëren voor html-bestanden. Men zat namelijk met het probleem dat websiteontwikkelaars steeds meer eisen oplegden aan de html-code. Omwille van de groeiende populariteit van het internet wou men steeds aantrekkelijkere sites maken. Hierdoor begonnen de webdesigners elk op zich op zoek te gaan naar allerlei mogelijkheden binnen html die ervoor konden zorgen dat hun site een mooiere uitstraling zou krijgen. Doordat iedereen zijn eigen ding deed ontstond er een verbrokkeling van de vormvereisten, met het grote risico dat een website er niet op alle webbrowsers hetzelfde zou uitzien of zelfs niet zou functioneren. Er was dus behoefte aan één duidelijke standaard en dit werden de Cascading Style Sheets (De Jong, 2008a). De CSS werden ontwikkeld door het World Wide Web Consortium (W3C) en worden gebruikt om de opmaak van een hele pagina of reeks webpagina s in één keer te bepalen. Dit kan op twee manieren gebeuren. Ofwel worden de vormvereiste opgegeven in de head-sectie van de html-code van de betrokken webpagina. Ofwel wordt er een apart bestand aangemaakt met.css existentie dat geïmporteerd wordt. Zulk document wordt een stylesheet genoemd. Hierdoor wordt de layout gescheiden van de andere site-instellingen en kunnen de vormvereisten voor meerdere pagina s gebruikt worden STYLESHEET Een stylesheet wordt opgebouwd uit verschillende stijlregels die de vormvereisten die je aan één of meerdere pagina s wil opleggen beschrijven. De stijlregels worden samengesteld uit twee delen: de selector en de stijldeclaratie ( De stijldeclaratie wordt tussen accolades geplaatst, waardoor de stijlregelsyntax er als volgt uitziet: 32

34 Selector { stijldeclaratie } Figuur SELECTOR De selector wordt gebruikt om bepaalde delen van een html-pagina die moeten worden opgemaakt te selecteren. Er zijn verschillende soorten selectors, waarvan er in deze tekst drie worden beschreven. De eerste is de type selector selecteert alle toepassingen van het opgegeven html-element ongeacht de plaats waar dit element voorkomt in de pagina. Zo kan er bijvoorbeeld voor gezorgd worden dat alle woorden die vet gedrukt staan een bepaalde opmaak krijgen door de html-tag <em>, die instaat voor het vet maken van de tekst, als selector te gebruiken: em {stijldeclaratie} Figuur 5.2. Als tweede hebben we de klasse selector die gebruikt wordt om een html-element te selecteren waaraan een klasse-atribuut is toegevoegd. In de praktijk dit er aan de zijde van het html-bestand als volgt uitzien: <p class= groot >Deze tekst wordt groot weergegeven</p> Figuur 5.3. Vermits de selector binnen de paragraaf-tag <p> wordt opgenomen, zal heel deze paragraaf worden opgemaakt zoals beschreven in de bijhorende stijlregel. Deze stijlregel neemt dan volgende vorm aan:.groot {stijldeclaratie} Figuur

35 Een derde selector is de ID selector. Hiermee wordt een specifieke declaratie opgelegd aan één bepaald onderdeel in het html-bestand en kan dus slechts eenmaal gebruikt worden per pagina. In tegenstelling tot de klasse selector die meermaals mag voorkomen (W3C, 2009). De ID selector kan bijvoorbeeld als link gebruikt worden om de opmaak van je zoekvenster vast te leggen: #zoekvenster {stijldeclaratie} Figuur STIJLDECLARATIE De tweede helft van de stijlregel bestaat uit de stijldeclaratie, die op haar beurt ook uit twee delen bestaat: een eigenschap en een waarde. Dit levert de volgende syntax op: eigenschap: waarde; Figuur 5.6. Aan de hand van de eigenschap bepaal je welke aspecten van de door de selector geselecteerde delen er moeten worden opgemaakt. Dit kan gaan over het lettertype, de tekstkleur, de tekstgrootte, het kader, De waarde die aan deze eigenschap wordt toegevoegd zorgt voor de invulling van deze eigenschap. Zo kan het voorbeeld 5.2. als volgt worden uitgewerkt: em {font-size: 14px;} Figuur 5.7. Indien deze stijlregel effectief met een html-bestand gelinkt wordt zal alle tekst die als vet <em> staat aangeduid worden afgebeeld met een tekengrootte van 14 px. 34

36 5.3. DIV-ELEMENT Voor het importeren van de gewenste vormvereisten wordt er beroep gedaan op DIV-elementen. In figuur 5.8. wordt duidelijk gemaakt hoe dit in zijn werking gaat. Figuur 5.8. In het stylesheet aan de linkerkant van de figuur worden de vormvereisten opgegeven zoals: lettertype, lettergrootte, tekstkleur en uitlijning. Het document bevat twee verschillende blokken die telkens worden afgebakend door accolades. Blok één - #eerste bevat de opmaak die gebruikt zal worden voor de eerste zin van het resultaat, terwijl blok twee - #tweede de opmaak bevat voor de tweede zin. Het stylesheet van het voorbeeld werd opgeslagen onder de naam opmaak.css. De rechterzijde van de figuur bevat de code van voorbeeldcss.htm. Dit is het html-bestand waarin de inhoud van de website wordt vastgelegd. Om de vormvereisten die in opmaak.css werden ingesteld toe te passen op de inhoud van voorbeeldcss.htm, moeten er links aangemaakt worden die ervoor zorgen dat de twee documenten elkaar vinden. In de eerste plaats moet er in de head-sectie van het html-bestand de volgende verwijzing aangebracht worden: <link href= opmaak.css REL= stylesheet 35

37 TYPE= text/css > Deze link zegt zorgt ervoor dat het bewuste stylesheet gevonden kan worden. De tweede belangrijke verwijzing die moet worden toegevoegd brengt ons bij de DIV-elementen. Een DIV-element zorgt ervoor dat een bepaald gedeelte van het html-bestand wordt ingesloten en zodoende dat de gewenste opmaak aan dit deel kan worden toegewezen (De Jong, 2008b). Het element begint met de <div>-tag en wordt zoals gebruikelijk afgesloten met de </div>-tag. In het voorbeeld wordt de begintag aangevuld met: id= eerste. Dit deel van de syntax zorgt ervoor dat de inhoud die binnen deze <div>-tag valt wordt opgemaakt volgens de regels die werden opgegeven in het #eerste -blok van het opmaak.css -bestand. Hetzelfde gebeurt voor de tweede zin, maar hier wordt een verwijzing gemaakt naar het #tweede -blok, waardoor deze zin een totaal andere opmaak krijgt. Het voorbeeld heeft de voordelen van het DIV-element duidelijk gemaakt, maar er zijn ook nadelen aan verbonden. Het DIV-element is een blok-element. Dit wil zeggen dat de lay-out die met dit element wordt weergegeven geldt voor het hele gebied dat is ingesloten. Eén woord uit dit gebied in een andere stijl opmaken is niet mogelijk. Dit probleem wordt opgelost door de invoer van het SPAN-element (Schokkelé, 2009) SPAN-ELEMENT In tegenstelling tot het DIV-element wat een blok-element is dat zijn lay-out oplegt aan een ingesloten gebied, is het SPAN-element een inline-element, dat kan ingevoegd worden tussen de begin- en de eindtag van een DIV-element. Hierdoor kunnen één of meerdere woorden een aparte opmaak krijgen. In figuur 5.9. wordt duidelijk gemaakt hoe dit in zijn werking gaat. 36

38 Figuur 5.9. Binnen het <div>-blok worden de <span>-tags aangebracht. De woorden die tussen de <span>-tags staan krijgen hierdoor niet de opmaak die werd vastgelegd in opmaak.css, maar in plaats daarvan de opmaak die wordt vastgelegd binnen de openingstag <span> CSS AANPASSEN VOOR OCMW-WEBSITE Een informatieve OCMW-website moet een frisse overzichtelijke look hebben. Teveel kleuren, kaders, flitsende beelden en prullen zouden ervoor kunnen zorgen dat het voor de bezoeker moeilijker wordt om het overzicht te bewaren. Vandaar werd er voor de lay-out van de OCMWwebsite vertrokken vanuit het Foor Seasons -template dat zoals op figuur wordt weergegeven een sobere, maar voornamelijk overzichtelijke uitstraling heeft. Toch waren er nog drie belangrijke lay-outaanpassingen nodig om de site moderner, mooier en nog overzichtelijker te maken. Deze veranderingen werden uitgevoerd doormiddel van correcties aan te brengen in het.css -bestand van Four Season. Het uiteindelijke resultaat wordt weergegeven in figuur

39 Figuur FORMAAT Om de site zo overzichtelijk mogelijk te kunnen maken wordt het scherm zoveel mogelijk in de breedte gebruikt. Veel websites hebben een vaste breedte bijvoorbeeld 960px zodat ze op het merendeel van de computerschermen in hun geheel verschijnen, zonder dat er een horizontale schuifbalk verschijnt. Het nadeel van dit systeem is dat er tegenwoordig veel bredere schermen in omloop zijn waardoor er een groot deel van de schermbreedte niet benut wordt. Het Four Seasonstemplate werd oorspronkelijk ontworpen voor websites met een breedte van 960px. Dit wil zeggen dat de website er op een breed scherm wordt weergegeven zoals op figuur Maar liefst 18% van de schermbreedte wordt niet gebruikt, wat onaanvaardbaar is voor een website waarbij overzichtelijkheid als een van de hoofddoelen werd vooropgesteld. Om dit op te lossen werden alle afmetingen van blokken, menu s en de website in het algemeen omgezet van vaste breedtes in pixels (figuur 5.11.) naar relatieve breedtes in procenten (figuur 5.12.). Hierdoor zal de spreiding over het scherm automatisch aangepast worden aan de hand van de schermbreedte. 38

40 #pagewrapper { margin:auto; width:960px; border:15px solid #ffffff; background-color:#ffffff; } Figuur #pagewrapper { margin:auto; width:95%; border:15px solid #ffffff; background-color:#ffffff; } Figuur Het formaat omzetten in percentages komt niet alleen de overzichtelijkheid ten goede. Het wordt ook eenvoudiger om afbeeldingen te importeren. In de rechterhelft van figuur staat een afbeelding weergegeven die werd geïmporteerd zonder vereisten op te leggen in de stylesheet. De afbeelding is veel te groot en maakt werken op de website bijna onmogelijk. Dit probleem kan op twee manieren opgelost worden in de stylesheet. Je kan de afbeelding een vaste grootte opleggen in pixels. Hierdoor heb je de grootte van de afbeelding onder controle, maar vermits de afbeelding uit het voorbeeld gebruikt wordt als banner is het ook hier interessanter om de afbeelding een relatieve grootte mee te geven, zoals in het linkerdeel van figuur Zoals in dit voorbeeld wordt weergegeven zal de afbeelding steeds honderd procent van de websitebreedte in beslag nemen. 39

41 Figuur KLEUR EN VORM HUISSTIJL OCMW Het OCMW heeft haar eigen huisstijl, die gedomineerd wordt door de groentinten uit haar logo. Het is dan ook belangrijk voor de herkenbaarheid van het OCMW dat deze kleuren in de website verwerkt worden. Het instellen van de kleuren gebeurt ook in de stylesheet. Er moet dan een stijlregel aangemaakt worden waarvan de syntax in voorbeeld wordt weergegeven. De tekstleur kan opgelegd worden via de stijlregel: selector{color:green}. De achtergrondkleur van knoppen kan ingesteld worden via: selector{background-color:green}. Standaard zijn een aantal kleuren die je in css of html-code met hun Engelse naam kan schrijven zoals: white, black, red, green, blue, maar hiermee kan er maar één groentint of één blauwtint verkregen worden. Er kan beroep gedaan worden op meerdere kleuren via de hexadecimale kleurcodes. Voor elke kleurtint bestaat er een hexadecimale code, die voorafgegaan door een hekje # in de stijlregel kan opgenomen worden. Welke codes dit zijn voor de groentinten van het OCMW-logo wordt weergegeven in figuur

42 Figuur Vermits er duizenden hexadecimale kleurcodes zijn is het onmogelijk om ze allemaal uit het hoofd te kennen. Op het internet kan je handige hulpmiddelen terugvinden om de kleurcodes te berekenen, bijvoorbeeld met behulp van de kleurencalculator op LESS IS MORE Net zoals de Nederlandse architect Mies Van De Rohe dit doet in zijn werk, stond ook voor deze website de leuze Less is More centraal. Een informatieve website mag de bezoekers niet overvallen met teveel felle kleuren of een te drukke bladvulling. Dit kan in de eerste plaats de bezoeker afleiden, maar het kan er ook voor zorgen dat de bezoeker de informatie minder snel terugvindt. Om dit te vermeiden werden de kleuren of stijlen voor deze website gekozen op basis van hun functie. Kleuren worden niet enkel gekozen omdat ze mooi zijn, maar omdat ze duidelijk leesbaar zijn of omdat ze voldoende in contrast staan met elkaar. Hierdoor werd er bewust gekozen voor een witte achtergrond en donkere letters. Figuur

43 Een tweede kleurenaspect waarmee rekening moet gehouden worden is kleurenblindheid. Er bestaan kleurencombinaties die kleurenblinden niet kunnen onderscheiden. Er zijn verschillende gevallen van kleurenblindheid. Het kleurenzicht wordt samengesteld door het opvangen van kleurenfrequenties. Elke kleur heeft een andere frequentie. Dit is ongeveer hetzelfde als bij het geluid. Alleen wordt bij geluid de frequentie bepaald door het aantal trillingen per seconde, terwijl de frequentie voor het zicht wordt uitgedrukt in de afstand die het licht kan afleggen gedurende één trilling. Deze afstand wordt uitgedrukt in nanometers. Er zijn drie hoofdkleuren: rood, groen en blauw, waardoor er op figuur drie verschillende kegeltjes voorkomen. Het rode kegeltje heeft een optimale gevoeligheid bij een frequentie van 560nm, het groene kegeltje heeft een optimale gevoeligheid bij een frequentie van 530nm en het blauwe kegeltje heeft een optimale gevoeligheid bij een frequentie van 440nm (Van Der Have, 2009). Aan de hand van deze kegeltjes kunnen er twee soorten kleurenblindheid verklaard worden. In het eerste geval ontbreekt het rode kegeltje. Hierdoor zal er geen onderscheid gemaakt kunnen worden tussen groene en rode tinten. In het tweede geval treedt er een overlapping op tussen twee kegeltjes. Op figuur valt het duidelijk op dat het groene en het rode kegeltje dicht bij elkaar liggen terwijl het blauwe kegeltje meer afgezonderd ligt. Met het blauwtinten zullen er dus geen problemen optreden, maar het kan zijn dat het rode en groene kegeltje voor een stuk overlappen waardoor problemen opduiken bij het onderscheiden van groene en rode tinten (Phillips, 2008). De bovenstaande informatie leert ons dat er vooral moet opgelet worden met de combinatie van groen- en roodtinten. Vermits de kleuren van de huisstijl van het OCMW die verwerkt werden in de website uit groentinten bestaan, moest er hierdoor verhoogde aandacht verstrekt worden aan de overige kleurkeuzes. Hiermee werd bij het aanpassen van de stylesheet rekening gehouden. In de eerste plaats werden alle roodtinten verwijderd. In de tweede plaats werd ervoor gezorgd dat elke groene tekst op een witte of lichtgrijze achtergrond verschijnt AFGELIJNDE VORMEN Net zoals dit bij de kleurenkeuzes het geval was werd er voor de vormgeving van tabellen en menu s ook rekening gehouden met het moto less is more. Tabellen zijn er om verschillende inhoudstypes of menu s van elkaar af te scheiden. Daarom werden de border -instellingen in de stylesheet aangepast. De originele Four Seasons -template gebruikt geen randen voor menu s en zeer lichte randen voor inhoudsvakken. Om meer overzichtelijke tabellen te creëren werden er in de eerste plaats randen aangemaakt waar die oorspronkelijk niet aanwezig waren en werd er in de tweede plaats een donkerdere kleur toegewezen aan de bestaande randen. 42

44 FOUTJES IN STYLESHEETS Het is altijd nuttig om een website op meerdere browsers te testen. Het is niet omdat alles perfect werkt in je standaardbrowser dat dit voor alle browsers het geval is. Door foutjes of onvolledigheden in de stylesheets of html-bestanden kan het zijn dat een website er voor elke webbrowser een beetje anders uitziet. Dit kan ertoe leiden dat een website die in Firefox perfect uitziet, slordigheden vertoont in Internet Explorer, zoals in figuur wordt duidelijk gemaakt. Figuur In dit voorbeeld wordt er beschreven dat uitklapbare menu-onderdelen geen lijst-opmaak krijgen. In de plaats daarvan krijgen ze een icoon dat eigenschappen bezit om het menu in- of uit te klappen. Door deze beschrijving beschouwt Internet Explorer deze onderdelen zoals Sociale Dienst en Senioren als gewone tekst, die als volgt dichter bij de linkermarge wordt geplaatst dan lijstobjecten. Hierdoor oogt het menu zeer slordig. Zoals ook in figuur wordt weergegeven interpreteert Firefox dit anders, waardoor alles mooi onder elkaar gesorteerd wordt binnen het menu. Niet alleen Firefox, maar ook Opera en Google Chrome geven het menu weer zoals het hoort. De vertaling van de stylesheet of html-code in een webpagina die bekeken kan worden door de websitebezoekers wordt uitgevoerd door de rendering engine. Deze is zo ontworpen dat hij de onvolledigheden en fouten in de broncode verbetert. Dit neemt niet weg dat er fouten zijn die door de mazen van het net glippen en zorgen voor een slechtere weergave van de website in bepaalde webbrowsers. Indien het dus de bedoeling is dat de website er op elke browser hetzelfde uitziet wat logisch is moeten er een aanpassing aangebracht worden in het stylesheet of html-code (Tech Faq, 2009). In dit geval in het stylesheet dat de plaats van de menu-onderdelen beschrijft. Deze 43

45 aanpassing wordt weergegeven in figuur Hier wordt meteen duidelijk dat een betere beschrijving binnen het stylesheet de gewenste gevolgen met zich meebrengt. Alle menuonderdelen worden nu netjes onder elkaar geplaatst. Figuur Het resultaat Al deze en nog vele andere aanpassingen in de stylesheet hebben geleid tot de uiteindelijke layout van de website die wordt weergegeven in figuur De website is overzichtelijker, moderner en luchtiger geworden dan dat dit het geval was met het originele Four Seasons -template zoals te zien is op figuur

46 Figuur

47 6. DOELSTELLINGEN BEHAALD? In deel 3: Doelstellingen en deel 4: Ontwikkelinsproces website van deze tekst werden ten eerste de doelstellingen die bij aanvang van het ontwikkelingsproces werden vooropgesteld en ten tweede de mogelijkheden die Drupal aanreikt om deze doelstellingen te kunnen behalen omschreven. In het volgende onderdeel worden deze doelstellingen er terug bijgehaald en worden ze gelinkt aan toepassingen die op de site werden geïnstalleerd. Zo wordt meteen duidelijk of de vooropgestelde doelstellingen ook effectief behaald werden DOELSTELLING: TOEGANKELIJKHEID De toegankelijkheid of gebruiksvriendelijkheid moest zowel voor de bezoeker als voor de beheerder geoptimaliseerd worden. Om aan deze doelstelling te voldoen moest er eerst een keuze gemaakt worden aan de beheerderszijde BEHEERDERSZIJDE Er werd gekozen om de website op te bouwen met behulp van een Content Management System (CMS). Dankzij deze keuze werd en groot deel van het werk voor de toekomstige beheerders in de handen gelegd van het CMS, in dit geval Drupal. Door het installeren van verschillende modules en nodes zijn de beheerders in staat om de website in gewone mensentaal up to date te houden. Ze hebben hiervoor geen html of PHP kennis nodig. Er werden enkele modules geïnstalleerd die het gebruikersgemak voor de beheerders verhogen, zoals: Tiny Tiny MCE (zie ), GCal events (zie ), Webform (zie ), Advanced Help (zie ). Het feit dat de informatie die je nodig hebt om een Drupalsite te beheren in eenvoudige mensentaal kan uitgelegd worden, maakt het mogelijk om een handleiding op te stellen die de beheerders in de toekomst kunnen gebruiken op hun website up to date te houden. In deze handleiding wordt stapsgewijs uitgelegd hoe de beheerders inhoud moeten aanpassen of toevoegen, hoe het gebruikersbeheer werkt, hoe enkele basisconcepten van Drupal in elkaar zitten, zonder over de voor ongeschoolde beheerders moeilijke PHP- of html-codes te hoeven uitweiden. Deze handleiding die je kan terugvinden onder 8. Handleiding maakt het voor de beheerders nog eenvoudiger om de website te onderhouden. 46

48 BEZOEKERSZIJDE Om de toegankelijk te bevorderen voor de bezoekers werd er vooral werk gemaakt van een overzichtelijke gebruikersinterface, zoals besproken wordt in paragraaf 5. Cascading Style Sheets. De site is overzichtelijk opgebouwd uit kolommen en menu s en beschikt over de ingebouwde Search - module zodat de bezoekers op een eenvoudige manier inhoud kunnen zoeken op de website. Er werd nagedacht over het kleurenpalet van de website, zodat al de inhoud duidelijk leesbaar is en er geen problemen kunnen opduiken voor kleurenblinden. Om het gebruiksgemak aan de bezoekerszijde te verhogen werden onder andere de modules JQuery Menu (zie ) en GMap Location (zie ) geïnstalleerd. Dankzij Drupal is het een dynamische website geworden waarop bepaalde informatie zichzelf aanpast. Dit is heel belangrijk voor het creëren van een agenda, wat één van de doelstellingen was. De GCal-Events -module (zie ) voorziet zo n agenda die alle afspraken of evenementen die in de nabije toekomst plaatsvinden automatisch op de website plaatst en ze er weer afneemt wanneer ze voorbij zijn DOELSTELLING: INFORMATIE DOORSTUREN Voor deze doelstelling werd nog maar eens bewezen wat de voordelen zijn van een wijdverspreid CMS als Drupal. Door het installeren van de module Webform (zie ) wordt het de beheerder zeer makkelijk gemaakt om formulieren aan te maken en deze online te zetten. Doordat de resultaten van deze webformulieren automatisch worden bewaard in een Excel-bestand wordt ook de verwerking van de doorgestuurde formulieren eenvoudiger. De interactie tussen de beheerder van de site en de bezoekers houdt niet op bij het inzenden van formulieren. Dankzij de Author Contact -module (zie ) is het mogelijk om een mail te versturen naar de auteur van een bepaalde node DOELSTELLING: DOCUMENTEN DOWNLOADEN De optionele kernmodule Upload maakt het mogelijk om binnen bepaalde nodes zoals pagina een bestand te uploaden om toe te voegen als bijlage van deze node. Deze bijlagen kunnen door de websitebezoekers gedownload worden. Hiermee wordt aan de doelstelling voldaan, dat bezoekers de mogelijkheid moeten krijgen om bestanden te downloaden. 47

49 Niet alleen de bezoekers, maar ook de OCMW-medewerkers moeten bestanden kunnen downloaden. Bij deze tweede groep bestond de moeilijkheid erin dat dit vaak gaat over documenten die niet openbaar gepubliceerd mogen worden. Hierdoor was er nood aan een beveiliging die er voor zorgt dat deze documenten uitsluitend door personen met de juiste toegangsrechten gedownload of bekeken kunnen worden. Deze beveiliging wordt verzorgd aan de hand van drie modules. De eerste is de private -module (zie ). Deze module beveiligt de documenten niet, maar zorgt ervoor dat ze niet op het scherm komen bij onbevoegde bezoekers. De private upload -module (zie ) zorgt er wel voor dat de documenten beveiligd worden. De module zorgt ervoor dat de documenten worden opgeslagen in een beveiligde map. De derde en laatste beveiligingsmodule, node access (zie ), beveiligt specifieke nodes. Voor bezoekers zonder de nodige toegangsrechten wordt het onmogelijk om deze nodes te bekijken. 48

50 7. CONCLUSIES Uit 6. Doelstellingen behaald? blijkt dat alle doelstellingen voor de OCMW-website werden behaald. Alles werd in het werk gesteld om de website zo overzichtelijk en gebruiksvriendelijk als mogelijk te maken. De keuze op het CMS Drupal bleek hiervoor terecht te zijn. Nu alle nodige modules geïnstalleerd zijn kunnen de werknemers van het OCMW op een eenvoudige manier inhoud toevoegen of bewerken en de website beheren. Het bewijs dat dit mogelijk is werd reeds geleverd doordat zij reeds een deel van de huidige informatie op de website hebben geplaatst. Op 1 september 2009 zal de website online gezet worden. Dan volgt dus eigenlijk de echte vuurdoop. Aan de hand van de reacties die er dan op de website zullen komen, zal hij eventueel nog worden aangepast, maar momenteel zijn de reacties positief tot zeer positief. Enkele van de positieve punten die worden aangehaald zijn. Een eenvoudige, maar zéér informatieve website! Heel overzichtelijk! Een witte achtergrond. Dat zouden ze meer moeten doen. Perfect contrast om de tekst te kunnen lezen! Het lettertype is iets groter dan op andere website. Dit bevordert de leesbaarheid! 49

51 8. HANDLEIDING 8.1. VOORWOORD In deze handleiding staat beschreven hoe je met deze Drupal-installatie kan werken. Er wordt uitgelegd hoe je nieuwe inhoud kan aanmaken, bestaande inhoud kan bewerken of verwijderen. Er wordt informatie gegeven over gebruikersinstellingen en modules die regelmatig gebruikt worden om inhoud aan te maken of aan te passen. Het is niet de bedoeling van deze handleiding om uit te leggen hoe een Drupal-site wordt opgebouwd, maar wel hoe je met deze Drupal-installatie ( kan werken. Dit is de eerste versie van de handleiding die werd afgewerkt op 19 juni Mochten er in de toekomst nog onduidelijkheden optreden of nood zijn aan extra toepassing laat dit dan weten aan Steven Troch of trek zelf op zoektocht in de wondere wereld van Drupal. Veel succes met het beheren van de OCMW-website van de gemeente Niel! Steven Troch 50

52 8.2.STIJLREGELS LETTERTYPE Het standaard lettertype dat voor de website gebruikt wordt is Verdana met een lettergrootte van 12pt. In sommige gevallen bijvoorbeeld voor titels wordt hiervan afgeweken. Hieronder worden alle mogelijkheden opgesomd GEWONE TEKST Lettertype Verdana Lettergrootte 12pt Kleur Zwart (#000000) Effect (geen) HOOFDTITEL Lettertype Verdana Lettergrootte 18pt Kleur #94C512 Effect Vet TWEEDE TITEL Lettertype Verdana Lettergrootte 16pt Kleur #94C512 Effect Vet DERDE TITEL Lettertype Verdana Lettergrootte 14pt Kleur #94C512 Effect Vet 51

53 LINKS MET EXTRA UITLEG Lettertype Lettergrootte Kleur Effect Verdana 14pt #006A3A (automatisch) Vet LINKS IN TEKST Lettertype Lettergrootte Kleur Effect Verdana 12pt #006A3A (automatisch) Italic CONTACTINFORMATIE De contactinformatie wordt iets anders weergegeven dan de normale tekst. Namen worden als volgt weergegeven: Lettertype Verdana Lettergrootte 14pt Kleur # Effect (geen) Telefoonnummers, adressen, adressen hebben dezelfde opmaak als de gewone tekst (Verdana, zwart, 12pt). Hierdoor ziet de contactinformatie er als volgt uit: Walter Troch tel: 0475/ PARAGRAFEN Teksten worden opgebouwd uit paragrafen. Belangrijk om weten is dat er achter de gebruiksvriendelijke gebruikersinterface van Drupal html-code zit. Hier dient rekening mee gehouden te worden bij het invoeren van de informatie. Uiteindelijk komt dit erop neer dat je hetzelfde moet doen als in Microsoft Office Word Het beste wat je kan doen is je tekst blijven doortypen zonder ENTER te gebruiken. Indien je in een paragraaf toch naar de volgende regel wil gaan moet je SHIFT+ENTER indrukken. Als je dat niet doet 52

54 zal er een grotere marge opduiken tussen de twee regels. Deze toetsencombinatie moet altijd gebruikt worden als er geen extra marge mag opduiken tussen twee regels! Als je een nieuwe paragraaf wil beginnen volstaat het om één keer op ENTER te drukken INHOUD Er kunnen verschillende soorten inhoud aangemaakt worden zoals een enquête, pagina, private pagina, verhaal en webformulier. Meestal zal er gebruik gemaakt worden van de pagina BLOK OF PAGINA? Een eerste belangrijke onderscheid dat er tussen verschillende soorten inhoud gemaakt kan worden is de manier waarop ze gepubliceerd wordt. Sommige inhoudstypen worden weergegeven in een blok. Dit wil zeggen dat dit inhoudstype een vooropgestelde plaats krijgt in de pagina. Deze plaats wordt ingesteld in het blokkenbeheer (zie Blokkenbeheer). Voorbeelden van blokken zijn het menu Diensten en het Agenda -blok. Het inhoudstype dat blokken creëert is enquête. Alle andere inhoudstypen op deze website creëren een volledige pagina. Een lijst van alle inhoudstypen vind je terug op: Inhoud aanmaken BLOKKENBEHEER Je kan een blok instellen via het blokkenbeheer (beheren > site-constructie > blokken). Alle blokken die kunnen worden ingesteld op de website worden hier weergegeven. De blokken die momenteel zichtbaar zijn worden verdeeld over: linker zijbalk, rechter zijbalk, inhoud en voet. De blokken die niet zichtbaar zijn op de website behoren tot de categorie uitgeschakeld. Je kan een blok inschakelen door het naar de juiste kolom te verdelen. Het hangt ervan af waar je het blok wilt laten verschijnen (linker zijbalk, rechter zijbalk, inhoud of voet) waar je het naartoe moet slepen. Voor deze website is dit alleen handig voor de enquête. De andere blokken staan op hun juiste plaats en hoeven eigenlijk niet verplaatst te worden Blokken slechts op bepaalde pagina s weergeven Bij de instellingen (instellen) van het blok kan je ervoor kiezen om het blok slechts op bepaalde pagina s te laten verschijnen. Je kan kiezen tussen drie mogelijkheden: Weergeven op alle pagina s behalve op de vermelde pagina s Alleen weergeven op de vermelde pagina s Alleen weergeven wanneer de PHP-filter resulteert in TRUE 53

55 Er moet enkel rekening gehouden worden met de eerste twee mogelijkheden. Indien geen van de mogelijkheden zijn aangeduid wordt het blok op alle pagina s weergegeven. Je kan een pagina vermelden door het nodenummer weer te geven in het teksvak pagina s. Voor de pagina: wordt dit node/70. Indien het nodenummer vervangen is door een alias, bijvoorbeeld: typ je hier gewoon contactinformatie ENQUÊTE Een enquête is een vraag met een set mogelijke antwoorden. Eenmaal aangemaakt, biedt een enquête een eenvoudige doorlopende teller van het aantal stemmen op iedere optie ENQUÊTE AANMAKEN Stap 1 : Inhoud aanmaken > Enquête Stap 2 : Vul een vraag in. Deze vraag wordt ook de titel van het enquêteblok. Stap 3 : Onder keuze kan je de keuzemogelijkheden invullen waartussen gekozen kan worden. Bijvoorbeeld: Zeer goed, goed, normaal, slecht, zeer slecht. Standaard is er plaats voor twee keuzemogelijkheden, maar via de knop Een keuze toevoegen kan je extra keuzemogelijkheden toevoegen. Stap 4 : Via de enquête-instellingen kan de status en de duur van de enquête ingesteld worden. Als de status staat ingesteld op gesloten kunnen er geen inzendingen ingediend worden. Staat de status ingesteld op actief, dan is dit wel mogelijk. Bij duur van de enquête kan je kiezen hoe lang de enquête actief blijft. Dit kan gaan van één dag tot onbeperkt. Stap 5: Indien je wilt dat de enquête als blok wordt weergegeven, moet je de menu-instellingen niet invullen. Hou er wel rekening mee dat het enquêteblok niet automatisch op de website verschijnt! Hiervoor moeten de juiste voorwaarden ingesteld zijn bij blokken (zie Blokkenbeheer). Indien je wilt dat de enquête gepubliceerd wordt als een pagina wat minder voor de hand liggend is klik dan op Menu-instellingen en geef hier de titel (titel van menulink) in waarmee deze pagina in het menu zal worden weergegeven. Daarna moet het bovenliggend onderdeel aangeduid worden. Hiermee bepaal je de plaats waar het menuonderdeel in het menu zal worden weergegeven. Voorbeeld: Sociale dienst moet in het menu Diensten ondergebracht worden. Dan moet je hier Diensten aanklikken. Hierna kan je ook een gewicht toekennen aan de menulink. Hiermee bepaal je de plaats van de link in het menu. De link met het laagste getal komt bovenaan het menu te staan. Stap 6: Via bestandsbijlages kan je een bijlage toevoegen aan de pagina. Via Bladeren kan je op zoek gaan naar het gewenste document. Als dat geselecteerd is druk je op Bijvoegen. Het bestand wordt 54

56 nu aan de pagina toegevoegd. Meer informatie over het toevoegen van bijlagen kan je terugvinden in 3. Bestanden uploaden. Stap 7: Achteraan de URL voegt drupal het nodenummer toe (bijvoorbeeld node 31 ). Met url-pad instellingen kan je hier iets anders voor invoeren. Bijvoorbeeld: Als de pagina met informatie over de raadsleden eindigt met /node 31 dan kan je hier raadsleden typen. De URL van deze pagina zal dan eindigen op raadsleden. Stap 8: Onder de link auteursinformatie kan je kiezen of de auteur van de pagina bekend gemaakt wordt of niet. Stap 9: Bij publicatieopties moet er normaal gezien niets aangepast worden ENQUÊTE ALS BLOK Een enquête kan als blok weergegeven worden. Dat wil zeggen dat ze op elke pagina waar de beheerder dit wenst de enquête verschijnt in de linker- of rechterzijbalk, het inhoudsvak, de voetnoot. Er kan slechts één enquête per keer weergegeven worden in een blok. Om een enquêteblok in te stellen leg je de volgende weg af: beheren > site-constructie > blokken. Zoek het blok meest recente enquête en versleep dit onder de sector waar je het wil plaatsen of selecteer een plaats in het snelmenu gebied ENQUÊTE BEWERKEN Om een enquête te kunnen bewerken moet je ingelogd zijn als beheerder. Er zijn twee verschillende manieren om de enquête te bewerken. Als de enquête wordt weergegeven aan de hand van een menulink volstaat het om naar de pagina te gaan waar de enquête wordt weergegeven en daar, bovenaan de pagina, op bewerken te klikken. Als de enquête in blokvorm wordt weergegeven moet je de volgende weg afleggen: beheren > inhoudelijk beheer > inhoud. In de lijst met inhoud ga je op zoek naar de enquête en je opent deze. Hierdoor krijg je dezelfde pagina te zien als in het eerste geval waardoor je bovenaan op bewerken kan klikken. De pagina om een enquête te bewerken is net dezelfde als diegene waarmee een enquête wordt aangemaakt RESULTATEN ENQUÊTE Via de links resultaten en stemmen kan je de resultaten van de enquête bekijken. 55

57 PAGINA Een pagina is een eenvoudige manier om informatie die zelden wijzigt aan te maken, zoals een "Over ons" sectie van een website. Standaard wordt een pagina niet weergegeven op de voorpagina van de website en kunnen bezoekers niet op de pagina reageren PAGINA AANMAKEN Stap 1: Inhoud aanmaken > Pagina Stap 2: Vul een titel in (dit is niet gelijk aan de menulink) Stap 3: Klik op Menu-instellingen en geef hier de titel (titel van menulink) in waarmee deze pagina in het menu zal worden weergegeven. Daarna moet het bovenliggend onderdeel aangeduid worden. Hiermee bepaal je de plaats waar het menuonderdeel in het menu zal worden weergegeven. Voorbeeld: Sociale dienst moet in het menu Diensten ondergebracht worden. Dan moet je hier Diensten aanklikken. Hierna kan je ook een gewicht toekennen aan de menulink. Hiermee bepaal je de plaats van de link in het menu. De link met het laagste getal komt bovenaan het menu te staan. Stap 4: In het onderdeel berichttekst kan je de inhoud typen die je aan de pagina wil toekennen. Meer informatie over deze tekstverwerker vind je terug in 7. Tiny Tiny MCE. Stap 5: Invoerformaat. Dit staat standaard op Full HTML en moet niet aangepast worden. Indien je dit wel doet gaat de opmaak van je document verloren. Ook aan boekstructuur moet niets veranderd worden. Stap 6: Via bestandsbijlages kan je een bijlage toevoegen aan de pagina. Via Bladeren kan je op zoek gaan naar het gewenste document. Als dat geselecteerd is druk je op Bijvoegen. Het bestand wordt nu aan de pagina toegevoegd. Meer informatie over het toevoegen van bijlagen kan je terugvinden in 3. Bestanden uploaden. Stap 7: Achteraan de URL voegt drupal het nodenummer toe (bijvoorbeeld node 31 ). Met url-pad instellingen kan je hier iets anders voor invoeren. Bijvoorbeeld: Als de pagina met informatie over de raadsleden eindigt met /node 31 dan kan je hier raadsleden typen. De URL van deze pagina zal dan eindigen op raadsleden. Stap 8: Onder de link auteursinformatie kan je kiezen of de auteur van de pagina bekend gemaakt wordt of niet. Stap 9: Bij publicatieopties moet er normaal gezien niets aangepast worden. Indien je wenst dat er een korte inhoud van de pagina gepubliceerd word op de home-pagina moet je hier Aangeraden op voorpagina aanvinken. 56

58 PAGINA BEWERKEN Om een pagina te kunnen bewerken moet je ingelogd zijn als beheerder. Ga naar de pagina via de menulink of via het inhoudelijk beheer (beheren > inhoudelijk beheer > inhoud) en klik bovenaan de pagina op bewerken. De pagina om een pagina te bewerken is net dezelfde als die om een pagina aan te maken VERHAAL Is ongeveer hetzelfde als een pagina, maar wordt standaard op de voorpagina geplaatst. Het is ook de bedoeling dat websitebezoekers op een verhaal kunnen reageren WEBFORMULIER Formulieren aanmaken die de websitebezoekers kunnen invullen en inzenden. De resultaten kunnen bekeken worden via of in Excel WEBFORMULIER AANMAKEN Voordat het formulier zelf wordt aangemaakt moeten er enkele instellingen aangepast worden. Het is ook mogelijk om deze instellingen op hun standaardwaarde te laten staan. Er moet wel verplicht een titel ingevuld worden. Stap 1: Inhoud aanmaken > Webformulier Stap 2: Klik op Menu-instellingen en geef hier de titel (titel van menulink) in waarmee deze pagina in het menu zal worden weergegeven. Daarna moet het bovenliggend onderdeel aangeduid worden. Hiermee bepaal je de plaats waar het menuonderdeel in het menu zal worden weergegeven. Voorbeeld: Sociale dienst moet in het menu Diensten ondergebracht worden. Dan moet je hier Diensten aanklikken. Hierna kan je ook een gewicht toekennen aan de menulink. Hiermee bepaal je de plaats van de link in het menu. De link met het laagste getal komt bovenaan het menu te staan. Stap 3: Beschrijving. Vul hier de beschrijving van de webformulier in. Dit is de tekst die wordt weergegeven bovenaan het formulier en als vermelding naar het formulier op de voorpagina. Stap 4: Bevestigingsbericht of duurstuur-url. Vul hier de tekst in die verschijnt wanneer iemand een formulier heeft ingediend. Bijvoorbeeld: Bedankt voor het invullen van dit formulier! Stap 5: Invoerformaat. Dit staat standaard op Full HTML en moet niet aangepast worden. Indien je dit wel doet gaat de opmaak van je document verloren. Stap 6: Webform access control. Hiermee kan je de gebruikers instellen die toegang krijgen tot het formulier. De anonieme gebruikers zijn de gebruikers die de website bezoeken zonder in te loggen. 57

59 Stap 7: Webformulier instellingen. Alle inzendingen worden doorgestuurd naar het e- mailadres dat hier wordt ingevuld. Je bent niet verplicht om hier een adres in te vullen vermits de resultaten ook worden opgeslagen op de server. Stap 8: Conditionele ontvangers. Hier worden de instellingen vastgelegd over de verzender, die de ontvanger te zien krijgt. De naam van de afzender is de naam die de ontvanger te zien krijgt als hij een mail ontvangt met de bevestiging dat hij een webformulier heeft ingevuld. Het e- mailadres van de afzender is het adres vanwaar deze mail verstuurd wordt. Tot slot is er ook nog het onderwerp van de . Standaard is dit de naam van het formulier. Stap 9: Onder geavanceerde webformulier instellingen kunnen er nog enkele instellingen vastgelegd worden zoals het aantal inzendingen dat een gebruiker mag inzenden, de tekst die op de verzendknop moet komen, maar je bent niet verplicht deze gegevens in te voeren. Stap 10: Klik op opslaan. Nu kom je op de pagina uit waar het eigenlijke formulier wordt aangemaakt of om het in de Drupaltermen te zeggen de besturingselementen van het formulier worden aangemaakt. Elk besturingselement heeft betrekking op een vraag, stelling, waarop een antwoord kan gegeven worden. Het blok waarin je zal werken ziet er als volgt uit (figuur 8.1.): Figuur Naam hier komt de naam van een vraag of stelling die je in je formulier wil opnemen. Bijvoorbeeld: Naam, Voornaam, Adres, adres, Geboortedatum, In het tekstvak waar Nieuw besturingselement geschreven staat typ je deze naam in. In het volgende voorbeeld (figuur 8.2.) wordt dit: Voornaam. 58

60 Figuur Type hier kan je het datatype kiezen waarin het antwoord op de vraag of stelling gegeven moet worden. Er zijn verschillende mogelijkheden, zoals: Bestand Hiermee wordt er een knop gegenereerd die het mogelijk maakt om bestanden te uploaden. Date Hiermee kan een datum ingevoerd worden. Bijvoorbeeld: om naar iemands geboortedatum te vragen. Creëert een vak waar een e- mailadres kan ingevuld worden. Fieldset Creëert een kader. Grid Creëert de mogelijkheid om meerkeuze-antwoorden in te voeren. Pagebreak Splitst het formulier op in meerdere delen en voorziet een knop om naar de volgende pagina te gaan. 59

61 Select Laat je uit verschillende keuzemogelijkheden kiezen. Textarea Creëert een tekstblok waarin lange antwoorden kunnen worden ingevoerd. Textfield Creëert een kleiner tekstvak. Handig voor: Naam, Voornaam, Adres, Time Voorziet de mogelijkheid om een tijdsaanduiding in te voeren Verplicht Door naast een besturingselement het verplichtvak aan te vinken zorg je ervoor dat deze vraag moet beantwoord worden. Als dit niet het geval is zal de inzender hier attent op gemaakt worden Handelingen Telkens je een nieuw besturingselement toevoegt, moet je op toevoegen drukken. Hierdoor kom je op een pagina waarin alle instellingen voor dat bepaald besturingselement in orde gebracht kunnen worden. Je kan deze nadien ook nog bewerken of het besturingselement verwijderen FORMULIER BEWERKEN Om een formulier te kunnen bewerken moet je ingelogd zijn als beheerder. Ga naar het formulier via de menulink of via het inhoudelijk beheer (beheren > inhoudelijk beheer > inhoud) en klik bovenaan het formulier op bewerken. De pagina om een formulier te bewerken is net dezelfde als die om een formulier aan te maken RESULTATEN BEKIJKEN EN VERWIJDEREN De resultaten van de ingezonden formulieren kan je bekijken via: beheren > inhoudelijk beheer > webformulieren Titel In deze kolom staan alle formulieren opgesomd die op de website zijn aangemaakt. Als je op de titel van een formulier druk kom je op het bewuste formulier terecht. Je hebt dan de mogelijkheid om dit formulier te bewerken. 60

62 View Hiermee kan je de inzenders en inzendingen bekijken. Je hebt ook de mogelijkheid om de inzendingen te downloaden. Indien je onder download Microsoft Excel aanduidt worden de resultaten overgezet in een Excelbestand Handelingen Je hebt hier de mogelijkheid om het formulier te bewerken, maar ook om alle inzendingen te verwijderen doormiddel van de link leegmaken. Als je hierop klikt en daarna ook bevestigt worden alle inzendingen gewist INHOUD VERWIJDEREN Een pagina, formulier, verhaal, kan op twee manieren verwijderd worden. Ofwel ga je via de menulink naar de gewenste inhoud, klik je op bewerken, scroll je naar beneden zodat je op verwijderen kan drukken. Na het bevestigen van het verwijderen zal de inhoud verwijderd worden. De inhoud kan ook verwijderd worden via inhoudelijk beheer (beheren > inhoudelijk beheer > inhoud). Hier bevindt zich een lijst van alle inhoud die op de website aanwezig is. Vink het vakje aan dat naast de inhoud staat die je wil verwijderen en selecteer in het snelmenu van opties bijwerken de optie verwijderen. Daarna klik je op bijwerken en ook nu zal na bevestiging hiervan de bewuste inhoud van de website verwijderd worden BESTANDEN UPLOADEN ZONDER BEVEILIGING (VOOR IEDEREEN TOEGANKELIJK) Als je documenten oplaad die voor iedereen toegankelijk zijn doe je dit via bestandsbijlages een onderdeel van pagina aanmaken (inhoud aanmaken > pagina > bestandsbijlages). Klik onder een nieuw bestand bijvoegen op bladeren en kies het bestand uit dat je op de website wil plaatsen. Als je dit gedaan heb moet je enkel nog op bijvoegen klikken en het bestand wordt opgeladen. Om dit bestand ook zichtbaar te maken voor iedereen moet er in het tekstvak een link aangemaakt worden. Dit doe je door een stukje tekst te selecteren en via het icoon een hyperlink aan te maken. Als Link URL gebruik je de URL die na het bijvoegen van het bestand onder de beschrijving verschijnt. Vergeet vooral niet om deze pagina te bewaren. 61

63 BEVEILIGDE BESTANDEN (TOEGANKELIJK ONDER VOORWAARDEN) Documenten die slechts voor bepaalde gebruikers toegankelijk zijn moeten beveiligd worden. Hier zijn verschillende opties voor mogelijk BESTAND BEVEILIGEN Lees eerst 3.1. Zonder beveiliging om te weten te komen hoe een bestand moet opgeladen worden. Wanneer een bestand bijgevoegd is zal er een blok verschijnen met verschillende kolommen: verwijderen, lijst, privaat, beschrijving en grootte. Als je het bestand wil beveiligen moet je privaat aanklikken. Daarna moet je ook nog de rollen kiezen van de gebruikers die de bestanden mogen openen, bijvoorbeeld: beheerders, gewone gebruikers. Voor de zekerheid kan je nadien testen of het document beveiligd is door de link naar het document uit te proberen wanneer je afgemeld bent BESTANDEN ONZICHTBAAR MAKEN Je kan bestanden ook onzichtbaar maken voor bezoekers zonder de juiste toegangsrechten. LET WEL OP!!! Je maakt hiermee de bestanden wel onzichtbaar, maar als bezoekers aan de URL geraken van het bestand kunnen ze dit openen! Je maakt bestanden onzichtbaar door in het onderdeel bestandsbijlages Make this post private aan te vinken NODES BEVEILIGEN Er bestaat niet alleen de mogelijkheid om bestanden te beveiligen, maar ook om nodes te beveiligen. Dit kan je doen door een private pagina aan te maken. Dit doe je door naar inhoud aanmaken > private pagina te gaan. Zulke soort pagina s kunnen enkel door geverifieerde gebruikers bekeken worden. Let wel op! Als je aan deze pagina documenten toevoegt moet je deze nog steeds beveiligen! Nodes aanmaken voor bepaalde soorten gebruikers Indien je zelf het soort gebruiker wil kiezen dat een bepaalde pagina mag zien, moet je eerst een nieuw inhoudstype aanmaken. Dit doe je door de volgende weg af te leggen: beheren > inhoudelijk beheer > inhoudstypen. Hier kies je voor inhoudstype toevoegen. Je geeft dit type een naam,bijvoorbeeld: pagina beheerder. Een type (dit is niet belangrijk voor de beheerder, maar is nodig voor de computer), bijvoorbeeld: paginabeheerder. Je kan ook een beschrijving toevoegen. Hier schrijf je zelf een tekstje waar in vermeld wordt waarvoor dit inhoudstype dient. Hierna druk je op inhoudstype opslaan. 62

64 Als je dit gedaan hebt moet je dit inhoudstype nog beveiligen. Dit doen je door naar beheren > gebruikersbeheer > nodeaccess te gaan. In de lijst van inhoudstypes zoek je naar het inhoudstype dat je net hebt aangemaakt. Hier selecteer je de rechten die je aan bepaalde bezoekers wil toestaan GEBRUIKERSBEHEER Er zijn twee soorten hoofdgebruikers: de geverifieerde gebruikers en de ongeverifieerde gebruikers. De eerste groep bestaat ui bezoekers die zich kunnen inloggen terwijl de tweede groep bestaat uit de gewone websitebezoekers. Voor deze website werden de geverifieerde gebruikers onderverdeeld in: gewone gebruikers en beheerders. Deze groepen onderscheiden zich door het aantal gebruikersrechten dat ze hebben. Het spreekt voor zich dat ongeverifieerde gebruikers de minste rechten hebben voornamelijk lezen en dat beheerders over alle rechten beschikken. Alles wat met gebruikersbeheer te maken heeft is terug te vinden onder: beheren > gebruikersbeheer. Hieronder wordt wat informatie gegeven over het bewerken van bestaande rollen voor gebruikers en het aanmaken van nieuwe groepen gebruikers TOEGANGSRECHTEN Alle toegangsrechten per soort gebruiker worden opgesomd op: beheren > gebruikersbeheer > toegangsrechten. Deze staan zo ingesteld dat iedereen de inhoud van de website kan lezen, aan enquêtes kan deelnemen, de website kan doorzoeken en opgeladen bestanden kan raadplegen. Gewone gebruikers kunnen hierbij ook bestanden opladen en beheerders kunnen alles. Als je hier verandering in wil brengen kan je dat doen door de rechten in de kolom van een bepaalde gebruiker aan te vinken. Let hier wel mee op, want bij een fout zouden bijvoorbeeld alle bezoekers inhoud op de website kunnen zetten EEN NIEUW SOORT GEBRUIKER TOEVOEGEN Indien er ooit nood is naar een extra soort gebruiker met meer of minder toegangsrechten kan je deze gemakkelijk bijmaken via: beheren > gebruikersbeheer > rollen. In het tekstvak naast de knop rol toevoegen typ je de naam in van de nieuwe groep die je wil aanmaken. Hierna druk je op rol toevoegen. Nu kan je via toegangsrechten bewerken rechten toevoegen of wegnemen van deze nieuwe soort gebruiker. 63

65 EEN NIEUWE GEBRUIKER TOEVOEGEN Een geverifieerde gebruiker is iemand die via een gebruikersnaam en paswoord kan inloggen op de website. Je kan zo n nieuwe gebruiker aanmaken via: beheren > gebruikersbeheer > gebruikers. Hier staat een lijst van alle geverifieerde gebruikers die bij deze site zijn aangesloten. Door een klik op de knop gebruiker toevoegen die bovenaan de pagina staat begin je met een nieuwe gebruiker toe te voegen. Hierna moet je de Account-informatie invullen. Dit zijn: gebruikersnaam, adres en wachtwoord. Je kan ook nog kiezen of je de status op actief of geblokkeerd zet. De status staat standaard op actief vermits een gebruiker die een geblokkeerde status heeft zich niet kan inloggen op de website. Hierna moet je ook nog aanduiden welke rol de gebruiker krijgt of met andere woorden welk soort gebruiker hij wordt. Je kan ook de gebruiker informeren dat hij een nieuwe account heeft gekregen. Uiteindelijk klik je op account aanmaken en de instellingen worden opgeslagen RAPPORTEN Heel interessant zijn de rapporten die Drupal bijhoudt over de bezoekers van de website. Zo kan je nakijken welke pagina s het meeste bekeken worden, welke zoektermen het meest ingevoerd worden, wie de meest actieve gebruikers zijn, Al deze rapporten vindt je terug op: beheren > rapporten URL-ALIASSEN AANMAKEN Omdat Drupal wordt opgebouwd uit nodes, krijgt elke pagina, enquête, zijn nodenummer mee achteraan de URL. Deze nummers kan je bijvoorbeeld vervangen door de naam van de pagina. Dit is ook handiger voor zoekopdrachten. Dit kan je doen tijdens het aanmaken of bewerken van een bepaalde node (pagina, enquête, verhaal, ). Het derdelaatste onderdeel hiervan heet URL-pad instellingen. De naam die je in dit tekstvak invult zal het nodenummer vervangen in de URL. 64

66 8.8. TINY TINY MCE BETEKENIS VAN DE KNOPPEN (bron: Vet Cursief onderstrepen Doorhalen links uitlijnen Centreren rechts uitlijnen volledig uitlijnen opsommingstekens genummerde lijst inspringen verkleinen inspringen vergroten ongedaan maken Opnieuw hyperlink invoegen / bewerken hyperlink verwijderen anker invoegen/wijzigen schakelaar om een of meer letters / woorden wel/niet vet te maken schakelaar om een of meer letters / woorden wel/niet in schuinschrift te zetten schakelaar om een of meer letters / woorden wel/niet te onderstrepen schakelaar om een of meer letters / woorden wel/niet door te halen paragraaf / kopregel links uitlijnen paragraaf / kopregel centreren paragraaf / kopregel rechts uitlijnen paragraaf / kopregel volledig uitlijnen opsommingstekens (bolletjes) met inspringen cijfer 1 t/m xx met inspringen inspringen verkleinen van een paragraaf of kopregel inspringen vergroten van een paragraaf of kopregel laatste actie ongedaan maken ongedaan gemaakte actie herstellen hyperlink invoegen/bewerken: zie hier voor meer info hyperlink (link naar ander deel van de tekst of pagina) verwijderen aangeven waar een hyperlink naar toe moet springen binnen een pagina. Alleen relevant als dit niet 65

67 bovenaan de pagina is. tekst type aangeven of de tekst een paragraaf, een adres is of een kop met grootte xx is het te gebruiken lettertype. Let op: niet ieder Lettertype programma om webpagina s te bekijken kent alle lettertypes. De volgende zijn bijna overal bekend: Verdana, Arial, Helvetica en Times New Roman of kunnen eenvoudig met een vergelijkbare letter worden weergegeven. Zie ook de pagina Welk lettertype of font kan ik gebruiken? lettergrootte tekst stijl afbeelding invoegen/wijzigen afbeelding invoegen/wijzigen: zie voeg een afbeelding toe en een afbeelding met begeleidende tekst specifiek bedoeld voor programmeer-code. Selecteer (het deel van) de tekst die opgeschoond moet code opschonen tekst kleur achtergrond kleur worden. De paragraaf indeling wordt verwijderd: de gehele tekst wordt een doorlopend verhaal. Andere opmaak blijft gehandhaafd. pas de kleur van een/meer letter(s), woord(en) of paragraaf aan. wijzig de achtergrondkleur van de pagina of een of meer cellen van een tabel bovenkast (superscript) onderkast (subscript) bekijk/wijzig HTML bekijk/wijzig de HTML-code die wordt gebruikt om de pagina weer te geven 66

68 horizontale invoegen voeg de datum in voeg de tijd in Zoeken zoek en vervang horizontale lijn Knippen Kopieer Plakken onzichtbare elementen hulplijnen aan/uit verwijder opmaak speciale tekens lijn en horizontale lijn (1 punt dik) horizontale lijn (hoogte en breedte instelbaar) selecteer (het deel van) de tekst waarvan de opmaak verwijderd moet worden (o.a. lettergrootte, font, kleur, vet, cursief, etc.) selecteer een speciaal teken en zet deze in de tekst emoticons (emotions) voeg een emoticon toe flash bestand invoegen/bewerken volledig aan/uit scherm schakelaar om de fullscreen-mode aan/uit te zetten alleen de tekst blijft over. De gehele opmaak wordt verwijderd, inclusief tabelindeling etc. platte tekst invoegen Klik op deze knop en zet de tekst in het popupvenster. Daarna op OK of Annuleren. Internet Explorer: de tekst wordt direct in het Berichttekst veld geplaatst. 67

69 teksten uit Word brengen veel opmaaktekens mee invoegen uit Word selecteer alles maak CSS stijl (edit CSS style) tabel invoegen tabel eigenschappen tabel eigenschappen rij boven invoegen rij onder invoegen rij verwijderen op rij cel die: a. de tekst op de website groter maakt dan nodig b. in conflict kunnen komen met de in Drupal gekozen c. vreemde teksten / tekens kunnen veroorzaken. U dient eerst de tekst in Word te selecteren en te kopiëren naar het klembord. Afhankelijk van de browser wordt, als op de knop invoegen uit Word wordt geklikt, de tekst direct op de plaats van de cursor ingevoegd (zoals bij Internet Explorer). Bij andere browsers (zoals FireFox) wordt eerst een popup-venster getoond waar de tekst met ctrl-v in geplakt moet worden, waarna op OK of Annuleren gedrukt wordt. selecteer de gehele tekst (= ctrl-a in Windows) vul in het popup-scherm de gewenste eigenschappen in. voeg een tabel in. Vul in het popup-scherm de gewenste eigenschappen in van de tabel. Zie hier voor meer info. bekijk / wijzig de eigenschappen van een tabelrij. Vul in het popup-scherm de gewenste eigenschappen in. Zie hier voor meer info. bekijk / wijzig de eigenschappen van een tabelcel. Vul in het popup-scherm de gewenste eigenschappen in. Zie hier voor meer info. voegt een rij in vóór de rij waarin de cursor staat voegt een rij in ná de rij waarin de cursor staat verwijdert de rij waarin de cursor staat 68

70 kolom links invoegen voegt een kolom in vóór de kolom waarin de cursor staat kolom invoegen rechts voegt een kolom in ná de kolom waarin de cursor staat kolom verwijderen splits tabelcel tabelcellen samenvoegen verwijdert de kolom waarin de cursor staat splits een cel in meerdere rijen of kolommen voeg aaneengesloten tabelcellen samen in overzichten kan een verkorte versie van de tekst splits hier in verkorte versie en rest van inhoud getoond worden. Drupal bepaalt in principe zelf waar de tekst wordt opgesplitst. U kunt dit ook zelf bepalen door een speciale code in de tekst op te nemen. Klik hiervoor op deze knop. deze code (een balkje met tekst <! break >) kan worden weggehaald door hierop met de cursor te klikken en dan de Delete -knop in te drukken. klik hiervoor op de knop. start hier een nieuwe pagina Deze code (een balkje met tekst <! pagebreak >) kan worden weggehaald door hierop met de cursor te klikken en dan de Delete -knop in te drukken. Opmerking: dit werkt in Drupal niet. 69

71 AFBEELDING INVOEREN Door een klik op het volgende icoon: kan je een afbeelding invoeren in het tekstvak. In de eerste plaats krijg je het venster te zien dat wordt weergegeven in figuur 8.3. Figuur 8.3. In het tekstvak van Image URL voer je de link in naar de plaats waarop de afbeelding bewaard wordt op de server. Bijvoorbeeld: Hoe je een afbeelding op de server bewaart kan je lezen in 9. WinSCP. Je kan ook nog een beschrijving aan de afbeelding meegeven (image description) of een titel (title) die getoond wordt wanneer er met de muiscursor over de afbeelding wordt gegaan. 70

72 Figuur 8.4. Als je op Appearance klikt verschijnt er een nieuw venster, waarin je extra vormvereisten voor de afbeelding kan instellen ALLIGNMENT hiermee wordt de plaats bepaald die aan de figuur wordt toegewezen. Op het voorbeeld aan de linkerkant van het venster kan je zien waar de figuur geplaatst wordt DIMENSIONS hiermee wordt de grootte van de afbeelding bepaald. Zolang constrain proportions staat aangevinkt hoef je maar één van de twee dimensies aan te passen. De andere wijzigt automatisch mee. De dimensies worden uitgedrukt in pixels. Je hoeft enkel een getal in te geven. De meeste foto s op de website hebben een breedte van 250px gekregen VERTICAL SPACE EN HORIZONTAL SPACE hiermee kan de marge gekozen worden die de tekst van de afbeelding verwijdert blijft. Het nadeel hiervan is dat bij het invoeren van een vertical space, de marge zowel langs de boven- als de onderkant wordt ingevoerd en bij het invoeren van een horizontal space de marge zowel langs de 71

73 linker- als de rechterkant wordt ingevoerd. Dit is niet handig. Vandaar dat je ook aanpassingen kan doen in de Style-regel. Hier wordt de opmaak van de figuur beschreven in CSS-code. Bijvoorbeeld: Als je bij vertical space 10 invoert dan wordt dit als volgt vertaald in de style-regel: margin-top: 10px; margin-bottom: 10px; Bijvoorbeeld: Als je bij horizontal space 10 invoert dan wordt dit als volgt vertaald in de style-regel: margin-left: 10px; margin-right: 10px; Indien je dus slechts langs één kant een marge wil om de tekst op een bepaalde marge van de afbeelding te houden moet je dit niet doen via de horizontal- of vertical space, maar typ je het voer je het volgende in de stijlregel in: Voor een marge van 10px aan de linkerkant: margin-left:10px; Voor een marge van 10px aan de rechterkant: margin-right:10px; Voor een marge van 10px aan de bovenkant: margin-top:10px; Voor een marge van 10px aan de onderkant: margin-bottom:10px; Vergeet niet achter elke opdracht te beëindigen met een puntkomma!!! BORDER Met border kan je een rand invoegen rond de afbeelding. Net zoals bij het vorige punt kunnen er nog extra specificaties aangebracht worden in de stijlregel. Bijvoorbeeld: Je vult bij border 5 in. Dan verschijnt er in de stijlregel: border: 5px solid black; Dit wil zeggen dat er een doorlopende (solid) zwarte (black) rand (border) getekend wordt van 5px dik. Indien je maar aan één of enkele zijden van de afbeelding een rand wil, kan je dat net zoals voor de marges als volgt ingeven: Voor een rand van 5px aan de linkerkant: border-left:5px; Voor een rand van 5px aan de rechterkant: border-right:5px; Voor een rand van 5px aan de bovenkant: border-top:5px; Voor een rand van 5px aan de onderkant: border-bottom:5px; Deze randen kunnen ook met elkaar gecombineerd worden, maar let er telkens op dat elke opdracht beëindigt moet worden met een puntkomma!!! Indien je iets anders wenst dan een doorlopende rand kan je op de plaats van solid iets anders invoeren: Doorlopende rand: solid Gepunte rand: dotted Stippellijn: dashed 72

74 Dubbele lijn: double Ook de kleur kan aangepast worden. Verschillende mogelijkheden zijn: Zwart: black Wit: white Blauw: blue Rood: red Groen: green Geel: yellow Er zijn ook andere kleuren mogelijk aan de hand van hun hexadecimale code, voorafgegaan door een hekje (#) LINK INVOEREN Selecteer eerst een stukje tekst waarmee je de link wilt verbinden. Klik daarna op volgend icoon:. Hierdoor verschijnt het venster dat wordt weergegeven in figuur 8.5. Figuur