Tilt zeigt Webseitenaufbau in 3D an.
Tilt zeigt Webseitenaufbau in 3D an. (Bild: Golem.de)

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.

Anzeige

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.

  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
  • Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)
Firefox-Erweiterung Tilt zeigt Golem.de in 3D (Bild: Golem.de)

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.

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 zu visualisieren. In einem Blog informieren die Entwickler über den aktuellen Stand.

Tilt kann über Github als XPI heruntergeladen und auch als Quellcode bezogen werden.


SoniX 04. Aug 2011

Wir sind auch nicht hier um Sie zu überzeugen. Ich persönlich kann es aus dem Text auch...

c3rl 02. Aug 2011

Auch mit guter räumlicher Auffassungsgabe, welche ich mir zuschreibe, und auch trotz...

Hans Schmucker 01. Aug 2011

Etwas mehr muss es dann doch schon sein (3D-nav, z-index beeachten...) , aber ja: es gibt...

Hans Schmucker 01. Aug 2011

Es liegt auf dem linken Mousebutton.

Kommentieren


Webmaster / Internet Blog / 07. Aug 2011

Tilt: Webseitenstrukturen in 3D



Anzeige

  1. Fachinformatiker (m/w)
    ADAC TruckService GmbH & Co. KG, Laichingen
  2. SAP Inhouse Berater (m/w) QM
    JOST-Werke GmbH, Neu-Isenburg
  3. Kundenberater für ERP-Projekte (m/w)
    ABACUS Business Solutions GmbH, München
  4. Softwaretester - Engineering Software (m/w)
    Festo AG & Co. KG, Esslingen bei Stuttgart

 

Detailsuche


Spiele-Angebote
  1. VORBESTELLAKTION: Tom Clancy's Rainbow Six Siege
    ab 59,95€ (Vorbesteller-Preisgarantie) - Vorbesteller erhalten Beta-Zugang - Release 13.10.
  2. VORBESTELLAKTION: Star Wars Battlefront (PC/PS4/Xbox One)
    ab 59,99€ (Vorbesteller-Preisgarantie) - Release 19.11.
  3. PS4 + The Witcher 3 + Comic
    399,00€

 

Weitere Angebote


Folgen Sie uns
       


  1. Kritische Infrastruktur

    Weitere Beweise für Geheimdienstangriff auf Bundestag

  2. Überwachung

    Berliner abgehört - aus Protest gegen die NSA

  3. Tor

    Hidden Services leichter zu deanonymisieren

  4. Telefónica

    Alle Base-Shops verschwinden

  5. Electronic Arts

    Nächstes Need for Speed benötigt Onlineverbindung

  6. Cloud Test Lab

    Google bringt Testservice für App-Entwickler

  7. Test Lara Croft Relic Run

    Tomb Raider auf Speed

  8. Bundestagverwaltung

    Angreifer haben Daten aus dem Bundestag erbeutet

  9. Sicherheitslücken

    Fehler in der Browser-Logik

  10. Google Fotos ausprobiert

    Gute Suche, abgespeckte Bildbearbeitung



Haben wir etwas übersehen?

E-Mail an news@golem.de



Soziales Netzwerk Sociax: Das Facebook mit mehr Privatsphäre
Soziales Netzwerk Sociax
Das Facebook mit mehr Privatsphäre
  1. Nepal Facebook, Google und Openstreetmap helfen Erdbebenopfern
  2. Karrierenetzwerk LinkedIn will Zukauf für 1,5 Milliarden US-Dollar
  3. Soziale Netzwerke Vernetzt und zugenäht!

Berlin E-Prix: Motoren, die nach Star Wars klingen
Berlin E-Prix
Motoren, die nach Star Wars klingen
  1. Funktechnik Daimler und Qualcomm vernetzen das Auto

Apps für Googles Cardboard: Her mit der Pappe!
Apps für Googles Cardboard
Her mit der Pappe!
  1. Game of Thrones Auf der Mauer weht ein eisiger Wind
  2. VR im Journalismus So nah, dass es fast wehtut
  3. Deep angespielt "Atme tief ein und tauche durch die virtuelle Welt"

  1. Re: Bessere Pläne

    Squirrelchen | 06:21

  2. Re: Musks Ideen sind Gold wert

    jungundsorglos | 05:56

  3. Re: Danke Elon !

    jungundsorglos | 05:46

  4. Re: Leider hat er Züge eines Diktators

    jungundsorglos | 05:42

  5. Re: Schade

    wasabi | 05:35


  1. 18:56

  2. 16:45

  3. 15:13

  4. 14:47

  5. 14:06

  6. 14:01

  7. 14:00

  8. 13:39


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel