Webseite WMF, Riess, KELOmat

Sonja Peck, Nicole Fettik 1

2012/13

Information and

Communication

Solutions

2012/13

WMF, Riess, KELOmat


Inhaltsverzeichnis

1 Abbildungsverzeichnis .................................................................. 4

2 Vorwort ...................................................................................... 5

3 Preface ...................................................................................... 6

4 Projekt ....................................................................................... 7

4.1 Definition ............................................................................... 7

5 Projektmanagement .................................................................... 9

5.1 Definition ............................................................................... 9

5.2 Projektmanagementprozess ................................................... 10

5.3 Rollenverteilung eines Projekts ............................................... 10

5.4 Projektplanung ..................................................................... 11

5.4.1 Projektstrukturplan ....................................................... 11

5.4.2 Meilensteine ................................................................. 13

5.4.3 Arbeitspakete ............................................................... 13

5.4.4 Projektwürdigkeitsanalyse .............................................. 21

5.4.5 Projektdurchführbarkeitsanalyse ..................................... 23

5.5 Projektumfeld ...................................................................... 24

5.6 Projektcontrolling ................................................................. 24

6 Unser Projekt ............................................................................ 25

6.1 Projektstart .......................................................................... 25

6.2 Unsere Ziele ........................................................................ 25

6.3 Unsere Nicht-Ziele ................................................................ 26

7 Corporate Design ...................................................................... 28

8 Grundlagen .............................................................................. 29


8.1 HTML .................................................................................. 29

................................................................................................. 30

8.2 PHP .................................................................................... 31

8.3 MySQL ................................................................................ 32

8.4 CSS .................................................................................... 34

8.5 Java Script ........................................................................... 35

9 Unsere Seiten ........................................................................... 36

9.1 Template ............................................................................. 36

9.2 CSS .................................................................................... 37

9.3 Metatags ............................................................................. 38

9.4 Index .................................................................................. 40

9.5 Kontakt ............................................................................... 41

9.6 FAQ .................................................................................... 43

9.7 Galerie ................................................................................ 44

9.8 Impressum .......................................................................... 45

10 Nachwort ............................................................................... 46

11 Quellenverzeichnis .................................................................. 47


1 Abbildungsverzeichnis

Abbildung 1: Merkmale eines Projekts 7

Abbildung 2: Projektmanagement 9

Abbildung 3: Projektstrukturplan 12

Abbildung 4: Projektumfeld 24

Abbildung 5: index.php 28

Abbildung 6: Funktionsweise PHP 32

Abbildung 7:Java Script Varianten 35

Abbildung 8: Template 36

Abbildung 9:CSS 37

Abbildung 10: Metatags 38

Abbildung 11: Meta Tag Creator 39

Abbildung 12: index.php 40

Abbildung 13:http://www.regiohelden.de/google-maps/ 41

Abbildung 14: Anfahrtsplan 42

Abbildung 15: Kontakte 42

Abbildung 16: faq.php 43

Abbildung 17: galerie.php 44

Abbildung 18: galerie-phase5 44

Abbildung 19: impressum.php 45


2 Vorwort

Im Rahmen unseres Ausbildungsschwerpunktes „Information and

Communication Solutions“ hatten wir die Aufgabe, eine beliebige

Homepage zu erstellen.

Wir entschlossen uns mit Hilfe von php/mySQL eine professionell

gestaltete Homepage für ein Geschäft zu entwerfen. Dieses Geschäft

befindet sich im Designer Outlet Parndorf und bietet seinen Kunden

hochwertiges Geschirr sowie Küchenutensilien und vieles mehr von

bekannten Marken wie zum Beispiel WMF, Riess und KELOmat. Wir

möchten uns recht herzlich bei Frau Daniela Noitz, Frau Monika Peck und

Herrn Franz Leichtfried bedanken, die uns mit benötigten Informationen,

Unterlagen und Bildern versorgten.

Unser Hauptaugenmerk legten wir darauf, sofort erkennbar zu machen,

dass sich dieses Geschäft in einem Outlet befindet und man nur dort diese

vielfältige Markenvariation unter einem Dach findet. Normalerweise

betreut jeder Hersteller, den man im Geschäft findet, seine eigenen

Filialen. Ein weiterer Punkt der uns am Herzen lag war es, eine

benutzerfreundliche Oberfläche, die auch in der Handhabung leicht sein

sollte, zu schaffen. Die Schwierigkeit lag darin, klare Linien zwischen den

verschiedensten Produkten zu schaffen, aber auch darauf hinzuweisen

dass dieses Geschäft alles vereint.

Mit Hilfe unseres Professor Herrn Mag. Heinz Wurzinger gelang es uns,

unsere Auftraggeber mit einer gelungenen Homepage zufrieden zu stellen.


3 Preface

As part of our school focus „Information and Communication Solutions” we

were given the task to create a homepage.

We decided to design a professional-looking website with the help of php /

MySQL, for a business. This business is located in the Designer Outlet

Parndorf and offers its customers high-quality tableware, kitchen utensils

and more from well-known brands like WMF, Riess and KELOmat. We

would like to thank you Mrs Daniela Noitz, Mrs Monica Peck and Mr Franz

Leichtfried, which supplied us with the required information, documents

and pictures.

It was very important for us that everybody notices that this business is in

an outlet and just there is a variation of this diverse brand in one shop.

Normally, every manufacturer that you find in the store has their own

stores. Another point was to create a user-friendly interface, which should

be easy in handling. The challenge was to create clear lines between the

different products, but also to be noted that this business combines this.

With the help from our Professor Mag. Heinz Wurzinger we created a

homepage which our clients liked very much.


4 Projekt

4.1 Definition

Ein Projekt ist die Gesamtheit aller Aktivitäten die notwendig sind, um

innerhalb eines begrenzten Zeitraums und mit festgelegten Mitteln ein

bestimmtes Ergebnis zu erzielen. Ein Projekt ist die Gesamtheit aller

Aktivitäten die notwendig sind, um innerhalb eines begrenzten Zeitraums

und mit festgelegten Mitteln ein bestimmtes Ergebnis zu erzielen.

Hat sich das Unternehmen oder die Einrichtung entschieden, ein Vorhaben

als Projekt zu bearbeiten, so kommt es auf eine ressourcenschonende1 Arbeitsweise an. Zu den wesentlichen Kennzeichen des

Projektmanagements gehört, dass:

• ein schriftlicher Projektauftrag vorliegt,

• eine Projektleitung bestimmt wird,

• sich ein Projektteam bildet,

1 Ressourcen: Sammelbezeichnung für alle vorhandenen oder bereitgestellten

finanziellen, materiellen und personellen Mittel

Abbildung 1: Merkmale eines Projekts


• eine Startsitzung stattfindet,

• eine schriftliche Projektdefinition und eine schriftliche Projektplanung

mit konkret

terminierten Aufgabenpaketen erfolgt,

• eine kontinuierliche Projektdokumentation erstellt wird,

• Meilensteine zum Ist-Soll-Abgleich des Projektfortschritts festgelegt werden und

• ein offizieller Projektabschluss mit Reflexion und Abschlussbericht erfolgt.2

2http://www.bgw

online.de/internet/generator/Inhalt/OnlineInhalt/Medientypen/bgw__ratgeber/RGM10__R

atgeber__Projektmanagement,property=pdfDownload.pdf


5 Projektmanagement

5.1 Definition

Unter Projektmanagement versteht man die Planung, Kontrolle, Steuerung

und und Organisation von einem Projekt. Der Begriff Projektmanagement

beschreibt ein umfassendes Organisations und Führungskonzept, das es

ermöglicht, komplexe Vorhaben termingerecht, kostengünstig und in

hoher Qualität durchzuführen. Es enthält die Organisation und alle

Werkzeuge zur Planung, Koordination, Steuerung und zum Controlling des

angestrebten Vorhabens. Projektmanagement ist die methodische

Gestaltung von Prozessen.

Abbildung 2: Projektmanagement

Effizientes Projektmanagement beinhaltet:

• kontrolliertes Erreichen von Zielen

• Schaffen klarer Zuständigkeiten


• Dokumentation aller Abläufe, um Transparenz/Nachvollziehbarkeit

zu gewährleisten

• interdisziplinäres und paralleles Arbeiten

• frühzeitige Einbindung aller am Projekt Beteiligten

• ausgewogene Steuerung von Zeit, Kosten und Ergebnis

• effiziente Nutzung von Arbeitsmitteln3

5.2 Projektmanagementprozess

Der Projektmanagementprozess beinhaltet:

Den Projektstart

Die Projektdurchführung

Das Projektmarketing

Das Projektcontrolling

Dem Projektabschluss

5.3 Rollenverteilung eines Projekts

Die Rollenverteilung eines Projekts sieht folgendermaßen aus:

Projektleiter

Projektmitarbeiter

Projektauftraggeber

3http://www.bgw-

online.de/internet/generator/Inhalt/OnlineInhalt/Medientypen/bgw__ratgeber/RGM10__R

atgeber__Projektmanagement,property=pdfDownload.pdf


5.4 Projektplanung

Bei der Projektplanung wird das Projekt bis ins kleinste Detail geplant und

vorbereitet. Dies ist die ausschlaggebende Phase für die

Projektdurchführung.

5.4.1 Projektstrukturplan

Der Projektstrukturplan (PSP) ist das Ergebnis einer Gliederung

des Projekts in plan- und kontrollierbare Elemente. Ein Projekt wird im

Rahmen der Strukturierung in Teilaufgaben und Arbeitspakete unterteilt.

Die Erstellung eines Projektstrukturplans ist nach heutigem

