Fachspezifische Themenstellung ICS

Tam

ara

Weh

sner

Van

ess

a W

agn

er

Fac

hsp

ezi

fisc

he T

hem

en

stellu

ng

Seite 2 von 40

Inhaltsverzeichnis

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

2 PROJEKTROLLEN ............................................................................... 5

2.1 Projektauftraggeber ..................................................................... 5

2.2 Projektteam ................................................................................. 5

3 VORWORT ......................................................................................... 6

4 ABSTRACT ........................................................................................ 7

5 PROJEKTMANAGEMENT ...................................................................... 8

5.1 Projektdefinition ........................................................................... 8

5.2 Projektplanung ........................................................................... 10

6 PROJEKTSTRUKTURPLAN .................................................................. 11

6.1 Meilensteine (MS) ...................................................................... 12

6.2 Arbeitspakete (AP)..................................................................... 12

7 CORPORATE DESIGN ....................................................................... 20

7.1 Logo: .......................................................................................... 20

7.2 Verwendete Schriftfarben: ......................................................... 20

7.3 Verwendete Schriften und Schriftgröße: .................................... 20

8 GRUNDLAGEN.................................................................................. 21

8.1 HTML ......................................................................................... 21

8.2 PHP ........................................................................................... 22

8.3 CSS ........................................................................................... 24

8.4 Java Script ................................................................................. 25

8.5 Photoscape ................................................................................ 26

9 AUFBAU DER HOMEPAGE .................................................................. 27

9.1 Login .......................................................................................... 28

9.2 Event Bearbeiten ....................................................................... 28

9.3 Event Löschen ........................................................................... 29

9.4 Event anlegen ............................................................................ 30

9.5 Seite „Home“ ............................................................................. 31

9.6 Seite „Dein Pferd bei uns“ .......................................................... 32

Seite 3 von 40

9.7 Seite „Dein Esel bei uns“ ........................................................... 33

9.8 Seite „Landwirtschaft“ ................................................................ 34

9.9 Seite „Pflege“ ............................................................................. 35

9.10 Seite „Galerie“ ........................................................................ 36

9.11 Seite „Kontakt“ ....................................................................... 37

9.12 Logout .................................................................................... 38

10 PROJEKTABSCHLUSS ....................................................................... 39

10.1 Produktabnahme .................................................................... 39

10.2 Projektabschlussanalyse ........................................................ 39

10.3 Projektauflösung .................................................................... 39

11 LITERATURVERZEICHNIS ................................................................... 40

Seite 4 von 40

1 Abbildungsverzeichnis

Bild 2: PSP ............................................................................................... 11

Bild 3: Gut St. Logo .................................................................................. 20

Bild 4: HTML ............................................................................................ 21

Bild 5 :PHP............................................................................................... 22

Bild 6: PHP2............................................................................................. 22

Bild 7: CSS Box ....................................................................................... 24

Bild 8: Java Script .................................................................................... 25

Bild 9: Photoscape ................................................................................... 26

Bild 10: Photoscape Menü ....................................................................... 26

Bild 11: Login ........................................................................................... 27

Bild 12: Seite Login .................................................................................. 27

Bild 13: Event bearbeitet .......................................................................... 28

Bild 14: Event bearbeiten ......................................................................... 28

Bild 15: Datensatz löschen ...................................................................... 29

Bild 16: Datensatz gelöscht ..................................................................... 29

Bild 17:Event anlegen .............................................................................. 30

Bild 18: Neues Event ............................................................................... 30

Bild 19: Seite Home ................................................................................. 31

Bild 20: Seite Pferd .................................................................................. 32

Bild 21: Seite Esel .................................................................................... 33

Bild 22: Seite Landwirtschaft .................................................................... 34

Bild 23: Seite Pflege ................................................................................. 35

Bild 24: Seite Galerie ............................................................................... 36

Bild 25: Seite Kontakt ............................................................................... 37

Bild 26: Logout ......................................................................................... 38

Seite 5 von 40

2 Projektrollen

2.1 Projektauftraggeber

Frau Ulrike Wagner: Eigentümerin des Guts St. Johann

2.2 Projektteam

Projektleiterin: Vanessa Wagner

Projektmitarbeiterin: Tamara Wehsner

Seite 6 von 40

3 Vorwort

Aufgrund unserer Kenntnisse in Information und Communication Solutions

haben wir uns dazu entschieden eine Website über den Pferdehof „Gut St.

Johann“ zu erstellen. Mit Hilfe von verschiedenen Hilfsmitteln und unseres

Wissens wurde dies umgesetzt.

Auf unserer Seite soll man möglichst viele Informationen über den Hof be-

kommen, ohne dass die Seite unübersichtlich wirkt.

Vom Design soll die Website naturfreundlich gestaltet sein und den Wün-

schen des Auftraggebers entsprechen. Gleichzeitig werden von uns neue

Ideen eingebaut damit die Seite perfekt angepasst wird.

Das Ergebnis soll der Auftraggeberin entsprechen und sie soll davon

überzeugt sein, dass die Website ein Erfolg wird.

Seite 7 von 40

4 Abstract

Because of our knowledge in Information Communication Solutions we

generated to use our knowledge and many other resources to create a

website about the riding stable “Gut St. Johann”.

You should become much information about the riding stable, without be-

ing overcrowded.

Our target is to create a naturally and friendly design for our homepage

and our ideas should be influenced in the website.

The end result should be perfect for the applicant.

Seite 8 von 40

5 Projektmanagement

Projektmanagement ist wichtig für die Erstellung einer Website, da es fol-

gende Themen beinhaltet:

Projektstart

Projektkoordination

Projektcontrolling

Projektmarketing und

Projektabschluss

Die vier wichtigsten Punkte sind:

Projektdefinition

Projektplanung

Projektabwicklung

Projektabschluss

5.1 Projektdefinition

Wichtig ist eine Definition der jeweiligen Aufgabe. Eine Aufgabe muss

sachlich, zeitlich und sozial abgegrenzt sein.

5.1.1 IST-Situation

Frau Wagner suchte nach einer Website für ihren Hof. Das war eine gute

Gelegenheit für unser Projekt. Es gab bis jetzt noch keine Homepage.

5.1.2 Sachliche Abgrenzung

Ziele:

Informationen über Betrieb wiedergeben

Galerie mit Slideshow, die Bilder über den Hof beinhaltet

Positive Wirkung erzeugen

Dynamische Website erstellen

Seite 9 von 40

Template anpassen

Informationen über kommende Events wiedergeben

Informationen über Einstellmöglichkeiten bereitstellen

Nicht-Ziele:

Nichtfunktionierende Website erstellen

Kein passendes Template finden

Zu viel Text anzeigen

Auftraggeberin ist unzufrieden

5.1.3 Zeitliche Abgrenzung

Projektstart: 08.09.2011

Projektende: 29.03.2012

5.1.4 Soziale Abgrenzung

Auftraggeberin: Ulrike Wagner

Projektleiterin: Vanessa Wagner

Projektteammitglied: Tamara Wehsner

Seite 10 von 40

5.2 Projektplanung

Die Projektplanung ist die zweite Phase der Projekthauptphasen. Ohne

diese Phase kann man ein Projekt nicht durchführen und es auch nicht

beenden.

5.2.1 Arbeitsprotokoll

Datum Arbeitsschritt

8.9.2011 Projektstart, Powerpoint erstellt

22.9.2011 Passendes Template gesucht, Logo

ausgewählt, Entscheidung für Phase 5

6.10.2011 Bilder bearbeiten

6.10.2011 Text für Seiten erarbeitet und eingefügt

13.10.2011 Template angepasst, Metatags gene-

riert

10.11.2011 Seite „Home“ erstellt

17.11.2011 Seite „Dein Pferd bei uns“ erstellt

24.11.2011 Seite „Dein Esel bei uns“ erstellt

1.12.2011 Seite „Landwirtschaft“ erstellt

8.12.2011 Seite „Pflege“ erstellt

15.12.2011 Seite “Galerie“ erstellt

22.12.2011 Seite “Kontakt“ erstellt

5.1.2012 Seiten überarbeitet

12.1.2012 Fachspezifische Themenstellung

