Medienproduktion

Link zum Drehbuch unserer Gruppe:

Drehbuch

Zum Film:

Nach der Anleitung die in den Beiträgen von Frau Lechner bzw. Herrn Mittendorfer vorliegt binde ich nun mein Movie ein:

Habe nachträglich den Film noch auf den qstreaming-Server gestellt, nachdem ich dies zuvor aufgrund des passiv-modes nicht konnte (wie bei der Präsentation kurz erwähnt). Nun habe ich aber das selbe Problem wie ein Kollege das der Film zwar gefunden wird aber nicht abgespielt wird. Ich konnte den Fehler leider (noch) nicht finden.

Einfacher Verweis:

rtsp://qstreaming.idv.edu:80/pim/Uni_Film.mov
http://qstreaming.idv.edu:80/pim/Uni_Film.mov

Einbindung mit Embed:

Einbindung mit Object

Einbindung mit Object & Embed.

Mit dem Firefox 2 funktioniert das Einbinden mit object nicht bzw. findet er die rtsp:\\-URL nicht. Beim Internet-Explorer 7 funktioniert alles bis auf die rtsp-URL.

Layout und Layoutverhalten von Fenstern

Der Header verläuft über die gesamte Breite und ist 100px hoch. Daher ist immer der ganze Banner zu sehen ohne das gescrollt werden muss.

Das Menu umfasst je nach Loginstatus eine verschiedene Anzahl an Elementen. Durch die Kurzanzeige der zuletzt geänderten Beiträge wird der Navigationsbereich fast immer zu hoch für die Darstellung auf einer einzelnen Seite sein, wodurch gescrollt werden muss. Die Breite ist mit 200px gewählt um allen Menupunkten genügend Platz zu bieten und auch dem Inahltsbereich genügend Platz zu lassen. Durch eine rechtsbündige Ausrichtung der Punkte ist keine Einrückung vom linken Rand nötig.

Ähnliches gilt für den Inhaltsbereich, welcher sich rechts neben dem Menübereich liegt. Der Abstand zum Menü wird mit 30px (links) und zum Header mit 20px (unten) gewählt. Ein zusätzlicher Margin von 20px (rundherum) sorgt für einen ausreichenden Abstand um die Bereiche klar voneinander unterscheiden zu können.

Folgende Grafik zeigt den Aufbau:

Typografie

Hauptaugenmerk der Seite liegt auf einer guten Lesbarkeit des Inhaltsbereiches. Daher wird eine wohlbekannte Standardschrift verwendet und eine schnörkellose, geradlinige Darstellung gewählt. Auch die Hintegrundfarbe wird entsprechend unauffällig gestaltet. So wird hauptsächlich weiß, zur Abgrenzung ein helles grau genutzt.

Schrift

Grundsätzlich werden als Schriftarten serifenlose Fonts verwendet. Diese sind am Bildschirm sehr gut lesbar und sind daher für einen Weblog der keine speziellen typografischen Ziele verfolgt anzuwenden.

Als Titelfont wird Arial bzw. Helvetica als Ersatz verwendet. Als eine Art "Standardfont" ist diese Schriftart den meisten Benutzern bekannt und erzeugt somit eine bekannte Atmosphäre. Für kleine Inhalte werden ebenfalls diese beiden Schriften eingesetzt.

Um dem Inhalt mehr Bedeutung zuzuführen wird die etwas mächtigere Schrift Verdana verwendet. Diese Schrift ist ebenfalls relativ weit verbreitet und dadurch wohlbekannt. Ersatzweise wird auf die bereits verwendeten Fonts Arial und Helvetica zurückgegriffen.

Farben

Als Grundfarbe für den Text wird aufgrund der guten lesbarkeit Schwarz gewählt. Die restlichen Farben sollten in Bedacht auf die Farbsonne aufeinander abgestimmt werden. Demzufolge wirken gegenüberliegenden Farbstrahlen als harmonisch, was mich zur Kombination aus Grün und ein ins violett gehende Rot bewogen hat. Weiters wird für die Titeln ein ebenfalls ins Violett gehendes, dezentes Blau eingesetzt. Als Hervorhebungsfarbe bietet sich ein helles grau an, da dies den eigentlichen Inhalt zwar trennt aber nicht dominiert.

Es werden also folgende Farben verwendet:

• Titel: #35356a
• Link: #009500
• Link:visited: #aa2b2b
• Hintergrund: #dddddd
• Text: #000000

Icons und Grafiken

Icons und Grafiken werden keine verwendet. Das Menu ist auch ohne Icons aussagekräftig genug, außerdem ist aufgrund der Barrierefreiheit (zB vorlesen von Bildern nur bei entsprechender Belegung eines alt- oder longdesc-Attributes möglich, bei Text immer) eine Navigation ohne Bilder vorzuziehen.

Auch im Fließtext werden keine Icons oder Grafiken eingeplant. Je nach Aufgabenstellung bzw. Inhalt des Beitrages können jedoch Icons und/oder Grafiken zum Einsatz kommen.

Fotos

Fotos und Bilder werden nur im Inhaltsbereich eingebunden um die entsprechende Aussage zu verdeutlichen. Es werden keine Fotos zur Strukturierung verwendet um Barrierefreiheit zu gewährleisten. Im Inhaltsbereich eingebundene bilder sollen eine Breite von 560px nicht überschreiten, um innerhalb des Content-Fensters zu bleiben.

Formate

Ein Datum wird im short-Format präsentiert. Dieses beinhaltet den Wochentag, den Tag des Monats sowie das Monat und die Uhrzeit.

Einheitlichkeit

Dieser Weblog zeigt auf allen Seiten die selbe Struktur. Die einzelnen Bereiche ändern lediglich ihren Inhalt, nie jedoch die Form. So werden je nach Status verschiedene Menüpunkte freigeschaltet, immer am selben Platz. Auch der Inhaltsbereich ändert bloß den dargestellten Content. Dieser hohe Grad an Einheitlichkeit bietet insbesondere bei einem Lernblog ein rasches Arbeiten.

INTERFACE-DESIGN

Informationsarchitektur

Der Blog folgt einer hierarchischen Strukturierung. Den Topics sind Stories untergeordnet. Diesen wiederum können Comments zugeordnet werden, so interesse anderer Nutzer besteht.

Der Weblog hat einen Content-Bereich. In diesem werden die Stories des aktiven Topics dargestellt. Auch die Interaktionen mit dem Blog wie die Bearbeitung von Stylesheets oder die Anlage einer neuen Story finden hier statt. Am linken Rand befinden sich die Navigation und sonstige Funktionen wie die Suche oder eine Übersicht über die zuletzt bearbeiteten Stories. Der darüberliegende Header besitzt als Informationsgehalt nur die LVA und den Autor.

Navigation & Subnavigation

Es stet das Statusmenu sowie das Interaktionsmenu zur Verfügung. Das Statusmenu zeigt jedem Besucher dessen aktuellen Status (nicht eingeloggt, eingeloggt, Administrator, Kontributor) an und erlaubt diesen zu bearbeiten.

Das Interaktionsmenu beherbergt je nach Status andere Optionen.

Für den Administrator:

• home
• topics
• gallieries
• add a story
• stories
• images
• files
• polls
• members
• preferences
• layouts
• referrers
• most read stories
• collabor::home

Nicht eingeloggt:

• home
• topics
• gallieries
• collabor::home

Inhaltsseiten

Der Blog enthält 2 Topics die übergeordnet Inhalte differenzieren. Einer dieser Topics beinhaltet die aktuellen Themen und Aufgaben der LVA Medienproduktion. Dieser Inhalt wird ständig durch Lösung der Aufgaben erweitert. Der Inhalt besteht somit aus den Stories die die Bearbeitung dieser Aufgaben dokumentieren.

Wording

Das Menü soll einfache Worte bzw. kurze Statements enthalten um eine schnelle Navigation zu ermöglichen. Als Sprache wird Deutsch gewählt, da die Zielgruppe nur Personen dieser Sprache umfasst.

Die Inhaltsseiten werden je nach Kontext anders ausgestaltet. So verlangt ein Beitrag über das CSS Design nach einer technischeren Ausdrucksweise als ein Beitrag über Barrierefreiheit.

Startseite

Die Startseite soll neben der Standardnavigation sofort die letzten Beiträge anzeigen. Aufgrund der Lernblogeigenschaft sollten die Informationen rasch zugänglich sein.

MultiMedia

Durch die Multimediale Ausrichtung der Lehrveranstaltung werden Videos und Animationen in die Beiträge eingebaut werden. Dies dient jedoch zur Gänze dem publizieren von Inhalten, nicht der Gliederung oder des Designs des Weblogs.

Interaktionsdesign

Das Ineraktionsdesign ist weitgehend bereits von der Blogsoftware vorgegeben. Die Registrierung erfolgt über die Eingabe des Usernamens und einer E-Mail-Adresse. Das durchklicken durch Beiträge wird über Topics hierarchisch gegliedert, wobei die aktuellen Beiträge bereits auf der Startseite zur Verfügung stehen. Kommentare können durch klicken des Comment-Links direkt bei den Beiträgen angefügt werden.

Eine grobe Einteilung des Interaktionsdesign folgt:

ZIELSETZUNG & ZIELPUBLIKUM

Zielpuplikum

Dieser Weblog soll die Teilnehmer sowie die Lehrenden der LVA Medienproduktion erreichen.

Erwartungen der Nutzer (Was erwartet sich der Nutzer?)

Die Lehrenden erwarten ein konsistentes Design realisiert durch einen möglichst barrierefreien Code. Die Mitstudenten wollen vorrangig die Umsetzung der Aufgaben verfolgen. Daher wird eine übersichtliche Darstellung verlangt.

Absichtserklärung & Zielsetzung

Durch die Umgestaltung dieses Blogs möchte ich meine technischen Grundkenntnisse im Bereich HTML und CSS vertiefen in dem etwa in XHTML codiert wird. Weiters will ich mir bislang unbekannte Themen wie barrierefreier oder semantische Code erkunden.

Aufgrund dieser Absichten ergeben sich folgende Ziele:

• Übersichtliche Darstellung der Lernziele
• Nutzung semantisch korrekten Codes
• Nutzung von barrierefreier Codierung
• Einsatz von XHTML

Gliederung des Inhaltes

Als Header wird ein simpler Text zur Information über den Kurs bzw. meiner Person (zB eMail-Adrese) angegeben. Weiters wird der Zeitpunkt der letzten Änderung genannt. Der Content wird im Topic PIM umgekehrt chronologisch zur Verfügung gestellt.