Handleiding frontend

Handleiding Front End Gebruikers Versie 0.3.


Introductie

Deze handleiding is geschreven op basis van Joomla! 1.0.3 en WysiwygPro 2.2.4. De handleiding is bedoeld voor de webredacteuren van de websites die met Joomla! gemaakt zijn en alleen aan de zgn. Front-End mogen inloggen. De handleiding wordt in PDF-formaat beschikbaar gesteld op http://www.mantools.nl/index.php?id=27

Mocht de lezer willen reageren op deze handleiding dan graag per e-mail naar harry.bos.2008apestaartjegmailpuntcom

Veel plezier met deze handleiding.


Harry Bos


Inhoud

Inleiding

Het Content Management Systeem Joomla

Joomla! Is een Content Management Systeem (CMS). Dit systeem maakt het mogelijk, dat mensen zonder kennis van HTML of andere programmeertalen, in paar eenvoudige stappen teksten op de website kunnen plaatsen. Daar is niets meer voor nodig dan een Browser en een Internetverbinding.

Content betekent letterlijk "inhoud" en is een verzamelnaam voor “alles” wat je op een website kunt plaatsen. Denk aan tekst, foto´s, plaatjes, geluid of een filmpje. Deze handleiding beperkt zich tot het maken van een content-item. In deze handleiding wordt dit ook aangeduid als nieuwsartikel.

Binnen het Joomla! CMS zijn naast de beheerders een viertal verschillende gebruikersgroepen gedefinieerd:

  • Geregistreerd
  • Auteur
  • Editor
  • Publisher

Gebruikers in de groep "Geregistreerd" kunnen inloggen op de voorpagina van de website. Er zijn pagina's die alleen getoond worden aan ingelogde gebruikers. Een gewone bezoeker zal deze pagina's dus niet zien. Dit geeft de mogelijkheid om bepaalde informatie alleen aan een geselecteerde groep te tonen.

Gebruikers in de groep "Auteur" hebben na inloggen de mogelijkheid om nieuwe content op te stellen en in te zenden. Zij kunnen ook hun eigen content te wijzigen. Zij kunnen dus geen artikel plaatsen. Het artikel zal eerst door een "Publisher" (of hoger) moeten worden gelezen die het vervolgens kan publiceren.

Gebruikers in de groep "Editor" hebben dezelfde toegang als die van "Auteur" maar kunnen nu ook alle andere content bewerken. Ook zij kunnen niet publiceren.

Gebruikers in de groep "Publisher" hebben de mogelijkheid om alle content in te zenden, te wijzigen en te publiceren.

In deze handleiding wordt uitgelegd hoe je content kan aanmaken. Voor de publishers wordt tevens aangegeven hoe je het artikel vervolgens publiceert.

Naast de hiervoor genoemde groepen kent Joomla! nog een zgn. "admin"-gedeelte. Hier zijn de volgende groepen onderkend:

  • Manager
  • Administrator
  • Super Administrator

Deze groepen kunnen functioneel onderhoud plegen aan de site. Zij kunnen gebruikers toevoegen, wijzigen en verwijderen. Daarnaast voeren zij het beheer over de secties en categorieën. Op het verschil tussen Manager, Administrator en Super Administrator wordt in deze handleiding niet verder ingegaan.

Structuur van Joomla

De website bestaat uit verschillende secties ("sections"). Binnen een sectie staat alles aan content wat op een logische en begrijpelijke wijze bij elkaar hoort. Net als in een kledingkast liggen de sokken bij de sokken en de overhemden bij de overhemden. Op de website stoppen we bijv. alle wedstrijden bij elkaar in een sectie Wedstrijdkalender. Alle artikelen met een medische relatie stoppen we in de sectie Medische commissie. Voor (bijna) elke website een dergelijk structuur in sectie te bedenken.

Binnen een sectie zijn categorieën ("categories"). Bijvoorbeeld binnen de sectie "Nieuws" bestaan de categorieën "Van het bestuur", "Evenementen", "Uitslagen", etc. Binnen de sectie "Medisch" zouden we bijvoorbeeld de volgende categorieën kunnen maken: "voeding", "spieren", "blessures".

Door consequent alle content in categorieën van de verschillende secties te stoppen is het voor een bezoeker eenvoudiger om te vinden wat hij/zij zoekt en gerelateerde informatie staat dicht bij elkaar.

