Fachspezifische Themenstellung by Markus Knittl

Markus Knittl und Stefan Zeugswetter 29.03.2011

Musikverein Jois Information and Communication Solutions â&#x20AC;&#x153;ICSâ&#x20AC;?

Fachspezifische Themenstellung Homepage des Musikverein Jois

Inhalt Vorwort ................................................................................................................................................... 3 Projektmanagement ................................................................................................................................ 4 Grundlegendes Projektmanagement ...................................................................................................... 4 Institution ................................................................................................................................................ 6 Corporate Design ................................................................................................................................... 10 Aufgabenverteilung ............................................................................................................................... 11 Grundlagen ............................................................................................................................................ 14 HTML ..................................................................................................................................................... 14 Struktur einer HTML-Seite................................................................................................................. 15 MySQL ................................................................................................................................................... 17 Java Script .............................................................................................................................................. 20 Datenbank: ............................................................................................................................................ 21 Erste Schritte ......................................................................................................................................... 21 Die verwendeten Programme: .............................................................................................................. 24 Adobe Photoshop CS5 ........................................................................................................................... 24 Adobe Flash CS5 .................................................................................................................................... 26 Die Programmsprache in Flash .............................................................................................................. 28 Adobe Dreamweaver............................................................................................................................. 30 ........................................................................................................................................ 32 Footer .................................................................................................................................................... 33 Die Seiten .............................................................................................................................................. 35 Index ...................................................................................................................................................... 35 Liste Musiker ......................................................................................................................................... 36 ............................................................................................................................................................... 36 Dynamische Teile der Homepage .......................................................................................................... 38 Anmelden .............................................................................................................................................. 38 „Check“ .................................................................................................................................................. 39 Überprüfen des Passwortes .................................................................................................................. 39 Musikerlist Administrator...................................................................................................................... 40 Musiker ändern ..................................................................................................................................... 41

Markus Knittl und Stefan Zeugswetter

Musiker hinzufĂźgen ............................................................................................................................... 42 Musiker lĂśschen .................................................................................................................................... 43 Ausloggen .............................................................................................................................................. 44 ............................................................................................................................................................... 44 Geschichte ............................................................................................................................................. 45 Instrumente ........................................................................................................................................... 46 index_2 .................................................................................................................................................. 47 konzertplan............................................................................................................................................ 49 bilder ..................................................................................................................................................... 51 impressum ............................................................................................................................................. 53 kontaktformular .................................................................................................................................... 54 MusikAnten ........................................................................................................................................... 57 jungen .................................................................................................................................................... 58 Verwendeten Links: ............................................................................................................................... 60 ............................................................................................................................................................... 61

Markus Knittl und Stefan Zeugswetter

Vorwort Wir erarbeiteten für unsere fachspezifische Themenstellung in unserem Ausbildungsschwerpunkt Information Communication Solutions die Homepage des Musikverein Jois. Unsere Aufgabenstellung war eine Webseite mit dynamischen Elementen mittels php/mySQL zu erstellen. Unser Ziel war es auch eine benutzerfreundliche Homepage für den Musik und Kulturverein zu schaffen um den Kontakt des Vereins Intern und Extern zu erleichtern. Die Hauptfunktionen der Homepage sind es: „ Fotos ansehen, Termine festlegen, aktuelle News verfolgen und den organisieren Werdegang des Musikvereines weiterzuverfolgen!“ Mit der Hilfe unseres Professors Heinz Wurzinger gestalteten wir ein neues, anwendertaugliches und informationsreiches Internetportal für den Musikverein Jois.

Es wurde an der Zeit ein Absolventenportal für unsere Schule einzurichten!

Markus Knittl und Stefan Zeugswetter

Projektmanagement

Grundlegendes Projektmanagement

Projekte definieren sich u.a. über ihre Einmaligkeit. Damit ist gemeint, dass bestimmte wiederkehrende Aufgaben eines Unternehmens sich zwar ähnlich sein können, sich hinsichtlich der Rahmenbedingungen jedoch unterscheiden. Projektmanagement kann definiert werden als die Gesamtheit der Maßnahmen, die zur Erreichung definierter Projektziele im Rahmen der personellen, technischen, terminlichen und finanziellen Rahmenbedingungen nötig sind. Ein Grund für den konzeptionellen Erfolg des Projektmanagements besteht darin, dass seine Methoden und Instrumente grundsätzlich auf alle Projektarten angewendet werden können. In unserem Fall bezieht sich das Projektmanagement auf die Homepage des Musik und Kulturverein Jois mit allen Arbeitspaketen und Projektstrukturplänen.

Markus Knittl und Stefan Zeugswetter

Voraussetzung für jedes erfolgreiche Projekt ist eine eindeutige Definition der Aufgaben. Diese Aufgaben müssen sachlich, zeitlich und sozial abgegrenzt sein.

