Tag: tricks
Adobe: Entwurf für CSS3-Shader eingereicht
Wer sich in WebGL oder generell in die 3D-Grafikprogrammierung einarbeiten will, kommt an Shadern nicht vorbei. Bei Shadern handelt es sich wie gesagt um kleine Programme, die von der Grafikkarte interpretiert werden und die Informationen einer 3D-Szene beeinflussen können. Durch Vertex-Shader können die Eckpunkte (Vertices) und durch Fragment-Shader (auch Pixel-Shader genannt) die Pixelwerte verändert werden. Für Transformationen der Oberfläche kommt also der Vertex-Prozessor zum Einsatz, während für Farbveränderungen auf Pixel-Ebene der Fragment-Prozessor angesprochen wird.
Shader werden in der C-ähnlichen Programmiersprache GLSL geschrieben und machen Gebrauch von der Hardwarebeschleunigung der Grafikkarte. OpenGL-Treiber müssen daher installiert sein.
Bei Adobe werden gerade wieder abgefahrene Ideen entwickelt und eine davon ist die Idee von CSS-Shadern: Damit sollen Shader also auch für DOM-Elemente mittels CSS möglich gemacht werden.
SVG-Filter sollen laut Adobe bald auch in HTML/CSS verfügbar (CSS-Attribut "filter") sein und CSS-Shader werden dann über eine Erweiterung der "Filter Effects" möglich sein. So können DOM-Elemente in ein Vertex-Mesh (also mehrere Polygone mit Eckpunkten) konvertiert und anschließend durch einen Vertex-Shader transfomiert werden. Bei der darauf folgenden Rasterung können die Pixel durch einen Fragment-Shader verändert werden, was Effekte wie "Gaußscher Weichzeichner" ermöglicht.
Adobe hat den Entwurf für CSS-Shader bei der W3C CSS-SVG Effects Task Force eingereicht und so könnten die Shader schon bald experimentell in WebKit eingesetzt werden.
Webdesign: Farbspiele, Typografie und mehr
Mit Farben lässt sich nicht nur in Bildbearbeitungsprogrammen spielen: Zur kommenden Seite Method of Action wurde das Spiel Color entwickelt, in dem es darum geht, möglichst schnell Farben und Farbpaare anhand eines Farbkreises zuzuordnen. Was zu Beginn relativ einfach durch die Werte "Hue" und "Saturation" zu bewerkstelligen ist, wird später schon etwas schwieriger, wenn analoge oder ternäre Farbschemata erkannt werden müssen.
Das Spiel ist sehr gelungen und hilft in jedem Fall dabei, Farben und deren Anordnungen besser zu verstehen. Zudem stehen noch zwei weitere Spiele bereit, mit denen sich typografische Details studieren lassen: Bei Shape Type und Kern Type können sowohl die Pfade einzelner Buchstaben als auch deren Laufweite in ganzen Wörtern analysiert und abgeschätzt werden.
Bei der Seite "Method of Action", die sich derzeit in einer Preview-Phase befindet, wird es unter Anderem darum gehen, ein besseres Verständnis für Design zu vermitteln. In "Missionen" können Benutzer bestimmte Design-Tasks erledigen und von erfahrenen Benutzern bewerten lassen. Nach und nach werden dann komplexere Missionen freigeschaltet und mit jeder erfolgreich abgeschlossenen Mission steigt auch die virtuelle "Erfahrung", die dann auch dazu genutzt werden kann, über eingereichte Design-Tasks von anderen Benutzern zu entscheiden. Man darf also gespannt sein.
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.
HTML5 Cheatsheet: Tags, Event Handler und Support
Dokumentation, Referenzen oder kurze Beispiele können das Leben eines Entwicklers wesentlich erleichtern. Oft werden nur kompakte Informationen zu einer Thematik benötigt — hier haben sich Kurz-Referenzen in Form von Cheatsheets bewährt. Bei Devcheatsheet oder Cheat-Sheets.org finden sich gleich ganze Sammlungen an Cheatsheets zu verschiedenen Sprachen.
Auch für HTML5 gibt es mittlerweile nennenswerte Referenzen: Neben dem Canvas-Cheatsheet lohnt sich auch ein Blick in die HTML-Cheatsheets von InMotion Hosting, die sowohl Tags und Event Handler als auch den Browser-Support abdecken.
Bei den Übersichten handelt es sich um hochauflösende PNG-Grafiken mit einer Größe von 2.740 × 1.880 Pixeln. Das erste Cheatsheet zeigt einen Überblick von neuen, bestehenden und obsoleten HTML-Tags, die alphabetisch sortiert sind. In der zweiten Grafik finden sich die neuen Event Handler, die als DOM-Attribute oder per JavaScript-Event-Listener eingesetzt werden können. Dazu zählen beispielsweise Drag 'n' Drop-Events, Medien-Aktionen oder Formular-Ereignisse.
Im letzten Cheatsheet werden schließlich die Webbrowser und deren HTML5-Unterstützung aufgezeigt, so dass die 3 Referenzen eine nützliche Kurz-Dokumentation für HTML5-Entwickler darstellen.
JavaScript: Objektorientierte Programmierung verstehen
Dass sich JavaScript und die klassische objektorientierte Programmierung etwas unterscheiden, dürfte inzwischen allgemein bekannt sein. Mit Projekten wie JavaScript++ wird versucht, dem prototypischen Ansatz entgegenzuwirken — das dürfte vor allem für Entwickler interessant sein, die aus einer echten Programmiersprache wie Java oder C++ kommen.
Wer dem (durchaus leistungsfähigen) Pfad der nativen JavaScript-Programmierung folgen möchte, muss sich mit den Gegebenheiten auseinandersetzen und diese verstehen. In JavaScript besteht alles aus Objekten und eine Klassenhierarchie samt Vererbung muss daher auf einem anderen Weg umgesetzt werden. Hierzu gibt es bereits etliche Artikel, aber der Beitrag von Quildreen Motta ist sehr gelungen und lesenswert.
Der Entwickler unterstreicht die reine Theorie mit anschaulichen Darstellungen, welche die Materie verdeutlichen. Für den Artikel wird Grundwissen in JavaScript vorausgesetzt: Der prototypische Ansatz von JavaScript wird detailliert erklärt und anhand von einfachen Code-Beispielen vertieft.
Three.js: Beispiel für einfache Partikel-Simulation
Da WebGL immer stärker im Kommen ist, werden Frameworks wie PhiloGL oder Three.js ebenfalls wichtiger. Wer nach interessanten WebGL-Projekten sucht, wird an Evan Wallace nicht vorbeikommen.
Weitere Projekte und Tutorials zu dieser Thematik findet sich auch im Lab von Aerotwist. Paul Lewis präsentiert hier verschiedene Effekte und Anleitungen, die auf WebGL oder Three.js aufbauen.
Ein aktuelles Tutorial beschreibt die Erstellung von Partikeln mit der Three.js-Engine. Der Entwickler zeigt in diesem Beispiel, wie einfach sich eine simple Partikel-Simulation umsetzen lässt. Einsteigern, die noch etwas weiter vorne anfangen wollen, sei dieses Tutorial empfohlen, in dem die Grundlagen erklärt werden.
Sehenswert sind auch diese beiden Projekte, in denen Paul Lewis mit verschiedenen Effekten experimentiert.
W3C: Entwurf für CSS3-Exclusions veröffentlicht
Dass Adobe Spezialist für Software ist, mit der sich analoge und digitale Magazin-Layouts erstellen lassen, dürfte allgemein bekannt sein. Auch Flash-Entwickler können seit dem "Text Layout Framework" (TLF-Text) auf Optionen zurückgreifen, die Textblöcke in spezielle Formen bringen können. So kann der Textfluss dahingehend angepasst werden, dass die Zeilenlänge einer definierten Form entspricht. Diese Möglichkeit will Adobe auch Webentwicklern an die Hand geben, die ihre Texte mit CSS formatieren. Dazu wurde ein Entwurf für das CSS Regions-Modul eingereicht, der besondere Text-Layouts ermöglicht.
Nun wurde seitens des W3C auch ein erster Arbeitsentwurf vorgelegt, der das "CSS Exclusions and Shapes Module" beschreibt — also eine Technologie, mit der sich komplexe Layouts auf Websites umsetzen lassen.
Bei CSS Exlcusions handelt es sich also um definierbare Formen, die von Texten umschlossen werden können. Dabei können verschiedene Positionierungen angewendet werden. Beispiele für die neuen Eigenschaften wären "wrap-flow", "wrap-through" oder "shape-inside".
Das Ganze funktioniert derzeit in der WebKit-Engine (Safari, Google Chrome) und auf der Adobe Labs-Seite kann ein Paket mit Beispielen heruntergeladen werden, in dem auch ein prototypischer Mini-Webbrowser auf WebKit-Basis enthalten ist. Neben Google hat sich auch Microsoft an den Vorschlägen beteiligt, weshalb die Technik auch in einer Vorab-Version von Internet Explorer 10 zu finden ist.
HTML5: Tutorial-Serie über WebGL von Opera
Dass hinter Opera nicht nur eine Browser-Schmiede, sondern auch eine Community bzw. eine Entwicklergemeinde steckt, dürfte seit der Opera Developer Community allgemein bekannt sein. Dort werden regelmäßig interessante Beiträge aus verschiedenen Bereichen der Webentwicklung veröffentlicht, die für gewöhnlich eine hohe Qualität aufweisen.
Kürzlich wurde eine Tutorial-Serie über WegGL gestartet und der erste Artikel dieser Serie beschäftigt sich mit der Funktionsweise von WebGL und bestehenden Frameworks, welche die Entwicklung von WebGL-Anwendungen wesentlich vereinfachen.
Da WebGL im Gegensatz zu anderen Web-Technologien etwas komplexer ist, ist ein grundsätzliches Verständnis wichtig für die Umsetzung von entsprechenden Ideen. WebGL-Frameworks wie Three.js oder PhiloGL kümmern sich bereits um die etwas schwierigeren Tasks, doch Hintergrundwissen zur Rendering Pipeline beispielsweise kann das Verständnis von Szenen, Lichtern und Modellen unterstützen.
Der erste Artikel der Opera Developer-Serie ist also gelungen und bietet nützliche Informationen zum Thema WebGL.
Kommentar schreiben