Issuu on Google+

Lena Sebauer und Daniela Novak 27. März 2012

Der See – Zeitschrift für das Land zum Leben

Fachspezifische Themenstellung 2011/12 Information and Communication Solutions


Inhaltsverzeichnis 1.

Abbildungsverzeichnis__________________________________ 4

2.

Vorwort ______________________________________________ 5

3.

Preface _______________________________________________ 6

4.

Projektmanagement ____________________________________ 7 4.1.

Was ist ein Projekt? _____________________________________ 7

4.2.

Projektstrukturplan _____________________________________ 8

4.3.

Arbeitspakete __________________________________________ 9

4.3.1.

Meilenstein 1: Konzept erstellen und mit Auftragsgeberin sprechen _____ 10

4.3.2.

Meilenstein 2: Unterlagen sammeln ______________________________ 10

4.3.3.

Meilenstein 3: Corporate Design erstellen _________________________ 12

4.3.4.

Meilenstein 5: Entwurf der Website erstellen _______________________ 12

4.3.5.

Meilenstein 6: Websites fertigstellen und testen ____________________ 13

4.3.6.

Meilenstein 7: Backend erstellen ________________________________ 15

5.

Corporate Design _____________________________________ 16

6.

Grundlagen __________________________________________ 18 6.1.

Xampp _______________________________________________ 18

6.2.

HTML-Editor __________________________________________ 19

6.3.

PHP _________________________________________________ 20

6.4.

CSS _________________________________________________ 21

6.5.

JavaScript ____________________________________________ 22

6.5.1.

7.

Was ist JavaScript? __________________________________________ 22

6.6.

Gimp ________________________________________________ 23

6.7.

Windows Movie Maker __________________________________ 25

Unsere Homepage ____________________________________ 26 7.1.

Ideen sammeln ________________________________________ 26

7.2.

Template _____________________________________________ 26

7.3.

Men端 ________________________________________________ 27

Daniela Novak, Lena Sebauer

2


7.4.

8.

Die Seiten ____________________________________________ 28

7.4.1.

Der See (Startseite) __________________________________________ 28

7.4.2.

Aktuelles ___________________________________________________ 29

7.4.3.

Anmelden __________________________________________________ 31

7.4.4.

Check _____________________________________________________ 32

7.4.5.

Weinkeller hinzufĂźgen: ________________________________________ 34

7.4.6.

Weinkeller bearbeiten: ________________________________________ 35

7.4.7.

Weinkeller lĂśschen: __________________________________________ 36

7.4.8.

Abmelden __________________________________________________ 37

7.4.9.

Abo _______________________________________________________ 38

7.4.10.

Der See Shop_____________________________________________ 39

7.4.11.

Kontakt __________________________________________________ 40

Slideshow ___________________________________________ 41 8.1.

Produkte _____________________________________________ 41

8.2.

Aktuelles _____________________________________________ 43

9.

Video _______________________________________________ 45

10.

Nachwort __________________________________________ 48

11.

Literaturverzeichnis _________________________________ 49

Daniela Novak, Lena Sebauer

3


1. Abbildungsverzeichnis Abbildung 1: Logo _______________________________________________________________ 5 Abbildung 2: Projektmanagement ___________________________________________________ 7 Abbildung 3: Corporate Design ____________________________________________________ 16 Abbildung 4: Der See – Design____________________________________________________ 17 Abbildung 5: Control Panel _______________________________________________________ 18 Abbildung 6: Html-Code _________________________________________________________ 19 Abbildung 7: Css - Stylesheet _____________________________________________________ 21 Abbildung 8: Gimp - Werkzeuge ___________________________________________________ 23 Abbildung 9: Anwendung von Gimp ________________________________________________ 24 Abbildung 10: Unsere Homepage __________________________________________________ 26 Abbildung 11: Menü ____________________________________________________________ 27 Abbildung 12: Startseite _________________________________________________________ 28 Abbildung 13: Aktuelles _________________________________________________________ 29 Abbildung 14: Anmelden_________________________________________________________ 31 Abbildung 15: Kennwort falsch ____________________________________________________ 31 Abbildung 16: login.php _________________________________________________________ 32 Abbildung 17: check.php ________________________________________________________ 32 Abbildung 18: Backend __________________________________________________________ 33 Abbildung 19: einfuegen.php _____________________________________________________ 34 Abbildung 20: einfuegen_db.php __________________________________________________ 34 Abbildung 21: bearbeiten.php _____________________________________________________ 35 Abbildung 22: bearbeiten_db.php __________________________________________________ 35 Abbildung 23: loeschen_db.php ___________________________________________________ 36 Abbildung 24: Datensatz gelöscht _________________________________________________ 36 Abbildung 25: logout.php ________________________________________________________ 37 Abbildung 26: Abo _____________________________________________________________ 38 Abbildung 27: Der See Shop _____________________________________________________ 39 Abbildung 28: Kontakt___________________________________________________________ 40 Abbildung 29: Produkte Slider ____________________________________________________ 41 Abbildung 30: javascript.inc ______________________________________________________ 42 Abbildung 31: Aktuelles Slider ____________________________________________________ 43 Abbildung 32: aktuelles.inc _______________________________________________________ 44 Abbildung 33: Windows Movie Maker _______________________________________________ 45 Abbildung 34: Effekte ___________________________________________________________ 46 Abbildung 35: der see.avi ________________________________________________________ 47

