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.
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.
¿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 -
¿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í:
O un listado de jerarquías algo más comprensible, pero lineal.
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.
