Werken met Joomla 1.5

©2007 www.Web-garden.be / www.Web-garden.nl

Werken met Joomla 1.5 Inleiding Deze cursus is een uitvoerige en gedetailleerde tutorial betreffende het gebruik van Joomla 1.5. De cursus beschrijft de installatie, het configureren van Joomla 1.5 alsook de basis betreffende het maken van Joomla 1.5 templates. De cursus gaat er vanuit dat U geen enkele voorkennis heeft van Joomla. Joomla is een ‘Open Source’ (maw gratis) ‘Content Management Systeem’. Het is een PHP (en MySQL) geschreven pakket die toelaat om volledige websites online te plaatsen, waarbij derden ook inhoud kunnen plaatsen op de site, en dit zonder dat ze HTML kennen. Wanneer Joomla gebruiken? Deze vraag kan ik het makkelijkst met de vraag beantwoorden: Wanneer NIET Joomla gebruiken? Als je een zeer bedreven schrijver bent van HTML, CSS en PHP code, lijkt mij de toegevoegde waarde van Joomla inderdaad beperkt. Als dit niet het geval is, dan is Joomla een perfecte oplossing. Het helpt je om op een eenvoudige manier complexe zaken in je website te integreren (zoekfunctie, commentaren, fotogalerijen, forums,….) Het essentiele voordeel van Joomla blijft dat derden inhoud kunnen wijzigen of toevoegen, zonder dat ze enige kennis hebben van HTML, CSS of PHP. Zo kun je na het opmaken van een website, het beheer overlaten aan derden. Op www.Web-garden.be vind je reeds een cursus Joomla. Maar dat betreft een tutorial aangaande de versie 1.0.13. Echter de Joomla communiteit heeft de opvolger, met name Joomla1.5, reeds geintroduceerd. Bij het schrijven van deze cursus, was de versie Joomla 1.5 RC3 (release candidate 3) beschikbaar. Deze versie is stabiel genoeg om een persoonlijke website mee te maken. Wat zijn de voordelen van Joomla 1.5 tov Joomla 1.0.13?

1

©2007 www.Web-garden.be / www.Web-garden.nl Op deze vraag is het moeilijk een zeer concreet antwoord te vinden. Het beste (nederlandse) antwoord heb ik terug gevonden in het tijdschrift PCM Zware belasting Voor versie 1.5 van Joomla! is de gehele code grondig onder de loep genomen en op veel plekken herschreven. De code is efficiënter en het templatesysteem, dat bepaalt hoe de site eruitziet, is sterk verbeterd. Vorige versies gebruikten matig gecodeerde html-tabellen, terwijl hedendaagse webdesigners vinden dat tabellen taboe zijn. Zij gebruiken liever cascading style sheets (css). Versie 1.5 voldoet aan hun wensen, maar om te voorkomen dat oude templates niet meer werken, kunt u ervoor kiezen om toch tabellen te gebruiken. Het is opmerkelijk dat de standaardtemplate van 1.5 wel met tabellen werkt, maar door een vinkje te veranderen kunt u kiezen voor een template zonder tabellen. Pluspunt: hierin zijn de koppen van artikelen voorzien van de html-tag H1, belangrijk voor de vindbaarheid in zoekmachines.

Eenvoudiger te installeren Opvallend is dat de installatie van versie 1.5 eenvoudiger is geworden. Voorheen moest u bepaalde mappen met de hand beschrijfbaar maken. Dat is verleden tijd. Joomla! omzeilt de niet-beschrijfbare mappen door uitbreidingen via ftp te uploaden en daarna te installeren. Wel moeten we het configuratiebestand handmatig aanpassen en zelf uploaden via een ftpprogramma. Dit euvel kwamen we bij vorige Joomla!-versies ook al tegen, maar mogelijk heeft dit te maken met de instellingen van onze hostingprovider.

Nederlands 'praten' Versie 1.5 ziet er wat gelikter uit en heeft een overzichtelijk administratiegedeelte. Een artikel plaatsen is eenvoudig dankzij de knop Nieuw artikel toevoegen, waarna nog slechts één wysiwyg-editor tevoorschijn komt voor zowel het intro als de bodytekst. Joomla! 1.x laadde hiervoor twee wysiwyg-editors – dat was onnodig zwaar. Het administratiegedeelte 'praat' voortaan Nederlands en dat is ook nieuw. Het is eenvoudiger geworden om uitbreidingen, templates en taalbestanden is installeren, doordat er nog slechts één installer bestaat. Joomla! zoekt zelf uit of u de installer voorziet van een component, module, plug-in of taalbestand. Handig! De nieuwe Joomla!-versie gebruikt UTF-8 om tekens op te slaan, waardoor het cms nu ook met buitenissige tekens overweg kan, zoals Chinese of Arabische. Traditioneel zijn er voor Joomla! veel uitbreidingen beschikbaar, bijvoorbeeld om een fotoalbum te tonen of om bezoekers te laten reageren op artikelen. Omdat versie 1.5 grotendeels is herschreven, werken de 1.x-uitbreidingen niet standaard. Wie echter 1.5 in Legacy-modus draait, kan ze wel gebruiken. Helaas krijgen wij soms een foutmelding bij installatie en gebruik van 1.x-componenten. Uitkijken dus als u wilt overstappen. Wel slim: oude componenten gebruiken nog vaak html-tabellen. Als u van deze tabellen af wilt, kunt u ze automatisch laten vervangen door css-code, bijvoorbeeld div'jes.

Bron: PCM

2


Tenslotte nog dit: Alvorens je Joomla leert, lijkt het me ten zeerste aangewezen de basis van HTML, CSS en PHP te leren. Voor gedetailleerde cursussen betreffende dit onderwerp, bezoek www.webgarden.be.

Je webhosting moet PHP en MySQL ondersteunen. Firefox Gedurende het schrijven van deze handleiding is gebleken dat Joomla 1.5RC3 en Internet Explorer geen aller beste vriendjes zijn. Joomla maakt voor een aantle menu’s gebruik van Javascript. De positionering van de dan geopende vensters in IE6 is ronduit slecht. In Firefox heb je dit probleem niet!!

Hoofdstuk I. Downloaden. Je kunt de Engelstalige hier Joomla 1.5 RC3 (rc3 = release candidate 2) downloaden. Daar bij het schrijven van de cursus de Nederlandse versie nog niet beschikbaar was, gebruiken we de gedurende deze cursus de Engelstalige versie. Er is voldoende aandacht besteed aan het weergeven van Nederlandse begrippen gedurende de uiteenzettingen. Naderhand is ook een Nederlandse versie beschikbaar gekomen. Deze kun je hier downloaden.

Vervolgens pak het zip bestand uit ergens op je harde schijf. Na uitpakken dien je met een FTP programma de uitgepakte bestanden te downloaden op je webserver. Zelf heb ik daar toe een map ‘joomla’ aangemaakt op de webserver. Zorg dat je de mappen structuur van de uitgepakte bestanden respecteert. Na downloaden op je server, dien je deze mappen strucuur te zien.

3


Hoofdstuk II. Installatie Na downloaden van de bestanden, typ je volgende URL in je webbrowser http://www.jouwwebsite.net/joomla Dit veronderstelt dat je de joomla bestanden hebt geplaatst op je webserver in de map joomla. Als je in de root geïnstalleerd hebt, dan wordt de URL: http://www.jouwwebsite.net

4


De keuze staat op Nederlands. Klik op “Volgende” in de rechter bovenhoek.

In de bovenste rechthoek dienen alle parameters een ‘Ja’ te hebben. Indien er een rode ‘neen’ verschijnt;;;neem dan contact op met je webprovider. In de onderste rechthoek kunnen afwijkingen (rood) staan. In principe mag dit de werking van Joomla niet verstoren.

5

©2007 www.Web-garden.be / www.Web-garden.nl Klik op “Volgende” in de rechter boven hoek

Hierbij staan de licentie voorwaarden betreffende het gebruik van Joomla. Er is weinig andere keuze dan deze te accepteren door te klikken op “Volgende” in de rechter bovenhoek.

Hierbij dien je nu gegevens in te brengen die je gekregen hebt van je webprovider. Dit kan alleen als je webprovider MySQL (of MySQLi) ondersteunt. (Naam) Host: vermoedelijk is dit ‘localhost’

6

©2007 www.Web-garden.be / www.Web-garden.nl Gebruikersnaam(‘username’): Dit is de gebruikersnaam voor je database. Let op: de gebruikersnaam van je database kan verschillend zijn van de gebruikersnaam die je gebruikt om in te loggen op bijv. de statistiek pagina van je provider Wachtwoord (‘password’): Dit is het paswoord voor je database. Let op: idem als hierboven. Naam database: Info aangeboden door provider

Eenmaal alles keurig ingevuld…klik dan even op “Geavanceerde instellingen”

Als je een oude installatie van Joomla hebt, kun je inderdaad beter kiezen voor “oude tabellen backuppen”. Alle tabellen aangemaakt bij de Joomla installatie zullen het voorvoegsel ‘jos_’ meekrijgen. Als je al tabellen hebt die toevallig die deze pre-fix hebben, vul hier dan een andere prefix in. Maar gebruik, zoals aangegeven, geen ‘bak_’ Klik nu op “volgende” in de rechter boven hoek

7


Dit is optioneel. Gezien ik steeds met een afzonderlijk FTP programma werk, zet ik een vinkje bij “Nee” (FTP bestandssysteemlayer inschakelen)

Naam website: Vul hier de naam van je joomla website in. Dit is niet hetzelfde als de URL van je website. Voorbeeld: Web-Garden Webdesign E-mail

8


De bijgaande uitleg op het scherm lijkt mij meer dan duidelijk. Het ingebrachte wachtwoord zul je dus moeten gebruiken om als administrator straks in te loggen. Dus verlies het niet ☺ Plaats een vinkje bij “Installeer standaard voorbeelddata” Klik vervolgens op “Installeer voorbeelddata”

Indien u upgrade van een oude versie naar Joomla 1.5 dient u te kiezen voor “Laad migratiescript”. Klik nu op Volgende (rechtsboven)

Zo eenvoudig is een Joomla installatie ☺ Via een FTP programma ga je naar de map op de webserver waar je Joomla hebt geïnstalleerd.

9


Verwijder nu de inhoud en de map “installation”!! (PS: Stel dat je voor een of andere reden de installatie opnieuw wil doen. Verwijder installation dan niet. Je moet dan wel op je server het bestand “configuration.php” verwijderen. Vervolgens kun je de installatie opnieuw doen) Klik vervolgens op “site” bovenaan rechts op het scherm

10

©2007 www.Web-garden.be / www.Web-garden.nl Uw website staat online!!! Dit is wat men noemt de “front-end” (frontpage) van je joomla website. Dit is wat de bezoeker ziet. Klik nu even in het linkermenu op “Administrator”

Bij username vul je keurig “admin” in. Bij password breng je nu het paswoord in die we daarnet hebben ingebracht (bij de installatie) Language (taal): daar laat je “default” staan. Klik vervolgens op “Login”.

11


Dit is wat men noemt de “back-end” van je Joomla site. Dit is niet zichtbaar voor de bezoeker. Dit is waar de inhoud wordt ingebracht, of waar de layout wordt aangepast.

Hoofdstuk III: Joomla! configureren De website die nu online staat, is vermoedelijk niet de site die u voor ogen had ☺ Maw we moeten de site aanpassen aan u wensen en/of behoeftes. In dit hoofdstuk gaan we ons bezig houden met de inhoud van de site. De layout of template aanpassen is voer voor een aander hoofdstuk. Alles wat we nu aanpassen of bespreken, gebeurt in de back-end omgeving (maw administrator pagina) Je kunt de administrator pagina oproepen via volgende URL: http://www.mijnwebsite.com/joomla/administrator/ Dit is de URL indien je de installatie van Joomla hebt gedaan in de map “joomla”.

