CMH Music Solution
-
Upload
angelika-reeh -
Category
Documents
-
view
233 -
download
2
description
Transcript of CMH Music Solution
Fachspezifische Themen-stellung
PANNNONEUM
Angelika Reeh & Carina Sattler 16.03.2012
Maturaprojekt CMH
Angelika Reeh Seite 1/54
Carina Sattler
Inhaltsverzeichnis
1. Vorwort ......................................................................... 5
1.1 Abstract.................................................................... 6
2 Projektmanagement ....................................................... 7
2.1 Definieren der Ziele und Nicht-Ziele ............................. 7
2.1.1 Arbeitspakete . Fehler! Textmarke nicht definiert.
2.2 Verfügbare Ressourcen ............................................. 12
2.3 Zeitliche Abgrenzung ................................................ 12
2.4 Projektwürdigkeitsanalyse......................................... 13
2.5 Durchführbarkeitsanalyse ......................................... 14
2.6 Übersichtsplan ......................................................... 15
2.7 ER-Diagramme ........................................................ 16
2.8 Meilensteinliste ........................................................ 17
2.9 Dokumentieren unserer Arbeit ................................... 19
3 Grundlagen .................................................................. 20
3.1 Was ist ein CMS? ..................................................... 20
3.1.1 Was ist das Frontend?....................................... 21
3.1.2 Was ist das Backend? ....................................... 22
3.1.3 Login ins BackendFehler! Textmarke nicht
definiert.
3.1.4 Die Benutzeroberfläche ..................................... 24
4 Erstellen von Seiten/Unterseiten .................................... 26
4.1 Nutzen ................................................................... 28
4.2 Entstehung ............................................................. 29
4.3 Template ................................................................ 30
4.3.1 Logo ............................................................... 31
5 Extensions ................................................................... 32
5.1 TemplaVoilá Hochladen ............................................. 32
5.2 Gästebuch installieren .............................................. 34
5.3 Terminkalender ....................................................... 35
6 Neues Element anlegen ................................................. 27
Maturaprojekt CMH
Angelika Reeh Seite 2/54
Carina Sattler
6.1 Allgemeines Plug-In einfügen .................................... 28
Plug-In auswählen ........................................................ 40
7 Youtube-Video einbinden ............................................... 41
8 Intro erstellen .............................................................. 44
8.1 Was ist Adobe Flash Professional CS5.5? .................... 45
9 GIMP .......................................................................... 46
9.1 Was ist GIMP? ......................................................... 46
10 Nachwort .................................................................. 52
11 Literaturverzeichnis .................................................... 53
Maturaprojekt CMH
Angelika Reeh Seite 3/54
Carina Sattler
Abbildungsverzeichnis Abbildung 1 Projektumweltanalyse _________________________________________________ 11
Abbildung 2 Übersichtsplan _______________________________________________________ 15
Abbildung 3 ER-Diagramm ________________________________________________________ 16
Abbildung 4 Tagebuch ___________________________________________________________ 19
Abbildung 5 Frontend ____________________________________________________________ 21
Abbildung 6 Anmeldung __________________________________________________________ 22
Abbildung 7 Anmeldung Backend __________________________________________________ 23
Abbildung 8 Admin ______________________________________________________________ 23
Abbildung 9 Benutzeroberfläche ___________________________________________________ 24
Abbildung 10 Benutzerleiste ______________________________________________________ 25
Abbildung 11-Seite ______________________________________________________________ 26
Abbildung 12 Neue Seite anlegen __________________________________________________ 26
Abbildung 13 Neuer Datensatz ____________________________________________________ 27
Abbildung 23 Neues Element anlegen _______________________________________________ 27
Abbildung 24 Plug-In ____________________________________________________________ 28
Abbildung 14 Template __________________________________________________________ 30
Abbildung 15 Logo ______________________________________________________________ 31
Abbildung 16 Download extension _________________________________________________ 32
Abbildung 17 Extension hochladen _________________________________________________ 32
Abbildung 18 TemplaVoilà ________________________________________________________ 33
Abbildung 19 Erweiterungen ______________________________________________________ 34
Abbildung 20 Simple Calendar _____________________________________________________ 35
Abbildung 21 Download extension calendar __________________________________________ 35
Abbildung 22 Erweiterung importieren ______________________________________________ 36
Abbildung 25 Plug-In einfügen _____________________________________________________ 40
Abbildung 26 Video einbinden _____________________________________________________ 41
Abbildung 27 HTML _____________________________________________________________ 41
Abbildung 28 HTML Code _________________________________________________________ 42
Abbildung 29 HTML-Code einfügen _________________________________________________ 43
Abbildung 30 Videos _____________________________________________________________ 43
Abbildung 31 Intro ______________________________________________________________ 44
Abbildung 32 Adobe Flash ________________________________________________________ 44
Abbildung 33 Flash Professional ___________________________________________________ 45
Abbildung 34 Flash Professional 1 __________________________________________________ 45
Maturaprojekt CMH
Angelika Reeh Seite 4/54
Carina Sattler
Abbildung 35 Gimp ______________________________________________________________ 46
Abbildung 36 Gimp Werkzeuge ____________________________________________________ 47
Abbildung 37-Home _____________________________________________________________ 48
Abbildung 38-Intro ______________________________________________________________ 48
Abbildung 39-News _____________________________________________________________ 49
Abbildung 40-Termine ___________________________________________________________ 49
Abbildung 41-Gästebuch _________________________________________________________ 50
Abbildung 42-Bildergalerie ________________________________________________________ 50
Abbildung 43-Kontakt ___________________________________________________________ 51
Abbildung 44-Höhrbeispiele _______________________________________________________ 51
Maturaprojekt CMH
Angelika Reeh Seite 5/54
Carina Sattler
1 Vorwort
Im Rahmen unseres Ausbildungsschwerpunkt „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
Angelika Reeh Seite 6/54
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
Angelika Reeh Seite 7/54
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.1 Arbeitspakete
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
Angelika Reeh Seite 8/54
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
Angelika Reeh Seite 9/54
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
Angelika Reeh Seite 10/54
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
Angelika Reeh Seite 11/54
Carina Sattler
CMH Besucher
überzeugen
+
Musikgruppen bekannter
machen +
neue Interessenten
gewinnen +
Projektteam
von der Konkurrenz
abweichen +
Interessenten animieren
Musikgruppe zu buchen
Abbildung 1 Projektumweltanalyse
Maturaprojekt CMH
Angelika Reeh Seite 12/54
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
Angelika Reeh Seite 13/54
Carina Sattler
2.4 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
Angelika Reeh Seite 14/54
Carina Sattler
2.5 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
Angelika Reeh Seite 15/54
Carina Sattler
2.6 Übersichtsplan
Abbildung 2 Übersichtsplan
Kontakt
Höhr-
beispiele
Gäste-
buch
Bilder-
galerie
News
Termine
Index
Maturaprojekt CMH
Angelika Reeh Seite 16/54
Carina Sattler
2.7 ER-Diagramme
Abbildung 3 ER-Diagramm
Abbildung 3 ER-Diagramm
Maturaprojekt CMH
Angelika Reeh Seite 17/54
Carina Sattler
2.8 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 Me-
tatags erstellt, Domainname
festgelegt
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
Angelika Reeh Seite 18/54
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 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
Angelika Reeh Seite 19/54
Carina Sattler
2.9 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
Angelika Reeh Seite 20/54
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
Angelika Reeh Seite 21/54
Carina Sattler
3.1.1 Was 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
Angelika Reeh Seite 22/54
Carina Sattler
3.1.2 Was 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
Angelika Reeh Seite 23/54
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
Angelika Reeh Seite 24/54
Carina Sattler
3.1.3 Die Benutzeroberfläche
3.1.3.1 Aufbau-Allgemein
1.)Links befindet sich die Modulleiste. Hier kann
man auswählen welche Art von Arbeit
man durchführen möchte.
2.)In der Mitte kann man den Seiten- oder Da-
teienbaum sehen. Hier wählt man aus,
welche Web-Site oder welchen Dateien-
Folder man bearbeiten möchte.
3.)Rechts kann man die Arbeitsfläche se-
hen. Hier führt man Arbeiten durch.
Abbildung 9 Benutzeroberfläche
Maturaprojekt CMH
Angelika Reeh Seite 25/54
Carina Sattler
Abbildung 10 Benutzerleiste
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.
Maturaprojekt CMH
Angelika Reeh Seite 26/54
Carina Sattler
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.
In der Arbeitsfläche kann man nun bestimmen wo die neu ange-
legte Seite platziert werden soll.
Abbildung 12 Neue Seite anlegen
Abbildung 11-Seite
Maturaprojekt CMH
Angelika Reeh Seite 27/54
Carina Sattler
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.
5 Neues Element anlegen
Abbildung 14 Neues Element anlegen
Maturaprojekt CMH
Angelika Reeh Seite 28/54
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“ o-
der „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
Angelika Reeh Seite 29/54
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
Angelika Reeh Seite 30/54
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
Angelika Reeh Seite 31/54
Carina Sattler
5.4.1 Logo
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
Angelika Reeh Seite 32/54
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
Angelika Reeh Seite 33/54
Carina Sattler
Abbildung 20 TemplaVoilà
Maturaprojekt CMH
Angelika Reeh Seite 34/54
Carina Sattler
6.2 Gästebuch installieren
Die Website http://typo3.org aufrufen. Dann auf „Extensions“
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
Angelika Reeh Seite 35/54
Carina Sattler
6.3 Terminkalender
Die Website http://typo3.org aufrufen. Dann auf „Extensions“
klicken. Bei dem Eingabefeld „Search“ die Extension Simple
Calendar eingeben.
Abbildung 22 Simple Calendar
Download der Extension
Abbildung 23 Download extension calendar
Maturaprojekt CMH
Angelika Reeh Seite 36/54
Carina Sattler
Anschließend muss man sie gedownloadete Erweiterung in
TYPO3 importieren.
Anschließend die Erweiterung aktualisieren.
Danach auf der gewünschten Seite einbinden.
Abbildung 24 Erweiterung importieren
Maturaprojekt CMH
Angelika Reeh Seite 37/54
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 sie als
„im Menü verborgen“ Danach legt man einen Systemordner an,
der als Container für die Newsdatensätze dienen wird. In dessen
Einstellungen im Reiter OPTIONEN findet man wieder das Pull-
down-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
Angelika Reeh Seite 38/54
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 Aushabe 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
Angelika Reeh Seite 39/54
Carina Sattler
Einfügen des NEWS-Plugins in die Startseite
Bislang haben wir einen Behälter für die Newsbeiträge (den Sys-
ordner) 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
Angelika Reeh Seite 40/54
Carina Sattler
Plug-In auswählen
Abbildung 25 Plug-In einfügen
Maturaprojekt CMH
Angelika Reeh Seite 41/54
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
Angelika Reeh Seite 42/54
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
Angelika Reeh Seite 43/54
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
Angelika Reeh Seite 44/54
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
Angelika Reeh Seite 45/54
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
Angelika Reeh Seite 46/54
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
Angelika Reeh Seite 47/54
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
Angelika Reeh Seite 48/54
Carina Sattler
10 Homepage/Seiten
Abbildung 38-Intro
Abbildung 37-Home
Maturaprojekt CMH
Angelika Reeh Seite 49/54
Carina Sattler
Abbildung 40-Termine
Abbildung 39-News
Maturaprojekt CMH
Angelika Reeh Seite 50/54
Carina Sattler
Abbildung 42-Bildergalerie
Abbildung 41-Gästebuch
Maturaprojekt CMH
Angelika Reeh Seite 51/54
Carina Sattler
Abbildung 43-Kontakt
Abbildung 44-Höhrbeispiele
Maturaprojekt CMH
Angelika Reeh Seite 52/54
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
Angelika Reeh Seite 53/54
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
http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3
_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
http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3
_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