SlideShare uma empresa Scribd logo
1 de 65
ESCOLA UNIVERSITÀRIA D’ENGINYERIA
TÈCNICA DE TELECOMUNICACIÓ LA SALLE
TREBALL FINAL DE GRAU
GRAU EN ENGINYERIA INFORMÀTICA
Bermúdez Merino, Gabriel Climent Ferrer, August
PORTAL WEB ICIP
ACTA DE L'EXAMEN
DEL TREBALL FINAL DE GRAU
Reunit el Tribunal qualificador en el dia de la data, l'alumne
D. Gabriel Bermúdez Merino
va exposar el seu Treball de Final de Grau, el qual va tractar sobre el tema
següent:
Portal Web ICIP
Acabada l'exposició i contestades per part de l'alumne les objeccions formulades
pels Srs. membres del tribunal, aquest valorà l'esmentat Treball amb la
qualificació de
Barcelona,
VOCAL DEL TRIBUNAL VOCAL DEL TRIBUNAL
PRESIDENT DEL TRIBUNAL
Abstract
La velocitat amb que avança la tecnologia fa que tan els departaments públics com els
privats tinguin que evolucionar per a donar un millor servei a l’usuari. En el cas actual,
per cobrir les exigències dels usuaris, es fa necessària la renovació de la web del Institut
Català Internacional per la Pau, amb l'objectiu d'oferir al ciutadà un Portal Web que
ofereixi tots els serveis necessaris per a una bona experiència de navegació, a més de
complir els estàndards d'accessibilitat establerts.
La creació del portal es realitza sobre la plataforma corporativa del client, la qual
utilitza l'eina de gestió de continguts Vignette VCM 7.3 i de portals Vignette VAP 7.4.
Dita plataforma proveeix un portal genèric, el qual proporciona components a reutilitzar
per tal de fer més flexible i òptima la creació de nous portals, informació proporcionada
per l’Oficina Tècnica de Vignette. També proveeix components visuals i mecanismes
per interaccionar amb altres serveis corporatius externs.
Resum
El present document dona a conèixer les fases que es porten a terme durant la creació
d'un nou portal amb l'eina corporativa de gestió de portals del client, centrant la seva
redacció en el perfil d'Analista Programador, el qual es el que ateny al redactor.
El Departament ja ha realitzat una fase inicial d’anàlisi i conceptualització dels diferents
web a incloure dins d’aquest web de l’organisme. S’aprofitarà la migració del portal a
l’Oficina Tècnica de Vignette per també optimitzar l’arquitectura dels continguts així
com afegir noves funcionalitats, la majoria heretades del web Genèric mantingut per
l’Oficina Tècnica de Vignette.
Degut a aquest últim punt, la fase de presa de requeriments realitzades per el Cap de
Projecte i l'Analista Funcional estava ja molt definida i el disseny tècnic del portal
realitzat per l'Analista Programador, essent un portal fill del base per l’Oficina Tècnica
de Vignette i amb els wireframes dissenyats per l'equip del departament, facilitaven el
disseny sobre la plataforma de gestió.
Desprès de l'anàlisi es va fer un disseny preliminar dels elements que no proporcionava
l'eina de gestió, sobretot components de visualització. Dit disseny va anar evolucionant
en el temps fins arribar a un disseny estable.
Degut a la necessitat de realitzar una integració al portal amb el servei de notícies
Meltwater és van fer un seguit de reunions e implantació posterior de dit servei al nou
disseny del portal.
Una vegada finalitzat el disseny del portal, la següent fase tractava sobre la migració del
contingut de la web antiga (notícies, agendes, ...) a la nova web, seguint la nova
estructura de continguts establerta per l’Oficina Tècnica de Vignette.
Finalment es va preparar una formació per a usuaris i WebMasters amb l'objectiu de
presentar la nova web i la metodologia d'introducció de nous elements al portal.
Portal Web ICIP Bermúdez Merino, Gabriel
- i -
ÍNDEX
1. INTRODUCCIÓ ....................................................................................................... 3
1.1. ABAST DEL PROJECTE ............................................................................................. 3
1.2. CONTEXT DEL PROJECTE ........................................................................................ 4
1.3. METODOLOGIA I ORGANITZACIÓ DEL PROJECTE..................................................... 6
1.4. PLANIFICACIÓ DE TRASPASSOS................................................................................ 9
1.5. ESTUDI DE RISCOS................................................................................................. 10
1.6. MANTENIMENT ..................................................................................................... 11
1.7. SUPORT ................................................................................................................. 12
2. REQUERIMENTS.................................................................................................. 14
2.1. PUNTS ESSENCIALS................................................................................................ 14
3. ARQUITECTURA.................................................................................................. 16
3.1. ARQUITECTURA DE LA INFORMACIÓ ..................................................................... 16
3.2. CRITERIS DE DISSENY............................................................................................ 17
3.3. ARQUITECTURA DEL PORTAL ................................................................................ 19
4. DISSENY ................................................................................................................ 27
4.1. ESTRUCTURA DE CONTINGUTS .............................................................................. 27
4.2. ESTRUCTURA DE NAVEGACIÓ................................................................................ 33
4.3. INTEGRACIÓ AMB RSS MELTWATER.................................................................... 38
5. IMPLEMENTACIÓ................................................................................................ 39
5.1. CONFIGURACIÓ DELS ENTORNS............................................................................. 39
5.2. DESENVOLUPAMENT D’ELEMENTS DE VISUALITZACIÓ .......................................... 42
5.3. MIGRACIÓ DE CONTINGUTS................................................................................... 43
5.4. PROVES................................................................................................................. 44
5.5. FORMACIÓ............................................................................................................ 44
6. PROVES ................................................................................................................. 46
6.1. BANC DE PROVES................................................................................................... 46
6.2. EINES DE PROVES .................................................................................................. 46
6.3. RESULTATS ESPERATS........................................................................................... 48
Portal Web ICIP Bermúdez Merino, Gabriel
- ii -
7. FORMACIÓ............................................................................................................ 49
7.1. ESTRUCTURA DE LA FORMACIÓ............................................................................. 50
8. ESTUDI ECONÒMIC............................................................................................. 54
8.1. CONCEPTES........................................................................................................... 54
8.2. HARDWARE I SOFTWARE ...................................................................................... 55
9. CONCLUSIONS ..................................................................................................... 57
10. BIBLIOGRAFIA..................................................................................................... 58
A. TAULA D'IL·LUSTRACIONS............................................................................... 59
B. GLOSSARI ............................................................................................................. 60
Portal Web ICIP Bermúdez Merino, Gabriel
- 3 -
1. Introducció
El present projecte sorgeix de la necessitat del Institut Català Internacional per la
Pau de migrar la web en HTML estàtic que fa les funcions de portal a la xarxa, cap a un
Portal Web dins de l’estructura corporativa del client, utilitzant les aplicacions
corporatives per aquest objectiu, en el cas que ens abast: Vignette, a més d’aplicar els
seus protocols, metodologies, documentació, etc.
L'arquitectura de la informació proposada té en compte l'escalabilitat per a donar
resposta a futures necessitats d'informació: nous recursos, nous serveis, etc. Requisits
arquitectònics i de disseny que son tractats més endavant.
1.1. Abast del projecte
El principal abast del projecte es la migració del portal en format estàtic cap a la
plataforma Vignette, aquesta migració requereix d’un seguit de punts que s’han de
complir.
Figura 1 Migració del portal estàtic
Aquestes línies d’actuació que requereix el projecte, tant a nivell de servei com a
requeriments tècnics i funcionals, s’esmenen a continuació:
 Abast del servei:
 Conceptualització i arquitectura de continguts
 Gestió del projecte
 Anàlisi de continguts i serveis
 Anàlisi de portals
Portal Web ICIP Bermúdez Merino, Gabriel
- 4 -
 Disseny tècnic dels components
 Desenvolupament dels components i configuració de funcionalitats
 Activitats de proves
 Migració de continguts
 Muntatge del web
 Gestió del canvi
 Gestió de la Qualitat del servei
 Suport post implantació
 Suport a WebMaster
 Requeriments tècnics i funcionals:
 Preparar el portal per al català, castellà i anglès
 Construcció de la estructura del portal
 El portal ha de permetre un canvi de css per al canvi d’imatge
 Integració amb el software de gestió multimèdia per l’arxiu multimèdia
de l’ICIP
 Cal preveure l'integració de l’agenda
 Butlletí electrònic (implica desenvolupar un element de presentació)
 Desenvolupament dels diferents formularis de consulta
 RSS per publicacions i activitats
 Integració amb el cercador per cercar dins del portal
 Desenvolupament de 2 “grids” i 7 “formes de presentació”
 Migració de 250 pàgines (font en HTML o documents ofimàtics)
 Integració del servei de noticies Meltwater
1.2. Context del projecte
L’Oficina de gestió de portals ofereix funcionalitats comuns a tots els portals
corporatius, les quals deuen ésser utilitzades per la implementació de nous:
 Funcionalitat Java
 Formes de presentació, estils i portlets VAP que conformen el portal genèric.
Hi ha portals antics o bé amb requeriments especials que no fan ús del genèric, però la
idea és que els nous portals reutilitzin al màxim els components del portal genèric, per
tal de fer més flexible i òptima la creació de nous portals.
Val a dir que el portal genèric també proveeix components visuals i mecanismes per
interaccionar amb altres serveis corporatius externs a l’Oficina Tècnica de Vignette.
Portal Web ICIP Bermúdez Merino, Gabriel
- 5 -
Figura 2 Disseny estructural de Vignette
El nou portal s’implementarà amb els components que proveeix l’Oficina Tècnica de
Vignette i el web Genèric. També tindrà peces pròpies. Les peces pròpies seran
components definits pel Departament i controlats també pel mateix. Durant la fase
d’anàlisi funcional cal veure quines peces són genèriques i quines caldrà fer-les
específicament pel portal i per tant no es podran reutilitzar les del web Genèric.
Posteriorment, s’han de dicidir funcionalitats específiques que s’han fet per a un portal,
passin a ser funcionalitats genèriques.
Figura 3 Disseny de portals de Vignette
Portal Web ICIP Bermúdez Merino, Gabriel
- 6 -
1.3. Metodologia i organització del projecte
A continuació es dona a conèixer la metodologia implementada durant el projecte, així
com la organització interna del equip de treball dins del projecte.
1.3.1. Metodologia d’execució del servei
La metodologia de treball utilitzada durant la portada a terme del projecte ha sigut la
establerta per el departament de Tecnologies de la Informació de l’Oficina Tècnica de
Vignette.
Figura 4 Metodología de treball
En el nostre cas afectaran les fases centrals tenint com a principals activitats les que
destaquem a continuació:
 Disseny de la funcionalitat
 Anàlisi tècnic
 Definició de la gestió
 Fase de codificació
 Etapa de proves
 Formació als usuaris i implantació del sistema
 Transferència a l’entorn d’explotació
 Prova d’acceptació final
Cal tenir en compte que al final de la posada en marxa del sistema a l’entorn productiu
comença el suport post implantació que implica l’activitat Suport Post Implantació.
1.3.2. Organització i Road Map del projecte
A continuació es presenta el Road Map del projecte, així com l’organització de l’equip
de treball que han participat en el desenvolupament del portal.
Portal Web ICIP Bermúdez Merino, Gabriel
- 7 -
1.3.2.1. Road Map
Al llarg de tot el projecte es generen productes intermedis, generalment en forma de
documentació, fins a l'entrega final del projecte, on, a més a més, es realitza l'entrega
del codi font i l'executable (implantació).
Figura 6 Definició del Road Map
Figura 5 Estimació de temps del projecte
Portal Web ICIP Bermúdez Merino, Gabriel
- 8 -
1.3.2.2. Organització
En el present apartat es donen a conèixer els diferents rols que participen al
desenvolupament del projecte, així com les tasques realitzades per cadascun.
Figura 7 Organigrama del projecte
Hi ha la participació en el projecte de persones especialitzades en àrees de coneixement
diverses.
Amb l’objecte d’aprofitar al màxim les capacitats dels recursos utilitzats i per dotar
l’equip de treball de suficient flexibilitat, l’estructura ideal de treball en el projecte seria
la següent:
Figura 8 Descripció dels rols dels actors
Portal Web ICIP Bermúdez Merino, Gabriel
- 9 -
Figura 9 Diagrama de comunicació entre els actors
1.4. Planificació de traspassos
La implementació del portal és realitza a l'entorn dedicat per als desenvolupaments
d'aquests portals proporcionat per l'Oficina Tècnica de Vignette, per aquesta raó, una
vegada s'hagi construït l'estructura del portal es deurà realitzar un traspàs del portal fins
a l'entorn productiu, passant per l'entorn pre productiu per a comprovar la correcta
integració d'aquest.
Aquesta planificació es pot dividir en els següents punts
 Inici de la construcció del portal: Les configuracions del Web inicialment es
duran a terme a l’entorn de consolidació.
 Traspàs “full”: una vegada s’hagin aprovat les proves a l’entorn de
consolidació, el proveïdor complimentarà la documentació de traspàs
corresponent disponible al gestor d’incidències i aleshores si tot és correcte i es
passa les validacions de l'Oficina Tècnica de Vignette, tota la configuració del
portal serà traspassada als entorns de pre producció i producció perquè es pugui
provar tot en aquests entorns.
 Posteriors traspassos: Una vegada s’ha realitzat un traspàs full després els
posteriors traspassos (si calen) en setmanes successives poden ser també full o
bé parcials (certes configuracions noves desenvolupades). Sempre cal obrir una
petició de traspàs al gestor de incidències i complimentar la documentació
corresponent.
Portal Web ICIP Bermúdez Merino, Gabriel
- 10 -
1.5. Estudi de riscos
Degut a la quantitat d’elements dins de l’abast del projecte, es feia indispensable un
estudi de riscos exhaustiu, del qual es van treure les següents conclusions.
Figura 11 Taula de riscos alts del projecte
Figura 10 Descripció de la piràmide de riscos
Portal Web ICIP Bermúdez Merino, Gabriel
- 11 -
1.6. Manteniment
Aquests serveis estan enfocats a la realització de les tasques de manteniment correctiu i
evolutiu dels portals que estiguin en producció sobre la plataforma. S'haurà de disposar
d'un equip de manteniment especialitzat en solucions i tecnologies Internet (J2EE,
XML, xHTML, gestors de continguts i portals, buscadors, normatives d'estàndards i
d'accessibilitat, etc) i que ofereixi un coneixement complet i detallat dels aspectes
tècnics relatius als components i els productes Vignette que conformen la plataforma. A
Figura 12 Taula de riscos mitjans del projecte
Portal Web ICIP Bermúdez Merino, Gabriel
- 12 -
més aquest equip tindrà coneixement en la plataforma Vignette i en les funcionalitats
del portal del Departament, ajudant a aconseguir amb èxit els objectius proposats.
Les activitats que queden cobertes per aquest àrea són les que corresponen al cicle de
vida sencer d'una actuació de manteniment, i que es detallen a continuació.
 Manteniment Correctiu
 Anàlisi de la incidència
 Revisió disseny tècnic
 Correcció i o/configuració del programari
 Execució de proves unitàries
 Execució de proves d'integració en l'entorn d'integració
 Coordinació amb responsables tècnics i funcionals de framework i
portals per actualitzar la documentació tècnica i de configuració
 Documentació de protocols d'implantació
 Actualització de manuals d'usuari
 Manteniment Evolutiu
 Valoració d'esforç
 Disseny funcional de la solució
 Disseny de les proves funcionals
 Disseny tècnic
 Desenvolupament, Correcció i o/configuració del programari
 Disseny i execució de proves unitàries
 Disseny i execució de proves d'integració en l'entorn d'integració
 Disseny i execució de proves de càrrega en l'entorn de preproducció
 Coordinació amb responsables tècnics i funcionals de framework i
portals per actualitzar la documentació tècnica i de configuració
 Documentació de protocols d'implantació
 Documentació de manuals d'usuari
 Formació d'usuari
1.7. Suport
Es realitzaran tasques de suport tant a la part funcional com en la tècnica del portal que
es trobi sobre la plataforma corporativa, independentment de l'estat: en
desenvolupament, en validació, consolidació, producció, etc
 Suport Funcional /Tècnic: troba el suport a l'administració dels portals, la
responsabilitat de la gestió del reposador de components (pàgines, portlets,
configuracions, etc.), l'optimització de l'ús de components mitjançant la
reutilització de components, amb l'estratègia de creixement divergent en funció
de l'escalabilitat dels portals.
 Suport WebMaster: Dins de les tasques de manteniment suport evolutiu es
contempla el donar suport Webmaster als usuaris de l’ICIP.
Portal Web ICIP Bermúdez Merino, Gabriel
- 13 -
Una vegada finalitzat el traspàs de coneixements entre les empreses desenvolupadores i
el ICIP, per tal de garantir la mantenibilitat dels desenvolupaments així com el
manteniment i emmagatzemament de les últimes versions de les aplicacions és farà un
suport post implantació.
Els responsables d'aquest servei participaran en reunions tècniques de definició de nous
desenvolupaments amb tal de garantir que aquests seran integrables dins la
infraestructura existent.
Donat l'alt grau de coneixement de la plataforma per part dels tècnics i el seu
compromís amb la plataforma, aquests suggeriran al ICIP aquells manteniments
evolutius o tasques d'administració que considerin que poden millorar el funcionament
del portal, l'experiència d'usuari dels clients, reduir els costos de desenvolupaments de
nous serveis, etc. aconseguint així una que redundi en una millor percepció del servei
ofert.
Dins aquest abast es donarà suport a:
 Suport al ICIP en la presa de decisions relatives a projectes.
 Participació en el disseny del sistema d'informació de l'organització.
 Interlocució amb usuaris responsables dels processos per a la definició de
requeriments.
 Planificació dels projectes d'acord amb les prioritats de l'organització.
Portal Web ICIP Bermúdez Merino, Gabriel
- 14 -
2. Requeriments
L’objectiu clau del projecte és la creació del portal de l’Institut Català Internacional
per la Pau (ICIP) sobre la plataforma corporativa de publicació web del client,
Vignette Web Content
 S'analitzarà en detall:
 Conceptualització i migració de continguts
 Disseny tècnic dels components
 Desenvolupament components i funcionalitats
 Migració continguts
 Creació del portal
 Tasques a realitzar en el projecte:
 Gestió, coordinació i seguiment de projecte
 Anàlisi de continguts i serveis
 Anàlisi dels portals
 Gestió de proves
 Gestió del canvi
 Qualitat del servei
 Suport
El Departament ja ha realitzat una fase inicial d’anàlisi i conceptualització dels diferents
web a incloure dins d’aquest web de l’organisme. S’aprofitarà la migració del portal a
l’Oficina Tècnica de Vignette per també optimitzar l’arquitectura dels continguts així
com afegir noves funcionalitats, la majoria heretades del web Genèric mantingut per
l’Oficina Tècnica de Vignette.
Destacar que caldrà compatibilitzar el nou portal amb un sistema extern:
 Integració amb el Servei de Notícies Meltwater News (SNMN)
Així doncs caldrà fer el desenvolupament necessari per tal d’integrar l’aplicació amb
SNMN de la forma més òptima possible i amb el menor impacte. L’objectiu és que la
presentació de dades, formularis i llistats de resultats d’aquestes aplicacions emprin la
nova guia d’estils.
Aquest nou portal es preveu que tingui els seus continguts tant en català com en castellà
i anglès.
2.1. Punts essencials
Considerant l’abast del projecte que es desprèn del plec, s’estableixen a alt nivell els
següents punts essencials a analitzar:
 Conceptualització i continguts: Des del Departament ja s’ha fet una primera
anàlisi de la conceptualització de dades i arquitectura de continguts per al nou
web. Caldrà analitzar en detall els documents que han realitzat i veure que
Portal Web ICIP Bermúdez Merino, Gabriel
- 15 -
s’entenen perfectament i que són models d’informació que es poden
implementar tècnicament d’una manera senzilla i eficient .
 Migració de continguts: Tasques de migració dels continguts que hi ha en els
diferents espais existents. Processos d’adequació de dades. Migració tenint part
de la nova informació en documents ofimàtics i pàgines web HTML: es preveu
la migració aproximada de 250 pàgines de contingut. Validació dels processos
de migració i dels continguts ja migrats conjuntament amb membres del ICIP.
 Anàlisi del format dels continguts i serveis del web: quins seran els tipus de
contingut a emprar, taxonomies, rols d’usuaris, workflows, abast de la migració i
mecanismes d’integració de serveis.
 Anàlisi dels portals: es farà una anàlisi del portal des del punt de vista de la
interfície d’usuari per tal que pugui ser allotjat a la plataforma corporativa del
cient.
 Disseny tècnic dels components: Nous desenvolupaments han de seguir les
