”, “”, “”, “- ”, “
”, “- ” en “
- ” 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.
4.4.2. 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
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:
https://www.google.com/accounts/ManageAccount. Op deze manier verkrijgt de beheerder een emailadres 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 4.3.
26
4.4.3. 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.
4.4.4. 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.
4.4.5. 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
module die Drupal aanbiedt is dit niet mogelijk. Hierdoor zorgt de User Login Bar voor een meer persoonlijke behandeling voor de geverifieerde bezoekers.
4.4.6. 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.
4.4.7. 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.
4.4.8. 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 4.4..
28
Figuur 4.4.
4.4.9. 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 e-mails te versturen van op de website. De module ‘Author Contact’ maakt dit mogelijk door een blok te creëren waarin elke bezoeker zijn naam, e-mailadres en boodschap kan achterlaten. Deze gegevens worden doorgemaild naar de auteur van de node waarin het blok wordt weergegeven.
4.4.10. 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.
4.4.10.1. 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
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: http://telin.ugent.be/~stroch/sites/default/files/cascadingstylesheets.docx - kunnen ze deze toch openen. Hierdoor is er nood aan een aanvullende module die de documenten effectief beveiligt.
Figuur 4.5.
4.4.10.2. 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 4.5.. 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
Figuur 4.6.
4.4.10.3 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 4.3.1.1. 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
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.
5.1. 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.
5.2. 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’
(http://www.ivobrugge.be/cursusweb/css/inleiding.asp).
stijldeclaratie wordt tussen accolades geplaatst, waardoor de stijlregelsyntax er als volgt uitziet:
32
De
Selector { stijldeclaratie }
Figuur 5.1.
5.2.1. 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:
Deze tekst wordt groot weergegeven
Figuur 5.3.
Vermits de selector binnen de paragraaf-tag wordt opgenomen, zal heel deze paragraaf worden opgemaakt zoals beschreven in de bijhorende stijlregel. Deze stijlregel neemt dan volgende vorm aan:
.groot {stijldeclaratie} Figuur 5.4.
33
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 5.5.
5.2.2. 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
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: “
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
-tag en wordt zoals gebruikelijk afgesloten met de -tag. In het voorbeeld wordt de begintag aangevuld met: id=”eerste”. Dit deel van de syntax zorgt ervoor dat de inhoud die binnen deze -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).
5.4. 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
Figuur 5.9.
Binnen het -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>.
5.5. 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 5.10. 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 5.18. 37
Figuur 5.10.
5.5.1. 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 5.10. 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
#pagewrapper { margin:auto; width:960px; border:15px solid #ffffff; background-color:#ffffff; } Figuur 5.11.
#pagewrapper { margin:auto; width:95%; border:15px solid #ffffff; background-color:#ffffff; } Figuur 5.12.
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 5.13. 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 5.13. Zoals in dit voorbeeld wordt weergegeven zal de afbeelding steeds honderd procent van de websitebreedte in beslag nemen.
39
Figuur 5.13.
5.5.2. KLEUR EN VORM 5.5.2.1. 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 5.14. 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 5.14.
40
Figuur 5.14.
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 “http://www.drpeterjones.com/colorcalc/” .
5.5.2.2. 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 5.15
41
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 5.15. 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 5.15. 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.
5.5.2.3. 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
5.5.3. 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 5.16. wordt duidelijk gemaakt.
Figuur 5.16.
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 5.16. 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
aanpassing wordt weergegeven in figuur 5.17. 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 5.17.
5.5.4. 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 5.18. 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 5.10.
44
Figuur 5.18
45
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.
6.1. 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.
6.1.1. 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 4.4.1.), GCal events (zie 4.4.2.), Webform (zie 4.4.6.), Advanced Help (zie 4.4.7.). 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
6.1.2. 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 4.4.8.) en ‘GMap Location’ (zie 4.4.4.) 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 4.4.2.) 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.
6.2. 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 4.4.6.) 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 4.4.9.) is het mogelijk om een mail te versturen naar de auteur van een bepaalde node.
6.3. 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
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 4.4.10.1.). Deze module beveiligt de documenten niet, maar zorgt ervoor dat ze niet op het scherm komen bij onbevoegde bezoekers. De ‘private upload’-module (zie 4.4.10.2.) 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 4.4.10.3.), beveiligt specifieke nodes. Voor bezoekers zonder de nodige toegangsrechten wordt het onmogelijk om deze nodes te bekijken.
48
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
Heel
zéér informatieve website!
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
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 (www.ocmwniel.be) kan werken. Dit is de eerste versie van de handleiding die werd afgewerkt op 19 juni 2009. Mochten er in de toekomst nog onduidelijkheden optreden of nood zijn aan extra toepassing laat dit dan weten aan Steven Troch ([email protected]) 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
8.2.STIJLREGELS 8.2.1. 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.
8.2.1.1. GEWONE TEKST Lettertype
Verdana
Lettergrootte
12pt
Kleur
Zwart (#000000)
Effect
(geen)
8.2.1.2. HOOFDTITEL Lettertype
Verdana
Lettergrootte
18pt
Kleur
#94C512
Effect
Vet
8.2.1.3. TWEEDE TITEL Lettertype
Verdana
Lettergrootte
16pt
Kleur
#94C512
Effect
Vet
8.2.1.4. DERDE TITEL Lettertype
Verdana
Lettergrootte
14pt
Kleur
#94C512
Effect
Vet
51
8.2.1.5. LINKS MET EXTRA UITLEG Lettertype
Verdana
Lettergrootte
14pt
Kleur
#006A3A (automatisch)
Effect
Vet
8.2.1.6. LINKS IN TEKST Lettertype
Verdana
Lettergrootte
12pt
Kleur
#006A3A (automatisch)
Effect
Italic
8.2.1.7. CONTACTINFORMATIE De contactinformatie wordt iets anders weergegeven dan de normale tekst. Namen worden als volgt weergegeven: Lettertype
Verdana
Lettergrootte
14pt
Kleur
#666666
Effect
(geen)
Telefoonnummers, adressen, e-mailadressen hebben dezelfde opmaak als de gewone tekst (Verdana, zwart, 12pt). Hierdoor ziet de contactinformatie er als volgt uit:
Walter Troch tel: 0475/71.85.66 e-mail: [email protected] 8.2.2. 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 2007. 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
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.
8.3. 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.
8.3.1. 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 2.1.1. 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.
8.3.1.1. 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.
8.3.1.1.1. 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
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: http://www.ocmwniel.be/?q=node/70 wordt dit node/70. Indien het nodenummer vervangen is door een alias, bijvoorbeeld: http://www.ocmwniel.be/?q=contactinformatie typ je hier gewoon contactinformatie.
8.3.2. 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.
8.3.2.1. 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 2.1.1. 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
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.
8.3.2.2. 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.
8.3.2.3. 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.
8.3.2.4. RESULTATEN ENQUÊTE Via de links resultaten en stemmen kan je de resultaten van de enquête bekijken.
55
8.3.3. 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.
8.3.3.1. 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
8.3.3.2. 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.
8.3.4. 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.
8.3.5. WEBFORMULIER Formulieren aanmaken die de websitebezoekers kunnen invullen en inzenden. De resultaten kunnen bekeken worden via e-mail of in Excel.
8.3.5.1. 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
Stap 7: Webformulier e-mailinstellingen. Alle inzendingen worden doorgestuurd naar het emailadres dat hier wordt ingevuld. Je bent niet verplicht om hier een e-mailadres in te vullen vermits de resultaten ook worden opgeslagen op de server. Stap 8: Conditionele e-mailontvangers. 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 emailadres van de afzender is het adres vanwaar deze mail verstuurd wordt. Tot slot is er ook nog het onderwerp van de e-mail. 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 8.1.
8.3.5.1.1. Naam hier komt de naam van een vraag of stelling die je in je formulier wil opnemen. Bijvoorbeeld: Naam, Voornaam, Adres, E-mailadres, 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
Figuur 8.2.
8.3.5.1.2. 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. Email
Creëert een vak waar een emailadres kan ingevuld worden.
Fieldset
Creëert een kader.
Grid
Creëert
de
mogelijkheid
meerkeuze-antwoorden
om
in
te
op
in
voeren. Pagebreak
Splitst
het
formulier
meerdere delen en voorziet een knop om naar de volgende pagina te gaan.
59
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
8.3.5.1.3. 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.
8.3.5.1.4. 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.
8.3.5.2. 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. 8.3.5.3. RESULTATEN BEKIJKEN EN VERWIJDEREN De resultaten van de ingezonden formulieren kan je bekijken via: beheren > inhoudelijk beheer > webformulieren.
8.3.5.3.1. 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
8.3.5.3.2. 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.
8.3.5.3.3. 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.
8.3.6. 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.
8.4. BESTANDEN UPLOADEN 8.4.1. 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
8.4.2. BEVEILIGDE BESTANDEN (TOEGANKELIJK ONDER VOORWAARDEN) Documenten die slechts voor bepaalde gebruikers toegankelijk zijn moeten beveiligd worden. Hier zijn verschillende opties voor mogelijk.
8.4.3. 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.
8.4.4. 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.
8.4.5. 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! 8.4.5.1. 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
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.
8.5. 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.
8.5.1. 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.
8.5.2. 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
8.5.3. 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, e-mailadres 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 .
8.6. 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.
8.7. 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
8.8. TINY TINY MCE 8.8.1. BETEKENIS VAN DE KNOPPEN (bron: http://www.drupalhandboek.nl/tekstverwerker-tinymce) Vet
Cursief
onderstrepen
Doorhalen
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
links uitlijnen
paragraaf / kopregel links uitlijnen
Centreren
paragraaf / kopregel centreren
rechts uitlijnen
paragraaf / kopregel rechts uitlijnen
volledig uitlijnen
paragraaf / kopregel volledig uitlijnen
opsommingstekens
opsommingstekens (bolletjes) met inspringen
genummerde lijst
cijfer 1 t/m xx met inspringen
inspringen verkleinen
inspringen verkleinen van een paragraaf of kopregel
inspringen vergroten
inspringen vergroten van een paragraaf of kopregel
ongedaan maken
laatste actie ongedaan maken
Opnieuw
ongedaan gemaakte actie herstellen
hyperlink invoegen /
hyperlink invoegen/bewerken: zie hier voor meer
bewerken
info
hyperlink verwijderen
hyperlink (link naar ander deel van de tekst of pagina) verwijderen
anker
aangeven waar een hyperlink naar toe moet springen
invoegen/wijzigen
binnen een pagina. Alleen relevant als dit niet 65
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 programma om webpagina’s te bekijken kent alle lettertypes. De volgende zijn bijna overal bekend:
Lettertype
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
worden. De paragraaf indeling wordt verwijderd: de gehele tekst wordt een doorlopend verhaal. Andere opmaak blijft gehandhaafd.
tekst kleur
achtergrond kleur
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
horizontale
lijn
invoegen
horizontale lijn (1 punt dik)
voeg de datum in voeg de tijd in Zoeken zoek en vervang horizontale lijn
horizontale lijn (hoogte en breedte instelbaar)
Knippen Kopieer Plakken onzichtbare elementen
en
hulplijnen aan/uit selecteer (het deel van) de tekst waarvan de opmaak verwijder opmaak
verwijderd moet worden (o.a. lettergrootte, font, kleur, vet, cursief, etc.)
speciale tekens
selecteer een speciaal teken en zet deze in de tekst
emoticons (emotions)
voeg een emoticon toe
flash
bestand
invoegen/bewerken volledig
scherm
aan/uit
schakelaar om de fullscreen-mode aan/uit te zetten alleen de tekst blijft over. De gehele opmaak wordt verwijderd,
platte tekst invoegen
inclusief
tabelindeling
etc.
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
teksten uit Word brengen veel opmaaktekens mee 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 invoegen uit Word
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 alles maak CSS stijl
selecteer de gehele tekst (= ctrl-A in Windows) op
(edit CSS style)
vul in het popup-scherm de gewenste eigenschappen in. voeg een tabel in. Vul in het popup-scherm de
tabel invoegen
gewenste
eigenschappen
in
van
de
tabel.
Zie hier voor meer info. tabel
rij
eigenschappen
tabel eigenschappen
bekijk / wijzig de eigenschappen van een tabelrij. Vul in het popup-scherm de gewenste eigenschappen in. Zie hier voor meer info.
cel
bekijk / wijzig de eigenschappen van een tabelcel. Vul in het popup-scherm de gewenste eigenschappen in. Zie hier voor meer info.
rij boven invoegen
voegt een rij in vóór de rij waarin de cursor staat
rij onder invoegen
voegt een rij in ná de rij waarin de cursor staat
rij verwijderen
verwijdert de rij waarin de cursor staat
68
kolom links invoegen kolom
rechts
voegt een kolom in vóór de kolom waarin de cursor staat voegt een kolom in ná de kolom waarin de cursor
invoegen
staat
kolom verwijderen
verwijdert de kolom waarin de cursor staat
splits tabelcel
splits een cel in meerdere rijen of kolommen
tabelcellen samenvoegen
voeg aaneengesloten tabelcellen samen in overzichten kan een verkorte versie van de tekst getoond worden. Drupal bepaalt in principe zelf waar
splits hier in verkorte versie en rest van inhoud
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 ) 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 ) kan worden weggehaald door hierop met de cursor te klikken en dan de”Delete”-knop in te drukken. Opmerking: dit werkt in Drupal 4.7.4 niet.
69
8.8.1.1. 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: http://www.ocmwniel.be/sites/default/files/foto/parkwijk.jpg 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
Figuur 8.4.
Als je op Appearance klikt verschijnt er een nieuw venster, waarin je extra vormvereisten voor de afbeelding kan instellen.
8.8.1.2. 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.
8.8.1.3. 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.
8.8.1.4. 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
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 !!!
8.8.1.5. 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
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 (#).
8.8.2. 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 8.5.
73
.
8.8.2.1. LINK URL Vul hier de URL in van de pagina of bestand waarnaar de link moet verwijzen.
8.8.2.2. TARGET Als de link verwijst naar een pdf-bestand dat moet geopend worden is het misschien handiger dat dit opent in een nieuw venster. Om dit te verkrijgen moet je kiezen voor: Open in new window (_blank). Indien je de link wil laten openen op dezelfde pagina laat je de standaardinstellingen staan.
8.8.3. ANCHOR AANMAKEN In tegenstelling tot een link die naar een bepaalde node (pagina, enquête,…) verwijst, verwijst een anchor naar een bepaalde plaats in de pagina. Dit is handig wanneer je lange pagina’s hebt en het scrollen overbodig wilt maken. Een anchor maak je aan door op de plaats te klikken waarnaar je wilt verwijzen. Daarna klik je op het icoon
. In het venstertje dat er verschijnt vul je de naam in die je aan het anchor wil geven. Dit
mag eender wat zijn. Nu moet je nog de link maken naar het anker. Er zijn twee mogelijkheden.
8.8.3.1. VERWIJZEN NAAR ANCHOR BINNEN DE PAGINA (Lees eerst 7.4. Anchors aanmaken) Selecteer eerst een stukje tekst waarmee je de hyperlink wilt vasthechten. Druk op het icoon
om een hyperlink aan te maken. Selecteer bij anchors de naam
van het anchor waarnaar je wilt verwijzen.
8.8.3.2. VERWIJZEN NAAR ANCHOR OP ANDERE PAGINA (Lees eerst 7.4. Anchors aanmaken) Selecteer eerst een stukje tekst waarmee je de hyperlink wilt vasthechten. Druk op het icoon
om een hyperlink aan te maken. Typ in het tekstvak voor Link
URL de URL in van de pagina waar het anchor zich bevindt. Typ achter de URL: /#naam anchor.
8.8.4. TABELLEN MAKEN Een tabel maak je aan door op dit
icoon te klikken. Er verschijnt dan een venster waar je de
allerlei instellingen kan aanpassen in verband met de rijen en kolommen. Er zijn ook nog ander iconen die je helpen bij het aanmaken van nieuwe tabellen (zie 7.1. Betekenis van de knoppen). Na het aanmaken kan een tabel ook opgemaakt worden. Dit gebeurt door de CSS-instellingen aan te passen. Selecteer om te beginnen de cel die je wil opmaken. Doormiddel van een klik op het volgende icoon
kom je in een venster terecht waar alle voorwaarden voor het kader kunnen 74
worden aangeduid. Als alle voorwaarden die je wenst zijn aangeduid kan je ofwel op Update klikken. Hierdoor zal de geselecteerde cel opgemaakt worden. Als je op Apply drukt zal de cel ook opgemaakt worden, maar blijft het CSS-venster openstaan zodat je de opmaak nog kan gebruiken voor andere cellen.
8.8.5. PAGINABREAK INSTELLEN Een paginabreak instellen is handig wanneer je een korte samenvatting van een pagina, verhaal op de voorpagina wilt publiceren. Voer een paginabreak in door op het icoon
te klikken. Wat boven
deze break staat komt op de voorpagina. Als je wil dat de samenvatting ook op de aangemaakte pagina komt te staan selecteer dan toon overzicht in volledige weergave rechts boven aan het tekstvak.
8.9. AGENDABLOK Het agendablok dat wordt weergegeven in het rechter zijblok van de website staat in verbinding met Google Agenda. Na het invullen van activiteiten op de google-account verschijnen deze automatisch op de website.
8.9.1. AGENDAPUNTEN TOEVOEGEN Om agendapunten toe te voegen ga je naar www.google.be. Onder de menulink meer selecteer je agenda. Meld je hier aan met het e-mailadres: “ocmwniel.kalender” en het bijhorende wachtwoord. Je komt nu op de agenda van het OCMW terecht. Door een klik op een bepaald uur van een dag kan je op dat moment een afspraak aanmaken. Je kan extra details toevoegen aan de afspraken door op afspraak details bewerken te klikken. Voor de rest wijst alles zichzelf uit.
75
9. REFERENTIELIJST DE JONG, H. (2008A), Introductie in CSS, gelezen op 23/07/2009, http://www.handleidinghtml.nl /css/css-introductie/css-introductie01.html
DE JONG, H. (2008B), DIV, gelezen op 23/07/2009, http://www.eridu.eu/edu/html/element/div.htm.
DRUPAL
HANDBOEK
(2006),
Tekstverwerker
TinyMCE,
gelezen
op
27/07/2009,
http://www.drupalhandboek.nl/tekstverwerker-tinymce.
GARRELS,
M.
(2009A),
Drupal
handboek:
waakhondmodule,
gelezen
op
30/06/2009,
gelezen
op
30/06/2009,
http://www.drupalhandboek.be/waakhondmodule.
GARRELS,
M.
(2008),
Drupal
handboek:
Blok
of
Block,
http://www.drupalhandboek.be/blok-block-e.
GARRELS,
M.
(2009B),
Drupal
handboek:
Filter,
gelezen
op
30/06/2009,
handboek:
Node,
gelezen
op
30/06/2009,
http://www.drupalhandboek.be/filter.
GARRELS,
M.
(2009C),
Drupal
http://www.drupalhandboek.be/node.
GARRELS, M. (2009D), Drupal handboek: Systeem of System, gelezen op 30/06/2009, http://www.drupalhandboek.be/systeem-system-e.
GARRELS,
M.
(2009E),
Drupal
handboek:
User
Module,
gelezen
op
30/06/2009,
http://www.drupalhandboek.be/user-module.
GARRELS,
M.
(2009F),
Drupal
handboek:
Module,
gelezen
op
30/06/2009,
handboek:
Sjabloon,
gelezen
op
30/06/2009,
http://www.drupalhandboek.be/module.
GARRELS,
M.
(2009G),
Drupal
http://www.drupalhandboek.be/sjabloon.
76
PHILLIPS, W. (2008), Cursus Kantoorautomatisering, les 08/12/2008, Universiteit Gent.
SCHOKKELÉ,
W.
(2009),
CSS:
Inleiding
tot
CSS,
gelezen
op
23/07/2009,
http://www.ivobrugge.be/cursusweb/css/inleiding.asp#div.
TECH FAQ (2009), Wat is een webbrowser, gelezen op 30/06/2009, http://nl.tech-faq.com/webbrowser.shtml.
VAN DER HAVE, M. (2009), Kleurenblind: Hoe ziet ons oog kleur?, gelezen op 23/07/2009, http://www.emday.nl/publicaties/kleurenblind/03_Kleurzien.html.
W3C (2009),
The
global
structure
of
a
HTML
document,
gelezen
http://www.w3.org/TR/REC-html40/struct/global.html.
WIKIPEDIA (2009A), PHP, gelezen op 23/07/2009, http://nl.wikipedia.org/wiki/PHP.
WIKIPEDIA (2009B), Drupal, gelezen op 23/07/2009,
WIKIPEDIA (2009C), Cron, gelezen op 23/07/2009, http://en.wikipedia.org/wiki/Cron.
77
op
30/06/2009,