SchlagwortCOSMiQ

Eine Übersicht über die verschiedenen Projekte meinerseits gibt es auf dieser Seite Übersicht COSMiQ.

CSS Sprites – Die ultimative Anleitung für den Wochenend-Webdesigner!

Infobox mit CSS Sprites
Infobox mit CSS Sprites

Die Geschwindigkeit von Webseiten ist in aller Munde. Nicht erst seit Google verkündet hat, dass eine schnelle Webseite höher in den Suchergebnissen gerankt wird. Spätestens jetzt überschlagen sich alle Blogs mit Tipps zur Verbesserung der Ladezeit. In diesem Artikel gibt es nun eine Anleitung, für die man keine Vorkenntnisse benötigt.

Warum denn CSS-Sprites?

Hinter CSS-Sprites steht folgender Gedanke: Die Größe einer Datei ist bei den meisten Internetverbindungen nicht mehr wirklich wichtig. Vielmehr ist die Anzahl an Anfragen entscheidender. Denn die Anzahl an möglichen Verbindungen zu bzw. von einem Internetserver ist begrenzt. Die Größe eines Elementes aber ist mittlerweile relativ egal.

CSS Sprites sind nämlich …

Viele kleine Grafiken in einer großen Grafik. Mit Cascading Style Sheets (CSS) ist nun möglich, nur Ausschnitte aus dieser großen Grafik anzuzeigen. Es muss also nur einmal eine größere Datei heruntergeladen werden. Diese wird dann mehrfach verwendet.

Beispiel: Amazon und Google

Viele große Seiten nutzen CSS Sprites. Hier einmal Google (Original) und Amazon (Original):

Sprite Grafik von Amazon (links) und Google (rechts)
Sprite Grafik von Amazon (links) und Google (rechts)

Man erkennt auf dem Bild mehrere Dutzend Elemente, die auf den jeweiligen Webseiten natürlich alleine angezeigt werden. Die Webdesigner von Google und Amazon sind natürlich Profis, doch für den kleinen Webdesigner ein persönlicher Tipp: Nur horizontal oder vertikal die Elemente ausrichten und nicht mischen! Das erleichtert einfach den Überblick.

Mein CSS Sprite zur Anschauung

Sprite-Grafik (gesamt)
Sprite-Grafik (gesamt)

Unterhalb der Beiträge zeige ich nun eine kleine Infobox mit einem Bild, ein paar mehr oder weniger informativen Sätzen und weiterführenden Links an. Dabei werden das Bild und die jeweiligen Icons aus einer einzigen Grafikdatei geladen.

Das Bild – CSS Sprite ohne Link

Im HTML-Quellcode wird hier nur ein <div> eingebunden und mit einer Klasse bzw. ID gekennzeichnet:
[code lang=“html“]<div id="pic">&nbsp;</div>[/code]

Und dieses CSS wird benutzt:
[code lang=“css“]#pic {
background: url(‚http://www.webanhalter.de/static/socialsprite.jpg‘);
background-position: 0px -303px;
width: 101px;
height: 99px;
float:left;
margin:0 20px 0 0;
padding:0;
}[/code]

Mit der ersten Eigenschaft background: url('...'); wird das Bild eingebunden. Wer Tools wie die Webdevelopertoolbar, Firebug o.ä. benutzt, sollte übrigens immer die absolute URL zum Testen benutzen.

Nun folgt die wichtige Eigenschaft background-position mit der das Bild positioniert wird. Die erste px-Angabe bezieht sich auf die horizontale, die zweite auf die vertikale Ausrichtung. Bezugspunkt ist immer die linke obere Ecke der Grafik. Zwar gibt es neben Pixel-Werten auch noch weitere Möglichkeiten, aber hier ist schon genaues Arbeiten wichtig. Und da fährt man eindeutig besser mit den Pixeln.
Die Werte bekommt man über Ausrechnen oder Ausprobieren heraus. Aber ein guter Sprite-Generator (siehe unten) bringt die Werte gleich mit.

Mit width und height wird die Größe des Blockelements festgelegt. Das ist durchaus wichtig, weil das jeweilige HTML-Element natürlich nicht größer als das Grafik-Element sein darf. Ist es größer, dann werden vielleicht weitere Grafiken aus dem Sprite angezeigt. Und das ist natürlich nicht gewollt.

float, margin, padding seien hier nur der Vollständigkeit halber aufgezählt. Sie dienen nur zur Positionierung des Div innerhalb des Seitenlayouts.

Die Icons – CSS Sprite mit Links