12


Breng je gebruikersnaam (username) en paswoord (password) in

We willen eerst af van de introductie tekst dewelke rechts staat op bovenstaande pagina. Ga naar ‘extensions>module manager

13


Klik nu op ‘Administrator’ in submenu onder <Module Manager>

Plaats nu een vinkje in het vakje voor “Welcome to Joomla”

14


Klik nu op “Delete” (rechtsboven)

Klik nu op ‘Site>Control Panel’

Vervolgens krijgen we het begin scherm van de administrator pagina…maar zonder welkom tekst.

15


We focusseren ons nu op een gedetailleerde bespreking van het bovenste menu.

Eenmaal alle functies de revue zijn gepasseerd, zullen de onderstaande knoppen (Add New Article, Articel Manager, Front Page Manager,….) duidelijk worden. Deze knoppen zijn namelijk een snellere toegang tot de functies die ergens opgenomen zijn in het bovenste menu .

III.A Site Beweeg de muis over ‘Site’ in het bovenste menu.

Als je op ‘control panel’ klikt, dan kom je op de start pagina van de administrator pagina. 16


User Manager:

Met de user manager beheer je de gegevens van personen die toelating hebben om inhoud op de website te wijzigen of te plaatsen. Logisch dat er nog maar 1 persoon is gedefinieerd. Met name, u als persoon die Joomla heeft geinstalleerd. We gaan nu even een nieuwe gebruiker (“user”) toevoegen: Klik op “New” – rechtsboven

Name: Vul de naam in de van de gebruiker die toegang heeft tot de website Username: Dit is de gebruikersnaam waarmee de gebruiker dient in te loggen

17


E-mail: E-mail adres van de gebruiker(“user”) New password: Geef hier het paswoord in die de gebruiker moet gebruiken om in te loggen. Dit paswoord moet jij dus bepalen Verify Password: Je moet het paswoord een tweede keer inbrengen, om zeker te zijn dat er de eerste maal geen typfouten zijn gemaakt. Bij Group wordt het iets complexer ☺. Dus “fasten seatbelt…” ☺ Je ziet dat er een opdeling is tussen Front-end gebruikers (maw zij die inloggen via de ‘Home Page’ van de website) en de ‘Back-end’ gebruikers (maw zij die inloggen via de inlogpagian van de administrator webpagina). Front-end gebruikers gaan naar de frontpage (homepage) van de website en loggen daarin via het log-in

18


Front-End Registered Deze categorie gebruikers heeft zeer weinig mogelijkheden. Ze kunnen mogelijke verborgen pagina’s ook lezen. Author Deze gebruiker kan zijn eigen inhoud op de website aanpassen.

19

©2007 www.Web-garden.be / www.Web-garden.nl Editor Deze gebruikers kunnen alle inhoud op de website aanpassen. Publisher Een ‘Author’ en ‘Editor’ kunnen dus wijzigen of toevoegen. Maar ze kunnen niet publiceren (=on-line plaatsen). Ze moeten wachten op de goedkeuring van een ‘hoger gerangschikte’. Een Publisher kan inhoud toevoegen of wijzigen, en vervolgens ook publiceren (on line plaatsen). Dus de nieuwe of aangepaste inhoud opgemaakt door een Author of Editor kan door een Publisher online geplaatst worden. Back-End Back-end gebruikers zijn gebruikers die net als u kunnen inloggen via de administrator log in Manager

Manager Site: Media Manager (Kan afbeeldingen beheren) Preview. (kan een site bekijken bij wijzigingen) Statistics (kan statistieken betreffende bezoekers raadplegen) Menu: Access and edit existing Menus (kan een menu aanpassen) Content: (kan alle parameters betreffende inhoud wijzigen) Content by Section All Content Static Content Manager, 20

©2007 www.Web-garden.be / www.Web-garden.nl Section Manager, Category Manager Front Page Manager Archives Manager. Page Impressions

Administrator Site: Trash Manager, (beheer van de prullenbak) User Manager (may create/edit/delete any user of the same level or below – all except Super Administrator.) (kan ieder ondergeschikte of gelijkgestelde gebruiker wijzigen) Menu: Menu Manager (kan menu wijzigen) Modules: Site Modules (Joomla beschikt over Website Modules.Een Administrator kan er toevoegen of weghalen) Administrator Modules (Hier wordt bepaald hoe de ‘back-end’ site eruitziet) Components Banners (met banners wordt bedoeld: reklame-banners) Contacts (contact gegevens voor de site bezoekers) News Feeds (inhoud van de rubriek News aanpassen) Polls (beheren en plaatsen van polls) Syndicate Web Links (beheer van de rubriek Links in het hoofdmenu) Mambots: Site Mambots (het integreren van andere website in jou website) Installers (installeren van onderstaande modules) Components Modules Mambots

Super Administrator

Site: Global Configuration Language Manager (kan de taal van de website aanpassen) Template Manager (kan de layout van website en administrator pagina aanpassen) Site Administration User Manager (kan gebruikers toevoegen, veranderen of verwijderen. ) Components: Mass Mail (kan via de website een mailing uitsturen) Messages: Inbox (kan via de website een e-mail versturen) Configuration

21

©2007 www.Web-garden.be / www.Web-garden.nl Bekijken we nu het rechter stuk van de pagina:

Back-end language: Je kunt hier de taal kiezen dewelke de gebruiker in kwestie wil gebruiken. Front-end language: Je kunt hier de taal kiezen in de welke de inhoud op de site zal worden weergegeven. User Editor: als de front-end gebruiker inlogt, zal hij een tekst editor ter beschikking krijgen waarmee hij/zij zijn inhoud kan aanpassen. Hier kun je aangeven welke editor dit is. Het is aangewezen te kiezen voor TinyMCE 2.0. Help Site: Als de gebruiker mogelijks ondersteuning wil bij het inbrengen van zijn inhoud kun je hier een site kiezen die gekoppeld wordt aan de help functie . Tijdzone: Hier kies je voor UTC+1.00 Amsterdam, Berlijn,…. Als oefening hebben we hier volgende info ingebracht:

22


Vervolgens klikken we op “Save” in de rechter boven hoek.

Media Manager Ga naar Site>Media Manager

23


Volgend scherm opent zich:

De Media manager is een instrument om je afbeeldingen, gebruikt in je Joomla site, beter te kunnen beheren. De standaard weergave is de “Thumbnail View (weergave)”. Persoonlijk lijkt me de Detail View weergave beter. Klik op Detail View

24


Links zie je dat bij Folders de map Media is aangeduid. Dit is een beetje verwarrend daar er op je webserver helemaal geen map “Madia” is terug te vinden. Met Media wordt hier de bedoeld de map ‘images’ op je webserver. Kijk even via FTP of die je terug vindt.

Open nu even via FTP de map ‘images’ op je webserver.

Nu zie je ook de 4 sub-directories (banners, M_images, smilies en stories) dewelke je in de Media Manager hierboven ook ziet. In de Media Manager staat bij Files op het eerste zicht de URL (van een map) die niet te begrijpen valt ☺

25

©2007 www.Web-garden.be / www.Web-garden.nl Dit verwijst naar de map op je webserver waar de afbeeldingen staan. Gezien het feit dat je een plaats op een webserver huurt bij een provider, is het eerste stuk van bovenstaande URL (/customers/web-garden.nl/web-garden.nl) toe te wijzen aan een mapstructuur opgemaakt door je webhosting bedrijf. De rest van de URL is dan toe te wijzen aan je eigen mappenstrucuur. Onze installatie is gedaan in de map “joomla”. Daarin bevindt zich een sub-map met naam “images”. In die map “images” kun je nu een nieuwe sub-map maken.

We maken een nieuwe sub-map met naam “submap”, en klikken vervolgens op “Create Folder”.

Vervolgens kunnen we nu ook afbeeldingen toevoegen aan een van de folders.

(Deze functionaliteit bevindt zich onderaan de pagina) Via de functie “bladeren” kun je een bestand (afbeelding) aanwijzen. Door te klikken op “Start Upload” kun je de afbeelding downloaden in de folder naar keuze. Om een vergrote afbeelding te kunnen zien klik je op de link van de afbeelding.

26


Dan krijg je:

Door te klikken op de toets “vorige” in je browser, kom je terug op het overzicht

Global configuration We klikken op Site>Global Configuration

27


Vervolgens krijgen we:

We hebben nu 3 submenu’s: Site, System en Server Bovenaan zie je de pagina behorend bij submenu “Site”.

28

©2007 www.Web-garden.be / www.Web-garden.nl Site offline : Ik mag aannemen dat je hier “No” in brengt. Zodoende is je site zichtbaar voor alle surfers op het internet. Als je “No” aangeeft…dan krijgt de bezoeker een foutboodschap die weergegeven is in “Offline Message” Offline Message: De foutboodschap die de bezoeker krijgt als de site offline staat. Site-name: Dit is de naam van je site. Dit moet niet noodzakelijk de URL van je site zijn. Default WYSIWYG Editor: zoals reeds eerder aangegeven kunnen sommige gebruikers (users) toegang hebben tot de website. En dit om inhoud aan te passen of toe te voegen. Om dit te doen krijgen ze toegang tot wat men noemt een tekst editor. In feite het best te vergelijken met een afgeleide van het programma “Word” (Microsoft). Hier kies je het type editor die de gebruiker moet gebruiken. Kies voor “Editor-TinyMCE 2.0”. List-length: Vermoedelijk zullen op je website een aantal ‘lijsten’ voorkomen. Voorbeeld : “Links”. (waar je linhks weergeeft naar andere site). Met “list-length” geef je de maximum lengte aan een lijst. Als de lijst langer wordt dan zal hij een extra pagina aanmaken.

Bij Metadata Settings breng je informatie aan dewelke gebruikt wordt voor zoekmachines zoals Google, Yahoo,… Meta informatie komt steeds in de header van een webpagina te staan. Voorbeeld: meta name="generator" content="Joomla! 1.5" /> <meta name="description" content="Joomla! - the dynamische portaalmotor en arikelenbeheersysteem" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" />

Global site Meta description: Hier kun je de meta “description” informatie inbrengen dewelke verwijst naar je website.

29

©2007 www.Web-garden.be / www.Web-garden.nl (Nota: je zult later de mogelijkheid krijgen om Meta “descprition” info toe te voegen aan individuele pagina’s) Global Site Meta Keywords: Hier kun je meta “keywords” inbrengen, dewleke betrekking hebben op je volledige site. Show Meta Title Tag: Als je “Yes” aangeeft, wordt voo iedere individuele pagina ,een meta lijn toegevoegd met de titel van je pagina. Het is aangewezen om “Yes” te behouden. Voorbeeld: <meta name="title" content="Welcome to Joomla!" />

Show Author Meta Tag: Als je “Yes” aangeeft dan wordt een extra meta lijn toegevoegd met de naam van de auteur van de pagina of tekst. Gezien je met Joomla diverse gebrukers (“users”) kunt hebben…kan de auteursnaam verschillen Voorbeeld: <meta name="author" content="Administrator" />

Nu kijken we even rechts van de “Site” pagina:

Dit is een tricky stukje. Standaard zien de URL’s aangemaakt door Joomla er als volgt uit: http://www.example.com/Joomla150/index.php?option=com_contact&Itemid=3

Dit zijn typische URL’s voor PHP geschreven sites. Ze zijn helaas niet SEO vriendelijk. Maw Google kan van bovenstaande URL weinig maken. Door Search Engine Friendly URLs op “Yes” te plaatsen, zal Joomla wel SEO vriendelijke URL’s aanmaken http://localhost/component/option,com_contact/cursusHTML/

Echter, het is niet voldoende om hier alleen maar een “Yes” te plaatsen. In de hoofd directory van je Joomla installatie staat een bestand met de naam htaccess.txt. Dit bestand moet je hernoemen in .htaccess. (Vergeet het puntje niet voor htaccess)

