Logotipos y diseño

Son un elemento clave para una web bien diseñada

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.
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 es preferente, generalmente sobre Theora Ogg Vorbis cuando esté disponible, ya que proporciona una mejor relación de compresión para la calidad y se apoya en más navegadores. El formato Ogg sin embargo, puede ser utilizado para apoyar versiones de los navegadores más antiguos, en los que aún no se dispone de soporte para WebM.

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.

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

Imágenes y video HTML5

Contenido

Imágenes