Explotando la Web Developer Toolbar

"Una de las características que destacan a Firefox de los demás navegadores es su gran cantidad de útiles add-ons que se pueden instalar en el"

Firefox Addons

Como ya se nos esta haciendo costumbre acá en el Sr Byte, les traemos un conjunto de add-ons para Firefox que durante nuestras experiencias hemos descubierto como bastante útiles para trabajar con HTML, CSS y Javascript, especialmente porque los IDEs de desarrollo a veces no cuentan con las herramientas suficientes para editar visualmente las páginas web de modo que puedas saber con gran exactitud cómo se verá tu sitio en un navegador desde el momento en que lo estás diseñando.

Rodrigo anteriormente había publicado una colección de add-ons directamente en el sitio de addons de Firefox, a los cuales yo agregaré unos cuantos mas en este post y en otros posteriores los cuales considero un MUST para desarrolladores y diseñadores web.

Web developer toolbar (link)

Este es uno de los addons que no pueden faltar en el browser de todo desarrollador web. Contiene tantas opciones que en sí sustituye a muchos otros addons actualmente disponibles para desarrolladores web en el sitio de Mozilla. A continuación listaremos algunas de las opciones mas útiles de esta barra de herramientas para todo desarrollador web:

Miscellaneous -> Display line guides: Esta opción sirve para comprobar la alineación diferentes elementos HTML de un sitio web. Sustituye al add-on gridfox.

"En este ejemplo podemos ver como usamos las líneas guía del Web Developer Toolbar para detectar una porción desalineada en las secciones de la Wikipedia, la cual se ha remarcado con una flecha."

Miscellaneous -> Display ruler: Con esta opción puedes dibujar un rectángulo remarcando elementos HTML o cualquier sección dentro de una página web y este te dirá la posición X/Y, longitud y anchura de estos elementos en pixeles. Una vez dibujado el rectángulo este puede moverse y redimensionarse para remarcar exactamente el elemento del cual se desea saber su posición y tamaño dentro de la página. Sustituye al addon measureit.

"La caja de texto de búsqueda de Google mide exactamente 568 pixeles de ancho y 25 de largo"

Information -> Display Element Information: Esta opción convertirá tu puntero en una cruz con la cual podrás remarcar y seleciconar un elemento HTML dentro de un sitio web y al darle clic, WebDeveloper te mostrará un recuadro con los atributos, clases, posición, ancestros, etc. de dicho elemento. Además, debajo de la WebDeveloper toolbar te mostrará la ubicación en formato XPath de dicho elemento.

"Información del elemento HTML caja de búsqueda del sitio twitter.com"

Outline -> Outline Custom Elements: La cual te permite remarcar elementos HTML de una página mediante su id, clase o tag, permitiéndonos además remarcar 5 elementos a la vez y elegir el color con el que queremos que cada uno de ellos sea remarcado. Una forma de búsqueda de elementos similar a como lo realiza el addon FireFinder.

"WebDeveloper nos remarca los elementos HTML dentro de la página de Javaword que poseen la clase CSS llamada byline"

Cookies -> View Cookie Information: Esta opción nos abrirá una nueva pestaña de Firefox en la cual nos listará todas las cookies que los sitios visitados han guardado en nuestro sistema, además de poder editarlas y eliminarlas. Desde la opción Cookies también podemos agregar nuevas cookies a nuestro sistema operativo por si algún sitio la requiere. Funciona de manera similar al addon firecookie

"WebDeveloper me muestra las cookies que el sitio osum.sun.com ha guardado en mi computadora"

Information -> View Color Information: Opción con la cual podremos obtener la paleta de colores que se está usando en un sitio web, con sus respectivos valores en RGB hexadecimal. Esta nos la visualiza en una nueva pestaña de Firefox.

"WebDeveloper mostrando la paleta de colores que compone el sitio deviantart.com"

Tools -> Validate HTML: La cual nos lleva a la página de validación del w3c.org en el cual revisan la validez del código HTML con el cual está construido el sitio que estábamos visitando. En dicho sitio se nos lista detalladamente cada uno de los errores HTML que posee el sitio anteriormente visitado. Existe una opción extra, Tools -> Display page validation la cual te muestra una barra de herramientas debajo de la WebDeveloper la cual nos aplica una validación básica del HTML y CSS de nuestro sitio.

"Al validar el sitio stackoverflow.com desde la opción del WebDeveloper podemos ver que según el w3c validator este posee unos cuantos errores. Sin embargo la validación básica que aparece en la barra de herramientas bajo la WebDeveloper nos dice que el HTML es válido."

