CiberPrensa » Dragonfly http://ciberprensa.com La evolución de los medios en la red Sat, 26 May 2012 00:08:27 +0000 es hourly 1 http://wordpress.org/?v=3.3.2 Safari + Inspector Web http://ciberprensa.com/safari-inspector-web/ http://ciberprensa.com/safari-inspector-web/#comments Sat, 19 Jul 2008 22:02:22 +0000 Fernando http://ciberprensa.com/?p=2329

Contenidos de "Herramientas de Desarrollo de Navegadores"

  1. Opera + DragonFly
  2. Firefox + Firebug
  3. Internet Explorer + Developer Tools

Pues si, ha quedado para el final el mejor – mi preferido -, la combinación del navegador Safari y su aplicación interna Inspector Web, toda una maravilla de aplicación de debug y desarrollo web integrada en el navegador estrella de Apple.

Desde la versión 3, tiene incluida esta herramienta, potente a la vez que sencilla de utilizar, que dispone de muchas virtudes. ¿Lo mejor de todo?, que no es nada comparada con la que viene incluida en Safari 4, aún en desarrollo pero ya disponible para los miembros del ADC en versiones para Mac OS X Tiger, Mac OS X Leopard y Windows.

El Inspector Web es, de lejos, la aplicación mas agradable y sencilla de utilizar de todas las que hemos cubierto en esta serie. Dispone de un resaltado de código realmente agradable y todo funciona suave y limpio, sin asperezas, como si no costara nada mostrar códigos internos. Una vez has probado el resto de herramientas, sobre todo la combinación Internet Explorer + Developer Tools, sabes apreciar la diferencia.

A simple vista parece que tiene un fallo notable, y es la posibilidad de hacer clic en un elemento para resaltarlo, como el “Inspect” de Firefox + Firebug pero afortunadamente lo consigue con honores – solo que no es muy obvio. Para hacerlo solo debes hacer clic derecho en un elemento de la página, hacer clic en el item del menú llamado “Inspeccionar elemento” y te la resalta y te muestra el código relacionado con el mismo, una maravilla. También lo puedes hacer al contrario, pues si seleccionas una parte de código igualmente te resalta la parte de la página afectada. De hecho puedes usar esta técnica en todos y cada uno de los elementos a inspeccionar y te mostrará una nueva ventana del Inspector Web con las propiedades de ese elemento en concreto. Es ciertamente exhaustivo.

Por supuesto, puedes editar CSS en directo y si quieres “inactivar” estilos. Dispones de una vista de plantilla, llamada Metrics para la visualización de los anchos, padding, etc. También hay debug de scripts que te “anuncia” con iconos de colores los errores existentes, visualización de las imágenes de la página, navegador de la ruta que has seguido para llegar a cada elemento (muy al estilo de la iTunes Store), “bocadillos” que te dan consejos, mas información al hacer clic en cada elemento de lista o ventana, de todo.

Es una herramienta tremendamente completa, que funciona a la perfección y una aplicación imprescindible para un desarrollador web, de hecho la mejor que he visto. Y no es pasión maquera, que también, sino pura y dura comparación de herramientas. De hecho me alegro de haberla probado la última porque sino las otras (salvo Firebug) habrían quedado fatal, es hasta decepcionante usar las Developer Tools de Microsoft o Dragonfly después de disfrutar la interfaz y enorme información que facilita el Inspector Web de Safari.

Bueno, nada mas, espero que hayas disfrutado esta serie o al menos hayas conocido estas herramientas.

Artículos Relacionados:

]]> http://ciberprensa.com/safari-inspector-web/feed/ 2 Internet Explorer + Developer Tools http://ciberprensa.com/internet-explorer-developer-tools/ http://ciberprensa.com/internet-explorer-developer-tools/#comments Fri, 18 Jul 2008 22:05:54 +0000 Fernando http://ciberprensa.com/?p=2265

Contenidos de "Herramientas de Desarrollo de Navegadores"

  1. Opera + DragonFly
  2. Firefox + Firebug
  3. Internet Explorer + Developer Tools

Casi llegamos al final de esta serie de herramientas de desarrollo integradas en los navegadores. No cubriremos todos los navegadores existentes, pero si los mas importantes. Hoy vamos a adentrarnos en las posibilidades que nos ofrece Internet Explorer a la hora de ofrecer herramientas para webmasters o navegantes curiosos.