30


Omdat dit te eenvoudig zou zijn, maken we het dus nog een stukje complexer ☺ De webserver waarop je site (via je provider) is geïnstalleerd kan draaien op 2 software pakketten. Linux of Windows. Als het Linux is dan kun je ongestoord het bestand htaccess.txt herbenoemen in .htaccess. Als het Windows is, dan kun je dit niet zomaar. Dan moet je een extern programma gebruiken, zoals bijvoorbeeld “Ultraedit” (http://www.ultraedit.Com)

Met behulp van het FTP programma kan ik nu het bestand htaccess.txt herbenoemen (rename).

31


Druk op OK…en…klaar.

Zoals je ziet heeft het bestand .htaccess heen indicatie van bestandstype (.php, .html, .jpeg,….). Dat kan de oorzaak zijn van het feit dat je FTP programma na de naamswijziging het bestand .htaccess niet weergeeft in het bestanden-overzicht. Maw vraag aan je provider: a)of ze Linux of Windows draaien op de webserver b)of je htaccess bestanden kunt herbenoemen? Ik ben behoorlijk lang stikgestaan bij dit “htaccess” verhaal, omdat het zeer belangrijk is. De score resultaten van je website in Google zullen zeker beter zijn. Sommigen zullen nu beweren dat Joomla niet vriendelijk is voor Google. Dit heeft niets te maken met Joomla, maar alles met het gebruik van PHP. Het gebruik van PHP kan aanleiding geven tot het vormen van SEO onvriendelijke URL’s. Vandaar het belang van het htaccess verhaal. Conclusie: Hier valt exht wat te experimenteren alsmede je webprovider even op de rooster te leggen. Ikzelf heb er heerlijk en leerrijke chatsessies met www.one.com op zitten ☺ Bij SEO settings staat er een tweede vraag:

32


“Use Apache mod_rewrite” Gelieve hier bij voorkeur “No” in te geven. Tenzij je webserver het ondersteunt, en je heel goed weet wat je doet. Deze topic is dermate complex dat ze buiten deze cursus valt.

Als je gebruik maakt van RSS feeds…kun je hier verdere info inbrengen.

Global Configuration: SYSTEM

33


System Settings

Secret word: Hopelijk heb je dit nooit nodig☺. Bij installatie van Joomla heb je een paswoord moeten definieren. Echter Joomla bewaart het paswoord niet als dusdanig maar onder een gecodeerde vorm. Die code staat onder secret word. Path to Log folder: Activiteiten binnen je Joomla site worden gelogd (geregistreerd) en bewaard in een bestand. De plaats van deze bestanden is de sub-directory “logs”. Help Server: Hier kun je instellen welke help bron gebruikers ter beschikking krijgen.

User settings

Allow user registration: Via het Log in Formulier op de Home Page van je website kunnen front end gebruikers zich inloggen. Dit formulier kan ook gebruikt worden daar voorbijgaande bezoekers om zich te registreren. Registratie van internet bezoekers moet zinvol zijn. Als je er geen belang bij hebt dat bezoekers zich kunnen registreren, zet hier dan “No”. New User Registration Type: Als je registratie toelaat en gebruikt op je site, kun je ook aangeven wat de bevoegdheden zijn van de nieuwe geregistreerde bezoeker. New User Account activation: Om te vermijden dat het registratie formulier gebruikt wordt door automatische robots, kun je hier instellen dat er bij registratie een e-amil naar de geregistreerde bezoeker wordt gestuurd. Die moet dan via een link in zijn ontvagen mail zijn account op jou site activeren.

34

©2007 www.Web-garden.be / www.Web-garden.nl Front-end User Paramaters: Als je “show” opgeeft zal de front-end gebruiker bij inloggen de mogelijkheid krijgen om zijn account gegevens aan te passen

Media settings

Legal extensions (file types): Hier geef je de bestandsextensies op die mogen worden gebruikt Maximum size: Als je via Joomla bestanden gaat opladen, is er een maximum grootte ingesteld. Hier kun je die instellen. Path to File folder: De naam van de subdirectory waar opgeladen bestanden van gebruikers (users) worden opgeslagen is in dit geval “images”

35

©2007 www.Web-garden.be / www.Web-garden.nl Path to Images Folder: dit is de subdirectory waar door gebruikers (users) opgeladen afbeeldingen zullen worden opgeslagen.

Debug Settings

Dit laat toe om eventuele problemen op je website te detecteren en weer te geven. Echter dit is alleen bestemd voor diegene die zeer goed vertrouwd zijn met PHP en MySQL.

Cache Settings

Een Joomla website wordt opgemaakt dmv PHP. Dit betekent concreet dat een opgeroepen webpagina niet direct beschikbaar is (zoals HTML), maar bij oproep wordt samengesteld aan de hand van informatie die is opgeslagen in een database. Dit vergt tijd. Als je de “Cache” optie aanzet, dan bewaart Joomla de meest frequent gevraagde pagina’s in een tijdelijk geheugen (=cache). Dit heeft als voordeel dat die pagina’s sneller zullen laden. Cache Time: Na xxxx minuten wordt het cache geheugen leeggemaakt en terug “opgefrist”.

Session Settings

“Session” is weer een PHP kreet. Als je als gebruiker (user) inlogt op een Joomla website, wordt een “session” aangemaakt. Als je niet uitlogt, dan zal Joomla automatisch de sessie afsluiten na ‘15’ minuten. Dan zul je dus genoodzaakt worden op terug in te loggen.

36


Global Configuration: SERVER

Server Settings

Hier kunnen we heel snel zijn…laat deze instellingen ongewijzigd.

Locale settings

Zet de tijdinstelling zoals hierboven weergegeven.

37


FTP Settings

Let wel: bovenstaand schermpje (FTP settings) is alleen zichtbaar als je webprovider een webserver ter beschikking stelt die draait op Linux. Als de Webserver op Windows draait, dan krijg je onderstaand schermpje

Als een gebruiker (user) een afbeelding of een bestand wil opladen dan gebruikt Joomla daar standaard een PHP script voor. Echter sommige webproviders laten dit vanwege veiligheidrisico’s niet toe. In dit geval stelt Joomla een ingebouwd FTP protocol ter beschikking. De gegeven die je hierbij moet invullen dien je te krijgen van je webprovider. PS: Je kunt natuurlijk gewoon je eigen standaard FTP programma gebruiken om zaken op te laden op je website.

Database settings

Deze gegevens krijg je aangeleverd door je webprovider.

38


Database Prefix: Deze term lijkt mij een beetje ongelukkig gekozen. Alle tabellen die door Joomla worden aangemaakt krijgen de prefix jos_ . Laat dit ongewijzigd.

Mail Settings

Je kunt vanuit Joomla een e-mail versturen naar alle gebruikers (users) van je website. Mailer: Je kunt hier een keuze maken tussen PHP Mail Function of Sendmail. Deze laatste wordt ondersteund door Linux webservers (check bij jou provider) Mail from: dit is het e-mail adres van waaruit je de mail verstuurd. From Name: Hier komt de naam te staan die jij wil laten verschijnen in de “From” (“Van”) lijn van een e-mail bericht Sendmail Path: Als je SendMail gebruikt dan moet je hier de directory opgeven waar SendMail is geïnstalleerd. In principe ontdekt Joomla die automatisch bij installatie. Tenminste als je webprovider die optie ondersteunt. SMTP Authentication: Hier moet je “Yes” opgeven als je een e-mail adres hebt die toegekend of verkregen is door een provider als kpn, telenet, skynet,…. Als je gebruik maakt van Gmail of Hotmail kun je hier “No” inbrengen. Verdere SMTP gegevens dien je op te vragen bij de provider van je e-mail adres. PS: Je kunt natuurlijk ook een e-mail versturen via je gewone e-mail programma ☺

39


III.B Menu

III.B.1 Menu Manager

In de Menu Manager krijg je een overzicht van alle menu’s die op je website staan.

40


III.B.2 Menu Trash

Stel dat je een volledig menu uit je website gooit (via Delete staan. Dit is te vergelijken met de “Prullenbak” functie in windows.

), dan komt die hier te

III.B.3 Main Menu

41

©2007 www.Web-garden.be / www.Web-garden.nl We onderscheiden een extra ‘boven-menu’

Daaronder heb je een overzicht van de “links” opgenomen in het “Main Menu”

We bekijken eerst het bovenste extra menu:

Menus: Dit brengt je terug naar de Menu Manager. Default: Met deze functie kun je de link in het menu aangeven waarmee de website bij bezoek opstart. Als je je actuele website oproept dan krijg je de “Home” pagina te zien

We plaatsen nu voor Joomla!Overview een vinkje 42


Vervolgens klikken we op “Default”

Nu bezoeken we onze online website opnieuw.(mogelijks moet je even “verversen”

)

Nu stel je vast dat de website start op de pagina gekoppeld aan de link “Joomla!Overview”. We herstellen nu even de oorspronkelijke situatie. We plaatsen een vinkje voor “Home” en klikken op “Default” in het bovenste menu

43


Publish: Als je hier op klikt zorg je ervoor dat een link uit het menu ook zichtbaar is. Unpublish: Als je hier op klikt zorg je ervoor dat een link uit menu niet meer zichtbaar is

Move: Met deze functie kun je een link uit een menu verplaatsen naar een nader menu Voorbeeld: We plaatsen een vinkje voor de link “FAQ”

Vervolgens klikken we op “Move” in het bovenste menu

Bij”Move to Menu” kun je nu een menu kiezen naar dewelke de link “FAQ” moet verplaatst worden We kiezen voor “othermenu”, en klikken vervolgens op “Move” rechtsboven. We bezoeken nu opnieuw onze online website.

44


We zien dat de link “FAQ” nu inderdaad is toegevoegd aan het menu “other menu” Edit: Met deze functie kun je parameters betreffende een link uit het menu lezen en aanpassen. Voorbeeld: Voor de link “The News” plaatsen we een vinkje

Vervolgens klikken we op “Edit” rechtsboven

45


Menu Item Details Alvast eerst even de volgende opmerking: hier wordt alleen een overzicht gegeven van de links uit een menu. Maw hier wordt niet gepraat over de inhoud (content) gekoppeld aan een bepaalde link. Dit komt verder in de cursus uitvoerig aan de orde. We praten hier alleen over de tekst van de link, de plaats van de link in het menu, de zichtbaarheid van een link,enz.. Title: Hier breng je de titel in van je link. Met deze naam komt de link op je website te staan. Alias: Hier kun je een bijkomende naam ingeven. Deze info komt onderaan in de browser te voorschijn als de bezoeker met muis beweegt over de link

Als Alias is hier ingebracht ‘the-news’. Als een bezoeker met zijn muis over “The News” link in het Main Menu beweegt ziet hij onderaan de link……./index.php/the-news Link: Dit is de door Joomla aangemaakte URL voor deze link Display in: Hier geef je het menu aan in dewelke de link moet worden opgenomen. Parent name: Hier kun je mogelijk submenu’s gaan maken. Voorbeeld: In bovenstaand voorbeeld klikken we bij “Parent Name” op ‘News Feeds’. Dit betekent dat we de link “The News” onderbrengen in de link ‘News Feeds’. We klikken vervolgens op “Save” bovenaan rechts

We bezoeken nu onze online website, en zien dat de link “The News” is verplaatst onder ‘News Feeds’

46


Order: de desbetreffende link komt op plaats ‘x’ in het menu. Access Level: Hier kun je aangeven voor wie die Link zichtbaar is. On click, open in: Parent window with browser navigation: Bij deze keuze zal bij het aanklikken van de Link, de nieuwe pagina zich openen in hetzelfde (parent) venster New window with browser navigation: Bij deze keuze zal bij het aanklikken van de Link, de nieuwe pagina zich openen in een nieuw venster. Op dezelfde pagina hebben we ook aan de rechterkant van het scherm een aantal menu’s

