DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Audio y Video.

Presentación del tema: "DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Audio y Video."— Transcripción de la presentación:

1 DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Audio y Video

2 Flash (I) Hasta la aparición de HTML5 sólo se podían incluir elementos de audio o video dentro de objetos contenedores como QuickTime, RealPlayer y SilverLight. Sin embargo el método que aún hoy en día pervive es la inclusión de un un objeto Adobe Flash.

3 Flash (II) Se incluye un objeto FLASH dentro de nuestro código, generalmente con parámetros para controlar la reproducción y apariencia del plugin.

4 Flash (III) Uno de los reproductores FLASH más conocidos es Dewplayer para audio y DewTube para video: http://www.alsacreations.fr/dewtube.html http://www.alsacreations.fr/dewplayer.html

5 Flash (IV) FLASH no es aconsejable porque es un plugin que funciona por encima de la capa del navegador, desaprovechando la capa de rendimiento multimedia que aporta HTML5. No funciona como un componente nativo del navegador por lo que no se indexa y además consume recursos extra.

6 Flash (V) Apple no soporta FLASH en sus dispositivos (iPhone, iPod e iPhone). Esta fue uno de los principales motivos por lo que cuales Adobe comenzó a perder cuota de mercado hasta nuestros días. La compra de YouTube por Google y la progresiva implantación del video HTML5 ha sido la otra.

7 Flash (VI) 1. No es abierto, como HTML, CSS y JS 2. Ya hay suficiente contenido en la web que se puede utilizar sin usar Flash 3. No es seguro, ni estable, ni ágil 4. Gasta más batería 5. No fue diseñado para móviles o tablets 6. Apple no puede permitirse depender de aplicaciones de terceros http://www.apple.com/hotnews/thoughts-on- flash/

8 Flash (y VII) Se dice que la industria de los juegos en FLASH es la única que justifica el tener instalado el plugin. Sin embargo existen juegos muy complejos desarrollados íntegramente en HTML5. http://flashvhtml.com/ http://www.creativebloq.com/html5/top-20-html5- games-1122788

9 Conceptos básicos (I) Frecuencia de muestreo: La tasa o frecuencia de muestreo es el número de muestras por unidad de tiempo que se toman de una señal continua para convertirla de analógica en digital. Se expresa en hercios en audio (Hz, ciclos por segundo) o múltiplos suyos, como el kilohercio (kHz). Telefono: 8000 Hz ~ 24 kHz / Magnetófono: ~ 33 kHz CD: 44.1 kHz / ADAT: 48 kHz / Estudio: 48 kHz ~ 192 kHz

10 Conceptos básicos (II) Resolución: Es el número de bits utilizados para almacenar cada muestra de la señal analógica. A mayor resolución mayor fidelidad a la fuente original. El audio CD, y en general casi todos los formatos de audio suelen utilizar una resolución de 16 bits. En el audio profesional se emplean 24 bits.

11 Conceptos básicos (III) Bitrate: El bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de esa onda o señal analógica. Generalmente la unidad de medida es el kps (kilobits por segundo). 3 minutos de audio MP3 a 128kBit/sg (3min x 60 seg/min x 128 kBit/seg = 23040 kBits -> 23040 kBits x 1024 bits/Kbit : 8 bits/bytes : 1024 bytes/Kbytes : 1024 Kbytes/Mbytes = 2,81 MB)

12 Conceptos básicos (IV) CBR/VBR: Bitrate variable o bitrate constante. Existen algunos formatos que permiten en función de la complejidad de la señal adaptar el bitrate para optimizar el almacenamiento y adaptar el bitrate según la complejidad de la señal a almacenar en cada momento.

13 Conceptos básicos (y V) Códec: Acrónimo de "codificación/decodificación". Un códec es el algoritmo especial que reduce el número de bytes que ocupa un archivo de audio o video. Los archivos codificados con un codec específico requieren el mismo códec para ser decodificados y reproducidos.

14 Formatos de audio (I) Antes de HTML5 no era posible reproducir audio en la web. A excepción de la obsoleta etiqueta propietaria de IE que reproducía ficheros WAV. http://www.desarrolloweb.com/articulos/formatos-audio.html WAV: Es un formato contenedor de ondas PCM. No son apropiados para reproducir sonido en la web dado que es un formato sin pérdida de calidad. Un minuto de música en calidad CD (44.100 Hz / stereo / 16bits) ocupa unos 15 MB

