DHTML – Dynamic HTML für Ihre lebendige Website

Das D in DHTML steht für dynamisch. Obwohl DHML als Oberbegriff für eine riesige Anzahl Effekte zur Erhöhung der Usability oder Verkaufsförderung steht, ist er bei weitem nicht so geläufig wie das Buzzword AJAX oder HTML5, dem nahezu alle neuen Web-Technologien der vergangenen Jahre zugeschrieben werden. Eine Ursache hierfür könnte sein, dass konkrete Anwendungsfälle wie Slider, Aufklappmenüs oder Modale die häufiger verwendeten Begriffe sind.

Erklärung DHTML

Als DHTML bzw. Dynamic HTML oder auch DOM-Scripting bezeichnet man landläufig die Veränderung einer Website, nachdem sie bereits fertig geladen ist und ohne dass nochmals eine Verbindung zum Server aufgebaut werden würde. Eine exakte, einheitliche Definition des Begriffs DHTML gibt es nicht.

Eine Veränderung der Website nach dem Laden erfordert eine auf der Client-Seite ausgeführte Skriptsprache. Dieser Part wird in der Regel JavaScript überlassen. Da mit AJAX eine Verbindung zum Server hergestellt wird, fällt es also gemäß Definition nicht unter DHTML, wobei der Begriff wie beschrieben nicht eindeutig definiert ist und auch völlig unabhängig davon nichts gegen die Kombination von DHTML und AJAX spricht, wenn dies sinnvoll erscheint.
Nicht nur aufgrund der „schwammigen” Definition ist DHTML ein weites Feld und wird es in der Praxis an so vielen Stellen verwendet, dass man nicht bei jedem onmouseover-Effekt explizit von DHTML sprechen würde. Wir möchten uns deshalb bei den nachfolgend genannten Anwendungsbeispielen für Dynamic HTML auf einige wenige beschränken. Viele weitere ergeben sich bei der Programmierung von PHP-Scripten oder einfachen (X)HTML-Websites „ganz von selbst”.

Eine in Zusammenhang mit HTML5 aufgekommene Alternative für XHR-Pull-Requests sind Websockets. Beispielsweise auf Basis von Node.js und Socket.IO implementiert eignen sich diese für den Versand von Benachrichtigungen seitens des Servers an den Anwender. Chat-Systeme oder (Desktop-)Benachrichtigungen über neue auf dem Server vorliegende Informationen sind beliebte Anwendungsfälle.

Userfreundliche Navigation und Aufklapp-Menüs mit DHTML

Für die sogenannte Usability, d.h. Benutzerfreundlichkeit einer umfangreichen Website sind mit CSS und ggf. JavaScript gestaltete Navigationsleisten nahezu unabdingbar. Der Benutzer möchte mit möglichst wenigen Klicks den gewünschten Inhalt abrufen können. Muss ein Besucher beispielsweise von Ihrer Startseite erst einen Haupt-Menüpunkt, dann einen Unter-Menüpunkt und ggf. sogar einen dritten Link anklicken und nach jedem Klick warten, bis sich die Seite aufgebaut hat, ist der negative Effekt auf die Absprungrate absehbar. Besteht eine Seite wiederum aus zu vielen Links, ist sie wahrscheinlich unübersichtlich und der Besucher findet das gesuchte Thema nicht.

Die einfache Lösung des geschilderten Problems könnte eine aufklappbare Navigationsleiste sein, so wie Sie bei Werbe-Markt.de oben horizontal im Einsatz ist. Sie nimmt wenig Platz weg, ist einfach weil intuitiv zu bedienen und führt im optimalen Fall schnell zum gewünschten Ziel. Aber nicht nur zur Navigation kann ein Aufklapp-Menü die richtige Lösung sein. Versteckter Inhalt, der bei Klick auf eine Überschrift oder einen einleitenden Text mittels JavaScript eingeblendet wird, spart wertvollen Platz auf Ihrer Website. Dennoch ist er für Nutzer sofort abrufbar, die sich für den jeweiligen Content interessieren. Ein Beispiel hierfür sind die mit JavaScript realisierten Aufklapp-Funktionen unter Referenzen.

Slide-Shows mit DHTML

Wenn Sie – wie von Werbe-Markt.de empfohlen, von der Verwendung von Flash-Animationen absehen, stellt DHTML eine sinnvolle Alternative dar. Die sich mit CSS und JavaScript bietenden Möglichkeiten zur Umsetzung stilvoller Slide-Shows sind zu umfangreich, als dass sie sich zur Aufzählung eignen würden. Bilder und Texte einblenden und ausblenden mit „sanftem” Übergang oder automatischem Scrollen nach links, rechts, oben, unten, Farbwechsel automatisiert oder als Reaktion auf eine Bewegung des Mauszeigers, den Klick auf ein Element und vieles mehr.

(News-)Ticker mit DHTML realisieren

Spätestens seitdem das marquee-Element zur Anzeige eines Laufbands oder News-Tickers als „veraltet” eingestuft wurde, ist DHTML die richtige Wahl zur Umsetzung professioneller und stilvoller Ticker.

Der große Vorteil von Tickern gegenüber einer einfachen Auflistung von News oder Links entspricht dem von Slide-Shows. Praktisch beliebig viele Informationen sind sehr platzsparend auf Ihrer Website unterzubringen und bedarfsweise einzublenden.

Auch stilistisch gelten die bei der Beschreibung der Slide-Shows getroffenen Aussagen. DHTML bietet alle erdenklichen Möglichkeiten im Hinblick auf die Farbgestaltung, Laufband-Richtung und -Geschwindigkeit, Wechsel von Laufband-Richtung und -Geschwindigkeit oder der Schriftgröße oder -farbe dem Einbinden von Bildern u.v.m.

jQuery & jQuery UI

JavaScript und CSS3 bieten praktisch alle Bordmittel für die gelungene Positionierung dynamischer Frontend-Komponenten. Für die einfache Entwicklung browserübergreifend einheitlicher Effekte steht mit jQuery UI jedoch eine komfortable Bibliothek zur freien Verfügung.

Nicht umsonst setzen mehr als 70% aller Website jQuery als JavaScript-Bibliothek ein. Auch Werbe-Markt.de bedient sich gerne dieser Ressource, wenn die Entwicklung mit nativem JavaScript zu aufwendig erscheint. Für Modale und Animationen ist trotz CSS3-Transitions jQuery UI auch heute noch ein gerne genutztes Mittel der Wahl.

DHTML in PHP-Software einbinden

Im Gegensatz zu den eingangs beschriebenen Aufklapp-Menüs, ist bei Slide-Shows und Tickern davon auszugehen, dass sich die vorliegenden Quellwerte häufig ändern. Damit nicht bei jeder Aktualisierung der Quellwerte der Ticker oder die Slide-Show manuell angepasst werden müssen, besteht im Normalfall eine Schnittstelle zwischen dem integrierten DHTML-Element und der bestehenden PHP-Software. Auf diese Weise sind News-Ticker und Slide-Shows immer automatisch auf dem neuesten Stand.
Sie möchten die Einbindung von Aufklapp-Menüs, einer bedienerfreundlichen Navigationsleiste, einer Slide-Show oder eines Newstickers in Auftrag geben? Dann nutzen Sie bitte das nachfolgende Formular, um Kontakt mit Werbe-Markt.de aufzunehmen. Bitte beschreiben Sie dabei kurz und präzise, das gewünschte Aussehen, die Position und die Datenquelle des in Ihrer Website einzubindenden Elements.

* Pflichtfelder