Eine neue App für das Ulmer Museum

Wir haben im Auftrag des Ulmer Museums eine innovative App entwickelt, die dem Besucher eine neuartige und interaktive Form der Führung durch das Museum ermöglicht. Die App ist ab Januar 2015 für Besucher verfügbar. Sie bietet eine informative Tour durch die verschiedenen Ausstellungsräume: Zu 16 Werken aus Archäologie, Mittelalter und Moderne wird der Besucher geleitet. Ausgangspunkt ist ein Gemälde des Ulmer Münsters von 1845; insgesamt reicht die Palette vom Löwenmenschen bis hin zu einem Flugobjekt des belgischen Künstlers Panamarenko.

Inhaltlich und didaktisch stellt diese App einen enormen Mehrwert dar:  Durch die intelligente Navigation, die in Hinblick auf die historischen Räumlichkeiten besonders berücksichtigt werden musste, wird der Besucher vom Eingang bis zum Schluss der Führung an die Hand genommen. Die gesprochenen Texte können auf dem Gerät mitgelesen werden. Bilder und Videos ergänzen multimedial und ansprechend die textuellen Inhalte.

„Mit einer solch interaktiven Lösung machen wir einen riesen Schritt in Richtung Modernisierung“, freut sich Dr. Gabriele Holthuis, Direktorin des Ulmer Museums. „Wir wollten für das Ulmer Museum keine Standardlösung, sondern etwas Innovatives, das auch auf die Bedürfnisse des Hauses und seiner Besucher abgestimmt ist.“

Neben kostenlosen Leihgeräten an der Museumskasse können die Besitzer von iPhones die App auch aus dem AppStore laden:

„Ein positiver Nebeneffekt der Möglichkeit zum Download ist, dass wir das multimediale Erlebnis mit dem eigenen Gerät ermöglichen“, betont Andreas Buchenscheit, Gründer und Geschäftsführer der Cortex Media GmbH.

Die technische Besonderheit und Herausforderung für unser Team war der Einsatz der modernen Beacon-Technologie. Mithilfe dieser kleinen Sender erkennt die App automatisch die Position des Besuchers, um passende Inhalte zur Verfügung zu stellen. Die von uns eingesetzten Beacons sind erst seit Oktober 2014 auf dem Markt erhältlich und bringen das Ulmer Museum somit in eine absolute Vorreiterstellung.

Unser interdisziplinäres Team hat sich den Herausforderungen gestellt und hat die Erwartungen der Sponsoren des Museums sogar übertroffen. „Wir haben erwartet, dass es gut wird, aber mit sowas Tollem haben wir nicht gerechnet“, begeistert sich Volker Jescheck, ehemaliger Präsident des Rotary Clubs Ulm-Donaubrücke, einem der Sponsoren der App .

Weitere Informationen unter mu-app.de

 

Was sagt die Presse?

In Unsere Projekte veröffentlicht

Cortex Media in Melbourne: Auswirkungen des Online-Status bei WhatsApp&Co

In der letzten Woche gingen Meldungen über einen italienischen Studenten durch die Presse, der mit Hilfe von Screenshots aus WhatsApp und OCR Erkennung in der Lage war, automatisiert den Online-Status von einzelnen WhatsApp-Nutzern zu protokollieren. Eine Forschergruppe aus Ulm, welche sich schon seit Herbst 2013 mit diesem Thema beschäftigt, hat nun ein Paper veröffentlicht, welches ein noch viel bedrohlicheres Gefahrenszenario aufzeigt und dessen Inhalt die bisherigen Erkenntnisse deutlich übersteigt:

Andreas Buchenscheit und seine Kollegen haben gezeigt, dass der Online-Status für eine beliebige Rufnummer direkt am WhatsApp Server abgegriffen werden kann. Dieser Zugriff ist selbst dann möglich, wenn das sogenannte „zuletzt online“ Feature durch den Benutzer explizit deaktiviert wurde. Die Gruppe entwickelte ein Tool, mit dem es möglich ist, auf diese Weise eine beliebige Anzahl von Personen ohne deren Wissen oder Zustimmung gleichzeitig zu überwachen und lückenlos zu protokollieren, zu welchen Zeiten und wie lange WhatsApp aktiv genutzt wird. Ziel der Forschungsarbeit war jedoch nicht nur, die generelle Möglichkeit dieses Abhörens zu demonstrieren, sondern auch zu zeigen, was für Auswirkungen dies auf die Privatsphäre eines Nutzers haben kann. Diese Auswirkungen sind deutlich weitreichender als bislang angenommen.

