100726CIFOweb
description
Transcript of 100726CIFOweb
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