Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Zehn frische Tools für Webdesigner und Entwickler (Ausgabe Mai 2015)

Webdesigner sind immer auf der Suche nach neuen Helferlein, die ihnen das Leben erleichtern. Dabei ist es zunächst einmal egal, um was es sich handelt. Ob es ein Online-Tool ist oder ob es sich um neue Ressourcen handelt, gebrauchen kann man fast alles irgendwann. Wir haben uns daher einmal im Netz umgesehen und neue, wirklich frische Tools aus diesem Monat für Sie ausgesucht. Dabei herausgekommen ist eine gute Mischung von Tools zum Testen von Code, ein neuer HTML-Editor und vieles mehr, von dem wir annehmen, dass es Ihnen gefallen wird.

tools-webdesigner-teaser_DE

1. Visual Studio Code

MS-Visual-Studio-Code

Microsoft öffnet sich immer weiter und produziert einen neuen und plattformübergreifenden Code-Editor. Der Editor versteht sich nicht als umfassende Entwicklungsumgebung, sondern als kleiner, aber feiner Code-Editor für alle modernen Web- und Cloud-Anwendungen. Der Editor wird für Windows, Linux und Mac OS X angeboten und soll mit Apps wie SublimeText 2 konkurrieren können, sobald die fertige Version angeboten wird. Der Editor befindet sich noch in einer „Preview“-Phase.

2. Colour Shades Generator

Colour-Shades-Generator

Der Colour Shades Generator zeigt Ihnen die optimalen Schatten-Farben für die Arbeit mit CSS-Shadows an, nachdem Sie einen Farbcode eingegeben haben. Um eine der dargestellten Farben zu kopieren, müssen Sie nur darauf klicken.

3. CSS Dig

CSS-Dig

Diese praktische Chrome Extension bietet eine alternative Möglichkeit, Ihr CSS zu analysieren und Korrekturen und Verbesserungen vorzunehmen. Alle Eigenschaften werden mit ihren Selektoren angezeigt. So findet man unter Umständen doch noch Verbesserungspotential in einer CSS-Datei.

4. Think with Paper

Think-with-Paper

Paper ist eine Zeichen-App für das iPad, mit dem Sie Diagramme mit geraden Linien, Formen und Objekte aller Art erstellen können. Freihändig sind Kreise und Dreiecke möglich, die sich jederzeit ändern lassen. Das Tool ist sehr gut dafür geeignet, um Ideen zu erfassen oder Mockups zu erstellen. Die App ist kostenlos erhältlich. Wir haben das Tool bereits in einer frühen Version ausführlicher vorgestellt.

5. HTML Arrows

HTML-Symbols-Entities-and-Codes

HTML Arrows bietet entgegen dem Namen nicht nur die Pfeilsymbole für die Nutzung im HTML-Quellcode an, sondern eine ganze Menge anderer, nützlicher Symbole ebenfalls. Diese Website sollte jeder Webdesigner und Webentwickler in seine Lesezeichen aufnehmen. Alle gebräuchlichen HTML-Zeichen sind komplett mit Code enthalten.

6. TouchDevelop

TouchDevelop

TouchDevelop ist ein weiteres Tool aus Microsofts sich öffnendem Portfolio. TouchDevelop ermöglicht sowohl Anfängern als auch erfahrenen Programmierern, Apps mit ihrem Handy, Tablet oder einer Desktop-Umgebung zu schaffen. Man kann aus drei Schwierigkeitsstufen vom Anfänger bis hin zum Profi auswählen. Die Drag-and-Drop-Oberfläche des Tools ermöglicht eine einfache Gestaltung einer App. Entwickelt wurde das Tool, um Menschen das Programmieren näher zu bringen und Ihnen einen leichten Einstieg in die App-Programmierung zu bieten. Je nach Wissensstand ersetzen Sie nach und nach die Nutzung des Drag-and-Drop-Editors durch das Einbringen eigenen Codes. Wie Visual Studio-Code ist TochDevelop ein plattformübergreifendes Angebot, das auf Android, iOS, Windows Phone, Windows, Linux und Mac verfügbar ist.

7. ES Feature Tests

ES-Feature-Tests

ES Feature Tests ermöglicht Ihnen, faktengestützt den besten Code an jeden Browser auszuliefern. Natives ECMAScript 6 geht an kompatible Browser, ein Fallback existiert. Hier finden Sie eine Kompatibilitätsübersicht. Das Tool bietet Funktionstests für jeden Browser.

8. Vorlon.js

Vorlon.JS

Debuggen und testen Sie Ihr JavaScript mit diesem Tool auf Basis von node.js und socket.io. Sie können sich remote auf bis zu 50 Geräte simultan schalten und Ihren Code ausführen, um Performance zu testen und Fehler zu beheben. Vorlon.js ist ein Weg zum Debuggen Ihres Codes auf annähernd jeder Plattform. Vorlon.js ist Open-Source und kostenlos. Plugins zur Erweiterung der Funktionalität sind ebenfalls erhältlich. Auch dieses Tool entstammt dem Microsoft-Kosmos.

9. Ionic

Ionic Framework

Ionic befand sich bereits einige Zeit im Beta-Stadium, ging jedoch in diesem Monat offiziell mit der endgültigen Version 1.0.0 ‚uranium-unicorn‘ online. Ionic ist eine Open-Source-Bibliothek mit mobil-optimierten HTML, CSS und JS Komponenten, Gesten und Tools für die Erstellung von interaktiven Apps. Entwickelt wurde Ionic mit Sass. Es ist optimiert für Angular.js.

10. RightFont

RightFont-for-Mac App

Sollten Sie extrem viele Fonts auf Ihrem Mac haben, könnte diese App für Mac OS X für Sie sinnvoll sein. RightFont ermöglicht Ihnen die Kontrolle über alle Schriftarten auf Ihrem Mac. Die App gibt Ihnen den Zugriff direkt von der Menü-Bar aus und integriert die Schriftarten in Photoshop und Sketch 3. Die Fonts können nach unterschiedlichen Kriterien organisiert werden, etwa nach Serif oder Sans-Serif, Google oder Typekit, Breite, Font-Gewicht und vielem mehr.

Links zum Beitrag

(dpe)

Von Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

Schreibe einen Kommentar

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