Erkenntnisstand des Projektmanagements eine der zentralen Aufgaben

der Projektplanung. Der PSP ist die Grundlage für die Termin- und

Ablaufplanung, die Ressourceneinplanung und die Kostenplanung.4

4 http://de.wikipedia.org/wiki/Projektstrukturplan

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

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


Abbildung 3: Projektstrukturplan


5.4.2 Meilensteine

Als Meilensteine werden in der Projektplanung selbstgesetzte

Kontrollpunkte bezeichnet.

Meilensteine sollten in regelmäßigen Abständen gesetzt werden. Sie sind

wichtiger Bestandteil der Projektplanung. Es ist wichtig sich realisierbare

Meilensteine zu setzen. Weiterst sollte auch ein Zeitpuffer eingeplant

werden. Meilensteine dienen der Fortschrittskontrolle. Ihr Erreichen

bestimmt oft die Entscheidung über den weiteren Projektverlauf.

5.4.3 Arbeitspakete

Mit Hilfe von Arbeitspaketen lassen sich die einzelnen Arbeitsschritte eines

Projekts strukturieren und planen. Ein Arbeitspaket (AP) repräsentiert

dabei "eine in sich geschlossene Aufgabenstellung innerhalb des Projekts,

die von einer einzelnen Person oder organisatorischen Einheit bis zu einem

festgelegten Zeitpunkt mit definiertem Ergebnis und Aufwand vollbracht

werden kann."

Zu jedem Arbeitspaket (AP) sollten folgende Informationen festgelegt

werden:

- Arbeitspaket-Nummer

- Start (von)

- Ende (bis)

- Titel

- Verantwortlicher (Firma, Abteilung, Person)


Hier finden Sie einen Überblick:

Übersicht

Nummer Meilenstein SOLL-Termin IST-Termin

1 Projektstart 20. Sept. 2012 20. Sept. 2012

2 Meilensteinliste,

Arbeitspakete, Mindmap;

27. Sept. 2012 27. Sept. 2012

3 Corporate

Design erstellen

04. Okt. 2012 04. Okt. 2012

4 Template suchen / bearbeiten

11. Okt. 2012 11. Okt. 2012

5 Template

bearbeiten

18. Okt. 2012 18. Okt. 2012

6 Headphoto

bearbeiten

25. Okt. 2012 25. Okt. 2012

7 Unterseiten erstellen

8. Nov. 2012 8. Nov. 2012

8 Kontakt-Seite

bearbeitet

15. Nov. 2012 15. Nov. 2012


9 Kontakt-Seite

fertigstellen

22. Nov. 2012 22. Nov. 2012

10 FAQ-Seite bearbeiten

29. Nov. 2012 29. Nov. 2012

11 FAQ-Seite

fertigstellen

06. Dez. 2012 06. Dez. 2012

12 Galerie-Seite bearbeiten

20. Dez. 2012 20. Dez. 2012

13 Fotos machen 10. Jan. 2013 10. Jan. 2013

14 Galerie-Seite

fertigstellen

17. Jan. 2013 17. Jan. 2013

15 Impressum-Seite bearbeiten

24. Jan. 2013 24. Jan. 2013

16 Impressum-Seite

fertigstellen

31. Jan. 2013 31. Jan. 2013

17 Website testen 07. Feb. 2013 07. Feb. 2013

18 Überarbeiten der

Website

14. Feb. 2013 14. Feb. 2013

19 Website fertigstellen

21. Feb. 2013 21. Feb. 2013


20 Projektabschluss

durchführen

28. Feb. 2013 28. Feb. 2013

Sonja Peck, Nicole Fettik 17 5.4.3.1 Projektmanagement

Arbeitspaket Anfangstermin Endtermin

Projektmanagement 6. September 2012 28. Februar 2013

5.4.3.2 Template

Inhalte Projektplanung

Mindmap erstellt, Protokoll

begonnen, Meilensteine

festgelegt, Arbeitspakete erstellt,

Projektabschluss: Maturaprüfung;

Mitarbeiter: Nicole Fettik, Sonja

Peck;

Auftragsgeber: Geschäft im

Outlet Parndorf – WMF, Riess,

KELOmat;

Inhalte für Homepage WMF,

RIESS, KELOmat erstellen

Nicht-Inhalte

Ergebnisse Projekt sinnvoll und durchführbar

planen;

Mindmap, Protokoll,

Meilensteinplan, Arbeitspakete,

Projektwürdigkeitsanalyse

erstellen;



Template 20. September 2012 04. Oktober 2012

Inhalte Template suchen

(www.freewebsitetemplates.com)

Corporate Design überlegen;

Firmen um die Erlaubnis für die

Verwendung der Logos fragen;

Parndorf-Logo verändern (mit

gimp);

Fotografen beauftragen Fotos zu

machen;

Nicht-Inhalte Keine Einverständnis erhalten;

unpassendes Format wählen;

Ergebnisse Template mit Corporate Design;

Einverständniserklärung;

bearbeitetes Logo;

übersichtliche Navigationsseite;

http://www.freewebsitetemplates.com/

Sonja Peck, Nicole Fettik 19 5.4.3.3 Unterseiten


Unterseiten 11. Oktober 2012 17. Jänner 2013

Inhalte Einteilung der Unterseiten und

Anpassung an die

Navigationsleiste;

Unterseiten erstellen: Startseite,

Kontakt, FAQ, Gallerie,

Impressum;

Nicht-Inhalte unübersichtliches Design;

zu viel Text;

unpassende Schriftarten und

Farben;

Ergebnisse übersichtliche Unterseiten;

Google-Anfahrtsplan

eingebunden;

passende Schriftarten und

Farben;

Sonja Peck, Nicole Fettik 20 5.4.3.4 Fertigstellen


Fertigstellen 24. Jänner 2013 28. Februar 2013

Inhalte Überarbeiten der Website;

Fehler beheben;

Fachspezifische Themenstellung

beginnen und fertigstellen;

Präsentation für die mündliche

Reife- und Diplomprüfung

beginnen;

Nicht-Inhalte durch Fehler beheben, Schaden

an Website anrichten;

nicht fristgerechte Abgabe des

Maturaprojekts und der

Fachspezifischen Themenstellung;

unübersichtliche Themenstellung;

Ergebnisse fehlerfreie Website;

fertige Themenstellung;

Sonja Peck, Nicole Fettik 21 5.4.4 Projektwürdigkeitsanalyse

Die Projektwürdigkeitsanalyse dient als Entscheidungshilfe, ob eine

Aufgabenstellung als Projekt mit Projektmanagementmethoden

durchzuführen ist oder nicht.

Dabei soll die Komplexität der Aufgabenstellung erfasst werden. Sie dient

außerdem als Entscheidungshilfe gegenüber dem Auftraggeber.

Vorgang:

Im Team wird eine Nutzwertanalyse nach folgenden Kriterien erstellt:

Komplexität des Problems

Neuartigkeit

Risiko

Strategische Bedeutsamkeit

Ergebnisorientiertheit

Ist die Ausprägung der Kriterien tendenziell hoch, dann ist die

Aufgabenstellung als Projekt abzuwickeln.5

5 http://home.schule.at/teacher/sudy/projekt/pages/allg.htm


Projektwürdigkeitsanalyse

Kriterium hoch mittel niedrig Begründung

Neuartig

x Es ist noch

keine Website vorhanden

Inhaltlich komplex

x

Die

Schwierigkeit lag daran, die 3

Unternehmen auf einer

Website zu verbinden

Ressourcenaufwand

x

Die benötigten

Ressourcen waren Laoptop,

verschiedenste Programme

und viel Zeit

Strategisch

bedeutsam

x

Wird von der

Filialleiterin genutzt um die

neuesten Produkte bzw.

Angebote zu veröffentlichen

Risikoreich x Ressourcen

waren vorhanden,

keine Website vorhanen

Sonja Peck, Nicole Fettik 23 5.4.5 Projektdurchführbarkeitsanalyse

Bereiche Fragen ja/nein Begründung

Personalressourcen Sind die nötigen

Personalressourcen vorhanden?

Ja Projektleiterin,

Projektmitarbeiter

Finanzielle und materielle

Ressourcen

Ist das nötige Projektbudget bzw.

die notwendige Ausrüstung

vorhanden?

Ja Es fallen keinerlei Kosten an, Laptop ist bereits

vorhanden

Zeitliche Ressourcen

Ist der zeitliche Rahmen realisierbar?

Ja Es ist genug Zeit vorhanden

Know-how Hat das Team das Know-how, um das

Projekt umzusetzen?

Ja Falls fragen anfallen befragen des Internets

oder des Lehrers


Projektteam:

Sonja Peck

Nicole Fettik

Auftraggeber: Geschäft

im Outlet Parndorf

Projektumfeld:

Kunden

Öffentlichkeit

5.5 Projektumfeld

5.6 Projektcontrolling

Das Wort Projektcontrolling stammt ursprünglich aus dem Englischen und

bedeutet Projektsteuerung.6 Unter dem Projektcontrolling versteht man

die ständige Kontrolle des Projekts. Ob man im Verzug ist, sieht man an

Hand der vorher definierten Arbeitspläne und Arbeitspakete. Folgendes ist

beim Projektcontrolling wichtig:

die Zeit bis zum Projektabschluss

die aufgewendeten Kosten bis zum Projektabschluss

der Fertigstellungsgrad

6 http://de.wikipedia.org/wiki/Projektcontrolling

Abbildung 4: Projektumfeld


6 Unser Projekt

Als wir den Entschluss fassten eine Website zu gestalten, fiel es uns nicht

schwer, ein Unternehmen zu finden, welches eine professionell gestaltete