6 Projektstrukturplan

Bild 1: PSP

6.1 Meilensteine (MS)

Meilensteine sind Zwischenziele und sie sind sehr wichtig für die Planung,

da man mit ihnen das Projekt in mehrere kleine Etappen einteilt.

6.1.1 Meilenstein 1: Konzept erstellt und mit Auftraggeberin bespro-chen

6.1.2 Meilenstein 2: Website entwerfen

6.1.3 Meilenstein 3: Corporate Design

6.1.4 Meilenstein 4: Seiten erstellen

6.1.5 Meilenstein 5: Website überarbeiten

6.1.6 Meilenstein 6: Website veröffentlichen

6.2 Arbeitspakete (AP)

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

Ziel haben. Es muss festgehalten werden, wer für die Einhaltung der Ter-

mine verantwortlich ist.

Arbeitspaket :1.1. Konzept erstellen

Zuständige: Tamara Wehsner

Ziele: Ideen und Vorschläge ausarbeiten, Farben auswählen, Corporate Design erstellen

Nichtziele: keine Ideen finden

Start: 08.09.2011

Ende: 15.09.2011

Benötigte Ressourcen: Internet, Laptop

Seite 13 von 40

Arbeitspaket : 1.2. Ideen mit Verantwortlichen besprechen

Zuständige: Vanessa Wagner

Ziele: Ideen und Vorschläge mit Verantwortlichen besprechen, klare Vor-stellung der Homepage

Nichtziele: keine Übereinstimmung, keine Ideen

Start: 15.09.2011

Ende: 22.09.2011

Benötigte Ressourcen: Laptop, mit Dokument über Ideen wie die Ho-mepage aussehen soll

Arbeitspaket : 1.3. Koordination


Ziele: Ideen und Vorschläge mit Verantwortlichen umändern, auf die Vor-stellungen des Auftraggebers eingehen

Nichtziele: keine Übereinstimmung

Start: 22.09.2011

Ende: 29.09.2011

Benötigte Ressourcen: Laptop mit fertigen Konzept

Arbeitspaket : 2.1. Template suchen


Ziele: Template für Homepage finden

Nichtziele: kein passendes Template

Start: 22.09..2011

Ende: 29.09.2011

Benötigte Ressourcen: Laptop, Internet

Seite 14 von 40

Arbeitspaket : 2.2. Texte erstellen


Ziele: Texte schreiben für einzelne Menüpunkte

Nichtziele: keine Texte finden

Start: 06.10..2011

Ende: 27.10.2011

Benötigte Ressourcen: Laptop, Word

Arbeitspaket : 2.3. Bilder finden


Ziele: passende Bilder auswählen

Nichtziele: keine Bilder

Start: 06.10.2011

Ende: 13.10.2011

Benötigte Ressourcen: Laptop, Bilder

Arbeitspaket : 2.4. Bilder bearbeiten


Ziele: Bilder bearbeiten, richtige Größe finden, anpassen an die Home-page

Nichtziele: unscharfe, nicht passende Bilder

Start: 06.10.2011

Ende: 13.10.2011

Benötigte Ressourcen: Bilder, Laptop

Seite 15 von 40

Arbeitspaket : 3.1. Template bearbeiten


Ziele: Template anpassen, passendes Hauptmenü finden

Nichtziele: kein passendes Template finden

Start: 13.10.2011

Ende: 03.11.2011


Arbeitspaket : 3.2. Design


Ziele: Template und Bilder an das Corporate Design anpassen

Nichtziele: nicht passendes Template, langweiliges Design

Start: 03.11.2011

Ende: 10.11.2011

Benötigte Ressourcen: Laptop, Internet

Arbeitspaket: 4.1. Seite „Home“


Ziele: Kurze Beschreibung mit Bild, Kommende Events

Nichtziele: zu viel Text

Start: 10.11.2011

Ende: 17.11.2011

Benötigte Ressourcen: Internet, Bilder

Seite 16 von 40

Arbeitspaket: 4.2. Seite „Dein Pferd bei uns“


Ziele: Informationen über Einstellmöglichkeiten, Übersicht der Preise

