read, think, learn
You're not logged in ... login

Abgabe, Flash Animation

Aufgabenstellung Ziel war das...

(2008-06-25 23:08)

November 2024: Juni      1  2  3  4  5  6  7  8  9 101112131415161718192021222324252627282930   
Home

OpenSearch and Sherlock search engine support

Experimentally I tried to add OpenSearch and Sherlock search engine support to my blog.

OpenSearch

OpenSearch is supported by Firefox 2+ and IE 7. Resources:

I created an OpenSearch description file and uploaded it on my blog: opensearch.xml (xml, 1 KB)

Sadly I cannot add the file to the layout itself, so there is a bit of dependency between the layout used and the files in the blog the layout is applied to.

A reference to the OpenSearch description file must be added to the HTML head by updating your layout's main page:
<link rel="search" type="application/opensearchdescription+xml" href="<% site.url %>getfile?name=opensearch.xml" title="OpenSearch <% site.title %>" />

Browsing my blog should add a search engine option to Firefox and IE.

Sherlock

Sherlock is a searching tool developed by Apple.
Resources:

Sherlock plugin description file: sherlock.src (src, 1 KB)

Sherlock untested yet.

Update: No success adding sherlock support, probably already outdated? Will stop trying

RSS feed icon in IE and Firefox

Internet Explorer and Firefox (and probably other browsers as well) support an RSS feed icon being activated/displayed if a webpage offers a rss feed. The default antville.org layout already provides a link but due to a false mime-type its not recognized by Firefox or IE. Add the following link tag to your HTML headers in main page layout:
<link rel="alternate" type="application/rss+xml" title="<% site.title %>" href="<% site.url %>rss">

cf. http://en.wikipedia.org/wiki/RSS#Including_in_XHTML

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)

Tutorium Filmdreh

Zum heutigen Tutorium, mit Drehen eines Kurzfilms, der Download-Link für das gezippte iMovie Projekt der Gruppe "Fliege": http://students.idv.edu/~9756179/248408_08s/imovie_project.zip