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.
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".
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...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.
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...Windows 7 und Mac OS X: Fehler bei Verbindung
Wer ein Netzwerk zwischen einem Windows 7- und einem Mac OS X-Computer herstellen möchte, sollte in der Regel ohne Probleme auskommen. Es dürfte allgemein bekannt sein, dass von Mac OS X aus per Menü "Gehe zu -> Mit Server verbinden…" und einer Serveradresse wie "smb://win7pc" auf Windows zugegriffen werden kann. Von der anderen Seite aus ist der Vorgang auch problemlos möglich, sofern auf dem Mac OS X-Rechner die "Windows-Freigabe" aktiviert ist.
Je nachdem, wie die Benutzerkonten in OS X konfiguriert sind, ist eine Anmeldung mit oder ohne Benutzername und Kennwort möglich. Hierbei sollten eigentlich keine Komplikationen auftreten. Es kann dennoch vorkommen, dass der Zugriff trotz bestehender Verbindung fehlschlägt. Eine Firewall oder eine fehlerhafte Konfiguration der IP-Adressen (DHCP) könnten die Gründe sein. Wenn diese Faktoren ausgeschlossen werden können, kann die Suche nach der Fehlerquelle lästig werden.
Es gibt daher noch einen weiteren Trick, mit dem die Verbindung erneuert werden kann, so dass der Zugriff anschließend wieder funktionieren sollte.
HTML/CSS: Horizontale und vertikale Zentrierung
Die Entwicklung eines soliden HTML/CSS-Grundgerüsts stellt immer noch die Basis für ein individuelles Web-Projekt dar. Trotz der Möglichkeiten von CSS3 und HTML5 sind bestimmte Aspekte gleich geblieben. Layouts unterliegen den Fähigkeiten und Einschränkungen von Cascading Style Sheets und durch Grid-Frameworks oder Boilerplates lässt sich hier lediglich Zeit einsparen. Spezielle Probleme oder Anforderungen an ein Layout müssen stets per Hand gelöst werden. Natürlich existieren durch Pre-Processing mittels PHP oder Post-Processung mit JavaScript Möglichkeiten, um besonderen Gegebenheiten entgegenzukommen. Als erster Weg sollte dennoch die klassische HTML/CSS-Lösung angedacht werden, sofern es realisierbar ist.
Ein allgemeine und etwas ältere Anforderung an ein HTML-Layout kann so die horizontale und vertikale Zentrierung sein, die möglichst browserübergreifend funktionieren soll. Es gibt verschiedene Methoden, diese Darstellung zu bewerkstelligen und ich will in dieser kurzen Anleitung die Technik beleuchten, die sich bisher bewährt hat. Zudem will ich den Nachteil einer anderen Technik aufzeigen, die ebenfalls bekannt ist und häufig Verwendung findet.
Ziel ist es also, einen Container mit einer festen Größe sowohl horizontal als auch vertikal zu zentrieren. Ähnlich wie beim Sticky Footer ist dies nur mit einem zusätzlichen Container möglich. Es gilt also abzuwägen, ob eine CSS-Lösung eingesetzt werden soll oder ob der Container einfach per JavaScript zentriert werden kann.
Weiterlesen...