Page 1

Fachspezifische Themenstellung aus Information & Communication Solutions

Auftraggeberin: Jutta Niefergall Projektleiterin: Johanna Leithner Teammitglied: Carina Plรถchl Jahrgang: 2012/2013


1 Inhaltsverzeichnis 2

Abbildungsverzeichnis ..................................................................... 4

3

Vorwort ............................................................................................... 5

4

Abstract .............................................................................................. 6

5

Projektmanagement .......................................................................... 7 5.1

Projektdefinition ............................................................................ 7

5.1.1 5.2

Sachliche Abgrenzung ........................................................... 8

Projektplanung .............................................................................. 9

5.2.1

Projektstrukturplan ................................................................. 9

5.2.2

Corporate Design ................................................................. 18

5.3

Projektabwicklung ....................................................................... 19

5.3.1 5.4

Das Besprechungsprotokoll ................................................. 19

Projektabschluss ......................................................................... 21

5.4.1

Projektabnahme ................................................................... 21

5.4.2

Projektabschlussanalyse ...................................................... 21

5.4.3

Projektauflรถsung................................................................... 21

Grundlagen ............................................................................................. 22 5.5

Gimp ........................................................................................... 22

5.6

ER-Diagramme ........................................................................... 23

5.7

PHP ............................................................................................ 24

5.8

HTML (Hyper Text Markup Language) ....................................... 26

5.9

CSS ............................................................................................ 27

5.10 Videobearbeitung ........................................................................ 28 5.10.1

Allgemein .......................................................................... 28

5.10.2

Windows Live Movie Maker .............................................. 29

2


6

Aufbau der Homepage .................................................................... 30 6.1

Template ..................................................................................... 30

6.2

Seite „Jahresüberblick“ ............................................................... 31

6.3

Seite „Produktliste“ ..................................................................... 32

6.4

Seite „Fotogalerie“ ...................................................................... 33

6.5

Seite „Kontakt“ ............................................................................ 34

6.6

„Sidebar“ ..................................................................................... 35

7

Nachwort .......................................................................................... 36

8

Literaturverzeichnis ........................................................................ 37

3


2 Abbildungsverzeichnis Abbildung 1: Projektmanagement .............................................................. 7 Abbildung 2: Projektstrukturplan ................................................................ 9 Abbildung 3: Logo .................................................................................... 18 Abbildung 4: Projektabschlussanalyse ..................................................... 21 Abbildung 5: Banner ................................................................................ 22 Abbildung 6: ER Diagramm ..................................................................... 23 Abbildung 7: Darstellung der Funktionsweise von PHP ........................... 24 Abbildung 8: HTML .................................................................................. 26 Abbildung 9: Css ...................................................................................... 27 Abbildung 10: Windows Movie Maker ...................................................... 29 Abbildung 11: Template ........................................................................... 30 Abbildung 12: Website ............................................................................. 30 Abbildung 13: Jahres端berblick ................................................................. 31 Abbildung 14: Produktliste ....................................................................... 32 Abbildung 15: HTML Befehle f端r die Tabelle ........................................... 32 Abbildung 16: Fotogalerie ........................................................................ 33 Abbildung 17. Bearbeitung mit Movie Maker ........................................... 33 Abbildung 18: Kontakt .............................................................................. 34 Abbildung 19: Sidebar.............................................................................. 35 Abbildung 20: PHP Befehle f端r die Sidebar ............................................. 35

4


3 Vorwort Anlässlich unseres Ausbildungsschwerpunktes „Information and Communication Solutions“, kurz ICS, haben wir uns entschlossen eine Website mithilfe von „Phase 5“ zu entwerfen. Dabei konnten wir unser erlerntes Wissen der letzte drei Jahre anwenden. Die Website sollte der erste Webauftritt des Hofladens „Zu den Jahreszeiten“ von Jutta Niefergall sein. In erster Linie dient die Website als Repräsentaionsoberfläche. Eines unsere größten Anliegen war, das benutzerfreundliche und ansprechende Design für die Homepage. Dabei sollte das wesentliche vom Hofladen eingefangen und mit neuen Ideen bereichert werden. Wir hoffen, dass die Auftraggeberin mit dem von uns gelieferten Ergebnis zufrieden ist.

5


4 Abstract On the occasion of our training priority “information and Communication Solutions”, short ICS, we decided to create a Website by using “Phase 5”. We were able to apply our acquired knowledge of the last 3 years. The website should be the first appearance in the Web of the farm shop “Zu den Jahreszeiten” from Jutta Niefergall. In the first instance the website should serve as a representation surface. Our biggest concern was the user friendly and appealing design for the home page, although the essence of the farm shop should be captured and enriched with new ideas. We hope that the contracting authority is satisfied with results which we have delivered.

.

6


5 Projektmanagement1 Projektmanagement ist ein Prozess zur Durchführung von Projekten, der 

den Projektstart,

die Projektkoordinaten,

das Projektcontrolling,

das Projektmarketing und

den Projektabschluss

Beinhaltet.

Projektdefinition

Projektplanung

Projektabwickelung

Prokektabschluss

Abbildung 1: Projektmanagement

5.1 Projektdefinition Um ein Projekt erfolgreich abschließen zu können ist eine genaue Definition der Aufgabe Voraussetzung. Diese Aufgabe wird in drei Bereiche unterteilt, die Sachliche, die Zeitliche und die persönliche Abgrenzung. Istzustand: Frau Niefergall interessiert sich für eine Homepage, da sie noch keinen Webauftritt hatte. Das sahen wir als eine gute Gelegenheit für unser Projekt. Die Auftraggeberin ist offen für alles und lässt uns frei entscheiden.

1

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

7


5.1.1 Sachliche Abgrenzung 5.1.1.1 Ziele:         

Webseite dient zur Repräsentation des Hofladens Es soll ein Einblick in die Produktreihe gewährleistet werden Angebote und Saisonalprodukte sollen hervorgehoben werden der Kundenkreis soll erweitert werden ein geeignetes Template soll gewählt werden (passend zu den 4 Jahreszeiten) Dynamische Website Bildergalerie kurze Videopräsentation (Vorstellung der Inhaberin und des Ladens) Anfahrtsplan erstellen

5.1.1.2 Nicht Ziele:    

nicht fertigstellen der Website unübersichtliche Website unzufrieden Auftraggeberin nicht Einhaltung des Abgabetermins

5.1.1.3 zeitliche Abgrenzung  

Start: 20.09.2012 Ende: 29.05.2013

5.1.1.4 persönliche Abgrenzung   

Auftraggeberin: Jutta Niefergall Projektleiterin: Johanna Leithner Projektmitglied : Carina Plöchl

8


5.2 Projektplanung Die Projektplanung ist die Zweite der vier Haupt-Phasen und beschäftigt sich mit der Aufteilung der Aufgaben und bereitet die Projektdurchführung so gut wie möglich vor.

5.2.1 Projektstrukturplan

Projektmanagement

Website entwerfen

Coperate Design

Details der Webseite festlegen

Template aussuchen

Feststellung des CD

Welche Seiten

Inhalte ,Bilder und Texte zusammensuchen

Umsetzung des CD

Bilder wie verarbeiten

Erstellen und veröffentlichen der Website

aussortieren der gesmmelten Materialien

Logo bearbeiten

Text Struktur

Projektabschluss

Funktionen der Website

Templatelayout vereinheitlichen und anpassen

Domainnamen aussuchen

Projektstart

Auftrag suchen

Einbinden der Materialien

Homepage hochladen

Abbildung 2: Projektstrukturplan

9


5.2.1.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. 5.2.1.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 Termine verantwortlich ist.

Meilenstein 1: Konzept erstellt und mit Auftraggeberin besprochen Arbeitspaket: 1.1. Konzept erstellen Zuständige: Carina Plöchl Ziele: Ideen und Vorschläge ausarbeiten, Farben auswählen, Corporate Design erstellen Nichtziele: keine Ideen finden Start: 11.10.2012 Ende:11.10.2012 Benötigte Materialien: Internet, Laptop

Arbeitspaket: 1.2. Ideen mit Verantwortlichen besprechen Zuständige: Johanna Leithner Ziele: Ideen und Vorschläge mit der Auftraggeberin besprechen, klare Vorstellung der Homepage Nichtziele: keine Übereinstimmung der Vorstellungen Start: 29.11.2012 Ende: 29.11.2012 Benötigte Materialien: Laptop, Datei mit ausgearbeiteten Vorstellungen

10


