Wenn man mal eine Website offline benötigt dann hilft auf dem Mac das Tool Sitesucker. Damit lässt sich eine komplette Website heruntersaugen und offline zugänglich machen.

Sinnvoll für was? Ich pendle mit dem Zug zur Arbeit und bin ab und zu froh, wenn ich dann noch eine Website offline zur Verfügung habe.
Da mit dieser Technik auch alle Bilder und CSS Dateien mitgenommen werden, eignet sich das Tool auch um ein Archiv einer Website anzulegen. Ich habe es schon verwendet um ein Redesign umzusetzen und dabei die Logos oder Bildbestandteile der alten Site zu bekommen.

Auch für Browseroptimierung verwende ich das Tool recht oft: Ich hole mir die Seite welche z.B. im IE6 schlecht dargestellt werden. So kann ich lokal auf meinem Rechner die Dateien verändern und testen, bis ich eine entsprechende Lösung gefunden habe. Dann kann ich ohne grossen Aufwand das Live-Projekt updaten.

Nicht machbar: Die grenzen der Offline Version sind Tools und Datenbank Abfragen für dynamischen Inhalt. Logischerweise werden auch passwortgeschützte Bereiche nicht gesichert.

Link zu Sitesucker Mac OS X

Um ein Farbschema für eine Gestaltung zu erhalten gibt es verschiedene Wege. Ein mögliches Vorgehen ist, dass man ein markantes Bild als Ausgangslage nutzt und daraus seine Basisfarben entnimmt. Dies kann man manuell mit der Farbpipette tun oder man benutzt ein Tool dazu: Ein interessantes Werkzeug dazu ist die Website ColorSuckr.com.

Die Webapplikation analysiert Bilder und stellt dann daraus eine Farbpalette zusammen. Die Farbpalette kann man dann als Set in Adobe Photoshop, Illustrator oder InDesign laden ( .ase Adobe Farbpalette). Es werden auch die entsprechenden RGB-Werte und HEX-Werte angezeigt. Dazu die nächstliegende Farbe aus der websicheren Farbpallette. Für den Druckprozess ist eine manuelle Umwandlung im entsprechenden Gestaltungsprogramm erforderlich – ein gedruckter Farbfächer ist hier sehr hilfreich.

Die Bilder können praktischerweise bei Flickr gesucht werden oder man gibt die URL zu einem anderen Bild im Netz an. Das Bild muss online vorhanden sein, kann also nicht lokal via  Festplatte hochgeladen werden – schade.

Hier mein Test mit einem Bild aus Flickr – verwendetes Suchwort war “Deep Ocean”:

> Link zu ColorSuckr.com

Als Gestalter braucht man immer wieder Bilder…

Einige schöne Bilder bietet die Website SHOTSHOP.com für 30 EUR pro Bild. Dazu gleich in der bestmöglichen Auflösung. Die Bildqualität ist fein und das Angebot gut sortiert. Einige Phtotstock Konkurenten sollten ihr Sortiment auch besser straffen…

Auch gut finde ich, dass ein Copyright-Vermerk des Fotografen optional ist. Nicht jedes Design ist glücklich, wenn noch ein Copyright-Vermerk beim Foto parkiert werden muss.

So, und hier der Link zum selber gucken: SHTOSHOP.com

Ach ja. Und ganz nüzlich sind auch die Bildkollektionen. Hier stöbert man noch vorgegebenen Themen wie Kommunikation, Copy Space, Young Style oder Wild Life…

Es gibt einige tolle Add-ons für Firefox, die den Browser zu einem wichtigen Werkzeug für Webgestalter machen.

Extensions, Plug-ins oder Add-ons sind Zusätze zu Firefox die erweiterte Funktionen ermöglichen oder bestehende Funktionen leicht ‘korrigieren’. Dies sind meine 10 Favoriten:

FireBug

Sicher das wichtigste Tool für mich. Damit kann ich den HTML-Code oder CSS live editieren und sehen wie sich was auswirkt. War mir extrem hilfreich um CSS zu lernen und ist immer unverzitchbar um Fehler aufzuspüren.

>> download

Delicious Bookmarks

Irgendwann hört man auf, alle gesammelten Lesezeichen im Browser zu verwalten und nutzt ein Online-Tool dazu. So sind die Bookmarks von überall erreichbar und komfortabel durchsuchbar, da man sie mit Stichworten versehen kann. Ich habe mich für Delicious entschieden und bin ganz zufrieden damit. Damit das ganze dann aber auch noch praktisch in den Browser integriert ist, nutze ich das offizielle Add-on für die Verwaltung von Bookmarks mit Delicious.

>> download

Measure It

Das Pixelmessband: sehr praktisches Tool Objekte zu messen am Bildschirm. Oder schnell mal ein Gefühl bekommen, wieviele Pixel Raum nun 200 Pixel auf diesem Bildschirm einnehmen…

>> download

Web Developer Toolbar

Die nützliche Toolbar bietet Zugriff auf einige praktische Dinge. Damit kann ich zum Beispiel schnell Javascript deaktivieren, Quellcode einblenden, CSS-Files ansehen, den Viewport anpassen, alle DIV-Elemente umranden lassen, eine Liste mit verwendeten Farben der Website darstellen lassen etc.

>> download

Screengrab!

Screengrab ist eine Screenshot-Extension. Sehr hilfreich um überlange Seiten als PNG-Datei zu sichern. So hat man schnell einen Screenshot der ganzen Seite gemacht.

>> download

QuickFrame

Nützlich wenn man mit Websites arbeitet die Frames benutzen. Wenn ich nur ein Frame aktualisieren möchte, kann ich in den Framebereich klicken (rechte Maustaste) und «neu laden» klicken. Dank dem Plugin wird dann auch nur dieses eine Frame neu geladen. Hilft mir bei der Arbeit in meinem meistgenutzen CMS System.

>> download

Full Fullscreen

Wenn man mal so viele Addons und Toolbars vor sich hat und einfach «nur surfen» möchte, kann man mit Full Fullscreen einiges ausblenden und sich nur aufs surfen konzentrieren. Eine Vollbildansicht wird zwar nicht ganz erreicht – doch ist der Effekt schon recht praktisch. Die Umschaltung geschieht übrigens via rechte Maustaste «Toggle Fullscreen» – das hatte ich am Anfang nicht herausgefunden und dachte schon, das Plugin sei nicht aktiv.

>> download

FontFinder

Ein Textelent auf einer Website markieren und herausfinden, welcher Font, Grösse etc. dahinterstecken.

>> download

ColorZilla

Mit Colorzilla wird dem Firefox eine Pipettenfunktion hinzugefügt. Damit kann man nun auf einer Website die Farben messen. In der Statusbar (ganz unten) wird dann der RGB und der HEX-Wert dargestellt. Zudem kann man Farbfavoriten verwalten oder Farbschemas einblenden lassen und alternative Varianten wählen.

>> download

Copy Plain Text

Wie der Name schon sagt. Text kopieren ohne Formattierungen.

>> download

Wer noch tolle Ergänzungen weiss, der hinterlasse einen Kommentar!

Fertig mit der Sendepause im Juli. Nun gibt es wieder etwas mehr zu lesen im Typoblog. Hier schon mal ein Update der Milky-Icons welche ich in diesem Beitrag vom 25. Mai erwähnt hatte.

Im Moment gibt es nun 8 Teile diese Iconsets von Min Tran im Frexy-Blog. Langsam wird die kostenlose Sammlung umfangreich. Hier die Links dazu:

• Milky 1
• Milky 2
• Milky 3
• Milky 4
• Milky 5
• Milky 6
• Milky 7
• Milky 8