Skollyftet: Skapa tidslinjer med TimelineJS

<figure style="float: right;"><IMG SRC="http://farm8.staticflickr.com/7005/6827397725_19a3e6c2b9_n.jpg" NAME="Grandfather Watch" WIDTH=320 HEIGHT=320 BORDER=0><figcaption style="font-size: small; text-align: center;">"Grandfather Watch" av <a href="http://www.flickr.com/photos/fiddleoak/6827397725/in/photostream/">fiddle oak</a></figcaption></figure>

<P>Tid. Något det enklaste, och samtidigt mest komplexa.</p>

<P>Skeenden över tid är inte alltid det enklaste att förklara; att visa. I allmänhet är det ofta hjälpsamt att kunna illustrera något svårgreppbart med bild eller schema, för att ändå i någon mån kunna konkretisera det abstrakta. I sammanhanget tid skulle det kunna handla om en <I>tidslinje</I>.</P>

<P>Tyvärr kan det ofta te sig förvånansvärt svårt, att med datorns hjälp skapa en tidslinje. En av de bättre verktygen jag nyttjat, är <A HREF="http://www.simile-widgets.org/timeline/">SIMILE</A>[1].

Även om resultaten är tämligen svårslagna, är det inte det enklaste att använda. Nyligen fann jag dock ett alternativ, med vars hjälp man inte bara kan göra nästan lika snygga och illustrativa tidslinjer, utan som dessutom är synnerligen lättanvänd. <A HREF="http://timeline.verite.co/">TimelineJS</A>.</P>

<P >TimelineJS är fritt att använda (cc-by3.0). Källkoden finns också tillgänglig <A HREF="https://github.com/VeriteCo/TimelineJS">på github</A>. Skulle tjänsten försvinna i framtiden vore

det alltså enkelt att lägga upp det på egen server. (Eller redan nu, om man är lagt åt det hållet.) Till fördelarna med TimelineJS hör också att den, till skillnad från SIMILE[2], kan användas med system som smarttelefoner och surfplattor.</P>

<P >Så... Hur gör man? Se det förklarat i ett <A HREF="http://www.youtube.com/watch?v=vAWbm4gF9lU">youtubeklipp</A> på 2min32s, eller gör så här:</P>

    <LI><P ><B>Skapa ett google docs kalkylark</B>  efter följande mall: <A HREF="https://drive.google.com/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&amp;mode=public">TimelineJS Template</A>.<BR>(Du måste inte använda mallen. Men det underlättar. Så varför inte?)</P>

    <LI><P ><B>Fyll i lite data.</B>

    <figure style="float: right;"><IMG SRC="https://dl.dropboxusercontent.com/u/7999671/dont_delete/tidslinjer_timelineJS/skollyftet/timelinejs_gspreadsheetURL.png" NAME="Klistra in Google Spreadsheets URL" WIDTH=398 HEIGHT=188 BORDER=0></figure>

    Exempelvis så här: <A HREF="https://docs.google.com/spreadsheet/pub?key=0AkPbQ5KJaBe3dHJ5Z1BuNDFLNDNhb0tSdnQxZmIwV2c&amp;output=html">Skollyftet, exempel (Eyjafjallajökull)</A>.<BR>Ifall exemplet är svårtydbart, fokusera bara på två av de tre första kolumnerna, <I>Start Date</I> och <I>Headline</I>. (Allt annat är valbart; startdatum och rubrik måste däremot alltid anges.) Övrigt som är ifyllt handlar egentligen mest om länkar till bilder som används.

    <LI><P ><B>Publicera kalkylarket</B> på webben. <BR>File → Publish to the Web → Kopiera länken längst ner.</P>

    <LI><P >Länken du nyss kopierade? Öppna upp sidan <A HREF="http://timeline.verite.co/">http://timeline.verite.co/</A> och skumma ner till Step 3. <B>Klistra in koden vid “Google

    Spreadsheets URL”</B>. Tryck på enter, och du borde se ett resultat likt nedanstående:</P>

<P >Som du ser ovan är du inte begränsad till att använda bilder för att göra tidslinjerna mer levande. Det går också bra att ange länkar till youtube-videon eller google maps -länkar. (Tycker du inte om hur kartan ser ut? Inga problem. Det går att justera. Se <I>More options</I> vid Step 3.)</P>

<P >På sidan hittar du den källkod som möjliggör dig att bädda in tidslinjen i stort sett var som helst.

Som jag gjort i det här inlägget. Du hittar också länken ("Link to preview") ifall du bara vill visa tidslinjen skilt för sig.</P>

<P >För övrigt behöver du inte skriva in data till tidslinjen i just google drive --- det går också att

använda andra källor. <B>Storify</B>, t ex. <A HREF="http://embed.verite.co/timeline/?source=http://storify.com/Anna_Kaya/v-r-dromskola&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650">Här

är en tidslinje</A> som utgår ifrån Anna Kayas <A HREF="http://storify.com/Anna_Kaya/v-r-dromskola">story</A>, “Vår drömskola”.</P>

<P >Fast jag vill komma tillbaka till detta att du kan skriva in källdatan i google drive. För jag undrar om du tänkte på möjligheterna det för med sig. Som t ex att <B>flera elever, ja varför inte hela klassen, samtidigt kan arbeta med att skriva in data för tidslinjen?</B> Eller möjligheten att skapa <B>ett formulär</B> genom vilket man fyller i informationen?</P>

<P ><B>Vad sägs --- ska vi inte skapa en tidslinje tillsammans?</B> Nu på direkten? <A HREF="https://docs.google.com/forms/d/10u0LBQsarS9VEp1YnUOhagfr7JyNmVFdDYueeZbddOM/viewform">Här

är ett formulär.</A> Då det här inlägget publiceras finns bara två inlägg på tidslinjen. Hans Georg Gadamers livslängd och Gustav Vasas regeringstid. <I>Vad vill </I><I><B>du</B></I><I> lägga till?</I></P>

    <LI><P ><A HREF="https://docs.google.com/forms/d/10u0LBQsarS9VEp1YnUOhagfr7JyNmVFdDYueeZbddOM/viewform">Till formuläret!</A></P>

    <LI><P ><A HREF="http://embed.verite.co/timeline/?source=0AkPbQ5KJaBe3dHFfbmRzVUQ2eUd6YkJLbVRmZGtRbEE&amp;font=Bevan-PotanoSans&amp;maptype=toner&amp;lang=en&amp;height=650">Se den tidslinje</A> ni läsare tillsammans skapat.</P>

<P >Så... frågan som återstår nu är väl egentligen bara: vilka tidslinjer ska du börja med att skapa

för din undervisning? Berätta gärna i kommentarerna!</P>

<p>Kristian Niemi,<br />

universitetsadjunkt<br />

gymnasielärare i religion och filosofi</p>

<p>Twitter : <a href="http://twitter.com/krissen">@krissen</a><br />

Mera : <a href="http://about.me/krissen">about.me/krissen</a></p>

<P >[1] Här kan du se en tidslinje jag gjort med SIMILE: <A HREF="https://sites.google.com/site/tidslinjerna/material/tidslinjer/religion/hinduism/oeversikt">Hinduism, historisk översikt</A>.</P>

<P >[2] SIMILEs tidslinjer visas visserligen på exempelvis en smartphone, men det går inte att

bläddra i den.</P>