MULTIMEDIA EN INTERNET

Realizado por: Velásquez Sánchez Lily
Videos

El formato de vídeo utilizado es el AVI de Windows, que como es sabido, incluye imágenes y sonido digitales.
El mayor problema de los ficheros digitales de vídeo es el gran tamaño de los mismos, ya que en la práctica unos pocos segundos de vídeo con sonido puede representar un fichero de varios Mb. (mega bytes), en realidad es como si se trataran dos ficheros separados, uno con el sonido y otro con las imágenes, pero sincronizados. No hay que confundir este formato AVI con el MPEG, que también puede integrar imágenes y sonido, aunque con un nivel de compresión diferente, y peor sincronización con el sonido. Habitualmente los ficheros .MPG se suelen encontrar sin sonido.

Al utilizar estos videos en nuestra pagina debemos tener cuidado porque como se explico anteriormente son de gran tamaño, lo cual puede hacer que nuestra pagina se demore mucho en abrirse lo que puede ocasionar que el visitante se desepere y se salga de nuestra pagina

Los conocimientos que teniamos hasta el momento no nos permitain manejar elementos de multimedia, solo nos permitian insertar imagenes, colocar un ancla, darle color al fondo,ec. Pero en estos momentos comenzaremos a manejar el concepto de multimedia y Plug-ins(Son programas que permiten tratar diversos tipos de ficheros, de esta forma podrá insertarse estos tipos de ficheros dentro de una página HTML, permitiendo mostrar vídeo en distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid,), incluir ficheros de Adobe Acrobat (pdf), mostrar ficheros VRML, etc... )

La etiqueta utilizada para insertar un video en tu WEB es EMBED> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene el video a insertar.

Formatos de vídeo

  • AVI (Microsoft)
  • Quicktime (Apple)
  • MPEG (Motion Picture Experts Group)

Sonidos

Una página Web puede tener sonidos incorporados, bien sea como un fondo sonoro(se ejecuta automáticamente al cargar la página), o como una opción para que el visitante la active.

El Internet Explorer está mejor adaptado para el sonido, pues a partir su versión 2.0 fue capaz de reproducir fondos sonoros sin necesidad de añadir nada, y no hay ninguna complicación con los servidores, como con el Netscape. Además, a partir su versión 3.0, es compatible con los plug-ins del Netscape. El archivo de sonido puede ser un MIDI(musical instrument digital interface) o un .WAV(waveform audio)

Formatos de audio

  • AU (Audio File Format o Sun audio)
  • WAV (Waveform Audio File Format, formato estándar en el entorno Windows)
  • AIFF (Audio Interchange File Format, común en el entorno Mac Os)
  • RA (Real Audio, que permite la difusión de sonido en tiempo real)
  • MIDI (Musical Instrument Digital Interface)

Imágenes

Antes de empezar a decirte como se inserta una imágenen en tu pagina WEb primero te enseñare como esta la puedes guardar en tu dísco duro.

1.Hacer click con el botón derecho sobre la imagen.
2.Elija "guardar como..." (save as...) del menú archivo
3.Darle la dirección de el directorio donde lo quiere guardar y salve.

Las imágenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la enbellécen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de imágenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imágenes en la Web son un arma de doble filo. Una buena imagen puede llamar la atención y ser de gran utilidad para ilustrar o para atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos kilobytes de tamaño) puede espantar hasta al más voluntarioso de los navegantes.

La segunda es que el visitante haya deshabilitado la carga automática de imágenes lo cual podría ser muy perjudicial si hemos escogido imagenes para explicacion de algo, o como link,etc.

En cuanto a las imagenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado así por sus siglas en inglés, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarrolló, el Joint Photograph Expert Group).

El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imágenes entre sí a través de la Red. Para almacenar la información, el GIF utiliza 8 bits (unidades de información) por cada pixel . Como cada bit tiene dos estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la mayoría de los monitores tienen capacidad para representar por lo menos 256 colores en pantalla , el formato GIF funciona de manera razonable.

