Kategorien
Essentials Icons & Fonts

20 Professionelle Fonts – Zum Nulltarif, kostenlos, nada

Kostenlose hochwertige Freefonts sammeln wir fleißig und regelmäßig. Denn wer nach einem schönen Schnitt sucht, wird entweder tief in die Tasche greifen müssen oder viel Zeit mit zahlreichen Fonts-Repositories verbringen, die eigentlich eher Quantität als Qualität liefern. Die Arbeit möchten wir unseren Lesern gerne abnehmen und präsentieren deshalb immer wieder die schönsten Perlen, die wir im Laufe der letzten Monate veröffentlicht haben oder die inzwischen aktualisiert wurden.

Alle unten aufgelisteten Schriftarten können kostenlos heruntergeladen und verwendet werden. Bitte beachten Sie, ein Blick in die Lizenzbestimmungen lohnt sich, um eventuellen Rechtsstreitigkeiten und Missverständnissen vorzubeugen.

Sketch Rockwell
Eine skizzenhafte, handgezeichnete Schreibschrift, die von Lukas Bischoff entworfen wurde und zum kostenlosen Download für PC und Mac OS X bereitsteht. Der Schnitt überzeugt durch unregelmäßige und elegante Konturen, die ihn informell, aber dennoch elegant und sehr deutlich erscheinen lassen. „Sketch Rockwell“ kann insbesondere in Überschriften wirksam eingesetzt werden. Die Schrift darf nur zu privaten Zwecken verwendet werden – etwa in Blogs.

Screenshot

Weitere Schreibschriften finden Sie im Beitrag 10 Handwritten Fonts You Can’t Miss, der unter anderem Estrya’s Handwriting und Imitation zum Download anbietet. Weitere professionelle kostenlose Schreibschriften finden Sie hier und hier.

Screenshot

Freebooter Script
Ein schöner Schreibfont mit eleganten, windenden Kurven. Beachten Sie, dass alle Buchstaben schön aneinander gepaart sind, wodurch das authentische kalligrafische Bild entsteht. Der Schnitt lässt sich insbesondere im Verpackungsdesign und in Retro- und Vintage-Designs einsetzen. Verfügbar in Formaten „PC Type 12, „PC True Type“ und „Mac Type 1“, doch leider nicht „OpenType“. Entworfen von Graham Meade.

Freebooter Script

Myndraine
Diese Schrift ist „work in progress“, zeigt aber jetzt schon einige interessante typografische Details und eignet sich ganz gut im Einsatz für Überschriften. Der Schnitt ist von Christopher Miller entworfen und enthält 182 characters. Auf den ersten Blick erinnert Myndraine an „Myriad Web“, hat jedoch deutliche Unterschiede, was vor allem in Fließtext deutlich ist. Einige Buchstaben „sitzen noch nicht richtig“ oder passen nicht ganz in das Schema wie etwa „p“ und „g“. Freeware, PC und Mac OS X-Versionen stehen zum kostenlosen Download bereit. [via]

Screenshot

Quicksand
„Quicksand“ ist eine sehr sorgfältig gestaltete serifenlose Schriftfamilie, die in verschiedensten Situationen zum Einsatz kommen kann. Entworfen von Andrew Paglinawan und kostenlos verfügbar. Es liegen insgesamt 7 Schnitte vor — Light, Bold, Dash, Book, Light Oblique, Bold Oblique und Book Oblique.

Quicksand

Gentium (specimen) und Gentium Basic | Lizenz (Open-Source)
„SIL International“, eine amerikanische wissenschaftliche Organisation zur Förderung des linguistischen Wissens, veröffentlichte vor kurzem die Release-Version von „Gentium Basic“ und „Gentium Book Basic“ – eine Modifikation der in 2004 veröffentlichen Schriftfamilie „Gentium“.

Die letztere wurde entworfen, um diversen ethnischen Gruppen eine hochwertige, gut lesbare und universelle Schriftart bereitzustellen, die neben klassischen Symbolen des lateinischen Alphabets zahlreiche Glyphen aus verschiedenesten Sprachen der Welt darzustellen vermag. Dies erklärt auch, weshalb SIL Gentium gerne als das „typeface for nations“ bezeichnet. Es ist erwähnenswert, dass beim Design ein besonderer Schwerpunkt auf den Symbolen aus der griechischen Sprache lag. Demnächst soll ein weiteres Release folgen, in dem kyrillische Glyphen sowie sämtliche Symbole aus Unicode 5.1 vollständig umgesetzt werden sollen.

Screenshot

Screenshot

Gentium Basic und Gentium Book Basic basieren auf dem Typodesign der Schnittfamilie Gentium, verfügen jedoch über zusätzliche Gewichte. Die “Book”-Familie ist ein wenig kräftiger und braucht mehr Platz zu ihrer Entfaltung.

Beide Familien verfügen über die Schnitte regular, bold, italic und bold italic. Der verfügbare Zeichensatz ist bei Gentium Basic und Gentium Book Basic jedoch wesentlich bescheidener als bei Gentium. Sie unterstützen nur „Basic Latin“ und „Latin-1 Supplement Unicode“, einige wenige, häufig eingesetze Buchstaben aus dem lateinischen Alphabet sowie einige diakritische Zeichen und die Interpunktion. Sowohl Gentium als auch seine Abkömmlinge können sicherlich sowohl in Fließtexten als auch in Überschriften für die optimale Lesbarkeit und ein glasklares typografisches Bild sorgen. Gentium und seine Nachfolger können ohne jegliche Einschränkungen in privaten und kommerziellen Projekten verwendet werden. Sie wurden vom britischen Typo-Designer Victor Gaultney entworfen.

Gentium ist open-source und kann beliebig modifiziert und weiterentwickelt werden. SIL ruft Designer explizit dazu auf, weitere Schriftarten auf der Grundlage von Gentium zu entwerfen. Die Organisation erhofft sich daduch viele frei verfügbare „reichhaltige“ Schnittfamilien, in denen das typografische Erbe unserer Kultur manifestiert wird.

Screenshot

Mayberry Pro SemiBold (Registrierung ist erforderlich)
AscenderFonts stellte vor kurzem den Schnitt „Mayberry Pro Semi Bold“ zum kostenlosen Download bereit. Der Schnitt gehört zur Schriftfamilie „Mayberry Pro“, die extra für die optimale Bildschirmdarstellung und Druckausgabe entworfen wurde. „Mayberry Pro“ ist eine humanistische serifenlose Schriftart, die ihre Stärke insbesondere in Nutzerschnittstellen (UIs), etwa in Web-Applikationen, zeigen kann. Um den Font herunterzuladen, muss man zuerst ein Anmeldeformular ausfüllen. Mayberry Pro wurde von Steve Matteson gestaltet.

Mayberry Pro SemiBold

Aller Sans | Specimen | Lizenz | Download
Henrik Birkvig gestaltete die serifenlose „Aller Sans“ im Rahmen eines Projekts, das durch das dänische Verlagshaus „Aller“ finanziert wurde – daher der Name der Familie. Die Schrift steht im Format „OpenType“ zum kostenlosen Download bereit und kann sowohl in privaten als auch kommerziellen Projekten kostenlos verwendet werden. Beachten Sie, es gibt Unklarheiten wegen der Lizenz.

Aller Sans

Birra Stout (Registrierung ist erfoderlich) | Specimen
Seine Ausmaße hat „Birra Stout“ den Einflüssen der Kalligrafie des frühen 20. Jahrhunderts zu verdanken. Der Schnitt hebt sich durch breite handgezeichnete Formen hervor, die gerne groß, stark und überwältigend wirken. Entworfen und veröffentlicht durch die Typedesign-Agentur „Darden Studio“. OpenType.

Birra Stout

Museo Sans
Jos Buivenga veröffentliche die Sans-Version seiner Schriftfamilie Museo. „Museo Sans“ ist ein kräftiger Schnitt, der schwache Kontraste aufweist und durch präzise geometrische Formen stark geprägt ist. Er wurde insbesondere im Hinblick auf die Lesbarkeit entworfen und passt demnach ausgesprochen gut für die Darstellung auf dem Bildschirm und in Fließtexten. Die OpenType-Familie unterstütze europäische Sprachen und sogar Esperanto. Darüber hinaus kann der Schnitt elegante Ligaturen und „oldstyle“-Zahlsymbole aufweisen. Die ganze Familie besteht aus 10 Schnitten: 5 Gewichte (100 300 500 700 900) und dazu kommen noch Kursive zu jedem Gewicht. 2 Schnitte können kostenlos heruntergeladen werden (500/500 italic). Eine Registrierung ist erforderlich, um die Schrift herunterzuladen.

Screenshot

Screenshot

FF Nuvo OT Medium | Herunterladen
Ein klassischer, sauberer Schnitt mit schönen Ligaturen, die der Schrift einen soliden Eindruck verleihen. Entworfen von Siegfried Rückel. Diese Schrift ist ein Beispiel für modernes Typodesign mit einem starken vertikalen Kontrast und kalligrafischen Einflüssen (siehe die Symbole „a“, „g“ und „y“). Am besten ist die Schrift für Überschriften geeignet, aber auch im Fließtext kann sie ihre Lesbarkeit gut ausnutzen. Auch in der Werbung, im Verpackungsdesign oder in Corporate-Designs ist sie durchaus geeignet. Der Schnitt kann zu privaten und kommerziellen Zwecken verwendet werden und steht nur kurze Zeit zum kostenlosen Download bereit. OpenType.

Screenshot

The Fell Types
Igino Marini hat sich die Mühe gemacht und einige klassische Frakturen und Schriften mit Ligaturen, Ornamenten und Zierbuchstaben mittels iKorn digitalisiert. Als Vorlage nutzte der Typodesigner Schriften aus den 17.-19. Jahrhunderten (Stilrichtungen Black Letter und The Roman Italic). Das Ergebnis stellt der Typodesigner nun zum kostenlosen Download bereit — in Formaten TrueType und OpenType. Um die Schriften verwenden zu können, müssen Sie die Anmerkung «The Fell Types are digitally reproduced by Igino Marini. www.iginomarini.com» in Ihre Werke einfügen. Das Archiv enthält insgesamt 13 Schnitte, darunter 8 reguläre Gewichte und 7 Kursive. [via]

Screenshot

Megalopolis Extra | Specimen | EULA License
Eine eigentümliche moderne, und dennoch klassische Schriftart mit vielen Unregelmäßigkeiten, Ligaturen und einem großen Zeichensatz mit verschiedensten Stilen. Im Fließtext lässt sich „Megalopolis Extra“ definitiv nicht einsetzen, dafür aber in Plakaten, im Verpackungsdesign und in Überschriften. Mit ihren geschwungenen Glyphen zieht sie die Aufmerksamkeit auf sich und kann dadurch gewisse Botschaften der Seite attraktiv und originell kommunizieren. Die Schrift steht zum kostenlosen Download bereit und darf im Rahmen der EULA-Lizenz zu privaten und kommerziellen Zwecken verwendet werden. [ via ]

Sketch Rockwell

Sansation
Ein moderner serifenloser Schnitt mit interessanten, ungewöhnlichen Details. Die Glyphen weisen Unregelmäßigkeiten auf, wie etwa das „t“, „A“ und „k“, die in dieser Gestalt im Fließtext nur selten auftreten. Entworfen von Bernd Montag und verfügbar für PC und Mac OS X. „Sansation“ darf in privaten und kommerziellen Projekten ohne jegliche Einschränkungen verwendet werden.

Advent

Miso | Vorschau
MISO ist eine kompakte und gut lesbare Schriftart, die sich vor allem zu Annotationen und Anmerkungen eignet (etwa in Bauplänen – deshalb wird MISO als „architectural lettering font“ bezeichnet). Entworfen von Mårten Nettelbladt und verfügbar in drei Gewichten (light, regular, bold). Formate: TrueType und OpenType.

Miso

Rally Character Set | Specimen | Vorschau | Download
Lukyan Turetsky veröffentlichte einen Zeichensatz mit Rallye-Symbolen- und Icons. Die Schrift enthält klassische Schilder und Verkehrszeichen, Infografiken u.a. „Rally Character Set“ steht als OpenType zum Download bereit und kann in privaten und kommerziellen Projekten verwendet werden.

Rally Character Set

Weitereführende Links

  • 30 Free Grunge Fonts
    Eine umfangreiche Sammlung von Grunge-Schriften. In der Liste sind unter anderem Grunge Serifa und BB Petie Boy vertreten. Weitere Grunge-Freefonts.
    Screenshot 

    Screenshot

  • 21 Awesome Free Fonts
    Abduzeedo präsentiert eine Sammlung von ungewöhnlichen, kreativen Schriften. ™
Kategorien
Essentials Freebies, Tools und Templates

Massenweise MySQL – Verwaltungstools

Es ist noch nicht solange her, da gab es von „MySQL AB“, dem Hersteller des beliebten Datenbanksystems keine brauchbare Verwaltungslösung mit grafischer Oberfläche. Ich kann mich noch sehr gut an meine – vor allem dank dieses Umstands – schmerzhaften, ersten Schritte in MySQL erinnern. Vermutlich vornehmlich aus dem eigenen Leiden heraus, begannen viele Programmierer, aber auch ganze Softwarehäuser, eben diese Verwaltungs-GUI in unterschiedlichster Ausprägung nachzurüsten. Auch zum jetzigen Zeitpunkt gibt es gute Gründe, eine der Alternativen zu nutzen, obschon MySQL AB mittlerweile eine vernünftige eigene Lösung vorgelegt hat. Folgend liste ich ein gerüttelt Maß an kostenlosen MySQL-Tools auf…

Logo

Offline-Tools

Offline-Tools verfügen über den Vorteil, den Feature-Reichtum handhabbarer zu gestalten, als dies bei einem Online-Tool auf dem Stand der aktuellen Web-Technik möglich wäre. Immerhin sind SQL-Verwaltungsaufgaben stets solche, die umfassenden Dateizugriff benötigen. Hier die Besten:

  1. MySQL Administrator, sowie weitere GUI-Tools: Das Original aus dem Hause „MySQL AB“ ist verfügbar für die Betriebssysteme Windows, Mac OS und diverse Linux-Derivate. Die GUI-Tools sind kostenfrei erhältlich.
    Screenshot
  2. YourSQL: Ein Verwaltungsprogramm für das Mac OS. Es läuft sowohl auf der PPC- wie auch auf der Intel-Plattform. Allerdings hat der Entwickler seine Tätigkeiten weitestgehend eingestellt. Zur Zeit ist es dennoch (noch) ein Tipp.
  3. SQLYog Community Edition: Der kleine Bruder des kommerziellen „SQLYog“ reicht für die Standardverwaltungsaufgaben völlig aus und steht kostenfrei zum Download bereit. Die Bezahlvariante bietet für einen Preis ab $79 Komfortfunktionen wie einen visuellen Queryeditor, umfangreiche Migrationtools, Codecompletion, sichere Verbindungsmöglichkeiten per Tunneling oder SSH sowie Backups nach Zeitplan und weitere Kleinigkeiten.
  4. Navicat: Auch das flexible Navicat gibt es für die Betriebssysteme Windows, Mac OS (Universal Bindary) und Linux, sowie Solaris. Die kostenfreie Variante dieses Tools hört auf den Namen Navicat Lite. Navicat Lite darf nur nicht-kommerziell genutzt werden. Für Navicat spricht, dass es in verschiedenen Sprachen, darunter Deutsch vorliegt. Navicat Lite verfügt über eine große und leidenschaftliche Anhängerschar. Der Hersteller empfiehlt, zunächst die 30-Tage-Testversion des Vollproduktes zu installieren, wenn man die Lite-Variante nutzen will. Honi soit..
  5. Access To MySQL: ATM nimmt sich eines sicherlich häufigen Tasks im Arbeitsablauf eines Web-Entwicklers an, der Konvertierung einer Access-Datenbank nach MySQL bis zur Version 5. Die Konvertierung findet Assistenten gesteuert statt, Fehler sind nahezu ausgeschlossen. Zwar kann man von Access nach MySQL auch mittels des Migration Tools aus den GUI-Tools von MySQL AB kommen, allerdings ist der Weg über ATM gerade für weniger geübte Migranten weniger holprig.
  6. HoneyMonitor: Ein rein für Windows-Systeme entwickeltes System, dessen Free-Komponente nur einen kleinen Teil dessen abbildet, was HoneyMonitor eigentlich ist. Wie der Name schon sagt, geht es bei HoneyMonitor hauptsächlich um das laufende Monitoring stark beanspruchter Datenbankserver. Zielgruppe ist der hauptamtliche Datenbankadministrator. Dennoch gehört der HoneyMonitor Free in diese Übersicht, da er ebenso kostenfrei Basis-Verwaltungsaufgaben unterstützt. Die Vollversionen beginnen bei Preisen ab €129.
  7. HeidiSQL: Ein Verwaltungstool (Donationware), das es als Windows und als Java-Variante (jHeidi) gibt. Obschon es sehr schlank ist, beinhaltet es Funktionalitäten wie Code-Completion und DB-Synchronisierung sowie einen visuellen Query-Editor, die sich andere Anbieter teils teuer bezahlen lassen.
  8. EMS SQL Manager for MySQL Freeware: Dieses Windows-Produkt setzt der Autor ein. Nicht, weil es wesentlich feature-reicher als vergleichbare kostenlose Produkte wäre, sondern lediglich wegen des Ease Of Use. Ich empfinde das Bedienkonzept als relativ intuitiv und so kann ich, selbst wenn die letzte Verwendung einmal einige Wochen her gewesen sein sollte, stets problemlos die Aufgaben erledigen, die ich jeweils zu erledigen beabsichtige. Die Vollversion mit weiteren Features wie Visual Queryeditor et cetera kostet ab rund €100 bei nicht-kommerzieller Nutzung, sonst gut 60 Euro mehr. Schon die Freeware unterstützt MySQL bis zur Version 6.
  9. Nerocode MySQL Client Free Edition : Ein Freeware-Client, der nicht mehr über den Hersteller bezogen werden kann. Dort findet man lediglich das kommerzielle Produkt „SQLwave“. Zum Glück gibt es Download.com. NMC ist eine Windows-Anwendung und unterstützt MySQL bis 5.04. Tabellennamen, die mit Großbuchstaben beginnen, werden von NMC nicht erkannt. Dies beiseite gelassen, lobt die Internetgemeinde vor allem die Einfachheit der Bedienung.
  10. DreamCoder for MySQL Free Edition: DC steht für die Windows-Plattform bereit. Im Vergleich zu anderen Tools kann DC funktional in der Free-Version nicht mithalten. So ist nicht einmal ein simpler Import vorhandener Tabellendaten möglich. In der kostenpflichtigen Variante ab $80 hingegen findet sich wieder ein zeitgemäßes Featureset.
  11. DBManager Freeware for MySQL: Dieses englischsprachige Tool für die Windows-Plattform unterstützt MySQL 3 bis 5 und darf in der Freeware-Version nur für nicht-kommerzielle Zwecke verwendet werden. DBManager wird seit langer Zeit entwickelt. Entsprechend ausgereift ist es. Kommerzielle Nutzer greifen zur rund 70 USD teuren Pro Enterprise Verson, die allerdings ebenfalls noch nicht MySQL 6 unterstützt. Dabei fällt mir auf, dass die Innovationsgeschwindigkeit bei DBTools etwas gelitten zu haben scheint (siehe latest news ).
  12. FreeMyCon: Auch dieses Windowstool hat eine lange Entwicklungsgeschichte. Bereits seit rund 10 Jahren schraubt der Hersteller „Scibit“ an MySQL-Clientsoftware herum. Man rühmt sich damit, in FreeMyCon etliche Features zu bieten, die es so bei keinem anderen Produkt geben soll. Für mich ist FreeMyCon aus dem Raster gefallen, als ich der Feature-Matrix entnahm, dass schon das simple Create Table nicht unterstützt wird. Dafür ist es in der Lage, etliche Formate bereits in der Free-Version zu importieren, so zum Beispiel Excel. Da der Downloadlink reichlich versteckt ist: Klick hier, lädt FreeMyCon herunter.
  13. MyDB Studio: MyDB Studio (MDS) ist der Maulheld unter den freien MySQL-Tools. Momentan wird auf der Website eine AIR-Version der Software angekündigt. Die letzte Ankündigung indes datierte aus Ende 2006 und kündigte das baldige Erscheinen einer neuen Version an. Keine weiteren News seither. Angenommen, die AIR-Anwendung kommt tatsächlich, dürfte MDS in kürzester Zeit eine erkleckliche Anhängerschar aufbauen. Denn in der Tat bietet MDS ein nahezu vollständiges Featureset für Noppes. SSH-Tunneling, Database-Synchronization, PHP-Support und einige andere, bei anderen kostenpflichtige Funktionalitäten. Und mit AIR wäre auch der Schritt Cross-Plattform gegangen, während die aktuelle Version nur unter Windows läuft.
  14. Oracle SQL Developer: Eigentlich gebundelt mit Oracles eigener Datenbanklösung ist der SQL Developer auch einzeln und noch dazu kostenlos erhältlich. Durch die Unterstützung etlicher Datenbanksysteme eignet er sich besonders für Admins in heterogenen Umgebungen Er liegt in Versionen für Windows, Linux (RPM) und Mac OS vor.
  15. Sequel Pro (SP): SP ist die optisch eleganteste Lösung, wenn man Mac OS X-Anwender ist. Es kommt im Leopard-Look daher und bietet die Standardverwaltungsfunktionalitäten lückenlos und mängelfrei. Da es zudem völlig kostenfrei ist, spricht für den Mac-Anwender im Grunde nichts gegen diese Software. Für Verwender eines älteren Mac OS X steht nach wie vor der Vorgänger CocoaMySQL auf derselben Seite zum Download bereit.
  16. Toad for MySQL Freeware: Toad ist ein System, das ausschließlich für Windowsrechner verfügbar ist und für volle Funktionalität das .NET-Framework 3.0 benötigt. Damit ist es erst ab Windows XP und jünger lauffähig. Unter Verzicht auf Funktionsteile reicht .NET 2.0, welches es auch für Win2K gibt. Toad ist englischsprachig und erinnert optisch eher an eine Programmierumgebung wie das Visual Studio oder Eclipse, was Programmierern entgegenkommen, Gelegenheitsadmins die Sache aber nicht unbedingt erleichtern wird. Toad gibt es in verschiedenen Geschmacksrichtungen. Zur Zeit werden neben MySQL noch DB2, Oracle und MS SQL unterstützt.

Online-Tools

Auch, wenn jetzt der geneigte Leser sicherlich spontan an phpMyAdmin denkt und damit treffend den absoluten Platzhirschen unter den MySQL-Onlinetools identifiziert hat, sollte er nicht den Fehler machen und den Fall damit für erledigt erklären. Auch neben PMA gibt es bemerkenswerte Tools für verschiedene Aufgaben. Hier die Besten:

  1. phpMyAdmin (PMA): Natürlich darf in dieser Übersicht das populäre Datenbankverwaltungssystem PMA nicht fehlen. Da es von allen mir bekannten Hostingprovidern standardmäßig installiert und als Verwaltungslösung für MySQL-Datenbanken vorgehalten wird, dürfte es sich um das meist verwendete Tool überhaupt handeln. Nicht einmal die professionellen Offline-Tools werden über eine ähnlich große Nutzerbasis verfügen. PMA kann im Grunde alles, bis auf einige wenige Kleinigkeiten, die aber wiederum nur wenige Admins benötigen. Durch die Omnipotenz ergibt sich eine Funktionsvielfalt, die gerade für Einsteiger nur schwer zu beherrschen ist. Allerdings ist die Dokumentation äußerst umfassend und die Community sehr rege. PMA liegt in 55 Sprachen vor und unterstützt MySQL bis zur jeweils aktuellsten Version.
  2. phpMyIDE (PMI): PMI versteht sich als Ergänzung zu PMA und fokussiert sich aus diesem Grunde auf diejenigen Bereiche, in denen PMA nicht zu glänzen vermag. PMI will der Platzhirsch werden in Sachen Stored Procedures, Stored Functions und Triggers. Leider ist das Projekt nach einem ersten Kickstart im Mai/Juni dieses Jahres aktuell nicht mehr sehr rege. Dennoch ist PMI derzeit noch einen Blick wert, wenn man Bedarf an den genannten Funktionalitäten hat.
  3. SQL Buddy (SB): SB ist ein direkter Wettbewerber zu PMA und sieht auch so aus. Das relativ kleine Entwicklerteam macht einen ambitionierten Eindruck und hat das Projekt kürzlich zu Google Code umgezogen. Mittlerweile liegt SB in 12 Sprachen vor, unterstützt auch SQLite und sieht durch den Einsatz jeder Menge AJAX deutlich angenehmer aus als der Platzhirsch PMA. Funktional reicht SB noch nicht an den großen Bruder heran. Die Professionalität der Herangehensweise der Entwickler lässt jedoch hoffen.
  4. WWW SQL Designer (WSD): WSD muss man gesehen haben, um es verstehen zu können. WSD ist eine auf eigenem Webspace zu installierende Onlineanwendung auf der Basis von PHP und JS, die visuelles Datenbankdesign ermöglicht. Relationen werden grafisch dargestellt, Tabellen und Felder können angelegt, gelöscht und editiert werden. WSD kümmert sich um alle Tasks, die erforderlich sind, um ein relationales Datenbanksystem sinnvoll zu designen. Der Entwickler ist fleißig und hat soeben die Version 2.3 veröffentlicht. Dieser fügte er PostgreSQL-Support hinzu. SQLite und MySQL konnte WSD schon vorher.
  5. MySQL Sidu (MSS): Sidu steht für „Select Insert Delete Update“ und beschreibt insofern ganz gut den Funktionsumfang des Tools. MSS soll in der Endausbaustufe Werkzeugen wie PMA und SQLyog den Rang ablaufen. Bislang leistet es das mindestens optisch. Der Funktionsumfang wird dem Standardadmin absolut ausreichen. MSS ist unbestreitbar optisch angenehm und entspricht im Look & Feel der Ubuntu-GUI. Derzeit liegt es in den Sprachversionen Englisch, Italienisch und Chinesisch vor, benötigt einen Webserver mit Apache und PHP und wird nur noch spärlich fort entwickelt. Nach Aussage des Entwicklers liegt das an der Reife des Produkts.
  6. phpMySQLConsole (PMC): Das ist das real thing! PMC ist eine Konsolen-Anwendung für den echten Puristen. Realisiert mit PHP und JS und installiert auf dem eigenen Webspace kann man aus einem Browser-Fenster heraus Konsolenbefehle auf seine Datenbanken abfeuern. Gut für GUI-Hasser, die keinen Shell-Zugang zu ihrem Datenbankserver haben.
  7. mysqldumper (MSD): MSD ist im Grunde ein Spezialwerkzeug zum Sichern großer Datenbanken unter Umgehung des Laufzeitlimits bei Scripts. MSD arbeitet in Tranchen. Es sichert Teile der DB, merkt sich wie weit es gekommen ist und startet sich an dieser Stelle neu. So spielt Scriptlaufzeit keine Rolle mehr. In gleicher Weise funktioniert das Zurücksichern. Nach eigenen Angaben ist selbst das Handling von mehreren GB großen Datebanken kein Problem. Um das Endsichern großer DBs zu erleichtern, kann MSD Multipart-Backups erstellen, die man leichter auf CD oder andere Medien verteilen kann. Und als die Programmierer ohnehin so am programmieren ware, haben sie auch noch eine Verwaltungslösung für kleinere Datenbankänderungen implementiert. MSD liegt in allen europäischen Sprachen vor, Hauptsprachen, auch auf der Website, sind deutsch und englisch, was dem weniger polyglotten Landsmann sicherlich den Einstieg erleichtern dürfte.
  8. BigDump (BD): BD erledigt nur eine einzige Aufgabe, nämlich den Import sehr großer SQL-Dumps in eine MySQL-Datenbank. Wer also lediglich Probleme hat, seine Riesenbackups wieder hoch zu laden, ansonsten aber mit seiner bisherigen Lösung völlig zufrieden ist, sollte sich BD einmal ansehen. Immerhin ist der Installationsaufwand äußerst gering, BD besteht aus einer einzigen PHP-Datei. ™
Kategorien
(Kostenlose) Services Essentials

IE-Tester – alle Versionen des Internet Explorer in einem Werkzeug

Webseiten in den verschiedenen Versionen des Internet Explorer zu testen, wird mit dem IE-Tester zum Kinderspiel. Man kann Webseiten mit den Versionen 5.5 bis 8 des Internet Explorer testen und dabei mit nur einem Klick zwischen den Versionen umherspringen.

Jeder Webmaster kennt es und viele hassen es, die erstellte Website sieht in jedem Browser und dann auch noch in jeder Version eines Browsers anders aus. Die meisten Unterschiede treten wohl in den verschiedenen Versionen des Internet Explorer (kurz IE genannt) auf. Auch, wenn man noch so viel Erfahrung hat, um eines kommt man nicht herum, das Testen. Nun kann man aber mit einfachen Mitteln nicht eben mal schnell mehrere Versionen des IE auf seinem System nebeneinander installieren, weil sich der IE so tief in das System verwurzelt und sich die Versionen untereinander nicht vertragen.

Eine Lösung wäre es, einen alten Rechner flottzumachen und dort eine andere Version des IE zu installieren, um sein Werk testen zu können. Das ist natürlich schon etwas umständlich und würde ja auch wieder nur eine Version des IE zugänglich machen.

Eine andere Lösung wäre es, sich mehrere VM’s (Virtuelle Maschinen) auf seinem System zu installieren. In jeder VM kann man dann eine Version des IE installieren und damit dann seine Webseiten testen. Das funktioniert gut, bedeutet aber doch schon einen erheblichen Aufwand bei der Einrichtung.

Da dies alles keine befriedigenden Lösungen sind, ist es umso besser, dass es nun seit Mai dieses Jahres den IE-Tester in der Version 0.2.2 gibt. Der IE-Tester ist ein kostenloses Werkzeug für Webentwickler, mit dem Skripte und Webseiten ganz unkompliziert in den verschiedenen Versionen des IE getestet werden können. Das Umschalten zwischen den IE-Versionen erfolgt dabei mit nur einem Klick. Er beherrscht die Rendering- und Javascript-Engine von IE 5.5, 6.0, 7 und 8beta1 und ist auf Vista und XP Betriebssystemen lauffähig. Ein installierter IE7 wird empfohlen. Unterstützt werden auch Conditional Comments, bis auf IE 8, als einzige Ausnahme.

Sie können den IE-Tester auf der Projekt-Website downloaden. Trotz seines Alpha-Stadiums läuft das Programm recht stabil. Wenn Probleme auftreten, können Sie im englischsprachigem Forum nachfragen. Eine vom Hersteller aufgezeigte Einschränkung: Im IE6-Modus ist das Abspielen von Flash nicht möglich und Java-Applets funktionieren noch nicht ordnungsgemäß.

Installation und Verwendung: Nachdem Sie die etwa 24MB-große Installationsdatei herunter geladen und auf Ihrem System installiert haben, starten Sie den IE-Tester. Das Aussehen erinnert an das Ribbon (Multifunktionsleisten statt Menü in Office 2007) und kann über Anzeige angepasst werden. Die verschiedenen Versionen des IE werden in Tabs angezeigt, aber erst, nachdem man sie ausgewählt hat. Klicken Sie deshalb auf Neue Tab und wählen Sie im sich öffnenden Auswahlmenü eine Version aus.

Screenshot
Der „leere“ IE-Tester nach Installation und Start

Auf diese Art können Sie derzeitig nun die IE-Versionen 5.5, 6.0, 7 und 8beta1 in jeweils separaten Tabs öffnen. Das sollte für die meisten Zwecke genügen. Die Adresszeile des Browsers befindet sich direkt unter den Tabs. Auf diese Art kann man ein und dieselbe Internetseite in diesen vier IE-Versionen betrachten und mit nur einem Klick jeweils zur nächsten Version springen.

Screenshot
Jedes Tab eine eigene Version des IE

Unter Options kann man zum Testen sogar die Eigenschaften des Internet Explorers verändern. Ansonsten sind die Programmoptionen spartanisch. Doch das, wofür der IE-Tester konzipiert wurde, tut er ohne zu mucken. Alles in allem stellt der IE-Tester eine sinnvolle Bereicherung des Werzeugkastens eines Webentwicklers dar. ™

Alternativen:

  • Multiple_IE (verschiedene Versionen des IE auf einem System nebeneinander installieren)
  • IE NetRenderer (online versch. IE-Versionen testen)
  • Browserpool (29,99€/Monat, kostenloser Testaccount, benötigt eine Installation)
  • Browsershots (online, zeigt nur Screenshots zur eingegebenen Webseite von fast allen Browsern)

Andere Browser:

  • Firefox und Opera – Einfach beim Installieren der unterschiedlichen Firefox-Versionen verschiedene Verzeichnisse wählen (vor Allem auch für das Firefox-Profil)
  • Firefox im MAC – MultiFirefox
  • Safari – Multi-Safari
  • Lynx – auch mal ganz gut, die Standard-Konformität mit einem einfachen Textbrowser zu testen, gleich online mit LynxView

Erstveröffentlichung 26.08.2008

Kategorien
Essentials Freebies, Tools und Templates

Umblättereffekt mit MultiFlip und Flash

Druckerzeugnisse lassen sich nur schwer auf die Website übertragen, zumindest wenn es darum geht, eine halbwegs realistische Simulation zu präsentieren, die das Umblättern oder gar Ausreißen der Seiten erlaubt. Doch auch hier gibt es kreative Lösungen. Das Umblättern per Flash gehört dazu. Pageflip ist eine kostenlose Variante, die Maßstäbe gesetzt hat.

Die mittlerweile bis zur Version 2.2 herangereifte Open-Source Software ermöglicht das Umblättern auf Knopfdruck oder manuell durch Drag & Drop einer Seite. Daneben kann man ausgestanzte Bereiche definieren, wodurch die darunterliegende Seite zu sehen ist, und erlauben, dass der Leser Seiten herausreißen kann. Ob allerdings die zuletzt genannte Funktion den Auftraggeber begeistern wird, ist eine andere Frage. Die Übersicht dank eines Inhaltsverzeichnisses und Umblättergeräusche zur Unterstützung des Effekts werden da schon eher ankommen. Selbst Animationen auf den Seiten sind möglich, auch wenn diese die Illusion eines gedruckten Prospekts zerstören.

Screenshot

Die neue Pageflip-Engine von Dominic Kroiher namens MultiFlip bietet eine andere, recht edle Optik, dank gut umgesetzter Glanzeffekte. Die Konfiguration erfolgt hier über eine XML-Datei, durch die unter anderem abgerundete Ecken, die Animationsgeschwindigkeit und die Randgröße eingestellt werden können. Das JPEG-, PNG- und natürlich das SWF-Format werden von MultiFlip unterstützt, außerdem kann man die Größe und das Verhältnis der Seiten frei wählen.

Besonders empfehlenswert macht diese Pageflip-Engine ihre Geschwindigkeit. Hier schaut man nicht einige Sekunden auf einen Loader, sondern bekommt die nächste Seite sofort geboten. Nicht ganz so wichtig ist die Funktion, gleich mehrere Seiten umblättern zu können, sehr praktisch dagegen, dass ein Tastendruck auf Strg die Effekte ausblendet, damit man die Seite im Original betrachten kann.

Screenshot

Als Zusatz steht eine Slideshow-Funktion zum Download bereit, die das Blättern übernimmt, wobei man die Geschwindigkeit und die Pausen beim MouseOver einstellen kann. Eine Wiederholung als Schleife sorgt auf Wunsch dafür, dass der Prospekt nie endet. Der einzige Wermutstropfen ist schnell entdeckt: MultiFlip kostet 35,00 Euro, der Einsatz eines weiteren simulierten Projekts fünf Euro, auf einer anderen Domain gar 10,00 Euro zusätzlich. Das Slideshow-Modul kostet noch einmal 15,00 Euro extra. Hier muss man abwägen, ob nicht doch die kostenlose Variante ausreichend ist oder ob einem die Vorzüge eines kommerziellen Produkts eher zusagen. Weitere, ähnliche Programme im Artikel Umblättereffekte mit Flash

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts Inspiration Showcases

35 hochwertige Freefonts

Für eine hochwertige Schriftfamilie musste man schon immer tief in die Tasche greifen. Die Preisspanne für renommierte Schnitte wie Helvetica, Frutiger oder Avenir startet etwa bei 20-25 € pro Schnitt oder 400-500 € pro Familie. Nicht zu Unrecht, denn eine glasklare typografische Darstellung ist mit einem hohen Arbeitsaufwand verbunden, der sich häufig in monate- oder jahrelanger Arbeit widerspiegelt.

Doch für mittelgroße Projekte sind solche Schriftarten meistens weder notwendig noch nützlich, insbesondere wenn das Budget nicht gerade üppig ist. In solchen Fällen macht es Sinn, sich vor dem Erwerben einer kostspieligen Schriftfamilie zuerst in der Freefont-Ecke umzuschauen. Dabei wird man schnell mit ernüchternder Realität konfrontiert. Die meisten Schnitte, im Web weit und breit verteilt auf unzähligen Freefont-Sammlungen, sind für professionelle Auftritte schlicht und einfach nicht zu gebrauchen. Sucht man dennoch fleißig und hartnäckig weiter, so entpuppt sich die Suche nach den wenigen Perlen schnell als eine recht zeitaufwendige Angelegenheit.

In 2007 haben wir fleißig nach kostenlosen professionellen Schriftarten gesucht und sie auch fleißig gesammelt. Wir haben Typo-Agenturen und Foundaries beobachtet, wir haben mit Typo-Designern gesprochen, wir haben sie unterstützt und sogar motiviert, Freefonts-Perle der Öffentlichkeit zur Verfügung zu stellen. In diesem Beitrag stellen wir Ergebnisse vor. 35 hochwertige Freefonts, die sich gut für den Einsatz in privaten und kommerziellen Projekten eignen und die manch einem kostspieligen Schnitt die Stirn bieten können.

Anmerkung: Einige der Bilder stammen aus der Gerrit van Aaken’s Sammlung Freie Schriften im Portrait. Die Sammlung wird regelmäßig aktualisiert, es lohnt sich also ab und zu vorbeizuschauen. Vor der Verwendung der Fonts lesen Sie die Lizenzen sorgfältig durch; sie können sich im Laufe der Zeit ändern.

Pigiarniq Inuktitut Font
Nunavut ist eine ruhige und schöne Gegend in Kanada mit einer der kleinsten Bevölkerungsraten der Welt. 0,01 Menschen leben hier pro km2, großteils Eskimo, die Französisch, Englisch, Innuinaqtun und Inuktitut beherrschen. Vor wenigen Jahren hatte die Regierung der Region eine Schriftart für ihre 28,000 Bürger gestalten lassen, welche die vier Sprachen uniform präsentieren sollte. Das Ergebnis ist eine schöne, abgerundete serifenlose Schriftart. Die Schriftfamilie enthält mehrere Schnitte, darunter bold, heavy, italic, light und regular. Beispiele.

Pigiarniq Inuktitut font

Pigiarniq Inuktitut font

District Thin
Ein ruhiger, ernsthafter und glasklarer sans-serif-Freefont der GarageFonts-Foundry. Die Schriftart wird in folgenden Formaten zum kostenlosen Download bereitgestellt: Mac Postscript, Mac TrueType, PC Postscript, PC Truetype und OpenType.

Freefont

MG Open Moderna
Ein Sans-Serif-Geschenk der griechischen Typo-Agentur Magenta, das sämtliche Unicode-Glyphen enthält, stark an Helvetica erinnert und im TrueType-Format zur Verfügung gestellt wird.

Moderna

Gentium
Gentium wurde entworfen, um verschiedenen ethnischen Gruppen eine übergreifende Schriftart anzubieten, die lateinische Buchstaben mit Glyphen aus regionalen Sprachen in einer hochwertigen lesbaren Schriftart vereinigen würde. Die Schriftart eignet sich insbesondere zu akademischen Zwecken, kann ihren Dienst aber auch bei privaten und kommerziellen Projekten leisten. Gentium unterstützt zahlreiche Alphabete sowie alle Zeichen, die im Unicode-Standard vorkommen. Beispiele.

Screenshot

Screenshot

Delicious
Bei der Gestaltung seiner Serifenschriftart Delicious wollte Jos Buivenga insbesondere eine homogene Gestalt der Glyphen benoten und musste deshalb viel Zeit in ein optimales Kerning investieren. Mit seiner relativ großen x-Höhe kann Delicious insbesondere in Texten mit kleiner Schriftgröße zwecks optimaler Lesbarkeit eingesetzt werden. Mac und PC-Versionen stehen zum kostenlosen Download bereit.

Delicious

Delicious

Delicious

Anivers
Ein robuster, flexibler, eleganter Freefont, der in verschiedensten Situationen verwendet werden kann, etwa für Schlagzeilen auf einem Poster. Die Schriftart wurde extra zum einjährigen Jubiläum unseres Smashing Magazine entworfen. Mit Ligaturen und „oldstyle“-Ziffern unterstützt Anivers europäische Sprachen, darunter auch Esperanto. Der Freefont hat über 350 Glyphen und enthält 1.600 angepasste Kerningpaare. Beispiele.

Anivers Freefont

Anivers Freefont

Tallys
Tallys ist eine konservative Schriftart, die brete Kapitälchen, kleine x-Höhe und Buchstaben mit langer Oberlänge hat. Nur „Roman“-Schnitt wird kostenlos angeboten.

Tallys Freefont

Tallys Freefont

Mido
Eine leicht spielerische, abgerundete Schriftart, die als „limited test version“ angeboten wird. Die vollständige Version wird in 2008 veröffentlicht. Kostenlos, versteht sich.

Mido STF

Fontin
Fontin sollte insbesondere bei kleinen Schriftgrößen eingesetzt werden. Die Ziffern haben ein „hybrides“ Design, sie lassen zum einen an die mittelalterlichen Traditionen erinnern, sind aber zum anderen deutlich höher als die x-Höhe. Mac (Type 1), PC (TTF, Opentype).

Fontin

Fontin

Fontin Sans
Fontin Sans Familie kommt in regular, italic, bold, bold italic und small caps Schnitten. Sie ist das serifenlose Gegenstück von Fontin und ist im OpenType-Format für Mac & PC verfügbar. Beispiele.

Fontin Sans

Fontin Sans

MG Open Cosmetica
Eine serifenlose Schriftart, die an Optima erinnert und in der MgOpen-Familie enthalten ist.

Cosmetica

Geo Sans Light
Eine lesbare, ruhige und klare serifenlose Schriftart von Manfred Klein.

Geo Sans Light Freefont

Nadia Serif
Ein SlabSerif-Font von Nadia Knechtle, Quersicht (s. Rubrik “Labor”,), verfügbar für PC und Mac. Gefunden via dersven.de.

Nadia Serif Freefont

Yanone Kaffeesatz
Dieser “Kaffee”-font ist speziell für Überschriften und kurze Textpassagen gedacht und sollte sparsam eingesetzt werden. Im Text wirkt er unruhig, was nicht zuletzt auf ungewöhnliche Formen seiner Glyphen zurückzuführen ist. Ziffern und Währungszeichen sind „monospaced“, das heißt sie haben die gleiche Breite. Dies kann nützlich sein, etwa wenn Gerichte und Preise auf einer Menükarte präsentiert werden sollen. Weitere Glyphen, Ligaturen und historische Symbole können mittels der Option »optional ligatures« aktiviert werden. Veröffentlicht unter Creative Commons license. Beispiele.

Screenshot

Screenshot

JustOldFashion
Ein Freefont von Manfred Klein, der insbesondere durch seine spielerische Natur überzeugt und im informellen Kontext benutzt werden kann.

JustOldFashion

Lido STF
Diese Schriftart passt zu beliebigen Zeitungen, Magazinen aber auch Text-Editoren und Büroanwendungen. Lido STF verfügt über eine relativ große x-Höhe von Kleinbuchstaben, verkürzte Serifen und abgerundete Endungen. Beispiele. Kostenlos für private, nicht kommerzielle Projekte.

Screenshot

Cardo
Cardo ist insbesondere für akademische Zwecke zu empfehlen, kann aber auch für eine konservative, klassische Stimmung sorgen. Kostenlos für private, nicht-kommerzielle Projekte. Beispiele.

Screenshot

Day Roman
Diese Schriftart soll eigentlich die technische Unvollkommenheit des 16. Jahrhunderts betonen. Zu diesem Zweck wurden Serifen (im Gegensatz zu modernen Schriftarten) ungleichmäßig gestaltet, auch die vertikalen Proportionen stimmen nicht immer überein. Die Serifen-Schriftart eignet sich für Texte in der Schriftgröße 10 bis 30 Punkten. Verfügbar in PC Type 1 und PC True Type-Formaten. Beispiele.

Screenshot

Day Roman

Liberation Serif
Eine serifenlose Schriftart, entworfen von der Open Source community. Public domain, GNU GPL, Regular, Italic, Bold, Bold Italic, verfügbar für PC und Mac OS X.

Liberation Serif

Liberation Sans
Veröffentlich als Public domain unter GNU GPL-Lizenz. Kommt in Schnitten regular, italic, bold, bold italic und steht für PC und Mac OS X zum Downloaden bereit.

Liberation Sans

Romeral
Romeral bietet neben optimaler Lesbarkeit einen eleganten Stil, abgerundete Formen und klare geometische Strukturen der Buchstaben. Das Ziel des Designers war eine lesbare Schriftart, die durch angenehme, visuell ansprechende Formen überzeugt. Romeral kann sowohl für Texte als auch für Überschriften verwendet werden, in privaten und kommerziellen Projekten.

Der Designer verschickt Romeral via E-Mail. Um den OpenType-Freefont zu erhalten, muss man eine E-Mail an den Designer richten oder einen Kommentar im seinem Blog schreiben. Mehr Informationen auf Typies, dem Weblog des Designers Pablo De Gregorio.

Romeral

Romeral

Scriptina
Einen Handschrif-Font gefällig? Mit Scritina wird man optimal bedient. Verfügbar für PC und Mac.

Scriptina Freefont

Mank Sans
Ein weiterer eleganter, glasklarer, serifenloser Freefont, gestaltet von Manfred Klein.

Mank Sans Freefont

Chúcara
Um den OpenType-Freefont zu erhalten, muss man eine E-Mail an den Designer richten oder einen Kommentar im seinem Blog schreiben. Die E-Mail findet man wenn man nach dem At-Zeichen sucht.

Chucara

Qlassik
Eine Schriftart mit deutlichem europäischen Akzent. Regular und bold-Schnitte sind für PC und Mac OS X verfügbar.

Qlassik Freefont

