Marcus Weblog

In einem der letzten Tutorien lernten wir die Grundlagen von Flashanimationen.
Ich gestaltete meine Flashanimation mit selbst gemachten Digitalfotos.
Ich fotografierte meine Glasvitrine beim ausräumen, je ein Foto pro Gegenstand. Diese Bilder sollten dann in umgekehrter Reihenfolge in einem Flash ablaufen damit es aussieht als ob sich die Vitrine von selbst wieder einräumt.

Mit Adobe Flash erzeugte ich mittels einzelner Schlüsselbilder (mehr als 40) den gewünschten Effekt, das Zeitinterval setzte ich auf 1 Bild pro Sekunde und legte in einer eigenen Ebene noch einen Sound im mp3 Format darüber.

1. Zielsetzung und Zielpublikum

2. Interface-Design

3. Screen-Design

1. Zielsetzung und Zielpublikum

1.1 Zielpublikum

Vorrangig für mich selbst, sowie für alle Interessierten (des Kurses PIM und auch nicht Collabor-User)

1.2 Erwartungen der Nutzer

Die Nutzer erwarten sich eine übersichtliche Seite, mit einfacher Navigation zum finden ausgewählter Themen sowie einfaches lesen auf der Seite ohne die Beiträge
ausdrucken zu müssen.

1.3 Absichtserklärung

Die Seite soll einen Lernblog repräsentieren wo vorwiegend ich meine Lernfortschritte des Kurses PIM sowie andere Kurse, welche einen online Lernblog benötigen dokumentieren kann. Auch andere Nutzer sollen an meinen Dokumentationen teilnehmen können (lesen und kommentieren).

1.4 Ziele

Chronologische Dokumentation des Lernerfolgs sowie der Aufgaben.
Nachlesen und finden aller Beiträge mit einfacher Suchfunktion.
Kommentieren der Beiträge von anderen Nutzern.
Interaktion mit anderen Nutzern.

1.5 Inhalte

Dokumentation des Kursablaufs PIM
Beschreibungen von techn. Möglichkeiten und deren Umsetzungen
Beispiele und Übungen aus Tutorien
(Grafiken, Videos, Flash Animationen)

2. Interface-Design

2.1 Informationsarchitektur

Die Seite besteht aus:
Header, Navigationsleiste und Inhaltsbereich

2.2 Navigation

Die Navigation besteht aus den Blöcken in folgender Reihe:
.Status
.Menü
.Letzte Kommentare
.Suche
.Kalender
.Links

2.3 Inhaltsseiten

Der Inhaltsbereich enthält alle Beiträge, welche von mir (Administrator)
erstellet wurden, welche die Themen und Aufgaben des Kurses PIM wiedergeben, sowie die Kommentare, welche von den Lesern mit Kommentarberechtigung hinzugefügt werden.

2.4 Wording

Die Seite ist in deutsch sowie englische Begriffe, welche im deutschprachigem Raum verbreitet sind.

2.5 Startseite

Die Startseite ist nahezu ident mit den anderen Seiten, es gibt die Möglichkeit des einloggens, erst bei richtigem Usernamen und Passwort wird die Seite interaktiv (Menübereich erweitert sich und die Möglichkeit zum Kommentieren ist gegeben)

2.6 Multimedia

Multimediale Elemente sind grundsätzlich nicht auf dem Lernblog, lediglich Aufgaben und Beispiele welche Multimedia Themen behandeln sind vorhanden.

2.7 Interaktionsdesign

Die erste Interaktionsmöglichkeit ist das einloggen auf dem Blog.
Nach erfolgreichem Login sind weitere Interaktionen möglich, das Suchen in den Beiträgen sowie kommentieren und als Administrator das verändern des Layouts.

3. Screen-Design

3.1 Layout und Layoutverhalten

Die Gesamtbreite richtet sich nach dem Bild im Header = 780px
Einrückung von links = 80px, oben = 5px
Die Hintergrundfarbe füllt die ganze Bildschirmbreite.
Der Inhaltsbereich ist in der Länge nicht limitiert, es muss gescrollt werden.

3.2 Typografie/Schrift

Die Schriftarten sind in allen Varianten immer gleich (Verdana, Helvetica, Arial, sans-serif)
Schrifftgrössen: Titel 15px, normaler Text 11px, kleiner Text 10px

3.3 Farben/Farbverläufe

Die Hintergrundfarbe ist eher sehr hell gehalten (#ffffd5),
die Schrift bei normalem Text (Beiträge) eher dunkel (#333333), nach dem Prinzip dunkler Schrift auf hellem Hintergrund ist besser für die Augen.
Andere Texte wie Datum oder aktueller Status sind in einem hellerem Grau (#959595) gehalten um den Inhalt der Beiträge mehr hervorzuheben.
Links bzw. alle Möglichkeiten zur Interaktion sind eindeutig erkennbar mit einem braun-orange (#906200).
Die Bezeichnungen der Navigationsblöcke sind mit weißer Schrift und grauem Hintergrund gestalltet für ein gute Übersicht.

3.4 Grafiken

Gibt es nur das Lernblog Logo (.JPG) sowie die Möglichkeit in Beiträgen zu Erläuterungszwecken das Einbetten von allgemein HTML tauglichen Formaten.

3.5 Tabelle

Es gibt keine Tabellen, welche mit Struktur und Aufbau der Seite zu tun haben, lediglich in Beiträgen zu Darstellungszwecken sind Tabellen erlaubt.

3.7 Einheitlichkeit

Der ganze Block ist einheitlich aufgebaut es ändern sich keine Schriften oder Farben bei allen Interaktionen.

Die 2. Aufgabe war XHTML sowie die Validierung des Stylesheets, des Weblogs durchzuführen.

Nachdem ich mir ein neues Layout für den Blog heruntergeladen habe und anschließend die Mainpage, das Stylesheet sowie einige Makros geändert hatte, validierte ich mein CSS unter dem link: http://jigsaw.w3.org/css-validator/.
Das erste Ergebnis war 137 Fehler.

Die meisten Fehler resultieren aus den Makros, welche in dem CSS standardmäßig eingebettet waren.
Ich habe dann alle Layout Makros, welche auf die "Preferences" referenzieren ersetzet mit richtig lesbaren Code.
Das überarbeitete CSS wurde nochmals validiert, das Ergebnis war schon beträchtlich besser mit nur 2 Fehler und 4 Warnungen (gleiche Farben, was aber vom Layout her ok ist).

Die 2 Fehler sind wieder auf Makros bezogen, welche sich nicht so einfach umschreiben lassen, da sie auf ein Image in der Datenbank referenzieren.

In den letzten Tutorien lernte ich die Grundlagen von Photoshop, das Arbeiten mit mehreren Ebenen zur Bearbeitung von Bildern, beispielsweise das Ausschneiden von einzelnen Teilen mit anschließendem vergrößern-verkleinern, drehen sowie der Umgang mit Masken.

Weiters wurden die Themen Usability und Interface Desgin behandelt:
siehe Link: http://collabor.idv.edu/pim08s/stories/20552/