"Disseny, edició i publicació de planes Web"
Unitat 4:
Microsoft
Word (97-2000-XP) com a editor de planes web.
FrontPage
Express i Creative Writer
Word'97, Word'2000 i Word'XP com a editors de planes web
Des de fa anys Microsoft ofereix als seus productes d'ofimàtica (Office) les capacitats bàsiques per crear pàgines web.
Molt probablement molta gent encara té instal.lat al seu ordinador el paquet Office'97. El component més usat del qual és Word'97.
El programa Word'97 (i la resta de components del paquet Office) disposa de moltes opcions i capacitats, la majoria de les quals es copien al disc dur durant el procés d'instal·lació. En canvi, hi ha altres recursos que s'han d'instal·lar específicament per a que Word'97 els pugui usar... aquest és el cas dels recursos per treballar amb documents de format HTML.
Per poder treballar amb documents de format HTML cal instal·lar específicament els complements i serveis HTML de Word'97.
En canvi, les aplicacions d'Office'2000 i 'XP tenen incorporades les funcionalitats per tal de generar documents en format Web.
 |
 |
Menú
de Word'2000 |
Menú
de Word'XP |
Instal·lació dels recursos i els complements HTML d'Office
Per saber si el nostre Word'97 ja te instal·lats aquests complements o no cal anar al menú Archivo i comprovar si apareix o no l'opció Guardar como HTML
 |
Veiem, en el cas de la finestra de l'esquerra, que Word'97 NO
te instal·lats els complements que li permeten treballar amb documents de
format HTML, doncs NO apareix l'opció
Guardar como HTML Caldrà instal·lar aquests recursos complementaris tal com s'exposa en les figures següents. |
 |
Per instal·lar els complements HTML de Word'97, cal obrir la finestra
del Panel de Control triant Inicio/Configuración/Panel
de Control.
A continuació activarem la icona de Agregar o quitar programas Caldrà que disposem del CD-ROM del programa OFFICE'97
Atenció: Cal que siguem prudents en les operacions que durem a terme a partir d'aquest punt! |
 |
A la llista de programes instal·lats al nostre ordinador, cal buscar Microsoft
Office'97 i seleccionar-ho.
A continuació prémer el botó Agregar o quitar... Amb aquesta acció li indiquem al programa que volem afegir components de Microsoft. El programa ens requerirà que posem el CD de l'Office'97 en el lector de CDs. |
 |
Es posarà en marxa el procés de reinstal.lació d'Office.
Des d'aquesta pantalla haurem de seleccionar el botó Agregar o quitar... |
 |
A la llista d'opcions que apareix cal seleccionar la casella de l'opció Creación de páginas Web (HTML) |
 |
Durant la instal·lació dels complements HTML ens farà aquesta pregunta, cal respondre afirmatìvament per activar Word'97 com a editor de planes Web predeterminat. |
 |
Una vegada finalitzat el procés instal·lació, activem Word'97 i fem la
mateixa prova que hem fet al principi: anem al menú Archivo
per comprovar si apareix l'opció Guardar como HTML. Observem que ara SI que apareix aquesta opció, la qual cosa ens indica que ara ja tenim instal·lats tots els complements necessaris per tal de començar a utilitzar Word'97 com el nostre editor de planes Web. |
Creació d'una plana Web, amb Word'97, a partir d'un document preexistent
A continuació crearem la primera plana web, partint d'un document Word'97 normal, que ha estat creat en una sessió de treball anterior.
Es aconsellable seguir acuradament els passos següents:
| 1.
Crear la carpeta específica per contenir els elements de la plana web
que crearem. Triarem Mi PC,
després Disc C: (o disc D:,
segons convingui, especialment en sistemes congelats) i finalment Archivo/Nuevo/Carpeta. Llavors a la nova carpeta li donarem el nom web1xxx (sent xxx les vostres inicials) |
|
|||
| 2.
Baixar el document de Word'97 que s'ha preparat per aquesta pràctica,
des del servidor remot al vostre ordinador. Quan aparegui la finestra de diàleg, triar l'opció de guardar el document a disc i guardar-lo a la carpeta disc:\web1xxx |
|
|||
| 3. Descomprimir
el document Word'97. Anar al directori disc:\web1xxx
i clicar sobre la icona del fitxer baixat. Es tracta d'un fitxer comprimit
amb Winzip, amb descompressió automàtica. Quan pregunti la carpeta on
s'ha de descomprimir triarem la mateixa disc:\web1xxx.
|
||||
| 4. Obrir Word'97. Inicio/Programas/Microsoft Word | ||||
| 5. Des de Word, obrirem el fitxer de text sessio1.doc que hi ha al directori disc:\web1xxx | ||||
| 6. Comprovem
els components del document: text, imatges, taules, capçaleres i peus.
Hem de reconèixer els components normals de qualsevol document Word'97
que estem acostumats a utilitzar. També hem de reconèixer les eines
bàsiques de Word'97 a les barres de botons i als menús.
|
||||
| 7. Convertirem
aquest document original de Word'97 a format HTML. Triarem Archivo/Guardar
como HTML. Tindrem cura de guardar el document al directori
disc:\web1xxx. Amb això Word'97 farà la conversió de formats necessàries, a més d'adaptar les seves funcionalitats a l'edició d'un document HTML. |
||||
|
 |
