Buschenschank Gruber

[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


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


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


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


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



Auftraggeber: Otmar Gruber

Projektleiterin: Gruber Tina

Projektmitarbeiterin:

Mädl Martina

3.2 Projektorganisation

Tina Gruber


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



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


3.5 Arbeitspakete

Arbeitspakete

1

Projektmanagement

4 Seiten

2 Corporate

Design

5 Dynamische

Seiten 3 Template

bearbeiten

6

Projektabschluss

Tina Gruber


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


1.3. Projektcontrolling Projektdefinition

Inhalt Einzelne Aufgaben müssen zum

geplanten Zeitpunkt erledigt sein

Nicht-Inhalt Unkoordiniertes Zeitmanagement

Ergebnis Gutes Projektcontrolling


Laptop

1.4. Projektabschluss Projektdefinition

Inhalt Zeitgerechte Projektabgabe

Nicht-Inhalt Der Abgabetermin wurde nicht

eingehalten

Ergebnis Erfolgreiche Präsentation


Laptop, Internet

2.1. Schriftarten Projektdefinition

Inhalt Webtaugliche Schriftarten

Tina Gruber


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


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


Laptop, Internet

Tina Gruber


2.3. Logo Projektdefinition

Inhalt Passendes Logo zum Thema

Evtl. nicht so einfach

Nicht-Inhalt Fades Logo

unpassend

Ergebnis Passendes Logo gefunden



2.4. Layout Projektdefinition

Inhalt Template an das Projektthema

anpassen

Nicht-Inhalt Unübersichtliches Layout

Ergebnis Übersichtliches Layout


Laptop, Internet

2.5. fertigstellen Projektdefinition

Tina Gruber


Inhalt Letzten Feinschliff

Nicht-Inhalt

Keine passenden Farben

Keine webtauglichen

Schriftarten

Kein harmonisches Logo

Ein unübersichtliches Layout

Ergebnis Ziel wurde erreicht



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




Tina Gruber


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


Laptop, Internet

1 www.freewebtemplates.com

www.freewebsitetemplates.com

www.freecss.com

2 http://www.free-css-templates.com

http://www.freewebtemplates.com/

http://www.freewebsitetemplates.com/

http://www.freecss.com/

http://www.free-css-templates.com/

Tina Gruber


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


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


Laptop, Internet, Gimp, Phase5

Tina Gruber


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


Laptop, Internet, Phase5

4.3. Speisekarte Projektdefinition

Inhalt Übersichtliche Speisekarte über

issuu ausgeben

Nicht-Inhalt Keine funktionierende flash-

Speisekarte

Ergebnis Strukturierte Online-Speisekarte


Laptop, Internet, Phase5, Issuu

4.4. Galerie Projektdefinition

Tina Gruber


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



4.5. Anfahrt Projektdefinition

Inhalt Einen gut erklärten und

definierbaren Anfahrtsplan

Nicht-Inhalt Kein genauer Anfahrtsplan

Ergebnis Klare Darstellung des Anfahrtsplan

Tina Gruber




4.6. Kontakt Projektdefinition

Inhalt Gut übersichtliche

Kontaktinformation

Nicht-Inhalt Keine Kontaktinformation

Ergebnis Ziel einer optimalen strukturierten

Kontaktseite



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


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




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


Laptop, Internet, xampp, Excel,


Tina Gruber


6.1. Fehlerbehebung Projektdefinition

Inhalt

Einzelheiten ausbessern bzw.

verbessern

Evtl. Fehler beheben

Nicht-Inhalt Homepage mit Fehlern

Ergebnis Homepage ohne Fehler

Ressourcen


Laptop, Internet, xampp, Excel,


6.2. Projektdokumentation Projektdefinition

Inhalt Gut gegliederte Themenstellung

Nicht-Inhalt Keine Projektdokumentation

Ergebnis Fertige Themenstellung mit gutem

Inhalt


Laptop, Internet, Word

6.3. Website veröffentlichen Projektdefinition

Tina Gruber


Inhalt

die fertiggestellte Webseite, im

Internet mit geeignetem Webspace

veröffentlichen

Nicht-Inhalt Keine Veröffentlichung der

Homepage

Ergebnis Homepage online stellen

Ressourcen



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


Laptop, Internet, xampp

Tina Gruber


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

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

Tina Gruber


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


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


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

http://de.wikipedia.org/wiki/HTML-Editor_Phase_5

Tina Gruber


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

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

Tina Gruber


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

http://www.issuu.com/

Tina Gruber


Tina Gruber


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


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

http://www.webtemplates.com/

Tina Gruber


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

http://www.freelayouts.com/

http://www./

http://www.krug.at/zechhaus/bestellung0.asp

http://www.sasbacher.de/

http://www.beisteiners-wine.at/deutsch/bestellung.php

http://www.leginthov.at/deutsch/bestellung.php?bestellland=at

http://www.hundsdorfer.at/deutsch/bestellung.php

http://www.weingut-kerschbaum.at/htm/weinshop/bestellung.php

http://www.weingut-kerschbaum.at/htm/weinshop/bestellung.php

http://www.weingut-ploechl.at/bestellung/bestellung1.php

Tina Gruber


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


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


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


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


7 Corporate Design

7.1 Template / Index.hmtl

im Originalzustand

Abbildung 7: Original-Template

nachher

Abbildung 8: endgültiges Template

Tina Gruber


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


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


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


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


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


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


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


Tina Gruber



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


Tina Gruber



Und so sieht die fertige Speisekarte auf unsere Homepage aus

Abbildung 20: fertige Speisekarte

Tina Gruber


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


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


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


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


8.5 kontakt.html

Abbildung 27: Kontaktseite

Abbildung 28: Kontaktseite

Tina Gruber


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


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


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


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


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


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


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

Documents

Buschenschank Gruber