Abgabe Aufgabe 2, Style-Guide

Zielsetzung und Zielpublikum

Das Zielpublikum wird festgelegt als der Blog-Besitzer, die restlichen Teilnehmern der Lehrveranstaltung, dem Lehrveranstaltungsleiter und der Tutorin. Nicht zum Zielpublikum gezählt werden andere Collabor Benutzer und anonyme Benutzer (globale Publikum).

Erwartungen:

Der Blog-Autor erwartet sich einen Blog der den Abschluss der Lehrveranstaltung ermöglicht.
Die Lehrveranstaltungsteilnehmer erwarten sich einen Blog der nach Möglichkeit nützliche Beiträge zur Realisierung des eigenen Blogs und der Aufgabestellung bietet und vielleicht als Anregung, Inspiration oder Vergleichsmöglichkeit bei der Gestaltung des eigenen Blogs dient.
Die Lehrenden erwarten einen möglichst aktiven Blog, der die Aufgabenstellungen erfüllt und eventuell ein kreativer, wertvoller Bestandteil der Lehrveranstaltung wird.

Ziele:

Erfüllung der Aufgabenstellungen
Dokumentation der eigenen Lernerfahrung im Verlauf der Lehrveranstaltung
Schreiben eigener Beiträge zu den Themen der Lehrveranstaltung und Tutorien
Verlinken auf Beiträge in den Blogs zur Lehrveranstaltung
Zugang zu den Blog-Beiträgen für das Zielpublikum
Möglichkeit zum Kommentieren von Beiträgen und zum Verlinken auf Beiträge durch das Zielpublikum

Nicht-Ziele

Vermittlung der Beiträge an das Nicht-Zielpublikum
Schreiben von Beiträgen durch das Zielpublikum mit Ausnahme des Blog-Besitzers
Erstellung eines langfristig betreuten, über die Dauer der Lehrveranstaltung hinausgehenden Blogs

Gliederung

Abgaben zu Aufgabestellungen
Beiträge im Rahmen der Tutorien
Beiträge im Rahmen der Blog-Entwicklung
Off-Topic Beiträge

Interface design

Excel-Datei mit Entwürfen: aufgabe 2 interface design (xls, 28 KB)

Der Blog besitzt eine lineare Struktur. Die Gliederung der Beiträge besitzt nur eine Ebene. Der Blog selbst ist in die Netzstruktur von Collabor, im Speziellen der Menge der zur Lehrveranstaltung gehörenden Blogs eingebettet.

Aufbau:

Der Blog ist grundsätzlich einspaltig aufgebaut. Es gibt einen Kopfbereich, zusammengesetzt aus 3 horizontal geteilten Bereichen:
Der oberste Bereich ist 2spaltig. Links befindet sich das Blog-Header-Image "read-think-learn". Rechts davon sind untereinander angeordent: Loginstatus mit Username, Role und Aktion "Anmelden" bzw. "Abmelden"; Elementare Navigation für anonyme und Nicht-Admin/Nicht-Contributor Benutzer mit Link auf lehrveranstaltungsbegleitenden Blog "Blog Medienproduktion"; Anzeige der letzten Beitrags- oder Kommentar-Änderung mit site.history Makro; Anzeige des Suchformulars
Der mittlere Bereich beinhaltet eine horizontale Auflistung der Themenbereiche
Der unterste Bereich beinhaltet einen horizontal orientierten Kalender

Falls der eingeloggte Benutzer eine Blog-Administrator oder Contributor ist (nur Blog-Besitzer) wird ein zusätzlicher Bereich zwischen dem obersten und mittleren Bereich eingefügt, der eine horizontale Auflistung aller Aktionen für Administrator bzw. Contributor enthält.
Alternative: JavaScript-basiertes Menü zum Aufklappen im obersten Bereich rechts zur elementaren Navigation.

Unter dem Kopfbereich ist der Inhaltsbereich.

Der Blog soll möglichst in Deutsch sein.

Liste der Inhaltsseiten:

Liste Beitragsvorschau gesamt chronologisch
Übersicht über Themenbereiche
Liste Beitragsvorschau je Themenbereich
Vollansicht Einzelbeitrag inklusive Kommentare
Gesamtliste aller Änderungen

Die Startseite ist die Liste der Beitragsvorschau gesamt chronologisch.

Multimediale Inhalte:

Bild im Kopfbereich
Ergebnisse der Aufgabenstellungen: Film, Animation

Das Interaktionsdesign beschränkt sich auf die Gestaltung der von Collabor angebotenen Makros für folgende Aktionen:

Hinzufügen und Ändern eines Kommentars
Hinzufügen und Ändern eines Beitrags
Hinzufügen und Ändern eines Bildes
Hinzufügen und Ändern einer Datei
Status angemeldeter Benutzer
Status nicht angemeldete Benutzerin

(in Aufgabe 1 verlangte Skins für Änderung des Profils und Rechteverwaltung sind nicht Teil des Layouts und können nicht geändert werden)

Das Hinzufügen und Ändern von Beiträgen, Bildern und Dateien ist nur durch den Blog-Besitzer möglich. Die Gestaltung wird sich deshalb mehr auf die restlichen Aktionen konzentrieren.

Der Ablauf der Interaktion (Seitenfolge, Makroverschachtelung) ist durch Collabor festgelegt.

Der Blog besitzt eine eigene Druckansicht. Der Kopfbereich ist in der Vollansicht Einzelbeitrag ausgeblendet, für Listenansichten wie Beitragsvorschau eines Themenbereichs ist wird er gedruckt. Interaktionselemente im Kopf- und Inhaltsbereich (Bearbeiten-Link, etc.) sind ebenfalls ausgeblendet.

Screen-Design

Fensterverhalten: Das Browserfenster muss in fast allen Inhaltsansichten gescrollt werden (abhängig von der Anzahl der Stories bzw. Kommentare).

Schrift: Trebuchet MS, Verdana, sans-serif; für den gesamten Blog

Farben:

Text: Schwarz #000000
Text Hintergrund: leicht Grau: #f0f0f0
Nicht-Text Hintergrund: Weiß: #000000
Titel: stark Blau: #0000ff
Link: leicht Blau: #000060
gewählter Link: leicht Blau: #000060, unterstrichen

Dünner weißer Rahmen um Block-Elemente:

Kopfbereich, 3 Bereiche
Inhaltsbereich, Beitrag bzw. Kommentar

Bilder: Kopfbereich, Blog-Header image "read-think-learn", in Schwarz-weiß

Formate: Datumsformat durch Collabor Makro, kein festgelegtes Format für sonstige Zahlen bzw. Adressen

Tabellen werden durch div-Elemente ersetzt.

Es werden keine Icons und Grafiken verwendet.

Alle Inhalts- und Interaktionsseiten besitzen dieselbe Einheit und Struktur (auch bedingt durch Collabor Makros)

http://www.sitepoint.com/article/anatomy-web-fonts
http://typetester.maratz.com/

Draft: style-guide-v1.0 (0, 6 KB)