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/

Im 1. Tutorium lernte ich die Grundlagen von HTML, welche bis dato sehr bescheiden waren.
Speziell auch Texte formatieren sowie Tabellendesign und das Einbinden von Grafiken.
z.B. als Übung diesen Text lt. Muster zu formatieren:

Blindtextbuch
Also schön, Guido Heffels, nachfolgend meine Textempfehlung für das Blindtextbuch. Sie mögen denken, aus welchem Anlass es unbedingt eine solche poesiealbumhafte Antiquität sein muss, und genau das sollen Sie ja auch. Wenn Sie den Text lange genug mit Fleiss bestaunen, können Sie die Nuss knacken. Denn wenn mein Gag auch nicht mit schnellem Auge zu entdecken ist - eine geduldige Seele muss die Lösung doch finden. Wenn Sie es geschafft haben, dann klingeln Sie mich doch bitte noch einmal an, denn ich muss Ihnen dann noch die Headline zum Text nachsenden. Das möchte ich momentan nicht, weil dann das bescheidene Geheimnis dieses Blindtextes schon jetzt offenläge. Viel Spass wünscht Rainer Baginski.
PS: Eine einzige Hilfe gebe ich: Das Begleittextchen hat's nicht. Sie haben's nicht. Ich - typisch Baginski - habe es. Finden Sie es.

Ergebnis:

Blindtextbuch

Also schön, Guido Heffels, nachfolgend meine Textempfehlung für das Blindtextbuch.Sie mögen denken, aus welchem Anlass es unbedingt eine
solche poesiealbumhafte Antiquität sein muss, und genau das sollen Sie ja auch. Wenn Sie den Text lange genug mit Fleiss bestaunen, können Sie die
Nuss knacken. Denn wenn mein Gag auch nicht mit schnellem Auge zu entdecken ist - eine geduldige Seele muss die Lösung doch finden. Wenn Sie es
geschafft ^haben, dann klingeln Sie mich doch bitte noch einmal an, denn ich muss Ihnen dann noch die Headline zum Text nachsenden. Das
möchte ich momentan nicht, weil dann das bescheidene Geheimnis dieses Blindtextes schon jetzt offenläge. Viel Spass wünscht Rainer Baginski.
PS:
Eine einzige Hilfe gebe ich: Das _{Begleittextchen} hat's nicht. Sie haben's nicht. Ich - typisch Baginski - habe es. Finden Sie es.



Anhand meiner neu erlernten HTML Kenntnisse, erstellte ich meine ersten Entwurf,
welchen ich zuvor von einem bestehendem Muster kopiert und auf meine Wünsche nur
umgebaut hatte völlig eigenständig neu, in einem Editor manuell http://students.idv.edu/~0455599/

Dies ist mein erster persönlicher Weblog in mit dem ich arbeite. Da ich bis jetzt noch keine Erfahrung mit Weblogs und der Sprache HTML habe, versuchte ich mir etwas Wissen auf der Seite „SelfHTML“ anzueignen.
Nach einigenStunden lesen und probieren einiger HTML tags fand ich auch eine Muster einer einfachen Webseite, welche sich als Grundlage der 1. Aufgabe => Erstellung einer statischen Seite im Tabellendesign eignet.

Vorerst versuchte ich mit Nvu-Kompozer mir eine Seite zu bauen jedoch erlangte ich nicht den gewünschten Erfolg. Deshalb baute ich mit meinem bisherigem selbsterlerntem Wissen die Muster Seite, welche ich bei SelfHTML gefunden hatte um.

Auf http://students.idv.edu/~0455599/ kann man mein erster Entwurf begutachten werden.