Nach der Pflicht nun die Kür: Die Sprite-Grafik soll einzelne Icons liefern und mehrere Links sollen mit diesen gestaltet werden. Aber der Text der Links soll nicht sichtbar sein, jedenfalls nicht für die Besucher. Suchmaschinen sollen den Linktext ebenso wie Benutzer von Screenreadern verwerten können.

Der HTML-Code:
[code lang=“html“]
<div id="socialicons">
<a id="rss" href="http://www.webanhalter.de/feed" title="RSS Feed abonnieren">
<span>RSS-Feed</span>
</a>

</div>[/code]

Das umschließende <div> erleichtert die Ansprache aller Links, da ich mehrere Icons resp. Links einbinde.
Jeder einzelne Link erhält bei mir eine einzigartige id (hier rss), um ihn gezielt ansprechen zu können. Und mit dem title gibt es zusätzliche Informationen, wenn die Maus das Icon überfährt.

Das <span>-Element spielt nun eine besondere Rolle. Der Inhalt, nämlich der Linktext, wird nachher über CSS ausgeblendet. So sollten sowohl Suchmaschinen als auch Screenreader diesen wahrnehmen. In einer von mir leider vergessenen Quelle wird das jedenfalls für Suchmaschinen so erläutert. Ob dies auch vernünftig in Screenreadern funktioniert, weiß ich allerdings nicht. Zudem dürften wohl Besucher mit deaktivierter Bildanzeige nichts zu sehen bekommen. Sollen also für wesentliche Navigationselemente einer Seite CSS Sprites angewandt werden, empfiehlt sich diese Technik nicht. Dort könnte man stattdessen den Text angezeigt lassen und nur eine Hintergrundgrafik auswechseln. Oder eine Grafik über <img> einbinden und diese jeweils verschieben.
Mir ist es allerdings in dieser Anwendungsform recht egal, da keine wesentlichen Inhalte oder Navigationselemente verloren gehen.

Das CSS komplett:
[code lang=“css“]
#socialicons { height:32px; margin:0px; float:right;}
#socialicons span {display:none;}
#socialicons a {background: url(‚http://www.webanhalter.de/static/socialsprite.jpg‘); width: 32px; height: 32px; display:block; float:left; margin-right:5px; text-decoration:none;}
#socialicons a#rss {background-position: 0px -402px;}
#socialicons a#rss:hover {background-position: 0px -436px;}
[/code]

Wie man sieht, führe ich hier nur das CSS für das RSS-Icon auf. Mit denselben Angaben (bis auf background-position) werden auch die anderen Icons abgefertigt.

#socialicons ist zur Darstellung der gesamten Leiste mit allen Icons. Hier wird diese positioniert.
#socialicons span dient mit der Anweisung display:none; zum simplen Ausblenden des Textes. Mit text-indent sind sicherlich ähnliche Ergebnisse möglich.

Infobox mit CSS Sprites
Infobox mit CSS Sprites

#socialicons a wirkt nun auf alle Icons in der Leiste. Es sind ja nun mehrere, sodass ich durch diese allgemeine Anweisung Wiederholungen erspare. Das erspart einerseits einige Tipparbeit, vor allem verhindert es Flüchtigkeitsfehler in Form vergessener Attribute o.ä.

#socialicons a#rss spricht nun das jeweilige Icon resp. den jeweiligen Link an. Hier wird nun nur noch die Position des Hintergrundbildes festgelegt, eingebunden wurde es bereits in der obigen, allgemeinen Anweisung.
#socialicons a#rss:hover ermöglicht nun die Anzeige eines anderen Icons, wenn die Maus darüber fährt. Hier wird, wie bei den anderen Icons, einfach die Hintergrundgrafik verschoben und so ein anderes, hier ein farbiges, Icon sichtbar.

Also …

CSS-Sprites sind also eine einzige große Grafik, die mehrere kleinere Grafiken enthält. Mithilfe von CSS werden sie eingebunden und ihr sichtbarer Bereich begrenzt. Sodass wieder der Eindruck von mehreren kleinen Grafiken entsteht.

Mein Beispiel vollständig

Unkommentiert zum besseren Verständnis hier der gesamte HTML- und CSS-Code für die kleine Infobox:

HTML

[code lang=“html“]<div id="authorinfo">
<div id="pic">&nbsp;</div>
<p>Als Webanhalter schreibt <strong>Marc Pentermann</strong> über Linux, WordPress und dieses ganze innovative Internet, das Fragen &amp; Antworten-Portal COSMiQ, die Blogsoftware WordPress und veröffentlicht eigene Fotos.</p>
<div id="socialicons">
<a id="rss" href="http://www.webanhalter.de/feed" title="RSS Feed abonnieren"><span>RSS-Feed</span></a>
<a id="iconcontact" href="http://www.webanhalter.de/about-webanhalter/kontakt" title="Kontaktformular"><span>Kontaktformular</span></a>
<a id="xing" href="http://www.xing.com/profile/Marc_Pentermann2" title="XING"><span>XING</span></a>
<a id="google" href="http://www.google.com/profiles/marc.pentermann" title="Google"><span>Google</span></a>
<a id="facebook" href="http://de-de.facebook.com/pentermann" title="Facebook"><span>Facebook</span></a>
<a id="twitter" href="http://twitter.com/webanhalter" title="Twitter"><span>Twitter</span></a>
</div> <!– Ende #socialicons –>
</div> <!– Ende #authorinfo –>[/code]

CSS

[code lang=“css“]#authorinfo {border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; padding:20px 20px 50px 20px; margin-top:50px; clear:both;}
#pic {background: url(‚http://www.webanhalter.de/static/socialsprite.jpg‘); background-position: 0px -303px; width: 101px; height: 99px; float:left; margin:0 20px 0 0; padding:0;}
#socialicons { height:32px; margin:0px; float:right;}
#socialicons span {display:none;}
#socialicons a {background: url(‚http://www.webanhalter.de/static/socialsprite.jpg‘); width: 32px; height: 32px; display:block; float:left; margin-right:5px; text-decoration:none;}
#socialicons a#rss {background-position: 0px -402px;}
#socialicons a#rss:hover {background-position: 0px -436px;}
#socialicons a#iconcontact {background-position: 0px -34px;}
#socialicons a#iconcontact:hover {background-position: 0px 0px;}
#socialicons a#facebook {background-position: 0px -68px;}
#socialicons a#facebook:hover {background-position: 0px -102px;}
#socialicons a#google {background-position: 0px -136px;}
#socialicons a#google:hover {background-position: 0px -170px;}
#socialicons a#xing {background-position: 0px -714px;}
#socialicons a#xing:hover {background-position: 0px -748px;}
#socialicons a#twitter {background-position: 0px -646px;}
#socialicons a#twitter:hover {background-position: 0px -680px;}[/code]

Tipp: CSS Sprites erstellen lassen

csssprites.com
csssprites.com

Es gibt mittlerweile unzählige CSS-Sprite-Generatoren im Netz. Meiner Erfahrung nach ist csssprites.com der Beste. Einerseits weil er funktioniert, was leider nicht mehr bei allen der Fall ist. Andererseits gibt er sehr übersichtlich die Grafik und auch die CSS-Anweisungen (also background-position) aus. Zudem ermöglicht er über die „options“ die Sprite-Grafik mit einem durchsichtigen oder weißen Hintergrund auszustatten. Neben anderen Optionen ist dies ein wichtiger Punkt für die Ladezeit der Grafik: Ein weißer Hintergrund ermöglicht einfach schnelleres Laden, weil die Grafik kleiner ist als wenn sie einen durchsichtigen Hintergrund hätte. Da ich hier auch einen weißen Hintergrund benutze, ist dies für mich also ideal. Für anderen Webseiten wird vielleicht eine andere Hintergrundfarbe benötigt: Hier lässt man die Grafik mit einem durchsichtigen Background erstellen und färbt sie danach einfach selber ein.

Tipp 2: Grafik optimieren mit YAHOO! Smush.it

YAHOO! Smush.it
YAHOO! Smush.it

YAHOO ist um die Ladezeiten im Internet ebenso besorgt wie Google. Stellt aber auch zwei sehr empfehlenswerte Tools zur Verfügung: Mit der Firebug-Erweiterung yslow kann der Webdesigner/Webmaster sich über die Performance seiner Seite informieren. Und mit dem hervorragenden Smush.it lassen sich Grafiken optimieren. Dabei soll sich nicht die Qualität, sondern nur die Dateigröße verringern. Und nach meinen Erfahrungen macht sie dies auch.

Liebe Wochenend-Webdesigner!

Nun hatten sich die Profis, hier die Webkrauts, schon vor einiger Zeit über CSS-Sprites ausgelassen. Mit der Ankunft dieser Thematik auch auf meiner Seite sollen allen Eines klar geworden sein: CSS-Sprites sind eine notwendige Technik. Und sie sind durchaus simple.

Der COSMiQant – Frag die Community

