Umsetzung

Demo

Die nebenstehende Anwendung zeigt unseren Prototypen einer personalisierten News-Seite. Die Integration der Anwendung auf dieser Webseite funktioniert leider nicht richtig, da das dahinter stehende JavaScript nicht erkannt wird bzw. durch andere definierte Scriptfunktionen dieser Seite blockiert wird. Deshalb ist unsere Demo für den Desktop-PC auf folgender Seite zu finden:
http://141.76.66.11/werkstatt/setzkasten/Gruppe_01/Phone_DesktopVersion/indexPhone.htm
Für den Smartphone-Nutzer ist ein Prototyp über:
http://141.76.66.11/werkstatt/setzkasten/Gruppe_01/Phone/indexPhone.htm
erreichbar.

Kategorieauswahl:
Der Nutzer wählt sich die gewünschten Kategorien aus, indem er diese in den rechten oberen Bereich zieht. Zum Bestätigen seiner Auswahl steht ein Button links unten zur Verfügung. Sollte das Endgerät Gesten unterstützen, so genügt zum Bestätigen auch eine "Check-Geste" (Hacken).

Artikelauswahl:
In der Artikelansicht hat der Anwender die Möglichkeit, die Artikel alphabetisch zu ordnen. Als Geste wurde hierfür das "A" gewählt. Zu zeichnen ist dabei nur ein "A" ohne Querstrich. Sollte die Gestenerkennung nicht möglich sein, so existiert auch für diese Funktion ein Button unten links.
Der Nutzer kann Artikel, welche für ihn uninteressant erscheinen, löschen, in dem er diese zum rechten Rand hinzieht. Für die Auswahl eines Artikels genügt ein Tap/ Klick auf das Objekt.

Artikelansicht:
In dieser Ansicht kann der Nutzer eines Smartphones durch die Artikel blättern, in dem er auf diesen eine Swipe-Geste ausführt. Für die Desktop-Demonstration existieren Buttons in Pfeilform.

Navigation:
Die blauen Ecken im oberen Bereich dienen der Navigation. Dabei kommt man durch Ziehen der linken Ecke zurück zur Artikelauswahl und durch Ziehen der rechten zur Kategorieauswahl.


  • Sport
  • Politik
  • Lokales

OK

 




Umsetzung

Für die Implementierung des Prototypen haben wir jquery verwendet. Für die Umsetzung der Gesten wurde GeForMT genutzt. Um das blättern in der Artikelansicht zu realisieren haben wir jquery.touchwipe.min.js verwendet.

 




Probleme

Bei der Implementierung unserer Idee stellte sich als grundlegendes Problem heraus, dass eine Vielzahl an unterschiedlichen Smartphone-Browsern existiert, wobei jeder Browser andere spezielle Funktionen anbietet. Darüber hinaus scheinen die Browser nicht alle bekannten HTML bzw. CSS Elemente zu unterstützen.