Diplomarbeit - Infopanel - Dokumentation v3.0

DOKUMENTATION

Infopanel - Diplomarbeit

Version 3.0

Diplomarbeit im Rahmen der Matura des Schuljahres 2006/2007

an der HTL Wels Ausbildungszweig System- und Informationstechnik.

Betreuer:

DI Mag. Franz Reitinger [email protected]

eingereicht von:

Christian Bartl Raiffeisenstr.5 4600 Thalheim bei Wels [email protected]

Thomas Fischl Gölsdorfstr.25 4600 Wels [email protected]

Sebastian Hochgatterer Auf der Lindn 5 4312 Ried/Riedmark [email protected]

Dokumentation erstellt von:

Christian Bartl Zuletzt geändert am:

14. Oktober 2012 Abgabetermin:

11.Mai 2007

Inhaltsverzeichnis

3 von 151

Inhaltsverzeichnis Inhaltsverzeichnis ....................................................................................................................... 3 Abbildungsverzeichnis ................................................................................................................ 8 Tabellenverzeichnis .................................................................................................................. 11 1 Motivation ....................................................................................................................... 12 2 Projektorganisation ........................................................................................................ 13

2.1 Zieldefinition ............................................................................................................ 13 2.2 Projektbeschreibung ................................................................................................. 13 2.3 Pflichtenheft ............................................................................................................. 13

2.3.1 Funktionale Anforderungen ............................................................................. 13 2.3.1.1 Supplierplan ................................................................................................. 13 2.3.1.2 Sprechstunden .............................................................................................. 13 2.3.1.3 Lehrersuche .................................................................................................. 14 2.3.1.4 Zugverbindungen ......................................................................................... 14 2.3.1.5 Internetzugang .............................................................................................. 14 2.3.1.6 HTL Wels ..................................................................................................... 14 2.3.1.7 Gebäudeplan ................................................................................................. 14 2.3.1.8 Buffet ............................................................................................................ 14 2.3.1.9 News ............................................................................................................. 15 2.3.1.10 Terminkalender ........................................................................................ 15

2.3.2 Nichtfunktionale Anforderungen ..................................................................... 15 2.3.2.1 Untis ............................................................................................................. 15 2.3.2.2 Schulhomepage ............................................................................................ 15 2.3.2.3 ÖBB-Zugverbindungen ................................................................................ 15 2.3.2.4 Novell-User .................................................................................................. 15

2.3.3 GUI-Richtlinien ................................................................................................ 15 2.4 Ressourcenplan ......................................................................................................... 16

2.4.1 Hardware .......................................................................................................... 16 2.4.1.1 Tastatur - INTI-4/PS2 ................................................................................... 16 2.4.1.2 Industrie-PC - Power Panel .......................................................................... 17 2.4.1.3 Einstellungen – Power Panel ........................................................................ 18

2.4.2 Software ........................................................................................................... 18 2.4.2.1 Apache HTTP Server ................................................................................... 18 2.4.2.2 Apache Tomcat ............................................................................................ 19 2.4.2.3 Typo3 ........................................................................................................... 19

2.4.2.3.1 Extensions .............................................................................................. 19 2.4.2.4 Grafiksoftware .............................................................................................. 19

2.4.2.4.1 GD Library ............................................................................................. 19 2.4.2.4.2 ImageMagick und GraphicsMagick ....................................................... 19

2.4.2.5 Joomla! ......................................................................................................... 20 2.4.2.6 MySQL ......................................................................................................... 20 2.4.2.7 Zugangsdaten ............................................................................................... 20

2.4.2.7.1 Joomla .................................................................................................... 20 2.4.2.7.2 Typo3 ..................................................................................................... 20 2.4.2.7.3 MySQL ................................................................................................... 20 2.4.2.7.4 FTP ......................................................................................................... 20 2.4.2.7.5 CVS ........................................................................................................ 21

2.4.2.8 Versionsnachweis ......................................................................................... 21 2.4.3 Technologiereferenz ......................................................................................... 21

2.4.3.1 Java ............................................................................................................... 21

Inhaltsverzeichnis

4 von 151

2.4.3.2 Servlet ........................................................................................................... 22 2.4.3.3 JSP ................................................................................................................ 23 2.4.3.4 JSTL ............................................................................................................. 23 2.4.3.5 XML ............................................................................................................. 24 2.4.3.6 HTML ........................................................................................................... 24 2.4.3.7 CSS ............................................................................................................... 25 2.4.3.8 JavaScript ..................................................................................................... 26 2.4.3.9 PHP ............................................................................................................... 26 2.4.3.10 SQL .......................................................................................................... 27

2.4.4 ÖBB-Abfahrtstafeln ......................................................................................... 27 2.4.4.1 Beschreibung ................................................................................................ 28 2.4.4.2 Links ............................................................................................................. 29

2.5 Projektverlauf ........................................................................................................... 29 2.6 Zeittafel .................................................................................................................... 30

2.6.1 Unnötige Menüpunkte - 03.10.2006 ................................................................ 30 2.6.2 Nahverkehr 2010 - 23.10.2006 ......................................................................... 30 2.6.3 Erstellen des Gehäuses - 24.10.2006 ................................................................ 30 2.6.4 Gespräch mit Prof. Sander - 13.11.2006 .......................................................... 31 2.6.5 Designabnahme - 27.11.2006 ........................................................................... 31 2.6.6 Suchenfunktion - 15.01.2007 ........................................................................... 31

2.7 Dokumentation der Arbeitsstunden .......................................................................... 32 3 Infopanel ......................................................................................................................... 39

3.1 Funktionen ................................................................................................................ 39 3.1.1 Supplierplan ..................................................................................................... 39 3.1.2 Sprechstunden .................................................................................................. 40 3.1.3 Lehrersuche ...................................................................................................... 40 3.1.4 Verkehrsmittel .................................................................................................. 42 3.1.5 Internetzugang .................................................................................................. 43 3.1.6 HTL Wels ......................................................................................................... 43 3.1.7 Gebäudeplan ..................................................................................................... 45 3.1.8 Buffet ................................................................................................................ 45 3.1.9 News ................................................................................................................. 46 3.1.10 Terminkalender ................................................................................................ 46

3.2 Design und Struktur ................................................................................................. 47 3.2.1 Design ............................................................................................................... 47

3.2.1.1 Vom Entwürf zum Endergebnis ................................................................... 47 3.2.1.2 Aufteilung der Menüpunkte ......................................................................... 49 3.2.1.3 Farben ........................................................................................................... 50 3.2.1.4 Größenbeschränkungen ................................................................................ 50

3.2.2 Entscheidungskriterien für den Einsatz des CMS „Typo3“ ............................. 51 3.2.3 Konfiguration von Typo3 ................................................................................. 52 3.2.4 Ändern von Hauptmenüpunkten ...................................................................... 52 3.2.5 Hinzufügen von Seiten ..................................................................................... 53 3.2.6 Verzeichnisstruktur .......................................................................................... 54

3.3 Arbeiten mit Typo3 .................................................................................................. 55 3.3.1 Hauptseite ......................................................................................................... 56

3.3.1.1 HTML-Template .......................................................................................... 56 3.3.1.2 CSS ............................................................................................................... 57 3.3.1.3 TypoScript .................................................................................................... 58

3.3.2 Unterseite mit Menü ......................................................................................... 60 3.3.2.1 HTML-Template .......................................................................................... 60

Inhaltsverzeichnis

5 von 151

3.3.2.2 CSS ............................................................................................................... 61 3.3.2.3 JavaScript ..................................................................................................... 61 3.3.2.4 TypoScript .................................................................................................... 62

3.3.3 Unterseite ohne Menü ...................................................................................... 64 3.3.3.1 HTML-Template .......................................................................................... 64 3.3.3.2 CSS ............................................................................................................... 65 3.3.3.3 JavaScript ..................................................................................................... 65 3.3.3.4 TypoScript .................................................................................................... 66

3.3.4 Content-Seite .................................................................................................... 67 3.3.4.1 HTML-Template (with menu) ..................................................................... 67 3.3.4.2 HTML-Template (without menu) ................................................................ 68 3.3.4.3 CSS ............................................................................................................... 68

4 Typo3 ............................................................................................................................... 70 4.1 Web Content Management System .......................................................................... 70

4.1.1 Begriffsdefinition CMS-System ....................................................................... 70 4.1.2 Web CMS ......................................................................................................... 71 4.1.3 Markt-Übersicht (Web CMS – Systeme) ......................................................... 72 4.1.4 Statischer versus dynamischer Webauftritt ...................................................... 75

4.2 Das CMS Typo3 ....................................................................................................... 75 4.2.1 Vorteile ............................................................................................................. 75 4.2.2 Nachteile ........................................................................................................... 76 4.2.3 Systemvoraussetzungen ................................................................................... 76 4.2.4 Wichtige Elemente ........................................................................................... 76

4.2.4.1 Frontend, Backend und Install Tool ............................................................. 76 4.2.4.2 Page, Content und Record ............................................................................ 77 4.2.4.3 Templates und TypoScript ........................................................................... 77 4.2.4.4 Page-ID ......................................................................................................... 78 4.2.4.5 Rich Text Editor ........................................................................................... 78 4.2.4.6 Extensions .................................................................................................... 78 4.2.4.7 Workspace .................................................................................................... 78 4.2.4.8 Userverwaltung ............................................................................................ 79 4.2.4.9 Workflow ..................................................................................................... 79

4.3 Installation ................................................................................................................ 79 4.4 Konfiguration ........................................................................................................... 81 4.5 Backend .................................................................................................................... 88

4.5.1 Elemente und Symbole des Backends .............................................................. 88 4.5.1.1 Aufbau .......................................................................................................... 88 4.5.1.2 Menüstruktur ................................................................................................ 89 4.5.1.3 Kontextmenü ................................................................................................ 92 4.5.1.4 Symbole ........................................................................................................ 94

4.5.2 Login/Logout .................................................................................................... 95 4.5.3 Löschen des Caches ......................................................................................... 97 4.5.4 Pages (Seiten) und Records .............................................................................. 97

4.5.4.1 Arten von Records und Pages ...................................................................... 97 4.5.4.1.1 Records für die Webseite ....................................................................... 97 4.5.4.1.2 Records für einzelne Pages .................................................................... 98 4.5.4.1.3 Arten von Pages ..................................................................................... 98

4.5.4.2 Anlegen einer Page ....................................................................................... 99 4.5.4.3 Löschen einer Page ..................................................................................... 100 4.5.4.4 Bearbeiten einer Page ................................................................................. 101 4.5.4.5 Kopieren einer Page ................................................................................... 102

Inhaltsverzeichnis

6 von 151

4.5.4.6 Verschieben einer Page .............................................................................. 103 4.5.5 Content (Inhalt) .............................................................................................. 104

4.5.5.1 Arten von Content ...................................................................................... 104 4.5.5.2 Anlegen von Content .................................................................................. 105 4.5.5.3 Löschen von Content .................................................................................. 106 4.5.5.4 Bearbeiten von Content .............................................................................. 107 4.5.5.5 Kopieren von Content ................................................................................ 107 4.5.5.6 Verschieben von Content ........................................................................... 107

4.5.6 Anlegen eines Templates ............................................................................... 108 4.5.7 Verwalten von Dateien ................................................................................... 110 4.5.8 Verwalten von Benutzern ............................................................................... 111

4.6 Extension ................................................................................................................ 113 4.6.1 Extensions verwalten ...................................................................................... 113

4.6.1.1 Extension installieren ................................................................................. 114 4.6.1.2 Extension deinstallieren ............................................................................. 115

4.6.2 Inline Frame ................................................................................................... 116 4.6.2.1 Inline Frame – Inhalt anlegen ..................................................................... 117

4.7 TypoScript .............................................................................................................. 117 4.7.1 Syntax ............................................................................................................. 118

4.7.1.1 Zuweisungsoperator ................................................................................... 118 4.7.1.2 Löschoperator ............................................................................................. 118 4.7.1.3 Kopieroperator ........................................................................................... 119 4.7.1.4 Punktoperator ............................................................................................. 119 4.7.1.5 Konstante .................................................................................................... 119 4.7.1.6 Kommentar ................................................................................................. 120 4.7.1.7 Beispielcode ............................................................................................... 120

4.7.2 Aufbau einer einfachen Webseite .................................................................. 121 4.7.3 Marker ............................................................................................................ 124 4.7.4 Frameset ......................................................................................................... 127 4.7.5 GIFBuilder ..................................................................................................... 130 4.7.6 TMenu ............................................................................................................ 132 4.7.7 GMenu ............................................................................................................ 134 4.7.8 Content ........................................................................................................... 137

4.7.8.1 Header ........................................................................................................ 138 4.7.8.2 Content ....................................................................................................... 139

4.7.9 Konstante ........................................................................................................ 140 4.7.10 Beispiel ........................................................................................................... 141

4.7.10.1 HTML-Template .................................................................................... 141 4.7.10.2 CSS ......................................................................................................... 142 4.7.10.3 TypoScript-Template ............................................................................. 142

5 Erfahrungsbericht ........................................................................................................ 145 5.1 Kioskmodus des Internet Explorers ....................................................................... 145 5.2 Verwendung von relativen Pfadangaben im Webbereich ...................................... 145 5.3 Favicon ................................................................................................................... 145 5.4 GDLib erzeugt keine Gif-Grafiken ........................................................................ 145 5.5 Typo3 + “die() function call” ................................................................................. 145 5.6 Typo3 + Umlaute werden nicht richtig dargestellt ................................................. 146 5.7 Typo3 + ImageMagick 4.2.9 .................................................................................. 146 5.8 Typo3 + Proxyserver .............................................................................................. 146 5.9 Typo3 + JavaScript in Links .................................................................................. 146 5.10 JSTL + Methoden ................................................................................................... 146

Inhaltsverzeichnis

7 von 151

5.11 WinCE + InternetExplorer + Proxyserver .............................................................. 147 6 Quellverzeichnis ........................................................................................................... 148

6.1 Enzyklopädie .......................................................................................................... 148 6.2 HTML ..................................................................................................................... 148 6.3 CSS ......................................................................................................................... 148 6.4 JSTL ....................................................................................................................... 148 6.5 CMS ....................................................................................................................... 148 6.6 Typo3 ..................................................................................................................... 148

Glossar ................................................................................................................................... 150 Eidesstattliche Erklärung ....................................................................................................... 151

Abbildungsverzeichnis Dokumentation - Infopanel

8 von 151

Abbildungsverzeichnis Abbildung 1 - INTI-4/PS2 ........................................................................................................ 16 Abbildung 2 - PowerPanel PP120 ............................................................................................ 17 Abbildung 3 - Abmessungen PowerPanel ................................................................................ 18 Abbildung 4 - Servlet ............................................................................................................... 22 Abbildung 5 - PHP-Funktionsweise ......................................................................................... 27 Abbildung 6 - ÖBB Abfahrtstafel ............................................................................................ 28 Abbildung 7 - ÖBB Abfahrtstafel - Fehlermeldung ................................................................. 29 Abbildung 8 - Funktion - Hauptseite ........................................................................................ 39 Abbildung 9 - Funktion - Supplierplan .................................................................................... 40 Abbildung 10 - Funktion - Sprechstunde ................................................................................. 40 Abbildung 11 - Funktion - Lehrersuche - Suche ...................................................................... 41 Abbildung 12 - Funktion - Lehrersuche - Suche - DropDown ................................................ 41 Abbildung 13 - Funktion - Lehrersuche ................................................................................... 42 Abbildung 14 - Funktion - Lehrersuche - Lehrerdetails .......................................................... 42 Abbildung 15 - Funktion - Verkehrsmittel ............................................................................... 43 Abbildung 16 - Funktion - Internetzugang ............................................................................... 43 Abbildung 17 - Funktion - HTL Wels - Direktion ................................................................... 44 Abbildung 18 - Funktion - HTL Wels - Sponsoren ................................................................. 44 Abbildung 19 - Funktion - HTL Wels - Fotogalerie ................................................................ 45 Abbildung 20 - Funktion - Gebäudeplan .................................................................................. 45 Abbildung 21 - Funktion - Buffet ............................................................................................ 46 Abbildung 22 - Funktion - News .............................................................................................. 46 Abbildung 23 - Funktion - Terminkalender ............................................................................. 47 Abbildung 24 - Typo3-Menüstruktur - Hauptmenü ................................................................. 52 Abbildung 25 - Typo3 - Shortcut ............................................................................................. 53 Abbildung 26 - Typo3-Menüstruktur ....................................................................................... 53 Abbildung 27 - Ordnerstruktur fileadmin/ ............................................................................... 55 Abbildung 28 - Screenshot Hauptseite ..................................................................................... 56 Abbildung 29 - Unterseite mit Menü ....................................................................................... 60 Abbildung 30 - Unterseite ohne Menü ..................................................................................... 64 Abbildung 31 - Typo3-Backend ............................................................................................... 76 Abbildung 32 - Typo3-Install Tool .......................................................................................... 77 Abbildung 33 - Typo3-Installation - Security Warnung .......................................................... 79 Abbildung 34 - Typo3-Installation - Step 1 ............................................................................. 80 Abbildung 35 - Typo3-Installation - Step 2 ............................................................................. 80 Abbildung 36 - Typo3-Installation - Step 3 ............................................................................. 81 Abbildung 37 - Typo3-Installation - Go .................................................................................. 81 Abbildung 38 - Typo3-Konfiguration - Error .......................................................................... 82 Abbildung 39 - Typo3-Konfiguration - Login ......................................................................... 82 Abbildung 40 - Typo3-Konfiguration - Error CheckReferer ................................................... 82 Abbildung 41 - Typo3-Konfiguration - Install Tool ................................................................ 83 Abbildung 42 - Typo3-Konfiguration - Configuration written ................................................ 83 Abbildung 43 - Typo3-Konfiguration - Login ......................................................................... 84 Abbildung 44 - Typo3-Konfiguration - doNotCheckRefere .................................................... 84 Abbildung 45 - Typo3-Konfiguration - Site name ................................................................... 85 Abbildung 46 - Typo3-Konfiguration - Check Image Magick ................................................ 85 Abbildung 47 - Typo3-Konfiguration - Check Image Magick 2 ............................................. 86 Abbildung 48 - Typo3-Konfiguration - Backend Warnungen ................................................. 86 Abbildung 49 - Typo3-Konfiguration - Update Reference Index ............................................ 86


9 von 151

Abbildung 50 - Typo3-Konfiguration - User Admin ............................................................... 87 Abbildung 51 - Typo3-Konfiguration - Change Password ...................................................... 87 Abbildung 52 - Typo3-Konfiguration - Backend ..................................................................... 88 Abbildung 53 - Typo3-Backend ............................................................................................... 88 Abbildung 54 - Backend-Login ................................................................................................ 95 Abbildung 55 - Typo3-Backend ............................................................................................... 96 Abbildung 56 - Löschen des Caches ........................................................................................ 97 Abbildung 57 - New ................................................................................................................. 99 Abbildung 58 - New Record .................................................................................................. 100 Abbildung 59 - New Page ...................................................................................................... 100 Abbildung 60 - Delete ............................................................................................................ 101 Abbildung 61 - Pagecontent ................................................................................................... 101 Abbildung 62 - Edit page properties ...................................................................................... 102 Abbildung 63 - Page properties .............................................................................................. 102 Abbildung 64 - Copy .............................................................................................................. 102 Abbildung 65 - Paste .............................................................................................................. 103 Abbildung 66 - Move page ..................................................................................................... 103 Abbildung 67 - Move element ............................................................................................... 104 Abbildung 68 - Move element 2 ............................................................................................ 104 Abbildung 69 - New content .................................................................................................. 105 Abbildung 70 - New Content element .................................................................................... 106 Abbildung 71 - Pagecontent ................................................................................................... 106 Abbildung 72 - Pagecontent ................................................................................................... 107 Abbildung 73 - Copy content ................................................................................................. 107 Abbildung 74 - Move content ................................................................................................ 108 Abbildung 75 - Template ....................................................................................................... 108 Abbildung 76 - Template - Sicherheitsabfrage ...................................................................... 108 Abbildung 77 - Template Tool ............................................................................................... 109 Abbildung 78 - Template Tool - Edit Template ..................................................................... 109 Abbildung 79 - List - Template .............................................................................................. 110 Abbildung 80 - Fileadmin ...................................................................................................... 110 Abbildung 81 - Fileadmin - Editor ......................................................................................... 111 Abbildung 82 - Fileadmin - Upload files ............................................................................... 111 Abbildung 83 - User Admin ................................................................................................... 112 Abbildung 84 - User Admin - New User ............................................................................... 112 Abbildung 85 - User Admin - New Group ............................................................................. 113 Abbildung 86 - User Admin - Auflistung von User und Gruppen ......................................... 113 Abbildung 87 - Extension Manger - Loaded extensions ........................................................ 114 Abbildung 88 - Extension Manger - Import extension .......................................................... 114 Abbildung 89 - Extension Manger - Extension import results ............................................... 115 Abbildung 90 - Extension Manger - Datenbank-Update ....................................................... 115 Abbildung 91 - Extension Manager - Install extensions ........................................................ 116 Abbildung 92 - Extension Manager - Remove extension ...................................................... 116 Abbildung 93 - Inline Frame Plugin ...................................................................................... 117 Abbildung 94 - Inline Frame Eigenschaften .......................................................................... 117 Abbildung 95 - TypoScript - Einfache Webseite - Screenshot .............................................. 122 Abbildung 96 - TypoScript - Einfache Webseite - HTML .................................................... 124 Abbildung 97 - TypoScript - Einfache Webseite - Ausgabe .................................................. 125 Abbildung 98 - TypoScript - Include Static ........................................................................... 125 Abbildung 99 - TypoScript - Frameset .................................................................................. 127 Abbildung 100 - TypoScript - GIFBuilder ............................................................................. 130


10 von 151

Abbildung 101 - TypoScript - HMenu ................................................................................... 133 Abbildung 102 - TypoScript - GMenu ................................................................................... 134 Abbildung 103 - TypoScript - Beispiel-Template 2 ............................................................... 141

Tabellenverzeichnis Dokumentation - Infopanel

11 von 151

Tabellenverzeichnis Tabelle 1 - Übersicht der Ressourcen ...................................................................................... 16 Tabelle 2 - Gegenüberstellung Endentwurf - Umsetzung ........................................................ 48 Tabelle 3 - Designentwürfe ...................................................................................................... 48 Tabelle 4 - CMS Matrix ........................................................................................................... 72 Tabelle 5 - Backendmodule ...................................................................................................... 90 Tabelle 6 - Kontextmenü .......................................................................................................... 92 Tabelle 7 - Symbole ................................................................................................................. 94 Tabelle 8 - Records für Webseiten ........................................................................................... 97 Tabelle 9 - Records für Pages .................................................................................................. 98 Tabelle 10 - Arten von Pages ................................................................................................... 98 Tabelle 11 - Arten von Content .............................................................................................. 104

Motivation Dokumentation - Infopanel

12 von 151

1 Motivation Die Digitalisierung und Technisierung von Informationsflüssen macht auch vor Österreichs Schulen und Universitäten nicht halt und so gibt es bereits in vielen dieser Einrichtungen so genannte Infopanels um sich einen Überblick über die Einrichtung zu verschaffen, anstehende Termine zu sichten oder einzelne Professoren und Lehrer im Gebäude zu finden. Die HTL Wels als eine der größten und gut ausgestattetsten HTLs in Oberösterreich möchte hier mit einer Diplomarbeit seine Vorreiterrolle weiter ausbauen und so sollen die wichtigsten organisatorischen Aufwände im Interesse von Lehrern, Schülern und auch Besuchern digital abrufbar und übersichtlich aufbereitet werden. Das Stichwort lautet „Infopanel“, ein von vielen anderen Einrichtungen, wie Museen oder Bahnhöfen, bekanntes System, bestehend aus einem PC mit Touchscreen und Tastatur. Dieses wird klar ersichtlich in der Aula der Schule aufgebaut und soll somit nicht nur Schülern und Lehrern sondern auch Besuchern und zu Sprechstunden kommenden Eltern zu Verfügung stehen um Informationen zu Lehrern, Supplierstunden, Sprechstunden und zur HTL Wels abrufen zu können. Der Nutzen des Infopanels ist aber vor allem für die internen Abläufe der HTL Wels selbst gegeben. So muss der aktuelle Supplierplan nicht jeden Tag ausgedruckt und in der Aula der Schule ausgehängt werden sondern wird automatisch aus dem Stundenplanverwaltungstool Untis auf das Infopanel übertragen. Weiters muss für das Auffinden eines Lehrers nicht mehr wie bis jetzt üblich in den Stundenplänen der Lehrer, die im Sekretariat aufliegen, nachgeschlagen werden, sondern es kann nach dem Lehrer am Infopanel gesucht werden. Das Infopanel zeigt hier nicht nur den aktuellen Raum samt Unterrichtsfach und Details zum Lehrer an, sondern bietet auch die Möglichkeit sich einen Gebäudeplan der Schule anzeigen zu lassen in dem der aktuelle Aufenthaltsort markiert ist um den Weg zum entsprechenden Raum auch einfacher finden zu können. Die Umsetzung des Systems erfolgt mit Hilfe eines Industrie-PCs der über einen Touchscreen verfügt und die in HTML gestaltete Oberfläche des Infopanels aufruft. Eine Tastatur, für die Eingabe von Suchbegriffen, ergänzt das System. Das komplette Projekt läuft auf dem Webserver der HTL Wels. Auf diesem befinden sich die als Webseite realisierte Oberfläche, die Datenbank und die Funktionalität des Infopanels. Das gesamte Projekt ist somit von jedem Client im Schulnetzwerk aufrufbar und plattformunabhängig. Realisiert wurde das Projekt „Infopanel“ im Rahmen einer Diplomarbeit der 5.AIT im Jahre 2007. Dabei waren folgende Personen für die Organisation und Umsetzung zuständig:

Christian Bartl o Design o Dokumentation

Thomas Fischl o Funktionalität o Datenbank und Webserver

Sebastian Hochgatterer o Funktionalität o digitaler Gebäudeplan

Projektorganisation Dokumentation - Infopanel

13 von 151

2 Projektorganisation In diesem Kapitel sind die Projektbeschreibung, die Zieldefinition, die verwendeten Ressourcen und die Dokumentation der Arbeitsstunden angeführt.

2.1 Zieldefinition Die Diplomarbeit „Infopanel” umfasst die Gestaltung und Implementierung eines Informationspunktes für Schüler und Lehrer der HTL Wels. Dabei soll auch der bis dato immer auszudruckende Supplierplan digital abrufbar. Weiters soll es möglich sein, den aktuellen Aufenthaltsort von Lehrern abrufen zu können um den Gang zum Sekretariat und das dortige Suchen in den Stundenplänen überflüssig zu machen. Aktuelle Zugfahrpläne und allgemeine Informationen über die HTL, das Buffetangebot und ein Internetzugang sind weitere Informationen und Funktionen, die das Infopanel bieten soll. Eine tägliche Aktualisierung der Daten ist allerdings Grundvoraussetzung für den sinnvollen Einsatz des Systems. Zieldefinition in einem Satz:

Es ist ein für den Endanwender konzipierter EDV-basierter Informationsstand zu gestalten, der es ermöglicht, alle für Besucher, Schüler, Lehrer bzw. den Schulalltag relevanten Informationen zeitgemäß aufzubereiten.

2.2 Projektbeschreibung Das Projekt umfasst die Beschaffung der Hardware (Industrie-PC, Tastatur), die Gestaltung eines Webinterfaces für die Darstellung und die Programmierung der Funktionalität. Dabei wird die aktuelle Schulhomepage, das Stundenplantool Untis und eine Schnittstelle zu den Fahrplänen der ÖBB als externe Datenquellen (Legacy Systeme) angebunden. Das Projekt soll mit Hilfe von J2EE, einem CMS – System und einer Datenbank realisiert werden und ohne großen Wartungsaufwand am Webserver der HTL Wels laufen.

2.3 Pflichtenheft

2.3.1 Funktionale Anforderungen

2.3.1.1 Supplierplan Bereits letztes Jahr wurde im Umfang der Diplomarbeit „Schulhomepage mit Joomla“ ein Modul implementiert, um den Supplierplan auf der Schulhomepage darzustellen. Dabei muss dieser vom Stundenplanteam der Schule in das CMS geladen werden. Dieser Vorgang wird beibehalten. Die Daten für den Supplierplan des Infopanels werden aus Joomla extrahiert und grafisch neu aufbereitet. Dabei können sowohl Schüler als auch Lehrer (über einen Login) ihren individuellen Supplierplan abfragen.

2.3.1.2 Sprechstunden Schüler und Eltern können hier nach Lehrern und dessen Sprechstunden suchen. Dabei werden neben den Sprechstunden noch kurze Informationen


14 von 151

zum Lehrer angezeigt (Foto, Unterrichtsfach, Name, usw.). Es gibt direkt eine Verlinkung zum Gebäudeplan um den Raum in dem die Sprechstunde stattfindet sofort finden und eine Wegbeschreibung dorthin anzeigen zu können.

2.3.1.3 Lehrersuche

Hier kann nach einzelnen Lehrern gesucht werden. Nicht nur um Daten wie Name, Foto, Unterrichtsfächer, Sprechstunden, usw. anzeigen zu können sondern auch wo sich der Lehrer gerade befindet. Auch hier gibt es eine Direktverlinkung zum Gebäudeplan. Der Sinn dieser Funktion ist es vor allem den Gang zum Sekretariat und das Suchen im Lehrerstundenplan, um einen Lehrer aufzufinden, zu ersetzen.

2.3.1.4 Zugverbindungen

Ein Großteil aller HTL-Schüler ist mit dem Zug unterwegs. Dabei kommt es immer wieder zu Verspätungen. Aber auch bei einem Entfall von Stunden ist es oft hilfreich zu wissen, wann der nächste Zug abfährt. Hier soll das Modul Zugverbindungen helfen. Dieses übernimmt die Zugfahrpläne der ÖBB und bindet diese bequem und durchsuchbar in das Infopanel ein.

2.3.1.5 Internetzugang

Nicht alle Schüler haben ständig Zugang zum Informationsmedium Internet. Das Infopanel bietet einen Internetzugang an, um im Internet zu surfen. Für das Serven kann der Novell-Login verwendet werden, den jeder HTL-Schüler bei Schuleintritt bekommt. Dieser wird auch hier verwendet um dann eine limitierte Zeit (dzt. 10 Minuten) im Internet surfen zu können.

