MÓDULO II: CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DE SOFTWARE DE DISEÑO.

SUBMÓDULO III. ELABORACIÓN DE PÁGINAS WEB

Como es normal el HTML, como cualquier otro lenguaje, no está terminado ni lo estará nunca. Día a día se le van implementando nuevas utilidades que lo hacen más práctico. la posibilidad de mostrar vídeo o sonido en un documento HTML esta limitada a la capacidad y a la configuración del navegador, también es indispensable que la computadora tenga instalada una tarjera de sonido y unas bocinas para poder reproducir los sonidos.

La forma básica de incluir un fichero de un formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicación externa que trate este tipo de ficheros. El navegador tendrá definida una lista aplicaciones que trabajarán con los formatos más comunes de fichero de vídeo, audio o imágenes.

INSERTAR SONIDO Y VIDEO

MOZILLA FIREFOX

Si utiliza MOZILLA FIREFOX, la etiqueta que debe emplear es <EMBED> junto a un buen número de tributos: SRC, AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME, WIDTH, HEIGHT, ALIGN, CONTROLS y HIDDEN.

Sintaxis:<EMBED SRC=“Archivo de Sonido” WIDTH=w HEIGHT=h>

De donde:Archivo de Sonido: es la ruta completa del archivo de sonido, bien sea local en su PC, o bien una localización remota.w y h: son valores enteros que expresan la anchura y la altura en pixeles, respectivamente, de una pequeña consola que aparece en el navegador, y que posee unos pequeños botones (stop, play, pause y control de volumen entre otros).

Pueden utilizarse indistintamente ficheros de sonido con los formatos WAV, AIFF, AU, MP3 o MIDI. En Windows los más utilizados normalmente son los .WAV o los .MID.

Ejemplos: (solo necesitas copiar los ejemplos en el bloc de notas y cambiar el nombre del archivo de audio)

<EMBED SRC="mozart.mid" WIDTH=37 HEIGHT=22 CONTROLS=PLAYBUTTONNAME="misonido" MASTERSOUND>

<EMBED SRC="mozart.mid" WIDTH=37 HEIGHT=22 CONTROLS=STOPBUTTONNAME="misonido">

<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 AUTOSTART=TRUE>

<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 HIDDEN=TRUE>

<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 LOOP=2>

<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70 STARTTIME=01:10 ENDTIME=02:00>

MICROSOFT INTERNET EXPLORER

Para este navegador se utiliza una etiqueta distinta, denominada <BGSOUND>, aunque las versiones actuales de Internet Explorer reconocen la etiqueta <EMBED>, así que los ejemplos anteriores también son validos para este navegador.

Sintaxis:

<BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>

El fichero de sonido puede estar en formato .mp3, .mid o .wav. El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar el fichero de sonido. Si se escoge el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez.

Activación del sonido por el propio usuario

Hasta aquí hemos visto cómo poner un sonido de fondo en una página. Hay otra opción, mucho más sencilla, y es la de poner un enlace a un fichero de sonido, de tal manera, que al pulsarlo se ejecute el fichero.

<A HREF="mi_sonido.mid">musica</A>

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. Esto es válido para todos los navegadores, incluso las versiones más antiguas, con la única condición de que se haya configurado un programa auxiliar capaz de ejecutar ficheros .mid o .wav.

Vamos a hacer un enlace con el icono sound1.gif al fichero de sonido problemo.wav:

<A HREF="problemo.wav"><IMG SRC="sound1.gif"></A>

Al igual que con el sonido, se utiliza el elemento EMBED, aunque con menos atributos: SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN; todos ellos funcionan de forma parecida a los del sonido.

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 ysonido, aunque con un nivel de compresión diferente, y peor sincronización con el sonido. Habitualmente los ficheros .MPG se suelen encontrar sin sonido.

En este ejemplo se utilizan casi todos:<EMBED SRC="colon.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE LOOP=FALSE>

Paginas con video

