IOException.de

Kurzversion: HTML5 Foliensatz, basierend auf einem Google Template, das zusätzlich Notizen und einen Presenter Mode bietet: Demo / Code

Nicht nur die Frage, wie man richtig präsentiert (Stichwort Zen vs. Death by PowerPoint), sondern auch die Frage, mit welchen Anwendungen man präsentiert, ist oft umstritten. Ich persönlich konnte mich bisher mit Powerpoint und Konsorten eher wenig anfreunden – vor allem Typografie und Einschränkungen bei der Gestaltung waren problematisch. Als Alternative habe ich bisher oft LaTeX Beamer verwendet, was allerdings je nach visueller Komplexität auch oft relativ zeitaufwendig ist, sich aber zumindest bei Grafiken in Vektorformaten und mathematischen Inhalten auch schnell auszahlt.

HTML5-basierte Foliensätze

Mit dem Aufkommen von HTML5 entstand eine zusätzliche Möglichkeit. Dank der neuen Multimedia-Tags wie <audio> und <video> sowie mächtigeren CSS Stilen bietet HTML nun die Grundlagen für browser-basierte Präsentationen. Mittlerweile gibt es hierfür auch schon mehrere Templates:

• DZSlides
• html5slides
• S5: A Simple Standards-Based Slide Show System

Noch mehr Alternativen gibt es in dieser Auflistung. Ein weiteres sehr schönes Beispiel ist ein Foliensatz zu HTML5, der selbst quasi eine Technologiedemonstration enthält: http://slides.html5rocks.com

Der Vorteil von HTML-basierten Präsentationen ist die hohe Anzahl von Medien (u.a. auch SVG, Flash Videos oder ganze Webseiten als IFrames), die man einbetten kann. Ein einfaches, weitläufig bekanntes Markup ermöglicht das schnelle Erstellen von Folien, und mit einer Kombination aus HTML, CSS und JavaScript lassen sich dennoch auch komplexe Spezialfunktionen realisieren.

Mir persönlich hat das html5slides Template ganz gut gefallen, das Google entwickelt und für die Google I/O Slides eingesetzt hat. Da das Template unter einer Apache License veröffentlicht wurde, habe ich zunächst damit begonnen, es an das Uni Ulm Corporate Design anzupassen. Außerdem hatte ich ein paar kleine Änderungen am Code vorgenommen, um zum Beispiel eine Nummerierung der Folien zu ermöglichen.

Presenter Mode?

Prinzipiell war das Ergebnis schon mal akzeptabel, allerdings wurden die oft genannten Probleme bei solchen HTML-Foliensätzen schnell offensichtlich – fehlende Notizen für den Vortragenden und nur eine Ausgabe.

Eher durch Zufall bin ich auf ein anderes Konstrukt gestoßen, dass seit HTML5 Cross-Frame-Communication erlaubt, also den Austausch von Nachrichten zwischen zwei verschiedenen Frames (mit einigen Einschränkungen): window.postMessage()

Die Möglichkeit, zwischen Frames zu kommunizieren, ist natürlich auch ideal dafür, Daten zwischen Frames zu synchronisieren. Übertragen auf zwei verschiedene Präsenationsframes ermöglicht dies beim Weiterschalten der Folien in einem Frame, den zweiten Frame zu aktualisieren. Schematisch sieht das so aus:

(CC-BY-NC) Icons by picol.org / w3.org

Im Hauptfenster kann per Tastendruck ein zusätzliches Popup geöffnet werden (1). Das neue Popup öffnet die gleiche URI der Präsentation und wird auf dem Bildschirm des Vortragenden platziert. Schaltet der Vortragende nun im Hauptfenster weiter zu nächsten Folie, so erzeugt dies ein Nachricht an das zweite Frame (2), das dann ebenfalls weiterschaltet.

Eine weitere Ergänzung war die Unterstützung von Notizen als Overlay über die Folien. Kombiniert mit dem Dual-Screen-Ansatz ermöglicht dies, dem Publikum die Folien zu zeigen, dem Vortragenden auf einem zweiten Bildschirm die Folien plus den verfügbaren Notizen.

Ausführliche Beispiele mit Code gibt es in einer Beispielpräsentation, den kompletten Code auf github: https://github.com/berb/html5slides-uulm

