• Macromedia Dreamweaver MX: és un potentíssim integrador de continguts pel desenvolupament d'espais web. Permet des de la creació d'espais senzills, de forma autònoma o a través d'assistents, fins a complexos espais dinàmics que impliquen la gestió de bases de dades.

• Macromedia Flash MX: és una eina de desenvolupament web que permet generar des de simples animacions interactives i fins sofisticats entorns gràfics per a la web. L'entorn de treball de Flash es basa en la idea d'una línia del temps on van passant coses. A més, inclou un llenguatge de programació propi per tal de generar comportaments associats als objectes mostrats a la pantalla.

• Macromedia Fireworks MX: és un potent programa de gestió gràfica. Permet treballar amb gràfics vectorials i de mapa de bits. Facilita enormement el treball de disseny gràfic de l'entorn web. Genera imatges mapejades, ajuda en el disseny de botons i és perfectament compatible i complementari de Dreamweaver.

• Macromedia Extension Manager: és una eina per gestionar les ampliacions que terceres persones dissenyen per les aplicacions de Macromedia. Amb aquestes extensions es poden ampliar moltíssim les capacitats originals dels programes. Les extensions es poden baixar des de la plana web de Macromedia (només cal registrar-se de forma gratuita).

Una de les capacitats de Dreamweaver més interessants es la de "gestionar el lloc web" amb tota facilitat i transparència.

Els usuaris hauran prés moltes decisions abans de posar en marxa Dreamweaver:

• Hauran fet el disseny bàsic de l'espai web, sobre paper, en forma de mapa conceptual o arbre jerarquic.

• Hauran creat, al disc dur de l'ordinador amb el que treballaran, l'estructura de carpetes que contindrà els diferents fitxers de l'espai a crear (per exemple, s'haurà previst una carpeta principal, una carpeta interior on es guardaran les imatges, un altra per les animacions...).

• Disposaran, previsiblement, d'un espai web a un servidor remot per tal de publicar la web una vegada estigui acabada i provada localment (l'administrador del servidor remot els haurà proporcionat un nom d'usuari i una contrasenya d'accés).

Una vegada les decisions prèvies estan clares i documentades, arriba l'hora de posar en marxa Dreamweaver.

El que cal fer sempre en primer lloc, quan s'inicia el treball amb un nou projecte, és configurar les característiques del lloc web.

Aquestes característiques es refereixen tant a les dades locals de l'espai web (el disc on es treballa), com també les remotes (el servidor web on podem publicar els continguts), així com un servidor de prova per tal de desenvolupar espais dinàmics que gestionen bases de dades.

Per definir un nou lloc podem usar la finestra Archivos, solapa Sitio (Archivos/Sitio) o bé triar el menú Sitios/Editar sitios.

Des d'aquesta opció triarem Definir un sitio (si encara no en tenim cap de definit) o bé Editar sitio (si ja n'hi ha de definits).

Dels llocs ("sitios") podem definir moltes dades. Triem la solapa Avanzadas i observem el llistat de les categories de dades que podem configurar.

Ens fixarem en els apartats datos locales i datos remotos.

A la categoria de datos locales cal indicar el nom amb el que identificarem el lloc i la carpeta del disc dur on es guarden els documents que formen part de l'espai (hi ha altres apartats a cumplimentar que es poden deixar en blanc en un primer moment).

A la categoria de datos remotos cal indicar la forma com Dreamwevar podrà accedir al servidor web remot.

De fet, Dreamweaver opera com un client FTP, és a dir, té capacitat per publicar els continguts locals directament al servir remot com ho faria un programa dedicat (com ara WS_FTP).

Per tant, si es tria l'accés FTP cal cumplimentar els camps amb les dades proporcionades pel servidor d'espai web remot.

Immediatament després ja es poden crear les planes web que formen part de l'espai.

La definició del lloc es pot retocar en qualsevol moment amb l'opció d'edició d'un espai existent.

