El projecte ha de servir per sintetitzar els nous coneixements adquirits durant el curs i a la vegada, utilitzar-los en la realització d'una aplicació web que pugui ser útil per a la nostra tasca docent o personal.

La correcta realització del projecte, conjuntament amb els exercicis dels mòduls, ens permetrà finalitzar satisfactòriament el curs i disposar de la certificació corresponent.

El projecte ha de ser personal i inèdit.

El treball sobre el projecte comença amb la proposta del tema al tutor al final del mòdul 5. La realització d'aquesta proposta ha de seguir les indicacions que es donen en aquesta pàgina. A partir del mòdul 7, els exercicis que es realitzaran s'han d'orientar per formar part del projecte.


A grans trets, el projecte ha de reunir les següents característiques.
  • La interactivitat entre l'usuari i la web. Hem vist al llarg del curs múltiples exemples on l'usuari "controla" el que desitja veure, el nostre projecte n'ha de ser un bon exemple.


  • La presentació ha de ser entenedora i agradable per l'usuari i s'ha de deduir ràpidament la seva utilitat. D'aquesta manera evitarem que sigui rebutjada per l'usuari en no poder-la entendre.


  • La uniformitat en els estils s'ha d'aconseguir mitjançant un full d'estils comú a totes les pàgines.


  • La reutilització també és imprescindible. Per exemple, si fem una aplicació per mostrar les fotos del viatge de final de curs, el curs següent també hem de poder utilitzar la mateixa aplicació canviant únicament les imatges, descripcions i estils que podran estar definits en un únic arxiu de text. Hem de fer que tot el codi i estructura de les pàgines es puguin tornar a aprofitar gairebé sense modificar-les.


  • La globalitat dels continguts. S'ha de procurar utilitzar la majoria dels continguts estudiats durant el curs. Com a mínim hem d'implementar algun dels conceptes corresponents a cadascun dels blocs temàtics del curs. A més, han d'estar contextualitzats amb la resta d'elements de la web.

En la valoració del projecte es tindrà en compte que incorpori el màxim de solucions possibles mitjançant JavaScript i DHTML. Sempre que sigui possible i contextualment justificable, s'han d'aplicar els conceptes descrits en aquest curs. Si algun apartat es pot fer amb HTML o amb JavaScript, seleccionarem preferentment l'opció de JavaScript.


L'aplicació web ha d'ésser compatible amb els principals navegadors (Netscape Navigator, Mozilla, Internet Explorer). Si alguna part no és possible compatibilitzar-la, ho hem de detectar, i si s'escau, mostrar alguna altra opció alternativa que tingui la mateixa funcionalitat. Hem d'evitar que apareguin errors per incompatibilitat, ja que desconcerten a l'usuari i donarien una mala impressió del nostre treball.

  Exemples de projectes:

A continuació s'exposa alguns exemples de projecte. No és obligatori que el triem d'entre aquesta llista, tot i que també són opcions vàlides. La seva descripció ens servirà per donar-nos una idea de com pot ser el nostre projecte.
  • Calendari de curs: Aplicació web que mostra un calendari, amb opció de selecció anual, mensual, setmanal i diària, i on cadascun dels dies indiquen els principals events que habitualment són programats des del principi de curs (reunions periòdiques de tutors o equips docents, dates d'avaluació, períodes de vacances i festius, etc.). Les dades dels events s'han de trobar en un únic fitxer, de tal manera que faciliti qualsevol canvi amb agilitat i facilitat.

  • Notes alumnes: Aplicació web que permeti mostrar les notes dels alumnes que hi ha desades en un únic fitxer de dades. Introduint una dada identificadora de l'alumne ha de mostrar la llista de qualificacions parcials obtinguda en una determinada assignatura.

  • Qüestionaris: Aplicació web que mostra un conjunt de preguntes tipus test, generades aleatòriament d'entre un conjunt ampli que es troba desat dins un únic fitxer i convida a seleccionar les respostes correctes. El resultat s'ha d'enviar al correu electrònic del professor i/o s'ha de mostrar directament sobre la pantalla de l'usuari indicant la valoració obtinguda.

  • Àlbum d'imatges: Aplicació web per mostrar múltiples imatges, classificades i comentades, corresponents als events habituals del centre, com viatges fi de curs, festes escolars, activitats, etc. La relació d'imatges i els estils que s'han d'aplicar s'ha de trobar referenciada en un fitxer, que serà l'únic a modificar si s'ha de crear un nou àlbum.

  • Automatitzar la revista escolar: Es tracta de crear l'estructura (arxius .js i .css) que ens permetin editar diversos números d'una revista escolar o web del centre canviant, únicament, el contingut de les pàgines. Això significa que, tant els estils, com la disposició dels elements, els menús i el sistema de navegació han de ser reutilitzables sense fer-hi, pràcticament, cap modificació. Ho podem acompanyar de diversos formularis, amb validació, que permetin els usuaris posar-se en contacte amb els editors de la web per demanar informació o expressar opinions.
 
Durant la fase de creació del projecte, aquest ha d'estar penjat dins una carpeta de nom "projecte" situada dins l'espai web facilitat per la SGTI per a la realització del curs. En aquest espai, el tutor podrà fer el seguiment del projecte i veure'l per poder atendre les consultes. La ubicació final del projecte acabat també es farà en la mateixa carpeta.

La carpeta "projecte" s'ha d'haver creat seguint les directrius indicades en les pràctiques 1, 2 i 3 del mòdul 1 i la seva pàgina principal d'accés s'ha d'anomenar "index.htm". A la pàgina principal del directori arrel del nostre espai web també hi ha d'haver un enllaç que ens porti fins al projecte (conjuntament amb els enllaços als exercicis dels mòduls), tal com està explicat a l'exercici del mòdul 1.

  Recomanacions
Per la realització del projecte és important acompanyar-nos d'una bona eina d'edició web. Dreamweaver ens pot ser útil, principalment per fer les maquetacions de les pàgines i per editar text amb gran extensió.

En canvi, per crear i provar el codi JavaScript són més útils els editors de text convencional o el Dreamweaver amb l'opció de "Mostrar vista código". El codi JavaScript s'ha de provar en petits blocs i en fitxers apart. Ens podem ajudar amb les tècniques de depuració explicades a la pràctica 3 del mòdul 8. Quan ja hem comprovat el correcte funcionament, l'incorporem a la pàgina web corresponent.

Per facilitar la reutilització de les pàgines hem de fer que el seu contingut sigui independent de la pàgina contenidora. Podem crear un fitxer de nom dades.js que contingui un array i/o variables globals amb dades com imatges, textos, events, etc. i després els enllacem a la pàgina contenidora tal com s'explica als apartats 1 i 2 de la pràctica 4 del mòdul 8. Amb els estils també farem una cosa semblant.

Si hem separat adequadament les dades de les pàgines contenidores, aconseguirem la màxima reutilització, ja que en properes modificacions solament farà falta canviar les dades i els estils que estaran en fitxers separats.

  Proposta
A l'hora de presentar la proposta, hem de fer una pàgina web amb aquestes dades:

Identificació. Nom i cognoms, adreça de correu, títol de la web i tema.

Descripció. Resum dels continguts, breu.

Esquema. Seccions, pàgines i relació entre elles.

Components. Aquesta és la part més important. Hem d'explicar quins tipus de components i recursos de cada tecnologia pensem utilitzar, per què, i com.

Interfície.
Més que l'aspecte gràfic, interessa explicar la lògica i la funcionalitat, com es lliguen els diversos components i quines estratègies utilitzem.

  Calendari del projecte
E v e n t D a t a
Proposta
dimarts, dia 28 de gener de 2003
Exercicis del mòdul 7 (al projecte) dimarts, dia 11 de febrer de 2003
Exercicis del mòdul 8 (al projecte) dimarts, dia 25 de febrer de 2003
Revisió i seguiment dimarts, dia 25 de març de 2003
Lliurament i fi dimarts, dia 8 d'abril de 2003