Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Mejorandolaweb Guia Html5
Mejorandolaweb Guia Html5
Lder y fundador de Cristalab, importante comunidad de desarrollo web en habla hispana. Certificado Profesional de Adobe. Gestor y conferencista de mltiples eventos alrededor del mundo relacionados con Internet, el desarrollo web y los negocios en lnea. Ha sido docente en varias universidades de Latinoamerica. Ha fundado, dirigido y posicionado mltiples proyectos web de comunidades, redes de contenido, aplicaciones y emprendimientos. Es asesor y consultor de varias empresas de hispanoamerica en temas relacionados con Internet y nuevas tecnologas.
Lder y fundador de Maestros del Web, su mayor objetivo es promover el uso de Internet y sus tecnologas en todos los aspectos de la vida diaria Es un nmada digital que viaja por el mundo asesorando empresas sobre estrategias y desarrollo de proyectos web mientras cultiva su pasin por la gastronoma y el mundo del vino. Ha dado cursos y conferencias sobre desarrollo web, comercio electrnico, marketing en buscadores y optimizacin, medios digitales y comunidades virtuales en: A r g e n t i n a , Bolivia, El Salvador, Repblica Dominicana, Guatemala, Mxico, Chile, Panam, Per, Espaa, Estados Unidos y Uruguay.
PRLOGO
HTML5 es el presente de la web y si no ests asimilando lo que est pasando ya eres parte de la vieja generacin de desarrolladores. Eso tendra que tenerte preocupado.
Entender HTML5 es entender que hoy nos conectamos desde telfonos mviles, 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 tecnologa que cuentan con frontends, backends, sysadmins, mobile devs, comunity managers y arquitectos de informacin en los proyectos que estn reiventando mercados y generando trfico 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 tecnolgicos que independientemente de sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en cdigo en el navegador ms cercano a tu pantalla. Es una de sus ms importantes estrategias de posicionamiento y es una de sus ms fuertes apuestas de reclutamiento. Dije adems que HTML5 tiene logo de sper hroe y que venden camisetas para apoyar al movimiento? Si crees que HTML sigue representando las siglas del Hypertext Markup Language no has entendido nada. HTML5 es una poca maravillosa de la web que tienes el privilegio de estar disfrutando. No es tecnologa, ni es tendencia. Es una poca dorada. Disfrtala y embrigate de sus tags.
Captulo uno
<!DOCTYPE html>
Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar. Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semntico superior a un simple div o span.
1 2 3 4 5 http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/ http://jqueryui.com/ http://www.cristalab.com/blog/sproutcore-la-competencia-en-javascript-a-flex-y-flash-c58098l/ http://www.cristalab.com/tips/la-importancia-de-doctype-y-de-validar-xhtml-y-css-c57338l/ http://www.cristalab.com/tutoriales/tutorial-basico-de-xhtml-c143l/
<footer>
Este es obvio. Es el pie de pgina y todo lo que lo compone.
<
Soporte HTML5 en navegadores viejos
captulo dos
<
13
Internet Explorer, claro, es tambin la razn de la poca adopcin de HTML5. Sin embargo, hay formas de que las etiquetas semnticas 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 diseo a ellas o cualquier elemento dentro de ellas.
IE-CSS32: Usando arcanas tcnicas (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!
1 http://remysharp.com/2009/01/07/html5-enabling-script/ 2 http://fetchak.com/ie-css3/
15
Aun as, muchos dirn que IE6 sigue siendo la razn por la que no usan HTML5. Bueno, quiero mostrarles las estadsticas de una semana de un sitio que no es sobre tecnologa, sino una web de audiencia genrica, gente normal que usa la web. El pblico ms general posible:
1 http://www.caniuse.com/
<
Nuevas capacidades de Javascript
captulo tres
<
19
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. Vers que es posible adjuntarlo con slo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.
Geolocalizacin
Mi favorita. El navegador har uso de muchos mtodos (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 slo en telfonos Ms adelante un captulo dedicado a la geolocalizacin en la gua.
1 http://code.google.com/p/pubsubhubbub/
21
Captulo cuatro
Disear en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No slo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaos dinmicos requiere mltiples divs, estilos y cuatro PNGs diferentes en el mejor de los casos. Ya no ms, CSS3 es hermoso y trae para ti opciones que hacen el diseo estpidamente fcil.
@font-face, @fucking-font-face
Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. Saben qu otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba Y saben qu ms? NADIE LO USA.
23
iguales con ciertos atributos diferentes en HTML. Y esto es muy compatible desde IE8.
Columnas de texto
Sabes cmo se haca antes que varios prrafos de texto se dividieran en columnas con HTML? No se poda. Ahora slo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lneas de separacin, etc.
Bordes redondeados
S. Con una instruccin2 puedes hacer que cualquier caja tenga bordes redondeados3 como quieras. Olvdate de crear mltiples divs, cortar pngs y otros temas arcaicos.
25
Captulo cinco
El tag <video>
Uno de los espacios ms polmicos de la web
Hablar de vdeo en internet es hablar de ciclos, de batallas campales entre los CEOs ms influyentes en el mundo de tecnologa, de la compleja estandarizacin de un codec o de un player. Hay un avance importante con el tag <video> pero esto apenas empieza y mucha de la historia seguramente se va a repetir nuevamente. Regresemos en el tiempo al ao 2004. No exista Youtube. Por lo mismo, si queras alojar y compartir en un navegador cualquier vdeo te enfrentabas a dramas de plataforma, de ancho de banda y de problemas de usabilidad para el usuario final. Si encontrabas algn enlace que te llevara a ver videos en la web seguramente te sonaran los logos de Real Player, de Windows Media Player o incluso de Quicktime. Del lado del servidor los sysadmins tenan que pelear con Real Media Server, Windows Media Server que era parte del IIS y otro montn de opciones, pero era complicado unificar. Adobe por su parte haba logrado importantes avances para que desde archivos .swf pudieras incorporar videos, pero no haba un solo canal. En el ao 2005, 3 jvenes dejaron de trabajar en Paypal y emprendieron el sueo de crear una plataforma universal para compartir video. Ese ao nace Youtube y el mundo fue un lugar ms feliz. Paralelamente, Adobe demostr que su esfuerzo para crear un sistema para reproducir vdeo iba a ser valorado y aprovechara el dominio que su plugin de flash tena en todos los navegadores del planeta. Los sysadmins educaron a sus usuarios a crearse una cuenta en youtube y que dejaran de molestar con complejos servidores para alojar y reproducir vdeos. Todos hemos vivido ms felices, Lady Gaga es cada da ms famosa y nyancat est educando a tus hijos. En abril del 2010 una carta de Steve Jobs a sus sbditos (entindase a todos los clientes de apple) sobre sus pensamientos de Flash arranca uno de esos nuevos ciclos donde una plataforma disruptiva que cada da ganaba mercado le daba la espalda al famoso plugin de Adobe en sus dispositivos mviles. Apple le prometa larga vida al HTML5 porque todo se poda resolver en temas de vdeo con un tag apro-
27
No dejamos de usar flash, es ms, es uno de los planes de contingencia ms seguros para que muchas personas y navegadores viejos puedan ver tus contenidos en vdeo.
preload = que empezar a precargar el video independientemente de las acciones del usuario sobre el player.
<video src=un-video-mlw.avi width=320 height=240 preload></video>
Recomendamos utilizarlo si la funcin de la pgina es mostrar un video. Si por el contrario, el video nicamente ayudar a complementar la informacin (un post que tiene mltiples videos o referencias, no lo recomendamos) <video src=un-video-mlw.avi width=320 height=240 preload=none></video> Y el anterior que le dir explcitamente que no tiene que precargar el video.
autoplay = dar play al video en cuanto cargue la pgina sin accin del usuario sobre los controles.
<video src=un-video-mlw.avi width=320 height=240 autoplay></video>
29
tenan avances con desarrollos de codecs de videos. Y unos aos despus ponen a disposicin del mundo el VP8. Es todo lo bueno que puedas pedir en este tipo de enrollos legales ya que lo liberaron gratis, sin pagar derechos ni nada raro a quien lo quiera usar. Es un regalito de Google para el mundo. Pero Microsoft y Apple no quieren regalos de nadie, as que ya entenders cul es el problema de este formato.
Theora.
No tiene dramas de patentes, es royalty free, funciona en Linux y es seguramente el que viene en archivos Ogg. De hecho, se basa en desarrollos de On2 (la empresa que eventualmente fue adquirida por Google) y llev esto por otro camino que es muy libre, transparente, bueno, lindo, pero menos popular. Puedes instalar decodificadores en Windows, en Mac Hoy lo soporta Chrome (junto a VP8) y suena maravilloso pero como todo lo gratis y open source, pareciera que le hace falta alguien de marketing que lo popularice un poco ms. Google es amigo de este formato. Resumen ejecutivo de estos formatos, tienes que usar al menos h.264 y Theora o VP8 para que la web te vea. No puedes usar solo uno, toca elegir dos. Y por cierto, solo hemos hablado de codecs de video. El drama con codecs de audio tambin nos trae opciones y complicaciones que te recomendara investigar.
Players
Finalmente, hay un inciso ms en el mundo de <video>. Cuando escriba esta gua me daba cuenta que si lo explicamos todo con detalle podemos hacer una Gua exclusiva del mundo del Video en HTML5 y seguramente sera ms grandota que esta. Lo ponemos en la lista de pendientes. La opcin de controls en el tag video abre un mundo de posibilidades para que te pongas a generar un reproductor visible al usuario personalizado. Y los hackers del mundo han visto opcin para poner su talento artstico a disposicin de los dems. Hay muchas opciones de players de video que puedes utilizar e incluir en tus pginas HTML5. La mejor opcin para conocer esta ensalada es: http://praegnanz.de/html5video/
31
Videos
http://videojs.com/ Han sabido vender la propuesta de su player con varios skins que imitan los de los principales sitios de video en la web.
Sublime Video
http://sublimevideo.net/ Un proyecto con un fin comercial que quiere hacerse cargo del player para que vos te encargues de generar el contenido. Aunque sigo sin verle la proposicin de valor por sobre lo que me puede entregar Youtube.
<
Como arrancar con HTML5 en diez minutos
captulo seis
<
35
Adicionalmente, en el sitio oficial encontrars toda la documentacin, videos detallados de su uso y toda una comunidad que nace en busca de comprender a fondo el HTML5. Independientemente de si nuestra gua te ha sido de utilidad, que sigas los enlaces a este recurso si an no lo conoces es el mejor aporte que podemos darte en este tema. Dato importante adicional, todo el proyecto de HTML5Boilerplate nace de la iniciativa de Mickael Daniel. Desde que lo conocimos nuestro servidor de desarrollo en mlw.io se llama Mickael en su honor, muy merecido lo tena.
<
HTML5 en accin
captulo siete
<
39
Vimeo/m/1 y m.youtube.com2
Las versiones mviles de Vimeo y Youtube para telfonos, as como sus versiones para tablets (iPad, Samsung Galaxy Tab, Playbook, etc) estn hechas slo con HTML5. CSS3 para los diseos y obviamente la etiqueta <video> para servir los videos, sin necesidad de Flash.
1 http://vimeo.com/m/ 2 http://m.youtube.com/
41
Scribd.com1
Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.
1 http://www.scribd.com/
43
TiaXime.com1
El diseo de Tia Xime sera infernal de implementar si no fuera por CSS3. Que se joda la gente que usa IE6.
1 http://tiaxime.com/