Projekt für Multimedia Gestaltung AI Semester 5: Christian Eppler 21162 AI Semester 5: Stefan Möbius 21165 15. Januar 2013 Hochschule Ravensburg-Weingarten http://www.informatikprojekt.de
Inhaltsverzeichnis Inhaltsverzeichnis Kapitel 1 Einleitung 1 Kapitel 2 Briefing 2 2.1 Projektname.................................. 2 2.2 Zielgruppe.................................... 2 2.2.1 Personas................................. 2 2.3 Beschreibung.................................. 3 2.4 Design...................................... 3 2.5 Inhalt...................................... 3 2.6 Meilensteine................................... 3 2.7 Umfang..................................... 4 2.8 Unique selling proposition........................... 4 2.9 Konkurrenzanalyse............................... 4 2.9.1 Facebook................................ 4 2.9.2 Wordpress................................ 4 2.9.3 Abschluss................................ 5 2.10 Technische Voraussetzungen.......................... 5 2.10.1 Server-Software............................. 5 2.10.2 Client-Software............................. 5 2.10.3 Server-Infrastruktur.......................... 5 2.10.4 Client-Infrastruktur.......................... 5 Kapitel 3 Logo 6 3.1 Version 1.................................... 6 3.2 Version 2.................................... 6 3.3 Version 3.................................... 7 Kapitel 4 Mockup 8 4.1 Version 1.................................... 8 4.2 Version 2.................................... 9 4.3 Version 3.................................... 10 Kapitel 5 Phasen 11 5.1 Ideefindung................................... 11 5.2 Klärung technischer Vorraussetzungen.................... 11 5.3 Name...................................... 11 5.4 Logo....................................... 11 15. Januar 2013
Inhaltsverzeichnis 5.5 Mockup..................................... 12 5.6 Tests vor Implementierung........................... 12 5.7 Impelmentierung................................ 12 5.8 Tests nach und während der Implementierung................ 12 Kapitel 6 Tests 13 6.1 Thinking Aloud Test.............................. 13 6.2 Five Second Tests................................ 13 6.3 Technische Tests................................ 15 Kapitel 7 Implementierung 16 7.1 Arbeitsverteilung................................ 16 7.2 Technisch.................................... 16 7.2.1 Verwendete Bibliotheken........................ 16 7.2.2 Verwendete Werkzeuge......................... 16 7.2.3 Datenschema.............................. 17 7.3 Design...................................... 18 7.3.1 Farben.................................. 18 7.3.2 Fonts.................................. 18 7.3.3 Usability................................ 19 7.3.4 Grundlayout.............................. 21 7.3.5 Raster.................................. 21 7.3.6 Navigationsmodell........................... 22 7.3.7 Mobile.................................. 22 Kapitel 8 Fazit 23 15. Januar 2013
Abbildungsverzeichnis Abbildungsverzeichnis 3.1 Logo Version 1................................. 6 3.2 Logo Version 2................................. 6 3.3 Logo Version 3................................. 7 4.1 Mockup Komplett/Bilderansicht Version 1.................. 8 4.2 Mockup Text/Videoansicht Version 1..................... 9 4.3 Mockupimplementierung Version 2...................... 9 4.4 Mockupimplementierung Version 3...................... 10 6.1 Heatmap eines Klicktests........................... 14 6.2 Heatmap eines späteren Klicktests...................... 14 6.3 CSS-Validator.................................. 15 6.4 HTML5-Validator............................... 15 7.1 XML-Datenschema............................... 17 7.2 ERM-Datenbankschema............................ 18 7.3 Tooltip um die Usability auf Tablet-Computern zu verbessern....... 19 7.4 Installationsoberfläche............................. 20 7.5 Raster bei Logo und Menü........................... 21 15. Januar 2013
KAPITEL 1. EINLEITUNG 1 Einleitung Im Fach Multimedia Gestaltung wurde als Projektthema die Gestaltung eines Multimedia- Blogs gewählt. Dieser soll ein Multimedia-Tagebuch in Form einer Timeline darstellen. Der Blog soll für das Fach Multimedia Produktion angepasst sein. Die Anforderungen für die Umsetzung sind ein schlichtes und einfaches Design. Der Blog soll außerdem auf PC und Tablet-Computern laufen. 15. Januar 2013 1
KAPITEL 2. BRIEFING 2 Briefing 2.1 Projektname Bei der Recherche für einen passenden Namen für den Multimedia-Blog wurden viele Namen genannt. Leider waren diese schon vergeben und hätten somit im schlimmsten Fall zu rechtlichen Problemen geführt. Schließlich wurde der Name ONTIME Blog ausgesucht. Dieser ist aus der Inspiration durch ein ONAIR-Schild in Verbindung mit der Timeline entstanden. 2.2 Zielgruppe Die Zielgruppe für dieses Projekt kann in zwei Zielgruppen unterteilt werden: Die eine Gruppe sind die Teilnehmer im Fach Multimedia Produktion. Diese sind die Administratoren mit Affinität zur Informatik. Die zweite Gruppe sind an Multimedia interessierte Personen. Durch diese Zielgruppen können unterschiedliche Ziele für die Administrationsoberfläche sowie die eigentliche Website festgelegt werden. 1. Administrationsinterface für Personen mit einer Affinität zur Informatik 2. Internetnutzer, die sich für Multimediainhalte begeistern 2.2.1 Personas Für die verschiedenen Anforderungen von Frontend wie Backend wurden zwei Personas entwickelt. Diese werden nachfolgend erläutert: Franz Schneider 24 Franz Schneider ist Student der Angewandten Informatik und ist regelmäßig im Internet. Er liest dort häufig Tutorials und geht aber auch gerne auf Festivals und Konzerte. Franz Schneider ist die Person, welche die Inhalte des Blogs publiziert und administriert. Er nimmt am Fach Multimedia Produktion teil. Julia Bauer 38 Julia Bauer ist gelernte Fachverkäuferin. Da Sie nur mit Freunden in Kontakt bleiben, sowie im Internet surfen will, besitzt Sie einen Tablet-Computer. Diesen kann Sie ohne großen Aufwand bedienen. Sonst hat Sie mit der digitalen Welt nicht viel zu tun. 15. Januar 2013 2
KAPITEL 2. BRIEFING 2.3 Beschreibung Der ONTIME Blog ist für das Fach Multimedia Produktion. Es ist ein Tagebuch in Form einer Timeline. Bei der Gestaltung des Blogs wird darauf geachtet, dass der User nicht sofort einer Reizüberflutung ausgesetzt wird. Das kommt der Darstellung auf dem Tablet-Computer zugute. Auf dem Tablet muss der Platz optimal ausgenutzt werden. Zugleich muss das Design aufgeräumt dargestellt werden. 2.4 Design Die Darstellung der Inhalte soll in Form einer Timeline erfolgen, da sie eine chronologische Reihenfolge besitzen. Die eingestellten Inhalte sollen ein Tagebuch im Fach Multimedia Produktion ergeben. Der Herausgeber der Inhalte kann mehrere Timelines auf dem Blog anlegen. Dadurch können verschiedene Inhalte strukturiert dargestellt werden. Somit hat der User die Wahl, welche Inhalte ihn interessieren und kann sich diese anzeigen lassen. Es werden ihm somit keine Inhalte aus anderen Bereichen angezeigt. 2.5 Inhalt Es sollen folgende Inhalte unterstützt werden: - Bilder - Videos - Text Durch die Ausrichtung als Multimedia-Blog wird in diesem Projekt viel Aufwand in die Präsentation von multimedialen Inhalten gelegt. Der Schwerpunkt liegt in der Darstellung von Bildern und Videos. Aus rechtlichen Gründen wird auch ein Impressum auf der Seite angezeigt. 2.6 Meilensteine - Logo + Umfrage - Mockup erstellen - unterstützte Medienformate abklären - Mockup-Test (Thinking Aloud) - XML-Struktur - XML-Parser - XML-Datenbankanbindung - Anzeigen der Daten - Test mit erster Implementierung - Funktionalität testen - Dokumentation - YouTube-Anbindung 15. Januar 2013 3
KAPITEL 2. BRIEFING 2.7 Umfang CMS basierender Multimedia-Blog mit optimierter Steuerung auf Tablet-Computern. 2.8 Unique selling proposition Der Blog ist für Multimediainhalte in Form eines Produktionstagebuches im Fach Multimedia Produktion ausgelegt. Ein weiteres Projekt, dieser Art, ist uns nicht bekannt. 2.9 Konkurrenzanalyse Vor der Realisierung des Projektes wurde eine Konkurrenzanalyse durchgeführt, bei der verschiedene Seiten mit Stärken und Schwächen ermittelt wurden: 2.9.1 Facebook Positiv: - leichte Bedienung der Timeline (Mausrad) - Einstellen von Inhalten ist sehr leicht - schlichtes Design, mit viel Weißraum - ist bekannt Negativ: - unterschwellige Werbung - Facebook erhält weitgehende Rechte am Inhalt - vertikale Timeline entspricht nicht userer Erfahrung - verschiedene Inhalte in einer Timeline - unübersichtlicher Aufbau in zwei Spalten 2.9.2 Wordpress Da es Wordpress in verschiedensten Ausführungen gibt, wurde eine Seite exemplarisch ausgesucht. 1 Positiv: - viel Know-how bereits vorhanden, sodass man sich auf das wesentliche konzentrieren kann - strukturiertes Design - viel Weißraum Negativ: - kein Feedback wegen fehlenden MouseOver-Effekten - Raster wird nicht überall eingehalten ( ReadMe Button) - kein direkt ersichtlicher chronologischer Aufbau - zu viele verschiedene Schriftarten 1 http://elegantthemes.com/preview/evolution/ 15. Januar 2013 4
KAPITEL 2. BRIEFING 2.9.3 Abschluss Aus der Konkurrenzanalyse hat sich ergeben, dass es viele Seiten gibt, welche Teile der Anforderungen (siehe Abschnitt 2.3 auf Seite 3, Abschnitt 7.3 auf Seite 18 und Abschnitt 2.5 auf Seite 3) gut umsetzten. Im Gesamten erfüllt keine Seite alle, vom Team gestellten, Anforderungen. 2.10 Technische Voraussetzungen 2.10.1 Server-Software - PHP - GD-Bibliothek - MySQL - Webserver (APACHE) 2.10.2 Client-Software - Browser mit HTML5- und CSS3-Unterstützung, wie z. B. Chrome - aktiviertes Javascript - aktivierte Cookies (Admin-Oberfläche) - Videounterstützung 2.10.3 Server-Infrastruktur - schnelle Internetanbindung, mit viel Datenkontingent inklusive - genügend Speicherplatz für Medien - Rootzugriff auf DB 2.10.4 Client-Infrastruktur - schnelle Internetanbindung (Videos, hochauflösende Bilder) - Pointing Device z. B. Maus, Touchscreen 15. Januar 2013 5
KAPITEL 3. LOGO 3 Logo 3.1 Version 1 Abbildung 3.1: Logo Version 1 3.2 Version 2 Abbildung 3.2: Logo Version 2 15. Januar 2013 6
KAPITEL 3. LOGO 3.3 Version 3 Abbildung 3.3: Logo Version 3 15. Januar 2013 7
KAPITEL 4. MOCKUP 4 Mockup 4.1 Version 1 Abbildung 4.1: Mockup Komplett/Bilderansicht Version 1 Wie in Abbildung 4.1 zu sehen ist, soll der Multimedia-Blog auf die Steuerung über ein Touchdevice optimiert sein. Die Inhalte sollen in einer horizontal angeordneten Timeline dargestellt werden. Dieses Design ergibt sich aus den in Abschnitt 2.3 auf Seite 3 sowie in Abschnitt 7.3 auf Seite 18 festgelegten Kriterien. 15. Januar 2013 8
KAPITEL 4. MOCKUP Abbildung 4.2: Mockup Text/Videoansicht Version 1 Da wie in Abschnitt 2.5 auf Seite 3 dargelegt mehrere verschiedene multimediale Inhalte unterstützt werden, müssen verschiedene Ansichten für diese Inhalte optimiert werden. Dies ist in Abbildung 4.2 dargestellt. 4.2 Version 2 Abbildung 4.3: Mockupimplementierung Version 2 Abbildung 4.3 zeigt ein frühes Stadium der Implementierung und Gestaltung der Seite. Es wurde bereits versucht die wichtigsten Komponenten, wie Timeline, Bilder und Text zu integrieren. Angedeutet ist auch ein Menü, oberhalb der angezeigten Timeline. Das Menü soll verschiedene Timelines für verschiedene Kategorien von Inhalten anbieten. 15. Januar 2013 9
KAPITEL 4. MOCKUP 4.3 Version 3 Abbildung 4.4: Mockupimplementierung Version 3 Abbildung 4.4 zeigt den letzten Mockup, bevor mit der Implementierung angefangen wurde. Das Design war zwar noch nicht vollends fertiggestellt aber es konnte davon ausgegangen werden, dass keine großen Änderungen mehr eintreten, welche Probleme bei der Implementierung verursachen könnten. 15. Januar 2013 10
KAPITEL 5. PHASEN 5 Phasen 5.1 Ideefindung Es war von Anfang an klar, dass ein Projekt erstellt werden soll, welches auch produktiv eingesetzt werden kann. Ein Projekt, das nur im Rahmen des Fachs Multimedia Gestaltung verwendet werden kann, kam daher nicht infrage. Da in Multimedia Produktion ein Blog geführt werden sollte, hat es sich angeboten, einen eigenen Blog zu entwickeln. Der Blog ist auf die Darstellung von Multimedia-Inhalten ausgelegt und außerdem auf Mobile Devices lauffähig. 5.2 Klärung technischer Vorraussetzungen Nach dem die Ideenfindung soweit abgeschlossen war, wurden die gefundenen Ideen auf ihre Machbarkeit überprüft. Es wurden die passenden technischen Werkzeuge ausgesucht, um diese umzusetzen. So wurden folgende Voraussetzungen ermittelt: - PHP, zur Realisierung der dynamischen Webseite - MySQL, als Abfragesprache für die Inhalte und persistenter Datenhaltung - XML, als Austauschformat zum hochladen der Inhalte im Administrationsinterface - Javascript und jquery, zur Realisierung der dynamischen Webseite auf Clientseite - CSS3 und HTML5, zur Gestaltung der Webseite 5.3 Name Einen guten Namen für das Projekt zu finden, stellte sich als sehr viel schwieriger heraus, als am Anfang gedacht. Es wurden mehrere Brainstormings durchgeführt, bis sich schließlich der endgültige Name ergab. Letztendlich fiel der Blick, per Zufall auf das On Air Schild in der Hochschule. Daraus ergab sich in weiteren Diskussionen der Name ONTIME Blog. Wichtig war, dass der Name leicht mit Multimedia Produktion assoziiert werden kann und noch nicht im Internet von einem anderen Projekt oder einer anderen Firma verwendet wird. 5.4 Logo Das Projektteam war sich von Anfang an einig, dass das Logo schlicht und möglichst zeitlos sein sollte. Da die erste Version des Logos noch eher nach normalem Text aussah, wurde in der 2ten Version versucht, dieses Manko zu beheben. Da der schmale Strich in der zweiten Version nicht so wie erhofft wirkte, wurde dieser in der dritten Version verbreitert. Außerdem wurde der Buchstabe E als Sanduhr dargestellt. 15. Januar 2013 11
KAPITEL 5. PHASEN 5.5 Mockup Nachdem die Idee klar war, wurden die Mockups für das Projekt erstellt, um möglichst schnell einen Eindruck zu bekommen, wie das fertige Projekt im Groben aussehen soll. Die Mockups wurden mit dem kostenlosen Open Source Programm Pencil (GPL Lizenz) erstellt (siehe [6]). Für Bilder der Mockups und deren Beschreibung siehe Kapitel 4 auf Seite 8. 5.6 Tests vor Implementierung Es wurden bereits vor der Implementierung, basierend auf den erstellten Mockups, Tests durchgeführt. Dies hatte den Vorteil vor der Implementierung bereits Feedback der Nutzer zu erhalten. Dadurch musste später weniger Zeit investiert werden, um Programmcode umzuschreiben. 5.7 Impelmentierung siehe Kapitel 7 auf Seite 16. 5.8 Tests nach und während der Implementierung siehe Kapitel 6 auf der nächsten Seite 15. Januar 2013 12
KAPITEL 6. TESTS 6 Tests 6.1 Thinking Aloud Test Es wurden mehrfach Thinking Aloud Tests durchgefühlt. Da bei Thinking Aloud Tests das zu testende System noch nicht vollständig implementiert sein muss, konnte schon recht früh damit begonnen werden. Dabei wurde herausgefunden, dass die Hervorhebung der aktuell im Vordergrund stehenden Inhalte nicht vollends klar wurde. Dies wurde im besonderen Maße auf größeren Computerbildschirmen so empfunden. Deshalb werden nun einerseits nicht aktive Inhalte abgedunkelt und kleiner angezeigt. Über der Inhaltsüberschrift wird das Datum angezeigt und zudem wird über der Timeline der aktive Blog eingeblendet, damit der Überblick nicht verloren geht. 6.2 Five Second Tests Da wie bei Thinking Aloud Test das zu testende System noch nicht vollständig implementiert sein muss, konnte auch schon recht früh mit Five Second Tests begonnen werden. Durch die laufenden Tests kamen immer weitere kleinere Probleme zutage. So wurde beispielsweise klar, dass es wichtig ist, immer anzuzeigen, wo sich der Benutzer gerade befindet. Die Frage zu dem Klicktest (siehe Abbildung 6.1 auf der nächsten Seite) lautete: 1. Wie würden Sie innerhalb der Timeline navigieren? Bei einem späteren Klicktest (siehe Abbildung 6.2 auf der nächsten Seite) lautete die Frage: 2. Sie sehen hier einen Blog mit multimedialen Inhalten. Wohin würden Sie klicken, um zum nächsten Inhalt zu gelangen? 15. Januar 2013 13
KAPITEL 6. TESTS Abbildung 6.1: Heatmap eines Klicktests Abbildung 6.2: Heatmap eines späteren Klicktests 15. Januar 2013 14
KAPITEL 6. TESTS 6.3 Technische Tests Neben Tests, die die Usability betreffen, wurden auch technische Tests durchgeführt. Dadurch sollte sichergestellt werden, dass die Webseite möglichst in allen standardkonformen Browsern lauffähig ist. Ein weiterer Punkt war, dass die Webseite mit den wichtigsten Browsern möglichst gleich aussieht. Um die Kompatibilität zu überprüfen, wurde die Webseite mit den Validatoren (siehe Abbildung 6.3 und Abbildung 6.4) des World Wide Web Consortium [7] überprüft. Abbildung 6.3: CSS-Validator Abbildung 6.4: HTML5-Validator 15. Januar 2013 15
KAPITEL 7. IMPLEMENTIERUNG 7 Implementierung 7.1 Arbeitsverteilung Die Aufgaben wurden gemeinsam in Teamarbeit erledigt. 7.2 Technisch 7.2.1 Verwendete Bibliotheken Bei der Auswahl der verwendeten Software wurde besonders auf die Lizenz geachtet. Damit soll verhindert werden, dass die Verwendung des Endproduktes eingeschränkt ist. Außerdem wird es damit möglich, die verwendete Software an die Bedürfnisse optimal anzupassen. - jquery[5] (MIT-Lizenz) - jquery.timelinr[4] (MIT-Lizenz) - jquery.touchwipe[1] (MIT-Lizenz) - jquery.colorbox[3] (MIT-Lizenz) 7.2.2 Verwendete Werkzeuge Zusätzlich zu den für das Projekt direkt erforderlichen Komponenten, wurden folgende Tools bei der Entwicklung eingesetzt: - SVN, zur Versionsverwaltung - Eclipse, als Entwicklungsumgebung - LaTex, zum Erstellen der Dokumentation - Pencil, zum Erstellen der Mockups - Apache, als lokaler Server zum Testen - W3C-Validator, zur Überprüfung auf standardkonforme Umsetzung - MySQL Workbench, zum Erstellen des ERM-Schemas (siehe [2]) 15. Januar 2013 16
KAPITEL 7. IMPLEMENTIERUNG 7.2.3 Datenschema Das Einrichten der Webseite erfolgt über eine XML-Datei. Ein komplettes Backend zum Einrichten der Webseite war im Umfang des Projektes nicht möglich. Deswegen wurde ein, für die meisten Informatiker gebräuchliches, Format zum Importieren der Daten gewählt. Durch die XML-Datei ist immer ein Backup der Seiteninhalte vorhanden. Sollte das System ausfallen, kann die XML-Datei innerhalb kürzester Zeit wieder eingespielt werden. 1 <?xml version="1.0" encoding="utf-8"?> 2 <blog> 3 <global tagline="multimedia Produktion: Pacmans s day"> 4 <team title="teammitgileder" img="welcome_ontime.jpg"> 5 Dieser Text soll alle Teammitglieder vorstellen 6 </team> 7 </global> 8 <projects> 9 <project name="pacman s day"> 10 <timelines> 11 <timeline name="multimedia Produktion"> 12 <item date="*" title="wilkommen" type="image" img="welcome.jpg"> 13 <text> 14 Willkommen in userem Multimedia Blog.[br /] 15 Der Blog zeigt den Verlauf unseres Projektes im Fach "Multimedia C Produktion" an der HS-Weingarten. 16 Multimedia Produktion ist ein Fach im 5. Semester des StudiengangsC 17 </text> 18 </item> "Angewandte Informatik". 19 <item date="mo.17.12.12" title="space Invaders" type="video" img="c 20... spaceinvaders.jpg"> Abbildung 7.1: XML-Datenschema 15. Januar 2013 17
KAPITEL 7. IMPLEMENTIERUNG Die Daten werden aus der XML-Datei ausgelesen und in eine Datenbank importiert. Beim Datenbankschema wurde darauf geachtet, dass die Daten möglichst redundanzfrei gespeichert werden. Dadurch sollen Mutationsanomalien verhindert werden. Die Daten werden in der Datenbank gespeichert und nicht direkt aus der XML-Datei geladen, um dem Benutzer eine schnelle Webseite zu bieten. Abbildung 7.2: ERM-Datenbankschema 7.3 Design 7.3.1 Farben Die Farben der Webseite sind absichtlich in einem nicht aufdringlichen schlichten Grau gehalten. Dies hat mehrere Gründe. Zum einen soll nicht von den Inhalten abgelenkt werden. Zum anderen ist es aber wichtig, dass nur die klickbaren Elemente farblich hervorgehoben werden, da sonst die Hervorhebung durch die Farbe seine Wirkung verliert. Für klickbare Elemente wurde rot als Signalfarbe ausgewählt. Folgende wichtige RGB- Farbwerte wurden auf der Seite verwendet: - #FF0000 (rot): Der Farbwert für den Schriftzug ONTIME im Logo und allen Pfeilen bei anklickbaren Steuerungselementen - #807b7b (grau): Farbe von Text und Buttons - #000000 (schwarz): Hintergrundfarbe für den Inhaltsbereich Der rote und der graue Farbton sind hierbei vom Logo abgeleitet, sodass die Seite farblich zum Logo passt. 7.3.2 Fonts Das Logo wurde mit der Schriftart Sans erzeugt. Für die Webseite wird die Schriftart Sans bzw. Verdana (ebenfalls eine Schriftart ohne Serifen) verwendet. Verdana wird aus Kompatibilitätsgründen angegeben, weil unter Windows bei der Standardinstallation keine Schriftart mit dem Namen Sans zur Verfügung steht. Für die Webseite wurde eine Schriftart ohne Serifen verwendet, da diese moderner wirkt und meist nur kurze Texte 15. Januar 2013 18
KAPITEL 7. IMPLEMENTIERUNG vorhanden sind. Für diese Dokumentation wurde die Schriftart Computer Modern Roman, also eine Schriftart mit Serifen, verwendet. Der Grund dafür ist, dass das Dokument möglichst einfach lesbar sein soll, da es aus längeren Texten besteht. 7.3.3 Usability Usability steht für eine benutzerfreundliche Interaktion mit einem Produkt. Das Ziel ist hierbei, dass der Benutzer das Produkt möglichst intuitiv und ohne Bedienungsanleitung verwenden kann. Für den zu erstellenden Multimedia-Blog bedeutet dies im Einzelnen: - Gleich aussehende Markierungen für alle klickbaren Elemente - Den Besucher nicht mit zu vielen Informationen auf einmal zu überfluten - Dem Besucher ersichtlich machen, wo er sich befindet - Hover-Effekt, um den Besucher zu vermitteln, auf welches Element er gerade klickt (besonders wichtig bei Tablet-Computern) - Tooltip, damit die Hervorhebung auf dem Tablet nicht duch Finger verdeckt wird - Redundanz bei elementaren Elementen wie Navigation in der Timeline und Anzeige der aktuellen Position in der Timeline Um die Usability speziell auf Tablet-Computern zu erhöhen, wird bei den Schaltflächen, ein Tooltip angezeigt. Der Tooltip wird neben dem Button angezeigt. Auf Tablet- Computer soll dies verhindern, dass der Hover-Effekt durch den Finger verdeckt wird. In der aktuellen Version ist dies exemplarisch für die Buttons, um an den Anfang bzw. an das Ende der Timeline zu gelangen, realisiert (siehe Abbildung 7.3). Abbildung 7.3: Tooltip um die Usability auf Tablet-Computern zu verbessern 15. Januar 2013 19
KAPITEL 7. IMPLEMENTIERUNG Um die Usability beim Installieren des Blogs zu erhöhen, wurde eine benutzerfreundliche Installationsoberfläche erstellt (siehe Abbildung 7.4). Eine weitere Vereinfachung würde auf Kosten der Konfigurierbarkeit und Sicherheit gehen. Außerdem ist davon auszugehen, dass die Software von fachkundigen Personen installiert wird. Abbildung 7.4: Installationsoberfläche 15. Januar 2013 20
KAPITEL 7. IMPLEMENTIERUNG 7.3.4 Grundlayout Die Seite hat im Kopfbereich das Logo des Blogs sowie die Tagline und ein Menü, mit dem eine Timeline ausgewählt werden kann. Das Logo und die Tagline sollen dem Benutzer helfen schnell zu verstehen, welche Inhalte die Seite enthält. Die komplette Seite ist zunächst nur einspaltig, wodurch viel Weißraum entsteht. Der Weißraum soll für mehr Übersicht sorgen, sodass die Seite nicht überladen wirkt. Da der Multimedia-Blog dynamische Inhalte anzeigt, hat dieser für den Inhaltsbereich kein starres Layout. Grundsätzlich ist vorgesehen, dass nur jeweils ein Inhalt aktiv ist. Dieser hat in der Regel zwei Spalten. Auf der linken Seite ist im Normalfall ein Vorschaubild für eine Galerie oder ein Video. Auf der rechten Seite ist ein kurzer Beschreibungstext zum Inhalt. Es gibt jedoch auch Inhalte ohne Bild, sodass der Text nur in einer Spalte angezeigt wird. 7.3.5 Raster Wie auf Abbildung 7.5 zu sehen, wurde versucht, Logo und Menü so gut wie möglich auf einem Raster von 150 x 40 anzuordnen. Die Timeline selbst ist nur horizontal an das Raster angeordnet. Vertikal passt die Timeline nicht ins 150 x 40 Raster. Ansonsten würde das Gesetz der Nähe verletzt werden und man würde nicht mehr direkt erkennen können, dass das Menü zur Timeline gehört. Die Timeline ist jedoch in einem 150x20 Raster angeordnet, in das auch das Logo und das Menü passen. Weiterhin passt die Tagline nicht in das horizontale Raster. Der Grund hierfür ist, dass auf Tablet-Computern zu wenig Platz zur Verfügung steht. Abbildung 7.5: Raster bei Logo und Menü 15. Januar 2013 21
KAPITEL 7. IMPLEMENTIERUNG 7.3.6 Navigationsmodell Da die Navigation ein wesentlicher Teil der Webseite ist, soll die Navigation über verschiedene Wege erfolgen. Die Navigation in der Timeline erfolgt über Ebenen und Tabs. Hierfür werden Pfeile für die Ebenen-Navigation verwendet. Für die Tab-Navigation werden Datumsangaben verwendet. Das Menü wurde flach strukturiert, um die Navigation auf dem Tablet zu vereinfachen. Eine tiefe Struktur wäre nicht sinnvoll, da der Blog nur für wenige Projekte und Timelines gedacht ist. 7.3.7 Mobile Die Webseite soll auch auf mobilen Endgeräten gut aussehen. Daher konnte nicht alles so aufgebaut werden, wie dies für den Desktop ideal wäre. Somit konnte nicht die ganze Displaygröße des Desktops verwendet werden. Durch den begrenzten Platz mussten die Navigationselemente, um an den Anfang bzw. das Ende zu kommen, oberhalb des Inhalts angebracht werden. Auf Höhe der Datumsleiste war hierfür links und rechts kein Platz mehr. Die Menüführung wurde für die Navigation auf dem Tablet vereinfacht. Die Pfeile, links und rechts im Inhaltsbereich, haben nur einen begrenzten klickbaren Bereich. Der Grund hierfür ist, dass es auf dem Tablet ansonsten zu Fehlnavigationen kommen würde bzw. der Inhalt nicht mehr anklickbar wäre. 15. Januar 2013 22
KAPITEL 8. FAZIT 8 Fazit Bei der Entwicklung des Projektes mussten wir feststellen, dass die Entwicklung für mobile Endgeräte stark von der Entwicklung für Desktop PCs abweicht. Deswegen konnten nicht alle Gestaltungsgrundregeln vollständig angewandt werden. Auf mobilen Endgeräten müssen häufig Kompromisse, wegen des mangelnden Platzes, eingegangen werden. Das Ziel unseres Projektes ist es ein funktionierendes, Open Source, Projekt zu erstellen. Dieses Ziel konnten wir auch verwirklichen. Die aktuelle Projektversion ist auf sourceforge.net 1 unter der MIT-Lizenz veröffentlicht. Neben den Ansprüchen an das Fach Multimedia Gestaltung musste hierbei auch ein gut verständlicher und rechtlich korrekter Programmcode erstellt werden. Neben der reinen Oberfläche gibt es auch ein funktionierendes CMS zur Verwaltung und eine benutzerfreundliche Installationsoberfläche. Wichtig war uns auch eine standardkonforme Implementierung des HTML5 und CSS3 Standards. 1 http://sourceforge.net/projects/ontimeblog/ 15. Januar 2013 23
Literaturverzeichnis Literaturverzeichnis [1] Andreas Waltl, 2013. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library[aufgerufen am 09. Januar 2013]. [2] dev.mysql.com, 2013. http://dev.mysql.com/downloads/workbench/5.2.html[aufgerufen am 09. Januar 2013]. [3] Jack Moore, 2013. http://www.jacklmoore.com/colorbox[aufgerufen am 09. Januar 2013]. [4] jquery Timelinr, 2013. http://www.csslab.cl/2011/08/18/ jquery-timelinr/[aufgerufen am 09. Januar 2013]. [5] jquery.com, 2013. http://jquery.com/[aufgerufen am 09. Januar 2013]. [6] Pencil Project, 2013. http://pencil.evolus.vn/[aufgerufen am 06. Januar 2013]. [7] World Wide Web Consortium, 2013. http://validator.w3.org/[aufgerufen am 11. Januar 2013]. 15. Januar 2013 24