Nichtziele: funktioniert nicht

Start: 17.11.2011

Ende: 24.11.2011


Arbeitspaket: 4.3. Seite „Dein Esel bei uns“


Ziele: Informationen über Esel, Übersicht der Preise


Start: 24.11.2011

Ende: 01.12.2011


Arbeitspaket: 4.4. Seite „Landwirtschaft“


Ziele: Information zum Thema


Start: 01.12.2011

Ende: 08.12.2011


Seite 17 von 40

Arbeitspaket: 4.5. Seite „Pflege“


Ziele: Kurze Beschreibung mit Bild


Start: 08.12.2011

Ende: 15.12.2011


Arbeitspaket: 4.6. Seite „Galerie“


Ziele: Slideshow mit Fotos

Nichtziele: unbearbeitete Fotos

Start: 15.12.2011

Ende: 22.12.2011


Arbeitspaket: 4.7. Seite „Kontakt“


Ziele: Kontaktformular

Nichtziele: funktioniert nicht

Start: 22.12.2011

Ende: 29.12.2011


Seite 18 von 40

Arbeitspaket: 4.8. Website testen


Ziele: Website funktioniert, Website ist nach Vorstellungen der Auftrag-geberin

Nichtziele: nicht funktionierende Website, Nichtzufriedenheit der Auftrag-geberin

Start: 29.12.2011

Ende: 05.01.2012


Arbeitspaket : 5.1. Website präsentieren


Ziele: Website dem Verantwortlichen vorführen

Nichtziele: Unzufriedenheit

Start: 05.01.2012

Ende: 12.01.2012


Arbeitspaket : 5.2. Website überarbeiten


Ziele: Website überarbeiten, Änderungen vornehmen

Nichtziele: keine passende Änderung finden

Start: 12.01.2012

Ende: 19.01.2012


Seite 19 von 40

Arbeitspaket : 5.3. Website fertigstellen


Ziele: Website fertigstellen, alles funktioniert

Nichtziele: nicht funktionierende Homepage wurde erstellt

Start: 19.01.2012

Ende: 26.01.2012


Arbeitspaket : 6.1.Website veröffentlichen


Ziele: Website veröffentlichen

Nichtziele: nicht funktionierende Website wurde erstellt

Start: 02.02.2012

Ende: 29.03.2012


Seite 20 von 40

7 Corporate Design

7.1 Logo:

Bild 2: Gut St. Logo

7.2 Verwendete Schriftfarben:

#76923C R:118 G:146 B:60

#000000 R:0 G:0 B:0

#FFFFFF R:255 G:255 B:255

7.3 Verwendete Schriften und Schriftgröße:

Schriftart im Logo: Gut St. Johann Algerian, 42 pt

Fließender Text: Trebuchet MS, 12 pt

Seite 21 von 40

8 Grundlagen

8.1 HTML

Was ist HTML?

Der HTML-Editor Phase 5 ist ein seit 1996 ständig weiterentwickeltes

Freeware-Tool zum Erstellen und Bearbeiten von HTML-Dateien. Er ver-

waltet komplette Websites als Projekt, merkt sich Vorgaben, bietet eine

Browservorschau, einen Bildbetrachter und beherrscht enorm viele HTML-

Tags, die auf Knopfdruck eingefügt werden. Unterstützt wird nicht nur

HTML, sondern auch Java, Tabellen, Listen, Cascading Style Sheets,

VBScript und Formulare. Durch Syntaxhighlighting wird die Darstellung

der Quelltexte verschiedener Sprachen (html,sql,perl...) erheblich verbes-

sert. Weitere Funktionen sind das dateiübergreifende Suchen / Ersetzen,

Includes werden unterstützt, eine integrierte Rechtschreibprüfung, Syntax-

Schemes-Editor, das Setzen von Lesezeichen und vieles mehr. 1

Aufbau einer HTML-Seite:

<html>

<head>

<title>Titel</title>

</head>

<body>

</body>

</html>

1 o.V.: http://www.schulhomepage.de/software/phase_5.php

Bild 3: HTML

Seite 22 von 40

8.2 PHP

Funktionsweise

PHP ist ein System, das PHP-Code serverseitig verarbeitet. Das bedeutet,

dass der Quelltext nicht an den Webbrowser übermittelt wird, sondern an

einen Interpreter auf dem Webserver. Erst die Ausgabe des PHP-

Interpreters wird an den Browser geschickt. In den meisten Fällen ist das

ein HTML-Dokument, wobei es mit PHP aber auch möglich ist, andere

Dateitypen, wie Bilder oder PDF-Dateien, zu generieren.

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

nen, benötigt man ein System, das mit den in der Datei enthaltenen An-

weisungen umgehen kann.

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

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

durch den Interpreter, zudem arbeitet der Interpreter den Quelltext bei je-

dem Aufruf erneut ab. Das mindert die Reaktionsgeschwindigkeit des Ser-

vers und erhöht die Last. Um dem entgegenzuwirken, stehen verschiede-

ne Bytecode-Caches zur Verfügung, die eine zur Ausführung vorbereitete

Version des Programmes zwischenspeichern und somit den Zugriff auf

diese Datei beim nächsten Aufruf beschleunigen.

Mit PHP lassen sich auch kommandozeilenorientierte Skripte schreiben,

die vom Internet unabhängig sind.2

2 o.V.: http://de.wikipedia.org/wiki/PHP

Bild 4 :PHP

Bild 5: PHP2

Seite 23 von 40

Ein Code Beispiel:

Einfaches PHP-Skript (gibt „Guten Morgen!“ aus):

<?php

echo "Guten Morgen!";

?>

Das Skript in HTML integriert (gibt ebenfalls „Guten Morgen!“ auf der

Webseite aus):

<!DOCTYPE HTML>

<html>

<head>

<title> Guten-Morgen-Beispiel </title>

</head>

<body>

<?php

echo " Guten Morgen! ";

?>

</body>

</html>

Der PHP-Interpreter interpretiert den Code zwischen <?php und ?>, der

übrige Code (üblicherweise HTML) wird unverändert an den Client zu-

rückgegeben.

Seite 24 von 40

8.3 CSS

Was sind Style Sheets?

CSS oder Cascading Style Sheets ist eine Sprache zum Formatieren von

HTML/XHTML-Elementen. Verglichen mit den HTML-Formatierungen bie-

tet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rah-

men, Innen- und Aussenabstände, Listen, Hintergründe, Positionieren, ....

Ein wichtiger Punkt ist die Möglichkeit, Formate zentral festzulegen, d.h.

entweder im <head>-Bereich eines Dokuments oder ausgelagert in einer

separaten, ausgelagerten Datei. Dies hat den Vorteil, dass man Formate

nur einmal festlegen musst und diese für das gesamte Dokument, bzw.

das gesamte Projekt gültig sind. Damit erreichst du ein über alle Seiten

einheitliches Erscheinungsbild, was für einen gelungenen Webauftritt be-

sonders wichtig ist. Natürlich lassen sich einzelne Tags auch direkt forma-

tieren. 3

Beispiel

p.note { position: relative;

left: 15%;

width: 80%;

padding: 30px;

padding-bottom: 45px;

border: 1px solid black;

line-height: 1.5em;

color: black;

font-weight: bold;

text-align: justify;

background-color: #eeeeee;

}

3 o.V.: http://www.css4you.de/wscss/css01.html

Bild 6: CSS Box

Seite 25 von 40

8.4 Java Script

- ist eine von Netscape entwickelte Script-

Sprache, die sich in HTML-Dokumente ein-

binden lässt. Die Sprache hat nur am Rande

etwas mit der Programmiersprache Java zu

tun.

Java und Javascript sind also nicht das

gleiche.

Javascript ist eine clientseitige Script-Sprache, d.h. das Script ist im

Quellcode des Webdokuments eingebettet und wird erst vom Browser in-

terpretiert und ausgeführt (wohingegen Java auf Javaservern läuft und in

der Regel (jedoch nicht ausschließlich) serverseitig interpretiert wird). Ja-

vascript erlaubt zahlreiche dynamische Funktionen. Daher wird Javascript

gerne für Spam-Hilfe eingesetzt, wie z.B. für automatische Weiterleitun-

gen. 4

4 o.V.: http://www.sumo.de/definition-javascript.html

Bild 7: Java Script

Seite 26 von 40

8.5 Photoscape

Photoscape ist eine sehr gute Editor-Software, schnell, größerer Funkti-

onsumfang, ideal für ebay-Fotos, dezente Skins, usw.

Beim Intro erhält man gleich einen Überblick über die einzelnen Funktio-

nen. Im aufgeräumten Editor wird objektorientiert gearbeitet, es können

sehr einfach Symbole, Sprechblasen, Rechtecke, etc. eingefügt werden.

Weiterhin können sie gedreht und beliebig skaliert werden. Bei allen Ände-

rungen bleiben die Originale unverändert und werden im neuen Unterord-

ner Originale gespeichert. Ein Highlight von Photoscape ist das einfache

Kombinieren von mehreren Fotos z.B. für eBay (horizontal, vertikal oder

checker). Auch können mehrere Fotos zu Seiten(unterschiedliche Lay-

outs) kombiniert werden. Arbeitstechnisch sehr einfach durch drag & drop.

Vielfältige Rahmenoptionen. Auch ist ein Renamer und RAW-Konverter

integriert. Elementare GIF-Änderungen möglich. 5

5 o.V.: http://download.chip.eu/de/photoscape_658284.html

Bild 9: Photoscape Menü

Bild 8: Photoscape

Seite 27 von 40

9 Aufbau der Homepage

Bild 11: Seite Login

Bild 10: Login

Seite 28 von 40

9.1 Login

9.2 Event Bearbeiten

Bild 13: Event bearbeiten

Bild 12: Event bearbeitet

Seite 29 von 40

9.3 Event Löschen

Bild 14: Datensatz löschen

Bild 15: Datensatz gelöscht

Seite 30 von 40

9.4 Event anlegen

Bild 16:Event anlegen

Bild 17: Neues Event

Seite 31 von 40

9.5 Seite „Home“

Bild 18: Seite Home

Seite 32 von 40

9.6 Seite „Dein Pferd bei uns“

Bild 19: Seite Pferd

Seite 33 von 40

Bild 20: Seite Esel

9.7 Seite „Dein Esel bei uns“

Seite 34 von 40

9.8 Seite „Landwirtschaft“

Bild 21: Seite Landwirtschaft

Seite 35 von 40

Bild 22: Seite Pflege

9.9 Seite „Pflege“

Seite 36 von 40

9.10 Seite „Galerie“

Bild 23: Seite Galerie

Seite 37 von 40

9.11 Seite „Kontakt“

Bild 24: Seite Kontakt

Seite 38 von 40

9.12 Logout

Bild 25: Logout

Seite 39 von 40

10 Projektabschluss

Der Projektabschluss ist unsere letzte Etappe. Es beinhaltet Projektab-

nahme, Projektabschlussanalyse und Projektauflösung.

10.1 Produktabnahme

Die Produktabnahme bedeutet die Übergabe der fertigen Website an die

Auftraggeberin.

10.2 Projektabschlussanalyse

Die Projektabschlussanalyse beinhaltet eine Nachkalkulation hinsichtlich

Kosten, Termine und Qualität.

10.3 Projektauflösung

Zu jedem Projekt gehört die Projektauflösung. Ein Projekt muss sowohl

einen klaren Anfang, als auch ein klares Ende haben.

Seite 40 von 40

11 Literaturverzeichnis

CHIP - Photoscape.Von CHIP:

http://download.chip.eu/de/photoscape_658284.html abgerufen

CSS 4 YOU - CSS. Von CSS 4 YOU:

http://www.css4you.de/wscss/css01.html abgerufen

Schulhomepage - Phase 5. Von Schulhomepage:

http://www.schulhomepage.de/software/phase_5.php abgerufen

SUMO - Definiton Javascript. Von SUMO: http://www.sumo.de/definition-

javascript.html abgerufen

Wikipedia - PHP. Von Wikipedia: http://de.wikipedia.org/wiki/PHP

abgerufen

Documents

Fachspezifische Themenstellung ICS