ASSA ABLOY Browserspiel

ASSA ABLOY Browserspiel

Browserspiel

Das ASSA ABLOY-Browserspiel entstand im Rahmen der Fußball-WM . Unser Team ist stolz darauf, dieses Projekt realisiert zu haben und Sie können es hier selbst spielen! Keine Angst, in dieser Version werden keine Daten erhoben und kein Newsletter wird versandt.

In diesem Spiel sind Sie der Torwart! Ziehen Sie die Türschließer auf eine der drei Türen, um einen Schuss auszulösen und um zu sehen, ob Sie den Ball “gehalten” haben!

Umsetzung

Die Umsetzung des Spiels erfolgt ohne einen Einsatz von Flash, sondern rein mit den Möglichkeiten, die durch HTML5, CSS3 und JavaScript gegeben sind. Nach einem Entwurf des Spieldesigns und des Spiels wurden passende Sounds herausgesucht, die den Spielverlauf unterstützen. Die Animationen sind bewusst einfach gehalten und die einzigen Effekte, die das Spiel sich leistet, sind das “Yeah” und “Oooh” bei den jeweiligen Treffern- oder eben bei gehaltenen Bällen. Der Effekteverzicht erfolgte zugunsten einer echt zufälligen, und physikalisch zumindest nachvollziehbaren Ballbewegung.

Features

Neben der Umsetzung des eigentlichen Spiels wurde ein Newsletter-System integriert, mit dem die Teilnehmenden an einer Verlosung teilnehmen können. Das Newslettersystem merkt sich die gehaltenen Bälle (die übrigens keinen Einfluss auf die Verlosung haben) und mailt die Daten anschließend an den Kundenserver. Das Newslettersystem erscheint am Ende des Spiels und kann in unserer hier eingebundenen Demo ebenfalls angesehen und getestet werden, verschickt aber keine Mails.

Herzlichen Dank für die angenehme und professionelle Zusammenarbeit. Nicht nur wir, sondern auch der Kunde ist mit dem Ergebnis sehr zufrieden. Wir wurden dabei nicht nur bei der Umsetzung unterstützt, sondern mit Ihrem Fachwissen tolle Anregungen eingebracht. Ein weiteres Sternchen gibt es für die tolle Erreichbarkeit und schnelle Umsetzung von Änderungen.

Sarah Danielle Hein

DieLeuteFürKommunikation

Slidecast jQuery Mobile Solution

Slidecast jQuery Mobile Solution

Beim diesem Projekt handelt es sich um eine Webanwendung (WebApp), welche es ermöglicht, Präsentationen in Verbindung mit Grafiken, Audio, Video und sogar HTML-Elementen einer Vielzahl von Interessierten gleichzeitig zur Verfügung zu stellen. Sie verfolgt damit das Prinzip einer verteilbaren Slidecast-Anwendung.

 

Definition von WebApps

 

Der Begriff setzt sich aus dem Englischen zusammen und bezeichnet eine App(likation), also Anwendungen für mobile Endgeräte, die meist über einen in das Betriebssystem integrierten Browser direkt aus dem Internet heraus geladen und ohne Installation benutzt werden können.

Es handelt sich also prinzipiell also für Smartphone-Displays optimierte Webseiten, die versuchen, das „Look&Feel“ nativer Anwendungen nachzubilden.

WebApps Entwicklung

jQuery Mobile App geöffnet auf Samsung Tablet
jQuery Mobile App geöffnet auf Samsung Smartphone

Warum WebApps und jQuery Mobile?

