Zum Hauptinhalt Zur Navigation

Tilt: Webseitenstrukturen in 3D zeigen

Die Firefox-Erweiterung Tilt macht den Aufbau einer Webseite sichtbar. In einem 3D-Modell kann der Nutzer die Struktur räumlich erkennen, ohne auch nur eine Zeile HTML-Code zu studieren.
/ Andreas Donath
17 Kommentare News folgen (öffnet im neuen Fenster)
Tilt zeigt Webseitenaufbau in 3D an. (Bild: Golem.de)
Tilt zeigt Webseitenaufbau in 3D an. Bild: Golem.de

Die 3D-Visualisierung der Firefox-Extension Tilt ist mit Hilfe von WebGL realisiert worden und nutzt das DOM-Modell zur Strukturierung der Ansicht. Die 3D-Seiten erinnern an Bauklötze, die in verschiedenen Ebenen angeordnet sind, je nachdem, zu welchem DIV-Block oder UL oder zu welcher anderen Dokumentenstruktur sie gehören. Der Body als unterster Layer bildet die Basis der 3D-Darstellung.

Tilt wurde von Victor Porof, Cedric Vivier und Rob Campbell entwickelt. Das Projekt startete im Rahmen des Google Summer of Code und wird nun nach Angaben des Teams weiterentwickelt. Die Firefox-Erweiterung soll kein reines Spaßprojekt sein, sondern vielmehr Webentwicklern die verschiedenen Beziehungen der Webseitenelemente zueinander grafisch verdeutlichen. So sollen Fehler schneller erkannt werden.

Webseiten-Visualisierung in 3D
Webseiten-Visualisierung in 3D (02:57)

Gestartet wird Tilt über das Menü oder über die Tastenkombination Strg+Shift+L und mit Escape wird die Darstellung wieder beendet.

Künftig soll es mit Tilt auch möglich sein, den markierten Teil des HTML-Codes optisch hervorzuheben, die 3D-Darstellung bei Codeänderungen automatisch zu aktualisieren oder den Z-Index(öffnet im neuen Fenster) zu visualisieren. In einem Blog(öffnet im neuen Fenster) informieren die Entwickler über den aktuellen Stand.

Tilt kann über Github als XPI(öffnet im neuen Fenster) heruntergeladen und auch als Quellcode bezogen werden.


Relevante Themen