Fachspezifische Themenstellung

Fachspezifische

Themenstellung aus

Information & Communication

Solutions

Auftraggeberin: Sabine Pitnauer

Projektleiterin: Franziska Schießling

Teammitglied: Anita Steyrer

Jahrgang: 2010/2011

Anita Steyrer, Franziska Schießling 2

INHALTSVERZEICHNIS

1 ABBILDUNGSVERZEICHNIS ......................................... 4

2 VORWORT ................................................................... 5

3 ABSTRACT ................................................................... 6

4 PROJEKTMANAGEMENT ............................................... 7

4.1 PROJEKTDEFINITION ............................................................... 7

4.1.1 Istsituation ................................................................................................................. 7

4.1.2 Sachliche Abgrenzung................................................................................................ 8

4.1.3 Zeitliche Abgrenzung ................................................................................................. 9

4.1.4 Soziale Abgrenzung ................................................................................................... 9

4.2 PROJEKTPLANUNG ................................................................. 10

4.2.1 Arbeitsprotokoll ....................................................................................................... 10

4.2.2 Projektstrukturplan (PSP) ........................................................................................ 12

4.2.3 Corporate Design ..................................................................................................... 23

4.3 PROJEKTABWICKLUNG ............................................................ 24

4.3.1 Das Besprechungsprotokoll ..................................................................................... 24

4.4 PROJEKTABSCHLUSS .............................................................. 26

4.4.1 Produktabnahme ..................................................................................................... 26

4.4.2 Projektabschlussanalyse .......................................................................................... 26

4.4.3 Projektauflösung ..................................................................................................... 27

5 JOOMLA ..................................................................... 28

5.1 WAS IST JOOMLA? ................................................................ 28

5.2 CONTENT-MANAGEMENT ................................................... 28

5.3 DER AUFBAU ....................................................................... 29

5.4 TRENNUNG: BACKEND / FRONTEND ............................................ 29

5.5 ERWEITERUNGEN .................................................................. 30

5.6 INHALTE / TEXTE .................................................................. 31

5.7 MENÜS .............................................................................. 32

5.8 BENUTZER .......................................................................... 33

5.9 WEBSITEERSTELLUNG MIT JOOMLA! ............................................ 33

6 GRUNDLAGEN ............................................................ 34


6.1 HTML (HYPERTEXT MARKUP LANGUAGE) ..................................... 34

6.2 PHP ................................................................................. 35

6.3 MYSQL ............................................................................. 36

6.4 CSS .................................................................................. 37

6.5 JAVASCRIPT ........................................................................ 38

6.6 GIMP ............................................................................... 39

6.7 PHOCAGALLERY .................................................................... 40

6.7.1 Vorteile .................................................................................................................... 41

6.7.2 Nachteile ................................................................................................................. 41

7 MICROSOFT OFFICE PICTURE MANAGER ................... 42

8 AUFBAU DER HOMEPAGE ........................................... 43

8.1 TEMPLATE ........................................................................... 43

8.2 SEITE „ÜBER UNS“ ................................................................ 44

8.3 SEITE „DIE CREW“ ................................................................ 45

8.4 SEITE „FOTO“ ...................................................................... 46

8.5 SEITE „PRODUKTE“ ............................................................... 47

8.6 SEITE „SALON HIGHLIGHTS“ .................................................... 48

8.7 SEITE „LAGE“ ...................................................................... 49

8.8 SEITE „IMPRESSUM“ .............................................................. 50

9 NACHWORT ............................................................... 51

10 LITERATURVERZEICHNIS .......................................... 52


1 Abbildungsverzeichnis

ABBILDUNG 1: PROJEKTSTRUKTURPLAN .................................................................................................... 12

ABBILDUNG 2: AUFBAU ......................................................................................................................... 29

ABBILDUNG 3: FRONTEND ABBILDUNG 4: BACKEND .............................................................................. 29

ABBILDUNG 5: ERWEITERUNG INSTALLIEREN .............................................................................................. 30

ABBILDUNG 6: ZUGRIFFSRECHTE ............................................................................................................. 32

ABBILDUNG 7: MENÜ ........................................................................................................................... 33

ABBILDUNG 8: HTML ........................................................................................................................... 34

ABBILDUNG 9: DARSTELLUNG DER FUNKTIONSWEISE VON PHP .................................................................... 35

ABBILDUNG 10: MYSQL-LOGO .............................................................................................................. 36

ABBILDUNG 11: JAVASCRIPT-LOGO ......................................................................................................... 38

ABBILDUNG 12: GIMP ......................................................................................................................... 39

ABBILDUNG 13: PHOCAGALLERY ............................................................................................................. 40

ABBILDUNG 14: PHOCAGALLERY 2 .......................................................................................................... 40

ABBILDUNG 15: FOTOANZEIGE ............................................................................................................... 41

ABBILDUNG 16: FOTOANZEIGE2 ............................................................................................................. 41

ABBILDUNG 17: MICROSOFT OFFICE PICTURE MANAGER ............................................................................ 42

ABBILDUNG 19: TEMPLATE1 .................................................................................................................. 43

ABBILDUNG 18: TEMPLATE2 .................................................................................................................. 43

ABBILDUNG 20: HEAD .......................................................................................................................... 43

ABBILDUNG 21: HAUPTMENÜ ................................................................................................................ 43

ABBILDUNG 22: FRONTEND ................................................................................................................... 44

ABBILDUNG 23: SEITE "ÜBER UNS" ......................................................................................................... 44

ABBILDUNG 24: SEITE "DIE CREW" ......................................................................................................... 45

ABBILDUNG 25: FOTOANSICHT ............................................................................................................... 46

ABBILDUNG 26: SEITE "FOTO" ............................................................................................................... 46


