70
Diplomarbeit im Studiengang Audiovisuelle Medien vorgelegt von: Lars Posselt Matrikelnummer 14679 Studiengang Audiovisuelle Medien Prüfer: Prof. Oliver Curdt [Erstprüfer] Prof. Dipl.-Ing. Uwe Schulz [Zweitprüfer] Stuttgart, 31.01.2009 Konzeption & Umsetzung eines Webauftritts Dokumentation und Analyse des inhaltsbezogenen Designprozesses anhand des praktischen Fallbeispiels „HdM Tonstudio-Website“

Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

  • Upload
    dolien

  • View
    226

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Diplomarbeit im Studiengang Audiovisuelle Medien

vorgelegt von:

Lars PosseltMatrikelnummer 14679

Studiengang Audiovisuelle Medien

Prüfer:

Prof. Oliver Curdt [Erstprüfer]Prof. Dipl.-Ing. Uwe Schulz [Zweitprüfer]

Stuttgart, 31.01.2009

Konzeption & Umsetzung eines Webauftritts Dokumentation und Analyse des inhaltsbezogenen Designprozesses anhand des praktischen Fallbeispiels „HdM Tonstudio-Website“

Page 2: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Die vorliegende Diplomarbeit wurde von mir selbständig und ohne fremde Hilfe erstellt. Dies gilt sowohl für dieses schriftliche Werk, als auch für den praktischen Teil der Arbeit.

Alle Stellen dieser Arbeit, die wörtlich oder sinngemäß fremden Quellen entnommen sind, sind als solche gekennzeichnet und im Text bzw. dem Quellenverzeichnis der Arbeit ausgewiesen.

Diese Diplomarbeit wurde in gleicher oder ähnlicher Form noch nicht veröffentlicht und keiner Prüfungs-behörde vorgelegt.

Interna und/oder vertraulich zu behandelnde Informationen von Privatpersonen, Firmen oder sonstigen Einrichtungen wurden nicht verwendet; einer Einstellung dieses Werkes in die Bibliothek der Hochschule der Medien Stuttgart wird zugestimmt.

Stuttgart, 31.01.2009

Lars Posselt

I

eidesstattliche versicherung

Page 3: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Im September 2007, vor Beginn des Wintersemester 2007/08, wurde das Tonstudio der Hochschule der Medien von Studenten der Hochschule gemeinsam mit der Firma Wireworx modernisiert und neu struk-turiert.

Eine der an diesem Projekt teilnehmenden Studentinnen war Bärbel Mayr, die im Rahmen dieses Umbaus ihre Diplomarbeit mit dem Titel „Technischer Leitfaden und Bedienerhandbuch für das Tonstudio der Hochschule der Medien“ (Stuttgart, 2008) entwickelte. Gemeinsam mit ihr entstand die Idee, ihrer schrift-lichen Ausarbeitung eine eigene Webpräsenz für das Tonstudio, als zentrale Anlaufstelle für Organisato-risches und Fragen rund um das Studio, folgen zu lassen.

Diese Diplomarbeit greift die Idee auf und nimmt das Tonstudio bzw. den Fachbereich Ton der Hochschule der Medien als konkretes Beispiel für die Entwicklung einer Webpräsenz. Entwickelt wurde eine eigen-ständige HdM Tonstudio-Website unter dem Dach des HdM-Internetauftritts, welche sowohl der Repräsen-tation des Tonstudios nach außen dienen soll, als auch die Funktion eines Serviceportals für Studierende, Mitarbeiter und Nutzer des Studios anbietet. Berücksichtigt wurden die real existierenden inhaltlichen Anforderungen, ebenso wie die gestalterischen (Corporate Design) und technischen (Zope als Webappli-kationsserver) Rahmenbedingungen der Hochschule.

Basis für den Workfl ow bei der Umsetzung dieser Website ist der Ansatz des inhaltsbezogenen Designs. Die Grundzüge dieses Ansatzes werden zunächst theoretisch erörtert, seine Vorteile für einen optimierten Workfl ow herausgearbeitet.

Im Anschluss an die theoretische Abhandlung wird der erarbeitete Workfl ow anhand einzelner Milestones verdeutlicht. Diese sind der praktischen Umsetzung der HdM Tonstudio-Website entnommen, welche paral-lel zur schriftlichen Ausarbeitung erstellt wurde, um grundlegende Funktionen besser zu verdeutlichen.

In september 2007, right before the start of the winter term 2007/08, the recording studio of the Hoch-schule der Medien was modernized and restuctured by students and the Wireworx company.

One of those students was Bärbel Mayr, who developed her diploma thesis called „Technischer Leitfaden und Bedienerhandbuch für das Tonstudio der Hochschule der Medien“ (Stuttgart, 2008) during this re-construction. Together with her, the idea of creating a recording studio website as a central point for all questions and organizing issues around the studio in addition to her written thesis, came up.

This diploma thesis seizes the idea and picks the recording studio - respectively the faculty ‚audio‘ of the Hochschule der Medien - as a concrete example for the conceptual design of a website. So I developed an independent HdM Tonstudio-website under the umbrella of the existing HdM-website, which on the one hand, is representing the studio to people from outside the university, and on the other hand, serves as a service plattform for students, employees and users of the studio. Thereby the existing needs and condi-tions, regarding content as well as visual (Corporate Design) and technical (Zope as webapplication server) requirements of the university, were considered.

The principle of content based design is the fundament of the developed workfl ow. Its main features and the advantages of using this principle will be shown in the fi rst part of this thesis.

Subsequently the developed workfl ow will be illustrated by certain milestones that were taken out of the implementation of the HdM Tonstudio-website, which was built in addition to this written thesis to give people a better view on the basic functions.

II

abstract

Page 4: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

inhalt

I

II

III

1.

2.

3.

4.

Eidesstattliche Versicherung

Abstract

Inhalt

Einleitung .........................................................................................................

Theoretische Grundlagen ..................................................................................

2.1 Web 2.0 ....................................................................................................

2.2 Inhaltsbezogener Designprozess ......................................................................

2.2.1 Inhaltsbezogenes Design zu Gunsten des Users ....................................................

2.2.2 Inhaltsbezogenes Design zu Gunsten des Workfl ows ..............................................

Inhaltliche Konzeption ......................................................................................

3.1 Defi nition der Zielgruppe ...............................................................................

3.2 Auswahl und Strukturierung der Inhalte .............................................................

Entwicklung des Layouts ..................................................................................

4.1 Dimensionierung & Positionierung ....................................................................

4.2 Seitenstruktur & Gestaltungsraster (Wireframe) ....................................................

4.3 Farbwahl ...................................................................................................

4.4 Typografi e .................................................................................................

4.5 Grafi sche Komponenten, Formen & Schmuckelemente ............................................

4.5.1 Reiteroptik .................................................................................................

4.5.1 Bildmarke ..................................................................................................

4.5.3 Farbverläufe ...............................................................................................

4.6 Der Bereich Feature Content ...........................................................................

4.7 Exemplarische Beispielseite ............................................................................

III

01

03

03

05

05

07

11

11

11

14

15

16

17

19

19

19

20

21

22

26

Page 5: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Techniken zur Umsetzung des Frontends (CSS) .................................................

5.1 Bildersetzung mit Hilfe der Gilder/Levin-Methode ..................................................

5.2 Faux Columns .............................................................................................

5.3 Platzierung des Footers am unteren Viewport-Rand ...............................................

5.4 Hacks & Patches ..........................................................................................

Techniken zur Umsetzung des Backends (Zope) ................................................

6.1 Zope ........................................................................................................

6.2 Grundaufbau der HdM Tonstudio-Website ..........................................................

6.3 Modularer Aufbau von Hauptnavigation und Contentspalten ...................................

6.4 Die Inhalte der HdM Tonstudio-Website .............................................................

6.4.1 Fotogalerie ................................................................................................

6.4.2 Forum ......................................................................................................

6.4.3 konzeptionelle Vorüberlegungen zur Realisierung weiterer Inhalte .............................

Fazit ..................................................................................................................

Quellenverzeichnis

Verzeichnis der Abkürzungen

Appendix A: Styleguide der Hochschule der Medien

Appendix B: elektronisches Exemplar dieser Arbeit

III

5.

6.

7.

IV

V

VI

VII

28

29

31

32

38

41

41

44

45

46

47

47

48

51

Page 6: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

01

Diese Diplomarbeit beschreibt die einzelnen Schritte und Vorgehensweisen bei der Konzeption, visuellen Umsetzung und technischen Erstellung des Front- und Backends eines Internetauftrittes anhand eines konkreten praktischen Fallbeispiels: einer Website für das Tonstudio der Hochschule der Medien.

Geschildert wird der Workfl ow für die Erstellung einer Website, unter Berücksichtigung des konzeptio-nellen Ansatzes des inhaltsbezogenen Designs, sowie des Begriffs Web 2.0.

Unterteilt ist diese Arbeit in folgende Teilabschnitte:

Theoretische Grundlagen

Die Grundzüge der Begriffe Web 2.0, sowie inhaltsbezogenes Design werden erklärt, ihre Bedeutung und Vorteile für den Nutzer einer Internetseite, sowie für den/die Ersteller einer Webpräsenz herausgearbeitet.

Auf Basis der theoretischen Vorüberlegungen erfolgt eine nähere Beschreibung der einzelnen Teilbereiche innerhalb des Workfl ows. Milestones, Besonderheiten und kritische Passagen innerhalb des Prozesses werden anhand konkreter praktischer Beispiele geschildert. Hierbei bezieht sich die Arbeit auf die HdM Tonstudio-Website, die parallel zur schriftlichen Ausarbeitung (in Teilen) praktisch umgesetzt wurde, um dem Betrachter einen Überblick über die grundsätzliche Funktionalität zu verschaffen.

Die Reihenfolge der einzelnen Kapitel entspricht hierbei der Abfolge des inhaltsorientieren Prozesses:

1. Die inhaltliche Konzeption

Dieser Abschnitt befasst sich mit den im Vorfeld gemachten Überlegungen und der Herausarbeitung der Inhalte für die Website.Er behandelt die Fragen: „Welche Inhalte sind sinnvoll?“, „An wen richten sich die einzelnen Inhalte (Stu-denten, Mitarbeiter, Externe)?“, „Welchen Charakter besitzen sie („passive“ Information, aktive Teilnah-me, Enter-/Infotainment, Servicefunktion, ...)?“ und „In welcher Form werden sie dem Betrachter präsen-tiert (reiner Text, Bilder, Audio, Video, Animation etc.)?“

2. Die gestalterische Umsetzung der Seite

Auf Basis der strukturierten Inhalte wird ein visuelles Konzept für ein statisches Layout kreiert. Dies ge-schieht auf Grundlage der Designkriterien des Web 2.0.

Schwerpunkte dieses Kapitels sind die Entwicklung einer Bildmarke für den Bereich Tonstudio, sowie die Konzeption eines neuen, von der Optik der Mutterseite der HdM unabhängigen Layouts.

Primäres Ziel hierbei ist es, ein Layout zu erstellen, das die HdM Tonstudio-Website deutlich als eigenstän-dige Seite positioniert, gleichzeitig jedoch eine Brücke zum Corporate Design der Hochschule schlägt und sich innerhalb der vorgegebenen Design-Richtlinien der HdM bewegt. Erzielt wird dieser Effekt durch das Schaffen diversen Assoziationen, sowie das Aufgreifen bereits vorhandener gestalterischer Elemente.

1. einleitung

Page 7: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

02

3. Die technische Umsetzung des Frontends

Diese Kapitel befasst sich mit der Überführung des erstellten Layouts in ein XHTML-Markup bzw. der an-schließenden Formatierung dieses Markups durch CSS. Anhand konkreter Beispiele aus der praktischen Arbeit werden signifi kante Teilbereiche und besondere Anforderungen an die Frontend-Programmierung dargestellt.

4. Die technische Umsetzung des Backends

Dieser Teil der Arbeit geht auf die Technik „hinter“ der Seite ein. Da das Open Source Framework Zope die Basis für den Internetauftritt der Hochschule ist, bildet Zope auch den Rahmen für die erstellte HdM Tonstu-dio-Website. Beschrieben wird das Zope-Framework, sowie einige Besonderheiten bei der Nutzung von Zope.

Schwerpunktmäßig dargestellt ist die Umsetzung der Hauptnavigation der Seite. Diese ist modular aufge-baut, um spätere Inhalte einfach auszutauschen und neue Menüpunkte problemlos hinzufügen, entfernen und tauschen zu können.

In die praktische Arbeit wurden, sofern im Rahmen dieser Arbeit möglich, exemplarisch einige der ent-wickelten Inhalte bereits dynamisch eingebunden - so zum Beispiel eine Bildergalerie und ein Forum. Be-reiche die zum Zeitpunkt der Abgabe des schriftlichen Teils der Arbeit noch ohne Funktion waren, wurden statisch bzw. in Form von Grafi ken eingebunden, um dem Betrachter einen Überblick über das Look & Feel der Seite zu geben. Nicht umgesetzte Komponenten werden in diesem Kapitel theoretisch erläutert.

Abschließend werden die durchgeführten Arbeitsschritte zusammengefasst und ein persönliches Resümee gezogen.

Page 8: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Diese Arbeit beschreibt die Erstellung einer Webpräsenz. Geschildert wird der gewählte Workfl ow, sowie das visuelle und technische Design bei der Umsetzung einer Website für das Tonstudio der Hochschule der Medien.

Grundlage für den gewählten Weg sind zwei aktuell gültige Prinzipien des Webdesigns, auf die im Verlauf der Arbeit an entsprechender Stelle Bezug genommen wird.Hinsichtlich der visuellen Gestaltung sind dies die typischen Designmerkmale der seit einiger Zeit propagier-ten „Webkultur“ Web 2.0; Basis für den gewählten Workfl ow ist der Ansatz des inhaltsbezogenen Designs.

Diese beiden Begriffe werden im folgenden Abschnitt erläutert.

03

2. theoretische grundlagen

2.1 Web 2.0

„Der erste Eindruck, den man vom Begriff Web 2.0 bekommt, ist die Erinnerung an eine Versi-onsnummer aus der Software-Entwicklung. Web 2.0 stellt in gewissem Sinne eine Erneuerung des ‚alten‘ Webs dar. Dabei handelt es sich bei der Erneuerung nicht nur um technische Mei-lensteine, sondern auch um eine neue Art der Kommunikation und Vernetzung zwischen den Nutzern. Dabei darf man sich nicht von der dominierenden Meinung beeindrucken lassen, die das Web 2.0 als eine revolutionäre Neuerfi ndung darstellt. Das neue Web entwickelt sich zwar technisch zu einem beispiellosen Medium, konzeptionell macht es jedoch einen großen Schritt zurück – zu den Anfängen des World Wide Web, als die Benutzer zum aktiven Aus-tausch von Informationen und Kenntnissen motiviert wurden. Dieser Grundgedanke wurde durch den Online-Konsum der 90er-Jahre schnell in den Hintergrund verdrängt, kehrt nun aber in einer neuen Gestalt zurück.“

(Friedman, V., S.35)

Der Begriff Web 2.0 wurde bereits im Herbst 2004 von den Web-Pionieren Tim O‘Reilly und Dale Dougherty geprägt (vgl. Friedman, V., S.31) und wird seit einiger Zeit vermehrt bemüht, wenn es um die Konzeption, Gestaltung und Programmierung von Webpräsenzen geht.

Der konzeptionelle Ansatz Web 2.0 bezieht sich auf zwei unterschiedliche Ebenen:

Zum einen befasst er sich mit den auf einer Website zur Verfügung gestellten Inhalten und den zu Ver-fügung stehenden Techniken. Propagiert wird die Abkehr vom reinen Konsum und das Ausschöpfen der Möglichkeiten bezüglich der aktiven Partizipation des Nutzers. Exemplarisch angeführt werden Elemente wie Blogs (BILDBlog), Soziale Netzwerke (studiVZ), Social Bookmarking, Multimedia Portale (Photocase), kollektive Intelligenz (Wikipedia) und Tauschplattformen (vgl. Friedman, V., S.62ff).

Page 9: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Neben den Inhalten und Mechanismen befasst sich Web 2.0 jedoch auch ausführlich mit dem Design eines Internetauftritts:

„Das Design des Web 2.0 zeichnet sich insbesondere durch neue kreative Ansätze und sorgfältig durchdachte Entwürfe aus. Designer verleihen jedem Seitenelement mehr Be-deutung und Ausdruckskraft. Eine einheitliche Organisation und Struktur der Seiten wird zunehmend wichtiger; in Kombination mit gezielt gewählten Designelementen lassen sie eine Vielzahl von Projekten entstehen, die durch eine visuell ansprechende und benutzer-freundliche Seitengestaltung zu beeindrucken wissen.Im Mittelpunkt des Geschehens steht dabei jeder einzelne Besucher. Dieser soll sich auf der Seite schnell zurechtfi nden und gesuchte Informationen fi nden können.“

(Friedman, V., S.67)

Web 2.0 rückt die Benutzerfreundlichkeit (Usability) in den Vordergrund. Wurde das grafi sche Design einer Website früher eher als Mittel verstanden, um Internetauftritte - analog zu Flyern im Printbereich - optisch zu verschönern, so wird das Layout mittlerweile primär als die Möglichkeit gesehen, einer Seite klare Struk-turen zu verschaffen. Die Bereiche Inhalt und Information gewinnen wieder an Bedeutung; ein Design nur „um seiner selbst Willen“ ist nicht mehr gefragt. Vielmehr erhält es eine neue, wichtigere Funktion: die der „ordnenden Hand“ für den Benutzer.

