Lange Antwort, aus aktuellem Anlass: Nach wie vor hält sich die Legende, dass man durch passende Angabe von META-Keywords im Quelltext das Ranking der eigenen Website beeinflussen könnte. Diese für den Website-Besucher unsichtbaren Keywords stammen aus der Urzeit des WWW, als Suchmaschinen den tatsächlichen Inhalt von Websites noch nicht sinnerfassend auswerten konnten und daher auf Hilfe durch den Ersteller der Website angewiesen waren. Jedoch wurde damit (durch Angabe von falschen und unpassenden Keywords) viel Unfug getrieben, sodass die Suchmaschinenbetreiber die Unterstützung dieser Angaben der Reihe nach aufgegeben haben. Das schon vor langer Zeit, denn Google wertet die Keywords seit 2002(!) nimmer aus, Yahoo seit 2009 und Bing wertet sie zwar als eines von etwa 1000 Kriterien aus, bestraft aber Seitenbetreiber mit niedrigerem Ranking, die unpassende Keywords einsetzen.

Wer also 2014 tatsächlich noch an die Wirksamkeit von META-Keywords glaubt, der wurde schlecht beraten. Heutzutage ist gutes Ranking in Suchmaschinen mit ein bissl mehr Aufwand verbunden, als ein paar Keywords in die Quelltexte einzubauen ;-)

Das Grundsetup: ein quadratisches DIV mit dem Kreis als Hintergrund, vor diesem soll das Logo dargestellt werden. Das HTML/PHP dazu:

<div class="kreis"><img style="position: absolute; left: ?px; top: ?px;" alt="" src="logo.jpg" width="?" height="?" /></div>

mit den einfachen CSS-Angaben

.kreis {
position: relative;
background: url(kreis.png);
width: 122px;
height: 122px; }
.kreis img {
position: absolute; }

Die Logos haben aber sehr unterschiedliche Seitenverhältnisse, somit ändert sich mit jedem dargestellten Logo die maximal mögliche Breite und Höhe sowie die Darstellungsposition. Ich benötigte also ein Codeschnipsel, das mir diese Werte je nach Logo korrekt ermittelt. Mit ein wenig Unterstufenmathematik war das kein Problem:

Man braucht den Radius des Kreises sowie die Originalbreite und -höhe der Logodatei. Wenn man sich das Logo im Kreis anschaut, gibts ein rechtwinkeliges Dreieck, dessen Informationen wir verwenden können, um die neue Breite und Höhe sowie die Position des Logos auszurechnen. Das Dreieck besteht aus der Diagonale des Logos (die immer dem doppelten Kreisradius entspricht!) sowie der gesuchten Logobreite und der gesuchten Logohöhe.

Wenn wir das Originallogo hernehmen, findet sich dort dasselbe Dreieck, nur größer. Man darf daher zu Recht davon ausgehen, dass die Winkel in diesem Dreieck gleich denen in unserem gesuchten Dreieck im verkleinerten Logo sind. Im rechtwinkeligen Dreieck gilt:

tan α = Gegenkathete / Ankathete

Diese beiden haben wir – die Gegenkathete ist die Höhe des Logos, die Ankathete ist die Breite. Originalbreite & -höhe des Logos kann man mit der PHP-Funktion getimagesize() auslesen.

tan α = h/b

α = arctan(h/b)

Damit haben wir den Winkel α – und dieser ist im Mini-Logo gleich wie in der Originaldatei! Und somit ist das Errechnen der restlichen Dreieckseiten im Mini-Logo wirklich einfach:

sin α = Gegenkathete / Hypotenuse

Die Hypotenuse ist der doppelte Kreisradius r (den wissen wir), die Gegenkathete ist die Logohöhe, die wir errechnen wollen. Somit ergibt sich:

sin Î± = h / (2 * r)

sin Î± * r * 2 = h 

Somit haben wir die Höhe des verkleinerten Logos, die sich innerhalb des Kreises ausgeht.

cos α = Ankathete / Hypotenuse

Die Hypotenuse ist wiederum der doppelte Kreisradius r , die Ankathete ist die Logobreite. Somit ergibt sich:

cos α = b/ (2 *  r)

cos α * r * 2 = b

Sinnvollerweise sollte man Höhe und Breite noch via PHP mit round() behandeln, damit ganze Zahlen rauskommen.

Um das Logo mit left und top zu positionieren, brauchen wir jetzt noch den Abstand des linken oberen Punktes des Logos vom linken oberen Punktes des Kreis-DIVs. Einfach: wir wissen den Kreisradius und die Logobreite und -höhe. Wie im Bild zu sehen ergibt sich also:

