DHTML
DHTML - Dynamic HTML

DHTML - Dynamic HTML für Ihre lebendige Website

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.


Erklärung DHTML

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”.

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 das Risiko dass der User abspringt höher, als wenn er mit nur einem Klick zum gewünschten Inhalt gelangt. 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 instinktiv 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 und ist dennoch sofort abrufbar für Nutzer, 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 und und... ein u.E. gelungenes Beispiel für eine solche Slide-Show finden Sie auf der Startseite von Werbe-Markt.de in Form des rechten der drei Informations-Blöcke unterhalb des Begrüßungstexts.

(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 ist genau wie bei Slide-Shows, dass praktisch beliebig viele Informationen sehr platzsparend auf Ihrer Website eingebunden werden können. 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.

Beispiele für mit CSS und JavaScript programmierte Ticker sind der Hinweis auf die verbleibende Zeit im Angebot der Woche auf der Werbe-Markt.de-Startseite ebenso wie die Grüße & Tipps auf der catflirt | Chat & Flirt-Startseite.

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, wird im Normalfall eine Schnittstelle zwischen dem integrierten DHTML-Element und der bestehenden PHP-Software hergestellt, so dass News-Ticker und Slide-Shows immer automatisch auf dem neuesten Stand sind.

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, welches Element mit welchen Quellwerten an welcher Position Ihrer Website eingefügt werden soll.


Kontaktformular
Code Bitte den Code in das Textfeld eingeben.

Telefon & eMail
Impressum

Nach Erhalt Ihrer Anfrage werden wr uns schnellstmöglich mit Ihnen in Verbindung setzen. Eine etwaige Antwort-eMail hat den Betreff Re: DHTML - Dynamic HTML. Wenn Sie sich für die Einbindung eines News-Tickers in Ihre Website interessieren, sind möglicherweise auch die Informationen zum Erstellen von RSS-Feeds für Sie relevant.

DHTML