HTML5 auf PCWELT.de

Aktuelle Produkt-Infos in PCWELT.de-Artikeln

Montag den 31.01.2011 um 19:19 Uhr

von Panagiotis Kolokythas

PCWELT-Showcase zum IE9
Vergrößern PCWELT-Showcase zum IE9
© 2014
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.


Download Internet Explorer 9 Beta

Montag den 31.01.2011 um 19:19 Uhr

von Panagiotis Kolokythas

Kommentieren Kommentare zu diesem Artikel (2)
  • tempranillo 13:04 | 01.02.2011

    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.

    Uii, das ist wirklich eine bahnbrechende Neuerung des IE 9! Aber warum geht das auch mit meinem ollen Firefox 3.6 unter Ubuntu 10.10?

    Antwort schreiben
  • portuschwabe 00:18 | 01.02.2011

    html 5 geht auch mit chrome , firefox, opera etc....

    Der Bericht ist sehr IE9 lastig , aber die Funktion ist an sich , ok.. ( auch wenn es wieder mehr Werbung ist )

    Antwort schreiben
784236