Daniela Novak, Lena Sebauer

4


2. Vorwort Im

Rahmen

unseres

Ausbildungsschwerpunktes

„Information

and

Communication Solutions“ erhielten wir den Auftrag eine Homepage für die Diplom und Reifeprüfung im Pannoneum Neusiedl am See zu erstellen. Die Aufgabe war unser bereits erworbenes Wissen der letzen 3 Jahre in die Praxis umzusetzen. Für unser Projekt entschieden wir die bereits vorhandene Homepage „Der See“ zu ersetzen und sie mit dem Geschäft „Der See Shop“ zu verbinden. Unser

Ziel

war

eine

übersichtliche,

moderne,

kundenfreundliche,

informative und dynamische Website mittels php/MySQL zu entwerfen. Auf den nächsten Seiten finden Sie genauere Informationen dazu.

Auftraggeber  Vera Sebauer Projektleiter Lena Sebauer und Daniela Novak

Abbildung 1: Logo

Daniela Novak, Lena Sebauer

5


3. Preface Concerning our final exam in the subject Information and Communication Solutions we had to create an innovative homepage. We decided to replace the existing homepage “Der See” and to combine it with “Der See Shop”. Our aim was to create a useful, customer-friendly, fashionably, informative and dynamic website with php/MySQL. On the following pages you have the possibility to find out some facts about our homepage.

Client:  Vera Sebauer

Project leader: Lena Sebauer and Daniela Novak

Daniela Novak, Lena Sebauer

6


4. Projektmanagement

4.1.

Was ist ein Projekt?

Ein Projekt ist ein einmaliges, zeitlich befristetes Vorhaben mit einem spezifischen Ziel. Dabei wirken Faktoren wie sachliche, zeitliche, finanzielle und personelle Begrenzungen mit. Eine projektorientierte Organisationsform und die Komplexität der Zusammenhänge sind weitere Merkmale eines Projekts.

Jedes Projekt ist in Projektphasen gegliedert und umfaßt einzelne Teile: 

Planung

Organisation

Durchführung

Steuerung

Kontrolle

Dokumentation

Organisation

Durchführung

Planung

Dokumentation

Steuerung

Kontrolle

Abbildung 2: Projektmanagement

Daniela Novak, Lena Sebauer

7


4.2.

Projektstrukturplan Homepage Der See

1

2

3

4

5

6

Projektplanung

Daten sammeln

Tamplate

Websites

Inhalte

Projektabschluss

suchen

erstellen

anpassen

1.1

2.1

3.1

4.1

5.1

6.1

Projektstart

Fotos machen

Template

Der See

Text

Projekt

einfügen

veröffentlichen

besprechen

1.2

2.2

3.2 Template

4.2

5.2

6.2

Projektaufzeichnen

Text suchen

suchen

Aktuelles

Fotos

Projekt präsentieren

hinzufügen 1.3

2.3

3.3

Projektkontrolle

Fotos bearbeiten

4.3 Abo

5.3

6.4

Corporate

Backend

Mw. nachbearbeiten

Design

erstellen

1.4

4.4

Der

Projektabschluss

See Shop

6.5 Website Übergabe

4.6 Kontakt

Daniela Novak, Lena Sebauer

8


4.3.

Arbeitspakete

Ein Arbeitspaket beschreibt eine geschlossene Aufgabenstellung oder Terminplanvorgänge innerhalb eines Projektes. Das einzelne Paket soll solide, stabil und klar definiert sein, damit das Projekt zusammenhält. Es wird von einem Teammitglied oder einer Gruppe des Projektteams erledigt. Zeitaufwand, Ergebnis und Kosten sind vom Projektmanagement definiert. Der Vorteil von Arbeitspaketen, dass sie effizientes Projekt-Controlling ermöglichen. Die Detailliertheit von Arbeitspaketen ist abhängig vom Umfang und Komplexität des Gesamtprojektes. Mit der Zerlegung von Arbeitsschritten in überschaubare Abschnitte ist es möglich, die Arbeit besser zu planen und zu steuern. Das Projektmanagement dokumentiert die Arbeitspakete im Projektstrukturplanverzeichnis. Die Einzelheiten zu den Arbeitspaketen werden separat für die jeweils verantwortlichen MitarbeiterInnen festgehalten.

