Nuevas capacidades de CSS3 y video en HTML5

Nuevas capacidades de CSS3 Antes de cualquier cosa, sabas que CSS3 tambin tiene logo de Super Heroe?

Disear en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No slo por la falta de compatibilidad con OldIE, 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-faceEs la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon (s, cufn es malsimo), fuentes en imgenes PNG, SiFR u otras cosas de hippies. Saben qu otra cosa? Esto funciona perfecto desde OldIE Y saben qu ms? NADIE LO USA. @font-face es un atributo de CSS3 bastante oscuro que permite usar cualquier fuente en tus diseos. Implementarlo no es dificil. Podrs disear todo lo que quieras para la web sin restricciones tipogrficas.

Fuentes @font-face: ttf, woff, eot, svg Todos conocen True Type (.ttf) y en menor medida Open Type (.otf), pero pocos conocen la amplia cantidad de formatos que existen en la web actual y esa es la principal razn para que nadie implemente (bien) @font-face. TTF es muy estndar pero no tiene proteccin ninguna. Es un formato abierto y reusable, por lo que fuentes privadas o propietarias (como Helvetica o Myriad Pro) al ponerlas en la web, son distribuidas. Esto est prohibido por la licencia del creador de la fuente (historia larga) y para ello, varios navegadores crearon estas opciones: EOT: El formato Embedded Open Type (.eot) fue creado por Microsoft como pionero en Internet Explorer 6 para agregar fuentes a travs de fontface. Es bastante oscuro pero es la nica forma de hacer que las fuentes funcionen en IE6, 7 y 8. WOFF: Web Open Font Format es el formato oficial de la W3C, creado por Mozilla y ahora apoyado por Chrome, Opera e IE9 y 10. Tambin oscuro, pero tambin necesario. SVG: Scalable Vector Graphics es un formato de dibujo vectorial soportado por todos los navegadores y por herramientas como Adobe Illustrator. SVG tambin puede contener fuentes por dentro, porque una fuente a fin de cuentas es un vector. SVG es obligatorio para darle soporte a Safari Mobile (iPhone, iPad). Implementacin de @font-face en CSS3 compatible con TODOS los navegadores Para implementar una fuente en @font-face para todos los navegadores de escritorio o mviles, hay que convertirla a todos los formatos anteriores. Pero usando herramientas como FontSquirrel @font-face generator. La sintaxis de font-face es muy sencilla. Slo colocas esto en las primeras lineas de tu CSS:
@font-face { font-family: "Mejorandola"; src: url("fuentefancy.eot"); src: url("fuentefancy.eot?#amomejorandola") format("embeddedopentype"), url("fuentefancy.woff") format("woff"), url("fuentefancy.ttf") format("truetype"), url("fuentefancy.svg#IDdelafuente") format("svg"); }

.eot siempre debe ir de primeras y siempre debe ir dos veces. Porque Internet Explorer 6, 7 y 8 son como un ex psicopata. Siempre quiere que le pongas de primeras ante el resto. Tambin recuerda que puedes agregar tantos @font-face como quieras. Simplemente declaras otro bloque @font-face y le pones otro font-family. Ya est. Las fuentes SVG tienen un ID que debe ir frente a ellas con el signo #. Lo consigues abriendo el .svg con cualquier editor de texto y buscando el atributo "id". Luego, simplemente usas la fuente con el nombre arbitrario que le diste. Por ejemplo, si quieres cambiar la fuente de todos los h1, slo haces
h1 { font-family: "Mejorandola"; }

As de fcil. Google Fonts API Google tiene una base de datos bastante interesante de tipografas abiertas donde, con una linea de cdigo, ellos se encargan del CSS, detectan el navegador y envan, desde sus servidores, la fuente correcta. Es una forma fcil y sin dolor de implementar font-face, aunque ests limitado a las fuentes de Google. Con Google Webfonts solo hace falta importar un script dinmico que va a llamar el formato de tipografa correcto para tu navegador y con la declaracin en tu hoja de estilos puedes aplicarlo en tus diseos. http://www.google.com/webfonts/v2

En Cristalab tenemos dos artculos detallados en el uso de Google Fonts: Usa cualquier fuente en CSS y HTML con el Font API de GoogleGoogle Fonts v2: Usa cualquier tipografa en HTML, mejorado Dos grandes ejemplos de @font-face ya implementados Curiosamente, fue Microsoft, en el lanzamiento de Internet Explorer 9, quien hizo un sitio llamado Lost Worlds Fair, donde muestra dos muy impactantes ejemplos de uso de fuentes. El primero es Moon (visto en la primera imagen de este artculo) y otro bastante poderoso es El Dorado. Muchas fuentes gratuitas al 100% pueden ser encontradas en Fontsquirrel @font-face kits o en Google Web Fonts. O puedes convertir la que quieras mientras tengas la licencia. Ahora ya puedes crear diseos con cualquier tipografa. Hora de abandonar Arial, Times y Helvetica. Selectores CSS Te ha tocado hacer un diseo donde una lista o tabla tiene algunos elementos en blanco y los otros en gris? Como una cebra. Antes, la nica forma era hacerlo a mano o con un script del lado del server. Ahora, con