Normalment Dreamweaver ens presenta un document buit, preparat per treballar amb ell. Si no apareix podem crear-ne un de nou amb Archivo/Nuevo/General/Pagina bàsica/HTML (cal observar la quantitat enorme de tipus de document web que podem crear, així com la diversitat de models i plantilles de mostra disponibles).

Es poden canviar les propietats generals de la plana des de Modificar/Propiedades de página.el tílol de la plana, la imatge de fons, els marges, etc.

Una vegada configurades les propietats de la plana s'observen els canvis a la vista de disseny.

La plana que s'està creant es pot mirar des de tres tipus de pantalla: només de codi, la pantalla de disseny i la pantalla partida (a la part superior codi HTML i a la inferior el disseny). Es pot alternar entre les tres vistes des dels botons de vista de la barra de botons o des del menú Ver.

S'observa la clara presentació de les etiquetes HTML a la zona de codi.

A continuació s'inclouran a la plana els continguts i interaccions previstos segons el disseny previ.

Ens situarem a qualsevol zona de la pantalla de disseny (la vista real) i escriurem el text corresponent a la presentació de la plana (en el nostre exemple "Menú Principal").

S'observa com a la zona inferior de la pantalla s'activa la finestra de propietats de l'objecte amb el que es treballa, en aquest cas text.

A la finestra de propietats podem definir el format del paràgraf, la font dels caracters, el tamany, el color, l'estil, l'alineació del paràgraf, els vincle, els bolets, les numeracions i els sangrats.

Com es veu, gairebé totes les propietats del text són disponibles des d'aquesta finestra. Qualsevol canvi, provoca la generació automàtica del codi HTML corresponent (tal com es pot veure a la finestra de codi).

Tal com hem vist, mentre treballàvem amb Word, les taules són elements bàsics alhora de dissenyar i estructurar els documents web.

Des de Dreamweaver podem introduir una taula al document bé des del menú Insertar/Tabla o bé des de la barra Insertar/Común/Insertar tabla. El programa demanarà el nombre de files i columnes que ha de ternir la taula i altres paràmetres de configuració (tamany de la taula, gruix del marc, separació de cel.les...).

En el nostre exemple, inserim una taula d'una columna i tres files, amb color de fons i gruix de marc.