Próximamente hablaremos de otro add-on de Firefox que merece un post completo debido a su gran complejidad y al hecho que es un add-on que soporta más add-ons. Estén pendientes.

Explotando la Web Developer Toolbar

"Una de las características que destacan a Firefox de los demás navegadores es su gran cantidad de útiles add-ons que se pueden instalar en el"

Firefox Addons

Como ya se nos esta haciendo costumbre acá en el Sr Byte, les traemos un conjunto de add-ons para Firefox que durante nuestras experiencias hemos descubierto como bastante útiles para trabajar con HTML, CSS y Javascript, especialmente porque los IDEs de desarrollo a veces no cuentan con las herramientas suficientes para editar visualmente las páginas web de modo que puedas saber con gran exactitud cómo se verá tu sitio en un navegador desde el momento en que lo estás diseñando.

Rodrigo anteriormente había publicado una colección de add-ons directamente en el sitio de addons de Firefox, a los cuales yo agregaré unos cuantos mas en este post y en otros posteriores los cuales considero un MUST para desarrolladores y diseñadores web.

Web developer toolbar (link)

Este es uno de los addons que no pueden faltar en el browser de todo desarrollador web. Contiene tantas opciones que en sí sustituye a muchos otros addons actualmente disponibles para desarrolladores web en el sitio de Mozilla. A continuación listaremos algunas de las opciones mas útiles de esta barra de herramientas para todo desarrollador web:

Miscellaneous -> Display line guides: Esta opción sirve para comprobar la alineación diferentes elementos HTML de un sitio web. Sustituye al add-on gridfox.

"En este ejemplo podemos ver como usamos las líneas guía del Web Developer Toolbar para detectar una porción desalineada en las secciones de la Wikipedia, la cual se ha remarcado con una flecha."

Miscellaneous -> Display ruler: Con esta opción puedes dibujar un rectángulo remarcando elementos HTML o cualquier sección dentro de una página web y este te dirá la posición X/Y, longitud y anchura de estos elementos en pixeles. Una vez dibujado el rectángulo este puede moverse y redimensionarse para remarcar exactamente el elemento del cual se desea saber su posición y tamaño dentro de la página. Sustituye al addon measureit.

"La caja de texto de búsqueda de Google mide exactamente 568 pixeles de ancho y 25 de largo"

Information -> Display Element Information: Esta opción convertirá tu puntero en una cruz con la cual podrás remarcar y seleciconar un elemento HTML dentro de un sitio web y al darle clic, WebDeveloper te mostrará un recuadro con los atributos, clases, posición, ancestros, etc. de dicho elemento. Además, debajo de la WebDeveloper toolbar te mostrará la ubicación en formato XPath de dicho elemento.

"Información del elemento HTML caja de búsqueda del sitio twitter.com"

Outline -> Outline Custom Elements: La cual te permite remarcar elementos HTML de una página mediante su id, clase o tag, permitiéndonos además remarcar 5 elementos a la vez y elegir el color con el que queremos que cada uno de ellos sea remarcado. Una forma de búsqueda de elementos similar a como lo realiza el addon FireFinder.

"WebDeveloper nos remarca los elementos HTML dentro de la página de Javaword que poseen la clase CSS llamada byline"

Cookies -> View Cookie Information: Esta opción nos abrirá una nueva pestaña de Firefox en la cual nos listará todas las cookies que los sitios visitados han guardado en nuestro sistema, además de poder editarlas y eliminarlas. Desde la opción Cookies también podemos agregar nuevas cookies a nuestro sistema operativo por si algún sitio la requiere. Funciona de manera similar al addon firecookie

"WebDeveloper me muestra las cookies que el sitio osum.sun.com ha guardado en mi computadora"

Information -> View Color Information: Opción con la cual podremos obtener la paleta de colores que se está usando en un sitio web, con sus respectivos valores en RGB hexadecimal. Esta nos la visualiza en una nueva pestaña de Firefox.

"WebDeveloper mostrando la paleta de colores que compone el sitio deviantart.com"

Tools -> Validate HTML: La cual nos lleva a la página de validación del w3c.org en el cual revisan la validez del código HTML con el cual está construido el sitio que estábamos visitando. En dicho sitio se nos lista detalladamente cada uno de los errores HTML que posee el sitio anteriormente visitado. Existe una opción extra, Tools -> Display page validation la cual te muestra una barra de herramientas debajo de la WebDeveloper la cual nos aplica una validación básica del HTML y CSS de nuestro sitio.

