2011 Fachspezifische Themenarbeit Information & Communication Solutions
HATSKO KOLO NOVO SELO
SCHWERPUNKT: PHP/ MySQL
PROJEKTLEITER: Flenreisz Bianca
PROJEKTMITARBEITER: Rieder Lisa
1 Inhaltsverzeichnis
1
Inhaltsverzeichnis ................................................................................ 2
2
Abbildungsverzeichnis ......................................................................... 5
3
Kurzfassung ........................................................................................ 7
4
Abstract ............................................................................................... 8
5
Projektmanagement ............................................................................ 9 5.1
„Projekt― ........................................................................................ 9
5.2
Projektmanagementprozess ......................................................... 9
5.3
Abgrenzungen im Prozess .......................................................... 10
5.3.1
Zeitliche Abgrenzung .................................................................. 10
5.3.2
Sachliche Abgrenzung ................................................................ 10
5.3.3
Soziale Abgrenzung .................................................................... 10
5.4
Projektstrukturplan ...................................................................... 11
5.4.1
Projektstrukturplan ...................................................................... 11
5.4.2
Unser Projektstrukturplan ........................................................... 12
5.5
Planung der Arbeitspakete.......................................................... 13
5.5.1.1
Thema wählen ......................................................................... 14
5.5.1.2
Inhalte festlegen ...................................................................... 14
5.5.1.3
Texte zweisprachig verfassen ................................................. 14
5.5.1.4
Template suchen ..................................................................... 14
5.5.1.5
Startseite erstellen ................................................................... 14
5.5.1.6
Datenbank anlegen ................................................................. 15
5.5.1.7
Website veröffentlichen ........................................................... 15
5.6
Meilensteinplan ........................................................................... 15
5.6.1
Unser Meilensteinplan ................................................................ 16
Bianca Flenreisz & Lisa Rieder
2/50
5.7
Projektdokumentation ................................................................. 19
5.7.1
Unsere Projektdokumentation ..................................................... 19
5.8
Projektauftrag ............................................................................. 22
5.9
Abschlussprozess ....................................................................... 22
6
Grundlagen........................................................................................ 23 6.1
HTML .......................................................................................... 23
6.1.1
Allgemeiner Aufbau .................................................................... 23
6.1.2
HTML-Kopf ................................................................................. 25
6.1.3
HTML-Kรถrper .............................................................................. 25
6.1.4
Steckbrief .................................................................................... 26
6.2
CSS ............................................................................................ 26
6.2.1
Steckbrief .................................................................................... 27
6.3
MySQL ........................................................................................ 27
6.3.1
Geschichte .................................................................................. 27
6.3.2
Beschreibung .............................................................................. 28
6.3.3
Steckbrief .................................................................................... 29
6.3.4
ER-Diagramm ............................................................................. 29
6.3.4.1
Unser ER-Diagramm ............................................................... 29
6.4
PHP ............................................................................................ 30
6.4.1
Code Beispiel.............................................................................. 31
6.4.2
Steckbrief .................................................................................... 32
6.5
GIMP........................................................................................... 32
6.5.1
Steckbrief .................................................................................... 33
6.6
Phase 5....................................................................................... 33
6.6.1
Steckbrief .................................................................................... 33
6.7
jAlbum ......................................................................................... 34
Bianca Flenreisz & Lisa Rieder
3/50
6.7.1
Skins ........................................................................................... 34
6.7.2
Veröffentlichen ............................................................................ 34
7
Aufbau unserer Homepage ............................................................... 36 7.1
Unser Template .......................................................................... 36
7.1.1
das ursprüngliche Template........................................................ 36
7.1.2
Die Umgestaltung des Templates ............................................... 37
7.1.3
Der Aufbau unseres Templates .................................................. 38
7.1.3.1
„header― ................................................................................... 39
7.1.3.2
„menu― ..................................................................................... 39
7.1.3.3
„sidebar1― ................................................................................ 40
7.1.3.4
„body― ...................................................................................... 41
7.2
Der Inhalt unserer Homepage ..................................................... 42
7.2.1
Die Datenbank ............................................................................ 42
7.2.1.1 7.2.2
Eine Datenbankanbindung ...................................................... 43 Die einzelnen Seiten ................................................................... 44
7.2.2.1
index_de.php & index_kr.php .................................................. 44
7.2.2.2
neudorf_de.php & neudorf_kr.php ........................................... 45
7.2.2.3
erfolge_produktionen_de.php & erfolge_produktionen_kr.php 46
7.2.2.4
aktuelles_de.php & aktuelles_kr.php ....................................... 47
7.2.2.5
impressum_de.php & impressum_kr.php ................................ 48
8
Schlusswort ....................................................................................... 49
9
Quellenverzeichnis ............................................................................ 50
Bianca Flenreisz & Lisa Rieder
4/50
2 Abbildungsverzeichnis Abbildung 1: Projektmanagementprozess ................................................. 9 Abbildung 2: Projektstrukturplan .............................................................. 12 Abbildung 3: HTML .................................................................................. 23 Abbildung 4: Titelleiste ............................................................................. 25 Abbildung 5: CSS..................................................................................... 26 Abbildung 6: mySQL ................................................................................ 27 Abbildung 7: ER-Diagramm ..................................................................... 29 Abbildung 8: PHP..................................................................................... 30 Abbildung 9: GIMP ................................................................................... 32 Abbildung 10: Phase 5 ............................................................................. 33 Abbildung 11: jAlbum ............................................................................... 34 Abbildung 12: Urspr端ngliches Template .................................................. 36 Abbildung 13: Banner .............................................................................. 37 Abbildung 14: Umgestaltetes Template ................................................... 38 Abbildung 15: Aufbau Template ............................................................... 38 Abbildung 16: Datenbank ......................................................................... 42 Abbildung 17: Index, deutsch ................................................................... 44 Abbildung 18: Index, kroatisch ................................................................. 44 Abbildung 19: Neudorf, deutsch ............................................................... 45 Abbildung 20: Neudorf, kroatisch ............................................................. 45 Abbildung 21: Erfolge und Produktionen, deutsch ................................... 46 Abbildung 22: Erfolge und Produktionen, kroatisch ................................. 46 Abbildung 24: Aktuelles, deutsch ............................................................. 47
Bianca Flenreisz & Lisa Rieder
5/50
Abbildung 23: Aktuelles, kroatisch ........................................................... 47 Abbildung 25: Impressum, deutsch .......................................................... 48 Abbildung 26: Impressum, kroatisch ........................................................ 48
Bianca Flenreisz & Lisa Rieder
6/50
3 Kurzfassung Im Rahmen unseres Ausbildungsschwerpunktes „Information and Communication Solutions― erarbeiteten wir für den Tamburizzaverein „Hatsko Kolo Novo Selo― 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 unser Interesse am Tamburizzaverein „Hatsko Kolo―, sowie der Wunsch der Mitglieder auch im Internet vertreten zu sein. Wir hoffen, dass der Tamburizzaverein „Hatsko Kolo― mit dieser Homepage an Popularität gewinnt.
Auf den folgenden Seiten finden Sie eine genaue Dokumentation unseres Projekts.
Bianca Flenreisz & Lisa Rieder
7/50
4 Abstract Within the scope of our subject ―Information and Communication Solutions‖, we have created a web-based, electronic information platform with dynamic database connection for the tamburizzaverein ―Hatsko Kolo Novo Selo‖. We want to combine our knowledge about World Wide Web in this project. The reason for our decision to make this project is that we are very interested in the tamburizzaverein. Moreover the club wants to be represented on the Internet too. We hope that we can make the tamburizzaverein ―Hatsko Kolo Novo Selo‖ a little bit more popular with this homepage.
On the following pages you’ll find the documentation about our project.
Bianca Flenreisz & Lisa Rieder
8/50
5 Projektmanagement 5.1 „Projekt“ Projekte sind einmalige Prozesse mit einem 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 Mitarbeitern durchgeführt wird, gegenüber anderen Tätigkeiten abgegrenzt ist und einer projektspezifischen Organisation unterliegt.
Für die Aufgabenstellung ist ein eigenes soziales System (Projektteam) mit einer eigenen Arbeitsform (Projekt) sowie eigenen Arbeitsmitteln (PMTools) 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 ist prozessorientiert strukturiert.
Abbildung 1: Projektmanagementprozess Bianca Flenreisz & Lisa Rieder
9/50
5.3 Abgrenzungen im Prozess Die Abgrenzungen kann man in zeitlicher Hinsicht (Projektstart – Projektende) sachlicher Hinsicht (Ziele, Nicht-Ziele eines Projekts) und sozialer Hinsicht betrachten.
5.3.1 Zeitliche Abgrenzung Bei der zeitlichen Abgrenzung wird der Starttermin festgesetzt sowie mit einem Startereignis (zB Genehmigung der Projektantrages) gekoppelt und der Endtermin sowie das dazugehörige Endereignis (zB Abhalten der Endpräsentation) geplant.
5.3.2 Sachliche Abgrenzung Bei der sachlichen Abgrenzung ist zu bestimmen, was alles im Projekt „Ziele― und was alles „Nicht-Ziele― sind. Wie müssen Ziele sein? Spezifisch (konkret formuliert) Messbar (es muss erkennbar sein, dass die Ziele erreicht wurden) Attraktiv (es muss sich lohnen, sich für ein Ziel zu engagieren) Realistisch (muss im Bereich des Möglichen sein) Terminisiert (es muss klar sein, wann die Ziele erreicht sind).
5.3.3 Soziale Abgrenzung Die soziale Abgrenzung legt die Verantwortlichkeiten im Projekt fest. Die individuelle Rollenbildung erfolgt im Start-Workshop; es muss Konsens über die Rollenverteilung herrschen.
Bianca Flenreisz & Lisa Rieder
10/50
5.4 Projektstrukturplan Aufgrund der sachlichen Abgrenzung und der inhaltlichen Beschäftigung mit den Betrachtungsobjekten wird der inhaltliche Ablauf des Projekts 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.4.1 Projektstrukturplan zentrales Planungsinstrument im Projektmanagement beantwortet Frage nach dem „WIE― im Projekt Ein Projektstrukturplan (PSP) ist eine (in der Regel graphische) Übersicht, die alle zum Erreichen des Projektziels notwendigen Aktivitäten enthält. Enthält die Struktur der im Projekt zu bewältigenden Aktivitäten Strukturierung in mehrere Ebenen Projekttitel Teilaufgaben (TA) Arbeitspakete (AP) 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.
Bianca Flenreisz & Lisa Rieder
11/50
Neben den einzelnen Aktivitäten (man spricht oft auch von "Vorgängen") enthält er auch die Namen der Verantwortlichen für deren Durchführung.
5.4.2 Unser Projektstrukturplan
Hatsko Kolo Tamburizzaverien Neudorf
Konzept erstellt, von Auftraggeber freigegeben
Texte und Bilder gesammelt
Layout festgelegt
Einzelne Seiten fertiggestellt
Webseite ist veröffentlicht
Thema des Projekts auswählen
Inhalte der Texte mit Auftraggeber besprechen
Template finden
Startseite erstellen
Domainname aussuchen
Inhalte der Homepage festlegen
Welche Themen (Texte) sollen eingebaut werden
Template den Farben des Vereins anpassen
Navigationsleiste erstellen
Webseite uploaden
Überlegungen des Inhaltes mit Projektauftraggeber besprechen
Texte zweisprachig verfassen
Template umgestalten
Einzelne Seiten fertigstellen
Kontrollieren ob auch online alles funktioniert
Projektauftraggeber hat die Homepage als Auftrag gegeben
Welche Bilder sollen verwendet werden
Schriftarten im Template festlegen
Seiten miteinander verlinken
Weiterführen der Webseite
Bilder im passenden Format und in der passenden Größe bearbeiten
Alle Seiten kontrollieren
Abbildung 2: Projektstrukturplan
Bianca Flenreisz & Lisa Rieder
12/50
5.5 Planung der Arbeitspakete Arbeitspakete sind plan- und kontrollierbare Tätigkeitsbeschreibungen, die von einzelnen Mitarbeitern zur Bearbeitung übernommen werden. Sie sind die Unterpunkte zu den Hauptphasen eines Projektes 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 AP 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 Arbeitspakten wieder zu finden sind.
Danach sind die einzelnen Arbeitspakte zu nummerieren. Bei der Benennung der Arbeitspakete sind immer ein Haupt- und ein Zeitwort zu vergeben (zB „Endfassung schreiben―), um Missverständnisse zu vermeiden.
Bianca Flenreisz & Lisa Rieder
13/50
Einige unserer Arbeitspakete 5.5.1.1 Thema wählen Inhalt: Thema des Projekts auswählen (Homepage für Tamburicaverein) Ziel: Ein für uns interessantes Thema finden Nichtziel: Thema wählen, zu dem wir keinen Bezug haben
5.5.1.2 Inhalte festlegen Inhalt: Inhalte der Homepage festlegen Ziel: Nur die wesentlichen Bereiche einbringen Nichtziel: Unbrauchbares weglassen
5.5.1.3 Texte zweisprachig verfassen Inhalt: Texte zweisprachig (Deutsch und Kroatisch) verfassen, gemeinsam mit Projektauftraggeber Ziel: Fehlerfreie Texte verfassen Nichtziel: Uninteressante, fehlerhafte Texte verfassen
5.5.1.4 Template suchen Inhalt: Ein passendes XHTML/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.1.5 Startseite erstellen Inhalt: Startseite erstellen, ebenfalls zweisprachig Ziel: Ansprechende Startseite gestalten Nichtziel: Unübersichtliche Startseite gestalten
Bianca Flenreisz & Lisa Rieder
14/50
5.5.1.6 Datenbank anlegen Inhalt: Anlegen einer mySQL Datenbank Ziel: Passend angelegte Datenbank Nichtziel: Fehlerhafte Datenbank
5.5.1.7 Website veröffentlichen Inhalt: Website mittels FTP uploaden Ziel: Funktionstüchtige Website online Nichtziel: Fehlerhafte Website online
5.6 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 der Projektstrukturplan. Es sollen nicht zu viele Meilensteine geplant werden (ca. 8-10), sonst verlieren
diese
ihre
„Tagesgeschäft― unter.
strategische
Bedeutung
und
gehen
im
Projektstart und Projektende sind immer
Meilensteine.
Meilensteine sind keine zu lösende Aufgaben, sondern stellen Zeitpunkte dar, die mit keinem Aufwand verbunden sind. Die Meilensteine sind auch im Projektstrukturplan festzuhalten. Ist ein Termin laut Meilensteinplan nicht zu halten, so muss er im aktuellen Plan geändert werden. Der Endtermin ist jedoch zu halten. Es ist auch möglich, die Meilensteinplanung vom Ende her zu beginnen, wenn es sich um einen fixen Termin handelt.
Bianca Flenreisz & Lisa Rieder
15/50
5.6.1 Unser Meilensteinplan
AP
Start
Inhalt, Wer ist zuständig?
-
Ende
Thema des Projekts auswählen
AP1
(Homepage
für
Tamburizzaverein)
Ein 22.9 – 29.9
Rieder, Flenreisz
AP2
AP4
für
Thema
uns
interessantes
finden
/
Thema
verwenden, zu dem wir keinen Bezug haben
Inhalte der Homepage festlegen Rieder, Flenreisz
Nur 22.9 – 29.9
die
wesentlichsten
Bereiche
festlegen
/
unbrauchbares weglassen
Überlegungen des Inhaltes mit
AP3
Ziel / Nichtziel
Projektauftraggeber besprechen
Eine Lösung finden, mit der 22.9 – 29.9
beide Parteien einverstanden
Rieder, Flenreisz, Auftraggeber
sind / keine Konflikte
Projektauftraggeber
Einverständnis
hat
die
Homepage als Auftrag gegeben
22.9 – 29.9
Projektauftraggeber
Bianca Flenreisz & Lisa Rieder
des
Projektauftraggebers / trotz der vorigen AP keine Freigabe
16/50
AP
AP1
Inhalt, Wer ist zuständig?
Inhalte
der
Texte
mit
Auftraggeber besprechen
Welche Themen (Texte) sollen
AP2
eingebaut werden Rieder, Flenreisz
Start
-
Ende
29.9
Ziel / Nichtziel
–
10.11
29.9
–
10.11
Nur die brauchbaren Inhalte verwenden
/
Zu
lange,
uninteressante Texte
Texte zweisprachig verfassen,
AP3
mit
Projektauftraggeber
besprechen
6.10
–
15.12
Fehlerfreie Texte verfassen / fehlerhafte Texte verfassen
Rieder, Flenreisz
Welche Bilder sollen verwendet
AP4
werden Rieder, Flenreisz, Auftraggeber
29.9
–
10.11
die
verwenden
nötigsten /
Bilder
Bilder mit
schlechter Qualität verwenden
Bilder im passenden Format
AP5
Nur
Format wählen, dass jeder
und in der passenden Größe
29.9
bearbeiten
10.11
Rieder, Flenreisz
Bianca Flenreisz & Lisa Rieder
–
öffnen kann / zu große bzw. zu
kleine
Bildgröße
verwenden
17/50
AP
AP1
Inhalt, Wer ist zuständig?
AP2
29.9 – 17.11
Rieder, Flenreisz
den
Ende
-
Ziel / Nichtziel
Passendes Template finden
Template finden
Template
Start
/
unübersichtliches
Template auswählen
Farben
des
Passende 29.9 – 17.11
Vereins anpassen Rieder, Flenreisz
Farbnuancen
verwenden / Zu bunte Farbwahl Unsere
AP3
Template umgestalten Rieder, Flenreisz
29.9 – 17.11
Menüpunkte
passend einbinden / nicht zu viele Untermenüpunkte verwenden
Schriftarten
AP4
im
Template
Gut 29.9 – 17.11
festlegen Rieder, Flenreisz
Bianca Flenreisz & Lisa Rieder
Lesbare
Schriftart
verwenden / verschnörkelte Schriftarten verwenden
18/50
AP
Inhalt, Wer ist zuständig?
Start Ende
-
Ziel / Nichtziel Ansprechende
AP1
Startseite
Startseite erstellen
gestalten
/
Rieder, Flenreisz
unübersichtliche Startseite gestalten
AP2
AP3
AP4
AP5
Navigationsleiste erstellen Rieder, Flenreisz
Einzelne Seiten fertigstellen Rieder, Flenreisz
Seiten miteinander verlinken Rieder, Flenreisz
Alle Seiten kontrollieren Rieder, Flenreisz
Überschaubare Menüleiste / Zu viele Menüpunkte Alle
Inhalte
einfügen
fehlerhafte
/
Inhalte
einfügen Buttons
funktionieren
/
verschnörkelte Schriftarten verwenden Alle
Seiten
funktionstüchtig
sind /
Links
funktionieren nicht
5.7 Projektdokumentation Während des gesamten Projekts werden die einzelnen Schritte im Projekthandbuch dokumentiert.
5.7.1 Unsere Projektdokumentation 22. September 2010 Arbeitspakete erstellen Präsentation erstellen
29. September 2010 Meilensteinplan erstellen Projektstrukturplan erstellen
Bianca Flenreisz & Lisa Rieder
19/50
6. Oktober 2010 Template suchen Erste Ver채nderung des Templates
20. Oktober 2010 Texte verfassen Texte und Bilder sammeln
27. Oktober 2010 Template fertigstellen CSS erstellen Men체 erstellen
3. November 2010 Seiten auf Deutsch erstellen Seiten auf Kroatisch erstellen
10. November 2010 Vortrag Firma AKM
17. November 2010 Sidebar 1 erstellen Weitere Seiten erstellen
24. November 2010 Weitere Seiten erstellen Fotoalben erstellen und einbinden
1. Dezember 2010 Fotoalbum anpassen Sidebar 1 formatieren
Bianca Flenreisz & Lisa Rieder
20/50
15. Dezember 2010 ICS-Schularbeit
22. Dezember 2010 Seiten verlinken CSS überarbeiten, Fehler beheben
12. Jänner 2011 Sidebar 1 verbessern Einzelne Berichte bearbeiten
19. Jänner 2011 Fehler ausbessern „Altes― Gästebuch erstellen
26. Jänner 2011 ER-Diagramm erstellen Umlaute formatieren
2. Februar 2011 Referate Datenbank angelegt (Termine) Sidebar 2 formatiert
9. Februar 2011 Schulentlassttage Zwettl
23. Februar 2011 Gästebuch installieren Gästebuch bearbeiten
Bianca Flenreisz & Lisa Rieder
21/50
2. März 2011 ICS-Schularbeit Datenbankanbindung erstellen
16. März 2011 Referate Ausarbeitung begonnen
23. März 2011 Homepage fertigstellen Ausarbeitung fertigstellen Abgabetermin
5.8 Projektauftrag Mit den bisherigen Planungsarbeiten wurde die Startphase beendet. Im Projektauftrag beschrieben,
werden wie
die
die
wesentlichen
Abgrenzungen,
Eckpunkte die
des
Projekts
Kontextbildungen,
die
Projektorganisation, die Phasen des Projekts sowie die benötigten Ressourcen.
Er ist Teil des Projekthandbuchs und wird gemeinsam zwischen Projektleiter
und
Projektauftraggeber
vereinbart
und
von
beiden
unterschrieben. Dies bedeutet ein eindeutiges „Commitment― zum Projekt und ermöglicht klare Vereinbarungen hinsichtlich zielorientierten Handelns
5.9 Abschlussprozess Obwohl das Projekt inhaltlich abgeschlossen ist, ist es denoch noch nicht beendet. Beim Abschlussprozess werden die formale Abnahme des Projekts, das Lernen aus dem Projektverlauf sowie die Durchführung der Restarbeiten (zB. Dokumentation) geregelt.
Bianca Flenreisz & Lisa Rieder
22/50
6 Grundlagen 6.1 HTML Abbildung 3: HTML
HTML1 ist zur Strukturierung von Inhalten wie Texte, Bilder und Hyperlinks in Dokumenten. HTML2-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser (z. B. Internet Explorer, Mozilla Firefox, Safari, Opera, etc.) dargestellt. HTML enthält zusätzliche Angaben in Form von
Metainformationen3 die z. B. den Inhalt des Textes
zusammenfassen und über die verwendete Sprache bzw. den Autor Auskunft geben. Im HTML besteht die Extensible Hypertext Markup Language (XHTML) und die Auszeichnungssprache wird vom W3C (World Wide Web Consortium) weiterentwickelt.
6.1.1 Allgemeiner Aufbau Ein HTML-Dokument besteht aus drei Bereichen: Doctype: Dokumentendeklaration ganz am Anfang der Datei, die die verwendete Dokumentendefinition angibt. Head: HTML-Kopf, der hauptsächlich technische oder dokumentarische Informationen enthält, die üblicherweise nicht im Anzeigebereich des Browsers dargestellt werden. Body: HTML – Körper, der jene Informationen enthält, die normalerweise im Anzeigebereich des Browsers zu sehen sind.
1
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
2
Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache)
3
Sind Daten, die Informationen über andere Daten enthalten.
Bianca Flenreisz & Lisa Rieder
23/50
Die Grundstruktur einer Website sieht folgendermaßen aus:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//DE"
"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Titel der Webseite </title> <!—können auch mehrere Kopfinformationen enthalten sein --> </head> <body> Inhalt der Webseite </body> </html>
Bianca Flenreisz & Lisa Rieder
24/50
6.1.2 HTML-Kopf Im Kopf können sieben verschiedene Elemente angewandt werden: title benennt den Titel der Seite, der von den Browsern in der Titelleiste angezeigt wird
Abbildung 4: Titelleiste
meta kann vielfältige Metadaten enthalten. base gibt entweder eine Basis-URL oder einen Basisframe an link dient zur Angabe von Beziehungen zu anderen Ressourcen script in einer bestimmten Skriptsprache wird ein Code eingebunden style enthält Stilinformationen (hauptsächlich CSS-Deklarationen) object bindet eine externe Datei ein
6.1.3 HTML-Körper HTML
unterscheidet
zwischen
Block-
und
Inline-Elementen.
Der
essentielle Unterschied ist, dass Block- Elemente in der Ausgabe einen eigenen Block erzeugen, in dem der Inhalt untergebracht wird, während die Inline-Elemente den Textfluss nicht unterbrechen – dabei sei gesagt, dass einige Elemente mit Hilfe von CSS in das andere Format transformiert werden können. Zu den Block-Elementen gehören z. B. die Überschriften und die Tabellen.
Bianca Flenreisz & Lisa Rieder
25/50
6.1.4 Steckbrief
Dateiendung:
.html, .htm
MIME-Type:
text/html
Entwickelt von:
World Wide Web Consortium
Art:
Auszeichnungssprache
Container für:
SGML
Erweitert zu:
XHTML
Standard(s):
W3C HTML 4.01 W3C HTML 3.2
Abbildung 5: CSS
6.2 CSS Cascading Style Sheets4 ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente und wir vor allem zusammen mit HTML und XML eingesetzt. Inhalte oder Bereiche werden in der CSS Datei festgelegt wie sie später dargestellt werden sollen. Es ist besonders wichtig das HTML und XML so zu gestalten, dass die Abschnitte und deren Aussehen gleich sind um so derselben Klasse angehörend erkannt werden können. Man zeichnet im HTML-Dokument also nur die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Anders gesagt, man trennt den Inhalt von der optischen Gestaltung. Mit CSS kann man nicht nur diverse Angaben zu Farben und Schriften festlegen, sondern man hat ebenfalls die Möglichkeit Elemente frei zu positionieren oder Hintergrundbilder festzulegen. 4
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
Bianca Flenreisz & Lisa Rieder
26/50
CSS gilt heutzutage als die Standard-Stylesheetsprache für Webseiten.
6.2.1 Steckbrief
Dateiendung:
.css
MIME-Type:
text/css
Entwickelt von:
Consortium
Art:
Stylesheet-Sprache
Standard(s):
Level 1 (Recommendation) Level 2 (Recommendation) Level 3 (Candidate Recommendation)
Abbildung 6: mySQL
6.3 MySQL Der MySQL5 Server ist ein relationales Datenbankverwaltungssystem. Es ist für verschiedene Betriebssysteme als Open-Source-Software sowie als kommerzielle Enterpriseversion für verfügbar und bildet die Grundlage für reichlich dynamische Webauftritte. 6.3.1 Geschichte Das schwedische Unternehmen MySQL AB entwickelte ursprünglich den MySQL Server. Im Februar 2008 wurde MySQL AB von Sun Microsystems übernommen, das nun für die Weiterentwicklung des Codes verantwortlich ist. Im Januar 2010 hat Oracle Sun Microsystems übernommen, wodurch 5
http://de.wikipedia.org/wiki/Mysql
Bianca Flenreisz & Lisa Rieder
27/50
MySQL Eigentum eines der größten Anbieter von kommerziellen Datenbanken wurde. 6.3.2 Beschreibung Ein duales Lizenzsystem wird von Oracle für den Vertrieb von MySQL Server verwendet. Einerseits ist das Programm eine freie Software, welche unter der General Public License (GPL) steht, andererseits wird es auch unter einer kommerziellen Lizenz angeboten, da MySQL AB/Sun das volle Copyright an den Quellcodes besitzt. Der Name MySQL setzt sich zusammen aus dem Vornamen My, den die Tochter des Mitbegründers Michael Widenius trägt, und SQL, dem Kürzel für Structured Query Language (Strukturierte Abfragesprache). Neben vielen Unix-Varianten, Mac OS X und Linux läuft MySQL auch auf Windows, OS/2 und i5/OS. Seit Anfang 2008 gibt es auch eine SymbianVariante. Für Windows werden allerdings einige Einschränkungen genannt.
Bianca Flenreisz & Lisa Rieder
28/50
6.3.3 Steckbrief
Entwickler:
Oracle Corporation (bis Februar 2008: MySQL AB, bis J채nner 2010: Sun Microsystems
Aktuelle Version:
5.5.9 (7. Februar 2011)
Betriebssystem:
Unix, Linux, Windows, Mac OS X, i5/OS, OpenVMS
Programmiersprache:
C, C++
Kategorie:
Datenbankmanagementsystem
Lizenz:
Duales Lizenzsystem (Propriet채r und GPL )
Deutschsprachig:
Ja (z. B. Fehlermeldungen)
6.3.4 ER-Diagramm Das Entity-Relationship-Modell, kurz ER-Modell oder ERM, deutsch Gegenstands-Beziehungs-Modell,
dient
dazu,
im
Rahmen
der
semantischen Datenmodellierung einen Ausschnitt der realen Welt zu beschreiben. Das ER-Modell besteht aus einer Grafik und einer Beschreibung der darin verwendeten Elemente, wobei Dateninhalte (d.h. die Bedeutung bzw. Semantik der Daten) und Datenstrukturen dargestellt werden.
6.3.4.1 Unser ER-Diagramm
Abbildung 7: ER-Diagramm
Bianca Flenreisz & Lisa Rieder
29/50
Abbildung 8: PHP
6.4 PHP
PHP6 ist eine Skriptsprache mit einer an C und Perl angelehnten Syntax,
die
hauptsächlich
zur
Erstellung
dynamischer
Webseiten
oder
Webanwendungen verwendet wird. PHP7 wird als freie Software unter der PHP-Lizenz verbreitet.
PHP zeichnet sich durch die breite Datenbankunterstützung und InternetProtokolleinbindung
sowie
die
Verfügbarkeit
zahlreicher
Funktionsbibliotheken aus. PHP wird auf ca. 75% aller Websites als serverseitige Programmiersprache eingesetzt, und ist damit die am häufigsten verwendete Sprache zum Erstellen von Websites.
6 7
http://de.wikipedia.org/wiki/Php Ist ein rekursives Akronym für „PHP: Hypertext Preprocessor―, Backronym aus
„Personal Home Page Tools―.
Bianca Flenreisz & Lisa Rieder
30/50
6.4.1 Code Beispiel <?php echo "Hatsko Kolo Novo Selo"; ?> Das Skript in HTML integriert (gibt ebenfalls „Hatsko Kolo Novo Selo― auf der Webseite aus):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Hatsko Kolo-Beispiel</title> </head> <body> <?php echo "Hatsko Kolo Novo Selo"; ?> </body> </html>
Bianca Flenreisz & Lisa Rieder
31/50
6.4.2 Steckbrief Paradigmen:
imperativ, objektorientiert
Erscheinungsjahr:
1995
Designer:
Rasmus Lerdorf
Entwickler:
The PHP Group
Aktuelle Version:
5.3.6 (17. März 2011)
Typisierung:
schwach, dynamisch
Einflüsse:
Perl, C, C++, Java
Betriebssystem:
plattformunabhängig
Lizenz:
PHP-Lizenz
6.5 GIMP Abbildung 9: GIMP
GIMP8 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.
8
http://de.wikipedia.org/wiki/Gimp
Bianca Flenreisz & Lisa Rieder
32/50
6.5.1 Steckbrief Entwickler:
Das GIMP-Team
Aktuelle Version:
2.6.11 (4. Oktober 2010)
Betriebssystem:
Linux, Mac OS X, Windows
Programmiersprache:
C
Kategorie:
Grafik-Software
Lizenz:
GPL Version 2
Deutschsprachig:
ja
Abbildung Phase 5
6.6 Phase 5
HTML-Editor phase 59 ist ein für den Privatgebrauch oder Schulen (nichtkommerzielle Nutzung) kostenloses Programm zum Erstellen von HTML-Dokumenten unter Windows. Er wurde ursprünglich seit 1996 von Ulrich Meybohm entwickelt und wird seit 1998 von Hans-Dieter Berretz weiterentwickelt. Die Entwicklung des Programms wird in Phasen ausgedrückt (aktuell „phase 5―).
6.6.1 Steckbrief
Entwickler:
Hans-Dieter Berretz (aktuell Ulli Meybohm)
Aktuelle Version:
5.6.2.3 (19. Juni 2009)
Betriebssystem:
Windows
Kategorie:
HTML-Editor
Sprache:
Deutsch
9
http://de.wikipedia.org/wiki/HTML-Editor_Phase_5
Bianca Flenreisz & Lisa Rieder
33/50
10:
Abbildung 11: jAlbum
6.7 jAlbum
jAlbum10 ist ein Programm welches zur Erstellung von Bilderalben im Internet konzipiert wurde. Der bei weitem Zeit raubendste Teil bei der Erstellung von Bilderalben oder ähnlichen Webseiten in denen viele einzelne Abbildungen dargestellt werden, ist die Bearbeitung und die Organisation der einzelnen Bilder. Und genau da liegen die großen Stärken von jAlbum. Durch Nutzung dieses Generators, reduziert sich der Erstellungsaufwand auf ein Minimum, da man sich lediglich mit den Grundeinstellungen zu befassen hat, die Bilder auswählt und aus einer Vielzahl von optischen Darstellungsvarianten seine Wahl zu treffen hat. Alles Weitere übernimmt das Programm.
6.7.1 Skins Das Aussehen und der Aufbau der erstellten Bilderalben ist durch eine Vielzahl
an
Vorlagen,
sogenannten
„Skins―
nahezu
vollständig
individualisierbar. Die Auswahl reicht hier von der einfachsten statischen HTML-Seite, über eine Shockwave-3D Gallerie bis hin zum bekannten page-flip in flash.
6.7.2 Veröffentlichen jAlbum bietet die Möglichkeit, die erstellten Bilderalben direkt aus dem Programm heraus auf einen webspace hochzuladen. Dazu wurde eine Art
10
http://cimms.de/jalbum.html
Bianca Flenreisz & Lisa Rieder
34/50
FTP-Manager integriert, der auch die MĂśglichkeit des Dateiabgleichs und der komprimierten DateiĂźbertragung bietet.
Bianca Flenreisz & Lisa Rieder
35/50
7 Aufbau unserer Homepage 7.1 Unser Template
7.1.1 Das ursprüngliche Template
Das ursprüngliche Template, das wir als Design für unsere Homepage gewählt haben, stammt von der Seite http://www.freewebtemplates.com und ist ein x-html Template.
Abbildung 12: Ursprüngliches Template
Bianca Flenreisz & Lisa Rieder
36/50
7.1.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 dem Hatsko Kolo Novo Selo verbindet, gewissermaßen ein Cooperate Design. So entscheiden wir uns für die Hauptfarbe Blau in verschiedene Variationen. Die genaue Farbgestaltung und das Erstellen des Banners gelangen uns mit dem Programm „Gimp―.
Für den Banner hatten wir einen Vorschlag, der uns von Anhieb gut gefiel.
Abbildung 13: Banner
Bianca Flenreisz & Lisa Rieder
37/50
Die Umgestaltung des Templates viel uns anfangs etwas schwer doch schon nach kurzer Zeit ging es schnell voran und so hatten wir schon bald unser fertiges Designs.
Abbildung 14: Umgestaltetes Template
7.1.3 Der Aufbau unseres Templates Unser Template wird mit Hilfe der .css Datei â&#x20AC;&#x17E;hatsko_kolo.cssâ&#x20AC;&#x2022; formatiert.
header
sidebar1 body
Abbildung 15: Aufbau Template Bianca Flenreisz & Lisa Rieder
38/50
7.1.3.1 „header― In dem Header selbst ist der Banner. Ebenso werden hier die Einstellungen für den Hintergrund (Banner) definiert.
#header { width: 960px; margin: 0 auto; background: url(images/header.jpg) repeat-x; color: #280a8c;
}
7.1.3.2 „menu― Das Menü ist ebenfalls über die css-Datei definiert, in Form einer normalen Aufzählung (ul). Um eine Zentrierung zu erreichen ist die Aufzählung mit einem Abstand von links und rechts genauerdefiniert worden. Die Farben der einzelnen Menüpunkte wurden auch in der css-Datei bestimmt (normal, hover)
#menu { width: 960px; margin: 0 auto; padding: 0; height: 60px; background: url(images/menuehintergrund.jpg) no-repeat left top; }
#menu li { display: inline; }
#menu a { display: block; float: left; height: 40px; margin: 1px 0px 0px 0px; padding: 20px 37px 0 37px;
Bianca Flenreisz & Lisa Rieder
39/50
border: hidden; text-decoration: none; text-transform: capitalize; font-size: 15px; color: #280a8c; }
#menu a:hover { color: #280a8c; }
7.1.3.3 „sidebar1― In der Klasse „sidebar1― werden die Aktuellsten Themen bzw. Auftritte angegeben. Im unteren Teil der Sidebar1 haben wir mit einer MySQL Datenbankanbindung die News angegeben. #sidebar1 { float: left; color: #000000; }
.sidebar { float: left; width: 260px; padding: 0; font-size: 14px; color: #000080; }
.sidebar ul { margin: 0; padding: 0; list-style: none; background: url(images/links.jpg)repeat-y; }
Bianca Flenreisz & Lisa Rieder
40/50
.sidebar li ul { padding: 10px 0px; color: #000000;
}
.sidebar li li { margin: 0 20px 0 15px; padding: 8px 0px; color: #000000; }
.sidebar li h2 { height: 34px; margin: 0 0 0 0; padding: 12px 15px 0px 20px; font-size: 16px; color: #280a8c; }
7.1.3.4 â&#x20AC;&#x17E;bodyâ&#x20AC;&#x2022; In diesem Feld wird der gesamte Inhalt unserer Homepage dargestellt. Hier sind zum Beispiel die Schriftart, Schriftfarbe, Abstand, etc. genau definiert. body { margin-top: 50px; padding: 0; background: url(images/hintergrund.jpg) repeat-x; text-align: justify; font-family: Arial, Verdana; font-size: 14px; color: #000000; }
h1, h2, h3 { margin-top: 0; color: #280a8c; }
Bianca Flenreisz & Lisa Rieder
41/50
h1 { font-size: 1.6em; font-weight: normal; color: #280a8c; }
h2 { font-size: 1.6em; color: #280a8c; }
h3 { font-size: 1em; color: #280a8c; }
7.2 Der Inhalt unserer Homepage 7.2.1 Die Datenbank Die ersten Schritte fĂźr den Inhalt unseres Projekts waren die Erstellung eines ER-Diagramms und anschlieĂ&#x;end die darauffolgende Erstellung der Datenbank, mit den Terminen.
Abbildung 16: Datenbank
Bianca Flenreisz & Lisa Rieder
42/50
7.2.1.1
Eine Datenbankanbindung
<? $benutzer="root"; $pass=""; $db="hatsko_kolo";
$link=mysql_connect("localhost",$benutzer,$pass); if (! $link) die ("keine Verbindung zu mysql"); mysql_select_db($db,$link) or die ("Konnte $db nicht &ouml;ffnen".mysql_error());
$ergebnis = mysql_query("SELECT * FROM termine WHERE NOW() BETWEEN start AND ende");
?> <?
while ($rs = mysql_fetch_array($ergebnis)){ ?> <ul> <h2>N&auml;chster Auftritt</h2> <li>Titel: <? echo $rs[titel]?></li> <li>Datum: <? echo $rs[datum]?></li> <li>Beginn: <? echo $rs[uhrzeit]?> Uhr</li> <li>Ort: <? echo $rs[ort]?></li> </ul>
<? } ?>
Bianca Flenreisz & Lisa Rieder
43/50
7.2.2 Die einzelnen Seiten 7.2.2.1 index_de.php & index_kr.php
Abbildung 17: Index, deutsch
Abbildung 18: Index, kroatisch
Bianca Flenreisz & Lisa Rieder
44/50
7.2.2.2 neudorf_de.php & neudorf_kr.php
Abbildung 19: Neudorf, deutsch
Abbildung 20: Neudorf, kroatisch
Bianca Flenreisz & Lisa Rieder
45/50
7.2.2.3 erfolge_produktionen_de.php & erfolge_produktionen_kr.php
Abbildung 21: Erfolge und Produktionen, deutsch
Abbildung 22: Erfolge und Produktionen, kroatisch
Bianca Flenreisz & Lisa Rieder
46/50
7.2.2.4 aktuelles_de.php & aktuelles_kr.php
Abbildung 24: Aktuelles, deutsch
Abbildung 23: Aktuelles, kroatisch
Bianca Flenreisz & Lisa Rieder
47/50
7.2.2.5 impressum_de.php & impressum_kr.php
Abbildung 25: Impressum, deutsch
Abbildung 26: Impressum, kroatisch
Bianca Flenreisz & Lisa Rieder
48/50
8 Schlusswort Nach monatelanger harter 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.
Bianca Flenreisz & Lisa Rieder
49/50
9 Quellenverzeichnis Projektmanagement Mag. Wurzinger & Mag. Selinger â&#x20AC;&#x201C; Projektmanagement Skriptum Grundlagen Html: http://de.wikipedia.org/wiki/Hypertext_Markup_Language
CSS http://de.wikipedia.org/wiki/Cascading_Style_Sheets
PHP http://de.wikipedia.org/wiki/Php
MySql http://de.wikipedia.org/wiki/Mysql
Gimp http://de.wikipedia.org/wiki/Gimp
Phase 5 http://de.wikipedia.org/wiki/HTML-Editor_Phase_5
jAlbum http://cimms.de/jalbum.html
Aufbau unserer Homepage Template http://freewebtemplates.com
Bianca Flenreisz & Lisa Rieder
50/50