Tag: html-css

X-Tag: JavaScript-Polylib für Web Components

Im Dezember letzten Jahres hatte ich über das Web UI berichtet, einer User Interface-Bibliothek für Google Dart, die von Web Components Gebrauch macht. Bei den Web Components handelt es sich um eine sehr interessante Methode, um dynamische HTML-Bausteine zu erzeugen und wiederzuverwenden. So lassen sich also eigene Komponenten erstellen, die mit HTML, CSS und JavaScript ausgestattet werden können.
Die Web Components befinden sich noch im Standardisierungsprozess des W3C und stehen aktuell nur in Google Chrome zur Verfügung. Dennoch gibt es seit einiger Zeit schon diverse Polyfills, wie beispielsweise X-Tag von Mozilla.

Bei X-Tag handelt es sich um eine kleine JavaScript-Bibliothek, die das Verhalten eines Web Components simuliert: So können eigene HTML-Tags definiert werden, die komplette Widgets enthalten können, wie etwa ein Accordion, ein Kontaktformular oder gar eine Kartenansicht. Das Panel-Beispiel zeigt etwa das asynchrone Laden einer HTML-Datei in einen Container. Der X-Tag-Code dazu sieht aus wie folgt:

• <x-panel src="some-page.html"></x-panel>

Es gibt noch weitere Polyfills für Web Components, wie beispielsweise Model Driven Views, die ebenfalls vielversprechend aussehen.

Unreal Engine 3: Erste Demo der HTML5-Version

Erst im März berichtete ich über die Portierung der Unreal Engine 3 in den Webbrowser, die Epic Games zusammen mit Mozilla realisiert hatte. Die HTML5-Demo war allerdings nur Besuchern der GDC 2013 vorbehalten. Seit letzter Woche kann die HTML5-Version der "Epic Citadel" nun auch öffentlich getestet werden. Bei der HTML5-Demo handelt es sich um die dreidimensionale Umsetzung einer mittelalterlichen Burg, die virtuell erkundet werden kann. Um die Demo ausführen zu können, wird ein Nightly Build von Firefox empfohlen, da in dieser Version spezielle JavaScript-Anpassungen enthalten sind, die für einen flüssigen Ablauf der WebGL-Demonstration sorgen.

In den FAQ der HTML5-Demo schreibt Epic Games Genaueres über die JavaScript-Erweiterungen und die unterstützten Browser. Unter Google Chrome läuft die Demo zwar, aber es kommt zu Abstürzen. Unter Safari oder Opera kann die Demonstration derzeit nicht angesehen werden, da die Browser nicht mit der Engine kompatibel sind. Es handelt sich also noch um eine sehr frühe Demo, die aber schon jetzt zeigt, was mit WebGL möglich ist. Erst kürzlich wurde bekannt, dass Microsoft auch in Internet Explorer 11 WebGL unterstützen will.

LayoutIt!: Interface Builder für Bootstrap-Projekte

Wer heutzutage eine moderne Website in HTML, CSS und JavaScript umsetzen möchte, muss dabei eventuell nicht nur alte Webbrowser unterstützen, sondern die Seite in der Regel auch für verschiedene Bildschirmauflösungen und Geräte optimieren. Responsives Design ist dank CSS3 leicht umzusetzen, muss aber dennoch gut geplant und durchdacht werden. Etwas Abhilfe hierbei können verschiedene Frameworks schaffen, wie beispielsweise Twitters Bootstrap-Framework. Hiermit stehen solide HTML- und CSS-Bausteine bereit, die durch JavaScript-Plugins erweitert werden können. Zudem werden ältere Browser durch Shims unterstützt.
Nun gibt es für das Bootstrap-Framework auch einen Interface Builder, mit dem sich die Grundkomponenten per Drag 'n' Drop auf eine Arbeitsfläche ziehen und anschließend exportieren lassen. Die Web-Anwendung LayoutIt! ermöglicht diesen Prozess und ist relativ einfach aufgebaut.

Der Editor kann direkt im Browser gestartet werden und setzt sich aus einer Spalte mit den verfügbaren Komponenten und einem Arbeitsbereich zusammen, in dem die Bausteine platziert werden. Diese können innerhalb des Arbeitsbereichs bewegt und wieder entfernt werden. Ein mit LayoutIt! erstelltes Bootstrap-Layout lässt sich schließlich exportieren und steht dann in Form von HTML-, CSS- und JavaScript-Dateien zur Verfügung.

