Soporte HTML5 en navegadores viejos y nuevas capacidades de Javascript

Soporte HTML5 en navegadores viejosHTML5 trae al mundo del desarrollo web habilidades que para el 2010 era casi vergonzoso no tener. Cosas como y eran más que necesarias. Sin embargo, no es el primer gran cambio de Internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el objeto XmlHttpRequest, más conocido como AJAX. .Lo que pocos saben o la gran mayoría niega es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador responsable de detener la innovación en los estándares web, también es el creador de la innovación más importante sin la cual cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían sido inviables.Internet Explorer, claro, es también la razón de la escasa adopción de HTML5. Te presentamos un concepto que mencionaremos más adelante, OldIE, con el cual nos vamos a referir a IE6, IE7 e IE8. Son navegadores viejos que tienen muy poco o nulo soporte para nuevas características HTML5. Y en el caso de IE8 sigue teniendo muchos usuarios dependiendo de tu proyecto. Lo bueno es que Microsoft mismo quiere eliminar las versiones viejas de su navegador y va a motivar actualizaciones automáticas de aquí en adelante. IE9 por el contrario es bastante poderoso e IE10 casi merece un abrazo genuino. La batalla actual de los navegadoresLos navegadores y las empresas responsables constantemente están discutiendo por ser líderes. ¿Recuerdan Netscape? Era súper popular en el mercado de navegadores hasta que llego IE6 y conquistó el mercado. También tuvo problemas de monopolio de parte de Microsoft al incorporarlo como parte de su sistema operativo. Y de hecho IE6 en su momento fue mágico, traía muchas cosas buenas. Pero una vez conquistó se echó a dormir y a rascarse la panza. El resto de navegadores fueron mejorando con los años.Entre ellos, hay un navegador en particular que ha roto paradigmas: Chrome de Google. Está basado en el motor de render WebKit. Hay varios motores como Gecko, Presto y Trident; te dejo de tarea que averigües cuál es la base de los más populares navegadores en el mercado. ¿Cuál estarás usando ahora mismo?El punto con Chrome es que llegó a burlarse de los navegadores. No fue lanzada una versión 1, sino empezó varias versiones después y se actualiza todo el tiempo. Si estás leyendo este manual seguramente no eres usuario de Internet Explorer, sino que utilizas Firefox, Chrome, Opera o Safari. Y recuerda que los early-adopters definimos mucho del futuro. Chrome tiene un ciclo de actualización constante, lo que ayudará a que nuevos módulos de HTML5 se incorporen más rápidamente. Y esta misma conducta hoy está siendo imitada por Firefox y también ha impulsado a IE a actualizarse. Gracias Chrome, cambiaste al mundo, ¡beso en la mejilla!Nuestra única preocupación con el liderazgo y astucia de Chrome es que se está convirtiendo en el nuevo líder en usuarios. Ya está superando en muchos mercados a IE8 y también destronó rápidamente a Firefox como el navegador que tenía un buen pedazo de usuarios en la web. Y si algo nos enseña la historia es que muchas corporaciones americanas conquistan un mercado y se echan a dormir. Yo espero que Chrome siga con su constante entusiasmo y que todos los demás compitan por usuarios, porque un solo líder nunca ha sido bueno para la industria.Muy lindo lo de HTML5, pero ¿cómo lo hago compatible con OldIE?La pregunta más frecuente en cada curso que impartimos de HTML5 es como asegurarte que tu jefe, que seguramente sigue usando mouse de bolita y tiene una resolución de 800x600 pueda ver tus creaciones en su computadora que seguramente tiene OldIE. Hay varias formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en OldIE gracias a los grandes hackers del mundo, seres maravillosos sin ningún tipo de vida social que destinan sus conocimientos a hacerte la vida más fácil para que tu consigas todas las chicas.Entre los proyectos más importantes que tienes que conocer están:HTML5 Enabling Script: permite usar las etiquetas semánticas dentro de OldIE como si fueran divs normales, estabilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible agregarles diseño a ellas o cualquier elemento dentro de ellas.Para utilizarlo debes incluir esta línea en el HEAD de tu documento.IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en OldIE. Es magia negra, ¡les digo!Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para múltiples capacidades de Javascript, HTML5 y CSS3. Si no, tú mismo puedes codear la solución o alternativa. Y otra cosa buena de Modernizr es que está en constante actualización, copiando muchas características del HTML5 enable script. Es uno de los proyectos más hermosos de la web actual. Recuerda que merece beso en la boca directamente.Para usar Modernizr solo hace falta incluir el script en el head de tu documento. Ve al sitio web del proyecto para descargar la última versión. Mejorando.laY una vez incluido, con Javascript puedes empezar a hacer consultas al navegador para verificar si hay algún módulo de HTML5 disponible para utilizarlo.Por ejemplo, ¿puedo usar el tag vídeo en este documento?if (Modernizr.video) { // aquí pondrías el tag vídeo o algún player HTML5 lindo.} else { // no se puede, así que podemos lanzar un player en flash o decir que no hay vídeo.}Imagina que quieres aprovechar la capacidad de LocalStorage, ¿cómo le preguntarías?if (Modernizr.localstorage) { // Aqui puedes guardar algo al navegador} else { // No hay localstorage, habrá que usar alguna cookie o similar}Es muy fácil y práctico acostumbrarse a Modernizr. Lo importante es siempre ofrecer alternativas para navegadores viejos.4. Selectivizr: uno más, que nos trae los selectores de CSS3 a funcionar en navegadores viejos. Es también un script Javascript que debes incluir en tus documentos para encontrar retro-compatibilidad.Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores felices.5. HTML5 Please: adicionalmente a todos estos scripts, tenemos un sitio que te da mucha información sobre las capacidades HTML5 que puedes usar y recomendar para hacerlas compatibles en múltiples navegadores. Además es un Wiki que se va actualizando constantemente y muestra la activa comunidad que existe pensando en HTML5. ¿Pero esto en serio ¿lo puedo usar ahora mismo?El mejor sitio que puede responderte eso es CanIUSe.com. Donde encontrarás una lista de todas las capacidades de HTML5, CSS3 y nuevas características Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5 Enabling Script. Gracias a ellos, muchos de esos rojos se convierten en verdes. Y hay muchas más librerías que vas a ir conociendo en el transcurso de la vida. Aun así, muchos dirán que IE6 sigue siendo la razón por la que no usan HTML5. Bueno, quiero mostrarles las estadísticas de una semana de un sitio que no es sobre tecnología, sino una web de audiencia genérica, gente normal que usa la web. El público más general posible:¿Parece que IE tiene mucho mercado, a pesar de estar cediendo, verdad? Bueno, miremos más de cerca a IE a ver quién usa realmente IE6:Sólo el 14% usa IE6. Y si el total de usuarios de IE es del 49%, eso significa que los usuarios de IE6, en total, son solamente el 6.8% de las visitas. En síntesis:¡¡FUCK IE6!!No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y vivan el feliz mundo de HTML5.En Estados Unidos donde se ha hecho el esfuerzo más fuerte por aniquilar a IE6 al momento de revisar este manual tenía una penetración de mercado de menos del 1%. En Latinoamérica como el software es gratis (o estamos malacostumbrados a bajarlo todo de Internet) solemos actualizar bastante nuestros sistemas operativos y navegadores. Países como México, Colombia, Chile, etc. tienen porcentajes menores al 3% de uso de este navegador y cada vez son más bajos.Nota aclaratoria. Microsoft no quiere mucho al equipo de mejorando.la por las opiniones expresadas sobre OldIE. Pero el equipo es muy fan de muchos productos y propuestas de Microsoft. Hasta consideramos que IE9 tiene lo suyo:Nuevas capacidades de JavascriptDicen que hay 3 etapas del mundo del desarrollo web.La era HTML fue la etapa de contenidos estáticos que de 1999 al 2000 generaba documentos estáticos con información enlazada en forma descentralizada.La era LAMP se dio del 2001 al 2009. Todos trabajabamos con servidores web y un entorno de desarrollo que con un lenguaje de programación para la web obtenía información de una base de datos y generaba documentos html. LAMP viene de las siglas de Linux + Apache + Mysql + PHP.La era Javascript arranca en el 2010. No sabemos si durará también 10 años, pero si tenemos la garantía que Javascript es una apuesta segura para hacer proyectos tecnológicos hoy en día.Khan Academy, la universidad online apoyada por Bill Gates está creando un programa donde enseñará a las nuevas generaciones a programar en Javascript. Y Javascript en serio, no el que copias y pegas para tener efectos especiales en el menú de navegación de tu sitio.Frameworks como Jquery, Mootols, YUI; precompiladores como CoffeeScript y también Javascript del lado del Servidor como node.js son movimientos apoyados por toda la gente que sabe de desarrollo web. Si te gusta programar y has trabajado con PHP, Perl, Python, Java, etc. te aconsejo que le dediques más horas a Javascript. El mercado empieza a solicitar buenos programadores en esta tecnología.Y es que Javascript, que es el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas gracias a HTML5. Esta es una lista de las más importantes:Local StorageUna cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado.Las cookies apestan.Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier tipo de datos cabe en un Storage.Web SQLEste me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9 declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficiente para la mayoría de usos. Así que nada, esto por ahora no sirve.Web Workers¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading. ¿Ven como el navegador empieza a convertirse en una plataforma sólida de desarrollo?Web SocketsIgual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub.Arrastrar y soltarVete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.GeolocalizaciónMi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos Muchos de estos APIs son explorados a fondo en futuros capítulos de la guía.