47

©2007 www.Web-garden.be / www.Web-garden.nl Parameters-Basic. We zullen eerst de begrippen Category en Content verderop moeten bespreken alvorens we hier een zinnig woord kunnen over zeggen. We laten het hier even bij de opmerking dat je via de dropdown menu bij Category, in staat bent op content toe te wijzen aan een bepaalde link (in ons voorbeeld de link “The News”)

Parameters-Advanced Idem als bij Paramaters-Basic

Parameters-Component

48

©2007 www.Web-garden.be / www.Web-garden.nl Show unauthorized links: Zoals hierboven reeds aagegeven kunnen er links zijn die voor het brede publiek niet toegangelijk zijn, maar wel zichtbaar. Als je deze functie op “No” zet…zijn ze ook niet meer zichtbaar Show Article Title:

De titel “Welcome to Joomla” is zichtbaar (maw “show”) Title Linkable: Bij “yes” zal er een link worden gekoppeld aan de titel van het artikel.

Als de bezoeker er op klikt dan verschijnt het volledige artikel in een nieuw venster. Dit heeft het zelfde effect als klikken op “Read more…” (lees meer)

49


Deze vier functies laten we momenteel links liggen. We dienen eerst de hoofdstukken betreffende ‘sections’ en ‘categorieen’ te hebben besproken.

Een aantal van deze functies zijn hieronder weergegeven:

Article Raring/Voting: Als die op “show” wordt geplaatst…dan kan de bezoeker een score geven aan het artikel op de pagina die gekoppeld is aan de link “The News” (althans in ons voorbeeld)

50


Tenslotte….

Dit betreft het plaatsen van icons bij artikels :

Hier zie je bovenaan rechts de drie iconen: PDF, Print en E-mail -PDF: Een PDF bestand wordt gemaakt van het desbetreffende artikel (niet de volledige pagina) -Print: Het desbetreffende artikel wordt uitgeprint -E-mail: De link kan worden ge-emailt naar iemand anders

51


Bij Page Title brengen we even “Nieuwsblad” in

We klikken op “Save” rechts boven de pagina

Vervolgens bezoeken we onze online website. We klikken op de link “The News”

52


Als hier zou kiezen voor “Hide” dan zou je de titel “Nieuwsblad” niet zien.

Als je de pagina gekoppeld aan de link “The News” een aparte CSS stijl wil meegeven, kun je hier een CSS class identificatie geven.

Hier kun je kiezen voor een afbeelding die vóór de naam van de link in het menu komt te staan. De afbeeldingen moeten op de webserver staan in de map /images/stories.

Hier kun je aangeven of er een beveiligde pagina gekoppeld is aan desbetreffende link. (SSL = Secure Site Link) Er rest ons in het bovenste menu bij Main Menu nog 1 icon: New

Dit geeft je de mogelijkheid een nieuwe link aan te maken in het menu. Echter dit vergt grondige kennis van de begrippen Section en Category. Dus doorloop eerst even de hoofdstukken betreffende “Content” alvorens je een nieuwe link aanmaakt.

53


III.B.4. Overige Menu’s

We hebben zeer uitvoerig het Main Menu beschreven. Dit alles geldt natuurlijk voor alle andere menu’s User Menu / Top Menu/ Other Menu/ Example Pages/ Key Concepts Misschien vraag je je af waar dat “Example Menu “ zit ☺? Welnu we bezoeken de online website…We klikken op “Example Pages”

Het gevolg is dat een nieuw menu verschijnt:

54


III.C. Content (Inhoud) Misschien was het tot nu toe saaie kost ☺. Uiteindelijk draait een website om inhoud. Welnu, in dit hoofdstuk zullen we het alleen over inhoud (content) hebben. Goed zo ☺?

Joomla ! definieert een artikel (article) als inhoud (content) dewelke een stuk tekst (geformatteerd dmv HTML) bevat. Joomla’ artikels worden georganiseerd volgens onderstaande structuur:

(Figuur uit Joomla 1.5 Beta 1 Hagen Graf Packt Publishing)

55

©2007 www.Web-garden.be / www.Web-garden.nl Voor absolute beginners met Joomla kan deze structuur in den beginne heel onwennig overkomen. Neem voldoende tijd om dit goed te absorberen. Het is uiterst belangrijk dat je dit goed in de vingers hebt!! Je kunt de structuur het best vergelijken met een mappen structuur van een harde schijf. Voorbeeld: Een bepaald bestand (content) wordt bewaard in een map “category”, dewelke op zijn beurt weer onderdeel is van een map “section”. Je kunt zoveel “sections”, “categories” en “artikelen(content)” maken als je wilt.

III.C.1 Article Manager

Deze pagina kunnen we indelen in drie delen : a)Bovenste menu

b)Overzicht van alle artikels die op onze site staan

56


c)Onderaan de pagina blijkt dat alle artikelen verspreid staan over 3 pagina’s

Blijkt dus dat er 43 artikels op onze online site staan. Als je nog steeds twijfelt betreffende de definitie van een artikel, geef ik hier een voorbeeld genomen uit de online site:

Dit staat op de “home page” van onze online website. Je ziet een afbeelding van het artikel “Welcome to Joomla!” Terug naar de “Article Manager” Boven het overzicht van alle artikels staat een selectiemenu:

Dit maak het je eenvoudiger om een bepaald artikel te zoeken Je kiest een “section”, een “category”…mogelijks een “author”. Dan geeft “Article Manager” je een aangepaste lijst van de desbetreffende artikelen. Archive

We plaatsen een vinkje voor het artikel “What’s New in 1.5?”

57


Vervolgens klikken we op ‘Archive’

Het artikel “What’s new in 1.5?” staat nu lichtgrijs gekleurd. Tevens duidt het teken erop dat het artikel niet gepubliceerd is. Maw ipv een artikel te verwijderen (delete) kun je het archiveren (Archive). Zodoende kun je het mogelijks later terug plaatsen. Unarchive Als je eerder een artikel gearchiveerd hebt, kun je dm “Unarchive” het desbetreffende artikel terug online plaatsen. We plaatsen terug een vinkje voor het artikel “What’s new in 1.5?”

We klikken nu op “Unarchive”

58


We zien dat de tekst terug lichtblauw is. Echter bij de kolom ‘Published’ staat er een rood kruisje . We klikken op dit rood kruisje.

Edit Dmv “Edit” kunnen we een bestaand artikel openen en mogelijks wijzigen. We plaatsen een vinkje voor het artikel “What’s new in 1.5?”

Dit artikel behoort toe tot de “category” ‘The CMS’, dewelke op zijn beurt toebehoort aan de “section” ‘About Joomla’ Vervolgens klikken we op ‘Edit’

59


Eindelijk….59 pagina’s ver…en we zien voor het eerste ECHTE Inhoud. Oprechte felicitaties dat je het zolang hebt vol gehouden. ☺ Ik kan deze pagina nu stap voor stap bespreken, maar..hoe raar het ook klinkt…dit is tijdverlies☺ Ja..ja..we hebben nu eindelijk inhoud…en dan heb ik het direct over tijdverlies ☺ Wat ik namelijk poog te zeggen is dat we onmiddellijk overgaan naar de volgende knop in het bovenste menu…namelijk…New New We klikken dus op “New”…met de bedoeling een nieuw artikel aan te maken (heerlijk☺)

60


Nu begrijp je beter mijn laatste opmerking. Dit scherm is namelijk identiek aan het scherm die je krijgt bij “Edit”. Maar nu zijn de meeste functies leeg. Ik wil je orgastisch verlangen om direct je eerste artikel online te hebben niet langer tegen houden. Bij Title zet je: Gesmolten ijs Published: Yes Front Page: Yes Section: News Category: Latest In de tekst editor breng je dmv copy en paste volgende tekst Een wat oudere man met veel ervaring in zijn leven, niet bijzonder knap maar wel heel charismatisch, was samen met mij toeschouwer van een cultureel festijn (wat weet ik niet precies, maar iets met zang en dans). We kenden elkaar niet en stonden bij toeval in elkaars nabijheid. Het was donker en het festijn speelde zich af in de buitenlucht. Er hing een uitbundige, ontspannen, maar ook zwoele sfeer. Af en toe spraken we over wat we zagen, maar verder niets. In de stiltes tussen het praten door voelde ik de blikken van de man echter ook op mij gericht. Het maakte me onrustig maar nieuwsgierig tegelijk en af en toe keek ik even zijn kant op om te zien of ik het me niet verbeeldde. Tot mijn verbazing bleef de man mij telkens schaamteloos en haast triomfantelijk aankijken. Triomfantelijk op een vrolijke manier overigens, want zijn ogen twinkelden van plezier als hij me weer betrapte op een blik die naar hem was gericht. Net alsof hij wist dat ik weer zou gaan kijken en daar gretig op

61

©2007 www.Web-garden.be / www.Web-garden.nl anticipeerde. De blikken werden zo steeds intenser en gedurfder.. .. Vrolijk en uitdagend was het en tenslotte barstten we allebei in lachen uit om deze manier van geluidloos communiceren die we voerden.Het ijs (wat er niet was geweest) was gebroken, gesmolten zelfs…

Zodoende moet je dit als scherm krijgen:

Klik nu vervolgens op “Save” rechts bovenaan

Vervolgens bezoek klik je op “Preview” (rechts bovenan)

En daar staat ons eerste bericht op de Front pagina!!!

Gefeliciteerd!!!!!!

62


De tekst valt wel wat lang uit. We passen daar een mouw aan… Ga via het menu naar Content>Front Page manager

63


Dit is een overzicht van alle artikels die op de Frontpage (Home page) staan. Klik op “Gesmolten ijs”

64

©2007 www.Web-garden.be / www.Web-garden.nl Na de woorden ….wat we zagen, maar verder niets….plaatsen we de muis door een linkerklik

Vervolgens klikken we onderaan de pagina op “Read More”

Zie de rode lijn die aangeeft dat er een “read more” link is toegevoegd. Klik nu op “Save” rechtsboven. Als je nu afvraagt wat het effect is, bezoek dan je even je online website.

65


Alleen het eerste stukje van de tekst staat nu op de Frontpage. Bij het klikken op “Read More” krijg je de rest van het artikel in een nieuw venster.

We hebben er tot nu toe voor gezorgd dat je snel je eerste artikel online gekregen hebt… Nu gaan we even in detail kijken wat er allemaal verder op het scherm staat.

66

©2007 www.Web-garden.be / www.Web-garden.nl Author: Als er meerdere personen artikelen voor je website, kan hier de auteur van het artikel gekozen worden Author Alias: Hier kan de auteur mogelijks een Alias ingeven. Het is het Alias die op de website verschijnt. Access Level: Hier geef je aan door wie het artikel kan worden gelezen. Created Date: Hier kun je de datum invullen op dewelke het artikel is geschreven. Je kunt op agenda-icontje klikken naast de datum

Zodoende kun je de datum van publicatie aan klikken. Start Publishing: Mogelijks heb je een artikel geschreven waarvan je wil dat pas later online verschijnt. Hier kun dus de datum aangeven vanaf dewelke het nieuwe artikel online moet verschijnen. PS: Je kunt hier ook gebruik maken van het agenda-icontje. Finish Publishing: Mogelijks wil je hier al ingeven dat een artikel vanaf een bepaalde datum niet meer online moet staan. Als je Never ingeeft, zal het artikel er steeds staan tenzij je het manueel gaat verwijderen (zie Archive hierboven)

67


