Dem Link auf der Spur

geschrieben von carsten

Vor kurzem habe ich in meiner Webentwicklerwerkzeugtasche etwas entdeckt, dass mir bisher nie aufgefallen war. Einen kleinen unscheinbaren Link, eingebettet in eine ganze Liste, gleich aussehnder, kleiner, unscheinbarer Links, der auf den title All Smush.it™ hörte. Ich hatte mir vorgestellt, wie der Link mit Namen Smush.it die geöffnete Webseite, wie in einem Comic zersmushen, und zerboooomen würde. Die eckigen Klammern würden nur so durch die Gegend fliegen und überall läge bruchstückhafter Code, hier und da mal ein Rest zuckendes und flackerndes Javascript. Nach diesem Klick hätte man nirgends mehr ein penibel validiertes 3-Spalten Layout mit flüssigen Containern gefunden, nichts mehr, alles wäre gesmusht. Auf den ersten Klick offenbarrte sich mir jedoch noch nicht die wahre Größe, denn vielmehr ein neues reinweißes Fenster, welches seelenruhig auf die Eingabe einer Adresse wartete. Ich war enttäuscht. Das war gestern Abend.

Heute habe ich es dann noch einmal gewagt, anderer Ort, anderer Rechner, anderes Betriebssystem, anderer Browser. Ich navigierte durch meine Werkzeugtasche bis zu der Stelle, wo ich gestern Abend diesem heimtückischen kleinen Link begegnet war. Heute, ein neuer Tag, eine neue Hoffnung auf das große Smushen und keine Zeit zu verlieren. Ich klicke.

Wow, ich werde beeindruckt!
Vor mir entblättert sich eine Liste, wunderschöner kleiner Grafiken, Icons und Hintergrundbildern. Alphabetisch sortiert und um bis zu 83% gesmusht. Sagenhaft. Leider habe ich von all’ dem nichts mitbekommen, es war still, sofort nach meinem Klick entblätterte sich die Liste und ich habe nicht eine einzige eckige Klammer fliegen sehen.
Nichts für ungut. Nachdem sich jede Zeile dieser Liste mit dem Grad der Smushung in Prozent - scheinbar selbstständig - vervollständigt hatte, eröffnete sich mir eines Element.
Über der Liste bot sich mir hellgelb schimmernd, ein ehrwürdig anmutender Button zum Download all’ dieser, geboomt, gebangt und gesmushten Grafiken und Icons.

Das coole daran. Der ganze Spaß gehört zu YSlow, einer Firefoxentension, die mir auf diese Weise anbietet, alle Grafiken, etc. einer Webseite mit einmal zu reduzieren, zu komprimieren und zu guter Letzt zu smushen.
Das Ergebnis kann sich sehen lassen, selbst radikal klein gehaltene .pngs oder .gifs schrumpft dieses Werkzeug wie von Geisterhand auf einen unterschiedlich kleineren Wert. In Ausnahmefällen waren auch mal ein paar “No savings” Bemerkungen dabei, aber es war die Minderzahl. Über den Download bekomme ich nun alle meine Dateien in Ihrem Original Verzeichnisbaum zurück. Das ist ein cooler Spaß, weil ich auf diese Weise mit einem Schlag über 50kB Ladelast verloren habe. Verückt, dass ich das noch nie entdeckt habe, obwohl ich mit YSlow schon so lange arbeite.

Wer’s fachlicher mag, gebe in die Suchmaschine seiner Wahl “smush.it” ein und erfreue sich an der Fülle von Informationen.
Hinterher ist man immer klüger.

Kategorie: News | Trackbacks (0) | Permalink

Bloggen vom Desktop

geschrieben von Pawel

Es liegt eigentlich recht nahe. Warum immer erst in sein CMS oder Blogsystem einloggen, wenn es Desktopprogramme oder Erweiterungen gibt.

Unter Linux ist das leider sehr übersichtlich

