Webwork-Tools - Dem Webworker seine Werkzeugkiste

PlaceIMG: Generator für Platzhalter-Grafiken

Um ein Website-Layout dem Kunden ansprechend zu präsentieren, werden neben Texten auch Bilder benötigt. Wenn der Kunde bis dahin die Texte noch nicht fertig hat, greifen die Webdesigner schon seit ewigen Zeit auf Blindtextgeneratoren.

Hat der Kunde auch keine Bilder zu Hand, dann kann man seit einiger Zeit auch auf diverse Generatoren für Platzhaltergrafiken zurückgreifen. Mit lorempixel und Dummy Image haben wir bereits zwei solcher Generatoren vorgestellt. Mit PlaceIMG gesellt sich ein weiterer Kandidat dazu:

Der Generator bietet ein paar Extras. Man kann sich nicht nur die passende Bildgröße zusammenklicken sondern auch zwischen fünf Kategorien wählen und bestimmen ob das Bild in Farbe (Standard) oder in Graustufen oder als Sepia. Anschließend ist das Bild per Link aufrufbar oder man kann es sich herunterladen.

Dadurch, dass die Grafiken auch per Link aufrufbar sind, kann man auch selber ohne Hilfe des Generators auf die gewünschte Platzhalter-Grafik zugreifen, zum Beispiel:

http://placeimg.com/400/300/people/sepia

Nutzloser CSS3-Generator

Unter dem ironischen Namen Useless CSS3 Generator findet man einen weiteren Generator für CSS3-Eigenschaften:

Mit diesem Generator kann man für folgende Eigenschaften Code generieren:

• abgerundete Ecken
• Box- und Textschatten
• Opacity ("Durchsichtigkeit") und RGBA
• CSS3-Transformationen

Mit ProCSSor den CSS-Code übersichtlicher darstellen

ProCSSor ist ein Online-Tool mit dem man den CSS-Code übersichtlicher darstellen kann … oder es mal einfacher auszudrücken: damit kann man den Code "hübscher" machen.

Den CSS-Code kann man auf drei Arten angeben: direkt per Copy & Paste, in dem man eine Datei hochlädt oder in dem man auf eine URL verweist. Anschließend kann man nach mehreren Kriterien die Ausgabe sortieren. weiterlesen…

Generator für CSS3-Buttons

Auf "CSS3 Button Generator" findet man, wie schon der Name verrät, einen Generator für Buttons bzw. Grafiken, die durch CSS3 dargestellt werden.

Mittels diverser CSS3-Eigenschaften kann man Ecken abrunden, dem Hintergrund einen Verlauf spendieren, die Grafik neigen, zeitliche Verzögerungen einbauen und einiges mehr. Man kann die Angaben sowohl für den Normalzustand, wie auch für den hover-Effekt bestimmen.

Darunter wird der Code generiert, den man kopieren und in die eigene CSS-Datei einfügen kann.

Kinderleicht Hintergrundgrafiken & Muster erstellen

Mit Hilfe des Online-Tools patternify.com kann man sehr einfach Hintergrundgrafiekn bzw. Muster (engl. Pattern) erstellen.

Links oben kann man das Muster generieren oder unterhalb davon auf einen Satz vorgefertigter Muster zurückgreifen und diese anpassen. Rechts bekommt man das Ergebns in Form einer PNG-Grafik präsentiert oder als Base64-Code welches man direkt in die CSS-Datei einbinden kann.

Unten rechts kann man mit Klick auf Get Pattern URL kann man den Permalink generieren um später wieder zum gleichen Muster zurückkehren zu können.

Worte schön verpacken

Ich gestehe: ich mag sie ja. Ich weiß sie sind nicht jedermanns Sache, aber ich finde sie hübsch und ich schaue sie gerne an: Tagclouds oder auch Schlagwortwolken, von mir bevorzugt auf denglisch "Tagwolken" genannt.

Viele Blogs zum Beispiel setzen Sie ein um ihren Besuchern einen Überblick über die Themengebiete der Website zu geben. Diese Wolken sind dynamisch und setzen sich aus den Schlagworten/Tags eines Blogs zusammen.

