Fachspezifische Themenstellung BZH

2012

Fachspezifische Themenstellung Information & Communication Solutions

BZH Fleischhacker

Projektauftraggeber: Angelika Fleischhacker

Projektleiter: Astrid Fleischhacker Teammitglieder: Ines Bauer Lisa Knotzer

Inhaltsverzeichnis

1 Was ist Projektmanagement? ........................................................ 9

2 Abgrenzungen im Prozess............................................................. 9

2.1 Zeitliche Abgrenzung: ............................................................. 9

2.1.1 Projektzeitraum: ............................................................. 9

Projektstart: .................................................................................. 9

Projektende:.................................................................................. 9

2.2 Sachliche Abgrenzung: .......................................................... 10

2.2.1 Ziele: .......................................................................... 10

2.2.2 Nicht – Ziele: ............................................................... 10

2.3 Soziale Abgrenzung: ............................................................. 10

3 Planung der Arbeitspakete .......................................................... 11

4 Meilensteinplan ......................................................................... 11

4.1 Meilenstein 1: Analyse des Ist Zustand liegt vor ....................... 12

4.1.1 AP1: Firma gesucht ....................................................... 12

4.2 Meilenstein 2: Konzept erstellt ............................................... 12

4.2.1 AP1: Ideen mit Auftraggeberin besprechen ...................... 12

4.3 Meilenstein 3: Unterlagen gesammelt ...................................... 12

4.3.1 AP1: Texte sammeln ..................................................... 12

4.3.2 AP2: Texte zusammenfassen .......................................... 13

4.3.3 AP3: Bilder machen:...................................................... 13

4.3.4 AP4: Bilder bearbeiten ................................................... 13

4.4 Meilenstein 4: Entwurf und erstellen der Website ...................... 13

4.4.1 AP1: Template finden und bearbeiten .............................. 13

4.4.2 AP2: Entwurf ................................................................ 13

4.4.3 AP3: Programmieren ..................................................... 14

4.5 Meilenstein 5: Webseite getestet ............................................ 14

4.5.1 AP1: Website getestet ................................................... 14

4.6 Meilenstein 6: Webseite verbessern und veröffentlichen ............ 14

4.6.1 AP1: Website überarbeiten ............................................. 14

4.6.2 AP2: Website fertigstellen .............................................. 14

4.6.3 AP2: Website veröffentlichen .......................................... 15

4.7 Projektauftrag ...................................................................... 15

4.8 Abschlussprozess .................................................................. 15

4.9 Projektdefinition ................................................................... 15

4.10 Projektstart ....................................................................... 15

5 Projektmanagement .................................................................. 16

5.1 Projekt ................................................................................ 16

5.2 Projektmanagementprozess ................................................... 16

5.3 Projektstrukturplan ............................................................... 17

5.3.1 Projektstrukturplan ....................................................... 17

5.4 Unser Projektstrukturplan ...................................................... 18

5.5 Einige unserer Arbeitspakete .................................................. 19

5.5.1 Thema wählen .............................................................. 19

5.5.2 Inhalte festlegen ........................................................... 19

5.5.3 Texte zweisprachig verfassen ......................................... 19

5.5.4 Template suchen........................................................... 19

5.5.5 Startseite erstellen ........................................................ 19

5.5.6 Datenbank anlegen ....................................................... 20

5.5.7 Website veröffentlichen ................................................. 20

6 Meilensteine ............................................................................. 20

6.1 Meilenstein 1: Analyse des Ist Zustand liegt vor ...................... 20

6.1.1 AP1: Firma gesucht ....................................................... 20

6.2 Meilenstein 2: Konzept erstellt ............................................... 21

6.2.1 AP1: Ideen mit Auftraggeberin besprechen ...................... 21

6.3 Meilenstein 3: Unterlagen gesammelt ...................................... 21

6.3.1 AP1: Texte sammeln ..................................................... 21

6.3.2 AP2: Texte zusammenfassen .......................................... 21

6.3.3 AP3: Bilder machen:...................................................... 22

6.3.4 AP4: Bilder bearbeiten ................................................... 22

6.4 Meilenstein 4: Entwurf und erstellen der Website ...................... 22

6.4.1 AP1: Template finden und bearbeiten .............................. 22

6.4.2 AP2: Entwurf ................................................................ 23

6.4.3 AP3: Programmieren ..................................................... 23

6.5 Meilenstein 5: Webseite getestet ............................................ 23

6.5.1 AP1: Website getestet ................................................... 23

6.6 Meilenstein 6: Webseite verbessern und veröffentlichen ............ 24

6.6.1 AP1: Website überarbeiten ............................................. 24

6.6.2 AP2: Website fertigstellen .............................................. 24

6.6.3 ....................................................................................... 24

6.6.4 AP3: Website veröffentlichen .......................................... 24

7 TYPO 3 ..................................................................................... 25

7.1 Steckbrief: ........................................................................... 25

7.1 .............................................................................................. 27

7.2 Gestaltungselemente: ........................................................... 27

