SUBMÓDULO III. ELABORACIÓN DE PÁGINAS WEB
INSERTAR SONIDO Y VIDEO
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.
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=PLAYBUTTON
NAME="misonido" MASTERSOUND>
<EMBED SRC="mozart.mid" WIDTH=37 HEIGHT=22 CONTROLS=STOPBUTTON
NAME="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"
ENDTIME=02:00>
WIDTH=160
HEIGHT=70
STARTTIME=01:10
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>
Paginas con video
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 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.
En este ejemplo se utilizan casi todos:
<EMBED SRC="colon.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE LOOP=FALSE>
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.
Servicios de Correo Electrónico
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.
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 la
gente 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>
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:").
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, ...)
Ejemplos para copiar en el bloc de notas y guardar como index.html:
<a href="mailto:[email protected]"> Contacto a oficinas</a>
Comentarios a <A HREF="mailto: [email protected]"> Instituto Gallego de Formación</A>
Sugerencias a <A HREF="mailto: [email protected]"> 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 1
Frame 4
Frame 2
Frame 3