Por otro lado, el formato JPG fue creado especialmente para almacenar imágenes con calidad fotográfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores más extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es más pesados, ya que posee un mecanismo de compresión que reduce el tamaño del archivo mediante cierta pérdida en la información.

Como regla general, conviene utilizar archivos con extensión JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un GIF

 Animación

Existen dos formas básicas de realizar animaciones para la web: las animaciones GIF y las animaciones vectoriales.

Animación GIF

El formato GIF permite almacenar varias imágenes en un mismo fichero. Al cargar éste las imágenes se van sucediendo en la pantalla, pudiéndose controlar tanto el tiempo que cada una de las imágenes permanece en la misma como la forma en la que se superpone a la anterior.

La última imagen se puede enlazar con la primera, produciéndose en tal caso una animación continua.

Para incluir un GIF animado en una página web se utiliza el mismo elemento IMG:

   <IMG SRC="gifanim.gif" ALT="Rótulo animado">

Ejemplo: rótulo que va mostrando distintos mensajes.


Los navegadores que no soportan GIF animados mostrarán bien la primera o bien la última imagen de la secuencia, por lo que conviene que ambas coincidan.

Animaciones vectoriales

Las animaciones GIF tienen una capacidad limitada y pueden originar ficheros grandes.

Para resolver estos problemas surgieron las animaciones vectoriales, basadas en la tecnología shockwave desarrollada por Macromedia. Esta tecnología permite crear animaciones muy sofisticadas y a la vez con un tamaño reducido.

Las animaciones shockwave tienen otras dos virtudes importantes: son escalables y utilizan la técnica de streaming que permite que la animación comience a reproducirse antes de ser descargada por completo.

Para crear una animación vectorial es preciso disponer de los programas Macromedia Flash o Macromedia Director.

Ambos programas generan ficheros con las extensiones .swf (Flash) y .dcr (Director) que han de ser incluidos en la página mediante el elemento EMBED.

Ejemplo:

<EMBED SRC="animaciones/Película1.swf" QUALITY="high" BGCOLOR="#FFFFFF"
 WIDTH="400" HEIGHT="100"
 TYPE="application/x-shockwave-flash"
 PLUGINSPAGE="http://www.macromedia.com/shockwave/download">
</EMBED>

Mapas sensibles

Un mapa sensible es una imagen en la que se definen una serie de regiones tales que al hacer click con el ratón sobre ellas se activa un enlace a otro documento.

Los mapas sensibles son muy útiles para crear metáforas, que son representaciones visuales cercanas al usuario y relacionadas con el tema de la página.

Existen dos tipos de mapas sensibles según dónde se realiza el procesamiento de las coordenadas:

  • Mapas sensibles del lado del servidor
  • Mapas sensibles del lado del cliente.

Mapas sensibles del lado del cliente

Para crear un mapa sensible hacen falta dos cosas: la imagen del mapa, que se incluye con el elemento IMG

   <IMG SRC="fichero de imagen.gif" USEMAP="#nombre_del_mapa">

y la definición de las regiones del mapa, que se realiza con el elemento MAP:

   <MAP NAME="nombre_del_mapa">
      <AREA SHAPE="forma_del_área" COORDS="coordenadas" HREF="URL"
         ALT="texto_alternativo">
      ...
   </MAP>

La conexión entre la imagen y el mapa se realiza a través del atributo USEMAP.

Definición de las regiones del mapa

Dentro del elemento MAP las regiones se definen mediante el elemento AREA, que tiene los siguientes atributos:

  • SHAPE: forma de la región. Puede tomar los valores "rect" (rectángulo), "circle" (círculo), "poly" (polígono) y "default". Este último valor indica el comportamiento si se hace click en un área de la imagen indefinida.
  • COORDS: coordenadas que definen la región, expresadas en pixels, y que dependen del tipo de la región:
    • SHAPE="rect": COORDS="x1, y1, x2, y2", siendo x1, y1 las coordenadas de la esquina superior izquierda y x2, y2 las coordenadas de la esquina inferior derecha.
    • SHAPE="circle": COORDS="xc, yc, r", siendo xc, yc las coordenadas del centro del círculo y r el radio.
    • SHAPE="poly": COORDS="x1, y1, x2, y2, ..., xn, yn", siendo xi, yi las coordenadas del vértice i del polígono.

