Revisies. Inhoudsopgave

Introductie Deze handleiding is geschreven op basis van Joomla! 1.5.23 en JCE 2.0.15. De handleiding is bedoeld voor de webredacteuren van de Bruse Boys website. De handleiding wordt in pdf-formaat beschikbaar gesteld. Veel plezier met deze handleiding. Foeke Roukema, [email protected]

Revisies Datum

Versie

Beschrijving

Auteur

sep-06

0.1

Eerste conceptversie

Foeke Roukema

sep-12

1.0

Gereviseerd naar Joomla 1.5, incl. administrator

Foeke Roukema, Mark Giljam

Joomleague toegevoegd

Inhoudsopgave Introductie ................................................................................................................................................ 2 Revisies ................................................................................................................................................... 2 Inhoudsopgave ........................................................................................................................................ 2 1

2

Inleiding ............................................................................................................................................ 4 1.1

Het Content Management Systeem Joomla .............................................................................. 4

1.2

Toegangsniveaus ..................................................................................................................... 4

1.2.1

Gebruikersgroepen voor de front-end .................................................................................... 4

1.2.2

Gebruikersgroepen voor de back-end ................................................................................... 5

1.3

Structuur van Joomla ................................................................................................................ 5

1.4

Inloggen op de back-end .......................................................................................................... 8

Een nieuw artikel plaatsen ................................................................................................................ 9 2.1

Hoe voeg je een artikel toe aan de website? ............................................................................. 9

2.2

Het maken van artikel ............................................................................................................. 10

2.2.1

Invoeren van tekst met de JCE Editor ................................................................................. 12

2.2.2

Een artikeltekst opsplitsen in een introductietekst en een hoofdtekst ................................... 16

2.3

Een afbeelding invoegen in een artikel .................................................................................... 16

2.3.1

Een afbeelding invoegen (plugin) ........................................................................................ 17

2.3.2

Een afbeelding invoegen (Image Manager) ......................................................................... 17

2.4

Publiceren van een artikel ....................................................................................................... 22

2.5

Een artikel opslaan ................................................................................................................. 23

3

4

5

Bijzondere handelingen ................................................................................................................... 24 3.1

Tekst kopiëren vanuit MsWord en andere toepassingen.......................................................... 24

3.2

Een hyperlink invoegen in een artikel ...................................................................................... 24

3.3

Foto’s in een fotogallerij zetten................................................................................................ 26

3.3.1

De bestanden verkleinen .................................................................................................... 26

3.3.2

Een fotoalbum aanmaken ................................................................................................... 26

3.3.3

Fotobestanden opladen ...................................................................................................... 27

3.3.4

Een foto of serie foto’s uit een album in een artikel plaatsen ................................................ 28

3.4

Weblinks maken ..................................................................................................................... 29

3.5

Een activiteit in de kalender plaatsen ...................................................................................... 29

Joomleague .................................................................................................................................... 29 4.1

De Joomleague database ....................................................................................................... 30

4.2

Een project selecteren ............................................................................................................ 30

4.3

Teams toevoegen aan je project ............................................................................................. 31

4.4

De speelronden aanmaken ..................................................................................................... 32

4.5

De wedstrijden aanmaken per speelronde .............................................................................. 33

4.6

Wedstrijduitslagen invoeren .................................................................................................... 35

8 Het plaatsen van een verslag in Joomleague............................ Fout! Bladwijzer niet gedefinieerd.

1 Inleiding 1.1 Het Content Management Systeem Joomla Joomla! is een Content Management Systeem. Dit systeem maakt het mogelijk dat mensen zonder kennis van HTML of andere programmeertalen een in paar eenvoudige stappen teksten op de website kunnen plaatsen. Content is een verzamelnaam voor “alles” wat je op een website kunt plaatsen. Denk aan tekst, foto´s, plaatjes, geluid, filmpje. Deze handleiding beperkt zich tot het maken van een content-item, ook wel aangeduid als (nieuws)artikel of bericht. Joomla kent een zogenaamde “front-end” en een “back-end”. De front-end is het gedeelte wat normale gebruikers benaderen en is te bereiken via de url www.bruseboys.nl.De back-end - ook wel de “administrator” genoemd - is een aparte omgeving waarmee je de site kunt vormgeven, beheren, enz. Die is te benaderen via www.bruseboys.nl/ja5/administrator. De back-end is alleen beschikbaar voor speciale gebruikers. Je moet op dat deel altijd inloggen. Zowel met de front-end als met de back-end kun je berichten op de site plaatsen. In deze handleiding wordt uitgelegd hoe je berichten via de back-end kan plaatsen. Het invoeren van artikelen via de front-end blijft buiten beschouwing, maar zal betrekkelijk eenvoudig zijn als je in staat bent om dat via de back-end te doen. In de back-end is het in principe eenvoudiger om artikelen te plaatsen, omdat je meer controle hebt over de artikelen en hoe ze op de site worden weergegeven. Echter, je hebt ook een heleboel mogelijkheden waardoor je in het begin overspoeld wordt met parameters en andere instelmogelijkheden. Zolang je echter een verschil kunt maken tussen de hoofd- en de bijzaken, zal het allemaal wel meevallen.

1.2 Toegangsniveaus Het Content Management Systeem (CMS) dat hier wordt toegelicht heet Joomla! Het is belangrijk dat je begrijpt dat dit systeem meerdere gebruikersgroepen en daarmee toegangsniveaus kent. Een toegangsniveau zegt simpelweg wie wat mag op de site.

1.2.1 Gebruikersgroepen voor de front-end Binnen de front-end van dit CMS zijn verschillende gebruikersgroepen gedefinieerd: •

Publiek

•

Geregistreerd

•

Auteur

•

Editor

•

Publisher

Iemand die niet is aangemeld als gebruiker, zit in de groep Publiek. Zo’n gebruiker kan alleen de webpagina’s bekijken die publiekelijk toegankelijk zijn. 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 (artikelen) op te stellen en in te zenden. Zij zijn tevens in staat om eigen berichten te wijzigen. Zij kunnen dus niet een artikel plaatsen (publiceren). Het artikel zal eerst door een Publisher worden gelezen die het vervolgens publiceert. Gebruikers in de groep Editor hebben toegang tot het inzenden en wijzigen van alle content, ook van anderen. Ook zij kunnen niet publiceren.

Gebruikers in de groep Publisher hebben de mogelijkheid om alle content in te zenden, te wijzigen en te publiceren. Publishers, Editors, Auteurs, publieke en geregistreerde gebruikers kunnen alleen in de front-end, maar hebben geen toegang tot de back-end.

1.2.2 Gebruikersgroepen voor de back-end In de back-end zijn de volgende groepen onderkend: •

Manager

•

Administrator

•

Super Administrator

Deze groepen kunnen functioneel onderhoud plegen op de site. Gebruikers in deze groepen kunnen alles wat een front-end gebruiker (een Publisher) ook kan, maar kunnen ook artikelen beheren via de back-end en nog veel meer. Zo kunnen zij bijvoorbeeld gebruikers toevoegen, wijzigen en verwijderen. Tevens voeren zij het beheer over de secties en categorieën. De Super Administrator bezit de gebruikersnaam “admin” en kan in principe alles. Een Administrator heeft wat minder bevoegdheden en een Manager nog iets minder. Op het exacte verschil tussen Manager, Administrator en Super Administrator wordt in deze handleiding niet verder ingegaan. Dat is op zich voor dit doel niet zo relevant.

1.3 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. Binnen een sectie zijn categorieën (“categories”). Bijvoorbeeld binnen de sectie De Club hebben we de categorieën “Secretariaat”, “Wedstrijdcommissie”, “Sponsorcommissie”, “Jeugdcommissie”, etc. Elk artikel – ook wel bericht, content of content-item genoemd – moet passen binnen een sectie en een categorie. Je kunt secties en categorieën het best vergelijken met hoofdstukken en paragrafen van een boek. Zie het geheel van berichten als het boek, de secties als hoofdstukken en de categorieën als paragrafen.

De hiërarchie van Joomla: > Sectie >> Categorie >>> Artikel

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. Noot: Vanaf Joomla versie 1.5 is het ook mogelijk om een bericht te plaatsen in de sectie en categorie “Ongecategoriseerd”. Het is aan te bevelen om deze sectie en categorie alleen te gebruiken wanneer een artikel in geen enkele andere past; mijd het gebruik zoveel mogelijk. In welke structuur je het artikel uiteindelijk terugziet op de site, wordt geregeld via de menustructuur die in de back-end is opgevoerd. Daar heb je als front-end user geen invloed op. Althans niet direct. Maar als back-end gebruiker kun je wel nieuwe menu-items opvoeren. Dit moet echter wel enigszins gecontroleerd gebeuren, om enige structuur voor de site te houden. Een menu-item is eigenlijk een view op één of meerdere artikelen. Wanneer dat meerdere artikelen tegelijk zijn, moeten die artikelen zich in dezelfde sectie of categorie bevinden. Veel van de artikelen zul je overigens via verschillende paden (menu-items) op de site kunnen terugvinden.

In de onderstaande lijst staat welke secties en categorieën er momenteel zijn. Sectie

Categorie

Beschrijving

Bruse Boys 1

Nieuws

Van elk seniorenteam is er een sectie. De categorieën spreken grotendeels voor zich.

Wedstrijdverslagen Bruse Boys 2

Nieuws

•

Nieuws: plaats in deze categorie nieuwsberichten die specifiek betrekking hebben op het betreffende team. Bijvoorbeeld: aankondigingen, voorbeschouwingen van wedstrijden, enz.

•

Wedstrijdverslagen: plaats hierin de wedstrijdverslagen die betrekking hebben op het team.

Wedstrijdverslagen Bruse Boys 3

Nieuws Wedstrijdverslagen

Bruse Boys 4


Bruse Boys Da

Bruse Boys A


Noot: Wedstrijdverslagen kunnen ook in Joomleague worden opgevoerd. Joomleague bevat alle gegevens rondom competities, uitslagen, teams, spelers, enz.

Nieuws

De jeugdteams zijn onderverdeeld naar A t/m F. Binnen elk van de secties zijn er 2 categorieën opgevoerd.

Wedstrijdverslagen Bruse Boys B


Bruse Boys C


Bruse Boys D


Bruse Boys E


Bruse Boys F


Over de Club

Actueel Wedstrijdnieuws Clubgegevens Secretariaat en ledenadministratie Sponsorcommissie Jeugdcommissie D’Ouwe Dôôze

“Over de club” bevat allerlei algemene informatie over de club. In elk geval valt hieronder informatie over de organisatie met name van of over het bestuur, commissies, enz. De categorie “Actueel” bevat nieuwsberichten die door het bestuur zijn uitgegeven. Dat kunnen bijvoorbeeld bestuursbesluiten zijn, aankondigingen van ledenvergaderingen, informatie voor de leden, enz. Wedstrijdnieuws bevat gegevens uitgegeven door het wedstrijdsecretariaat. Clubgegevens bevat algemene gegevens over de club zoals bijv. de historie, aantal

teams, bestuurssamenstelling, enz. met name gegevens die langere tijd gelden. Jeugdcommissie bevat artikelen van de verschillende bestuursonderdelen. Indien nodig kunnen we daar ook van de andere bestuursonderdelen een categorie voor toevoegen. Berichten van de sponsorcommissie worden in een aparte sectie Sponsoring geplaatst. D’Ouwe Dôôze is een speciale rubriek over de sportieve historie van de club met voornamelijk krantenberichten. Club van 100

Algemeen

Er is voorlopig één categorie voor de Club van 100 aangemaakt: Algemeen. De Club van 100 is een aparte stichting met een eigen bestuur en is om die reden in een aparte sectie opgenomen.

Evenementen

Nieuws

Plaats hier nieuws over evenementen. Evenementen zijn bijvoorbeeld penaltybokaal, toernooien, klaverjasmiddag, e.a. Noot: Aan te kondigen evenementen kunnen het beste in de JEvents component worden geplaatst.

Actueel

Laatste nieuws Voetbalnieuws Van de webredactie Topscorers Opstellingen

In deze sectie worden allerlei actuele, nietteamspecifieke nieuwsberichten geplaatst. Laatste nieuws bevat het laatste nieuws over de club, andere clubs, berichten uit de krant, enz. In Voetbalnieuws komen soortgelijke berichten als in Laatste nieuws, alleen gaat het dan specifiek over voetbal en -wedstrijden. Bijvoorbeeld informatie van de KNVB. Berichten van de webredactie over de website worden in de categorie Van de webredactie gezet. Topscorers spreekt voor zich. Opstellingen is een categorie die alleen door geregistreerde gebruikers kan worden geraadpleegd.

Nieuwsflashes

Zoom

Berichten die in een kadertje aan de linkerkant of rechterkant op de homepage worden geplaatst. Wanneer er meerdere gepubliceerde berichten zijn in deze categorie, dan worden er willekeurig één gekozen die wordt weergegeven. Heel goed mogelijk dat we dat later nog uitbreiden met meerdere nieuwsflashcategorieën op de site, bijvoorbeeld voor het weergeven van recente uitslagen of het

programma voor aanstaande zaterdag. Noot: de module met wisselende artikelen wordt momenteel niet meer gebruikt. Sponsoring

Algemeen Nieuws

Sponsoring bevat berichten van de sponsorcommissie. De categorie Algemeen bevat gegevens over de sponsorcommissie, manieren van sponsoring en andere algemene sponsoring info. Nieuws bevat vluchtige nieuwsberichten over de sponsoring.

Nieuwbouw

Nieuws Eyecatcher Overig

De sectie Nieuwbouw is speciaal opgezet ten behoeve van het nieuwe sportcomplex. De nieuwsberichten over de nieuwbouw worden in de categorie Nieuws geplaatst. In Eyecatcher worden speciale artikelen geplaatst, bedoeld om op een opvallende manier met een afbeelding op de Homepagina te plaatsen. Overig bevat artikelen die niet in een van bovenstaande categorieën kunnen worden geplaatst.

Opmerkingen: 1. Let erop dat berichten in de “Nieuws”-categorieën vluchtig zijn, ze zijn maar gedurende een bepaalde tijd relevant of zijn beperkte tijd geldig. Is het een artikel dat voor langere tijd beschikbaar moet zijn, of in het uitklapmenu een ‘vaste plaats’ verdient, dan kun je het het best in een andere categorie opnemen. Je kunt ook een nieuwsbericht maken waarin je een ‘langere tijd geldend‘ artikel aankondigt en daarnaar verwijst. Bijvoorbeeld een nieuwsartikel dat gaat over een bestuurswijziging, die dan weer verwijst naar de (nieuwe) bestuurssamenstelling. 2. Secties en categorieën worden aangemaakt via de back-end, en kunnen derhalve alleen worden opgevoerd door iemand die toegang heeft tot die back-end. 3. Het is goed mogelijk dat de categorie-indeling in de komende periode wordt gewijzigd. De lijst zal zeker nog worden uitgebreid in de loop van de tijd. Naarmate de artikelen toenemen, zullen ook de inzichten groeien. 4. Plaats artikelen altijd in een benoemde categorie en volg zo mogelijk de richtlijnen van sectie/categorieindeling zoals hiervoor is aangegeven. Het bevordert de leesbaarheid van de site en het terugvinden van items. Joomla 1.5 biedt de mogelijkheid om de sectie en categorie Ongecategoriseerd te gebruiken, maar gebruik dit liefst niet.

1.4 Inloggen op de back-end Je kunt inloggen op de back-end via de volgende link (url): >

www.bruseboys.nl/ja5/administrator

Je hebt hiervoor een gebruikersnaam en wachtwoord nodig. Een administrator moet je deze gegevens hebben verstrekt.

Noot: De ene browser is de andere niet. Je hebt verschillende browsers – zoals Internet Explorer, Firefox en Chrome – waarmee je de front-end en back-end kunt benaderen. Het zal je opvallen, dat niet elke browser precies hetzelfde reageert. Sommige functies en opties kunnen nèt iets anders werken in de ene dan in de andere browser. Ook kan de webpagina er anders uitzien. Denk er ook aan dat de site op verschillende apparaten kan worden opgeroepen, zoals pc’s, smartphones en tablets.

2 Een nieuw artikel plaatsen 2.1 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. 1. Eerst inloggen op de back-end (www.bruseboys.nl/ja5/administrator), een account kun je aanvragen bij de webmaster. 2. Nadat je bent ingelogd verschijnt de home page (het controlepaneel) van de Joomlaadministrator.