Daniela Novak, Lena Sebauer

9


4.3.1. Meilenstein 1: Konzept erstellen und mit Auftragsgeberin sprechen Arbeitspaket: Konzept erstellen

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Corporate Design finden. Mind Map mit Ideen erstellen.

nicht Ziele:

keine passenden Ideen finden

Start:

1. September 2011

Ende:

8. September 2011

benötigte Ressourcen:

Zeit, Laptop

Arbeitspaket: Ideen mit Auftraggeberin besprechen

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Ziele,

Vorschläge

und

Corporate

Design mit Vera Sebauer absprechen nicht Ziele:

zu keinem Ergebnis gelangen

Start:

8. September 2011

Ende:

10. September 2011

benötigte Ressourcen:

Laptop, Zeit

4.3.2. Meilenstein 2: Unterlagen sammeln Arbeitspaket: Text finden

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Texte

finden,

Geschichte,

Produktinformationen, genaue Adresse nicht Ziele:

Keine Unterlagen finden

Start:

10. September 2011

Ende:

16. September 2011

benötigte Ressourcen

Laptop, Zeit, Stift, Papier

Daniela Novak, Lena Sebauer

10


Arbeitspaket: Inhalte zusammenfassen Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Texte

zusammenfassen

und

strukturieren mittels Html nicht Ziele:

Unvollständige Inhalte

Start:

16. September 2011

Ende:

30. September 2011

benötigte Ressourcen:

Materialien, Laptop, Zeit

Arbeitspaket: Bilder

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Bilder

erstellen

(Produkte,

Geschäftsführer, Geschäft, Keramiker) nicht Ziele:

Unscharfe Bilder

Start:

30. September 2011

Ende:

2. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Digitalkamera

Arbeitspaket: Bilder bearbeiten

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Bilder zuschneiden, zusammenfügen, skalieren, usw.

nicht Ziele:

keine passenden Gesamtbilder

Start:

30. September 2011

Ende:

2. Oktober 2011

benötigte Ressourcen

Laptop, Zeit, Gimp

Daniela Novak, Lena Sebauer

11


Arbeitspaket: Film erstellen

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Film(Interview) machen, bearbeiten

nicht Ziele:

schlechte Qualität

Start:

2. Oktober 2011

Ende:

9. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Digitalkamera

4.3.3. Meilenstein 3: Corporate Design erstellen Arbeitspaket: Corporate Design

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

passende Farben, Schriften überlegen

nicht Ziele:

keine passenden Designs finden

Start:

9. Oktober 2011

Ende:

30. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Papier, Drucker

4.3.4. Meilenstein 5: Entwurf der Website erstellen Arbeitspaket: Template suchen Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Template suchen, testen

nicht Ziele:

kein passendes Template finden

Start:

8. September 2011

Ende:

15. September 2011

benötigte Ressourcen:

Laptop, Zeit, Internet

Daniela Novak, Lena Sebauer

12


Arbeitspaket: Template bearbeiten

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Bilder

verändern,

passendes

Hauptmenü, testen nicht Ziele:

unpassendes Template

Start:

17. Oktober 2011

Ende:

3. November 2011

benötigte Ressourcen:

Laptop, Zeit

4.3.5. Meilenstein 6: Websites fertigstellen und testen Arbeitspaket: Startseite Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Informationen über den Neusiedler See, passendes Bild mit Logo, testen

nicht Ziele:

zu viel Text

Start:

3. November 2011

Ende:

17. November 2011

benötigte Ressourcen:

Laptop, Zeit, Bilder

Arbeitspaket: Aktuelles

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Informationen Slideshow

über die

mit

Umgebung,

aktuellen

Bildern

einfügen, testen nicht Ziele:

unübersichtlich, Slideshow funktioniert nicht

Start:

17. November 2011

Ende:

24. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Bilder

Daniela Novak, Lena Sebauer

13


Arbeitspaket : Der See Shop

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Informationen über den See Shop, Slideshow über Produktpalette, Video, testen

nicht Ziele:

zu viel Text, keine funktionierende Slideshow

Start:

17. November 2011

Ende:

24. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Bilder

Arbeitspaket : Abo Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Formular

erstellen

zum

Zeitung

abonnieren , passendes Bild, testen nicht Ziele:

Formular funktioniert nicht

Start:

24. Oktober 2011

Ende:

1. Oktober 2011

benötigte Ressourcen:

Laptop, Zeit, Bilder

Arbeitspaket : Kontakt

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Anschrift,

Kontaktpersonen,

Adresse

einfügen, passendes Bild, testen nicht Ziele:

falsche Angaben erstellen

Start:

1. November 2011

Ende:

15 November 2011

benötigte Ressourcen:

Laptop, Zeit, Kontaktdaten

Daniela Novak, Lena Sebauer

14


4.3.6. Meilenstein 7: Backend erstellen Arbeitspaket: Backend auf der Seite Aktuelles erstellen Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

