Nützliche Tools für Webentwickler
Aus Wiki2.wda-innsbruck.at
Firebug
Firebug ist eine kostenlose Erweiterung für den Browser Firefox aus dem Hause Mozilla. Sie bietet zahlreiche Tools für Web-Entwickler und kann Fehler im Quellcode einer Seite anzeigen.
Firebug bietet verschiedene Ansichten der Seite und in einigen dieser Ansichten kann man Änderungen durchführen und deren Auswirkung sofort in der Seite sehen. Diese Änderungen beeinflussen aber natürlich nur die Anzeige der aktuellen Seite im Browser und wird nicht abgespeichert, nach dem Neuladen dieser Seite wird nämlich wieder alles auf den Ausgangspunkt zurückgesetzt.
Eine weitere nützliche Funktion von Firebug ist sicherlich auch dass man die Ladezeiten aller Elemente der Seite angezeigt bekommt.
Für PHP-Code eignet sich Firebug allerdings nur bedingt da Firebug nur das sehen kann, was vom Server an den Browser ausgeliefert wird.
Ein Pflicht-Download und mächtiges Werkzeug für alle Web-Entwickler also!
Download: www.getfirebug.com
Web Developer
Der Web Developer ist eine Gratis Erweiterung für Firefox. Sie bietet eine Toolbar mit ausgewählten Tools für Web Entwickler und bietet davon eine beträchtliche Anzahl.
Einige Funktionen:
Elementinformationen einblenden: Bei Mouseover werden viele Informationen bezüglich des angeklickten Elements wie ID oder Class, Position, High und Width, Eltern- und Kinderelmente angezeigt.
Deaktivieren: Eine sehr nützliche Funktion ist mit Sicherheit das schnelle Ausschalten von JavaScript und Java auf der Webseite um zu beobachten ob z.B.: ein Menü nach deaktivieren von JS dennoch funktional ist.
Style deaktivieren: Hier kann man einzelne oder auch alle Stylesheets deaktivieren. Ist nützlich um die Darstellung zu überprüfen, denn auch wen man auf Styles verzichtet sollte man die Seite trotzdem noch verwenden können.
CSS anzeigen: Diese Funktion erlaubt das anzeigen aller aktiven CSS-Dateien der geladenen Seite. Wenn eine CSS-Datei nicht geladen werden kann wird dies mit einen entsprechenden Fehler angezeigt.
Download: https://addons.mozilla.org/de/firefox/addon/web-developer/
ColorZilla
Ein weitere Erweiterung exklusiv für Firefox. Mit Hilfe eines Fadenkreuzes kann aus jedem Bereich im Browser der gewünschte Farbwert herausgelesen werden. Je nach Wunsch kann man dann unter anderem den RGB- oder Hex-Wert kopieren und verwenden. Ausserdem kann man die Farbe nachträglich noch nach belieben verändern.
Weiter Funktionen sind Verschiedene Farbpaletten und ein Seitenzoom .
Download: https://addons.mozilla.org/de/firefox/addon/colorzilla/
MeasureIt
Ist ein kleines aber sehr nützliches Plugin für Firefox zum schnellen Abmessen von Elementen einer Webseite im Browser.
Download: https://addons.mozilla.org/en-US/firefox/addon/measureit/
Awesome Screenshot
Eine Erweiterung mit deren Hilfe man sehr einfach Screenshots von ganzen Webseiten, wenn gewünscht aber auch nur von bestimmten Bereichen, machen kann.
Anschließend kann man aber dann noch die Bilder bearbeiten und zum Beispiel gewisse Bereiche farblich einkreisen / hervorheben oder Pfeile sowie Notizen hinzufügen. Zum Schluss hat man die Möglichkeit das gemachte Bild auf dem Rechner abzusichern.
Download: https://addons.mozilla.org/de/firefox/addon/awesome-screenshot-capture-/
Opera Dragonfly
Ein Tool für alle Webdesigner die gerne mit Opera arbeiten und ist eine Alternative zu Firebug für Firefox.
Die Erweiterung wird wie Firebug direkt am Browser integriert und wird auch immer automatisch aktualisiert. Um Dragonfly zu aktivieren müssen Windows- oder Linux-User die Tastenkombination Strg + Umschalttaste + I drücken. Mac-User drücken Cmd + alt + I. Man kann aber auch mit rechter Maustaste im Browser auf ein Element klicken und dann "Element untersuchen" auswählen.
Mit Dragonfly kann man Code durchsuchen, DOM ändern, Netzwerk überwachen, Fehler suchen und finden und noch vieles mehr. Alles im allem bietet diese Erweiterung alle Werkzeuge die ein Webdesigner braucht und sich wünscht.
Download: http://www.opera.com/dragonfly/
ClickHeat
ClickHeat bietet die Möglichkeit eine eigene erstellte Webseite oder auch einen eigenen Blog genau zu analysieren. Per JavaScript hält ClickHeat genau fest wo die Besucher der Webseite / Blog hinklicken. So kann man herausfinden welche Elemente die Aufmerksamkeit von den Besuchern anziehen und welche nicht.
Ein sehr nützliches Tool also um herauszufinden wo man am besten Werbung platziert.
Download: http://www.labsmedia.com/clickheat/index.html
FileZilla
FileZilla ist ein Open-Source Programm und es handelt sich dabei um ein FTP-Client.Einige Hauptfunktionen: Wiederaufnahme abgebrochener Uploads/Downloads,Verwaltung verschiedener FTP-Sites, Anpassbare Befehle, Keep-Alive-System, Timeout-Erkennung, Firewall-Support, SSL (Sichere Verbindungen), SFTP-Support, Drag&Drop, Proxy-Support...
Download: http://www.filezilla.de/
Browsershots
Browsershots ist kein Tool zum downloaden sondern eine Webseite auf welcher man seine Webseite auf anderen Browsern testen kann. Anstatt dass man alle Browser installiert kann man hier einfach die URL seiner Seite eingeben sowie die gewünschten Browser. Browsershots erstellt online Screenshoots von der Webseite in den angegeben Browsern. Es werden Browser für insgesamt 4 Betriebssysteme angeboten.
Link: http://browsershots.org/
FlashFXP
Hier handelt es sich genau wie bei FileZilla um einen FTP-Client mit dem man aber auch zur gleichen Zeit auf mehreren Servern zugreifen kann. Im Gegensatz zu FileZilla ist FlashFXP aber nicht kostenlos!
Download: http://www.flashfxp.com/
Color Palette Generator
Ein sehr nützliches Tool wenn man sich beim gestallten seiner Webseite schwer tut die passenden Farben zu finden. Der Color Palette Generator vereinfachtet dies mit Hilfe von Fotos die man ihm vorgibt. Man lädt einfach ein Foto hoch und es wird daraus die passende Palette an Farben erstellt.
Link: http://www.degraeve.com/color-palette/index.php
Fotolia
Fotolia ist eine Webseite worauf sich Millionen von lizenzfreien Bildern befinden. Man findet dort wirklich gut gemachte Bilder für wenig Geld. Ausserdem kann man auch seinen eigenen Fotos dort verkaufen.
Link: http://de.fotolia.com/
Lorem Ipsum Generator
Ist eine Webseite worauf man sich einen beliebig langen Blindtext erstellen lassen kann um ihn dann als vorübergehenden Platzhalter für sein Projekt zu verwenden. Somit schaut das Projekt schon ein Stückchen vollständiger aus als zuvor. Praktisch ist auch dass mann die Anzahl der Buchstaben, Wörter oder Absätze bestimmen kannst.
Link: http://www.loremipsum.de/
SELFHTML
Ein richtiger Web-Entwickler kommt um diese Webseite nicht vorbei. Es handelt sich hierbei um ein Online-Handbuch worauf sich alle HTML- sowie CSS-Befehle mit genauer Anleitung und Beispielen befinden.
Ausserdem befindet sich auf SELFHTML auch ein Forum worauf Fragen gestellt werden könne und Antworten gegeben werden.
Link: http://selfhtml.org/
ColorBlender
Ein weiteres Tool falls man sich schwer tut die passenden Farben für seine Webseite zu finden. Im Gegensatz zum "Color Palette Generator" wird hier kein beliebiges Foto als Vorlage verwendet sondern eine Farbe selbst. Man gibt einfach die Werte seiner Ausgangsfarbe im RGB- oder HSV-Modus ein und der ColorBlender erstellt einem 6 passende Farben.
Link: http://www.colorblender.com/
PlainTextures
Ein Online-Archiv an Texturen, unterteilt in verschiedenen Kategorien. Sehr nützlich für das Erstellen von Webseiten.
Eine kleine Auswahl von Kategorien: Asphalt, Graffiti, Grass, Metal, Paper, Rocks, Signs, Stones, Walls...
Link: http://plaintextures.com
PXtoEM
PX in EM umrechnen einfach gemacht. Einfach seinen "Body-Font-Size" in Pixel angeben und es wird dir der passende EM-Wert ausgegeben. Sehr nützlich für Webdesigner die vermeiden möchten dass die Schriftgröße in den verschiedenen Browsern unterschiedlich angezeigt werden.
Link: http://pxtoem.com/
Stripe Generator
Das Erstellen von Stripes-Texturen kann sehr zeitaufwendig und mühsam sein. Der Stripe Generator bietet dafür die perfekte Lösung: - Mit dem sehr einfach zu verstehenden Werkzeugen sein gewünschtes Muster erstellen - Seine erstellte Textur downloaden - in seiner CSS Datei den angegeben Code eingeben
Link: http://www.stripegenerator.com/
Die 100 besten Schriften
Eine sehr nützliche Webseite wenn man bei einer eigenen Seite noch nicht weiß welche Schrift man am besten verwenden soll. Wie der Name schon sagt befindet sich auf dieser Seite eine Auflistung der besten 100 Schriften mit Erklärung und einer Auflistung aller Schriftzeichen.
Link: http://www.100besteschriften.de/
TextInspektor
Testen Sie Texte auf Verständlichkeit. Einfach seinen Text eingeben und schon wird dieser überprüft: - ob er verständlich ist oder nicht. - welchen Verständlichkeitswert der Text in Beziehung zu Vergleichstexten hat. - zeigt Schwächen in Satz- oder Wortlängen - zeigt wo Optimierungspotenzial besteht
Link: http://www.textinspektor.de/
Font Squirrel
Eine hervorragende Sammlung an kostenlosen Schriften wenn es einmal ein andere Font sein soll als die üblichen Web-Fonts. Font Squirrel hat eine große Auswahl und hat man sich einmal für einen Schriftzug entschieden wird dem User genau erklärt wie er jene Schrift nach dem herunterladen auch in seine Webseite einbauen muss dass sie auch funktioniert.
Link: http://www.fontsquirrel.com/
Google Web Fonts
Ist ebenfalls wie Font Squirrel eine Webseite für gratis Web-fonts. Google Web Fonts bietet auch eine große Auswahl und das einbauen der Schrift in seine Webseite ist ein wenig unkomplizierter da man nur eine "Google-URL" zur jeweilig ausgewählten Schrift benötigt und diese ins CSS einbaut. Allerdings, wenn wirklich einmal etwas mit dem Server von Google wäre und dieser ausfällt, so fallen auch die eingebauten Google Web Fonts aus.
Link: http://www.google.com/webfonts
dafont
Ein Online-Archiv an Gratis-Schriften, geordnet nach Autor, Style oder Popularität. Sehr nützlich wenn man eine ausgefallene Schrift für die grafische Gestaltung der Webseite sucht.
Link: http://www.dafont.com/
deviantART
Ist ein Webseite die Künstlern, oder auch nur jenen die Kunst gerne machen, eine Platform bietet ihre Arbeiten hoch zu laden und sie für Besucher bereitstellen zum downloaden. Ihr Archiv umfasst unter anderem: Fotografie, Texturen, Wallpaper, Concept Art...
Link: http://www.deviantart.com/
Picnik
Mit diesem Tool kann man online seine Fotos zuschneiden, die Farben ändern, Effekte hinzufügen… Das bearbeitete Foto kann man dann auf seinen Computer herunterladen oder per Mail verschicken. Sehr praktisches Tool falls man einmal kein Photoshop oder ähnliches Programm zur Hand hat.
Link: http://www.picnik.com/
Pixlr
Hierbei handelt es sich um eine Art online Minieaturausgabe von Photoshop. Es ist sehr umfangreich für seine Art und man kann dort nicht nur Fotos bearbeiten, sondern auch komplett neue Projekte mit mehreren Ebenen zur Bearbeitung erstellen.
Link: http://pixlr.com/
Ajax Load Gif Generator
Benötigt man einen individuell animierten Ladebalken kann man hier einen erstellen. Es wird dabei ein GIF-Bild für die Animation erstellt. Eine genaue Anleitung findet man direkt auf der Startseite.
Link: http://www.ajaxload.info/
BgPatterns
Ein sehr nützliches Tool um schnell schöne Muster zu entwerfen welche man als Hintergrund für seine Webseite verwenden kann.
Link: http://bgpatterns.com/
Die perfekte Webseite
Es handelt sich hierbei um eine Ansammlung von Tipps und Tricks sowie Know-how und Informationen wie man eine Webseite richtig aufbaut und was man dabei beachten sollte.
Link: http://www.perfekte-website.de/
Google PageRank Check
Der PageRank Check erlaubt die Überprüfung wie gut eine Webseite von Google gefunden wird. Also sehr nützlich um herauszufinden ob man die eigene Webseite suchfreundlich programmiert und gestaltet hat.
Link: http://www.gaijin.at/olsgprank.php
CSS4you
Diese Webseite ist eine nahezu komplett vervollständigtes CSS-Lexikon in deutscher Sprache. Neben den üblichen Erklärungen und dazugehörigen Beispielen findet man hier auch eine Rubrik mit nützlichen CSS Tipps und Tricks.
Link: http://www.css4you.de/
Fount
Fount zeigt einem um welchen Font es sich auf jeder beliebigen Webseite handelt, sowie auch deren Schriftgröße, Schriftstärke und Schriftgrad. Einfach auf der Startseite den Button drücken, dann auf die gewünschte Seite gehen und auf den unbekannten Schriftzug klicken.
Link: http://fount.artequalswork.com/
Typographie für Webautoren
Ein sehr nützliches Handbuch zum Thema Typographie im Web. Neben den vielen Erklärungen zu den verschiedensten Themen und Problemen findet man hier auch eine Auflistung von den verschiedensten Sonderzeichen und deren Unicode, Dezimal-Schreibweise, Hexadezimal-Schreibweise und der benannten Schreibweise in HTML ( z.B.: Anführungszeichen / U+0022 / " / " / " ).
Link: http://webdesign.crissov.de/Typographie
PHP Manual
Ist DAS Online-Handbuch für PHP und ist dass was SELFHTML für HTML ist. Hier findet man Anleitungen zu einfachen Befehlen bis hin zu komplexeren PHP-Programmierungen, natürlich immer mit Beispielen.