Chrome: Bald eigene Rendering-Engine namens Blink

Ende letzter Woche sorgte Google für etwas Aufsehen bei seinem Browser Chrome: Das Unternehmen will in rund 10 Wochen die Rendering-Engine des Webbrowsers von WebKit auf eine eigene Engine namens "Blink" umstellen. Mit Version 28 von Chrome soll die Engine dann auf allen Plattformen ausgeliefert werden. Bei "The Next Web" findet sich die Frage-und-Antwort-Runde mit den Entwicklern und Details zur Engine-Änderung.

So dürften laut dem Artikel auch die Richtlinien von Apples iOS eine Rolle spielen, denn hinsichtlich der Browser-Entwicklung erlaubt Apple lediglich die Verwendung der UIWebView-Klasse, die ausschließlich das Rendern über die WebKit-Engine ermöglicht. Aus dem gleichen Grund hat man sich bei Mozilla dazu entschieden, keinen Browser für iOS zu entwickeln, da man auch hier die eigene Rendering-Engine (also Gecko) einsetzen will.
Bei Googles Blink handelt es sich um einen Fork von WebKit, der ebenfalls als Open-Source-Projekt veröffentlicht werden wird. Es wird bei der Engine verstärkt auf die Unterstützung einer Multi-Prozess-Architektur gesetzt, was auch ein Grund für die Entwicklung der Engine war.
Die Blink-Engine ist angeblich schon in den Canary-Builds enthalten, wobei auf der "chrome://version"-Seite im UserAgent-String noch die Bezeichnung "AppleWebKit" zu finden ist.

AuraJS: Framework für skalierbare JavaScript-Projekte

Viele werden den Entwickler und Chrome-Mitarbeiter Addy Osmani bereits von seinem Blog, seinen eBooks oder seinem TodoMVC-Projekt kennen. Er hat vor einiger Zeit eine sehr interessante Präsentation über skalierbare JavaScript-Anwendungen veröffentlicht, in der er auf verschiedene Aspekte von JavaScript und größeren Projekten eingeht.
Hier geht es vor allem um Entwurfsmuster, Privatisierung, asynchrone Module (AMD) und einer Widget-Architektur. Basierend auf seiner Präsentation ist nun das Framework AuraJS entstanden und steht ab sofort bei GitHub als Open-Source-Projekt bereit.

AuraJS stellt ein skalierbares Framework dar, das im Kern aus dem Mediator-Pattern (publish, subscribe, installTo) besteht und das asynchrone Laden von Modulen durch das Facade-Pattern ermöglicht. Lose Kopplung sowie das Privatisieren von Attributen und Methoden durch das Module- bzw. Facade-Pattern stehen hierbei im Vordergrund. Zudem stellt AuraJS ein Wrapper für jQuery und Dojo dar, wodurch auch DOM-Manipulationen möglich sind:

• aura.core.dom.query('#search_input').attr('title', 'test');
  aura.core.dom.animate('#button', { width: 200, duration: 50 });

Mit den Aura-Todos steht bereits ein AuraJS-Beispiel zur Verfügung, das mit Node.js und Grunt erzeugt werden kann. Die Bibliothek dürfte eine gute Inspiration für zukünftige JavaScript-Projekte mit größerem Anspruch sein.

Adobe Muse: Webdesign-Tool für mobile Websites

Seit über einem Jahr bietet Adobe nun sein neuartiges Webdesign-Werkzeug Muse an, mit dem sich Websites auch ohne Programmierkenntnisse erstellen lassen. Dabei kann auf eine solide Auswahl an Widgets (Accordions, Lightboxes, Kontaktformulare, Diashows, uvm.) zurückgegriffen werden. Die Benutzeroberfläche der Software ist an bestehende Print-Werkzeuge wie Illustrator oder InDesign angepasst, so dass ich Print-Designer leicht zurechtfinden dürften.
Das Programm hat inzwischen einige Neuerungen erfahren, zu denen auch die Umsetzung von mobilen Websites zählt.

