Praktische Bausteine für die Webentwicklung

Erstellt: 03.02.2009 | Aktualisiert: 11.03.2009

Dieses Snippet ist Teil des Seminars Website (XHTML/CSS) und befasst sich mit praktischen Bausteinen für die Webentwicklung, welche sich sehr einfach und ohne grosses Vorwissen in Sprachen wie Javascript, PHP oder Actionscript voraussetzt.

CSS Styleswitcher

Manchmal möchte man seinen Besuchern die Wahl des passenden ‘Looks’ selber überlassen. Für den Wechsel zwischen einzelnen Stylesheets bieten sich verschiedene Lösungen an. Eine Variante geschieht durch Integration via PHP.

Flash richtig einbinden

Flash-Elemente lassen sich relativ einfach in HMTL-Seiten integrieren. Die beste Variante was Webstandards betrifft ist hierfür eine javascript-basierte Lösung, welche auch die Anzeige in Browsern ohne Flash oder Screenreader entsprechend behandelt.

swfObject

Flash-Player für .flv Filme

Möchte man seine Videos auf dem eigenen Webserver speichern und in einem passenden Player abspielen, so bietet sich folgender  FLV-Player an:

JW FLV Media Player

Youtube-Filme einbinden

Für das Einbinden von Youtube-Filmen wird jeweils auf der Seite ein entsprechender Code nach folgendem Schema angegeben:


<object width="425" height="344" data="http://www.youtube.com/v/u46eaeAfeqw&amp;amp;amp;amp;amp;hl=de&amp;amp;amp;amp;amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/u46eaeAfeqw&amp;amp;amp;amp;amp;hl=de&amp;amp;amp;amp;amp;fs=1" /><param name="allowfullscreen" value="true" /></object>

Youtube Film in einer Lightbox anzeigen? Kein Problem!

Kontakt-Formular

Kontaktformulare sind eine äusserst heikle Sache. Entsprechende Sicherheitsvorkehrungen sind vorzunehmen, damit man nicht mit Spam zugemüllt wird. Es gibt praktische Scripts, die sich direkt in das Webprojekt integrieren lassen.

E-Mail kodieren

Sobald man eine E-Mail Adresse auf einer Website veröffentlicht, wird diese auch von Robotern gefunden und schon bald wird die Mailbox mit Spam zugemüllt. Das muss nicht sein. Entsprechende Werkzeuge erlauben es, die E-Mail Adresse über Javascript zu verschlüsseln, damit sie nur von “richtigen” Besuchern gesehen wird. Es gibt praktische Anwendung, die diesen Code ganz automatisch schreiben – online oder als native Applikation.

http://hivelogic.com/enkoder

Suchfunktion implementieren

Bei einer Seite grösseren Umfangs kann es Sinn machen eine Suchfunktion anzubieten. Hierfür kann man auf die Hilfe grosser Suchdienste wie Google oder Yahoo zählen, welche entsprechende Code-Schnipsel zur Verfügung stellen


<form action="http://www.google.com/search" method="get">
<fieldset>
<input type="hidden" name="sitesearch" value="deinedomain.com" />
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" />
</fieldset>
</form>

Spezielle Typo für Überschriften

Gerne würde man auf Websites spezielle Schriften verwenden. Leider sind die Wahlmöglichkeiten an Systemschriften eher begrenzt. Diesbezüglich wird sich erst mit der vollen Unterstützung durch CSS 3 was ändern. Wobei da noch einige rechtliche Dinge geklärt werden müssen. Wie auch immer, bis dahin bieten sich drei Lösungsvarianten an, mit welchen für Überschriften etc. die gewünschte Schrift verwendet werden kann.

Gallerien, Slideshows und Lightbox

Auf Popup-Fenster wird im modernen Webdesign eigentlich verzichtet. Stattdessen so genannte Lightbox Lösungen verwendet.

Das Original einer einfachen Lightbox-Slideshow:

Auch für die Integration ganzer HTML-Seiten gibt es eine Möglichkeit:

Eventuell spezialisiert auf die Integration verschiedener Medienformate:

Oder reduzierter, ohne Javascript, nur über CSS:

Vielleicht ist aber auch eine Variante mit einem Flash-Player ganz nett:

Weitere nützliche Links zum Thema:

Dynamische Menus

Aus XHTML-Listen einfache, dynamische Menus gestalten:

Und spezifisch für vertikale Menus: