Jobs 6 News Kontakt Impressum Datenschutz
mediaBEAM GmbH mediaBEAM GmbH mediaBEAM GmbH mediaBEAM GmbH
  • Für Provider
    • xWorks im Überblick
    • Mehr Funktionen
    • Alle xWorks Vorteile auf einen Blick
  • Für Kommunen
    • Stadtnetz im Überblick
    • Mehr Funktionen
    • Alle Vorteile auf einen Blick
  • Für Unternehmen
    • Der moderne Arbeitsplatz für innovative Teamarbeit
    • Alle xworks.365 Vorteile auf einen Blick
    • xworks.365 Business Partner, ein starkes Netzwerk
  • Referenzen
    • Unsere Kunden
    • Showcase: directBOX
    • Smart Automarkt
  • Über uns
    • Erfahren Sie mehr über mediaBEAM
    • Das mediaBEAM-Team
    • Philosophie
    • Rechenzentrum
    • Geschichte
    • Leitbild
    • Partner
    • Stellenangebote
mediaBEAM GmbH mediaBEAM GmbH
  • Für Provider
    • xWorks im Überblick
    • Mehr Funktionen
    • Alle xWorks Vorteile auf einen Blick
  • Für Kommunen
    • Stadtnetz im Überblick
    • Mehr Funktionen
    • Alle Vorteile auf einen Blick
  • Für Unternehmen
    • Der moderne Arbeitsplatz für innovative Teamarbeit
    • Alle xworks.365 Vorteile auf einen Blick
    • xworks.365 Business Partner, ein starkes Netzwerk
  • Referenzen
    • Unsere Kunden
    • Showcase: directBOX
    • Smart Automarkt
  • Über uns
    • Erfahren Sie mehr über mediaBEAM
    • Das mediaBEAM-Team
    • Philosophie
    • Rechenzentrum
    • Geschichte
    • Leitbild
    • Partner
    • Stellenangebote
Apr 09

Schick mit runden Ecken

  • 9. April 2008
  • jmeyer
  • No Comments
  • Blog, eBay, mediaBEAM

Ohne Zweifel: Die neuen eBay Relevance Ads mit runden Ecken kommen ziemlich rockig rüber.

Ein Blick hinter die Kulissen verrät, dass uns (ein bischen Eigenlob sei gestattet) neben der ansprechenden Optik eine ziemlich brillante technische Implementation gelungen ist. Für die Techies unter uns: Die runden Ecken der eBay Relevance Ads bestehen nicht, wie in den allermeisten Webseiten, aus kleinen Grafiken, sondern sind komplett in CSS „gepixelt“. Klarer Vorteil: Die Darstellung im Client-Browser geht deutlich schneller vonstatten, da nicht erst vier kleine GIFs (für jede Ecke eins) nachgeladen werden müssen. Das reduziert ganz nebenbei auch den Load auf den Auslieferungsservern um ein paar Hundert Millionen Requests pro Tag!

Für uns war die deutlich kompliziertere Implementation per CSS aber auch aus einem anderen Grund unumgänglich: Publisher können die Rahmenfarbe der eBay Relevance Ads über einen Aufrufparameter an ihr Webseitenlayout anpassen. Diese Aufgabe konnte nur mittels CSS gelöst werden: Die einzelnen Pixel nehmen automatisch die RGB-Werte der frei definierbaren Rahmenfarbe auf.

Wie funktionieren CSS-Grafiken?

In einfachen Worten gesagt wird jedes einzelne Pixel der Grafik exakt auf den Bildschirm gemalt. Farbwert und Position werden beispielsweise in ein <SPAN> eingearbeitet. Die einzelnen Pixel werden mittels eines <DIV> exakt positioniert. Ein einzelnes Pixel wird z.B. durch folgenden Code dargestellt:

[HTML2]

[HTML1]

Mit solchen CSS-Grafiken — wir nennen sie „Pixicons“ — lassen sich ganz lustige Sachen bauen. Das nebenstehende eBay Logo ist beispielsweise gar kein echtes Bild (GIF, JPG oder PNG), sondern besteht aus einzelnen Pixeln, die der Browser zur Laufzeit zusammensetzt. Das menschliche Auge erkennt dies jedoch als zusammenhängendes Bild.

Für den Rechner ist das Ganze nur eine Kolonne von exakt 886 html-Kommandos. Jedes Einzelne Kommando entspricht einem Pixel dieser Grafik. Kleiner Nachteil an diesem „eBay-Logo“: Der html-Code ist sportliche 44 KByte gross. Als GIF dürften das nur 2KB sein. Dafür muss der Client die Grafik nicht nachladen.

CSS-Grafiken werden somit wohl auch in Zukunft eher in Spezialfällen angewendet. Wie zum Beispiel in unseren runden Ecken. Auch bei „Captchas“ sind CSS-Grafiken sehr beliebt. CAPTCHAs werden verwendet, um zu entscheiden, ob das Gegenüber ein Mensch oder eine Maschine ist. Diese kleinen Bildchen enthalten Zeichenfolgen, die der Nutzer eingeben soll. Ein solches Captcha soll jedoch nicht computerlesbar sein. Ist es auch nicht. Siehe Code 🙂

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

About The Author

Kommentar hinterlassen Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Neueste Beiträge

  • Leute, stellt Azubis ein!
  • Interview der Münsterland Zeitung zur Arbeit im Homeoffice
  • Ein Tag im Homeoffice
  • Home-Office: Wie werden wir zuhause produktiv?
  • Black Friday Deal

Kategorien

  • Allgemein
  • Blog
  • directBOX
  • eBay
  • Leitbild
  • mediaBEAM
  • Presseberichte
  • Pressemitteilungen
  • SmartFeedAds
  • Stadtnetz
  • White-Label Cloud-Plattform
  • xWorks


Die mediaBEAM GmbH ist Entwickler und Betreiber einer White-Label-Kommunikationsplattform für die Bereiche Unified-Messaging, Cloud-Storage und Document Management.

Aktuelle Neuigkeiten

  • Leute, stellt Azubis ein!
  • Interview der Münsterland Zeitung zur Arbeit im Homeoffice
  • Ein Tag im Homeoffice

mediaBEAM Kontakt

Erhardstraße 3 Phone: +49 2561 695-0 Fax: +49 2561 695-0199 E-Mail: contact@mediabeam.com
Copyright © 1999-2022 - mediaBEAM GmbH
Alle Rechte vorbehalten.