Autor en Google+
Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET, ASP.NET Core, MVC, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

10 años online 🎂

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET, ASP.NET Core, MVC, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
miércoles, 30 de mayo de 2007
Hace un par de semanas Microsoft publicó la versión definitiva del complemento Internet Explorer Developer Toolbar, un plugin para IE indispensable para todos los que jugamos con XHTML y CSS y nos volvemos locos cada día intentando que los elementos aparezcan donde deben.

Las principales características de esta herramienta son:
  • Permite identificar zonas de la página paseando por encima con el ratón, permitiéndonos visualizar en todo momento de qué elemento se trata, sus atributos y las reglas de estilo CSS aplicadas a cada uno. Los elementos también pueden seleccionarse desde la estructura (DOM) de la página.

  • Activación o desactivación directa de características como estilos o scripts.

  • Asimismo, se pueden ver de forma rápida los atajos de teclado o el orden de tabulación, importante para cumplir las normas de accesibilidad.

  • Es posible indicarle que "bordee" elementos concretos, como divs, tablas, elementos posicionados u otros.

  • Permite mostrar u ocultar imágenes o propiedades de éstas como el archivo de origen (src), el tamaño o el peso.

  • Permite validar HTML, CSS, WAI y feeds RSS de forma directa.

  • Dispone de reglas para medir zonas de la página a nuestro antojo.

  • Formatea y colorea el código fuente de las páginas para facilitar su lectura.

  • Nos permite eliminar la caché del navegador, así como visualizar o eliminar las cookies asociadas a la página consultada, o incluso deshabilitar su uso.

La siguiente captura de pantalla muestra la herramienta en funcionamiento sobre Internet Explorer 6:

Internet Explorer Developer Toolbar en funcionamiento
Funciona con IE6 e IE7. En el primero se activa pulsando el icono con una flechilla que aparece en la barra de herramientas; en el segundo también, pero ojo, este icono no está visible por defecto. De momento está disponible sólo en inglés, y se puede descargar en esta dirección.

Ah, aunque supongo que ya lo conoceréis a estas alturas, el equivalente para Mozilla Firefox es la extensión Firebug, toda una maravilla, también indispensable para cualquier desarrollador web.

Estos contenidos se publican bajo una licencia de Creative Commons Licencia Reconocimiento-No comercial-Compartir bajo la misma licencia 3.0 España de Creative Commons

4 Comentarios:

mario dijo...

Bueno pues nada, otra cosita más que aprende IE de su "amigo" Firefox,ahora sólo le queda que respete los estándares .....

José María Aguilar dijo...

Tienes toda la razón, Mario. Sin embargo, es de agradecer una herramienta como esta, aunque sea algo tarde (la primera beta se presentó en 2005), para los que nos peleamos contra la "interpretación" de los estándares que hacen los navegadores, por suerte o desgracia, más utilizados del mundo.

Anónimo dijo...

Salu2 jmaguilar.

Supongo que conoces la barra Web Developer Toolbaruna extensión para Firefox, con la cual es imposible evitar hacer una comparación.

Con respecto al tema de los estandares estoy totalmente de acuerdo contigo Mario. Sólo comentar que la "moda" de maquetar sin tablas (utilizando hojas CSS2) me ha dado más de un dolor de cabeza a la hora de mantener la misma forma de visualización de los controles que voy desarrollando en los dos navegadores .

Como solución a este tema, cada control que desarrollo hereda una propiedad Maquetacion de un control web genérico que puede tomar los siguientes valores:

Maquetacion
MaquetarConTablas
MaquetarConCss
NoMaquetar


Y a la hora de hacer el "render" del control, según el valor de esta propiedad, el control Web padre se encarga de realizar la maquetación de su hijo utlizando paneles DIV o tablas TABLE según el caso.

Esto me permite visualizar el control al principio maquetado "con tablas" en los 2 navegadores hasta que consigo establecer las normas CSS2 para cada navegador, momento en el cual cambio el valor de esta propiedad y listo!


Un saludo y enhorabuena por tu bLog.

Miguel Del Valle.-

José María Aguilar dijo...

Hola, gracias por los comentarios.

Pues no conocía el plugin para Firefox que me cuentas. De hecho, cuando encontré Firebug, al que hago referencia en el post, dejé de buscar, pues me ofrecía todo lo que necesitaba.

Después de ver la Web Developer Toolbar veo que, efectivamente, se parece bastante más a la publicada por Microsoft.

Saludos.