Mashups – mit einfachen Techniken zum eigenen Web 2.0

5/14/2018 Mashups – mit einfachen Techniken zum eigenen Web 2.0 - slidepdf.com

http://slidepdf.com/reader/full/mashups-mit-einfachen-techniken-zum-eigenen-web-20 1/8

Mashups – mit einfachen Techniken zum eigenen Web 2.0

Mag. Andreas Hofer

1) Einleitung

Das Web 2.0 ist mit seinen zahlreichen Web-Apps und Diensten wie Flickr, Voki und Bubbl.us nicht

nur ein „Mitmach-Web“, sondern es ist auch „mashable“, was so viel heißt wie „mischbar“. Mischbar

sind dabei Daten, Medien und ganze Web 2.0 Dienste. Der Ausdruck „Mashup“, kommt dabei

ursprünglich aus der Musik (siehe Safran et al. 2011) und bezeichnet dabei den Prozess des Mixen

von zwei ursprünglich unterschiedlichen Songs zu einem neuen Song. Eine ähnliche Verwendung hat

der Begriff auch im Video Bereich, wo diese Mashups oft als Parodien verwendet werden (z.B. Love

Story Trailer mit einer Horror-Film Tonspur gemixt). Da es im Web 2.0 auch viele Video- und

Animationsdienste, wie Prezi und Xtranormal gibt werde ich am Ende des Artikels auch auf das

Thema Video zu sprechen kommen.

Welchen Vorteil bringen solche Mashups im blended learning? Oft findet man als Lehrender zwar

einen Web 2.0 Dienst, der sehr brauchbar für den Einsatz im Unterricht ist, aber dieser bietet nur

einen Teil der gewünschten Funktionalität. Z.B. würde man gerne ein Audiodatei (z.B. Audioboo)

abspielen und dann ein Quiz dazu anhängen. Oder man hat Fotos von einer Klassenfahrt auf einem

Fotodienst und man würde diese gerne auf einer Karte herzeigen. Man hat eine Umfrage im Web

erstellt, die man gerne als Diagramm visualisieren möchte. Oder man hat eine Präsentation erstellt

und möchte dazu einen Feedback-Fragebogen, der eine Skala von 1-10 verwendet, haben. Web 2.0

Dienste, mit denen man Präsentationen erstellen kann gibt es viele, Dienste für Umfragen ebenso.

Mit ein wenig Hintergrundwissen und etwas Glück kann man diese Dienste so mischen wie man sie

braucht. Etwas Glück braucht man, da Web 2.0 Dienste in unterschiedlichem Grad „mashable“ sind

und unter Umständen die eigenen Vorstellungen nicht realisierbar sind.

Obwohl es den Begriff „Mashups“ seit ca. 2005 gibt, wird er selten in Zusammenhang mit blended

learning und elearning verwendet, was wohl an dessen oft recht technische Verwendung liegen

dürfte. Mashups werden oft mit Technologien wie REST und SOAP sowie mit Begriffen wie APIs und

JSON assoziiert. Diese Ansammlung an Akronymen alleine dürfte reichen um auch engagierte

Lehrende vom Thema Mashup abzuschrecken. Wenn man dabei noch etwas tiefer schürft, findet

man sich sehr schnell in Bereichen, denen nur Programmierern vorbehalten sind wieder.

Wenngleich Mashups sehr häufig mit Programmieren in Verbindung gebracht werden, sind oft garkeine Programmier-Kenntnisse nötig um Mashups zu realisieren. Selbst HTML Kenntnisse sind dabei

selten notwendig, obwohl ein wenig Hintergrundwissen hier sehr hilfreich sein kann. Denn das Web

ist nicht nur durch Programmier-Schnittstellen mischbar, sondern auch durch offene Datenformate

wir XML (RSS, KML, etc.), Widgets, embed code und allein schon der Tatsache, dass im Web Dateien

nicht an einer bestimmten Stelle liegen müssen, sondern über URL von jedem beliebigen Web-

Server einbettbar sind.

Mashups können überall dort zu Einsatz kommen wo mehrere Web 2.0 Dienste benötigt werden und

man das Gesamte auf einer Seite darstellen möchte. Dies kann im schulischen Kontext für mehrere

Bereiche relevant sein:



Einfaches Sammeln von verschiedenen Informationsquellen (z.B. Twitter, News, Bookmarks)

an einer Stelle zum Zweck der Übersicht

Online Projekte, bei denen Schüler selbst Content mit unterschiedlichen Medien (Fotos,

Videos, Text, etc.) erstellen

Anreicherung von Content durch interaktive Lern-Aktivitäten (z.B. Video + Quiz,

Präsentation + Feedback)

Filtern von Informationen

Visualisierung von Daten mit Hilfe von Diagrammen, Timelines und Karten

Ein Lernszenarium als praktisches Beispiel: im Englisch-Unterricht wird das Thema „The Monarchy“

behandelt. Dazu gibt es eine Seite auf der Lernplattform Moodle, auf der News Feeds von

verschiedenen News-Websites (BBC, The Guardian, usw.) gefiltert zu diesem Thema gesammelt

werden. Die Kommentare der Schüler/innen werden dabei über ein Twitter-Widget eingebettet und

die Ressourcen (Links zu diversen nützlichen Websites) können über einen social bookmarking

Dienst wie Diigo eingebunden werden, zu denen nicht nur der oder die Lehrende, sondern auch dieSchüler/innen selbst beitragen.

Da dieses Beispiel bereits recht komplex ist möchte ich im Folgenden die Möglichkeiten Mashups zu

erstellen in aufsteigender Komplexität behandeln.

2) Fertige Mashups nutzen

Die einfachste Art Mashups für den Unterricht zu nutzen, ist es fertige Mashups zu verwenden. Web

2.0 Mashups sind ursprünglich als fertig programmierte Schnittstellen zwischen unterschiedlichen

Web-Diensten bekannt geworden. Als erstes Mashup der Geschichte gilt Paul

Rademachers HousingMaps.com (Abbildung), der Craigslist und Google Maps auf seiner Seite

kombiniert um die Suche nach Immobilien zu erleichtern. Statt zwei verschiede Dienste umständlich

verwenden zu müssen, kann der User auf einen Blick sehen wo es z.B. Wohnungen zu welchen

Preisen zu mieten gibt.

http://www.housingmaps.com/





Rademacher entwickelte diese Seite noch bevor Google im Juni 2005 die API für Google Maps

freigab und kann somit als Erfinder von Web Mashups bezeichnet werden. Diese historisch eher

wenig bekannte Tatsache hatte eine enorme Bedeutung für die Entwicklung des WWW. APIs für so

gut wie alle beliebten Web 2.0 Dienste, darunter Flickr, Delicious, YouTube und später Twitter und

Facebook wurden für Programmierer frei gegeben, die auf diese Weise die Funktionalität der

Dienste fast beliebig erweitern konnten. Zudem trugen diese Mashups, wie etwa TwitPic, das Photo-

Sharing und Twitter kombiniert, zur Verbreitung und Popularität der ursprünglichen Dienste bei.

programmableweb.com listet z.B. fast 500 Mashups mit der Photo-Sharing Website Flickr. Noch

häufiger zu finden sind YouTube (600) und Social Media Mashups (allen voran Twitter) mit über 800

Einträgen. An unangefochtener Nummer 1 stehen mit über 2500 Seiten jedoch Karten-Mashups,

allen voran Google Maps.

Viele von den neueren Web 2.0 Diensten sind eigentlich Mashups. Da es z.B. schon sehr viele Photo-

Sharing Websites gibt hat ein zusätzlicher Dienst hier wenig Chancen bekannt zu werden. Da machtes mehr Sinn etwas Außergewöhnliches anzubieten. Bei Fotos wären das das z.B. Animoto, das aus

Fotos von diversen Photo-Sharing Diensten wie Flickr und Picasa animierte Slideshows (Videos) mit

Soundtrack erstellt, oder Cooliris express, mit dem man sehr beindruckende Photo-Walls aus online

Fotoalben erstellen kann.

Mögliche Anwendungen im Blended Learning:

Studium von thematischen Karten (Weltbevölkerung, Tourismus, Geschichte, etc.)

Audioführungen auf Google Maps anhören (geotrio.com)

Animierten Film erstellen mit Fotos von Flickr/Picasa, etc. (animoto.com)

Erstellen einer Diashow oder einer Photo-Wall mit Fotos von Flickr/Picasa (cooliris express)

http://programmableweb.com/





3) Verwendung von Mashup(-fähigen) Diensten

Natürlich findet man nicht immer fertige Mashups für jeden

Zweck. Die einfachste Möglichkeit Mashups selbst zu erstellen,

