Tips En Tools Voor Joomla - De Basis

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Tips en tools voor Joomla!

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Tips en tools voor Joomla! Professionele websites voor iedereen

Eric Tiggeler

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: Sdu Klantenservice Postbus 20014 2500 EA Den Haag tel.: 070 – 378 98 80 fax: 070 – 378 97 83 e-mail: [email protected]

Vormgeving en zetwerk: Redactiebureau Ron Heijer, Markelo Omslagontwerp: Scherphuis/Snijder, Assen Druk- en bindwerk: BalMedia, Schiedam

ISBN: 978 90 12 58040 3 NUR: 991 © Sdu Uitgevers bv, Den Haag, 2008 Alle rechten voorbehouden. Behalve de door de Auteurswet 1912 gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd (waaronder begrepen het opslaan in een geautomatiseerd gegevensbestand) en/of openbaar gemaakt door middel van druk, fotokopie, microfilm of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming van de uitgever. De bij toepassing van art. 16b en 17 Auteurswet 1912 wettelijk verschuldigde vergoedingen wegens kopiëren dienen te worden voldaan aan de Stichting Reprorecht, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) 799 78 10. Voor het overnemen van een gedeelte van deze uitgave in bloemlezingen, readers en andere compilatiewerken op grond van art. 16 Auteurswet 1912 dient men zich te wenden tot de stichting PRO, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) 799 78 09. Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system of any nature, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of the publisher. While every effort has been made to ensure the reliability of the information presented in this publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Inhoud

Inleiding 1 Een cms, hoe werkt dat? 1.1 1.2 1.3 1.4

Wat is een cms? Wat is het verschil met het werken aan een gewone site? Hoe installeer je Joomla? Hoe werk je met Joomla? 1.4.1 Wat is de frontend? 1.4.2 Wat is de backend? 1.4.3 Wat zijn de belangrijkste bedieningsknoppen?

2 Hoe begin je met Joomla? 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

Een website in een uur Hoe kleed je de standaardsite uit? Hoe pas je het uiterlijk van de site aan? Hoe voeg je inhoud toe? De drie basisstappen van Joomla Hoe vul je de homepage? Hoe voeg je een enquête toe? Hoe voeg je een reactieformulier toe? Hoe nu verder?

3 Hoe bedenk je een gebruikers­vriendelijke indeling? 3.1 3.2 3.3 3.4

Hoe werkt dat, indelen in drie niveaus? Kan het ook zonder die drie niveaus? Een vast indelingssysteem, is dat niet ongebruiks­vriendelijk? Welke instellingen kies je bij het maken van secties en categorieën? 3.4.1 Hoe voeg je een sectie toe? 3.4.2 Hoe voeg je een categorie toe?

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

ix 1 1 2 4 5 6 8 10 13 13 14 17 20 28 30 32 34 37 37 39 39 41 41 44

Tips en tools voor Joomla

4 Verschillende soorten webpagina’s: hoe maak je ze in Joomla? 45 4.1

4.2

4.3

4.4

Hoe maak je de homepage? 4.1.1 Hoe selecteer je welke artikelen op de Front Page komen? 4.1.2 Hoe pas je de volgorde van items in de Front Page aan? 4.1.3 Hoe pas je de Front Page verder aan? 4.1.4 Iets anders op de homepage, kan dat ook? Hoe maak je overzichtspagina’s? 4.2.1 Hoe maak je een overzichtspagina in een Blog Layout? 4.2.2 Hoe pas je de Blog Layout aan? 4.2.3 Hoe maak je een overzichtspagina in een List Layout? 4.2.4 Hoe kun je de Section List Layout aanpassen? 4.2.5 Hoe kun je de Category List Layout aanpassen? 4.2.6 Hoe kun je de List Layout verder aankleden? Wanneer kies je een Blog Layout en wanneer een List Layout? Hoe maak je een gewone pagina? 4.3.1 Hoe voeg je een afbeelding toe? 4.3.2 Hoe verdeel je een langer artikel in meerdere pagina’s? 4.3.3 Hoe verdeel je een artikel in introtekst en vervolgtekst? 4.3.4 Hoe stel je de algemene voorkeuren in voor artikelen? Hoe maak je een archiefpagina?

5 Hoe maak je menu’s? 5.1 5.2

5.3 5.4 5.5 5.6

Hoe stel je een menu samen? Hoe maak je een nieuw menu? 5.2.1 Hoe pas je de eigenschappen van het menu aan? 5.2.2 Wat voor soorten menulinks kun je maken? Hoe maak je submenu’s? Hoe maak je gekoppelde menu’s? Menu’s en usability: hoe hou je de klikstroom kort? Hoe maak je hyperlinks in artikelen?

6 Hoe breid je de mogelijkheden uit? 6.1 6.2 6.3 6.4 6.5

vi

Wat zijn extensies? Hoe installeer je nieuwe extensies? Hoe regel je de instellingen van een extensie? Welke extensies zitten er al standaard in Joomla? Welke extensies moet je zeker hebben? 6.5.1 Hyperlinks maken in artikelen 6.5.2 Tekstverwerken met de Joomla Content Editor Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

48 49 49 51 57 59 60 62 70 70 74 75 78 79 84 85 87 88 92 95 95 96 100 103 104 107 108 109 113 113 115 115 119 122 122 126

Inhoud

6.5.3 6.5.4 6.5.5 6.5.6 6.5.7 6.5.8

Teasers aan een pagina toevoegen 131 Een pagina verdelen met tabs 135 Content plaatsen waar je maar wilt 140 Automatisch een complete inhoudsopgave van een sectie maken 144 Afbeeldingen laten zien in een lightbox 148 Zoekmachinevriendelijke url’s maken 151

7 Hoe zet je de lay-out naar je hand? 7.1 7.2 7.3 7.4 7.5 7.6

Hoe ontjoomla je een website? Hoe kom je aan templates? Hoe installeer je een template? Een template aanpassen Een template die niet op een template lijkt, kan dat ook? Zelf een template maken

8 Wat is de efficiëntste manier van werken? 8.1 8.2 8.3 8.4 8.5

Welke browser moet je gebruiken? Hoe kun je snel schakelen tussen frontend en backend? Hoe kun je je werkomgeving bewaren? Hoe pas je gemakkelijk de css-stijlen aan? Welke ontwikkeltools zijn er nog meer?

Bijlage: Joomla installeren 1 2 3 4 5 6

Download de Joomla-bestanden Plaats de bestanden op de webserver Maak een database aan Installeer Joomla De taal instellen op Nederlands De basisinstellingen aanpassen

Register

155 155 156 157 161 165 169 171 171 171 174 175 179 183 184 184 184 185 194 195 201

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

vii



Inleiding

Joomla, een webrevolutie

Je wilt een website bouwen die goed te onderhouden is, prettig te gebruiken en een eigentijdse uitstraling heeft. Als je dan gebruikmaakt van een contentmanagementsysteem zoals Joomla, gaat dat stukken makkelijker. De site ontwerpen, de content up-to-date houden, extra’s toevoegen: met Joomla hoef je geen webprofessional meer te zijn om toch heel professionele resultaten te krijgen. Of je nu een persoonlijke weblog wilt maken, een kleine site van een vereniging of een omvangrijke corporate website, Joomla brengt het binnen ieders bereik. Het content­ managementsysteem (cms) is een revolutionaire tool: wat de tekstverwerker jaren geleden betekende voor het publiceren op papier, betekent het contentmanagementsysteem voor het publiceren op het web. Het cms Joomla is dan ook een enorm succes. Het is de motor achter zo’n 20 miljoen sites wereldwijd en het eind van de groei is nog lang niet in zicht. Geen wonder, want het biedt alle voordelen van een state-of-the-art contentmanagementsysteem. Het is relatief gemakkelijk te gebruiken, je kunt het uitbreiden met een grote hoeveelheid extra functies en het is opensourcesoftware, die gratis beschikbaar is en voortdurend wordt doorontwikkeld door een internationaal team van vrijwilligers.

Hoe maak je de overstap? Hoe aantrekkelijk websites maken met Joomla ook lijkt, toch is er een drempel om ermee te beginnen. Werken met zo’n uitgebreid systeem is heel anders dan werken aan een ‘gewone’ website. Hoe begin je, hoe vind je je weg in het cms, en hoe bouw je de site die jóú voor ogen staat? Dit boek is bedoeld om die stap over de drempel makkelijker te maken. Of je nu een kleine of grote site wilt bouwen, Tips en tools voor Joomla! legt uit hoe je het aanpakt. Met de nadruk op de praktijk: het gaat niet om wat Joomla allemaal kan, maar om wat jij kunt met Joomla. Het gaat om de resultaten die je wilt bereiken en problemen die je wilt oplossen: ‘hoe krijg ik dat voor elkaar met Joomla?’

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Tips en tools voor Joomla!

Tips en tools voor Joomla! besteedt veel aandacht aan het eindproduct: verschillende soorten pagina’s, en hoe je die maakt in Joomla. Hoe krijg je de homepage zoals je hem hebben wilt, hoe maak je een slim ingedeelde contentpagina, hoe maak je logische menu’s? Uiteindelijk draait het daarbij altijd om de bezoeker: hoe bied je die een aantrekkelijke, goed te gebruiken website? Dat kan uitstekend met Joomla, maar je moet wel de juiste keuzes maken om het gebruiksgemak van je site te vergroten.

Voor wie? Tips en tools voor Joomla! is bedoeld voor iedereen die een site wil bouwen en daarbij alle voordelen van Joomla wil benutten. Technische begrippen en webjargon zijn tot het uiterste beperkt. Natuurlijk kunnen we om centrale begrippen als html en css niet heen, maar in het boek vind je verwijzingen naar websites die je meer over die basisbegrippen uitleggen. Het is meegenomen als je al ervaring hebt met ‘ouderwetse’, statische sites, maar je hoeft geen ervaring te hebben met programmeren of coderen – het bijzondere aan Joomla is nu juist dat je het uiterste uit je nieuwe website kunt halen zonder ook maar een regel in een programmeer- of scripttaal te hoeven schrijven. Die laagdrempeligheid is ook het uitgangspunt van dit boek.

De opbouw van dit boek Tips en tools voor Joomla! begint met een kort hoofdstuk over de achtergrond van Joomla en stapt dan meteen over naar de praktijk van het webbouwen: een sitestructuur bedenken, pagina’s en menu’s maken, uitbreidingen toevoegen en de lay-out aanpassen. Elk hoofdstuk beantwoordt één hoofdvraag: 1 2 3 4 5 6 7 8

Een cms, hoe werkt dat? Hoe begin je met Joomla? Hoe bedenk je een gebruikersvriendelijke indeling? Verschillende soorten webpagina’s: hoe maak je ze? Hoe maak je menu’s? Hoe breid je de mogelijkheden uit? Hoe zet je de lay-out naar je hand? Wat is de efficiëntste manier van werken?

De uitgebreide inhoudsopgave bij dit boek kun je gebruiken als een FAQ: als je een gerichte vraag hebt, kies je eerst de hoofdvraag waar die kwestie onder valt, en dan vind je daaronder alle vragen die met dat onderwerp te maken hebben.



Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Inleiding

Tot slot Met Tips en tools voor Joomla! heb ik een boek willen schrijven dat heel veel praktische informatie bundelt die ik zelf bij het webbouwen stukje bij beetje verzameld heb vanuit de meest uiteenlopende bronnen – van websites uit Costa Rica tot Engelse, Nederlandse en Duitse handboeken. Dit boek geeft je antwoord op concrete vragen die je gaandeweg krijgt wanneer je Joomla wilt inzetten als serieus webgereedschap. Ik hoop dat je het daarbij inderdaad kunt gebruiken, dat het je verder helpt bij praktijkproblemen en je veel uitzoekwerk bespaart. Heb je vragen, opmerkingen, wil je meer weten? Kijk op www.joomla.erictiggeler.nl voor aanvullende informatie, updates op het boek, een FAQ en een reactieformulier.

Een paar afspraken V Je schrijft Joomla officieel met een uitroepteken. Zo staat het ook op het omslag van

dit boek. Maar in het boek zelf staat gewoon Joomla, omdat een uitroepteken midden in de zin nogal opvalt en soms verwarrend is. V Het teken > betekent ‘doorklikken naar’: bijvoorbeeld Extensions > Module Manager > Main Menu betekent ‘Ga naar Extensions, klik op Module Manager, klik op Main Menu’. V Tussen vierkante haken staan namen die je zelf moet invullen, omdat ze specifiek zijn voor jouw site. Bijvoorbeeld: Menus > Main Menu > [Naam van de link]. V Dit boek is gebaseerd op de Engelstalige versie van Joomla. Je zult dus Engelse begrippen tegenkomen, maar als je de Nederlandse versie gebruikt, maakt dat niet uit. De meeste centrale begrippen (extensions, articles, menu enz.) verschillen in het Engels en Nederlands nauwelijks van elkaar. Waar dat wel zo is, geef ik de Nederlandse term tussen haakjes.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

xi

1 Een cms, hoe werkt dat?

Een andere manier van websites bouwen

Wat is anders aan een site gebaseerd op een contentmanagement­ systeem, als je het vergelijkt met ‘gewone’, statische sites? Het kost misschien wat moeite om de principes door te krijgen, maar daarna pluk je de vruchten: een site die je veel makkelijker aanpast, uitbreidt en onderhoudt. In dit eerste hoofdstuk lees je meer over die principes. Wat maakt werken met Joomla anders, wat zijn de belangrijkste functies?

1.1  Wat is een cms? Een contentmanagementsysteem (cms) stelt je in staat om professionele websites te maken zonder dat je uitgebreide kennis nodig hebt van programmeertalen. Het bevat allerlei functies die je met een gewone, statische website niet of niet makkelijk voor elkaar krijgt: een zoekfunctie, de mogelijkheid voor je bezoekers om commentaar te geven op artikelen, forums, enzovoort. Bovendien hoef je een site die door een cms wordt aangestuurd, niet alléén te onderhouden: ook andere gebruikers kunnen inhoud plaatsen. Een cms kun je zien als een krachtige ‘publiceermachine’: installeer de machine, zet een paar knoppen om, stop er content in en je hebt een gemakkelijk aan te passen en voortdurend uit te breiden website. De kracht van Joomla is daarbij niet alleen dat het een vrij eenvoudig cms is om mee te leren werken, maar ook dat het voortdurend wordt doorontwikkeld en uitgebreid. Er is wereldwijd een enorme community die zich inzet om Joomla zelf te ontwikkelen en te verbeteren, maar ook om nieuwe toevoegingen (extensies) voor het systeem te maken. Wat kun je met een cms dat je ‘met de hand’ niet kunt? Een cms maakt het vooral mogelijk om de inhoud van je site makkelijk te beheren: je kunt nu al een berichtje schrijven voor de homepage van volgende maand, en Joomla zorgt er automatisch voor dat het verschijnt op de datum die jij bij het schrijven prikt. Maar ook het toevoegen en bijhouden van hyperlinks is een klus die met een cms veel makkelijker gaat: een statische website wordt al snel een onoverzichtelijke kluwen van pagina’s en hyperlinks. Het cms houdt hyperlinks voor je bij en zorgt er bijvoorbeeld voor dat, als je een nieuwspagina toevoegt, automatisch een link verschijnt in de lijst met ‘laatste nieuws’. Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Tips en tools voor Joomla!