Bij het plaatsen van een content-item (nieuwsbericht o.i.d.) moet je eerst goed bedenken in welke categorie van welke sectie je het gaat onderbrengen. Hoe voeg je een artikel toe aan de website: Beslis eerst wat je wilt toevoegen. Kun je het onder nieuws/mededeling plaatsen? Of is het een verslag of een stuk tekst dat langere tijd mee moet. Wil je dat er een korte intro op de beginpagina van de site komt? OK, stap voor stap.

We willen een nieuwsartikel plaatsen.

Eerst inloggen op de site, accounts kun je aanvragen bij de webmaster (zie pagina "Contact" voor het e-mail adres).

Nadat je bent ingelogd verschijnt er links een extra menu: het User Menu (afhankelijk van de website kan de opmaak verschillen).


Afbeelding:FEU1.jpg

"Figuur 1: User Menu"


In dit User Menu zie je zes mogelijkheden.

  • "Mijn gegevens"
    Hier kun je je naam, gebruikersnaam, je e-mail of je wachtwoord aanpassen.
  • "Plaats bericht"
    Klik hier om een nieuws bericht te plaatsen.
  • "Plaats een link"
    Klik hier als je een hyperlink aan de site wilt toevoegen; dit verzoek wordt naar de webmaster / webredactie gestuurd en hij/zij bepaalt of de link wordt geplaatst.
  • "Check-In Mijn Items"
    Als je aan berichten werkt worden deze "uitgechecked", dat wil zeggen dat er een soort slotje opkomt dat voorkomt dat meer dan een persoon tegelijkertijd aan hetzelfde artikel werkt. Als jij een artikel bewerkt, wordt dat slotje erop gezet. Alleen jij kunt het dan wijzigen. Zodra je klaar bent, moet dat slotje er weer vanaf. Meestal gaat dat automatisch, maar voor de zekerheid klik je op deze link en dan worden alle slotjes die geplaatst waren op de artikelen waar jij aan hebt gewerkt er vanaf gehaald. We noemen dit "In-checken van je Items".
  • "Admin"
    Via deze optie kom je in een apart deel van de website. Deze zgn. "back-end" is alleen voor geautoriseerde leden.
  • "Handboek Webredactie"
    Met deze optie word je doorgelinkt naar het Handboek Webredactie waarin alle spelregels staan voor het gebruik van de website, schrijven van artikelen, plaatsen van foto’s, wie doet wat en is waarvoor verantwoordelijk, etc. Een must voor elke webredacteur. Dit menu-onderdeel komt niet voor bij een standaard installatie.

Het maken van artikel

Wij willen content toevoegen dus klikken we op "Plaats bericht". Je komt automatisch terecht in de sectie "Nieuws". Er verschijnt een nieuwe webpagina:


Afbeelding:FEU2.jpg

"Figuur 2: Plaats bericht"


Bovenin plaats je de titel van het bericht en kies je in welke nieuwscategorie je het nieuwsartikel kwijt wilt. Je kunt kiezen uit de volgende categorieën. Staat jouw categorie er niet bij, neem contact op met de webmaster.


Afbeelding:FEU3.jpg

"Figuur 3: Selecteer categorie"


Vervolgens typ je in het bovenste tekstvak, aangeduid met "Introductie Tekst (Verplicht)" de openingsparagraaf van je artikel. Dit deel kun je op de voorpagina laten verschijnen. In het tweede tekstvak (scroll naar beneden) kun je de rest van je artikel kwijt. Dit deel wordt zichtbaar als de bezoeker na het lezen van je introductietekst het artikel interessant genoeg vindt en op "Lees meer" klikt.

Boven de tekstvakken staat een werkbalk met icoontjes die je wellicht herkent van MS-Word. Deze icoontjes worden in onderstaand overzicht toegelicht.

Onder de twee tekstvakken staan twee plaatjes:

Afbeelding:Insert-image.jpg klik op dit figuur als je een plaatje of foto in je tekst wilt opnemen. In de tekst verschijnt {mosimage}. Je hebt nu de locatie van het plaatje bepaald, een stukje verder staat hoe je een foto daadwerkelijk toevoegt. Afbeelding:Insert-pagebreak.jpgklik op dit figuur als je tekst zo groot is dat je het over meerder pagina’s wilt verspreiden. In de tekst verschijnt {mospagebreak}. Dit betekent dat na deze markering een nieuwe pagina moet beginnen.

Onder het tweede tekstvak staan 3 tabbladen. In de paragrafen 2.2, 2.3 en 2.4 wordt elk tabblad uitgelegd.

