IFD:WebApps/Marcus Kossatz

Abschluss-Dokumentation

Phase 1 – Ideensammlung (Oktober – November 2010)

Die Idee kam beim Durchforsten des BISONs, dem Studienportals der Uni Weimar: „WebApps – Grundlagen der Web-Programmierung“ klang nach genau dem, was ich suchte. Als ich 14 Jahre alt war, habe ich mir meine eigene Internetseite gebaut und war darauf stolz wie Oskar. Diese Seite, ist mittlerweile aber zu einem Klotz am Beim geworden: Mir fehlt die Zeit, Muße, Inspiration aber vor allem das Wissen, um aus dem lieblos hingeworfenen WordPress-Blog eine vernünftige Internetseite zu bauen.

Da der Schuster selbst die schlechtesten Schuhe hat, wollte ich als begleitendes Projekt zur Veranstaltung nicht meine eigene Seite aufbauen. Nach persönlichen Gesprächen mit meiner Anvertrauten beschloss ich, sie und ihre Zwillingsschwester als Inspiration zu nehmen: Thea und Anne Baumbach sind Studentinnen der Hochschule für Musik Franz Liszt in Weimar, sie bilden zusammen ein Kammermusik-Duo (Gitarre und Flöte). Als Künstler ist das Internet heutzutage der größte Markt, so ist ein Auftritt im Weltnetz unabdingbar für die eigene Karriere. Ziel meines Projektes ist es, für die Musikerinnen eine attraktive, innovative und moderne Internetpräsenz zu schaffen, um sich in der Öffentlichkeit seriös präsentieren zu können und wahrgenommen zu werden.

Die Gestaltungsphase begann mit der Anfertigung von kleinen Kritzeleien bis hin zu größeren Skizzen, wie die Internetseite einmal aussehen soll. Gespickt mit tollen Ideen (Hintergrundmusik, animierte Bildaufleisten, ein auf JavaScript basierender KontaktKalender) habe ich mir selbst viele Ziele gesetzt, um den Netzauftritt anspruchsvoll mit Animationen zu gestalten.

Phase 2 – Technischer Rahmen (November 2010)

Als Technologie zur Entwicklung der Seite habe ich mich für das Inhaltsverwaltungssystem „Joomla!“ entschieden, das eines der größten und bekanntesten seiner Art ist. Ausschlaggebend für die Entscheidung, ein solches System zur Hilfe zu nehmen, war die Anforderung, dass die beiden Musikerinnen ohne technisches Vorwissen später selbst den Inhalt der Seite ändern können, ohne sich durch komplizierten Kode arbeiten zu müssen. Joomla! bietet die Möglichkeit, mehrere Benutzer mit verschiedenen Rechten auszustatten, die Gestaltungsvorlage vom Inhalt zu trennen und eine Vielzahl von nützlichen Komponenten aus einer großen Bibliothek hinzuzufügen.

Die Programmierung der Internetseite wird für die „klassische“ Darstellung auf einem Rechner mit normaler Bildschirmgröße ausgerichtet. Die Zielgruppe der Internetseite sind kulturelle Einrichtungen oder Privatpersonen mit einem persönlichen oder musikalischen Interesse an den beiden Musikerinnen. Es besteht daher kein Zeitdruck bei der Informationsaufnahme, und somit keine Notwendig, eine gesonderte Version für mobile Endgeräte zu erschaffen.

Ich selbst beherrsche nur HTML und CSS ausreichend, um den Anforderungen des Kurses zu genügen, mit PHP, JavaScript, Ajax oder ähnlichem habe ich noch nie gearbeitet. Auch im Umgang mit Bildbearbeitungsprogrammen, die eine Grundlage der Gestaltung von Internetauftritten ist, habe ich nicht genügend Erfahrung. Anfang November 2010 habe ich mir den „localhost“ unter XAMPP auf meinem Linux-System eingerichtet, Joomla! installiert und erste Erfahrungen damit gemacht, dass es doch eine gewisse Zeit dauert, mit dem System umgehen zu können.

Phase 3 – Entwicklung der Gestaltungs-Vorlage (Dezember 2010 – Februar 2011)

Die größte und schwierigste Aufgabe war es für mich, den Aufbau der Seite in der Gestaltungs-Vorlage zu implementieren. Die Seite ist dreigeteilt: Es gibt eine Seite, die das Baumbach-Duo selbst darstellt, und jeweils eine Solo-Seite für beide Musikerinnen. Alle drei Seiten sind strukturell identisch und unterscheiden sich auf gestalterischer Seite nur im Farbschema, dem Hintergrundbild und Kleinigkeiten im Aufbau.

Die Hauptaufgabe war es also, neben der globalen CSS-Formatvorlage jedem der drei Seiten-Teile und der separaten Startseite eine eigene CSS-Formatvorlage zu geben und diese an der richtigen Stelle einzubinden. Hinzu kommt, dass für den Internet Explorer eine eigene Formatvorlage eingelesen werden muss, da er die Schriftart in einer anderen Größe darstellt als ein normaler Browser. Die Realisierung dieser PHP-Programmierung war für mich sehr kompliziert.

Dieser Ausschnitt aus der „index.php“ ist die Essenz der Funktion des Gestaltungskonzeptes:

<?php 
// Einbindung globaler Formatvorlage ...
  $doc->addStyleSheet( JURI::base().'templates/'.$app->getTemplate().'/css/global.css' );
...			
// Einlesen Artikel-ID, Komponente, Ansicht, Kategorie-ID usw.
...
// Test, in welcher Kategorie er ist -> Zuweisung Startartikel für Anne, Thea und Duo
  switch ( $id ) {
    case  144 :			// Anne
      $app->redirect('index.php?option=com_content&view=article&id=55&Itemid=362');
      break;
    case  145 :			// Thea
      $app->redirect('index.php?option=com_content&view=article&id=56&Itemid=363');
      break;
    case  146 :			// Duo
      $app->redirect('index.php?option=com_content&view=article&id=57&Itemid=357');
      break;	
  }					
...					
// trauriger Test, ob der Internet Explorer benutzt wird
...	    	
// Zuweisung Kategorie -> CSS
  function setCategoryStyleSheet( $cid, $dc, $ap ) {
    if ( $cid ) {
      switch( $cid ) {
        case 146:		// Duo
          $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/duo.css' );
          if ($browser == "ie")
            $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/ie.css');
          break;
        case 145:		// Thea
          $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/thea.css' );
          if ($browser == "ie")
            $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/ie.css' );
          break;
        case 144:		// Anne
          $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/anne.css' );
          if ($browser == "ie")
            $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/ie.css' );
          break;
case 147:			// Startseite
          $dc->addStyleSheet( JURI::base().'templates/'.$ap->getTemplate().'/css/start.css' );
          break;
      }
    }
  }
?>

Phase 4 – Gestaltung (März 2011)

Leider habe ich es im Semester versäumt, mich frühzeitig um die Gestaltung der Seite kümmern. Die Realisierung der Einbindung verschiedener CSS-Formatvorlagen hat sehr viel Zeit in Anspruch genommen. Das größte Problem für mich jedoch war es, die Meinungen, Erfahrungen, künstlerischen und technischen Fähigkeiten, Zeiten und Organisationstalente von einem Entwickler und zwei Musikerinnen unter einen Hut zu bekommen. Die Arbeit wurde in der Vorlesungszeit immer weiter nach hinten geschoben, da die Frage: „Was wollt ihr eigentlich genau haben?“ schwer zu beantworten war.

Aus diesem Grund konnte ich leider die gute Lehrveranstaltung nicht dazu nutzen, mit neu erlerntem Wissen an meinem Projekt zu arbeiten und es vorzustellen. Bei der Zwischenabgabe am letzten Tag der Veranstaltung habe ich einen in keiner Weise zufriedenstellenden Zwischenstand präsentiert.

