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 <p> en afgesloten worden met </p>. In Drupal, het systeem dat de Mira-website gebruikt, hoef je die <p>blabla</p> 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 <hx> en </hx> 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. <h2>dit is een goede titel</h2> is dus een goed voorbeeld, terwijl <h1>dit is een titel</h3> een fout voorbeeld is. Gebruik nooit <h1>, dit is het model gebruikt voor de paginatitel, begin je artikel-hoofdingen dus liefst met <h2>. Gebruik liefst ook niet te veel niveau's, dat werkt verwarrend voor de lezer. Voor een normaal artikel zou je met 2 niveau's (<h2> en <h3> 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. </em> aan het einde van een <em> volgt een</em>) <cite> geeft een citaat weer, en zal in veel browsers omringd worden door aanhalingstekens of schuingedrukt staan. <code> 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 <ol> voor een genummerde lijst ( ordered list ) en <ul> voor een ongenummerde lijst ( unordered list ). Aan het einde van de volledige lijst mag je niet vergeten af te sluiten met </ol> of </ul>. 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 <li> (en </li> na het item). Een lijst ziet er dus als volgt uit: Genummerd: <ol> <li>eerste element</li> <li>tweede element</li> <li>derde element</li> </ol> Dit wordt dan door de webbrowser getoond als: 1. Eerste element 2. Tweede element 3. Derde element Ongenummerd <ul> <li>eerste element</li> <li>tweede element</li> <li>derde element</li> </ul> Dit wordt dan door de webbrowser getoond als: Eerste element Tweede element Derde element De derde soort lijst, de definitielijst gebruikt drie tags <dl>, <dt> en <dd> Waarbij <dl> de lijsttag is, en <dt> een lijst-item van type titel is en <dd> 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 <table> tags omringd zijn. Binnen die <table> tags is er een eerste niveau van onderverdeling in <thead> en <tbody>, de eerste voor de hoofdingen (kolomtitels) en de tweede voor de gegevens. Binnen in <thead> en <tbody> wordt er in rijen gewerkt, <tr>, en binnen elke rij met cellen <td>. De feitelijke inhoud van de tabel moet steeds in de <td> 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 <tr> tag uit te breiden met een klasse op de volgende manier: <tr class= odd > of <tr class= even >. Let wel, dit alleen in de openingstag, de sluitingstag blijft steeds </tr> 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: <table> <thead> <tr><td>naam</td><td>voornaam</td></tr> </thead> <tbody> <tr class= odd ><td>declercq</td><td>bart</td></tr> <tr class= even ><td>mollet</td><td>philippe</td></tr> </tbody> </table> 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 <a> tag. De <a> tag wordt niet zonder meer gebruikt, je moet er extra informatie aan toevoegen voor die z'n werk kan doen. Een <a> tag bevat een aantal elementen. Neem als voorbeeld een link naar de Mira-website zelf: Dit is een <a href= http://www.mira.be/ target= _blank >link</a> naar Mira. Dit levert het volgende op: Dit is een link naar Mira. De <a> 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 <img>. 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: <img src="/sites/default/themes/mira/logo.png" alt="miralogo"/> Merk op dat de <img> tag altijd eindigt in />, niet gewoon in >. Dit is in feite een toegestane verkorte manier om niet <img></img> 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 <img> 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 <img> 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)