Usuario:Juanda/videohtml5/Introducción

=Imágenes=

Introducción

 * Las imágenes un elemento clave para una web bien diseñada
 * Las páginas web atractivas se encuentran, no se hacen:
 * Búsqueda de imágenes
 * Búsqueda de iconos
 * Búsqueda de patterns


 * Behance, portfolios online de diseñadores en la nube de Adobe.

Logotipos y diseño

 * El diseño es clave para una web
 * ¿Dónde encontrar buenos diseñadores?
 * ¿Dónde darse a conocer como diseñador?
 * Dribble: recursos diseñadores
 * Behance, portfolios online de diseñadores en la nube de Adobe.

Bancos de fotografías

 * Algunos clásicos y más caros, por ejemplo Corbis
 * Otros, los llamados microstocks más amateur pero con precios más reducidos:
 * http://www.shutterstock.com/
 * http://www.istockphoto.com/
 * http://www.fotolia.com
 * http://www.bigstockphoto.com/
 * http://www.sxc.hu/ (gratuito)


 * La elección de imágenes puede llevar mucho tiempo y es vital para el aspecto final de nuestra web.
 * Ejemplos de imágenes para webs de accidentes de tráfico:
 * http://www.solernaharro.com/
 * http://abogadoaccidentetrafico.es/
 * http://www.marianosanchez.com/


 * ¿Qué tipo de imágenes utilizarías tu?
 * Una web bien diseñada se apoya en imágenes, ver ejemplos de webs

Optimización de imágenes

 * Podemos utilizar PageSpeed de Google
 * Podemos instalar algún software como trimage:

Retocar imágenes

 * En ocasiones es bueno retocar las imágenes:
 * Brillo, contraste, reducción de ruido
 * Recortar la imagen para centrar la atención en una parte de ella.
 * Alinear horizonte, ojos rojos....


 * Utilizaremos programas como photoshop o gimp.

Tipos de imágenes

 * Imágenes de mapa de bits:
 * Están formadas por un conjunto de puntos (píxeles) contenidos en una tabla.
 * Cada uno de estos puntos tiene un valor o más que describe su color.
 * Se modifican mediante Gimp o Photoshop


 * Imágenes vectoriales:
 * Representaciones de entidades geométricas tales como círculos, rectángulos o segmentos.
 * Están representadas por fórmulas matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un radio...)
 * Se modifican mediante Inkscape o CorelDraw


 * Las imágenes de mapas de bits se pixelan.
 * Las imágenes vectoriales son más simples, aunque la superposición de formas simples pueden producir resultados impresionantes.
 * Las fotografías serán siempre mapas de bits
 * Las imágenes vectoriales se introducen en html5 por medio del formato svg (hasta ahora mediante Flash).

Imágenes en dispositivos

 * Útil para dar un aspecto más moderno y tecnológico
 * Muy usado en programas de software, mostrando por ejemplo una aplicación dentro de un ipad
 * Desde Ubuntu podremos capturar la pantalla o ventana actual
 * Hay varios servicios que nos generan nuestra imagen en un dispositivo físico:
 * http://placeit.breezi.com
 * http://mockuphone.com
 * http://developer.android.com/distribute/promote/device-art.html
 * http://aarnis.com/demo.html
 * http://goo.gl/aLuT6e

Tratamiento de imágenes desde consola

 * Instalaremos el paquete imagemagick para tratar las imágenes:
 * Cambiar formato de una imagen:


 * Especificar el nivel de compresión para imágenes jpg (de 0 a 100, por defecto 92):


 * Cambiar el tamaño de las imágenes:
 * En este caso se sobreescribe la imagen original
 * La imagen intentará guardar la proporción


 * En este caso la imagen no guardará la proporción (por la exclamación):


 * Ancho 200, el alto según proporciones de la imagen:


 * Alto 100, ancho según proporciones de la imagen:


 * Procesos en batch:
 * En este caso rotamos todas las imágenes de tipo png del directorio actual 90º y las guardamos con el prefijo "rotated"


 * También podremos realizar efectos.
 * Para más información, ejecutamos "man convert"

=Video en html5=

Añadir video en navegadores actuales

 * Antes de html5 no había ningún estándar para el video.
 * Se recurría a plugins como QuickTime, RealPlayer o Flash.
 * Ahora es tan sencillo como añadir la etiqueta :
 * El navegador mostrará los controles básicos para reproducir o pausar el video.

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID 9.0+	3.5+	3.0+	3.0+	10.5+	1.0+	2.0+
 * Desgraciadamente la etiqueta no funciona en todos los navegadores:

Formatos de video

 * Se pueden indicar varios sources por si el navegador no es capaz de reproducir uno de ellos
 * El navegador lo intentará con el primero, luego con el segundo....


 * Si indicamos el type en el video mejoraremos el rendimiento ya que el navegador sabe si puede reproducir ese video o no sin tener que intentarlo:

Video Containers

 * Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
 * Un fichero contenedor es como un fichero .zip y en el caso del video contiene un stream de video y otro de audio.
 * El fichero contenedor define como almacenar los streams de audio y video en un solo fichero.
 * Aunque no es tan fácil: No todos los streams de video son compatibles con todos los ficheros contenedores.

