Anzeige
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.


eye home zur Startseite
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. IT-Scrum Master Payment Solutions (m/w)
    Media-Saturn IT Services GmbH, Ingolstadt
  2. Senior Consultant SAP HCM (m/w)
    über Mentis International Human Resources GmbH, Nordbayern
  3. UX Designer für Mobile Apps (m/w)
    Daimler AG, Ulm
  4. Softwareentwickler Java / Webentwickler (m/w)
    syncpilot GmbH, Puchheim bei München

Detailsuche



Anzeige

Folgen Sie uns
       


  1. Arbeitsbedingungen

    Apple-Store-Mitarbeiterin gewährt Blick hinter die Kulissen

  2. Modulares Smartphone

    Project-Ara-Ideengeber hat von Google mehr erwartet

  3. Telekom-Konzernchef

    "Vectoring schafft Wettbewerb"

  4. Model S

    Teslas Autopilot verursacht Auffahrunfall

  5. Security

    Microsoft will Passwort 'Passwort' verbieten

  6. Boston Dynamics

    Google will Roboterfirma an Toyota verkaufen

  7. Oracle-Anwältin nach Niederlage

    "Google hat die GPL getötet"

  8. Selbstvermessung

    Jawbone steigt offenbar aus Fitnesstracker-Geschäft aus

  9. SpaceX

    Falcon 9 Rakete kippelt nach Landung auf Schiff

  10. Die Woche im Video

    Die Schoko-Burger-Woche bei Golem.de - mmhhhh!



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Formel E: Monaco-Feeling beim E-Prix in Berlin-Mitte
Formel E
Monaco-Feeling beim E-Prix in Berlin-Mitte
  1. Hewlett Packard Enterprise "IT wird beim Autorennen immer wichtiger"
  2. Roborace Roboterrennwagen fahren mit Nvidia-Computer
  3. Elektromobilität BMW und Nissan wollen in die Formel E

Moto G4 Plus im Hands on: Lenovos sonderbare Entscheidung
Moto G4 Plus im Hands on
Lenovos sonderbare Entscheidung
  1. Lenovo Moto G4 kann doch mit mehr Speicher bestellt werden
  2. Android-Smartphone Lenovos neues Moto G gibt es gleich zweimal
  3. Motorola Aktionspreise für aktuelle Moto-Smartphones

Business-Notebooks im Überblick: Voll ausgestattet, dockingtauglich und trotzdem klein
Business-Notebooks im Überblick
Voll ausgestattet, dockingtauglich und trotzdem klein
  1. Elitebook 1030 G1 HPs Core-M-Notebook soll 13 Stunden durchhalten
  2. Windows 7 und 8.1 Microsoft verlängert den Skylake-Support
  3. Intel Authenticate Fingerabdruck und Bluetooth-Smartphone entsperren PC

  1. Re: lowcarb funktioniert auch .. (ganz ohne Sport)

    opodeldox | 11:32

  2. Re: Viel zu hohe Erwartungen seitens des Ideengebers

    Moe479 | 11:31

  3. Re: Ein modulares Handy wäre teurer, größer, kaum...

    droektar | 11:28

  4. Re: Es gibt doch ein komplettes Video

    Frank... | 11:25

  5. Re: Telekom Propaganda Kampagne

    spezi | 11:20


  1. 11:19

  2. 09:44

  3. 14:15

  4. 13:47

  5. 13:00

  6. 12:30

  7. 11:51

  8. 11:22


  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