ist die Verwendung von Mashup-Diensten bzw. Mashup-

fähigen Diensten. Es gibt einige Dienste, die sich sehr gut zum

Erstellen von Mashups eigenen. Dazu gehört z.B. Netvibes.

Netvibes ist als personalisierte „Startseite“ im Web konzipiert

ist, wobei es auch möglich ist Seiten zu erstellen, die man

öffentlich frei gibt. Der Dienst enthält eine Reihe von Widgets,

die man am auf einer Seite platzieren kann: Twitter Feed,

YouTube Videos, Flickr Fotos, Webseiten und RSS-Feeds.

Die Einbindung von anderen Diensten erfolgt bei diesen Mashup-Diensten üblicherweise durch

Widgets RSS Feeds (Links)

URL (Links)

Verwenden kann man solche Dienste für:

Kleinere multimediale Klassenprojekte (Gestaltung einer Website)

Individuelle Portfolios mit Inhalten von diversen Webdiensten

Präsentationen von Events (z.B. Klassenfahrt) mit Text, Fotos und Video

Ressourcen-Seite zu einem bestimmten Thema im Unterricht mit Einleitungstext, Fotos,

Links, RSS Feeds, Diskussion auf Twitter u.ä.

Klassenseite mit Fotogalerie, Google Kalender und Blogeinbindung über RSS Feed

Als Mashup-fähige Dienste, möchte ich solche bezeichnen, die zwar nicht primär für Mashups

konzipiert sind, aber doch eine Reihe von Web 2.0 Diensten und Web-Ressourcen integrieren

können. Dazu gehören vor allem Präsentationsanwendungen wie, Sliderocket und Prezi. In all diese

Dienste lassen sich per URL (Link) multimediale Inhalte wie Fotos und Videos von anderen Seiten

(z.B. YouTube) einbetten.

Ein sehr schönes Beispiel ist, der in den USA sehr beliebte Dienst, Glogster. Bei Glogster lassen sich

Fotos, Videos und Audio einfach per URL auf einer Seite zu einem multimedialen Posterzusammenfügen. Damit lassen sich bereits kleine, aber relativ ansprechende eLearning Projekte

durchführen:

Gestaltung einer Seite zu einem Thema des Unterrichts

Poster-Präsentation

Kurze Bild-Geschichten

Multimediale Geschichten oder Bücher (bei Verlinkung der einzelnen Glogs)

Wenn man die einzelnen Glogs miteinander verlinkt kann man auch größere Projekte wie die

Erstellung von multimedialen Geschichten oder Büchern durchführen. Allerdings wäre es hier

einfacher mit einem sogenannten „Flash-Book“ wie Issuu oder Calaméo zu arbeiten. Bei diesen



Diensten lassen sich Word und PDF Dokumente mit Texten und Bildern hochladen und diese

multimedial mit Video, Audio und Links anreichern. Diese Dienste lassen sich ausgezeichnet für

Digital Storytelling nutzten, wobei die Lernenden selbst unter Verwendung unterschiedlicher

digitaler Medien Geschichten online erzählen können.

Ein sehr schönes Beispiel dazu ist das Projekt „LIingua

LIbrarium“ von Ursula Mulley (http://lingua-

librarium.blogspot.com). Bei diesem Projekt

übersetzten und vertonten Grundschul-Kinder einer

interkulturell sehr gemischten Gruppe eine selbst

geschriebene und illustrierte Geschichte in den

verschiedenen von ihnen gesprochenen Sprachen. Eines

meiner eigenen Projekte wurde ebenfalls mittels

Calaméo realisiert:

http://artofcreativecooking.blogspot.com/ Es handelt sich dabei um ein multimediales Kochbuch,

in dem Texte, Bilder und Videos in funktionaler Weise

integriert sind.

4) Mashups mittles embed codes

Bei den bisherigen Beispielen von Mashups wurde kein HTML Code verwendet. Viele Web 2.0

Dienste bieten einen „Export“ via embed code an. Das bekannteste Beispiel ist wahrscheinlich

YouTube, da viele Lehrende Videos in Moodle oder anderen LMS einbetten. Dazu benötigt man

keine HTML Kenntnisse, da ein einfaches „Copy & Paste“ genügt um den Code in die Website zu

kopieren (Achtung! HTML Modus muss dabei aktiviert sein). Beim embed code kann es sich dabei

