Abo
  • Services:
Anzeige
Tilt zeigt Webseitenaufbau in 3D an.
Tilt zeigt Webseitenaufbau in 3D an. (Bild: Golem.de)

Tilt

Webseitenstrukturen in 3D zeigen

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

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.

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.

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


Webmaster / Internet Blog / 07. Aug 2011

Tilt: Webseitenstrukturen in 3D



Anzeige

Stellenmarkt
  1. ING-DiBa AG, Nürnberg
  2. DEUTZ AG, Köln-Porz
  3. Bosch Service Solutions Magdeburg GmbH, Berlin
  4. ANSYS Germany GmbH, Hannover


Anzeige
Top-Angebote
  1. 219,90€ + 7,98€ Versand (Vergleichspreis 269€)
  2. ab 179,99€
  3. 499€ + 4,99€ Versand oder Abholung im Markt

Folgen Sie uns
       


  1. Fifa 18 im Test

    Kick mit mehr Taktik und mehr Story

  2. Trekstor

    Kompakte Convertibles kosten ab 350 Euro

  3. Apple

    4K-Filme in iTunes laufen nur auf neuem Apple TV

  4. Bundesgerichtshof

    Keine Urheberrechtsverletzung durch Google-Bildersuche

  5. FedEX

    TNT verliert durch NotPetya 300 Millionen US-Dollar

  6. Arbeit aufgenommen

    Deutsches Internet-Institut nach Weizenbaum benannt

  7. Archer CR700v

    Kabelrouter von TP-Link doch nicht komplett abgesagt

  8. QC35 II

    Bose bringt Kopfhörer mit eingebautem Google Assistant

  9. Nach "Judenhasser"-Eklat

    Facebook erlaubt wieder gezielte Werbung an Berufsgruppen

  10. Tuxedo

    Linux-Notebook läuft bis zu 20 Stunden



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
E-Paper-Tablet im Test: Mit Remarkable machen digitale Notizen Spaß
E-Paper-Tablet im Test
Mit Remarkable machen digitale Notizen Spaß
  1. Smartphone Yotaphone 3 kommt mit großem E-Paper-Display
  2. Display E-Ink-Hülle für das iPhone 7

Parkplatz-Erkennung: Bosch und Siemens scheitern mit Pilotprojekten
Parkplatz-Erkennung
Bosch und Siemens scheitern mit Pilotprojekten
  1. Community based Parking Mercedes S-Klasse liefert Daten für Boschs Parkplatzsuche

Optionsbleed: Apache-Webserver blutet
Optionsbleed
Apache-Webserver blutet
  1. Apache-Sicherheitslücke Optionsbleed bereits 2014 entdeckt und übersehen
  2. Open Source Projekt Oracle will Java EE abgeben

  1. Re: Macht bei mir sogar Sinn

    Matze0815 | 06:33

  2. Re: Wie wäre es

    XoGuSi | 06:22

  3. Re: Es würde ja schon reichen

    Ovaron | 06:20

  4. Re: Wo kann man die Fragen und

    Ovaron | 06:13

  5. Re: Habe es immer noch nicht ganz verstanden

    Ovaron | 06:09


  1. 18:13

  2. 17:49

  3. 17:39

  4. 17:16

  5. 17:11

  6. 16:49

  7. 16:17

  8. 16:01


  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