ABBILDUNG 28: SEITE „PRODUKTE“ ........................................................................................................ 47

ABBILDUNG 29: SEITE "SALON HIGHLIGHTS" ............................................................................................. 48

ABBILDUNG 30: SEITE „LAGE“ ................................................................................................................ 49


ABBILDUNG 32: SEITE „IMPRESSUM“ ...................................................................................................... 50


2 Vorwort

Im Zuge unseres Ausbildungsschwerpunktes Information und

Communication Solutions haben wir uns dazu entschieden, eine

Webseite mittels eines CMS zu entwerfen, um unser erworbenes

Wissen der letzten drei Jahre in die Praxis umzusetzen.

Auf dieser Seite sollte es für den Besucher möglich sein, Infor-

mationenüber den Friseursalon Angelika in Wien zu finden.

Unser Ziel war es die Homepage vom Design so ansprechend

und benutzerfreundlich wie möglich zu gestalten. Dabei sollten

alle gewünschten Inhalte berücksichtig und neue Ideen einge-

bracht werden.

Wir hoffen, das Ergebnis unseres Projekts entspricht den Vorstel-

lungen unseres Auftraggebers.


3 Abstract

In the course of our training priority Information and Communi-

cation Solutions (ICS) we decided to generate a website by using

a content management system, to realize our knowledge for the

last three years.

The condition was to design an appropriate homepage for the

coiffeur Salon Angelika in Vienna.

Our target was to create an attractive and user-friendly design

for our homepage. There should all desires contents be included

and new ideas should be inserted.

We hope the result of our project corresponds to the imagination

of our applicant.


4 Projektmanagement12

Projektmanagement ist ein Prozess zur Durchführung von Pro-

jekten, der

o den Projektstart,

o die Projektkoordination,

o das Projektcontrolling,

o das Projektmarketing und

o den Projektabschluss

beinhaltet.

4.1 Projektdefinition

Voraussetzung für jedes erfolgreiche Projekt ist eine eindeutige

Definition der Aufgabe. Diese Aufgabe muss sachlich, zeitlich und

sozial abgegrenzt sein.

4.1.1 Istsituation

Frau Pitnauer interessiert sich für eine Homepage. Sie erkundigte

sich bereits in ihrer Umgebung. Das ist eine gute Gelegenheit für

unser Projekt. Es ist noch keine Homepage vorhanden. Frau Pit-

nauer war für alles offen.

1 o.V.: http://de.wikipedia.org/wiki/projektmanagement/ 2 AINF-Musterseiten, PDF-Datei, Mag. Strebinger

http://de.wikipedia.org/wiki/projektmanagement/


4.1.2 Sachliche Abgrenzung

Ziele:

Webseite soll über das Geschäft informieren

einen Einblick in den Salon bieten

Angebote und Trends präsentieren

positive Wirkung auf die Kunden haben

passendes Template wählen

dynamische Webseite

neuesten Informationen über Angebote

Bildergalerie

Vorstellung der Mitarbeiter

Anfahrtsplan erstellen

Nicht-Ziele:

nicht funktionierende Homepage

unübersichtliche Webseite

nicht funktionierender oder falscher Anfahrtsplan

Unzufriedenheit der Auftraggeberin


4.1.3 Zeitliche Abgrenzung

Projektstart: 22. September 2010

Projektende: 23. März 2011

4.1.4 Soziale Abgrenzung

Auftraggeberin: Sabine Pitnauer

Projektleiterin: Franziska Schießling

Teammitglied: Anita Steyrer


4.2 Projektplanung

Die Projektplanung ist die zweite Phase der Projekt-Hauptphasen

eines Projektes. Sie bereitet die Projektdurchführung so gut wie

möglich vor. Wird von vornherein falsch oder gar nicht geplant,

kann das Projekt nicht gut durchgeführt bzw. abgewickelt wer-

den.

4.2.1 Arbeitsprotokoll

Datum Arbeitsschritt

22.9 Projektstart

PowerPoint „Frisörsalon Angelika“ erstellt

29.9 Passendes Template suchen

Entscheidung für CMS :Joomla

3.11 Bild für Logo gesucht

Head bearbeitet

Über Joomla informiert (Handbuch)

17.11 Template angepasst und neuer Head hochgeladen

24.11 Nach Angaben der Auftraggeberin

1.12 Navigation bearbeiten

Seiten erstellen: Über uns

Die Crew

Fotos

Produkte

Salon Highlights

Lage

Impressum

15.12 Text für die Seiten Über uns und Salon Highlights

eingegeben und bearbeitet

22.12 Fotos der Mitarbeiter und Text auf der Seite Die

Crew hinaufgeladen

29.12 Seiten Produkte fertiggestellt

5.1 Noch mehr Bildmaterial vom Salon gemacht

( Salon, Mitarbeiter)

Auf Seite Foto Ordner erstellt: Rund ums Geschäft

Google Maps installiert

12.1 Fotos hochgeladen

Seite: Über uns fertiggestellt


19.1 Seiten: Über uns und Salonhighlights bearbeitet

26.1 Impressum erstellt

anderen Seiten verbessert

23.2 Fachspezifische Themenstellung

Auf Seite Foto Ordner erstellt: Unsere Kunden

Mitarbeiter

Produkte

16.3. Fachspezifische Themenstellung

Kleine Korrekturen Homepage


4.2.2 Projektstrukturplan (PSP)

Im PSP wird die Problemstellung in Teilaufgaben, den Meilenstei-

nen, mit Arbeitspaketen (AP) gegliedert.

Abbildung 1: Projektstrukturplan


4.2.2.1 Meilensteine (MS)

Meilensteine sind Zwischenziele eines Projektes und sind sehr