Afbeelding 1.1  Met een cms voeg je zonder veel moeite extra’s toe, zoals automatisch bijgehouden hyperlinks naar hot topics of meest gelezen artikelen.

Een cms zoals Joomla kan zoveel functies bieden doordat het gebruikmaakt van de krachtige programmeertaal PHP en gekoppeld is aan een database.

G

Hoewel je weinig hoeft af te weten van html en css om met Joomla te werken, is het wel slim om van de basisbeginselen kennis te nemen. Dan sta je niet meteen voor verrassingen als je eens een keer onder de motorkap moet kijken. Als je zelf de lay-out van je site wilt aanpassen, dan is het zelfs een must om wat van css af te weten. Gelukkig zijn html en css geen ingewikkelde codetalen en zijn er veel goede websites die je een introductie geven. Een paar voorbeelden: n

http://www.handleidinghtml.nl/ n http://www.webontwikkelaar.nl/css/cursus/ n http://css.startpagina.nl/ geeft een overzicht

1.2  Wat is het verschil met het werken aan een gewone site? Werken met een cms verschilt sterk van het maken van ‘gewone’, statische websites, waarbij je pagina voor pagina maakt en die uploadt naar een webserver. In het editorscherm van bijvoorbeeld Dreamweaver bewerk je de webpagina die je bezoeker uiteindelijk ook in zijn browser ziet. Maar in Joomla bestáán geen webpagina’s. Joomla pakt stukje bij beetje 

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1  Een cms, hoe werkt dat?

de inhoud van de pagina bij elkaar uit een database. Alleen de bezoeker van je site ziet de volledige webpagina’s die Joomla samenstelt, jij als webbouwer of webredacteur werkt met de blokken waaruit de webpagina’s bestaan. Wat zijn dat voor blokken? Denk aan een blok met een menu, een blok met een afbeelding, een blok met artikeltekst, enzovoort. Welke blokken Joomla precies bij elkaar pakt, en in welke volgorde en lay-out die blokken op het scherm verschijnen, dat bepaal jij – niet per pagina, maar per blok. Via verschillende instellingen aan de achterkant van Joomla (de backend, zie 1.4.2) bepaal je bijvoorbeeld waar het blok mainmenu verschijnt, dat het hoofdmenu van de site bevat. In de Article Manager bepaal je welk artikel verschijnt in het ‘hoofdblok’ op de pagina, en met Module Manager kies je welke extra modules er op die pagina te zien zijn – denk bijvoorbeeld aan een banner of een newsflash. Het lijkt misschien onhandig: wil je één pagina beïnvloeden, dan moet je in Joomla de instellingen veranderen van de verschillende blokken op die pagina. Maar je moet het eigenlijk andersom zien: als je op één plaats in Joomla de instellingen van een blok verandert – bijvoorbeeld van een menu – dan stel je dat meteen in voor verschillende pagina’s tegelijk. En je kunt precies bepalen op welke pagina’s een blokje opduikt: het blok met de speciale aanbiedingen voor tuinliefhebbers kun je met een paar klikken alléén laten verschijnen op de homepage en in de rubriek tuinartikelen. Omdat één blok op heel veel pagina’s kan voorkomen, verander je door de instellingen van één blok soms het hele aanzien van de site. Die flexibiliteit is onmogelijk als je pagina voor pagina een statische site bouwt. Kortom, websites bouwen met Joomla betekent een nieuwe manier van werken, maar je krijgt er veel flexibiliteit voor terug. Hieronder zie je een illustratie van Joomla als ‘blokkendoos’. De sjabloon van de web­ pagina (de template) bevat lege vakken die je kunt vullen met blokken. In dit geval zijn die blokken de zoekmachine (bovenaan), het menu (in de linkerkolom), het broodkruimelpad, de centrale paginacontent (een introductiepagina bij dit onderdeel van de site), en in de rechterkolom een extra blok.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)



Tips en tools voor Joomla!

Afbeelding 1.2  De webpagina als blokkendoos. Op de achtergrond zie je de sjabloon van de website, dat Joomla vult met content. De bezoeker ziet één pagina, die in dit geval is samengesteld uit minstens vijf verschillende ‘contentblokken’.

1.3  Hoe installeer je Joomla? Joomla is een webapplicatie: software die je installeert op een webserver en waar je vervolgens online een website mee bouwt en onderhoudt. Een statische website bestaat vaak alleen uit ‘platte’ html-pagina’s; Joomla is een applicatie die voortdurend informatie opslaat naar en leest uit een database. Maar al is de achterliggende techniek wat ingewikkelder, bij vrijwel elke webhost kun je tegenwoordig terecht voor een hostingaccount die Joomla ondersteunt.



Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1  Een cms, hoe werkt dat?

Om Joomla te kunnen installeren, heb je dus een hostingaccount nodig; je huurt ruimte op het web. Een goed overzicht van webhostingbedrijven vind je via www.webhosters.nl/. Zodra je beschikt over hostingruimte op een webserver, kun je Joomla installeren in vier stappen: 1 2 3 4

Download de Joomla-bestanden van www.joomla.org. Plaats de bestanden via ftp op de webserver. Maak een database aan. Installeer Joomla via een online-installatieprocedure in je browser.

Uitgebreide instructies voor deze vier stappen vind je in de Bijlage: Joomla installeren. Hierna gaan we ervan uit dat je Joomla geïnstalleerd hebt en dat je beschikt over de mogelijkheid om bestanden te uploaden naar je site (ftp’en). Je kunt de volgende hoofdstukken ook volgen als je nog niet over Joomla beschikt, maar het is gemakkelijker als je zelf de stappen uit dit boek ‘live’ kunt uitproberen.

G

Joomla zelf installeren is een koud kunstje: als je een account hebt bij een webhost, en dus bestanden kunt uploaden en een database kunt aanmaken, dan is het in tien minuten gebeurd. Maar als je geen zin hebt om Joomla zelf te installeren, dan kun je ook kiezen voor een webhost die Joomla al voorgeïnstalleerd aanbiedt in zijn hostingpakket. Je hoeft dan niets zelf te doen om gebruik te maken van Joomla (of alleen op een knop ‘activeer Joomla’ te klikken). Googel eens op ‘webhosting Joomla’.

1.4  Hoe werk je met Joomla? Met Joomla bouw en onderhoud je een website online, in je browser. Dat betekent dat je vanaf elke plek met internettoegang je site kunt beheren. Dat doe je via de achterkant van Joomla: de backend, die alleen toegankelijk is voor beheerders van de site. Je moet inloggen met je gebruikersnaam en password om de backend te kunnen bereiken. Vervolgens kun je vanuit de backend de site-indeling aanpassen, artikelen toevoegen, enzovoort. Wat de bezoeker ziet van Joomla, is de voorkant: een website waar je niet aan merkt dat Joomla de motor is. De frontend is dus de website zoals de bezoeker die ziet.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)