Website benötigt. Wir entschieden uns für das Geschäft „WMF, Riess,

KELOmat“ im Outlet in Parndorf. Dieser Shop bietet seinen Kunden

hochwertiges Geschirr, Koch- und Küchenutensilien, Reinigungsmittel und

vieles mehr. Sonjas Mutter, Monika Peck, welche die Filialleiterin des

Shops ist, beauftragte uns mit diesem Projekt, ließ uns aber alle

Freiheiten bei der Handhabung und Gestaltung der Website.

6.1 Projektstart

Unser Projekt im Ausbildungsschwerpunkt „Information and

Communication Solutions“ begann am 6. September 2012. Wir erhielten

die Aufgabe, das erlernte in die Praxis umzusetzen. Unsere Fähigkeiten

präsentierten wir an Hand einer dynamischen Website.

6.2 Unsere Ziele

Im Zuge des Projekts sind vor allem inhaltliche, terminliche und budgetäre

Ziele zu realisieren. Die Projektziele sollen den Sinn eines Projekts

erklären und den angestrebten Sollzustand zum Projektende definieren

bzw. beschreiben.7 Ziele müssen smart formuliert, spezifisch, messbar,

realistisch, terminierbar, kontrollbar, korrigierbar und aktionsorientiert

sein. Auch wir definierten zu Beginn unsere Ziele:

Einhalten der Meilensteinliste

Einhalten des Zeitplans

Akquisition von Neukunden

Steigerung des Umsatzes

Kundenbindung

7 http://www.p-m-a.at/pm_baseline/pm_baseline_30/2.4-Methoden-zum-Projektstart-

Projektplanung.html


Steigerung der Bekanntheit des Unternehmens

Eine einfache Menüführung

Informationen zu Produkten oder Dienstleistungen bereitstellen,

Die Marke verbreiten, das Image verbessern,

Druckkosten und Porto einsparen, indem Formulare (zB: Flyer) zum

Download oder sogar als Online-Variante angeboten werden,

Kunden binden durch einen speziellen Kundenbereich, durch

Zusatzangebote für Produkte (z.B. Kochrezepte für den Kauf eines

Kochtopfes),

und natürlich Interessenten anlocken, ihre Adressen sammeln (z. B.

durch Gewinnspiele oder Newsletter), Anfragen generieren.

optisch ansprechendes Design

gut recherchierte Inhalte

gut formulierte Texte

Links zu weiterführenden Informationen und Quellenangaben

benutzerfreundliche Navigation

näherer Bezug zur Handhabung der Küchenutensilien

6.3 Unsere Nicht-Ziele

Ein Nicht-Ziel begrenzt das Projekt, um es überschaubar zu machen. Es

drückt aus, was nicht erreicht werden soll und auf welchen – wenn auch

vielleicht spannenden – Aspekt verzichtet wird. Ohne Formulierung von

Nicht-Zielen kann es passieren, dass während der Projektumsetzung

plötzlich zusätzliche potentielle Schwerpunkte attraktiv werden und das

Projekt ausufert.8

Inhalte die nicht notwendig oder unangebracht sind

Unpassende Farben

8 http://promana.edulearning.at/nichtziele.html


Falsche Informationen

Nicht einhalten der Meilensteine

Unübersichtliche Homepage


7 Corporate Design

Corporate Design bezeichnet die einheitliche optische und grafische

Gestaltung des Unternehmens. Sinn des Coorporate Designs ist es, der

Umwelt möglichst häufig und eindeutig wiedererkennbare Signale zu

geben. Wichtige Punkte:

einheitliches Layout

einheitliche Farben

passende Schriftarten

passende Bilder

Form und übersichtliche Gestaltung der Website

Abbildung 5: index.php

Grau: RGB: 220:220:220

HEX: #F0F0F0

Weiß: RGB: 255:255:255

HEX: #FFFFFF

Schrift: Abel


Schriftfarbe: RGB: 105:105:105

HEX: #8F8F8F

8 Grundlagen

8.1 HTML

HTML ist so zu sagen die Internationale Sprache im Internet.

Alle Seiten, die es im Internet gibt bestehen aus "HTML Tag´s".

Ohne HTML könnte der Browser (z.B. Internet Explorer) keine Seiten

anzeigen.

Das Grundgerüst eines HTML Dokumentes sieht so aus:

<Html>

<Head>

<Title> Der Titel für die Seite </Title>

</Head>

<Body> Der gesammte Text der Seite </Body>

</Html>

Die HTML - Tag´s bestehen aus Spitzklammern < und >.

Mit den Text in den Spitzklammern kann man dem Browser sagen,

was er an dieser Stelle tun soll.

Mit dem Tag: <HTML> sagt man dem Browser das es sich um ein HTML

Dokument handelt.

Der Tag <Head> Sagt dem Browser, dass er etwas im Head (dem Kopf

der Seite) hinein schreiben soll.