Para ello nos vamos a valer de las Developer Tools, ya incluidas de serie en la versión ßeta de Internet Explorer 8 y que pueden descargarse para Internet Explorer 7.

No obstante, la barra para desarrolladores de Internet Explorer 7 adolece de bastantes fallos por lo que es mas recomendable utilizar la DebugBar en su lugar, que ofrece la misma funcionalidad. Es de suponer que cuando salga a la luz la versión definitiva de Internet Explorer 8 salga como aplicación en descarga separada.

Metidos en harina, ciertamente no parece que vaya a ser mi preferida porque adolece de bastantes cuestiones. Por una parte, es interesante la opción de “Seleccionar elemento mediante clic“, similar a la herramienta Inspect que veíamos en el artículo de Firefox + Firebug, no es igual de potente pero funciona muy bien.

Un fallo importante es que no permite la edición “al vuelo”, por lo que no podrás visualizar cambios realizados en el PHP, o XHTML de la página que visualizas.

Muy parecida a Dragonfly, el hecho es que es casi una necesidad la existencia de esta herramienta, a pesar de que no aporte nada de relevancia, y es necesaria para muchos desarrolladores que utilicen Internet Explorer como navegador principal.

Bueno, menos mal que mañana veremos la mejor herramienta de todas, y mi recomendación especial.

Anterior de la serie

Artículos Relacionados:

]]> http://ciberprensa.com/internet-explorer-developer-tools/feed/ 0 Firebug se integra en Firefox http://ciberprensa.com/firebug-se-integra-en-firefox/ http://ciberprensa.com/firebug-se-integra-en-firefox/#comments Fri, 18 Jul 2008 14:13:46 +0000 Fernando http://ciberprensa.com/?p=2325 Firebug, la aplicación de debug que hasta ahora era una extensión para pasa desde hoy a formar parte de Mozilla al igual que DragonFly lo es de Opera.

Artículos Relacionados:

]]> http://ciberprensa.com/firebug-se-integra-en-firefox/feed/ 0 Opera + DragonFly http://ciberprensa.com/opera-dragonfly/ http://ciberprensa.com/opera-dragonfly/#comments Mon, 14 Jul 2008 22:02:20 +0000 Fernando http://ciberprensa.com/?p=2243

Contenidos de "Herramientas de Desarrollo de Navegadores"

  1. Opera + DragonFly
  2. Firefox + Firebug
  3. Internet Explorer + Developer Tools

Hace tiempo que quería comentar acerca de esos añadidos o herramientas que traen todos los navegadores y que ayudan a desarrolladores, y usuarios con ganas de aprender, a conocer mejor el diseño interno de los blogs que visitan o mantienen.

Y, aunque puedas pensarlo, no voy a empezar por los mas populares, sino que lo haré con el navegador Opera y su utilidad integrada llamada DragonFly.

Para utilizarlo no necesitas descargar nada pues Opera 9.5 ya viene con Dragonfly incorporado en el menú “Herramientas -> Avanzado -> Herramientas de desarrollo“.

Una vez seleccionado el menú correspondiente te muestra la aplicación al fondo del navegador, aunque puedes colocarlo fácilmente en su propia ventana. Navegando por los distintos apartados vas a poder inspeccionar los scripts y especialmente el completo, que además soporta búsquedas por elemento. También vas a poder ver todos los estilos de la página y las reglas que se aplican a cada elemento. También dispone de una consola de error y una vista de “diseño” (layout) que muestra los anchos, ,altos, padding, borders y mas información útil.

(clic para ampliar)

Dragonfly es una herramienta realmente nueva, y aún le faltan algunos detalles para que sea tan fácil de usar como otras pero es de gran ayuda, y muy completa. Una particularidad de Opera, que la hace especialmente interesante, es la orientación móvil de este navegador, lo que hace que Dragonfly sea una herramienta privilegiada para el desarrollo y debug de aplicaciones y servicios online especialmente diseñados para dispositivos móviles.

También me ha gustado las posibles configuraciones de Dragonfly a la hora de presentar los resultados en cada apartado.

Dragonfly adolece aún de algunas opciones importantes, como edición “al vuelo” de CSS, pero pronto estará disponible, en la versión Alpha 2, también descargable como aplicación independiente.

Descarga Opera y compruébalo por ti mismo, mañana seguimos con la serie de Herramientas de Desarrollo de Navegadores.

Siguiente de la serie

Artículos Relacionados:

]]> http://ciberprensa.com/opera-dragonfly/feed/ 0