cmh music solution by Carina Sattler

Fachspezifische Themenstellung PANNNONEUM

Angelika Reeh & Carina Sattler 16.03.2012

Maturaprojekt CMH

Inhaltsverzeichnis 1

Vorwort.........................................................................5 1.1

Abstract....................................................................6

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 3

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

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

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 Angelika Reeh Carina Sattler

Logo............................................................... 32 Seite 1/55

Maturaprojekt CMH

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

Intro erstellen .............................................................. 45 8.1

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

GIMP 9.1

..................................................................... 47

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

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

Nachwort.................................................................. 53

Literaturverzeichnis ................................................... 54

Angelika Reeh Carina Sattler

Seite 2/55

Maturaprojekt CMH

Abbildungsverzeichnis Abbildung 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 Angelika Reeh Carina Sattler

Seite 3/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 4/55

Maturaprojekt CMH

1 Vorwort Im Rahmen unseres Ausbildungsschwerpunkts „Information and Communication Solutions“ erarbeiteten wir für mehrere Musikgruppen eine Vermittlungsstelle, ein Konzept für einen professionellen Webauftritt mit dynamischen Datenbankanbindungen. Unser Ziel war es, eine Homepage mit erweiterten Funktionen zu erstellen. Unsere Auftraggeber hatten den Wunsch nach einer dynamischen Website geäußert. Die Website sollte die Möglichkeit stellen, Kunden über die aktuellen Termine zu informieren und zugleich dazu dienen eine der Musikgruppen zu buchen. Mit unserem erlernten Wissen und der fachmännischen Unterstützung unserer Professoren kreierten wir eine informative und innovative Website. Wir hoffen, das Ergebnis unseres Projektes entspricht der Vorstellung unseres Auftragsgebers. Auf den folgenden Seiten finden Sie eine genaue Dokumentation unserer Arbeit.

Angelika Reeh Carina Sattler

Seite 5/55

Maturaprojekt CMH

1.1 Abstract Within the scope of our main subject „Information and Communication Solutions“ we acquired a concept of a professional web appearance using dynamic databases for our Website “CMHMusic Solution”. We aimed to make a homepage with extended functions. This was necessary because there exists no page. Mr. Thell uttered 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 expectations of our principals. On the next pages you will find the exact documentation of our work.

Angelika Reeh Carina Sattler

Seite 6/55

Maturaprojekt CMH

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 Website erstellen

Angelika Reeh Carina Sattler

Seite 7/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 8/55

Maturaprojekt CMH

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, Auftraggeber

Beginn und Ende: 6.Oktober-3.November

Angelika Reeh Carina Sattler

Seite 9/55

Maturaprojekt CMH

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 Projektumweltanalyse

Angelika Reeh Carina Sattler

Seite 10/55

Maturaprojekt CMH

Interessenten animieren Musikgruppe zu buchen von der Konkurrenz Projektteam

abweichen +

neue

CMH

Interessenten

Besucher

gewinnen +

端berzeugen + Musikgruppen bekannter machen

Abbildung 1 Projektumweltanalyse

Angelika Reeh Carina Sattler

Seite 11/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 12/55

Maturaprojekt CMH

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Ă&#x;, grau, dunkelrot Hintergrundfarbe der Website: dunkelrot = RGB-Code: 400a0a Seitenfarbe Website: grau = RGB-Code: 99836c

Angelika Reeh Carina Sattler

Seite 13/55

Maturaprojekt CMH

2.5 Projektwürdigkeitsanalyse Mit Hilfe dieser Tabelle stellt man fest, ob es würdig ist dieses Projekt durchzuführen oder nicht. Man bewertet die verschiedenen Kriterien, die für die Durchführbarkeit benötigt werden und entscheidet man, ob sich der Aufwand lohnt. Kriterium Neuartigkeit

Inhaltlich komplex

Hoch

Mittel Niedrig Begründung Homepage war nicht vorhan-



den. Ja, da die Homepage dynami-



sche Elemente enthält.

Ressourcen-



aufwand Strategisch bedeutsam Risikoreich

Die meisten Ressourcen sind bereits vorhanden Zukünftig



mehr

Auftritt

Musikgruppen gewinnen



bei

interessanter

gemehr

Homepa-

Auftritte/Buchungen

der Musikgruppe

Angelika Reeh Carina Sattler

für

Seite 14/55

Maturaprojekt CMH

2.6 Durchführbarkeitsanalyse Bereiche

Mögliche

Ja/Nein

Bemerkung



Es gibt zwei Personen,

Fragen Personalres-

Sind

die

not-

sourcen

wendigen

Per-

sonalressourcen

die

aktiv

Projekt

mitarbeiten.

vorhan-

den? Finanzelle

