„Dynamisches HTML“ – Versionsunterschied
| [ungesichtete Version] | [gesichtete Version] |
CSS 3; HTML 5; Beispiele |
Addbot (Diskussion | Beiträge) K Bot: 27 Interwiki-Link(s) nach Wikidata (d:q380153) migriert |
||
| (2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 7: | Zeile 7: | ||
* die Hervorhebung eines Textes |
* die Hervorhebung eines Textes |
||
* die Möglichkeit, Objekte durch [[Drag and Drop|Drag & Drop]] auf dem Bildschirm zu verschieben |
* die Möglichkeit, Objekte durch [[Drag and Drop|Drag & Drop]] auf dem Bildschirm zu verschieben |
||
* Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen |
* Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen |
||
* Webseiten, die sich wie clientseitige [[Anwendungssoftware|Anwendungsprogramme]] bedienen lassen |
* Webseiten, die sich wie clientseitige [[Anwendungssoftware|Anwendungsprogramme]] bedienen lassen. |
||
== Techniken == |
== Techniken == |
||
| Zeile 15: | Zeile 15: | ||
* [[Hypertext Markup Language|HTML]] zum Verfassen von Dokumenten |
* [[Hypertext Markup Language|HTML]] zum Verfassen von Dokumenten |
||
| ⚫ | |||
* Dynamik in der Formatierung mit [[HTML 5]] und [[CSS 3]] |
|||
| ⚫ | |||
* eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das [[Document Object Model]] (DOM) verwendet |
* eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das [[Document Object Model]] (DOM) verwendet |
||
* [[XMLHttpRequest]], um Daten zwischen dem Browser und einem entfernten [[Hypertext Transfer Protocol|HTTP]]-Server auszutauschen (siehe auch [[Ajax (Programmierung)|Ajax]]). |
* [[XMLHttpRequest]], um Daten zwischen dem Browser und einem entfernten [[Hypertext Transfer Protocol|HTTP]]-Server auszutauschen (siehe auch [[Ajax (Programmierung)|Ajax]]). |
||
* ein Format zur Übertragung strukturierter Daten, etwa [[Extensible Markup Language|XML]] oder auch [[JavaScript Object Notation|JSON]] |
* ein Format zur Übertragung strukturierter Daten, etwa [[Extensible Markup Language|XML]] oder auch [[JavaScript Object Notation|JSON]] |
||
Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können. |
Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können. |
||
Dymaisches HTML umfasst keine Plug-ins wie [[Adobe Flash]], [[Shockwave]] oder [[Silverlight]], mit denen es oft verwechselt wird. |
|||
== CSS 3 und HTML 5 == |
|||
Durch [[CSS 3]] und [[HTML 5]] bekommt DHTML eine ganz neue Bedeutung. Mittlerweile sind dynamische Veränderungen ohne Javascript möglich und können im größeren Stil dem Trend "Ohne Javascript" entgegenkommen. Viele zuvor mit Javascript Realisierte Interaktionen wie dynamische Farben, Auto-Complete Funktionen und wiederkehrende CSS Eigenschaftenwechsel sind möglich. |
|||
== Beispiele == |
== Beispiele == |
||
Ein einfaches Beispiel eines dynamischen HTML Abschnitts |
Ein einfaches Beispiel eines dynamischen HTML Abschnitts, bei dem sich der dargestellte Text beim Anklicken verändert: |
||
<source lang="html5"> |
|||
... |
|||
<details> |
|||
<summary>Test Kategorie</summary> |
|||
<p>Hier kann ein beliebiger Text stehen</p> |
|||
</details> |
|||
... |
|||
</source> |
|||
Ein einfaches Beispiel eines dynamischen HTML Abschnitts mit CSS, bei dem sich der dargestellte Text beim Hovern verändert: |
|||
<source lang="html5"> |
|||
... |
|||
<style> |
|||
p:hover{ |
|||
text-decoration: underline; |
|||
} |
|||
</style> |
|||
<p>...ein Text...<p> |
|||
... |
|||
</source> |
|||
Ein einfaches Beispiel eines dynamischen HTML Abschnitts mit Javascript, bei dem sich der dargestellte Text beim Anklicken verändert: |
|||
<source lang="html4strict"> |
<source lang="html4strict"> |
||
| Zeile 67: | Zeile 36: | ||
In der Anfangszeit konnte DHTML nur über [[Webbrowser|Browser]]-spezifische sogenannte ''DHTML-Modelle'' realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff ''DOM Scripting'' verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte. |
In der Anfangszeit konnte DHTML nur über [[Webbrowser|Browser]]-spezifische sogenannte ''DHTML-Modelle'' realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff ''DOM Scripting'' verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte. |
||
Dynamisches HTML stellt teils hohe Anforderungen an die |
Dynamisches HTML stellt teils hohe Anforderungen an die JavaScript-Fähigkeiten des Browsers, die nur von den neueren Browsergenerationen erfüllt werden. Wenn die Verwendung von JavaScript aus Sicherheitsgründen deaktiviert wird, kann dynamisches HTML nicht verwendet werden. Darüber hinaus kann sich die Zugänglichkeit für Anwender verschlechtern, die wegen körperlichen Einschränkungen auf alternative Eingabe- bzw. Ausgabemethoden zurückgreifen müssen (siehe [[Barrierefreies Internet]]). Es ist aber möglich, dynamisches HTML so zu verwenden, dass es nur bei Browsern verwendet wird, die damit auch umgehen können. Die übrigen Anwender können die Website dann verwenden, als ob diese gar kein dynamisches HTML einsetzen würde. Auch [[Suchmaschine]]n können dynamisches HTML nicht verwenden und bei falscher Anwendung nicht mehr alle Inhalte der Seite auffinden. |
||
== Siehe auch == |
|||
* [[Webservice]] |
|||
* [[XML-RPC]] |
|||
== Weblinks == |
== Weblinks == |
||
* [http://de.selfhtml.org/dhtml/ SELFHTML: Dynamisches HTML] |
* [http://de.selfhtml.org/dhtml/ SELFHTML: Dynamisches HTML] |
||
* [http://www.dhtmlgoodies.com/ Freie DHTML und Ajax Skripte (englisch)] |
|||
[[Kategorie:World Wide Web]] |
[[Kategorie:World Wide Web]] |
||
[[Kategorie:HTML]] |
[[Kategorie:HTML]] |
||
[[ar:دي إتش تي إم إل]] |
|||
[[bg:DHTML]] |
|||
[[cs:DHTML]] |
|||
[[en:Dynamic HTML]] |
|||
[[es:HTML dinámico]] |
|||
[[eu:DHTML]] |
|||
[[fa:دیاچتیامال]] |
|||
[[fi:DHTML]] |
|||
[[fr:HTML dynamique]] |
|||
[[he:Dynamic HTML]] |
|||
[[hi:डायनेमिक एचटीएमएल (Dynamic HTML)]] |
|||
[[id:Dynamic HTML]] |
|||
[[it:DHTML]] |
|||
[[ja:ダイナミックHTML]] |
|||
[[km:ឌីណាមិក HTML]] |
|||
[[ko:DHTML]] |
|||
[[nl:Dynamic HTML]] |
|||
[[pl:Dynamiczny HTML]] |
|||
[[pt:DHTML]] |
|||
[[ro:DHTML]] |
|||
[[ru:DHTML]] |
|||
[[sk:Dynamické HTML]] |
|||
[[sv:DHTML]] |
|||
[[tr:DHTML]] |
|||
[[uk:DHTML]] |
|||
[[vi:HTML động]] |
|||
[[zh:動態HTML]] |
|||
Version vom 3. April 2013, 04:06 Uhr
Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML) oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Methoden, bei denen während der Anzeige einer Webseite diese selbst, ausgelöst durch Benutzereingaben, verändert wird.
Der Begriff "dynamisch" bezieht sich dabei auf die Idee, dass diese Änderungen von Ereignissen bedingt werden, die auch mehrfach beim Anzeigen einer Seite auftreten können.
Beispiele für dynamische Anzeigeeffekte sind
- das Erscheinen ("Aufklappen") eines Menüs
- die Hervorhebung eines Textes
- die Möglichkeit, Objekte durch Drag & Drop auf dem Bildschirm zu verschieben
- Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen
- Webseiten, die sich wie clientseitige Anwendungsprogramme bedienen lassen.
Techniken
Dynamisches HTML umfasst die folgenden Techniken:
- HTML zum Verfassen von Dokumenten
- eine clientseitige Skriptsprache, meistens JavaScript
- eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das Document Object Model (DOM) verwendet
- XMLHttpRequest, um Daten zwischen dem Browser und einem entfernten HTTP-Server auszutauschen (siehe auch Ajax).
- ein Format zur Übertragung strukturierter Daten, etwa XML oder auch JSON
Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können.
Beispiele
Ein einfaches Beispiel eines dynamischen HTML Abschnitts, bei dem sich der dargestellte Text beim Anklicken verändert:
...
<p onclick="this.firstChild.nodeValue = 'Danke'">Klick mich</p>
...
Kritik und Nachteile
Oft wird dynamisches HTML für effekt-orientierte Funktionen verwendet, bei denen der Nutzen nicht klar erkennbar ist und die eher stören.
In der Anfangszeit konnte DHTML nur über Browser-spezifische sogenannte DHTML-Modelle realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff DOM Scripting verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte.
Dynamisches HTML stellt teils hohe Anforderungen an die JavaScript-Fähigkeiten des Browsers, die nur von den neueren Browsergenerationen erfüllt werden. Wenn die Verwendung von JavaScript aus Sicherheitsgründen deaktiviert wird, kann dynamisches HTML nicht verwendet werden. Darüber hinaus kann sich die Zugänglichkeit für Anwender verschlechtern, die wegen körperlichen Einschränkungen auf alternative Eingabe- bzw. Ausgabemethoden zurückgreifen müssen (siehe Barrierefreies Internet). Es ist aber möglich, dynamisches HTML so zu verwenden, dass es nur bei Browsern verwendet wird, die damit auch umgehen können. Die übrigen Anwender können die Website dann verwenden, als ob diese gar kein dynamisches HTML einsetzen würde. Auch Suchmaschinen können dynamisches HTML nicht verwenden und bei falscher Anwendung nicht mehr alle Inhalte der Seite auffinden.