imagen video

8/18/2019 Imagen Video

1/19

MULTIMEDIA EN WEB

juanda

Enero 2015


2/19

2


3/19

Contents

1 Imágenes 5

1.1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2 Logotipos, imágenes y diseño . . . . . . . . . . . . . . . . . . . . 5

1.3 Bancos de fotografías . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.4 Caso práctico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.5 Optimización de imágenes . . . . . . . . . . . . . . . . . . . . . . 6

1.6 Retocar imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.7 Tipos de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.8 Imágenes en dispositivos . . . . . . . . . . . . . . . . . . . . . . . 81.9 Tratamiento de imágenes desde consola . . . . . . . . . . . . . . 8

2 Video en html5 11

2.1 Un poco de historia . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2 Etiqueta video . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.3 Inserción de video . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.4 Video containers . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.5 Video Codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5.1 H264 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.5.2 THEORA . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.5.3 VP8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3


4/19

4 CONTENTS

3 Audio 15

3.1 Voces de Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.2 Audio Codecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.2.1 MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.2 AAC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.3 VORBIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4 ¿Qué funciona en la Web? 17

4.1 Formatos para la web . . . . . . . . . . . . . . . . . . . . . . . . 17

4.2 Configuración servidor web . . . . . . . . . . . . . . . . . . . . . 18

4.3 Codificación de Vídeo . . . . . . . . . . . . . . . . . . . . . . . . 184.4 Videos responsivos . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.4.1 css habitual . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.4.2 Vídeos de youtube, vimeo mediante iframe . . . . . . . . 19

4.4.3 Vídeos de youtube, vimeo mediante object . . . . . . . . . 19

4.4.4 Vídeo responsivo por iframe . . . . . . . . . . . . . . . . . 19


5/19

Chapter 1

Imágenes

1.1 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

1.2 Logotipos, imágenes 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

• Behance: portfolios online de diseñadores en la nube de Adobe.

The awards for design, creativity and innovation on the Internet

5

http://www.sitebuilderreport.com/blog/where-the-best-designers-go-to-find-photos-and-graphicshttp://www.sitebuilderreport.com/blog/where-the-best-designers-go-to-find-photos-and-graphicshttp://dribbble.com/http://www.behance.net/http://www.behance.net/http://www.awwwards.com/http://www.awwwards.com/http://www.behance.net/http://dribbble.com/http://www.sitebuilderreport.com/blog/where-the-best-designers-go-to-find-photos-and-graphics


6/19

6 CHAPTER 1. IMÁGENES

1.3 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)

1.4 Caso práctico

La elección de imágenes puede llevar mucho tiempo y es vital para el aspectofinal 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?

El enfoque del cliente es importante para el desarrollo de la web

1.5 Optimización de imágenes

Podemos utilizar PageSpeed de Google

Podemos instalar algún software como trimage:

sudo apt-get install trimage

http://www.corbisimages.com/http://www.shutterstock.com/http://www.istockphoto.com/http://www.fotolia.com/http://www.bigstockphoto.com/http://www.sxc.hu/http://www.solernaharro.com/http://abogadoaccidentetrafico.es/http://www.marianosanchez.com/http://trimage.org/http://trimage.org/http://trimage.org/http://www.marianosanchez.com/http://abogadoaccidentetrafico.es/http://www.solernaharro.com/http://www.sxc.hu/http://www.bigstockphoto.com/http://www.fotolia.com/http://www.istockphoto.com/http://www.shutterstock.com/http://www.corbisimages.com/


7/19

1.6. RETOCAR IMÁGENES 7

1.6 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.

1.7 Tipos de imágenes

Imágenes de mapa de bits:

• Están formadas por un conjunto de puntos (píxeles) contenidos en unatabla.

• 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ánguloso segmentos.

• Están representadas por fórmulas matemáticas (un rectángulo está definidopor 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 formassimples 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).


8/19


1.8 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óndentro 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

1.9 Tratamiento de imágenes desde consola

