Issuu on Google+

BIBER-PUB 2011/12

Auftraggeber: Hannes Buchegger Projektleiterin: Sabrina Scheck Teammitglied: Melanie Moina


INHALTSVERZEICHNIS 1. Vorwort.................................................................................................... 3 2. Preface..................................................................................................... 4 3. Projektmanagement ................................................................................ 5 3.1.

Projektdefinition.......................................................................................................... 5

3.2.

Ablauf eines Projekts ................................................................................................... 6

Projektphasen.................................................................................................................................. 6 Inhalte/Hinweise ............................................................................................................................. 6

3.3.

Projektteam ................................................................................................................. 7

3.4.

Start- und Endtermin ................................................................................................... 7

3.5.

Projektstrukturplan (PSP) ............................................................................................ 8

3.6.

Meilensteine ................................................................................................................ 9

3.7.

Arbeitspakete .............................................................................................................. 9

3.8.

Corporate Design....................................................................................................... 14

4. Grundlagen .............................................................................................15 4.1.

HTML-Editor............................................................................................................... 16

4.2.

Java-Script.................................................................................................................. 17

4.3.

Gimp........................................................................................................................... 18

4.4.

Dia .............................................................................................................................. 19

4.5.

PDF............................................................................................................................. 20

4.6.

CSS ............................................................................................................................. 21

5. Aufbau der Homepage ............................................................................22 5.1.

Template.................................................................................................................... 22

5.2.

Erste Seite: „Home“ ................................................................................................... 23

5.3.

Zweite Seite: „Bildergalerie“ ..................................................................................... 24

5.4.

Dritte Seite: „Menü & Angebot“................................................................................ 25

5.5.

Vierte Seite: „Events“ ................................................................................................ 26

5.6.

Fünfte Seite: „Kontakt“.............................................................................................. 27

6. Nachwort ................................................................................................28 7. Abbildungsverzeichnis.............................................................................29 8. Literaturverzeichnis.................................................................................30 2|Seite

Sabrina Scheck | Melanie Moina


1. VORWORT

Im Zuge unseres Ausbildungsschwerpunktes Information and Communication Solutions haben wir uns dazu entschieden, eine Webseite mittels eines HTML Programms zu gestalten. Wir entwarfen eine Homepage für das Restaurant „Biber Pub“ in Neusiedl am See. Unser Auftraggeber und Besitzer des Restaurants, Hannes Buchegger war sofort damit einverstanden. Mit diesem Projekt konnten wir unsere, in den letzten drei Jahren, erlernten Fähigkeiten und Kenntnisse praktisch umsetzten. Wir hoffen, das Ergebnis unserer Homepage entspricht den Vorstellungen unseres Auftraggebers. Auf den folgenden Seiten finden Sie eine genaue Dokumentation unserer Arbeit.

3|Seite

Sabrina Scheck | Melanie Moina


2. PREFACE

In the course of our training priority Information & Communication Solutions (ICS) we decided to generate a website by using a HTML-Program. We created a homepage for the restaurant “Biber Pub� in Neusiedl am See. Our applicant and owner of the restaurant, Hannes Buchegger, immediately agreed. With this project we were able to convert our skills and knowledge of the last three years. We hope the result of our project corresponds to the imagination of our applicant. On the following pages you will find a detailed documentation of our work.

4|Seite

Sabrina Scheck | Melanie Moina


3. PROJEKTMANAGEMENT 3.1.

Projektdefinition

Ein Projekt ist ein einmaliger Prozess mit einem bestimmten Start- und Endtermin zur Erreichung von definierten Zielen. Es gibt verschiedene Strukturen und Methoden des Projektmanagements für die, teilweise eigene, Vorgehensmodelle existieren.

Ein Projekt soll eine Aufgabe lösen, die zeitliche begrenzt ist konkrete Ziele verfolgt einzigartig, komplex und manchmal riskant ist, beschränkte Ressourcen zur Verfügung hat, von mindestens zwei Mitarbeitern durchgeführt wird, gegenüber anderen Tätigkeiten abgegrenzt ist und einer Projektspezifischen Organisation unterliegt.