2.3.1.6 HTL Wels Der Punkt HTL Wels soll die Homepage wiederspiegeln. Hier finden Interessierte Infos zur Geschichte der HTL, eine Liste der Absolventen, eine Fotogalerie, Informationen über unsere Sponsoren und Kontaktinformationen.

2.3.1.7 Gebäudeplan

Der Gebäudeplan bildet das komplette Schulgebäude als 2D-Landkarte nach. Dabei kann hier nach Wegen zu einzelnen Räumen, Klassen oder Lehrern gesucht werden. Als Ausgabe erfolgt eine Karte in der Startpunkt und Endpunkt sowie der Weg dorthin eingezeichnet ist.

2.3.1.8 Buffet

Das Buffet ist ein wesentlicher Bestandteil der Schule und trägt für das leibliche Wohl der Schüler bei. Unter diesem Punkt soll eine Preisliste des Buffets sowie des Burgstüberls auffindbar sein. Auch das aktuelle Tagesmenü oder Angebote können hier angegeben werden. Ebenfalls ist daran gedacht, den Menüplan der HBLA zu integrieren.


15 von 151

2.3.1.9 News Der Punkt News am Infopanel hat dieselbe Funktion wie der auf der Schulhomepage. So werden hier aktuelle Nachrichten und Informationen angezeigt.

2.3.1.10 Terminkalender

Der Terminkalender ist ebenfalls bereits auf der Schulhomepage vorhanden. Hier werden allgemeine Termine sowie Termine für Matura und Nachprüfungen publiziert. Weiters sollen spezielle Schulveranstaltungen oder Schulprojekte vorgestellt werden.

2.3.2 Nichtfunktionale Anforderungen

Um die funktionalen Anforderungen erfüllen zu können müssen einige Schnittstellen zu bestehenden Datenquellen implementiert werden.

2.3.2.1 Untis Alle Funktionen die Lehrerdaten, Supplier- und Stundenpläne benötigen beziehen ihre Daten aus dem Stundenplantool Untis, dass von der HTL Wels zur Verwaltung der Stundenpläne eingesetzt wird. Dabei werden die Daten automatisch aus der Datenbank des Tools ausgelesen und in die Datenbank des Infopanels übertragen. Eine regelmäßige Aktualisierung findet automatisch statt.

2.3.2.2 Schulhomepage

Die Daten für News, Terminkalender und die Informationen zur HTL Wels sind bereits auf der aktuellen Schulhomepage vorhanden und werden von dieser bezogen um im Infopanel angezeigt zu werden. Dabei werden Änderungen die in Joomla! (CMS der Schulhomepage) vorgenommen wurden, automatisch auf das Infopanel übertragen.

2.3.2.3 ÖBB-Zugverbindungen Die Zug- und Busverbindungsdaten wurden uns freundlicherweise von der ÖBB Personenverkehr GmbH zu Verfügung gestellt. Dabei werden am Infopanel die Abfahrtstafeln - wie sie auf Österreichs Bahnhöfen verfügbar sind - angezeigt.

2.3.2.4 Novell-User

Für den Internetzugang wird ein speziell für das Infopanel angelegter Novell-User mit einer Datenvolumsbegrenzung verwendet. Dabei müssen sich Nutzer nicht einloggen und nutzen somit das gemeinsamen Datenvolumen. Ist dieses verbraucht, wird der Internetzugang gesperrt.

2.3.3 GUI-Richtlinien Die Oberfläche (GUI – Graphical User Interface) soll dem allgemein gängigen Design von Infopanels entsprechen und vor allem einfach und intuitiv zu bedienen sein. Die Farbgebung wird Orange und Grau, wobei Orange auf Grund der Gebäudefarbe der Schule und Grau wegen des benötigten Kontrasts gewählt wird. Die Oberfläche wird komplett in HTML implementiert. Weiters sollen sich Menüpunkte und Inhalte umkompliziert und schnell ändern und einbinden lassen, woraus die Verwendung eines CMS resultiert.


16 von 151

2.4 Ressourcenplan Für die Umsetzung des Projektes ist die Beschaffung von einigen Ressourcen notwendig. Die Kosten für diese werden von der Schule getragen. So wurde ein Industrierechner mit Touchscreen, das nötigte Netzteil, eine vandalismussichere Tastatur und ein Metallrahmen für die Komponenten besorgt. An Informationen wurden uns Gebäudepläne der Schule, Beispielstundenpläne und Beispielsupplierpläne zu Verfügung gestellt. Für den Betrieb des Infopanels wird das System auf dem Webserver der Schule eingerichtet und ein eigener Novell-Benutzeraccount für den Internetzugang angelegt. Tabelle 1 - Übersicht der Ressourcen

Hardware Bezeichnung Hersteller IndustriePC PowerPanel PP120 Bernecker + Rainer Industrie

Elektronik GmbH Tastatur INTI-4/PS2 Firma Richard Wöhr GmbH Software Bezeichnung Hersteller Webserver Apache HTTP Server Apache Software Foundation Datenbank MySQL MySQL GmbH CMS 1 Typo3 TYPO3 Association CMS 2 Joomla! Joomla! Grafiksoftware ImageMagick ImageMagick Studio LLC

2.4.1 Hardware Als Hardware für das Infopanel dient ein Power Panel (Industrie-PC) der Firma Bernecker + Rainer Industrie Elektronik GmbH. und eine vandalismussichere Tastatur (INTI-4/PS2) der Firma Richard Wöhr GmbH.

2.4.1.1 Tastatur - INTI-4/PS2

Abbildung 1 - INTI-4/PS2[1]

1 http://www.industrietastaturen.woehrgmbh.de/html/internettastatur-metall-2.html


17 von 151

Spezifikationen:[2]

hervorstehende Langhubtastatur mit V2A-Metallklappen (ermöglicht schnelle Eingabe, Tasten gegen Verdrehen und Aushebeln gesichert)

inkl. Kabel und PS/2-Anschluß (Anschluss an USB-Port über Adapter möglich)

Schutzart: IP65 statisch / IP54 dynamisch Betriebstemperatur: -10 bis +55 Grad Celsius

2.4.1.2 Industrie-PC - Power Panel

Abbildung 2 - PowerPanel PP120[3] Spezifikationen[4]:

Power Panel PP120 BIOS 15″ XGA color TFT display with touch screen (resistive) 128MB SDRAM Compact Flash slot (type I) ETH 10/100 RS 232 2xUSB battery metal housing, IP 65 protection

(front side) 24 VDC (screw clamp 0TB103.9 or cage clamp 0TB103.91 must be ordered

separately). Betriebssystem: Windows CE 4.0 Modelnummer: 5PP120.1505-37A Rev.E0 Seriennummer: 71240168584 Displayauflösung: 1024x768 (4:3) Abmessungen: siehe unten angefügten Konstruktionsplan

2 http://www.industrietastaturen.woehrgmbh.de/html/internettastatur-metall-2.html 3 http://www.br-automation.com/cps/rde/xchg/br-productcatalogue/hs.xsl/products_61177_ENG_HTML.htm 4 http://www.br-automation.com/cps/rde/xchg/br-productcatalogue/hs.xsl/products_61177_ENG_HTML.htm


18 von 151

Abbildung 3 - Abmessungen PowerPanel[5]

2.4.1.3 Einstellungen – Power Panel

Taskleiste (Taskbar and Start Menu Properties) Always on Top (deaktiviert)

Touchscreen kalibrieren

Bereits einmal beim Kalibrieren eingefroren, Neustart und erneute Kalibrierung notwendig. Achtung: Tastatur benutzen, da Touchscreen in diesem Fall nicht mehr funktioniert!

InternetExplorer-Einstellungen für Vollbild

View -> Hide Toolbar

2.4.2 Software

2.4.2.1 Apache HTTP Server Der Apache HTTP Server ist ein freier Webserver der Apache Software Foundation und einer der weitverbreitesten Webserver. Neben Unix/Linux werden auch Windows, NetWare und weitere Betriebssysteme unterstützt. Durch einen modularen Aufbau kann der Apache-Webserver leicht um Funktionen, so genannte Module, erweitert werden. Weiters ist eine CGI-Schnittstelle implementiert und es besteht die Möglichkeit, serverseitige Skriptsprachen einzubinden. Ein Server Side Include-Modul runden die Funktionen zum dynamischen erstellen von Webseiten ab. Aktuell wird der

5 http://www.br-automation.com/downloads_br_productcatalogue/BRP44400000000000000037593/ 5PP120.1505-37A_Abmessungen_Dimensions_V1_1.pdf


19 von 151

Apache Server in den stabilen Versionen 1.3.x, 2.0.x und 2.2.x von der Apache Software Foundation unterstützt.

2.4.2.2 Apache Tomcat Apache Tomcat ist ein in Java geschriebener Servlet-Container der im Rahmen des Jakarta-Projekts der Apache Software Foundation entwickelt wird. Dabei kann dieser Java Code in Form von Servlets und mit der Hilfe des JSP-Compilers Jasper auch JavaServer-Pages in Servlets übersetzen und ausführen. Der Funktionsumfang wird durch einen kompletten Webserver ergänzt. Meisten wird Apache tomcat vorr allem zur Entwicklung eingesetzt und dann im Produktiveinsatz mit einem vorgeschalteten Apache HTTP Server betrieben.

2.4.2.3 Typo3

Typo3 ist ein Open-Source-Web-Content-Management-System für mittlere bis große Webseiten. Typo3 basiert auf der Skriptsprache PHP wird aber selbst mit Hilfe des eigenen TypoScripts konfiguriert. Durch sogenannte Extensions (kleine Programme) kann die Funktionsweise von Typo3 schnell und einfach erweitert werden. Für nähere Informationen, siehe den Punkt 4 Typo3.

2.4.2.3.1 Extensions

Typo3 wird mittles so genannten Extensions um Funktionen für Backend und Frontend erweitert. Beispiele dafür sind der Inline Frame von Stanislas Rolland oder ein Kalender, ein Blog, ein Forum, usw.

2.4.2.4 Grafiksoftware

Für die Generierung von Grafiken benötigt Typo3 externe Software.

2.4.2.4.1 GD Library Die GD Library ist ein OpenSource Grafikframework für die unterschiedlichsten Programmiersprachen, welches die Erzeugung unterschiedlicher Grafikformate unterstützt. Die GDLib stammt von von Thomas Boutell[6]. Das weitverbreiteste Einsatzgebiet ist das dynamische Erzeugen von Webgrafiken mit PHP. Die GDlib unterstützt neben GIF und PNG auch JPEG und WBMP. Aktuell können nicht nur 256 Farben-, sondern auch TrueColor-Bilder erzeugt werden. Dabei können Linien, Rechtecke, Polygone, Kreisbögen und Ellipsen generiert werden. Auch die Textausgabe von TrueType- oder PostScript-Schriften ist möglich. Weiters werden Alphakanäle (Transparenz und Verläufe) mit 7 Bit unterstützt und es können animierte Gif-Dateien erzeugt werden.

2.4.2.4.2 ImageMagick und GraphicsMagick

6 http://www.boutell.com/gd/


20 von 151

ImageMagick ist ein Open-Source-Softwarepaket zur Erstellung und Bearbeitung von Pixelgrafiken. Ein Haupteinsatzgebiet von ImageMagick ist die dynamische Generierung von Grafiken für Webanwendungen. Dabei werden Grafiken über Textbefehle erzeugt. GraphicsMagick ist eine Abwandlung von ImageMagick die um weitere Funktionen erweitert wurde.

2.4.2.5 Joomla!

Joomla! ist eine Open-Source-Web-Content Management System, welches aus dem Open-Source-Projekt Mambo hervorgegangen ist. Neben Typo3 gehört Joomla! zu den bekanntesten und mächtigsten CMS-Systemen. Es basiert auf der Skriptsprache PHP und wird, im Gegensatz zu Typo3, über reine PHP-Files konfiguriert.

2.4.2.6 MySQL

MySQL ist ein Datenbankverwaltungsystem, das von der schwedischen Firma MySQL AB sowohl als Open-Source Variante als auch unter kommerzieller Lizenz entwickelt und vertrieben wird. Dabei ist das System für alle gängigen Betriebssysteme verfügbar und wird bevorzugt für Webauftritte in Verbindung mit Apache HTTP Server verwendet. MySQL unterstütz beliebig viele Datenbanken, mit beliebig vielen Tabellen und in beliebiger Größe (die nur durch das Betriebssystem beschränkt wird). Abfragen können sich über Tabellen, Datenbanken und sogar verschiedene Server erstrecken. Dabei bietet MySQL die Möglichkeit der Einbindung einer eigenen Engine durch die der Umfang der Tabellentypen erweitert werden kann.

2.4.2.7 Zugangsdaten

2.4.2.7.1 Joomla

Administrationsbereich Benutzername: admin Passwort: cisco

2.4.2.7.2 Typo3

Backend Benutzername: admin Passwort: cisco

Install Tool Passwort: cisco

2.4.2.7.3 MySQL

Zugang für Webanwendungen Benutzername: joomla Passwort: (leer)

2.4.2.7.4 FTP

Zugang zu Typo3 auf dem HTL-Webserver Verzeichnis: /srv/www/htdocs/infoPanel_typo3


21 von 151

Benutzername: infoPP Passwort: infoPP

2.4.2.7.5 CVS

Zugang zum CVS-Repository auf dem WWW-Webserver Repository-Path: :extssh:infopan2@www:/home/devel/ Verzeichnis: infopanel Benutzername: infopan2 Passwort: infopan2

2.4.2.8 Versionsnachweis

Es sind folgende Versionen der verwendeten Software im Einsatz:

Apache HTTP Server: 2.x Apache Tomcat: 5.x PHP: 5.x MySQL: 5.x Java: 1.5.x Typo3: 4.0.2 Inline Frame: 1.0.2 GraphicsMagick: 5.5.x GD Graphics Library: 2.1.x Joomla: 1.0.x

2.4.3 Technologiereferenz

2.4.3.1 Java Java ist eine von der Firma Sun Microsystems entwickelte objektorientierte Programmiersprache. Java-Programme werden als Bytecode übersetzt und dann in der so genannten Java-Laufzeitumgebung interpretiert. Der wichtigste Bestandteil ist die Java Virtual Machine, die die Programme durch Interpretation des Bytecodes ausführt. Da die Java Virtual Machine für alle gängigen Betriebssysteme vorhanden ist, laufen Java-Programme - so lange diesen keinen nativen Code enthalten - ohne weiter Anpassungen auf unterschiedlichsten Betriebsystemen und Hardwareplattformen. Der Entwurf der Programmiersprache Java strebte im Wesentlichen fünf Ziele an:[7]

Sie soll eine objektorientierte Programmiersprache sein. Sie soll ermöglichen, gleiche Programme auf unterschiedlichen

Computersystemen auszuführen. Sie soll eingebaute Unterstützung für die Verwendung von

Computernetzen enthalten. o Sie soll Code aus entfernten Quellen sicher ausführen

können. Dieser Punkt wird über das Sicherheitskonzept von Java erreicht, das aus drei Schichten besteht:

7 http://de.wikipedia.org/wiki/Java_%28Programmiersprache%29


22 von 151

o den Class-Loadern (deutsch „Klassenlader“), die die sichere Zuführung von Klasseninformationen zur JVM steuern.

o den Security-Managern (deutsch „Sicherheitsverwalter“), die sicherstellen, dass nur Zugriff auf Programmobjekte erlaubt wird, für die entsprechende Rechte vorhanden sind.

Die erfolgreichen Aspekte bereits verbreiteter objektorientierter Programmiersprachen wie C++ sollen auch für Java-Programmierer zur Verfügung stehen.

2.4.3.2 Servlet

Als Servlets bezeichnet man in Java geschriebene Klassen die innerhalb eines Servlet-Containers (J2EE Applicationserver) Anfragen von Webclients engegen nehmen und beantworten. Dabei wird der Inhalt der Antwort dynamisch generiert. Servlets werden in Verbindung mit JSP zur Realisierung des MVC (model-View-Controller) Paradigmas verwendet. Um Servlets zu Verwenden müssen diese in einem Webcontainer wie Apache Tomcat gestartet werden. Dieser Webcontainer ist dann für die Weiterleitung der Anfragen und Antworten zwischen Client und Servlet verantwortlich. Java-Klassen die als Servlet aggieren sollen werden von der Klasse „javax.servlet.http.HttpServlet abgeleitet“. Die Beiden Methoden „doGet“ und „doPost“ werden überschrieben und bearbeiten die beiden wichtigsten HTTP-Methoden GET und POST. Die Metainformationen über das Servlet werden in der web.xml hinterlegt. Diese XML-Datei wird zusammen mit den komplilierten Klassen in eine Webarchiv (.war) zusammengefasst und dem Webcontainer bereitgestellt. Die folgende Grafik zeigt den Ablauf einer Clientanfrage:

Abbildung 4 - Servlet[8]

8 http://de.wikipedia.org/wiki/Servlet


23 von 151

2.4.3.3 JSP Java Server Pages (Abkürzung: JSP) ist eine von Sun Microsystems entwickelte Technologie zum dynamischen Erzeugen von HTML- und XML-Dateien. Um JSP in Verbindung mit einem Webserver nutzen zu können, muss der Code an eine Servlet-Engine weitergereicht werden (z.B. Apache Tomcat). Dabei ist es u.a. erlaubt, Java-Code (Code-Snippets) in statischen Inhalt einzubetten. Beispiel[9]:

<html> <head> <title>JSP-Beispiel</title> </head> <body> <%@ page import = "java.util.*" %> <% if (request.getParameter("submit") != null) { out.println("Ihre Eingabe: " + request.getParameter("eingabe") + "<BR>"); out.println("<hr>"); out.println("Aktuelles Systemdatum/Systemzeit: " + new Date()); } else { %> <H2>Bitte geben Sie einen Text ein!</H2> <form method="post" action="jspbsp.jsp"> <input type=text name="eingabe" size=30> <input type=reset name="reset" value="Löschen"> <input type=submit name="submit" value="Abschicken"> </form> <% } //end if %> </body> </html>

2.4.3.4 JSTL Die Java Server Pages Standard Tag Library (Abkürzung: JSTL) enthält Bibliotheken, die das Erstellen von JSP-Seiten vereinfachen. Dabei wird nicht - wie bei JSP - Java-Code in JSP-Dateien geschrieben, sondern einzelne Tags. Dabei wird die Logik in eigenen Bibliotheken ausprogrammiert und nur über HTML-ähnliche Tags in die JSP-Dateien integriert. Ein Tag dient zur Auszeichnung eines Datenbestandes. Dabei ist ein Tag ein in spizte Klammern eingefasstes Schlüsselwort „<Tag>“. Tags können offen oder schließend sein. Bei schließenden Tags muss der letztere einen führenden Schrägstrich enthalten. Klassische Auszeichnungssprachen die Tags verwenden sind HTML, XML und SGML. Beispiel[10]:

<?xml version="1.0" encoding="utf-8" ?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"

9 http://www.space.net/support/informationen/serverfeatures/unix_linux/jsp/01/index.html 10 http://de.wikipedia.org/wiki/JSTL


24 von 151

version="2.0"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>JSTL 1.1</title> </head> <body> <h1>Iteration</h1> <ul> <c:forEach var="num" begin="1" end="10"> <li>Nummer ${num}</li> </c:forEach> </ul> <h1>Formatierung</h1> <p> Währung: <fmt:formatNumber value="10000" type="currency" currencyCode="EUR" /> </p> </body> </html> </jsp:root>

2.4.3.5 XML XML ist die Abkürzung für Extensible Markup Language und wurde vom W3C[11] (World Wide Web Consortium) spezifiziert. XML ist eine Auszeichnungssprache zur Darstellung von hierarchisch strukturierten Daten. XML wird meistens für den Austausch von Daten zwischen unterschiedlichen Systemen und Technologien genutzt. XML-Dateien sind Textdateien. XML-Dokumente lassen sich mit Hilfe von Schemasprachen wie DTD[12] oder XML-Schema[13] definiert. XSLT[14] (XML Stylesheet) hilft bei der formatierten Ausgabe von XML, z.B. als HTML oder PDF. Beispiel:

<addresses> <person> <name> <first>Hubert</first> <last>Test</last> </name> <city>Wels</city> <country>Österreich</country> </person> <person> <name> <first>Christian</first> <last>Bartl</last> </name> <city>Wels</city> <country>Österreich</country> </person> </addresses>

2.4.3.6 HTML HTML steht für Hypertext Markup Language und ist eine textbasierte Auszeichnungssprache von Inhalten, Bildern und Hyperlinks in

11 http://www.w3.org/ 12 http://de.wikipedia.org/wiki/Dtd 13 http://de.wikipedia.org/wiki/XSD 14 http://de.wikipedia.org/wiki/Xslt


25 von 151

Dokumenten. HTML-Dateien sind die Grundlage von Webseiten und werden von Webbrowsern dargestellt. Neben den vom Browser dargestellten Inhalt können noch weiter Informationen - die so genannten Metainformationen - in das Dokument integriert werden. Da HTML keine Programmiersprache, sondern eine Auszeichnungssprache ist, spricht man hier auch nicht von „programmieren“ sondern von „schreiben“. Ein HTML-Dokument besteht aus drei Bereichen:[15]

1) der Dokumenttypdeklaration ganz am Anfang der Datei, die die verwendete DTD angibt, z. B. HTML 4.01 Strict,

2) dem HTML-Kopf (HEAD), der hauptsächlich technische oder dokumentarische Informationen enthält, die nicht direkt im Browser sichtbar sind und

3) dem HTML-Körper (BODY), der anzuzeigende Informationen enthält.

Grundstruktur einer Webseite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel der Webseite</title>  </head> <body> Inhalt der Webseite </body> </html>

2.4.3.7 CSS Cascading Style Sheet, kurz CSS, ist eine declarative Sprache für die Formatierung von strukturierten Dokumenten wie HTML. CSS gilt heute als Standard-Stylesheetsprache für das Web und kann nicht nur Schriftart, Größe und Farbe definieren sondern auch Elemente frei positionieren, Hintergrundbilder festlegen oder das Aussehen von Formularen ändern. Die CSS-Syntax:

Selektor { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; } /* Kommentar */

Beispiel:

body { background-color: #AAA79D; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image: url("../images/bg/bg.gif"); background-repeat: no-repeat; cursor: hand; }

15 http://de.wikipedia.org/wiki/Html


26 von 151

2.4.3.8 JavaScript JavaScript ist eine objektbasierte Skriptsprache und wird besonders im Webbereich eingesetzt. Mittlerweile ist sie unter dem Namen ECMAScript durch die Ecma International standardisiert. Dabei wird JavaScript vom Client-Browser interpretiert. Bei JavaScript wird der Quelltext direkt in die HTML-Datei eingebettet oder in eine externe Datei geschrieben. JavaScript-Funktionen reagieren auf Ereignisse die durch Maus oder Tastatur ausgelöst werden. Weiters können Formulareingaben mittels JavaScript verarbeitet bzw. kontrolliert werden. So kann zum Beispiel die Eingabe auf Vollständigkeit geprüft werden, bevor der Nutzer das Formular absenden kann. Beispiel:

<script language="JavaScript">  </script>

2.4.3.9 PHP PHP steht für „Hypertext Preprocessor“ (ursprünglich „Personal Home Page Tools“) und ist eine OpenSource-Skriptsprache, die zur dynamischen Erzeugung von Webseiten und Webanwendungen verwendet wird. PHP ist eine serverseitig interpretierte Skriptsprache. Das heißt, das Skript wird auf dem Server abgearbeitet und liefert die fertige Web-(HTML)seite an den Client. Um PHP-Dateien zu verarbeiten können, muss am Server ein PHP-Interpreter installiert sein. Dieser ist aktuell in der Version 5.x erhältlich. Viele CMS und Webanwendungen bauen auf PHP auf. Oftmals wird PHP in sogenannten LAMP-Umgebungen verwendet (LAMP = Linux, Apache, MySQL, PHP). Die nachfolgende Grafik demonstriert die Funktionsweise von PHP. Beispiel:

<html> <head> <title>PHP Beispiel 1: Einfache Anweisungen</title> </head> <body> <h1>Datum</h1> Hallo, <strong><?php echo $_SERVER['REMOTE_HOST']; ?></strong> <p> Heute ist der <?php # Kommentar: Gib das Datum aus, dann je nach Monat noch eine Zeichenkette $tag = date('z') + 1; echo date('d. m. Y') . ", der " . $tag . ". Tag des Jahres. <p>\n"; $monat = date('m'); if ($monat == 1 || $monat == 2 || $monat == 12)


27 von 151

echo "Es ist Winter."; else if ($monat > 2 && $monat < 6) echo "Es ist Frühlingszeit."; else if ($monat > 5 && $monat < 9) echo "Es ist Sommer."; else echo "Es ist Herbstzeit."; ?> <p> </body> </html>

Abbildung 5 - PHP-Funktionsweise[16]

2.4.3.10 SQL SQL, die Abkürzung für Structured Query Language, ist eine deklarative Datenbanksprache für relationale Datenbanken. Die SQL-Syntax ist im ANSI SQL-92 (SQL2) Standard definiert und wird von vielen bekannten Datenbanksystemen (MySQL, Firebird, Oracle, Microsoft SQL Server, usw.) implementiert. Dabei wird diese aber meist vom Hersteller um Funktionen erweitert. SQL bietet Befehle zur Abfrage von Daten und zur Definition und Manipulation von Datenstrukturen und Datenbestände an. Beispiel:

SELECT * FROM meineTabelle WHERE feldName1 = 'xy' AND feldName2 < 100 AND feldName3 BETWEEN 1 AND 10;

2.4.4 ÖBB-Abfahrtstafeln Für die Anzeige des Zugfahrplanes wurde uns nach Absprache mit der ÖBB-Personenverkehr AG eine Schnittstelle zur Anzeige der Abfahrtspläne zur Verfügung gestellt, die ident mit der Abfahrtsanzeige in österreichischen Bahnhöfen ist. Diese Lösung wird für die ÖBB-Personenverkehr AG von der Firma HaCon Ingenieurgesellschaft mbH bereitgestellt und nennt sich Hafas[17]. Für unser Projekt wurden eigene Links zum Hafas-Server eingerichtet. Auch die Ausgabe wurde in der Breite angepasst um ins Design des Infopanels integriert werden zu können.

16 http://de.wikipedia.org/wiki/Php 17 http://www.hacon.de/hafas


28 von 151

2.4.4.1 Beschreibung

Abbildung 6 - ÖBB Abfahrtstafel Die Anzeige, wie in obiger Grafik abgebildet, kann entweder als selbständige Webseite angezeigt werden oder aber auch in ein Frameset integriert werden. Dazu muss in der URL der Wert „CMSFrames=true“ auf „CMSFrames=false“ geändert werden. Sollte dies einmal nicht funktionieren, kann noch der Wert „start=1“ auf „start=0“ geändert werden. Bei den Bushaltestellen gibt es einige Einschränkungen. So werden längere Zielorte aufgrund der Spaltenbreite abgeschnitten. Bei Rundlinien wird als Ziel der Startpunkt angezeigt, da diese ja an den Startpunkt zurückkehren. Die Bussteige werden ebenfalls nicht angezeigt da diese aufgrund der Haltestellenbezeichnung im oberen roten Balken selbsterklärend sind. Sollte der unwahrscheinliche Fall eintreten, dass gerade keine Busse oder Züge abfahren, oder eine Störung auftreten erscheint die Fehlermeldung „Keine Züge zu dieser Zeit“.


29 von 151

Abbildung 7 - ÖBB Abfahrtstafel - Fehlermeldung

2.4.4.2 Links

Folgende Links wurden uns von der Firma HaCon Ingenieurgesellschaft mbH und der Erlaubnis von der ÖBB-Personenverkehr AG auf ihren Servern zu Verfügung gestellt. Wels HBF:

http://oebb-test.hafas.de/bin/stboard.exe/dn?L=vs_sq&cfgfile= WelsHbf_8100014_118812901&mMode=run&monitorCMSFrames= false&start=0

Wels Lokalbahnhof:

http://oebb-test.hafas.de/bin/stboard.exe/dn?L=vs_sq&cfgfile= WelsLokalb_8101754_1205777722&mMode= run&monitorCMSFrames=false&start=0

Wels Busbahnhof:

http://oebb-test.hafas.de/bin/stboard.exe/dn?L=vs_sq&cfgfile= WelsBusbah_8100014_571505470&mMode=run&monitorCMSFrames=false&start=0

Wels Kaiser-Josef-Platz:

http://oebb-test.hafas.de/bin/stboard.exe/dn?L=vs_sq&cfgfile= WelsKaiser_1340366_106904595&mMode=run&monitorCMSFrames=false&start=0

2.5 Projektverlauf Die Grobstruktur des Projektablaufes wird in den folgenden Punkten beschrieben.

1) Zieldefinition 2) Lastenheft 3) Ideensammlung 4) Definieren der Funktionen 5) Hardwareauswahl 6) Pflichtenheft 7) Designkonzept entwickeln 8) Genehmigung des Designs und der Funktionen durch den Direktor und

Abteilungsvorstand 9) Design umsetzen 10) Funktionen ausprogrammieren und erstellen


30 von 151

11) Funktionalität in das Design integrieren 12) Dokumentation 13) Projektabgabe

2.6 Zeittafel Nachfolgend finden Sie den groben Ablauf und die wichtigsten Meilensteine des Projekts. Die nachfolgenden Menüpunkte enthalten Notizen zu Besprechungen und wichtigen Entscheidungen, die während des Projektverlaufs getroffen wurden.

11.09.2006 - Projektstart 22.09.2006 - Abgabe des Lastenhefts 23.10.2006 - Besuch der Nahverkehr 2006 31.10.2006 - Abgabe des Pflichtenhefts 27.11.2006 - Präsentation der Grundidee und Genehmigung durch

Dipl.-Ing. Anton Schachl und Dipl.-Ing. Reinhard Mayr 20.04.2007 - interimistisches Projektende 11.05.2007 - Abgabe der Diplomarbeit 16.05.2007 - Präsentation der Diplomarbeit im Rahmen der Matura

2.6.1 Unnötige Menüpunkte - 03.10.2006 Buffetpreise Wer schaut schon am Infopanel nach, wann man direkt beim Buffet