Während Tagwolken auf den Tags, bzw. Schlagwörtern einer Seite basieren, die aktiv vergeben werden, kann man aber auch ähnliche Wolken erstellen, die einfach auf (nahezu) allen Wörtern basieren, die auf einer Website so vorkommen.

Mit den folgenden zwei Diensten hat man die Möglichkeit als Momentaufnahme solch eine Wolke zu erstellen, die dann einen Eindruck wieder gibt über die behandelten Themen einer Website. Ich nenne das ganze mal "Wortwolken". weiterlesen…

lorempixum – ein Bildgenerator der Extraklasse

Bildgeneratoren haben wir hier schon vorgestellt. Darunter war ein Generator, der nur Katzenbilder im Repertoire hat: placekitten und der Dynamic Dummy Image Generator ein "seriöserer" Vertreter seiner Zunft, bei dem man sich einfache farbige Grafiken generieren kann um sie in Webprojekten als Platzhalter einzusetzen.

Nun bin ich auf einen Bildgenerator gestoßen, der diese beiden meiner Ansicht nach in den Schatten stellt: lorempixum weiterlesen…

Zwei CSS3-Generatoren für Vendor-Präfixe

Wer häufiger CSS3-Eigenschaften wie zum Beispiel border-radius nutzt, der muss neben den originalen Angaben auch die Angaben der einzelnen Browser-Hersteller kennen, die durch einen Präfix eingeleitet werden. Aus border-radius wird dann -webkit-border-radius für Webkit-Browser (Safari, Google Chrome) und -moz-border-radius für Mozilla- bzw- Gecko-Browser (Firefox, SeaMonkey).

Wer sich die die Vendor-Präfixe nicht merken kann oder nicht merken möchte, der kann auf mindestens zwei Online-Generatoren zurückgreifen: CSSPrefixer und prefixMyCSS.

Beide Tools ergänzen CSS3-Eigenschaften um solche mit Vendor-Präfixen. Das prefixMyCSS bietet allerdings einen kleinen Vorteil: aktiviert man die Checkbox All in 1 line in der Mitte, dann wird der CSS-Code in einer Zeile ausgegeben, was für die Performance-Optimierung interessant ist, da es sich günstig auf die Größe der CSS-Datei auswirkt.

Achtung: Katzen-Content

Kleine Kinder und Katzen gehen ja fast immer. Und auf schönen Fotos machen sie eigentlich auch immer einen guten Eindruck. Diese Eigenschaft, verbunden mit der Tatsache, dass man beim Konzipieren einer Website auch Dummy-Bilder benötigt haben sich die Macher von {placekitten} zu nutze gemacht.

Sie bieten Katzenbilder als Platzhalter an. Dafür gibt man als Bild-URL lediglich

http://placekitten.com/

ein, gefolgt von der gewünschten Größe des Bildes, also z. B.

http://placekitten.com/200/300

für ein Katzenbild, das 200×300 Pixel groß ist.

Möchte man lieber ein schwarz/weiß-Bild haben muss man noch ein "g" in der URL unterbringen:

http://placekitten.com/g/200/300

Wer es lieber etwas langenweiliger seriöser mag, dem möchte ich den Dynamic Dummy Image Generator ans Herz legen, den Perun hier schon einmal vorgestellt hat: Generator für Platzhaltergrafiken

Via @hillens

RoboForm: Formular-Ausfüller, Passwort-Manager und -Generator

Während wir das Buch Werkzeuge fürs Web geschrieben haben, sind wir im Interview mit Gerald Steffens auf das Programm RoboForm aufmerksam geworden.

Gerald nutze RoboForm intensiv und war sehr angetan von dem Programm.

Einige Wochen später haben wir uns zwei Lizenzen gekauft und mittlerweile möchte ich auf das Programm nicht verzichten. Und was kann RoboForm?

Zum einen besitzt RoboForm einen leistungsstarken und anpassbaren Passwort-Generator (siehe die Abbildung). Zum zweiten besitzt RobForm eine ausgefeilte Passwort-Verwaltung in der nicht nur die Zugangsdaten gespeichert werden, sondern die registrierten Dienste auch als Lesezeichen abgelegt werden. Somit gelangt man wirklich mit einem einzigen Klick zu seinen wichtigen Diensten. weiterlesen…