Durch eine Studie, bei der der WhatsApp Online-Status von zwei unabhängigen Gruppen mit jeweils 10 Probanden über einen Zeitraum von vier Wochen aufgezeichnet und analysiert wurde, konnten die Ulmer Forscher zeigen, dass sich anhand des Online-Status komplette Nutzungsprofile erstellen lassen. Es wurden Metriken entwickelt, um aus den Daten weitreichende Informationen über den Tagesablauf und die Gewohnheiten einer Person abzuleiten. Zum Beispiel kann festgestellt werden, wann eine Person morgens aufsteht und abends ins Bett geht. Es kann lückenlos protokolliert werden, ob WhatsApp zu unangebrachten oder sogar verbotenen Zeiten genutzt wird (z.B. während der Arbeits- oder Schulzeit). Arbeitgeber könnten Mitarbeiter überwachen und überprüfen, wie lange ihre Mitarbeiter nachts wach sind und somit ob sie fit genug zur Arbeit kommen oder bis 4:30 Uhr eine Party gefeiert haben. Bei einer Testgruppe konnte sogar die Teilnahme der kompletten Gruppe an einer Studentenparty anhand der aufgezeichneten Daten nachgewiesen werden.

Besonders kritisch ist die im Paper vorgestellte Möglichkeit, aus den generierten Nutzungsprofilen ein Kommunikationsmuster abzuleiten. Den Forschern gelang es, mehrere Konversationen zwischen den Probanden zu identifizieren. Diese Technik lässt sich sowohl im privaten Umfeld („Chattet meine Frau mit Person X?“) oder geschäftlichen Umfeld („Ist Mitarbeiter X mit Person Y in Kontakt“) einsetzen, aber auch von Staaten und Regierungen, welche die Kommunikationsaktivitäten und -partner ihrer Bürger aus politischen Gründen überwachen wollen.

Dies zeigt ein grundsätzliches Problem auf, dass sich keineswegs nur auf WhatsApp beschränkt, sondern im Prinzip alle modernen Messenger und Kommunikationssysteme betrifft. Vermeintlich harmlose Metadaten, die sorglos geteilt oder erfasst werden, verraten oft viel mehr über Nutzer, als diese sich vorstellen können. Darum sollten Mechanismen zum Schutz dieser Daten ein grundlegender Bestandteil jedes Systemdesigns sein.

Das am Dienstag veröffentlichte Paper wird im November auf einer internationalen Konferenz im australischen Melbourne vorgestellt (MUM 2014: The International Conference on Mobile and Ubiquitous Multimedia). Die Forschergruppe, die aus Experten für Internet Security der Firma Cortex Media GmbH aus Ulm, sowie aus Wissenschaftlern der Universität Ulm und der Carnegie Mellon University, Pittsburgh, USA besteht, hofft durch die Veröffentlichung der Ergebnisse auf potentielle Auswirkungen der Nutzung von mobilen Chat-Apps aufmerksam machen zu können.

Das Paper zur Studie ist zu finden unter: www.uulm.de/?WhatsAppPrivacy

 

Was sagt die Presse?

In Unsere Projekte veröffentlicht

jQuery Listener und AJAX

Ein klassisches Problem, wenn man HTML Elemente dynamisch durch die HTML-Response eines AJAX Calls ersetzt, ist, dass danach die auf diesen Elementen gebundenen Listener nicht mehr gebunden sind. Das liegt natürlich in der Natur der Sache und führt sehr häufig zu komplexem und schwer zu wartbaren Code, der die Listener im Success-Callback neu bindet.

Für dieses Problem gibt es eine einfache und elegante Lösung, die aber recht oft übersehen wird. Mit einem dritten Argument in der .on()-Function und dem initialen Selektor auf ‚document‘, wird der Listener auch weiterhin gebunden sein, wenn der entsprechende HTML darunter durch ein .html(‚…‘) ersetzt wird.

$(document).on('click', '.your-css-selector', function(event){
 // ... your code here.
}); 

Sehr einfach und auch sehr praktisch.

In Unsere Projekte veröffentlicht

Ulm in 30 Sekunden

Für besondere Internetseiten und Portallösungen experimentieren wir immer wieder mit den unterschiedlichsten und manchmal aus sehr außergewöhnlichen Dingen. Dieses Mal mit einer vorprogrammierten Drohne, die handgesteuert „Ulm in 30 Sekunden“ zeigen soll. Die Geschwindigkeit des Videos wurde nicht bearbeitet, wir haben lediglich einige Farben angepasst. Als Kamera kam eine GoPro Hero 3 zum Einsatz, welche mit einem elektronischen Bildstabilisator und einer kardanischen Aufhängung direkt an der Drohne befestigt wurde. Das Video hat sich innerhalb kurzester Zeit über die Solzialen Netzwerke verbreitet und nach 2 Tagen bereits über 10.000 Views. Aber seht selbst:

In Unsere Projekte veröffentlicht

OKHttp für Android

Ein Klassiker der Android Entwicklung, mit dem man immer wieder konfrontiert wird, sind elegante und gut gemachte HTTP Requests, vor allem seit diese ab Android 4 in der synchronen Variante mit Exceptions um sich werfen.

Lange haben wir intern eine selbst entwickelte, asynchrone HTTP Bibliothek verwaltet, die zuerst auf die Apache HttpGet/Post etc. Methoden gesetzt und später mit HTTPUrlConnection gearbeitet hat. Aber richtig zufrieden waren wir damit nie, vor allem da sich die Anforderungen an diese oft von Projekt zu Projekt geändert haben.

Für die letzten Projekte nutzen wir verstärkt OKHttp, eine HTTP Library von Square, die uns in fast allen Belangen überzeugt hat.

Ein Beispiel für einen asynchronen Requests ist schnell zusammengebaut:

OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
    .url("http://api.cortex-media.de/data/foo/1337")
    .build();

client.newCall(request).enqueue(new Callback() {
  @Override
  public void onFailure(Request request, Throwable throwable) {
    throwable.printStackTrace();
  }

  @Override
  public void onResponse(Response response) throws IOException {
    if (!response.isSuccessful()) throw new IOException("Unexpected code " + response);

    String body = response.body().string();
    // do something with the body.
  }
});

Einfach den Client initialisieren, Request bauen und Call via enqueue() asynchron ausführen. Die Antwort wird dann im Callback behandelt, je nachdem ob der Request erfolgreich war (onResponse) oder nicht (onFailure).

Ein synchroner Request ist noch einfacher, man ersetze einfach die newCall()-Zeile durch folgende und verzichte auf den Callback:

Response response = client.newCall(request).execute();

Der Response ist dann direkt im entsprechenden Objekt gespeichert. Aufpassen muss man hier nur, dass man das nicht im UI Thread macht, sonst fängt man sich eine Exception ein.

Authentication

Will oder muss man seine HTTP Requests mit HTTP Authentication versehen, was wir gerne bei HTTPS-basierten APIs der schlichten Einfachheit wegen tun, setzt man einfach die entsprechenden Header mit den Ergebnis der Credentials-Klasse:

String credential = Credentials.basic("matthias", "extremely-secr3t");
Request request = new Request.Builder()
    .url("http://api.cortex-media.de/data/foo/1337")
    .header("Authorization", credential)
    .build();
 ...

Bisher sind wir wirklich sehr gut mit dieser Library gefahren. Solider Code, alle wichtigen Features dabei, SNI kompatibel (was gerade für uns sehr wichtig war) sowie aktive (Weiter-)Entwicklung war genau dass, was wir gesucht haben. Danke, Square!

In Technischer Hintergrund veröffentlicht | Getaggt: ,

Cortex Media Push-Server und die Frag-Mutti Apps

1402518737_bubbles

Für unsere Smartphone-Apps für Android und iOS benötigten wir schon relativ früh einen eigenen Push-Server, um diverse Nachrichten und Statusmessages direkt in die Apps pushen zu können. Die damals vorhandenen kommerziellen und Open-Source Angebote haben uns nicht überzeugt, so dass wir einen eigenen Push-Server entwickelt haben.

