Webwork-Tools - Dem Webworker seine Werkzeugkiste

Ligthbox Matrix: das richtige Script finden

Ich war neulich auf der Suche nach einem Lightbox-Script, das eine gutes Verhältnis aus Performance und gebotenen Funktionen anbietet. Für diejenigen, die es nicht wissen: Lightbox nennt man Scripte, die die Bilder und andere Elemente versuchen ansprechend zu präsentieren.

auf der Suche anch einem geeigneten Script hat mit die Website mit dem Dienst The Lightbox Clones Matrix gute Dienste geleistet:

Die Suche nach dem richtigen Script kann man durch Aus-/Abwahl verschiedener Kriterien – welche JS-Bibliothek bzw. Framework kommt zum Einsatz, kann das Script Bilder gruppieren, Größe etc. – eingegrenzt werden. Klar, das Testen der einzelner Scripte kann das Tool nicht ersetzen, führt aber auf jeden Fall dazu, dass man schneller zum Ziel kommt, weil die absolut ungeeigneten Kandidaten von vorne rein ausgesiebt werden.

CSS 3.0 Maker: ein weiterer Generator

Ich habe im April einen CSS3-Generator beschrieben. Hier eine weitere Alternative: CSS 3.0 Maker.

Und was kann dieser CSS3-Generator?

• Border Radius: abgerundete Ecken
• CSS Transform
• Box Shadow: Box-Schatten
• Text Shadow: Text-Schatten
• Text Rotation
• RGBA
• @Font Face
• Outline Offset
• Transition
• CSS Gradient: Verläufe mit CSS

Mittlerweile zeigt auch dieser Generator nicht nur, welcher Browser was kann, sondern auch seit welcher bzw. in welcher zukünftiger Version er etwas können wird.

PixelZoomer: Lupe, Farbpciker und Maßband in Einem

Bei PixlZoomer handelt es sich um ein sehr interessantes Firefox-Addon für Webworker. Mit dieser Erweiterung kann man Aschnitte einer Website vergrößern, die Farbwerte auslesen und Bereiche und Abstände pixelgenau ausmessen.

Nach der Installation ist das Addon über den Icon in der Statusleiste und über das Kontextmenü aufrufbar. Es öffnet sich ein neues Fenster und in diesem wird die Website geklont und nun kann man Farbwerte auslesen, Zoomen und/oder Abstände ausmessen.

Auf der Website des Autors gibt es neben zusätzlichen Infos in deutscher Sprache auch ein Video in dem die Funktionen der Erweiterung demonstriert werden.

Entdeckt auf Twitter.

CSSDesk: Sandkastenspielchen mit CSS und HTML

CSSDesk ist ein Online-Tool und genauer gesagt ein "Sandkasten" wo man auf die Schnelle HTML und CSS-Regeln testen kann:

Zu dem Dienst gibt es nicht viel zu sagen. Links oben kommt das HTML, darunter die CSS-Angaben und rechts sieht man dann das Ergebnis.

Ganz oben kann man die Syntaxhervorhebung de-/aktivieren, Hintergrund auswählen, einen Permalink zu dem Kunstwerk generieren lassen oder man kann das ganze dann auch auf den eigenen Rechner herunterladen.

Das ganze ist zumindest in Firefox nicht sonderlich schnell und auch die Bearbeitung der einzelnen Codezeilen gestaltet sich sehr zäh, aber um ganz schnell etwas zu testen ist das Tool optimal.

Ach ja, wie erwartet funktioniert das Tool weder in Internet Explorer 6-8.

CSS3-Generator

Unter CSS3Generator.com findet man einen kleinen, aber feinen Generator, der verschiedene CSS3-Eigenschaften komfortabel erstellen kann.

Folgende Funktionen stehen zur Auswahl: Border Radius (abgerundete Ecken), Box und Text Shadow (Schlagschatten), RGBA, Multiple Columns (mehrspaltiger Text) und ein paar mehr. Bei allen Eigenschaften wird auch angezeigt, welche Browser dies auch unterstützen.

