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
font-face. 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.