VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

En el proceso de desarrollo web es un poco tediosa la parte de compatibilidad que debemos darle a nuestros proyectos con los navegadores más populares, la pérdida de tiempo es enorme. Sin duda el navegador que más nos saca de las casillas es el famoso Internet Explorer (regularmente entre más antigua sea la versión más problemas nos genera, como la versión 6 de este navegador de Microsoft). El resto de navegadores como Chrome, Safari, Firefox y Opera son más manejables, aunque también tienen “sus cositas” por ahí.

Había escuchado y leído algo acerca de Google Chrome Frame pero nunca lo había utilizado (por alguna razón en su momento no le dí gran importancia). El caso es que decidí probarlo hace unos días para utilizarlo en una aplicación que estoy desarrollando, y en la que todos los usuarios finales utilizan la pesadilla del front-end: Internet Explorer.

Bueno, aunque he tenido la oportunidad de probar la última versión de Internet Explorer y no va nada mal. La verdad es que podría decir que me siento “orgulloso” de lo que Microsoft ha hecho con esta versión de su navegador, parece que le pusieron un poco más de ganas :P. Bien por ellos y mejor aún para nosotros!

¿Qué es Google Chrome Frame?

A como muy claramente lo dice Wikipedia, Google Chrome Frame es un complemento para Internet Explorer que permite renderizar las páginas utilizando el motor de Chromium (Google Chrome) en vez de Trident (el motor de Internet Explorer). Esto es prácticamente como tomar una ventana de Chrome e insertarla en Internet Explorer, todo lo que ejecutemos (ojo, esto no es del todo cierto) va a visualizarse como si fuese Chrome.

El artículo completo de Wikipedia acerca de Google Chrome Frame lo pueden ver en la dirección http://es.wikipedia.org/wiki/Google_Chrome_Frame.

Al utilizar Google Chrome Frame vamos a visualizar nuestra aplicación como si de Google Chrome o Chromium se tratase. Pero cuál es la ventaja? Podemos utilizar transparencias, bordes redondeados, sombras y todas esas cosas atractivas de HTML5 y CSS3 que en algunas versiones de Internet Explorer no es posible. Además, ya es sabido que Google Chrome es uno de los navegadores más modernos con que contamos actualmente.

¿Para quién es Google Chrome Frame?

El problema de Google Chrome Frame es que se debe instalar un complemento en el navegador (sí, hay que descargar e instalar “algo”) y es casi seguro que muchos usuarios no lo van a hacer, ya sea, por desconfianza del contenido o por simple pereza. Probablemente van a abandonar la página cuando vean que les estamos solicitando instalar algo.

Al punto: en mi opinión Google Chrome Frame es una idea excelente por parte de Google, pero no cambió (en su lanzamiento) ni está cambiando (en la actualidad) la web. Yo como usuario convencional, sin conocimientos de ningún tipo en cuanto a desarrollo, me preguntaría: porqué diablos tengo que instalar algo a mi Internet Explorer si está funcionando bien? Será que me quieren meter un virus o robar la información delicada que tengo almacenada?

En fin… esas preguntas tienen algo de lógica; hoy por hoy no podemos confiar en cualquier sitio web. Así que, de esta forma es como les digo que Google Chrome Frame no es para sitios web convencionales (claro que se puede usar, pero que tan exitoso podría ser?).

Pienso que podemos explotar todas las ventajas de Google Chrome Frame en el desarrollo de aplicaciones a la medida o software personalizado para la web. Normalmente este tipo de sistemas son para un número determinado de usuarios, los cuales acatan las sugerencias del desarrollador y de alguna forma tenemos cierto poder de convencimiento. Me refiero al entorno: una empresa me contrata para que le desarrolle una aplicación para uso interno.

La ventaja de Google Chrome Frame es que, para instalarlo, no se requieren privilegios de Administrador en las máquinas. Cualquier usuario puede realizar la instalación que además de fácil, es rápida.

¿Cómo implementar Google Chrome Frame en mi proyecto?

Para renderizar las páginas en Interner Explorer con el motor de Chrome, debemos agregar la siguiente etiqueta en el head de cada página:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

