Un mapa 3D de cualquier web con Firefox

Softonic en 3D


Los principales navegadores incluyen herramientas que ayudan a los diseñadores web en su trabajo: analizar errores, planificar cambios y ver puntos de mejora.

Algunas de estas herramientas son dignas de mención como Opera Dragonfly o el ágil inspector de código de Google Chrome.

En Firefox, los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en 3D.

¿Cómo se hace?

En Firefox, haz clic derecho en cualquier sitio de la página y elige Inspeccionar Elemento. Esta opción abre la Barra para desarrolladores, en la parte inferior de la ventana.

Vista 3D

A la derecha de la barra está la opción Vista 3D. Púlsala y se abrirá una vista en 3D con la estructura del diseño de la página.

Vista 3D por defecto

¿Cómo moverte por la vista en 3D?

Lo puedes hacer con el teclado o el ratón.

  • Desplazamiento: clic derecho y arrastrar o cursores del teclado
  • Rotación: clic izquierdo y arrastrar o teclas W S A D (arriba, abajo, izquierda y derecha respectivamente)
  • Zoom: rueda del ratón o teclas + y –

Vista rotada

¿Y esto para qué sirve?

Aunque parezca una curiosidad inútil, hay una razón de ser para la vista en 3D. En el diseño web muchos contenidos se encuentran dentro de otros.

En diseños complejos, desentramar la maraña de contenedores implica pelearse con cosas así:

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

O un listado de jerarquías algo más comprensible, pero lineal.

Barra Chrome

La vista en 3D, al usar una dimensión adicional, deja claro qué está dentro de qué, ya que situa cada elemento a diferentes niveles de altura.

Por ejemplo, en la siguiente imagen se puede ver de un vistazo que el botón social de Google+ tiene sobredosis de contenedores.

rascacielos Google plusA la izquierda de la imagen, botón de Google+, similar a un rascacielos

¿Te parece útil la vista 3D o sólo una mera curiosidad?

Cargando comentarios