5|Seite

Sabrina Scheck | Melanie Moina


3.2.

Ablauf eines Projekts

Projektphasen

Inhalte/Hinweise

Projekteinführung

Rahmenthema (Offene Ausgangssituation) Ideen schriftlich fixieren Erörterung der Projektidee (pro/kontra) Betätigungswünsche der Teilnehmer Mögliches Ergebnis

Projektplanung

Zielvereinbarung (Inhalt, Zeit, Kosten) Problem- und Aufgabenanalyse Ablauf- und Zeitplanung Aufgabenverteilung Dokumentationsplanung

Projektdurchführung

Informationsbeschaffung (Sichtung undBestimmung der Infoquellen) Informationsbearbeitung Informationsauswertung

Projektabschluss

Wie, wann, wo ist das Projekt abzuschließen? Einbeziehung der Öffentlichkeit Vorstellung des Produkts bzw. Abschluss der Aktion

Projektreflexion

Wurden die Ziele erreicht? Welche Schwierigkeiten gab es auf der Inhalts- und Beziehungsebene? Was können wir beim nächsten Projekt besser machen?

6|Seite

Sabrina Scheck | Melanie Moina


3.3.

Projektteam

Projektauftraggeber: Hannes Buchegger Projektleiterin: Sabrina Scheck Projektmitglied: Melanie Moina Projektauftrag: Webseite f체r das Restaurant Biber-Pub Neusiedl am See

3.4.

Start- und Endtermin

Starttermin: 8.9.2011

Besprechung mit dem Projektauftraggeber

Endtermin: 30.3.2012 Pr채sentation vor der Maturakommission

7|Seite

Sabrina Scheck | Melanie Moina


3.5.

Projektstrukturplan (PSP)

Der PSP wird auch als „der Plan der Pläne“ im Projektmanagement bezeichnen. Im Projektstrukturplan wird die Problemstellung in Teilaufgaben, den Meilensteinen, mit Arbeitspaketen gegliedert.

Abbildung 1: Projektstrukturplan

8|Seite

Sabrina Scheck | Melanie Moina


3.6.

Meilensteine

3.7.

Arbeitspakete

sind Zwischenziele eines Projektes und sind sehr wichtig, da sie den gesamten Ablauf in mehrere kleine Überschaubare Etappen einteilen.

Jedes Arbeitspaket hat PSP-Code und muss ein klar definiertes Ziel haben. Es muss festgehalten werden, wer für die Einhaltung von Terminen verantwortlich ist.

Meilenstein 1: Analyse des Ist-Zustandes liegt vor Arbeitspaket:

1.1 Auftraggeber suchen

Ziele:

Auftraggeber finden, Zustimmung für Webseite bekommen

Nicht-Ziele:

keine Umsetzmöglichkeiten

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

08.09.2011

Meilenstein 2: Konzept erstellen Arbeitspaket:

2.1 Auftraggeber kontaktieren

Ziele:

Auftraggeber anrufen, Termin vereinbaren

Nicht-Ziele:

keine Übereinstimmungen

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

16.09.2011

benötigte Ressourcen: Laptop, Coorperate-Design

9|Seite

Sabrina Scheck | Melanie Moina


Arbeitspaket:

2.2 Ideen besprechen

Ziele:

Ideen, Farben und Coorperate-Design mit Auftraggeber besprechen

Nicht-Ziele:

Uneinigkeit

Zuständige:

Sabrina Scheck

Ende:

16.09.2011

Meilenstein 3: Unterlagen Sammeln Arbeitspaket:

3.1 Texte von Auftraggeber besorgen

Ziele:

Informationen, Texte, Bilder, Adresse beschaffen

Nicht-Ziele:

keine Ideen

Zuständige:

Sabrina Scheck

Ende:

21.10.2011

Arbeitspaket:

3.2 Texte umschreiben

Ziele:

Information, Texte bearbeiten

Nicht-Ziele:

keine Übereinstimmungen

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

21.10.2011

benötigte Ressourcen: Laptop, Word

10 | S e i t e

Sabrina Scheck | Melanie Moina


Arbeitspaket:

3.3 Bilder bearbeiten

Ziele:

Bilder erstellen und bearbeiten

Nicht-Ziele:

schlechte Umsetzung

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

21.10.2011

benötigte Ressourcen: Laptop, Gimp

Meilenstein 4: Entwurf der Webseite erstellen Arbeitspaket:

4.1 Template suchen

Ziele:

passendes Template finden

Nicht-Ziele:

Template kaufen

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

04.10.2011

benötigte Ressourcen: Internet, Laptop

Arbeitspaket:

4.2 Template anpassen

Ziele:

Template bearbeiten, Texte und Bilder einfügen, Hauptmenü erstellen

Nicht-Ziele:

Probleme beim bearbeiten

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

18.10.2011

benötigte Ressourcen: Laptop, HTML Editor, Bilder, Texte

11 | S e i t e

Sabrina Scheck | Melanie Moina


Arbeitspaket:

4.3 Design

Ziele:

Template mit Konzept übereinstimmen

Nicht-Ziele:

unpassendes Design

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

25.10.2011

benötigte Ressourcen: Laptop, HTML-Editor

Meilenstein 5: Webseite überarbeiten Arbeitspaket:

5.1 Webseite fertigstellen

Ziele:

sicherstellen dass die Webseite funktioniert

Nicht-Ziele:

unfertige Webseite

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

13.01.2012

benötigte Ressourcen: Laptop, Internet

Arbeitspaket:

5.2 Webseite präsentieren

Ziele:

Webseite den Auftraggeber präsentieren

Nicht-Ziele:

Auftraggeber ist unzufrieden

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

02.02.2012

benötigte Ressourcen: Laptop, Internet

12 | S e i t e

Sabrina Scheck | Melanie Moina


Meilenstein 6: Webseite veröffentlichen Arbeitspaket:

6.1 Webseite online stellen

Ziele:

für alle Internetbenutzer zugänglich machen

Nicht-Ziele:

Webseite unfertig onlinestellen, keine Veröffentlichung möglich

Zuständige:

Sabrina Scheck, Melanie Moina

Ende:

30.03.2012

benötigte Ressourcen: Laptop, Internet

13 | S e i t e

Sabrina Scheck | Melanie Moina


3.8.

Corporate Design

Zielgruppe: Erwachsene, Jugendliche, Familien, OBI-Kunden und Mitarbeiter Bilder: Logos (Biber), Fotos vom Restaurant Schriften: Tahoma, Geneva, sans-serif Farben:dunkel- und hellbraun, beige, weiß

Logo:

#3A3323 RGB 58,51,35 HSL 0.12, 0.25, 0.18 HSV 42°, 40°, 23° CMYK 0.00,0.12,0.40, 0.77

#FFFCCC RGB 255,252,204 HSL0.16, 1.00, 0.90 HSV 56°, 20°, 100° CMYK 0.00, 0.01, 0.20, 0.00

#9C6963 RGB 156,105,99 HSL 0.02, 0.22, 0.50 HSV 6°, 37°, 61° CMYK 0.00, 0.33, 0.37, 0.39

14 | S e i t e

Sabrina Scheck | Melanie Moina


4. GRUNDLAGEN

15 | S e i t e

Sabrina Scheck | Melanie Moina


4.1.

HTML-Editor1

in HTML-Editor ist ein Computerprogramm, mit dem man Internetseiten mit HTML-Code erstellen und ändern kann. Dabei unterscheidet man textbasierte Programme, bei denen direkt der Quellcode editiert wird, und so genannte WYSIWYG-Editoren, bei denen die Seite beim Bearbeiten so angezeigt wird, wie sie der Browser später darstellt bzw. darstellen sollte. Häufig ermöglichen WYSIWYG-Editoren, den Quellcode auch direkt zu bearbeiten. Einige Editoren können auch mit auf Webservern eingesetzten Scriptsprachen, wie zum Beispiel PHP, umgehen. Gute HTML-Editoren besitzen eine so genannte Syntaxhervorhebung, welche Tags im Quellcode farblich kenntlich macht. Die besten dieser Programme unterstützen auch Autovervollständigen. HTML-Code kann aber auch in jedem normalen Texteditor geschrieben werden.

Abbildung 2: HTML-Editor

1

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

16 | S e i t e

Sabrina Scheck | Melanie Moina


4.2.

Java-Script2

JavaScript ist eine Skriptsprache, die hauptsächlich für das DOM-Scripting in Web-Browsern eingesetzt wird. Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Sie wird allen objektorientierten Programmierparadigmen unter anderem auf der Basis von Prototypen gerecht. In JavaScript lässt sich objektorientiert und sowohl prozedural als auch funktional programmieren. Während HTML/CSS nur rudimentäre Möglichkeiten zur Nutzerinteraktion bietet, können mit JavaScript Inhalte generiert und nachgeladen werden. Typische Anwendungsgebiete von JavaScript sind: Dynamische Manipulation von Webseiten über das Document Object Model Plausibilitätsprüfung (Validierung) von Formulareingaben beim Absender Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (Ajax) sofortiges Vorschlagen von Suchbegriffen (suggesting search) Banner oder Laufschriften Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam. Mehrere Frames auf einmal wechseln oder die Seite aus dem Frameset „befreien“

2

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

17 | S e i t e

Sabrina Scheck | Melanie Moina


4.3.

Gimp3

GIMP (Image Manipulation Program, ursprünglich: General Image Manipulation Program) ist ein kostenloses und freiesBildbearbeitungsprogramm. Es steht unter der GNU General Public License (GPL). Der Schwerpunkt der Software ist die intensive Bearbeitung einzelner Bilder, wofür vielfältige Effekte zur Verfügung stehen. Die Bearbeitungsfunktionen sind über Werkzeugleisten, Menüs und dauerhaft eingeblendete Dialogfenster zu erreichen. Diese enthalten sogenannte Filter für grafische Effekte, zudem Pinsel sowie Umwandlungs-, Auswahl-, Ebenenund Maskierungsfunktionen. Zum Standardumfang gehören derzeit 48 verschiedene Pinsel, weitere lassen sich erzeugen, zudem sind alle bezüglich Kantenschärfe und Deckung einstellbar.

Abbildung 3: Gimp

3

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

18 | S e i t e

Sabrina Scheck | Melanie Moina


4.4.

Dia4

Dia ist ein Diagramm-, Zeichen- und Illustrationsprogramm sowie UMLWerkzeug, welches zum Gnome-Projekt gehört und unter der GNU General Public License steht. Dia dient dazu verschiedene Abläufe und Strukturen – vornehmlich in Form von Diagrammen – visuell darzustellen. Hierzu können verschiedene Vorlagen mit passenden Werkzeugen und Symbolen, beispielsweise für Programmablaufpläne und Geschäftsprozesse, verwendet und diese per Drag and Drop auf ein Dokument gezogen werden. Die Funktionalität von Dia ist bedingt mit dem proprietären Programm Visio vergleichbar. Für die Erstellung strukturierter Diagramme stehen Standardobjekte zur Verfügung, mit dessen Hilfe komplexe Strukturen aufgebaut werden können. So gibt es unter anderem Modi für Flussdiagramme (englisch Flowchart), Netzwerkund UML-Diagramme. Es gibt jedoch auch einige generische Funktionen, mit denen einfache Zeichnungen erstellt werden können.

4

Abbildung 4: Dia http://de.wikipedia.org/wiki/Dia_%28Software%29

19 | S e i t e

Sabrina Scheck | Melanie Moina


4.5.

PDF5

Das Portable Document Format (PDF) ist ein plattformunabhängigesDateiformat für Dokumente, das vom Unternehmen Adobe Systems entwickelt und 1993 veröffentlicht wurde. Ziel war es, ein Dateiformat für elektronische Dokumente zu schaffen, das diese unabhängig vom ursprünglichen Anwendungsprogramm, vom Betriebssystem oder von der Hardwareplattform originalgetreu weitergeben kann. Ein Leser einer PDF-Datei soll das Dokument immer in der Form betrachten und ausdrucken können, die der Autor festgelegt hat. Die typischen Konvertierungsprobleme (wie zum Beispiel veränderter Seitenumbruch oder falsche Schriftarten) beim Austausch eines Dokuments zwischen verschiedenen Anwendungsprogrammen entfallen. Neben Text, Bildern und Grafik kann eine PDF-Datei auch Hilfen enthalten, die die Navigation innerhalb des Dokumentes erleichtern. Dazu gehören zum Beispiel anklickbare Inhaltsverzeichnisse und miniaturisierte Seitenvorschauen. PDF ist mittlerweile weit verbreitet und wird z. B. von vielen elektronischen Zeitschriften (E-Journals) genutzt. Mittlerweile gibt es auf dem Markt zahlreiche Softwareprodukte, die Dateien als PDF erzeugen können, wenn sie auch nicht immer den vollen Funktionsumfang von Adobe Acrobat bieten.

Abbildung 5: PDF

5

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

20 | S e i t e

Sabrina Scheck | Melanie Moina


4.6.

CSS6

Die Cascading Style Sheetskurz CSS genannt, sind quasi eine deklarative Sprache für Stilvorlagen (stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XMLeingesetzt. Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhaltliche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu beschreiben, während mittels CSS weitgehend unabhängig davon die konkrete Darstellung (Farben, Layout, Schrifteigenschaften usw.) der Teile festgelegt wird. Elemente eines Dokumentes können z. B. aufgrund ihres Elementnamens (z. B. alle Linkelemente), ihrer ID oder auch aufgrund ihrer Position in diesem Dokument identifiziert werden. Mithilfe von CSS-Regeln können deshalb für jedes Element die konkreten Werte für bestimmte Darstellungsattribute festgelegt werden. Diese Festlegungen können an zentraler Stelle erfolgen, ggf. sogar in einem separaten Dokument, was ihre Wiederverwendung für andere Dokumente erleichtert. Daneben enthält CSS ein Vererbungsmodell für Auszeichnungsattribute – deshalb cascading – das die Anzahl nötiger Definitionen vermindert. CSS ermöglicht allenfalls auch die diskretionäre Auszeichnung von Teilen eines Dokuments. Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung die Anzeige mit Rücksicht auf die geringere Seitenbreite und -höhe anzupassen. Neben verschiedenen Möglichkeiten, Farben und Schriften einzustellen, erlaubt CSS auch, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. CSS gilt heute als die Standard-Stylesheetsprache für Webseiten.

6

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

21 | S e i t e

Sabrina Scheck | Melanie Moina


5. AUFBAU DER HOMEPAGE 5.1.

Template

Nachdem wir das Konzept erstellt hatten, suchten wir nach einem passenden Template. Da wir uns entschieden haben, unsere Homepage mit HTML zu entwerfen, haben wir auf www.templatemo.com ein Template gefunden, welches unseren Vorstellungen entsprach. Das von uns gewählte Template heiĂ&#x;t: Sandy Theme

Abbildung 6: Template

22 | S e i t e

Sabrina Scheck | Melanie Moina


5.2.

Erste Seite: „Home“

Die erste Seite gibt Informationen über das Restaurant und heißt die Homepagebesucher willkommen. Das Markenzeichen des Biber-Pub’s sind Cartoon-biber. Diese wurden von unserem Auftraggeber gekauft, sie gehören rechtmäßig ihm.

Abbildung 7: Home

23 | S e i t e

Sabrina Scheck | Melanie Moina


5.3.

Zweite Seite: „Bildergalerie“

Diese Seite soll einen Einblick in das Restaurant bieten. Wir fotografierten das Biber-Pub von innen und von außen.

Abbildung 8:Bildergalerie

24 | S e i t e

Sabrina Scheck | Melanie Moina


5.4.

Dritte Seite: „Menü & Angebot“

Die Seite Menü & Angebot gibt Information über die Öffnungszeiten und über die Speisenangebote.

Abbildung 9:Menü & Angebot

Am Ende dieser Seite haben wir einen Link erstellt, der eine PDF-Datei öffnet, auf der die Wochenmenüs aufgelistet sind.

Abbildung 10: Menü & Bestellung

25 | S e i t e

Sabrina Scheck | Melanie Moina


5.5.

Vierte Seite: „Events“

Da im Biber-Pub auch verschiedene Veranstaltungen und Karaoke Abende stattfinden, erstellten wir die Seite: Events. Dort findet man Informationen über Events, man kann das Lokal auch für Privat- und Firmenfeiern buchen.

Abbildung 11: Events

26 | S e i t e

Sabrina Scheck | Melanie Moina


5.6.

Fünfte Seite: „Kontakt“

Hier findet man Kontaktinformationen über das Restaurant wie Adresse, Mobil, E-Mail und ein Kontaktformular, bei dem der Besucher uns über seine Anliegen oder Beschwerden informieren kann.

Abbildung 12: Kontakt

27 | S e i t e

Sabrina Scheck | Melanie Moina


6. NACHWORT

Am Anfang unserer Arbeit wussten wir noch nicht für wen wir eine Webseite erstellen sollen. Nach langer Suche fanden wir schließlich einen passenden Auftraggeber. Wir versuchten anfangs die Webseite mit einem uns unbekannten CMSProgramm zu gestalten, jedoch weißte sich dies als Problem auf. Nach langem hin und her entschieden wir uns dann doch für das HTML Programm „Phase 5“. Da wir aufgrund unserer Anfangsschwierigkeiten im Rückstand lagen mussten wir die verlorene Zeit so schnell wie möglich wieder nachholen. Zum Glück gelang es uns die Webseite rechtzeitig fertig zu stellen. Wir sind stolz auf unsere Webseite, die wir mit harter Arbeit unter den Vorstellungen und mit Hilfe unseres Arbeitgebers gestaltet haben.

28 | S e i t e

Sabrina Scheck | Melanie Moina


7. ABBILDUNGSVERZEICHNIS

Abbildung 1: Projektstrukturplan ....................................................................... 8 Abbildung 2: HTML-Editor ................................................................................ 16 Abbildung 3: Gimp............................................................................................ 18 Abbildung 4: Dia............................................................................................... 19 Abbildung 5: PDF.............................................................................................. 20 Abbildung 6: Template ..................................................................................... 22 Abbildung 7: Home .......................................................................................... 23 Abbildung 8:Bildergalerie ................................................................................. 24 Abbildung 9:Men端 & Angebot.......................................................................... 25 Abbildung 10: Men端 & Bestellung.................................................................... 25 Abbildung 11: Events........................................................................................ 26 Abbildung 12: Kontakt...................................................................................... 27

29 | S e i t e

Sabrina Scheck | Melanie Moina


8. LITERATURVERZEICHNIS

HTML-Editor

http://de.wikipedia.org/wiki/HTML-Editor Java-Script http://de.wikipedia.org/wiki/JavaScript Gimp http://de.wikipedia.org/wiki/GIMP Dia http://de.wikipedia.org/wiki/Dia_%28Software%29 PDF http://de.wikipedia.org/wiki/Portable_Document_Format Css http://de.wikipedia.org/wiki/Cascading_Style_Sheets

30 | S e i t e

Sabrina Scheck | Melanie Moina


Fachspezifische Themenstellung