Arbeitspaket : 1.3. Koordination Zuständige: Johanna Leithner Ziele: Ideen und Vorschläge mit Verantwortlichen umändern, auf die Vorstellungen des Auftraggebers eingehen Nichtziele: keine Übereinstimmung Start: 03.12.2012 Ende: 03.12.2012 Benötigte Materialien: Laptop mit fertigen Konzept

Meilenstein 2: Websitestruktur entworfen Arbeitspaket: 2.1. Template suchen Zuständige: Carina Plöchl Ziele: Template für Homepage finden Nichtziele: Verfehlung des Geschmacks der Kundin Start: 06.12.2012 Ende: 06.12.2012 Benötigte Materialien: Laptop, Internet

Arbeitspaket: 2.2. Texte erstellen Zuständige: Johanna Leithner Ziele: Texte schreiben für einzelne Menüpunkte Nichtziele: keine gute Formulierung Start: 11.12.2012 Ende: 11.12.2012 Benötigte Materialien: Laptop, Word, Angaben der Auftraggeberin

11


Arbeitspaket: 2.3. Fotos machen Zuständige: Carina Plöchl Ziele: passende Fotos machen Nichtziele: schlechte Qualität der Fotos Start: 29.11.2012 Ende: 29.11.2012 Benötigte Materialien: Kamera

Arbeitspaket: 2.4. Fotos bearbeiten Zuständige: Johanna Leithner Ziele: Fotos bearbeiten, auf richtige Größe zuschneiden Nichtziele: unscharfe, überbelichtete Bilder Start: 30.11.2012 Ende: 30.11.2012 Benötigte Materialien: Fotos, Laptop

12


Meilenstein 3: Corporate Design erstellt Arbeitspaket: 3.1. Template bearbeiten Zuständige: Johanna Leithner Ziele: Template anpassen, Farben einbringen Nichtziele: unpassende Farben Start: 20.12.2012 Ende: 20.12.2012 Benötigte Materialien: Internet, Laptop

Arbeitspaket : 3.2. Design Zuständige: Carina Plöchl Ziele: Template und Bilder an das Corporate Design anpassen Nichtziele: langweiliges Design Start: 20.12.2012 Ende: 20.12.2012 Benötigte Materialien: Laptop, Internet

13


Meilenstein 4: Seiten erstellt Arbeitspaket: 4.1. Seite „Home“ Zuständige: Johanna Leithner Ziele: Kurze Beschreibung des Hofladens Nichtziele: zu viel Text, schlechte Formulierung Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Internet, Bilder, Angaben der Auftraggeberin

Arbeitspaket: 4.2. Seite „Kontakt“ Zuständige: Carina Plöchl Ziele: Google-Anfahrtsplan einbetten, Kontaktdaten anzeigen Nichtziele: funktioniert nicht Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Internet, Laptop, Kontaktdaten

14


Arbeitspaket: 4.3. Seite „Jahresüberblick“ Zuständige: Johanna Leithner Ziele: Anzeigen der Öffnungstage mit den dazugehörigen Angeboten Nichtziele: schlechte Formatierung Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Laptop, Angaben der Auftraggeberin

Arbeitspaket: 4.4. Seite „Fotogallerie“ Zuständige: Carina Plöchl Ziele: Erstellen eines Videos mit Fotos und über YouTube auf die Seite einbetten Nichtziele: Funktioniert nicht Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Windows Live Movie Maker, Fotos, Musik, Laptop

Arbeitspaket: 4.5. Seite „Produktliste“ Zuständige: Johanna Leithner Ziele: Auflistung der zu verkaufenden Waren Nichtziele: zu uninteressant Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Laptop, Produktliste

15


Arbeitspaket: 4.6. „Sidebar“ Zuständige: Carina Plöchl Ziele: Werbung für den Geschenkkorb einbringen Nichtziele: nicht ansprechend Start: 26.02.2013 Ende: 26.02.2013 Benötigte Materialien: Laptop, Fotos

Arbeitspaket: 4.7. Website testen Zuständige: Johanna Leithner Ziele: Website funktioniert, Website ist nach Vorstellungen der Auftraggeberin Nichtziele: nicht funktionierende Website, Unzufriedenheit der Auftraggeberin Start: 27.02.2013 Ende: 27.02.2013 Benötigte Materialien: Internet

16


Meilenstein 5: Website überarbeitet Arbeitspaket : 5.1. Website präsentieren Zuständige: Johanna Leithner Ziele: Website dem Verantwortlichen vorführen Nichtziele: Unzufriedenheit Start: 27.02.2013 Ende: 27.02.2013 Benötigte Materialien: Internet, Laptop

Arbeitspaket : 5.2. Website überarbeiten Zuständige: Carina Plöchl Ziele: Website überarbeiten, Änderungen vornehmen Nichtziele: Änderungsvorschläge unmöglich Start: 28.02.2013 Ende: 28.02.2013 Benötigte Materialien: Internet, Laptop

Arbeitspaket : 5.3. Website fertigstellen Zuständige: Carina Plöchl Ziele: Website fertigstellen, alles funktioniert Nichtziele: nicht funktionierende Homepage Start: 28.02.2013 Ende: 28.02.2013 Benötigte Materialien: Internet, Laptop

17


5.2.2 Corporate Design

Logo Das Logo wurde uns von der Auftraggeberin, als JPG-Datei, übermittelt, sie ist die Photographin und gleichzeitig auch die Urheberin. Das Logo zeigt die Geschäftsräume ihres Unternehmens.

Abbildung 3: Logo

Verwendete Schriftfarben

o

Überschrift: HTML-Code: 015f13 RGB: 1/95/19 HSV: 131/99/37

o

Text: HTML-Code: ffffff RGB: 255/255/255 HSV: 131/0/100

o

Hintergrund, Banner: HTML-Code: 9fa973 RGB: 159/169/115 HSV: 71/32/66

Verwendete Schriften und Schriftgröße

o Schriftart im Banner: Old English Text MT o Fliesender Text: Arial, 12 pt

18


5.3 Projektabwicklung Nachdem das Projekt fertig geplant ist, ist jedes Projektteammitglied mit der Bearbeitung seiner übernommenen Arbeitspakete beschäftigt.

5.3.1 Das Besprechungsprotokoll 1. Besprechung Datum: 13.12.2012 Ort: Wolfsthal Teilnehmer: Johanna Leithner, Carina Plöchl Beim ersten Treffen mit der Auftraggeberin haben wir natürlich einiges vorbereitet. Wir erstellten ein Corporate Design und fassten die wichtigsten Fragen zusammen. 

Welche Seiten soll die Webseite beinhalten?

Wie soll die Startseite aussehen?

Sollen bestimmte Farben verwendet werden?

Gibt es ein bestimmtes Logo das verwendet werden soll?

Welche Wünsche bzw. Anregungen

hat die Auftraggeberin

noch? Frau Niefergall war von unseren Vorschlägen sehr angetan und mit ihr gemeinsam konnten wir auch die Fragen beantworten.

19


2. Besprechung Datum: Ort: Wolfsthal Teilnehmer: Johanna Leithner, Carina Plöchl Währen des Unterrichts konnten wir immer wieder Ideen sammeln die wir dann Frau Niefergall vorstellen wollten. Beim 2. Treffen zeigten wir, dann Frau Niefergall die Fortschritte bei der Webseite und erkundigten uns ob sie noch Wünsche hätte. Sie wollte lediglich die Farbe der Webseite ändern. 3. Besprechung Datum: Ort: Wolfsthal Teilnehmer: Johanna Leithner, Carina Plöchl Bei der letzten Besprechung haben wir Frau Niefergall die fertige Webseite präsentiert. Sie war sehr zufrieden mit unserer Arbeit.

20


5.4 Projektabschluss Der Projektabschluss ist die letzte Etappe des Projekts und beinhaltet unter anderem Projektabnahme, Projektabschlussanalyse und Projektauflösung. 5.4.1 Projektabnahme Die Projektabnahme führt den Projektabschluss herbei. Dabei erfolgt die Übergabe an den/die Projektauftraggeber/in und man sollte über eine zukünftige eventuelle Betreuung des Erstellten Abmachungen treffen. 5.4.2 Projektabschlussanalyse In der Projektabschlussanalyse sollte man eine anschließende Nachkalkulation durchführen. Abweichungen hinsichtlich Kosten, Termine und Qualität sollten analysiert werden. PSP-Code

Meilensteine

SOLL-Termin

IST-Termin

1.0

Konzept erstellen

03.12.2012

03.12.2012

2.0

Website entwer-

30.11.2012

30.11.2012

fen 3.0

Corporate Design

20.12.2012

20.12.2012

4.0

Seiten erstellen

27.02.2013

27.02.2013

5.0

Website überar-

28.02.2013

28.02.2013

beiten Abbildung 4: Projektabschlussanalyse

5.4.3 Projektauflösung Der allerletzte Schritt eines Projekts ist die Projektauflösung. Jedes Projekt sollte einen klaren Anfang als auch ein klares Ende haben.

21


Grundlagen 5.5 Gimp2 GIMP3 ist ein freies, sehr leistungsfähiges Foto- und Bildbearbeitungsprogramm. Der Name GIMP ist zusammengesetzt aus den englischen Worten „GNUImage Manipulation Program“, was im Deutschen so viel bedeutet wie „GNU4Bildbearbeitungsprogramm“. Man kann GIMP für eine Vielzahl an Aufgabeneinschließlich Fotonachbearbeitung, Bildkomposition und –malerei einsetzen. Eine große Auswahl an Malerwerkzeugen, wie Pinsel, Stift, Sprühpistole (Airbrush), Klonwerkzeug und vielen weiteren. Transformationswerkzeuge wie Rotieren, Skalieren, Scheren und Spiegeln, lesen und schreiben verschiedener Dateiformate wie beispielsweise GIF, JPEG, PNG, BMP und viele weitere. Und zu guter Letzt: Die Möglichkeit, GIMP durch verschiedenste Erweiterungen um neue Dateiformate, Filter und Funktionen zu bereichern.

Abbildung 5: Banner

2

o.V.: http://docs.gimp.org/de/introduction.html GNU Image Manipulation Program, ursprünglich: General Image Manipulation Program 4 Vollständig freies Betriebssystem, genannt GNU: GNU is not Unix 3

22


5.6 ER-Diagramme5 Ziel Daten eines Projektes werden in Entitäten und ihre Beziehungen zueinander definiert und abgebildet, um eine effiziente und performante Datenbankstruktur entwickeln zu können.

Beschreibung Eine klassische Form der Datenmodellierung sind Entity-RelationshipModelle6. Sie werden in der Anforderungsphase benutzt, um die Datenstruktur eines Systems aus einer Top-down-Perspektive zu beschreiben bzw. zu skizzieren. ER-Diagramme sind das wichtigste Tool, um die Daten eines Projektes in Entitäten zu unterteilen und ihre Beziehung zueinander zu definieren und abzubilden.

Basiskonzepte Grundlegendes Konzept der ER-Diagramm-Modellierung ist die Visualisierung von Daten und ihren Beziehungen. Zur Darstellung können mehrere Präsentationstypen dienen.

Abbildung 6: ER Diagramm

5

o.V.http://www.re-wissen.de/opencms/Wissen/Techniken/Entity-RelationshipDiagramme.html 6 auch ER-Diagramme genannt

23


5.7 PHP7 PHP ist eine Skriptsprache, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird. PHP wurde 1995 von Rasmus Lerdorf entwickelt. PHP war ursprünglich als Ersatz für eine Sammlung von Perl-Skripten gedacht. Bald schuf Lerdorf eine umfangreichere Version in der Programmiersprache C, in der PHP bis heute entwickelt wird. Das schließlich veröffentlichte PHP/FI. PHP ist die am häufigsten verwendete Sprache zum Erstellen von Websites, Tendenz steigend. Zudem ist sie bei den meisten Webhostern vorinstalliert.

So funktioniert es:

Abbildung 7: Darstellung der Funktionsweise von PHP

7

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

24


Ein Code Beispiel: Einfaches PHP-Skript (gibt „Hofladen!“ aus): <?php echo "Hofladen!"; ?> Das Skript in HTML integriert (gibt ebenfalls „Guten Morgen!“ auf der Webseite aus): <!DOCTYPE HTML> <html> <head> <title> Hofladen-Beispiel </title> </head> <body> <?php echo " Hofladen! "; ?> </body> </html> Der PHP-Interpreter interpretiert den Code zwischen <?php und ?>, der übrige Code (üblicherweise HTML) wird unverändert an den Client zurückgegeben.

25


5.8 HTML8 (Hyper Text Markup Language)9 Man bezeichnet HTML auch als Hypertext. Die aktuelle HTML Version trägt die Nummer 4.01 HTML5. HTML wurde 1990 von dem Wissenschaftler Tim Berners-Lee erfunden. Er legte mit dieser Erfindung den Grundstein des Internets. Wenn man eine Website erstellen möchte geht kein Weg an HTML vorbei. HTML ist eine Sprache, die es ermöglicht, Informationen im Internet auszugeben. Es strukturierte Inhalte wie Texte, Bilder und Hyperlinks sowie für beliebige Befehle für Formatierungen in Dokumenten.

Ein HTML-Dokument besteht aus drei Bereichen: 1. der Dokumenttypdeklaration, diese gibt die Dokumentdefinition an. 2. dem HTML-Kopf (HEAD), 3. dem HTML-Körper (BODY), der jene Informationen enthält, die gewöhnlicherweise im Anzeigebereich des Browsers zu sehen sind.

Abbildung 8: HTML

8

o.V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language Dt. Hypertext- Ausgangssprache

9

26


5.9 CSS10 CSS11 ist eine Sprache zum Formatieren von HTML/XHTML-Elementen. Verglichen mit den HTML-Formatierungen bietet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rahmen, Innen- und Außenabstä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 muss und diese für das gesamte Dokument, bzw. das gesamte Projekt gültig sind. Damit erreicht man ein über alle Seiten einheitliches Erscheinungsbild, was für einen gelungenen Webauftritt besonders wichtig ist. Natürlich lassen sich einzelne Tags auch direkt formatieren.

Abbildung 9: Css

10 11

o.V. http://www.css4you.de/wscss/css01.html Cascading Style Sheets

27


5.10 Videobearbeitung12 5.10.1 Allgemein Mit der Videobearbeitung wird das Ziel verfolgt, bewegte Bilder zu erstellen, die sich von dem Ausgangsmaterial unterscheiden. Als Ausgangsmaterial kommen dabei in Frage:      

Videoaufnahmen digitalisierte Fotos (auch eingescannte Unterlagen) Grafiken Texte Audioaufnahmen Musik

Die Bearbeitung beginnt mit dem Erfassen des Materials. Dabei müssen sowohl die bewegten Bilder als auch digitalisierte Fotos, Audios und sonstigen Quellen in das Format gewandelt werden, das von der jeweiligen Software, mit der die weitere Bearbeitung erfolgen soll, akzeptiert wird. Die Entwicklung der Software ermöglicht es heute auch dem Hobbyfilmer immer mehr, die einzelnen Bilder zu verändern. Dies dient einmal dazu, Fehler bei der Aufnahme zu korrigieren, und zum anderen, Effekte hinzuzufügen.

12

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

28


Hierzu gehören insbesondere folgende Veränderungen:       

Größe (Ausschnitt, Drehung, Position) Farbe (Art und Intensität – bis hin zum Schwarz-Weiß-Film –, Weißabgleich) Helligkeit Kontrast Schärfe Geschwindigkeit Spiegelung (waagerecht und senkrecht)

Das fertig bearbeitete Video lässt sich in einem beliebigen Videoformat speichern. Dabei haben einige Programme auch spezielle Funktionen für DVD-Authoring.

5.10.2 Windows Live Movie Maker13 Windows Live Movie Maker ist eine Videoschnittsoftware von Microsoft. Das Programm, das grundlegende Funktionen zum Erstellen von Filmen und Musik bietet, kann als Teil des Windows Essentials-Pakets über die Microsoft-Webseite kostenlos bezogen werden. In älteren WindowsVersionen war es Bestandteil des Betriebssystems. Im Vergleich zum Vorgänger ist Movie Maker 14 ein besseres Präsentationsprogramm für Fotos. Neben der neuen Oberfläche werden neue Möglichkeiten eröffnet, wie zum Beispiel das bearbeitete Video auf YouTube zu veröffentlichen oder HD-Videos zu erstellen.

Abbildung 10: Windows Movie Maker

13

o.V. http://de.wikipedia.org/wiki/Windows_Live_Movie_Maker

29


6 Aufbau der Homepage 6.1 Template Nach der Besprechung, mit der Auftraggeberin versuchten wir ein passendes Template zu finden. Wir fanden sehr schnell ein geeignetes, welches mit den Wünschen der Auftraggeberin übereinstimmte.

Abbildung 11: Template