Mentre tenim la taula seleccionada (fent clic al vertex superior esquerre o bé fent clic dins d'ella amb el botó de la dreta i Tabla/Seleccionar tabla), observem com s'adapta la finestra de propietats per mostrar els paràmetres de la taula actual.

Des de la finestra de propietats de la taula es pot afinar la configuració.

Els vincles permeten aconseguir salts hipertextuals des de certes zones del document a altres documents web del mateix espai o a altres URL remotes. També es possible generar enllaços a marques internes del mateix document o a marques d'altres documents.

Per incoure un vincle, cal seleccionar la zona orígen del salt (text, imatge o qualsevol altres objecte inclós al document) i, després, a la seva finestra de propietats escriure l'adreça URL o el nom de l'arxiu on ha de saltar el vincle.

Com a destí del vincle es pot seleccionar un arxiu de l'espai web actual ("sitio") fent clic sobre la icona de la carpeta a la dreta del vincle.

També es pot determinar la finestra de navegador destí del vincle, seleccionant-lo de la llista "Destino": bé una nova finestra en blanc (_blank), la finestra anterior (_parent), la mateixa finestra (_self) o la finestra superior (_top) o bé qualsevol finestra d'un sistema de marcs.

Els vincles a marques internes són una forma interessant de facilitar l'accés a zones concretes de documents web molt llargs.

Tal com vam veure amb Word, per treballar amb marques internes, en primer lloc cal situar la marca dins del document i en segon lloc cal generar el vincle des d'un altra zona del document a la marca previament situada.

Per incloure una marca, s'ha de seleccionar la zona del document o es vol situar i buscar l'opció del menú Insertar/Punto de fijación con nombre o bé prèmer alhora CTRL+ALT+A.

A continuació, Dreamweaver, preguntarà el nom que ha de tenir la marca (és recomanable escriure un nom que tingui a veure amb el contingut de la zona on es posa la marca, en el nostre exemple "cap1").

A la vista de diseny del document web es mostra una senyal de recordatori (aquesta senyal és invisible a la presentació final de la web). En seleccionar la senyal, la finestra de propietats del punt de fixació mostra el nom la marca.

Per generar el vincle a una marca, cal seleccionar l'objecte que serà inici del salt (en el nostre exemple les paraules "Capítol interior 1") i a la finestra de propietats, camp "vinculo", escriure el nom de la marca on es vol saltar precedit pel signe # (en el nostre exemple "#cap1")

Si no es recorda el nom de la marca on es vol saltar, es pot seleccionar amb el punt de mira. Tenint seleccionat l'objecte inici del salt, cal moure el document amb les barres de lliscament fins que aparegui en pantalla la marca destí, en aquest moment triar el punt de mira i fer-lo lliscar fins situar-lo just damunt de la marca on ha de saltar.

El treball amb imatges estàtiques és molt senzill. Per incloure una imatge a la nostra web només cal triar Insertar/Imagen o bé el botó d'imatge des de la solapa Insertar/Común.. Es recomanable situar les imatges dins de taules per poder estructurar-les millor.

Si es tria una imatge que no forma part d'algun dels directoris del lloc web configurat, el sistema ens demanarà si la volem guardar dins d'aquest entorn.

Tenint la imatge seleccionada, es mostra la seva finestra de propietats, des d'on es poden configurar aspectes com ara el fitxer orígen de la imatge, el destí, el tamany, l'alineació, el tamany del marc de la foto i les característiques del mapa que s'aplica a la imatge (si el hi ha).

Dreamweaver inclou, entre moltíssimes altres funcionalitats afegides, la possibilitat d'inserir a la plana web altres imatges interactives.

Per valorar aquesta capacitat, inserirem al nostre document una imatge interactiva en forma de botó Flash (Insertar/Imágenes interactivas/Botón Flash).

Els mapes d'imatges, tal com hem vist en Word, permeten dissenyar zones hiperactives per damunt d'una imatge que serveix de metàfora i orígen del salt.

En primer lloc al inserta la imatge de base amb Insertar/Imagen.

A la finestra de propietats d'aquesta imatge es poden observar els comandaments per crear el mapa.

Es selecciona l'eina per generar zones rectangulars i es dibuixa amb ella per damunt de la imatge de base.

Apareix la finestra de propietats de la zona interactiva on es pot definir el vincle que es vol establir, bé a una marca interior, a un document del mateix espai o a un altre document extern.

Els formularis permeten dissenyar interaccions entre els usuaris i els creators web. Podem crear formularis per tal que els lectors comuniquem les seves opinions als propietaris de l'espai web, podem crear formularis per fer reserva de llibres, per omplir enquestes, per cumplimentar informes amb camps predefinits...

La informació continguda als informes pot arribar al creador de la web, bé a través del correu electrònic, bé a través d'un servei gratuït de recollida de dades, bé des d'un servei propi de procés de formularis.

Es poden observar els diferents objectes de formulari disponibles si s'activa la solapa Insertar/Formularios.

El primer pas per incloure un formulari a una plana web, consisteix en la inserció de la definició del formulari amb Insertar/Formulario o be amb el boto Insertar/Formularios/formulario.

A la definició del formulari cal indicar algunes dades imprescindibles: el nom del formulari, el tipus d'acció que es durà a terme quan s'activi la transmissió de continguts, el mètode de transmissió i el tipus d'encriptació de la informació transmesa.

En el cas de l'exemple, es preveu que la acció que s'ha de dur a terme quan es transmeti el formulari, és que l'enviament d'un correu electrònic, amb els camps sense cap mena d'encriptació.

A continuació, es poden incloure al formulari els diversos camps dins dels quals els usuaris podran introduir informació. Es recomanale haver fet un disseny manual del formulari amb la descripció de tots els camps que cal incloure, el tipus d'informació i la interacció que es preveu amb cadascun d'ells.

Per facilitar la composició del formulari es recomanable utilitzar una taula. A la columna de l'esquerra de la taula es situaran les etiquetes dels camps i a la columna de la dreta els camps.

El primer tipus de camp que s'inclourà és un espai de text. A la seva barra de propietats podem determinar el nombre de línies que tindrà, el seu nom d'identificació, el tamany, el nombre de caràcters màxim que admetrà i el valor inicial.

Es poden incloure altres camps de text. En el nostre exemple s'ha inclós un cap per escriure el correu electrònic i un altre per posar les observacions.

El camp d'observacions és un camp de text de varies línies que, a més, ja inclou un valor inicial.

Hi ha altres objectes de formulari. En l'exemple, ara s'inclou un cap de tipus casella de verificació.

El camp casella de verificació pot tenir dos estats: seleccionat o no seleccionat. A la seva finestra de propietats es pot determinar quin és el seu estat inicial.

L'altre objecte de formulari que s'utilitza a l'exemple és un camp de llista/menú.

Des de la finestra de propietats del camp de tipus llista es poden descriure els diversos valors que pot mostrar el camp.

A més, dels camps en els que els usuaris podran introduir informació quan interactuin amb el formulari, cal preveure la inclusió d'un botó que forçarà la transmissió de les dades, segons l'acció prevista en la definició inicial del formulari.

S'inserta el botó triant-lo de la barra Insertar/Formularios/botón.

A la finestra de propietats del botó es pot determinar el tipus de botó del que es tracta i l'etiqueta que ha de mostrar.

Si es preveu que certs camps del formulari han de ser cumplimentats forçosament per l'usuari i no es poden deixar en blanc, caldrà que la plana prevegi la validació forçada del formulari.

La validació del contingut dels camps del formulari es recomanable programar-la per quan l'usuari prem el botó de transmetre.

Per provocar la revisió del formulari cal annexar al botó de transmetre el "comportament" de control corresponent (un petit programa).

Tenint selecionat el botó de transmetre, s'amplia la finestra de "Diseño" i s'activa la solapa "Comportamientos".

Per afegir un comportament a l'objecte seleccionat (el botó transmetre) cal premer el botó "+", que mostra un menú amb totes les accions possibles des de l'objecte actual. Des d'aquest menú es tria l'opció "Validar formulario".

En la finestra de validació del formulari es selecciona el camp(s) que és imprescindible i no es pot deixar en blanc i s'activa la propietat "obligatorio".

Altres camps poden filtrar-se de tal manera que, cas de cumplimentar-se, incloguin una adreça de correu electrònic (el símbol @) o bé valors numèrics dins d'un rang.

Un altre botó que es sol incloure a tots els formularis és el que permet esborrar el contingut de tots els camps.

Amb la inclusió d'aquest botó el formulari de l'exemple estaria acabat.

Els formularis es poden transmetre directament per correu electrònic, tal com preveia l'exemple anterior; però aquest tipus d'acció requereix que a l'ordinador des d'on es transmet el formulari hi hagi actiu i configurat un compte de correu electrònic de tipus POP (Outlook Express) i això no sempre és possible.

Per tant, és molt més segur enviar els formularis a un servei gratuït de procés o bé al propi servidor web on s'ha configurat un programa per processar-los i transmetre'ls a qui correspongui de forma segura.

Per enviar el formulari a un servei gratuït de procés de formularis, tipus Melodysoft, cal incloure un camp ocult (que no serà visible pels usuaris i que tindrà funcions tècniques) amb les dades que identifiquin el nostre formulari al servei remot. En el cas de l'exemple, el camp ocult s'ha d'anomenar "id" i el valor ha de ser el nom de la definició del procés del formulari al servidor gratuït (en el nostre cas "cursweb").

La definició de fulls d'estils permet canviar l'apariencia i el comportament de qualsevol etiqueta HTML i guardar aquest nou disseny com un fitxer extern que es vincula a la plana web.

Exemplificarem les capacitats dels estils CSS (taula de cascada d'estils) canviant l'apariencia dels enllaços hipertextuals.

Per crear un nou estil CSS seleccionarem Texto/Estilos CSS/Nuevo estilo CSS.

En la nova plana d'estils es podrà redefinir qualsevol etiqueta o selector CSS.

Pel nostre exemple, ens interessa redefinir els selectors CSS que afecten a l'estat dels enllaços: l'etiqueta HTML corresponent als vincles hipertextuals (les ancles <a>).

Després es podrà triar cadascun dels estats dels selector dels vincles i fer els canvis corresponents per dissenyar el seu nou format.

Els diferents estats del selector <a> són:

• a:link, que correspon a l'apariencia que ha de tenir un text que tingui configurat un enllaç hipertextual (color: qualsevol; decoració: res)
• a:visited, que correspon al format del hipervincle una vegada s'ha visitat l'enllaç (color: qualsevol; decoració: res; estil: normal)
• a:hover, l'apariencia de l'hipervincle quan el cursor es mou per damunt d'ell (color: qualsevol; decoració: subratllat; grosor: negrita).
• a:active, l'apariencia quan l'hipervincle és actiu (color: qualsevol; decoració: cap).

Després d'acabar de definir el nou fitxer d'estils caldrà assegurar-se que el nou estil està vinculat a la plana web. Es pot vincular un fitxer d'estils a qualsevol plana web amb Texto/Estilos CSS/Adjuntar hoja de estilos i seleccionant el fitxer .CSS correponent a l'estil que es vol annexar.

Comprovarem que, una vegada s'ha annexat el fitxer d'estils a la pàgina web, els enllaços canvien d'apariència: mentre estan en repós desapareix el subratllat i, en canvi, quan el cursor es situa damunt de l'enllaç l'estil de la lletra passa a negreta i subratllat.

Quan s'han de crear molts documents web que formen part del mateix espai resulta convenient que tots ells tinguin la mateixa apariència o un disseny homogeni que els identifiqui clarament com a part d'un conjunt més gran.

Per generar molts documents amb un format semblant resulta especialment útil poder generar els nous documents a partir d'un model de disseny. Aquests models de disseny s'anomenen "plantilles".

El procés per crear una plantilla és equivalent al de crear qualsevol altre document web.

Resulta molt recomanable organitzar els continguts de la plantilla en una o varies taules.

Quan el document model ja està editat i configurat (conté la navegació comuna de totes les futures planes) cal guardar-lo com a plantilla amb Archivo/Guardar como plantilla...

Les plantilles de dreamweaver es guarden a la carpeta "Templates" que es crea automàticament dins de la carpeta del lloc actiu.

Una vegada el document ha estat guardat com a plantilla de document, cal definir el que serà la zona editable de la plantilla, on es podran incorporar els continguts en cadascuna de les planes particulars.

Per incloure una zona editable a una plantilla caldrà situar el cursor a la zona de la plana on volem situar-la i després triar Insertar/Objetos de plantilla/Región editable.

Immediatament després, a la plantilla s'observa un requadre blau que indica la situació de la zona editable.

Cal tornar a guardar la plantilla per que sigui emmagatzemada la nova definició de zona editable (Archivo/Guardar)

Per crear nous documents a partir del disseny de la plantilla creada cal fer Archivo/Nuevo/Plantillas i seleccionar la plantilla del Sitio "el nostre lloc".

També es pot aplicar una plantilla de disseny a un document web que ja existeix.

Cal tenir en pantalla el document web anterior i aplicar-li la nova plantilla amb Modificar/Plantillas/Aplicar plantilla a página.

Finalment s'observa com la plantilla inclou, a la zona editable "espai_central", el contingut de la pagina web pre-existent.

El document resultant s'ha de guardar com a document web independent.

Les capes són una de les més potents capacitats del que s'anomena HTML dinàmic, doncs el que es mostra en pantalla pot variar en funció de certes interaccions.

Una capa és un espai delimitat que es sobreposa al document web i que es pot mostrar o no a voluntat, a més es pot moure de forma dinàmica, canviar de tamany...

Podem crear una capa sobre un document web previament creat amb Insertar/Capa.

La capa apareix com un rectangle sobreposat al contingut anterior de la web.

S'inclou un símbol d'ajuda visual per identificar la capa. La capa disposa de nodes per poder-la redimensionar i un botó a la zona superior esquerra per seleccionar-la.

A la finestra de propietats de la capa es poden establir tots els paràmetres de configuració: tamany, situació, color de fons, estat de la visualització per defecte, estat de les barres de lliscament, etc.

En el nostre exemple, es situa la nova capa a la dreta del menú principal. Se li canvia el color de fons i s'incorpora un text qualsevol.

Una de les funcionalitats interessants de les capes és provocar el moviment del seu contingut a través de la pantalla.

Per provocar aquest moviment cal afegir a la plana web una línia del temps que inclogui la capa activa amb Modificar/Linea del tiempo/Agregar objeto a línea de tiempo.

La línia del temps presenta una finestra amb un entorn semblant al de Flash o Director. Les columnes representen estats de la seqüència al llarg del temps (fotogrames-frames).

Es pot comprovar que la capa 1 (Layer 1) s'ha incorporat al canal 1 (fila 1) i que ocupa diverses columnes (fotogrames).

Es selecciona el primer fotograma del canal 1, que inclou la capa 1, i es mou la capa fins situar-la el més a la dreta possible de la pantalla.

A continuació es selecciona el darrer fotograma del canal 1, que inlou la capa 1, i es mou la capa fins posar-la el més a l'esquerra possible de la pantalla.

S'activen les caselles de reproducció automàtica i repetició permanent (bucle).

S'ha de comprovar que l'estat de visualització per defecte de la capa 1 sigui visible.

Amb tots aquests paràmetres configurats podem guardar la pàgina web i mostrar-la al navegador amb Archivo/Vista previa en el navegador/iexplore o bé prement F12. S'observarà com la capa es mou de dreta a esquerra al llarg de la pantalla i repeteix aquest moviment de forma constant.

Les capes poden ser mostrades o no a voluntat, segons sigui la interacció dels usuaris amb certs botons de la pantalla.

Per modificar la visibilitat d'una capa cal crear els comportaments (petits programes) adequats, associant-los als botons corresponents.

En el nostre exemple s'associarà a un botó del menú la capacitat de fer visible el contingut de la capa.

Ara cal que l'estat inicial de la capa 1 sigui ocult (hidden).

Es selecciona el text del que serà el botó i al camp "Vinculo" de la finestra de propietats s'inclou la paraula "javascript:;", que permetrà associar a aquest botó un comportament sense que sigui necessari el salt a cap destí.

A continuació s'obre la finestra "Diseño", solapa "Comportamientos" per tal d'annexar el programa de control de la capa.

Des de la finestra de comportaments es prem el botó "+" i es tria l'opció "Mostrar-Ocultar capas"

A la vista previa de la pàgina web s'ha de comprovar que en fer click sobre el menú, la capa s'obre.

De la mateixa manera que s'ha inclós un botó per fer visible la capa, es pot incloure un altre botó dins de la capa per tancar-la (fer-la invisible).

Les extensions són capacitats afegides als programes originals, desenvolupats per terceres persones alienes a Macromedia.

Les extensions han de complir certs requisits pel que fa a la qualitat i funcionalitat. Han de ser fàcilment instal.lables i desintal.lables dels programes originals

Es poden descarregar les extensions des de la web de Macromedia www.macromedia.com/exchange, on prèviament cal haver-se registrat com a usuari de productes Macromedia.

Una vegada seleccionada la extensió que es vol descarregar des d'Internet, aquesta es guarda al disc dur del dissenyador.

Més tard, amb l'ajut del programa Macromedia Extension Manager, la extensió descarregada s'annexa al programa Macromedia corresponent. A partir d'aquest moment, la funcionalitat afegida estarà disponible com un botó o una opció de menú addicional.