Webwork-Tools - Dem Webworker seine Werkzeugkiste



PixelZoomer: Lupe, Farbpciker und Maßband in Einem

Von Vladimir am 14. Juli 2010 um 09:15

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.

PixelZoomer im Einsatz

PixelZoomer: Lupenfunktion und Maßband im Einsatz

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

Von Vladimir am 30. April 2010 um 13:28

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

CSSDesk

CSSDesk im Einsatz

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

Von Vladimir am 12. April 2010 um 15:49

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

CSS3-Generator im Einsatz

CSS3-Generator: abgerundete Eckene erstellen

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

Von Vladimir am 12. März 2010 um 13:27

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.

Platzhaltergrafik generieren

Eine Platzhaltergrafik generieren

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

Von Vladimir am 14. Januar 2010 um 09:26

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.

Redesign von Webwork-Tools.de

Webwork-Tools: Bunt und in Farbe

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.

Verschachtelte Kommentare

Verschachtelte Kommentare und Antworten-Link

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

Von Vladimir am 16. Dezember 2009 um 18:26

Firebug (Logo) 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?

Von Thordis am 14. September 2009 um 14:29

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

Von Thordis am 25. September 2008 um 18:38

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…

Kommentare deaktiviert

Web Developer Toolbar 3

Von Vladimir am 09. September 2008 um 22:59

Das hier ist der dritte Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum zweiten Teil der Serie.

Der Hauptpunkt "Resize"

Fenstergröße ändern

Fenstergröße ändern

Dieser Bereich ist sehr wichtig wenn es darum geht das Layout bzw, die Website unter verschiedenen Fenstergrößen zu testen … es geht darum die verschiedenen Monitorgrößen mit unterschiedlichen Abmessungen zu simulieren. Hier ein paar Beispiele: 1280×1024 Pixel ist die Standardauflösung eines 19" LCD-Monitors, 1024×768 ist die Standardauflösung eines 17" Röhrenmonitors und 1280×800 ist eine sehr häufige Auflösung bei den 15,4" und den 14,1" Laptops.

Neben den bereits eingestellten Größen kann man beliebig weitere Größen einfügen. Dabei kann man entscheiden ob die Ausmaße sich auf das komplette Browserfenster oder auf den Viewport – den sichtbaren Bereich – beziehen. weiterlesen…

Web Developer Toolbar 2

Von Vladimir am 09. September 2008 um 09:00

Das hier ist der zweite Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum dritten Teil der Serie.

Der Hauptpunkt "Images"

Bilder einsehen, visualisieren udn manipulieren

Bilder einsehen, visualisieren und manipulieren

Dieser Hauptpunkt verbirgt einige sehr interessante Funktionen. Alle hier untergebrachte Funktionen haben etwas mit Bildern und Grafiken zu tun. Man kann die Grafiken ausblenden, die Pfade, Ausmaße, Dateigröße und die Inhalte der alt-Attribute ausgeben lassen. weiterlesen…

Archiv: «« 1 2 3 »»