SlideShare una empresa de Scribd logo
1 de 24
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
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.
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
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.
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).
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>
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:
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)
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.
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).
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.
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
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.
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
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).
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
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.
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):
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
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:
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.
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
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
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

Más contenido relacionado

La actualidad más candente (18)

Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Clase10
Clase10Clase10
Clase10
 
Dreamweaver Interfaz
Dreamweaver InterfazDreamweaver Interfaz
Dreamweaver Interfaz
 
Windows presentation foundation
Windows presentation foundationWindows presentation foundation
Windows presentation foundation
 
Investigacion de Aplicacion Informatica I
Investigacion de Aplicacion Informatica IInvestigacion de Aplicacion Informatica I
Investigacion de Aplicacion Informatica I
 
Repaso final de certificación dw
Repaso final de certificación dwRepaso final de certificación dw
Repaso final de certificación dw
 
La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
 
PROYECTO GRUPO 6
PROYECTO GRUPO 6PROYECTO GRUPO 6
PROYECTO GRUPO 6
 
Ipn Manual Identidad web
Ipn Manual Identidad webIpn Manual Identidad web
Ipn Manual Identidad web
 
Wpf
WpfWpf
Wpf
 
Clase6
Clase6Clase6
Clase6
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Colegio josé maría velaz
Colegio josé maría velazColegio josé maría velaz
Colegio josé maría velaz
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trocha
 

Similar a Compresión de video

Similar a Compresión de video (20)

Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Manual css-hojas-estilo
Manual css-hojas-estiloManual css-hojas-estilo
Manual css-hojas-estilo
 
Manual css
Manual cssManual css
Manual css
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Articulo monica y christian "español"
Articulo monica y christian "español"Articulo monica y christian "español"
Articulo monica y christian "español"
 
"MENUS CSS"
"MENUS CSS""MENUS CSS"
"MENUS CSS"
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Diseño web
Diseño webDiseño web
Diseño web
 
Manual css 01
Manual css 01Manual css 01
Manual css 01
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Presentacióin tema 6
Presentacióin tema 6Presentacióin tema 6
Presentacióin tema 6
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Manual de css
Manual de cssManual de css
Manual de css
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
 
Presentación1
Presentación1Presentación1
Presentación1
 
Mi primer pagina web
Mi primer pagina webMi primer pagina web
Mi primer pagina web
 
Css hojas de-estilo
Css hojas de-estiloCss hojas de-estilo
Css hojas de-estilo
 
Accesibilidad
Accesibilidad Accesibilidad
Accesibilidad
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 

Más de Francisco Berrizbeitia

Evaluación de diferentes estrategias de muestreo para tratar el problema de ...
Evaluación de diferentes estrategias de muestreo  para tratar el problema de ...Evaluación de diferentes estrategias de muestreo  para tratar el problema de ...
Evaluación de diferentes estrategias de muestreo para tratar el problema de ...Francisco Berrizbeitia
 
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...Francisco Berrizbeitia
 
News construction from microblogging posts using open data
News construction from microblogging posts using open data News construction from microblogging posts using open data
News construction from microblogging posts using open data Francisco Berrizbeitia
 
News construction from microblogging post using open data
News construction from microblogging post using open dataNews construction from microblogging post using open data
News construction from microblogging post using open dataFrancisco Berrizbeitia
 
Trabajo 1 - Definición de un sitio web de contenido multimedia
Trabajo 1 - Definición de un sitio web de contenido multimediaTrabajo 1 - Definición de un sitio web de contenido multimedia
Trabajo 1 - Definición de un sitio web de contenido multimediaFrancisco Berrizbeitia
 
Introducción al el mercadeo en Internet
Introducción al el mercadeo en InternetIntroducción al el mercadeo en Internet
Introducción al el mercadeo en InternetFrancisco Berrizbeitia
 
2013 digital future_in_focus_venezuela
2013 digital future_in_focus_venezuela2013 digital future_in_focus_venezuela
2013 digital future_in_focus_venezuelaFrancisco Berrizbeitia
 
Tiene sentido crear contenido audiovisual para ser difundido exclusivamente ...
Tiene sentido crear contenido audiovisual para ser difundido  exclusivamente ...Tiene sentido crear contenido audiovisual para ser difundido  exclusivamente ...
Tiene sentido crear contenido audiovisual para ser difundido exclusivamente ...Francisco Berrizbeitia
 