Seiten:

login,

bearbeiten,

löschen

check, und

logout, einfügen

erstellen nicht Ziele:

nicht funktionierendes Backend

Start:

1. November 2011

Ende:

15 November 2011

benötigte Ressourcen:

Laptop, Zeit, Kontaktdaten

Arbeitspaket: Backend Symbole hinzufügen

Zuständige:

Daniela Novak und Lena Sebauer

Ziele:

passende Symbole zum bearbeiten, löschen,

einfügen

finden

und

hinzufügen nicht Ziele:

keine Symbole finden

Start:

1. November 2011

Ende:

15 November 2011

benötigte Ressourcen:

Laptop, Zeit, Symbole

Daniela Novak, Lena Sebauer

15


5. Corporate Design = Unternehmenserscheinung Zielgruppe: Mit unserer Homepage und der Zeitschrift „Der See“ möchten wir einen Einblick in das Burgenland und rund um den Neusiedler See gewähren. Sie soll alle Interessenten, ob jung oder alt ansprechen.

Abbildung 3: Corporate Design

Template: -

schwarz  Hexadezimalcode: #00000

-

dunkelbraunHexadezimalcode: #401a0b

Schriftart: "Calibri", Arial, sans-serif -

Überschriften 1, 2 in creme  Hexadezimalcode: #837669

-

Überschrift 3 in weiß  Hexadezimalcode: #FFFFFF

-

Body in hellgrau  Hexadezimalcode: #837669

Daniela Novak, Lena Sebauer

16


Logo: - „Der Neusiedler See“ – Zeitschrift für das Land zum Leben

Abbildung 4: Der See – Design

Daniela Novak, Lena Sebauer

17


6. Grundlagen 6.1.

Xampp

= ist ein Komplett-Paket, bestehend aus dem -

Webserver Apache

-

mit der Datenbank MySQL bzw. SQLite

-

den Skriptsprachen Perl und PHPApache.

Es ermöglicht diese Programme auf sehr einfache Weise zu installieren, außerdem ist es erhältlich für alle beliebigen Betriebssysteme. Xampp1 ist eine Zusammenstellung von freier Software und stellt eine Testumgebung dar. Mithilfe von Xampp

kann man schnell und

unproblematisch „ausprobieren“, bevor man die entsprechenden Dateien online und live stellt. Xampp wird verwendet zur Einrichtung und Wartung eines Web-Servers, um Datenbanken zu erstellen und zu bearbeiten.

Abbildung 5: Control Panel 1

(appachefriends)

Daniela Novak, Lena Sebauer

18


6.2.

HTML-Editor

. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser2 (Internet Explorer, Firefox, Google Chrome,…) dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML3 zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Ein einfaches HTML-Dokument hat folgenden Aufbau:

<html> <head> <title></title> <meta name="author" content=""> <meta name="editor" content="html-editor phase 5"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000"

alink="#FF0000"

vlink="#FF0000"> </body> </html>

Abbildung 6: Html-Code

2 3

(wikipediaWebbrowser) (boku)

Daniela Novak, Lena Sebauer

19


6.3.

PHP4

PHP

ist

eine

Skriptsprache,

die

hauptsächlich

zur

Erstellung

dynamischer Webseiten oder Webanwendungen verwendet wird. PHP läßt sich überall dort einsetzen, wo HTML Seiten keine statischen Informationen

bieten

sollen,

sondern

in

einer

bestimmten

Form

dynamischen (veränderbaren, lebendigen) Inhalt haben sollen. Es lassen sich z. B. Benutzereingaben aus HTML Formularen mit PHP weiterverarbeiten. PHP kann damit eine Mail versenden oder Eingaben in einer Datenbank speichern. PHP besitzt auch vielerlei Funktionen für die Datenbankanbindung z. B. an eine MySQL Datenbank. Steht eine solche Datenbank nicht zur Verfügung, kann PHP auch Daten in eine normale Textdatei schreiben und auch wieder auslesen. Formulareingaben lassen sich auch auf ihre Vollständigkeit und Sinnhaftigkeit prüfen. Kurzum lässt sich mit PHP Interaktion in jeder Form auf eine Webseite bringen, die sonst nur ein statisches

Gebilde

Diskussionsforen,

wäre.

Häufige

Besucherzähler,

Einsatzmöglichkeiten Gästebücher,

sind,

Statistiken,

Meinungsumfragen, Antwortformulare die ein Mail verschicken und ähnliches.

4

(PHP)

Daniela Novak, Lena Sebauer

20


6.4.

CSS

CSS5 ist die Abkürzung für das englische Cascading Style Sheets, Mit

Hilfe

von

diesem

sogenannten

CSS-Dateien

kann

man

Formatierungseigenschaften von Websites definieren.