Show Title: Bij Show wordt de titel getoond. In ons voorbeeld: Gesmolten ijs Title Linkable: Bij Yes wordt een link verbonden aan de Titel. Als de bezoeker er op klikt, wordt een nieuw venster geopend. Intro Text: In ons voorbeeld “gesmolten ijs” werd bij klikken op “Read More” het vervolg van de tekst getoond in een nieuw venster. Het stukje tekst dat reeds op de Frontpage (HomePage) stond werd niet herhaald. Als je hier “Show” inbrengt, dan wordt na het klikken op “Read More” ook het stukje tekst dat op de Home Page stond herhaald.

68

©2007 www.Web-garden.be / www.Web-garden.nl Section Name: Als je hier “Show” invult dan komt de Section er bij te staan waartoe het desbetreffende artikel hoort

Section Title Linkable: Als je hier “Yes” inbrengt dan wordt in ons bovenstaande voorbeeld een link toegevoegd aan “News”.

Category Title: Dit is identiek als bij de “Section Name”. Als we hier “Show” inbrengen, dan wordt de “Category” waartoe het artikel behoort weergegeven.

69


Category Title Linkable: Dan wordt een link toegevoegd aan de “Category”

Article Rating: Als je hier “Show” inbrengt dan wordt een poll toegevoegd aan het artikel. De bezoeker kan dan punten geven aan dit artikel. De poll is alleen zichtbaar als de bezoeker klikt op “Gesmolten ijs” ( de titel van het artikel) of op “Read More” (indien beschikbaar)

Hier kun je dus Meta informatie inbrengen, dewelke specifiek toebehoort aan dit artikel.

70

©2007 www.Web-garden.be / www.Web-garden.nl Descprition: Hier breng je info in die behoort bij meta name”description” Keywords: Hier breng je info die behoort bij meta name “keywords” Robots: Hier breng je info die behoort bij meta name “ROBOTS”. Je kunt hier dus invullen INDEX,FOLLOW Author: Hier breng je info in die behoort bij met name “author”.

Images/Afbeeldingen Er zal zeker de vraag zijn om afbeeldingen toe te voegen aan een artikel. Onderaan de tekst-editor staat een knop “Image”

Een nieuw scherm opent zich:

Hier krijg je een overzicht van alle mappen ondergebracht in de map ‘images’, dewelke allemaal afbeeldingen bevatten. Dmv FTP kunnen we inderdaad op de server kijken wat er allemaal in de map ‘images’ staat

71


We willen een afbeelding toevoegen aan ons artikel “gesmolten ijs”. We plaatsen eerst de cursus (linker-klik) op de plaats waar we de afbeelding willen hebben.

We plaatsen dus de cursor voor het woord “een”. Vervolgens klikken we op “Image” onderaan de tekst-editor.

72


We openen de map “stories”. Vervolgens openen we de map “fruit”. Vervolgens klikken we op ‘cherry.jpg’.

Bij ‘Align’ kiezen we voor ‘Left’. Zodoende plaatsen we de afbeelding ‘links’

Nu klikken we op ‘Insert’ linksboven het scherm.

73


Nu vergeten we niet de klikken op “Save “ rechtsboven.

De pagina “Article Manager” opent zich. We kiezen nu voor ‘preview’ rechtsboven.

Het resultaat is:

74


Als we nu op de link “Gesmolten ijs” klikken:

We keren nu terug naar ons artikel in de Administration back-end. Als je even de weg kwijt bent..Klik in het bovenste menu op Content>Front Page Manager

Klik vervolgens op Gesmolten ijs

75


En dan opent zich het reeds eerder gezien tekst-editor venster.

Nu klikken we op de afbeelding in de tekst:

Nu kiezen we voor het afbeeldings-icon in het editor menu

76


Nu kunnen we de afbeelding verder bewerken. General Image description: Dit zorgt voor de invulling van “Alt”. Belangrijk voor een goede score bij SEO

77


Appearance: Alignment: Dit is het zelfde als de knop ‘Align’ die we eerder hebben gezien. Hiermee plaats je de afbeelding tov de tekst Dimensions: Hiermee kun je in principe de afmetingen van de afbeelding veranderen. Ik raad dit ten sterkste af. Als je afmetingen wil veranderen gebruik dan een foto-bewerkings programma zoals Photoshop. Vertical space/ Horizontal Space: Met vertical space voeg je extra ‘witte ruimte’ toe boven en onder de afbeelding. Met ‘horizontal space’ voeg je extra ‘witte ruimte’ toe links en rechts van de afbeelding. Breng even in beide vakjes de waarde 10, en kijk wat er met het ‘boompje’ gebeurt in de voorbeeld afbeelding

. Border: Zo kun je een boord toevoegen rond de afbeelding

78

©2007 www.Web-garden.be / www.Web-garden.nl Class: Hier kun je een caption toevoegen aan de afbeelding

Advanced: Hier kun je de URL van andere afbeeldingen geven. Als de bezoeker met zijn muis over de oorspronkelijke afbeelding beweegt, verschijnt er een andere afbeelding.

We zijn 20 pagina’s terug (pagina 55) begonnen met de bespreking van de Article Manager. Op pagina 58 zijn we begonnen met de bespreking met de knop ‘New’ (aanmaken van een nieuw artikel) Welnu in het bovenste menu bij ‘Article manager’ is er nog 1 knop te bespreken. Preferences

Na klikken op deze knop verschijnt volgend extra scherm:

79


Het zal je ongetwijfeld zijn opgevallen dat bij een aantal besproken drop-down menu’s er staat “Use Global” Voorbeeld (ook terug te vinden op pagina 67)

80


Welnu de “use global” instellingen worden gedefinieerd dmv de “Preferences” button. Even een voorbeeld ter illustratie

Dit is een stukje van het volledige “Preferences” scherm Voor auteurs-naam (Author Name) staat “Show” (tonen). Als je nu ergens bij de aanmaak van een nieuw artikel een menu ziet met titel “Author Name”, dan kun je daar “Use Global” kiezen. Maw je kiest voor “Show”. Dus als ergens “Use Global” staat dan kun je werkelijke waarde van die parameter terug vinden in de “Preferences”.

81


III.C.2 Article Trash

Als je via de Article Manager een artikel in de prullenbak (Trash) hebt gegooid, dan kun je deze via de Article Trash Manager terug op halen

III.C.3 Section Manager

We hebben op pagina 54 de inhoudelijke structuur van Joomla besproken. We geven ze hier nogmaals schematisch weer:

82


Artikelen (content) behoren tot een bepaalde Category. Deze laatste behoren dan bij een bepaalde “Section” (sectie) Met de “Section Manager” beheren we deze Sections. We klikken op Content>Section Manager

De opbouw van deze pagina is heel gelijkaardig aan voorgaande pagina’s. We hebben een horizontaal menu met grafische knoppen (Publish, Unpublish, Copy,…) Daaronder hebben we een overzicht van alle “Sections”. Zoals je kunt zien bezit onze site 3 ‘sections’ (About Joomla, News en FAQs) We klikken op de “Section” ‘About Joomla’

83


Hier kun je de titel van de section opgeven, alsook of de desbetreffende section toegangelijk is voor alle bezoekers, geregistreerde bezoekers of gebruikers (users/Special) Via Description kun je ook een beschrijving geven aan de “Sections”.

84


III.C.4 Category Manager

Identiek aan de “Section Manager”…maar nu voor het overzicht van alle Categorieën

We klikken op de “The Project”.

85


Title: De titel van de Category, zoals ze verschijnt op de website Section: Hier geef je aan tot welke Section deze Category hoort Access Level: Wie heeft toegang tot deze Category? Image: Om het effect daarvan te zien, kiezen we voor de afbeelding key.jpg

86


Vervolgens kiezen we bij Image Position (positie) voor “Left” (links) Onthou ook even de tekst die bij “Descriptions” staat (General facts about Joomla)

We klikken nu “Save” – rechtsboven

Nu klikken we op preview – rechtsboven

Dan komen we terecht op de online website

Klik op “More about Joomla”

Klik nu op “The Project”

87


Nu zie je de positionering van de afbeelding “key.jpg”. Je ziet ook de tekst staan dewelke was opgenomen in “Description”.(General facts about Joomla)

III.C.5. Front Page Manager

88


Zodoende krijg je een overzicht van alle artikelen die op de Front Page (Home Page) staan. Je ziet ook het artikel (Gesmolten ijs) staan die we zelf hebben toegevoegd. Aan de hand van “Order” kun je de volgorde van de artikelen op de Home Page bepalen. Als je op de naam van het artikel klikt opent zich onmiddellijk de inhoud van desbetreffend artikel.

III.C.6. Item aan menu toevoegen We hebben in hoofdstuk II bij de bespreking van menu’s aangegeven dat het aanmaken van een nieuwe link in een menu pas begrijpbaar is als we de begrippen Section en Category hebben besproken. We zijn nu zover. Tot vervelens toe herhalen we nogmaals dat de echte inhoud van een joomla website geschreven wordt dmv artikelen (Articles). Deze worden verzameld binnen diverse categorieën (Category). Deze laatste worden op hun beurt dan weer ondergebracht in diverse “Sections”. Laat ons die structuur nog eens illustreren met een voorbeeld. Bezoek even de homepage van de online website. Klik dan even op “FAQ” in het hoofd menu (Main Menu)

89


Vervolgens krijg je de volgende pagina:

Dit is de Section pagina. De online site heeft namelijk een “Section” FAQs (controleer maar even bij Content>Section Manager)

Je ziet dus de titel van de Section in het vet staan (FAQs)

Daaronder zie je een lijst staan van alle Categorieën (Category) die deel uitmaken van de Section “FAQs”.

90


In totaal zijn er dus 4 Categorieën in de Section “FAQs”. Als je nu (als voorbeeld) klikt op de Category “General”, dan krijg je volgend scherm:

Dit is een overzicht van alle artikelen (Articles) die deel uitmaken van de Category “General”. Als je nu op de eerste lijn klikt (Is it possible….entries?), dan krijg je de inhoud te zien van dit artikel

Als je straks dus zelf een Joomla website gaat maken, moet je echt eerst en vooral goed nadenken over de structuur van je site. Hoeveel en welke “Sections” wil ik? Wat zijn de categorieen binnen iedere “Section”?

91

©2007 www.Web-garden.be / www.Web-garden.nl Stel je wil een site gaan maken om door jouw gemaakte juwelen te verkopen. Dan zou je volgende tabel kunnen maken Section Bedrijf Juwelen

Klanten

Category Bedrijfsinfo Bedrijfsnieuws Oorbellen Armbanden kettingen Nieuwe produkten Bestellen Recenties

Nu kun je steeds Artikelen blijven schrijven die je vervolgens eenvoudig toevoegt aan één van de categorieen cq. “Sections”

Daarnaast heb je dan algemene pagina’s die geen section of category behoeven, zoals ‘Links’ , ‘Contact’, Home. Het is dus voor zeer groot belang (!!!!) dat je eerst een goed gedefinieerde structuur hebt van je toekomstige website. Persoonlijk maak ik daar zelfs steeds een tekening (organigram) van. Een menu is het belangrijkste hulpmiddel van een bezoeker om die structuur van je website te zien…en vervolgens eenvoudig te komen waar hij/zij wil zijn in die structuur (Voorbeeld: Juwelen>Oorbellen). Persoonlijk adviseer ik dan ook (het is geen ‘must’!) om je hoofdmenu (Main Menu) parallel te laten lopen met je “Sections”. Dat maakt het voor jou en de bezoeker, me dunkt, het meest logisch. Als je een menu-link toevoegt dan weet je (hopelijk☺) wat je met de extra link wil: -je wil een pagina toevoegen waarop straks meerdere artikelen komen te staan -je wil een pagina toevoegen waarop één (1) artikel komt te staan -je wil een pagina toevoegen met een overzicht van diverse sub-links (Een mooi voorbeeld is de pagina “FAQs” of “General” zoals hierboven beschreven) -je wil met de link een andere website aanroepen 92