oberer Abstand = radius – h/2

linker Abstand = radius – b/2

Das Script um die Werte zu errechnen ist ziemlich einfach:

// Zuerst $radius und Dateipfad zum Logo definieren
$logofile = "/dateipfad/zum/logo.jpg";
$radius = 58; // in Pixel, entspricht der halben Höhe des DIV.kreis

// Originalhoehe / Originalbreite per getimagesize auslesen
if(file_exists($logofile)) $logosize = getimagesize($logofile);
$originalbreite = $logosize[0];
$originalhoehe = $logosize[1];

$tanAlpha   = $originalhoehe/$originalbreite;
$alpha      = atan($tanAlpha);

$logopos['hoehe']     = round(sin($alpha)*2*$radius,0);
$logopos['breite']     = round(cos($alpha)*2*$radius,0);
$logopos['x']     = $radius-($logopos['breite']/2);
$logopos['y']     = $radius-($logopos['hoehe']/2);

Die errechneten Werte nun noch dem Bild per PHP zuweisen – fertig:

<div class="kreis"><img style="position: absolute; left: <?php echo $logopos['x']; ?>px; top: <?php echo $logopos['y']; ?>px;" src="logo.jpg" width="<?php echo $logopos['breite']; ?>" height="<?php echo $logopos['hoehe']; ?>" /></div>

Da die Codes aber aus lauter scharf begrenzten Flächen bestehen, lassen sich die Grafiken in einwandfreier Qualität beliebig vergrößern(!) – etwas, das üblicherweise bei Pixelbildern überhaupt nicht zufriedenstellend funktioniert. So gehts (Update 18.10.2012!):

– QR-Code erstellen: idealerweise mit bereits möglichst hoher Kantenlänge, etwa 500 Pixel – einfach in eine beliebige HTML-Seite den Aufrufcode einbetten:

<img src="https://chart.apis.google.com/chart?cht=qr&chs=500x500&chl=http://www.beispiel.at" />

– QR-Code speichern: HTML-Seite im Browser anzeigen lassen, Bild speichern (Rechtsklick aufs Bild, „Bild speichern unter…“)

– QR-Code in Photoshop öffnen

– Bild zuerst in Graustufen („Bild -> Modus -> Graustufen“), danach in Bitmap umwandeln („Bild – > Modus -> Bitmap“) mit folgenden Einstellungen 1:1, Schwellenwert 50%, Auflösung 300 dpi

– Größe ändern: „Bild -> Bildgröße“ aufrufen, gewünschte Größe in cm oder mm eintragen und Auflösung auf 300 dpi belassen.

– Bild wieder in Graustufen zurückwandeln („Bild -> Modus -> Graustufen“), danach in CMYK.

Fertig – der QR-Code ist vergrößert, die Kanten sind nach wie vor scharf begrenzt.

Tipp: Wenn man das Bild im letzten Schritt im Modus Graustufen und auf gesperrter Hintergrundebene belässt und als TIFF speichert, kann man es danach in InDesign beliebig einfärben! Für den QR-Reader muss nur der Kontrast hoch genug sein (Blau auf weiß geht gut, gelb auf weiß eher nicht). Achtung: invertierte QR-Codes (also weißem Code auf dunklem Grund) können nicht von allen Readern einwandfrei gelesen werden!

(Danke an Kathi & Dejan für überaus konstruktive Anregungen zu diesem Thema!)

Einziger Punkt, der mir noch dabei gefehlt hat: wenn man position:absolute; im Stylesheet verwendet, so muss man diese Angabe durch position:static; ersetzen.

Heute wieder so ein Fall: auf der Website einer Kundin wollte der IE bis Version 8 keinen Facebook-„Gefällt mir“-(Like)-Button anzeigen. Auf jedem anderen Browser wurden die Buttons aber einwandfrei dargestellt. Die Lösung ist ziemlich einfach: der IE braucht zwingend eine XML-Namespace-Angabe im Quelltext, damit er weiß, was er mit den Facebook-Codes machen soll. Klingt kompliziert, ist aber super-einfach einzubauen (wenn mans weiß): einfach im <html>-Tag der betreffenden Website folgende Angaben hinzufügen:

xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraphprotocol.org/schema/

Der komplette Tag sieht dann also so aus:

<html      xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" >

Wenn innerhalb des Tags bereits andere Angaben drinstehen, dann hängt man die beiden einfach an.

Voilá – und der Like-Button funktioniert nun auch im IE8.