Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
UNIVERSIDAD CATÓLICA ANDRES BELLO
Escuela de Comunicación Social
Informática II




                           UNIDAD III
...
UNIVERSIDAD CATÓLICA ANDRES BELLO
Escuela de Comunicación Social
Informática II

Objetivo

En esta unidad se abordarán la ...
UNIVERSIDAD CATÓLICA ANDRES BELLO
Escuela de Comunicación Social
Informática II




    Preparación (Compresión) de video
...
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Trabajo dreamweaver
Trabajo dreamweaver
Cargando en…3
×

Eche un vistazo a continuación

1 de 24 Anuncio

Más Contenido Relacionado

Anuncio

Más de Francisco Berrizbeitia (20)

Compresión de video

  1. 1. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II UNIDAD III Informática aplicada a la planificación y desarrollo de sitios web
  2. 2. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Objetivo En esta unidad se abordarán la particularidades del desarrollo de sitios web informativos y de entretenimiento. Se trabajará la preparación de medios para la creación de páginas, el desarrollo y la publicación de sitios web mediante el uso de Macromedia Dreamweaver. Igualmente, se abordarán las distintas técnicas de animación para páginas web, mediante el uso de FLASH y Gif Animador.
  3. 3. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Preparación (Compresión) de video Planificación de sitios web Para iniciar el desarrollo de un sitio web debemos tener definido el documento conceptual del sitio donde se especifique qué se va a decir y la manera en que se va a presentar la información a nivel conceptual (arquitectura de la información / mapa de navegación), esto es muy importante pues va a definir la interfaz 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 igual importancia: Diseño de la arquitectura de la información, diseño gráfico de interfaces y programación. De cada una de estas etapas surgen los insumos para realizar la siguiente. Veamos ahora con más detalle cada una de estas etapas y los documentos resultantes de cada una de estas. Diseño de la arquitectura de la información
  4. 4. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Como vimos en la unidad anterior de esta etapa surge el mapa de navegación y los contenidos detallados de cada una de las secciones, esto es muy importante que se defina antes del realizar el diseño gráfico de interfaces este porque esta determinado en gran medida por la aproximación que se le de al contenido. De esta etapa se desprende un documento que incluye el mapa de navegación y los textos (o descripción de los recursos multimedia) a ser incluidos en cada sección. Diseño gráfico de interfaces A partir del mapa de navegación y la definición del los contenidos de cada sección se procede a realizar el diseño gráfico del sitio web. En la unidad anterior vimos varios aspectos a tomar en cuenta al momento de diseñar interfaces. De esta etapa surgen típicamente dos plantillas, una para la página de inicio y otra para las páginas de contenidos así como la hoja de estilos (CSS) que se va utilizar en el site. Programación Una vez definidos los contenidos y el look and feel del sitio web se procede a su programación en HTML y desarrollo de los elementos multimedia a ser incluidos en el sitio (imágenes, videos, archivos de audio, animaciones en FLASH, etc.) El resultado de esta etapa es el producto final con todos los recursos multimedia desarrollados y probado en su conjunto. Ahora vamos a ver con más detalle los diferentes documentos entregables de cada etapa. Diseño web basado en CCS (Cascading Style Sheets) Las hojas CCS son un conjunto de reglas que definen el estilo visual del sitio web en un archivo externo. Típicamente se utiliza un solo archivo para todo el sitio web. La principal ventaja de utilizar hojas CCS es garantizar la coherencia visual de todo el sitio web, esto es posible porque al estar definidos los estilos gráficos en una hoja independiente de las páginas HTML que conforma el sitio los cambios realizados en esta hoja de estilos afectarán instantáneamente todo el sitio. Otra ventaja es que estas hojas de estilo solo se deben bajar una vez al entrar en el sitio web quedando almacenadas en el cache del navegador, esto nos permite hacer sitios web más rápidos y eficientes.
  5. 5. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Figura 1. Sitio web con una hoja de estilos CSS En la figura 1 vemos un típico sitio web con una hoja de estilos, como podemos observar todas la páginas toman sus estilos visuales de esta única hoja de estilo garantizando la coherencia visual de todo el sitio web. Los estilos creados en las hojas corresponden a los atributos de las etiquetas HTML 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 en la hoja CSS bajo el nombre de estilo 1 que serán aplicados a la etiqueta modificando los elementos afectados por ella. Prácticamente todas la etiquetas son susceptibles a ser modificadas mediante estilos CSS, sin embargo podemos decir que los estilos más comunes que vamos 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 (listas desplegables, campos de texto, áreas de texto).
  6. 6. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Las hojas de estilo son un documento de texto tal cual como una página HTML que se guarda con la extensión .css y se enlaza con los demás archivos del sitio 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 letra a ser utilizado es arial y su tamaño es de 10 puntos. Supongamos que esta regla de estilo esta guardada en un archivo llamado estilos.css. Para hacer utilizar esta regla debemos primero hacer referencia en el 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 de estilo 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 BELLO Escuela de Comunicación Social Informática II Existen en el mercado editores de CSS disponibles que nos ahorran el trabajo de escribir el código manualmente. Adobe Dreamweaver trae uno incorporado de excelente calidad, de manera que con un solo programa de autoría web podemos 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 HTML donde 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 las páginas internas, sin embargado podemos dar soluciones más creativas y podemos realizar más plantillas, por ejemplo una para cada sección. Como vimos antes conviene utilizar esquemas generales para la diagramación de los distintos elementos de contenidos, como lo puede ser la colocación del logo, el menú, banners y demás elementos gráficos e informativos de relevancia. Veamos algunos esquemas de diagramación usados comúnmente:
  8. 8. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Figura 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 dos columnas (Menú e información general)
  9. 9. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Figura 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 BELLO Escuela de Comunicación Social Informática II Figura 5. Diagramación con menú superior y contenido en la toda la parte inferior. Esta solució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 bien no “tenemos” que utilizar alguno de estos esquemas o combinaciones de estos, es una buena práctica hacerlo porque los usuarios ya los conocen, hecho este que 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 su totalidad la estética visual del sitio web. Esto incluye pero no se limita a: paleta de colores, tipos y tamaño de las letras, diagramación de los elementos informativos y gráficos en la página principal y en las páginas internas, colores o imágenes de fondo, elementos de formularios (botones, campo de texto, lista desplegables, etc).
  11. 11. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Una vez que hemos definido la apariencia del sitio web, se procede a preparar o a producir los diferentes recursos multimedia para su integración final en el sitio web. En la siguientes secciones veremos como preparar imágenes, videos y a realizar animaciones para sitios web.
  12. 12. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Preparación de imágenes Tipos de representación de imágenes (raster y vectores) En la actualidad existen fundamentalmente dos tipos de representación para imágenes 2D: raster y vectores. A continuación veremos una descripción de ambos tipos de representación y su uso en aplicaciones multimedia Imágenes Raster (Bitmaps) Un raster es una “malla” y una imagen representada de esta manera corresponde a una matriz tridimensional donde se definen el color de cada uno de los puntos (pixels) que conforman la imagen. Los colores de estos puntos se definen típicamente como una combinación lineal 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 la imagen ampliada podemos notar que para cada punto de la malla existe un color representado en coordenadas RGB, en el caso de la figura con porcentajes. Existen también otras formas de representar los colores y estas van a depender en gran medida del medio que se va a utilizar para interpretar los datos. Para formatos impresos se utiliza la representación CMYK o cuatricromía, esto se debe a las impresoras utilizan cuatro colores para
  13. 13. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II imprimir (cian, magenta, amarillo y negro) entonces tiene sentido utilizar la mezcla de estos colores para trabajar con imágenes que van a ser luego impresas. En el caso de los monitores de computadora o los televisores, estos utilizan una combinación de rojo, verde y azul para representar los colores en la pantalla, de tal forma que la representación RGB será la indicada si vamos a trabajar para Internet, medios interactivos o para televisión. El otro aspecto define las imágenes raster es la resolución o la cantidad de pixels la forman. A mayor cantidad de pixels mayor resolución tendremos. Existen también un parámetro de densidad comúnmente utilizado: dpi (dots per inch), que son pixels o puntos por pulgada. A mayor densidad de puntos mejor calidad 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 se utilizan van desde 150 a 300 siendo estos los más usados, para tamaños superiores de utilizan dpi`s menores. Las pantallas de computadora y la televisión tienen una densidad de 72 dpi. La combinación de estos tres factores es lo que va a determinar el peso de una imagen raster. El peso es un muy importante al momento de trabajar con imágenes y particularmente para el desarrollo de sitios web, debido a su relevancia en la velocidad de carga de las páginas. Imágenes muy pesadas generarán sitios muy lentos, pero imágenes con poca resolución o poca profundidad de color producen una apariencia muy pobre, ambos factores, como vimos en la unidad anterior, terminarán mermando el éxito de nuestro sitio web. Para lidiar con este problema veremos más adelante los distintos tipos de formatos y las optimizaciones que podemos hacer lograr la mejor relación peso-calidad de imagen. Imágenes vectoriales A diferencia de la imágenes de raster que son representadas por un conjunto de puntos de una “malla”, la imágenes basadas en vectores utilizan primitivas geométricas como puntos y curvas para definir los diferentes elementos de la imagen, estas primitivas están basadas en ecuaciones matemáticas lo que tiene como consecuencia un peso mucho menor de la imagen y la posibilidad de escalamiento teóricamente infinito sin perder calidad. En la figura 8 podemos observar un ejemplo de este comportamiento.
  14. 14. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Figura 8. Comparación de un escalamiento de 7 veces el tamaño original de una porción de una imagen y el resultado comparado tomando la imagen original en vectores y el raster (bitmap). Tomado de www.wikipedia.org ¿Por qué entonces no utilizamos siempre imágenes vectoriales? La respuesta es que no siempre es posible, esto se debe a la misma razón que hace a las imágenes vectoriales livianas y escalables impide que puedan reproducir la realidad fielmente, es decir, no existen fotos vectoriales. La realidad es muy compleja para ser expresada como una combinación de primitivas geométricas y ecuaciones matemáticas (Para mayor información sobre este tema revisar el libro “The Algorithmic Beauty of Plants” escrito por Aristid Lindenmayer donde se describen diferentes patrones matemáticos para “generar” plantas). Sin embargo en la medida de lo posible es aconsejable trabajar con vectores. El otro problema con las imágenes vectoriales consiste en estas requieren de un software que las interprete, como por ejemplo FLASH, y este no necesariamente va estar disponible en contraste con las imágenes raster que pueden 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ón adecuada 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 BELLO Escuela de Comunicación Social Informática II muy común del uso de vectores es para generar ilustraciones a partir de una fotografía. Ver figura 9 Figura 9. Ejemplo de una ilustración realizada mediante es uso del dibujo vectorial a partir de una fotografía. Tomado de la propuesta para la página web de la fundación de neurociencias Cogniávila. Podemos decir entonces que ambas representaciones tienen uso en el desarrollo de sitios web y su utilización va a depender de lo que se quiere mostrar: Una representación fiel de la realidad (fotografía) o una simplificación de esta (Esquema, dibujo o ilustración).
  16. 16. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Formatos En la actualidad existen muchos formatos con diferentes tipos de compresión para guardar las imágenes. Para la web los más usados son JPEG, GIF y PNG para imágenes raster, imágenes vectoriales suelen ser utilizadas en animaciones en FLASH. Escoger el formato correcto y nivel de compresión acorde es crucial para creación de sitios web, el compromiso peso-calidad de imagen influye directamente tanto en la calidad visual como en la velocidad de los sitios web y ambos son factores determinantes para el éxito La compresión de imágenes consiste en la aplicación de algoritmos de compresión de datos en imágenes digitales, estos pueden ser sin perdida “lossless” o con perdida “lossy”. La compresión sin perdidas de utiliza para algunas aplicaciones medicas u otras aplicaciones donde la fidelidad de la imagen sea determinante. En el caso del desarrollo de sitios web es más importante la reducción del peso que la fidelidad de la imagen. La mayoría de los formatos con perdida basan en la transcodificación del formato original de mapa de bits, es decir, en lugar de representar la imagen como un matriz de puntos con coordenadas en el espacio RGB, utilizan diferentes métodos para representar los colores usualmente descartando la información que el ojo humano es menos sensible a percibir. JPEG Optimización de imágenes Colores sólidos Links de interés: En wikipedia.org (Ingles) Artículo sobre imágenes raster: http://en.wikipedia.org/wiki/Raster_images Artículo sobre imágenes vectoriales: http://en.wikipedia.org/wiki/Vector_graphics Artículo sobre píxel: http://en.wikipedia.org/wiki/Pixel#Megapixel
  17. 17. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Artículo sobre compresión http://en.wikipedia.org/wiki/Image_compression Artículo sobre JPEG http://en.wikipedia.org/wiki/JPEG Artículo sobre GIF http://en.wikipedia.org/wiki/GIF Artículo sobre PNG Preparación de videos Antes 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 mapas de 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 de audio. Sony Vegas 6.0b. En la figura 1 observamos una porción de la pantalla de un editor de video comercial (Sony Vegas 6.0b) con dos pistas, una para el video y otra para el audio. La pista de video esta representada por una secuencia de fotogramas o cuadros y el audio por su onda. Existen varias propiedades del video que debemos tomar en cuenta a la hora de preparar versiones para Internet.
  18. 18. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Tamañ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, por ejemplo NTSC, PAL o HDTV. El tamaño más usado en la actualidad es 720x480 que corresponde con NTSC-DV aunque cada vez más se esta usado el estándar HD en alguno de sus variantes (HDV o Full HD) que brinda mucha más resolución desde 1280x720 hasta 1920x1080. En la figura 2 podemos ver los tamaños más frecuentes usados para trabajar con video para televisión. Figura 2. Tamaños más comunes utilizados para trabajar con video. Pantalla sacada del sofware 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 importante conocer el tamaño original porque si hacemos una reducción de tamaño debemos mantener la relación ancho/alto original para que el video no se deforme. 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 se podrán colocar videos mas grandes y de mejor calidad. Cantidad de cuadros por segundo (fps):
  19. 19. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Otro parámetro definido por el estándar de difusión en la cantidad de cuadros por segundo que tiene el video en NTSC son 29.97 fps y el PAL son 25 fps. Al momento de preparar video para su difusión por Internet u otro medio diferente a la televisión, este es otro aspecto muy importante a tomar en cuenta para lograr una buena relación peso-calidad. Muy pocos cuadros por segundo generará un efecto de parpadeo en la imagen muy desagradable y colocar muchos cuadros por segundo no necesariamente mejorará la calidad pero si influenciará en gran medida el peso del archivo. Para medios interactivos se suele trabajar a 15 cuadros por segundo. Adicional a los aspectos relacionados con la imagen debemos también tomar en 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 a partir de estas muestras. Como vimos en el caso del video se toman entre 25 a 30 “fotos” en un segundo para poder obtener una sensación de movimiento fluido. Para el audio en número de muestras a ser tomadas aumenta considerablemente, un audio de buena calidad requiere de 44.100 muestras por segundo. Figura 3. Ejemplo de un digitalización de una onda de audio. Los puntos sobre la onda representan los valores de la amplitud tomados en cada intervalo de tiempo. Tomado de wikipedia.org Para representar la calidad o resolución del audio se utiliza una media de frecuencia: el hercio. Un hercio significa “un ciclo por cada segundo, entendiendo ciclo como la repetición de un evento” en nuestro caso el evento es la muestra de la amplitud de la onda de audio. Además de las características propias del video, referentes a la imagen y al sonido, al momento de preparar video para Internet u otros medio interactivos debemos 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 de alta calidad o esta dispuesto a sacrificarla por un menor tiempo de espera?, un ejemplo de esto lo podemos ver el sitio de trailers de películas de Apple comparado con you tube. En ambos sitios se difunden videos pero la calidad y tiempo de espera son radicalmente diferentes. El ancho de banda suele un parámetro común entre los compresores de video para los diferentes formatos adecuados para la difusión por Internet. En la
  20. 20. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II siguiente parte veremos los formatos más usados y los parámetros de compresión de cada uno de ellos. Formatos de video para aplicaciones multimedia para Internet Streaming WMV (Windows media video) Este formato fue desarrollado por Microsoft y se ha convertido en uno de los formatos más populares para la difusión de video por Internet, entre otras cosas porque es reproducido por Windows Media Player y es fácilmente integrado en páginas web. Este formato incluye varios “codecs” sin embargo el mas usado es el wmv9. Al ser un formato especialmente diseñado para Internet el parámetro de configuración al que debemos prestar mayor atención es al bitrate, lo que podemos traducir como “tasa de transferencia”. El bitrate esta determinado por el ancho de banda de nuestro público-objetivo. Hoy en día es seguro codificar a 512 kbps si el video va ser colocado en un servidor compartido en Internet y entre 700 y 1024 kbps si se encuentra en una intranet corporativa que disfrute de velocidades superiores, para aplicaciones en CD-ROM fuera de línea podemos codificar a partir de los 1200 kbps hasta 3000 kbps si el video no es muy largo. Figura 4. Ejemplo de una configuración de codificación para video en Internet utilizando el formato WMV. Tomado de Sony Vegas 6.0b Una configuración típica para un video en Internet (Figura 4) sería por ejemplo:
  21. 21. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Tamaño: 360x240 (50% de DV-NTSC) Cuadros por segundo: 14.985 (50% de NTSC) Bit Rate del video: 512 Kbps Atributos del audio: 96 Kbps, 44 khz MOV (Quicktime Movie) Este formato, desarrollado por Apple, cuenta con varios codecs adaptados para su uso en Internet al igual que su competidor wmv. Su uso esta muy difundido sin embargo los usuarios deben instalar el player para poder reproducir los videos en este formato. Aunque el player es gratuito al igual que reproductor para Windows no es seguro suponer que todos los usuarios que utilicen un sistema operativo diferente del Mac OS lo tendrán instalado. Las películas de Quicktime pueden poseer una muy alta calidad con tasas de transferencias 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 un computador apple. Aunque es posible generarlo en PC basados en Windows el resultado no suele ser muy bueno. 2.- La difusión (streaming) de este formato funciona idealmente en servidores apple, esto limita en buena medida posibilidades de hospedaje del sitio web. 3.- Los usuarios deben instalar el reproductor Quicktime lo que puede limitar a nuestra audiencia. Los parámetros a tomar en cuenta para la compresión son similares a los de wmv en cuanto a tamaño, cuadros por segundo, parámetros de audio. En general no se puede especificar una tasa de transferencia al momento de la compresión, esto puede variar con los diferentes compresores que se utilicen. Podemos decir que si bien Quicktime con h.264 puede genera una mejor calidad 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 BELLO Escuela de Comunicación Social Informática II REAL VIDEO Este formato fue desarrollado por la compañía RealNetworks, hacia finales de los 90`s fue muy popular su uso para la difusión de video por Internet, sin embargo su popularidad ha decaído en beneficio de otros formatos. El mayor inconveniente con este formato es que tanto la tecnología de servidor como la del reproductor son propietarias, lo que limita en gran medida la posible audiencia y el alojamiento del sitio web. El uso del Real Player es significativamente menor que el Quicktime y el Windows Media Player. FLASH VIDEO (FLV) Este formato fue desarrollado por Macromedia, ahora Adobe, se ha convertido en uno de los formatos mas usados en Internet para la difusión de video. Entre los sitios populares que utilizan este formato encontramos a YouTube, Google Video, Reuters.com, Yahoo! Video, MySpace entre otros. Una de las mayores ventajas es que es reproducido por el Flash Player que se encuentra instalado en casi todas las computadoras del mundo. En general este formato es de buena calidad para tasas de transferencias bajas, esto lo hace ideal para sitios muy frecuentados donde la velocidad de descarga sea lo más importante. La compresión de realiza mediante el Flash Video Encoder (ver figura 5) que viene con la instalación de Adobe Flash Profesional o directamente en el ambiente de autoría de Flash. Al momento de configurar utilizando este compresor el parámetro al que debemos prestar mayor atención es al de “calidad” que es equivalente a la tasa de transferencia (bitrate) a menor calidad más rápido se cargará el video y mayor bitrate mejor será la calidad. Igualmente se pueden ajustar el tamaño de la película y la cantidad de cuadros por segundo. Una configuración típica para un video en un sitio web alojado en un servidor público y que será visitado por usuarios desde Internet: Tamaño: 360x240 Cuadros por segundo: 15 Bit Rate del video: 400 Kbps Atributos del audio: 96 Kbps
  23. 23. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Figura 5. Pantallas de configuración del Flash Video Encoder. Links de interés En wikipedia Artículo sobre audio digital: http://es.wikipedia.org/wiki/Audio_digital Artículo sobre el Hercio http://es.wikipedia.org/wiki/Hercio Artículo sobre onda sonora http://es.wikipedia.org/wiki/Onda_sonora Artículo sobre el formato wmv http://en.wikipedia.org/wiki/Windows_Media_Video Artículo sobre Quicktime http://en.wikipedia.org/wiki/.mov#QuickTime_file_format
  24. 24. UNIVERSIDAD CATÓLICA ANDRES BELLO Escuela de Comunicación Social Informática II Artículo sobre Real Video http://en.wikipedia.org/wiki/Real_Video Artículo sobre Flash Video http://en.wikipedia.org/wiki/Flash_video Animación para Internet Uso de la animación en sitios web Principios de animación Publicación y mantenimiento de sitios web Dominios Protocolos Uso del FTP Buenas prácticas

×