Tips en tools voor Joomla!

Hieronder lees je eerst meer over deze twee centrale begrippen in Joomla: eerst over het eindproduct van je werk in Joomla, de frontend, dan over de backend, de werkruimte voor webontwikkelaar en -beheerder.

1.4.1  Wat is de frontend? De frontend bereik je via het webadres van de site, bijvoorbeeld www.mijnsite.nl. Na een standaardinstallatie van Joomla ziet de site eruit zoals op de afbeelding hieronder. Deze site bevat de voorbeelddata die Joomla standaard kan mee-installeren: de site is dus niet leeg, maar al gevuld met (Engelstalige) voorbeeldartikelen, afbeeldingen, menu’s en allerlei extra functies.

Afbeelding 1.3  Zo ziet Joomla eruit meteen na installatie.

Je krijgt zo in één klap een kant-en-klare website, vol toeters en bellen. Dat is trouwens meteen een risico van het installeren van Joomla inclusief voorbeelddata: de site zit wel erg vol met extra functies, en je moet vooral de verleiding weerstaan om die allemaal te handhaven als je je eigen site maakt. Het is immers maar de vraag of je bezoekers allemaal zitten te wachten op polls, newsflashes enzovoort. Maar de voorbeeldsite is wel een uitstekende illustratie van wat Joomla allemaal kan. Hieronder zie je wat de belangrijkste onderdelen en functies zijn. 

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1  Een cms, hoe werkt dat?

Afbeelding 1.4  De onderdelen van een webpagina nadat Joomla geïnstalleerd is met voorbeelddata.

De onderdelen van de frontend 1 De header, een afbeelding met het logo van de site. 2 De newsflashmodule: laat elke keer dat de pagina geopend wordt een ander willekeurig artikel zien. 3 Het topmenu: een menu aan de bovenkant van de pagina dat naar hoofdrubrieken leidt. 4 De zoekfunctie. 5 Het hoofdmenu (Main Menu). 6 Laatste nieuws (Latest News Module): links naar de meest recente nieuwsartikelen. 7 Populaire artikelen (Popular): links naar de meestgelezen artikelen. 8 Homepage-items: intro’s van geselecteerde artikelen. 9 Poll: mini-enquête. 10 Who’s online: hoeveel bezoekers zijn er op dit moment? 11 Banner: wisselende advertenties. Deze elf onderdelen zijn nog niet eens het maximale: er kan ook nog bijvoorbeeld een loginformulier zijn (dat geregisteerde gebruikers toegang geeft tot bepaalde pagina’s). Als

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)



Tips en tools voor Joomla!

een gebruiker is ingelogd, kan er een speciaal menu verschijnen dat hem de mogelijkheid geeft een artikel toe te voegen. Hoe de voorkant eruitziet, wordt niet alleen bepaald door welke onderdelen er ‘uit’ of ‘aan’ staan. De vormgeving van de site regel je met een template, een sjabloon dat de layout van alle pagina’s in de site bepaalt. Het is heel gemakkelijk om een andere template te laden en daarmee het uiterlijk van de site volledig te veranderen. Bij de installatie van Joomla vind je al enkele templates in de Template Manager (waaronder rhuk_milkyway, dat in het voorbeeld hierboven gebruikt is). Je kunt die templates aanpassen, je kunt je eigen template maken, maar op het web vind je bovendien duizenden uitstekende (vaak gratis) templates die je in een paar klikken kunt downloaden en installeren.

1.4.2  Wat is de backend? Je bereikt de backend van je site door /administrator toe te voegen aan het gewone web­ adres. Dus: www.mijnsite.nl/administrator. Je komt dan bij de achterdeur, de personeelsingang van je site. Je krijgt een inlogscherm:

Afbeelding 1.5  De personeelsingang: de backend van Joomla.

Hier vul je de gebruikersnaam in (standaard admin) en het password (dat je tijdens de installatieprocedure kiest; zie 9.4). Na het inlogscherm kom je in de eigenlijke backend. Dat is de beheeromgeving: hier vind je alle functies om bijvoorbeeld content toe te voegen of wijzigen, de indeling en de lay-out van de site te veranderen. 

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1  Een cms, hoe werkt dat?

Hieronder zie je hoe de startpagina (het Control Panel) van de backend eruitziet. Die startpagina geeft toegang tot alle functies die je als sitebeheerder nodig hebt.

Afbeelding 1.6  Op de startpagina van de backend staan knoppen voor veelgebruikte functies, zoals het toevoegen van een nieuw artikel.

De belangrijkste vijf onderdelen van deze pagina staan hieronder.

Afbeelding 1.7  De belangrijkste onderdelen van Joomla’s backend.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)



Tips en tools voor Joomla!

1 De menubalk met uitklapmenu’s die je toegang geven tot alle functies. n Site: o.a. gebruikersbeheer, bestandsbeheer, globale configuratie n Menus: beheer van de menu’s n Content: artikelen toevoegen, aanpassen, site-structuur indelen n Components: speciale functies, zoals banners en polls, beheren n Extensions: uitbreidingen (modules) en templates beheren n Tools: o.a. mails versturen n Help: Joomla-hulpfunctie 2 n Preview (overschakelen naar de frontend). n Informatie over o.a. aantal ingelogde gebruikers n Logout: uitloggen uit de backend 3 Knoppen naar veelgebruikte functies (die je ook kunt bereiken via de menubalk), bijvoorbeeld Add new article (nieuw artikel toevoegen). 4 Welkomstinformatie. Die zie je alleen na een nieuwe installatie; in de tekst zelf staan instructies hoe je deze informatie weghaalt. 5 Extra informatie: onder andere links naar recent toegevoegde artikelen.

1.4.3  Wat zijn de belangrijkste bedieningsknoppen? Bij alles wat je in Joomla doet, vind je boven aan het scherm de belangrijkste bedieningsknoppen. Welke knoppen dat zijn, hangt af van de pagina waar je je bevindt: op de pagina met menu’s (Menus > Menu Manager) vind je gedeeltelijk andere knoppen dan op de pagina met artikelen (Content > Article Manager). Veel knoppen zijn algemeen: functies als copy en delete gebruik je niet alleen bij artikelen, maar ook bijvoorbeeld bij menu’s. Hier zie je een voorbeeld van de knoppen in de Article Manager:

Afbeelding 1.8  De werkbalk van de Article Manager.

n n

n n n n n

10

Publish: een artikel op de site publiceren Unpublish: (een artikel) op de site depubliceren (verbergen, zonder het weg te gooien) Copy: kopiëren Delete: verplaatsen naar de prullenbak (Trash) Edit: bewerken New: een nieuw item maken. Bijvoorbeeld een nieuw artikel, of een nieuw menu. Help: Joomla-hulpfunctie oproepen

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1  Een cms, hoe werkt dat?

Afbeelding 1.9  De werkbalk past zich aan aan de activiteit waarmee je bezig bent.

De knoppen hierboven zie je onder andere als je een artikel bewerkt. n

n n n n

