Conclusiones
Trabajando para el mundo
Este es un libro sobre HTML5. Fue pensado como una guía para desarrolladores, diseñadores y programadores que quieran construir sitios web y aplicaciones utilizando las tecnologías más actuales. Pero nos encontramos en un proceso de transición en el cual las viejas tecnologías se fusionan con las nuevas, y los mercados no pueden seguirles el paso. Al mismo tiempo que millones y millones de copias de nuevos navegadores son descargadas de la web, millones y millones de personas no son ni siquiera conscientes de su existencia. El mercado está aún repleto de viejos ordenadores funcionando con Windows 98 e Internet Explorer 6, o incluso peor.
Crear para la web fue siempre un desafío, y se vuelve cada vez más complicado. A pesar de los prolongados y duros esfuerzos por construir e implementar estándares para Internet, ni siquiera los nuevos navegadores los soportan por completo. Y viejas versiones de navegadores que no siguen ninguna clase de estándar siguen presente, funcionando alrededor de todo el mundo, haciendo nuestras vidas imposible.
Por esta razón, es momento de ver qué podemos hacer para acercar HTML5 a la gente, cómo podemos crear e innovar en un mundo que parece indiferente. Llegó la hora de estudiar qué alternativas tenemos para trabajar con estas nuevas tecnologías y hacerlas disponibles para todos.
Las alternativas
Cuando se trata de alternativas, debemos decidir qué posición tomar. Podemos ser agresivos, atentos, inteligentes o trabajadores. Un desarrollador agresivo dirá: «Esta aplicación fue programada para trabajar en nuevos navegadores. Los nuevos navegadores son gratuitos. No sea perezoso y descargue una copia». El desarrollador atento dirá: «Esta aplicación fue desarrollada aprovechando las nuevas tecnologías disponibles. Si desea disfrutar mi trabajo en todo su potencial, actualice su navegador. Mientras tanto, aquí tiene una versión antigua que puede utilizar en su lugar». El desarrollador inteligente dirá: «Hacemos la tecnología de última generación disponible para todos. No necesita hacer nada, nosotros ya lo hicimos por usted». Y finalmente, un trabajador dirá: «Esta es una versión de nuestra aplicación adaptada a su navegador, aquí puede acceder a otra con más herramientas, especial para nuevos navegadores, y aquí ofrecemos la versión experimental de nuestra súper evolucionada aplicación».
Para un acercamiento más práctico y útil, estas son las opciones disponibles cuando el navegador del usuario no está preparado para HTML5:
Informar Recomiende al usuario actualizar su navegador si algunas características requeridas por su aplicación no están disponibles.
Adaptar Seleccione diferentes estilos y códigos para el documento de acuerdo con las características disponibles en el navegador del usuario.
Redireccionar Redireccione usuarios a un documento completamente diferente diseñado especialmente para viejos navegadores.
Emular Use librerías que hagan HTML5 disponible en viejos navegadores.
Modernizr
Sin importar cuál es la opción elegida, lo primero que debemos hacer es detectar si las características de HTML5 requeridas por su aplicación están disponibles en el navegador del usuario o no. Estas características son independientes y fáciles de identificar, pero las técnicas requeridas para hacerlo son tan diversas como las características mismas. Desarrolladores deben considerar diferentes navegadores y versiones, y depender de códigos que a menudo no son para nada confiables.
Una pequeña librería llamada Modernizr fue desarrollada con la intención de resolver este problema. Esta librería crea un objeto llamado Modernizr que ofrece propiedades para cada característica de HTML5. Estas propiedades retornan un valor booleano que será true (verdadero) o false (falso) dependiendo si la característica está disponible o no.
La librería es de código abierto, programada en Javascript y disponible gratuitamente en www.modernizr.com. Solo tiene que descargar el archivo Javascript e incluirlo en sus documentos, como en el siguiente ejemplo:
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Modernizr</title>
<script src=»modernizr.min.js»></script>
<script src=»modernizr.js»></script>
</head>
<body>
<section id=»cajadatos»> contenido </section>
</body>
</html>
Listado C-1. Incluyendo Modernizr en sus documentos.
El archivo llamado modernizr.min.js es una copia del archivo de la libraría Modernizr descargado desde su sitio web. El segundo archivo incluido en el documento HTML en el Listado C-1 es nuestro propio código JavaScript donde controlamos los valores de las propiedades provistas por la librería:
function iniciar(){
var caj adatos=document.getElementByld(‘caj adatos’);
if(Modernizr.boxshadow){
cajadatos.innerHTML=’Box Shadow está disponible’;
}else{
cajadatos.innerHTML=’Box Shadow no está disponible’;
}
}
window.addEventListener(‘load’, iniciar, false);
Listado C-2. Detectando la disponibilidad de estilos CSS para generar sombras.
Como puede ver en el código del Listado C-2, podemos detectar cualquier característica de HTML5 usando solo un condicional if y la propiedad del objeto Modernizr correspondiente. Cada característica tiene su propia propiedad disponible.
Librerías
Una vez que las características disponibles son detectadas, tenemos la opción de usar solo aquello que funciona en el navegador del usuario o recomendarle actualizar el software a una versión que incluya todas las características que nuestra aplicación necesita. Sin embargo, imagine que usted es un desarrollador obstinado o un loco programador que (al igual que sus usuarios y clientes) no se interesa por fabricantes de navegadores o versiones de programas o versiones beta o características no implementadas o lo que sea, usted solo quiere ofrecer la última tecnología disponible sin importar nada.
Bueno, aquí es donde librerías independientes pueden ayudar. Docenas de programadores en el mundo, probablemente más obstinados que nosotros, se encuentran desarrollando y mejorando librerías que imitan características de HTML5 en navegadores viejos, especialmente APIs de Javascript. Gracias a este esfuerzo, ya disponemos de los nuevos elementos HTML, selectores y estilos CSS3, y hasta complejas APIs como Canvas o Web Storage en cada navegador del mercado.
Por mayor información diríjase al siguiente enlace donde encontrará una lista actualizada de todas las librerías disponibles: www.github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-Polyfills
Google Chrome Frame será probablemente nuestro último recurso. Personalmente pienso que era una buena idea al comienzo, pero hoy día es mejor recomendar a nuestros usuarios actualizar sus navegadores antes que descargar un agregado como Google Chrome Frame.
Google Chrome Frame fue específicamente desarrollado para las viejas versiones de Internet Explorer. Fue diseñado para introducir todo el poder y las posibilidades del navegador Google Chrome dentro de navegadores que no están preparados para las nuevas tecnologías pero aún se encuentran instalados en los ordenadores de los usuarios y forman parte del mercado.
Como dije anteriormente, fue una buena idea. Insertando una simple etiqueta HTML en nuestros documentos, un mensaje era mostrado a los usuarios recomendando instalar Google Chrome Frame antes de ejecutar la aplicación. Luego de finalizado este simple paso, todas las características soportadas por Google Chrome estaban automáticamente disponibles en ese viejo navegador. Sin embargo, los usuarios no evitaban descargar software de la web. No discernir cuál es la diferencia entre esto y descargar una nueva versión de un navegador, especialmente ahora que hasta Internet Explorer tiene su propia versión gratuita compatible con HTML5. Estos días, con tantos navegadores listos para ejecutar aplicaciones HTML5, es mejor guiar a los usuarios hacia este nuevo software en lugar de enviarlos hacia oscuros y confusos agregados como Google Chrome Frame.
Para conocer más sobre Google Chrome Frame y cómo usarlo visite:
code.google.com/chrome/chromeframe/
En este nuevo mundo de dispositivos móviles y computación en la nube, no importa qué tan nuevo sea el navegador, siempre habrá algo más de qué preocuparnos. Probablemente el iPhone puede ser considerado el responsable de comenzarlo todo. Desde su aparición, varias cosas cambiaron en la web. El iPad lo siguió, y toda clase de imitaciones emergieron luego para satisfacer este nuevo mercado. Gracias a este cambio radical, el acceso móvil a Internet se volvió una práctica común. De repente estos nuevos dispositivos se volvieron un importante objetivo para sitios y aplicaciones web, y la diversidad de plataformas, pantallas e interfaces forzaron a los desarrolladores a adaptar sus productos a cada caso específico.
Estos días, independientemente de la clase de tecnología que usemos, nuestros sitios y aplicaciones web deben ser adaptados a cada posible plataforma. Esta es la única manera de mantener consistencia y hacer nuestro trabajo disponible para todos. Afortunadamente, HTML considera estas situaciones y ofrece el atributo media en el elemento <link> para seleccionar recursos externos de acuerdo a parámetros predeterminados:
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Documento Principal</title>
<link rel=»stylesheet» href=»ordenador.css» media=»all and (min-
width: 769px)»>
<link rel=»stylesheet» href=»tablet.css» media=»all and (min-
width: 321px) and (max-width: 768px)»> <link rel=»stylesheet» href=»celular.css» media=»all and (min-
width: 0px) and (max-width: 320px)»>
</head>
<body>
</body>
</html>
Listado C-3: Diferentes archivos CSS para diferentes dispositivos.
Seleccionar cuáles estilos CSS serán aplicados al documento es una manera fácil de hacer este trabajo. De acuerdo al dispositivo o al tamaño de la pantalla, los archivos CSS son cargados y los estilos apropiados son aplicados. Elementos HTML pueden ser cambiados de tamaño y documentos enteros pueden ser adaptados y mostrados dentro de espacios y circunstancias específicas.
En el Listado C-3, tres archivos CSS diferentes son incorporados para tres situaciones distintas. Las situaciones son detectadas por los valores del atributo media en cada etiqueta <link>. Usando las propiedades min-width y max-width, podemos determinar el archivo CSS que será aplicado a este documento de acuerdo con la resolución de la pantalla en la cual el documento está siendo mostrado. Si el tamaño horizontal de la pantalla es de un valor entre 0 y 320 pixeles, el archivo celular.css es cargado. Para una resolución entre 321 y 768 pixeles, el archivo tablet.css es el incluido. Y finalmente, para una resolución mayor a 768 pixeles, el archivo ordenador .css es el que será usado.
En este ejemplo, contemplamos tres posibles escenarios: el documento es cargado en un celular pequeño, una Tablet PC o un ordenador de escritorio. Los valores usados son los que normalmente se encuentran en estos dispositivos.
Por supuesto, el proceso de adaptación no incluye solo estilos CSS. Las interfaces provistas por estos dispositivos son ligeramente diferentes entre sí debido principalmente a la eliminación de partes físicas, como el teclado y el ratón. Eventos comunes como click o mouseover han sido modificados o en algunos casos reemplazados por eventos táctiles. Y además, existe otra importante característica presente en dispositivos móviles que le permite al usuario cambiar la orientación de la pantalla y de este modo cambiar también el espacio disponible para el documento. Todos estos cambios entre un dispositivo y otro hacen imposible lograr una buena adaptación con solo agregar o modificar algunas reglas CSS. Javascript debe ser usado para adaptar los códigos o incluso detectar la situación y redireccionar a los usuarios hacia una versión del documento específica para el dispositivo con el que están accediendo a la aplicación.
IMPORTANTE: Este tema se encuentra fuera de los propósitos de este libro. Para mayor información, visite nuestro sitio web.
Siempre habrá desarrolladores que le dirán: «Si usa tecnologías que no se encuentran disponibles para el 5% de los navegadores en el mercado, perderá un 5% de usuarios». Mi respuesta es: «Si usted tiene clientes que satisfacer, entonces adapte, redireccione o emule, pero si usted trabaja para usted mismo, informe».
Siempre debe buscar el camino al éxito. Si trabaja para otros, debe ofrecer soluciones completamente funcionales, productos que los clientes de sus clientes puedan acceder, sin importar la elección que hayan hecho con respecto a ordenadores, navegadores o sistemas operativos. Pero si usted trabaja para usted mismo, para ser exitoso debe crear lo mejor de lo mejor, debe innovar, estar por delante de los demás, independientemente de lo que el 5% de los usuarios tenga instalado en sus ordenadores. Debe trabajar para el 20% que ya descargó la última versión de Firefox, el 15% que ya tiene Google Chrome instalado en su ordenador, el 10% que tiene Safari en su dispositivo móvil. Usted tiene millones de usuarios listos para convertirse en sus clientes. Mientras que el desarrollador le pregunta por qué se arriesgaría a perder un 5% de usuarios, yo le pregunto: ¿por qué dar la espalda a las oportunidades que se le presentan?
Usted nunca conquistará el 100% del mercado, y eso es un hecho. Usted no desarrolla sus sitios web en chino o portugués. Usted no está trabajando para el 100% del mercado, usted ya trabaja solo para una pequeña porción del mismo. ¿Por qué seguir limitándose? Desarrolle para el mercado que lo acerque al éxito. Desarrolle para la porción del mercado que crece continuamente y que le permitirá aplicar las nuevas tecnologías disponibles y dejar correr su imaginación. Del mismo modo que no se preocupa por mercados que hablan otros idiomas, tampoco debe preocuparse por la parte del mercado que aún utiliza viejas tecnologías. Informe. Muéstreles lo que se están perdiendo. Aproveche las últimas tecnologías disponibles, desarrolle para el futuro y tendrá el éxito asegurado.