De introductietekst is de eerste paragraaf van je artikel. Vergelijk het met het vetgedrukte deel van een krantenartikel. Het geeft kort en bondig weer waar het artikel over gaat. Deze introductietekst zie je meetal op de beginpagina van de website. Hier moet een tekst in komen te staan. Er zitten een paar knoppen bij om de tekst te kunnen verfraaien. Verderop worden de knoppen een voor een toegelicht.


Afbeelding:FEU4.jpg

Figuur 4: De menubalk van de teksteditor"


Onder de introductietekst staat nog een groot tekstvak, de hoofdtekst. Hier wordt de rest van het artikel geplaatst. Zodra dit tekstvak gevuld wordt verschijnt er op de voorpagina van de website automatisch de link "Lees verder…" onder de introductietekst.

In onderstaande tabel worden de knoppen uit Figuur 4 in het kort toegelicht.

Afbeelding:FEU013.jpg

Dit zijn universele icoontjes voor het printen, zoeken, knippen en plakken.

Afbeelding:FEU014.jpg

Mocht je tekst klaar hebben staan in Notepad of in MS-Word, gebruik dan deze knoppen. Voor de werking en meer uitleg zie paragraaf 3.1.

Afbeelding:FEU015.jpg

 

Afbeelding:FEU016.jpg

Met deze knoppen kun je een tabel invoegen, de tabel opmaken, rijen en kolommen invoegen of verwijderen en cellen samenvoegen of splitsen.

Afbeelding:FEU017.jpg

Met deze knop kun je een plaatje of foto toevoegen aan de tekst. Zie voor meer uitleg paragraaf 3.3

Afbeelding:FEU018.jpg

Met deze knop kun je een horizontale scheidingslijn toe te voegen in je tekst.

Afbeelding:FEU019.jpg

Met deze knoppen kun je een link toevoegen aan je tekst. Het aardbolletje voor links naar e-mail adressen, weblocaties, etc. Het PDF symbool kun je links maken naar documenten op onze site. Zie voor meer uitleg paragraaf 3.2

Afbeelding:FEU020.jpg

Hier kun je een afwijkend lettertype kiezen. Dus kies hier alleen een andere grootte als je wilt dat een stukje tekst moet opvallen en je wilt de lettergrootte aanpassen.

Afbeelding:FEU021.jpg

Dit zijn dezelfde opmaakmogelijkheden als je gewend bent in elke tekstverwerker: vet, schuin en onderstreept.

Afbeelding:FEU022.jpg

Met deze vier knoppen kun je de tekst uitlijnen (links, midden, rechts of uitgevuld).

Afbeelding:FEU023.jpg

Hiermee kun je een opsomminglijstje maken (genummerd en ongenummerd), de rechtse twee zijn bedoeld om op een tweede niveau te kunnen inspringen.


Onder het tekstvak staan nog drie keuze mogelijkheden:

Afbeelding:FEU024.jpg


Je zit standaard in de optie "Design", hier typ je tekst. De optie "html Code" is alleen handig als je verstand hebt van de programmeertaal HTML. Het komt zelden voor dat je hier iets wilt wijzigen. Met de optie Preview kun je zien hoe je artikel er uit komt te zien, dit is vooral handig als je plaatjes met {mosimage} hebt toegevoegd, je kunt hier zien of de tekst goed bij de plaatjes komt te staan.

Tabblad Afbeeldingen

In het vorige tabblad kon je met de knop Afbeelding:Insert-image.jpg een code invoegen . Met deze code wordt de plek aangeduid waar je een plaatje in je tekst wilt hebben. Op dit tabblad ga je daadwerkelijk het plaatje toevoegen.


Afbeelding:FEU5.jpg

"Figuur 5: Tabblad afbeeldingen"


In "Sub-map" kun je doorklikken naar een mapje waar we enkele foto’s en afbeeldingen hebben gesorteerd op onderwerp. Dit is gemakkelijker bij het zoeken naar specifieke foto´s of afbeeldingen.

Nu moeten we afbeeldingen kiezen die we bij het artikel willen tonen. Wat moet je doen:

  1. Kies een submap (in dit voorbeeld is de sub-map "Atletiek" gekozen);
  2. Kies in de linkerkolom een afbeelding;
  3. Klik op de naam van de afbeelding ((hier is a_startblok gekozen en deze wordt onderaan een verkleind weergegeven);
  4. Klik op Afbeelding:FEU027.jpg en de naam van de afbeelding verschijnt in de middelste kolom: inhoud afbeeldingen);
  5. Klik daarna in de middelste kolom op de naam van het plaatje. Hier kun je tevens de volgorde aangeven als je meerdere plaatjes in je tekst hebt opgenomen. Gebruik de knopjes Omhoog en Omlaag die onder de kolom staan weergegeven.;
  6. Klik vervolgens op de keuze van uitlijnen (geen, links, midden of rechts);
  7. Bij Caption kun je een bijschrift typen, dit is de tekst die onder het plaatje verschijnt;
  8. Klik op Toepassen.