"Al validar el sitio stackoverflow.com desde la opción del WebDeveloper podemos ver que según el w3c validator este posee unos cuantos errores. Sin embargo la validación básica que aparece en la barra de herramientas bajo la WebDeveloper nos dice que el HTML es válido."

Próximamente hablaremos de otro add-on de Firefox que merece un post completo debido a su gran complejidad y al hecho que es un add-on que soporta más add-ons. Estén pendientes.

Complementos Recomendados Sr. Byte

Hace ya buen rato, nos pidieron el favor de poner una lista de complementos que recomendamos para Firefox. Así que, sin mucha fanfarria, aquí esta la colección oficial de complementos de Firefox que siempre me salva la vida:

https://addons.mozilla.org/es-ES/firefox/collection/srbyte

UPDATE: Actualice la lista, de acuerdo a las sugerencias en los comentarios :)

Si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Y como seguramente alguien se lo esta preguntado, pues la característica de las "colecciones de complementos" en el sitio de complementos de Mozilla, es relativamente nueva, y nos asiste en la magna tarea de seguirle la pista a nuestros complementos favoritos...


Lo mas interesante de esto, es que esta utilidad te mantiene unido con tus complementos y recopilatorios favoritos de varias maneras:

Accede a tus recopilatorios desde Firefox
Los recopilatorios que marques como favoritos en el directorio de recopilatorios aparecerán en un lugar especial del administrador de complementos. Podrás estar al día y ver el contenido de cada recopilatorio.

Comparte complementos desde el menú de publicación
Cada complemento que instales se puede compartir fácilmente con amigos vía correo electrónico o publicado en uno de tus recopilatorios desde el menú de publicación.

Recibe avisos
El recopilador te avisará cuando uno de tus recopilatorios favoritos tenga nuevos elementos, y marcarlo para revisarlo más tarde. Publica automáticamente tus complementos instalados a un recopilatorio La funcionalidad de auto-publicado mantiene tu recopilatorio continuamente actualizado con tus últimos complementos instalados, manteniendo a tus amigos suscritos al día.

Claro, todas estas características se proveen únicamente a los usuarios registrados al sitio mencionado. Resulta bastante útil si se anda experimentando o si estas muy pendiente de las ultimas versiones de tus complementos.

También les comparto la lista "Editors Picks" de complementos (muy buena):

https://addons.mozilla.org/es-ES/firefox/collections/editors_picks

Nuevamente, si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Saludos!

firefox complementos addon

Complementos Recomendados Sr. Byte

Hace ya buen rato, nos pidieron el favor de poner una lista de complementos que recomendamos para Firefox. Así que, sin mucha fanfarria, aquí esta la colección oficial de complementos de Firefox que siempre me salva la vida:

https://addons.mozilla.org/es-ES/firefox/collection/srbyte

UPDATE: Actualice la lista, de acuerdo a las sugerencias en los comentarios :)

Si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Y como seguramente alguien se lo esta preguntado, pues la característica de las "colecciones de complementos" en el sitio de complementos de Mozilla, es relativamente nueva, y nos asiste en la magna tarea de seguirle la pista a nuestros complementos favoritos...


Lo mas interesante de esto, es que esta utilidad te mantiene unido con tus complementos y recopilatorios favoritos de varias maneras:

Accede a tus recopilatorios desde Firefox
Los recopilatorios que marques como favoritos en el directorio de recopilatorios aparecerán en un lugar especial del administrador de complementos. Podrás estar al día y ver el contenido de cada recopilatorio.

Comparte complementos desde el menú de publicación
Cada complemento que instales se puede compartir fácilmente con amigos vía correo electrónico o publicado en uno de tus recopilatorios desde el menú de publicación.

Recibe avisos
El recopilador te avisará cuando uno de tus recopilatorios favoritos tenga nuevos elementos, y marcarlo para revisarlo más tarde. Publica automáticamente tus complementos instalados a un recopilatorio La funcionalidad de auto-publicado mantiene tu recopilatorio continuamente actualizado con tus últimos complementos instalados, manteniendo a tus amigos suscritos al día.

Claro, todas estas características se proveen únicamente a los usuarios registrados al sitio mencionado. Resulta bastante útil si se anda experimentando o si estas muy pendiente de las ultimas versiones de tus complementos.

También les comparto la lista "Editors Picks" de complementos (muy buena):

https://addons.mozilla.org/es-ES/firefox/collections/editors_picks

Nuevamente, si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Saludos!

firefox complementos addon

En Búsqueda del Reproductor Ideal

