diplomarbeit gruberweg

Vorwort

Am Anfang des Schuljahres waren wir noch völlig unentschlossen welches Projekt wirnun nehmen sollen. Nachdem Herr Hanl unserer Klasse verschiedene Matura-Projektevorstellte, entschieden wir uns schlussendlich für das Projekt „Gruberweg“. Da eineWebseite zu gestalten unserer Ausbildung entsprach und wir dieses Projekt sehr in-teressant und ansprechend fanden. Unsere Projekt wurde für die Franz Xaver GruberGemeinschaft erstellt.

Sehr herzlich wollen wir Frau Priller und Herren Reindl für die gute Zusammenarbeitund Kommunikation danken.

Weiters möchten wir unserem Projektbetreuer Herrn Hanl danken, der uns jederZeit mit Ratschlägen und Hilfestellungen zur Seite stand.

ii

Zusammenfassung

In diesem Projekt soll eine Webseite für die Franz Xaver Gruber Gemeinschaft erstelltwerden. Die im Rahmen der Landesausstellung 2012 einen Friedensweg zu Ehren FranzXaver Grubers, der das weltbekannte Lied „Stille Nacht, heilige Nacht“ komponiert hat,erstellt haben. Der Internetauftritt soll dazu dienen eine große Anzahl an Besucheranzuziehen.

Die Webseite wird mit Hilfe von TYPO3, einem Content Management System er-stellt. Die drei wichtigsten Punkte auf der Webseite sind das Gruberweg, die Orgel-Kirche und der Friedensweg.

Wird die Webseite (www.gruberweg.at) geladen, erscheint ein kinderfreundlichesPopup, welches auf die verschiedenen Seiten verlinkt.

Der Blickfang der Startseite ist das große Headerbild mit den vier bunten Slidern,die „Ein Lied geht um die Welt“, „Das Franz Xaver Gruber Heimathaus“, „Der FranzXaver Gruber Weg“ und „Die Kirche von Hochburg“ anzeigt, und zu den jeweiligenSeiten verlinkt.

Ein besonderes Highlight ist der Menüpunkt „Virtuelle Tour“ in dem Panoramen, zuden bereits bestehenden Statuen, gezeigt werden. Welche mit Hilfe der modifiziertenNavigation, aus einer Google-Maps-Ansicht zu steuern ist.

Da die Webseite auch kinderfreundlich sein soll wurden kinderspezifische Elementeeingebaut. Einerseits gibt es eine Maussuche, überall auf der Webseite sind schmiedeeis-erne Mäuse versteckt, die zu suchen sind. Auf den verschiedenen Unterseiten befindensich außerdem noch Mauselemente, welche kindgerechte Inhalte beinhalten. Außerdembefindet sich noch ein Link auf der Webseite der zum Kinderbereich führt, auf welchemdie Geschichte der „Kirchenmaus“ erzählt wird, Bilder zum Ausmalen und ein Spielvorhanden sind.

iii

Abstract

This project deals with the creation of a website for a non profit organisation. Accordingto the national wide exhibition of 2012 a path around Hocburg-Ach was created. FranzXaver Gruber, founder of the prominent christmas-song „Stille Nacht, heilige Nacht“,was born there. On this way there are placed several statues which cover importantdetails of the song and the life of Franz Xaver Gruber.

The website was created with the content management system TYPO3 which enablesthe cousumer to edit and extend the content by their own. The three main parts ofthe website are the birth-house, the church and the path. Secondly we created contentspecially designed for children and their needs. So we adiditionally added a game forkids where they can search on the website for special buttons. So they can gain someprices like images.

On the top of the website a big header image presents the main topics of the site. Areally special feature is the „virtual path“, where visitors can admire 360 degree pictures.This means this pictures contain an all around view of special points on the path. Thevisitor can decide which part he wants to see.

Beside this features the goal is a stable and good looking website which can be easilyedited by the costumer.

iv

Contents

1 Aufgabenstellung 1

1.1 Wer ist Franz Xaver Gruber? . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Kundenvorgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Lastenheft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Projektbeschreibung 3

2.1 Konzept und Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Theorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.4 Umsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.5 Standardisierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3 Bedienungsanleitung 26

3.1 Allgemeines zur Wartung der Inhalte . . . . . . . . . . . . . . . . . . . . 263.2 Hinzufügen und Ändern der Inhaltselementen . . . . . . . . . . . . . . . 273.3 Hochladen von Bildern . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.4 Warten des Newssystems . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.5 Hinzufügen der Panoramen . . . . . . . . . . . . . . . . . . . . . . . . . 32

4 Persönliche Erfahrungen 35

4.1 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.2 TYPO3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.3 Kundenkontakt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5 Autoren 37

6 Quellen 44

v

1

Aufgabenstellung

1.1 Wer ist Franz Xaver Gruber?

Franz Xaver Gruber ist der Komponist des weltbekannten Weihnachtsliedes „StilleNacht, heilige Nacht“. Der Franz Xaver Gruber Verein beschloss Gedächtnisstättenzu errichten, um an das Werk von Gruber zu erinnern und ihn zu würdigen.

Eines der Gedächtnisstätten ist das Gedächtnishaus von Franz Xaver Gruber, welchesaus einer Nachbargemeinde nach Hochburg übertragen wurde.1. Eine weitere ist dieKirche, in dem sich die berühmte Orgel von Franz Xaver Gruber befindet, auf der erdie Melodie zu „Stille Nacht, heilige Nacht“ komponiert hat, und die man dort ansehenund bewundern kann. Auf dem Friedensweg von Hochburg, welcher noch in Arbeit ist,sollen Statuen die fünf Kontinente darstellen. Auf jeder Statue ist eine Strophe vondem weltbekannten Lied gedruckt.

1.2 Kundenvorgabe

Für diesen Friedensweg und den anderen Gedächtnisstätte wird ein Internetauftrittgewünscht, die im Rahmen der Landesausstellung 2012 online gehen soll, mit Hilfe derWebseite soll eine große Anzahl an Besucher angezogen werden.

Uns ist es freigestellt, das Design zu entwerfen, die Programmierumgebung zu wählenund das Layout zu gestalteten. Die Wartung und die Betreuung des Internetauftritts

1www.fxgruber.at

1

1.3 Lastenheft

soll nach Abschluss des Projekts durch die FXG-Gesellschaft erfolgen. Daher erfolgtder Einsatz eines Content Management System.

1.3 Lastenheft

Das Erscheinungsbild soll den Zweck der Webseite unterstreichen, sie sollte informa-tiv sein aber nicht langweilig. Das Ziel ist es ein schlichtes und übersichtliches Layoutzu erstellen, welches auch kinderfreundlich sein soll, da die Zielgruppe aus sechs- biszwölfjährige Kindern und deren Eltern besteht, die sich vor dem Besuch des Friedenswegesdarüber informieren möchten.

Das Design muss selber entworfen werden und die Webseite mit Hilfe von TYPO3 er-stellt werden. Bilder und Inhalte werden vom Kunden zur Verfügung gestellt. Gliederungund Struktur wird übernommen. Geplant sind mehrere Treffen mit den Kunden, teilsin Hochburg und teils in der HTL-Braunau. Am 3.Juni findet die Eröffnungsfeier desFriedenswegs statt. Hier soll die Webseite präsentiert werden.

