„Semmer-Seite” in neuen Look

Wie alles begann

Von Karlheinz Müller

Vor ziemlich genau 10 Jahren ging am 13.12.2004 die „Semmer-Seite” erstmals unter der eigenen Domain www.die-semmer.de ins Internet. Einige Wochen zuvor waren die ersten Seiten nur über eine private Adresse zu erreichen.

Die „Semmer Seite” ist eigentlich durch die „Aktion Benk” entstanden, um allen Interessierten Fotos von dieser Aktion zeigen zu können. Im gleichen Jahr feierte die Freiwillige Feuerwehr Semd ihr 100-jähriges Bestehen. Bei der Vorbereitung der damit verbunden Fotoausstellung am Jubiläumswochenende bin ich aber auch auf so viel geschichtliches Material unseres Heimatortes gestoßen, dass eine Veröffentlichung wert war. Und so wuchs der Inhalt schon gleich zu Beginn stark an.

Schnell kamen auch aktuelle Inhalte, wie Presseveröffentlichungen, Veranstaltungskalender, Ansprechpartner der Ortsvereine und zahllose Fotos von Veranstaltungen hinzu. So ist die „Semmer-Seite” mittlerweile zu einem wichtigen Informationsmedium für unser Dorf geworden. Rund 32.000-mal wurde die Seite in diesen 10 Jahren aufgerufen. Das sind 9 Besucher täglich.

Die „Semmer-Seite” wurde seit ihres Bestehens aber immer nur als 1-Mann-Betrieb von mir gepflegt und mit neuen Inhalten versehen. An eine generelle Überarbeitung und modernere Gestaltung war wegen des damit verbunden Aufwandes nicht zu denken.

Das änderte sich, als mich im Frühjahr diesen Jahres Bastian Hirschel und Johannes Leicht – beide ehemalige Schüler der Semder Grundschule und Teilnehmer der Computer AGs der Jahre 2006/07 und 2007/08, die ich damals betreute – ansprachen, ob sie sich mit einer Neugestaltung der Semder Internetseite beschäftigen dürften.

In unendlich vielen Stunden und mit sehr viel Geduld haben die Beiden nun eine tolle und moderne neue „Semmer-Seite” mit sehr vielen schönen und praktischen Effekten geschaffen, welche aber auch am besten von den Zweien nachfolgend beschrieben werden.

Karlheinz Müller


„Semmer-Seite” in neuen Look

Von Bastian Hirschel

„Die „Semmer Seite“ bedarf dringend einer Überarbeitung!“, so waren wir uns beide einig und beschlossen recht schnell Kontakt mit Karlheinz herzustellen. Er war sehr erfreut über unser Schreiben und bei einem nachfolgenden Treffen konnten wir ihm unsere Gedanken detailliert näher bringen. Uns schwebte vor die „Semmer Seite“ von Grund auf neuzugestalten, da sie technisch längst nicht mehr auf dem neuesten Stand war. In 10 Jahren tut sich eben sehr viel.

Wir begannen wenige Tage danach mit den ersten Skizzen für die Website und waren auch bald darauf dabei, die Skizzen am PC als Website zu verwirklichen. Der Anfang ist immer der schwerste, nichts klappt auf Anhieb. Aber mit der Zeit wuchs die Seite. Man begann damit, über die Startseite hinaus, mit der wir angefangen haben, Seiten zu gestalten. Die Struktur der alten Seite wollten wir dabei größtenteils beibehalten, denn mit ihr und dem Inhalt der Seiten waren wir so schon sehr zufrieden.

Um im stetigen Austausch zu bleiben und damit keiner an derselben Sache arbeitet, richteten wir eine Dropbox ein, in welcher wir alle Dateien zur „Semmer Seite“ austauschten. Schnell reichte aber die Dropbox allein für unser Vorhaben nicht mehr. Aus technischen Gründen konnten wir einige Seiten nicht lokal hosten, das heißt ausführen/betrachten. Die Domain www.die-semmer.de konnten wir nicht benutzen, denn wir wollten die bestehende Seite nicht für die Dauer der Umstrukturierung vom Netz nehmen. Also richteten wir einen zweiten kostenlosen Webserver ein, auf dem die Seite jederzeit erreichbar ist, sofern man die Domain weiß.

Wir möchten euch jetzt die Funktionen der Seite näher bringen:

Auf jeder unserer Seiten befindet sich oben die Navigationsleiste mit dem Banner und dem Wappen. Johannes, hauptsächlich verantwortlich für die Designelemente, die mit Photoshop individuell entworfen und bearbeitet wurden, gestaltete dieses Navigationselement. Bastian kümmerte sich um die technische Umsetzung der Navigation. Wichtig war uns, dass man jede Seite schnell und einfach finden kann. Die Navigation sollte also gut verständlich und leicht bedienbar sein. Bewegt man die Maus über die Menüelemente der Navigation, wechseln sie ihre Farbe bzw. öffnen ein weiteres Fenster mit Unterpunkten, ein sogenanntes Drop-Down-Menü. Jeden dieser Menüpunkte kann man anklicken und gelangt dadurch auf die entsprechende Seite, wobei immer die aktuelle Seite bzw. die Kategorie, der diese Seite angehört, farblich dunkler abgesetzt ist.