Una de las cosas que más hacemos al estar en nuestra computadora es escuchar música. Quizá es de los primeros programas que instalamos si es que acabamos de obtenerla o la hemos formateado ya que nos permite dejarla sonando mientras realizamos otras actividades típicas como chatear, navegar en Internet, hacer tareas, etc.

Hay algunos que lo único que les interesa es escuchar la música, les bastaría nada más tener un reproductor cuya única interfaz sea un botón de Play y que empiece a sonar aleatoriamente alguna lista de archivos seleccionada de una carpeta o la librería completa de música. En cambio, habemos otros un poco más exigentes a la hora de escuchar música y deseamos que nuestro reproductor haga muchas otras cosas aparte de reproducir audio por lo que, a manera personal, les muestro una lista del top de reproductores de audio y las características por las que han sido seleccionados.

"Interfaz de AeroTrax, reproductor minimalista y quiza el ideal de muchos"

Entre las características que considero debe cumplir un reproductor decente, se encuentran las siguientes:

• Multiplataforma: Algunos de nosotros utilizamos mas de un mismo sistema operativo. No es mucho pedir poder usar el mismo reproductor tanto en uno como en otro.
• Listas de reproducción inteligentes: Para no tener que agregar cada track por separado.
• Capacidad de minimizarse al área de notificación: Y además de ello, poder usar los controles básicos (play-pause-next-previous-stop-exit-restore) desde el doble clic.
• Audioscrobbling con Last.fm: De manera que last.fm no pierda el rastro de la música que más escucho y asi sepa hacerme buenas recomendaciones.
• Notificaciones por OSD: OSD, siglas de On Screen Display son las que te aparecen cuando has cambiado de track, mostrándote en un pequeño recuadro el artista-album-nombre de la canción correspondiente.
• Teclas de acceso globales: De manera que no tenga que abrir la ventana del reproductor cuando quiera cambiar de pista o pausar la reproducción.
• Personalizable: Mediante la adición de add-ons, de manera que puedas agregar funciones como visualizaciones, skins, lyrics, etc.
• Reproducción de Radios y Podcasts en línea: Cuando llega a aburrir la librería de música, es bueno tener a la mano alguna estación de radio o podcast.
• Gratuito: No le encuentro sentido a pagar por un reproductor de música.

Quiza no exista un único reproducto que cumpla con todas estas características pero hay varios que cumplen con la mayoría. Entre los que he tenido la oportunidad de probar y han sido de mi agrado estan:

Songbird: (link) Basado en xul(la interfaz gráfica de Firefox) y respaldado por Mozilla, lo que permite que, al igual que el navegador, existan versiones para distintas plataformas. También aprovecha de su interfaz el hecho de venir con un navegador web integrado el cual permite agregar add-ons similares a los de firefox y extenderlo hasta convertirlo en algo más que un simple reproductor de música.



Amarok: (link) Uno de los reproductores más completos y populares que existen para Linux, con la capacidad de ser portado a Windows junto con la paquetería de KDE. Basado en Qt y XMMS. Cumple con la gran mayoría de las características listadas arriba.



aTunes: (link) Reproductor Open Source basado en Java (lo cual lo vuelve multiplataforma) y surge como una alternativa al iTunes de Apple.




MPD: (link) Este no es un reproductor de música en si, sino mas bien es un servidor (o demonio) de reproducción de audio, el cual es controlado mediante cualquiera de las aplicaciones cliente que existen para el. Estas van desde una basada en comandos de la consola (mpc), applets para el gnome-panel, screenlets para el escritorio o sino uno de mis clientes favoritos, sonata.

WinAmp: (link) Quiza el reproductor más popular que existe para Windows, capaz de ser portado a Linux mediante wine. Con la capacidad de competir con los demás listados anteriormente aunque su intefaz no sea tan intuitiva o tan normal como la del resto de reproductores. Aun así es posible cambiarla mediante skins.


Que reproductor agregarías tu a las lista?

addon amarok apple complementos firefox last.fm linux musica podcast screenlet streaming java winamp atunes songbird mozilla mpd

En Búsqueda del Reproductor Ideal

Una de las cosas que más hacemos al estar en nuestra computadora es escuchar música. Quizá es de los primeros programas que instalamos si es que acabamos de obtenerla o la hemos formateado ya que nos permite dejarla sonando mientras realizamos otras actividades típicas como chatear, navegar en Internet, hacer tareas, etc.

