Fachspezifische Themenstellung BZH

2012

Fachspezifische ThemenstellungInformation & Communication Solutions

BZHFleischhacker

Projektauftraggeber:AngelikaFleischhacker

Projektleiter:Astrid Fleischhacker

Teammitglieder:Ines BauerLisa 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 Eigenschaftender 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 .................................................................... 41

Abbildung 15 Impressum ................................................................. 41

Vorwort

Im Rahmen unseres Ausbildungsschwerpunktes „InformationCommunication Salutions“ erarbeiten wir für die BezirkshandlungFleischhacker eine webbasierende, elektronische Informationsplattformmit dynamischer Datenbankanbindung. Ziel war es, unsere erworbenenKenntnisse bezüglich des World Wide Web in einem Projektzusammenzufassen.

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

Auf den folgenden Seiten finden sie eine genaue Dokumentation unseresProjekts.

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

The reason for our decision to make this projekt was the re-opening in2007. 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 theInternet 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 jedochunterscheiden.

Projektmanagement kann definiert werden als die Gesamtheit derMaßnahmen, die zur Erreichung definierter Projektziele im Rahmen derpersonellen, technischen, terminlichen und finanziellenRahmenbedingungen nötig sind.

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

In unserem Fall bezieht sich das Projektmanagement auf die Homepageder Bezirkshandlung Fleischhacker mit allen Arbeitspaketen undProjektstrukturplänen.

2 Abgrenzungen im Prozess

2.1 Zeitliche Abgrenzung:Bei der zeitlichen Abgrenzung wird der Starttermin festgesetzt, sowie miteinem Startereignis (z.B Genehmigung des Projektantrages) gekoppeltund der Endtermin sowie das dazugehörige Endereignis (z.B Abhalten derEndpräsentation) geplant.

2.1.1Projektzeitraum:

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 sowiedie Zeiteinteilung enthält.

2.2.1Ziele:

Einblick in die Bezirkshandlung

Passendes Template suchen

Bearbeiten der Inhalte

Dynamische Seiten erstellen und Datenbanken anlegen

Neuesten Infos

Bildergalerie

Kalender und News

2.2.2Nicht – 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 ArbeitspaketeArbeitspakete sind plan- und kontrollierbare Tätigkeitsbeschreibungen, dievon einzelnen Mitarbeitern zur Bearbeitung übernommen werden. Sie sinddie Unterpunkte eines Projekts und geben die zu planenden Inhaltewieder.

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

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

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

Nach dem Überarbeiten aller Arbeitspakete im Projektstrukturplan sollteman 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 MeilensteinplanEin Meilensteinplan dient der groben Terminplanung eines Projekts, wobeidie Meilensteine zentrale wichtige Ereignisse im Rahmen derProjektdurchfü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.1AP1: Firma gesuchtAuftraggeberin: Angelika FleischhackerZiele: Firma kontaktiert, keine Hompage vorhandenNichtziele: keine IdeenStart: 2.September.2011Ende: 9.September.2011Benötigte Ressourcen: Zeit

4.2 Meilenstein 2: Konzept erstellt

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

4.3 Meilenstein 3: Unterlagen gesammelt

4.3.1AP1: Texte sammelnZuständige: Ines BauerZiele: Texte beschaffen (Betriebsbeschreibung, Produktbeschreibungen, Mitarbeiter,Tupperware allgemein, Adresse)Nichtziele: Falsche TexteStart: 26.Oktober.2011Ende: 17.November.2011Benötigte Ressourcen: Laptop

4.3.2AP2: Texte zusammenfassenZuständige: Ines BauerZiele: Texte bearbeiten und richtigstellenNichtziele: Fehler im Text, unvollständiger TextStart: 26.Oktober.2011Ende: 17.November.2011Benötigte Ressourcen: Laptop, Word

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

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

4.4 Meilenstein 4: Entwurf und erstellen der Website

4.4.1AP1: Template finden und bearbeitenZuständige: Lisa KnotzerZiele: passendes Template finden, Template anpassenNichtziele: kein geeignetes oder unübersichtliches Template finden,Start: 18.November.2011Ende: 7.Dezember.2011Benötigte Ressourcen: Laptop, Internet, Joomla

4.4.2AP2: EntwurfZuständige: Astrid FleischhackerZiele: Bilder, Texte, Farben, Schriftart dem Template anpassenNichtziele: unpassendes Design (Farben, Schrift)Start: 7.Dezember.2011Ende: 22.Dezember.2011Benötigte Ressourcen: Laptop, Internet, Joomla

4.4.3AP3: ProgrammierenZuständige: Ines BauerZiele: dynamische Seiten erstellenNichtziele: Seite funktioniert nichtStart: 22.Dezember.2011Ende: 29.Februar.2012Benötigte Ressourcen: Laptop, Internet, Joomla

4.5 Meilenstein 5: Webseite getestet

4.5.1AP1: Website getestetZuständige: Lisa KnotzerZiele: Funktionierende WebsiteNichtziele: Seite funktioniert nichtStart: 29.Februar.2012Ende: 8.März.2012Benötigte Ressourcen: Laptop, Internet

4.6 Meilenstein 6: Webseite verbessern undveröffentlichen

4.6.1AP1: Website überarbeitenZuständige: Lisa KnotzerZiele: Bilder, Texte verbessern, kleine Änderungen vornehmenNichtziele: keine VerbesserungsmöglichkeitenStart: 8.März.2012Ende: 13.März.2012Benötigte Ressourcen: Laptop, Internet, Joomla

4.6.2AP2: Website fertigstellenZuständige: Astrid FleischhackerZiele: alles fertigstellen, alles funktioniertNichtziele: falsche, unfertige HompageStart: 13.März.2012Ende: 19.März.2012Benötigte Ressourcen: Laptop, Internet, Joomla

4.6.3AP2: Website veröffentlichenZuständige: Ines BauerZiele: Webseite veröffentlichenNichtziele: unfertige Website veröffentlichenStart: 19.März.2012Ende: 29.März.2012Benötigte Ressourcen: Laptop, Internet, Joomla

4.7 ProjektauftragMit den bisherigen Planungsarbeiten wurde die Startphase beendet. ImProjektauftrag werden die wesentlichen Eckpunkte des Projektsbeschrieben, wie die Abgrenzung, die Projektorganisation, die Phasen desProjekts sowie die benötigten Ressourcen.

4.8 AbschlussprozessObwohl das Projekt inhaltlich abgeschlossen ist, ist es dennoch noch nichtbeendet. Beim Abschlussprozess werden die formale Abnahme desProjekts, das Lernen aus dem Projektverlauf, sowie die Durchführung derRestarbeiten geregelt.

4.9 ProjektdefinitionVoraussetzung für jedes erfolgreiche Projekt ist eine eindeutige Definitionder Aufgaben. Diese Aufgaben müssen sachlich, zeitlich und sozialabgegrenzt sein.

4.10ProjektstartUnser diesjähriges Projekt in dem Maturafach ICS „InformationCommunication Solutions“ startet am 22.09.2011 und gab uns alsAufgabe eine dynamische Website mit kreativen Elementen, mithilfe allunserer bisher gelernten Fähigkeiten zu erstellen.

5 Projektmanagement

5.1 ProjektProjekte sind einmalige Prozesse mit einen bestimmten Start- undEndtermin 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 ProjektmanagementprozessProjektmanagement ist eine Sammlung von Werkzeugen, die es ermöglicht, einekomplexe, 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-abschluss-prozess

Projektmarketing

Projektcontrolling

5.3 ProjektstrukturplanAufgrund der sachlichen Abgrenzung und der inhaltlichen Beschäftigungmit den Betrachtungsobjekten wird der inhaltliche Ablauf des Projektesfestgelegt.

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

5.3.1Projektstrukturplan

Zentrales Planungsinstrument im Projektmanagement

Beantwortet Frage nach dem „WIE“ im Projekt

Ein Projektstrukturplan (PSP) ist eine Übersicht, die alle zum Erreichen desProjektziels 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 gemeinsamerarbeitet

Neben den einzelnen Aktivitäten1 enthält er auch die Namen derVerantwortlichen 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 BezirkshandlungFleischhacker)

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.3Texte zweisprachig verfassen

Texte zweisprachig (Deutsch und Englisch) verfassen, gemeinsam mitProjektauftraggeber