Unser diesjähriges Projekt in dem Maturafach “ICS” INFORMATION AND COMMUNICATION SOLUTIONS startet am 22.9.2010 und gab uns als Aufgabe eine dynamische Website mit kreative Elementen, mithilfe all unserer bisher gelernten Fähigkeiten zu erstellen.

Legt voraus die stetige Kontrolle des Projektes. Ob das Projekt im Verzug ist laut unserem Arbeitsplänen und Arbeitspaketen. Sollte dies der Fall sein muss das Tempo erhöht werden um in der vorgegeben Zeit die dynamische Homepage der Musik- und Kulturvereines fertig zu stellen.

Markus Knittl und Stefan Zeugswetter

Bildliche Darstellung

Projektstart

Projektdefinition

Projektcontroling

Projektmarketing

Projektabscluss

Institution Der jetzige Kapellenmeister MMag. Klaus Schwarzbauer und Obfrau Anita Steinwandtner erkundigten sich schon einige Zeit nach einer Möglichkeit den Musik und Kulturverein Jois auch im Internet präsent zu machen. Dieses Ansuchen, und die Tatsache dass Ich selbst in diesem Verein Mitglied bin ermöglichten von Anfang an eine gute Voraussetzung für unser Matura-Projekt. So wurde die Gestaltung und Umsetzung der Homepage des MKV-Jois in unsere Hände gelegt. Bis dato gab es keine veralte Homepage die als Vorlage verwendet werden sollte, es wurde uns also komplett freigestellt wie wir die Umsetzung unseres Projektes handhaben.

Markus Knittl und Stefan Zeugswetter

Das Managen des Projektes beinhaltet die Festsetzung der Ziele und Nicht-Ziele, und die Erstellung einer Meilensteinplan, die die Arbeitspakte sowie die Zeiteinteilung enthält.

 Einblick in Vereinsleben  Vergangenheit preisgeben  Zukunft des Vereins zeigen  Bearbeiten der Inhalte  Passendes Template suchen  Flash Intro erstellen  Dynamische Seiten erstellen und Datenbanken anlegen  Neuesten Infos auf der Startseite  Bildergalerie  Kalender mit News

Markus Knittl und Stefan Zeugswetter

 Nicht funktionierende Homepage  Nicht klar deniniertes Design auf allen Seiten  Unübersichtliches Desing  Falsche Farbauswahl  Falsche Daten, Informationen, Bilder oder Videos

Projektstart: 22.9.2010 Projektende: 23.3.2011

Auftraggeber: Obfrau Anita Steinwandtner und MMag. Klaus Scharzbauer Projektleiter: Markus Knittl Teammitglied: Stefan Zeugswetter Hintergrundorganisation: Der Musik und Kulturverein Jois sowie der Burgenländische Blasmusikverband

Meilensteinplan mit Arbeitspaketen 1. Beschaffen und Sichten der Daten, 2. Design (Die Farben festlegen, Templates festlegen, Übersichtliche Gestaltung) 3. Aufgabenverteilung 4. Aufgaben durchführen 5. Projektbesprechung 6.Projektanalyse 7.Projektabschluss

Markus Knittl und Stefan Zeugswetter

Musik- und Kulturverein Jois

Markus Knittl und Stefan Zeugswetter

Corporate Design

   

Die Farben festlegen, Templates festlegen, Übersichtliche Gestaltung; Bilder

 Light Cyan

RGB-CODE: #E0FFFF –

 DodgerBlue3

RGB-CODE: #1874CD

 Azure

RGB-CODE: #F0FFFF

 White

RGB-CODE: #FFFFFF

Markus Knittl und Stefan Zeugswetter

Aufgabenverteilung Markus Knittl

Stefan Zeugswetter

1. Beschaffen und Sichten der Daten, 2. Design (Die Farben festlegen, Templates festlegen, Ă&#x153;bersichtliche Gestaltung) 3. Aufgabenverteilung 4. Aufgaben durchfĂźhren 5. Projektbesprechung 6.Projektanalyse 7.Projektabschluss

Markus Knittl und Stefan Zeugswetter

2010/2011 Besprechung des Projektes auf der Generalversammlung der Musik und Kulturverein Jois am Freitag den 18.3.2011 im Gasthaus „Schnepfenhof“. Präsentation der Homepage vor dem gesamten Musik- und Kulturverein Jois inklusive aller Vorstandsmitglieder und Ehrengäste. Anhören der Verbesserungsvorschläge und Abklärung mit der Vorsitzenden Obfrau Anita Steinwandtner und dem Kapellmeister MMag. Klaus Schwarzbauer.

1 Projek gestartet 30.09.08 30.09.08 2 Projektdefinition 3Aufgabenverteilung 4Aufgaben durchgeführt 5Webseite fertig 6 Projektpräsentation 7 Projekt abgeschlossen

Markus Knittl und Stefan Zeugswetter

Der Projektabschluss ist die letzte Etappe des Projekts und beinhaltet unter anderem Projektabnahme, Projektanalyse und Projektauflösung

Inhalt

Zeitgerechte Projektabgabe

Nicht-Inhalt

Der Abgabetermin wurde nicht eingehalten

Ergebnis

Erfolgreiche Präsentation

Ressourcen

Projektleiter, Projektmitarbeiter, Laptop, Internet

Inhalt

Einzelne Aufgaben müssen zum geplanten Zeitpunkt erledigt sein

Nicht-Inhalt

Unkoordiniertes Zeitmanagement

Ergebnis

Gutes Projektcontrolling

Ressourcen

Projektleiter, Projektmitarbeiter, Laptop

Markus Knittl und Stefan Zeugswetter

Grundlagen

HTML Hypertext Markup Language (dt. Hypertext-Auszeichnungssprache) ist eine Textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Bilder, Texte und Hyperlinks in Dokumenten. HTML Dokumente sind die Grundlage des

WWWs. Dargestellt werden diese mit Hilfe eines Webbrowsers. Die Aktuellste Version von HTML 4.0.1. HTML 5 ist noch in der Entwicklung. HTML ist keine Seitenbeschreibungssprache wie etwa Postscript, da keine Papier-Seiten beschrieben werden, sondern Text strukturell und logisch ausgezeichnet wird. HTML ist eine Auszeichnungssprache und wird als solche auch nicht programmiert,sondern schlicht geschrieben

Markus Knittl und Stefan Zeugswetter

Struktur einer HTML-Seite

1. die Dokumenttypdefinition 2. dem HTML-Kopf (technische oder dokumentarische Informationen) im Browser 체blicherweise nicht sichtbar. 3. dem HTML-Body (enth채lt die anzuzeigenden Informationen) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Markus Knittl und Stefan Zeugswetter

PHP ist eine Skriptsprache mit einer an C angelehnten Syntax die Haupts채chlich zur Erstellung von dynamischen Webseiten oder Webanwendungen verwendet wird. Sie zeichnet sich durch eine leichte Erlernbarkeit sowie anderen Vorteilen wie zum Beispiel die breite Datenbankunterst체tzung aus. PHP wurde 1995 von Rasmus Lerdorf entwickelt. PHP wird kontinuierlich weiterentwickelt und befindet sich weiterhin in einem Wandel.

Code Hier sieht man ein PHP - Skript in HTML integriert <html> <head> <title>Hallo-Welt-Beispiel</title> </head> <body> <?php echo "Hallo Welt!"; ?> </body> </html>

Markus Knittl und Stefan Zeugswetter

MySQL Der MySQL Server ist ein Relationales Datenbankverwaltungssystem der schwedischen Firma MySQL AB. Es ist eine Open-Source-Software und für die meisten Betriebssysteme verfügbar. Die Datenbank MySQL ist wegen ihrer durchweg guten Leistungsfähigkeit sowie hohen Zuverlässigkeit und Benutzerfreundlichkeit zur populärsten Open-Source-Datenbank der Welt geworden. Ganz gleich, ob Sie Einsteiger in die Datenbanktechnologie oder ein erfahrener Entwickler oder Datenbankadministrator sind - MySQL bietet Ihnen eine umfassende Auswahl an zertifizierter Software, Unterstützungs- und Beratungsleistungen sowie Schulungen, um Ihren Erfolg sicherzustellen. localhost/phpmyadmin 2008/09 Absolventen Portal Seite 13 von 56 Fachspezifische Themenstellung ICS PHP

Markus Knittl und Stefan Zeugswetter

CSS steht für “Cascading Style Sheets ". Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in derSchriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden.

Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente im Anzeigefenster des WWWBrowsers positionieren und Abstände definieren. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors.

Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise in einer externen Datei zentrale Definitionen zum Aussehen eines Elements notieren und dieses Stylesheet in viele HTML-Seiten parallel einbinden. Alle Elemente der entsprechenden HTML-Dateien erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Zeit und macht die HTML-Dateien kleiner.

Markus Knittl und Stefan Zeugswetter

Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde. Andere Style-Sprache ist die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde. Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente auswählt und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen: Selektor { Eigenschaft: Wert; } Entwickelt wurde CSS von World Wide Web Consortium und die Endung von CSS-Dateien ist .css!

Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.

Markus Knittl und Stefan Zeugswetter

Java Script JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache, die hauptsächlich für das DOM-Scripting in Web-Browsern eingesetzt wird. Dabei ist unter JavaScript die Gesamtheit aus den Eigenschaften des Browsers (beziehungsweise Clients oder Scripting-Hosts) sowie des Document Object Model s (DOM) und des Sprachkerns zu verstehen.

JavaScripts können wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert werden. JavaScript wird im Unterschied zu überwiegend serverseitig eingesetzten Sprachen wie zum Beispiel Perl oder PHP überwiegend clientseitig eingesetzt. Mit clientseitigem JavaScript können Inhalte generiert werden, deren Erscheinungsbild sich bei Nutzerinteraktion ändert – beispielsweise die Farbe eines Hyperlinks, während sich der Mauszeiger über dem Link befindet. Dadurch lassen sich Webseiten realisieren, die herkömmlichen Desktop-Applikationen in Funktionalität und Bedienungskomfort nicht nachstehen.

Markus Knittl und Stefan Zeugswetter

Datenbank: In unserer Datenbank „MUSIKERLISTE“ haben wir unsere Tabellen angelegt. Begonnen haben wir mit unserer „absolvent“ Tabelle, später mussten wir die Tabelle „musiker“ hinzufügen. Weiteres existiert eine Tabelle „news“ für die aktuellen Eintragungen. Nach dem wir einen groben Plan für die Tabellen entworfen haben, fügten wir unsere Tabellen in die MySQL-Datenbank ein. Dies machten wir über das Programm php MyAdmin.

Erste Schritte Als erstes mussten wir uns auf „www.World4you.com“ anmelden: Domainnamen registrieren

Markus Knittl und Stefan Zeugswetter

Hier werden die Felddaten eingetragen und die Formatierungen f端r die Felder vergeben

Hier werden die Daten mit Hilfe einer Excel Tabelle importiert. Dateityp musikerliste.cvs

Markus Knittl und Stefan Zeugswetter

$i=0; while ($rs=mysql_fetch_array($ergebnis)) {

echo "<tr"; echo ">"; echo "<td>".utf8_encode($rs[vorname])." </td>"; echo "<td> ".utf8_encode($rs[zuname])."</td>"; echo "<td> ".utf8_encode($rs[instrument])."</td>" ; echo "<td>$rs[sonstiges]</td>"; $i++; } ?>

Markus Knittl und Stefan Zeugswetter

Die verwendeten Programme:

Adobe Photoshop CS5

Adobe Photoshop CS5 ist ein Bildbearbeitungsprogramme des US-amerikanischen Softwarehauses „Adobe Systems“. Im Bereich der professionellen Bildbearbeitung ist das Programm Marktführer und ist marktbeherrschend. Adobe Photoshop ist Teil der Adobe Creative Suite CS5, einer Sammlung von GrafikMarkus Knittl und Stefan Zeugswetter

und Designprogrammen und wie die meisten anderen Adobe-Anwendungen für die führenden Betriebssysteme verfügbar. Photoshop wird generell als eines der funktionsreichsten Bildbearbeitungsprogramme angesehen. Der sehr hohe Preis macht das Programm für Privatanwender unattraktiv und erlaubte es anderen Programmen wie Paint oder dem freien Programm GIMP, sich im Amateurbereich zu etablieren. Gegenüber den teureren und umfangreicheren Photoshop-Versionen wurden Funktionen entfernt, die eher im professionellen Bereich Anwendung finden. So fehlt wie bei den meisten Konkurrenzprodukten der CMYK-Farbmodellmodus oder die Möglichkeit zum Bearbeiten von Bildern in einer Farbtiefe von 48 Bit. Sie sind daher für Webgestaltung sowie Nachbearbeitung von Bildern aus Digitalkammeras gedacht. Speziell auf einfachere Bedienung ausgerichtete Funktionen wie DateiBrowser mit erweiterten Möglichkeiten, Rote-Augen-Werkzeug oder SofortReparatur-Pinsel, waren zunächst in Photoshop Elements zu finden, bevor sie dann im leistungsstärkeren Photoshop CS2 zur Verfügung standen. Die ElementsAusgabe wird oft zusammen mit Digitalkameras oder Scannern ausgeliefert.

Markus Knittl und Stefan Zeugswetter

Adobe Flash CS5

Markus Knittl und Stefan Zeugswetter

Adobe Flash ist ein Programm, entwickelt von der Softwarefrima Adobe System, zur Erstellung interaktiver Inhalte. Der Benutzer produziert mit dieser Software Dateien im proprietären SWF-Format. Bekannt und umgangssprachlich gemeint ist Flash als Flash Player, eine Softwarekomponente zum Betrachten dieser SWF-Dateien. Der Flash Player ist eines der verbreitetsten Browers-Plug-ins.

Mit Adobe Flash CS5 ist also das Erstellen nachhaltige Anwendererlebnisse, die auf jedem Bildschirm – unabhängig von der Größe oder Auflösung – in konsistenter Qualität dargestellt werden.

Auch ist es möglich Konzepte mit höchster Präzision zu realisieren. Das Gestalten von pixelgenauen interaktiven Inhalten mit außergewöhnlicher Typografie, flexiblen Layouts und flüssiger Animation ist ein weiter Bonus von Adobe Flash CS5.

Eine große Stärke von Flash ist das Einbetten von multimedialen Inhalten wie Videos oder interaktive Elemente. Begeisternd sind auch die eindrucksvollen Animationen und wirklichkeitsnahe Bewegungen die mit diesem Programm möglich sind

Markus Knittl und Stefan Zeugswetter

Die Programmsprache in Flash

Action Script ist die Programmiersprache für die Adobe Flash PlayerLaufzeitumgebung.

Mit dieser Programmiersprache kann in Flash-Inhalten und -Anwendungen Interaktivität, die Verarbeitung von Daten und vieles andere mehr realisiert werden. Action Script-Anweisungen werden von der Action Script Virtual Machine (AVM) ausgeführt, die Bestandteil von Flash Player ist. Der Action Script-Programmcode wird in der Regel in das sogenannte Bytecode-Format (eine Art computerlesbare Programmiersprache) kompiliert.

ActionScript 3.0 stellt ein robustes Programmiermodell dar, das Entwicklern mit Grundkenntnissen der objektorientierten Programmierung sofort vertraut ist. Zu den wichtigsten Funktionsmerkmalen von ActionScript 3.0 gehören:

Eine neue ActionScript Virtual Machine (mit der Bezeichnung AVM2), die einen neuen Bytecode-Befehlssatz verwendet und deutliche Leistungsverbesserungen bieten

Markus Knittl und Stefan Zeugswetter

Auswählen des Dateiformats z.B. Action Script1.0 Action Script 2.0 Action Scirpt 3.0 oder die vorhanden vorgefertigten „Motion tweens „ Bewegungseinstellungen für geplante Animationen.

Die eingefügten Bilder müssen in Objekte umgewandelt werden, anschließend mit den motion tweens in Bewegung versetzt werden. Die unten angegebenen Balken zeigen die Zeitleiste die zum Bearbeiten der Bilderanimationen dient und den genauen Zeitpunkt festlegt wann welche Aktion durchgeführt wird.

Markus Knittl und Stefan Zeugswetter

Adobe Dreamweaver

Der multifunktionale HTML-Editor „Dreamweaver CS5“ der Firma Adobe Systems, bestehend aus einer Kombination eines WYSIWYG-Editors mit paralleler Quelltextbearbeitung. Aufgrund seiner Komplexität, seines großen Funktionsumfangs und Preises wird das Programm eher von professionellen Anwendern verwendet. Dreamweaver ermöglicht die übersichtliche grafische Bearbeitung von Webpages und bietet Funktionen wie Farbkennzeichnung für HTML-Code und Skriptsprachen wie PHP und Java Script.

Markus Knittl und Stefan Zeugswetter

Auswählen des Dateiformats z.B. datei.php oder datei.css oder datei.html die angegeben Voreinstellungen sind nur in der aktuellen Version von Adobe CS5 und erleichtern den Umgang mit den Programmiersprachen HTML und CSS und PHP

„Double-View“ in dem Programm Dreamweaver, das bedeute es werden alle aktuellen Formatierungen werden sofort auf dem Bildschirm präsentier.

Markus Knittl und Stefan Zeugswetter

Footer

Facebook-button

Twitter-button

Rss-Feed-button

Link = "http://www.facebook.com/#!/pa ges/Musik-und-KulturvereinJois/283175711242" target="_blank"

Link = https://www.twitter.com/" target="_blank"

Link = http://www.rssagent.at/rss-feed-eintragen.html

Home

Index_2.php

Markus Knittl und Stefan Zeugswetter

About us

Impressum.html

Contact

Kontaktform.php

Clear Fix. CSS ist eine Css- Fromatierungsdatei die den Footer auf eine fixe Position bindet und ihn unbeweglich macht und ihn mitscrollen lässt.

Sind die gesamten CSS Formatierungen für alle Dokument enthalten, inklusive aller vergebenen Klassen und Sonderformatierungen. Es sind verschieden style.css vorhanden „style_2.css“ und „style_3.css“ für die restlichen Seiten.

Markus Knittl und Stefan Zeugswetter

Die Seiten

Index

Ist die offizielle Startseite der Musik und Kulturverein Homepage und wird als erste Seite aufgerufen beim Eintippen der URL. Sie ist Formatiert wie jede andere Seite des Konzeptes dass wir mithilfe des MKV und deren Verantwortlichen erarbeitet haben. Sie beinhaltet eine „Falsh Animation“ die wir zuvor erstellt haben mit dem Programm Adobe CS5 Flash. Mit dem angebenden „weiter zur Startseite“ Button gelangt man auf die Seite index_2.php und von dort aus auf jeder weitere Seite

Markus Knittl und Stefan Zeugswetter

Liste Musiker

Hier werden die gesamten Musiker des Musikverein Jois aufgelistet und können im Backend später bearbeitet werden. Es wurde eine Datenbank auf world4you angelegt und die Tabelleneigenschaften wurden festgelegt anschließend wurden die Daten in der Datei „liste_musiker.php“ ausgegeben. Es wurden auch CSS Formatierungen vorgenommen um das Design der Seite etwas hervorzuheben. Die Hände mit der Liste soll wie eine Auflistung aller Musiker wirken und ist eine „PNG“ Grafik mit den Notenlinien kombiniert.

Markus Knittl und Stefan Zeugswetter

Link weiter zur dynamischen Seite „anmelden.php“ Um Änderungen vorzunehmen

Die Links „HOME“, „ABOUT“ „Das Schlüsselbild“ sind interne Links zu verschiedenen Seiten. HOME führt wieder zur Seite Index_2.php. ABOUT führt den User auf die Seite des Impressums des MKV impressum.html und die Grafik des Schlüssel führt den Benutzer in das Backend um interne Änderung in der Liste vorzunehmen.

Der “Footer“ wurde der Seite „liste_musiker.php“ angepasst und beinhalte die gleichen Links wie der normale „Footer“. Die Grafiken wurden als „PNG“ gespeichert um eine Transparenz zu ermöglichen.

Markus Knittl und Stefan Zeugswetter

Dynamische Teile der Homepage

Anmelden

Mit Hilfe einer Passwortüberprüfung durch Sessions wird das Passwort abgefragt bei richtiger Eingabe kommt man weiter zu Musiker liste Admin um die einzelnen Musiker zu bearbeiten, löschen oder hinzuzufügen. Mit dem Befehl Session Start wird die Abfrage begonnen. Das Passwort lautet „mkv“ und bietet den befugten Usern Eingang in das Backend.

Markus Knittl und Stefan Zeugswetter

„Check“ Überprüfen des Passwortes

Check.php überprüft letztendlich das Passwort und gibt bei falscher Eingabe aus „Passwort falsch zurück zur Liste Musiker“ hingegen bei richtiger Eingabe leitet es den User weiter zur liste_musier_admin.php wo die angegebenen Werte bearbeitet werden können

Markus Knittl und Stefan Zeugswetter

Musikerlist Administrator

Ist das Backend der Homepage Musikverein Jois und bietet den berechtigten Usern die Möglichkeit die einzelnen Musiker zu bearbeiten, zu löschen oder hinzuzufügen. Die Liste wurde anders als die normale liste musiker.php formatiert da ein Unterschied zwischen den beiden darzustellen. Sie wurde in Gün formatiert und die Sympble „löschen.png“ „änder.png“ ermöglichen diese Funktionen. <?php $benutzer="musikverein_joat"; $pass="9xsr9f"; $db="musikverein_joisatdb1"; $link=mysql_connect("mysqlsvr20.world4you.com",$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 musiker"); ?>

Markus Knittl und Stefan Zeugswetter

Musiker ändern

Diese php Seite enthält die Befehle um die Musiker Liste zu ändern und sie anschließend auf der Liste zu speichern.

Markus Knittl und Stefan Zeugswetter

Musiker hinzuf端gen

Die Seite Musiker hinzuf端gen, l辰sst den Administrator einen neuen Musiker anlegen, Nummer, Name, Nachname, Instrument und Sonstiges werden dann hinzugef端gt.

Markus Knittl und Stefan Zeugswetter

Musiker lรถschen

Dieser Befehlt lรถscht einen Musiker aus der Datenbank

Markus Knittl und Stefan Zeugswetter

Ausloggen

Die Session wird beendet, das bedeutet der Administrator wird ausgeloggt

Sie sind ausgeloggt Weiter zur Startseite

Markus Knittl und Stefan Zeugswetter

Ausloggen, wird best채tigt und man kann zur체ck zur Liste Musiker wechseln

Geschichte

Der Musik und Kulturverein Jois wurde im Jahr 1987 gegründet. Der damalige Obmann Martin Hauptkorn hatte es nicht gerade leicht, da keine Instrumente und keine ausgebildeten Musiker vorhanden waren. Nach der Ausbildung von zwei Jahren war das Orchester bedingt spielfähig und gab seine erste Darbietung am Kinderfest 1988 mit einigen Stücken. Die Musiker waren zu diesem Zeitpunkt 8 bis 12 Jahre. Ausgebildet wurden die Musiker durch Fachlehrer Robert Veszely und Kpm. Rudolf Tschany. Letzerer übernahm bis zum Jahre 1995 die Leitung der Kapelle. Ab diesen Jahr übernahm der damals 17jährige Musikstudent Klaus Schwarzbauer die musikalische Leitung bis dato. Nächstes Jahr feiert der MV sein 25 Jähriges Jubiläum. Markus Knittl und Stefan Zeugswetter

Instrumente

Diese 3 pop-up-Fenster wurden mit Java-Script erstellen. Der Button (more info) verweist auf liste_musiker.php

Markus Knittl und Stefan Zeugswetter

index_2

Auf dieser Seite befinden sich die Unterpunkte:     

Home Geschichte Instrumente Konzertplan Bildergalerie



Home verweist zurück auf die oben gezeigte Seite (index_2.php?



Geschichte verweist auf (geschichte.html)



Instrumente verweist auf (instrumente.html)



Konzertplan verweist auf (konzertplan.html)



Bildergalerie verweist auf (bilder.html)



Diese kleine Ente verweist auf (anten.html)



Dieses Logo verweist auf eine externe Seite (www.jois.info)

Markus Knittl und Stefan Zeugswetter

Die Seite index_2.php hat eine Datenbankanbindung, die den Benutzern immer die neuesten News mitteilt. Zurzeit ist der Satz (Die neue Homepage des Musikverein Jois ist seit 23.03.2011 online) bei den aktuellen News zu sehen.

Markus Knittl und Stefan Zeugswetter

konzertplan

Home verweist auf die Seite (index_2.php) Print ist der Druckbefehl und รถffnet den Drucker Year zeigt den gesamten Jahreskalender an

Markus Knittl und Stefan Zeugswetter

Der Kalender soll Informationen an die Benutzer weitergeben wie zum Beispiel (nächster Balltermin, nächste Generalversammlung uvm.) Der Kalender wurde mit dem Programm Calendar Pad erstellt und via. ftw hochgeladen und mittels Google Iframe eingebunden.

Das Programm CalendarPad hat es uns ermöglicht eine Kalender zu erstellen, der zu unserer Homepage passt, und in dem wir individuell die Termine eintragen konnten.

Der Kalender wurde via. ftp auf www.world4you.com geladen. Wir mussten nur den ftp-server, den Usernamen und das Userpasswort eingeben und den Kalender veröffentlichen.

Markus Knittl und Stefan Zeugswetter

bilder Hier sieht man die Bildergalerie, mit den Einzelnen Bildern.

Wenn man auf ein Bild klickt, wird es grĂśĂ&#x;er und man erkennt wesentlich besser was sich auf den Fotos befindet.

Wenn man auf den Pfeil rechts unten im Bild klickt, dreht man das Bild und auf der RĂźckseite erscheint dann die Beschreibung des Bildes.

Markus Knittl und Stefan Zeugswetter

Hier sieht man den Befehl für die Bildergalerie, wir haben uns geeinigt, dass die Bilder maximal 640pixel groß sind und die Bildergalerie 3 Spalten und 3 Zeilen hat.

Die Bilder wurden fortlaufend nummeriert (bild2.jpg, bild3.jpg, bild4.jpg…) und befinden sich im Ordner (imgs).

Der Rot markierte Teil, zeigt die Bildbeschriftung an, wie oben gezeigt. Wenn man das Bild wendet, sieht man die Beschreibung des Bildes.

Markus Knittl und Stefan Zeugswetter

impressum

Der Inhalt des Impressums: Die Herausgeber der Website "Musikverein Jois" übernehmen keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen die Herausgeber, die sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen. Die Herausgeber behalten es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen. 2. Verweise und Links: Bei direkten oder indirekten Verweisen auf fremde Internetseiten ("Links"), die außerhalb des Verantwortungsbereiches der Herausgeber liegen, würde eine Haftungsverpflichtung , in dem die Herausgeber von den Inhalten Kenntnis haben und es ihnen technisch möglich und zumutbar wäre, die Nutzung im Fall rechtswidriger Inhalte zu verhindern. Die Herausgeber erklären daher ausdrücklich, daß zum Zeitpunkt der Linksetzung die entsprechenden verlinkten Seiten frei von illegalen Inhalten waren. 3. Urheber- und Kennzeichenrecht Die Herausgeber sind bestrebt, in allen Publikationen die Urheberrechte der verwendeten Fotografien, Grafiken, Tondokumente, Videosequenzen und Texte zu beachten, von ihnen selbst erstellte Fotografien, Grafiken, Tondokumente, Videosequenzen und Texte zu nutzen oder auf lizenzfreie Fotografien, Grafiken, Tondokumente, Videosequenzen und Texte zurückzugreifen. Alle innerhalb des Internetangebots genannten und gegebenenfalls durch Dritte geschützten Marken- und Warenzeichen unterliegen uneingeschränkt den Bestimmungen des jeweils gültigen Kennzeichenrechts und den Besitzrechten der jeweiligen eingetragenen Eigentümer. Für das Copyright der auf der Website vom Musikverein Jois veröffentlichten Texte -Fotografien, -Grafiken, -Tondokumente und -Videosequenzen gilt der Musikverein-Jois-Copyrighthinweis. 4. Rechtswirksamkeit dieses Haftungsausschlusses Dieser Disclaimer / Haftungsausschluß ist als Teil des Internetangebots zu betrachten, von dem aus auf diese Seite verwiesen wurde. Sofern Teile oder einzelne Formulierungen dieses Textes der geltenden Rechtslage nicht, nicht mehr oder nicht vollständig entsprechen sollten, bleiben die übrigen Teile des Dokuments in ihrem Inhalt und ihrer Gültigkeit davon unberührt. Markus Knittl und Stefan Zeugswetter

kontaktformular

Dieses Kontaktformular ermöglicht den Benutzern der Website, Fragen zu stellen und mögliche Wünsche oder Beschwerden mitteilen zu können.

Markus Knittl und Stefan Zeugswetter

Wenn man das Kontaktformular ausfüllt wird Kontrolliert, ob man kein Feld ausgelassen hat, oder man die Rechenaufgabe nicht gelöst hat. (Hilft gegen Roboter, die sonst womöglich den Mailserver zumüllen)

Die Fehlermeldung erscheint wenn man ein Falsches Ergebnis eingesetzt hat.

Markus Knittl und Stefan Zeugswetter

Es darf kein Feld leer bleiben!

Schickt die E-Mail an unsere Web-Mail Adresse (office@musikverein-jois.at)

Erkennt ung端ltige E-Mail Adressen, und schickt diese auch nicht weg.

Markus Knittl und Stefan Zeugswetter

MusikAnten

Das Template wurde Komplett ver채ndert, jedes Bild des Templates bekam eine neue Farbe (Schwarz). Die Seite anten.html ist nur die Vorseite zu den jungen MusikANTEN und zeigt das Logo des Jungorchester Musikverein Jois. Die kleine Musiknote verweist zur체ck auf index_2.html

Diese Ente verweist auf anten.html

Dieses A (ganz unten bei MusikAnten) verweist auf jungen.html

Markus Knittl und Stefan Zeugswetter

jungen

Die Jungen Musikanten â&#x20AC;&#x201C; Die Zukunft des Vereins Auf dieser Seite befinden sich nur Informationen bezĂźglich des Jungorchesters.

Markus Knittl und Stefan Zeugswetter

Ein kleiner Ausschnitt: Das Jugendorchesters des Musikvereines Jois "MusikAnten" wurde vor zirka 5 Jahren in der heutigen Form ins Leben gerufen. Davor gab es lediglich ein kleines Ensemble von ein paar Jungmusikern. Da sich die Situation im Musikverein so erwies, dass es in Zukunft fast unmöglich sein würde, spielfähig zu bleiben, (da die ältere Truppe immer kleiner wurde), entschloss man sich, in den Nachwuchs einen neuen Schwerpunkt zu setzten.

Die kleine Musiknote verweist zurück auf index_2.html

Diese Ente verweist auf anten.html

Markus Knittl und Stefan Zeugswetter

Verwendeten Links: http://www.on-design.de/tutor/photoshop/index.htm http://www.freewebtemplates.com/ http://www.website-hit-counters.com/ http://www.paulvanroekel.nl/picasa/imageflowdemo/Winterinwhite/index.html http://download.cnet.com/3001-10247_410385974.html?spi=d73e1f2a51ed3504e1b8a7d1c00da9de http://www.lynda.com/home/flash.aspx?AWKeyword=Flash&_kk=flash%20online%20course&_kt=1 69b6c00-9cc9-49da-9adb-b881f1874d9a&gclid=CNiDzruduKYCFQmMzAode095Iw http://www.w3schools.com/js/default.asp http://www.free4uwallpapers.org/ http://www.facebook.com/#!/pages/Musik-und-Kulturverein-Jois/283175711242 https://www.twitter.com http://www.rss-agent.at/rss-feed-eintragen.html http://www.adobe.com/de/products/creativesuite/ http://www.google.at/imgres?imgurl=http://www.msdw.at/bildergrafiken/copy_of_Noten.gif&imgrefurl=http://www.msdw.at/&usg=__MbnX370d4CB79BTzVHEU9Xh8c4=&h=684&w=1305&sz=86&hl=de&start=0&zoom=1&tbnid=hM7rb8YFEoWHM:&tbnh=85&tbnw=163&ei=3jacTaGWDcSKswa6kbGEBg&prev=/images%3Fq%3Dnot en%26um%3D1%26hl%3Dde%26sa%3DX%26biw%3D1440%26bih%3D680%26tbm%3Disch&um=1&it bs=1&iact=hc&vpx=103&vpy=95&dur=509&hovh=85&hovw=163&tx=167&ty=63&oei=3jacTaGWDcS Kswa6kbGEBg&page=1&ndsp=34&ved=1t:429,r:0,s:0 http://www.on-design.de/tutor/photoshop/index.htm

Markus Knittl und Stefan Zeugswetter

Musikverein Jois

Markus Knittl und Stefan Zeugswetter