Viele Nutzer sind aufgrund potentiell vorhandener Schadsoftware in den App Stores sehr vorsichtig geworden. WepApps unterstützen den Nutzer in der Art, dass keine Installation notwendig ist und die Anwendung auch keinen Zugriff auf die Soft- und Hardware des Smartphones hat. Prinzipiell sind diese Art von Anwendungen auch sicherer gegen Raubkopierer. Dadurch, dass sich die Anwendung auf dem Server befindet und dynamisch Inhalte generiert, kann diese nicht einfach kopiert und eventuell für betrügerische Aktionen verwendet werden. Bei nativen Apps könnten persönliche Daten ohne das Wissen des Anwenders im Hintergrund weitergesendet werden. Ein weiterer Vorteil ist, dass die Anwendung von allen Geräten mit Internetzugang aufgerufen- und beispielsweise auf gespeicherte Daten zugegriffen werden kann. Spiele könnten, um ein Beispiel zu nennen, auf dem Smartphone angefangen und dann einfach am Rechner weitergespielt werden, ohne kompliziert Daten zwischen diesen Geräten auszutauschen. Es wird auf bekannte und bewährte Technologien zurückgegriffen, wodurch eine hohe Zukunftssicherheit garantiert wird.

jQuery Mobile ist ein auf Berührung optimiertes Web-Framework für Smartphones und Tablets. Es bietet zahlreiche Unerstützungsmöglichkeiten zur Erkennung von Berührungen, Gesten und sonstigem. Es werden eine Vielzahl von Browsern unterstützt, weitere können bei ausreichend Programmierkenntnissen ebenfalls hinzugefügt werden.

Wieso überhaupt neu implementieren? Es existieren doch bereits haufenweise Möglichkeiten, Präsentationen zu verteilen.

Natürlich existieren bereits verschiedene Möglichkeiten, wie beispielsweise Präsentationsdokumente einfach per E-Mail zu verteilen, PDFs zu generieren oder Plattformen wie www.slideshare.net zu benutzen. Die Vorteile dieses neuen Ansatzes sind unter anderem die folgenden:

 

Grafik und Audio getrennt, kein Video!

 

Oft ist es bei Konferenzen so, dass die Präsentationen aufgenommen und im Web als Video zur Verfügung gestellt werden. Dies entspricht natürlich einem großem Datenvolumen. Außerdem benötigt man, um das Video anzuschauen, fast immer zusätzliche Plugins wie beispielsweise den Adobe Flash Player. Smartphones unterstützten diese Plugins meistens nicht, und falls doch, wird der Akku in kurzer Zeit regelrecht leer gesaugt. Unterwegs existiert zudem manchmal kein WLAN-Zugriff. Die fertigen Videos sind meist mehrere hundert Megabyte groß. Dies belastet das mobile Netz natürlich enorm und kann zu sehr langen Ladezeiten führen.

 

Audiodateien müssen nicht geladen werden!

 

Sofern man über keine Internetflatrate verfügt, kostet mobiles Datenvolumen eine Menge, sodass man hier gerne die Wahl haben möchte, welche Inhalte man laden lässt. Durch den Fallback auf die rein textbasierte Ansicht kann auch hier das übertragene Volumen erheblich reduziert werden.

 

Keine Installation, keine Zusatzsoftware

 

Direkt in nahezu jedem Browser abspielbar

 

Präsentation einfach als HTML-Markup in einer Datei definierbar

 

Es ist kein zusätzliches Programm zur Erstellung der Präsentationen nötig. Geplant war hier ein Online-Editor, welcher auch HTML-Laien unterstützt. Für Erfahrenere in dem Bereich sollte es kein Problem darstellen, Präsentationen zu erstellen.

 

Kommunikation durch Kommentare

 

Durch die Implementierung einer Kommentarfunktion können Kommentare an einzelne Folien, die gesamten Präsentation oder auch an Aussagen (Zeitpunkte) geheftet werden. Dadurch können Nutzer Diskussionen führen und auch Fragen zu konkreten Aussagen stellen.

 

Power des Web nutzbar

 

Dadurch, dass es sich um eine Webanwendung handelt und der Code entsprechend strukturiert wurde, ist es möglich nahezu alle Eigenschaften des Webs zu nutzen (Videos, Social Media – „gefällt-mir-Button“, …)

 