Hay algunos que lo único que les interesa es escuchar la música, les bastaría nada más tener un reproductor cuya única interfaz sea un botón de Play y que empiece a sonar aleatoriamente alguna lista de archivos seleccionada de una carpeta o la librería completa de música. En cambio, habemos otros un poco más exigentes a la hora de escuchar música y deseamos que nuestro reproductor haga muchas otras cosas aparte de reproducir audio por lo que, a manera personal, les muestro una lista del top de reproductores de audio y las características por las que han sido seleccionados.

"Interfaz de AeroTrax, reproductor minimalista y quiza el ideal de muchos"

Entre las características que considero debe cumplir un reproductor decente, se encuentran las siguientes:

• Multiplataforma: Algunos de nosotros utilizamos mas de un mismo sistema operativo. No es mucho pedir poder usar el mismo reproductor tanto en uno como en otro.
• Listas de reproducción inteligentes: Para no tener que agregar cada track por separado.
• Capacidad de minimizarse al área de notificación: Y además de ello, poder usar los controles básicos (play-pause-next-previous-stop-exit-restore) desde el doble clic.
• Audioscrobbling con Last.fm: De manera que last.fm no pierda el rastro de la música que más escucho y asi sepa hacerme buenas recomendaciones.
• Notificaciones por OSD: OSD, siglas de On Screen Display son las que te aparecen cuando has cambiado de track, mostrándote en un pequeño recuadro el artista-album-nombre de la canción correspondiente.
• Teclas de acceso globales: De manera que no tenga que abrir la ventana del reproductor cuando quiera cambiar de pista o pausar la reproducción.
• Personalizable: Mediante la adición de add-ons, de manera que puedas agregar funciones como visualizaciones, skins, lyrics, etc.
• Reproducción de Radios y Podcasts en línea: Cuando llega a aburrir la librería de música, es bueno tener a la mano alguna estación de radio o podcast.
• Gratuito: No le encuentro sentido a pagar por un reproductor de música.

Quiza no exista un único reproducto que cumpla con todas estas características pero hay varios que cumplen con la mayoría. Entre los que he tenido la oportunidad de probar y han sido de mi agrado estan:

Songbird: (link) Basado en xul(la interfaz gráfica de Firefox) y respaldado por Mozilla, lo que permite que, al igual que el navegador, existan versiones para distintas plataformas. También aprovecha de su interfaz el hecho de venir con un navegador web integrado el cual permite agregar add-ons similares a los de firefox y extenderlo hasta convertirlo en algo más que un simple reproductor de música.



Amarok: (link) Uno de los reproductores más completos y populares que existen para Linux, con la capacidad de ser portado a Windows junto con la paquetería de KDE. Basado en Qt y XMMS. Cumple con la gran mayoría de las características listadas arriba.



aTunes: (link) Reproductor Open Source basado en Java (lo cual lo vuelve multiplataforma) y surge como una alternativa al iTunes de Apple.




MPD: (link) Este no es un reproductor de música en si, sino mas bien es un servidor (o demonio) de reproducción de audio, el cual es controlado mediante cualquiera de las aplicaciones cliente que existen para el. Estas van desde una basada en comandos de la consola (mpc), applets para el gnome-panel, screenlets para el escritorio o sino uno de mis clientes favoritos, sonata.

WinAmp: (link) Quiza el reproductor más popular que existe para Windows, capaz de ser portado a Linux mediante wine. Con la capacidad de competir con los demás listados anteriormente aunque su intefaz no sea tan intuitiva o tan normal como la del resto de reproductores. Aun así es posible cambiarla mediante skins.


Que reproductor agregarías tu a las lista?

addon amarok apple complementos firefox last.fm linux musica podcast screenlet streaming java winamp atunes songbird mozilla mpd

Depurando CSS y Javascript con Internet Explorer

"El lienzo de un diseñador web es la pantalla de su monitor"

Hay muchas y muy variadas herramientas e IDEs que te permiten diseñar/desarrollar tu sitio web de manera que luzca y funcione exactamente como deseas con un par de simples clics pero al final de cuentas, son los navegadores del web quienes tienen la ultima palabra a la hora de decidir como lucirá y se comportara finalmente tu sitio. Estos navegadores, por cierto, son muy quisquillosos respecto a las funcionalidades que puedes implementar ya que ninguno de ellos soporta los estándares del web al 100% sino que utilizan sus propios estándares por lo que posiblemente tu sitio no se vea ni funcione igual en todos los navegadores.

