Masterkonzept "eStudy2Go"

Aus THM-Wiki
Wechseln zu: Navigation, Suche
Kurs
Kursname Mobile Applications
Kurstyp Projektkurs
Dozent KQC
Semester SS 10
Studiengang Master

Projektvision

Im Rahmen des Masterkurses "Mobile Applications" im SS 2010 soll die Open-Source-Lernplattform "eStudy" als mobile Applikation für WebKit-Browser konzipiert, mit dem CSS/JavaScript-Framework jQTouch von David Kaneda designt und die mobil sinnvoll nutzbaren Module als MVC-Komponenten mit Zend Framework implementiert werden. Alle eStudy2Go-Module sind zu internationalisieren (i18n) und zu lokalisieren (l10n). Mit dem geräte- und plattformübergreifenden Framework PhoneGap soll eStudy2Go in die App Stores von Apple und anderen Smartphone-Anbietern (Google Android, BlackBerry, Palm etc.) gebracht werden.

Begleitende Projekte

Die mobile Applikation eStudy2Go soll im AGQLS-Projekt "Barrierefreier Zugang zu Lernplattformen" weiter entwickelt werden. Die WAI-Richtlinien und die BIENE-Kriterien sind unbedingt einzuhalten. Darüber hinaus wird im Projekt "Pharus" die Suchmaschine von eStudy neu konzipiert und implementiert. Die Facetten-Suche von Pharus soll auch in eStudy2Go als Navigationshilfe bzw. Navigationsersatz angeboten werden.

Mobile Funktionen von eStudy2Go

Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Prototyp "eStudy touch" aus dem WS 2008/09

Das Nutzungsverhalten von Smartphone-Usern unterscheidet sich signifikant vom Nutzungsverhalten von Desktop-Usern: Bedingt durch Displaygröße, Bandbreite, Fingerbedienung auf Touchscreen-Oberflächen und Ablenkungen oder Störungen in wechselnden mobilen Situationen ist nur eine Teilmenge der Funktionen der Web-Applikation eStudy mobil sinnvoll nutzbar. Fokussierte Aufgaben, die nur für wenige Minuten die Aufmerksamkeit des Users beanspruchen und ihm einen Mehrwert unterwegs geben, definieren die mobilen Funktionen.

Mobile und stationäre Funktionen können durchaus disjunkt sein. Smartphones offerieren standortbezogene Dienste: GPS, Google Maps, Kamera und Kompass. Darüber hinaus stehen die Mobilfunkdienste zur schnellen Kontaktaufnahme - Anruf, SMS oder E-Mail - überall und zu jeder Zeit zur Verfügung. Ein Tippen auf den Personennamen sollte stets alle drei Kontaktoptionen anzeigen, so dass mit zweimal Tippen die Person erreichbar ist.

Zunächst müssen diejenigen eStudy-Module identifiziert werden, die mobile Funktionen umfassen. Die Langzeiterfahrungen mit dem Prototyp, der im vorherigen Masterkurs im WS 2008/09 entstand, legen die folgende Modulauswahl nahe:

Die Teilnehmer des Masterkurses werden als erstes Teilziel die mobilen Funktionen der Module bestimmen und hierfür modulspezifische Designkonzepte erstellen, siehe die Links der obigen Module. Es muss gewährleistet werden, dass die volle Funktionalität von eStudy, also nicht nur die mobilen Funktionen, auf dem Smartphone aufgerufen werden kann. Hierzu wir auf jeder Seite von eStudy2Go in der oberen Toolbar rechts ein Desktop-Icon angezeigt. Dieses ist verlinkt mit der Desktop-Variante im aktuellen User- und Modulkontext. Der aufgerufene Style wird für Smartphones, insbesondere iPhone und Android, und fürs iPad optimiert. Der Desktop-Style orientiert sich an den Richtlinien der iPhone Human Interface Guidelines for Web Applications und Safari Web Content Guide von Apple.

Master-Designkonzept

Die erste Version von eStudy2Go verwendet den jQTouch-Stil mit schwarzer Toolbar. Alle Seiten (Login, Registrierung, Einstellungen, Startseite und Modulseiten) implementieren die automatische Listennavigation (edge to edge) und einheitliche Seitenübergangs-Effekte (Slide, Flip und Swap). Erweiterungen oder Änderungen des jQTouch-Stils erfolgen ausschließlich über CSS-Klassen.

