Themahandleiding De 8 Stappen Van toepassingen tot digitaal klaslokaal

Transcriptie

1 Fronter 91 Themahandleiding De 8 Stappen Van toepassingen tot digitaal klaslokaal Dit document is gemaakt door Fronter Ltd fronter.com. Het document mag alleen gekopieerd of digitaal verspreid worden volgens contract of in overeenstemming met Wat is er nieuw in deze handleiding: Dit is een nieuwe handleiding om Fronter te organiseren. Introductie... 2 Over deze handleiding... 2 Het idee... 3 Stap I: Maak een sjabloonstructuur en een Homepage sjabloon... 6 Stap II: Een Homepage sjabloon maken... 6 (1) Afbeelding als paginahoofd... 7 (2) Introductietekst... 8 (3) De verticale lijn (scheiding) (4) Het navigatiegebied Icoontjes Stap III: Kopieer het sjabloon naar het vaklokaal Stap IV: Pas het sjabloon aan Stap V: Kopieer het sjabloon in het vaklokaal Stap VI: Links naar objecten Stap VII: Snelle navigatie tussen eenheden Stap VIII: De final touch Twee handige tips over afbeeldinglinks Afbeelding in een Afbeelding container Afbeelding in een tekst container Version control

2 Introductie Dit document geeft enkele ideeën om ruimtes in Fronter in te richten. We zullen de huidige focus op de toepassingen in de ruimte wat verplaatsen, zodat niet de toepassingen maar de navigatie voorop staat. Wat de studenten moeten zien en doen is direct zichtbaar. Hierdoor is het navigeren door de studenten makkelijker te maken. Sommige van de hier gebruikte technieken zijn basistechnieken, terwijl andere technieken wat ingewikkelder zullen zijn. Sommige suggesties zal je zelf moeten uitvoeren; Fronter Support zal je hier waarschijnlijk niet mee kunnen helpen. Dit zal op de betreffende plaatsen in het document aangegeven staan. Fronter wordt continu verder ontwikkeld en verbeterd. Het is daardoor mogelijk dat er verschillen bestaan tussen de handleiding en de applicatie. Deze handleiding is geschreven voor Fronter versie 91. We hopen dat deze handleiding u goed op weg helpt. Oslo, februari 2009 Steinar Hov/Ingun Vaglid Over deze handleiding Gedurende de vele jaren van het geven van trainingen in ontelbaar veel plaatsen en voor veel verschillende groepen, realiseerden we ons dat het navigeren door Fronter vaak veel korter en gestructureerd kan. Dit document zal wat ideeën geven over hoe dit kan worden georganiseerd en gepland. In de voorbeelden in dit document zullen een aantal icoontjes worden gebruikt. Deze zijn te downloaden op De icoontjes worden hier het Crystal project genoemd. Voel je vrij andere benaderingen uit te proberen naar aanleiding van deze handleiding en vind zo je eigen stijl! 2

3 Het idee We laten hier eerst het eindresultaat zien om de basisidee achter de structuur uit te kunnen leggen: Dit voorbeeld laat een vaklokaal voor Engels, jaar 7 zien. Op dit moment wordt de unit Autobiografieën behandeld. Alle normale toepassingen in de linker menubalk zijn verborgen onder de Archief toepassing. Het Archief is echter ook verborgen gemaakt voor de studenten. Zoals je kan zien hebben we de Homepage toepassing in de ruimte gebruikt en alle opties waar de studenten toegang toe hebben staan aan de rechter kant van de pagina. We hebben een pagina gemaakt met informatie aan de linker kant, gescheiden door een verticale lijn van het navigatiegebied aan de rechter kant. Alle opdrachten, teksten die geprint, ingevuld, ingeleverd of gelezen moeten worden, staan in het navigatiegebied. Je ziet ook dat we icoontjes gebruiken om de opdrachten en links naar bronnen te illustreren. Op deze manier zijn de studenten meer gericht op wat moet ik doen in plaats van hoe moet ik het doen. Nu worden een aantal voorbeelden uit het navigatiegebied uitgewerkt. De studenten krijgen een idee van een autobiografie door eerst een afbeelding van een mindmap te bekijken: 3

4 Je moet deze afbeelding eerst in Fronter uploaden. Daarna kan je een interne link gebruiken om, zoals in dit voorbeeld, de studenten snel toegang te geven tot het document. Het volgende voorbeeld is ongeveer gelijk aan de vorige: een tekstbestand is geupload en daarna is er een interne link naar gemaakt: 4

