Website von Jacky's Mühle

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





“ in Gols zu gestalten. Mit Angelika Besser als

eiterin, Patrick Fleck und Marco Laubner als



Arbeit war, die im Unterricht erlernten Fähigkeiten und




da dieses in seiner Handhabung relativ simpel ist, und auch von

ezialisten optimal verwendet werden kann


Projektauftraggebers zu gestalten und zu optimieren.


: Jacky's Mühle

Seite 6 von 57





“ in Gols zu gestalten. Mit Angelika Besser als

Patrick Fleck und Marco Laubner als



n Fähigkeiten und




, und auch von

ezialisten optimal verwendet werden kann. Wir


Projektauftraggebers zu gestalten und zu optimieren. Denn die


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)

Date post:	07-Mar-2016
Category:	Documents
Upload:	patrick-fleck
View:	226 times
Download:	3 times

Website von Jacky's Mühle

Documents