FachspezifischeThemenstellung 2008/09 in
Information and Communication Solutions
Expert-Projekt
Lisa Bรถhm und Kerstin Zรถcklein
5 BW Inhaltsverzeichnis 1. VORWORT...............................................................................................4 2. VORWORT AUF ENGLISCH..................................................................5 3. PROJEKTMANAGEMENT .....................................................................6 3.1. Ziele und Nichtziele...................................................................................................................7 3.2. Phasen.........................................................................................................................................8 3.3. Projektteam................................................................................................................................8 3.4. Meilensteinliste mit Arbeitspaketen und Zeiteinteilung........................................................9 3.5. Arbeitspaketbeschreibung......................................................................................................10
4. GRUNDLAGEN......................................................................................11 4.1. HTML ......................................................................................................................................12 4.2. Typo3
...................................................................................................................................13
4.3. CSS............................................................................................................................................14 4.4. MySQL 4.5. GIMP
.................................................................................................................................15 ....................................................................................................................................16
5. ABLAUF DES PROJEKTS....................................................................17 5.1. Planung.....................................................................................................................................17 5.2. Template...................................................................................................................................18 5.3. CSS-Datei.................................................................................................................................19 5.4. Wie unsere Homepage aufgebaut ist......................................................................................20 5.4.1. Aufbau des Templates ...........................................................................................................20 5.4.2. Gliederung des „wrapper“ Teiles...........................................................................................21 5.4.2.1. „menu“ ................................................................................................................................22 5.4.2.2. „page“..................................................................................................................................23 5.4.3. Gliederung des „footer“ Teiles...............................................................................................24 5.5. Funktionen mit Typo3.............................................................................................................25 5.5.1. Anmeldung.............................................................................................................................25 5.5.2. Neue Typo3 Seite anlegen......................................................................................................26 5.5.3. Template hochladen................................................................................................................27
Lisa Böhm, Kerstin Zöcklein
2
5.5.4. Template nach dem Hochladen verändern.............................................................................28 5.5.5. Seiten erstellen........................................................................................................................31 5.5.6. Seiteninhalte erstellen.............................................................................................................33 5.5.7. Textinhalte eingeben...............................................................................................................34 5.5.8. Formular erstellen...................................................................................................................35 5.5.8.1. Formularassistent.................................................................................................................36 .........................................................................................................................................................37 5.5.9. Anfahrtsplan erstellen.............................................................................................................38 5.5.10. Video ...................................................................................................................................40 5.6. Homebutton..............................................................................................................................41 5.6.1. Verweissensitive Grafik.........................................................................................................41
6. NACHWORT..........................................................................................43 7. QUELLENVERZEICHNIS......................................................................44 8. ABBILDUNGSVERZEICHNIS...............................................................45
Lisa Böhm, Kerstin Zöcklein
3
1. Vorwort Im Zuge unseres Ausbildungsschwerpunktes Information and Communication Solutions mussten wir eine Homepage mittels einem Content-Management-System selbstständig erstellen. Das Ziel war eine übersichtlich gestaltete Homepage mit Funktionen, wie zum Beispiel einem Anfahrtsplan, einem Formular zur Kontaktaufnahme und einem selbstständig gedrehten und bearbeiteten Video, für das Elektrounternehmen „Expert Zöcklein“ zu erstellen. Es war bereits eine Homepage vorhanden, welche jedoch sehr unübersichtlich war und wenige Informationen über den Betrieb enthielt. Da das Internet heutzutage zu einer sehr wichtigen Informationsquelle dient, wünschte sich der Projektauftraggeber Herr Ing. Roland Zöcklein eine gut strukturierte und übersichtliche Homepage für seinen Betrieb.
Lisa Böhm, Kerstin Zöcklein
4
2. Vorwort auf Englisch In the course of our training priority Information and Communication Solutions, we had a website using a content management system independently create. The goal was a clearly designed site with features, such as a Map, a contact form and a self-filmed and edited video, for the electric company "Expert Zรถcklein file. It was already a website in place, which is very confusing and had little information about the operation contained. As the Internet today has become a very important source of information used, wanted the project contracting Mr. Roland Zรถcklein a well structured and clear site for its operation.
Lisa Bรถhm, Kerstin Zรถcklein
5
3. Projektmanagement Projekte sind einmalige Prozesse mit einem bestimmten Start- und Endtermin zur Erreichung definierter Ziele. 1 Ein Projekt soll eine Aufgabe lösen, die •
zeitlich begrenzt ist,
•
konkrete Ziele verfolgt,
•
einzigartig, komplex und manchmal riskant ist,
•
beschränkte Ressourcen zur Verfügung hat,
•
von mindestens zwei Mitarbeitern durchgeführt wird,
•
gegenüber anderen Tätigkeiten abgegrenzt ist und
•
einer projektspezifischen Organisation unterliegt.
Ein Projekt gliedert sich in den Projektstart, die Projektkoordination, das Projektcontrolling, das Projektmarketing und den Projektabschluss. In einem Projekt gibt es verschiedene Rollen, welche sich wie folgt gliedern: Projektleiter, Projektteam mit den internen und externen Mitgliedern, den Projektmitarbeiter und dem Projektauftraggeber.2
1 2
Mag. Wurzinger, Mag. Selinger, Skriptum „Projektmanagement“ Mag. Strebinger, Mag. Steffl, Skriptum „Projektmanagement“
Lisa Böhm, Kerstin Zöcklein
6
3.1. Ziele und Nichtziele Ziele: •
Rechtzeitige Fertigstellung einer benutzbaren und funktionierenden Homepage
•
Verwaltung auch nach Projektabschluss
•
Übung zum Thema Projektmanagement
Nicht-Ziele: •
Werbung zu machen – Marketing
Lisa Böhm, Kerstin Zöcklein
7
3.2. Phasen •
Planung
•
Organisation
•
Durchführung und Nachbereitung der Homepage
3.3. Projektteam Auftraggeber: Roland Zöcklein •
Leiter: Kerstin Zöcklein
•
Teammitglieder: –
Lisa Böhm
–
Kerstin Zöcklein
Lisa Böhm, Kerstin Zöcklein
8
3.4. Meilensteinliste mit Arbeitspaketen und Zeiteinteilung •
Thema für das Projekt wählen (7. Oktober 2008)
•
Projektstart (14. Oktober 2008)
•
Projektwürdigkeitsanalyse (14. Oktober 2008)
•
Durchführbarkeitsanalyse (14. Oktober 2008)
•
Idee dem Projektauftraggeber vorstellen (15. Oktober 2008)
•
Planen des Projekts (21. Oktober 2008)
•
Projektende (31. März 2009)
•
Projekt der Klasse präsentiert (2. Oktober 2008)
•
Template ausgewählt (4. November 2008)
•
Template nach unseren Vorstellungen in der CSS-Datei bearbeitet (5. November 2008)
•
Logo für die Webseite entworfen (18. November 2008)
•
Typo3 konfiguriert und installiert (18. November 2008)
•
Texte zusammengefasst und Bilder dazu gesucht (2. Dezember 2008)
•
Bilder vom Betrieb und den Mitarbeitern gemacht (5. Dezember 2008)
•
Kontaktaufnahme mit den Lizenzberechtigten der Bilder (12. Dezember 2008)
•
Anfahrtsplan erstellt (16. Dezember 2008)
•
Einzelne Seiteninhalte in Typo3 erstellt (13. Jänner 2009)
•
Bilder hochgeladen (13. Jänner 2009)
•
Formular erstellt (20. Jänner 2009)
•
Homebutton (27. Jänner 2009)
•
Fachspezifische Themenstellung (17. Februar 2009)
•
Video erstellt, bearbeitet und eingefügt (22. März 2009)
Lisa Böhm, Kerstin Zöcklein
9
3.5. Arbeitspaketbeschreibung
Abbildung 1 - Arbeitspaketbeschreibung
Lisa Bรถhm, Kerstin Zรถcklein
10
4. Grundlagen Unsere Grundlagen sind:
Abbildung 2 - HTML
3
Abbildung 3 - Typo3
Abbildung 4 - CSS
4
Abbildung 5 – MySQL
5
Abbildung 6 - Gimp
3
http://www.webmasterpro.de/coding/article/cms-typo3-dereinstieg.html/image/typo3_logo.gif 4 http://www.betadaily.com/wp-content/uploads/2008/04/mysql-logo.png 5 http://osbi.gleichjetzt.de/wp-content/uploads/2008/01/gimp_start.jpg
Lisa Böhm, Kerstin Zöcklein
11
4.1. HTML HTML ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Dem Text wird durch Auszeichnungen von Textteilen mit Tags eine Struktur verliehen. Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen dazugehörigen Schluss- oder Endtag. z.B. <p> Starttag </p> Endtag 6 Ein HTML Dokument besteht aus 3 Bereichen 1. Dokumenttypdeklaration ganz am Anfang der Datei, die die verwendete Dokumenttypdefinition angibt, z. B. HTML 4.01 Strict, 2. HTML-Kopf (HEAD), der hauptsächlich technische oder dokumentarische Informationen enthält, die überwiegend nicht im Browser sichtbar sind und 3. HTML-Körper (BODY), der anzuzeigende Informationen enthält. Grundgerüst eines HTML Dokuments <html> <head> <title>Titel der Webseite </title> <!-- Evtl. weitere Kopfinformationen --> </head> <body> Inhalt der Webseite </body> </html>
6
http://de.wikipedia.org/wiki/HTML
Lisa Böhm, Kerstin Zöcklein
12
4.2. Typo3 Abbildung 7 - Typo3
Typo3 ist ein freies Entwicklungsframework für mittlere bis große Websites. Typo3 basiert auf der serverseitigen Skriptsprache PHP. Als Datenbank wird häufig MySQL eingesetzt, möglich sind aber auch etwa PostgreSQL oder Oracle. Typo3 kann mit Plugins um zahlreiche Funktionen und ganze Anwendungsprogramme erweitert werden, ohne dass ein eigener Programmcode geschrieben werden muss. Derzeit sind über 3.700 Erweiterungen verfügbar, darunter 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 zusammen mit Drupal und Joomla! zu den bekanntesten Content-Management-Systemen aus dem Bereich der freien Software.
Typo3 wird auf einem Webserver betrieben und von einem Webbrowser aus gesteuert. Die Nutzung von Typo3 gliedert sich in drei große Bereiche: Die Erstellung des Website-Designs, die Konfiguration von Typo3 mittels TypoScript und die Eingabe des Website-Inhalts Typo3 enthält ein sog. Backend und ein Frontend. „Backend“ bedeutet der im Webbrowser sichtbaren Teil von Typo3, in dem die Website verwaltet wird. Die Bearbeitung der Website kann auch direkt über die dargestellte Webseite, das Frontend, erfolgen. 7
7
http://de.wikipedia.org/wiki/Typo3
Lisa Böhm, Kerstin Zöcklein
13
4.3. CSS CSS bedeutet Cascading Style Sheets und ist eine deklarative StylesheetSprache 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 HTML oder XML so zu gestalten, dass die 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.8
8
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
Lisa Böhm, Kerstin Zöcklein
14
4.4. MySQL Abbildung 8 - MySQL
Der MySQL Server ist ein Relationales Datenbankverwaltungssystem. Es ist als Open-Source-Software für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für viele dynamische Webauftritte. MySQL Server ist eine freie Software, die unter der General Public License (GPL) steht. MySQL ist eines der populärsten Datenbanksysteme der Welt. Egal ob privat oder geschäftlich - heute ist MySQL bereits über elf Millionen mal installiert.
9
Die Datenbank MySQL ist wegen ihrer durchweg guten Leistungsfähigkeit sowie hohen Zuverlässigkeit und Benutzerfreundlichkeit zur populärsten Open-Source-Datenbank der Welt geworden. MySQL wird sowohl von einzelnen Web-Entwicklern als auch von den weltgrößten Unternehmen als Grundlage für umfangreiche Web-Präsenzen, geschäftskritische Systeme und Softwarepakete eingesetzt. Zu den namhaften Nutzern von MySQL zählen Yahoo!, neckermann.de, Nokia, Siemens, T-Systems und die HypoVereinsbank. MySQL ist aber nicht nur die populärste Open-Source-Datenbank der Welt, sie wurde auch für eine neue Generation von Anwendungen, die auf der Basis von LAMP (Linux, Apache, MySQL, PHP / Perl / Python) erstellt sind, zur ersten Wahl. MySQL kann auf über 20 Plattformen eingesetzt werden, u.a. Linux, Windows, OS/X, HP-UX, AIX und Netware. Dadurch erhalten Sie größtmögliche Flexibilität. 10
9
http://de.wikipedia.org/wiki/Mysql http://www.mysql.de
10
Lisa Böhm, Kerstin Zöcklein
15
4.5. GIMP Abbildung 9 – Gimp
GIMP ist ein kostenloses und freies Bildbearbeitungsprogramm. Der Schwerpunkt der Software ist die intensive Bearbeitung einzelner Bilder, wofür vielfältige Effekte zur Verfügung stehen. GIMP ist neben Linux, OpenOffice.org und Mozilla Firefox eines der bekanntesten freien Software-Projekte. Die Bearbeitungsfunktionen sind über Toolbars, Menüs und dauerhaft eingeblendete Dialogboxen, so genannte Paletten, zu erreichen. Diese enthalten Filter, Pinsel sowie Umwandlungs-, Auswahl-, Ebenen- und Maskierungsfunktionen. Zum Standardumfang gehören derzeit 48 verschiedene Pinsel, weitere lassen sich erzeugen, zudem sind alle bezüglich Kantenschärfe und Deckung einstellbar.11
11
http://de.wikipedia.org/wiki/Gimp
Lisa Böhm, Kerstin Zöcklein
16
5. Ablauf des Projekts 5.1. Planung Am Anfang jedes Projektes steht die Projektplanung. Wir haben uns über die Struktur unserer Homepage Gedanken gemacht. Zuerst haben wir uns überlegt, wie das Menü unserer Homepage aussehen soll und welche Inhalte die einzelnen Seiten enthalten sollen. Danach haben wir uns über das Design Gedanken gemacht.
Lisa Böhm, Kerstin Zöcklein
17
5.2. Template Zuerst suchten wir uns im Internet ein Template, welches vom Aufbau unseren Vorstellungen entsprach. Die weitere Bearbeitung des Templates wurde in der CSS Datei durchgeführt.
Abbildung 10 - Template Long Beach
Bearbeitetes Template:
Abbildung 11 - Bearbeitetes Template
Lisa Böhm, Kerstin Zöcklein
18
5.3. CSS-Datei Wir haben die vorhandene CSS Datei des Templates, welches wir uns heruntergeladen haben nach unseren Vorstellungen bearbeitet. Unsere CSS Datei wird mit dem Befehl: <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> eingebunden.
Abbildung 12 - Auszug CSS-Datei
Lisa Bรถhm, Kerstin Zรถcklein
19
5.4. Wie unsere Homepage aufgebaut ist 5.4.1. Aufbau des Templates Das Grundgerüst unserer Homepage ist mehrere Teile geteilt, welche mit „id“ gekennzeichnet sind. Es gibt zwei Hauptteile, diese unterteilen sich in einzelne Unterseiten. Die zwei Hauptteile sind der „wrapper“ und der „footer“. Der „wrapper“ unterteilt sich in folgende Unterseiten •
header
•
menu
•
page
o content o sidebar Der footer Teil enthält keine weiteren Unterseiten.
Abbildung 13 - Aufbau
Lisa Böhm, Kerstin Zöcklein
20
5.4.2. Gliederung des „wrapper“ Teiles der „header“ ist ein Unterteil des „wrappers“ In den „header“ haben wir das Logo der Firma Expert Zöcklein eingefügt.
Abbildung 14 - wrapper
Lisa Böhm, Kerstin Zöcklein
21
5.4.2.1. „menu“ Ein weiterer Unterteil des „wrappers“ ist der Teil, welchen wir „menu“ benannt haben. In diesem Teil werden die einzelnen Menüpunkte definiert, welche auf weitere Unterseiten verweisen z.B. der Punkt Leistungen unterteilt sich in •
Elektroinstallationen
•
Alarmanlagen
•
Photovoltaik & Solar
•
Telefonanlagen
Abbildung 15 - menu
Lisa Böhm, Kerstin Zöcklein
22
5.4.2.2. „page“ Die Seite Page ist eigentlich der wichtigste Teil der Homepage. „page“ unterteilt sich in „sidebar“ und „content“. Im „content“ findet man den gesamten Text unserer Homepage. „sidebar“ dient zur weitern Auswahl der einzelnen Unterseiten.
Abbildung 16 - page
Lisa Böhm, Kerstin Zöcklein
23
5.4.3. Gliederung des „footer“ Teiles In der Seite Footer haben wir die wichtigsten Kontaktinformationen des Betriebes angeführt, wie zum Beispiel: •
Name
•
Adresse
•
Telefonnummer
•
Abbildung 17 - footer
Lisa Böhm, Kerstin Zöcklein
24
5.5. Funktionen mit Typo3 Typo 3 bietet eine Vielzahl von verschiedenen Funktionen. Grundsätzlich gilt, dass man in Typo 3 von links nach rechts arbeitet. Nun erklären wir die wichtigsten genauer: 5.5.1. Anmeldung Der erste Schritt ist die Anmeldung: Die Seite wird mit dem Link: http://expert.pannoneum.at/typo3 angesurft. Dort meldet man sich mit Username und Passwort an.
Abbildung 18 - Anmeldung Typo3
Lisa Böhm, Kerstin Zöcklein
25
5.5.2. Neue Typo3 Seite anlegen Der erste Schritt, wenn man in Typo 3 angemeldet ist, ist dass man eine neue Typo3 Seite anlegt. Wir haben unsere Seite Expert Zöcklein benannt.
Abbildung 19 - neue Seite anlegen
Abbildung 20 - Expert Zöcklein wählen
Lisa Böhm, Kerstin Zöcklein
26
5.5.3. Template hochladen In Typo3 kann man verschiedene Templates hochladen und danach auch verändern. Man muss auf der linken Seite Template anklicken. Unser Template heißt Expert Zöcklein.
Abbildung 21 - Template hochladen
Lisa Böhm, Kerstin Zöcklein
27
5.5.4. Template nach dem Hochladen verändern Man kann in Typo3 ein Template nach dem Hochladen noch bearbeiten. Dazu muss man links auf Dateiliste klicken; dort wählt man dann den Ordner templates aus. In diesem Ordner befinden sich die Dateien index.html und style.css. Je nachdem, ob man die index.html oder die cssDatei ändern möchte, klickt man auf die gewünschte Datei und wählt bearbeiten aus.
Abbildung 22 - Template verändern
Abbildung 23 - Template bearbeiten
Lisa Böhm, Kerstin Zöcklein
28
Nach dem Bearbeiten muss das Template neu gemappt werden. Dadurch wählt man auf der linken Seite den Menüpunkt Templa Voilà aus. Dort muss man auf /Expert Zöcklein/Storeage Folder/ klicken.
Abbildung 24 - Template mappen
Dann muss man auf Update mapping klicken.
Abbildung 25 – Templavoilà Kontrollcenter
Lisa Böhm, Kerstin Zöcklein
29
Danach kommt man zu diesem Fenster:
Abbildung 26 - Mapping
Wenn alles in Ordnung ist, dann muss man auf Save klicken.
Lisa Bรถhm, Kerstin Zรถcklein
30
5.5.5. Seiten erstellen Wir haben den Menüpunkt Funktionen ausgewählt. Es ist sehr wichtig, dass man jene Seite auswählt, in welcher man die Unterpunkte erstellen will. Zunächst haben wir die Seiten •
Leistungen
•
Aktuelles
•
Über uns
•
Kontakt
erstellt.
Abbildung 27 – Seiten erstellen
Lisa Böhm, Kerstin Zöcklein
31
Der nächste Schritt war, dass wir die Seiten Leistungen, Aktuelles und Über uns noch einmal in Unterpunkte gegliedert haben. Dies haben wir nach dem gleichen System wie vorhin schon erklärt, durchgeführt.
Abbildung 28 - Seiten anlegen
Lisa Böhm, Kerstin Zöcklein
32
5.5.6. Seiteninhalte erstellen Um einen Seiteninhalt in Typo3 anzulegen, muss man zuerst die beliebige Seite auswählen und dann auf dieses Symbol (
) klicken. Dadurch
öffnet sich ein neues Fenster. In Typo3 kann man zwischen mehreren Arten von Seiteninhalten wählen. Einige sind z.B. Normaler Text, Text mit Bild, nur Bilder, Aufzählungen, usw. Für unsere Seiten, haben wir hauptsächlich „Text mit Bild“ gewählt. Man wählt den gewünschten Typ aus, indem man ihn anklickt.
Abbildung 29 - neuen Inhalt erstellen
Abbildung 30 - Texttyp auswählen
Lisa Böhm, Kerstin Zöcklein
33
5.5.7. Textinhalte eingeben Durch das Anklicken des gewünschten Textinhaltes gelangt man in ein neues Fenster. Dort kann man Überschriften festlegen und den Seiteninhalt eingeben. Diesen Inhalt kann man dann beliebig formatieren. Bei der unteren Abbildung ist zu sehen, wie man in Typo3 ein Bild einfügt. Die gewählte Grafik kann verschieden im Text positioniert werden.
Abbildung 31 - Inhalte eingeben
Abbildung 32 - Bild einfügen
Lisa Böhm, Kerstin Zöcklein
34
5.5.8. Formular erstellen
Um ein Formular in Typo3 zu erstellen, muss man zunächst wieder einen neuen Seiteninhalt anlegen. Man wählt den Typ Formular aus. Wir wählten den Typ Anmeldeformular. Im Seiteninhalt Anmeldeformular kann man zwischen verschiedenen Typen wählen. Wir haben „Formular“ gewählt. Für das Erstellen eines Formulars gibt es in Typo3 einen Assistenten, welchen auch wir verwendet haben.
Abbildung 33 – Anmeldeformular auswählen
Abbildung 34 – Formulartyp
Lisa Böhm, Kerstin Zöcklein
35
5.5.8.1.
Formularassistent
Im Formularassistenten kann man zwischen verschiedene Typen wählen. Wir haben für die Felder Name, Betreff und E-Mail Adresse den Typ Eingabefeld ausgewählt. Für das Feld „Ihre Nachricht“ haben wir den Typ Textbereich gewählt.
Abbildung 35 – Formularassistent Typen auswählen
Abbildung 36 - Formularassistent
Lisa Böhm, Kerstin Zöcklein
36
Fertiges Formular:
Abbildung 37 - Fertiges Formular
Lisa Bรถhm, Kerstin Zรถcklein
37
5.5.9. Anfahrtsplan erstellen Für unseren Anfahrtsplan haben wir eine Karte von Hainburg/Donau gewählt. Diese haben wir mit Gimp bearbeitet und das Logo von Expert Zöcklein eingefügt.
Abbildung 38 - Anfahrtsplan
Lisa Böhm, Kerstin Zöcklein
38
Wir haben das Bild in Typo3 hochgeladen. Wir haben einen weiteren Seiteninhalt angelegt, der einen Link direkt zu Google Maps beinhaltet. Durch das Klicken auf den Link öffnet sich Google Maps. Wir haben dies so eingestellt, dass als Ziel automatisch Hainburg an der Donau angegeben ist. Man muss nur mehr den Abfahrtsort eingeben, dann wird die Route berechnet. Zum Beispiel: Route Bruck/Leitha – Hainburg/Donau
Abbildung 39 - Anfahrtsplan: Beispiel: Route Bruck/Leitha - Hainburg/Donau
Lisa Böhm, Kerstin Zöcklein
39
5.5.10.
Video
Wir haben für unsere Webseite ein Video von Alarmanlagen gedreht, bearbeitet und hochgeladen.
Lisa Böhm, Kerstin Zöcklein
40
5.6. Homebutton 5.6.1. Verweissensitive Grafik Verweissensitive Grafik ist ein Begriff aus dem Webdesign und bezieht sich auch auf Multimedia-Anwendungen. 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 (Anchor-Links) 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. Beispiel: <img src="bild.jpg" alt="alternativtext" usemap="#mapname" /> <map name="mapname"> <area shape="rect" coords="9,372,66,397" href="http://de.wikipedia.org/" /> </map>12
Abbildung 40 - Homebutton
12
http://de.wikipedia.org/wiki/Verweissensitive_Grafik
Lisa Böhm, Kerstin Zöcklein
41
Wenn man auf den markierten Homebutton klickt, kommt man zu dieser Seite:
Abbildung 41 - Index-Seite
Lisa Bรถhm, Kerstin Zรถcklein
42
6. Nachwort Zu Beginn unseres Projekts konnten wir uns nicht vorstellen, dass unsere Webseite bis zum Ende des Schuljahres fertig werden würde. Es traten im Laufe der Zeit sehr viele Probleme auf, die wir aber dann zum Glück sehr gut gemeistert haben, zum Teil alleine, aber auch gemeinsam mit unseren Professoren, die uns sehr viel geholfen haben. Am Anfang war es sehr schwer, alles zu organisieren und zu planen. Wir mussten einen Zeitplan erstellen, den wir leider manches Mal aufgrund von Zeitmängel nicht einhalten konnten. Alle geplanten Seiten und Inhalte konnten wir zum Glück im Zeitrahmen auf unsere Webseite einbinden. Wir haben sehr viele gute, aber auch schlechte Erfahrungen mit diesem Projekt gemacht. Diese Erfahrungen werden uns bestimmt im weiteren Leben sehr viel helfen. Im Großen und Ganzen würden wir sagen, dass unser Projekt „Expert Zöcklein“ sehr gut gelungen ist, die Webseite einen guten Eindruck hinterlässt und hoffentlich unserem Auftraggeber Roland Zöcklein gefällt und wir hoffen, dass er mit unserer Arbeit zufrieden ist.
Lisa Böhm, Kerstin Zöcklein
43
7. Quellenverzeichnis Projektmanagement: Mag. Wurzinger, Mag. Selinger Skriptum Projektmanagement Mag. Strebinger, Mag. Steffl Skriptum Projektmanagement HTML: http://de.wikipedia.org/wiki/HTML Typo3: http://de.wikipedia.org/wiki/Typo3 CSS: http://de.wikipedia.org/wiki/Cascading_Style_Sheets MySQL: http://de.wikipedia.org/wiki/Mysql http://www.mysql.de Gimp: http://de.wikipedia.org/wiki/Typo3 http://de.wikipedia.org/wiki/Gimp Impressum: http://de.wikipedia.org/wiki/Impressum
Lisa Böhm, Kerstin Zöcklein
44
8. Abbildungsverzeichnis ABBILDUNG 1 - ARBEITSPAKETBESCHREIBUNG..............................10 ABBILDUNG 2 - HTML..............................................................................11 ABBILDUNG 3 - TYPO3............................................................................11 ABBILDUNG 4 - CSS................................................................................11 ABBILDUNG 5 – MYSQL..........................................................................11 ABBILDUNG 6 - GIMP..............................................................................11 ABBILDUNG 7 - TYPO3....................................................................13 ABBILDUNG 8 - MYSQL....................................................................15 ABBILDUNG 9 – GIMP......................................................................16 ABBILDUNG 10 - TEMPLATE LONG BEACH.........................................18 ABBILDUNG 11 - BEARBEITETES TEMPLATE.....................................18 ABBILDUNG 12 - AUSZUG CSS-DATEI..................................................19 ABBILDUNG 13 - AUFBAU......................................................................20 ABBILDUNG 14 - WRAPPER...................................................................21 ABBILDUNG 15 - MENU...........................................................................22 ABBILDUNG 16 - PAGE...........................................................................23 ABBILDUNG 17 - FOOTER......................................................................24 ABBILDUNG 18 - ANMELDUNG TYPO3.................................................25 ABBILDUNG 19 - NEUE SEITE ANLEGEN.............................................26 ABBILDUNG 20 - EXPERT ZÖCKLEIN WÄHLEN..................................26
Lisa Böhm, Kerstin Zöcklein
45
ABBILDUNG 21 - TEMPLATE HOCHLADEN..........................................27 ABBILDUNG 22 - TEMPLATE VERÄNDERN..........................................28 ABBILDUNG 23 - TEMPLATE BEARBEITEN.........................................28 ABBILDUNG 24 - TEMPLATE MAPPEN.................................................29 ABBILDUNG 25 – TEMPLAVOILÀ KONTROLLCENTER.......................29 ABBILDUNG 26 - MAPPING.....................................................................30 ABBILDUNG 27 – SEITEN ERSTELLEN.................................................31 ABBILDUNG 28 - SEITEN ANLEGEN......................................................32 ABBILDUNG 29 - NEUEN INHALT ERSTELLEN....................................33 ABBILDUNG 30 - TEXTTYP AUSWÄHLEN.............................................33 ABBILDUNG 31 - INHALTE EINGEBEN..................................................34 ABBILDUNG 32 - BILD EINFÜGEN.........................................................34 ABBILDUNG 33 – ANMELDEFORMULAR AUSWÄHLEN.....................35 ABBILDUNG 34 – FORMULARTYP.........................................................35 ABBILDUNG 35 – FORMULARASSISTENT TYPEN AUSWÄHLEN......36 ABBILDUNG 36 - FORMULARASSISTENT............................................36 ABBILDUNG 37 - FERTIGES FORMULAR...........................................37 ABBILDUNG 38 - ANFAHRTSPLAN........................................................38 ABBILDUNG 39 - ANFAHRTSPLAN: BEISPIEL: ROUTE BRUCK/LEITHA - HAINBURG/DONAU...................................................39 ABBILDUNG 40 - HOMEBUTTON............................................................41 ABBILDUNG 41 - INDEX-SEITE...............................................................42
Lisa Böhm, Kerstin Zöcklein
46
Lisa Bรถhm, Kerstin Zรถcklein
47