La esquina superior izquierda de la imagen es el punto (1,1).

  • HREF: URL del documento enlazado.
  • ALT: texto alternativo. Se muestra al pasar el cursor por encima de la región.

Como ejemplo, sea un mapa sensible con imágenes de monumentos. Pulsando sobre cualquiera de ellas aparecerá una página dedicada a la ciudad donde se encuentra el monumento.

Ciudades del Mundo



Escenas de realidad virtual

Por realidad virtual se entiende un espacio tridimensional desarrollado y simulado mediante ordenador y que contiene una serie de objetos interactivos. En este mundo virtual el usuario puede moverse, eligiendo el punto de vista que desea e interactuando con los objetos allí presentes y con otros usuarios.

Una página web puede incorporar escenas de realidad virtual. Estas escenas se construyen mediante un lenguaje especial, el VRML (Virtual Reality Modeling Language, lenguaje de modelado de realidad virtual).

Con las escenas de realidad virtual se pueden crear metáforas tridimensionales por las que el usuario puede navegar.

El lenguaje VRML

VRML permite modelar objetos tridimensionales y su comportamiento.

Evolución histórica:

  • VRML 1.0. Silicon Graphics, 1994. Permite describir mundos virtuales estáticos
  • VRML 2.0 (moving worlds), 1996. Aumenta la capacidad descriptiva del lenguaje, Permite especificar comportamientos para los objetos y posibilita su interacción con el usuario
  • VRML 3.0 (living worlds), en desarrollo. Permitirá interactuar con otras personas que estén accediendo al mismo mundo virtual

VRML es un lenguaje de descripción de escenas. Cada escena se compone de objetos. Los objetos pueden ser formas sólidas o elementos intangibles que afectan a la escena como luces, sonido y distintos puntos de vista.

Un documento VRML está compuesto por nodos. Un nodo define las características de un objeto o bien las relaciones entre distintos objetos. Ejemplos: cilindro y grupo de esfera y cono.

No todos los nodos afectan al aspecto visual del mundo. Por ejemplo, existen nodos que actúan como sensores que detectan acciones del usuario e informan de ellas a otros objetos.

Combinando los distintos tipos de nodos existentes se pueden crear escenas tan complejas como se desee

Herramientas para la creación de escenas de realidad virtual

Alternativas para la creación de escenas:

  • Editores de texto
  • Herramientas que permiten crear escenas de manera gráfica y generar el código VRML (Internet 3D Space Builder, VRealm Builder)
  • Herramientas de diseño 3D que exportan sus creaciones en formato VRML (3D Studio Max, Caligari TrueSpace)
  • Herramientas que no generan código VRML, sino un código propietario que precisa la instalación de un componente específico en el navegador (Superscape 3D Webmaster)

Inclusión de una escena de realidad virtual en una página web

Una vez creada la escena y almacenada en un fichero .wrl se puede incluir en la página web utilizando el elemento EMBED:

<EMBED SRC="vrml/grupo.wrl" WIDTH="150" HEIGHT="300">

Aplicaciones de la realidad virtual en la web

Los campos de aplicación de la realidad virtual son casi ilimitados. Ejemplos:

  • Arquitectura
  • Decoración
  • Instrucciones de montaje
  • Ciencias (Medicina, Astronomía, Arqueología, etc)
  • Turismo

 Inclusión de programas

Otra forma de añadir contenido multimedia a una página web consiste en incluir en ella un programa. Esta forma es la más versátil, aunque también la más compleja al requerir un esfuerzo adicional de programación.

