Lisa-Rosa Michlits, Bianca Redler, Theresa Steyrer & Stefanie Emminger
Themenspezifische Themenstellung ICS Typo3
Projektauftraggeber: Pannoneum Neusiedl am See
Projektteam: Projektleiterin: Lisa-Rosa Michlits Projektmitarbeiterinnen: Bianca Redler, Theresa Steyrer und Stefanie Emminger
Schuljahr: 2008/2009, Pannoneum Neusiedl am See
Seite 2 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Inhaltsverzeichnis 1 Vorwort.....................................................................................................6 1.1 Foreword................................................................................................7 2 Projektmanagement..................................................................................8 2.1 Ziele und Nichtziele.............................................................................10 2.2 Phasen.................................................................................................11 2.3 Start- und Endtermin...........................................................................12 2.4 Meilensteinplan mit Arbeitspaketen und Zeiteinteilung.......................13 2.5 Corporate Design.................................................................................14 2.6 Arbeitspaketbeschreibung...................................................................15 3 Grundlagen.............................................................................................16 3.1 Typo3...................................................................................................16 3.2 CSS.......................................................................................................17 3.3 JavaScript.............................................................................................20 4 Ablauf des Projektes................................................................................21 4.1 Planung................................................................................................21 4.2 Grundger체st.........................................................................................22 4.2.1 Aufbau der Seite...............................................................................22 4.2.2 Style Sheet........................................................................................25 4.2.3 Klassen in der CSS-Datei...................................................................26 4.3 Grundlegende Funktionen bei Typo3...................................................27 4.3.1 Seite anlegen....................................................................................27 4.3.2 SysOrdner.........................................................................................30 4.3.3 Seite anzeigen..................................................................................31 4.3.4 Datens채tze anzeigen und neu hinzuf체gen........................................32 4.3.5 Template erstellen und 채ndern.........................................................33 Seite 3 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 4.3.6 Extension importieren.......................................................................34 4.4 Besonderheiten....................................................................................36 4.4.1 Verweissensitive Grafik.....................................................................36 4.4.2 Frame................................................................................................38 4.5 Beschreibung der einzelnen Seiten......................................................39 4.5.1 News.................................................................................................39 4.5.2 Termine.............................................................................................40 4.5.3 Statements – Absolventen................................................................41 4.5.4 Restaurant........................................................................................43 4.5.5 Betriebsküche...................................................................................45 4.5.6 Supplierplan......................................................................................46 4.5.7 Stellenangebote................................................................................48 4.5.8 Pannoneum.......................................................................................49 4.5.9 Schulentypen....................................................................................50 4.5.10 Leitsätze..........................................................................................52 4.5.11 Kooperationen.................................................................................53 4.5.12 Geschichte......................................................................................55 4.5.13 Eindrücke........................................................................................57 4.5.14 Bildergalerie....................................................................................58 4.5.15 Lehrerfotos......................................................................................59 4.5.16 Kontakt............................................................................................60 4.5.17 Office...............................................................................................61 4.5.18 Sprechstundenliste.........................................................................62 4.5.19 Lehrer E-Mail...................................................................................63 4.5.20 Topmenu.........................................................................................64 4.5.21 Impressum......................................................................................65 4.5.22 Sitemap...........................................................................................66
Seite 4 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 4.6 Importierte Extensions.........................................................................67 5 Nachwort.................................................................................................68 6 Quellenverzeichnis..................................................................................69 7 Abbildungsverzeichnis............................................................................69
Seite 5 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
1 Vorwort Im Zuge unseres Ausbildungsschwerpunktes Information Communication Solutions erarbeiteten wir unsere fachspezifische Themenstellung für das Neusiedl am See. Die Voraussetzung war ein Content-Management-System für eine Schule zu erstellen. Unser Ziel war es, eine neue und verbesserte Homepage mit erweiterten Funktionen, wie der Möglichkeit zur Kontaktaufnahme, der Ansicht von Neuigkeiten und einer Bildergalerie zu erstellen. Mit der Unterstützung unserer Professoren war es uns möglich, eine neue Homepage für das
zu erstellen.
Die Gestaltung einer neuen Webseite erwies sich als notwendig, da die bereits vorhandene Homepage nicht alle gewünschten Inhalte aufwies und im Verwaltungsbereich mehr Ordnung erwünscht war. Das gesamte Team hofft, mit der neuen Homepage die Vorstellungen und Wünsche erfüllt zu haben.
Seite 6 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
1.1 Foreword In order to our key course element Information Communication Solutions we had to work on a special project for the
Neusiedl
am See. The condition was to create a Content-Management-System for our school. Our target was to offer a new and innovative homepage with extended functions, like the opportunity to approach, to get the latest news and to look at a gallery. With the support of our teachers we had the possibility to create a new website for the
.
The configuration of a new website was necessary because the existing one didn`t show all the contents and there have to be new folders in the administration area. The whole teams hopes that the demands and wishes for the new homepage could have been reached and achieved .
Seite 7 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2 Projektmanagement1 Projektmanagement ist eine Sammlung von Werkzeugen, die es ermöglicht, eine komplexe, neuartige und zeitlich abgegrenzte Aufgabe strukturiert zu bewältigen.
Jeder Ablauf eines Projektes ist prozessorientiert strukturiert. Projektidee
Ifd. Marketing
Projektauftrag
Mit
Projektstart
PM Ifd. Controlling
Projektdurchführ ung Projektabschluss Projektabnahme Abbildung
1:
Projektstrukturierung
1
www.wikipedia.org
Seite 8 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Je nach Projektart und -inhalt unterscheiden sich erfolgreiche Projektmanagementmethoden erheblich voneinander • Anlass bzw. Inhalt • Beteiligung bzw. Initiierung • Komplexität • Wiederholungsgrad Das Managen des Projektes beinhaltet die Festsetzung der Ziele und NichtZiele, und die Erstellung einer Meilensteinliste, die die Arbeitspakte sowie die Zeiteinteilung enthält.
Seite 9 von 71
Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.1 Ziele und Nichtziele Ziele: • Aktuelle Homepage verbessern: o passendes Template wählen o Seitenstruktur aufstellen o dynamische und statische Seiten erstellen o neueste Informationen rund um das Pannoneum o Terminkalender o Beschreibung der Schulformen o Archive die ältere Bericht beinhalten o Kontakte bereitstellen o Bildergalerie o Informationen über die Schule geben o Beschreibung der Lehrkräfte o Erläuterung der Projekte
Nicht-Ziele: • nicht funktionierende Homepage • Komplete Umstrukturierung der Seite • Unnötige Inhalte bzw. Spam
Seite 10 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.2 Phasen • Projektdefinition • Projektplanung • Projektdurchführung • Projektkontrolle • Projektabschluss
Seite 11 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.3 Start- und Endtermin Starttermin 30. September 2008, Besprechung mit dem Auftraggeber
Endtermin 31. M채rz 2009, Pr채sentation vor der Maturakommission
Seite 12 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.4 Meilensteinplan mit Arbeitspaketen und Zeiteinteilung
Abbildung 2: Meilensteinplan
Seite 13 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.5 Corporate Design Bevor wir mit der Auswahl und dem Anpassen des Templates beginnen konnten legten wir einige Kriterien daf端r fest.
Abbildung 3: Corporate Design
Seite 14 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
2.6 Arbeitspaketbeschreibung Mit Hilfe von PowerPoint war es uns mĂśglich jedes einzelne Arbeitspaket zu dokumentieren und zu beschreiben. Der Inhalt, die Beteiligten, Startund Endtermin, die Voraussetzungen und die Ziele und Nicht-Ziele mussten wir aufzeichnen. Und natĂźrlich das Ergebnis
Abbildung 4: Arbeitspaketbeschreibung
Seite 15 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
3 Grundlagen Unsere Grundlagen sind Typo3, CSS und JavaScript.
Abbildung 5: Typo 3 Logo
3.1 Typo32 TYPO3 ist ein kostenlos erhältliches Open Source Content Management System, zugeschnitten auf die Bedürfnisse von Unternehmen für das Internet, Intranet und Extranet. TYPO3 bietet Funktionen und Module sowie eine Erweiterungsschnittstelle für ein Maximum an Einsatzmöglichkeiten. Es ist ein 1998 freies Entwicklungsframework für mittlere bis große Websites, welches von Kasper Skårhøj entwickelt wurde. TYPO3 basiert auf der serverseitigen Skriptsprache PHP. Als Datenbank wird meist MySQL eingesetzt. TYPO3 wird aktiv weiterentwickelt. TYPO3 kann mehr oder weniger einfach mit Plugins (sogenannte Extensions) an spezielle Situationen angepasst werden.
Derzeit sind etwa 3000 Erweiterungen verfügbar, mit denen sich viele Anwendungsfälle ohne Schreiben von eigenem Programmcode abdecken lassen, z.B. News, Shop-Systeme, Diskussionsforen und andere. Vorteilhaft ist die Mehrsprachigkeit von Front- und Backend, sowie die aktive Anwender- und Entwicklergemeinde aus aller Welt. TYPO3 gehört zu den bekanntesten Open-Source-CMS.
Schätzungsweise wird TYPO3 mehr als 200 000 Mal weltweit eingesetzt wird.
2
www.wikipedia.org
www.typo3.com
Seite 16 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 TYPO3 wird auf einem Webserver mit einem Webbrowser gesteuert. Für die Bedienung ist keine Zusatzsoftware beim Redakteur erforderlich, allerdings muss der Webbrowser unterstützt werden. Die derzeit aktuellste Version von TYPO3, ist die Version 4.2.6 und wurde am 10.Februar 2009 aufgespielt.
3.2 CSS3 CSS heißt Cascading Style Sheets. Es ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente.
Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das Abbildung HTML oder XML so zu gestalten, dass die
6:
CSS
-
Beispiel
Abschnitte, deren Aussehen gleich sein soll, auch als derselben Klasse angehörend erkannt werden können. Man zeichnet im HTML-Dokument also nur die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit anderen Worten, man trennt den eigentlichen Inhalt von der optischen Gestaltung.
Mit CSS ist es möglich, für verschiedene Ausgabemedien (zum Beispiel Papier, Projektion, Sprache usw.) eine unterschiedliche Darstellung anzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDA oder Mobiltelefon) die Anzeige zu optimieren.
3
www.wikipedia.org
Seite 17 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 Neben diversen Angaben zu Farben und Schriften bietet CSS die MĂśglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. CSS gilt heutzutage als die Standard-Stylesheetsprache fĂźr Webseiten. Entwickelt wurde CSS von World Wide Web Consortium und die Endung von CSS-Dateien ist .css.
Seite 18 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Beispiel f端r CSS:
Abbildung 7: Beispiel CSS
Seite 19 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
3.3 JavaScript4 JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.
JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.
Ein paar praktische Beispiele für die Anwendung von JavaScript können Sie in diesem Dokument zur Einstimmung auf JavaScript ausprobieren. So sind beispielsweise die „kleinen Helferlein“ JavaScript-Anwendungen, ebenso die „Quickbar“ und die „Suche“. Letztere ist allerdings eine ziemlich anspruchsvolle Anwendung, die schon weit über das Maß dessen hinausgeht, wofür JavaScript üblicherweise eingesetzt wird.
JavaScript ist eine Script-Sprache, die von Netscape entwickelt wurde. JavaScript-Programme sind in den HTML-Code integriert und können diesen steuern. Hierzu ist ein JavaScript-fähiger Browser erforderlich, der die Anweisungen JavaScript-Programm unmittelbar ausführt (interpretiert). Man kann damit z.B. die Eingabewerte von Formularen prüfen oder verarbeiten, weitere Fenster öffnen u.v.a. JavaScript ist objektbasiert, d.h. der Programmierer kann auf die Objekte des Browsers, deren Eigenschaften und Methoden zugreifen und sogar neue Objekte erzeugen (aber keine neuen Klassen definieren).
www.jgiesen.de/javascript/JavaScript/JSBeispiele/start.htm http://de.selfhtml.org/javascript/intro.htm 4
Seite 20 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4 Ablauf des Projektes 4.1 Planung Am Anfang des Projektes stand natürlich eine sorgfältige Planung, die die Struktur und das Design der neuen Homepage, den Inhalt der Homepage, sowie die benötigten Datenbanken und deren Struktur beinhaltet. Wir erstellten ein Organigramm, um eine bessere Übersicht der Struktur der Homepage zu bekommen. Das Organigramm wurde am Ende des Projektes jedoch noch ein wenig abgeändert, da wir Seiten hinzufügten.
Seite 21 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.2 Grundgerüst 4.2.1 Aufbau der Seite Das Grundgerüst unserer Seite besteht aus mehreren Teilen die mit „ID“ gekennzeichnet wurden. Die Hauptteile unserer Seite bestehen aus dem „header“, dem „headerphoto“, der „nav“ (Navigationsleiste) und dem „content-wrap“ Insgesamt stehen all diese Komponenten im „wrap“ – dies ist ebenfalls eine eigens angelegte ID.
Abbildung 8: Grundgerüst
Seite 22 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Im „header“-Teil befinden sich das Logo unserer Schule und eine Sidebar. Der „content-wrap“-Teil beinhaltet den „content“-Teil der sich in „main“und „sidebar“-Teil aufspaltet. Der sogenannte „main“-Bereich umfasst alle Informationen die unsere Seite benötigt. Der „sidebar“-Bereich umfasst eine Mini-News auf welcher ständig Aktuelle Informationen bereitstehen.
Abbildung 9 – Grundgerüst
Seite 23 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Hauptsächlich für DHTML eingesetzt, hat sich die Sprache mittlerweile neue Anwendungsgebiete erschließen können. Unter anderem können z. B. PDF-Dokumente dadurch (ähnlich wie HTML) interaktiv verändert werden und populäre Anwendungsprogramme wie Photoshop und InDesign der Creative Suite von Adobe Systems lassen sich damit automatisieren. Sie wird auch gerne als Skriptsprache für Spiele eingesetzt, da der Sprachkern nur wenige Objekte enthält und dadurch der Interpreter relativ klein gehalten werden kann. <HTML> <HEAD> <TITLE>JavaScript: Beispiel 4</TITLE></HEAD> <BODY> <FORM ACTION="" > <CENTER> <INPUT TYPE=button VALUE="Press me" onclick="alert('Guten Tag !')"> </CENTER> </FORM></BODY> </HTML> Abbildung 10: Dialogfenster – JavaScript
Seite 24 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.2.2 Style Sheet Für weitere Layoutformatierungen legten wir eine CSS-Datei an. Zum Teil war unsere CSS-Datei schon vorhanden da wir für die Anfangsphase des Projektes auf ein Template zugriffen und dieses per Corporate Design an unsere Bedürfnisse anpassten. Unsere CSS-Datei heißt HigherGround.css, befindet sich im Ordner images und im Backend findet man die Datei unter Datei/templates/images. Um das Style Sheet auf den Seiten einzubinden, braucht man folgenden Link: <link rel="stylesheet" href="images/HigherGround.css" type="text/css" />
Abbildung 11 - HigherGround.css
Seite 25 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.2.3 Klassen in der CSS-Datei Die gesamte Webseite wurde mit vielen verschiedenen Klassen formatiert. Diese Klassen befinden sich in der CSS-Datei HigherGround.css. Die einzelnen Seiten der Homepage greifen auf die CSS-Datei – und somit auch auf die Klassen – mit einem Link zu. Dieser Link lautet: <link rel="stylesheet" href="images/HigherGround.css" type="text/css" />
Wenn man einem Text oder einem Bild eine Klasse zuweisen will, fügt man im HTML-Code „class=“…“ ein.
Ein Bespiel einer Klasse:
Abbildung 5 - Klasse in der CSS-Datei
Abbildung 6 - Klasse "news-list-item"
Seite 26 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3 Grundlegende Funktionen bei Typo3 Wir haben eine Reihe von Funktionen in Typo3 kennen gelernt. Diese möchten wir näher erklären.
4.3.1 Seite anlegen Grundlegend muss man sich bei Typo3 immer von links nach rechts arbeiten. Man geht unter die Option Seite in der linken Übersicht. Am einfachsten macht man einen Rechtsklick auf eine bestehende Seite und geht auf „Neu“. Zunächst kann man auswählen, von welchem Typ die neue Seite sein soll. Dieses Seiten-Modul ist Bestandteil der Erweiterung "TemplaVoila"
Abbildung 7 - Erstellen einer Seite
Danach kann man Typ der Seite, Seitentitel, Text und andere Einstellungen zur Seite ändern.
Seite 27 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 Man kann auch einstellen, ob Sie die Seite verbergen wollen oder nicht. Man kann ebenfalls den Zugriff f端r bestimmte Benutzergruppen verweigern oder die Seite beim Login verbergen.
Seite 28 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 8 - Typ, Seitentitel, Text und Einstellungen 채ndern
Seite 29 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3.2 SysOrdner Um einen SysOrdner anzulegen gehe ich auf die gleiche Art und Weise vorl, lediglich der Seitentyp muss ge채ndert werden.
Abbildung 9 - Erstellen eines SysOrdners
Seite 30 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3.3 Seite anzeigen Die Option „Anzeigen“ macht es möglich, eine Seite direkt im Backend anzusehen und auch dort zu bearbeiten.
Abbildung 10 - Seiten anzeigen
Seite 31 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3.4 Datensätze anzeigen und neu hinzufügen Unter der Option „Liste“ ist es möglich sich die Datensätze der verschiedenen SysOrdner, wie z.B.: Lehrerfotos, anzeigen lassen, aber auch neue Datensätze hinzufügen. Liste
Abbildung 11 - Datensätze anzeigen und hinzufügen
Seite 32 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3.5 Template erstellen und ändern Unter der Option „Template“ kann man die Einstellungen des Templates ändern, aber auch ein neues Template für eine bestimmte Seite hinzufügen. Rechts oben im Menü, kann man zwischen „Constant Editor“, „Into/Modify“, „Typo Script Object Browser“ oder „Template Analyzer“ auswählen. Weiters bieten die einzelnen Menüpunkte weitere Kategorien welche das Suchen erleichtern. Es ist möglich auch für einzelne Seiten eigene Templates zu erstellen.
Abbildung 12 - Templateeinstellungen ändern
Seite 33 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.3.6 Extension importieren Unter dem Optionspunkt „ExtManager“ kann man Extensions importieren, sowie auch schon installierte Extensions anzeigen lassen. Um sich die Extension anzusehen, muss man in der linken Übersicht mit der linken Maustaste auf „Ext Manager“ klicken und danach im Menü „Loaded Extensions“ auswählen.
Abbildung 20 - installierte Extensions anzeigen
Wenn man eine Extension installieren will, muss man ebenfalls in der linken Übersicht auf „Ext Manager“ klicken und dann im Menü „Import extensions“ auswählen. Anschließend gibt man den Namen der Extension in das Eingabefeld ein und mit einem Klick auf „Look Up“ wird die Extension gesucht.
Seite 34 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 13 - Extension suchen
Um eine ausgew채hlte Extension zu Installieren braucht man lediglich auf den Pfeil zu klicken.
Auszuw채hlende Extension
Abbildung 14 - Extension installieren
Seite 35 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.4 Besonderheiten Besonders an der von uns gestalteten Homepage waren eine verweissensitive Grafik und ein I-Frame.
4.4.1 Verweissensitive Grafik5 Verweissensitive Grafiken bieten eine Möglichkeit, Hyperlinks innerhalb einer Grafik zu verstecken. Sie werden als rechteckige, runde oder freie Schaltflächen realisiert, die sich wie Verweise in einem HTML-Dokument verhalten. In der Regel deutet ein sich verändernder Maus-Cursor auf die nicht sichtbaren Schaltflächen hin. Verweissensitive Grafiken werden sowohl in Bild- als auch in Videodateien eingesetzt.
Auf Web-Seiten häufig anzutreffende Beispiele sind Landkarten, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Daneben findet man im Winter oft „interaktive“ Adventskalender.
Eine in HTML definierte Imagemap besteht aus einem eigentlichen Bild, das mit einem <img>-Tag definiert wird. Gleichzeitig wird bei diesem ein Attribut usemap angegeben, das auf die Imagemap verweist. Die Imagemap besteht aus dem <map>-Tag sowie aus den einzelnen <area>-Tags, die die eigentlichen Definitionen der Felder darstellen, auf die geklickt werden kann. Diese definieren, vergleichbar mit der Definition bei einem <a>-Tag, welche URL aufzurufen ist.
5
www.wikipedia.org
Seite 36 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Beispiel <map name="schultypen">
1.1
<area shape="rect" coords="40,288,11,175" href="http://portal.pannoneum.at/index.php?id=76" alt="FW" 1.2 title="FW"> <area shape="rect" coords="138,290,211,93"
1.3
href="http://portal.pannoneum.at/index.php?id=78" alt="HLW" title="HLW"> 1.4 <area shape="rect" coords="234,91,310,291" href="http://portal.pannoneum.at/index.php?id=79" alt="HLT"
1.5
title="HLT"> <area shape="rect" coords="327,290,402,177"
1.6 href="http://portal.pannoneum.at/index.php?id=77" alt="HF" title="HF"> Abbildung 15: </map> Beispiel â&#x20AC;&#x201C; Verweissensitive Grafik
Abbildung 16: verweissensitive Grafik
Seite 37 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.4.2 Frame Ein Inline-Frame wird benutzt, um andere Webinhalte als selbständige Dokumente in einem Unterfenster des Browsers anzuzeigen. I-Frames werden heutzutage von nahezu allen Webbrowsern unterstützt. Die Technik wird häufig verwendet, um Werbung oder Inhalte anderer Anbieter in eine Webseite einzubinden.
Bei der Gestaltung von Inlineframes wird diesen entweder eine absolute Größe oder eine relative Größe im Verhältnis des Browserfensters zugewiesen.
Seite 38 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5 Beschreibung der einzelnen Seiten 4.5.1 News
Abbildung 17 - News
Wir haben eine “news.php” erstellt, damit unsere Besucher/Innen über die neuesten Geschehnisse im
Bescheid wissen und über
die neuesten Veranstaltungen informiert sind. Wir haben natürlich für unsere Nachrichten einen SysOrdner „News“ erstellt.
Abbildung 18 – SysOrdner „News“
Seite 39 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.2 Termine
Abbildung 19 - Termine
Die Seite „termine.php“ haben wir erstellt, damit jede/r Besucher – genau sehen kann, wie die weiteren Termine im
sind. Hierfür
haben wir wiederum einen Sysordner „Termine“ erstellt. Dieser befindet sich wie die „News“-Seite im Überordner „Aktuelles“.
Seite 40 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.3 Statements – Absolventen Als nächstes gibt es die Seite „Statements-Absolventen“. Diese Seite erstellten wir, damit sich die Besucher – Innen der
-
Seite einen Eindruck über die Schüler –Innen dieser Schule machen können. Dafür fertigten wir die Seite „statements-absolventen.php“ an. Auf dieser Seite können die ehemaligen Schüler –Innen ihre Eindrücke und Erfahrungen in ein Gästebuch schreiben.
Abbildung 20 - Statements-Absolventen
Auf der Seite haben wir einen Seiteninhalt vom Typ „Plugin einfügen“ angelegt.
Seite 41 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 21 - Seiteninhalt â&#x20AC;&#x17E;Statements Absolventenâ&#x20AC;&#x153;
Seite 42 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.4 Restaurant Auf dieser Seite werden die Besucher – Innen mittels Tabelle darauf aufmerksam gemacht, wann das Schulrestaurant geöffnet ist.
Abbildung 30 – Schulrestaurant
Dazu mussten wir eine Seite namens „Schulrestaurant 2008 - 2009“ anlegen, in dem wir den Seiteninhalt vom Typ „Tabelle“ fertigten. Danach gaben wir den Text in das Tabellenfelder ein.
Seite 43 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 31 – Seiteninhalt „Schulrestaurant 2008 - 2009“
Seite 44 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.5 Betriebsküche Die Seite Betriebsküche haben wir erstellt um die Besucher – Innen der Homepage den wöchentlichen Speiseplan vorzulegen.
Abbildung 32 – Betriebsküche
Hierfür mussten wir eine Seite mit dem Titel „Betriebsküche“ anlegen, in dem wir den Seiteninhalt vom Typ „Text“ fertigten.
Abbildung 33 – Seiteninhalt „Betriebsküche“
Seite 45 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.6 Supplierplan Weiteres beinhaltet unsere Seite die Seite „Supplierplan“, infolgedessen die Besucher /Innen der Website auf http://kalliope.webtermin.com/WebUntis/ weitergeleitet werden, wo sie den aktuellen Supplierplan aller Klassen des
sehen
können.
Abbildung 34 - Supplierplan
Abbildung 35: „Webuntis“
Seite 46 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Auf dieser Seite haben wir wieder einen Seiteninhalt vom Typ „Plugin einfügen“ angelegt. Wir wählten das Plugin „Inline Frame“ und gaben als URL die Webadresse http://kalliope.webtermin.com/WebUntis/ an.
Abbildung 22 - Seiteninhalt „Supplierplan
Seite 47 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.7 Stellenangebote Die Seite „Stellenangebote“ haben wir gefertigt, damit die Absolventen /Innen nach der abgeschlossenen Schulausbildung eine Hilfeleistung bei der Jobsuche bekommen.
Abbildung 23 - Stellenangebote
Auf dieser Seite haben wir wieder einen Seiteninhalt vom Typ „Text“ angelegt und mittels Hyperlink auf die Seite www.hogastjob.com verwiesen. Auf dieser Seite befindet sich das Tourismus Job-Portal Österreichs.
Seite 48 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.8 Pannoneum Im Sysordner „Pannoneum“ – diesen wir als Überordner benutzt - befinden sich folgende Unterordner: • Schultypen, • Leitsätze, • Leitbilder, • Kooperationen, • Geschichte • USERS.
Abbildung 24 - Sys-Ordner
Seite 49 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.9 Schulentypen Auf der Seite „Schultypen“ befindet sich eine Abbildung mit einer Übersicht der Schultypen. Bei einem Klick auf die einzelnen Schultypen der Abbildung wird man auf die jeweiligen Seiten der Schultypen weitergeleitet, auf denen die Besucher – Innen der Seite genauere Informationen bekommen. Weiter befindet sich auf dieser Seite zwei PDF-Dateien zum Downloaden, nämlich „Aufnahmebedingungen.pdf“ und „Stundentafel_ab_SJ_2008.pdf“.
Abbildung 39: Verweissensitive Grafik – Schultypen
Hierfür haben wir für alle Schultypen eine eigene Seite vom Typ „Text“ erstellt. Für die beiden Downloads haben wir die Seiten vom Typ „Dateiverweisung“ angefertigt.
Seite 50 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 40: Sys-Ordner - Schultypen
Seite 51 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.10
Leitsätze
Zudem gibt es auch die Seite „Leitsätze“. Diese hat den Zweck, damit die Besucher/Innen unserer Seiter über die Leitsätze und Grundzüge des bescheid wissen.
Abbildung 41: Leitsätze
Dazu mussten wir eine Seite namens „Leitsätze“ anlegen, in dem wir den Seiteninhalt vom Typ „Text“ fertigten. Danach gaben wir den Text in das Textfeld ein.
Seite 52 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.11
Kooperationen
Auf der Seite „Kooperationen“ befinden sich die beiden Firmen, mit denen das
zusammenarbeitet und auch der Elternverein wird
erwähnt. Auf dieser Seite wird das Logo der Firmen angegeben und die dazugehörigen Link, wenn man darauf klickt.
Abbildung 42: Kooperationen
Hierfür haben wir wieder einen Seiteninhalt vom Typ „Text angelegt“ und auf das Logo „LKW Walter“einen Hyperlink gesetzt.
Seite 53 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 43: Seiteninhalt - Kooperationen
Seite 54 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.12
Geschichte
Wir erstellten die Seite „Geschichte“, um die Besucher – Innen der Webpageüber den geschichtlichen Hintergrund des informiert werden. Hierfür haben wir eine kurze Einleitung zur Geschicht geschrieben und danach eine Hyperlink zu einer weitern, in der eine genauere Beschreibung zur Geschichte angeführt ist.
Abbildung 25: Geschichte 1
Im SysOrdner „Geschichte“ befinden sich zwei Seiten „Geschichte“ und „Geschichte2“. In „Geschichte“ befindet sich die kurze Einleitung mit dem Link zur genaueren Beschreibung die sich in „Geschichte2“ befindet.
Seite 55 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
Abbildung 26: Sys-Ordner Geschichte
Im SysOrdner â&#x20AC;&#x17E;Geschichte2â&#x20AC;&#x153; befinden sich die verschiedenen Seiteninhalte aus der die Seite zur genaueren Beschreibung der Geschichte.
Abbildung 27: Sys-Ordner Geschichte 2
Seite 56 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.13
Eindrücke
Im SysOrdner „Eindrücke“ – diesen dient als Überordner - befinden sich folgende Unterordner: • Bildergalerie und • Lehrerfotos.
Abbildung 28: Sys-Ordner - Eindrücke
Seite 57 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.14
Bildergalerie
Auf der â&#x20AC;&#x17E;bildergalerie.phpâ&#x20AC;&#x153; werden Fotos von den verschiedenen Veranstaltungen angezeigt.
Abbildung 29: Bildergalerie
Seite 58 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.15
Lehrerfotos
Auf dieser Seite befinden sich die Fotos der gesamten Lehrerschaft des .
Abbildung 30: Lehrerfotos
Der Seiteninhalt dieser Seite besteht aus einem Text mit Bild
Abbildung 50: Seiteninhalt â&#x20AC;&#x201C; Lehrerfotos
Seite 59 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.16
Kontakt
Im SysOrdner „Kontakt“ – diese dient als Überordner - befinden sich folgende Unterordner: • Office, • Sprechstundenliste und • Lehrer-Email
Abbildung 51: Sys-Ordner - Kontakt
Seite 60 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.17
Office
Auf der Seite „Office“ befinden sich alle Informationen rund ums Sekretariat. Hier findet man sowohl die Öffnungszeiten des Sekretariats als auch die Telefon- und Faxnummern, die Anschrift und auch die EMailadresse des Sekretariats.
Abbildung 52: Office
Wir erstellten diese Seite mit einem Seiteninhalt vom Typ „Text mit Bild“ und gaben dann die erforderlichen Informationen in das Textfeld ein.
Abbildung 53: Seiteninhalt – Office
Seite 61 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.18
Sprechstundenliste
Wir erstellten die Seite „Sprechstundenliste“ damit die Besucher – Innen der Seite sich über die Sprechstunden der einzelnen Lehrer informieren können.
Abbildung 54: Sprechstundenliste
Hierfür erstellten wir einen Seiteninhalt vom Typ „Tabelle“.
Abbildung 31: Seiteninhalt - Sprechstundenliste
Seite 62 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.19
Lehrer E-Mail
Auf dieser Seite befinden sich sämtliche Email-Adressen der Lehrer.
Abbildung 32: Lehreremail
Diese Seite hat wie „Sprechstunden“ den Seiteninhalt vom Typ „Tabelle“.
Abbildung 33: Seiteninhalt - Lehreremail
Seite 63 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.20
Topmenu
Im Topmenu befinden sich folgende Unterseiten: • Impressum • Sitemap • Suche • Barrierefreiheit • RSS-Feed • Login
Abbildung 34: Sys-Ordner - Topmenu
Seite 64 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.21
Impressum
Wie auf jeder anderen Homepage, gibt es auch auf unserer ein Impressum. Auf der „impresum.php“ haben wir einen Seiteninhalt vom Typ „Text“ angelegt. Das Impressum enthält die Anschrift, Telefonnummer und E-Mail unseres Auftraggebers, wer für den Inhalt verantwortlich ist, wer für die technische Umsetzung verantwortlich ist und auch die Haftung der Inhalte.
Abbildung 35: Impressum
Seite 65 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.5.22
Sitemap
Die Sitemap beinhaltet alle Seiten auf der
-Seite.
Abbildung 60: Sitemap
Seite 66 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
4.6 Importierte Extensions Name
Verwendung
rtehtmlarea
HTML Unterst체tzung
iframeflexform
I-Frame
mininews
Mini-News
ve_guestbook
G채stebuch
tt_news
News
goof_fotoboek
Bildergalerie
static_info_tables templavoila
Template
t3skin
Seite 67 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
5 Nachwort Zu Beginn unseres Projekts konnten wir uns kaum vorstellen eine solch umfangreiche Homepage in diesem Schuljahr fertigstellen zu können. Es schien eine kaum lösbare Aufgabe zu sein.
Zusätzlich wurde unser Projekt durch diverse größere und kleinere auftretende Probleme erschwert und unterbrochen. Mit Hilfe des Internets und unsere Professoren war es uns dann doch möglich unsere Homepage fertig zu gestalten.
Es gestaltete sich schwierig das Projekt schon im Vorhinein zu planen und so kam es doch noch zu einige Veränderungen im Ablauf und im Aufbau der Homepage. Die sich aber nur zu unseren Gunsten auswirkten.
Wir haben viele positive und auch manch negative Erfahrungen aus unserem Projekt mitgenommen und einiges daraus gelernt. Abschließend kann man wohl sagen, dass unser Projekt gut gelungen ist und auch unsere Professoren, die uns immer mit Rat und Tat zur Seite standen, und vor allem unser Auftraggeber mit der fertigen Pannoneum-Homepage zufrieden sind.
Seite 68 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3
6 Quellenverzeichnis Projektmanagement www.wikipedia.org
Typo3 www.wikipedia.org www.typo3.com
CSS www.wikipedia.org
Javascript www.jgiesen.de/javascript/JavaScript/JSBeispiele/start.htm http://de.selfhtml.org/javascript/intro.htm
Verweissensitive Grafik www.wikipedia.org
I-Frame www.wikipedia.org
Importierte Extensions www.typo3.org
7 Abbildungsverzeichnis Seite 69 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 Abbildung 1: Projektstrukturierung..............................................................8 Abbildung 2: Meilensteinplan.....................................................................13 Abbildung 3: Corporate Design..................................................................14 Abbildung 4: Arbeitspaketbeschreibung....................................................15 Abbildung 5 - Klasse in der CSS-Datei........................................................26 Abbildung 6 - Klasse "news-list-item"........................................................26 Abbildung 7 - Erstellen einer Seite.............................................................27 Abbildung 8 - Typ, Seitentitel, Text und Einstellungen ändern..................29 Abbildung 9 - Erstellen eines SysOrdners..................................................30 Abbildung 10 - Seiten anzeigen.................................................................31 Abbildung 11 - Datensätze anzeigen und hinzufügen................................32 Abbildung 12 - Templateeinstellungen ändern..........................................33 Abbildung 13 - Extension suchen...............................................................35 Abbildung 14 - Extension installieren.........................................................35 Abbildung 15: Beispiel – Verweissensitive Grafik.......................................37 Abbildung 16: verweissensitive Grafik.......................................................37 Abbildung 17 - News..................................................................................39 Abbildung 18 – SysOrdner „News“.............................................................39 Abbildung 19 - Termine..............................................................................40 Abbildung 20 - Statements-Absolventen....................................................41 Abbildung 21 - Seiteninhalt „Statements Absolventen“.............................42 Abbildung 22 - Seiteninhalt „Supplierplan.................................................47 Abbildung 23 - Stellenangebote.................................................................48 Abbildung 24 - Sys-Ordner.........................................................................49 Abbildung 25: Geschichte 1.......................................................................55 Abbildung 26: Sys-Ordner Geschichte........................................................56 Abbildung 27: Sys-Ordner Geschichte 2.....................................................56
Seite 70 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009
Themenspezifische Themenstellung ICS Typo3 Abbildung 28: Sys-Ordner - Eindr端cke.......................................................57 Abbildung 29: Bildergalerie........................................................................58 Abbildung 30: Lehrerfotos..........................................................................59 Abbildung 31: Seiteninhalt - Sprechstundenliste.......................................62 Abbildung 32: Lehreremail.........................................................................63 Abbildung 33: Seiteninhalt - Lehreremail...................................................63 Abbildung 34: Sys-Ordner - Topmenu........................................................64 Abbildung 35: Impressum..........................................................................65
Seite 71 von 71 Michlits, Emminger, Redler, Steyrer
2008/2009