Adjuntar comportaments

Interactuar

L'evolució del disseny web i de les diferents aplicacions i programes dedicats al susdit efecte, ha reflectit progressivament la constant demanda de continguts hipermèdia per part dels usuaris. Un gran nombre d'usuaris espera poder interactuar, modificar i fins i tot personalitzar la creació que es troba a la seva disposició.

Afegir moviments a partir d'una acció de l'usuari/ària, iniciar i controlar fenòmens que es desenvolupen al llarg d'un temps, comprovar el navegador de l'usuari/ària per personalitzar-ne l'accés al lloc web..., són algunes de les possibilitats d'interacció que es troben a les mans dels dissenyadors.

Al Dreamweaver MX 2004 disposeu d'una eina per generar aquestes interaccions. Es tracta dels anomenats Comportamientos. Podeu definir un comportament (comportamiento) com la suma d'un esdeveniment (evento) i una acció. Per exemple, moure el ratolí per sobre dels botons de navegació d'aquesta pàgina suposa un esdeveniment, i el canvi de color d'algunes zones suposa una acció. 

Quan adjunteu un comportament a un element d'una pàgina, heu d'especificar tant l'acció com l'esdeveniment que activa l'acció. Un mateix esdeveniment pot activar més d'una acció. Totes les accions són al seu interior codis JavaScript predefinits que fan tasques específiques. De tota manera, són els navegadors els que acaben establint el funcionament d'un esdeveniment definit a l'interior d'una pàgina web, ja que no tots els navegadors reconeixen els mateixos ni es comporten de la mateixa manera davant d'un d'aquests efectes.

Adjuntar comportaments

La finalitat d'aquesta pràctica és la incorporació d'alguns dels comportaments que es troben preconfigurats al Dreamweaver MX 2004 en un element imatge d'una pàgina.

El Dreamweaver MX 2004 disposa de l'eina Comportamientos per adjuntar interactivitat a la pàgina. Per fer aquesta operació heu de tenir activada la finestra Comportamientos. Aquesta finestra es troba al pannell Inspector de etiquetas.

Feu-hi clic i veureu que dins el pannell hi ha una finestra amb el nom Comportamientos. Si està desactivada, aneu a la barra de menú Ventana I Comportamientos i activeu-la.

L'aspecte de la finestra Comportamientos és aquest (encara no hi ha cap element seleccionat):

L'etiqueta seleccionada, en aquest cas <img>, apareix a la barra de títol de la finestra Comportamientos. Els menús emergents Eventos i Acciones només són visibles quan s'ha adjuntat algun comportament a l'element de la pàgina seleccionat. 

Quan feu clic al botó Adjuntar comportamientos (+), apareix un menú emergent on l'acció activada és la que es generarà a partir d'un esdeveniment per l'element seleccionat.

El llistat d'accions general és el següent:

• Abrir ventana del navegador: Permet obrir una URL en una nova finestra. Podeu especificar les propietats de la nova finestra (mida, barres de menús, barres de desplaçament, nom...).

• Arrastrar capa: Permet arrossegar una capa des de qualsevol posició de la pantalla. Una utilització força recurrent seria la creació de puzles, controls i altres elements mòbils de la interfície.

