Der Google Web Designer für Linux wird wie Chrome und Co. von Google als DEB- und RPM-Paket zum Download angeboten, das sich über die Paketverwaltung eurer Distribution installieren lässt. Offiziell unterstützt Google Debian, Ubuntu, Fedora oder openSUSE. Aber auch unter Arch  Linux lässt sich der Web Designer sehr einfach installieren, ein Eintrag im AUR hat nicht lange auf sich warten lassen. Wie werden Updates des Web Designer über ein Repository verteilt, man muss sich also nicht um Updates kümmern.

In meinen kurzen Tests läuft der Google Web Designer ohne Probleme, allerdings berichten diverse User der Anwendung, dass sie nur als weißes oder schwarzes Fenster auf dem Bildschirm erscheint. Dies scheibt besonders auf „nicht-englisch“ Systemen zu passieren. In diesem Fall hat das Web-Designer-Forum eine vorübergehende Lösung parat. Es soll helfen den Konfigurationsordner ~/.local/share/google-web-designer zu löschen und den Webdesigner mit englischsprachigen Locales neu zu starten. Andere Benutzer schreiben jedoch auch, dass selbst dieser Tipp nicht wirkt, man muss daher vielleicht noch ein wenig abwarten, bis die Anwendung richtig rund läuft.

$ rm -r ~/.local/share/google-web-designer
$ LANGUAGE=en_US google-webdesigner

Wenn ihr aber den Google Web Designer zum Laufen gebracht habt, dann bietet die Anwendung recht viele Funktionen. So lassen sich zum Beispiel 3D-Transformationen erstellen oder auch Animationen bauen, der Web Designer generiert dabei die Frames zwischen den von euch hinterlegten Bildern automatisch. Im erweiterten Modus lassen sich dann auch Ebenen und Keyframes steuern. Das folgende Video demonstriert die Fähigkeiten des Web Designers im Schnelldurchlauf. Weitere Informationen, Hilfen und Erklärbär-Videos findet ihr im entsprechenden Support-Bereich auf den Hilfe-Seiten von Google.

Hat man den dreh einmal raus, ist das Umgestalten eines Templates per CSS gar nicht so schwer, die größte Hürde dabei ist in meinen Augen das Referenzieren der entsprechenden Elemente. Muss ich jetzt bsp {…}, .bsp {…}, #bsp {…} oder .bsp p {…} in die style.css schreiben? Was bezieht sich eigentlich auf was?

Wer sich ungern auf selfhtml.org in die Thematik der CSS-Selektoren einliest, der findet im CSS Diner eine praktische CSS-Lernhilfe. In 26 Leveln gilt es den richtigen Selektor zu finden. Links im CSS Editor trägt man seine Lösung ein, rechts in der HTML-Ansicht sieht man den HTML-Code der Dinge, die auf dem Tisch liegen. Das ganze Projekt ist dabei Open-Source, der Code liegt auf einem Github.

Dazu nötig sind ein paar Zeilen wenige CSS-Code, den es gilt in die eigene Webseite einzubauen. Bei WordPress würde das Ganze also in die style.css eures Themes gehören. Unterstützt euer WordPress-Template Child-Themes, dann solltet ihr die Zeilen natürlich in dieses einbauen, so gehen euch die Änderungen bei einem Updates des Templates nicht verloren.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Habt ihr die Zeilen mit dem CSS-Code in euer Theme integriert, müsst ihr beim Einbetten des von euch gewünschten YouTube-Videos nun nur noch darauf achten, das Video-Container-Block-Element um den Iframe des Videos zu legen. Anschließend passt sich auch das YouTube-Video der Breite des Browsers an.

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

Da ITler fauler Menschen sind, die wiederkehrende Aufgaben lieber abkürzen, nutze ich für das Einbetten von Videos das WordPress Video Plugin. So lassen sich Online-Videos aus diversen Quellen deutlich leichter per Shortcode in das Blog einbinden. Für mich hat das aber nun auch den Vorteil, dass ich den Video-Container gleich allen bisher in das Blog eingebetteten Videos überstülpen kann. Dazu muss in der /wp-content/plugins/wordpress-video-plugin/videos.php lediglich der YouTube-Code angepasst werden, ich habe mich hier für die simpelste Lösung entschieden und baue das Block-Element einfach in die Iframe-Zeile ein.

