Jakob Voß
Mashups und Automatisierung Digitale Bibliothek Bibliothek Digitale 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
3. Client zeigt HTML an
–
–
–
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
Serverseitige Programme (PHP, Perl, Ruby, Java ...) Direkter Zugriff auf Datenbanken (u.A.) ggf. Verwendung von HTML-Templates
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
–
–
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
JavaScript-Programme Rückfragen an Server („AJAX“) über Web-APIs Reaktion auf Nutzerverhalten Webanwendungen
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
23; 0x17; 3.14 ...
–
String
"hallo"; 'geht\'s?'
–
Boolean
true || false
–
Object
–
–
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:
"hi!".length
–
Methoden:
"hi!".replace("!","?")
–
Zugriff –
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
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
Zahlreiche Eigenschaften und Methoden –
firstChild, lastChild
–
getAttribute, setAttribute, appendChild, removeChild ...
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 = '';
Wann ein/ausblenden? –
onmouseover = "..."; onmouseout = "...";
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
Beispiel: Menu ein/ausblenden <meta httpequiv="ContentType" content="text/html; charset=utf8" /> <style type="text/css"> .menu { background: #AAAAAA; } .menuinhalt { background: #DDDDDD; }
Wollt ihr die Wahrheit hör'n?
Die Wahrheit ist irgendwo da draußen.
Wahrheit ist die Erfindung eines Lügners.
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
Beispiel: Menu ein/ausblenden <meta httpequiv="ContentType" content="text/html; charset=utf8" /> <style type="text/css"> .menu { background: #AAAAAA; } .menuinhalt { background: #DDDDDD; }
Wollt ihr die Wahrheit hör'n?
Die Wahrheit ist irgendwo da draußen.
Wahrheit ist die Erfindung eines Lügners.
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
ie amm
r Prog
lle e t s t nit rsch
Programm
Informationssystem Benu
tzers
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
chni tt
stell
e
Benutzer
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 <script src="htt p://m aps.g oog le.com /maps ?f il e=ap i&am p;v =2 " type="text/javascript"> <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))); } } wo ist die FHH?
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
Bild aus: Stelzenmüller, 2008
Karten
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
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
Bild: netvibes.com Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
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
SelfHTML –
HTML
–
CSS
–
JavaScript/DOM
http://programmableweb.com
Jakob Voß: Lehrveranstaltung Digitale Bibliothek (WS 2008/2009) FHH Hannover, Bachelor-Studiengang Informationsmanagement
Aufgabe –
–
Einfaches Mashup mit Informationen zur Lehrveranstaltung Quellen –
–
Mittel –
–
Slideshare, Scribd, BibSonomy, Jakoblog, Flickr ... Widget-Container, Mashup-Editor, dynamische Webseite ...
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