Datum Tätigkeit06.-14.10 Design20.-21.10 Design, Diplompräsentation27.-28.10 Aufsetzten von TYPO303.-11.11 CSS/TYPO317.-23.12 Zusammenführen von HTML und TYPO312.-13.01 Vorb. Für Besprechung19.-20.01 Besprechung26.-03.02 Einbinden der Inhalte09.-10.02 Platzhalter16.-17.02 Fertigstellung der Webseite01.-09.03 Nice to Have15.-16.03 Fehlerkorrektur22.-30.03 Browseradaption12.-04.05 Doku und Diverses10.-11.05 Abgabe der Dokumentation

Table 1.1: Zeitplan - Planung unserer Tätigkeiten

2

2

Projektbeschreibung

2.1 Konzept und Design

Zu Beginn des Projekts recherchierten wir im World Wide Web und fanden viele Seitenwelche sich mit Webdesign beschäftigen. Anfangs zeichneten wir mit Stift und Papierund wechselten später zu Photoshop und Fireworks.

2.1.1 Startseite

Grundlegendes Design

Die Startseite wir beim ersten Aufruf der Seite angezeigt. Oben rechts wird der Link zumKinderbereich angezeigt, links davon ist der Friedensweg Schriftzug mit einem Bild vonFranz Xaver Gruber. Unter dem Logo befindet sich eine horizontale Navigation, die sichbeliebig erweitern und verkleinern lässt. Zurzeit beinhaltet die Navigation die Punkte:Startseite, Heimathaus, Friedensweg, Orgel-Kirche, Virtuelle Tour und Kontakt undAnreise.

Der Header

Der Blickfang der Seite (siehe Bild 2.2) ist das große Headerbild, welches zu der jew-eiligen Seite themenspezifische Bilder enthält. In dem Headerbild befinden sich vierbunte Rechtecke, im nachfolgenden Text Slider genannt, die beim Aktivieren mit derMaus hochfahren, und entsprechende Themen anzeigen. Diese Slider stehen für bes-timme Unterseiten und sollen den Besucher sofort die vier wichtigste Fakten über denFriedensweg näher bringen. "Ein Lied geht um die Welt" steht für das Lied "Stille

3


Figure 2.1: Handskizze Unterseite Figure 2.2: Digitale Startseite

Nacht, heilige Nacht". "Das Franz Xaver Gruber Heimathaus" gibt Informationen überdas "Heimathaus" und verlinkt auf die Unterseite des Heimathaus. "Der Franz XaverGruber Friedensweg" verlinkt zum Menüpunkt "Virtuellen Tour" und "Die Kirche vonHochburg" verlinkt zum Menüpunkt "Orgel-Kirche".

Der Content

Unter dem großen Headerbild befindet sich der Willkommenstitel, darunter findet manauf der linken Seite einen Einleitungstext, der in einer Goldfarbe geschrieben ist; danebenist den Willkommenstext welcher die Kunden begrüßt. Es ist dem Besucher überlassenwelchen Text er anzeigen lässt.

Der Footer

Unter dem Content-Bereich befindet sich der News-Bereich, dieser zeigt jeweils vierNewsbeiträge, die aus einem Titel und einem Vorschaubild besteht. Dieser News-Bereichwir auch auf den Unterseiten weitergeführt. Es wird eine Seite geöffnet, wenn manauf das News-Element klickt und die Inhalte werden angezeigt. Der Footer bildet den

4


Figure 2.3: Digitale Unterseite Figure 2.4: Virtuelle Tour

Abschluss der Seite, hier wird die E-mail-Adresse des Obmannes des Franz Xaver GruberVereins und ein Link zum Impressum angezeigt .

2.1.2 Unterseite

Die Unterseite (siehe Bild 2.3) ist bis auf den Content-Bereich gleich wie die Startseiteaufgebaut. Der Content-Bereich besteht zu einem Drittel aus der Navigation und derMäusesuche. Diese wurden eingebaut um die Webseite kinderfreundlicher zu gestalten,überall auf der Webseite sind vier schmiedeeiserne Mäuse versteckt die man suchen mussbzw. kann. Wenn alle vier Mäuse gefunden wurden, wartet ein Bild zum Ausmalen.In der extra eingerichtet Kinderecke gibt es die Geschichte der "Kirchenmaus", Bilderzum Ausmalen und ein kleines Spiel. In einem Drittel des Content-Bereichs wird derInhalt angezeigt. In diesem Bereich steht es dem Kunden völlig frei welche Inhalte eranzeigen lassen will. Standardmäßig werden Textelemente, Bildelemente und Mausele-mente angezeigt.

5


Figure 2.5: Panorama der Statue Europa

2.1.3 Virtuelle Tour

Die "Virtuelle Tour" (siehe Bild 2.4) ist im Gegensatz zu den anderen Unterseiten an-ders aufgebaut: statt dem Headerbild wird oben ein interaktives Panoramabild vonden bisher aufgestellten Statuen (Europa und Amerika) und der Kirche angezeigt, dieman mit Hilfe der modifizierten Navigation unten steuern kann. Wird einer der rotenPfeil auf der Karte, die als Navigation dient, angeklickt kann man das entsprechendePanorama geöffnet. Links neben der Navigation der Bilder wird die Navigation erklärtund eine weitere schmiedeeiserne Maus ist dort zu finden.

In Bild 2.5 sieht man eines dieser Panoramen. Aufgrund des Formates wird dasBild in zwei Reihen angezeigt. Mittels spezieller Software kann man dieses Bild alsInhaltselement einbinden und später selbst bestimmen welcher Ausschnitt angezeigtwerden soll.

6

2.2 Prototyp

2.2 Prototyp

2.2.1 Fireworks

Fireworks, ein Adobe Programm der Creative Suite Serie, wird zum Erstellen unsererEntwürfe verwendet. Im Gegensatz zu reinen pixelbasierenden Bildbearbeitungspro-grammen beherrscht Fireworks auch Vektorgrafiken. Auch die Ebenenstruktur ist beson-ders aufgebaut: eine Bilddatei kann nicht nur wie bei anderen Bildbearbeitungsprogram-men eine bestimme Anzahl an Ebenen besitzen. Fireworks hat auch die Möglichkeitdiese Ebenen "States" zuzuweisen. Diese States kann man sich so vorstellen, wie ver-schiedene Varianten eines Entwurfs. Die nächsthöhere Ebene sind "Pages". Eine Pagekann beliebig viele States beinhalten. Dies erleichtert das Arbeiten erheblich, da mannur an einem File arbeitet in dem die Entwürfe der ganzen Webseite gespeichert werden.

2.2.2 Prototyp

Um das vorläufige Design für den Kunden zu visualisieren können mittels FireworksElemente animiert werden. Nach diesen Animationen kann dieser State als HTML-File exportiert werden. Die Seite besteht nur aus Bilder und auch die Texte werdenals Bild eingefügt. Der Kunde kann jetzt mit der Seite interagieren und verschiedeneFunktionen ausprobieren. In unserem Fall wurden die vier Slider, das Haupt- undUntermenü animiert. Viele Kunden können sich nur durch Bilder schwer vorstellen wiedie fertige Webseite aussehen wird. Darum ist dies eine tolle Möglichkeit Entwürfeinteraktiv zu präsentieren.

Auf http://www.gruberweg.at/prototyp/ findet man unserem Prototyp.

2.2.3 Verwendung

Ein Klickdummy ist nicht für die Weiterverwendung für TYPO3 gegeigten, bietet aberdem Kunden einen Überblick. Es gibt keine weiteren Nutzen nachdem der Prototyp demKunden präsentiert worden ist. Dennoch lohnt sich die Zeit, da so Missverständnisseschnell behoben werden können und im späteren Verlauf der Umsetzung, Zeit gespartwerden kann.

7

2.3 Theorie

Figure 2.6: Screenshot der Fireworksoberfläche

2.3 Theorie

2.3.1 Das Content Management System

Was ist ein Content Management System?

Ein Content Management System ist eine serverseitige Software für die Verwaltung derInhalte einer Webseite. Diese Webseite wird in Backend und Frontend aufgeteilt, wobeider Besucher nur das Frontend zu sehen bekommt. Im Backend können Redakteure,ohne Programmierkenntnisse, Inhalte anpassen und hinzufügen, welche im Frontendangezeigt werden.

Wieso verwendet man ein Content Management System?

Webseiten mit einem Content Management System können von mehreren Autorenschnell und einfach bearbeitet werden. Beiträge müssen nicht umständlich in HTML-Files programmiert werden, sondern können direkt im Browser geschrieben werden.

Durch eines Rechtssystems bekommen alle Redakteure, die an der Webseite arbeiten,einen Login und können vom Administrator Rechte erhalten. Diese Rechte bestimmen

8

2.3 Theorie

an welchen Teilen der Webseite, welche Beiträge diese Redakteure, zu welcher Zeit, inwelchen Umfang bearbeiten dürfen.

Als nützliches Feature kann das Draf-System verwendet werden, welches alle Beiträgeder Redakteure speichert, aber bevor sie vom Chef-Redakteure nicht kontrolliert undgegebenenfalls verbessert worden sind, nicht auf der Webseite angezeigt werden.

Content Management Systeme protokollieren alle Änderungen an der Seite mit.Falls nun ein Redakteure unabsichtlich Inhalte löscht, können diese mit wenigen Klickswiederhergestellt werden. Infolgedessen kann die Webseite nur vom Administratorbeschädigt werden, da alle Aktionen die nicht rückgängig gemacht werden können, einAdministrator-Passwort benötigen.

Wieso verwenden wir TYPO3?

Laut einer Studie von W3techs1 benutzen knapp 70 Prozent aller Webseiten ein Con-tent Management System. Wordpress hat demnach einen Marktanteil von 54 Prozent,da es hauptsächlich bei Webblogs und kleinen Webseiten verwendet wird. Um un-seren Anforderungen gerecht zu werden, müssten wir es stark abändern. Joomla! wirdbei kleineren Webseiten verwendet und bietet alle Funktionen die wir benötigt hätten.Wir entschieden und trotzdem für TYPO3, da es in professionellen Bereichen häufigeingesetzt wird, einfach skaliert werden kann und ein umfangreiches Rechtemanagementbesitzt.

Alle hier aufgezählten Content Management Systeme sind Open-Source-Projekte,also frei von Lizenzgebühren. Es gibt keinen direkten Support vom Hersteller, dafürjedoch viele Online-Communities die sich mit Problemen und deren Lösungen beschäfti-gen.

Was ist der Sinn von Erweiterungen?

Das Internet, wie wir es heute kennen verändert sich zu schnell, sodass die Entwicklervom TYPO3 nicht auf alle Wünsche reagieren können. Mittels Erweiterungen kannjeder Nutzer kleine Programme schreiben die einfach in die eigene Seite eingebundenwerden können. Mit solchen Erweiterungen können Newssystem, Foren, Gästebücherund vieles mehr realisiert werden.

1www.w3techs.com/technologies/overview/contentmanagement/all

9

2.3 Theorie

2.3.2 TYPO3

Grundlagen

Templates sind Konfigurationsdateien die mit TYPOSCRIPT programmiert werden unddas Verhalten von TYPO3 steuern. Das Herz einer TYPO3 Webseite ist der Seiten-baum. Hier werden alle Seiten angelegt und angeordnet. Jede Seite kann beliebig vieleUnterseiten beinhalten.

Jeder Seite und Unterseite können wiederum Templates zugewiesen werden. DieseTemplates verweden vererbt. Ein Template betrifft die Seite der es zugewiesen wirdsowie alle Unterseiten dieser.

Das HTML-Index File

Marker sind Befehle die in ein HTML-File geschrieben werden und von TYPO3 erkanntwerden. Für die Darstellung von TYPO3 Inhalten wird ein HTML-File benötigt. Indiesem File wird das Layout festgelegt und beschrieben, an welchen Stellen TYPO3Inhalte einfügen soll. Folgendes File wird Text und eine Navigation anzeigen:

Dieses File mit dem Namen index.html befindet sich im /fileadmin/templates/Verzeichnis.

1 <html><head> </head>

3 <body><!�� ###DOCUMENT_BODY### begin ��>

5 <div c l a s s=" Se i t e "><div c l a s s="Navigat ion ">

7 <!�� ###MENU### begin��><!�� ###MENU### end��>

9 </div><div c l a s s=" Inha l t e ">

11 <!�� ###CONTENT### begin��><!�� ###CONTENT### end��>

13 </div></div>

15 <!�� ###DOCUMENT_BODY### end ��></body>

17 </html>

10

2.3 Theorie

Zeile 4: ist der Beginn eines Markers, sagt also das alles zwischen dem "begin-" und"end-tag" von TYPO3 gelesen und angesprochen werden kann. In der DIV-Navigationund dem DIV-Inhalte sind wiederum Marker. MENU beschreibt den Platz an demspäter die Navigation angezeigt werden soll und CONTENT beschreibt den Platz andem später der Inhalt ausgegeben werden sollen.

1 page .10 = TEMPLATEpage .10 {

3 template = FILEtemplate . f i l e = f i l e admin / templates / index . html

5 workOnSubpart = DOCUMENT_BODYsubparts {

7 INHALTE < s t y l e s . content . getRightMENU < l i b . Navigat ion

9 }

Template.file gibt an in welchen Verzeichnis sich die Index.html-Datei befindet. Wieim letzten Kapitel beschrieben liegt diese unter fileadmin/templates.

INHALTE wird mittels dem "<" Zeichen styles.content.getRight, was für nichtsanderes als der rechten Spalte in der Inhaltsübersicht steht (Code), zugewiesen. D.hder Marker INHALTE wird mit den Daten aus dieser Spalte ersetzt.

MENU wird mittels dem "<" Zeichen der Bibliothek lib.Navigation zugewiesen. D.hwird der Marker MENU wird mit den Daten aus der Bibliothek lib.Navigation ersetzt.In dieser Bibliothek befindet sich folgender Code:

1 l i b . Navigat ion = HMENUl i b . Navigat ion {

3 s p e c i a l = d i r e c t o r ys p e c i a l . va lue = 0

5 1 = HMENU1 .NO = 1

7 1 .NO. allWrap = |1 .NO. ATagTitle . f i e l d = abs t r a c t // d e s c r i p t i o n // t i t l e

9 }

11

2.3 Theorie

Der Marker MENU wird mit einer Navigation ersetzt. Diese Navigation ist vomTyp HMENU und listet alle Menüeinträge auf, die unter dem Element mit der ID = 0liegen.

Das Füllen und Anzeigen der Inhalte

Nun ist das index.html-File auf dem Server, ein Seitenbaum angelegt und ein Tem-plate unserer Rootseite zugewiesen. Nun muss noch festgelegt werden was überhauptausgegeben werden soll. Auf "Seite/Startseite" legt man in der rechten Spalte ein In-haltselement an (mehr Informationen dazu im Kapitel Bedienungsanleitung). Um jetztunserer Seite noch zu formatieren binden wir im Template ein CSS-File mit folgendemCode ein:

1 page . includeCSS . s c r e en = f i l e admin / templates / c s s / s c r e en . c s s

Nun werden die Inhalte und die Navigation ausgegeben. Mittels CSS können dieDIVs noch positioniert werden. Anbei ein Beispiel.

1 . S e i t e {po s i t i o n : r e l a t i v e ;

3 width : 940px ;}

5 . Navigat ion {po s i t i o n : r e l a t i v e ;

7 width : 235px ;f l o a t : l e f t ;

9 }. Inha l t e {

11 po s i t i o n : r e l a t i v e ;width : 705px ;

13 }

12

2.3 Theorie

Figure 2.7: Ziel unserer Ausgabe mit entsprechender CSS Konfiguration

2.3.3 Theorie jQuery

Was ist jQuery?

jQuery1 ist eine Javascriptbibliothek welche Funktionen für die unterschiedlichsten An-wendungsbereiche enthält. Es wird eine Cycle-Funktion benützt um Headerbilder zuüberblenden, um so eine Diashow zu erstellen. Außerdem werden vorgefertigte Funk-tionen zum Auslesen und Setzten von Cookies und das Bewegen der Slider auf unsererWebseite verwendet.

Als Beispiel werden Bilder im DIV Media mit dem Special Effect ,fade‘ und derGeschwindigkeit 2500 überblendet.

jQuery ( ’#media ’ ) . ready ( func t i on ( ) {2 jQuery ( ’#media ’ ) . c y c l e (

{4 fx : ’ fade ’ ,

speed : 25006 }

) ;8 }) ;

