Imágenes y video HTML5

De WikiEducator
Saltar a: navegación, buscar

Usuario:Juanda/html5video/nav

Imágenes

Introducción

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

# 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?

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.


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

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
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/videohtml5/Introducción&oldid=14263»