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 heit wie mischbar. Mischbar sind dabei Daten, Medien und ganze Web 2.0 Dienste. Der Ausdruck Mashup, kommt dabei ursprnglich aus der Musik (siehe Safran et al. 2011) und bezeichnet dabei den Prozess des Mixen von zwei ursprnglich 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 fr den Einsatz im Unterricht ist, aber dieser bietet nur einen Teil der gewnschten Funktionalitt. Z.B. wrde man gerne ein Audiodatei (z.B. Audioboo) abspielen und dann ein Quiz dazu anhngen. Oder man hat Fotos von einer Klassenfahrt auf einem Fotodienst und man wrde diese gerne auf einer Karte herzeigen. Man hat eine Umfrage im Web erstellt, die man gerne als Diagramm visualisieren mchte. Oder man hat eine Prsentation erstellt und mchte dazu einen Feedback-Fragebogen, der eine Skala von 1-10 verwendet, haben. Web 2.0 Dienste, mit denen man Prsentationen erstellen kann gibt es viele, Dienste fr Umfragen ebenso. Mit ein wenig Hintergrundwissen und etwas Glck kann man diese Dienste so mischen wie man sie braucht. Etwas Glck braucht man, da Web 2.0 Dienste in unterschiedlichem Grad mashable sind und unter Umstnden 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 drfte. Mashups werden oft mit Technologien wie REST und SOAP sowie mit Begriffen wie APIs und JSON assoziiert. Diese Ansammlung an Akronymen alleine drfte reichen um auch engagierte Lehrende vom Thema Mashup abzuschrecken. Wenn man dabei noch etwas tiefer schrft, findet man sich sehr schnell in Bereichen, denen nur Programmierern vorbehalten sind wieder. Wenngleich Mashups sehr hufig mit Programmieren in Verbindung gebracht werden, sind oft gar keine Programmier-Kenntnisse ntig 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 mssen, sondern ber URL von jedem beliebigen WebServer einbettbar sind. Mashups knnen berall dort zu Einsatz kommen wo mehrere Web 2.0 Dienste bentigt werden und man das Gesamte auf einer Seite darstellen mchte. Dies kann im schulischen Kontext fr 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 Schler selbst Content mit unterschiedlichen Medien (Fotos, Videos, Text, etc.) erstellen Anreicherung von Content durch interaktive Lern-Aktivitten (z.B. Video + Quiz, Prsentation + 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 Schler/innen werden dabei ber ein Twitter-Widget eingebettet und die Ressourcen (Links zu diversen ntzlichen Websites) knnen ber einen social bookmarking Dienst wie Diigo eingebunden werden, zu denen nicht nur der oder die Lehrende, sondern auch die Schler/innen selbst beitragen. Da dieses Beispiel bereits recht komplex ist mchte ich im Folgenden die Mglichkeiten Mashups zu erstellen in aufsteigender Komplexitt behandeln. 2) Fertige Mashups nutzen Die einfachste Art Mashups fr den Unterricht zu nutzen, ist es fertige Mashups zu verwenden. Web 2.0 Mashups sind ursprnglich 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 umstndlich verwenden zu mssen, kann der User auf einen Blick sehen wo es z.B. Wohnungen zu welchen Preisen zu mieten gibt.

Rademacher entwickelte diese Seite noch bevor Google im Juni 2005 die API fr Google Maps freigab und kann somit als Erfinder von Web Mashups bezeichnet werden. Diese historisch eher wenig bekannte Tatsache hatte eine enorme Bedeutung fr die Entwicklung des WWW. APIs fr so gut wie alle beliebten Web 2.0 Dienste, darunter Flickr, Delicious, YouTube und spter Twitter und Facebook wurden fr Programmierer frei gegeben, die auf diese Weise die Funktionalitt der Dienste fast beliebig erweitern konnten. Zudem trugen diese Mashups, wie etwa TwitPic, das PhotoSharing und Twitter kombiniert, zur Verbreitung und Popularitt der ursprnglichen Dienste bei. programmableweb.com listet z.B. fast 500 Mashups mit der Photo-Sharing Website Flickr. Noch hufiger zu finden sind YouTube (600) und Social Media Mashups (allen voran Twitter) mit ber 800 Eintrgen. 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 PhotoSharing Websites gibt hat ein zustzlicher Dienst hier wenig Chancen bekannt zu werden. Da macht es mehr Sinn etwas Auergewhnliches anzubieten. Bei Fotos wren 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.

Mgliche Anwendungen im Blended Learning: Studium von thematischen Karten (Weltbevlkerung, Tourismus, Geschichte, etc.) Audiofhrungen auf Google Maps anhren (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)

