Brogramador

Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha
recibido muchas habilidades nuevas. Esta es una lista de las más importantes.
Web 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 SQL

Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer
9 declaró que no implementará Web SQL1 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.

Web Sockets
Igual 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 PubSubHubBub1.
Arrastrar y soltar

Vete 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ón

Mi 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
Más adelante un capítulo dedicado a la geolocalización en la guía.

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters
y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos
que están reiventando mercados y generando tráfico e ingresos.
Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en
el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento
y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de superheroe
y que venden camisetas para apoyar al movimiento?

Nuevas etiquetas de HTML5

<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.

Atención <div> no está muerto:

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Soporte HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo 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 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. Sin embargo, hay formas de
que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE.
Gracias a los grandes hackers del mundo:

• HTML5 Enabling Script1: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran
  divs normales, estilizables 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 IE6, 7 y 8. Es magia negra, les digo!
• Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para
  multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o
  alternativa.

Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores
felices.

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.