Freizeitler Web [x.0] Blog: unkonventionell, unkommerziell, unabhängig…

Erster! Könnten Paul Irish und Divya Manian jetzt rufen, denn sie haben ein Framework veröffentlicht, dass nicht nur HTML5-fertig ist, sondern mit allem Schnickschnack aufwartet, den man für sein modernes Internetseiten-Projekt durchaus brauchen kann. Die HTML5 ★ Boilerplate.

Angefangen mit Print- und Handheld-Stylesheet, jQuery Anbindung, Cross-Browser-Unterstützung, .htaccess-Files für optimierte HTML5-Anwendung und Ladezeit bis hin zu IE6 png-Fixes bietet die Kochplatte ein Rundum-Sorglos-Paket, dass sich als Basis für zukünftige Web-Projekte durchaus anbietet. Sogar an SASS- und HAML-Schnittstellen wurde gedacht!

Wie bei allen Frameworks sollte man auch hier nicht vergessen immer auf die – für das laufende Projekt – wirklich relevanten Komponenten abzuspecken.
Die HTML5 ★ Boilerplate stellt somit eine interessante und übersichtliche Alternative zu gängigen Frameworks seiner Art dar und ich werde es auf jeden Fall testen und genauer unter die Lupe nehmen.

Neulich bin ich auf dem Blog von Soh Tanaka auf eine nette Spielerei gestossen. Ein HTML-Element mit einer fixen Position im Browserfenster (in diesem Fall eine Social Network/Info-Box). Klingt erstmal unspektakulär, allerdings ist es das spezielle Verhalten dieses Elements, dass die ganze Sache interessant macht und den Einsatz von jQuery erfordert.

Die Suche – der Weg ist das Ziel

Da gibt es doch bestimmt schon ein Snippet oder ein Plugin, denke ich mir, aber wie soll ich danach suchen? Also tippe ich bei Google jquery menü am oberen rand browserfenster ein und drücke den Suche-Knopf. Die deutschen Ergebnisse sind es nicht so, deswegen lasse ich mir die übersetzten, englischen Ergebnisse anzeigen. Das sorgt nicht nur für eine Menge Spaß, sondern bringt mich meinem Ziel ein ganzes Stück näher. Der Artikel Erstellen einer Floating HTML Menü mit jQuery und CSS kommt der Sache sogar schon verdammt nahe, allerdings will ich, dass das Element nach dem verlassen der Startposition am oberen Rand des Browserfensters hängt.
Jetzt weiss ich wenigstens wonach ich suchen muss und tippe Floating Menü mit jQuery. Treffer! Natürlich die jQuery Plugins.

Das Plugin

Und da ist sie also, die Smart Sticky Floating Box und sie lässt sich wunderbar einfach anwenden. Am unteren Ende der Funktion $.fn.stickyfloat kann man die ID des Elements, sowie die Dauer der Animation festlegen.

$('#navigation').stickyfloat({ duration: 200 });

Das fließende Element bewegt sich innerhalb seines Elternelements, in dem es absolut positioniert wurde. So kann man Start- und Endpunkt genau festlegen und es verläuft alles in geregelten Bahnen.
Das Ergebnis seht ihr ja jetzt (vorläufig?) live auf diesem Blog. Noch Fragen?

Wer ein bisschen Abwechslung im Webfont-Alltag sucht, sollte mal bei der Google Font API vorbeischauen. Es befindet sich noch in der Beta-Phase aber bietet jetzt schon 18 Alternativen zu den herkömmlichen Webschriftarten und das kostenlos und kinderleicht einzubinden.

Die Google Font Directory

Die Fonts wurden von von professionellen Designern extra für Google entworfen und sorgen so für Exklusivität. Die Palette der Google Font Directory reicht von sehr speziell bis fliesstexttauglich und es stehen verschiedene Schriftschnitte (Variationen) zur Verfügung. Über eine umfangreiche Vorschau (“The quick brown fox jumps over the lazy dog”) bis hin zum Character Set kann sich der Webworker einen genauen Eindruck über das Erscheinungsbild und die Tauglichkeit verschaffen.

Google Font API

Mit dem Google Font API lassen sich die Schriften leicht einbinden. Sie werden im Header der HTML-Datei referenziert und über das Stylesheet angewendet.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

font-family: 'Tangerine', serif;

Einfacher geht es nicht.

Google wird mit dem Font API wohl erneut viele Abhängigkeiten schaffen. Allerdings finde ich, dass die zur Zeit angebotenen Fonts eher für den semiprofessionellen Einsatz zu gebrauchen sind. Zum testen habe ich die Überschriften dieses Blogs mal mit der API-Schrift IM Fell formatiert. Geschmackssache.

Dem alten Designer-Hasen wird es wohl nur ein müdes Lächeln abringen aber mich versetzt es jedesmal wieder in Begeisterung. Durch einen kleinen aber sehr effektiven Kniff kann man dem unscharfen Bild oder der Grafik einen letzten Schliff verpassen und es für die Bildschirmdarstellung mehr “crispy” erscheinen lassen.

Auf die Einstellung kommt es an

Den Filter mit dem seltsamen Namen “Unscharf maskieren…” und seine Arbeitsweise möchte ich an dieser Stelle gar nicht abhandeln (mehr Infos dazu gibt es z. B. unter Verwenden von Photoshop CS4). Zu finden ist er unter Filter -> Scharfzeichnungsfilter. Wenn man ihn aufruft öffnet sich ein Popup-Fenster mit verschiedenen Einstellungmöglichkeiten. Die Werte, mit denen ich arbeite, sehen so aus:

Einstellung im Filter “Unscharf maskieren”: Stärke bis 500%, Radius 0.2 Pixel,
Schwellenwert 0 Stufen

Mit dem Wert “Stärke” sollte man experimentieren und zu oft darf man es nicht auf sein Bild anwenden, da es sonst zu einer Überschärfung kommt und es unrealistisch aussieht. Gerade bei verkleinerten Bildern macht es aber Sinn, da so die Details wieder sichtbar werden.

Eine Firma aus Seattle namens Spoon bietet unkommerzielle Applikationen im Internet an, auf die man kostenlos über ein Plugin zugreifen kann. Das ist deshalb so praktisch, weil man die Programme nicht installieren muss, sondern lediglich “streamt”.

Angefangen bei Media-Playern über Editoren bis hin zu Email-Programmen und sogar Spielen gibt es reichlich Auswahl, aber sehr bemerkenswert finde ich die Browser Sandbox. Sie bietet Webworkern die Möglichkeit, die gebastelten Seiten auf vielen gängigen Browsern zu testen. Hier gibt es den IE6 (warum erst jetzt?) bis IE8, die Firefüchse, Safari 3+4 und sogar Opera und Chrome. Diese öffnen sich nach der Installation des Plugins auf Knopfdruck im eigenen Browserfenster und stehen dann auch im vollen Umfang zur Verfügung.

Ob die Browser Sandbox hält was sie verspricht, wird sich zeigen, das Konzept von Spoon finde ich allerdings jetzt schon klasse. Es eröffnet die Möglichkeit jederzeit von jedem Ort aus eine Applikation auf einem beliebigen System zu nutzen.