Diferencia entre revisiones de «Usuario:Juanda/videohtml5/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Video Codecs)
Línea 7: Línea 7:
 
==Imágenes==
 
==Imágenes==
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 
==Logotipos y diseño==
 
==Logotipos y diseño==
Línea 13: Línea 15:
 
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 
== Bancos de fotografías==
 
== Bancos de fotografías==
Línea 30: Línea 34:
  
 
<div class="slide">
 
<div class="slide">
−
 
 
==Optimización de imágenes==
 
==Optimización de imágenes==
 
*Podemos utilizar PageSpeed de Google
 
*Podemos utilizar PageSpeed de Google
Línea 38: Línea 41:
 
</source>
 
</source>
 
</div>
 
</div>
−
<div class="slide">
 
  
 +
 +
 +
<div class="slide">
 
==Imágenes en dispositivos==
 
==Imágenes en dispositivos==
 
*Útil para dar un aspecto más moderno y tecnológico
 
*Útil para dar un aspecto más moderno y tecnológico
Línea 51: Línea 56:
 
: http://goo.gl/aLuT6e  
 
: http://goo.gl/aLuT6e  
 
</div>
 
</div>
 +
 +
 +
 +
 
<div class="slide">
 
<div class="slide">
 
==Tratamiento de imágenes desde consola==
 
==Tratamiento de imágenes desde consola==
Línea 91: Línea 100:
 
*Para más información, ejecutamos "man convert"
 
*Para más información, ejecutamos "man convert"
 
</div>
 
</div>
−
 
−
 
  
  
 
<div class="slide">
 
<div class="slide">
−
 
 
==Video en html5==
 
==Video en html5==
 
</div>
 
</div>
Línea 117: Línea 123:
 
</div>
 
</div>
  
−
<div class="slide">
 
  
 +
 +
 +
<div class="slide">
 
===Formatos de video===
 
===Formatos de video===
 
*Se pueden indicar varios sources por si el navegador no es capaz de reproducir uno de ellos
 
*Se pueden indicar varios sources por si el navegador no es capaz de reproducir uno de ellos
Línea 138: Línea 146:
 
</source>
 
</source>
 
</div>
 
</div>
 +
 +
 +
 
<div class="slide">
 
<div class="slide">
 
*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:
 
*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:
Línea 148: Línea 159:
 
</video>
 
</video>
 
</source>
 
</source>
−
 
 
</div>
 
</div>
  
−
<div class="slide">
 
  
 +
<div class="slide">
 
=== Video Containers ===
 
=== Video Containers ===
 
*Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
 
*Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
Línea 158: Línea 168:
 
*El fichero contenedor define como almacenar los streams de audio y video en un solo fichero.
 
*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.  
 
*Aunque no es tan fácil: No todos los streams de video son compatibles con todos los ficheros contenedores.  
−
 
 
</div>
 
</div>
 +
 +
  
 
<div class="slide">
 
<div class="slide">
Línea 167: Línea 178:
 
* Cuando hablamos de un codec de video nos referimos tanto un algoritmo de COdificación como al de DECodificación
 
* 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.
 
*Los codec de video más populares son H264, Theora y VP8.
 +
</div>
 +
 +
 +
<div class="slide">
 
====H264====
 
====H264====
 
*También se conoce como MPEG-4 Advanced Video Coding.
 
*También se conoce como MPEG-4 Advanced Video Coding.
Línea 174: Línea 189:
 
</div>
 
</div>
  
 +
 +
<div class="slide">
 +
====THEORA====
 +
*Sin ningún tipo de patentes
 +
*En cualquier container, normalmente en ficheros .ogg
 +
</div>
 +
 +
<div class="slide">
 +
====VP8====
 +
*Comprado por Google y liberada la patente.
 +
</div>
 +
 +
 +
<div class="slide">
  
 
*Te recomomiendo la lectura del [http://diveintohtml5.info/video.html capitulo de video] de diveintohtml5.
 
*Te recomomiendo la lectura del [http://diveintohtml5.info/video.html capitulo de video] de diveintohtml5.

Revisión de 07:11 15 ene 2014

Usuario:Juanda/html5video/nav

Imágenes


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/
  • 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?

Optimización de imágenes

  • Podemos utilizar PageSpeed de Google
  • Podemos instalar algún software como trimage: 
sudo apt-get install trimage


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.


Decodificación de Vídeo

Video responsivo

  • 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 video 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=14223»