El código anterior sirve para decirle a Google Chrome Frame que queremos renderizar las páginas utilizando el motor de Chrome, sin importar la versión de Internet Explorer que el usuario esté utilizando. Un poco raro? Aquí van algunas de las condicionales que podemos usar:

Condocional Descripción
chrome=1 Siempre activo, sin importar la versión de Explorer que se esté usando.
chrome=IE7 Activo para Internet Explorer 7 o inferior
chrome=IE8 Activo para Internet Explorer 8 o inferior

¿Cómo verificar si Google Chrome Frame está instalado?

Lo que vimos anteriormente es la etiqueta que se debe agregar en las páginas para delegar el renderizado a Google Chrome Frame. Antes que todo necesitamos verificar si el Internet Explorer del usuario cuenta con el complemento Google Chrome Frame, y para esta tarea nuestro amigo Google nos brinda un script que debemos enlazar a nuestra página.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

Además de incluir ese pequeño script, debemos agregar en la página el siguiente código:

<script>
    CFInstall.check({
        mode: 'overlay',
        destination: '/'
    });
</script>

El código anterior llamará a la función que verifica si el complemento está instalado o no en el navegador Internet Explorer. Acá solo he puesto las dos opciones que considero más habituales. La lista completa de opciones la pueden ver en la dirección http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-CFInstall.check-Options.

Con mode le indicamos al script la forma en que queremos notificarle al usuario que no cuenta con el complemento Google Chrome Frame y le solicitamos que lo instale. Con el parámetro overlay lo que hacemos es mostrar una especie de popup en la página. Recomiendo este método ya que es mucho más elegante.

destination es la página a la que redireccionaremos al visitante cuando instale el complemento Google Chrome Frame. Es decir, cuando finalice la instalación del complemento el navegador automáticamente irá a la página especificada en destination. He colocado ‘/’ para decirle que no queremos ir a ninguna otra parte, osea, que recargue la misma página ;).

Renderizar con Google Chrome Frame

Al utilizar Google Chrome Frame nos vamos olvidando de todas esas incompatibilidades y dolores de cabeza que dan las versiones más viejas del navegador Internet Explorer. También, podemos utilizar muchas más cosas de CSS3 y HTML5, ya que Chrome es uno de los navegadores más modernos y se actualiza constantemente.

Como nota curiosa: las alertas, confirmaciones y los métodos de JavaScript que interactúan con el usuario tienen la aperiencia que tendrían en Chrome. Porqué será? Porque estamos renderizando con el motor de Chrome en Internet Explorer :P.

Google Chrome Frame y el navegador Google Chrome tienen sus diferencias. Por así decirlo, no son iguales. Las diferencias las pueden ver en esta página http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/differences-between-chrome-and-chrome-frame.

Si bien he dicho que Google Chrome Frame es para aplicaciones, es solo una opinión personal y estoy seguro de que muchos otros desarrolladores web estarán de acuerdo conmigo. Se debe tener claro que nunca se puede obligar a un usuario a depender de un complemento para visualizar un sitio web correctamente; el tema de compatibilidad es parte del trabajo de un desarrollador web. Es más fácil utilizar este tipo de complementos en aplicaciones a la medida, ya que podemos anotarlo como un requerimiento.

Enlaces

Escrito por Cali Rojas

Cali Rojas

Senior Front-End/Back-End Web Developer y diseñador de GUI’s, nacido en Costa Rica. Utilizo tecnologías como JavaScript Orientado a Objetos, HTML5, CSS3 y jQuery; MySQL, PHP, Python, LESS, SASS, etc. Linuxero por elección (Debian). Autor de jsmConsole (JavaScript Mobile Console) y Mopix.js (Mobile Pixel Perfect). Fundador de este blog.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Renderizar contenido con Google Chrome Frame en Internet Explorer, 5.0 out of 5 based on 1 rating

Compartir este artículo

Si le pareció interesante el contenido de este artículo, por favor, compártalo con sus amigos y conocidos por medio de las principales redes sociales.

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Artículos relacionados

Categorías: Desarrollo web

Deje un comentario

Su información personal no será compartida con otros sitios y/o personas.