Die eigentliche Arbeit am Projekt erfolgte in den Semesterferien zusammen mit Thea, die sich viel mit dem Photoshop beschäftigt hatte. In mehr oder weniger einer Woche gelangten wir vom kompletten Neubau des Box-Modells bis hin zur fast fertigen Internetseite.

Als Grundmodell haben wir uns für eine statisches Gestaltung mit fixer Breite entschieden. Dies war nötig, um die Funktion des Hintergrundbildes als Begrenzung des Inhalts nicht außer Kraft zu setzen. An dieser Stelle habe ich die Funktion vermisst, ein Hintergrundbild beliebig zu skalieren und an die Bildschirmgröße anzupassen.

Während der Gestaltungsphase habe ich mir den Leitsatz von Dozent Michael Markert zu Herzen genommen: „Eine Seite ist dann gut, wenn man nichts mehr hinzuzufügen braucht und nichts mehr weglassen kann“. Dies nehme ich neben den vielen technischen Neuigkeiten als den wichtigsten Grundsatz aus der Veranstaltung mit.

Ich habe mich auf das Wesentliche konzentriert: Der Hintergrund besteht aus einem auslaufenden Bild. Die Menüleisten oben und unten und die Porträtfotos rechts und links grenzen den Inhalt der Seite ein. Jeder einzelne Bereich der Seite ist aufs kürzeste und wichtigste zusammengefasst. Die Ideen Hintergrundmusik, KontaktKalender und animierte Bildaufleisten habe ich verworfen. Nach dem Markertschen Leitsatz hätte sie weglassen können – und habe es daher auch getan. Aufgrund der Barrierefreiheit habe ich auf Flash und JavaScript fast vollständig verzichtet, mit Ausnahme der Bildergalerie.

Das Füllen der Seite mit inhaltlichem Leben war hingegen schnell gemacht. Da die Texte im Umfang nicht sehr lang sind, hat sich die fixe Breite des Gestaltungs-Modells ausgezahlt. Der Text wirkt kompakt und verliert sich nicht auf dem Bildschirm. Bei großen Auflösungen jedoch wird das Problem der fixen Breite deutlich. Diesen Kompromiss jedoch musste ich eingehen.

Phase 5 – Auftritt im Netz (April 2011)

Als auf dem Localhost alles fertig entwickelt war, folgte der letzte Schritt, der jedoch wie alle anderen davor nicht ohne Komplikationen und Flüche auf die Microsoft-Gemeinschaft von Statten ging: Der Umzug von der lokalen Festplatte auf Speicherplatz im Internet. Falsch gesetzte Dateirechte und mangelnde Kenntnisse von MySQL-Datenbanken standen einer schnellen Umsetzung im Wege. Nachdem endlich alles funktionierte und es im Internet genauso aussah, wie lokal, war die Freude groß.

Der erste Anblick der Seite im Internet Explorer jedoch ließ jegliche Freude vergehen. Die Implementierung einer PHP-basierten Browserweiche (siehe Kode-Ausschnitt oben) behob das Problem wieder. Mit dreiwöchiger Verspätung, für die ich mich ausdrücklich entschuldigen möchte, stelle ich heute, am 6. April 2011, die aktuelle Version als Endabgabe meines Projekts ins MedienWiki.

Doch es wird noch weiter gehen, da die beiden Musikerinnen weitere Ideen und Vorstellungen haben, zum Beispiel Mehrsprachigkeit, musikalische Untermalung und Veröffentlichung einer Videogalerie. Diese Weiterentwicklungen werden allerdings nicht in den nächsten Wochen realisiert und haben damit auf das Projekt im Rahmen der Veranstaltung „WebApps“ keinen Einfluss mehr. Ab sofort ist der Internetauftritt unter > www.baumbach-duo.de < zu erreichen.

Vielen Dank für die gute Lehrveranstaltung!