"La evolución de la red"

"La evolución de la red" (The Evolution of the Web) es una webapp que muestra una linea de tiempo para ocho navegadores, con versiones, introducción de características y tecnologías web (como Flash, AJAX, etc). Por cierto, las bandas de color de fondo representan la interacción entre las tecnologías web y navegadores.

"The Evolution of the Web"

No me atrevo a escribir más, ya la funcionalidad de la aplicación habla por si sola, así que los invito a utilizarla:

http://evolutionofweb.appspot.com/

Como recurso educativo e histórico, esta aplicación la tienen que tener a la mano, ojalá que le den seguimiento.
¡Saludos!

Tu Sitio, Compatible en Todos los Browsers!

"Logotipos de los navegadores mas populares del mercado: Firefox, Internet Explorer, Safari, Opera y Chrome"

Todo diseñador-desarrollador web ha tenido que lidiar mas de alguna vez con el HTML, el CSS, el Javascript o el DOM de las páginas web, para retocar detalles de apariencia o el funcionamiento del lado del cliente. Aún bloggers con pocos conocimientos de desarrollo web se han aventurado a modificar el CSS de sus blogs para adaptar las plantillas a sus necesidades personales. Los que han pasado estas experiencias también sabrán lo molesto que es tener que comprobar que tus modificaciones se ven y funcionan igual en todos los browsers desde los cuales tus clientes-usuarios-lectores te visitan.

Porque sucede esto? Sucede porque no todos los navegadores web cumplen a cabalidad con los estándares definidos para el web. Además cada navegador quiere sobresalir implementando sus propios estándares para poder hacer más cosas que las demas. Ejemplo de ello son las propiedades CSS que inician con el prefijo -moz- o -webkit-

"Prueba del Acid3. Asi es como deberias ver esta imagen al visitar este sitio si es que tu browser cumple con los estándares aca impelemtados."

Para estar seguro que tu sitio se ve bien en cualquier navegador, sugiero estas tres alternativas:

• Usa Frameworks que te Aseguren la Independencia del Navegador

En la web estan disponibles una serie de frameworks para el manejo del layout del sitio usando CSS, el acceso al DOM via Javascript, controles capaces de mostrar datos de un server via Ajax, etc. los cuales prometen verse y funcionar de la misma manera en cualquier browser. Esta es mi recomendacion por defecto, ya que te ahorras tiempo y dolores de cabeza teniendo que arreglar ese div que se sale de lugar o esos mensajes Ajax que no llegan al server.

Entre los frameworks para usar layouts prefabricados de CSS se encuentran:

• YUI Grids
  
• Blueprints
  
• Tripoli


Entre los frameworks para el manejo de Javascript, controles HTML avanzados y el manejo del DOM se encuentran:

• JQuery
  
• Dojo
  
• Mootools

"Página de prueba de la alineación y apariencia de los elementos de un formulario, usando Blueprints"

• Usa Herramientas para Probar tu Sitio en Multiples Navegadores/Arquitecturas

En esta opción caes cuando prefieres hacerlo todo al estilo "do it yourself" o si en tu trabajo no te permiten usar nuevas librerías o frameworks sin la autorización de tus superiores. Puedes hacer uso de servicios en línea como Browsershots y Adobe BrowserLabs para obtener vistas previas de tus sitios web en diferentes navegadores y sistemas operativos. En un antiguo post mencioné algunas herramientas para depurar CSS y javascript en Internet Explorer y Firefox de manera que puedan mover elementos HTML, cambiar propiedades CSS, examinar variables Javascript, entre otras cosas, directamente en el navegador, por lo que se puede conocer a ciencia cierta el resultado final sin usar diseñadores visuales como Dreamweaver.

• Crea una Versión Diferente de tu Sitio por cada Navegador/Arquitectura

Esta opción es el último recurso que debes tomar, la opción también llamada "Por si todo lo demás falla...". Una de las diferencias más molestas entre los navegadores es que no manejan las mismas medidas para los pixels y no renderizan del mismo tamaño las fuentes o tipografías. Esto da lugar a que un div de 30px de ancho abarque más espacio en IE que en Firefox u Opera. Para ello, una técnica es utilizar un CSS cargado únicamente cuando el navegador del cliente es Internet Explorer, utilizando la etiqueta < link > dentro de una etiqueta especial propia de IE, llamada < ! --[IF IE ]-- >

Mediante esta etiqueta podrán cargar un archivo .css preparado para Firefox u otro .css preparado para IE, decidiendo dinámicamente cual cargar según el navegador que esté usando el cliente.

Otra buena razón para crear una página con un layout diferente es el hecho de poder adaptar tu sitio para ser visto desde dispositivos móviles como smartphones, en los cuales el tamaño y resolución de la pantalla difieren en gran medida de una PC, sin mencionar que la navegación se realiza por medio de la pantalla táctil, prescindiendo del uso de un ratón. Buen ejemplo de ello son las páginas web para móviles de Google, Twitter y Facebook.

"Versión mobil de Twitter, visualizada desde un Nokia n95"

