Upload
astrid-fleischhacker
View
224
Download
2
Embed Size (px)
DESCRIPTION
Bezirkshandlung Fleischhacker Astrid Fleischhacker, Ines Bauer, Lisa Knotzer Pannoneum, ICS, 5BW, Typo3
Citation preview
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
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
6.3.3AP3: 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
6.3.4AP4: 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
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
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
6.4.3AP3: 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
6.5 Meilenstein 5: Webseite getestet
6.5.1AP1: 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 undveröffentlichen
6.6.1AP1: 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
6.6.2AP2: 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
6.6.3
6.6.4AP3: 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
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.