3) Verwendung von Mashup(-fhigen) Diensten Natrlich findet man nicht immer fertige Mashups fr jeden Zweck. Die einfachste Mglichkeit Mashups selbst zu erstellen, ist die Verwendung von Mashup-Diensten bzw. Mashupfhigen Diensten. Es gibt einige Dienste, die sich sehr gut zum Erstellen von Mashups eigenen. Dazu gehrt z.B. Netvibes. Netvibes ist als personalisierte Startseite im Web konzipiert ist, wobei es auch mglich ist Seiten zu erstellen, die man ffentlich frei gibt. Der Dienst enthlt 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 fr: Kleinere multimediale Klassenprojekte (Gestaltung einer Website) Individuelle Portfolios mit Inhalten von diversen Webdiensten Prsentationen 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-fhige Dienste, mchte ich solche bezeichnen, die zwar nicht primr fr Mashups konzipiert sind, aber doch eine Reihe von Web 2.0 Diensten und Web-Ressourcen integrieren knnen. Dazu gehren vor allem Prsentationsanwendungen 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 schnes 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 Poster zusammenfgen. Damit lassen sich bereits kleine, aber relativ ansprechende eLearning Projekte durchfhren: Gestaltung einer Seite zu einem Thema des Unterrichts Poster-Prsentation Kurze Bild-Geschichten Multimediale Geschichten oder Bcher (bei Verlinkung der einzelnen Glogs) Wenn man die einzelnen Glogs miteinander verlinkt kann man auch grere Projekte wie die Erstellung von multimedialen Geschichten oder Bchern durchfhren. Allerdings wre es hier einfacher mit einem sogenannten Flash-Book wie Issuu oder Calamo 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 fr Digital Storytelling nutzten, wobei die Lernenden selbst unter Verwendung unterschiedlicher digitaler Medien Geschichten online erzhlen knnen. Ein sehr schnes Beispiel dazu ist das Projekt LIingua LIbrarium von Ursula Mulley (http://lingualibrarium.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 Calamo 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 bentigt man keine HTML Kenntnisse, da ein einfaches Copy & Paste gengt 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 (hufig 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 (oder gegebenenfalls 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 Mglichkeit diese Inhalte zu verschachteln, wie russische Matrjoschkas.

Ein praktisches Beispiel soll das veranschaulichen. http://london4dhwim.pbworks.com Beim Projekt London Wiki sollten Schler 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 folgendermaen 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. Natrlich lassen sie solche multiplen embeds nicht beliebig lange fortsetzten, aber mit ein wenig Fantasie finden sich oft sehr interessante Anwendungsmglichkeiten. 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 Auswahlmglichkeiten und Ausgngen zu erstellen.

5) Video Mashups Auer YouTube und anderen Video Seiten wie Vimeo, gibt es zahlreiche weitere Web 2.0 Dienste, mit Hilfe derer es mglich ist Videos zu erstellen. Dazu gehren vor allem Animationsdienste: Animoto (animierte Slideshows aus Fotos) Voki (sprechender Avatar) xtranormal (3D Animation) go!animate (2D Animation) Prsentationssoftware mit Animationsmglichkeiten

Zu Letzteren gehren 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 Schlerprojekt knnte es sein, ein Video zu einem bestimmten Unterrichtsthema zu erstellen. Dieses knnte in Form eines Dialogs (xtranormal), einer Prsentation (Prezi, Sliderocket) oder einer Slideshow (Animoto) gestaltet sein. Da jedes dieser Medien enge Limits hat (Darstellungsmglichkeiten, Aufwand, Monotonie und Lageweile nach kurzer Zeit, und hnliches), wrde sich oft eine Mischung (Mashup) von zwei oder mehreren solcher Dienste anbieten. Dies knnte etwas so aussehen:

1. 2. 3. 4. 5.

Einleitung: Sprechender Avatar (Voki) Erklrung: Textanimation mit Audio (Sliderocket) Beispiel-Situation: Dialog (Extranormal) eventuell Live Video Abspann: Slideshow (Animoto)

Um ein solches Mashup zu erstellen braucht man lediglich den Bildschirm whrend 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 Mglichkeit eine mp4 Datei am PC zu speichern!) Das Mischen selbst erfolgt in einem Videoschnitt Programm wie MovieMaker oder iMovie. Unter Umstnden (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 durchgefhrt: Aneinanderreihen der einzelnen Videos Titel und Abspann (Text) gegebenenfalls Voiceover fr Prsentationen/Prezi (bietet selbst kein Audio!) gegebenenfalls musikalische Untermalung (vorzugsweise mit Creative Commons Musik) Export der fertigen Videos Natrlich sind solche Mashups mit erheblichem Aufwand verbunden. Sie wrden sich vor allem fr Semesterprojekte oder fr die Arbeit mit Web 2.0 fortgeschrittenen Schler/innen, denen einfache Dienste wie Voki schon etwas langweilig werden, eignen.

6) Mashups fr 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 bentigt, aber noch keine Programmierkenntnisse erfordert. Solche Mashups finden natrlich nur dann Anwendung, wenn sowohl der Lehrende als auch die Schler/innen ber ein fortgeschrittenes Niveau verfgen. 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 errtern wrden den Rahmen dieses Artikels weit sprengen, daher sei hier auf das Web und YouTube verwiesen, wo es sehr viele gute Tutorials dazu gibt. Abschlieend mchte ich auch noch auf einige gratis Google Tools hinweisen, mit denen sich relativ leicht Mashups erstellen lassen. RSS Feeds knnen in Google Reader und Feedburner zu neuen Feeds kombiniert werden. Feedburner bietet darber 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-mashupson-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 fr Lernen und Lehren mit Technologien. Ed. Sandra Schn and Martin Ebner. February 2011. Specht, Marcus and Martin Ebner. Mobiles und ubiquitres Lernen - Technologien und didaktisches Aspekte. Lehrbuch fr Lernen und Lehren mit Technologien. Ed. Sandra Schn and Martin Ebner. February 2011. Wikipedia entry Mashups http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)