CMH Music Solution

Fachspezifische Themen-stellung

PANNNONEUM

Angelika Reeh & Carina Sattler16.03.2012

Maturaprojekt CMH

Angelika Reeh Seite 1/55

Carina Sattler

Inhaltsverzeichnis1 Vorwort.........................................................................5

1.1 Abstract....................................................................6

2 Projektmanagement .......................................................7

2.1 Definieren der Ziele und Nicht-Ziele .............................7

2.1.1 Arbeitspakete ....................................................7

2.1.2 Meilenstein 2: Unterlagen gesammelt ...................8

2.1.2.1 Meilenstein 3: Logo entworfen ........................ 10

2.2 Verfügbare Ressourcen............................................. 12

2.3 Zeitliche Abgrenzung................................................ 12

2.4 Corporate Design..................................................... 13

2.5 Projektwürdigkeitsanalyse......................................... 14

2.6 Durchführbarkeitsanalyse ......................................... 15

2.7 Übersichtsplan......................................................... 16

2.8 ER-Diagramme........................................................ 17

Abbildung 3 ER-Diagramm .................................................. 17

2.9 Meilensteinliste........................................................ 18

2.10 Dokumentieren unserer Arbeit ................................ 20

3 Grundlagen.................................................................. 21

3.1 Was ist ein CMS? ..................................................... 21

3.1.1 Was ist das Frontend?....................................... 22

3.1.2 Was ist das Backend? ....................................... 23

3.1.3 Die Benutzeroberfläche ..................................... 25

3.1.3.1 Aufbau-Allgemein.......................................... 25

4 Erstellen von Seiten/Unterseiten .................................... 26

5 Neues Element anlegen................................................. 28

5.1 Allgemeines Plug-In einfügen .................................... 29

5.2 Nutzen ................................................................... 29

5.3 Entstehung ............................................................. 30

5.4 Template ................................................................ 31

5.4.1 Logo............................................................... 32

Maturaprojekt CMH


Carina Sattler

6 Extensions................................................................... 33

6.1 TemplaVoilá Hochladen............................................. 33

6.2 Gästebuch installieren .............................................. 35

6.3 Terminkalender ....................................................... 36

6.4 Import und Installation des News-Moduls ................... 38

Plug-In auswählen ........................................................ 41

7 Youtube-Video einbinden............................................... 42

8 Intro erstellen.............................................................. 45

8.1 Was ist Adobe Flash Professional CS5.5? .................... 46

9 GIMP ..................................................................... 47

9.1 Was ist GIMP? ......................................................... 47

10 Homepage/Seiten ...................................................... 49

11 Nachwort.................................................................. 53

12 Literaturverzeichnis ................................................... 54

Maturaprojekt CMH


Carina Sattler

AbbildungsverzeichnisAbbildung 1 Projektumweltanalyse _________________________________________________ 11

Abbildung 2 Übersichtsplan ____________________________________________________ 16

Abbildung 3 ER-Diagramm________________________________________________________ 17

Abbildung 4 Tagebuch ___________________________________________________________ 20

Abbildung 5 Frontend____________________________________________________________ 22

Abbildung 6 Anmeldung__________________________________________________________ 23

Abbildung 7 Anmeldung Backend __________________________________________________ 24

Abbildung 8 Admin ______________________________________________________________ 24

Abbildung 9 Benutzeroberfläche ___________________________________________________ 25

Abbildung 10 Benutzerleiste ______________________________________________________ 25

Abbildung 11-Seite ______________________________________________________________ 27

Abbildung 12 Neue Seite anlegen __________________________________________________ 27

Abbildung 13 Neuer Datensatz ____________________________________________________ 27

Abbildung 23 Neues Element anlegen _______________________________________________ 28

Abbildung 24 Plug-In ____________________________________________________________ 29

Abbildung 14 Template __________________________________________________________ 31

Abbildung 15 Logo ______________________________________________________________ 32

Abbildung 16 Download extension _________________________________________________ 33

Abbildung 17 Extension hochladen _________________________________________________ 33

Abbildung 18 TemplaVoilà ________________________________________________________ 34

Abbildung 19 Erweiterungen ______________________________________________________ 35

Abbildung 20 Simple Calendar _____________________________________________________ 36

Abbildung 21 Download extension calendar __________________________________________ 36

Abbildung 22 Erweiterung importieren ______________________________________________ 37

Abbildung 25 Plug-In einfügen_____________________________________________________ 41

Abbildung 26 Video einbinden _____________________________________________________ 42

Abbildung 27 HTML _____________________________________________________________ 42

Abbildung 28 HTML Code_________________________________________________________ 43