Diavlo
Ein bisschen rechteckig und ein wenig gespitzt, verfügt Diavlo über 300 Glyphen und 1.300 kerning-Paaren. Diavlo enthält einige osteuropäische Zeichen, unterstützt Esperanto und kann demnach sowohl „Tørwald“ als auch „Téléphone“ problemlos darstellen. Die Schriftfamilie besteht aus 5 Schnitten: Light, Book, SemiBold, Bold und Black.

Diavlo Freefont
Diavlo Freefont
Diavlo Freefont

Engel Light Ltd
Serifenlose Schriftart ohne spezielle Symbole. Für PC und Mac.

Engel Light Ltd Freefont

Cicle
Serifenlose „Cicle“ kommt in 7 Schnitten und kann sowohl in Überschriften als auch in Text verwendet werden.

Fresh Free Fonts - Cicle Font | dafont.com

Kontrapunkt
Kontrapunkt wurde mit dem Dänischen „Design Prize“ als die beste Schriftart des Jahres 2004 ausgezeichnet. Das Ziel der Typo-Designer war eine besondere Schriftart, die einzelne Buchstaben in den Vordergrund stellt und ein „schickes“ Bild anbietet. Die SlabSerif-Familie besteht aus light, light italic und bold-Schnitten.

Freefont

Colaborate
Dieser OpenType-Freefont kommt in fünf Schnitten und eignet sich für Text genauso gut wie für Überschriften. Das unruhige „t“ verleiht der Schriftart eine besondere Gestalt. Gefunden via typoblog.ch.

Colaborate

Colaborate

Fertigo
Eine sehr schöne und spielerische Schriftart mit sorgfältig angepassten Ligaturen, Serifen und abgerundeten Formen. Fertigo eignet sich am besten für Plakate und Überschriften; im Text kann der Font unruhig und allzu informell wirken. Zum Download steht nur der „regular“-Schnitt bereit.

Freefont

Freefont

AUdimat (v2)
Ein eleganter Freefont mit französischem Akzent, manchmal zu rigide, manchmal zu informell. OpenType, verfügbar für Mac und PC; mit vier Schnitten: regular, italic, bold, bold italic. Gefunden via fontleech.

AUdimat

Lacuna
Um Lacuna herunterzuladen, muss man die Flash-Seite laden, auf “Glashaus Fonts” im Navigationsmenü oben klicken und auf der geöffneten Seite das passende Format auswählen. Gefunden via Typemotion.de

Lacuna Reg

Lacuna Reg

Lacuna Reg

Style-Force Semplice Pixelfonts
Eine Familie von winzigen Pixelfonts, die flashkompatibel sind und in Pixeldesign gut gebraucht werden können. Das Freefont-Package enthält eine ausführliche Einleitung, die genau beschreibt, wie die Schriftarten zwecks optimaler Lesbarkeit verwendet werden können.

Pixelfont Freefont

Pixelfont Freefont

Unibody
Unibody wurde extra für die Darstellung auf dem Bildschirm optimiert und ist vor allem zum Ensatz in Macromedia Flash MX und Adobe Photoshop zu empfehlen. Der Freefont kann nur in der Größe 8 Punkte benutzt werden.

Unibody Freefont

Silkscreen
Silkscreen ist insbesondere dann zu empfehlen, wenn eine extrem kleine, aber dennoch lesbare Darstellung von Inhalten gefragt ist. Der TrueType-Freefont leistet seinen Dienst auch bei größeren Schriftgrößen, wodurch der Text im „Schreibmaschine“-Stil dargestellt wird. Silkscreen wurde von Jason Kottke gestaltet, ist für Mac, Windows und Linux verfügbar und kann kostenlos in privaten und kommerziellen Projekten eingesetzt werden. ™

Silkscreen Freefont

Dieser Beitrag ist in ähnlicher Form und auf Englisch bereits in unserem Weblog Smashing Magazine erschienen.

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts Inspiration Showcases

Gratis Icons und Buttons

Icons kann man immer gebrauchen. Sei es für die Website, für den Desktop oder für ein eigenes Script. Gut das es eine Reihe brauchbarer Archive gibt, aus denen man sich auch mal kostenlos bedienen darf. Inzwichen ist die Auswahl groß wie nie. Gleich ob man eine Website bestücken muss oder den Desktop verschönern will, Icons stehen in Mengen bereit und laufend kommt etwas Neues hinzu.

113 Schwarzweiß Web-Icons im Miniformat von 10×10 Pixel spendierte BrandSpankingNew zum Nikolaustag. Allesamt im GIF-Format. Es mag schönere geben, aber die hier sind immerhin neu.

Screenshot

Mehr Mini-Icons, kleiner geht’s nun wirklich nicht.

Screenshot

Hübsch anzusehen ist diese akurate Sammlung der 756 Icons des neuen Office 2007.

Giøn ist eine Iconsammlung von Silvestre Herrera aus Argentinien. Wer 1,3 Megabyte gepackt herunter laden möchte, erhält ein sortiertes Paket mit Icons in den Größen 16*16, 22*22 und 24*24, alles im PNG-Format und als Open-Source – häufig mit Linux-Bezug. Die Sammlung ist noch nicht fertig, Silvestre arbeitet an Erweiterungen.

Icon Icon Icon Icon Icon Icon Icon

IconCool sammelt Icons für Windows XP. Insgesamt gibt es 16 Sätze zum Download, die auch die schon bekannten Originale von Microsoft enthalten.

Screenshot

14 Sätze im .PSD-Format für die Bearbeitung in Photoshop. Themen sind Dokumente, Email, Ordner, User, Papierkörbe, Wetter, Symbole, CDs, Bücher, Bullets und verschiedene Toolbar-Icons.

Screenshot

Ein einziges, aber wichtiges Icon von Wolfgang Bartelme: Einkaufswagen. 4 Größen, Win,Mac,Linux.

Screenshot

Heiß: Die iPhone Icons von Kate England bei Iconfactory. Aber nur für den privaten Gebrauch auf dem Desktop…

Screenshot

Das Twotones Miniicon-Set ist auch als Photoshop-Datei erhältlich.

Screenshot

Das Gallery 2 Web Icon Set von Paul Armstrong enthält 75 Mini-Icons. Es wurde unter der GNU General Public License (GPL) veröffentlicht.

Screenshot

Neue Icons für Mikroformats von Wolfgang Bartelme und Chris Messina im Projektwiki.

Screenshot

Die Iconsammlung der Firma Neteye mit dem Titel Riot bietet 40*40 und 21*18 Pixel große Icons im PNG-Format.

Screenshot

Keine herausragenden Kunstwerke aber als Public Domain für jedermann zu haben sind die Web Control Icons. Sie liegen in drei Größen vor.

Screenshot

Die King-Buttons sind zum Selberbasteln gedacht. Eine Photoshop Datei als Vorlage steht zur Verfügung.

Screenshot

Verschiedenes kommt von Yellowpipe. Icons für MAC, Windows und Linux. Für viele interessant sind die neuen Icons von Windows Vista, das erst 2007 erscheint.

Screenshot

Ganz in grau, aber nicht traurig, sind die 40 Icons von e-lusion ausgefallen.

Screenshot

AjaxLoad erzeugt animierte Lade- oder Wartegrafiken, beziehungsweise passt diese farblichen Wünschen an. 27 Varianten stehen zur Verfügung.

Screenshot Screenshot

Nur für Weihnachten zu gebrauchen sind die Christmas Holiday Icons vom ndesign Studio. Sie dürfen auch kommerziell genutzt werden.

Screenshot

Mehr als nur Icons, aber dennoch eine schöne Sache. Bittbox hält in gleich mehreren Beiträgen verschiedene Illustrator-Vorlagen für modernes Webdesign bereit. Darunter Buttons, Badges, RSS-Icons, Ecken und verschiedene Icons. Stöbern lohnt sich.

Screenshot

Ein komplettes Set wurde vom User Sekkyumu bei Deviantart veröffentlicht. 105 Icons im Format 32×32 und in vier Formaten, darunter PNG.

Screenshot

Ein weiteres Set von GUIMods. 85 Icons in 32×32 Pixel.

Screenshot

Das Set mit Social Media Icons stammt von Vikiworks. Gibt es allerdings nur im Stück, ausschneiden muss man selbst.

Screenshot

Wer seinen Firefox aufrüsten oder erweitern möchte, findet in den Toolbar Buttons grafisches Material. 95 Buttons für Firefox, 58 für Thunderbird und 26 für Sunbird.

Und wer es selbst einmal mit dem Zeichnen versuchen will, bekommt eine passende Anleitung von der Webdesignerwall. Dort geht es um den Entwurf von Mini-Icons.

Weiter geht es mit dem NDD Icon Set 1.0 von Fabian Volmer. Derzeit sind 32 Icons in jeweils 4 Größen enthalten. Das Ganze steht unter einer LGPL Lizenz der Version 3.0, was den Einsatz in privaten und kommerziellen Projekten erlaubt.

Screenshot

Iconos 2.0 ist eine Photoshop Datei (PSD) von Daniel Mota, die in 2 Varianten (mit und ohne Glanzeffekt) existiert. Die Icons müssen natürlich noch selbst ausgeschnitten und gespeichert werden. Dafür kann man noch Hand anlegen.

Screenshot

Das gut bestückte Set Sizcons ist in 2 Größen im Download zu haben. Im Format 16×16 oder 12×12. Aufgrund dieser Abmessungen und der Motive eignen sich die Sizcons gut für Menüleisten und überhaupt für den Einsatz im Web. Die Icons sind gratis, weitere Angaben werden nicht gemacht.

Screenshot

OK, die hier sind nicht mehr neu, aber immer eine Erwähnung wert. Die Verspielten unter den Lesern freuen sich über die BearGraphics von Katrin Wegmann.

Screenshot

Nur für den nicht-kommerziellen Einsatz (sprich auf dem eigenen Desktop). Es gibt sogar Halloween Motive…

Screenshot

Einem anderen Stil entspricht die 11-teilige Kollektion Sport Illustrated. Auch hier ist ohne Weiteres nur der private Gebrauch gestattet.

Screenshot

Und dann wären da noch die Map Marker Icons. Sie sind für Online Landkarten gedacht. Vielleicht braucht das mal jemand. Der Kartenausschnitt zeigt sie im Einsatz. (sl)

Screenshot

…noch mehr Icons und Buttons gibt’s im Dr. Web Weblog, hier im Teil 3 und im neuen Teil 4!

Kategorien
(Kostenlose) Services Essentials

ImageReady: Website auf Knopfdruck

ImageReady wird häufig für die Umwandlung einer Grafik in einen ersten Entwurf einer Website verwendet. Ob Imagemaps, kleinere Animationen oder MouseOver-Effekte – ImageReady bietet die richtigen Werkzeuge an, auch um die erstellten Grafiken optimiert inklusive des HTML-Codes zu exportieren.

Man kann ganz in Ruhe in Photoshop das Grundlayout erstellen, um erst bei voller Zufriedenheit mit dem Ergebnis, dank eines Klicks auf »In ImageReady bearbeiten« oder auch eines direkten Öffnens im Programm, das kleine Photoshop-Anhängsel ImageReady zu verwenden. Typischerweise wird als ein erster Schritt das Dokument in Slices aufgeteilt. Slice bedeutet Scheibe und so teilt man die Grafik in verschiedene Scheibchen auf, denen man gezielt Links, eine Animation oder einen MouseOver-Effekt spendieren kann. Auch die Qualität jedes einzelnen Slice kann separat eingestellt werden, sowie das Format, wobei GIF, JPEG und PNG zur Auswahl stehen.

Aufteilung in Slices
ImageReady sieht das Dokument als einen einzigen großen Slice an. Diesen kann man über »Slice ↔ Slice unterteilen« in beliebig viele Teilstücke zerschneiden. In diesem Beispiel habe ich die Grafik erst vertikal in drei Bereiche unterteilt und mit dem Slice-Auswahlwerkzeug positioniert. Dabei sollte man darauf achten, dass alle Slices, deren Größe man ändert, auch ausgewählt sind, denn falls nicht, generiert ImageReady selbsttätig weitere Slices. Um Slices zu selektieren, klickt man diese mit gedrückter Shift-Taste an. Hier wurde der mittlere Slice horizontal in zwei Bereiche zerschnitten und jedem Reiter ein eigener Slice zugeordnet.