5 Je kan ook een artikel maken met een embedded video en daar intern naar linken: Verder in de lijst in het navigatiegebied staan links naar verschillende objecten: forums, inlevermappen, toetsen, mappen enz. Belangrijk: In dit document zie je dat we linken naar objecten: documenten, afbeeldingen, forums, toetsen, mappen, externe bronnen (websites)... Wanneer we willen dat studenten makkelijk toegang hebben tot een object linken we daar intern naar. Dit werkt ook wanneer het document is ge-upload in een verborgen map. Wanneer je intern linkt naar de verborgen map zelf zullen de studenten alle bestanden in deze map zien maar hebben ze er geen toegang toe! Als een inlevermap is gemaakt als een submap in een verborgen map zullen de studenten geen recht hebben een bestand in te leveren. Daarom: Stop werk van studenten niet in verborgen mappen. Gebruik verborgen mappen wanneer je studenten toegang wilt geven tot losse objecten zoals bestanden, forums, toetsen (door er intern naar te linken). 5

6 Stap I: Maak een sjabloonstructuur en een Homepage sjabloon Om de opzet van de gemaakte ruimte vaker te kunnen gebruiken maak je, bijvoorbeeld in de personeelsruimte, een mappenstructuur (1). Dit sjabloon kan dan vervolgens worden gekopieerd naar de vakruimtes waar alleen de gaten ingevuld moeten worden. Je maakt dus je eigen sjabloon voor een vaklokaal welke vervolgens voor elk vak, elke hoofdstuk enz. kan worden gekopieerd: Zoals je kan zien hebben de mappen allemaal en bepaalde inhoud: documenten, forums, inlevermappen, toetsen etc. Daarnaast hebben we een lege Pagina (2) gemaakt, welke gebruikt kan worden als een sjabloon voor de Homepage in een later stadium. Stap II: Een Homepage sjabloon maken Goed om te weten Een monitor met normale resolutie zal horizontaal 1024 pixels bij 768 pixels vertikaal hebben. De linker menubalk in een Fronterruimte is 200 pixels breed terwijl de hoofdbalken en statusbalk bijna 150 pixels nodig hebben. Kortom, je houd een ruimte van 800 x 600 (b x h) pixels over. Hou dit in gedachten wanneer je het sjabloon maakt om zo een horizontale scrollbar te voorkomen. Let op: Dit is slechts een voorbeeld creëer je eigen stijl! 6

7 Hier zie je het sjabloon met een aantal containers die min of meer leeg zijn klaargezet: (1) Wanneer je een afbeelding als paginahoofd wil gebruiken, kan je deze hier invoegen. (2) De introductietekst wordt geschreven in de linker sectie. (3) Dit is de verticale lijn die de buitenste twee containers scheidt. (4) Dit is het navigatiegebied. (1) Afbeelding als paginahoofd Wanneer je een banner bovenaan de pagina wilt hebben zoals in ons voorbeeld, voeg die Afbeeldingen container bovenaan toe: 7

8 (2) Introductietekst We hebben ervoor gekozen een informatiegebied te plaatsen aan de linker kant: We willen dat de informatie een kop met een afbeelding heeft met daaronder de introductietekst. Dit doen we door een tabel te maken met de volgende instellingen: 8

9 Zoals je kan zien is de breedte van de tabel ingesteld op 400 pixels. Door Rand dikte = 0 te selecteren maak je de tabel onzichtbaar. Door een tabel te gebruiken worden alle objecten op een voorspelbare manier weergegeven. In dit scherm wordt de eerste cel gesplitst (rechter muisklik in de cel): We kunnen nu de celbreedte aanpassen (rechter muisklik in de cel): 9

10 We kunnen ook een achtergrondkleur selecteren: (3) De verticale lijn (scheiding) In een lijncontainer selecteren we een verticale lijn. De dikte van de lijn is normaal 1-2 pixels en de kleur wordt geselecteerd in een kleurenpalet: (4) Het navigatiegebied In het navigatiegebied maken we een tabel met twee kolommen en laten we zeggen, 14 rijen. In de linker kolom voegen we de icoontjes van Everaldo in. In de rechter kolom plaatsen we alle links: 10

11 De eigenschappen van de tabel zijn: 11

12 De breedte van de linker kolom kan worden ingesteld in de eerste cel: We gaan de 32 x 32 pixels icoontjes gebruiken, dus stellen we de kolombreedte in op 40 pixels. We houden dan 310 pixels over voor de rechter kolom. Let op: Met het maken van de tabel willen we alle relevante opdrachten voor de studenten (start, lees, maak, lever in, doe de toets...) klaarzetten. Het is makkelijk om in een later stadium ongewenste rijen te verwijderen. Anders moet je later missende rijen toevoegen, icoontjes uploaden enz. Icoontjes Zoals eerder aangegeven voegen we verschillende icoontjes toe om te illustreren wat er moet worden gedaan. Hier onder hebben we een map gemaakt, Icons, in de Personeelsruimte en de icoontjes van hie geupload. Zoals je kan zien hebben we de icoontjes allemaal een andere naam gegeven zodat ze later makkelijker zijn terug te vinden. 12

