MApps: Optimierung des eStudy Moduls Planer für iPhone

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Das eStudy-Modul "Planer" besitzt eine für das iPhone optimierte Darstellung, welche mit Fehlern gespickt ist. Wir zeigen diese bisherige Darstellung, analysieren die Desktop-Variante und schlagen eine verbesserte Version für das iPhone vor.

Dokumentation
Arbeitstitel MApps: Optimierung des eStudy Moduls Planer für iPhone
Kurs Mobile Applications
Semester SS 10
Teilnehmer Christoph Thelen



Kurzanalyse der Desktop-Version

Die Desktop-Version des Planers unterscheidet nur zwischen Dozenten- und Studentenfunktionalität. Administratoren haben keine zusätzlichen Rechte, sie können lediglich all das, was auch einem Dozenten erlaubt ist. Ebenso dürfen die Benutzergruppen Sekretariat, Alumnus, Schüler und Gast das Gleiche wie auch ein Student. Wir skizzieren im Folgenden, welche konkreten Anwendungsfälle von welcher Benutzergruppe ausgeführt werden können. Danach betrachten wir kurz anhand von Screenshots den bisherigen iPhone-Zugang.

Benutzergruppen

Dozent/Admin

  • Neuer Planungsabschnitt
  • Planungsabschnitt editieren
  • Planungsabschnitt löschen
    Löschen eines Abschnittes (Dozent/Admin)
  • alle/einzelne Planungsabschnitte in den Kalender eintragen (bzw. aktualisieren)
Hauptseite (Dozent/Admin)

Eingaben für einen neuen Planungsabschnitt:

  • Überschrift
  • Text
  • Planungstermin (von und bis)
  • Für welche Zeitspanne sichtbar? (von und bis)
  • Für welche Benutzergruppen sichtbar? (Dozent, Dozent+Tutor, Alle)
  • Quellen anfügen (Literatur aus dem Kurs + Foyer, Dateien, Forum; defekt!)

Alle (außer Dozent/Admin)

  • Zeige auch kommende Abschnitte (Bug: zeigt Abschnitte aus der Vergangenheit, sollte außerdem für alle sichtbar sein)
Hauptseite (Student)

Alle

  • alle/einzelne Planungsabschnitte als PDF anzeigen
  • alle/einzelne Abschnitte auf- und zuklappen (Bug!)
  • Filtern nach Dateien, Literatur, Links, Forenbeiträgen

Es wird kein Unterschied zwischen den Benutzergruppen Student, Sekretariat, Alumnus, Schüler und Gast gemacht. Auch gibt es keine Sonderbehandlung für den Zugang "Anonymus".

Sind keine Abschnitte vorhanden, wird ein Bild eingeblendet, das einen Eindruck vom Modul vermittelt.

Leere Hauptseite

Bestehender iPhone-Zugang

  • defektes Icon neben dem Desktop-Button
  • Abschnitte werden nicht richtig angezeigt (tw. gar nicht)
  • nur Ansicht der Abschnitte (kein Verändern möglich)
  • sind keine Abschnitte vorhanden, bleibt die Anzeige leer

Konzept

Wir stellen nun das Konzept des neuen Planer-Moduls vor. Es handelt sich hier also nicht um ein fertiges Produkt. Jedoch sind alle wichtigen Fragen geklärt, um dieses Konzept in die Realität umzusetzen.

Design

Das neue Konzept behält die grundsätzliche Struktur des bestehenden Moduls bei: Die Startseite ist die Liste der Planungsabschnitte in antichronologischer Reihenfolge. Planungsabschnitte in der Zukunft bleiben verborgen, können jedoch bei Bedarf nachgeladen werden. Da nie sehr viele Einträge im Laufe eines Kurses geschrieben werden (durchschnittlich rund 5 Stück [1]), verzichten wir auf die Möglichkeit zum Nachladen von bereits vergangenen Einträgen.

In der Detailansicht eines Abschnittes wird der Text korrekt formatiert. Außerdem gibt es die Möglichkeit zur direkten Navigation zwischen den Abschnitten. Diese Navigation beeinflusst nicht den "Zurück"-Button von jQTouch, so dass dieser Knopf immer entweder auf die Startseite von eStudy2Go oder auf die Liste der Planungsabschnitte zeigt.

Eine Möglichkeit zum Editieren eines Abschnitts ist nicht vorgesehen.