Web 2.0 sollte nicht als optischer Rückschritt zu den Anfängen des Webs verstanden werden. Es stellt lediglich die Inhalte und Funktionalität einer Seite an die erste Stelle. Ist diese gewährleistet, so offeriert die Designkultur des Web 2.0 eine Vielzahl an aufwändigen und optisch ansprechenden Elementen und versucht - mehr denn je - sich an erfolgreiche Printdesigns anzulehnen.

Zu den typischen Merkmalen des Web 2.0 Designs gehören unter anderem mehrspaltige Layouts, gelun-gene Farbkombinationen, Schatten, Spiegelungen, 3D-Effekte, abgerundete Ecken und Verläufe, sowie grafi sche Schmuckelemente wie beispielsweise Icons und Badges.

Nachfolgende Abbildung zeigt einige dieser Elemente:

Abb. 01

[ Merkmale der Designkultur Web 2.0 ]

04

Page 10: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

2.2 Inhaltsbezogener Designprozess

Befasst man sich mit Publikationen zum Thema Web 2.0, so stößt man zwangsläufi g auf zwei Schlagworte, die die Grundlagen für eine erfolgreiche Seite beschreiben.

Zum einen ist dies der Begriff Content is King:

„ ‚Content is king‘ - dieses Schlagwort charakterisiert den Stellenwert der Inhalte: ein König, der die Beachtung aller Leute aus dem Design- und Entwicklungszyklus einfordert. [...] Inhalte in Form von Texten, Links, Fotos, Audio- und Videodateien sind die Grundlage einer jeden Site.“

(Clarke, A., S.103)

Zum anderen die Prämisse Joy of Use:

„Akzeptanz durch die Benutzer ist der Schlüssel zum Erfolg jedes Internet-Angebots. Sie ent-scheidet darüber, ob ein Angebot regelmäßig genutzt, ein Bestellvorgang abgeschlossen oder eine Kontaktanfrage gestellt wird. Optimale Usability setzt voraus, dass die Internet-Anwen-dung konsequent nutzerorientiert entwickelt wird.

Darüber hinaus gibt es einen Mehrwert in der Interaktion mit einer Website: den sogenannten ‚Joy of Use‘, zu deutsch: Spaß an der Nutzung. Der ‚Joy of Use‘ ist das positive, ästhetisch-emotionale Erlebnis im Umgang mit einer Website. Er wird immer häufi ger als imagewirk-samer Erfolgsfaktor und damit als Wettbewerbsvorteil fokussiert. “

