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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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