|||
| 8. Comprovem
que les eines que apareixen ara a la pantalla de Word'97 són una mica diferents
a les que apareixen amb documents "normals". Comprovem, també, que han desaparegut les capçaleres i els peus del document, alhora que la compaginació del text sembla lleugerament diferent.
|
||||
| 9. A
continuació farem alguns canvis en aquest document HTML i comprovarem
com Word'97 ens ofereix funcionalitats diferents quan treballa amb un document
HTML. Posarem una imatge (una textura) de fons al document. Triarem Formato/Fondo/Efectos de relleno i triarem un fons clar, per exemple l'estucat de color blau. |
||||
| 10. Mourem
la fotografia fins situar-la just al mig de la llista numerada inicial. Clicarem amb el botó de la dreta del ratolí damunt de la imatge, del menú contextual triarem Formato de la imagen, de la solapa Posición, seleccionarem Ajuste del texto/Izquierda |
||||
| 11.
Inclourem una línia horitzontal entre les dues seccions del document. Situem el cursor al final de la línia del punt 15. "...internet la font inesgotable". Des d'aquí triem el boto de línies horitzontals automàtiques. |
|
|||
| 12. Manipularem
el format de la taula. Anem a qualsevol cel·la de la taula, llavors triem el menú Tabla/Seleccionar Tabla, llavors comprovem com tota la taula ens apareix seleccionada en vídeo invers. Amb la taula marcada tornem a seleccionar Tabla/Bordes i triem Ancho del borde/3 pt. |
||||
| 13.
Posarem un hiperenllaç a una plana web remota. Seleccionarem el punt 6 de la llista inicial "6. Treballar amb un programa de gestió d’imatges de mapa de bits i d’animacions." Amb aquesta selecció en vídeo invers, premerem el botó d'Insertar hipervincles A la finestra que apareix a continuació escriurem l'adreça URL de la unitat3 d'aquest seminari.
14. Salvarem el document amb Archivo/Guardar |
 |
