Depurar y editar CSS en Internet Explorer

That’s the question. Quiero poder depurar y editar el CSS en Internet Explorer de la misma forma que puedo hacerlo con Firefox. O si no es de la misma forma, que haya algo, que me permita hacerlo, sin tener que editar el CSS a ciegas para IE desde Firefox, lo que resulta incómodo e ilógico. No pido que haya algo igual a Firebug, pero me conformaría con una barra lateral al estilo de Edit CSS para Firefox, y que me permita ver y modificar las hojas de estilo en tiempo real.

Depurando CSS en Internet Explorer

Debugbar es un complemento para Internet Explorer que se agrega en forma de barra lateral. Nada menos que recomendada por JMiur la decidí instalar a ver como era. Tal como me comentaba, no es la maravilla de Firebug pero resulta interesante para poder examinar unas cuantas cosas de una página.

Al instalar el complemento y activar la barra lateral de Debugbar, nos aparece una especie de menú con pestañas que se resume en lo siguiente:

  • DOM: un DOM inspector o examinador de elementos de la página entre los cuales está el CSS y las etiquetas HTML de la página.
  • HTTP(S): un inspector de peticiones HTTP, parametros GET y POST, cookies, etc
  • Script: un inspector de funciones Javascript, con una consola JS incluida.
  • HTML Check: esta es una de las cosas que más me gusto, y es la validación HTML al instante.
  • Info: información general de la página.

La limitación, es que es un depurador, y no permite edición en tiempo real. Pero es de lo mejor que hay si queremos examinar un sitio en IE. Puede descargarse desde este enlace.

Editando CSS en Internet Explorer

Buscando algo que me permita editar CSS en tiempo real para IE, no encontré demasiado, aunque recordé un programa para Windows llamado CSSVista que probé hace bastante tiempo. En aquel entonces me había resultado bastante poco cómodo y engorroso, pero lo probé nuevamente y podría usarlo. La aplicación permite editar CSS no solo en IE sino también en Firefox, actualizando los cambios automáticamente para ambos navegadores:

Desde el programa cargamos la dirección web y luego le damos clic al botón de Edit CSS para comenzar a modificar el estilo de la página. El programa es gratuito y se puede descargar desde aquí.

Otra opción, no tan elegante consiste en un bookmarklet para Internet Explorer (un pequeño código Javascript) que nos abre una ventana popup donde podemos editar las propiedades CSS y ver reflejados los cambios. Para utilizarlo hay que agregar este enlace a los favoritos de IE para tenerlo siempre a mano. Al activarlo y luego de permitir popups para la página que vamos a editar, se abrirá una ventana como la siguiente:

En este enlace se puede ver más información sobre el bookmarklet. Lo he probado con la beta de IE8 y funciona perfectamente.

Y como hacer que IE soporte CSS estandar?

Que gran pregunta! Pero si depende de ellos mismos, aunque las últimas versiones de IE han mejorado algo. En Vagabundia se ha hablado del tema en este artículo y en este otro podemos ver una lista de propiedades CSS soportadas por las diferentes versiones de IE. Lo que es aconsejable, es no comenzar de cero si vamos a diseñar un sitio, sino que busquemos alguna plantilla mínima con CSS validado para ambos navegadores y luego nos póngamos a jugar y lidiar con lo que váyamos agregando. Seguramente va a seguir siendo entretenido mientras los navegadores no se pongan de acuerdo.

Google Chrome :: el nuevo navegador de google

Google tendrá un navegador? Será una broma? Ayer las noticias aparecían una tras otra, mencionando que hoy estaría disponible un nuevo navegador llamado Chrome, propiedad de Google. Y sabido es que cualquier movimiento que realiza Google, es noticia y ya nos ha sorprendido antes. Pero, un navegador? Ahora que ya ha sido lanzado, podríamos pensar que se veía venir, que es un paso más hacia un sistema operativo de Google, y que no quedan dudas de que lo quieren todo. No hace mucho fue lanzado el nuevo Firefox 3, la nueva beta de IE8 ya ha sido anunciada y al menos a mi esto me cayó en el momento menos esperado.

Hay montones de discusiones, análisis y polémicas sobre el nuevo navegador, así que mejor voy a bajarlo y probarlo a ver que tal es. Abro mi navegador. Google es mi página de inicio y enseguida veo un aviso para descargar el navegador:

Así que lo descargo inmediatamente. El instalador pesa unos 474 kb, pero no es para emocionarse, ya que al abrir el instalador, se pone a realizar una descarga y luego recién comienza la instalación. La primera ventana del instalador, me dice que va a importar mis datos de Mozilla Firefox (debe ser que es mi navegador predeterminado):

Y eso es lo único. No hay más pasos, ni confirmaciones, ni botones de ‘Siguiente’ o ‘Finalizar’. Ya está el navegador abierto. Una instalación sencilla y rápida.

Ahora que lo tenemos instalado, veamos que es lo que tiene.

La página de inicio

Al abrir el navegador, tenemos una pantalla de inicio como la que se muestra en la siguiente imagen. Algo similar al Speed dial de Opera, que se genera automáticamente con las páginas más visitadas. A la derecha, tenemos marcadores recientes, un buscador de historial y pestañas cerradas recientemente. Como se puede ver además, todo luce muy sencillo, claro:

Las pestañas

En Google Chrome las pestañas están donde normalmente hay una barra de menús, que aquí no existe. Así que estas aparecen arriba del todo. Las opciones del navegador están resumidas en dos botones a la derecha de la barra de direcciones.

La barra de direcciones

Inspirado en la nueva barra de direcciones de Firefox 3, en Google Chrome tenemos sugerencias de búsqueda, autocompletado, resultados de nuestros marcadores e historial, y por supuesto, la posibilidad de buscar con Google ; )

Lo que se diferencia es que esta barra, denominada Omnibox, viene a integrar el cuadro de búsqueda con la barra de direcciones, a diferencia de lo que ocurre con el resto de los navegadores, que lo hacen en dos cuadros separados.

Además, aparece el dominio resaltado (algo que iba a ser incluido en Firefox 3, y que también lo hace la beta de IE8), tiene el icono de la estrella de Firefox 3 para agregar marcadores, y el botoncito de IR, que tanto pedían por ahí:

Los marcadores

Los marcadores aquí se llaman también marcadores. Nada de favoritos ni esas cosas del pasado ^^

Y hablando de marcadores, el proceso de agregarlos es similar a Firefox 3. Un clic en la estrella y agregamos el marcador. Lo que no le vi son etiquetas para los marcadores, pero se trata de una versión beta y quien sabe si luego aparecen.

El historial

En la pantalla de inicio del navegador tenemos la posibilidad de buscar en el historial, algo que también podemos hacer desde la barra de direcciones. Los resultados se muestran de una manera elegante y cómoda:

Las descargas

Si Firefox 3 incorporaba un gestor de descargas con la posibilidad de pausar y reanudar las mismas, ya no es el único, ya que Google Chrome también incluye algo parecido. Al igual que con el historial, las descargas se pueden ver en una nueva pestaña y tenemos un buscador. Al fin de cuentas, es el navegador de Google,  no?

Buscar en la página

Nada para comentar demasiado en este aspecto, pero al buscar texto en una página, se resaltan todos los resultados encontrados y nos dice cuantas ocurrencias se han encontrado. También nos pone marcas en la barra de desplazamiento según donde estén las palabras encontradas.

Navegar de incógnito

Esta es una característica que se ha mencionado mucho últimamente, que estuvo por ser incluida en Firefox, y que finalmente no fue así. El recién salido IE8 beta 2 incluye algo similar, y se trata de un modo de navegación anónima donde no se guardan tus datos en el historial ni tampoco se guardan cookies.

Todo en procesos separados

Esto fue algo que me llamó la atención. El navegador incluye un administrador de tareas donde cada pestaña o plugin es visto como un proceso aparte. Es que en Chrome, se trata todo como procesos independientes y no como uno solo. De esta forma podemos ver cuanto consume cada proceso, tanto de memoria como de CPU. El concepto es interesante, y podemos ver que con pocas pestañas abiertas, el navegador consume verdaderamente pocos recursos.

Algo a favor de esto es que los procesos no interfieren entre si y eso ayuda a la estabilidad del navegador.

Aplicaciones web de escritorio

Google Chrome trae integrado a Google Gears, que permite que aplicaciones web sean tratadas como si fueran aplicaciones de escritorio, permitiendo guardarse datos para ser accedidos de forma offline. Algo que en Firefox es posible a través de una extensión. De esta forma podemos crear un acceso directo desde el navegador.

Y para desarrolladores?

En este punto no hay con que darle a Firebug, la maravilla de extensión para Firefox. Sin embargo, al igual que con la beta 2 de IE8, trae al menos algo incorporado que nos permite inspeccionar HTML, CSS y una consola de Javascript con un depurador. En lo que he visto, es más bien para curiosear cosas, ver valores, propiedades, pero ya para algo más me resulta incómodo y limitado. Algo es algo.

Conclusiones

Es muy pronto para sacar conclusiones, decir que es el mejor navegador o que lo termine usando por defecto. Chrome adopta un resumen de buenas ideas que podemos ver en otros navegadores, con un par de cosas propias. Tiene una interfaz sencilla, no muchas opciones y cumple su funcion con creces. Funciona muy bien para ser una beta y el resto mejor comprobarlo por uno mismo.

En SpamLoco están recopilando una lista de artículos sobre Chrome. También puedes darte una vuelta por la página de Chrome y ver los videos introductorios, o leerte el comic por el cual se filtró la noticia.

Wordpress 2.6.1 corrige más de 60 bugs

Luego de un mes de haber sido publicada la versión 2.6 de Wordpress, ya está la versión 2.6.1 disponible para actualizar. Esta versión corrige más de 60 errores que puedes ver en esta lista y decidirte a actualizar tu instalación de Wordpress.

Yo pregunto, no es un poco exagerado que el ciclo de actualizaciones sea tan rápido? Al menos, yo no me molestaría si se tomaran un poco más de tiempo para desarrollar las cosas, y no soy el único ya que lo comentan también en sitios como Vagabundia y Maestros del Web.

Así que por mi parte dejaré el aviso decorando el tablero mientras preparan la nueva versión, y quienes quieran actualizar pueden hacerlo descargando la versión 2.6.1 desde el siguiente enlace.

Descargar | Wordpress 2.6.1

Otro post más con imagen

Textos, textos, textos

en negrita utilizando la etiqueta B

y en negrita utilizando la etiqueta STRONG

en itálica utilizando la etiqueta I

y en itálica utilizando la etiqueta EM