directrius de Vignette.
 Funcionalitats del portal i mecanismes d’integració amb serveis externs a
l’Oficina Tècnica de Vignette proveïts pel web Genèric: recull de
funcionalitats genèriques bàsiques que el portal ha d’oferir a l’usuari final així
com la interacció amb serveis corporatius que resideixen en plataformes
diferents a la de l’Oficina Tècnica de Vignette. Especial detall a: RSS, Forms,
Butlletins electrònics, Contractació Pública, Servei d’Atenció Ciutadana ,
enllaços a xarxes socials i cercador índexat en Google GSA.
 Integració d’aplicacions específiques en aquest nou portal. Caldrà
desenvolupar aplicacions per garantir òptimes integracions el sistema
extern corporatiu SNMN: Aquesta aplicació es re dissenyarà a nivell de
presentació de la informació per tal què compleixen el llibre d’estils visuals.
 Desenvolupament de nous components com 7 formes de presentació addicionals
 Banc de proves: es detalla el conjunt de proves així com les diferents fases en
les que s’organitzen durant tota la construcció del portal.
 Traspassos del portal: com el portal configurat serà traspassat pels diferents
entorns corporatius fins arribar a l’usuari final.
 Qualitat del software desenvolupat: eines emprades per tal de generar software
de qualitat i estàndard.
 Eines de desenvolupament: software emprat per la codificació Java.
 Gestió de projecte, coordinació i seguiment de tasques principals.
 Gestió del canvi: descripció de les activitats d’aquest procés.
Portal Web ICIP Bermúdez Merino, Gabriel
- 16 -
3. Arquitectura
3.1. Arquitectura de la informació
El conjunt de tasques agrupades sota la denominació “Arquitectura de la informació”,
ens permet establir una organització lògica dels continguts i serveis del lloc web de
manera que es faciliti a l'usuari la localització de la informació i la seva interacció amb
el lloc web.
L'arquitectura d'informació contempla diferents aspectes que passen per: la identificació
del mapa de seccions i subseccions del portal, estructures de navegació, identificació
d'eines i utilitats (fòrums, buscador, etc..), establir jerarquia del lloc òptima aturés la
navegació (nombre de nivells de profunditat a l'accés a la informació), etiquetatge de les
seccions, adequació de la línia editorial, organització dels continguts en cada pàgina
(definició d'espais funcionals) etc.
Un dels aspectes resultants del procés de definició de l'Arquitectura de la Informació del
Portal, serà l'elaboració d'una estratègia de continguts i serveis, un altre aspecte
fonamental en què se sustenta l'experiència d'usuari és la pròpia oferta de continguts i
serveis es vulgui posar a disposició de l'usuari final. En aquest sentit, és important
identificar prèviament quals són els objectius estratègics i, sobretot, quines són les
necessitats dels usuaris, de manera que es puguin establir els criteris de priorització que
permetin extreure aquells continguts i serveis de vertader valor afegit per als usuaris del
Portal.
Com a primera part del projecte, i a fi d'assegurar que el producte final respon als
objectius marcats, es planteja la realització d'una fase de Diagnòstic que:
 Asseguri la correcta identificació de totes les necessitats i requeriments tant
de serveis com d'informació.
 Permeti definir l'estructura i organització global del Portal la facilitant la seva
evolució futura.
 Sent les bases per garantir l'eficiència en les tasques de construcció.
 Determini tots els components (organitzatius, funcionals i tècnics), la seva
interrelació i dependències per garantir la correcta implantació i l'efectivitat de la
seva utilització.
A mesura que dissenyem la solució de gestió de continguts serà necessari avançar en la
veritable definició del sistema, per a la qual cosa resultarà necessari:
 Conèixer quina és la missió del lloc web i el contingut associat.
 Definir l'estructura i organització requerida per crear i gestionar el contingut,
incloent el nivell de centralització o descentralització associat.
 Els rols i responsabilitats requerits.
 Definir els processos de gestió, incloent la gestió del cicle de vida dels
continguts.
Portal Web ICIP Bermúdez Merino, Gabriel
- 17 -
 Establir els sistemes de mesurament i les mètriques que havien de ser tingudes
en compte per assegurar que el sistema de gestió de continguts és eficient.
 Establir les polítiques que requereix l'organització per a la gestió dels seus
continguts web, incloent aspectes tals com; disseny i imatge corporativa,
usabilitat, inventari de fonts d'informació, etc.
 Definir el model de continguts.
La gestió de continguts constitueix una part crítica per a l'èxit de qualsevol lloc web.
Des del punt de vista estratègic, el sistema proposat ha de ser capaç de gestionar no sols
les dades crítiques per a l'activitat del lloc web, sinó també els diferents tipus de
documents i continguts a fi de fer-los accessibles als usuaris dels portals. Per tant, es pot
identificar una sèrie de factors claus per assegurar l'èxit en la implantació d'un sistema
de gestió de continguts:
 Capturar i compartir coneixement dins l'àmbit de l'organització.
 Mantenir el contingut del lloc web actualitzat, segur i controlat.
 Reduir els costos associats a la distribució i entrega del contingut.
 Incrementar la productivitat.
 Reduir el temps de posada en marxa.
 Millorar la qualitat de la informació destinada a la presa de decisions.
 Etc.
3.2. Criteris de disseny
3.2.1. Criteris estètics
Des del punt de vista estètic, el disseny haurà de resultar agradable a l'usuari,
transmetent els valors i missatges que es desitgen associar al Portal com a concepte de
“marca”.
3.2.2. Criteris tècnics
Des del punt de vista tecnològic s'utilitzaran estàndards Web, definits pel consorci de la
W3C:
 Excepte per a aquelles pàgines que mostrin documents extensos, el
desplaçament vertical s'ha de minimitzar, de manera que tota la informació
important estigui a la vista des d'un primer moment. En aquelles pàgines amb
textos llargs es podrà incloure al final un enllaç al principi de les mateixes.
 Evitar el desplaçament horitzontal de la pàgina: S'ha de limitar l'amplària de la
pàgina a la grandària de la pantalla, ja que resulta molt difícil llegir paràgrafs
quan cal desplaçar la pàgina horitzontalment.
Portal Web ICIP Bermúdez Merino, Gabriel
- 18 -
 S'han de proporcionar referències a altres continguts del web mitjançant enllaços
a pàgines que continguin informació relacionada amb els continguts de la pàgina
que s'està visitant.
 Els elements de navegació han d'estar agrupats i situats en un lloc clarament
visible de la pàgina, mantenint una consistència de la dita situació en totes les
pàgines.
 No és adequat crear pàgines que no disposin de mitjans de retorn. Totes les
pàgines del portal ha de tenir almenys un enllaç pel qual es pugui continuar la
navegació.
 Disseny una estructura de navegació clara que asseguri que es proporciona un
camí còmode per visitar totes les pàgines web del portal, independentment que a
aquestes es pugui accedir per distintes vies.
 Creació de pàgines de pantalla i mitja com a grandària màxima. En general, no
s'han de fer pàgines de grandària major a una pantalla i mitja. D'aquesta manera
s'evitaran molts problemes i es facilitarà la lectura de les mateixes. Les pàgines
de grandària una pantalla i mitja són còmodes de llegir i no saturen el lector amb
massa informació. Quan una pàgina ocupa més de tres pantalles, s'ha d'incloure
un índex de continguts al principi de la pàgina.
3.2.3. Criteris d'usabilitat
Els atributs o criteris d'usabilitat són aquelles característiques que faciliten l'ús del
sistema al visitant, incloent els relacionats amb la interacció, la visualització i
l'emotivitat. D'altra banda, hi ha una sèrie de requeriments mesurables, directament
relacionats amb la usabilitat, com són els associats al rendiment i temps de resposta.
Dins els atributs d'usabilitat relacionats amb la interacció que han de tenir-se en compte
durant el disseny, desenvolupament i implantació del portal es poden destacar:
 Personalització de l'entorn de l'usuari: Personalització de la interfície i els
seus components segons preferències personals.
 Eficiència: Minimització de nombre de clic, pàgines visualitzades o passos per
obtenir la informació desitjada.
 Integració: Integració fàcil i intuïtiva amb altres aplicacions o entorns
funcionals.
 Navegació: Facilitat perquè l'usuari pugui recordar un mapa mental de
l'estructura, traduint això en la facilitat per intuir quin camí seguir en tot
moment.
 Predicció: L'usuari ha de poder preveure els resultats de les seves accions.
 Integritat conceptual: Simplificació de l'aprenentatge i l'execució de tasques
per part de l'usuari.
 Consistència: Totes les seleccions i accions mantenen una línia comuna
d'execució.
 Interacció: Oferir a l'usuari informació sobre l'estat de l'execució de les seves
tasques o accions (progrés o temps restant, consells, missatges d'error...).
 Temps de resposta.
Portal Web ICIP Bermúdez Merino, Gabriel
- 19 -
 Sistemes d'ajuda: Mapes Web, accés a pàgines de resposta a preguntes
freqüents (FAQ), buscadors, mòdul d'ajuda.
3.2.4. Nivell d'accessibilitat AA
A continuació detallem les accions que seran realitzades en el transcurs del
desenvolupament del nou Portal amb la finalitat de garantir un nivell d'accessibilitat
AA.
Per comprovar que un Lloc Web compleix amb les normes d'accessibilitat, la iniciativa
WAI (Web Accesibility Initiative) de la W3C (World Wide Web Consortium) proposa
la realització de les següents proves:
 Verificar l'accessibilitat amb eines automàtiques i revisió humana. Els mètodes
automàtics són generalment ràpids i convenients, però no poden identificar tots
els problemes d'accessibilitat.
 Utilitzar els mètodes de validació des de les primeres etapes del
desenvolupament. Els problemes d'accessibilitat que s'identifiquen primer són
fàcils de corregir i d'evitar. Entre els dits mètodes de validació, es compten els
següents:
 Utilitzar una eina automatitzada de validació de l'accessibilitat i la
navegació.
 Validar la sintaxi de programació de les pàgines amb les eines ofertes pel
W3C.
 Validar els fulls d'estil (Ex., CSS).
 Utilitzar un emulador o navegador només-text.
 Utilitzar diversos navegadors gràfics, amb: sons i gràfics carregats
,gràfics no carregats, sons no carregats, sense ratolí...
 Utilitzar diversos navegadors, antics i nous.
 Utilitzar un navegador amb conversió text-veu, un lector de pantalla, un
programa de magnificació, una pantalla petita, etc.
 Utilitzar un revisor gramatical i ortogràfic. Una persona que llegeix una
pàgina amb un sintetitzador de veu pot no ser capaç de desxifrar la
pronunciació que emet aquest dispositiu d'una paraula que té un error
ortogràfic..
 Revisar el document quant a la seva claredat i simplicitat. Els editors
poden també millorar la usabilitat dels documents, en identificar
problemes potencials de sensibilitat cultural que poden presentar-se, a
causa de l'ús del llenguatge o de les icones.
3.3. Arquitectura del portal
En el present punt es dona a conèixer la arquitectura del portal dissenyada, mostrant el
seu arbre de navegació, així com una mostra de l’estructura de pàgina del portal.
Portal Web ICIP Bermúdez Merino, Gabriel
- 20 -
3.3.1. Arbre de navegació
L’arbre de navegació fa referència a les diferents pàgines d’informació que es troben
dins d’un portal; i permet veure com es troben organitzades dins d’un portal.
Permet a més veure els diferents nivells d’informació que visualitza la seva jerarquia.
L’Institut
Agenda
CentredeDocumentació
Presentació
Creació
Funcionsi
Objectius
Estructurai
Organització
Detall
Colaboradors
SaladePremsa
Documents
Documents
Institucionals
Enllaços
Enllaços
d’Interes
Activitat
ProgramesdeRecerca
Seguimentianàliside
conflictesarmatside
processosdepau
MovimentperlaPau
Politiquesdeseguretati
Defensa
ConstrucciódePau
Formació
ConsruccióperlaPau
Formació
Detall
Colaboradors
CercaalCatàleg
ArxiuMultimedia
Revistes
BasesdeDades
ServeisServei
Detall
MapaWebContacte
NoticiaActualitat
Convocatòries,
bequesifeina
DossiersDocumentsContacte
Eixosdetreballi
programesderecerca
Publicacons
Revistes
Llibres
WorkingPares
DocumentsiInformes
Bulletins
Publicacio
Bulletin
WorkingPares
Treballaambnosaltres
Col·laboradors
Evoluciódelapeace
researchidelspeace
Figura 13 Àrbre de navegació
Portal Web ICIP Bermúdez Merino, Gabriel
- 21 -
Com es pot observar, la Home del portal disposa de canals fills, els quals a la vegada
disposen de canals fills, fins com a màxim un nivell 4 de profunditat. A més de la
Home, al mateix nivell disposem d’un canal amb el Mapa Web i un altre amb la pàgina
de Contacte.
3.3.2. Model de pàgina
Un model de pàgina, és una estructura que permet agilitzar la creació de una pàgina
web. Per tant, l’estructura conté la configuració de les diferents regions, zones,
components; així com la seva distribució i ubicació dins de una pàgina web.
Figura 14 Model visual de la pàgina
Portal Web ICIP Bermúdez Merino, Gabriel
- 22 -
Un model de pàgina conté certs elements que son comuns a totes les pàgines que els
facin servir així com possibles elements comuns a totes les pàgines i models de pàgines
de un portal
En el nostre cas, tots els models de pàgina tindran la mateixa estructura base, degut a
que s’haurà se seguir recomanacions corporatives de l’Oficina Tècnica de Vignette pel
desenvolupament de portals.
Figura 15 Model visual de la pàgina amb els elements del portal
Representació del que seria un model de pàgina corporatiu de l’Oficina Tècnica de
Vignette, i aquesta imatge l’utilitzarem com base per fer la definició dels components
comuns.
3.3.3. Estructura de dades
Degut a la necessitat de mostrar diferent informació amb diferent estructura,
s’utilitzaran diferents definicions de contingut segons la necessitat.
A continuació es mostren les estructures, ja proveïdes pel sistema, amb la informació
útil que s’omplirà.
Portal Web ICIP Bermúdez Merino, Gabriel
- 23 -
3.3.3.1. Article
Un Article es un tipus de contingut que ens permet definir certes estructures
d’Informació i que té la següent estructura:
Camp Tipus Descripció
Títol String Camp que permet tenir definir el títol d’un article
Cos String Aquest camp conté tota la informació d’un article, pot
estar composats per paràgrafs.
Entradeta String L’entradeta es correspon amb a un paràgraf breu i
descriptiu de l’article i que sortirà en aquells llistats que
mostrin una breu descripció d’un article
Imatges Imatge Un article pot contenir un conjunt d’imatges
associades/relacionades amb l’article. La seva mida pot
variar així com les seves longituds
Vídeos Vídeos Un article pot contenir un conjunt de vídeos
associades/relacionades amb l’article. La seva mida pot
variar, es mostraran a una mida determinada
Enllaços Enllaç Conjunt d’enllaços
Documents Document Conjunt de documents
Blocs Bloc Article Conjunt d’articles
Banners Banner Conjunt de banners
3.3.3.2. Banner
Un Banner es un tipus de contingut que ens permet definir elements que els quals
donen la possibilitat de fer un enllaç visual cap a una adreça http.
Portal Web ICIP Bermúdez Merino, Gabriel
- 24 -
Camp Tipus Descripció
Títol String Títol descriptiu del banner
Descripció String Paràgraf breu i descriptiu del banner
Imatge Imatge Imatge visual associada a el banner
Enllaços String Adreça http vinculada al banner
3.3.3.3. Imatge
Una Imatge es un tipus de contingut que, com indica el seu nom, allotja una imatge
amb la informació d’accessibilitat d’aquesta.
Camp Tipus Descripció
Títol String Títol/nom de la imatge
Títol Alternatiu String Nom alternatiu per mostrar en cas que la imatge no es
pugues mostrar
Peu d’Imatge String Text del peu de la imatge
Fitxer Estàtic Fitxer Fitxer gràfic de l’imatge: jpg, gif, gif animades, png
3.3.3.4. Document
Un Document es un tipus de contingut que, com indica el seu nom, allotja un document
amb la informació d’accessibilitat d’aquesta.
Camp Tipus Descripció
Títol String Títol/nom del document
Descripció String Descripció del document
Portal Web ICIP Bermúdez Merino, Gabriel
- 25 -
Figura 16. Diagrama de migració de les dades
Text Alternatiu String Text alternatiu que sortirà en cas que l’enllaç cap el
document no es pugues mostrar
Fitxer Estàtic Fitxer Fitxer físic del document
3.3.3.5. Enllaç
Un Enllaç es un tipus de contingut que ens permet definir elements que permeten fer un
enllaç visual cap a una adreça http
Camp Tipus Descripció
Títol String Títol descriptiu del banner
URL String Adreça http vinculada al banner
Descripció String Paràgraf breu i descriptiu del banner
Text Alternatiu String Nom alternatiu per mostrar en cas que l’enllaç no es
pugues mostrar
3.3.4. Migració de les dades
Degut a que l'objectiu de la introducció dels continguts, és la de migració dels definits a
l'estructura estàtica del portal al nou portal dinàmic, per això és necessari establir la
política de migració de dades que s'utilitzarà per realitzar dita acció.
Portal Web ICIP Bermúdez Merino, Gabriel
- 26 -
La migració dels continguts serà un procés clau en tot el projecte. Cal establir els
processos de verificació de la integració de la informació creada al gestor de continguts.
 Processos de validació durant les diferents etapes de la migració.
 Validació manual.
 Inicialment també es realitzarà càrrega de continguts manualment per veure que
tot és correcte.
 Totes les estratègies de migració que s’empraran es provaran inicialment amb
una mostra reduïda de continguts de cada tipus. Això és el que denominarem
“pilot” de la migració.
 Es realitzarà una validació de la informació a migrar en el nou Web
conjuntament amb membres i redactors del Departament d’Interior, Relacions
Institucionals i Participació
Portal Web ICIP Bermúdez Merino, Gabriel
- 27 -
4. Disseny
Un disseny de portal sobre l’eina corporativa de gestió de portals Vignette inclou
sempre unes fases a realitzar fixes per a tots els nous portals:
 Disseny de les maquetes del portal
 Disseny de l’estructura de continguts a l’entorn de gestió de continguts (VCM)
 Disseny de l’estructura de navegació a l’entorn de gestió de portals (VAP)
En el nostre cas, com que el client ja proporciona unes maquetes per al disseny visual
del portal, aquest pas es eludible. Però degut a un requisit addicional, es necessari
dissenyar la integració amb el servei de noticies extern MeltWater.
En els següents punts es donarà a conèixer el disseny de les diferents estructures, així
com la integració amb MeltWater.
4.1. Estructura de continguts
El gestor de continguts Vignette proporciona un sistema basat en una estructura
jeràrquica, en la qual s’han de destacar diferents elements, els quals enumerem a
continuació.
4.1.1. Portal
Estructura jeràrquica amb l’element per a Site, el qual especifica un nou portal dins del
gestor, amés de contindré una estructura de canals definida:
 Application Assets: Canal encarregat d’emmagatzemar els continguts
relacionals entre el portal de VCM i VAP
 Archived Content: Canal encarregat d’emmagatzemar els continguts arxivats
per l’usuari
 Home: Canal principal del Site on es declaren sub canals i els usuaris associen
instancies de contingut.
 Unassigned Content: Canal encarregat d’emmagatzemar els continguts que no
tenen cabuda als altres canals
Figura 17 Diagram d'estructura del portal
Portal Web ICIP Bermúdez Merino, Gabriel
- 28 -
El disseny del portal d’ICIP no preveia un disseny estructurals dels continguts
relacionals, per tant només va ser necessari realitzar el disseny de l’estructura del portal
a partir del canal Home.
Canal Nivell 1 Canal Nivell 2 Canal Nivell 3
Home
L'Institut
Presentació
Creació
Funcions i objectius
Estructura i
Organització
Persones
Convocatòries, beques i
feina
Perfil de Contractant
Treballa amb nosaltres
Sala de Premsa
Actualitat
Dossiers
Contacte
Documentació
Institucional
Enllaços d'interés
Agenda
Cercador d'activitats
Llistat d'activitats
Eixos d’actuació i
programes de
recerca
Programes de recerca
Seguiment i anàlisi
de conflictes armats
i de processos de
pau
Moviment per la
pau
Polítiques de
seguretat i defensa
Construcció de pau
Evolució de la
peace research i
dels peace studies
Formació
Portal Web ICIP Bermúdez Merino, Gabriel
- 29 -
Construcció de pau
Centre de
documentació
Cerca alcatàleg
Arxiu multimedia
Revistes
Bases de dades
Serveis
Publicacions
Revistes
Llibres
Working papers
Documents i informes
ICIP e-Bulletí
Col·laboradors
Mapa Web
Noticies
Escola de Cultura
per la PAU
Administracio
EnllacosCapcalera
Banners_Menu_Lateral
EnllacosPeuPagina
4.1.2. Contingut
Estructura jeràrquica on l'usuari emmagatzema els continguts del portal, des de els
elements d'accessibilitat fins als continguts d'informació a mostrar.
Figura 18 Diagrama d'estructura de la carpeta de continguts
Portal Web ICIP Bermúdez Merino, Gabriel
- 30 -
L'estructura de continguts del portal d'ICIP tindria que complir uns estàndards mínims,
aquests tractaven només sobre l'estructura del primer nivell, que deuria tindre els
projectes:
 Administració: Projecte per emmagatzemar tots els elements visuals del portal,
així com aquells elements comuns per a totes les pàgines.
 Contingut: Projecte per emmagatzemar tots els elements d'informació del
portal.
A continuació podem observar l'estructura de dit projecte, on a més dels diferents
projectes per nivell, podem veure aquells elements obligatoris que ha de tindre el portal.
Podem comprovar que el projecte de Continguts no disposa de més projectes a partir
del nivell 2, això és degut a que l'usuari pot crear projectes dins l'estructura per facilitar
la seva comprensió. Tampoc es llisten elements d'informació, ja que aquests s'ompliran
posteriorment durant la migració des del HTML estàtic.
Projecte
Nivell 1
Projecte
Nivell 2
Projecte
Nivell 3
Projecte
Nivell 4
Contingut
Administracio
Formes de
Presentacio
fp_icip_destacats_xarxes_socials
Enllacos
Capcalera
enllaç_contacte
enllaç_mapa_web
Enllacos Peu
enllaç_avis_legal
enllaç_accessibilitat
enllaç_sobre_el_web
html_copyright_generalitat
Enllacos
Xarxes Socials
banner_twitter
banner_facebook
banner_youtube
banner_slideshare
Enllacos
enllac_twitter
enllac_facebook
enllac_youtube
enllac_slideshare
Imatges
imatge_twitter
imatge_facebook
Portal Web ICIP Bermúdez Merino, Gabriel
- 31 -
imatge_youtube
imatge_slideshare
Arxius
Home
enllac_mes_agenda
enllac_mes_publicacions
enllac_mes_centre_docu
enllac_mes_programes_recerca
enllac_mes_arxiu_multimedia
enllac_mes_noticies
Imatges
imatge_impacte_grafic_esquerra
imatge_impacte_grafic_dreta
Arxius
Banners
banner_revista
banner_butlleti
banner_bloc
banner_escola
Enllacos
enllac_banner_revista
enllac_banner_butlleti
enllac_banner_bloc
enllac_banner_escola
Imatges
imatge_banner_revista
imatge_banner_butlleti
imatge_banner_bloc
imatge_banner_escola
Publicacions
enllac_ultima_revista
enllac_ultim_butlleti
enllac_canal_revistes
Continguts
L'Institut
Estructura i
organitzacio
Agenda
Eixos
d'actuacio i
programes de
recerca
Centre de
documentacio
Publicacions
Col·laboradors
Noticies
Escola de
Cultura per la
PAU
Portal Web ICIP Bermúdez Merino, Gabriel
- 32 -
4.1.3. Contingut relacional
Estructura jeràrquica on l'usuari emmagatzema el contingut relacional del portal.
Un contingut relacional és aquell encarregat de relacionar els elements Canal definits a
VCM amb els element Navegació definits a VAP, també coneguts com Presentation
Templates o Plantilla de Presentació.
A continuació es mostra la relació entre les plantilles i els elements, ja que l'estructura
de carpetes no va més enllà que la que es veu a la imatge sobre aquestes línies.
Plantilla de presentació Element de navegació
PT_ICIP_Detall_Article_Destacats ICIP_EN_TTPP
PT_ICIP_Generica_Destacats ICIP_EN_TTPP
PT_ICIP_Generica ICIP_EN_PPP
PT_ICIP_Detall_Article ICIP_EN_T
PT_ICIP_Llistats ICIP_EN_LLISTATS
PT_ICIP_Butlleti ICIP_EN_BUTLLETI
PT_ICIP_RSS ICIP_EN_RSS
PT_ICIP_2_Columnes ICIP_EN_2_COLUMNES
PT_ICIP_Home ICIP_EN_2_COLUMNES
PT_ICIP_Distribuidora_1col_D ICIP_EN_TTPP
PT_ICIP_Distribuidora_2col_D ICIP_EN_TTPP
Figura 19 Diagrama d'estructura de projectes de contingut relacional
Portal Web ICIP Bermúdez Merino, Gabriel
- 33 -
4.2. Estructura de navegació
El gestor de portals de Vignette proporciona un sistema basat en una estructura
jeràrquica, la qual és basa en elements de navegació els quals contenen portlets per a
establir la configuració de la pàgina i/o mostrar elements d'informació.
En aquest gestor, a més de l'estructura de navegació és defineixen els elements visuals
que composaran el portal, passant per l'estructura de pàgines i els portlets que es
mostren en elles.
4.2.1. Gestió del portal
La definició de la informació del portal ve definida per els estàndards de disseny de la
Oficina Tècnica, els quals a més de la informació necessària sobre el portal s'han de
definir els estils visuals d'aquest.
INFORMACIÓ
Nom del Site icip
Descripció Portal de l'Institut Català Internacional per la Pau
DNS del Site icip
Categories de
pàgina
icip
Grup d'usuaris ICIP
Configuració Visual
Tema: Usuari
registrat
FW_Tema
Grid: Usuari
registrat
FW_Grid_B
Portal Web ICIP Bermúdez Merino, Gabriel
- 34 -
Tema: Usuari
registrat
FW_Tema
Grid: Usuari
registrat
FW_Grid_B
4.2.2. Elements de navegació
Seguint l'arquitectura de navegació definida durant la fase d'arquitectura, es va
dissenyar l'estructura d'elements que compondrien el portal. Els elements poden tindre
una configuració visual a part de la pròpia del portal, tal i com veurem a la següent
taula.
Nom Tipus Tema Grid Pàgina a
enllaçar
Element
navegació 1 ICIP_EN_PPP Page FW_Tema GRID B ICIP_PA_PPP
Element
navegació 2 ICIP_EN_T Page FW_Tema GRID B ICIP_PA_T
Element
navegació 3
ICIP_EN_TTPP Page FW_Tema GRID B2 ICIP_PA_TTPP
Element
navegació 4 ICIP_EN_LLIS
TATS Page FW_Tema GRID B
ICIP_PA_LLISTAT
S
Element
navegació 5 ICIP_EN_BUTL
LETI Page FW_Tema
Grid Butlletí
Gencat
FW_Pagina_Grid_
Butlleti_Gencat
Element
navegació 6
ICIP_EN_RSS Page FW_Tema GRID RSS ICIP_PA_RSS
Element
navegació 7 ICIP_EN_2_CO
LUMNES Page FW_Tema GRID B
ICIP_PA_2_COLU
MNES
4.2.3. Pàgines de visualització
Tot element de navegació té associada una pàgina, la qual conté els portlets per mostrar
la informació associada a l'element de navegació. A continuació podem observar la
relació de pàgines i portlets, així com la distribució d'aquests.
Portal Web ICIP Bermúdez Merino, Gabriel
- 35 -
Nom Estructura per
Layouts
Distribució de portlets
Pàgina 1
ICIP_PA_PPP Panel 1.1
ICIP_PI_P1
ICIP_PI_P2
ICIP_PI_P3
Pàgina 2 ICIP_PA_T Panel 1.1 ICIP_PI_T
Pàgina 3
ICIP_PA_TTPP Panel 1.1
ICIP_PI_TTPP_T1
ICIP_PI_TTPP_T2
ICIP_PI_TTPP_P1
ICIP_PI_TTPP_P2
Pàgina 4 ICIP_PA_LLISTATS Panel 1.1 ICIP_PI_LLISTATS_P1
ICIP_PI_LLISTATS_P2
Pàgina 5 ICIP_PA_RSS
Pàgina 6
ICIP_PA_2_COLUM
NES
Panel 1.1 (100%) ICIP_PI_Home_sup_1
ICIP_PI_Home_sup_2
Panel 2.1 (50%)
ICIP_PI_Home_esq_1
ICIP_PI_Home_esq_2
ICIP_PI_Home_esq_3
ICIP_PI_Home_esq_4
ICIP_PI_Home_esq_5
ICIP_PI_Home_esq_6
ICIP_PI_Home_esq_7
ICIP_PI_Home_esq_8
ICIP_PI_Home_esq_9
ICIP_PI_Home_esq_10
ICIP_PI_Home_esq_11
ICIP_PI_Home_esq_12
ICIP_PI_Home_esq_13
Panel 2.2 (50%)
ICIP_PI_Home_dreta_1
ICIP_PI_Home_dreta_2
ICIP_PI_Home_dreta_3
ICIP_PI_Home_dreta_4
ICIP_PI_Home_dreta_5
Portal Web ICIP Bermúdez Merino, Gabriel
- 36 -
ICIP_PI_Home_dreta_6
ICIP_PI_Home_dreta_7
ICIP_PI_Home_dreta_8
Panel 3.1 (100%)
ICIP_PI_Home_Noticies_1
ICIP_PI_Home_Noticies_2
ICIP_PI_Home_Noticies_3
4.2.4. Portlets
Un portlet es un contenidor de serveis, el qual en el nostre cas, mostrarà la informació
assignada a aquell element de navegació o integrarà serveis en la pàgina. En la taula a
continuació es mostra la relació del portlet, així com el seu tipus.
Nom Tipus de
portlet
Tpus d'informació a
mostrar
ICIP_PI_T Template Components d'informació o
configuració
ICIP_PI_P1 Page Components d'informació o
configuració
ICIP_PI_P2 Page Components d'informació o
configuració
ICIP_PI_P3 Page Components d'informació o
configuració
ICIP_PI_TPP_T1 Template Components d'informació o
configuració
ICIP_PI_TPP_P1
Page Components d'informació o
configuració
ICIP_PI_TPP_P2
Page Components d'informació o
configuració
ICIP_PI_LLISTATS_P1 Page Components d'informació o
configuració
ICIP_PI_LLISTATS_P2 Page Components d'informació o
configuració
ICIP_PI_Home_sup_1 Template
Components d'informació o
configuració
ICIP_PI_Home_sup_2 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_1 Template
Components d'informació o
configuració
Portal Web ICIP Bermúdez Merino, Gabriel
- 37 -
ICIP_PI_Home_esq_2 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_3 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_4 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_5 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_6 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_7 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_8 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_9 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_10 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_11 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_12 Template
Components d'informació o
configuració
ICIP_PI_Home_esq_13 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_1 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_2 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_3 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_4 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_5 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_6 Template
Components d'informació o
configuració
ICIP_PI_Home_dreta_7 Template Components d'informació o
Portal Web ICIP Bermúdez Merino, Gabriel
- 38 -
configuració
ICIP_PI_Home_dreta_8 Template
Components d'informació o
configuració
ICIP_PI_Home_Noticies_1 Template
Components d'informació o
configuració
ICIP_PI_Home_Noticies_2 Template
Components d'informació o
configuració
ICIP_PI_Home_Noticies_3
Template
Components d'informació o
configuració
4.3. Integració amb RSS MeltWater
Es vol proporcionar un sistema d'alertes RSS connectat amb el servei de noticies
MeltWater, degut a que aquesta aplicació és externa a l'oferta de components de
l'Oficina Tècnica de Vignette, llavors va ser necessari establir una reunió amb els
responsables de l'aplicació per tal d'establir el millor mètode d'integració.
D'aquesta reunió es van treure en clar els següents punts:
 Obtenció de les dades: El servei de noticies MeltWater és un servei on-line que
disposa de connexió directa per a clients segons unes directrius especifiques, la
qual retorna la informació a mostrar per el contenidor.
El contenidor a configurar ja es va tindre en compte en el disseny de la
navegació, el qual es troba definit a la pàgina ICIP_PA_RSS, element que
s'haurà d'afegir al disseny de navegació amb una nova pàgina i un portlet de
tipus template.
 Representació de les dades: El servei de noticies MeltWater retorna la
informació a mostrar, en format XML el qual s'ha de tractar amb un fitxer XSL
per visualitzar la informació en el format dessitjat.
Figura 20 Diagrama de connexió: Vignette - MeltWater
Portal Web ICIP Bermúdez Merino, Gabriel
- 39 -
Figura 22 Entorn de treball Vignette
5. Implementació
En el present punt es donen a conèixer les diferents tasques de desenvolupament i
configuració que es realitzen al projecte com a Analista Programador.
Tasques que dividirem segons el tipus de treball a realitzar:
 Configuració dels entorns
 Desenvolupament d’elements de visualització
 Migració de continguts
 Proves
 Formació
5.1. Configuració dels entorns
Al gestor de continguts Vignette és precís configurar l’estructura del portal abans de
començar a desenvolupar els elements de visualització, dita organització s’ha dissenyat
en el punt anterior, per tant tan sols és necessari replicar aquesta configuració als dos
entorns, tant al gestor de continguts com el de portals.
5.1.1.Gestor de continguts
Al gestor de continguts de Vignette 7 (VCM) es replicarà l’estructura del disseny, és a
dir, es crea l’estructura del portal amb la divisió dels canals necessaris segons
l’arquitectura definida per l’ICIP, així com l’estructura de carpetes per emmagatzemar
els continguts.
Figura 21 Gràfic de flux de creació d'un portal
Portal Web ICIP Bermúdez Merino, Gabriel
- 40 -
Una vegada es troba definida l’estructura és necessari omplir la informació rellevant de
cada canal, informació tal com:
 CSS
 JavaScripts
 Imatges del Banner
 ...
Dita informació va ésser proporcionada per l’equip del ICIP en el moment de l’entrega
de les maquetes.
Com a punt final d’aquest apartat, s’introdueixen uns continguts de prova amb
l’objectiu de comprovar que la configuració era correcta.
5.1.2.Gestor de portals
Al gestor de portals de Vignette 7 (VAP) es replicarà l’estructura e informació sobre el
portal definida anteriorment al disseny.
Aquesta replicació és més complexa que a l’entorn de gestió de continguts, ja que a més
de la pròpia estructura del portal és necessari:
 Associació de la temàtica i estil visual al portal, així com dels components
predefinits per l’Oficina Tècnica que ha de tindre qualsevol portal.
 Creació de pàgines: S’han de crear els elements pàgina definits al disseny, els
quals contindran els portlets que mostraran la informació.
 Creació dels portlets: Cada pàgina es divideix segons l’estructura definida al
disseny i s’assignaran a dites divisions els portlets necessaris per mostrar la
informació pertinent.
 Configuració dels portlets: Una vegada s’han assignat els portlets a les pàgines,
s’accedeix a cadascuna d’elles per realitzar la configuració d’aquests contenidors
segons s’ha definit al disseny, a més d’especificar:
 Com mostraran la informació: llistat, detall, etc.
Figura 23 Exemple de l'estructura del portal
Portal Web ICIP Bermúdez Merino, Gabriel
- 41 -
 D’on mostraran la informació: quin canal, contingut, etc.
 Accés a aplicacions externes: MeltWater, etc.
 Amb quin disseny de pàgina es mostrarà la informació
Una vegada realitzada la creació de l’estructura i la configuració dels contenidors
d’informació, tan sols manca la creació dels elements de connexió entre els dos entorns.
5.1.2.1. Contenidors d’informació
A l’hora de configurar un contenidor d’informació (portlet) s’ha de determinar el
component de presentació amb el qual es vol per presentar el contingut. Típicament,
haurem d’escollir entre seleccionar els continguts de manera manual o automàtica.
A continuació és llisten els components principals a utilitzar al portal:
 Llista automàtica de continguts: Aquest component permet a l’usuari generar
una llista de continguts de forma automàtica, únicament associant el contingut al
canal. Els continguts a llistar poden ser de qualsevol tipus. A la vegada aquesta
llista conté una sèrie de valors en idiomes diferents.
 Llista manual de continguts: Aquest component permet a l’usuari generar una
llista de continguts de forma manual i ordenada. Els continguts a llistar poden
ser de qualsevol tipus. A la vegada aquesta llista conté una sèrie de valors en
idiomes diferents. Aquest component també està preparat per utilitzar paginació.
 Llista automàtica de canals: Aquest component de presentació retorna una
llista de canals que hi ha a partir d’un canal donat fins a un nivell de profunditat
especificat per paràmetre, i seran aquests els canals que es mostrin en una
determinada pàgina. Els canals es poden trobar en qualsevol punt de la jerarquia
de canals establerta en el VCM.
 Llista manual de canals: Aquest component de permet a l’usuari generar una
llista ordenada de canals. Els canals es poden trobar en qualsevol punt de la
jerarquia de canals establerta en el VCM
Figura 24 Flux de configuració de contenidors d'informació
Portal Web ICIP Bermúdez Merino, Gabriel
- 42 -
 Detall de contingut: Aquest component de presentació retorna un arxiu en
format xml amb el detall d’un contingut que s’ha obtingut per paràmetre. A la
vegada, el Detall de Contingut associa alguns camps propis dependents del
idioma, afegint les característiques principals del contingut associat.
 Fil d’Ariadna: Aquest component permet crear un fil d’Ariadna.
Aquests contenidors d’informació es defineixen individualment per cada pàgina del
portal, aixó fa que la personalització del portal sigui d’alt nivell, cosa que facilita la
personalització de la visualització dins dels canons establerts.
5.1.3.Elements de connexió
Per realitzar la connexió d’entorns al gestor Vignette 7 és necessari crear un element
específic que realitza aquesta funció, les Presentation Templates (Plantilles de
Presentació).
Al projecte es necessari crear un element d’aquest tipus per cada pàgina configurada al
gestor de portals i assignar cadascuna als diferents canals dels quals es mostraria la
informació, tal i com s’especifica al disseny.
5.2. Desenvolupament d’elements de visualització
La visualització del portal disposa d’elements propis que disten una mica del disseny
estàndard de portal que proporciona l’Oficina Tècnica de Vignette, per aquesta raó es
necessari implementar elements de visualització específics per al portal, a més dels ja
necessaris per a mostrar la informació de MeltWater.
Al gestor de portals de Vignette és necessari implementar un fitxer en format XSLT, el
qual s’assigna a un portlet que transforma la informació rebuda en format HTML
compatible amb el navegador d’usuari.
Figura 25 Descripció de l'estructura de pàgina del portal
Portal Web ICIP Bermúdez Merino, Gabriel
- 43 -
Les XSLTs a desenvolupar són referents a petits canvis en la visualització, per tant es
prendran com a base les oferides per l’Oficina Tècnica de Vignette, sobre les quals es
faran retocs i millores per adaptar la visualització a la de les maquetes proporcionades.
Cas especial és la visualització de la informació proporcionada per el portlet de
MeltWater, ja que no s’ha realitzat mai aquesta integració a l’entorn de l’Oficina
Tècnica, motiu pel qual es tindrà que implementar una XSLT pròpia segons les normes
d’accessibilitat definides i, posteriorment, passar la validació pertinent per l’equip
encarregat d’aquestes tasques.
Una vegada desenvolupats i assignats tots els elements de visualització, es comprovarà
que l’estructura del portal i la visualització d’aquesta és correcta mitjançant els
continguts de prova creats en l’apartat anterior.
5.3. Migració de continguts
Durant aquesta fase de la implementació, el treball a realitzar consisteix en transferir la
informació de la pàgina estàtica en HTML al gestor de continguts de Vignette, aquesta
tasca es pot dividir en 2 parts:
 Creació dels continguts en format Vignette 7
 Assignació dels continguts al canal corresponent
Figura 26 Flux de creació de informació
En un primer moment es va considerar l’opció de realitzar la migració de continguts
amb l’eina facilitada per Vignette VBIS, la qual automatitza el procés de migració
mitjançant un fitxer Excel que conté tota la informació a introduir dins del portal via
instàncies de contingut.
Aquesta opció es va descartar, ja que l’única font d’informació per a realitzar la
migració era la web estàtica i la quantitat de continguts no era alta. Una vegada
descartada aquesta opció, es va optar per realitzar la migració de manera manual.
Portal Web ICIP Bermúdez Merino, Gabriel
- 44 -
La creació dels continguts en format Vignette 7 consisteix en transferir aquella
informació rellevant a les estructures definides al disseny. Aquesta tasca és
completament mecànica i manual, la qual es tracta d’anar creant els continguts amb la
informació corresponent i guardant-los a la carpeta d’emmagatzemament corresponent.
L’assignació dels continguts al canal corresponent consisteix en associar els continguts
creats en el punt anterior als canals del portal que mostrarien la informació de dits
continguts, seguint l’estructura definida al disseny.
Per últim s’esborraran els continguts de prova i es comprovarà que la visualització del
portal és totalment correcta i la informació es mostra correctament.
5.4. Proves
Una vegada ja es disposa del portal totalment configurat i amb la informació introduïda,
es realitzaran diferents proves per comprovar la integritat del portal, així com altres
aspectes, els quals es donen a conèixer al punt específic de la memòria destinat a
aquesta part del projecte.
5.5. Formació
Finalitzat el portal i amb les diferents proves passades amb solvència, es prepararan
unes formacions per a tots els integrants de l’equip de l’ICIP, ja que no han treballat mai
amb el gestor de continguts de Vignette 7.
Figura 27 Taula de camp de proves i eines relacionades
Portal Web ICIP Bermúdez Merino, Gabriel
- 45 -
Dites formacions es donen a conèixer al punt específic de la memòria destinat a aquesta
part del projecte.
Figura 28 Slide de la presentació per a formacions
Portal Web ICIP Bermúdez Merino, Gabriel
- 46 -
6. Proves
En aquesta secció s'enumeren les diferents proves que s'han de realitzar sobre el portal
per tal de validar la seva funcionalitat e integritat, així com les eines destinades a
aquestes proves.
6.1. Banc de proves
Per a validar la correcta funcionalitat e integritat del portal es realitzaran un seguit de
proves, aquestes es poden agrupar en els següents grups:
 Proves d’integració
 Proves de càrrega de dades
 Proves d’acceptació final de l’aplicació per part de l’usuari
 Proves d’accessibilitat
La prova d’integració es realitzarà a l’entorn de consolidació on es veurà si tot encaixa
perfectament, la interacció amb tots els serveis és correcte, les dades s’organitzen i es
mostren de la forma desitjada, els diferents rols d’usuaris poden fer les accions que
realment han de fer, entre d’altres. Aquí tindrem migrats uns continguts de prova que
formen part del denominat “pilot de la migració”.
La prova de càrrega de dades es realitzarà a l’entorn de pre producció. Es poden
generar continguts massivament amb el Webservice Genèric mantingut per l’Oficina
Tècnica de Vignette o també amb VBIS. Així mateix simuladors com ara el JMeter
poden emular tants usuaris en tant instant de temps per accedir a alguna informació o
servei del portal específic.
La prova final serà a l’entorn productiu amb l’usuari final i ja hi ha visibilitat des de
“l’exterior”. Per fer les proves finals s’haurà d’haver realitzat la importació total de tota
la informació i dades a l’Oficina Tècnica de Vignette a l’entorn de producció de forma
correcta.
La prova d’accessibilitat es farà sobre l’entorn productiu mitjançant eines de validació
d’accessibilitat, en concret es pretén complir un nivell AA pel portal
6.2. Eines de proves
Assegurem estandardització XHTML 1.0 Transitional segons el consorci W3C de totes
les pàgines web generades. Això s’aconsegueix amb el següent validador:
http://validator.w3.org/ També es validen CSS, JS i RSS.
S’assegura que es compleixen les normes d’accessibilitat web TAW nivell A i doble A.
http://www.tawdis.net/taw3/cms/es
Portal Web ICIP Bermúdez Merino, Gabriel
- 47 -
Hi ha diferents eines per fer proves amb diferents navegadors del Web.
 Lunascape: té 3 motors de renderització (IE, MF i Google Chrome)
 Plugins de Firefox per provar amb totes les versions de IE.
 Opera té un emulador per navegació en dispositius mòbils.
 Saphari.
Tenim diferents eines per provar diferents resolucions de pantalla.
 IE Developer Toolbar
 Barra de desenvolupament del Mozilla Firefox.
A nivell de codificació Java, si n’hem de realitzar, hi ha certs plugins per assegurar que
es segueix el estàndard definit per SUN MicroSystems (plugin de CheckStyles). També
s’empra el plugin PMD que valida el codi Java (http://pmd.sourceforge.net/) i FindBugs
(http://findbugs.sourceforge.net).
Figura 29 Captura d'inici de l'execució de les proves
Figura 30 Resultats d'una sèrie de proves sobre el portal
Portal Web ICIP Bermúdez Merino, Gabriel
- 48 -
6.3. Resultats esperats
Per a que un portal pugui sortir a viu s’han de complir les següents exigències de l’Oficina
Tècnica de Vignette:
 Portal maquetat segons l’estructura genèrica
 Portal amb codificació UTF-8
 Certificació AA/AAA de tota la web
 RSS amb format atom
 Integració correcta amb tots els elements externs
 Càrrega de com a màxim 3 segons per pàgina la primera vegada
 Mantindre el temps de càrrega amb més de 50 usuaris connectats alhora
 Mantindre el posicionament SEO amb tags HTML correctament declarats
Portal Web ICIP Bermúdez Merino, Gabriel
- 49 -
7. Formació
Un dels aspectes fonamentals és assegurar que tot el coneixement generat en el projecte
sigui transferit al personal del ICIP involucrat de la forma millor possible. Amb aquesta
idea es realitzaran sessions formatives durant la fase d’implementació. Les tasques
pertinents seran les següents:
 Redacció del pla de formació
 Crear el material corresponent
 Identificar clarament els requisits, recursos i usuaris
 Impartir la formació. A mida que es vagin migrant continguts al portal i
traspassant-los a l’entorn corresponent es començaran els diferents tipus de
formació als perfils de redactors i WebMasters del nou Web.
 A la següent transparència trobarem els diferents tipus de formacions previstes,
en quina fase del projecte es faran i una duració en jornades estimativa de
cadascuna d’elles.
 Per totes les formacions caldrà fer una bona definició, desenvolupament,
planificació i impartició.
Les diferents formacions previstes al final de la implantació del projecte a l’entorn pre
productiu i productiu són les següents:
Un cop realitzades les sessions formatives també s’inclou un suport funcional i tècnic
amb l’objectiu de resoldre els possibles dubtes que apareguin durant l’explotació dels
sistemes. Aquest suport durarà des de la càrrega de continguts i s’estendrà
posteriorment.
Per tal de la realització de la formació, per cadascun dels apartats de formació proposats
es generen una sèrie de documents per cada sessió.
CURS OBJECTIUS ASSISTENTS DURADA
Portal a GECO - Que Significa Que significa tenir un portal a GECO, conceptes de OTGeco Responsables del Projecte per part
del Departament d'Educació
1 jornada
Introducció a GECO Sessió introductoria a GECO, explicació de que es el portal i de conceptes
com: GECO, Continguts, DGAC, Gecopedia
Adiministradors i Redactors de
Continguts
2 jornades
Administracío de Portal Gestió del portal: Usuaris, rols, continguts, permisos, canals. Estructures
de Canal
Administradors del portal 2 jornades
Administració de Continguts Tipus de contingut, introducció de continguts, publicació, validació. Administradors del portal 2jornades
Formació Redactors de Continguts Tipus de contingut, introducció de continguts, publicació, validació. Redactors de Continguts 2 jornada
Figura 31 Taula de la programació de formacions
Portal Web ICIP Bermúdez Merino, Gabriel
- 50 -
7.1. Estructura de la formació
En base a les diferents formacions impartides s'han detectat diferents necessitats segons
l'usuari a rebre la formació:
 Administradors
 Formació avançada de continguts
 Tipus de continguts a utilitzar
 Administració de Continguts
 Estructura del portal
 Formularis
 Butlletins
 Continguts Multimèdia
 Configuració de Plana Personal
 Edició amb WebEditPro
 Usabilitat
 Més la formació Redactors
 Redactors
 Tipus de continguts
 Associació de Continguts
 Configuració de Plana Personal
 Edició amb WebEditPro
 Usabilitat
 Imatges
 Documents
 Copies de contingut
Aquesta divisió fa necessària la realització de dos formacions ben diferenciades, ja que
els dos rols definits realitzen funcions que no tenen cap relació entre elles.
A continuació es descriuen les diferencies i l’enfocament amb que s’han realitzat
aquestes formacions.
7.1.1.Formació per administradors
Les necessitats d’un administrador van des de la creació d’un canal i/o l’administració
d’aquest, fins a la gestió d’elements interactius amb l’usuari o l’accessibilitat del portal
en sí.
Aquestes activitats requereixen un alt coneixement de la plataforma, per tant,
s’acostuma a recomanar que els encarregats d’aquestes funcions siguin persones amb
experiència en aquest entorn.
Portal Web ICIP Bermúdez Merino, Gabriel
- 51 -
Figura 32 Relació de fitxers estàtics amb Definicions de Contingut
La formació per administradors es va plantejar:
1. Presentació explicant les diferents funcions que pot realitzar al sistema, així com
exemples gràfics d’aquestes.
2. Aportació de documentació escrita, la qual conté de manera més estesa la
informació de la presentació.
3. Sessió pràctica on els usuaris apliquen els coneixements adquirits anteriorment.
La presentació realitzada es basava sobretot en captures i vídeos del gestor, on els
usuaris veien com es realitzaven les accions, ja sigui per refrescar la memòria com per
aprendre nous coneixements.
La documentació també es troba enfocada cap al impacte gràfic, ja que les explicacions
es realitzen amb gràfics i petites descripcions.
La sessió pràctica es lliure, però dirigida per el formador cap a un seguit d’exercicis que
comporten realitzar accions sobre tots aquells elements amb els que interactuarà
l’administrador.
Com a afegit, la formació prepara al usuari amb una posició més alta en l’organigrama
per a que una vegada finalitzat el període de suport, aquest pugui donar suport als
usuaris de tipus redactor si tenen qualsevol problema o si es contracten a nous redactors
encarregar-se de la seva formació.
Per a que l’usuari pugui adquirir aquests coneixements, el pla d’acció es basa en que
aquest acompanyi durant un seguit d’hores al WebMaster que proporciona l’empresa
consultora, amb l’objectiu de que aprengui més profundament el funcionament del
sistema, així com els errors coneguts que es solen donar, d’aquesta forma el feedback
amb els altres usuaris serà més àgil i la qualitat del treball realitzat millorarà
considerablement.
Portal Web ICIP Bermúdez Merino, Gabriel
- 52 -
7.1.2.Formació per redactors
Les necessitats d’un administrador només van dirigides a presentar a l’usuari el seu nou
entorn de treball i entendre els nous conceptes que aporta Vignette.
Aquests conceptes són molt específics dels gestors de contingut, com poden ser:
 Channel
 Content Type Definition
 Site
 ...
La part més important de la formació, a part d’aconseguir que els usuaris entenguin els
nous conceptes, es tracta d’explicar com serà el seu nou flux de treball, es a dir, com
han de crear les notícies (per exemple) i assignar-les a un canal del portal per a que
l’usuari les pugui veure.
Figura 33 Flux de creació d'una notícia fins que la veu l'usuari final
La formació per redactors es va plantejar:
1. Presentació explicant les diferents funcions que pot realitzar al sistema, així com
exemples gràfics d’aquestes.
2. Sessió pràctica on els usuaris apliquen els coneixements adquirits anteriorment.
Com a l’anterior formació, la presentació era pràcticament en la seva totalitat gràfica,
exceptuant algun text, amb l’objectiu de que l’usuari es familiaritzes visualment amb el
gestor, per tant es una presentació “ràpida”.
Portal Web ICIP Bermúdez Merino, Gabriel
- 53 -
La sessió pràctica serà més llarga que per l’usuari Administrador, ja que al no tindre
coneixements previs sobre el gestor es feia necessari una formació més llarga, per que l’
immersió fos més profunda.
Portal Web ICIP Bermúdez Merino, Gabriel
- 54 -
8. Estudi econòmic
8.1. Conceptes
Degut a que és un projecte tancat mitjançant una oferta, no s’esmenarà l’esforç
econòmic del projecte, però si que es farà un desglossament de les hores de treball d’un
Analista Programador per fer les diferents tasques.
Hores Treball Analista Programador
Disseny :: Portal 120 hores
Disseny :: Integració
MeltWater
40 hores
Implementació ::
Estructura
40 hores
Implementació ::
Elements Visualització
160 hores
Implementació :: Migració
de la informació
80 hores
Proves 40 hores
Formació 40 hores
El treball d’un Analista Programador al projecte suposa un total de 520 hores, el que es
tradueix a 65 jornades de treball.
En el còmput global del projecte el desglossament d'hores seria:
Hores Treball
Anàlisi 120 hores
Portal Web ICIP Bermúdez Merino, Gabriel
- 55 -
Disseny 160 hores
Implementació 280 hores
Proves 40 hores
Formació 40 hores
Suport Post Implantació 80 hores
A l'apartat d'anàlisi, disseny, proves, etc. es troben incloses les hores utilitzades per
realitzar la documentació de cada estat.
8.2. Hardware i Software
Degut a que el projecte s'ha realitzat dins del marc d'una empresa consultora, no es
poden oferir dades econòmiques, però s'esmenaran els components Hardware i Software
que s'han necessitat per portar a terme el projecte.
Hardware
Portàtil
El gran creixement que ha tingut el software lliure en els últims anys, a més de
consolidar-se com una opció davant d’eleccions on històricament guanyava el software
propietari, molts dels programes utilitzats al projecte són lliures, amb una dilatada
carrera en el món del disseny i d’accessibilitat:
Software Lliure
Documentació FireShot
Desenvolupament Eclipse
Portal Web ICIP Bermúdez Merino, Gabriel
- 56 -
Encara que per motius obvis, també és necessari l’ús de software propietari:
Software Propietari
Documentació Paquet Microsoft Office
Desenvolupament
XML Spy
Photoshop
Proves
Firebug
Lunascape
jMeter
Portal Web ICIP Bermúdez Merino, Gabriel
- 57 -
9. Conclusions
Durant la meva carrera professional he pogut participar a projectes similars al que es
tracta en aquesta memòria, però per necessitats del projecte, aquest cop vaig participar
amb diferents rols de treball.
Aquesta situació va fer que realitzes una gran millora professional, ja que vaig
solidificar els meus coneixements sobre disseny i creació de portals sobre el gestor
Vignette, així com vaig adquirir experiència per a futures reunions de preses de
requisits, planificació de formacions i sobretot la redacció de documents tècnics
d’anàlisi.
Aquesta millora ha fet que ara sigui possible dirigir la meva carrera professional cap a
un nou conjunt de projectes, on realitzi noves tasques de més alt nivell o realitzar un
canvi de tecnologia per ampliar els meu radi d’impacte.
El projecte ha servit per establir l'empresa en una situació favorable en quant al disseny
e implementació de portals amb l'eina Vignette, d'aquesta manera s'han obert línies per
establir futurs contractes amb el mateix client.
Com ja he comentat anteriorment, personalment aquest projecte a focalitzat més la
meva carrera cap al disseny de futurs portals amb Vignette o altres eines de gestió, però
sempre en el marc de l'àrea de projectes e-business.
Portal Web ICIP Bermúdez Merino, Gabriel
- 58 -
10. Bibliografia
 Vignette Corporation (2007). Vignette Content Administration Guide: Versión
7.3.1. Austin (USA): Publication Department of Vignette Corporation. V7-0731-
315
 Vignette Corporation (2007). Vignette Content Extensibility Development
Guide: Versión 7.3.1. Austin (USA): Publication Department of Vignette
Corporation. V7-0731-312
 VV.AA. (2010). Documentació del projecte ICIP. Barcelona (Espanya)
 Michael Kay (2009). XSLT 2.0 and XPath 2.0 Programmer's Reference. 4a
Edició. Indianapolis (USA): Wrox. 978-0470192740
Portal Web ICIP Bermúdez Merino, Gabriel
- 59 -
A.Taula d'il·lustracions
Figura 1 Migració del portal estàtic........................................................................................3
Figura 2 Disseny estructural de Vignette................................................................................5
Figura 3 Disseny de portals de Vignette .................................................................................5
Figura 4 Metodología de treball ............................................................................................6
Figura 6 Definició del Road Map............................................................................................7
Figura 5 Estimació de temps del projecte...............................................................................7
Figura 7 Organigrama del projecte.........................................................................................8
Figura 8 Descripció dels rols dels actors.................................................................................8
Figura 9 Diagrama de comunicacióentre els actors ................................................................9
Figura 10 Descripció de la piràmide de riscos .......................................................................10
Figura 11 Taula de riscos alts del projecte............................................................................10
Figura 12 Taula de riscos mitjans del projecte ......................................................................11
Figura 13 Àrbre de navegació..............................................................................................20
Figura 14 Model visual de la pàgina.....................................................................................21
Figura 15 Model visual de la pàgina amb elselements del portal...........................................22
Figura 16. Diagrama de migració de les dades......................................................................25
Figura 17 Diagram d'estructura del portal............................................................................27
Figura 18 Diagrama d'estructura de la carpeta de continguts................................................29
Figura 19 Diagrama d'estructura de projectes de contingut relacional ...................................32
Figura 20 Diagrama de connexió: Vignette - MeltWater........................................................38
Figura 21 Gràfic de flux de creació d'un portal......................................................................39
Figura 22 Entorn de treball Vignette....................................................................................39
Figura 23 Exemple de l'estructura del portal ........................................................................40
Figura 24 Flux de configuració de contenidors d'informació..................................................41
Figura 25 Descripció de l'estructura de pàgina del portal ......................................................42
Figura 26 Flux de creació de informació...............................................................................43
Figura 27 Taula de camp de proves i eines relacionades........................................................44
Figura 28 Slide de la presentació per a formacions ...............................................................45
Figura 29 Captura d'inici de l'execució de les proves.............................................................47
Figura 30 Resultats d'una sèrie de proves sobre el portal......................................................47
Figura 31 Taula de la programació de formacions.................................................................49
Figura 32 Relació de fitxers estàtics amb Definicions de Contingut........................................51
Figura 33 Flux de creació d'una notícia fins que la veu l'usuari final .......................................52
Portal Web ICIP Bermúdez Merino, Gabriel
- 60 -
B. Glossari
A continuació s’esmenen tots aquells termes que poden dur a terme a confusió, a més
d’una breu descripció d’aquests.
 CAPABILITY: Poders dels que disposa un usuari per a realitzar determinades
accions
 CHANNEL: Branca del Site encarregada d’emmagatzemar les associacions de
diferents instancies de continguts amb la finalitat de publicar aquestes últimes
als entorns de viu.
 CONTENT TYPE DEFINITIONS: Definicions d’elements de VCM que
l’usuari pot instanciar (AGENDES, NOTICIES, etc.)
 GRUP: Unitat composta d'uns membres que es consideren vinculats entre ells
per a la realització d'una acció concreta
 HOME: Canal principal del Site on es declaren sub canals i els usuaris associen
instancies de contingut.
 ICIP: Sigles de Institut Català Internacional per la Pau.
 OBJECT TYPE DEFINITIONS: Definicions d’elements principals de VCM
que l’usuari pot instanciar (SITE, CHANNEL, etc.)
 PROJECT: Element encarregat d’emmagatzemar totes les instancies de
continguts creades pels usuaris
 ROL: Model de comportament que hom espera d'una persona amb relació al seu
estatus
 SITE: Element principal de Vignette, que simbolitza un Portal Web amb tots els
canals dependents i els elements imprescindibles per al seu funcionament
 VAP: Sigles de Vignette Application Portal, entorn de gestió de portals de
l’empresa Vignette.
 VBIS: Eina proporcionada per Vignette que agilitza la migració de continguts,
així com les proves d’estrès d’un portal.
 VCM: Sigles de Vignette Content Management, entorn de gestió de continguts
de l’empresa Vignette.
 WORFLOW DEFINITIONS: Definicions d’elements de gestió de flux de
treballs que l’usuari pot executar
BermudezMerino_ls24781

Mais conteúdo relacionado

Semelhante a BermudezMerino_ls24781

Presentacio arambee 03-05-2012
Presentacio arambee 03-05-2012Presentacio arambee 03-05-2012
Presentacio arambee 03-05-2012
Arambee
 
Cat Business Case Insyte
Cat Business Case   InsyteCat Business Case   Insyte
Cat Business Case Insyte
Ciro Alonso
 

Semelhante a BermudezMerino_ls24781 (20)

CGD2019 - Sessió: "Contractació pública a la Generalitat de Catalunya: un pro...
CGD2019 - Sessió: "Contractació pública a la Generalitat de Catalunya: un pro...CGD2019 - Sessió: "Contractació pública a la Generalitat de Catalunya: un pro...
CGD2019 - Sessió: "Contractació pública a la Generalitat de Catalunya: un pro...
 
Marcos baldovi Practica1 gestió projectes
Marcos baldovi Practica1  gestió projectesMarcos baldovi Practica1  gestió projectes
Marcos baldovi Practica1 gestió projectes
 
gestpro_practica1
gestpro_practica1gestpro_practica1
gestpro_practica1
 
2. Planifica la teva web v2
2. Planifica la teva web v22. Planifica la teva web v2
2. Planifica la teva web v2
 
Heura
HeuraHeura
Heura
 
Tic girona cas_exit_codina
Tic girona cas_exit_codinaTic girona cas_exit_codina
Tic girona cas_exit_codina
 
Projecte Iniciativa TIC 2022: IPM
Projecte Iniciativa TIC 2022: IPMProjecte Iniciativa TIC 2022: IPM
Projecte Iniciativa TIC 2022: IPM
 
Bloc3 1
Bloc3 1Bloc3 1
Bloc3 1
 
Presentacio arambee 03-05-2012
Presentacio arambee 03-05-2012Presentacio arambee 03-05-2012
Presentacio arambee 03-05-2012
 
Presentació INTERNET I EINES 2.0 PER FACILITAR LA TASCA DE COMANDAMENT sessió 1
Presentació INTERNET I EINES 2.0  PER FACILITAR LA TASCA DE COMANDAMENT sessió 1Presentació INTERNET I EINES 2.0  PER FACILITAR LA TASCA DE COMANDAMENT sessió 1
Presentació INTERNET I EINES 2.0 PER FACILITAR LA TASCA DE COMANDAMENT sessió 1
 
Practica webquest
Practica webquestPractica webquest
Practica webquest
 
Webquest practica
Webquest practicaWebquest practica
Webquest practica
 
Valoració projecte Digitalització Administració Pública Grup 3.pdf
Valoració projecte Digitalització Administració Pública Grup 3.pdfValoració projecte Digitalització Administració Pública Grup 3.pdf
Valoració projecte Digitalització Administració Pública Grup 3.pdf
 
Valoració Grup 3 Digitalització AAPP.pdf
Valoració Grup 3 Digitalització AAPP.pdfValoració Grup 3 Digitalització AAPP.pdf
Valoració Grup 3 Digitalització AAPP.pdf
 
Cat Business Case Insyte
Cat Business Case   InsyteCat Business Case   Insyte
Cat Business Case Insyte
 
Perfils 4
Perfils 4Perfils 4
Perfils 4
 
Novetats en els serveis d'atenció ciutadana
Novetats en els serveis d'atenció ciutadanaNovetats en els serveis d'atenció ciutadana
Novetats en els serveis d'atenció ciutadana
 
111013 activitat 2 david sanchez
111013 activitat 2 david sanchez111013 activitat 2 david sanchez
111013 activitat 2 david sanchez
 
Programació formativa ACTIC nivell bàsic
Programació formativa ACTIC nivell bàsicProgramació formativa ACTIC nivell bàsic
Programació formativa ACTIC nivell bàsic
 
INDRA: PROJECTE BESÒS
INDRA: PROJECTE BESÒSINDRA: PROJECTE BESÒS
INDRA: PROJECTE BESÒS
 

BermudezMerino_ls24781

  • 1. ESCOLA UNIVERSITÀRIA D’ENGINYERIA TÈCNICA DE TELECOMUNICACIÓ LA SALLE TREBALL FINAL DE GRAU GRAU EN ENGINYERIA INFORMÀTICA Bermúdez Merino, Gabriel Climent Ferrer, August PORTAL WEB ICIP
  • 2. ACTA DE L'EXAMEN DEL TREBALL FINAL DE GRAU Reunit el Tribunal qualificador en el dia de la data, l'alumne D. Gabriel Bermúdez Merino va exposar el seu Treball de Final de Grau, el qual va tractar sobre el tema següent: Portal Web ICIP Acabada l'exposició i contestades per part de l'alumne les objeccions formulades pels Srs. membres del tribunal, aquest valorà l'esmentat Treball amb la qualificació de Barcelona, VOCAL DEL TRIBUNAL VOCAL DEL TRIBUNAL PRESIDENT DEL TRIBUNAL
  • 3. Abstract La velocitat amb que avança la tecnologia fa que tan els departaments públics com els privats tinguin que evolucionar per a donar un millor servei a l’usuari. En el cas actual, per cobrir les exigències dels usuaris, es fa necessària la renovació de la web del Institut Català Internacional per la Pau, amb l'objectiu d'oferir al ciutadà un Portal Web que ofereixi tots els serveis necessaris per a una bona experiència de navegació, a més de complir els estàndards d'accessibilitat establerts. La creació del portal es realitza sobre la plataforma corporativa del client, la qual utilitza l'eina de gestió de continguts Vignette VCM 7.3 i de portals Vignette VAP 7.4. Dita plataforma proveeix un portal genèric, el qual proporciona components a reutilitzar per tal de fer més flexible i òptima la creació de nous portals, informació proporcionada per l’Oficina Tècnica de Vignette. També proveeix components visuals i mecanismes per interaccionar amb altres serveis corporatius externs.
  • 4. Resum El present document dona a conèixer les fases que es porten a terme durant la creació d'un nou portal amb l'eina corporativa de gestió de portals del client, centrant la seva redacció en el perfil d'Analista Programador, el qual es el que ateny al redactor. El Departament ja ha realitzat una fase inicial d’anàlisi i conceptualització dels diferents web a incloure dins d’aquest web de l’organisme. S’aprofitarà la migració del portal a l’Oficina Tècnica de Vignette per també optimitzar l’arquitectura dels continguts així com afegir noves funcionalitats, la majoria heretades del web Genèric mantingut per l’Oficina Tècnica de Vignette. Degut a aquest últim punt, la fase de presa de requeriments realitzades per el Cap de Projecte i l'Analista Funcional estava ja molt definida i el disseny tècnic del portal realitzat per l'Analista Programador, essent un portal fill del base per l’Oficina Tècnica de Vignette i amb els wireframes dissenyats per l'equip del departament, facilitaven el disseny sobre la plataforma de gestió. Desprès de l'anàlisi es va fer un disseny preliminar dels elements que no proporcionava l'eina de gestió, sobretot components de visualització. Dit disseny va anar evolucionant en el temps fins arribar a un disseny estable. Degut a la necessitat de realitzar una integració al portal amb el servei de notícies Meltwater és van fer un seguit de reunions e implantació posterior de dit servei al nou disseny del portal. Una vegada finalitzat el disseny del portal, la següent fase tractava sobre la migració del contingut de la web antiga (notícies, agendes, ...) a la nova web, seguint la nova estructura de continguts establerta per l’Oficina Tècnica de Vignette. Finalment es va preparar una formació per a usuaris i WebMasters amb l'objectiu de presentar la nova web i la metodologia d'introducció de nous elements al portal.
  • 5. Portal Web ICIP Bermúdez Merino, Gabriel - i - ÍNDEX 1. INTRODUCCIÓ ....................................................................................................... 3 1.1. ABAST DEL PROJECTE ............................................................................................. 3 1.2. CONTEXT DEL PROJECTE ........................................................................................ 4 1.3. METODOLOGIA I ORGANITZACIÓ DEL PROJECTE..................................................... 6 1.4. PLANIFICACIÓ DE TRASPASSOS................................................................................ 9 1.5. ESTUDI DE RISCOS................................................................................................. 10 1.6. MANTENIMENT ..................................................................................................... 11 1.7. SUPORT ................................................................................................................. 12 2. REQUERIMENTS.................................................................................................. 14 2.1. PUNTS ESSENCIALS................................................................................................ 14 3. ARQUITECTURA.................................................................................................. 16 3.1. ARQUITECTURA DE LA INFORMACIÓ ..................................................................... 16 3.2. CRITERIS DE DISSENY............................................................................................ 17 3.3. ARQUITECTURA DEL PORTAL ................................................................................ 19 4. DISSENY ................................................................................................................ 27 4.1. ESTRUCTURA DE CONTINGUTS .............................................................................. 27 4.2. ESTRUCTURA DE NAVEGACIÓ................................................................................ 33 4.3. INTEGRACIÓ AMB RSS MELTWATER.................................................................... 38 5. IMPLEMENTACIÓ................................................................................................ 39 5.1. CONFIGURACIÓ DELS ENTORNS............................................................................. 39 5.2. DESENVOLUPAMENT D’ELEMENTS DE VISUALITZACIÓ .......................................... 42 5.3. MIGRACIÓ DE CONTINGUTS................................................................................... 43 5.4. PROVES................................................................................................................. 44 5.5. FORMACIÓ............................................................................................................ 44 6. PROVES ................................................................................................................. 46 6.1. BANC DE PROVES................................................................................................... 46 6.2. EINES DE PROVES .................................................................................................. 46 6.3. RESULTATS ESPERATS........................................................................................... 48
  • 6. Portal Web ICIP Bermúdez Merino, Gabriel - ii - 7. FORMACIÓ............................................................................................................ 49 7.1. ESTRUCTURA DE LA FORMACIÓ............................................................................. 50 8. ESTUDI ECONÒMIC............................................................................................. 54 8.1. CONCEPTES........................................................................................................... 54 8.2. HARDWARE I SOFTWARE ...................................................................................... 55 9. CONCLUSIONS ..................................................................................................... 57 10. BIBLIOGRAFIA..................................................................................................... 58 A. TAULA D'IL·LUSTRACIONS............................................................................... 59 B. GLOSSARI ............................................................................................................. 60
  • 7. Portal Web ICIP Bermúdez Merino, Gabriel - 3 - 1. Introducció El present projecte sorgeix de la necessitat del Institut Català Internacional per la Pau de migrar la web en HTML estàtic que fa les funcions de portal a la xarxa, cap a un Portal Web dins de l’estructura corporativa del client, utilitzant les aplicacions corporatives per aquest objectiu, en el cas que ens abast: Vignette, a més d’aplicar els seus protocols, metodologies, documentació, etc. L'arquitectura de la informació proposada té en compte l'escalabilitat per a donar resposta a futures necessitats d'informació: nous recursos, nous serveis, etc. Requisits arquitectònics i de disseny que son tractats més endavant. 1.1. Abast del projecte El principal abast del projecte es la migració del portal en format estàtic cap a la plataforma Vignette, aquesta migració requereix d’un seguit de punts que s’han de complir. Figura 1 Migració del portal estàtic Aquestes línies d’actuació que requereix el projecte, tant a nivell de servei com a requeriments tècnics i funcionals, s’esmenen a continuació:  Abast del servei:  Conceptualització i arquitectura de continguts  Gestió del projecte  Anàlisi de continguts i serveis  Anàlisi de portals
  • 8. Portal Web ICIP Bermúdez Merino, Gabriel - 4 -  Disseny tècnic dels components  Desenvolupament dels components i configuració de funcionalitats  Activitats de proves  Migració de continguts  Muntatge del web  Gestió del canvi  Gestió de la Qualitat del servei  Suport post implantació  Suport a WebMaster  Requeriments tècnics i funcionals:  Preparar el portal per al català, castellà i anglès  Construcció de la estructura del portal  El portal ha de permetre un canvi de css per al canvi d’imatge  Integració amb el software de gestió multimèdia per l’arxiu multimèdia de l’ICIP  Cal preveure l'integració de l’agenda  Butlletí electrònic (implica desenvolupar un element de presentació)  Desenvolupament dels diferents formularis de consulta  RSS per publicacions i activitats  Integració amb el cercador per cercar dins del portal  Desenvolupament de 2 “grids” i 7 “formes de presentació”  Migració de 250 pàgines (font en HTML o documents ofimàtics)  Integració del servei de noticies Meltwater 1.2. Context del projecte L’Oficina de gestió de portals ofereix funcionalitats comuns a tots els portals corporatius, les quals deuen ésser utilitzades per la implementació de nous:  Funcionalitat Java  Formes de presentació, estils i portlets VAP que conformen el portal genèric. Hi ha portals antics o bé amb requeriments especials que no fan ús del genèric, però la idea és que els nous portals reutilitzin al màxim els components del portal genèric, per tal de fer més flexible i òptima la creació de nous portals. Val a dir que el portal genèric també proveeix components visuals i mecanismes per interaccionar amb altres serveis corporatius externs a l’Oficina Tècnica de Vignette.
  • 9. Portal Web ICIP Bermúdez Merino, Gabriel - 5 - Figura 2 Disseny estructural de Vignette El nou portal s’implementarà amb els components que proveeix l’Oficina Tècnica de Vignette i el web Genèric. També tindrà peces pròpies. Les peces pròpies seran components definits pel Departament i controlats també pel mateix. Durant la fase d’anàlisi funcional cal veure quines peces són genèriques i quines caldrà fer-les específicament pel portal i per tant no es podran reutilitzar les del web Genèric. Posteriorment, s’han de dicidir funcionalitats específiques que s’han fet per a un portal, passin a ser funcionalitats genèriques. Figura 3 Disseny de portals de Vignette
  • 10. Portal Web ICIP Bermúdez Merino, Gabriel - 6 - 1.3. Metodologia i organització del projecte A continuació es dona a conèixer la metodologia implementada durant el projecte, així com la organització interna del equip de treball dins del projecte. 1.3.1. Metodologia d’execució del servei La metodologia de treball utilitzada durant la portada a terme del projecte ha sigut la establerta per el departament de Tecnologies de la Informació de l’Oficina Tècnica de Vignette. Figura 4 Metodología de treball En el nostre cas afectaran les fases centrals tenint com a principals activitats les que destaquem a continuació:  Disseny de la funcionalitat  Anàlisi tècnic  Definició de la gestió  Fase de codificació  Etapa de proves  Formació als usuaris i implantació del sistema  Transferència a l’entorn d’explotació  Prova d’acceptació final Cal tenir en compte que al final de la posada en marxa del sistema a l’entorn productiu comença el suport post implantació que implica l’activitat Suport Post Implantació. 1.3.2. Organització i Road Map del projecte A continuació es presenta el Road Map del projecte, així com l’organització de l’equip de treball que han participat en el desenvolupament del portal.
  • 11. Portal Web ICIP Bermúdez Merino, Gabriel - 7 - 1.3.2.1. Road Map Al llarg de tot el projecte es generen productes intermedis, generalment en forma de documentació, fins a l'entrega final del projecte, on, a més a més, es realitza l'entrega del codi font i l'executable (implantació). Figura 6 Definició del Road Map Figura 5 Estimació de temps del projecte
  • 12. Portal Web ICIP Bermúdez Merino, Gabriel - 8 - 1.3.2.2. Organització En el present apartat es donen a conèixer els diferents rols que participen al desenvolupament del projecte, així com les tasques realitzades per cadascun. Figura 7 Organigrama del projecte Hi ha la participació en el projecte de persones especialitzades en àrees de coneixement diverses. Amb l’objecte d’aprofitar al màxim les capacitats dels recursos utilitzats i per dotar l’equip de treball de suficient flexibilitat, l’estructura ideal de treball en el projecte seria la següent: Figura 8 Descripció dels rols dels actors
  • 13. Portal Web ICIP Bermúdez Merino, Gabriel - 9 - Figura 9 Diagrama de comunicació entre els actors 1.4. Planificació de traspassos La implementació del portal és realitza a l'entorn dedicat per als desenvolupaments d'aquests portals proporcionat per l'Oficina Tècnica de Vignette, per aquesta raó, una vegada s'hagi construït l'estructura del portal es deurà realitzar un traspàs del portal fins a l'entorn productiu, passant per l'entorn pre productiu per a comprovar la correcta integració d'aquest. Aquesta planificació es pot dividir en els següents punts  Inici de la construcció del portal: Les configuracions del Web inicialment es duran a terme a l’entorn de consolidació.  Traspàs “full”: una vegada s’hagin aprovat les proves a l’entorn de consolidació, el proveïdor complimentarà la documentació de traspàs corresponent disponible al gestor d’incidències i aleshores si tot és correcte i es passa les validacions de l'Oficina Tècnica de Vignette, tota la configuració del portal serà traspassada als entorns de pre producció i producció perquè es pugui provar tot en aquests entorns.  Posteriors traspassos: Una vegada s’ha realitzat un traspàs full després els posteriors traspassos (si calen) en setmanes successives poden ser també full o bé parcials (certes configuracions noves desenvolupades). Sempre cal obrir una petició de traspàs al gestor de incidències i complimentar la documentació corresponent.
  • 14. Portal Web ICIP Bermúdez Merino, Gabriel - 10 - 1.5. Estudi de riscos Degut a la quantitat d’elements dins de l’abast del projecte, es feia indispensable un estudi de riscos exhaustiu, del qual es van treure les següents conclusions. Figura 11 Taula de riscos alts del projecte Figura 10 Descripció de la piràmide de riscos
  • 15. Portal Web ICIP Bermúdez Merino, Gabriel - 11 - 1.6. Manteniment Aquests serveis estan enfocats a la realització de les tasques de manteniment correctiu i evolutiu dels portals que estiguin en producció sobre la plataforma. S'haurà de disposar d'un equip de manteniment especialitzat en solucions i tecnologies Internet (J2EE, XML, xHTML, gestors de continguts i portals, buscadors, normatives d'estàndards i d'accessibilitat, etc) i que ofereixi un coneixement complet i detallat dels aspectes tècnics relatius als components i els productes Vignette que conformen la plataforma. A Figura 12 Taula de riscos mitjans del projecte
  • 16. Portal Web ICIP Bermúdez Merino, Gabriel - 12 - més aquest equip tindrà coneixement en la plataforma Vignette i en les funcionalitats del portal del Departament, ajudant a aconseguir amb èxit els objectius proposats. Les activitats que queden cobertes per aquest àrea són les que corresponen al cicle de vida sencer d'una actuació de manteniment, i que es detallen a continuació.  Manteniment Correctiu  Anàlisi de la incidència  Revisió disseny tècnic  Correcció i o/configuració del programari  Execució de proves unitàries  Execució de proves d'integració en l'entorn d'integració  Coordinació amb responsables tècnics i funcionals de framework i portals per actualitzar la documentació tècnica i de configuració  Documentació de protocols d'implantació  Actualització de manuals d'usuari  Manteniment Evolutiu  Valoració d'esforç  Disseny funcional de la solució  Disseny de les proves funcionals  Disseny tècnic  Desenvolupament, Correcció i o/configuració del programari  Disseny i execució de proves unitàries  Disseny i execució de proves d'integració en l'entorn d'integració  Disseny i execució de proves de càrrega en l'entorn de preproducció  Coordinació amb responsables tècnics i funcionals de framework i portals per actualitzar la documentació tècnica i de configuració  Documentació de protocols d'implantació  Documentació de manuals d'usuari  Formació d'usuari 1.7. Suport Es realitzaran tasques de suport tant a la part funcional com en la tècnica del portal que es trobi sobre la plataforma corporativa, independentment de l'estat: en desenvolupament, en validació, consolidació, producció, etc  Suport Funcional /Tècnic: troba el suport a l'administració dels portals, la responsabilitat de la gestió del reposador de components (pàgines, portlets, configuracions, etc.), l'optimització de l'ús de components mitjançant la reutilització de components, amb l'estratègia de creixement divergent en funció de l'escalabilitat dels portals.  Suport WebMaster: Dins de les tasques de manteniment suport evolutiu es contempla el donar suport Webmaster als usuaris de l’ICIP.
  • 17. Portal Web ICIP Bermúdez Merino, Gabriel - 13 - Una vegada finalitzat el traspàs de coneixements entre les empreses desenvolupadores i el ICIP, per tal de garantir la mantenibilitat dels desenvolupaments així com el manteniment i emmagatzemament de les últimes versions de les aplicacions és farà un suport post implantació. Els responsables d'aquest servei participaran en reunions tècniques de definició de nous desenvolupaments amb tal de garantir que aquests seran integrables dins la infraestructura existent. Donat l'alt grau de coneixement de la plataforma per part dels tècnics i el seu compromís amb la plataforma, aquests suggeriran al ICIP aquells manteniments evolutius o tasques d'administració que considerin que poden millorar el funcionament del portal, l'experiència d'usuari dels clients, reduir els costos de desenvolupaments de nous serveis, etc. aconseguint així una que redundi en una millor percepció del servei ofert. Dins aquest abast es donarà suport a:  Suport al ICIP en la presa de decisions relatives a projectes.  Participació en el disseny del sistema d'informació de l'organització.  Interlocució amb usuaris responsables dels processos per a la definició de requeriments.  Planificació dels projectes d'acord amb les prioritats de l'organització.
  • 18. Portal Web ICIP Bermúdez Merino, Gabriel - 14 - 2. Requeriments L’objectiu clau del projecte és la creació del portal de l’Institut Català Internacional per la Pau (ICIP) sobre la plataforma corporativa de publicació web del client, Vignette Web Content  S'analitzarà en detall:  Conceptualització i migració de continguts  Disseny tècnic dels components  Desenvolupament components i funcionalitats  Migració continguts  Creació del portal  Tasques a realitzar en el projecte:  Gestió, coordinació i seguiment de projecte  Anàlisi de continguts i serveis  Anàlisi dels portals  Gestió de proves  Gestió del canvi  Qualitat del servei  Suport El Departament ja ha realitzat una fase inicial d’anàlisi i conceptualització dels diferents web a incloure dins d’aquest web de l’organisme. S’aprofitarà la migració del portal a l’Oficina Tècnica de Vignette per també optimitzar l’arquitectura dels continguts així com afegir noves funcionalitats, la majoria heretades del web Genèric mantingut per l’Oficina Tècnica de Vignette. Destacar que caldrà compatibilitzar el nou portal amb un sistema extern:  Integració amb el Servei de Notícies Meltwater News (SNMN) Així doncs caldrà fer el desenvolupament necessari per tal d’integrar l’aplicació amb SNMN de la forma més òptima possible i amb el menor impacte. L’objectiu és que la presentació de dades, formularis i llistats de resultats d’aquestes aplicacions emprin la nova guia d’estils. Aquest nou portal es preveu que tingui els seus continguts tant en català com en castellà i anglès. 2.1. Punts essencials Considerant l’abast del projecte que es desprèn del plec, s’estableixen a alt nivell els següents punts essencials a analitzar:  Conceptualització i continguts: Des del Departament ja s’ha fet una primera anàlisi de la conceptualització de dades i arquitectura de continguts per al nou web. Caldrà analitzar en detall els documents que han realitzat i veure que
  • 19. Portal Web ICIP Bermúdez Merino, Gabriel - 15 - s’entenen perfectament i que són models d’informació que es poden implementar tècnicament d’una manera senzilla i eficient .  Migració de continguts: Tasques de migració dels continguts que hi ha en els diferents espais existents. Processos d’adequació de dades. Migració tenint part de la nova informació en documents ofimàtics i pàgines web HTML: es preveu la migració aproximada de 250 pàgines de contingut. Validació dels processos de migració i dels continguts ja migrats conjuntament amb membres del ICIP.  Anàlisi del format dels continguts i serveis del web: quins seran els tipus de contingut a emprar, taxonomies, rols d’usuaris, workflows, abast de la migració i mecanismes d’integració de serveis.  Anàlisi dels portals: es farà una anàlisi del portal des del punt de vista de la interfície d’usuari per tal que pugui ser allotjat a la plataforma corporativa del cient.  Disseny tècnic dels components: Nous desenvolupaments han de seguir les directrius de Vignette.  Funcionalitats del portal i mecanismes d’integració amb serveis externs a l’Oficina Tècnica de Vignette proveïts pel web Genèric: recull de funcionalitats genèriques bàsiques que el portal ha d’oferir a l’usuari final així com la interacció amb serveis corporatius que resideixen en plataformes diferents a la de l’Oficina Tècnica de Vignette. Especial detall a: RSS, Forms, Butlletins electrònics, Contractació Pública, Servei d’Atenció Ciutadana , enllaços a xarxes socials i cercador índexat en Google GSA.  Integració d’aplicacions específiques en aquest nou portal. Caldrà desenvolupar aplicacions per garantir òptimes integracions el sistema extern corporatiu SNMN: Aquesta aplicació es re dissenyarà a nivell de presentació de la informació per tal què compleixen el llibre d’estils visuals.  Desenvolupament de nous components com 7 formes de presentació addicionals  Banc de proves: es detalla el conjunt de proves així com les diferents fases en les que s’organitzen durant tota la construcció del portal.  Traspassos del portal: com el portal configurat serà traspassat pels diferents entorns corporatius fins arribar a l’usuari final.  Qualitat del software desenvolupat: eines emprades per tal de generar software de qualitat i estàndard.  Eines de desenvolupament: software emprat per la codificació Java.  Gestió de projecte, coordinació i seguiment de tasques principals.  Gestió del canvi: descripció de les activitats d’aquest procés.
  • 20. Portal Web ICIP Bermúdez Merino, Gabriel - 16 - 3. Arquitectura 3.1. Arquitectura de la informació El conjunt de tasques agrupades sota la denominació “Arquitectura de la informació”, ens permet establir una organització lògica dels continguts i serveis del lloc web de manera que es faciliti a l'usuari la localització de la informació i la seva interacció amb el lloc web. L'arquitectura d'informació contempla diferents aspectes que passen per: la identificació del mapa de seccions i subseccions del portal, estructures de navegació, identificació d'eines i utilitats (fòrums, buscador, etc..), establir jerarquia del lloc òptima aturés la navegació (nombre de nivells de profunditat a l'accés a la informació), etiquetatge de les seccions, adequació de la línia editorial, organització dels continguts en cada pàgina (definició d'espais funcionals) etc. Un dels aspectes resultants del procés de definició de l'Arquitectura de la Informació del Portal, serà l'elaboració d'una estratègia de continguts i serveis, un altre aspecte fonamental en què se sustenta l'experiència d'usuari és la pròpia oferta de continguts i serveis es vulgui posar a disposició de l'usuari final. En aquest sentit, és important identificar prèviament quals són els objectius estratègics i, sobretot, quines són les necessitats dels usuaris, de manera que es puguin establir els criteris de priorització que permetin extreure aquells continguts i serveis de vertader valor afegit per als usuaris del Portal. Com a primera part del projecte, i a fi d'assegurar que el producte final respon als objectius marcats, es planteja la realització d'una fase de Diagnòstic que:  Asseguri la correcta identificació de totes les necessitats i requeriments tant de serveis com d'informació.  Permeti definir l'estructura i organització global del Portal la facilitant la seva evolució futura.  Sent les bases per garantir l'eficiència en les tasques de construcció.  Determini tots els components (organitzatius, funcionals i tècnics), la seva interrelació i dependències per garantir la correcta implantació i l'efectivitat de la seva utilització. A mesura que dissenyem la solució de gestió de continguts serà necessari avançar en la veritable definició del sistema, per a la qual cosa resultarà necessari:  Conèixer quina és la missió del lloc web i el contingut associat.  Definir l'estructura i organització requerida per crear i gestionar el contingut, incloent el nivell de centralització o descentralització associat.  Els rols i responsabilitats requerits.  Definir els processos de gestió, incloent la gestió del cicle de vida dels continguts.
  • 21. Portal Web ICIP Bermúdez Merino, Gabriel - 17 -  Establir els sistemes de mesurament i les mètriques que havien de ser tingudes en compte per assegurar que el sistema de gestió de continguts és eficient.  Establir les polítiques que requereix l'organització per a la gestió dels seus continguts web, incloent aspectes tals com; disseny i imatge corporativa, usabilitat, inventari de fonts d'informació, etc.  Definir el model de continguts. La gestió de continguts constitueix una part crítica per a l'èxit de qualsevol lloc web. Des del punt de vista estratègic, el sistema proposat ha de ser capaç de gestionar no sols les dades crítiques per a l'activitat del lloc web, sinó també els diferents tipus de documents i continguts a fi de fer-los accessibles als usuaris dels portals. Per tant, es pot identificar una sèrie de factors claus per assegurar l'èxit en la implantació d'un sistema de gestió de continguts:  Capturar i compartir coneixement dins l'àmbit de l'organització.  Mantenir el contingut del lloc web actualitzat, segur i controlat.  Reduir els costos associats a la distribució i entrega del contingut.  Incrementar la productivitat.  Reduir el temps de posada en marxa.  Millorar la qualitat de la informació destinada a la presa de decisions.  Etc. 3.2. Criteris de disseny 3.2.1. Criteris estètics Des del punt de vista estètic, el disseny haurà de resultar agradable a l'usuari, transmetent els valors i missatges que es desitgen associar al Portal com a concepte de “marca”. 3.2.2. Criteris tècnics Des del punt de vista tecnològic s'utilitzaran estàndards Web, definits pel consorci de la W3C:  Excepte per a aquelles pàgines que mostrin documents extensos, el desplaçament vertical s'ha de minimitzar, de manera que tota la informació important estigui a la vista des d'un primer moment. En aquelles pàgines amb textos llargs es podrà incloure al final un enllaç al principi de les mateixes.  Evitar el desplaçament horitzontal de la pàgina: S'ha de limitar l'amplària de la pàgina a la grandària de la pantalla, ja que resulta molt difícil llegir paràgrafs quan cal desplaçar la pàgina horitzontalment.
  • 22. Portal Web ICIP Bermúdez Merino, Gabriel - 18 -  S'han de proporcionar referències a altres continguts del web mitjançant enllaços a pàgines que continguin informació relacionada amb els continguts de la pàgina que s'està visitant.  Els elements de navegació han d'estar agrupats i situats en un lloc clarament visible de la pàgina, mantenint una consistència de la dita situació en totes les pàgines.  No és adequat crear pàgines que no disposin de mitjans de retorn. Totes les pàgines del portal ha de tenir almenys un enllaç pel qual es pugui continuar la navegació.  Disseny una estructura de navegació clara que asseguri que es proporciona un camí còmode per visitar totes les pàgines web del portal, independentment que a aquestes es pugui accedir per distintes vies.  Creació de pàgines de pantalla i mitja com a grandària màxima. En general, no s'han de fer pàgines de grandària major a una pantalla i mitja. D'aquesta manera s'evitaran molts problemes i es facilitarà la lectura de les mateixes. Les pàgines de grandària una pantalla i mitja són còmodes de llegir i no saturen el lector amb massa informació. Quan una pàgina ocupa més de tres pantalles, s'ha d'incloure un índex de continguts al principi de la pàgina. 3.2.3. Criteris d'usabilitat Els atributs o criteris d'usabilitat són aquelles característiques que faciliten l'ús del sistema al visitant, incloent els relacionats amb la interacció, la visualització i l'emotivitat. D'altra banda, hi ha una sèrie de requeriments mesurables, directament relacionats amb la usabilitat, com són els associats al rendiment i temps de resposta. Dins els atributs d'usabilitat relacionats amb la interacció que han de tenir-se en compte durant el disseny, desenvolupament i implantació del portal es poden destacar:  Personalització de l'entorn de l'usuari: Personalització de la interfície i els seus components segons preferències personals.  Eficiència: Minimització de nombre de clic, pàgines visualitzades o passos per obtenir la informació desitjada.  Integració: Integració fàcil i intuïtiva amb altres aplicacions o entorns funcionals.  Navegació: Facilitat perquè l'usuari pugui recordar un mapa mental de l'estructura, traduint això en la facilitat per intuir quin camí seguir en tot moment.  Predicció: L'usuari ha de poder preveure els resultats de les seves accions.  Integritat conceptual: Simplificació de l'aprenentatge i l'execució de tasques per part de l'usuari.  Consistència: Totes les seleccions i accions mantenen una línia comuna d'execució.  Interacció: Oferir a l'usuari informació sobre l'estat de l'execució de les seves tasques o accions (progrés o temps restant, consells, missatges d'error...).  Temps de resposta.
  • 23. Portal Web ICIP Bermúdez Merino, Gabriel - 19 -  Sistemes d'ajuda: Mapes Web, accés a pàgines de resposta a preguntes freqüents (FAQ), buscadors, mòdul d'ajuda. 3.2.4. Nivell d'accessibilitat AA A continuació detallem les accions que seran realitzades en el transcurs del desenvolupament del nou Portal amb la finalitat de garantir un nivell d'accessibilitat AA. Per comprovar que un Lloc Web compleix amb les normes d'accessibilitat, la iniciativa WAI (Web Accesibility Initiative) de la W3C (World Wide Web Consortium) proposa la realització de les següents proves:  Verificar l'accessibilitat amb eines automàtiques i revisió humana. Els mètodes automàtics són generalment ràpids i convenients, però no poden identificar tots els problemes d'accessibilitat.  Utilitzar els mètodes de validació des de les primeres etapes del desenvolupament. Els problemes d'accessibilitat que s'identifiquen primer són fàcils de corregir i d'evitar. Entre els dits mètodes de validació, es compten els següents:  Utilitzar una eina automatitzada de validació de l'accessibilitat i la navegació.  Validar la sintaxi de programació de les pàgines amb les eines ofertes pel W3C.  Validar els fulls d'estil (Ex., CSS).  Utilitzar un emulador o navegador només-text.  Utilitzar diversos navegadors gràfics, amb: sons i gràfics carregats ,gràfics no carregats, sons no carregats, sense ratolí...  Utilitzar diversos navegadors, antics i nous.  Utilitzar un navegador amb conversió text-veu, un lector de pantalla, un programa de magnificació, una pantalla petita, etc.  Utilitzar un revisor gramatical i ortogràfic. Una persona que llegeix una pàgina amb un sintetitzador de veu pot no ser capaç de desxifrar la pronunciació que emet aquest dispositiu d'una paraula que té un error ortogràfic..  Revisar el document quant a la seva claredat i simplicitat. Els editors poden també millorar la usabilitat dels documents, en identificar problemes potencials de sensibilitat cultural que poden presentar-se, a causa de l'ús del llenguatge o de les icones. 3.3. Arquitectura del portal En el present punt es dona a conèixer la arquitectura del portal dissenyada, mostrant el seu arbre de navegació, així com una mostra de l’estructura de pàgina del portal.
  • 24. Portal Web ICIP Bermúdez Merino, Gabriel - 20 - 3.3.1. Arbre de navegació L’arbre de navegació fa referència a les diferents pàgines d’informació que es troben dins d’un portal; i permet veure com es troben organitzades dins d’un portal. Permet a més veure els diferents nivells d’informació que visualitza la seva jerarquia. L’Institut Agenda CentredeDocumentació Presentació Creació Funcionsi Objectius Estructurai Organització Detall Colaboradors SaladePremsa Documents Documents Institucionals Enllaços Enllaços d’Interes Activitat ProgramesdeRecerca Seguimentianàliside conflictesarmatside processosdepau MovimentperlaPau Politiquesdeseguretati Defensa ConstrucciódePau Formació ConsruccióperlaPau Formació Detall Colaboradors CercaalCatàleg ArxiuMultimedia Revistes BasesdeDades ServeisServei Detall MapaWebContacte NoticiaActualitat Convocatòries, bequesifeina DossiersDocumentsContacte Eixosdetreballi programesderecerca Publicacons Revistes Llibres WorkingPares DocumentsiInformes Bulletins Publicacio Bulletin WorkingPares Treballaambnosaltres Col·laboradors Evoluciódelapeace researchidelspeace Figura 13 Àrbre de navegació
  • 25. Portal Web ICIP Bermúdez Merino, Gabriel - 21 - Com es pot observar, la Home del portal disposa de canals fills, els quals a la vegada disposen de canals fills, fins com a màxim un nivell 4 de profunditat. A més de la Home, al mateix nivell disposem d’un canal amb el Mapa Web i un altre amb la pàgina de Contacte. 3.3.2. Model de pàgina Un model de pàgina, és una estructura que permet agilitzar la creació de una pàgina web. Per tant, l’estructura conté la configuració de les diferents regions, zones, components; així com la seva distribució i ubicació dins de una pàgina web. Figura 14 Model visual de la pàgina
  • 26. Portal Web ICIP Bermúdez Merino, Gabriel - 22 - Un model de pàgina conté certs elements que son comuns a totes les pàgines que els facin servir així com possibles elements comuns a totes les pàgines i models de pàgines de un portal En el nostre cas, tots els models de pàgina tindran la mateixa estructura base, degut a que s’haurà se seguir recomanacions corporatives de l’Oficina Tècnica de Vignette pel desenvolupament de portals. Figura 15 Model visual de la pàgina amb els elements del portal Representació del que seria un model de pàgina corporatiu de l’Oficina Tècnica de Vignette, i aquesta imatge l’utilitzarem com base per fer la definició dels components comuns. 3.3.3. Estructura de dades Degut a la necessitat de mostrar diferent informació amb diferent estructura, s’utilitzaran diferents definicions de contingut segons la necessitat. A continuació es mostren les estructures, ja proveïdes pel sistema, amb la informació útil que s’omplirà.
  • 27. Portal Web ICIP Bermúdez Merino, Gabriel - 23 - 3.3.3.1. Article Un Article es un tipus de contingut que ens permet definir certes estructures d’Informació i que té la següent estructura: Camp Tipus Descripció Títol String Camp que permet tenir definir el títol d’un article Cos String Aquest camp conté tota la informació d’un article, pot estar composats per paràgrafs. Entradeta String L’entradeta es correspon amb a un paràgraf breu i descriptiu de l’article i que sortirà en aquells llistats que mostrin una breu descripció d’un article Imatges Imatge Un article pot contenir un conjunt d’imatges associades/relacionades amb l’article. La seva mida pot variar així com les seves longituds Vídeos Vídeos Un article pot contenir un conjunt de vídeos associades/relacionades amb l’article. La seva mida pot variar, es mostraran a una mida determinada Enllaços Enllaç Conjunt d’enllaços Documents Document Conjunt de documents Blocs Bloc Article Conjunt d’articles Banners Banner Conjunt de banners 3.3.3.2. Banner Un Banner es un tipus de contingut que ens permet definir elements que els quals donen la possibilitat de fer un enllaç visual cap a una adreça http.
  • 28. Portal Web ICIP Bermúdez Merino, Gabriel - 24 - Camp Tipus Descripció Títol String Títol descriptiu del banner Descripció String Paràgraf breu i descriptiu del banner Imatge Imatge Imatge visual associada a el banner Enllaços String Adreça http vinculada al banner 3.3.3.3. Imatge Una Imatge es un tipus de contingut que, com indica el seu nom, allotja una imatge amb la informació d’accessibilitat d’aquesta. Camp Tipus Descripció Títol String Títol/nom de la imatge Títol Alternatiu String Nom alternatiu per mostrar en cas que la imatge no es pugues mostrar Peu d’Imatge String Text del peu de la imatge Fitxer Estàtic Fitxer Fitxer gràfic de l’imatge: jpg, gif, gif animades, png 3.3.3.4. Document Un Document es un tipus de contingut que, com indica el seu nom, allotja un document amb la informació d’accessibilitat d’aquesta. Camp Tipus Descripció Títol String Títol/nom del document Descripció String Descripció del document
  • 29. Portal Web ICIP Bermúdez Merino, Gabriel - 25 - Figura 16. Diagrama de migració de les dades Text Alternatiu String Text alternatiu que sortirà en cas que l’enllaç cap el document no es pugues mostrar Fitxer Estàtic Fitxer Fitxer físic del document 3.3.3.5. Enllaç Un Enllaç es un tipus de contingut que ens permet definir elements que permeten fer un enllaç visual cap a una adreça http Camp Tipus Descripció Títol String Títol descriptiu del banner URL String Adreça http vinculada al banner Descripció String Paràgraf breu i descriptiu del banner Text Alternatiu String Nom alternatiu per mostrar en cas que l’enllaç no es pugues mostrar 3.3.4. Migració de les dades Degut a que l'objectiu de la introducció dels continguts, és la de migració dels definits a l'estructura estàtica del portal al nou portal dinàmic, per això és necessari establir la política de migració de dades que s'utilitzarà per realitzar dita acció.
  • 30. Portal Web ICIP Bermúdez Merino, Gabriel - 26 - La migració dels continguts serà un procés clau en tot el projecte. Cal establir els processos de verificació de la integració de la informació creada al gestor de continguts.  Processos de validació durant les diferents etapes de la migració.  Validació manual.  Inicialment també es realitzarà càrrega de continguts manualment per veure que tot és correcte.  Totes les estratègies de migració que s’empraran es provaran inicialment amb una mostra reduïda de continguts de cada tipus. Això és el que denominarem “pilot” de la migració.  Es realitzarà una validació de la informació a migrar en el nou Web conjuntament amb membres i redactors del Departament d’Interior, Relacions Institucionals i Participació
  • 31. Portal Web ICIP Bermúdez Merino, Gabriel - 27 - 4. Disseny Un disseny de portal sobre l’eina corporativa de gestió de portals Vignette inclou sempre unes fases a realitzar fixes per a tots els nous portals:  Disseny de les maquetes del portal  Disseny de l’estructura de continguts a l’entorn de gestió de continguts (VCM)  Disseny de l’estructura de navegació a l’entorn de gestió de portals (VAP) En el nostre cas, com que el client ja proporciona unes maquetes per al disseny visual del portal, aquest pas es eludible. Però degut a un requisit addicional, es necessari dissenyar la integració amb el servei de noticies extern MeltWater. En els següents punts es donarà a conèixer el disseny de les diferents estructures, així com la integració amb MeltWater. 4.1. Estructura de continguts El gestor de continguts Vignette proporciona un sistema basat en una estructura jeràrquica, en la qual s’han de destacar diferents elements, els quals enumerem a continuació. 4.1.1. Portal Estructura jeràrquica amb l’element per a Site, el qual especifica un nou portal dins del gestor, amés de contindré una estructura de canals definida:  Application Assets: Canal encarregat d’emmagatzemar els continguts relacionals entre el portal de VCM i VAP  Archived Content: Canal encarregat d’emmagatzemar els continguts arxivats per l’usuari  Home: Canal principal del Site on es declaren sub canals i els usuaris associen instancies de contingut.  Unassigned Content: Canal encarregat d’emmagatzemar els continguts que no tenen cabuda als altres canals Figura 17 Diagram d'estructura del portal
  • 32. Portal Web ICIP Bermúdez Merino, Gabriel - 28 - El disseny del portal d’ICIP no preveia un disseny estructurals dels continguts relacionals, per tant només va ser necessari realitzar el disseny de l’estructura del portal a partir del canal Home. Canal Nivell 1 Canal Nivell 2 Canal Nivell 3 Home L'Institut Presentació Creació Funcions i objectius Estructura i Organització Persones Convocatòries, beques i feina Perfil de Contractant Treballa amb nosaltres Sala de Premsa Actualitat Dossiers Contacte Documentació Institucional Enllaços d'interés Agenda Cercador d'activitats Llistat d'activitats Eixos d’actuació i programes de recerca Programes de recerca Seguiment i anàlisi de conflictes armats i de processos de pau Moviment per la pau Polítiques de seguretat i defensa Construcció de pau Evolució de la peace research i dels peace studies Formació
  • 33. Portal Web ICIP Bermúdez Merino, Gabriel - 29 - Construcció de pau Centre de documentació Cerca alcatàleg Arxiu multimedia Revistes Bases de dades Serveis Publicacions Revistes Llibres Working papers Documents i informes ICIP e-Bulletí Col·laboradors Mapa Web Noticies Escola de Cultura per la PAU Administracio EnllacosCapcalera Banners_Menu_Lateral EnllacosPeuPagina 4.1.2. Contingut Estructura jeràrquica on l'usuari emmagatzema els continguts del portal, des de els elements d'accessibilitat fins als continguts d'informació a mostrar. Figura 18 Diagrama d'estructura de la carpeta de continguts
  • 34. Portal Web ICIP Bermúdez Merino, Gabriel - 30 - L'estructura de continguts del portal d'ICIP tindria que complir uns estàndards mínims, aquests tractaven només sobre l'estructura del primer nivell, que deuria tindre els projectes:  Administració: Projecte per emmagatzemar tots els elements visuals del portal, així com aquells elements comuns per a totes les pàgines.  Contingut: Projecte per emmagatzemar tots els elements d'informació del portal. A continuació podem observar l'estructura de dit projecte, on a més dels diferents projectes per nivell, podem veure aquells elements obligatoris que ha de tindre el portal. Podem comprovar que el projecte de Continguts no disposa de més projectes a partir del nivell 2, això és degut a que l'usuari pot crear projectes dins l'estructura per facilitar la seva comprensió. Tampoc es llisten elements d'informació, ja que aquests s'ompliran posteriorment durant la migració des del HTML estàtic. Projecte Nivell 1 Projecte Nivell 2 Projecte Nivell 3 Projecte Nivell 4 Contingut Administracio Formes de Presentacio fp_icip_destacats_xarxes_socials Enllacos Capcalera enllaç_contacte enllaç_mapa_web Enllacos Peu enllaç_avis_legal enllaç_accessibilitat enllaç_sobre_el_web html_copyright_generalitat Enllacos Xarxes Socials banner_twitter banner_facebook banner_youtube banner_slideshare Enllacos enllac_twitter enllac_facebook enllac_youtube enllac_slideshare Imatges imatge_twitter imatge_facebook
  • 35. Portal Web ICIP Bermúdez Merino, Gabriel - 31 - imatge_youtube imatge_slideshare Arxius Home enllac_mes_agenda enllac_mes_publicacions enllac_mes_centre_docu enllac_mes_programes_recerca enllac_mes_arxiu_multimedia enllac_mes_noticies Imatges imatge_impacte_grafic_esquerra imatge_impacte_grafic_dreta Arxius Banners banner_revista banner_butlleti banner_bloc banner_escola Enllacos enllac_banner_revista enllac_banner_butlleti enllac_banner_bloc enllac_banner_escola Imatges imatge_banner_revista imatge_banner_butlleti imatge_banner_bloc imatge_banner_escola Publicacions enllac_ultima_revista enllac_ultim_butlleti enllac_canal_revistes Continguts L'Institut Estructura i organitzacio Agenda Eixos d'actuacio i programes de recerca Centre de documentacio Publicacions Col·laboradors Noticies Escola de Cultura per la PAU
  • 36. Portal Web ICIP Bermúdez Merino, Gabriel - 32 - 4.1.3. Contingut relacional Estructura jeràrquica on l'usuari emmagatzema el contingut relacional del portal. Un contingut relacional és aquell encarregat de relacionar els elements Canal definits a VCM amb els element Navegació definits a VAP, també coneguts com Presentation Templates o Plantilla de Presentació. A continuació es mostra la relació entre les plantilles i els elements, ja que l'estructura de carpetes no va més enllà que la que es veu a la imatge sobre aquestes línies. Plantilla de presentació Element de navegació PT_ICIP_Detall_Article_Destacats ICIP_EN_TTPP PT_ICIP_Generica_Destacats ICIP_EN_TTPP PT_ICIP_Generica ICIP_EN_PPP PT_ICIP_Detall_Article ICIP_EN_T PT_ICIP_Llistats ICIP_EN_LLISTATS PT_ICIP_Butlleti ICIP_EN_BUTLLETI PT_ICIP_RSS ICIP_EN_RSS PT_ICIP_2_Columnes ICIP_EN_2_COLUMNES PT_ICIP_Home ICIP_EN_2_COLUMNES PT_ICIP_Distribuidora_1col_D ICIP_EN_TTPP PT_ICIP_Distribuidora_2col_D ICIP_EN_TTPP Figura 19 Diagrama d'estructura de projectes de contingut relacional
  • 37. Portal Web ICIP Bermúdez Merino, Gabriel - 33 - 4.2. Estructura de navegació El gestor de portals de Vignette proporciona un sistema basat en una estructura jeràrquica, la qual és basa en elements de navegació els quals contenen portlets per a establir la configuració de la pàgina i/o mostrar elements d'informació. En aquest gestor, a més de l'estructura de navegació és defineixen els elements visuals que composaran el portal, passant per l'estructura de pàgines i els portlets que es mostren en elles. 4.2.1. Gestió del portal La definició de la informació del portal ve definida per els estàndards de disseny de la Oficina Tècnica, els quals a més de la informació necessària sobre el portal s'han de definir els estils visuals d'aquest. INFORMACIÓ Nom del Site icip Descripció Portal de l'Institut Català Internacional per la Pau DNS del Site icip Categories de pàgina icip Grup d'usuaris ICIP Configuració Visual Tema: Usuari registrat FW_Tema Grid: Usuari registrat FW_Grid_B
  • 38. Portal Web ICIP Bermúdez Merino, Gabriel - 34 - Tema: Usuari registrat FW_Tema Grid: Usuari registrat FW_Grid_B 4.2.2. Elements de navegació Seguint l'arquitectura de navegació definida durant la fase d'arquitectura, es va dissenyar l'estructura d'elements que compondrien el portal. Els elements poden tindre una configuració visual a part de la pròpia del portal, tal i com veurem a la següent taula. Nom Tipus Tema Grid Pàgina a enllaçar Element navegació 1 ICIP_EN_PPP Page FW_Tema GRID B ICIP_PA_PPP Element navegació 2 ICIP_EN_T Page FW_Tema GRID B ICIP_PA_T Element navegació 3 ICIP_EN_TTPP Page FW_Tema GRID B2 ICIP_PA_TTPP Element navegació 4 ICIP_EN_LLIS TATS Page FW_Tema GRID B ICIP_PA_LLISTAT S Element navegació 5 ICIP_EN_BUTL LETI Page FW_Tema Grid Butlletí Gencat FW_Pagina_Grid_ Butlleti_Gencat Element navegació 6 ICIP_EN_RSS Page FW_Tema GRID RSS ICIP_PA_RSS Element navegació 7 ICIP_EN_2_CO LUMNES Page FW_Tema GRID B ICIP_PA_2_COLU MNES 4.2.3. Pàgines de visualització Tot element de navegació té associada una pàgina, la qual conté els portlets per mostrar la informació associada a l'element de navegació. A continuació podem observar la relació de pàgines i portlets, així com la distribució d'aquests.
  • 39. Portal Web ICIP Bermúdez Merino, Gabriel - 35 - Nom Estructura per Layouts Distribució de portlets Pàgina 1 ICIP_PA_PPP Panel 1.1 ICIP_PI_P1 ICIP_PI_P2 ICIP_PI_P3 Pàgina 2 ICIP_PA_T Panel 1.1 ICIP_PI_T Pàgina 3 ICIP_PA_TTPP Panel 1.1 ICIP_PI_TTPP_T1 ICIP_PI_TTPP_T2 ICIP_PI_TTPP_P1 ICIP_PI_TTPP_P2 Pàgina 4 ICIP_PA_LLISTATS Panel 1.1 ICIP_PI_LLISTATS_P1 ICIP_PI_LLISTATS_P2 Pàgina 5 ICIP_PA_RSS Pàgina 6 ICIP_PA_2_COLUM NES Panel 1.1 (100%) ICIP_PI_Home_sup_1 ICIP_PI_Home_sup_2 Panel 2.1 (50%) ICIP_PI_Home_esq_1 ICIP_PI_Home_esq_2 ICIP_PI_Home_esq_3 ICIP_PI_Home_esq_4 ICIP_PI_Home_esq_5 ICIP_PI_Home_esq_6 ICIP_PI_Home_esq_7 ICIP_PI_Home_esq_8 ICIP_PI_Home_esq_9 ICIP_PI_Home_esq_10 ICIP_PI_Home_esq_11 ICIP_PI_Home_esq_12 ICIP_PI_Home_esq_13 Panel 2.2 (50%) ICIP_PI_Home_dreta_1 ICIP_PI_Home_dreta_2 ICIP_PI_Home_dreta_3 ICIP_PI_Home_dreta_4 ICIP_PI_Home_dreta_5
  • 40. Portal Web ICIP Bermúdez Merino, Gabriel - 36 - ICIP_PI_Home_dreta_6 ICIP_PI_Home_dreta_7 ICIP_PI_Home_dreta_8 Panel 3.1 (100%) ICIP_PI_Home_Noticies_1 ICIP_PI_Home_Noticies_2 ICIP_PI_Home_Noticies_3 4.2.4. Portlets Un portlet es un contenidor de serveis, el qual en el nostre cas, mostrarà la informació assignada a aquell element de navegació o integrarà serveis en la pàgina. En la taula a continuació es mostra la relació del portlet, així com el seu tipus. Nom Tipus de portlet Tpus d'informació a mostrar ICIP_PI_T Template Components d'informació o configuració ICIP_PI_P1 Page Components d'informació o configuració ICIP_PI_P2 Page Components d'informació o configuració ICIP_PI_P3 Page Components d'informació o configuració ICIP_PI_TPP_T1 Template Components d'informació o configuració ICIP_PI_TPP_P1 Page Components d'informació o configuració ICIP_PI_TPP_P2 Page Components d'informació o configuració ICIP_PI_LLISTATS_P1 Page Components d'informació o configuració ICIP_PI_LLISTATS_P2 Page Components d'informació o configuració ICIP_PI_Home_sup_1 Template Components d'informació o configuració ICIP_PI_Home_sup_2 Template Components d'informació o configuració ICIP_PI_Home_esq_1 Template Components d'informació o configuració
  • 41. Portal Web ICIP Bermúdez Merino, Gabriel - 37 - ICIP_PI_Home_esq_2 Template Components d'informació o configuració ICIP_PI_Home_esq_3 Template Components d'informació o configuració ICIP_PI_Home_esq_4 Template Components d'informació o configuració ICIP_PI_Home_esq_5 Template Components d'informació o configuració ICIP_PI_Home_esq_6 Template Components d'informació o configuració ICIP_PI_Home_esq_7 Template Components d'informació o configuració ICIP_PI_Home_esq_8 Template Components d'informació o configuració ICIP_PI_Home_esq_9 Template Components d'informació o configuració ICIP_PI_Home_esq_10 Template Components d'informació o configuració ICIP_PI_Home_esq_11 Template Components d'informació o configuració ICIP_PI_Home_esq_12 Template Components d'informació o configuració ICIP_PI_Home_esq_13 Template Components d'informació o configuració ICIP_PI_Home_dreta_1 Template Components d'informació o configuració ICIP_PI_Home_dreta_2 Template Components d'informació o configuració ICIP_PI_Home_dreta_3 Template Components d'informació o configuració ICIP_PI_Home_dreta_4 Template Components d'informació o configuració ICIP_PI_Home_dreta_5 Template Components d'informació o configuració ICIP_PI_Home_dreta_6 Template Components d'informació o configuració ICIP_PI_Home_dreta_7 Template Components d'informació o
  • 42. Portal Web ICIP Bermúdez Merino, Gabriel - 38 - configuració ICIP_PI_Home_dreta_8 Template Components d'informació o configuració ICIP_PI_Home_Noticies_1 Template Components d'informació o configuració ICIP_PI_Home_Noticies_2 Template Components d'informació o configuració ICIP_PI_Home_Noticies_3 Template Components d'informació o configuració 4.3. Integració amb RSS MeltWater Es vol proporcionar un sistema d'alertes RSS connectat amb el servei de noticies MeltWater, degut a que aquesta aplicació és externa a l'oferta de components de l'Oficina Tècnica de Vignette, llavors va ser necessari establir una reunió amb els responsables de l'aplicació per tal d'establir el millor mètode d'integració. D'aquesta reunió es van treure en clar els següents punts:  Obtenció de les dades: El servei de noticies MeltWater és un servei on-line que disposa de connexió directa per a clients segons unes directrius especifiques, la qual retorna la informació a mostrar per el contenidor. El contenidor a configurar ja es va tindre en compte en el disseny de la navegació, el qual es troba definit a la pàgina ICIP_PA_RSS, element que s'haurà d'afegir al disseny de navegació amb una nova pàgina i un portlet de tipus template.  Representació de les dades: El servei de noticies MeltWater retorna la informació a mostrar, en format XML el qual s'ha de tractar amb un fitxer XSL per visualitzar la informació en el format dessitjat. Figura 20 Diagrama de connexió: Vignette - MeltWater
  • 43. Portal Web ICIP Bermúdez Merino, Gabriel - 39 - Figura 22 Entorn de treball Vignette 5. Implementació En el present punt es donen a conèixer les diferents tasques de desenvolupament i configuració que es realitzen al projecte com a Analista Programador. Tasques que dividirem segons el tipus de treball a realitzar:  Configuració dels entorns  Desenvolupament d’elements de visualització  Migració de continguts  Proves  Formació 5.1. Configuració dels entorns Al gestor de continguts Vignette és precís configurar l’estructura del portal abans de començar a desenvolupar els elements de visualització, dita organització s’ha dissenyat en el punt anterior, per tant tan sols és necessari replicar aquesta configuració als dos entorns, tant al gestor de continguts com el de portals. 5.1.1.Gestor de continguts Al gestor de continguts de Vignette 7 (VCM) es replicarà l’estructura del disseny, és a dir, es crea l’estructura del portal amb la divisió dels canals necessaris segons l’arquitectura definida per l’ICIP, així com l’estructura de carpetes per emmagatzemar els continguts. Figura 21 Gràfic de flux de creació d'un portal
  • 44. Portal Web ICIP Bermúdez Merino, Gabriel - 40 - Una vegada es troba definida l’estructura és necessari omplir la informació rellevant de cada canal, informació tal com:  CSS  JavaScripts  Imatges del Banner  ... Dita informació va ésser proporcionada per l’equip del ICIP en el moment de l’entrega de les maquetes. Com a punt final d’aquest apartat, s’introdueixen uns continguts de prova amb l’objectiu de comprovar que la configuració era correcta. 5.1.2.Gestor de portals Al gestor de portals de Vignette 7 (VAP) es replicarà l’estructura e informació sobre el portal definida anteriorment al disseny. Aquesta replicació és més complexa que a l’entorn de gestió de continguts, ja que a més de la pròpia estructura del portal és necessari:  Associació de la temàtica i estil visual al portal, així com dels components predefinits per l’Oficina Tècnica que ha de tindre qualsevol portal.  Creació de pàgines: S’han de crear els elements pàgina definits al disseny, els quals contindran els portlets que mostraran la informació.  Creació dels portlets: Cada pàgina es divideix segons l’estructura definida al disseny i s’assignaran a dites divisions els portlets necessaris per mostrar la informació pertinent.  Configuració dels portlets: Una vegada s’han assignat els portlets a les pàgines, s’accedeix a cadascuna d’elles per realitzar la configuració d’aquests contenidors segons s’ha definit al disseny, a més d’especificar:  Com mostraran la informació: llistat, detall, etc. Figura 23 Exemple de l'estructura del portal
  • 45. Portal Web ICIP Bermúdez Merino, Gabriel - 41 -  D’on mostraran la informació: quin canal, contingut, etc.  Accés a aplicacions externes: MeltWater, etc.  Amb quin disseny de pàgina es mostrarà la informació Una vegada realitzada la creació de l’estructura i la configuració dels contenidors d’informació, tan sols manca la creació dels elements de connexió entre els dos entorns. 5.1.2.1. Contenidors d’informació A l’hora de configurar un contenidor d’informació (portlet) s’ha de determinar el component de presentació amb el qual es vol per presentar el contingut. Típicament, haurem d’escollir entre seleccionar els continguts de manera manual o automàtica. A continuació és llisten els components principals a utilitzar al portal:  Llista automàtica de continguts: Aquest component permet a l’usuari generar una llista de continguts de forma automàtica, únicament associant el contingut al canal. Els continguts a llistar poden ser de qualsevol tipus. A la vegada aquesta llista conté una sèrie de valors en idiomes diferents.  Llista manual de continguts: Aquest component permet a l’usuari generar una llista de continguts de forma manual i ordenada. Els continguts a llistar poden ser de qualsevol tipus. A la vegada aquesta llista conté una sèrie de valors en idiomes diferents. Aquest component també està preparat per utilitzar paginació.  Llista automàtica de canals: Aquest component de presentació retorna una llista de canals que hi ha a partir d’un canal donat fins a un nivell de profunditat especificat per paràmetre, i seran aquests els canals que es mostrin en una determinada pàgina. Els canals es poden trobar en qualsevol punt de la jerarquia de canals establerta en el VCM.  Llista manual de canals: Aquest component de permet a l’usuari generar una llista ordenada de canals. Els canals es poden trobar en qualsevol punt de la jerarquia de canals establerta en el VCM Figura 24 Flux de configuració de contenidors d'informació
  • 46. Portal Web ICIP Bermúdez Merino, Gabriel - 42 -  Detall de contingut: Aquest component de presentació retorna un arxiu en format xml amb el detall d’un contingut que s’ha obtingut per paràmetre. A la vegada, el Detall de Contingut associa alguns camps propis dependents del idioma, afegint les característiques principals del contingut associat.  Fil d’Ariadna: Aquest component permet crear un fil d’Ariadna. Aquests contenidors d’informació es defineixen individualment per cada pàgina del portal, aixó fa que la personalització del portal sigui d’alt nivell, cosa que facilita la personalització de la visualització dins dels canons establerts. 5.1.3.Elements de connexió Per realitzar la connexió d’entorns al gestor Vignette 7 és necessari crear un element específic que realitza aquesta funció, les Presentation Templates (Plantilles de Presentació). Al projecte es necessari crear un element d’aquest tipus per cada pàgina configurada al gestor de portals i assignar cadascuna als diferents canals dels quals es mostraria la informació, tal i com s’especifica al disseny. 5.2. Desenvolupament d’elements de visualització La visualització del portal disposa d’elements propis que disten una mica del disseny estàndard de portal que proporciona l’Oficina Tècnica de Vignette, per aquesta raó es necessari implementar elements de visualització específics per al portal, a més dels ja necessaris per a mostrar la informació de MeltWater. Al gestor de portals de Vignette és necessari implementar un fitxer en format XSLT, el qual s’assigna a un portlet que transforma la informació rebuda en format HTML compatible amb el navegador d’usuari. Figura 25 Descripció de l'estructura de pàgina del portal
  • 47. Portal Web ICIP Bermúdez Merino, Gabriel - 43 - Les XSLTs a desenvolupar són referents a petits canvis en la visualització, per tant es prendran com a base les oferides per l’Oficina Tècnica de Vignette, sobre les quals es faran retocs i millores per adaptar la visualització a la de les maquetes proporcionades. Cas especial és la visualització de la informació proporcionada per el portlet de MeltWater, ja que no s’ha realitzat mai aquesta integració a l’entorn de l’Oficina Tècnica, motiu pel qual es tindrà que implementar una XSLT pròpia segons les normes d’accessibilitat definides i, posteriorment, passar la validació pertinent per l’equip encarregat d’aquestes tasques. Una vegada desenvolupats i assignats tots els elements de visualització, es comprovarà que l’estructura del portal i la visualització d’aquesta és correcta mitjançant els continguts de prova creats en l’apartat anterior. 5.3. Migració de continguts Durant aquesta fase de la implementació, el treball a realitzar consisteix en transferir la informació de la pàgina estàtica en HTML al gestor de continguts de Vignette, aquesta tasca es pot dividir en 2 parts:  Creació dels continguts en format Vignette 7  Assignació dels continguts al canal corresponent Figura 26 Flux de creació de informació En un primer moment es va considerar l’opció de realitzar la migració de continguts amb l’eina facilitada per Vignette VBIS, la qual automatitza el procés de migració mitjançant un fitxer Excel que conté tota la informació a introduir dins del portal via instàncies de contingut. Aquesta opció es va descartar, ja que l’única font d’informació per a realitzar la migració era la web estàtica i la quantitat de continguts no era alta. Una vegada descartada aquesta opció, es va optar per realitzar la migració de manera manual.
  • 48. Portal Web ICIP Bermúdez Merino, Gabriel - 44 - La creació dels continguts en format Vignette 7 consisteix en transferir aquella informació rellevant a les estructures definides al disseny. Aquesta tasca és completament mecànica i manual, la qual es tracta d’anar creant els continguts amb la informació corresponent i guardant-los a la carpeta d’emmagatzemament corresponent. L’assignació dels continguts al canal corresponent consisteix en associar els continguts creats en el punt anterior als canals del portal que mostrarien la informació de dits continguts, seguint l’estructura definida al disseny. Per últim s’esborraran els continguts de prova i es comprovarà que la visualització del portal és totalment correcta i la informació es mostra correctament. 5.4. Proves Una vegada ja es disposa del portal totalment configurat i amb la informació introduïda, es realitzaran diferents proves per comprovar la integritat del portal, així com altres aspectes, els quals es donen a conèixer al punt específic de la memòria destinat a aquesta part del projecte. 5.5. Formació Finalitzat el portal i amb les diferents proves passades amb solvència, es prepararan unes formacions per a tots els integrants de l’equip de l’ICIP, ja que no han treballat mai amb el gestor de continguts de Vignette 7. Figura 27 Taula de camp de proves i eines relacionades
  • 49. Portal Web ICIP Bermúdez Merino, Gabriel - 45 - Dites formacions es donen a conèixer al punt específic de la memòria destinat a aquesta part del projecte. Figura 28 Slide de la presentació per a formacions
  • 50. Portal Web ICIP Bermúdez Merino, Gabriel - 46 - 6. Proves En aquesta secció s'enumeren les diferents proves que s'han de realitzar sobre el portal per tal de validar la seva funcionalitat e integritat, així com les eines destinades a aquestes proves. 6.1. Banc de proves Per a validar la correcta funcionalitat e integritat del portal es realitzaran un seguit de proves, aquestes es poden agrupar en els següents grups:  Proves d’integració  Proves de càrrega de dades  Proves d’acceptació final de l’aplicació per part de l’usuari  Proves d’accessibilitat La prova d’integració es realitzarà a l’entorn de consolidació on es veurà si tot encaixa perfectament, la interacció amb tots els serveis és correcte, les dades s’organitzen i es mostren de la forma desitjada, els diferents rols d’usuaris poden fer les accions que realment han de fer, entre d’altres. Aquí tindrem migrats uns continguts de prova que formen part del denominat “pilot de la migració”. La prova de càrrega de dades es realitzarà a l’entorn de pre producció. Es poden generar continguts massivament amb el Webservice Genèric mantingut per l’Oficina Tècnica de Vignette o també amb VBIS. Així mateix simuladors com ara el JMeter poden emular tants usuaris en tant instant de temps per accedir a alguna informació o servei del portal específic. La prova final serà a l’entorn productiu amb l’usuari final i ja hi ha visibilitat des de “l’exterior”. Per fer les proves finals s’haurà d’haver realitzat la importació total de tota la informació i dades a l’Oficina Tècnica de Vignette a l’entorn de producció de forma correcta. La prova d’accessibilitat es farà sobre l’entorn productiu mitjançant eines de validació d’accessibilitat, en concret es pretén complir un nivell AA pel portal 6.2. Eines de proves Assegurem estandardització XHTML 1.0 Transitional segons el consorci W3C de totes les pàgines web generades. Això s’aconsegueix amb el següent validador: http://validator.w3.org/ També es validen CSS, JS i RSS. S’assegura que es compleixen les normes d’accessibilitat web TAW nivell A i doble A. http://www.tawdis.net/taw3/cms/es
  • 51. Portal Web ICIP Bermúdez Merino, Gabriel - 47 - Hi ha diferents eines per fer proves amb diferents navegadors del Web.  Lunascape: té 3 motors de renderització (IE, MF i Google Chrome)  Plugins de Firefox per provar amb totes les versions de IE.  Opera té un emulador per navegació en dispositius mòbils.  Saphari. Tenim diferents eines per provar diferents resolucions de pantalla.  IE Developer Toolbar  Barra de desenvolupament del Mozilla Firefox. A nivell de codificació Java, si n’hem de realitzar, hi ha certs plugins per assegurar que es segueix el estàndard definit per SUN MicroSystems (plugin de CheckStyles). També s’empra el plugin PMD que valida el codi Java (http://pmd.sourceforge.net/) i FindBugs (http://findbugs.sourceforge.net). Figura 29 Captura d'inici de l'execució de les proves Figura 30 Resultats d'una sèrie de proves sobre el portal
  • 52. Portal Web ICIP Bermúdez Merino, Gabriel - 48 - 6.3. Resultats esperats Per a que un portal pugui sortir a viu s’han de complir les següents exigències de l’Oficina Tècnica de Vignette:  Portal maquetat segons l’estructura genèrica  Portal amb codificació UTF-8  Certificació AA/AAA de tota la web  RSS amb format atom  Integració correcta amb tots els elements externs  Càrrega de com a màxim 3 segons per pàgina la primera vegada  Mantindre el temps de càrrega amb més de 50 usuaris connectats alhora  Mantindre el posicionament SEO amb tags HTML correctament declarats
  • 53. Portal Web ICIP Bermúdez Merino, Gabriel - 49 - 7. Formació Un dels aspectes fonamentals és assegurar que tot el coneixement generat en el projecte sigui transferit al personal del ICIP involucrat de la forma millor possible. Amb aquesta idea es realitzaran sessions formatives durant la fase d’implementació. Les tasques pertinents seran les següents:  Redacció del pla de formació  Crear el material corresponent  Identificar clarament els requisits, recursos i usuaris  Impartir la formació. A mida que es vagin migrant continguts al portal i traspassant-los a l’entorn corresponent es començaran els diferents tipus de formació als perfils de redactors i WebMasters del nou Web.  A la següent transparència trobarem els diferents tipus de formacions previstes, en quina fase del projecte es faran i una duració en jornades estimativa de cadascuna d’elles.  Per totes les formacions caldrà fer una bona definició, desenvolupament, planificació i impartició. Les diferents formacions previstes al final de la implantació del projecte a l’entorn pre productiu i productiu són les següents: Un cop realitzades les sessions formatives també s’inclou un suport funcional i tècnic amb l’objectiu de resoldre els possibles dubtes que apareguin durant l’explotació dels sistemes. Aquest suport durarà des de la càrrega de continguts i s’estendrà posteriorment. Per tal de la realització de la formació, per cadascun dels apartats de formació proposats es generen una sèrie de documents per cada sessió. CURS OBJECTIUS ASSISTENTS DURADA Portal a GECO - Que Significa Que significa tenir un portal a GECO, conceptes de OTGeco Responsables del Projecte per part del Departament d'Educació 1 jornada Introducció a GECO Sessió introductoria a GECO, explicació de que es el portal i de conceptes com: GECO, Continguts, DGAC, Gecopedia Adiministradors i Redactors de Continguts 2 jornades Administracío de Portal Gestió del portal: Usuaris, rols, continguts, permisos, canals. Estructures de Canal Administradors del portal 2 jornades Administració de Continguts Tipus de contingut, introducció de continguts, publicació, validació. Administradors del portal 2jornades Formació Redactors de Continguts Tipus de contingut, introducció de continguts, publicació, validació. Redactors de Continguts 2 jornada Figura 31 Taula de la programació de formacions
  • 54. Portal Web ICIP Bermúdez Merino, Gabriel - 50 - 7.1. Estructura de la formació En base a les diferents formacions impartides s'han detectat diferents necessitats segons l'usuari a rebre la formació:  Administradors  Formació avançada de continguts  Tipus de continguts a utilitzar  Administració de Continguts  Estructura del portal  Formularis  Butlletins  Continguts Multimèdia  Configuració de Plana Personal  Edició amb WebEditPro  Usabilitat  Més la formació Redactors  Redactors  Tipus de continguts  Associació de Continguts  Configuració de Plana Personal  Edició amb WebEditPro  Usabilitat  Imatges  Documents  Copies de contingut Aquesta divisió fa necessària la realització de dos formacions ben diferenciades, ja que els dos rols definits realitzen funcions que no tenen cap relació entre elles. A continuació es descriuen les diferencies i l’enfocament amb que s’han realitzat aquestes formacions. 7.1.1.Formació per administradors Les necessitats d’un administrador van des de la creació d’un canal i/o l’administració d’aquest, fins a la gestió d’elements interactius amb l’usuari o l’accessibilitat del portal en sí. Aquestes activitats requereixen un alt coneixement de la plataforma, per tant, s’acostuma a recomanar que els encarregats d’aquestes funcions siguin persones amb experiència en aquest entorn.
  • 55. Portal Web ICIP Bermúdez Merino, Gabriel - 51 - Figura 32 Relació de fitxers estàtics amb Definicions de Contingut La formació per administradors es va plantejar: 1. Presentació explicant les diferents funcions que pot realitzar al sistema, així com exemples gràfics d’aquestes. 2. Aportació de documentació escrita, la qual conté de manera més estesa la informació de la presentació. 3. Sessió pràctica on els usuaris apliquen els coneixements adquirits anteriorment. La presentació realitzada es basava sobretot en captures i vídeos del gestor, on els usuaris veien com es realitzaven les accions, ja sigui per refrescar la memòria com per aprendre nous coneixements. La documentació també es troba enfocada cap al impacte gràfic, ja que les explicacions es realitzen amb gràfics i petites descripcions. La sessió pràctica es lliure, però dirigida per el formador cap a un seguit d’exercicis que comporten realitzar accions sobre tots aquells elements amb els que interactuarà l’administrador. Com a afegit, la formació prepara al usuari amb una posició més alta en l’organigrama per a que una vegada finalitzat el període de suport, aquest pugui donar suport als usuaris de tipus redactor si tenen qualsevol problema o si es contracten a nous redactors encarregar-se de la seva formació. Per a que l’usuari pugui adquirir aquests coneixements, el pla d’acció es basa en que aquest acompanyi durant un seguit d’hores al WebMaster que proporciona l’empresa consultora, amb l’objectiu de que aprengui més profundament el funcionament del sistema, així com els errors coneguts que es solen donar, d’aquesta forma el feedback amb els altres usuaris serà més àgil i la qualitat del treball realitzat millorarà considerablement.
  • 56. Portal Web ICIP Bermúdez Merino, Gabriel - 52 - 7.1.2.Formació per redactors Les necessitats d’un administrador només van dirigides a presentar a l’usuari el seu nou entorn de treball i entendre els nous conceptes que aporta Vignette. Aquests conceptes són molt específics dels gestors de contingut, com poden ser:  Channel  Content Type Definition  Site  ... La part més important de la formació, a part d’aconseguir que els usuaris entenguin els nous conceptes, es tracta d’explicar com serà el seu nou flux de treball, es a dir, com han de crear les notícies (per exemple) i assignar-les a un canal del portal per a que l’usuari les pugui veure. Figura 33 Flux de creació d'una notícia fins que la veu l'usuari final La formació per redactors es va plantejar: 1. Presentació explicant les diferents funcions que pot realitzar al sistema, així com exemples gràfics d’aquestes. 2. Sessió pràctica on els usuaris apliquen els coneixements adquirits anteriorment. Com a l’anterior formació, la presentació era pràcticament en la seva totalitat gràfica, exceptuant algun text, amb l’objectiu de que l’usuari es familiaritzes visualment amb el gestor, per tant es una presentació “ràpida”.
  • 57. Portal Web ICIP Bermúdez Merino, Gabriel - 53 - La sessió pràctica serà més llarga que per l’usuari Administrador, ja que al no tindre coneixements previs sobre el gestor es feia necessari una formació més llarga, per que l’ immersió fos més profunda.
  • 58. Portal Web ICIP Bermúdez Merino, Gabriel - 54 - 8. Estudi econòmic 8.1. Conceptes Degut a que és un projecte tancat mitjançant una oferta, no s’esmenarà l’esforç econòmic del projecte, però si que es farà un desglossament de les hores de treball d’un Analista Programador per fer les diferents tasques. Hores Treball Analista Programador Disseny :: Portal 120 hores Disseny :: Integració MeltWater 40 hores Implementació :: Estructura 40 hores Implementació :: Elements Visualització 160 hores Implementació :: Migració de la informació 80 hores Proves 40 hores Formació 40 hores El treball d’un Analista Programador al projecte suposa un total de 520 hores, el que es tradueix a 65 jornades de treball. En el còmput global del projecte el desglossament d'hores seria: Hores Treball Anàlisi 120 hores
  • 59. Portal Web ICIP Bermúdez Merino, Gabriel - 55 - Disseny 160 hores Implementació 280 hores Proves 40 hores Formació 40 hores Suport Post Implantació 80 hores A l'apartat d'anàlisi, disseny, proves, etc. es troben incloses les hores utilitzades per realitzar la documentació de cada estat. 8.2. Hardware i Software Degut a que el projecte s'ha realitzat dins del marc d'una empresa consultora, no es poden oferir dades econòmiques, però s'esmenaran els components Hardware i Software que s'han necessitat per portar a terme el projecte. Hardware Portàtil El gran creixement que ha tingut el software lliure en els últims anys, a més de consolidar-se com una opció davant d’eleccions on històricament guanyava el software propietari, molts dels programes utilitzats al projecte són lliures, amb una dilatada carrera en el món del disseny i d’accessibilitat: Software Lliure Documentació FireShot Desenvolupament Eclipse
  • 60. Portal Web ICIP Bermúdez Merino, Gabriel - 56 - Encara que per motius obvis, també és necessari l’ús de software propietari: Software Propietari Documentació Paquet Microsoft Office Desenvolupament XML Spy Photoshop Proves Firebug Lunascape jMeter
  • 61. Portal Web ICIP Bermúdez Merino, Gabriel - 57 - 9. Conclusions Durant la meva carrera professional he pogut participar a projectes similars al que es tracta en aquesta memòria, però per necessitats del projecte, aquest cop vaig participar amb diferents rols de treball. Aquesta situació va fer que realitzes una gran millora professional, ja que vaig solidificar els meus coneixements sobre disseny i creació de portals sobre el gestor Vignette, així com vaig adquirir experiència per a futures reunions de preses de requisits, planificació de formacions i sobretot la redacció de documents tècnics d’anàlisi. Aquesta millora ha fet que ara sigui possible dirigir la meva carrera professional cap a un nou conjunt de projectes, on realitzi noves tasques de més alt nivell o realitzar un canvi de tecnologia per ampliar els meu radi d’impacte. El projecte ha servit per establir l'empresa en una situació favorable en quant al disseny e implementació de portals amb l'eina Vignette, d'aquesta manera s'han obert línies per establir futurs contractes amb el mateix client. Com ja he comentat anteriorment, personalment aquest projecte a focalitzat més la meva carrera cap al disseny de futurs portals amb Vignette o altres eines de gestió, però sempre en el marc de l'àrea de projectes e-business.
  • 62. Portal Web ICIP Bermúdez Merino, Gabriel - 58 - 10. Bibliografia  Vignette Corporation (2007). Vignette Content Administration Guide: Versión 7.3.1. Austin (USA): Publication Department of Vignette Corporation. V7-0731- 315  Vignette Corporation (2007). Vignette Content Extensibility Development Guide: Versión 7.3.1. Austin (USA): Publication Department of Vignette Corporation. V7-0731-312  VV.AA. (2010). Documentació del projecte ICIP. Barcelona (Espanya)  Michael Kay (2009). XSLT 2.0 and XPath 2.0 Programmer's Reference. 4a Edició. Indianapolis (USA): Wrox. 978-0470192740
  • 63. Portal Web ICIP Bermúdez Merino, Gabriel - 59 - A.Taula d'il·lustracions Figura 1 Migració del portal estàtic........................................................................................3 Figura 2 Disseny estructural de Vignette................................................................................5 Figura 3 Disseny de portals de Vignette .................................................................................5 Figura 4 Metodología de treball ............................................................................................6 Figura 6 Definició del Road Map............................................................................................7 Figura 5 Estimació de temps del projecte...............................................................................7 Figura 7 Organigrama del projecte.........................................................................................8 Figura 8 Descripció dels rols dels actors.................................................................................8 Figura 9 Diagrama de comunicacióentre els actors ................................................................9 Figura 10 Descripció de la piràmide de riscos .......................................................................10 Figura 11 Taula de riscos alts del projecte............................................................................10 Figura 12 Taula de riscos mitjans del projecte ......................................................................11 Figura 13 Àrbre de navegació..............................................................................................20 Figura 14 Model visual de la pàgina.....................................................................................21 Figura 15 Model visual de la pàgina amb elselements del portal...........................................22 Figura 16. Diagrama de migració de les dades......................................................................25 Figura 17 Diagram d'estructura del portal............................................................................27 Figura 18 Diagrama d'estructura de la carpeta de continguts................................................29 Figura 19 Diagrama d'estructura de projectes de contingut relacional ...................................32 Figura 20 Diagrama de connexió: Vignette - MeltWater........................................................38 Figura 21 Gràfic de flux de creació d'un portal......................................................................39 Figura 22 Entorn de treball Vignette....................................................................................39 Figura 23 Exemple de l'estructura del portal ........................................................................40 Figura 24 Flux de configuració de contenidors d'informació..................................................41 Figura 25 Descripció de l'estructura de pàgina del portal ......................................................42 Figura 26 Flux de creació de informació...............................................................................43 Figura 27 Taula de camp de proves i eines relacionades........................................................44 Figura 28 Slide de la presentació per a formacions ...............................................................45 Figura 29 Captura d'inici de l'execució de les proves.............................................................47 Figura 30 Resultats d'una sèrie de proves sobre el portal......................................................47 Figura 31 Taula de la programació de formacions.................................................................49 Figura 32 Relació de fitxers estàtics amb Definicions de Contingut........................................51 Figura 33 Flux de creació d'una notícia fins que la veu l'usuari final .......................................52
  • 64. Portal Web ICIP Bermúdez Merino, Gabriel - 60 - B. Glossari A continuació s’esmenen tots aquells termes que poden dur a terme a confusió, a més d’una breu descripció d’aquests.  CAPABILITY: Poders dels que disposa un usuari per a realitzar determinades accions  CHANNEL: Branca del Site encarregada d’emmagatzemar les associacions de diferents instancies de continguts amb la finalitat de publicar aquestes últimes als entorns de viu.  CONTENT TYPE DEFINITIONS: Definicions d’elements de VCM que l’usuari pot instanciar (AGENDES, NOTICIES, etc.)  GRUP: Unitat composta d'uns membres que es consideren vinculats entre ells per a la realització d'una acció concreta  HOME: Canal principal del Site on es declaren sub canals i els usuaris associen instancies de contingut.  ICIP: Sigles de Institut Català Internacional per la Pau.  OBJECT TYPE DEFINITIONS: Definicions d’elements principals de VCM que l’usuari pot instanciar (SITE, CHANNEL, etc.)  PROJECT: Element encarregat d’emmagatzemar totes les instancies de continguts creades pels usuaris  ROL: Model de comportament que hom espera d'una persona amb relació al seu estatus  SITE: Element principal de Vignette, que simbolitza un Portal Web amb tots els canals dependents i els elements imprescindibles per al seu funcionament  VAP: Sigles de Vignette Application Portal, entorn de gestió de portals de l’empresa Vignette.  VBIS: Eina proporcionada per Vignette que agilitza la migració de continguts, així com les proves d’estrès d’un portal.  VCM: Sigles de Vignette Content Management, entorn de gestió de continguts de l’empresa Vignette.  WORFLOW DEFINITIONS: Definicions d’elements de gestió de flux de treballs que l’usuari pot executar