Tilt 3D

6. 1. 2012

Nástroj označovaný jako Tilt 3D je rozšíření internetového prohlížeče Mozilla Firefox, které umožňuje trojrozměrné zobrazení webových stránek.

Ačkoli Tilt 3D není úplnou novinkou, objevil se již v červenci 2011, není mezi uživateli Firefoxu příliš známý. A proto si ho trochu představíme...

Pohled zpátky

Rozšíření je v současnosti dostupné již ve své šesté verzi. V minulosti byl Tilt 3D dostupný formou doplňku ve starších verzích prohlížeče Firefox. První tři verze označené jako 0.9.0.2, 0.9.1.5 a 0.9.1.7 byly podporovány Firefoxem 6.0 až 10.0a1.

Tilt 3D verze 0.9.1.8 byl dostupný pro verzi 11 (resp. 11.0a1) a verze 1.0 pak pro verzi 12 (resp. 12.0a1). Rozšíření bylo obohaceno o další vylepšení určená právě vývojářům. Verze 1.0.1 byla integrována do Firefoxu 12, kde se objevila mezi vývojářskými nástroji. Poslední verze je dostupná ke stažení i jako rozšíření z addons.mozilla.org.

Začínáme...

Rozšíření je ve Windows možné spustit klávesovou kombinací Ctrl+Shift+M (tuto klávesovou zkratku zle po spuštění Tiltu změnit v „Options“) nebo přes nabídku Firefox > Vývoj webu > Tilt:


K fungování doplňku je potřeba mít ve Firefoxu povolenou hardwarovou akceleraci – v nabídce Firefox > Možnosti > Možnosti > Rozšířené > Obecné > zaškrtnout „Použít hardwarovou akceleraci, je-li dostupná“):


Tilt 3D vyžaduje také kompatibilitu WebGL. Pokud vám Firefox vypisuje hlášku „Could not initialize the WebGL context, your hardware or drivers may not support it.“, zkuste následující postup:

  1. Do pole pro adresu napište „about:config“ a stiskněte Enter.
  2. Klikněte na „Budu opatrný, slibuji!“ :)
  3. Do pole pro zadání filtru v horní části obrazovky zadejte „webgl“.
  4. Ověřte, že volba „webgl.diabled“ je nastavena na „false“.
  5. Dvojklikem změňte hodnotu „webgl.force-enabled“ na „true“.
  6. A nyní zkuste znovu spustit Tilt 3D.

Základní funkce

Toto rozšíření je určeno především začínajícím tvůrcům webových stránek, kteří ocení při trojrozměrném zobrazení struktury stránky pochopení vztahů. Tilt 3D využijí i ti pokročilejší, především při při kontrole či „ladění“ webů nebo vizualizaci změn DOM (Document Object Model). Je výborným pomocníkem například při hledání neukončených elementů DIV. Mezi HTML, CSS a atributy je možné se libovolně přepínat.


Ve výchozím zobrazení není třetí rozměr příliš patrný, ale pomocí ovládacích tlačítek či pomocí myši lze vizualizovanou stránku naklonit do různých úhlů:



Kliknutím na libovolné místo vizualizace se zvýrazní odpovídající uzel. Dojklikem je možné si zobrazit zdroj náhledu tohoto uzlu.


Tilt nabízí také možnost stromového zobrazení DOM, které se nachází v levé části. Každému uzlu je přiřazena barva podle názvu tagu - světle růžová pro HEAD a BODY, oranžová pro STYLE, tyrkysová pro DIV, zelená pro SPAN, červená pro TABLE atd. Poklikáním na čtvereček, který v seznamu tagů zastupuje zobrazenou barvu, lze přednastavené barvy upravit.


Zobrazený pruh ve stromové struktuře je reprezentován ID a /nebo třídou. Každý pruh má také stanovenou šířku v závislosti na typu a názvu ID či třídy. Kliknutím na pruh ve stromové struktuře se zobrazí uzel a lze tak dobře určit jeho „hranice“.

Úpravy v reálném čase

Tilt 3D umí detekovat změnu webové DOM struktury a spolupracovat s jinými vývojářskými nástroji, například Firebugem nebo Style Editorem.

Export

Tilt umožňuje export do souboru ve formátu .obj, který umožňuje otevření v téměř libovolném editoru. Dalšími možnými formáty je .mtl a .png.



Komentáře