Inhaltsverzeichnis
Inhaltsverzeichnis 1 Einleitung.................................................................................................. 2 1.1 Vorwort..........................................................................................................................2
2 Web Content Management ....................................................................... 3 2.1 Was ist ein Web-Content -Management–System (WCMS)?.....................................3 2.2 Anforderungen an ein WCMS ....................................................................................4
3 Realisierung einer Website für eine Gemeinde ......................................... 7 3.1 Anforderungsdefinition an die Website......................................................................7 3.2 Die Wahl der Kontaktperson(en) ................................................................................8 3.3 Strukturierung von Inhalten (Inhaltsarchitektur) ..................................................10 3.4 Aufbau und Kategorisierung der Gemeindehomepage ..........................................11 3.4.1
Tabellenstruktur...................................................................................................11
3.4.2
Kategorisierung der Inhalte .................................................................................17
3.4.3
Beschreibung der Menüpunkte ............................................................................18
3.5 Der „Anschluss“ ans Netz..........................................................................................23 3.6 Das Erscheinungsbild (Bildschirmfoto)...................................................................25
4 Exemplarische interaktive Webdesign-Techniken................................... 26 4.1 Die Do´s and Don’t´s des Webdesigns ......................................................................26 4.2 Online Formulare .......................................................................................................27 4.3 Professionelle Gestaltung durch CSS .......................................................................31 4.4 Dynamik ins Web durch Javascript .........................................................................34 4.5 Client-Server Beziehung ............................................................................................38 4.6 Erstellung eines Votings .............................................................................................40
5 Literaturverzeichnis................................................................................. 48
-1-
Einleitung
1 Einleitung 1.1 Vorwort Heutzutage ist die Internetpräsenz für jede Gemeinde von großer Bedeutung. Dies hat viele Gründe: Sei es, um den Gemeindebürgern auf einfachem Wege wichtige Informationen bereitstellen zu können, oder mögliche Touristen über die Sehenswürdigkeiten und Schönheit der Region zu informieren.
Wie ich auf dieses Projekt gestoßen bin, ist eigentlich recht schnell erzählt. Meine Heimatgemeinde Ruden war auf der Suche nach einem Designer und Programmierer für ihre „geplante“ Gemeindehomepage. Die Auftraggeber wandten sich kurzentschlossen an meinen Informatikprofessor Prof. Peter Micheuz, der mich ohne zu zögern weiterempfahl.
Aus verschieden Gründen nahm ich die verantwortungsvolle Aufgabe an. Zum einen war ich recht neugierig, ob ich ein solch großes Projekt meistern würde. Zum anderen bot sich somit auch die Möglichkeit, mein Talent in der Öffentlichkeit präsentieren zu können. Mit viel Elan, einer positiven Grundeinstellung und der Überzeugung, dass ich dieses Projekt rasch zum Abschluss bringen würde, ging ich an die Arbeit. Diese Fachbereichsarbeit ist sozusagen eine Dokumentation dieser Arbeit an der Homepage für die Gemeinde Ruden.
Danken möchte vor allem Herrn Prof. Mag. Peter Micheuz. In erster Linie für das große Vertrauen, dass er in mich gesteckt hat. Auch für die großartige Betreuung möchte ich mich bedanken, selbst wenn es, wie ich zugeben muss, nicht immer ganz einfach war, mich zur Weiterarbeit zu animieren. Das Ergebnis meiner harten Arbeit kann man nun unter http://www.ruden.at bewundern.
-2-
Web Content Management
2 Web Content Management 2.1 Was ist ein Web-Content-Management–System (WCMS)? Die erste Frage, die sich wohl jeder stellt, der mit dem Thema WCMS konfrontiert wird, lautet: „Was ist eigentlich ein Web-Content-Management-System?“ und die zweite ist: „Was bringt das Ganze eigentlich?“. 1
Vor der Beantwortung dieser Fragen muss zunächst noch geklärt werden, was unter Content zu verstehen ist. Der Content – der Inhalt – einer Website besteht aus verschiedenen Elementen. Im einfachsten Falle handelt es sich dabei um einen Text. Mit der Entwicklung von statischen Websites zu multimedialen Erlebnisstätten sind allerdings auf ihnen zunehmend auch andere Formen von Inhalten zu finden, und zwar nicht nur Bilder bzw. Grafiken: Auch Audio, Video, Animationen und interaktive Elemente spielen eine immer wichtigere Rolle. 2 Der Content lässt sich dabei auf verschiedene Arten differenzieren: •
Mit Hilfe von so genannten digitalen Assets : Assets Übliche Webinhalte Multimediale Assets
Erklärung Texte, Bilder und Links. Plug- ins, wie z.B.: Flash-Animationen, werden als multimediale Assets genutzt, und gehören praktisch schon zum Standart.
Applikationsgebundene Assets
Sie benötigen zur Darstellung immer das Programm, mit dem sie erstellt wurden. Das Web übernimmt nur die Verteilung, jedoch nicht die Darstellung der Dokumente.
Community Assets
Mitglieder einer Community erstellen selbst aktiv Inhalte im Web. Diese Bestandteile nennt man Community Assets.
1
vgl. Jörg Dennis KRÜGER, Matthias Kopp Web Content managen – professioneller Einsatz von Web-ContentManagement-Systemen 2
Vgl. ZSCHAU, TRAUB, ZAHRADKA Web Content Managment – Websites professionell planen und betreiben.
-3-
Web Content Management
Werden im E-Commerce-Bereich oft verwendet. Mit sg. Transaktionelle Assets
Sessions erhält der Besucher ein eindeutige Kennung. Der Vorteil ist die Personalisierbarkeit der Inhalte.
•
Durch ihre Änderungsfrequenz lassen sich Inhalte auch kategorisieren: Änderungsfrequenz Statische Informationen Dynamische Informationen Semidynamische Informationen
Werden
nach
ihrer
Erklärung Erstellung nicht
mehr
verändert.
(z.B.: Gebrauchsanweisungen, historische Ereignisse) Sehr hoher Grad an Aktualität und bedürfen daher einer besonderen Aufmerksamkeit. (z.B.: Börsenkurse, usw.) Mischform aus statischen und dynamischen Informationen. (z.B.: Preislisten, Lebensläufe lebender Autoren, usw.)
Nun, da der Begriff Content geklärt wurde, kann die Frage beantwortet werden, was eigentlich ein Content-Management-System ist. Ein Web-Content-Management-System (WCMS) ist eine komplexe Software, die der Erstellung, Überwachung und Archivierung von interaktiven Inhalten für Websites dient. 3 Ein solches System soll dabei auch Autoren, die wenig oder gar keine Erfahrung in der Erstellung von Webinhalten haben, die Möglichkeit bieten Inhalte, publizieren zu können, ohne sich mit HTML (Hypertext Markup Language) herum schlagen zu müssen. Dabei sollte derjenige nur eingeschränkte Layoutveränderungen vornehmen können. Es gilt noch zu sagen, dass dies keine allgemeine Definition ist, und dass es bis jetzt noch keine gibt. Der Begriff „Web Content Management“ ist mit der Zeit und den Ansprüchen gewachsen.
2.2 Anforderungen an ein WCMS Die minimale Anforderung an ein WCMS ist die Trennung von Inhalt, Gestaltung (Design, Layout) und Funktionalität (Prozesse, Algorithmen). Optimalerweise sind auch die Gestaltung und die Funktionalität autonom. Das bedeutet, dass jeder dieser drei Teile unabhängig von einander geändert werden kann, ohne einen anderen verändern zu müssen. 3
Definition aus dem Fachmagazin CYByz
-4-
Web Content Management
Eine solche Aufteilung kann man mit so genannten. Templates (Vorlagen) erreichen. Hierbei werden immer wiederkehrende Anteile einer Website (wie z.B.: Kopfzeile, Fußzeile oder Menü) zentral in einer separaten Datei gespeichert.
So kann das gesamte Erscheinungsbild durch das Auswechseln einer einzelnen Vorlage geändert werden. Der Inhalt und die Funktionalität bleiben dabei unangetastet.
Eine Seite in einem WCMS besteht also aus mehreren Teilen, die unabhängig voneinander verändert werden können. Die Template-Dateien stellen dabei die Struktur und das Erscheinungsbild mit Platzhaltern zur Verfügung. Je nach Komplexität der Website kann eine Seite aus mehr oder weniger Templates bestehen. 4
Nun bleibt nur noch die Frage offen, was der ganze Aufwand eigentlich bringt. Um diese Frage beantworten zu können, möchte ich herkömmliches Webpublishing mit einem WCMS vergleichen.
4
Vgl. Prof. Mag. Peter MICHEUZ Internet inside - Skriptsprachen und Datenbanken in einer Client-ServerUmgebung
-5-
Web Content Management
Herkömmliches Webpublishing
Webpublishing mit WCMS
Inhalt, Gestaltung und Funktionalität
Inhalt, Gestaltung und Funktionalität durch
fest miteinander verknüpft.
Assets und Templates getrennt.
Überproportional wachsender Aufwand bei
Proportionales Wachstum von Aufwand und
wachsendem Inhalt
Content-Menge.
Redesign ist ein aufwendiger Prozess der
Einfaches Redesign duch Änderung der
Umprogrammierung.
Templates.
Zentralisiertes Arbeiten über den Webmaster.
Dezentrales Arbeiten an einem verteilten System.
Großer Zeitaufwand für Publishing durch
Geringer Zeitaufwand durch
„Bottleneck - Webmaster“
Dezentralisierung.
Technisch nicht versierte Autoren sind nicht
Jeder innerhalb des Systems kann Texte
involviert.
verfassen oder ändern.
Man sieht also, die Verwendung eines dynamischen Web-Content-Management-Systems bietet enorme Vorteile gegenüber der herkömmlichen statischen Methode. Man kann sowohl Zeit als auch jede Menge Geld sparen.
-6-
Realisierung einer Website für eine Gemeinde
3 Realisierung einer Website für eine Gemeinde 3.1 Anforderungsdefinition an die Website Der erste Schritt zur Realisierung einer guten Website ist eine klare und eindeutige Anforderungsdefinition. Es ist dabei von größter Wichtigkeit, dass bei einem solchen Projekt von Beginn an klare Verhältnisse geschaffen werden:
o Wer ist der Kontaktpartner des Webdesigners, wenn dieser einmal Informationsmaterial benötigt? o Wann soll der Releasetermin (Abgabetermin) der Website sein? o Anforderungen seitens des Auftraggebers o Anforderungen seitens des Webdesigners o Evtl. ein Kostenvoranschlag
Am besten kann dies bei einem Gespräch unter vier (oder auch mehr) Augen besprochen werden. Schon beim ersten Treffen sollten, wie oben schon erwähnt, die wichtigsten Anforderungen an die geplante Website seitens des Auftraggebers gestellt werden. Darunter sollten mitunter folgende Fragen beantwortet werden:
o Was will man mit der Homepage erreichen? o Für wen ist die Internetpräsenz gedacht? o Welche Kategorien sollten in der Website unbedingt untergebracht und berücksichtigt werden? o Welchen Nutzen soll die Website für den Auftraggeber haben? o Welchen Nutzen soll ein möglicher Besucher aus der Website ziehen?
In meinem Fall geschah dies bei einem Treffen in der Schule. Die Beantwortung der oben gestellten Fragen war in diesem Fall recht einfach und eindeutig:
o Zum einen soll die Homepage Gemeindebürgern eine möglichst unkomplizierte Möglichkeit (durch einfache Menüführung) bieten, an wichtige Informationen zu gelangen. Zum anderen fremden Personen die Gemeinde vorstellen. o Sowohl für Gemeindebürger, als auch aus wärtige Personen. -7-
Realisierung einer Website für eine Gemeinde
o Wichtige
Kategorien
waren:
Veranstaltungskalender,
Termine
und
Gemeinde-
bürgerservice, sowie Vorstellung des Tourismus und der Wirtschaft. o Eventuell mehr Touristen in die Gemeinde locken. o Der Besucher soll Informationen leicht und unkompliziert aus der Homepage entnehmen können.
3.2 Die Wahl der Kontaktperson(en) Ein wichtiger Faktor bei der Realisierung einer Website für eine Gemeinde ist die Bestimmung der Kontaktperson bzw. Personen.
In meinem Fall stellte man mir meine Kontaktperson gleich beim ersten Treffen vor. Wenn man, wie in diesem Fall nur einen einzigen Betreuer bestimmt, sollte man sich einem im Klaren sein: Ein solcher Betreuer spielt eine enorm wichtige Rolle während der Entwicklungszeit der Website. Er kann diesen Zeitraum verkürzen, oder verlängern; die Entwicklung fördern oder behindern. Deshalb sollte diese Person sorgfältig ausgesucht werden und gewisse Kriterien erfüllen. Sie oder er sollte:
o zuverlässig sein, o Interesse für die Website an sich zeigen, o Elan und eine gewisse Begeisterungsfähigkeit besitzen, o kreativ sein.
Leider konnte meine Kontaktperson keine dieser Kriterien in mir wünschenswerter Weise erfüllen. Viele werden jetzt denken, ob es nicht besser wäre, gleich ein ganzes Team zur Betreuung zu beordern und damit die Verantwortung aufzuteilen? Nun beides, die Betreuung durch eine einzelne Person sowie durch ein ganzes Team hat Vorund Nachteile. Dies wird am deutlichsten, wenn man beides miteinander vergleicht. -8-
Realisierung einer Website für eine Gemeinde
Betreuung durch einzelne Person
Betreuung durch Team Verantwortung ist auf mehrere Personen
Verantwortung lastet auf einer Person.
aufgeteilt Kommunikation kann auf Grund versch.
Kommunikation ist unkompliziert.
Meinungen kompliziert sein.
Bei Ausfall des Betreuers steht der
Bei Ausfall einer Person stehen noch andere
Entwicklungsprozess.
zur Verfügung.
Die Einhaltung von Terminen ist einfach, da
Vereinbarung von Terminen schwierig, da
sich nur 2 Personen treffen.
viele Personen Zeit haben müssen.
Man sieht also, dass keine der beiden Varianten frei von Problemen und Schwächen ist. Eine optimale Lösung wäre wahrscheinlich eine Verschmelzung der Betreuungsvarianten, in der sich die positiven Eigenschaften addieren.
In dieser Variante erarbeitet das Betreuungsteam und die Kontaktperson gemeinsam die Vorschläge. Falls diese einmal ausfällt ist das kein Problem, da noch andere aus dem Betreuungsteam vorhanden sind. Die Kontaktperson vermittelt dann die Vorschläge dem Webmaster. Dieser kann sich dann ausschließlich dem Realisieren der Website widmen und muss sich dann z.B. nicht mit verschobenen Terminen herum ärgern. Der größte Vorteil dieser Variante ist die Verbindung der Vorteile aus den beiden anderen. Die Verantwortung lastet auf mehreren Schultern und es bleibt dennoch eine unkomplizierte Kommunikation zwischen Webmaster und Kontaktperson erhalten. -9-
Realisierung einer Website für eine Gemeinde
Der Webmaster dient hier also nur als eine Art „Werkzeug“ zur Realisierung der erarbeiteten Vorschläge.
3.3 Strukturierung von Inhalten (Inhaltsarchitektur) Sehr oft wird bei der Realisierung einer Website zu großer Wert auf das Design der Seite gelegt und viel Mühe in Grafik(en) investiert. 5 Dabei ist es für die Akzeptanz und den Erfolg einer Website enorm wichtig, dass neben dem Erscheinungsbild
auch
grundlegende
Anforderungen
an
Funktionalität
und
Bedienerfreundlichkeit berücksichtigt werden. Als Vorbereitung vor der eigentlichen Produktion der Website sollte deshalb das Konzept und der Entwurf auf einige Grundsätze überprüft werden:
o Intuitive, funktionierende Navigation. o Ein klares Layout und visuelle Konsistenz in der Darstellung. o Berücksichtigung der technischen Voraussetzungen des Benutzers. o Angebot an Such- und Hilfe-Funktionen, Hinweise oder Referenzmaterialien. o Sinnvoller Umfang und Struktur der Inhalte. o Auswahl des passenden Mediums und Darstellungsart.
Wie bei allen Medien, so gibt es auch im Internet inhaltliche und organisatorische Richtlinien zur optimalen Gliederung von großen Informationsmengen. 6
Die Fähigkeit und die Bereitschaft des Benutzers verschiedene Info rmationen innerhalb eines begrenzten Zeitraums aufzunehmen und zu verarbeiten sind beschränkt. Der Besucher einer Website wird in den meisten Fällen nicht bereit sein, in großen Einzelseiten nach der von ihm gesuchten Information zu suchen. Die sinnvolle Darstellung der Daten und deren Aufteilung in ein wiederkehrendes Schema können diese Bereitschaft erhöhen.
5 6
Vgl. http://www.fh-muenchen.de/ml/wbt/01_uebersicht/index.htm http://www.fh-muenchen.de/ml/wbt/02_grundsaetze/s03.htm
- 10 -
Realisierung einer Website für eine Gemeinde
In der Praxis sind kleinere, getrennte Informationen funktioneller und leichter anzusteuern, als große, unstrukturierte Informationsanhäufungen. Da nur wenige Web-Benutzer lange Textpassagen am Bildschirm lesen, werden umfassendere Dokumente aufgeteilt, gekürzt oder zum Download bzw. Ausdruck angeboten.
Eine übertriebene oder unlogische Unterteilung der Informationen erschwert den Überblick ihrerseits, indem sie unmittelbar zusammengehörende Informationen voneinander trennt.
Ein Betrachter einer Website versucht sich von Anfang an unbewusst ein gedankliches Modell der Site-Struktur vorzustellen und so gewissermaßen zu erraten, wie er zu den gewünschten Information gelangt (intuitive Vorgehensweise). Eine logische Site-Struktur ermöglicht dem Benutzer ein solches Vorgehen. Durch eine unlogische, oder nicht erkennbare Struktur wird der Benutzer wahrscheinlich frustriert und die Website bald wieder ve rlassen.
Es gibt keine festen Richtwerte für eine optimale Textmenge und Struktur. Eine geeignete Unterteilung orientiert sich am jeweiligen Inhalt, der oft von sich aus eine bestimmte Gliederung anbietet.
3.4 Aufbau und Kategorisierung Gemeindehomepage 3.4.1 Tabellenstruktur Im Hintergrund der von mir erstellten Website läuft auf dem Server des Internet-Providers eine MySQL-Datenbank (MYSQL = Structured Query Language), die zum Teil mit kleinen Administrationstools und dem Programm PHPMyAdmin administriert wird. Diese Datenbank besteht (derzeit) aus insgesamt 16 Tabellen. Im folgenden werden die einzelnen Tabellen der Datenbank näher beschrieben.
o Tabelle: counter Die Tabelle counter wird ausschließlich für das Besucherzählverfahren verwendet. Der sg. Klick-Counter gibt die Anzahl aller Gäste aus, welche die Website jemals besucht haben. - 11 -
Realisierung einer Website für eine Gemeinde
Der so genannte Online-Counter gibt nur die Anzahl der Gäste aus, die sich gerade auf der Website befinden. •
ip
– Hier wird die IP-Adresse des Besuchers abgelegt. Datentyp: Zeichenkette;
maximale Zeichenanzahl: 25 •
time –
Hier wird der Zeitpunkt des Besuches hinterlegt. Die Zeit wird mit time()
ermittelt. Diese PHP-Funktion ermittelt die Anzahl der Sekunden seit Beginn der UnixEpoche (01.01.1970 um 00:00:00 Uhr). Datentyp: Zahl •
date
7
– Das Datum wird automatisch im Format TT.MM.JJJJ gesichert. Datentyp:
Zeichenkette; maximale Zeichenanzahl: 10 •
location
– In diesem Feld wird der letzte Standort des Besuches hinterlegt. Datentyp:
Zeichenkette; maximale Zeichenanzahl: 40
o Tabelle: voting_frage Im Fall der Website für die Gemeinde Ruden besteht die Tabellenstruktur der Umfrage, oder auch Voting genannt, aus zwei Tabellen, in welchen die Frage und das Ergebnis separat von einander gespeichert sind. Die Struktur der Abstimmung erlaubt dem Administrator gleich mehrere Votings gleichzeitig zu hinterlegen. Die Tabelle „voting_frage“ hinterlegt die Frage und Antwortmöglichkeiten der Umfrage. •
vid
•
frage
•
antwort 1-6
•
respawn
– Eindeutige Identifizierungsnummer für eine Umfrage. Datentyp: Zahl – Frage des Votings. Datentyp: Text – Es gibt insgesamt sechs Antwortfelder. Datentyp: Text
– Gibt die Dauer der Wiederholungssperre an, damit ein Besucher nicht zu
oft hintereinander abstimmen kann.. Datentyp: Zahl
7
http://www.selfphp.info/funktionsreferenz/datums_und_zeit_funktionen/time.php
- 12 -
Realisierung einer Website für eine Gemeinde
o Tabelle: voting_ergebnis Hier werden alle Stimmen des Votings abgespeichert. •
vid
– Verbindet eine Stimme mit der dazugehörigen Frage. Datentyp: Zahl
•
ip –
IP-Adresse des Benutzers. Datentyp: Zeichenkette; maximale Zeichenanzahl: 25
•
time
•
antwort
– Zeitpunkt der Stimmenabgabe. Datentyp: Zahl – Die abgegebene Antwort des Users wird hier gesichert. Datentyp: Zahl
o Tabelle: galery_rubrik Ein weiterer wichtiger Bestandteil der von mir erstellten Website ist die Bildergalerie. Sie besteht aus zwei Tabellen, in welchen die Rubriken und die Bilder separat gespeichert sind. Die Tabelle „galery_rubrik“ hinterlegt ausschließlich die Rubriken der Bildergalerie. •
rubrik_nr
gleichzeitig
– Eindeutige Identifizierungsnummer für eine Rubrik - ist auch der
auto_increment
•
rubrik –
•
date
Primärschlüssel.
Die
Rubriknummer
wird
automatisch
mit
erzeugt. Datentyp: Zahl
Name der Rubrik. Datentyp: Text
– Hier wird das Datum automatisch im Format TT.MM.JJJJ hinterlegt. Datentyp:
Zeichenkette; maximale Zeichenanzahl: 10
o Tabelle: galery_bilder Diese Tabelle speichert alle zur Zeit vorhandenen Bilder. •
bid –
•
source
Eindeutige Identifizierungsnummer für ein Bild. Datentyp: Zahl – Hier ist der Dateiname des Bildes hinterlegt. Datentyp: Zeichenkette;
maximale Zeichenanzahl: 50 •
text
– Zu jedem Bild kann eine kurze Beschreibung hinzugefügt werden, die in diesem
Feld gesichert wird. Datentyp: Text •
rubrik_nr
– Verbindet die einzelnen Bilder mit den dazugehörigen Rubriken.
Datentyp: Zahl
- 13 -
Realisierung einer Website für eine Gemeinde
o Tabelle: news Hinter dem Newssystem der Website steht folgende Tabellenstruktur. •
nid –
•
titel –
Gibt den Titel des Beitrags an. Datentyp: Text
•
grob
– Grobe Beschreibung des Beitrags; erscheint auf der Startseite, wenn der
Identifikationsnummer für den Beitrag. Datentyp: Zahl
Beitrag noch aktuell ist. Datentyp: Text •
detail
•
datum
– Detaillierter Bericht. Datentyp: Text –
Erstelldatum
des
Beitrags.
Datentyp:
Zeichenkette;
maximale
Zeichenanzahl: 10 •
zeit
– Erstellzeit im Format HH.MM. Datentyp: Zeichenkette; maximale
Zeichenanzahl: 5 •
autor –
•
rubrik_nr
Autor des Beitrags. Datentyp: Zeichenkette; maximale Zeichenanzahl: 40 – Verbindet den Beitrag mit einer Rubrik aus der Bildergalerie. Datentyp:
Zahl •
bild
– Wenn vorhanden, wird ein Bild neben der groben Beschreibung auf der
Titelseite angezeigt. Datentyp: Zeichenkette; maximale Zeichenanzahl: 50
o Tabelle: t_ kommentare Hier werden alle Kommentare des Newsarchivsystems (siehe Seite 22) hinterlegt. •
id –
•
autor –
•
text
Eindeutige Identifizierungsnummer für einen Kommentar. Datentyp: Zahl Autor des Beitrags. Datentyp: Zeichenkette; maximale Zeichenanzahl: 50
– Inhalt des Kommentars. Datentyp: Text
o Tabelle: gemeinderat In dieser Tabelle sind die Daten des Gemeinderates gespeichert. •
gebiet
•
amt
•
name
– Gibt den Bereich an, in dem ein Gemeinderat tätig ist. Datentyp: Text
– Amt des Gemeinderates (z. B.: Vorsitzender, Obfrau usw.). Datentyp: Text – Name des Gemeinderates. Datentyp: Text - 14 -
Realisierung einer Website für eine Gemeinde
•
partei –
Parteizugehörigkeit des Gemeinderates. Datentyp: Text
o Tabelle: vereine Die Tabellen „vereine“, „wirtschaft“ und „tourismus_zimmer“ sind vom Aufbau her fast identisch. Die Tabelle „vereine“ beinhaltet alle Informationen zu den Vereinen der Gemeinde. •
id –
•
verein
•
ansprechpartner
Eindeutige Identifizierungsnummer für einen Verein. Datentyp: Zahl – Name des Vereins. Datentyp: Text – Ansprechpartner bzw. Kontaktperson des Vereins. Datentyp:
Text •
adresse
•
telefon –
•
email
•
homepage
•
beschreibung
•
bild
– Adresse des Ansprechpartners. Datentyp: Text Telefonnummer; evtl. auch Faxnummer der Kontaktperson. Datentyp: Text
– Email- Adresse, falls vorhanden. Datentyp: Text – Internetadresse, falls vorhanden. Datentyp: Text – Hier kann sich der Verein kurz präsentieren. Datentyp: Text
– Dateiname eines Bildes des Vereins, falls vorhanden. Datentyp: Text
o Tabelle: wirtschaft Die Tabelle „wirtschaft“ unterscheidet sich durch die obere nur durch das Feld „verein“, dass durch „betrieb“ ersetzt wurde. •
betrieb –
Name des Betriebes. Datentyp: Text
o Tabelle: tourismus_zimmer Diese Tabelle hat neben dem (wie oben) veränderten Feld, noch ein zusätzliches erhalten. •
name
•
vermieter –
– Name des Zimmervermieters. Datentyp: Text Vermieter bzw. Anbieter der Zimmervermietung. Datentyp: Text
- 15 -
Realisierung einer Website für eine Gemeinde
o Tabelle: guestbook Die Daten des Gästebuchs werden in dieser Tabelle gesichert. •
id –
•
autor –
•
text
•
datum
•
zeit
Eindeutige Identifizierungsnummer für einen Gästebucheintrages. Datentyp: Zahl Verfasser der Nachricht. Datentyp: Zeichenkette; maximale Zeichenanzahl: 25
– Inhalt der Nachricht. Datentyp: Text – Erstelldatum. Datentyp: Zeichenkette; maximale Zeichenanzahl: 10
–
Erstellzeit
im
Format
HH.MM.
Datentyp:
Zeichenkette;
maximale
Zeichenanzahl: 5 •
email
– Email- Adresse des Verfassers, falls vorhanden. Datentyp: Zeichenkette;
maximale Zeichenanzahl: 50 •
hp –
•
titel –
Internetadresse, falls vorhanden: Zeichenkette; maximale Zeichenanzahl: 50 Titel des Beitrags. Datentyp: Zeichenkette; maximale Zeichenanzahl: 50
o Tabelle: forum Die Tabelle „forum“ beinhaltet alle von den Usern des Forums verfassten Beiträge und hat folgende Struktur: •
thread
– Ist der Faden (thread), nachdem sich die Themen orientieren.
Datentyp: Zahl •
Inthread -
Dient zur Strukturierung der Nachrichten,, falls mehrere Beiträge zu einem
Thema vorhanden sind. Datentyp: Zahl •
titel
– Hier wird der Titel einer Nachricht definiert. Datentyp: Zeichenkette; maximale
Zeichenanzahl: 255 •
nachricht-
•
autor -
Hier wird die Nachricht gespeichert. Datentyp: Text
In diesem Feld wird der Autor eines Beitrags vermerkt. Datentyp:
Zeichenkette; maximale Zeichenanzahl: 255 •
email –
Optionales Feld für die E-Mailadresse des Autors. Datentyp: Zeichenkette;
maximale Zeichenanzahl: 255 •
link –
Optionales Feld zur Angabe eines Links zu einer beliebigen Website. Datentyp:
Zeichenkette; maximale Zeichenanzahl: 255
- 16 -
Realisierung einer Website für eine Gemeinde
•
datum–
Hier wird automatisch das Datum und die Uhrzeit im Format TT.MM.JJJJ
HH:MM eingetragen. Datentyp: Zeichenkette; maximale Zeichenanzahl: 16 •
views –
In diesem Feld werden automatisch die Anzahl der Besuche mitprotokolliert.
Datentyp: Zahl •
benachrichtigung –
Falls der Benutzer per E-Mail benachrichtigt werden will, ob es
eine neue Nachricht zu seinem The ma gibt, wird hier der Wert „1“ eingetragen; ansonsten „0“. Datentyp: Zahl •
kuerzel –
Jedes Themengebiet hat ein Kürzel bestehend aus zwei Zeichen zur
eindeutigen Identifizierung. Datentyp Zeichenkette; maximale Zeichenanzahl: 2 •
id –
Zur eindeutigen Identifizierung eines jeden Datensatzes. Dieses Feld wird
automatisch generiert. Datentyp: Zahl
o Tabelle: forum2 Die Tabelle „forum2“ ist für die Strukturierung der Themengebiete verantwortlich und hat folgende Tabellenstruktur: •
kategorie –
Ist die oberste Strukturierungsebene. Datentyp: Zeichenkette; maximale
Zeichenanzahl: 255 •
name
–
Name
der
Themengruppe.
Datentyp:
Zeichenkette;
maximale
Zeichenanzahl: 255 •
kuerzel –
Dieses Feld steht in Verbindung mit dem Feld kuerzel in der Tabelle
„forum“. Datentyp Zeichenkette; maximale Zeichenanzahl: 2 •
beschreibung –
Kurze Beschreibung der Themengruppe. Datentyp: Zeichenkette;
maximale Zeichenanzahl: 255 •
reihenfolge –
Mit diesem Feld lassen sich die Themengebiete bzw. Kategorien
beliebig anordnen.
3.4.2 Kategorisierung der Inhalte Die Einteilung der Inhalte in verschiedene Kategorien ist, wie oben schon erklärt, wohl einer der wichtigsten Arbeitschritte während der Planung einer Website.
- 17 -
Realisierung einer Website für eine Gemeinde
Leider war ich bei der Kategorisierung und vor allem bei der Strukturierung der Website völlig auf mich allein gestellt. Das liegt hauptsächlich an der mangelnden Kommunikation zwischen mir und meiner Kontaktperson. Ich habe die Kategorien folgendermaßen eingeteilt:
o Aktuelles bzw. Neuigkeiten o Vorstellung des Tourismus o Vorstellung der Wirtschaft o Veranstaltungskalender o Vorstellung der verschiedenen Vereine o Bildergalerie o Bereitstellung der Termine und Serviceleistungen der Gemeinde o Präsentation des Gemeinderates o Diskussionsforum o Gästebuch
3.4.3 Beschreibung der Menüpunkte Hier werden nun die drei wohl interessantesten Menüpunkte näher beschrieben:
o Aktuelles bzw. Neuigkeiten Dieser Abschnitt der Website ist bekannten Newsarchivsytemen ähnlich. Bei der Programmierung wurde auf größte Benutzerfreundlichkeit geachtet, sodass sich auch „ungeübte“ Besucher der Website gut zurechtfinden können.
Der Bereich lässt sich in drei Teile spalten, nämlich in: •
das eigentlichen Newsarchiv,
•
di Detaildarstellung des Beitrags und
•
den Kommentarbereich
- 18 -
Realisierung einer Website für eine Gemeinde
Das Newsarchiv: Das Newsarchiv bietet dem Benutzer die Möglichkeit, auch Informationen über ältere Beiträge (zum Beispiel über wichtige Ereignisse wie Feste, oder Eröffnungsfeiern und dergleichen) nachzulesen. Die Beiträge werden einfach chronologisch sortiert und nacheinander aufgelistet. (siehe Bild unten)
Außerdem besteht die Möglichkeit, nach bestimmten Beiträgen, unter Berücksichtigung bestimmter Suchkriterien (wie Text, Titel, Autor, Datum), zu suchen.
Für eine optimale Übersicht im Archiv sorgt zum einen eine Auswahl der Nachr ichten, die auf einer Seite angezeigt werden (Wahl zwischen 5 bis 25 Beiträgen pro Seite – auch alle Beiträge können auf einer Seite dargestellt werden).
Eine Seitenauswahl ermöglicht dem Benutzer einfaches Navigieren zwischen den verschiedenen Seiten. Die zur Zeit besuchte Seite wird dabei hervorgehoben.
Die Detailansicht: Die Detailansicht eines Beitrages bietet dem Besucher die Möglichkeit nähere Informationen (wie z.B.: Erstelldatum, Autor, längerer Bericht) zum ausgewählten Beitrag zu erfahren.
Für den Autor des Beitrages besteht außerdem die Möglichkeit, auf eine beliebige Rubrik in der Bildergalerie zu verweisen. - 19 -
Realisierung einer Website für eine Gemeinde
Der Kommentarbereich: Die Erstellung eines Kommentars ist eine weitere Funktion des Newsarchivsystems. Durch Klick auf das Bild „Kommentar“ wird der Benutzer auf das Eintragsformular verlinkt.
Auch beim Verfassen von Kommentaren steht die Benutzerfreundlichkeit im Vordergrund. Es sind keine technischen Spielereien vorhanden, die einen Benutzer möglicherweise verwirren könnten.
- 20 -
Realisierung einer Website für eine Gemeinde
Nachdem der Nutzer den Button betätigt hat, wird das Formular überprüft und die Daten abgeschickt. Die Person bekommt umgehend eine Bestätigung, dass die Daten angekommen sind und wird zurück zum Beitrag verlinkt.
o Tourismus, Wirtschaft und Vereine Diese drei Abschnitte sind vom Aufbau und der Struktur identisch. Sie unterscheiden sich eigentlich nur durch ihren Inhalt. Der Aufbau dieser Abschnitte wird an Hand der Vereine näher erklärt. Dieser lässt sich nun zweiteilen: •
Auflistung aller Vereine und
•
Kurze Präsentation des ausgewählten Vereines
Die Auflistung: Hier werden alle Vereine aufgelistet. Ein Pfeil signalisiert den Link zu dem entsprechenden Verein. (In diesem Fall die Freiwillige Feuerwehr)
Die Präsentation des Vereins: In diesem
Bereich wird der ausgewählte Verein kurz vorgestellt. Die Vereine (sowie
Gasthäuser für den Tourismus und Betriebe für die Wirtschaft) hatten die Möglichkeit, den Inhalt selbst zu kreieren. Die Kurzpräsentation enthält: •
Den Ansprechpartner
•
Adresse - 21 -
Realisierung einer Website für eine Gemeinde
•
Telefon/Fax
•
E-Mail-Adresse (falls vorhanden)
•
Homepage (falls vorhanden)
•
Bild (falls vorhanden)
o Diskussionsforum Um ein gewisses Maß an Professionalität auszustrahlen, ist es von großer Wichtigkeit, dem Besucher die Möglichkeit zu bieten, sich auch aktiv ins Geschehen auf der Website einbringen zu können. Ein Forum ist dabei eine willkommene Möglichkeit, die Attraktivität einer Website zu steigern.
Das Diskussionsforum ist der einzige Teil meiner Website, der nicht von mir persönlich stammt. Ich habe es von einem Absolventen des Gymnasiums übernommen und auf meine Bedürfnisse „zugeschneidert“.
Wenn man einige Foren im Internet betrachtet, wird man schnell bemerken, dass die meisten recht kompliziert sind, da sie mit zu vielen Funktionen ausgestattet sind. Dieses Forum verfolgt ein eigenes Konzept:8
8
Vgl. Bernhard HOISL Internet-Portale in Theorie und Praxis
- 22 -
Realisierung einer Website für eine Gemeinde
o Den Benutzern soll die Möglichkeit geboten werden, schnell und unkompliziert neue Beiträge zu erstellen, oder auf andere, schon bestehende Nachrichten zu antworten, die in bestimmt kategorisierten Themenbereiche gegliedert sind. o Zur besseren Strukturierung der Einträge wird eine Baumstruktur verwendet, welche nach Titel, Autor, Views und dem Datum sortiert werden kann. o Am Anfang soll jedem Themengebiet eine kurze Beschreibung zugeteilt werden. o Die Anzahl der Nachrichten, die Frequentierung der Beiträge, sowie das Datum und der Autor des letzten Beitrags sollen ersichtlich sein. o Falls eine neue Antwort, auf eine von mir erstellte Nachricht zu einem interessanten Thema veröffentlicht wird, soll ich mit einer automatisch abgesendeten E-Mail davon in Kenntnis gesetzt werden. Voraussetzung ist, dass der Verfasser des Beitrags eine gültige E-Mailadresse angibt. o Eine Volltextsuche durch alle bzw. nur durch ausgewählte Themengebiete soll möglich sein. o Die gesamte Struktur der Datenbank soll nur aus zwei Tabellen bestehen. o Das Forum soll einmal programmiert, überall einsetzbar sein. Das Forum besteht aus den Tabellen forum und forum2 (Tabellenstruktur siehe Seite 18 und 19).
3.5 Der „Anschluss“ ans Netz Damit man eine Website auch im Internet bewundern kann, muss sie zunächst einmal publiziert werden.
Einer der lobenswerten Punkte bei meinem Projekt war die Zusammenarbeit mit dem Anbieter des Webspace, der schon zu Beginn meiner Arbeiten fest stand. Wichtig war, dass es neben genügend Speicherkapazität auch PHP und MySQL Unterstützung gab.
Erfreulich war der gute Support des Webspace-Anbieters. Bei Fragen bekam ich unverzüglich eine Antwort. Dieser hinterließ bei mir einen sehr professionellen Eindruck. - 23 -
Realisierung einer Website für eine Gemeinde
Auf der Abbildung unten sieht man die vom Webspace-Anbieter bereitgestellte Administrationsoberfläche der Website:
Die endgültige Publizierung der Gemeindehomepage erfolgte jedoch erst am 14.2.2004. Dieser späte Termin hat vor allem den Grund, dass die Inhalte erst auf den allerletzten Drücker (oder manche auch gar nicht!) bei mir eintrafen.
- 24 -
Realisierung einer Website für eine Gemeinde
3.6 Das Erscheinungsbild (Bildschirmfoto)
- 25 -
Exemplarische interaktive Webdesign-Techniken
4 Exemplarische interaktive Webdesign-Techniken 4.1 Die Do´s and Don’t´s des Webdesigns Wer sich schon einmal im Entwerfen von Websites versucht hat, wird schnell auf einige mitunter recht schwierig zu beantwortende designtechnische Fragen stoßen. Wie breit darf die Seite sein? Wo platziere ich mein Logo? Das sind nur einige wenige Probleme, die es bereits bei der Realisierung der Startseite zu lösen gilt. Hier gibt es nun einige Empfehlungen und Vorschläge zu diesen Problemen. 9
Homepage-Problem
Empfehlung Höchstens 10 sec., bei 50Kb/s wären das max.
Download-Zeit?
50kB. Optimiert für 770 px, flexibles Layout, das
Seitenbreite?
mit jeder Größe bis 1024 umgehen kann. Seitenlänge?
Am besten 2 bis 3 Bildschirmlängen.
Logo-Platzierung?
Oben links.
Automatisch startende Musik?
Nein.
Anmeldung?
Bei Anbieten von geschütztem Content.
Frames?
Keine. Muss
Datenschutz?
erklärt
werden,
wenn
die
Site
Besucherdaten
sammelt.
Link
von
der
Homepage aus darf nie fehlen. Über die Firma?
Sollte nicht fehlen.
Über-Link?
Sollte über ““ heißen.
Site-Map-Link?
Sollte “Sitemap” heißen.
Grafiken/Illustrationen?
Rund 5-15% der Homepage-Fläche.
Linkfarben, verschieden für besucht und
Ja. Unbesuchte Links sollten in möglichst
unbesucht?
satter Farbe dargestellt werden.
Werbung?
Höchstens 2 bis 3 Anzeigen.
Links unterstreichen?
Ja, außer vielleicht in Navigationsleisten.
9
Vgl. http://www.gym1.at/informatik/arge/21102002/
- 26 -
Exemplarische interaktive Webdesign-Techniken
4.2 Online Formulare Die wohl wichtigsten Werkzeuge zur interaktiven Aufbereitung einer Homepage sind die sogenannten Online Formulare. Für die Eingabe von Daten seitens des Benutzers bzw. des Besuchers einer Website sind sie praktisch unersetzbar.
Ein Formular wird in HTML nach einem vorgegebenen Schema erstellt. Nach dem Abschicken der eingegebenen Daten erfolgt sogleich: 10 o ein Versand einer E-Mail an eine bestimmte Empfänger-E-Mail-Adresse, oder o ein Versand per Email gesteuert über ein CGI oder PHP-Script. In der Regel erfolgt dann auch eine Weiterverarbeitung der Daten.
Bei der Verwendung von Formularen ist es wichtig die eingegebenen Daten zu überprüfen. Wie zum Beispiel: o Wurden alle Felder ausgefüllt? o Sind in einem String nur Buchstaben enthalten? o Ist eine Zahl 4-stellig? o Ist eine eingegebene Zahl kleiner als 100?
Solche Überprüfungen können mit: o Javascript (clientseitig), oder mit o PHP oder Perl (serverseitig) durchgeführt werden.
Um all die zur Verfügung stehenden Eingabeobjekte richtig verwenden zu können, muss zuerst ein Formular erstellt werden:11 ...Formular-Inhalt...
Erklärung: Der Tag kennzeichnet einen Bereich als Formular. Der Tag schließt diesen Bereich wieder. 10 11
Vgl. http://www.on-mouseover.de/formular/einleitung.html Vgl. http://www.on-mouseover.de/formular/formularalleelemente.html
- 27 -
Exemplarische interaktive Webdesign-Techniken
Attribut name
Erklärung Bezeichnet den Namen des Formulars.
action
Befiehlt dem Formular, was zu tun ist, wenn die vom Benutzer eingegebenen Daten abgeschickt werden.
method
Damit bestimmt man die HTTP-Übertragungsmethode. Man hat hierbei die Wahl zwischen post und get.
enctype
Konvertierung deutscher Umlaute und Sonderzeichen
Da nun das „Grundgerüst“ des Formulars steht, kann man es mit den verschiedenen Eingabefeldern versehen. Hier werden nun die wichtigsten näher erklärt:
o Einzeiliges Textfeld (INPUT/TEXT):
Erklärung: Ein Eingabefeld wird im Allgemeinen mit dem Tag eingeleitet.
Attribut type
Erklärung Gibt die Art der Eingabe an. In diesem Fall ein Textfeld.
name
Bezeichnet den Namen des Textfeldes.
value
Gibt eine mögliche Textvorbelegung an.
size maxlength
Bestimmt die sichtbare Anzeigenlänge des Eingabefeldes. Begrenzt die maximale Anzahl der Zeichen auf einen bestimmten Wert. In diesem Fall kann man höchstens 50 Zeichen eingeben.
o Mehrzeiliges Textfeld (TEXTAREA): Hallo!!
Erklärung: Das mehrzeilige Textfeld wird im Gegensatz zum einzeiligen mit eingeleitet. Außerdem muss der Textarea-Tag wieder mit geschlossen werden.
- 28 -
Exemplarische interaktive Webdesign-Techniken
Ein weiterer Unterschied besteht darin, dass man Textvorbelegungen nur zwischen den beiden Bereichsmarken vornehmen kann.
Attribut
Erklärung Bezeichnet den Namen des Textareas.
name cols
Sichtbare Anzeigengröße der Breite in Spalten (nach rechts).
rows
Sichtbare Anzeigengröße der Höhe in Reihen (nach unten).
o Auswahl-Listenfeld (SELECT/OPTION): Auswahlmöglichkeit 1 Auswahlmöglichkeit 2 Auswahlmöglichkeit 3
Erklärung: Das Listenfeld wird ähnlich dem mehrzeiligen Textfeld mit eingeleitet und mit
geschlossen. Die verschiedenen Auswahlmöglichkeiten werden mit
und erstellt.
Attribut name selected
Erklärung Bezeichnet den Namen des Listenfeldes. Die Option mit dem Attribut selected wird im Listenfeld beim Aufrufen der Seite angezeigt.
value
Gibt den Wert der Auswahlmöglichkeit an.
o Checkbox (INPUT/CHECKBOX):
Erklärung: Die sg. Checkbox ist ein quadratisches Eingabewerkzeug, dass auch eine Auswahl mehrerer Boxen zulässt.
- 29 -
Exemplarische interaktive Webdesign-Techniken
Attribut Name
Erklärung Bezeichnet den Namen der Textbox.
Value
Bestimmt den zu übertragenen Wert. In diesem Fall wird ein Frage mit ja beantwortet.
Checked
Beim Aufrufen der Seite ist die Checkbox automatisch angehakt.
o Radiobutton (INPUT/RADIO):
Erklärung: Der runde Radiobutton lässt im Gegensatz zur Checkbox nur eine einfache Auswahl zu.
Attribut name
Erklärung Bezeichnet den Namen des Radiobuttons.
value
Gibt den zu übertragenen Wert an. In diesem Fall wird ein Frage mit nein beantwortet.
checked
Beim Aufrufen der Seite ist der Radiobutton automatisch aktiviert.
o Felder für Datei-Upload (INPUT/FILE):
Erklärung: Dieses Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit Hilfe eines CGI-Script hoch zu laden (Upload).
Attribut name accept
Erklärung Bezeichnet den Name n des Formularelements. Es wird nur der Dateityp akzeptiert, der mit accept definiert wurde. Durch das Wildcardzeichen (*) werden auch Subtypen erlaubt.
- 30 -
Exemplarische interaktive Webdesign-Techniken
o Submit-Button (INPUT/SUBMIT):
Erklärung: Bei Betätigung des Submit- Buttons wird die Aktion, welche unter definiert wurde.
Attribut value
Erklärung Sichtbare Beschriftung des Submit- Buttons.
o Reset-Button (INPUT/RESET):
Erklärung: Der Reset-Button löscht bzw. leert alle Eingaben.
Attribut value
Erklärung Sichtbare Beschriftung des Reset-Buttons.
4.3 Professionelle Gestaltung durch CSS CSS (Cascading Stylesheets) ist eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine mächtige Sprache zur Definition von Formateigenschaften einzelner HTMLElemente. 12
Mit Stylesheets kann man beinahe jedes HTML-Element verändern: Egal ob Textabsätze, Listen, Tabellenzellen oder Formulare. Selbst der Cursor und die Scrollbar sind veränderbar.
12
Vgl. http://teamone.selfhtml.de/css/intro.htm
- 31 -
Exemplarische interaktive Webdesign-Techniken
Eine der wichtigsten Eigenschaften von CSS ist die Möglichkeit, zentrale Formate zu fest zu legen. Durch das einmalige Definieren spart man zum einen enorm viel Codierarbeit, zum anderen bleibt die HTML dadurch klein.
Es besteht sogar die Möglichkeit Stylesheet-Definitionen in separaten Dateien zu notieren, um sie später in beliebig vielen HTML-Dateien verwenden zu können. So kann man dann mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei das Aussehen hunderter von HTML-Dateien verändern. Es gibt verschiedene Möglichkeiten, Stylesheets in HTML einzubauen: 13
o Formate zentral für eine HTML-Datei definieren:
Erklärung: Mit notiert man einen Bereich für Stylesheet-Formatdefinitionen (style = Stil, Format). Im einleitenden -Tag muss man den Mime-Type der StylesheetSprache angeben. Für CSS ist das die Angabe type="text/css". Zwischen dem einführenden Tag und dem abschließenden kann man dann zentrale CSS-Formate definieren. Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des styleElements nicht irrtümlich als anzuzeige nden Text interpretieren, kann man den Inhalt in einen einen HTML-Kommentar () einbinden.
o Formate einer separaten CSS-Datei einbinden: 13
Vgl. http://teamone.selfhtml.de/css/formate/einbinden.htm
- 32 -
Exemplarische interaktive Webdesign-Techniken
Erklärung: Im Dateikopf einer HTML-Datei kann man mit eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält (link = Verweis). Innerhalb des Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = Mime-Typ). Beim Attrib ut href= gibt man die gewünschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, muss man an dieser Stelle Pfadangaben oder eine absolute URL (Universal Re source Identifier ) notieren.
o Formate innerhalb eines HTML-Elements definieren: ...
Erklärung: Mit dem Universalattribut style= im einleitenden Tag eines Elements kann man CSSFormate für dieses eine Element notieren. Die Erstellung von Stylesheets ist recht simpel: 14 H1 { color:red }
Ein Formatierungsbefehl besteht aus zwei Teilen, dem Selektor (in diesem Fall H1) und der Deklaration (color: red). Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft color und
dem Wert red. Daraus ergibt sich dann folgende Syntax:
SELEKTOR { Eigenschaft: Wert }
14
Vgl. http://www.bjoernsworld.de/css/grundlagen.html
- 33 -
Exemplarische interaktive Webdesign-Techniken
Der Selektor H1 ist die Verbindung zwischen HTML und dem Stylesheet, und alle gültigen HTML Elemente sind mögliche Selektoren. Die Eigenschaft color ist nur eine von zahllosen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann.
4.4 Dynamik ins Web durch Javascript JavaScript ist eine eigene Programmiersprache, die eigens zu dem Zweck geschaffen wurde, um HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.
15
JavaScript läuft in einer so genannten "Sandbox", eine Art Sicherheitskäfig, in dem die Programmiersprache „eingesperrt“ ist. Sie wird dabei um typische Möglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Möglichkeit, beliebig Daten aus Dateien lesen und in Dateien schreiben zu können. So soll verhindert werden, dass JavaScript-Programmierer auf den Rechnern von Anwendern, die eine JavaScript-unterstützte Web-Seite aufrufen, Unfug treiben können.
JavaScript besteht aus einer kontrollierten Anordnung von Anweisungen, die der JavaScriptInterpreter des WWW-Browsers bewertet und auf dem Rechner des Anwenders ausführt. Jede Anweisung besteht aus einem Befehl, der mit einem Strichpunkt oder einem Zeilenumbruch abgeschlossen wird 16
JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne WebBrowser entsprechende Interpreter-Software.
15 16
Vgl. http://selfhtml.teamone.de/javascript/intro.htm Vgl. http://selfhtml.teamone.de/javascript/sprache/regeln.htm
- 34 -
Exemplarische interaktive Webdesign-Techniken
o JavaScript-Bereiche in HTML definieren: Test
Erklärung: Mit wird ein Bereich für JavaScript innerhalb einer HTML-Datei eingeleitet (script = Quelltext, type = Mimetype). Dahinter sollte mit “ und „“ ab. Der JavaScript-Kommentar ist erforderlich, um mögliche Fehlermeldungen zu unterdrücken.
o JavaScript in separaten Dateien: JavaScript- Test
- 35 -
Exemplarische interaktive Webdesign-Techniken
Erklärung: Mit wird eine separate JavaScriptDatei eingebunden. Die Datei wird im -Tag mit src (src = source = Quelle) ausgewählt. Als Wert wird die URI der separaten Datei mit dem Quellcode zugewiesen. Im Beispiel oben wird die Funktion tuwas() aus der Datei javascript.js beim Hochladen der Seite durch den Eventhandler onLoad aufgerufen.
Als
Beispiel
für
eine
Anwendung
von
JavaScript
Formularüberprüfungsfunktion erklären. 17 Formulareingaben-Check 17
Vgl. http://selfhtml.teamone.de/javascript/beispiele/index.htm
- 36 -
möchte
ich
nun
eine
Exemplarische interaktive Webdesign-Techniken
Name: E-Mail:
Formular:
Erklärung: Im Beispiel wird ein gewöhnliches HTML-Formular mit zwei Eingabefeldern, einem ResetButton zum Zurücksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Durch die Anweisung onSubmit="return chkFormular()" im einleitenden -Tag wird, wenn der Anwender das Formular absendet die JavaScript-Funktion chkFormular() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist. Wenn die Funktion fehlerhafte Eingaben findet, gibt sie den Wert false (falsch) zurück, ansonsten den Wert true (wahr). Das Formular wird nur dann abschickt, wenn der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert. Mit einer Abfrage wie if(document.Formular.Name.value == "") wird ermittelt, ob das entsprechende Formularfeld (hier das Feld „Name “) überhaupt einen Inhalt hat. Es wird also geprüft, ob die Zeichenkette leer ist. Mit einer Abfrage wie if(document.Formular.Mail.value.indexOf('@') == -1) wird ermittelt, ob den eingegebenen Daten ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das für E-Mail- Adressen charakteristisch ist).
Bei diesen Abfragen werden jeweils drei Anweisungen ausgeführt, wenn die Eingaben der Prüfung nicht standhalten. Zuerst wird mit alert() jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat.
- 37 -
Exemplarische interaktive Webdesign-Techniken
In der zweiten Anweisung wird mit der focus()- Methode auf das fehlerhafte Formularelement positioniert. Die dritte Anweisung schließlich gibt false zurück, wodurch das Absenden des Formulars verhindert wird.
4.5 Client-Server Beziehung Für das Verständnis des folgenden komplexeren Teils der Homepage ist die Unterscheidung der Computer in sogenannte Clients und Server und deren Kommunikation besonders wichtig. Ein Client-Server-System besteht aus einem Client, der eine Verbindung mit einem zentralen Server aufbaut. 18
Der Client bietet die Benutzeroberfläche, oder die Schnittstelle der Anwendung an, über den der User seine Anfragen (requests) an den Server stellt, und der daraufhin im Normalfall die angeforderten Dokumente an den Client zurücksendet.
Das Verstehen dieses Frage-Antwort-Verhaltens von Client und Server ist auch für einen unbedarften Internetsurfer nicht uninteressant. Im einfachsten Fall gibt er im Internetbrowser eine (gültige) Internetadresse z.B. http://www.ruden.at ein und bekommt auf dem Bildschirm die Homepage zu sehen. Was aber bekommt er da zu sehen? Ein Dokument? Welches Dokument? Ist die Internetadresse das Dokument?
18
http://www.net-lexikon.de/Client-Server-System.html
- 38 -
Exemplarische interaktive Webdesign-Techniken
Diese Fragen sind berechtigt und nicht trivial, da ja in der Internetadresse, auch als URL (Uniform Resource Locator) bezeichnet, (meistens) keine Datei zusätzlich angegeben wird. In unserem Beispiel wird nach dem Aufruf der Adresse http://www.ruden.at vom Webserver – wo immer dieser auch lokalisiert sein möge – die Datei "index.php" in einem speziellen Verzeichnis automatisch gesucht und an den Client gesendet.
Der Grund, warum zusätzlich zur Adresse nicht
das Startdokument, nämlich die das
Dokument index.php eingegeben werden muss, ist folgender: Der Webserver, der die Anforderung des Browsers beantwortet, weiß durch eine entsprechende Konfigurationseinstellung, dass er in dem voreingestellten Wurzelverzeichnis der Homepage (document root) nach Dateien wie index.htm, index.html oder wie in unserem Fall index.php suchen muss.
Die Kommunikation zwischen Client und Server basiert auf dem verbindungsorientierten TCP/IP Protokoll (Transmission Control Protocol/Internet Protocol). Verbindungsorientiert deshalb, weil vor der eigentlichen Internetkommunikation (siehe oben) eine Verbindung mit dem Zugangsprovider (auch: Access Service Provider) bestehen muss.
- 39 -
Exemplarische interaktive Webdesign-Techniken
Ein wesentlicher Bestandteil der Protokollfamilie TCP/IP, die auf dieser Verbindung aufsetzt, ist das Protokoll HTTP (Hypertext Transfer Protokoll), welches als Grundlage des World Wide Web dient.
Wird die Seite index.php angefordert, so werden mit ihr auch alle verlinkten Dateien (z.B. Grafiken) übertragen, was die Bezeichnung H für "Hypertext" in der Protokollbezeichnung rechtfertigt.
4.6 Erstellung eines Votings Eine einfache und schnelle Möglichkeit um Interaktivität (und damit auch ein gewisses Maß an Professionalität) in eine Website zu bringen, ist die Erstellung einer Umfrage. Für die Programmierung des Votings (und auch aller anderen interaktiven Komponenten) der Website der Gemeinde Ruden wählte ich die populäre serverseitige Scriptsprache PHP. Nun wird die Erstellung eines Votings näher beschrieben.
Zunächst muss eine Datenbank mit dem Namen „voting“ angelegt werden. In diese Datenbank werden nun die Tabellen „voting_frage“ und „voting_ergebnis“ eingefügt. (Struktur der beiden Tabellen siehe Seite 14 und 15)
Dann kann man mit der Programmierarbeit der Abstimmung beginnen. Zunächst will ich die einzelnen Bestandteile des Quellcodes grafisch darstellen, wobei PHPCode blau, MySQL-Statements orange und HTML-Code in grün eingefärbt sind.