Der Push-Server

Wir haben uns für ein Konzept entschieden, das beide für uns wichtigen Push-Dienste vereint: Den Apple Push Notification Service (APNs) sowie sowohl das Google Cloud to Device Messaging Framework (C2DM) und als auch später den Google Cloud Messaging (GCM) Dienst. Der Push-Server empfängt über die entsprechenden APIs unserer Apps die Nachrichten und pusht, je nach Quelle, die Nachrichten weiter an die von Google und Apple angebotenen Schnittstellen. Hierbei kümmert sich der Server um ein logisches Buffering der Push-Messages, um beispielsweise bei einem Newsletter die Schnittstellen übermäßig zu beanspruchen. Um auch später für andere Pushes-Services bereit zu sein (vielleicht doch nochmal Windows Phone?), lässt sich der Server auch um Plugins erweitern, die andere Schnittstellen ansprechen können.

Anbindung der APIs

Für die Kommunikation mit dem Push-Server haben wir uns bewusst für eine direkte Socketverbindung zum Server entschieden. Dadurch erreichen wir vor allem bei sehr hohem Traffic oder der massenhaften Versendung von Pushes (kein Spam, dazu unten mehr) einen höheren Durchsatz als über eine HTTP-API oder ähnliches. Und da unsere APIs in der Regeln direkt mit dem Server sprechen können, und der Server auch nicht von externen Usern oder Diensten angesprochen wird, war dies die beste Alternative.

Der Server selbst verarbeitet die ankommenden Pushes über einen internen Buffer, der diesen nach und nach und je nach Schnittstelle abarbeitet. So kann die Anlieferung der Pushes von den APIs ohne Verzögerung geschehen und der Server kümmert sich asynchron um den Versand. Die Erfahrung zeigt, dass die Pushes oft schneller am Server ankommen wie die Service von Apple und Google diese entgegen nehmen, auch wenn diese Schnittstellen in der Regel sehr schnell reagieren. Falls ein Push nicht zugestellt werden kann, kann dieser auch wieder, je nach Response vom APNs oder GCM, zurück in den Buffer gelegt werden.

Die Frag-Mutti App

Die iOS und Android App für Frag-Mutti, die wir 2012 für Frag-Mutti.de entwickelt haben, nutzt unseren Push-Server zur Versendung diverser Nachrichten direkt an die Apps. Darunter z.B. praktische Tipps zu Pfingsten oder den Tipp der Woche.

Die Apps sind aktuell auf knapp 200.000 Geräten installiert (Stand Mitte 2014) und in etwa die Hälfte aller User haben die Push-Nachrichten aktiviert. Wenn Frag-Mutti Pushes verschickt, geschieht dies in der Regel gesammelt innerhalb eines kurzen Zeitfensters. Genau hier hat der oben beschrieben Buffer seine Stärken. Wenn Frag-Mutti mehrere 10.000 Pushes auf einmal anliefert, legt der Push-Server diese in den internen Buffer und arbeitet einen nach dem anderen ab. So kann der Client seine Daten in kurzer Zeit versenden, ohne weiter auf den Server und die dahinter liegenden Apple- und Google APIs zu achten.

In Technischer Hintergrund, Unsere Projekte veröffentlicht

Mehrsprachigkeit mit PHP und Smarty

In vielen unserer Projekte ist für den Kunden Mehrsprachigkeit ein sehr wichtiges Thema. Sei es bei einer App, die in verschiedensprachigen AppStores veröffentlicht werden soll, bei einer Intranet Anwendung, die für Zweigstellen in verschiedenen Ländern bereitgestellt wird oder bei der neuen Firmenhomepage, die in mehreren Sprachen abrufbar sein soll.

Während manche unserer eingesetzten Frameworks & CMS-Systeme von Haus aus eine sehr gute Unterstützung von Mehrsprachigkeit mitbringen (z.B. die App-Entwicklungsumgebungen von Android und iOS), gilt es bei nativen PHP Projekten selbst für eine sinnvolle Integration verschiedener Sprachen zu Sorgen.
 Diese Integration von Mehrsprachigkeit in einem Software-Projekt erfordert eine gute Planung und konsequente Umsetzung des Features von Beginn an. Nur so lässt sich vermeiden, dass man am Ende der Entwicklung eine Codebasis steht, bei der die Mehrsprachigkeit unwartbar und tief im Code versteckt ist.
Am Beispiel unseres oft eingesetzten hauseigenen PHP Frameworks möchte ich vorstellen, wie wir die Mehrsprachigkeit sinnvoll in das bestehende System integriert haben.

Mehrsprachigkeit mit PHP

Der naive Implementierungsansatz ist es, die verschiedenen Sprachen per switch oder if-else Konstrukte direkt bei der jeweiligen Codestelle abzufragen und entsprechend auszugeben:

 if($config::getCurrentLanguage() == Config::ENGLISH) {
     echo "Hello";
 } if($config::getCurrentLanguage() == Config::SPANISH) 
     echo "Ola";
 } else {
     echo "Hallo";
 }

Dieser Ansatz hat aber einige gravierende Nachteile:

  • Keine zentrale Stelle zum Editieren des Texts
  • Hinzufügen einer neuen Sprache erfordert, dass alle Stellen im Code gefunden und angefasst werden
  • Die Programmlogik wird durch eine große Menge von „unnötigen“ if-else Konstrukten aufgebläht und der Code wird immer schwerer wartbar

Das grundlegende Ziel der Implementierung der Mehrsprachigkeit sollte deshalb eine gekonnte Trennung der Codebasis und der tatsächlichen Übersetzung sein. PHP bringt mit der Unterstützung von GNU gettext schon eine relativ elegante Möglichkeit mit, diese Trennung vorzunehmen.

Um gettext zu benutzen, werden alle Textausgaben innerhalb des Quellcodes in einen gettext Aufruf gekapselt:

    echo "Das ist ein toller Tag!";

wird zu

    echo gettext("Das ist ein toller Tag!");

    /*Alternativ kann auch _ statt gettext verwendet werden*/
    echo _("Das ist ein toller Tag!");

Beim Aufruf schaut gettext nun in den bereitgestellten Übersetzungsdateien nach, ob eine entsprechende Übersetzung vorhanden ist. Falls ja, wird der übersetzte Text ausgegeben, ansonsten der Original-String.

Die Übersetzungsdateien sind sogenannte .po (Portable Object) Dateien, welche folgendermaßen aufgebaut sind:

 msgid "Das ist ein toller Tag!"
 msgstr "It's a wonderful day!"

msgid ist dabei der eindeutige Identifikator des zu übersetzenden Strings (Es werden statt der sprechenden Standardübersetzung auch gern abstrakte Identifier wie WELCOME_TO_PAGE_GOOD_DAY verwendet. Der Programmierer muss selbst entscheiden, ob es sinnvoller ist, dass diese abstrakten Identifier oder der Text in der Ursprungssprache zurück gegeben werden, sollte keine Übersetzung gefunden werden.).

Hinter dem Schlüsselwort msgstr folgt nun die jeweilige Übersetzung für die unterstützten Sprachen. Es muss für jede unterstützte Sprache ein eigene solche .po angelegt werden. Diese Dateien werden danach mit dem Konsolenkommando msgfmt in binäre .mo (Machine Objekt) Dateien umgewandelt.

PHP entscheidet dann auf Basis der gesetzten Locale welche Übersetzung gebraucht wird und versucht das passende .mo zu finden und den entsprechenden String auszulesen.

Unterstützung der Template Engine Smarty

Unser selbstentwickeltes PHP-Framework setzt auf eine konsequente Trennung von Darstellung und Logik. Wir setzen deshalb die Template Engine Smarty ein, um diese Trennung zu erreichen. Smarty benutzt dabei zur Darstellung Template Dateien (HTML angereichert um Steuerungsanweisungen), welche durch eine korrespondiere PHP Datei befüllt werden.

 
 /*Beispiel eines Smarty Templates, Steuerungsanweisungen werden durch { } geskapselt*/
 <table>
 {foreach $persons as $person}
     <tr>
         <td>{$person->getName()}</td>
     <tr>
 </table>

Da der Text nun in diesem Template File und nicht mehr in PHP selbst stehen, müssen wir auf ein Smarty Plugin zurückgreifen, welches die gettext-Abfragen übernimmt. Nach intensiver Suchen und ausführlichen Tests hat sich das Plugin smarty3-i18n als beste Alternative heraus kristallisiert.

Eine einfache gettext-Anweisung sieht mit diesem Plugin in Smarty wie folgt aus:

 {t}Bitte geben Sie Ihren Namen ein:{/t}

Übergabe von Variablen

Oft ist der Text bei Anwendungen nicht komplett statisch, sondern abhängig vom aktuellen Zustand der Anwendung. Ein einfaches Beispiel dafür ist eine Willkommensnachricht für den User nach dem Login, bei dem der Benutzer mit seinem Namen begrüßt wird. Es ist dabei nötig, den Text in den Übersetzungsdateien mit dem Namen des Users aus der Datenbank anzureichern.

Dazu ist es möglich, Ersetzungsvariablen innerhalb der Übersetzungen zu definieren. Im unseren einfachen Beispiel würde das so aussehen:

  /*Die po-Datei*/
 msgid "Willkommen auf der Webseite, %1 %2"
 msgstr "Welcome to the website, %1 %2"
   /*Smarty Template, die Variable $user wird aus PHP gefüllt*/
   {t firstname=$user->getFirstname() lastname=$user->getLastname()}Willkommen auf der Webseite, %1 %2{/t} 

Bei der Ausgabe des Smarty Templates wird dann automatisch der Text um den Namen des Benutzers ergänzt und ausgegeben. Die Bezeichnung der Variablen ist dabei egal, es zählt bei der späteren Ersetzung nur die Reihenfolge mit der die Variablen übergeben werden.

In Unsere Projekte veröffentlicht

Testphase Bilderupload unter http://upic.cc

Das mit den Bilderuploads im Web ist so eine Sache. Im Zeitalter von Social Media und dem damit verbundenen Drang zur Selbstdarstellung, ist man es gewohnt, in einfacher Form Bilder ins Web hochzuladen. Problematiken zum Datenschutz oder auch Urheberrechtsverletzungen erscheinen eher zweitrangig. Der Upload muss einfach nur gut funktionieren und meine Freunde bzw. die Internetgemeinde muss (von mir) begeistert sein. Was aber machen die meisten Anbieter von Bilderuploads? Entweder werden die Bilder sehr komprimiert und verkleinert (siehe Dienste wie Facebook, WhatsApp, usw.) oder die Darstellung der Bilder ist mit Werbung und anderen störenden Elementen übersäht (siehe quasi alle anderen Image-Hostern). Was aber, wenn ich z.B. als Fotograf einfach mal kurz ein Bild meinem Kunden zeigen möchte, ohne Werbung, ohne große Datenschutzbedenken, vielmehr in Top Qualität?

Da wir des Öfteren derartige Anfragen bekommen haben, wurde beschlossen, ein kleines Projekt namens http://upic.cc zu starten und einfach mal auf unseren freien Serverkapazitäten anzubieten — selbstverständlich kostenlos! Folgende Funtionalitäten leistet upic.cc:

  • Ein Benutzer zieht einfach ein JPG-Bild mit der Maus ins Browserfenster oder wählt auf seinem Handy ein Bild aus
  • Nun findet eine clientseitige Komprimierung und evtl. Verkleinerung (wobei wir hier von einer „Verkleinerung“ auf 3200 Pixel sprechen) statt, um wichtige Bandbreite zu sparen
  • Der Uploadprozess wird mit einer Progress-Bar angezeigt. Hierfür liefert der Server immer eine präzise Rückmeldung zu den übertragenen Daten
  • Das fertige Bild wird im Vollbild dargestellt und kann nun über einen privaten Link geteilt werden
  • Nach 10 Tagen löschen wir das Bild, so bleibt es auch nicht ewig im Netz weil man es vielleicht längst vergessen hat. Außerdem möchte man ja eh nur „kurz das Bild zeigen“
  • Eine Übersicht über hochgeladene Bilder findet sich dann weiterhin auf der Startseite
  • Das ganze auf einer „coolen Domain“

Klingt das gut? Einfach mal ausprobieren: http://upic.cc

In Unsere Projekte veröffentlicht