Flujo de Trabajo en HTML/CSS más Rápido con las Herramientas de Desarrollador de Chrome

En este tutorial estaré revisando las herramientas de desarrollador de Chrome, específicamente cómo pueden ayudar a acelerar su flujo de trabajo HTML/CSS. También miraré brevemente algunas otras herramientas de desarrollo que están disponibles.

Introducción

Chrome se ha convertido rápidamente en una opción popular entre los diseñadores web y los usuarios por su velocidad, facilidad de uso y soporte para adoptar las primeras características experimentales como las modernas propiedades CSS3. En la conferencia de Google I/O de 2012 se anunció que Chrome tiene ahora más de 310 millones de usuarios activos, casi el doble de los 160 millones de usuarios de los que se jactó el año anterior.

Google Chrome fue lanzado por primera vez el 2 de septiembre de 2008. Fue introducido como una versión BETA para Microsoft Windows XP y versiones posteriores, para 2009 Google había lanzado versiones Beta tanto para OS X y como para Linux. Google Chrome 5.0 fue anunciado el 25 de mayo de 2010. Esto marcó el primer lanzamiento estable para apoyar las tres plataformas.

Una de las razones de su popularidad entre los diseñadores web y desarrolladores es las herramientas de desarrollo que se complementan con el navegador.  Estas herramientas de desarrollo nos permiten probar y depurar código de manera fácil y eficiente. Sin estas herramientas, su flujo de trabajo podría ser mucho más difícil.

Google describe las herramientas de desarrollo de Chrome como

Las Herramientas para Desarrolladores, incluidas y disponibles en Chrome, permiten a los desarrolladores y programadores web un acceso profundo a las funciones internas del navegador y su aplicación web. Las herramientas de desarrollo están basadas en gran medida en WebKit Web Inspector, una parte del proyecto open source WebKit.

Bajo el capó, Chrome Developer Tools es una aplicación web que está escrita en HTML, JavaScript y CSS. La aplicación se activa en tiempo de ejecución de Javascript. Una vez activada, nos permite interactuar con páginas web y jugar con ellas.

En este artículo voy a estar mostrando específicamente cómo estas herramientas pueden ayudar a acelerar su flujo de trabajo HTML y CSS. Voy a estar apuntando a diseñadores que no necesariamente han experimentado con las herramientas de desarrollo de Chrome aún, pero estoy seguro de que incluso si usted está familiarizado con ellas, usted aprenderá algo en el camino también.

Empezando

Primero que todo tendrá que abrir Chrome y navegar a una página de su elección. Las herramientas de desarrollador pueden ser accedidas en una de tres maneras. Puede hacer clic derecho en una página web y seleccionar "Inspeccionar Elemento", puede seleccionar la llave inglesa en la esquina superior derecha de Chrome y seleccionar "Herramientas > Herramientas del Desarrollador". La tercera y última manera es utilizar una serie de accesos directos que Chrome ha puesto a nuestra disposición:

En Windows y Linux, presione

• Control - Mayúsculas - I para abrir las Herramientas del desarrollador
• Control - Mayúsculas - J para abrir las Herramientas del desarrollador y llevar el foco a la Consola.
• Control - Mayúsculas - C para activar el modo de Inspeccionar Elemento.

En Mac presione

• ⌥⌘I (Command - Option - I) para abrir las Herramientas del desarrollador
• ⌥⌘I (Command - Option - J) para abrir las Herramientas del desarrollador y llevar el foco a la Consola.
• ^⌘C (Control - Option - C) para activar el modo de Inspeccionar Elemento.

Arriba se muestra el menú contextual cuando se hace clic derecho en una página web en Chrome.

Herramientas HTML: El Panel Elementos

Si usted es un diseñador web, se encontrarás empleando bastante tiempo en la sección 'Elementos' de la aplicación. Esta aplicación te permite ver todo en el modelo de objetos de documento (DOM para abreviar).

Muestra el DOM como un árbol, para que usted pueda encontrar fácilmente su camino alrededor del documento html. Lo bueno acerca de la herramienta de inspección es que al pasar el ratón sobre un elemento DOM del árbol, resaltará la etiqueta correspondiente en la página web que está viendo. Al seleccionar la pequeña lupa en la esquina inferior izquierda del inspector, puede seleccionar fácilmente un nodo del DOM directamente en la página web que está viendo y este se resaltará. Esto puede ser un gran ahorro de tiempo para si usted desea comprobar rápidamente el nombre o el tipo de atributo que un elemento tiene en su página.

