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

De WikiEducator
Saltar a: navegación, buscar
(→‎Video responsivo)
(→‎Imágenes)
 
(72 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/html5video/nav }}
 
{{Usuario:juanda/html5video/nav }}
  
−
{{#widget:Slides}} {{MiTitulo| Video HTML5}}  
+
{{#widget:Slides}} {{MiTitulo| Imágenes y video HTML5}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 +
 
<div class="slide">
 
<div class="slide">
−
==Video en html5==
+
=Imágenes=
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Introducción===
+
====Introducción====
 +
*Las imágenes un elemento clave para una web bien diseñada
 +
*[http://www.sitebuilderreport.com/blog/where-the-best-designers-go-to-find-photos-and-graphics Las páginas web atractivas se encuentran], no se hacen:
 +
:Búsqueda de imágenes
 +
:Búsqueda de iconos
 +
:Búsqueda de patterns
 +
:....
 +
 
 +
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 +
</div>
 +
 
 +
<div class="slide">
 +
====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?
 +
:[http://dribbble.com/ Dribble]: recursos diseñadores
 +
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
==== Bancos de fotografías====
 +
*Algunos clásicos y más caros, por ejemplo [http://www.corbisimages.com/ 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)
 +
 
 +
</div>
 +
<div class="slide">
 +
*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 [http://www.awwwards.com/ ejemplos de webs]
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
====Optimización de imágenes====
 +
*Podemos utilizar PageSpeed de Google
 +
*Podemos instalar algún software como [http://trimage.org/ trimage]:
 +
<source lang="bash">
 +
sudo apt-get install trimage
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
====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.
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
====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
 +
</div>
 +
<div class="slide">
 +
*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).
 +
 
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
====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
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
====Tratamiento de imágenes desde consola====
 +
*Instalaremos el [http://www.imagemagick.org/ paquete imagemagick] para tratar las imágenes:
 +
<source lang="bash">
 +
# apt-get install imagemagick
 +
</source>
 +
*Cambiar formato de una imagen:
 +
<source lang="bash">
 +
$ convert rose.jpg rose.png
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
*Especificar el nivel de compresión para imágenes jpg (de 0 a 100, por defecto 92):
 +
<source lang="bash">
 +
convert howtogeek.png -quality 95 howtogeek.jpg
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
*Cambiar el tamaño de las imágenes:
 +
: En este caso se sobreescribe la imagen original
 +
: La imagen intentará guardar la proporción
 +
<source lang="bash">
 +
convert example.png -resize 200×100 example.png
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
:En este caso la imagen no guardará la proporción (por la exclamación):
 +
<source lang="bash">
 +
convert example.png -resize 200×100! example.png
 +
</source>
 +
:Ancho 200, el alto según proporciones de la imagen:
 +
<source lang="bash">
 +
convert example.png -resize 200 example.png
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
:Alto 100, ancho según proporciones de la imagen:
 +
<source lang="bash">
 +
convert example.png -resize x100 example.png
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
*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"
 +
<source lang="bash">
 +
for file in *.png; do convert $file -rotate 90 rotated-$file; done
 +
</source>
 +
*También podremos realizar efectos.
 +
*Para más información, ejecutamos "man convert"
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
=Video en html5=
 +
</div>
 +
 
 +
<div class="slide">
 +
====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>:
 +
<source lang="html4strict">
 +
<video src="video.webm" controls>
 +
</video>
 +
</source>
 +
*El navegador mostrará los controles básicos para reproducir o pausar el video.
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
*Desgraciadamente la etiqueta <video> no funciona en todos los navegadores:
 +
<pre>
 +
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
 +
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
 +
</pre>
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
====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....
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<!DOCTYPE HTML>
 
<!DOCTYPE HTML>
Línea 22: Línea 208:
 
</body>
 
</body>
 
</html>
 
</html>
 +
</source>
 +
</div>
 +
 +
<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:
 +
<source lang="html4strict">
 +
<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>
 
</source>
 
</source>
 
</div>
 
</div>
Línea 27: Línea 225:
  
 
<div class="slide">
 
<div class="slide">
 +
==== 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.
 +
</div>
  
  
 +
 +
<div class="slide">
 +
====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.
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 +
=====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.
 +
</div>
  
−
=== Formatos de Vídeo ===
+
 
−
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari]. También en Google Chrome.
+
<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">
 +
=Audio=
 +
</div>
 +
 
 +
<div class="slide">
 +
====Voces de Audio====
 +
*Pueden ser caras:
 +
:250€ 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]
 +
</div>
 +
<div class="slide">
 +
====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
 +
</div>
 +
 
 +
<div class="slide">
 +
*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.
 +
</div>
 +
 
 +
<div class="slide">
 +
=====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
 +
</div>
 +
 
 +
<div class="slide">
 +
*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.
 +
</div>
 +
 
 +
<div class="slide">
 +
=====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.
 +
</div>
 +
 
 +
<div class="slide">
 +
=====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
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
=¿Qué funciona en la Web?=
 +
</div>
 +
<div class="slide">
 +
====Formatos para la web====
 +
*Utilizaremos formato WebM y mp4. [https://developer.mozilla.org/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 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.
 +
<pre>
 +
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.
 +
</pre>
 +
 
 +
</div>
 +
 
 +
<div class="slide">
 +
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari].  
 
*WebM: [http://caniuse.com/#feat=webm Opera, Firefox y Google Chrome]
 
*WebM: [http://caniuse.com/#feat=webm Opera, Firefox y Google Chrome]
 
*Ogg: [http://caniuse.com/#feat=ogv Opera, Firefox y Google Chrome]
 
*Ogg: [http://caniuse.com/#feat=ogv Opera, Firefox y Google Chrome]
−
 
 
*[http://www.longtailvideo.com/html5/ Situación actual]
 
*[http://www.longtailvideo.com/html5/ Situación actual]
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 +
====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:
 +
<pre>
 +
AddType video/ogg .ogv
 +
AddType video/mp4 .mp4
 +
AddType video/webm .webm
 +
</pre>
 +
</div>
  
−
===Decodificación de Vídeo===
+
 
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
=Codificación de Vídeo=
 +
</div>
 +
 
 +
<div class="slide">
 
* ¿livav o ffmpeg? [http://blog.pkh.me/p/13-the-ffmpeg-libav-situation.html Ver resumen de problemática]
 
* ¿livav o ffmpeg? [http://blog.pkh.me/p/13-the-ffmpeg-libav-situation.html Ver resumen de problemática]
 
* Por defecto Ubuntu funciona con livav.  
 
* Por defecto Ubuntu funciona con livav.  
 
* [https://ffmpeg.org/trac/ffmpeg/wiki/UbuntuCompilationGuide Instalación de ffmpeg]
 
* [https://ffmpeg.org/trac/ffmpeg/wiki/UbuntuCompilationGuide Instalación de ffmpeg]
−
Creados por Microsoft para su navegador. Cualquier otro navegador asumirá que es un comentario el código html intermedio:
+
*[https://www.virag.si/2012/01/web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con H.264 ]
−
<source lang="html4strict">
+
*[https://www.virag.si/2012/01/webm-web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con WebM y Ogg]
−
<!--[if CONDICION]> Código HTML <![endif]–>
+
*Otra opción para codificar mp4 http://handbrake.fr/
−
</source>
+
*Otra opción para codificar Ogg-Vorbis: http://v2v.cc/~j/ffmpeg2theora/
−
Ejemplo:
+
−
<source lang="html4strict">
+
−
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+
−
</source>
+
−
Para indicar a IExplorer que utilice la última versión de su rendering engine (puede tener varias) o  Google Chrome Frame si está instalado:
+
−
<source lang="html4strict">
+
−
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
−
</source>
+
 
</div>
 
</div>
−
<div source="html4strict">
 
  
−
===Video responsivo===
+
<div class="slide">
 +
=Video responsivo=
 +
</div>
 +
<div class="slide">
 +
====css habitual====
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
<source lang="html4strict">
 
<source lang="html4strict">
Línea 66: Línea 393:
 
</source>
 
</source>
 
*Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
 
*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:
+
*En html5 es bueno definir solo la anchura para que el vídeo mantenga su proporción:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<video width="100%" ....
 
<video width="100%" ....
Línea 78: Línea 405:
 
</source>
 
</source>
 
</div>
 
</div>
−
Esto no encajaría en todos los user agent!! Por ejemplo con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver.
+
<div class="slide">
−
[https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Leer más sobre el viewport]
+
===Vídeos de youtube, vimeo===
−
 
+
====Obtención de código====
−
</div>
+
*Código inserción vídeos youtube:
−
 
+
−
===Librería Modernizr===
+
−
*Incluye html5 Shiv: útil para navegadores que no entienden las etiquetas semánticas de html5
+
−
*Único javascript que necesita estar en la parte superior del documento: ¡antes de que se empiece a renderizar la página!
+
−
*Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
+
−
 
+
−
===Librería normalice===
+
−
*Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
+
−
*Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
+
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<link rel="stylesheet" href="css/normalize.css">
+
<iframe width="640" height="480" src="http://www.youtube.com/embed/oDlsOyPKUTM" frameborder="0" allowfullscreen></iframe>
 
</source>
 
</source>
−
 
+
*Código inserción vídeos vimeo:
−
===Librería main.css===
+
−
*Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro.
+
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<link rel="stylesheet" href="css/main.css">
+
<iframe src="http://player.vimeo.com/video/57444237" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>  
−
</source>
+
−
 
+
−
===Librería modernizr.js===
+
−
*Librería modernizr ....
+
−
<source lang="html4strict">
+
−
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
+
 
</source>
 
</source>
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===jQuery: ¿CDN o local?===
+
*También se puede usar object y embed para insertar código no html. Por ejemplo youtube con Flash:
−
*Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.
+
<source lang="html4strict">
−
*En este caso, procederemos a insertar en nuestra página la versión local de jQuery.
+
<object width="640" height="480">
−
<source lang="javascript">
+
  <param name="movie" value="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&amp;version=3"></param>
−
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
+
  <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>
 
</source>
 
</source>
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
 
+
====Vídeo responsivo por iframe====
−
===plugins.js y main.js===
+
*Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
−
*plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
+
*No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
−
*main.js: Para nuestro propio javascript
+
*[http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php Ver solución]
−
<source lang="javascript">
+
−
        <script src="js/plugins.js"></script>
+
−
        <script src="js/main.js"></script>
+
−
</source>
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
 
+
−
===Google Analytics===
+
−
*Herramienta de análisis de las visitas a un sitio web.
+
−
*Google recomienda ponerla en la parte superior, para contar todas las visitas
+
−
*En la parte inferior, optimizamos el tiempo de carga de nuestra web.
+
−
<source lang="javascript">
+
−
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+
−
        <script>
+
−
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
+
−
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+
−
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+
−
            s.parentNode.insertBefore(g,s)}(document,'script'));
+
−
        </script>
+
−
</source>
+
−
</div>
+
−
<div class="slide">
+
−
===Personalización===
+
−
*Más cosas: sitemap, Canonical URL, Feeds... [https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md lee documento de personalización]
+
−
 
+
 
</div>
 
</div>

Última revisión de 11:59 16 ene 2014

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»