fragen kann? Map24 Map mit Lageplan der HTL macht wenig Sinn, weil einmal in der HTL,

ist man ja schon da. Neuaufnahmen HTL ist in den Ferien geschlossen, daher ist kein Zugang zum Infopanel

möglich. Altbewährter Aushang und Anführung auf der Homepage machen mehr Sinn.

2.6.2 Nahverkehr 2010 - 23.10.2006

Besuch der N“ahverkehr 2010“ am 23.10.2006 im Designcenter Linz, wo wir von der ÖBB bereits am Stand erwartet wurden. Kurzes Gespräch mit einem der Mitarbeiter der ÖBB und eines Hacon-Mitarbeiters. Hacon betreut die Fahrplanaufbereitung für die ÖBB. Der aktuelle Stand ist nun folgender, dass wir einen Link mit Testdaten bekommen um die Integration in unser Design zu testen. Sollte dies erfolgreich sein, werden weitere Links für uns eingerichtet. Dabei können immer die Ankunftszeiten oder Abfahrtszeiten für Bus oder Bahn und pro Haltestation angezeigt werden. Folgende Abfahrtspläne sind sinnvoll: Hauptbahnhof Lokalbahnhof Kaiser-Josef-Platz Busbahnhof

2.6.3 Erstellen des Gehäuses - 24.10.2006

Unterstützung von der Werkstättenleitung Fachlehrer Schmidt legt einen Auftrag für uns an


31 von 151

Fachlehrer Helmbrand sorgt für die Umsetzung eventuell noch Lehrer für das Erstellen der Pläne benötigt Panel wird in Nirosta umgesetzt Unsere Designvorgabe sollte umsetzbar sein ThinClient in Lochkäfig unterbringen

2.6.4 Gespräch mit Prof. Sander - 13.11.2006

Das Projekt ist so zu gestalten, dass nächstes Jahr daran weitergearbeitet werden kann.

Seine persönliche Einschätzung ist, dass das Projekt von uns so und so nicht fertig gestellt werden wird, aber wir sollen das Beste versuchen.

Veränderungen an der Homepage wird es in nächster Zeit nicht geben, somit kein Problem mit direktem Zugriff darauf.

Es ist mit Änderungsvorschlägen seitens der Direktion zu rechnen.

2.6.5 Designabnahme - 27.11.2006

Begutachtung, Besprechung und Abnahme des Designs und der Menüstruktur durch Dipl.-Ing. Anton Schach und Dipl.-Ing. Reinhard Mayr. Dipl.-Ing. Mayr war von Design überzeugt, Dipl.-Ing. Schachl noch etwas skeptisch. Beide haben es akzeptiert. Die Menüstruktur muss noch etwas überarbeitet werden, doch grundsätzlich ist bis jetzt gute Arbeit geleistet worden. generelle Anregungen: Bildschirmschoner könnte als Werbefläche genutzt werden. Dieser soll

sich bei Inaktivität aktivieren und neben Werbung noch einen Text anzeigen, der den Nutzer darauf hinweist, auf den Bildschirm zu tippen um das Infopanel zu starten.

Copyright von uns auf allen Seiten unterbringen Auf Infostand groß Infopanel schreiben bzw. Logo und Namen von uns

anbringen.

Menüstruktur überarbeiten: Sprechstunden und Lehrersuche mit Menüstruktur für Alphabetische

Suche versehen (A-C, D-F, usw.) Bei Supplierplan entweder Lehrernamen ausschreiben oder Kürzel

verlinken. Sprechstunden, Lehrersuche und Gebäudeplan miteinander verknüpfen. Buffet-Menüpunkt eventuell noch umbenennen um keine Verbindung mit

Schulbuffet herzustellen. zum Punkt HTL Wels: Die Punkte Direktion und Sekretariat hinzufügen

bzw. Geschichte nicht als ersten Punkt nehmen.

2.6.6 Suchenfunktion - 15.01.2007 Es sollte eine Suchenfunktion für einzelne Menüpunkte, um die Tastatur auszunützen, integriert werden. Dabei soll die Startseite der Menüpunkte nicht mehr der erste Untermenüpunkt sein sondern eine Suchseite. Diese kann dann allerdings auch nur durch das erstmalige aufrufen der Menüseite aufgerufen werden.


32 von 151

2.7 Dokumentation der Arbeitsstunden Stundennachweis sortiert nach Datum mit Aktivitäten und Stundenanzahl. Insgesamt müssen 200 Stunden für die Diplomarbeit absolviert und dokumentiert werden.

Gesamtarbeitszeit: 212 Stunden (Viele Stunden für Organisation und Gespräche mit Direktion, Sekretariat und Organisatoren sind allerdings nicht dokumentiert und somit auch nicht eingerechnet)

25.10.2006

Designentwürfe erstellen

Stundenanzahl: 6 02.10.2006

Designentwürfe überarbeiten Designentwürfe von Dipl.-Ing. Anton Schachl und Dipl.-Ing. Reinhard

Mayr absegnen lassen Diskussion über einzusetzende Technologien, eventuell auftretende

Probleme, Schlüsselstellen, noch zu besorgende Informationen und Daten.

Stundenanzahl: 6

03.10.2006 Einrichten der Entwicklungsumgebung von Typo3 Installieren von Mediawiki und Wordpress Befüllen und Einrichten des Blogs Beginn des Pflichtenheftes

Stundenanzahl: 4

09.10.2006 Einrichten und Testen des ThinClients Erstellen einer Preview-Seite für Demonstrationszwecke Erstellen des HTML-Grundgerüstes für Typo3 Überlegungen wie die Struktur der Webseite aufgebaut wird

Stundenanzahl: 6

13.10.2006 weiter entwickeln des Designs Browser-Funktionen und Kompitabilität des Windows CE Browsers

ermitteln schreiben des Pflichtenhefts

Stundenanzahl: 6


33 von 151

23.10.2006 Besuch der Nahverkehr 2010 Stundenanzahl: 4

30.10.2006 Organisieren von Daten Organisieren des Infostandes (Werkstätte), wird von Herrn Helmberger

umgesetzt. Gestalten von Schaltflächen DHTML-Scrollleiste aus Design entfernen Erstellen der Typo3-Struktur Grunddesign der Index-Seite in Typo3 umsetzen (Problem: Roll-Over-

Buttons werden nicht erzeugt.)

Stundenanzahl: 7

06.11.2006 Typo3-Template erstellen Menüführung einbauen iFrame ansprechbar machen CSS-Dateien erstellen Problem mit Templateumsetzung -> wird sehr komplex aber realisierbar Idee wie jedem Menüpunkt ein Button zugefügt werden kann fehlt noch

gänzlich Stundenanzahl: 6

08.11.2006 Vollständige Umsetzung des dynamischen Menüs

Stundenanzahl: 1

10.11.2006 auf Contentseite fehlende noScroll-Option im BodyTag implementieren Grafiken noch nicht komprimiert, da maximale Dateigröße bei 200KB

liegt (über Lan also nicht der Rede wert). Headergrafik der Contentseite Buttons für Contentseite designen

Stundenanzahl: 3

12.11.2006 Buttons auf Contentseite überarbeiten Stundenanzahl: 1

13.11.2006 Erstellen eines neuen Templates für Seiten ohne Menüpunkte Anlegen der Untermenüpunkte (soweit bekannt)


34 von 151

Anpassen der Tabellenstruktur des Grundtemplates Menüpunkte nicht zentriert sondern an Oberkante plazieren Schriftgrößen des Gifbuilders anpassen (so dass auch der längste

Menüpunkt noch korrekt angezeigt wird) Headergrafik überarbeiten Buttons überarbeiten Stundenanzahl: 7

17.11.2006 Erstellen des Menüs auf der Indexseite Grafiken generieren Typo3-Template überarbeiten

Stundenanzahl: 6

20.11.2006 Versuch das Linkproblem zu Lösen Extension gefunden, kann in der Schule aber auf Grund des Proxys nicht

heruntergeladen werden Umstrukturierung der Seiten Extensions herunterladen und erfolgreich testen Templates umbauen Contentelement iFrame erfolgreich testen

Stundenanzahl: 5

24.11.2006 Erstellen der iFrame-Content-Elemente auf allen Seiten Errorpage erstellen Impressum erstellen Übertragen der Typo3-Installation von lokalem Rechner auf VMWare-

Testserver Problemlösungsversuch: Keine Umlaute in Grafiken (dynamisch mit

gdlib) auf Linux-Server Stundenanzahl: 4

27.11.2006 in PHP einlesen in JSP einlesen in JSTL einlesen B&R-Logo zu Startseite hinzufügen Größe der Grafiken des Templates reduzieren Präsentation vor Dipl.-Ing. Anton Schachl und Dipl.-Ing. Reinhard Mayr

(siehe Besprechungen) Versuch JSTL zum Laufen zu bekommen mit Design des Aufdruckes des Infopanel-Stands begonnen CVS testen


35 von 151

Stundenanzahl: 7

04.12.2006 Template für Präsentationen erstellen Mail an ÖBB/Hacon wegen den Darstellungsproblemen der

Abfahrtstabelle Diskussion über weitere Vorgehensweise

Stundenanzahl: 3

11.12.2006 Präsentation für PPM erstellen Grundstruktur der Dokumentation erstellen Menüpunkte meiner Dokumentation finden ÖBB-Infotafel-Link-Problem gelöst Grunddesign für Inhalt überarbeiten Menüstruktur überarbeiten

Stundenanzahl: 6

08.01.2007 Präsentation des aktuellen Projektstatus Testen der Tastatur Abklären des aktuellen Projektstatus Einlesen in JSTL Erstellen des JSP für Termine Lösungsversuch: Keine Methoden des Beans über JSTL aufrufbar

Stundenanzahl: 6

15.01.2007 Designen der Unterseiten Überarbeiten der Menüstruktur Datenbank für Routenplaner einrichten

Stundenanzahl: 6

18.01.2007 Erstellen des Contentseiten-Designs Umstrukturieren der Menüstruktur in Typo3 Mail an Hacon/ÖBB wegen Designvorlage Stundenanzahl: 4

19.01.2007

Erweitern und Ausbessern der Content-Templates JSTL-Tag Lösung suchen Einrichten der Serverumgebung am Webserver der Schule Besprechung über weitere Vorgehensweise und Aufgabengebiete


36 von 151

Stundenanzahl: 8

22.01.2007 Contentdesigns überarbeiten PHProxy für Internetzugang überarbeiten (funktioniert allerdings nur mit

Firefox) JSTL für Sprechstunden erzeugt und getestet Statische Seiten der Sektion HTL Wels erzeugt

Stundenanzahl: 6

25.01.2007 Erhalt und Einbau der ÖBB-Abfahrtspläne in passendem Design

Stundenanzahl: 1

29.01.2007 Datenstruktur für JSP-Files festlegen mit ImageMagick-Problem auf HTL-Webserver beschäftigen Content-Seiten überarbeiten

Stundenanzahl: 6

05.02.2007

Schreiben der Dokumentation

Stundenanzahl: 3

05.03.2007 Schreiben der Dokumentation

Stundenanzahl: 6


Stundenanzahl: 3


Stundenanzahl: 2

12.03.2007 JSP-Files erstellen Schreiben der Dokumentation

Stundenanzahl: 6

16.03.2007


37 von 151

Schreiben der Dokumentation

Stundenanzahl: 5 26.03.2007

JSP-Files erstellen Schreiben der Dokumentation

Stundenanzahl: 6

29.03.2007 JSP-Files erstellen Grafiken erstellen Map designen (XSLT)

Stundenanzahl: 5

13.04.2007 Vervollständigen der JSP-Dateien Vervollständigen des Designs Vorführung des aktuellen Projektstatus (Dipl.-Ing. Reinhard Mayr)

Stundenanzahl: 6

16.04.2007 Dokumentation erstellen Fehler in JSPs ausbessern mit ImageMagick und Linux beschäftigen

Stundenanzahl: 6

18.04.2007 Dokumentation erstellen Typo3-Konfiguration des Webservers anpassen Stundenanzahl: 6

19.04.2007 Dokumentation erstellen Grafiken der Map anpassen Stundenanzahl: 2

20.04.2007 Dokumentation erstellen Dokumentation fertig verfasst

Stundenanzahl: 6

23.04.2007


38 von 151

Grafiken von Map in GIF konvertieren Typo3-Problem mit Grafikgenerierung lösen Dokumentation Korrekturlesen

Stundenanzahl: 6

24.04.2007 Typo3-Problem mit Umlaute lösen (direkte Eingabe des Ascii-Codes) Dokumentation Korrekturlesen Dokumentation überarbeiten

Stundenanzahl: 5

08.05.2007 Dokumentation überarbeiten JSP-Dateien überarbeiten

Stundenanzahl: 5

09.05.2007

JSP-Dateien überarbeiten Präsentation erstellen

Stundenanzahl: 3

09.05.2007

Dokumentation überarbeiten JSP-Dateien überarbeiten Präsentation erstellen

Stundenanzahl: 5

31.05.2007

Dokumentation überarbeiten Dokumentation drucken und binden

Stundenanzahl: 6

Infopanel Dokumentation - Infopanel

39 von 151

3 Infopanel In diesem Kapitel finden Sie die Dokumentation über das Design und die Funktionen des Projekts. Definition des Begriffs „Infopanel“:

Ein Infopanel ist ein für den Endanwender konzipierter EDV-basierender Rechner in ansprechendem Gehäuse, ausgestattet mit Touchscreen und/oder mit Tastatur und Maus.

3.1 Funktionen Die meisten Funktionen des Infopanels setzen ein regelmäßiges Update der Daten voraus. Die Daten für Lehrer, Stundenplan, Supplierungen, Raumaufteilung, usw. werden von der Schule mit dem Tool Untis[18] verwaltet. Dieses Tool dient zur Verwaltung des Schulbetriebs (Stundenpläne, Raumeinteilung, Supplierungen, usw.). Die Daten werden über ein eigenes Tool aus Untis ausgelesen und in unsere Datenbank eingetragen. Erreichbar sind alle Funktionen über die Hauptseite des Infopanels.

Abbildung 8 - Funktion - Hauptseite

3.1.1 Supplierplan Bis jetzt wurde der Supplierplan immer ausgedruckt und am Informationsboard in der Aula der HTL Wels ausgehängt. Das Infopanel stellt den Supplierplan übersichtlich nach Tagen und Klassen sortiert dar. Die Aktualisierung der Daten erfolgt direkt über das Verwaltungstool Untis. Als Einstiegsseite erscheint ein Suchformular. Die Auflistung erfolgt durch eine Suche oder nach Tagen geordnet. Screenshot für Suche und Lehrerdetails siehe 3.1.3 Lehrersuche.

18 http://www.grupet.at/


40 von 151

Abbildung 9 - Funktion - Supplierplan

3.1.2 Sprechstunden Eine der wichtigsten Funktionen des Infopanels ist die Suche nach den Sprechstunden von Lehrern. So soll es vor allem Eltern, die sich in der HTL Wels orientieren möchten, möglich sein, Informationen zum Lehrer und dessen Sprechstunde anzeigen zu lassen. Eine direkte Verlinkung zum Gebäudeplan erleichtert das Auffinden des Sprechstundenzimmers. Als Einstiegsseite erscheint ein Suchformular. Die Auflistung erfolgt durch eine Suche oder alphabetisch (in Buchstabengruppen unterteilt). Screenshot für Suche und Lehrerdetails siehe 3.1.3 Lehrersuche.

Abbildung 10 - Funktion - Sprechstunde

3.1.3 Lehrersuche Hier kann nach einzelnen Lehrern gesucht werden. Nicht nur um Daten wie Name, Foto, Unterrichtsfächer, Sprechstunden, usw. anzeigen zu können


41 von 151

sondern auch wo sich der Lehrer gerade befindet. Auch hier gibt es eine Direktverlinkung zum Gebäudeplan. Der Sinn dieser Funktion ist es vor allem den Gang zum Sekretariat und das Suchen im Lehrerstundenplan, um einen Lehrer aufzufinden, zu ersetzen. Als Einstiegsseite erscheint ein Suchformular. Die Auflistung erfolgt durch eine Suche oder Alphabetisch (in Buchstabengruppen unterteilt).

Abbildung 11 - Funktion - Lehrersuche - Suche

Abbildung 12 - Funktion - Lehrersuche - Suche - DropDown


42 von 151

Abbildung 13 - Funktion - Lehrersuche

Abbildung 14 - Funktion - Lehrersuche - Lehrerdetails

3.1.4 Verkehrsmittel Ein Großteil aller HTL-Schüler ist mit dem Zug unterwegs. Dabei kommt es immer wieder zu Verspätungen. Hier soll das Modul Verkehrmittel helfen, die aktuellen Fahrpläne zur Anzeige zu bringen. Dieses übernimmt die Zugfahrpläne und Busfahrpläne der ÖBB und bindet diese als Abfahrtstafel in das Infopanel ein.


43 von 151

Abbildung 15 - Funktion - Verkehrsmittel

3.1.5 Internetzugang Das Infopanel ermöglicht ein surfen im Internet. Dabei gelten dieselben Richtlinien wie im schuleigenen Novell-Netzwerk. Ein Login wird nicht notwendig sein, aber es wird das Datenvolumen beschränkt und der Zugang bei Überschreitung vom Systemadministrator gesperrt werden.

Abbildung 16 - Funktion - Internetzugang

3.1.6 HTL Wels Der Punkt HTL Wels spiegelt den Inhalt der Schulhomepage wieder. Hier finden sich Infos zur Direktion, zum Sekretariat, zu Abteilungen, zum Absolventenverein, zu Sponsoren und die Fotogalerie der Homepage. Die Fotogalerie und die Sponsoren werden dynamisch generiert. Die restlichen Seiten sind statisch eingebunden und müssen daher bei Bedarf manuell geändert werden.


44 von 151

Abbildung 17 - Funktion - HTL Wels - Direktion

Abbildung 18 - Funktion - HTL Wels - Sponsoren


45 von 151

Abbildung 19 - Funktion - HTL Wels - Fotogalerie

3.1.7 Gebäudeplan Der Gebäudeplan bildet das komplette Schulgebäude als 2D-Landkarte nach. Wie von bekannten Online-Map-Suchdiensten kann hier durch die Karte der Schule navigiert und gezoomt werden. Eine Auswahl des jeweiligen Stockwerks ist ebenfalls vorhanden.

Abbildung 20 - Funktion - Gebäudeplan

3.1.8 Buffet Das Buffet ist ein wesentlicher Bestandteil der Schule und trägt für das leibliche Wohl der Schüler bei. Unter diesem Punkt soll eine Preisliste des Buffets sowie des Burgstüberls auffindbar sein. Ebenfalls ist es gedacht das Menü der HBLA zu integrieren.


46 von 151

Abbildung 21 - Funktion - Buffet

3.1.9 News Der Punkt News am Infopanel spiegelt den Inhalt der News-Seite der Schulhomepage wieder. So werden hier aktuelle Nachrichten und Informationen angezeigt.

Abbildung 22 - Funktion - News

3.1.10 Terminkalender Der Terminkalender ist ebenfalls bereits auf der Schulhomepage vorhanden und somit werden die Daten von der Schulhompage ausgelesen und auf dem Infopanel angezeigt.


47 von 151

Abbildung 23 - Funktion - Terminkalender

3.2 Design und Struktur Das Interface-Design des Infopanels wurde mit Hilfe von Webseiten (HTML und CSS) realisiert. Dabei wurde vor allem auf eine benutzerfreundliche und intuitive Steuerung geachtet. Durch die Verwendung müssen alle Elemente groß genug sein, um leicht per Fingerdruck bedienbar zu sein. Weiters wurde beim Design darauf geachtet, dass dieses schnell und einfach um Menüpunkte erweitert werden kann, bzw. bestehende Punkte verändert werden können. Um die Dynamik zu erhalten und vor allem die Neugenerierung der Grafiken zu automatisieren, wurde das CMS Typo3 verwendet. Dieser Abschnitt setzt Kenntnisse über Typo3 voraus (Kapitel 4 Typo3).

3.2.1 Design

3.2.1.1 Vom Entwürf zum Endergebnis

Im folgendem wird der ursprüngliche Entwurf (in Photoshop realisiert) und dessen Umsetzung in HTML und Typo3 behandelt.


48 von 151

Tabelle 2 - Gegenüberstellung Endentwurf - Umsetzung

Endentwurf Umsetzung

Hier noch einige vorhergehende Entwürfe und Varianten des Designs: Tabelle 3 - Designentwürfe


49 von 151

3.2.1.2 Aufteilung der Menüpunkte Die Einteilung der Menüstruktur erfolgte nach einer Analyse des Istzustandes und der Anforderungen seitens der künftigen Benutzer. Danach wurden dann die Hauptmenüpunkte gerichtet. Die Untermenüpunkte bieten dann eine zusätzliche Aufgliederung. Wird ein Hauptmenüpunkt aufgerufen, wird immer der erste Untermenüpunkt aufgerufen und angezeigt.

1) Supplierplan Suchen Montag Dienstag Mittwoch Donnerstag Freitag

2) Sprechstunden Suchen ABC DEF GHI JKL MNO PQR STU VWXYZ

3) Lehrersuche Suchen ABC


50 von 151

DEF GHI JKL MNO PQR STU VWXYZ

4) Verkehrsmittel Abfahrt Hauptbahnhof Abfahrt Lokalbahnhof Abfahrt Busbahnhof Abfahrt Kaiser-Josef-Platz

5) Internetzugang 6) HTL Wels

Direktion Sekretariat Abteilungen Absolventenverband Sponsoren Fotogalerie

7) Gebäudeplan 8) Buffet

Tagesmenü Preisliste Menüplan HBLA Menüplan Burgstüberl

9) News 10) Terminkalender

3.2.1.3 Farben Im Design werden folgende RGB-Farben, als Hexadezimalwert angegeben, verwendet:

Hintergrundfarbe #AAA79D

Hintergrundfarbe der Contentseiten #878785

Hintergrundfarbe des Bereichs hinter dem Titel #C0BEB6

Farbe eines Button

#D85D03 Farbe eines Button mit Status „active“ oder „over“

#F19D23

3.2.1.4 Größenbeschränkungen Für Seiten mit Inhalt gelten einige Beschränkungen im Bezug auf die Größe um korrekt und vollständig im Design angezeigt werden können.


51 von 151

Die iFrames für den Inhalt haben folgende Größen:

iFrame auf einer Unterseite ohne Menü Breite: 990px Höhe: 640px

iFrame auf einer Unterseite mit Menü

Breite: 740px Höhe: 640px

Damit ergeben sich für die Tabellen der Contentseiten (unter Berücksichtigung von eventuell benötigten und angezeigten Scrollleisten), in denen sich der Inhalt befindet, folgende Größen:

Tabelle auf einer Contentseite die in einer Unterseite ohne Menü angezeigt wird

Breite: 965px Höhe: 630px Rahmenbreite: 0 Ausrichtung: center

Tabelle auf einer Contentseite die in einer Unterseite mit Menü

angezeigt wird Breite: 715px Höhe: 630px Rahmenbreite: 0 Ausrichtung: center

3.2.2 Entscheidungskriterien für den Einsatz des CMS „Typo3“

Die Entscheidung für Typo3 mag auf den ersten Blick als Ressourcenverschwendung angesehen werden, da die aktuelle Schulhomepage (von der die Daten für das Infopanel bezogen werden) bereits im CMS Joomla! realisiert ist. Typo3 ist eher auf mittlere bis große Webprojekte ausgelegt und ein entsprechender Funktionsumfang steht zur Verfügung, in den man sich zuerst einarbeiten muss. Joomla! wurde mit der Zielrichtung auf kleinere Webprojekte entwickelt und ist u.a. nicht dafür ausgelegt, mehrere Webseiten mit unterschiedlichem Design zu verwalten. Dadurch konnten wir das Design auch nicht in Joomla! integrieren und die Implementierung in einem CMS war auf Grund der Vorgabe der einfachen Wartung und Erweiterbarkeit unabdinglich. Ein weiterer Vorteil von Typo3 ist die einfache Generierung von dynamisch erzeugten Grafiken, die für die dynamische Realisierung des Designs notwendig sind. Sollte später einmal Bedarf bestehen, kann die aktuelle Typo3-Installation um weiter Webseiten ergänzt werden und es müssen für weitere Projekte keine eigenen CMS mehr am Server installiert werden. Außerdem ist durch die Verwendung von Typo3 durch mehrere große Firmen und Organisationen die Zukunft des Projektes „Typo3“ gesichtert.


52 von 151

3.2.3 Konfiguration von Typo3 Für das Projekt Infopanel musste unsere Typo3-Installation nur marginal angepasst werden. Die durchgeführten Änderungen sind nachfolgend aufgelistet:

Ändern des Passwortes des Backend Users Admin Setzen des Passwortes für das Install Tool Setzen des GraphicsMagick-Pfades Setzten der Variable „[GFX][im_version_5]=GM“ Setzen der Variable „[SYS][doNotCheckReferer] = 1“

3.2.4 Ändern von Hauptmenüpunkten Die Menüpunkte der Hauptseite sind in 2 Kategorien „menu-left“ und „menu-right“ unterteilt, die man unter „Infopanel-Index“ im Typo3-Tree findet Jede dieser Kategorien muss genau 5 Punkte (durch die Menüstruktur vorgegeben) beinhalten. Sollte sich einer dieser Punkte ändern, so benennt man den entsprechenden Menüpunkt um und ändert den Shortcut auf die neue Content-Page.

Abbildung 24 - Typo3-Menüstruktur - Hauptmenü Für das Ändern des Shortcuts oder Titels muss die Page selbst bearbeitet werden. Gehen Sie zum Editieren der Page wie im Abschnitt Typo3 beschrieben vor. Da als Page-Type „Shortcut“ gewählt ist, können Sie im Abschnitt „Shortcut to page“ eine Seite auswählen, auf die verwiesen werden soll. Dazu löschen Sie zunächst die sich aktuell in der Auswahl befindliche Seite durch markieren und einen Klick auf das „X“-Symbol. Für die erneute Auswahl klicken Sie auf das „Ordner“-Symbol. Es erscheint ein Pop-Up-Fenster in dem Sie durch den Tree zur entsprechenden Seite navigieren und durch Klick auf das „Pfeil“-Symbol einen Record auswählen, der nun im linken Bereich des Pop-Ups angezeigt wird. Wählen Sie dort durch einen Klick auf das „+“-Symbol die entsprechende Seite aus. Diese erscheint nun im Auswahlfeld des Abschnitts „Shortcut to page“. Speichern Sie die Seite und die Änderungen werden übernommen.


53 von 151

Abbildung 25 - Typo3 - Shortcut

3.2.5 Hinzufügen von Seiten Vor dem Hinzufügen einer Seite müssen Sie entscheiden, ob es sich um eine Unterseite mit oder ohne Menü handelt. Somit gibt es für Seiten mit und ohne Unterseiten 2 verschiedene Bereiche im Typo3-Tree die jeweils mit einem anderen Template konfiguriert sind.

Abbildung 26 - Typo3-Menüstruktur


54 von 151

Seiten ohne Menü können im Abschnitt „Infopanel-Content -> without menu“ des Trees einfach angelegt werden. Um diese mit einem Hauptmenüpunkt zu verlinken, kann dem vorhergehenden Abschnitt „Ändern von Hauptmenüpunkten“ entnommen werden. Sollte die Seite Unterseiten und somit ein Menü besitzen, so muss dieses im Abschnitt „Infopanel-Content -> with menu“ angelegt werden. Dabei ist die erste Seite, die angelegt wird, jene Seite, auf die ein Hauptmenüpunkt verlinkt. Alle Seiten, die sich dann innerhalb dieser Seite befinden, sind erst die Unterseiten die am Infopanel angezeigt werden. Damit dieses Konstrukt funktioniert, dürfen Sie allerdings nicht vergessen, von jener Seite, welche die Unterseiten beinhaltet, einen Shortcut auf eine der Unterseiten anzulegen. Dieser Shortcut muss auf jene Seite zeigen die beim Aufruf der Seite zuerst angezeigt werden soll. Weiters ist noch zu beachten, dass der verwendete Namen jener Seite, welche die Unterseiten beinhaltet, mit dem Hauptmenüpunkt, der darauf verlinkt, möglichst identisch sein sollte, da dieser Titel als Titel am Infopanel angezeigt wird.

3.2.6 Verzeichnisstruktur

Die Verzeichnisse, die JSP, JS, CSS und HTML-Code für das Projekt enthalten, finden sich im „fileadmin/“-Verzeichnis von Typo3. Grundlegend ist zu sagen, dass die Bezeichnung der Ordner eindeutig ist und sich beispielsweise hinter dem Ordner „images“ auch nur Bilder verbergen. Die untere Auflistung beschreibt daher nur das Grundlegendste.


55 von 151

fileadmin/ Ein Verzeichnis der Typo3-Installation.

../content/ JSP-Files und Templates für die Darstellung des Inhaltes. Jede Sektion des Infopanels erhält hier einen eigenen Ordner.

../../content/ CSS, JSP, Grafik-Dateien die von allen Content-Seiten benötigt werden.

fonts/ Enthält die für die Erzeugung der Grafiken benötigten Fonts.

templates/ Enthält die für die Erstellung der Seiten durch Typo3 benötigten Templates.

../favicon/ Favicon für die Webseite

../infopanel-content/ HTML-Templates, CSS, JavaScript und Grafiken für die Content-Seien, die mit Hilfe von Typo3 generiert wird.

../infopanel-index/ HTML-Templates, CSS, JavaScript und Grafiken für die Startseite, die mit Hilfe von Typo3 generiert wird.

Abbildung 27 - Ordnerstruktur fileadmin/

3.3 Arbeiten mit Typo3 Die Darstellung des Infopanels wird mit Hilfe von Typo3 und JSP-Files realisiert. Dabei werden das Grunddesign und die Menüführung mit Typo3 erstellt und der Inhalt wird mit Hilfe von JSP-Dateien generiert, die in das Typo3-Grundgerüst eingebunden sind. Typo3 wird hier benötigt um die Grafiken der einzelnen Menüpunkte und die Grafiken der Überschriften, die sich ja je nach aufgerufenem Menüpunkt ändern, dynamisch zu erzeugen. Weiters ist das Einbinden der JSP-Dateien mit wenigen Mouse-Klicks erledigt. Typo3 benötigt für die Erstellung einer Seite HTML-Templates mit CSS und ein TypoScript. Die JSP-Seiten beinhalten den HTML-Code direkt und binden nur noch ein CSS ein. Die Grunddokumentation des Codes findet im TypoScript-Code der Hauptseite statt, in den beiden anderen TypoScript-Codes wurden nur noch neue Funktionen dokumentiert.


