Un mapa 3D de calquer web con Firefox

Os principales navegadores incluen ferramentas que axudan aos diseñadores web no seu traballo: analizar erros, planificar trocos e ver puntos de mellora.
Algunhas destas ferramentas son dignas de mención como Opera Dragonfly ou o áxil inspector de código de Google Chrome.
En Firefox, os desarrolladores solían confiar en extensions de terceiros como Web Developer Toolbar, pero desde la versión 11 nos ofrece unha nova forma de ver a plantilla de cualquier web: en 3D.

¿Cómo se fai?

En Firefox, fai clic dereito en calquer sitio da páxina e elixe Inspeccionar Elemento. Esta opción abre a Barra para desarrolladores, na parte inferior da ventana.

A a dereita da barra está a opción Vista 3D. Púlse se abrirá unha vista en 3D coa estructura do deseño da páxina.

¿Cómo moverte pola vista en 3D?

O podes facer co teclado ou o rato.

• Desplazamiento: clic dereito e arrastrar ou cursores do teclado
• Rotación: clic esquerdo e arrastrar ou teclas W S A D (arriba, abaixo, esquerda e dereita respectivamente)
• Zoom: rueda del ratón ou teclas + y -

¿E esto pra qué sirve?

Aunque pareza unha curiosidade inútil, hai una razón de ser para a vista en 3D. No diseño web moitos contidos se encontran dentro de outros.
En diseños complexos, desentramar a maraña de contedores implica pelexarse con cosas así:

Vista de código de Google Chrome con resaltado de sintaxis.

Ou un listado de xerarquías algo máis comprensible, pero lineal.

A vista en 3D, ao usar unha dimensión adicional, deixa claro qué está dentro de qué, xa que situa cada elemento a diferentes niveis de altura.
Por ejemplo, na seguinte imaxen se pode ver dun vistazo que o botón social de Google+ ten sobredosis de contedores.

 
Á esquerda da imaxen, botón de Google+, similar a un rañaceos.