Opleidingspagina’s 2.0 Manual · Nu ken je de drupal basics, laten we eens een kijkje nemen naar...
38
Opleidingspagina’s 2.0 Manual
Transcript of Opleidingspagina’s 2.0 Manual · Nu ken je de drupal basics, laten we eens een kijkje nemen naar...
Opleidingspagina’s 2.0 Manual
Inhoudsopgave Opleidingspagina’s 2.0 Manual 1Inhoudsopgave 2Drupal 3
Inloggen 3Main info 4Tabs 5Paragraphtypes 7
Tabel 72 tiles 81 tile 8Tiletypes 9
Banner 14Flickr 16Youtube 16Image 17Text 19Events 22Levels 22
Users 24De nieuwe pagina’s 26
Tabs 26Over de opleiding 27Programma 29Iets voor mij? 29Na je studies 30Wist je dat? 31Praktische info 33
Beeldgebruik 34How to 34Benaming 35Zoektermen fototheek 35
Tips 38
Drupal Onze webpagina’s zijn opgebouwd binnen drupal 7. Nieuw op onze website? Geen probleem! We loodsen je er wel door en zijn beschikbaar voor alle vragen. Net zoals bij alle andere pagina-aanvragen zette het webteam de opleidingspagina voor jullie klaar. Met als enige verschil dat we nu ook de content voor jullie voorbereidden. Inloggen Om een pagina te kunnen bewerken of naar de back-end 1 te gaan moet je je even inloggen. Dat doe je helemaal onderaan elke pagina in de footer2.
Na inloggen kom je op een onthaalpagina waar je Als je ingelogd ben en dus in ‘bewerkingsmodus’ bent heb je volgende keuzemogelijkheden:
● view ● bewerken / edit
1 Back-end: is de omgeving waar je je pagina kan bewerken. Front-end is de live weergave 2 Footer: balk helemaal onderaan elke webpagina. De footer van een website bevat cruciale informatie en is te zien op elke pagina.
Klik op bewerken / edit. Je bent nu in de ‘back-end’ van jouw webpagina. Hier zie je twee tabbladen:
● Main Info ● Tabladen
Main info Bij ‘main info’ kan je de titel van de pagina invullen en kiezen in welke taal je de pagina wilt. Ter illustratie zie je hier een pagina met de titel Agogische Wetenschappen. Dit is louter een administratieve titel. Dit is niet de titel die je op de hero 3ziet. Let wel, al deze zaken zijn al voor jullie ingevuld. 3 Hero: grote banners die op alle pagina’s voorkomen.
Dit ziet er op de website zo uit.
Tabs Vervolgens ga je naar de sectie tabbladen. Hier kan je tot maximaal 7 tabbladen toevoegen. Tabs zijn eigenlijk de verschillende ‘subpagina’s binnen jouw pagina’. Deze hebben geen echte aparte URL maar worden opgedeeld via een #, bv.: http://www.vub.ac.be/opleiding/agogische-wetenschappen#programma. Hierboven zie je het voorbeeld met 6 tabbladen. Voor bachelor en masteropleidingen hebben we telkens 6 tabs aangemaakt. Voor masters en andere programma’s zijn er max. 4 aangemaakt. Dat laat ruimte genoeg om aanvullingen te doen waar nodig.
Je kan een bestaand tabblad bewerken door op bewerken te klikken of een nieuw tabblad toevoegen via de ‘add tab’.
Als je op ‘add tab’ klikt, dan komt volgend scherm tevoorschijn.
In het title-veld vul je de titel van het tabblad in. Deze verschijnt dan ook op de webpagina.
Paragraphtypes
Dit zijn alle mogelijke paragraphtypess die je kan toevoegen op je webpagina. Er zijn 12 verschillende types. Per tabbad limiteren we tot 7 paragraphtypess onder elkaar te gebruiken. We adviseren daarentegen om er max. 5 te gebruiken. Een pagina zou niet meer als 2 volledige beeldschermen onder elkaar mogen bevatten. Tabel Het eerste type is een tabel. Dit raden we ten zeerste af om te gebruiken. Het is niet responsive4. Dit paragraphtype wordt wel door sommige onderzoeksgroepen gebruikt om onderzoekstdata weer te geven.
4 Responsive: past zich aan naar gelang het beeldscherm je gebruikt.
Tiles Het tweede paragraphtype dat je kan gebruiken is een tile. Je kan maximum 4 tiles naast elkaar gebruiken, maar we raden aan het bij 3 te houden. De tiles passen zich automatisch aan de body aan. M.a.w.: hoe meer tiles naast elkaar, hoe kleiner ze weergegeven worden. 2 tiles
1 tile
Tiletypes Tile Text (text + link)
Bij een Tile Text kan je een titel een en een bijkomend woordje uitleg voorzien. Je kan er ook een link achter steken met een button.
Ingevuld ziet dit er dan zo uit Als je naar een andere pagina op de VUB-website linkt hoeft je niet de volledige url op te geven. Bij url geef je gewoon in wat achter www.vub.ac.be/ moet komen. Dit verschijnt dan op de webpagina. Tile Banner (afbeelding + link)
Met dit tiletype kan je een afbeelding als achtergrond toevoegen. Je kan een titel toevoegen. De link werkt op dezelfde manier als bij een tile text.
Tile Phone Numbers (te gebruiken voor contactgegevens)
Deze tile is vooral handig voor het toevoegen van contactgegevens. Deze optie hebben wij voorlopig niet gebruikt, aangezien je via hier geen directe link kan leggen.
Hier kan je verschillende contactgegevens toevoegen zoals e-mail, lokaal, adres, ...
Op de website wordt momenteel enkel doorverwezen naar een e-mailadres.
Het volgende type in de rij is News. Hiermee kan je een newsfeed inladen.
Je geeft de newsfeed een titel bijvoorbeeld. Je kan met tags gemakkelijk het nieuws selecteren dat jou aanbelangt. Gebruik een tag die iets met je faculteit, departement, onderzoeksgroep te maken heeft. Als je dezelfde
tag ingeeft bij het newsitem en op de pagina waarop het getoond, verschijnt er alleen nieuws dat jouw pagina aanbelangt. Als je gewoon de tags wilt gebruiken die al bestaan, om het nieuws feed te filteren, dan kan je de lijst van tags hier bekijken: http://www.vub.ac.be/nieuws/, er is een lange lijst rechts op de zijbalk. Je kan Nederlandse newsitems publiceren op Nederlandse pagina’s, en Engelse newsitems op engelse pagina’s. In het voorbeeld hieronder staan dus 2 tags ingevuld foundation en VUB Foundation. Als je je nieuwsitems met dezelfde tags uitrust, verschijnt de nieuwsitems in je feed.
Op de webpagina ziet dit er dan zo uit
Er verschijnt alleen nieuws dat (in dit geval) verband houdt met Foundation. Banner Een ander paragraphtype dat je kan toevoegen is de banner. Hiermee kan je de aandacht vestigen op iets heel belangrijk. De banner strekt zich uit over de hele breedte van de pagina. Je laadt een afbeelding op. Je kan er ook een link achter steken zoals bij de tiles.
Ingevuld kan het er dan zo uitzien:
Op een website krijg je dan:
Gebruik een banner niet te veel. Gebruik maar 1 banner per tabblad. Als je meer banners gebruikt, dan verliest dit zijn effect.
Flickr Met add Flickr kan je een fotoreeks op je webpagina zetten. Je hebt hiervoor wel een Flickr-account nodig. Als je bijvoorbeeld sfeerbeelden van een event online wilt zetten, is dit zeer aangewezen.
Je vult het UserID en PhotosetID in en er verschijnt een reeks foto’s op je webpagina. Youtube Je kan ook een youtube video toevoegen. Het enige dat je nodig hebt is het youtube ID van je filmpje. Je kan boven de video een Titel en een text voorzien.
Als je de url hebt van de video die je op de webpagina wilt plaatsen, vind je het youtube ID tussen de = en &: https://www.youtube.com/watch?v=rQRlbg-VAW4
Deze vul je dan in
Op de website krijg je dan:
Image Je kan natuurlijk ook een image op je webpagina zetten. Je kan eenvoudig jouw afbeelding uploaden
Kies je afbeelding, uploaden en dan opslaan.
Een voorbeeld
Op de webpagina geeft dit dan
Je kan links of rechts van de afbeelding nog een quote of een kleine afbeelding toevoegen. Je klikt op weergeven Sidebar.
Bij positie kan je kiezen tussen geen, links of rechts. Bij ‘Geen’ verschijnt er niets in de sidebar. Er moet steeds een positie aangeduid worden (ook al is het ‘geen’) anders worden de aanpassingen niet opgeslagen. Uiteindelijk krijg je dan het volgende:
Text
Je kan text in het vet zetten, schuin zetten of onderlijnen. Er zijn twee types soorten lijsten:
● met puntjes ● met cijfers
Het is ook mogelijk om een hyperlink te plaatsen.
Bij formaat kan je kiezen tussen 2 opmaaksoorten: normaal en introduction. Een introduction opmaak resulteert in een grijze titel en wordt in het midden uitgelijnd.
De normale opmaak geeft het volgende resultaat met een blauwe tussentitel.
Bij de paragraph type text kan je links of rechts een quote, een image of een opsomming van de teamleden toevoegen. Een afbeelding in de sidebar kan er zo uitzien
Events De volgende paragraphtype dat je kunt toevoegen zijn Events. Events hebben ongeveer dezelfde werking als nieuws. Ook events werken met tags. Bij number of events to show kan je het aantal events dat je wil tonen instellen. Standaard staat dit ingesteld op 6. Je kan Nederlandse events publiceren op Nederlandse pagina’s, en Engelse events op Engelse pagina’s.
Een ingevuld voorbeeld:
Resulteert op de webpagina als:
Levels De voorlaatste paragraph type die je kan toevoegen zijn levels. Deze zijn ontwikkeld voor het weergeven en organiseren van de opleidingen.
Een goed voorbeeld vind je op de homepagina van de VUB. Ingevuld ziet dit er zo uit in de back-end uit:
Op de homepagina zie je dan:
Iserietsfoutmetjouwstudiewijzer?Dankanjediehieraanpassen.
1. Scrolltotdatjehettabblad'Programma/Program'ziet2. Klikop'bewerken'3. Navigeernaar'Paragraphtype:Opleidinglevels'4. Klikopbewerken5. Devolledige'Opleidingswijzer'vindjehieronder,opgedeeldinlevels.Jekunt3
veldenaanpassen:o planIDisdeID-tagdatovereenkomtmetdelocatiewaardeopleidingiste
vindeninCaliweb; o Titelisdetekstdiejeinhetvakziet; o URLisdelinknaarCaliweb
Users Eens je bent aangemeld op de website (zie p.3) kun je ook andere auteurs toegang geven om aanpassingen te brengen op de website. Zo zie je in de back-end bovenaan “authors” staan. Daar staat steeds één auteur al aangeduid. Door op ‘item toevoegen’ te klikken zal er een tweede balk verschijnen waar dan een tweede auteur (de NetID) toegevoegd kan worden.
Een tweede plaats waarin je de auteurs NetID moet ingeven zie hieronder op de foto. Ook hier staat reeds een auteur in weergegeven. Om een andere auteur erbij te voegen is het voldoende om een komma te plaatsen achter de weergegeven auteur en dan dezelfde NetID schrijven.
De nieuwe pagina’s Nu ken je de drupal basics, laten we eens een kijkje nemen naar de mogelijkheden. Een goed voorbeeld is de pagina van Agogische Wetenschappen.
Tabs Zoals je kan zien hebben we hier 6 tabs. Bij alle bachelor+master opleidingen zijn er 6 toegevoegd. Er kunnen er max. 7 aangemaakt worden. Nummer7 is dus vrij in te vullen. Wij raden bij deze keuze aan even na te denken welke content heel belangrijk is voor jullie opleiding. Zijn de toelatingsvoorwaarden heel belangrijk? Of is het net het internationale karakter? Bij de masteropleidingen en Engelstalige opleidingen zijn er sowieso minder tabs aangezien deze niet allemaal van toepassing zijn. Soms werd een bepaalde tab weggelaten omdat er niet genoeg content beschikbaar was. Dan is het aan jullie om aan de slag te gaan en de content te verzamelen. Hieronder volgt een overzicht van alle soorten tabs en tips & tricks die we graag nog meegeven.
1: text met optie introductie
2: foto met quote in sidebar
1: text met optie introductie
2: foto met quote in sidebar
3: text
4: text
Over de opleiding
De tweede blok is een paragraphtype foto. Het doel van deze blok is om een algemeen beeld te kiezen dat de opleiding weergeeft. Deze beelden mogen absoluut aangepast worden (lees verder bij bronnen waar je aan deze foto’s komt). Wat ook nieuw is dat we van de sidebars gebruik kunnen maken om bv. een quote over de opleiding neer te zetten.
3: text
4: text
De video die wij hier geplaatst hebben is een standaard video, vervang het url in de back-end
met één van een video naar jouw keuze. De rechter tile is jullie contacttile. Het is belangrijk dat de call-to-actions5 onderaan blijven staan. Wat je eventueel wel nog kan doen is een uitgebreide contact-tile op de praktisch tab zetten. Bij deze tile moet ook bij URL jullie e-mailadres nog aangepast worden.
5 Call-to-action: een item op je pagina waarmee je de bezoeker een bepaalde actie wil laten uitvoeren.
5: video 6: tiles
Bij deze tab raden we aan om de informatie zo duidelijk mogelijk te maken. Enkel info die de opleiding of studiewijzer verduidelijkt.
Programma
Iets voor mij?
Catchy introductietextjes zijn nodig om de paginabezoeker geprikkeld te houden. Vandaar vragen we om de tekstjes te behouden. Bij vele opleidingen is deze pagina een stuk leger, aangezien er minder content beschikbaar was. Dan zit er niets anders op dan content te gaan creëren.
1: text met optie introduc
2: text
3: tile banner
Na je studies
4: text
5: events
6: text 7: tiles text
1: text met optie introductie
1: text met optie introductie
3: tiles text
5: tiles banner
Heeft jouw opleiding een eigen LinkedIn pagina? Koppel deze dan via de rechter tile. Op sommige pagina’s hebben we hier ook een flicker-album toegevoegd van de graduation. Als jullie dat hebben kan je dat hier ook nog toevoegen. Of nog een tweede testimonial. Wist je dat?
4: text
1: text met optie introduc2: text
3: tile banner
‘Wist je dat’ is de ideale pagina om de student in spe volledig onder te dompelen in jouw opleiding / VUB campus leven. Ook hier is het belangrijk om even te gaan kijken wat binnen jullie programma het belangrijkst is. Kunnen de studenten op Erasmus? Voeg dan net zoals in het voorbeeld hier een tile banner toe met link naar Erasmus +.
4: text met image in side column
Voeg eventuele specifieke info toe over toelatingsvoorwaarden en –gelden of internationale kansen. Is de info over toelatingsvoorwaarden of internationale kansen erg uitgebreid? Maak dan een aparte tab hiervoor aan.
Beeldgebruik De heroes kunnen jullie niet aanpassen, die blijven onder ons beheer. We kozen voor: een gezicht, Brussel, de campus. Er is een nieuwe reeks campusbeelden gemaakt. Die kan je vinden in de fototheek. Hiervoor dien je een login aan te vragen op de pagina van de fototheek. Aan de hand van onderstaande zoektermen vind je al heel wat terug. Vooraleer je aan het downloaden gaat, hou rekening met volgende richtlijnen. How to
● Ga naar de afbeeldingsbibliotheek en download je afbeelding in de gewenste grootte. Voor alle tiles en image paragraphtypes is de optie ‘screen’ groot genoeg.
● Als je een full-page banner wil maken, selecteer dan de grootste bestandsgrootte
● Het is belangrijk dat je je bestand resized of cropped vooraleer je het upload naar de website. Zoniet, kiest de website de uitsnede. Voor dat gebruik je photoshop of elke andere croppingtool.
● De afmetingen: maximum 72 dpi
4 & 5: text
6: tiles banner
● HERO 3200x1500 ● SPOTLIGHT: 700x350 ● INFOBLOCK: 600x600 ● EVENT: 370x370 ● NEWS: 800x540 ● BODY: 630
Benaming Vooraleer je de afbeelding upload raden we je aan de benaming alsvolgt aan te pakken: Namedepartment_descriptionofwhatyouseeinthepicture_dimension.jpeg Dus bijvoorbeeld: Psychology_studentsreadinglibrary_3200x1500.jpeg Zo kan je altijd zoeken in de database of Zoektermen fototheek Atletiekpiste TAGS: atletiekpiste, student, sport, springen, track Aula TAGS: aula Q, examen, college, studenten, prof, interactie Cafetaria TAGS: cafetaria, studenten, aanschuiven, broodjes, lunch, studentenvoorziening, international Campus Etterbeek 2017 - ingang TAGS: koffie, betalen, pleinlaan, ingang, wandelen, valies, koptelefoon, hoofddoek, studenten, international Campus Etterbeek 2017 - Dakfoto Opinio TAGS: studenten, gras, dak, grasplein, (redelijk eigenzinnig) Campus Etterbeek 2017 - Esplanade TAGS: esplanade, gebouw D, studenten, international, (crazy copy, redelijk eigenzinnig, skateboard, laptop) De rode denker TAGS: studenten, denker, studeren, gras, grasplein (smart phone)
Diensten - Centrale bibliotheek TAGS: bib, bibliotheek, balie, studenten, international, studeren, massablok, VUBlokt, boek, boeken, leeszaal, studentenvoorziening, lezen Diensten - Crazy Copy Center TAGS: crazy copy center, betalen, printen, kopiëren, studenten, international, kassa (esplanade) Campus Etterbeek 2017 - Fietsenstallingen TAGS: esplanade, fietsenstaling, fiets, studenten, international, Gebouw D TAGS: studenten, trappen, international (infopunt) Brussel - Elsene cimetière TAGS: El Café, Elsene, Cimetière, ontspanning, studenten, international (bus) Brussel – Etterbeek stationsbuurt TAGS: studenten (station, studeren, trein) (tram, tramhalte, Generaal Jaqueslaan) Campus Etterbeek 2017 - gebouw B en C TAGS: gebouw B, gebouw C, international, studenten Campus Etterbeek 2017 - gebouw F en G TAGS: campusleven, gebouw F, gebouw G, trappen, studeren, studenten, international Campus Etterbeek 2017 - Graffitimuur TAGS: graffiti, studenten (selfie, smartphone, week van verlichting) Campus Etterbeek 2017 - Grasplein TAGS: campusleven, gras, grasplein, zomer, studenten (gebouw D, smart phone, hoofddoek, luchtfoto) Campus Etterbeek 2017 - Kazernes TAGS: Generaal-Jaqueslaan, kazernes, (hoofddoek, sport) Campus Etterbeek 2017 – Luchtfoto TAGS: luchtfoto, panorama (gras, grasplein, zomer, gebouw M, serre, dak, terras, opinio, esplanade, skyline, rectoraat, kazernes, studenten Campus Etterbeek 2017 - Tussen de campuskoten TAGS: studenten, studeren, campuskoten, wandelen
Diensten - Centrale bibliotheek (map bestaat al – zie hierboven) TAGS: bib, bibliotheek, international, studentenvoorziening, studenten (laptop, gebouw C) Diensten - Infopunt TAGS: infopunt, gebouw D, studenten (international) Diensten - IRMO TAGS: pleinlaan, IRMO, international, balie, studenten, inschrijven Diensten - Sportdienst TAGS: sport, sportdienst, studenten, studentenvoorziening, lichamelijke opvoeding, LK (dans, fitness, basket) Diensten - Standaard bookshop TAGS: boeken, betalen, international, cursus, campusleven, studenten Gebouw M TAGS: campusleven, gebouw M, building M, rectoraat, (vijver, nijlgans, hoofddoek, fiets, smart phone) Kringleven TAGS: kringleven, kringen, studentenvereniging, international, studenten (klak, bier, pintje) Lounge Bar 1050 TAGS: loungebar, studenten, lounge bar 1050, international Nieuwelaan 2017 TAGS: kot, Nieuwelaan, studentenvoorziening, (student, bed, bureau, huisdieren, valies, keuken, skateboard, laptop) Opinio 2017 TAGS: opinio, terras, international, studenten (selfie, smartphone) Restaurant TAGS: studentenvoorziening, resto, restaurant, lunch, international, studenten (terras, hoofddoek, soep, fruit, esplanade) SAC Tags: SAC, studentenadministratie, inschrijven Serre Tags: serre (gebouw M) STOA TAGS: international, studenten, STOA
Studiebegeleidingscentrum TAGS: SBC, studeren, studenten, studiebegeleiding (laptop, smartphone, massablok) U-Residence TAGS: studenten, U-Residence
Tips - Vervang je text eens door een video of beeld, wees creatief. - Laat de banners die aangemaakt zijn staan, deze hebben
marketingdoeleinden. En komen jouw opleiding alleen maar ten goede
- Plaats geen URL’s in de text, maar stop die als link achter een woord.