Wählt man Selectors aus, dann wird der Link zur CSS 3 selectors explained gezeigt, dort werden die neuen CSS3-Selektoren aufgelistet. Wählt man die Funktion Gradients aus, dann bekommt man einen Link zu einem anderen Generator wo man mit Hilfe von CSS3 Verläufe (engl. Gradients) erstellen kann.

Der Autor von CSS3Generator.com ist der Meinung das man das Rad nicht neu erfinden muss:

I was going to write a CSS gradient generator but then I found the CSS3 Gradient Generator which is does the job quite well.

Gefunden via @macx.

Generator für Platzhaltergrafiken

Erstellt man ein neues Layout oder will man Änderungen im selbigen testen, dann ist man oft auf Blindtext und Platzhaltergrafiken angewiesen. Um einen Platzhaltertext zu erstellen, kann man zwischen sehr vielen Blindtext-Generatoren wählen.

Bis vor Kurzem musste man sich mit den Grafiken selber helfen. Doch auch hier gibt es mittlerweile eine komfortable Lösungen: Dynamic Dummy Image Generator. In den letzten 1-2 Wochen habe ich in meinem Twitter-Account mehrmals über diesen Dienst lesen können, habe es aber immer vergessen ihn hier kurz zu erwähnen.

Die Bedienung ist Kinderleicht: Größe angeben, Text- und Hintergrundfarbe angeben, Format bestimmen und evtl. etwas Text eintippen. Das war's. Nun kann man entweder den generierten Pfad nutzen (z. B. http://dummyimage.com/600×400/000/fff.png) oder die Grafik auf den eigenen Rechner speichern.

Via Peter Kröner.

Neues Layout und neue Funktionen

Dieses Weblog existiert seit dem August 2008 und seit dem Zeitpunkt hatte es ein Provisorium als Layout. Daher wurde es an der Zeit, dieser Website ein ordentliches Design zu spendieren.

Mit der Ausarbeitung einer grafischen Vorlage habe ich Christina von Poser beauftragt und ich bin mit der Arbeit sehr zufrieden. Die Photoshop-Datei lag schon seit November auf meiner Festplatte und erst in den letzten Tagen hatte ich Zeit das Layout auch umzusetzen. Schande über mich. Aber so ist das halt, wenn am Ende des Monats noch so viel Arbeit übrig bleibt.

Nicht nur neues Aussehen, auch neue Funktionen

Die Gelegenheit habe ich dann auch gleichzeitig genutzt um den Weblog auch neue Funktionen zu spendieren. Im Zuge des Redesigns habe ich den Kommentar-Bereich modernisiert bzw. auf den Kommentar-Loop umgestellt, der mit WordPress 2.7 eingeführt wurde.

Dadurch ist es unter anderem möglich Kommentare zu verschachteln bzw. die Antworten auf Kommentare auch visuell zu hervorheben. Zudem gibt es unter jedem Kommentar einen Antwort-Link, mit dem man Bezug zu dem jeweiligen Kommentar nimmt.

Firebug: dem Webworker seine liebste Feuerwanze

Neben der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die mir unschätzbar wertvolle Dienste erweist, wenn es darum geht eine Website unter die Lupe zu nehmen und auf "Herz und Nieren" zu prüfen.

Auch wenn den allermeisten Webworkern die Erweiterung bekannt sein durfte, werde ich sie hier dennoch aus zwei Gründen beschreiben. Es gibt noch erstaunlich viele Webdesigner, die das Firefox-Addon nicht kennen und zudem wollte ich in Zukunft einige Erweiterungen (Extensions) für Firebug vorstellen und mich dann auf diesen Artikel beziehen. weiterlesen…

Wie sieht die Website auf dem iPhone aus?

Wie sieht die erstellte Website in den gängigen Auflösungen aus und was für eine Figur macht sie auf dem iPhone oder der Wii? Einfach anschauen bei: ViewLikeUs

Symbolfarben

Welche Farbe weckt welche Assoziation bzw. umgekehrt welche Farbe wird mit einem bestimmten Begriff assoziiert? Die Liebe ist rot, der Tod schwarz. Das sind noch herkömmliche Assoziaitonen, die jedem geläufig sind. Aber was ist mit dem Wort "Regierung"? Mit welcher Farbe wird das von den meisten Menschen in Verbindung gebracht? weiterlesen…