Unitat 8 - Formularis

Un formulari és una col.lecció de controls (quadres de text, botons, quadres d'activació i menús de llistes lliscants) que permeten recollir informació que l'usuari pot introduir quan mira la plana.

L'usuari omplirà els camps del formulari, cadascún dels quals s'identificarà per un nom concret.

El contingut del formulari es pot transmetre o bé per correu a l'adreça triada pel dissenyador de la web o bé a un programa CGI (Common Gateway Interface) del servidor web remot que interpreta i processa el contingut del formulari i amb situa les dades processades a un directori del servidor remot on el webmaster de l'espai les pot consultar.

Word proporciona ajuda per incloure controls de formulari a les planes web, però en canvi no proporciona suport per crear aquestes aplicacions CGI que interpreten els contingut del formulari una vegada l'ha cumplimentat un usuari de la web.

En canvi, es pot aconseguir molt fàcilment que els continguts del formulari arribin a la bústia de correu electrònic del webmaster.

Però, tal com hem aprés, mentre anem donant voltes a la idea original se'ns acudeixen altres aspectes, requisits, condicionants, elements de disseny o navegació, etc. que anem anotant a la documentació del nostre projecte:

A partir de la idea i de les concrecions anotades decidim que l'estructura de l'espai web, partint del projecte 2, podria ser aquesta:

En el document index.htm s'haurà d'incorporar l'enllaç a aquesta nova plana.

1. Aquesta pràctica implica l'ampliació i remodelació del projecte 2. Per tant, es seguirà treballant amb la carpeta C:\projecte2.
2. Crear un document HTML nou, amb Word, per tal d'encabir el nou formulari.
	Word Archivo/Nuevo/Página web/Página web en blanco
3. Editar els elements bàsics del format de l'espai, segons el disseny que considerem oportú
	Posarem un fons a la plana (Formato/Fondo/Efectos de relleno/...) Posarem un títol a la plana (per exemple: "Formulari de comunicació amb el professor")
4. Construcció del formulari i incorporació dels controls de formulari necessaris
	Triarem l'opció de menú Insertar/Formularios/Cuadro de texto
	Situarem en pantalla el camp de text, redimensionant-lo amb els nodes si es necessari.Aquest camp haurà de contenir el nom i cognoms del remitent del missatge.
	S'observa que apareix una finestra flotant de controls de formulari. Des d'aquesta finestra es tria el botó de propietats del camp de formulari que s'acaba de crear. Apareix una finestra de configuració del camp de text. Cal introduir els valors seleccionats en groc. La clau HTMLname es refereix al nom que tindrà aquest camp de text i Value, al valor per defecte que apareixerà al camp.
	A continuació es procedeix a inserir un segon camp de text per a encabir l'adreça de correu electrònic del remitent. Es pot crear des de la finestra de controls.
	Una vegada creat i etiquetat el camp cal obrir la seva finestra de propietats i especificar la configuració adequada. Cal introduir els valors seleccionats en groc.
	A continuació incorporem un nou camp de text amb barres de lliscament. Es pot crear des de la finestra de controls.
	Una vegada creat i etiquetat el camp cal obrir la seva finestra de propietats i especificar la configuració adequada. Cal introduir els valors seleccionats en groc. Apareix una finestra de configuració de l'àrea de text. Cal introduir els valors seleccionats en groc. La clau HTMLname es refereix al nom que tindrà aquesta àrea de text; Value, al valor per defecte que apareixerà al camp, les claus Columns i Rows es refereien al tamany de l'àrea de text.
	A continuació cal incloure el botó de transmissió de les dades del formulari i configurar-lo per a que aquestes dades siguin enviades a través de correu electrònic. Seleccionarem el boto d'enviar de la caixa de controls.
	Una vegada creat el botó cal obrir la seva finestra de propietats a la que es troben els seus valors per defecte. Es tracta de configurar els valos adeqüats en les claus senyalades en groc, tal com indica la figura següent: La clau Action indica què s'ha de fer quan es prem el botó (en el nostre cas, enviar el contingut del formulari a una determinada adreça de correu). La clau Caption indica el text que ha d'apareixer al botó (en el nostre cas "Transmetre el formulari"). La clau Encoding indica la forma con el contingut del formulari s'ha de codificar (en el nostre cas l'etiqueta "text/plain" indica que no s'ha de codificar de cap manera i s'ha d'enviar com a text ASCII). La clau HTMLName inclou el nom del control (en el nostre cas "boto1"). La clau Method indica la forma com s'ha de transmetre el formulari (en el nostre cas "post", per contra del mètode "get" proposat típic de la transmesa de formularis a programes CGI)
	Finalment, s'inclou al formulari un botó per esborrar el contingut dels camps. Es pot seleccionar des de la finestra de controls.
	Una vegada creat el botó cal obrir la seva finestra de propietats i canviar les claus marcades en groc.
	Amb aquesta operació el formulari ja està acabat i amb ell la plana que el conté. La plana cal guardar-la amb el nom "formu.htm" a la carpeta del projecte 2 (probablement C:\projecte2)
5. Visió de la plana del formulari des del navegador
	Una vegada salvada la plana del formulari, mirarem com funciona el formulari des del navegador. Des de Word triarem "Archivo/Vista prévia de la página web" i observarem que el navegador mostra una pantalla com la següent: Obrir el codi HTML de la plana i observar la codificació del formulari. Es poden fer algunes proves escrivint algun text a tots els camps i prement el botó "Esborrar el formulari", es comprovarà que el text escrit desapareix i torna a mostrar-se el valor per defecte de cada camp. Amb algun text escrit a cada camp, premerem el botó "Transmetre el formulari". Llavors apareix un avís, dient que el contingut del formulari s'enviarà en forma de correu electrònic, si s'accepta l'avís s'obriria el programa de gestió de correu electrònic (probablement Outlook Express) i, si hi ha algun compte de tipus POP configurat, el contingut actual dels camps del formulari es transmetra a l'adreça prevista a la clau Action. Aquest tipus de transmissió de formularis és molt insegur, ja que, per a que la transmissió sigui correcta, cal que a l'ordinador on s'executa el formulari hi hagi configurat un compte de correu POP amb el gestor de correu per defecte; circumstància que, de vegades no es possible, per exemple quan el formulari s'envia des d'ordinadors públics o compartits sense configuració de correu. Per resoldre aquest problema es poden utilitzar els serveis de gestors gratuïts de formularis.
	El receptor del correu electrònic rebrà un missatge aproximadament amb l'apariència següent:

1. Aquesta pràctica implica l'ampliació i remodelació del projecte 2. Per tant, es seguirà treballant amb la carpeta C:\projecte2.
2. Crear un document HTML nou, amb Word, per tal d'encabir el nou formulari.
	Word'2000 Archivo/Nuevo/Página web
3. Editar els elements bàsics del format de l'espai, segons el disseny que considerem oportú
	Posarem un fons a la plana (*Formato/Fondo/Efectos de relleno/..*.) Posarem un títol a la plana (per exemple: "Formulari de comunicació amb el professor")
4. Construcció del formulari i incorporació dels controls de formulari necessaris
	Activarem l'opció de mostrar la barra d'eines "Herramientas Web", per que siguin mostrats els objectes de formulari possibles (*Ver/Barras de Herramientas/Herramientas web*)
	Situarem en pantalla el camp de text, redimensionant-lo amb els nodes si es necessari.Aquest camp haurà de contenir el nom i cognoms del remitent del missatge.
	Observem que apareix una finestra flotant de controls de formulari. Des d'aquesta finestra es tria el botó de propietats del camp de formulari que s'acaba de crear. Apareix una finestra de configuració del camp de text. Cal introduir els valors seleccionats en groc. La clau HTMLname es refereix al nom que tindrà aquest camp de text i Value, al valor per defecte que apareixerà al camp.
	A continuació es procedeix a inserir un segon camp de text per a encabir l'adreça de correu electrònic del remitent. Es pot crear des de la finestra de controls.
	Una vegada creat i etiquetat el camp cal obrir la seva finestra de propietats i especificar la configuració adequada. Cal introduir els valors següents:
	A continuació incorporem un nou camp de text amb barres de lliscament. Es pot crear des de la finestra de controls.
	Una vegada creat i etiquetat el camp cal obrir la seva finestra de propietats i especificar la configuració adequada. Cal introduir els valors següents:. Apareix una finestra de configuració de l'àrea de text. Cal introduir els valors seleccionats en groc. La clau HTMLname es refereix al nom que tindrà aquesta àrea de text; Value, al valor per defecte que apareixerà al camp, les claus Columns i Rows es refereien al tamany de l'àrea de text.
	A continuació cal incloure el botó de transmissió de les dades del formulari i configurar-lo per a que aquestes dades siguin enviades a través de correu electrònic. Seleccionarem el boto d'enviar de la caixa de controls.
	Una vegada creat el botó cal obrir la seva finestra de propietats a la que es configuren els valos següents: La clau Action indica què s'ha de fer quan es prem el botó (en el nostre cas, enviar el contingut del formulari a una determinada adreça de correu). La clau Caption indica el text que ha d'apareixer al botó (en el nostre cas "Transmetre el formulari"). La clau Encoding indica la forma con el contingut del formulari s'ha de codificar (en el nostre cas l'etiqueta "text/plain" indica que no s'ha de codificar de cap manera i s'ha d'enviar com a text ASCII). La clau HTMLName inclou el nom del control (en el nostre cas "boto1"). La clau Method indica la forma com s'ha de transmetre el formulari (en el nostre cas "post", per contra del mètode "get" proposat típic de la transmesa de formularis a programes CGI)
	Finalment, s'inclou al formulari un botó per esborrar el contingut dels camps. Es pot seleccionar des de la finestra de controls.
	Una vegada creat el botó cal obrir la seva finestra de propietats i canviar les claus següents:
	Amb aquesta operació el formulari ja està acabat i amb ell la plana que el conté. La plana cal guardar-la amb el nom "formu.htm" a la carpeta del projecte 2 (probablement C:\projecte2)
5. Visió de la plana del formulari des del navegador
	Una vegada salvada la plana del formulari, mirarem com funciona el formulari des del navegador. Des de Word triarem "Archivo/Vista prévia de la página web" i observarem que el navegador mostra una pantalla com la següent: Obrir el codi HTML de la plana i observar la codificació del formulari. Es poden fer algunes proves escrivint algun text a tots els camps i prement el botó "Esborrar el formulari", es comprovarà que el text escrit desapareix i torna a mostrar-se el valor per defecte de cada camp. Amb algun text escrit a cada camp, premerem el botó "Transmetre el formulari". Llavors apareix un avís, dient que el contingut del formulari s'enviarà en forma de correu electrònic, si s'accepta l'avís s'obriria el programa de gestió de correu electrònic (probablement Outlook Express) i, si hi ha algun compte de tipus POP configurat, el contingut actual dels camps del formulari es transmetra a l'adreça prevista a la clau Action. Aquest tipus de transmissió de formularis és molt insegur, ja que, per a que la transmissió sigui correcta, cal que a l'ordinador on s'executa el formulari hi hagi configurat un compte de correu POP amb el gestor de correu per defecte; circumstància que, de vegades no es possible, per exemple quan el formulari s'envia des d'ordinadors públics o compartits sense configuració de correu. Per resoldre aquest problema es poden utilitzar els serveis de gestors gratuïts de formularis.
	El receptor del correu electrònic rebrà un missatge aproximadament amb l'apariència següent:

1. Proves locals.
	Anar al directori c:\projecte2 (o al directori local on s'hagin guardat tots els fitxers de la web). Comprovar que existeixen els fitxers de format HTML (extensió .htm) corresponents a totes les planes del nostre espai web i que, concretament apareix la nova plana formu.htm. Comprovar que existeixen els fitxers de cadascun dels gràfics que formen part del nostre projecte (fons de pantalla, imatges dels documents...) Executar el fitxer index.htm. Comprovar si els enllaços des de l'index funcionen adequadament. Comprovar que els enllaços des de les planes secundàries funcionen adequadament. Comprovar que es veuen totes les imatges. Si hi ha algun error o algun defecte en el disseny, cal obrir Word i cridar el fitxer corresponent i corregir el problema.
2. Publicació a l'espai de pràctiques amb WS_FTP.
	Obrir WS_FTP Comprovar que tenim activa la fitxa corresponent a l'espai de pràctiques del servidor de la intranet de l'Escola Joan Pelegrí. Seleccionar el directori local adequat. Seleccionar el directori destí correcte. Seleccionar els fitxers nous del projecte web. Publicar-los al servidor remot. Proves dins del servidor remot de la intranet. Anar a l'espai de pràctiques (amb el directori corresponent) i comprovar que s'activa automàticament el document index.htm. Fer les comprovacions rutinaries. Si hi ha algun error, corregir-lo des de word i repetir tot el procediment des de les proves locals, la publicació a geocities i al servidor de pràctiques del fitxer o fitxers afectats pels canvis. Ara tenim dos espais amb el mateix contingut.
3. Publicació a Geocities
	Anar a l'espai propi de Geocities Publicar els fitxers nous o modificats: index.htm, formu.htm, el gif animat i qualsevol altre gràfic nou. Proves al servidor remot de Geocities Obrir l'adreça personal de geocities, amb l'afegit de la carpeta creada (www.geocities.com/.../projecte2/). Apareix el document index.htm automàticament? Funcionen els enllaços des del menú principal? Funcionen els enllaços de les planes secundàries? Es veuen totes les imatges? Si hi ha algun error, algun problema amb els enllaços o alguna imatge no es veu cal reeditar amb Word el fitxer on hi ha l'error i cal tornar a repetir el procediment des de les proves locals i la publicació a geocities del fitxer o fitxers afectats pels canvis.
4. Donar d'alta l'espai web a diversos motors de recerca.
	Anar a www.terra.es i omplir el formulari per donar d'alta l'espai web al seu index de recerca. Anar a www.ozu.es i omplir el formulari per donar d'alta l'espai web al seu index de recerca. Veure com es pot fer l'alta de la plana a http://es.yahoo.com/ o http://es-es.altavista.com/

Com deiem més amunt la forma d'enviar formularis com a correus electrònics implica l'existència, a l'ordinador emissor, de comptes de correu electrònic tipus POP configurats. Aquesta circumstància no sempre és possible, ja que el formulari pot ser enviat des d'un ordinador compartit o públic que no tingui configut cap compte de correu.

Per resoldre aquest inconvenient, es poden usar els serveis de proveidors gratuits de gestors de formularis.

En tots dos casos cal registrar-se com a usuari i configurar un a un els formularis que el servei haurà de ser capaç de gestionar.

En tots dos casos cal incloure al formulari un camp de text ocult amb les dades indicades pel gestor de formularis. Aquestes dades serviran per a que el servidor recongui el formulari i en processi adequadament el contingut reenviant-lo al destinatari previst en la configuració.

Si tens algun dubte o vols donar solucions a les propostes de treball pots enviar-me un e-mail.

	Els formularis
	Perfeccionament del projecte 2: noves idees
	La concreció de la planificació
	La creació de la plana del formulari amb Word '97
	La creació de la plana del formulari amb Word '2000
	Els canvis al menú principal del projecte 2
	Les proves i la publicació de les ampliacions del projecte
	Els serveis gratuïts de procés de formularis
	Propostes de treball
	Bibliografia i Weberia
(2004)

www.melodysoft.com www.melodysoft.com/docs/forms	en castellà
www.m4d.com	en angles


Menú des d'on es poden insertar els objectes de formulari en Word'97.	Finestra d'"herramientas web" des d'on es poden insertar els objectes de formulari en Word'2000.