Ziel: Fehlerfreie Texte verfassen

Nichtziel: Uninteressante, fehlerhafte Texte verfassen

5.5.4Template suchenEin passendes TYPO3/CSS Template suchen und entscheiden ob espassend ist

Ziel: passendes Template finden und auswählen

Nichtziel: Nur einer der Gruppe entscheidet, welches Template verwendetwird

5.5.5Startseite erstellen

Startseite erstellen mit Diashow

Ziel: Ansprechende Startseite erstellen

Nichtziel: Unübersichtliche Startseite gestalten

5.5.6Datenbank anlegen

Anlegen einer mySQL Datenbank

Ziel: Passend angelegte Datenbank

Nichtziel: Fehlerhafte Datenbank

5.5.7Website 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.1AP1: 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.1AP1: 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.1AP1: 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.2AP2: Texte zusammenfassen


Ziele: Texte bearbeiten und richtigstellen

Nichtziele: Fehler im Text, unvollständiger Text

Start: 26.Oktober.2011


Benötigte Ressourcen: Laptop, Word

6.3.3AP3: 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.4AP4: Bilder bearbeiten


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.1AP1: 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.2AP2: Entwurf


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

Nichtziele: unpassendes Design (Farben, Schrift)

Start: 7.Dezember.2011

Ende: 22.Dezember.2011


6.4.3AP3: Programmieren


Ziele: dynamische Seiten erstellen

Nichtziele: Seite funktioniert nicht

Start: 22.Dezember.2011

Ende: 29.Februar.2012


6.5 Meilenstein 5: Webseite getestet

6.5.1AP1: Website getestet


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 undveröffentlichen

6.6.1AP1: Website überarbeiten


Ziele: Bilder, Texte verbessern, kleine Änderungen vornehmen

Nichtziele: keine Verbesserungsmöglichkeiten

Start: 8.März.2012

Ende: 13.März.2012


6.6.2AP2: Website fertigstellen


Ziele: alles fertigstellen, alles funktioniert

Nichtziele: falsche, unfertige Hompage

Start: 13.März.2012

Ende: 19.März.2012


6.6.3

6.6.4AP3: Website veröffentlichen


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-Frameworkfür Websites, das ursprünglich von Kasper Skårhøjentwickelt wurde. TYPO3 basiert auf der Skriptsprache PHP. Als Datenbankkann MySQL, aber auch etwa PostgreSQL oder Oracle eingesetzt werden.Das System wird von zwei Teams, jeweils einem für TYPO3 und einem fürdessen Nachfolger mit dem Arbeitstitel Phoenix, weiterentwickelt.

Zahlreiche Funktionen können mit Erweiterungen2 integriert werden, ohnedass ein eigener Programmcode geschrieben werden muss. Die derzeitüber 5000 Erweiterungen stammen zum größten Teil von anderenAnbietern und sind kostenlos verfügbar. Erhältlich sind unter anderemNews, Shop-Systeme oder Diskussionsforen. Das System ist aufMehrsprachigkeit ausgelegt und wird von einer Anwender- undEntwicklergemeinde aus aller Welt betreut. TYPO3 gehört zusammen mitDrupal, Joomla! und WordPress zu den bekanntesten Content-Management-Systemen aus dem Bereich der freien Software, und wird vorallem 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 eingesetztwird.[6] TYPO3 stellt mittlere Anforderungen an die Leistungs- undKonfigurationsfähigkeit des verwendeten Servers.[7] Die Einarbeitungszeitfür einen Website-Entwickler beträgt mehrere Wochen bis Monate, füreinen Autor oder Redakteur je nach freigeschalteten Funktionen wenigeMinuten bis einige Stunden. Ein Entwickler, der eine TYPO3-Websiteeinrichten möchte, muss sich in der Regel intensiv mit der MetaspracheTypoScript beschäftigen.

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

7.2.1Seitenbaum

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

7.2.3TYPO3-Konstanten

7.2.4Universell gültige Konfigurationsparameter

7.2.5Template

Traditionell ein HTML-Gerüst mit einfachen Platzhaltern, sog. Markern undBereichsmarkierungen, sog. Subparts die von TYPO3 durch verschiedeneInhalte (Seitennavigation, Texte, Grafiken etc.) ersetzt werden bzw. alsUnter-Template dienen.

7.2.6TypoScript-Template

Mit dieser internen Konfigurationssprache wird beschrieben, wie TYPO3 dieInhalte ermittelt, formatiert und ausgibt.

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

7.2.7Erweiterungen

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

7.2.8PHP

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

8 GIMP

Ist ein kostenloses und freies Bildbearbeitungsprogramm. Es steht unterder GNU General Public License (GPL). Der Schwerpunkt der Software istdie intensive Bearbeitung einzelner Bilder, wofür vielfältige Effekte zurVerfügung stehen. Neben der Version für GNU/Linux und Unix existierenauch 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 PhotoscapeGrafiksoftware ist der Oberbegriff für vielerlei Arten von Programmen, dieim Grafikbereich mehr oder weniger zur Erstellung oder Bearbeitung vonBildern eingesetzt werden oder für ähnliche Funktionen dienen. Hierzugehören unter anderem Bildbearbeitungsprogramme, Malprogramme undVektorgrafikprogramme, aber auch andere nützliche Software, die untennäher erläutert wird.

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

9.1 Bildbearbeitungsprogramme:GIMP

Adobe Photoshop

Microsoft Foto Suite

PhotoImpact

PhotoLine

PicMaster

9.2 VektorgrafikprogrammeAdobe Fireworks

Adobe Illustrator

ConceptDraw (Mac und PC)

9.3 VektorisierungsprogrammeAdobe Streamline

autotrace (Opensource)

Corel Trace

9.4 LayoutprogrammeAdobe InDesign

Adobe PageMaker

Adobe Framemaker

Aufbau unserer Homepage

10 Unser Template

10.1Das ursprüngliche Template:Das ursprüngliche Template das wir als Design für unsere Homepageausgewählt haben, stammt von der Seitehttp://www.freecsstemplates.org/preview/morningdew/ und ist ein Typo3Template.

Abbildung 3 ursprüngliches Template

10.2Die Umgestaltung des Templates:Wir fangen damit an verschiedene Farben auszuprobieren. Nach einigenVersuchen wurde uns klar, dass wir auf jeden Fall Farben verwendenwollten, die man automatisch mit der Bezirkshandlung Fleischhacker undTupperware verbindet. So entscheiden wir uns für die Hauptfarbe Rosa inverschiedenen Variationen. Die genaue Farbgestaltung und das Erstellendes Banners gelangen uns mit dem Programm GIMP und Photoscape.

Die Gestaltung des Templates fiel uns Anfangs schwer doch schon nachkurzer Zeit ging es schnell voran und so hatten wir schon bald unserfertiges Design.

Abbildung 4 Header

Abbildung 5 fertiges Design

10.3Der 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 Einstellungenfü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 einernormalen Aufzählung. Um eine Zentrierung zu erreichen ist die Aufzählungvon links nach rechts genau definiert worden. Die Farben der einzelnenMenü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 beiden anderen Informationen über den Betrieb. Die Smooth Gallery ist eineExtension 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 Ergebnissieht 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 InEs wurde das Extension „Simple Kalender“ heruntergeladen und wurde alsPlug 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 Kalendereingetragen werden.

10.3.9 Body:In diesem Feld wird der gesamte Inhalt unsere Homepage dargestellt. Hiersind 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.1Die Datenbank:

Die ersten Schritte für den Inhalt unseres Projektes waren die Erstellungeines ER-Diagramms und anschließend die darauffolgende Einstellung derDatenbank.

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 einefunktionsfähige Homepage vorweisen können.

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

Die Arbeit an unserem Projekt war zwar oft hart und anstrengend,dennoch stets spannend und interessant. Das Wichtigste ist, so denkenwir, dass wir an der Umsetzung dieses praktischen Beispiels sehr vielgelernt haben. Heute wissen wir, dass man nur mit guter Planung einerfolgreiches Projekt abschließen kann. Einen entscheidenden Punktkonnten wir aus unserem Projekt noch mitnehmen und zwar, dass ohnedas „Team“ und die Kommunikation ein gutes Projekt nicht abgewickeltwerden kann.

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

Fachspezifische Themenstellung BZH

Documents

Transcript of Fachspezifische Themenstellung BZH