Categorías destacadas
Artículo
|
Developer Tools en Internet Explorer 9 (II de VII) |
Hoy continuamos con la segunda entrega de los artículos técnicos con los que vamos a acercar al usuario las diversas funcionalidades que incorporan las herramientas de desarrollo (developer tools) disponibles en Internet Explorer desde su versión 8. En este punto es interesante recordar la definición que realizábamos de las Developer Tools en el post anterior: “herramienta de desarrollo que nos va a permitir depurar nuestras páginas web, estableciendo un seguimiento y un control de los elementos de diseño que conforman la estructura de nuestros sitios, proporcionando un mecanismo para intentar solucionar los posibles problemas que se puedan presentar en un sitio web”.
Descripción de funcionalidades – Panel de Contenido Primario
1º - Pestaña HTML
Centrémonos de nuevo en la pestaña HTML del panel de contenido primario. Esta pestaña nos presentaba una estructura de árbol DOM (Document Object Model) con la composición HTML de nuestros sitios. Bien, en ella, cuando procedamos a seleccionar un elemento HTML del mencionado árbol, vamos a disponer del Panel de Propiedades para realizar una inspección en profundidad del mismo.
Para ello, este panel nos permitirá hacer uso de distintas opciones de interés que permiten obtener más información del elemento HTML seleccionado. Estas son las siguientes:
Estilo: Esta solapa hace referencia a los estilos CSS disponibles en el sitio, permitiendo mejorar su nivel de depuración. Para ello se proporciona un listado de todos los estilos que se están aplicando al elemento HTML seleccionado. Los estilos aplicados se visualizan en orden de prioridad. Aquellos que presentan mayor prioridad a la hora de aplicarse se visualizan en la parte superior y los que menos en la inferior. Gracias a esta opción, podemos rápidamente activar o desactivar los estilos asociados a un elemento HTML y proceder a la visualización inmediata en la página.
Rastrear estilos: La segunda solapa contiene la misma información que la de Estilo mencionada anteriormente, pero con la diferencia de que en esta ocasión los estilos se agrupan alfabéticamente y sólo para el elemento HTML que se encuentre seleccionado. Esta segunda opción va a resultar más útil en aquellos casos donde nos encontremos buscando información sobre una propiedad o elemento HTML específico. Tan sólo tenemos que hacer clic en el elemento HTML que deseemos para poder visualizar los estilos aplicados al mismo.
Distribución: Esta tercera opción se va a utilizar para proporcionarnos información relacionada con el modelo de caja para los elementos HTML seleccionados, como por ejemplo su desplazamiento, altura o relleno. Es de utilidad a la hora de depurar la posición de un elemento determinado.
Atributos: Esta solapa proporciona al desarrollador una utilidad extremadamente potente. Además de posibilitar la inspección de todos los atributos definidos para un elemento HTML específico, permite editar, añadir o eliminar nuevos atributos y ver el resultado inmediato de los cambios efectuados.
Pongamos por ejemplo un desarrollador que se encuentre ajustando una imagen dentro de una celda de una tabla. Gracias a este comando, podemos ajustar el atributo cellPadding de una tabla para realizar un ajuste perfecto.
Obsérvese como en la siguiente imagen podemos visualizar la separación establecida en el relleno de celdas produciendo como resultado que la imagen de una celda y un determinado contenido HTML de otra, se presenten con una separación no deseada.
Gracias al uso del comando Atributos, anular la separación visual no deseada es tan simple como modificar el valor del atributo cellPadding a 0.
Desde este comando también se va a disponer de los botones correspondientes para agregar o eliminar nuevos atributos.
2º - Pestaña CSS
En esta pestaña CSS, se nos va a proporcionar la posibilidad de acceder a las hojas de estilos CSS externas que incorporen nuestros sitios. Para ello, utilizaremos el Selector de Estilos. Una vez indicada la hoja de estilos podremos acceder a su inspección. Para realizar dicho proceso, tan solo hay que hacer clic en un nombre de propiedad de estilo o en su valor y proceder a realizar cualquier cambio para su visualización inmediata. En cualquier caso, las herramientas de desarrollo habilitan la edición rápida sin modificar el código fuente de los sitios. Una vez que consigamos modificar el entorno ajustándolo a nuestras necesidades, podemos proceder a guardar los cambios. Todas las modificaciones realizadas mediante las herramientas de desarrollo existen en la representación interna de Internet Explorer del sitio. Por lo tanto, la actualización de la página o el navegar fuera de ella traen de vuelta el sitio original.
En la siguiente imagen se puede observar cómo, a través del selector de estilos, se ha seleccionado la hoja de estilos Common.css y se han modificado los valores correspondientes al margen izquierdo y derecho del estilo Common. Para poder ampliar los márgenes, las propiedades margin-left y margin-right se han establecido con el valor de 30 px.
3º- Pestaña Consola
A través del uso de esta tercera pestaña, vamos a poder realizar en cualquier momento una inspección de los avisos, advertencias o errores que se hayan podido producir en nuestro entorno. La consola aporta una funcionalidad muy importante y a la vez tan simple como poder averiguar rápidamente mediante una ventana de inspección de salida el funcionamiento correcto de nuestros sitios. Pongamos por ejemplo la aplicación de un estilo que forme parte del borrador CSS 3.0, la cual muchos fabricantes de navegadores ya empiezan a implementar. Mediante el comando Consola podemos averiguar inmediatamente cuales son los estilos que no se estén aplicando actualmente en nuestros sitios, como muestra la siguiente imagen.
Finalizamos aquí esta segunda entrada de la serie de artículos que nos van a informar sobre las funcionalidades y posibilidades que las Developer Tools en Internet Explorer 9 nos aportan.
Autor del artículo: Rubén Alonso Cebrián
Descripción de funcionalidades – Panel de Contenido Primario
1º - Pestaña HTML
Centrémonos de nuevo en la pestaña HTML del panel de contenido primario. Esta pestaña nos presentaba una estructura de árbol DOM (Document Object Model) con la composición HTML de nuestros sitios. Bien, en ella, cuando procedamos a seleccionar un elemento HTML del mencionado árbol, vamos a disponer del Panel de Propiedades para realizar una inspección en profundidad del mismo.
Para ello, este panel nos permitirá hacer uso de distintas opciones de interés que permiten obtener más información del elemento HTML seleccionado. Estas son las siguientes:
Estilo: Esta solapa hace referencia a los estilos CSS disponibles en el sitio, permitiendo mejorar su nivel de depuración. Para ello se proporciona un listado de todos los estilos que se están aplicando al elemento HTML seleccionado. Los estilos aplicados se visualizan en orden de prioridad. Aquellos que presentan mayor prioridad a la hora de aplicarse se visualizan en la parte superior y los que menos en la inferior. Gracias a esta opción, podemos rápidamente activar o desactivar los estilos asociados a un elemento HTML y proceder a la visualización inmediata en la página.
Rastrear estilos: La segunda solapa contiene la misma información que la de Estilo mencionada anteriormente, pero con la diferencia de que en esta ocasión los estilos se agrupan alfabéticamente y sólo para el elemento HTML que se encuentre seleccionado. Esta segunda opción va a resultar más útil en aquellos casos donde nos encontremos buscando información sobre una propiedad o elemento HTML específico. Tan sólo tenemos que hacer clic en el elemento HTML que deseemos para poder visualizar los estilos aplicados al mismo.
Distribución: Esta tercera opción se va a utilizar para proporcionarnos información relacionada con el modelo de caja para los elementos HTML seleccionados, como por ejemplo su desplazamiento, altura o relleno. Es de utilidad a la hora de depurar la posición de un elemento determinado.
Atributos: Esta solapa proporciona al desarrollador una utilidad extremadamente potente. Además de posibilitar la inspección de todos los atributos definidos para un elemento HTML específico, permite editar, añadir o eliminar nuevos atributos y ver el resultado inmediato de los cambios efectuados.
Pongamos por ejemplo un desarrollador que se encuentre ajustando una imagen dentro de una celda de una tabla. Gracias a este comando, podemos ajustar el atributo cellPadding de una tabla para realizar un ajuste perfecto.
Obsérvese como en la siguiente imagen podemos visualizar la separación establecida en el relleno de celdas produciendo como resultado que la imagen de una celda y un determinado contenido HTML de otra, se presenten con una separación no deseada.
Gracias al uso del comando Atributos, anular la separación visual no deseada es tan simple como modificar el valor del atributo cellPadding a 0.
Desde este comando también se va a disponer de los botones correspondientes para agregar o eliminar nuevos atributos.
2º - Pestaña CSS
En esta pestaña CSS, se nos va a proporcionar la posibilidad de acceder a las hojas de estilos CSS externas que incorporen nuestros sitios. Para ello, utilizaremos el Selector de Estilos. Una vez indicada la hoja de estilos podremos acceder a su inspección. Para realizar dicho proceso, tan solo hay que hacer clic en un nombre de propiedad de estilo o en su valor y proceder a realizar cualquier cambio para su visualización inmediata. En cualquier caso, las herramientas de desarrollo habilitan la edición rápida sin modificar el código fuente de los sitios. Una vez que consigamos modificar el entorno ajustándolo a nuestras necesidades, podemos proceder a guardar los cambios. Todas las modificaciones realizadas mediante las herramientas de desarrollo existen en la representación interna de Internet Explorer del sitio. Por lo tanto, la actualización de la página o el navegar fuera de ella traen de vuelta el sitio original.
En la siguiente imagen se puede observar cómo, a través del selector de estilos, se ha seleccionado la hoja de estilos Common.css y se han modificado los valores correspondientes al margen izquierdo y derecho del estilo Common. Para poder ampliar los márgenes, las propiedades margin-left y margin-right se han establecido con el valor de 30 px.
3º- Pestaña Consola
A través del uso de esta tercera pestaña, vamos a poder realizar en cualquier momento una inspección de los avisos, advertencias o errores que se hayan podido producir en nuestro entorno. La consola aporta una funcionalidad muy importante y a la vez tan simple como poder averiguar rápidamente mediante una ventana de inspección de salida el funcionamiento correcto de nuestros sitios. Pongamos por ejemplo la aplicación de un estilo que forme parte del borrador CSS 3.0, la cual muchos fabricantes de navegadores ya empiezan a implementar. Mediante el comando Consola podemos averiguar inmediatamente cuales son los estilos que no se estén aplicando actualmente en nuestros sitios, como muestra la siguiente imagen.
Finalizamos aquí esta segunda entrada de la serie de artículos que nos van a informar sobre las funcionalidades y posibilidades que las Developer Tools en Internet Explorer 9 nos aportan.
Autor del artículo: Rubén Alonso Cebrián
 |
Publicado por: Angel Carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