CSS3, slo tienes que especificar un color para "odd" y otro para "even" y listo. Igualmente, puedes crear estilos para el primer elemento y otro para el ltimo. O estilos para etiquetas 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 dividiera 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, lineas de separacin, etc. Opacidad, transparencia, canales alpha, contraste, saturacin y brillo Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instruccin. Imgenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con slo CSS. rojo verde azul alfa (rgba) es una de las nuevas formas de introducir colores en css3 que se basa en esos tres colores bsicos con valores entre 0 y 255 y un canal alfa que distara la transparencia de dicho color con valores de entre 0 y 1, esto es aplicable a todo lo que le podas poner color. por ejemplo:
background:rgba(255,255,255,.5); color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.5) ;

eso todos lo casos se producir un color blanco con una opacidad al 50%. tambin podemos usar solo rgb para colores solidos y transparencia teniendo el efecto de los valores hexadecimales

brillo saturacion contraste alfa (hsla) de una manera similar manejamo el brillo saturacion y contraste con css3, si como photoshop, en este caso de valores a ingresar seran en porcentaje el cual medira el grado del efecto Animaciones de transicin y transformacin

Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados slo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrn aceleradas por hardware. Mucho ms veloces, sobre todo en dispositivos mviles. Bordes redondeados S. Con una instruccin puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvidate de crear mltiples divs, cortar pngs y otros temas arcaicos. Reflecciones, gradientes y sombras Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de cdigo y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

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 (entiendase 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 aprobado por el estndar. Hoy volvemos a tener una batalla de grandes empresas por el codec luego de que estn todos de acuerdo que el navegador lleva una opcin amigable para incluir un elemento de vdeo, porque este elemento es tan importante como las imgenes. Y podemos usar perfectamente el ejemplo de las imgenes para entender lo que pasa con el video. Todos los navegadores permiten que en un documento HTML incluyas un tag <img> al cual debes decirle la ruta a una imagen. Y la imagen puede ser un .jpg, un .gif, un .bmp o un .png (entre otros formatos). Depender de la capacidad de tu navegador para reconocer todos los contenidos de esta imagen, interpretarla y mostrarla. Con el vdeo pasa lo mismo. Con <video> dejamos de usar video en flash? El debate sobre Flash y Html5 da para los programas ms entretenidos de mejorandolaweb. Adobe tiene tecnologa slida y es de los reproductores que mejor entiende de codecs y licencias. Es una solucin prctica para que no tengamos que lidear con esos problemas y sigue siendo la base de Youtube. Youtube

sigue siendo la solucin prctica para que vos y yo compartamos en segundos un vdeo, le generemos difusin y hagamos adems social media. Pero incluso Youtube est haciendo esfuerzos importantes en miras de Html5, resolviendo otros dramas que incluye este tag. Revisa youtube.com/html5 con un navegador moderno y conoce ms de sus experimentos.

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. Uso del tag <video> y el soporte de formatos en diferentes navegadores Si hablamos de navegadores, recuerda que hay una versin donde el video empezo a existir. Antes, simplemente no va a mostrar contenido y detectarlo para mostrar un player alternativo (en flash) es recomendado: IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari Mobile 1.0+ Para incluir un video con HTML5 usas el siguiente formato:
<video src=un-video-mlw.avi width=320 height=240></video>

Adicionalmente al ancho y alto, hay otros atributos que puede usar: 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 explicitamente 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>

controls = invoca a incluirse los controles (play, pausa, volumen, etc.) en el player del video. Estos controles estn predefinidos en cada navegador y como veremos ms adelante en algunos players estas opciones pueden ser modificados con javascript + css3.
<video src=un-video-mlw.avi width=320 height=240 controls></video>

Qu formatos podemos incluir? Aqu es super importante entender una diferencia entre los tipos de archivo y los codex con que el video ha sido procesado. Un .avi, .mp4 (o .m4v), un .flv (flash video) y un .ogv simplemente contienen un video, pero cada formato puede tener diferente forma de codificarlo. Los navegadores y las compaias que los producen han elegido soportar nicamente a algunos codecs y lamentablemente no existe una alternativa definitiva y universal. En serio, no existe, tenemos tag <video> y el drama ha quedado por aqu, en que tienes que codificar tus videos al menos en algunos formatos para asegurarte que funcione en todos lados. Ven por qu Youtube sigue siendo una opcin maravillosa? Hablemos entonces de Codecs. Hay 3 que importan hoy en da: H.264, VP8 y Theora. H.264. Conocido como MPEG-4 Advanced Video Codiging, es el ms popular

hoy en da, lo usa youtube cuando muestra videos desde el flash player (el flash player lo soporta sin problema). Es el que le da vida a los videos en un iPhone, en tu iPad. Incluso muchos reproductores de Blue-ray lo soportan. Es genial, es asombroso, pero tiene algunos temas legales detrs que complica su existencia. Hay un grupo, el MPEG LA group que tiene patente sobre este formato y le quiere cobrar a todos los que decodifiquen su formato. Google no es muy amigo de este formato. Chrome ya tiene el 20% del mercado y Android sigue creciendo. En enero le dijeron adis. VP8. Google compr hace unos aos a una empresa llamada On2 por una millonada descabellada porque 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. Hablemos entonces de los Codes de audio: MP3 - MPEG 1 Audio Layer 3 Este es muy famoso y conocido, popularizado por las descargas musicales, seguro que tienes ms de algn archivo en tu computador con este formato.

Pero la mala noticia es que tiene patentes de software, esta limitado a dos canales y si empiezas a hacer cosas en serio toca pagar licencias. AAC Popularizado por Apple, seguramente lo has utilizado cuando convertiste msica para tu iPod o bajaste msica del iTunes Store. Tiene 48 canales as que es muy poderoso, aunque tambin tiene patentes (apple patenta todo) y entonces puede tener problemas de licencias si se usa en tus proyectos. Vorbis En el mundo siempre existen alternativas gratuitas y libres, gracias a todos esos hackers rebeldes que buscan opciones. Tiene mltiples canales, es royalty free (no tiene nada de patentes) y lo encuentras usualmente en el contender Ogg. No es muy popular, pero est all y hay que aprovecharlo. Si empezamos a combinar codes de audio y vdeo, ms los diferentes contenedores, encontramos 3 alternativas que hay que trabajar para nuestros vdeos: Webm (contenedor) y VP8 (video) + Vorbis (audio) - esta frmula la promueve Google para Chrome y a futuro para Android. Es libre. MP4 (contenedor) y H.264 (video) + AAC (audio) - esta frmula la promueve apple y recuerda que ms de 20 millones de iPads se vendieron el ao pasado. De hecho mientras escribo esto en un avin alguien est jugando Angry Birds en su iPad a mi lado, este mercado apenas est creciendo.OGG (contenedor) y Theora (video) + Vorbis (audio) - la frmula ms libre, sin patentes y que suena a amor puro. Aunque la usa y requieren muy pocas configuraciones. Te dira que hasta puedes ignorarla y preocuparte ms por trabajar con Webm. Entonces terminars con dos archivos en cada configuracin que utilice vdeo. mp4 y webm. Cmo los implemento en el tag video? Fcil, generndole diferentes sources:
<video width=320 height=240 controls> <source src="mejorandola.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'> <source src="mejorandola.webm" type='video/webm; codecs="vp8,vorbis"'> </video>

Aqu estamos asegurndonos que el tag video funcione para la gran mayora de los navegadores independientemente de los dramas de codecs

que manejen. Una versin libre apoyada en principio por Google y que est disponible en muchos motores de render bastante liberales. Y otra versin que est muy dedicada al mundo Apple y sus nuevos dispositivos. Qu hacer con navegadores viejos? OldIE por ejemplo no va a aceptar el tag video. Pero si hay un flash player instalado seguro que es otra opcin. Dnde incluir el cdigo embed de flash? Justo debajo del source, encerrado dentro del tag video. El navegador mostrar la opcin que reconozca. Players Finalmente, hay un inciso ms en el mundo de <video>. 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/

Las opciones son muchas y hay demasiados grupos de desarrolladores asegurando generar buenas alternativas al estandar definido en cada navegador. Entre las opciones ms populares all descritas y que hemos seguido: Videojs Han sabido vender la propuesta de su player con varios skins que imitan los principales sitios de video en la web. Es un proyecto libre y mi mejor recomendacin si te vas a tomar muy en serio el tema de alojar tus videos en tu sitio y mostrarlos a la mayor cantidad de navegadores.

Sublime Video

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. Pero me alegran las opciones.

Media Elements Otra de las propuestas, con un player para <video> y <audio> que adems tiene versiones compatibles con un flash player para navegadores viejos. Es de esos que te permiten aprender bastante mientras juegas con su cdigo.

Importante con el tema del vdeo entender que HTML lo ha reconocido como una de las bases ms importantes de la Web del presente y su mundo de posibilidades es increble. Imagina un sitio web cuyo fondo es un video mientras que las acciones reproducen otro video que se anima junto a efectos en CSS 3 genera una experiencia completa en tu navegador. Ms adelante vers ejemplos concretos. Ah y recuerda que la caja de video es totalmente modificable con HTML5. As que se le pueden poner sombras y bordes redondeados. Esos son los pequeos detalles por los que este momento HTML5 es tan gratificante.