POL ROCATraducció i Disseny

Presentació del projectePÀGINA WEB DEL CIFO DE L’HOSPITALET

Pol RocaCurs de Disseny Gràfic Digital

CIFO de L’Hospitalet – Juliol 2010

OBJECTIUS

La pàgina web del CIFO de L’Hospitalet ha de servir per:

Presentar-ne l'estructura i activitats, en tant que centre de formació adscrit al SOC i de referència a nivell estatal

Oferir la informació necessària per facilitar l’accés al centre

Recalcar la relació del centre amb l’activitat professional real

Oferir un espai d’interactivitat per a professorat, alumnes i exalumnes

Dotar el centre d’una identitat gràfica pròpia

REFERENTSWEBS DE TEMÀTICA RELACIONADA AMB LA DEL CIFO

SERVEI D’OCUPACIÓDE CATALUNYA

www.oficinadetreball.cat[cons. 8/7/2010]

PUNTS D’INTERÈS Tipografia i colors Maquetació en general

REFERENTSWEBS DE TEMÀTICA RELACIONADA AMB LA DEL CIFO

REDTRABAJ@

www.redtrabaja.es[cons. 13/7/2010]

PUNTS D’INTERÈS Tipografia i colors Maquetació en general

REFERENTSWEBS DE TEMÀTICA RELACIONADA AMB LA DEL CIFO

BARCELONA ACTIVA

www.barcelonactiva.cat[cons. 13/7/2010]

PUNTS D’INTERÈS Organització de continguts Distribució d’enllaços i barres de navegació

PUNTS FEBLES Elements gràfics massa grans Colors molt cridaners

REFERENTSWEBS DE TEMÀTICA RELACIONADA AMB LA DEL CIFO

UNIVERSITAT AUTÒNOMA DE BARCELONA

www.uab.cat[cons. 22/7/2010]

PUNTS D’INTERÈS Organització de continguts Distribució d’enllaços i barres de navegació Ús de galeria animada en Flash a manera de banner Barra d’eines de la web a la part superior de la pàgina Ús del símbol [+] per indicar els enllaços al text complet dels articles

REFERENTSWEBS DE TEMÀTICA RELACIONADA AMB LA DEL CIFO

UNIVERSITAT OBERTA DE CATALUNYA

www.uoc.edu[cons. 22/7/2010]

PUNTS D’INTERÈS Ús del color simple però efectiu Ubicació i funcionament de l’accés al Campus Virtual Ús dels símbols > i >> per indicar l’enllaç a les diferents seccions Organització dels enllaços al peu de la pàgina Presència en moltes xarxes socials

REFERENTSWEBS D’INTERÈS PEL SEU DISSENY

TELEVISIÓ DE CATALUNYA

www.tv3.cat[cons. 13/7/2010]

PUNTS D’INTERÈS Exemple d’aplicació de galeria dinàmica en Flash per presentar els continguts destacats

REFERENTSWEBS D’INTERÈS PEL SEU DISSENY

KORAIL

www.korail.com[cons. 8/7/2010]

PUNTS D’INTERÈS Esquema de colors Estructura i funcionament del menú de navegació superior Disseny dels botons (forma, color, ús de la tipografia)

REFERENTSWEBS D’INTERÈS PEL SEU DISSENY

SAMSUNG

www.samsung.com[cons. 8/7/2010]

PUNTS D’INTERÈS Esquema de colors Estructura i funcionament del menú de navegació superior Disseny dels botons (forma, color, ús de la tipografia)

REFERENTSWEBS D’INTERÈS PEL SEU DISSENY

EL PERIÓDICO DE CATALUNYA

www.elperiodico.cat[cons. 20/7/2010]

PUNTS D’INTERÈS Estructura i funcionament del menú de navegació principal (barres principal i secundària) Esquema de colors Disseny dels botons (pràctica absència de volum, canvi de color molt suau en situar-hi el cursor)

PUNTS FEBLES Obligació de clicar un element de la barra principal per desplegar-ne la secundària

ORGANIGRAMAPROPOSTA D’ORGANIGRAMA DE CONTINGUTS PER A LA WEB DEL CIFO

Web CIFO

UbicacióCursosPresentació PremsaActivitatsinternes

Contacte

Què és el CIFO

Qui som

In-for-mà-tica

Dis-seny

Au-dio-vi-sual

Ingrès

Re-qui-sits

Ins-crip-cióen línia

Pu-bli-ca-cions

Treballs

Tre-balls alum-nes

Recercapedagógica

Al-tres

Des-crip-ció d'es-pais

Ga-le-ria

Ins-tal·la-cions

Descripciói programaper àrees

PASPro-fes-sors

CAPTURESASPECTE BÀSIC DE LA PÀGINA D’INICI

La pàgina d’inici s’estructura en tres blocs horitzontals:

Superior, amb els menús de la pàgina (idioma, mida de lletra), caixes de cerca, accés a la intranet i barra de navegació Central, amb una galeria animada d’enllaços destacats Inferior, amb enllaç a les webs de les institucions i seccions més tècniques que de contingut

CAPTURESZONES ACTIVES DE LA PÀGINA D’INICI

S’ha procurat que hi hagi el màxim de zones actives en la pàgina.

En la imatge es mostren remarcades totes les parts de la web susceptibles d’interacció (enllaços i caixes de text)

CAPTURESCOMPORTAMENT DELS BOTONS A LA BARRA DE NAVEGACIÓ

En passar el cursor per sobre la barra de navegació, els botons s’il luminen i a sota ·apareix una barra de navegació secundària amb un enllaç a les diferents seccions de cada apartat.D’aquesta manera es pot accedir a la pràctica totalitat dels continguts de la web amb només un sol clic.

CAPTURESEXEMPLE DE TRANSICIÓ DE LA GALERIA ANIMADA

La galeria animada en Flash és un recurs que permet presentar els trets bàsics del CIFO d’una forma atractiva, sense requerir cap esforç per part de l’usuari.En cas que el visitant de la web mostri interès per algun contingut, hi pot accedir ràpidament a través d’un botó fàcilment localitzable.També es pot tornar a qualsevol fotografia de la galeria clicant sobre la miniatura a la part inferior.

CAPTURESPÀGINA DE PRESENTACIÓ DEL CENTRE

Un dels objectius de la web és el de presentar els continguts d’una forma clara, sense abusar dels elements gràfics d’una forma gratuïta.

En aquest cas, la presentació del centre es limita a contenir una versió lleugerament ampliada de la descripció que figura a la guia oficial dels CIFO.

CAPTURESPÀGINA DE PRESENTACIÓ DEL CENTRE

Aquí cal destacar la presència de dos botons, que permeten tornar al principi del document o un pas enrere en la jerarquia de continguts, i que anirien situats al peu de les pàgines de text.

CAPTURESINDICACIÓ DE LA UBICACIÓ DEL CENTRE

Per indicar la ubicació del centre es fa servir un applet de Google Maps, com a la web del SOC.

CAPTURESFITXA DEL CURS DE DISSENY GRÀFIC DIGITAL

La fitxa del curs es composa de la descripció que figura a la guia oficial dels CIFO, acompanyada si s’escau d’unes mostres dels treballs realitzats pels alumnes del curs i un enllaç directe a la preinscripció en línia.

CAPTURESFITXA DEL CURS DE DISSENY GRÀFIC DIGITAL

Aquí es pot observar el funcionament del menú lateral (present en totes les pàgines excepte en la d’inici): les categories que contenen diversos elements despleguen la llista en clicar-hi a sobre. El fet que estiguin desplegades o no s’indica amb una icona rotatòria en forma de triangle.

CAPTURESFITXA DEL CURS DE DISSENY GRÀFIC DIGITAL

També cal advertir l’existència d’una barra d’ubicació simple al capdamunt de les pàgines de text.Per una banda informa el visitant de la seva ubicació actual dins l’organigrama de continguts de la web.Per l’altra, permet tornar de forma ràpida a qualsevol punt de la jerarquia (cada segment de text és un enllaç).

POL ROCATraducció i Disseny

Presentació del projectePÀGINA WEB DEL CIFO DE L’HOSPITALET

Pol RocaCurs de Disseny Gràfic Digital

CIFO de L’Hospitalet – Juliol 2010