Los desarrolladores del web que utilizan Mozilla Firefox y sus derivados(Iceweasel, Floc, etc) han de estar familiarizados con el muy popular add-on llamado Firebug y también con el Web Developer Toolbar, los cuales nos permiten editar el código de nuestro sitio directamente desde el navegador, por lo que sabremos en el momento los resultados de los cambios que realizamos en dicho codigo. De esta manera, podríamos re alinear DIVs que aparecen fuera de lugar, cambiar el color de fondo de un elemento, revisar en que linea de código se produjo un error de Javascript o que datos se han enviado por los HTTP Headers vía Ajax, solo por mencionar algunas de sus utilidades.

"Editando el CSS del sitio del sr byte con Firebug"

Lo lamentable es que no todo mundo utiliza Mozilla Firefox sino que la gran mayoría de usuarios Windows suelen navegar desde Internet Explorer así como la gente de Mac utiliza Safari, otros tantos que se sienten cómodos con Opera y los que recientemente han empezado a probar Google Chrome. Esto significa (y lo menciono porque a mi me ocurrió) que si alineamos nuestro sitio perfectamente en Firefox, posiblemente se vea horriblemente mal en los demás navegadores y no tenemos nada que nos permita hacer lo mismo que con Firefox en el resto de navegadores.

Debido a esta situación fue que descubrí que al parecer, Internet Explorer también cuenta con un conjunto de add-ons para personalizarlo un poco, aunque no son tan conocidos ni usados como los de Firefox. Entre estos add-ons, casualmente existe uno Developer Tooblar, el cual es muy similar en funcionamiento al Firebug aunque no es tan completo ya que nada mas nos permite inspeccionar el codigo HTML de nuestra pagina y de los elementos de la misma, ademas de mostrarnos el CSS que ha sido aplicado a dichos elementos.

"Observando (porque es lo unico que se puede hacer) el codigo HTML y el CSS del sitio del sr byte con IE Developer Toolbar"

Ya que el add-on antes mencionado no nos permite editar el Javascript del sitio, podemos hacer uso del Microsoft Script Debugger para tal efecto. Por cierto, este programa es lanzado cada vez que se encuentra un error en el Javascript de una pagina, una vez que hallas elegido la opcion de utilizarlo como debugger en el cuadro de dialogo que te aparece al momento de producirse el error.

"Apariencia del editor MS Script Debugger"

addon chrome complementos desarrollo diseño firefox herramienta internet microsoft navegador Opera safari

Depurando CSS y Javascript con Internet Explorer

"El lienzo de un diseñador web es la pantalla de su monitor"

Hay muchas y muy variadas herramientas e IDEs que te permiten diseñar/desarrollar tu sitio web de manera que luzca y funcione exactamente como deseas con un par de simples clics pero al final de cuentas, son los navegadores del web quienes tienen la ultima palabra a la hora de decidir como lucirá y se comportara finalmente tu sitio. Estos navegadores, por cierto, son muy quisquillosos respecto a las funcionalidades que puedes implementar ya que ninguno de ellos soporta los estándares del web al 100% sino que utilizan sus propios estándares por lo que posiblemente tu sitio no se vea ni funcione igual en todos los navegadores.

Los desarrolladores del web que utilizan Mozilla Firefox y sus derivados(Iceweasel, Floc, etc) han de estar familiarizados con el muy popular add-on llamado Firebug y también con el Web Developer Toolbar, los cuales nos permiten editar el código de nuestro sitio directamente desde el navegador, por lo que sabremos en el momento los resultados de los cambios que realizamos en dicho codigo. De esta manera, podríamos re alinear DIVs que aparecen fuera de lugar, cambiar el color de fondo de un elemento, revisar en que linea de código se produjo un error de Javascript o que datos se han enviado por los HTTP Headers vía Ajax, solo por mencionar algunas de sus utilidades.

"Editando el CSS del sitio del sr byte con Firebug"

Lo lamentable es que no todo mundo utiliza Mozilla Firefox sino que la gran mayoría de usuarios Windows suelen navegar desde Internet Explorer así como la gente de Mac utiliza Safari, otros tantos que se sienten cómodos con Opera y los que recientemente han empezado a probar Google Chrome. Esto significa (y lo menciono porque a mi me ocurrió) que si alineamos nuestro sitio perfectamente en Firefox, posiblemente se vea horriblemente mal en los demás navegadores y no tenemos nada que nos permita hacer lo mismo que con Firefox en el resto de navegadores.

Debido a esta situación fue que descubrí que al parecer, Internet Explorer también cuenta con un conjunto de add-ons para personalizarlo un poco, aunque no son tan conocidos ni usados como los de Firefox. Entre estos add-ons, casualmente existe uno Developer Tooblar, el cual es muy similar en funcionamiento al Firebug aunque no es tan completo ya que nada mas nos permite inspeccionar el codigo HTML de nuestra pagina y de los elementos de la misma, ademas de mostrarnos el CSS que ha sido aplicado a dichos elementos.

"Observando (porque es lo unico que se puede hacer) el codigo HTML y el CSS del sitio del sr byte con IE Developer Toolbar"

Ya que el add-on antes mencionado no nos permite editar el Javascript del sitio, podemos hacer uso del Microsoft Script Debugger para tal efecto. Por cierto, este programa es lanzado cada vez que se encuentra un error en el Javascript de una pagina, una vez que hallas elegido la opcion de utilizarlo como debugger en el cuadro de dialogo que te aparece al momento de producirse el error.

"Apariencia del editor MS Script Debugger"

addon chrome complementos desarrollo diseño firefox herramienta internet microsoft navegador Opera safari

Clickjacking Que es? Como protegernos?

"No es necesario ser paranoicos para aceptar que nos pueden vigilar y hasta controlar desde las paginas web que visitamos"

Recientemente, dos investigadores de ha.ckers.org Robert "RSnake" Hansen y Jeremiah Grossman publicaron noticias acerca de un problema de vulnerabilidad el cual afecta a todos los navegadores web de la actualidad y que podría monitorear y controlar la actividad de un usuario en un sitio web especifico. Hasta el momento ningún navegador del web se encuentra exento, por lo menos no los que todo mundo utiliza ya que es un problema relativamente reciente, no esta directamente relacionado con javascript y no es tan fácil de solucionar con un simple parche o actualización de los mismos. Los únicos que no se ven afectados por este grave problema son lynx, Links, w3m y similares.

Ahora dos preguntas vienen a nuestra mente:

En que consiste realmente este problema?

Clickjacking, que se podría traducir como secuestro del clic, se refiere a la capacidad del desarrollador o dueño de un sitio web de tomar el control de los vinculos que nuestro navegador visita, botón, o cualquier elemento de la página sin que ni siquiera uno vea que está sucediendo. Esto lo hacen utilizando un Frame o iFrame con opacidad nula por encima del contenido original de la pagina de manera que el usuario, al tratar de dar clic sobre los elementos de la pagina original, realmente interactúe con los elementos ocultos de este iFrame sin darse cuenta. Este iFrame, a su vez, puede en realidad ser parte de un dominio totalmente diferente al de la pagina original que cubre y tendría la capacidad de hacer requests via Ajax a repositorios de datos de dichos dominios.

Dicho de otra forma, imaginemos un cristal (opacidad 0) con algo debajo, intentamos tocar con el dedo lo que hay debajo, pero tocamos el cristal, esto es lo mismo que sucede cuando ponemos un iFrame con opacidad 0 (invisible) encima de ciertos elementos de nuestra web: el usuario irá a hacer clic en nuestros elementos, pero hará clic dentro del iFrame.

"Imagen que ejemplifica las dos capas invisibles que puede tener un sitio web: la capa que vemos y la capa con la que realmente interactuamos"

Ahora imaginemos que cargamos en el iFrame una página de noticias, como meneame, fresqui, o digg, lo volvemos transparente, y debajo metemos un botón que diga: haz clic aquí, posicionándolo justo exactamente debajo de donde aparece el botón para votar a la noticia, dentro de la página de noticias. Cuando el usuario haga clic en nuestro botón, que está debajo del iFrame transparente, justo donde está el botón para votar de la web de noticias que hay cargada dentro del iFrame, hará clic en el botón votar de la pagina que hay dentro del iFrame.

Que puedo hacer para protegerme?

Como habíamos mencionado, no es tan fácil como agregar un parche o actualizar a nuestra ultima versión de nuestro navegador. Lo primero seria evitar las visitas a sitios de poca fiabilidad (ustedes saben a cuales me refiero) y si no estamos seguros de adonde nos llevara un link o un botón, dar clic derecho sobre este y revisar sus propiedades.

• Opera: Vayanse a la pagina opera:config y deshabiliten la opción iFrames.

"Captura de pantalla de Opera, mostrando la pagina de configuracion donde se deshabilitan los iFrames"

• Firefox: Instalar el plugin (complemento, add-on o como le quieran llamar) llamado NoScript el cual, al igual que el plugin FlashBlock que te bloquea los elementos Flash de una pagina, este te permite bloquear una gran cantidad de tipos de contenido de una pagina, entre estos, los scripts, animaciones flash, aplicaciones Java y por supuesto, iFrames.