Caracterización de la popularidad de los archivos de un wiki a gran escala v3
Caracterización de la popularidad de los archivos de un wiki a gran escala v3Caracterización de la popularidad de los archivos de un wiki a gran escala v3
Caracterización de la popularidad de los archivos de un wiki a gran escala v3Francisco Berrizbeitia
 
Formación en salud y seguridad industrial llave en mano
Formación en salud y seguridad industrial llave en manoFormación en salud y seguridad industrial llave en mano
Formación en salud y seguridad industrial llave en manoFrancisco Berrizbeitia
 
Trabajo 1 - Conceptualización del proyecto de difusión audiovisual
Trabajo 1 - Conceptualización del proyecto de difusión audiovisualTrabajo 1 - Conceptualización del proyecto de difusión audiovisual
Trabajo 1 - Conceptualización del proyecto de difusión audiovisualFrancisco Berrizbeitia
 

Más de Francisco Berrizbeitia (20)

Evaluación de diferentes estrategias de muestreo para tratar el problema de ...
Evaluación de diferentes estrategias de muestreo  para tratar el problema de ...Evaluación de diferentes estrategias de muestreo  para tratar el problema de ...
Evaluación de diferentes estrategias de muestreo para tratar el problema de ...
 
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...
Un enfoque de aprendizaje automático supervisado para el etiquetado de mensaj...
 
News construction from microblogging posts using open data
News construction from microblogging posts using open data News construction from microblogging posts using open data
News construction from microblogging posts using open data
 
News construction from microblogging post using open data
News construction from microblogging post using open dataNews construction from microblogging post using open data
News construction from microblogging post using open data
 
Autosimilaridad en vinculaciones
Autosimilaridad en vinculacionesAutosimilaridad en vinculaciones
Autosimilaridad en vinculaciones
 
Vinculaciones autosimilares
Vinculaciones autosimilaresVinculaciones autosimilares
Vinculaciones autosimilares
 
Trabajo 1 - Definición de un sitio web de contenido multimedia
Trabajo 1 - Definición de un sitio web de contenido multimediaTrabajo 1 - Definición de un sitio web de contenido multimedia
Trabajo 1 - Definición de un sitio web de contenido multimedia
 
Introducción al el mercadeo en Internet
Introducción al el mercadeo en InternetIntroducción al el mercadeo en Internet
Introducción al el mercadeo en Internet
 
¿ Cómo empezar con mi sitio web?
¿ Cómo empezar con mi sitio web?¿ Cómo empezar con mi sitio web?
¿ Cómo empezar con mi sitio web?
 
2013 digital future_in_focus_venezuela
2013 digital future_in_focus_venezuela2013 digital future_in_focus_venezuela
2013 digital future_in_focus_venezuela
 
Tiene sentido crear contenido audiovisual para ser difundido exclusivamente ...
Tiene sentido crear contenido audiovisual para ser difundido  exclusivamente ...Tiene sentido crear contenido audiovisual para ser difundido  exclusivamente ...
Tiene sentido crear contenido audiovisual para ser difundido exclusivamente ...
 
Caracterización de la popularidad de los archivos de un wiki a gran escala v3
Caracterización de la popularidad de los archivos de un wiki a gran escala v3Caracterización de la popularidad de los archivos de un wiki a gran escala v3
Caracterización de la popularidad de los archivos de un wiki a gran escala v3
 
Formación en salud y seguridad industrial llave en mano
Formación en salud y seguridad industrial llave en manoFormación en salud y seguridad industrial llave en mano
Formación en salud y seguridad industrial llave en mano
 
Listado de cursos manual rse
Listado de cursos manual rseListado de cursos manual rse
Listado de cursos manual rse
 
Text mining
Text miningText mining
Text mining
 
AID Aprendizaje - Nosotros
AID Aprendizaje - NosotrosAID Aprendizaje - Nosotros
AID Aprendizaje - Nosotros
 
Keylight ae user guide
Keylight ae user guideKeylight ae user guide
Keylight ae user guide
 
Personalizacion de blogspot
Personalizacion de blogspotPersonalizacion de blogspot
Personalizacion de blogspot
 
Trabajo 1 - Conceptualización del proyecto de difusión audiovisual
Trabajo 1 - Conceptualización del proyecto de difusión audiovisualTrabajo 1 - Conceptualización del proyecto de difusión audiovisual
Trabajo 1 - Conceptualización del proyecto de difusión audiovisual
 
Clase 3 estrategias de difusion
Clase 3   estrategias de difusionClase 3   estrategias de difusion
Clase 3 estrategias de difusion
 

Compresión de video

  • 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