13 Let op: Wanneer we een folder voor icoontjes en afbeeldingen maken, vinken we meestal de optie Zet thumbnail weergave aan aan om zo een beter overzicht te krijgen van de afbeeldingen. Stap III: Kopieer het sjabloon naar het vaklokaal We gaan er in dit voorbeeld vanuit dat het sjabloon en alle mappen zijn aangemaakt in de personeelskamer. Wanneer een vakleerkracht dit model wil gebruiken voor zijn of haar vak, moet de hele structuur worden gekopieerd naar het vaklokaal. Let wel op dat ook de Icons-map kopiëren. 13

14 Nadat we de mappen hebben geselecteerd klikken we op Kopiëren. In het drop-down menu selecteren de het vaklokaal in de lijst: Tot slot selecteren we Archief (verborgen) (1) in de toepassingenlijst en dan de doelmap zelf (2): 14

15 Stap IV: Pas het sjabloon aan De icoontjes en de sjabloonstructuur met alle mappen en Homepagesjabloon zijn nu gekopieerd naar het vaklokaal. Het Homepagesjabloon moet nu worden aangepast zodat dit past bij het relevante vak. We voegen de icoontjes die we willen gebruiken toe in het navigatiegebied: Wanneer je de 6 stappen zoals hier boven volgt door op deze punten te klikken, wordt het geselecteerde icoontje (Informatie) in de cel ingevoegd. 15

16 Dit moet worden herhaald voor alle relevante cellen in de tabel. Wanneer je rijen wilt verwijderen (of toevoegen) in de tabel, rechter muisklik je in een rij en selecteer je Rij in het drop-down menu. 16

17 Alle icoontjes zijn nu geupload en het navigatiegebied is klaar als sjabloon voor dit vaklokaal: Stap V: Kopieer het sjabloon in het vaklokaal De Bronnen voor vaklokalen map kan nu worden gekopieerd voor elk onderwerp/hoofdstuk/thema at we willen voorbereiden: 17

18 Selecteer de map, klik Kopiëren en selecteer dan de doelmap: Een kopie met alle onderliggende mappen en de Homepage is nu gemaakt: We herhalen deze procedure en passen achteraf de namen van de mappen aan zoals in onderstaand voorbeeld: 18

19 Stap VI: Links naar objecten We hebben nu een aantal mappen zonder inhoud. De volgende stap is het uploaden van bestanden, het maken van inlevermappen, toetsen, forums enz. in de daarvoor bestemde mappen voor elke eenheid (hier: unit). Wanneer dit is gedaan kunnen we links gaan maken naar de objecten om de navigatie voor studenten makkelijk te maken. Links naar Documenten, afbeeldingen, toetsen, forums Laten we er vanuit gaan dat de afbeelding, Ideas for my autobiography, is geupload naar de map Afbeeldingen (hier: Images). We willen nu linken naar deze afbeelding in het navigatiegebied. 19

20 In de cel met de titel Start hier tikken we de tekst, Ideas for my autobiography, en selecteren de tekst. Gebruik de interne link invoegen toepassing en navigeer vervolgens naar de juiste map: Na het selecteren van Images map zie je helemaal onderaan het venster het bestand staan: Let er op dat we de afbeelding in een nieuw venster willen openen en zet daarom een vinkje in het hokje In nieuw venster openen. 20

21 Zo zullen de studenten het zien: Dezelfde handelingen kunnen worden gebruikt om alle bestanden in Fronter snel en makkelijk beschikbaar te maken. Links naar Maken, Inleveren, Portfolio (let op: wordt niet ondersteund door Fronter) Zoals eerder werd gemeld kan een interne link naar verschillende soorten bestanden worden gemaakt. Maar soms willen we onze eigen snelkoppelingen maken. Deze snelkoppelingen worden niet door Fronter ondersteund en er is geen garantie dat ze voor altijd zullen werken doordat de Frontercode kan veranderen. Dit betekent dat je eventuele problemen zelf moet oplossen, maar laat je niet afschrikken. Inleveren: Wanneer een inlevermap is gemaakt kunnen we met de rechter muisknop klikken op Bestand uploaden en selecteer vervolgens Snelkoppeling kopiëren/koppelingslocatie kopiëren: 21

22 In het navigatiegebied tikken we de tekst (in dit geval: Autobiography help sheet) en klikken dan Invoegen/wijzigen link: We plakken de link vervolgens in het veld om een link aan te maken, zoals hierboven. We vinken in dit geval niet het hokje aan om de link in een nieuw venster te openen. De studenten hebben nu snel toegang tot het Bestand uploaden venster één klik op de link en de student is klaar om een bestand te uploaden: 22

23 Een pagina maken De inhoud van een map kan worden aangepast zoals hieronder te zien is. In dit geval kunnen alleen Pagina s worden gemaakt in de map Students work (pages): We herhalen nu de procedure zoals deze is beschreven bij inlevermappen (zie pagina 21) door met de rechter muisknop op de link te klikken en deze te kopiëren: 23

24 Wanneer deze link wordt toegevoegd aan het navigatiegebied, worden de studenten doorgestuurd naar het scherm waar een nieuwe pagina kan worden gemaakt: Let op! Wanneer studenten toegang moeten hebben tot meerdere bestanden in een map, moeten de het een Gewone map zijn en GEEN Verborgen map. Portfolio Het Portfolio is een toepassing in de linker menubalk. We kunnen ook de snelkoppeling naar deze toepassing kopiëren zoals hierboven: Deze link kan dan worden geplakt in het invoegen/wijzigen link venster. Stap VII: Snelle navigatie tussen eenheden De voorgaande stappen beschreven het maken van een mappenstructuur waarin alle bronnen zijn opgeslagen en ieder vak/hoofdstuk/thema een pagina heeft. Om deze Pagina s beschikbaar te maken aan de studenten kunnen we snelkoppelingen maken naar de pagina s. We maken nu gebruik van de Lijst Toepassing in Fronter of maken een Artikel wanneer we grafische elementen naast de links willen hebben. Hieronder demonstreren we hoe een Artikel gebruikt kan worden voor snelle navigatie: 24

25 Het artikel is gemaakt met een tekstcontainer en ook hier maken we gebruik van een tabel (in dit geval 3 kolommen en 4 rijen) met aangepaste achtergrondkleuren en icoontjes. De eerste eenheid is beschikbaar voor de studenten we hebben een interne link naar de pagina gemaakt. Op deze manier heeft een leerkracht de volledige controle. De laatste stap is het maken van een link naar dit Artikel en deze in het linker menu toe te voegen Rechter muisklik op het artikel en kopieer de URL nogmaals (Snelkoppeling kopiëren/koppelingslocatie kopiëren): 25

26 We gaan daarna de Toepassingen Aanpassen: We selecteren Nieuwe toepassing en klikken daarna Zelf te definiëren knop: Hier: (1) geven we de link een titel (2) plakken we de snelkoppeling 26

27 (3) maken we de link zichtbaar voor iedereen (4) en verplaatsen we de link naar de gewenste positie Het volgende is nu te zien: Stap VIII: De final touch Wanneer een student de ruimte binnenkomt ziet hij als eerst een Homepage, maar welke? In dit voorbeeld hebben we meerdere kandidaat pagina s gemaakt, voor elk vak/thema/eenheid één. Om van een pagina een kandidaat pagina te maken moeten we het hokje bij Voeg aan pagina lijst toe aanvinken: De lijst met kandidaat pagina s kan je bekijken en de pagina die als Homepage moet verschijnen wordt als volgt geselecteerd: (1) Selecteer de Archief toepassing 27

28 (2) Klik Weergave (3) Vink het Informatie hokje aan (4) Gebruik de pijltjes om de gewenste Pagina naar boven te verplaatsen (de Homepage) Op deze manier kan de leerkracht regelen welke pagina (vak/thema/eenheid) zichtbaar is voor de studenten, terwijl de navigatieopties in de linker menubalk snelle toegang tot andere pagina s geven. Twee handige tips over afbeeldinglinks Je kan een afbeelding zowel toevoegen in een Afbeeldingen container als in een tekstcontainer. De afbeelding kan bij beide methodes via bijvoorbeeld een interne link of een externe link klikbaar gemaakt worden. Afbeelding in een Afbeelding container In een container voor afbeeldingen klik je simpelweg op Bewerk eigenschappen voor de afbeelding: 28

29 Zowel Externe link (1) als Interne link (2) zijn hier beschikbaar: Afbeelding in een tekst container In een tekst container moet je eerst de afbeelding selecteren en dan één van de volgende knoppen aanklikken: (1) Externe link of (2) Interne link: 29

30 Om te voorkomen dat er een blauwe rand om de afbeelding verschijnt, klik met de rechter muisknop om de afbeelding en selecteer Afbeeldings eigenschappen: Stel Rand = 0 in om deze onzichtbaar te maken. 30

31 Version control Version Date Description Person responsible From tools to Steinar Hov subject focus Added important Steinar Hov note on hidden folders 91-NL Vertaling laatste versie Mark Schiedon QA Review Date Approved by Comments Ingun Vaglid Reviewed and corrected Ingun Vaglid Approved 31