Webwork-Tools - Dem Webworker seine Werkzeugkiste

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…

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.

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.

Eine passende Domain finden

Das neue Projekt nimmt immer mehr an Gestalt an, einen Webauftritt wird es natürlich auch geben, allein die passende Domain fehlt. Ein wenig Inspiration bietet da der Namensratgeber von Domaincrawler. Hier gibt man ein Wort ein, wählt eine von 15 Kategorien (z. B. Web2.0, Familie, Firmenname, Shop) und bekommt dann Vorschläge für eine Domain geliefert. Im Anschluss kann man dann direkt prüfen, ob die Domain überhaupt noch frei ist.

Erwähnenswert sind zudem die folgenden Funktionen, mit denen man über eine Domain zusätzliche Informationen einholen kann:

• Google-Suche
• Recherche im Web-Archiv
• Nachschlagen bei woxikon
• Auskunft bei DPINFO
• Suchanfrage im Handelsregister

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.

Hilfe bei CSS

Auch wenn man kein CSS-Profi ist, benötigt man vielleicht ab und zu Hilfe bei der Gestaltung von Texten. Ideal ist da die Seite CSS Type Set. Hier gibt man einfach einen Text ein und kann diesen dann mit Hilfe von Buttons und Eingabefeldern "verschönern". Und während dessen wird ("live") der benötigte CSS-Code ausgegeben, denn man im Anschluss per Copy & Paste in sein eigenes Dokument übertragen kann.

Ein Anfänger-Tool, aber ich denke es könnte dem ein oder anderen auf die CSSprünge helfen

Via Notizblog.de