Die gesamte neue Seite verfügt außerdem über eine Suchfunktion (bereitgestellt von Google™ benutzerdefinierte Suche), welche sämtliche Seiten nach Ihrem Suchbegriff durchsucht. So finden Sie Ihre Seite noch schneller! Um die Suche zu benutzen, muss man einfach auf das Lupen-Symbol in der rechten unteren Ecke des Banners klicken und seinen Suchbegriff wie gehabt eingeben.

Gleich unter der Navigationsleiste finden Sie eine Pfadangabe zum aktuellen Pfad. Das erleichtert das navigieren in Unterordnern und sorgt für einen schnellen Zugriff auf die Seiten, die der aktuellen übergeordnet sind.

Für die Startseite war uns wichtig, dass man die meist genutzten Funktionen der „Semmer Seite“ schnell einsehen kann. Das sind unserer Meinung nach aktuelle Pressemitteilungen und Veranstaltungen. Also werden auf der Startseite die fünf neuesten Pressemitteilungen mit einem kleinen Vorschautext angezeigt. Über den Link darunter gelangt man zu einem Archiv aller Pressemitteilungen und Berichte der Seite.
Außerdem befindet sich rechts ein Kasten mit den drei aktuellsten Veranstaltungen, also denen, die als nächstes anstehen oder gerade laufen. Auch hier erreicht man eine Übersicht über alle Veranstaltungen über einen Link direkt darunter.

Auf der Veranstaltungsseite, die Sie hier oder über Dorf-Info > Veranstaltungen finden können, werden alle Veranstaltungen der Semmer Ortsvereine angezeigt. Ein Script erkennt, welche Veranstaltungen schon vorüber sind und markiert diese mit einem roten Strich zu Beginn der Zeile.

Die Dorf-Info Seite hebt sich durch ein vollkommen anderes Layout von den anderen Seiten ab. Den Effekt, den man beim Scrollen beobachten kann, nennt man „Parallax-Effekt“. Hierbei scrollen die Bilder im Hintergrund langsamer als der Rest der Seite. Zusammen mit der Unschärfe der Bilder entsteht so ein sehr schöner Effekt. Von dieser Seite aus kommt man zu vielen Beiträgen, die über unser Dorf informieren.

Auch die Seite, die über unsere Vereine in Semd verweist, erscheint jetzt übersichtlicher und besser bedienbar. Alle Vereine werden tabellarisch mit dem Namen des Vorsitzenden, Adresse und Telefonnummer gelistet. Klickt man auf die Zeile eines Vereines erscheint ein PopUp-Fenster, welches ergänzende Informationen enthält.

Verfügt der Verein oder der Vorsitzende über eine E-Mail Adresse als Kontaktmöglichkeit, wird diese im PopUp-Fenster angezeigt. Noch besser ist jedoch die Funktion „Jetzt kontaktieren“, die über den entsprechenden Link aufrufbar ist. Hier gelangt man zum neuen Kontaktformular, welches zusammen mit der Dorf-Info Seite wohl am meisten Arbeit gekostet hat. Das Kontaktformular ist nämlich flexibel und kann sich an verschiedene Personen bzw. deren Mail-Adressen richten. Kommt man über einen Verein zum Kontaktformular, wird die Nachricht ausschließlich an den Vorsitzenden des Vereins übermittelt und nicht an uns als Webmaster der „Die Semmer“-Seite. Die Seite dient hier lediglich als Vermittlung und stellt eine praktische Lösung zur Kontaktaufnahme dar.
Das normale Kontaktformular ist über den Link im Menü erreichbar. Hier erreichen Sie uns als Webmaster der „Semmer Seite“, um uns Fehler zu melden, Anregungen zu geben oder Kritik auszusprechen.
An wen sich das Kontaktformular richtet sehen Sie immer an der Überschrift sowie dem kleinen Text darunter.

Auch sehr aufwendig: das neue Fotoalbum. Was uns an der alten Seite auch überhaupt nicht gefallen hat, war das bestehende Fotoalbum. Bilder waren sehr klein und schlecht Betracht bar. Das wollten wir auf jeden Fall ändern, also griffen wir auf eine dynamische Lösung mit jQuery und JavaScript zurück. Das Ergebnis sehen Sie auf den Seiten der Fotoalben!

Wir wünschen Ihnen viel Spaß auf den neuen Semmer Seiten!

Bastian Hirschel
Johannes Leicht




Die Semmer Seite wurde für diese Browser optimiert:

Google Chrome Google Chrome Canary Mozilla Firefox Opera
Wir arbeiten momentan an einer mobilen Version der Semmer Seite! Die Seite wird speziell für mobile Endgeräte, wie Smartphones und Tablets entwickelt, um auch von unterwegs ein optimales Surf-Erlebnis bei der Semmer Seite zu garantieren! Sobald sie fertig ist, werden wir Sie an dieser Stelle informieren.
Update: Die Entwicklung der mobilen Seite ist fast abgeschlossen. Wir befinden uns momentan in der Testphase!
Die Semmer Seite ist jetzt noch ganz neu. Sollten Sie Fehler jeglicher Art (Rechtschreibfehler, Formatierungsfehler, Darstellungsfehler, technische Fehlfunktionen) auf unseren Seiten finden, so melden Sie diese doch bitte über das kostenlose Kontaktformular. Helfen Sie mit die Semmer Seite zu verbessern!