Screenshot
Grobe Aufteilung in Slices

MouseOver-Effekt
Im »Fenster ↔ Slice« kann dem Slice ein Name, ein Alt-Text sowie eine URL zugewiesen werden. Ein MouseOver-Effekt könnte zusätzlich dafür sorgen, dass die Grafik auf die Berührung des Mauszeigers reagiert. So könnte ein Reiter hervorgehoben werden. Für diesen Effekt benötigt man zwei Varianten an gleicher Stelle. Einmal den Reiter in normaler Position und einmal etwas höher stehend positioniert. Die höher liegende Version setzt man für jeden Reiter um, wobei dieser vorerst ausgeblendet bleibt.

Screenshot
MouseOver-Zustand vorbereiten

Rollover
Das »Fenster ↔ Web-Inhalt« bietet die Optionen an, die man benötigt, um einen Rollover-Status festzulegen. Die einzelnen Slices werden als Miniatur, ähnlich der in der Ebenenpalette, dargestellt. Man kann einen Slice anwählen und mit einem Klick auf den Button »Rollover-Status erstellen« und dadurch den MouseOver-Effekt vorbereiten. Vorbereiten, da ImageReady noch nicht weiß, was beim MouseOver geschehen soll. Hier wurde die Ebene mit dem Reiter ausgeblendet und dafür die Ebene mit der höher gestellten Variante aktiviert. Diesen Schritt habe ich bei den einzelnen Tabs wiederholt.

Screenshot
Fenster: Web-Inhalt

Optimierte Version speichern
Die Toolleiste bietet weiter unten einen Button an, der das Ergebnis in einem Browser lädt, worüber man seinen Entwurf mit der eingestellten Funktionalität überprüfen kann. Unter der Grafik steht der generierte HTML-Code, der zumeist noch kleinere Verbesserungen benötigt. Ist man zufrieden, können die Grafiken und der zugehörige Quellcode über »Datei ↔ Optimiert-Version speichern unter…« exportiert werden. Man sollte darauf achten, dass »HTML und Bilder« aktiviert ist, da der MouseOver-Effekt nur mit dem passenden HTML-Code funktioniert.

Screenshot
Simuliertes MouseOver

Imagemap erstellen
Mit der Aufteilung in Slices wird das Dokument nach dem Speichern auf mehrere Grafiken verteilt. Wer nur eine Datei und trotzdem unbedingt ein grafisches Menü einsetzen möchte, dem empfehle ich die Imagemap-Werkzeuge der Toolleiste. Damit können Bereiche im Bild maus-sensitiv definiert werden. Eine bestimmte Stelle in der Grafik wird »anklickbar« und mit einer URL hinterlegt. Mit dem »Rechteckigen Imagemap-Werkzeug« wurden so in diesem Beispiel die Menüpunkte ausgewählt.

Screenshot
ImageMap-Werkzeuge

Bereiche verlinken
Die Verlinkung der festgelegten Bereiche setzt man im Fenster »Imagemap« fest. Unter »URL« wird das Ziel eingegeben, wobei home.html genau so möglich ist wie externe Seiten, wie etwa http://www.photoshop-weblog.de. Der Punkt »Alt« kann optional mit einer Beschreibung des Links gefüllt werden.

Screenshot
Verlinkung definieren

Weitere Formen
Neben dem »Rechteckigen Imagemap-Werkzeug« stehen das »Kreisförmige-« sowie das »Polygonförmige Imagemap-Werkzeug« zur Verfügung. Runde Buttons oder komplexere Formen werden damit selektiert, wobei Kombinationen gestattet sind. Diese Werkzeuge verstecken sich hinter dem »Rechteckigen Imagemap-Werkzeug«. Um sie auszuwählen, muss die Maustaste nur etwas länger gehalten werden. Daneben steht das Imagemap-Auswahl-Werkzeug, mit dem die Form jederzeit angepasst werden kann.

Screenshot
Schmetterling und Kreis ausgewählt

GIF-Animationen
Genau wie ein Comicstrip zahlreiche Einzelbilder verlangt, die schnell hintereinander abgespielt, Bewegungsabläufe simulieren, benötigen auch GIF-Animationen einige Bilder mit dezenten Änderungen. Dank der Geschwindigkeit, mit der sich diese Änderung vollzieht, wird der Ablauf vom Auge als Bewegung wahrgenommen, wobei große Abweichungen einen schnellen, kleinere einen langsamen Bewegungseindruck hinterlassen. Die Einzelbilder kann man schon in Photoshop anfertigen.

Screenshot
Bewegungsabläufe auf eigenen Ebenen

Bild nach Bild nach Bild
In diesem Beispiel soll ein unsichtbares Tier Fußspuren hinterlassen. Über »Fenster ↔ Animation« ruft man den Spezialisten auf, der die Bildabfolge steuert. Das erste Bild der Animation ist schon zu sehen. Um das nächste Bild mit der ersten Änderung anzufügen, klickt man auf den Button »Dupliziert aktuellen Frame«. Hier wurde eine weitere Ebene mit dem nächsten Abdruck aktiviert. Man könnte auch einen Ebenenstil ändern oder eine Ebene aus- und eine weitere einblenden.

So kann Schritt für Schritt eine Abfolge festgelegt werden, die über den Button »Spielt Animation ab« überprüft wird. Wichtig ist die Frame-Verzögerung, die angibt, wie lange ein Frame gezeigt werden soll. Standard ist »Keine Verzögerung«, was für einen schnellen Ablauf und realistische Bewegungen sorgt.

Screenshot
Verzögerung einstellen

Vor dem Speichern
Standardmäßig eingestellt ist auch das Abspielen der Animation als Endlosschleife. Das lässt sich über den Punkt »Unbegrenzt« schnell ändern. Möglich ist das einmalige Abspielen oder eine festgelegte Anzahl von Wiederholungen. Über »Datei ↔ Optimiert-Version speichern unter…« wird die Animation im GIF-Format exportiert.

Screenshot
Beispielanimation

Photoshop CS3 hat den größten Teil der ImageReady-Funktionalität übernommen, weshalb weiterhin mit Slices gearbeitet werden kann. Auch der Quellcode wurde verbessert, wodurch das Programm gerade für schnelle Entwürfe prädestiniert ist. ™

Erstveröffentlichung 08.10.2007

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Design Essentials HTML/CSS

Kostenlose CSS Layouts – Download

Alles muss man nicht selber machen oder neu erfinden. Wenn es schnell gehen muss, eine Idee fehlt oder man nicht sattelfest ist, bieten sich Vorlagen an. Sie eignen sich außerdem hervorragend zum Lernen. Unter einem Template versteht man einen kompletten Seitenentwurf inklusive Grafiken. Ein Layout hingegen bietet nur ein Grundgerüst.

Screenshot

Die folgenden tabellenlosen (X)HTML/CSS-Vorlagen werden gratis zur Verfügung gestellt. Im Falle eines bloßen Layouts ist das auch kaum anders möglich. Bei Templates hingegen verhält es sich anders. Hier ist mehr kreative Leistung im Spiel. Eine Belohnung, oft in Form eines Links, wird zumeist eingefordert. Vor dem Einsatz also immer genau hinschauen.

  • CSS Design Templates
    12 Templates
  • ThreeColumnLayouts von CSS Discuss
    Jede Menge dreispaltiger Layouts aus unterschiedlichen Quellen gesammelt.
  • CSSFILL
    Eine kleine Auswahl mit eigener Website
  • CSS Frames Layouts
    Frames mit CSS sind auch kein Problem
  • CSSplay
    Stu Nicolls ist so etwas wie ein Altmeister wenn es um CSS geht. Frei verfügbare Layoutgerüste finden sich deshalb auch bei ihm. Manchmal muss man vor dem Einsatz um Erlaubnis fragen.
  • CSS Template Gallery
    Schöne Suchmöglichkeiten für allerdings „nur“ 32 Templates. Diese sind zumeist von eher durchschnittlicher Qualität.
  • CSS Intensivstation
    15 Layouts
  • Ex-Designz
    98 XHTML CSS-Templates
  • Code-Sucks
    Sechs Templates und diverse Layouts mit verschiedener Spaltenanzahl.
  • Jimmy Lin
    Acht einfache Templates
  • Layout Gala
    40 Layouts folgen demselben Schema.
  • Little Boxes
    16 Layouts, ein Klassiker
  • Changingman
    Ein einzelnes dreispaltiges Layout. Ausgeführt als Liquid Design.
  • Mollio
    Ein Template in sieben hochwertigen Varianten. Inklusive eines kleinen Styleguides im PDF-Format
  • Open Source Templates
    15 recht schicke Templates
  • OSWD
    Ein riesiges Angebot von Templates aller Arten, aber weitgehend unsortiert.
  • OSWT
    Ein ebenfalls großes Angebot. Mit besseren Such- und Sortiermöglichkeiten. Viel Werbung dabei.
  • Maxdesign
    23 Layouts und Problemlösungen
  • Six Shooter Media
    15 Templates
  • Solucija
    19 Templates, leider ohne nähere Angaben zur Verwendbarkeit.
  • Tinderbox
    Ein Layout in Variationen
  • Yahoo! UI Library: Grids CSS
    Eine komplexe Lösung für viele Probleme. Es wird gerastert. Ein Prinzip, das aus Bildbearbeitungs- oder Layoutprogrammen bekannt ist.

Kategorien
(Kostenlose) Services Essentials

GIF, JPG oder PNG?

Die richtige Auswahl des Grafik-Formats entscheidet maßgeblich über Qualität und Ladezeit. Wer hier auf das falsche Pferd setzt, kann dies später nicht mehr durch einen anderen Sattel korrigieren.

GIF
Das GIF-Format, für den Online-Dienst Compuserve entwickelt, ist im Laufe der Zeit zum Standard geworden. Es besteht aus maximal 256 Farben und eignet sich in erster Linie für Bilder, die nur geringe Farbtiefen aufweisen. Besonders gut lässt sich das GIF für Navigationselemente einsetzten. Eine GIF-Datei kann durch Farbreduzierung noch verkleinert werden.


GIF-Grafik 5kb


JPG-Grafik 15kb

Wegen der eingeschränkten Farbenzahl eignet sich das Format nicht für Fotos und Farbverläufe. In einem direktem Vergleich sieht man den Unterschied zwischen einem Foto im JPG und GIF-Format.

Im GIF-Format sind deutlich Farbverluste erkennbar. Farbverläufe sehen besonders unsauber aus. Dateigröße:11kb

Das gleiche Foto im JPG-Format kann sich sehen lassen, von der Qualität und der Dateigröße, die nur 6kb beträgt.

Das GIF-Format macht einige Besonderheiten möglich, die für das Web-Design besonders attraktiv sind: das Interlacing, die Farbtransparenz und die Animation.

Interlacing
Der Browser baut das Bild nach dem Laden gewöhnlich Zeile für Zeile auf. Je größer die Datei, desto länger dauert es, bis der Betrachter erkennen kann, was er gerade lädt. Das Interlacing hilft diesem Problem ab. Es baut zunächst ein Gesamtbild mit unscharfen Konturen auf, das zunehmend schärfer kontrastiert. Schon nach dem Runterladen der halben Datenmenge, ist das Bild sichtbar. Auf diese Weise kann der Surfer schon früh erahnen, was auf ihn zukommt und den Ladevorgang abbrechen, wenn er es möchte.

Transparenz
Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am Besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen „durchsichtig“ erscheinen und der Hintergrund schimmert durch. Wie das in der Praxis funktioniert, finden Sie im Artikel über die „Bildkomprimierung mit Fireworks3“.

Das animierte GIF
Animationen sind nichts Neues. Sicher haben Sie im Internet schon mal sich bewegende Pfeile gesehen. Dazu wird die GIF-Grafiken aus mehreren Einzel-Grafiken zusammensetzt, hintereinander gelegt und nach einer vorgegebenen Zeit gegeneinander ausgewechselt.

Das JPG-Format
Das JPG, auch JPEG (Joint Photographic Experts Group), kann bis zu 16,7 Millionen Farben darstellen. Anders als beim GIF, wird beim JPG durch Datenreduktion die Dateigröße verringert. Es wird nur bei Bildern verwendet, die mehr als 256 Farben enthalten. Farbreduzierung wie beim GIF ist hier aber nicht möglich.

PNG
Beim PNG (Portable Network Graphics) handelt es sich um ein schon altes, aber neu ins Spiel gebrachtes Grafikformat. Es vereint die Vorzüge vom GIF und JPG. PNG- Grafiken können mit bis zu 48-Bit-Farben abgespeichert und trotzdem verlustfrei komprimiert werden, und das mit einer Qualität von 16 Millionen Farben + 256 Transparenzstufen (GIF gibt nur bis zu 8 Bit wieder). Moderne Browser haben keine Probleme PNG-Grafiken in vollem Umfange darzustellen.

Das GIF Format konnte es bei der Komprimierung ohne nennenswerte Qualitätsverluste auf 2,8kb bringen.

Das JPG schneidet am schlechtesten ab. Mit einer Dateigröße von 5,3 kb und einem sichtbaren Qualitätsverlust verliert das JPG das Rennen.

Die PNG-Grafik ist mit dem Ergebnis des GIFs vergleichbar (Dateigröße 2,4). Fast die gleiche Dateigröße und ein zufriedenstellendes Ergebnis. Obige Beispiele zeigen, dass PNG dem GIF nahe kommt. Würde man das Beispiel mit einem Foto wiederholen, würde das GIF verlieren und das PNG mit dem JPG gleichziehen.

Kategorien
(Kostenlose) Services Essentials

Schnipsel-Zentrale

Snippets braucht jeder, der sich dem Programmieren oder Codieren verschrieben hat. Das Snippetcenter sammelt was das Zeug hält. Besonders mächtig ist der Vorrat da, wo es um C/C++ (491), Java (240), UNIX
(198), Microsoft .NET oder Active Server Pages (122) geht. Die Zahlen geben die Anzahl der jeweils vorhandenen Code-Schnipsel wieder. Auch Python, PHP und Perl fehlen nicht. Mitmachen darf jeder, das Angebot nutzen sowieso. Komplett in deutscher Sprache verfügbar.

Snippetcenter Logo

Kategorien
Essentials Freebies, Tools und Templates

Kostenlose Fachbücher zum Download: Die Liste

Wir haben uns durchgewühlt und zusammengetragen, was sich derzeit in Buchform frei im Netz lesen lässt. Verglichen mit der tatsächlichen Produktion ist das zwar ausnehmend wenig, dafür aber umso preiswerter. Manche Verlage stellen ältere Titel bereit, gelegentlich finden sich aber auch Neuerscheinungen. Englischsprachige Titel haben wir nicht aufgenommen, sie sollen später in einer separaten Aufstellung folgen. Eventuelle Ergänzungen bitte als Kommentar anfügen.

Freebies? Freebies!

Webdesign

Diverses

Programmierung und Scripting

Kategorien
Essentials Freebies, Tools und Templates

Online Generatoren: Die Liste

Wer es darauf anlegt, der muss im Web fast nichts mehr selber machen. Für beinahe alles gibt es Online-Generatoren. Wir haben versucht die nützlichsten und besten davon zusammenzutragen. Die diesmal besonders umfangreiche, von Christiane Rosenberger erstellte Liste enthält neben englischsprachigen Generatoren auch solche in deutscher Sprache.

CSS

  • CSS Creator
    Live CSS Cascading Style Sheet Layout generator for your web site
  • QrONE CSS Designer
    Online CSS Generator
  • Online CSS Optimiser/Optimizer
    This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go
  • CSS Formatierer und Optimierer
    CSS optimieren
  • CSS Form Code Maker
    Generates ‚Colorful Box Layout‘ For Forms
  • CSS Menu Generator
    Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
  • Online CSS Optimizer
    CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets
  • Colly’s CSS rollover generator
    CollyLogic CSS Multi-element Rollover Generator
  • CSS Rounded Box Generator (Beta)
    Ohne viel Umstände runde Ecken generieren
  • Scriptomizers
    A CSS stylesheet generator
  • Online CSS Scrollbar Color Changer
    Change the scrollbar colors in an HTML page
  • CSS Tab Designer
    CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
  • Free CSS Template Code Generator
    Maker for 3 Column Layout (tableless)
  • Layout-o-Matic
    Generates tableless CSS layouts at the touch of a button
  • Listamatic
    one list, many options – Using CSS and a simple list to create radically different list
  • Listamatic2
    nested list options
  • List-O-Matic
    Generate CSS-styled navigation menus based on list items
  • List-u-Like CSS Generator
    Create cross-browser list-based navigation bars with ease
  • The Generator Form v2.90
    CSS Source Ordered Variable Border 1-3 Columned Page Maker

Color

  • ColorBlender.com
    Your free online color matching toolbox
  • Color Calculator
    With the Sessions.edu Color Calculator, you can identify color harmonies faster than with any color wheel or chart
  • ColorCombos.com
    Farbkombinationen am Bildschirm testen.
  • colormix
    Make millions of browser safe colors quickly and easily using our web-based mixing tool or download our stand-alone version for Windows and Linux
  • ColorMixers
    Remixing RGB since 2003
  • color palette creator v1.6
    A color swatch generator based on the tutorial located here
  • Color Palette Generator
    Generate a color palette based on an image
  • Color Palette Generator
    Enter the URL of an image to get a color palette that matches the image.
  • Color Scheme Generator 2
    Ein sehr umfangreiches Color Tool
  • Color Schemer
    Create matching color schemes at the click of a button
  • Color Tool „The Man in Blue“
    Farbwähler, Schemata und schlaue Listen sind bereits reichlich verfügbar im Web. Der Mann in Blau fabriziert es noch etwas anregender und liefert ein nützliches Demonstrations-Layout dazu. Passende Farbkollektionen können über Schieberegler ausgewählt werden.
  • colr.org
    It’s a tool to let people fiddle around with colors and words.
  • EasyRGB
    The first RGB and COLOR search engine on the Web!
  • Gradient Image Maker
    online einen Farbverlauf erstellen
  • HTML Color Code Combination Chooser
    Choose the best HTML color combinations with this free tool. Easy to use color finder that generates HTML codes.

Diverses

  • FLASH EMBEDDER
    This tool will let you easily embed flash movies into HTML.
  • HTML to JavaScript Convertor
    This tool takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
  • Insta-Select
    Insta-Select – An easy „select“ list generator
  • Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS
    This is a source code beautifier (source code formatter), similiar to indent. Please make a backup before you replace your code!
  • Quick Escape
    It’s a tool that lets you quickly paste in HTML and for that to be converted to escaped characters which can be pasted back in to your HTML source code
    so that it renders on screen.
  • Response.Right
    Response.Right converts text/HTML to server-side write statements in PHP, ASP, JavaScript and Perl.
  • XFN (XHTML Friends Network) Link Creator
    Create XFN-friendly links at the press of a few buttons
  • Yes No Now!
    It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list, that’s what.
  • Browsershots
    Free screenshots of your web design in different browsers
  • iCapture
    Safari Screenshots
  • Screenshot Generator
    Screenshot generator to see your site on a Macintosh G5 in Safari, MacIE or Mozilla.

Domains

  • Nameboy
    free domain name generator, search and creation
  • DNGenerator.com
    Domain Name Generator with Domain Name Finder to register domain names if expired domain names
  • Domain name generator
    Intelligent random name generator that finds available domains and unique business names. The fastest online domain name generator available
  • Domain Name Generator
    Domain Name Generator will produce a list of possible domain name ideas based on the word or phrase you input.

Email

Favicon

  • Favicon Generator
    Make Free Favicons – Create a Favicon.ico Design
  • FavIcon Generator (beta)
    Use this online tool to easily create a favorites icon (favicon) for your site
  • FavIcon from Pics
    How to create a favicon.ico for your website
  • Favicon.ico Maker
    Upload a 16 x 16 pixel PNG and click ‚Faviconify!‘ to create a favicon for your website. This favicon maker supports alpha transparency.

Formulare

  • Accessible Form Creator
    allows you to create forms for web sites containing all the additional markup required to make the forms accessible under Section 508 standards and the W3C WCAG 1.0 Priority 1-3 Guidelines.
  • Contact Form Generator
    The free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed.
  • Form Element Generator
    allows you to create forms for web sites containing all the additional markup required to make the forms accessible under Section 508 standards and the W3C WCAG 1.0 Priority 1-3 Guidelines.
  • PHP FormMail Generator
    A tool to create ready-to-use web forms in a flash. Once the form has been generated, you have a full functional web form. Including error checking of required fields, email address validation, credit card number & expiry date checking, multiple attachments sending, and email auto responding.
  • Visual Form Maker – Webformulare (PHP/HTML)
    Webformulare, PHP Formulare (mySQL, E-Mail) visuell gestalten! – Freeware
  • Wufoo
    Making forms easy + fast + fun.

Fun & „Kann man vielleicht mal brauchen“

Grafik

  • Background Image Maker
    Schnell und unkompliziert Hintergründe erstellen
  • Button Maker
    A quick and easy tool that automatically creates an 80×15 or 88×31 button
    by your specifications.
  • Button Maker :: Adam Kalsey
    Create 80×15 stickers for your blog with any text or color you desire.
  • Brilliant Button Maker by LucaZappa.com
    A web application to create customizable 80×15 brilliant buttons
  • PHP/SWF Charts
    is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.
  • ACME Label Maker
    Make a label!
  • Create A Graph
    Create Graphs and Charts
  • iGal
    Online Image GALlery generator
  • Sparklines
    You can start right away by dynamically creating a sparkline using the Sparkline Generator Web Application
  • phpThumb()
    The PHP thumbnail creator
  • Thumbnail Generator
    An easy way to process thumbnails from a large amount of images
  • Tile Machine 1.0
    Die Tile Machine ist ein Werkzeug, mit dem man rasch und einfach Pixel-Kacheln nach eigenem Geschmack anfertigen kann
  • Typogenerator
    Eingegebener Text wird verfremdet und mit einem zufälligen Motiv aus der Google Bildersuche kombiniert – letzteres ebenfalls mit starkem Effekt versehen. Heraus kommen mitunter recht aufregende, fast immer fantasievolle typografische Poster.
  • Web Album Generator 1.8
    Create Online Photo Albums

htaccess

  • htaccess und ErrorDocument Generator
    Sie wollen ein Verzeichniss mit Passwort schützen oder Fehler abfangen (Datei nicht gefunden …)? Mit diesen Generator können Sie leicht eine entsprechende .htaccess-Datei erzeugen.
  • .htaccess File Generator
    Apache htaccess file generator
  • .htaccess Generator
    .htaccess generator – will generate the files you need (.htaccess and .htpasswd) to password protect a directory of your website.
  • .htaccess Generator
    Create Encrypted Passwords in seconds

Impressum

  • Webimpressum-Assistent
    Webimpressum schnell erstellen

Metatags

  • Metatag-Generator
    Dieses praktische Javascript hilft Ihnen einen Satz Metatags zu produzieren
  • Metatag-Generator ABAKUS
    Einfaches Meta Tag Generieren
  • Metatag-Generator
    Mit dem Metatag-Generator können Sie sich einfach die richtigen Metatags für Ihre Seite generieren lassen.

Passwords

  • Password generator
    this is a little Javascript program that will concatenate two fields and MD5 them…
  • Password Generator
    This tool lets you use one “master” password to create unique, complex passwords for each website you visit.
  • Perfect Passwords
    Ultra High Security Password Generator