(Cloppenburg, K., http://www.wud-berlin.de/2008/joy-of-use.php)

Joy of Use beschreibt den Spaß an der Nutzung und das emotionale Erlebnis. Dieses Kriterium bezieht sich auf die optische Präsentation einer Seite gegenüber dem Besucher und wird im Kapitel 4. Entwicklung des Layouts dieser Arbeit näher betrachtet.

Der Begriff Content is King hingegen bezieht sich auf die Inhalte. Er defi niert den Content einer Website als Grundlage - sowohl für den Nutzer einer Seite, als auch für jeden Arbeitsschritt des Workfl ows während der Erstellung einer Internetpräsenz. Die Vorteile eines solch inhaltsbezogenen Ansatzes zeigen die nach-folgenden Abschnitte 2.2.1 Inhaltsbezogenes Design zu Gunsten des Users und 2.2.2 Inhaltsbezogenes Design zu Gunsten des Workfl ows.

Internetauftritte von Privatpersonen und kleinen Geschäften lassen sich zumeist recht einfach und schnell umsetzen. Die Inhalte einer Website für den „Bäcker um die Ecke“ sind überschaubar und in der Regel meist statischer Natur. Auch die Anforderungen an die benötigten Funktionen sind begrenzt: meist reicht hier schon ein simples Kontaktformular.

2.2.1 Inhaltsbezogenes Design zu Gunsten des Users

05

Page 11: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Solche Seiten haben mehr oder minder die Funktion einer elektronischen Visitenkarte. Hier tritt die op-tische Aufbereitung der Inhalte in den Vordergrund: ein schöner, stimmiger Rahmen hilft, um die wenigen Informationen der Außenwelt online zu präsentieren und das gewünschte Bild (seriös, kompetent, kreativ, fl ippig usw.) von sich zu erzeugen.

Ebenfalls mit wenig Inhalten, dafür aber oftmals mit einem hohen grafi schen Aufwand umgesetzt, sind zum Beispiel temporär aktuelle Seiten für einzelne Events, Festivals oder andere Veranstaltungen. Wenige Informationen (was? / wann? / wo?) werden in teilweise ausgefallene Designs, ungewöhnliche Gestal-tungsraster und Animationen verpackt, um die jeweilige Zielgruppe vor allem auf der emotionalen Ebene anzusprechen und zu begeistern.

Sobald der inhaltliche Umfang einer Seite allerdings zunimmt und über das beschriebene Maß hinaus geht, verändert sich die Priorität. Der Besucher einer Seite rückt die Information bzw. das schnelle Auffi nden einer gesuchten Information in den Mittelpunkt, die emotionale Ansprache ist nur noch von sekundärer Bedeutung. Dies bedeutet zwangsweise auch ein Umdenken für das Erstellen des Designs einer solchen Seite: weg vom „grafi schen Feuerwerk“ und hin zum klaren, den Inhalt unterstützenden Raster.

Die klare Priorisierung des Inhalts reicht bis hin zum absoluten Minimalismus, einem Phänomen der Web 2.0-Kultur (vgl. Friedman, S. 43f). Bekanntestes Beispiel hierfür ist sicherlich eine der meistgenutzten In-ternetseiten überhaupt - die der Suchmaschine Google. Google verzichtet praktisch komplett auf visuelle Gestaltungsmittel und präsentiert die gefundenen Ergebnisse schlicht „schwarz auf weiß“.

Einziges Schmuckelement ist und bleibt das Google-Logo, welches zu besonderen Anlässen in abgewan-delter Form präsentiert wird und somit Aufmerksamkeit erregt.

06

Abb. 02

[ Variationen des Google-Logos, Quelle: http://www.google.com/holidaylogos.html, Januar 2009 ]

Page 12: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

07

Andere Anbieter großer Seiten arbeiten nicht ganz so minimalistisch, legen den Fokus jedoch ebenfalls klar auf die zu präsentierenden Informationen. Sie setzen Design und Farbe ein, um Inhalte zu strukturieren und den Besucher durch die Seite zu führen. Hinzu kommen - wenn es dem Inhalt bzw. der Strukturierung dient - wenige grafi sche Elemente, zum Beispiel in Form von Header-Grafi ken im Seitenkopf.

Gut zu erkennen ist dies unter anderem bei den Auftritten großer Web-Shops (zum Beispiel Amazon) bzw. auch auf den Seiten der Hochschule der Medien (www.hdm-stuttgart.de) :

Abb. 03

[ Startseite der Hochschule der Medien Stuttgart, Quelle: http://www.hdm-stuttgart.de, Januar 2009 ]

Kapitel 2.2.1 Inhaltsbezogenes Design zu Gunsten des Nutzers zeigt die Relevanz, die die Ausrichtung eines Designs an zuvor gesammelten Inhalten für den Benutzer hat. Durch ein inhaltsbezogenes Design erhöht sich die Benutzerfreundlichkeit und Übersichtlichkeit für den Betrachter.

Ebenso wichtig sind jedoch die positiven Auswirkungen, die ein inhaltsbezogenes Design auf den Workfl ow bei der Erstellung eines Webauftritts besitzt:

Seiten mit hohem Umfang sind in der Regel nicht von einzelnen Personen umsetzbar. Schon bei einem mit-telgroßen Umfang, wie dem der hier erarbeiteten HdM Tonstudio-Website, lassen sich schnell Probleme er-kennen. Limitierende Faktoren - sowohl bei der Erstellung einer Diplomarbeit, als auch bei der Umsetzung eines Kundenprojekts in der realen Arbeitswelt - sind hierbei einerseits der zeitliche Rahmen, andererseits die technischen Fähigkeiten der am Prozess beteiligten Personen. Daher arbeiten in der Regel mehrere Experten zeitgleich an den Teilbereichen Design und technische Entwicklung.

2.2.2 Inhaltsbezogenes Design zu Gunsten des Workfl ows

Page 13: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

08

Problematisch wird die Zusammenführung der beiden Teilbereiche dann, wenn das Design der Seite losge-löst von der Semantik der Inhalte erstellt wird.

Traditionelle Herangehensweisen zur Umsetzung des Frontends orientieren sich am optischen Aufbau ei-ner Seite: das Layout bestimmt die Abfolge bei der Programmierung der einzelnen Bestandteile.

Der Hintergrund für dieses Vorgehen liegt in der Geschichte der Webgestaltung:

Lange Zeit war es Erstellern von Websites nicht möglich, etwas von den traditionellen Layoutelementen des Printbereiches in ihre Seiten zu übertragen. 1997 entwickelte David Siegel die Idee eines <table>-Markups: Er nutzte das ursprünglich zur Darstellung tabellarischer Informationen gedachte Element<table> in Verbindung mit dem Einsatz von Blind-GIFs, um grafi sche und textliche Inhalte innerhalb ei-ner Website an festen Positionen zu platzieren und Hintergründe in Form von Grafi ken zu erstellen. Diese Vorgehensweise wurde von einer Vielzahl von Webdesignern umgehend übernommen, da sie erstmals die Chance bat, optisch aufwändige „Präsentations-Seiten“ zu erstellen und ist - leider - noch bis heute in einige Köpfe eingebrannt.

Siegel selbst beschreibt seinen Ansatz bereits im Oktober 1997 als Fehler:

„Some people say I‘ve ruined the Web, and to them it‘s true. [...] I ruined the Web by mixing chocolate and peanut butter so they could never become unmixed. I committed the han-gable offense of mixing structure with presentation, and in HTML and SGML circles, that‘s a big no-no.“

(David Siegel: „The web is ruined and I ruined it“, Quelle: http://www.xml.com/pub/a/w3j/s1.people.html)

Problem ist die nicht vorhandene Trennung von Inhalt, Struktur und Darstellung. Inhalt und Struktur sind bei dieser Herangehensweise stark vom visuellen Layout abhängig (vgl. Clarke, A., S.55). Dies führt zu großen Schwierigkeiten bei der Zusammenführung von Design und Technik, speziell bei umfangreichen und dynamischen Inhalten.

Umseitige Abbildung zeigt die Reihenfolge der Inhalte einer Website bei Orientierung am Layout. Zu er-kennen ist folgende Abfolge:

1.

2.

3.

4.

5.

6.

7.

8.

9.

sekundäre Navigation

Hauptnavigation

Branding

Bilder-Navigation

Suche

zusätzlicher Inhalt

Hauptinhalt

ergänzende Navigation

Site-Information

Page 14: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

09

Abb. 04

[ Beispiel für eine lineare Reihenfolge bei der designorientierten Frontend-Programmierung, Quelle: Clarke, A., S.59 ]

Semantisch richtig ist jedoch folgende Reihenfolge:

1.

2.

3.

4.

5.

6.

7.

8.

9.

Branding (incl. Hauptüberschrift) ( 3 )

Hauptnavigation ( 2 )

sekundäre Navigation ( 1 )

Suche ( 5 )

Hauptinhalt ( 3 )

zusätzlicher Inhalt ( 6 )

Bilder-Navigation ( 4 )

ergänzende Navigation ( 8 )

Site-Information ( 9 )

(in Klammern: die jeweilige Position bei Anwendung des designbezogenen Ansatzes)

Page 15: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

10

An diesem Punkt setzt das Konzept des inhaltsbezogenen Designs an. Auf Basis der semantisch richtigen Abfolge der Inhalte lässt sich folgender Workfl ow für die Erstellung des Frontends entwickeln:

1. Inhalte sammeln

2. Wireframes verwenden, um die Inhalte zu organisieren und zu präsentieren

3. Statisches Design entwerfen

4. Aussagekräftiges Markup schreiben, das die Inhalte strukturiert

5. Das Design mit CSS umsetzen

(vgl. Clarke, A., S. 104)

Abb. 05

[ grafi sche Darstellung der fünf Schritte des inhaltsbezogenen Designprozesses, vgl. Clarke, A., S.104f ]

Nachfolgende Abbildung verdeutlicht die einzelnen Schritte nochmals optisch:

Diese Vorgehensweise zur Erstellung des Frontends ermöglicht eine bessere Arbeit im Team. Durch sie können parallel schon Arbeiten am Backend durchgeführt werden. Durch den semantisch richtigen Auf-bau werden Probleme bei der späteren Zusammenführung der beiden Teilbereiche vermieden.

In den nachfolgenden Kapiteln werden nun die einzelnen Schritte dieses Workfl ows, beginnend mit der Sammlung der Inhalte, linear am Beispiel der HdM Tonstudio-Website abgehandelt.

Page 16: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

11

Kapitel 2. Theoretische Grundlagen beschreibt den Inhalt als zentralen Ausgangspunkt für die Entwicklung einer Website. Gemäß dieses inhaltsbezogenen Ansatzes wurden bei der Konzeption der HdM Tonstudio-Website zunächst die existierenden Anforderungen analysiert und daraus die zu präsentierenden Inhalte abgeleitet:

3. inhaltliche konzeption

3.1 Defi nition der Zielgruppe

In einem ersten Schritt wurden die Zielgruppen für eine HdM Tonstudio-Website defi niert und deren inhalt-liche Anforderungen an eine solche Seite erörtert.

Primäre Zielgruppe sind die Studenten und Mitarbeiter der Hochschule. Ihnen soll die Seite in erster Linie Unterstützung bei der Nutzung des Tonstudios geben und Servicefunktionen bereitstellen. Zudem soll sie eine zentrale Kommunikationsplattform für Themen rund um die Bereiche Tonstudio und die Studiopro-duktion Ton bieten.

Eine zweite Zielgruppe sind hochschulexterne Besucher. Neugierigen und Interessenten soll die Einrichtung Tonstudio möglichst umfassend und ausführlich präsentiert werden.

Die Anforderungen, die diese beiden Gruppen an eine HdM Tonstudio-Website stellen sind unterschiedlich. Studenten und Mitarbeiter erwarten einen hohen inhaltlichen Informationsgehalt, welcher in erster Linie textlicher Natur ist. Sie benötigen ein schlichtes, übersichtliches Raster, das ein schnelles Zurechtfi nden auf der Seite und möglichst rasches Erlangen der gesuchten Informationen gewährleistet.Interessenten soll das Tonstudio dagegen nach Möglichkeit nicht nur in Form von Texten und statischen Bildern, sondern leicht, bewegt und multimedial präsentiert werden. Es soll eine emotionale Ansprache gefunden werden, um sie zu begeistern.

3.2 Auswahl und Strukturierung der Inhalte

Auf Basis der Zielgruppen-Analyse erfolgte die Auswahl der Inhalte. Dies geschah in Absprache mit den Verantwortlichen für den Bereich. Zugleich wurde festgelegt, in welcher Form die einzelnen Elemente dem Nutzer präsentiert werden sollen.

Folgende Inhalte wurden ausgewählt:

1. ein Bereich Erste Hilfe mit Bedienungsanleitungen und Tutorials:

Studenten arbeiten oftmals eigenständig im Tonstudio - auch abends und an den Wochenenden. Tauchen hier Probleme auf, so bleiben zumeist nur zwei Möglichkeiten: entweder die Arbeit abzubre-chen, oder per Try-and-Error unterschiedliche Steckverbindungen und Einstellungen auszuprobieren.

Page 17: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

12

2.

3.

4.

Leider ist es daraufhin nur schwer nachvollziehbar, was für Verbindungen geändert wurden bzw. wie der ursprüngliche Zustand wieder hergestellt werden kann.

Der Bereich Erste Hilfe bietet Jörg Bauer, dem für das Tonstudio verantwortlichen technischen Ange-stellten die Möglichkeit, Anleitungen zur Bedienung und Verbindung der unterschiedlichen Kompo-nenten bereitzustellen. Gängige Probleme können hier in Form von Tutorials online publiziert und/ oder zum Download als PDF angeboten werden. Ebenso lassen sich hier Grundkonfi gurationen als Ausgangsbasis für bestimmte Einstellungen unterbringen.

eine Tonstudio-Wiki:

Der Bereich Erste Hilfe befasst sich mit der Bedienung des Tonstudios und wird ausschließlich von offi zieller Seite, also den technischen Angestellten, Professoren und Mitarbeitern des Bereichs, mit Inhalten versorgt. Im Gegensatz dazu können die Studenten in der Tonstudio-Wiki selbst Einträge verfassen und editieren.

Die Tonstudio-Wiki ist somit eine Ergänzung zum Bereich Erste Hilfe, da hier auch Anleitungen und Tipps zur Nutzung des Studios publiziert werden können.

Darüber hinaus bietet sie auch die Möglichkeit Begriffserklärungen aus dem Bereich Audio zu sam-meln. Auf Basis eines zu Anfang eingepfl egten Grundbestands an Schlagworten und Fachbegriffen (zum Beispiel Monitoring, Samplerate oder Synchronisation), soll hier ein studentischer Wissenspool entstehen, der zur aktiven Teilnahme anregt.

ein Forum:

Das Forum der HdM Tonstudio-Website soll die zentrale Anlaufstelle für Absolventen der Studiopro-duktion Ton werden. Eine einheitliche Plattform zur Kommunikation der Teilnehmer untereinander existiert bislang nicht. Mit der Erstellung eines Forums soll diese geschaffen werden. So können zu-künftig Foren für die einzelnen Produktionsgruppen eingerichtet werden, in denen dann einfach und schnell Aufgaben verteilt, Termine vereinbart und Abläufe diskutiert werden können.

Durch die Vergabe verschiedener Benutzerrechte lassen sich zudem weitere Foren einrichten: von öf-fentlichen Foren bis hin zu geschlossenen Bereichen für Professoren und technische Angestellte bzw. andere private Nutzergruppen.

eine Tonstudio-Disposition:

Die Hochschule verfügt bereits über eine Tonstudio-Disposition (http://ts-dispo.hdm-stuttgart.de). Über sie lassen sich die Belegung des Studios einsehen und einzelne Studioräume buchen. Die momentane Variante ist jedoch recht rudimentär. Die erstellte HdM Tonstudio-Website bietet den geeigneten Rah-men für eine neue Disposition mit umfangreicheren Funktionen und optimierten Abläufen.

Die Punkte 1-4 stellen allesamt Inhalte dar, die praktisch ausschließlich an Studenten und Mitarbeiter der Hochschule gerichtet sind. Durch sie erhalten diejenigen Personen, die direkt mit dem Tonstudio bzw. mit der Studioproduktion Ton zu tun haben, eine zentrale Plattform, nützliche Informationen bzw. Service-Funktionen.Die abzubildenden Inhalte sind hierbei überwiegend textlicher Natur. Darüber hinaus ist zu beachten, dass Bereiche des Forums, sowie die Tonstudio-Disposition an das Authentifi zierungs-System der Hochschule angebunden, und somit lediglich für Angehörige der Hochschule zugänglich gemacht werden sollten.

Page 18: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

13

Um auch die zweite Zielgruppe der externen Interessenten ausreichend zu bedienen, wurden weitere Bau-steine in die Seite aufgenommen:

5.

6.

7.

eine Fotogalerie:

Durch den Einsatz einer Fotogalerie (bzw. bei Bedarf auch mehrerer Galerien) inklusive kurzer Be-schreibungstexte soll sich das Tonstudio den Besuchern präsentieren bzw. Impressionen von beson-deren Ereignissen innerhalb des Tonstudios (zum Beispiel der kompletten Modernisierung im Herbst 2007) liefern.

eine virtuelle Tour:

Der Besucher soll auf den Webseiten des Tonstudios einen möglichst genauen Eindruck über den Aufbau, die Dimensionen und die vorhandene Ausstattung des Studios vermittelt bekommen. Dies ist am besten möglich, wenn er die Gelegenheit bekommt, sich selbständig im Studio umzuschauen - was sich in Form einer virtuellen Tour realisieren lässt.

Audio- / Videoplayer:

Nicht nur das Studio selbst, sondern auch ein Portfolio an hier entstandenen Werken soll dem Be-trachter über die Website präsentiert werden. Durch das Einbinden eines Audio- bzw. Videoplayers können Studenten und externe Besucher gleichermaßen einen Einblick in die studentischen Arbeiten (zum Beispiel Hörspiel- oder Musikproduktionen, Auftritte der HdM-Band etc.) erlangen.

Die Punkte 5-7 bilden Inhalte ab, die sich nicht ausschließlich an die Nutzer des Tonstudios richten. Sie sprechen in erster Linie den erweiterten Kreis der Zielgruppe an.Wichtig ist hierbei, dass neben der inhaltlichen Information der unterhaltende Charakter eine stärkere Ge-wichtung erhält, um den Betrachter möglichst kurzweilig zu informieren (Joy of Use). Der Anteil textlicher Information ist stark reduziert, die audiovisuelle Ansprache tritt in den Vordergrund. Zusammenfassen lassen sich die Punkte 5-7 unter dem Sammelbegriff Infotainment.

Die Inhalte 1-7 stellen die Hauptinhalte der Website. Ergänzt wurden diese um die obligatorischen Ele-mente einer Internetpräsenz: einer Startseite mit allgemeinen Informationen und aktuellen Neuigkeiten, einem Kontaktformular, sowie einem Impressum. Eine Sitemap ist optional. Aufgrund der fl achen Hierarchie der Seite ist sie jedoch nicht zwingend notwendig.

Page 19: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Das Kapitel 3. Inhaltliche Konzeption zeigt auf, dass die Auswahl der Inhalte sich an den relevanten Nutz-ergruppen orientiert. Die Inhalte und deren Präsentationsform wurden so gewählt, dass neben der rein passiven Bereitstellung von textlichen Informationen vor allem zwei Aspekte der Web 2.0-Methodik in den Vordergrund rücken: aktive Teilnahme und Service für den Nutzer.

Der nächste Schritt innerhalb des Workfl ows umfasst nun die Entwicklung eines geeigneten Layouts. Dieses soll - gemäß den erörterten Web 2.0-Kriterien - den Inhalt der Seite unterstützen, indem es den Blick des Betrachters leitet und ihm ein klares und übersichtliches Raster bietet, auf dessen Basis die gesuchten Informationen schnell zu fi nden sind.

„Eine einheitliche Organisation und Struktur der Seiten wird zunehmend wichtiger; in Kombi-nation mit gezielt gewählten Designelementen lassen sie eine Vielzahl an Projekten entstehen, die durch eine visuell ansprechende und benutzerfreundliche Seitengestaltung zu beeindru-cken wissen.Im Mittelpunkt des Geschehens steht dabei jeder einzelne Benutzer. Dieser soll sich auf der Seite schnell zurechtfi nden und gesuchte Informationen fi nden können.“

(Friedman, V., S.67)

Ein zweiter wichtiger Punkt ist die Integration der Seite in das Corporate Design der Hochschule. Erstellt wurde ein vollkommen eigenständiges Design, welches jedoch durch gezielte Farbwahl und das Aufgrei-fen verschiedener grafi scher und typografi scher Elemente einen Bezug zur allgemeinen Corporate Identity der HdM herstellt.

Zudem wurde eine symbolische Bildmarke für das Tonstudio konzipiert. Diese wird, ganz oder in Ele-menten, im Layout der Seite wiederholt aufgegriffen. Denkbar ist diese Bildmarke zukünftig auch in an-deren Bereichen, wie Präsentationen, Plakaten, Printpublikationen und anderen Materialen, die in Bezug zum Tonstudio stehen, zu nutzen.

Spezielle Beachtung fi ndet in diesem Kapitel das in Kapitel 2.2 Inhaltsbezogenes Design angesprochene Prinzip des Joy of Use. Besonders im Bereich des Feature Content (dem Bereich der Seite, der vornehmlich die interaktiven Präsentationselemente für die sekundäre Zielgruppe beinhaltet) wurde versucht, durch aufwändige Gestaltung eine hohe Emotionalisierung zu erzielen.

Als Referenz für die Auswahl der Farben und Schriften dient der Styleguide der Hochschule der Medien. Die aktuelle Version dieses Styleguides steht für Angehörige der Hochschule im Intranet in elektronischer Form unter https://www.hdm-stuttgart.de/intranet/intranet_cd/style_guide/stylebasics.pdf zum Down-load bereit. Die zum Zeitpunkt der Erstellung dieser Arbeit gültige Version ist dieser Arbeit im Appendix A in schriftlicher Form angehängt.

14

4. entwicklung des layouts

Page 20: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

4.1 Dimensionierung & Positionierung

„Bei der Ausarbeitung neuer Webprojekte tendieren Designer immer häufi ger dazu, das Lay-out zentriert zu positionieren. Die ungeschriebene Regel, möglichst viele Informationen in den oberen Teil der Seite zu integrieren, damit der Benutzer ohne vertikalen Seitendurchlauf aus-kommt, wird der visuellen Gestaltung der Seite sowie der Lesbarkeit von Inhalten preisgege-ben. Anstatt Inhalte kompakt in einen Block einzubetten, werden sie zentriert und in mehrere vertikal hintereinander folgende Blöcke verteilt.Demzufolge entsteht auf der Seite mehr Freiraum, wodurch Besucher sich besser orientieren und Inhalte wahrnehmen können.“

(Friedman, V., S.72)

Aktuelle Statistiken zeigen, das die XVGA-Aufl ösung (1024px x 768px) schon seit einiger die SVGA-Aufl ö-sung (800px x 600px) als gängigste Bildschirmaufl ösung abgelöst hat.

Laut nachfolgendem Diagramm (Quelle: www.webhits.de in Januar 2009) nutzen lediglich 2,7% der An-wender noch eine Aufl ösung von 800 x 600 Pixeln; der überwiegende Anteil von 41,6% nutzt eine Auf-lösung von 1024 x 768 Pixeln. Die verbleibenden 55,7% der Anwender verwenden höhere Aufl ösungen, wobei ein beachtlicher Prozentsatz hiervon (29,4%) auf die XSGA-Aufl ösung (1280px x 1024px), also ein Seitenverhältnis von 5:4 entfällt.

15

Um eine optimale Darstellung ohne horizontales Scrollen für möglichst viele Nutzer zu gewährleisten, wurde das Layout der Seite daher für eine Aufl ösung von 1024 x 768 Pixel optimiert.

Auf ein fl exibles bzw. schwimmendes Layout wurde hierbei bewusst verzichtet. Stattdessen wurde auf ein starres, zentriertes Layout mit einer Breite von 900px zurückgegriffen, um die problemlose Integration späterer zusätzlicher Features (beispielsweise Shockwave Flash, Audio-/Videoplayer etc.) zu vereinfachen und zu vereinheitlichen.

Abb. 06

[ Web-Barometer: „Diagramm zur Bildschirmaufl ösung“, http://www.webhits.de/deutsch/index.shtml?webstats.html, Januar 2009 ]

Page 21: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

4.2 Seitenstruktur & Gestaltungsraster (Wireframe)

„Eine übersichtliche Seitenstruktur ist eines der wesentlichen Elemente, auf die ein Seitenbesu-cher sein Augenmerk richtet – häufi g unbewusst. So wird eine neue, bisher unbekannte Seite vom Besucher in Bruchteilen von Sekunden nach Zusammenhängen gescannt und in Blöcke zerlegt. Wichtig für die ‚User Experience‘ ist dabei die Tatsache, dass der Designer diesen Prozess der Gliederung unterstützt.In der Design-Szene spricht man von einem gelungenen Design, wenn dieses entweder sofort ins Auge springt oder unsichtbar bleibt. Ein unsichtbares Design ist häufi g weit effi zienter als ein buntes Farbenspiel, vor allem weil es nicht die Gestalt der Seite betont, sondern den Inhalt der Beiträge.[...] Die Perfektion einer Seite wird somit nicht durch ein harmonisches Zusammenspiel der Farben erreicht, sondern durch die Einbettung in einen entsprechenden strukturellen Rahmen. Und eben dieser Rahmen wird in Zeiten des Web 2.0 meistens ganz einfach und übersichtlich gehalten.“

(Friedman, V., S.68)

Abb. 07

[ Grundaufbau der HdM Tonstudio-Website in Form eines Wireframes ]

16

Page 22: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

17

Die Abbildung zeigt den vereinfachten Grundaufbau des Layouts der HdM Tonstudio-Website in Form eines Wireframes. (unterlegt mit dem späteren grafi schen Layout der Seite) Zu erkennen ist die schlichte und überschaubare Struktur, sowie die strikte Trennung der primären Inhalte von den Seitenattributen (Navi-gation etc.). Die Konzeption des Layouts orientiert sich am Drei-Schichten-Modell, welches Friedman wie folgt beschreibt:

„Das Drei-Schichten-Modell defi niert drei Schichten der Seitenkonzeption: TEXT-INHALTE (2. Schicht) werden in das Skelett der Seite, also STRUKTURIERTE BLÖCKE (1. Schicht), eingefügt und durch GRAFISCHE ELEMENTE (3. Schicht) zu einer visuell ansprechenden Internetpräsenz erweitert.Häufi g wird darüber hinaus die vierte Schicht in das Seitenkonzept integriert – etwa, wenn multimediale Komponenten wie Flash, Audio- oder Video-Streams zum Einsatz kommen sollen.“

(Friedman, V., S.68)

Das klassische Aufbau-Muster Header, Content (optional 1-, 2-, oder 3-spaltig), Sidebar und Footer wurde bei der Erstellung der HdM Tonstudio-Website eingehalten. Zwischen Header und Hauptnavigation wurde der Bereich Feature Content integriert. Dieser Bereich dient als fi xer Raum für die multimedialen Elemente der Seite (siehe Kapitel 4.6 Der Bereich Feature Content).

4.3 Farbwahl

„Bei einer modernen Seitengestaltung gilt es insbesondere, einzelne Elemente durch eine ge-schickte Farbwahl oder grafi sche Betonung hervorzuheben. Zu diesem Zweck werden häufi g starke, auffallende Kontraste eingesetzt, etwa um die Navigation oder die Fußzeile stärker zur Geltung kommen zu lassen“

(Friedman, V., S.69)

Im Anschluss an die Erstellung des Gestaltungsrasters erfolgte der Entwurf eines passenden Farbkonzepts. Folgendes Farbschema wurde für die HdM Tonstudio-Website gewählt:

Abb. 08

[ ColorMood-Board der HdM Tonstudio-Website ]

Page 23: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

„Insbesondere spielen dabei Hintergrundfarben eine wesentliche Rolle. Auf den ersten Blick passive, bloß begleitende Töne bringen eine ‚visuelle Ordnung‘ in die Seitenstruktur und lassen den Besucher einzelne Elemente besser und schneller erkennen.“

(Friedman, V., S.70)

Der Bereich mit den Primärinhalten wurde klassisch in schwarzer Schrift auf weißem Hintergrund belassen, um eine gute Lesbarkeit und Übersichtlichkeit zu gewährleisten. Analog zum Webauftritt der HdM wurden die Spalten für den sekundären Inhalt mit einem grauen Hintergrund versehen.

„ [...] Zum anderen verleihen harmonische, stark ausgeprägte Farbkontraste einer Seite ein scharfes visuelles Bild. [...] Die Absicht ist, das Augenmerk des Besuchers durch kräftige Far-ben zu lenken, mit dem Ziel, einen haftenden Eindruck zu verschaffen. Besondere Popularität genießen kräftige Purpurrot, Rosa, Grün, Blau und Orange.“

(Friedman, V., S.74)

Eine Assoziation zum AM-Bereich der HdM sollen die verwendeten Schmuckfarben bilden:

Das im Styleguide für die Fakultät Electronic Media vorgegebene Grün (HKS 66 K bzw. #7ab51d) steht im Kontrast zu den gedeckten Farben Weiß, Grau und Schwarz. Es fungiert sowohl als visueller Eyecatcher, als auch als Bindeglied zur AM-Seite der Hochschule.

Das Hellblau des Hintergrundes wurde der Header-Grafi k der AM-Seite entnommen und bildet somit eine weitere Verbindung zum AM-Webauftritt. Es soll die Seite vor allem bei hohen Aufl ösungen gut vom Hin-tergrund abheben und ein „Absacken“ verhindern.

18

Abb. 09

[ Header-Grafi k der AM-Internetseite und die daraus entnommenen Farben für die HdM Tonstudio-Website ]

Zusätzliche Hintergrundfarbe für den Header-Bereich und die Hauptnavigation ist ein heller Sand-Ton. Die-ser gedeckte Farbton tritt dezent hinter die dominierenden Schmuckfarben Grün und Blau, setzt sich aber gegenüber den weißen und grauen Bereichen deutlich ab und trennt den Seitenkopf und das Menü von den Inhaltsbereichen, ohne aggressiv hervorzustechen.

Page 24: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

4.4 Typografi e

Typografi e wurde auf der HdM Tonstudio-Website nur sehr dezent als gestalterisches Mittel eingesetzt.

Inhaltstexte werden - analog zur Website der Hochschule - klassisch in der serifenlosen Systemschrift-Fa-milie (Verdana, Arial, Helvetica, sans-serif) dargestellt; Schriftgröße, Laufweite und Zeilenabstand sind auf die entsprechenden Werte der HdM-Seite abgestimmt. Vor allem der vergrößerte Zeilenabstand sorgt in Verbindung mit dem gewählten Flattersatz für eine gute Lesbarkeit.

Abgesehen von der Schrift des HdM-Logos, ist die Schriftart FrutigerNextLT in den Schnitten bold conden-sed (Bildmarke) bzw. medium condensed (Überschriften) die einzige Schmuckschrift. Sie wird ausschließ-lich in Minuskeln, sowie in Verbindung mit dem Schmuckelement des stilisierten Pegels eingesetzt. Der Pegel ist hierbei eine Anlehnung an die entwickelte Tonstudio-Bildmarke, welche in Kapitel 4.5.2 Bildmarke genauer beschrieben wird.

4.5 Grafi sche Komponenten, Formen & Schmuckelemente

„Laut einschlägigen Usability-Studien entscheiden Seitenbesucher in den ersten 50 Millise-kunden (1/20 Sekunde) des Seitenaufenthalts darüber, inwiefern eine Seite ihren Ansprüchen – sei es visueller Eindruck oder textlicher Inhalt – entspricht. Diese Entscheidung ist fast ausschließlich kognitiver Natur. Der erste visuelle Eindruck beeinfl usst den weiteren Entschei-dungsprozess der Nutzer enorm und kann somit als ein grundlegender Baustein zum Aufbau von Vertrauen in die Seite angesehen werden.“

(Friedman, V., S.73)

Gemäß den Richtlinien des Web 2.0 wurde zur Strukturierung der Inhalte ein gradliniges und schlichtes Ge-staltungsraster mit ausreichend Freiräumen, sogenanntem White- oder negative Space, gewählt. Neben der Verwendung unterschiedlicher Farben wurde zudem eine Abtrennung der einzelnen Bereiche durch harte, 1px starke Haarlinien vorgenommen. Diese horizontal und vertikal verlaufenden Linien dienen zu-sätzlich der strikten Abtrennung einzelner Inhalte und sorgen für eine bessere Übersicht beim Nutzer.

Zur optischen Aufl ockerung wurden gezielt Schmuckelemente ins Design der Seite aufgenommen. Diese sind zum Teil an bestehende Elemente aus dem Design anderer Seiten der HdM angelehnt, um einen Be-zug zum Corporate Design der Hochschule herzustellen.

19

4.5.1 Reiteroptik

Der Content-Bereich der Seite wird oben und unten von zwei stilisierten Reitern eingerahmt. Der obere Reiter beinhaltet die Hauptnavigation der Seite, der untere stellt den Übergang zum Seitenfooter dar und enthält den Top of Page-Link.

Page 25: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

20

Abb. 10

[ Header-Grafi k der AM-Internetseite und das daraus entnommene Schmuckelement „Reiter“ ]

Durch die diagonalen Linien der Reiter entsteht eine Aufl ockerung des tabellenartigen Layouts, ohne die klare Struktur der Seite zu beeinfl ussen. Die Form des Reiters wurde der Headergrafi k der HdM-Seiten ent-nommen, was eine Verbindung des Tonstudio-Auftritts zu den offi ziellen Seiten der HdM schafft:

4.5.2 Bildmarke

Im Header-Bereich der HdM Tonstudio-Website wurden zwei grafi sche Elemente platziert. Zum einen fi ndet sich hier das obligatorische Logo der Hochschule wieder, welches entsprechend der Vorgaben des HdM-Styleguides rechts oben positioniert wurde (vgl. Styleguide, S. 2ff im Appendix dieser Arbeit), zum anderen wurde eine Bildmarke als optisches Symbol für das Tonstudio eingebunden.

Diese Bildmarke wurde selbständig entwickelt. Sie greift durch die stilisierte Darstellung der Pegel eines Equalizers den Bereich Ton auf, gefolgt vom Begriff tonstudio in der Hausschrift der Hochschule (Frutiger-NextLT). Die Ausschläge der einzelnen Pegel und die Platzierung des Wortes tonstudio wurden so gewählt, dass die Form der Bildmarke der des Hochschul-Logos entspricht, was beim Betrachter eine kognitive Verbindung der beiden Bereiche Hochschule der Medien und Tonstudio schafft.

Abb. 11

[ Header der HdM Tonstudio-Website ]

Page 26: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

21

Teile der Bildmarke werden im weiteren Verlauf der Website erneut als Schmuckelement aufgenommen, um das Bild der Seite abzurunden. Dies geschieht beispielsweise bei den Überschriften, welche durchgän-gig – ebenso wie das Wort tonstudio in der Bildmarke – in Minuskeln gehalten sind und auf die stilisierte Darstellung eines einzelnen Pegels folgen. Darüber hinaus wird das Symbol des Equalizers konsequent am rechten unteren Rand des Content-Bereichs aufgegriffen und führt den Blick des Betrachters somit in Leserichtung von links oben nach rechts unten über die komplette Seite. Eine weitere Verwendung fi ndet der Equalizer in Form einer Loader-Animation, z.B. zur Darstellung der Ladezeiten in der Fotogalerie.

Abb. 13

[ Beispiele für die Persistenz der Bildmarke ]

Abb. 12

[ Analogien der Tonstudio-Bildmarke mit dem Hochschul-Logo ]

4.5.3 Farbverläufe

„Farbverläufe schaffen fl ießende Übergänge zwischen benachbarten Seitenbereichen und tragen zu einem einheitlichen und abgerundeten Seitenbild bei. [...] Genauso wie mo-notone Hintergrundbilder etwa bei öffentlichen Auftritten vermieden werden, versuchen Designer, Hintergrundbilder mit Streifen zu versehen. Dezente Streifen sind ein Versuch, die Monotonie der einheitlichen Farbgebung aufzubrechen und eine visuelle Abwechslung zu erzeugen. [...] In dieser Funktionsweise ähneln Streifen Farbverläufen (Gradients), fl ie-ßenden ‚Farbgefällen‘, die mindestens genauso oft benutzt werden.“

(Friedman, V., S.76)

Page 27: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Ein weiteres grafi sches Element der Designkultur Web 2.0 ist der Einsatz von Verläufen. Durch sie wird eine Monotonie bei größeren Flächen vermieden.

Bei der Erstellung des Layouts für die HdM Tonstudio-Website wurde dieses gestalterische Mittel in erster Linie bei der Optik des blauen Seitenhintergrunds eingesetzt. Um bei hohen Monitoraufl ösungen - und einem damit verbundenen hohen Anteil an umfl ießender blauer Hintergrundfl äche - einer Monotonie entgegen zu wirken, wurde ein vertikaler Farbverlauf mit 600px Höhe am oberen Rand des Viewports ein-gesetzt. Nachfolgende Abbildung zeigt die daraus entstehende Veränderung der Optik gegenüber einem einheitlichen, vollfl ächig-blauen Hintergrund.

Abb. 14

[ unterschiedliche Wirkung des Hintergrunds durch Einsatz eines Farbverlaufs ]

Innerhalb der eigentlichen Website wurden Farbverläufe dagegen sehr sparsam und dezent eingesetzt, um den klar strukturierten Charakter der Seite nicht zu verwischen.

22

4.6 Der Bereich Feature Content

Kapitel 2.2.1 Inhaltsbezogenes Design zu Gunsten des Users spricht unter anderem die Bedeutung des Um-fangs der Inhalte für die Gestaltung einer Website an: Das Design für Seiten mit einem großen Volumen an Inhalten ist schlicht und gradlinig zu halten; bei Seiten mit wenigen Inhalten kann das Design durchaus eine exponierte Stellung erhalten, da hier die emotionalen Aspekte in den Vordergrund rücken.

Schwierig zu gestalten sind Seiten mit gemischten Inhalten, wie die der HdM Tonstudio-Website. Wie in Ka-pitel 3.2 Auswahl und Strukturierung der Inhalte beschrieben, liegen hier Inhalte mit sehr unterschiedlichem Charakter und Umfang vor.

Page 28: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Die Inhalte für die primäre Zielgruppe besitzen ein hohes Volumen an überwiegend textlichen Informa-tionen. Zur Darstellung dieser Inhalte wird der Content-Bereich der Seite (vgl. Abb. 07) genutzt. Dieser wurde 2-spaltig aufgebaut (Primary Content und Additional Content), kann aber wenn es die Inhalte erfor-dern auch eine dritte Spalte (Secondary Content) beinhalten bzw. auf eine Spalte reduziert werden. Die im Content-Bereich dargebotenen Informationen sind umfangreich und daher klar strukturiert und gradlinig darzustellen, um die Usability zu gewährleisten.

Der textliche Umfang der Inhalte für die sekundäre Zielgruppe ist stark reduziert. Komponenten wie die virtuelle Tour oder ein Audioplayer nehmen wenig Raum in Anspruch. Würde man für diese Inhalte eige-ne Menüpunkte erstellen und sie ebenfalls im Content-Bereich platzieren, so würde die Seite leer und das jeweilige Element verloren wirken.

Abb. 15

[ unterschiedliche Wirkung des Content-Bereichs bei Seiten mit hohem bzw. geringem Umfang an Inhalten ]

Aus diesem Grund fi el die Entscheidung darauf, keine eigenen Unterseiten für die Infotainment-Elemente zu erstellen. Stattdessen wurde ein weiterer Bereich in die Seite eingearbeitet: der Feature Content.

Dieser Bereich wurde exponiert zwischen Header und Hauptnavigation im Kopfbereich der Seite platziert (vgl. Abb. 07). Er ist auf sämtlichen Unterseiten vorhanden und verfügt über eine fi xe Höhe von 295px. Dadurch wird der Feature Content vom Betrachter als fester Bestandteil der Seite wahrgenommen. Die unterhalb des Feature Content platzierten Elemente Hauptnavigation und Content behalten auf jeder Seite ihre Position bei; ein vertikales „Springen“ dieser Bereiche beim navigieren durch die einzelnen Seiten wird vermieden.

Zudem wurde auf eine einheitliche Grundoptik der im Feature Content platzierten Elemente geachtet, was für Persistenz sorgt und dem Nutzer das Zurechtfi nden bei der Navigation durch die Seite erleichtert.

23

Page 29: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Optisch fungiert der Bereich Feature Content als Eyecatcher. Seine Inhalte haben einen präsentierenden Charakter, der den Betrachter ästhetisch-emotional ansprechen soll (siehe Joy of Use). Somit bietet er den idealen Spielraum für die Verwendung verschiedener Designelemente des Web 2.0, ohne die klare Struktur des Content-Bereichs der Seite negativ zu beeinfl ussen.

Die verwendeten Designelemente lassen sich exemplarisch anhand der erstellten Fotogalerie aufzeigen:

Abb. 16

[ grafi sche Gestaltung des Bereichs „Feature Content“ am Beispiel der Fotogalerie ]

Durch einen Hintergrundverlauf und einen angedeuteten Horizont, wurde dem Bereich eine Tiefe gege-ben. Die Spiegelungen der Thumbnails, sowie die Bewegung und das Spiel mit der Größe der Bilder schafft einen dreidimensionalen Raum. Die Thumbnails selbst erinnern an Polaroid-Bilder, der Scrollbalken wurde in Form eines Schiebereglers gestaltet. Dadurch wurden Assoziationen zu realen Gegenständen geschaffen und eine Haptik erzeugt. Mehrere Bilder können zeitgleich auf dem Desktop „ausgebreitet“ und betrachtet werden, wodurch ebenfalls eine kognitive Verbindung zur „realen Welt“ geschaffen wurde.

Abb. 17

[ „Ausbreiten“ mehrerer vergrößerter Bilder der Fotogalerie auf dem Viewport ]

24

Page 30: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Abb. 18

[ Oberfl ächendesign für die virtuelle Tour ]

Die Fotogalerie wurde exemplarisch mit Bildern aus der Umbauphase versehen und verfügt über volle Funktionalität, um einen umfassenden Überblick über die beschriebenen Komponenten Bewegung, Drei-dimensionalität und Haptik zu geben.

Für die Inhalte virtuelle Tour und Video-/Audioplayer wurden Optiken entworfen:

Abb. 19

[ Oberfl ächendesign für den Videoplayer ]

Abb. 20

[ Oberfl ächendesign für den Audioplayer ]

25

Page 31: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

26

4.7 Exemplarische Beispielseite

Umseitige Abbildung zeigt zum Abschluss des Kapitels 4. Entwicklung des Layouts exemplarisch einen Screenshot der Unterseite Impressum mit geöffneten Bildern aus der Fotogalerie. Anhand dieser Abbil-dung ist das fi nal gewählte Layout der HdM Tonstudio-Website inklusive der im Verlauf des vorangegan-genen Kapitels angesprochenen Komponenten zu erkennen.

Abgeschlossen sind somit die Schritte 1-3 des in Kapitel 2.2.2 Inhaltsbezogenes Design zu Gunsten des Work-fl ows beschriebenen Arbeitsablaufes (siehe S.10).

Nachfolgendes Kapitel 5. Techniken zur Umsetzung des Frontends (CSS) behandelt die Schritte 4 und 5: das Erstellen des Markups, sowie die Umsetzung des statischen Designs mit CSS.

Erkennbar ist die einheitliche Grundoptik der einzelnen Elemente, um ein durchgängiges Gesamtbild beim Nutzer zu erwirken. Darüber hinaus lässt sich erkennen, dass auch hier mit dem Designelementen Verlauf, Dreidimensionalität, Haptik und Bewegung gearbeitet wurde.

Die Bedienung der virtuellen Tour ist intuitiv. Der Begriff virtuelle Tour weist den Nutzer auf ein interak-tives Element hin. Der aktuell besuchte Raum ist im dargestellten Grundriss gehighlighted und namentlich erwähnt (hier: Regie B). Die Tour durch den gewählten Raum fi ndet innerhalb des dreidimensional darge-stellten Bilderstapels statt. Durch Bewegen der Maus innerhalb des Bildes bei gleichzeitig gedrückter Mau-staste erfolgt die 360°-Drehung, wobei sich das stilisierte Sichtfeld im Grundriss analog zur momentanen Ansicht mitdreht, um dem Nutzer zu zeigen in welche Richtung er momentan blickt.

In den Icons für den Bild-Zoom wurde erneut das Element Pegel verarbeitet. Funktional dient dieser zur Darstellung der unterschiedlichen Zoom-Stufen, auf gestalterischer Ebene greift er das im Verlauf der Seite mehrfach verwendete Schmuckelement auf und bindet die Tour in den Gesamtkontext der Seite ein.

Ein weiteres Feature, welches sich bei der Umsetzung in eine virtuelle Tour einarbeiten ließe, die Erläute-rung einzelner Komponenten der Studioräume in Form von Tooltips beim RollOver.

Die Funktionalität des Video-/Audioplayers ist selbsterklärend. Der optische Grundaufbau ist an den der virtuellen Tour angepasst, die Bedienelemente wurden an die Optik bekannter Mediaplayer angelehnt.

Über die erarbeiteten Inhalte hinaus, bietet der Feature Content Spielraum für weitere präsentierende Kom-ponenten. Unter Beachtung der Dimensionen (900px x 295px) und der allgemeinen Grundoptik lassen sich problemlos weitere Infotainment-Elemente und Gimmicks erstellen und dauerhaft oder temporär ein-binden.

Page 32: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

27

Abb. 21

[ Screenshot der Seite „Impressum“ der HdM Tonstudio-Website incl. geöffneter Beispielbilder aus der Fotogalerie ]

Page 33: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

28

5. techniken zur umsetzung des frontends (css)

„Im Web 2.0 sind Webseiten grundsätzlich mit einem CSS/XHTML-Gerüst realisiert, um mög-lichst fl exible Seitenstrukturen und eine einfache Positionierung der Elemente zu ermöglichen. Dabei werden Webauftritte nach dem Muster Header, Content, Sidebar, Footer gestaltet.“

(Friedman, V., S.68)

Laut aktueller Statistik (Quelle: www.webhits.de im Januar 2009) haben 100% aller Internet-Nutzer CSS in ihrem Browser aktiviert:

Abb. 22

[ Web-Barometer: „Statistik zur Aktivierung von CSS“, http://www.webhits.de/deutsch/index.shtml?webstats.html, Januar 2009 ]

Ein Einsatz von CSS zur Formatierung und Positionierung der einzelnen Elemente ist also bedenkenlos möglich. Wie in Kapitel 2.2.2 Inhaltsbezogenes Design zu Gunsten des Workfl ows beschrieben, birgt dieser Ansatz immense Vorteile gegenüber der traditionellen designbezogenen Umsetzung von Internetseiten. Durch die Verwendung von CSS kann ein semantisch korrektes Markup erstellt werden. Die Reihenfolge der einzelnen Elemente einer Seite ist nicht von der linearen gestalterischen Positionierung innerhalb des Designs abhängig. Nachfolgende Abbildung zeigt die Browserdarstellung einer Beispielseite der HdM Ton-studio-Website bei aktiviertem und deaktiviertem CSS:

Abb. 23

[ Beispielseite mit und ohne aktiviertes CSS ]

Page 34: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

29

5.1 Bildersetzung mit Hilfe der Gilder/Levin-Methode

Das typografi sche Erscheinungsbild lässt sich durch HTML-Texte und CSS nur begrenzt beeinfl ussen. Es kön-nen lediglich einige wenige Systemschriften verwendet werden; zudem herrscht eine starke Abhängigkeit von den Einstellungen des Nutzers. Um dennoch eine gewisse gestalterische Freiheit zu haben, werden daher oft Logos und Schmuckschriften über Grafi ken eingebunden.

Auf der HdM Tonstudio-Website geschah dies zum einen im Seitenheader (HdM-Logo und Bildmarke tonstu-dio), zum anderen im Bereich der Überschriften, bei denen die Hausschrift der Hochschule (FrutigerNextLT) und der stilisierte Pegel als grafi sches Element verwendet wurde.

Betrachtet man diese Elemente nun hinsichtlich ihrer semantischen Bedeutung für die Seite, so handelt es sich in beiden Fällen um Überschriften: Die Header-Grafi ken entsprechen einer Überschrift der obersten Ebene <h1>, die Grafi ken für die Headlines der einzelnen Seiten stellen Überschriften der zweiten Ebene <h2> dar. Um die Semantik zu erhalten und eine korrekte Ansicht auch bei deaktivierter Bildanzeige bzw. deaktiviertem CSS zu gewährleisten, konnte daher an den entsprechenden Stellen nicht lediglich eine Gra-fi k eingesetzt werden. Stattdessen wurde eine sogenannte Bildersetzung verwendet.

Abb. 24

[ die Überschriften erster und zweiter Ordnung: Darstellung mit und ohne CSS ]

Für die Bildersetzung stehen mehrere Ansätze und Techniken zur Verfügung (zum Beispiel FIR, Phark, (s)IFR) - allesamt mit diversen Stärken und Schwächen. Die Entscheidung fi el auf die Gilder/Levin-Methode:

„Diese [Gilder/Levin-] Methode ist die wohl solideste unter den Bildersetzungsmethoden und wurde von Tom Gilder und Levin Alexander entwickelt. Sie funktioniert in Verbindung mit Bildschirmlesegeräten und ermöglicht die Anzeige von Text auch bei deaktivierter Bildanzeige und gleichzeitig aktiviertem CSS, denn bei dieser Technik wird einfach eine Grafi k über den Text gelegt, anstatt ihn auszublenden. Auf diese Weise wird er auch bei ausgeschalteter Bild-anzeige sichtbar.“

(Budd, A., S.73)

Die folgenden Kapitel beschreiben einige spezielle Bereiche der praktischen Arbeit an der HdM Tonstudio-Website, in denen CSS zur Umsetzung des Designs eingesetzt wurde.

Page 35: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

30

Die Funktionsweise der Gilder/Levin-Methode verdeutlicht nachfolgender Ausschnitt aus dem Quellcode der Datei gilderlevin.css, sowie das entsprechende Code-Fragment zum Einbinden der Bildersetzung in die Datei index_html :

/* ---------------------------------------------------------------------------------CSS-CODE ZUR BILDERSETZUNG MIT GILDER-LEVIN (AUSZUG)--------------------------------------------------------------------------------- */

/* h1 im Header durch Wortmarke ersetzen ---------------------------------------- */

/* zu ersetzendes Element: <h1> */#header h1 { position:relative; width:280px; /* Festlegen auf Breite der Ersatzgrafi k */ height:80px; /* Festlegen auf Hoehe der Ersatzgrafi k */ padding: 15px 0 0 10px; /* Innenabstand zur Positionierung von <h1> in- nerhalb des Header- Divs */ overfl ow: hidden; color:#d2d2bb; /* OPTIONAL: Textfarbe in Hintergrundfarbe PRO: verhindert Aufblitzen des Texts beim Laden der Grafi k CONTRA: Text bei deaktivierter Bildanzeige nicht sichtbar, da in Hintergrundfarbe */ }

/* Ersatzgrafi k fuer <h1> */#header h1 span { position:absolute; /* absolut ueber <h1> platzieren */ width:100%; /* gesamte Breite abdecken */ height:100%; /* gesamte Hoehe abdecken */ background: url(../../gfx/wortmarke_tonstudio.gif) no-repeat; }

/* ------------------------------------------------------------------------------ */

CSS

/* ---------------------------------------------------------------------------------HTML-CODE ZUR BILDERSETZUNG MIT GILDER-LEVIN (AUSZUG)--------------------------------------------------------------------------------- */

<div id=“header“> <h1><span></span>HdM Stuttgart - Tonstudio</h1> <span id=“logo“></span> </div>

/* ------------------------------------------------------------------------------ */

HTML

Einziger Nachteil der angewandten Methode ist die Verwendung des zusätzlichen nichtsemantischen <span>-Bereichs. Dies wurde aufgrund der Vorteile dieser Methode gegenüber anderen Bildersetzungs-verfahren in Kauf genommen.

Beim Einsatz der Methode wurde ein Bug bei der Darstellung im MSIE 7 festgestellt. Die Grafi ken für die Überschriften der zweiten Ebene wurden hier am oberen Rand um drei Pixel beschnitten. Dieser Darstel-lungsfehler konnte durch eine Vergrößerung der <div>-Höhe und gleichzeitigem Einsatz eines entspre-chenden Paddings am oberen und unteren Rand behoben werden.

Page 36: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

31

5.2 Faux Columns

Wie in Kapitel 4.2 Seitenstruktur & Gestaltungsraster (Wireframe) beschrieben, wurde der Content-Bereich der HdM Tonstudio-Website zur besseren Strukturierung der Inhalte mehrspaltig konzipiert.

Primary, Additional und Secondary Content befi nden sich zudem, semantisch korrekt getrennt, in jeweils eigenen <div>-Containern.

Um die Spalten optisch voneinander abzugrenzen und die Usability zu erhöhen, wurden die Spalten für den Additional und Secondary Content grau hinterlegt und mit einem 1px starken Rand versehen.

Hintergrund und Randfarbe/-stärke lassen sich normalerweise einfach per CSS durch Angabe der entspre-chenden Werte für die Attribute background-color und border erzeugen. Da sich jedoch in jedem Container andere Inhalte befi nden, unterscheidet sich in der Regel auch die Höhe der einzelnen Spalten. CSS bietet keine technische Möglichkeit, die unterschiedlichen Container dynamisch in ihrer Höhe an den jeweils höchsten Container anzupassen. Daher lässt sich der Eindruck durchgängiger Spalten über den kompletten Inhalt nicht einfach mit Hintergrundfarben und Rändern erzeugen.

Abb. 25

[ die Problematik nicht durchgängiger Spalten bei Containern unterschiedlicher Höhe ]

Um diesen unschönen Effekt zu vermeiden, wurde bei der Gestaltung des Content-Bereiches mit einem Trick gearbeitet: den sogenannten falschen Spalten oder Faux Columns. Bei dieser Methode werden sämt-liche Inhalts-Container von einem zusätzlichen Klammer-Container (Wrapper) umschlossen. Dieser enthält eine wenige Pixel hohe Hintergrundgrafi k mit der Spaltenoptik, welche vertikal gekachelt wird. Die eigent-lichen Inhalte werden nun horizontal so positioniert, dass sie korrekt innerhalb der Spalten sitzen. Da der Wrapper alle Inhalts-Container umschließt, wächst er automatisch immer auf die Höhe des längsten Inhalts und streckt somit den Hintergrund und die Ränder aller Spalten optisch auf die selbe Höhe.

Page 37: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

32

Nachfolgende Abbildung veranschaulicht die Funktionsweise des Prinzips der Faux Columns:

Abb. 26

[ das Prinzip der Faux Columns ]

Die Breiten der HdM Tonstudio-Website wurden über feste Pixelwerte defi niert. Dies gilt sowohl für die Gesamtbreite des Contents (900px ohne Schatten), als auch für die einzelnen Spalten. Daher musste bei der Erstellung der Grafi ken keine Rücksicht auf schwimmende bzw. elastische Bereiche genommen wer-den, sondern lediglich Grafi ken in der Dimension 900px x 1px mit entsprechender Spaltenoptik erstellt werden.

5.3 Platzierung des Footers am unteren Viewport-Rand

Der Footer ist ein Element der Web 2.0-Designkultur. Er entstammt dem Printdesign, wo oftmals eine Fußzeile den Inhalt am unteren Seitenrand abschließt (in dieser Arbeit ist das der grüne Balken mit den Seitenzahlen).

Bei Printprodukten ist stets die untere Seitenkante Referenzpunkt für die Fußzeile; bei Internetseiten hin-gegen orientiert sich der Footer am unteren Ende des Contents, was unter Umständen zu einer optisch unschönen Darstellung führen kann.

Unproblematisch ist die Platzierung des Footers unterhalb des Contents bei Seiten mit entsprechend groß-en Inhalten: Da die Seitenhöhe über den Viewport des Browsers hinausragt, scrollt der Nutzer bis zum Seitenende, an dem der Footer platziert wurde. Dieser schließt die Seite sauber am Viewport-Rand ab.

Page 38: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Schwierig wird die korrekte Positionierung des Footers dann, wenn nur wenige Inhalte auf einer Seite vorhanden sind: Nimmt die Seite nicht die volle Höhe des Viewports in Anspruch, so hängt der Footer „in der Luft“.

Abb. 27

[ unschöner „schwebender“ Footer bei Seiten mit einem geringen Volumen an Inhalten ]

Um die Seite auf allen Browsern und unabhängig von der Monitoraufl ösung des Benutzer auch bei we-nigen Inhalten bis zum unteren Viewport-Rand zu strecken und den Footer korrekt zu platzieren, wurde folgende Methode angewandt:

Der Footer ist außerhalb des Wrappers der eigentlichen Seite platziert. Er erhält die gleiche Breite wie der Klammer-Container und wird horizontal ebenfalls zentriert, wodurch er optisch nahtlos an den Inhalt anschließt. Als letztes Element innerhalb des Wrappers wird ein leerer Blind-Container platziert, der die Klassen cleardiv und footer_abstand zugewiesen bekommt.

33

Page 39: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

34

/* ---------------------------------------------------------------------------------HTML-CODE ZUR FOOTER-POSITIONIERUNG (AUSZUG)--------------------------------------------------------------------------------- */

<div id=“wrapper“> [... Inhalte der Seite ...]

<div class=“cleardiv footer_abstand“></div>

</div>

<dtml-var standard_html_footer>

/* ------------------------------------------------------------------------------ */

HTML

Nun lassen sich Wrapper, Footer und der Blind-Container über CSS anpassen:

1. Der Wrapper bekommt als Mindesthöhe den kompletten Viewport zugewiesen.

/* ---------------------------------------------------------------------------------CSS-CODE ZUR FOOTER-POSITIONIERUNG (AUSZUG)--------------------------------------------------------------------------------- */

#wrapper { min-height:100% !important; /* Mindesthoehe auf Viewporthoehe setzen (NICHT MSIE 6) */ _height:100%; /* MSIE 6-HACK Mindesthoehe auf Viewporthoehe */ margin:0 auto; /* Vertikales Zentrieren des Wrappers */ }

/* ------------------------------------------------------------------------------ */

CSS

Zu beachten ist, dass der MSIE 6 den Befehl min-height nicht ordnungsgemäß umsetzt, weshalb hier mit einem Hack (Underscore Hack in Kombination mit dem !important-Hack) gearbeitet werden muss:

Moderne Browser verwenden den mit !important gekennzeichneten Befehl min-height, ignorieren zeitgleich jedoch das Attribut _height aufgrund des vorangestellten Unterstriches.

Der Internet Explorer 6 hingegen reagiert anders: er kennt den Befehl min-height nicht, verarbeitet aber die Höhenangabe trotz des Unterstrichs, wobei er im Gegensatz zu modernen Browsern height nicht als fi xe Höhe, sondern als Mindesthöhe interpretiert.

Durch diese Technik wird der Wrapper nun grundsätzlich mindestens bis zum unteren Viewport-Rand ge-streckt - sowohl auf modernen Browsern, als auch auf dem MSIE 6.

Page 40: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

35

Abb. 28

[ Schritt 1: Streckung des Wrappers über die komplette Viewport-Höhe ]

2. Der Footer wird unterhalb des Wrappers relativ positioniert

/* ---------------------------------------------------------------------------------CSS-CODE ZUR FOOTER-POSITIONIERUNG (AUSZUG)--------------------------------------------------------------------------------- */

#footer { position:relative; /* Ausrichtung relativ zum Wrapper */ width:900px; /* Breite des Footers = Breite des Wrappers */ height: 92px; /* Hoehe des Footers */ margin:-92px auto 0 auto; /* Vertikales Zentrieren des Wrappers & nach oben ruecken um Footerhoehe */ }

/* ------------------------------------------------------------------------------ */

CSS

Im Falle der Tonstudio-Website hat der Footer eine Höhe von 92px. Seine Breite von 900px entspricht der des Wrappers. Würde man den Footer nun lediglich unter den Wrapper platzieren, so läge sein oberer Rand bei 100% des Viewports. Dies würde bedeuten, das die komplette Seite inklusive Footer eine Höhe von 100% + 92px hätte.

Um nicht den oberen, sondern den unteren Rand des Footers bei 100% der Viewport-Höhe zu platzieren, wird ihm ein negativer oberer Abstand entsprechend seiner Höhe von 92px gegeben. Somit schließt er unten bündig mit der Höhe des Browserfensters ab.

Page 41: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

36

Abb. 29

[ Schritt 2a: Platzieren des Footers unter dem Wrapper ]

Abb. 30

[ Schritt 2b: bündiges Platzieren des Footers am unteren Viewport-Rand durch Verwendung eines negativen oberen Abstands ]

Die Abbildungen 29 und 30 zeigen den Effekt, der durch den negativen oberen Abstand erzielt wird:

Page 42: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

37

Abbildung 30 zeigt ein Problem auf, dass sich durch das Aufrücken des Footers ergeben kann: befi nden sich Inhalte im unteren Bereich des Wrappers, so werden diese durch den überlagernden Footer verdeckt.

Um dies zu verhindern ist abschließend folgender Schritt notwendig:

3. Platzieren eines Blind-Containers innerhalb des Wrappers

/* ---------------------------------------------------------------------------------CSS-CODE ZUR FOOTER-POSITIONIERUNG (AUSZUG)--------------------------------------------------------------------------------- */

.cleardiv{ clear: both; /* Floats clearen -> bewirkt, dass Container defi nitiv unter dem letzten Inhalt sitzt */ }

.footer_abstand{ height:92px; /* gleiche Hoehe wie Footer */ background-color:transparent; /* UNSICHTBAR */ }

/* ------------------------------------------------------------------------------ */

CSS

Unter die Inhalte wird ein abschließendes Leer-<div> im Wrapper platziert. Durch die Angabe clear:both wird hierbei sichergestellt, dass diese aus dem Fluss der Inhalte genommen und unter ihnen posi-tioniert wird. Dieser Blind-Container fungiert als Abstandhalter. Ihm wird eine feste Höhe von 92px zuge-wiesen. Dadurch überlagert der Footer exakt und ausschließlich den Blind-Container; mögliche Inhalte am unteren Ende des Wrappers bleiben jederzeit sichtbar.

Abb. 31

[ Schritt 3: Blind-Container als Abstandhalter zwischen den Inhalten und dem Footer ]

Page 43: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

38

5.4 Hacks & Patches

„[...] CSS-Hacks werden normalerweise verwendet, um bestimmte Browserbugs, wie zum Beispiel das proprietäre Boxmodell vom Internet Explorer, zu umgehen. Leider hat der Begriff Hack ziemlich negative Nebenbedeutungen und impliziert, dass es eine bessere Möglichkeit gibt, etwas zu tun, auch wenn es die oft nicht gibt. Daher bevorzugen einige Personen den Begriff Patch, um darauf hinzuweisen, dass es ein eigentlich fehlerhaftes Browserverhalten ist, mit dem sie sich befassen.“

(Budd, A., S.168)

CSS-Hacks machen sich die Tatsache zu nutze, das einige Browser die gemachten Angaben interpretieren, anderen hingegen den kompletten Anweisungsblock ignorieren. Somit lässt sich eine Art Weiche kreieren. Neben dem schlechten Ruf den CSS-Hacks genießen, stellt die Entwicklung neuer Browser-Generationen ein gewisses Problem für den Einsatz solcher Hacks dar, denn es ist nicht vorhersehbar, ob folgende Ver-sionen eines Browsers einen Befehl zwar interpretieren können, dies jedoch in einer falschen Weise tun. Daher sollten CSS-Hacks nur sehr vorsichtig eingesetzt werden und nur dann, wenn es tatsächlich unver-meidbar ist.

Das Beispiel der Footer-Positionierung zeigt, dass auf den Einsatz von CSS-Hacks teilweise nicht verzichtet werden kann, um ein Layout auf unterschiedlichen Browsern optisch sauber und einheitlich darzustellen.

Um die Notwendigkeit gewisser Hacks abschätzen zu können, sind Vorinformationen hinsichtlich der Re-levanz der unterschiedlichen Browser und Versionen wichtig. Daher wurde im Vorfeld der Konzeption der HdM Tonstudio-Website zunächst ein Blick auf die Verteilung der unterschiedlichen Browser geworfen:

Abb. 32

[ Web-Barometer: „Diagramm zur Browser-Verteilung“, http://www.webhits.de/deutsch/index.shtml?webstats.html, Januar 2009 ]

Page 44: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

39

Eine statistische Auswertung der Besuche der Hochschul-Internetseite zu Beginn dieser Arbeit zeigte zu-dem, dass das Userverhalten der Besucher der HdM-Homepage ungefähr dem allgemeinen Verhalten ent-spricht: MSIE 6.0 (46,7%), Firefox (21,8%) und MSIE 7.0 (17,2%) werden von annähernd 86% der Besucher genutzt. (Stand: Oktober 2008)

Aus diesem Grund wurde die korrekte Darstellung auf diesen Browsern priorisiert; Hacks für weniger gän-gige Browser wurden nicht implementiert.

Als durchaus problematisch stellte sich der hohe Prozentsatz an MSIE 6-Nutzern heraus, da das Darstellungs-verhalten dieser Browserversion teilweise stark von dem der moderneren Browser abweicht.

Als Weiche zwischen dem MSIE 6 und modernen Browsern wurde überwiegend der !important-Hack beziehungsweis eine Kombination des !important-Hacks mit dem Underscore-Hack eingesetzt (siehe Kapitel 5.3 Platzierung des Footers am unteren Viewport-Rand).

1. Code-Beispiel für den !important-Hack:

/* ---------------------------------------------------------------------------------CSS-CODE !IMPORTANT-HACK (BEISPIEL)--------------------------------------------------------------------------------- */

#beispiel { height: 100px !important; height: 200px; }

/* ------------------------------------------------------------------------------ */

CSS

Moderne Browser erkennen bei mehreren gleichen Eigenschaften einer Regel, dass der mit !important gekennzeichnete erste Wert Priorität gegenüber möglichen anderen Angaben besitzt, die sich ebenfalls auf die Höhe beziehen; der MSIE 6 nicht. Er arbeitet die Befehlskette linear ab und nutzt daher immer den jeweils letzten angegebenen Wert.

2. Code-Beispiel für den Undescore-Hack:

/* ---------------------------------------------------------------------------------CSS-CODE UNDERSCORE-HACK (BEISPIEL)--------------------------------------------------------------------------------- */

#beispiel { height: 100px; _height: 200px; }

/* ------------------------------------------------------------------------------ */

CSS

Moderne Browser können den vorangestellten Unterstrich nicht interpretieren und lassen die zweite Anga-be aus, der MSIE 6 hingegen arbeitet sie ab um nutzt daher den letzteren Wert.

Page 45: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

40

Genutzt wurde der !important-Hack bei der Darstellung der Seiten-Schatten:

Moderne Browser können mit transparenten PNGs umgehen, der MSIE 6 hingegen stellt diese mit einem unschönen grauen Hintergrund dar. Daher wurde für den MSIE 6 auf einen Hintergrundverlauf verzichtet und stattdessen ein GIF mit Schattenoptik vor einem vollfl ächig blauen Hintergrund platziert.

/* ---------------------------------------------------------------------------------CSS-CODE !IMPORTANT-HACK (AUSZUG)--------------------------------------------------------------------------------- */

body { background: #61b3d9 url(../../gfx/bgrs/mainbgr_verlauf.gif) repeat-x left top !important;

/* Standardhintergrundfarbe HELLBLAU MIT VERLAUFSGRAFIK fuer MODERNE BROWSER */ background: #61b3d9; /* Standardhintergrundfarbe HELLBLAU fuer MSIE6 */ }

.twoColLayout #wrapper { background: url(../../gfx/faux_columns/faux_columns_2.png) repeat-y left top !important;

/* Hintergrundgrafi k FAUX COLUMNS 2 SPALTEN fuer MODERNE BROWSER */

background: url(../../gfx/faux_columns/faux_columns_2_ie6.gif) repeat-y left top;

/* Hintergrundgrafi k FAUX COLUMNS 2 SPALTEN fuer MSIE6 */ }

/* ------------------------------------------------------------------------------ */

CSS

Mit gleicher Methode wurde die rechts unten positionierte Equalizer-Grafi k aus dem MSIE 6-Layout ent-fernt. Nötig wurde dies aufgrund der Probleme des MSIE 6 bei einer fi xen Positionierung an rechten un-teren Rand verbunden mit der Nutzung eines z-Indexes.

/* ---------------------------------------------------------------------------------CSS-CODE !IMPORTANT-HACK (AUSZUG)--------------------------------------------------------------------------------- */

.equalizer { position:absolute; /* ABSOLUTE Positionierung innerhalb des Wrappers */ z-index:2; /* Eine Ebene UEBER Footer */ width:181px; /* Breite der Grafi k */ height:89px; /* Hoehe der Grafi k */ bottom:80px; /* Abstand vom unteren Rand des Wrappers = unteren Rand des Viewports */ left: 710px; /* Abstand vom linken Rand des Wrappers */

background: url(../../gfx/equalizer.png) no-repeat left top !important;

/* Equalizer-Grafi k in modernen Browsern anzeigen */ background: none; /* KEINE Grafi k im MSIE6 */ }

/* ------------------------------------------------------------------------------ */

CSS

Page 46: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

41

6. techniken zur umsetzung des backends (zope)

Mit Abschluss des Kapitels 5. Techniken zur Umsetzung des Frontends (CSS) endet der inhaltsbezogene Desi-gnprozess nach Clarke. Die Schritte 1 (Inhalte sammeln) bis 5 (Umsetzung mit CSS), welche in den Arbeits-bereich des Webdesigners fallen, sind abgeschlossen.

Nächster Schritt innerhalb des Arbeitsprozesses ist es, die Inhalte durch die Anbindung an eine Datenbank und variabel generierte Inhalte dynamisch zu machen und die Funktionalitäten „hinter“ der Oberfl äche zu erstellen. Dieser Schritt erfolgt oftmals schon parallel zur Arbeit am Frontend und wird von Medienopera-toren bzw. Programmierern vorgenommen.

Kritische Stelle ist das Zusammenführen der beiden Bereiche Front- und Backend. Durch den Einsatz des inhaltsbezogenen Designkonzepts werden mögliche Probleme an dieser Stelle des Workfl ows minimiert.

Um einen möglichst genauen Überblick über die Zusammenführung der Teilbereiche zu bekommen, wur-de die im Zuge dieser Diplomarbeit erstellte praktische Umsetzung nach Abschluss der Schritte 1-5 fort-geführt und einige der Funktionalitäten dynamisch umgesetzt. Dies erfolgte unter den real existierenden Rahmenbedingungen der Hochschule der Medien: genutzt wurde der Zope-Applikationsserver.

6.1 Zope

Die Hochschule der Medien nutzt den Zope-Applikationsserver für ihren Internetauftritt. Aus diesem Grund wurde Zope auch als Rahmen für die HdM Tonstudio-Website gewählt. Hierbei handelt es sich um ein Open Source Framework zur Entwicklung dynamischer Web-Applikationen mit folgenden Bestandteilen:

Einen Webserver zur Bereitstellung der Inhalte für den Nutzer, sowie ein Web-Interface, die sogenannte Zope-Management-Benutzeroberfl äche (ZMI), welche über den Web-Browser als Schnittstelle zur Erstellung von Web-Applikationen dient. Durch sie lassen sich die in der Zope-Instanz angelegten Objekte jederzeit über den Browser anzeigen und bearbeiten.

Darüber hinaus verfügt Zope über eine interne Objektdatenbank ZODB, die die angelegten Objekte spei-chert.

Zope selbst ist überwiegend in Python umgesetzt, einer leistungsfähigen Programmiersprache, die eben-falls über eine Open Source-Lizenz verfügt. Scripte für Zope sind ebenfalls in Python umzusetzen. Durch die Integration diverser frei verfügbare AddOns und Zope-Produkte, lässt sich der Funktionsumfang von Zope sehr einfach den Anforderungen entsprechend erweitern.

Page 47: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

42

Abb. 33

[ Screenshot der Zope-Management-Benutzeroberfl äche (ZMI) ]

Zope verfügt über zwei unterschiedliche Markup-Sprachen. Zum einen DTML (Document Template Markup Language), zum anderen die Attribut-Sprache TAL (Template Attribut Language).

Walerowski beschreibt die beiden Sprachen und deren Verwendung wie folgt:

DTML:

„Innerhalb von Zope können mittels DTML (Document Template Markup Language) Seiten so aufgebaut werden, dass deren Struktur und Inhalt variabel sind. DTML wird dazu mit dem HTML-Code kombiniert, also direkt in den Quelltext der Seite geschrieben. Wenn eine Seite von einem Browser angefordert wird, generiert Zope diese Seite zum Zeitpunkt der Anfor-derung. Es ersetzt den DTML-Code durch spezifi sche Inhalte und schickt die so entstandene HTML-Seite an den Client.“

(Walerowski, P., S.93)

TAL:

„TAL ist eine Attribut-Sprache, die einen etwas geringeren Funktionsumfang besitzt als DTML. Die einzelnen Anweisungen werden als XML-Attribute zu HTML- oder auch XML-Tags notiert. Mit ihnen kann man den Inhalt von Block-Tags defi nieren und Attribute dynamisch setzen und verändern oder ganze Blöcke ersetzen. Aber auch logische Operationen wie bedingte Anwei-sungen, Schleifen und Variablendefi nitionen sind möglich.“

(Walerowski, P., S.138)

Page 48: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

43

TAL ist die jüngere der beiden Markup-Sprachen. Einer ihrer Vorteile gegenüber DTML ist die saubere Tren-nung von Inhalt, Funktion und Design. Zudem ist die TAL-Syntax so konzipiert, das Seiten jederzeit feh-lerfrei in externen HTML-Editoren betrachtet und zwischen Zope und Standard-Editoren getauscht werden können. DTML hingegen kann nur durch Zope korrekt gerendert werden und wird in Standard-Editoren nicht oder verfälscht dargestellt, was die Zusammenarbeit im Team zwischen Designern und Programmie-rern erschwert (vgl. Walerowski, P., S.137f).

Verfolgt auch in Zope strikt den inhaltsbezogenen Designprozess, so sollte bei der Programmierung im Sinne des Workfl ows auf TAL als Markup-Sprache zurückgegriffen werden, um deren verbesserte Trennung und Kompatibilität zu nutzen. In Teamarbeiten können so mögliche Probleme beim Zusammenführen der Kom-ponenten zusätzlich eingegrenzt werden. Da die bestehenden Seiten der Hochschule der Medien jedoch fast ausschließlich in DTML umgesetzt sind, wurde auch bei der Erstellung der HdM Tonstudio-Website, der einfacheren Umsetzung wegen, überwiegend auf DTML als Markup-Sprache zurückgegriffen.

Ein für Zope charakteristisches Konzept ist das Prinzip der Akquisition, einer besonderen Form der Verer-bung. Objekte in Zope können auf andere Objekte und Ordnereigenschaften zugreifen (sie akquirieren), sobald diese in der Ordnerhierarchie höher liegen als das Objekt selbst.Dies ist möglich, weil Zope bei der Referenzierung immer beim aufgerufenen Objekt beginnt und - sollte es dort nicht fündig werden - anschließend den kompletten Namensraum-Stapel, Schritt für Schritt bis hin zum Root-Ordner, abarbeitet. Durch dieses Prinzip können wiederkehrende Elemente einmalig oben in der Ordnerhierarchie platziert werden - sämtliche tiefer liegende Objekte greifen bei Bedarf darauf zu. Ände-rungen müssen nur einmal vorgenommen werden und wirken sich auf alle tiefer liegenden Objekte aus.

vereinfachtes Beispiel:

In einem übergeordneten Ordner A liegen die Ordner 1-10. Dem Ordner A wird die Eigen-schaft Hintergrundfarbe = Rot zugewiesen. Wird nun für einen der Ordner 1-10 die Eigen-schaft Hintergrundfarbe abgefragt, so wird Zope in diesem Ordner zunächst nicht fündig, da keine solche Eigenschaft defi niert wurde. Daher geht Zope eine Stufe höher in den Ordner A und greift auf die Rot zu - somit ist durch eine einzige Zuordnung die Hintergrundfarbe für alle Ordner festgelegt. Ein Austausch der Farbe in Hintergrundfarbe = Grün wirkt sich auf sämtliche Ordner aus.

Soll nun nur der Ordner 10 einen blauen Hintergrund bekommen, so wird ihm einfach die Eigenschaft Hintergrundfarbe = Blau zugewiesen. Da Zope beim aufgerufenen Objekt mit der Suche nach der Eigenschaft Hintergrundfarbe beginnt, wird es in Ordner 10 sofort fündig und sucht daher nicht mehr weiter. Das Ergebnis: Ordner 10 hat einen blauen Hintergrund, die Ordner 1-9 haben weiterhin einen roten Hintergrund und nutzen die oben beschriebenen Vorteile und Möglichkeiten.

Zusätzlich zu seiner internen Objektdatenbank ZODB, besitzt Zope die Möglichkeit zur Anbindung re-lationaler Datenbanken. Im Falle der HdM Tonstudio-Website wurde diese Möglichkeit zur relationalen Integration genutzt und für das Forum eine MySQL-Datenbank angebunden. Bei der späteren Erstellung einer Disposition, sowie zur Integration der Website in die Hochschul-Seite werden aller Voraussicht nach weitere Anbindungen erfolgen.

Page 49: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

44

6.2 Grundaufbau der HdM Tonstudio-Website

In der obersten Ebene der Seite liegt die zentrale DTML-Methode index_html. Diese bildet den Rahmen für die Seite. Durch sie werden sämtliche Elemente aufgerufen: der standard_html_header, der standard_html_footer, die mainnavi, sowie die jeweiligen Inhalte für den Primary, Secondary, Feature und Additional Content der jeweiligen Unterseiten.

Auf allen Seiten gleichbleibende Elemente, wie der Header, der Footer und die Hauptnavigation wurden ebenfalls (gemäß dem in Kapitel 6.1 Zope beschriebenen Prinzip der Akquisition) in der obersten Ebene platziert. Zudem liegen hier die Weichen zur Auswahl der Inhalte für die einzelnen Unterseiten, sowie die benötigten Python-Scripte.

Angelegt wurden verschiedene Unterordner für Grafi k-, CSS- und die JavaScript-Dateien der Galerie, sowie ein Unterordner für den Content.

Über das Objekt standard_html_header wird ein zentrales Objekt css.css aufgerufen, welches wiederum per @import-Befehl die einzelnen CSS-Dateien zur optischen Formatierung der Seite aufruft. Diese Me-thode wurde gewählt, um das CSS übersichtlich in verschiedene Teilbereiche gliedern zu können.Ebenfalls vom standard_html_header aufgerufen wird ein Objekt weiche_additionalHeaderContent, über das bei Bedarf variabel zusätzliche Header-Informationen eingebunden werden können, sofern die einzel-nen Unterseiten dies erfordern. Notwendig wird dies zum Beispiel bei der Einbindung zusätzlicher Links zu den CSS- und JavaScript-Dateien der Fotogalerie.

Der Ordner content beinhaltet die dynamischen Inhalte der Unterseiten, also die Bereiche Primary, Secon-dary, Feature und Additional Content. Auch hier wurde wiederum das Prinzip der Akquisition genutzt und die Objekte additionalHeaderContent, featureContent, primaryContent, additionalContent und secon-daryContent auf der oberen Ordnerebene abgelegt, um gleichbleibende Elemente zentral platzieren zu können.

Im Ordner content liegen darüber hinaus die Ordner für die einzelnen Unterseiten, auf die in Verbindung mit der Navigation im folgenden Kapitel 6.3 Modularer Aufbau von Hauptnavigation und Contentspalten detailliert eingegangen wird.

Abb. 34

[ Inhalt des Ordners „content“ ]

Page 50: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

45

6.3 Modularer Aufbau von Hauptnavigation und Contentspalten

Zentraler Aspekt bei der praktischen Umsetzung der HdM Tonstudio-Website in Zope war das fl exible Einbin-den zukünftiger Unterseiten. Neue Seiten sollen möglichst einfach und unkompliziert in die Website und deren Hauptnavigation aufgenommen werden können; bestehende Seiten sollen sich temporär oder fi nal löschen lassen, ohne den Rest der Website zu beeinträchtigen. Hierzu wurde eine modular aufgebaute Navigation entwickelt.

Abbildung 34 (siehe Seite 44) zeigt den Inhalt des Ordner content. Jede der bestehenden Unterseiten ist hier in Form eines Ordners abgelegt. (momentan f_001 bis f_007 plus eines zusätzlichen Ordners f_000, welcher als Vorlage für weitere Seiten dient) Diesen Ordnern sind über das Property-Tab des ZMI Eigen-schaften zugewiesen:

Abb. 35

[ Eigenschaften des Ordners „f_001“ (Startseite) ]

title (string) :

menu (boolean) :

cols (string) :

Hier steht der Titel der jeweiligen Unterseite, welcher so auch als Menüpunkt in der Navigation ausgegeben wird.

Ist dieser Punkt aktiviert, so wird die Unterseite in der Navigation aufgeführt. Durch Entfernen des Häkchens lässt sich eine komplette Unterseite temporär aus dem Menü entfernen.

Diese Eigenschaft wird vom Script py_checkCols abgefragt, das ihren Wert an die index_html weitergibt. Dort wird dieser Wert als CSS-Klasse in den <body>-Tag eingebunden. Das CSS-File contentspalten.css entscheidet dann anhand des Wertes, aus wie vielen Spalten der Inhalt der Unterseite besteht.

So lässt sich fl exibel die jeweils benötigte Hintergrundgrafi k (vgl. Kapitel 5.2 Faux Columns) einbinden.

Mögliche Angaben sind oneColLayout, twoColLayout und threeColLayout.

Page 51: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

46

position (int) :

featBgr (string) :

Der hier eingetragene Wert bestimmt die Position des jeweiligen Menüpunktes in der Reihenfolge der Navigation. Eingetragen sind momentan Abstände in Zehner-schritten, um zukünftige Punkte noch schneller zwischen den bestehenden Menü-punkten platzieren zu können.

Dieser Wert wird vom Script py_checkFeatureBgr ausgelesen. Analog zur oben be-schriebenen Bestimmung der Spaltenanzahl wird hier der Hintergrund für den Be-reich Feature Content bestimmt.

Bislang vorhandene Werte sind galerie, tour, video und audio. (bzw. momentan die Werte tourDummy, videoDummy und audioDummy, um die Beispielgrafi ken für die noch nicht umgesetzten Infotainment-Komponenten aufzurufen)

Durch das Anlegen einzelner Ordner für die jeweiligen Unterseiten nach angeführtem Prinzip und das Zu-weisen der entsprechenden Eigenschaften lässt sich die Hauptnavigation dynamisch erstellen.

Benötigt wird hierzu zunächst das Script py_createMenu. Dieses Script liest die im Ordner content lie-genden Ordner aus. Dabei berücksichtigt es nur Ordner, bei denen die Eigenschaft menu wahr ist. Diese werden dann in einer Liste entsprechend der über position defi nierten Reihenfolge sortiert.

Auf Basis dieser Liste erstellt die DTML-Methode mainnavi dynamisch die Hauptnavigation, wobei der je-weils aktuelle Menüpunkt per REQUEST.f==id abgefragt wird. Die Formatierung der RollOver-Effekte, sowie die Kennzeichnung des aktuellen Menüpunktes erfolgt über CSS.

Beim Klick auf einen Menüpunkt wird die ID des Ordners an den Query-String der URL angehängt. (zum Beispiel in Form von ?f=f_001, was in diesem Fall dem Ordner für die Startseite entspicht)

6.4 Die Inhalte der HdM Tonstudio-Website

Durch die in Kapitel 6.2 Grundaufbau der HdM Tonstudio-Website und 6.3 Modularer Aufbau von Hauptnaviga-tion und Contentspalten beschriebenen Vorgehensweisen wurde die statische Website in den existierenden Rahmen des an der Hochschule der Medien genutzten Zope-Frameworks überführt, mit entsprechender Grundfunktionalität ausgestattet und für die Einbindung dynamischer Inhalte vorbereitet.

Die konzipierten Inhalte wurden im Anschluss in Teilen umgesetzt. Einige der Inhalte wurden dabei voll-ständig verwirklicht, andere rudimentär bzw. in Form von Grafi ken in die praktische Arbeit eingebunden, um eine fertige Übersicht über die Gesamtseite zu liefern.

Nachfolgende Kapitel zeigen die bereits existenten Bereiche auf, beziehungsweise liefern Vorüberlegungen zu den entwickelten Inhalten und weisen auf wichtige Kriterien hin, die für die fi nale Umsetzung und die Einbindung der HdM Tonstudio-Website in den HdM-Internetauftritt von Bedeutung sind.

Page 52: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

47

6.4.1 Fotogalerie

Kapitel 4.6 Der Bereich Feature Content gibt bereits eine umfassende Übersicht hinsichtlich der optischen Gestaltung der Fotogalerie. Ebenso wird im Verlauf dieser Arbeit auf die Gründe für die Wahl einer ani-mierten Galerie und die Schaffung des Bereichs Feature Content als geeigneten Raum für selbige eingegan-gen (Stichworte: Emotionalisierung, Joy of Use, Strukturierung der Seite).

Basis für die technische Umsetzung der Fotogalerie ist eine Kombination der beiden JavaScript-basierten Bildergalerien Imagefl ow (Version 1.0.3) von Finn Rudolph und Highslide (Version 4.0.8) von Torstein Hønsi. Diese Scripte sind im Internet zu fi nden (die URLs sind im Quellenverzeichnis dieser Arbeit angeführt) und von den jeweiligen Verfasser durch Creative Commons Lizenzen zur Abwandlung und Nutzung für nicht-kommerzielle Zwecke freigegeben.

Das Imagefl ow-Script ist für die animierte Darstellung der Thumbnails zuständig. Vorgenommen wurden Anpassungen in den JavaScript- und CSS-Dateien, um die Positionierung, Dimensionierung und optische Darstellung den Anforderungen und dem Rahmen der HdM Tonstudio-Website anzugleichen. Die im Ori-ginalscript statisch eingebundenen Bilder wurden dynamisch über ein Script py_createGalerie (welches in seinem Aufbau dem in Kapitel 6.3 Modularer Aufbau von Hauptnavigation und Contentspalten erläuterten Script py_createMenu gleicht) integriert.

Die Thumbnails erhalten über das Property-Tab des ZMI die Eigenschaften:

position (int) :

alt (string) :

beschreibung (text) :

anzeigen (boolean) :

zur Festlegung der Reihenfolge

zur Darstellung der Kurzbeschreibung unterhalb der Thumbnails

zur Darstellung einer langen, formatierten Beschreibung unterhalb der vergrö-ßerten Bilder

um Bilder temporär aus der Galerie zu entfernen

Durch Klick auf den Thumbnail werden die benötigten Werte an das Highslide-Script, welches für die ver-größerte Darstellung zuständig ist, übergeben.

6.4.2 Forum

Das im Rahmen der HdM Tonstudio-Website genutzte Forum basiert auf der Version 1.1 des Zope-Produktes zForum, welches unter http://www.zforum.org zur freien Nutzung bereitgestellt wird. Dieses Produkt wur-de Products-Ordner der Zope-Instanz abgelegt. Im weiteren Verlauf wurden die zugehörigen CSS-Dateien und Page Templates editiert, um die Optik des Forums an den Rahmen der HdM Tonstudio-Website anzupas-sen. Zur Integration der relationalen MySQL-Datenbank, in der das Forum seine Daten ablegt, wurde über eine Z MySQL Database Connection eine Verbindung hergestellt.

Page 53: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

48

Das Ausgangsprodukt zForum verfügt über eine Internationalisierung (I18N), d.h. es ist so gestaltet, dass verschiedene Sprachen eingebunden werden können, ohne dass der Quelltext des Produktes verändert werden muss. Da bislang lediglich die Sprachen Englisch und Spanisch verfügbar waren, wurde über das Programm PoEdit eine eigene Portable Objekt-Datei für die Deutsche Sprache erstellt und in das Forum integriert. Während der Umsetzung wurde festgestellt, das von Seiten der Entwickler des Basisproduktes nicht alle Ausgaben für die Internationalisierung vorbereitet wurden. An entsprechenden Stellen wurden daher Meldungen eingefügt bzw. per Hardcode vom Englischen ins Deutsche übesetzt.

Zur besseren Übersicht wurde die Breadcrump-Navigation optimiert und die Verlinkungen des Admin-Be-reiches klar von denen des Nutzer-Bereiches separiert. Zudem erfolgten einige Veränderungen innerhalb des Basisscripts zforum.py, um Abläufe des Originalproduktes zu optimieren und an die Website zu adap-tieren. Für die spätere Einbindung der HdM Tonstudio-Website in das Serverumfeld der HdM bedeutet dies, dass eine Versionierung des Produktes vorgenommen werden muss, um eventuelle Konfl ikte mit existie-renden oder zukünftigen Seiten zu vermeiden, die ebenfalls auf dem zForum basieren.

Das Ursprungsprodukt ist über Page Templates, also in der Markup-Sprache TAL umgesetzt. Eine Übernah-me in das DTML-Grundgerüst war daher nicht ohne weiteres möglich. Um die beiden Markup-Sprachen getrennt zu halten, wurde das Forum per iFrame in den Contentbereich der Seite eingebunden. Dieser kann von allen relevanten Browsern angezeigt werden und passt sich in seiner Höhe dynamisch an die existierenden Inhalte an. Umgesetzt wurde das durch die Verwendung eines JavaScrips im Objekt addi-tionalHeaderContent der Forumsunterseite.

Zu Beginn dieser Arbeit stand auf den allgemeinen Seiten der HdM kein Forum für die Studierenden zur Verfügung. Inzwischen wurde von Prof. Schulz und Hr. Fahrbach eine Kommunikationsplattform entwi-ckelt, welche in naher Zukunft in den Bereich persönlicher Stundenplan der Hauptseite integriert wird. Da dieses Forum bereits auf die technischen Rahmenbedingungen der Hochschule abgestimmt ist, empfi ehlt es sich, das von mir entwickelte Forum gegen die Variante von Schulz/Fahrbach auszutauschen. So können Doppelungen vermieden und die Wartung vereinfacht werden. Beachtet werden sollte hierbei, dass nach Möglichkeit lediglich die den Bereich „Ton“ betreffenden Teile dieses Forums eingebunden werden. Schön wäre es zudem, wenn sich die Optik per CSS an die der HdM Tonstudio-Website anpassen ließe.

6.4.3 Konzeptionelle Vorüberlegungen zur Realisierung weiterer Inhalte

Kern dieser Arbeit ist das Verfolgen und die Analyse eines Workfl ows auf Basis der Inhalte. Wie die Kapitel 2. Theoretische Grundlagen und 3. Inhaltliche Konzeption zeigen, ist hierbei die möglichst genaue Defi nition aller Inhalte ein wichtiger Aspekt. Für die HdM Tonstudio-Website wurden die in Kapitel 3.2 Auswahl und Strukturierung der Inhalte angeführten Inhalte ausgewählt, auf deren Grundlage die Schritte 1-5 des in-haltsorientierten Designprozesses durchlaufen wurden.

Die daran anschließende technische Umsetzung sämtlicher erarbeiteten Inhalte war im Rahmen dieser Arbeit jedoch nicht vollständig möglich; hier musste sich auf ausgewählte Funktionen und Inhalte kon-zentriert werden. Erschwerend kam hinzu, dass die HdM Tonstudio-Website der erste Kontakt mit dem Webapplikationsserver Zope, seinen Markup-Sprachen und der Programmiersprache Python war. Daher konnten lediglich Grundkenntnisse erworben werden.

Page 54: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

49

Schwerpunkt bei der technischen Umsetzung der Website in Zope, war daher zunächst die Implementie-rung des Grundgerüst der Seite in das Zope-Framework. Anschließend wurden einige der Inhalte lauffähig eingebunden; andere wiederum lediglich statisch bzw. in Form von Grafi ken angelegt, um einen Überblick über das Look & Feel der Website zu geben.

Zum Abschluss dieser Arbeit werden die theoretischen Vorüberlegungen zur möglichen Umsetzung der bislang nicht lauffähigen Komponenten beschrieben.

Aufbau und Funktionsweise der Tonstudio-Disposition:

Da nur Angehörige der Hochschule der Medien die Möglichkeit erhalten sollen die Studioräume zu nutzen, sollte der Bereich der Tonstudio-Disposition auch nur für interne Besucher einsehbar sein. Daher ist eine Anbindung an das LDAP-Authentifi zierungssystem der Hochschule sinnvoll.

Zeitlich soll die Disposition den Rahmen von einem Kalenderjahr umfassen, da bestimmte Termine und Reservierungen bereits im Planungssemester festgelegt werden. Referenzpunkt ist die aktuelle Kalender-woche; der einsehbare Zeitraum umfasst dann die folgenden 52 Wochen. In der Vergangenheit liegende Termine sollen automatisch gelöscht werden. Um den Tonstudio-Verantwortlichen die Möglichkeit zu ge-ben, Belegungen nachzuvollziehen (zum Beispiel im Falle eines defekten Gerätes, beim Verschmutzung des Studios etc.) sollte diese Löschung jedoch nicht sofort, sondern erst nach Ablauf einer fi xierten Zeitspanne von beispielsweise vier Wochen erfolgen. Zudem sollten die Administratoren die Möglichkeit haben, über ihren Login auch zurückliegende Kalenderwochen abzurufen.

Die buchbaren Zeiten sollten sich an den offi ziellen Öffnungszeiten des Studios, also Mo.-Fr. 6:00-0:00 Uhr und Sa. 8:00-20:00 Uhr orientieren. Eine Reservierung des Studios außerhalb dieser Zeiten soll schon im Vorfeld technisch unterbunden werden. Sinnvoll sind Reservierungen in 30 Minuten-Schritten, d.h. Start- und Endzeiten können immer zur vollen und halben Stunde gewählt werden (z.B. 7:00-9:30 Uhr).

Erster Schritt für den Benutzer ist die Auswahl der gewünschten Kalenderwoche. Durch sie gelangt er zur Wochenübersicht, welche in Form eines tabellarischen Stundenplans aufgebaut ist (ähnlich wie die aktuelle Disposition). Die Anzeige der Belegungen soll nach einem Ampel-System in drei Farben erfolgen. Unterschieden wird in frei, reserviert aber noch nicht bestätigt und belegt.

Neben der Auswahl der verschiedenen Regien und Studios soll zusätzlich ein Filter implementiert werden: wird sowohl eine Regie, als auch ein Studio benötigt, so soll der Teilnehmer die Möglichkeit haben, die gewünschten Räume per Checkbox zu aktivieren; die Stundenplanansicht wird daraufhin aktualisiert und nur Zeiten zu denen beide Räume verfügbar sind als frei angezeigt. Umständliches Springen zwischen den Wochenansichten der einzelnen Studios und das doppelte Buchen bei gleichzeitiger Nutzung mehrerer Räume soll dadurch entfallen.

Bei bereits belegten Terminen soll (wie bislang) per Tooltip oder PopUp Name und Email des Nutzers, sowie der Grund der Belegung angezeit werden. So können Interessenten direkt miteinander in Kontakt treten, um eventuell Termine oder Räume zu tauschen.

Die Auswahl der Start- und Endzeit soll per Klick auf das jeweilige Feld der Stundenplan-Tabelle erfolgen. Hierzu muss das System selbständig erkennen, welcher Wert der Start- bzw. Endzeit entspricht.

Unterhalb des Stundenplans werden Name, Kürzel und eMail des Nutzers bereits automatisch angezeigt. Diese sind durch die Authentifi zierung bekannt. Ebenfalls angezeigt wird, nach erfolgter Auswahl, die Start- und Endzeit, sowie der gebuchte Raum / die gebuchten Räume. Der Nutzer muss lediglich den Grund der Buchung via Textfeld eingeben und die Anfrage ansenden.

Page 55: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

50

Sinnvoll ist zudem die Option, mehrere Zeiten auf einmal zu buchen. Wichtig für die Umsetzung ist hierbei, dem Administrator die Möglichkeit zu geben, diese Buchungen separat freizugeben bzw. abzulehnen, falls eine Freigabe aller gewünschten Zeiten nicht möglich ist. Wichtig ist die Option der Mehrfachbuchung zudem für den Adminstrator selbst, um mehrere Räume und unterschiedliche Zeiten schnell für offi zielle Zwecke zu blockieren, ohne jeden Termin einzeln bearbeiten zu müssen.

Nach Absenden der Anfrage werden die notwendigen Daten in die Datenbanktabellen übernommen. Der gewählte Zeitraum bekommt den Farbstatus reserviert aber noch nicht bestätigt, Administrator und Interessant werden per automatisch generierter Email über die Details der Anfrage informiert. Sobald der Administrator die Reservierung über das System bestätigt, wechselt der Farbstatus auf belegt und der Inte-ressent wird per automatischer Email-Funktion benachrichtigt. Bei Ablehnung wird der Datensatz aus der Datenbank entfernt, der Interessent wird ebenfalls per Email informiert; wobei der Administrator in diesem Fall die Möglichkeit haben sollte, der Email per Textfeld im System eine kurze Begründung hinzuzufügen.

Die Tonstudio-Wiki:

Über eine Eingabemaske hat der Nutzer die Möglichkeit zur Angabe von Überschrift, Schlagwörtern und Inhaltstext. Zudem kann eine Bilddatei angegeben werden, welche der Seite hinzugefügt werden soll. Wie bei der Bilddatei für den Avatar des Forums wird diese hinsichtlich ihres Formats, ihrer Dateigröße und Dimensionen vor dem Upload überprüft.

Über eine integrierte Suchfunktion werden die bestehenden Inhalte anhand der Überschrift, sowie der angegebenen Schlagworte untersucht und eine Übersicht der relevanten Einträge ausgegeben.

Über eine Editierfunktion haben Besucher die Möglichkeit, bestehenden Einträgen Ergänzungen hinzuzu-fügen. Diese werden bei der Ausgabe als Ergänzung zum ursprünglichen Eintrag kenntlich gemacht.

Die Einsicht in die Wiki sollte frei zugänglich sein. Das Eintragen / Editieren jedoch nur Angehörigen der Hochschule möglich sein, weshalb diese Funktionen ebenfalls an das Authetifi zierungssystem angebun-den werden sollten.

Grundlage einer solchen Wiki kann das Zope-Produkt ZWiki bilden, welches unter http://zwiki.org ein-sehbar ist und mit einer GNU General Public License zur Verfügung gestellt wird. Dieses Produkt wurde während der praktischen Arbeit in die HdM Tonstudio-Website integriert und bereits teilweise angepasst. Zur Beurteilung der Seite wurde die bislang nicht vollständig bearbeitete ZWiki jedoch wieder entfernt und vorübergehend durch eine statische Grafi k ersetzt. Anzumerken ist, das die ZWiki über Page Templates in TAL realisiert wurde. Daher ist zu überlegen, ob sie für einen fi nalen Einsatz auf der HdM Tonstudio-Website genutzt und die bisherige Anpassung weiter verfolgt werden soll, oder ob alternativ eine eigenständige Lösung auf DTML-Basis entworfen werden muss.

Der Bereich Erste Hilfe:

Da die Nutzung des Studios Angehörigen der Hochschule vorbehalten ist, soll dieser Teilbereich (ebenso wie das Forum und die Disposition) nur nach vorheriger Anmeldung zugänglich sein.

Im Gegensatz zur Wiki besitzt nur Jörg Bauer als zuständiger technischer Angestellter die Möglichkeit zur Eintragung von Tutorials und Anleitungen. Ebenso ist ein Editieren der eingestellten Materialien durch Dritte nicht möglich.

Tutorials können per Suchfunktion abgefragt werden bzw. werden alphabetisch über ein Inhaltsverzeich-nis im Secondary Content angezeigt. Zusätzlich soll die Möglichkeit bestehen, Tutorials mit einem ergän-zenden PDF zu versehen, welches zum Download angeboten wird.

Page 56: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

51

7. fazit

Im Zuge dieser Arbeit wurde der Workfl ow zur Erstellung einer Webpräsenz auf Grundlage des inhaltsbe-zogenen Designprozesses beschrieben. Berücksichtigt wurde hierbei der zur Zeit gültige Standard Web 2.0 und dessen Designkultur, insbesondere unter den Aspekten Content is King und Joy of Use.

Ausgangspunkt für einen inhaltsorientierten Arbeitsablauf ist das exakte Bestimmen der Anforderungen, die die gewünschte Zielgruppe an eine Internetseite stellt. Hieraus ergeben sich die einzelnen Inhalte einer Website. Zur anschließenden Strukturierung der Inhalte ist es wichtig, diese nicht nur hinsichtlich ihres In-formationsgehalts zu untersuchen, sondern auch deren Charakter und Umfang zu erfassen. Unterscheiden lässt sich hierbei in Inhalte mit hohem oder geringem Volumen, sowie in Inhalte mit hohem oder geringem Informationsgehalt, die die Besucher einer Seite primär auf rationaler bzw. emotionaler Ebene ansprechen sollen.

Auf Basis dieser Vorüberlegungen lassen sich die Inhalte in semantische Blöcke unterteilen, innerhalb eines grafi schen Layouts strukturiert platzieren und anschließend in Form eines geordneten Markups, in Verbin-dung mit CSS, umsetzen.

Vorteil dieser Vorgehensweise ist, dass sie die Trennung von Inhalt, Struktur und Design unterstützt. Diese Trennung ist vor allem dann wichtig, wenn es sich um umfangreiche Internetauftritte handelt, an deren Erstellung mehrere Personengruppen beteiligt sind. Sie gewährleistet, dass Änderungen in einem der Teil-bereiche sich nicht auf die anderen Felder auswirken.

Die Analyse des inhaltsbezogenen Designprozesses erfolgte anhand der praktischen Umsetzung der HdM Tonstudio-Website. Hierbei wurden die einzelnen Schritte des Workfl ows gemäß der vorgegebenen Ab-folge durchgeführt. Der inhaltsorientierte Arbeitsablauf erwies sich als schlüssig und absolut praktikabel; seine Nutzung zur Umsetzung von Internetpräsenzen ist zu empfehlen.

Als problematisch für die konsequente Verfolgung des inhaltsbezogenen Ansatzes im Berufsalltag könnte sich Faktor Kunde erweisen:

Wie beschrieben, bildet eine umfassende Analyse der Inhalte die Grundlage für den weiteren Arbeitspro-zess. Inhalte werden von Kundenseite jedoch oftmals erst im Laufe des Prozesses geliefert bzw. nochmals geändert. Dies ist unproblematisch, solange sich ihr Charakter und ihre Form nicht ändert. Sollte dies je-doch der Fall sein, so kann sich das negativ auf den Prozess auswirken.Zudem tendieren Kunden dazu, möglichst frühzeitig erste visuelle Konzepte sehen zu wollen. Da ihnen die Funktionalität der Seite verborgen bleibt, orientieren sie sich verständlicherweise stark am Layout. Für sie ist in erster Linie wichtig, wie sie sich später dem Besucher ihrer Website optisch präsentieren. Gefährlich sind frühzeitig erstellte Designs dann, wenn die Strukturierung der Inhalte noch nicht in ausreichendem Maße abgeschlossen wurde. Elementare Änderungen sind dem Kunden später nur schwer zu vermitteln.

Eine besondere Bedeutung kommt daher den Kontaktern und Medienberatern zu. Ihre Aufgabe ist es, den Kunden die Wichtigkeit der Inhalte für eine erfolgreichen und stimmigen Webauftritt verständlich zu machen. Daher ist es wichtig, dass auch sie in den Arbeitsprozess integriert werden und das Prinzip des inhaltsbezogenen Ansatzes verstanden haben.

Page 57: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

52

Im konkreten Fall der HdM Tonstudio-Website kam dieser Aspekt nicht zum tragen, da mir von Seiten der Verantwortlichen nach anfänglicher Absprache der Inhalte freie Hand gelassen wurde. Hauptaugenmerk der praktischen Arbeit lag daher auf der ordnungsgemäßen Abfolgen der einzelnen Arbeitsschritte, sowie auf der gestalterischen Konzeption der Seite. Hierbei wurde vorallem auf die Integration inhaltlicher und gestalterischer Merkmale des Web 2.0 geachtet.

Aus persönlicher Sicht war die Umsetzung einer Website auf inhaltsbezogener Basis und nach Web 2.0-Kri-terien sehr aufschlussreich. Aufgrund meiner Ausbildung zum Mediendesigner 2000 bis 2002, der Zeit des vorwiegend konsumorientierten Webs und designbezogenen Workfl ows, mussten zunächst einige Auto-matismen und „anerzogene“ Vorgehesweisen über Bord geworfen werden. Nach kleineren anfänglichen Problemen wurde der Denkansatz des inhaltsbezogenen Workfl ows jedoch verinnerlicht und im Laufe des Prozesses als absolut schlüssig empfunden.Ebenfalls lehrreich war die Einbindung der Seite in Zope und die in Teilen vorgenommene Umsetzung ein-zelner Bestandteile der HdM Tonstudio-Website innerhalb dieses Frameworks. Dies förderte das Verständnis für die Arbeit „hinter der Seite“ und machte die Bedeutung eines sauberen Frontend-Markups als Binde-glied zwischen Design und Funktion klar.

Die entwickelte HdM Tonstudio-Website bietet in ihrer Anlage und Grundfunktionaltät die geeignete Basis zur tatsächlichen Umsetzung. Die gewählten Inhalte und Servicefunktionen sind an den Bedürfnissen der Studenten und Interessenten ausgerichtet und bieten umfangreichen Informationen innerhalb eines op-tisch ansprechenden Rahmens.

Bis zur tatsächlichen Nutzung der Seite bedarf es noch einiger Programmierarbeit am Backend der Seite. Zudem muss eine Anpassung an das auf dem Hochschul-Server existierende Umfeld geschaffen werden, um mögliche Konfl ikte mit anderen Seiten zu verhindern und Redundanzen zu vermeiden. Sicherheitsricht-linien sind zu beachten, eine Anbindung an das Authentifi zierungssystem der Hochschule muss erfolgen.

Sollte seitens der Hochschule ein Interesse an der Weiterführung dieses Projektes bestehen, so würde ich mich sehr freuen und wäre gerne an der weiteren Ausarbeitung beteiligt.

Danken möchte ich an dieser Stelle Prof. Oliver Curdt und Prof. Dipl.-Ing. Uwe Schulz für ihre Unterstützung und die Betreuung dieser Arbeit, Prof. Susanne Mayer für ihre kritische Betrachtung und die konstruktiven Vorschläge während der Layoutentwicklung, sowie Dipl.-Ing. Bärbel Mayr für das zur Verfügung gestellte Tonstudio-Bildmaterial.

Page 58: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

quellenverzeichnis

1. schriftliche Publikationen:

Andy Budd / Cameron Moll / Simon Collison: CSS Mastery. Webdesign für Fortgeschrittene. München: Addison-Wesley Verlag, 2007 (1. Aufl age). [ISBN 978-3-8273-2457-3]

Andy Clarke / Molly E. Holzschlag: Transcending CSS. Neue kreative Spielräume im Webdesign. München: Addison-Wesley Verlag, 2007 (1. Aufl age). [ISBN 978-3-8273-2445-7]

Bärbel Mayr: Technischer Leitfaden und Bedienerhandbuch für das Tonstudio der Hochschule der Medien. Stuttgart: unveröffentlichte Diplomarbeit im Bereich Audiovisuelle Medien an der HdM Stuttgart, 2008

Michel Pelletier / Amos Latteier / Zope Developers Team: Das Zope-Buch. Einführung und Dokumentation zur Entwicklung von Webanwendungen. München: Markt+Technik Verlag, 2002 (1. Aufl age). [ISBN 3-8272-6194-5]

Peter Walerowski: Zope. Bonn: Galileo Press, 2004 (1. Aufl age). [ISBN 3-89842-403-0]

Vitaly Friedman: Praxisbuch Web 2.0. Moderne Webseiten programmieren und gestalten. Bonn: Galileo Press, 2007 (1. Aufl age). [ISBN 978-3-8362-1087-4]

2. Internet-Quellen:

Das deutsche Python-Forum.URL: http://www.python-forum.de [Stand: Januar 2009]

David Siegel: The web is ruined and I ruined it. (1997)URL: http://www.xml.com/pub/a/w3j/s1.people.html [Stand: Januar 2009]

Finn Rudolph: JavaScript-basierte Bildergalerie Imagefl ow.URL: http://imagefl ow.fi nnrudolph.de [Stand: Januar 2009]

Google: Mehr über Google: Feiertagslogos.URL: http://www.google.com/holidaylogos.html [Stand: Januar 2009]

Klaus Cloppenburg: Joy of Use: Wenn Usability Spaß macht. (Publikation im Rahmen der Deutschen Web-site zum World Usability Day am 13.11.2008)URL: http://www.wud-berlin.de/2008/joy-of-use.php [Stand: Januar 2009]

Python Programming Language: Offi cial Website.URL: http://www.python.org [Stand: Januar 2009]

Torstein Hønsi: JavaScript Thumbnail Viewer Highslide JS.URL: http://highslide.com [Stand: Januar 2009]

Webhits. Hit-Counter und Live-Statistiken: Web-Barometer.URL: http://www.webhits.de/deutsch/index.shtml?webstats.html [Stand: Januar 2009]

zForum: Zope Based Message Boards.URL: http://www.zforum.org [Stand: Januar 2009]

Zope Community.URL: http://www.zope.org [Stand: Januar 2009]

IV

Page 59: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

V

verzeichnis der abkürzungen

Abb.

AM

CD

CI

CSS

DTML

FIR

HdM

HTML

IFR

LDAP

MSIE

px

sIFR

SQL

TAL

URL

XHTML

XML

ZMI

ZODB

Zope

ZSQL

Abbildung

Audiovisuelle Medien

Corporate Design

Corporate Identity

Cascading Stylesheets

Document Template Markup Language

Fahrner Image Replacement

Hochschule der Medien

HyperText Markup Language

Inman Flash Replacement

Lightweight Directory Access Protocol

Microsoft Internet Explorer

Pixel

Scalable Inman Flash Replacement

Structured Query Language

Template Attribute Language

Uniform Resource Locator

Extensible HyperText Markup Language

Extensible Markup Language

Zope Management Interface

Zope Object Database

Z Object Publishing Environment

Zope Structured Query Language

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

=

Page 60: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

appendix a

Styleguide der Hochschule der Medien

VI

Page 61: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

STYLEGUIDEGRUNDELEMENTE

HOCHSCHULE DER MEDIEN

VERSION 05

JUNI 2005

Page 62: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

02 1 GRUNDELEMENTE Logo

LOGO: PROPORTIONEN UND PLATZIERUNG

Das Logo der Hochschule der Medien besteht aus einer Kombination aus Bild- und

Wortmarke.

Die Schrift für die Wortmarke wurde ausschließlich für das Logo der Hochschule der Medien

entwickelt. Eine andere Schrift darf für die Wortmarke nicht verwendet werden.

Um seine Wirkung zu entfalten, benötigt das Logo umgebenden Weißraum.

Der umgebende Weißraum ist dem Logo zugehörig zu betrachten und proportional zur

Logogröße freizuhalten.

DIE GRÖSSENVERHÄLTNISSE VON BILD-UND WORTMARKE, SOWIE UMRAUM-

PROPORTIONEN SIND FESTGELEGT UND DÜRFEN NICHT VERÄNDERT WERDEN.

ZUGUNSTEN DER LESBARKEIT DARF DAS LOGO EINE MINDESTBREITE VON 26 MM

NICHT UNTERSCHREITEN.

Bei spezifischen Anwendungen der Hochschule und der Fakultäten kommt ein entsprechen-

der Farbbalken hinzu. Stand und Größe des Farbbalkens sind definiert.

Wird der Balken auf Drucksachen als graphisches Element und nicht in direktem

Zusammenhang mit dem Logo eingesetzt, hat er in der Regel eine Breite von 8 mm.

DAS LOGO STEHT IM FORMAT IMMER RECHTS OBEN.

Ausnahme ist die zentrierte Anordnung des Logos auf einer vorgegebenen Fläche (Schilder,

Filmabspann,etc.).

44�

44�

Page 63: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Logo GRUNDELEMENTE 031

PLATZIERUNG UNTERSCHIEDLICHER LOGOGRÖSSEN

100 %

60 %

59 mm6 m

m

17 m

m

15 mm

35,4 mm

3,6

mm

10

,2 m

m

9 mm

80 %

47,2 mm

4,8

mm

13,6

mm

12 mm

150%

88,5 mm

9 m

m

25

,5 m

m

22,5 mm

Page 64: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

LOGOVERSIONEN

Das Logo steht in verschiedenen Versionen zur Verfügung. Je nach Anwendung ist die ent-

sprechende Variante zu wählen: Logo in HKS-Farben, Logo in Graustufen, schwarzes oder

weißes Logo. Die Standardversionen können als EPS oder TIF im Internet unter www.hdm-

stuttgart.de/intranet bzw. www.hdm-stuttgart.de/akutell/bildarchiv abgerufen werden.

LOGO: HKS-Farben

Die Logoversion „Logo_HKS.EPS“ gilt für die meisten Anwendungen.

Der Farbbalken steht für die Hochschule oder für die jeweilige Fakultät.

GRUNDELEMENTE Logo04 1

[ „LOGO HKS“ ]

[ „LOGO GRAUSTUFEN“ ]

LOGO: Graustufen

Das Logo in Graustufen setzt sich aus schwarz und einem aufgerastertem Grauton

(40% schwarz) zusammen. Es wird bei einfarbigen Drucksachen verwendet.

Page 65: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Logo GRUNDELEMENTE 51

LOGO: Schwarz

Das schwarze Logo wird bei einfarbigen Drucksachen, kleinen Verwendungsgrößen oder

grobem Raster (Siebdruck etc.) und für Schneideplotts (Schilder, Pkw-Aufschrift etc.) ver-

wendet.

[ „LOGO SCHWARZ“ ]

[ „LOGO WEISS“ ]

LOGO: Weiß

Das weiße Logo ist für Anwendungen auf einem dunklen Hintergrund vorgesehen.

Page 66: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

GRUNDELEMENTE Logo6 1

LOGO AUF NICHT-WEISSEM UND NICHT-SCHWARZEM HINTERGRUND

Auf grauen oder farbigen Hintergründen steht das Logo entweder in weiß oder in schwarz.

Bitte die Version mit dem größten Kontrast zum Untergrund wählen.

Eine weiße Unterlegung der Logofläche ist nicht zulässig.

Page 67: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Farben GRUNDELEMENTE 71

FARBEN

Die Hochschulfarben sind rot, schwarz und grau.

Außerdem haben die Fakultäten eine eigene Farbe, die als Balken neben dem Logo oder als

Vollfläche erscheinen kann. So sind die einzelnen Fakultäten auf Briefbögen, Visitenkarten,

Mappen und Broschüren optisch schnell differenzierbar.

Im Regelfall sollen die Farben als Volltonfarben gedruckt werden. Wo dies nicht mög-

lich ist, dienen die aufgeführten, anwendungstechnischen Empfehlungen vom HKS-

Warenzeichenverband für den Vierfarbdruck als Orientierung.

Bei Verzicht auf die Sonderfarbe HKS 91 im Logo sollte zur Wahrung des optischen

Eindrucks im FM-Raster, mindestens aber im 70er Raster, gedruckt werden.

SCHWARZ

100 % schwarz

HKS 91

40 % schwarz

HKS 15 K C: 5 %, M: 100 %, Y: 80 %, K: 0 %

HKS 15 N C: 5 %, M: 85 %, Y: 70 %, K: 0 %

(HKS 3000)

HKS 42K-100-10 C:100 %, M: 90 %, Y: 0 %, K: 0 %

HKS 42N-100-10 C: 95 %, M 65 %, Y: 0 %, K: 0 %

HKS 66 K C: 60 %, M: 0 %, Y: 100 %, K: 0 %

HKS 66 N C: 40 %, M: 0 %, Y: 90 %, K: 0 %

(HKS 3000)

HKS 51K-100-30 C:100 %, M: 0 %, Y: 45 %, K: 25 %

HKS 51N-100-30 C:100 %, M: 20 %, Y: 55 %, K: 10 %

Logo partiell

Logo partiell

Hochschulfarbe

(fakultätsübergreifend)

Fakultät

Druck und Medien

Fakultät

Electronic Media

Fakultät

Information und Kommunikation

Page 68: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

GRUNDELEMENTE Allgemeine Vorgaben / Typografie8 1

AUFBAU VON DRUCKSACHEN

FORMATE

Es gibt keine Formatvorgaben für Druckprodukte. Eine Ausnahme bilden

Standarddrucksachen, deren Format festgelegt ist.

ELEMENTE

Logo: Auf der Titelseite befindet sich im rechten oberen Eck das proportional angepasste

und entsprechend positionierte HdM-Logo.

Hochschulfarbe: Die Hochschulfarbe rot soll auf der Vorderseite auftauchen. Weitere

Gestaltungsrichtlinien sind nicht gegeben.

TYPOGRAFIE

Als Hausschrift wird die Schriftfamilie „FrutigerNext LT“ verwendet. Folgende Schriftschnitte

bieten in der Regel ausreichende Gestaltungsmöglichkeiten:

FrutigerNext LT Bold

FrutigerNext LT Medium

FrutigerNext LT Light

DIE SCHRIFTFARBE IST, ABHÄNGIG VON DER LESBARKEIT, SCHWARZ ODER WEISS.

ALLGEMEINE TYPOGRAFISCHE RICHTLINIEN

FLIESSTEXTE

FrutigerNext LT Medium, Schriftgröße 9 - 10 pt, Zeilen abstand etwa 12 - 14 pt

Zur Gliederung können Versalien eingesetzt werden.

ÜBERSCHRIFTEN UND HERVORGEHOBENE TEXTELEMENTE

FrutigerNext LT Bold , Schriftgröße 7 - 23 pt

Zusätzlich können Großbuchstaben genutzt werden.

FUSSNOTEN, ADRESSZEILEN ETC.

FrutigerNext LT Light, Schriftgröße 7 - 7,5 pt, Zeilen abstand etwa 9 - 12 pt

VOR ALLEM BEI GERINGEN SCHRIFTGRÖSSEN UND FETTEN SCHRIFTSCHNITTEN

BITTE ZUGUNSTEN DER LESBARKEIT AUF EINEN ENTSPRECHENDEN ZEICHEN-

ABSTAND ACHTEN.

Page 69: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

Typografie GRUNDELEMENTE 91

ADRESSE AUF PUBLIKATIONEN

DIE ADRESSE STEHT IM REGELFALL AUF DER RÜCKSEITE DER PUBLIKATIONEN.

Hochschule der Medien: FrutigerNext LT Bold, 9,5 pt, Zeilenabstand: 12 pt

zusätzliche Leerzeilen: Zeilenabstand: 5 pt

Adresse: FrutigerNext LT Medium, 9,5 pt, Zeilenabstand: 12 pt

zusätzliche Leerzeilen: Zeilenabstand: 5 pt

Hochschule der Medien

Nobelstraße 1070569 Stuttgart

Tel. 0711 685 28 07Fax 0711 685 66 50

[email protected]

17 pt

17 pt

Nobelstraße 1070569 Stuttgart

Tel. 0711 685 28 07Fax 0711 685 66 50

[email protected]

In Ausnahmefällen kann das Logo auf einer Umschlaginnenseite oder auf der Rückseite stehen

zum Beispiel bei Weihnachtskarten. Hier wird die Logogröße 90 % verwendet.

Die Textzeile „Hochschule der Medien“ entfällt.

Page 70: Posselt, Lars: Konzeption & Umsetzung eines Webauftritts

appendix b

elektronisches Exemplar dieser Arbeit

VII