Issuu on Google+

Fachspezifische Themenstellung aus Information & Communication Solutions Content Management System „Typo3“

Projektleiter:

Angelika Besser

Projetmitglieder:

Patrick Fleck Marco Laubner


Inhaltsverzeichnis Inhaltsverzeichnis ..................................................................... 2 1

Abbildungsverzeichnis ........................................................ 4

2

Vorwort ............................................................................... 6

3

Projektmanagement ............................................................ 8

4

5

6

3.1

Projektstrukturplan...................................................... 8

3.2

Arbeitspakete ............................................................. 9

3.3

Meilensteinplan ........................................................ 12

Allgemeines über Typo3 ................................................... 13 4.1

Grundlegendes ......................................................... 13

4.2

Geschichte ............................................................... 14

4.3

Gestaltungselemente................................................ 15

Allgemeines über CMS ..................................................... 17 5.1

Funktionen und Features .......................................... 17

5.2

Erweiterungen .......................................................... 19

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 2 von 57


7

8

9

6.7

Extension installieren................................................ 26

6.8

Fotos hochladen: ...................................................... 33

6.9

Fotos in eine Seite einfügen ..................................... 35

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

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

Quellenverzeichnis ........................................................... 57

Seite 3 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 4 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

Seite 5 von 57


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, 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 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, ist, und auch von Nicht-Spezialisten ezialisten

optimal

verwendet

werden

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

Abbildung 1:: Jacky's Mühle

Seite 6 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 7 von 57


3 Projektmanagement 3.1 Projektstrukturplan Homepage „Jacky’s Mühle“

Projektmanagement

Daten erheben

Template bearbeiten

Extensions Typo3

Inhalte einfügen

Projektabschluss

1

2

3

4

5

6

Projektstart 1.1

Mündlich erheben 2.1

Projektkoordination 1.2

Schriftlich

Template planen 3.1

Template suchen 3.2

TemplaVoila 4.1

News 4.2

Datenformate wähle

Website

5.1

veröffentlichen 6.1

Inhalte einfügen 5.2

Website präsentieren 6.2

aufzeichnen 2.2 Projektcontrolling

1.3

Nach Navigation

Template ändern 3.3

CalendarBase 4.3

ordnen 2.3 Projektabschluss

1.4

Zusammenfassen 2.4

Template anpassen

Guestbook 4.4

(Navigation,…) 3.4 Fotos machen 2.5

Template in Typo3

Inhalte nachbearbeite

Funktionen an

5.3

Auftragg. erklären 6.3 Evtl. nachbearbeite 6.4

FlashSlideshow 4.5

Websiteübergabe 6.5

übertragen 3.5

Fotos bearbeiten 2.6

Evt. Template nachbearbeiten 3.6

GoogleMap 4.6

Seite 8 von 57


3.2Arbeitspakete Verantwortlich

Zeitraum

Ressourcen

Inhalte

B, F, L

22.9.2009

Laptop. Projektteam,

Brainstorming

Nicht-Inhalte

1 Projektmanagement Projektstart 1.1

Pläne (MindMap)

Projektkoordination 1.2

Projektcontrolling 1.3

B

B

noch

Projektpläne,

Besprechungen,

andauernd

Strukturen, Skizzen,

Analysieren,

Arbeitseinteilungen

Diskussion

Konflikte

noch

Laptop, Mitschriften

Kontrolle des

wenn etwas falsch läuft

andauernd

(was bereits gemacht

Projektprozesses

verheimlichen

Laptop (online, digital

Das gesamte

wenn Abgabe zu spät

abgeben)

Projekt

oder gar nicht erfolgt

immer wieder

Mit Auftraggeber

keine falsche Angaben

während des

über Daten

veröffentlichen, nichts

Projektes

sprechen

veröffentlichen was nicht

(Veröffentlichung,

abgesprochen wurde

wurde, Checkliste)

Projektabschluss 1.4

B, F, L

08.4.2010

2 Daten erheben mündlich erheben 2.1

B, F, L

Quellen, Recht) schriftlich erheben 2.2

B

immer wieder

Laptop, Notizblöcke,

Mit Auftraggeber

keine falsche Angaben

während des

Schreibutensilien

über Daten

veröffentlichen, nichts

sprechen

veröffentlichen was nicht

(Veröffentlichung,

abgesprochen wurde

Projektes

Quellen, Recht) nach Navigation ordnen 2.3