Vanuit het controlepaneel kun je een aantal veel gebruikte beheertaken opstarten, bijvoorbeeld een nieuw artikel toevoegen. Ook zie je informatie over het gebruik van de site, bijvoorbeeld wie er op dat moment is ingelogd, wat de meest populaire artikelen zijn enz. Vanuit het menu kun je allerlei beheertaken opstarten. Opmerking: Afhankelijk van je toegangsrechten kunnen er bepaalde iconen en menu-items al dan niet zichtbaar zijn. Alleen de Superadministrator heeft alle mogelijkheden beschikbaar. 3. Klik in het controlepaneel op Nieuw artikel toevoegen.

2.2 Het maken van artikel Voor het maken van een nieuw artikel klik je op Nieuw artikel toevoegen in het controlepaneel van de Administrator (back-end). Je kunt ook eerst naar Artikelbeheer gaan. In Artikelbeheer krijg je een lijst van alle bestaande artikelen te zien. Je kunt deze bewerken, publiceren, archiveren, verwijderen of een nieuw artikel toevoegen. Deze keuze vind je zowel in het controlepaneel als in het menu via Artikelen | Artikelbeheer. Zie schermen hiernaast en hieronder. Welke berichten je allemaal kunt zien/bewerken hangt af van de rechten die je hebt toegekend gekregen. Een gebruiker in de back-end kan altijd alle artikelen zien of bewerken (daar zitten geen beperkingen op).

Noot: In het Artikelbeheer scherm krijg je een overzicht van alle artikelen die op de website staan. Dat kunnen er heel veel zijn. Om een bestaand artikel te zoeken zijn er verschillende filter-, zoeken sorteermogelijkheden. Een handige optie is wel om 1 keer te klikken op de Datum kolomkop. De artikelen worden dan gesorteerd op datum, waarbij het laatst toegevoegde artikel bovenaan komt te staan. Via de keuze Nieuw artikel toevoegen (vanuit controlepaneel) of de knop Nieuw (in het Artikelbeheer scherm) kun je een nieuw bericht plaatsen.

Figuur 1 Een artikel invoeren Bovenin dit scherm plaats je de titel van het bericht en kies je in welke sectie en categorie je het artikel kwijt wilt. Je kunt kiezen uit de categorieën die voor die sectie zijn opgevoerd. De rubriek Alias hoef je niet in te vullen (dat gebeurt automatisch na opslaan van het bericht).

Opmerking: Staat een benodigde sectie of categorie er niet bij, dan zou jij deze kunnen toevoegen via Sectiebeheer of Categoriebeheer in het menu Artikelen. Via de rubriek Gepubliceerd kun je aangeven of een artikel al dan niet gepubliceerd moet zijn. Een nietgepubliceerd artikel is niet zichtbaar/opvraagbaar via de front-end. Dit is handig als je een artikel hebt

getypt wat nog niet af is of als een artikel niet meer relevant is. Front-end gebruikers (Auteurs en Editors) hebben zelf niet de mogelijkheid om een artikel te publiceren.

Opmerking: er is ook een optie om een start- en einddatum te geven voor publiceren. Zie daarvoor de Parameters (artikel) aan de rechterkant van het scherm. Daarmee wordt een artikel pas zichtbaar op een bepaalde datum/tijdstip en/of eindigt de publicatie automatisch na een bepaald tijdstip. De keuze Voorpagina geeft aan of een artikel al dan niet moet worden weergegeven op de homepage van de website. Vooral nieuwsitems zul je vaak op de voorpagina willen weergeven, zodat ze direct opvallen als een gebruiker de website bezoekt.

Opmerking: Een nieuw artikel wordt automatisch als bovenste item op de voorpagina geplaatst. Wil je de volgorde van de artikelen op de voorpagina beïnvloeden, ga dan naar het menu Artikelen | Voorpaginabeheer. Via de rubriek Volgorde kun je daar de volgorde wijzigen. Onder de sectie- en categorieënlijst staat een groot tekstvak met een verzameling knoppen daarboven. Dit is een html editor. Je kunt hierin je tekst van het bericht intypen. Je kunt er ook afbeeldingen, hyperlinks, enz. in plaatsen. Hoe dat gaat, lees je in de volgende paragraaf.

2.2.1 Invoeren van tekst met de JCE Editor Met de JCE WYSIWYG (What You See Is What You Get) Editor kun je op een eenvoudige manier html tekst aanmaken. JCE is weer gebaseerd op de populaire TinyMCE Editor, een van de bekendste browsergebaseerde editors. Een editor is een stukje software waarmee je tekst kunt verwerken, net zoals in Word bijvoorbeeld. Html is het formaat met welke de meeste websites grotendeels zijn opgebouwd. Een beetje kennis van html is wel makkelijk (maar niet noodzakelijk), hoewel deze Joomla Content Editor het grootste deel van het werk voor je doet. Hij is eenvoudig in gebruik, het lijkt bijna of je een Word document aan het typen bent (maar het is geen Word). De JCE Editor bestaat uit een tekstvak met een werkbalk. Op die werkbalk staan de icoontjes, die je wellicht herkent van MsWord. Achter elk icoon gaat een tekstverwerkingsopdracht schuil. Wat elk knopje/icoontje voorstelt, wordt in onderstaand overzicht toegelicht.

Opmerking: De icoontjes kunnen in een wat andere volgorde staan op je scherm. Ook kunnen er meer of minder iconen staan dan in bovenstaande afbeelding weergegeven. Icon

Betekenis

Opmerkingen

Nieuw document maken, of te wel het tekstvak leeg maken Vet, Cursief, Onderstreept Het opmaakprofiel instellen

Liever niet (te veel) gebruiken, gebruik bij voorkeur het standaard opmaakprofiel

Lettertype instellen

Liever niet (te veel) gebruiken, gebruik bij voorkeur het standaard lettertype

Icon

Betekenis

Opmerkingen

Lettergrootte instellen

Liever niet (te veel) gebruiken, gebruik bij voorkeur de standaard lettergrootte

Doorhalen Links uitlijnen, centreren, rechts uitlijnen, uitvullen

Liever niet gebruiken, gebruik bij voorkeur de standaard uitlijning

Een html-element toepassen op een geselecteerd stuk tekst

Speciale html elementen als h1, h2, pre enz.

De html code bekijken of aanpassen

Dit is handig, als je iets van html kent!

Online Help over de editor Plakken (vanuit Word)

Plakken van opgemaakte tekst vanuit Word

Plakken (als tekst)

Plakken van opgemaakte tekst

Zoeken Zoeken en vervangen Tekstkleur (voorgrond) instellen Achtergrondkleur instellen e

Een hyperlink invoegen (het 2 icoon heeft wat extra handige functies)

Lees verder in par. 3.2

Een hyperlink verwijderen Inspringing verkleinen, Inspringing vergroten Ongedaan maken (Ctrl+Z) en Herhalen (Ctrl+Y) Ongeordende lijst, genummerde lijst Kopiëren, knippen Plakken Alles selecteren (Ctrl+A) Een anker of bladwijzer invoegen (een benoemd punt in een document om direct naartoe te kunnen springen) De (verborgen) code opruimen (niet de tekst) Spellingscontrole (in de geselecteerde taal) Opdrachten voor het invoegen van nieuwe tekenlagen of het selecteren daarvan

Normaal plakken

Icon

Betekenis

Opmerkingen

Een vaste spatie invoegen (een vaste spatie wordt net zo behandeld als een normaal karakter, houdt 2 woorden bij elkaar, verspringt niet naar een andere regel) Weergeven van speciale tekens (zoals vaste spaties) Tekst van links naar rechts, tekst van rechts naar links Een emoticon invoegen De editor in volledig scherm modus weergeven Een afdrukvoorbeeld bekijken Een tabel invoegen

Tabellen worden veelvuldig gebruikt binnen html. Vooral om bepaalde elementen te positioneren. Meestal zijn tabellen onzichtbaar (zonder randen).

Tabelrij eigenschappen instellen Tabelcel eigenschappen instellen Een rij invoegen voor de huidige Een rij invoegen na de huidige Een kolom invoegen voor de huidige Een kolom invoegen na de huidige De huidige rij of kolom verwijderen Cel(len) splitsen, Cellen samenvoegen Tabelkaders (hulplijnen) weergeven/verbergen De tekst afdrukken Horizontale lijn trekken Superscript, subscript Symbool (speciaal teken) invoegen De opmaak van de geselecteerde tekst afhalen

Dit is handig om ongewenste opmaak van gekopieerde tekst te verwijderen

Een afbeelding invoegen

Lees verder in paragraaf 2.3.2Fout! Verwijzingsbron niet gevonden.

Icon

Betekenis

Opmerkingen

Een link naar een bestand invoegen

Een link naar bijvoorbeeld een PowerPoint presentatie of een ander bestand

Een Flash animatie, Quicktime filmpje of Windows media bestand invoegen

Bijvoorbeeld voor animaties, filmpjes, geluidsfragmenten

Een scheiding aanbrengen tussen introductietekst en hoofdtekst (lees verder)

Zie par. 2.2.2

Een artikel indelen in meerdere pagina’s. Hiermee voeg je een scheiding tussen 2 pagina’s. De opmaak toepassen met een css-style

Voor gevorderden met kennis van cascading style sheets (css)

Citaat, afkorting of letterwoord invoegen Verwijdering of invoeging van tekst weergeven Objecteigenschappen invoegen of bewerken Een i-frame invoegen

Een i-frame is een andere webpagina die je binnenin de pagina kunt plaatsen

Opmerking: In Firefox krijg je met de rechtermuisknop in het tekstvak een contextmenu. Bij Internet Explorer krijg je die niet. Zo’n contextmenu is wel handig! Onder het tekstvak staat nog een werkbalk met knoppen (zgn. mambots). Dit zijn speciale opdrachten die ervoor zorgen dat er bepaalde (onzichtbare) code in de tekst wordt ingevoegd, die door Joomla vertaald wordt zodat er bijvoorbeeld een afbeelding of foto-album op de plaats van die code is ingevoegd. De volgende knoppen staan op die werkbalk:

De knoppen hebben de volgende betekenis: Icon

Betekenis

Opmerkingen

Een afbeelding invoegen tussen de tekst

Je kunt ook - of beter de knop op de werkbalk gebruiken hiervoor. Deze biedt meer functionaliteit (zoals het weergeven van een popup scherm)

Een artikel indelen in meerdere pagina’s. Hiermee voeg je een scheiding tussen 2 pagina’s op de plaats waar de cursor staat.

Je kunt één artikel opknippen in meerdere pagina’s. Dat is handig als een artikel erg groot

Icon

Betekenis

Opmerkingen

is. Er wordt dan in het artikel automatisch een inhoudsopgave gegenereerd. Een scheiding aanbrengen tussen introductietekst en hoofdtekst (lees verder) op de plaats waar de cursor staat

Zie par. 2.2.2

Een afbeelding uit de fotogallerij invoegen

Zie par. 3.3.4

Met Jcomments ON/OFF kun je bepalen of er al dan niet een knop onder het artikel komt te staan, zodat gebruikers op het artikel kunnen reageren. Bij de meeste nieuwsrubrieken staat dit al standaard aan. Wil je dit expliciet voor dit artikel aan-/uitzetten, dan kun met deze knoppen regelen. JComments is het component waarmee we reacties op artikelen kunnen beheren.

2.2.2 Een artikeltekst opsplitsen in een introductietekst en een hoofdtekst Een artikel wordt vaak opgedeeld in 2 stukken: een introtekst en een hoofdtekst. De introductietekst wordt dan weergegeven op de voorpagina (of een andere nieuwsblog) met daarachter een “Lees meer”-knop. Dit deel wordt zichtbaar als de bezoeker na het lezen van je introductietekst het artikel interessant genoeg vindt en op “Lees meer” klikt. Je kunt de artikeltekst scheiden met de “Lees meer…” opdracht, die onder het tekstinvoerveld staat. Voordat je op die knop drukt, moet je de cursor op de plek in de tekst zetten waar je de scheiding wilt laten plaatsvinden. Er wordt een horizontale lijn weergegeven nadat de scheiding is gemaakt. Je kunt maar één “Lees meer…”- scheiding in een artikel aanbrengen. Wil je de plaats ervan veranderen, dan moet je de bestaande scheiding eerst weghalen (via Del of Backspace) en daarna een nieuwe invoegen.

Let op: Maak voor grotere artikelen – en zeker nieuwsberichten – altijd een introductietekst aan. Doe je dat niet, dan krijg je een heel rommelige voorpagina of nieuwsoverzicht.

