Índex    cap11_aux.zip

1Les imatges interactives i els objectes

Els navegadors van ser fets per interpretar un únic llenguatge, l'HTML. Aquest anava dirigit sobre tot a la creació de pàgines textuals en les que s'inserien imatges de pixels o petites animacions fetes amb gifs animats.

La ràpida expansió d'internet va crear ràpidament necessitats de crear webs més sofisticades en les que s’havia de donar resposta a dos conceptes: la imatge de la web havia de ser molt bona i també interactiva.

Això va fer necessari introduir nous interpretes, afegits a l'HTML. Per la seva importància anomenarem el CSS (Fulls d'estils), el JavaScript i l'XML. El JavaScipt és un llenguatge de programació que permet fer pàgines interactives i l'XML és un llenguatge que té a veure amb la presentació de dades estructurades de tipus bases de dades.

Però també s'ha afegit a l'HTML una instrucció anomenada OBJECT que permet incrustar fitxers de diferents tipus, escrits en altres llenguatges de programació. Per la seva importància cal esmentar el Java i el Flash. El Java és un llenguatge de programació molt potent que permet fer qualsevol tipus de programa. Un exemple és la calculadora Wiris del PIE. El Flash és un conjunt d'eines per crear pel·lícules que també porta un llenguatge de programació per fer aquestes pel·lícules interactives.

Els afegits de tipus OBJECT necessiten uns interpretes anomenats Plug-Ins que normalment no estan instal·lats als navegadors i que haurem d'instal·lar nosaltres en el nostre navegador per veure la imatge corresponent.

Així el Dreamweaver porta dues opcions de menú per tal d'incloure imatges interactives o objectes. Aquestes opcions són Insertar/Objetos de imagen i Insertar/Media que tenen cadascuna les opcions següents:

Objetos de imagen	Media

1.1 Imatges de sustitució

Passeu el ratolí per damunt botó (El tercer és un botó interactiu). Canvia la imatge i si premem al botó esquerra ens porta a la pàgina d'acollida dels apunts.

Botó interactiu
Imatge botoCasa1.gif	Imatge botoCasa2.gif	Resultat en pantalla

En realitat es tracta de dues imatges que tenen la mateixa mida i que podem incloure a la nostra pàgina mitjançant l'opció de menú Insertar/Imagenes objetos/Imagen de sustitución.

1.2 Barra de navegació

Feu clic a sobre de la paraula menú i observeu la pàgina que apareix, que conté un menú fet a base de imatges, que en aquest cas tenen textos, però que poden ser qualsevol imatge.

Per fer cadascuna de les opcions del menú es necessiten quatre imatges diferents, però podem fer només les dues primeres.

Així per a la primera opció tenim les imatges següents:

mnMenu1.gif	mnMenu2.gif	mnMenu3.gif	mnMenu4.gif

Per crear el menú hem de tenir preparades les imatges i anar a l'opció Insertar/Imágenes interactivas/Barra de navegación. Apareix un quadre de diàleg com el següent:

Observem els següents aspectes:

• Per a cadascuna de les opcions de menú ha d'omplir-se un quadre de diàleg. Podem afegir opcions amb el botó més i suprimir amb el botó menys.
• Els noms de les opcions no han de tenir espais en blanc, ni símbols ni lletres accentuades, ni ...
• Els dos botons que tenen una fletxa serveixen per canviar l'ordre de les opcions de menú.

1.3 Els botons Flash

En realitat són fitxers de Flash. Aneu al menú Insertar/Media/Botones Flash i com veieu al quadre següent teniu un conjunt de botons que podeu triar.

Pareu atenció que us demana el nom amb el que voleu desar el botó. Aquest és un fitxer flash i el seu nom ha de tenir extensió swf.

Podeu fer un menú amb diferents botons amb una taula vertical o horitzontal.

1.4 El text Flash

És també un fitxer de Flash que conté un text animat. Permet fer enllaços amb moltes fonts de lletra diferents. El funcionament és molt semblant als dels botons Flash.

2 Els Applets

Els applets són programes fets en el llenguatge de programació Java i incrustats dins el codi HTML com a programes independents dins del navegador. El llenguatge de programació Java és molt potent i permet fer qualsevol tipus de programes.

Així tenim des de calculadores i rellotges fets amb Java fins a editors de qualsevol tipus o fins i tot el Cabri Geometre i el Clic tenen alguna versió com a Applet. La calculadora Wiris del departament que podeu que podeu trobar a l'Edu365 és un Applet

Mireu el rellotge de la figura:

Aquest rellotge és un Applet que està incrustat en la nostra pàgina HTML i que funciona de manera autònoma dins del navegador. El seu codi està dins dels dos fitxers RelojDigital.class i NumeroDigital.class.

També hem de dir que aquest Applet és configurable mitjançant uns paràmetres:

<PARAM NAME=XORIGEN VALUE="40">
<PARAM NAME=YORIGEN VALUE="30">
<PARAM NAME=ESCALA VALUE="1">
<PARAM NAME=ROJOFONDO VALUE="102">
<PARAM NAME=VERDEFONDO VALUE="153">
<PARAM NAME=AZULFONDO VALUE="153">
<PARAM NAME=ROJOPP VALUE="0">
<PARAM NAME=VERDEPP VALUE="0">
<PARAM NAME=AZULPP VALUE="0">
<PARAM NAME=ANCHO VALUE="540">
<PARAM NAME=ALTO VALUE="160">

Inserció de l'Applet amb el Dreamweaver: Amb l'opció de Menu Insertar/Medio/Applet triem el fitxer .class de l'Applet, en el nostre cas RellotgeDigital.class.

Ara amb l'Applet seleccionat posarem l'amplada i l'alçada del quadre que conté el rellotge i posarem els paràmetres i els seus valors com a la imatge següent:

És clar que podem modificar els valors dels paràmetres, així si posem .5 al paràmetre ESCALA farem un rellotge amb les dimensions dividides per dos respecte. Si fem que els colors VERDEFONDO i AZULFONDO siguin 0 farem els nombres vermells.

3 Les animacions Flash

Les animacions Flash han esdevingut un veritable standard de presentació de continguts en les pàgines web. El programa que permet fer aquest tipus d'aplicacions és el Macromedia Flash.

Fonamentalment aquest programa permet fer escenes amb dibuixos de tipus vectorial que no necessiten molta quantitat de memòria en els seus fitxers. També permet fer tota la transició entre escenes i per tant podem anomenar muntatge de la pel·lícula. També permet treballar amb textos que es descriuen per mitjans vectorials.

A més disposa d'un conjunt d'instruccions, que formen un llenguatge de programació, que permeten crear animacions interactives, es a dir, que responen als events del ratolí o del teclat.

Els fitxers d'animació Flash porten l'extensió swf.

3.1 Inserir una animació Flash amb el Dreamweaver.

Hem d'anar a l'opció de menú Insertar/Medio/Flash. Triarem el fitxer .swf que contingui l'animació a inserir i posarem els paràmetres adients en el quadre de diàleg de propietats:

Fitxer: poli03.fla és el fitxer on es treballa en Flash

Algunes precessions:

• Hi ha programes flash que són animacions. L'opció de Rep. autom. fa que l'animació s'executi en el moment de carregar-la en el navegador. L'opció de Bucle fa que quan s'acabi l'animació torni a començar i així indefinidament.
• El flash té totes les utilitats per crear programes en connexió a bases de dades.
• El seu llenguatge de programació junt a les característiques d'accés a la pantalla permet fer programes de jocs, simulació i dibuix. El programa d'aquest apunts és un programa de dibuix basat en la l'espiral. Heu de tenir cura de no dibuixar moltes estrelles ja que el flash necessita molts recursos de velocitat i memòria quan se li demanen moltes operacions.

4 Els sons en les pàgines web

La música es pot digitalitzar i gravar en forma de fitxers. Els fitxers de música de molta qualitat són els que tenim als discos compactes i que comprem en les botigues. Aquest format de fitxer ocupa molt espai en els discos. Existeixen diferents formats especials per treballar la música amb l'ordinador com el format midi. Aquest format també ocupa molt espai.

Per enviar música a través d'internet es va crear un format especial, el MP3, que comprimeix molt la informació i que permet alleugerar molt l'arribada des de el servidor fins al navegador.

Quan, en un navegador, donem l'ordre de baixar un fitxer de música, lo més normal és que es arranqui un programa capaç d'executar aquest fitxer per a escoltar la música. L'internet Explorer cridarà al "Reproductor de medios" de microsoft.

La forma d'inserir sons en les pàgines web és fer un enllaç cap al fitxer que té la música de manera que quan l'usuari fa clic a sobre de l'enllaç comenci a baixar el fitxer i executar-se en el programa reproductor de música instal·lat a l'ordinador.

També podem inserir un so de fons de la pàgina, d'una manera equivalent a com es posa una imatge de fons. No es gaire aconsellable fer ús d'aquesta tècnica car ha de ser l'usuari final qui decideix escoltar o no la música. (i si la música que posen no agrada a aquest usuari final?).