Diskussion

Mit diesem Design haben wir das minimalste Modul geschaffen, welches noch sinnvoll ist. Wir verzichten bewusst auf Features wie das Ändern und das Löschen von Planungsabschnitten durch den Dozenten. Ebenso gibt es keine Möglichkeit, angehängte Dateien einzusehen. Dies hat einen guten Grund: Auf dem iPhone ist es kaum möglich, die angehängten Dateien zu öffnen. Es macht daher auch keinen Sinn, diese Möglichkeit anzubieten.

Allerdings findet hier keine Bevormundung der Benutzer statt: Es ist jederzeit möglich, auf die Desktopversion des Planers zu wechseln. Dort stehen die in der hier vorgestellten Variante nicht berücksichtigten Features zur Verfügung.

Lokale Speicherung der Planungsabschnitte

Der local storage soll genutzt werden, um die Planungsabschnitte im Browser zu speichern. Damit wird der Seitenaufbau des Planers für wiederkehrende Besucher beschleunigt. Folgende Daten sollen dazu gespeichert werden:

  • ID
  • Kurs
  • Prüfsumme[1]
  • Startdatum, Startuhrzeit
  • Enddatum, Enduhrzeit
  • Kalenderwoche
  • Titel
  • Beitrag
Diskussion

Wie oben erwähnt, gibt es pro Kurs meist nicht sehr viele Planungsabschnitte. Des Weiteren ist ein Benutzer auch nie in sehr vielen Kursen Mitglied. Daraus folgt, dass alle Daten des Planers im lokalen Speicher des Browsers gehalten werden können.

Wir verzichten auf den Einsatz des session storage, da die oben aufgeführten Daten nicht in Abhängigkeit zu einer Sitzung stehen. Es macht daher keinen Sinn, diese lediglich für die Dauer der Sitzung zu speichern. Ein wiederkehrender Benutzer würde hier nicht profitieren. Ebenso sehen wir von dem Einsatz der clientseitigen Datenbank ab: Die zu speichernden Daten stammen aus einer einzigen Tabelle und können gut in einem key/value store wie dem local storage gehalten werden. Das Replizieren der Daten auf eine lokale Datenbank ist daher nicht nötig und wäre übertrieben.

BBCode

Damit die Texte der Planungsabschnitte korrekt dargestellt werden, mussten wir neue CSS-Regeln schreiben. Dazu mussten vor allen Dingen die von jQTouch definierten Regeln mehrfach überschrieben werden, weil beispielsweise ein einzeln stehender Link anders dargestellt wird als zwei Links, welche wiederum anders dargestellt werden als drei Links. Ähnliches ist für andere Tags und auch für andere Tag-Verschachtelungen zu erwarten. Wir gehen daher nicht davon aus, dass die von uns angepassten Regeln vollständig sind. Ein inkrementeller Ansatz ist zu empfehlen, bei dem die Regeln nach Bedarf angepasst werden, so dass auf längere Sicht die CSS-Regeln stabil werden.

Zusatzaufgabe

Nachdem wir eine binäre und auch eine neologe Uhr gesehen haben, wird es Zeit für die... *trommelwirbel* ...ternäre[2] Uhr!

Was kann man darauf erkennen? Jeder der farbigen Graphen stellt eine andere Zeitkomponente dar:

  • Die Stunde ist rot,
  • die Minute ist grün,
  • die Sekunde ist blau und
  • die Millisekunde ist grau.

Die gelbe Linie in der Mitte markiert die aktuelle Zeit. An den Schnittpunkten der Graphen lässt sich so mehr oder weniger die Zeit ablesen.

Der Kode ist unter der MIT Lizenz veröffentlicht und unter http://github.com/commana/Trinary-Clock verfügbar. Die App befindet sich nicht im App Store. Des Weiteren wurde sie mit der SDK-Version 2.2 erstellt.

Ressourcen

Notizen

  1. Diese Prüfsumme soll Änderungen an dem Planungsabschnitt sichtbar machen. Dieses Feld ist optional, da veränderte Planungsabschnitte auch über andere Wege im local storage aktualisiert werden können. Jedoch erscheint uns diese Lösung am sinnvollsten.
  2. Sinchron Trinary Clock: http://en.trinary.ru/projects/sinchron . Abgerufen am 01.08.2010.