Einer der größten Vorteile von CSS ist neben seiner Kompatibilität auch sein Einsatzbereich. Es ist nicht notwendig CSS Code auf jeder einzelnen Website einzubauen. Man kann auch eine externe CSS-Datei anlegen, die alle Formatierungen enthält und diese in jeder Webseite inkludieren. Damit sind natürlich Änderungen an den Formatierungen auch besonders einfach, da man nur diese externe CSS-Datei bearbeiten muss und damit alle Seiten, die diese Datei nutzen automatisch geändert werden.

Abbildung 7: Css - Stylesheet

5

(JanikWebdesigner) (madeyouweb)

Daniela Novak, Lena Sebauer

21


6.5.

JavaScript

6.5.1. Was ist JavaScript? JavaScript6 ist eine Skriptsprache, die hauptsächlich für das DOMScripting in Web-Browsern eingesetzt wird. JavaScript ist eine zur Erweiterung des HTML-Befehlssatzes entwickelte kompakte

Scriptsprache,

die

es

auch

Entwicklern

mit

geringen

Programmierkenntnissen ermöglicht, objektorientierte Anwendungen in Internetseiten zu implementieren. Sie wird direkt in das HTML-Dokument eingebunden, wodurch schnelle Aktionszeiten möglich sind. Um eine JavaScript entwickeln zu können sind keine zusätzlichen Editoren wie AppBuilder, Compiler, Debugger oder sonstige Entwicklungsumgebungen nötig. Es kann wie ein HTML-Code einfach in Texteditoren eingegeben werden. Java und JavaScript Mit der Programmiersprache "Java" hat JS nur einen Teil des Namens und den Aufbau als auf Syntaxbefehlen aufbauende Sprache gemein. Java ist zwar auch eine objektorientierte Scriptsprache, kann jedoch für kleine, eigenständige Applikationen, so genannte "Standalones" oder auch "Applets", genutzt werden. JS ist nicht alleine lauffähig, es benötigt eine HTML-Umgebung. Das von SUN entwickelte Java ist wesentlich umfangreicher und somit auch schwerer erlernbarer als JavaScript.

Im Rahmen unseres Projektes erstellten und bearbeiteten wir mit Hilfe von JavaScript unsere Slideshows.

6

(wikipediaJavaScript)

Daniela Novak, Lena Sebauer

22


6.6.

Gimp

GIMP7 ist ein kostenloses und freies Bildbearbeitungsprogramm. Bildbearbeitung: - Transformieren - Weichzeichnen - Skalieren - Spiegeln - Füllen - Verschieben - Ausschneiden - Zuschneiden und vieles mehr. Abbildung 8: Gimp - Werkzeuge

Man kann auf verschiedenen Ebenen und Kanälen arbeiten und wird unterstützt durch Auswahlmasken und Ebenenmasken. Die Bearbeitungsfunktionen sind über Werkzeugleisten, Menüs und Dialogfenster zu erreichen, sie enthalten sogenannte Filter für grafische Effekte. Es gibt Pinsel sowie Umwandlungs-, Auswahl-, Ebenen- und Maskierungsfunktionen. Zum Standardumfang von Gimp gehören derzeit 48 verschiedene Pinsel, weitere lassen sich erzeugen, zudem sind Kantenschärfe und Deckung einstellbar. Gimp hat Farbpaletten für RGB, HSV, CMYK, ein Farbrad sowie Funktionen, um Farben aus einem Bild zu entnehmen. Auch eine direkte Eingabe der hexadezimalen Farbwerte aus HTML ist möglich, sowie umgekehrt das Herausfinden eines Farbwertes. Es gibt mehr als 100 Filter, die zur Unterstützung für Verschönerungen, Veränderungen und Gestalten von Fotos dienen. Außerdem gibt es eine Palette von Effekten, mit denen man sein Bild gestalten kann.

7

(GIMP)

Daniela Novak, Lena Sebauer

23


Gimp wird benutzt zum privaten Fotos bearbeiten, für die Erstellung von Weblayouts oder die Erstellung von Animationen. Das Öffnen und Speichern von verschiedenen Dateitypen, wie z.B. jpg, png, gif, svg, eps, ico usw. ist ebenfalls möglich.

Im Rahmen unseres Projektes haben wir fast alle Bilder mit Gimp bearbeitet.

Unsere

Fotos

wurden

vergrößert,

verkleinert,

zusammengefügt, ausgeschnitten oder anders passend zu unserer Website formatiert. Wir erstellten auch viele Bildschirmfotos (Screenshots) mit Hilfe von Gimp. Das Programm ist schnell, präzise und einfach anzuwenden und das Speichern in vielen verschiedenen Dateitypen ist ebenfalls sehr hilfreich beim Arbeiten mit Fotos.

Abbildung 9: Anwendung von Gimp

Daniela Novak, Lena Sebauer

24


6.7.

Windows Movie Maker

