Fachspezifische Themenstellung Biber-Pub
-
Upload
sabrina-scheck -
Category
Documents
-
view
226 -
download
1
description
Transcript of Fachspezifische Themenstellung Biber-Pub
BIBER-PUB2011/12
Auftraggeber:Hannes Buchegger
Projektleiterin:Sabrina Scheck
Teammitglied:Melanie Moina
BIBER-PUB2011/12
Auftraggeber:Hannes Buchegger
Projektleiterin:Sabrina Scheck
Teammitglied:Melanie Moina
BIBER-PUB2011/12
Auftraggeber:Hannes Buchegger
Projektleiterin:Sabrina Scheck
Teammitglied:Melanie Moina
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
3 | S e i t e Sabrina Scheck | Melanie Moina
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.
4 | S e i t e 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, 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.
5 | S e i t e Sabrina Scheck | Melanie Moina
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.
6 | S e i t e Sabrina Scheck | Melanie Moina
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?
7 | S e i t e 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
8 | S e i t e 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, denMeilensteinen, mit Arbeitspaketen gegliedert.
Abbildung 1: Projektstrukturplan
9 | S e i t e Sabrina Scheck | Melanie Moina
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
Zuständige: Sabrina Scheck, Melanie Moina
Ende: 16.09.2011
benötigte Ressourcen: Laptop, Coorperate-Design
10 | S e i t e Sabrina Scheck | Melanie Moina
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
Zuständige: Sabrina Scheck, Melanie Moina
Ende: 21.10.2011
benötigte Ressourcen: Laptop, Word
11 | 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
12 | 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
13 | 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öffentlichungmöglich
Zuständige: Sabrina Scheck, Melanie Moina
Ende: 30.03.2012
benötigte Ressourcen: Laptop, Internet
14 | 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:
#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
15 | S e i t e Sabrina Scheck | Melanie Moina
4. GRUNDLAGEN
16 | S e i t e Sabrina Scheck | Melanie Moina
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
17 | 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 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
18 | S e i t e Sabrina Scheck | Melanie Moina
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
19 | S e i t e Sabrina Scheck | Melanie Moina
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
20 | S e i t e Sabrina Scheck | Melanie Moina
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
21 | S e i t e Sabrina Scheck | Melanie Moina
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
22 | 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 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
23 | 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 dieHomepagebesucher willkommen. Das Markenzeichen des Biber-Pub’s sindCartoon-biber. Diese wurden von unserem Auftraggeber gekauft, sie gehörenrechtmäßig ihm.
Abbildung 7: Home
24 | 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 dasBiber-Pub von innen und von außen.
Abbildung 8:Bildergalerie
25 | 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 ü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
26 | S e i t e Sabrina Scheck | Melanie Moina
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
27 | 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 Anliegenoder Beschwerden informieren kann.
Abbildung 12: Kontakt
28 | S e i t e Sabrina Scheck | Melanie Moina
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.
29 | 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
30 | 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
http://de.wikipedia.org/wiki/Portable_Document_Format
Css
http://de.wikipedia.org/wiki/Cascading_Style_Sheets