Preview: voorbeeld bekijken (het effect zien dat de wijzigingen hebben op de frontend van de site) Save: opslaan (en het huidige Joomlavenster sluiten) Apply: toepassen (zonder het huidige venster te sluiten) Cancel: annuleren (zonder veranderingen op te slaan) Help: Joomla-hulpfunctie oproepen

De functies van de knoppen in Joomla spreken voor zichzelf, maar let wel op het verschil tussen Apply (Toepassen) en Save (Opslaan). Klik op Apply om de wijzigingen die je op de pagina hebt aangebracht, op te slaan, zonder de pagina te sluiten. Je kunt bijvoorbeeld de tekst van een artikel bewerken en dan klikken op Apply en Preview, zodat je in een nieuw venster kunt controleren of het resultaat naar wens is. Wil je vervolgens nog wijzigingen aanbrengen in hetzelfde artikel, dan hoef je het niet opnieuw te openen. Pas als je ten slotte op Save klikt, dan wordt het artikel opgeslagen én je sluit het Joomla-venster waarin je aan het werk was.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

11

2 Hoe begin je met Joomla? Een snelrecept voor je site

Een website bouwen in Joomla kan in recordtempo: als je gebruikmaakt van de lay-out en de functies die Joomla al bij een standaardinstallatie bevat, heb je in een uur een volledige, professionele website online. Eventueel kun je later de site nog veel meer naar je hand zetten: dan bouw je gewoon verder op dezelfde basis.

2.1  Een website in een uur Stel je voor: je hebt het verzoek gekregen van een opdrachtgever om zo snel mogelijk een website te maken. De opdrachtgever is een semi-professioneel theaterensemble, DaNovaMusic, dat komend weekend al een optreden geeft. Maar het heeft nog geen website! Het bestuur vraagt of het mogelijk is om morgen al een functionele website online te hebben dat bezoekers van het concert en andere belangstellenden voldoende informatie geeft over het theaterkoor. Natuurlijk kan dat. Wat een paar jaar geleden nog voorbehouden was aan gespecialiseerde ontwerpbureaus en webontwikkelaars met diepgaande kennis van programmeer- en scripttalen, is met Joomla mogelijk met – bij wijze van spreken – een paar muisklikken. En zelfs als het binnen een uur moet, krijg je al mooie resultaten. Je past daarbij de standaard-Joomlasite zo aan, dat hij goed aansluit bij wat de opdrachtgever op het web wil presenteren. Je kunt daarbij ook veel verder gaan en bijvoorbeeld de vormgeving perfect op maat maken voor de opdrachtgever. Maar in dit scenario houden we het zo eenvoudig mogelijk – en presenteren toch een professionele site. Wat kun je in een uur bereiken? Dit staat op het wenslijstje: n n

n n

een eigen logo op de site en aangepaste kleuren een menuopbouw die het mogelijk maakt om de opdrachtgever zelf de tekstpagina’s te laten vullen een poll, om de interactie met de bezoekers te vergroten een reactieformulier. Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Tips en tools voor Joomla!

2.2  Hoe kleed je de standaardsite uit? Als je Joomla hebt geïnstalleerd met voorbeelddata (zie de Bijlage: Joomla installeren), beschik je in één klap over een complete website. In het vorige hoofdstuk zag je al hoe die eruitziet wanneer je Joomla op de standaardmanier hebt geïnstalleerd, inclusief alle voorbeelddata (Afbeelding 1.4 op pagina 7). Het is zinvol om die voorbeelddata te installeren als je Joomla voor de allereerste keer leert kennen. Je krijgt dan in plaats van een lege pagina een volledige website waarin je de verschillende pagina’s kunt verkennen en aanpassingen kunt uitproberen, zodat je een goede eerste indruk krijgt van de mogelijkheden. Maar zodra je zelf een site bouwt, heb je die voorbeelddata niet nodig. Om de site-in-een-uur te maken, verwijder je de voorbeelddata dus. Mocht je Joomla zonder voorbeelddata hebben geïnstalleerd, dan kun je de onderstaande twee stappen overslaan.

Stap 1: extra’s uitzetten Om te beginnen verwijderen we de extra’s: Joomla is standaard ingericht voor een grotere site, een portal met veel verschillende rubrieken en een actieve stroom nieuws. Voor ons doel is dat nu overbodig. Zet daarom een aantal onderdelen uit: verberg voor de webbezoeker de Joomla-modules die allerlei extra functies toevoegen. Denk daarbij aan menu’s, advertenties, banners enzovoort. Je verbergt die extra’s door modules uit te zetten. Dat doe je als volgt: n

n

n

Ga naar het webadres waar je Joomla geïnstalleerd hebt. Om in te loggen in de back­ end, voeg je administrator toe: www.mijnsite.nl/administrator. Log in: voer je username en password in. Zodra je aangemeld bent, zie je de start­ pagina van de backend. Schakel modules die overbodig zijn, uit. Ga naar Extensions > Module Manager. Je krijgt een overzicht van alle modules die op de site actief kunnen zijn, zoals menu­ modules en een bannermodule. In de kolom Enabled zie je of de module actief is, dat wil zeggen zichtbaar in de frontend.

Afbeelding 2.1  Met een klik op het vinkje bij Enabled verandert de status van de module: hij is nu voor de bezoeker niet meer zichtbaar.

14

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

n

n

n

Klik op het vinkje achter de module Banners. Het vinkje verandert in een kruis: de module is nu aan de voorkant van de site niet meer zichtbaar. Doe hetzelfde voor Banners, Example Pages, Advertisement, Resources, Login Form, Who’s Online, NewsFlash, Latest News, Popular, Syndication. Bekijk het resultaat: klik op Preview.

Afbeelding 2.2  Joomla uitgekleed: zonder inlogformulier, banner, advertentie enzovoort. Wat overblijft: de header, één menu, de ‘mainbody’ met content, en de module Polls (enquête). Een goede basis om de site zelf verder aan te passen en te vullen. Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

15

Tips en tools voor Joomla!

Stap 2: voorbeeldinhoud verwijderen Als je de site met voorbeelddata hebt geïnstalleerd, bevat die voorbeeldartikelen die ondergebracht zijn in secties en categorieën. Ook staan er allerlei menu-items in het hoofdmenu. Inhoud verwijderen gaat altijd van klein naar groot: eerst de artikelen, dan de categorieën waarin die artikelen zijn ondergebracht, en tot slot de secties waarbinnen die categorieën zijn ondergebracht. n n

n

Verwijder eerst de inhoud, de artikelen. Ga naar Content > Article Manager. Klik helemaal onderaan het scherm op Display #: All, zodat je alle artikelen van de site in beeld krijgt. Zet een vinkje in het selectievakje bovenaan de linkerkolom (naast #). Daarmee selecteer je meteen alle items in die kolom:

Afbeelding 2.3  Met een vinkje helemaal bovenaan in de kolom selecteer je alle items.

n n

Klik op Trash (de prullenbak). Bevestig dat je alle artikelen wilt verwijderen. Je moet de artikelen nu nog uit de Trash definitief verwijderen. Ga naar Content > Article Trash, selecteer alle artikelen en klik op Delete. Bevestig dat je de artikelen wilt verwijderen.

Verwijder nu de categorieën en secties die Joomla voor de artikelen had aangemaakt: n

n

16

Ga naar Content > Category Manager. Zet een vinkje om alle categorieën te selec­ teren. Klik op Delete. Ga naar Content > Section Manager. Zet een vinkje om alle categorieën te selecteren. Klik op Delete.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Je hebt nu een bijna lege site:

Afbeelding 2.4  Alle content is verdwenen, op de hyperlinks in het hoofdmenu na.

Tot slot hoef je alleen nog het Main Menu te legen. Dat gebeurt op een vergelijkbare manier: ga naar Menus > Main Menu, zet een vinkje om alle menu-items te selecteren en klik op Trash. Je krijgt nu een melding dat alle menu-items verwijderd zijn (naar de menuprullenbak Menu Trash), op één na: het menu-item Home. Dat is essentieel voor een goede werking van Joomla, dus dat blijft altijd staan.

2.3  Hoe pas je het uiterlijk van de site aan? Het logo veranderen Om te beginnen vervang je het Joomlalogo door het logo van de opdrachtgever van de nieuwe site. Het oorspronkelijke Joomlalogo is 298 pixels breed x 75 pixels hoog. Dat is vrij smal, omdat Joomla standaard ruimte houdt voor een newsflash naast het logo. Die ruimte hebben we niet nodig: voor de nieuwe site maken we daarom (in Photoshop, maar het kan natuurlijk in elke grafische editor) een logo van 500 x 75 pixels. n

Sla het logobestand op als png-bestand, bij voorkeur met een transparante achtergrond. Zo past het logo goed in de achtergrondkleur van de pagina. In dit geval geven we het logo de naam danovalogo.png. Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

17

Tips en tools voor Joomla!

n

Het oorspronkelijke Joomlalogo heet mw_joomla_logo.png. Je vindt het in de map images van de huidige template: httpdocs/templates/rhuk_milkyway/images/mw_joomla_ logo.png. Upload je nieuwe logo met een ftp-programma naar diezelfde map. n Pas nu de stylesheet van de site aan, zodat er ruimte ontstaat voor het bredere logo. De stylesheet moet bovendien verwijzen naar je nieuwe afbeeldingsbestand. Ga naar Extensions > Template Manager en klik op rhuk_milkyway. Klik op Edit CSS en selecteer template.css. Nu kun je de css-code van de template aanpassen: n Zoek de css-stijl met de naam div#logo. Verander de breedte (width) tot 500 pixels en pas de verwijzing naar het logobestand aan (background: url). De css-stijl moet er dan zo uitzien:

n

Klik op Preview.

Afbeelding 2.5  Het Joomlalogo is vervangen.

Kleuren van de template aanpassen Op het scherm in afbeelding 2.5 is nog iets aangepast: de achtergrondkleur van de pagina is zwart, de rand om het hoofdmenu is rood. Zo passen de kleuren van de pagina beter bij die van het logo. Hoe kun je de basiskleuren van de site aanpassen? Bij de template rhuk_milkyway kun je kiezen uit verschillende kleurencombinaties. Dat is niet bij elke template zo: de template18

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

ontwerper kan dit soort extraatjes inbouwen. Je vindt zulke opties dan bij de parameters van de template. In dit geval heeft de template een paar parameters waarmee je de hoofdkleuren kiest. n n

Ga naar Extensions > Template Manager en klik op rhuk_milkyway. Kies bij Parameters voor Color Variation: Red en Background Variation: Black.

Afbeelding 2.6  Met de parameters van de template rhuk_milkyway kun je het kleurschema veranderen. n

Klik op Preview. De oorspronkelijke kleur (blauw) is nu verdwenen uit de achtergrond en de menurand.

Laatste stukje van horizontaal menu opruimen Als je het menu bovenaan de pagina verwijdert (depubliceert), blijft er nog een stukje van over: in het midden staan twee halve bolletjes tegen elkaar aan.

Afbeelding 2.7  Als je het horizontale menu verwijdert, blijft een ongewenst stukje menuopmaak in beeld.

Daar staan normaal gesproken de menulinks tussen van het horizontale menu (het zogenoemde pill menu). Je verwijdert de bolletjes door een paar regels te schrappen in het css-bestand. n

Ga naar Extensions > Template Manager en klik op rhuk_milkyway. Klik op Edit CSS en selecteer het bestand template.css. Klik op Edit. n Selecteer nu de css-code vanaf /horizontal pill menu */. Dat is het stuk van de stijl table. pill tot en met de stijl #pillmenu a#active_menu-nav (die eindigt met background-position: 0 0;} ). n Omdat we het horizontale menu in deze site nooit zullen gebruiken, verwijderen we deze stijlen. n Klik op Save en klik op Preview. n

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

19

Tips en tools voor Joomla!

Voettekst verwijderen

Afbeelding 2.8  De standaard-voettekst. n

Tot slot kun je nog de voettekst verwijderen (of vervangen door andere tekst). Je vindt die tekst in de template. n Ga naar Extensions > Template Manager en klik op rhuk_milkyway. n Klik op Edit HTML. Zoek naar de volgende tekst en selecteer die:

Joomla!. XHTML CSS.

n

Klik op de Delete-toets. Klik op Preview: de voettekst is verdwenen.

2.4  Hoe voeg je inhoud toe? De drie basisstappen van Joomla Als je ‘gewone’ html-sites maakt, voeg je pagina’s toe in twee stappen: je maakt een pagina, en brengt een link naar die pagina aan. In Joomla gaat daar iets aan vooraf: je moet de pagina eerst rubriceren. Je moet hem onderbrengen in een sectie en een categorie. Nieuwe contentpagina’s maken gaat altijd in deze drie stappen: (1) maak een sectie en een categorie, (2) maak een artikel, (3) maak een menulink. Die volgorde ligt vast. Je kunt geen contentpagina publiceren zonder dat je een sectie/categorie hebt om de pagina aan vast te maken. En je kunt geen link aanmaken naar een artikel dat nog niet bestaat (zie afbeelding 2.9). Voor de site-in-een-uur zet je die drie stappen hieronder met zevenmijlslaarzen aan. In de volgende hoofdstukken lees je er nog veel meer over, want deze vormen de basis van het werken met Joomla.

20

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Afbeelding 2.9  De volgorde waarin je een webpagina maakt. Er moeten eerst een sectie en categorie zijn, dan kun je content (artikelen) maken, tot slot kun je een link daarnaartoe aanbrengen.

Stap 1: maak een sectie en een categorie n

Ga naar Content > Section Manager. Klik op New. Vul het veld Title in: Nieuws. Klik op Save. Je hebt een sectie gemaakt. n Ga naar Content > Category Manager. Klik op New. n Vul alleen het veld Title in: Recente optredens. Klik op Save. Je hebt een categorie gemaakt.

Stap 2: maak een artikel n

n

n

n n

n

n

Ga naar Content > Article Manager. Klik op New. In de editor die nu verschijnt, schrijf je het artikel (zie afbeelding 2.10). Typ in het vak Title de titel van het artikel (in het voorbeeld Spetterende show in Brussel) en in het vak Alias nogmaals die titel, nu in kleine letters en met streepjes (spetterendeshow-in-brussel). Kies bij Section voor Nieuws, en bij Category voor Recente optredens. Nu zie je waarom je pas een artikel kunt schrijven als er een sectie en artikel voor zijn: daarzonder kun je het niet toewijzen aan de juiste plaats in Joomla’s sitestructuur. Voeg nu (willekeurige) tekst toe in het editorscherm. Klik na de eerste alinea op de knop Readmore onder aan het editorscherm. Er verschijnt een rode stippellijn. Door deze scheiding kan Joomla het intro (de eerste zinnen) desgewenst apart afbeelden op onder andere de homepage, met een Lees meerlink erbij voor lezers die willen doorklikken. Voeg een afbeelding in. Klik op de knop Image onder aan het editorscherm. Selecteer in het popupscherm een afbeelding. Je kunt ook een afbeelding uploaden: klik op Browse files, kies het bestand en klik Start Upload. Klik op Insert (de knop rechtsboven). Het popupscherm sluit (zie afbeelding 2.11). Klik op Save. Het artikel is klaar.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

