Onderwijstechnologie/Voorbeelden onderwijstechnologische realisaties/Rapport bleniti brewgreste 2012-2013: verschil tussen versies
Verwijderde inhoud Toegevoegde inhoud
Regel 1.187:
- de leerkracht heeft een apart werkblad, die hij op onzichtbaar voor zijn leerlingen kan zetten. Hier kan hij evaluatiemogelijkheden inpassen, alsook extra notities.
Technische functies (zie 'extra' einde deel 5)
- Web 2.0 met mogelijkheid tot embedden (de tool moet de mogelijkheid geven om hetzij rechtstreeks filmpjes van YouTube of een ander programma te downloaden, hetzij een document, foto’s of ander materiaal up te loaden van je eigen computer)
- responsive design is een onontbeerlijke functie bij het vergelijken van tijdsbalken met verschillende thema’s
Regel 1.202:
Een tijdlijn is een visuele tool, die theorie in een overzichtelijke alsook beknopte manier weergeeft. Visuele functies, zoals het kiezen van een kleur voor een tijdsbalk, het kiezen van een layout voor de grafiek van je tijdsbalk, het invoegen van icoontjes rond een bepaald thema, het personaliseren van een achtergrond en banner, maken het geheel niet alleen mooier, maar geeft ook een duidelijker overzicht van de verschillende thema’s en gebeurtenissen. Het feit dat het de leerling is die deze visuele aspecten kiest, is positief om de leerstof op een gepersonaliseerde manier voor te stellen, en op die manier de leerstof reeds op een visuele wijze te verkennen.
Maar overdaad schaadt. Jongeren zijn door de flitsende vormgeving van sociale media op dit vlak misschien een beetje verwend en stellen hun verwachtingen hoog. Anderzijds lezen we toch adviezen die waarschuwen voor teveel afleiding wat een negatieve invloed op de leerresultaten kan hebben.
EXTRA: Technische stappen ter creatie van onze tool “PARALINES”
Als niet-informatici is het niet vanzelfsprekend om de uiteindelijke uitvoering van onze tool te realiseren. Uiteraard kunnen we met enkele applicaties – zoals ligne du temps, tiki toki, preceden en zelfs capzels – werken met tijdsbalken via ICT in de klas.
Ons uiteindelijke doelstelling blijft echter het implementeren van parallelle tijdsbalken waar alle gemaakte tijdsbalken, van verschillende auteurs en verschillende thema’s (lees: onderwijzende vakken) op een selectieve manier visueel naast elkaar gepresenteerd kan worden.
Concreet voorbeeld: ik wil de tijdsbalk van Jan uit het 4de jaar over de uitvinding van de auto (vak geschiedenis) kunnen vergelijken met de tijdsbalk van Greet over Technologische communicatiemiddelen (vak Cultuurwetenschappen), etc.
Technische stappen die we kunnen ondernemen :
- of wij vragen aan de auteur van de software/website of hij zijn tool kan ‘upgraden’
- of wij creëren zelf een applicatie die aan onze normen voldoet
Dat laatste is in praktijk (nog) niet mogelijk, maar dankzij deze opdracht hebben we ons wel wat kunnen verdiepen in deze technische kennis.
Bij het zoeken naar bestaande software, hebben wij begrepen dat we verschillende stappen moeten volgen, om te komen tot de uiteindelijke applicatie.
Op zoek naar Open Source Software
Op http://sourceforge.net/ vonden we wat we moesten hebben: een website waar je free open software kan vinden, maken en publiceren.
Wij hebben een website nodig, die via een open source kan aangemaakt worden.
Websitebaker
Een interessante website-maker is “Websitebaker”, die volledig open source is, en een PHP-based content management- systeem is. PHP betekent Hypertext Preprocessor en is een scripttaal, die bedoeld is om op webservers dynamische webpagina's te creëren. Aanvankelijk stonden de letters PHP voor Personal Home Page). Sinds PHP 3.0 is de betekent het eerder Hypertext Preprocessor. Deze naam geeft aan waar de taal meestal voor gebruikt wordt: informatie verwerken tot hypertext (meestal HyperText Markup Language (HTML) en Extensible HyperText Markup Language (XHTML).
[Bron: wikimedia.nl.org]
De licentie is van websitebaker is GNU General Public License version 2.0 (GPLv2).
WebsiteBaker profileert zich als een gebruiksvriendelijke manier om websites te maken. Het is een gratis, eenvoudig te bedienen, veilig, flexibel en uitbreidbaar open source content management system (CMS). [Bron: www.websitebaker.org]
Het feit dat deze website een tool beschikt waar je extra applicaties kunt aan toevoegen (lees: uitbreidbaarheid), maakt het interessant. Je kan bestaande templates gebruiken maar dus ook extra toepassingen toevoegen.
Eigen modules maken wordt ondersteund via de interface van de Websitebaker API.
Nieuwe templates maken kan met (X)HTML, CSS en jQuery, die zoekmachinevriendelijke, toegankelijke sites beloven volgens de richtlijnen van W3C.
Positieve punten
- Gebuiksvriendelijk admin panel
- mogelijkheid tot WYSIWYG-editors voor het beheer (niet verplicht om met html-codes te werken en dus een aanrader voor beginners)
- Mogelijkheid voor meertalige websites
- Overzichtelijk beheer van bestanden en media
- Aanpasbaar door het eenvoudige template-systeem
- Uitbreidbaar dankzij modules, droplets & snippets
- Op groepen gebaseerde toegangsrechten
Filezilla
Een volgende stap wordt dan een open source software te vinden die toelaat bestanden te bewaren en up te loaden op een snelle en veilige manier:
FileZilla is een opensource-FTP-programma voor Windows, Mac, Linux en FreeBSD. Met FileZilla is het mogelijk over meerdere verbindingen bestanden naar een FTP-server te sturen en op te halen, waardoor men sneller bestanden kan uploaden en/of downloaden.
FileZilla biedt functionaliteit die voor webmasters nuttig kan zijn. Zo is er ondersteuning voor beveiligde verbindingen (SFTP over SSH en FTP over SSL/TLS). Ook kan er met wachtrijen en proxyservers gewerkt worden. Er is ook een mogelijkheid om de upload- en downloadsnelheden te begrenzen.
FileZilla werd opgestart in januari 2001 door Tim Kosse en twee klasgenoten als een opensourceproject.De belangrijkste vernieuwing in versie 3.3 is de ondersteuning voor tabbladen.
[Bron: https://wikimedia.org en https://wiki.filezilla-project.org]
Als we dit programma ook effectief downloaden, is het mogelijk de nodige bestanden op te halen, mits toegang tot een host-server. Het blijft echter moeilijk als leek het vakjargon te begrijpen. Ondanks het dowloaden van Filezilla, kregen we maar geen verbinding met de host-server en ook het soort ‘poort’ je nodig had, was onduidelijk, ondanks het lezen van de ‘tutorial’.
Timeline-codecs
Een belangrijke stap is het effectief creëren van de inhoud, en vooral, van de manier van opstellen van de tijdsbalken.
Er bestaan open source software die toelaten om html-codes over te nemen en/of te wijzigen bij het creëren van tijdsbalken.
Op de website http://code.google.com/p/simile-widgets/wiki/Timeline_GettingStarted vonden we zeer interessante tools die een aanzet geven tot het creëren van “timelines”, zijnde html-codes die je kan aanpassen naargelang je soort applicatie die je wil creëren.
Wederom ontbreekt het ons hier aan technische kennis om deze html-codes effectief te gaan aanpassen aan ons doel.
Onderstaand de uitleg bij het creëren van eenvoudige en meer gedifferentieerde tijdsbalken. Mochten wij deze tool effectief gaan uitbrengen, zullen wij starten met onderstaande stappen:
Indien onderstaande tekst niet leesbaar is, vindt u de informatie op deze link: http://code.google.com/p/simile-widgets/wiki/Timeline_GettingStarted
Timeline_GettingStarted
Developers start here... 5 simple steps to creating your first Timeline
Getting Started
Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.
Note
This tutorial has been partially updated for use with Timeline version 2.x. The screen shots are from Timeline version 1, so your Timeline will look somewhat different.
Examples
In addition to this tutorial, please check out:
The local Timeline example: a Timeline web page and data file that doesn't require a web server to use.
Timeline examples
Step 1. Link to the API
In your HTML code, link to Timeline's Javascript API code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
...
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
...
</head>
<body>
...
</body>
</html>
Step 2. Create a DIV Element
Create a div element in your HTML code, and include a noscript element immediately after it.
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
<noscript>
This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
</noscript>
You should give it an ID as well as fix its height. You can optionally set its borders, this usually makes the timeline look better.
The noscript tag will help out people who have turned off Javascript in their browser. Timeline uses Javascript, which is included in all browsers and enabled by default. It does not use Java.
Step 3. Call Timeline.create()
Add two event handlers, onload and onresize, to the body element:
<body onload="onLoad();" onresize="onResize();">
...
</body>
Then write the following code in a script block or a separate Javascript file:
var tl;
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
Note that we put the code to construct the timeline in the onload handler to ensure that when we start to use Timeline's API, all its code has been loaded. That code creates a horizontal timeline (below) with 2 bands: in the top band, a month spans 100 pixels (approximately, since a month here refers to 30 days while not every month is exactly 30 days long); and in the bottom band, a year spans 200 pixels. The top band takes up 70% of the timeline's height, and the bottom band 30%. '''Note that the two bands scroll independently.'''
(zie foto link website)
Step 4. Keep the bands in sync
To make the two bands scroll in synchrony, and then to make the bottom band highlights the visible time span of the top band, add the following code:
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
Gives you this...
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
If you try to pan one band, the other is scrolled as well. (zie foto link website)
Step 5. Add Events
To add events to the timeline, create a DefaultEventSource as shown below. Then load the event source with data from your XML, JSON or SPARCL event file. See Event attributes and loading event files. It is not hard for developers to add additional loaders for other event file formats. Additional information on event source. Add the following code:
...
var eventSource = new Timeline.DefaultEventSource();
...
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
...
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
...
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); })
Gives you this...
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
The date field parm was added to make sure the timeline starts out showing the events immediately without requiring the user to pan first. If you do not provide a date parm, the default is now. Here is the resulting timeline with 3 events:(zie foto link website)
Take a look at example1.xml. There are 3 types of events:
a duration
an instantaneous event with an imprecise starting time
an instantaneous event with a precise starting time
Click on the events to see how their bubbles are rendered based on the data in the XML file. For the exact format of such XML files, refer to the documentation on event sources. '''Note that loading XML files is only one way in which you can add events to timelines.'''
Step 6. Differentiate the two bands
Looking at the previous timeline, it is obvious that the lower band looks denser, and it will become a lot denser a lot quicker than the upper band should we add more events. Usually, a lower band usually acts as a zoomed-out overview for an upper band and it does not have to show as much detail as the upper band. Change the lower band to be an overview band:
...
overview: true,
Gives you this...
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
The lower band of the timeline below does not show text and its event markers are also smaller.
For more background on how a timeline is initialized including how to override defaults check out Understanding Initialization
== 6. Besluit ==
| |||