TUTORIAL: Añadir Google Chrome Frame a tu Sitio Web


El problema para muchos programadores/diseñadores que quieren usar HTML5 y CSS3 en la elaboración de sus sitios web es la preocupación por dejar "sin soporte" a los usuarios de Internet Explorer, y la realidad es que La web evolucionó, pero Internet Explorer no.

Al no soportar los nuevos estándares, (al menos al 100%) IE supone un problema bastante grande para el avance de nuestra sociedad informática, y la cosa está en que no hay muchas maneras de "avisarle al usuario" que es culpa de su navegador el hecho de que X página web moderna se vea mal... Hasta ahora. Gracias al Google Chrome Frame (a.k.a GCF) Tenemos a nuestra dispocisión una alternativa que nos permite arreglar el problema de compatibilidad con nuestras páginas web modernas e IE. Usar el Google Chrome Frame es un hábito que cualquier programador/diseñador web que haga páginas modernas con los nuevos estándares debería seguir, de esta manera, tendríamos cubierto el pedazo de mercado de los usuarios que por una u otra razón aún usan Internet Explorer.

Ahora, ¿Cómo integrar Google Chrome Frame (GCF) En mis Sitios Web?

Sencillo, basta con hacer un simple "copy&paste" de código y ciertos retoques rápidos. Para empezar, debemos añadir el siguiente script en alguna parte del elemento body de nuestra página web:

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

  <style>
   /* 
    CSS rules to use for styling the overlay:
      .chromeFrameOverlayContent
      .chromeFrameOverlayContent iframe
      .chromeFrameOverlayCloseBar
      .chromeFrameOverlayUnderlay
   */
  </style> 

  <script>
   // You may want to place these lines inside an onload handler
   CFInstall.check({
     mode: "overlay",
     destination: "http://www.waikiki.com"
   });
  </script>

(Aquí debemos editar el parámetro destination para poner la URL a donde queremos que la gente sea redirigida tras descargar e instalar el Google Chrome Frame)

Esto deberá ir en la página web PRINCIPAL de nuestro Sitio o Aplicación web, de manera que cuando la gente accese, se le explique con un vistoso y sencillo cuadrito que su navegador web quizá no sea compatible con el sitio, y que esto se puede solucionar instalando un plugin automáticamente.

Después, en todas las "subpáginas" del sitio y/o aplicación, simplemente agregamos esta línea de código dentro del elemento head de las mismas:

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

Así, le pediremos a la computadora del usuario que utilice Google Chrome Frame para renderizar las páginas web de nuestra elección, cuando el usuario navegue usando Internet Explorer.