21

Tips en tools voor Joomla!

Afbeelding 2.10  In dit scherm schrijf je nieuw artikel.

Afbeelding 2.11  In dit popupscherm selecteer je een afbeelding. Met Insert voeg je die afbeelding in.

22

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Stap 3: voeg een menulink toe n

Ga naar Menus > Main Menu. n Kies bij Menu Item Type: Articles > Section Blog Layout. n Vul bij Title in Nieuws. Selecteer onder Parameters – Basic de sectie Nieuws. Klik op Save.

De site is af! Nou vooruit, de site is nog niet helemaal af. Maar de basis wel: je hebt een vormgeving, en je hebt een sitestructuur, mét een artikel. Op het web ziet de site er nu uit zoals je hieronder ziet. De homepage is nog leeg, maar bevat wel de menulink Nieuws uit stap 4:

Afbeelding 2.12  De lege homepage.

Als de bezoeker klikt op Nieuws, komt hij uit bij een overzichtspagina van de sectie Nieuws. Die pagina heeft Joomla ‘vanzelf’ toegevoegd doordat je er een menulink naar hebt gemaakt! Op die overzichtspagina staat nu nog maar het intro van één artikel:

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

23

Tips en tools voor Joomla!

Afbeelding 2.13  De sectie Nieuws.

Klikt de bezoeker op Lees meer, dan komt hij uit bij het volledige artikel. Je ziet dat het broodkruimelpad boven het artikel de structuur volgt die je met secties en categorieën aanbrengt: van Home naar de sectie Nieuws naar het in de categorie Recente optredens ondergebrachte artikel Spetterende show in Brussel (zie afbeelding 2.14).

De site verder vullen met content Als je de site met meer content wilt vullen, herhaal je de stappen 1 tot en met 3. Deze voorbeeldsite krijgt in totaal drie secties. Maak nu die ‘containers’ (de secties en categorieën, stap 1), en maak de content (de artikelen, stap 2). Je werkt aan een resultaat dat er in schema zo uitziet:

24

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Afbeelding 2.14  De pagina met het volledige artikel uit de sectie Nieuws.

Hierna zie je diezelfde siteopbouw uit het schema terug in de Article Manager, nadat alle secties, categorieën en artikelen zijn toegevoegd. Helemaal rechts staan secties en categorieën, links staan de titels van de artikelen.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

25

Tips en tools voor Joomla!

Afbeelding 2.15  Een overzicht van de content van de complete site: alle artikelen en de secties en categorieën waar ze onder vallen.

Als je secties, categorieën en artikelen hebt toegevoegd tot je de bovenstaande lijst hebt, maak je die inhoud toegankelijk via het menu (stap 3 hierboven). Aan het Main Menu voeg je twee hyperlinks toe, allebei van het type Section Blog Layout. Dat laatste betekent dat die links leiden tot overzichtspagina’s van de geselecteerde secties. Je voegt de links als volgt toe: n

Maak via Menus > Main Menu > New een hyperlink van het Menu Item Type Articles > Section Blog Layout, met de titel Wie zijn wij, en met als doel de sectie Wie zijn wij. n Maak op dezelfde manier een hyperlink Wat zingen wij, van hetzelfde type, met als doel de sectie Repertoire. Hieronder zie je het resultaat. In het Main Menu (Menus > Main Menu) staan nu in totaal vier menu-items:

Afbeelding 2.16  De inhoud van het Main Menu.

26

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Aan de voorkant begint de site nu al veel meer op een complete website te lijken. Hier zie je de overzichtspagina van de rubriek Nieuws. Doordat we drie nieuwe artikelen hebben toegevoegd aan de categorieën onder de sectie Nieuws, worden die artikelen automatisch als intro’s op de overzichtspagina van de sectie Nieuws getoond. Plaats je in die intro’s ook nog een afbeelding, dan krijg je een aantrekkelijke pagina:

Afbeelding 2.17  De homepage bevat nu een selectie van (intro’s van) artikelen op de site.

Nog een voorbeeld: dit is wat de bezoeker ziet als hij klikt op Wie zijn wij. Ook hier een pagina met een greep uit de inhoud van de sectie.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

27

Tips en tools voor Joomla!

Afbeelding 2.18  De overzichtspagina van de sectie ‘Wie zijn wij’.

2.5  Hoe vul je de homepage? Aanvinken welke informatie op de homepage komt De homepage toont een aantal intro’s en links naar artikelen op de site. Maar de homepage wordt niet vanzelf gevuld. Of een artikel daar verschijnt, bepaal je bij het artikel zelf: als je dat schrijft of bewerkt, zie je een optie Front Page. Klik op Yes, en het artikel wordt opgenomen op de homepage.

Afbeelding 2.19  Bij de artikeleigenschappen bepaal je of het artikel op de Front Page verschijnt.

28

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Je kunt ook via Content > Article Manager klikken op het kruisje in de kolom Front Page. Het kruisje verandert in een vinkje: het artikel wordt nu op de homepage getoond.

Afbeelding 2.20  De Article Manager biedt een snelle manier om artikelen op de Front Page te publiceren.

In de voorbeeldsite vinken we voor drie artikelen in de Article Manager aan dat ze op de homepage moeten verschijnen: DaNovaMusic zingt nu ook klassiek, De vrouwen van DaNovaMusic, Over ons jazzrepertoire. Hieronder zie je het resultaat:

Afbeelding 2.21  Drie artikelen op de Front Page. Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

29

Tips en tools voor Joomla!

Hoe verander je de koptekst op de homepage? Standaard staat boven de homepage-artikelen de kop ‘Welcome to the Front Page’. Die verander je als volgt. n

Ga naar Menus > Main Menu. Klik op Home. n Verander de tekst onder Parameters – System > Page Title. Wil je geen kop, laat het tekstvak dan leeg. n Klik op Save. n

Hoe verander je de volgorde van de items op de homepage? n n

Ga naar Content > Front Page Manager. Je ziet welke artikelen op de Front Page verschijnen. Met de pijltjes in de kolom Order pas je de volgorde van die items aan.

2.6  Hoe voeg je een enquête toe? Zelfs zonder daar iets voor te doen, heb je al de beschikking over extra functies in de website tot nu toe: zo heb je standaard een zoekmachine en een dynamisch broodkruimelspoor, dat zich aanpast aan de locatie van de bezoeker en hem helpt om te navigeren over de site. Maar je kunt nog veel andere extra’s toevoegen. Echte interactiviteit bijvoorbeeld, in de vorm van een poll, een enquête van één vraag waaraan de bezoeker van de site voor de aardigheid kan meedoen. Ga naar Components > Poll en klik op New.

Afbeelding 2.22  In het scherm Poll vul je de details in van een enquête.

30

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

n n n

n n n