7.2.1 Seitenbaum .................................................................. 27

7.2.2 Darstellung und Veränderung der Struktur und Eigenschaften der Seiten einer Website ............................................................ 27

7.2.3 TYPO3-Konstanten ........................................................ 27

7.2.4 Universell gültige Konfigurationsparameter ...................... 27

7.2.5 Template ..................................................................... 27

7.2.6 TypoScript-Template ..................................................... 27

7.2.7 Erweiterungen .............................................................. 27

7.2.8 PHP ............................................................................. 28

8 GIMP ....................................................................................... 28

8.1 Steckbrief: ........................................................................... 28

9 Photoscape ............................................................................... 29

9.1 Bildbearbeitungsprogramme: ................................................. 29

9.2 Vektorgrafikprogramme ......................................................... 29

9.3 Vektorisierungsprogramme .................................................... 30

9.4 Layoutprogramme ................................................................ 30

10 Unser Template ...................................................................... 30

10.1 Das ursprüngliche Template: ............................................... 30

10.2 Die Umgestaltung des Templates: ........................................ 31

10.3 Der Aufbau unseres Template: ............................................. 32

10.3.1 Header: ....................................................................... 32

10.3.2 Menü:.......................................................................... 33

10.3.3 Sidebar: ...................................................................... 34

10.3.4 Kalender: ..................................................................... 37

10.3.5 Kalender Plug In ........................................................... 38

10.3.6 Terminliste ................................................................... 38

10.3.7...................................................................................... 39

10.3.8 Termin erstellen ............................................................ 39

10.3.9 Body: .......................................................................... 39

11 Der Inhalt unserer Homepage ................................................... 40

11.1 Die Datenbank:.................................................................. 40

11.2 ........................................................................................... 40

Abbildungsverzeichnis

Abbildung 1 Typo3 .......................................................................... 25

Abbildung 2 Gimp ........................................................................... 28

Abbildung 3 ursprüngliches Template ................................................ 30

Abbildung 4 Header ......................................................................... 31

Abbildung 5 fertiges Design .............................................................. 31

Abbildung 6 Header, Body und Sidebar .............................................. 32

Abbildung 7 Bilderslideshow ............................................................. 34

Abbildung 8 Bilder ........................................................................... 34

Abbildung 9 Kalender ...................................................................... 38

Abbildung 10 Terminliste ................................................................. 38

Abbildung 11 Termin erstellen .......................................................... 39

Abbildung 12 Homepage - Startseite ................................................. 40

Abbildung 13 Homepage - Mitarbeiter................................................ 41

Abbildung 14 Homepage - Über Uns .................................................. 41

Abbildung 16 Kalender .................................................................... 42

Abbildung 15 Impressum ................................................................. 42

Vorwort

Im Rahmen unseres Ausbildungsschwerpunktes „Information Communication Salutions“ erarbeiten wir für die Bezirkshandlung Fleischhacker eine webbasierende, elektronische Informationsplattform mit dynamischer Datenbankanbindung. Ziel war es, unsere erworbenen Kenntnisse bezüglich des World Wide Web in einem Projekt zusammenzufassen.

Der Grund für dieses Projekt war die Neueröffnung im Jahr 2007, sowie der Wunsch der Betriebsleiter im Internet vertreten zu sein. Wir hoffen, dass die BZH mit dieser Homepage auch im Internet an Popularität gewinnt.

Auf den folgenden Seiten finden sie eine genaue Dokumentation unseres Projekts.

Within the scope of your subject „Information Coummunication Salutions“ we have created a web-based, electronic information platform with dynamic database connection for the Bezirkshandlung Fleischhacker. We want to combine your knowledge about World Wide Web in this project.

The reason for our decision to make this projekt was the re-opening in 2007. Moreover the manager wants tob e represented on the Internet too. We hope that we can make the BZH a little bit more popular on the Internet with this homepage.

Grundlegendes Projektmanagement

1 Was ist Projektmanagement?

Projekte definieren sich u.a. über ihre Einmaligkeit. Damit ist gemeint, dass bestimmte wiederkehrende Aufgaben eines Unternehmens sich zwar ähnlich sein können, sich hinsichtlich der Rahmenbedingungen jedoch unterscheiden.

Projektmanagement kann definiert werden als die Gesamtheit der Maßnahmen, die zur Erreichung definierter Projektziele im Rahmen der personellen, technischen, terminlichen und finanziellen Rahmenbedingungen nötig sind.

Ein Grund für den konzeptionellen Erfolg des Projektmanagements besteht darin, dass seine Methoden und Instrumenten grundsätzlich auf alle Projektarten angewendet werden können.

In unserem Fall bezieht sich das Projektmanagement auf die Homepage der Bezirkshandlung Fleischhacker mit allen Arbeitspaketen und Projektstrukturplänen.

2 Abgrenzungen im Prozess

2.1 Zeitliche Abgrenzung: Bei der zeitlichen Abgrenzung wird der Starttermin festgesetzt, sowie mit einem Startereignis (z.B Genehmigung des Projektantrages) gekoppelt und der Endtermin sowie das dazugehörige Endereignis (z.B Abhalten der Endpräsentation) geplant.

2.1.1 Projektzeitraum: Projektstart: 22.09.2011

Projektende: 23.03.2012

2.2 Sachliche Abgrenzung: Das Managen des Projekts beinhaltet die Festsetzung der Ziele und Nicht – Ziele, und die Erstellung einer Meilensteinplan, die die Arbeitspakete sowie die Zeiteinteilung enthält.

2.2.1 Ziele: Einblick in die Bezirkshandlung

Passendes Template suchen

Bearbeiten der Inhalte

Dynamische Seiten erstellen und Datenbanken anlegen

Neuesten Infos

Bildergalerie

Kalender und News

2.2.2 Nicht – Ziele: Nicht funktionierende Homepage

Unübersichtliches Desing

Falsche Farbauswahl

Falsche Daten, Bilder und Informationen

2.3 Soziale Abgrenzung: Auftraggeber: Angelika und Erich Fleischhacker

Projektleiter: Ines Bauer

Teammitglieder: Lisa Knotzer und Astrid Fleischhacker

3 Planung der Arbeitspakete Arbeitspakete sind plan- und kontrollierbare Tätigkeitsbeschreibungen, die von einzelnen Mitarbeitern zur Bearbeitung übernommen werden. Sie sind die Unterpunkte eines Projekts und geben die zu planenden Inhalte wieder.

Dabei wird festgelegt, was Inhalt des Arbeitspaketes ist, was in dem Arbeitspaket nicht durchzuführen ist und was als Ergebnis erwartet wird.

Jedes Arbeitspaket muss ein klar definiertes Ziel haben und es muss festgelegt werden, wer für die Einhaltung von Terminen und Kosten verantwortlich ist.

In der AP – Beschreibung werden nur die wichtigsten und die unklaren Arbeitspakete spezifiziert.

Nach dem Überarbeiten aller Arbeitspakete im Projektstrukturplan sollte man die Betrachtungsobjekte (Mind-Map) hernehmen und sich überlegen, ob diese auch in den Arbeitspaketen wieder zu finden sind.

Danach sind die einzelnen Arbeitspakete zu nummerieren.

4 Meilensteinplan Ein Meilensteinplan dient der groben Terminplanung eines Projekts, wobei die Meilensteine zentrale wichtige Ereignisse im Rahmen der Projektdurchführung darstellen.

Als Basis für die Meilensteinplanung dient die Projektstrukturplan.

Projektstart und Projektende sind immer Meilensteine.

• Konzept erstellen

• Absprache mit Familie Fleischhacker

• Material sammeln

• Projektstart durchführen

• Design erstellen und anpassen

• Gliederung der Homepage planen

• Einzelne Seiten erstellen

• Fotos einbinden

• Projektschluss durchführen

4.1 Meilenstein 1: Analyse des Ist Zustand liegt vor

4.1.1 AP1: Firma gesucht Auftraggeberin: Angelika Fleischhacker Ziele: Firma kontaktiert, keine Hompage vorhanden Nichtziele: keine Ideen Start: 2.September.2011 Ende: 9.September.2011 Benötigte Ressourcen: Zeit

4.2 Meilenstein 2: Konzept erstellt

4.2.1 AP1: Ideen mit Auftraggeberin besprechen Ziele: Ideen und Vorschläge ausarbeiten, Corporate Design besprechen, Nichtziele: Unklarheit, keine Ideen, Start: 29.September.2011 Ende: 6.Oktober.2011 Benötigte Ressourcen: Laptop, Internet

4.3 Meilenstein 3: Unterlagen gesammelt

4.3.1 AP1: Texte sammeln Zuständige: Ines Bauer Ziele: Texte beschaffen (Betriebsbeschreibung, Produktbeschreibungen, Mitarbeiter, Tupperware allgemein, Adresse) Nichtziele: Falsche Texte Start: 26.Oktober.2011 Ende: 17.November.2011 Benötigte Ressourcen: Laptop

4.3.2 AP2: Texte zusammenfassen Zuständige: Ines Bauer Ziele: Texte bearbeiten und richtigstellen Nichtziele: Fehler im Text, unvollständiger Text Start: 26.Oktober.2011 Ende: 17.November.2011 Benötigte Ressourcen: Laptop, Word

4.3.3 AP3: Bilder machen: Zuständige: Astrid Fleischhacker Ziele: anspruchsvolle und viele Bilder machen, Nichtziele: unscharfe Bilder Start: 26:oktober.2011 Ende: 17.November.2011 Benötigte Ressourcen: Kamera

4.3.4 AP4: Bilder bearbeiten Zuständige: Astrid Fleischhacker Ziele: Bilder bearbeiten (zuschneiden, Schärfe, Farbe) Nichtziele: unscharfe Bilder Start: 26:oktober.2011 Ende: 17.November.2011 Benötigte Ressourcen: Laptop, Gimp, Microsoft Office Picture Manager

4.4 Meilenstein 4: Entwurf und erstellen der Website

4.4.1 AP1: Template finden und bearbeiten Zuständige: Lisa Knotzer Ziele: passendes Template finden, Template anpassen Nichtziele: kein geeignetes oder unübersichtliches Template finden, Start: 18.November.2011 Ende: 7.Dezember.2011 Benötigte Ressourcen: Laptop, Internet, Joomla

4.4.2 AP2: Entwurf Zuständige: Astrid Fleischhacker Ziele: Bilder, Texte, Farben, Schriftart dem Template anpassen Nichtziele: unpassendes Design (Farben, Schrift) Start: 7.Dezember.2011 Ende: 22.Dezember.2011 Benötigte Ressourcen: Laptop, Internet, Joomla

4.4.3 AP3: Programmieren Zuständige: Ines Bauer Ziele: dynamische Seiten erstellen Nichtziele: Seite funktioniert nicht Start: 22.Dezember.2011 Ende: 29.Februar.2012 Benötigte Ressourcen: Laptop, Internet, Joomla

4.5 Meilenstein 5: Webseite getestet

4.5.1 AP1: Website getestet Zuständige: Lisa Knotzer Ziele: Funktionierende Website Nichtziele: Seite funktioniert nicht Start: 29.Februar.2012 Ende: 8.März.2012 Benötigte Ressourcen: Laptop, Internet

4.6 Meilenstein 6: Webseite verbessern und veröffentlichen

4.6.1 AP1: Website überarbeiten Zuständige: Lisa Knotzer Ziele: Bilder, Texte verbessern, kleine Änderungen vornehmen Nichtziele: keine Verbesserungsmöglichkeiten Start: 8.März.2012 Ende: 13.März.2012 Benötigte Ressourcen: Laptop, Internet, Joomla

4.6.2 AP2: Website fertigstellen Zuständige: Astrid Fleischhacker Ziele: alles fertigstellen, alles funktioniert Nichtziele: falsche, unfertige Hompage Start: 13.März.2012 Ende: 19.März.2012 Benötigte Ressourcen: Laptop, Internet, Joomla

4.6.3 AP2: Website veröffentlichen Zuständige: Ines Bauer Ziele: Webseite veröffentlichen Nichtziele: unfertige Website veröffentlichen Start: 19.März.2012 Ende: 29.März.2012 Benötigte Ressourcen: Laptop, Internet, Joomla

4.7 Projektauftrag Mit den bisherigen Planungsarbeiten wurde die Startphase beendet. Im Projektauftrag werden die wesentlichen Eckpunkte des Projekts beschrieben, wie die Abgrenzung, die Projektorganisation, die Phasen des Projekts sowie die benötigten Ressourcen.

4.8 Abschlussprozess Obwohl das Projekt inhaltlich abgeschlossen ist, ist es dennoch noch nicht beendet. Beim Abschlussprozess werden die formale Abnahme des Projekts, das Lernen aus dem Projektverlauf, sowie die Durchführung der Restarbeiten geregelt.

4.9 Projektdefinition Voraussetzung für jedes erfolgreiche Projekt ist eine eindeutige Definition der Aufgaben. Diese Aufgaben müssen sachlich, zeitlich und sozial abgegrenzt sein.

4.10 Projektstart Unser diesjähriges Projekt in dem Maturafach ICS „Information Communication Solutions“ startet am 22.09.2011 und gab uns als Aufgabe eine dynamische Website mit kreativen Elementen, mithilfe all unserer bisher gelernten Fähigkeiten zu erstellen.

5 Projektmanagement

5.1 Projekt Projekte sind einmalige Prozesse mit einen bestimmten Start- und Endtermin zur Erreichung definierter Ziele.

Ein Projekt soll eine Aufgabe lösen, die

• Zeitlich begrenzt ist

• Konkrete Ziele verfolgt

• Einzigartig, komplex und manchmal riskant ist

• Beschränkte Ressourcen zur Verfügung hat

• Von mindestens zwei Mitarbeiter durchgeführt wird

• Gegenüber anderen Tätigkeiten abgegrenzt ist und

• Eine projektspezifischen Organisation unterliegt

Für die Aufgabenstellung ist ein eigenes soziales System (Projektteam) mit einer eigenen Arbeitsform sowie eigenen Arbeitsmitteln notwendig.

5.2 Projektmanagementprozess Projektmanagement ist eine Sammlung von Werkzeugen, die es ermöglicht, eine komplexe, neuartige und zeitlich abgegrenzte Aufgabe strukturiert zu bewältigen.

Jeder Ablauf eines Projektes prozessorientiert strukturiert.

Projekt-beauftrag-ungs- prozess

Projekt- start- prozess

Projekt- durch- führung

Projekt- abschlussprozess

Projektmarketi

Projektcontroll

5.3 Projektstrukturplan Aufgrund der sachlichen Abgrenzung und der inhaltlichen Beschäftigung mit den Betrachtungsobjekten wird der inhaltliche Ablauf des Projektes festgelegt.

Im Projektstrukturplan wird als erste Phase „Projektmanagement“ eingetragen.

Als erstes Arbeitspaket ist immer der „Projektstart“ anzusetzen.

Das letzte Arbeitspaket in dieser Phase ist der Projektabschluss bzw. das Projektende.

5.3.1 Projektstrukturplan Zentrales Planungsinstrument im Projektmanagement

Beantwortet Frage nach dem „WIE“ im Projekt

Ein Projektstrukturplan (PSP) ist eine Übersicht, die alle zum Erreichen des Projektziels notwendigen Aktivitäten enthält

Erhält die Struktur der im Projekt zu bewältigten Aktivitäten

Strukturierung in mehreren Ebenen

Projekttitel

Teilaufgaben

Arbeitspakete

Zerlegt das Projekt in überschaubare „Arbeitspakete“

Dient der aufwands- und termingerechten Abwicklung eines Projektes

Dient als Basis für Terminplan

Der PSP wird von allen Mitgliedern des Projektteams gemeinsam erarbeitet

Neben den einzelnen Aktivitäten1 enthält er auch die Namen der Verantwortlichen für die Durchführung

5.4 Unser Projektstrukturplan

1 Man spricht auch oft von Vorgängen

5.5 Einige unserer Arbeitspakete

5.5.1 Thema wählen Inhalt: Thema des Projektes auswählen (Homepage für Bezirkshandlung Fleischhacker)

Ziel: ein für uns interessantes Thema finden

Nichtziel: Thema wählen, zu dem wir keinen Bezug haben

5.5.2 Inhalte festlegen Inhalt: Inhalte der Homepage festlegen

Ziel: Nur die wesentlichen Bereiche einbringen

Nichtziel: Unbrauchbares weglassen

5.5.3 Texte zweisprachig verfassen Texte zweisprachig (Deutsch und Englisch) verfassen, gemeinsam mit Projektauftraggeber

Ziel: Fehlerfreie Texte verfassen

Nichtziel: Uninteressante, fehlerhafte Texte verfassen

5.5.4 Template suchen Ein passendes TYPO3/CSS Template suchen und entscheiden ob es passend ist

Ziel: passendes Template finden und auswählen

Nichtziel: Nur einer der Gruppe entscheidet, welches Template verwendet wird

5.5.5 Startseite erstellen Startseite erstellen mit Diashow

Ziel: Ansprechende Startseite erstellen

Nichtziel: Unübersichtliche Startseite gestalten

5.5.6 Datenbank anlegen Anlegen einer mySQL Datenbank

Ziel: Passend angelegte Datenbank

Nichtziel: Fehlerhafte Datenbank

5.5.7 Website veröffentlichen Inhalt: Website mittels FTP uploaden

Ziel: Funktionstüchtige Website online

Nichtziel: Fehlerhafte Website online

6 Meilensteine

6.1 Meilenstein 1: Analyse des Ist Zustand liegt vor

6.1.1 AP1: Firma gesucht Auftraggeberin: Angelika Fleischhacker

Ziele: Firma kontaktiert, keine Hompage vorhanden

Nichtziele: keine Ideen

Start: 2.September.2011

Ende: 9.September.2011

Benötigte Ressourcen: Zeit

6.2 Meilenstein 2: Konzept erstellt

6.2.1 AP1: Ideen mit Auftraggeberin besprechen Ziele: Ideen und Vorschläge ausarbeiten, Corporate Design besprechen,

Nichtziele: Unklarheit, keine Ideen,

Start: 29.September.2011

Ende: 6.Oktober.2011

Benötigte Ressourcen: Laptop, Internet

6.3 Meilenstein 3: Unterlagen gesammelt

6.3.1 AP1: Texte sammeln Zuständige: Ines Bauer

Ziele: Texte beschaffen (Betriebsbeschreibung, Produktbeschreibungen, Mitarbeiter, Tupperware allgemein, Adresse)

Nichtziele: Falsche Texte

Start: 26.Oktober.2011

Ende: 17.November.2011

Benötigte Ressourcen: Laptop

6.3.2 AP2: Texte zusammenfassen Zuständige: Ines Bauer

Ziele: Texte bearbeiten und richtigstellen

Nichtziele: Fehler im Text, unvollständiger Text

Start: 26.Oktober.2011


Benötigte Ressourcen: Laptop, Word

6.3.3 AP3: Bilder machen: Zuständige: Astrid Fleischhacker

Ziele: anspruchsvolle und viele Bilder machen,

Nichtziele: unscharfe Bilder

Start: 26:oktober.2011


Benötigte Ressourcen: Kamera

6.3.4 AP4: Bilder bearbeiten Zuständige: Astrid Fleischhacker

Ziele: Bilder bearbeiten (zuschneiden, Schärfe, Farbe)

Nichtziele: unscharfe Bilder

Start: 26:oktober.2011


Benötigte Ressourcen: Laptop, Gimp, Microsoft Office Picture Manager

6.4 Meilenstein 4: Entwurf und erstellen der Website

6.4.1 AP1: Template finden und bearbeiten Zuständige: Lisa Knotzer

Ziele: passendes Template finden, Template anpassen

Nichtziele: kein geeignetes oder unübersichtliches Template finden,

Start: 18.November.2011

Ende: 7.Dezember.2011

Benötigte Ressourcen: Laptop, Internet, Joomla

6.4.2 AP2: Entwurf Zuständige: Astrid Fleischhacker

Ziele: Bilder, Texte, Farben, Schriftart dem Template anpassen

Nichtziele: unpassendes Design (Farben, Schrift)

Start: 7.Dezember.2011

Ende: 22.Dezember.2011


6.4.3 AP3: Programmieren Zuständige: Ines Bauer

Ziele: dynamische Seiten erstellen

Nichtziele: Seite funktioniert nicht

Start: 22.Dezember.2011

Ende: 29.Februar.2012


6.5 Meilenstein 5: Webseite getestet

6.5.1 AP1: Website getestet Zuständige: Lisa Knotzer

Ziele: Funktionierende Website

Nichtziele: Seite funktioniert nicht

Start: 29.Februar.2012

Ende: 8.März.2012

Benötigte Ressourcen: Laptop, Internet

6.6 Meilenstein 6: Webseite verbessern und veröffentlichen

6.6.1 AP1: Website überarbeiten Zuständige: Lisa Knotzer

Ziele: Bilder, Texte verbessern, kleine Änderungen vornehmen

Nichtziele: keine Verbesserungsmöglichkeiten

Start: 8.März.2012

Ende: 13.März.2012


6.6.2 AP2: Website fertigstellen Zuständige: Astrid Fleischhacker

Ziele: alles fertigstellen, alles funktioniert

Nichtziele: falsche, unfertige Hompage

Start: 13.März.2012

Ende: 19.März.2012


6.6.3

6.6.4 AP3: Website veröffentlichen Zuständige: Ines Bauer

Ziele: Webseite veröffentlichen

Nichtziele: unfertige Website veröffentlichen

Start: 19.März.2012

Ende: 29.März.2012


Grundlagen

7 TYPO 3

TYPO3 ist ein freies Content-Management-Framework für Websites, das ursprünglich von Kasper Skårhøj entwickelt wurde. TYPO3 basiert auf der Skriptsprache PHP. Als Datenbank kann MySQL, aber auch etwa PostgreSQL oder Oracle eingesetzt werden. Das System wird von zwei Teams, jeweils einem für TYPO3 und einem für dessen Nachfolger mit dem Arbeitstitel Phoenix, weiterentwickelt.

Zahlreiche Funktionen können mit Erweiterungen2 integriert werden, ohne dass ein eigener Programmcode geschrieben werden muss. Die derzeit über 5000 Erweiterungen stammen zum größten Teil von anderen Anbietern und sind kostenlos verfügbar. Erhältlich sind unter anderem News, Shop-Systeme oder Diskussionsforen. Das System ist auf Mehrsprachigkeit ausgelegt und wird von einer Anwender- und Entwicklergemeinde aus aller Welt betreut. TYPO3 gehört zusammen mit Drupal, Joomla! und WordPress zu den bekanntesten Content-Management-Systemen aus dem Bereich der freien Software, und wird vor allem im deutschen Sprachraum sehr häufig eingesetzt.

7.1 Steckbrief: Entwickler Kasper Skårhøj, TYPO3 Association

Aktuelle Version 4.6.6

(13. März 2012)

Betriebssystem plattformunabhängig

Programmiersprache PHP, SQL, JavaScript

Kategorie Content Management System (CMS)

2 http://typo3.org/extensions/repository/

Abbildung 1 Typo3

Lizenz GPL (Freie Software)

Deutschsprachig ja

7.1 Verwendung:

Es wird geschätzt, dass TYPO3 weltweit mehr als 500.000 Mal eingesetzt wird.[6] TYPO3 stellt mittlere Anforderungen an die Leistungs- und Konfigurationsfähigkeit des verwendeten Servers.[7] Die Einarbeitungszeit für einen Website-Entwickler beträgt mehrere Wochen bis Monate, für einen Autor oder Redakteur je nach freigeschalteten Funktionen wenige Minuten bis einige Stunden. Ein Entwickler, der eine TYPO3-Website einrichten möchte, muss sich in der Regel intensiv mit der Metasprache TypoScript beschäftigen.

7.2 Gestaltungselemente: Gestaltung und Programmierung von TYPO3-Webseiten erfolgt üblicherweise über folgende Elemente:

7.2.1 Seitenbaum

7.2.2 Darstellung und Veränderung der Struktur und Eigenschaften der Seiten einer Website

7.2.3 TYPO3-Konstanten

7.2.4 Universell gültige Konfigurationsparameter

7.2.5 Template Traditionell ein HTML-Gerüst mit einfachen Platzhaltern, sog. Markern und Bereichsmarkierungen, sog. Subparts die von TYPO3 durch verschiedene Inhalte (Seitennavigation, Texte, Grafiken etc.) ersetzt werden bzw. als Unter-Template dienen.

7.2.6 TypoScript-Template Mit dieser internen Konfigurationssprache wird beschrieben, wie TYPO3 die Inhalte ermittelt, formatiert und ausgibt.

Die Ausgabe von Seiten ist auch ohne HTML-Templates – mit reinem TypoScript-Code – möglich.

7.2.7 Erweiterungen Die Funktion von TYPO3 erweiternde, zusätzliche Plug-ins

7.2.8 PHP Die TYPO3-Funktionen sind in PHP geschrieben und können von Anwendern, die besondere Zusatzfunktionen realisieren wollen, geändert oder ergänzt werden. Hervorzuheben ist hierbei die XCLASS-Funktionalität, die es ermöglicht, Klassen zu überschreiben. Es werden aber Hooks vorgezogen.

8 GIMP

Ist ein kostenloses und freies Bildbearbeitungsprogramm. 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. Neben der Version für GNU/Linux und Unix existieren auch Portierungen auf Microsoft Windows und Mac OS X.3

8.1 Steckbrief: Entwickler Das GIMP-Team

Aktuelle Version 2.6.12

(1. Februar 2012)

Aktuelle Vorabversion 2.7.4

(13. Dezember 2011)

Betriebssystem Linux, Mac OS X, Windows u. v. m.

Programmiersprache C

Kategorie Grafiksoftware

Lizenz GPL Version 2

Deutschsprachig ja

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

Abbildung 2 Gimp

9 Photoscape Grafiksoftware ist der Oberbegriff für vielerlei Arten von Programmen, die im Grafikbereich mehr oder weniger zur Erstellung oder Bearbeitung von Bildern eingesetzt werden oder für ähnliche Funktionen dienen. Hierzu gehören unter anderem Bildbearbeitungsprogramme, Malprogramme und Vektorgrafikprogramme, aber auch andere nützliche Software, die unten näher erläutert wird.

Man unterscheidet zwei Arten von Computergrafiken: Vektor- und Rastergrafiken. Vektorgrafiken sind Zeichnungen aus Linien und Kurven; Rastergrafiken dagegen bestehen aus Pixeln. Ein typisches Beispiel für eine Rastergrafik ist ein mit der Digitalkamera erzeugtes Foto.

9.1 Bildbearbeitungsprogramme: GIMP

Adobe Photoshop

Microsoft Foto Suite

PhotoImpact

PhotoLine

PicMaster

9.2 Vektorgrafikprogramme Adobe Fireworks

Adobe Illustrator

ConceptDraw (Mac und PC)

9.3 Vektorisierungsprogramme Adobe Streamline

autotrace (Opensource)

Corel Trace

9.4 Layoutprogramme Adobe InDesign

Adobe PageMaker

Adobe Framemaker

Aufbau unserer Homepage

10 Unser Template

10.1 Das ursprüngliche Template: Das ursprüngliche Template das wir als Design für unsere Homepage ausgewählt haben, stammt von der Seite http://www.freecsstemplates.org/preview/morningdew/ und ist ein Typo3 Template.

Abbildung 3 ursprüngliches Template

10.2 Die Umgestaltung des Templates: Wir fangen damit an verschiedene Farben auszuprobieren. Nach einigen Versuchen wurde uns klar, dass wir auf jeden Fall Farben verwenden wollten, die man automatisch mit der Bezirkshandlung Fleischhacker und Tupperware verbindet. So entscheiden wir uns für die Hauptfarbe Rosa in verschiedenen Variationen. Die genaue Farbgestaltung und das Erstellen des Banners gelangen uns mit dem Programm GIMP und Photoscape.

Die Gestaltung des Templates fiel uns Anfangs schwer doch schon nach kurzer Zeit ging es schnell voran und so hatten wir schon bald unser fertiges Design.

Abbildung 4 Header

Abbildung 5 fertiges Design

10.3 Der Aufbau unseres Template: Unser Template wird mit Hilfe der .css Datei „default.css“ formatiert.

10.3.1 Header: In dem Header selbst ist der Banner. Ebenso werde hier die Einstellungen für den Hintergrund (Banner) definiert.

#header { width: 1000px; margin: 0 auto; height: 226px; background: url(images/img03.jpg) no-repeat left top; } /* Header */

Body

Sidebar

Header

Abbildung 6 Header, Body und Sidebar

10.3.2 Menü: Das Menü ist ebenfalls über die css-Datei definiert, in Form einer normalen Aufzählung. Um eine Zentrierung zu erreichen ist die Aufzählung von links nach rechts genau definiert worden. Die Farben der einzelnen Menüpunkte wurden auch in der css-Datei bestimmt.

/* Menu */ #menu { width: 970px; height: 64px; margin: 0 auto; padding: 56px 0px 0px 30px; background: url(images/img02.jpg) repeat-x left top; } #menu ul { margin: 0; padding: 24px 0 0 0px; list-style: none; } #menu li { float: left; display: inline; } #menu a { height: 30px; margin: 0; padding: 20px 30px 0 30px; background: url(images/img06.gif) no-repeat left 24px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; } #menu a:hover { color: #FFDEDE; } #menu .current_page_item a {

background: none; color: #FFDEDE; }

10.3.3 Sidebar: Im Menüpunkt „Über Uns“ wird eine Smooth Gallery angezeigt und bei den anderen Informationen über den Betrieb. Die Smooth Gallery ist eine Extension und man muss sie vom Internet herunterladen und installieren. Danach werden die Bilder bearbeitet, damit sie in diese Galerie passen. Die Bilder müssen in einen Extraordner gespeichert werden. Das Ergebnis sieht aus wie eine Diashow.

/* Sidebars */ #sidebar1 { float: left; width: 230px; } #sidebar2 { float: right; width: 230px;

Abbildung 7 Bilderslideshow

Abbildung 8 Bilder

.sidebar { float: left; padding: 0; color: #737373; } .sidebar ul { margin: 0; padding: 0; list-style: none; } .sidebar li { padding: 0 0 20px 0; } .sidebar li ul { background: #F7F7F7; padding-bottom: 20px; } .sidebar li li { margin: 0px 15px; padding: 8px 0px; border-bottom: 1px #DCDCDC dashed; background: none; } .sidebar li h2 { height: 26px; background: #6DC5F3; margin: 0 0 0 0; padding: 14px 15px 0px 15px; text-transform: uppercase; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; } .sidebar a { color: #737373; } .sidebar a:hover {

color: #BDBDBD; } /* Search */ #searchform { margin: 0; padding: 0 0 20px 0; } #searchform br { display: none; } #searchform h2 { } #s { margin: 10px 0px 0 15px; padding: 2px 2px; width: 165px; height: 18px; border: 1px solid #CCCCCC; background: #FFFFFF; font-size: 10px; color: #000000; } #x { margin: 0; padding: 2px 5px; height: 25px; background: #CA8186; text-decoration: none; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #CCCCCC; }

10.3.4 Kalender:

/* Calendar */ #calendar_wrap { padding: 10px 15px; text-align: center; } #calendar_wrap table { width: 100%; } #calendar_wrap th { } #calendar_wrap td { } #calendar_wrap tfoot td { border: none; } #calendar_wrap tfoot td#prev { text-align: left; font-weight: bold; border: none; } #calendar_wrap tfoot td#prev a { border: none; } #calendar_wrap tfoot td#next { text-align: right; font-weight: bold; border: none; } #calendar_wrap tfoot td#next a { border: none; }

10.3.5 Kalender Plug In Es wurde das Extension „Simple Kalender“ heruntergeladen und wurde als Plug In installiert.

10.3.6 Terminliste In der Kategorie „Liste“ wurde ein Unterordner mit „Terminunterlage“ erstellt.

Abbildung 9 Kalender

Abbildung 10 Terminliste

10.3.7

10.3.8 Termin erstellen Im Ordner „Terminunterlage“ können jetzt Termine in den Kalender eingetragen werden.

10.3.9 Body: In diesem Feld wird der gesamte Inhalt unsere Homepage dargestellt. Hier sind zum Beispiel die Schriftart, Schriftfarbe, Abstand etc. genau definiert.

body { margin: 0px; padding: 0; background: #D6D6D6 url(images/img01.jpg) repeat-x left top; text-align: justify; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: #737373; } h1, h2, h3 { margin-top: 0; } h1 { font-size: 1.6em; font-weight: normal; }

Abbildung 11 Termin erstellen

h2 { font-size: 1.6em; } h3 { font-size: 1em; } ul { }

11 Der Inhalt unserer Homepage

11.1 Die Datenbank:

Die ersten Schritte für den Inhalt unseres Projektes waren die Erstellung eines ER-Diagramms und anschließend die darauffolgende Einstellung der Datenbank.

11.2

Abbildung 12 Homepage - Startseite

Abbildung 13 Homepage - Mitarbeiter

Abbildung 14 Homepage - Über Uns

Abbildung 16 Impressum

Abbildung 15 Kalender

Schlusswort

Nach monatelanger Arbeit, sind wir stolz darauf, dass wir eine funktionsfähige Homepage vorweisen können.

Das Grundgerüst unserer Homepage, sowie die statischen Seiten waren schnell fertig.

Die Arbeit an unserem Projekt war zwar oft hart und anstrengend, dennoch stets spannend und interessant. Das Wichtigste ist, so denken wir, dass wir an der Umsetzung dieses praktischen Beispiels sehr viel gelernt haben. Heute wissen wir, dass man nur mit guter Planung ein erfolgreiches Projekt abschließen kann. Einen entscheidenden Punkt konnten wir aus unserem Projekt noch mitnehmen und zwar, dass ohne das „Team“ und die Kommunikation ein gutes Projekt nicht abgewickelt werden kann.

Im Großen und Ganzen hat uns die Arbeit an dem Projekt viel Spaß und Freude gemacht. Schlussendlich sind wir stolz auf das Resultat unserer Arbeit.

Documents

Fachspezifische Themenstellung BZH