website von jacky's mühle
DESCRIPTION
Fachspezifische Themenstellung zum Thema "Website von Jacky's Mühle"TRANSCRIPT
Fachspezifische Themenstellung aus
Information & Communication
Solutions
Content Management System „Typo3“
Projektleiter: Angelika Besser
Projetmitglieder: Patrick Fleck Marco Laubner
Seite 2 von 57
Inhaltsverzeichnis
Inhaltsverzeichnis ..................................................................... 2
1 Abbildungsverzeichnis ........................................................ 4
2 Vorwort ............................................................................... 6
3 Projektmanagement ............................................................ 8
3.1 Projektstrukturplan...................................................... 8
3.2 Arbeitspakete ............................................................. 9
3.3 Meilensteinplan ........................................................ 12
4 Allgemeines über Typo3 ................................................... 13
4.1 Grundlegendes ......................................................... 13
4.2 Geschichte ............................................................... 14
4.3 Gestaltungselemente ................................................ 15
5 Allgemeines über CMS ..................................................... 17
5.1 Funktionen und Features .......................................... 17
5.2 Erweiterungen .......................................................... 19
6 Arbeiten in Typo3 .............................................................. 20
6.1 Template „Illusion“ .................................................... 20
6.2 Typo3 installieren ..................................................... 21
6.3 Einloggen ................................................................. 21
6.4 Neue Seite erzeugen ................................................ 22
6.5 Seiteninhalt einfügen ................................................ 23
6.6 Ausloggen ................................................................ 25
Seite 3 von 57
6.7 Extension installieren ................................................ 26
6.8 Fotos hochladen: ...................................................... 33
6.9 Fotos in eine Seite einfügen ..................................... 35
7 verwendete Extensions ..................................................... 39
7.1 MJS Event Pro ......................................................... 39
7.2 Erstellen von Kalendereinträgen ............................... 42
7.3 Guestbook ................................................................ 43
7.4 Smooth Gallery ......................................................... 45
7.5 Templa-Voilà ............................................................ 46
8 Homepage ........................................................................ 52
8.1 Home ........................................................................ 52
8.2 Speisekarte .............................................................. 53
8.3 Kalender ................................................................... 53
8.4 Gästebuch ................................................................ 54
8.5 Bildergalerie ............................................................. 55
8.6 Kontakt ..................................................................... 56
9 Quellenverzeichnis ........................................................... 57
Seite 4 von 57
1 Abbildungsverzeichnis
Abbildung 1: Jacky's Mühle ...................................................... 6
Abbildung 2: Typo3 Logo ........................................................ 13
Abbildung 3: Original-Template .............................................. 20
Abbildung 4: Login Typo3 ....................................................... 21
Abbildung 5: Typo3 Startseite................................................. 22
Abbildung 6: Seiten erstellen .................................................. 23
Abbildung 7: Inhalte einfügen ................................................. 24
Abbildung 8: Rich-Text-Editor ................................................. 25
Abbildung 9: Abmelden .......................................................... 26
Abbildung 10: Extension Repository ....................................... 27
Abbildung 11: Templa-Voilà ................................................... 28
Abbildung 12: Extension importieren ...................................... 29
Abbildung 13: Extension Upload ............................................. 30
Abbildung 14: Extension Installieren ....................................... 31
Abbildung 16: Befehlsausgabe Extension .............................. 32
Abbildung 15: Sitemap ........................................................... 32
Abbildung 17: Zugang fileadmin ............................................. 33
Abbildung 18: Dateiansicht fileadmin ...................................... 34
Abbildung 19: Fotos hochladen .............................................. 34
Abbildung 20: Fotos in Seite ................................................... 35
Abbildung 21: Fotos für Seite auswählen ............................... 36
Abbildung 22: Dateiansicht bei "Inhalt mit Bild" ...................... 37
Abbildung 23: Fotos für Inhalt hochladen ............................... 38
Abbildung 24: MJS Event Pro ................................................. 39
Abbildung 25: Anzeigen von Kalender .................................... 40
Abbildung 26: Ansicht der Inhalte ........................................... 41
Seite 5 von 57
Abbildung 27: Archiv-PID ....................................................... 42
Abbildung 28: neue Kalenderdaten ........................................ 42
Abbildung 29: Gästebuch ....................................................... 43
Abbildung 30: Formular einfügen ............................................ 44
Abbildung 31: Einträge sichtbar machen ................................ 45
Abbildung 32: Dateipfad für Slideshow ................................... 46
Abbildung 33: Templa-Voilà ................................................... 47
Abbildung 34: Template auswählen ........................................ 47
Abbildung 35: Seite erstellen .................................................. 48
Abbildung 36: Mapping-Process ............................................. 49
Abbildung 37: Bestandteile mappen ....................................... 50
Abbildung 38: Seite "Home" ................................................... 52
Abbildung 39: Seite "Speisekarte" .......................................... 53
Abbildung 40: Seite "Kalender" ............................................... 53
Abbildung 41: Seite "Gästebuch" ............................................ 54
Abbildung 42: Seite "Bildergalerie" ......................................... 55
Abbildung 43: Seite "Kontakt" ................................................. 56
2 Vorwort
Nach langen Überlegungen, welches das Beste und
geeignetste Thema für unser Maturaprojekt in unserem
Ausbildungsschwerpunkt ICS ist, haben wir uns dazu
entschieden, eine Homepage für das Restaurant „Jacky’s
Mühle“ in Gols zu gestalten. Mit Angelika Besser als
Projektleiterin,
Projektmitarbeiter hatten wir sicherlich ein kompetentes und
zuverlässiges Team zur Verfügung. Die Grundidee unserer
Arbeit war, die im Unterricht erlernte
Kenntnisse in einem Projekt praktisch umzusetzen.
Wir haben uns dazu entschieden, die gesamte Webseite mit
Hilfe des Content Management Systems „Typo3“ zu erstellen,
da dieses in seiner Handhabung relativ simpel ist
Nicht-Spezialisten optimal verwendet werden kann
bemühen uns natürlich die Seite nach den Wünschen unsres
Projektauftraggebers zu gestalten und zu optimieren.
Zufriedenheit des Auftraggebers ist unser größtes Anliegen.
Abbildung 1: Jacky's Mühle
Seite
Vorwort
Nach langen Überlegungen, welches das Beste und
geeignetste Thema für unser Maturaprojekt in unserem
Ausbildungsschwerpunkt ICS ist, haben wir uns dazu
entschieden, eine Homepage für das Restaurant „Jacky’s
“ in Gols zu gestalten. Mit Angelika Besser als
eiterin, Patrick Fleck und Marco Laubner als
Projektmitarbeiter hatten wir sicherlich ein kompetentes und
zuverlässiges Team zur Verfügung. Die Grundidee unserer
Arbeit war, die im Unterricht erlernten Fähigkeiten und
Kenntnisse in einem Projekt praktisch umzusetzen.
Wir haben uns dazu entschieden, die gesamte Webseite mit
Hilfe des Content Management Systems „Typo3“ zu erstellen,
da dieses in seiner Handhabung relativ simpel ist, und auch von
ezialisten optimal verwendet werden kann
bemühen uns natürlich die Seite nach den Wünschen unsres
Projektauftraggebers zu gestalten und zu optimieren.
Zufriedenheit des Auftraggebers ist unser größtes Anliegen.
: Jacky's Mühle
Seite 6 von 57
Nach langen Überlegungen, welches das Beste und
geeignetste Thema für unser Maturaprojekt in unserem
Ausbildungsschwerpunkt ICS ist, haben wir uns dazu
entschieden, eine Homepage für das Restaurant „Jacky’s
“ in Gols zu gestalten. Mit Angelika Besser als
Patrick Fleck und Marco Laubner als
Projektmitarbeiter hatten wir sicherlich ein kompetentes und
zuverlässiges Team zur Verfügung. Die Grundidee unserer
n Fähigkeiten und
Kenntnisse in einem Projekt praktisch umzusetzen.
Wir haben uns dazu entschieden, die gesamte Webseite mit
Hilfe des Content Management Systems „Typo3“ zu erstellen,
, und auch von
ezialisten optimal verwendet werden kann. Wir
bemühen uns natürlich die Seite nach den Wünschen unsres
Projektauftraggebers zu gestalten und zu optimieren. Denn die
Zufriedenheit des Auftraggebers ist unser größtes Anliegen.
Seite 7 von 57
Preface
After long considerations which one could be the best and most
suitable project for our school-leaving exam in our education
main point ICS, we have decided to form a homepage for the
restaurant " Jacky's Mühle " in Gols. With Angelika Besser as a
project leader, Patrick Fleck and Marco Laubner as project
assistants we had a competent and reliable team. The basic
idea of our work was to move the abilities learned in the lessons
and knowledge in a project practically.
We have decided to create the whole web page with the help of
the Content Management System "Typo3", because it’s
relatively simple in its manipulation, and can also be applied
optimally by non-specialists. We take care of forming and
optimizing the website according to our project principal’s
wishes. Since the satisfaction of the principal is our biggest
request.
Seite 8 von 57
3 Projektmanagement
3.1 Projektstrukturplan
Projektmanagement
1
Daten erheben
2
Template bearbeiten
3
Extensions Typo3
4
Inhalte einfügen
5
Projektabschluss
6
Homepage „Jacky’s Mühle“
Projekt start 1.1
Projektkoordination 1.2
Projektcontrolling 1.3
Projektabschluss 1.4
Mündlich erheben 2.1
Schriftlich
aufzeichnen 2.2
Nach Navigation
ordnen 2.3
Zusammenfassen 2.4
Fotos machen 2.5
Fotos bearbeiten 2.6
Template planen 3.1
Template suchen 3.2
Template ändern 3.3
Template anpassen
(Navigation,…) 3.4
Template in Typo3
übertragen 3.5
Evt. Template
nachbearbeiten 3.6
Guestbook 4.4
News 4.2
CalendarBase 4.3
TemplaVoila 4.1
FlashSlideshow 4.5
GoogleMap 4.6
Datenformate wähle
5.1
Inhalte einfügen 5.2
Inhalte nachbearbeite
5.3
Website
veröffentlichen 6.1
Website präsentieren
6.2
Funktionen an
Auftragg. erklären 6.3
Evtl. nachbearbeite
6.4
Websiteübergabe 6.5
Seite 9 von 57
3.2 Arbeitspakete
Verantwortlich Zeitraum Ressourcen Inhalte Nicht -Inhalte
1 Projektmanagement
Projektstart 1.1 B, F, L 22.9.2009 Laptop. Projektteam,
Pläne (MindMap)
Brainstorming
Projektkoordination 1.2 B noch
andauernd
Projektpläne,
Strukturen, Skizzen,
Arbeitseinteilungen
Besprechungen,
Analysieren,
Diskussion
Konflikte
Projektcontrolling 1.3 B noch
andauernd
Laptop, Mitschriften
(was bereits gemacht
wurde, Checkliste)
Kontrolle des
Projektprozesses
wenn etwas falsch läuft
verheimlichen
Projektabschluss 1.4 B, F, L 08.4.2010 Laptop (online, digital
abgeben)
Das gesamte
Projekt
wenn Abgabe zu spät
oder gar nicht erfolgt
2 Daten erheben
mündlich erheben 2.1 B, F, L immer wieder
während des
Projektes
Mit Auftraggeber
über Daten
sprechen
(Veröffentlichung,
Quellen, Recht)
keine falsche Angaben
veröffentlichen, nichts
veröffentlichen was nicht
abgesprochen wurde
schriftlich erheben 2.2 B immer wieder
während des
Projektes
Laptop, Notizblöcke,
Schreibutensilien
Mit Auftraggeber
über Daten
sprechen
(Veröffentlichung,
Quellen, Recht)
keine falsche Angaben
veröffentlichen, nichts
veröffentlichen was nicht
abgesprochen wurde
nach Navigation ordnen 2.3 F Oktober 09 Laptop, typo3 Die Navigation der
Website
bestimmen
keine willkürliche
Navigation sondern eine
strukturierte
Zusammenfassen 2.4 B rund um die
Uhr
Laptop, Notizen Alle wichtigen
Arbeitsschritte im
Laufe des Projekts
zusammenfassen
Unwichtiges weglassen,
keine Wiederholungen
Fotos machen 2.5 L Jänner 10 Digitalkamera, Fotos
die zur
Veröffentlichung
bereitgestellt wurden
Fotos gesammelt,
selbst erstellt
keine unerlaubten Bilder
veröffentlichen
Fotos bearbeiten B, L Jänner 10 Gimp, Photoshop,
evtl. Paint
Fotos
retuschieren,
Webtauglich
machen
zu große Fotos
Seite 10 von 57
3 Template bearbeiten
Template planen 3.1 F Oktober 09 Skizzen,
Vorstellungen
geeignetes
Template für Seite
planen
völlig unpassendes und
unstrukturiertes Template
Template suchen 3.2 B, F, L Oktober 09 Internet, Laptop geeignetes
Template für Seite
suchen
völlig unpassendes und
unstrukturiertes Template
Template ändern 3.3 F Während des
gesamten
Projektes
immer wieder
kleine
Änderungen
Internet (evtl.
Anleitungen), Laptop
Template perfekt
abstimmen,
Corporate Design
schlecht oder nicht
abgeändertes Template,
kein Corporate Design
Template anpassen 3.4 F Während des
gesamten
Projektes
immer wieder
kleine
Änderungen
Internet (evtl.
Anleitungen), Laptop
Template perfekt
abstimmen,
Corporate Design,
Navigation
sinnvoll einbinden
schlecht oder nicht
abgeändertes Template,
kein Corporate Design
Template in typo3 übertragen
3.5
F November 09 Internet, typo3,
Templavoila (typo3
Extension)
Das in html
veränderte
Template mit Hilfe
von Templavoila in
typo3 übertragen
evtl. Template nachbearbeiten
3.6
B, F, L durchgehend Internet, typo3,
Templavoila (typo3
Extension)
Template so
nachbearbeiten,
dass alles
ineinander fließt
keine Nachbearbeitung
4 Extensions typo3
TemplaVoila 4.1 F November 09 typo3, Laptop,
Internet,
die Extension
TemplaVoila für
unseren Template
Upload installieren
News 4.2 L Oktober 09 typo3, Laptop,
Internet,
Extension News
installiert
CalendarBase 4.3 F Dezember 09 typo3, Laptop,
Internet,
CalendaBase für
das Einbinden
eines
Veranstaltungskal
enders installiert
Guestbook 4.4 B Dezember 09 typo3, Laptop,
Internet,
die Guestbook
Erweiterung für
das Einbinden
eines Gästebuchs
installiert
Seite 11 von 57
FlashSlideshow 4.5 F Dezember 09 typo3, Laptop,
Internet,
eine Slideshow
durch Erweiterung
in Die Seite
„Bildergalerie“
eingebunden
Slideshow nicht
willkürlich einbinden,
dorthin wo sie auch
hinpasst
Google Maps 4.6 L Dezember 09,
Jänner 10
typo3, Laptop,
Internet, Google
GoogleMaps in die
Seite Kontakt
einbinden, soll als
Anfahrtsplan
dienen
5 Inhalte einfügen
Datenformate wählen 5.1 L zum Zeitpunkt
wenn der Inhalt
eingefügt wird
typo3, Laptop, Internet Die richtigen
Datenformate für
die Seiteninhalte
wählen
Keine Datenformate
wählen welche nicht zum
Seiteninhalt passen
Inhalte einfügen 5.2 L, B immer wieder
aktualisieren
typo3, Laptop, Internet Die besprochenen
und abgesegneten
Inhalte in die
jeweiligen Seiten
einfügen
keine unerlaubten Inhalte
einfügen
Inhalte nachbearbeiten 5.3 B, F, L,
Auftraggeber/in
während des
gesamten
Website
Betriebes
typo3, PC, Internet bei Änderungen
kann der Inhalt
immer wieder
verändert
und/oder neu
eingefügt werden
Website nicht veralten
lassen
6 Projektabschluss
Webseite veröffentlichen 6.1 B, F, L März 10 typo3, PC, Internet,
Webspace
Die fertiggestel lte
Webseite, im
Internet mit
geeignetem
Webspace
veröffentlichen
kein Webspace
Webseite präsentieren 6.2 B, F, L Juni 10 Fachwissen, Internet,
Laptop/PC, typo3
Bei der mündl.
Matura Webseite
präsentieren
kein Projekt vorhanden
Auftraggeber Homepage
erklären 6.3
B, F, L März/April 10 Fachwissen, Internet,
Laptop/PC, typo3
Dem Auftraggeber
den Umgang mit
der Seite erklären
wenn man die Webseite
ohne Erklärung übergibt
Websiteübergabe 6.4 B, F, L März/April 10 Internet, Laptop/PC,
typo3
Dem Auftraggeber
die fertiggestellte
Webseite
übergeben
wenn Projekt fertig,
jedoch keine Übergabe
erfolgt
Seite 12 von 57
3.3 Meilensteinplan
PSP
Code
Meilenstein Plantermine Ist-Termine
1.1 Projekt gestartet 10.9.2009 10.9.2009
2.4 Informationssammlung fertiggestellt
2.7 Planung fertiggestellt
3.2 Template suchen 8.10.2009 8.12.2009
3.4 Template anpassen 15.11.2009 5.11.2009
4. Extension installieren Immer(kann
zwischendurch
erledigt werden)
5.2. Inhalte einfügen 30.1.2010 26.11.2009
6.2 Website präsentieren 4.-10.6.2010
(Matura)
14 Projektabschluss 4.-10.6.2010 (nach
Präsentation �
Matura)
Seite 13 von 57
4 Allgemeines über Typo3
4.1 Grundlegendes
TYPO3 ist ein Content Management Framework für kleine bis
mittelgroße Unternehmen. Es vereint die Vorteile zweier
Welten: Umfangreiche „Out-of-the-box“ Funktionalität mit einer
großen Auswahl an Standard-Modulen. Dies auf der Basis einer
robusten Hochleistungs-Architektur, in die praktisch jede
Erweiterung und Spezialentwicklung integriert werden kann.
TYPO3 ist dabei ein sehr benutzerfreundliches, intuitiv
bedienbares Werkzeug. Dadurch fällt es Autoren leicht,
Webseiten sogar mit komplexer Funktionalität mit wenigen
Mausklicks selbst zu produzieren, zu verwalten und zu pflegen.
Als serverseitige plattformunabhängige Applikation kann
TYPO3 mit praktisch jedem verfügbaren Browser bedient
werden. Durch die vollständige Trennung von Look und Content
sind den Designmöglichkeiten in TYPO3 keinerlei Grenzen
gesetzt.
TYPO3 eröffnet webgestützte Kommunikation für jedermann.
Nahtlose Integration verschiedener Arten von Multimedia-
Content und Bildmanipulation/-erzeugung (on-the-fly) sind nur
einige von vielen Standardfunktionen. Dazu gehören auch ein
internes Messaging- sowie ein Workflow-
Kommunikationssystem für verteiltes Authoring und
siteübergreifende Kollaboration.
(http://typo3.com/Produkt.1231.0.html?&L=2)
Abbildung 2: Typo3 Logo
Seite 14 von 57
TYPO3 ist ein freies Content-Management-Framework für
Websites, das ursprünglich von Kasper Skårhøj entwickelt
wurde. TYPO3 basiert auf der Skriptsprache PHP. Als
Datenbank kann MySQL, aber auch etwa PostgreSQL oder
Oracle eingesetzt werden.
Zahlreiche Funktionen können mit Erweiterungen integriert
werden, ohne dass eigener Programmcode geschrieben
werden muss. TYPO3 gehört zusammen mit Drupal und
Joomla! zu den bekanntesten Content-Management-Systemen
aus dem Bereich der freien Software.
(http://de.wikipedia.org/wiki/TYPO3)
4.2 Geschichte
Geistiger Vater und ehemaliger Chefprogrammierer von TYPO3
ist der Däne Kasper Skårhøj1. Aktuell ist die Version 4.3.2, die
am 23.2.2010 veröffentlicht wurde. In der Version 4.0 kamen
einige häufig nachgefragte Features, wie zum Beispiel die
Unterstützung von Workspaces, die TemplaVoilà Template
Engine, DBAL eine Datenbankabstraktion, ein neuer Texteditor
und Geschwindigkeitsverbesserungen hinzu.
1 http://de.wikipedia.org/wiki/Kasper_Sk%C3%A5rh%C3%B8j
Seite 15 von 57
4.3 Gestaltungselemente
Gestaltung und Programmierung mit TYPO3 können über
folgende Elemente erfolgen:
• Seitenbaum: Veränderung der Struktur und Eigenschaften der Seiten einer Website
• TYPO3-Konstanten: Universell gültige Parameter
• HTML2-Template: Einfaches HTML-Gerüst mit Markern und Subparts von TYPO3 durch verschiedene Inhalte (Seitennavigation, Texte, Grafiken etc.) ersetzt werden.
• TypoScript-Template: Mit dieser internen Konfigurationssprache wird beschrieben, wie TYPO3 Inhalte ausgeben soll.
• Die Ausgabe von Seiten ist auch ohne HTML-Templates – mit reinem TypoScript-Code – möglich.
• Erweiterungen: Einrichtung zusätzlicher Module
• PHP3: Die TYPO3-Funktionen sind in PHP geschrieben und können von Anwendern, die besondere Zusatzfunktionen realisieren wollen, geändert oder ergänzt werden.
Hervorzuheben ist hierbei die XCLASS Funktionalität, die es
Entwicklern ermöglicht, jede Klasse mit eigenen Funktionen zu
überschreiben. Es werden aber Hooks vorgezogen.
2 http://de.wikipedia.org/wiki/HTML 3 http://de.wikipedia.org/wiki/PHP
Seite 16 von 57
Seite 17 von 57
5 Allgemeines über CMS
Ein Content Management System (CMS)4 ist eine Software, die
hilft, Websites zu erstellen, zu verwalten und alle für das WWW
relevanten Publikationsformate zu handhaben.
5.1 Funktionen und Features
• Strikte Trennung zwischen Layout und Inhalt:
Typo3 macht eine klare Trennung zwischen Inhalten und Layout. Dadurch ist es möglich das gesamte Layout zentral zu ändern, ohne die Inhalte zu modifizieren.
• Personalisierte und browserunabhängige Darstellung des Contents:
Mit Hilfe der Typo3 Template-Maschine lassen sich sehr viele Einstellungen personalisieren. So können Inhalte je nach IP-Adresse, Browser, Betriebssystem usw. bedarfsgerecht mit benutzerdefinierten Parametern ausgeliefert werden.
• Mutlitdomainfähigkeit:
Typo3 ist darauf ausgelegt eine unbegrenzte Zahl unabhängiger Websites innerhalb derselben Installation zu verwalten.
• Versionsmanagement:
Typo3 beinhaltet ein exzellentes Versions - Management. Alle Änderungen werden im Version Management System aufgezeichnet und können mit Hilfe einer "Undo"-Funktion wieder revidiert werden. Somit können die Inhalte mit Hilfe dieser Funktion in den Urzustand zurück versetzt werden.
4 http://de.wikipedia.org/wiki/Content-Management-System
Seite 18 von 57
• Bildbearbeitung und dynamische Grafik-Erzeugung:
In Typo3 werden Bilder nicht "künstlich" verkleinert, sondern entsprechend ihrer Größe skaliert. Endbenutzer brauchen sich weder um Formate, Pixelgrößen noch Dateigrößen zu kümmern. Typo3 sorgt nicht nur für die korrekte sondern auch für eine weboptimierte Darstellung.
• Rechtevergabe und Workflow:
Typo3 hat ein exzellentes Rechtevergabesystem (Permission Management). Die Funktionalität ist stark an Unix orientiert, ohne jedoch die umständliche Bedienung. Die Rechtevergabemöglichkeit geht bis auf Seitenebene. Zugriffsrechte auf einzelne Seiten können Benutzern oder Gruppen zugewiesen werden.
• Sicherheit:
Typo3 unterstützt einen sicheren Datei-Download.
• Innovative Cachingtechnologie:
Typo3 reduziert die Serverlast auf clevere Weise. Nachdem eine Seite erstellt oder verändert wurde, wird sie nur einmal vollständig neu generiert und das Ergebnis in einem Cache zwischengespeichert. Durch dieses integrierte Caching-System werden von TYPO3 generierte Seiten ohne merkliche Zeitverzögerung ausgeliefert.
• Cross Format – Suche
Mit den in Typo3 integrierten Suchfunktionen ist es möglich nicht nur in Textdokumenten zu suchen. Die Volltextsuche erstreckt sich auch auf andere Dokumente wie etwa PDF-Files oder Word / OpenOffice - Dokumente.
Seite 19 von 57
5.2 Erweiterungen
Um TYPO3 zu ändern oder zu ergänzen, werden eigenständige
Programmteile, die Erweiterungen, verwendet. Diese kann der
Anwender im TYPO3-Backend mit Hilfe eines Extension-
Managers direkt aus dem TYPO3 Extension Repository
herunterladen und installieren.
Durch Erweiterungen lassen sich unter anderem die folgenden
Funktionen integrieren:
• ein Nachrichtensystem
• ein modernes Templatingsystem
• ein alternativer Rich-Text-Editor5
• ein Digital Asset Management6 zur Speicherung und
Verwaltung von beliebigen digitalen Inhalten
• Daten über Länder, Sprachen und Währungen
• Shop-Systeme
• eine Frontend-Benutzerregistrierung
• Gästebücher
• Foren
• Bildergalerien
• die Erzeugung menschenlesbarer URLs
• speziell individualisierte Mailformulare
5 http://en.wikipedia.org/wiki/Online_rich-text_editor 6 http://de.wikipedia.org/wiki/Digital-Asset-Management
Seite 20 von 57
6 Arbeiten in Typo3
6.1 Template „Illusion“
Um unserer Seite ein schönes Layout zu geben, entschieden
wir uns ein Template von der Internetseite
http://www.freewebtemplates.com herunterzuladen und mit diesem,
nachdem wir es bearbeitet haben, zu arbeiten. Doch auf dieser
Homepage fanden wir nicht das passende Template und so
suchten wir weiter und wurden auf der Homepage
http://www.freecsstemplates.org
fündig.
Als ersten Schritt besuchten wir die Website
http://www.freecsstemplates.org und wählten den Menüpunkt „CSS
Templates“ aus. Darunter wählten wir das Template „Illusion“
http://www.freecsstemplates.org/preview/illusion. Als zweiten Schritt
luden wir das Template auf unseren Computer hinunter.
Abbildung 3: Original-Template
Seite 21 von 57
6.2 Typo3 installieren
6.3 Einloggen
zB: http://www.pannoneum.asn-bgld.ac.at:8000/~1/typo3
Benutzername und Passwort eingeben, um sich anzumelden.
zB: Benutzername: angelikabesser
Passwort: ihABukaS12
Falls Sie noch keine Logindaten haben:
Benutzername: admin und kein Passwort
Abbildung 4: Login Typo3
Seite 22 von 57
Danach kommen Sie direkt zur Typo3 Seite und können damit
arbeiten.
Abbildung 5: Typo3 Startseite
6.4 Neue Seite erzeugen
Das neue Dokument wird angelegt und das Eingabeformular für
den Dokumentkopf erscheint.
Seite 23 von 57
Abbildung 6: Seiten erstellen
Sie sollten Ihrem Dokument nun einen sinnvollen Namen geben. Im Feld 'Seitentitel' können Sie die Eingabe vornehmen.
Speichern Sie Ihr Dokument indem Sie auf 'Dokument sichern' klicken. Nun ist Ihr neues Dokument bereits im Verzeichnisbaum angelegt und über einen neuen Eintrag im Menü verlinkt. Sie brauchen es lediglich noch mit Inhalt zu füllen.
6.5 Seiteninhalt einfügen
Um neuen Inhalt in das Dokument einzufügen, klicken Sie auf
'Neuer Datensatz'. Jetzt müssen Sie festlegen von welchem
Typ der neue Datensatz sein soll. An dieser Stelle können Sie
IMMER' Normaler Text' auswählen.
Seite 24 von 57
Abbildung 7: Inhalte einfügen
Das Eingabefeld 'Textfeld einfügen' öffnet sich mit dem
integrierten Rich-Text-Editor. Dieser ist recht einfach und
selbsterklärend zu bedienen
Vergessen Sie bitte nicht Ihre Arbeit hin und wieder zu
speichern, am Seitenanfang oder -ende klicken.
Seite 25 von 57
Abbildung 8: Rich-Text-Editor
6.6 Ausloggen
Bitte nicht vergessen! Und damit es nicht so kompliziert wird,
eine ganz einfache Lösung:
Einfach das Symbol in der TYPO3-Symbolleiste
(LINKS) anklicken. FERTIG. Anschließend wird Ihnen erneut
die Login-Seite von TYPO3 angezeigt, die Sie schon vom
'Einloggen' her kennen.
Seite 26 von 57
Abbildung 9: Abmelden
6.7 Extension installieren
Auf http://typo3.org gehen. Dann auf „Extensions“ klicken. Bei
dem Eingabefeld „Search“ die gewünschte Extension eingeben.
Seite 27 von 57
Abbildung 10: Extension Repository
Diese sucht dann nach dieser und zeigt Ihnen alle passenden
Treffer an.
Seite 28 von 57
Abbildung 11: Templa-Voilà
Anschließend wechsle ich wieder zurück zu Typo3 und klicke
links auf „ERW-Manager“ und „Import Extension“. Danach gebe
ich bei „Look up“ die gewünschte Extension ein.
Seite 29 von 57
Abbildung 12: Extension importieren
Ist Ihre Extension vorhanden, klicken Sie bitte auf „Upload
Extension file directly“. Dort klicken Sie auf „Durchsuchen“ und
wählen die Extension aus, die Sie vorher importiert haben.
Seite 30 von 57
Abbildung 13: Extension Upload
Jetzt klicken Sie auf „Upload Extension File“. Nun kommen Sie
in den „Extension Manager“.
Seite 31 von 57
Abbildung 14: Extension Installieren
Jetzt klicken Sie auf „Install Extension“.
Seite 32 von 57
Abbildung 16: Befehlsausgabe Extension
Nun haben Sie ihre Extension erfolgreich installiert ☺
Abbildung 15: Sitemap
Seite 33 von 57
6.8 Fotos hochladen:
Zuerst müssen Sie auf „Dateiliste“ klicken, dann einen „Images“
Ordner erstellen bei Ihrem Template.
Abbildung 17: Zugang fileadmin
Seite 34 von 57
Dann klicken Sie auf Ihren „Images“ Ordner. Danach klicken
Sie auf „Dateien hochladen“ um neue Bilder hochzuladen.
Abbildung 18: Dateiansicht fileadmin
Abbildung 19: Fotos hochladen
In diesen Ordner müssen Sie alle Dateien hochladen, die Sie
auf Ihrer Homepage verwenden möchten.
Seite 35 von 57
6.9 Fotos in eine Seite einfügen
Sie klicken auf Ihre “Seite“ mit dem Dokumenttyp „Text mit
Bild“.
Abbildung 20: Fotos in Seite
Nun klicken Sie in der Kartei Bilder“ und links auf das Zeichen
„Dateien durchblättern“.
Seite 36 von 57
Abbildung 21: Fotos für Seite auswählen
Dort geben Sie den richtigen Pfad für Ihre Bilder an. In unserem
Fall wäre es „templates“ – „images“.
Seite 37 von 57
Abbildung 22: Dateiansicht bei "Inhalt mit Bild"
Hier klicken Sie dann auf Durchsuchen und laden Ihre Bilder
hoch, die sich dann in den „images“ Ordner befinden.
Seite 38 von 57
Abbildung 23: Fotos für Inhalt hochladen
Seite 39 von 57
7 verwendete Extensions
Zur einwandfreien Nutzung unserer Website inklusive aller
Applikationen, wie z.B. das Gästebuch, sind natürlich
Extensions notwendig. Wie man diese installiert wird unter
5.7 Templates installieren näher erklärt.
7.1 MJS Event Pro
Dies ist ein Kalender, der jedoch keine einzelnen
Kalenderblätter anzeigt, sondern nur die gewünschten Events
und Termine.
Abbildung 24: MJS Event Pro
Seite 40 von 57
Er wird als Plug-In auf die Seite eingebunden, die verwendeten
Kalenderdaten werden in einem Sys-Ordner zur Verfügung
gestellt. Als Ausgangspunkt des Plug-Ins muss somit der Sys-
Ordner (in unserem Beispiel Kalenderdaten) angegeben
werden.
Abbildung 25: Anzeigen von Kalender
In unserem Beispiel gibt es zusätzlich eine Archiv-Funktion.
Dadurch lassen sich bereits vergangene Termine auf einer
Unterseite anzeigen. Um diesen Link auf der Seite „Kalender“
anzuzeigen erstellt man die Seite „Archiv“ als Unterseite. Auf
der Seite selbst wird ein Menü der Unterseiten angezeigt:
Seite 41 von 57
Auf der Seite „Archiv“ wird nochmals wie oben erklärt das Plug-
In eingefügt, wobei der Ausgangspunkt der Sys-Ordner
„Kalenderdaten“ ist. Damit nun die vergangenen Termine nicht
mit den aktuellen verwechselt werden wird ein zweiter Sys-
Ordner mit der Bezeichnung „Archiv“ erstellt.
Auf der Seite „Kalender“ muss nun im Constant-Editor die
Archiv-PID7 angeben werden . Diese ist die ID des Sys-
Ordners „Archiv“:
7 Archiv Packetidentifier
Abbildung 26: Ansicht der Inhalte
Seite 42 von 57
Abbildung 27: Archiv-PID
7.2 Erstellen von Kalendereinträgen
Um nun Kalenderdaten zu erstellen wählt man die Ansicht
„Liste“ und dann den Sys-Ordner. Durch einen Klick auf das
Symbol oder auf „Neuen Datensatz erstellen“ gelangt man zum
Editor:
Abbildung 28: neue Kalenderdaten
Hier können nun alle Einstellungen und Informationen, die
angezeigt werden sollen, eingeben werden. Wichtig dabei ist
Seite 43 von 57
es, Beginn und Ende anzugeben weil damit auch die
Archivfunktion arbeitet.
7.3 Guestbook
Mit dem Gästebuch können Besucher der Website
Kommentare hinterlassen, welche auch auf einer Seite
angezeigt werden können. Das Formular und die Liste der
ausgegebenen Kommentare müssen jedoch separat als Plug-In
eingefügt werden (ähnlich wie beim Kalender mit der Archiv-
Funktion).
Abbildung 29: Gästebuch
Seite 44 von 57
Abbildung 30: Formular einfügen
Das erste Plug-In soll die Funktion „FORM“ anzeigen, was
bedeutet, dass dies das Formular für einen Kommentar ist. In
der Registerkarte „Formular“ können die Pflichtfelder
ausgewählt werden. Außerdem gibt es hier die Möglichkeit,
Einträge manuell freizugeben.
Das zweite Plug-In (in unserem Beispiel auf derselben Seite,
damit die Kommentare gleich darunter ausgegeben werden)
soll die Funktion „LIST“ anzeigen. Als Ausgangspunkt wird die
Seite „Gästebuch“ gewählt.
Im Falle einer manuellen Freigabe von Einträgen lassen sich
diese in der Listenansicht sichtbar machen. Dazu klickt man
rechts auf das Symbol neben dem Eintrag und wählt das
gewünschte aus.
Seite 45 von 57
Abbildung 31: Einträge sichtbar machen
7.4 Smooth Gallery
Smooth Gallery ist eine simple und einfache Slideshow, die
verwendet wird um Bilder, die auf „fileadmin“ hochgeladen
wurden8, als eine Diashow darzustellen.
Es wird wie der Kalender oder das Gästebuch als Plug-In
eingefügt:
8 Kapitel 5.8 Fotos hochladen
Seite 46 von 57
Abbildung 32: Dateipfad für Slideshow
Dabei ist es wichtig den Pfad korrekt anzugeben (wie oben
abgebildet) und die Galerie- bzw. Bildbreite richtig einzustellen.
Am idealsten skaliert man die Bilder alle auf die selbe Größe.
Ist dies aber nicht möglich, sollte man das größte Bild als
Größenwert angeben. Die Galeriegröße sollte immer etwas
größer sein als das größte Bild.
7.5 Templa-Voilà
Diese Extension wird zum importieren von css- bzw. xhtml-
Templates in Typo3 verwendet. Als erstes erstellt man das
Template ohne Inhalte. Dieses wird dann upgeloadet
(„fileadmin/templates“). Hierbei ist auf die richtige Ordnung der
Dateien und Ordner zu achten! (index.html und css-Datei
Seite 47 von 57
sollten beide im gleichen Ordner sein, eigener Ordner „images“
etc.)
ACHTUNG: Möchte man auch Seiten mit mehrspaltigen
Inhalten anlegen, wie in unserem Beispiel, sollte man ein
eigenes Template mit 2 Spalten vorbereiten und auch dieses
gleich uploaden („fileadmin/templates2“).
Abbildung 33: Templa-Voilà
Hat man Templa-Voilà bereits installiert kann man es in der
Navigation auswählen worauf man automatisch zum oben
gezeigten Bildschirm wechselt. Unter dem Text befindet sich
der Button „Start Wizzard now!“.
Diesen angeklickt gelangt man zu diesem Bildschirm. Hier klickt
man beim gewünschten Template auf „Choose as Template“.
Damit wird man zu dieser Ansicht weitergeleitet:
Abbildung 34: Template auswählen
Seite 48 von 57
Abbildung 35: Seite erstellen
Hier gibt man nun den Namen der Website und den Namen des
Webdesigners an. Nach einem Klick auf „Create new site“ und
danach „Start mapping process“ gelangt man hierher:
Seite 49 von 57
Abbildung 36: Mapping-Process
Nun müssen alle Bestandteile „gemappt“ werden. Dazu klickt
man beim gewünschten Bereich auf „Map“ und erhält folgenden
Bildschirm:
Seite 50 von 57
Abbildung 37: Bestandteile mappen
Da wir hier den Bereich für „Main Content“ angeben sollen
wählen wir den Bereich <div id=“content“>. Anschließend im
nächsten Bildschirm auf „Set“ klicken und schon weiß Templa-
Voilà wo er die Seiteninhalte hinsetzen muss. Das gleiche lässt
sich mit dem Menü durchführen, wobei man hierbei auch das
Menü auswählen muss. Ein Sub-Menu ist optional, nicht jedes
Template enthält eines. Wenn keines vorhanden ist, lässt man
diesen Mapping-Bereich leer.
Durch einen Klick auf „Save and Return“ gelangt man zum
Kontrollbildschirm auf dem nur noch „write main menu
TypoScript code“ klicken muss um das Mapping zu beenden.
Die Menüseiten haben jetzt noch Standartnamen, welche ganz
einfach wie jede andere Seite umbenannt werden können. Das
Seite 51 von 57
Menü stellt sich nach der Anzahl der Unterseiten automatisch
um.
ACHTUNG: Man sollte schon im Vorhinein wissen, wie viele
Menüpunkte es geben soll und diese auch im Template selbst
berücksichtigen, bevor man mit Templa-Voilà importiert.
Seite 52 von 57
8 Homepage
8.1 Home
Abbildung 38: Seite "Home"
Auf der eigentlichen Homepage ist ein allgemeiner Info-Text
ersichtlich. Beim ansurfen von http://muehle.pannoneum.at wird
man automatisch auf diese Seite geleitet. Es gibt die
Menüpunkte „Home“, „Speisekarte“; „Kalender“; „Gästebuch“,
„Bildergalerie“ und „Kontakt“. Im Header befindet sich eine
Slideshow, die aus drei zusammengeführten Bildern besteht.
Rechts von der Slideshow wurde ein Standbild eingefügt und im
rechten Bereich der Seite sieht man das Logo unseres
Auftraggebers.
Seite 53 von 57
8.2 Speisekarte
Abbildung 39: Seite "Speisekarte"
Die Seite „Speisekarte“ enthält allgemeine Informationen zum
Speisenangebot. Man hat auch die Möglichkeit, die gesamte
Speisekarte als PDF-Datei herunterzuladen.
8.3 Kalender
Abbildung 40: Seite "Kalender"
Seite 54 von 57
Um einen Kalender in unserer Website einzubinden,
verwendeten wir die Extension „MJS Event Pro“. Um diese
Seite benutzerfreundlich darzustellen wurde eine zweispaltiges
Template verwendet. Auf der linken Seite sind die zukünftigen
Veranstaltungen mit den dazugehörigen Links und das Archiv
(Übersicht über vergangene Veranstaltungen; Unterseite von
„Kalender“) ersichtlich. Rechts hat man einen Überblick über
das wöchentliche Angebot. Außerdem wurde noch ein Bild
eingefügt.
8.4 Gästebuch
Abbildung 41: Seite "Gästebuch"
Das Gästebuch wurde ebenso wie die Kalenderseite
zweispaltig angelegt. Auf der linken Seite wurde das Gästebuch
integriert, wobei zuerst das Formular und danach die Liste mit
den bisherigen Einträgen freigegeben wurde. Alle Einträge, die
im Gästebuch getätigt werden, müssen manuell freigegeben
Seite 55 von 57
werden. Die rechte Seite wurde abermals für das Einfügen
eines Bildes verwendet.
8.5 Bildergalerie
Abbildung 42: Seite "Bildergalerie"
Auf der Seite „Bildergalerie“ hat man die Möglichkeit Fotos
verschiedenster Events zu betrachten. Alle Bilder werden in
einer Slideshow, welche den Namen „Smooth Gallery“ trägt,
angezeigt.
Seite 56 von 57
8.6 Kontakt
Abbildung 43: Seite "Kontakt"
Auf der Kontaktseite sind die Kontaktdaten und das Impressum
vorzufinden. Diese Seite wurde ebenfalls zweispaltig angelegt,
da die rechte Seite wieder für das Einfügen eines Bildes
verwendet wurde. Um den Standort des Lokales zu zeigen,
wurde Google Maps mit Hilfe des Einbettens in die Seite
eingebunden.
Seite 57 von 57
9 Quellenverzeichnis
http://www.freewebtemplates.com/templates/xhtml-css/2
http://www.freecsstemplates.org/
http://www.freecsstemplates.org/preview/illusion
www.internet4jurists.at
http://www.bretteleben.de/lang-de/javascript/slideshow/-slideshow-beispiel-
02.html
http://www.jackysmuehle.at/
www.typo3.org
http://www.sk-typo3.de/Einrichtung-vom-Kalender-Calendar.174.0.html
http://www.tanmar.info/content/view/55/62/
http://www.start-to-web.ch/uploads/pics/logo_typo3.jpg
http://typo3.com/Produkt.1231.0.html?&L=2
http://de.wikipedia.org/wiki/TYPO3
http://typo3.com/Was-ist-ein-CMS.1351.0.html?&L=2
HTTP://WWW.24IX.DE/PRODUKTE/TYPO3/FUNKTIONEN.HTML)