wichtig, da sie den gesamten Ablauf in mehrere kleine über-

schaubarere Etappen einteilen.

4.2.2.2 Arbeitspakete (AP)

Jedes Arbeitspaket hat einen PSP-Code und muss ein klar defi-

niertes Ziel haben. Es muss festgehalten werden, wer für die

Einhaltung von Terminen verantwortlich ist.

Meilenstein 1: Konzept erstellt und mit Auftragge-

berin koordiniert

Arbeitspaket: 1.1 Konzept erstellen

Zuständige: Anita Steyrer

Ziele: Ideen und Vorschläge ausarbeiten, Corporate Design für

die Website machen, Farben

Nichtziele: keine Ideen

Start: 6. Oktober 2010

Ende: 22. Oktober 2010

Benötigte Ressourcen: Laptop, Internet, Zeit

Arbeitspaket: 1.2 Ideen mit Auftraggeberin besprechen


Ziele: klare, einheitliche Vorstellung von der Homepage, Vorstel-

len der Ideen, Farben und Corporate Design bestimmen


Nichtziele: Unklarheit, keine Ideen, keine Übereinstimmungen

zwischen Auftraggeber und Ausführer



Benötigte Ressourcen: Laptop, ausgearbeitete Datei mit den

Ideen/Vorschlägen

Arbeitspaket: 1.3 Koordination

Zuständige: Franziska Schießling

Ziele: Vorstellungen der Auftraggeber und der Ausführenden

kombinieren, Konzept umändern

Nichtziele: Unklarheit, keine Umsetzmöglichkeiten



Benötigte Ressourcen: Laptop, Datei mit den ausgearbeite-

ten Ideen

Meilenstein 2: Unterlagen gesammelt

Arbeitspaket: 2.1 Texte organisieren


Ziele: Texte (Geschichte, Beschreibung der Personen, Produkte)

beschaffen, genaue Adresse

Nichtziele: keine oder falschen Texte



Ende: 15. Dezember 2010

Benötigte Ressourcen: Laptop, Internet

Arbeitspaket: 2.2 Texte umschreiben/bearbeiten


Ziele: Texte (Geschichte, Beschreibung der Personen, Produkte)

bearbeiten und richtigstellen

Nichtziele: Fehler im Texte, unvollständiger Text



Benötigte Ressourcen: Laptop, Datei

Arbeitspaket: 2.3 Bilder machen


Ziele: viele Fotos im Salon, von den Produkten und auch von

außen machen

Nichtziele: unscharfe Bilder, zu wenig Material



Benötigte Ressourcen: Fotoapparat, Fotoausrüstung

Arbeitspaket: 2.4 Bilder bearbeiten


Ziele: Bilder bearbeiten (auch Kontrast und komprimieren)


Nichtziele: unscharfe Bilder



Benötigte Ressourcen: Laptop, Gimp, Microsoft Office Picture

Manager

Meilenstein 3: Entwurf der Webseite erstellt

Arbeitspaket: 3.1 Template suchen


Ziele: passendes modernes Template finden

Nichtziele: kein geeignetes/schönes Template finden


Ende: 10. November 2010


Arbeitspaket: 3.2 Template bearbeiten


Ziele: Template umändern, andere Bilder, passendes Hauptme-

nü auswählen

Nichtziele: Bilder passen nicht zum Template, unübersichtliches

Template





Arbeitspaket: 3.3 Design


Ziele: Template mit dem gesammelten Ideen und Farben aus-

bessern, und mit dem Konzept übereinstimmen

Nichtziele: keine gute Farbkombination im Template, unprofes-

sionelles Design




Meilenstein 4: Website programmiert und getestet

Arbeitspaket: 4.1 Seite „Über uns“


Ziele: Willkommene Startseite, Texte und Bilder einfügen, pas-

sender Hintergrund

Nichtziele: Funktioniert nicht, Texte und Bilder verschoben, Ma-

terialien nicht mehr vorhanden

Start: 10. November 2010


Benötigte Ressourcen: Laptop, Internet, Bilder, Texte,

Template


Arbeitspaket: 4.2 Seite „Die Crew“

Zuständige: Franziska Schiessling

Ziele: gute Übersicht über die Personen, Information wann wer

arbeitet

Nichtziele: Funktioniert nicht, Materialien nicht vorhanden, un-

übersichtlich

Start: 10. November 2010


Benötigte Ressourcen: Laptop, Internet, Materialien (Fotos,

Text)

Arbeitspaket: 4.3 Seite „Fotos“


Ziele: Bilder in guter Qualität hochladen, Photogalerie (Erweite-

rung) installieren und anwenden

Nichtziele: Bildershow das zu lange ladet, Bilder verpixelt, Bil-

der nicht mehr vorhanden

Start: 1. Dezember 2010


Benötigte Ressourcen: Laptop, Internet, Bilder

Arbeitspaket: 4.4 Seite „Produkte“


Ziele: gute Übersicht über die Produktmarken


Nichtziele: Funktioniert nicht, nicht aktualisiert, nicht übersicht-

lich

Start: 1 Dezember 2010


Benötigte Ressourcen: Laptop, Internet, Datei mit den Pro-

dukten

Arbeitspaket: 4.5 Seite „Lageplan“


Ziele: Anfahrtsplan darstellen, Hilfe um zum Geschäft zu finden

Nichtziele: Funktioniert nicht, falsche Adresse, komplizierter

unverständlicher Lageplan



Benötigte Ressourcen: Laptop, Internet, Adressdaten

Arbeitspaket: 4.6 Seite „Salon Highlights“


Ziele: Übersicht über die Besonderheiten im Salon

Nichtziele: Funktioniert nicht, nicht aktuell, nicht übersichtlich,