Nach dem Tag <title> schreibt man den Text, der als Titel stehen soll,

hinein und schließt den Tag.

Man muss alle Tags auch wieder schließen!


Wenn man also mit dem Kopf Daten fertig ist den Tag Head schließen:

</head>

Dann kommt der "Body Bereich", also der Körper der Seite, in der die

Hauptinformationen stehen.

<body> öffnet den Körper und ab diesem Befehl kann man entweder neue

Tags eingeben und/oder einen Text verfassen, welcher auf der Website

ausgegeben wird.

Wichtig ist wieder den Body zu schließen, </body>

Nach dem Body wäre die Seite zu Ende also schließen wir auch den HTML

Tag </html>

Beispiel:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>


8.2 PHP

PHP ist ein System, das PHP-

Code „serverseitig“ verarbeitet. Das

bedeutet, dass der Quelltext nicht an

den Webbrowser übermittelt wird,

sondern an einen Interpreter auf

dem Webserver.

Erst die Ausgabe des PHP-Interpreters

wird an den Browser geschickt. In den meisten

Fällen ist das ein HTML-Dokument, wobei es mit PHP aber auch

möglich ist, andere Dateitypen, wie Bilder oder PDF-Dateien, zu

generieren.

Um eine PHP-Datei im Rahmen einer Webanwendung ausführen zu

können, benötigt man ein System, das mit den in der Datei enthaltenen

Anweisungen umgehen kann.

Da PHP normalerweise in einer Webserver-Umgebung läuft, unterliegt es

auch dem zustandslosen HTTP. Jede PHP-Seite belastet den Webserver

durch den Interpreter, zudem arbeitet der Interpreter den Quelltext bei

jedem Aufruf erneut ab. Das mindert die Reaktionsgeschwindigkeit des

Servers und erhöht die Last.

Mit PHP lassen sich auch kommandozeilenorientierte Skripte schreiben, die

vom Internet unabhängig sind.9

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

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

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

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

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

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

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

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

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

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

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

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


8.3 MySQL

Bei MySQL handelt es sich um eine Datenbank die wie z. B. Access auf

SQL aufgebaut ist. Bei den meisten Webspaceangeboten mit

Datenbankuntestützung handelt es sich um MySQL Datenbanken, da die

dazu benötigte Software Freeware ist. .

Je nach Hoster hat man normalerweise entweder im Kundenmenü die

Möglichkeit, sich eine Datenbank anzulegen und dabei Benutzername und

Kennwort zu wählen, oder man bekommt die Datenbank fix vorinstalliert

vom Hoster, der einem auch das Passwort und den

Benutzernamen mitteilt.

Abbildung 6: Funktionsweise PHP

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


Ebenso erfährt man vom Hoster oder direkt im Kundenmenü die URL für

die phpMyAdmin, die normalerweise in einem passwortgeschützten

Verzeichnis liegen sollte, wodurch man sich beim Aufrufen mit einem

Benutzernamen und einem Passwort identifizieren muss. Das kann

dasselbe sein wie für die Datenbank oder für den FTP-Zugang, muss es

aber nicht. Im Notfall hilft der Hoster da aber sicher gerne weiter.

Über die phpMyAdmin kann man dann mittels einer bequemen Oberfläche

seine Datenbank(en) und Tabellen verwalten, anlegen, löschen,

exportieren etc.10

10 http://www.schattenbaum.net/php/mstart.php


8.4 CSS

CSS wurde entwickeln, um den Programmiercode einer Webseite zu

vereinfachen bzw. die Arbeitsweise eines Webdesigners oder einer

Internetagentur zu erleichtern.

Früher war es nämlich so, dass alle Formatierungsangaben in der

Webseite selbst zu jedem einzelnen Element hinzugeschrieben wurden.

Dies wurde dann mit CSS eleganter gelöst:

Anstatt jedes Element in einer Webseite neu zu Formatieren (z.B. welche

Farbe die Schrift hat), werden diese Formatierungen (Gestaltungen)

extern bestimmt und gelten dann für diese Elemente oder Bereiche immer

wieder.

Hinzu kommt, dass wenn man sich vertan hat und anstatt “pink” lieber

“blau” haben möchte, es einml kurz in der CSS-Datei ändert und schon ist

die ganze Schrift der Webseite mit allen Unterseiten blau. Dies kann bei

der Webprogrammierung sehr viel Zeit sparen.

Hier die Vorteile von CSS:

Die Arbeit des Webdesigners wird vereinfacht.

Die Webseitenprogrammierung wird übersichtlicher.

Ein einmal erstelltes Design kann schneller auf ein anderes

Webprojekt übertragen werden.

Es gibt mehr Gestaltungsspielraum (z.B. kann man Grafiken mit CSS

einfacher positionieren).

Webseiten laden schneller durch die Verwendung von CSS.