Vul de Title in: kies een nieuw nummer voor ons repertoire. Vul een Alias in: kies-een-nieuw-nummer. De Lag kun je onveranderd laten. Een bezoeker mag binnen één dag (de standaardLag van 86.400 seconden, ofwel 24 uur) maximaal één keer stemmen. Klik bij Published op Yes. Vul in de velden met Options de opties in waaruit de bezoekers mogen kiezen. Klik op Save.

De poll moet nu nog een positie krijgen: op welke pagina’s en wáár op die pagina’s moet de poll verschijnen? Dat bepaal je via Extensions > Module Manager. Klik daar op de module Poll. n n n n n

n

Vul de Title in: Stem! Show Title: Yes. Position: Right. De enquête verschijnt in de rechterkolom. Menu Assignment: All. De enquête verschijnt op alle pagina’s. Module Parameters: kies de Poll die je hebt aangemaakt, dus Kies een nieuw nummer voor ons repertoire. Klik op Save en klik op Preview.

Vanaf nu verschijnt de Poll op alle pagina’s. De bezoeker kan een keuze maken, klikken op Stem en de resultaten bekijken.

Afbeelding 2.23  De poll verschijnt in de rechterkolom.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

31

Tips en tools voor Joomla!

G

Je kunt polls niet alleen gebruiken om een keus te geven uit verschillende antwoorden, maar ook voor een simpele vraag of stelling met het antwoord ja/nee of eens/oneens.

Afbeelding 2.24  Een poll om de lezer te laten reageren op een stelling (www.echo.nl).

2.7  Hoe voeg je een reactieformulier toe? Het laatste onderdeel uit de wensenlijst van de opdrachtgever: de bezoeker moet contact kunnen opnemen via een reactieformulier.

Bepaal de contactpersoon n

Maak een contactpersoon aan: iemand wiens (mail)adres en andere bereikbaarheidsgegevens op de site komen te staan. Je kunt een uitgebreid systeem aanleggen met lijsten contactpersonen per afdeling, maar in dit geval volstaat één naam en mailadres. Je voert die gegevens in via Components > Contact Manager. Er zijn nog geen contactpersonen; klik dus op New. n Vul een naam in van de contactpersoon: in dit geval Management DaNovaMusic. Kies als Category: Contacts. Onder Information is alleen E-mail voor ons doel belangrijk: daar wordt het formulier naartoe verstuurd. De overige informatie kun je invullen als je die op de formulier­ pagina wilt publiceren, maar nodig is dat niet. Handig is het vak Miscellaneous information: daar kun je een korte toelichting opnemen. n Bij de Contact Parameters kun je aangeven of je de contactgegevens ook wilt tonen op de contactpagina. Voor een informatieformulier is niet meer nodig dan een e-mailadres dat je invult bij Information. Daarmee werkt het formulier. Je hoeft dat adres (of andere contactgegevens) niet te publiceren – tenzij je dat wilt, natuurlijk, om de bezoeker meer mogelijkheden te geven om te reageren. n Tot slot is bij de Advanced Parameters van belang dat E-mail form op Show staat. Zo niet, dan verschijnt er wel informatie over de contactpersoon op de pagina, maar geen contactformulier.

32

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Maak een menulink Nu je een contactpersoon hebt opgegeven, kun je een link aanbrengen naar een reactieformulier. Dat doe je zo: n

Ga naar Menus > Main Menu. Klik op New. n Kies bij Menu Item Type voor Contacts > Standard Contact Layout. n Vul een Title in voor het menu-item (bijvoorbeeld: Neem contact op) en een alias (neem-contact-op). n Kies onder Parameters-Basic de contactpersoon die je net hebt aangemaakt: n

Afbeelding 2.25  De Parameters – Basic van de Standard Contact Layout. n

Klik op Save. De site beschikt nu over een link Neem contact op en een reactieformulier:

Afbeelding 2.26  De site beschikt over een contactformulier.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

33

Tips en tools voor Joomla!

2.8  Hoe nu verder? De één-uur-website is compleet. Hieronder zie je het resultaat. Om te laten zien hoe je de site met weinig moeite nog verder aankleedt, bevat de site nog wat extra blokken: in de linkerkolom staat een afbeelding van een gitaarspeler, rechts een tekstblokje Over DaNova. Beide blokken zijn zogenoemde Custom HTML-blokken; daarover lees je meer in 6.4.

Afbeelding 2.27  De één-uur-website is compleet. In deze site zijn nog maar de basismogelijkheden van Joomla toegepast.

34

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

2  Hoe begin je met Joomla?

Met weinig moeite bereik je in Joomla een gelikte website – al is het nog maar een basissite. Met wat meer inspanning krijg je een nog veel geavanceerder resultaat. Wat die extra inspanning precies inhoudt, dat lees je in de volgende hoofdstukken. Daar bouw je verder op de kennis die je hier hebt opgedaan: de principes die gelden voor de site-in-een-uur, gelden ook voor elke andere Joomlasite. Maar als je meer dan een uur neemt, kun je de vormgeving verfijnen en de site uitbreiden met allerlei functies.

En als je een heel andere vormgeving wilt? Is de website-in-een-uur je toch te standaard? Verander dan de basislay-out van je site door een andere template te installeren. Het is weinig werk, en het effect is groot. Hieronder zie je hoe een andere template is toegepast op de site van DaNovaMusic. Met – letterlijk – een paar muisklikken heb je een volledig andere uitstraling. Hoe je templates installeert, lees je in 7.3.

Afbeelding 2.28  Een voorproefje van het effect van templates: in één klap krijgt dezelfde content een volledig andere vormgeving.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

35

3 Hoe bedenk je een gebruikers­vriendelijke indeling?

De site opbouwen met secties en categorieën

Voordat je een site kunt bouwen, moet je nadenken over de indeling van de inhoud. Wat wil je op de site zetten, hoe hangt de informatie samen? In Joomla breng je alle inhoud onder in een structuur met drie niveaus: secties, categorieën en artikelen. In dit hoofdstuk lees je hoe je je content ordent binnen die drie lagen.

In het vorige hoofdstuk heb je kennisgemaakt met de basisvaardigheden: een site opzetten, de standaardlay-out aanpassen, secties/categorieën en artikelen toevoegen. Je hebt kunnen zien dat je bij het opbouwen van de content van een Joomlasite altijd drie stappen volgt: 1 Maak secties en categorieën als raamwerk voor de inhoud. 2 Vul dat raamwerk met content: de artikelen. 3 Maak de gewenste menulinks naar die secties/categorieën/artikelen. Vanaf hier gaan we op die vaardigheden dieper in. In dit hoofdstuk staat stap 1 centraal: hoe maak je een handige indeling in secties en categorieën? Je moet eerst de indeling áchter de content bedenken, voordat je content kunt maken. In dit hoofdstuk gaat het over die indeling. In de hoofdstukken 4 en 5 komen de tweede en derde stap aan bod.

3.1  Hoe werkt dat, indelen in drie niveaus? Een contentmanagementsysteem managet je content. Het helpt je om een geordende, makkelijk te beheren en uit te breiden hoeveelheid informatie op het web te zetten. Maar dat kan het systeem alleen doen als jij die content van tevoren helder hebt ingedeeld. In Joomla moet je alle content indelen in secties en categorieën. Om de vergelijking met een boek te maken: je kunt secties zien als hoofdstukken en categorieën als paragrafen. Onder die categorieën vallen je artikelen, de teksten die meestal centraal op de webpagina staan.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)