Fachspezifische Themenstellung
-
Upload
jessica-krikler -
Category
Documents
-
view
215 -
download
0
description
Transcript of Fachspezifische Themenstellung
Miriam Emich und JessicaKrikler
Quartett der Zentralmusikschule Neusiedl am See
Fachspezifische Themenstellung Information & Communication Solutions 2012
Miriam Emich & Jessica Krikler Seite 2 von 45
Auftraggeber:
Quartett der Zentralmusikschule Neusiedl am See
Projektleiterin:
Miriam Emich
Projektteammitglied:
Jessica Krikler
Schuljahr:
2011/2012, Pannoneum Neusiedl am See
Miriam Emich & Jessica Krikler Seite 3 von 45
I N H A L T S V E R Z E I C H N I S
1. Abbildungsverzeichnis ........................................................................ 5
2. Vorwort ............................................................................................... 7
3. Preface ............................................................................................... 8
4. Projektmanagement ............................................................................ 9
4.1. Projektmanagementprozess ......................................................... 9
4.2. Begriffsdefinition „Projekt“ ............................................................. 9
4.3. Projektplanung ............................................................................ 11
4.4. Projektabschluss ......................................................................... 20
5. Grundlagen ....................................................................................... 22
5.1. HTML – Hypertext Makeup Language ........................................ 22
5.2. PHP ............................................................................................ 23
5.3. MySQL ........................................................................................ 24
5.4. CSS – Cascarding Style Sheets ................................................. 24
5.5. Java Script .................................................................................. 25
6. Verwendete Programme ................................................................... 26
6.1. Adobe Photoshop ....................................................................... 26
6.2. Notepad ++ ................................................................................. 27
6.3. WebFTP ...................................................................................... 28
6.4. GIMP........................................................................................... 29
6.5. php-MyAdmin .............................................................................. 30
6.6. Audacity ...................................................................................... 31
7. Aufbau unserer Website ................................................................... 32
7.1. Template ..................................................................................... 32
7.2. Kopf- und Fußbereich ................................................................. 33
Miriam Emich & Jessica Krikler Seite 4 von 45
7.3. Home .......................................................................................... 34
7.4. Über uns ..................................................................................... 35
7.5. Mitglieder .................................................................................... 36
7.6. Bildergalerie ................................................................................ 37
7.7. Kontakt ........................................................................................ 38
7.8. Impressum .................................................................................. 39
7.9. Termine ....................................................................................... 39
7.10. Backend-Bereich ..................................................................... 40
7.11. Ausloggen................................................................................ 43
8. Nachwort ........................................................................................... 44
9. Literaturverzeichnis ........................................................................... 45
Miriam Emich & Jessica Krikler Seite 5 von 45
1 . A B B I L D U N G S V E R Z E I C H N I S
Abbildung 1: Projektstrukturplan .............................................................. 12
Abbildung 2: Logo von Notre Quatre ........................................................ 19
Abbildung 3: HTML .................................................................................. 22
Abbildung 4: Grundstruktur von einem HTML-Dokument ........................ 22
Abbildung 5: einfaches PHP-Skript .......................................................... 23
Abbildung 6: MySQL ................................................................................ 24
Abbildung 7: CSS ..................................................................................... 24
Abbildung 8: JavaScript ........................................................................... 25
Abbildung 9: Logo Photoshop ................................................................. 26
Abbildung 10: Adobe Photoshop.............................................................. 26
Abbildung 11: Logo Notepad++ ............................................................... 27
Abbildung 12: Notepad++ ........................................................................ 27
Abbildung 13: Logo WebFTP ................................................................... 28
Abbildung 14: WebFTP Loginfenster ....................................................... 28
Abbildung 15: GIMP Programmübersicht ................................................. 29
Abbildung 16: Logo GIMP ........................................................................ 29
Abbildung 17: Logo phpMyAdmin ............................................................ 30
Abbildung 18: phpMyAdmin Loginfenster ................................................ 30
Abbildung 19: Logo Audacity ................................................................... 31
Abbildung 20: Audacity Programmübersicht ............................................ 31
Abbildung 21: Template Combination ...................................................... 32
Abbildung 23: Fußbereich ........................................................................ 33
Abbildung 22: Kopfbereich ....................................................................... 33
Abbildung 24: Startseite ........................................................................... 34
Abbildung 25: Seite "Über uns" ................................................................ 35
Abbildung 26: Seite "Mitglieder" ............................................................... 36
Abbildung 27: Steckbrief von Gloria Gasser ............................................ 36
Abbildung 28: Bildergalerie ...................................................................... 37
Abbildung 29: Album Fotoshooting .......................................................... 37
Abbildung 30: Bild in Großformat ............................................................. 38
Miriam Emich & Jessica Krikler Seite 6 von 45
Abbildung 31: Seite "Kontakt" .................................................................. 38
Abbildung 32: Seite "Impressum" ............................................................. 39
Abbildung 33: Seite "Termine" ................................................................. 39
Abbildung 35: check.php .......................................................................... 40
Abbildung 34: Loginbereich ..................................................................... 40
Abbildung 37: Datenbankanbindung ........................................................ 41
Abbildung 36: Backend-Bereich ............................................................... 41
Abbildung 38: while-Schleife .................................................................... 42
Abbildung 39: Formular "Termin bearbeiten" ........................................... 42
Abbildung 40: Formular "Termin hinzufügen" ........................................... 42
Abbildung 41: Backend schützen ............................................................. 43
Abbildung 42: ausloggen.php .................................................................. 43
Miriam Emich & Jessica Krikler Seite 7 von 45
2 . V O R W O R T
Im Zuge unseres Ausbildungsschwerpunktes Information und
Communication Solutions erarbeiteten wir eine Website für das Quartett
der Zentralmusikschule Neusiedl am See.
Wir haben unsere Website mittels HTML-Editor entworfen und an unser
Corporate Design angepasst.
Unser Ziel war es eine benutzerfreundliche Homepage zu entwickeln, in
der Termine und aktuelle Informationen gut ersichtlich sind und Interes-
senten Kontakt mit dem Quartett aufnehmen können.
Wir haben darauf geachtet die Wünsche des Auftraggebers so gut wie
möglich zu berücksichtigen.
Mit der Hilfe unseres Professors, Mag. Heinz Wurzinger, haben wir ein
informationsreiches und anwendungstaugliches Internetportal geschaffen.
Miriam Emich & Jessica Krikler Seite 8 von 45
3 . P R E F A C E
In the course of our subject Information and Communication Solutions we
created a website for the quartet of the local music school “ZMS Neusiedl
am See”.
We constructed it with the aid of an HTML-editor and we fit it to our corpo-
rate design.
Our aim was to create a user-friendly website where interested persons
find current information about the quartet. Furthermore people should
have the possibilities to get to know the quartet and to contact them.
We tried to work closely with the quartet.
With the help of our teacher Mag. Heinz Wurzinger we managed to design
a well-structured and modern website.
Miriam Emich & Jessica Krikler Seite 9 von 45
4 . P R O J E K T M A N A G E M E N T1
Unter dem Begriff Projektmanagement versteht man die Planung, Kontrol-
le, Steuerung und Organisation von Projekten.
4.1. Projektmanagementprozess
Dieser Prozess setzt sich zusammen aus
dem Projektstart,
der Projektdurchführung,
dem Projektmarketing,
dem Projektcontrolling und
dem Projektabschluss.
4.2. Begriffsdefinition „Projekt“
Projekte sind einmalige Vorhaben, die zeitlich, sachlich und sozial abge-
grenzt sind und ein konkretes Ziel verfolgen.
4.2.1. Ist-Situation / Projektantrag
Das Quartett der Zentralmusikschule Neusiedl am See wurde erst im Jahr
2010 ins Leben gerufen. Es ist noch keine Website vorhanden und die
Quartettmitglieder haben keine genauen Vorstellungen bezüglich des
Corporate Designs.
4.2.2. Zeitliche Abgrenzung
Projektstart: Donnerstag, 15. September 2011
Projektende: Freitag, 30. März 2012
1 AINF Skriptum, PDF-Datei, Mag. Heinz Wurzinger
Miriam Emich & Jessica Krikler Seite 10 von 45
4.2.3. Sachliche Abgrenzung
Ziele:
Logo mit Wiedererkennungswert entwerfen
passendes Template wählen
informative Website gestalten
übersichtliche Gliederung bieten
aktuelle Informationen liefern
Bildergalerie und Hörbeispiel erstellen
Informationen über die Mitglieder sind vorhanden
Nichtziele:
Website funktioniert nicht
falsche Informationen bereitstellen
Auftraggeber ist unzufrieden
Website wird nicht verwendet
4.2.4. Soziale Abgrenzung
Auftraggeber: Quartett der Zentralmusikschule Neusiedl am See
Projektleiterin: Miriam Emich
Teammitglied: Jessica Krikler
Miriam Emich & Jessica Krikler Seite 11 von 45
4.3. Projektplanung2
Die zweite der vier Hauptphasen eines Projektes ist die Projektplanung.
Während dieser Phase bereitet man die eigentliche Projektdurchführung
so gut wie möglich vor.
4.3.1. Projektstrukturplan
Der Projektstrukturplan dient als grobe Übersicht über das Projekt. Man
erkennt auf einen Blick, die gegliederten Meilensteine mit den zugehörigen
Arbeitspakten.
4.3.1.1. Meilensteine
Die Meilensteine sind meistens an die Fertigstellung eines bedeutenden
Projektergebnisses gebunden. Sie sind wichtige Zwischenziele, die si-
cherstellen, dass das Projekt auf dem richtigen Kurs ist. Projektstart und
Projektende sind immer Meilensteine. Sechs bis sieben Zwischenziele pro
Projekt reichen aus.
4.3.1.2. Arbeitspakete
Die Arbeitspakete sind genaue Tätigkeitsbeschreibungen und der Inhalt,
das Ziel und das Nichtziel werden festgelegt. Bei den Arbeitspaketen soll-
te man darauf achten, dass sie nicht zu umfangreich sind.
2 o.V.: http://de.wikipedia.org/wiki/Projektplanung
Miriam Emich & Jessica Krikler Seite 12 von 45
Abbildung 1: Projektstrukturplan
Miriam Emich & Jessica Krikler Seite 13 von 45
Meilenstein 1: Konzept erstellt
Arbeitspaket 1.1.: Idee besprechen
Ziel: durchführbares und interessantes Thema finden
Nichtziel: kein Auftraggeber
Beginn: 8.9.2011
Ende: 15.9.2011
benötigte Ressourcen: Laptop, Internetzugang
Verantwortliche: Miriam Emich, Jessica Krikler
Arbeitspaket 1.2.: Corporate Design erstellen
Ziel: einheitliches und schönes Design anfertigen
Nichtziel: grelle Farben, zu viele verschiedene Schriften und Auftraggeber
ist unzufrieden
Beginn: 22.9.2011
Ende: 22.9.2011
benötigte Ressourcen: Laptop, Software, Zeit
Verantwortliche: Miriam Emich, Jessica Krikler
Meilenstein 2: Entwurf erstellt
Arbeitspaket 2.1.: Logo erstellen
Ziel: ein zum Thema passendes Logo kreieren
Nichtziel: ein bereits vorhandenes Logo übernehmen
Beginn: 29.9.2011
Ende: 13.10.2011
benötigte Ressourcen: Laptop, Adobe Photoshop, Internet
Verantwortliche: Jessica Krikler
Arbeitspaket 2.2.: Template auswählen
Ziel: ein gratis Template finden
Nichtziel: Template selbst erstellen
Beginn: 6.10.11
Miriam Emich & Jessica Krikler Seite 14 von 45
Ende: 13.10.2011
benötigte Ressourcen: Laptop, Internetzugang
Verantwortliche: Miriam Emich, Jessica Krikler
Arbeitspaket 2.3.: Template anpassen
Ziel: Template erfolgreich an unser Corporate Design anpassen
Nichtziel: nicht funktionierendes Template
Beginn: 13.10.2011
Ende: 3.11.2011
benötigte Ressourcen: Laptop, HTML-Editor, Internetzugang
Verantwortliche: Jessica Krikler
Arbeitspaket 2.4.: Websiteentwurf erstellen
Ziel: Website ist soweit fertig, dass nur noch die Inhalte eingebunden
werden müssen
Nichtziel: Website ist unübersichtlich aufgebaut
Beginn: 10.11.2011
Ende: 22.12.2011
benötigte Ressourcen: Laptop, HTML-Editor, Internetzugang
Verantwortliche: Jessica Krikler
Meilenstein 3: Unterlagen gesammelt
Arbeitspaket 3.1.: Entstehungsgeschichte verfassen
Ziel: verständlichen Text schreiben
Nichtziel: Text aus dem Internet kopieren
Beginn: 10.11.2011
Ende: 22.12.2011
benötigte Ressourcen: Laptop, Software
Verantwortliche: Miriam Emich
Miriam Emich & Jessica Krikler Seite 15 von 45
Arbeitspaket 3.2.: Steckbriefe organisieren
Ziel: kurze und informative Steckbriefe von den Mitgliedern organisieren
Nichtziel: vollständiger Lebenslauf von den Mitgliedern
Beginn: 10.11.2011
Ende: 10.02.2012
benötigte Ressourcen: Laptop, Software, Internetzugang
Verantwortliche: Miriam Emich
Arbeitspaket 3.3.: Hörbeispiel organisieren
Ziel: gut verständliches Hörbeispiel bekommen
Nichtziel: Hörbeispiel von einem fremden Quartett verwenden
Beginn: 10.11.2011
Ende: 10.02.2012
benötigte Ressourcen: Laptop, Audacity
Verantwortliche: Miriam Emich
Arbeitspaket 3.4.: Fotos machen
Ziel: schöne und professionelle Fotos machen lassen
Nichtziel: selber Fotos mit der Digitalkamera machen
Beginn: 10.11.2011
Ende: 10.02.2012
benötigte Ressourcen: Fotografen
Verantwortliche: Miriam Emich
Arbeitspaket 3.5.: Fotos bearbeiten
Ziel: Fotos richtig zuschneiden und komprimieren
Nichtziel: unscharfe Fotos
Beginn: 10.11.2011
Ende: 10.02.2012
benötigte Ressourcen: Laptop, GIMP
Verantwortliche: Miriam Emich
Miriam Emich & Jessica Krikler Seite 16 von 45
Meilenstein 4: Inhalte eingebunden
Arbeitspaket 4.1.: Bildergalerie erstellen
Ziel: passende Bildergalerie finden
Nichtziel: Bilder brauchen zu lange zum Laden
Beginn: 10.02.2012
Ende: 08.03.2012
benötigte Ressourcen: Laptop, HTML-Editor, Internetzugang
Verantwortliche: Jessica Krikler
Arbeitspaket 4.2.: Hörbeispiel einbinden
Ziel: Interessenten einen ersten Eindruck vermitteln
Nichtziel: keinen funktionierenden Player finden
Beginn: 10.02.2012
Ende: 08.03.2012
benötigte Ressourcen: Laptop, HTML-Editor, Internetzugang
Verantwortliche: Jessica Krikler
Arbeitspaket 4.3.: Texte einbinden
Ziel: Texte werden übersichtlich dargestellt
Nichtziel: Rechtschreibfehler sind vorhanden
Beginn: 10.02.2012
Ende: 08.03.2012
benötigte Ressourcen: Laptop, HTML-Editor, MySQL Verbindung, Inter-
netzugang
Verantwortliche: Jessica Krikler
Meilenstein 5: Website getestet
Arbeitspaket 5.1.: Website präsentieren
Ziel: Auftraggeber ist zufrieden
Nichtziel: unvollständige Website wird präsentiert
Beginn: 15.03.2012
Miriam Emich & Jessica Krikler Seite 17 von 45
Ende: 15.03.2012
benötigte Ressourcen: Laptop, Internetzugang
Verantwortliche: Miriam Emich
Arbeitspaket 5.2.: Website überarbeiten
Ziel: Änderungsvorschläge umsetzen
Nichtziel: Fehler können nicht behoben werden
Beginn: 15.03.2012
Ende: 22.03.2012
benötigte Ressourcen: Laptop, HTML-Editor, MySQL Verbindung, Inter-
netzugang
Verantwortliche: Jessica Krikler
Arbeitspaket 5.3.: Website fertiggestellt
Ziel: Website ist fertig und funktioniert
Nichtziel: Auftraggeber ist unzufrieden
Beginn: 22.03.2012
Ende: 30.03.2012
benötigte Ressourcen: Laptop, HTML-Editor, MySQL Verbindung, Inter-
netzugang
Verantwortliche: Jessica Krikler
Meilenstein 6: Website veröffentlicht
Arbeitspaket 6.1.: Domainnamen aussuchen
Ziel: gewünschter Domainname ist noch vorhanden
Nichtziel: Website weiterhin mit einer Subdomain von der Schule
ansurfen
Beginn: 22.03.2012
Ende: 30.03.2012
benötigte Ressourcen: Laptop, Internetzugang
Verantwortliche: Miriam Emich, Jessica Krikler
Miriam Emich & Jessica Krikler Seite 18 von 45
Arbeitspaket 6.1.: Website veröffentlichen
Ziel: Website erfüllt ihren Nutzen
Nichtziel: Website ist unvollständig und funktioniert nicht
Beginn: 30.03.2010
Ende: 31.03.2012
benötigte Ressourcen: Laptop, Internetzugang
Verantwortliche: Miriam Emich, Jessica Krikler
Miriam Emich & Jessica Krikler Seite 19 von 45
4.3.2. Corporate Design
Zielgruppe:
regional
Jugendliche und Erwachsene, die sich für
klassische Musik interessieren
Logo:
Notenschlüssel mit Violine vereinen
Name vom Quartett klar ersichtlich
Schriftarten:
Arial, Helvetica
keine Serifenschrift
Zeilenabstand
Form:
übersichtlich gestaltet
mindestens 1 Bild pro Seite
modern
Farben:
HTML-Notationen: 458d1f
RGB: 69/141/31
CMYK: 80/22/100/9
HTML-Notationen: 2c2723
RGB: 44/39/35
CMYK: 73/59/63/65
HTML-Notationen: b5d252
RGB: 181/210/82
CMYK: 40/3/78/0
HTML-Notationen: 5c4f46
RGB: 92/79/70
CMYK: 60/54/59/36
Abbildung 2: Logo von Notre Quatre
Miriam Emich & Jessica Krikler Seite 20 von 45
4.4. Projektabschluss3
Der Projektabschluss ist die letzte der vier Hauptprojektphasen eines Pro-
jektes und umfasst 3 Schritte:
Produktabnahme,
Projektabschlussanalyse und
Projektauflösung.
4.4.1. Produktabnahme
Die Produktabnahme leitet den Projektabschluss ein und die Übergabe an
den Projektauftraggeber findet statt. Außerdem sollte die zukünftige Be-
treuung der Website besprochen werden.
4.4.2. Projektabschlussanalyse
In der Projektabschlussanalyse wird eine Nachkalkulation durchgeführt.
Abweichungen bezüglich Soll- und Ist-Terminen werden sichtbar.
Meilenstein SOLL-Termin IST-Termin
1. Konzept erstellt 22.09.2011 22.09.2011
2. Entwurf erstellt 03.11.2011 22.12.2011
3. Unterlagen gesammelt 22.12.2011 10.02.2012
4. Inhalte eingebunden 26.01.2012 08.03.2012
5. Website getestet 23.03.2012 23.03.2012
6. Website veröffentlicht 30.03.2012 30.03.2012
3 o.V.: http://de.wikipedia.org/wiki/Projektabschluss
Miriam Emich & Jessica Krikler Seite 21 von 45
4.4.3. Projektauflösung
Die Projektauflösung ist der allerletzte Schritt im Projektmanagement. Es
ist wichtig, dass jedes Projekt einen klar definierten Anfang und ein ein-
deutiges Ende hat.
Miriam Emich & Jessica Krikler Seite 22 von 45
5 . G R U N D L A G E N
5.1. HTML – Hypertext Makeup Language4
5.1.1. Definition:
HTML ist eine textbasierte Auszeichnungssprache zur Strukturierung von
Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-
Dokumente sind die Grundlage des World Wide Web und werden von ei-
nem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhal-
ten einer Webseite enthält HTML zusätzliche Angaben in Form von Meta-
informationen.
5.1.2. Struktur:
Ein HTML-Dokument besteht aus drei Bereichen:
der Dokumenttypdeklaration (Doctype) ganz am Anfang der Datei,
die die verwendete Dokumenttypdefinition angibt
dem HTML-Kopf (HEAD), der hauptsächlich technische oder doku-
mentarische Informationen enthält
dem HTML-Körper (BODY), der die anzuzeigenden Informationen
enthält
4 o.V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language
Abbildung 3: HTML
Abbildung 4: Grundstruktur von einem HTML-Dokument
Miriam Emich & Jessica Krikler Seite 23 von 45
5.2. PHP
PHP wurde 1995 von Rasmus Lerdorf entwickelt und stand damals für
Personal Home Page Tools. Heute wird PHP mit Hypertext Preprocessor
übersetzt. PHP ist eine Skriptsprache die hauptsächlich zur Erstellung von
dynamischen Webseiten und Webanwendungen verwendet wird. PHP
wird als freie Software unter der PHP-Lizenz verbreitet. PHP zeichnet sich
durch die breite Datenbankunterstützung und Internet-Protokolleinbindung
sowie die Verfügbarkeit zahlreicher Funktionsbibliotheken aus.
PHP wird auf ca. 75 % aller Websites als serverseitige Programmierspra-
che eingesetzt und ist damit die am häufigsten verwendete Sprache beim
Erstellen von Websites
5.2.1. Funktionsweise
Abbildung 5: einfaches PHP-Skript
Miriam Emich & Jessica Krikler Seite 24 von 45
5.3. MySQL
5.3.1. Definition:
MySQL wurde seit 1994 vom schwedischen Unternehmen MySQL AB
entwickelt und ist das populärste Open-Source5-
Datenbankverwaltungssystem der Welt. SQL steht für Structured Query
Language6. Ein bevorzugtes Einsatzgebiet von MySQL ist die Datenspei-
cherung für Webservices.
5.4. CSS – Cascarding Style Sheets
CSS ist eine Sprache zur Definition einzelner Formateigenschaften und
wird häufig zusammen mit HTML oder XML eingesetzt. CSS gilt als Stan-
dardschriftsprache für Webseiten.
Mit Hilfe von CSS lassen sich nicht nur Farben und Schriften definieren,
sondern auch einzelne Bilder positionieren. Man kann in einer CSS-Datei
alle Angaben zur Formatierung machen und danach in jeder Webseite
einen Verweis auf die CSS-Datei erstellen. Die festgelegten Formatierun-
gen werden für alle Webseiten übernommen und bei gewünschten Ände-
rungen braucht man diese nur in der CSS-Datei vorzunehmen.
5 Software, deren Quelltext öffentlich zugänglich ist und dadurch jeder an der Software
weiterprogrammieren kann 6 strukturierte Abfragesprache
Abbildung 6: MySQL
Abbildung 7: CSS
Miriam Emich & Jessica Krikler Seite 25 von 45
5.5. Java Script
JavaScript ist eine Programmiersprache die zur
Optimierung von Webseiten dient. JavaScripts werden entweder direkt in
ein HTML-Dokument oder in eine separate Datei geschrieben. JavaScripts
werden hauptsächlich für das DOM-Scripting7 auf Webseiten eingesetzt.
5.5.1. Typische Anwendungsgebiete von JavaScript sind:
Senden und Empfangen von Daten, ohne dass der Browser die
Seite neu laden muss
sofortiges Vorschlagen von Suchbegriffen
Banner oder Laufschriften
Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam
Bildergalerien
7 bezeichnet bestimme Webdesigne-Methoden, bei denen während der Anzeige einer
Webseite diese selbst, ausgelöst durch Benutzereingaben, verändert wird
Abbildung 8: JavaScript
Miriam Emich & Jessica Krikler Seite 26 von 45
6 . V E R W E N D E T E P R O G R A M M E
6.1. Adobe Photoshop
ist ein kommerzielles Bildbearbeitungsprogramm des US-
amerikanischen Softwarehauses Adobe Systems
ist im Bereich der professionellen Bildbearbeitung Marktführer
ist Teil der Adobe Creative Suite, einer Sammlung von Grafik- und
Designprogrammen, und wie die meisten anderen Adobe-
Anwendungen für die Betriebssysteme Mac OS und Microsoft Win-
dows verfügbar
Abbildung 9: Logo Photoshop
Abbildung 10: Adobe Photoshop
Miriam Emich & Jessica Krikler Seite 27 von 45
6.2. Notepad ++8
Notepad ist ein freier Texteditor für Windows und kompatible Betriebssys-
teme. Es basiert auf Scintilla9 und ist in der Programmiersprache C++10
geschrieben. Neben einfachen Textdateien können auch Quelltexte bear-
beitet werden.
8 Vgl. Don Ho, 2011, http://notepad-plus-plus.org/
9 ist eine Open-Source-Editor-Komponente
10
steht für eine höhere Programmiersprache
Abbildung 11: Logo Notepad++
Abbildung 12: Notepad++
Miriam Emich & Jessica Krikler Seite 28 von 45
6.3. WebFTP
ist ein von einem FTP-Server angebotener Dienst, der den Zugriff
auf einen Webserver mittels eines Webbrowsers ermöglicht
wird zum selben Zweck angeboten wie ein FTP-Client: nämlich um
auf einen entfernten Datei-Server u.a. Dateien hochzuladen bzw.
von dort herunterzuladen, um Dateien zu löschen, umzubenennen
oder auch um Unterverzeichnisse zu erzeugen und zwischen sol-
chen Verzeichnissen hin- und herzuwechseln
erspart dem Anwender allerdings die Einarbeitung in die Verwen-
dung eines FTP-Clients, insbesondere muss eine derartige Soft-
ware-Anwendung nicht auf dem lokalen Rechner installiert sein
Abbildung 13: Logo WebFTP
Abbildung 14: WebFTP Loginfenster
Miriam Emich & Jessica Krikler Seite 29 von 45
6.4. GIMP
heißt GNU Image Manipulation Program
ist ein kostenloses und freies Bildbearbeitungsprogramm
der Schwerpunkt der Software ist die intensive Bearbeitung einzel-
ner Bilder, wofür vielfältige Effekte zur Verfügung stehen
Abbildung 16: Logo GIMP
Abbildung 15: GIMP Programmübersicht
Miriam Emich & Jessica Krikler Seite 30 von 45
6.5. php-MyAdmin
ist eine freie PHP-Applikation zur Administration von MySQL-
Datenbanken
es können auch Datenbanken auf fremden Rechnern über eine
Netzwerkverbindung oder über das Internet administriert werden
für die Nutzung des Programms sind keine Kenntnisse in SQL11
notwendig
11
ist eine Datensprache zur Definition von Datenstrukturen in relationalen Datenbanken sowie zum Bearbeiten und Abfragen von darauf basierenden Datenbeständen
Abbildung 17: Logo phpMyAdmin
Abbildung 18: phpMyAdmin Loginfenster
Miriam Emich & Jessica Krikler Seite 31 von 45
6.6. Audacity
ist ein freier Audioeditor und -rekorder
es können auf beliebig vielen Spuren Audiodateien gemischt und
bearbeitet werden
wurde in C++ programmiert und nutzt die wxWidgets-Bibliothek12,
um auf verschiedenen Betriebssystemen die gleiche grafische Be-
nutzeroberfläche zur Verfügung zu stellen
12
ist eine quelloffene Klassenbibliothek zur Entwicklung graphischer Benutzeroberflä-chen
Abbildung 19: Logo Audacity
Abbildung 20: Audacity Programmübersicht
Miriam Emich & Jessica Krikler Seite 32 von 45
7 . A U F B A U U N S E R E R W E B S I T E
7.1. Template
Nach dem Erstellen unseres Konzepts machten wir uns auf die Suche
nach einem passenden Template. Wir entschieden uns für das Template
„Combination“, da es am besten zu unseren Vorstellungen passte.
Abbildung 21: Template Combination
Miriam Emich & Jessica Krikler Seite 33 von 45
7.2. Kopf- und Fußbereich
Diese zwei Bereiche sind auf unseren Webseiten gleich. Das Logo dient
nicht nur zur Wiedererkennung, sondern kann auch als Home-Button ver-
wendet werden.
Der Footer enthält die Links um zur „Login“-Seite, zur „Impressum“-Seite
und zur „Kontakt“-Seite zu gelangen.
Abbildung 23: Fußbereich
Abbildung 22: Kopfbereich
Miriam Emich & Jessica Krikler Seite 34 von 45
7.3. Home
Als Startseite entschieden wir uns eine „Home“-Seite zu gestalten. Sie
enthält nicht nur kurze Informationsberichte, sondern auch ein Hörbeispiel
und ein Gruppenfoto.
Abbildung 24: Startseite
Miriam Emich & Jessica Krikler Seite 35 von 45
7.4. Über uns
Diese Seite enthält eine allgemeine Definition, was man unter einem
Quartett versteht und die Entstehungsgeschichte von Notre Quatre.
Um die Seite ansprechender zu gestalten haben wir ein Foto von den Mu-
sikerinnen eingebunden.
Abbildung 25: Seite "Über uns"
Miriam Emich & Jessica Krikler Seite 36 von 45
7.5. Mitglieder
Natürlich sollte unsere Website auch Informationen zu den Musikern ent-
halten. Deshalb haben wir eine eigene Seite „Mitglieder“ erstellt.
Durch einen Klick auf ein Foto erhält man nähere Angaben über das Mit-
glied.
Abbildung 26: Seite "Mitglieder"
Abbildung 27: Steckbrief von Gloria Gasser
Miriam Emich & Jessica Krikler Seite 37 von 45
7.6. Bildergalerie
Um die Bildergalerie übersichtlicher zu gestalten, haben wir sie in 2 Berei-
che gegliedert. Der 1. Bereich enthält alle vorhandenen Alben.
Mit einem Klick auf das gewünschte Album gelangt man in den 2. Bereich
von unserer Bildergalerie. Dieser weist alle Fotos auf, die im Album enthal-
ten sind.
Abbildung 28: Bildergalerie
Abbildung 29: Album Fotoshooting
Miriam Emich & Jessica Krikler Seite 38 von 45
Man hat auch die Möglichkeit die Bilder bzw. das gewünschte Bild im
Großformat zu betrachten.
7.7. Kontakt
Auf unserer „Kontakt“-Seite haben wir sowohl die Kontaktperson als auch
alternative Kontakt- und Informationsmöglichkeiten angegeben. Außerdem
haben wir auf der beliebten Social Network Seite „Facebook“ eine Gruppe
für das Quartett erstellt.
Abbildung 30: Bild in Großformat
Abbildung 31: Seite "Kontakt"
Miriam Emich & Jessica Krikler Seite 39 von 45
7.8. Impressum
Damit unsere Website auch rechtlich abgesichert ist, haben wir eine „Im-
pressum“-Seite erstellt.
7.9. Termine
Die aktuellen Termine werden auf der „Home“-Seite ausgeben. Um einen
Gesamtüberblick über die Auftritte von Notre Quatre zu erhalten, gelangt
man mittels Link auf die Seite „Termine für 2012“.
Abbildung 32: Seite "Impressum"
Abbildung 33: Seite "Termine"
Miriam Emich & Jessica Krikler Seite 40 von 45
7.10. Backend-Bereich
Um in den Backend-Bereich zu gelangen, muss man sich zuerst anmel-
den.
Hier werden der Benutzername und das Passwort überprüft.
Abbildung 35: check.php
Wenn die Eingabe richtig
war, dann gelangt man in
den Backend-Bereich.
Bei einer falschen Einga-
be wird man wieder zur
„Login“-Seite geschickt.
Abbildung 34: Loginbereich
Miriam Emich & Jessica Krikler Seite 41 von 45
Nach der korrekten Eingabe erreicht man den Backend-Bereich. In diesem
Bereich sind alle Termine aufgelistet. Man hat die Möglichkeit einen Ter-
min zu bearbeiten, zu löschen und einen neuen Termin hinzuzufügen.
Die Informationen werden aus der Datenbank „d00a0f20“ und der Tabelle
„termine“ ausgelesen. Die Datenbankanbindung ist auf allen Seiten gleich,
nur der SQL-Befehl variiert.
Abbildung 37: Datenbankanbindung
Abbildung 36: Backend-Bereich
Miriam Emich & Jessica Krikler Seite 42 von 45
Damit alle Termine aufscheinen, verwendet man eine while-Schleife, in
der die Ausgabe der Datenbankeinträge erfolgt.
Um einen neuen Termin hinzufügen oder einen vorhanden Termin bear-
beiten zu können, haben wir ein Formular erstellt.
Abbildung 38: while-Schleife
Abbildung 40: Formular "Termin hinzu-fügen"
Abbildung 39: Formular "Termin bearbei-ten"
Miriam Emich & Jessica Krikler Seite 43 von 45
Um sicher gehen zu können, dass nur Personen, die den Benutzernamen
und das Passwort kennen, in den Backend-Bereich gelangen, muss man
alle Backend-Dateien schützen. Es ist wichtig, dass der Befehl ganz am
Anfang jeder Datei steht, noch bevor der Dokumententyp bestimmt wird.
7.11. Ausloggen
Beim Ausloggen wird die aktive Session zerstört und man wird auf die
„Login“-Seite weitergeleitet.
Abbildung 41: Backend schützen
Abbildung 42: ausloggen.php
Miriam Emich & Jessica Krikler Seite 44 von 45
8 . N A C H W O R T
Zu Beginn unseres Projektes war es schwierig einen Auftraggeber zu fin-
den, da heutzutage schon fast jeder eine eigene Website besitzt.
Wir waren sehr dankbar über den Auftrag des Quartettes der Zentralmu-
sikschule Neusiedl am See und über das Vertrauen, dass sie uns schenk-
ten.
Wir haben uns für einen HTML-Editor entschieden, da wir damit schon im
Unterricht gearbeitet haben. Trotzdem tauchten ab und zu kleinere Prob-
leme auf, die wir aber mit der Hilfe unserer Professoren meisterten.
Bei der Realisierung unsers Projektes konnten wir unser bisheriges Wis-
sen anwenden und neue Kenntnisse sammeln.
Abschließend können wir sagen, dass wir stolz sind, nach monatelanger
Arbeit unserem Auftraggeber eine moderne und funktionsfähige Website
präsentieren zu können.
Miriam Emich & Jessica Krikler Seite 45 von 45
9 . L I T E R A T U R V E R Z E I C H N I S
4. Projektmanagement
AINF Skriptum, PDF-Datei, Mag. Heinz Wurzinger
http://de.wikipedia.org/wiki/Projektplanung
Projektplanung, Wikipedia vom 13. Februar 2012
http://de.wikipedia.org/wiki/Projektabschluss
Projektabschluss, Wikipedia vom 11. Oktober 2011
5. Grundlagen
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
HTML, Wikipedia vom 14. März 2012
6. Verwendete Programme
Don Ho, Notepad++/About, 2011
http://notepad-plus-plus.org/