PDF

  • Notepad Generator – 1.0.0a
    This tool allows you to customize a PDF notepad.
  • PDFCreator
    PDFCreator ist ein kostenloses Tool um auf einfache Weise PDFs aus jeder beliebigen Anwendung zu erstellen.
  • PDF Online
    Quickly and easily convert your documents into PDF from anywhere in the world
  • html2pdf
    Type the URL of a Webpage of your Choice to generate a PDF file

PHP & MySQL

  • MyDBO Code Generator
    MyDBO is a powerfull and open object-oriented code generator for PHP/MySQL web application developers
  • MySQL Backup to Strongspace Script Generator
    This script generates a MySQL backup script for any number of databases that you enter into the first field
  • PHP Classes – Class: PHP MySQL class generator
    Generate classes to manipulate MySQL table rows
  • phpCodeGenie – Database Driven Applications Code Generator
    phpCodeGenie is a code generator for database backed applications. It can communicate with different database servers and generate code in many programming languages from them
  • PHPMaker
    is an automation tool that can generate a full set of PHP scripts quickly from MySQL database. Using the generated PHP, users can view, edit, search, add and delete records in the database easily on the Web.
  • phpMyEdit – Instant MySQL Table Editor and PHP Code Generator
    phpMyEdit generates PHP code for displaying/editing MySQL tables in HTML
  • phpThumb()
    The PHP thumbnail creator
  • PHP FormMail Generator
    A tool to create ready-to-use web forms in a flash
  • POG – Php Object Generator (v1.6 rc2)
    Php Object Generator, (POG) is a PHP code generator which automatically generates tested Object Oriented code that you can use for your PHP4/PHP5 application.
  • WWW SQL Designer
    visualisiert Datenbanken und Strukturen

Popup

  • Accessible Pop-up Window Generator
    Create pop-ups that are accessible and search engine-friendly
  • Popup Window Generator
    This code generator will make a script that you can add to your page using the Insert HTML Element which will pop up a window for you.
  • Popup Window Generator
    Use Eric’s Popup window Generator to easily add popup windows to your site!
  • Popup Window Maker
    Fill out the specifications of the popup window you would like to use, including the URL and the various options such as menubars, toolbars, scrollbars, etc, and click the generate button

robots.txt

  • Robots.txt Generator
    Robot Control Code Generation Tool
  • Robots.txt Generator
    Auf dieser Seite können Sie sich eine robots-txt-Datei nach Ihren Wünschen erstellen.

RSS

Sitemaps

  • Google Sitemaps beta
    Der Google Sitemap-Generator ist ein Python-Skript, das mit dem Sitemap-Protokoll eine Sitemap für Ihre Website erstellt. Dieses Skript kann Sitemaps aus URL-Listen, Webserver-Verzeichnissen oder Zugriffsprotokollen erstellen
  • ROR Sitemap Generator
    This free tool will crawl your website and generate a ROR Sitemap with up to 1,000 URLs for ALL search engines, not just Google

Tooltips

  • DHTML Tooltip Generator
    Sometimes the HTML „alt=“ isn’t enough to relay the detail you’d like it to. Here is a tool that will allow you to give your users more interactive tooltips.
  • Flash Tooltip Generator
    Free online flash generator create a flash tooltip

Typo & Text

  • ASCII Artist
    This little program converts your picture to ASCII text art
  • ASCII Generator
    Generate a ASCII graphic from a word or text. Over 130 fonts.
  • ASCII-O-Matic
    is a web application that can convert an image into ASCII Art dynamically
  • Character Cleaner v2
    Character Cleaner is a little web-based utility which converts pasted-in text to clean markup, optionally encoding certain characters and creating line breaks and paragraphs automatically. It’s entirely contained in the one file, so you can easily save it for offline use.
  • FontEditor BitfontMaker
    Wer etwas Zeit mitbringt, kann sich mit dem Online-Tool BitFontMaker seinen eigenen Pixelfont designen. Auf einer Matrix werden pro Buchstabe und Zeichen die Pixel gesetzt, bis das Alphabet komplett ist. Anschließend bekommt der Font seinen Namen.
  • Malevole – Text Generator
    This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.
  • Lorem Ipsum
    All the facts – Lipsum generator
  • Typetester
    The Typetester is an online application for comparison of the fonts for the screen.

Weblog

  • Eris‘ Template Generator
    Free Blog Templates
  • Firdamatic
    The Design Tool for the Uninspired Webloggers

XML

  • XMLBuddy
    Supports XML and DTDs. Generates DTD from XML instance. Validates and provides code assist based on DTDs or document contents (no DTD)…
  • XML Forms Generator
    A standards-based, data-driven Eclipse plug-in that generates functional forms with XForms mark-up embedded within an XHTML document from a XML data instance or a WSDL document
  • XML Generator
    To Generate XML from any data source

Kategorien
Essentials Icons & Fonts

Symbole, Buttons und Icons zum Download

Davon kann man nie genug haben. Glücklicherweise gibt es einige durchaus ergiebige Quellen im Web. Aus den meisten darf unentgeltlich geschöpft werden.

Achtung: Noch mehr Icons

Icons kommen immer gut an, einfach weil sie jeder brauchen kann. Ganz frisch sind die Mini Pixel Icons. Eine farbige Kollektion von transparenten Grafiken im Format 14×14px – für Websites, Weblogs, Dateitypen und eCommerce.

Screenshot

Gratis-Icons tummeln sich über so einige Seiten. Gut das es eine Reihe brauchbarer Archive gibt, aus denen man sich auch mal kostenlos bedienen darf. Die Drunkey Love Icons von Kevin Wetzels bieten nicht immer höchste Qualität, doch so einiges lässt sich finden und per Download dauerhaft sicherstellen.

Sweetie ist eine Sammlung mit über 100 Icons für die Benutzung auf Websites. Sie stehen unter einer Creative Commons Lizenz und sind im PNG- und GIF-Format verfügbar. Das Set enthält eine PSD-Datei für eigene Bearbeitungen.

Screenshot

Hier gibt es inzwischen über 3000 Buttons für die eigenen Seiten. Endlich einmal (fast) alles auf einer Seite, sortiert in Rubriken. Software, Betriebssysteme, Services, Blogs,Navigation… Man darf sich bedienen.

Screenshot

Eine Sammlung von satten 3800 frei verwendbaren Icons und Symbolen stellt die Mini-Image-Box zur Verfügung. Sie zeigt direkt im Menü was sie zu bieten hat. Schöne Idee. Hier finden sich schicke und praktische Vorlagen zum Erstellen von Sitemaps, Anfahrtsskizzen und jede Menge Symbole, Buttons, Pfeile, Piktogramme und kleine Grafiken für die eigenen Seiten. Eine prall gefüllte Fundgrube. Der Autor weisst ausdrücklich auf die freie Verwendbarkeit hin.

Screenshot

Und noch mehr Iconsets. Diesmal verantwortlich: Mark James aus Birmingham. Set Nr. 1, genannt Silk, enthält 300 Ikonen im Format 16*16 als PNG. “Mini” bringt es auf 140 Miniaturen im GIF-Format. Dazu steht noch eine schicke Garnitur von Flaggen bereit. Alles ist frei verwendbar im Rahmen einer Creativ-Commons-Lizenz.

Screenshot

Knöpfe für alle Gelegenheiten: Pixel-Buttons sind in Mode, und nicht nur Weblogger mögen sie. Wer auf die Schnelle ein wenige Basteln möchte, dem kommen die online Generatoren gerade recht. Farben, Texte und Rahmen darf man sich aussuchen, Knopfdruck genügt und der neue Button ist fertig.

Mehr Icons gefällig? Ro London hat verschiedene Minigrafiken sortiert nach Pfeil, Email, Einkaufswagen und Druckersymbol einfrig gesammelt und ausgestellt. Dies sollte auch bei schlimmster Ideenlosigkeit für frische Anregungen sorgen. Direkt kopieren geht übrigens nicht. Ist aber auch nicht der Sinn der Sache.

Screenshot

Single-Pixel-Grafiken als Layouthilfe sind ein wenig aus der Mode gekommen. Aber gelegentlich braucht man sie eben doch. Sei es für automatisierte Anzeigeergebnisse, Umfragen etwa, als Trennzeichen oder für Demonstrationen. Wie gut, dass sich Fernán Agüero die Mühe gemacht hat, alle Single-Pixel-Grafiken der websicheren Farbpalette zum Download bereitzustellen. 217 Grafiken im praktischen Archiv.

Screenshot

Tango Icon Library: Icons für KDE und Gnome. Standardisiert und in hervorragender Qualität. Verfügbar in drei Größen und zwei Formaten (PNG und SVG).

Nuvola KDE-Icons und Neu! Icon Theme.

Screenshot

Silvestre stellt mehrere Sets zur Verfügung. Genannt Dropline Nuovo!, Yasis, Dropline Neu!, Dropline Etiquette,

Eine Sammlung mit Mini-Icons im PNG-Format für die Benutzung auf Websites oder in Blogs ist Tiny
Little Icons.

Eine Sammlung animierter Grafiken, die dazu gedacht sind laufende Hintergrundaktivitäten optisch darzustellen. Im Englischen "Activity Indicators" oder "Progress Indicators" genannt.

Screenshot

Etwas Ähnliches gibt es auch hier. Allerdings ist nicht klar woher die Animationen stammen. Vom Einsatz in der Öffentlichkeit muss daher abgeraten werden.

Das Land der Icons ist eigentlich eine kleine Stadt. Hübsch und ungewöhnlich aufbereitet bekommt man eine Fülle interessanter Kollektionen serviert.

Screenshot

Die hiesigen Icons sind thematisch sortiert (Computer, Musik, Nahrungsmittel etc), von guter Qualität und dürfen von Privatleuten kostenlos verwendet werden. Erhältlich auch für Mac und Linux.

Björn Seibert spendiert noch ein paar Mini-Ikonen. Das Thema diesmal: “Aktionen”. Dazu gehören Schreiben, Editieren, Löschen, Login und Logout.

Screenshot

Icons für viele IEs: Ein nützliche Erfindung ist die Kennzeichung der verschiedenen Versionen des Browsers des Schreckens. Sofern jedenfalls man mehrere davon parallel laufen hat, was Webdesigner notgedrungen häufiger unternehmen.

Screenshot

Webdesigner, Webmaster und Bastler freuen sich immer wenn es etwas zum sammeln gibt, selbst wenn man es aktuell gar nicht nutzen oder brauchen kann. Diese 200 Icon Miniaturen sollte man sich daher nicht entgehen lassen. Ein kleines
Paradies für Jäger und Sammler.

Screenshot

Und schließlich ein kleines Weblog Iconset: Gebastelt von Manuela
Hoffmann. Es sind zwar nur 8 Stück, doch auch die kann man ja immer mal brauchen.

Screenshot

Vier kostenlose Iconsammlungen gibt es von graphicPUSH. Die Themen: Blogs, RSS, Dateityen und Dateimanagement.

Screenshot

Eine Kleinigkeit noch von Brand Spanking New: Doc Type Icons und Mini Icons Pack.

Diese "Bitcons" genannte Sammlung gibt es als Sanscons mit wählbarer Hintergrundfarbe in drei Formen.

Screenshot

Neue Icons für Seitenbetreiber bei Björn Seibert. Ein Set mit schwarzen Buttons ist zum Wochenende erschienen. Insgesamt gibt es nun 10 kleine Kollektionen, die frei nutzbar sind.

Screenshot

Das Internet für Architekten hat auch etwas anzubieten. Icons
für den Desktop
, die sich durch extreme Schlichtheit auszeichnen. Manchem wird das zu simpel vorkommen, doch die Geschmäcker sind bekanntlich verschieden. Wer Strenge und Logik bevorzugt, ist hier vielleicht gut bedient.

Screenshot