Importieren und Bearbeiten von Diashows und Videos Mit dem Programm Movie Maker kann man in kürzester Zeit Fotos und Bildmaterial vom PC oder einer Kamera hochladen. Anschließend kann man den Film individuell nach seinen Wünschen anpassen. Es ist möglich Szenen anders anzuordnen oder die Geschwindigkeit zu verändern – ganz wie man möchte.

Bearbeiten des Soundtracks und Hinzufügen eines Designs Der Movie Maker fügt auch Übergänge und Effekte automatisch hinzu, um ein elegantes und professionelles Aussehen zu erreichen.

Onlineveröffentlichung des Films Sobald der Film fertig ist, kann man ihn online auf Facebook, YouTube oder in anderen sozialen Netzwerken, Videocommunitys oder auf Webseiten veröffentlichen.

Daniela Novak, Lena Sebauer

25


7. Unsere Homepage 7.1.

Ideen sammeln

Zuerst erstellten wir ein Mind Map mit unseren Ideen und Vorstellungen wie die Webseite der See ausschauen sollte. Ferner holten wir uns auch Anregungen von der ursprünglichen Webseite „Der See“. Dann suchten wir, unserem Corporate Design entsprechend, ein passendes Template auf der Internetseite „Free Css Templates“.

7.2.

Template

Mit den gesammelten, passenden Ideen fiel es uns sehr leicht das Template umzugestalten. Mittels Gimp bearbeiteten wir unsere Fotos und fügten sie teilweise in den Wrapper und in unsere Slideshows ein. Das Logo wurde ebenfalls bearbeitet, was uns anfangs sehr schwer fiel. Es erschien uns unmöglich das Logo in der passenden Auflösung und Format zu beschaffen. Schließlich konnten wir es in der richtigen Größe und Auflösung mit einem geeigneten Bild auf unserer Startseite (index.php) kombinieren.

Abbildung 10: Unsere Homepage

Daniela Novak, Lena Sebauer

26


7.3.

Menü

Auf jeder unserer Seiten wird im „Header“ ein Menu angezeigt, von welchem man zwischen den verschiedenen Websites hin und her wechseln kann.

    

Der See  Startseite (index.php) Aktuelles (Aktuelles.php) Abo (Abo,php) Der See Shop (Der See Shop.php) Kontakt (Kontakt.php)

Abbildung 11: Menü

Daniela Novak, Lena Sebauer

27


7.4.

Die Seiten

7.4.1. Der See (Startseite)  (index.php)

Abbildung 12: Startseite

Der Index ist die offizielle Startseite von „Der See“ Homepage und wird beim Eintippen der URL als Erstes aufgerufen. Hier möchten wir einen kleinen Einblick in den Inhalt der See Zeitschrift ermöglichen, sowie über die Edition. Gezeigt wird ebenfalls das Logo kombiniert mit einem erstellten Foto der „Mole West“, die typisch für den Neusiedler See ist und gut zu unserem Coporate Design passt.

Daniela Novak, Lena Sebauer

28


7.4.2. Aktuelles  (Aktuelles.php)

Abbildung 13: Aktuelles

Danach folgt die Seite Aktuelles, wo wir verschiedene Weinkeller, Küchen, sowie Veranstaltungen aufgelistet haben. Auf dieser Seite befindet sich eine Slide-Show, die wir zuvor mittels Javascript in einer inc-Datei erstellten und anschließend in der Seite, mit einem sogenannten IncludeBefehl, eingefügt haben.

Daniela Novak, Lena Sebauer

29


Außerdem befindet sich hier auf das Backend8, wo man sich anmelden und die Datensätze der Weinkeller bearbeiten, löschen sowie neue hinzufügen kann. Hierzu wurde eine Datenbank auf phpmyAdmin erstellt und dann in einer formatierten Tabelle auf der Datei „Aktuelles.php“ ausgegeben.

Genaueres zur Funktionsweiße des Backend in Verbindung mit der Aktuelles Seite finden Sie nun auf den folgenden Seiten.

8

Unterbau -- Das Backend ist näher am System, hier kann man Änderungen vornehmen Im Gegensatz zum Frontend, welches nur die Website Besucher zu Gesicht bekommen, hier kann man nichts an der Homepage verändern

Daniela Novak, Lena Sebauer

30


7.4.3. Anmelden  (login.php)

Abbildung 14: Anmelden

In unserem „Footer“ befindet sich auf jeder Seite die Möglichkeit sich in das Backend einzuloggen. Einmal draufgeklickt, muss man nur noch das korrekte Kennwort eintippen um zum Aktuelles-Backend zu gelangen  (akutelles_db.php). Wird das Passwort allerdings falsch angegeben, gelangt man wieder zum Anmelden (login.php) zurück. Dies soll die Betreiber vor unbefugten Eingriffen schützen.

Abbildung 15: Kennwort falsch

