Dateien&Links-Modul optimized for iPhone

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Hier einsteht der Wiki-Artikel zur Projektarbeit "Dateien & Links – Modul optimized for iPhone" im Rahmen der Vorlesung "New Trends in IT" an der Provadis - School of International Management & Technology, erarbeitet von den Gruppenmitgliedern Daniel Brandes, Thomas Krüger und Markus Stöhr (BIM06).


Aufgabenstellung

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

Die momentan existierende Version eStudy2Go soll im Rahmen der Vorlesung "New Trends in IT" für mobile Endgeräte, speziell für Touchscreen-Handys wie das iPhone per CSS-Layout-Anpassungen zu einem barrierearmen Design ummodelliert werden. Usability, Grund-Funktionalität, Geschwindigkeit und barrierearme Bedienung sollen dabei im Mittelpunkt stehen. Teil der Aufgabenstellung ist die Anpassung der Login-Maske, der Startseite und der Modulseiten "Dateien & Links". Hierzu sind Anpassungen an der global.css und content.css vorzunehmen.

Ziele und Richtlinien für die Anpassung:

  • 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)

Bei der Änderung der CSS-Dateien für die Anpassung der Login-Maske und der Start-Seite haben wir uns grob an dem bereits zuvor erstellten Design für die Module "Dateien und Links" (siehe Absatz 2.3) orientiert. Leider konnten wir die geänderten CSS-Dateien per SVN nicht hochladen, da es zu Fehlermeldungen beim Comitten kommt. Daher werden wir die Änderungen hier graphisch mit Screenshots darstellen und die CSS-Dateien an dieser Stelle zur Verfügung stellen.

Media:eStudy2Go.zip

Update: Wir haben die CSS noch ein Mal überarbeitet, da uns das so vile Freude bereitet hat. Ein paar der "Richlinien" sollten jetzt besser erfüllt sein. Der Inhalt des ZIP-Files eignet sich sehr gut für einen schnellen lokalen Test, hochladen können wir unsere Ergebnisse leider immer noch nicht.

Media:eStudy2Go_neu.zip

Zur Vorschau, wie die Seite auf einem iPhone aussehen wird, wurde der iPhone Simulator iBBDemo eingesetzt. Die folgenden Screenshots wurden ebenfalls auf dieser Software erstellt.


Login

Links ist eine erste Zwischenversion vor der Überarbeitung zu sehen; recht die aktuelle Version, ohne Bilder aber dafür mit "aufgeräumten" CSS. Die neuen Buttons sind jetzt "shiny" und sind auch minimal interaktiv: beim momentan ausgewählten/anvisierten Button wird der Text durch Vergrößerung optisch hervorgehoben.

Login.gif => Login neu.jpg


Startseite

Links ist eine erste Zwischenversion vor der Überarbeitung zu sehen; recht die aktuelle Version, ohne Bilder aber dafür mit "aufgeräumten" CSS. Die neuen Buttons sind jetzt "shiny" und sind auch minimal interaktiv: beim momentan ausgewählten/anvisierten Button wird der Text durch Vergrößerung optisch hervorgehoben.

Start.gif => Start neu.jpg


Modul: Dateien & Links

Statt der Erstellung eines CSS-Designs für die Team-Module "Dateien & Links", wurde uns die Alternative angeboten, Vorschläge für mögliche Design-Templates zu graphisch darzustellen. Die Ergebnisse werden hier präsentiert:


Part I – Design-Studie "Dateien"

Tab: Most Klicked

D1.PNG

Eine Download-Liste mit z.B. maximal 20 Einträgen, die von anderen eStudy Mitglieder am Meisten heruntergeladen werden, sortiert nach den Beliebtesten.

Tab: Alle Dateien

D2.PNG => D4.PNG

Hier finden sich alle ins eStudy hochgeladenen Dateien, verteilt in die verschiedenen Kategorien. Es ist eine Sortierfunktion vorgesehen, die die Kategorien/Ordner nach Datum, alphabetisch etc. auf Wunsch ordnet. Auf der 2. Ebene können dann die Dateien runtergeladen und angeschaut werden (inkl. Sortierfunktion).

Tab: Info

D3.PNG

Im letzten Tab ist Platz für zusätzliche Informationen oder persönliche Einstellungen für das Modul Dateien.

Part II – Design-Studie "Links"

Tab: Browse Links

L1.PNG => L4.PNG

Hier sind alle Links aufgelistet, die im eStudy eingtragen wurden. Auf der 2. Navigationsebene kann der User den Link bewerten und Tags hinzufügen, die anderen Nutzern dann ebenfalls zur Verfügung stehen. Des Weiteren wird angezeigt wie oft der Link schon geklickt wurde.

Tab: Personal Links

L2.PNG => L5.PNG => L7.PNG

In der Liste sind alle durch den User angelegte Links zu finden. Auf der 2. Ebene kann der User seine eigene Links bewerten und Tags für sich hinzufügen.

oder:

L2.PNG => L6.PNG => L8.PNG

Über den Tab "Personal Links" hat der User auch die Möglichkeit selbstständig die Liste mit Lesezeichen zu füllen (Button NEW).

Tab: Info

L3.PNG

Im letzten Tab ist Platz für zusätzliche Informationen oder persönliche Einstellungen für das Modul Links.


Analyse mit YSlow

Yslow ist ein von Yahoo entwickeltes Addon für den Browser. Das Tool ermöglicht es die Performance einer Webseite zu ermitteln und gibt Tipps wie man die Performance verbessern kann. Die Yahoo Performance Spezialisten haben vierundreißig Methoden identifiziert mit denen die Performance einer Webseite gesteigert werden kann. Anhand dieser Methoden, wurden die Tests, die von YSlow durchführt werden entwickelt.

Die Bewertung einer Webseite erfolgt zweigleisig, es gibt sowohl eine Punkte Einteilung wie auch die Einordnung in das amerikanische Schulnoten System (A-F). Eine von YSlow getestete Webseite kann maximal 100 Punkte oder die Schulnote A erreichen. Es wird nicht nur eine Gesamtnote gebildet, sondern eine Note für jeden Bereich den YSlow überprüft hat.

Da Firefox auf das populäre Firefox Addon Firebug aufsetzt, muss dieses vor YSlow installiert werden. Die YSlow Entwickler haben in ihrem Blog ein paar Pod- und Screencasts eingestellt, in denen sie den Benutzern die Funktionsweise von YSlow näher bringen. Hierbei erfährt man unter anderem auch, wie YSlow zur Optimierung der Yahoo eigenen Webseite beigetragen hat.


Erster Durchlauf

Performance Grade D(60)

Ohne vorherige Eingriffe in den Code wird die eStudy2Go Login Seite in den einzelnen Prüfungskategorien mit den amerikanischen Schulnoten zwischen A und F bewertet, wobei F einer 6 im deutschen Schulnoten System entspricht.

Der erste Test viel besser aus wie erwartet. In der folgenden Tabelle ist die YSlow Bewertung dargestellt:

Nach einer kurzen Analyse der von YSlow bemängelten Punkte, sind wir über den zweiten Punkt ("Use a CDN") gestolpert. YSlow beschwert sich das kein CDN (Content Delivery Network) Hostname angegeben ist. Das Validierungstool erwartet hier ein von Yahoo genutztes und somit bekanntes CDN. Da wir aber nicht Yahoo sind und keine CDN's nutzen, müssen wir YSlow vorgaukeln, dass die Domain "ecollab.eu" (unsere Testumgebung) zu einem CDN gehört.

Wie das geht zeigt Yahoo selbst und stellt hier eine kurze Anleitung zur Verfügung. Kurz gesagt muss man der Konfiguration des Firefox (Zugang über about:config) einen neuen String mit dem Wert "ecollab.eu" hinzufügen.

Nach dieser kleinen Änderung, wird die Seite mit dem "Performance Grade C(70)" schon gleich eine Stufe höher bewertet. Der Seitenaufbau hat natürlich nicht an Geschwindigkeit zugelegt da kein Quellcode geändert wurde.


Zweiter Durchlauf

Performance Grade B(85)

Bei einem zweiten Durchlauf - nach CSS-Bereinigung/Überarbeitung - vergab Yslow einen noch besseren Wert, und dass ohne den Eintrag für CDN. Teilweise ist dies mit Sicherheit zurückzuführen auf die Verschlankung des CSS-Codes, aber auch auf die lokale Ausführung (und fehlende HTTP-Requests). Für die Startseite lag der Performance Grad beim Test unter gleichen Bedingungen bei B(88).






Auswertung (W3C mobileOK Checker)

Eine Auswertung mit dem "W3C mobileOK Checker" war nicht möglich, da das Tool nicht auf lokale eStudy-Installationen (unter XAMPP) zugreifen kann.


Weblinks

Yslow Developer Blog mit Podcasts & Screencasts

"Is your Web site mobile-friendly?" – Validator des W3C (W3C mobileOK Checker)

Trac zum eStudy-Projekt