56 von 151

3.3.1 Hauptseite Die Hauptseite wird vollständig in Typo3 generiert. Dabei wird in Typo3 die vollständige Menüstruktur abgebildet und auch die Grafiken für die Buttons werden über Typo3 automatisch generiert. Dies gewährleistet eine hohe Dynamik und schnelle Änderung der Hauptmenüpunkte.

Abbildung 28 - Screenshot Hauptseite Das dazugehörige HTML-Template und die CSS-Formatvorlage wird im folgenden vorgestellt.

3.3.1.1 HTML-Template ###DOKUMENT### <div id="HiddenLogin" style="position:absolute; left:406px; top:345px; width:110px; height:35px; z-index:1"> <a href="index.php?id=51"> <img src="fileadmin/templates/infopanel-index/images/blank.gif" width="110" height="35" border="0"> </a> </div> <table width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="512" height="712" align="left" valign="middle"> <table width="100%" border="0" cellpadding="10"> <tr> <td align="left" valign="middle"> <br> ###MENU_LEFT### </td> </tr> </table> </td> <td width="512" height="712" align="right" valign="middle"> <table width="100%" border="0" cellpadding="10"> <tr> <td align="right" valign="middle"> <br> ###MENU_RIGHT### </td> </tr> </table> </td> </tr>


57 von 151

<tr valign="top"> <td height="55" colspan="2"> <table width="1024" height="38" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="387"></td> <td width="391"> <span class="copyright"> <a href="index.php?id=51"> © 2006 by Christian Bartl, Thomas Fischl, Sebastian Hochgatterer </a> </span> </td> <td width="246" align="left"> <a href="./index.php?id=88"> <img src="fileadmin/templates/infopanel-index/images/ logos/b&r.gif" width="59" height="33" border="0"> </a> <a href="./index.php?id=89"> <img src="fileadmin/templates/infopanel-index/ images/logos/cisco.gif" width="40" height="33" border="0"> </a> <a href="./index.php?id=91"> <img src="fileadmin/templates/infopanel-index/images/ logos/elc_oe.gif" width="40" height="33" border="0"> </a> <a href="./index.php?id=90"> <img src="fileadmin/templates/infopanel-index/images/ logos/elc.gif" width="40" height="33" border="0"> </a> </td> </tr> </table> </td> </tr> </table> ###DOKUMENT###

3.3.1.2 CSS body { background-color: #AAA79D; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image: url("../images/bg/bg.gif"); background-repeat: no-repeat; cursor: hand; } .copyright { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000 } A:link { text-decoration: none; color: #000000 } A:visited { text-decoration: none; color: #000000 } A:hover { text-decoration: underline overline ; color: #000000 } A:active { text-decoration: none; color: #000000 }


58 von 151

3.3.1.3 TypoScript page_main = PAGE // Legt eine neue Seite an page_main.typeNum = 0 // Gibt an bei welcher TypeNum (Standard ist 0) die Seite generiert werden soll page_main { shortcutIcon = fileadmin/templates/favicon/favicon.ico // Bindet ein Favicon für die Webseite ein stylesheet = fileadmin/templates/infopanel-index/css/index.css // Bindet einen externen Stylesheet in die Webseite ein meta.AUTHOR = Christian Bartl, Thomas Fischl, Sebastian Hochgatterer meta.DESCRIPTION = Startpage of the Infopanel // Fügt Metadaten zur Webseite hinzu. bodyTag = <body scroll="no"> // Verhindert, dass die Webseite scrollbar ist 10 = TEMPLATE // Legt ein neues Template an 10.template = FILE // Legt ein neues File an 10.template.file = fileadmin/templates/infopanel-index/template/index.htm // Template basiert auf dem eingebundenen HTML Template 10.workOnSubpart = DOKUMENT // Subpart „Dokument“ des HTML-Templates verwenden um den unten generierten TypoScript-Code einzufügen 10.marks { // In marks wird der TypoScript-Code für die einzelnen Marken definiert. Hier sind es die Marker MENU_LEFT und MENU_RIGHT. /* Das Menü für die linke Seite der Webseite */ MENU_LEFT = HMENU // Menü erzeugen MENU_LEFT.special = directory // Typ des zu erstellenden Menüs festlegen MENU_LEFT.special.value = 14 // Einstiegspunkt für die Erzeugung des Menüs ist die Seite mit der ID 14 MENU_LEFT.entryLevel = 0 // Level 0 ist der Einstiegspunkt, d.h. es werden alle Seiten die sich ab der ersten Ebene innerhalb des Einstiegspunkts befinden angezeigt MENU_LEFT.1 = GMENU // Das Menü wird als Menü mit Grafiken erstellt MENU_LEFT.1.NO = 1 // Erstellen des Menüs im Normal-Zustand MENU_LEFT.1.NO { wrap = |<br><br> // nach jedem Menüpunkt zwei Zeilen Abstand XY = 330,70 // Größe der Grafiken backColor = #58514d // Hintergrundfarbe die Transparent gesetzt wird transparentBackground = 1 // Grafiken werden mit transparentem Hintergrund erzeugt 5 = IMAGE // Grafik erzeugen 5.file = fileadmin/templates/infopanel-index/images/buttons/ button_left1.gif || fileadmin/templates/infopanel-index/ images/buttons/button_left2.gif || fileadmin/templates/ infopanel-index/images/buttons/button_left3.gif || fileadmin/templates/infopanel-index/images/buttons/ button_left4.gif || fileadmin/templates/infopanel-index/ images/buttons/button_left5.gif // Die folgenden vorgefertigten Grafiken werden für das Menü verwendet. Dabei wird hier der Reihe nach eine Datei nach der anderen verwendet. So lassen sich die 5 Menüpunkte mit unterschiedlichen Grafiken darstellen. 10 = TEXT // Text erzeugen 10.text.field = title // Der Titel der Webseite wird die Beschriftung des Buttons


59 von 151

10.fontColor = #FFFFFF // Legt die Schriftfarbe fest 10.fontFile = fileadmin/fonts/arialbd.ttf // Legt die Schriftart durch eine ttf-Datei fest 10.fontSize = 20 // Legt die Schriftgröße fest 10.niceText = 0 // Die Funktion niceText (Glätten der Schrift) wird nicht verwendet 10.maxWidth = 255 // Gibt die maximale Breite des Textes in Pixel an bevor diese umgebrochen wird 10.align = left // Ausrichtung des Textes innerhalb der maxWidth 10.offset = 20,45 //Abstand des Textes zu linkem und oberen Rand der Grafik 10.shadow.offset = 1,1 // Erzeugt einen Schatten mit Abstand 1 zum linken und oberen Rand der Schrift. Wird keine shadow.color = #Wert angegeben wird automatisch die Farbe Schwarz #000000 gewählt. 10.shadow.blur = 1 // Blur-Funktion für den Schatten aktivieren 10.shadow.opacity = 80 // Transparenz des Schattens 80% } // Erstellen des Menüs im Rollover-Zustand MENU_LEFT.1.RO < .MENU_LEFT.1.NO // Kopiert den Normal-Zustand auf den Rollover-Zustand MENU_LEFT.1.RO { 5.file = fileadmin/templates/infopanel-index/images/buttons/ button_left1_over.gif || fileadmin/templates/infopanel- index/images/buttons/button_left2_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_left3_over.gif || fileadmin/templates/infopanel- index/images/buttons/button_left4_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_left5_over.gif 10.fontColor = #000000 10.shadow.color = #FFFFFF // Grafiken, Schriftfarbe und Schattenfarbe werden ausgetauscht } /* Das Menü für die linke Seite der Webseite. Nähere Dokumentation der Punkte siehe MENU_LEFT */ MENU_RIGHT = HMENU MENU_RIGHT.special = directory MENU_RIGHT.special.value = 13 MENU_RIGHT.entryLevel = 0 MENU_RIGHT.1 = GMENU MENU_RIGHT.1.NO = 1 MENU_RIGHT.1.NO { wrap = |<br><br> XY = 330,70 backColor = #58514d transparentBackground = 1 5 = IMAGE 5.file = fileadmin/templates/infopanel-index/images/buttons/ button_right1.gif || fileadmin/templates/infopanel- index/images/buttons/button_right2.gif || fileadmin/ templates/infopanel-index/images/buttons/button_right3.gif || fileadmin/templates/infopanel-index/images/buttons/ button_right4.gif || fileadmin/templates/infopanel-index/ images/buttons/button_right5.gif 10 = TEXT 10.text.field = title 10.fontColor = #FFFFFF 10.fontFile = fileadmin/fonts/arialbd.ttf 10.fontSize = 20 10.niceText = 0 10.maxWidth = 255 10.align = right 10.offset = -20,45 10.shadow.offset = 1,1 10.shadow.blur = 1 10.shadow.opacity = 80 }


60 von 151

MENU_RIGHT.1.RO < .MENU_RIGHT.1.NO MENU_RIGHT.1.RO { 5.file = fileadmin/templates/infopanel-index/images/buttons/ button_right1_over.gif || fileadmin/templates/infopanel- index/images/buttons/button_right2_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_right3_over.gif || fileadmin/templates/infopanel- index/images/buttons/button_right4_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_right5_over.gif 10.fontColor = #000000 10.shadow.color = #FFFFFF }

3.3.2 Unterseite mit Menü Die Unterseiten werden ebenfalls von Typo3 generiert. Auch hier werden die Grafiken für das Menü dynamisch generiert. Dazu ist natürlich TypoScript notwendig. Die Anzeige von Informationen passiert in einem iFrame. Dieser wird über eine Typo3-Extension als Content auf den einzelnen Seiten eingebunden. Der Inhalt wird mit Hilfe von JSP-Dateien von Typo3 unabhängig dargestellt. Typo3 bindet diese JSP-Dateien nur über eine URL mittels iFrame in die Struktur der Webseite ein.

Abbildung 29 - Unterseite mit Menü

3.3.2.1 HTML-Template ###DOKUMENT### <div id="Navigation" style="position:absolute; left:718px; top:26px; width:297px; height:58px; z-index:1"> <table width="100%" height="60" border="0"> <tr align="center"> <td width="33%" valign="middle"> <a href="javascript:history.back()" onMouseOut= "MM_swapImgRestore()" onMouseOver="MM_swapImage('backward','', 'fileadmin/templates/infopanel-content/images/buttons/ backward_over.gif',1)"><img src="fileadmin/templates/ infopanel-content/images/buttons/backward.gif" alt="backward" name="backward" width="60" height="50" border="0"> </a> </td> <td width="34%"valign="middle"> <a href="." onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','fileadmin/templates/ infopanel-content/images/buttons/home_over.gif',1)"><img


61 von 151

src="fileadmin/templates/infopanel-content/images/buttons/ home.gif" alt="home" name="home" width="60" height="50" border="0"> </a> </td> <td width="33%" valign="middle"> <a href="javascript:history.forward()" onMouseOut= "MM_swapImgRestore()" onMouseOver="MM_swapImage('backward','', 'fileadmin/templates/infopanel-content/images/buttons/ forward_over.gif',1)"><img src="fileadmin/templates/ infopanel-content/images/buttons/forward.gif" alt="backward" name="backward" width="60" height="50" border="0"> </a> </td> </tr> </table> </div> <table width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td height="112" colspan="2"> ###TITLE### </td> </tr> <tr> <td width="265" align="center" valign="top"> ###MENU### </td> <td width="759" align="left" valign="top"> ###CONTENT### </td> </tr> </table> ###DOKUMENT###

3.3.2.2 CSS body { background-color: #AAA79D; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image: url("../images/bg/bg.gif"); background-repeat: no-repeat; cursor: hand; }

3.3.2.3 JavaScript function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) { if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; } } else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];


62 von 151

} } } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){ document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; } }

3.3.2.4 TypoScript page_main = PAGE page_main.typeNum = 0 page_main { shortcutIcon = fileadmin/templates/favicon/favicon.ico stylesheet = fileadmin/templates/infopanel-content/css/content.css meta.AUTHOR = Christian Bartl, Thomas Fischl, Sebastian Hochgatterer meta.DESCRIPTION = Contentpage of the Infopanel headerData.5 = TEXT // Legt neue Headerdaten an headerData.5.value = <script language="JavaScript" type="text/javascript" src="fileadmin/templates/infopanel-content/ js/rollover.js"></script> // Text der im Header des HTML-Codes erscheinen soll bodyTag = <body scroll="no" onLoad="MM_preloadImages('fileadmin/ templates/infopanel-content/images/buttons/forward_over.gif', 'fileadmin/templates/infopanel-content/images/buttons/ backward_over.gif','fileadmin/templates/infopanel-content/ images/buttons/home_over.gif','fileadmin/templates/infopanel- content/images/buttons/login_over.gif')"> // bodyTag der HTML-Datei mit den JavaScript-Code für die Swap-Image Funktionen 10 = TEMPLATE 10.template = FILE 10.template.file = fileadmin/templates/infopanel-content/ template/content.htm 10.workOnSubpart = DOKUMENT 10.marks { TITLE = IMAGE // Erzeugen der Headergrafik TITLE.file = GIFBUILDER TITLE.file { XY = 650,85 backColor = #FFFFFF 5 = IMAGE // Template der Grafik 5.file = fileadmin/templates/infopanel-content/images/ elements/title.gif 5.offset = 0,0 10 = TEXT // Hinzufügen des Titels der aktuell angezeigten Webseite 10.text.field = title


63 von 151

10.fontSize = 14 10.fontFile = fileadmin/fonts/arialbi.ttf 10.fontColor = #222222 10.spacing = 5 10.offset = 60,78 40 = TEXT // Hinzufügen des Titel des Menüpunktes in dem man sich aktuell befindet 40.text.data = leveltitle:-2 /* gibt den Level der Seite, von der der Titel dargestellt werden soll, ausgehend von der aktuell angezeigten, an. 0 ist der erste Level innerhalb der aktuellen Seite -1 ist die aktuelle Seite selbst -2 ist die Seite eine Ebene über der aktuellen Seite */ 40.fontSize = 24 40.fontFile = fileadmin/fonts/arialbd.ttf 40.fontColor = #FFA200 40.spacing = 10 40.offset = 20,54 40.shadow.offset = 4,4 40.shadow.color = #FFFFFF 40.shadow.blur = 100 40.shadow.opacity = 80 40.shadow.intensity = 30 } MENU = HMENU MENU.entryLevel = 0 MENU.special = directory MENU.special.value.data = leveluid:-2 MENU.1 = GMENU MENU.1.NO = 1 MENU.1.NO { wrap = |<br><br> XY = 240, 50 backColor = #58514d 5 = IMAGE 5.file = fileadmin/templates/infopanel-content/images/ buttons/button.gif 10 = TEXT 10.text.field = title 10.fontColor = #FFFFFF 10.fontFile = fileadmin/fonts/arialbd.ttf 10.fontSize = 13 10.niceText = 0 10.maxWidth = 230 10.align = center 10.offset = -5,27 10.shadow.offset = 1,1 10.shadow.blur = 1 10.shadow.opacity = 80 } MENU.1.RO < .MENU.1.NO MENU.1.RO { 5.file = fileadmin/templates/infopanel-content/images/ buttons/button_over.gif 10.fontColor = #000000 10.shadow.color = #FFFFFF } MENU.1.CUR < .MENU.1.RO MENU.1.CUR { 5.file = fileadmin/templates/infopanel-content/images/ buttons/button_current.gif 10.fontColor = #111111 10.fontFile = fileadmin/fonts/arialbi.ttf } CONTENT=CONTENT // Fügt den Inhalt von Typo3 in das Template ein CONTENT{ table=tt_content // tt_content ist der Content der auf den Webseiten über Typo3


64 von 151

angelegt werden kann (z.B. Tabellen, Text, Grafiken) select.orderBy=sorting // Ausgabe in der Reihenfolge wie sie im Backend vom Ersteller auf den Webseiten angeordnet wurden. select.where=colPos=0 // Es wird nur Inhalt der mittleren Spalte der einzelnen Seiten dargestellt. (Typo3 bietet standardmäßig auf Seiten 3 Spalten in denen Inhalt erzeugt werden kann an.) } } }

3.3.3 Unterseite ohne Menü Unterseiten ohne seitliches Menü besitzen keine weiteren Unterseiten und benötigen daher auch kein Menü. Diese beinhalten nur einen iFrame für die Darstellung von Inhalt.

Abbildung 30 - Unterseite ohne Menü

3.3.3.1 HTML-Template ###DOKUMENT### <div id="Navigation" style="position:absolute; left:718px; top:26px; width:297px; height:58px; z-index:1"> <table width="100%" height="60" border="0"> <tr align="center"> <td width="33%" valign="middle"> <a href="javascript:history.back()" onMouseOut= "MM_swapImgRestore()" onMouseOver="MM_swapImage('backward','', 'fileadmin/templates/infopanel-content/images/buttons/ backward_over.gif',1)"><img src="fileadmin/templates/ infopanel-content/images/buttons/backward.gif" alt="backward" name="backward" width="60" height="50" border="0"> </a> </td> <td width="34%"valign="middle"> <a href="." onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','fileadmin/templates/ infopanel-content/images/buttons/home_over.gif',1)"><img src="fileadmin/templates/infopanel-content/images/buttons/ home.gif" alt="home" name="home" width="60" height="50" border="0"> </a> </td> <td width="33%" valign="middle"> <a href="javascript:history.forward()" onMouseOut= "MM_swapImgRestore()" onMouseOver="MM_swapImage('backward','', 'fileadmin/templates/infopanel-content/images/buttons/


65 von 151

forward_over.gif',1)"><img src="fileadmin/templates/ infopanel-content/images/buttons/forward.gif" alt="backward" name="backward" width="60" height="50" border="0"> </a> </td> </tr> </table> </div> <table width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr valign="top"> <td height="112"> ###TITLE### </td> </tr> <tr> <td align="center" valign="top"> ###CONTENT### </td> </tr> </table> ###DOKUMENT###

3.3.3.2 CSS body { background-color: #AAA79D; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-image: url("../images/bg/bg.gif"); background-repeat: no-repeat; cursor: hand; }

3.3.3.3 JavaScript function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) { if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; } } else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; } } } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n];


66 von 151

for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){ document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; } }

