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:
|
|||
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. |
||
|
|
||
El Dreamweaver MX 2004 sempre posa per defecte onLoad() (és a dir, en carregar la pàgina web) com a esdeveniment (condició que ha de complir el comportament o evento) perquè es produeixi l'acció. Normalment en els vostres comportaments voldreu un esdeveniment diferent, com onClick(). Caldrà canviar aquesta opció cada vegada que inseriu un comportament nou. | |||
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: |
|||
|
|||
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:
|
|||
|
|||
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);
|
|||
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. |
|||