COMPORTAMIENTOS AVANZADOS

COMPORTAMIENTOS AVANZADOS

Mensajes emergentes

Este comportamiento te permitirá crear avisos emergentes como en el siguiente ejemplo.

Haz clic aquí.

Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario. Mientras se muestre el mensaje, la ventana del navegador quedará bloqueada.

Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un enlace de texto.

Una vez seleccionado ves al panel Comportamientos (Mayus + F4) pulsa el botón  y selecciona la opción Mensaje emergente.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estará listo.

El mensaje se mostrará con un aspecto similar al siguiente (dependiendo del navegador utilizado):

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es más intuitivo para el usuario que si, por ejemplo, asocias el mensaje a un evento onMouseOver(cuando se pase el ratón por encima) el usuario no sabrá muy bien porque se ha generado el mensaje de aviso. Y resultaría muy molesto tener que ir "esquivando" los enlaces por si aparecen mensajes emergentes.

En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el más indicado para este caso.

 Carga previa de imágenes

Este comportamiento te será muy útil para mejorar la visualización de tus páginas web en determinados casos.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador a descargar las imágenes con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el usuario verá la estructura completa de la página con las imágenes incluidas ya cargadas y mostrándose.

Este método se diferencia del tradicional en que si no establecemos este comportamiento, la página se carga (sólo texto) y se visualiza antes de que las imágenes estén cargadas por completo, aunque respetando su hueco. Ten en cuenta que ésta es la opción más aconsejada en la mayoría de los casos.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes. Por lo que hay unos momentos en los que la página no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botón , selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones , podrás indicar su ubicación pulsando el botón Examinar.

¿Qué imágenes debemos de cargar? Aquellas que son imprescindibles en el diseño de la página o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el cursor esté encima esa imagen cambie. Hemos de entender que las imágenes se cargan cuando se necesitan. Por tanto, la imagen de fondo no se cargará hasta que no pasemos el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner el cursor la imagen desaparezca pero la de sustitución aún no se haya cargado. En este caso, es conveniente precargar esa imagen.

La imagen de sustitución que ya explicamos incluye la carga previa de imágenes.

Por su puesto, resulta contraproducente cargar imágenes que no vayamos a emplear.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu página tarda demasiado en cargarse la abandone.

Abrir nueva ventana del navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudará a crear enlaces mucho más personalizados.

Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botón. Pero siempre lo haremos asociado al evento onClick de estos elementos.

Otra opción es asociarlo al evento onLoad del body para que cuando se cargue el documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que queramos.

En esencia este comportamiento es un creador de pop-ups o ventanas emergentes, así que si el usuario dispone de un bloqueador es posible que no se pueda llevar a cabo la apertura de la nueva ventana. De todas formas, no es nada recomendable llenar nuestro sitio de estos elementos, salvo si realmente aportan información importante.

Por ejemplo, si haces clic en la siguiente línea se abrirá una ventana con la página principal de aulaClic.

Nueva ventana

Pero veamos qué debemos hacer para poder abrir una ventana de este modo.

Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es que se asocie al body de la página haremos clic en una área vacía del documento.

Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botón  para desplegar la lista.

Selecciona la opción Abrir ventana del navegador y verás el siguiente cuadro de diálogo:

Veamos las opciones que podemos seleccionar aquí.

 En Mostrar URL: escribiremos la URL de la página que queremos abrir.

 En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamaño en píxeles.

 El cuadro Nombre de la ventana: te permitirá darle un nombre a la nueva ventana. Así, más tarde, utilizando JavaScript, podríamos referenciarnos a ella utilizando este nombre.

 En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de menús aparezcan en la nueva ventana.

Si dejas todos desmarcados, la ventana se abrirá sin ningún elemento y aparecerá únicamente rodeada de un marco de página.

Cambiar propiedades CSS

Este comportamiento nos resultará muy útil, ya que nos permite cambiar las propiedades CSS de un elemento al producirse un evento.

Las siguientes capas cambiarán su color si hacemos clic sobre ellas:

Para poder identificar al elemento al que cambiaremos sus propiedades, hemos de asignarle un ID.

Luego seleccionamos el elemento asociado, sobre el que se producirá el evento. Abrimos el panel Comportamientos (Mayus + F4) y pulsamos el botón  para desplegar la lista.

En este caso seleccionamos el comportamiento Cambiar propiedad. Aparecerá un diálogo como el siguiente:

Lo primero es identificar al elemento. Seleccionamos un Tipo de elemento del desplegable. En ID de elemento se cargaran todos los IDs del tipo seleccionado. Seleccionamos el que nos interese.

A continuación, seleccionamos una propiedad del desplegable Seleccionar o la escribimos en el campo Introducir. E indicamos el valor que tomará en el campo Nuevo valor:.

La pega de este sistema es que nos permite cambiar sólo una propiedad.

Recuerda que comentamos la existencia de pseudoclases CSS. Empleando el selector selector:hover, podemos definir un estilo completo que se mostrará cuando el elemento tenga el cursor encima. Veremos esto en la siguiente unidad.