Instalaremos el [http://www.imagemagick.org/ paquete imagemagick] para tratarlas imágenes:

# apt-get install imagemagick

Cambiar formato de una imagen:

$ convert rose.jpg rose.png

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

convert howtogeek.png -quality 95 howtogeek.jpg

Cambiar el tamaño de las imágenes:

• En este caso se sobreescribe la imagen original

• La imagen intentará guardar la proporción

convert example.png -resize 200x100 example.png

http://placeit.breezi.com/http://mockuphone.com/http://developer.android.com/distribute/promote/device-art.htmlhttp://aarnis.com/demo.htmlhttp://goo.gl/aLuT6ehttp://goo.gl/aLuT6ehttp://aarnis.com/demo.htmlhttp://developer.android.com/distribute/promote/device-art.htmlhttp://mockuphone.com/http://placeit.breezi.com/


9/19

1.9. TRATAMIENTO DE IMÁGENES DESDE CONSOLA 9

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

convert example.png -resize 200x100! example.png

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

convert example.png -resize 200 example.png

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

convert example.png -resize x100 example.png

Procesos en batch:

• En este caso rotamos todas las imágenes de tipo png del directorio actual90o y las guardamos con el prefijo “rotated”

for file in *.png; do convert $file -rotate 90 rotated-$file; done

También podremos realizar efectos.

Para más información, ejecutamos “man convert”


10/19



11/19

Chapter 2

Video en html5

2.1 Un poco de historia

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 video:

El navegador mostrará los controles básicos para reproducir o pausar el video.

2.2 Etiqueta video

Desgraciadamente la etiqueta video no funciona en todos los navegadores:

IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID

9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+

2.3 Inserción de video

Se pueden indicar varios sources por si el navegador no es capaz de reproduciruno de ellos

El navegador lo intentará con el primero, luego con el segundo. . . .

11


12/19

12 CHAPTER 2. VIDEO EN HTML5

Your browser does not support the video tag.

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

2.4 Video containers

Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, perorealmente es un formato contenedor.

Un fichero contenedor es como un fichero .zip y en el caso del video contiene unstream de video y otro de audio.

El fichero contenedor define como almacenar los streams de audio y video en unsolo fichero.

Aunque no es tan fácil: No todos los streams de video son compatibles con todoslos ficheros contenedores.

2.5 Video Codecs

Los streams de video y audio se codifican y se almacenan en un container.


13/19

2.5. VIDEO CODECS 13

A la hora de reproducirlos, primero el reproductor debe interpretar el formatodel container y luego decodificar el video y el audio

Cuando hablamos de un codec de video nos referimos tanto un algoritmo deCOdificación como al de DECodificación

Los codec de video más populares son H264, Theora y VP8.

2.5.1 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 finalgenerado: 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, puedenexigirte royalties.

2.5.2 THEORA

Sin ningún tipo de patentes

En cualquier container, normalmente en ficheros .ogg

2.5.3 VP8

Comprado por Google y liberada la patente.


14/19

14 CHAPTER 2. VIDEO EN HTML5


15/19

Chapter 3

Audio

3.1 Voces de Audio

Pueden ser caras:

• 250 euros por 5 minutos de voz.

• El equipo de audio no lo pones tu :-)

• http://www.youtube.com/watch?v=07wVo1hnmdQ ¿Te suena?

http://www.voices.com/ Elegir una voz

3.2 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 asu vez menor peso)

Nos centraremos en los codecs generales (hay específicos por ejemplo paratelefoní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 channeldel 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.

15

http://www.youtube.com/watch?v=07wVo1hnmdQhttp://www.voices.com/http://www.voices.com/http://www.youtube.com/watch?v=07wVo1hnmdQ


16/19

16 CHAPTER 3. AUDIO

3.2.1 MP3

Formalmente llamado MPEG-1 Audio Layer 3Hasta 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 unbitrate bajo los silencios de audio).

Tiene patentes, por eso Linux no lo reproduce por defecto.

3.2.2 AAC

Formalmente llamado Advanced Audio Coding

Hasta 64 canales de sonido

Estandarizado por Apple en 1997. Lo utilizo como formato por defecto para suiTunes Store.

Diseñado para dar mayor calidad de audio que MP3 al mismo bitrateSin 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.

3.2.3 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


17/19

Chapter 4

¿Qué funciona en la Web?

4.1 Formatos para la web

Utilizaremos formato WebM y mp4

El formato WebM se basa en una versión restringida del formato contenedorMatroska. 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.

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+

* Internet Explorer 9 will only support WebM “when the user has installed

a VP8 codec”.

† 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.

MP4: Principalmente para IE y Safari

WebM: Opera, Firefox y Google Chrome

Ogg: Opera, Firefox y Google Chrome

Situación actual

17

https://developer.mozilla.org/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5http://caniuse.com/#feat=mpeg4http://caniuse.com/#feat=webmhttp://caniuse.com/#feat=ogvhttp://caniuse.com/#feat=ogvhttp://www.longtailvideo.com/html5/http://www.longtailvideo.com/html5/http://caniuse.com/#feat=ogvhttp://caniuse.com/#feat=webmhttp://caniuse.com/#feat=mpeg4https://developer.mozilla.org/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5


18/19

18 CHAPTER 4. ¿QUÉ FUNCIONA EN LA WEB?

4.2 Configuración servidor web

El servidor web tiene que tener los mime types configurados para la reproducciónde videos en los navegadodores

Será lo que envíe en el header como content-type y que el navegador puederequerir.

En el servidor web Apache lo haremos en el fichero .htaccess o en elhttpd.conf/apache2.conf: ~ AddType video/ogg .ogv AddType video/mp4 .mp4AddType video/webm .webm ~

4.3 Codificación de Vídeo

¿livav o ffmpeg? Ver resumen de problemáticaPor 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/

4.4 Videos responsivos

4.4.1 css habitual

Declarar dimensiones “estáticas” no es buena idea:


19/19

4.4. VIDEOS RESPONSIVOS 19

4.4.2 Vídeos de youtube, vimeo mediante iframe

Código inserción vídeos youtube:

Código inserción vídeos vimeo:

4.4.3 Vídeos de youtube, vimeo mediante object

También se puede usar object y embed para insertar código no html. Por ejemployoutube con Flash:

En desuso

4.4.4 Vídeo responsivo por iframe

Si no se especifica las dimensiones de un elemento tipo iframe, embed, object ycanvas, en navegador lo dimensiona como 300x150px

No se puede utilizar el truco de 100% width, el navegador pondría una altura de150px que sería normalmente demasiado pequeña.

• Ver solución: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phphttp://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phphttp://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phphttp://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

imagen video

Documents