Wird das not-

Ressourcen

wendige

Pro-



ja, es wird vorhanden



ja, es steht genug Zeit

sein.

jektbudget vorhanden sein? Zeitliche

Ist das geplan-

Ressourcen

te Ziel zeitlich erreichbar?

Know-How

Projekt zu arbeiten

Haben wir im

in Unterneh- Unternehmen men

zur Verfügung um am



ja, während des Unterrichts lernt man eine

das notwendige

Hompage zu erstellen

Know-how, um

und gestalten

das

Projekt

umzusetzen? Wirtschaft-

Rentiert

lichkeit

das Projekt?

Angelika Reeh Carina Sattler

sich



ja, das Geschäft gewinnt an Bekanntheit

Seite 15/55

Maturaprojekt CMH

2.7 Übersichtsplan

Termine

Kontakt

News

Index

Hör-

Bilder-

beispiele

galerie

Gästebuch

Abbildung 2 Übersichtsplan

Angelika Reeh Carina Sattler

Seite 16/55

Maturaprojekt CMH

2.8 ER-Diagramme

Abbildung 3 ER-Diagramm Abbildung 3 ER-Diagramm

Angelika Reeh Carina Sattler

Seite 17/55

Maturaprojekt CMH

2.9 Meilensteinliste AP Name

Verantwortlicher

Datum/

Datum/Ende

Beginn 1

AP1Webtechnologie

festgelegt, Reeh Angelika

22.09.2011

29.09. 2011

29.09.2011

06.102011

Meilensteinplan erstellt 2

Corporate Design festgelegt,

Reeh Angelika

AP3 Template gesucht, Logo ge- Sattler Carina

06.10. 2011 13.10 2011

zeichnet, Logo digitalisiert und in Gimp bearbeitet 4

AP 4 Logo digitalisiert und Meta- Reeh Angelika

13.10. 2011 20.10 2011

tags erstellt, Domainname festgelegt 5

AP5 Template bearbeitet

Reeh Angelika

20.10. 2011 03.11 2011

AP6 Bilder gesucht

Carina Sattler

03.11 2011

10.11. 2011

AP7 , TempoVoila heruntergela- Reeh Angelkika

10.11 2011

17.11 2011

den, Template auf

Typo3 gela-

den, Seiten erstellt 8

AP8 Texte verfasst

Carina Sattler

17.11 2011

24.11 2011

AP9 Homepage bei

Carina

24.11 2011

15.12 2011

15.12

22.12

TYPO3 weiterbearbeitet

Sattler, Angelika Reeh

G채stebuch installiert,

schriftli- Angelika Reeh

che Ausarbeitung begonnen 11

Bildergallerie installiert

Angelika Reeh

12.01.2012

19.01.2012

Css Datei ver채ndert, Videos von Carina Sattler

19.01.2012

26.01.2012

Youtube raufgeladen

Angelika Reeh Carina Sattler

Reeh Angelika

Seite 18/55

Maturaprojekt CMH

Schriftliche

Ausarbeitung

ver- Reeh Angelika

26.01.2012

02.02. 2012

vollständigt ; Gästebuch angepasst Schulentlasttage 14

02.02.2012

Terminkalender

Carina Sattler

09.02.2012

23.02. 2012

installiert, schriftliche Ausarbeitung vervollständigt Semesterferien 15

Intro gestaltet;

16 17

16.02.2012 Reeh Angelika

23.2.2012

01.03. 2012

Kontakt; Bilder hinzugefügt

01.03.2012

08.03. 2012

Sidebar

8.3.2012

15.03. 2012

15.3.2012

22.03 2012

Bilder

Schriftliche

hinzugefügt; Reeh Angelika

Ausarbeitung

ver- Carina Sattler

vollständigt 18

News (Seite) gestaltet

Ausarbeitung

fertig

News fertig gestaltet

Angelika Reeh Carina Sattler

Reeh Angelika gestellt, Reeh Angelika

22.03. 2012 29.03. 2012

Carina Sattler

Seite 19/55

Maturaprojekt CMH

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 festgehalten. So konnte man sich einen Überblick verschaffen ob diese Ziele erreicht wurden oder nicht. Nach jeder ICS-Einheit haben wir eingetragen, welche Arbeitspakete wir abgeschlossen haben.

Abbildung 4 Tagebuch

Angelika Reeh Carina Sattler

Seite 20/55

Maturaprojekt CMH

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.

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

Angelika Reeh Carina Sattler

Seite 21/55

Maturaprojekt CMH

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 jedem beliebigen Web-Browser (Internet Explorer, Mozilla Firefox..) erfolgen. Es ist dafür auch kein Login notwendig.2

Abbildung 5 Frontend

