Interaktiver HTML5-Blätterkatalog für iPad

Bachelorthesis

Die Bachelorarbeit beschreibt die technische Umsetzung und Realisierung eines interaktiven Blätterkataloges auf HTML5-Basis für iPad und moderne WebKit-Browser. DIe Arbeit entstand während meines Praxissemesters bei der Firma Laudert im Bereich IT-Solutions.

Schwerpunkte bei der Implementierung

  • Stufenlose Skalierung der Katalogseiten unter Verwendung von Zoomify-Bildkacheln.
  • Animierter Seitenwechsel und Prototyp eines realistischen Blättereffekts auf Canvas-Basis.
  • Gesamtseitenübersicht als Bildstreifen mit intuitiver Navigation.
  • Einzel- und Doppelseiten-Ansicht durch Erkennung des Orientierungswechsels des iPad-Bildschirms.
  • Gestenerkennung für die Zoom- und Wisch-Gesten auf dem iPad Multi-Touch Display.
  • Offline-Verfügbarkeit der Web-Anwendung.
Interaktiver HTML5-Blätterkatalog für iPad 01 Vorschaubild Interaktiver HTML5-Blätterkatalog für iPad

 

02 Oberfläche der Webkatalog-Anwendung Interaktiver HTML5-Blätterkatalog für iPad

 

03 Veranschaulichung des Seitenwechsels durch eine Wisch-Geste nach links oder rechts

 

Abstract

Die Bachelorarbeit beschreibt die technische Umsetzung und Realisierung eines interaktiven Blätterkataloges auf HTML5-Basis für Apples Tablet-Computer iPad und moderne WebKit-Browser. Es wurde eine eigene Softwarelösung geschaffen, welche auf die Nutzung kommerzieller Dritthersteller Software verzichtet.

Die WebCatalog-Anwendung wurde mit aktuellen Web-Technologien in Form eines jQuery-Plugins umgesetzt. Das Kernthema der programmtechnischen Umsetzung der grafisch komplexen Anwendung waren die Implementierung der stufenlosen Skalierung der Katalogseiten unter Verwendung des bestehenden Datenbestands mit dem Canvas-Element, sowie die Offline-Verfügbarkeit der Web-Anwendung.

Zahlreiche iPad-spezifische Besonderheiten wurden bei der Entwicklung berücksichtigt, u.a. der Orientierungswechsel des Bildschirms oder die Erkennung und Auswertung von Gesten auf dem berührungsempfindlichen Bildschirm des Geräts.

Der entwickelte Prototyp wird in Zukunft um weitere Funktionen ergänzt, sodass ein vollwertiges Software-Produkt entsteht, welches dem Kunden angeboten werden kann. Die Etablierung am Markt wird entscheidend für die Weiterentwicklung des Produktes sein.

This bachelor thesis presents a solution for a technical implementation and realisation of an interactive web catalogue, based on HTML5 code for Apples iPad and recent WebKit browser applications. In order to not abandon the usage of already existing commercial third party software, a new software solution was created.

The use of state of the art web-technologies allowed for the realisation of the web based catalogue application in the form of a jQuery-plugin. The main focus, during the programming of the highly complex graphic application, was put on implementing the progressive scaling ability of the catalogue pages with the canvas element. Simultaneously, the web application had to utilise the already existing database, as well as having the capability of an offline usage.

Numerous iPad specific characteristics had to be considered, for example, the rotating of the screen or the recognition and evaluation of gestures on the touch sensitive iPad screen. The developed prototype will be supplemented with further functions, which will enable the creation of a valuable software product, ready to be sold to customers. The establishment of the product on the market will be crucial for further development.