• Cambiar propiedad: Canvia el valor d'una de les propietats d'un objecte (per exemple, el color de fons d'una capa o l'acció d'un formulari).

• Carga previa de imágenes: Es carreguen totes les imatges a la memòria cau. D'especial utilitat quan diferents imatges han d'aparèixer en moments concrets al llarg d'una línia de temps.

• Comprobar navegador: Envia els visitants a diferents pàgines, segons les versions dels seus exploradors, per garantir la millor visualització possible.

• Comprobar plug-in: El sistema de l'usuari/ària és analitzat i s'actua d'acord amb l'existència o no de connectors (plug-in). La proliferació de pel·lícules Flash, llocs webs desenvolupats amb el Director, vídeo en QuickTime, música en Real Player, LiveAudio..., fa molt útil aquesta acció. 

• Controlar Shockwave o Flash: Permet incloure icones que controlen la reproducció d'aquestes pel·lícules.

• Controlar sonido: Es poden executar sons de manera simultània, per exemple en fer clic sobre un botó.

• Definir texto de marco: Permet definir de manera dinàmica el text d'un marc mitjançant la substitució del contingut i el format que s'especifiqui.

• Definir texto de capa: Permet inserir text, propietats, variables de funció JavaScript.

• Definir texto de barra de estado: Mostra un missatge a la barra d'estat, situada a la part inferior esquerra de la finestra de l'explorador.

• Definir texto de campo de texto: Permet modificar el contingut d'un camp de text introduït anteriorment mitjançant la finestra Objetos.

• Establecer imágen de barra de navegación: Permet incloure a elements de navegació imatges canviants (rollover technique) que permeten seleccionar diferents opcions. S'inclouen múltiples elements, cadascun dels quals disposa de diversos estats, i un enllaç. 

• Intercambiar imagen: Fa la mateixa funció que l'efectuada per l'objecte.

• Ir a URL: Obre una pàgina nova a la finestra actual o al marc utilitzat. És de gran utilitat per canviar el contingut de dos o més marcs fent clic una sola vegada.

• Llamar JavaScript: Permet especificar que s'ha d'executar una funció personalitzada o línia de codi JavaScript quan es produeixi un esdeveniment determinat.

• Ir a un fotograma en la línea de tiempo: Executa accions a qualsevol zona de la línia de temps, i reprodueix bucles, etc. Reproducir línea de tiempo i Detener línia de tiempo complementen l'acció anterior.

• Mensaje emergente: Presenta una alerta del JavaScript amb el missatge que es vulgui incorporar. Resulta adequat per proporcionar informació més que per proposar una elecció, ja que només inclou el botó Aceptar.

• Menú de salto: Genera una finestra de llista desplegable mitjançant la qual es podrà seleccionar un contingut d'una llista i vincular una URL a cada element per anar al contingut.

• Menú de salto Ir: Permet associar un botó Anar a un menú de salto ja existent.

• Mostrar-Ocultar capas: Incorpora la possibilitat de seleccionar quines capes s'han de mostrar o amagar d'acord amb l'acció de l'usuari/ària.

• Restaurar imagen intercambiada: Restaura l'estat inicial de la imatge quan el cursor deixa d'estar situat a sobre.

• Validar formulario: Permet establir criteris de comprovació a cada un dels camps del formulari.

Obrir una nova finestra del navegador 

Vistes les diferents accions de les quals podeu disposar amb el programa i els navegadors als quals les adrecem, adjuntareu una d'aquestes accions a una pàgina ja preparada prèviament. 

Copieu la carpeta finestra que es troba a .../materials/m7/efectes/ a l'interior de la carpeta c:\cursd98\m7\efectes. Recupereu l'arxiu interactua.htm des de la barra de menú Archivo I Abrir.

Aquest document  interactua.htm representa la pàgina de presentació simulada del nostre curs. Ja té definides les seves característiques: incorpora un fons (fonsjv1.gif) i dues imatges (acces.gif i jv1.gif).

Adjuntareu un comportament al botó Accés, de manera que en col·locar el ratolí a sobre, s'obri una finestra del navegador. Per fer aquesta operació, heu de tenir activada la finestra Comportamientos. Seleccioneu la imatge acces.gif. 

Feu clic al botó Adjuntar acciones (+) i seleccioneu l'acció Abrir ventana del navegador. Apareixerà una finestra on podreu definir tota una sèrie de característiques d'aquesta nova finestra: adreça URL, amplada i alçada en píxels, atributs que han d'aparèixer o no (barra de navegació, barra d'estat, barra de menús, barres de desplaçament si són necessàries, nom de la finestra, etc.).

Introduïu els valors següents a la finestra i accepteu-los:

Heu establert un enllaç a la pàgina estructura.htm. A continuació, guardeu la pàgina i comproveu el funcionament de l'efecte als diferents navegadors. 

Veureu com a la finestra Comportamientos s'han incorporat nous elements:

Fent clic a sobre de qualsevol d'aquests camps, s'activarà la finestra Abrir ventana del navegador i podreu introduir els canvis necessaris. Podeu afegir tants comportaments a un mateix element seleccionat com vulgueu. Les accions s'executaran seguint l'ordre que aparegui a la finestra Comportamientos. Ara bé, cal no oblidar les versions dels navegadors a les quals us adreceu i les possibles incompatibilitats que puguin sorgir, així com evitar la sobrecàrrega d'efectes.

Modificar un comportament

A vegades, voldreu fer algun tipus de modificació a un dels comportaments que heu adjuntat a les vostres pàgines. De fet, és possible modificar-los sense problema. Només cal fer clic a sobre del comportament seleccionat i apareixerà la finestra on s'introduiran els canvis. 

Ara bé, si el que voleu és introduir un canvi al tipus d'esdeveniment, podeu fer clic a sobre de la icona amb un triangle invertit. Es desplegarà una llista amb tots els esdeveniments que segons la versió del navegador seleccionat prèviament resulten compatibles. 

A continuació, deseu l'arxiu interactua.htm i comproveu el funcionament del nou efecte als diferents navegadors. 

Per saber d'una manera més precisa la llista d'esdeveniments que incorpora el Dreamweaver MX 2004, les característiques, a quines accions els podeu associar i el navegador o els navegadors que permeten generar-lo, podeu consultar l'ajuda del programa. 

Aquesta informació es troba a Ayuda I Contenido I Adición de contenido a las páginas I Utilización de comportamientos JavaScript I Eventos.

Quan adjunteu alguns esdeveniments a imatges, aquests apareixen entre parèntesis. Aquests esdeveniments estan disponibles només per establir vincles. Quan se'n seleccionen, el Dreamweaver MX 2004 ajusta una etiqueta al voltant de la imatge per definir un vincle nul. Aquest vincle nul és representat per javascript:; en el camp Vinculo de la finestra Propiedades. Podeu canviar el valor del vincle per transformar-lo en un vincle real amb una altra pàgina, però si esborreu el vincle del JavaScript sense fer la substitució per un altre vincle, esborrareu el comportament.

Rollovers: imatges canviants

Imatges de substitució

Un dels recursos més utilitzats a l'hora de dotar els dissenys d'intefícies d'una certa capacitat d'interactuació per part de l'usuari/ària ha estat la imatge canviant (rollover technique). Aquest efecte es produeix, generalment, quan es desplaça el punter del ratolí per alguna zona de la pantalla o es fa clic sobre algun botó. La zona sobre la qual es fa l'acció, que sol ser una imatge, canvia d'aspecte, forma, color, localització... Un exemple d'utilització d'aquest efecte el teniu als elements de navegació del nostre curs, o a la interfície del mateix Windows i les seves aplicacions.

El funcionament d'aquest efecte es fonamenta en la incorporació de codi JavaScript, que s'encarrega de definir el tipus d'acció i quina actuació la desencadena. És molt utilitzat a les interfícies per facilitar la navegació als llocs webs, on es vol crear una metàfora reconeguda amb facilitat, com són els botons. La complexitat dels efectes i de l'esdeveniment posterior a la seva activació només tenen el límit dels nostres coneixements i de la nostra imaginació, per això, tot i la incorporació de tècniques i recursos més avançats, segueixen sent de gran utilitat. 

Incorporar imatges canviants

La finalitat d'aquesta pràctica és la incorporació a una pàgina d'una imatge canviant.

Obriu el Dreamweaver MX 2004. Recupereu l'arxiu interactua.htm que es troba a la carpeta C:\cursd98\m7\efectes\finestra (recordeu que heu copiat aquesta carpeta a la pràctica anterior) des de la barra de menú Archivo I Abrir.

Situeu el punter del ratolí a una de les cel·les de la zona central de la pàgina i feu clic. A continuació, feu clic a la icona Insertar imagen de sustitución de la barra Común o bé des de la barra de menús activeu Insertar I Objetos de imagen I Imagen de sustitución.

Ompliu els camps de la finestra Insertar imagen de sustitución amb els valors següents i accepteu-los:

• Nombre de la imagen: Introduïu el nom per a la imatge de substitució. Escriviu descarregar.

• Imagen original: Feu clic a Examinar i seleccioneu o escriviu la ruta de la imatge que voleu mostrar quan es carregui la pàgina. En aquest cas, disc.gif.

• Imagen de sustitución: Feu clic a Examinar i seleccioneu o escriviu la ruta de la imatge que voleu mostrar quan el punter del ratolí passi sobre la imatge original. En aquest cas, disc2.gif.

• Si voleu carregar les imatges a la memòria cau de manera que es carreguin més ràpidament, seleccioneu l'opció Carga previa de imágenes.

• Al hacer clic, ir a URL: Podeu seleccionar la ruta de l'arxiu que es vol obrir quan l'usuari/ària fa clic a la imatge de substitució. Si no establiu cap vincle per a la imatge (com en aquest cas), el programa inserirà un vincle nul (#) en el codi HTML relatiu al comportament de substitució. Si elimineu el vincle nul, la imatge de substitució deixarà de funcionar.

Deseu l'arxiu interactua.htm i comproveu-ne la visualització als navegadors.

Una imatge de substitució consta, com heu vist, de dues imatges: la imatge principal, que apareix quan es carrega la pàgina, i la imatge de substitució, que apareix quan es passa el punter del ratolí sobre la imatge principal. Ambdues imatges han de tenir la mateixa mida. Si tenen mides difererents, el Dreamweaver MX 2004 canvia automàticament la mida de la segona imatge perquè s'ajusti a les propietats de la primera.

Incorporar efectes a una barra d'exploració

La finalitat d'aquesta pràctica és la modificació d'una barra d'exploració ja existent a l'interior d'una pàgina, incorporant efectes d'imatges de substitució tal com mostra el model.

Copieu la carpeta rocknet i tot el contingut (es troba a la carpeta ../materials/m7) a c:\cursd98\m7. Obriu el Dreamweaver MX 2004. Recupereu l'arxiu esquerra.htm des de la barra de menú Archivo I Abrir.

Abans de continuar, recordeu com heu definit els tres estats dels botons al mòdul 5 i els noms que vau assignar: 

• Out: Estat sense activar.

• Over: Apareix quan es col·loca el cursor sobre la imatge.

• Down: Després de fer clic sobre el botó.

Ompliu els camps de la finestra Definir imagen de barra de navegación introduint els valors següents i accepteu-los:

No oblideu activar l'opció Carga previa de imágenes. Amb aquesta opció activada evitareu el desagradable retard en l'aparició de les imatges que formen part de l'efecte. D'aquesta manera, les imatges es carregaran a la memòria cau de l'ordinador.

La finestra Comportamientos reflectirà la informació que heu incorporat:

Com ja vam comentar a la pràctica 5 del mòdul 4, en el navegador Explorer, després de clicar en algun dels vincles, notareu que hi queda un marc de selecció. Podeu eliminar-lo afegint a (onClick) la instrucció "window.focus()" des de la vista Código.

Aquesta seria la línia de codi amb la incorporació esmentada:

onClick="MM_nbGroup('down','group1','out_r3_c1','down_r3_c1.gif',1);
window.focus()"

Deseu l'arxiu esquerra.htm. Per veure si tots els efectes funcionen correctament, obriu en els navegadors la pàgina index.htm, que es troba a la carpeta que heu creat a l'inici de la pràctica, i comproveu el comportament del botó Elvis Presley:

Per afegir el mateix comportament (comportamiento) a cada un dels botons que resten, cal que repetiu el procediment aplicat al primer botó. Una vegada apliqueu l'efecte a tots els botons, deseu l'arxiu esquerra.htm. Feu la comprovació corresponent del funcionament obrint la pàgina index.htm.