Magazin für digitale Arbeit & Kultur
Design

10 nützliche Tools für Webentwickler

admin
#Webentwickler

Ähnlich wie Handwerker sind auch Webentwickler auf Werkzeuge angewiesen, die ihre Arbeit erleichtern. Die meisten Tools sind kostenlos im Web erhältlich und bringen eine Vielzahl nützlicher Funktionen mit sich. Nachfolgend stellen wir Euch zehn interessante Tools für Webentwickler vor, die beim Erstellen einer modernen Website hilfreich sein können.

SnipSave

Dieses Tool ermöglicht das schnelle und einfache Kreieren, Bearbeiten und Löschen von Snippets. Die Code-Ausschnitte können für die spätere Verwendung in anderen Projekten gespeichert werden.

Bildquelle: snipsave.com
Bildquelle: snipsave.com

The Queen’s Stylesheets – Aus “color” wird “colour”

Dieses Stylesheet ist genau das Richtige für die stolzen Briten unter Euch: Es wandelt den Code Eures Stylesheets, sollte es in amerikanischem Englisch verfasst sein, in erstklassiges Oxford-Englisch um.

Bildquelle: speckyboy.com
Bildquelle: speckyboy.com

Tiny Fluid Grid

Mit Hilfe des Tools Tiny Fluid Grid können Layouts für Websites erstellt werden. Die gewünschten Parameter werden zunächst über die Maske eingegeben, anschließend kann der erzeugte CSS-Code heruntergeladen werden.

Bildquelle: tinyfluidgrid.com
Bildquelle: tinyfluidgrid.com

Der Responsive Calculator

Dieses Calculator-Tool wandelt PSD Web-Templates für Eure Website mit Responsive Design um. “turning pixels into percentages”.

Bildquelle: rwdcalc.com.com
Bildquelle: rwdcalc.com.com

Timeline JS

Mit der Timeline JS lassen sich, wie der Name schon sagt, eigene Timelines aus unterschiedlichen Quellen zusammenstellen. Das Tool unterstützt Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion und Wikipedia. SoundCloud und weitere sollen folgen.

Bildquelle: timeline.verite.co
Bildquelle: timeline.verite.co

Opera Mobile Emulator

Der Opera Mobile Emulator erleichtert die Entwicklung mobiler Apps auf dem Desktop. Das Tool kann auch mit Opera Dragonfly verbunden werden, um Zugriff auf erweiterte Toolkits zu erhalten.

Bildquelle: opera.com/developer
Bildquelle: opera.com/developer

Chico UI

Chico UI ist eine kostenlose Open-Source-Sammlung zahlreicher nützlicher Webtools für Entwickler und Designer. In der Chico-Werkzeugkiste finden sich unter anderem CSS3 und HTML5 Features.

Bildquelle: chico
Bildquelle: chico

Retina-Grafiken für Eure Website

Retina.js checkt jedes Bild einer Website und tauscht es gegebenfalls durch eine hochauflösende Grafik, die auf Eurem Server liegt, aus. Sieht ein Image-Code auf Eurer Seite so aus <img src=”/images”my_image.png” /> prüft ein Script, ob sich auf Eurem Server eine alternative Bild-Datei befindet “/images/my_image@2x.png

Bildquelle: retina.js
Bildquelle: retina.js

Screenfly

Screenfly ist ein Online-Tool der Website quirktools.com. Hier können die Website Interfaces auf verschiedenen Geräten betrachtet werden. Im Suchfeld einfach die gewünschte Web-Adresse eingeben und los geht’s!

Bildquelle: quirktools.com
Bildquelle: quirktools.com

Columnal

Columnal ist ein sogenanntes Responsive CSS Grid System. Das Tool baut eine Brücke zwischen Desktop und Mobile-Browsern, indem es sich automatisch an die Größe des jeweiligen Browsers anpasst.

Bildquelle: columnal.com
Bildquelle: columnal.com
Über den Autor
Kommentare

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>