Abbildung 29 HTML-Code einfügen _________________________________________________ 44

Abbildung 30 Videos_____________________________________________________________ 44

Abbildung 31 Intro ______________________________________________________________ 45

Abbildung 32 Adobe Flash ________________________________________________________ 45

Abbildung 33 Flash Professional ___________________________________________________ 46

Abbildung 34 Flash Professional 1 __________________________________________________ 46

Maturaprojekt CMH


Carina Sattler

Abbildung 35 Gimp______________________________________________________________ 47

Abbildung 36 Gimp Werkzeuge ____________________________________________________ 48

Abbildung 37-Home _____________________________________________________________ 49

Abbildung 38-Intro ______________________________________________________________ 49

Abbildung 39-News _____________________________________________________________ 50

Abbildung 40-Termine ___________________________________________________________ 50

Abbildung 41-Gästebuch _________________________________________________________ 51

Abbildung 42-Bildergalerie________________________________________________________ 51

Abbildung 43-Kontakt ___________________________________________________________ 52

Abbildung 44-Höhrbeispiele_______________________________________________________ 52

Maturaprojekt CMH


Carina Sattler

1 Vorwort

Im Rahmen unseres Ausbildungsschwerpunkts „Information and

Communication Solutions“ erarbeiteten wir für mehrere Musik-

gruppen eine Vermittlungsstelle, ein Konzept für einen professio-

nellen Webauftritt mit dynamischen Datenbankanbindungen.

Unser Ziel war es, eine Homepage mit erweiterten Funktionen zu

erstellen.

Unsere Auftraggeber hatten den Wunsch nach einer dynami-

schen Website geäußert.

Die Website sollte die Möglichkeit stellen, Kunden über die aktu-

ellen Termine zu informieren und zugleich dazu dienen eine der

Musikgruppen zu buchen.

Mit unserem erlernten Wissen und der fachmännischen Unter-

stützung unserer Professoren kreierten wir eine informative und

innovative Website.

Wir hoffen, das Ergebnis unseres Projektes entspricht der Vor-

stellung unseres Auftragsgebers.

Auf den folgenden Seiten finden Sie eine genaue Dokumentation

unserer Arbeit.

Maturaprojekt CMH


Carina Sattler

1.1 Abstract

Within the scope of our main subject „Information and Commu-

nication Solutions“ we acquired a concept of a professional web

appearance using dynamic databases for our Website “CMH-

Music Solution”.

We aimed to make a homepage with extended functions.

This was necessary because there exists no page. Mr. Thell ut-

tered the wish for a homepage with dynamic sites.

The website should give the opportunity for interested people to

look for bands and book them.

With our knowledge and the help of the teachers we created an

informational and innovative website.

We hope that the result of our project appropriate the ex-

pectations of our principals.

On the next pages you will find the exact documentation of our

work.

Maturaprojekt CMH


Carina Sattler

2 Projektmanagement

Ein großer und wichtiger Teil des Projekts besteht aus exakter

Planung.

Die Planung beinhaltet die Festsetzung der Ziele und Nicht-Ziele,

die Erstellung von Meilensteinen und Arbeitspaketen, sowie die

Zeiteinteilung.

2.1 Definieren der Ziele und Nicht-Ziele

2.1.1Arbeitspakete

Meilenstein 1:

Projektplanung ist abgeschlossen

AP1.1:

Ziele:

Firma gesucht

Kontakt mit den Auftraggeber aufgenommen

auf ein Konzept einigen

Ideen und Vorschläge ausarbeiten

Corporate Design (Layout, Text, Schriftart..) für die Websi-

te erstellen

Maturaprojekt CMH


Carina Sattler

AP1.2:

Ziele:

Layout festgelegen:

eleganten Stil

Farben des Logos festgelegt

Schriftart

Farben für Homepage festlegen

Ideen mit Auftraggeber besprechen/einverstanden

Nichtziel: keine Ideen, Unklarheit , keine Übereinstimmung

mit dem Auftraggeber

Verantwortlicher: Reeh Angelika

Benötigte Ressourcen: Laptop, Software..

Beginn und Ende: 8.September-13.Oktober

2.1.2 Meilenstein 2: Unterlagen gesammelt

AP2.1:

Ziele:

Texte erstellen

Texte umschreiben- bearbeiten

Personenbeschreibung

Texte richtigstellen

Maturaprojekt CMH


Carina Sattler

AP2.2:

Bilder bearbeiten (Kontrast..)

viele Bilder

Absprache mit dem Auftraggeber

Nichtziele: keine oder falsche Texte, unscharfe Bilder

Verantwortliche: Carina Sattler

Benötigte Ressourcen: Laptop, Kamera, Software, Auf-

traggeber

Beginn und Ende: 6.Oktober-3.November

Maturaprojekt CMH


Carina Sattler

2.1.2.1 Meilenstein 3: Logo entworfen

AP3.1.:

Farben für Logo gewählt

Logo gezeichnet

AP3.2.:

Logo bei GIMP erstellt

Logo digitalisiert

Logo dem Auftraggeber gezeigt/einverstanden

Nichtziele:

Dass der Auftraggeber mit dem Ergebnis nicht einverstanden ist

Das die Farben des Logos unpassend sind

Verantwortliche: Reeh Angelika

Benötigte Ressource: Stifte ,Papier, Software, Auftraggeber

Beginn und Ende : 6.Oktober-17.November 2.2 Projektum-

weltanalyse

Maturaprojekt CMH


Carina Sattler

CMHBesucher

überzeugen

+

Musikgruppen bekannter

machen +

neue Interessenten

gewinnen +

Projektteamvon der Konkurrenz

abweichen +

Interessenten animieren

Musikgruppe zu buchen

Abbildung 1 Projektumweltanalyse

Maturaprojekt CMH


Carina Sattler

2.2 Verfügbare Ressourcen

Team:

Projektleiter: Reeh Angelika

Projektmitarbeiter: Carina Sattler

Ressourcen:

Notebook

Internet

Know-how

TYPO3

GIMP

phpMyadmin

2.3 Zeitliche Abgrenzung

Projektstart: 8.September.2011

Projektende: 30.März.2012

Maturaprojekt CMH


Carina Sattler

2.4 Corporate Design

Zielgruppe: Jugendliche und Erwachsene, die eine Musikgruppe

für eine Veranstaltung buchen wollen

Bilder: Viele Bilder

Schrift: Arial, Verdana, Tahoma

Farben: Schriftfarben: weiß, grau, dunkelrot

Hintergrundfarbe der Website:

dunkelrot = RGB-Code: 400a0a

Seitenfarbe Website:

grau = RGB-Code: 99836c

Maturaprojekt CMH


Carina Sattler

2.5 Projektwürdigkeitsanalyse

Mit Hilfe dieser Tabelle stellt man fest, ob es wür-

dig ist dieses Projekt durchzuführen oder nicht.

Man bewertet die verschiedenen Kriterien, die für

die Durchführbarkeit benötigt werden und ent-

scheidet man, ob sich der Aufwand lohnt.

Kriterium Hoch Mittel Niedrig Begründung

Neuartigkeit Homepage war nicht vorhan-

den.

Inhaltlich

komplex

Ja, da die Homepage dynami-

sche Elemente enthält.

Ressourcen-

aufwand

Die meisten Ressourcen sind

bereits vorhanden

Strategisch

bedeutsam

Zukünftig mehr Auftritt für

Musikgruppen gewinnen

Risikoreich bei interessanter Homepa-

gemehr Auftritte/Buchungen

der Musikgruppe

Maturaprojekt CMH


Carina Sattler

2.6 Durchführbarkeitsanalyse

Bereiche Mögliche

Fragen

Ja/Nein Bemerkung

Personalres-

sourcen

Sind die not-

wendigen Per-

sonalressour-

cen vorhan-

den?

Es gibt zwei Personen,

die aktiv am Projekt

mitarbeiten.

Finanzelle

Ressourcen

Wird das not-

wendige Pro-

jektbudget

vorhanden

sein?

ja, es wird vorhanden

sein.

Zeitliche

Ressourcen

Ist das geplan-

te Ziel zeitlich

erreichbar?

ja, es steht genug Zeit

zur Verfügung um am

Projekt zu arbeiten

Know-How

in Unterneh-

men

Haben wir im

Unternehmen

das notwendige

Know-how, um

das Projekt

umzusetzen?

ja, während des Unter-

richts lernt man eine

Hompage zu erstellen

und gestalten

Wirtschaft-

lichkeit

Rentiert sich

das Projekt? ja, das Geschäft gewinnt

an Bekanntheit

Maturaprojekt CMH


Carina Sattler

2.7 Übersichtsplan

Abbildung 2 Übersichtsplan

Kontakt

Hör-

beispiele

Gäste-

buch

Bilder-

galerie

News

Termine

Index

Maturaprojekt CMH


Carina Sattler

2.8 ER-Diagramme

Abbildung 3 ER-Diagramm

Abbildung 3 ER-Diagramm

Maturaprojekt CMH


Carina Sattler

2.9 Meilensteinliste

AP Name Verantwortlicher Datum/

Beginn

Datum/Ende

1 AP1Webtechnologie festgelegt,

Meilensteinplan erstellt

Reeh Angelika 22.09.2011 29.09. 2011

2 Corporate Design festgelegt, Reeh Angelika 29.09.2011 06.102011

3 AP3 Template gesucht, Logo ge-

zeichnet, Logo digitalisiert und in

Gimp bearbeitet

Sattler Carina 06.10. 2011 13.10 2011

4 AP 4 Logo digitalisiert und Meta-

tags erstellt, Domainname fest-

gelegt

Reeh Angelika 13.10. 2011 20.10 2011

5 AP5 Template bearbeitet Reeh Angelika 20.10. 2011 03.11 2011

6 AP6 Bilder gesucht Carina Sattler 03.11 2011 10.11. 2011

7 AP7 , TempoVoila heruntergela-

den, Template auf Typo3 gela-

den, Seiten erstellt

Reeh Angelkika 10.11 2011 17.11 2011

8 AP8 Texte verfasst Carina Sattler 17.11 2011 24.11 2011

9 AP9 Homepage bei

TYPO3 weiterbearbeitet

Carina

Sattler,

Angelika Reeh

24.11 2011 15.12 2011

10 Gästebuch installiert, schriftli-

che Ausarbeitung begonnen

Angelika Reeh 15.12 22.12

11 Bildergallerie installiert Angelika Reeh 12.01.2012 19.01.2012

12 Css Datei verändert, Videos von

Youtube raufgeladen

Carina Sattler

Reeh Angelika

19.01.2012 26.01.2012

Maturaprojekt CMH


Carina Sattler

13 Schriftliche Ausarbeitung ver-

vollständigt ; Gästebuch ange-

passt

Reeh Angelika 26.01.2012 02.02. 2012

Schulentlasttage 02.02.2012

14 Terminkalender

installiert, schriftliche Ausarbei-

tung vervollständigt

Carina Sattler 09.02.2012 23.02. 2012

Semesterferien 16.02.2012

15 Intro gestaltet; Reeh Angelika 23.2.2012 01.03. 2012

16 Kontakt; Bilder hinzugefügt 01.03.2012 08.03. 2012

17 Sidebar Bilder hinzugefügt;

Schriftliche Ausarbeitung ver-

vollständigt

Reeh Angelika

Carina Sattler

8.3.2012 15.03. 2012

18 News (Seite) gestaltet Reeh Angelika 15.3.2012 22.03 2012

19 Ausarbeitung fertig gestellt,

News fertig gestaltet

Reeh Angelika

Carina Sattler

22.03. 2012 29.03. 2012

Maturaprojekt CMH


Carina Sattler

2.10 Dokumentieren unserer Arbeit

Zusätzlich zu unserer Projektarbeit haben wir diese mittels

„Google-Documents“ in Form eines Tagebuchs dokumentiert.

Darin haben wir unsere Ziele für den Tag definiert und festgehal-

ten. So konnte man sich einen Überblick verschaffen ob diese

Ziele erreicht wurden oder nicht.

Nach jeder ICS-Einheit haben wir eingetragen, welche Arbeitspa-

kete wir abgeschlossen haben.

Abbildung 4 Tagebuch

Maturaprojekt CMH


Carina Sattler

3 Grundlagen

3.1 Was ist ein CMS?

Content-Management-Systeme (cms) trennen Inhalt, Struktur

und Layout von Dokumenten und integrieren die Bearbeitung

und Pflege von Dokumenten in eine definierten Arbeitsablauf

(Workflow). Das hat für Redakteure den Vorteil, dass sie sich

ganz auf die Pflege und Aktualisierung von Texten konzentrieren

können, ohne sich um das Layout, die Einbindung in ihre Seite

oder andere technische Aspekte kümmern müssen. 1

1 Vgl. http://www.e-teaching.org/technik/distribution/cms

Maturaprojekt CMH


Carina Sattler

3.1.1Was ist das Frontend?

Das sogenannte Frontend von TYPO3 („vordere

Seite“) ist der Web-Server, der die Web-Pages den

Internet-Surfern anzeigt. Der Zugriff kann mit je-

dem beliebigen Web-Browser (Internet Explorer,

Mozilla Firefox..) erfolgen. Es ist dafür auch kein

Login notwendig.2

Abbildung 5 Frontend

2

Vgl.http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3_contema

s_4.5_ST.pdf

Maturaprojekt CMH


Carina Sattler

3.1.2Was ist das Backend?

Das so genannte Backend von TYPO3 („hintere Seite“) ist das

Content Management System, mit dem die Web-Page erstellt

und bearbeitet werden. Der Zugriff ist nur für berechtigte Perso-

nen, sie so genannte Webautoren oder Redakteure. Sie brauchen

dafür einen Benutzername und ein Passwort mit einer entspre-

chenden TYPO3-Berechtigung. Der Zugriff kann mit allen gängi-

gen neueren Web-Browsern erfolgen. Cookies und JavaScript

müssen eingeschaltet sein und Popup-Fenster müssen für den

Server erlaubt sein. 3

Abbildung 6 Anmeldung

3http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3_contemas_

v4_2.pdf

Maturaprojekt CMH


Carina Sattler

Damit man nun Änderungen an der Website vornehmen kann,

muss man sich mit dem erhaltenen Benutzername und dem da-

zugehörigen Passwort ins TYPO3-Backend auf der aufgerufenen

URL http://cmh.pannoneum.at/typo3/index.php einloggen. Mit

der Bestätigung des gedrückten Anmelde-Button gelangt man

zur Benutzeroberfläche von TYPO3. Benutzerdaten ändern (zB

Kennwort) Einfach Klick auf den Benutzername (rechts oben)

Nach einem erfolgreichen Login befindet man sich im Backend.

Abbildung 7 Anmeldung Backend

Abbildung 8 Admin

Nach getaner Arbeit das TYPO3-Backend mit Logout/Abmelden

verlassen.

Maturaprojekt CMH


Carina Sattler

3.1.3Die Benutzeroberfläche

3.1.3.1 Aufbau-Allgemein

1.)Links befindet sich die Modulleiste. Hier kann man aus-

wählen welche Art von Arbeit man durchführen möchte.

2.)In der Mitte kann man den Seiten- oder Dateienbaum

sehen. Hier wählt man aus, welche Web-Site oder wel-

chen Dateien-Folder man bearbeiten möchte.

3.)Rechts kann man die Arbeitsfläche sehen. Hier führt

man Arbeiten durch.

Abbildung 9 Benutzeroberfläche

Abbildung 10 Benutzerleiste

Maturaprojekt CMH


Carina Sattler

Oben befindet sich die Benutzerleiste .Hier findet man benutzer-

spezifische Informationen/Funktionen.

Die Anordnung der Bereiche entspricht auch der Reihenfolge bei

der Arbeit:

Zuerst in der Modulleiste das Modul auswählen (z.B. Web/Seite),

dann im Seitenbaum die Web-Seite auswählen (z.B. Wegbe-

schreibung) und

dann in der Arbeitsfläche die eigentliche Arbeit an dieser Web-

Seite durchführen.

4 Erstellen von Seiten/Unterseiten

Für das Hinzufügen von Seiten muss man sich im Modul Seite

befinden.

Im Seitenbaum befinden sich die bereits vorhandenen Seiten.

Um eine Seite hinzuzufügen klickt man auf Neue Seite anlegen.

Maturaprojekt CMH


Carina Sattler

In der Arbeitsfläche kann man nun bestimmen wo die neu ange-

legte Seite platziert werden soll.

Abbildung 12 Neue Seite anlegen

Abbildung 13 Neuer Datensatz

Ein Klick auf den ersten Pfeil würde eine Seite in der ersten Hie-

rarchie sprich eine Seite nach der Root erzeugen. Die anderen

Pfeile würden eine Unterseite nach/in der jeweiligen Überseite

erzeugen.

Abbildung 11-Seite

Maturaprojekt CMH


Carina Sattler

5 Neues Element anlegen

Abbildung 14 Neues Element anlegen

Maturaprojekt CMH


Carina Sattler

5.1 Allgemeines Plug-In einfügen

Abbildung 15 Plug-In

5.2 Nutzen

Mit dem Erstellen immer größerer Websites, Homepages und all-

gemein Internet-Seiten wird jeder „Webmaster“, „Webautor“

oder „Webpublisher“ irgendwann einmal feststellen, dass z.B.

das Formatieren von Texten oder das Gestalten von Tabellen mit

der Zeit etwas anstrengend wird.

Hierfür gibt es aber eine einfache und effektive Lösung.

Cascading Style Sheets (CSS) ermöglicht einfaches Formatieren

von Web-Inhalten, vor allem für Formatierungen, welche mit

HTML-Befehle nicht möglich wären.

So ist es möglich, mit einem CSS-Dokument 100 oder mehr

Webseiten zu formatieren, ohne diese mit dem kompletten CSS-

Inhalt zu füllen.4

4 Vgl. http://www.html-world.de/htmlundco.php

Maturaprojekt CMH


Carina Sattler

5.3 Entstehung

CSS existiert seit Anfang/Mitte des letzten Jahrzehnts.

Schon 1996 wurde dazu eine Spezifikation vom W3C herausge-

geben, die CSS Level 1 Spezifikation. Dieses enthielt die ersten

konkreten Hinweise zum Aufbau, Syntax und Eigenschaften.

1998 erschien dann die zweite Spezifikation mit wesentlich mehr

Informationen. Hier wurde erstmals auch z.B wie akustische Ef-

fekte bei Sprach-Browsern ausgedrückt werden können

beschrieben.5

5http://www.dma.ufg.ac.at/app/link/Grundlagen%3AInternet.Web.Multimedia

/module/8860?step=1#chapter

Maturaprojekt CMH


Carina Sattler

5.4 Template

Templates (der englische Begriff für Schablonen), sind Vorlagen,

die mit Inhalt gefüllt werden können.

Den größten Vorteil den wir darin sehen, ist man benötigt kein

HTML-Grundgerüst und kann das Template wie man möchte

ganz einfach anpassen. Farben neu definieren, Bilder hinzufügen,

die Homepage neu gestalten. Man spart Zeit, da das Layout

schon vordefiniert ist.

Unserer Template haben wir von freetemplate.com gefunden ge-

ändert und angepasst.

Abbildung 16 Template

Maturaprojekt CMH


Carina Sattler

5.4.1Logo

Das Logo mussten wir selbst entwerfen, da noch keines vorhan-

den war. Unsere Klassenkollegin zeichnete uns das selbst ent-

worfene Logo. Danach digitalisierten wir es. Zum Schluss wurde

es noch bearbeitet, mit Hilfe des Bildbearbeitungsprogramms

GIMP ist uns dies auch gelungen.

Abbildung 17 Logo

Maturaprojekt CMH


Carina Sattler

6 Extensions

6.1 TemplaVoilá Hochladen

Die Website http://typo3.org aufrufen. Dann auf „Extensions“

klicken. Bei dem Eingabefeld „Search“ TemplaVoilá eingeben.

Diese sucht dann nach dieser und zeigt Ihnen die passenden

Treffer an.

Anschließend downloaded man die Extension.

Abbildung 18 Download extension

Im Erweiterungsmanager klickt man auf den Register „Erweite-

rungen importierten“ Anschließend klickt man auf „ Erweite-

rungsdatei direkt hochladen“

Abbildung 19 Extension hochladen

Maturaprojekt CMH


Carina Sattler

Abbildung 20 TemplaVoilà

Maturaprojekt CMH


Carina Sattler

6.2 Gästebuch installieren


klicken. Bei dem Eingabefeld „Search“ die Extension Gästebuch

eingeben.

Danach wechselt man wieder zurück zu Typo3 und klickt links in

der Modulleiste unter Adminwerkzeuge auf Erweiterungen.

Abbildung 21 Erweiterungen

Anschließend die heruntergeladene Datei hochladen und aktuali-

sieren. Danach in die gewünschte Seite einbinden.

Maturaprojekt CMH


Carina Sattler

6.3 Terminkalender


klicken. Bei dem Eingabefeld „Search“ die Extension Simple Ca-

lendar eingeben.

Abbildung 22 Simple Calendar

Download der Extension

Abbildung 23 Download Extension calendar

Maturaprojekt CMH


Carina Sattler

Anschließend muss man die gedownloadete Erweiterung in

TYPO3 importieren.

Anschließend die Erweiterung aktualisieren.

Danach auf der gewünschten Seite einbinden.

Abbildung 24 Erweiterung importieren

Maturaprojekt CMH


Carina Sattler

6.4 Import und Installation des News-Moduls

In TYPO3 existiert hierzu ein Erweiterungsmodul ‚News‘. Über

den Erweiterungsmanager kann man dieses Modul zur TYPO3-

Installation hinzufügen. Dazu sucht man in der Ansicht IMPORT

EXTENSIONS des Extension Managers nach „tt-news“ In der nun

erscheinenden Liste findet man ein Frontend Plugin mit dem Ex-

tension Key tt-news. Mit einem Klick auf den roten Pfeil kann

man die Erweiterung zu TYPO3-Installation übertragen und an-

schließend installieren. Das News-Modul erweitert die Daten-

bankstruktur von TYPO3 um eine Tabelle (tt_news) in der News-

beiträge als Datensatz gespeichert werden, und um einige ande-

re Tabellen. Hier lässt man alle Checkboxen aktiviert und bestä-

tigt das Update mit dem Button MAKE UPDATE am unteren Rand

der Maske.

Anlegen des SysOrdners für Newsbeiträge

Nach Update der Datenbank folgt eine Konfigurationsseite. Bevor

jedoch eine weitergehende Konfiguration der Erweiterung in An-

griff genommen werden kann, muss zunächst die Struktur der

Website wiederrum erweitert werden. Es werden eine zusätzliche

Seite „Newsmeldung“ und ein weiter Systemordner genötigt. Da-

zu erstellt man die Seite in News und kennzeichnet Sie als „im

Menü verborgen“ Danach legt man einen Systemordner an, der

als Container für die Newsdatensätze dienen wird. In dessen Ein-

stellungen im Reiter OPTIONEN findet man wieder das Pulldown-

Menü Enthält PLUG-In vor.

Anlegen von Datensätzen im News-Ordner

Über das Kontextmenü des News-Ordners kann man neue Bei-

träge anlegen. Das Menü NEUER DATENSATZ enthält jetzt einen

Maturaprojekt CMH


Carina Sattler

Eintrag News, den man auswählen kann. An dieser Stelle kann

man auch die Newskategorie einrichten. Anlegen eines Newsda-

tensatzes: Man klickt auf NEWS um einen Newsdatensatz zu er-

zeugen. Im Arbeitsfenster öffnet sich eine längere Eingabemas-

ke. Im Bereich ALLGEMEIN kann man zunächst den Nachrichten-

titel in ein Feld names BEZEICHNUNG eingeben und anschließend

kann man im Pulldown-Menü TYP für eine technische Variante

der Nachricht entscheiden. Danach wählt man Typ NEWS. Nun

werfen wir einen kurzen Blick auf den Bereich Relations, in dem

jetzt noch keine Eingabe zu erfolgen braucht.

Dieser Bereich enthält: * Kategoriezuordnung über das Feld Ca-

tegory

Bilder

Bildtext, Bildtitel und Alternativ-Text

Links zum Artikel

Verweise zu verbundenen Beiträgen

Dateien

Zugriffsrechte

Einbindung des statischen Templates:

Bevor der Versuch übernommen werden kann, die News auf In-

haltsseiten einzubinden, muss erst das Template-Setup erweitert

werden. Bislang wäre noch keine Ausgabe möglich. Dazu wech-

selt man in das Modul WEB<TEMPLATE und öffnet das Root-

Styleshett über den Link Click here to edit whole Template er-

cord. Nun wechselt man in den Reiter ENTHÄLT. Um Newsinhalt

auszugeben zu können, benötigt TYPO3 noch ein statisches

Template.

Maturaprojekt CMH


Carina Sattler

Einfügen des NEWS-Plugins in die Startseite

Bislang haben wir einen Behälter für die Newsbeiträge (den Sy-

sordner) angelegt und Beiträge erzeugt. Um die Newsbeiträge

anzuzeigen, können nun entsprechende Seiteninhalte angelegt

werden. Dies geschieht in Form eines Seiteninhalts vom Typ

„Plugin“ . Durch die Installation der News-Erweiterungen ist in

der Liste der Seiteninhalt ein Eintrag für Newsinhalt hinzuge-

kommen. Nun muss dem Plugin als Ausgangspunkt noch mitge-

teilt werden, aus welchem SysOrdner die Nachrichtendaten zu

beziehen sind. Anschließend wechselt man in den Reiter

SONSTIGE EINSTELLUNGEN des Plugins.

Maturaprojekt CMH


Carina Sattler

Plug-In auswählen

Abbildung 25 Plug-In einfügen

Maturaprojekt CMH


Carina Sattler

7 Youtube-Video einbinden

Um ein Video von Youtube auf der Website anzuzeigen, müssen

wir als Inhaltselement reines HTML auswählen.

Abbildung 26 Video einbinden

Im Allgemeinen Teil können wir nun wie gewohnt diverse Attri-

bute angeben. Wenn wir dies

erledigt haben wechseln wir in die Registerkarte HTML.

Abbildung 27 HTML

Maturaprojekt CMH


Carina Sattler

In das Eingabefeld fügen wir nun den HTML-Code ein, den wir

von der gewünschten Video-

Seite (z.B.: Youtube) erhalten.

Den HTML-Code erhalten wir, indem wir auf der Videoseite

auf den Button Einbetten, welchen es bei jedem Video gibt, kli-

cken.

Abbildung 28 HTML Code

Maturaprojekt CMH


Carina Sattler

Dadurch öffnet sich ein weiterer Bereich, in dem verschiedene

Einstellungen wie die Größe

ausgewählt werden können. Für uns ist es wichtig, den gesamten

HTML-Code im Eingabefeld zu kopieren und in unser Eingabefeld

in Typo3 einzufügen.Abbildung 29 HTML-Code einfügen

Nun müssen wir den neu erstellten Inhalt speichern und sehen

uns gleich an ob das Video

angezeigt wird.

http://www.youtube.com/

Abbildung 30 Videos

Maturaprojekt CMH


Carina Sattler

8 Intro erstellen

Intro downloaden

http://www.templatemonster.com/free-templates.php

Abbildung 31 Intro

Anschließend mit Adobe Flash CS bearbeiten.

Abbildung 32 Adobe Flash

Maturaprojekt CMH


Carina Sattler

8.1 Was ist Adobe Flash Professional CS5.5?

Flash Professional CS5.5 ist die führende Authoring-Umgebung

für aussagekräftige interaktive Inhalte. Mit ihr erstellt man nach-

haltige Anwendungserlebnisse, die auf Desktops, Smartphones,

Tablet-PCs und TY-Geräten in gleichbleibender Qualität wieder-

gegeben werden. 6

Abbildung 33 Flash Professional

Abbildung 34 Flash Professional 1

6 www.adobe.com

Maturaprojekt CMH


Carina Sattler

9 GIMP

Abbildung 35 Gimp

9.1 Was ist GIMP?

GIMP (GNU Image Manipulation Programm) ist ein freies und

völlig kostenloses Bild- und Grafikbearbeitungsprogramm, das

dem kommerziellen Grafikprogramm Photoshop von Adobe für

viele Anwendungen um nichts nachsteht. Das Programm ist un-

ter der GNU Public License verfügbar und richtet sich an alle, die

eine professionelle Bildbearbeitungs-Software benötigen und

entweder keine teuren Lizenzen kaufen wollen oder aufgeschlos-

sen gegenüber von OpenSource-Software und den Vorteilen, die

dadurch entstehen, sind. GIMP kann verwendet werden: 7

um Weblayouts zu basteln,

um Bilder zu generieren und vorhandene nachzubearbeiten

7 www.drweb.de

Maturaprojekt CMH


Carina Sattler

Abbildung 36 Gimp Werkzeuge

GIMP wird von mehreren Leuten entwickelt, die dafür kein fixes

Entgelt erhalten. Aber jeder kann den Quellcode einsehen und

sicher selbst an der Entwicklung beteiligen (z.B. um Dokumenta-

tion zu schreiben, Bugs zu berichten, Scripts zu schreiben oder

dem Programm selbst Features hinzuzufügen.8

8 http://www.gimpusers.de/tutorials/basic-screenshots.html

Maturaprojekt CMH


Carina Sattler

10 Homepage/Seiten

Abbildung 38-Intro

Abbildung 37-Home

Maturaprojekt CMH


Carina Sattler

Abbildung 40-Termine

Abbildung 39-News

Maturaprojekt CMH


Carina Sattler

Abbildung 42-Bildergalerie

Abbildung 41-Gästebuch

Maturaprojekt CMH


Carina Sattler

Abbildung 43-Kontakt

Abbildung 44-Höhrbeispiele

Maturaprojekt CMH


Carina Sattler

11 Nachwort

Nach ca. 6 Monaten intensiver Arbeit haben wir unser Projekt,

eine, dynamische Homepage zu erstellen erfolgreich abgeschlos-

sen.

Alle unsere Erwartungen und Vorstellung haben wir erfolgreich

ausführen können.

Wir hatten zwar anfangs einige Probleme mit der, doch diese wa-

ren nach kurzer Zeit behoben.

Natürlich ziehen wir einen großen Nutzen aus unserem Projekt.

Wir haben ein halbes Jahr lang im Team gearbeitet und so durf-

ten wir einige schöne Erfahrungen sammeln.

Weiters haben wir unser Wissen im Bereich PHP sowie im Web-

design erweitert.

Zum Schluss möchten wir unseren beiden Professoren Herrn

Dipl. Ing. Adolf Selinger und Herrn Mag. Heinz Wurzinger für die

tatkräftige Unterstützung danken. Wir durften wertvolle Erfah-

rungen für die Zukunft sammeln.

Maturaprojekt CMH


Carina Sattler

12 Literaturverzeichnis

http://www.e-teaching.org/technik/distribution/cms

http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3

_contemas_4.5_ST.pdf


_contemas_v4_2.pdf

http://www.html-world.de/htmlundco.php

http://www.dma.ufg.ac.at/app/link/Grundlagen%3AInternet.We

b.Multimedia/module/8860?step=1#chapter


_contemas_v4_2.pdf

http://www.html-world.de/htmlundco.php

http://www.dma.ufg.ac.at/app/link/Grundlagen%3AInternet.We

b.Multimedia/module/8860?step=1#chapter

www.wikipedia.at

www.drweb.de

www.adobe.at

Frank Bongers, Andreas Stöckl: Einstieg in TYPO3 4.3, Bonn

(Buch)

www.galileocomputing.de