©2007 www.Web-garden.be / www.Web-garden.nl Deze voor de hand liggende wetenschap moet je goed in het achterhoofd houden bij het aanmaken van een nieuwe link in een menu. Daar gaan we ☺ We gaan naar Menu>Main Menu

Daar krijg je een overzicht van alle links die in het hoofdmenu staan:

We klikken nu op “New” in het bovenste menu

93


De meest makkelijke is “External Link”. Als je daar op klikt dan krijg je de mogelijkheid een naam (Title) en URL(Link) in te brengen naar een externe site.

94

©2007 www.Web-garden.be / www.Web-garden.nl Onder ‘Internal Link’ staan een hele reeks ‘sub-links’ (Articles, Contacts, News Feeds,…)

Als je nu op één van die sub-links klikt opent zich weer een reeks keuze mogelijkheden. Klik bijvoorbeeld even op ‘Articles’

Zo krijg je dus een grote hoeveelheid aan keuze mogelijkheden.

95

©2007 www.Web-garden.be / www.Web-garden.nl Met de hieronder beschreven keuzemogelijkheden kun je mijn inziens 95% van alle courante website pagina’s invullen. Articles Bij het kiezen van ‘Aricles’ wil je dus op één of andere manier een link leggen naar een artikel. Archive Dit zie je vaak in weblogs. Oudere posts (artikels) worden bewaard onder de rubriek ‘Archive’. Als je hier (Archived Article List) op klikt , dan krijg je onderstaand scherm:

Het lijkt mij logisch dat je als Titel (Title) geeft: Archive of Archief. Je ziet ook dat Joomla al een link (archive) heeft toegekend. De artikelen die gearchiveerd zijn (zie Article Manager) zijn hier te bekijken en kunnen worden gezocht op basis van datum. Article Als je kiest voor ‘Article Layout’ dan wil je dat een link wordt gelegd naar één bepaald artikel. We klikken even op deze link 96


Dmv Title (Titel) kun je een naam geven aan de link. Je ziet dat de link reeds door Joomla is ingevuld. Als je nu even rechts bij Parameters-Basic gaat kijken dan kun je een artikel selecteren die wil linken. Klik op ‘Select’

97


Dan krijg je een overzicht van alle geschreven artikelen, inclusief de bijhorende “Section” en “Category”. Hoe gaat je webpagina er dan uitzien?

(Voor een vergrote weergave klik op de afbeelding) Zoals je kunt zien krijg je dus een pagina waarbij één (1) artikel staan (inclusief de menu’s) Je kunt er natuurlijk voor kiezen om de naam van de auteur, de datum van aanmaak en de datum van last update (laatste aanpassing) weg te laten (zie Article Manager)

98

©2007 www.Web-garden.be / www.Web-garden.nl Category Hier willen we dus een link maken naar een “Category” Bij Category hebben we 2 keuzes

Herinner dat een “Category” een reeks artikelen (Articles) bevat. Bovenstaande keuze laat u toe deze artikelen op 2 manieren weer te geven. In beide gevallen maak je dus één link naar een pagina die een samenvatting is van een category (=een aantal artikelen) Bij ‘Category Blog Layout’ krijg je volgende layout

(voor een vergrote versie klik op de afbeelding) Herinner je de beschrijving die we in het begin van het hoofdstuk hadden betreffende de link “FAQ”. Wat je hier dus ziet is de Category “General” onder de “Section” FAQ. Alle artikels worden er weergegeven, inclusief de inhoud van het artikel. In bovenstaand voorbeeld zijn het allemaal zeer korte artikels. Stel dat jee nlanger artikel hebt, dan kun je bij de opmaak van het artikel een “Read More (Lees Meer…)” link maken. Als je op de link ‘Category Blog Layout’ klikt, dan krijg je volgende pagina:

99


Bij Title(Titel) kun je weerom een titel van je link ingeven. Je ziet dat Joomla weerom reeds een URL heeft ingebracht bij ‘Link’. Het menu rechts (Parameters-Basic) is uiterst interessant en belangerijk

Category: Daar kun je dus de Category kiezen naar waar gelinkt moet worden. Description: Daarvoor moet je terug naar het hoofdstuk ‘Content’, meer bepaald ‘Category Manager’. Daar hebben we geleerd hoe je bij de aanmaak van een ‘Category’ een ‘Descprition’ (omschrijving) kon inbrengen. Hier kun je aangeven of je die omschrijving wilt tonen of niet

100

©2007 www.Web-garden.be / www.Web-garden.nl Description image: Bij het maken van een Category hebben we aangegeven dat je ook een afbeelding kunt opladen voor één “Category”. Hier kun je aangeven of je die wil laten zien. #Leading: Bekijk even het voorbeeld op pagina 98. Het eerste artikel (Is it possible to change….entries?) staat over de volledige breedte van het scherm. Alle andere artikels staan in 2 kolommen. De Leading is dus “1”. Maw het eerste artikel is de volledige breedte. Als je ‘Leading’ ‘2’ zou invullen betekent dit dat de 2 eerste artikelen de volledige breedte hebben. #Intro: Bekijk terug het voorbeeld op pagina 98. Onder het ‘Leading’ artikel staan er 4 artikels met de inhoud. Dus “intro” is gelijk aan 4. #Columns: De 4 artikels zijn weergegeven in 2 kolommen #Links: Dit zie je dus niet op pagina 98 ☺. Maar onderaan de pagina zoals weergegeven op pagina 98 zie jet het volgende:

101

©2007 www.Web-garden.be / www.Web-garden.nl Bovenstaande afbeelding is het verlengde van pagina 98. Onderaan zie je bij ‘Read More’ 3 extra links naar bijkomende artikelen staan, maar ze zijn opgenomen in de kolommen en hebben geen tekst van de artikelen. Met ‘#Links” geef je het maximum aan links die hier bij ‘Read More’ mogen komen te staan. Als er meer artikelen zouden bestaan dan zal Joomla een extra pagina aanmaken (knap toch ☺☺)

Bij ‘Category List Layout’ krijg je volgende webpagina:

(voor een vergrote versie, klik op de afbeelding) Nu krijg je dus een lijst van Artikelen die behoren bij de Category “General”. De bezoeker moet nu op een Artikel klikken om de Full Screen inhoud te zien. Als we op de link ‘Category List Layout’ klikken:

dan krijgen we volgende pagina:

102


Weerom kun je een titel(Title) van de nieuwe link opgeven. Weerom heeft Joomla al een URL toegekend bij ‘Link’. Bij Parameters-Basic(rechts) kun je inbrengen: Category: Kies hier de Category naar de welke je wil linken Table Headings: De Table Heading is ons bovenstaand voorbeeld is:

Met ‘Show’ toon je die. Met ‘Hide’ niet. Date Column: Met deze optie kun je een extra kolom toevoegen waarbij de datum van aanmaak van het artikel wordt getoond. Filter: Bij ‘Show’ komt er een filter functie boven de tabel te staan. Voorbeeld:

Filter field: Daarbij geef je aan op welk veld gefilterd kan worden.

103


Front Page /Front Page Blog Layout Dit is identiek aan de Category Blog Layout, met dit verschil dat het hier de Front (Home) Page (pagina) betreft. Maw de artikelen gekoppeld aan de Front(Home)Page zullen getoond worden in blog layout. Als je de Home page van onze online website bekijkt (zie afbeelding hieronder) dan zie je dat deze is opgemaakt in blog formaat ( 1 “leading” artikel, 2 kolommen,…)

104

©2007 www.Web-garden.be / www.Web-garden.nl Section Hierbij zijn weerom 2 mogelijkheden:

We verwijzen hierbij terug naar het “FAQ” voorbeeld dat we uitvoerig hebben beschreven op pagina 89. Als we op de link “FAQ” klikken in het hoofd menu (Main Menu) dan opent zich een ‘section’ pagina met een overzicht van alle categorieen. Als je dus bij ‘Select Menu Item Type’ kiest voor ‘Section’ wil je dus een link maken naar een pagina die info bevat betreffende een “Section”. De inhoud van die “Section” kun je, naar analogie met “Category”, weerom weergeven op 2 manieren: -

Blog Layout Section Layout (PS: Hier is Joomla niet consistent: Bij Category noemen ze dit de ‘Category List Layout’, terwijl ze bij ‘Section’ over een Section Layout spreken (zonder ‘list’))

Section Layout Ik wil hierbij eerst even beginnen met ‘Section Layout’. We hernemen hierbij ons voorbeeld van “FAQ”.

Hier zie je een overzicht van alle Categorieen, met daarbij tussen haakjes de hoeveelheid artikelen .

105

©2007 www.Web-garden.be / www.Web-garden.nl Section blog Layout Als we nu deze layout zouden kiezen voor de link (section) “FAQ”, dan zou die er zo uitzien:

Als je deze pagina verder naar beneden scrollt zie je onderaan van de pagina:

106


Laat ons even beginnen met de afbeelding op pagina 105. Heb je onmiddellijk door?? Bij deze layout worden de categorieen (Category) helemaal niet weergegeven…maar direct de inhoud van ALLE artikels uit ALLE categorieen. Op de afbeelding hierboven zie je: -

onderaan worden een aantal links opgegeven naar artikelen, zonder de inhoud op te geven van het artikel (alleen links) Alle artikelen uit alle categorieen zijn verdeeld over 3 pagina’s. Je kunt van de ene naar de andere pagina surfen.

Als we nu op de ‘links’ “Section Blog Layout klikken”

107


opent zich een venster die bijn identiek is aan het venster (menu) die we hadden bij ‘Category Blog Layout’ (pagina 99)

Contacts Vervolgens hebben we in de lijst van ‘Select Menu Item Type’ de keuze ‘Contacts’

108


Als we klikken op ‘Contacts’ dan krijgen we:

Alvorens dit (en wat volgt) te begrijpen moeten we een sprongetje maken naar de rubriek ‘Contact’ dewelke te vinden is in het hoofdmenu onder ‘Components’

109


Hier zien we terug de Joomla filosofie terug betreffende het gebruik van “Category”. Misschien gaat u ervan uit dat er op een website maar 1 contact formulier of 1 contact (=email) adres is. Joomla gaat ervan uit dat er meerdere ‘contacts’ kunnen zijn. Logisch want Joomla laat toe dat er meerdere ‘auteurs/gebruikers’ (authors/users) werken aan de website. Ieder van die gebruikers/auteurs kan zijn eigen contact informatie (formulier) plaatsen. Onderstaand voorbeeld is genomen uit een Joomla website van een jeugdbeweging:

Afhankelijk van welke groep je wil contacteren kun je een ander contact formulier kiezen. Telkens krijg je een contact-formulier te zien

110

©2007 www.Web-garden.be / www.Web-garden.nl Dus je dient eerst voor ‘Contacts’ een Category te hebben.

We klikken op ‘Contacts>Categories’

We zien dat er 1 Category aanwezig is (met naam ‘Contacts’) Als we nu klikken op de category ‘Contacts’

111


Ik mag hopen dat de opbouw van dit scherm intussen heel vertrouwd overkomt ☺ Hier kun je dus gegevens betreffende de Category ‘Contacts’ aanpassen. We keren nu terug naar vorig menu:

112


We klikken nu op ‘Contacts’ (links-boven)

We zien via de ‘Contact Manager’ dat er 1 contact is toegevoegd met de zeer originele naam ‘Name’ We klikken nu op ‘Name”

113


Je ziet dat er hierbij heel wat informatie kan worden ingebracht. Joomla voorziet de mogelijkheid om naast een e-mail contact formulier ook andere (persoonlijke) gegevens op de website plaatsen (adres, telefoon, GSM, Fax, Website,…) In de rechterkolom kun je nu aangeven of je al die informatie ook zichtbaar (Show) wil hebben. Let wel: Als je bijvoorbeeld geen Fax nummer invult, maar in de rechterkolom ‘show’ hebt staan bij Fax…dan krijg je op de website wel Fax te zien maar zonder nummer. Als je dus de rubriek Fax helemaal niet op je site wil, dan moet je voor ‘Hide’ kiezen. Nu dat we weten dat er bij ‘contacts’ ook ‘Categorieen’ bestaan, kunnen we terug naar de keuze ‘Contact ‘ bij ‘Menu Item Type’ (pagina 108)