|||
| 15. A
continuació provarem quina apariència té el nostre document HTML acabat
de crear, des de l'Explorador d'Internet Triarem Archivo/Vista previa de la página web. Això provoca que l'explorer s'activi i mostri com quedarà la nostra plana web vista des del navegador web. Comprovem com l'apariència és lleugerament diferent a la que s'observa des de Word'97. El resultat hauria de ser semblant al que podeu observar des d'aquí. |
||||
| 16. Anar
a Mi Pc, disc
C: o disc D:, carpeta web1xxx
i comprovar que hi ha molts més fitxers dels que apareixien al principi
de la pràctica.
Hi ha els fitxers sessio1.exe (la versió autodescomprimible del document sessió1), sessio1.doc (que és el document Word'97 original), el fitxer sessio1.htm (la plana web, sense imatges), imatge15.jpg (la foto de l'aula multimèdia) i imatge19.jpg (la textura de l'estucat blau)... a més d'altres fitxers de seguretat |
||||
Creació d'una plana Web, amb Word'2000, a partir d'un document preexistent
A continuació crearem la primera plana web, partint d'un document Word'200 normal, que ha estat creat en una sessió de treball anterior.
Es aconsellable seguir acuradament els passos següents:
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
El codi HTML de Word'97
El format HTML (HiperText Markup Language) és un sistema unificador d'informació que permet integrar en un mateix document objectes de moltes naturaleses diferents. Es prou simple per ser comprés per no especialistes en informàtica i prou potent per permetre aplicacions complexes, gràcies a la seva capacitat d'admetre ampliacions o complements en llenguatge de programació (JavaScript, Visual Basic o Java).
A la pràctica, la major part dels editors web de darrera generació amaguen el codi HTML als dissenyadors web. Tot i això, de vegades sol ser útil saber com es pot veure i esmenar directament el document des del codi HTML.
Per veure el codi HTML corresponent la plana sessio1.htm creada en l'apartat anterior cal:
Malgrat tot, Word genera un codi HTML molt farragós carregat d'etiquetes sovint no del tot necessàries. Per aquesta raó alguns programes com Dreamweaver solen incorporar una funcionalitat que permet netejar el codi HTML generat per les diferents versions de Word.
El codi HTML de Word'2000
Per veure el codi HTML corresponent la plana sessio1.htm creada amb Word 2000 cal:
FrontPage Express és l'editor específic de documents HTML que ve incorporat amb Internet Explorer 4.0 i següents. És una versió de Word'97 especialitzada només en l'edició HTML.
Existeix un FrontPage 2000 que és l'eina professional per a la creació d'espais web. Aquesta eina avançada permet crear espais web molt complexos, facilitant enormement la feina de creació de la navegació i els enllaços entre les planes de l'espai web.
Per obrir FrontPage Express hauriem de poder trobar-lo a Inicio/Programas/Internet Explorer/FrontPage Express. Si no es troba en aquesta ruta podem trobar-lo a Mi PC, disc C:, Archivos de Programa, FrontPage Express, Bin, Fpxpress. Si s'ha hagut de trobar d'aquesta segona forma, caldria crear un accés directe del programa a l'escriptori (clicant amb el botó de la dreta damunt d'ell i triant l'opció Crear Acceso Directo, llavors retallar aquest accés directe amb edición/cortar i portar-lo a l'escriptori amb botò dret damunt de l'escriptori/pegar).
Obrirem FrontPage Express i veurem una apariència semblant a la següent:
A continuació editarem la plana sessio1.htm des del FrontPage Express.
Molts programes actuals permeten convertir els seus documents a format HTML. Molt probàblement, un dels més útils, pensant especialment en el seu ús entre els nens i nenes més petits (a partir dels 8 anys) sigui Creative Writer 2.
Creative Writer 2 és un programa de Microsoft (encara que hores d'ara pot ser dificil de trobar), molt barat (6000 ptes), especialment dirigit al públic jove. Es tracta d'un editor de textos molt divertit d'usar i molt fàcil d'aprendre. Ofereix moltes opcions divertides, des de crear documents molt acurats, a crear pancartes o postals. A més ofereix dues màquines d'ajuda als usuaris, una màquina inspiradora (que ajuda a iniciar una redacció) i un assistent d'idees de document (que ajuda a crear documents d'un tipus específic). A més, finalment, ofereix la possibilitat de crear planes web molt fàcilment.
A continuació dissenyarem una plana web amb Creative Writer.
| 1. En primer lloc, cal iniciar Creative Writer. Cal disposar del CD del programa per a que totes les funcionalitats siguin actives. |
| 2. Apareix el menú
principal del programa. Observem que l'opció inferior dreta del menú
ens permet crear planes web.
|
| 3. Una vegada hem
triat Páginas Web, apareixerà el menú de tipus de planes web disponibles.
Triarem el model "Muestra: Enigmas de la naturaleza".
|
| 4. Aquesta tria ens
fa aparèixer en pantalla un document ja previament dissenyat per tal
que puguem aprendre el funcionament de Creative Writer, pel que fa a
l'edició de planes web.
|
| 5. Observem que hi
ha algunes zones del text, emmarcades per una línia puntejada. Es tracta
de les zones actives, els enllaços hipertextuals. Si cliquem dues vegades sobre "cucaracha" observem que apareix una finestra de diàleg que ens permet decidir a quina plana haurà de saltar la navegació quan el lector faci clic sobre la paraula "cucaracha". Aquest és un hipervincle intern de l'espai web personal.
|
| 6. Si, en canvi,
decidim que en clicar sobre "cucaracha", la plana ha de saltar
a una adreça URL externa a la nostra plana. Cal que a la finestra de
diàleg seleccionem "Vincular a URL", llavors tindrem l'opció
de dir a quina plana web exterior volem que salti el lector quan faci
clic sobre "cucaracha"
|
| 7. Quan ja tenim
els enllaços dissenyats, cal que indiquem a Creative Writer que construeixi
la plana web a partir del que nosaltres hem fet. Haurem d'activar el menú de la caixa màgica vermella.
I des d'aquest menú triar el botó de més a la dreta que força la creació de la plana web. |
| 8. Apareix un missatge
d'avis per tal de recordar als joves que cal tenir certes precaucions
quan es treballa a Internet.
Triarem el botó, Ver página web. Aquest botó crea la plana a la carpeta del disc dur que li indiquem i immediatament després mostra la nova plana web dins de l'Explorador d'Internet.
|
Evidentment és convenient practicar molt més amb Creative Writer per tal d'aprofitar totes les seves potencialitats, però amb molt poc temps el professor i els alumnes podran utilitzar tots els seus enormes recursos.
Val a dir, però, que Creative Writer és un programa que no està massa ben acabat, de tal manera que en certs equips i donades certes circumstàncies te tendència a penjar-se... paciència... esperem que no sigui el cas del vostre equip.
A partir de l'opinió que t'hagis format de les planes web d'aquest curset. Quins aspectes de disseny et sembla que serien aprofitables per les teves web adreçades als alumnes i quins no? Quins aspectes del desenvolupament dels continguts et semblen imitables i quins no? Et sembla suficient el nivell d'interactivatat amb els continguts? Et sembla adequada la interactivitat amb el professor? Les pràctiques són suficients? Són fàcils de seguir o no?
Crea una carpeta específica al disc dur per encabir tots els projectes web. Converteix alguns dels teus documents Word'97 a format HTML: exàmens, descripcions de variables, programes de crèdit.
A algun dels documents HTML creats a l'activitat 2, crea algun hiperenllaç a alguna de les planes web conegudes.
A algun dels documents HTML creats en els apartats 2 i 3, insereix alguna taula que no ocupi el 100% de l'espai horitzontal disponible. Comprova que amb documents de format HTML es possible posar text al costat de la taula, cosa que no es possible en documents Word'97 normals.
A algun dels documents HTML creats en els apartats anteriors, insereix alguna imatge de fons de la plana i alguna imatge de les treballades durant la unitat 3 (algun gif animat per exemple). Comprova que en salvar el document, tots els elements gràfics del projecte es guarden de forma independent dins de la mateixa carpeta de la plana HTML.
Localitza i obri (i crea un accés directe si es necessari) el FrontPage Express. Obre alguna de les planes creada en els apartats anteriors. Comprova les opcions que ofereix FPx.
Si disposes de Creative Writer, mira de crear una plana web amb ell, seguint les indicacions del capítol corresponent d'aquesta unitat.
Si tens algun dubte o vols donar solucions a les propostes
de treball pots enviar-me un e-mail.
Orientacions per a la creació de planes web: www.xtec.es/infotec/orienta/
Guia per a la creació de pàgines web: www.xtec.es/infotec/guiaht/
"Curso de Internet": www.educared.net/frames/formacion/home800.html
"Aprende con Internet", proposa d'usos educatius dels recursos web: www.educared.net/aprende/
Magatzem d'icones catalanes: http://www.xtec.es/ed_esp/mic/
Gifs animats: http://www.ciudadfutura.com/gifsanimados
Recursos gràfics per a webs: http://www.geocities.com/SiliconValley/6603/index.html
Mind Manager. Un gestor de mapes conceptuals amb traspàs a web.