3.3.3.4 TypoScript page_main = PAGE page_main.typeNum = 0 page_main { shortcutIcon = fileadmin/templates/favicon/favicon.ico stylesheet = fileadmin/templates/infopanel-content/css/content.css meta.AUTHOR = Christian Bartl, Thomas Fischl, Sebastian Hochgatterer meta.DESCRIPTION = Contentpage of the Infopanel headerData.5 = TEXT headerData.5.value = <script language="JavaScript" type="text/javascript" src="fileadmin/templates/infopanel-content/js/ rollover.js"></script> bodyTag = <body scroll="no" onLoad="MM_preloadImages('fileadmin/ templates/infopanel-content/images/buttons/forward_over.gif', 'fileadmin/templates/infopanel-content/images/buttons/ backward_over.gif','fileadmin/templates/infopanel-content/ images/buttons/home_over.gif','fileadmin/templates/infopanel- content/images/buttons/login_over.gif')"> 10 = TEMPLATE 10.template = FILE 10.template.file = fileadmin/templates/infopanel-content/template/ content_withoutmenu.htm 10.workOnSubpart = DOKUMENT 10.marks { TITLE = IMAGE TITLE.file = GIFBUILDER TITLE.file { XY = 650,85 backColor = #FFFFFF 5 = IMAGE 5.file = fileadmin/templates/infopanel-content/images/ elements/title.gif 5.offset = 0,0 10 = TEXT 10.text.field = title 10.fontSize = 14 10.fontFile = fileadmin/fonts/arialbi.ttf 10.fontColor = #222222 10.spacing = 5 10.offset = 60,78 40 = TEXT 40.text.field = title 40.fontSize = 24 40.fontFile = fileadmin/fonts/arialbd.ttf 40.fontColor = #FFA200 40.spacing = 10 40.offset = 20,54 40.shadow.offset = 4,4 40.shadow.color = #FFFFFF 40.shadow.blur = 100 40.shadow.opacity = 80 40.shadow.intensity = 30 }


67 von 151

CONTENT=CONTENT CONTENT{ table=tt_content select.orderBy=sorting select.where=colPos=0 } } }

3.3.4 Content-Seite Die Content-Seiten sind JSP-Dateien die im Großen und Ganzen das unten angeführte HTML-Template als Basis benutzen. Die JSP-Dateien wurden allerdings per Hand geschrieben und nicht mittels Typo3 erstellt. Daher enthält jede JSP-Datei auch den vollständigen HTML-Code.

3.3.4.1 HTML-Template (with menu) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="TYPO3 4.0 CMS" /> <meta name="AUTHOR" content="Christian Bartl, Thomas Fischl, Sebastian Hochgatterer" /> <meta name="DESCRIPTION" content="Contentpage of the Infopanel" /> <title>Infopanel: Impressum</title> <link rel="stylesheet" type="text/css" href="../content/css/content.css" /> </head> <body> <table width="715" height="630" border="0" align="center"> <tr> <td align="center" valign="top"> <table width="715" border="0" cellspacing="0"> <tr> <td height="30" colspan="2" background="../content/images/ elements/title.gif" style="background-repeat:no-repeat" class="text" > <p> <strong> Title </strong> </p> </td> </tr> < tr> <td width="20"> </td> <td width="695" class="text"> Text </td> </tr> </table> </td> </tr> <tr> <td height="20" align="center" valign="bottom"> <table width="280" border="0" align="center" cellspacing="0" bgcolor="#9B9B99"> <tr> <td align="center" valign="middle"> <span class="copyright"> © 2006 Christian Bartl, Thomas Fischl, Sebastian Hochgatterer </span> </td> </tr> </table> </td> </tr> </table>


68 von 151

</body> </html>

3.3.4.2 HTML-Template (without menu) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="TYPO3 4.0 CMS" /> <meta name="AUTHOR" content="Christian Bartl, Thomas Fischl, Sebastian Hochgatterer" /> <meta name="DESCRIPTION" content="Contentpage of the Infopanel" /> <title>Infopanel: Impressum</title> <link rel="stylesheet" type="text/css" href="../content/css/content.css" /> </head> <body> <table width="965" height="630" border="0" align="center"> <tr> <td align="center" valign="top"> <table width="715" border="0" cellspacing="0"> <tr> <td height="30" colspan="2" background="../content/images/ elements/title.gif" style="background-repeat:no-repeat" class="text" > <p> <strong> Title </strong> </p> </td> </tr> < tr> <td width="20"> </td> <td width="945" class="text"> Text </td> </tr> </table> </td> </tr> <tr> <td height="20" align="center" valign="bottom"> <table width="280" border="0" align="center" cellspacing="0" bgcolor="#9B9B99"> <tr> <td align="center" valign="middle"> <span class="copyright"> © 2006 Christian Bartl, Thomas Fischl, Sebastian Hochgatterer </span> </td> </tr> </table> </td> </tr> </table> </body> </html>

3.3.4.3 CSS body { background-color: #878785; margin-left: 0px; margin-top: 3px; margin-right: 0px; margin-bottom: 3px; background-image: url("../images/bg/bg.gif"); background-repeat: no-repeat;


69 von 151

background-position: right top; background-attachment: fixed; cursor: hand; scrollbar-face-color: #58514d; /*Hintergrundfarbe*/ scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #CAC9B5; /*Farbe hinter Schieber*/ scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #EFEFEF; /*Schattenfarbe*/ scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D85D03; /*Pfeilfarbe*/ } A:link { text-decoration: none; color: #000000 } A:visited { text-decoration: none; color: #000000 } A:hover { text-decoration: underline overline ; color: #000000 } A:active { text-decoration: none; color: #000000 } .title { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bold; font-size: 28px; } .text { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 17px; } .copyright { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 9px; } /*Formular anpassen*/ input { color:#000000; font-size: 17px; font-family: Arial, Helvetica, sans-serif; background: #C0BEB6; border: 1px solid #FFFFFF; width: 280px; height: 26px; text-align:center; } input.submit { color:#FFFFFF; font-size: 17px; font-family: Arial, Helvetica, sans-serif; background: #D85D03; border: 1px solid #FFFFFF; width: 150px; height: 26px; }

Typo3 Dokumentation - Infopanel

70 von 151

4 Typo3 Typo3 ist eines der meist verwendeten OpenSource-Content Mangement Systeme. Namhafte Firmen bauen ihre Homepages komplett auf diesem System auf. Wie schon erwähnt, handelt es sich bei Typo3 um ein so genanntes CMS (CMS = Content Management System). Ein CMS-System basiert auf dem grundlegenden Merkmal für den Aufbau einer Homepage, den Inhalt von dessen Layout und Formatierungen zu trennen. So sind Designwechsel und Umstrukturierungen einer Homepage binnen kürzester Zeit ohne größeren Aufwand und ohne Bearbeitung des Inhalts möglich. Weiters kann Inhalt über ein sogenanntes Backend mittels grafischer Oberfläche (GUI) ohne Probleme hinzugefügt werden. Neue Seiten werden dabei automatisch im Menü verlinkt. Typo3 besitzt ein Backend, über das das System konfiguriert wird. Das Frontend ist die Webseite selbst, welche der Besucher zu sehen bekommt. Typo3 ist vollständig in PHP implementiert und lässt sich so ohne großen Aufwand auf den verschiedensten Plattformen installieren und betreiben. Die einzelnen Webseiten werden nicht - wie bei HTML - als Files gespeichert sondern bei jedem Aufruf neu generiert. Die entsprechenden Daten ( Text, Bilder, usw.) samt den Templates für die Generierungsvorschrift werden zu diesem Zweck von einer Datenbank geladen. Die Texte und Bilder werden von den einzelnen Reportern zur Verfügung gestellt und jeweils in der Datenbank abgespeichert. Das Aussehen der Homepage (Menüstruktur, Navigation, etc) wird über so genannte Templates festgelegt. Templates sind HTML-Seiten, welche Platzhalter für das Typo-Script enthalten. Das Aussehen und die Formatierung (Look And Feel) werden per CSS gesteuert. Typo3 verwendet für den Aufbau und die dynamische Generierung das eigene Typo-Script. Über dieses wird zum Beispiel der Aufbau des Menüs oder der anzuzeigende Fenstertitel gesteuert. Dabei holt sich das Script die jeweiligen Informationen aus der Datenbank, die den Seitenbaum enthält. Die Homepage selbst wird in einer Baumstruktur aufgebaut. Dabei wird der Baum für das Menü verwendet. Die einzelnen Seiten-Objekt enthalten dann den Inhalt der Homepage. Typo3 ist sicher eines der mächtigsten und umfangreichsten CMS im OpenSource-Sektor. Dementsprechend lange dauert es auch, sich in das System einzuarbeiten. Für kleinere Projekte sind kleinere CMS wie Joomla besser geeignet. Soll es aber eine umfangreiche Firmenhomepage sein oder viele verschiedene Templates benötigt werden, so ist Typo3 in die engere Wahl zu ziehen. Insbesondere das Erstellen eines Templates setzt eine Vertiefung in entpsrechende Tutorials voraus.

4.1 Web Content Management System

4.1.1 Begriffsdefinition CMS-System Ein Content Managment System (CMS) ist eine Anwendung, welche die gemeinsame Erstellung und Bearbeitung von Inhalten (Content) wie Text- und Multimediadateien ermöglicht und organisiert. Das Ziel eines CMS ist es, dem Benutzer eine Oberfläche zu bieten, mit der dieser z.B. eine Webseite ohne Programmierkenntnisse verwalten kann. Dabei wird vor allem auf Medienneutralität (Der Inhalt soll auf Wunsch beispielsweise als HTML- oder als PDF-Dokument ausgegeben werden.), Barrierefreiheit und eine Rechteverwaltung wert gelegt. Dabei wird in Typo3 vor allem auf das „redaktionsähnliche Arbeiten“ wert gelegt. Bei einem Redaktionssystem


71 von 151

verfasst ein Redakteur einen Artikel im CMS und dieser muss zunächst von einem zweiten Redakteur korrekturgelsen und von einem Administrator freigegeben werden, bevor dieser danach automatisch auf der Homepage angezeigt wird. Grundsätzlich unterscheidet man zwischen Server und Client CMS:

Server CMS Das CMS wird auf einem Server installiert und benötigt eine serverseitige Programmiersprache (z.b. PHP) und eine Datenbank (z.B. MySQL). Dabei werden alle Daten in der Datenbank abgelegt und in der Regel mit Hilfe eines Browsers über das Internet verwaltet. Dabei können die meisten Systeme benutzerspezifische Rechte verwalten.

Client CMS Ein Client CMS benötigt ein auf einem Rechner installiertes Programm. Die Daten werden dann lokal verwaltet und bearbeitet und danach meist mittels FTP auf den Server geladen.

Weiters werden die Systeme noch nach der Art der Erstellung der Inhalte unterschieden:

Volldynamische Systeme Volldynamische Systeme berechnen bei jedem Aufruf die angeforderten Seiten neu. Dadurch ist die Webseite 100% aktuell und eine Personalisierung der Homepage einfach realisierbar, jedoch kann sich die Auslieferung der Seiten durch die hohe Belastung des Servers verzögern.

Statische Systeme Statische Systeme berechnen die Webseite vollständig vor und legen diese im Dateisystem ab, dadurch ist aber auch eine schnelle Auslieferung der Daten möglich und es werden auch nur zur Veröffentlichung freigegebene Dateien im Cache gelagert. Die Aktualisierung des Inhalts erfolgt meist etwas zeitverzögert. Eine Personalisierung ist nur schwer realisierbar.

Hybride Systeme Hybride System kombinieren die Vorteile von statischen und dynamischen Systemen. Diese legen Seiten die keinen laufenden Änderungen unterliegen (Seitengerüst, Navigation, usw.) als statische Seiten im Cache ab. Nur der Inhalt wird dynamisch aus der Datenbank generiert. Welche Seiten zur Laufzeit dynamisch generiert werden müssen, erkennt das System automatisch. Damit wird ein Maximum an Dynamik und Performance erreicht.

4.1.2 Web CMS

Ein Web Content Management System (WCMS) ist ein CMS, welches für die Veröffentlichung und Generierung von Webseiten zuständig ist. Umfassendere CMS Systeme können ihre Daten nicht nur nach HTML sondern auch in andere Formate wie XML oder PDF ausgeben bzw. für eine Druckvorstufe aufbereiten.


72 von 151

Anforderungen[19] Unterstützung eines Publishing-Prozesses, an dem sich mehrere

Personen mit verschiedenen Aufgaben beteiligen, z. B. Autoren, Editoren und Webmaster, die Inhalte erzeugen, genehmigen oder freischalten.

Vorlagenbereitstellung für verschiedene Typen von Einzelseiten oder Web-Sites (Site-Templates).

Content Life-Cycle-Management, um z.B. Inhalte zeitlich begrenzt zu veröffentlichen oder zu archivieren.

Zielgruppengerechte Darstellung von Inhalten, im Fachslang „Targeting“ (deutsch: Zielen) genannt.

Zweitverwertung von Inhalten, die anderswo schon vorhanden sind, ohne dass die Daten, welche die Inhalte ausführen, komplett kopiert werden müssen.

4.1.3 Markt-Übersicht (Web CMS – Systeme)

Das Angebot am Markt für CMS-Systeme ist beinahe unüberschaubar. Prinzipiell kann man zwischen OpenSource und kommerziellen Produkten unterscheiden. Tendenziell gesehen, werden immer öfter OpenSource-Produkte eingesetzt, da diese im Funktionsumfang und der Benutzerfreundlichkeit ihren kostenpflichtigen Brüdern in nichts mehr nachstehen. Die nachfolgende Matrix vergleicht den Funktionsumfang der beiden sehr populären OpenSource-Systeme Joomla! und Typo3 sowie den kommerziellen Produktion Macromedia Contribute und Microsoft CMS. Anzumerken ist, dass Macromedia mittlerweile von Adobe übernommen wurde. Jommla ist eher für kleinere schnell zu realisierende Webauftritte geeignet, während sich Typo3 an große Webprojekte richtet. Viele namhafte Firmen wie BMW, MAN, Axa, Ikea, Cisco, Coca-Cola, Philips, usw. bauen ihre Webauftritte auf Typo3 auf. Mit 200.000 Installationen weltweit, über 1.000 kostenlosen Erweiterungen und ein in 43 Sprachen übersetztes Backend ist Typo3 ein weltweit erprobtes CMS[20].

Tabelle 4 - CMS Matrix[21]

Product Joomla! 1.0.7 Macromedia Contribute 3 Microsoft CMS 2002 TYPO3 4.0.4

Last Updated 4/25/2006 3/24/2005 6/15/2005 1/15/2007

System Requirements Joomla! Macromedia Contribute Microsoft CMS TYPO3

Application Server Apache recommended, any server that supports PHP and MySQL

IIS, Websphere, BEA Weblogic, Apache, Tomcat

IIS + ASP.NET PHP 4.3.0+

Approximate Cost $0 2500 for 10 seats Free

Database MySQL MSSQL MySQL, PostGreSQL, Oracle, MSSQL

License GNU GPL Proprietary Commercial GNU GPL

Operating System Any Windows, OS X Windows Any

Programming Language PHP .NET, ASP, CFM, PHP, JSP, Perl, Python, TCL, etc.

.NET PHP

Root Access No No Yes No

Shell Access No No Yes No

Web Server Apache Any IIS Apache, IIS

19 http://de.wikipedia.org/wiki/Web_Content_Management_System 20 http://typo3.eccag.de/index.php?id=fakten 21 http://www.cmsmatrix.org/


73 von 151

Security Joomla! Macromedia Contribute Microsoft CMS TYPO3

Audit Trail No Yes Free Add On Yes

Captcha Yes No No Free Add On

Content Approval Yes Yes Yes Yes

Email Verification Yes No No Yes

Granular Privileges No Yes Yes Yes

Kerberos Authentication No No Yes No

LDAP Authentication Free Add On Yes Yes Free Add On

Login History Yes Yes Free Add On Yes

NIS Authentication No No No No

NTLM Authentication No No Yes Free Add On

Pluggable Authentication No No Yes Free Add On

Problem Notification No Yes No Yes

Sandbox No Yes Limited Yes

Session Management Yes No No Yes

SMB Authentication No No No Free Add On

SSL Compatible No Yes Yes Yes

SSL Logins No Yes Yes Yes

SSL Pages No No Yes Free Add On

Versioning Yes Yes Yes Yes

Support Joomla! Macromedia Contribute Microsoft CMS TYPO3

Certification Program No No No No

Code Skeletons No Free Add On

Commercial Manuals Yes Yes Yes Yes

Commercial Support Yes Yes Yes Yes

Commercial Training Yes Limited Yes Yes

Developer Community Yes Yes Yes Yes

Online Help Yes Yes Yes Yes

Pluggable API Yes Yes Yes Yes

Professional Hosting Yes No Yes Yes

Professional Services Yes Yes Yes Yes

Public Forum Yes Yes Yes Yes

Public Mailing List No Yes Yes Yes

Test Framework No Free Add On

Third-Party Developers Yes Yes Yes Yes

Users Conference Yes Yes No Yes

Ease of Use Joomla! Macromedia Contribute Microsoft CMS TYPO3

Drag-N-Drop Content No Yes No Free Add On

Email To Discussion Free Add On No No Free Add On

Friendly URLs Yes Yes Yes Yes

Image Resizing Yes Yes No Yes

Macro Language Yes No Free Add On Yes

Mass Upload No No Limited Free Add On

Prototyping Yes No No Free Add On

Server Page Language Yes Yes Yes Yes

Spell Checker No Yes Yes Yes

Style Wizard No Yes

Subscriptions No Yes No Free Add On

Template Language Yes Yes Free Add On Yes

UI Levels No Yes No Yes

Undo No Yes Free Add On Yes

WYSIWYG Editor Yes Yes Yes Yes

Zip Archives No Free Add On

Performance Joomla! Macromedia Contribute Microsoft CMS TYPO3

Advanced Caching Yes No Yes Yes

Database Replication No No No No

Load Balancing No No Yes No

Page Caching Yes No Yes Yes

Static Content Export No No Yes Free Add On

Management Joomla! Macromedia Contribute Microsoft CMS TYPO3

Advertising Management Yes No No Free Add On

Asset Management Yes Yes Yes Yes


74 von 151

Clipboard No Yes No Yes

Content Scheduling Yes No Yes Yes

Content Staging No Yes Yes Free Add On

Inline Administration Yes Yes Yes Yes

Online Administration Yes No Limited Yes

Package Deployment No No Yes Yes

Sub-sites / Roots Yes Yes Yes Yes

Themes / Skins Yes Yes No Yes

Trash Yes No Free Add On Free Add On

Web Statistics Yes No No Free Add On

Web-based Style/Template Management

Yes No Free Add On Yes

Web-based Translation Management

Free Add On No No Yes

Workflow Engine No No Limited Limited

Interoperability Joomla! Macromedia Contribute Microsoft CMS TYPO3

Content Syndication (RSS) Yes Yes Free Add On Yes

FTP Support Free Add On Yes No Yes

UTF-8 Support Limited Yes Yes Yes

WAI Compliant No No Free Add On Free Add On

WebDAV Support No Yes No No

XHTML Compliant No Yes Free Add On Yes

Flexibility Joomla! Macromedia Contribute Microsoft CMS TYPO3

CGI-mode Support No No No Yes

Content Reuse Yes Yes Yes Yes

Extensible User Profiles Yes Yes Yes Free Add On

Interface Localization Yes Yes No Yes

Metadata Yes No Yes Yes

Multi-lingual Content Free Add On Yes Free Add On Yes

Multi-lingual Content Integration

Free Add On No No Yes

Multi-Site Deployment Free Add On Yes Yes Yes

URL Rewriting Yes No Yes Yes

Wiki Aware Free Add On No No Free Add On

Built-in Applications Joomla! Macromedia Contribute Microsoft CMS TYPO3

Blog Yes No No Free Add On

Chat Free Add On No No Free Add On

Classifieds Free Add On No No Free Add On

Contact Management Yes No No Free Add On

Data Entry Free Add On No No Limited

Database Reports Free Add On No No Free Add On

Discussion / Forum Free Add On No No Free Add On

Document Management Free Add On No Yes Free Add On

Events Calendar Free Add On No Free Add On Free Add On

Events Management No Free Add On

Expense Reports Free Add On No No Free Add On

FAQ Management Yes No No Free Add On

File Distribution Free Add On No Yes Free Add On

Graphs and Charts Free Add On No No Free Add On

Groupware Free Add On No No Free Add On

Guest Book Free Add On No No Free Add On

Help Desk / Bug Reporting Free Add On No No Free Add On

HTTP Proxy No No No No

In/Out Board No No No No

Job Postings Free Add On No No Free Add On

Link Management Yes No Yes Free Add On

Mail Form Yes No No Yes

Matrix No Free Add On

My Page / Dashboard No Yes No Free Add On

Newsletter Free Add On No No Yes

Photo Gallery Free Add On Free Add On No Free Add On

Polls Yes No No Free Add On

Product Management Yes No No Free Add On


75 von 151

Project Tracking Free Add On No No Free Add On

Search Engine Yes No No Free Add On

Site Map Free Add On Yes Free Add On Yes

Stock Quotes No Free Add On

Surveys Free Add On No No Free Add On

Syndicated Content (RSS) Yes No Free Add On Free Add On

Tests / Quizzes Free Add On No No Free Add On

Time Tracking No No No Free Add On

User Contributions Yes Yes No Yes

Weather No Free Add On

Web Services Front End Free Add On Yes No Free Add On

Commerce Joomla! Macromedia Contribute Microsoft CMS TYPO3

Affiliate Tracking Free Add On No No Free Add On

Inventory Management Free Add On No No Free Add On

Pluggable Payments Free Add On No No Free Add On

Pluggable Shipping Free Add On No No Free Add On

Pluggable Tax Free Add On No No No

Point of Sale Free Add On No No No

Shopping Cart Free Add On No No Free Add On

Subscriptions Free Add On No No No

Wish Lists Free Add On No No Free Add On

4.1.4 Statischer versus dynamischer Webauftritt

Die Wahl für ein bestimmtes CMS-System ist von mehreren Faktoren abhängig:

Größe des Web-Projekt Wie oft ändert sich der Inhalt? Wie viele Leute sollen den Inhalt verwalten können? Sollen Leute ohne HTML-Kenntnisse Inhalte verwalten/verfassen

können? Sollen Grafiken dynamisch erzeugt werden? Erfüllt meine Infrastruktur (Server, Datenbank, PHP-Engine) die

Anforderungen eines CMS?

Aufgrund der Antworten der Fragen ist dann zu entscheiden, ob man seine Webseite fix in HTML codiert oder ein CMS verwendet. Bei kleinen Webauftritten oder Homepages, die den Inhalt selten ändern, lohnt es sich, statische Seiten zu verwenden. Ist ein großer Firmenauftritt mit einer ständig verändernden Produktpalette und regelmäßig zu aktualisierenden News geplant, wird sich der Einsatz eines CMS bezahlt machen.

4.2 Das CMS Typo3

4.2.1 Vorteile

Trennung von Inhalt und Layout viele Erweiterungen erhältlich umfangreiche Möglichkeiten im Gegensatz zu anderen CMS dynamische Erstellung von Grafiken Benutzerverwaltung umfangreiches Redaktionssystem umfangreiche Community viele Dienstleister die sich auf Typo3 spezialisiert haben


76 von 151

4.2.2 Nachteile

Einarbeitung in das Backend TypoScript muss erlernt werden bei dynamischer Generierung hohe Systemlast benötigt PHP und MySQL für kleine Projekte zu umfangreich da OpenSource, kein Support vom Hersteller

4.2.3 Systemvoraussetzungen Typo3 ist ein in PHP realisiertes Projekt, das seine Daten in einer Datenbank hinterlegt. Demnach benötigt man eine Webumgebung mit Webserver, PHP-Interpreter und Datenbank. Da Typo3 aus dem OpenSource-Sektor stammt ,wird hier bevorzugt Apache, PHP4/PHP5 und MySQL verwendet. Um Grafiken zu erzeugen wird zusätzlich ImageMagick oder GraphicsMagick sowie die GDlib benötigt. Je umfangreicher der Webauftritt und je mehr Inhalte vor allem Grafiken dynamisch erzeugt werden müssen, desto höher werden die Systemanforderungen an Prozessor und Arbeitsspeicher.

4.2.4 Wichtige Elemente

4.2.4.1 Frontend, Backend und Install Tool Typo3 unterscheidet zwischen einem Frontend und Backend. Als Frontend bezeichnet man die Webseite selbst, welche der Besucher zu Gesicht bekommt. Als Backend wird das Adminstrationsinterface bezeichnet. Das Typo3 realisiert das Backend mittels Skriptsprache PHP und ist somit über den Webbrowser aufrufbar. Über das Backend werden alle Funktionen von Typo3 verwaltet. So kann hier nicht nur der Inhalt bearbeitet werden, sondern auch das Aussehen der Webseite definiert oder verschiedene Benutzer verwaltet werden. Das Backend ist über „Typo3-Verzeichnis/typo3/“ erreichbar.

Abbildung 31 - Typo3-Backend


77 von 151

Mit Hilfe des Install Tools ist die Grundkonfiguration von Typo3 ohne größere Problem durchführbar. Das „Install“-Tool ist über „Typo3-Verzeichnis/typo3/install/“ erreichbar.

Abbildung 32 - Typo3-Install Tool

4.2.4.2 Page, Content und Record Page bezeichnet die einzelnen Seiten der Webseite in Typo3. Content ist alles was zu Seiten hinzugefügt werden kann (Text, Bilder, Kalendereinträge, usw.). Records ist der Überbegriff für alle Elemente die in der Baumstruktur von Typo3 erstellt werden können. Dazu zählen Seiten, Ordner, Benutzergruppen, Templates usw. Records werden als neue Tabellen in der Datenbank angelegt.

4.2.4.3 Templates und TypoScript

Der größte Vorteil von Typo3 und CMS allgemein ist die schon erwähnte Trennung zwischen Inhalt und Design. Für das konsistente Layout und die Erstellung von neuen Webseiten sieht ein Typo3-System sogen. Templates vor. Dieses besteht aus einer HTML-Vorlage (und CSS-Dateien) und einem aus TypoScript bestehenden Template in Typo3. Die Grundstruktur der Seite wird in einem HTML-File festgelegt (meist Tabellen). Es werden Marker in die Seite eingefügt,die von Typo3 durch den dynamisch erstellten Content ersetzt werden. Die Formatierung von Elementen (Tabellen, Formulare, usw.) so wie der Links und des Textes wird in CSS-Dateien definiert. Der Aufbau des Framesets, der Menüs, Logins und all jenen Elementen die per Typo3 dynamisch erzeugt werden wird im so genannten TypoScript codiert. TypoScript ist eine Sprache die rein aus Zuweisungen, sowie Kopier- und Löschoperator besteht. Beispiel für TypoScript:

page_main = PAGE page_main.typeNum = 12 page_main { bodyTag = <body> stylesheet = fileadmin/templates/bartlweb/css/page_main_content.css


78 von 151

meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Index-page from bartlweb.serveftp.net 10 = TEMPLATE 10.template = FILE 10.template.file = fileadmin/templates/bartlweb/template/ main_content.htm 10.workOnSubpart = DOKUMENT 10.marks { CONTENT=CONTENT CONTENT{ table=tt_content select.orderBy=sorting select.where=colPos=0 select.languageField=sys_language_uid } TITLE = TEXT TITLE { field = title wrap = <div class="title">|</div> } } }

4.2.4.4 Page-ID In Typo3 bekommt jedes erstellte Page-Objekt eine eindeutige Page-ID über die es im System angesprochen wird. So kann sich auch einmal der Titel oder Typ des Objektes ändern ohne, dass alle Verweise auf dieses geändert werden müssen. Außerdem kann man über diese ID’s einzelne Seiten vom Webbrowser aus direkt aufrufen.

4.2.4.5 Rich Text Editor

Typo3 bietet im Backend einen so genannten Rich Text Editor zum eingeben und formatieren von Texten an. Dies ist vor allem für all jene vorteilthaft, die sich nicht mit der Materie von HTML und CSS befassen wollen und anstatt dessen das für sie bekannte „Richt Text“-Format (Winword) verwenden. wollen.

4.2.4.6 Extensions

Seit Typo3 4.0 ist das CMS komplett modular aufgebaut. Einzelne Module lassen sich schnell updaten, hinzufügen oder entfernen. Es lassen sich viele praktische Elemente wie Gästebuch, Forum aber auch Hintergrundaufgaben wie Userverwaltung per Extension (also Erweiterung) von den Typo3-Servern herunterladen und integrieren. Auf diesen sind bereits eine Anzahl solcher Extensions verfügbar, wobei aber auf die Kompatibilität mit der aktuellen Typo3 Version zu achten ist.

4.2.4.7 Workspace

Ebenfalls neu in Typo3 4.0 ist das Konzept von Workspaces. Workspaces sind Arbeitsumgebungen, in denen man Änderungen an der Homepage vornehmen kann. So ist standardmäßig der Live-Workspace eingestellt, der die Daten enthält die im Frontend angezeigt werden. Möchte man nun Änderungen an der Webseite vornehmen diese aber nicht direkt im Frontend anzeigen, so wechselt man auf einen anderen Workspace. Hier steht dann ein Experimentiersektor zur Verfügung, wo diverse Funktionalitäten ausprobiert werden können. Erst wenn alle Änderungen den Vorstellungen entsprechen, kann man die Änderungen auf den Live-Workspace und somit auf die Onlinepräsenz anwenden. Sollte einmal etwas


79 von 151

schief gegangen sein, verwirft man die Änderungen wieder und gefährdet die Onlinepräsenz nicht.

4.2.4.8 Userverwaltung Typo3 besitzt eine komplexe Userverwaltung, die den Zugriff auf das Backend und einzelnen Funktionen regelt. Zusätzlich können hier die User für Logins auf der Webseite verwaltet werden.

4.2.4.9 Workflow

Um einen redaktionsähnlichen Betrieb zu realisieren, stellt Typo3 ein Aufgabenmanagement und ein Versionsmanagement zu Verfügung. Es können einzelnen Benutzern Aufgaben zugewiesen werden, die Version der aktuell bearbeiteten Datei ermitteln oder auch von Benutzern erstellte Artikel zuerst von anderen korrektur-gelesen und von einem Administrator freigeben lassen bevor diese auf der Homepage angezeigt werden dürfen.

4.3 Installation Die Installation von Typo3 ist in wenigen Schritten erledigt (Voraussetzungen siehe Punkt 4.2.3 Systemvoraussetzungen). Alle benötigten Pakete (Dummy- und Source-Archiv) stehen unter folgender Webadresse: http://typo3.org/download/packages/ zum Download bereit. Zuerst extrahieren Sie das Source-Archiv von Typo3 in ein von außen erreichbares Verzeichnis ihres Webservers. Unter Linux können Sie über Symlinks die Source des Typo3-Projekts für mehrere Instanzen nutzen. Die Sources von Typo3 enthalten die Ordner media/, t3lib/, tslib/ und typo3/ sowie die Dateien index.php, showpic.php, sowie clear.gif und einige ReadMe’s. Um Typo3 jedoch installieren zu können, müssen zu den Sourceordnern noch die seitenspezifischen, für eine Typo3 Instanz benötigten, Ordner erstellt werden. Diese erhalten Sie über das sogenannte Dummy-Paket. Kopieren Sie also bitte in Ihrem Verzeichnis in das Sie bereits die Sources kopiert haben noch die Dateien und Ordner aus dem Dummy-Paket (fileadmin/, typo3temp/, uploads/, typo3conf/, usw.) Nun sind Sie bereit die Installation zu Starten. Beachten Sie, dass ihr Browser für die Installation und Verwendung von Typo3 Cookies akzeptieren muss. Rufen Sie über den Webbrowser die Url ihres Verzeichnisses in dem Typo3 liegt auf. Sie erhalten zunächst folgende Hinweismeldung. Diese können Sie mit OK bestätigen.

Abbildung 33 - Typo3-Installation - Security Warnung Danach erscheint der erste Schritt der 3-teiligen Installationsprozedur. Geben Sie nun den Benutzernamen, das Passwort und den Host auf dem ihre Datenbank läuft ein. Wenn noch keine leere Datenbank existiert, muss der Benutzer Rechte für das Erstellen einer Datenbank besitzen.


80 von 151

Abbildung 34 - Typo3-Installation - Step 1 In Schritt 2 können Sie eine bereits existierende leere Datenbank in der Typo3 seine Tabellen anlegen darf angeben oder Sie vergeben einen Namen unter dem eine neue Datenbank erstellt wird.

Abbildung 35 - Typo3-Installation - Step 2 Der letzte Schritt fasst die Datenbankparameter noch einmal zusammen. Über den Klick auf Import Database wird die Datenbankstruktur angelegt.


81 von 151

Abbildung 36 - Typo3-Installation - Step 3 Damit ist Typo3 erfolgreich auf ihrem System installiert. Der nächste Schritt ist die Grundkonfiguration sowie das ändern der Standardpasswörter.

Abbildung 37 - Typo3-Installation - Go

Für weitere Informationen wird auf http://typo3.org/documentation/document-library/installation/doc_inst_upgr/1.0.0/view/ verwiesen.

4.4 Konfiguration Der nächste Schritt nach der Installation von Typo3 ist die Grundkonfiguration. Dazu testen wir zunächst, ob die Datenbank richtig eingerichtet wurde. Rufen Sie


82 von 151

dazu die Url des Verzeichnisses in dem Sie Typo3 installiert haben auf. Hier bekommen Sie die Fehlermeldung „No pages are found on the rootlevel“ zurück, der aber nicht mehr aussagt als das noch keine Seiten in Typo3 angelegt worden sind. Allerdings lässt sich dadurch erkennen, dass die Datenbank ordnungsmgeäß eingerichtet worden ist.

Abbildung 38 - Typo3-Konfiguration - Error Der nächste Schritt ist das Ausprobieren des Logins in das Backend. Rufen Sie dieses durch die Url „Installationsverzeichnis/typo3/“ auf und melden Sie sich mit dem Standardbenutzer „admin“ und dem Standardpasswort „password“ ein.

Abbildung 39 - Typo3-Konfiguration - Login Bei den meisten wird der Login-Versuch mit einer Fehlermeldung enden. Typo3 überprüft standardmäßig sogenannte HTTP-Referer. Diese werden aber von vielen Firewalls und Proxyservern geblockt und somit ist kein Login möglich. Um dieses Problem zu beheben muss im Install Tool ein Flag gesetzt werden.

Abbildung 40 - Typo3-Konfiguration - Error CheckReferer Über die Url „Installationsverzeichnis/typo3/install/“ wird das Install Tool von Typo3 aufgerufen. Beim Aufruf erhalten Sie denselben Warndialog wie bereits bei der Installation, den man ohne weiteres akzeptieren können. Bei der ersten Anmeldung ist noch kein Passwort gesetzt. Dies ist auch der erste Schritt, mit dem wir beginnen. Auf der Startseite des Tools, die nun angezeigt wird, können Sie ganz oben das Passwort ändern. Geben Sie ihr neues Passwort ein und klicken Sie auf „Set new password“.


83 von 151

Abbildung 41 - Typo3-Konfiguration - Install Tool Wie nach jeder Änderung, die Sie im Install Tool vornehmen, bekommen Sie eine Meldung, dass die Konfiguration in die Datei „localconf.php“ geschrieben wurde. Hier müssen Sie „Click to continue“ auswählen um zum Install Tool zurück zu kehren.

Abbildung 42 - Typo3-Konfiguration - Configuration written


84 von 151

Da wir gerade das Passwort geändert haben, müssen wir uns neu einloggen. Dieser Login-Dialog wird auch in Zukunft bei jedem Aufruf des Install Tools erscheinen.

Abbildung 43 - Typo3-Konfiguration - Login Die nächste Einstellung, die wir vornehmen, betrifft das Login in den Backend-Bereich, die Firewall bzw. die Berücksichtigung eines Proxyserver. Gehen Sie dazu im Install Tool in die Sektion „5: All Configuration“ die Sie am oberen Ende der Seite auswählen können. Suchen Sie nach „doNotCheckReferer“ und setzen sie das Häkchen, siehe Grafik. Zum abspeichern der Änderung gehen Sie an das Ende der Seite und klicken Sie auf „Update localconf.php“.

Abbildung 44 - Typo3-Konfiguration - doNotCheckRefere Mit dieser Einstellung funktioniert der Login ins Backend bereits. Doch da wir uns gerade im Install Tool befinden, werden wir auch noch den Titel unseres Typo3-Webauftrittes ändern. Dieser wird in der Titelleiste des Browser dargestellt und sollte daher zu ihrer Webpräsenz (z.B. Firmenname) passen. Gehen Sie nun in die Sektion „1: Basic Configuration“ und suchen Sie nach dem Abschnitt „Update locaconf.php“. Vergeben Sie im Feld „Site name“ ihren Titel und klicken Sie zum Speichern der Änderungen auf „Update localconf.php“.


85 von 151

Abbildung 45 - Typo3-Konfiguration - Site name Weiters ist noch die Grafiksoftware zu konfigurieren. Dazu benötigt man das Softwarepacket ImageMagick[22] oder GraphicsMagick[23]. Installieren Sie diese Software auf Ihrem System, um die folgenden Schritte ausführen zu können. Gehen Sie nun in die Sektion „1: Basic Configuration“ und suchen Sie nach dem Abschnitt „Check Image Magick“. Aktivieren Sie das Häcken „Check LZW capabilities“ und tragen Sie den Pfad ihrer ImageMagick- oder GraphicsMagick-Installation ein. Klicken Sie abschließend auf „Send“.

Abbildung 46 - Typo3-Konfiguration - Check Image Magick Nach dem Klick auf „Send“ baut sich die Seite neu auf. Suchen Sie wieder nach „Check Image Magick“ und überprüfen Sie ob die Integration geglückt ist, siehe Grafik. Um die Konfiguration zu speichern gehen Sie an das Ende der Seite und klicken Sie auf „Update localconf.php“.

22 http://www.imagemagick.org 23 http://www.graphicsmagick.org


86 von 151

Abbildung 47 - Typo3-Konfiguration - Check Image Magick 2 Da nun alle wichtigen Einstellungen von Typo3 im Install Tool getroffen sind wenden wir uns wieder dem Backend zu. Nun sollte der Login (mit dem Standardbenutzer „admin“ und „password“) funktionieren. Allerdings begrüßt uns das Backend nun mit 2 Warnungen. Erstens muss das Standardpasswort geändert werden und zweitens muss der Refernz-Index der Datenbank upgedatet werden. Dies lässt sich beides schnell und einfach über das Backend lösen.

Abbildung 48 - Typo3-Konfiguration - Backend Warnungen Zuerst werden wir den Datenbankbereich bearbeiten. Gehen Sie dazu in der Navigation am linken Bildschirmbereich auf den Punkt „DB Check“ in der Sektion „Tools“. Im DropDown-Menü der nun erscheinenden Seite wählen Sie bitte „Manage Reference Index“ aus. Klicken Sie nun auf „Update now!“ um den Index zu aktualisieren.

Abbildung 49 - Typo3-Konfiguration - Update Reference Index Zum Schluss der Grundkonfiguration ändern wir noch das Standardpasswort des Benutzers „admin“. Wählen Sie dazu in der Sektion „Tools“ den Punkt „User


87 von 151

Admin“ aus. Um den Benutzer zu bearbeiten klicken Sie auf das Bleistiftsymbol neben dem Benutzer „Admin“ in der Auflistung.

Abbildung 50 - Typo3-Konfiguration - User Admin Auf der erscheinenden Seite können Sie den Benutzer „admin“ konfigurieren. Der wichtige Teil ist die Sektion „Password“. Tippen Sie hier ihr neues Passwort ein. Achtung, beachten Sie, dass Passwörter hier bei der Eingabe in Klartext erscheinen! Um die Änderungen zu speichern, klicken Sie bitte auf das Diskettensymbol am oberen Bildschirmrand.

Abbildung 51 - Typo3-Konfiguration - Change Password Anders als beim Install Tool müssen Sie sich nach dem Ändern des Passwortes nicht neu einloggen. Um zu überprüfen, ob die Warnungen auf der Startseite verschwunden sind und das Passwort tatsächlic geändert wurde, loggen Sie sich bitte aus und wieder ein. Der Logout-Button befindet sich unter dem links liegenden Menü. Nach dem erneuten einloggen sollte die Startseite wie in untere Grafik ohne Warnungen erscheinen.


88 von 151

Abbildung 52 - Typo3-Konfiguration - Backend

4.5 Backend Das Backend (Administrationsinterface) von Typo3 wurde mittels PHP realisiert und ist somit über den Webbrowser aufrufbar. Über das Backend werden alle Funktionen von Typo3 verwaltet. So kann hier nicht nur der Inhalt bearbeitet werden, sondern auch das Aussehen der Webseite definiert oder verschiedene Benutzer verwaltet werden. Das Backend ist über „Typo3-Verzeichnis/typo3/“ erreichbar.

4.5.1 Elemente und Symbole des Backends

4.5.1.1 Aufbau

Abbildung 53 - Typo3-Backend


89 von 151

Die obenstehende Grafik zeigt das Backend von Typo3 unter dem Menüpunkt Page. Die Grundeinteilung des Backends ist wie folgt: Sektion 1 Am linken Seitenrand befindet sich das in einzelne Bereiche gegliederte Menü des Backends. Sektion 2 Zwischen dem Menü und dem Bearbeitungsbereich wird für die Menüpunkte des Abschnitts Web und File eine Baumstruktur der Webseite bzw. des Dateisystems angezeigt. Über diese Baumstruktur wird zu den einzelnen Seiten navigiert bzw. das Kontextmenü dieser aufgerufen. Sektion 3 Der Arbeitsbereich von Typo3 nimmt den größten Teil des Backends ein und befindet sich auf der rechten Seite. Hier werden die einzelnen Dialogfelder zur Bearbeitung und Anpassung der Webseite angezeigt. In diesem Bereich wird die eigentliche Arbeit verrichtet. Sektion 4 Um sich auszuloggen benutzt man den Logout-Button direkt unter der Menüstruktur. Unter dem Button wird auch immer der Name des aktuell angemeldeten Benutzers angezeigt. Sektion 5 Am linken unteren Rand findet sich ein Suchfeld über das nach Namen oder Page-ID’s aller angelegten Records (Pages, Content, User, Folder, etc.) gesucht werden kann. Sektion 6 Am rechten unteren Rand findet sich die Auswahl und Anzeige des Workspaces.

4.5.1.2 Menüstruktur

Die Menüstruktur des Typo3-Backends ist in verschiedene Abschnitte unterteilt, die je nach Berechtigungen des Benutzers auch ausgeblendet werden können. Die folgende Tabelle listet die einzelnen Menüpunkte (Module genannt) inklusive einer kurzen Beschreibung der Funktionen auf.


90 von 151

Tabelle 5 - Backendmodule

Web Das Webmodul beinhaltet alle Funktionen die zum erstellen und warten der Webpräsenz notwendig sind. Dabei wird in allen Menüpunkten zusätzlich ein Baum der Seitenstruktur zur Navigation angezeigt.

Page Hier können die einzelnen Records verwaltet und bearbeitet werden.

View Hier wird eine Vorschau der einzelnen Seiten der Webseite angezeigt.

List Zeigt eine Listenansicht der einzelnen Elemente die sich auf ausgewählten Seiten befinden an.

Info Unter diesem Menüpunkt lassen sich allgemeine Informationen zu jedem Record anzeigen. (z.B.: Cache, Alter, Berechtigungen, Ersteller)

Access Zeigt die Zugriffsberechtigungen der einzelnen Benutzer für jeden Record und jede Seite an.

Functions Hier können mehrere Seiten gleichzeitig erstellt oder sortiert werden.

Versioning Zeigt eine Übersicht der einzelnen Versionen in den einzelnen Workspaces für jede Seite an.

Template Dient zum Erzeugen und Verwalten von Templates für einzelne Seiten.

File Hier befinden sich alle Menüpunkte die sich mit der Dateiverwaltung beschäftigen.

Filelist Verwaltet Dateien und Ordner im “fileadmin”-Verzeichnis der Typo3-Installation. Kann außerdem zum Uploaden von Dateien genutzt werden. Zu beachten ist allerdings, dass die Dateien dann die Rechte des Users mit dem der Webserver betrieben wird erhalten.


91 von 151

Doc Zeigt den zuletzt geöffneten und nicht wieder geschlossenen Bearbeitungsdialog von Pages und Contents an. User Das User-Modul verwaltet Aufgaben, Workspaces und userspezifische Einstellungen des Backends.

Task center Zeigt die Aufgaben (Tasks) des aktuellen Benutzers an.

Setup Hier können Sprache, Aussehen und Verhalten des Backends für den aktuellen Benutzer verändert werden.

Workspace Verwaltet die einzelnen Workspaces und zeigt eine Übersicht der Versionen der Seiten die sich in jedem Workspace befinden an.

Tools Unter Tools befinden sich alle für den Administrator wichtigen Menüpunkte.

User Admin Verwaltet Backend- und Frontend-Benutzer.

Ext Manager Dient zum Verwalten und vor allem zum Installieren von Extensions.

DB check Dient zur Ausgabe von Statistiken von in der Datenbank enthaltenen Elementen. Weiter kann hier der Index der Datenbank repariert werden. Eine Volltextsuche in der Datenbank ist hier ebenfalls möglich.

Configuration Zeigt die Konfiguration von Typo3 und den installierten Extensions durch Ausgabe der Konfigurationsvariablen an.

Install Ruft das Install Tool (Installationsprogramm) von Typo3 auf.

Log Hier können die Benutzeraktivitäten überwacht werden. Es wird nicht nur angezeigt, wann sich wer eingeloggt hat, sondern auch wer was und wann angelegt, gelöscht oder editiert hat.


92 von 151

Help Kleine Hilfe zu Typo3.

About modules Zeigt eine Beschreibung der einzelnen Module an.

About Informationen über Version und Autor von Typo3.

Manual Kurze Hilfe zu Typo3.

Expand All Erweitert alle Abschnitte des Menüs. Da diese über das „-“-Symbol neben dem Titel (hier: Help) minimiert werden könnnen.

Admin functions Hier befinden sich 2 Menüpunkte zum Löschen des Caches. Für nähere Informationen siehe Sektion: 4.5.3 Löschen des Caches.

Clear cache in typo3conf/ Clear FE cache

4.5.1.3 Kontextmenü Hier werden die einzelnen Menüpunkte beschrieben so weit diese nicht selbsterklärend sind. Beachten Sie, dass der Aufbau der Menüs je nach Berechtigungen und Modul variieren kann. Es werden aber alle relevanten Optionen erläutert. Kenntnis der oberen Auflistung der Module erleichtert das Verständnis der einzelnen Funktionen. Der Aufruf des Kontextmenüs für einzelne Elemente erfolgt über einen Rechtsklick auf das jeweilige Symbol. Ein Kontextmenü lässt sich auf jeden Fall für Tree-Elemente und Elemente die in einer Liste dargestellt werden aufrufen. Tabelle 6 - Kontextmenü

Kontextmenü Das links dargestellte Kontextmenü zeigt jene Menüpunkte die bei Aufruf des Menüs durch Rechtsklick auf eine Seite angezeigt werden.

Show Zeigt die Ausgabe der Webseite im Frontend an.

Edit Zeigt eine Übersicht über den Content einer Page an. (Befehl ist äquivalent dem Anklicken der Page)

New Legt einen neuen Record an.

Info


93 von 151

Zeigt Informationen zum Aktuell ausgewählten Record an.

Copy Kopiert einen Record

Cut Schneidet einen Record aus.

Versioning Zeigt die einzelnen Versionen eines Records an.

More options … Liefert das unten beschriebene Kontextmenü.

Hide Ändert die Sichtbarkeit der Seite im Frontend.

Visability settings Zeigt Einstellungen zur Sichtbarkeit des Records an.

Edit page properties Ändern der Einstellungen eines Records.

Delete Löscht einen Record

History/Undo Zeigt den Verlauf von Änderungen eines Records an

Kontextmenü – More Options Move Page

Verschiebt eine Seite oder einen Record innerhalb des Baums.

’Create New’ wizard Ruft einen Wizard für die Erstellung von neuen Records auf.

Mount as treeroot Dabei wird die angeklickte Seite temporär als Root des Webauftrittes gemountet.

Web>List module Zeigt eine Listenansicht über den enthaltenen Content einer Seite an.

Export to .t3d Exportiert die Seite und alle Unterseiten als t3d-Datei. (Typo3-Format für den Austausch von Records)

Import from .t3d Importiert eine t3d-Datei in die aktuelle Baumstruktur.


94 von 151

Kontextmenü – Filelist Dieses Kontextmenü erscheint im Modul Filelist.

Rename Umbenennen einer Datei odere eines Ordners.

Upload Files Uploaden von einzelnen Dateien.

New Legt einen neuen Ordner oder einen neue Datei an.

Info Copy Cut Delete

Kontextmenü – Files Einzelne Dateien im Fileadmin bieten folgendes Kontextmenü.

Edit Öffnet Textdateien in einem Editor.

Rename Info Copy Cut

4.5.1.4 Symbole Hier werden die einzelnen Symbole die Sie immer wieder im Backend finden werden erklärt. Tabelle 7 - Symbole

Save document Speichert vorgenommene Änderungen an Inhalten und Einstellungen. Save ducument and view page Speichert Änderungen und zeigt eine Vorschau der Seite an. Save and Close document Speichert Änderungen und schließt den Dialog.

Close document Verwirft Änderungen und schließt den Dialog.

Edit Bearbeiten eines Elements.

View Webpage Vorschau der Webseite im Frontend.

Create new page Erstellte eine neue Seite.

Create new content element Erstellt ein neues Inhaltselement. Move Page


95 von 151

Verschiebt eine Seite.

Delete Löscht ein Element.

Show record list Stellt den Inhalt einer Seite als Liste dar.

View record change history Zeigt die Änderungen die in letzter Zeit gemacht wurden.

Kontextmenü Ruft das Kontextmenü für den jeweiligen Record auf.

Paste in clipboard content Fügt ein Element aus der Zwischenablage ein.

Hide Ändert die Sichtbarkeit der Seite im Frontend.

Clear cache for this page Löscht den Cache von Typo3 für die jeweilige Seite.

Reload Lädt den Record neu.

Up one level Geht eine Ebene in der Seitenhierarchie nach oben.

Up one level Geht eine Ebene im Dateisystem nach oben.

Help Zeigt Hilfe zum jeweiligen Element an.

Create a Shortcut to this page Erstellt eine Verknüpfung zu der Seite die über eine DropDown-Liste links unten im Backend wieder aufgerufen werden kann.

Back Geht zurück.

4.5.2 Login/Logout Um sich im Backend einloggen zu können, rufen Sie dieses über „Typo3-Verzeichnis/typo3/“ auf. Der Standardbenutzer nach der Installation ist „admin“ mit dem Passwort „password“.

Abbildung 54 - Backend-Login


96 von 151

Nach dem Login präsentiert sich Ihnen die Startseite des Backend, indem Sie nun neue Webseiten erstellen oder vorhandene bearbeiten können.

Abbildung 55 - Typo3-Backend Um sich aus dem Backend auszuloggen klicken Sie auf den sich auf der linken Seite unter dem Menü befindlichen Button „Logout“. Sie werden automatisch wieder zur Login-Seite geleitet.


97 von 151

4.5.3 Löschen des Caches Typo3 benutzt ein effizientes Cache-System, damit Web-Seiten nicht immer neu generieren zu müssen. Dieser Cache kann beim Entwickeln oder bei Änderungen zu Problemen führen. Normalerweise werden Seiten bei Änderungen neu generiert, doch dies funktioniert bei Änderungen am Template oder bei dynamisch generierten Grafiken nicht immer zuverlässig und deshalb ist es gerade dann sinnvoll den Cache manuell zu leeren. Dazu gibt es 2 Funktionen die sich am linken unteren Ende des Menüs in der Sektion „Admin functions“ befinden.

Clear cache in typo3conf/ Löscht den Cache der Konfiguration. Zu empfehlen bei Änderungen am Template oder vor der Installation von Extensions.

Clear FE cache Löscht den Cache der Datenbank und die Files auf der Festplatte die bereits dynamisch erzeugt wurden (HTML-Files, Grafiken). Zu empfehlen bei Änderungen am Template oder einzelnen Seiten, sowie nicht aktualisierten Seiteninhalten.

Abbildung 56 - Löschen des Caches

4.5.4 Pages (Seiten) und Records

In diesem Abschnitt werden die Arten von Records und Pages die angelegt werden können erklärt. Der Ablauf von grundlegenden Operationen wie Anlegen, Löschen, Verschieben und Kopieren sind bei Records und Pages identisch und wird daher nur anhand von Pages erklärt. Dabei ist die Page eine Form von Records.

4.5.4.1 Arten von Records und Pages

4.5.4.1.1 Records für die Webseite

Die folgende Tabelle zeigt eine Beschreibung aller Elemente die für die Webseite (Root) oder ausgehend von dieser erstellt werden können. Tabelle 8 - Records für Webseiten

Page Erstellt eine neue Page innerhalb des Trees. Backend user Erstellt einen neuen Backend-Benutzer. Backend group Erstellt eine neue Gruppe für Backend-Benutzer. Filemount Bindet ein Verzeichnis auf dem Server in den

Typo3-Tree ein.


98 von 151

Workspace Erstellt einen neuen Workspace. Website Language Fügt der Webseite eine neue Sprache hinzu.

Diese kann dann ausgewählt und für jede Sprache unabhängig Content zu den Pages hinzugefügt werden.

Static Template Statische Templates sind die Standardtemplates die von Typo3 mitgeliefert werden und in denen die Ausgabe der einzelnen Elemente definiert (ausprogrammiert) ist. Ohne diese Templates kann kein Inhalt dargestellt werden.

Acronym Werden auf Seiten häufig Fremdwörter oder Bezeichnungen verwendet die einer Erklärung bedürfen, so können diese als Acronym eingefügt werden. Typo3 erkennt diese im Text automatisch und markiert diese bzw. zeigt bei einem Klick darauf die Erklärung an.

4.5.4.1.2 Records für einzelne Pages Die untenstehende Tabelle zeigt alle Elemente, die für eine Seite oder von einer Seite aus erstellt werden können. Tabelle 9 - Records für Pages

Page (inside) Legt eine neue Page innerhalb der neuen

Page an (eine Ebene tiefer), dass heißt die aktuelle Seite wird zu einem neuen Knoten im Tree.

Pagecontent Legt eine Contentelement auf der aktuellen Page an.

Domain Legt einen Einstiegspunkt für eine bestimme URL an.

Alternative Page Language Legt eine zusätzliche Sprache für die aktuelle Page an.

Template Legt ein neues Template für die Seite an. Die im Knoten darunterliegenden Seiten erben diese Template, soweit nicht manuell unterbunden, automatisch.

Internal note Legt eine Notiz zur aktuellen Page an. Page (after) Legt eine neue Page nach der aktuellen

(auf derselben Ebene) an.

4.5.4.1.3 Arten von Pages Die Tabelle listet alle Arten von Seiten (Pages) auf. Jede erstellte Seite kann eine dieser Arten zugewiesen werden. Tabelle 10 - Arten von Pages

Standard Ist eine reguläre Webseite. Advanced Eine reguläre Webseite allerdings gibt es

mehr Option als bei Standard. External URL Die Seite dient als Shortcut zu einer externen


99 von 151

URL. Shortcut Die Seite dient als Shortcut zu einer Page

innerhalb von Typo3. Not in menu Ist eine Webseite die allerdings nicht im

Menü angezeigt wird. Backend User Section Seite wird nur angezeigt, wenn ein

Backenduser auf der Webseite eingeloggt ist. Mount Point Mounted ein Verzeichnis des Dateisystems

in den Tree der Webseite. Spacer Repräsentiert eine Leerzeile im Menü. Muss

allerdings eigens im TypoScript berücksichtigt werden.

SysFolder Wird nicht als Webseite angezeigt und dient zur Speicherung von Records wie Templates, User, usw.

Recycler Seiten und Records die in einen Recycler verschoben werden sind im Frontend nicht verfügbar.

4.5.4.2 Anlegen einer Page Um eine neue Page (Seite) nach oder innerhalb einer anderen Page anzulegen, gehen Sie in das Kontextmenü dieser Seite und wählen den Punkt „New“ aus. Es erscheint der Dialog für das Anlegen eines neuen Records.

Abbildung 57 - New Wählen Sie nun zwischen „Page (inside)“ um die Seite innerhalb der Seite anzulegen oder „Page (after)“ um die Seite nach der aktuellen Seite anzulegen. Sollten Sie keine Page sondern einen anderen Record benötigen, können Sie diesen ebenfalls hier auswählen und anlegen.


100 von 151

Abbildung 58 - New Record Haben Sie sich zwischen „Page (inside)“ und „Page (after)“ entschieden, erscheint nun der Dialog für das Anlegen der neuen Seite. Sie können hier den Typ (siehe 4.5.4.1.3 Arten von Pages), einen Titel und Subtitel sowie weitere Eigenschaften festlegen. Beachten Sie, dass die Option „Hide page“ standardmäßig aktiviert ist. Damit die Seite angezeigt wird, müssen Sie bei dieser Option das Häckchen entfernen. Angelegt ist die Seite, wenn Sie auf das Save-Symbol geklickt haben. Sollten Sie ganz unten die Option „Show Secondary Options (palettes)“ nicht aktiviert haben, so werden zusätzlichen Optionen zu einer Sektion in der grauen Leiste oberhalb des Arbeitsbereichs angezeigt (siehe Screenshot). Aktivieren Sie diese Option am Ende der Seite um die erweiterten Optionen direkt in den jeweiligen Sektionen anzeigen zu lassen.

Abbildung 59 - New Page

4.5.4.3 Löschen einer Page Der einfachste Weg eine Seite zu löschen besteht darin, das Kontextmenü dieser über den Tree aufzurufen und den Menüpunkt „Delete“ zu wählen. Weiters ist dies natürlich auch über die Listenansicht der Webseite im List-Modul möglich.


101 von 151

Abbildung 60 - Delete

4.5.4.4 Bearbeiten einer Page

Um eine Seite zu bearbeiten, gehen Sie in das Modul „Page“ und klicken Sie auf die Page deren Eigenschaften, die Sie bearbeiten möchten. Es öffnet sich ein Dialog der den Content der Seite anzeigt. Doch oben befindet sich ein Button mit der Aufschrift „Edit page properties“. Klicken Sie auf diesen um die Eigenschaften der Page zu bearbeiten.

Abbildung 61 - Pagecontent Eine andere Möglichkeit ist im Kontextmenü der Seite sofort den Menüpunkt „Edit page properties“ auszuwählen.


102 von 151

Abbildung 62 - Edit page properties Es öffnet sich der Eigenschaftendialog den Sie bereits vom Anlegen der Seite kennen. Ändern Sie hier nun zum Beispiel den Typ oder Titel der Page und vergessen Sie ncht die Änderungen durch einen Klick auf das Save-Symbol zu speichern.

Abbildung 63 - Page properties

4.5.4.5 Kopieren einer Page Um eine Page zu kopieren, rufen Sie das Kontextmenü dieser Page auf und wählen den Menüpunkt „Copy“.

Abbildung 64 - Copy


103 von 151

Um die Seite nun nach oder innerhalb einer Page einzufügen, öffnen Sie das Kontextmenü dieser Seite und wählen den Punkt „Paste into“ oder „Paste after“ aus.

Abbildung 65 - Paste Das Kopieren von Elementen ist auch über das List-Modul möglich um einen besseren Überblick zu behalten.

4.5.4.6 Verschieben einer Page

Für das Verschieben einer Seite rufen Sie das Kontextmenü dieser Seite auf und wählen zunächst „More options …“ und dann „Move page“.

Abbildung 66 - Move page Es erscheint ein Dialog in dem Sie die neue Position der Seite angeben können. Es wird hier allerdings nicht die ganze Seitenstruktur angezeigt.


104 von 151

Abbildung 67 - Move element Um mehr von der Seitenstruktur einzusehen, klicken sie auf das „Up one level“-Symbol. Durch Klick auf eine Page kann man den Baum aufrufen, der sich unterhalb dieser befindet. Durch Klick auf einen der Pfeile wird die aktuelle Seite an diese Stelle verschoben.

Abbildung 68 - Move element 2

4.5.5 Content (Inhalt)

4.5.5.1 Arten von Content

Um Inhalt auf die einzelnen Pages (Seiten der Webseite) zu bringen muss Content (Inhalt) angelegt werden. Dazu gibt es verschiedene Elemente die in die 4 Hauptkategorien „Typical page pontent“, „Special elements“, „Form elements“ und „Plugins“ unterteilt werden. Tabelle 11 - Arten von Content

Typical page content Regular text element Ein normales Textelement mit Überschrift und

Textteil. Text with image Eine beliebige Anzahl von Bildern die von

einem normalen Textelement umflossen werden.

Images only Eine Liste von Bildern. Bullet list Eine Auflistung.


105 von 151

Table Eine einfache Tabelle mit bis zu 8 Spalten. Special elements Filelinks Erstellt eine Liste von Dateien für den

Download. Multimedia Fügt Multimediadateien (Flash, Video, Audio)

in die Webseite ein. Sitemap Fügt eine Sitemap der Webseite ein. Plain HTML Fügt beliebigen HTML-Code in die Webseite

ein. Form elements Mail form Fügt ein Formular für das Versenden von Mails

ein. Search form Fügt ein Suchformular in die Webseite ein. Login form Fügt ein Loginformular zur Webseite hinzu. Plugins Gerneral Plugin Fügt ein Element das durch ein Plugin generiert

wird ein.

4.5.5.2 Anlegen von Content Für das Anlegen von Content (Inhalt) können Sie entweder über das Kontextmenü der Seite den Punkt „New“ auswählen und danach den Recordtyp „Pagecontent“ auswählen oder Sie klicken im Page-Modul auf die jeweilige Seite und klicken in der Übersicht des Contents auf den Button „New content“.

Abbildung 69 - New content Es öffnet sich ein Wizard, in dem Sie die Art des Contents bestimmen können. Diese Auswahl ist nicht bindend, da die Art des Contents später über die Eigenschaften jederzeit geändert werden kann.


106 von 151

Abbildung 70 - New Content element Nach der Auswahl des Typs erscheint der Eigenschaftendialog. Der Screenshot zeigt das DropDown-Menü für die nachträgliche Auswahl des Typs. Weiters kann in diesem Dialog der Titel sowie Eigenschaften und der Inhalt des Content-Elements festgelegt werden. Typo3 bietet für die Eingabe von Inhalt, sofern es sich um Text handelt, einen Rich Text Editor an.

Abbildung 71 - Pagecontent

4.5.5.3 Löschen von Content Um ein Content-Element zu löschen, gehen Sie im Page-Modul auf die jeweilige Page auf der sich das Content-Element befindet. Klicken Sie auf das Delete-Symbol unter dem Titel des Content-Elements.


107 von 151

Abbildung 72 - Pagecontent

4.5.5.4 Bearbeiten von Content Das Bearbeiten von Content oder das Ein- bzw. Ausblenden von Content-Elementen lässt sich ebenfalls über die Symbole unter dem Titel bewerkstelligen. Siehe dazu obigen Screenshot und die Symbolerklärung. Ein Klick auf „Edit in Rich Text Editor“ öffnet den Rich Text Editor um nur den Inhalt und nicht auch die Eigenschaften des Contents zu bearbeiten.

4.5.5.5 Kopieren von Content

Um Content-Elemente zu kopieren wechseln Sie in die Listenansicht für die Seite. Dort rufen Sie das Kontextmenü für das zu kopierende Element auf und wählen den Punkt „Copy“ aus. Sie können das kopierte Element nun auf derselben oder auf einer anderen Seite über das „Paste in clipboard content“-Symbol am oberen rechten Eck der Listenansicht einfügen.

Abbildung 73 - Copy content

4.5.5.6 Verschieben von Content

Die Position von Content-Elementen auf einer Seite kann ganz einfach über die Pfeil-Symbole unter dem Titel des jeweiligen Elementes geändert werden. Klicken Sie auf den „Pfeil nach oben“ um das Element mit dem oberen zu vertauschen. Der „Pfeil nach unten“ vertauscht das Element mit dem unteren. So können Sie die Anordnung der Elemente auf der Seite problemlos anpassen.


108 von 151

Abbildung 74 - Move content

4.5.6 Anlegen eines Templates Um ein neues Template für eine Webseite, einem Abschnitt im Baum oder einzelnen Pages anzulegen gehen Sie in das Template-Modul im Abschnitt Web des Menüs. Beachten Sie das Templates solange diese nicht durch ein anderes Template oder eine Regel unterbrochen werden sich im Tree nach unten hin vererben. Klicken Sie zum Erstellen eines neuen Templates auf „Create template for a new site“.

Abbildung 75 - Template Als nächstes erscheint eine Warnmeldung die abfragt ob Sie wirklich ein neues Template anlegen möchten. Bestätigen Sie diese mit OK.

Abbildung 76 - Template - Sicherheitsabfrage Danach erscheint das Template Tool, das zunächst eine Übersicht anzeigt. Um nun das Template zu konfigurieren klicken Sie auf „Click here to edit whole template record“.


109 von 151

Abbildung 77 - Template Tool Hier vergeben Sie einen Titel für das Template und die Webseite. Weiters werden hier die Konstanten und das Typo-Script eingetragen. Wichtig ist auch noch das Einbinden von Standardtemplates.

Abbildung 78 - Template Tool - Edit Template Für das Kopieren, Verschieben oder Löschen von Templates verwenden Sie das List-Modul des Abschnittes Web im Menü.


110 von 151

Abbildung 79 - List - Template

4.5.7 Verwalten von Dateien Für das Verwalten von Dateien im „fileadmin/“-Verzeichnis von Typo3 gibt es zwei Möglichkeiten:

FTP: ein Zugriff auf das Typo3-Verzeichnis am Server muss möglich sin

Filelist-Modul von Typo3: Hier können auch Textdateien bearbeitet werden um z.B. Änderungen in einem CSS-File vorzunehmen. Auf einem Unix System sollten Sie allerdings beachten, dass Dateien die mit Typo3 auf den Server geladen werden, die Rechte des Benutzers, mit dem der Webserver betrieben wird, bekommen und alle die per FTP hinaufgeladen werden die des FTP-Users. Darum sollten Sie sich auf eine Variante beschränken und auf die richtige Rechtevergabe achten.

Um nun Dateien in Typo3 zu bearbeiten gehen Sie in das Filelist-Modul, dass sich in der Sektion „File“ im Menü befindet. Sie finden nun wie bereits aus anderen Modulen bekannt einen Tree des „fileadmin/“-Verzeichnis vor über den Sie zum gewünschten Ordner navigieren können. Um eine Datei nun zu bearbeiten, rufen Sie das Kontextmenü für diese auf und wählen den Punkt „Edit“.

Abbildung 80 - Fileadmin Es öffnet sich ein Editor in dem die jeweiligen Dateien angepasst und wieder abgespeichert werden können. Neue Dateien und Ordner werden über den Kontextmenüpunkt „New“ angelegt.


111 von 151

Abbildung 81 - Fileadmin - Editor Um Dateien auf den Server zu laden, gibt es im Kontextmenü den Punkt „Upload Files“. Dieser öffnet eine GUI-Maske für die Auswahl von 1 bis 9 Files zum Upload. Der Pfad muss zu jeder einzelnen Datei angegeben werden. Es ist nicht möglich, ganze Verzeichnisse auf einmal hinaufzuladen. Ein Mouse-Klick auf „Upload files“ lädt diese dann endgültig in das ausgewählte Verzeichnis.

Abbildung 82 - Fileadmin - Upload files

4.5.8 Verwalten von Benutzern

Benutzer für Backend und Frontend werden im Modul „User Admin“, im Abschnitt Tools des Menüs, verwaltet. Dabei können Benutzer hinzugefügt, gelöscht, oder deaktiviert werden. Weiters sind Eigenschaften und Passwort sowie Gruppenzugehörigkeit editierbar. Das Löschen eines Benutzers funktioniert über das Delete-Symbol. Um den Benutzer zu deaktivieren oder zu aktivieren verwenden Sie das „Hide“-Symbol. Zum Bearbeiten der Eigenschaften eines Benutzers klicken Sie auf das „Edit“-Symbol. Zum Anlegen einer neuen Seite benutzen Sie das „new Content“-Symbol.


112 von 151

Abbildung 83 - User Admin Es erscheint der Dialog für das Anlegen eines Users. Hier können Sie den Namen und das Passwort vergeben. Bitte beachten Sie, dass das Passwort bei der Eingabe im Klartext erscheint. Um dem User eventuell zu einer Gruppe hinzuzufügen, können Sie diese unter „Groups“ hinzufügen. Zum Erstellen einer neuen Gruppe klicken Sie hier auf das „Plus“-Symbol.

Abbildung 84 - User Admin - New User Es erscheint der Dialog zum erstellen einer neuen Gruppe.


113 von 151

Abbildung 85 - User Admin - New Group Um sich alle User und Gruppen der Seite anzeigen zu lassen gehen Sie auf das List-Modul im Abschnitt Web und klicken Sie dort auf die Root-Seite. Auch hier können Benutzer und Gruppen hinzugefügt, gelöscht oder bearbeitet werden. Der User Manager selbst zeigt keine Ansicht über die einzelnen Gruppen, sondern nur alle Benutzer an.

Abbildung 86 - User Admin - Auflistung von User und Gruppen

4.6 Extension Seit Typo3 4.0 ist das CMS komplett modular aufgebaut. D.h. es lassen sich einzelne Module updaten, hinzufügen oder entfernen. So lassen sich viele praktische Elemente wie Gästebuch, Forum aber auch Hintergrundaufgaben wie Userverwaltung per Extension (also Erweiterung) von den Typo3-Servern herunterladen um diese dann in das eigene System zu integrieren.

4.6.1 Extensions verwalten Die zu installierenden Extensions können entweder direkt aus dem Repository von Typo3 über das Backend geladen werden oder Sie laden sich die Extension als t3x-Datei herunter und importieren diese. Extensions können nur installiert und deinstalliert werden. Ein zwischenzeitliches deaktivieren ist nicht möglich. Allerdings werden einmal installierte Extensions im Typo3-Verzeichnis gespeichert und die neu Installation und Deinstallation erfolgt über einen einfachen Mouse-Klick. Die Installation und Deinstallation wird anhand


114 von 151

der Extension „Inline Frame“ erklärt. Die in den Abbildungen angezeigten Dialoge können bei der Installation von anderen Extensions also varieren.

4.6.1.1 Extension installieren Um eine Extension zu installieren, gehen Sie in das Modul „Ext Manager“, dass sich in der Sektion „Tools“ im Menü befindet. Der Extension Manger erscheint und es werden die geladenen Extensions angezeigt. Um nun eine weitere Extension zu installieren, muss diese zunächst importiert werden. Zu diesem Zweck wählen Sie im DropDown-Menu „Menu“, das sich direkt unter dem Titel „Extension Manager“ befindet, den Punkt „Import Extension“ aus.

Abbildung 87 - Extension Manger - Loaded extensions Hier können Sie nun direkt im Online-Repository suchen oder eine Datei uploaden. Ein Aspekt, der für das Importieren der Extension spricht, ist die Möglichkeit des Herunterladens via Browser. Dies ist dann wichtig wenn Sie sich hinter einem Proxyserver befinden und ihr Webserver nicht für den Einsatz hinter einem Proxyserver konfiguriert wurde.

Abbildung 88 - Extension Manger - Import extension


115 von 151

Der hier beschriebene Weg, stützt sich darauf, dass Sie die Extension uploaden. Nach dem Klick auf „Upload extension file“ wird das Import-Ergebnis angezeigt. Weiters wird sofort der Punkt „Install Extension“ angeboten. Klicken Sie auf diesen.

Abbildung 89 - Extension Manger - Extension import results Die meisten Extensions müssen Tables zur Datenbank hinzufügen, um korrekt zu funktionieren. Es werden die Änderungen aufgelistet und Sie müssen auf „Make updates“ klicken um die Installation abzuschließen.

Abbildung 90 - Extension Manger - Datenbank-Update

4.6.1.2 Extension deinstallieren

Um Extensions zu deinstallieren, gehen Sie im Extension Manager auf die Seite „Install Extensions“. Hier werden alle importierten Extensions aufgelistet. Die grünen Symbole deuten installierte und die grauen Symbole deinstallierte Extensions an. Um nun eine Extension zu deinstallieren oder gegebenenfalls auch zu installieren klicken Sie einfach auf das jeweilige Symbol neben dem Titel der Extension.


116 von 151

Abbildung 91 - Extension Manager - Install extensions Vor der Deinstallation werden Sie noch einmal gefragt, ob Sie dies wirklich tun möchten. Durch Klick auf „Remove extension“ deinstallieren Sie die Extension. Beachten Sie, dass die Extension weiterhin im Typo3-Verzeichnis verbleibt und damit zur jederzeitigen Neuinstallation bereitsteht.

Abbildung 92 - Extension Manager - Remove extension

4.6.2 Inline Frame Inline Frame wurde von Stanislas Rolland entwickelt und steht unter der Open Content License. Die „Inline Frame“-Extension fügt dem Backend von Typo3 ein neues Content-Element hinzu, dass es ermöglicht iFrames als Inhalt von Seiten einzufügen. Der Vorteil eines iFrames ist dann gegeben wenn sich die Seite um den Frame herum nicht ändert. Zum Beispiel die Seite mit dem Menü enthält das Menü selbst und einen iFrame in dem der Inhalt dargestellt wird. Weiters entfällt bei der Verwendung von iFrames das Erstellen einen Framesets.


117 von 151

4.6.2.1 Inline Frame – Inhalt anlegen Gehen Sie zum Anlegen eines Inline Frame wie beim Anlegen eines neuen Content-Elementes vor. Wählen Sie als Typ des Content-Elements „Inline Frame“ aus. Diesen Typ finden Sie bei Verwendung des Wizards im Abschnitt „Plugins“.

Abbildung 93 - Inline Frame Plugin Im nun erscheinenden Dialog können Sie einen Titel wie bei jedem anderen Content-Element auch angeben. Weiters müssen sie die URL, die Breite und Höhe, ob der Frame mit Rahmen angezeigt werden soll und das Verhalten der Scrollleiste festlegen.

Abbildung 94 - Inline Frame Eigenschaften

4.7 TypoScript TypoScript ist eine eigens für Typo3 entwickelte Script-Sprache mit deren Hilfe Templates für Webseiten erstellt werden. Die Syntax ist mit keiner bekannten Scriptsprache vergleichbar. In diesem Kapitel werde ich nur auf das Grundlegendste eingehen bzw. ein Nachschlagewerk für einzelne TypoScript-Elemente erstellen. Um das Erstellen von Templates in Typo3 zu erlernen, empfiehlt sich das Studium des Dokumentes „Deutsche Typo3-Dokumentation“ der Firma Mittwald CM Service GmbH & Co KG. Diese Dokumentation finden Sie unter http://www.mittwald.de/dokumentation/. Weiters enthält diese Dokumentation eine umfangreiche Befehlsreferenz. Weitere interessante Links rund um das Thema TypoScript finden Sie im Quellverzeichnis der Dokumentation im Punkt 6.6.


118 von 151

Das dokumentierte TypoScript-Template des Infopanels finden Sie im Punkt 3.3 Arbeiten mit Typo3.

4.7.1 Syntax In TypoScript gibt es wenige und einfache Syntaxregeln. Die Grundidee von TypoScript ist die einer Scriptsprache und daher ist der Zuweisungsoperator der am häufigsten benötigte. Die Reihenfolge der Zuweisungen ist nicht relevant, da TypoScript immer komplett geparsed wird, bevor die Webseite daraus generiert wird. Merkmale einer Scriptsprache[24]:

implizit deklarierte Variablen; dazu gehören auch dynamische Funktionsnamen (Funktionsnamen müssen nicht einem Compiler vorab bekannt sein)

dynamische, automatische Typumwandlung, bzw. ganz fehlende Typunterscheidung

automatische Speicherverwaltung, vor allem automatische Speicherbereinigung

dynamische Klassenzugehörigkeit oder prototypenbasierte Vererbung werden in der Regel ohne getrennte Übersetzungsphase ausgeführt

(d. h. sie werden „interpretiert“) Jeder Befehl muss in einer eigenen Zeile stehen und wird auch so interpretiert, d.h. es wird kein Terminalsymbol am Ende der Zeile benötigt (wie z.B. in C ein Semikolon).

4.7.1.1 Zuweisungsoperator

Das Template wird mit Hilfe der Zuweisungen von Werten an verschiedene Objekte und Attribute des Objekts erstellt. Objekt = Wert Objekt = ( Wert länger als eine Zeile und Attribute

)

Sollte ein Wert in einer Zeile nicht darstellbar sein oder verschiedene Attribute oder weitere Objekte enthalten, kann eine Zuweisung auch über mehrere Zeilen erfolgen. Dabei muss diese in runde Klammern eingefasst werden.

4.7.1.2 Löschoperator

Einem Objekt können nicht nur Werte zugewiesen werden, sondern Sie können auch gelöscht werden. Dies geschieht über den Operator „>“. Objekt >

24 http://de.wikipedia.org/wiki/Scriptsprache


119 von 151

4.7.1.3 Kopieroperator Ein wichtiger Operator ist der Kopieroperator. Dieser ermöglicht ein Clonen eines ganzen Objektes. Als Kopieroperator wird das Zeichen „<“ verwendet. Objekt < Objekt2

Objekt = Typ Objekt { Objekt1 = Typ Objekt2 < .Objekt1 } Object3 < Objekt.Objekt2

Wird ein Objekt oder Attribut eines Objektes kopiert , so wird ein Punkt vor dem zu kopierenden Objekt/Attribut benötigt Ansonsten wäre - wie in der letzten Zeile des obigen Codes gezeigt - die Angabe der ganzen Objektstruktur notwendig.

4.7.1.4 Punktoperator

Da in TypoScript die Zuweisungen hierarchisch in Baumstruktur aufgebaut sind und so fast jedes Objekt Unterobjekte oder Attribute besitzt, benötigt man den Punktoperator, um auf die einzelnen Werte zugreifen zu können. Objekt.attribut = wert

Um nun nicht immer den vollen Objektbaum angeben zu müssen, kann man sich der Hilfe von geschwungenen Klammern bedienen. Objekt.unterobjekt = wert Objekt.unterobjekt.attribut = wert Objekt { unterobjekt = wert unterobjekt.attribut = wert }

Diese Klammerung erspart vor allem bei immer tiefer werdenden Verschachtelungen viel Tipparbeit und erleichtert die Lesbarkeit des Codes. Soll nun aus dieser Gruppe nachträglich ein Wert geändert werden, so geschieht dies über die Angabe der vollständigen Hierarchie. Objekt.unterobjekt.attribut = wert

4.7.1.5 Konstante

Für Templates können sogenannte Konstanten angelegt werden. Diese werden in der unten angegebenen Form in Feld „Constants“ eines Templates definiert. Diese können im TypoScript-Code nur ausgelesen aber nicht mehr verändert werden. variable = wert


120 von 151

Zugriff erhält man auf diese Variablen im TypoScript-Code mit Hilfe der unten angeführten Syntax. Objekt = {$variable}

4.7.1.6 Kommentar Kommentare können unter Typo3 erstellt werden wie unter jeder anderen Programmiersprache auch. Dabei ist allerdings zu beachten, dass Typo3 keine Inline-Kommentare zulässt, d.h. jeder Kommentar muss in einer eigenen Zeile stehen. # Kommentar // Kommentar /* mehrzeiliger Kommentar */

4.7.1.7 Beispielcode Der folgende Beispielcode soll die Möglichkeiten der verschiedenen Operatoren demonstrieren und hat mit einem TypoScript-Template nichts gemeinsam. Vater = Elternteil Vater.Name = Erich Vater.Gewicht = 75 Vater.Alter = 45 Vater.Kind { 10 = Franz 10.Gewicht = 20 10.Alter = 12 20 = Moni 20.Alter = 18 } Mutter < Vater Mutter.Name = Susi Mutter.Alter = 45 Mutter.Gewicht > Mutter.Kind.20.Gewicht = 60

Analyse des obigen Codes: Vater = Elternteil Vater.Name = Erich Vater.Gewicht = 75 Vater.Alter = 45

Der Vater ist vom Typ Elternteil, heißt Erich, ist 45 Jahre alt und hat ein Gewicht von 75kg. Vater.Kind { 10 = Franz 10.Gewicht = 40 10.Alter = 12 20 = Moni


121 von 151

20.Alter = 18 }

Der Vater hat 2 Kinder, den Franz und die Moni. Hier wird eine sehr gängige Methode unter Typo3 sichtbar. Es werden Nummern verwendet um zwischen den einzelnen Kindern zu unterscheiden. Mutter < Vater

Nun wird noch die Mutter angelegt. Da die Mutter natürlich auch die 2 Kinder Franz und Moni hat kopieren wir den Inhalt vom Vater auf die Mutter. Mutter.Name = Susi Mutter.Alter = 43

Jetzt muss natürlich der Name und das Alter geändert werden, damit die Mutter nicht auch Erich heißt. Mutter.Gewicht >

Hier löschen wir den Wert des Parameters Gewicht.

Mutter.Kind.20.Gewicht = 60

Die Mutter weiß das Gewicht ihrer Tochter und fügt dieses deshalb noch hinzu.

4.7.2 Aufbau einer einfachen Webseite

Dieses Beispiel soll den Aufbau einer einfachen Webseite unter Typo3 erklären. Dabei gibt die Seite allerdings nicht mehr als „Hello World!“ aus. Inhalte und Menüs die in Typo3 erstellt wurden werden hier noch gar nicht angezeigt. page=PAGE page { typeNum=0 bodyTag=<body bgColor = "#DDDDD"> meta.AUTHOR=Christian Bartl meta.DESCRIPTION=Testseite 10 = TEXT 10.value = Hello World! }

Dieser einfache Code generiert dann folgende einfache Webseite:


122 von 151

Abbildung 95 - TypoScript - Einfache Webseite - Screenshot

Betrachtet man den HTML-Code der Webseite, dann ist dieser schon ziemlich umfangreich und von Typo3 mit einigen Zusätzen versehen. Grün markiert sind jene Teile die man bei manuellem HTML-Coding für die Generierung der Webseite verwenden würde. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>webseite</title> <meta name="generator" content="TYPO3 4.1 CMS" /> <meta name="AUTHOR" content="Christian Bartl" /> <meta name="DESCRIPTION" content="Testseite" /> <script language="JavaScript">  </script> <script type="text/javascript" src="typo3temp/javascript_757c080409.js"> </script> </head> <body bgColor = "#DDDDD"> Hello World! </body> </html> <script language="JavaScript">  </script>

Analyse des obigen Codes: page=PAGE

Zuerst wird ein Objekt vom Typ PAGE angelegt. Dies ist die Basis jeder neuen Webseite. page { typeNum=0

typeNum ist bei Webauftritten mit einer Webseite im Template immer 0. Dieser Wert ist für Framesets, Sprachanpassungen und eigenen Druckversionen interessant, da dieser der URL für den Seitenaufruf mitübergeben werden kann und je nach übergebenem Wert wird dann das dafür angelegte PAGE-Objekt des Templates aufgerufen. bodyTag=<body bgColor = "#DDDDD">

Typo3 erstellt den kompletten HTML-Code von selbst und dieser lässt sich natürlich anpassen und beeinflussen. Eine Möglichkeit ist die Angabe eines eigenen Body-Tags. meta.AUTHOR=Christian Bartl meta.DESCRIPTION=Testseite

Weiters ermöglicht es Typo3, sogennante Metadaten in den Header der Webseite einzubinden. Dazu werden die Standard-Parameter, wie aus HTML bekannt (AUTHOR, DESCRIPTION, etc.), benutzt. 10 = TEXT 10.value = Hello World! }

Das Grundgerüst der Webseite ist erstellt. Um Inhalt auszugeben, sind einige weitere Schritte notwendig. In unserem Beispiel wollen wir allerding nicht


124 von 151

mehr als den Text „Hello World!“ ausgeben. Dazu legen wir ein Objekt vom Typ „TEXT“ an und weisen diesem den Wert „Hello World!“ zu.

4.7.3 Marker Da es viel zu aufwendig wäre, komplexe Seiten oder Seiten mit aufwendigem Design, in dem nur wenige Teile dynamisch mit TypoScript aus Typo3 eingefügt werden, komplett in TypoScript nachzubilden, gibt es die Möglichkeit, HTML-Seiten als Vorlagen zu benutzen. In diesen HTML-Code werden so genannte Marker eingefügt. Diese werden später durch den von Typo3 generierten Code ersetzt. Diese Marker haben die Form von ###NAME###. Der folgende HTML-Code ist ein gültiges Template für Typo3. Dabei geben wir hier nur eine Tabelle an, der restlichen HTML-Code (body-Tag, usw) wird wieder von Typo3 generiert.  <table width="300" border="1" cellspacing="0"> <tr> <td>###TITLE###</td> </tr> <tr> <td>###CONTENT###</td> </tr> </table> 

Damit mit einem HTML-Template gearbeitet werden kann, muss ein sogenannter Subpart definiert werden. Dieser ist hier mit den 2 Tags  eingefasst. ###TITLE### und ###CONTENT### sind Marker die später durch den Seiten-Inhalt aus Typo3 ersetzt werden. Diesen Markern können Sie natürlich auch eigene Bezeichnung zuweisen. Die Datei wird unter fileadmin/template/template.htm abgelegt, wobei template ein eigens erstellter Ordner ist.

Abbildung 96 - TypoScript - Einfache Webseite - HTML Weiters wird noch eine CSS-Datei unter fileadmin/template/template.css angelegt. body { background-color: #999999; }


125 von 151

Als nächstes wird Content (ein „Regular Text Element“) auf der Root-Seite für die das Template erstellt wurde angelegt und ein Untertitel zur Seite hinzugefügt. Der Untertitel der Root-Seite von Typo3 ist „test“. Der Titel des Text-Content ist „Regular Text Element“ und der Inhalt „Testtext“. Am Ende soll dann folgende Ausgabe erscheinen:

Abbildung 97 - TypoScript - Einfache Webseite - Ausgabe

Damit nun die obige Ausgabe generiert wird, muss wieder ein TypoScript-Template erstellt werden. Achtung! Damit Inhalt ausgegeben werden kann, muss ein statisches Template zum eigenen Template hinzugefügt werden. Wählen Sie dazu im Abschnitt „Include static“ des Template-Dialogs aus der Liste „Items“ das Template „content(default)“ aus und fügen es hinzu.

Abbildung 98 - TypoScript - Include Static Folgender TypoScript-Code wird benötigt: page = PAGE page { bodyTag = <body> stylesheet = fileadmin/template/template.css 10 = TEMPLATE 10 { template = FILE template.file = fileadmin/template/template.htm workOnSubpart = DOKUMENT marks { TITLE = TEXT TITLE{ field=subtitle // title wrap=<h1>|</h1> } CONTENT = CONTENT


126 von 151

CONTENT{ table = tt_content select.orderBy = sorting select.where = colPos = 0 } } } }

Analyse des obigen Codes: page = PAGE page { bodyTag = <body> stylesheet = fileadmin/template/template.css

Dieser Codeteil ist uns bis auf das Einbinden der CSS-Datei schon bekannt. Über den Parameter „stylesheet“ wird in den HTML-Code die angegebene CSS-Datei eingebunden. Dabei wird hier der Pfad ausgehend vom fileadmin-Verzeichnis angegeben. 10 = TEMPLATE 10 { template = FILE template.file = fileadmin/template/template.htm

Als nächstes wird ein Objekt vom Typ TEMPLATE angelegt. Danach wird der Pfad zur HTML-Datei angegeben. workOnSubpart = DOKUMENT marks {

Um nun mit diesem Template arbeiten zu können, muss zunächst der Subpart angegeben werden. Dieser ist bei uns DOKUMENT und wurde im HTML-Code mit den beiden Tags  eingefasst. Mit Hilfe von „marks“ kann man nun auf die einzelnen Marker, die sich innerhalb dieses Subparts befinden, zugreifen und diese mit einem von Typo3 generierten Code ersetzen. TITLE = TEXT TITLE{ field=subtitle // title wrap=<h1>|</h1> }

Nun werden die einzelnen Marker angesprochen. Dabei muss der Name des Markers als Objektname verwendet werden. Den ersten Marker, den wir behandeln, ist der TITLE-Marker. Dieser wird durch den Titel der jeweils aufgerufenen Seite ersetzt werden und muss vom Typ TEXT sein. Mit dem Parameter „field“ wird nun angegeben, was ausgegeben werden soll. Dies ist in unserem Fall der Subtitle und wenn dieser nicht vorhanden ist soll der Titel der Webseite ausgegeben werden. „//“ bedeutet also „oder“. Weiters wird hier noch der Parameter „wrap“ verwendet. Dieser umschließt die Ausgabe des Parameters „field“. Dabei ist „|“ der Platzhalter für den Inhalt des Parameters „field“. Weiters kann „|“ natürlich auch am Anfang oder Ende stehen damit nur etwas angehängt wird (z.B. wrap = | <br>).


127 von 151

CONTENT = CONTENT CONTENT{ table = tt_content select.orderBy = sorting select.where = colPos = 0 } } } }

Der zweite Marker mit den Namen CONTENT soll den Inhalt ausgeben, der auf der Webseite angelegt wurde. Eine beliebte Fehlerquelle ist, dass das statische Template „content(default)“ nicht eingebunden wurde. Die drei Parameter geben die wichtigsten Eigenschaften an, um den Inhalt aus Typo3 ausgeben zu können.

„table=tt_content“ fügt den Content ein. „select.orderBy = sorting“ sorgt dafür, dass die einzelnen Content-

Elemente in der Reihenfolge ausgegeben werden wie sie in Typo3 angelegt wurden.

„select.where = colPos = 0“ wählt den Inhalt aus der mittleren Spalte der Webseite aus.

4.7.4 Frameset

Mit Typo3 lassen sich natürlich nicht nur einfache Seiten sondern auch Framesets erstellen. Wir wollen uns folgendes Beispiel näher ansehen.

Abbildung 99 - TypoScript - Frameset Der folgende Code ist ein Auszug aus dem TypoScript-Template, das die im oberen Screenshot dargestellte Webseite mit Frames realisiert. frameset = PAGE frameset { shortcutIcon = fileadmin/templates/bartlweb/favicon.ico typeNum = 0 meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Index-Page } frameset.frameSet { rows = *,550,*


128 von 151

params = border="0" framespacing="0" frameborder="NO" 1 = FRAME 1.obj = frameset_top 2 = FRAME 2.obj = page_main 3 = FRAME 3.obj = page_bottom } frameset_top = PAGE frameset_top { typeNum = 1 meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Frameset-Top } frameset_top.frameSet { cols = *,900,* params = border="0" framespacing="0" frameborder="NO" 1 = FRAME 1.obj = page_corner 1.params = scrolling="NO" noresize 2 = FRAME 2.obj = page_middle 2.params = scrolling="NO" noresize 3 = FRAME 3.obj = page_corner 3.params = scrolling="NO" noresize } … page_corner = PAGE page_corner.typeNum = 7 page_corner { bodyTag = <body> stylesheet = fileadmin/templates/bartlweb/css/page_corner.css meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Page-Corner } …

Analyse des obigen Codes: frameset = PAGE frameset { shortcutIcon = fileadmin/templates/bartlweb/favicon.ico typeNum = 0 meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Index-page }

Der erste Schritt zu einem Frameset ist das Anlegen einer neuen Seite. Dabei wird aber nur das Grundlegendste definiert. Das Attribut „shortcutIcon“ nimmt einen Pfad zu einen Favicon auf, dass dann automatisch eingebunden wird. Ganz wichtig ist, dass das Hauptframeset den typeNum-Wert 0 erhält, weil die Seite mit typeNum-Wert 0 standardmäßig aufgerufen wird. Weiters ist die


129 von 151

Vergabe von typNum-Werte wichtig, da mehrere Seiten in dem Template definiert werden, die dann beliebig der Reihe nach durchnummerieren werden können. Jede Seite muss einen anderen typeNum-Wert erhalten, zwei gleiche Werte sind unzulässig. frameset.frameSet {

Mit dem Attribut “frameSet” wird ein Frameset für die Seite definiert. rows = *,550,* params = border="0" framespacing="0" frameborder="NO"

Die ersten 2 Attribute definieren die Eigenschaften des Framesets. „rows“ oder auch „cols“ gibt die Zeilen bzw. Spalten an und ist aus HTML bekannt. “params” gibt zusätzlich Attribute an. Die oberen 2 Attribute generieren folgenden HTML-Tag: <frameset rows="*,550,*" border="0" framespacing="0" frameborder="NO"> 1 = FRAME 1.obj = frameset_top 2 = FRAME 2.obj = page_main 3 = FRAME 3.obj = page_bottom }

Als nächstes werden die einzelnen Pages definiert. Diese können dann wieder Framesets oder einfach Seiten sein. Hier wird dann einfach der Objektname der jeweiligen Page zugeordnet. frameset_top = PAGE frameset_top { typeNum = 1 meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Frameset-Top } frameset_top.frameSet { cols = *,900,* params = border="0" framespacing="0" frameborder="NO"

Definition eines Framesets mit Spalten. Es darf dabei auf die Erhöhung des typNum-Werts nicht vergessen werde. 1 = FRAME 1.obj = page_corner 1.params = scrolling="NO" noresize 2 = FRAME 2.obj = page_middle 2.params = scrolling="NO" noresize 3 = FRAME 3.obj = page_corner 3.params = scrolling="NO" noresize }


130 von 151

Es kann den einzelnen Seiten, die das Frameset enthält, auch Parameter zugeordnet werden. Obiges TypoScript entspricht dem folgenden HTML-Code: <frame src=" page_corner.htm" name="page_corner" scrolling="NO" noresize> <frame src=" main_frame.htm" name="page_main" scrolling="NO" noresize> <frame src=" page_corner.htm" name="page_corner" scrolling="NO" noresize> … page_corner = PAGE page_corner.typeNum = 7 page_corner { bodyTag = <body> stylesheet = fileadmin/templates/bartlweb/css/page_corner.css meta.AUTHOR = Christian Bartl meta.DESCRIPTION = Page-Corner } …

Am Schluss ist als Beispiel noch die Definition einer einfachen Seite, die ins Frameset integriert wird, angegeben. Der Unterschied zu den Framesets ist, dass nun kein Attribut „frameSet“ mehr definiert wird. Framesets und der Aufruf von Typo3-Pages:

Werden die einzelnen Typo3-Pages ohne ein Target-Eintrag erstellt wird bei einem Frameset immer wieder alles neu geladen. Um den Vorteil des Framesets auszunützen, geben Sie bitte bei den einzelnen Seiten als Target immer nur den Frame(eventuell Frameset) an, in dem diese geladen werden soll. Die Target-Option finden Sie in den Eigenschaften der Seite.

4.7.5 GIFBuilder Typo3 kann mit Hilfe der GDlibrary, ImageMagick und Freetype dynamisch Grafiken erstellen. Diese Grafiken können z.B. für grafische Menüs benutzt werden oder es kann wie in dem unteren Beispiel die Überschrift der aktuellen Seite in eine Grafik gerendert werden.

Abbildung 100 - TypoScript - GIFBuilder Die obige Grafik wird mit folgendem TypoScript-Code erzeugt. TRAILER=IMAGE TRAILER.file=GIFBUILDER TRAILER.file { XY=558,86 backColor=#82BC8B 10=TEXT 10.text.field=subtitle // title 10.fontSize=40


131 von 151

10.fontFile=fileadmin/fonts/arialbi.ttf 10.fontColor=#96CC9F 10.niceText=1 10.offset=10,75 20=TEXT 20 { text.field = subtitle // title fontSize=16 fontFile=fileadmin/fonts/arialb.ttf fontColor=#e2f5e5 niceText=1 offset=40,68 } }

Analyse des obigen Codes: TRAILER=IMAGE TRAILER.file=GIFBUILDER TRAILER.file {

Die Grafik wird für den Marker „TRAILER” erstellt und ist vom Typ IMAGE. Mit Hilfe des Typs IMAGE und dem Attribut „file“ kann entweder ein Pfad zu einer Datei angegeben werden oder der Wert GIFBUILDER um eine Grafik dynamisch mit TypoScript zu erstellen. XY=558,86 backColor=#82BC8B

„XY“ gibt die Größe der Grafik an (Syntax: Breite, Höhe). „backColor“ definiert die Hintergrundfarbe der Grafik die als Hexwert angegeben wird.

5 = IMAGE 5.file = fileadmin/title.gif 5.offset = 0,0

Das obige TypoScript-Snipplet ist im oberen Beispiel nicht enthalten. Es kann auch eine Grafik als Basis angegeben werden, auf die dann alle anderen Grafiken mit Hilfe von GIFBUILDER gerendert werden. So kann z.B. einfach der Titel eines Buttons in eine vorgefertigte Grafik eingefügt werden.

Als nächstes werden die Objekte für die Grafik erstellt. Zu beachten ist hier, die Reihenfolge. Die Grafiken werden in jener Reihenfolge übereinander gerendert, in der sie definiert wurden (ähnlich der Ebenen in einer Grafiksoftware). 10=TEXT 10.text.field=subtitle // title

Als erstes Objekt wird der hintere große Text erstellt. Dazu erstellen wir ein Objekt vom Typ TEXT und geben das Attribut tex.field mit dem Wert „subtitle // title“ an, um den Subtitel und wenn dieser nicht vorhanden ist den Titel der aktuellen Seite auszugeben. 10.fontSize=40


132 von 151

10.fontFile=fileadmin/fonts/arialbi.ttf 10.fontColor=#96CC9F

Als nächstes wird der Schrifttyp und die Eigenschaften der Schrift gesetzt. „fontSize“ gibt die Größe in Punkt an. Um eine Schrift zu verwenden, benötigen Sie eine TrueTypeFont-Datei. Legen Sie diese im Verzeichnis „fileadmin“ ab und geben sie dem Attribut „fontFile“ den Pfad auf diese Datei mit. „fontColor“ gibt die Farbe der Schrift als Hex-Wert an. 10.niceText=1

Für das TEXT-Objekt kann die Option „niceText” durch belegen mit dem Wert 1 aktiviert werden. „niceText“ rundet die Schriftkanten ab (Kantenglättung), allerdings ist diese Funktion nicht immer unproblematisch und kann in manchen Typo3-Installationen zu Problemen mit der Grafikausgabe führen. 10.offset=10,75 Die Position der linken oberen Ecke des Textes wird mit „offset” angegeben. Syntax: Abstand vom linken Rand, Abstand vom oberen Rand. Die Einheit der Werte ist Pixel. 20=TEXT 20 { text.field = subtitle // title fontSize=16 fontFile=fileadmin/fonts/arialb.ttf fontColor=#e2f5e5 niceText=1 offset=40,68 } }

Nun muss noch der kleine Schriftzug im Vordergrund definiert werden. Es ändert sich gegenüber dem ersten Schriftzug nur die Schriftgröße, Farbe und das Offset. Der obige Code, für das Objekt 20, könnte auch durch folgenden ersetzt werden:

20 < 10 10 { fontSize=16 fontColor=#e2f5e5 offset=40,68 }

Es wird das Objekt 10 kopiert und nur die Parameter, die sich auch wirklich verändern, neu belegt.

4.7.6 TMenu Die einfachste Möglichkeit, ein Menü zu erstellen, ist die Variante eines textbasierten Menüs.


133 von 151

Abbildung 101 - TypoScript - HMenu Der folgende Code realisiert das oben abgebildete Menü. Die Formatierung des Textes und der Linkfarben wird über CSS geregelt. MENU_OBEN=HMENU MENU_OBEN.special=directory MENU_OBEN.special.value=34 MENU_OBEN.1=TMENU MENU_OBEN.1.NO=1 MENU_OBEN.1.ATagParams= class="link" MENU_OBEN.1.NO.linkWrap= | | |*| | | |*| |

Analyse des obigen Codes: MENU_OBEN=HMENU

Um ein Textmenü oder auch später ein Grafikmenü anlegen zu können muss zunächst ein Objekt vom Typ HMENU erstellt werden. MENU_OBEN ist der Marker des Templates an dessen stelle das Menü stehen soll. MENU_OBEN.special=directory

Mit dem Attribut „special“ kann man den Typ des Menüs angeben, das erzeugt werden soll, wobei „directory“ die klassische und meist benötigte Form eines Menüs ist. MENU_OBEN.special.value=34

Das Attribut „value“ nimmt die PageID auf, welche als Root-Seite für die Erstellung des Menüs dienen soll. Dabei werden dann alle Seiten die sich innerhalb dieser Page befinden in das Menü aufgenommen. MENU_OBEN.1=TMENU MENU_OBEN.1.NO=1

Nun wird das eigentlich Textmenü angelegt, indem ein Objekt für „MENU_OBEN.1“ vom Typ TMENU angelegt wird. Das Objekt „1“ gibt die Ebene des Menüs an. So wird hier nur das Menü für die erste Ebene unter dem Einstiegspunkt definiert. Danach wird der normale Zustand für das Menü (NO=Normal, RO=Rollover, CUR=Current) aktiviert. Dabei wird zum aktivieren dem Attribut einfach der Wert 1 zugewiesen. MENU_OBEN.1.ATagParams= class="link"

Als nächstes können für die Links mit Hilfe des Attributs „ATagParam“ noch Parameter wie z.B. die CSS-Klasse angegeben werden. MENU_OBEN.1.NO.linkWrap= | | |*| | | |*| |


134 von 151

Theoretisch wird jetzt bereits ein Menü angezeigt. Allerdings werden alle Menüpunkte direkt nacheinander geschrieben und müssen daher noch getrennt werden. Dies geschieht mit dem Attribut „linkWrap“. Die einfachste Methode wäre „linkWrap=|<br>“ dann würde jeder Menüpunkt in einer eigenen Zeile stehen. Etwas komplexer ist die Erstellung des linkWrap-Wert für ein Menü, welches im obigen Screenshot abgebildet ist:

| | |*| | | |*| |

Der obige linkWrap besteht aus 3 Teilen: Anfang, Mitte und Ende die durch „|*|“ getrennt sind. Also folgende Syntax: Anfang |*| Mitte |*| Ende. Hinweis: Das „|“-Symbol (Pipe) wird durch den Menüpunkt ersetzt. Anfang:

| | Dem erste Element wird am Anfang ein Leerzeichen (entspricht ) angehängt und am Ende noch ein Leerzeichen und das Symbol „|“ (entspricht |)

Mitte: | &#124 Allen anderen Elementen die nicht das erste oder das letzte sind wird ein Leerzeichen vorangestellt und dann ein Leerzeichen und das „|“ Symbol angehängt.

Ende: | Dem letzten Elemnt wird nur ein Leerzeichen vorangestellt.

4.7.7 GMenu

Eine andere Möglichkeit ein Menü zu erstellen ist die Variante eines grafikbasierten Menüs.

Abbildung 102 - TypoScript - GMenu Der folgende Code realisiert das oben abgebildete Menü. MENU_LINKS=HMENU MENU_LINKS.special=directory MENU_LINKS.special.value=35


135 von 151

MENU_LINKS.entryLevel=1 MENU_LINKS.1=GMENU MENU_LINKS.1.NO=1 MENU_LINKS.1.NO { wrap = | <br> XY=146,30 backColor=#478951 10=TEXT 10.text.field=title 10.fontColor=#FFFFFF 10.fontFile=fileadmin/fonts/arialb.ttf 10.fontSize=12 10.niceText=1 10.offset=7,21 20=IMAGE 20.file=GIFBUILDER 20.file{ XY=146,1 backColor=#FFFFFF } 20.offset=0,29 } MENU_LINKS.1.RO<.MENU_LINKS.1.NO MENU_LINKS.1.RO{ tmp<.backColor backColor=#82BC8B 5<.10 5.fontColor<.tmp 5.offset=9,23 } MENU_LINKS.1.CUR<.MENU_LINKS.1.RO MENU_LINKS.2<.MENU_LINKS.1 MENU_LINKS.2{ NO.XY=146,20 NO.backColor=#E2F5E5 NO.10.fontColor=#478951 NO.10.fontSize=8 NO.10.offset=17,15 NO.20.file.backColor=#478951 NO.20.offset=0,19 RO<.NO RO.backColor=#FFFFFF RO.5> CUR<.RO }

Analyse des obigen Codes: MENU_LINKS=HMENU MENU_LINKS.special=directory MENU_LINKS.special.value=35 MENU_LINKS.entryLevel=1 MENU_LINKS.1=GMENU

Der obige Quellcode erstellt wieder ein normales Menü. Der einzige Unterschied zum Textmenü ist, dass nun ein Objekt vom Typ GMENU erstellt wird. „MENU_LINKS.1“ gibt an, dass das Menü für die erste Ebene unter dem Einstiegspunkt erstellt wird. MENU_LINKS.1.NO=1


136 von 151

Es wird nun die Grafik für den Status Normal erzeugt. Dabei kann für jeden Status eines Links eine eigene Grafik erzeugt werden. Die Möglichkeiten sind NO=Normal (normale Anzeige), RO=Rollover (Maus über dem Menüpunkt), CUR=Current (Anzeige des Menüpunkts wenn die Seite gerade aktiv ist). MENU_LINKS.1.NO { wrap = | <br> XY=146,30 backColor=#478951

Jedem Menüpunkt (also jeder Grafik) der erstellt wird wird am Schluss ein Zeilenumbruch (<br>) angehängt, damit die Grafiken untereinander angezeigt werden. Weiters wird noch die Größe und Hintergrundfarbe definiert. 10=TEXT 10.text.field=title 10.fontColor=#FFFFFF 10.fontFile=fileadmin/fonts/arialb.ttf 10.fontSize=12 10.niceText=1 10.offset=7,21 20=IMAGE 20.file=GIFBUILDER 20.file{ XY=146,1 backColor=#FFFFFF } 20.offset=0,29 }

Nun werden der Text des Titels und der Strich unter der Grafik generiert. Siehe dazu den Punkt 4.7.5 GIFBuilder. MENU_LINKS.1.RO<.MENU_LINKS.1.NO MENU_LINKS.1.RO{ tmp<.backColor backColor=#82BC8B 5<.10 5.fontColor<.tmp 5.offset=9,23 }

Als nächstes wird die Grafik für den Status Rollover generiert. Dabei wird einfach das Objekt des Status „Normal“ kopiert und nur die sich ändernden Parameter neu angegeben. MENU_LINKS.1.CUR<.MENU_LINKS.1.RO

Der Status Current soll gleich dem Status Rollover sein. MENU_LINKS.2<.MENU_LINKS.1 MENU_LINKS.2{ NO.XY=146,20 NO.backColor=#E2F5E5 NO.10.fontColor=#478951 NO.10.fontSize=8 NO.10.offset=17,15 NO.20.file.backColor=#478951


137 von 151

NO.20.offset=0,19 RO<.NO RO.backColor=#FFFFFF RO.5> CUR<.RO }

Da die Seitenstruktur einer Webseite normalerweise nicht nur eine Ebene sondern auch Unterebenen enthält werden noch die Grafiken für die 2.Ebene unter dem Einstiegspunkt generiert. Der Befehl MENU_LINKS.2<.MENU_LINKS.1 kopiert die Grafiken der 1. Ebene auf das neue Objekt für die 2. Ebene. Die Objekte 1 und 2 im Objektpfad geben dabei die jeweilige Ebene an.

4.7.8 Content Damit der Inhalt aus Typo3-Pages auch auf der Webseite angezeigt wird, muss auch dieser in das TypoScript eingebunden werden. Darüber hinaus können hier einige Parameter angepasst werden um die Ausgabe anzupassen. Damit überhaupt Inhalt ausgegeben werden kann, muss ein statisches Template zum eigenen Template hinzugefügt werden CONTENT=CONTENT CONTENT{ table=tt_content select.orderBy=sorting select.where=colPos=0 select.languageField=sys_language_uid }

Analyse des obigen Codes: CONTENT=CONTENT

Es wird zunächst ein Objekt vom Typ CONTENT erstellt. In diesem Beispiel heißt der Marker, an dessen Stelle der Inhalt ausgegeben werden soll, ebenfalls „CONTENT“. CONTENT{ table=tt_content

Als nächstes geben wir an wo der Inhalt liegt. „tt_content“ ist eine Tabelle in der Datenbank. select.orderBy=sorting

„select” bezieht sich auf die SQL-Statements. Mit „orderBy=sorting“ wird angegeben das der Inhalt sortiert ausgegeben werden soll. Dabei wird der Inhalt in jener Reihenfolge ausgegeben wie er auf den einzelnen Pages angelegt ist. select.where=colPos=0


138 von 151

„where=colPos=0“ gibt an aus welcher Spalte der Inhalt bezogen werden soll. Eine Typo3-Page besteht aus 3 Spalten (links, mitte, rechts). Die mittlere Spalte ist die Standardspalte und hat die Nummer 0. select.languageField=sys_language_uid }

Mit „languageField=sys_language_uid” wird die richtige Sprachversion aus der Datenbank geholt. In Typo3 können für jede Seite mehrere Sprachen und für jede Sprache unterschiedlicher Inhalt erstellt werden kann. „sys_language_uid“ gibt an, dass der Inhalt für die Standardsprache ausgegeben werden soll.

4.7.8.1 Header Als nächstes passen wir die Ausgabe des Content-Headers an, indem sich zum Beispiel der Titel des Content-Elements befindet. Jedes Content-Element kann einen Titel besitzen. Dieser Codeabschnitt wird außerhalb des Page-Objekts definiert, z.B.: am Ende des Templates. lib.stdheader > lib.stdheader=CASE lib.stdheader{ key.field=header_layout 1=TEXT 1.field=header 1.wrap=<font face="Arial" size="2"><b> | </b></font><br><br> default < .1 }

Analyse des obigen Codes: lib.stdheader >

Zunächst muss das bestehende Objekt „lib.stdheader“ in dem die Ausgabe des Headers definiert wird gelöscht werden. Dies geschieht mit Hilfe des Löschoperators „>“. lib.stdheader=CASE

Danach wird das Objekt neu erstellt. Der Typ ist CASE und somit enthält unser Objekt eine bedingte Verzweigung. lib.stdheader{ key.field=header_layout

„key.field“ nimmt das Feld auf nachdem abgefragt werden soll. In unserem Fall „header_layout“. Dies ist eine einfache Zahl, die bei 1 zu zählen beginnt und beim Erstellen von Inhalt angegeben wird um das Design des Content-Headers anzugeben. 1=TEXT 1.field=header


139 von 151

Jetzt wird jeweils ein Objekt mit dem Namen nach dem die Verzweigungsbedingung abfragt, hier Nummern, angelegt. D.h. ist der Wert von „header_layout“ 1 so wird das obig angelegte Objekt 1 vom Typ TEXT erzeugt und ausgegeben. Der Inhalt von 1 ist das Feld „header“. 1.wrap=<font face="Arial" size="2"><b> | </b></font><br><br>

Um nun die Ausgabe des Headers zu beeinflussen wird wieder das Attribut „wrap“ definiert. default < .1 }

Sollte der Wert von „header_layout“ nicht oben angelegt worden sein, wird automatisch die default-Bedingung aufgerufen. Da wir hier alle Header, egal welches Layout ausgewählt wurde, gleich aussehen lassen wollen, kopieren wird den Inhalt von 1 auf default.

4.7.8.2 Content

Nun passen wir noch die Ausgabe des Contents an. Dies geschieht mit Hilfe des nachfolgenden TypoScripts. Dieser Codeabschnitt wird ebenfalls außerhalb des Page-Objekts definiert. tmp_tt_content_text<tt_content.text tt_content.text> tt_content.text=COA tt_content.text.10<lib.stdheader tt_content.text.20=TEXT tt_content.text.20{ field=bodytext fieldRequired=bodytext wrap=<font face="Arial" size="2">|</font><br> parseFunc<tmp_tt_content_text.20.parseFunc editIcons<tmp_tt_content_text.20.editIcons }

Analyse des obigen Codes: tmp_tt_content_text<tt_content.text

Die Ausgabe des Inhalts ist im Objekt „tt_content.text” definiert. Da wir nacher noch einige Objekte daraus benötigen, legen wir zunächst eine Kopie davon an. tt_content.text>

Danach wird das Original-Objekt gelöscht, um es neu zu definieren. tt_content.text=COA

Das Objekt wird neu angelegt und ist vom Typo COA. COA bedeutet Content Object Array und fast mehrere Objekte zusammen, d.h. in „tt_content.text“ können mehrere Objekte angelegt werden. tt_content.text.10<lib.stdheader


140 von 151

Als erstes Objekt enthält „tt_content.text“ das eventuell zuvor neu definierte Objekt „lib.stdheader“ in dem die Ausgabe des Headers definiert ist. tt_content.text.20=TEXT

Als zweites Objekt wird ein Objekt vom Typ TEXT angelegt um den Body, also den Inhalt, des Contents auszugeben. tt_content.text.20{ field=bodytext

Das dazu benötigte Feld heißt „bodytext”. fieldRequired=bodytext

„fieldRequired“ gibt an, dass das Feld „bodytext“ einen Wert enthalten muss damit dieser Abschnitt des Codes ausgeführt wird. wrap=<font face="Arial" size="2">|</font><br>

Mit Hilfe des Wrap-Befehls wird die Ausgabe des Inhalts wieder angepasst. parseFunc<tmp_tt_content_text.20.parseFunc editIcons<tmp_tt_content_text.20.editIcons }

Nun kommt unsere zuvor angelegte Kopie des Original-Objekts zum Einsatz. Die Objekte „parseFunc“ und „editIcons“ werden aus diesem übernommen (kopiert). „parseFunc“ enthält die Angaben wie die verschiedenen Content-Elemente (Text, Tabellen, Bilder) geparsed und ausgegeben werden sollen. „editIcons“ fügt die Editiersymbole in die Webseite ein, die für die einzelnen Content-Elemente angezeigt werden, wenn ein Admin in das Backend eingeloggt ist und sich die Webseite ansieht.

4.7.9 Konstante

Für Templates können Konstanten angelegt werden. Dabei muss zuerst die Konstante im Feld „Constants“ des Templates definiert werden. Solche Konstanten können im TypoScript-Code nur ausgelesen aber nicht mehr verändert werden. yearWebSiteCreation = 1998

Folgendes TypoScript-Beispiel verwendet die oben definierte Konstante: page.10 = TEXT page.10.value = {$yearWebSiteCreation} page.10.value.wrap= Erstellt im Jahre |. <br>

Analyse des obigen Codes:


141 von 151

page.10 = TEXT page.10.value = {$yearWebSiteCreation}

Es wird zunächste ein Objekt vom Typ TEXT angelegt. Diesem wird der Wert der Variable über das Attribut „value“ zugewiesen. Auf Variablen wird über die Syntax {$Variablenname} zugegriffen. page.10.wrap= Erstellt im Jahre |. <br>

Am Schluss noch ein kleiner Wrap um die Variable herum. Die Endgültige Ausgabe lautet dann: „Erstellt im Jahre 1998.<br>“

4.7.10 Beispiel

Teile aus dem folgenden Beispiel sind bereits mehrfach verwendet worden, um die einzelnen Möglichkeiten von TypoScript in den oberen Punkten zu erklären. Daher wird es nicht mehr ausführlich erklärt, sondern soll nur als Gesamt-Beispiel zur Veranschaulichung und zum Testen dienen.

Abbildung 103 - TypoScript - Beispiel-Template 2

4.7.10.1 HTML-Template  <table width="700" border="0" cellspacing="0"> <tr> <td colspan="3"> <img src="fileadmin/logo.gif" width="146" height="86"> ###TRAILER### </td> </tr> <tr> <td colspan="3" bgcolor="#478951"> <div align="right"> <br> <font face="Arial" size="1" color="#FFFFFF"> ###MENU_OBEN### </font> </div> </td> </tr> <tr> <td width="200" bgcolor="#478951">###MENU_LINKS###</td> <td width="400">###CONTENT###</td> <td width="100" bgcolor="#E2F5E5">###RECHTS### </td> </tr> </table> 


142 von 151

4.7.10.2 CSS A:link { color: #000000; text-decoration: none; } A:visited { color : #333333; text-decoration: none;} A:hover {color:#990000; text-decoration: underline overline ;} A:active {color: #999999; text-decoration: none; }

4.7.10.3 TypoScript-Template page=PAGE page { shortcutIcon = fileadmin/templates/bartlweb/favicon.ico typeNum=0 bodyTag=<body bgColor = "#DDDDD"> stylesheet=fileadmin/style.css meta.AUTHOR=Christian Bartl meta.DESCRIPTION=Testseite 10=TEMPLATE 10.template=FILE 10.template.file=fileadmin/template.htm 10.workOnSubpart=DOKUMENT 10.marks { TRAILER=IMAGE TRAILER.file=GIFBUILDER TRAILER.file { XY=558,86 backColor=#82BC8B 10=TEXT 10.text.field=subtitle // title 10.fontSize=40 10.fontFile=fileadmin/fonts/arialbi.ttf 10.fontColor=#96CC9F 10.niceText=1 10.offset=10,75 20=TEXT 20.text.field = subtitle // title 20.fontSize=16 20.fontFile=fileadmin/fonts/arialb.ttf 20.fontColor=#e2f5e5 20.niceText=1 20.offset=40,68 } MENU_OBEN=HMENU MENU_OBEN.special=directory MENU_OBEN.special.value=34 MENU_OBEN.1=TMENU MENU_OBEN.1.NO=1 MENU_OBEN.1.NO.linkWrap= | | |*| | | |*| | MENU_LINKS=HMENU MENU_LINKS.special=directory MENU_LINKS.special.value=35 MENU_LINKS.entryLevel=1 MENU_LINKS.1=GMENU MENU_LINKS.1.NO=1 MENU_LINKS.1.NO { wrap = | <br> XY=146,30 backColor=#478951 10=TEXT 10.text.field=title 10.fontColor=#FFFFFF 10.fontFile=fileadmin/fonts/arialb.ttf 10.fontSize=12 10.niceText=1 10.offset=7,21 20=IMAGE 20.file=GIFBUILDER 20.file{ XY=146,1 backColor=#FFFFFF


143 von 151

} 20.offset=0,29 } MENU_LINKS.1.RO<.MENU_LINKS.1.NO MENU_LINKS.1.RO{ tmp<.backColor backColor=#82BC8B 5<.10 5.fontColor<.tmp 5.offset=9,23 } MENU_LINKS.1.CUR<.MENU_LINKS.1.RO MENU_LINKS.2<.MENU_LINKS.1 MENU_LINKS.2{ NO.XY=146,20 NO.backColor=#E2F5E5 NO.10.fontColor=#478951 NO.10.fontSize=8 NO.10.offset=17,15 NO.20.file.backColor=#478951 NO.20.offset=0,19 RO<.NO RO.backColor=#FFFFFF RO.5> CUR<.RO } CONTENT=CONTENT CONTENT{ table=tt_content select.orderBy=sorting select.where=colPos=0 select.languageField=sys_language_uid } RECHTS=CONTENT RECHTS{ table=tt_content select.orderBy=sorting select.where=colPos=2 } } lib.stdheader > lib.stdheader=CASE lib.stdheader{ key.field=header_layout 1=TEXT 1.field=header 1.wrap=<font face="Arial" size="2"><b> | </b></font><br><br> 2=IMAGE 2.file=GIFBUILDER 2.file{ XY=[10.w]+10,28 backColor=white 10=TEXT 10.text.field=header 10.fontColor=#478951 10.fontFile=fileadmin/fonts/arialb.ttf 10.fontSize=16 10.offset=1,22 10.niceText=1 } 2.wrap= |<br><br> default < .1 } tmp_tt_content_text<tt_content.text tt_content.text> tt_content.text=COA tt_content.text.10<lib.stdheader tt_content.text.20=TEXT tt_content.text.20{ field=bodytext fieldRequired=bodytext


144 von 151

wrap=<font face="Arial" size="2">|</font><br> parseFunc<tmp_tt_content_text.20.parseFunc editIcons<tmp_tt_content_text.20.editIcons }

Erfahrungsbericht Dokumentation - Infopanel

145 von 151

5 Erfahrungsbericht Im Abschnitt Erfahrungsbericht finden sie eine Dokumentation von Erkenntnissen und Fehlerquellen, die während der Umsetzung des Projekts aufgetreten und gefunden wurden.

5.1 Kioskmodus des Internet Explorers Wird der Internet Explorer im Kioskmodus gestartet, so wird die Webseite im Vollbildmodus und ohne Menüs, die sich auch nicht einblenden lassen, angezeigt. Beendet wird dieser über die Tastenkombination „Alt+F4“. Nähere Informationen finden Sie unter: http://support.microsoft.com/default.aspx?scid=kb;de;154780 Syntax:

iexplore -k <Webseite>

5.2 Verwendung von relativen Pfadangaben im Webbereich Relative Pfadangaben sind im Webbereich ein oft verwendetes Mittel um Pfade nicht absolut angeben zu müssen. /test.htm

Verweist auf eine Datei im Root-Verzeichnis des Servers ./test.htm

Verweist auf eine Datei im aktuellen Verzeichnis ../test.htm

Verweist auf eine Datei im übergeordneten Verzeichnis verzeichnis/test.htm

Verweist auf eine Datei in einem untergeordneten Verzeichnis

5.3 Favicon Ein Favicon ist ein 16x16 oder 32x32 Pixel großes Bild, dass in der Adresszeile eine Browsers, links neben der URL angezeigt wird. Um ein Favicon auf einer Webseite einbinden zu können, muss zuerst ein Icon mit oben genannten Maßen erstellt werden. Icons haben die Dateiendung „.ico“. Eingebunden wird ein Favicon mit folgendem HTML-Code der sich im Header der HTML-Seite befinden muss: <link rel="SHORTCUT ICON" href="favicon.ico">

5.4 GDLib erzeugt keine Gif-Grafiken Wegen den ehemaligen Lizenzproblemen (am 1. Oktober 2006 sind die letzten Patente ausgelaufen) des Grafikformats Gif wurde in vielen Linux-Installationen die GDLib noch nicht mit Gif-Support kompiliert. Ein Patch bzw. neu kompilieren schafft Abhilfe. Weitere Informationen finden Sie unter: http://www.rime.com.au/gd/.

5.5 Typo3 + “die() function call” Es kann vorkommen, dass die Typo3-Installation folgende Warnmeldung ausgibt: „In the source distribution of TYPO3, the install script is disabled by a die() function call.”


146 von 151

Lösung: Suchen Sie die Datei “typo3/install/index.php” im Installationsverzeichnis, suchen Sie nach der „die()“-Funktion und entfernen oder kommentieren Sie diese aus.

5.6 Typo3 + Umlaute werden nicht richtig dargestellt Eine mögliche Ursache kann sein, dass die Umlaute nicht mehr richtig codiert in der Datenbank stehen. Dies kann bei der Überspielung der Datenbank von einem Windows- auf ein Linuxsystem passieren. Dies kann durch das exportieren eines UTF8-codierten SQL-Dumps vermieden werden.

5.7 Typo3 + ImageMagick 4.2.9 Typo3 bevorzugt die Version 4.2.9 von ImageMagick, da hier noch viel genutzte Funktionen wie die Blur-Funktion integriert sind. Es funktioniert natürlich auch eine neuere Version von ImageMagick in Kombination mit Typo3, allerdings muss man hier auf einige Funktionen verzichten. Zitat zu ImageMagick aus dem Install Tool von Typo3:

For conversion of non-web formats to webformats, combining images with alpha-masks, performing image-effects like blurring and sharpening. ImageMagick is a collection of external programs on the server called by the exec() function in PHP. TYPO3 uses three of these, namely ‘convert’ (converting fileformats, scaling, effects), ‘combine’/'composite’ (combining images with masks) and ‘identify’ (returns image information). Because ImageMagick are external programs, two requirements must be met: 1) The programs must be installed on the server and working and 2) if safe_mode is enabled, the programs must be located in the folder defined by the php.ini setting, safe_mode_exec_dir (else they are not executed). ImageMagick is available for both Windows and Unix. The current version is 5+, but TYPO3 enthusiasts prefer an old version 4.2.9 because that version has three main advantages: It’s faster in some operations, the blur-function works, the sharpen-function works. Anyway you do it, you must tell TYPO3 by configuration whether you’re using version 5+ or 4.2.9. (flag: [GFX][im_version_5]) ImageMagick homepage is at http://www.imagemagick.org/

5.8 Typo3 + Proxyserver Das Typo3-Backend wird über SSL-Proxyserver und so genannte Reverse-Proxyserver nicht korrekt dargestellt. Eine mögliche Lösung hat Henning Pingel auf seiner Webseite (http://www.henningpingel.de/TYPO3-Backend-Via-SSL-Proxy.124.0.html?&L=0) veröffentlicht.

5.9 Typo3 + JavaScript in Links Seiten die Funktion von externen Links übernehmen dürfen kein JavaScript enthalten. Zum Beispiel, die oft verwendete Funktion „javascript:history.back()“, um eine Seite in der History zurückzugehen, lässt sich in Typo3 nicht als Link verwenden.

5.10 JSTL + Methoden Mittels JSTL können keine Methoden aufgerufen werden. JSTL kann nur auf Arrays zugreifen. Deshalb ist die Funktionalität in Beans ausgelagert und diese liefern dann ein Array von Objekten zurück, das mit Hilfe von JSTL ausgelesen


147 von 151

werden kann. Es empfiehlt sich eine eigene TagLibrary für aufwendige Funktionen zu schreiben.

5.11 WinCE + InternetExplorer + Proxyserver Der InternetExplorer von Windows CE kann Proxyserver für den Aufruf von lokalen Seiten nicht umgehen. Will man also ins Internet muss ein Proxy angegeben werden, für den Aufruf von lokalen Seiten muss man diesen aber wieder deaktivieren.

Quellverzeichnis Dokumentation - Infopanel

148 von 151

6 Quellverzeichnis In diesem Abschnitt finden Sie Links zu Webseiten die als Quelle für Informationen und Recherchen während der Diplomarbeit verwendet wurden.

6.1 Enzyklopädie

http://de.wikipedia.org/ Projekt zur gemeinschaftlichen Erstellung einer umfangreichen Online-Enzyklopädie.

6.2 HTML

http://de.selfhtml.org/ Sehr beliebte umfangreiche HTML-Referenz mit Codebeispielen.

6.3 CSS

http://www.css4you.de/ umfangreiche CSS-Referenz

http://www.web-kurs.de/html/kapitel/css2.htm Kurze Übersicht über die wichtigsten CSS-Eigenschaften.

http://www.mediaevent.de/css/tabelle-csseigenschaften.html Befehlsreferenz zu CSS

6.4 JSTL

http://java.about.com/od/beginningjava/l/aa_jstl_intro.htm Einführung in JSTL

http://www.samspublishing.com/articles/ article.asp?p=31341&seqNum=2&rl=1

Verstehen der Logik von JSTL http://www.onjava.com/pub/a/onjava/2005/01/05/jspcache.html

Einführung in JSTL http://www.developer.com/java/ejb/article.php/1447551

Einführung in JSTL

6.5 CMS

http://www.opensourcecms.com/ Webseite auf der viele OpenSource-CMS Demozugänge eingerichtet sind und ausprobiert werden können.

http://www.cmsmatrix.org/ Webseite auf der die Funktionen vieler CMS miteinander verglichen werden können.

6.6 Typo3

http://www.typo3.net/ offizielle Typo3-Seite

http://www.typo3.net/tsref/ Sehr gute Typo3-Referenz der Firma Mittwald CM Service GmbH & Co KG.

http://www.mittwald.de/dokumentation/

Quellverzeichnis Dokumentation - Infopanel

149 von 151

Download einer sehr guten Typo3-Dokumentation mit dem Titel „Deutsche Typo3-Dokumentation“ der Firma Mittwald CM Service GmbH & Co KG.

http://www.sk-typo3.de/Typo3-Workshop.15.0.html Workshop für Typo3-Einsteiger.

http://www.contentschmiede.de/links-zu-typo3/ Umfangreiche Linksammlung zum Thema Typo3

http://www.typo3wizard.com/de/snippets.html Viele verschiedene Code-Snippets für TypoScript.

http://jweiland.net/typo3cms/howto/ Einige Dokumentation und Anleitungen zu Typo3.

Glossar Dokumentation - Infopanel - Diplomarbeit

150 von 151

Glossar Backend ........................................................................................ 19, 20, 70, 76, 77, 78, 79, 116 Buffet .......................................................................................................... 14, 30, 31, 45, 46, 50 Cascading Style Sheets ............................................................................................................. 25 CMS ....................................................... 13, 20, 47, 51, 70, 71, 72, 73, 74, 75, 77, 78, 113, 148 Content-Managment-System .................................................................................................... 70 CSS ........................................................................................................... 25, 33, 47, 77, 78, 148 Extensible Markup Language ................................................................................................... 24 Extension ............................................................................................................ 34, 78, 113, 116 Frontend ................................................................................................................. 19, 70, 76, 78 GD Library ............................................................................................................................... 19 GDlib ........................................................................................................................................ 19 Gebäudeplan ............................................................................................... 14, 31, 40, 41, 45, 50 Hacon ....................................................................................................................................... 35 HaCon Ingenieurgesellschaft mbH .................................................................................... 27, 29 Hafas ......................................................................................................................................... 27 HTL Wels ............................................................................. 2, 13, 14, 31, 36, 39, 40, 43, 44, 50 HTML ............................................................. 17, 23, 24, 25, 26, 32, 47, 70, 71, 75, 77, 78, 148 Hypertext Markup Language ................................................................................................... 24 Hypertext Preprocessor ............................................................................................................ 26 ImageMagick .................................................................................................... 19, 20, 21, 36, 76 Infopanel ........................................................................................... 2, 13, 14, 15, 16, 34, 39, 51 Inline Frame ..................................................................................................................... 21, 116 Install Tool ............................................................................. 20, 76, 77, 82, 83, 84, 86, 87, 146 Internet ......................................................................................................... 14, 43, 71, 145, 147 Java ............................................................................................................................... 21, 22, 23 Java Server Pages Standard Tag Library .................................................................................. 23 JavaScript ................................................................................................................................. 26 Joomla! ....................................................................................................... 20, 51, 72, 73, 74, 75 JSP ............................................................................................................ 23, 34, 35, 36, 72, 148 JSTL ............................................................................................................... 23, 34, 35, 36, 148 LAMP ....................................................................................................................................... 26 MySQL ....................................................................................................... 20, 21, 27, 71, 72, 76 News ....................................................................................................................... 15, 46, 50, 75 ÖBB ................................................................................................ 14, 27, 28, 29, 30, 35, 36, 42 ÖBB-Personenverkehr AG ................................................................................................. 27, 29 Page-ID ..................................................................................................................................... 78 PHP ........................................................................................... 19, 20, 26, 34, 70, 71, 72, 76, 88 Sprechstunde ...................................................................................................................... 14, 40 SQL .......................................................................................................................................... 27 Supplierplan ..................................................................................................... 13, 31, 39, 40, 49 Terminkalender ...................................................................................................... 15, 46, 47, 50 Typo3 ............. 19, 20, 21, 32, 33, 34, 35, 47, 51, 70, 72, 75, 76, 77, 78, 79, 113, 116, 148, 149 TypoScript ........................................................................................................................ 77, 117 Untis ......................................................................................................................................... 39 Web Content Management System .......................................................................................... 71 XML ............................................................................................................................. 23, 24, 71

Eidesstattliche Erklärung Dokumentation - Infopanel

151 von 151

Eidesstattliche Erklärung Ich erkläre hiermit an Eides Statt, dass ich die vorliegende Arbeit selbstständig und ohne Benutzung anderer als der angegebenen Hilfsmittel angefertigt habe. Die aus fremden Quellen übernommenen Inhalte sind als solche kenntlich gemacht. Wurden Webseiten zitiert ist dies in den Fußnoten der jeweiligen Seiten vermerkt. Diese Arbeit wurde bisher in gleicher oder ähnlicher Form keiner anderen Prüfungskommission vorgelegt und auch nicht veröffentlicht. Wels, 11 Mai 2006

Christian Bartl Thomas Fischl Sebastian Hochgatterer

Date post:	31-Mar-2016
Category:	Documents
Upload:	christian-bartl
View:	235 times
Download:	16 times

Diplomarbeit - Infopanel - Dokumentation v3.0

Documents