31.01.2011, 19:19

Panagiotis Kolokythas

HTML5 auf PCWELT.de

Aktuelle Produkt-Infos in PCWELT.de-Artikeln

In einem neuen Showcase demonstrieren wir Ihnen, welche neuartigen Möglichkeiten der Internet Explorer 9 und dessen HTML-5-Unterstützung zur Darstellung und Verknüpfung von Informationen bietet. Und Sie profitieren davon!
Der Internet Explorer 9 gibt Website-Betreibern und -Entwicklern viele neue Möglichkeiten, um ihre Websites anspruchsvoller, interaktiver und somit spannender für die Anwender zu gestalten. Eine der vielen Möglichkeiten demonstrieren wir Ihnen in einem neuen Showcase.
Wenn Sie im Internet Explorer 9 Beta (Download ) in diesem TFT-Display-Vergleichstest mit dem Mauszeiger über einen Produktnamen im Text fahren, der doppelt unterstrichen ist, wird per Mousover eine Infografik mit aktuellen Preis-Informationen zu diesem Produkt aus der großen Produkt-Datenbank der PC-WELT angezeigt. Der Infografik können Sie entnehmen, welchen Preis der derzeit günstigste Anbieter für das Produkt verlangt. Per Klick auf "Zum Produkt" gelangen Sie zum entsprechendne Eintrag PC-WELT Produktdatenbank und erhalten dort weitere Infos zu dem Produkt. In künftigen, ausgewählten Artikeln auf PCWELT.de finden Sie dieses neue, praktische Feature ebenfalls. Achten Sie einfach auf doppelt unterstrichene Produkt-Namen!
Technisch ist dies wie folgt gelöst:
Der Showcase verwendet Custom Data Attributes. Diese werden verwendet, damit das JS Element in unserem Fall die Produktdaten ausliest. Der Link auf ein Produkt wird um verschiedene Informationen wie Produktname (data-title) und Preis (data-price) ergänzt.
 
<a href="/prduktname" class="product" data-title="iPhone 3G"
data-category="Handy" data-offer-count="20" data-price="25,95">iPhone</a>
 
Unser JavaScript Layer liest die Daten aus dem Link aus und stellt sie in dem Layer dar. Vorteil von Custom Data Attributes ist, dass man HTML Elemente mit zusätzlichen Eigenschaften ausstatten kann die der Browser nicht darstellt - über JavaScript aber z.B. ausgelesen werden können.
Kommentare zu diesem Artikel (2)
784236
Content Management by InterRed