Interaktive Medien - Wintersemester 2010

Aufgabenstellung und Herangehensweise

Die Aufgabe einen Entwurf einer persönlichen Website zu verfassen, ermöglichte mir mein bereits lange nicht mehr benötigtes HTML und CSS-Wissen wieder zu aktivieren, aktualisieren und aufzufrischen.

Bisher arbeitete ich beim Erstellen von Webseiten immer mit den Programmen Adobe Go Live bzw. Dreamweaver. Da ich jedoch von beiden Programmen derzeit keine aktuelle Version zur Verfügung hatte, entschied ich mich den KompoZer zu testen. Und ich muss ehrlich zugeben, dass ich mich sehr rasch zurechtfand.

Nachdem ich mich mit dem Programm auseinandergesetzt hatte, lud ich mir die im Blog zur Verfügung gestellte Dokumentvorlage herunter und sah mir das Beispielsdokument und das CSS-File an. Beides begeisterte mich nur bedingt. Darüber hinaus handelt es sich bei der Vorlage um ein HTML 4.01 Dokument. Ich wollte jedoch versuchen wirklich "sauber" zu codieren und habe mich daher entschieden für meine Dokumente XHTML 1.0 Transitional zu verwenden.

Daher lag es nahe auf der "grünen Wiese" zu beginnen und die Dokumente bzw. das CSS-File neu zu erstellen.

Grafische Gestaltung und Strukturierung

Ich überlegte mir ein einfaches Design und skizzierte es auf einem Blatt Papier. Daraufhin legte ich mir ein passendes Farbschema zurecht und begann mit der Umsetzung. 

Im Style-Sheet legte ich für den Body-Bereich die Hintergrundfarbe fest. Als Schrift verwende ich für die Site Verdana, sans-serif, 12px und eine Zeilenhöhe von 1.4.

Darauf hin legte ich die Eigenschaften für die weiteren Bereiche der Site fest. Diese umfassen den Header, den Rahmen, einen Top-Bereich, den Inhaltsbereich und den Navigationsbereich, den ich im übrigen auf der rechten Seite festgelegt habe. Ob dies benutzerInnenfreundlich ist, ist auch bei den Usability-Experten nicht geklärt. Ich bin der Meinung, dass diese Anordnung den Inhalt mehr betont und darüber hinaus für die Bedienung der Site angenehmer ist. Als weiteren und letzten Bereich wurde der Footer definiert.

Einige Zeit bedurfte es der Überlegung, wie ich die Navigation auf einfache Weise mittels CSS festlegen konnte. Ich entschied mich letztlich dafür die einzelnen Punkte als Liste zu formatieren und im Style-Sheet dazu Passendes für Links und Mouseover-Effekte festzulegen.

Schlussendlich überlegte ich welche Formatierungen sonst noch gebraucht werden würden und legte diese ebenfalls fest. Aber selbstverständlich wurden auch noch beim Erstellen der einzelnen Seiten Formatierungen benötigt, die bei Bedarf ergänzt bzw. angepasst wurden.

Zum Ausprobieren der Eigenschaften begann ich bereits zu Beginn mit der Erstellung der index-Seite meiner Site. Nachdem das Grundgerüst inklusive Probetext erstellt war, ging ich den HTML-Code nochmals in Detail durch und versuchte nicht notwendigen Code zu eliminieren.

Validierung

Wie bereits anfangs erwähnt, war mein Ziel für die Website sauberes HTML zu generieren. Ich habe mich daher auch entschlossen die Site in XHTML 1.0 Transitional zu erstellen.

Da ich mir dennoch nicht ganz sicher war, keine Fehler gemacht zu haben, verwendete ich zur Überprüfung des Cascading-Style-Sheets und der einzelnen Seiten die Validatoren von W3C (Link zuletzt aufgerufen am 4. Dezember 2010). Und in der Tat wurde der eine oder andere Fehler angezeigt, der in der Folge von mir korrigiert wurde. Insbesondere der Code zum Einbinden des Videos von YouTube kostete mir viel Zeit bis er endlich passte. Nun kann ich aber stolz mitteilen, dass alle meine Seiten gemäß W3C fehlerfrei sind. Als Zeichen dafür habe ich die Icons von W3C auf den einzelnen Seiten eingebaut. Die Grafiken zeigen dem/der Benutzer/in, dass die jeweilige Seite ein valide CSS (Level 2.1) besitzt und darüber hinaus auch erfolgreich als XHTML 1.0 Transitional überprüft wurde.

Inhalt meiner Homepage

Meine Website beschreibt einen Programmpunkt meiner Südtirol-Exkursion. Ich habe in den letzten Jahren begonnen Reisen kurz zusammenzufassen, um in der Folge nicht nur das Bildmaterial zur Verfügung zu haben, sondern auch einen kurzen Text mit meinen Eindrücken und möglichen Rückschlüssen. Da ich bei dieser Reise noch etwas säumig bin, nützte ich die Gelegenheit und erstellte zumindest einen Teil davon.

Neben allgemeinen Informationen zur Exkursion und dem Programmpunkt, widmen sich die Seiten der Geschichte der Vinschgerbahn, dem Jungend- und Erlebnisbahnhof Schnalsthal und meiner persönliche Beurteilung des Programmpunktes und einem Transfer meiner Erfahrungen auf die österreichische Situation. Darüber hinaus kann auf einer weiteren Seite ein Pressebericht über unseren Besuch aufgerufen werden. Abschließend habe ich noch einen Teil der von mir erstellten Fotos zu einem kleinen Film zusammengespielt und auf YouTube hochgeladen. Als Hintergrundmusik wählte ich die dort angebotene Audio-Swap Funktion, um etwaigen Problemen mit Nutzungs- und Urheberrechten aus dem Weg zu gehen.

Um den LeserInnen die Möglichkeit zu geben auch ohne Mail-Client mit mir in Kontakt zu treten, bietet die Site ein Feedback-Formular an. Die Umsetzung erfolgte mit Hilfe des Formular-Services vom Formular Chef (Link zuletzt aufgerufen am 4. Dezember 2010). Das automatisch generierte Formular wurde von mir angepasst, damit es sowohl inhaltlich als auch optisch in meine Website passt.

Javascript

Das geforderte Java-Script passte ich dahingehen an, dass nun der Xmas-Countdown für 2010 angezeigt wird. (Am 25. Dezember werde ich die Berechnung selbstverständlich an die geänderte Situation anpassen.)

So, seid ihr neugierig auf meine Site geworden? Dann schaut sie euch doch an. Ihr findet sie am IDV-Server unter: http://students.idv.edu/~9256784/.

Sehr gute Ausarbeitung der Aufgabenstellung!