// Youtube Code
...
define("YOUTUBE_TARGET", "<div class="video-container"><iframe width="###WIDTH###" height="###HEIGHT###" src="http://www.youtube.com/embed/###URL###?wmode=transparent" frameborder="0" allowfullscreen> </iframe></div>");

Das Ergebnis kann man zum Beispiel unter Mein Weg zu Arch… Teil1: Warum Arch? Warum die GNOME Shell gerne gleich hier im Blog ansehen. Am PC liegen die YouTube-Leisten in der Vorschau deutlich enger am Bild an und besonders auf mobilen Geräten fehlen die hässlichen Ränder jetzt komplett. Die Umstellung tritt besonders auf Handy im Hochkantformat hervor.

PC-Browser

Tablet Hochformat

Tablet Querformat

Handy Hochformat

Was ich nun aber festgestellt habe — so neu ist das Feature zugegebenermaßen nicht, aber man schaut sich ja auch nicht permanent nach neuen Anzeigenformaten um — ist, dass Google Adsense inzwischen auch einen eigenständigen Responsive-Anzeigenblock anbietet. Noch ist das Feature in einer Beta-Phase, doch ich habe es bei mit im Blog nun mal eingebaut und kann durchaus Positives über das dynamische Anzeigenformat berichten. Es funktioniert im „großen“ Browser und auch am Smartphone durch die Bank eigentlich sehr gut.

Auf dem Smartphone hat Adense die responsive Thematik so gelöst, dass Werbeblöcke automatisch dem gerade zur Verfügung stehendem Platz angepasst werden. Im unteren Screenshot seht ihr zwei unterschiedliche Format, die auf einem hochformatigen Display geladen werden. Dreht ihr das Display, dann wird schaltet Adsense auch das Anzeigenformat dynamisch um. Statt den schmalen Anzeigen, wird automatisch — ohne einen neuen Pageload — eine etwas breite Anzeige geladen, die über die volle Breite der Seite läuft, so fügt sich die Anzeige auch im Querformat ganz gut in die Webseite ein.

Von den responsiven Anzeigen profitiert aber in meinen Augen nicht nur die Darstellung auf mobilen Geräten, sondern auch der klassische Besucher, der nach vor mit dem PC-Browser auf die Webseite kommt — und der auch im Smartphone-Zeitalter noch am häufigsten vertreten ist — hat etwas davon. Auch am PC wird nun nicht mehr nur eine starre Anzeige im Format 468×60 und Co. geladen, sondern wie am Smartphone passt Google das Anzeigenformat auch bei größeren Displays dynamisch an. Besonders bei meinem Template hat das den Vorteil, dass ich nun endlich „passende“ Anzeigen im Blog habe, etwas das mich schön länger gestört hat. Die Adsense-Formate sind entweder breit und flach oder sehr quadratisch. Ein breites und etwas höheres Format gab es bisher nicht.

Zum Test habe ich die responsive Ads bei mir hier nun überall eingebaut, wer möchte kann sich die Darstellung etwa mit Screenfly in unterschiedlichen Formaten ansehen. Lohn sich’s? Kann ich noch nicht sagen — dafür ist die Änderung noch zu jung. Ist mir aber eigentlich auch ziemlich egal, ich habe lieber halbwegs passende Anzeigen im Blog, als hässliche Formate, die nicht passen. Eine Problematik ist jedoch, dass es einfach noch nicht genügen „responsive Anzeigen“ gibt. Allzu oft füllt Adsense die Slots mit gewöhnlichen Anzeigen auf, die zwar beim Umschalten in andere Auflösungen angepasst werden, aber eben auch nicht so gut ins Layout passen.

//PS: Noch ein kleiner persönlicher Kommentar am Ende: Nach wie vor möchte ich mich bei allen Lesern bedanken, die den Adblocker auf Linux und Ich deaktiviert lassen. Ich versuche hier immer nur solche Anzeigenformate einzubinden, die nicht zu sehr nerven. Layer-Ads oder großformatige Wallpaper-Anzeigen findet ihr bei mir nicht und werdet ihr auch in Zukunft nicht auf dem Blog sehen. Noch lieber sind mit Anzeigen, wie etwa aktuell etwa gerade die von Galileo Press, die ich ohne ein Anzeigennetzwerk direkt schalten kann. Solltet Ihr ein Gewerbe haben oder für ein Unternehmen arbeiten, das zum Linux-Umfeld des Blogs passt, dann könnt ihr mich gerne bzgl. einer Anzeigenschaltung kontaktieren!

Traffic

Die einfachste Art und Weise den Erfolg eines Blogs/einer Webseite zu messen ist sicherlich über den Traffic. Je mehr Pageviews, je mehr individuelle Besucher pro Zeit, desto erfolgreicher die Seite. Aus den Serverlogs lassen sich die Daten eigentlich ermitteln, die meisten Webhoster bieten auch praktische Analysefunktionen an. Doch wie steht das eigene Blog im Vergleich zu Anderen da? Diese Frage beantworten eine Reihe von Ranking-Webseiten, die sich unter Anderem speziell an Blogger richten. Die Webmaster der Blogs bauen ein kleines Bild in das Blog ein. Jeder Abruf des Bildes wird von den Ranking-Webseiten registriert und zu einer Statistik addiert.

blogoscoop… gibt es schon recht lange auf dem Markt. Webmaster können Ihr Projekt auf blogoscoop anmelden und die Seite über Tags klassifizieren. So kann man leicht ähnliche Blogs finden und das eigene Blogs mit diesen Blogs vergleichen. Webseitenbetreiber können die Veröffentlichung der eigenen Statistiken auf Wunsch aber auch deaktivieren.

TopBlogs… ist deutlich simpler gestrickt als blogoscoop. Blogs werden einfach nur in einer Reihe von Kategorien gesteckt. Tags wie bei blogoscoop sind nicht möglich.

bloggerei.de… erstellt primär tagesaktuelle Charts. Das Ranking wird um Schlag Mitternacht wieder auf Null zurückgesetzt. Die Top Blogs bzw. Top Themen des Tages sind daher immer aktuell. Viele recht große Blogs nutzen die Bloggerei um ihre Zugriffszahlen zu veröffentlichen.

Alexa… ist eigentlich auf den amerikanischen Markt spezialisiert. Früher wurden die Daten über eine Toolbar für den Internet-Explorer generiert, die angesurfte Seiten an Alexa übermittelt hat. Da sich heutzutage kaum jemand mehr solch einen Datenschutzgau freiwillig installiert, hat Alexa seine Algorithmen geändert und nutzt nun auch andere Quellen. Für kleine Projekte ist Alexa recht uninteressant, da man in den Top 100.000 Webseiten stecken muss, um an interessante Zahlen präsentiert zu bekommen.

WhatsYourPlace – Blograngliste… aggregiert die Zahlen aus Alexa zu einem Ranking deutschsprachiger Blogs. Alles in allem kein großes Kino, doch so bekommt man schnell eine Übersicht der Alexa-Rankings deutschsprachiger Blogs. Das Ranking wird jedoch nur im Abstand mehrerer Monate aktualisiert.

Verlinkungen

Viel interessanter als die reinen Zugriffszahlen ist die Verlinkung innerhalb der Blogosphäre. Die Relevanz und Güte eines Blogs spiegelt sich in der Anzahl der Backlinks anderer Blogs wieder. Je mehr ein Blog in anderen Blogs zitiert und verlinkt wird, desto höher ist meist die Relevanz des Blogs.

Technorati… die Mutter aller Blog-Suchmaschinen. Ähnlich wie Google durchsucht Technorati Blogs und zählt dabei Links zwischen den Blogs. Anhand dieser Links erstellt Technorati dann ein Ranking. Für deutsche Blogs ist Technorati jedoch nicht so interessant, da sich der Dienst eher auf die amerikanischen Angebote konzentriert.

Wikio… ist das deutschsprachige Pendant zu Technorati. Auch hier werden wieder Backlinks zwischen Blogs gesucht und in ein Ranking umgerechnet. Die Rangliste wird am Anfang eines jeden Monats aktualisiert und ist in verschiedene Kategorien aufgeteilt. Dazu bietet Wikio eine Blogsuchmaschine, Bewertungen von Artikeln und vieles mehr an.

deutsche blogcharts… die blogcharts konzentrieren sich wie Wikio auf deutschsprachige Blogs. Allerdings beschränken sich die Charts auf das Wesentliche: Die Rangliste. Eine Blogsuchmaschine, Berwertungen von Artikeln usw. gibt es nicht.

Rivva… ist ein relativ kleines Projekt, das sich jedoch einen hohen Status in der Blogosphäre erkämpft hat. Das Ranking basiert nur auf einer Gruppe manuell selektierter Leitmedien. Nur Betreiber von bereits gelisteten Blogs können weitere Blogs zur Aufnahme in das Ranking vorschlagen.

Seitwert

Seitwert… ist eine Art Metaranking. Seitwert berechnet anhand Statistiken von Google, Yahoo oder Alexa zusammen mit technischen Details und weiteren Faktoren einen „Seitwert“. Die Zahl ist natürlich recht willkürlich, da aber jede Seite an den selben Standards gemessen wird, ist ein Vergleich von Webseiten und/oder Blogs möglich.

Technisch

Beim Erstellen von Webseiten kann man viele Fehler machen. Die Seite soll frei von (X)HTML- oder CSS-Fehlern sein. META-Tags wollen richtig gesetzt werden. Usw… Gerade für „Hobby-Blogger“ mit wenigen oder gar keinen Kenntnissen in Richtung Webdesign und Suchmaschinenoptimierung sind diese Seiten wichtige Helfer, die den Aufbau der Seite analysieren und Ratschläge geben, was denn zu Verbessern wäre.

Seitenreport… stellt eine übersichtliche Zusammenstellung vieler technischer Details zusammen. Von der technischen Qualität, über Suchmaschinenoptimierungen bis hin zu Verlinkungen erfährt man vieles über den Stand des eigenen Blogs im Netz.

SeitTest.de… arbeitet ähnlich wie der Seitenreport von oben. Die Ergebnisse sind allerdings nicht sonderlich aufschlussreich, da nichtssagende Punkte ohne nützliche Hinweise vergeben werden.

GPS-Track via OSM in Webseite einbetten

Allerdings ist es etwas aufwändiger die OSM in eine Webseite einzubetten, bei Google Maps gibt es rechts oben direkt die Option den Code zum Einbetten der Karte in eine Webseite zu generieren, solche eine Option fehlt in der OpenStreetMap noch. Doch mit einem praktischen Skript von Rejo Zenger, klappt das auch mit der OSM in wenigen Minuten…

Ihr müsst nicht mehr tun, als Euren .gpx-Track auf Euren Webspace zu laden, und dann das Skript von Rejo Zenger verwenden. So muss man keine Skripte auf dem eigenen Webspace installieren. Letztendlich sieht der Code etwa so…

<iframe
src="https://rejo.zenger.nl/topo/osm/?fn=[url-der-gpx-datei]"
	width="[breite-des-eingebetteten-bildes]"
	height="[hoehe-des-eingebetteten-bildes]"
	frameborder="0">
</iframe>

…aus. Ihr müsst die URL zur .gpx-Datei, sowie Höhe und Breite der Karte eintragen. Das Ergebnis könnt Ihr hier betrachten…

Dabei werden automatisch die wichtigen Lizenzinformationen der OSM in die Karte eingezeichnet.

Höhenprofil generieren und einbetten

Optional könnt ihr auch ein Höhenprofil generieren das Ihr ebenfalls ohne den Einsatz von Skripten in Eure Seite einbetten könnt. Ich würde dazu gpxplot verwenden, das ebenfalls eine API bietet, die Ihr via…

<img src="http://gpxplot.appspot.com/api/0.1.2/plot?gpxurl=[url-der-gpx-datei]&output=png" alt="Elevation profile" width="600" height="400">

…nutzen könnt. Das Ergebnis ist ein Bild mit dem Höhenprofil und einer Skala. Achtet darauf für das Bild ein Höhen/Breiten-Verhältnis von 2/3 zu verwenden, also beispielsweise 400×600 Pixel, sonst werden die Schriften nicht schön skaliert.

Google Maps hat natürlich den Vorteil, dass der Betrachter der Webseite auf die Satellitenansicht umschalten kann, doch die sympathischere Lizenz und das bessere Kartenmaterial (wenn es um kleine Wege geht) machen in meinen Augen den Nachteil wieder wett. Man kann ja noch zusätzlich auf Google Maps verlinken.

Daher habe ich das kleine Projekt TuxSucht.de gestartet. Die Seite bindet die angepasste Suche von Google ein und durchsucht nur eine Auswahl an deutschsprachigen Foren rund um GNU/Linux, Blogs mit starkem Bezug zu Linux und auch eine Reihe von Shops, die sich auf Soft- und Hardware für Linux-Systeme spezialisiert haben. Mit de.uboontu.com gibt es zwar ein ähnliches Projekt, allerdings beschränkt man sich hier auf Ubuntu. Ein Limit das meines Erachtens viele Interessante Quellen außer acht lässt.

Solltet ihr interessante Domains vermissen oder zusätzliche Ideen haben, so würde ich mich freuen, wenn ihr mir diese zukommen lassen könntet. Ich habe ein paar „Regeln“ für die Aufnahme von Domains festgelegt, damit der Index nicht zu groß wird, all zu eng sehe ich die jedoch nicht. Ich hoffe, dass die Page dem einen oder anderem hilfreich ist.

Viel Spaß
Christoph

Mit Imagemagick, Gimp, optipng und pngcrush stehen ein paar Kandidaten zur Auswahl, die hier Besserung versprechen. Ersteinmal gilt es jedoch herauszufinden welches Programm am besten komprimiert. Als Vorlage benutze ich diesen Screenshot.

Ich denke das Bild ist ein gutes Beispiel für Screenshots von Anwendungsprogrammen. Im Original hat das Bild eine Größe von 68966 Bytes. Diesen Wert gilt es also deutlich zu verbessern.

Gimp

Als erstes muss sich Gimp beweisen. Am einfachsten reduziert man die Größe eines PNG-Bildes indem man die Farbpalette reduziert. Gimp kann eine optimale Palette erzeugen und so eine auf das Bild angepasste Palette produzieren. Die Funktion findet sich unter Bild | Modus | Indiziert | Optimale Palette erzeugen und schrumpft das Bild auf 27026 Bytes ein, d.h. das mit GIMP erzeugte Bild hat nur noch rund 39% der ursprünglichen Dateigröße ohne dass das Bild groß dabei leidet.

Imagemagick

Als nächstes kommt convert aus dem Paket Imagemagick auf die Testbank. Erst einmal versuche ich wieder die Farbpalette zu reduzieren.

$ convert -colors 16 orig.png convert_colors16.png
$ convert -colors 256 orig.png convert_colors256.png

Das Ergebnis ist unter aller Katastrophe, die Bilder sind größer als vorher. Das auf 16 Farben reduzierte Bild hat 103425 Bytes und das mit 256 Farben 184634 Bytes. Convert komprimiert wohl die Bilder nicht per Default, dies muss man mit der Option –quality erst aktivieren. 1000 steht dabei für die höchstmögliche Kompression.

$ convert -colors 16 -quality 1000 orig.png convert_colors16_quality1000.png
$ convert -colors 256 -quality 1000 orig.png convert_colors256_quality1000.png

Auch hier ist das Ergebnis wieder schlecht. Das 16 Farben Bild läuft danach mit 56196 Bytes in Ziel, das Bild mit 256 Farben mit 85889 Bytes. Ergebnis: convert kann keine optimale Palette erzeugen. Dadurch sieht das Bild schrecklich aus und ist dennoch größer als es sein müsste…

optipng

optipng ist ein Programm, dass speziell zum Optimieren und Verkleinern von .png Bildern geschrieben wurde. Es lässt sich in Ubuntu und Debian aus den Paketquellen installieren. Ich komprimiere einmal das „Original“ und einmal ein Bild, das ich vorher mit convert auf eine Palette mit 256 Farben komprimiert habe.

$ optipng -k orig.png
$ optipng -k convert_colors256_quality1000.png

Auch hier ist das Ergebnis wieder mager. optipng komprimiert die Vorlage auf 63539 Bytes, also auf rund 92% des ursprünglichen Bildes. Das Bild mit 256 Farben wird von 184634 Bytes auf 85620 Bytes komprimiert. Gut, wenn man sich die 50% Ersparnis ansieht. Doch schlecht, wenn man bedenkt, dass GIMP ein 27kb großes Bild erzeugen kann…

pngcrush

Alternativ zu optipng gibt es pngcrush. Das Programm findet man ebenso in den Quellen. Auch hier komprimiere ich einmal das Original und einmal das mit Convert auf 256 Farben reduzierte Bild.

$ pngcrush -c 3 -brute orig.png pngcrush.png
$ pngcrush -c 3 -brute convert_colors256_quality1000.png pngcrush_convert_colors256_quality1000.png

Das Ergebnis deckt sich praktisch völlig mit optipng. Einmal bekomme ich 63793 Bytes und einmal 85889 Bytes. Wieder alles deutlich größer als Gimp…

Script-Fu

The Gimp ist also wohl nicht zu schlagen. Kein anderes Programm schafft es auch nur annähernd in die Reichweite der Größenreduktion von Gimp zu kommen. Einen Haken hat die Sache allerdings… Ein paar Hundert Bilder in Gimp zu laden und sich durch die Menüs zu hangeln? Das wäre enorm viel Klickarbeit.

Aber wozu hat Gimp einen Modus mit dem man eigene Skripte ausführen kann? Mit Script-Fu kann man Gimp komplett über Skripte bedienen. Im uu.de Forum hatte mir ein guter Geist schon einmal ein Skript geschrieben, das für alle .png Dateien in einem Ordner eine optimale Palette erzeugt. Es hatte noch eine Fallunterscheidung gefehlt, die die Indezierung nur auf Bilder loslässt, die noch nicht indeziert wurde. Doch jetzt klappt das Wer so etwas sucht, der speichert das Skript…

(define (batch-generate-optimum-palette pattern
	dither-type
	palette-type
	num-cols
	alpha-dither
	remove-unused
	palette
	)

	(let* ((filelist (cadr (file-glob pattern 1))))
		(while (not (null? filelist))
			(let* (
				(filename (car filelist))
				(image (car (gimp-file-load RUN-NONINTERACTIVE filename filename)))
				(drawable (car (gimp-image-get-active-layer image)))
			)
			(if (= FALSE (car (gimp-drawable-is-indexed drawable)))
				(gimp-image-convert-indexed image dither-type palette-type num-cols alpha-dither remove-unused palette)
				)
				(set! drawable (car (gimp-image-get-active-layer image)))
				(gimp-file-save RUN-NONINTERACTIVE image drawable filename filename)
				(gimp-image-delete image)

			)
			(set! filelist (cdr filelist))
		)
	)
)

…in ~/.gimp-2.6/scripts/batch-generate-optimum-palette ab. Danach kann man es über

$ gimp -i -b '(batch-generate-optimum-palette "*.png" 0 0 256 TRUE TRUE "")' -b '(gimp-quit 0)'

ausführen. Alle .png Bilder, die sich im aktuellen Ordner der Shell befinden, werden dann automatisch optimiert. Legt man dazu noch ein Alias für die Shell an, so hat man ein perfektes Werkzeug um Bilder in großen Massen für das Web aufzubereiten. So habe ich hoffentlich noch etwas Zeit, bis ich den nächst höheren Hostingtarif wählen muss.

pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

…zur style.css des eigenen Themes hinzu, so bricht WordPress brav auch in Code-Tags gesetzte Zeilen um. Sicherlich nicht ideal für jede Page. Doch so mancher ist froh drum.