Medienproduktion

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

Einfacher Verweis:

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

Einbinden mit Embed:

Einbindung mit Object:

Einbindung mit Object & Embed:

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.

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.

Die erste Umstellung die ich machte war die Änderung des Doctypes von transitional auf strict :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dies ist zwar nicht dringend erforderlich, jedoch verwende ich den strikten Standard um sofort auf Fehler aufmerksam gemacht zu werden.

Weiters erfolgte die Änderung des tabellenbasierten Designs in ein CSS-basiertes Design. Dazu wurde der sichtbare Bereich in 3 Container unterteilt: Den Banner, das Menu sowie den Contentbereich. Diese wurden mittels einfacher CSS-Befehle richtig positioniert.

Hier der Quellcode:
/* ##### Container ##### */
#banner {
height: 100px;
width: 100%;
}
#menu {
float: left;
width: 200px;
}
#content {
/* oben - rechts - unten - links */
margin: 0 0 0 230px;
}

Eingebunden wurden diese Container in die Main Page mit dividern (zB <_div id="banner">...<_/div>). [Die Unterstriche dienen zur Darstellung der entsprechenden Tags)

Nach durchsicht der meisten "Schnipseln auf der Collaborseite wurde ersichtlich dass die meisten Teile bereits ohne Tabellendesign und semantisch korrekt vorhanden sind. Dies folgt aus der Tatsache das die meisten Schnipsel hauptsächlich Makros und wenig anderen Inhalt aufweisen.

Zu ändern war noch der Story Editor. Dieser wurde wie das Mainlayout von Tabellendesing auf CSS umgestellt. Durch die Schachtelung zweier Tabellen war dies vergleichsweise schwer erreichbar.

CSS-Quellcode:
/* ##### Story Editor ##### */
#storyEditor {
display: block;
}
#storyEditor h3 {
font-weight:normal;
}
#storyEditor .topicChooser {
margin-left:15px;
display: inline;
float: left;
}

Außerdem mussten einige Tags aus semantischen Gründen entfernt bzw. durch andere erstetzt werden. So ersetzte ich die <_span>-Tags durch <_div>-Tags da diese oftmals in <_p>-Tags vorkamen. Außerdem wurden anschließend an die spans <_br/>-Tags verwendet, welche durch den Einsatz von <_p>-Tags vermieden werden konnte. Diese Änderungen wurden auch im Comment Editor vorgenommen.

Ein Lernblog soll insbesondere das Erlenen neuer Themengebiete dynamisch gestalten. Es gilt statische Vorträge in Vorlesungen durch eigene Recherchen und Publikationen zu ergänzen bzw. zu vertiefen. Weiters bringt die Vernetzung der Teilnehmer einer Lehrveranstaltungen durch Links zu anderen Lernblogs bzw. durch Kommentare zu einzelnen Topics einen Mehrwert der online gestellten Informationen.

Daher sollte im Lernblog jedenfalls ein Modul eingeblendet sein welches Links zu den Weblogs anderer Kursteilnehmer bietet. Dadurch können andere Abhandlungen über ähnliche Themen nicht nur rasch gefunden werden, sondern der eigene Weblog kann durch eine Rückvernetzung leichter kommentiert werden. Ebenfalls sollte ein Modul eingebaut werden welches alle Referenzen auf den eigenen Blog, auch von nicht Kursteilnehmern, sichtbar macht.

Grundsätzlich sollte das Design klassisch ausfallen. D.h. am linken Rand die Module mit den Menüs bzw. Makros, breit rechts daneben der eigentliche textuelle (multimediale) Inhalt und an der Spitze der Seite ein Header als Erkennungselement aller Topics und Stories am Weblog.

Das Makro < imagelist > könnte für den einen oder anderen Einsatz sehr brauchbar sein. Bei Themengebieten die viele Bilder zur Visualisierung benötigen wird die angebotene Funktion die Bilder als Thumbnails gesammelt darzustellen sehr brauchbar sein. Jedoch wird dieses Makro nur fallweise interessant, zu Beginn eines Lernblogs meiner Meinung nach jedenfalls noch nicht.

< site.history > sollte in jedem Fall eingesetzt werden. Hierduch werden aktuelle Änderungen sofort abrufbar, was den Mitlernenden einen sofortigen Überblick über neu hinzugefügte Informationen oder Editionen dieser verschafft.

Natürlich sollte bei Lernblogs auf der Startseite auch der name des Bloggers zur Verfügung stehen. Dies erleichtert es den Kursteilnehmern Referenzen von den Blogs zu den Erstellern zu bilden. Würde kein persönliche Kontakt während der Lehrveranstaltungseinheiten bzw. zur Übugnsbearbeitung vorliegen, so würde ein Alias genügen.

Am Ende jeder Story sollten die Quellen für die Bearbeitung in Form von Links angegeben werden. Dies werden vorrangig Webseiten mit dediziertem Inhalt sein (etwa ein spezieller Eintrag in Wikipedia zum Thema), jedoch können auch andere Bloggs mit ähnlichem Themengebiet referenziert werden.

Folgender Link zeigt meine hardgecodede Designpage zum Lernblog:
Lernblog Design