falsche Informationen


Ende: 12. Jänner 2011

Benötigte Ressourcen: Laptop, Internet, Informationen


Arbeitspaket: 4.7 Seite „Impressum“


Ziele: Informationen über die/den Haftende/n

Nichtziele: Funktioniert nicht, falsche Angaben,

Start: 12 Jänner 2010

Ende: 26. Jänner 2011

Benötigte Ressourcen: Laptop, Internet, Adressdaten

Arbeitspaket: 4.8 Website testen


Ziele: Funktionstüchtige Website, richtige Angaben in den Sei-

ten, Plug-ins arbeiten, alles funktioniert und Website ist nach den

Vorstellungen der Auftraggeberin und dem Konzept

Nichtziele: Probleme auf der Webseite, Funktioniert nicht, nicht

aktuell, nicht übersichtlich, falsche Informationen

Start: 26. Jänner 2011

Ende: 9. Februar 2011


Meilenstein 5: Website überarbeitet

Arbeitspaket: 5.1 Website präsentieren


Ziele: Funktionstüchtige Website präsentieren, Auftraggeberin

ist zufrieden, geringe Änderungen,


Nichtziele: Unzufriedenheit der Auftraggeberin, große Ände-

rungsvorschläge,

Start: 23. Februar 2011

Ende: 2. März 2011


Arbeitspaket: 5.2 Website überarbeiten


Ziele: Änderungsvorschläge passend umsetzen, Fehler korrigie-

ren

Nichtziele: Verbesserungsvorschläge können nicht umgesetzt

werden, Fehler weiterhin vorhanden

Start: 2. März 2011

Ende: 16. März 2011


Arbeitspaket: 5.3 Website fertigstellen


Ziele: Homepage ganz fertig stellen, alles funktioniert

Nichtziele: unfertige Homepage, Seiten funktionieren nicht


Ende: 23. März 2011



Meilenstein 6: Website veröffentlicht

Arbeitspaket: 6.1 Website veröffentlichen


Ziele: Funktionstüchtige Website veröffentlichen

Nichtziele: unfertige Website online stellen, Website funktioniert

nicht


Ende: 6. April 2011



4.2.3 Corporate Design

Zielgruppe: Jugendliche und Erwachsene, die wertlegen auf ein

gepflegtes Äußeres

Viele Bilder: mindestens 1 Bild pro Seite

Schriften: Calibri, Times New Roman, Verdana, Excellentia

Farben: weiß (Schrift, Rahmen), rot (Hintergrund, Head, Me-

nü)

Html: 600004

RGB: 96/0/4

CMYK: 0/100/96/62

Html: 9b1b21

RGB: 155/27/33

CMYK: 0/83/79/39

Html: bc0011

RGB: 188/0/17

CMYK: 0/100/91/26

Sonstiges: elegant, verspielt


4.3 Projektabwicklung

Nachdem das Projekt fertig geplant ist, ist jedes Projektteammit-

glied mit der Bearbeitung seiner übernommenen Arbeitspakete

beschäftigt.

4.3.1 Das Besprechungsprotokoll

Es wird erstellt, um Besprechungsergebnisse zu sichern und Ver-

einbarungen zu dokumentieren.

1. Besprechung

Datum: Samstag, 9. Oktober 2010

Ort: Stixneusiedl

Teilnehmer: Franziska Schießling, Anita Steyrer

Natürlich mussten wir für die 1. Besprechung auch einiges vorbe-

reiten. Wir entwickelten ein Corporate Design und fassten zu-

sammen was wir uns vorstellten und was wir fragen wollten:

Welche Seiten sollte die Homepage unbedingt haben?

Welche Seite soll die Startseite werden?

Welche Farben sollen verwendet werden?

Soll die Webseite ein bestimmtes Logo beinhalten?

Wo soll sich die Navigation befinden?

Welche Besonderheiten/Vorstellungen/Wünsche haben

Sie?

Frau Pitnauer gefiel unser Corporate Design und unsere Ideen.

Sie beantwortete unsere Fragen gerne und war mit allem einver-

standen.


2. Besprechung

Datum: Samstag, 18. Dezember 2010

Ort: Stixneusiedl


Während des Unterrichts schrieben wir immer mit, was wir Frau

Pitnauer das nächste Mal fragen wollten.

Bei dem 2. Treffen zeigten wir ihr die bereits erstellten Seiten

und erkundigten sich, ob alles nach ihren Vorstellungen sei.

Sie wollte noch einen kleinen Kalender unter den Öffnungszeiten.

3. Besprechung

Datum: Samstag, 12. März 2011

Ort: Wilfleinsdorf


Wir präsentierten Frau Pitnauer die fertiggestellte Homepage und

sie war sehr zufrieden mit dem Ergebnis.


4.4 Projektabschluss

Der Projektabschluss ist die letzte Etappe des Projekts und bein-

haltet unter anderem Produktabnahme, Projektabschlussanalyse

und Projektauflösung.

4.4.1 Produktabnahme

Die Produktabnahme führt den Projektabschluss herbei. Dabei

erfolgt die Übergabe an den/die Projektauftraggeber/in und man

sollte über eine zukünftige eventuelle Betreuung des Erstellten

Abmachungen treffen.

4.4.2 Projektabschlussanalyse

In der Projektabschlussanalyse sollte man eine abschließende

Nachkalkulation durchführen. Abweichungen hinsichtlich Kosten,

Termine und Qualität sollen analysiert werden.

PSP-Code Meilenstein SOLL-Termin IST-Termin

1.0 Konzept erstellt

und mit Auftragge-

berin koordiniert

27. 10. 2010 9. 10. 2010

2.0 Unterlagen ge-