El editor le permite encontrar los elementos y su ID o clase de CSS relacionados de una manera rápida y fácil.

Usted puede editar el HTML de los nodos DOM, haciendo doble clic sobre ellos. A partir de esto, puede cambiar atributos tales como valores, identificadores y clases o incluso el tipo de etiqueta HTML.

Cuando hace clic derecho sobre un nodo, aparecerá un menú contextual que le permitirá copiar el html o eliminarlo por completo. Usted también puede copiar el XPath del nodo. XPath es un lenguaje de consulta para seleccionar nodos de un documento. Esto puede ser útil cuando se utilizan cosas como el lenguaje de consulta de Yahoo (YQL).

Algo que usted también puede hacer es arrastrar elementos HTML alrededor de la página. Para hacer esto, seleccione un nodo y arrástrelo a otro lugar del árbol. Esto se reflejará en la página web que está inspeccionando.

A lo largo de la parte inferior del inspector de elementos se encuentra una barra que le permite navegar a lo largo de los elementos padre. Esto deja un rastro de los elementos padre seleccionados, lo que le permite ver y encontrar elementos padres de una manera rápida y fácil.

Otra pequeña característica útil del panel de elementos es cuando usted trabaja con imágenes. Simplemente pase el ratón sobre la etiqueta de imagen y será recibido por una pequeño ventana emergente que muestra la imagen, las dimensiones de la imagen renderizada y el tamaño de la imagen original. El tamaño renderizado a veces puede ser más grande que el tamaño de imagen original, lo que puede estar causado cuando se adicionan cosas como bordes o relleno.

Es importante tener en cuenta que el tamaño renderizado se refiere al tamaño del elemento renderizado y no necesariamente al tamaño de la imagen real.

Herramientas CSS: El Navegador de Estilos

Las herramientas de desarrollo de Chrome son extremadamente útiles cuando se trata de depurar CSS. A veces, los estilos CSS pueden colapsar causando efectos visuales no deseados. Al ser capaces de inspeccionar qué reglas de estilo se están aplicando al elemento por el navegador, podemos encontrar la raíz del problema y corregir el error.

La sección 'estilo computado' le permite ver los estilos que el motor de renderizado del navegador está aplicando al elemento. Este es el conjunto final de estilos que se están aplicando a la página web. Al hacer clic sobre la pequeña flecha a la izquierda de un determinado estilo computado, usted puede ver de dónde viene ese estilo. Así que si usted no puede entender la razón de por qué ese div se le estpá dando un estilo con un fondo negro de manera persistente, o por qué ese texto simplemente no se pone en negrita, eche un vistazo en la sección de estilo computado y eso le permitirá ver lo que ve el navegador.

Estilos y Reglas CSS Coincidentes

La sección de "Estilos" y las "Reglas CSS coincidentes" funcionan de manera similar entre sí. Ambas le permiten agregar, eliminar y modificar reglas CSS a un elemento. El panel "element.style" le permite agregar propiedades a ese elemento en particular sin importar el id o la clase que tenga - piense en estos como estilos en línea. Esto difiere de la sección "Reglas de CSS coincidentes" ya que las reglas que cambia en esta sección reflejarán en cualquier otro elemento con ese ID o clase en particular.

Usted podrá notar a veces que una regla tiene un estilo tachado. Esto suele ser porque está siendo reemplazado por otra regla de otra propiedad. Para llegar al fondo de por qué está siendo reemplazada, puede utilizar la sección de "estilo computado" como se mencionó anteriormente.

Más diseñadores con los que he hablado recientemente están alejándose del enfoque de diseñar un sitio específico en un paquete de edición como Photoshop y Fireworks y están avanzando hacia un enfoque de "diseño en el navegador". Este nuevo enfoque le permite ver su trabajo como lo ve el navegador.

Las herramientas de edición como Photoshop tienen diferentes motores de renderizado a los de los navegadores, lo que puede significar que las fuentes y los colores aparecen diferentes. También pone el diseño in situ y le permite ver cómo aparece en el navegador. Sin mencionar los beneficios que tiene cuando se trata de diseñar de manera adaptiva y para la amplia gama de tipos de dispositivos con los que ahora tenemos que tratar. Por supuesto, el software como Photoshop todavía juega un papel importante en mi flujo de trabajo, aunque me parece que lo estoy utilizando para crear conjuntos de estilos en la actualidad, en contraposición a diseños reales.