Ein Fan der Firefoxerweiterung ScripeFire wäre ich endgültig dann, wenn dieser tatsächlich alle Felder nicht nur einlesen, sondern auch schreiben könnte.

Ich probiere gerade mal BloGTK. Das wirkt recht übersichtlich. Ich kann auf alle Benutzerfelder vom Blog über die MetaweblogAPI zugreifen und den Beitrag zunächst als Entwurf speichern.

Vielleicht blogge ich ja dadurch häufiger

Kategorie: News | Trackbacks (0) | Permalink

Ein Jahr Pixelfans - was hat sich verändert?

geschrieben von Pawel

Es ist über ein Jahr her, das wir mit Pixelfans an den Start gingen. Carsten und ich hatten Lust mal ein paar Dinge auszuprobieren.

Neben einem alternativen Blogsystem war vor allem die Absicht über unsere Experimente rund um das Webdesign zu schreiben und diese im Blog auch gleich auszuprobieren. Auch das Blogdesign haben wir immer wieder verbessert. Ein Jahr später schauen wir noch einmal auf die Artikel und die Webentwicklung seither.

Transparenzeffekte

Unser erster Artikel beschäftigte sich mit den Transparenzeffekten. Die CSS3-Eigenschaft opacity hielten wir schon für gut verwendbar, da es es auch einen workaraund für den IE gibt. Mit CSS spart man sich viele Bilder und damit (unnötige) Requests.Ein Nachteil ist es aber, das damit alle Kindelemente die gleiche Transparenz erhalten. Darunter leidet u.a. auch die Lesbarkeit von Schriften.

Für das Design ist deshalb die Verwendung von rgba viel besser, da dieses auch von Opera seit Version 10 unterstützt wird. Man kann einfach Farbe und Transparenz definieren. Alles rund macht schließlich der Tipp von Eric Eggert.

Twitter und Flickr mit PHP

Die Nutzung der API's war Bestandteil mehrere Artikeln mit nutzbaren Beispielen. Wir halten seit PHP 5.2 das JSON-Format für gut verwendbar und verwenden jetzt eher eigene kleine Klassen für unsere Anwendungen, da wir ohnehin nur eine Handvoll von Funktionen benötigen.

@font-face

Bei pixelfans.de haben wir sofort auf @font-face gesetzt, was zunächst noch sehr experimentell war. Mittelerweile unterstützen es die meisten wichtigen Browser. Den größten Komfort bietet fontsquirrel mit vielen fertige einsetzbaren Sets. Mit dem (kommenden) Firefox kommt ein neues Fontformat.

Webstandardsmagazin

Der neue Stern am Magazinhimmel war uns zwei Artikel wert. Das Heft ist immer noch ein bisschen experimentell (eine Linkliste gehört einfach zum Artikel und nicht ins Netz), bietet aber viele Anregungen und ist jetzt (auch) Pflichtlektüre. Ein umfassender Artikel über SVG steht immer noch aus.

SVG

Viele Artikel (mehr als wir ursprünglich dachten) drehen sich um dieses Grafikformat. Die Unterstützung der Webbrowser wird immer besser und mit dem AmpleSDK und Googles svgweb kann es auch für Seiten eingesetzt werden, auf denen viele Nutzer mit dem IE vorbeikommen.

Von mit Javascript erzeugter SVG halte ich prinzipiell wenig. Was soll der Vorteil sein, die Grafik komplett mit Javascript zu erzeugen? DOM-Manipulation via Script macht da mehr Sinn, ohne Javascript sieht man wenigsten noch das Bild. Wir stellten ein Beispiel für ein valides xhtml-Dokument ohne Javascript  vor, dass zwei Vektorgrafiken inline einbettet und damit für IE und andere Browser Vektorgrafiken direkt in der Website ermöglicht..

Zum Geburtstag haben wir uns auch das nebenstehende Bild spendiert, was natürlich mit Inkscape entstanden ist.

Kategorie: Ideen , Layout , News | Trackbacks (0) | Permalink