En el último post estuve hablando sobre las bondades de la etiqueta video de HTML 5 y cómo podíamos lidiar con los diferentes formatos y navegadores. Si bien se conseguía reproducir en todos ellos, existe un issue si trabajamos desde Windows Server 2008 R2. Si recordamos, IE 9 soporta H.264 (MP4) en cuanto a video se refiere. Si utilizamos este mismo navegador en la versión server de Windows veremos que no es capaz de reproducirlo ¿A qué es debido? Pues simplemente a que no están incluidos los decoders para los formatos H.264 y AAC tal y como indica el KB2483177.
Dependiendo del navegador con el que estés leyendo este post, podrás ver el Efecto Kinect, el Futuro según Microsoft o el gracioso conejito de Big Buck Bunny… ¿De qué depende? Es lo que me gustaría compartir hoy: HTML 5 video .
Todos los videos que he nombrado están incluidos como fuente de uno de los nuevos tags de HTML 5: <video> … Si, con HTML 5 no será necesario utilizar plugins externos para la reproducción de video y audio, dando un paso más allá dentro del mundo de la multi plataforma Claro está que no todo va a ser color de rosa y, si bien se sabe que HTML 5 no es un lenguaje acabado, no hay un estándar que determine qué formatos se tienen que soportar nativamente en todos los navegadores. Es por ello que cada uno ha decidido elegir un formato diferente (Qué cosas hacen para hacernos reir ). Aún así, podemos decir que a día de hoy se soportan los siguientes:
WebM: Es un proyecto de software libre, desarrollado por Google, y orientado para usarse justamente en este escenario: HTML 5. Está compuesto por el códec de vídeo VP8 (desarrollado por On2 Technologies) y Vorbis para el audio (desarrollado por la Fundación Xiph.org). Más información.
H.264 (MP4): Códec de vídeo de alta compresión. Más información.
Ogg Theora: Códec de video libre del mismo padre que Vorbis, mecionado anteriormente. Más información.
Hasta ahora, estos son los tres formatos con los que podemos jugar. Para que nos hagamos una idea, la foto está de la siguiente manera:
La verdad es que es bastante sencillo: Creamos un elemento del tipo video y, dentro del mismo, añadimos las fuentes del video que queremos reproducir. Obviamente por motivos de demo, en mi caso tengo distintos videos por cada uno de los formatos pero el objetivo es tener el mismo video en diferentes formatos para que, dependiendo del navegador, pueda escoger cuál es válido para él. Si sólo creáramos la etiqueta con las diversas fuentes tendríamos creado nuestro elemento vídeo pero no sería funcional. El motivo es que necesitamos establecer al menos el atributo controls o autoplay para que podamos iniciar la reproducción o para que comience a reproducirse por sí solo respectivamente. Si no añadiéramos uno de estos atributos, aparecería simplemente el primer fotograma del vídeo en algunos browsers y en otros simplemente aparecerá en negro.
Otros atributos que debemos tener en mente son los siguientes:
loop: Especifica que el video se iniciará de nuevo cada vez que llegue al final del mismo.
muted: La salida de audio será silenciada.
preload: Comenzará a cargar el buffer del video cuando la página se haya cargado aunque no hayamos iniciado el mismo.
width y height: Para indicar el ancho y el alto del elemento video.
Atributo poster
Si bien el resto de atributos nombrados son bastante comunes aquí hay uno que al menos resulta curioso: poster. Este atributo se utiliza para indicar la ruta de una imagen la cual queremos mostrar mientras el video esté parado (que no en pausa). Por ejemplo:
Dependiendo del navegador, este ocupará todo el control, pareciendo el mismo una imagen, IE mostrará la imagen tan sólo unos segundos y otros, como Firefox, le dan un toque de transparencia y parece estar dentro del propio control, no encima.
Fallback
La palabra fallback, por el momento, va a ser frecuentemente utilizada dentro del mundo de HTML 5. La misma podríamos traducirla como de reserva y vulgarmente podríamos traducirla como por si acaso ¿Esto que quiere decir? Significa que si, después de elegir todas las fuentes de video posibles, lo que ocurre es que el navegador en sí no soporta la etiqueta vídeo debemos añadir algo más para que el usuario pueda disfrutar igual que el resto . En otros elementos es posible que sólo podamos notificar al usuario que la funcionalidad no está soportada pero, en caso del apartado media podemos hacer algo más:
Otra de las muy esperadas propiedades de CSS 3 se trata de box-shadow la cual nos va permitir añadir tanto sombras externas como internas a nuestros elementos. Esta propiedad funciona de la siguiente manera:
¿Cómo funciona realmente?
La propiedad box-shadow tiene 5 parámetros: horizontal offset, vertical offset, blur radius, spread radius, color y un valor opcional: inset. Horizontal y vertical offset son los parámetros que definen qué lados del elemento se verán afectados por la sombra y el ancho que ocuparán. Por ejemplo, si el horizontal es negativo se posicionará en el horizontal parte superior de la figura (como se muestra en el ejemplo A) y en el lado contrario si es positivo (figura B). Lo mismo ocurre con la propiedad vertical: si es negativo se situará en la izquierda de la figura y si el valor es positivo ocupará el lado derecho (figura B).
El valor opcional inset indica que la sombra que estamos mostrando será interior (figura C).
Por otro lado, para que la sombra no parezca artificial tenemos los valores blur radius y spread radius, los cuales nos permiten difuminar la misma. Si aplicamos el primero de ellos, como en la figura D, veremos que la sombra es mucho más difuminada y produce una sensación más amigable. Si además indicamos spread radius lo que vamos a conseguir es que esa sombre se extienda más ampliando el campo del elemento (figura E). Por supuesto, estos efectos pueden utilizarse como sombra interior, tal y como se muestra en la figura F.
Por último, si queremos que dicha sombra envuelva a toda la figura, tanto el vertical como el horizontal serán 0 píxeles y jugaremos con el blur radius y el spread radius de la sombra, la cual se extenderá desde los bordes externos o internos del elemento (figura G).
Por lo tanto, el código HTML sería el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>BoxShadow</title>
</head>
<body>
<div id="example_A">
example A
</div>
<div id="example_B">
example B
</div>
<div id="example_C">
example C
</div>
<div id="example_D">
example D
</div>
<div id="example_E">
example E
</div>
<div id="example_F">
example F
</div>
<div id="example_G">
example G
</div>
</body>
</html>
Y a través del CSS definiríamos cada una de las sombras:
Espero que os haya ayudado a entender mejor todas las posibilidades que nos da esta magnífica propiedad y dejemos de lado las imágenes con sombreado incluido
Es curioso la de cosas que nos estamos perdiendo Es por ello que quería compartir la posibilidad de tener múltiples backgrounds utilizando la propia etiqueta background-image. Lo cierto es que prácticamente todos los navegadores actuales lo soportan y creo que es una feature que deberíamos aprovechar. Veamos el ejemplo :
#example
{
width: 100%;
height: 530px;
background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/worm.png), url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
background-position: center bottom,center bottom; /*You don't need type this twice*/
background-repeat:no-repeat;
}
Lo único que estoy haciendo para poder trabajar con múltiples backgrounds es separar cada una de las imágenes con una coma y colocándolas en el orden que se deben superponer. En este caso, queremos que el personaje del Worms aparezca encima del paisaje de fondo, por lo que ocupará el primer lugar en la sucesión de imágenes. Por otro lado, podemos hacer uso de background-position para determinar la posición de cada una de las imágenes de la misma forma, separando por comas.
Por último, un punto a tener en cuenta es que si el valor de la propiedad es el mismo, no es necesario ponerlo explícitamente por cada una de las imágenes, sino que podemos indicar el valor solamente una vez y será aplicado a todo el conjunto, como ocurre en el caso de background-repeat.
Espero que sea de utilidad, a la par que interesante
Uno de los grandes dolores de cabeza a la hora de maquetar una aplicación son las diferentes resoluciones contra las que nos tenemos que enfrentar… Y realmente puede llegar a ser complicado, sobre todo porque la tendencia es tener aplicaciones que sean capaces de adaptarse tanto a un navegador como a los diferentes dispositivos como móviles, tables, etcétera. La solución: Responsive Web Design
Es por ello que, después de haber jugado bastante, una gran opción para controlar el diseño de nuestras aplicaciones se trata de CSS Media Queries, las cuales son expresiones que retornan true o false relacionadas con propiedades media del navegador que está solicitando la página.
¿Cómo lo utilizo?
El primer paso que debemos dar es determinar dónde queremos especificar la expresión. Existen varios sistemas para ello:
Usando @media{ //Styles }: Indicamos la expresión que queremos evaluar y, si el resultado es true, se aplican los estilos que estén dentro del bloque media.
Usando @import: Este caso es similar al anterior pero , en vez de utilizar un bloque con los estilos a aplicar, se indica el archivo css que se quiere importa en el caso de que la expresión resulte afirmativa.
Indicando la expresión directamente en el link de importación del CSS.
Utilizando código Javascript: Es posible pero, personalmente, no creo que sea la forma más eficiente. Basicamente porque el performance se puede llegar a ver afectado por ello… Pero es posible
Una vez que tenemos decidido dónde, vamos a determinar el qué. Normalmente, las expresiones están relacionadas con el ancho y el alto de un navegador ya que son los puntos de referencia que nos indican cual es nuestro espacio de trabajo. Por ejemplo:
En este caso, he creado un bloque de código con una serie de estilos que solamente se aplicarán si el navegador, ya sea dispositivo o no, tiene como tamaño máximo 320 píxeles (Como el Nokia Lumia 800 o el Samsung Galaxy SII).
El método más común es utilizar @media + la expresión + el bloque de código que nos gustaría aplicar en ese caso. Aún así, veamos las otras alternativas:
@Import
@import('mobile.css') screen and (max-width: 320px)
En el link de importación del CSS
<link href="styles.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)"/>
Utilizando codigo JavaScript
if ("styleMedia" in window && window.styleMedia.matchMedium("screen and (max-width:320px)")) {
//Do stuff
}
A nivel de performance, la mejor solución es utilizar @media in line, dentro del CSS donde el código ya ha sido cargado y sólamente tiene que evaluar si lo utiliza o no (no tiene que comprobar si incluye un segundo archivo, no utiliza un lenguaje adicional como JavaScript, etcétera).
Por otro lado, otra cosa que os recomiendo es el uso de HTML Conditional Comments para evaluar qué navegador es el que el usuario está utilizando y, en función de ello, cargar un archivo u otro para que el diseño sea consistente con todos los navegadores:
Existe un parche que actualiza el Desktop Experience Decoder para Windows 2008 R2. Una vez esté instalado en nuestro sistema podremos refrescar la página y visualizar los videos desde IE 9 y Windows Server 2008 R2.
.
(Qué cosas hacen para hacernos reir 
.