15 Formatos de audio (II) MP3: Es un formato propietario de contenido y códec mucho más adecuado para el envío por la web o para la reproducción en aparatos portátiles. Consigue su reducido tamaño a costa de eliminar frecuencias altas y bajas, armónicos, etc. A partir de calidad inferior a 160kbs es apreciable la pérdida de calidad. Un minuto a una calidad de 160 kps (44.100 Hz / stereo / 16bits) ocupa 1.2 MB http://es.wikipedia.org/wiki/Mp3

16 Formatos de audio (III) OGG: Ogg es un formato contenedor, desarrollado por la Fundación Xiph.Org y está libre de patentes. Es de código abierto y está diseñado para dar un alto grado de eficiencia en el "streaming" y la compresión de archivos. http://es.wikipedia.org/wiki/Ogg Un archivo OGG vorbis ocupa 7.5 MB, pero con la calidad de un archivo de audio en MP3 a 128 kbit/s que ocupa 10.2 MB (~ 25% menos)

17 Formatos de audio (y IV) En OGG se puede almacenar tanto audio como video. Como tal este tipo de fichero no es mas que un contenedor que puede albergar hasta subtítulos. Los nombres de los codec que utiliza son: - Vorbis para audio - Theora para video

18 Programas de Edición de Audio Audacity: http://audacity.sourceforge.net/?lang=eshttp://audacity.sourceforge.net/?lang=es Hydrogen: http://www.hydrogen-music.org/http://www.hydrogen-music.org/ Conversión de audio y video Format Factory: http://www.pcfreetime.com/ES/

19 Audio en HTML5 (I) Soportan el elemento IE9+, Firefox, Opera, Chrome, y Safari. Nos permite integrar audio en nuestro navegador de forma nativa sin plugins. http://www.w3schools.com/html/html5_audio.asp

20 Audio en HTML5 (II) Hoy en día con incluir un fichero.mp3 y un fichero.ogg es posible cubrir el 100% de navegadores modernos tanto de escritorio como móvil y tablets. Tu navegador apesta...

21 Audio en HTML5 (y III) es un elemento contenedor de tantos elementos como formatos que queramos que soporte. autoplay El audio comenzará a escucharse en cuanto sea posible. controls Muestra los controles del audio. loop El sonido entra en bucle y se repite muted El audio queda muteado preload Obliga a la carga del audio junto a la página

22 Formatos de video (I) WebM: es un formato contenedor de video desarrollado por Google. Utiliza como códec de video VP8 y como codec de audio Vorbis. http://es.wikipedia.org/wiki/WebM OGG: es el mismo formato contenedor ogg que se emplea en audio, pero que además incorpora una pista de video. Utiliza el codec abierto Theora. http://es.wikipedia.org/wiki/Ogg

23 Formatos de video (y II) MP4: Es la extensión oficial de MP3, por el Instituto Fraunhofer. En lo que nos atañe a la web se utiliza como códec de video el H.264 y como códec de audio ACC. http://es.wikipedia.org/wiki/Mp4

24 Programas de edición de Video VirtualDub: http://www.virtualdub.org/ AVIDemux: http://fixounet.free.fr/avidemux/

25 Video en HTML5 (I) Soportan el elemento IE9+, Firefox, Opera, Chrome, y Safari. Nos permite integrar video en nuestro navegador de forma nativa sin plugins. http://www.w3schools.com/html/html5_video.asp

26 Video en HTML5 (II) Hoy en día con incluir un fichero.mp4 y un fichero.ogg es posible cubrir el 100% de navegadores modernos tanto de escritorio como móvil y tablets. T u navegador apesta...

27 Video en HTML5 (III) es un elemento contenedor de tantos elementos como formatos que queramos que soporte. autoplay El video comenzará a reproducirse en cuanto sea posible. controls Muestra los controles del video. loop El video entra en bucle y se repite muted El audio queda muteado preload Obliga a la carga del video junto a la página

28 Video en HTML5 (y IV) height Definimos la altura del reproductor width Definimos la anchura del reproductor poster Elegimos una imagen como “preview” o poster del video.

29 Reproductores de audio y video Reproductores de audio en HTML5 y JS: http://mediaelementjs.com/ http://www.jplayer.org http://tympanus.net/Development/CassettePlayer/