VEGAS Pro 21
Ahadesign Tutorials

Webdesign-ToolsWebdesigner wird das Leben nicht immer leicht gemacht. Zahlreiche Tools helfen aber, Zeit zu sparen und unterstützen mit brauchbaren und praktischen Features. Mittlerweile ist es sogar möglich, auch ohne fundiertem Fachwissen, sehr ansprechende Webseiten zu realisieren. Dieser Bericht zeigt einige der interessantesten Werkzeuge, welche meist auch kostenlos nutzbar sind.

Webdesign-Tools!

webdesign-werkzeugeWurden zu früheren Zeiten ausschließlich Desktop-Applikationen für das Webdesign genutzt, gibt es mittlerweile zahlreiche, reine Online-Tools. Manche der Werkzeuge lassen sich natürlich auch auf beide Arten verwenden.

Nachfolgend sollen interessante Möglichkeiten gezeigt werden. Da sich das Angebot stetig ändert und wirklich riesig ist, werden natürlich nicht umfassend alle Tools aufgelistet.

Contentmanagement-Systeme

Besonders beliebt sind Contentmanagement-Systeme wie zb. Drupal, Joomla, Wordpress und viele mehr.

Damit gelingt ein erster Start recht schnell und einfach.

Zahlreiche Erweiterungen können zum Einsatz kommen und erübrigen aufwendiges Coden. Trotzdem sollte auch hier ein wenig KnowHow im Bereich Webdesign vorhanden sein.

Code-Editoren

Ein ganz wichtiges Werkzeug ist natürlich ein Editor um Text, HTML, CSS, PHP, JavaScript usw. schreiben zu können. Bei den genannten CMS sind Editoren bereits vorhanden, welche zumindest teilweise damit umgehen können.

Für umfangreicheres Coden sind sie jedoch meist nicht so brauchbar. Da empfiehlt sich der wirklich geniale und kostenlose Notepad ++. Der ist überhaupt sehr gut im Alltag auf dem PC zu verwenden. Natürlich gibt es noch jede Menge weiterer kostenloser Editoren wie Code Lobster, welche teilweise auch WYSIWYG-fähig sind. Wem Notepad++ nicht zusagt, kann hier fündig werden. Allerdings fehlen teilweise Funktionen, welche dann kostenpflichtig aufgerüstet werden müssten.

ahadesign-tinymce-editor

Hervorragend ist natürlich auch der altbekannte von Macromedia entwickelte Dreamweaver. Seit der Übernahme von Macromedia bei Adobe im Angebot, ist der Dreamweaver leider nur noch im Abonnement erhältlich. Wer bezahlt, findet bei Adobe noch diverse weitere und immer wieder neue Tools für das Webdesign, auf die hier aber nicht weiter eingegangen werden soll.

Wer für das Web und für mobile Anwendungen eine Entwicklungsumgebung sucht, sollte sich das kostenlose Aptana-Studio anschauen. Es basiert auf Eclipse und lässt sich mit Plugins stark erweitern. So können auch jQuery-Anwendungen und vieles mehr umgesetzt werden.

Ansonsten gibt es auch viele Online-HTML-Editoren. Sehr oft ist das einfach der TinyMCE, welchen auch viele CMS beinhalten. Wer sich etwas damit beschäftigt, kann sich diesen Editor auch ziemlich leicht selbst in die eigene Website einbauen und zb. auch mit einem lokalen Server wie Xampp auf dem PC nutzen. Auf der TinyMCE-Seite werden dazu diverse Anleitungen bereitgestellt.

CSS3-Generatoren und Animations-Editoren

webanimatorplus-vorlagen-erweitert

Wirklich hilfreich können CSS3-Generatoren sein. Auch hier gibt es diverse Angebote wie zb. den eher schlichten Generator bei css3generator.com oder den eher visuell ausgelegten Generator bei cssmatic.com. Das Prinzip ist immer die Generierung des benötigten Codes für zb. abgerundete Ecken, Verläufe, diverse Schatten, Transformationen usw.

Auch HTML5-Animationen lassen sich online und ohne selbst zu coden, erstellen. Eine interessante und kostenfreie Anlaufstelle hierfür ist die Seite HTML5Maker. Für viele weitere Animations-Editoren muss leider gezahlt werden.

Eine hochinteressante Desktop-Software ist der WebAnimator. Damit sind dann interaktive Filme, Werbebanner und Spiele sehr leicht umzusetzen. Es gibt fertige Templates und der Code wird für alle Geräte optimiert. Wir hatten das Programm vor einiger Zeit ganz ausführlich untersucht, was in dem Bericht "Animationen ohne Flash mit WebAnimator Plus im Test" zu lesen ist.