"Captura de pantalla de Firefox, mostrando en su barra de estado la informacion de bloqueos de NoScript y en una ventana emergente, la configuracion del NoScript y donde se deshabilitan los iFrames"

• Internet Explorer Safari y Chrome: Resignense a estar vulnerables, esperen a que los fabricantes encuentren una solución o cambien de navegador.

addon chrome clickjacking complementos computadoras firefox iframe internet java navegador network Opera safari seguridad

Clickjacking Que es? Como protegernos?

"No es necesario ser paranoicos para aceptar que nos pueden vigilar y hasta controlar desde las paginas web que visitamos"

Recientemente, dos investigadores de ha.ckers.org Robert "RSnake" Hansen y Jeremiah Grossman publicaron noticias acerca de un problema de vulnerabilidad el cual afecta a todos los navegadores web de la actualidad y que podría monitorear y controlar la actividad de un usuario en un sitio web especifico. Hasta el momento ningún navegador del web se encuentra exento, por lo menos no los que todo mundo utiliza ya que es un problema relativamente reciente, no esta directamente relacionado con javascript y no es tan fácil de solucionar con un simple parche o actualización de los mismos. Los únicos que no se ven afectados por este grave problema son lynx, Links, w3m y similares.

Ahora dos preguntas vienen a nuestra mente:

En que consiste realmente este problema?

Clickjacking, que se podría traducir como secuestro del clic, se refiere a la capacidad del desarrollador o dueño de un sitio web de tomar el control de los vinculos que nuestro navegador visita, botón, o cualquier elemento de la página sin que ni siquiera uno vea que está sucediendo. Esto lo hacen utilizando un Frame o iFrame con opacidad nula por encima del contenido original de la pagina de manera que el usuario, al tratar de dar clic sobre los elementos de la pagina original, realmente interactúe con los elementos ocultos de este iFrame sin darse cuenta. Este iFrame, a su vez, puede en realidad ser parte de un dominio totalmente diferente al de la pagina original que cubre y tendría la capacidad de hacer requests via Ajax a repositorios de datos de dichos dominios.

Dicho de otra forma, imaginemos un cristal (opacidad 0) con algo debajo, intentamos tocar con el dedo lo que hay debajo, pero tocamos el cristal, esto es lo mismo que sucede cuando ponemos un iFrame con opacidad 0 (invisible) encima de ciertos elementos de nuestra web: el usuario irá a hacer clic en nuestros elementos, pero hará clic dentro del iFrame.

"Imagen que ejemplifica las dos capas invisibles que puede tener un sitio web: la capa que vemos y la capa con la que realmente interactuamos"

Ahora imaginemos que cargamos en el iFrame una página de noticias, como meneame, fresqui, o digg, lo volvemos transparente, y debajo metemos un botón que diga: haz clic aquí, posicionándolo justo exactamente debajo de donde aparece el botón para votar a la noticia, dentro de la página de noticias. Cuando el usuario haga clic en nuestro botón, que está debajo del iFrame transparente, justo donde está el botón para votar de la web de noticias que hay cargada dentro del iFrame, hará clic en el botón votar de la pagina que hay dentro del iFrame.

Que puedo hacer para protegerme?

Como habíamos mencionado, no es tan fácil como agregar un parche o actualizar a nuestra ultima versión de nuestro navegador. Lo primero seria evitar las visitas a sitios de poca fiabilidad (ustedes saben a cuales me refiero) y si no estamos seguros de adonde nos llevara un link o un botón, dar clic derecho sobre este y revisar sus propiedades.

• Opera: Vayanse a la pagina opera:config y deshabiliten la opción iFrames.

"Captura de pantalla de Opera, mostrando la pagina de configuracion donde se deshabilitan los iFrames"

• Firefox: Instalar el plugin (complemento, add-on o como le quieran llamar) llamado NoScript el cual, al igual que el plugin FlashBlock que te bloquea los elementos Flash de una pagina, este te permite bloquear una gran cantidad de tipos de contenido de una pagina, entre estos, los scripts, animaciones flash, aplicaciones Java y por supuesto, iFrames.

"Captura de pantalla de Firefox, mostrando en su barra de estado la informacion de bloqueos de NoScript y en una ventana emergente, la configuracion del NoScript y donde se deshabilitan los iFrames"

• Internet Explorer Safari y Chrome: Resignense a estar vulnerables, esperen a que los fabricantes encuentren una solución o cambien de navegador.

addon chrome clickjacking complementos computadoras firefox iframe internet java navegador network Opera safari seguridad