COSMiQ (vormals LYCOS iQ) wurde zum 03. April 2018 eingestellt. Die Informationen auf dieser Seite werden nicht mehr aktualisiert, die Links funktionieren größtenteils nicht mehr und diese Seite wird nur aus melancholischen Gründen nicht gelöscht!

Ein zweites Video hat der COSMiQant nun veröffentlicht. Unter dem Titel Der COSMiQant – Frag die Community feiert das Burda-Team sein zweites Video-Debüt.

Mit angeklebtem Bart, Perücke aus dem Kostümverleih und dem Maleranzug für 6,99€ aus dem Baumarkt um die Ecke debattiert der COSMiQant mit dem nicht verkleideten COSMiQ-Team über das zweite Video. Spektakuläre Dialoge oder einen richtigen Spannungsbogen darf man natürlich nicht erwarten, vielmehr bleibt beim Zuschauer ein mitleidiges Gefühl in der Magengegend, dass sich erst beim zweiten oder gar dritten Schauen des COSMiQanten-Videos genauer definieren lässt: Mit Kaffeetassen, Pappbecher von Coffee-to-go-Ständen und einem Dutzend Zeitschriften wird versucht dem Drehort etwas Leben einzuhauchen. Eine mehr oder wenig liebevoll bemalte Flipchart mit Lobhuldigungen aus COSMiQ im Hintergrund kann jedoch auch nicht den Stuhl in der Ecke verdecken. Mit der Sitzfläche zur nackten Wand erscheint der Schemel in einem krassen Gegensatz zum Mobiliar anderer Internetgrößen …

COSMiQant
COSMiQant (Screenshot aus dem 2. COSMiQanten-Video)

Freunde geschlechtsspezifischer Diskriminierung finden übrigens in den ersten Sekunden auch ihre Vorurteile bestätigt: So darf das einzige weibliche Teammitglied nur ihre Ellenbogen auf einer veralteten Zeitschrift ablegen, während die beiden unmaskierten männlichen Team-Kollegen mit iPad bzw. Apple-Notebook herumspielen dürfen. Heftige Debatten hierzu sind auf dem Frage&Antwort-Portal aber noch nicht aufgetaucht.

Im weiteren Verlauf des Videos werden – anscheinend wahllos – einige Passanten der bayrischen Landeshauptstadt zu kurzen Sätzen bzw. Fragen genötigt. Die Einzeiler und wirren Zusammenschnitte, seien es Fragen oder Antworten, lassen dem unbedarften Zuschauer nur die Schlussfolgerung, dass ProSieben nun erfolgreich das Vorabendformat Galileo ins Internet exportiert hat.

Doch!

Allem berechtigtem oder unberechtigtem Lästern zum Trotz wirkt das COSMiQantenvideo doch recht erheiternd: Spaß scheint dieses COSMiQ zu machen ist wohl die Kernaussage. Von Wissenschaft – Lehre, Forschung und dem Elfenbeinturm – ist COSMiQ in seiner Außenwirkung und auch der Realität auf dem Papierbogen ausgedruckter Fragen deutlich entfernt. Und das nicht unbedingt zum Bedauern der Burda-Verantwortlichen und dem Großteil der COSMiQ-Gemeinde.
Ohne Stolz, falsche Bescheidenheit oder gar schlechtem Gewissen führt der COSMiQant das Portal auf ein Wissensniveau des Allgemein- und Alltagswissens. Selbst Absicht mag ich weder ihm noch dem Burda-Team unterstellen, das aktuelle Video scheint nur eine Entwicklung zu bestätigen oder vielleicht auch nur in das Format Bewegtbild zu gießen.

Vorbei die Zeiten als einige, auch ich, Projekte mit Universitäten, Quellenangaben bei Antworten und die Unterstützung mathematischer Formeln in allen Feldern begrüßten, forderten und anmahnten?! Oder ist es doch nur einfach das zweite Video des COSMiQanten?

Kurzinterview mit dem Ex-Mod frechdachs1302 von COSMiQ

COSMiQ (vormals LYCOS iQ) wurde zum 03. April 2018 eingestellt. Die Informationen auf dieser Seite werden nicht mehr aktualisiert, die Links funktionieren größtenteils nicht mehr und diese Seite wird nur aus melancholischen Gründen nicht gelöscht!

frechdachs1302 war fast drei Jahre lang Moderator bei COSMiQ und hat vergangene Woche sein Moderatorenamt niedergelegt. Wie schon Anfang des Jahres einige andere Moderatoren zuvor, war er nun so freundlich mir einige Fragen zu beantworten zur Moderation bei COSMiQ und seiner eigenen Moderationstätigkeit.

