Fachspezifische Themenstellung Biber-Pub

BIBER-PUB2011/12

Auftraggeber:Hannes Buchegger

Projektleiterin:Sabrina Scheck

Teammitglied:Melanie Moina

BIBER-PUB2011/12




BIBER-PUB2011/12




2 | S e i t e Sabrina Scheck | Melanie Moina

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


1. VORWORT

Im Zuge unseres Ausbildungsschwerpunktes Information and CommunicationSolutions haben wir uns dazu entschieden, eine Webseite mittels eines HTMLProgramms zu gestalten.

Wir entwarfen eine Homepage für das Restaurant „Biber Pub“ in Neusiedl amSee. Unser Auftraggeber und Besitzer des Restaurants, Hannes Buchegger warsofort damit einverstanden. Mit diesem Projekt konnten wir unsere, in denletzten drei Jahren, erlernten Fähigkeiten und Kenntnisse praktisch umsetzten.

Wir hoffen, das Ergebnis unserer Homepage entspricht den Vorstellungenunseres Auftraggebers.

Auf den folgenden Seiten finden Sie eine genaue Dokumentation unsererArbeit.


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, immediatelyagreed. With this project we were able to convert our skills and knowledge ofthe last three years.

We hope the result of our project corresponds to the imagination of ourapplicant.

On the following pages you will find a detailed documentation of our work.


3. PROJEKTMANAGEMENT3.1. Projektdefinition

Ein Projekt ist ein einmaliger Prozess mit einem bestimmten Start- undEndtermin zur Erreichung von definierten Zielen.

Es gibt verschiedene Strukturen und Methoden des Projektmanagements fürdie, 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.


3.2. Ablauf eines Projekts

Projektphasen Inhalte/Hinweise

Projekteinführung Rahmenthema (OffeneAusgangssituation)Ideen schriftlich fixierenErörterung der Projektidee(pro/kontra)Betätigungswünsche der TeilnehmerMögliches Ergebnis

Projektplanung Zielvereinbarung (Inhalt, Zeit, Kosten)Problem- und AufgabenanalyseAblauf- und ZeitplanungAufgabenverteilungDokumentationsplanung

Projektdurchführung Informationsbeschaffung(Sichtung undBestimmung derInfoquellen)InformationsbearbeitungInformationsauswertung

Projektabschluss Wie, wann, wo ist das Projektabzuschließen?Einbeziehung der ÖffentlichkeitVorstellung des Produkts bzw.Abschlussder Aktion

Projektreflexion Wurden die Ziele erreicht?Welche Schwierigkeiten gab es auf derInhalts- und Beziehungsebene?Was können wir beim nächstenProjektbesser machen?


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


3.5. Projektstrukturplan (PSP)

Der PSP wird auch als „der Plan der Pläne“ im Projektmanagement bezeichnen.

Im Projektstrukturplan wird die Problemstellung in Teilaufgaben, denMeilensteinen, mit Arbeitspaketen gegliedert.

Abbildung 1: Projektstrukturplan


3.6. Meilensteine

sind Zwischenziele eines Projektes und sind sehr wichtig, da sie dengesamten Ablauf in mehrere kleine Überschaubare Etappen einteilen.3.7. Arbeitspakete

Jedes Arbeitspaket hat PSP-Code und muss ein klar definiertes Ziel haben.Es muss festgehalten werden, wer für die Einhaltung von Terminenverantwortlich 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


Ende: 16.09.2011

benötigte Ressourcen: Laptop, Coorperate-Design


Arbeitspaket: 2.2 Ideen besprechen

Ziele: Ideen, Farben und Coorperate-Design mit Auftraggeberbesprechen

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


Ende: 21.10.2011

benötigte Ressourcen: Laptop, Word


Arbeitspaket: 3.3 Bilder bearbeiten

Ziele: Bilder erstellen und bearbeiten

Nicht-Ziele: schlechte Umsetzung


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


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


Ende: 18.10.2011

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


Arbeitspaket: 4.3 Design

Ziele: Template mit Konzept übereinstimmen

Nicht-Ziele: unpassendes Design


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


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


Ende: 02.02.2012



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öffentlichungmöglich


Ende: 30.03.2012



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:

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

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

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


4. GRUNDLAGEN


4.1. HTML-Editor1

in HTML-Editor ist ein Computerprogramm, mit dem man Internetseiten mitHTML-Code erstellen und ändern kann. Dabei unterscheidet man textbasierteProgramme, bei denen direkt der Quellcode editiert wird, und so genannteWYSIWYG-Editoren, bei denen die Seite beim Bearbeiten so angezeigt wird, wiesie der Browser später darstellt bzw. darstellen sollte. Häufig ermöglichen WY-SIWYG-Editoren, den Quellcode auch direkt zu bearbeiten. Einige Editoren kön-nen auch mit auf Webservern eingesetzten Scriptsprachen, wie zum BeispielPHP, umgehen. Gute HTML-Editoren besitzen eine so genannte Syntaxhervor-hebung, welche Tags im Quellcode farblich kenntlich macht. Die besten dieserProgramme unterstützen auch Autovervollständigen.HTML-Code kann aber auch in jedem normalen Texteditor geschrieben werden.

Abbildung 2: HTML-Editor

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


4.2. Java-Script2

JavaScript ist eine Skriptsprache, die hauptsächlich für das DOM-Scripting inWeb-Browsern eingesetzt wird.

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript be-schreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skript-sprache. Sie wird allen objektorientierten Programmierparadigmen unter ande-rem auf der Basis von Prototypen gerecht. In JavaScript lässt sich objektorien-tiert und sowohl prozedural als auch funktional programmieren.

Während HTML/CSS nur rudimentäre Möglichkeiten zur Nutzerinteraktion bie-tet, können mit JavaScript Inhalte generiert und nachgeladen werden.

Typische Anwendungsgebiete von JavaScript sind:

Dynamische Manipulation von Webseiten über das Document ObjectModel

Plausibilitätsprüfung (Validierung) von Formulareingaben beim Absender

Senden und Empfangen von Daten, ohne dass der Browser die Seite neuladen 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“

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


4.3. Gimp3

GIMP (Image Manipulation Program, ursprünglich: General Image ManipulationProgram) ist ein kostenloses und freiesBildbearbeitungsprogramm. Es steht un-ter 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 dauerhafteingeblendete Dialogfenster zu erreichen. Diese enthalten sogenannte Filterfür grafische Effekte, zudem Pinsel sowie Umwandlungs-, Auswahl-, Ebenen-und Maskierungsfunktionen. Zum Standardumfang gehören derzeit 48 ver-schiedene Pinsel, weitere lassen sich erzeugen, zudem sind alle bezüglich Kan-tenschärfe und Deckung einstellbar.

Abbildung 3: Gimp

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


4.4. Dia4

Dia ist ein Diagramm-, Zeichen- und Illustrationsprogramm sowie UML-Werkzeug, welches zum Gnome-Projekt gehört und unter der GNU GeneralPublic License steht.

Dia dient dazu verschiedene Abläufe und Strukturen – vornehmlich in Form vonDiagrammen – visuell darzustellen. Hierzu können verschiedene Vorlagen mitpassenden Werkzeugen und Symbolen, beispielsweise für Programmablaufplä-ne und Geschäftsprozesse, verwendet und diese per Drag and Drop auf ein Do-kument gezogen werden. Die Funktionalität von Dia ist bedingt mit dem prop-rietä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 gibtes unter anderem Modi für Flussdiagramme (englisch Flowchart), Netzwerk-und UML-Diagramme. Es gibt jedoch auch einige generische Funktionen, mitdenen einfache Zeichnungen erstellt werden können.

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


4.5. PDF5

Das Portable Document Format (PDF) ist ein plattformunabhängi-gesDateiformat für Dokumente, das vom Unternehmen Adobe Systems entwi-ckelt und 1993 veröffentlicht wurde.

Ziel war es, ein Dateiformat für elektronische Dokumente zu schaffen, das dieseunabhängig vom ursprünglichen Anwendungsprogramm, vom Betriebssystemoder von der Hardwareplattform originalgetreu weitergeben kann. Ein Lesereiner PDF-Datei soll das Dokument immer in der Form betrachten und ausdru-cken können, die der Autor festgelegt hat. Die typischen Konvertierungsprob-leme (wie zum Beispiel veränderter Seitenumbruch oder falsche Schriftarten)beim Austausch eines Dokuments zwischen verschiedenen Anwendungspro-grammen entfallen.

Neben Text, Bildern und Grafik kann eine PDF-Datei auch Hilfen enthalten, diedie Navigation innerhalb des Dokumentes erleichtern. Dazu gehören zum Bei-spiel anklickbare Inhaltsverzeichnisse und miniaturisierte Seitenvorschauen.

PDF ist mittlerweile weit verbreitet und wird z. B. von vielen elektronischenZeitschriften (E-Journals) genutzt. Mittlerweile gibt es auf dem Markt zahlrei-che Softwareprodukte, die Dateien als PDF erzeugen können, wenn sie auchnicht immer den vollen Funktionsumfang von Adobe Acrobat bieten.

Abbildung 5: PDF

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


4.6. CSS6

Die Cascading Style Sheetskurz CSS genannt, sind quasi eine deklarative Spra-che für Stilvorlagen (stylesheets) von strukturierten Dokumenten. Sie wird vorallem zusammen mit HTML und XMLeingesetzt.

Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhalt-liche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu be-schreiben, während mittels CSS weitgehend unabhängig davon die konkreteDarstellung (Farben, Layout, Schrifteigenschaften usw.) der Teile festgelegtwird. Elemente eines Dokumentes können z. B. aufgrund ihres Elementnamens(z. B. alle Linkelemente), ihrer ID oder auch aufgrund ihrer Position in diesemDokument identifiziert werden. Mithilfe von CSS-Regeln können deshalb fürjedes Element die konkreten Werte für bestimmte Darstellungsattribute festge-legt werden. Diese Festlegungen können an zentraler Stelle erfolgen, ggf. sogarin einem separaten Dokument, was ihre Wiederverwendung für andere Doku-mente erleichtert. Daneben enthält CSS ein Vererbungsmodell für Auszeich-nungsattribute – deshalb cascading – das die Anzahl nötiger Definitionen ver-mindert. CSS ermöglicht allenfalls auch die diskretionäre Auszeichnung von Tei-len eines Dokuments.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier,Projektion, Sprache) unterschiedliche Darstellungen vorzugeben. Das ist nütz-lich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Ge-räte mit geringerer Auflösung die Anzeige mit Rücksicht auf die geringere Sei-tenbreite und -höhe anzupassen.

Neben verschiedenen Möglichkeiten, Farben und Schriften einzustellen, erlaubtCSS auch, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heute als die Standard-Stylesheetsprache für Webseiten.

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


5. AUFBAU DER HOMEPAGE

5.1. Template

Nachdem wir das Konzept erstellt hatten, suchten wir nach einem passendenTemplate. Da wir uns entschieden haben, unsere Homepage mit HTML zuentwerfen, haben wir auf www.templatemo.com ein Template gefunden,welches unseren Vorstellungen entsprach.

Das von uns gewählte Template heißt: Sandy Theme

Abbildung 6: Template


5.2. Erste Seite: „Home“

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

Abbildung 7: Home


5.3. Zweite Seite: „Bildergalerie“

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

Abbildung 8:Bildergalerie


5.4. Dritte Seite: „Menü & Angebot“

Die Seite Menü & Angebot gibt Information über die Öffnungszeiten und überdie 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


5.5. Vierte Seite: „Events“

Da im Biber-Pub auch verschiedene Veranstaltungen und Karaoke Abendestattfinden, 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


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 Anliegenoder Beschwerden informieren kann.

Abbildung 12: Kontakt


6. NACHWORT

Am Anfang unserer Arbeit wussten wir noch nicht für wen wir eine Webseiteerstellen sollen. Nach langer Suche fanden wir schließlich einen passendenAuftraggeber.

Wir versuchten anfangs die Webseite mit einem uns unbekannten CMS-Programm zu gestalten, jedoch weißte sich dies als Problem auf. Nach langemhin und her entschieden wir uns dann doch für das HTML Programm „Phase5“. Da wir aufgrund unserer Anfangsschwierigkeiten im Rückstand lagen muss-ten wir die verlorene Zeit so schnell wie möglich wieder nachholen. Zum Glückgelang es uns die Webseite rechtzeitig fertig zu stellen. Wir sind stolz auf unse-re Webseite, die wir mit harter Arbeit unter den Vorstellungen und mit Hilfeunseres Arbeitgebers gestaltet haben.


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


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

Fachspezifische Themenstellung Biber-Pub

Documents

Transcript of Fachspezifische Themenstellung Biber-Pub