Analicémoslos brevemente:SRC Indica dónde está el fichero de vídeo. HEIGHT (alto) y WIDTH (ancho) no pueden omitirse, ya que sus valores por defecto no permiten ver ninguna imagen real.Los tamaños standard de los ficheros .AVI son 90x120, 120x160, 180x240, 240x320, 300x400, etc., las medidas deben conservar las proporciones de la televisión, es decir 4:3. Hay que tener cuidado a la hora de poner el valor de estos atributos, ya que si no coinciden con los que realmente tiene la imagen, ésta será recortada (no redimensionada) de derecha a izquierda y de abajo a arriba.El siguiente atributo es AUTOSTART, con dos valores posibles: FALSE (por defecto) y TRUE que como puedes suponer, sirve para que el vídeo arranque nada más cargarse el fichero. Si estableces FALSE, entonces el vídeo se activa al hacer click con el ratón sobre él, lo mismo que para repetir el pase una vez finalizado.Para hacer que el vídeo se repita continuamente o se pare después de un pase, tenemos el atributo LOOP con dos valores: FALSE (por defecto) y TRUE.Por último tenemos el atributo ALIGN y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT,MIDDLE y TEXTTOP que funcionan igual que sus respectivos del elemento IMG, es decir, que no tiene efectos sobre el vídeo, sino sobre su alineación con el texto de la página.

IMG DYNSRC ...> Reproducción de vídeo

<IMG DYNSRC=“Archivo de sonido" LOOP= n ó INFINITE CONTROLS START= FILEOPEN ó MOUSEOVER>

En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez de mostrar una imagen mostrará un vídeo en formato AVI (Vídeo for Windows), se puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, además se podrá variar el tamaño del vídeo con los atributos HEIGHT y WIDTH.

Se añaden otros atributos que solo se pueden aplicar al vídeo, el atributo IMGSRC indica la URL del fichero que se mostrará, el atributo LOOP indica el número de veces que se mostrará el vídeo, el atributo CONTROLS indicará si se mostrarán los botones de control, que permitirán para, volver a reproducir, rebobinar, .... El atributo START indica si la secuencia de vídeo empezará al abrir el fichero (FILEOPEN) o cuando pase el cursor del ratón encima (MOUSEOVER).

De no poder mostrar el vídeo por tratarse de otro navegador (por ejemplo Netscape), se podrá indicar una imagen que se muestre de manera alternativa, incluyendo el atributo SRC.

Plug-in's

Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modo especifico, dado por ejemplo la capacidad de mostrar vídeo, audio, ficheros de un determinado formato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...). No existe actualmente un conjunto estándar de plug-in´s para cada tipo de ficheros, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribución. Se puede asegurar que todas las aplicaciones serán compatibles y si por ejemplo se referencia un fichero de sonido en formato .wav en su página, este podrá ser oído por todos aquellos que tengan un plug-in para este tipo de ficheros.

Es muy posible que en muchas ocasiones hayas visto páginas web en las que se puede mandar e-mail´s a sus autores o al webmaster para colaborar, dejar las críticas, o cualquier cosa.

Servicios de Correo Electrónico

La forma más sencilla de ponernos en contacto con ellos es mediante e-mail.

Una posible opción sería poner nuestra dirección de correo al final de la página y que lagente que quisiera comunicarse con nosotros la escribiera en su programa de correo, pero esto no es demasiado cómodo y puede que alguien escriba mal nuestra dirección y que nunca nos llegue su comentario.

Para ello, y como segunda opción, está el comando HTML

<a href="mailto:destinatario"> (donde destinatario por supuesto será una dirección de correo válida).

<A HREF="mailto: dirección de email"> Texto del enlace </A>

Como se puede observar, el comando HTML no es más que un link normal y corriente en el que la dirección de destino no es más que una dirección de correo electrónico. Por tanto, este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto, texto, ...)

<a href="mailto:contacto@compservicios.com"> Contacto a oficinas</a>

Ejemplos para copiar en el bloc de notas y guardar como index.html:

Esta orden abre el programa de correo predeterminado (Outlook, Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. Dicho mensaje ya tiene escrita la dirección del destinatario (que es la que nosotros pusimos después de "mailto:").

Comentarios a <A HREF="mailto: info@igf.es"> Instituto Gallego de Formación</A>

Sugerencias a <A HREF="mailto: webmaster@cecyteo.edu.mx"> WebMaster CECyTEO</A>

Frames

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.

Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas.

A continuación observaremos una imagen ilustrativa del uso de los Frames o Marcos en una pagina web de internet.

Frame 4

Frame 3

Frame 2

Frame 1