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:

sudo apt-get install 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:

# 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 defecto 92):

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 200×100 example.png

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

convert example.png -resize 200×100! 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 actual 90º 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"

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

<video src="video.webm" controls>
</video>

• El navegador mostrará los controles básicos para reproducir o pausar el 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+

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

<!DOCTYPE HTML>
<html>
<body>
 
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
 
</body>
</html>

• 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 controls>
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

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

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

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

Configuración servidor web

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

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

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:

<video width="400" height="300" ....

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

<video width="100%" ....

• Mediante css:

video {
  width: 100%    !important;
  height: auto   !important;
}

Vídeos de youtube, vimeo

Obtención de código

• Código inserción vídeos youtube:

<iframe width="640" height="480" src="http://www.youtube.com/embed/oDlsOyPKUTM" frameborder="0" allowfullscreen></iframe>

• Código inserción vídeos vimeo:

<iframe src="http://player.vimeo.com/video/57444237" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

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

<object width="640" height="480">
   <param name="movie" value="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&amp;version=3"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&amp;version=3" type="application/x-shockwave-flash" 
      width="640" height="480" allowscriptaccess="always" allowfullscreen="true">
   </embed>
</object>

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