Soporte HTML5 en navegadores viejos y nuevas

capacidades de Javascript

Soporte HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que para el 2010,
era casi vergonzoso no tener. Cosas como <video> y <canvas> 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 poca adopción de
HTML5. Te introduciré un concepto que mencionaremos más adelante
que es 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 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 cuando
vemos sus características.

La batalla actual de los navegadores

Los navegadores y las empresas responsables constantemente están

discutiendo por ser líderes. ¿Se recuerdan de Netscape? Era super
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 del ecosistema 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 vos estás leyendo este manual
seguramente no eres usuario de Internet Explorer, sino 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.

<!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![e
ndif]-->
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, tu 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.

<head>
<title>Mejorando.la</title>
<script src="modernizr.min.js"></script>
</head>

Y 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: Adicional 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 enserio 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 Javascript

Dicen 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 Storage

Una 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.