Stil- und Funktionselemente

  • Webclip (Home-Button) mit eStudy-Favicon
  • Splash Screen mit eStudy2Go-Logo, Nennung aller Entwickler und aller verwendeten Open-Source-Komponenten
  • Modul- und Toolbar-Icons (GLYPHISH)
  • Fullscreen-Modus
  • Fortschrittsanzeige ("Loading")
  • Informationen und Hilfetexte mit der jQT-Extension "Floating Bar" über Toggle-Button
  • keine feststehende Tab-Leiste am unteren Rand
  • jQT-Extension "Auto Titles" für h1-Seitenheaders
  • Icon-Button "Desktop", oben rechts in der Toolbar auf jeder Seite, verlinkt mit dem aktuellen Skript des Desktop-Moduls (Semantik: "Alle stationären Funktionen im aktuellen Kontext")
  • Synchronisations-Icon links neben dem Desktop-Icon
  • Datumsauswahl mit dem Spinning Wheel
  • Mengenangaben mit der CSS-Klasse small.counter (weiße Zahl auf grauem Hintergrund)
  • Cancel-Button mit class="grayButton goback"
  • Submit-Button mit class="whiteButton submit"
  • Der Wechsel von der Startseite in die Module wird mit "Slide" animiert.
  • Der Wechsel in die Desktop-Ansicht wird mit "Swap" animiert. Es erscheint eine Seite mit einem Hinweis, dass ein neues Browser-Fenster mit der Desktop-Variante geöffnet wird, dadrunter ein Go-Button und ein Abbrechen-Button.