114


Contact Category Layout Hier maak je een layout waarbij ALLE contacts binnen een bepaalde Contact-Category worden weergegeven. Een voorbeeld hiervan hebben we gegeven op pagina 109 (jeugdbeweging-website)

Standard Contact Layout Hierbij zal 1 contact (contact-formulier) op de webpagina worden weergegeven. Let wel: Als je dus een link ‘contact’ in je menu wil toevoegen (onafhankelijk van de gekozen layout – Contact Category Layout of Standard Contact Layout), moet je er wel EERST voor zorgen dat je contact-category en je contact(s) zijn aangemaakt in ‘Components>Contacts’ (pagina 110)

Search

115


Hierbij kun je een link maken in je menu die gekoppeld is aan een Search.

Hierbij is er gekozen voor de extra mogelijkheid om specifiek te zoeken bij Articles (Artikelen) ,Web links, contacts,…. Deze extra zoek functie kun je activeren door in de rechterkolom een ‘’Yes’ te plaatsen bij ‘Use Search Areas’

Web Links Iedere website of weblog heeft een pagina waarbij een verzameling ‘Links’ worden weergegeven. Deze links verwijzen naar bevriende of analoge websites waar meer of andere info kan worden gevonden.

116

©2007 www.Web-garden.be / www.Web-garden.nl Kijk maar even op www.Web-garden.be. Dan vind je in het hoofdmenu een link naar ‘Links’.

Hier geldt dezelfde logica als bij ‘Contacts. We hebben daar gezien dat er eerst een contact-category moet worden gemaakt, en vervolgens een contact wordt aangemaakt die behoort bij een welbepaalde contact-category. Bij ‘Web links’ is het idem dito. Je moet eerst een links-category aanmaken , en vervolgens een link definiëren die behoort tot een bepaalde links-category. Om de desbetreffende Categorieen en links aan te maken , moeten we terug naar de rubriek ‘Components’ in het hoofdmenu.

Voor het maken van een web-link layout, kun je vervolgens kiezen uit 3 mogelijkheden:

117


a)Web Link Category List Layout Hierbij maak je een link naar een pagina met een overzicht van alle weblinks-categorieen b)Category List Layout Hierbij maak je een link naar een pagina met een overzicht van weblinks binnen 1 weblinkcategory. c)Web Link Submission Layout Hierbij maak je een link naar een pagina waarbij een geregistreerde bezoeker een weblink kan toevoegen.

Wrapper Dmv de wrapper layout kun je een externe webpagina laden in je eigen website.

External Link Dit is misschien wel de meest eenvoudige toepassing. Hier kun je dus een link toevoegen an je menu, die direct verbinding geeft met een externe website/pagina.

118


III. D. Components III . D. 1 Banners Banners zijn advertenties onder de vorm van afbeeldingen. Joomla heeft een uitgewerkte functie die het plaatsen en beheer van dergelijke banners toelaat. En ze pakken het heel professioneel aan ☺

Joomla gaat er vanuit dat je diverse klanten hebt die jou betalen voor het plaatsen van advertenties op je website (ik hoop het voor jou ☺)

Bij de functie ‘banners’ heb je drie sub-keuzes: 1)Clients

Dmv deze functie kun je al je klanten beheren ☺

119

©2007 www.Web-garden.be / www.Web-garden.nl Momenteel staat er dus slecht 1 klant in…met naam “Open source Matters’ We klikken daar even op

Dit is dus een veredeld fiche systeem, waarop je de klanten info stockeert.

2)Categories Zoals quasi overal binnen Joomla wordt er ook hier gewerkt met Categories.

120


Alle banners worden dus opgeslagen in een welbepaalde Category We klikken even op Joomla

We kunnen dus hier de Category een bepaalde naam geven. Al dan niet publiceren, en aangeven voor wie ze toegankelijk zijn. PS: Bij Banners wordt dus geen gebruik gemakt van “Sections”

3)Banners

121


Name(Naam): Hier geef je de banner een naam. Show Banner: Met ‘Yes’ wordt de ‘Banner’ vertoond op de website. Sticky: Een banner met het etiket ‘Sticky’ (dus Yes), wordt het eerst vertoond. Order: Joomla gaat er van uit dat je roterende banners gebruikt. Maw telkens de bezoeker de pagina (her)bezoekt, ziet hij een andere banner. Met ‘order’ heef je de positie aan van deze banner aan in het roterende systeem Category: Hier geef je aan in welke Category de banner moet worden opgeslagen.

122

©2007 www.Web-garden.be / www.Web-garden.nl Client Name (Naam Klant): Hier geef je de klant op aan wie deze banner behoort Impressions Purchased: Letterlijk vertaald betekent dit ‘Aangekochte vertoningen’. Maw ke je kunt met een betalende adverteerder afspreken dat je een baner ‘x’ keert vertoont op je website. Die ‘x’ breng je hier in. Als je kiest voor ‘Unlimited’ dan zal de banner ‘eeuwig’ vertoond worden..tot het moment dat je bovenstaande ‘Show Banner’ op ‘No’ zet. Click URL: De bedoeling is dat een bezoeker klikt op de advertentie, en vervolgens op de website van de klant arriveert. Hier geef je de URL op van de website waar de bezoeker moet uitkomen na klikken. Clicks: Hier kun je zien hoeveel keer de banner is aangeklikt. Customer banner code: Dit is wat complexer. Sommige adverteerders willen alleen betalen als de banner op je website is aangeklikt (Pay per Click) Er bestaan netwerken en programma’s die de kliks op een advertentie-banner registreren. Hier kun je de URL en code betreffende het controlerende netwerk ingeven. Meer info: http://en.wikipedia.org/wiki/Affiliate_Networks

Banner image selector:

Hier kies je de banner afbeelding. Let wel: De banner afbeeldingen moeten opgeladen worden in de map: images/banners/ Banner images: Hier zie je een afbeelding van de gekozen banner.

III. D. 2. Contacts

123

©2007 www.Web-garden.be / www.Web-garden.nl Dit stukje hebben we reeds uitvoerig beschreven op pagina 109

III. D. 3 News Feeds

News Feeds is specifiek interessant voor iemand die een Joomla site wil maken die RSS ondersteunt. Om een idee te krijgen waarover het gaat, bezoeken we even onze online website. We klikken op News Feeds in het Main Menu (hoofd menu)

Dit is een overzicht van de onderwerpen binnen News Feeds.

124

©2007 www.Web-garden.be / www.Web-garden.nl We klikken op Joomla.

Nu op ‘….Community News’

Wat is er nu zo speciaal??? Welnu, de bovenstaande artikels heb je” zelf niet geschreven maar zijn overgenomen van een andere website. En in feite dmv copy and paste geplaatst op jou website. De website die deze artikels ter beschikking stelt doet dit door dmv een RSS feed. We gaan nu terug naar de Administrator back-end, en naar de functie Components>News Feeds>Feeds

125


Hier zie je nu een overzicht van alle News Feeds. Ieder van deze is gekoppeld aan een website dewelke een RSS Feed heeft. Als voorbeeld klikken we even op “Business News”

126


Name: Naam van de News Feed Category: Ook de News Feeds worden opgeslagen in een bepaalde News Feeed – Category Link: Dit is de URL naar de website die via een RSS Feed artikels en nieuws ter beschikking stelt. http://headlines.internet.com/internetnews/bus-news/news.rss Dergelijke URL’s verwijzen meestal naar een bestand met extensie .rss

III. D. 4 Polls

Via dit menu krijg je een overzicht van de gemaakte Polls We klikken op “Joomla is used for?”

127


Title: Hier kun je een titel geven aan de Poll. Dit titel komt op ook op je website te staan. Lag: Dit is het aantal seconden dat een bezoeker moet wachten alvorens hij/zij nogmaals mag stemmen. Options: Daar krijg je de antwoorden tussen welke de bezoeker kan kiezen?

128

©2007 www.Web-garden.be / www.Web-garden.nl III. E. Extensions

III.E.1 Install/Uninstall Hier kun je allerlei extensies (pug-ins en components), dewelke je extern gevonden hebt, installeren of de-installeren. Daarbij horen ook nieuwe templates (layouts) of een ander talenpakket.

Bovenstaand menu lijkt mij behoorlijk vanzelfsprekend. Je hebt via het internet een extensie gevonden en gedownload op je harde schijf Dmv ‘bladeren’ zoek je de gedownloade bestanden op je harde schijf. Vervolgesn klik je op ‘Upload File & Install’. Tip: Op http://extensions.joomla.org vind je een zeer goed overzicht van beschikbare extensies.

129

©2007 www.Web-garden.be / www.Web-garden.nl Er wordt teven aangegeven of de extensie compatibel is met Joomla 1.5

Via Install kun je dus ook een ander talenpakket opladen.

III.E.2 Module Manager

130

©2007 www.Web-garden.be / www.Web-garden.nl In bovenstaande afbeelding krijg je een overzicht van alle modules die standaard meegeleverd worden met Joomla. Een template/layout op zijn beurt houdt al deze modules dan samen in een specifieke visuel vormgeving. Er zijn weerom meedere externe modules beschikbaar op het internet: Voorbeeld: Je kunt er een module vinden die een live-chat box op je website plaatst. Alle beschikbare menu’ s vormen ook modules. Je hebt dus de module ‘Main Menu’, ‘User Menu’,… We hebben reeds uitvoerig besproken hoe je een link toevoegt aan een menu. Via een module kun je nu bepalen waar het menu moet geplaatst worden en hoe een menu er moet uitzien. Alvorens we beginnen met het bespreken van een aantal modules, spitsen we ons toe op het begrip ‘position’ (positie) van een module. Verder zullen we bij de bespreking van een module telkens zien dat we de positie (position) van een module kunnen opgeven. Joomla kent een aantal voor-gedefinieerde posities. Deze posities zijn specifiek voor een bepaalde layout/template. We gaan via het hoofdmenu naar Extensions>Template Manager

We klikken op Template Manager

Er zijn 2 templates (layouts) beschikbaar. De template ‘rhuk_milkyway’ is actief (zie ster bij ‘Default’)

131

©2007 www.Web-garden.be / www.Web-garden.nl We klikken op ‘rhuk_milkyway’

Nu klikken we op “Preview’

(klik op bovenstaande afbeelding voor een vergrote versie) Dmv rode tekst zijn de posities binnen deze layout weergegeven. Bovenaan hebben we de positie ‘top’. Tussen haakjes staat er ‘none outline’, wat aangeeft dat er geen specifieke omkadering is zoals extra boord of afgeronde hoeken.

132


Verder zie je de posities : breadcrumb, left, user3 en user 4 Joomla heeft de volgende posities: left, right, footer, top, breadcrumb, user1, user2, user3 en user4 De posities user1 en user2 zij hieronder weergegeven

Nu kunnen we de verschillende modules bespreken

Breadcrumbs

Breadcrumbs is een navigatietool die de bezoeker vertelt waar hij zich op dit moment bevindt binnen de website. Voorbeeld:

133


De bezoeker heeft via de Home Page (Home) geklikt op ‘The News’ en vervolgens geklikt op het artikel ‘We are Volunteers’ (wij zijn vrijwilligers) In de Module Manager klikken we nu op ‘Breadcrumbs’