um verschiedene HTML Elemente handeln:

<embed>/<object> multimediale Inhalte (zumeist Flash)

<script> Einbindung mittels Javascript (häufig bei Widgets)

<iframe> Einbindung einer ganzen Webseite

Um zwei Dienste miteinander zu verbinden nimmt man ganz einfach

eine Website (Moodle, Blog, Wiki, CMS, etc.) und bettet zwei (odergegebenenfalls auch mehr) Webdienste ein. Dadurch kann man z.B.

eine Listening Comprehension mit Audio und einem Quiz (z.B. Google

Forms) realisieren. Ebenso kann man ein Voki, ein Video oder eine

Mindmap mit einem Feedback Formular oder einer Abstimmung (Polldaddy oder ähnliche Dienste)

kombinieren.

5) Mashups mittels multipler verschachtelter embed codes (Matrjoschka Model)

Viele Webdienste, besonders diejenigen, die auf HTML basieren, lassen sich nicht nur durch einen

embed code „exportieren“, sondern erlauben es auch Content via embed code zu importieren.

Dadurch ergibt sich die Möglichkeit diese Inhalte zu verschachteln, wie russische Matrjoschkas.

http://lingua-librarium.blogspot.com/




http://artofcreativecooking.blogspot.com/







Ein praktisches Beispiel soll das veranschaulichen.

http://london4dhwim.pbworks.com

Beim Projekt „London Wiki“ sollten Schüler mit den Fotos

(auf Picasa) ihrer eignen London-Reise ein Wiki (PBWorks)

erstellen. Die Fotos wurden dabei in einer Google Map

eingebettet. Diese enthielten wiederum Links zu den

entsprechenden Seiten im Wiki. Dadurch konnte die

Google Map in das Wiki eingebettet werden, um zur

Navigation zu dienen.

Die embed Kette sieht somit folgendermaßen aus:

Wiki < Google Map (mit my maps Editor) <Picasa Fotos < Links zu den entsprechende Seiten im Wiki

Google Maps ist sehr flexibel, da sich Marker, Routen, Fotos, Videos,

Audiodateien einbetten lassen. Natürlich lassen sie solche multiplenembeds nicht beliebig lange fortsetzten, aber mit ein wenig Fantasie

finden sich oft sehr interessante Anwendungsmöglichkeiten. Selbst in

YouTube Videos lassen sich mittlerweile Untertitel und Annotationen

(Sprechblasen, Hervorhebungen, Etiketten) mit Links zu anderen Videos

einbetten. Das kann man nutzen um z.B. interaktive Videos mit

verschiedenen Auswahlmöglichkeiten und Ausgängen zu erstellen.

5) Video Mashups

Außer YouTube und anderen Video Seiten wie Vimeo, gibt es zahlreiche weitere Web 2.0 Dienste,

mit Hilfe derer es möglich ist Videos zu erstellen. Dazu gehören vor allem Animationsdienste:

Animoto (animierte Slideshows aus Fotos)

Voki (sprechender Avatar)

xtranormal (3D Animation)

go!animate (2D Animation)

Präsentationssoftware mit Animationsmöglichkeiten

Zu Letzteren gehören z.B. Sliderocket und Prezi (Pan and Zoom Animation). Einige dieser Dienste

(Animoto, xtranormal) geben die Animation gleich als Video aus, andere (Voki, Prezi) speichern die

Animation im Flash Format.

Ein Schülerprojekt könnte es sein, ein Video zu einem bestimmten Unterrichtsthema zu erstellen.

Dieses könnte in Form eines Dialogs (xtranormal), einer Präsentation (Prezi, Sliderocket) oder einer

Slideshow (Animoto) gestaltet sein. Da jedes dieser Medien enge Limits hat

(Darstellungsmöglichkeiten, Aufwand, Monotonie und Lageweile nach kurzer Zeit, und ähnliches),

würde sich oft eine Mischung (Mashup) von zwei oder mehreren solcher Dienste anbieten.

Dies könnte etwas so aussehen:

http://london4dhwim.pbworks.com/





1. Einleitung: Sprechender Avatar (Voki)

2. Erklärung: Textanimation mit Audio (Sliderocket)

3. Beispiel-Situation: Dialog (Extranormal)

4. eventuell Live Video

5. Abspann: Slideshow (Animoto)

Um ein solches Mashup zu erstellen braucht man lediglich den Bildschirm während dem Abspielen