Debido a estas diferencias entre los navegadores, existen muchos sitios que solo son capaces de funcionar o lucir bien en uno u otro navegador, de manera que cuando lo visualizas en cualquier otro el sitio es un completo desastre, como los listados en este sitio.

Conoces algun sitio importante que se solamente se vea bien en uno u otro navegador?

google chrome firefox explorer safari Opera javascript framework css

Tu Sitio, Compatible en Todos los Browsers!

"Logotipos de los navegadores mas populares del mercado: Firefox, Internet Explorer, Safari, Opera y Chrome"

Todo diseñador-desarrollador web ha tenido que lidiar mas de alguna vez con el HTML, el CSS, el Javascript o el DOM de las páginas web, para retocar detalles de apariencia o el funcionamiento del lado del cliente. Aún bloggers con pocos conocimientos de desarrollo web se han aventurado a modificar el CSS de sus blogs para adaptar las plantillas a sus necesidades personales. Los que han pasado estas experiencias también sabrán lo molesto que es tener que comprobar que tus modificaciones se ven y funcionan igual en todos los browsers desde los cuales tus clientes-usuarios-lectores te visitan.

Porque sucede esto? Sucede porque no todos los navegadores web cumplen a cabalidad con los estándares definidos para el web. Además cada navegador quiere sobresalir implementando sus propios estándares para poder hacer más cosas que las demas. Ejemplo de ello son las propiedades CSS que inician con el prefijo -moz- o -webkit-

"Prueba del Acid3. Asi es como deberias ver esta imagen al visitar este sitio si es que tu browser cumple con los estándares aca impelemtados."

Para estar seguro que tu sitio se ve bien en cualquier navegador, sugiero estas tres alternativas:

• Usa Frameworks que te Aseguren la Independencia del Navegador

En la web estan disponibles una serie de frameworks para el manejo del layout del sitio usando CSS, el acceso al DOM via Javascript, controles capaces de mostrar datos de un server via Ajax, etc. los cuales prometen verse y funcionar de la misma manera en cualquier browser. Esta es mi recomendacion por defecto, ya que te ahorras tiempo y dolores de cabeza teniendo que arreglar ese div que se sale de lugar o esos mensajes Ajax que no llegan al server.

Entre los frameworks para usar layouts prefabricados de CSS se encuentran:

• YUI Grids
  
• Blueprints
  
• Tripoli


Entre los frameworks para el manejo de Javascript, controles HTML avanzados y el manejo del DOM se encuentran:

• JQuery
  
• Dojo
  
• Mootools

"Página de prueba de la alineación y apariencia de los elementos de un formulario, usando Blueprints"

• Usa Herramientas para Probar tu Sitio en Multiples Navegadores/Arquitecturas

En esta opción caes cuando prefieres hacerlo todo al estilo "do it yourself" o si en tu trabajo no te permiten usar nuevas librerías o frameworks sin la autorización de tus superiores. Puedes hacer uso de servicios en línea como Browsershots y Adobe BrowserLabs para obtener vistas previas de tus sitios web en diferentes navegadores y sistemas operativos. En un antiguo post mencioné algunas herramientas para depurar CSS y javascript en Internet Explorer y Firefox de manera que puedan mover elementos HTML, cambiar propiedades CSS, examinar variables Javascript, entre otras cosas, directamente en el navegador, por lo que se puede conocer a ciencia cierta el resultado final sin usar diseñadores visuales como Dreamweaver.

• Crea una Versión Diferente de tu Sitio por cada Navegador/Arquitectura

Esta opción es el último recurso que debes tomar, la opción también llamada "Por si todo lo demás falla...". Una de las diferencias más molestas entre los navegadores es que no manejan las mismas medidas para los pixels y no renderizan del mismo tamaño las fuentes o tipografías. Esto da lugar a que un div de 30px de ancho abarque más espacio en IE que en Firefox u Opera. Para ello, una técnica es utilizar un CSS cargado únicamente cuando el navegador del cliente es Internet Explorer, utilizando la etiqueta < link > dentro de una etiqueta especial propia de IE, llamada < ! --[IF IE ]-- >

Mediante esta etiqueta podrán cargar un archivo .css preparado para Firefox u otro .css preparado para IE, decidiendo dinámicamente cual cargar según el navegador que esté usando el cliente.

Otra buena razón para crear una página con un layout diferente es el hecho de poder adaptar tu sitio para ser visto desde dispositivos móviles como smartphones, en los cuales el tamaño y resolución de la pantalla difieren en gran medida de una PC, sin mencionar que la navegación se realiza por medio de la pantalla táctil, prescindiendo del uso de un ratón. Buen ejemplo de ello son las páginas web para móviles de Google, Twitter y Facebook.

"Versión mobil de Twitter, visualizada desde un Nokia n95"

Debido a estas diferencias entre los navegadores, existen muchos sitios que solo son capaces de funcionar o lucir bien en uno u otro navegador, de manera que cuando lo visualizas en cualquier otro el sitio es un completo desastre, como los listados en este sitio.

Conoces algun sitio importante que se solamente se vea bien en uno u otro navegador?

google chrome firefox explorer safari Opera javascript framework css

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