COSMiQ Ex-Moderator frechdachs1302
COSMiQ Ex-Moderator frechdachs1302

Webanhalter: Anfang August 2010 hast Du als Moderator bei COSMiQ aufgehört. Wie lange hast du moderiert?
frechdachs1302: Moderator bei LycosIQ / COSMiQ war ich seit dem 13.11.2007, also fast 3 Jahre lang.

Webanhalter: Wieso hast Du damals angefangen auch zu moderieren?
frechdachs1302: Gute Frage.. Ich war vernarrt in LycosIQ und es hat mich unendlich gestört, dass einige User die Plattform für Ihre Kleinkriege missbraucht haben. Ich habe dann versucht über die MB Funktion ein wenig mit für Ordnung zu sorgen. Irgendwann wurde ich dann von Freja1980 und Maybee999 angesprochen, ob ich mir vorstellen könnte zu moderieren. Kurze Zeit später hat mich Karlosp (der damalige Produktmanager bzw. Verantwortliche) angesprochen und so bin ich dann Moderator geworden.

Webanhalter: Was hat Dir in diesen fast drei Jahren am meisten Spaß gemacht als Mod?
frechdachs1302: Spaß…..ich weiß nicht, ob man es als Spaß bezeichnen kann. In erster Linie war es manchmal Knochenarbeit (aber das kennst Du ja selbst) zu versuchen, etwas Ordnung reinzubringen, zwischen den Streithähnen zu vermitteln und natürlich auch Fragen und Antworten zu deaktivieren, die nicht auf der Plattform erscheinen sollten.

Webanhalter: Und was empfandest Du als Moderator als Deine wichtigste Aufgabe?
frechdachs1302: Für mich war die wichtigste Aufgabe, zwischen den Usern zu vermitteln und vielen auch zu erklären, warum gerade die oder die andere Frage gelöscht wurde. Natürlich ging das nicht immer reibungslos und die Beleidigungen waren teilweise arg unter der Gürtellinie.

Webanhalter: Was sind aktuell die größten Herausforderungen für die Moderation bei COSMiQ?
frechdachs1302: Die größten Herausforderungen waren und werden auch in Zukunft sein, mit sehr feinem Fingerspitzengefühl zu moderieren. Das dies nicht einfach ist und man dafür ein unheimlich gutes Gefühl für die User entwickeln muss, sollte jedem klar sein. Dazu ist es auch notwendig, dass von den Verantwortlichen bei COSMiQ klare Vorgaben gestellt werden . Aber so wie ich das Team in München kennenlernen durfte, sind die auf einem sehr guten Weg dorthin.

Webanhalter: Warum hast Du als Moderator nun aufgehört?
frechdachs1302: Wie einige sicherlich wissen, bin ich selbstständig und so hat sich in den letzten Monaten immer mehr rausgestellt, dass ich kaum noch Zeit habe COSMiQ zu nutzen, geschweige denn wirklich den anderen Moderatoren eine Unterstützung bin. Da ich ungern halbe Sachen mache, haben ich mich entschlossen, den Moderatorenjob an den berühmten Nagel zu hängen.

Webanhalter: Ich danke Dir für diese kleinen Interview und wünsche Dir viel Erfolg in Deiner Selbstständigkeit!

COSMiQ Videopremiere: Der COSMiQant – Essen bis man platzt!

COSMiQ (vormals LYCOS iQ) wurde zum 03. April 2018 eingestellt. Die Informationen auf dieser Seite werden nicht mehr aktualisiert, die Links funktionieren größtenteils nicht mehr und diese Seite wird nur aus melancholischen Gründen nicht gelöscht!

COSMiQ hat YouTube entdeckt. Die neue Werbe-Ikone, der COSMiQant, besitzt nun einen eigenen YouTube-Kanal. Dort ist bislang das erste Video unter dem Titel „Der COSMiQant – Essen bis man platzt“ zu sehen.

Nach dem ganzen Trubel rund um Facebook stellt sich die Frage, ob nun auch bei YouTube nach neuen Mitgliedern gesucht werden soll. 668 Fans bei Facebook sind zwar schon nett, aber ob da noch große Sprünge möglich sind?
Schon vor längerer Zeit hatte LYCOS die Videofunktion für Antworten eingeführt, die aber damals auf keine große Gegenliebe stieß. Vielleicht bringt ein Fischen in den Wassern von multimedialen Portalen noch ein paar Nutzer, ein paar originelle Inhalte?!