Vgl.http://contemas.net/fileadmin/user_upload/Handbuecher/TYPO3_contema s_4.5_ST.pdf Angelika Reeh Carina Sattler

Seite 22/55

Maturaprojekt CMH

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 Personen, sie so genannte Webautoren oder Redakteure. Sie brauchen dafür einen Benutzername und ein Passwort mit einer entsprechenden TYPO3-Berechtigung. Der Zugriff kann mit allen gängigen neueren Web-Browsern erfolgen. Cookies und JavaScript müssen eingeschaltet sein und Popup-Fenster müssen für den Server erlaubt sein.

Abbildung 6 Anmeldung

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

v4_2.pdf Angelika Reeh Carina Sattler

Seite 23/55

Maturaprojekt CMH

Damit man nun Änderungen an der Website vornehmen kann, muss man sich mit dem erhaltenen Benutzername und dem dazugehö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.

Angelika Reeh Carina Sattler

Seite 24/55

Maturaprojekt CMH

3.1.3Die 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 Dateienbaum sehen. Hier wählt man aus, welche Web-Site oder welchen 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

Angelika Reeh Carina Sattler

Seite 25/55

Maturaprojekt CMH

Oben befindet sich die Benutzerleiste .Hier findet man benutzerspezifische 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. Wegbeschreibung) und dann in der Arbeitsfläche die eigentliche Arbeit an dieser WebSeite 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.

Angelika Reeh Carina Sattler

Seite 26/55

Maturaprojekt CMH

In der Arbeitsfläche kann man nun bestimmen wo die neu angelegte Seite platziert werden soll.

Abbildung 12 Neue Seite anlegen

Abbildung 11-Seite

Abbildung 13 Neuer Datensatz

Ein Klick auf den ersten Pfeil würde eine Seite in der ersten Hierarchie sprich eine Seite nach der Root erzeugen. Die anderen Pfeile würden eine Unterseite nach/in der jeweiligen Überseite erzeugen. Angelika Reeh Carina Sattler

Seite 27/55

Maturaprojekt CMH

5 Neues Element anlegen

Abbildung 14 Neues Element anlegen

Angelika Reeh Carina Sattler

Seite 28/55

Maturaprojekt CMH

5.1 Allgemeines Plug-In einfügen

Abbildung 15 Plug-In

5.2 Nutzen Mit dem Erstellen immer größerer Websites, Homepages und allgemein 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 CSSInhalt zu füllen.4

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

Angelika Reeh Carina Sattler

Seite 29/55

Maturaprojekt CMH

5.3 Entstehung CSS existiert seit Anfang/Mitte des letzten Jahrzehnts. Schon 1996 wurde dazu eine Spezifikation vom W3C herausgegeben, 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 Effekte 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

Angelika Reeh Carina Sattler

Seite 30/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 31/55

Maturaprojekt CMH

5.4.1Logo Das Logo mussten wir selbst entwerfen, da noch keines vorhanden war. Unsere Klassenkollegin zeichnete uns das selbst entworfene Logo. Danach digitalisierten wir es. Zum Schluss wurde es noch bearbeitet, mit Hilfe des Bildbearbeitungsprogramms GIMP ist uns dies auch gelungen. Abbildung 17 Logo

Angelika Reeh Carina Sattler

Seite 32/55

Maturaprojekt CMH

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 „Erweiterungen importierten“ Anschließend klickt man auf „ Erweiterungsdatei direkt hochladen“

Abbildung 19 Extension hochladen

Angelika Reeh Carina Sattler

Seite 33/55

Maturaprojekt CMH

Abbildung 20 TemplaVoilĂ

Angelika Reeh Carina Sattler

Seite 34/55

Maturaprojekt CMH

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 aktualisieren. Danach in die gewünschte Seite einbinden.

Angelika Reeh Carina Sattler

Seite 35/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 36/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 37/55

Maturaprojekt CMH

6.4 Import und Installation des News-Moduls In TYPO3 existiert hierzu ein Erweiterungsmodul ‚News‘. Über den Erweiterungsmanager kann man dieses Modul zur TYPO3Installation 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 Extension Key tt-news. Mit einem Klick auf den roten Pfeil kann man die Erweiterung zu TYPO3-Installation übertragen und anschließend installieren. Das News-Modul erweitert die Datenbankstruktur von TYPO3 um eine Tabelle (tt_news) in der Newsbeiträge als Datensatz gespeichert werden, und um einige andere 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 Angriff 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. Dazu 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 Einstellungen im Reiter OPTIONEN findet man wieder das PulldownMenü Enthält PLUG-In vor. Anlegen von Datensätzen im News-Ordner Über das Kontextmenü des News-Ordners kann man neue Beiträge anlegen. Das Menü NEUER DATENSATZ enthält jetzt einen Angelika Reeh Carina Sattler

Seite 38/55

Maturaprojekt CMH

Eintrag News, den man auswählen kann. An dieser Stelle kann man auch die Newskategorie einrichten. Anlegen eines Newsdatensatzes: Man klickt auf NEWS um einen Newsdatensatz zu erzeugen. Im Arbeitsfenster öffnet sich eine längere Eingabemaske. Im Bereich ALLGEMEIN kann man zunächst den Nachrichtentitel 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 Category  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 Inhaltsseiten einzubinden, muss erst das Template-Setup erweitert werden. Bislang wäre noch keine Ausgabe möglich. Dazu wechselt man in das Modul WEB<TEMPLATE und öffnet das RootStyleshett über den Link Click here to edit whole Template ercord. Nun wechselt man in den Reiter ENTHÄLT. Um Newsinhalt auszugeben zu können, benötigt TYPO3 noch ein statisches Template.

Angelika Reeh Carina Sattler

Seite 39/55

Maturaprojekt CMH

Einfügen des NEWS-Plugins in die Startseite Bislang haben wir einen Behälter für die Newsbeiträge (den Sysordner)

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 hinzugekommen. Nun muss dem Plugin als Ausgangspunkt noch mitgeteilt werden, aus welchem SysOrdner die Nachrichtendaten zu beziehen

sind.

SONSTIGE

Angelika Reeh Carina Sattler

Anschließend

wechselt

EINSTELLUNGEN

man des

den

Reiter Plugins.

Seite 40/55

Maturaprojekt CMH

Plug-In ausw채hlen

Abbildung 25 Plug-In einf체gen

Angelika Reeh Carina Sattler

Seite 41/55

Maturaprojekt CMH

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 Attribute angeben. Wenn wir dies erledigt haben wechseln wir in die Registerkarte HTML.

Abbildung 27 HTML

Angelika Reeh Carina Sattler

Seite 42/55

Maturaprojekt CMH

In das Eingabefeld f端gen wir nun den HTML-Code ein, den wir von der gew端nschten VideoSeite (z.B.: Youtube) erhalten. Den HTML-Code erhalten wir, indem wir auf der Videoseite auf den Button Einbetten, welchen es bei jedem Video gibt, klicken.

Abbildung 28 HTML Code

Angelika Reeh Carina Sattler

Seite 43/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 44/55

Maturaprojekt CMH

8 Intro erstellen Intro downloaden http://www.templatemonster.com/free-templates.php

Abbildung 31 Intro

AnschlieĂ&#x;end mit Adobe Flash CS bearbeiten.

Abbildung 32 Adobe Flash

Angelika Reeh Carina Sattler

Seite 45/55

Maturaprojekt CMH

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 nachhaltige Anwendungserlebnisse, die auf Desktops, Smartphones, Tablet-PCs und TY-Geräten in gleichbleibender Qualität wiedergegeben werden.

Abbildung 33 Flash Professional

Abbildung 34 Flash Professional 1

www.adobe.com

Angelika Reeh Carina Sattler

Seite 46/55

Maturaprojekt CMH

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 unter 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 aufgeschlossen 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

www.drweb.de

Angelika Reeh Carina Sattler

Seite 47/55

Maturaprojekt CMH

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 Dokumentation 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

Angelika Reeh Carina Sattler

Seite 48/55

Maturaprojekt CMH

10 Homepage/Seiten

Abbildung 38-Intro

Abbildung 37-Home Angelika Reeh Carina Sattler

Seite 49/55

Maturaprojekt CMH

Abbildung 40-Termine

Abbildung 39-News Angelika Reeh Carina Sattler

Seite 50/55

Maturaprojekt CMH

Abbildung 42-Bildergalerie

Abbildung 41-G채stebuch Angelika Reeh Carina Sattler

Seite 51/55

Maturaprojekt CMH

Abbildung 43-Kontakt

Abbildung 44-Hรถhrbeispiele

Angelika Reeh Carina Sattler

Seite 52/55

Maturaprojekt CMH

11 Nachwort Nach ca. 6 Monaten intensiver Arbeit haben wir unser Projekt, eine, dynamische Homepage zu erstellen erfolgreich abgeschlossen. Alle unsere Erwartungen und Vorstellung haben wir erfolgreich ausführen können. Wir hatten zwar anfangs einige Probleme mit der, doch diese waren 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 durften wir einige schöne Erfahrungen sammeln. Weiters haben wir unser Wissen im Bereich PHP sowie im Webdesign 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 Erfahrungen für die Zukunft sammeln.

Angelika Reeh Carina Sattler

Seite 53/55

Maturaprojekt CMH

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

Angelika Reeh Carina Sattler

Seite 54/55