Aquest curs tractarà de les diferents competències i tècniques que intervenen en el procés de disseny d'un projecte web. L'objectiu del curs és l'assoliment dels coneixements bàsics per finalitzar amb èxit qualsevol projecte de disseny web tant si es tracta de la web d'un centre educatiu com si es tracta d'una web personal.

Re-dissenyar una web o començar-la de nou no és una tasca trivial. Implica temps de dedicació i coneixements sobre diverses disciplines, com ara l'arquitectura de la informació, el disseny gràfic i la resolució de les qüestions tècniques. Per aquesta raó és recomanable establir prèviament, una planificació del temps de dedicació i dels passos que s'aniran seguint al llarg del curs per realitzar el projecte.

Hi ha dues raons que fan molt important i necessari saber en cada moment quins són els objectius i requeriments de cada fase:

• preventiva: us permetrà anticipar possibles dificultats o errors abans de començar cada fase del projecte i, per tant, trobar solucions immediates.
• visió de conjunt: us ajudarà a no perdre la visió de conjunt del projecte. Conèixer la raó i la importància de cada fase us evitarà la sensació de confusió i desorientació en el procés de desenvolupament del projecte, especialment si aquest té una certa complexitat.

Finalment, aquest curs està dividit en dues parts:

• La primera part més teòrica, desenvolupa en cadascun dels mòduls les diferents fases que corresponen al procés de creació del projecte del curs.
• La segona part, de caràcter més pràctic, aplica les competències assolides al llarg del curs a dos exemples de disseny web, dos tipus de plataformes de publicació i gestió de continguts en web: un bloc i un Moodle de centre.

Seguidament us avancem un índex del curs que correspon al procés general de disseny del projecte de la web. Cada fase, com ja us hem explicat, correspon a un o dos mòduls, en funció de la complexitat o l'abast del contingut.

En el procés de disseny d'un projecte web podeu identificar sis apartats:

• Requeriments del projecte: en la primera fase del projecte cal que us respongueu a unes preguntes bàsiques del tipus: Quina ha de ser la missió de la web del centre?, Quins continguts hi publicarem?, Quina infraestructura web és la més idònia per aquest projecte?, Quines eines necessito per optimitzar la feina?. També us ajudarà a conèixer bones pràctiques de dissenys web i referències del disseny web actual. Disposareu, finalment, d'una rúbrica (és una guía que intenta avaluar un funcionament basant-se en la suma d'una gama complerta de criteris, més que en un nombre.) d'auto-avaluació que us ajudarà a valorar, de manera objectiva, la qualitat de la web de centre o personal actual i, al mateix temps, us servirà de guia i de referent en el procés de desenvolupament de l'actualització de la web com si la iniciéssiu des del principi. Aquesta fase es correspon amb la totalitat del mòdul 1.
• Estructura del projecte: Allunyeu-vos per una bona estona de l'ordinador i agafeu llapis i paper. És el moment de dibuixar com serà el mapa del projecte i d'identificar-ne l'objectiu de cada part. En aquesta fase cal que us pregunteu: Quina estructura ha de tenir el projecte? i Com es relacionen les diferents pàgines?. És en aquest moment quan dibuixareu la composició de la pàgina principal i coneixereu l'activitat coneguda com wireframing, és a dir, l'ús d'eines que faciliten la creació àgil de mockups ¹⁾ o esbossos del disseny d'una pàgina web. Aquesta fase correspon a les dues primeres pràctiques del mòdul 2.
• Color, tipografia i navegació: Un bon disseny web és quelcom més que un aspecte visual agradable. Conceptes com la teoria del color, tipografia, composició, navegació i usabilitat formen part d'un bon disseny web. Aquests conceptes es barregen per aconseguir que els usuaris se sentin còmodes davant de la pàgina web. En aquest mòdul aprendreu els conceptes bàsics del color, de la tipografia i de la navegació. Aquesta fase correspon a les pràctiques 3-8 del mòdul 2.
• Disseny del prototip: En aquesta fase aprendreu a transformar els esbossos de la pàgina web en un prototip definitiu de la mà d'una eina lliure de dibuix vectorial, Inkscape. Aquest prototip us ajudarà a valorar els diferents elements visuals i compositius de la web abans de realitzar la conversió a HTML i CSS. Aquesta fase correspon a la totalitat de les pràctiques del mòdul 3.
• Traducció del disseny al llenguatge de la web. Al llarg de dos mòduls s'explica els fonaments del dos llenguatges bàsics de les pàgines web, l'HTML i el CSS. El coneixement mínim dels llenguatges HTML, per a l'estructuració dels continguts, i de CSS, per a la definició de l'estil visual de la pàgina, tots dos imprescindible perquè els navegadors representin correctament els vostres dissenys. Aquesta fase correspon a la totalitat de les pràctiques del mòdul 4 i 5.
• Proves de validació. Abans de passar el projecte a producció, cal que feu un conjunt de proves que verifiquin qüestions com l'ús correcte dels estàndards de la web, accessibilitat, optimització i correcta representació amb els diferents navegadors web disponibles avui en dia. Aquesta fase correspon a la totalitat de les pràctiques del mòdul 6.

Els dos últims mòduls 7 i 8 estan dedicats a l'adaptació del disseny a una plantilla funcional per a un hipotètic bloc de centre (basat en la tecnologia Wordpress²⁾), un espai virtual d'aprenentatge basat en Moodle³⁾) i, finalment, un e-portafoli basat en Mahara⁴⁾.