1www.jquery.com

13

2.4 Umsetzung

2.4 Umsetzung

2.4.1 Content Management System aufsetzen

Unter dem Aufsetzen1, versteht man das Kopieren und anschließende Konfigurieren allerDaten die für das TYPO3 Softwarepaket benötigt werden. Diese PHP-Dateien werdenauf TYPO3.org als Download angeboten. Diese Daten werden nach dem Entpacken aufden Webserver hochgeladen und konfiguriert. TYPO3 benötigt die Passwörter für denFTP-Zugang und die Datenbanken.

Mittwaldserver Lösung

Viele Webspace Anbieter, wie auch Mittwaldserver2, bieten bei der Registrierung bes-timmte Content Management Systeme zu installieren an. Dies spart Arbeit und passtdas Content Management System optimal auf den Webspace an. Im Internet werdengenügend Schritt für Schritt Anleitungen für das erfolgreiche Aufsetzten von TYPO3angeboten. Wichtig ist nur, dass der Webspace über PHP-Funktionalität und MYSQL-Datenbanken verfügt3.

2.4.2 Anzeigen der Inhalte

Bild 2.8 zeigt die verschachtelten DIV-Elemente die das Layout der Seite bestimmen.Wie im vorherigen Kapitel beschrieben, benötigt man zur Ausgabe von TYPO3 Inhaltenein Index-File welches mit Marker ausgestattet ist. Jedes DIV wird einer CSS-Klassezugewiesen, mit welcher es später gestyled wird.

Struktur

Durch geschickt verschachtelten DIVs ist die Formatierung erheblich einfacher. AlleElemente werden mit "position:relative;" positioniert. Dadruch überlappen sich dieDIVs nicht. Die Seite kann man in drei Bereiche aufteilen: Der Headerbereich mitNavigation und Headerbild, der Contentbereich mit Inhalten und der Unternavigationmit dem Footerbereich mit dem Newselement und dem Footer. Manche Bereiche werdennoch unterteilt, auf dies wird hier jedoch nicht eingegangen.

1www.dennisreimann.de/blog/typo3-aufsetzen-setup2www.mittwald.de3www.typo3.org/about/typo3-the-cms/system-requirements

14

2.4 Umsetzung

F i l e : index . html2

<html>4 <head> <!�� ###DOCUMENT_HEAD### ��> </head>

<body>6 <!�� ###DOCUMENT_BODY### begin ��>

<div c l a s s="impressum">8 <div c l a s s=" logo "></div>

<div c l a s s=" k i nd e r l i n k "></div>10 </div>

<div c l a s s=" s i t e ">12 <div c l a s s="navi ">

<!�� ###MENU### ��>14 </div>

<div c l a s s=" subheader ">16 <!�� ###SLIDERS### ��>

</div>18 <div c l a s s=" h i g h s l i d e r x ">

</div>20 <div c l a s s="header " id="header ">

<!�� ###HEADER### ��>22 <div c l a s s=" h i g h s l i d e r ">

<!�� ###HIGHSLIDER### ��>24 </div>

<div c l a s s=" content ">26 <div c l a s s="content_navi ">

<!�� ###SUBMENU### ��>28 </div>

<div c l a s s="content_main" id="cm">30 <!�� ###INHALT### ��>

</div>32 </div>

<div c l a s s="more">34 <!�� ###MORE### ��>

</div>36 <div c l a s s=" f o o t e r ">

<!�� ###FOOTER### ��>38 </div>

</div>40 <!�� ###DOCUMENT_BODY### end ��>

</body>42 </html>

15

2.4 Umsetzung

F i l e : RootTemplate2

page = PAGE4 ### REAL�URL

### CSS De f i n i t i on en6 ### Browser Favicon e inbinden

### jav a s c r i p t e inb inden8 ### goog le a n a l y t i c s

10 l i b . more = RECORDSl i b . more {

12 t a b l e s = tt_content# Inha l t s e l ement mit ID 42 i s t Quel l e

14 s o u r c e = 38}

16

l i b .FOOTER = HTML18 l i b .FOOTER. value (

### News Values20 )

22 l i b . subMenu = COAl i b . subMenu .10 = TEXT

24 l i b . subMenu . 1 0 . dataWrap = { l e v e l t i t l e : 1}

26 page .10 = TEMPLATEpage .10 {

28 t emp la t e = FILEtemp la t e . f i l e = f i l e admin / templates / index . html

30 workOnSubpart = DOCUMENT_BODYsubpa r t s {

32 INHALT < s t y l e s . content . getMORE < l i b . more

34 MAUS < l i b . mausMENU < l i b . mainnav

36 FOOTER < l i b .FOOTERSUBMENU < l i b . subnav

38 PRESS < l i b . pressmenuPATH < l i b . path

40 HEADER < l i b .MEDIASUBMENUTITLE < l i b . subMenu

42 }

16

2.4 Umsetzung

Figure 2.8: Entwurf der verschachtelten DIV’s

Da einige Unterseiten eine andere Ausgabe der Inhalte erfordern, werden dieseneigene Templates zugewiesen in denen diese Änderungen enthalten sind. So wird beispiel-sweise bei der "Virtuellen Tour", statt der Navigation eine Karte mit Pfeilen der wichti-gen Wegpunkte angezeigt.

2.4.3 Das Newssystem TT News

Für die Darstellung der Neuigkeiten wird die TYPO3 Extension TT News verwendet.Damit werden alle Newsbeiträge verwaltet und dargestellt. In unserem Newsbereich,der auf jeder Seite unter dem Content ist, werden vier Beiträge chronologisch geordnetangezeigt.

Nach der Installation ist es möglich als neues Inhaltselement, unter Plugin, Newszu wählen. Weil dieses Element auf allen Seiten angezeigt werden soll, werden diese als

17

2.4 Umsetzung

Figure 2.9: Allgemeine Einstellungen TT-News

Inhaltselement in einem Ordner gespeichert, und später über die ID aufgerufen.

Einstellungsmöglichkeiten

Unter General Settings wird ausgewählt in welcher Form und in welcher Reihenfolge dieAnzeige angezeigt werden soll. Der Menüpunkt Template gibt das Limit für die aktuell-sten vier Beiträge an und in "Other Settings" wird der Ordner gewählt, unter welcherdie Beiträge zu finden sind. Für die "Single News Display" Ansicht muss noch einebeliebige Unterseite ausgewählt werden. Dort wird ein Artikel näher angezeigt. Lautunserer Konfiguration werden die Beiträge im "News-Daten" Ordner, im VerzeichnisNews gespeichert.

Im Ordner "LatestNews" befinden sich Inhaltselemente, die auf verschiedenen Seitenund Unterseiten angezeigt werden sollen. Jeder Beitrag im TYPO3-Backend hat eine

18

2.4 Umsetzung

Figure 2.10: Anzeige des Newselements

ID. Mit dieser kann jeder Beitrag aufgerufen werden. Durch folgenden TYPOSCRIPT-CODE können wir hier das TT News Inhaltselement auf allen Seiten anzeigen

l i b . more = RECORDS2 l i b . more {

t a b l e s = tt_content4 # Inha l t s e l ement mit ID 42 i s t Quel l e

s o u r c e = 386 }

2.4.4 Die Startseite

Die Startseite übernimmt das globale Template sowie ihr eigenes. In diesem wird unteranderem eine eigene CSS Datei für die Startseite eingebunden. Mit dieser Datei kanndie Startseite unabhängig von den anderen Seiten gestyled werden.

19

2.4 Umsetzung

1 page . includeCSS . s t a r s e i t e = f i l e admin / templates / c s s / s t a r t s e i t e . c s s

3 l i b . t i t e l = TEXTl i b . t i t e l . va lue = Herz l i ch willkommen beim<br> Franz Xaver Gruber Weg

5 l i b . t i t e l . in se r tData = 1l i b . t i t e l . wrap = <div c l a s s=" precontent ">|</div>

7

page .10 = TEMPLATE9 page .10 {

template = FILE11 template . f i l e = f i l e admin / templates / index . html

workOnSubpart = DOCUMENT_BODY13 subparts {

INHALT < s t y l e s . content . get15 SUBMENU < s t y l e s . content . g e tLe f t

PRECONTENT < l i b . t i t e l17 SLIDERS < s t y l e s . content . getRight

HIGHSLIDER < s t y l e s . content . getBorder19 }

Beim ersten Aufruf der Startseite bekommt der Besucher ein Begrüßungsfenster mitLinks auf den Kinderbereich und speziellen Unterseiten zu Gesicht. Dies ist als HTML-Element in einer Spalte gespeichert. Wenn die Startseite geladen wird überprüft Javscriptob dieser Browser einen gesetzten Cookie hat. Wenn nicht sieht der Besucher das Popupund der Cookie wird gesetzt um ein erneutes öffnen zu verhindern

Die Inhalte der Slider sind in einer eigenen Spalte eingebunden um diese Inhalteeinfacher ändern zu können. Auch Highslide (siehe Highslide) kommt als Inhaltselement"HTML-Element" in eine eigene Spalte.

Der Contentbereich wird so angepasst, dass es statt der Unternavigation ein zusät-zliches Textfeld gibt. Die Animationen der Slider und die Bildüberblendungen werdenmit Javscript realisiert.

20

2.4 Umsetzung

Figure 2.11: Highslide Popup

document . getElementById ( ’ pager11 ’ ) . ch i ldNodes [ 0 ] . id = "pager1 " ;2 document . getElementById ( ’ pager11 ’ ) . ch i ldNodes [ 0 ] . onmouseover = func t i on ( ) {

$ ( "#c47" ) . stop ( true , f a l s e ) . animate ({ bottom : "0px" }) ;4 $ ( "#c44" ) . stop ( true , f a l s e ) . animate ({ bottom : "�198px" }) ;

$ ( "#c45" ) . stop ( true , f a l s e ) . animate ({ bottom : "�175px" }) ;6 $ ( "#c43" ) . stop ( true , f a l s e ) . animate ({ bottom : "�176px" }) ;

}

2.4.5 Realisierung der Virtuellen Tour

Um diese interaktiven Panoramen im Browser anzuzeigen, gibt es verschiedene Möglichkeiten.Wir entschieden uns für eine Webcomunity1, welche solche Bilder speichert und alsHTML5/Flash Plugin in die Webseite integrieren lässt.

Anstelle der Navigation wird ein Google-Maps-Bild angezeigt, auf welchem derWeg des Friedenswegs angezeigt wird. Die Positionen von Wegpunkten, von denenes Panoramabilder gibt, werden mit einem Pfeil markiert. Diese Pfeile verlinken auf dieentsprechenden Unterseiten. Der oben angeführte HTML-Code wird über eine Spalte

1www.dermandar.de

21

2.4 Umsetzung

in den Header eingebunden. So kann für jede Unterseite das richtige HTML5-Pluginangezeigt werden.

<s c r i p t type=" text / j a v a s c r i p t ">2 var dmdEmbeds = dmdEmbeds | | [ ] ;

( f unc t i on ( ) {4 var dmdPanoId = ’ aOizLv ’ ;

document . wr i t e ( ’<div id="dmd_pano_ ’ + dmdPanoId + ’ " s t y l e="width : 940px ; he ight : 520px;"></div>’ ) ;

6 dmdEmbeds . push (dmdPanoId ) ;var wsc = document . createElement ( ’ s c r i p t ’ ) ;

8 wsc . s r c = ’ http :// s t a t i c . dermandar . com/ j s /embed . j s ?v=1.5 ’ ;wsc . type = ’ t ex t / j a v a s c r i p t ’ ; wsc . async = true ;

10 var s s c = document . getElementsByTagName ( ’ s c r i p t ’ ) [ 0 ] ;s s c . parentNode . i n s e r tB e f o r e (wsc , s s c ) ;

12 }) ( ) ;</s c r i p t >

Die Navigation, sowie das Mauselement sind auf allen Unterseiten gleich und werdendeshalb, wie das News-Element, von einem Ordner geladen.

2.4.6 Kinderfreundlichkeit

Im Menüpunkt "Kinderbereich" werden hauptsächlich kinderspezifische Inhalte undSpiele angezeigt, um die Webseite des Gruberwegs auch für jüngere Besucher attraktivzu machen.

Zusätzlich sind auf der gesamten Webseite Mäuse verteilt, welche mit Sprechblasenkinderspezifische Inhalte, auch außerhalb des Kinderbereichs wiedergeben. Vier solcherMauselemente haben zusätzlich eine schmiedeeiserne Maus eingebunden. Durch klickenkönnen diese schmiedeeiserne Mäuse "gefunden" werden. Wenn alle vier Mäuse gefun-den worden sind, gibt es im Kinderbereich Mausvorlagen zum Ausmalen, als kleinesGeschenk.

Jede schmiedeeiserne Maus hat einen Button, bei dem sich beim Klick ein Warn-fenster öffnet und einen Cookie setzt. Dadurch wird dem Besucher mitgeteilt, dass dieMaus gefunden worden ist. Jede Maus legt beim Gefunden werden einen Cookie an.

22

2.4 Umsetzung

Figure 2.12: Einstellung von Photoshop beim Erstellen der Panoramen

2 <input type="button" c l a s s="mausgefunden" value ="Maus gefunden" on c l i c k="Set_Cookie ( ’ c134 ’ , ’ t rue ’ , 30 , ’ / ’ , ’ ’ , ’ ’ ) ;

4 a l e r t ( ’Du hast gerade e ine Maus gefunden ’ ) ;l o c a t i o n . r e l oad ( ) ;

6 ">

Unter der Navigation sieht man den aktuellen Vortschritt aller gefundenen Mäuse,mit einer Erklärung, wie das Spiel funktioniert. Javascript stellt fest wieviele Cookiesgesetzt worden sind. Wenn alle vier Cookies auf "true" sind bedeutet das, dass alleMäuse gefunden worden sind und das Geschenk nun im Kinderbereich angezeigt wird.

23

2.5 Standardisierung


2.5.1 Browserkompatibilität

In der Entwicklung des Internet sind Browersupdates essentiell. Mit diesen können Bugsund Schwachstellen gefixt werden und Benutzer vor Betrügern geschützt werden. Leiderverwenden viele Benutzer eine veraltete Software welches zu vielen Problemen führenkann. Neben der Tatsache, dass neue Technologien nicht funktionieren, muss außerdemein erheblicher Zeitaufwand zur Anpassung an alte Browser eingeplant werden.

IE5 und IE6 sind trotz ihres Alters noch immer im Umlauf. Diese Browser verwendenandere Positionsangaben als die heutigen. Um diese anzupassen wird ein CSS-Fileeingebunden, welches nur von diesen ausgeführt wird. Damit kommen wir zu einereinigermaßen zufriedenstellendem Ergebnis.

2.5.2 Anpassung für Suchmaschinen

Große Suchmaschinen wie Google durchsuchen täglich mittels Crawler, also Programmedie Internetseiten scannen, das Internet. Die Suchreihenfolge von Google hängt von sehrvielen Faktoren ab. Neben Links zu der Seite und Anzahl der Besucher ist es besonderswichtig die Überschriftentags <h1> <h2> und <h3> zu verwenden. Mittels Typo3kann außerdem die Linkunterschrift in der Google suche gestaltet werden.

Wenn Suchmaschinen Webseiten interpretieren ist es sehr wichtig, dass deren HTML-Files valide sind. Invalide Webseiten können durch Suchmaschinen rückgestuft oderfalsch interpretiert werden.

RealURL

RealURL ist eine Extension, die kriptische URLs, wie beispielsweise"http://gruberweg.at/startseite.html?id=39...", in wunderschön anzusehende URLs formt,wie "http://gruberweg.at/startseite.html". "Google und andere Suchanbieter arbeitenmit diesen schön anzusehenden URLs besser und effektiver. Sie können diese einfachbesser interpretieren und auslesen."1 Aber auch für Menschen sind diese URLs einfacherzu lesen.

1www.wtm-online.de

24


2.5.3 Validierung

Die W3C Organisation ist ein Verein welcher sich um die Standardisierung im Internetkümmert. HTML-Definitionen sind nicht einheitlich definiert und können von jedemBrowserhersteller anders interpretiert werden. Mit einem HTML-Validator kann dieeigene Seite gecheckt werden, ob Fehler oder Warnungen auftreten. Valide Webseitenhaben also keine gravierenden Fehler und sollten mit jedem Browser sinnvoll genutztwerden können.

Bis auf einen kleinen Fehler in der TT News Extension schafften wir es schlussendlichdie Webseite valide zu bekommen.

25

3

Bedienungsanleitung

In diesem Kapitel wird ein kurzer Überblick über die Wartung von Inhalten mittels demTYPO3 Backend gegeben. Insbesondere liegt das Hauptaugenmerk auf dem Hinzufügenund Ändern von Inhalten, dem Hochgeladen und Anpassen von Bildern sowie demErstellen von News.

3.1 Allgemeines zur Wartung der Inhalte

TYPO3 enthält ein Backend, das der Pflege der Webseite dient und ein Frontend, dasdie Website selbst darstellt.

Im TYPO3-Backend wird die Webseite verwaltet. Dort wird TYPO3 konfiguriert,werden Inhalte erstellt und bearbeitet. Ein Editor erlaubt es Anwendern ohne HTML-Kenntnisse, redaktionelle Arbeit zu erledigen1.

Im Backend befindet sich, unter "Web/Seite", der Seitenbaum der Webseite. Dieserzeigt im Frontend an, wie die Menüstruktur aufgebaut ist.

3.1.1 Einloggen

Man kann sich mit zwei verschiedenen Benutzern anmelden:•als Admin mit vollen Adminrechten•als Redakteur mit beschränkten Rechten

1http://de.wikipedia.org/wiki/TYPO3

26

3.2 Hinzufügen und Ändern der Inhaltselementen

Figure 3.1: Ansicht des Logins


Unter dem Punkt (1) "Web/Seite" gelangt man zu dem Seitenbaum der Webseite. Umeinen Inhalt hinzufügen zu können klickt man auf die Seiten in der, der Inhalt (2) einge-fügt werden soll. Auf der Seite sieht man vier Bereich (3), die mittels CSS die Positionin der Webseite angeben. In der gewünschten Position in der, der Inhalt auf der Web-seite erscheinen soll, kann oben ein neues Inhaltselement erstellt werden.

Alle der vier Inhaltsbereiche "Links", "Normal", "Rechts" und "Rand" können In-haltselemente beinhalten. Je nach Template werden diese Inhalte an den definiertenPositionen im Frontend ausgegeben.

3.2.1 Arten der Inhaltselemente

Man kann verschieden Typen des Inhaltselementes auswählen, aber die drei wichtigstensind:•Text•Text und Bildern•nur Bilder

27


Figure 3.2: Übersicht des Backends

Figure 3.3: Übersicht der Elemente

28

3.3 Hochladen von Bildern

Figure 3.4: Hinzufügen eines Textelements

3.2.2 Das Inhaltselement vom Typ "Text"

Im Header wird der Titel (1) des Inhaltselementes angegeben. Im Texteditor (2) kannder Inhalt, der auf der Webseite erscheinen soll, geschrieben werden. Dieser kann mitden programmierten, extra für die Seite angepassten Schriften gestylt werden.


Unter dem Punkt "Web/Dateiliste" (1) gelangt man zu dem Seitenbaum der Webseite.Nun wählt man aus in welchem Ordner (2) das Bild hochgeladen werden soll, man klicktdiesen an und es öffnet sich der Ordner. Oben befindet sich der Link (3) zum Hochladenin das Fileadminverzeichnis.

3.3.1 Bilder anpassen

Ein großer Vorteil von TYPO3 ist es, dass man nun direkt im Content ManagementSystem die Höhe und Breite der Bilder anpassen kann, und diese nicht mehr wie zuvorin Photoshop oder anderen Programmen zuerst, vor dem Hochladen, zuschneiden muss.

29


Figure 3.5: Hochladen eines Bildes

Figure 3.6: Bilder anpassen

30

3.4 Warten des Newssystems

Figure 3.7: News anpassen

Im Inhaltselement "Text und Bilder" bzw "nur Bilder", kann man unter dem Router"Erscheinungsbild": die Größe und Höhe des Bildes anpassen (1) und die Position (2)des Bildes bestimmen, wie hier z.B:. in der Mitte des Inhaltselement

3.4 Warten des Newssystems

3.4.1 Grundlage

Unter dem Punkt "Web/Seite" (1) gelangt man wieder zum Seitenbaum der Web-seite. Unter dem Punkt "News" (2) befindet sich der Ordner "News-Daten", klicktman diesen an öffnet sich der Ordner mit den News-Daten. Hier (3) kann nun ein neuesNews-Element erstellt werden. Das News-Element ist ähnlich wie das Inhaltselementaufgebaut.

31

3.5 Hinzufügen der Panoramen

Figure 3.8: Bilder anpassen

3.4.2 Erstellung eines Beitrages

Im News-Element kann man den Titel (1) des Elementes angeben, welcher in der Web-seite über dem Bild steht. Es kann auch noch ein "Subheader" (2) angegeben werden,in dem nähre Information zu den News stehen können Im Texteditor(3) kann der Inhaltdes News-Elementes geschrieben werden


Um neue Panoramen der Seite hinzufügen zu können, müssen zuerst Fotos gemacht wer-den. Mit möglichst kleiner Brennweite und Stativ werden so viele Fotos gemacht um einevolle 360� Ansicht zu bekommen. Mittels Photoshop (Bild 2.12) werden danach diese Fo-tos zusammengefügt, beschnitten und bearbeitet. Wichtig ist, den Übergang der einzel-nen Bilder möglichst unsichtbar zu machen. Nach dem Zuschnitt wird das Panoramaals JPG exportiert. Wenn möglich soll das JPG-File 8000px breit sein, da unser Onlin-eanbieter Bilder bis zu dieser Größe unterstützt. Auf "www.dermandar.com" muss nun

32


Figure 3.9: Übersicht der gespeicherten Bilder auf Dermandar

ein Benutzer angelegt werden.Mit diesen Benutzer können Bilder in eine Galerie(Bild 3.9) hochgeladen werden.

Nach dem Klick auf ein Bild kann unter "Einbinden"(Bild 3.10) der HTML-Code diesesBild in die Zwischenablage gespeichert werden. Dieser Code muss nun als HTML-Element auf der Seite "Virtueller Tour" in die entsprechende Unterseite eingepflegt(Bild3.11) werden. Nun verlinkt die Navigation der "Virtuellen Tour" zum richtigen Panorama.

Die Navigation der Virtuellen Tour ist die Karte mit den Pfeilen. Jeder Pfeil ver-linkt auf eine Unterseite. Auf diesen Unterseiten die schon angelegt worden sind mussdieser Kopierter HTML-Code eingefügt werden. Dermandar bietet auch die MöglichkeitPanoramen die keine 360� besitzen darzustellen.

33


Figure 3.10: Kopieren des Quellendes für das Panorama

Figure 3.11: Einfügen im Backend

34

4

Persönliche Erfahrungen

In diesem Kapitel werden die Erfahrungen beschrieben, die im Projektjahr gemachtwurden. Allgemein kann gesagt werden, dass in diesem Projektjahr sehr viel über dasDesignen einer Webseite, in HTML, CSS und TYPO3 dazugelernt wurde.

4.1 Design

Anfangs hatten wir große Schwierigkeiten beim Gestalten eines Design, welches passendfür den Friedensweg aber auch für Kinder sein sollte, da wir sehr wenig Erfahrung imDesign Bereich hatten. Hier ist es zum Großteil der Hilfe durch den Projektbetreuerszu verdanken, der uns die Grundlagen im Design, Layout und der Schriftverwendungnäher gebrachte hat.

Für uns war es eine große Herausforderung dieses Design zu entwerfen, anfangssahen die Entwürfe kindlich und unstimmig aus, aber nach einigen Stunden lernt wirdie Farben, Schatten und Schriften richtig einzusetzen.

Nach vielen Recherchen im Internet und vielen weiteren Entwürfen wurde schließlich,nach einigermaßen großem Zeitaufwand, ein kindergerechtes und ansprechendes Designentwickelt.

4.2 TYPO3

Um uns in TYPO3 einzuarbeiten und es kennen zu lernen arbeiteten wir mit Hilfe einesTutorials. Schon bald arbeiteten wir nicht mehr lokal sondern auf dem Webspace.

35

4.3 Kundenkontakt

Da wir TYPO3 zu anfangs nicht kannte benötigten wir etwas Einarbeitungszeit indie neue Programmiersprache. Mit Hilfe von verschiedenen Tutorials und Google lerntenwir die Programmiersprache näher kennen. Aufgrund der in der Schule erlernten Pro-grammiersprachen (HTML und CSS) viel es uns leichter eine neue Programmiersprachezu verstehen. Aber trotzdem gestaltete sich der Weg bis zu der fertigen Webseite alssehr mühsam.

4.3 Kundenkontakt

Da wir unser Projekt für eine Gemeinschaft gestalten, war der Kundenkontakt einwichtiges Thema in unserer Diplomarbeit.

Ziemlich am Anfang des Projektjahres trafen wir und mit den Kunden und bekameneine Führung im Gruberhaus und auf dem Friedensweg.

Wir hatten keine konkrete Anweisungen zum Design der Webseite, wir waren freiim gestalten der Seite. Nachdem wir ihnen das fertige Design vorgestellt haben, wurdedie Anmerkung gemacht, dass das Design kinderfreundlicher sein sollte, es ihnen aberansonsten gut gefällt. Nach dem das Design kinderfreundlicher gestaltet wurde, fandam 20.01.2012 die Designabnahme statt. Am Freitag, den 27.04.2012 fand schließlichdie endgültige Projektabnahme statt.

Für uns war es eine gute Möglichkeit zu lernen wie man mit Kunden umgeht undkommuniziert und wie man auf ihre Wünsche eingeht. Ich denke, dass diese Erfahrungin unserer Zukunft sehr hilfreich sein wird.

Aufteilung der Aufgaben

In unserem Projekt gab es keine wirkliche Aufteilung. Es wurde jede Woche eine ToDo-Liste gemacht, welche Aufgaben bis zu der nächsten Woche erledigt werden müssen, diedann zwischen uns zwei aufgeteilt wurden.

Ich finde das, dass ein gutes System war, da man am Anfang des Projektjahres nochnicht weiß was auf einem zukommt und welche Aufgaben erledigt werden müssen. MitHilfe dieser Aufteilung waren wir immer auf aktuellsten Stand der Dinge.

36

Dominik Knoll

InformationenStraße Handel-Mazzetti Str 14Anschrift 4850 TimelkamEmail [email protected] 03.06.1993Geburtsort Vöcklabruck

Schulbildung1999-2003 Volksschule Timelkam2004-2007 Hauptschule Vöcklabruckseit 2007 HTL Braunau

Praktikas2009 Abatec Electronics2010 Linsinger Maschinenbau2011 LKH Vöcklabruck

Table 5.2: Dominik Knoll

39

Datum Tätigkeit Schule Freizeit23.09.11 Projektbesprechung 8 029.09.11 Vorbereitung für das Treffen mit Kunden 3 230.09.11 Treffen mit dem Auftraggeber 8 006.10.11 Design 3 007.10.11 Design/begin in TYPO3 einzuarbeiten (Tutorial) 8 013.10.11 Design 3 214.10.11 endgültigenes Design, Diplompräsentation 8 020.10.11 Design/Diplompräsentation 3 421.10.11 Präsentation, endgültiges Design besprochen, TYPO3 8 027.10.11 Tutorial TYPO3 3 328.10.11 Tutorial TYPO3 8 029.10.11 Tutorial TYPO3 2 003.11.11 TYPO3-Backend 0 1,504.11.11 CSS, Unterseite fertiggestellt 8 006.11.11 TYPO3/erste Unterseite 3 010.11.11 Navigation, Tutorial TYPO3 3 211.11.11 Navigation, Telefonat mit Frau Priller 8 017.11.11 TYPO3/Sitelinks 3 218.11.11 kinderfreundlicheres Design, TYPO3 8 019.11.11 kinderfreundlicheres Design 0 220.11.11 kinderfreundlicheres Design, TYPO3 3 023.11.11 kinderfreundlicheres Design 0 3,524.11.11 kinderfreundlicheres Design, TYPO3 3 425.11.11 kinderfreundlicheres Design, TYPO3 8 001.12.11 kinderfreundlicheres Design 3 202.12.11 Tag der offenen Tür in der HTL 8 015.12.11 TYPO3/Menü 3 416.12.11 TYPO3-Backend 8 022.12.11 TYPO3-Backend 3 023.12.11 TYPO3-Backend 8 012.01.12 TYPO3-Backend 3 012.01.12 nochmals kinderfreundlicheres Design, TYPO3 8 019.01.12 Vorbereitung für das Meeting mit den Kunden 3 220.01.12 Treffen und Designabnahme 8 026.01.12 Highslide 3 2

Table 5.3: Tätigkeiten Kathrin Graf Projekttagebuch 1

40

Datum Tätigkeit Schule Freizeit27.01.12 Highslide, realurl 8 002.02.12 Highslide, realurl 3 303.02.12 Highslide, realurl 8 009.02.12 Highslide, realurl 3 210.02.12 Fehlersuche realurl, Highslide in TYPO3 einbinden 8 016.02.12 Einbindung Highslide in TYPO3 3 017.02.12 Informationstag der HTL 8 026.02.12 slide, jQuery; Anpassung 0 201.03.12 Slide, jQuery einbinden 3 402.03.12 Texteinbindung 8 008.03.12 TYPO3-Backend 2 009.03.12 Untermenü soll immer angezeigt werden 8 015.03.12 ´Maps einbinden, Untermenü, Fehler suche 3 419.03.12 Quick-maps einbinden, verbessern 3 025.03.12 Untermenü ständig anzeigen 2 026.03.12 Untermenü ständig anzeigen 2 029.03.12 Untermenü ständig anzeigen 3 430.03.12 Highslide ändern (no scrollbar) 8 002.04.12 alles, Problemlösungen, texte einbinden 0 603.04.12 Probleme lösen 0 407.04.12 probleme lösen, kleinigkeiten verbesser 0 210.04.12 kleinigkeiten lösen 2 012.04.12 Internet Explorer Anpassung 3 413.04.12 Internet Explorer Anpassung 8 019.04.12 Fertigstellung der Webseite 3 520.04.12 Fertigstellung der Webseite 8 326.04.12 Fertigstellung, Vorbereitung fürs Meeting 3,5 027.04.12 Meeting mit der Gemeinschaft 8 003.05.12 Dokumentation 3 204.05.12 Dokumentation 8 210.05.12 Dokumentation 3 011.05.12 Dokumentation 8 212.05.12 Dokumentation 3 013.05.12 Dokumentation 0 314.05.12 Dokumentation 9 015.05.12 Dokumentation 0 616.05.12 Dokumentation 0 6

Table 5.4: Tätigkeiten Kathrin Graf Projekttagebuch 2

41

Datum Tätigkeit Schule Freizeit23.09.11 Projektbesprechung 8 029.09.11 Vorbereitung für das Treffen mit Kunden 3 030.09.11 Treffen mit dem Auftraggeber 8 006.10.11 Design 3 007.10.11 Design/begin in TYPO3 einzuarbeiten (Tutorial) 8 013.10.11 Design 3 314.10.11 endgültigenes Design, Diplompräsentation 8 020.10.11 Design/Diplompräsentation 3 421.10.11 Präsentation, endgültiges Design besprochen, TYPO3 8 027.10.11 Tutorial TYPO3 3 228.10.11 Tutorial TYPO3 8 229.10.11 Tutorial TYPO3 2 103.11.11 TYPO3-Backend 0 304.11.11 CSS, Unterseite fertiggestellt 8 006.11.11 TYPO3 und Unterseiten 3 010.11.11 Navigation 3 011.11.11 Navigation, Telefonat mit Frau Priller 8 017.11.11 TYPO3/Sitelinks 3 218.11.11 kinderfreundlicheres Design, 8 020.11.11 kinderfreundlicheres Design, 3 224.11.11 kinderfreundlicheres Design, 3 425.11.11 kinderfreundlicheres Design, 8 001.12.11 kinderfreundlicheres Design 3 202.12.11 Tag der offenen Tür in der HTL 8 015.12.11 Menü 3 016.12.11 TYPO3-Backend 8 022.12.11 TYPO3-Backend 3 023.12.11 TYPO3-Backend 8 012.01.12 TYPO3-Backend 3 012.01.12 nochmals kinderfreundlicheres Design, TYPO3 8 019.01.12 Vorbereitung für das Meeting mit den Kunden 3 220.01.12 Treffen und Designabnahme 8 026.01.12 Highslide 3 2

Table 5.5: Tätigkeiten Dominik Knoll Projekttagebuch 1

42

Datum Tätigkeit Schule Freizeit27.01.12 Virtuelle Tour 8 002.02.12 Diverses, Fehlerkorrektur 3 303.02.12 TYPO3 Template, realurl 8 009.02.12 Gestalten der Startseite 3 210.02.12 Fehlersuche realurl, Highslide in TYPO3 einbinden 8 016.02.12 Einbindung Highslide in TYPO3 3 017.02.12 Informationstag der HTL 8 026.02.12 slide, jQuery; Anpassung 0 201.03.12 Slide, jQuery einbinden 3 402.03.12 Texteinbindung 8 008.03.12 TYPO3-Backend 2 009.03.12 TYPO3-Backend 8 015.03.12 Untermenü, Fehler suche 3 419.03.12 Untermenü 3 025.03.12 Untermenü 2 026.03.12 CSS Adaption 2 029.03.12 Struktur der Inhalte 3 030.03.12 Highslide ändern (no scrollbar) 8 302.04.12 Problemlösungen, Texte einbinden 0 607.04.12 probleme lösen, kleinigkeiten verbesser 0 210.04.12 kleinigkeiten lösen 2 012.04.12 Internet Explorer Anpassung 3 413.04.12 Internet Explorer Anpassung 8 019.04.12 Fertigstellung der Webseite 3 520.04.12 Fertigstellung der Webseite 8 327.04.12 Meeting mit der Gemeinschaft 8 003.05.12 Dokumentation 3 204.05.12 Dokumentation 8 210.05.12 Dokumentation 3 011.05.12 Dokumentation 8 212.05.12 Dokumentation 3 313.05.12 Dokumentation 0 314.05.12 Dokumentation 9 915.05.12 Dokumentation 0 1016.05.12 Dokumentation 0 9

Table 5.6: Tätigkeiten Dominik Knoll Projekttagebuch 2

43

6

Quellen

1 www.fxgruber.at9 www.w3tech.com/technologies/overview/contentmanagement/all13 www.jquery.com14 www.dennisreimann.de/blog/typo3-aufsetzen-setup14 www.mittwald.de14 www.typo3.org/about/typo3-the-cms/system-requirements21 www.dermandar.de26 www.wikipedia.de/wiki/TYPO3

Table 6.1: Dominik Knoll

44

diplomarbeit gruberweg

Documents