unitat6b

"Disseny, edició i publicació de planes Web"

Unitat 6 - Projecte 1:
Creació i publicació d'una web senzilla
a partir de documents pre-existents.

El procés de disseny i desenvolupament d'un projecte web.

Plantejament del projecte:
la idea i primers esbossos de la planificació.

La concreció de la planificació.

La recuperació, edició i integració dels continguts.
Implementació de la navegació a l'espai web.

Les proves i la publicació del projecte

Propostes de treball

Weberia

(2004)

El procés de disseny i desenvolupament d'un projecte web

Idea:
El motiu que ens porta a iniciar una feina creativa, però llarga i plena de petits detalls emprenyadors.
La idea és l'objectiu que ens portarà a buscar continguts, a imaginar determinades interaccions, a crear certs mèdia.

Estructura i planificació:
En aquesta fase s'intenta concretar la idea. En general es pot estructurar els continguts partint d'un punt de partida principal (menú) que porta a cadascun dels apartats més concrets. Dins de cadascun d'aquests apartats és pot establir la mateixa estructura, fins arribar a una plana concreta (tindríem una estructura o un guió complert).
Una vegada els continguts estan estructurats cal planificar i temporalitzar la generació dels continguts (textos, gràfics, imatges reals, animacions, àudio...).

Edició dels continguts:
Fonamentalment, cal crear els elements gràfics (pantalles capturades, imatges vectorials...), les imatges reals i les animacions, segons el que s'ha previst a l'estructura (el guió).
Cal buscar els continguts textuals necessaris (fons documentals o bibliogràfiques).
S'han de buscar també referències web per complementar els continguts textuals o gràfics.
Tots aquests continguts es poden crear, editar o emmagatzemar per separat. No obstant, és una bona idea tenir creada una carpeta al disc dur local, on s'aniran posant tots els continguts creats abans de ser integrats.

Integració de continguts:
Usant un programa d'edició de planes Web, integrarem tots els mèdia aconseguits o creats en la fase anterior.
En primer lloc cal crear una carpeta local on poder guardar els document HTML i tots els fitxes complementaris (fotos, animacions...)
Els documents HTML són fonamentalment textuals, donat que inclouen els textos que apareixen a la plana i les etiquetes HTML que determinen el funcionament de la plana web (hiperenllaços externs i interns, imatges que s'han de situar en un determinat lloc, codi de javascript...). Els altres elements com ara gràfics o àudios es guardaran apart, al mateix directori del document HTML.
Cal crear els enllaços als mèdia complementaris (gràfics, fotos...) de forma relativa. S'ha d'evitar que un document HTML busqui, per exemple, un gràfic a C:\web1xxx donat que aquest directori només existeix al disc dur local; al servidor remot la plana web estarà hostatjada a una carpeta diferent. Per això cal que el document HTML busqui les imatges al mateix directori on esta el document o a un altre anidat a ell, però independent de la ruta anterior.

Prova local:
La prova local consisteix en veure el document HTML a través del navegador d'Internet, però llegint-lo directament del disc dur local. Aquesta prova ens permetrà veure si el disseny de la plana és el correcte i tot apareix aproximadament com teníem previst.

Publicació al servidor remot:
Amb el programa WS_FTP configurat adequadament, enviarem els fitxers que composen la nostra plana web al servidor remot.
Cal tenir cura d'enviar tots els documents que formen part de la web, no només del documents HTML. S'han d'enviar també tots els .JPG, .GIF, etc. que formen part de la web y que el document HTML espera trobar a un determinat lloc.

Prova remota:
Aquesta prova consisteix en cridar la plana web des del servidor remot (a poder ser des d'un ordinador diferent del que s'ha creat la plana) i ens permetrà comprovar la velocitat de transmissió dels mèdia incorporats i el funcionament dels enllaços relatius als mèdia.
Una plana plena d'animacions o gràfics que de forma local es veu ràpidament, de forma molt espectacular, pot trigar mols minuts a poder ser vista quan arriba des del servidor remot. Si és així cal reduir el nombre de gràfics que arrelenteixen la càrrega.
Si alguna de les imatges que havien d'aparèixer no es mostra correctament, es possible que el enllaç exterior al fitxer gràfic no sigui correcte (que apunti al disc dur local o a un altre directori diferent del servidor remot).

Alta als buscadors:
Per a que la nostra plana web sigui visitada per molta gent cal que sigui coneguda. Una bona manera de fer difusió de la nostra plana es donar-la d'alta a alguns dels buscadors més utilitzats (www.terra.es, www.yahoo.es)

Plantejament del projecte: la idea i primers esbossos de la planificació

La idea que impulsa el nostre primer projecte:

"Es vol crear un espai web per presentar les pràctiques o propostes de treball d'un crèdit de l'ESO, a més, es vol afegir un llistat d'enllaços web externs adequats a les pràctiques proposades"

Però, a mé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:

Soposem que els textos de les pràctiques ja els tenim en format Word.
Es pretén que els alumnes/usuaris de la web puguin triar des d'un menú principal amb quina de les pràctiques volen treballar.
Cada pràctica tindrà un menú particular que permetrà saltar als diferents apartats interns.
La plana de referències web tindrà tants apartats com pràctiques. Es podrà arribar a aquests apartats des de cada pràctica i, també, des del menú particular de la plana de referències.
Des de qualsevol pràctica o des de la plana de referències s'ha de poder tornar al menú principal.
Algunes de les pràctiques tindràn imatges explicatives o complementaries.
Voldriem que l'estil general de l'espai web fos clar i homogeni.
... (i tants altres criteris, decisions, anotacions, consideracions, recordatoris com considerarem oportú).

La concreció de la planificació

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

L'espai web estarà format bàsicament per cinc documents HTML.

Ara estem en condicions de dur a terme les primeres operacions davant de l'ordinador que seràn sempre:

1. Crear la carpeta on guardarem tots els documents que formen part del projecte web que ara iniciem

Anar a "Mi PC"

Disc C: o disc D: (segons la configuració de l'equip, especialment en sistemes congelats).

Archivo/Nueva/Carpeta

Nom de la carpeta: "projecte1"

2. Copiar a la carpeta "projecte1" els documents word i les imatges originals.

Si no disposeu de documents propis podeu utilitzar aquests.

Fitxers comprimits per desenvolupar la pràctica

La recuperació, edició i integració dels continguts - Implementació de la navegació de l'espai web.

1. Conversió dels documents originals Word a format HTML i incloure els elements bàsics del disseny

Obrir Word i cridar cada document.

Immediatament salvar el document com a pàgina web (guardar en format HTML, si fem servir Word'97) dins del directori del projecte, donat-li el nom adequat segons la planificació.

Incorporar a cada document el fons de pantalla comú a tot el projecte (triarem algun dels disponibles a Word)

Posar el titol de la pràctica amb el tipus de lletra i color adequat al disseny decidit.

Als documents decidits amb anterioritat incorporar al lloc adequat les imatges (soposem que les imatges ja estan preparades en format .gif o .jpg)

Salvar de nou el document per guardar els canvis realitzats a cadascún.

2. Crearem la plana de referències web

Obrir Word

Archivo/Nuevo/Página web en blanco (Archivo/Nuevo/Paginas web/Página web en blanco, en Word'97)

Posar el fons de pantalla i el títol "Webs de referència"

Crear tres capítols, cadascun corresponent i adequat a cadascuna de les pràctiques.

Posar en cada apartat l'enllaç a a una plana web de referència.

Posar les marques internes a cadascun dels apartats de la plana.

Escriure un petit menú a l'inici del document amb els tres apartats i l'opció "tornar al menú principal"

Enllaçar cadascuna d'aquestes opcions del menú a cadascun dels apartats interns de la plana de referències web.

Enllaçarem l'opció tornar a la plana principal a la plana "index.htm" (que encara no s'ha creat)

Salvar el document.

3. Construirem la navegació de les tres planes de pràctiques.

Des de Word cridarem, un a un, cadascun dels documents HTML que formen part del nostre projecte.

Posarem marques internes a cadascun dels apartats que vullguem referenciar de cada plana (insertar/marcador).

Crearem un petit menú a l'inici de cada document, aquest menú incopora les etiquetes dels apartats interiors i dues més, una per enllaçar a les referències web adequades i un altra per tornar al menú principal

Enllaçarem cadascuna de les referències internes d'aquest menú a la marca corresponent del document.

Establirem els enllaços externs (amb referències internes a apartats d'aquells documents, si convé).

Salvarem cadascun dels documents.

4. Creació del menú principal

Obrir Word

Archivo/Nuevo/Página web en blanco (Archivo/Nuevo/Paginas web/Página web en blanco, en Word'97)

Posar el fons de pantalla i el títol "Menú Principal"

Crear una taula amb una sola columna i quatre files.

Posar a cacascuna de les files la referència a una plana del projecte.

Crear l'enllaç des de cada fila a la plana corresponent.

Salvarem el document amb el nom "index.htm"

Les proves i la publicació del projecte

1. Proves locals.

Anar al directori c:\projecte1 (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.

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 que formen part 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

Utilitzar l'administrador de fitxers de la plana web de geocities per publicar tots els documents de la plana web (els fitxers HTML i tots els gràfics).

Proves dins del servidor remot de Geocities

Obrir l'adreça personal de geocities.

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/

Propostes de treball

Reproduir la pràctica realitzada en aquesta unitat, però amb documents (textos i imatges) personals. Si voleu fer servir els vostres documents i imatges mireu que l'estructura resultant sigui la mateixa que la proposada. Dibuixeu-la en un full apart i doneu nom als fitxers que han d'encabir les diferents planes tal com apareixen a la figura anterior.
Afegir als espais web creats una opció que permeti pujar al menú interior de cada plana secundària. Per representar aquesta opció de pujar al menú principal es pot utilitzar alguna de les fletxes (gifs animats) següents, enllaçada a una marca que s'ha de crear a l'inici de cada plana:

Pensar "idees" possibles per temes que ens interessin o que ens siguin especialment propers. Intentar aprofondir i especificar una mica més les idees fins arribar a construir el diagrama en arbre de l'espai imaginat.
Valorar el cost en temps que comportaria el desenvolupament de cadascuna de les idees imaginades.
Pensar quins recursos, continguts o fitxers de llibreria serien necessaris.

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

Versió castellana de l'espai de geocities-yahoo: http://es.geocities.yahoo.com/

Documentació de referència per crear planes web (PIE - XTEC)