2.3 Een afbeelding invoegen in een artikel Foto´s en plaatjes maken de website levendig. Mensen klikken veel sneller op een bepaald artikel, wanneer er een afbeelding te zien is. Een afbeelding doet het dus altijd goed. Je kunt overal in de tekst een afbeelding plaatsen. Afbeeldingen zijn foto’s, plaatjes, enz. in jpg, png, gif of bmp formaat. Om de aandacht te trekken op de homepage, is het verstandig om een klein fotootje of plaatje - een thumbnail (een verkleind plaatje ter grootte van een ‘duimnagel’ – in de introtekst te plakken.

Let op: plaats geen grote afbeeldingen in de introtekst, maar gebruik daar alleen thumbnails. Grote afbeeldingen worden niet goed weergegeven op de voorpagina of in een nieuwsoverzicht (blog). Eventueel kun je wel een popup koppelen aan een thumbnail. Hoe je dat doet, lees je in par.2.3.2.3. Let er wel op dat je niet teveel foto’s plaatst in een bericht. Kies de beste foto’s uit en neem die op in het bericht. Een richtlijn is 3 tot 4 afbeeldingen. Veel foto’s maken het bericht onoverzichtelijk en meestal voegen de extra foto’s of plaatjes niet zoveel meer toe.

Anders is het wanneer je foto’s van een evenement of speciale gebeurtenis wilt plaatsen. Wil je veel foto’s plaatsen, maak dan gebruik van de fotogalerij. Zie paragraaf 3.3. Je kunt op twee manieren afbeeldingen toevoegen: 1. Via de knop Afbeelding (plugin) onder de JCE Editor. 2. Via de knop Afbeelding invoegen via de Image Manager in de werkbalk van de JCE Editor. Bij de tweede manier heb je meer opties. Beide manieren worden in de volgende paragraaf toegelicht.

2.3.1 Een afbeelding invoegen (plugin) Met de knop “Afbeelding” kun je een afbeelding in de tekst neerzetten op de plaats waar de cursor op dat moment staat in het tekstbericht. Er verschijnt een venster waarin je een afbeelding kunt selecteren. Je ziet een aantal mappen waarin al een aantal afbeeldingen staan. Het zijn de mappen zoals die op de webserver staan. Klik je op een map, dan wordt die geopend. Heb je een geschikt plaatje gevonden, dan klik je op de knop Invoegen. Voordat je dat doet, kun je nog een aantal instellingen meegeven, zoals de uitlijning, een titel en een beschrijving. De uitlijning bepaalt aan welke kant (links, rechts) het plaatje in de tekst verschijnt. Nadat het plaatje in de tekst is opgenomen, kun je de afmetingen ervan wijzigen door de hoeken van het plaatje te verslepen. Je kunt ook het gehele plaatje verslepen naar een andere plaats in de tekst. Het zal vaak voorkomen dat de afbeelding die je wilt invoegen, nog niet op de server (computer) van de website staat. Dan moet je het bestand eerst opladen. Dit kan eenvoudig door op de knop Bladeren… te klikken. Vervolgens kun je een afbeelding selecteren op je computer. Na selectie druk je op de knop Start upload en dan wordt het bestand naar de webserver gestuurd. Het bestand wordt geplaatst in de map die op dat moment actief was.

Let op: Afbeeldingen worden in deze functie niet automatisch verkleind. Laad dus niet te grote bestanden op. Probeer geen bestanden groter dan 1Mb op te laden. Eventueel verklein je eerst de bestanden (zie par. 3.3.1). Op deze manier kun je redelijk eenvoudig een plaatje of foto invoegen. Wil je gebruik maken van meer geavanceerdere functies, zoals popup vensters, gebruik dan de Image Manager die staat uitgelegd in de volgende paragraaf.

Let op: Maak de afbeeldingen die je direct in een tekst plakt, niet te breed. De maximale breedte is 600 pixels. Is de breedte groter, dan kan er stuk van de foto wegvallen, of erger, er andere modules niet meer goed weergegeven worden. Controleer altijd het bericht hierop.

2.3.2 Een afbeelding invoegen (Image Manager) Na het drukken op die knop (

), verschijnt de Image Manager. Zie onderstaande figuur.

Met de Image manager kun je o.a.: -

een afbeelding selecteren;

-

een afbeelding opladen;

-

een afbeelding opmaken.

2.3.2.1 Een afbeelding selecteren Links onderin de Image Manager zie je de folders die op de server beschikbaar zijn en waarin afbeeldingen kunnen staan. Er is reeds een indeling gemaakt van folders. Voor de meeste secties of belangrijke categorieën is er een folder aangemaakt, bijvoorbeeld “bb1”, “bb2”, “bestuur”. Er is ook een folder “misc” (van miscellaneous, van alles wat dus). Klik op een folder om ‘m te openen. In de folders staan subfolders of bestanden met afbeeldingen. Als je klikt op een afbeelding, zie je ‘m rechtsonder verschijnen. Met de knop “Insert” voeg je de afbeelding in tussen de tekst. De afbeelding wordt dan ingevoegd op de plaats waar de cursor stond voordat je de Image Manager opriep. Je kunt de weergave of plaatsing van de afbeelding nog wijzigen voordat je ‘m invoegt, met behulp van de instellingen op de andere tabbladen die je bovenin de Image Manager vindt. Zie daarvoor ook paragraaf 2.3.2.3.

2.3.2.2 Een afbeelding opladen Veelal zul je een afbeelding eerst moeten opladen in een folder op de server. Om een afbeelding op te laden selecteer je eerst de folder waarin het op te laden bestand terecht moet komen. Zet bij elkaar horende afbeeldingen bij voorkeur in dezelfde map. Zo zijn ze later gemakkelijk terug te vinden. Je kunt een nieuwe map op de webserver aanmaken met de knop Wanneer je een map hebt geselecteerd, klik je op de knop

(New Folder).

(Upload) in het Image Manager scherm.

Er verschijnt een subscherm. Druk op de knop “Add” om een bestand op jouw pc te selecteren. Je kunt meerdere bestanden tegelijk selecteren door deze in de wachtrij te plaatsen en vervolgens in één keer op te laden.

Nadat je het bestand hebt geselecteerd, kun je nog een aantal bewerkingen op het fotobestand uitvoeren. Met de knop (Transform) kun je de foto verkleinen of draaien. Als je een foto oplaadt die een of meerdere Mb’s groot is, maak ‘m dan altijd kleiner. Je kunt de breedte, hoogte en de kwaliteit invoeren. Voor een foto is een breedte van 600 pixels en kwaliteit van ongeveer 80% aanbevolen.

Opmerking: Laad nooit foto’s op in het oorspronkelijk formaat wanneer die enkele Mb’s groot zijn! Dat maakt het downloaden erg traag, en legt teveel beslag op de diskruimte die we ter beschikking hebben. Bovendien zie je het verschil toch niet op je scherm tussen de oorspronkelijke foto en een verkleinde foto. Een gemiddelde foto voor het web is zo rond 100-200 Kb groot. Je kunt ook (tegelijk) een thumbnail maken, middels de knop . Dat is een sterk verkleind fotootje van meestal niet meer dan 150 pixels hoog of breed. Dat is handig om bijvoorbeeld in de introtekst te plaatsen en eventueel een popup daaraan te koppelen. Een thumbnail wordt geplaatst in de subdirectory “thumbnails” . Mocht die map nog niet bestaan, dan wordt die automatisch aangemaakt.

Noot: Thumbnails worden bij opladen op de server automatisch aangemaakt. Ze worden geplaatst in de directory “thumbnails” en hebben dezelfde naam al het originele bestand, maar dan met “thumb_” ervoor.

2.3.2.3 Een afbeelding opmaken Op het tabblad “Appearance” van de Image Manager kun je de plaatsing van het artikel in de tekst regelen. Je kunt daar bijvoorbeeld de grootte van de afbeelding opgeven, de plaats in de tekst waar de figuur moet komen, enz. Zie onderstaand scherm.

Figuur 2 Een afbeelding opmaken Uitlijning: Bepaal waar de afbeelding in de tekst komt (links, rechts, gecentreerd, enz.) Dimensies: Geef de afmetingen op: breedte x hoogte. Proportioneel verkleinen/vergroten (gelijke verhoudingen) heeft de voorkeur. VSpace/HSpace: Geeft de afstand tussen afbeelding en tekst aan in pixels. Border: Als je een rand wil plaatsen om de afbeelding, geef je hier een getal op groter dan 0. Hoe hoger het getal, hoe dikker de rand. Style: Geef een css-style op (voor gevorderden die cascading stylesheets kennen). Class: Selecteer een css-class (een voorgedefinieerd opmaakprofiel).

Popup Wil je een popup maken, dan kun je dat instellen op het tabblad ‘Popup’. Een popup is een vergroting weergeven in een ‘oppoppend’ schermpje. Zie onderstaand voorbeeld.

Het loepje rechtsonderin de foto geeft aan dat de foto kan worden uitvergroot in een popupvenster.

Voor een popup heb je eerst een thumbnail nodig. Dat is dus een verkleining van de foto, die je aanmaakt met de knop

(zie vorige paragraaf).

Creëer de popup als volgt: 1. Ga naar tabblad ‘Popup’. 2. Kies bij Popup Type voor “JCE Mediabox Popups”. 3. Selecteer de foto die wilt laten ‘oppoppen’. 4. Als je een thumbnail van de foto hebt, wordt de vraag gesteld “Use associated thumbnail”? Kies Yes. Op het tabblad “Afbeelding” wordt bij URL de locatie geplaatst waar de thumbnail staat. 5. Voeg eventueel een titel en/of korte omschrijving (Caption) toe. 6. Klik op Invoegen.

Rollover Met een rollover kun je bij het bewegen over een foto een andere foto weergeven. De foto verandert dus wanneer je de muis op het plaatje hebt staan. Dit geeft soms een aardig interactief effect.

Creëer een rollover als volgt: 1. Ga naar tabblad ‘Afbeelding’ (Image). 2. Selecteer de foto die je wilt weergeven wanneer de muis niet over het plaatje gaat. 3. Ga naar tabblad ‘Rollover’. 4. Selecteer bij Mouseover de foto die je wilt weergeven wanneer de muis over het plaatje gaat. 5. Selecteer bij Mouseout de foto die je wilt weergeven wanneer de muis het plaatje verlaat. 6. Klik op Invoegen. Voor het mooiste effect, moeten beide foto’s dezelfde verhouding van afmetingen hebben.

Opmerking: Om de instellingen van een eenmaal ingevoegde afbeelding later te wijzigen selecteer je eerst de afbeelding (je ziet de selectievierkantjes om de afbeelding verschijnen). Daarna klik je op de Image Manager

.

2.4 Publiceren van een artikel Publiceren Een gepubliceerd artikel is opvraagbaar op de website. Is een artikel niet gepubliceerd dan is deze niet opvraagbaar via de front-end. Standaard staat Gepubliceerd bij een nieuw artikel op Ja.

Bij Voorpagina kun je aangeven of de introductietekst (zie uitleg hiervoor) op de beginpagina van de site getoond moet worden. Standaard staat deze op Nee bij een nieuw artikel.

Publiceren gedurende een bepaalde tijd Je kunt ervoor kiezen om artikel pas te publiceren na een bepaalde datum of tijdstip, of om een publicatie te eindigen na een bepaalde datum of tijdstip. Dit is handig wanneer je een artikel nog niet bekend wilt maken of het niet meer relevant is na een bepaalde datum. Ga naar de Parameters van het artikel aan de rechterkant van het scherm door het venstertje uit te klappen.

Bij Start publiceren en Stop publicatie kun je de begin- resp. einddatum invoeren. In hetzelfde venster kun je de o.a.: -

de auteur wijzigen (als je daar rechten voor hebt)

-

een alias (andere naam) opgeven voor de auteur; leuk als je anoniem wilt blijven.

-

Het toegangsniveau wijzigen. o

Bij het toegangsniveau Publiek is het artikel voor iedereen zichtbaar;

o

Bij het toegangsniveau Geregistreerd is het artikel alleen voor geregistreerde gebruikers zichtbaar;

o

Bij het toegangsniveau Speciaal is het artikel alleen zichtbaar voor geregistreerde gebruikers met tenminste auteursrechten (zie par. 1.2.1);

Geavanceerde instellingen voor het artikel kun je instellen via het venster Parameters (Geavanceerd). Deze spreken grotendeels voor zich en worden in deze handleiding niet verder behandeld.

2.5 Een artikel opslaan Je hebt nu de content ingevoerd en je artikel is gereed om opgeslagen te worden. Klik hiervoor op het plaatje met de floppy (“Opslaan”). Wil je het item opslaan maar nog niet de pagina verlaten kies dan de groene V (“Toepassen”). Mocht je iets verkeerd hebben gedaan klik dan op het kruisje (“Annuleren”), de pagina wordt afgesloten en je slaat niets op. Nadat je op “Opslaan” hebt geklikt kom je terug in het Artikelbeheer scherm. Zeer belangrijke opmerkingen: 1. Sla een artikel regelmatig op gedurende het typen van de tekst van je bericht. Sla een artikel regelmatig tussentijds op met de knop Toepassen. Doe je dat niet, dan loop je het risico dat je werk voor niets is geweest. Na 45 minuten inactiviteit verliest de browser namelijk het contact met de webserver (sessie-timeout). Is je sessie verlopen en heb je je bericht nog niet opgeslagen, dan ben je je ingetypte gegevens kwijt (!). Je bent gewaarschuwd.

2. Verlaat een artikel altijd via één van de bovenstaande knoppen (opslaan of annuleren). Bij het openen/bewerken van een artikel wordt dat artikel gelockt. Dat wil zeggen dat op het moment dat jij dat artikel bewerkt, iemand anders tegelijkertijd geen wijzigingen aan het artikel kan aanbrengen. Dat zou je immers niet willen. Er komt dan een slotje te staan op het artikel (een ander ziet een slotje voor het artikel). Sluit dus niet het artikel door je browser-venster te sluiten of de Vorige (back) -knop in je browser. Dit houdt een lock op het artikel en kun je er weer afhalen door het artikel opnieuw te openen. Een ander kan er in de tussentijd niet bij (met uitzondering van de webmaster).

3 Bijzondere handelingen In dit hoofdstuk komen een aantal bijzondere, doch veelvoorkomende handelingen aan de orde.

3.1 Tekst kopiëren vanuit MsWord en andere toepassingen Wil je een kort artikel schrijven, dan volstaat het om direct op de site in te loggen en daar de tekst te typen. Heb je meerdere artikels of wil je een lang artikel schrijven dan is het aan te bevelen om eerst je tekst klaar te maken in bijvoorbeeld Notepad of MsWord. Het kan ook zijn dat je teksten krijgt aangeleverd in een .txt bestand of .doc formaat. -

Kopiëren vanuit Notepad: Ga naar Notepad, markeer de tekst of CTRL-A (selecteer alle tekst), CTRLC (kopie), en klik op het icoontje

-

: de tekst vanuit Notepad wordt in het tekstvak gekopieerd.

Kopiëren vanuit Microsoft Word: mocht je tekst vanuit MS-Word willen invoegen, dan kan dat op dezelfde manier via het icoontje . Wil je de opmaak van de tekst niet meenemen uit het Word document, kies dan voor “Plakken als Platte Tekst” (Paste as Plain Text). In veel gevallen is die laatste de beste optie, omdat de website zelf ook al zijn eigen opmaakstijl erover heen zet. Let erop dat afbeeldingen uit een Word document niet automatisch meekomen wanneer je die plakt. Zo’n afbeelding moet je eerst opladen op de webserver en daarna invoegen in de tekst (zie par. 2.3).

-

Kopiëren vanuit een andere webpagina: dit kan wederom via Paste en Paste as Plain Tekst. Let er wel op dat bij gewoon plakken er ook html-code uit de webpagina waaruit je kopieert mee kan komen. Dit kan soms ongewenste resultaten geven. Bekijk altijd even op de site hoe het resultaat er uiteindelijk komt uit te zien. Let erop dat bij kopieren vanaf een webpagina de afbeeldingen wel meekomen. In dat geval is het echter wel een verwijzing naar een afbeelding op een andere website. Haalt die website de afbeelding weg, dan zal deze niet meer worden weergegeven bij het artikel.

-

Kopiëren van html: Ga naar de html-weergave d.m.v. het HTML-icoon Ctrl-V in het tekstvak.

en plak de tekst m.b.v.

Noot: verschillende webbrowsers (IE, Firefox, Chrome) kunnen verschillend reageren op “Plak”opdrachten. Hou daar rekening mee. Noot: Experimenteer gerust met de verschillende plakmethodes. Met Ctrl-Z maak je de laatste bewerking weer ongedaan. Je kunt opmaak(codes) ook verwijderen met de

opdracht.

3.2 Een hyperlink invoegen in een artikel Je kunt een hyperlink invoegen in een artikel met behulp van de je een stuk tekst geselecteerd hebt.

-knop. Die knop licht pas op wanneer

Een hyperlink kan bijvoorbeeld zijn: -

een hyperlink naar een pagina of artikel buiten de Bruse Boys site;

-

een hyperlink naar een artikel op onze site;

-

een hyperlink naar een email-adres.

Zie onderstaande figuur.

Een hyperlink naar een pagina buiten de Bruse Boys site kun je invoegen door in het vak URL een http: adres in te voeren. Bijvoorbeeld naar een artikel op bru.nu door onderstaande URL: http://www.bru.nu/asp_pages/nieuws.asp?action=readarticle&id=1743. Typ altijd http:// voor een webadres. Meestal wil je een link naar een andere site in een nieuw venster weergeven (dat is een goed gebruik). Dit kun je doen door bij Bestemming (Target) te kiezen voor Openen in nieuw scherm (Open in new window). Je kunt ook een hyperlink opnemen naar een bladwijzer of anchor wat je hebt gedefinieerd in het huidige artikel. Die kun je selecteren bij “Anchors”. Zo’n bladwijzer moet natuurlijk eerst ergens gedefinieerd zijn. Een bladwijzer kun je invoegen met de

–knop.

Wil je een link naar een ander artikel van onze site opnemen, dan kun je een artikel opzoeken in de Link zoeker (Link Browser). Onder Inhoud (Contents) kun je via de secties en categorieën een artikel opzoeken. Na Invoegen (Insert) wordt dan automatisch de juiste link naar dat artikel ingevoegd. Je kunt verwijzen naar een artikel, maar ook naar een categorie of zelfs een hele sectie. Ook kun je een link opnemen naar een van de gedefinieerde contactpersonen die zijn opgevoerd. Contactpersonen kunnen alleen in de back-end worden opgevoerd (niet via front-end dus). Wil je verwijzen naar een hele pagina, kies dan een menu link.

3.3 Foto’s in een fotogallerij zetten Binnen de website maken we gebruik van het component JoomGallery om foto’s in een fotoalbum weer te geven. Een fotoalbum is een verzameling foto’s die bij elkaar horen, bijvoorbeeld foto’s van een evenement, gebeurtenis of activiteit. De verzameling van fotoalbums noemen we een fotogallerij. In een fotogallerij kun je op eenvoudige manier door een grote set van foto’s lopen. Noot: de fotogallerij gebruik je om een aanzienlijke hoeveelheid foto’s (ca. 10 of meer) op te laden. Heb je een enkele of een paar foto’s, laad die dan op op de server en plaats ze in een artikel via de Image Manager (zie par. 2.3).

3.3.1 De bestanden verkleinen Voordat de foto’s naar de website worden opgeladen, kun je ze eerst verkleinen. Foto’s die je maakt met een digitaal fototoestel zijn al snel zo’n 1,5 Mb groot (of meer). Dat geeft een prima kwaliteit bij het afdrukken van de foto, maar voor het weergeven op een website moeten de fotobestanden niet te groot te zijn, want dan duurt het heel lang voor dat een foto geladen is. Daarnaast is het kwaliteitsverschil op een computerscherm steeds minder waarneembaar naarmate het fotobestand groter wordt. Een optimale grootte van kwaliteit en bestandsgrootte (snelheid van laden) ligt ongeveer bij 100 – 200 Kb bij een afmeting van 1366 bij 768 pixels, wat een gebruikelijke weergavegrootte is. Er zijn legio programma’s waarmee je foto’s kunt bewerken. Voor het verkleinen van de foto’s is Image Resizer een handig programma. Daarmee kun je vanuit Windows Explorer met de rechtermuisknop eenvoudig een of meerdere foto’s tegelijkertijd verkleinen. Image Resizer kun je hier gratis downloaden. De werking is vrij simpel, bekijk de screenshots op de Codeplex webpagina.

3.3.2 Een fotoalbum aanmaken Een fotoalbum heet in JoomGallery een Categorie. Maak eerst een nieuwe categorie aan voordat je foto’s in een nieuw fotoalbum wilt plaatsen. Ga naar Componenten | JoomGallery | Categorie en maak vervolgens een nieuw album aan via de knop Nieuw.

Geef vervolgens het fotoalbum een Titel, een hoofdcategorie en eventueel een omschrijving. De hoofdcategorie bepaalt onder welke andere categorie dit album valt. Zo kun je subalbums in een ander album aanmaken. Bijvoorbeeld om alle fotoalbums van Dames1 bij elkaar te krijgen.

3.3.3 Fotobestanden opladen De makkelijkste en snelste manier om meerdere foto’s tegelijk op te laden is via Java Upload in het JoomGallery component. Je ziet het onderstaande scherm:

Noot: Het onderste deel van het scherm is een Java-applet. Een applet is een klein programmaatje dat draait in je browser. Om deze applet in je browser te kunnen draaien, moet Java eerst geïnstalleerd zijn op je computer. Meestal vraagt je browser in dit geval al of hij de Java Runtime moet installeren, als die nog niet op je computer staat. Installeer in dat geval eerst, dit hoef je maar 1 keer te doen. Geef in het eerste veld de categorie (fotoalbum) aan waarin de foto’s geplaatst moeten worden. Je kunt eventueel een titel en een generieke omschrijving aan de set van op te laden foto’s geven. Klik daarna op de knop Bladeren… om de op te laden bestanden op je computer te selecteren. Kies de (verkleinde) fotobestanden in de map op jouw computer. Na selectie worden de bestanden geplaatst in het lijstje eronder. Met de knop Upload worden de bestanden vervolgens stuk voor stuk opgeladen op de webserver en direct in het juiste fotoalbum geplaatst. Noot: Wanneer de bestanden zijn geselecteerd en op Open is geklikt, worden de op te laden bestanden in de lijst weergegeven. Je kunt nu door deze lijst lopen en eventueel de foto nog draaien of verwijderen.Druk op de knop Upload en de bestanden worden één voor één opgeladen. Dat kan even duren… Controleer na toevoegen van een foto altijd via de frontend of de afbeelding goed wordt weergegeven.

3.3.4 Een foto of serie foto’s uit een album in een artikel plaatsen Via de knop een artikel plaatsen.

onder de artikel-editor kun je een foto of een serie foto’s uit een fotoalbum in

Om een enkele foto in een artikel te plaatsen (bijvoorbeeld als thumbnail in de introtekst), geef je op het tabblad Insert Image aan of je een miniatuur (thumbnail) of grotere versie van de foto wilt weergeven bij Image type. Je kunt ook aangeven of de afbeelding links, rechts of gecentreerd in de artikeltekst moet verschijnen via Alignment.

Daarna kun je in het Search gedeelte een foto uit het complete fotoboek selecteren. Het is wel handig om eerst te filteren op een categorie om eenvoudig de juiste foto te kunnen vinden. Na het klikken op een foto wordt deze direct als plaatje in het artikel geplakt, op de plek waar de cursor staat. Om meerdere foto’s uit een fotoalbum in te voegen in een artikel, kies je voor het tabblad Insert Category. De werking is min of meer gelijk aan die van het invoegen van een enkele foto. Je kunt hier opgeven hoeveel foto’s uit het album je wilt weergeven, in welke volgorde dat moet gebeuren, en over hoeveel kolommen je de foto’s wilt verdelen.

Na selectie van het gewenste fotoalbum verschijnt er een codetekst (tussen accoladen) in het artikel, bijvoorbeeld: {joomplucat:142 limit=10|columns=4|ordering=random}

Deze speciale tekst (een mambot of plugin) wordt vertaald door Joomla op het moment dat het artikel in de frontend wordt weergegeven. Dat kan er dan bijvoorbeeld als volgt uitzien:

Wil je toch een ander fotoalbum weergeven, haal dan de ingevoegde code in zijn geheel weg en herhaal de actie.

3.4 Weblinks maken Weet je een goede site die zeker de moeite waard is om op de Bruse Boys site te plaatsen, dan kun je een weblink opvoeren naar die site. Hiervoor dient het component Weblinks. Kies Componenten | Weblinks in de Administrator. Een weblink heeft een naam, een beschrijving en natuurlijk een URL. Weblinks dien je onder te brengen in een categorie. De categorieën worden beheerd via het menu Componenten | Weblinks| Categorieën. Begin een URL altijd met het protocol. Meestal is dat “http://”. Bij Target (Doel) geef je aan of de link in het huidige of in een nieuw browservenster moet worden geopend. Gebruik algemeen betekent dat de generieke instelling wordt gebruikt (op onze site is dat open in een nieuw venster). Opmerking: De links kunnen in de front-end worden geopend vanuit het menu Langs de Lijn | Voetballinks.

3.5 Een activiteit in de kalender plaatsen Activiteiten worden op de frontend geplaatst in de activiteitenkalender. Hiervoor wordt het component JEvents gebruikt. Ga naar Componenten | JEvents voor het event-overzicht. Een event is een gebeurtenis, activiteit of evenement dat je wilt opnemen in de kalender. Vanzelfsprekend is een event altijd gekoppeld aan een datum. Events kun je weer onderbrengen in categorieën.

4 Joomleague De Bruse Boys website is een druk bezocht medium en velen zoeken (vooral) op zaterdag en zondag naar uitslagen, verslagen en foto's. Daarvoor gebruiken we het component Joomleague. Dit is een generiek component met heel veel functionaliteit rondom het registreren van competities, wedstrijden, uitslagen, enz. voor allerlei verschillende soorten sporten. Joomleague kan vanuit de backend worden gestart via menu Componenten | Joomleague, of via de knop in het controlepaneel.

4.1 De Joomleague database Het startschema van Joomleague laat het volgende scherm zien.

Je zit dan in het bovenstaande scherm. Links bovenin zie je de filteropties (omcirkeld). In het middengedeelte zie je alle bestaande projecten. Een project komt overeen met een competitie, een toernooi, enz. In de linkerkantlijn onder de filteropties zie je ‘database’. Dit is een grote kaartenbak met allerlei vaste gegevens zoals clubs en de teams die vallen onder die clubs. Wil je een team kunnen koppelen aan je project dan zal die eerst aangemaakt moeten worden in de algemene database. Pas dan kan het team gekoppeld worden aan je project. We gaan er voor het gemak nu even vanuit dat de benodigde projecten al bestaan en dat ook alle benodigde teams al in de database staan.

4.2 Een project selecteren Je begint altijd met het selecteren van je eigen project via de eerdergenoemde filteropties linksboven in de kantlijn:

Kies in het bovenste veld voor “voetbal”, vervolgens voor het betreffende seizoen en tot slot voor je project (= je team, in dit voorbeeld is gekozen voor de BB a1). We vernoemen de projecten naar onze teams die daarin spelen. Vervolgens zie je een aantal knoppen verschijnen.

4.3 Teams toevoegen aan je project Om teams toe te voegen om of te verwijderen klik je op de knop “Teams”.

Klik bovenin op de knop “Toewijzen/ Toewijzen ongedaan maken”. In het dan volgende scherm kun je de juiste teams naar rechts (toewijzen) of naar links (weghalen) schuiven via de knopjes met de pijlen in het midden. Ga op het juiste team staan en klik op één van de twee knoppen met de pijlen. Klik als laatste op de knop “opslaan” om de gekozen teams op te slaan.

4.4 De speelronden aanmaken Selecteer aan de linkerkantlijn je project. Klik vervolgens op de knop “Speeldagen”. Klik vervolgens bovenin op de knop “Massaal toevoegen rondes” en kies het totaal aantal speelrondes.

Klik daarna op de knop ”toevoegen nieuwe ronden(s)”. Het aantal rondes in een normale competities is 2x (het aantal teams – 1). De aangemaakte ronden verschijnen onder elkaar.

Hierna is het belangrijk om bij elke ronde de datums in te vullen. Meestal kun je bij begin- en einddatum dezelfde datum invullen (de meeste speelrondes worden immers afgewerkt op 1 dag). Je kunt de datums van de afzonderlijke wedstrijden in een speelronde later nog aanpassen. Noot: De datums worden voorafgaand aan ieder seizoen door de KNVB gepubliceerd op www.knvb.nl/zuid1. Noot: Het is belangrijk om de datums goed in te voeren omdat er op de homepage van de Bruse Boys website een scrollende module met het komend programma loopt. Die module kijkt naar de datums die we hier invullen.

4.5 De wedstrijden aanmaken per speelronde Nu alle speelronden aangemaakt zijn, kunnen we iedere speelronde gaan vullen met de wedstrijden. Noot: De KNVB publiceert voorafgaand aan ieder seizoen het speelschema voor het gehele seizoen. Je kan het gehele speelschema inzien op www.voetbal.nl. Wel eerst registreren en inloggen. Kies op www.voetbal.nl bij je team voor ‘competitie’ en dan ‘çompetitie-indeling’. Je ziet dan alle teams met hun aanvangstijd. Scroll naar beneden en je ziet het hele seizoensschema.

Om wedstrijden aan een speelronde toe te voegen klik je op “Wijzig wedstrijden” achter de betreffende speelronde.

Je komt dan in een tabel terecht waarin je door middel van klikken een wedstrijd aan kan maken.

In de linkerkolom van de tabel staan de thuisspelende teams, de teams op de bovenste rij zijn de uitspelende teams. Je kunt vervolgens op een eenvoudige manier de wedstrijden samenstellen door op het snijpunt van thuis- en uitspelende ploeg een rondje te zetten. Zodra je klikt verschijnt de wedstrijd bovenin in je speelronde:

De datum en aanvangstijd worden met standaardwaarden ingevuld. Controleer deze en pas eventueel aan voor elke wedstrijd die is aangemaakt. Noot: Zorg in elk geval dat de datum van de wedstrijd klopt. Is het een wedstrijd van Bruse Boys, zorg dan dat je ook het aanvangstijdstip goed invult (en eventueel bijwerkt). De datum en aanvangstijdstip worden immers op basis van deze gegevens automatisch gepubliceerd op onze homepage in de scrollende module met het competitieprogramma. De juiste aanvangstijden worden door de KNVB bepaald en zijn o.a. te vinden via de KNVB widget. Herhaal bovenstaande voor elke wedstrijd in de betreffende speelronde. Kies daarna voor ‘volgende speeldag’ om ook die allemaal te vullen. Zet de wedstrijden erin tot en met de helft van de speelronden. Heb je bijvoorbeeld 12 teams, vul dan de wedstrijden tot en met speelronde 11. De tweede seizoenshelft zijn namelijk dezelfde wedstrijden alleen dan thuis en uit omgekeerd. De wedstrijden zijn omgedraaid eenvoudig te kopiëren binnen Joomleague middels de functie Massaal toevoegen wedstrijden. Ga naar de speeldag waarvan je de wedstrijden wilt vullen, de eerste wedstrijd van de tweede seizoenshelft. In ons voorbeeld speelronde 12. Klik op de knop Massaal toevoegen wedstrijden. Concentreer je vervolgens op de rechterhelft van het navolgende scherm. Als we de wedstrijden van speelronde 1 omgekeerd in speelronde 12 willen hebben dan vullen we dat scherm als volgt in:

Vul in vanuit welke ronde je wilt kopiëren en kies in het laatste veld voor “spiegel uit/thuis”. Klik als laatste onderaan op de knop Kopiëren wedstrijd(en). Belangrijke afspraken over het bijhouden van uitslagen en programma wijzigingen •

Vullen van het speelschema voor het hele seizoen Geef voordat het nieuwe seizoen begint het gehele wedstrijdschema in Joomleague in.

•

Vullen van de uitslagen Probeer zo snel mogelijk na afloop van de wedstrijden de uitslagen in te vullen, in elk geval die van het Bruse Boys team. Onze Bruse Boys website wordt zaterdag en zondag druk bezocht door mensen die nieuwsgierig zijn naar uitslagen. Voor de uitslagen van de overige wedstrijden kun je gebruik maken van de wedstrijd www.voetbal.nl of je kunt natuurlijk de website van een van de clubs bezoeken en daar zoeken.

4.6 Wedstrijduitslagen invoeren De uitslagen van wedstrijden kunnen worden ingevoerd in hetzelfde scherm als waar de wedstrijden gedefinieerd worden. Kies in het snelmenu van Joomleague links boven in voor je project en selecteer de juiste spelronde. Vervolgens verschijnen de wedstrijden in die ronde.

B

C

A

D

De uitslagen kunnen simpelweg achter de wedstrijden worden ingevoerd (A). Maar er kan meer worden vastgelegd over een gespeelde wedstrijd, zoals een wedstrijdverslag, een voorbeschouwing en een gestructureerde manier om allerlei belangrijke gebeurtenissen vast te leggen. Een voorbeschouwing en wedstrijdverslag kunnen worden ingevoerd via het icoon “Wijzig wedstrijd details” (B). Het volgende scherm wordt dan weergegeven:

Belangrijk: Probeer iedere week een verslagje te maken. De Bruse Boys website heeft na een speeldag vele bezoekers. Deze bezoekers willen allemaal informatie over de wedstrijd van een Bruse Boys team. Mocht je zelf niet aanwezig zijn bij de wedstrijd probeer dan vóóraf afspraken te maken met iemand die wel in de gelegenheid is. Laat die het verslag naar jou mailen zodat jij het kan plaatsen. Het verslag kun je vervolgens op twee manieren op de website plaatsen. In een artikel op de voorpagina en als wedstrijdverslag in Joomleague. Als er in Joomleague een wedstrijdverslag wordt gemaakt, verschijnt op de homepage achter de scrollende uitslagen een verslagicoontje. Op de verschillende tabbladen kunnen diverse details over de wedstrijd worden ingevoerd. Meest relevante is het wedstrijdverslag. Als er een verslag is ingevoerd, vergeet dan niet “Toon wedstrijdverslag” op “Ja” te zetten. Noot: Hoe om te gaan met afgelastingen? Het gebeurt regelmatig dat één van de wedstrijden niet doorgaat. Dit verwerken we als volgt: je laat de wedstrijd gewoon in de speelronde staan waar je die oorspronkelijk hebt ingevoerd. Je vervangt de datum die vóór de betreffende wedstrijd staat (C) door 00-00-0000. En klikt daarna op toepassen. Voor de bezoekers op de website wordt dit keurig zichtbaar, de afgelaste wedstrijd wordt apart van de andere wedstrijden weergegeven:

Hou op www.voetbal.nl wekelijks het programma bij van het betreffende Bruse Boys team. Vroeg of laat wordt de afgelaste wedstrijd weer ingepland. Pas als de wedstrijd wordt ingehaald en er een nieuwe datum bekend is, kun je de 00-00-0000 vervangen door de werkelijke datum.

Naast wedstrijddetails kunnen er ook zogenaamde wedstrijdgebeurtenissen worden vastgelegd. Een wedstrijdgebeurtenis is bijvoorbeeld een doelpunt, een gele kaart, een hoekschop, een overtreding. Nu gaan de laatste twee voorbeelden misschien iets te ver, maar doelpunten en kaarten vastleggen is wel nuttig.

Dat werkt als volgt. Druk in het rondewedstrijdenoverzicht op de knop “Wijzig gebeurtenissen” (D). Het volgende scherm verschijnt:

Hier kun je voor een wedstrijd opgeven wat er aan gebeurtenissen is geweest. Dit gaat per team per speler. Noot: alle spelers moeten eerst ingevoerd zijn (via Database | Spelers) voordat een gebeurtenis kan worden vastgelegd. Hetzelfde geldt voor de gebeurtenissen die je in je project wilt bijhouden. Noot: Aanbeveling is om alleen doelpunten en gele kaarten te registreren voor de seniorenteams. Voor pupillen heeft het bestuur liever niet dat doelpuntenmakers worden geregistreerd. Als er doelpunten worden geregistreerd dan verschijnt automatisch de naam van de spelers in de scrollende wedstrijduitslagenmodule op de homepagina. Dat geldt ook voor een ingevoerd wedstrijdverslag.

Revisies. Inhoudsopgave

Recommend Documents