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.
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...jQuery-Tutorial: SVG-Daten mit jVectorMap darstellen
Kürzlich berichtete ich über das jQuery-Plugin "jVectorMap", mit dem sich SVG-Daten interaktiv im Browser einbetten lassen. Die Daten werden dabei als JavaScript-Objekte eingelesen und können dann im Browser vergrößert, verschoben und mit Informationen versehen werden. Das Plugin eignet sich also nicht nur für Welt- oder Landkarten, sondern für SVG-Material aller Art.
Da die Frage aufkam, wie sich eigene SVG-Karten mit dem Plugin einbinden lassen, habe ich eine kleine Anleitung verfasst, in der ich die benötigten Schritte zeige. Die eigentlichen SVG-Daten können mit Programmen wie Inkscape oder Adobe Illustrator erzeugt werden.
Auf der Website des jVectorMap-Plugins stehen das eigentliche Skript sowie vorgefertigte Karten zum Download bereit. So gibt es bereits eine komplette Weltkarte und auch eine Karte von Deutschland im benötigten JavaScript-Format. In diesem Tutorial geht es nun darum, eigene SVG-Karten in das erforderliche Format zu bringen und in jVectorMap zu integrieren.
Weiterlesen...