Element- und seitenspezifische Auszeichnungen (#login, #einstellungen etc.) sind nicht per Inline-CSS zu bewerkstelligen, sondern ausschließlich in estudy2go.css. Die Datei jqtouch.min.css bleibt unberührt. Anregungen für eStudy-spezifische Auszeichnungen, die CSS3-Effekte nutzen (text-shadow, -webkit-gradient() etc.), sind dem Video von PeepCode zu entnehmen: Kapitel "Styling".

Funktionale Erweiterungen per JavaScript sind in der Datei estudy2go.js einzubringen, jqtouch.min.js bleibt unberührt.

Seitenorganisation der Module

Alle Module implementieren die horizontale Listennavigation mit Slide-Animation und Swipe-Geste (Wischen), wobei die erste Seite die Hauptkategorien, die folgenden Seiten die Unterkategorien und die letzte Seite den Content anzeigen. Nur der Content eines Moduls soll vertikal navigiert werden:

  • Nachrichten -> Eingang/Ausgang (Hauptkategorien) -> Übersicht (Unterkategorien) -> Detail-Ansicht der Nachricht (Content)
  • Mitglieder -> Leitung/Tutoren/Teilnehmer (Hauptkategorien) -> Mitglieder (Content)
  • Aushang -> Überschriften (Hauptkategorien) -> Mitteilungen (Content)
  • Dateien -> Hauptordner (Hauptkategorien) -> Unterordner (Unterkategorien) -> Dateien & Links (Content)
  • Forum -> Boards (Hauptkategorien) -> Threads (Unterkategorien) -> Postings (Content)
  • FotoForum -> Alben (Hauptkategorien) -> Threads (Unterkategorien) -> Bildzitate/Postings (Content)
  • Literatur -> Amazon-/AbeBooks-Bücher/eBooks/Links (Hauptkategorien) -> Cover/Empfehlung/Kommentare (Content)

Es ist zu prüfen, ob die Module Termine und Planer auch das iCal-Interface jQTouch iCal einsetzen können.

Darstellung von Bildern

Die Touchscreen-Displays der anvisierten Handy-Plattformen, insbesondere des iPhones, weisen eine hohe Auflösung auf, so dass unter Ausnutzung der visuellen WebKit-Effekte elegante Bilddarstellungen (Cover Flow und 3D-Wand à la Cooliris) möglich sind. Für alle Module, die Bildmaterial anzeigen, wie FotoForum, Literatur und Mitglieder, soll eine animierte Bildershow mit entsprechenden JavaScript- und CSS-Bibliotheken realisiert werden. Die derzeitige Recherche hat die folgenden Bibliotheken als mögliche Kandidaten entdeckt:

  • "zFlow" auf dem iPhone
  • "Snow Stack" auf dem Desktop

Siehe die Projekt-Homepage beider Bibliotheken.

Darstellung von Datum und Uhrzeit

Um eine möglichst prägnante und schnelle Wahrnehmung von Kalenderdaten und Uhrzeiten zu erreichen, soll stets folgendes Format verwendet werden:

  • Tage, die +/- 2 Tage von heute liegen, werden nicht in der Form TT.MM.JJ sondern umgangssprachlich angezeigt:
    • Vorgestern, Gestern, Heute, Morgen, Übermorgen
  • Vergangene Wochentage werden bis zu 6 Tagen zurück mit Namen angezeigt, zum Beispiel:
    • Wir haben heute Samstag, also werden Ereignisse, die bis zu 6 Tagen zurückliegen, angezeigt als: Gestern, Vorgestern, Mittwoch, Dienstag, Montag, Sonntag.
  • Die Uhrzeit wird im Format SS:MM angezeigt, ohne "Uhr" und nur mit einem Leerzeichen vom Datum getrennt, zum Beispiel:
    • Heute 12:30
    • Übermorgen 23:45
    • 05.06.10 11:20

Kalenderdaten sollen nach Möglichkeit mit der iPhone-App "Kalender" verlinkt werden (PhoneGap-Funktion).

Seitenlayouts

Login-Seite

Toolbar:

  • linker Icon-Button: "Einstellungen"
  • Titel: eStudy2Go
  • rechter Icon-Button: "Desktop"

Listenelemente:

  1. Name
  2. Passwort
  3. Login
  4. Gast-Zugang (Flip-Effekt)
  5. Info (Slide-Up-Effekt)

Startseite: Anzeige von Suchtreffern und Ereignissen

Toolbar:

  • linker Icon-Button: "Logout"
  • Titel: eStudy2Go
  • rechter Icon-Button: "Desktop"

Die ersten drei Listenelemente der Startseite von Foyer und Kursen/eComs sind:

  1. Kurs/eCommunity-Auswahlliste
  2. "Neues seit ..."-Auswahlliste
  3. Suchfeld (Pharus-Projekt)

Neue Ereignisse und die Treffer einer Suchanfrage werden hinter den Modul-Listenelementen platziert (CSS-Klasse "counter": Treffer in Olivgrün, Ereignisse in Weinrot, Online-Buddies in Eigelb).

Einstellungen

Toolbar:

  • linker Button: "Zurück"
  • Titel: Einstellungen
  • rechter Button: -

Listenelemente:

  1. Sprachauswahl (Default: Englisch, optional: deutsch, türkisch)
  2. jQTouch-Stil (Default: jQT, optional: Apple)
  3. Bild-Upload (siehe "Technische Vorgaben")
  4. Foren-Signatur

Registrierung

Für die mobile Applikation eStudy2Go wird eine besondere Gast-Registrierung angeboten: Die Gast-Registrierung ist in den stationären Admin-Settings aktivierbar. Gast-Accounts müssen nicht von einem Administrator einzeln freigeschaltet werden; sie werden nach einer einstellbaren Zeit automatisch gelöscht.

Technische Vorgaben

  • Der aktuelle Benutzerkontext (wo befindet sie/er sich, Kurs oder eCom, in welchem Modul?) wird in der Session mitgeführt, um bei einem versehentlichen Schließen von eStudy2Go nach wiederholter Anmeldung direkt an den letzten besuchten Ort zu gelangen.
  • Alle statischen Seitenobjekte sind lokal zu cachen (HTML5: dynamischer Cache-Manifest-Eintrag). Eine clientseitige SQLite-Datenbank ist für alle eStudy2Go-Module anzulegen und geeignet zu befüllen.
  • Die Migration in den iTunes App Store soll über die Plattform PhoneGap erfolgen. Die dortigen Zugriffsmöglichkeiten auf die iPhone-Hardware und -Dienste sollen nach Möglichkeit genutzt werden, zum Beispiel:
    • Accelerometer: Ausloggen aus eStudy2Go durch Schütteln des iPhones
    • Kamera fürs FotoForum und Bild-Upload unter "Einstellungen"
    • Kontakte, Geolocation, Maps fürs Mitgliedermodul
    • Sound/Vibration beim Eintreffen neuer Nachrichten

Screencasts

An dieser Stelle dokumentiert jeder Modulbauer die mobilen Funktionen seines Moduls mit einem Screencast-Video, erstellt mit Camtasia und SimFinger.

Screenshots von eStudy2Go im iPhone-Simulator

Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Fehler beim Erstellen des Vorschaubildes: Datei fehlt

Screenshots von eStudy2Go im iPad-Simulator

Im Gegensatz zum alten Prototyp "eStudy touch" aus dem WS 2008/09 skaliert das jQT-Design in WebKit-Browsern und im iPad:

Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Fehler beim Erstellen des Vorschaubildes: Datei fehlt

Quellen und Literatur


--KQC 13:11, 3. Sep. 2010 (CEST)