Sie sind auf Seite 1von 151

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 reitinger.franz@utanet.at eingereicht von: Christian Bartl Raiffeisenstr.5 4600 Thalheim bei Wels bartl.christian@aon.at Thomas Fischl Glsdorfstr.25 4600 Wels t.fischl@liwest.at Sebastian Hochgatterer Auf der Lindn 5 4312 Ried/Riedmark sebastian.hochgatterer@gmx.at

Dokumentation erstellt von: Christian Bartl Zuletzt gendert am: 14. Oktober 2012 Abgabetermin: 11.Mai 2007

Inhaltsverzeichnis

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 Gebudeplan ................................................................................................. 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 3 von 151

Inhaltsverzeichnis 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 Unntige Menpunkte - 03.10.2006 ................................................................ 30 2.6.2 Nahverkehr 2010 - 23.10.2006 ......................................................................... 30 2.6.3 Erstellen des Gehuses - 24.10.2006 ................................................................ 30 2.6.4 Gesprch 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 Gebudeplan ..................................................................................................... 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 Entwrf zum Endergebnis ................................................................... 47 3.2.1.2 Aufteilung der Menpunkte ......................................................................... 49 3.2.1.3 Farben ........................................................................................................... 50 3.2.1.4 Grenbeschrnkungen ................................................................................ 50 3.2.2 Entscheidungskriterien fr den Einsatz des CMS Typo3 ............................. 51 3.2.3 Konfiguration von Typo3 ................................................................................. 52 3.2.4 ndern von Hauptmenpunkten ...................................................................... 52 3.2.5 Hinzufgen 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 4 von 151

Inhaltsverzeichnis 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 Menstruktur ................................................................................................ 89 4.5.1.3 Kontextmen ................................................................................................ 92 4.5.1.4 Symbole ........................................................................................................ 94 4.5.2 Login/Logout .................................................................................................... 95 4.5.3 Lschen 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 fr die Webseite ....................................................................... 97 4.5.4.1.2 Records fr einzelne Pages .................................................................... 98 4.5.4.1.3 Arten von Pages ..................................................................................... 98 4.5.4.2 Anlegen einer Page....................................................................................... 99 4.5.4.3 Lschen einer Page..................................................................................... 100 4.5.4.4 Bearbeiten einer Page ................................................................................. 101 4.5.4.5 Kopieren einer Page ................................................................................... 102 5 von 151

Inhaltsverzeichnis 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 Lschen 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 Lschoperator ............................................................................................. 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 6 von 151

Inhaltsverzeichnis 5.11 WinCE + InternetExplorer + Proxyserver.............................................................. 147 Quellverzeichnis ........................................................................................................... 148 6.1 Enzyklopdie .......................................................................................................... 148 6.2 HTML..................................................................................................................... 148 6.3 CSS ......................................................................................................................... 148 6.4 JSTL ....................................................................................................................... 148 6.5 CMS ....................................................................................................................... 148 6.6 Typo3 ..................................................................................................................... 148 Glossar ................................................................................................................................... 150 Eidesstattliche Erklrung ....................................................................................................... 151 6

7 von 151

Abbildungsverzeichnis

Dokumentation - Infopanel

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 - Gebudeplan.................................................................................. 45 Abbildung 21 - Funktion - Buffet ............................................................................................ 46 Abbildung 22 - Funktion - News.............................................................................................. 46 Abbildung 23 - Funktion - Terminkalender ............................................................................. 47 Abbildung 24 - Typo3-Menstruktur - Hauptmen ................................................................. 52 Abbildung 25 - Typo3 - Shortcut ............................................................................................. 53 Abbildung 26 - Typo3-Menstruktur ....................................................................................... 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 8 von 151

Abbildungsverzeichnis

Dokumentation - Infopanel

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 - Lschen 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 9 von 151

Abbildungsverzeichnis

Dokumentation - Infopanel

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

10 von 151

Tabellenverzeichnis

Dokumentation - Infopanel

Tabellenverzeichnis
Tabelle 1 - bersicht der Ressourcen ...................................................................................... 16 Tabelle 2 - Gegenberstellung Endentwurf - Umsetzung ........................................................ 48 Tabelle 3 - Designentwrfe ...................................................................................................... 48 Tabelle 4 - CMS Matrix ........................................................................................................... 72 Tabelle 5 - Backendmodule...................................................................................................... 90 Tabelle 6 - Kontextmen .......................................................................................................... 92 Tabelle 7 - Symbole ................................................................................................................. 94 Tabelle 8 - Records fr Webseiten ........................................................................................... 97 Tabelle 9 - Records fr Pages .................................................................................................. 98 Tabelle 10 - Arten von Pages ................................................................................................... 98 Tabelle 11 - Arten von Content .............................................................................................. 104

11 von 151

Motivation

Dokumentation - Infopanel

1 Motivation
Die Digitalisierung und Technisierung von Informationsflssen macht auch vor sterreichs Schulen und Universitten 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 Gebude zu finden. Die HTL Wels als eine der grten und gut ausgestattetsten HTLs in Obersterreich mchte hier mit einer Diplomarbeit seine Vorreiterrolle weiter ausbauen und so sollen die wichtigsten organisatorischen Aufwnde im Interesse von Lehrern, Schlern und auch Besuchern digital abrufbar und bersichtlich aufbereitet werden. Das Stichwort lautet Infopanel, ein von vielen anderen Einrichtungen, wie Museen oder Bahnhfen, 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 Schlern und Lehrern sondern auch Besuchern und zu Sprechstunden kommenden Eltern zu Verfgung stehen um Informationen zu Lehrern, Supplierstunden, Sprechstunden und zur HTL Wels abrufen zu knnen. Der Nutzen des Infopanels ist aber vor allem fr die internen Ablufe der HTL Wels selbst gegeben. So muss der aktuelle Supplierplan nicht jeden Tag ausgedruckt und in der Aula der Schule ausgehngt werden sondern wird automatisch aus dem Stundenplanverwaltungstool Untis auf das Infopanel bertragen. Weiters muss fr das Auffinden eines Lehrers nicht mehr wie bis jetzt blich in den Stundenplnen 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 Mglichkeit sich einen Gebudeplan der Schule anzeigen zu lassen in dem der aktuelle Aufenthaltsort markiert ist um den Weg zum entsprechenden Raum auch einfacher finden zu knnen. Die Umsetzung des Systems erfolgt mit Hilfe eines Industrie-PCs der ber einen Touchscreen verfgt und die in HTML gestaltete Oberflche des Infopanels aufruft. Eine Tastatur, fr die Eingabe von Suchbegriffen, ergnzt das System. Das komplette Projekt luft auf dem Webserver der HTL Wels. Auf diesem befinden sich die als Webseite realisierte Oberflche, die Datenbank und die Funktionalitt des Infopanels. Das gesamte Projekt ist somit von jedem Client im Schulnetzwerk aufrufbar und plattformunabhngig. Realisiert wurde das Projekt Infopanel im Rahmen einer Diplomarbeit der 5.AIT im Jahre 2007. Dabei waren folgende Personen fr die Organisation und Umsetzung zustndig: Christian Bartl o Design o Dokumentation Thomas Fischl o Funktionalitt o Datenbank und Webserver Sebastian Hochgatterer o Funktionalitt o digitaler Gebudeplan

12 von 151

Projektorganisation

Dokumentation - Infopanel

2 Projektorganisation
In diesem Kapitel sind die Projektbeschreibung, die Zieldefinition, die verwendeten Ressourcen und die Dokumentation der Arbeitsstunden angefhrt. 2.1 Zieldefinition Die Diplomarbeit Infopanel umfasst die Gestaltung und Implementierung eines Informationspunktes fr Schler und Lehrer der HTL Wels. Dabei soll auch der bis dato immer auszudruckende Supplierplan digital abrufbar. Weiters soll es mglich sein, den aktuellen Aufenthaltsort von Lehrern abrufen zu knnen um den Gang zum Sekretariat und das dortige Suchen in den Stundenplnen berflssig zu machen. Aktuelle Zugfahrplne und allgemeine Informationen ber die HTL, das Buffetangebot und ein Internetzugang sind weitere Informationen und Funktionen, die das Infopanel bieten soll. Eine tgliche Aktualisierung der Daten ist allerdings Grundvoraussetzung fr den sinnvollen Einsatz des Systems. Zieldefinition in einem Satz: Es ist ein fr den Endanwender konzipierter EDV-basierter Informationsstand zu gestalten, der es ermglicht, alle fr Besucher, Schler, 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 fr die Darstellung und die Programmierung der Funktionalitt. Dabei wird die aktuelle Schulhomepage, das Stundenplantool Untis und eine Schnittstelle zu den Fahrplnen 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 groen 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 fr den Supplierplan des Infopanels werden aus Joomla extrahiert und grafisch neu aufbereitet. Dabei knnen sowohl Schler als auch Lehrer (ber einen Login) ihren individuellen Supplierplan abfragen. 2.3.1.2 Sprechstunden Schler und Eltern knnen hier nach Lehrern und dessen Sprechstunden suchen. Dabei werden neben den Sprechstunden noch kurze Informationen 13 von 151

Projektorganisation

Dokumentation - Infopanel

zum Lehrer angezeigt (Foto, Unterrichtsfach, Name, usw.). Es gibt direkt eine Verlinkung zum Gebudeplan um den Raum in dem die Sprechstunde stattfindet sofort finden und eine Wegbeschreibung dorthin anzeigen zu knnen. 2.3.1.3 Lehrersuche Hier kann nach einzelnen Lehrern gesucht werden. Nicht nur um Daten wie Name, Foto, Unterrichtsfcher, Sprechstunden, usw. anzeigen zu knnen sondern auch wo sich der Lehrer gerade befindet. Auch hier gibt es eine Direktverlinkung zum Gebudeplan. 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 Groteil aller HTL-Schler ist mit dem Zug unterwegs. Dabei kommt es immer wieder zu Versptungen. Aber auch bei einem Entfall von Stunden ist es oft hilfreich zu wissen, wann der nchste Zug abfhrt. Hier soll das Modul Zugverbindungen helfen. Dieses bernimmt die Zugfahrplne der BB und bindet diese bequem und durchsuchbar in das Infopanel ein. 2.3.1.5 Internetzugang Nicht alle Schler haben stndig Zugang zum Informationsmedium Internet. Das Infopanel bietet einen Internetzugang an, um im Internet zu surfen. Fr das Serven kann der Novell-Login verwendet werden, den jeder HTL-Schler bei Schuleintritt bekommt. Dieser wird auch hier verwendet um dann eine limitierte Zeit (dzt. 10 Minuten) im Internet surfen zu knnen. 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 Gebudeplan Der Gebudeplan bildet das komplette Schulgebude als 2D-Landkarte nach. Dabei kann hier nach Wegen zu einzelnen Rumen, 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 trgt fr das leibliche Wohl der Schler bei. Unter diesem Punkt soll eine Preisliste des Buffets sowie des Burgstberls auffindbar sein. Auch das aktuelle Tagesmen oder Angebote knnen hier angegeben werden. Ebenfalls ist daran gedacht, den Menplan der HBLA zu integrieren.

14 von 151

Projektorganisation

Dokumentation - Infopanel

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 fr Matura und Nachprfungen publiziert. Weiters sollen spezielle Schulveranstaltungen oder Schulprojekte vorgestellt werden. 2.3.2 Nichtfunktionale Anforderungen Um die funktionalen Anforderungen erfllen zu knnen mssen einige Schnittstellen zu bestehenden Datenquellen implementiert werden. 2.3.2.1 Untis Alle Funktionen die Lehrerdaten, Supplier- und Stundenplne bentigen beziehen ihre Daten aus dem Stundenplantool Untis, dass von der HTL Wels zur Verwaltung der Stundenplne eingesetzt wird. Dabei werden die Daten automatisch aus der Datenbank des Tools ausgelesen und in die Datenbank des Infopanels bertragen. Eine regelmige Aktualisierung findet automatisch statt. 2.3.2.2 Schulhomepage Die Daten fr 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 Verfgung gestellt. Dabei werden am Infopanel die Abfahrtstafeln - wie sie auf sterreichs Bahnhfen verfgbar sind - angezeigt. 2.3.2.4 Novell-User Fr den Internetzugang wird ein speziell fr das Infopanel angelegter Novell-User mit einer Datenvolumsbegrenzung verwendet. Dabei mssen sich Nutzer nicht einloggen und nutzen somit das gemeinsamen Datenvolumen. Ist dieses verbraucht, wird der Internetzugang gesperrt. 2.3.3 GUI-Richtlinien Die Oberflche (GUI Graphical User Interface) soll dem allgemein gngigen Design von Infopanels entsprechen und vor allem einfach und intuitiv zu bedienen sein. Die Farbgebung wird Orange und Grau, wobei Orange auf Grund der Gebudefarbe der Schule und Grau wegen des bentigten Kontrasts gewhlt wird. Die Oberflche wird komplett in HTML implementiert. Weiters sollen sich Menpunkte und Inhalte umkompliziert und schnell ndern und einbinden lassen, woraus die Verwendung eines CMS resultiert. 15 von 151

Projektorganisation 2.4

Dokumentation - Infopanel

Ressourcenplan Fr die Umsetzung des Projektes ist die Beschaffung von einigen Ressourcen notwendig. Die Kosten fr diese werden von der Schule getragen. So wurde ein Industrierechner mit Touchscreen, das ntigte Netzteil, eine vandalismussichere Tastatur und ein Metallrahmen fr die Komponenten besorgt. An Informationen wurden uns Gebudeplne der Schule, Beispielstundenplne und Beispielsupplierplne zu Verfgung gestellt. Fr den Betrieb des Infopanels wird das System auf dem Webserver der Schule eingerichtet und ein eigener NovellBenutzeraccount fr den Internetzugang angelegt.
Tabelle 1 - bersicht der Ressourcen

Hardware IndustriePC Tastatur Software Webserver Datenbank CMS 1 CMS 2 Grafiksoftware

Bezeichnung PowerPanel PP120 INTI-4/PS2 Bezeichnung Apache HTTP Server MySQL Typo3 Joomla! ImageMagick

Hersteller Bernecker + Rainer Industrie Elektronik GmbH Firma Richard Whr GmbH Hersteller Apache Software Foundation MySQL GmbH TYPO3 Association Joomla! ImageMagick Studio LLC

2.4.1 Hardware Als Hardware fr 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 Whr GmbH. 2.4.1.1 Tastatur - INTI-4/PS2

Abbildung 1 - INTI-4/PS2[1]

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

16 von 151

Projektorganisation

Dokumentation - Infopanel

Spezifikationen:[2] hervorstehende Langhubtastatur mit V2A-Metallklappen (ermglicht schnelle Eingabe, Tasten gegen Verdrehen und Aushebeln gesichert) inkl. Kabel und PS/2-Anschlu (Anschluss an USB-Port ber Adapter mglich) 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 Displayauflsung: 1024x768 (4:3) Abmessungen: siehe unten angefgten Konstruktionsplan

2 3

http://www.industrietastaturen.woehrgmbh.de/html/internettastatur-metall-2.html 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

17 von 151

Projektorganisation

Dokumentation - Infopanel

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 fr 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 untersttzt. Durch einen modularen Aufbau kann der Apache-Webserver leicht um Funktionen, so genannte Module, erweitert werden. Weiters ist eine CGISchnittstelle implementiert und es besteht die Mglichkeit, serverseitige Skriptsprachen einzubinden. Ein Server Side Include-Modul runden die Funktionen zum dynamischen erstellen von Webseiten ab. Aktuell wird der

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

18 von 151

Projektorganisation

Dokumentation - Infopanel

Apache Server in den stabilen Versionen 1.3.x, 2.0.x und 2.2.x von der Apache Software Foundation untersttzt. 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 ausfhren. Der Funktionsumfang wird durch einen kompletten Webserver ergnzt. 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 fr mittlere bis groe 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. Fr nhere Informationen, siehe den Punkt 4 Typo3. 2.4.2.3.1 Extensions Typo3 wird mittles so genannten Extensions um Funktionen fr Backend und Frontend erweitert. Beispiele dafr sind der Inline Frame von Stanislas Rolland oder ein Kalender, ein Blog, ein Forum, usw. 2.4.2.4 Grafiksoftware Fr die Generierung von Grafiken bentigt Typo3 externe Software. 2.4.2.4.1 GD Library Die GD Library ist ein OpenSource Grafikframework fr die unterschiedlichsten Programmiersprachen, welches die Erzeugung unterschiedlicher Grafikformate untersttzt. Die GDLib stammt von von Thomas Boutell[6]. Das weitverbreiteste Einsatzgebiet ist das dynamische Erzeugen von Webgrafiken mit PHP. Die GDlib untersttzt neben GIF und PNG auch JPEG und WBMP. Aktuell knnen nicht nur 256 Farben-, sondern auch TrueColor-Bilder erzeugt werden. Dabei knnen Linien, Rechtecke, Polygone, Kreisbgen und Ellipsen generiert werden. Auch die Textausgabe von TrueType- oder PostScript-Schriften ist mglich. Weiters werden Alphakanle (Transparenz und Verlufe) mit 7 Bit untersttzt und es knnen animierte GifDateien erzeugt werden. 2.4.2.4.2 ImageMagick und GraphicsMagick

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

19 von 151

Projektorganisation

Dokumentation - Infopanel ImageMagick ist ein Open-Source-Softwarepaket zur Erstellung und Bearbeitung von Pixelgrafiken. Ein Haupteinsatzgebiet von ImageMagick ist die dynamische Generierung von Grafiken fr 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 gehrt Joomla! zu den bekanntesten und mchtigsten 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 fr alle gngigen Betriebssysteme verfgbar und wird bevorzugt fr Webauftritte in Verbindung mit Apache HTTP Server verwendet. MySQL untersttz beliebig viele Datenbanken, mit beliebig vielen Tabellen und in beliebiger Gre (die nur durch das Betriebssystem beschrnkt wird). Abfragen knnen sich ber Tabellen, Datenbanken und sogar verschiedene Server erstrecken. Dabei bietet MySQL die Mglichkeit 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: Passwort: Install Tool Passwort:

admin cisco cisco

2.4.2.7.3 MySQL Zugang fr Webanwendungen Benutzername: joomla Passwort: (leer) 2.4.2.7.4 FTP Zugang zu Typo3 auf dem HTL-Webserver Verzeichnis: /srv/www/htdocs/infoPanel_typo3 20 von 151

Projektorganisation Benutzername: Passwort: infoPP infoPP

Dokumentation - Infopanel

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: Apache Tomcat: PHP: MySQL: Java: Typo3: Inline Frame: GraphicsMagick: GD Graphics Library: Joomla: 2.x 5.x 5.x 5.x 1.5.x 4.0.2 1.0.2 5.5.x 2.1.x 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 ausfhrt. Da die Java Virtual Machine fr alle gngigen 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 fnf Ziele an:[7] Sie soll eine objektorientierte Programmiersprache sein. Sie soll ermglichen, gleiche Programme auf unterschiedlichen Computersystemen auszufhren. Sie soll eingebaute Untersttzung fr die Verwendung von Computernetzen enthalten. o Sie soll Code aus entfernten Quellen sicher ausfhren knnen. Dieser Punkt wird ber das Sicherheitskonzept von Java erreicht, das aus drei Schichten besteht:

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

21 von 151

Projektorganisation

Dokumentation - Infopanel o den Class-Loadern (deutsch Klassenlader), die die sichere Zufhrung von Klasseninformationen zur JVM steuern. o den Security-Managern (deutsch Sicherheitsverwalter), die sicherstellen, dass nur Zugriff auf Programmobjekte erlaubt wird, fr die entsprechende Rechte vorhanden sind. Die erfolgreichen Aspekte bereits verbreiteter objektorientierter Programmiersprachen wie C++ sollen auch fr Java-Programmierer zur Verfgung 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 mssen diese in einem Webcontainer wie Apache Tomcat gestartet werden. Dieser Webcontainer ist dann fr 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]

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

22 von 151

Projektorganisation

Dokumentation - Infopanel

2.4.3.3 JSP Java Server Pages (Abkrzung: 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 knnen, 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="Lschen"> <input type=submit name="submit" value="Abschicken"> </form> <% } //end if %> </body> </html>

2.4.3.4 JSTL Die Java Server Pages Standard Tag Library (Abkrzung: JSTL) enthlt 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 Schlsselwort <Tag>. Tags knnen offen oder schlieend sein. Bei schlieenden Tags muss der letztere einen fhrenden Schrgstrich 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"

10

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

23 von 151

Projektorganisation
version="2.0">

Dokumentation - Infopanel

<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> Whrung: <fmt:formatNumber value="10000" type="currency" currencyCode="EUR" /> </p> </body> </html> </jsp:root>

2.4.3.5 XML XML ist die Abkrzung fr 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 fr 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 fr Hypertext Markup Language und ist eine textbasierte Auszeichnungssprache von Inhalten, Bildern und Hyperlinks in

11 12

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

24 von 151

Projektorganisation

Dokumentation - Infopanel

Dokumenten. HTML-Dateien sind die Grundlage von Webseiten und werden von Webbrowsern dargestellt. Neben den vom Browser dargestellten Inhalt knnen 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 hauptschlich technische oder dokumentarische Informationen enthlt, die nicht direkt im Browser sichtbar sind und 3) dem HTML-Krper (BODY), der anzuzeigende Informationen enthlt. 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> <!-- Evtl. weitere Kopfinformationen --> </head> <body> Inhalt der Webseite </body> </html>

2.4.3.7 CSS Cascading Style Sheet, kurz CSS, ist eine declarative Sprache fr die Formatierung von strukturierten Dokumenten wie HTML. CSS gilt heute als Standard-Stylesheetsprache fr das Web und kann nicht nur Schriftart, Gre 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

25 von 151

Projektorganisation

Dokumentation - Infopanel

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 ausgelst werden. Weiters knnen Formulareingaben mittels JavaScript verarbeitet bzw. kontrolliert werden. So kann zum Beispiel die Eingabe auf Vollstndigkeit geprft werden, bevor der Nutzer das Formular absenden kann. Beispiel:
<script language="JavaScript"> <!-var anzahl; var name="Schafe"; anzahl=3; var beine=4*anzahl; var satz=anzahl+" "+name+" haben "+beine+" Beine"; document.write(satz); //--> </script>

2.4.3.9 PHP PHP steht fr Hypertext Preprocessor (ursprnglich 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 heit, das Skript wird auf dem Server abgearbeitet und liefert die fertige Web-(HTML)seite an den Client. Um PHP-Dateien zu verarbeiten knnen, muss am Server ein PHP-Interpreter installiert sein. Dieser ist aktuell in der Version 5.x erhltlich. 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)

26 von 151

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

Dokumentation - Infopanel

Abbildung 5 - PHP-Funktionsweise[16]

2.4.3.10 SQL SQL, die Abkrzung fr Structured Query Language, ist eine deklarative Datenbanksprache fr 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 Datenbestnde an. Beispiel:
SELECT * FROM meineTabelle WHERE feldName1 = 'xy' AND feldName2 < 100 AND feldName3 BETWEEN 1 AND 10;

2.4.4 BB-Abfahrtstafeln Fr die Anzeige des Zugfahrplanes wurde uns nach Absprache mit der BBPersonenverkehr AG eine Schnittstelle zur Anzeige der Abfahrtsplne zur Verfgung gestellt, die ident mit der Abfahrtsanzeige in sterreichischen Bahnhfen ist. Diese Lsung wird fr die BB-Personenverkehr AG von der Firma HaCon Ingenieurgesellschaft mbH bereitgestellt und nennt sich Hafas[17]. Fr 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 knnen.

16 17

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

27 von 151

Projektorganisation 2.4.4.1 Beschreibung

Dokumentation - Infopanel

Abbildung 6 - BB Abfahrtstafel

Die Anzeige, wie in obiger Grafik abgebildet, kann entweder als selbstndige Webseite angezeigt werden oder aber auch in ein Frameset integriert werden. Dazu muss in der URL der Wert CMSFrames=true auf CMSFrames=false gendert werden. Sollte dies einmal nicht funktionieren, kann noch der Wert start=1 auf start=0 gendert werden. Bei den Bushaltestellen gibt es einige Einschrnkungen. So werden lngere Zielorte aufgrund der Spaltenbreite abgeschnitten. Bei Rundlinien wird als Ziel der Startpunkt angezeigt, da diese ja an den Startpunkt zurckkehren. Die Bussteige werden ebenfalls nicht angezeigt da diese aufgrund der Haltestellenbezeichnung im oberen roten Balken selbsterklrend sind. Sollte der unwahrscheinliche Fall eintreten, dass gerade keine Busse oder Zge abfahren, oder eine Strung auftreten erscheint die Fehlermeldung Keine Zge zu dieser Zeit.

28 von 151

Projektorganisation

Dokumentation - Infopanel

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 Verfgung 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 29 von 151

Projektorganisation 11) Funktionalitt in das Design integrieren 12) Dokumentation 13) Projektabgabe 2.6

Dokumentation - Infopanel

Zeittafel Nachfolgend finden Sie den groben Ablauf und die wichtigsten Meilensteine des Projekts. Die nachfolgenden Menpunkte enthalten Notizen zu Besprechungen und wichtigen Entscheidungen, die whrend 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 - Prsentation 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 - Prsentation der Diplomarbeit im Rahmen der Matura 2.6.1 Unntige Menpunkte - 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 mglich. Altbewhrter Aushang und Anfhrung auf der Homepage machen mehr Sinn. 2.6.2 Nahverkehr 2010 - 23.10.2006 Besuch der Nahverkehr 2010 am 23.10.2006 im Designcenter Linz, wo wir von der BB bereits am Stand erwartet wurden. Kurzes Gesprch mit einem der Mitarbeiter der BB und eines Hacon-Mitarbeiters. Hacon betreut die Fahrplanaufbereitung fr 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 fr uns eingerichtet. Dabei knnen immer die Ankunftszeiten oder Abfahrtszeiten fr Bus oder Bahn und pro Haltestation angezeigt werden. Folgende Abfahrtsplne sind sinnvoll: Hauptbahnhof Lokalbahnhof Kaiser-Josef-Platz Busbahnhof 2.6.3 Erstellen des Gehuses - 24.10.2006 Untersttzung von der Werkstttenleitung Fachlehrer Schmidt legt einen Auftrag fr uns an 30 von 151

Projektorganisation

Dokumentation - Infopanel Fachlehrer Helmbrand sorgt fr die Umsetzung eventuell noch Lehrer fr das Erstellen der Plne bentigt Panel wird in Nirosta umgesetzt Unsere Designvorgabe sollte umsetzbar sein ThinClient in Lochkfig unterbringen

2.6.4 Gesprch mit Prof. Sander - 13.11.2006 Das Projekt ist so zu gestalten, dass nchstes Jahr daran weitergearbeitet werden kann. Seine persnliche Einschtzung ist, dass das Projekt von uns so und so nicht fertig gestellt werden wird, aber wir sollen das Beste versuchen. Vernderungen an der Homepage wird es in nchster Zeit nicht geben, somit kein Problem mit direktem Zugriff darauf. Es ist mit nderungsvorschlgen seitens der Direktion zu rechnen. 2.6.5 Designabnahme - 27.11.2006 Begutachtung, Besprechung und Abnahme des Designs und der Menstruktur 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 Menstruktur muss noch etwas berarbeitet werden, doch grundstzlich ist bis jetzt gute Arbeit geleistet worden. generelle Anregungen: Bildschirmschoner knnte als Werbeflche genutzt werden. Dieser soll sich bei Inaktivitt 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. Menstruktur berarbeiten: Sprechstunden und Lehrersuche mit Menstruktur fr Alphabetische Suche versehen (A-C, D-F, usw.) Bei Supplierplan entweder Lehrernamen ausschreiben oder Krzel verlinken. Sprechstunden, Lehrersuche und Gebudeplan miteinander verknpfen. Buffet-Menpunkt eventuell noch umbenennen um keine Verbindung mit Schulbuffet herzustellen. zum Punkt HTL Wels: Die Punkte Direktion und Sekretariat hinzufgen bzw. Geschichte nicht als ersten Punkt nehmen. 2.6.6 Suchenfunktion - 15.01.2007 Es sollte eine Suchenfunktion fr einzelne Menpunkte, um die Tastatur auszuntzen, integriert werden. Dabei soll die Startseite der Menpunkte nicht mehr der erste Untermenpunkt sein sondern eine Suchseite. Diese kann dann allerdings auch nur durch das erstmalige aufrufen der Menseite aufgerufen werden.

31 von 151

Projektorganisation 2.7

Dokumentation - Infopanel

