In diesem Bereich findet Ihr Artikel, Tipps und Anleitungen (Tutorials) zu den Themen Webdesign, Photoshop, CSS, XHTML, JavaScript, jQuery, Flash, Typo3 und Textpattern.

Die Beiträge richten sich sowohl an Einsteiger als auch an Fortgeschrittene und sollen bei der täglichen Arbeit im Web-/Grafikdesign helfen.

201330Dez

Web 3.0: JavaScript-Frameworks und die Zukunft

Die Überschrift wurde absichtlich mit dem Buzzword "Web 3.0" versehen, da die "Versionsnummer des Webs" häufig als Synonym für die Zukunft des Internets gebraucht wird und die Bezeichnung den Kern dieses Artikels trifft: Es geht nicht um das Web 3.0 in seiner Gesamtheit, also um künstliche Intelligenz und Ubiquitous Computing, sondern um den Beginn einer neuen JavaScript-Ära. Während die Bezeichnung "Web 2.0" im Bezug auf JavaScript die bisherigen JavaScript-Frameworks und damit vor allem jQuery kennzeichnet, lässt sich in 2013 ein Umschwung im Bereich der Webentwicklung erkennen, der durch neue Ansätze wie MVC-Frameworks oder Node.js geprägt ist. Die jQuery-Epoche ist zwar noch allgegenwärtig, doch mit der stärkeren Verbreitung moderner Webbrowser und HTML5/CSS3 sowie ECMAScript 5 bzw. 6 wird sich das in Zukunft ändern.

JavaScript und Webstandards seit 2009

Die Grafik soll in etwa veranschaulichen, wie die Entwicklung von Webstandards und JavaScript-Frameworks seit 2009 vorangeschritten ist. ECMAScript 6 alias "Harmony" soll Ende 2013 seinen finalen Status erreichen. Bibliotheken wie MooTools, Prototype oder Dojo wurden einst entwickelt, um das Schreiben von JavaScript-Anwendungen einfacher zu machen und eine Website leichter mit Besonderheiten ausstatten zu können. Dazu zählten hauptsächlich Animationen und der Umgang mit Ajax, was JavaScript schließlich zum Durchbruch verhalf. Auch heute sind die Features aktueller Frameworks noch immer essenziell, wenngleich sich die Verteilung und Popularität der verschiedenen Bibliotheken etwas geändert hat. Die obige Grafik zeigt die Beliebtheit der JavaScript-Frameworks und jQuery dürfte heute, also Ende 2013, der klare Liebling im Bereich der Ajax- und DOM-Frameworks sein.

Weiterlesen...
201301Nov

Simple Alarm: Einfacher Wecker für Windows

Nicht unbedingt eine Weckuhr, aber ein einfaches Tool für Erinnerungen stellt die Windows-Anwendung "Simple Alarm" dar, die ich bei GitHub zur Verfügung gestellt habe. Es handelt sich dabei um ein einfaches AutoHotkey-Skript, welches auch als ausführbare EXE-Datei heruntergeladen werden kann. Wie der Name schon sagt, ist die Anwendung sehr einfach gehalten: Lediglich die Uhrzeit sowie eine Nachricht, die angezeigt werden soll, können im Programmfenster eingetragen werden. Anschließend wird das Programm in den Infobereich neben der Uhr platziert und läuft anschließend im Hintergrund.

Simple Alarm - Einfacher Wecker für Windows

Ist der zuvor eingestellt Zeitpunkt erreicht, wird die entsprechende Nachricht angezeigt und das Programm wird wieder beendet. Es handelt sich also um eine sehr rudimentäre Anwendung, die aber ihren Zweck erfüllt, wenn es darum geht, an unregelmäßige Dinge erinnert zu werden.

201226Jul

MonitorMouseMover: Cursor per Shortcut bewegen

Gerade bei Webdesignern und -entwicklern ist die Verwendung eines zweiten Monitors mittlerweile selbstverständlich: Für Paletten, Entwicklertools oder etwa die E-Mail-Anwendung eignet sich ein separater Bildschirm bestens. Die Auflösungen der verwendeten Monitore dürften heutzutage relativ hoch ausfallen, so dass Pixelmaße wie 1920×1200 oder 1680×1050 gängig sein dürften. Die Wege, die mit der Maus zurückgelegt werden, können unter Umständen sehr lang werden, wenn häufig zwischen den Monitoren gewechselt werden muss. Aus diesem Grund hatte ich vor einiger Zeit ein Skript geschrieben, das den Mauszeiger per Tastenkürzel zwischen den beiden Bildschirmen bewegt. Der Cursor wird dabei direkt in die Mitte des anderen Screens bewegt, abhängig davon, auf welchem Monitor sich der Zeiger gerade befindet. Daher trägt das Skript den Namen "MonitorMouseMover".

MonitorMouseMover

Da ich das Skript schon mehrere Jahre im Einsatz habe, ist es mittlerweile zum unverzichtbaren Werkzeug geworden. Bei dem Tool handelt es sich um eine eigenständige Windows-Anwendung (portable EXE-Datei), die in AutoHotkey entwickelt wurde. Das Skript funktioniert mit 2 Monitoren, die unterschiedlich angeordnet sein können und verschiedene Auflösungen haben können. Es spielt also keine Rolle, welcher der beiden Bildschirme als primäres Anzeigegerät festgelegt ist.

Weiterlesen...
201208Feb

Webdesign: CSS-Probleme mit GDI und DirectWrite

Die Welt des Webdesigns hat sich dank individueller Schriftarten durch "@font-face" zum Guten verändert, da Designer nicht mehr auf Systemschriftarten angewiesen sind. Inzwischen unterstützen alle modernen Browser Möglichkeiten, um Schriftarten per "@font-face" in CSS einzusetzen. Das Problem: Browserhersteller beginnen, die Methode zur Darstellung von Schriftarten zu ändern. Das betrifft alle Windows-Systeme ab Windows Vista, denn hier wurde für die ClearType-Darstellung neben der bisher verwendeten GDI-API die Direct2D-API bzw. DirectWrite-API eingeführt. Dadurch ist ein hardwarebeschleunigtes Rendering (also durch die GPU) im Browser möglich. DirectWrite wird in Firefox seit Version 4 und in Internet Explorer seit Version 9 unterstützt. Nur in Chrome kommt bis zum aktuellen Zeitpunkt (Version 16) noch das GDI-Rendering zum Einsatz. Der Safari-Browser ist von dem Dilemma nicht betroffen, da Mac OS X ein eigenes Font-Rendering (Core Text) besitzt. Dafür gibt es ein ähnliches Problem zwischen der Windows- und Mac-Version.
Das eigentliche Problem besteht nun darin, dass die Darstellung von Schriftarten abweicht. Je nachdem, ob die GDI- oder DirectWrite-API verwendet wird, können Abweichungen in Texten entstehen.

Webdesign - CSS-Probleme mit GDI und DirectWrite

In diesem Eintrag bei Stack Overflow wird der Effekt noch einmal deutlich. Wer das Ganze selbst testen möchte, kann dazu auf ein bestehendes jsFiddle-Snippet zurückgreifen. Der springende Punkt ist nun, dass das neue DirectWrite-Rendering ab Firefox 4 und Internet Explorer 9 automatisch aktiviert ist. Läuft der Text aus dem Snippet also über die graue Fläche hinaus, wird DirectWrite und damit Hardwarebeschleunigung verwendet.

Weiterlesen...