der Animation oder eines Videos mittels eines Screen Recorders aufzuzeichnen. Solche Screen

Recorder sind: Camtasia (kommerzielles Produkt), Cam-Studio (gratis), oder Web 2.0 online Dienste

wie screencast-o-matic (bietet die Möglichkeit eine mp4 Datei am PC zu speichern!)

Das Mischen selbst erfolgt in einem Videoschnitt Programm wie MovieMaker oder iMovie. Unter

Umständen (vor allem bei älteren Versionen) muss man die Videos auch noch konvertieren. Dazu

gibt es aber zahlreiche gratis Konverter. Im Videoschnitt Programm selbst werden folgende Arbeiten

durchgeführt: Aneinanderreihen der einzelnen Videos

Titel und Abspann (Text)

gegebenenfalls Voiceover für Präsentationen/Prezi (bietet selbst kein Audio!)

gegebenenfalls musikalische Untermalung (vorzugsweise mit Creative Commons Musik)

Export der fertigen Videos

Natürlich sind solche Mashups mit erheblichem Aufwand verbunden. Sie würden sich vor allem für

Semesterprojekte oder für die Arbeit mit Web 2.0 fortgeschrittenen Schüler/innen, denen einfache

Dienste wie Voki schon etwas langweilig werden, eignen.

6) Mashups für Fortgeschrittene (Yahoo! Pipes, Google Tabellen, etc.)

Zwischen Mashups mittels embed code und der Programmierung von Mashups mittels API gibt es

noch einen Bereich der einiges an IT Know-How benötigt, aber noch keine Programmierkenntnisse

erfordert. Solche Mashups finden natürlich nur dann Anwendung, wenn sowohl der Lehrende als

auch die Schüler/innen über ein fortgeschrittenes Niveau verfügen. Es handelt sich um die

Manipulation von Web Formaten wie RSS, KML, HTML. Der bekannteste Dienst dazu ist Yahoo!Pipes,

der eine enorme Auswahl an Mashup Quellen (von RSS bis JSON) erkennt, sowie Funktionen wie,Filtern und Suchen bietet um diese zu bearbeiten und mischen. Pipes genau zu erörtern würden den

Rahmen dieses Artikels weit sprengen, daher sei hier auf das Web und YouTube verwiesen, wo es

sehr viele gute Tutorials dazu gibt.

Abschließend möchte ich auch noch auf einige gratis Google Tools hinweisen, mit denen sich relativ

leicht Mashups erstellen lassen. RSS Feeds können in Google Reader und Feedburner zu neuen Feeds

kombiniert werden. Feedburner bietet darüber hinaus auch weitere Funktionen an, wie z.B.

Newsletter aus Feeds zu erstellen. Mit Google Tabellen und Google Fusion Tables (Datenbank) lassen

sich auch sehr anspruchsvolle Mashups erstellen. Mit beiden Diensten lassen sich z.B. Daten aus

dem Web auf einer Karte visualisieren. Viele Tipps und Tricks zur praktischen Verwendung der

Google Tools und etliche Mashup Ideen finden sich (in Englisch) auf meinem G-learning Blog:



http://glearningblog.blogspot.com/

Literatur:

DuVander, Adam (2010) “5 Years Ago Today the Web Mashup Was Born” on

http://blog.programmableweb.com/2010/04/08/the-fifth-anniversary-of-map-mashups-

on-the-web/

Feiler, Jesse (2007). How to Do Everything with Web 2.0 Mashups. Mcgraw-Hill Professional

Safran, Christian, Anja Lorenz, and Ebner. “Webtechnologien - Technische Anforderungen an

Informationssysteme.” Lehrbuch für Lernen und Lehren mit Technologien. Ed. Sandra

Schön and Martin Ebner. February 2011.

Specht, Marcus and Martin Ebner. “Mobiles und ubiquitäres Lernen - Technologien unddidaktisches Aspekte.” Lehrbuch für Lernen und Lehren mit Technologien. Ed. Sandra Schön

and Martin Ebner. February 2011.

Wikipedia entry „Mashups“ http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)


http://blog.programmableweb.com/2010/04/08/the-fifth-anniversary-of-map-mashups-on-the-web/



http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)







Mashups – mit einfachen Techniken zum eigenen Web 2.0

Documents

Transcript of Mashups – mit einfachen Techniken zum eigenen Web 2.0