Dokumentation der Arbeitsstunden Stundennachweis sortiert nach Datum mit Aktivitten und Stundenanzahl. Insgesamt mssen 200 Stunden fr die Diplomarbeit absolviert und dokumentiert werden. Gesamtarbeitszeit: 212 Stunden (Viele Stunden fr Organisation und Gesprche mit Direktion, Sekretariat und Organisatoren sind allerdings nicht dokumentiert und somit auch nicht eingerechnet) 25.10.2006 Designentwrfe erstellen Stundenanzahl: 6 02.10.2006 Designentwrfe berarbeiten Designentwrfe von Dipl.-Ing. Anton Schachl und Dipl.-Ing. Reinhard Mayr absegnen lassen Diskussion ber einzusetzende Technologien, eventuell auftretende Probleme, Schlsselstellen, noch zu besorgende Informationen und Daten. Stundenanzahl: 6 03.10.2006 Einrichten der Entwicklungsumgebung von Typo3 Installieren von Mediawiki und Wordpress Befllen und Einrichten des Blogs Beginn des Pflichtenheftes Stundenanzahl: 4 09.10.2006 Einrichten und Testen des ThinClients Erstellen einer Preview-Seite fr Demonstrationszwecke Erstellen des HTML-Grundgerstes fr Typo3 berlegungen wie die Struktur der Webseite aufgebaut wird Stundenanzahl: 6 13.10.2006 weiter entwickeln des Designs Browser-Funktionen und Kompitabilitt des Windows CE Browsers ermitteln schreiben des Pflichtenhefts Stundenanzahl: 6

32 von 151

Projektorganisation 23.10.2006 Besuch der Nahverkehr 2010 Stundenanzahl: 4

Dokumentation - Infopanel

30.10.2006 Organisieren von Daten Organisieren des Infostandes (Werksttte), wird von Herrn Helmberger umgesetzt. Gestalten von Schaltflchen DHTML-Scrollleiste aus Design entfernen Erstellen der Typo3-Struktur Grunddesign der Index-Seite in Typo3 umsetzen (Problem: Roll-OverButtons werden nicht erzeugt.) Stundenanzahl: 7 06.11.2006 Typo3-Template erstellen Menfhrung einbauen iFrame ansprechbar machen CSS-Dateien erstellen Problem mit Templateumsetzung -> wird sehr komplex aber realisierbar Idee wie jedem Menpunkt ein Button zugefgt werden kann fehlt noch gnzlich Stundenanzahl: 6 08.11.2006 Vollstndige Umsetzung des dynamischen Mens Stundenanzahl: 1 10.11.2006 auf Contentseite fehlende noScroll-Option im BodyTag implementieren Grafiken noch nicht komprimiert, da maximale Dateigre bei 200KB liegt (ber Lan also nicht der Rede wert). Headergrafik der Contentseite Buttons fr Contentseite designen Stundenanzahl: 3 12.11.2006 Buttons auf Contentseite berarbeiten Stundenanzahl: 1 13.11.2006 Erstellen eines neuen Templates fr Seiten ohne Menpunkte Anlegen der Untermenpunkte (soweit bekannt) 33 von 151

Projektorganisation

Dokumentation - Infopanel Anpassen der Tabellenstruktur des Grundtemplates Menpunkte nicht zentriert sondern an Oberkante plazieren Schriftgren des Gifbuilders anpassen (so dass auch der lngste Menpunkt noch korrekt angezeigt wird) Headergrafik berarbeiten Buttons berarbeiten

Stundenanzahl: 7 17.11.2006 Erstellen des Mens auf der Indexseite Grafiken generieren Typo3-Template berarbeiten Stundenanzahl: 6 20.11.2006 Versuch das Linkproblem zu Lsen 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 VMWareTestserver Problemlsungsversuch: 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 hinzufgen Gre der Grafiken des Templates reduzieren Prsentation 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 34 von 151

Projektorganisation Stundenanzahl: 7

Dokumentation - Infopanel

04.12.2006 Template fr Prsentationen erstellen Mail an BB/Hacon wegen den Darstellungsproblemen der Abfahrtstabelle Diskussion ber weitere Vorgehensweise Stundenanzahl: 3 11.12.2006 Prsentation fr PPM erstellen Grundstruktur der Dokumentation erstellen Menpunkte meiner Dokumentation finden BB-Infotafel-Link-Problem gelst Grunddesign fr Inhalt berarbeiten Menstruktur berarbeiten Stundenanzahl: 6 08.01.2007 Prsentation des aktuellen Projektstatus Testen der Tastatur Abklren des aktuellen Projektstatus Einlesen in JSTL Erstellen des JSP fr Termine Lsungsversuch: Keine Methoden des Beans ber JSTL aufrufbar Stundenanzahl: 6 15.01.2007 Designen der Unterseiten berarbeiten der Menstruktur Datenbank fr Routenplaner einrichten Stundenanzahl: 6 18.01.2007 Erstellen des Contentseiten-Designs Umstrukturieren der Menstruktur in Typo3 Mail an Hacon/BB wegen Designvorlage Stundenanzahl: 4 19.01.2007 Erweitern und Ausbessern der Content-Templates JSTL-Tag Lsung suchen Einrichten der Serverumgebung am Webserver der Schule Besprechung ber weitere Vorgehensweise und Aufgabengebiete 35 von 151

Projektorganisation Stundenanzahl: 8

Dokumentation - Infopanel

22.01.2007 Contentdesigns berarbeiten PHProxy fr Internetzugang berarbeiten (funktioniert allerdings nur mit Firefox) JSTL fr Sprechstunden erzeugt und getestet Statische Seiten der Sektion HTL Wels erzeugt Stundenanzahl: 6 25.01.2007 Erhalt und Einbau der BB-Abfahrtsplne in passendem Design Stundenanzahl: 1 29.01.2007 Datenstruktur fr JSP-Files festlegen mit ImageMagick-Problem auf HTL-Webserver beschftigen Content-Seiten berarbeiten Stundenanzahl: 6 05.02.2007 Schreiben der Dokumentation Stundenanzahl: 3 05.03.2007 Schreiben der Dokumentation Stundenanzahl: 6 06.03.2007 Schreiben der Dokumentation Stundenanzahl: 3 07.03.2007 Schreiben der Dokumentation Stundenanzahl: 2 12.03.2007 JSP-Files erstellen Schreiben der Dokumentation Stundenanzahl: 6 16.03.2007 36 von 151

Projektorganisation Schreiben der Dokumentation

Dokumentation - Infopanel

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 Vervollstndigen der JSP-Dateien Vervollstndigen des Designs Vorfhrung des aktuellen Projektstatus (Dipl.-Ing. Reinhard Mayr) Stundenanzahl: 6 16.04.2007 Dokumentation erstellen Fehler in JSPs ausbessern mit ImageMagick und Linux beschftigen 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 37 von 151

Projektorganisation Grafiken von Map in GIF konvertieren Typo3-Problem mit Grafikgenerierung lsen Dokumentation Korrekturlesen

Dokumentation - Infopanel

Stundenanzahl: 6 24.04.2007 Typo3-Problem mit Umlaute lsen (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 Prsentation erstellen Stundenanzahl: 3 09.05.2007 Dokumentation berarbeiten JSP-Dateien berarbeiten Prsentation erstellen Stundenanzahl: 5 31.05.2007 Dokumentation berarbeiten Dokumentation drucken und binden Stundenanzahl: 6

38 von 151

Infopanel

Dokumentation - Infopanel

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 fr den Endanwender konzipierter EDV-basierender Rechner in ansprechendem Gehuse, ausgestattet mit Touchscreen und/oder mit Tastatur und Maus. 3.1 Funktionen Die meisten Funktionen des Infopanels setzen ein regelmiges Update der Daten voraus. Die Daten fr Lehrer, Stundenplan, Supplierungen, Raumaufteilung, usw. werden von der Schule mit dem Tool Untis[18] verwaltet. Dieses Tool dient zur Verwaltung des Schulbetriebs (Stundenplne, 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 ausgehngt. 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 fr Suche und Lehrerdetails siehe 3.1.3 Lehrersuche.

18

http://www.grupet.at/

39 von 151

Infopanel

Dokumentation - Infopanel

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 mchten, mglich sein, Informationen zum Lehrer und dessen Sprechstunde anzeigen zu lassen. Eine direkte Verlinkung zum Gebudeplan erleichtert das Auffinden des Sprechstundenzimmers. Als Einstiegsseite erscheint ein Suchformular. Die Auflistung erfolgt durch eine Suche oder alphabetisch (in Buchstabengruppen unterteilt). Screenshot fr 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, Unterrichtsfcher, Sprechstunden, usw. anzeigen zu knnen 40 von 151

Infopanel

Dokumentation - Infopanel sondern auch wo sich der Lehrer gerade befindet. Auch hier gibt es eine Direktverlinkung zum Gebudeplan. 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

41 von 151

Infopanel

Dokumentation - Infopanel

Abbildung 13 - Funktion - Lehrersuche

Abbildung 14 - Funktion - Lehrersuche - Lehrerdetails

3.1.4 Verkehrsmittel Ein Groteil aller HTL-Schler ist mit dem Zug unterwegs. Dabei kommt es immer wieder zu Versptungen. Hier soll das Modul Verkehrmittel helfen, die aktuellen Fahrplne zur Anzeige zu bringen. Dieses bernimmt die Zugfahrplne und Busfahrplne der BB und bindet diese als Abfahrtstafel in das Infopanel ein.

42 von 151

Infopanel

Dokumentation - Infopanel

Abbildung 15 - Funktion - Verkehrsmittel

3.1.5 Internetzugang Das Infopanel ermglicht ein surfen im Internet. Dabei gelten dieselben Richtlinien wie im schuleigenen Novell-Netzwerk. Ein Login wird nicht notwendig sein, aber es wird das Datenvolumen beschrnkt 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 mssen daher bei Bedarf manuell gendert werden. 43 von 151

Infopanel

Dokumentation - Infopanel

Abbildung 17 - Funktion - HTL Wels - Direktion

Abbildung 18 - Funktion - HTL Wels - Sponsoren

44 von 151

Infopanel

Dokumentation - Infopanel

Abbildung 19 - Funktion - HTL Wels - Fotogalerie

3.1.7 Gebudeplan Der Gebudeplan bildet das komplette Schulgebude 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 - Gebudeplan

3.1.8 Buffet Das Buffet ist ein wesentlicher Bestandteil der Schule und trgt fr das leibliche Wohl der Schler bei. Unter diesem Punkt soll eine Preisliste des Buffets sowie des Burgstberls auffindbar sein. Ebenfalls ist es gedacht das Men der HBLA zu integrieren.

45 von 151

Infopanel

Dokumentation - Infopanel

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.

46 von 151

Infopanel

Dokumentation - Infopanel

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 mssen alle Elemente gro genug sein, um leicht per Fingerdruck bedienbar zu sein. Weiters wurde beim Design darauf geachtet, dass dieses schnell und einfach um Menpunkte erweitert werden kann, bzw. bestehende Punkte verndert werden knnen. 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 Entwrf zum Endergebnis Im folgendem wird der ursprngliche Entwurf (in Photoshop realisiert) und dessen Umsetzung in HTML und Typo3 behandelt.

47 von 151

Infopanel

Dokumentation - Infopanel

Tabelle 2 - Gegenberstellung Endentwurf - Umsetzung

Endentwurf

Umsetzung

Hier noch einige vorhergehende Entwrfe und Varianten des Designs:


Tabelle 3 - Designentwrfe

48 von 151

Infopanel

Dokumentation - Infopanel

3.2.1.2 Aufteilung der Menpunkte Die Einteilung der Menstruktur erfolgte nach einer Analyse des Istzustandes und der Anforderungen seitens der knftigen Benutzer. Danach wurden dann die Hauptmenpunkte gerichtet. Die Untermenpunkte bieten dann eine zustzliche Aufgliederung. Wird ein Hauptmenpunkt aufgerufen, wird immer der erste Untermenpunkt 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 49 von 151

Infopanel 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) Gebudeplan 8) Buffet Tagesmen Preisliste Menplan HBLA Menplan Burgstberl 9) News 10) Terminkalender 3.2.1.3

Dokumentation - Infopanel

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

Grenbeschrnkungen Fr Seiten mit Inhalt gelten einige Beschrnkungen im Bezug auf die Gre um korrekt und vollstndig im Design angezeigt werden knnen.

50 von 151

Infopanel

Dokumentation - Infopanel Die iFrames fr den Inhalt haben folgende Gren: iFrame auf einer Unterseite ohne Men Breite: 990px Hhe: 640px iFrame auf einer Unterseite mit Men Breite: 740px Hhe: 640px

Damit ergeben sich fr die Tabellen der Contentseiten (unter Bercksichtigung von eventuell bentigten und angezeigten Scrollleisten), in denen sich der Inhalt befindet, folgende Gren: Tabelle auf einer Contentseite die in einer Unterseite ohne Men angezeigt wird Breite: 965px Hhe: 630px Rahmenbreite:0 Ausrichtung: center Tabelle auf einer Contentseite die in einer Unterseite mit Men angezeigt wird Breite: 715px Hhe: 630px Rahmenbreite:0 Ausrichtung: center

3.2.2 Entscheidungskriterien fr den Einsatz des CMS Typo3 Die Entscheidung fr Typo3 mag auf den ersten Blick als Ressourcenverschwendung angesehen werden, da die aktuelle Schulhomepage (von der die Daten fr das Infopanel bezogen werden) bereits im CMS Joomla! realisiert ist. Typo3 ist eher auf mittlere bis groe Webprojekte ausgelegt und ein entsprechender Funktionsumfang steht zur Verfgung, in den man sich zuerst einarbeiten muss. Joomla! wurde mit der Zielrichtung auf kleinere Webprojekte entwickelt und ist u.a. nicht dafr 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 fr die dynamische Realisierung des Designs notwendig sind. Sollte spter einmal Bedarf bestehen, kann die aktuelle Typo3-Installation um weiter Webseiten ergnzt werden und es mssen fr weitere Projekte keine eigenen CMS mehr am Server installiert werden. Auerdem ist durch die Verwendung von Typo3 durch mehrere groe Firmen und Organisationen die Zukunft des Projektes Typo3 gesichtert.

51 von 151

Infopanel

Dokumentation - Infopanel

