Forum-Modul optimized for iPhone

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Hier einsteht der Wiki-Artikel zur Projektarbeit "Forum – Modul optimized for iPhone" im Rahmen der Vorlesung "New Trends in IT" an der Provadis - School of International Management & Technology, erarbeitet von den Gruppenmitgliedern Thomas Graf, Markus Schwarz und Manuel Bundschuh (BIM06).

Aufgabenstellung

  • Grundidee: Iphonisierung des eStudy-Portals des Fachbereichs MNI an der FH Gießen-Friedberg

Die momentan existierende Version eStudy2Go für mobile Endgeräte, speziell Touchscreen-Handys, soll per CSS-Layout-Anpassungen zu einem barrierearmen Design verändert werden. Usability, Grund-Funktionalität, Geschwindigkeit und barrierearme Bedienung stehen im Mittelpunkt des mobiles eStudy. Hierzu sind Anpassungen an der global.css und content.css für folgende Bereiche vorzunehmen:

  • Login-Maske
  • Startseite (nach der Anmeldung am eStudy2Go),
  • Logout-Seite
  • Teammodul (hier: Forum)


Ziele:

  • Schneller Seitenaufbau, Reduzierung der zu betragenden Datenmenge (meist durch zu große Bilder) und HTTP-Requests
  • Entschlackung der CSS-Dateien (Entfernen von Kommentaren und Zeilenumbrüchen)
  • Verwendung von "Shiny Buttons"
  • Barrierearm + WAI-konform
  • XHTML strict nach W3C, Überprüfung durch W3C mobileOK Checker
  • Safari Guide als Referenz
  • YSlow als Maßstab der Vorher-Nachher-Anaylse

Umsetzung (eStudy2Go)

Login

Um dem mobilen Benutzer einen schnell Zugriff auf das eStudy2go-Portal zu gewährleisten, musste die komplette Loginseite angepasst werden. Die schlanke Umsetzung der Loginseite wurde durch Anpassung der CSS-Dateien erreicht, das Ergebnis sieht man hier:

Login neu.png

Startseite

Nach erfolgreichem Login gelangt der User auf die Startseite. Von hier aus hat der User Zugriff auf alle eStudy2go-Funktionen, wie Nachrichten, Dateien, etc.

Hier der Unterschied von der originalen Startseite, zur optimierten.

Start alt.png == > Startseite neu.png

Logout

Für ein schlüssiges Gesamztkonzept fehlt eine angepasste Logout-Seite. Diese wurde ebenfalls komplett in CSS angepasst und sieht nun wie folgt aus:

Logout alt.png == > Logout neu.png

Um die Seite in Action zu sehen, klicken Sie bitte hier: Screencast Foto-Forum

Modul: Forum

Aus Zeitgründen wurde uns angeboten, statt CSS zu programmieren, das ganze als Konzept vorzustellen.

Part I – Design-Studie "Forum"

Dies wird der Einstiegspunkt sein, wenn man im Hauptmenü auf Forum klickt. Es gibt eine abgespeckte Anzeige der aktuellen Foren.

Forum uebersicht.PNG

Eine Ebene darunter kommt die Thread-Ansicht, in der die Threads nach Änderungsdatum angezeigt werden.

Forum threaduebersicht.PNG

Wählt man nun einen Thread aus, erhält man diese Ansicht der im Thread erstellten Antworten.

Forum thread.png

Part II - Design-Studie "Foto-Forum"

Das Foto-Forum bzw. Bildergalerie von eStudy könnte mit der auf jaipho.com veröffentlichten komplett freien Javascript-Bildergalerie umgesetzt werden. Grafisch angelehnt an die “Foto-Rolle” bzw. die Bildergalerie des iPhones, unterstützt JAIPHO Finger-Gesten und Slide-Effekte, kann kommerziell eingesetzt werden und funktioniert auch in “richtigen” Web-Browsern.

Eine Demo der Funktionsweise ist hier zu finden: Jaipho-Demo

Ein Beispiel ist hier zu finden

Jaiphoexample.png

Der Entwickler beschreibt sein Werk wie folgt: “JAIPHO is javascript based web gallery inspired by original iPhone Photos application. With JAIPHO, your website gallery will be optimized for iPhone users. It is suitable to be installed on both mobile and standard websites which have any kind of images galleries.”