Handleiding gebruik Mira­website Startpagina Als je naar de Mira website gaat (http://www.mira.be/) zal je nergens een login-functie zien. Deze is bewust verborgen gehouden om geen “inbrekers” aan te lokken.

Inloggen Om te kunnen inloggen moet je expliciet naar het web-adres http://www.mira.be/user/login gaan. Om in te loggen gebruik je je volledige naam (“Voornaam Naam”) en het je door de beheerders bezorgde paswoord. (Als je je paswoord vergeten bent, kan je een nieuw vragen, dit wordt je via een e-mail bezorgd.)

Ingelogd Eénmaal ingelogd, krijg je in het linkerpaneel van de site een aantal extra mogelijkheden:

Direct na het inloggen zit je op de pagina “Mijn Account'. Door “Bewerken” te kiezen (of “Edit” in 't Engels kan je enkele van je gegevens wijzigen (e-mail adres, paswoord, voorkeurstaal). Je kan ook een foto van jezelf inladen, maar deze functie gebruiken we momenteel niet. Je hebt een link “Uitloggen”, die precies doet wat hij zegt... En natuurlijk de meest interessante link op deze pagina: “Inhoud Aanmaken”.

Inhoud aanmaken Dit is het hart van de website, via “Inhoud Aanmaken” kan je Artikels schrijven, Nieuwsberichten posten of Weblinks aanmaken. Het stramien is steeds hetzelfde: je vult een titel in, duidt een categorie aan en je kan beginnen typen. Normale webpagina's worden uitgeschreven in de pagina-opmaaktaal HTML, maar in dit systeem kan het op een iets veréénvoudigde manier: In normale HTML moet een paragraaf omringd worden door zogenaamde “tags”, elke paragraaf moet dan beginnen met

en afgesloten worden met

. In Drupal, het systeem dat de Mira-website gebruikt, hoef je die

blabla

niet te typen. Aan het einde van een paragraaf druk je gewoon op “enter “ om een nieuwe paragraaf te beginnen. Dit betekent ook dat je je tekst gerust in een tekstverwerker kan intikken en dan via kopiëren en plakken hier kan invoegen.

Titels en andere bijzondere tekst Er zijn echter een aantal uitzonderingen, waarbij het nog steeds nodig is de traditionele htmltags te gaan gebruiken: Titels, of “Hoofdingen”, moeten omringd worden met en tags. X moet hierbij een getal zijn van 1 tot 6, waarbij 1 het grootste model titel is, en 6 het kleinste model. De beginen eindtag van een titel moeten dezelfde zijn.

Dit is een goede titel

is dus een goed voorbeeld, terwijl

Dit is een titel

een fout voorbeeld is. Gebruik nooit

, dit is het model gebruikt voor de paginatitel, begin je artikel-hoofdingen dus liefst met

. Gebruik liefst ook niet te veel niveau's, dat werkt verwarrend voor de lezer. Voor een normaal artikel zou je met 2 niveau's (

en

moeten toekomen), een nieuwsbericht heeft liefst geen hoofdingen, maar enkel paragrafen. Buiten titels zijn er nog enkele andere bijzondere tekstsoorten die je kan & mag gebruiken: <em> staat voor “emphasis” en zal meestal als schuingedrukte tekst getoond worden. <strong> wordt meestal als vetgedrukte tekst getoond. <sup> en <sub> staan voor superscript en subscript (dus iets verhoogde of verlaagde tekst in een kleiner lettertype. Dit is bvb. nuttig voor chemische of wiskundige formule's) Vergeet ook niet om telkens je tag af te sluiten door de equivalente afsluittag te gebruiken (bvb. aan het einde van een <em> volgt een) geeft een citaat weer, en zal in veel browsers omringd worden door “aanhalingstekens” of schuingedrukt staan. wordt verondersteld programmacode voor te stellen en zal in een “monospace” lettertype weergegeven worden.

Lijsten Zeker in een artikel (minder in een nieuwsbericht) zal het soms nodig zijn om een “lijst” of een “tabel” te plaatsen. Lijsten en tabellen werken via een combinatie van tags en zijn daarom iets ingewikkelder (zeker de tabellen). Indien je er niet in slaagt deze goed te krijgen, schrijf er dan bij wat je

precies wil bereiken en laat de afwerking ervan over aan één van de meer ervaren websitebeheerders (vraag het aan één van hen via een mailtje, liefst met een link naar het artikel in kwestie erbij). Ben je toch dapper genoeg om het zelf te doen, lees dan vooral verder: Lijsten bestaan er in drie verschillende vormen, maar slechts twee ervan zijn echt nuttig in de meeste gevallen: de genummerde lijst en de ongenummerde lijst. Deze werken op dezelfde wijze: Begin een lijst met een openings-lijsttag, dit is

voor een genummerde lijst (“ordered list”) en
voor een ongenummerde lijst (“unordered list”). Aan het einde van de volledige lijst mag je niet vergeten af te sluiten met

of . Let wel op de juiste eindtag te gebruiken! Een lijst bestaat uit lijst-elementen, of “list-items”. Elk lijst-element wordt omringd door een item-tag, deze is hetzelfde voor beide soorten lijsten, namelijk

(en

na het item). Een lijst ziet er dus als volgt uit: Genummerd:

1. Eerste element
2. Tweede element
3. Derde element

Dit wordt dan door de webbrowser getoond als: 1. Eerste element 2. Tweede element 3. Derde element Ongenummerd

• Eerste element
• Tweede element
• Derde element

Dit wordt dan door de webbrowser getoond als: • Eerste element • Tweede element • Derde element De derde soort lijst, de “definitielijst” gebruikt drie tags

,

en

Waarbij

de lijsttag is, en

een lijst-item van type “titel” is en

een lijst-item van type “data”. Als je wil weten hoe dit eruit ziet, probeer het dan gerust (je kan altijd de “Voorbeeldweergave” knop gebruiken om te zien hoe iets eruit ziet zonder daarmee het artikel te bewaren), maar dit soort lijst is slechts uiterst zelden nodig.

Tabellen Tabellen zijn nog een pak ingewikkelder dan lijsten, en werken met een hele reeks tags die volgens bepaalde regels met mekaar gecombineerd moeten worden. We leggen dit kort uit,

met een voorbeeld, maar bij twijfel of vragen : contacteer één van de website-beheerders. Een tabel moet steeds met tags omringd zijn. Binnen die tags is er een eerste niveau van onderverdeling in en , de eerste voor de hoofdingen (kolomtitels) en de tweede voor de gegevens. Binnen in en wordt er in rijen gewerkt, , en binnen elke rij met cellen tag uit te breiden met een “klasse” op de volgende manier: of . Let wel, dit alleen in de openingstag, de sluitingstag blijft steeds zonder meer!!!. Rijen van klasse “odd” krijgen een lichtblauwe kleur, terwijl rijen van klasse “even” een witte kleur hebben. Gebruik hiervan is niet verplicht, maar het kan sommige tabellen leesbaarder maken. Een voorbeeld-tabel:

. De feitelijke inhoud van de tabel moet steeds in de	staan, zowel in de hoofding als in de inhoud. Er is nog één speciale truuk die kan gebruikt worden op de Mira-website, het is namelijk mogelijk om afwisselende rijen van een tabel een andere kleur te geven. Dit gebeurt door de

Naam	Voornaam
Declercq	Bart
Mollet	Philippe

Ziet er als volgt uit:

(Nota : er zal nog voor gezorgd worden dat kolomhoofdingen automatisch vet gedrukt worden, gebruik dus geen <em> of <strong> om dit te bereiken.) Als dit enorm veel werk lijkt om een dergelijke tabel te bereiken, dan heb je gelijk, al kan het nog vrij goed meevallen door een beetje oordeelkundig gebruik te maken van knippen en plakken.

Weblinks Zeer vaak zal het wenselijk zijn om een “weblink” of “url” in een artikel te plaatsen, zeker in de nieuwsartikels gebeurt dit veelvuldig om te verwijzen naar andere websites. Als je gewoon een webadres zou ingeven in de tekst, zal de bezoeker deze niet automatisch als een aanklikbare link terugvinden. Je moet expliciet een weblink gaan aanmaken.

Dit doe je met behulp van de tag. De tag wordt niet zonder meer gebruikt, je moet er extra informatie aan toevoegen voor die z'n werk kan doen. Een tag bevat een aantal elementen. Neem als voorbeeld een link naar de Mira-website zelf: Dit is een link naar Mira. Dit levert het volgende op: Dit is een link naar Mira. De tag bevat twee extra parameters: href en target. href bevat de eigenlijke URL target is niet verplicht, maar door target=”_blank” te gebruiken verplichten we de browser van de gelinkte site in een nieuw venster te openen, net wat we willen als we de mensen naar een andere website dan de onze verwijzen. Als je naar een adres binnen de mira website verwijzen wil, kan je target=”_blank” gewoon weglaten. (Trouwens, als je dat doet kan je in je href gewoon alles tot en met http://www.mira.be/ gewoon weglaten. Linken naar de aktiviteitenpagina doe je niet met href=”http://www.mira.be/activiteiten” maar met href=”/activiteiten”.

Afbeeldingen Er zijn in dit systeem twee manieren om naar een afbeelding te verwijzen, de HTML manier en de “inline image” methode. De standaard HTML manier is met een tag, genaamd . Deze tag aanvaardt een parameter src, waarin je dan de URL naar het beeldje plaatst, en een parameter alt, met daarin een korte beschrijving van het beeld (dit laatste lijkt misschien overbodig, maar een blinde websurfer, en die bestaan, kan hiervan gebruik maken om een website beter te kunnen bezoeken, strikt volgens de webregels is de alt-parameter zelfs verplicht, al houden weinigen zich daaraan. Concreet voorbeeld : Een link naar het Mira-logo op de website: Merk op dat de tag altijd eindigt in />, niet gewoon in >. Dit is in feite een toegestane verkorte manier om niet te hoeven schrijven De inline image methode is eigen aan het systeem waarmee wij werken. Naast artikels en nieuwsberichten kan je ook afbeeldingen “aanmaken” in dit systeem. Dit kan je afzonderlijk doen, maar meestal wil je dit doen in het kader van een artikel of een nieuwsbericht. Dit doe je door op de blauwe link “Add Image” onder de inhoud te klikken terwijl je een artikel schrijft:

Als je dat doet krijg je een nieuw venster te zien met een lijst van alle reeds beschikbare afbeeldingen:

Hier kan je dan uit de bestaande beelden kiezen als dat zinvol is, maar je kan ook een nieuw beeld “uploaden”. Je moet het beeld dan een titel geven en via “Browse” op je lokale PC het beeld gaan afhalen. Zorg er eerst voor dat het bronbestand niet te groot is (maximum zo'n 100 kilobyte, gebruik jpg voor foto's, png of gif voor grafieken en logo's). Als je dan dat beeld indient krijg je de mogelijkheid een aantal gegevens in te stellen vooraleer je het op de pagina plaatst:

Belangrijkst in dit scherm zijn “Size” en “Alignment”. Bij Size heb je drie keuzemogelijkheden, “thumbnail” is een zeer kleine weergave van je beeld, “preview” een middelgrote en “original” het beeld zoals het opgeladen werd. Alignment bepaalt de positie van het beeld in de tekst. “left”, “center” en “right” zullen ervoor zorgen dat de tekst rond het beeld vloeit, met het beeld zelf respectievelijk links, centraal of rechts. “none” zorgt ervoor dat de tekst boven het beeld erboven blijft, en de tekst onder het beeld eronder, met het beeld gecentreerd ertussenin (maar dus zonder doorvloeiende tekst errond). “none” is meestal het meest praktische, want soms is dat doorvloeien niet erg voorspelbaar. Een uitzondering zijn nieuwsberichten, waar je het beeld best helemaal bovenaan de tekst plaatst en “right” gealigneerd. Als je dan op “insert” klikt, zal het systeem een eigen, speciale verwijzing naar het beeld in je tekst plaatsen, die er heel anders uitziet dan de standaard tag. [img_assist|nid=291|title=Dit is de titel|desc=|link=none|align=right| width=150|height=200] Deze speciale verwijzing wordt door het systeem bij presentatie “omgerekend” naar een standaard tag. Het systeem voegt deze [img_assist] regel in op de plaats in de tekst waar je stond toen je “add image” deed, maar je kan deze verplaatsen door het hele blok, van [ tot ] in zijn geheel te knippen en op een andere plaats te plakken. OPMERKING: er is een kleine bug in dit systeem, soms zal, zelfs als je als size “original” gekozen hebt, het systeem je image toch in “preview” of in “thumbnail” weergeven. Dit komt omdat het systeem soms een rekenfoutje maakt bij het bepalen van width en height in het [img_assist] blokje. Meestal volstaat het om het artikel even weer te bewerken en de width of de height één pixel groter te maken (in bovenstaand voorbeeld zou hij er bvb. height=199 van kunnen gemaakt hebben, wat fout is)