Je kunt er de desbetreffende module een ‘title’ (Title) geven. De positie is ‘breadcrumb’. Via ‘Menu Selection’ kun je aangeven bij welke menu’s de breadcrumb module moet worden gebruikt. Hier is gekozen voor ‘Alle’ Bij ‘Module Parameters’ (rechterkolom), kun je aangeven dat de breadcrumb steeds moet beginnen met ‘Home’ (Show Home:Yes) Text for Home entry: De breadcrumb begint met in ons geval steeds met ‘Home’. Maar in het plaats van het woord ‘Home’ zou je hier kunnen zetten ‘Beginpagina’.

Footer Webdesigners verwijzen met ‘Footer’ steeds naar wat er onderaan een webpagina wordt geplaatst. 134

©2007 www.Web-garden.be / www.Web-garden.nl Banners

De banner wordt geplaatst in de positie ‘footer’..maw onderaan de pagina. Target: Als een bezoeker op de banner klikt, wordt hij/zij doorgelinkt naar de website van de adverteerder. Hier kun je aangeven of deze website zich moeten openen in hetzelfde venster als jou website, of als er een nieuw venster moet worden geopend (nieuw tabblad voor FF of IE7) Banner Client: Hier geef je de adverterende klant op (zie pagina 118) Randomize: Vrij vertaald “Volgorde”. -Sticky, ordening: De banners gedefinieerd als ‘sticky’ worden eerst getoond, gevolgd door de andere banners. De volgorde van tonen is gedefinieerd bij ‘banners’ -Sticky, randomize: De banners gedefinieerd als ‘sticky’ worden eerst getoond. De andere banners worden getoond in willekeurige volgorde. Header Text: Tekst die de banner voorafgaat Footer Text: Dit is tekst die mogelijks na de banner komt.

135

©2007 www.Web-garden.be / www.Web-garden.nl Main Menu

Het PHP programma mod_mainmenu wordt gebruikt voor het plaatsen en beheren van alle menu’s. Menu Style: -List: Dan krijg je alle links in het menu als een lijst, maw inclusief het bolletje of ander symbool

-Legacy-Vertical: Dan krijg je alle links in het menu onder elkaar, maar zonder de bolletjes of ander lijst symbool.

136


-Legacy-Horizontal: Dan krijg je alle links in het menu op 1 horizontale lijn

Statistics Zoals je kunt vast stellen is deze module niet actief bij installatie;

Met Statistics kun je info geven betreffende je server.

Met de Hit Counter kun je dus een bezoekersaantal weergeven op je site. Met increase Counter kun je de het weergegeven aantal wat vervalsen ☺☺

Login Form Met het Login Form kan een gebruiker(user) zich inloggen, waardoor hij mogelijks website inhoud kan toevoegen of aanpassen.

137

©2007 www.Web-garden.be / www.Web-garden.nl Gewone bezoekers kunnen zich hier mogelijks registreren.

Pre-Text: Dit is tekst die voor het login-form kom te staan. Post-Text: Hier komt eventueel tekst die na de login form komt Voorbeeld:

Login Redirection URL: Hier kies je waar de bezoeker/gebruiker naar wordt doorverbonden bij inloggen Logout Redirection URL: hier kies je waar de bezoeker naar toe moet als hij/zij uitlogt. Greeting: Als de bezoeker inlogt kun je de tekst “Hello, [username]” laten verschijnen 138


Name username: Hier kun je kiezen of de begroeting gebeurt, gebruik makend van de ‘gebruikersnaam’ (username) of van de naam (name) Related Items Bij installatie van Joomla is deze module niet geactiveerd. Deze module heeft je de mogelijkheid om de titels van artikels te tonen die gerelateerd zijn aan een bepaald getoond artikel. De correlatie is op basis van keywords die ingebracht worden in de metadata. Polls Hier activeer je de vertoning van Polls. Je heeft ook aan op welke pagina de poll terecht komt

In bovenstaand voorbeeld dus alleen op de Home Page (Front Page) Who’s online (wie is online) Deze module geeft je de mogelijkheid de bezoeker te laten zien wie online is op dit moment.

139


Je kunt dus kiezen welke info je daarbij wil tonen.

Random Image Je kunt je website opfrissen door op bepaalde pagina’s afbeeldingen te plaatsen. Daarbij wordt systematisch een andere afbeelding getoond. Vandaar het woord ‘random’ (willekeurig)

Position: hierbij wordt er voor gekozen om de afbeelding rechts (right) te plaatsen. Order: Er zijn meerdere modules die rechts (right) worden geplaatst. Met ‘order’ geef je de volgorde aan. We kiezen hier voor ‘4: Random Images’ . Dit betekent dat de willekeiruge afbeelding het meest onderaan in de rechterkolom van de site komt te staan Image Type: Hier kun je kiezen tussen gif, jpg of png. Alle afbeeldingen die gebruikt worden voor het vertonen van een willekeurige (random) afbeelding moeten dus dezelfde extensie hebben. Image folder: Hier geef je de map aan op de server waar de afbeeldingen staan. Voorbeeld: images/stories . Let wel: je begint de locatie dus niet met een’/’ teken Link: Je kunt er voor kiezen dat bezoekers op de afbeelding kunnen klikken, en zodoende doorverbonden worden naar een bepaalde URL. Hier kun je desbetreffende URL ingeven. Width(px)/Height(px): Hier kun je de breedte (width) en hoogte(height) van de afbeedling opgeven. - voor een goede weergave van de afbeelding is het aangewezen dat alle afbeeldingen dezelfde afmeting hebben. - Aanpassen van afmetingen doe je het best met een extern foto-bewerkings programma. - Het is niet aangewezen om via HTML code de afmetingen van een afbeelding te veranderen. 140

©2007 www.Web-garden.be / www.Web-garden.nl Voorbeeld:

Je kunt natuurlijk de titel ‘Random Image’ vervangen door een meer gepaste omschrijving.

Syndication De Syndication module levert een RSS Feed aan, die door bezokers kan gebruikt worden in hun RSS programma. Zo worden ze via RSS steeds op de hoogte gehouden van de laatste berichten op je website. Hier kun je op Wikipedia iets meer lezen betreffende RSS.

Newsflash Misschien is het je al opgevallen…maar bij je online website verschijnt er helemaal bovenaan de pagina, steeds een stukje van een artikel. De getoonde tekst is steeds anders als je een webpagina opnieuw oproept.

Deze functie wordt beheerd dmv de module ‘Newsflash’

141


Position:Top Menu Assignment: Hier is er voor gekozen om de “NieuwsFlash” op alle pagina’s te laten zien. Category:Hier geef je de Category weer waar “NewsFlash” zijn stukjes van artikels moet halen. Layout: Je kunt hier kiezen tussen een horozontale of verticale weergave. Read more..link: Moet er bij de ‘NieuwsFlash’ een link weergegeven worden waardoor de bezoeker de rest van het artikel kunnen lezen. Article title: Moet de titel van het artikel worden weergegeven? # of articles? Hier vul je het aantal artikels (in de specifieke Category) in, waaruit Joomla kan kiezen.

Latest News (Laatste Nieuws) Dit is o.a. weergeven op de Home Page (Front Page).

De rubriek (module) ‘Latest News’ geeft de laatst gepubliceerde artikels weer.

142


Position: In dit geval ‘user1’. Count: Dit is het aantal recente artikels die moet worden weergegeven bij ‘Latest News’. Order: Hier je de volgorde bepalen Recently Added First: De meest recente staan van boven in het lijstje Section ID: Ga even terug naar Content>Section Manager

Open de Section Manager

Dan zie je in de laatste kolom dat iedere Section een ID nummer heeft.

143

©2007 www.Web-garden.be / www.Web-garden.nl Dit ID nummer kun je nu inbrengen bij Section ID. Dan zal de module ‘Latest News’ specifiek nieuwe artikelen zoeken in die Section. Je kunt ook meerdere Section ID’s ingeven, dewelke gescheiden zijn door een komma. Category ID: Idem als Section ID maar dan voor Category’s

Popular

De module Popular heeft een overzicht van de meest populaire artikels. Dit zijn de artikels die het meest zijn aangeklikt/bezocht door bezoekers. Search Deze module beheerst de “Search” (zoeken) functie op de website.

Hier kan de bezoeker de website doorzoeken op basis van en door hem/haar ingebrachte term.

144


Box Width: Hier geef je de breedte (in pixels) aan van het zoekvenster. Text: Hier kun je een tekst ingeven die in het zoekvenster staat.

Hier hebben we search vervangen door ‘zoeken’ Search Button:Als je hier ‘Yes’ ingeeft dan krijg je dit:

ER is hier een knop toegevoegd met de tekst ‘zo’

145


III.E.3 Plug in Manager Plug in’s zijn een stukje software die een bepaalde taak uitvoeren binnen Joomla. Meestal zijn er geen verdere specificaties op te geven. Er is de beperking tot het activeren of deacitevern van de plug-in. Als je klikt op Extension > Plug in Manager, dan krijg je een overzicht van de geïnstalleerde plug-ins, alsook welke zijn geactiveerd, en welke gedeactiveerd.

Ik neem er hier even, mijn inziens, de meest belangrijke uit. Gmail: Indien ingesteld kan een Gmail gebruiker zich inloggen op je Joomla website via zijn Gmail gegevens. Page Navigation: Onderaan een pagina zie je soms staan ‘Next’ (volgensde) en ‘Previous’ (vorige). Dit omdat bijvoorbeeld een artikel meerder pagina’s in beslag neemt. Als je die functionaliteit ter beschikking wil, dan moet ‘Page Navigation’ geactiveerd zijn. Rating: We hebben gedurende bovenstaande cursus aangegeven dat je een functie kunt toevoegen waarbij de bezoeker een beoordeling kan geven aan een artikel. Als je überhaupt van deze functie gebruik wil maken, moet ‘Rating’ geactiveerd zijn. e-mail cloaking: Met deze module zorg je ervoor dat gebruikte e-mail adressen dmv Javascript versleuteld worden.Zo zijn deze adressen moeilijk opspoorbaar voor spammers. Code Hightlighter(GeSHi): Deze module is alleen interessant voor diegene die HTML of andere code willen verwerken in een tekst

146

©2007 www.Web-garden.be / www.Web-garden.nl Pagebreak: Deze module heeft je de mogelijkheid om langere artikels ‘uit te smeren’ over meerdere pagina’s. Pagebreak zorgt er ook voor dat je een kleine inhoudstabel op de pagina’s krijgt die de bezoeker makkelijker navigeert binnen het lange artikel. Voorbeeld:

No editor: Met deze module zorg je ervoor dat een gebruiker/user geen echte editor ter beschikking krijgt voor het aanmaken van een artikel. De gebruiker/user kan alleen “kale” tekst (zonder opmaak) creëren. TinyMCE 2.0: Dit is de editor die je reeds in diverse voorbeelden hebt zien verschijnen.

Image Dit is de module die het mogelijk maakt om bij de aanmaak van een artikel een afbeedling op te laden.

147


Vervolgens kun je via de afbeelding knop in de editor ( afbeelding veranderen.

) de eigenschappen van deze

Read more…(lees meer): Deze module moet geactiveerd zijn om de mogelijkheid te hebben ‘Read more (lees meer)’ toe te voegen aan een artikel. Blogger XML-RPC API: Met deze plug in, is het mogelijk om te ‘communiceren’ tussen Blogger en Joomla. Voor meer info en tutorial, klik hier

148


III.E.4 Template Manager De Template Manager heeft een overzicht van alle templates (layouts) die beschikbaar zijn.

Dus bij de installatie van Joomla zie je dat er 2 templates (layouts) zijn mmegeleverd. Op het internet kun je diverse gratis templates terug vinden. Daar Joomla 1.5 nog maar net zijn start blokken is vertrokken, is het aantal gratis templates voor Joomla 1.5 nog beperkt. Op www.Web-garden.be zullen we regelmatig links bij plaatsen van gevonden gratis templates. Het opladen van nieuwe templates gebeurt via de Install/Uninstall Manager

149


150

Werken met Joomla 1.5

Recommend Documents