Fehler im Design können einfacher erkannt werden.11

11 http://www.janik.cc/webdesigner-blog/2011/10/was-ist-css-einfache-erklarung-fur-

anfanger/


8.5 Java Script

Java Script ist eine von Netscape geschaffene Plattform die Objekt-

orientiertes Programmieren erlaubt. Es ermöglicht das Erstellen von

Anwendungen und Dokumenten, die über das Internet laufen/gestartet

werden können. Zudem bietet es Möglichkeiten aktiv auf Dokumente

einzugreifen und diese zu lesen, zu schreiben oder zu verändern. Letztlich

bildet es zusammen mit HTML und CSS die Grundlage für

Dynamic HTML (DHTML) (engl. = dynamisches HTML). Zudem

bietet JavaScript Zugang zu Java und kann mit diesem arbeiten oder es

ausführen.

JavaScript wird aufgeteilt in 2 Varianten: Client-SideJavaScript und

Server-Side JavaScript . Client-Side JavaScript enthält dabei, neben dem

Grundgerüst noch einen neueren kleinen Teil der sich JavaScript Style

Sheets nennt. 12

12 http://www.html-world.de/program/js_1.php

Abbildung 7:Java Script Varianten

http://www.html-world.de/program/js_1.php

http://www.html-world.de/program/html_ov.php

http://www.html-world.de/program/css_ov.php

http://www.html-world.de/program/html_ov.php

http://www.html-world.de/program/js_ov.php

http://www.html-world.de/program/java_ov.php







9 Unsere Seiten

9.1 Template

Wir begannen damit, uns ein passendes Template herunter zu laden. In

der folgenden Abbildung sieht man die „Rohdatei“. Dieses Template

bildete die Grundlage für unsere Website.

Abbildung 8: Template


9.2 CSS

Eine vorgefertigte CSS-Datei stand uns auch zur Verfügung. (Siehe 7.4).

Es dauerte einige Zeit bis wir wussten, wie etwas in der CSS-Datei

formatiert ist. Hier ein Beispiel:

Der „Body“ wurde in der CSS-Datei wie folgt definiert:

„margin“ Seitenabstand: 0px13

„padding“ Innenabstand: 0px

„backround“ Hintergrundfarbe: #DEDEDE14; in diesem Fall beziehen

sich die Angaben auf den gesamten sichtbaren Körper

der HTML-Datei; img01.png wird als Hintergrundbild

verwendet

„font-family“ Schriftart namens „Abel“, „sans-serif“: Schriftart ohne

Serifen

„font-size“ Schriftgröße

“color” Textfarbe #8F8F8F15

13 Pixel; Bildschirm- bzw. Druckpunktgröße die ausgabegerätabhängig ist

14 RGB-Code für einen bestimmten Grauton

15 RGB-Code für einen bestimmten Grauton

Abbildung 9:CSS


9.3 Metatags

Meta-Tags sind Meta-Daten, also Informationen über Daten. Sie sind in

der Programmiersprache HTML erstellte Anweisungen und damit

Bestandteil einer Webseite. Jedoch sind sie für Besucher grundsätzlich

unsichtbar und nur über den Quelltext einsehbar und stehen dort

innerhalb des Heads. Sie sollen zusätzliche Informationen zu einer

Webseite übermitteln. Dies können Schlüsselwörter, eine Beschreibung

der Seite oder Informationen zur Sprache oder zum Autor sein. Alle Meta-

Tags bestehen dabei aus den Bestandteilen „name“ und „content=“.

Ersterer bezieht sich auf die Eigenschaft, die näher beschrieben werden

soll, letzterer enthält die eigentlichen Angaben.16

Bei uns sieht das ganze so aus:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Befehl für das Anzeigen der Umlaute.

16 http://de.selfhtml.org/html/kopfdaten/meta.htm

Abbildung 10: Metatags


Wir erstellten unsere Metagtags mithilfe von:

http://www.metatagcreator.eu/Meta-Tag-Creator/

Abbildung 11: Meta Tag Creator

http://www.metatagcreator.eu/Meta-Tag-Creator/


9.4 Index

Unter der index.php ist unsere Startseite zu verstehen. Da die Logos der

Firmen WMF, Riess und KELOmat unterschiedliche Farben haben,

entschieden wir uns für etwas neutrales, nämlich grau.

Wenn man die richtige URL eingeben hat, gelangt man sofort auf unsere

Startseite. Nun hat der Kunde die Möglichkeit nähere Informationen zum

Geschäft in Parndorf zu erhalten, in dem er folgende Links ansteuert:

Kontakt verweist auf kontakt.php

FAQ verweist auf faq.php

Galerie verweist auf galerie.php

Impressum verweist auf impressum.php

Startseite verweist zurück auf die index.php

Möchte man nähere Information, zu den Unternehmen WMF, Riess oder

KELOmat, hat man folgende Möglichkeit:

WMF verweist auf wmf.php

