Jakob Voß

Mashups und Automatisierung
Digitale Bibliothek Digitale Bibliothek WS 2008/2009 Fachhochschule Hannover Informationsmanagement (BA) 24. November 2008

Die Inhalte dieser Präsentation stehen (sofern nicht weiter angegeben) von Jakob Voß freigegeben unter der Creative Commons Attribution-Share Alike 3.0 Unported Lizenz.

Inhalt
– – – –

Statische und dynamische Webseiten Javascript und Programmbibliotheken Mashups und Widgets Entwicklung von Mashups

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Statische Webseite
1. Client fragt Server 2. Server liefert HTML 3. Client zeigt HTML an

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Dynamische Webseiten
Serverseitig 1. Client fragt Server 2. Server
– – –

ermittelt Daten erzeugt HTML liefert HTML

3. Client zeigt HTML an

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Dynamische Webseiten
Serverseitig 1. Client fragt Server 2. Server
– – –

ermittelt Daten erzeugt HTML liefert HTML
– – –

Serverseitige Programme (PHP, Perl, Ruby, Java ...) Direkter Zugriff auf Datenbanken (u.A.) ggf. Verwendung von HTML-Templates

3. Client zeigt HTML an

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Dynamische Webseiten
Clientseitig 1. Client fragt Server 2. Server liefert HTML, Daten und JavaScript 3. Client zeigt HTML und
– – – –

erzeugt/ändert HTML führt JavaScript aus reagiert auf Nutzer fragt Server weiter

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Dynamische Webseiten
Clientseitig 1. Client fragt Server 2. Server liefert HTML, Daten und JavaScript 3. Client zeigt HTML und
– – – –

erzeugt/ändert HTML führt JavaScript aus reagiert auf Nutzer fragt Server weiter

– –

JavaScript-Programme Rückfragen an Server („AJAX“) über Web-APIs Reaktion auf Nutzerverhalten Webanwendungen

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

JavaScript
– – –

Ist eine Skriptsprache Inzwischen Standard (ECMAscript) In vielen Bereichen eingesetzt
– – –

In dynamischen Webseiten (Browser) Für Plugins und Widgets In anderen Anwendungen (u.A. PDF-Skripte)

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

JavaScriptSpracheigenschaften

Imperativ  var x = 3;  x = x + 2;
 alert("x : " + x);

Objektorientiert window.location.reload(); Dynamisch
obj = eval( mycode );  var add = function(x, y) { return x+y; }

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Datentypen
– – – –

Number String Boolean Object
– –

23; 0x17; 3.14 ... "hallo"; 'geht\'s?'  true || false

Function function add(a,b){return a+b;} Array ["null","eins","zwei"];

Undefined undefined

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Arrays
– – – – –

var a = [ 'x', 'y', 'z' ]; a[0], a[1], a[2] a[23] = "hallo"; a.length a.push, a.push, a.shift, a.unshift

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Operatoren

Wie in Java
– – – –

+, ­, *, /, % =, +=, ... x++, ++x, x­­, ­­x &&, || <, >, <=, >= ==, != ===, !==

Vergleiche
– – –

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Objekte

Eigenschaften: Methoden: Zugriff
– –

"hi!".length "hi!".replace("!","?")

person.name = "Fritzchen"; person.["name"] = "Fritzchen";

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Objekte erzeugen
– –

