Fachspezifische Themenstellung aus Information & Communication Solutions
Auftraggeberin: Daniela Wimpassinger Projektleitung: Marina Drobela Jahrgang: 2012/2013
Inhaltsverzeichnis 1
VORWORT .................................................................................................................. 3
2
PREFACE ................................................................................................................... 4
3
PROJEKTMANAGEMENT ......................................................................................... 5 3.1 3.1.1
Istsituation ................................................................................................... 5
3.1.2
Sachliche Abgrenzung ................................................................................ 6
3.1.3
Zeitliche Abgrenzung .................................................................................. 7
3.1.4
Soziale Abgrenzung .................................................................................... 7
3.2
Arbeitsprotokoll............................................................................................ 7
3.2.2
Projektstrukturplan (PSP) .......................................................................... 11
3.2.3
Corporate Design ...................................................................................... 20
3.3.1 3.4
5
PROJEKTPLANUNG................................................................................................. 7
3.2.1
3.3
4
PROJEKTDEFINITION .............................................................................................. 5
PROJEKTABWICKLUNG ......................................................................................... 22 Besprechungsprotokoll .............................................................................. 22 PROJEKTABSCHLUSS ........................................................................................... 23
3.4.1
Projektabnahme ........................................................................................ 23
3.4.2
Projektabschlussanalyse ........................................................................... 23
3.4.3
Projektauflösung........................................................................................ 23
GRUNDLAGEN ......................................................................................................... 24 4.1
XAMPP .............................................................................................................. 25
4.2
HTML (HYPERTEXT MARKUP LANGUAGE) ............................................................ 26
4.3
CSS .................................................................................................................... 27
4.4
NOTEPAD++ ........................................................................................................ 28
4.5
PHP ................................................................................................................... 29
4.6
MYSQL .............................................................................................................. 30
4.7
JAVASCRIPT ........................................................................................................ 31
4.8
GIMP................................................................................................................... 32
4.9
FREEMIND .......................................................................................................... 33
DATENBANK ............................................................................................................ 34 5.1
ANLEGEN DER DATENBANK .................................................................................. 35
5.2
TABELLEN ERSTELLEN ......................................................................................... 36
5.3
DATENSÄTZE HINZUFÜGEN UND ÄNDERN ............................................................... 38
5.4
DATENSÄTZE IMPORTIEREN UND EXPORTIEREN ..................................................... 39
5.5
ER-DIAGRAMM .................................................................................................... 40
5 BW 2012/2013
Marina Drobela
Seite 1
6
WORLD4YOU ........................................................................................................... 41 6.1
W EBHOSTING REGISTRATION ............................................................................... 42
6.2
DOMAIN REGISTRATION ....................................................................................... 43
7
AUFBAU DER HOMEPAGE ..................................................................................... 47 7.1
IDEEN SAMMELN .................................................................................................. 47
7.2
TEMPLATE ........................................................................................................... 47
7.3
MENÜ ................................................................................................................. 48
7.4
META-TAGS ........................................................................................................ 49
7.5
DIE SEITEN ......................................................................................................... 50
7.5.1
Home (index.php) ...................................................................................... 50
7.5.2
Über mich (ueber_mich.php) ..................................................................... 51
7.5.3
Sortiment (sortiment.php) .......................................................................... 52
7.5.4
Galerie (galerie.php) ................................................................................. 54
7.5.5
Kontakt (kontakt.php) ................................................................................ 59
7.5.6
Gästebuch (gaestebuch.php) .................................................................... 60
7.5.7
Impressum (impressum.php) .................................................................... 61
8
NACHWORT ............................................................................................................. 62
9
ABBILDUNGSVERZEICHNIS .................................................................................. 63
10
LITERATURVERZEICHNIS ...................................................................................... 65
5 BW 2012/2013
Marina Drobela
Seite 2
1 Vorwort Zu Beginn des Schuljahres bekamen wir im Rahmen unseres Ausbildungsschwerpunktes „Information und Communication Solutions“ die Aufgabe gestellt, unser Wissen der letzten drei Jahre in die Praxis umzusetzen. Ich habe mich entschieden für „Daniela’s Tortenwelt“ eine Website zu erstellen. Mein Ziel war es eine übersichtliche, einfach zu handhabende und gut strukturierte Homepage zu gestalten. Dabei sollten alle gewünschten Inhalte, Fotos und auch neue Ideen berücksichtigt werden. Ich hoffe, mit dem Ergebnis die Vorstellungen meiner Auftraggeberin erfüllt zu haben.
5 BW 2012/2013
Marina Drobela
Seite 3
2 Preface At the beginning of the school year we received the task to put our knowledge of the last three years into practice as part of our training focus "Information & Communication Solutions". I decided to create a website about Daniela's Cake World. My goal is to design a clear, easy to use and well structured homepage. The desired content, photos and new ideas are considered. I hope I have fulfilled my client’s idea with the results.
5 BW 2012/2013
Marina Drobela
Seite 4
3 Projektmanagement Projekte sind einmalige Prozesse mit einem bestimmten Start- und Endtermin zur Erreichung definierter Ziele. Projektmanagement ist wichtig für die Erstellung einer Website, da es folgende Themen beinhaltet:
Projektstart
Projektkoordination
Projektcontrolling
Projektmarketing und
Projektabschluss
Die wichtigsten Phasen sind: Projektdefinition
Projektplanung
Projektabwicklung
Projektabschluss
Abb. 1: Phasen des Projektmanagements
3.1 Projektdefinition Voraussetzung für jedes erfolgreiche Projekt ist eine eindeutige Definition der Aufgabe. Diese Aufgabe muss sachlich, zeitlich und sozial abgegrenzt sein. 3.1.1 Istsituation Frau Wimpassinger interessiert sich seit einiger Zeit für eine Homepage. Sie erkundigte sich bereits bei einigen Webdesignern. Durch eine gemeinsame Bekannte ergab sich die Gelegenheit für dieses Projekt. Ausgangsposition:
kein Logo vorhanden
keine Homepage vorhanden
Corporate Design fehlt
Fotos größtenteils vorhanden
5 BW 2012/2013
Marina Drobela
Seite 5
Frau Wimpassinger hatte schon Vorstellungen, war aber auch für Neues offen. 3.1.2 Sachliche Abgrenzung Ziele: Diese müssen konkret formuliert, messbar, attraktiv, realistisch und terminisiert sein. Meine Ziele sind:
passendes Logo erstellen
passendes Template wählen
einfaches Menü
gut gestaltete Bildgalerie
Kontaktmöglichkeit
Lageplan
dynamische Webseite erstellen
positive Wirkung auf die Kunden haben
Webseite soll über das Geschäft informieren
Einblick in die Backstube bieten
das Unternehmen bekannter zu machen und die Auftragszahlen somit zu erhöhen.
Nicht-Ziele:
verwirrend für Kunden
Anfahrtsplan ist falsch oder funktioniert nicht
Nichteinhaltung der Termine
vollständigen Content eingeben
5 BW 2012/2013
Marina Drobela
Seite 6
3.1.3 Zeitliche Abgrenzung Projektstart: 19. Oktober 2012 Projektende: 22. Februar 2013 3.1.4 Soziale Abgrenzung Auftraggeberin: Konditorin Daniela Wimpassinger Projektleiterin: Marina Drobela
3.2 Projektplanung Die Projektplanung ist die zweite Phase der Projekthauptphasen. Ohne diese Phasen kann man ein Projekt nicht durchführen und es auch nicht beenden. 3.2.1 Arbeitsprotokoll Datum
Arbeitschritte
11. 10.2012
Veröffentlichen von Webseiten
18. 10.2012
Gimp erklärt bekommen Telefonische Kontaktaufnahme mit der Auftraggeberin
19. 10.2012
Projektstart Entscheidung für HTML und CSS Antrag erstellt (Konzept) Domain reserviert
25. 10.2012
passendes Template gesucht Referat weitergearbeitet
26.10.2012
reservierte Domain gekauft mit Auftraggeberin nähere Details besprochen Logo und Strukturplan entworfen
27.10.2012
Entwurf des Strukturplanes Änderung der index.php (Kopf- Fußzeile, Menüleiste, Schriftart, Schriftgröße und Schriftfarbe)
5 BW 2012/2013
Marina Drobela
Seite 7
30.10.2012
mit der Auftraggeberin anderes Template gesucht und verändert (Farbe, Schriftart) weiteres Logo erstellt
31.10.2012
Storno der Domain www.konditorei-wimpassinger.at
01.11.2012
Erarbeitung der index.php
02.11.2012
Neue Domain bestellt www.danielas-tortenwelt.at
08.11.2012
Auslagerung des Menüs (menu.inc) Höhe von Banner verkleinert Logo und index.php weitergearbeitet Strukturplan geändert
11.11.2012
Perfektionierung der Menüleiste Erweiterungsvorschläge des Logos erstellt
15.11.2012
Auslagerung des Footers (footer.inc) Corporate Design erstellt Suchen einer Verzierung für den Hintergrund Verzierung am Bildende – Hintergrund ausprobieren
22.11.2012
Weiterarbeiten am Hintergrund Verfassung einiger Texte
29.11.2012
endgültiges Logo positionieren Schrift ändern Auslagerung des Motto (motto.inc) Hintergrund ändern (muss noch weiter probieren) h1 ändern (Schriftgröße, Schriftart, Schriftfarbe)
01.12.2012
Hintergrund fertigstellen (Farbe) Menüleistenhöhe verringern Metatext erstellen (http://www.metaner.de/metagen/metagenerator.html)
06.12.2012
Dynamische Webseite Erstellung eines ER-Diagramms Schularbeitsstoff besprochen
07.12.2012
Hintergrund mit Deko erweitert Fertigstellung der index.php
5 BW 2012/2013
Marina Drobela
Seite 8
13.12.2012
Seite über_mich.php gearbeitet Internet nicht funktioniert Schularbeit
20.12.2012
Seite über_mich.php fertig gestellt weitergearbeitet bei der Dynamischen Seite (Datenbank anbinden) – nicht funktioniert und Mag. Wurzinger wusste es auch nicht, daher hat er sich mit mir ausgemacht, dass er mir bei der Erstellung der Dynamischen Seite behilflich ist.
21.12.2012
an der Arbeit geschrieben
22.12.2012
an der Arbeit weitergeschrieben
23.12.2012
Erinnerungsmail an Mag. Wurzinger
28.12.2012
Kontaktaufnahme mit Mag. Wurzinger
29.12.2012
E-Mail von Mag. Wurzinger erhalten Seite über_mich.php mit Fehler zurückbekommen – gleich ausgebessert Seite torten.php, dessert.php, teegebaeck.php und schnitten.php erarbeitet
30.12.2012
an der Arbeit geschrieben
31.12.2012
Seite sortiment.php (torten.php, dessert.php, teegebaeck.php und schnitten.php dynamisch gemacht) erstellt
01.01.2013
an der Arbeit weiter geschrieben
05.01.2013
Seite kontakt.php erstellt
10.01.2013
Referate danach 2 Stunden Fachvertretung (PUP, F)
17.01.2013
Referate Kursive Schriftart ausgebessert
20.01.2013
weiter gearbeitet an der Arbeit
24.01.2013
Referate Seite galerie.php angefangen zu erstellen
5 BW 2012/2013
Marina Drobela
Seite 9
31.01.2013
Referate Verfassen von wissenschaftlichen Arbeiten durchgenommen
12.02.2013
Richtigstellung der Formatvorgaben und Ă„nderung des Abbildungsverzeichnisses
13.02.2013
Seite galerie.php fertig gestellt
16.02.2013
Seite gaestebuch.php und impressum.php erstellt Abschlussbesprechung mit Auftraggeberin
22.02.2013
Abschluss
5 BW 2012/2013
Marina Drobela
Seite 10
3.2.2 Projektstrukturplan (PSP) Im PSP wird die Problemstellung in Teilaufgaben, den Meilensteinen, mit Arbeitspaketen gegliedert.
Abb. 2: Projektstrukturplan
5 BW 2012/2013
Marina Drobela
Seite 11
3.2.2.1 Meilensteine (MS) Meilensteine sind Zwischenziele eines Projektes und sehr wichtig, da sie den gesamten Ablauf in mehrere kleine überschaubarere Etappen einteilen. 3.2.2.2 Arbeitspakete (AP) Jedes Arbeitspaket hat einen Projektstrukturplancode und muss ein klar definiertes Ziel haben. Es muss festgehalten werden, wer für die Einhaltung von Terminen verantwortlich ist.
Meilenstein 1: Konzept erstellt und mit Auftraggeberin koordiniert
Arbeitspaket: 1.1 Konzept erstellen Zuständige: Marina Drobela Ziele: Vorschläge und Ideen ausarbeiten, Corporate Design für die Website machen, Farben Nichtziele: keine Vorschläge Start: 19.10.2012 Ende: 26.10.2012 Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 1.2 Vorstellungen mit Auftraggeberin besprechen Zuständige: Marina Drobela Ziele: einheitliche Vorstellungen, Ideen, Farben und Corporate Design bestimmen Nichtziele: keine Übereinstimmung finden Start: 26.10.2012 Ende: 26.10.2012 Benötigte Ressourcen: Laptop, ausgearbeitete Ideen/Vorschläge
5 BW 2012/2013
Marina Drobela
Seite 12
Arbeitspaket: 1.3 Koordination Zuständige: Marina Drobela Ziele: Vorstellungen von Auftraggeberin und Ausführender kombinieren, Konzept ändern Nichtziele: Unklarheiten, Schwierigkeiten bei der Umsetzung Start: 26.10.2012 Ende: 30.10.2012 Benötigte Ressourcen: Laptop mit fertigem Konzept, Internet
Meilenstein 2: Unterlagen eingeholt
Arbeitspaket: 2.1 organisieren von Texten und Bildern Zuständige: Marina Drobela Ziele: alle Texte und Bilder beschaffen Nichtziele: keine oder falsche Texte Start: 15.11.2012 Ende: 22.11.2012 Benötigte Ressourcen: Laptop, USB-Stick, Unterlagen der Auftraggeberin, E-Mail
Arbeitspaket: 2.2 Texte und Bilder bearbeiten Zuständige: Marina Drobela Ziele: Texte bearbeiten und richtigstellen, Bilder zuschneiden Nichtziele: unvollständiger und fehlerhafter Text, unscharfe Bilder Start: 15.11.2012 Ende: 22.11.2012 Benötigte Ressourcen: Laptop, Gimp, Internet
5 BW 2012/2013
Marina Drobela
Seite 13
Meilenstein 3: Ankauf der Domain getätigt
Arbeitspaket: 3.1 Reservierung der Domain Zuständige: Marina Drobela Ziele: freien gewünschten Domainnamen bei www.world4you.com reservieren Nichtziele: gewünschter Domainname nicht frei Start: 19.10.2012 Ende: 19.10.2012 Benötigte Ressourcen: Laptop, Internet, gewählter Domainname
Arbeitspaket: 3.2 Registrierung und Kauf der Domain Zuständige: Marina Drobela Ziele: fehlerfreie Registrierung, endgültiger Kauf der Domain Nichtziele: fehlerhafte Registrierung Start: 27.10.2012 Ende: 27.10.2012 Benötigte Ressourcen: Laptop, Internet, Daten der Auftraggeberin, E-Mail
Arbeitspaket: 3.3 Änderung des Domainnamens Zuständige: Marina Drobela Ziele: Wechsel der Domain ohne Gebühren Nichtziele: kein Wechsel der Domain möglich Start: 2.11.2012 Ende: 2.11.2012 Benötigte Ressourcen: Laptop, Internet, alte Domaindaten, E-Mail
5 BW 2012/2013
Marina Drobela
Seite 14
Meilenstein 4: Entwurf der Webseite erstellt
Arbeitspaket: 4.1 Template suchen Zuständige: Marina Drobela Ziele: ansprechendes, attraktives Templates finden Nichtziele: kein passendes Templates vorhanden Start: 25.10.2012 Ende: 30.10.2012 Benötigte Ressourcen: Laptop, Internet Arbeitspaket: 4.2 Template ändern (Seite „Home“) Zuständige: Marina Drobela Ziele: Template umgestalten, freundliche, einladende Startseite, passendes Hauptmenü Nichtziele: Bilder passen nicht zum Template, unübersichtliches Template Start: 25.10.2012 Ende: 07.12.2012 Benötigte Ressourcen: Laptop, Internet, Bilder, Texte
Meilenstein 5: Website programmiert und getestet
Arbeitspaket: 5.1 Seite „Über mich“ Zuständige: Marina Drobela Ziele: Texte und Bilder einfügen Nichtziele: Texte und Bilder nicht auf der richtigen Position, fehlerhaft Start: 13.12.2012 Ende: 29.12.2012 Benötigte Ressourcen: Laptop, Internet, Bilder, Texte
5 BW 2012/2013
Marina Drobela
Seite 15
Arbeitspaket: 5.2 Seite „Kontakt“ Zuständige: Marina Drobela Ziele: funktionierender Anfahrtsplan, richtige Anschrift Nichtziele: falsche Adresse Start: 05.01.2013 Ende: 05.01.2013 Benötigte Ressourcen: Laptop, Internet, Texte Arbeitspaket: 5.3 Seite „Gästebuch“ Zuständige: Marina Drobela Ziele: möglichst viele positive Einträge von Kunden Nichtziele: keine Annahme dieser Seite, negative Kommentare Start: 16.02.2013 Ende: 16.02.2013 Benötigte Ressourcen: Laptop, Internet Arbeitspaket: 5.4 Seite „Impressum“ Zuständige: Marina Drobela Ziele: Information über die/den Haftende/n Nichtziele: funktioniert nicht, Angaben falsch Start: 16.02.2013 Ende: 16.02.2013 Benötigte Ressourcen: Laptop, Internet, Adressdaten
5 BW 2012/2013
Marina Drobela
Seite 16
Meilenstein 6: Datenbank erstellt
Arbeitspaket: 6.1 Datenbank anlegen Zuständige: Marina Drobela Ziele: gut strukturierte und übersichtliche Datenbank erstellen Nichtziele: fehlerhafte Datenbank Start: 06.12.2012 Ende: 06.12.2012 Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 6.2 Datenbank anbinden Zuständige: Marina Drobela Ziele: richtig funktionierende Anbindung erstellen Nichtziele: Anbindung funktioniert nicht richtig Start: 06.12.2012 Ende: 29.12.2012 Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 6.3 Datenbank ausgeben Zuständige: Marina Drobela Ziele: korrekte Ausgabe der Daten Nichtziele: Daten werden nicht oder nicht korrekt ausgegeben Start: 06.12.2012 Ende: 31.12.2012 Benötigte Ressourcen: Laptop, Internet
5 BW 2012/2013
Marina Drobela
Seite 17
Arbeitspaket: 6.4 Seite „Sortiment“ Zuständige: Marina Drobela Ziele: dynamische Seite sollte einwandfrei funktionieren Nichtziele: fehlerhafte dynamische Seite, funktioniert nicht Start: 20.12.2012 Ende: 31.12.2012 Benötigte Ressourcen: Laptop, Internet Arbeitspaket: 6.5 Seite „Galerie“ Zuständige: Marina Drobela Ziele: einfache, übersichtliche Anordnung der Bilder Nichtziele: Anordnungsprobleme der Bilder, Bilder nicht vorhanden Start: 24.01.2013 Ende: 13.02.2013 Benötigte Ressourcen: Laptop, Internet, Bilder
Arbeitspaket: 6.6 Website testen Zuständige: Marina Drobela Ziele: funktionstüchtige Website nach den Vorstellungen der Auftraggeberin, Seitenangaben richtig Nichtziele: Probleme auf der Website Start: 06.12.2012 Ende: 31.12.2012 Benötigte Ressourcen: Laptop, Internet
5 BW 2012/2013
Marina Drobela
Seite 18
Meilenstein 7: Website überarbeitet
Arbeitspaket: 7.1 Website präsentieren Zuständige: Marina Drobela Ziele: Präsentation der funktionierenden Website, geringe Änderungen, Auftraggeberin ist zufrieden Nichtziele: Unzufriedenheit der Auftraggeberin Start: 16.02.2013 Ende: 16.02.2013 Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 7.2 Website überarbeiten Zuständige: Marina Drobela Ziele: Fehler korrigieren, Verbesserungen durchführen Nichtziele: Änderungsvorschläge können nicht umgesetzt werden, Fehler bleiben bestehen Start: 16.02.2013 Ende: 16.02.2013 Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 7.3 Website fertigstellen Zuständige: Marina Drobela Ziele: Homepage ganz fertigstellen Nichtziele: Seiten funktionieren nicht Start: 19.02.2013 Ende: 19.02.2013 Benötigte Ressourcen: Laptop, Internet
5 BW 2012/2013
Marina Drobela
Seite 19
Meilenstein 8: Website veröffentlicht
Arbeitspaket: 8.1 Website veröffentlichen Zuständige: Marina Drobela Ziele: funktionstüchtige Website veröffentlichen Nichtziele: unfertige Website online stellen Start: 22.2.2013 Ende: 22.2.2013 Benötigte Ressourcen: Laptop, Internet, Zugangsdaten zum Server 3.2.3 Corporate Design1 Der Begriff Corporate Design2 bzw. Unternehmens-Erscheinungsbild bezeichnet einen Teilbereich der Unternehmens-Identität3 und beinhaltet das gesamte, einheitliche Erscheinungsbild eines Unternehmens oder einer Organisation. Dazu gehören vorrangig die Gestaltung der Kommunikationsmittel aber auch Geschäftspapiere, Werbemittel, Verpackungen, Internetauftritte, sowie die Produktgestaltung. 3.2.3.1 Logo
Abb. 3: Logo
1
o. V.: http://de.wikipedia.org/wiki/Corporate_Design kurz CD 3 engl.: corporate identity 2
5 BW 2012/2013
Marina Drobela
Seite 20
3.2.3.2 Schriftfarben schwarz: HTML-Notation: 000000 H: 0
R: 0
S: 0
G: 0
V: 0
B: 0
weiß: HTML-Notation: ffffff H: 0
R: 255
S: 0
G: 255
V: 100
B: 255
braun: HTML-Notation: 562e18 H: 21
R: 86
S: 72
G: 46
V: 34
B: 24
dunkelgrün: HTML-Notation: 385900 H: 82
R: 56
S: 100
G: 89
V: 35
B: 0
olivgrün: HTML-Notation: 95a775 H: 82
R: 149
S: 30
G: 167
V: 65
B: 117
blassgrün: HTML-Notation: 92d14f H: 89
R: 146
S: 62
G: 209
V: 82
B: 79
5 BW 2012/2013
Marina Drobela
Seite 21
3.2.3.3 Schriftarten im Logo – Edvardian Script ITC im Text – Book Antiqua, Century Gothic, Vivaldi, Verdana
3.3 Projektabwicklung Nachdem das Projekt fertig geplant ist, beginne ich mit der Bearbeitung des Projektes. 3.3.1 Besprechungsprotokoll 1. Besprechung Datum: 18.10.2012 Ort: Frauenkirchen Erste telefonische Kontaktaufnahme mit Frau Wimpassinger, mit der Frage, ob sie mit der Einrichtung einer Homepage einverstanden ist. Frau Wimpassinger gab mir die Zusage und wir versuchten beide unsere Vorschläge und Ideen einzubringen.
2. Besprechung Datum: 26.10.2012 Ort: Purbach Erste Vorschläge von meiner Seite wurden vorgelegt und mit Frau Wimpassinger durchbesprochen. Ein Domainname wurde gekauft und erste Logoentwürfe wurden erstellt. Farben und Menüs wurden ausgewählt.
3. Besprechung Datum: 30.10.2012 Ort: Purbach Neues Template wurde gesucht und auch die Farben geändert. Erstellung eines neuen Logos und die Stornierung/Änderung des Domainnamens wurde durchgeführt.
5 BW 2012/2013
Marina Drobela
Seite 22
4. Besprechung Datum: 16.02.2013 Ort: Purbach Abschlussbesprechung und Präsentation der fertig gestellten Homepage. Diverse kleine Änderungen wurden durchgeführt. Das Endergebnis war für die Auftraggeberin sehr zufriedenstellend.
3.4 Projektabschluss Der Projektabschluss ist die letzte Etappe des Projekts und beinhaltet unter anderem Produktabnahme, Projektabschlussanalyse und Projektauflösung. 3.4.1 Projektabnahme Die Projektabnahme bedeutet die Übergabe der fertigen Website an die Auftraggeberin. Man sollte über eine zukünftige eventuelle Betreuung eine Abmachung treffen. 3.4.2 Projektabschlussanalyse Die Projektabschlussanalyse beinhaltet eine Nachkalkulation hinsichtlich Kosten, Termine und Qualität. 3.4.3 Projektauflösung Der allerletzte Schritt eines Projektes ist die Projektauflösung. Jedes Projekt muss sowohl einen klaren Anfang als auch ein eindeutiges Ende haben.
5 BW 2012/2013
Marina Drobela
Seite 23
4 Grundlagen Hier folgt ein kurzer theoretischer Überblick über meine Hauptthemen:
XAMPP
HTML
Css
Notepad++
PHP
MySQL
JavaScript
GIMP
FreeMind
5 BW 2012/2013
Marina Drobela
Seite 24
4.1 XAMPP4 Das ist ein Komplettpaket, bestehend aus:
Webserver Apache
mit der Datenbank MySQL bzw. SQLife
den Skriptsprachen Perl und PHPApache
Es ermöglicht diese Programme auf sehr einfache Weise zu installieren außerdem ist es erhältlich für alle beliebigen Betriebssysteme. XAMPP ist eine Zusammenstellung von freier Software und stellt eine Testumgebung dar. Mithilfe von XAMPP kann man schnell und unproblematisch „ausprobieren“, bevor man die entsprechenden Dateien online live stellt. XAMPP wird zur Einrichtung und Wartung eines Web-Servers, um Datenbanken zu erstellen und zu bearbeiten verwendet.
Abb. 4: Control Panel
4
Vgl. Seidler, 2011
5 BW 2012/2013
Marina Drobela
Seite 25
4.2 HTML5 (Hypertext Markup Language)6 Man bezeichnet HTML oft als Hypertext. Die Aktuelle HTML-Version trägt die Nummer 4.01 HTML5.
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 beliebige Befehle für Formatierungen in Dokumenten.
Ein HTML-Dokument besteht aus drei Bereichen:
der
Dokumenttypdeklaration,
diese
gibt
verwendete
Doku-
menttypdefinition (DTD) an
dem HTML-Kopf (HEAD), der hauptsächlich technische oder dokumentarische Informationen enthält, die üblicherweise nicht im Anzeigebereich des Browsers dargestellt werden
dem HTML-Körper (BODY), der jene Informationen enthält, die gewöhnlicherweise im Anzeigebereich des Browsers zu sehen sind.
Abb. 5: HTML
5 6
o. V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language dt. Hypertext-Auszeichnungssprache
5 BW 2012/2013
Marina Drobela
Seite 26
4.3 Css7 Die Cascading Style Sheets, kurz CSS genannt, ist eine deklarative Sprache für Stilvorlagen von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS kann man z.B. zum Festlegen von Schriftfarben, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern für fortgeschrittene Positionierung und viele andere Sachen benutzen.
Es werden in einem bestimmten Dokument also die Untergliederungselemente 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 deinem separaten Dokument, was ihre Wiederverwendung für andere Dokumente erleichtert.
CSS war eine Revolution im Webdesign. Die konkreten Vorteile8 sind u.a.:
Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-SheetDatei heraus
präzisere Kontrolle über das Layout
verschiedene Layouts für verschiedene Medientypen
(Bildschirmanzeige,
Druck etc.)
eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken. Abb. 6: Cascading Style Sheets (CSS)
7 8
o. V.: http://de.wikipedia.org/wiki/Cascading_Style_Sheets o. V.: http://de.html.net/tutorials/css/lesson1.php
5 BW 2012/2013
Marina Drobela
Seite 27
4.4 Notepad++9 Notepad ist ein freier Texteditor für Windows und kompatible Betriebssysteme. Als Zeichensätze werden ASCII und verschiedene UnicodeKodierungen unterstützt, so können leicht auch fremdsprachige Textdateien verfasst werden. Die Bearbeitung von Quelltext wird besonders unterstützt: Für viele Programmiersprachen werden Syntax und Struktur durch typographische Mittel bzw. Code-Faltung hervorgehoben.
Notepad++ beherrscht Syntaxhervorhebung für Programmier- und Auszeichnungs-Sprachen: CSS, HTML, Java, JavaScript, Perl, PHP und viele mehr.
Zusätzlich lassen sich eigene Sprachen über eine grafische Oberfläche definieren. Dabei ist es möglich, Schlüsselwörter, Kommentare und Operatoren selbst festzulegen und in verschiedenen Kategorien unterschiedlich zu formatieren.
Notepad++ stellt eine Schnittstelle für Plugins zur Verfügung, über die das Programm um zusätzliche Funktionen erweitert werden kann.
Abb. 7: Notepad++ Logo
9
o. V.: http://de.wikipedia.org/wiki/Notepad%2B%2B
5 BW 2012/2013
Marina Drobela
Seite 28
4.5 PHP10 PHP11 wurde 1995 von Rasmus Lerdorf entwickelt. Ursprünglich war PHP als Ersatz für eine Sammlung von Perl-Skripten gedacht, Bald schuf Lerdorf eine umfangreiche Version in der Programmiersprache C, in der PHP bis heute entwickelt wird. Schließlich wurde PHP/FI12 veröffentlicht.
PHP ist eine Skriptsprache, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird. PHP ist nicht auf die Ausgaben von HTML beschränkt, sondern kann auch Bilder, PDF-Dateien und Flashanimationen generieren und gleichzeitig im Dateisystem speichern. PHP ist eine Open-Source-Software und zeichnet sich durch die leichte Erlernbarkeit,
die
breite
Datenbankunterstützung
und
Internet-
Protokolleinbindung aus.
Abb. 8: Darstellung der Funktionsweise von PHP
10
o. V.: http://de.wikipedia.org/wiki/PHP Hypertext Preprocessor, Backronym aus „Personal Home Page Tools” 12 FI = Form Interpreter 11
5 BW 2012/2013
Marina Drobela
Seite 29
4.6 MySQL13 Der MySQL Server ist eines der weltweit am weitesten verbreiteten relationalen Datenbankverwaltungssysteme. Es ist als Open-Source-Software für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für viele dynamische Webauftritte.
MySQL ist leistungsfähig, zuverlässig und benutzerfreundlich, dadurch wurde es eine der bekanntesten Open-Source-Datenbanken. MySQL kann auf mehr als 20 Plattformen eingesetzt werden, unter anderem Linux, Windows, OS/X, HP-UX und Netware, dadurch erhält man größtmögliche Flexibilität.
MySQL ist mit mehr als 6 Millionen Installationen und über 65.000 Downloads pro Tag das populärste Open-Source-Datenbankverwaltungssystem der Welt. Es kommt beispielsweise bei YouTube, Wikipedia, Google, Facebook und Twitter zum Einsatz.
Abb. 9: MySQL Logo
13
o. V.: http://de.wikipedia.org/wiki/MySQL
5 BW 2012/2013
Marina Drobela
Seite 30
4.7 JavaScript14 JavaScript15 ist eine Ergänzung zu HTML und eine echte Programmiersprache. 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 Nutzerinteraktion bietet, können mit JavaScript Inhalte generiert und nachgeladen werden.
JavaScript wird hauptsächlich clientseitig eingesetzt, im Unterschied zu anderen im Web verwendeten Sprachen, wie Perl oder PHP, die ausschließlich serverseitig eingesetzt werden. JavaScript bzw. die ECMAScript-Implementierungen finden jedoch beispielsweise auf NES16, und weitere Beispiele für serverseitige JavaScript-Programmierung sind POW und Jaxer, die auf der Mozilla-JavaScript-Engine Spidermonkey aufsetzen.
Abb. 10: JavaScript Logo
14
o. V.: http://de.wikipedia.org/wiki/JavaScript o. V.: http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript 16 Netscape Enterprise Servern 15
5 BW 2012/2013
Marina Drobela
Seite 31
4.8 Gimp17 GIMP18 ist ein freies, sehr leistungsfähiges Foto- und Bildbearbeitungsprogramm. Der Name GIMP ist zusammengesetzt aus den englischen Wörtern „GNU Image Manipulation Program“, was im Deutschen so viel bedeutet wie „GNU Bildbearbeitungsprogramm“. Man kann GIMP19 für eine Vielzahl an Aufgaben einschließlich Fotonachbearbeitungen, Bildkomposition und -malerei einsetzen. Es bietet eine große Auswahl an Malwerkzeugen20, wie Pinsel, Stift, Sprühpistole (Airbrush), Klonwerkzeug und viele weitere, Transformationswerkzeuge wie Rotieren, Skalieren, Scheren und Spiegeln, lesen und schreiben verschiedenster Dateiformate, wie beispielsweise 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.
Abb. 11: GIMP Logo
Abb. 12: GIMP
17
GNU Image Manipulation Program, ursprünglich General Image Manipulation Program o. V.: http://de.wikipedia.org/wiki/GIMP 19 o. V.: http://docs.gimp.org/de/introduction.html 20 o. V.: http://docs.gimp.org/de/gimp-tools-paint.html 18
5 BW 2012/2013
Marina Drobela
Seite 32
4.9 FreeMind21 FreeMind ist ein Computerprogramm zum Visualisieren und Strukturieren von Inhalten (Begriffe, Ideen, Lernstoff, Sitzungsergebnisse usw.). Diese Methode der Wissensdarstellung wird Business Mapping genannt, die entstehenden Dokumente heißen Mindmaps. Mindmaps sind
Abb. 13: FreeMind Logo
zum Beispiel als Hilfsmittel für das Projektmanagement sinnvoll, unterstützend bei der Strukturierung von Lerninhalten oder bei der Zusammenfassung von Ergebnissen eines Brainstormings.
In die erzeugten Mindmaps lassen sich Hyperlinks, Symbole oder Bilder einfügen, auch grafische Verbindungen zwischen den einzelnen „Zweigen“ können dargestellt werden. Mit Exportfunktionen lassen sich die Ergebnisse unter anderem als XHTML oder im OpenOffice.org-Writer-Format abspeichern.
Das Programm FreeMind wurde in der Programmiersprache Java für Windows, Mac und Linux entwickelt.
Abb. 14: Screenshot FreeMind
21
o. V.: http://de.wikipedia.org/wiki/FreeMind
5 BW 2012/2013
Marina Drobela
Seite 33
5 Datenbank Bevor ich die dynamischen Seiten erstellen konnte, musste ich eine dynamische Datenbank mit verschiedenen Tabellen anlegen. Dabei überlegte ich mir zuerst, wie viele und vor allem welche Tabellen ich benötigte. Ich erstellte meine Datenbank mit Hilfe von phpMyAdmin, wozu ich einen Link zu dieser Seite mit dem dazugehörigen Benutzernamen und Passwort benötigte. Als ersten Schritt legte ich in meiner Datenbank die Tabellen „produkt“ und „kategorie“ an. Danach erfolgte die Eintragung der Felddaten sowie deren Formatierung. Eine Hilfe für die Erstellung der Tabellen war auch das vorher angefertigte ER-Diagramm.
Abb. 15: Anmelden auf dem Server
5 BW 2012/2013
Marina Drobela
Seite 34
5.1 Anlegen der Datenbank Nach der ausf端hrlichen Planung meiner Datenbank konnte ich damit beginnen die Datenbank anzulegen. Daf端r wurde mir ein eigener Server zur Verf端gung gestellt, auf dem ich meine Datenbank mittels phpMyAdmin erstellen konnte.
Abb. 16: Datenbank anlegen
Abb. 17: Datenbank ausw辰hlen
5 BW 2012/2013
Marina Drobela
Seite 35
5.2 Tabellen erstellen Mit der Option „Neue Tabelle in Datenbank erstellen“ kann ich nun eine neue Tabelle anlegen und diese benennen. Außerdem gebe ich auch die benötigte Anzahl der Felder an, welche später auch noch geändert werden kann, falls man zu viele oder zu wenige Felder angelegt hat.
Abb. 18: Tabellen erstellen
Nun kann ich die Feldnamen benennen, die Typen einstellen und die Länge des Feldes festlegen. Man kann auch eine fortlaufende Nummer für alle Datensätze benennen. Das geht folgendermaßen: Bei der Option „Extras“ wird für eine fortlaufende Nummer „auto_increment“ eingestellt.
Abb. 19: Benennen von Feldnamen, Typen und Länge
Um die Tabelle fertigzustellen gibt es zwei Möglichkeiten: Die Tabelle ist fertig und wird nur mehr abgespeichert.
Abb. 20: Tabelle speichern
Man möchte nach dem Speichern noch weitere Felder hinzufügen.
Abb. 21: Tabelle speichern und Felder hinzufügen
5 BW 2012/2013
Marina Drobela
Seite 36
Für die einwandfreie Benutzung der Tabelle sollte noch ein „Primary Key“ festgelegt werden. Eine fortlaufende Nummer der Datensätze eignet sich am besten dafür.
Abb. 22: Primary Key festlegen
Die Tabelle kann auch noch im Nachhinein bearbeitet oder gelöscht werden.
Abb. 23: Bearbeiten im Nachhinein
Am Ende wird die Struktur der Tabelle übersichtlich dargestellt. Man kann die Einstellungen der einzelnen Felder auf einen Blick erkennen.
Abb. 25: Tabellenstruktur Übersicht
Abb. 24: Anzeigen der verschiedensten Tabellen
5 BW 2012/2013
Marina Drobela
Seite 37
5.3 Datensätze hinzufügen und ändern Die einzelnen Datensätze können nun mit der Option „Einfügen“ in die jeweilige Tabelle eingegeben werden.
Abb. 26: Datensätze hinzufügen
Abb. 27: Ändern bzw. Löschen eines Datensatzes
5 BW 2012/2013
Marina Drobela
Seite 38
Abb. 28: Bearbeitung eines Datensatzes
5.4 Datens채tze importieren und exportieren
Abb. 29: Importieren eines Datensatzes
Abb. 30: Exportieren eines Datensatzes
5 BW 2012/2013
Marina Drobela
Seite 39
5.5 ER-Diagramm22 Bei einem Entity-Relationship-Modelle23 werden Daten eines Projektes in Entitäten und ihre Beziehungen zueinander definiert und abgebildet, um eine effiziente und performante Datenbankstruktur entwickeln zu können. Dieser Erstellungsprozess hat sich bei der Entwicklung effizienter und performanter Datenbankstrukturen als sehr hilfreich erwiesen.
Abb. 31: ER-Diagramm
22 23
o. V.: http://www.internet4jurists.at/urh-marken/metatag01.htm Abkürzung für ER-Diagramm
5 BW 2012/2013
Marina Drobela
Seite 40
6 World4You24 Abb. 32: Wold4You Logo
World4You ist ein österreichischer Qualitäts-Provider und bietet Dienstleistungen von höchster Qualität! Durch den Betrieb einer eigenen Technik arbeitet World4You unabhängig und effektiv. Somit kann World4You höchste Verfügbarkeit, Stabilität und Performance garantieren. Ihre Leitungsanbindung ist redundant ausgelegt und bietet so eine sehr hohe Ausfallsicherheit.
Abb. 33: Provider
24
Vgl.: Kührer, World4You
5 BW 2012/2013
Marina Drobela
Seite 41
6.1 Webhosting Registration
Abb. 34: Auswahl Webhosting
Abb. 35: Bestellung Webhosting
5 BW 2012/2013
Marina Drobela
Seite 42
6.2 Domain Registration
Abb. 36: Wunschdomain 체berpr체fen und ausw채hlen
Abb. 37: Domain in den Warenkorb legen
5 BW 2012/2013
Marina Drobela
Seite 43
Abb. 38: ĂœberprĂźfung der Daten im Warenkorb
Abb. 39: Registrierung des Kunden
5 BW 2012/2013
Marina Drobela
Seite 44
Abb. 40: Eingabe der Kundendaten
Abb. 41: Zahlungsoptionen w채hlen
5 BW 2012/2013
Marina Drobela
Seite 45
Abb. 43: Absendung der Bestellung
Abb. 42: Best채tigung der Bestelldaten und ausloggen
5 BW 2012/2013
Marina Drobela
Seite 46
7 Aufbau der Homepage 7.1 Ideen sammeln Zuerst erstellte ich gemeinsam mit der Auftraggeberin ein FreeMind über unsere Ideen und Vorstellungen, wie die Homepage aussehen sollte. Dann suchten wir, unserem Corporate Design entsprechend, ein passendes Template auf der Internetseite www.freewebtemplates.com. Ich entschloss mich die Homepage mit CSS-HTML zu gestalten.
7.2 Template Mit den gesammelten, passenden Ideen fiel es mir leicht das Template umzugestalten. Mittels GIMP bearbeitete ich Fotos und fügte sie teilweise in den Wrapper ein. Das Logo wurde in die passende Auflösung und das entstprechende Format gebracht. Schließlich konnte ich es in der richtigen Größe und Auflösung auf der Startseite platzieren.
Abb. 45: Vorlage des gewählten Template
Abb. 44: Template umgestaltet
5 BW 2012/2013
Marina Drobela
Seite 47
7.3 Menü Auf jeder Seite wird im „Header“ ein Menü angezeigt, von welchem man zwischen den verschiedenen Webseiten hin und her wechseln kann.
Home
Über mich
Sortiment
Galerie
Kontakt
Gästebuch
Abb. 46: Menü
5 BW 2012/2013
Marina Drobela
Seite 48
7.4 Meta-Tags25 Meta-Tags26 sind kurze Programmteile einer Website, die Informationen über die Homepage enthalten. Sie werden im „head“-Bereich eines HTMLDokumentes eingesetzt. Sie befinden sich im HTML-Quellcode am Beginn der Seite, werden aber im Browser nicht angezeigt. Außerdem sind sie bedeutend für die Möglichkeit, dass Suchmaschinen die gewünschte Webseite finden und an möglichst vorderer Stelle listen. Begriffe, die dort (vor allem unter den Keywords) aufscheinen, werden von Suchmaschinen bevorzugt. Gibt der Internetsurfer auf der Suche nach bestimmten Informationen einen Begriff in eine Suchmaschine ein, erhält er alle Websites zu diesem Thema, die die Suchmaschine „kennt“ und ihre „Kenntnis“ beziehen die Suchmaschinen zum Teil aus der Durchführung der Meta-Tags, weitere Indexbegriffe entnehmen sie den Texten der Websites selbst. Mit sorgfältig ausgewählten Schlüsselwörtern kann eine Website für das Auffinden durch Suchmaschinen optimiert werden. Die Meta-Tags stehen im „head“ einer HTML-Seite und bieten verschiedene (für den Surfer unsichtbare) Informationen. Man kann die Meta-Tags sichtbar machen, indem man im Browserfenster im Menü Ansicht auf "Quelltext anzeigen" klickt.
Abb. 47: Meta-Tags
25 26
o. V.: http://de.wikipedia.org/wiki/Meta-Element o. V.: http://www.internet4jurists.at/urh-marken/metatag01.htm
5 BW 2012/2013
Marina Drobela
Seite 49
7.5 Die Seiten 7.5.1 Home (index.php) Die Seite „Home“ ist zugleich meine Startseite. Sie besteht aus einem Foto, einer kurzen Einleitung und einem Spruch. Als Erstes musste ich das Foto bearbeiten, um es auf der Homepage speichern zu können. Den Spruch und den Text musste ich richtig formatieren und dann einfügen.
Abb. 48: Seite "Home"
5 BW 2012/2013
Marina Drobela
Seite 50
7.5.2 Über mich (ueber_mich.php) Auf dieser Seite berichte ich über meine Auftraggeberin und das Zustandekommen ihrer Backstube. Um den Bericht verfassen zu können, traf ich mich mit der Auftraggeberin. Ich notierte mir ihre Worte der Erzählung und fügte diese auf meiner Seite ein. Auch ein Foto von der Backstube habe ich, nach Bearbeitung mit GIMP, eingefügt.
Abb. 49: Seite "Über mich"
5 BW 2012/2013
Marina Drobela
Seite 51
7.5.3 Sortiment (sortiment.php) Auf der Seite „Sortiment“ will ich über die Produkte meiner Auftraggeberin Auskunft geben. Ein dazu passender Spruch soll die Seite ansprechender machen. Ich baute die Seite mit Unterpunkten auf und gestaltete diese dynamisch.
Abb. 51: Seite "Sortiment-Torten"
Abb. 50: Seite "Sortiment-Schnitten"
5 BW 2012/2013
Marina Drobela
Seite 52
Abb. 52: Seite "Sortiment-Teegeb채ck"
Abb. 53: Seite "Sortiment-Dessert"
5 BW 2012/2013
Marina Drobela
Seite 53
7.5.4 Galerie (galerie.php) Um die Produkte anschaulicher zu machen, fßgte ich auf dieser dynamischen Seite verschiedene Bilder ein. Ich mÜchte durch diese Seite die kunstvollen, von Hand gemachten Produkte den Kunden näherbringen.
Abb. 54: Seite "Galerie-Taufe"
5 BW 2012/2013
Marina Drobela
Seite 54
Abb. 55: Seite "Galerie-Kommunion / Firmung"
5 BW 2012/2013
Marina Drobela
Seite 55
Abb. 56: Seite "Galerie-Hochzeit"
5 BW 2012/2013
Marina Drobela
Seite 56
Abb. 57: Seite "Galerie-Geburtstag"
5 BW 2012/2013
Marina Drobela
Seite 57
Abb. 58: Seite "Galerie-Kindergeburtstag"
5 BW 2012/2013
Marina Drobela
Seite 58
7.5.5 Kontakt (kontakt.php) Meine Auftraggeberin wünscht eine persönliche oder telefonische Bestellung. Um die Anreise zu erleichtern, installierte ich zusätzlich Google map. Über diese Erweiterung kann man sich leicht über die Anfahrt informieren.
Abb. 59: Seite "Kontakt"
5 BW 2012/2013
Marina Drobela
Seite 59
7.5.6 Gästebuch (gaestebuch.php) Meine Auftraggeberin wäre über positive Einträge erfreut. Natürlich möchte sie ehrliche Auskünfte über Geschmack, Aussehen und Verarbeitung ihrer Bäckereien erfahren.
Abb. 60: Seite "Gästebuch-Mitteilungen lesen"
Abb. 61: Seite "Gästebuch-Mitteilungen schreiben"
5 BW 2012/2013
Marina Drobela
Seite 60
7.5.7 Impressum (impressum.php) Zur rechtlichen Absicherung erstellte ich eine Seite „Impressum“.
Abb. 62: Seite "Impressum"
5 BW 2012/2013
Marina Drobela
Seite 61
8 Nachwort Zu Beginn meiner Arbeit wusste ich nicht genau, mit wem und für wen ich eine Homepage gestalten sollte. Beim dritten Anlauf hat sich jemand gefunden, der schon längere Zeit eine Homepage haben wollte. Ich war sehr glücklich, dass ich jemandem die Freude mit einer Homepage sowie mein Maturaprojekt machen konnte. Als ich mich mit der Auftraggeberin traf, hatten wir beide noch keine Vorstellung vom Aussehen der Homepage. Schnell entschlossen wir uns für Template, Farbe sowie den Aufbau. Meine Auftraggeberin bestand auf gewissen Farben und Vorgaben. Zuerst erstellte meine Auftraggeberin ein Logo und anschließend fügte ich dieses im Template ein. Danach folgte ein Schritt nach dem Anderen. Die dynamische Seite bereitete mir am Anfang ein wenig Probleme, aber ich meisterte sie dann doch. Im Großen und Ganzen kann ich sagen, dass mein Projekt „Daniela’s Tortenwelt“ sehr gut gelungen ist. Meine Auftraggeberin Daniela Wimpassinger ist mit dem Ergebnis sehr zufrieden.
5 BW 2012/2013
Marina Drobela
Seite 62
9 Abbildungsverzeichnis ABB. 1: PHASEN DES PROJEKTMANAGEMENTS ........................................................................ 5 ABB. 2: PROJEKTSTRUKTURPLAN ......................................................................................... 11 ABB. 3: LOGO ...................................................................................................................... 20 ABB. 4: CONTROL PANEL ..................................................................................................... 25 ABB. 5: HTML ..................................................................................................................... 26 ABB. 6: CASCADING STYLE SHEETS (CSS) ........................................................................... 27 ABB. 7: NOTEPAD++ LOGO ................................................................................................. 28 ABB. 8: DARSTELLUNG DER FUNKTIONSWEISE VON PHP ....................................................... 29 ABB. 9: MYSQL LOGO ......................................................................................................... 30 ABB. 10: JAVASCRIPT LOGO ................................................................................................ 31 ABB. 11: GIMP LOGO .......................................................................................................... 32 ABB. 12: GIMP ................................................................................................................... 32 ABB. 13: FREEMIND LOGO ................................................................................................... 33 ABB. 14: SCREENSHOT FREEMIND ....................................................................................... 33 ABB. 15: ANMELDEN AUF DEM SERVER ................................................................................. 34 ABB. 16: DATENBANK ANLEGEN............................................................................................ 35 ABB. 17: DATENBANK AUSWÄHLEN ....................................................................................... 35 ABB. 18: TABELLEN ERSTELLEN ........................................................................................... 36 ABB. 19: BENENNEN VON FELDNAMEN, TYPEN UND LÄNGE.................................................... 36 ABB. 20: TABELLE SPEICHERN.............................................................................................. 36 ABB. 21: TABELLE SPEICHERN UND FELDER HINZUFÜGEN ...................................................... 36 ABB. 22: PRIMARY KEY FESTLEGEN ...................................................................................... 37 ABB. 23: BEARBEITEN IM NACHHINEIN .................................................................................. 37 ABB. 25: ANZEIGEN DER VERSCHIEDENSTEN TABELLEN ......................................................... 37 ABB. 24: TABELLENSTRUKTUR ÜBERSICHT ........................................................................... 37 ABB. 26: DATENSÄTZE HINZUFÜGEN ..................................................................................... 38 ABB. 27: ÄNDERN BZW. LÖSCHEN EINES DATENSATZES ........................................................ 38 ABB. 28: BEARBEITUNG EINES DATENSATZES ....................................................................... 39 ABB. 29: IMPORTIEREN EINES DATENSATZES ........................................................................ 39 ABB. 30: EXPORTIEREN EINES DATENSATZES ....................................................................... 39 ABB. 31: ER-DIAGRAMM ...................................................................................................... 40 ABB. 32: W OLD4YOU LOGO ................................................................................................. 41 ABB. 33: PROVIDER ............................................................................................................. 41 ABB. 34: AUSWAHL W EBHOSTING ........................................................................................ 42 ABB. 35: BESTELLUNG W EBHOSTING.................................................................................... 42 ABB. 36: W UNSCHDOMAIN ÜBERPRÜFEN UND AUSWÄHLEN .................................................... 43
5 BW 2012/2013
Marina Drobela
Seite 63
ABB. 37: DOMAIN IN DEN W ARENKORB LEGEN....................................................................... 43 ABB. 38: ÜBERPRÜFUNG DER DATEN IM W ARENKORB ........................................................... 44 ABB. 39: REGISTRIERUNG DES KUNDEN................................................................................ 44 ABB. 40: EINGABE DER KUNDENDATEN ................................................................................. 45 ABB. 41: ZAHLUNGSOPTIONEN WÄHLEN ................................................................................ 45 ABB. 43: BESTÄTIGUNG DER BESTELLDATEN UND AUSLOGGEN .............................................. 46 ABB. 42: ABSENDUNG DER BESTELLUNG .............................................................................. 46 ABB. 45: TEMPLATE UMGESTALTET....................................................................................... 47 ABB. 44: VORLAGE DES GEWÄHLTEN TEMPLATE.................................................................... 47 ABB. 46: MENÜ ................................................................................................................... 48 ABB. 47: META-TAGS .......................................................................................................... 49 ABB. 48: SEITE "HOME" ....................................................................................................... 50 ABB. 49: SEITE "ÜBER MICH" ............................................................................................... 51 ABB. 51: SEITE "SORTIMENT-SCHNITTEN" ............................................................................ 52 ABB. 50: SEITE "SORTIMENT-TORTEN" ................................................................................. 52 ABB. 52: SEITE "SORTIMENT-TEEGEBÄCK" ........................................................................... 53 ABB. 53: SEITE "SORTIMENT-DESSERT" ............................................................................... 53 ABB. 54: SEITE "GALERIE-TAUFE" ........................................................................................ 54 ABB. 55: SEITE "GALERIE-KOMMUNION / FIRMUNG" .............................................................. 55 ABB. 56: SEITE "GALERIE-HOCHZEIT"................................................................................... 56 ABB. 57: SEITE "GALERIE-GEBURTSTAG" ............................................................................. 57 ABB. 58: SEITE "GALERIE-KINDERGEBURTSTAG"................................................................... 58 ABB. 59: SEITE "KONTAKT" .................................................................................................. 59 ABB. 60: SEITE "GÄSTEBUCH-MITTEILUNGEN LESEN" ............................................................ 60 ABB. 61: SEITE "GÄSTEBUCH-MITTEILUNGEN SCHREIBEN"..................................................... 60 ABB. 62: SEITE "IMPRESSUM"............................................................................................... 61
5 BW 2012/2013
Marina Drobela
Seite 64
10 Literaturverzeichnis AINF-Unterlagen von Mag. Steffl Nicole, Mag. Wegleitner Johannes ICS-Unterlagen von Mag. Wurzinger Heinz RM-Unterlagen von Mag. Frank Josef
http://de.wikipedia.org/wiki/Corporate_Design Corporate Design, in Wikipedia vom 20.11.2012
http://www.apachefriends.org/de/xampp.html Seidler, Kai Oswald: XAMPP, 27.01.2013
http://de.wikipedia.org/wiki/Hypertext_Markup_Language HTML, in Wikipedia vom 20.11.2012
http://de.wikipedia.org/wiki/Cascading_Style_Sheets CSS, in Wikipedia vom 05.12.2012 http://de.html.net/tutorials/css/lesson1.php CSS, in HTML.net
http://de.wikipedia.org/wiki/Notepad%2B%2B Notepad++, in Wikipedia vom 13.12.2012
http://de.wikipedia.org/wiki/PHP PHP, in Wikipedia vom 13.11.2012
http://de.wikipedia.org/wiki/MySQL MySQL, in Wikipedia vom 13.11.2012
http://de.wikipedia.org/wiki/JavaScript JavaScript, in Wikipedia vom 20.12.2012 http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript
5 BW 2012/2013
Marina Drobela
Seite 65
JavaScript, in Wikibooks vom 20.12.2012
http://de.wikipedia.org/wiki/GIMP GIMP, in Wikipedia vom 20.12.2012 http://docs.gimp.org/de/introduction.html GIMP, 20.12.2012 http://docs.gimp.org/de/gimp-tools-paint.html GIMP, 20.12.2012
http://de.wikipedia.org/wiki/FreeMind FreeMind, in Wikipedia vom 04.12.2012
http://de.wikipedia.org/wiki/Meta-Element Meta-Tags, in Wikipedia vom 23.11.2012 http://www.internet4jurists.at/urh-marken/metatag01.htm Meta-Tags, 27.10.2012
http://www.re-wissen.de/opencms/Wissen/Techniken/Entity-RelationshipDiagramme.html ER-Diagramme, 12.12.2012
http://www.world4you.com/-54-1-1-de-/cms.html?gclid=CKLnk86h97QCFQEd3godOnIAjg K端hrer, Johannes: World4You
5 BW 2012/2013
Marina Drobela
Seite 66