Tag: html-css
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.
HTML5: Aktuelle Demos und Notizen von Mozilla
Christian Heilmann, Principal Technical Evangelist bei Mozilla, hat die Slides zu einer kürzlichen HTML5-Präsentation auf der "Mozilla Vision 2012" in Tokio veröffentlicht. Diese variieren etwas von seinen vorherigen Präsentationen und zeigen die aktuellen Entwicklungen von Mozilla bezüglich HTML5 und CSS3 auf. Dazu werden wieder verschiedene Beispiele aufgeführt wie etwa der morphende CSS3-Würfel. Die 3D-Transitions funktionieren in Firefox erst ab Version 10, die sich momentan im Aurora-Status befindet.
Weiterhin wird der 3D CSS Tester aufgeführt, mit dem sich per GUI bequem CSS3-Attribute wie "perspective", "rotateZ" oder "keyframes" ausprobieren lassen. Auch die Firefox-Erweiterung Tilt wird erwähnt, mit der sich seit geraumer Zeit auf WebGL-Basis Websites dreidimensional betrachten lassen. Dabei wird die DOM-Struktur in verschiedenen Ebenen dargestellt, je nachdem, wie komplex die Verschachtelung der Seite ist.
Insgesamt finden sich in der Präsentation einige interessante Links zu aktuellen Beispielen, die den Einsatz von HTML5 und CSS3 demonstrieren.
KineticJS: HTML5/JS-Library für Canvas-Interaktivität
Spezielle Bibliotheken für HTML5-Canvas-Anwendungen gibt es mittlerweile in Mengen. Aktuelle Beispiele sind Paper.js oder RPG.js, die jeweils sehr unterschiedliche Ziele verfolgen. Auf die Erstellung von interaktiven Canvas-Anwendungen wurde hingegen das Framework KineticJS ausgelegt, das unter Anderem mit Event-Listenern für Canvas-Objekte aufwertet, die dadurch transformiert werden können. KineticJS kommt mit einem durchdachten Ebenen-System, das aus einer Buffer-, einer Hintergrund- und einer Benutzer-Ebene besteht und sich schließlich zum finalen Resultat zusammenfügt.
Die Bibliothek bietet etliche Funktionen, erfordert aber dennoch Kenntnisse über die Canvas-Technik, da durch die API lediglich Interaktionen vereinfacht werden. KineticJS enthält zudem auch Funktionen für mobile Geräte, so dass auch Touch-Ereignisse eingesetzt werden können.
Wer sich Beispiele des Frameworks ansehen möchte, erhält auf dieser Seite einen guten Eindruck. Übrigens lassen sich HTML5-Animationen inzwischen auch in der Cloud erstellen: Die Plattform Mugeda wäre ein solcher Dienst, der sich aktuell noch in einer Preview-Phase befindet.
Adobe Edge: Preview 4 mit Symbolen und Web-Fonts
Adobe arbeitet kräftig an seinem neuartigen Animationswerkzeug für HTML5- und CSS3-Animationen. Kurz vor Weihnachten wurde ein Trailer veröffentlicht, in dem die neuen Features der vierten Preview-Version gezeigt wurden. Nun wurde das Preview 4 von Edge veröffentlicht und steht zum Download bereit. Auf der Features-Seite können die Neuerungen eingesehen werden. Unter der Haube wurden etliche Verbesserungen hinsichtlich Performance und Stabilität eingearbeitet und auch im Interface gibt es interessante Erweiterungen.
So wurden "Symbole" eingeführt, wie man sie aus Flash Professional kennt: Objekte auf der Bühne können also in einem Container verpackt und ineinander verschachtelt werden. Dadurch wird das Erstellen von komplexeren Animationen wesentlich vereinfacht und die Übersicht auf der Bühne wird verbessert.
Weiterhin können nun Web-Fonts eingebettet werden — da Typekit inzwischen zu Adobe gehört, ist eine Einbindung von Typekit-Fonts entsprechend einfach. Unterstützt werden hier neben den bezahlten "Token"-Services auch Offline-Font-Packages (wie FontSquirrel) oder verlinkbare Font-Services wie Google Web Fonts.
Auch die restlichen Neuerungen können sich sehen lassen, so dass Edge immer mehr zu einem wichtigen Werkzeug für moderne HTML/CSS-Animationen wird.
Impress.js: Effektvolle Zoom-Präsentationen mit CSS3
Das Flash-Präsentationstool Prezi erfreut sich schon einiger Zeit großer Beliebtheit, da sich relativ einfach räumliche Präsentationen erstellen lassen: Einzelne Slides werden in einem dreidimensionalen Raum platziert und durch Navigieren entsprechend vergrößert oder verkleinert. Diesem Vorbild folgt der Entwickler Bartek Szopka, der mit seinem JavaScript-Framework Impress.js ein ähnliches Werkzeug geschaffen hat. Der Unterschied liegt in der Technologie, da Impress-Präsentation mit JavaScript und CSS3 auskommen.
Ähnlich wie in Prezi-Präsentationen werden auch hier die Slides räumlich angeordnet und durch einen Zoom-Effekt animiert. Zum Einsatz kommen unter Anderem die CSS3-Attribute "rotate" und "perspective", die beispielsweise auf dieser WebKit-Seite gut demonstriert werden. Leider liegt auch hier noch das Problem: Durch die Verwendung von "perspective" funktionieren die Präsentationen derzeit nur in WebKit-Browsern wie Safari oder Chrome. In Firefox werden solche Transformationen erst ab Version 10 möglich sein.
Wer sich das Framework dennoch ansehen und damit experimentieren möchte, kann den Quelltext bei GitHub herunterladen.
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.
Peoplemov.in: Visualisierung von Wanderungsströmen
Zwar noch aus dem letzten Jahr, aber dennoch interessant, ist das experimentelle Projekt Peoplemov.in von Carlo Zapponi: Bei der Seite handelt es sich um eine interaktive Visualisierung, welche die weltweiten Ein- und Auswanderungen darstellt und erforschbar macht. Das riesige Flussdiagramm, das auf offenen Daten der World Bank basiert, wurde anfangs mit SVG umgesetzt. Allerdings stellte der Entwickler bald fest, dass sich derartig komplexe Grafiken nicht effektiv mit SVG darstellen lassen und wechselte schließlich zu HTML5 und Canvas.
Entstanden ist eine anschauliche Darstellung von Graphen, welche die Einwohnerzahl verschiedener Länder sowie deren Ein- und Auswanderer repräsentieren. Während auf der linken Seite des Diagramms die Auswanderungen angesehen werden können, finden sich auf der rechten Seite die Einwanderer, die ebenfalls nach Land sortiert sind. Die Zahlen stammen aus dem Jahr 2010, weshalb die Visualisierung nicht mehr ganz aktuell ist. Dennoch zeigt das Projekt die Möglichkeiten von HTML5 und Carlo Zapponi plant zudem, das Toolkit zu veröffentlichen, mit dem er das Ganze realisiert hat.
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.
Kommentar schreiben