HTML mit Zeit - HTML+Time Zeitgesteuerte Ereignisse mit HTML? Möglich wird dies mit dem offiziellen W3C Standard HTML+Time. Diese Einführung gibt einen Einblick in HTML+Time 1 bzw. HTML+Time 2, und bringt ihnen diese Technik ein wenig näher.

HTML + Time ist eine auf XML basierte HTML Erweiterung. Mit einigen HTML+Time Befehlen ist es möglich, zeitgesteuert Elemente wie Texte, Grafiken aber auch Multimedia Objekte anzuzeigen.
Es gibt bisher zwei Versionen von HTML+Time. HTML+Time 1 wird vom InternetExplorer ab der Version 5.0 unterstützt. HTML+Time 2 wird bisher nur vom Internet Explorer ab der Version 5.5 unterstützt.

HTML+Time ist auf der Idee von Microsoft entwickelt worden. Dieser hat HTML + Time in den DHTML Parser integriert. D.h. das HTML+Time in Verbindung mit Stylesheets genutzt wird. Über das Stylesheet, bzw. über eine CSS Klasse wird die aktuelle Zeit ermittelt. Diejenigen Elemente, die mit HTML+Time bearbeitet werden verweisen auf diese CSS Klasse, und durch das setzten einiger Attribute kann der Timer gesteuert werden.

Ein Dokument das HTML+Time 1 verwendet sollte den Namespace für die HTML+Time 1 Elemente definieren. Über diesen Namespace erkennt der Browser, um was für Elemente es sich handelt, und es zu keinen Konflikten zwischen gleichlautenden Elementen kommt.

html_time_1.html

<html>
<head>
<xml:namespace prefix="t" />
<title>HTML+Time</title>
</head>
<body>
<p>HTML+Time ist klasse!</p>
</body>
</html>


Dieses Dokument ist jetzt nicht weiter interessant, es wird lediglich aufgezeigt, wie der Namespace "t" definiert wird.

Die erste Zeitsteuerung

Nun wollen wir das erste zeitgesteuerte Ereignis definieren. Zunächst einmal muss die aktuelle Uhrzeit ermittelt werden. Wie oben bereits erwähnt geschieht dies durch ein CSS Style Klasse.

<style type="text/css">
.time { behavior: url(#default#time); }
</style>


Dabei ist es wichtig, das diese Klassendefinition genau so geschrieben ist. Es wird dabei ein "Verhalten" der Klasse definiert, der Internet Explorer interpretiert dies nur bei korrekter Syntax richtig.
Mit dieser CSS Klasse wird auf die Version 1 von HTML+Time verwiesen. Das Ergebnis ist hierbei ab dem InternetExplorer 5 zu sehen.
Auf die Version 2 von HTML+Time wird wie folgt verwiesen.
.time { behavior: url(#default#time2); }
Was bei den Verwendung der verschiedenen Versionen wichtig ist, wird nachfolgend erklärt.

html_time_2.html

<html>
<head>
<title>HTML+Time</title>
<xml:namespace prefix="t" />
<style type="text/css">
.time { behavior: url(#default#time); }
</style>
</head>
<body>
<p>HTML+Time ist klasse!</p>
<img src="werbung.gif" width="468" height="60" class="time" t:start="0" t:dur="10" t:timeaction="display" />
</body>
</html>


Der Effekt dieser Anwendung ist vielleicht schon aus den einzelnen verwendeten Attributen erkennbar. Bei dem <img> Element wird über das class-Attribut auf die Klasse "time" verwiesen. Der InternetExplorer erkennt jetzt, das es sich hierbei um ein Element handelt, welches HTML+Time verwendet.
Die verschiedenen Attribute, welche mit dem Namespace t beginnen, sind HTML+Time 1 Attribute. Über das Attribut t:start wird angegeben, ab wann der Timer starten soll. Da der Wert auf 0 gesetzt ist, startet der Timer sofort. Mit t:dur wird die Dauer des Timers angeben, in dem Fall sind es 10 Sekunden. Auch Werte, die kleiner als 1 können angegeben werden, wie z.B. 0.5 für eine halbe Sekunde.
Das interessanteste Attribut kommt erst zum Schluss. Über t:timeaction wird die Aktion definiert, die in dem Zeitraum von 0 - 10 passieren soll. Es wird die Grafik folglich 10 Sekunden angezeigt (display), und dann verschwindet diese.

HTML+Time 1 oder HTML+Time 2

Wie man es von Microsoft her kennt, ist alles recht kompliziert. Unser Beispiel ist für alle IE Versionen ab 5.0 erstellt worden. HTML+Time 2 bietet jedoch noch einige Funktionen mehr als HTML+Time 1.
Doch Microsoft hat, wie so oft, einen verwirrenden Schritt gemacht.
In HTML+Time 2 wird der Namespace gar nicht mehr benötigt, laut Microsoft sollte dieser jedoch definiert werden.
Um dies zu verdeutlichen, nochmals unser HTML+Time Beispiel, dieses mal aber nur für HTML+Time 2.

html_time_3.html
<html>
<head>
<title>HTML+Time</title>

<xml:namespace prefix="t" />
<style type="text/css">
.time { behavior: url(#default#time2); }
</style>
</head>
<body>
<p>HTML+Time ist klasse!</p>
<img src="werbung.gif" width="468" height="60" class="time" start="0" dur="10" timeaction="display" />
</body>
</html>


Die Verwendung des Namespaces fällt komplett weg, die Definition sollte aber vorhanden sein!

HTML+Time bietet viele Möglichkeiten. Mit unserem Beispiel könnte man ein Werbebanner nur einen gewissen Zeitpunkt einblenden, und dann verschwinden lassen. Leider funktioniert dies bisher nur mit dem Internet Explorer.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: