Unidad 10. Elementos interactivos y multimedia (I)

Vamos a insertar elementos interactivos y multimedia en nuestras páginas Web. Aprenderemos a utilizar sonidos y animaciones, poner vídeos y otros efectos especiales que mediante código HTML no es posible.

Introducción

Una página Web puede tener distintos tipos de elementos interactivos y multimedia. Un elemento interactivo es un elemento que puede cambiar dependiendo de cómo actúe el usuario. Un elemento multimedia puede ser un sonido, una canción, una animación, un vídeo...

Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en exceso esta clase de elementos hará que la carga de nuestra Web sea lenta y engorrosa, por lo que los visitantes podrían perder el interés. Por lo tanto, hemos de usarlos con mesura.

Existen objetos que son una mezcla de ambos, como son las animaciones Flash. Estas animaciones pueden incluir sonidos e imágenes, y además ser interactivas.

Un problema común, además de la lentitud de carga, es la compatibilidad. No todos los efectos son soportados por todos los navegadores, en especial por los navegadores más antiguos. FrontPage nos ofrece algunas ayudas para resolver este problema. En general, si un navegador no soportara un efecto en particular, sencillamente lo ignora, por lo que en general nuestra Web podrá seguir siendo visitada, aunque sin ese efecto.

Botones para desplazarse

Vamos a ver cómo crear manualmente algunos botones básicos que son muy usados en la mayoría de las páginas web, así como crear botones que en vez de texto contengan imágenes.

Los primeros botones que vamos a crear son:

Botón Atrás: vuelve a la página anterior, si la hubo.

Botón Siguiente: vuelve a la página de la que volvemos, si la hubiese.

Botón Subir/Bajar: En una página web extensa, nos permite desplazarnos arriba y abajo instantáneamente.

Para crear un botón Atrás, hacemos clic en el lugar dónde queremos que esté el botón.

Entonces hacemos clic en la vista HTML para ver el código y, en el lugar dónde se encuentre el cursor, añadimos esto:

<FORM><INPUT TYPE="button" VALUE="Atrás" onClick="history.back()"></FORM>

Si lo que queremos es un botón Siguiente, hacemos lo mismo con:

<FORM><INPUT TYPE="button" VALUE="Adelante" onClick="history.forward()"></FORM>

Estos son los botones:

history.back --> mira en el histórico del navegador y accede a la anterior página visitada.

history.forward --> realiza el caso contrario, mira en el histórico del navegador y accede a la siguite página.

Ahora vamos a hacer algo más sofisticado: vamos a crear un botón para desplazarnos por la página. Se trata del típico botón Subir/Bajar.

Para crear el botón, hacemos clic en Insertar y después en Componente Web.

En el cuadro de diálogo Insertar componente Web que aparecerá elegimos Efectos dinámicos y Botón interactivo aunque también podemos hacer clic directamente sobre el botón Botón interactivo... del menú Insertar.

En sus propiedades, ponemos lo que queramos que salga en el botón en Texto del botón:.

Para crear un vínculo al ancla, escribimos su nombre predecido del símbolo #. Supongamos que el ancla que hemos creado se llama ancla (en un alarde de originalidad). Como vemos en el dibujo en el campo Vínculo, hemos escrito #ancla.

El resto de opciones las configuramos como queramos.

Podemos poner tantas anclas como queramos, siempre que no mezclemos sus nombres.

Como ejemplo, al pulsar este botón iremos hacia arriba, al principio del apartado.

Pág. 10.1