Los efectos pueden ser muy interesantes. Por ejemplo, en lugar de limitarnos a ver una secuencia animada con el despegue de un cohete se pueden realizar modificaciones sobre los parámetros del lanzamiento y ver su efecto en la trayectoria del cohete.

Los programas se pueden incluir en la página con el elemento APPLET. No obstante, este elemento sólo permite incluir programas escritos en el lenguaje de programación Java, por lo que el W3C recomienda utilizar en su lugar el elemento OBJECT, que es más genérico.

Elemento APPLET

El elemento APPLET permite invocar un applet de Java desde un documento HTML. Este programa se encuentra en el servidor web, desde donde se carga y se ejecuta en la máquina del usuario.

Un elemento APPLET puede contener dos cosas: elementos PARAM, que especifican posibles parámetros del programa, y otros elementos HTML que serán mostrados por los navegadores que no soporten el elemento APPLET o sean incapaces de ejecutar applets de JAVA.

Atributos más importantes del elemento APPLET:

  • ALIGN: alineación (top, middle, bottom, left, right).
  • CODE: URL del applet
  • CODEBASE: URL donde se deben buscar posibles bibliotecas de clases requeridas por el applet
  • HEIGHT, WIDTH: dimensiones del applet. Son obligatorias
  • HSPACE, VSPACE: espaciado horizontal y vertical
  • ALT: texto alternativo a mostrar cuando no se puede ejecutar el applet

Ejemplo: applet que visualiza una serie de imágenes en secuencia. Al pulsar sobre una imagen aparece la siguiente y así sucesivamente hasta llegar a la última, tras la cual se vuelve a mostrar la primera.

 

El código HTML es el siguiente:

   <APPLET CODE=ImageViewer.class WIDTH="200" HEIGHT="200"
           CODEBASE="applet/">
      <PARAM NAME=images VALUE="sun.gif,
                                   mercury1.gif,
                                   venus2.gif,
                                   earth3.gif,
                                   mars4.gif,
                                   jupiter5.gif,
                                   saturn.gif,
                                   uranus7.gif,
                                   neptune8.gif,
                                   pluto9.gif">
      <BLOCKQUOTE>
         Lo siento, su visualizador no es capaz de ejecutar este applet.
      </BLOCKQUOTE>
   </APPLET>

 Elemento Script:

Los scripts son programas que se incluyen en el propio documento HTML y que son interpretados por el navegador.

Pueden estar escritos en dos lenguajes diferentes: JavaScript, desarrollado por Netscape y Sun, y Visual Basic Script (VBScript), desarrollado por Microsoft.

Microsoft tiene su propia variante de JavaScript, denominada Jscript, que no es 100% compatible con JavaScript. Por tanto siempre es conveniente probar los scripts con distintos navegadores para comprobar su correcto funcionamiento.

Elemento SCRIPT

Para incluir un programa escrito en un lenguaje de script en una página web se utiliza el elemento SCRIPT, que puede aparecer dentro del elemento HEAD o dentro del elemento BODY.

Atributos de SCRIPT:

  • LANGUAGE: lenguaje del script (JavaScript o VBScript).
  • SRC: URL de un fichero que contiene un script que se cargará y será tratado como si estuviera incluido en el documento HTML.

Dentro del elemento SCRIPT se escribe el código del programa. Este código se encierra entre comentarios de HTML para ocultarlo a los navegadores que no reconocen este elemento. Para estos navegadores se puede proporcionar un contenido alternativo mediante el elemento NOSCRIPT:

<SCRIPT LANGUAGE="JavaScript">
<!--
   ... código del programa ...
//-->
</SCRIPT>
<NOSCRIPT>Lo siento, su navegador no soporta scripts</NOSCRIPT>

La doble barra (//) que aparece antes del cierre del comentario de HTML se utiliza para insertar comentarios en JavaScript y se coloca para ocultar esta línea al intérprete de JavaScript.


Comments