Video Codecs

 * Los streams de video y audio se codifican y se almacenan en un container.
 * A la hora de reproducirlos, primero el reproductor debe interpretar el formato del container y luego decodificar el video y el audio
 * Cuando hablamos de un codec de video nos referimos tanto un algoritmo de COdificación como al de DECodificación
 * Los codec de video más populares son H264, Theora y VP8.

H264

 * También se conoce como MPEG-4 Advanced Video Coding.
 * Tiene diferentes perfiles de codificación en función de la calidad del video final generado: Baseline, Main y High profiles
 * El H264 está embebido en los containers más populares como mp4 y mkv.
 * Tiene licencia: si codificas algo en mp4 y lo compartes con el mundo, pueden exigirte royalties.

THEORA

 * Sin ningún tipo de patentes
 * En cualquier container, normalmente en ficheros .ogg

VP8

 * Comprado por Google y liberada la patente.

=Audio=

Voces de Audio

 * Pueden ser caras:
 * 250€ por 5 minutos de voz.
 * El equipo de audio no lo pones tu :-)
 * ¿Te suena?


 * Elegir una voz

Audio Codecs

 * Como los codecs de video existen con o sin pérdida
 * Como en los de video, para la web nos interesan los que tienen perdida (pero a su vez menor peso)
 * Nos centraremos en los codecs generales (hay específicos por ejemplo para telefonía).
 * Al descodificar el audio mandamos los datos del stream de audio a los altavoces


 * Los audios tienen canales (los videos no): cada altavoz se alimenta de un channel del stream de audio.
 * Los codecs de propósito general codifican normalmente 2 canales.
 * En la web se utilizan exlusivamente tres codecs: MP3, AAC y Vorbis.

MP3

 * Formalmente llamado MPEG-1 Audio Layer 3
 * Hasta 2 canales de sonido
 * Distintos bitrates 64kbps, 128kbps, 192kbps
 * A mayor bitrate el fichero será más pesado y tendrá más calidad de audio


 * El bitrate y la calidad de audio no tienen una relación lineal:
 * 128kbps se oye con más del doble de calidad que 64kbps
 * 256k no se oye con el doble de calidad que 128kbps


 * Podemos codificar con un bitrate constante o variable (por ej. codificando a un bitrate bajo los silencios de audio).
 * Tiene patentes, por eso Linux no lo reproduce por defecto.

AAC

 * Formalmente llamado Advanced Audio Coding
 * Hasta 64 canales de sonido
 * Estandarizado por Apple en 1997. Lo utilizo como formato por defecto para su iTunes Store.
 * Diseñado para dar mayor calidad de audio que MP3 al mismo bitrate
 * Sin límite de bitrate (MP3 lo tiene en 320kbps)
 * La librería libre para codificar en AAC se llama FAAC.
 * Usa profiles, de forma similar a MP4.

VORBIS

 * Denominado a veces OGG-VORBIS pero OGG es el container
 * Suele ir embebido en ficheros ogg o webm pero también puede ir en mp4, mkv
 * Soporta un gran número de canales de sonido

=¿Qué funciona en la Web?=

Formatos para la web
VIDEO CODEC SUPPORT IN SHIPPING BROWSERS CODECS/CONTAINER	IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID Theora+Vorbis+Ogg	·	3.5+	†	5.0+	10.5+	·	· H.264+AAC+MP4	      9.0+	·	3.0+	5.0+‡	·	3.0+	2.0+ WebM	              9.0+*	4.0+	†	6.0+	10.6+	·	2.3+ † Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats. ‡ Google Chrome promised to drop support for H.264 in 2011, but it never happened.
 * Utilizaremos formato WebM y mp4. Ver detalles
 * El formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis.
 * Ogg en principio podría ser prescindible. WebM da mejor relación calidad-compresión.
 * Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”.


 * MP4: Principalmente para IE y Safari.
 * WebM: Opera, Firefox y Google Chrome
 * Ogg: Opera, Firefox y Google Chrome
 * Situación actual

Configuración servidor web
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
 * El servidor web tiene que tener los mime types configurados para la reproducción de videos en algún navegador
 * Será lo que envíe en el header como content-type y que el navegador puede requerir.
 * En el servidor web Apache lo haremos en el fichero .htaccess o en el httpd.conf/apache2.conf:

=Codificación de Vídeo=


 * ¿livav o ffmpeg? Ver resumen de problemática
 * Por defecto Ubuntu funciona con livav.
 * Instalación de ffmpeg
 * Codificación con H.264
 * Codificación con WebM y Ogg
 * Otra opción para codificar mp4 http://handbrake.fr/
 * Otra opción para codificar Ogg-Vorbis: http://v2v.cc/~j/ffmpeg2theora/

=Video responsivo=

css habitual

 * Declarar dimensiones "estáticas" no es buena idea:
 * Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
 * En html5 es bueno definir solo la anchura para que el vídeo mantenga su proporción:
 * Mediante css:

Obtención de código

 * Código inserción vídeos youtube:
 * Código inserción vídeos vimeo:
 * También se puede usar object y embed para insertar código no html. Por ejemplo youtube con Flash:

Vídeo responsivo por iframe

 * Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
 * No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
 * Ver solución