Riess verweist auf riess.php

KELOmat verweist auf kelomat.php

Abbildung 12: index.php


9.5 Kontakt

Hier erhält der Kunde wichtige Informationen über Öffnungszeiten,

Telefonnummer, etc. Eine weitere Besonderheit ist der Anfahrtsplan. Hier

sieht der Besucher sofort anhand einer Karte, wo sich das Geschäft

befindet und wie er es am leichtesten erreicht.

Dieses Unterfangen gelang uns mit der Website:

http://www.regiohelden.de/google-maps/

Abbildung 13:http://www.regiohelden.de/google-maps/

Den generierten, ausgegeben Code mussten wir nur noch in unsere

kontakt.php einfügen.

http://www.regiohelden.de/google-maps/


Das Ergebnis:

Abbildung 14: Anfahrtsplan

Den restlichen Teil der Kontakte gaben wir, wie folgt an:

Abbildung 15: Kontakte


9.6 FAQ

„Frequently Asked Question“, auf Deutsch “häufig gestellte Fragen“.

Diese Seite dient als Informationsquelle zu den verschiedensten

Produkten. Viele Käufer wissen nicht genau, wie sie mit dem Geschirr

umgehen dürfen/sollen. Hier werden Fragen beantwortet wie zum

Beispiel:

Ist das Geschirr für die Spülmaschine geeignet?

Wie putze ich das Geschirr generell richtig?

Abbildung 16: faq.php


9.7 Galerie

Diese

Galerie, fügten wir mithilfe eines Programmes namens „Gallerymaker“ der

uns bei www.chip.de gratis zur Verfügung stand.

Wir mussten die gewünschten Bilder einfügen, die bereits vorhandene

CSS-Datei einfügen und schon erhielten wir einen html-Befehl.

Wir mussten den Befehl nur noch in die galerie.php einbinden.

Die Bilder wurden uns von Herrn Franz Leichtfried zur Verfügung gestellt.

Abbildung 17: galerie.php

Abbildung 18: galerie-phase5

http://www.chip.de/


9.8 Impressum

Frau Monika Peck ließ uns das Impressum zukommen. Wir haben es in die

impressum.php eingebunden. Im Impressum findet man alle

Informationen über die Haftung und Verantwortung der Homepage.

Abbildung 19: impressum.php


10 Nachwort

Im Nachhinein gesehen, gab es doch einige kleine Probleme doch mithilfe

unseres Herrn Professor Wurzinger, der sich viel Zeit für uns nahm,

schafften wir auch diese Hürden zu überwinden.

Die Zusammenarbeit mit der Filialleiterin Frau Monika Peck war sehr

angenehm und machte großen Spaß. Sie ließ und viele Freiheiten beim

Design und wir sind glücklich ihr eine gelungene Website präsentieren zu

dürfen.

Ein wichtiger Aspekt für unser weiterführendes Berufsleben ist, dass uns

der Umgang mit phase5 nun um einiges leichter fällt.


11 Quellenverzeichnis

http://www.bgwonline.de/internet/generator/Inhalt/OnlineInhalt/Medienty

pen/bgw__ratgeber/RGM10__Ratgeber__Projektmanagement,property=p

dfDownload.pdf

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

http://home.schule.at/teacher/sudy/projekt/pages/allg.htm

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

http://www.p-m-a.at/pm_baseline/pm_baseline_30/2.4-Methoden-zum-

Projektstart-Projektplanung.html

http://promana.edulearning.at/nichtziele.html

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

http://www.schattenbaum.net/php/mstart.php

http://www.janik.cc/webdesigner-blog/2011/10/was-ist-css-einfache-

erklarung-fur-anfanger/

http://www.html-world.de/program/js_1.php

http://de.selfhtml.org/html/kopfdaten/meta.htm

http://www.bgwonline.de/internet/generator/Inhalt/OnlineInhalt/Medientypen/bgw__ratgeber/RGM10__Ratgeber__Projektmanagement,property=pdfDownload.pdf



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

http://home.schule.at/teacher/sudy/projekt/pages/allg.htm

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

http://www.p-m-a.at/pm_baseline/pm_baseline_30/2.4-Methoden-zum-Projektstart-Projektplanung.html

http://www.p-m-a.at/pm_baseline/pm_baseline_30/2.4-Methoden-zum-Projektstart-Projektplanung.html

http://promana.edulearning.at/nichtziele.html

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

http://www.schattenbaum.net/php/mstart.php

http://www.janik.cc/webdesigner-blog/2011/10/was-ist-css-einfache-erklarung-fur-anfanger/

http://www.janik.cc/webdesigner-blog/2011/10/was-ist-css-einfache-erklarung-fur-anfanger/

http://de.selfhtml.org/html/kopfdaten/meta.htm

Webseite WMF, Riess, KELOmat

Documents

Transcript of Webseite WMF, Riess, KELOmat