Post on 09-Mar-2016
description
transcript
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- abschluss- prozess
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
Ende: 17.November.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
Ende: 17.November.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
Ende: 17.November.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
Benötigte Ressourcen: Laptop, Internet, Joomla
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
Benötigte Ressourcen: Laptop, Internet, Joomla
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
Benötigte Ressourcen: Laptop, Internet, Joomla
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
Benötigte Ressourcen: Laptop, Internet, Joomla
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
Benötigte Ressourcen: Laptop, Internet, Joomla
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.