3.2.3 Konfiguration von Typo3 Fr das Projekt Infopanel musste unsere Typo3-Installation nur marginal angepasst werden. Die durchgefhrten nderungen sind nachfolgend aufgelistet: ndern des Passwortes des Backend Users Admin Setzen des Passwortes fr 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 Hauptmenpunkten Die Menpunkte der Hauptseite sind in 2 Kategorien menu-left und menuright unterteilt, die man unter Infopanel-Index im Typo3-Tree findet Jede dieser Kategorien muss genau 5 Punkte (durch die Menstruktur vorgegeben) beinhalten. Sollte sich einer dieser Punkte ndern, so benennt man den entsprechenden Menpunkt um und ndert den Shortcut auf die neue ContentPage.

Abbildung 24 - Typo3-Menstruktur - Hauptmen

Fr 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 gewhlt ist, knnen Sie im Abschnitt Shortcut to page eine Seite auswhlen, auf die verwiesen werden soll. Dazu lschen Sie zunchst die sich aktuell in der Auswahl befindliche Seite durch markieren und einen Klick auf das X-Symbol. Fr die erneute Auswahl klicken Sie auf das Ordner-Symbol. Es erscheint ein Pop-UpFenster in dem Sie durch den Tree zur entsprechenden Seite navigieren und durch Klick auf das Pfeil-Symbol einen Record auswhlen, der nun im linken Bereich des Pop-Ups angezeigt wird. Whlen 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.

52 von 151

Infopanel

Dokumentation - Infopanel

Abbildung 25 - Typo3 - Shortcut

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

Abbildung 26 - Typo3-Menstruktur

53 von 151

Infopanel

Dokumentation - Infopanel

Seiten ohne Men knnen im Abschnitt Infopanel-Content -> without menu des Trees einfach angelegt werden. Um diese mit einem Hauptmenpunkt zu verlinken, kann dem vorhergehenden Abschnitt ndern von Hauptmenpunkten 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 Hauptmenpunkt verlinkt. Alle Seiten, die sich dann innerhalb dieser Seite befinden, sind erst die Unterseiten die am Infopanel angezeigt werden. Damit dieses Konstrukt funktioniert, drfen 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 Hauptmenpunkt, der darauf verlinkt, mglichst 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 fr 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.

54 von 151

Infopanel fileadmin/ ../content/

Dokumentation - Infopanel Ein Verzeichnis der Typo3-Installation. JSP-Files und Templates fr die Darstellung des Inhaltes. Jede Sektion des Infopanels erhlt hier einen eigenen Ordner. CSS, JSP, Grafik-Dateien die von allen ContentSeiten bentigt werden. Enthlt die fr die Erzeugung der Grafiken bentigten Fonts. Enthlt die fr die Erstellung der Seiten durch Typo3 bentigten Templates. Favicon fr die Webseite HTML-Templates, CSS, JavaScript und Grafiken fr die Content-Seien, die mit Hilfe von Typo3 generiert wird. HTML-Templates, CSS, JavaScript und Grafiken fr die Startseite, die mit Hilfe von Typo3 generiert wird.

../../content/

fonts/

templates/

../favicon/ ../infopanel-content/

../infopanel-index/

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 Menfhrung mit Typo3 erstellt und der Inhalt wird mit Hilfe von JSP-Dateien generiert, die in das Typo3-Grundgerst eingebunden sind. Typo3 wird hier bentigt um die Grafiken der einzelnen Menpunkte und die Grafiken der berschriften, die sich ja je nach aufgerufenem Menpunkt ndern, dynamisch zu erzeugen. Weiters ist das Einbinden der JSPDateien mit wenigen Mouse-Klicks erledigt. Typo3 bentigt fr 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. 55 von 151

Infopanel

Dokumentation - Infopanel

3.3.1 Hauptseite Die Hauptseite wird vollstndig in Typo3 generiert. Dabei wird in Typo3 die vollstndige Menstruktur abgebildet und auch die Grafiken fr die Buttons werden ber Typo3 automatisch generiert. Dies gewhrleistet eine hohe Dynamik und schnelle nderung der Hauptmenpunkte.

Abbildung 28 - Screenshot Hauptseite

Das dazugehrige 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>

56 von 151

Infopanel

Dokumentation - Infopanel
<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"> &copy; 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> &nbsp; <a href="./index.php?id=89"> <img src="fileadmin/templates/infopanel-index/ images/logos/cisco.gif" width="40" height="33" border="0"> </a> &nbsp; <a href="./index.php?id=91"> <img src="fileadmin/templates/infopanel-index/images/ logos/elc_oe.gif" width="40" height="33" border="0"> </a> &nbsp; <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: color: #000000 } A:visited { text-decoration: color: #000000 } A:hover { text-decoration: color: #000000 } A:active { text-decoration: color: #000000 }

none;

none;

underline overline ;

none;

57 von 151

Infopanel 3.3.1.3 TypoScript

Dokumentation - Infopanel

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 fr 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 // Fgt 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 einzufgen 10.marks { // In marks wird der TypoScript-Code fr die einzelnen Marken definiert. Hier sind es die Marker MENU_LEFT und MENU_RIGHT. /* Das Men fr die linke Seite der Webseite */ MENU_LEFT = HMENU // Men erzeugen MENU_LEFT.special = directory // Typ des zu erstellenden Mens festlegen MENU_LEFT.special.value = 14 // Einstiegspunkt fr die Erzeugung des Mens 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 Mens im Normal-Zustand MENU_LEFT.1.NO { wrap = |<br><br> // nach jedem Menpunkt zwei Zeilen Abstand XY = 330,70 // Gre 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 fr das Men verwendet. Dabei wird hier der Reihe nach eine Datei nach der anderen verwendet. So lassen sich die 5 Menpunkte mit unterschiedlichen Grafiken darstellen. 10 = TEXT // Text erzeugen 10.text.field = title // Der Titel der Webseite wird die Beschriftung des Buttons

58 von 151

Infopanel

Dokumentation - Infopanel
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 Schriftgre fest 10.niceText = 0 // Die Funktion niceText (Gltten 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 gewhlt. 10.shadow.blur = 1 // Blur-Funktion fr den Schatten aktivieren 10.shadow.opacity = 80 // Transparenz des Schattens 80% } // Erstellen des Mens 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/infopanelindex/images/buttons/button_left2_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_left3_over.gif || fileadmin/templates/infopanelindex/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 fr die linke Seite der Webseite. Nhere 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/infopanelindex/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 }

59 von 151

Infopanel

Dokumentation - Infopanel

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/infopanelindex/images/buttons/button_right2_over.gif || fileadmin/ templates/infopanel-index/images/buttons/ button_right3_over.gif || fileadmin/templates/infopanelindex/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 fr das Men dynamisch generiert. Dazu ist natrlich 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 unabhngig 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

60 von 151

Infopanel

Dokumentation - Infopanel
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];

61 von 151

Infopanel
} } }

Dokumentation - Infopanel

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/infopanelcontent/images/buttons/login_over.gif')"> // bodyTag der HTML-Datei mit den JavaScript-Code fr 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 // Hinzufgen des Titels der aktuell angezeigten Webseite 10.text.field = title

62 von 151

Infopanel
10.fontSize = 14 10.fontFile = fileadmin/fonts/arialbi.ttf 10.fontColor = #222222 10.spacing = 5 10.offset = 60,78

Dokumentation - Infopanel

40 = TEXT // Hinzufgen des Titel des Menpunktes 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 // Fgt den Inhalt von Typo3 in das Template ein CONTENT{ table=tt_content // tt_content ist der Content der auf den Webseiten ber Typo3

63 von 151

Infopanel

Dokumentation - Infopanel
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 standardmig 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 bentigen daher auch kein Men. Diese beinhalten nur einen iFrame fr 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/

64 von 151

Infopanel

Dokumentation - Infopanel
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];

65 von 151

Infopanel

Dokumentation - Infopanel
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/infopanelcontent/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 }

66 von 151

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

Dokumentation - Infopanel

3.3.4 Content-Seite Die Content-Seiten sind JSP-Dateien die im Groen und Ganzen das unten angefhrte HTML-Template als Basis benutzen. Die JSP-Dateien wurden allerdings per Hand geschrieben und nicht mittels Typo3 erstellt. Daher enthlt jede JSP-Datei auch den vollstndigen 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"> &nbsp; </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"> &copy; 2006 Christian Bartl, Thomas Fischl, Sebastian Hochgatterer </span> </td> </tr> </table> </td> </tr> </table>

67 von 151

Infopanel
</body> </html>

Dokumentation - Infopanel

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"> &nbsp; </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"> &copy; 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;

68 von 151

Infopanel
background-position: right top; background-attachment: fixed; cursor: hand; scrollbar-face-color: #58514d; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #CAC9B5; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #EFEFEF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D85D03; } A:link { text-decoration: color: #000000 } A:visited { text-decoration: color: #000000 } A:hover { text-decoration: color: #000000 } A:active { text-decoration: color: #000000 }

Dokumentation - Infopanel

/*Hintergrundfarbe*/ /*Farbe hinter Schieber*/ /*Schattenfarbe*/ /*Pfeilfarbe*/

none;

none;

underline overline ;

none;

.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; }

69 von 151

Typo3

Dokumentation - Infopanel