sammelt

7. 12. 2010 20. 11. 2010

3.0 Entwurf der Websi-

te erstellt

10. 11. 2010 17. 11. 2010

4.0 Website program-

miert und getestet

9. 2. 2011 26. 1. 2011

5.0 Website überarbei-

tet

23. 3. 2011 16. 3. 2011

6.0 Website veröffent-

licht

6. 4. 2011 27.10.2010


4.4.3 Projektauflösung

Der allerletzte Schritt eines Projektes ist die Projektauflösung.

Jedes Projekt muss sowohl einen klaren Anfang als auch ein ein-

deutiges Ende haben.


5 Joomla3

5.1 Was ist Joomla?

Joomla ist ein Content Management System, kurz CMS. Es ist aus

dem Vorgänger Mambo hervorgegangen. Wie bei vielen CMS wird

streng zwischen Desgin bzw. Layout und Inhalten unterschieden. So

ist es möglich, innerhalb von Sekunden das Aussehen einer Seite

komplett zu verändern, ohne dabei die Inhalte neu eingeben zu

müssen. Joomla benötigt eine Datenbank. In diese Datenbank wer-

den nahezu alle Informationen (die Inhalte) gespeichert. In der Re-

gel wird hier eine MySQL-Datenbank verwendet. Joomla ist quellof-

fen4 und wird unter der GNU General Public License veröffentlicht.

GNU GPL ist freie Software Lizenz mit Copyleft. Durch das Copyleft

wird das Recht zum Kopieren generell geschützt, während es durch

das Copyright verboten wird. Joomla ist also kostenlos.

5.2 Content-Management

Ein Content-Management-System (CMS) ist eine Software, die eine

gemeinschaftliche Arbeit an verschiedenen Inhalten ermöglicht und

organisiert. Unter dem Begriff »Inhalt« ist dabei eine in sich ge-

schlossene Einheit zu verstehen. Das kann ein Text oder ein Bild

sein, aber auch andere Medientypen (Audio, Video etc.) sind denk-

bar.

3 O.V.: http://openbook.galileocomputing.de/joomla15/ 4 ist eine Palette von Lizenzen für Software, deren Quelltext öffentlich zugäng-

lich ist und durch die Lizenz Weiterentwicklungen fördert

http://openbook.galileocomputing.de/joomla15/


5.3 Der Aufbau

Bei Joomla! arbeitet man immer von oben nach unten. Hat man

zum Beispiel einen Beitrag offen so kann man nicht gleich wieder

in die Statusleiste zurückkehren sondern muss zuerst den Bei-

trag schließen.

Abbildung 2: Aufbau

5.4 Trennung: Backend / Frontend

Wie bei vielen CMS besteht auch bei Joomla! die Trennung von

Frontend, also der Seite, die der Nutzer sieht und dem Backend,

der Administrationsoberfäche.

Außerdem kann man bei Joomla die Inhalte der Site auch aus

dem Frontend bearbeiten.

Abbildung 3: Frontend Abbildung 4: Backend


5.5 Erweiterungen

Joomla! ist sehr modular aufgebaut. Das bedeutet, dass die aus-

gegebene Seite aus vielen Modulen besteht, für deren Ausgabe

verschiedene Extensions verantwortlich sind. Erweiterungen las-

sen sich einfach über die Administrationsoberfläche installieren.

Abbildung 5: Erweiterung installieren

Bei Joomla! gibt es verschiedene Arten von Programmmodulen,

die je nach Verwendung und Aufgabe unterschiedlich umfang-

reich sind. Man unterscheidet: Komponenten, Module, Plu-

gins und Templates.

Templates

Templates sind Vorlagen für die Ausgabe der Website. Sie beste-

hen aus HTML-Code und einzelne Tags, die Joomla! durch die

Inhalte, Menüs und Module ersetzt, die man über die Administra-

tion konfiguriert hat.

Komponente

Komponenten sind die komplexesten Erweiterungen. Sie sorgen

für die Ausgabe von Texten, Linklisten, Kontaktformularen und

Vielem mehr.

Module


Als Module bezeichnet man einfache Erweiterungen, die für Aus-

gaben von Informationen an den Modulpositionen zuständig sind.

Beispiele sind: Menüs, Newsflash und das Loginformular

Plugins

Plugins arbeiten im Hintergrund. Sie sorgen für die Durchsu-

chung der Datenbank, wenn der Nutzer die Suchfunktion der

Website nutzt.

5.6 Inhalte / Texte

Joomla! bietet zwei Arten von Texten: Static Content und Con-

tent. Static Content ist für Texte gedacht, die sich in der Regel

nicht ändern. Solche Texte sind z.B. das Impressum. Andere In-

halte wie News und andere Artikel speichert man als Content.

Zur Strukturierung der Inhalte bietet Joomla! die Bereiche und

Kategorien. Jeder Kategorie muss ein Bereich zugewiesen sein.

Jedem Beitrag muss ein Bereich und eine Kategorie zugewiesen

werden. Definiert man keinen Bereich und keine Kategorie bzw.

wählt man jeweils "nicht kategorisiert", so ist der Beitrag ein

Static Content (Seiten die sich wenig ändert).

Außer den erforderlichen Einstellungen wie Bereich, Kategorie,

Freigabe, Titel und Text, kann man auch noch weitere Parameter

konfigurieren. Beispielsweise kann man für den Artikel je ein Da-

tum zur Freigabe und zur Beendung der Freigabe einstellen oder

Zugriffsrechte vergeben.


Abbildung 6: Zugriffsrechte

Der eigentliche Beitrag kann bequem per WYSIWYG-Editor5 oder

auch direkt als HTML eingegeben werden. Dank dieses-Editors