Wir änderten den Banner, die Schriftarten und die Farben. Die Seite Home beschreibt den Hofladen und die Besitzer. Wir haben uns für ein Fote der Auftraggeberin und ihrem Mann auf dieser Seite entschieden, da es einen netten Eindruck hinterlässt. Wir haben den Menüpunkt home gestrichen und die Funktion auf den Banner gelegt, das bedeutet, wenn man auf den Banner klickt,dann kommt man auf die Home Seite.

Abbildung 12: Website

30


6.2 Seite „Jahresüberblick“ Diese Seite gibt einen Überblick über die Termine des Hofladens und der dazugehörigen Produkte. Wir haben uns entschieden den Überblick als Tabelle zu formatieren, da es am Übersichtlichsten ist.

Abbildung 13: Jahresüberblick

31


6.3 Seite „Produktliste“ Diese Seite gibt einen Überblick über die erwerbbaren Produkte. Wir entschieden uns nach den Angaben der Auftraggeberin die Produktliste mit Aufzählungspunkten zu versehen. Sie wollte nur die Kategorien mit Bildern aufgelistet haben, keine spezifische darstellung mit Preisen.

Abbildung 14: Produktliste

Um eine präzise Aufteilung der Bilder und Aufzählungszeichen zu erreichen, verpackten wir es in einer Tabelle.

Abbildung 15: HTML Befehle für die Tabelle

32


6.4 Seite „Fotogalerie“ Bei der Seite Fotogalerie entschied sich die Auftraggeberin für einen virtuellen Rundgang in Form eines Videos. Es sollte mit der von ihr zur Verfügung gestellten Musik unterlegt werden.

Abbildung 16: Fotogalerie

Es wurden viele Animationen, wie zum Beispiel schwenken, vergrößern oder verkleinern, verwendet, die Übergänge wurden von der Auftraggeberin gestrichen, da es sonst zu überladen wirke.

Abbildung 17. Bearbeitung mit Movie Maker

33


6.5 Seite „Kontakt“ Bei der Seite Kontakt haben wir uns für den Google-Anfahrtsplan entschieden, da er effiziente Ergebnisse erzielt und wunderbar für die Besucher der Seite zu benutzen ist. Außerdem haben wir uns bei dieser Seite für eine andere, fixe Seidebar entschieden. Uns war hier wichtig, dass die Kontaktinformationen der Auftraggeberin hervorgehoben werden.

Abbildung 18: Kontakt

34


6.6 „Sidebar“ Die Sidebar soll wichtige und aktuelle Informationen anzeigen. Sie kann jederzeit für alle Seiten, bis auf Kontakt, geändert werden. Sie wurde mittels eines INCLUDE Befehles auf die Webseiten eingebunden.

Abbildung 19: Sidebar

Abbildung 20: PHP Befehle für die Sidebar

35


7 Nachwort Anfangs wussten wir noch nicht, welches Maturaprojekt wir in Angriff nehmen sollten. Wir schwankten stark zwischen einem Video und einer Website, doch diese Entscheidung wurde uns Gottseidank von der Auftraggeberin abgenommen. Durch Zufall erfuhren wir, dass Jutta Nifergall, die Auftraggeberin, schon seit längerem jemanden für die Gestaltung ihrer Webseite suchte. Diese Gelegenheit ergriffen wir sofort und unsere Projektidee war geboren. Das Projekt stellte für uns eine große Herausforderung da, bei der wir uns weiterentwickeln und unser Wissen umsetzen konnten. Insgesamt war es eine sehr fordernde Aufgabe, die wir hoffentlich zur Zufriedenheit unserer Auftraggeberin erfüllt haben.

36


8 Literaturverzeichnis Template http://www.freecsstemplates.org Projektmanagement http://de.wikipedia.org/wiki/Projektmanagement GIMP http://docs.gimp.org/de/introduction.html ER-Diagramme http://www.re-wissen.de/opencms/Wissen/Techniken/EntityRelationship-Diagramme.html PHP http://de.wikipedia.org/wiki/Php HTML http://de.wikipedia.org/wiki/Hypertext_Markup_Language CSS http://www.css4you.de/wscss/css01.html Videobearbeitung http://de.wikipedia.org/wiki/Videobearbeitung Windows live Moviemaker http://de.wikipedia.org/wiki/Windows_Live_Movie_Maker

37


Zu den Jahreszeiten  

Fachspezifische Themenstellung der Matura 2013 am PANNONEUM

Advertisement
Read more
Read more
Similar to
Popular now
Just for you