4 Typo3
Typo3 ist eines der meist verwendeten OpenSource-Content Mangement Systeme. Namhafte Firmen bauen ihre Homepages komplett auf diesem System auf. Wie schon erwhnt, handelt es sich bei Typo3 um ein so genanntes CMS (CMS = Content Management System). Ein CMS-System basiert auf dem grundlegenden Merkmal fr den Aufbau einer Homepage, den Inhalt von dessen Layout und Formatierungen zu trennen. So sind Designwechsel und Umstrukturierungen einer Homepage binnen krzester Zeit ohne greren Aufwand und ohne Bearbeitung des Inhalts mglich. Weiters kann Inhalt ber ein sogenanntes Backend mittels grafischer Oberflche (GUI) ohne Probleme hinzugefgt 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 vollstndig in PHP implementiert und lsst sich so ohne groen 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 fr die Generierungsvorschrift werden zu diesem Zweck von einer Datenbank geladen. Die Texte und Bilder werden von den einzelnen Reportern zur Verfgung gestellt und jeweils in der Datenbank abgespeichert. Das Aussehen der Homepage (Menstruktur, Navigation, etc) wird ber so genannte Templates festgelegt. Templates sind HTML-Seiten, welche Platzhalter fr das TypoScript enthalten. Das Aussehen und die Formatierung (Look And Feel) werden per CSS gesteuert. Typo3 verwendet fr den Aufbau und die dynamische Generierung das eigene Typo-Script. ber dieses wird zum Beispiel der Aufbau des Mens oder der anzuzeigende Fenstertitel gesteuert. Dabei holt sich das Script die jeweiligen Informationen aus der Datenbank, die den Seitenbaum enthlt. Die Homepage selbst wird in einer Baumstruktur aufgebaut. Dabei wird der Baum fr das Men verwendet. Die einzelnen Seiten-Objekt enthalten dann den Inhalt der Homepage. Typo3 ist sicher eines der mchtigsten und umfangreichsten CMS im OpenSource-Sektor. Dementsprechend lange dauert es auch, sich in das System einzuarbeiten. Fr kleinere Projekte sind kleinere CMS wie Joomla besser geeignet. Soll es aber eine umfangreiche Firmenhomepage sein oder viele verschiedene Templates bentigt 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 ermglicht und organisiert. Das Ziel eines CMS ist es, dem Benutzer eine Oberflche zu bieten, mit der dieser z.B. eine Webseite ohne Programmierkenntnisse verwalten kann. Dabei wird vor allem auf Medienneutralitt (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 redaktionshnliche Arbeiten wert gelegt. Bei einem Redaktionssystem 70 von 151

Typo3

Dokumentation - Infopanel verfasst ein Redakteur einen Artikel im CMS und dieser muss zunchst von einem zweiten Redakteur korrekturgelsen und von einem Administrator freigegeben werden, bevor dieser danach automatisch auf der Homepage angezeigt wird. Grundstzlich unterscheidet man zwischen Server und Client CMS: Server CMS Das CMS wird auf einem Server installiert und bentigt 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 knnen die meisten Systeme benutzerspezifische Rechte verwalten. Client CMS Ein Client CMS bentigt 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 verzgern. Statische Systeme Statische Systeme berechnen die Webseite vollstndig vor und legen diese im Dateisystem ab, dadurch ist aber auch eine schnelle Auslieferung der Daten mglich und es werden auch nur zur Verffentlichung freigegebene Dateien im Cache gelagert. Die Aktualisierung des Inhalts erfolgt meist etwas zeitverzgert. 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 (Seitengerst, Navigation, usw.) als statische Seiten im Cache ab. Nur der Inhalt wird dynamisch aus der Datenbank generiert. Welche Seiten zur Laufzeit dynamisch generiert werden mssen, 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 fr die Verffentlichung und Generierung von Webseiten zustndig ist. Umfassendere CMS Systeme knnen ihre Daten nicht nur nach HTML sondern auch in andere Formate wie XML oder PDF ausgeben bzw. fr eine Druckvorstufe aufbereiten.

71 von 151

Typo3

Dokumentation - Infopanel Anforderungen[19] Untersttzung 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 fr verschiedene Typen von Einzelseiten oder Web-Sites (Site-Templates). Content Life-Cycle-Management, um z.B. Inhalte zeitlich begrenzt zu verffentlichen 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 ausfhren, komplett kopiert werden mssen. 4.1.3 Markt-bersicht (Web CMS Systeme) Das Angebot am Markt fr CMS-Systeme ist beinahe unberschaubar. 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 Brdern in nichts mehr nachstehen. Die nachfolgende Matrix vergleicht den Funktionsumfang der beiden sehr populren OpenSourceSysteme Joomla! und Typo3 sowie den kommerziellen Produktion Macromedia Contribute und Microsoft CMS. Anzumerken ist, dass Macromedia mittlerweile von Adobe bernommen wurde. Jommla ist eher fr kleinere schnell zu realisierende Webauftritte geeignet, whrend sich Typo3 an groe 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
Last Updated System Requirements Application Server Approximate Cost Database License Operating System Programming Language Root Access Shell Access Web Server Joomla! 1.0.7 4/25/2006 Joomla! Apache recommended, any server that supports PHP and MySQL $0 MySQL GNU GPL Any PHP No No Apache Proprietary Windows, OS X .NET, ASP, CFM, PHP, JSP, Perl, Python, TCL, etc. No No Any Macromedia Contribute 3 3/24/2005 Macromedia Contribute Microsoft CMS 2002 6/15/2005 Microsoft CMS TYPO3 4.0.4 1/15/2007 TYPO3 PHP 4.3.0+ Free MSSQL Commercial Windows .NET Yes Yes IIS MySQL, PostGreSQL, Oracle, MSSQL GNU GPL Any PHP No No Apache, IIS

IIS, Websphere, BEA IIS + ASP.NET Weblogic, Apache, Tomcat 2500 for 10 seats

19 20

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

72 von 151

Typo3
Security Audit Trail Captcha Content Approval Email Verification Granular Privileges Kerberos Authentication LDAP Authentication Login History NIS Authentication NTLM Authentication Pluggable Authentication Problem Notification Sandbox Session Management SMB Authentication SSL Compatible SSL Logins SSL Pages Versioning Support Certification Program Code Skeletons Commercial Manuals Commercial Support Commercial Training Developer Community Online Help Pluggable API Professional Hosting Professional Services Public Forum Public Mailing List Test Framework Third-Party Developers Users Conference Ease of Use Drag-N-Drop Content Email To Discussion Friendly URLs Image Resizing Macro Language Mass Upload Prototyping Server Page Language Spell Checker Style Wizard Subscriptions Template Language UI Levels Undo WYSIWYG Editor Zip Archives Performance Advanced Caching Database Replication Load Balancing Page Caching Static Content Export Management Advertising Management Asset Management Yes Yes Yes No No Yes No Joomla! No Free Add On Yes Yes Yes No Yes Yes No No No Yes No No Yes No Joomla! Macromedia Contribute No No No No No Macromedia Contribute No Yes No Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes Joomla! Yes Yes Macromedia Contribute Yes No Yes Yes No No No Yes Yes No No Yes No Yes No Yes Yes Limited Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes No No Free Add On Yes No No No No No Yes No No No No Yes Joomla! Joomla! Macromedia Contribute Yes No Yes No Yes No Yes Yes No No No Yes Yes No No Yes Yes No Yes Macromedia Contribute No No

Dokumentation - Infopanel
Microsoft CMS Free Add On No Yes No Yes Yes Yes Free Add On No Yes Yes No Limited No No Yes Yes Yes Yes Microsoft CMS No Free Add On Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Free Add On Yes Yes Microsoft CMS TYPO3 Free Add On Free Add On Yes Yes Yes Free Add On Free Add On Yes Yes Yes Free Add On Yes Yes Yes Yes Free Add On Microsoft CMS Yes No No Yes Free Add On Microsoft CMS TYPO3 Free Add On Yes TYPO3 Yes Free Add On Yes Yes Yes No Free Add On Yes No Free Add On Free Add On Yes Yes Yes Free Add On Yes Yes Free Add On Yes TYPO3 TYPO3

Free Add On Limited No Yes Yes

Free Add On No Free Add On Yes

73 von 151

Typo3
Clipboard Content Scheduling Content Staging Inline Administration Online Administration Package Deployment Sub-sites / Roots Themes / Skins Trash Web Statistics No Yes No Yes Yes No Yes Yes Yes Yes Yes No Yes Yes No No Yes Yes No No No No No Joomla! Macromedia Contribute Yes Yes Yes No Yes Yes Joomla! No Yes Yes Yes Yes Free Add On Free Add On Free Add On Yes Free Add On Joomla! Yes Free Add On Free Add On Yes Free Add On Free Add On Free Add On Free Add On Free Add On No Free Add On Yes Free Add On Free Add On Free Add On Free Add On Free Add On No No Free Add On Yes Yes No No Free Add On Free Add On Yes Yes Yes No Free Add On No No No No No No No No No No No No No No No No No No No No No Yes No No No No No No No Yes No Macromedia Contribute No Yes Yes Yes No Yes No Yes No No Macromedia Contribute No No No No No No No No No No No No No No No No Yes No Yes Yes No Yes No Yes Yes Yes

Dokumentation - Infopanel
Yes Yes Free Add On Yes Yes Yes Yes Yes Free Add On Free Add On Yes Yes Limited TYPO3 Yes Yes Yes Free Add On No Yes TYPO3 Yes Yes Free Add On Yes Yes Yes Yes Yes Yes Free Add On Microsoft CMS TYPO3 Free Add On Free Add On Free Add On Free Add On Limited Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On No No Free Add On Free Add On Yes Free Add On Free Add On Yes Free Add On Free Add On Free Add On

Limited Yes Yes No Free Add On No Free Add On No Limited Microsoft CMS Free Add On No Yes Free Add On No Free Add On Microsoft CMS

Web-based Style/Template Yes Management Web-based Translation Management Workflow Engine Interoperability Content Syndication (RSS) Yes FTP Support UTF-8 Support WAI Compliant WebDAV Support XHTML Compliant Flexibility CGI-mode Support Content Reuse Extensible User Profiles Interface Localization Metadata Multi-lingual Content Multi-lingual Content Integration Multi-Site Deployment URL Rewriting Wiki Aware Built-in Applications Blog Chat Classifieds Contact Management Data Entry Database Reports Discussion / Forum Document Management Events Calendar Events Management Expense Reports FAQ Management File Distribution Graphs and Charts Groupware Guest Book Help Desk / Bug Reporting HTTP Proxy In/Out Board Job Postings Link Management Mail Form Matrix My Page / Dashboard Newsletter Photo Gallery Polls Product Management Free Add On Limited No No No Free Add On No

Free Add On No Yes Yes No

Free Add On

74 von 151

Typo3
Project Tracking Search Engine Site Map Stock Quotes Surveys Syndicated Content (RSS) Tests / Quizzes Time Tracking User Contributions Weather Web Services Front End Commerce Affiliate Tracking Inventory Management Pluggable Payments Pluggable Shipping Pluggable Tax Point of Sale Shopping Cart Subscriptions Wish Lists Free Add On Yes Free Add On No Free Add On Yes Free Add On No Yes No Free Add On Joomla! Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Free Add On Yes Macromedia Contribute No No No No No No No No No No No No No No No No No No No No No No No Yes No No No Yes No No

Dokumentation - Infopanel
Free Add On Free Add On Yes Free Add On Free Add On Free Add On Free Add On Free Add On Yes Free Add On Free Add On Microsoft CMS TYPO3 Free Add On Free Add On Free Add On Free Add On No No Free Add On No Free Add On

Free Add On

Free Add On No No No

4.1.4 Statischer versus dynamischer Webauftritt Die Wahl fr ein bestimmtes CMS-System ist von mehreren Faktoren abhngig: Gre des Web-Projekt Wie oft ndert sich der Inhalt? Wie viele Leute sollen den Inhalt verwalten knnen? Sollen Leute ohne HTML-Kenntnisse Inhalte verwalten/verfassen knnen? Sollen Grafiken dynamisch erzeugt werden? Erfllt 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 groer Firmenauftritt mit einer stndig verndernden Produktpalette und regelmig 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 erhltlich umfangreiche Mglichkeiten im Gegensatz zu anderen CMS dynamische Erstellung von Grafiken Benutzerverwaltung umfangreiches Redaktionssystem umfangreiche Community viele Dienstleister die sich auf Typo3 spezialisiert haben 75 von 151

Typo3

Dokumentation - Infopanel 4.2.2 Nachteile Einarbeitung in das Backend TypoScript muss erlernt werden bei dynamischer Generierung hohe Systemlast bentigt PHP und MySQL fr 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 bentigt man eine Webumgebung mit Webserver, PHPInterpreter und Datenbank. Da Typo3 aus dem OpenSource-Sektor stammt ,wird hier bevorzugt Apache, PHP4/PHP5 und MySQL verwendet. Um Grafiken zu erzeugen wird zustzlich ImageMagick oder GraphicsMagick sowie die GDlib bentigt. Je umfangreicher der Webauftritt und je mehr Inhalte vor allem Grafiken dynamisch erzeugt werden mssen, desto hher 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

76 von 151

Typo3

Dokumentation - Infopanel Mit Hilfe des Install Tools ist die Grundkonfiguration von Typo3 ohne grere Problem durchfhrbar. 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 hinzugefgt werden kann (Text, Bilder, Kalendereintrge, usw.). Records ist der berbegriff fr alle Elemente die in der Baumstruktur von Typo3 erstellt werden knnen. Dazu zhlen Seiten, Ordner, Benutzergruppen, Templates usw. Records werden als neue Tabellen in der Datenbank angelegt. 4.2.4.3 Templates und TypoScript Der grte Vorteil von Typo3 und CMS allgemein ist die schon erwhnte Trennung zwischen Inhalt und Design. Fr 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 eingefgt,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 Mens, 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 Lschoperator besteht. Beispiel fr TypoScript:
page_main = PAGE page_main.typeNum = 12 page_main { bodyTag = <body> stylesheet = fileadmin/templates/bartlweb/css/page_main_content.css

77 von 151

Typo3

Dokumentation - Infopanel
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 gendert werden mssen. Auerdem kann man ber diese IDs 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 fr all jene vorteilthaft, die sich nicht mit der Materie von HTML und CSS befassen wollen und anstatt dessen das fr 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, hinzufgen oder entfernen. Es lassen sich viele praktische Elemente wie Gstebuch, Forum aber auch Hintergrundaufgaben wie Userverwaltung per Extension (also Erweiterung) von den Typo3Servern herunterladen und integrieren. Auf diesen sind bereits eine Anzahl solcher Extensions verfgbar, wobei aber auf die Kompatibilitt 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 standardmig der Live-Workspace eingestellt, der die Daten enthlt die im Frontend angezeigt werden. Mchte 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 Verfgung, wo diverse Funktionalitten ausprobiert werden knnen. Erst wenn alle nderungen den Vorstellungen entsprechen, kann man die nderungen auf den LiveWorkspace und somit auf die Onlineprsenz anwenden. Sollte einmal etwas 78 von 151

Typo3

Dokumentation - Infopanel schief gegangen sein, verwirft man die nderungen wieder und gefhrdet die Onlineprsenz nicht. 4.2.4.8 Userverwaltung Typo3 besitzt eine komplexe Userverwaltung, die den Zugriff auf das Backend und einzelnen Funktionen regelt. Zustzlich knnen hier die User fr Logins auf der Webseite verwaltet werden. 4.2.4.9 Workflow Um einen redaktionshnlichen Betrieb zu realisieren, stellt Typo3 ein Aufgabenmanagement und ein Versionsmanagement zu Verfgung. Es knnen 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 drfen.

4.3

Installation Die Installation von Typo3 ist in wenigen Schritten erledigt (Voraussetzungen siehe Punkt 4.2.3 Systemvoraussetzungen). Alle bentigten 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 auen erreichbares Verzeichnis ihres Webservers. Unter Linux knnen Sie ber Symlinks die Source des Typo3Projekts fr 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 ReadMes. Um Typo3 jedoch installieren zu knnen, mssen zu den Sourceordnern noch die seitenspezifischen, fr eine Typo3 Instanz bentigten, 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 fr 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 zunchst folgende Hinweismeldung. Diese knnen Sie mit OK besttigen.

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 luft ein. Wenn noch keine leere Datenbank existiert, muss der Benutzer Rechte fr das Erstellen einer Datenbank besitzen. 79 von 151

Typo3

Dokumentation - Infopanel

Abbildung 34 - Typo3-Installation - Step 1

In Schritt 2 knnen 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.

80 von 151

Typo3

Dokumentation - Infopanel

Abbildung 36 - Typo3-Installation - Step 3

Damit ist Typo3 erfolgreich auf ihrem System installiert. Der nchste Schritt ist die Grundkonfiguration sowie das ndern der Standardpasswrter.

Abbildung 37 - Typo3-Installation - Go

Fr weitere Informationen wird auf http://typo3.org/documentation/documentlibrary/installation/doc_inst_upgr/1.0.0/view/ verwiesen. 4.4 Konfiguration Der nchste Schritt nach der Installation von Typo3 ist die Grundkonfiguration. Dazu testen wir zunchst, ob die Datenbank richtig eingerichtet wurde. Rufen Sie 81 von 151

Typo3

Dokumentation - Infopanel dazu die Url des Verzeichnisses in dem Sie Typo3 installiert haben auf. Hier bekommen Sie die Fehlermeldung No pages are found on the rootlevel zurck, der aber nicht mehr aussagt als das noch keine Seiten in Typo3 angelegt worden sind. Allerdings lsst sich dadurch erkennen, dass die Datenbank ordnungsmge eingerichtet worden ist.

Abbildung 38 - Typo3-Konfiguration - Error

Der nchste 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 berprft standardmig sogenannte HTTP-Referer. Diese werden aber von vielen Firewalls und Proxyservern geblockt und somit ist kein Login mglich. 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 knnen. 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, knnen Sie ganz oben das Passwort ndern. Geben Sie ihr neues Passwort ein und klicken Sie auf Set new password.

82 von 151

Typo3

Dokumentation - Infopanel

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 mssen Sie Click to continue auswhlen um zum Install Tool zurck zu kehren.

Abbildung 42 - Typo3-Konfiguration - Configuration written

83 von 151

Typo3

Dokumentation - Infopanel

Da wir gerade das Passwort gendert haben, mssen wir uns neu einloggen. Dieser Login-Dialog wird auch in Zukunft bei jedem Aufruf des Install Tools erscheinen.

Abbildung 43 - Typo3-Konfiguration - Login

Die nchste Einstellung, die wir vornehmen, betrifft das Login in den BackendBereich, die Firewall bzw. die Bercksichtigung eines Proxyserver. Gehen Sie dazu im Install Tool in die Sektion 5: All Configuration die Sie am oberen Ende der Seite auswhlen knnen. Suchen Sie nach doNotCheckReferer und setzen sie das Hkchen, 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 Webprsenz (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.

84 von 151

Typo3

Dokumentation - Infopanel

Abbildung 45 - Typo3-Konfiguration - Site name

Weiters ist noch die Grafiksoftware zu konfigurieren. Dazu bentigt man das Softwarepacket ImageMagick[22] oder GraphicsMagick[23]. Installieren Sie diese Software auf Ihrem System, um die folgenden Schritte ausfhren zu knnen. Gehen Sie nun in die Sektion 1: Basic Configuration und suchen Sie nach dem Abschnitt Check Image Magick. Aktivieren Sie das Hcken Check LZW capabilities und tragen Sie den Pfad ihrer ImageMagick- oder GraphicsMagickInstallation ein. Klicken Sie abschlieend 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 berprfen Sie ob die Integration geglckt ist, siehe Grafik. Um die Konfiguration zu speichern gehen Sie an das Ende der Seite und klicken Sie auf Update localconf.php.

22 23

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

85 von 151

Typo3

Dokumentation - Infopanel

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 begrt uns das Backend nun mit 2 Warnungen. Erstens muss das Standardpasswort gendert werden und zweitens muss der Refernz-Index der Datenbank upgedatet werden. Dies lsst sich beides schnell und einfach ber das Backend lsen.

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 whlen 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. Whlen Sie dazu in der Sektion Tools den Punkt User 86 von 151

Typo3

Dokumentation - Infopanel 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 knnen Sie den Benutzer admin konfigurieren. Der wichtige Teil ist die Sektion Password. Tippen Sie hier ihr neues Passwort ein. Achtung, beachten Sie, dass Passwrter 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 mssen Sie sich nach dem ndern des Passwortes nicht neu einloggen. Um zu berprfen, ob die Warnungen auf der Startseite verschwunden sind und das Passwort tatschlic gendert 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.

87 von 151

Typo3

Dokumentation - Infopanel

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

88 von 151

Typo3

Dokumentation - Infopanel

Die obenstehende Grafik zeigt das Backend von Typo3 unter dem Menpunkt 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 fr die Menpunkte 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 grten 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 Menstruktur. 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-IDs 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 Menstruktur Die Menstruktur des Typo3-Backends ist in verschiedene Abschnitte unterteilt, die je nach Berechtigungen des Benutzers auch ausgeblendet werden knnen. Die folgende Tabelle listet die einzelnen Menpunkte (Module genannt) inklusive einer kurzen Beschreibung der Funktionen auf.

89 von 151

Typo3
Tabelle 5 - Backendmodule

Dokumentation - Infopanel

Web Das Webmodul beinhaltet alle Funktionen die zum erstellen und warten der Webprsenz notwendig sind. Dabei wird in allen Menpunkten zustzlich ein Baum der Seitenstruktur zur Navigation angezeigt. Page Hier knnen 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 ausgewhlten Seiten befinden an. Info Unter diesem Menpunkt lassen sich allgemeine Informationen zu jedem Record anzeigen. (z.B.: Cache, Alter, Berechtigungen, Ersteller) Access Zeigt die Zugriffsberechtigungen der einzelnen Benutzer fr jeden Record und jede Seite an. Functions Hier knnen mehrere Seiten gleichzeitig erstellt oder sortiert werden. Versioning Zeigt eine bersicht der einzelnen Versionen in den einzelnen Workspaces fr jede Seite an. Template Dient zum Erzeugen und Verwalten von Templates fr einzelne Seiten.

File Hier befinden sich alle Menpunkte die sich mit der Dateiverwaltung beschftigen. Filelist Verwaltet Dateien und Ordner im fileadmin-Verzeichnis der Typo3Installation. Kann auerdem 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. 90 von 151

Typo3

Dokumentation - Infopanel Doc Zeigt den zuletzt geffneten 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 knnen Sprache, Aussehen und Verhalten des Backends fr den aktuellen Benutzer verndert 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 fr den Administrator wichtigen Menpunkte. 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 mglich. 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 knnen die Benutzeraktivitten berwacht werden. Es wird nicht nur angezeigt, wann sich wer eingeloggt hat, sondern auch wer was und wann angelegt, gelscht oder editiert hat.

91 von 151

Typo3 Help Kleine Hilfe zu Typo3.

Dokumentation - Infopanel

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 Mens. Da diese ber das --Symbol neben dem Titel (hier: Help) minimiert werden knnnen. Admin functions Hier befinden sich 2 Menpunkte zum Lschen des Caches. Fr nhere Informationen siehe Sektion: 4.5.3 Lschen des Caches. Clear cache in typo3conf/ Clear FE cache

4.5.1.3 Kontextmen Hier werden die einzelnen Menpunkte beschrieben so weit diese nicht selbsterklrend sind. Beachten Sie, dass der Aufbau der Mens je nach Berechtigungen und Modul variieren kann. Es werden aber alle relevanten Optionen erlutert. Kenntnis der oberen Auflistung der Module erleichtert das Verstndnis der einzelnen Funktionen. Der Aufruf des Kontextmens fr einzelne Elemente erfolgt ber einen Rechtsklick auf das jeweilige Symbol. Ein Kontextmen lsst sich auf jeden Fall fr Tree-Elemente und Elemente die in einer Liste dargestellt werden aufrufen.
Tabelle 6 - Kontextmen

Kontextmen Das links dargestellte Kontextmen zeigt jene Menpunkte die bei Aufruf des Mens 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 92 von 151

Typo3

Dokumentation - Infopanel Zeigt Informationen zum Aktuell ausgewhlten 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 Lscht 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 fr die Erstellung von neuen Records auf. Mount as treeroot Dabei wird die angeklickte Seite temporr 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. (Typo3Format fr den Austausch von Records) Import from .t3d Importiert eine t3d-Datei in die aktuelle Baumstruktur.

93 von 151

Typo3

Dokumentation - Infopanel 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 erklrt.
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 schliet den Dialog. Close document Verwirft nderungen und schliet 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 94 von 151

Typo3

Dokumentation - Infopanel Verschiebt eine Seite. Delete Lscht 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 fr den jeweiligen Record auf. Paste in clipboard content Fgt ein Element aus der Zwischenablage ein. Hide ndert die Sichtbarkeit der Seite im Frontend. Clear cache for this page Lscht den Cache von Typo3 fr die jeweilige Seite. Reload Ldt 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 Verknpfung zu der Seite die ber eine DropDown-Liste links unten im Backend wieder aufgerufen werden kann. Back Geht zurck. 4.5.2 Login/Logout Um sich im Backend einloggen zu knnen, rufen Sie dieses ber Typo3Verzeichnis/typo3/ auf. Der Standardbenutzer nach der Installation ist admin mit dem Passwort password.

Abbildung 54 - Backend-Login

95 von 151

Typo3

Dokumentation - Infopanel Nach dem Login prsentiert sich Ihnen die Startseite des Backend, indem Sie nun neue Webseiten erstellen oder vorhandene bearbeiten knnen.

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.

96 von 151

Typo3

Dokumentation - Infopanel 4.5.3 Lschen des Caches Typo3 benutzt ein effizientes Cache-System, damit Web-Seiten nicht immer neu generieren zu mssen. Dieser Cache kann beim Entwickeln oder bei nderungen zu Problemen fhren. Normalerweise werden Seiten bei nderungen neu generiert, doch dies funktioniert bei nderungen am Template oder bei dynamisch generierten Grafiken nicht immer zuverlssig und deshalb ist es gerade dann sinnvoll den Cache manuell zu leeren. Dazu gibt es 2 Funktionen die sich am linken unteren Ende des Mens in der Sektion Admin functions befinden. Clear cache in typo3conf/ Lscht den Cache der Konfiguration. Zu empfehlen bei nderungen am Template oder vor der Installation von Extensions. Clear FE cache Lscht 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 - Lschen des Caches

4.5.4 Pages (Seiten) und Records In diesem Abschnitt werden die Arten von Records und Pages die angelegt werden knnen erklrt. Der Ablauf von grundlegenden Operationen wie Anlegen, Lschen, Verschieben und Kopieren sind bei Records und Pages identisch und wird daher nur anhand von Pages erklrt. Dabei ist die Page eine Form von Records. 4.5.4.1 Arten von Records und Pages

4.5.4.1.1 Records fr die Webseite Die folgende Tabelle zeigt eine Beschreibung aller Elemente die fr die Webseite (Root) oder ausgehend von dieser erstellt werden knnen.
Tabelle 8 - Records fr Webseiten

Page Backend user Backend group Filemount

Erstellt eine neue Page innerhalb des Trees. Erstellt einen neuen Backend-Benutzer. Erstellt eine neue Gruppe fr Backend-Benutzer. Bindet ein Verzeichnis auf dem Server in den Typo3-Tree ein. 97 von 151

Typo3 Workspace Website Language

Dokumentation - Infopanel Erstellt einen neuen Workspace. Fgt der Webseite eine neue Sprache hinzu. Diese kann dann ausgewhlt und fr jede Sprache unabhngig Content zu den Pages hinzugefgt werden. 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. Werden auf Seiten hufig Fremdwrter oder Bezeichnungen verwendet die einer Erklrung bedrfen, so knnen diese als Acronym eingefgt werden. Typo3 erkennt diese im Text automatisch und markiert diese bzw. zeigt bei einem Klick darauf die Erklrung an.

Static Template

Acronym

4.5.4.1.2 Records fr einzelne Pages Die untenstehende Tabelle zeigt alle Elemente, die fr eine Seite oder von einer Seite aus erstellt werden knnen.
Tabelle 9 - Records fr Pages

Page (inside)

Pagecontent Domain Alternative Page Language Template

Internal note Page (after)

Legt eine neue Page innerhalb der neuen Page an (eine Ebene tiefer), dass heit die aktuelle Seite wird zu einem neuen Knoten im Tree. Legt eine Contentelement auf der aktuellen Page an. Legt einen Einstiegspunkt fr eine bestimme URL an. Legt eine zustzliche Sprache fr die aktuelle Page an. Legt ein neues Template fr die Seite an. Die im Knoten darunterliegenden Seiten erben diese Template, soweit nicht manuell unterbunden, automatisch. Legt eine Notiz zur aktuellen Page an. 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 Advanced External URL

Ist eine regulre Webseite. Eine regulre Webseite allerdings gibt es mehr Option als bei Standard. Die Seite dient als Shortcut zu einer externen 98 von 151

Typo3

Dokumentation - Infopanel URL. Die Seite dient als Shortcut zu einer Page innerhalb von Typo3. Ist eine Webseite die allerdings nicht im Men angezeigt wird. Seite wird nur angezeigt, wenn ein Backenduser auf der Webseite eingeloggt ist. Mounted ein Verzeichnis des Dateisystems in den Tree der Webseite. Reprsentiert eine Leerzeile im Men. Muss allerdings eigens im TypoScript bercksichtigt werden. Wird nicht als Webseite angezeigt und dient zur Speicherung von Records wie Templates, User, usw. Seiten und Records die in einen Recycler verschoben werden sind im Frontend nicht verfgbar.

Shortcut Not in menu Backend User Section Mount Point Spacer

SysFolder

Recycler

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 whlen den Punkt New aus. Es erscheint der Dialog fr das Anlegen eines neuen Records.

Abbildung 57 - New

Whlen 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 bentigen, knnen Sie diesen ebenfalls hier auswhlen und anlegen.

99 von 151

Typo3

Dokumentation - Infopanel

Abbildung 58 - New Record

Haben Sie sich zwischen Page (inside) und Page (after) entschieden, erscheint nun der Dialog fr das Anlegen der neuen Seite. Sie knnen 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 standardmig aktiviert ist. Damit die Seite angezeigt wird, mssen Sie bei dieser Option das Hckchen 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 zustzlichen 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 Lschen einer Page Der einfachste Weg eine Seite zu lschen besteht darin, das Kontextmen dieser ber den Tree aufzurufen und den Menpunkt Delete zu whlen. Weiters ist dies natrlich auch ber die Listenansicht der Webseite im ListModul mglich.

100 von 151

Typo3

Dokumentation - Infopanel

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 mchten. 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 Mglichkeit ist im Kontextmen der Seite sofort den Menpunkt Edit page properties auszuwhlen.

101 von 151

Typo3

Dokumentation - Infopanel

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 whlen den Menpunkt Copy.

Abbildung 64 - Copy

102 von 151

Typo3

Dokumentation - Infopanel

Um die Seite nun nach oder innerhalb einer Page einzufgen, ffnen Sie das Kontextmen dieser Seite und whlen den Punkt Paste into oder Paste after aus.

Abbildung 65 - Paste

Das Kopieren von Elementen ist auch ber das List-Modul mglich um einen besseren berblick zu behalten. 4.5.4.6 Verschieben einer Page Fr das Verschieben einer Seite rufen Sie das Kontextmen dieser Seite auf und whlen zunchst More options und dann Move page.

Abbildung 66 - Move page

Es erscheint ein Dialog in dem Sie die neue Position der Seite angeben knnen. Es wird hier allerdings nicht die ganze Seitenstruktur angezeigt.

103 von 151

Typo3

Dokumentation - Infopanel

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 Text with image Images only Bullet list

Ein normales Textelement mit berschrift und Textteil. Eine beliebige Anzahl von Bildern die von einem normalen Textelement umflossen werden. Eine Liste von Bildern. Eine Auflistung. 104 von 151

Typo3 Table Special elements Filelinks Multimedia Sitemap Plain HTML Form elements Mail form Search form Login form Plugins Gerneral Plugin

Dokumentation - Infopanel Eine einfache Tabelle mit bis zu 8 Spalten. Erstellt eine Liste von Dateien fr den Download. Fgt Multimediadateien (Flash, Video, Audio) in die Webseite ein. Fgt eine Sitemap der Webseite ein. Fgt beliebigen HTML-Code in die Webseite ein. Fgt ein Formular fr das Versenden von Mails ein. Fgt ein Suchformular in die Webseite ein. Fgt ein Loginformular zur Webseite hinzu. Fgt ein Element das durch ein Plugin generiert wird ein.

4.5.5.2 Anlegen von Content Fr das Anlegen von Content (Inhalt) knnen Sie entweder ber das Kontextmen der Seite den Punkt New auswhlen und danach den Recordtyp Pagecontent auswhlen 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 knnen. Diese Auswahl ist nicht bindend, da die Art des Contents spter ber die Eigenschaften jederzeit gendert werden kann.

105 von 151

Typo3

Dokumentation - Infopanel

Abbildung 70 - New Content element

Nach der Auswahl des Typs erscheint der Eigenschaftendialog. Der Screenshot zeigt das DropDown-Men fr die nachtrgliche Auswahl des Typs. Weiters kann in diesem Dialog der Titel sowie Eigenschaften und der Inhalt des Content-Elements festgelegt werden. Typo3 bietet fr die Eingabe von Inhalt, sofern es sich um Text handelt, einen Rich Text Editor an.

Abbildung 71 - Pagecontent

4.5.5.3 Lschen von Content Um ein Content-Element zu lschen, 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.

106 von 151

Typo3

Dokumentation - Infopanel

Abbildung 72 - Pagecontent

4.5.5.4 Bearbeiten von Content Das Bearbeiten von Content oder das Ein- bzw. Ausblenden von ContentElementen lsst sich ebenfalls ber die Symbole unter dem Titel bewerkstelligen. Siehe dazu obigen Screenshot und die Symbolerklrung. 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 fr die Seite. Dort rufen Sie das Kontextmen fr das zu kopierende Element auf und whlen den Punkt Copy aus. Sie knnen das kopierte Element nun auf derselben oder auf einer anderen Seite ber das Paste in clipboard content-Symbol am oberen rechten Eck der Listenansicht einfgen.

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 gendert 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 knnen Sie die Anordnung der Elemente auf der Seite problemlos anpassen.

107 von 151

Typo3

Dokumentation - Infopanel

Abbildung 74 - Move content

4.5.6 Anlegen eines Templates Um ein neues Template fr eine Webseite, einem Abschnitt im Baum oder einzelnen Pages anzulegen gehen Sie in das Template-Modul im Abschnitt Web des Mens. 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 nchstes erscheint eine Warnmeldung die abfragt ob Sie wirklich ein neues Template anlegen mchten. Besttigen Sie diese mit OK.

Abbildung 76 - Template - Sicherheitsabfrage

Danach erscheint das Template Tool, das zunchst eine bersicht anzeigt. Um nun das Template zu konfigurieren klicken Sie auf Click here to edit whole template record. 108 von 151

Typo3

Dokumentation - Infopanel

Abbildung 77 - Template Tool

Hier vergeben Sie einen Titel fr 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

Fr das Kopieren, Verschieben oder Lschen von Templates verwenden Sie das List-Modul des Abschnittes Web im Men.

109 von 151

Typo3

Dokumentation - Infopanel

Abbildung 79 - List - Template

4.5.7 Verwalten von Dateien Fr das Verwalten von Dateien im fileadmin/-Verzeichnis von Typo3 gibt es zwei Mglichkeiten: FTP: ein Zugriff auf das Typo3-Verzeichnis am Server muss mglich sin Filelist-Modul von Typo3: Hier knnen 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 beschrnken 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 gewnschten Ordner navigieren knnen. Um eine Datei nun zu bearbeiten, rufen Sie das Kontextmen fr diese auf und whlen den Punkt Edit.

Abbildung 80 - Fileadmin

Es ffnet sich ein Editor in dem die jeweiligen Dateien angepasst und wieder abgespeichert werden knnen. Neue Dateien und Ordner werden ber den Kontextmenpunkt New angelegt. 110 von 151

Typo3

Dokumentation - Infopanel

Abbildung 81 - Fileadmin - Editor

Um Dateien auf den Server zu laden, gibt es im Kontextmen den Punkt Upload Files. Dieser ffnet eine GUI-Maske fr die Auswahl von 1 bis 9 Files zum Upload. Der Pfad muss zu jeder einzelnen Datei angegeben werden. Es ist nicht mglich, ganze Verzeichnisse auf einmal hinaufzuladen. Ein Mouse-Klick auf Upload files ldt diese dann endgltig in das ausgewhlte Verzeichnis.

Abbildung 82 - Fileadmin - Upload files

4.5.8 Verwalten von Benutzern Benutzer fr Backend und Frontend werden im Modul User Admin, im Abschnitt Tools des Mens, verwaltet. Dabei knnen Benutzer hinzugefgt, gelscht, oder deaktiviert werden. Weiters sind Eigenschaften und Passwort sowie Gruppenzugehrigkeit editierbar. Das Lschen eines Benutzers funktioniert ber das Delete-Symbol. Um den Benutzer zu deaktivieren oder zu aktivieren verwenden Sie das HideSymbol. Zum Bearbeiten der Eigenschaften eines Benutzers klicken Sie auf das Edit-Symbol. Zum Anlegen einer neuen Seite benutzen Sie das new Content-Symbol.

111 von 151

Typo3

Dokumentation - Infopanel

Abbildung 83 - User Admin

Es erscheint der Dialog fr das Anlegen eines Users. Hier knnen 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 hinzuzufgen, knnen Sie diese unter Groups hinzufgen. 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.

112 von 151

Typo3

Dokumentation - Infopanel

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 knnen Benutzer und Gruppen hinzugefgt, gelscht 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, hinzufgen oder entfernen. So lassen sich viele praktische Elemente wie Gstebuch, 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 knnen 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 knnen nur installiert und deinstalliert werden. Ein zwischenzeitliches deaktivieren ist nicht mglich. Allerdings werden einmal installierte Extensions im Typo3Verzeichnis gespeichert und die neu Installation und Deinstallation erfolgt ber einen einfachen Mouse-Klick. Die Installation und Deinstallation wird anhand 113 von 151

Typo3

Dokumentation - Infopanel der Extension Inline Frame erklrt. Die in den Abbildungen angezeigten Dialoge knnen 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 zunchst importiert werden. Zu diesem Zweck whlen Sie im DropDownMenu Menu, das sich direkt unter dem Titel Extension Manager befindet, den Punkt Import Extension aus.

Abbildung 87 - Extension Manger - Loaded extensions

Hier knnen Sie nun direkt im Online-Repository suchen oder eine Datei uploaden. Ein Aspekt, der fr das Importieren der Extension spricht, ist die Mglichkeit des Herunterladens via Browser. Dies ist dann wichtig wenn Sie sich hinter einem Proxyserver befinden und ihr Webserver nicht fr den Einsatz hinter einem Proxyserver konfiguriert wurde.

Abbildung 88 - Extension Manger - Import extension

114 von 151

Typo3

Dokumentation - Infopanel Der hier beschriebene Weg, sttzt sich darauf, dass Sie die Extension uploaden. Nach dem Klick auf Upload extension file wird das ImportErgebnis angezeigt. Weiters wird sofort der Punkt Install Extension angeboten. Klicken Sie auf diesen.

Abbildung 89 - Extension Manger - Extension import results

Die meisten Extensions mssen Tables zur Datenbank hinzufgen, um korrekt zu funktionieren. Es werden die nderungen aufgelistet und Sie mssen auf Make updates klicken um die Installation abzuschlieen.

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 grnen 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.

115 von 151

Typo3

Dokumentation - Infopanel

Abbildung 91 - Extension Manager - Install extensions

Vor der Deinstallation werden Sie noch einmal gefragt, ob Sie dies wirklich tun mchten. Durch Klick auf Remove extension deinstallieren Sie die Extension. Beachten Sie, dass die Extension weiterhin im Typo3Verzeichnis 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 fgt dem Backend von Typo3 ein neues Content-Element hinzu, dass es ermglicht iFrames als Inhalt von Seiten einzufgen. Der Vorteil eines iFrames ist dann gegeben wenn sich die Seite um den Frame herum nicht ndert. Zum Beispiel die Seite mit dem Men enthlt das Men selbst und einen iFrame in dem der Inhalt dargestellt wird. Weiters entfllt bei der Verwendung von iFrames das Erstellen einen Framesets.

116 von 151

Typo3

Dokumentation - Infopanel 4.6.2.1 Inline Frame Inhalt anlegen Gehen Sie zum Anlegen eines Inline Frame wie beim Anlegen eines neuen Content-Elementes vor. Whlen 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 knnen Sie einen Titel wie bei jedem anderen Content-Element auch angeben. Weiters mssen sie die URL, die Breite und Hhe, 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 fr Typo3 entwickelte Script-Sprache mit deren Hilfe Templates fr Webseiten erstellt werden. Die Syntax ist mit keiner bekannten Scriptsprache vergleichbar. In diesem Kapitel werde ich nur auf das Grundlegendste eingehen bzw. ein Nachschlagewerk fr 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 enthlt diese Dokumentation eine umfangreiche Befehlsreferenz. Weitere interessante Links rund um das Thema TypoScript finden Sie im Quellverzeichnis der Dokumentation im Punkt 6.6. 117 von 151

Typo3

Dokumentation - Infopanel

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 hufigsten bentigte. 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 gehren auch dynamische Funktionsnamen (Funktionsnamen mssen nicht einem Compiler vorab bekannt sein) dynamische, automatische Typumwandlung, bzw. ganz fehlende Typunterscheidung automatische Speicherverwaltung, vor allem automatische Speicherbereinigung dynamische Klassenzugehrigkeit oder prototypenbasierte Vererbung werden in der Regel ohne getrennte bersetzungsphase ausgefhrt (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 bentigt (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 lnger 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 Lschoperator Einem Objekt knnen nicht nur Werte zugewiesen werden, sondern Sie knnen auch gelscht werden. Dies geschieht ber den Operator >.
Objekt >

24

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

118 von 151

Typo3

Dokumentation - Infopanel 4.7.1.3 Kopieroperator Ein wichtiger Operator ist der Kopieroperator. Dieser ermglicht 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 bentigt Ansonsten wre - 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, bentigt man den Punktoperator, um auf die einzelnen Werte zugreifen zu knnen.
Objekt.attribut = wert

Um nun nicht immer den vollen Objektbaum angeben zu mssen, 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 nachtrglich ein Wert gendert werden, so geschieht dies ber die Angabe der vollstndigen Hierarchie.
Objekt.unterobjekt.attribut = wert

4.7.1.5 Konstante Fr Templates knnen sogenannte Konstanten angelegt werden. Diese werden in der unten angegebenen Form in Feld Constants eines Templates definiert. Diese knnen im TypoScript-Code nur ausgelesen aber nicht mehr verndert werden.
variable = wert

119 von 151

Typo3

Dokumentation - Infopanel

Zugriff erhlt man auf diese Variablen im TypoScript-Code mit Hilfe der unten angefhrten Syntax.
Objekt = {$variable}

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

4.7.1.7 Beispielcode Der folgende Beispielcode soll die Mglichkeiten 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, heit Erich, ist 45 Jahre alt und hat ein Gewicht von 75kg.
Vater.Kind { 10 = Franz 10.Gewicht = 40 10.Alter = 12 20 = Moni

120 von 151

Typo3
20.Alter = 18 }

Dokumentation - Infopanel

Der Vater hat 2 Kinder, den Franz und die Moni. Hier wird eine sehr gngige 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 natrlich 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 natrlich der Name und das Alter gendert werden, damit die Mutter nicht auch Erich heit.
Mutter.Gewicht >

Hier lschen wir den Wert des Parameters Gewicht.


Mutter.Kind.20.Gewicht = 60

Die Mutter wei das Gewicht ihrer Tochter und fgt dieses deshalb noch hinzu. 4.7.2 Aufbau einer einfachen Webseite Dieses Beispiel soll den Aufbau einer einfachen Webseite unter Typo3 erklren. Dabei gibt die Seite allerdings nicht mehr als Hello World! aus. Inhalte und Mens 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:

121 von 151

Typo3

Dokumentation - Infopanel

Abbildung 95 - TypoScript - Einfache Webseite - Screenshot

Betrachtet man den HTML-Code der Webseite, dann ist dieser schon ziemlich umfangreich und von Typo3 mit einigen Zustzen versehen. Grn markiert sind jene Teile die man bei manuellem HTML-Coding fr die Generierung der Webseite verwenden wrde.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-This website is powered by TYPO3 - inspiring people to share! TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL. TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners. Information and contribution at http://typo3.com/ and http://typo3.org/ --> <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"> <!-function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <script type="text/javascript" src="typo3temp/javascript_757c080409.js"> </script>

</head> <body bgColor = "#DDDDD"> Hello World! </body> </html> <script language="JavaScript"> <!-var SymRealOnLoad;

122 von 151

Typo3
var SymRealOnUnload; function SymOnUnload() { window.open = SymWinOpen; if(SymRealOnUnload != null) SymRealOnUnload(); } function SymOnLoad() { if(SymRealOnLoad != null) SymRealOnLoad(); window.open = SymRealWinOpen; SymRealOnUnload = window.onunload; window.onunload = SymOnUnload; } SymRealOnLoad = window.onload; window.onload = SymOnLoad; //--> </script>

Dokumentation - Infopanel

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 fr Framesets, Sprachanpassungen und eigenen Druckversionen interessant, da dieser der URL fr den Seitenaufruf mitbergeben werden kann und je nach bergebenem Wert wird dann das dafr angelegte PAGE-Objekt des Templates aufgerufen.
bodyTag=<body bgColor = "#DDDDD">

Typo3 erstellt den kompletten HTML-Code von selbst und dieser lsst sich natrlich anpassen und beeinflussen. Eine Mglichkeit ist die Angabe eines eigenen Body-Tags.
meta.AUTHOR=Christian Bartl meta.DESCRIPTION=Testseite

Weiters ermglicht 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 Grundgerst der Webseite ist erstellt. Um Inhalt auszugeben, sind einige weitere Schritte notwendig. In unserem Beispiel wollen wir allerding nicht 123 von 151

Typo3

Dokumentation - Infopanel 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 wre, komplexe Seiten oder Seiten mit aufwendigem Design, in dem nur wenige Teile dynamisch mit TypoScript aus Typo3 eingefgt werden, komplett in TypoScript nachzubilden, gibt es die Mglichkeit, HTML-Seiten als Vorlagen zu benutzen. In diesen HTML-Code werden so genannte Marker eingefgt. Diese werden spter durch den von Typo3 generierten Code ersetzt. Diese Marker haben die Form von ###NAME###. Der folgende HTML-Code ist ein gltiges Template fr Typo3. Dabei geben wir hier nur eine Tabelle an, der restlichen HTML-Code (body-Tag, usw) wird wieder von Typo3 generiert.
<!-- ###DOKUMENT### --> <table width="300" border="1" cellspacing="0"> <tr> <td>###TITLE###</td> </tr> <tr> <td>###CONTENT###</td> </tr> </table> <!-- ###DOKUMENT### -->

Damit mit einem HTML-Template gearbeitet werden kann, muss ein sogenannter Subpart definiert werden. Dieser ist hier mit den 2 Tags <!--###DOKUMENT### --> eingefasst. ###TITLE### und ###CONTENT### sind Marker die spter durch den Seiten-Inhalt aus Typo3 ersetzt werden. Diesen Markern knnen Sie natrlich 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; }

124 von 151

Typo3

Dokumentation - Infopanel Als nchstes wird Content (ein Regular Text Element) auf der Root-Seite fr die das Template erstellt wurde angelegt und ein Untertitel zur Seite hinzugefgt. 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 TypoScriptTemplate erstellt werden. Achtung! Damit Inhalt ausgegeben werden kann, muss ein statisches Template zum eigenen Template hinzugefgt werden. Whlen Sie dazu im Abschnitt Include static des Template-Dialogs aus der Liste Items das Template content(default) aus und fgen es hinzu.

Abbildung 98 - TypoScript - Include Static

Folgender TypoScript-Code wird bentigt:


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

125 von 151

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

Dokumentation - Infopanel

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 fileadminVerzeichnis angegeben.
10 = TEMPLATE 10 { template = FILE template.file = fileadmin/template/template.htm

Als nchstes 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 knnen, muss zunchst der Subpart angegeben werden. Dieser ist bei uns DOKUMENT und wurde im HTMLCode mit den beiden Tags <!--###DOKUMENT### --> 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 umschliet die Ausgabe des Parameters field. Dabei ist | der Platzhalter fr den Inhalt des Parameters field. Weiters kann | natrlich auch am Anfang oder Ende stehen damit nur etwas angehngt wird (z.B. wrap = | <br>). 126 von 151

Typo3

Dokumentation - Infopanel

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 knnen. table=tt_content fgt den Content ein. select.orderBy = sorting sorgt dafr, dass die einzelnen ContentElemente in der Reihenfolge ausgegeben werden wie sie in Typo3 angelegt wurden. select.where = colPos = 0 whlt den Inhalt aus der mittleren Spalte der Webseite aus. 4.7.4 Frameset Mit Typo3 lassen sich natrlich nicht nur einfache Seiten sondern auch Framesets erstellen. Wir wollen uns folgendes Beispiel nher 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,*

127 von 151

Typo3

Dokumentation - Infopanel
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 erhlt, weil die Seite mit typeNum-Wert 0 standardmig aufgerufen wird. Weiters ist die 128 von 151

Typo3

Dokumentation - Infopanel Vergabe von typNum-Werte wichtig, da mehrere Seiten in dem Template definiert werden, die dann beliebig der Reihe nach durchnummerieren werden knnen. Jede Seite muss einen anderen typeNum-Wert erhalten, zwei gleiche Werte sind unzulssig.
frameset.frameSet {

Mit dem Attribut frameSet wird ein Frameset fr 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 zustzlich 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 nchstes werden die einzelnen Pages definiert. Diese knnen 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 Erhhung 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 }

129 von 151

Typo3

Dokumentation - Infopanel Es kann den einzelnen Seiten, die das Frameset enthlt, auch Parameter zugeordnet werden. Obiges TypoScript entspricht dem folgenden HTMLCode: <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 auszuntzen, 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 knnen z.B. fr grafische Mens 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

130 von 151

Typo3
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 } }

Dokumentation - Infopanel

Analyse des obigen Codes:


TRAILER=IMAGE TRAILER.file=GIFBUILDER TRAILER.file {

Die Grafik wird fr 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 Gre der Grafik an (Syntax: Breite, Hhe). 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 eingefgt werden. Als nchstes werden die Objekte fr 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 groe 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

131 von 151

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

Dokumentation - Infopanel

Als nchstes wird der Schrifttyp und die Eigenschaften der Schrift gesetzt. fontSize gibt die Gre in Punkt an. Um eine Schrift zu verwenden, bentigen 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

Fr das TEXT-Objekt kann die Option niceText durch belegen mit dem Wert 1 aktiviert werden. niceText rundet die Schriftkanten ab (Kantenglttung), allerdings ist diese Funktion nicht immer unproblematisch und kann in manchen Typo3-Installationen zu Problemen mit der Grafikausgabe fhren. 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 gegenber dem ersten Schriftzug nur die Schriftgre, Farbe und das Offset. Der obige Code, fr das Objekt 20, knnte 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 verndern, neu belegt. 4.7.6 TMenu Die einfachste Mglichkeit, ein Men zu erstellen, ist die Variante eines textbasierten Mens. 132 von 151

Typo3

Dokumentation - Infopanel

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=&nbsp;| &nbsp;&#124; |*| &nbsp;| &nbsp;&#124; |*| &nbsp;|

Analyse des obigen Codes:


MENU_OBEN=HMENU

Um ein Textmen oder auch spter ein Grafikmen anlegen zu knnen muss zunchst 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 Mens angeben, das erzeugt werden soll, wobei directory die klassische und meist bentigte Form eines Mens ist.
MENU_OBEN.special.value=34

Das Attribut value nimmt die PageID auf, welche als Root-Seite fr die Erstellung des Mens 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 fr MENU_OBEN.1 vom Typ TMENU angelegt wird. Das Objekt 1 gibt die Ebene des Mens an. So wird hier nur das Men fr die erste Ebene unter dem Einstiegspunkt definiert. Danach wird der normale Zustand fr 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 nchstes knnen fr die Links mit Hilfe des Attributs ATagParam noch Parameter wie z.B. die CSS-Klasse angegeben werden.
MENU_OBEN.1.NO.linkWrap=&nbsp;| &nbsp;&#124; |*| &nbsp;| &nbsp;&#124; |*| &nbsp;|

133 von 151

Typo3

Dokumentation - Infopanel

Theoretisch wird jetzt bereits ein Men angezeigt. Allerdings werden alle Menpunkte direkt nacheinander geschrieben und mssen daher noch getrennt werden. Dies geschieht mit dem Attribut linkWrap. Die einfachste Methode wre linkWrap=|<br> dann wrde jeder Menpunkt in einer eigenen Zeile stehen. Etwas komplexer ist die Erstellung des linkWrap-Wert fr ein Men, welches im obigen Screenshot abgebildet ist:
&nbsp;| &nbsp;&#124; |*| &nbsp;| &nbsp;&#124; |*| &nbsp;|

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 Menpunkt ersetzt. Anfang: &nbsp;| &nbsp;&#124; Dem erste Element wird am Anfang ein Leerzeichen (entspricht &nbsp;) angehngt und am Ende noch ein Leerzeichen und das Symbol | (entspricht &#124;) Mitte: &nbsp;| &nbsp;&#124 Allen anderen Elementen die nicht das erste oder das letzte sind wird ein Leerzeichen vorangestellt und dann ein Leerzeichen und das | Symbol angehngt. Ende: &nbsp;| Dem letzten Elemnt wird nur ein Leerzeichen vorangestellt. 4.7.7 GMenu Eine andere Mglichkeit ein Men zu erstellen ist die Variante eines grafikbasierten Mens.

Abbildung 102 - TypoScript - GMenu

Der folgende Code realisiert das oben abgebildete Men.


MENU_LINKS=HMENU MENU_LINKS.special=directory MENU_LINKS.special.value=35

134 von 151

Typo3
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 }

Dokumentation - Infopanel

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 fr die erste Ebene unter dem Einstiegspunkt erstellt wird.
MENU_LINKS.1.NO=1

135 von 151

Typo3

Dokumentation - Infopanel

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

Jedem Menpunkt (also jeder Grafik) der erstellt wird wird am Schluss ein Zeilenumbruch (<br>) angehngt, damit die Grafiken untereinander angezeigt werden. Weiters wird noch die Gre 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 nchstes wird die Grafik fr 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

136 von 151

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

Dokumentation - Infopanel

Da die Seitenstruktur einer Webseite normalerweise nicht nur eine Ebene sondern auch Unterebenen enthlt werden noch die Grafiken fr 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 fr 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. Darber hinaus knnen hier einige Parameter angepasst werden um die Ausgabe anzupassen. Damit berhaupt Inhalt ausgegeben werden kann, muss ein statisches Template zum eigenen Template hinzugefgt 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 zunchst ein Objekt vom Typ CONTENT erstellt. In diesem Beispiel heit der Marker, an dessen Stelle der Inhalt ausgegeben werden soll, ebenfalls CONTENT.
CONTENT{ table=tt_content

Als nchstes 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

137 von 151

Typo3

Dokumentation - Infopanel

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 knnen fr jede Seite mehrere Sprachen und fr jede Sprache unterschiedlicher Inhalt erstellt werden kann. sys_language_uid gibt an, dass der Inhalt fr die Standardsprache ausgegeben werden soll. 4.7.8.1 Header Als nchstes passen wir die Ausgabe des Content-Headers an, indem sich zum Beispiel der Titel des Content-Elements befindet. Jedes ContentElement kann einen Titel besitzen. Dieser Codeabschnitt wird auerhalb 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 >

Zunchst muss das bestehende Objekt lib.stdheader in dem die Ausgabe des Headers definiert wird gelscht werden. Dies geschieht mit Hilfe des Lschoperators >.
lib.stdheader=CASE

Danach wird das Objekt neu erstellt. Der Typ ist CASE und somit enthlt 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 zhlen beginnt und beim Erstellen von Inhalt angegeben wird um das Design des Content-Headers anzugeben.
1=TEXT 1.field=header

138 von 151

Typo3

Dokumentation - Infopanel 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 ausgewhlt 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 auerhalb 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 bentigen, legen wir zunchst eine Kopie davon an.
tt_content.text>

Danach wird das Original-Objekt gelscht, 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 knnen mehrere Objekte angelegt werden.
tt_content.text.10<lib.stdheader

139 von 151

Typo3

Dokumentation - Infopanel

Als erstes Objekt enthlt 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 bentigte Feld heit bodytext.


fieldRequired=bodytext

fieldRequired gibt an, dass das Feld bodytext einen Wert enthalten muss damit dieser Abschnitt des Codes ausgefhrt 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 enthlt die Angaben wie die verschiedenen Content-Elemente (Text, Tabellen, Bilder) geparsed und ausgegeben werden sollen. editIcons fgt die Editiersymbole in die Webseite ein, die fr die einzelnen Content-Elemente angezeigt werden, wenn ein Admin in das Backend eingeloggt ist und sich die Webseite ansieht. 4.7.9 Konstante Fr Templates knnen Konstanten angelegt werden. Dabei muss zuerst die Konstante im Feld Constants des Templates definiert werden. Solche Konstanten knnen im TypoScript-Code nur ausgelesen aber nicht mehr verndert 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: 140 von 151

Typo3

Dokumentation - Infopanel

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

Es wird zunchste 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 Endgltige 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 Mglichkeiten von TypoScript in den oberen Punkten zu erklren. Daher wird es nicht mehr ausfhrlich erklrt, sondern soll nur als Gesamt-Beispiel zur Veranschaulichung und zum Testen dienen.

Abbildung 103 - TypoScript - Beispiel-Template 2

4.7.10.1 HTML-Template
<!-- ###DOKUMENT### --> <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> <!-- ###DOKUMENT### -->

141 von 151

Typo3 4.7.10.2 CSS

Dokumentation - Infopanel

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=&nbsp;| &nbsp;&#124; |*| &nbsp;| &nbsp;&#124; |*| &nbsp;|

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

142 von 151

Typo3
} 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 } }

Dokumentation - Infopanel

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

143 von 151

Typo3

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

144 von 151

Erfahrungsbericht

Dokumentation - Infopanel

5 Erfahrungsbericht
Im Abschnitt Erfahrungsbericht finden sie eine Dokumentation von Erkenntnissen und Fehlerquellen, die whrend 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 Mens, die sich auch nicht einblenden lassen, angezeigt. Beendet wird dieser ber die Tastenkombination Alt+F4. Nhere 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 mssen. /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 groes Bild, dass in der Adresszeile eine Browsers, links neben der URL angezeigt wird. Um ein Favicon auf einer Webseite einbinden zu knnen, muss zuerst ein Icon mit oben genannten Maen 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/. 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. 145 von 151

5.5

Erfahrungsbericht

Dokumentation - Infopanel

Lsung: 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 mgliche 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. 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 natrlich 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: Its faster in some operations, the blur-function works, the sharpen-function works. Anyway you do it, you must tell TYPO3 by configuration whether youre 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 ReverseProxyserver nicht korrekt dargestellt. Eine mgliche Lsung hat Henning Pingel auf seiner Webseite (http://www.henningpingel.de/TYPO3-Backend-Via-SSLProxy.124.0.html?&L=0) verffentlicht. Typo3 + JavaScript in Links Seiten die Funktion von externen Links bernehmen drfen kein JavaScript enthalten. Zum Beispiel, die oft verwendete Funktion javascript:history.back(), um eine Seite in der History zurckzugehen, lsst sich in Typo3 nicht als Link verwenden. JSTL + Methoden Mittels JSTL knnen keine Methoden aufgerufen werden. JSTL kann nur auf Arrays zugreifen. Deshalb ist die Funktionalitt in Beans ausgelagert und diese liefern dann ein Array von Objekten zurck, das mit Hilfe von JSTL ausgelesen 146 von 151

5.7

5.9

5.10

Erfahrungsbericht

Dokumentation - Infopanel

werden kann. Es empfiehlt sich eine eigene TagLibrary fr aufwendige Funktionen zu schreiben. 5.11 WinCE + InternetExplorer + Proxyserver Der InternetExplorer von Windows CE kann Proxyserver fr den Aufruf von lokalen Seiten nicht umgehen. Will man also ins Internet muss ein Proxy angegeben werden, fr den Aufruf von lokalen Seiten muss man diesen aber wieder deaktivieren.

147 von 151

Quellverzeichnis

Dokumentation - Infopanel

6 Quellverzeichnis
In diesem Abschnitt finden Sie Links zu Webseiten die als Quelle fr Informationen und Recherchen whrend der Diplomarbeit verwendet wurden. 6.1 Enzyklopdie http://de.wikipedia.org/ Projekt zur gemeinschaftlichen Erstellung einer umfangreichen OnlineEnzyklopdie. HTML http://de.selfhtml.org/ Sehr beliebte umfangreiche HTML-Referenz mit Codebeispielen. 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 JSTL http://java.about.com/od/beginningjava/l/aa_jstl_intro.htm Einfhrung 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 Einfhrung in JSTL http://www.developer.com/java/ejb/article.php/1447551 Einfhrung in JSTL CMS http://www.opensourcecms.com/ Webseite auf der viele OpenSource-CMS Demozugnge eingerichtet sind und ausprobiert werden knnen. http://www.cmsmatrix.org/ Webseite auf der die Funktionen vieler CMS miteinander verglichen werden knnen. 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/

6.2

6.3

6.4

6.5

6.6

148 von 151

Quellverzeichnis

Dokumentation - Infopanel

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 fr 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 fr TypoScript. http://jweiland.net/typo3cms/howto/ Einige Dokumentation und Anleitungen zu Typo3.

149 von 151

Glossar

Dokumentation - Infopanel - Diplomarbeit

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 Gebudeplan ............................................................................................... 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

150 von 151

Eidesstattliche Erklrung

Dokumentation - Infopanel

Eidesstattliche Erklrung
Ich erklre hiermit an Eides Statt, dass ich die vorliegende Arbeit selbststndig 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 Funoten der jeweiligen Seiten vermerkt. Diese Arbeit wurde bisher in gleicher oder hnlicher Form keiner anderen Prfungskommission vorgelegt und auch nicht verffentlicht. Wels, 11 Mai 2006

Christian Bartl

Thomas Fischl

Sebastian Hochgatterer

151 von 151