können auch HTML-unerfahrene Nutzer Inhalte einfügen und

komfortabel formatieren.

Bei diesen Editoren wird ein Dokument während der Bearbeitung

am Bildschirm genauso angezeigt, wie es bei der Ausgabe über

ein anderes Gerät, z. B. einem Drucker, aussieht.

5.7 Menüs

Bei Joomla! kann man beliebig viele Menüs erstellen und im

Template auf verschiedene Weisen platzieren. In den Menüs

kann man Menüeinträge mit beliebig tiefer Hierarchie erstellen.

Diese Art der Menükonfiguration macht die Menüs unabhängig

von der Inhaltsstruktur und erlaubt somit flexiblere Menükonfi-

guration als manche anderen CMS, die die Menüs anhand der

Struktur des Inhaltes erstellen.

5 ist eine Abkürzung für das Prinzip „What You See Is What You Get“ („Was

du siehst, ist das, was du bekommst.“)


Abbildung 7: Menü

5.8 Benutzer

Die Benutzerverwaltung von Joomla! ist einfach gestrickt und

ermöglicht nur wenige Einstellungen. Im Gegensatz zu vielen

CMS bietet Joomla! nämlich keine Möglichkeit die Benutzer auf

die Arbeit an einem bestimmten Bereich der Seite zu beschrän-

ken.

5.9 Websiteerstellung mit Joomla!

Das Erstellen einer Website mit Joomla! erfordert einige Einar-

beitung. Wenn dann allerdings das Template, die Grundstruktur

und erste Inhalte bearbeitet sind, erleichert Joomla! die Pflege

und Erweiterung der Website und bietet viel Flexibilität.


6 Grundlagen

6.1 HTML6 (Hypertext Markup Language) 7

Man bezeichnet HTML oft auch als Hypertext. Die aktuelle HTML-

Version trägt die Nummer 4.01 HTML5.

HTML wurde 1990 von dem Wissenschaftler Tim Berners-Lee er-

funden. Er legte mit dieser Erfindung den Grundstein für das In-

ternet.

Wenn man eine Website erstellen will, geht kein Weg an HTML

vorbei. HTML ist eine Sprache, die es ermöglicht, Informationen

im Internet auszugeben. Es strukturiert Inhalte wie Texte, Bilder

und Hyperlinks, sowie für beliebige Befehle für Formatierungen

in Dokumenten.

Ein HTML-Dokument besteht aus drei Bereichen:

der Dokumenttypdeklaration diese gibt verwendete Doku-

menttypdefinition an

dem HTML-Kopf (HEAD),

dem HTML-Körper (BODY), der jene

Informationen enthält, die gewöhnlich-

erweise im Anzeigebereich des Brow-

sers zu sehen sind.

6 o.V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language/ 7 dt. Hypertext-Auszeichnungssprache

Abbildung 8: HTML

http://de.wikipedia.org/wiki/Dokumenttypdeklaration

http://de.wikipedia.org/wiki/Dokumenttypdefinition

http://de.wikipedia.org/wiki/Dokumenttypdefinition

http://de.wikipedia.org/wiki/Hypertext_Markup_Language


6.2 PHP8

PHP9 ist eine Skriptsprache die hauptsächlich zur Erstellung dy-

namischer Webseiten oder Webanwendungen verwendet wird.

PHP wurde 1995 von Rasmus Lerdorf entwickelt. Ursprünglich

war PHP als Ersatz für eine Sammlung von Perl-Skripten ge-

dacht. Bald schuf Lerdorf eine umfangreichere Version in der

Programmiersprache C, in der PHP bis heute entwickelt wird.

Schließlich wurde PHP/FI10 veröffentlichte.

Um PHP-Scripte ausführen zu können, benötigt man einen Web-

server wie zum Beispiel Apache und einen PHP-Interpreter.

8 http://de.wikipedia.org/wiki/PHP/ 9 Hypertext Preprocessor, Backronym aus „Personal Home Page Tools“ 10 FI stand für Form Interpreter

Abbildung 9: Darstellung der Funktionsweise von PHP

http://de.wikipedia.org/wiki/Skriptsprache

http://de.wikipedia.org/wiki/Perl_(Programmiersprache)

http://de.wikipedia.org/wiki/C_(Programmiersprache)

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

http://de.wikipedia.org/wiki/Hypertext

http://de.wikipedia.org/wiki/Pr%C3%A4prozessor

http://de.wikipedia.org/wiki/Backronym

http://de.wikipedia.org/wiki/Homepage


6.3 MySQL11

Der MySQL Server ist ein Relationales Datenbankverwaltungs-

system, es ist als Open-Source-Software für verschiedene Be-

triebssysteme verfügbar und bildet die Grundlage für viele dy-

namische Webauftritte.

MySQL ist leistungsfähig, zuverlässig und benutzerfreundlich,

dadurch wurde es einer der bekanntesten Open-Source-

Datenbanken.

MySQL kann auf mehr als 20 Plattformen eingesetzt werde, un-

ter anderem Linux, Windows, OS/X, HP-UX und Netware. da-

durch erhält man größtmögliche Flexibilität.

MySQL ist mit mehr als 6 Millionen Installationen und über

64.000 Downloads pro Tag das populärste Open-Source-

Datenbankverwaltungssystem der Welt. Es kommt beispielsweise

bei Google, YouTube, Wikipedia und Twitter zum Einsatz.

Abbildung 10: MySQL-Logo

11o.V.: http://www.mysql.de/

http://www.mysql.de/


6.4 Css12

CSS ist das Akronym für Cascading Style Sheets.

CSS ist eine Stilsprache, die das Aussehen von HTML-

Dokumenten definiert. CSS kann man z.B. zum festlegen von

Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hinter-

grundbildern, für fortgeschrittener Positionierung und viele ande-

re Sachen benutzen.

Es werden in einem bestimmten Dokument also die Untergliede-

rungs-Elemente mit den hierfür zu verwendenden CSS-Klassen

ausgezeichnet, während die konkreten Darstellungsattribute in

den Definitionen dieser Klassen hinterlegt werden. Diese Klassen

können dann zentral definiert werden, vorzugsweise sogar in ei-

nem separaten Dokument, was ihre Wiederverwendung für an-

dere Dokumente erleichtert.

CSS war eine Revolution im Webdesign. Die konkreten Vorteile

sind u.a.:

Kontrolle über das Layout vieler Webseiten aus einer einzi-

gen Style-Sheet-Datei heraus

präzisere Kontrolle über das Layout

verschiedene Layouts für verschiedene Medientypen (Bild-

schirmanzeige, Druck etc.)

eine Vielzahl von fortgeschrittenen und anspruchsvolle

Techniken

12o.V.: http://de.html.net/tutorials/css/lesson1.php

http://de.html.net/tutorials/css/lesson1.php


6.5 JavaScript13

JavaScript ist eine Ergänzung zu HTML und eine echte Program-

miersprache. JavaScript wird in ein HTML-Dokument eingebettet.

Das bedeutet: Ohne HTML-Dokument und Browser kann man

JavaScript nicht einsetzen.

Während HTML/CSS nur rudimentäre Möglichkeiten zur Nutzerin-

teraktion bietet, können mit JavaScript Inhalte generiert und

nachgeladen werden.

JavaScript wird hauptsächlich clientseitig eingesetzt, im Unter-

schied zu anderen im Web verwendeten Sprachen, wie Perl oder

PHP, die ausschließlich serverseitig eingesetzt werden. JavaScript

bzw. die ECMAScript-Implementierungen finden jedoch bei-

spielsweise auf (NES14 und weitere Beispiele für serverseitige

Javascript-Programmierung sind POW

und Jaxer, die auf der Mozilla-

Javascript-Engine Spidermonkey auf-

setzen.

13o.V.: http://de.wikipedia.org/wiki/JavaScript/ 14 Netscape Enterprise Servern

Abbildung 11: JavaScript-Logo

http://de.wikipedia.org/wiki/JavaScript/


6.6 GIMP15

GIMP16 ist ein freies, sehr leistungsfähiges Photo- und Bildbear-

beitungsprogramm. Der Name GIMP ist zusammengesetzt aus

den englischen Worten „GNUImage Manipulation Program“, was

im Deutschen soviel bedeutet wie „GNU17 Bildbearbeitungspro-

gramm“.

Man kann GIMP für eine Vielzahl an Aufgaben einschließlich Pho-

tonachbearbeitung, Bildkomposition und -malerei einsetzen.

Eine große Auswahl an Malwerkzeugen, wie Pinsel, Stift, Sprüh-

pistole (Airbrush), Klonwerkzeug und vielen weiteren, Transfor-

mationswerkzeuge wie Rotieren, Skalieren, Scheren und Spie-

geln,

lesen und schreiben verschiedenster Dateiformate wie beispiels-

weise GIF, JPEG, PNG, BMP und viele weitere,

und zu guter Letzt: die Möglichkeit, GIMP durch verschiedenste

Erweiterungen um neue Dateiformate, Filter und Funktionen zu

bereichern.

Abbildung 12: GIMP

15 o.V.: http://docs.gimp.org/de/introduction.html/ 16 GNU Image Manipulation Program, ursprünglich: General Image Manipula-

tion Program 17 vollständig freies Betriebssystem, genannt GNU „GNU is not Unix

http://docs.gimp.org/de/introduction.html/


6.7 Phocagallery1819

Die Phoca-Gallery ist eine frei verfügbare Galerie-Komponente

für Joomla!. Man steigt über das Backend, wodurch man auf das

Control-Panel der

Galerie gelangt.

Bis die Bilder im Frontend erscheinen, bedarf es 4 Schritte:

1. Kategorien / Alben erstellen

2. Den richtigen Ordner wählen

3. Bilder hochladen

4. Bilder einer Kategorie zuweisen

18o.V.: http://www.joomlaos.ch/tipps-tricks/komponenten/31-phoca-gallery/ 19 o.V.: http://www.joomla-galerien.de/phoca-gallery.html

Abbildung 13: Phocagallery

Abbildung 14: Phocagallery 2

http://www.joomlaos.ch/tipps-tricks/komponenten/31-phoca-gallery/

http://www.joomla-galerien.de/phoca-gallery.html


6.7.1 Vorteile

einfach zu installieren

einfaches Upgrade

Unterschiedliche Darstellungsformen über Konfigurati-

on/Themes

Geotagging für Kategorien möglich

Ausführliches Handbuch verfügbar

6.7.2 Nachteile

Kommentare und Bewertung nur für registrierte User zu-

gänglich

Nur eine Userkategorie möglich

Bildordnerpfad nicht verschiebbar

Abbildung 15: Fotoanzeige

Abbildung 16: Fotoanzeige2


7 Microsoft Office Picture Manager20

Mit Microsoft Office Picture Manager hat man die Möglichkeit, die

Verwaltung, Bearbeitung und gemeinsame Nutzung von Bildern

flexibel zu handhaben. Man kann leicht und schnell kleine Kor-

rekturen vornehmen. Falls es sich um eine eher spezifische An-

passung handelt, kann man aus einer Reihe verschiedener Tools

für die Bildbearbeitung wählen. Man kann mit dem Office Picture

Manager das Aussehen der Bilder durch folgende Einstellungen

verändern: Helligkeit und Kontrast, Farbe, Zuschneiden, Drehen

und spiegeln, Rote Augen entfernen und Größe ändern.

Dieses Programm haben wir hauptsächlich für die Komprimie-

rung der Fotos verwendet.

20o.V.: http://office.microsoft.com/de-ch/help/informationen-zu-picture-

manager-HP001001721.aspx/

Abbildung 17: Microsoft Office Picture Manager

http://office.microsoft.com/de-ch/help/informationen-zu-picture-manager-HP001001721.aspx/



8 Aufbau der Homepage

8.1 Template

Nachdem wir das Konzept erstellt hatten suchten wir nach einem

passenden Template. Erst bei der Suche entschieden wir uns die

Homepage mit dem CMS Joomla! zu gestalten. Die zwei Templa-

tes, die wir gefunden haben, passten am besten zu unseren

Ideen und zu den Vorstellungen von Frau Pitnauer.

Abbildung 19: Template1

Wir entschieden uns dann für das Template Red Rose wo wir das

Head-Bild und die Navigation, nach den Vorstellungen und Wün-

schen der Auftraggeberin, verändert haben:

Abbildung 18: Template2

Abbildung 20: Head

Abbildung 21: Hauptmenü


8.2 Seite „Über uns“

Wir entschieden uns diese Seite als Startseite unserer Homepage

zu verwenden. Sie soll Informationen über die Geschichte und

die Inhaberin des Betriebs geben.

Zuerst haben wir den Text zusammengefasst und dann über das

Frontend in die Seite eingebunden.

Abbildung 22: Frontend

Um die Seite interessanter zu gestalten haben wir noch ein Bild

eingefügt.

Abbildung 23: Seite "Über uns"


8.3 Seite „Die Crew“

Natürlich sollte unsere Homepage die Mitarbeiter auch vorstellen

und Angaben zu den Personen liefern.

Es wurden zuerst Fotos der Mitarbeiterinnen gemacht, diese

dann im Backend hochgeladen, dann erstellten wir eine Tabelle,

fügten Lichtbilder und Text ein. Anschließend passten wir die Ta-

belle an die Größe des Mittelteils an.

Abbildung 24: Seite "Die Crew"


8.4 Seite „Foto“

Auch sollte man durch Fotos einen Einblick in den Salon erhalten,

darum erstellten wir eine Seite „Fotos“.

Wir fotografierten Salon, Kunden, Mitarbeiter und Produkte.

Bevor wir die Bilder online stellen konnten, mussten wir diese

über das Microsoft Office Picture Manager komprimieren und be-

arbeiten. Erst dann banden wir sie über die Phoca Gallery ein.

Abbildung 26: Seite "Foto"

Abbildung 25: Fotoansicht


8.5 Seite „Produkte“

Um die Produktmarken vorstellen zu können legten wir auch eine

Seite „Produkte“ an. Diese Seite bearbeiteten wir direkt über das

Frontend und setzten Links zu den dazugehörigen Homepages.


Abbildung 28: Seite „Produkte“


8.6 Seite „Salon Highlights“

Die Auftraggeberin wollte über die Besonderheiten die der Salon

zu bieten hat informieren. Auch diese Seite wurde im Frontend

erstellt.

Abbildung 29: Seite "Salon Highlights"


8.7 Seite „Lage“

Um die Anreise zu erleichtern installierten wir das PlugIn21:

Google Map. Über diese Erweiterung kann man sich schnell und

leicht über die Anfahrt informieren.

Anfangs war es schwer für uns die richtige Version für Joomla! zu

finden und diese einwandfrei zu installieren. Auch das Einbinden

in die Seite war nicht einfach.

21 Funktionalität das eine Software erweitert

Abbildung 30: Seite „Lage“


8.8 Seite „Impressum“

Da unsere Seite auch rechtlich abgesichert sein soll erstellten wir

eine Seite „Impressum“ über das Frontend.


Abbildung 32: Seite „Impressum“


9 Nachwort

Zu Beginn unserer Arbeit wussten wir nicht genau für wen wir

eine Homepage gestalten sollten, da wir kein fiktives Maturapro-

jekt machen wollten. Gott sei Dank hat sich dann schnell jemand

gefunden, der schon längere Zeit eine eigene Homepage haben

wollte und wir waren sehr motiviert und freuten uns auf die Ar-

beit.

Als wir uns dann für ein CMS-System, nämlich Joomla!, ent-

schieden, wurde uns ein wenig bang, da wir mit diesem CMS-

System noch nie gearbeitet hatten.

Natürlich traten im Laufe der Zeit einige Probleme und Einge-

wöhnungsarbeiten mit Joomla! auf, die wir aber dann zum Glück

sehr gut gemeistert haben.

Nach langem Auseinandersetzen mit dem Programm konnten wir

das Projekt schlussendlich gut umsetzen.

Im Großen und Ganzen kann man sagen, dass unser Projekt

„Friseursalon Angelika“ sehr gut gelungen ist und wir hoffen,

dass unsere Auftraggeberin Pitnauer Sabine mit dem Ergebnis

zufrieden ist.


10 Literaturverzeichnis

Projektmanagement


AINF-Musterseiten, PDF-Datei, Mag. Strebinger

Joomla


HTML

http://de.wikipedia.org/wiki/Hypertext_Markup_Language/

PHP


MySQL


CSS


JavaScript


GIMP




http://de.wikipedia.org/wiki/Hypertext_Markup_Language







Phocagallery

http://www.joomlaos.ch/tipps-tricks/komponenten/31-phoca-

gallery/


Microsoft Office Picture manager

http://office.microsoft.com/de-ch/help/informationen-zu-picture-

manager-HP001001721.aspx/






Documents

Fachspezifische Themenstellung