Daniela Novak, Lena Sebauer

31


Abbildung 16: login.php

7.4.4. Check  (check.php)

Abbildung 17: check.php

Ob das Passwort stimmt oder nicht überprüft die Datei „check.php“, sie macht es möglich das man zum Backend gelangt oder wieder zurück zum Anmelden.

Daniela Novak, Lena Sebauer

32


 (aktuelles_db.php)

Abbildung 18: Backend

Hat man das Passwort korrekt eingegeben gelangt man zur Datei „aktuelles_db“. In das sogenannte Backend, hier kann der Betreiber verschiedene Datensätze bearbeiten, löschen oder neue Datensätze in die Tabelle hinzufügen. Um Änderungen vorzunehmen muss man nur auf die entsprechenden Symbole klicken:

Daniela Novak, Lena Sebauer

33


7.4.5. Weinkeller hinzufügen:  einfuegen.php  einfuegen_db.php

Abbildung 19: einfuegen.php

Die Dateien „einfuegen.php“ kombiniert mit „einfuegen_db.php“ schaffen die Möglichkeit neue Datensätze einzufügen. Hier gibt man einfach die gewünschte Nr, Weinkeller, PLZ und Ort ein, dann klickt man auf Daten absenden und schon sind sie gespeichert. Außerdem kann man auch die Daten zurücksetzten lassen falls man sich vertippt hat oder noch mal von vorne beginnen möchte. Danach gelangt man durch einen Link zur „Aktuelles_db.php“ zurück.

Abbildung 20: einfuegen_db.php

Daniela Novak, Lena Sebauer

34


7.4.6. Weinkeller bearbeiten:  bearbeiten.php  bearbeiten_db.php

Abbildung 21: bearbeiten.php

Die Datensätze bearbeiten funktioniert nach demselben Prinzip wie Daten einfügen. Benutzt wird wieder eine Kombination aus den Dateien „bearbeiten.php“ und „bearbeiten_db.php“. Wenn man die ausgewählten Einträge bearbeitet hat, klickt man wieder auf Daten absenden und man gelangt zurück auf die Übersichtsseite.

Abbildung 22: bearbeiten_db.php

Daniela Novak, Lena Sebauer

35


7.4.7. Weinkeller löschen:  loeschen_db.php

Abbildung 23: loeschen_db.php

Letztendlich gibt es noch die Gelegenheit ausgewählte Einträge zu löschen. Es wird die Nummer des gelöschten Datensatzes angezeigt und danach kann man wieder auf die „Aktuelles_db.php“ zurückkehren.

Abbildung 24: Datensatz gelöscht

Daniela Novak, Lena Sebauer

36


7.4.8. Abmelden  logout.php

Abbildung 25: logout.php

Am Ende der Weinkeller Tabelle befindet sich ein Link zum Abmelden, durch ihn gelangt man zur Datei „logout.php“. Sie macht es möglich das Backend zu verlassen und wieder auf die Aktuelles Seite zu gelangen.  Aktuelles.php Wenn man Änderungen vorgenommen hat, werden diese jetzt auf die Aktuelles.php übernommen.

Daniela Novak, Lena Sebauer

37


7.4.9. Abo  Abo.php

Abbildung 26: Abo

Auf der Seite Abo kann die Zeitschrift „Der See“ abonniert werden, dazu muss man nur seine persönlichen Angaben in das vorgefertigte Formular eintippen und auf Absenden drücken. Auch hier haben wir verschiedene Bilder mit Gimp bearbeitet und zusammengefügt um ein zur Seite passendes Bild (Wrapper) zu schaffen.

Daniela Novak, Lena Sebauer

38


7.4.10.

Der See Shop

 Der See Shop.php

Abbildung 27: Der See Shop

Bei der Seite Der See Shop möchten wir angesichts einer Slideshow einen Einblick in die Produktpalette gewähren. Außerdem gibt es hier noch einige Fakten zur Geschichte und Leitung des Shops.

Daniela Novak, Lena Sebauer

39


7.4.11.

Kontakt

ď&#x192;¨ Kontakt.php

Abbildung 28: Kontakt

Auf der letzten Seite Kontakt findet man die Ansprechpartner und den Standort des See Shops. Mithilfe einer Abbildung der Route sowie eines Links zu Google Maps wollten wir die Suche des Shops etwas erleichtern. Anregungen oder WĂźnsche kann man hier mittels Formular ebenfalls an die Kontaktperson Waltraud Sebauer schicken.

Daniela Novak, Lena Sebauer

40


8. Slideshow 8.1.

Produkte

Abbildung 29: Produkte Slider

Mittels JavaScript erstellten wir in einer externen Datei (javascript.inc) eine Slideshow 端ber die verschiedenen, angebotenen Produkte des See Shops. Die Bilder sind nebeneinander angelegt und ziehen mit einer Schnelligkeit von 2 Sekunden vor端ber, wenn man den Mauszeiger auf ein Bild bewegt bleibt es stehen.

Daniela Novak, Lena Sebauer

41


Hier wurden die Bilder eingefügt!

Abbildung 30: javascript.inc

In dieser Datei legten wir die Schnelligkeit, Größe, Farbe, Effekte usw., die unsere Slideshow haben sollte, fest. Die Bilder formatierten wir mit Gimp und fügten sie dann in die javascript.inc ein. Diese banden wir wieder mit einem Include-Befehl an der gewünschten Position in die Seite Der See Shop ein.

Daniela Novak, Lena Sebauer

42


8.2.

Aktuelles

Abbildung 31: Aktuelles Slider

Auf der Seite Aktuelles erstellten wir ebenfalls eine Slideshow. Diese besteht aus einem bunten Mix von Bildern aus der Region Burgenland, wobei jedes Bild nacheinander 2 Sekunden lang angezeigt wird. Wir erstellten die Slideshow wieder mit JavaScript, allerdings ist sie anders aufgebaut als die Produktpalette.

Daniela Novak, Lena Sebauer

43


Hier wurden die Bilder eingefügt!

Abbildung 32: aktuelles.inc

Formatiert wurde in einer externen Datei (aktuelles.inc) und die Bilder wurden mit Gimp zurechtgeschnitten. In

der

aktuelles.inc

legten

wir

Hintergrundfarbe,

Schnelligkeit,

Wiederholungen, Größe, usw. fest und fügten die Bilder ein. Anschließend banden wir die Datei mit einem Include-Befehl an der richtigen Stelle in die Seite Aktuelles ein.

Daniela Novak, Lena Sebauer

44


9. Video Mit Hilfe von dem Programm Windows Movie Maker erstellten wir ein Video. Mit diesem Video wollen wir den Inhalt von der Zeitung „der See“ noch einmal bildlich darstellen. Dazu verwendeten wir verschiedene Videoausschnitte und fügten sie zusammen.

Abbildung 33: Windows Movie Maker

Daniela Novak, Lena Sebauer

45


Mit den Schaltflächen Effekte fügten wir passende Übergänge hinzu.

Abbildung 34: Effekte

Danach verfeinerten wir das Video mit einer entspannenden Musik einem Titel sowie einem Nachspann.

Daniela Novak, Lena Sebauer

46


Zum Schluss platzierten wir das Video in unserem php Dokument (index.php) ein. Mit dem Befehl:

Abbildung 35: der see.avi

Daniela Novak, Lena Sebauer

47


10. Nachwort In unserem Ausbildungsschwerpunkt Information and Communication Solutions hatten wir den Auftrag als Maturaprojekt eine Homepage zu erstellen. Anfangs fiel es uns ziemlich schwer überhaupt ein Unternehmen zu finden, das noch keine Homepage hatte. Aber, nach reiflicher Überlegung, beschlossen wir eine bereits vorhandene Homepage zu ändern. Wir beschlossen die vorhandene „Der See“ Seite mit dem „Der See Shop“ zu verbinden und brachten sehr viele moderne Ideen in das Projekt ein. Nun hatten wir die Möglichkeit unser bereits erworbenes Wissen aus dem Fach „ICS“ in die Praxis umzusetzen, was uns sehr viel Freude bereitete. Zusätzlich lernten wir auch neue Sachen dazu und wurden vor viele Herausforderungen gestellt. Mit Hilfe vom Html-Editor konnten wir selbst Kleinigkeiten ganz genau nach unseren Vorstellungen entsprechend gestalten, so bereitete uns jeder Fortschritt große Freude. Das Arbeiten an der Homepage war einerseits sehr interessant, man konnte die eigenen Ideen einbringen und äußerst kreativ sein. Andererseits war es manchmal auch sehr mühsam, jedoch machte sich die Mühe am Ende bezahlt.

Wir persönlich haben sehr viele positive Erfahrungen mit dem Erstellen und Verändern der Homepage gemacht und würden auch jederzeit eine neue Website erstellen.

Daniela Novak, Lena Sebauer

48


11. Literaturverzeichnis http://de.wikipedia.org/wiki/Corporate_Design abgerufen http://www.apachefriends.org/de/xampp.html abgerufen http://de.wikipedia.org/wiki/Webbrowser abgerufen http://www.boku.ac.at/htmleinf/ abgerufen http://de.wikipedia.org/wiki/PHP abgerufen http://www.janik.cc/webdesigner-blog/2011/10/was-ist-css-einfacheerklarung-fur-anfanger abgerufen http://www.madeyourweb.com/webentwicklung/was-ist-css.html abgerufen http://de.wikipedia.org/wiki/JavaScript abgerufen http://de.wikipedia.org/wiki/GIMP abgerufen

Daniela Novak, Lena Sebauer

49


Der See