Barrierefrei (Screenreader)

 

Durch einen Screenreader kann auch eine Barrierefreiheit erreicht werden und beispielsweise Hör- oder Sehbeeinträchtigte Personen können diese Präsentationsform nutzen.

 

Kann man diese Lösung auch kaufen oder lizenzieren?

 

Aber sicher können Sie das! Wir sind auch in der Lage, flexibel auf Ihre Wünsche einzugehen und die Anwendung nach Ihren Vorgaben Um- oder auszubauen. Treten Sie dafür einfach mit uns in Kontakt.

Shopware T-Shirt-Designer

Shopware T-Shirt-Designer

Shopware Entwicklung

Shopware T-Shirt Designer, geöffnet auf einem Microsoft Surface

Für die Shopsoftware „Shopware 4“ (https://www.shopware.de/) wurde ein Poster-Designer entwickelt, welcher es ermöglicht, beliebige Motive hochzuladen oder eine bestehende Galerie zu verwenden.

Für ein ausgewähltes Motiv stehen weitere Funktionen zur Verfügung, beispielsweise „Ausschnitt wählen“, „Schwarz/Weiß“ oder „Drehen“. Ebenfalls konzeptioniert – aber nicht umgesetzt – war eine “Text hinzufügen”-Funktion, mit der ein Kunde Schriftart, Farbe und Position des Texts bestimmen konnte.

Der Vorteil dieser Lösung war, dass es sich um keine Plugin-Technologie handelte, sondern alles mit Webtechnologien umgesetzt wurde. Neben HTML5 wurden auch Fallbackmechanismen eingebaut und nur im Notfall auf Flash zurückgegriffen.

Die Lösung wurde in die bestehende Software integriert, wodurch tiefe Eingriffe notwendig waren. Mit Hilfe von zusätzlichen Datenbanken respektive Skripten wurde dieser Eingriff ermöglicht. Somit stehen einem potentiellen Käufer in der Detailansicht eines Produktes dann die neuen Optionen zur Verfügung.

Individuelle Modul- und Schnittstellenentwicklung

Individuelle Modul- und Schnittstellenentwicklung

Schnittstellen Entwicklung

Schnittstellenentwicklung Symbolbild mit Puzzle auf Macbook

Als Unterauftrag für ein erfolgreiches Softwareunternehmen haben wir ein mehrmonatiges Großprojekt umgesetzt. Dabei ging es um die individualisierte Schaffung einer Schnittstelle eines proprietären Warenwirtschaftssystems für Joomla/Virtuemart. Dabei gab es zahlreiche technische Hürden zu bewältigen: Wie werden die Daten abgeholt? Wie sollen die Daten letztlich dargestellt werden? Hier geben wir einen kurzen Überblick über das Projekt und unsere Herangehensweise.

Problemstellung

Das Problem sah wie folgt aus: Der Kunde stellt ein proprietäres Warenwirtschaftssystem zur Verfügung, dass über eine enorm große Datenbank im Hintergrund verfügt. Das System wird kontinuierlich gepflegt und verändert. Aus den dort hinterlegen Datensätzen werden beispielsweise Kataloge generiert oder Kunden Auskünfte erteilt. Das System verfügt über mehrere Schnittstellen, unter Anderem auch standardisierte Abfragen über MySQL. Das war unser Ansatzpunkt: Der Kunde wollte, dass der Katalog ohne weiteres Zutun von außen dynamisch in einen webbasierten Katalog hinein geladen wird, durchsuchbar gestaltet wird und dabei zu jedem Artikel einer immer gültige URL sowie einen QR-Code generiert und über viele Eigenschaften Filter- und Suchbar eingegrenzt werden kann. Die Lösung sollte sowohl modular für den Einsatz in Joomla als auch später für Typo3 und auch als komplette Einbindung in ein Shopsystem konzipiert werden.

Herangehensweise

Zunächst haben wir uns das Problem vom Kunden ausführlich erklären lassen und Meilensteine gemeinsam mit diesem festgelegt. Aus diesen Meilensteinen wurde zunächst ein Kostenvoranschlag erstellt und danach in alle beteiligten Systeme eingearbeitet. Anschließend wurde auf Grundlage dieser Einarbeitung ein Prototyp erstellt, welcher die grundsätzliche Funktionalität des Systems demonstrieren und sicherstellen sollte. Dieser Prototyp war bereits nach einem Arbeitstag einsatzfähig.

Nach einer Schnittstellekonzeption und -Ausarbeitung folgte die Recherche nach funktionalen Lösungen für das Content Management-System „Joomla“, auf deren Basis wir unsere Lösung aufsetzen konnten. Schnell fand sich mit „VirtueMart“ eine populäre und vielversprechende Plattform, dessen Technologie wir nutzen konnten und schrittweise erweitert haben.

Dabei mussten wir direkt zwei Anbindungen schaffen und einen Übersetzer schreiben: Auf der einen Seiten wird die proprietäre Struktur des Warenwirtschaftssystems des Kunden ausgelesen, durch unser System übersetzt und genormt und auf der anderen Seite wieder ausgegeben bzw. in VirtueMart eingelesen. Alleine dieses Modul ist mit seinen mehreren tausend Zeilen Code, verteilt über eine wohl-strukturierte Architektur in PHP ein absolutes Unikat.

Zusätzlich zu diesem Übersetzer wurden mehrere Anpassungen in der Darstellung notwendig. Hierbei haben wir die gewünschte Funktionalität so weit wie möglich mit bereits verfügbaren Modulen angenähert, um Kosten des Kunden zu minimieren. Diese Module wurden von uns weitergehend angepasst, beispielsweise wurden die URLs des Frontends „sprechend“ gestaltet – und man kann damit nun sowohl Produkte als auch beliebige Produktstrukturebenen ansprechen, was so ohne weiteres nicht möglich war, insbesondere können durch unsere Anpassung nun beliebig viele Kategorien und Strukturebenen vergeben werden, da die Datenbank dynamisch in ihre Bestandteile zerlegt wird. Die Implementierung wurde dabei völlig losgelöst von Virtuemart und dem Design gestaltet, das heisst im Klarext: Man kann ein beliebiges Joomla mit Virtuemart nehmen und unsere Erweiterung “drauf loslassen” und Virtuemart wird dann mit den Daten des WWS gefüttert und modifiziert. Das macht die Lösung hochportabel! Ebenso wurde eine Umsetzung in Typo3 bereits vorgesehen und dementsprechend aufbereitet.

Besonderheiten und Sonderfunktionen

Dort, wo in der Datenbank Bilder zu Produkten vorhanden sind, wollte der Kunde, dass die Bilder automatisch importiert und im Frontend zugeordnet werden. Dabei werden sowohl verschiedene Größen für Thumbnails generiert als auch für die Endansicht.

Zu jedem Produkt gibt es im Frontend eine Funktion zur Generierung eines PDF, „Ask a question“, zum Mailen/Teilen usw. Weiterhin kann der Kunde und der Nutzer nun Produkte dynamisch filtern und fein abstimmen, welche Eigenschaften überhaupt zum Filtern angezeigt werden. Ebenfalls kann der Kunde im Backend für jeden Artikel nochmals gesondert einstellen, welche Eigenschaften er überhaupt anzeigen lassen will, welche Informationen ein Artikel beinhaltet und welche Funktionen einem Nutzer bei der Artikelübersicht zur Verfügung stehen. Dies kann schon auf Datenbankseite im Warenwirtschaftssystem flexibel bestimmt werden! Titel und Bezeichner können dabei dynamisch auch auf Datenbankseite geändert werden, ohne dass die QR-Code-Generierung hiervon beeinflusst wird: Einmal gesetzte Links bleiben gültig.

Ebenso kann bestimmt werden, ob man mit Checkboxen, Radio Buttons, Dropdowns etc. sortieren/filtern möchte. Das Filtern funktioniert dabei ohne Neuladen der Seite in Echtzeit. Die Filterung passt sich dabei dynamisch an. Hierfür wurde eine Erweiterung komplett angepasst und umgeschrieben, sodass diese sowohl wahlweise mit Ajax als auch ohne Ajax funktioniert.

Die gesamte Lösung ist als Shop vorbereitet und kann ebenfalls mit Preisen belegt werden, wenn dies gewünscht ist. Ferner wurde die Anbindung an die Datenbank so dynamisch gestaltet, dass der Kunde die Datenbank per Funktion im Backend jederzeit oder auch teilweise neu einlesen kann, oder dies auch per Befehl von Außen („Cronjob“) anstoßen kann. Dazu wurde eine weitere Schnittstelle nach Außen hin geschaffen und der Backend-Bereich von Virtuemart erweitert.

Google Maps® API

Google Maps® API

Im Rahmen dieses Auftrages wurde ein Skript entwickelt, welches auf die Google Maps API aufsetzt um Postleitzahl-Gebietsgrenzen anzuzeigen. Kombiniert wurden dazu die Google Maps API, die Google Geolocation API sowie die Google Fusion Tables API. Als Basisdatensatz für die Gebietsgrenzen wurde der folgende, als public domain verfügbare Datensatz verwendet. Dieser musste noch angepasst und konvertiert werden.

Google Geolocation API

Google Maps® PLZ Suche Ausschnitt
Google Maps® API Postleitzahlengebiete auf einem Macbook

Zusätzlich werden alle Gebietsgrenzen über einen Marker (der PLZ) noch kenntlich gemacht. Dieser Marker ist auch anwählbar, wodurch sich ein Popup öffnet, welcher wieder mit beliebigem Text ausgestattet werden kann. Im Beispielbild ist zu sehen, dass die Postleitzahl angezeigt wird, ebenso wie ein weiterer Text mit einem Link, welcher ebenfalls die PLZ beeinhaltet, sodass diese für andere Zwecke weiterverwendet werden könnte.

Das Skript reagiert auf GET-Parameter im Browser, welche die Farbe und Auswahl der Postleitzahlen bestimmen. Ein Beispielaufruf mit nur einer Postleitzahl sähe mit den Standardeinstellungen wie folgt aus: ?script.php?zip=46509&mColor=ff0000. Die Parameternamen sind beliebig änderbar.

Da das Ziel des Projekts dahinging, umliegende Postleitzahlen zu einer Hauptpostleitzahl mit zwei verschiedenen Farben markieren zu können, existieren zusätzlich noch weitere Parameter: script.php?zip=46509&mColor=ff0000&rZip=46459,47665&rColor=0000ff&fZip=46487&fColor=00ff00.

Wie im Beispiel zu sehen ist können auch mehrere Postleitzahlen angegeben werden, in dem Falle durch Komma getrennt. Auch der Seperator kann beliebig geändert werden. Das Skript nimmt also 3 verschiedene Arten von PLZ mit jeweils einer Farbe entgegen und stellt diese auf einer Google Maps Karte farbig dar.

Der Vorteil an der Implementierung ist, dass das Skript in bestehende Webseiten integriert werden kann. Entweder als dynamisch bewegliche Karte, oder als Bildausschnitt. Ein mögliches Einsatzszenario könnte ein Shop sein, welcher verschiedene Produkte nur in bestimmte Regionen liefert. Das Skript könnte in der Detailbeschreibung der Produkte eingebunden werden und die Regionen in die das Produkt geliefert werden kann in zwei Farben darstellen, für “sofort lieferbar” oder “derzeit ausverkauft”. Das Skript kann aber auch um weitere Farben und PLZ-Arten erweitert werden, sodass eine Vielzahl weiterer Einsatzszenarien möglich wären.