Auf der Feature Wishlist steht noch ein alternativer CSS-Stylesheet für den Druckexport. Außerdem ein Tool, dass externe Daten wie Bilder per Base64 encoding als Data URI integriert und JavaScript sowie Stylesheets inline einbindet, sodass die Präsentation als einzelne HTML5 Datei ohne externe Abhängigkeiten abgespeichert werden kann.

Im Rahmen der Vorlesung “Mobile & Ubiquitous Computing” (bin derzeit mitbetreuender Hiwi) waren wir auf der Suche nach passenden Übungsaufgaben. Eine Übung davon sollte verschiedene Aspekte aktueller Mobilapplikationen (Sensorkontext, Web Services, Live Notifications) einbeziehen, ohne dabei allzu komplex zu werden.

Als ansatzweise reales Szenario hierfür dient die Mensa. Zu Stoßzeiten ist es häufig schwierig, in einer größeren Gruppe gemeinsam zu essen. Spätestens an den Kassen teilt sich die Gruppe auf und es ist schwierig, die Anderen zu finden. Ein Teil sitzt vielleicht auch schon an irgendeinem Tisch, während andere immer noch an der Essensausgabe warten. Was man also unbedingt braucht, ist ein Mensafinder. Der Mensafinder ermöglicht es, anderen seine grobe Position in der Mensa mitzuteilen oder aufzuzeigen, wo andere Leute sitzen. Aufgrund der Einschränkungen vor Ort (kein GPS-Empfang, WLan-Ortung zu ungenau) haben wir uns auf eine einzige Kontextinformationen beschränkt, die bereits eine ausreichende Lösung bietet – die Kompassausrichtung. Anstatt die genaue Position zu ermitteln, verwenden wir eine grobe Richtung abhängig von einem Fixpunkt im Zentrum des Raums (Wendeltreppe). Bereits sitzende Personen richten ihr Mobilgerät in Richtung des Fixpunktes aus, suchende Personen können ausgehend vom Fixpunkt den Richtungen folgen.

Technisch besteht der Mensafinder aus einem Webservice und mobilen Anwendungen. Der Webservice basiert auf REST und bietet als besonderes Feature das ‘Streamen’ neuer Events (neue/aktualisierte Peilungen oder Abmeldungen). Hierfür wird durch den Client eine HTTP-Verbindung geöffnet und serverseitig nicht direkt geschlossen. Stattdessen werden neue Events via Chunked Encoding in die offene Verbindung geschrieben, ähnlich wie bei Streaming API von Twitter. Der Service wurde mit node.js implementiert, Quellcode sowie Dokumentation der REST API sind auf github verfügbar.

Da es sich nur um eine Demo-Applikation handelt, fehlen einige wichtige Features. Es gibt keine Authentisierung der Benutzer und es werden alle Peilungen aller Benutzer übertragen (es gibt keine Kontaktlisten). Interessant wäre natürlich die Anbindung an bestehende Dienste, die bereits eine Authentisierung und Kontaktlisten bereitstellen, so wie beispielsweise Facebook Connect.

Am Mittwoch, den 16. Februar, stellen Studierende des Studiengangs Medieninformatik die Highlights ihrer Anwendungsfächer um 16 Uhr im H20 vor. Erfreulicherweise sind mit MAMPF und diretto auch zwei Projekte von uns mit dabei.

Projekte:

• Interaktive Musikbibliothek (Interaktive Systeme)
• Interaktives Skript MMS (Interaktive Systeme)
• Campus Radio (Medienpädagogik)
• MAMPF (Ubiquitous Computing)
• diretto (Ubiquitous Computing/Interaktive Systeme)
• Parkhaus (Interaktives Video)
• Biologische Barcodes in Gesichtern (Computer Vision)
• Mehrbildanalyse zur Bestimmung von Kopfposen (Computer Vision)
• Realtime Rendering (Computer Graphics)

Weitere Informationen gibt es unter: http://www.uni-ulm.de/in/mi/highlights.html

MAMPF [Fabian Groh, Oliver Stamm, Steffen Scherle, Sven Reichel, Timo Müller]

diretto ))) [Benjamin Erb, Christian Koch, Stefan Kaufmann]

Heutige Mobilgeräte wie Smartphones, Netbooks oder PDAs stellen zu einem großen Teil drahtlosen Zugriff auf das Internet bereit. Zugleich bieten diese Geräte häufig auch die Möglichkeit, multimediale Inhalte wie Bilder, Videos oder Tonmitschnitte überall zu produzieren. Alternativ können sie zumindest als Brücke ins Internet fungieren und dedizierte Geräte wie Digitalkameras anbinden.

Trotz dieser theoretischen Möglichkeiten existieren bisher kaum Anwendungen, die mithilfe dieser Technologien eine multimediale Berichterstattung in quasi Echtzeit ermöglichen. Das Ziel des diretto-Projektes ist es, eine solche Plattform zu entwickeln und Beispiellösungen für die Integration mobiler Geräte aufzuzeigen. Zusätzlich zu Sammlung der mutlimedialen Inhalte liegt ein weiter Fokus auf der Analyse, Bewertung und Verbesserung der erhaltenen Daten – sowohl durch das System als auch durch die Benutzer selbst. So kann zum Beispiel die Genauigkeit von Metadaten wie Orts- und Zeitangaben verbessert werden, Beiträge können mithilfe von Tags klassifiziert und verschiedene mutlimediale Inhalte untereinander sinnvoll verlinkt werden. Durch das System erzeugte Gruppierungen unterstützen den Benutzer zusätzlich bei der Auswertung der Inhalte.

Als Grundlage für das komplette Projekte werden zeitgemäße Web-Technologien eingesetzt. Somit ist die Plattform offen, sehr leicht erweiterbar und skaliert auch bei der Nutzung in größeren Szenarien. Die API steht in Form eines REST-konformen Webservices zur Verfügung. Metadaten werden im leichtgewichtigen JSON-Format kodiert. Ein spezieller PubSubHubbub-Endpunkt ermöglicht Benachrichtigungen über neue Inhalte in Echtzeit. Dezentrale Zusatzdientse steuern zusätzliche Funktionalitäten bei.

Eine mächtige Weboberfläche bietet Zugriff auf die Gesamtheit der erhobenen Daten – auch entfernt über das Internet. Sie bietet die Grundlage für komplexe Auswertungen der vorhandenen Multimediadaten und zugehörigen Metadaten. Im Vordergrund steht hierbei auch die Unterstützung des Benutzers beim Umgang mit den vieldimensionalen Daten.

Für die Integration mobiler Systeme werden verschiedene Clients entwickelt und erprobt. Ein Smartphone-Client erlaubt es dem Besitzer eines Smartphones direkt zum Reporter vor Ort zu werden und Inhalte beizusteuern. Für die Anbindung dedizierter Hardware wie einer digitalen Spiegelreflexkamera wird eine besondere Lösung erabreitet. Ein mobiler Rechner im Rucksack soll als Uplink-Gerät dienen und frisch geschossene Bilder ohne Verzögerung direkt auf die Plattform hochladen. Mithilfe einer solchen Lösung können Fotojournalisten als echte Live-Berichterstatter agieren und Pausen für den Upload entfallen.

Eine solche Plattform eignet sich je nach Ausrichtung für eine Vielzahl verschiedener Einsatzszenarien. So könnte es zur Live-Dokumentation großer Ereignisse dienen. In einem geschlossenen Kontext könnte es Einsatzkräfte bei Großschadenslagen dabei helfen, in kürzerer Zeit einen detaillierteren Überblick zu bekommen und unterstützende Kräfte zur Auswertung fernab einbinden.

Das Projekt wurde im Rahmen des Anwendungsfaches Ubiquitous Computing an der Universität Ulm von einem studentischen Team entworfen und nun in Zusammenarbeit mit einem Team für Interaktive Systeme als Prototyp realisiert. Nähere Informationen gibt es auf der Projektseite www.diretto.org

Als Student im Diplomstudiengang Medieninformatik an der Uni Ulm ist es Bestandteil des Hauptstudiums, ein Anwendungsfach aus den Teilgebieten der Medien-Informatik zu belegen. Hierbei stehen unter anderem Vertiefungsrichtungen wie Computergrafik, Computer Vision, Ubiquitous Computing, Medienpädagogik, Interaktive Systeme, Interaktives Video oder Mensch-Maschine Dialogsysteme zur Auswahl.

Ubiquitous Computing steht für den Trend hin zum allgegenwärtigen Computer oder dem „Internet der Dinge“. Ob als intelligenter Kühlschrank, im vernetzten Auto oder in Form von intelligenten Smartphones, der Computer und mit ihm oft auch das Internet werden immer allgegenwärtiger und verschmelzen mit der Umgebung. Das Anwendungsfach besteht einerseits aus den Vorlesungen Multimediasysteme und Mobile & Ubiquitous Computing, und andererseits aus einer wissenschaftlichen Projektarbeit über zwei Semester in Gruppen.

Verschiedene Autoren des Blogs arbeiten derzeit gemeinsam an solchen Projekten und werden diese hier genauer vorstellen.

Mit dem VPN verbunden

Entgegen der Aussage von verantwortlichen Personen am Rechenzentrum der Universität Ulm ist es auch ohne Cisco-VPN Client möglich ins Universitäts-VPN zu gelangen – und das mit etwas Vorarbeit  recht komfortabel. In der folgenden Anleitung zeigen wir Dir Schritt für Schritt, wie Du das mit der aktuellen Ubuntu Version 9.10 komfortabel einrichtest.

Einleitung

Ziel dieses Projekts ist es, dass wir nutzerfreundlich und GUI-orientiert über den Gnome-Networkmanager ins Netz der Universität Ulm kommen, egal ob wir schon im WLAN vor Ort sind oder gerade Zuhause sitzen und mal wieder nicht an Dateien kommen, die nur über das Uninetz erreichbar sind.
Befinden wir uns gerade schon in der Universität, haben wir hiermit den Vorteil, auf die KIZ-Anmeldemaske beim Verbinden verzichten zu können. Zudem ist unser gesamter WLAN-Traffic auch gleich noch verschlüsselt.

Installation

Wir befinden uns in unserem Homeverzeichnis und erstellen uns ein temporäres Verzeichnis vpnc. Da die Anmeldung am VPN der Uni Ulm mittels hybrider Authentifizierung funktioniert, müssen wir selbst etwas am Quellcode modifizieren. Zuerst holen wir uns also den Quellcode und lösen eventuelle Abhängigkeiten auf.

cd vpnc
apt-get source vpnc
sudo apt-get build-dep vpnc

Möglicherweise werden wir darauf hingewiesen das Paket dpkg-dev zu installieren. Zusätzlich benötigen wir noch dieses Paket:

sudo apt-get install libssl-dev

Wir wechseln nun in das Verzeichnis ~/vpnc/vpnc-0.5.3 und öffnen die Makefile mit einem Editor unserer Wahl und entfernen die Raute vor diesen Zeilen und speichern die Datei.

#OPENSSL_GPL_VIOLATION = -DOPENSSL_GPL_VIOLATION
#OPENSSLLIBS = -lcrypto

VPN konfigurieren im Network-Manager-Applet

Jetzt noch ins Unterverzeichnis debian wechseln um die Datei changelog zu modifizieren. Damit wir unser frisch modifiziertes Werk bequem über den Paketmanager verwalten können müssen wir einen neuen Eintrag in diese Datei oben einfügen, am besten mit einer hohen Nummer. In unserem Fall sieht das so aus:
vpnc (ioexeption-ssl-2010.0.5.3-1-2010) unstable; urgency=low

* added ssl support for hybrid authentication on private network
-- Achim Strauss Mon, 15 Dec 2010 17:52:20 -0800

und dann das ganze Speichern.

Ein jungfräuliches Ubuntu hat vor dem nächsten Schritt gerne noch diese Pakete installiert

sudo apt-get install debhelper libgcrypt11-dev dpatch

Jetzt sind wir bereit das ganze aus dem Verzeichnis vpnc-0.5.3 heraus mit folgendem Befehl zu kompilieren:

fakeroot dpkg-buildpackage -b -uc

Am Ende des Prozesses sollte in ~/vpnc ein komfortabel zu installierendes Debian-Package mit Namen ioexeption-ssl-2010.0.5.3-1-2010_i386.deb stehen. Installiere dieses Paket und teste die erfolgreiche Installation mittels

vpnc --version

Die korrekte Installation erkennst du an der Ausgabe von

Built with openssl (certificate) support. Be aware of the license implications.

Prinzipiell sind wir nun bereit uns mit einem VPN zu verbinden, es fehlt aber noch an einem Plugin für den Networkmanager. Dieses bekommen wir, indem wir das folgende Repository zu unserer /etc/apt/sources.list hinzufügen.

deb http://ppa.launchpad.net/sroecker/ppa/ubuntu karmic main

Danach einfach noch diese Schritte ausführen:

sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 588AC16B
sudo apt-get update
sudo apt-get install network-manager-vpnc

Der erste Befehl sagt aus, dass wir dem oben genannten Repository in Zukunft vertrauen wollen. Dieser Schritt ist nicht zwingend notwendig, schützt uns aber vor zukünftigen Warnmeldungen. Die beiden anderen Schritte sind jedoch essentiell für die Installation des Plugins.

Eingabemaske für Einstellungen des VPN

Konfiguration

Nun richten wir uns noch ein verstecktes Verzeichnis in unserem Homeverzeichnis ein ~/.vpnc . Hierein speichern wir das KIZ Zertifikat, sowie dieses Verbindungsprofil (aus dem Uninetz).

Über das Network-Manager-Applet können wir nun über VPN-Verbindung ->VPN-konfigurieren -> importieren im Verzeichnis ~/.vpnc das heruntergeladene Verbindungsprofil wählen. Die meisten Felder sind durch diese Vorgabe bereits ausgefüllt, der Rest ist wie auf diesem Screenshot mit den eigenen KIZ-Userdaten zu befüllen. Außerdem unter CA-File  die Zertifikatsdatei (KIZ-CA.crt) ebenfalls aus ~/.vpnc wählen.

Nutzung

Ab sofort kannst du dich mit wenigen Klicks über das Network-Manager-Applet → VPN-Verbindungen → <VPN-Name> in das VPN einwählen. Deine Passwörter werden nun auch bequem über den Gnome-Schlüsselbund verwaltet.

Eingerichtetes VPN auswählen

Am Mittwoch, den 10. Februar, stellen Studierende des Studiengangs Medieninformatik die Highlights ihrer Anwendungsfächer um 16 Uhr im H20 vor.

Vorgestellte Projekte:

• Echtzeitgrafik (Praktikum Computergrafik)
• Visuelle Wahrnehmung (Praktikum Computer Vision)
• awarenia, iNet, w3i (Anwendungsfach Interaktive Systeme)
• pocketU (Anwendungsfach Medienpädagogik)
• newsmachine (Anwendungsfach Interaktives Video)
• TTable (Anwendungsfach Ubiquitous Computing)
• Anwendungsfach Dialogsysteme

Weitere Informationen gibt es unter: http://www.uni-ulm.de/in/mi/streiflicht.html

Von uns ist dieses Mal noch niemand dabei, allerdings werden wir in Kürze über unsere eigenen Anwendungsfachprojekte berichten, an denen wir derzeit arbeiten.

An meiner Uni sind einige Webressourcen nur aus dem Intranet zugreifbar, das heißt man braucht als Client eine IP aus dem Uni-Netz. Um von extern darauf zuzugreifen, ist die Einwahl über ein VPN notwendig. Neben der klassischen “schwergewichtigen” Einwahl über einen VPN-Client gibt es noch die Möglichkeit, einen Web-VPN zu nutzen. Hier werden nach der Authentifizierung alle HTTP-Anfragen über eine spezielle Seite der Rechenzentrums getunnelt. Leider lässt nicht nur die Verfügbarkeit des Dienstes manchmal zu wünschen übrig, sondern auch die verfügbaren Bandbreiten machen es uninteressant für den Download größerer Paper.

Als Alternative hierzu ist mir die Möglichkeit begegnet, mithilfe des Application Level Port Forwardings von SSH Zugriffe zu tunneln. Durch den Flag “-D portnummer” erzeugt der SSH-Client beim Verbinden einen lokalen SOCKS-Proxy auf diesem Port, der über den SSH-Tunnel Requests weiterleitet. Endpunkt stellt der SSH-Server da. Mithilfe zusätzlicher Flags lässt sich außerdem ein Timeout unterdrücken.

Im Falle der Uni Ulm und einer Einwahl auf den Server des Rechenzentrums (KIZ) sieht der Aufruf so aus:

ssh -D 8800 -o ServerAliveInterval=60 s_login@login.rz.uni-ulm.de

Nach erfolgreichem Verbindungsaufbau steht dann lokal unter dem Port 8800 der SOCKS-Proxy zur Verfügung und kann im Browser eingetragen werden. Für eine dynamische Nutzung bieten sich unter Firefox Plugins wie FoxyProxy an. Hier lassen sich Regelsätze definieren, wann dieser Proxy benutzt werden soll, zum Beispiel für alle Uni-Seiten.