So lassen sich mit Muse nun auch responsive Websites erzeugen, die entsprechend auf mobile Endgeräte und deren Bildschirmgrößen reagieren. Das Erstellen von mobilen Varianten einer Seite ist an das "alternative Layout" von InDesign angelehnt, was die Arbeitsweise erleichtern soll. Muse bietet zudem Multi-Touch-Unterstützung und integriert diverse jQuery-Plugins, die Touch- und Swipe-Gesten ermöglichen. Mittlerweile wurde das JavaScript-Framework "Spry" komplett durch jQuery ersetzt und auch der exportierte HTML-Quelltext wurde um Einiges verbessert.
Muse-Websites können entweder im HTML-Format auf einen eigenen Webserver hochgeladen oder bei Adobe per Business Catalyst gehostet werden. Muse kann für 18,44 EUR in der Creative Cloud abonniert werden.

Microsoft: Internet Explorer 11 auch mit WebGL

Der Web-Entwickler Francois Remy hat kürzlich einen Einblick in die Vorschau-Version von Internet Explorer 11 gegeben, die zusammen mit einer frühen Version von Windows "Blue" im Netz aufgetaucht ist. Nun is auch bekannt geworden, dass in Version 11 des Microsoft-Browsers eine Implementierung des 3D-Standards WebGL integriert ist, die allerdings noch als experimentell anzusehen ist. Zur Aktivierung müssen nur ein paar Schlüssel in der Windows-Registry angepasst werden.

Der Zug von Microsoft, WebGL nun doch in ihrem Browser zu integrieren, ist auf der einen Seite verwunderlich: Immerhin hatte sich das Unternehmen im Sommer 2011 gegen WebGL ausgesprochen, da man Sicherheitslücken und Abstürze des Betriebssystems befürchtete. Doch angesichts der rapiden Entwicklung des Webstandards ist man sich wohl den Möglichkeiten bewusst geworden. Erst vor ein paar Tagen wurde eine erste Implementierung der Unreal Engine 3 in Firefox auf der GDC gezeigt. Microsoft hat sich also mit den Gegebenheiten abgefunden, muss aber nun bei der Implementierung von WebGL am Ball bleiben, denn Mozilla hat mit seiner JavaScript-Engine-Erweiterung Odinmonkey (asm.js) eine ordentliche Performance vorgelegt, mit der Internet Explorer 11 derzeit noch nicht mithalten kann.

Mozilla: Unreal Engine 3 nativ im Webbrowser nutzbar

Wer den Mozilla-Blog verfolgt, wird wahrscheinlich schon die Meldung über die Unreal Engine 3 gelesen haben: Mozilla und Epic haben es in einer ersten Demo geschafft, die 3D-Engine in den Browser zu portieren. Das Ganze ist ohne Plugin möglich und basiert auf dem Javascript-Subset asm.js sowie der JavaScript-Engine-Anpassung "Odinmonkey" (Firefox Nightly), welche das Ausführen von JavaScript-Anwendungen beschleunigt – JavaScript-Code kann dadurch halb so schnell wie nativer Code, also in der Geschwindigkeit von Java oder C# ausgeführt werden. Durch asm.js werden strikte Typen für Float- und Integer-Werte und ein virtueller Heap-Speicherbereich eingeführt, der mit einem typisierten Array realisiert wird. Etwas Ähnliches gab es kürzlich schon mit dem Mozilla-Compiler LLJS, der zudem Pointer oder Structs bietet.

Die Portierung der Unreal Engine 3 (über 1 Million Zeilen Code) basierte auf der Verwendung von Emscripten, einem LLVM-zu-JavaScript-Compiler. In dem Blog-Eintrag findet sich momentan nur ein Video der Demonstration und der Hinweis, dass man bei Mozilla derzeit mit Disney, EA und ZeptoLab zusammenarbeitet, um die Performance-Verbesserungen in modernen Browser-Spielen unterzubringen. Wer die GDC 2013 besucht, kann die Demo in Firefox am nVidia-Stand testen.
Das Portieren einer renommierten 3D-Engine in den Browser war eigentlich nur eine Frage der Zeit, denn erst im Januar wurde bereits mit BananaBread ein Ego-Shooter gezeigt, der auf WebGL und JavaScript basiert. Die Demo aus dem Video zeigt übrigens die Epic Citadel, die auch schon für die Flash-Version der Engine (Stage 3D) genutzt wird.