Navigation überspringen |

---

| Einstellung der Schriftgröße überspringen

Hauptinhalt:

Technik

Wie sind diese Seiten erstellt worden?

Das Layout von no smoking wurde mit großer Sorgfalt per Hand erstellt. Selbst gesetzte Zielvorgabe war es, ein Design zu entwerfen, dass sich flexibel an Schriftgrößen, Browser und Auflösungen anpasst. Größtmögliche Nutzerfreundlichkeit und Zugänglichkeit sollten gewährleistet werden.

Natürlich baut diese Webpräsenz deshalb auf Vorbilder auf. Es kommen viele Techniken und Scripte zum Einsatz, die ich im nachfolgenden Text nennen möchte:

 Generelles 

Die Gestaltung meiner Seiten basiert nicht auf einem vorgefertigten Template, sondern wurde von mir selbst erdacht und umgesetzt. Grundlage sollte ein tabellenfreies und frameloses Layout mit strikter Trennung von Inhalt und Design sein. Alle Formatierungen werden zu diesem Zweck in externen Stylesheets (CSS) vorgenommen.

Als Auszeichnungssprache wird XHTML verwendet. Um auch dynamisch generierte Inhalte einpflegen zu können, kommt die serverseitig interpretierte Scriptsprache PHP zum Einsatz. Alle Texte werden im Editor ohne Verwendung eines CMS geschrieben.

 Aufbau 

Bei den Grundstrukturen dieser Webpräsenz (Dreispaltiges Layout ohne floatings) habe ich mich von einem Workaround auf mollio.org leiten lassen.

Um eine größtmögliche Flexibilität bezüglich Monitorauflösung und Schriftgröße zu erreichen, wurden in einigen Teilen explizit dehnbare Bereiche geschaffen. Diese Technik entspricht dem Tutorial "runde Ecken", welches ich bei Andreas Kalt gefunden habe.

 Outfit 

Als Inspiration für das Navigationsmenü diente das Layout von ZAB DESIGN. In Bezug auf die Farbgestaltung standen die Seiten der Designer in Action Pate.

 Barrierefreiheit 

Ich habe versucht, möglichst viele Regeln zum Abbau von Barrieren zu beherzigen. Der gezielte Einsatz von Sprungmarken, Navigation in Listenform, gute Kontrate, semantisch aufgebauter Quelltext, Schriftgrößenanpassung und andere Maßnahmen sollen die Lesbarkeit der Inhalte auch für Menschen vereinfachen, die eine Sehbehinderung besitzen oder deren motorische Fähigkeiten eingeschränkt sind.

 Suchfunktion 

Um die Begriffsfindung auf no smoking zu verbessern, wurde eine Suchfunktion integriert. Diese Websitesuche wurde mit dem Script von PlaNet Concept realisiert.

 Schriftgröße 

Es wurden überwiegend relative Schriftgrößen eingesetzt um die Lesbarkeit an die Bedürfnisse der Besucher anpassen zu können. Die gewünschte Schriftgröße kann man auf der jeweiligen Seite selbst wählen. Für diese dynamische Skalierung basiert auf einem Script von Einfach für Alle. Ich habe mich allerdings für eine modifizierte Variante von Dotflare entschieden.

 Bildvergrößerung 

Ein Heranzoomen von Bildern ist mit Hilfe der effektvollen und gleichzeitig schlanken Slimbox umgesetzt worden.

 Kommentare 

Um eine weblogähnliche Funktionalität zu erreichen, sollte die Möglichkeit geboten werden, einzelne Artikel zu kommentieren. Auf der Suche nach einem dementsprechenden Script wurde ich bei "meine kleine Homepage" fündig. Um einen Schutz vor unerwünschten Spameinträgen zu gewährleisten, wurde es um das Pseudo-Captcha von Barbara Ochsenmeier ergänzt.

 Gästebuch 

Das Gästebuch wurde auf dem Script von Obsession-Design aufgebaut. Die Anpassung der Templates an das Design der Seiten, Erweiterung der Datenbank und Ergänzungen in der Funktionalität wurden durch mich vorgenommen.

 Kontaktformular 

Auf der Suche nach einem einfachen und zugleich spamgeschützten Formular wurde ich bei Ulrich-Markus Fritz fündig.

 Druckfunktion 

Um eine schnelle Druckfunktion zu ermöglichen, die zugleich sparsam mit dem Verbrauchsmaterial umgeht, habe ich dafür ein eigenes Layout entwickelt. Die Funktionalitäten habe ich einer Anleitung von A List Apart entnommen.

 Counter 

Zur besseren Auswertung von Besucherstatistiken habe ich den chCounter eingebaut. Er läuft unsichtbar im Hintergrund.

 RSS-Feed 

Damit meine Besucher sich ständig über neue Artikel auf dem Laufenden halten können, wird ein Newsfeed angeboten. Ich pflege diesen Feed per Hand im Editor ein. Als Vorlage für einen sinnvollen Aufbau diente mir die XML-Datei von Gabi.

Ich möchte mich an dieser Stelle bei allen Vorbildern, Tutorialautoren und Programmierern für ihr Webschaffen bedanken und ihnen gleichzeitig meine Hochachtung aussprechen.

Nobody is perfect... und ich bin es erst recht nicht! Sollten ihnen technische Mängel, Darstellungsfehler oder Rechtschreibschwächen auf meinen Seiten auffallen, wäre ich für eine kurze Nachricht sehr dankbar.

---