Herhaal dit voor alle afbeeldingen dat je wilt toevoegen. (Voor elke afbeelding moet je op het vorige tabblad de code {mosimage} hebben aan gegeven via het knopje Afbeelding:Insert-image.jpg). Dus: wil je 4 plaatjes invoegen, dan moet je 4 keer op het knopje Afbeelding:Insert-image.jpg hebben geklikt en moet er 4 keer de code {mosimage} in je tekst staan.

Tabblad Publiceren

Ga naar het tabblad Publiceren. Hier kun je aangeven wanneer het artikel geplaatst moet worden en wanneer het weer mag verdwijnen.


Afbeelding:FEU6.jpg

"Figuur 6: Tabblad publiceren"


Staat: Dit is alleen zichtbaar voor hen die de autorisatie hebben om te mogen publiceren. Zij zijn aangeduid als 'publisher'. Hier kun je kiezen of het bericht gepubliceerd moet worden of niet. Standaard staat het op Ongepubliceerd.

Toegangsniveau: Hier wordt bedoeld wie het artikel mag lezen. Je kunt kiezen uit

  • Public: ieder bezoeker kan het lezen
  • Registered: alleen geregistreerde kunnen het lezen, dus zij die kunnen inloggen.
  • Special: niet van toepassing, dit is een optie voor een volgende versie van Joomla!.

Auteur alias: Hier kun je een naam van iemand anders neerzetten. Bijvoorbeeld Piet heeft je gevraagd om een artikeltje te plaatsen. Dan vul je hier Piet in. Als je hier niets invult dan verschijnt je eigen naam bij het artikel.

Gesorteerd: Deze optie heeft de webmaster geblokkeerd. Dit geld voor de hele site

Start publicatie: Hier geef je aan vanaf welke datum het artikeltje bericht getoond worden op de website. Klik je op het blokje met de drie puntjes dan verschijnt er een handige kalender zodat je eenvoudig de juiste datum kan uitpikken.

Einde publicatie : Hier geef je aan vanaf welke datum het artikeltje bericht niet meer getoond mag worden op de website. Klik je op het blokje met de drie puntjes dan verschijnt er een handige kalender zodat je eenvoudig de juiste datum kan uitpikken.

Toon op voorpagina: Als je dit hokje aanvinkt wordt het stukje Introductie tekst (zie uitleg hiervoor) op de beginpagina van de site getoond. Meestal wil je dit wel.

Tabblad Metadata


Afbeelding:FEU7.jpg

"Figuur 7: Tabblad metadata"


In dit deel kun je een omschrijving plaatsen van je artikel. Tevens kun je sleutelwoorden opnemen. Deze velden worden gebruikt door de zoek machine van Joomla zelf.

Opslaan, toepassen en annuleren

Je hebt nu de content ingevoerd en de drie tabbladen doorlopen en je artikel is gereed om opgeslagen te worden.


Afbeelding:opslaan.jpg Afbeelding:Toepassen.jpg Afbeelding:Annuleren.jpg

"Figuur 8: Opslaan, toepassen, annuleren"


