UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II                           UNIDAD III      In...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIObjetivoEn esta unidad se abordarán la partic...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II    Preparación (Compresión) de videoPlanific...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIComo vimos en la unidad anterior de esta etap...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 1. Sitio web con una hoja de estilos C...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IILas hojas de estilo son un documento de texto...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIExisten en el mercado editores de CSS disponi...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 1. Esquema con encabezado y dos column...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 3. Esquema a 3 columnas (menú, informa...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 5. Diagramación con menú superior y co...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIUna vez que hemos definido la apariencia del ...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIPreparación de imágenesTipos de representació...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIimprimir (cian, magenta, amarillo y negro) en...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 8. Comparación de un escalamiento de 7...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IImuy común del uso de vectores es para generar...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFormatosEn la actualidad existen muchos forma...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIArtículo sobre compresiónhttp://en.wikipedia....
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IITamaño del cuadro:Se refiere al tamaño en píx...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIOtro parámetro definido por el estándar de di...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIsiguiente parte veremos los formatos más usad...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IITamaño: 360x240 (50% de DV-NTSC)Cuadros por s...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIREAL VIDEOEste formato fue desarrollado por l...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II             Figura 5. Pantallas de configura...
UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIArtículo sobre Real Videohttp://en.wikipedia....
Próxima SlideShare
Cargando en…5
×

Compresión de video

326 visualizaciones

Publicado el

Guía sobre compresión de video digital

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
326
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Compresión de video

  1. 1. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II UNIDAD III Informática aplicada a la planificación y desarrollo de sitios web
  2. 2. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIObjetivoEn esta unidad se abordarán la particularidades del desarrollo de sitios webinformativos y de entretenimiento. Se trabajará la preparación de medios parala creación de páginas, el desarrollo y la publicación de sitios web mediante eluso de Macromedia Dreamweaver. Igualmente, se abordarán las distintastécnicas de animación para páginas web, mediante el uso de FLASH y GifAnimador.
  3. 3. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II Preparación (Compresión) de videoPlanificación de sitios webPara iniciar el desarrollo de un sitio web debemos tener definido el documentoconceptual del sitio donde se especifique qué se va a decir y la manera en quese va a presentar la información a nivel conceptual (arquitectura de lainformación / mapa de navegación), esto es muy importante pues va a definir lainterfaz gráfica y los recursos multimedia que vamos a utilizar en el sitio web.El desarrollo de sitios web lo podemos dividir en tres etapas de igualimportancia: Diseño de la arquitectura de la información, diseño gráfico deinterfaces y programación. De cada una de estas etapas surgen los insumospara realizar la siguiente. Veamos ahora con más detalle cada una de estasetapas y los documentos resultantes de cada una de estas.Diseño de la arquitectura de la información
  4. 4. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIComo vimos en la unidad anterior de esta etapa surge el mapa de navegacióny los contenidos detallados de cada una de las secciones, esto es muyimportante que se defina antes del realizar el diseño gráfico de interfaces esteporque esta determinado en gran medida por la aproximación que se le de alcontenido.De esta etapa se desprende un documento que incluye el mapa de navegacióny los textos (o descripción de los recursos multimedia) a ser incluidos en cadasección.Diseño gráfico de interfacesA partir del mapa de navegación y la definición del los contenidos de cadasección se procede a realizar el diseño gráfico del sitio web. En la unidadanterior vimos varios aspectos a tomar en cuenta al momento de diseñarinterfaces.De esta etapa surgen típicamente dos plantillas, una para la página de inicio yotra para las páginas de contenidos así como la hoja de estilos (CSS) que seva utilizar en el site.ProgramaciónUna vez definidos los contenidos y el look and feel del sitio web se procede asu programación en HTML y desarrollo de los elementos multimedia a serincluidos en el sitio (imágenes, videos, archivos de audio, animaciones enFLASH, etc.)El resultado de esta etapa es el producto final con todos los recursosmultimedia desarrollados y probado en su conjunto.Ahora vamos a ver con más detalle los diferentes documentos entregables decada etapa.Diseño web basado en CCS(Cascading Style Sheets)Las hojas CCS son un conjunto de reglas que definen el estilo visual del sitioweb en un archivo externo. Típicamente se utiliza un solo archivo para todo elsitio web.La principal ventaja de utilizar hojas CCS es garantizar la coherencia visual detodo el sitio web, esto es posible porque al estar definidos los estilos gráficosen una hoja independiente de las páginas HTML que conforma el sitio loscambios realizados en esta hoja de estilos afectarán instantáneamente todo elsitio. Otra ventaja es que estas hojas de estilo solo se deben bajar una vez alentrar en el sitio web quedando almacenadas en el cache del navegador, estonos permite hacer sitios web más rápidos y eficientes.
  5. 5. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 1. Sitio web con una hoja de estilos CSSEn la figura 1 vemos un típico sitio web con una hoja de estilos, como podemosobservar todas la páginas toman sus estilos visuales de esta única hoja deestilo garantizando la coherencia visual de todo el sitio web.Los estilos creados en las hojas corresponden a los atributos de las etiquetasHTML y modifican el aspecto de los elementos afectados por estas etiquetas.<etiqueta clase="estilo1"> elementos afectados por la etiqueta </etiqueta>Esta instrucción quiere decir que el conjunto de atributos visuales definidos enla hoja CSS bajo el nombre de estilo 1 que serán aplicados a la etiquetamodificando los elementos afectados por ella.Prácticamente todas la etiquetas son susceptibles a ser modificadas medianteestilos CSS, sin embargo podemos decir que los estilos más comunes quevamos definir se refieren al aspecto de los vínculos, títulos, texto de contenido,tablas (color o imagen de fondo, tamaño, distancia al borde, entre otros),botones y demás elementos de formas de ingreso de datos (listasdesplegables, campos de texto, áreas de texto).
  6. 6. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IILas hojas de estilo son un documento de texto tal cual como una página HTMLque se guarda con la extensión .css y se enlaza con los demás archivos delsitio mediante una etiqueta referencial.La sintaxis para crear una hoja de estilo es la siguiente.Nombre del estilo{ Propiedad1: “valor”; Propiedad2: “valor”;}Ej:.td_texto { font-family: Arial, Helvetica, sans-serif; font-size: 10px;}En el ejemplo tenemos un estilo llamado td_texto que indica que el tipo de letraa ser utilizado es arial y su tamaño es de 10 puntos.Supongamos que esta regla de estilo esta guardada en un archivo llamadoestilos.css. Para hacer utilizar esta regla debemos primero hacer referencia enel documento que vamos a utilizar agregando la etiqueta:<link href="estilos.css" rel="stylesheet" type="text/css" />Al principio del documento.Para hacer el llamado a la regla en colocamos en la etiqueta correspondiente,por ejemplo en el <td> (celda) de la tabla<td class="td_texto">ejemplo</td>Veamos ahora la estructura de la página web con la referencia a la hoja deestilo y el uso del estilo td_texto en una celda de un tabla de contenido:<html><link href="estilos.css" rel="stylesheet" type="text/css" /> enlace a la hoja de estilo<head><title>Ejemplo</title></head><body><table width="500" border="0" cellspacing="0" cellpadding="5"> <tr > <td class="td_texto">El titulo</td> uso del estilo td_texto en un celda </tr></table></body></html>
  7. 7. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIExisten en el mercado editores de CSS disponibles que nos ahorran el trabajode escribir el código manualmente. Adobe Dreamweaver trae uno incorporadode excelente calidad, de manera que con un solo programa de autoría webpodemos editar todo nuestro sitio (páginas HTML y hojas de estilo CSS).Plantillas de sitios web (Layout)Las plantillas utilizadas en el diseño de los sitios web son documentos HTMLdonde se define la diagramación o distribución espacial de la información,típicamente se utilizan dos plantillas, una para la página principal y otra para laspáginas internas, sin embargado podemos dar soluciones más creativas ypodemos realizar más plantillas, por ejemplo una para cada sección.Como vimos antes conviene utilizar esquemas generales para la diagramaciónde los distintos elementos de contenidos, como lo puede ser la colocación dellogo, el menú, banners y demás elementos gráficos e informativos derelevancia.Veamos algunos esquemas de diagramación usados comúnmente:
  8. 8. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 1. Esquema con encabezado y dos columnas (menú e información general)Figura 2. y www.petco.com. Ejemplos del uso del esquema de encabezado y doscolumnas (Menú e información general)
  9. 9. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 3. Esquema a 3 columnas (menú, información principal, información secundaria)Figura 4. http://www.wikipedia.org. Ejemplo de diagramación a 3 columnas.
  10. 10. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 5. Diagramación con menú superior y contenido en la toda la parte inferior. Estasolución es común para sitios con mucho contenido.Figura 6. www.winamp.com y www.apple.com . Ejemplos de diagramación con menúsuperior.Estos esquemas son los más usados por los diseñadores de sitios web. Si bienno “tenemos” que utilizar alguno de estos esquemas o combinaciones de estos,es una buena práctica hacerlo porque los usuarios ya los conocen, hecho esteque nos ayudará a diseñar un sitio web mas amable.La combinación de la hoja de estilos CSS y las plantillas, deben definir en sutotalidad la estética visual del sitio web. Esto incluye pero no se limita a: paletade colores, tipos y tamaño de las letras, diagramación de los elementosinformativos y gráficos en la página principal y en las páginas internas, coloreso imágenes de fondo, elementos de formularios (botones, campo de texto, listadesplegables, etc).
  11. 11. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIUna vez que hemos definido la apariencia del sitio web, se procede a prepararo a producir los diferentes recursos multimedia para su integración final en elsitio web.En la siguientes secciones veremos como preparar imágenes, videos y arealizar animaciones para sitios web.
  12. 12. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIPreparación de imágenesTipos de representación de imágenes (raster y vectores)En la actualidad existen fundamentalmente dos tipos de representación paraimágenes 2D: raster y vectores. A continuación veremos una descripción deambos tipos de representación y su uso en aplicaciones multimediaImágenes Raster (Bitmaps)Un raster es una “malla” y una imagen representada de esta maneracorresponde a una matriz tridimensional donde se definen el color de cada unode los puntos (pixels) que conforman la imagen.Los colores de estos puntos se definen típicamente como una combinaciónlineal dentro del espacio RGB (Red, Green, Blue)Figura 7. “smiley face” representada como raster. (Tomado de www.wikipedia.org)En la figura 7 observamos un “smiley face” representado como raster, en laimagen ampliada podemos notar que para cada punto de la malla existe uncolor representado en coordenadas RGB, en el caso de la figura conporcentajes. Existen también otras formas de representar los colores y estasvan a depender en gran medida del medio que se va a utilizar para interpretarlos datos. Para formatos impresos se utiliza la representación CMYK ocuatricromía, esto se debe a las impresoras utilizan cuatro colores para
  13. 13. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIimprimir (cian, magenta, amarillo y negro) entonces tiene sentido utilizar lamezcla de estos colores para trabajar con imágenes que van a ser luegoimpresas. En el caso de los monitores de computadora o los televisores, estosutilizan una combinación de rojo, verde y azul para representar los colores en lapantalla, de tal forma que la representación RGB será la indicada si vamos atrabajar para Internet, medios interactivos o para televisión.El otro aspecto define las imágenes raster es la resolución o la cantidad depixels la forman. A mayor cantidad de pixels mayor resolución tendremos.Existen también un parámetro de densidad comúnmente utilizado: dpi (dots perinch), que son pixels o puntos por pulgada. A mayor densidad de puntos mejorcalidad tendrá la impresión. En el trabajo de impresos en formato pequeño(hasta el tamaño de un afiche o pendón aproximadamente) los DPI que seutilizan van desde 150 a 300 siendo estos los más usados, para tamañossuperiores de utilizan dpi`s menores. Las pantallas de computadora y latelevisión tienen una densidad de 72 dpi.La combinación de estos tres factores es lo que va a determinar el peso de unaimagen raster. El peso es un muy importante al momento de trabajar conimágenes y particularmente para el desarrollo de sitios web, debido a surelevancia en la velocidad de carga de las páginas. Imágenes muy pesadasgenerarán sitios muy lentos, pero imágenes con poca resolución o pocaprofundidad de color producen una apariencia muy pobre, ambos factores,como vimos en la unidad anterior, terminarán mermando el éxito de nuestrositio web.Para lidiar con este problema veremos más adelante los distintos tipos deformatos y las optimizaciones que podemos hacer lograr la mejor relaciónpeso-calidad de imagen.Imágenes vectorialesA diferencia de la imágenes de raster que son representadas por un conjuntode puntos de una “malla”, la imágenes basadas en vectores utilizan primitivasgeométricas como puntos y curvas para definir los diferentes elementos de laimagen, estas primitivas están basadas en ecuaciones matemáticas lo quetiene como consecuencia un peso mucho menor de la imagen y la posibilidadde escalamiento teóricamente infinito sin perder calidad. En la figura 8podemos observar un ejemplo de este comportamiento.
  14. 14. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFigura 8. Comparación de un escalamiento de 7 veces el tamaño original de una porciónde una imagen y el resultado comparado tomando la imagen original en vectores y elraster (bitmap). Tomado de www.wikipedia.org¿Por qué entonces no utilizamos siempre imágenes vectoriales? La respuestaes que no siempre es posible, esto se debe a la misma razón que hace a lasimágenes vectoriales livianas y escalables impide que puedan reproducir larealidad fielmente, es decir, no existen fotos vectoriales. La realidad es muycompleja para ser expresada como una combinación de primitivas geométricasy ecuaciones matemáticas (Para mayor información sobre este tema revisar ellibro “The Algorithmic Beauty of Plants” escrito por Aristid Lindenmayer dondese describen diferentes patrones matemáticos para “generar” plantas). Sinembargo en la medida de lo posible es aconsejable trabajar con vectores.El otro problema con las imágenes vectoriales consiste en estas requieren deun software que las interprete, como por ejemplo FLASH, y este nonecesariamente va estar disponible en contraste con las imágenes raster quepueden ser mostradas por cualquier navegador.Una práctica frecuente en desarrollo de sitios web consiste en “vectorizar”imágenes raster de baja resolución para luego regenerarlas en la resoluciónadecuada para el proyecto. “Vectorizar” una imagen raster consiste el “calcar”la imagen original utilizando líneas y primitivas geométricas. Otra aplicación
  15. 15. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IImuy común del uso de vectores es para generar ilustraciones a partir de unafotografía. Ver figura 9Figura 9. Ejemplo de una ilustración realizada mediante es uso del dibujo vectorial apartir de una fotografía. Tomado de la propuesta para la página web de la fundación deneurociencias Cogniávila.Podemos decir entonces que ambas representaciones tienen uso en eldesarrollo de sitios web y su utilización va a depender de lo que se quieremostrar: Una representación fiel de la realidad (fotografía) o una simplificaciónde esta (Esquema, dibujo o ilustración).
  16. 16. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIFormatosEn la actualidad existen muchos formatos con diferentes tipos de compresiónpara guardar las imágenes. Para la web los más usados son JPEG, GIF y PNGpara imágenes raster, imágenes vectoriales suelen ser utilizadas enanimaciones en FLASH.Escoger el formato correcto y nivel de compresión acorde es crucial paracreación de sitios web, el compromiso peso-calidad de imagen influyedirectamente tanto en la calidad visual como en la velocidad de los sitios web yambos son factores determinantes para el éxitoLa compresión de imágenes consiste en la aplicación de algoritmos decompresión de datos en imágenes digitales, estos pueden ser sin perdida“lossless” o con perdida “lossy”. La compresión sin perdidas de utiliza paraalgunas aplicaciones medicas u otras aplicaciones donde la fidelidad de laimagen sea determinante. En el caso del desarrollo de sitios web es másimportante la reducción del peso que la fidelidad de la imagen. La mayoría delos formatos con perdida basan en la transcodificación del formato original demapa de bits, es decir, en lugar de representar la imagen como un matriz depuntos con coordenadas en el espacio RGB, utilizan diferentes métodos pararepresentar los colores usualmente descartando la información que el ojohumano es menos sensible a percibir.JPEGOptimización de imágenes Colores sólidosLinks de interés:En wikipedia.org (Ingles)Artículo sobre imágenes raster:http://en.wikipedia.org/wiki/Raster_imagesArtículo sobre imágenes vectoriales:http://en.wikipedia.org/wiki/Vector_graphicsArtículo sobre píxel:http://en.wikipedia.org/wiki/Pixel#Megapixel
  17. 17. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIArtículo sobre compresiónhttp://en.wikipedia.org/wiki/Image_compressionArtículo sobre JPEGhttp://en.wikipedia.org/wiki/JPEGArtículo sobre GIFhttp://en.wikipedia.org/wiki/GIFArtículo sobre PNG Preparación de videosAntes comenzar a hablar de la preparación, su codificación y formatos,debemos entender primero las características del video digital.Un video digital esta expresado como una secuencia de fotogramas en mapasde bits sincronizados con el audio tal como una película de cine.Figura 1. Ejemplo de un típico editor de video con una pista de video y una pista deaudio. Sony Vegas 6.0b.En la figura 1 observamos una porción de la pantalla de un editor de videocomercial (Sony Vegas 6.0b) con dos pistas, una para el video y otra para elaudio. La pista de video esta representada por una secuencia de fotogramas ocuadros y el audio por su onda.Existen varias propiedades del video que debemos tomar en cuenta a la horade preparar versiones para Internet.
  18. 18. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IITamaño del cuadro:Se refiere al tamaño en píxeles que tiene la película y se expresa: ancho x alto.El tamaño suele corresponde con un estándar de difusión de televisión, porejemplo NTSC, PAL o HDTV. El tamaño más usado en la actualidad es720x480 que corresponde con NTSC-DV aunque cada vez más se esta usadoel estándar HD en alguno de sus variantes (HDV o Full HD) que brinda muchamás resolución desde 1280x720 hasta 1920x1080.En la figura 2 podemos ver los tamaños más frecuentes usados para trabajarcon video para televisión.Figura 2. Tamaños más comunes utilizados para trabajar con video. Pantalla sacada delsofware Sony Vegas 6.0b.Normalmente los videos que vamos a integrar en un sitio web o aplicación off-line se encontrarán originalmente en alguno de estos tamaños. Es importanteconocer el tamaño original porque si hacemos una reducción de tamañodebemos mantener la relación ancho/alto original para que el video no sedeforme. Debido a las limitaciones de ancho de banda que existen en Internet,la mayoría de los videos se escalan hasta 360x240 que es la mitad de NTSC-DV, en la medida que mejore el ancho de banda promedio de los usuarios sepodrán colocar videos mas grandes y de mejor calidad.Cantidad de cuadros por segundo (fps):
  19. 19. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIOtro parámetro definido por el estándar de difusión en la cantidad de cuadrospor segundo que tiene el video en NTSC son 29.97 fps y el PAL son 25 fps. Almomento de preparar video para su difusión por Internet u otro medio diferentea la televisión, este es otro aspecto muy importante a tomar en cuenta paralograr una buena relación peso-calidad. Muy pocos cuadros por segundogenerará un efecto de parpadeo en la imagen muy desagradable y colocarmuchos cuadros por segundo no necesariamente mejorará la calidad pero siinfluenciará en gran medida el peso del archivo. Para medios interactivos sesuele trabajar a 15 cuadros por segundo.Adicional a los aspectos relacionados con la imagen debemos también tomaren cuenta aquellos relacionados con el audio.El audio se digitaliza de modo similar al video, es decir se toman “muestras”cada cierto intervalo de tiempo (ver figura 3) y se construye una onda discreta apartir de estas muestras. Como vimos en el caso del video se toman entre 25 a30 “fotos” en un segundo para poder obtener una sensación de movimientofluido. Para el audio en número de muestras a ser tomadas aumentaconsiderablemente, un audio de buena calidad requiere de 44.100 muestraspor segundo.Figura 3. Ejemplo de un digitalización de una onda de audio. Los puntos sobre la ondarepresentan los valores de la amplitud tomados en cada intervalo de tiempo. Tomado dewikipedia.orgPara representar la calidad o resolución del audio se utiliza una media defrecuencia: el hercio. Un hercio significa “un ciclo por cada segundo,entendiendo ciclo como la repetición de un evento” en nuestro caso el eventoes la muestra de la amplitud de la onda de audio.Además de las características propias del video, referentes a la imagen y alsonido, al momento de preparar video para Internet u otros medio interactivosdebemos tomar en cuenta el ancho de banda del que disponen los usuarios.También es muy importante determinar las exigencias de calidad del publico-objetivo, es decir, ¿Nuestro público esta dispuesto a esperar por un video dealta calidad o esta dispuesto a sacrificarla por un menor tiempo de espera?, unejemplo de esto lo podemos ver el sitio de trailers de películas de Applecomparado con you tube. En ambos sitios se difunden videos pero la calidad ytiempo de espera son radicalmente diferentes.El ancho de banda suele un parámetro común entre los compresores de videopara los diferentes formatos adecuados para la difusión por Internet. En la
  20. 20. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIsiguiente parte veremos los formatos más usados y los parámetros decompresión de cada uno de ellos.Formatos de video para aplicaciones multimedia para Internet StreamingWMV (Windows media video)Este formato fue desarrollado por Microsoft y se ha convertido en uno de losformatos más populares para la difusión de video por Internet, entre otrascosas porque es reproducido por Windows Media Player y es fácilmenteintegrado en páginas web.Este formato incluye varios “codecs” sin embargo el mas usado es el wmv9. Alser un formato especialmente diseñado para Internet el parámetro deconfiguración al que debemos prestar mayor atención es al bitrate, lo quepodemos traducir como “tasa de transferencia”. El bitrate esta determinado porel ancho de banda de nuestro público-objetivo. Hoy en día es seguro codificar a512 kbps si el video va ser colocado en un servidor compartido en Internet yentre 700 y 1024 kbps si se encuentra en una intranet corporativa que disfrutede velocidades superiores, para aplicaciones en CD-ROM fuera de líneapodemos codificar a partir de los 1200 kbps hasta 3000 kbps si el video no esmuy largo.Figura 4. Ejemplo de una configuración de codificación para video en Internet utilizandoel formato WMV. Tomado de Sony Vegas 6.0bUna configuración típica para un video en Internet (Figura 4) sería por ejemplo:
  21. 21. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IITamaño: 360x240 (50% de DV-NTSC)Cuadros por segundo: 14.985 (50% de NTSC)Bit Rate del video: 512 KbpsAtributos del audio: 96 Kbps, 44 khzMOV (Quicktime Movie)Este formato, desarrollado por Apple, cuenta con varios codecs adaptados parasu uso en Internet al igual que su competidor wmv. Su uso esta muy difundidosin embargo los usuarios deben instalar el player para poder reproducir losvideos en este formato. Aunque el player es gratuito al igual que reproductorpara Windows no es seguro suponer que todos los usuarios que utilicen unsistema operativo diferente del Mac OS lo tendrán instalado.Las películas de Quicktime pueden poseer una muy alta calidad con tasas detransferencias muy razonables en especial con los nuevos codecs como h.264.En general podemos obtener una calidad superior y una mejor relación peso-calidad con este formato, sin embargo existe varias limitaciones:1.- Para obtener una buena compresión el video debe ser generado en uncomputador apple. Aunque es posible generarlo en PC basados en Windows elresultado no suele ser muy bueno.2.- La difusión (streaming) de este formato funciona idealmente en servidoresapple, esto limita en buena medida posibilidades de hospedaje del sitio web.3.- Los usuarios deben instalar el reproductor Quicktime lo que puede limitar anuestra audiencia.Los parámetros a tomar en cuenta para la compresión son similares a los dewmv en cuanto a tamaño, cuadros por segundo, parámetros de audio. Engeneral no se puede especificar una tasa de transferencia al momento de lacompresión, esto puede variar con los diferentes compresores que se utilicen.Podemos decir que si bien Quicktime con h.264 puede genera una mejorcalidad por un peso similar que otros formatos debemos preguntarnos en quémedida el publico-objetivo del sitio puede tener el reproductor instalado.
  22. 22. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIREAL VIDEOEste formato fue desarrollado por la compañía RealNetworks, hacia finales delos 90`s fue muy popular su uso para la difusión de video por Internet, sinembargo su popularidad ha decaído en beneficio de otros formatos. El mayorinconveniente con este formato es que tanto la tecnología de servidor como ladel reproductor son propietarias, lo que limita en gran medida la posibleaudiencia y el alojamiento del sitio web. El uso del Real Player essignificativamente menor que el Quicktime y el Windows Media Player.FLASH VIDEO (FLV)Este formato fue desarrollado por Macromedia, ahora Adobe, se ha convertidoen uno de los formatos mas usados en Internet para la difusión de video. Entrelos sitios populares que utilizan este formato encontramos a YouTube, GoogleVideo, Reuters.com, Yahoo! Video, MySpace entre otros. Una de las mayoresventajas es que es reproducido por el Flash Player que se encuentra instaladoen casi todas las computadoras del mundo. En general este formato es debuena calidad para tasas de transferencias bajas, esto lo hace ideal para sitiosmuy frecuentados donde la velocidad de descarga sea lo más importante.La compresión de realiza mediante el Flash Video Encoder (ver figura 5) queviene con la instalación de Adobe Flash Profesional o directamente en elambiente de autoría de Flash.Al momento de configurar utilizando este compresor el parámetro al quedebemos prestar mayor atención es al de “calidad” que es equivalente a la tasade transferencia (bitrate) a menor calidad más rápido se cargará el video ymayor bitrate mejor será la calidad. Igualmente se pueden ajustar el tamaño dela película y la cantidad de cuadros por segundo.Una configuración típica para un video en un sitio web alojado en un servidorpúblico y que será visitado por usuarios desde Internet:Tamaño: 360x240Cuadros por segundo: 15Bit Rate del video: 400 KbpsAtributos del audio: 96 Kbps
  23. 23. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática II Figura 5. Pantallas de configuración del Flash Video Encoder. Links de interésEn wikipediaArtículo sobre audio digital:http://es.wikipedia.org/wiki/Audio_digitalArtículo sobre el Herciohttp://es.wikipedia.org/wiki/HercioArtículo sobre onda sonorahttp://es.wikipedia.org/wiki/Onda_sonoraArtículo sobre el formato wmvhttp://en.wikipedia.org/wiki/Windows_Media_VideoArtículo sobre Quicktimehttp://en.wikipedia.org/wiki/.mov#QuickTime_file_format
  24. 24. UNIVERSIDAD CATÓLICA ANDRES BELLOEscuela de Comunicación SocialInformática IIArtículo sobre Real Videohttp://en.wikipedia.org/wiki/Real_VideoArtículo sobre Flash Videohttp://en.wikipedia.org/wiki/Flash_videoAnimación para InternetUso de la animación en sitios webPrincipios de animación Publicación y mantenimiento de sitios web Dominios Protocolos Uso del FTP Buenas prácticas

×