Presentació del projecte de web per al CIFO de L'Hospitalet

1. POL ROCA
Traducció i Disseny
Presentació del projecte
PÀGINA WEB DEL CIFO DE L’HOSPITALET
Pol Roca
Curs de Disseny Gràfic Digital
CIFO de L’Hospitalet – Juliol 2010

2. 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

3. REFERENTS
WEBS 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

4. REFERENTS
WEBS 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

5. REFERENTS
WEBS 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

6. REFERENTS
WEBS 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

7. REFERENTS
WEBS 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

8. REFERENTS
WEBS 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

9. REFERENTS
WEBS 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)

10. REFERENTS
WEBS 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)

11. REFERENTS
WEBS 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

12. ORGANIGRAMA
PROPOSTA D’ORGANIGRAMA DE CONTINGUTS PER A LA WEB DEL CIFO
Web CIFO
Recerca Activitats
Presentació Cursos Ubicació Contacte pedagógica
Premsa
internes
Què Qui Ins- Descripció
és el tal·la- i programa
som cions Ingrès Treballs
CIFO per àrees
Pro- PAS Des- Ga- In- Dis- Au- Al- Re- Ins- Tre- Pu-
fes- crip- crip- balls bli-
ció
le- for- seny dio- tres qui- ció
sors alum- ca-
d'es- ria mà- vi- sits en nes cions
pais tica sual línia

13. CAPTURES
ASPECTE 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

14. CAPTURES
ZONES 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)

15. CAPTURES
COMPORTAMENT 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.

16. CAPTURES
EXEMPLE 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.

17. CAPTURES
PÀ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.

18. CAPTURES
PÀ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.

19. CAPTURES
INDICACIÓ 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.

20. CAPTURES
FITXA 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.

21. CAPTURES
FITXA 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.

22. CAPTURES
FITXA 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ç).

23. POL ROCA
Traducció i Disseny
Presentació del projecte
PÀGINA WEB DEL CIFO DE L’HOSPITALET
Pol Roca
Curs de Disseny Gràfic Digital
CIFO de L’Hospitalet – Juliol 2010