Font-Editoren und Online-Bildbearbeitung

editor-arbeits-oberflaecheSelbst die Erstellung eigener Schriften und die Bildbearbeitung ist komplett online möglich. Für Schriftendesigns zb. das kostenfreie Angebot bei Glyphr Studio.

Für die Bildbearbeitung im Internet ist das Angebot schon fast unüberschaubar. Interessant wäre der Pixlr Editor von Autodesk, welcher ähnlich wie Photoshop daherkommt. Ein abgespecktes Photoshop stellt Photoshop Express von Adobe dar. Im Gegensatz zum Pixlr Editor kann hier kein neues Bild kreiert werden. Zwingend muss man sich registrieren und zunächst ein Foto hochladen.

Code-Überprüfung

Wer gewissenhaft arbeitet, validiert seinen fertigen Code. Hierfür ist der altbekannte Markup Validation Service des W3C noch immer eine empfehlenswerte Anlaufstelle und sollte jedem Webdesigner bekannt sein. Für die Überprüfung wird einfach die Adresse zur Seite angegeben oder der Code hochgeladen bzw. direkt eingefügt.

Browser Kompatibilität

IETester - Diverse Internet Explorer

Auch wenn sich die Situation inzwischen stark verbessert hat, sollten Webseiten doch auf verschiedenen Browsern angesehen werden. Für die Internet Explorer kann dazu der IETester installiert werden. Genauere Informationen dazu sind in dem etwas älteren, aber noch relevanten Bericht "Mehrere Internet Explorer inklusive IE8 auf dem PC" zu finden. Für Firefox, Opera, Safari, Chrome und mehr, ist die Seite Browsershots eine gute Anlaufstelle, wenn es kostenlos sein soll.

Codes für Symbole, Entities und ASCII

htmlarrows-website

Niemand kann sich die vielen HTML-Symbole, Entities und ASCII-Character-Codes auswendig merken. Eine wirklich sehr gute Hilfe ist bei toptal.com/designers/htmlarrows/ zu finden. Für alle möglichen Symbole und Zeichen, werden die Werte für Unicode, Hex-Code, HTML-Code und die HTML-Entities gelistet und können so schnell für das eigene Web-Design verwendet werden. Mit Klick auf eines der Symbole, wird zusätzlich der CSS-Code und Beispiele zum Einbinden mit HTML bzw. CSS dargestellt.

Desktop CMS und Homepagebaukasten

Seitenelement bearbeiten

Wer ein Desktop-Contentmanagement-System wie zb. den Zeta Producer oder Website X5 verwendet, kann auf viele Tools bereits über solche Software zugreifen. Auch Homepage-Baukasten-Systeme werden immer interessanter und bringen ähnliche Vorteile, von integriertem Webhosting bis zu SEO-Maßnahmen. Sehr interessant in diesem Bereich ist sicher das teilweise sogar kostenlose System Wix, mit dem neben einer eigenen Website auch ein Online-Shop betrieben werden kann usw.

Wer sich genauer für diese Möglichkeiten interessiert, welche zudem keinerlei Fachwissen voraussetzen, dem seien die Berichte "Desktop CMS Zeta Producer getestet", "WebSite X5 Professional 11 im Test", WebSite X5 Version 12 und "Kostenlose Homepage erstellen mit Wix" empfohlen.

Soweit zu den Anregungen, welche das Webdesign sicher erleichtern können. Natürlich gibt es noch viel mehr Tools und Möglichkeiten und es kommt immer wieder was Neues dazu. Interessante Vorschläge hierzu, sind in den Kommentaren immer willkommen.

Speichern
Cookies Einstellungen
Wir verwenden Cookies, um Ihnen das beste Erlebnis auf unserer Webseite zu ermöglichen. Wenn Sie die Verwendung von Cookies ablehnen, funktioniert diese Website möglicherweise nicht wie erwartet.
Alle akzeptieren
Alle ablehnen
Unentbehrlich
Für grundlegende Funktionalität der Website notwendig
Website
Akzeptieren
Vermarktung
Eine Reihe von Techniken, die die Handelsstrategie und insbesondere die Marktstudie zum Gegenstand haben.
Diverse
Akzeptieren
Ablehnen
Funktionell
Tools, die Ihnen beim Navigieren auf der Website mehr Funktionen bieten, dies kann soziales Teilen einschließen.
Osano
Akzeptieren
Ablehnen
Analytik
Werkzeuge zur Analyse der Daten, um die Wirksamkeit einer Webseite zu messen und zu verstehen, wie sie funktioniert.
Google Analytics
Akzeptieren
Ablehnen