buschenschank gruber
DESCRIPTION
PANNONEUM, ICS, 5BW, Maturaprojekt, BuschenschankTRANSCRIPT
[Geben Sie Text ein] [Geben Sie Text ein] [Geben Sie Text ein]
Projektleiter: Gruber Tina
Projektmitglieder: Mädl Martina
Fachspezifische
Themenstellung aus
ICS
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 1 von 57
Inhaltsverzeichnis
1 Vorwort .................................................................................. 3
2 Abstract ................................................................................. 4
3 Projektmanagement .................................................................... 5
3.1 Projektbeschreibung ........................................................... 5
3.2 Projektorganisation ............................................................ 6
3.3 Meilenstein ........................................................................ 7
3.4 Projektstrukturplan ............................................................. 8
3.5 Arbeitspakete .................................................................... 9
4 Grundlagen ............................................................................ 23
4.1 HTML (Hypertext Markup Language) .................................... 23
4.2 PHP (Personal Home Page) ................................................. 24
4.3 MySQL ............................................................................. 25
4.4 CSS (Cascading Style Sheets) ............................................. 25
4.5 Phase 5 ............................................................................ 26
4.6 GIMP (GNU Image Manipulation Program) ............................ 27
4.7 ISSUU ............................................................................. 28
5 Unsere Homepage .................................................................. 30
6 Projektdokumentation ............................................................. 31
7 Corporate Design ................................................................... 37
7.1 Template / Index.hmtl ....................................................... 37
7.2 Schriftarten, Schriftfarbe, Schriftgröße, Hintergrundfarbe, Logo,
Überschrift 2 ............................................................................ 41
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 2 von 57
8 Unsere Seiten ........................................................................ 42
8.1 Weinbau ........................................................................... 42
8.2 karte.html ........................................................................ 43
8.3 galerie.html ...................................................................... 47
8.4 anfahrt.html ..................................................................... 50
8.5 kontakt.html .................................................................... 51
9 Unsere Datenbank .................................................................. 52
9.1 ER- Diagramm .................................................................. 52
9.2 Datenbankübersicht ........................................................... 52
9.3 Datenbank erstellen ........................................................... 53
9.4 Tabellen erstellen .............................................................. 53
10 Nachwort ............................................................................ 55
11 Abbildungsverzeichnis .......................................................... 56
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 3 von 57
1 Vorwort
Im Rahmen unseres Ausbildungsschwerpunktes „Information and
Communication Solutions“ erarbeiteten wir für den „Buschenschank
Gruber“ in Illmitz eine webbasierende, elektronische
Informationsplattform mit dynamischer Datenbankanbindung. Mit
Otmar Gruber, Vater von Tina Gruber, hatten wir sicherlich ein
kompetentes und zuverlässiges Team zur Verfügung.
Ziel war es, unsere erworbenen Kenntnisse bezüglich des World Wide
Web in einem Projekt zusammenzufassen.
Der Grund für dieses Projekt war der Wunsch des
Auftragverantwortlicher auch im Internet vertreten zu sein. Wir hoffen,
dass dem „Buschenschank Gruber“ mit dieser Homepage an Popularität
gewinnt.
Auf den folgenden Seiten finden Sie eine genaue Dokumentation
unseres Projekts.
Abbildung 1: Buschenschank Gruber
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 4 von 57
2 Abstract
Within the scope of our subject “Information and Communication
Solutions”, we have created a web-based, electronic information
platform with dynamic database connection for the “Buschenschank
Gruber”. We want to combine our knowledge about World Wide Web in
this project.
By Otmar Gruber, father of Tina Gruber, we certainly had a competent
and reliable team.
The reason for our decision to make this project is that we are very
interested in the bikerclub. Moreover the club wants to be represented
on the Internet too. We hope that we can make the “Buschenschank
Gruber” a little bit more popular with this homepage.
On the following pages you„ll find the documentation about our project.
Abbildung 2: Buschenschank Gruber
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 5 von 57
3 Projektmanagement
3.1 Projektbeschreibung
Buschenschank Gruber
Beginn: 23.10.2011
Ende: 23. 03. 2011
Ziele
Erstellen einer Homepage Dynamische und statische
Seiten erstellen Gut besuchte Homepage Zufriedener Auftraggeber Beschreibung des Betriebs Kontakte und Anfahrtsplan
einbinden Fähigkeit des
Projektmanagements zu erweitern
Nichtziele
Nicht funktionierende Homepage
Totale Unzufriedenheit seitens des Auftraggebers
Wenig Besucher der Homepage
Kosten: € 65 für World4you - für die Freigabe/Veröffentlichung der Homepage
Auftraggeber:
Buschenschank Gruber / Illmitz
Projektleiter:
Tina Gruber
Projektteammitglied:
Mädl Martina
Auftraggeber:
Otmar Gruber
Projektleiterin:
Tina Gruber
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 6 von 57
Buschenschank Gruber
Auftraggeber: Otmar Gruber
Projektleiterin: Gruber Tina
Projektmitarbeiterin:
Mädl Martina
3.2 Projektorganisation
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 7 von 57
3.3 Meilenstein
Meilensteinplan
NR. Meilenstein Plantermin IST-Termin
1 Projektstart durchführen 20.10. 2010 20.10.2010
2 Template finden 27.10.2010 27.10. 2010
3 Corporate Design erstellen 3. 11. 2010 10.11.2010
4 Template anpassen 17.11. 2010 20.11.2010
5 Unterseiten erstellen 23.2.2011 2.3.2011
6 Datenbank erstellen 9.3.2011 16.3.2011
7 Projektabschluss
durchführen 23.3.2011 23.3.2011
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 8 von 57
Buschenschank Gruber
Projektmanagement
1
Projektstart
1.1
Projektkoordination
1.2.
Projektcontrolling
1.3.
Projektabschluss
1.4.
Corporate Design
2
Schriftart
2.1.
Farben
2.2.
Logo
2.3.
Layout
2.4.
fertigstellen
2.5.
Template bearbeiten
3
Template planen
3.1.
Template suchen
3.2.
Template ändern
3.3.
Seiten
4
Index
4.1.
Weinbau
4.2.
Speisekarte
4.3.
Galerie
4.4.
Anfahrt
4.5.
Kontakt
4.6.
dynamische Seiten
5
Datenbank anlegen
5.1.
Tabelle
5.2.
Datensätze
5.3.
Projektabschluss
6
Fehlerbegebung
6.1.
Projektdokumentation
6.2.
Website veröffentlichen
6.3.
Projektabgabe
6.4.
3.4 Projektstrukturplan
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 9 von 57
3.5 Arbeitspakete
Arbeitspakete
1
Projektmanagement
4 Seiten
2 Corporate
Design
5 Dynamische
Seiten 3 Template
bearbeiten
6
Projektabschluss
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 10 von 57
1.1. Projektstart Projektdefinition
Inhalt Beschreibung des Projekts kurze
Präsentation in der Klasse
Nicht-Inhalt Keine Projekt, keine Präsentation
Ergebnis Erfolgreicher Projektstart
Ressourcen Laptop, Beamer, Projektleiter,
Projektmitglied
1.2. Projektkoordination Projektdefinition
Inhalt Gut verteilte Aufgaben innerhalb
der Projektgruppe
Nicht-Inhalt
Aufgaben werden nicht gerecht
aufgeteilt, Aufgaben werden nicht
oder doppelt erledigt
Ergebnis Organisierte Aufgabenverteilung
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 11 von 57
1.3. Projektcontrolling Projektdefinition
Inhalt Einzelne Aufgaben müssen zum
geplanten Zeitpunkt erledigt sein
Nicht-Inhalt Unkoordiniertes Zeitmanagement
Ergebnis Gutes Projektcontrolling
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop
1.4. Projektabschluss Projektdefinition
Inhalt Zeitgerechte Projektabgabe
Nicht-Inhalt Der Abgabetermin wurde nicht
eingehalten
Ergebnis Erfolgreiche Präsentation
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet
2.1. Schriftarten Projektdefinition
Inhalt Webtaugliche Schriftarten
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 12 von 57
Gut lesbare Schriften
Nicht-Inhalt
unlesbare, unübersichtliche
Schriften
kann nur bei einem
Betriebssystem angezeigt
werden
Ergebnis
Webtaugliche Schriftarten, welche
auch auf allen Betriebssystemen
ausgegeben werden können
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp
2.2. Farben Projektdefinition
Inhalt Passende Farbe ->evtl. passend
zum Logo
Nicht-Inhalt Grelle oder zu dunkle Farben
Ergebnis Harmonische Farben für das
Corporate Design auswählen
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 13 von 57
2.3. Logo Projektdefinition
Inhalt Passendes Logo zum Thema
Evtl. nicht so einfach
Nicht-Inhalt Fades Logo
unpassend
Ergebnis Passendes Logo gefunden
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp
2.4. Layout Projektdefinition
Inhalt Template an das Projektthema
anpassen
Nicht-Inhalt Unübersichtliches Layout
Ergebnis Übersichtliches Layout
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet
2.5. fertigstellen Projektdefinition
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 14 von 57
Inhalt Letzten Feinschliff
Nicht-Inhalt
Keine passenden Farben
Keine webtauglichen
Schriftarten
Kein harmonisches Logo
Ein unübersichtliches Layout
Ergebnis Ziel wurde erreicht
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp
3.1. Template planen Projektdefinition
Inhalt
Geeignetes Template für die
Seite auswählen
Übersichtliches Template wählen
Nicht-Inhalt Völlig unpassendes und
unstrukturiertes Template
Ergebnis Passendes Template für den
Buschenschank Gruber
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 15 von 57
3.2. Template suchen Projektdefinition
Inhalt Übersichtliches Template
aussuchen1
Nicht-Inhalt Unpassendes Template auswählen
Ergebnis
Passendes Template für den
Buschenschank Gruber von einer
Free-Template-Webseite2
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet
1 www.freewebtemplates.com
www.freewebsitetemplates.com
www.freecss.com
2 http://www.free-css-templates.com
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 16 von 57
3.3. Template ändern Projektdefinition
Inhalt
Das Template perfekt für das
Thema abstimmen
Corporate Design
Nicht-Inhalt
Schlecht oder nicht
abgeändertes Template
Kein Corporate Design
Ergebnis Ziel eines passenden abgeändertes
Template
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp, Phase5
4.1. Index Projektdefinition
Inhalt Index muss gut strukturiert sein
und ansprechend sein
Nicht-Inhalt Nicht gut strukturierte und
ansprechende Hauptseite
Ergebnis Ziel einer optimalen Hauptseite
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Gimp, Phase5
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 17 von 57
4.2. Weinbau Projektdefinition
Inhalt
Gute Erklärung über den
Weinbau
Optimale Strukturierung auf der
Seite
Nicht-Inhalt Keine Information über den
Weinbau
Ergebnis Strukturierte Weinbauinformation
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Phase5
4.3. Speisekarte Projektdefinition
Inhalt Übersichtliche Speisekarte über
issuu ausgeben
Nicht-Inhalt Keine funktionierende flash-
Speisekarte
Ergebnis Strukturierte Online-Speisekarte
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Phase5, Issuu
4.4. Galerie Projektdefinition
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 18 von 57
Inhalt
Bilder sollen in einer
angemessen Größe angezeigt
werden
Die Bilder sollen eine gute
Qualität haben und nicht
verschwommen sein
Bilder sollen in einer
Flashanimation angezeigt
werden
Nicht-Inhalt
Bilder können nicht angezeigt
werden
Bilder sind verschwommen
Bilder werden zu groß oder zu
klein angezeigt
Ergebnis Strukturiertes Online- Fotoalbum
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Phase5
4.5. Anfahrt Projektdefinition
Inhalt Einen gut erklärten und
definierbaren Anfahrtsplan
Nicht-Inhalt Kein genauer Anfahrtsplan
Ergebnis Klare Darstellung des Anfahrtsplan
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 19 von 57
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Phase5
4.6. Kontakt Projektdefinition
Inhalt Gut übersichtliche
Kontaktinformation
Nicht-Inhalt Keine Kontaktinformation
Ergebnis Ziel einer optimalen strukturierten
Kontaktseite
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Phase5
5.1. Datenbank anlegen Projektdefinition
Inhalt Treffender Name für Datenbank
Nicht-Inhalt Keine Anlegung einer Datenbank
Ergebnis Angelegte Datenbank
Ressourcen
Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp,
Zugangsdaten via Bildungsserver
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 20 von 57
5.2. Tabelle Projektdefinition
Inhalt
Treffender Name für Tabelle
Inhalt der Tabelle festlegen
Struktur festlegen
Nicht-Inhalt Keine Tabelle vorhanden
Ergebnis
Aussagereiche Tabelle mit
Informationen über die
verschiedenen Weine
Ressourcen
Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp,
Zugangsdaten via Bildungsserver
5.3. Datensätze Projektdefinition
Inhalt Datensätze mittels .csv-Datei in
die Tabelle importieren
Nicht-Inhalt Falsche Datensätze
Ergebnis Richtige Datensätze
Ressourcen
Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp, Excel,
Zugangsdaten via Bildungsserver
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 21 von 57
6.1. Fehlerbehebung Projektdefinition
Inhalt
Einzelheiten ausbessern bzw.
verbessern
Evtl. Fehler beheben
Nicht-Inhalt Homepage mit Fehlern
Ergebnis Homepage ohne Fehler
Ressourcen
Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp, Excel,
Zugangsdaten via Bildungsserver
6.2. Projektdokumentation Projektdefinition
Inhalt Gut gegliederte Themenstellung
Nicht-Inhalt Keine Projektdokumentation
Ergebnis Fertige Themenstellung mit gutem
Inhalt
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, Word
6.3. Website veröffentlichen Projektdefinition
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 22 von 57
Inhalt
die fertiggestellte Webseite, im
Internet mit geeignetem Webspace
veröffentlichen
Nicht-Inhalt Keine Veröffentlichung der
Homepage
Ergebnis Homepage online stellen
Ressourcen
Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp,
world4you
6.4. Projektabgabe Projektdefinition
Inhalt
Zufriedener Auftraggeber
Alle Arbeitspakete erfolgreich
abgeschlossen
Nicht-Inhalt Keine Projektabgabe
Ergebnis Eine fertige Homepage mit der
dazugehörigen Themenstellung
Ressourcen Projektleiter, Projektmitarbeiter,
Laptop, Internet, xampp
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 23 von 57
4 Grundlagen
4.1 HTML (Hypertext Markup Language)3
Hypertext Markup Language Hypertext Auszeichnungssprache
HTML wurde 1990 von dem Wissenschaftler Tim Berners-Lee4 erfunden.
Eigentlich wollte er lediglich, dass Wissenschaftler einfacher auf
Forschungsergebnisse anderer zugreifen können. Doch das Projekt
wurde ein größerer Erfolg. Mit der Erfindung von HTML legte er den
Grundstein für das Internet, wie wir es heute kennen.
Wenn man eine Webseite erstellen will, geht kein Weg an HTML vorbei.
HTML ist eine Sprache, die es ermöglicht, Informationen im Internet
aus-zugeben. Es dient zur Strukturierung von Inhalten wie Texten,
Bildern und Hyperlinks, sowie für beliebige Befehle für Formatierungen
in Dokumenten. Diese Dokumente sind die Grundlage des World Wide
Web. Um In-formationen und Befehle ausführen zu können, benötigt
man jedoch auch einen Browser, welcher dafür zuständig ist die HTML-
Datei zu lesen und zu interpretieren.
Die sichtbare Internetseite, ist die Interpretation des Quellcodes durch
den Browser. Für ein untrainiertes Auge sieht der HTML-Code etwas
kompliziert aus. Über spezielle Codes können Hyperlinks erstellt
werden, sogenannte WebLinks. Diese Hyperlinks sind Verweise auf
andere Dokumente oder Seiten im Internet.
3 http://de.wikipedia.org/wiki/Hypertext_Markup_Language
4 * 8. Juni 1955 in London
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 24 von 57
4.2 PHP (Personal Home Page)5
PHP4 ist eine sogenannte Scriptsprache, die von einem in den
Webserver eingebundenen PHP-Interpreter ausgeführt wird. Dadurch
ist es möglich die Ausgabe des Webservers an einen Klienten nachhaltig
zu verändern, wodurch sich eine ganze Reihe von Einsatzmöglichkeiten
ergibt.
1985 entwickelte der Däne Rasmus Lerdorf 6 in der
Skriptsprache PERL eine Reihe von Funktionen zur
dynamischen Erstellung von Homepages und nannte es
PHP – Personal Home Page. Im Laufe der Jahre wurden
diese dann stetig weiterentwickelt und wurden mit der
Umsetzung in der Programmiersprache „C“ letztendlich
leistungsfähiger als PERL selbst. Diese Leistungsfähigkeit
wurde 1999 in PHP4 mit dem Einsatz einer neu-en Engine,
der ZEND-API, nochmals gesteigert. Inzwischen gibt es
erste Ausgaben von PHP5.
Die Vor- und Nachteile von PHP begründen sich darin, dass es auf dem
Webserver und nicht beim Klienten ausgeführt wird. Der Vorteil hierbei
im Gegensatz zu Clientscripten ist, dass das Ergebnis bei jeden Klienten
gleich ist und keine Kompatibilitätsprobleme mit dessen Plattform wie
zum Beispiel JavaScript, entstehen. Das ist allerdings auch der
Nachteil: PHP kann keine animierten Menüs oder fliegende Bilder beim
Klienten anzeigen.
5 http://de.wikipedia.org/wiki/PHP
6 * 22. November 1968 in Grönland
Abbildung 3: Rasmus
Lerdorf
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 25 von 57
Um PHP-Scripte ausführen zu können, benötigt man einen Webserver
wie zum Beispiel Apache (www.apache.de) oder IIS
(www.microsoft.com) und einen PHP-Interpreter (www.php.net).
Beides kann man auf einem lokalen Rechner über den sogenannten
Localhost laufen lassen, ohne dass man dazu eine Internetverbindung
benötigt. Um Scripte in PHP selbst schreiben zu können reicht ein
einfacher Text-Editor wie zum Beispiel Phase5 aus, wobei für PHP
bereits einige gute Editoren gibt, die mit ihrem Syntaxher-Vorhebungen
die Lesbarkeit enorm steigern.
4.3 MySQL
Der MySQL5 Server ist ein relationales Datenbankverwaltungssystem.
Es ist als Open-Source-Software, aber auch als kommerzielle
Enterpriseversion für verschiedene Betriebssysteme erhältlich und
bildet die Grundlage für viele dynamische Webauftritte.
Ursprünglich wurde MySQL von einem schwedischen Unternehmen,
namens MySQL AB entwickelt. 2008 wurde das Unternehmen von Sun
Microsystems übernommen, das nun auch für die Weiterentwicklung
des Codes verantwortlich ist. Anfang dieses Jahres wurde Sun
Microsystems von Oracle übernommen, dadurch wurde MySQL
Eigentum eines der größten Anbieter von kommerziellen Datenbanken.
4.4 CSS (Cascading Style Sheets)
Heutzutage ist CSS die Standard-Stylesheetsprache für Webseiten. CSS
wird vor allem im Zusammenhang mit HTML und XML eingesetzt. Es
legt dabei fest, wie ein bestimmter Inhalt oder Bereich einer
Abbildung 4: MySQL-Logo
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 26 von 57
Internetseite dar-gestellt werden soll. Im HTML-Dokument gibt man
nur die Bedeutung einzelner Abschnitte aus, das Aussehen dieser
einzelnen Abschnitte wird im CSS festgelegt. Kurz gesagt ist CSS für
die optische Darstellung zuständig. Man kann es zum festlegen von
Schriftarten, Farben, Rändern, Linien, Höhen, Breiten,
Hintergrundbildern und für fortgeschrittene Positionierung benutzen.
CSS wird meistens als externes Stylesheet in HTML oder XML-Seiten
ein-gebunden. Dies hat den großen Vorteil, dass für mehrere
Dokumente das Stylesheet nur einmal heruntergeladen werden muss.
4.5 Phase 57
Phase 5 ist ein für den Privatgebrauch oder Schulen (nichtkommerzielle
Nutzung) kostenloses Programm zum Erstellen von HTML-Dokumenten
unter Windows. Er wurde ursprünglich seit 1996 von Ulrich Meybohm
entwickelt und wird seit 1998 von Hans-Dieter Berretz weiterentwickelt.
Die Entwicklung des Programms wird in Phasen ausgedrückt. Meybohm
hatte kein Interesse an einer Weiterentwicklung des Programms, da er
sich nicht mehr so intensiv mit Windows-Programmen beschäftigen
wollte und seine Energie in Linux-Projekte steckte.
Das Programm ist portabel, das heißt nach der Installation lässt es sich
auf einen USB-Stick kopieren und an jedem Windows-PC ohne
Funktionsverlust benutzen.
7 http://de.wikipedia.org/wiki/HTML-Editor_Phase_5
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 27 von 57
Da das Programm ursprünglich Freeware war, fand es weite
Verbreitung an Schulen und anderen Bildungseinrichtungen. Heute wird
es nur noch für Schulen und Privatanwender kostenlos angeboten.
4.6 GIMP8 (GNU Image Manipulation Program)
GIMP ist ein freies, sehr leistungsfähiges Foto- und
Bildbearbeitungsprogramm. Der Name GIMP ist zusammengesetzt aus
den englischen Worten „GNUImage Manipulation Program“, was im
Deutschen soviel bedeutet wie „GNU Bildbearbeitungsprogramm“.
Sie können GIMP für eine Vielzahl an Aufgaben einschließlich
Fotonachbearbeitung, Bildkomposition und -malerei einsetzen.
Eine große Stärke von GIMP ist seine Erweiterbarkeit. Es wurde von
Grund auf so entworfen, dass es durch verschiedenste Erweiterungen
fast beliebige neue Funktionen erhalten kann. Sogar eine eigene kleine
Programmiersprache, genannt Skript-Fu, wurde ihm mit auf den Weg
gegeben, um einfache wie komplexe Probleme durch kleine Programme
lösen zu können.
Eine weitere Stärke von GIMP besteht in der freien Verfügbarkeit des
Programmcodes. Hierdurch ist es auf sehr vielen verschiedenen
Plattformen verfügbar. Die meisten GNU/Linux-Distributionen beinhalten
GIMP als Standardanwendung für Bildbearbeitung. GIMP ist Freie
Software und wird unter der GPL weitergegeben. Die GPL gibt
Benutzern die Freiheit, auf den Programmcode zuzugreifen, diesen zu
modifizieren und weiterzugeben
8 http://docs.gimp.org/de/introduction.html
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 28 von 57
4.7 ISSUU9
Issuu ist eine Plattform zum Speichern und
Präsentieren von Dokumenten. Es stehen die
selbst erstellten Magazine im Vordergrund.
Issuu verwandelt ein beliebiges PDF in eine webfreundliche Flash-
Animation.
Natürlich enthält das kostenlose Angebot von Issuu auch ein Social
Network mit Nachrichtenfunktion, Profil und Newsfeed. Wie bei vielen
anderen neuen Diensten ist aktuell noch kein Anzeichen eines
Geschäftsmodells zu erkennen
Abbildung 6: Issuu- Homepage
9 Eigene PowerPoint
Abbildung 5: ISSUU
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 29 von 57
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 30 von 57
5 Unsere Homepage
index.h
tml
gale
rie.h
tml
eig
enbauw
ein
e.h
tml
anfa
hrt
.htm
l konta
kt.
htm
l
weis
sw
ein
e.p
hp
deta
ils_w
eis
s.p
hp
rotw
ein
e.p
hp
deta
ils_ro
t.php
kart
e.h
tml
wein
bau.h
tml
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 31 von 57
6 Projektdokumentation
20. Oktober:
Entscheidung zwischen Homepage und Podcast
Brainstorming
Suche eines Auftraggebers
27. Oktober:
Corporate Design überlegen
o Schriftarten: Verdana, Helvetica, Tahoma, sans-serif
o Schriftfarbe: #FFFFFF
o Schriftgröße: 80%
o Hintergrundfarbe: #564315
o Logo:
o Überschrift 2: Helvetica, Arial,
Verdana, Tahoma, sans-serif
3. November:
Fertigstellen der Meilensteine
Design mit dem Auftraggeber besprochen
Sammeln von Materialien
Bilder suchen und einscannen
5. November:
Bilder bearbeiten
Fertigstellen der Arbeitspakete
Suchen eines geeigneten Templates auf folgenden Seiten:
o www.webtemplates.com
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 32 von 57
o www.freelayouts.com
o www.fee-css-templates.com
10. November:
Farben und Schriftarten im Template verändert/angepasst
Erstellen der verschiedenen Seiten
Ändern der Menüleiste
Bild auf der linken Seite der Tabelle geändert
17. November:
Webseiten mit guten Bestellsystemen gesucht: (dieses Ziel mussten wir jedoch später abbrechen, da der Auftraggeber sich umentschieden hat
und keinen Online Verkauf machen wollte.)
o http://www.krug.at/zechhaus/bestellung0.asp
o http://www.sasbacher.de
o http://www.beisteiners-wine.at/deutsch/bestellung.php
o http://www.leginthov.at/deutsch/bestellung.php?bestellland=at
o http://www.hundsdorfer.at/deutsch/bestellung.php
o http://www.weingut-kerschbaum.at/htm/weinshop/bestellung.php
o http://www.weingut-ploechl.at/bestellung/bestellung1.php
Suche eines passenden Domainnamens und eines Hosting
Providers
o www.world4you.com
24. November:
Speisekarte in Word fertig abgetippt und bearbeitet
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 33 von 57
Speisekarte auf Issuu veröffentlicht
Reservierung des Domainnamen: www.buschenschank-gruber.at
1. Dezember:
Logo in Gimp bearbeitet (skaliert, Transparenz)
Logo in die linke Seite der Tabelle (auf das Hintergrundbild) eingefügt
Seite Impressum erstellt
7. Dezember:
Texte für die Seite weinbau.html mit Auftraggeber geschrieben
8. Dezember:
Text in weinbau.html abgetippt
Erstellung der Galerie begonnen
o Jalbum downgeloadet
o Bilder eingefügt
o Fotos vom Buschenschank erstellt
15. Dezember:
Fotos vom Buschenschank in galerie.html eingebunden
Hintergrundbild der Seite, in der die Galerie geöffnet wird, angepasst
o target=“_blank“ (wird in neuer Seite geöffnet)
Änderung des Textes in index.html
22. Dezember:
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 34 von 57
Seite kontakt.html gemacht
Bild der Familie bearbeitet, zugeschnitten und in kontakt.html eingefügt
Anfahrtsplan erstellt und in die Seite anfahrt.html eingebunden
12. Jänner:
Größe des Anfahrtsplans an die Größe der rechten Tabellenspalte
angepasst
Brainstorming für dynamischen Teil unserer Homepage
19. Jänner:
.csv – Dateien, weissweine.csv und rotweine.csv, mittels Excel gemacht
Datenbank angelegt
Tabellen weissweine und rotweine angelegt
26. Jänner:
.csv – Dateien in die Tabellen importiert
Erstellen der Seiten weissweine.php und rotweine.php
Erstellen der Seiten details_weiss.php und details_rot.php
2. Februar:
Ausgeben der Daten aus der Datenbank mittels While-Schleife
Formatieren der Tabelle
Anpassen der Breite der Tabelle
Border entfernen
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 35 von 57
16. Februar:
Speisekarte von issuu in karte.html einfügen (hier störte uns immer ein
weißer Hintergrund)
Ändern der Seite karte.html
o Erstellen der style2.css
o Linken Teil des Containers entfernen
23. Februar:
Erstellung der fachspezifischen Themenstellung begonnen
o Layout besprochen (Farben, Schriftart,…)
Hintergrundfarbe der Speisekarte von issuu angepasst
Speisekarte neu in die Seite karte.html eingefügt und angepasst
5. März:
Fotos vom Sautanz beim Buschenschank Gruber gemacht
Fotos von den Eigenbauweinen (Flaschen) der Familie Gruber
gemacht
9. März:
Fotos vom Sautanz und von den Flaschen bearbeitet
Fotos vom Sautanz mit Jalbum in galerie.html eingebunden
Fachspezifische Themenstellung
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 36 von 57
16. März:
Fotos von den Weinflaschen auf htdocs in buschenschank/images
verschoben, damit sie auf den Seiten details_weiss.php bzw
details_rot.php angezeigt werden
Größe der Fotos geändert
19. März:
Fachspezifische Themenstellung zum Großteil fertig gemacht
22. März:
Überprüfung der gesamten Homepage (Links, Verweise,
Schreibfehler,…)
Fertigstellung der fachspezifischen Themenstellung
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 37 von 57
7 Corporate Design
7.1 Template / Index.hmtl
im Originalzustand
Abbildung 7: Original-Template
nachher
Abbildung 8: endgültiges Template
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 38 von 57
Schrittfolge:
1. Hintergrundfarbe wurde durch ein Hintergrundbild ersetzt
body
{
padding: 0;
margin: 0;
background: url(images/k0131292.jpg);
color: #FFF;
font-family: verdana, helvetica, tahoma, sans-serif;
font-size: 80%;
line-height: 150%; }
2. Linkes Hintergrundbild geändert
#containerleft
{
float: left;
width: 350px;
height: 350px;
background-image:url('images/containerleft_image.jpg');
border-right: 20px solid #FFF;
padding: 10px;
color: #4F2E14
}
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 39 von 57
3. Logo wird, skaliert und transparent, in das Hintergrundbild
hinzugefügt
Abbildung 9: linkes Hintergrundbild
4. Menüleiste geändert
Abbildung 10: Menüleiste
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 40 von 57
5. Rechter Tabellenseitenhintergrund wurde durch braun
ersetzt
#containerright
{
float: right;
width: 350px;
height: 350px;
background: #564315;
overflow: auto;
padding: 10px;
6. Impressum hinzugefügt
Abbildung 11: Impressum
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 41 von 57
7.2 Schriftarten, Schriftfarbe, Schriftgröße,
Hintergrundfarbe, Logo, Überschrift 2
o Schriftarten: Verdana, Helvetica, Tahoma, sans-serif
o Schriftfarbe: #FFFFFF
o Schriftgröße: 80%
o Hintergrundfarbe: #564315
o Logo:
o Überschrift 2: Helvetica, Arial, Verdana, Tahoma, sans-serif
Abbildung 12: Impressum
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 42 von 57
8 Unsere Seiten
8.1 Weinbau
Die Seite Weinbau gibt Informationen über den Weinbau der Familie
Gruber, sowie über das Weinsortiment.
Abbildung 14: Weinbau
Abbildung 13: Weinbau
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 43 von 57
8.2 karte.html
Abbildung 15: Issuu_Erklärung
1
. 2.
1. Zuerst muss man sich bei issuu anmelden, danach klickt man auf „Upload Document“
2. Nachdem gibt man im Feld „Browse“ die pdf-Datei an.
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 44 von 57
1.
2.
3.
4.
6.
5.
1.Title -> Titel der pdf-
Datei
2.Description -> in
Sitchwörter
beschreiben, was sich
in der Datei befindet
3.Web name -> kann
man die gewünschte
Endung der URL
angeben
4.Keywords -> hier
kannst du in
Stichwörter die Datei
beschreiben, um so
den Suchvorgang für
andere zu
beschleunigen
5.Type -> Beschreibe
deine Datei (Book,
Journal, Report,
Newspaper, Other..)
6.Nun kannst du durch
„Upload file“ die pdf-Datei hochladen
Abbildung 16: Issuu_Erklärung
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 45 von 57
Abbildung 17: Issuu_Erklärung
1. Nun liegt die hochgeladene Datei auf „Published“
2. Dann klickt man die pdf Datei an und geht so dann auf „ <> Embed“
2.
3.
1. 1.Dann öffnet sich zusätzlich ein eigenes Fenster, in dem man durch verschiedene Einstellungen die pdf-Datei attraktiver macht
2.Zum Beispiel Größe, Layout, Farbe, „Umblättersystem“ etc.
3.Wenn du alle Einstellungen gemacht hast, kannst du den Link in deine
Homepage einfügen
Abbildung 18: Issuu_Erklärung
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 46 von 57
Abbildung 19: Issuu_Erklärung
Und so sieht die fertige Speisekarte auf unsere Homepage aus
Abbildung 20: fertige Speisekarte
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 47 von 57
8.3 galerie.html
Wir haben unser Fotoalbum mit Hilfe von JAlbum gestaltet. JAlbum10 ist
ein Programm, das es dem Nutzer erlaubt, Fotoalben von digitalen
Bildern zu erstellen, verwalten und als statische HTML-Seiten zu
veröffentlichen. So kann man seine Fotos einfach mit Freunden teilen
oder der ganzen Welt zugänglich machen. JAlbum ist Freeware und in
Java geschrieben, kann also auf allen Betriebssystemen zum Laufen
gebracht werden. In der aktuellen Version unterstützt JAlbum 31
verschiedene Sprachen.
Wir haben die Fotos aus unserem Ordner ausgewählt und in JAlbum
eingefügt.
10 http://www.volkersfreunde.de/jalbum-digitale-fotoalben-erstellen-und-
veroeffentlichen/
Abbildung 21: Einfügen der Fotos in JAlbum
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 48 von 57
Hat man die Fotos eingefügt, sucht man sich Skin und Style aus und
klickt auf „Erstellen“.
Es wird nun ein Ordner mit dem Namen Jalbum erstellt, indem unter
anderem auch eine index.html zu finden ist. Wir haben danach in der
Datei galerie.html auf diese index. html verwiesen, sodass wenn man
auf den Link klickt, sich die Galerie öffnet.
Abbildung 22: Erstellen der Galerie
Abbildung 23: Einbinden der Galerie in galerie.html
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 49 von 57
Durch target=“_blank öffnet sich die Galerie in einer neuen Seite.
Weiters haben wir in der Datei common.css das Hintergrundbild an
unsere Homepage angepasst.
Abbildung 24: fertige Galerie
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 50 von 57
8.4 anfahrt.html
Um den genauen Standort des Buschenschank Gruber zeigen zu
können, haben wir uns entschieden, mit Hilfe von googleMaps, zu
erstellen.
Die Adresse des Buschenschanks Gruber (7142 Illmitz, Ober
Hauptstraße 82) wurde in GoogleMaps11 eingegeben und der Link
(unten) wurde in anfahrt.html eingefügt.
11 maps.google.at
Abbildung 25: Anfahrtslink
Abbildung 26: Anfahrt
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 51 von 57
8.5 kontakt.html
Abbildung 27: Kontaktseite
Abbildung 28: Kontaktseite
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 52 von 57
9 Unsere Datenbank
9.1 ER- Diagramm
Eine Hilfe für die Erstellung der Tabellen waren auch die ER-Diagramme, die wir
vorher anfertigten.
Programm: Dia
9.2 Datenbankübersicht
Buschenschank Gruber
1. Tabelle: weissweine
o Id
o Sorte
o Jahrgang
o Beschreibung
o Foto
2. Tabelle: rotweine
o Id
o Sorte
o Jahrgang
o Beschreibung
o Foto
Abbildung 29: ER - Diagramm
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 53 von 57
9.3 Datenbank erstellen
Bevor wir die dynamischen Seiten erstellen konnten, mussten wir eine Datenbank
erstellen und darin verschiedenen Tabellen anlegen. Dabei überlegten wir uns
zuerst wie viele und vor allem welche Tabellen wir benötigen.
Für den Namen der Datenbank wählten wir „buschenschank“.
9.4 Tabellen erstellen
Wir entschieden uns für zwei Tabellen, nämlich die Tabelle „weissweine“ und die
Tabelle „rotweine“.
Abbildung 30: Erstellung der Datenbank
Abbildung 31: Erstellung der Tabellen
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 54 von 57
Nachdem wir die Tabellen erstellt hatten, mussten wir die Felder eingeben. Als
Primary Key wählten wir das Feld „id“.
Wir erstellten zwei verschiedene .csv – Dateien mithilfe von Excel, in welche wir die
Daten der Weiß- bzw. Rotweine eingaben. Die Datei weissweine.csv wurde in die
Tabelle weissweine importiert, die Datei rotweine.csv wurde in die Tabelle rotweine
importiert.
Abbildung 32: Erstellte Felder in der Tabelle
Abbildung 33: csv.Datei importieren
Abbildung 34: Datesätze importiert
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 55 von 57
10 Nachwort
Auf Grund des Ausbildungsschwerpunktes ICS konnten wir
sehr viel Erlerntes in das Projekt mitbringen. Ebenso haben
wir durch das Projekt sehr viel Neues dazugelernt. Doch
wenn wir etwas nicht gewusst haben, konnten wir problemlos
unsere Ausbildungslehrer um Hilfe fragen.
Im Großen und Ganzen haben wir, mit einigen kleinen
Problemen, unser Ziel erreicht und wir würden uns freuen,
nochmals eine Homepage zu gestalten.
Wir hoffen, dass wir dem Buschenschank Gruber eine gut
passende und strukturierte Homepage gestalten konnten
und er somit an Popularität gewinnt.
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 56 von 57
11 Abbildungsverzeichnis
ABBILDUNG 1: BUSCHENSCHANK GRUBER .......................................................................3
ABBILDUNG 2: BUSCHENSCHANK GRUBER .......................................................................4
ABBILDUNG 3: RASMUS LERDORF ............................................................................. 24
ABBILDUNG 4: MYSQL-LOGO ................................................................................. 25
ABBILDUNG 5: ISSUU ......................................................................................... 28
ABBILDUNG 6: ISSUU- HOMEPAGE ............................................................................ 28
ABBILDUNG 7: ORIGINAL-TEMPLATE .......................................................................... 37
ABBILDUNG 8: ENDGÜLTIGES TEMPLATE ..................................................................... 37
ABBILDUNG 9: LINKES HINTERGRUNDBILD ................................................................... 39
ABBILDUNG 10: MENÜLEISTE .................................................................................. 39
ABBILDUNG 11: IMPRESSUM ................................................................................... 40
ABBILDUNG 12: IMPRESSUM ................................................................................... 41
ABBILDUNG 13: WEINBAU ..................................................................................... 42
ABBILDUNG 14: WEINBAU ..................................................................................... 42
ABBILDUNG 15: ISSUU_ERKLÄRUNG ......................................................................... 43
ABBILDUNG 16: ISSUU_ERKLÄRUNG ......................................................................... 44
ABBILDUNG 17: ISSUU_ERKLÄRUNG ......................................................................... 45
ABBILDUNG 18: ISSUU_ERKLÄRUNG ......................................................................... 45
ABBILDUNG 19: ISSUU_ERKLÄRUNG ......................................................................... 46
ABBILDUNG 20: FERTIGE SPEISEKARTE ...................................................................... 46
ABBILDUNG 21: EINFÜGEN DER FOTOS IN JALBUM ......................................................... 47
ABBILDUNG 22: ERSTELLEN DER GALERIE ................................................................... 48
ABBILDUNG 23: EINBINDEN DER GALERIE IN GALERIE.HTML .............................................. 48
Tina Gruber
Martina Mädl Buschenschank Gruber Seite 57 von 57
ABBILDUNG 24: FERTIGE GALERIE ............................................................................ 49
ABBILDUNG 25: ANFAHRTSLINK ............................................................................... 50
ABBILDUNG 26: ANFAHRT ...................................................................................... 50
ABBILDUNG 27: KONTAKTSEITE ............................................................................... 51
ABBILDUNG 28: KONTAKTSEITE ............................................................................... 51
ABBILDUNG 29: ER - DIAGRAMM ............................................................................. 52
ABBILDUNG 30: ERSTELLUNG DER DATENBANK ............................................................. 53
ABBILDUNG 31: ERSTELLUNG DER TABELLEN ................................................................ 53
ABBILDUNG 32: ERSTELLTE FELDER IN DER TABELLE....................................................... 54
ABBILDUNG 33: CSV.DATEI IMPORTIEREN ................................................................... 54
ABBILDUNG 34: DATESÄTZE IMPORTIERT .................................................................... 54