var x = Object(...); var person = {    "name" : "Fritzchen",   "alter" : 4 }; function Person(name, alter) {   this.name = name;   this.alter = alter; } var fritz = new Person("fritz",23);

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Bedingte Ausführung
if ( person.name == "Fritzchen") {   // ... } else if ( person.name == "Fritz") {   // .. } if (person.name == "Fritz" ||     person.name == "Fritzchen") { ... } if ( typeof x == "object" && x.length ) { ... }

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Schleifen
– –

while( i>0 ) { i­­; } for(var i=0; i<a.length; i++) {    s += a[i]; } for (var m in obj) {   s += m * ": " + obj[m] + "\n"; }

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

DOM
– –

Browser-Umgebung als Objekte Jedes HTML-Element ein Objekt

Aktuelles HTML-Dokument: document firstChild, lastChild getAttribute, setAttribute, appendChild, removeChild ...

Zahlreiche Eigenschaften und Methoden
– –

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: Menu ein/ausblenden

Was ein/ausblenden?

Eindeutig identifizierbar mit id-Attribut
document.getElementById( ... )

Wie ein/ausblenden?

.style.display = 'none'; .style.display = ''; onmouseover = "..."; onmouseout  = "...";

Wann ein/ausblenden?

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: Menu ein/ausblenden
<html><head> <meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <style type="text/css">    .menu        { background: #AAAAAA; }    .menu­inhalt { background: #DDDDDD; } </style> </head><body> <div class="menu" style="float:right;  width: 25em;" >   Wollt ihr die Wahrheit hör'n?   <div class="menu­inhalt">     Die Wahrheit ist irgendwo da draußen.     <br>     Wahrheit ist die Erfindung eines Lügners.   </div> </div> </body></html>

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: Menu ein/ausblenden
<html><head> <meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <style type="text/css">    .menu        { background: #AAAAAA; }    .menu­inhalt { background: #DDDDDD; } </style> </head><body> <div class="menu" style="float:right; width:25em;"      onmouseover="doc ument. getElementById('m1').style. displa y='';"      onmouseout="document.getElem entByI d('m1' ).style.display= 'none';" >   Wollt ihr die Wahrheit hör'n?   <div class="menu­inhalt" id="m1" style="display:no ne;">     Die Wahrheit ist irgendwo da draußen.     <br>     Wahrheit ist die Erfindung eines Lügners.   </div> </div> </body></html>

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

JavaScript und Sicherheit
– –

Phising, Cookie- und Passwortklau Sandbox-Prinzip
– – –

Keine lokalen Dateien Cross-Domain-Barriere Benutzerbestätigungen

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

JavaScript Programmbibliotheken

Werkzeugkasten aus vorgefertigten Objekten und Methoden Kann von fremdem Server eingebunden werden

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Schnittstellen
le tstel nit rsch

r Prog

ie amm

Programm

Informationssystem
Benu tzers

chni tt

stell

e

Benutzer

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

JavaScript Programmbibliotheken

Werkzeugkasten aus vorgefertigten Objekten und Methoden (Programm-API) (+) Unabhängigkeit von internen Details (‒) Abhängigkeit von der jeweiligen Library Einbindung mittels <script> von fremden (!) oder eigenem Server

– –

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: Google Maps API
<html>   <head>     <script src="htt p://m aps.g oog le.com /maps ?f il e=ap i&am p;v =2 "             type="text/javascript"></script>     <script>     function load()     {       if (GBrowserIsCompatible())       {           var  map =  ne w GMa p2(do cume nt.g etE lement ById( "map") );           map. se tCent er(ne w  GLatLn g(52. 3206 1,9 .819271),  15);           map. addOv erla y(ne w GM ar ker( ne w GLat Lng(5 2.32 ,9.8 2)));       }     }     </script>   </head>   <body onl oad= "load( )" on unloa d="GU nl oad() ">     wo ist die FHH?     <div id= "map " style="width: 500px; height: 300px"></div>   </body> </html>
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: Google Maps API

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Mashups

Informationen von einer oder mehreren Quellen in einer anderen Webanwendung oder Webseite zusammenführen Hier: Google Maps + eigene Anweisungen

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Mashups

Informationen von einer oder mehreren Quellen in einer anderen Webanwendung oder Webseite zusammenführen
– – – –

HTML-Fragmente RSS/ATOM-Feeds andere Datenformate und APIs kleine Webanwendungen (Widgets)

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Einfaches Mashups
– – –

RSS-Feed 1, RSS-Feed 2, ... Einträge zusammenfassen Gesammelten Feed als ATOM-Feed weitergeben

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: iSpecies.org

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

... bisher ohne Semantic Web

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Mashups in Bibliotheken

Nach [Stelzenmüller, 2009] setzen von 79 untersuchten wissenschaftlichen Bibliotheken 21 Mashups ein Der Anteil von Bibliotheken, die Mashups gezielt einsetzen ist weitaus geringer Häufigste Anwendungen:
– –

Cover-Bilder (12) Kartendienste (7)

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Cover-Einblendung

Hier: Über SeeAlso-Webservice (isbn2cover)
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Karten

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Bild aus: Stelzenmüller, 2008

Widgets, Gadgets, Plugins

Kleine (Teil-)programme, die sich in andere Anwendungen einbinden lassen
– –

In spezielle Anwendungen („Plugin“) Allgemein in verschiedene Awendungen

In der Regel HTML und JavaScript-Fragmente

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

jOPAC

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Bild: netvibes.com

Widget-Container

Firefox-Plugins, WordPress-Plugins ... PageFlakes, NetVibes ... iGoogle, MyYahoo, Facebook ... Windows Sidebar, Apple Dashboard ... Eigene Webseiten Mehrere Anwendungen bedienen mit der Universal Widget API (UWA)

– – – –

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Beispiel: iGoogle

http://www.programmableweb.com/mashup/go-go-google-gadget
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Entwicklung von Mashups
– – –

Erst kommt die Idee Datenquellen ermitteln und beurteilen Programmieren oder zusammenklicken

Mashup-Editor

– –

Testen Gut dokumentieren und publik machen

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Mashup-Editoren
– – – – – –

Google Mashup Editor Yahoo Pipes Microsoft PopFly Intel Mash Maker (Browser-Plugin) PiggyBank (im Browser) ...

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Yahoo Pipes

http://code.google.com/gme/articles/gmepipes.html
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Ein einfaches Prinzip
– –

Daten lesen Daten verarbeiten
– – –

kombinieren filtern anreichern

Daten weitergeben

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Aktuelle Entwicklungen
– –

OpenSocial API Gnip Physische Mashups (Fab Labs etc.)

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Hilfreich zur Entwicklung

Firefox-Plugins
– –

Firebug Web Developer Toolbar HTML CSS JavaScript/DOM

SelfHTML
– – –

http://programmableweb.com

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Aufgabe

Einfaches Mashup mit Informationen zur Lehrveranstaltung Quellen

Slideshare, Scribd, BibSonomy, Jakoblog, Flickr ... Widget-Container, Mashup-Editor, dynamische Webseite ...

Mittel

Abgabe (Mail mit [fhhdb08] und URL) bis 23.12.

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Literaturtip
Christian Stelzenmüller: Mashups in Bibliotheken. Untersuchung der Verbreitung von Mashups auf Webseiten wissenschaftlicher Bibliotheken und Erstellung eines praktischen Beispiels. Bachelorarbeit im Studiengang Bibliotheks- und Informationsmanagement an der HdM Stuttgart, 1.9.2008

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

P.S: In eigener Sache

VZG sucht Studentische Hilfskraft
– – – –

Erfahrungen im Bereich Entwicklung von Webanwendungen Unix / Linux Kenntnisse 8 bis 20 Stunden / Woche Bezahlung nach Standardtarif für studentische Hilfskräfte

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement

Bis nächste Woche!

Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement