Issuu on Google+

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


Fachspezifische Themenstellung zum Thema mv-neudorf