Una característica útil para este nuevo enfoque es la forma en que usted puede seleccionar colores. Al hacer clic en el icono de rueda dentada en la esquina superior derecha del panel 'Estilos', podrá alternar entre diferentes modos de color. Estos son:

• Colores hexdecimales - es decir #000000
• RGB - es decir rgb(0,0,0)
• HSL - es decir hsl(0, 0%, 0%)

Si por ejemplo, usted usa negro y luego ve la página web en vivo y nota que es un demasiado oscuro para la estética que busca, entonces simplemente puede hacer clic en la pequeña caja de color junto al valor de la propiedad y esto mostrará un selector de color que luego le permite bajar el brillo del negro un poco. Esto es realmente útil para cuando se diseña sobre la marcha.

El selector de colores de Chrome facilita la experimentación con sus diseños en tiempo real

Al ajustar los márgenes, los rellenos y el posicionamiento podemos ver en tiempo real cuánto ancho necesitamos darle a ese div para hacerlo posicionarse correctamente. Esto sin duda ahorra una gran cantidad de tiempo en vez de tener que ir entre el navegador y su editor de código y luego tener que guardar el documento y actualizar.

En la parte superior derecha de los 'estilos' al lado del icono de rueda dentada vive un pequeño icono de elemento marcado. Haciendo clic sobre este podemos cambiar entre los diferentes estados de un elemento. Estos diferentes estados son

• :active
• :hover
• :focus
• :visited

Al activar uno de estos, el estado elegido permanecerá encendido y usted podrá editar sus propiedades.

Mostrando los diferentes estados que usted puede seleccionar.

Edición en Vivo e Historial de Revisión

Una de mis características favoritas del inspector de estilos de herramientas de desarrollo es la posibilidad de encontrar rápidamente dónde se encuentra en su hoja de estilos la propiedad que está editando. Si mira a la derecha de la propiedad que está editando, verá el nombre de la hoja de estilo y el número de línea en el que se encuentra la misma. Al hacer clic en el enlace, usted será llevado a la "vista Sources". Esto básicamente muestra su hoja de estilos en su totalidad. Desde aquí se puede trabajar en ella como lo haría en su editor de código. La única diferencia es que usted ve sus resultados en tiempo real.

También puede guardar su hoja de estilo deslizando el panel lateral. Si hace clic con el botón derecho del ratón sobre el nombre de la misma, se abre un nuevo menú contextual donde puede elegir abrir la hoja de estilo en el navegador y guardarla. Lo bueno de esto es que al hacer clic en "Modificaciones locales" usted puede ver un historial de revisiones completo de todos los cambios que ha realizado. Así que si ha estropeado algo y quiere revertir algunos cambios que hizo hace diez minutos, entonces Chrome tiene cubierta su espalda.

Ahora puede guardar su hoja de estilos editada directamente en las herramientas de desarrollador. Esto también le da un historial de revisiones de los cambios que ha hecho recientemente.

Métricas

De vuelta en la barra lateral de Elementos tenemos el panel de métricas. Con este panel puede ver y realizar cambios en los parámetros del modelo de caja del elemento actual. Esto da una representación visual de estos parámetros que incluyen:

• margen
• relleno
• borde
• posición

Conclusión

Las herramientas para Desarrolladores de Chrome se encuentran entre las herramientas más útiles para acelerar mi flujo de trabajo de diseño web HTML/CSS.

Por supuesto existen muchos otros usos para ellas, como el análisis de los tiempos de carga de la página y el rendimiento de los scripts. También hay otras herramientas que hacen el mismo tipo de trabajo como Firebug para Firefox. La última versión de Firefox también viene con algunas herramientas útiles que aún no se han implementado en el equivalente de Chrome, aunque espero que lo serán algún día pronto. Estas incluyen cosas como la vista en 3D. La vista 3D le permite ver una representación 3D de un sitio web que puede rotar y orientar. Esto hace que sea fácil visualizar el anidamiento de su contenido. También han introducido el "modo adaptivo" que pone el sitio web dentro de un marco, el cual usted puede redimensionar para ver cómo aparecerá en diferentes tamaños de punto de interrupción.

No estoy necesariamente diciendo que las herramientas de desarrollo de Chrome son las mejores. Para mí, son las únicas que he usado y sé cuánto tiempo me han ahorrado a mi y a mi flujo de trabajo. ¡Es por eso que quería compartir con ustedes algunos de los consejos que he descubierto y espero que le ahorren gran cantidad de tiempo también!

Otros Enlaces Lectura y Recursos