Zusammenfassen 2.4

F

B

Oktober 09

rund um die

Laptop, typo3

Laptop, Notizen

Uhr

Die Navigation der

keine willkürliche

Website

Navigation sondern eine

bestimmen

strukturierte

Alle wichtigen

Unwichtiges weglassen,

Arbeitsschritte im

keine Wiederholungen

Laufe des Projekts zusammenfassen Fotos machen 2.5

L

Jänner 10

Digitalkamera, Fotos

Fotos gesammelt,

keine unerlaubten Bilder

die zur

selbst erstellt

veröffentlichen

Veröffentlichung bereitgestellt wurden Fotos bearbeiten

B, L

Jänner 10

Gimp, Photoshop,

Fotos

evtl. Paint

retuschieren,

zu große Fotos

Webtauglich machen

Seite 9 von 57


3 Template bearbeiten Template planen 3.1

F

Oktober 09

Skizzen,

geeignetes

völlig unpassendes und

Vorstellungen

Template für Seite

unstrukturiertes Template

planen Template suchen 3.2

B, F, L

Oktober 09

Internet, Laptop

geeignetes

völlig unpassendes und

Template für Seite

unstrukturiertes Template

suchen Template ändern 3.3

F

Während des

Internet (evtl.

gesamten

Anleitungen), Laptop

Projektes

Template perfekt

schlecht oder nicht

abstimmen,

abgeändertes Template,

Corporate Design

kein Corporate Design

Template perfekt

schlecht oder nicht

abstimmen,

abgeändertes Template,

Corporate Design,

kein Corporate Design

immer wieder kleine Änderungen Template anpassen 3.4

F

Während des

Internet (evtl.

gesamten

Anleitungen), Laptop

Projektes immer wieder

Navigation

kleine

sinnvoll einbinden

Änderungen Template in typo3 übertragen

F

November 09

3.5

Internet, typo3,

Das in html

Templavoila (typo3

veränderte

Extension)

Template mit Hilfe von Templavoila in typo3 übertragen

evtl. Template nachbearbeiten

B, F, L

durchgehend

3.6

Internet, typo3,

Template so

Templavoila (typo3

nachbearbeiten,

Extension)

dass alles

keine Nachbearbeitung

ineinander fließt

4 Extensions typo3 TemplaVoila 4.1

F

November 09

typo3, Laptop,

die Extension

Internet,

TemplaVoila für unseren Template Upload installieren

News 4.2

CalendarBase 4.3

L

F

Oktober 09

Dezember 09

typo3, Laptop,

Extension News

Internet,

installiert

typo3, Laptop,

CalendaBase für

Internet,

das Einbinden eines Veranstaltungskal enders installiert

Guestbook 4.4

B

Dezember 09

typo3, Laptop,

die Guestbook

Internet,

Erweiterung für das Einbinden eines Gästebuchs installiert

Seite 10 von 57


FlashSlideshow 4.5

F

Dezember 09

typo3, Laptop,

eine Slideshow

Slideshow nicht

Internet,

durch Erweiterung

willkürlich einbinden,

in Die Seite

dorthin wo sie auch

„Bildergalerie“

hinpasst

eingebunden Google Maps 4.6

L

Dezember 09,

typo3, Laptop,

Jänner 10

Internet, Google

GoogleMaps in die Seite Kontakt einbinden, soll als Anfahrtsplan dienen

5 Inhalte einfügen Datenformate wählen 5.1

L

Die richtigen

Keine Datenformate

wenn der Inhalt

zum Zeitpunkt

typo3, Laptop, Internet

Datenformate für

wählen welche nicht zum

eingefügt wird

die Seiteninhalte

Seiteninhalt passen

wählen Inhalte einfügen 5.2

L, B

immer wieder

typo3, Laptop, Internet

aktualisieren

Die besprochenen

keine unerlaubten Inhalte

und abgesegneten

einfügen

Inhalte in die jeweiligen Seiten einfügen Inhalte nachbearbeiten 5.3

B, F, L,

während des

Auftraggeber/in

typo3, PC, Internet

bei Änderungen

Website nicht veralten

gesamten

kann der Inhalt

lassen

Website

immer wieder

Betriebes

verändert und/oder neu eingefügt werden

6 Projektabschluss Webseite veröffentlichen 6.1

B, F, L

März 10

typo3, PC, Internet,

Die fertiggestellte

Webspace

Webseite, im

kein Webspace

Internet mit geeignetem Webspace veröffentlichen Webseite präsentieren 6.2

B, F, L

Juni 10

Fachwissen, Internet,

Bei der mündl.

Laptop/PC, typo3

Matura Webseite

kein Projekt vorhanden

Fachwissen, Internet,

Dem Auftraggeber

wenn man die Webseite

den Umgang mit

ohne Erklärung übergibt

präsentieren Auftraggeber Homepage

B, F, L

März/April 10

erklären 6.3

Laptop/PC, typo3

der Seite erklären Websiteübergabe 6.4

B, F, L

März/April 10

Internet, Laptop/PC,

Dem Auftraggeber

wenn Projekt fertig,

typo3

die fertiggestellte

jedoch keine Übergabe

Webseite

erfolgt

übergeben

Seite 11 von 57


3.3 PSP

Meilensteinplan

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

Code

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 12 von 57


4 Allgemeines über Typo3 Abbildung 2: Typo3 Logo

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 MultimediaContent und Bildmanipulation/-erzeugung (on-the-fly) sind nur einige von vielen Standardfunktionen. Dazu gehören auch ein internes

Messaging-

Kommunikationssystem

sowie für

verteiltes

ein

Workflow-

Authoring

und

siteübergreifende Kollaboration. (http://typo3.com/Produkt.1231.0.html?&L=2)

Seite 13 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.2Geschichte 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 14 von 57


4.3Gestaltungselemente 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 3

http://de.wikipedia.org/wiki/HTML http://de.wikipedia.org/wiki/PHP

Seite 15 von 57


Seite 16 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 17 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 18 von 57


5.2Erweiterungen 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 ExtensionManagers 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 •

5 6

speziell individualisierte Mailformulare

http://en.wikipedia.org/wiki/Online_rich-text_editor http://de.wikipedia.org/wiki/Digital-Asset-Management

Seite 19 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

besuchten

wir

der

Homepage

http://www.freecsstemplates.org

fündig. Als

ersten

Schritt

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 20 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 21 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 22 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 23 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 24 von 57


Abbildung 8: Rich-Text-Editor

6.6

Ausloggen

Bitte nicht vergessen! Und damit es nicht so kompliziert wird, eine

ganz

Einfach das Symbol

einfache

Lรถsung:

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 25 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 26 von 57


Abbildung 10: Extension Repository

Diese sucht dann nach dieser und zeigt Ihnen alle passenden Treffer an.

Seite 27 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 28 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 29 von 57


Abbildung 13: Extension Upload

Jetzt klicken Sie auf „Upload Extension File“. Nun kommen Sie in den „Extension Manager“.

Seite 30 von 57


Abbildung 14: Extension Installieren

Jetzt klicken Sie auf „Install Extension“.

Seite 31 von 57


Abbildung 16: Befehlsausgabe Extension

Nun haben Sie ihre Extension erfolgreich installiert â˜ş

Abbildung 15: Sitemap

Seite 32 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 33 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 34 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 35 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 36 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 37 von 57


Abbildung 23: Fotos f端r Inhalt hochladen

Seite 38 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 39 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 SysOrdner (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 40 von 57


Abbildung 26: Ansicht der Inhalte

Auf der Seite „Archiv“ wird nochmals wie oben erklärt das PlugIn eingefügt, wobei der Ausgangspunkt der Sys-Ordner „Kalenderdaten“ ist. Damit nun die vergangenen Termine nicht mit den aktuellen verwechselt werden wird ein zweiter SysOrdner 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

Seite 41 von 57


Abbildung 27: Archiv-PID

7.2Erstellen 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 42 von 57


es, Beginn und Ende anzugeben weil damit auch die Archivfunktion arbeitet.

7.3Guestbook 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 ArchivFunktion).

Abbildung 29: Gästebuch

Seite 43 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 44 von 57


Abbildung 31: Einträge sichtbar machen

7.4Smooth 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 45 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.5Templa-Voilà Diese Extension wird zum importieren von css- bzw. xhtmlTemplates 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 46 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!“.

Abbildung 34: Template auswählen

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:

Seite 47 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 48 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 49 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ß TemplaVoilà 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 50 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 51 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 52 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 53 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 54 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 55 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 56 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-beispiel02.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)

Seite 57 von 57


Website von Jacky's Mühle