Klik hiervoor op het plaatje met de floppy ("Opslaan"). Wil je het item opslaan maar nog niet de pagina verlaten`, kies dan de witte V in de blauwe cirkel. Mocht je iets verkeerd hebben gedaan, klik dan op het kruisje ("Annuleren"), de pagina wordt afgesloten en je hebt niets opgeslagen.

Nadat je op "Opslaan" hebt geklikt kom je terug op de voorpagina van de website. Er wordt automatisch een e-mail verstuurd naar de webredactie zodat zij weten dat er een artikel is ingezonden en dat er een nieuw artikel beoordeeld en gepubliceerd moet worden (in het geval je behoort tot de groep Publishers wordt het artikel meteen gepubliceerd). Afbeelding:Example.jpg

Bijzondere handelingen

Tekst kopiëren vanuit Notepad of MS-Word

Wil je een kort artikel schrijven dat volstaat het om direct op de site in te loggen en daar de tekst te typen. Heb je meerdere artikelen of wil je een lang artikel schrijven dan is het aan te bevelen om eerst je tekst klaar te maken (met bijv Notepad of MS-Word). Het kan ook zijn dat je teksten krijgt aangeleverd in een kaal tekst (*.txt) bestand of in MS- Word (*.doc) formaat.

Notepad: ga naar Notepad, markeer de tekst of CTRL-A (selecteer alle tekst), CTRL-C (kopie), en klik op het icoontje Afbeelding:FEU035.jpg: de tekst vanuit Notepad wordt in het tekstvak gekopieerd.

MS-Word: mocht je tekst vanuit MS-Word willen invoegen doe dan het volgende: selecteer de tekst in MS-Word, CTRL-C (copy) ga naar het tekstvak en klik op het klembord met het Word-icoontje Afbeelding:FEU036.jpg. Een apart schermpje zal verschijnen. Met CTRL-V plak je de tekst in dit schermpje, let erop dat “Remove styles” is aangevinkt (linksonder) en klik op de knop met de tekst “insert”.

Afbeelding:FEU9.jpg

Figuur 9: Tekst plakken vanuit MS-Word

Links maken

Selecteer eerst de tekst en doe dit met Shift en het pijltjestoets (selecteren met de muis blijkt niet goed te werken). Zie voorbeeld van geselecteerde tekst in Figuur 10.


Afbeelding:FEU10.jpg

Figuur 10: Geselecteerde tekst


Klik vervolgens op Afbeelding:FEU040.jpg en een volgend scherm verschijnt, zie Figuur 11. Aan de linkerkant kun je kiezen uit de volgende opties:

  • Place on this website (een pagina binnen de website), deze pagina kun je kiezen in het overzicht in het midden, klik vervolgens op OK;
  • Place in this document (een locatie in dit document);
  • E-mail address (een email adres);
  • Web locatie: een internet adres buiten de site.


Afbeelding:FEU11.jpg

Figuur 11: Invoegen van een link


Een tweede mogelijkheid van linken is gebruik te maken van de knop . Met deze optie kun je linken naar en document dat ergens op de site staat.

Afbeeldingen toevoegen

Je kunt op twee manieren afbeeldingen toevoegen. De eerste manier is al besproken met de optie: Afbeelding:Insert-image.jpg en de code {mosimage} die in de tekst wordt opgenomen. Vervolgens kun je via het tabblad Afbeeldingen de plaatjes uit een van de mapjes selecteren. Een tweede mogelijkheid is via de knop Afbeelding:FEU017.jpg. Na het klikken op deze knop verschijnt er het volgende scherm:


Afbeelding:FEU12.jpg

Figuur 12: Afbeelding invoegen


Kies aan de linkerkant het mapje waar de afbeelding zich in bevindt, kies vervolgens de afbeelding en klik op OK. Onderaan rechts staat nog de optie “Next” zie Figuur 12. Klik je hierop dan kom je in een nieuw scherm (zie Figuur 13). Hier kun je enkele kenmerken van de afbeelding wijzigen. Bijvoorbeeld de mogelijkheid om de afstand tussen de afbeelding en de tekst eromheen te vergroten of te verkleinen (“Distance to surrounding text”).


Afbeelding:FEU13.jpg

Figuur 13: Afbeelding opmaken


Nieuwe afbeelding toevoegen

Wil je een nieuwe afbeelding toevoegen aan een bestaand mapje dan moet je deze uploaden, zie rechtsboven in bij Figuur 12.


Afbeelding:FEU14.jpg

Figuur 14: Afbeelding uploaden


Het “uploaden” doe je in de volgende stappen:

  • Kies eerst het mapje waar je de foto wilt opbergen
  • Klik op “bladeren” en selecteer de afbeelding op je eigen PC
  • Klik op “Upload File” en de afbeelding wordt in het door jou gekozen mapje geplaatst

Vervolgens kun je via Afbeelding:Insert-image.jpg en het tabblad Afbeeldingen het plaatje in de tekst opnemen.

Je kunt alleen bestanden uploaden in de bestandsformaten JPG, GIF en PNG. Bovendien mogen ze niet groter zijn dan 80kb en qua afmetingen kleiner zijn dan 500 pixels breed en 500 pixels hoog. Gebruik je eigen favoriete tekenprogramma om de afbeeldingen aan deze eisen te laten voldoen. Wil het niet lukken vraag raad bij de webmaster.

Afkomstig van DutchJoomla - Wiki NL, de Vrije Encyclopedie. "http://wiki.dutchjoomla.org/index.php/Handleiding_frontend"