PFC Antonio Bernal Baena

Alumno: Antonio Bernal Baena
Director: Iñaki Fernández de Viana y González

Diplomatura en Informática
Proyecto Fin de Carrera
Convocatoria Septiembre de 2009

2

Este proyecto de fin de carrera ha sido realizado para el Departamento de
Tecnologías de la Información, por Antonio Javier Bernal Baena. Está
sujeto a la licencia académica de la Titulación de Diplomado en
Informática de la Escuela Politécnica Superior de La Rábida (Huelva), y
confiere los derechos y obligaciones pertinentes.

© 2009 – Antonio Bernal Baena

3

A mi mujer, sin su apoyo nunca podría haber hecho realidad este reto.
A mi padre.

4

INDICE DE CONTENIDOS

1. INTRODUCCION 10

1.1. CONCEPTOS PREVIOS 10
1.2. EL PROYECTO 10

2. PLANIFICACION 12

2.1. HERRAMIENTAS 12
2.1.1. Sistemas para la gestión de contenidos 12
2.1.2. Percepción del usuario acerca del CMS 13
2.1.3. Tipos de gestores de contenido 13
2.1.4. Software libre para gestión de contenidos 14
2.1.5. Funcionamiento de los CMS 18
2.1.6. Propuestas y comparación 19
2.1.7. Drupal 21
2.2. METODOLOGIA DE DESARROLLO 24
2.2.1. Diseño Centrado en el Usuario 24
2.2.2. Fases del Proyecto 28
2.3. VIABILIDAD 32
2.3.1. Viabilidad legal 32
2.3.2. Viabilidad tecnológica 32
2.3.3. Viabilidad económica 33

3. ANALISIS DE REQUISITOS 35

3.1. ENTREVISTA CON EL CLIENTE 35
3.2. EVALUACIÓN DE OTROS SITIOS WEB 35
3.3. PERFIL DE LOS USUARIOS 39
3.4. ROLES 40
3.5. MISION DEL SITIO 41
3.6. OBJETIVOS DEL SITIO 41
3.6.1. Requisitos del sitio Web para el usuario final 41
3.6.2. Requisitos del sitio Web para los usuarios con acceso
autorizado 43

5

4. DISEÑO 44

4.1. INVENTARIO DE CONTENIDOS Y ETIQUETADO 44
4.2. DISEÑO DE LA INFORMACION 50
4.3. DISEÑO VISUAL 52
4.4. PROTOTIPADO 55
4.4.1. Prototipo 1: Página principal 57
4.4.2. Prototipo 2: Docencia. Estudios 58
4.4.3. Prototipo 3: Docencia. Item titulación 59
4.4.4. Prototipo 4: Docencia. Asignaturas 60
4.4.5. Prototipo 5: Docencia. Item asignaturas 61
4.4.6. Prototipo 6: Docencia. Tutorías 62
4.4.7. Prototipo 7: Docencia. Proyectos 63
4.4.8. Prototipo 8: Investigación. Grupos 64
4.4.9. Prototipo 9: Investigación. Publicaciones 65
4.4.10. Prototipo 10: Investigación. Seminarios 66
4.4.11. Prototipo 11: Personal. Profesores 67
4.4.12. Prototipo 12: Personal. Item profesor 68
4.4.13. Prototipo 13: Gestión 69
4.4.14. Prototipo 14: Media fidelidad. Página principal 70

5. IMPLEMENTACION 71

5.1. INSTALACION DE DRUPAL 71
5.1.1.Entornos de usuario y administración 71
5.1.2. Traducción de la interfaz 74
5.1.3. Configuración de la fecha y hora 75
5.1.4. Formato de entrada 76
5.1.5. Información del sitio 77
5.1.6. URL limpios 78
5.2. MODULOS 79
5.2.1. Localización e instalación de módulos 79
5.2.2. Instalación de módulos contribuidos 80
5.2.3. Definición de módulos 81
5.2.4. Activación de módulos 86
5.3. DESARROLLO 90
5.3.1. Componentes del sistema de gestión de contenidos 90
5.3.2. Menú de administración 91
5.3.3. Configuración de módulos contribuidos generales 94
5.3.4. Creación de menús 106
5.3.5. Creación de roles 109
5.3.6. Cuadro resumen de tipos de contenido creados 110
5.3.7. Cuadro resumen de categorías creadas 111
5.3.8. Cuadro resumen de vistas creadas 112

6

5.3.9. Casos de implementación del inventario de contenidos 115
5.3.9.1. Estudio del caso: Localización 115
5.3.9.1.1. Configuración de módulos 115
5.3.9.1.2. Creación de tipos de contenido 116
5.3.9.1.3. Creación de elementos de menú 120
5.3.9.1.4. Visibilidad de bloques 121
5.3.9.1.5. Prototipos de pantalla 122
5.3.9.2. Estudio del caso: Contacto 123
5.3.9.3. Estudio del caso: Enlaces 129
5.3.9.3.3. Creación de categorías 131
5.3.9.3.4. Creación de campos 135
5.3.9.3.5. Creación de vistas 137
5.3.9.4. Estudio del caso: Buscar 142
5.3.9.5. Estudio del caso: Destacados 144
5.3.9.6. Estudio del caso: Personal 155
5.3.9.7. Estudio del caso: Docencia. Estudios 193

7

5.3.9.8. Estudio del caso: Docencia. Asignaturas 217
5.3.9.9. Estudio del caso: PFC / Fin de máster 249
5.3.9.10. Estudio del caso: Tutorías 260
5.3.9.11. Estudio del caso: Investigación 266
5.3.9.12. Estudio del caso: Gestión y Calendario 288
5.3.9.13. Estudio del caso: Utilidades de los usuarios 313
5.3.9.14. Estudio del caso: Control de acceso 319
5.3.9.14.3. Asignación de permisos 324

8

5.3.10. Tema 325
5.3.10.1. Tema framebasico 327
5.3.10.2. Instalación del tema 329
5.3.10.3. Mostrar un menú de enlaces hacia la UHU 332
5.3.10.4. Mostrar una galería de imágenes aleatorias 334
5.4. DISTRIBUCION DEL SITIO 346

6. EVALUACION 350

6.1. GUIA DE EVALUACION HEURISTICA PARA LA VALIDACION DE LA
USABILIDAD DEL SITIO 350
6.1.1. Checklist del sitio Web 352

7. CONCLUSIONES 354

7.1. MANTENIMIENTO 354
7.2. EXTENSIONES Y MEJORAS 355

8. BIBLIOGRAFIA 356

9. ANEXOS 357

9.1. MANUAL DE INSTALACION 357
9.1.1. Introducción 357
9.1.2. Requisitos del sistema 358
9.1.3. Instalación de Drupal 5 usando cPanel 359
9.1.4. Instalación de la distribución 365
9.1.5. Actualización de la versión de drupal 373
9.1.6. Actualización de la versión de las extensiones 376
9.1.7. Rendimiento de la instalación 379

9

9.2. MANUAL DEL USUARIO 380
9.2.1. Introducción 380
9.2.2. Usuario administrador 381
9.2.3. Definición de formularios 382
9.2.4. Permisos de los usuarios del sistema 383
9.2.5. Roles activos 385
9.2.6. Alta y edición de usuarios 386
9.2.7. Gestión de contenidos 390
9.2.7.1. Alta de administrador 390
9.2.7.1.1. Ficha de personal 390
9.2.7.1.2. Suscripciones 391
9.2.7.1.3. Otros contenidos del sistema 391
9.2.7.2. Edición de administrador 392
9.2.7.2.2. Otros contenidos del sistema 392
9.2.7.3. Alta de contenido por otros roles 393
9.2.7.4. Edición de contenidos por otros roles 394
9.2.7.4.2. Datos del usuario 394
9.2.7.4.3. Suscripciones 394
9.2.7.4.4. Procedimiento general 395
9.2.8. Formulario de ficha de personal 396
9.2.9. Formulario de titulación 397
9.2.10. Formulario de asignatura 398
9.2.11. Formulario de noticias 399
9.2.12. Formulario de proyecto FC/FM 400
9.2.13. Formulario de grupo de investigación 401
9.2.14. Formulario de seminario 402
9.2.15. Formulario de comisión permanente 403
9.2.16. Formulario de consejo de departamento 404
9.2.17. Formulario de publicaciones 405
9.2.18. Formulario de destacados 406
9.2.19. Formulario de Web links 407
9.2.20. Formulario de imagen portada 408
9.2.21. Personalización del departamento 409
9.2.21.1. Identificación del departamento 409
9.2.21.2. Formulario de página estática 410
9.2.21.3. Formulario de contacto 411
9.2.21.4. Modificar categorías 411

10

1. INTRODUCCION

1.1. CONCEPTOS PREVIOS

El proyecto de creación del nuevo portal Web del Departamento de
Tecnologías de la Información de la Universidad de Huelva parte de la
necesidad que tiene este organismo de actualizar su medio de
comunicación digital.

El proyecto pretende, como parte fundamental, establecer un sistema de
información con la comunidad educativa relacionada con el Departamento,
ofreciendo el conocimiento acerca de los diferentes contenidos académicos
a los diferentes tipos de usuarios que accedan.

Durante el desarrollo del proyecto el Departamento será entendido como
nuestro cliente, el cual, bien por decisión propia o a través de una
prospección comercial de nuestra empresa ha identificado la necesidad de
renovación de su portal Web.

Por tanto desde la fase de Planificación estamos ya en contacto con
nuestro cliente y debemos establecer los canales adecuados para facilitar
la comunicación y la colaboración.

1.2. EL PROYECTO

El proyecto consistirá en el diseño de una aplicación Web para la gestión y
organización de un departamento universitario personalizando la
herramienta Drupal.

Diseñaremos el sitio Web corporativo del Departamento de Tecnologías de
la Información de la Universidad de Huelva.

Vamos a desarrollar un sistema formado por dos ámbitos:

- Sitio Web para el usuario final
- Sistema de gestión de contenidos para el administrador y otros tipos
de usuario con acceso autorizado por el Departamento.

11

Finalmente se entregará una Distribución del sistema para que pueda ser
implantado en los Departamentos de la Universidad de Huelva que así lo
requieran. Por tanto el sistema deberá ser personalizable para responder a
las características académicas de otros departamentos de la Universidad.

Efectuaremos la implementación del producto sobre el sistema de gestión
de contenidos Drupal con el objetivo de revisar las posibilidades de
desarrollo que ofrece esta herramienta.

12

2. PLANIFICACION

2.1. HERRAMIENTAS

Para desarrollar una aplicación Web se nos plantea la dificultad de elegir
una herramienta de desarrollo del portal que nos permita disponer de un
soporte que agilice el desarrollo, que permita el crecimiento natural de la
Web, que sea extensible, flexible, robusto y seguro y que, además, cubra
las necesidades específicas que esta Web requiere permitiendo cumplir
con una metodología de diseño e implementación apropiadas.

Las características generales que esta Web deberá cumplir son:

 Creación de menús con enlaces internos y externos de forma
simplificada
 Gestión de usuarios organizados por roles o conjuntos de permisos
(administradores y otros miembros del portal).
 Buscador interno con sistema de búsqueda avanzada
 Formato de contenidos extensible, con la posibilidad de
incorporación de nuevos campos de tipo texto, fecha, categorías,
imágenes.
 Sistema de categorías basadas en taxonomías
 Editor de texto enriquecido WYSIWYG con filtro de etiquetas HTML
 Cambio de diseño basado en el sistema de plantillas del gestor

2.1.1. Sistemas para la gestión de contenidos

Distinguiremos entre dos vías para gestionar contenidos:

1. Publicarlos en un sistema alojado (ASP) gratuito o de pago, donde
residirá toda la tecnología, y sobre el que generaremos, almacenaremos y
estructuraremos nuestra información.
2. Creación de un sistema de publicación propio, en nuestros propios
servidores, usando gestores de contenidos comerciales o de software
libre.

En el primer caso somos usuarios de un servicio de publicación.
En el segundo aplicamos una solución tecnológica de gestión de
contenidos orientado a la difusión de información de todo tipo en Web con
código abierto.

13

2.1.2. Percepción del usuario acerca del CMS

Desde el punto de vista del usuario interno:
Sistema para gestionar, de forma uniforme, accesible, y cómoda, un sitio
Web dinámico, con actualizaciones periódicas, y sobre el que pueden
trabajar una o más personas, cada una de las cuales tiene una función
determinada.

Desde el punto de vista del usuario del Web
Sitio Web dinámico, con apariencia e interfaz uniforme, con un diseño
centrado en el usuario, y que permite llevar a cabo fácilmente las tareas
para las que ha sido diseñado.

2.1.3. Tipos de gestores de contenido

Generalmente encontramos:

• Galerías de imágenes y fotos
• Blogs
• Aula Virtual
• Foros

Están centrados en realizar una tarea.
Además sobre ellos se han desarrollado extensiones que permiten ampliar
sus funciones básicas. Podemos funcionar con varias aplicaciones
especializadas, o pensar en usar un gestor de contenidos de propósito
general.

Una de las tendencias de las tecnologías llamadas Web 2.0 es la
posibilidad de encajar piezas de un modo sencillo, piezas de contenidos
procedentes de diferentes plataformas.

En la Web nos encontramos muchos servicios de publicación y difusión de
contenidos online (ASP, Aplication Server Provider).
Se trata de webs que ofrecen la plataforma de publicación. Son sistemas
de puesta en marcha inmediata, y con un número reducido de opciones de
personalización, pero de gran potencia y gran capacidad de convocatoria.
Por ejemplo:

• Blogger, como ASP para publicar blogs.
• Flickr, como ASP para gestionar fotografías.
• Youtube, como ASP para compartir videos.
• Slideshare, como ASP para publicar presentaciones.

14

Nosotros usaremos una plataforma que podemos instalar para gestionar
nuestro proyecto individual, y por lo tanto construir con ellas algo
diferente, adaptado y potente. Por lo tanto nos exigirá:

• Gestión completa (Servidores, Seguridad, Actualización, etc.)
• Personalización visual.
• Posibilidad de desarrollos específicos, programados por nuestro
equipo.

2.1.4. Software libre para gestión de contenidos

Bitácoras, Blogs o Weblogs
Una bitácora o weblog es una página en la que una o varias personas
publican artículos. Normalmente usa un CMS sencillo, con una serie de
características comunes:

• Publicación y gestión de artículos con edición de código HTML
• Posibilidad de adjuntar imágenes a los artículos
• Organización de los contenidos con buscador y categorías
• Sistema para que los usuarios dejen comentarios y para recibir
referencias
• Sindicación

Algunos de los sistemas de publicación de bitácoras más populares son los
siguientes:

• Wordpress http://wordpress.org/
Muy potente debido a la gran cantidad de funcionalidades añadidas
(plugins), así como a los muchísimos temas (plantillas de presentación y
hojas de estilos) que desarrollan los propios usuarios.

• Textpattern http://textpattern.com/
También tiene plugins y temas, y, aunque aprender a utilizarlo es un poco
más complejo, usa un sistema muy potente de edición de las páginas, y
su propio lenguaje, Textile, para el formato de los artículos.

15

Portales
Un portal está formado por una o varias secciones donde se publican
noticias o se actualiza el contenido periódicamente. Son un tipo de CMS
mucho más heterogéneos que los weblogs, algunas de sus principales
características son:

• Gestión de las secciones con contenido dinámico
• Gestión de páginas estáticas
• Gestión de usuarios y permisos
• Organización de los contenidos con buscador y categorías
• También pueden proporcionar medios para que los usuarios
participen:
o Sistemas de comentarios de las noticias
o Foros

Algunos de los sistemas para construir portales más populares son los
siguientes:

• Joomla http://www.joomla.org/
Permite gestionar un sitio creando páginas estáticas, secciones dinámicas,
permitiendo adjuntar documentos y con varios niveles de usuarios con
distintos permisos. Joomla es la nueva identidad de Mambo,
recientemente liberada.

• Drupal http://drupal.org/
Más enfocado a crear comunidad y a propiciar la participación de usuarios,
además de organizar la estructura y contenido del sitio, ofrece foros y
sistema de comentarios con weblogs incorporados.

• Spip http://www.spip.net/
Especialmente recomendado para publicaciones tales como revistas o
diarios en línea, también ofrece la típica clasificación en secciones y
mucha flexibilidad en la creación de diferentes tipos de página y
presentación de la información.

• CMS Made Simple http://www.cmsmadesimple.org/
Publicación sencilla, por secciones.

• OpenCMS http://www.opencms.org/
Tiene un alto crecimiento en entornos corporativos (Se basa en Java y
J2EE).

16

Foros

• PHP BB http://www.phpbb.com/
El sistema más popular de gestión de foros. Cuenta con muchísimas
características (avatares, mensajería privada...).

• PUN BB http://www.punbb.org/
Sistema también muy completo que además respeta los estándares y
cuenta con múltiples plugins que le aportan nuevas funcionalidades, de
forma que se pone incluso a la altura de PHP BB.

• Simple Machines http://www.simplemachines.org/
Muchas funcionalidades y buen rendimiento

Wikis

Páginas que cualquier visitante puede editar, creando así una aplicación
colaborativa, generalmente para construir una base de conocimiento sobre
un tema en concreto.

• Media Wiki http://www.mediawiki.org/wiki/MediaWiki

• Tiki Wiki
http://info.tikiwiki.org/tiki-index.php

E-learning

Cursos por Internet. Sistemas para realizar exámenes, tutorías...

• Moodle http://moodle.org/

Galerías de fotos

• Zen Photo http://www.zenphoto.org/

• Gallery http://gallery.menalto.com/

• Coppermine http://coppermine-gallery.net/

E-Commerce

• OS Commerce http://www.oscommerce.com/

Drupal permite integrarse con Os Commerce, Gallery, hacer foros, hacer
blogs y gestionar contenidos al estilo Wiki.

17

ECM: Gestión de contenidos en el ámbito empresarial

La AIIM (asociación para ayudar a las organizaciones a gestionar su
información, http://www.aiim.org) ofreció en 2003 una sencilla definición
de la gestión de contenidos empresariales (ECM: Enterprise Content
Management):

“Las tecnologías utilizadas para capturar, gestionar, guardar, entregar y
conservar la información que sustentan los procesos de negocio”.

Uno de los elementos clave de este tipo de aplicaciones es la integración.
Con la integración de funciones de captura, gestión de documentos
entrantes, archivado electrónico, gestión del ciclo de vida de la
información, gestión documental, flujo de trabajo, gestión de proceso de
negocios y gestión del conocimiento, se aumenta el valor añadido del
conjunto para satisfacer las exigencias corporativas de productividad y
rentabilidad.

CMS-Watch, http://www.cmswatch.com/, edita unos informes que
analizan este mercado, en las siguientes categorías, entre otras:

• Web Content Management Trends
• Enterprise Portals Trends
• ECM Trends
• Web Analytics Trends
• Enterprise Search Trends.

Las principales plataformas ECMS analizadas son:

• Alfresco: Alfresco ECM
• Documentum (EMC): Documentum 5.3 (D5)
• Hyland Software, Inc.: OnBase
• IBM: FileNet P8 Platform
• Interwoven: ECM Solutions
• Microsoft: Microsoft Office SharePoint Server 2007
• Open Text: LiveLink ECM
• Oracle: Stellent Universal Content Management 7.5
• Vignette: V7 ECM Suite
• Xerox: DocuShare 5.0

18

La lista de plataformas opensource que se analizan en el ámbito de los
gestores de contenidos Web (WCMS) es:

• Alfresco: Alfresco WCM
• Drupal: Drupal
• eZ Systems: eZ publish (European Edition only)
• Joomla Project: Joomla!
• Magnolia: Magnolia CMS
• Midgard Project: Midgard (European Edition only)
• OpenCms: OpenCms
• Plone: Plone CMS
• TYPO3

En el ámbito de software comercial, comparan:

• Documentum (EMC): Documentum Web Content Management
• IBM: Workplace WCM
• Interwoven: TeamSite
• Oracle: Stellent Web Content Management
• RedDot (Open Text): RedDot CMS
• Vignette: V7 Content Management

2.1.5. Funcionamiento de los CMS

Un CMS separa y conecta los niveles de:

• Presentación visual: incluye todo lo que forma el estilo, estructura
y disposición de la página: archivos HTML, hojas de estilo, imágenes
decorativas...
• Contenido: incluye todo lo que los autores publican en la página
para darlo a conocer: textos, fotografías, vídeos...
• Estructura: Permite decidir los tipos de categorización para cada
tipo de contenido, graduar el acceso, crear zonas temáticas, las
relaciones entre contenido.
• Acceso: Control de quién y qué puede publicar, qué contenidos
pueden verse según tipos de usuarios.

Por "Separa" entendemos que permite una gestión independiente, y por
"Conecta" entendemos que permite ponerlos en relación.

Un CMS es un entorno dinámico en el que la información se almacena en
una base de datos, y se presenta a través del navegador en páginas
generadas en un lenguaje de programación (PHP, JSP, ASP, Perl...) que
ejecutan un programa en nuestro servidor.

19

Una de las bases de la potencia es el control separado del contenido
mediante plantillas para la visualización; con aplicaciones que:

• Utilizan bases de datos para permitir que la actualización de la Web
se realice a través de sencillos formularios que actualizan plantillas
estandarizadas.
• Reduce la complejidad del conocimiento técnico para aportar
contenidos.
• Ofrecen servicios complementarios muy diversos: Foros de
discusión, gestión de usuarios, etc.

Son bastante flexibles para adaptarse a las necesidades concretas de una
publicación digital compleja.

2.1.6. Propuestas y comparación

Drupal y WordPress

• En WordPress 2.x incorpora preinstalado un editor visual. En Drupal
hay que instalar y configurar extensiones para esa operación tan
sencilla.
• En WordPress tienes cientos de plantillas visuales para elegir y
empezar. Las plantillas de Drupal son menos y peores.
• La gestión de permisos y roles de Drupal es mucho más avanzada y
granular que la de WordPress.
• En WordPress tienes un tipo de contenido principal (el post) y dos
complementarios (páginas y enlaces), mientras Drupal desarrolla
toda una plataforma para definir contenidos estructurados.
• WordPress trabaja con plantillas sencillas con PHP y Drupal también.
• La traducción de Drupal es más minuciosa y profunda que lo que se
aprecia en WordPress, realizada y soportada por Drupal Hispano,
http://www.drupal.org.es/.
• Drupal posee cientos de extensiones que aportan multitud de
posibilidades para la implementación de un sitio Web para una
organización.

20

Drupal y Joomla

Joomla:

• Muy fácil de instalar y de utilizar con muchas extensiones y
módulos.
• La documentación es exhaustiva y concisa.
• La interfaz del administrador es intuitiva y potente.
• La administración tiene mucha usabilidad y el editor visual de
contenido es bueno.
• Parece que escala bien y proporciona muchas opciones de
personalización.
• Posee una comunidad amplia y activa.

Drupal:

• Lleva ya bastante tiempo en activo, es estable y tiene un vigoroso
desarrollo.
• Posee un buen código, dispone de un sistema granular de permisos
y se preocupa por la seguridad.
• La configuración es rapidísima.
• Tiene cientos de módulos que extienden su funcionalidad.
• Cuenta con una documentación excepcional y con una comunidad
muy activa y abierta.

Conclusión

Tanto WordPress como Joomla presentan una menor potencia frente a
Drupal en dos aspectos básicos para nuestro proyecto:

• Aplicación y gestión de los permisos de usuarios y grupos.
• Posibilidad de extender fácilmente los servicios del portal (módulos
contribuidos) para dar respuesta a los requerimientos de nuestro
cliente.

Para cerrar la evaluación de propuestas y tomar la decisión final de uso de
Drupal como herramienta de desarrollo frente a otras existentes en el
mercado también hemos tenido en cuenta la serie de evaluaciones y
recomendaciones realizadas por Weitzman, Lewis-Bowen, y Evanchik
(2006), ingenieros senior de software de IBM, quienes en busca de una
solución para un Sistema de Gestión de Contenidos, realizaron una
completa evaluación comparativa entre las diversas soluciones de CMS.
Los mencionados ingenieros escogieron Drupal.

Fuente: http://www.ibm.com/developerworks/ibm/library/i-osource1/

21

2.1.7. Drupal

El CMS elegido para el desarrollo ha sido el sistema opensource Drupal,
escrito en PHP y distribuido bajo licencia GPL (GNU General Public License)
que, además de cumplir con los objetivos y requisitos propuestos, es uno
de los gestores con más soporte por su comunidad de usuarios y por los
profesionales del medio.

Este CMS irá conectado a una base de datos donde se alojará el contenido
del sitio que mantendrá totalmente separado el diseño del mismo.

El sistema de gestión de base de datos usado será MySQL, sobre el
servidor de aplicaciones Web Apache.

Actualmente existen dos versiones estables de Drupal y una en desarrollo.
Las versiones estables son la v6.x y la 5.x (con la x se indica la última
liberación de las versiones 5 y 6 hasta el momento). Aunque la filosofía de
la comunidad de desarrollo es mantener al máximo la compatibilidad entre
versiones, existen diferencias entre ambas.

Cabría pensar que la elección de la versión 6 es la más apropiada, pero el
ritmo lento de adaptación de los módulos más populares a estas
diferencias y la lentitud en las traducciones a otros idiomas, provoca que
en la decisión deban considerarse otras opciones.

Primero, debemos valorar la importancia que tiene que la interfaz de
administración esté traducida totalmente a nuestro idioma, no sólo por
una cuestión de usabilidad sino de eficacia. Por otra parte, no podemos
permitirnos necesitar un módulo y que éste aún no tenga una versión 6.x
lista para instalar.

La versión elegida será la 5.19 (la última revisión hasta la fecha). Las
razones son obvias: es una versión estable, completa, a la que no se
añadirán cambios en el core que no sean actualizaciones de seguridad, es
decir, no cambiarán funcionalidades básicas, lo que nos hace pensar en un
mantenimiento más fácil. La versión 5.x es ya veterana, y tiene un amplio
soporte desde que se liberara a finales de 2006. Tiene versiones estables
y ampliamente contrastadas para todos sus módulos contribuidos
esenciales como puedan ser CCK y Views.

22

Introducción a Drupal

Dries Buytaert, un informático belga y autor original de Drupal, comenzó a
desarrollar un gestor de contenidos para páginas dinámicas en el año
2000. El sistema pretendía dar soporte a una comunidad weblog, la cual
Dries quiso llamar Dorp (“pueblo” en holandés). Al comprobar la
disponibilidad del dominio dorp.org, Dries tecleó mal e introdujo
“drop.org” en su lugar. Le gustó tanto el nombre que decidió registrar el
dominio drop.org y renombrar su CMS como Drupal. (“Drupal” es la
pronunciación en inglés de la palabra gota en holandés, “Druppel”). Nueve
años más tarde, Drupal ha crecido hasta convertirse en un gestor de
contenido maduro y flexible, con cientos de desarrolladores trabajando en
sus mejoras y extensiones.

Con Drupal podemos construir casi cualquier tipo de Web, definiendo tipos
de contenidos estructurados, permisos, sistema de registro de usuarios,
sistemas de categorización y aplicando una combinación personalizada de
módulos complementarios.

Los Contenidos son la pieza fundamental de Drupal. Tiene un enfoque
estructurado, que permite definir tipos de contenidos diferentes, sobre los
que se podrán aplicar diferentes permisos, flujos de publicación,
categorías y listados. La unidad de contenido es el “nodo”, que
inicialmente permite texto como en un blog, pero que se amplia mediante
dos vías fundamentales: Módulos contribuidos y Módulo CCK.
Los contenidos podrán trabajar con texto enriquecido, tener comentarios,
aceptar anexos, tener control de revisiones y generan salidas RSS.
Además pueden estructurarse formando “libros” (capítulos y
subcapítulos).

La organización de información se realiza fundamentalmente a través del
potente sistema de categorías. Se definen vocabularios con términos
controlados (con jerarquía o no) o etiquetado libre. Para cada contenido
se indicará qué vocabulario o vocabularios se le pueden aplicar, y si son
opcionales u obligatorios.
Las categorías permiten una navegación por diferentes tipos de contenidos
vinculados por su pertenencia a un mismo dominio temático.

Además, los contenidos pueden adoptar una estructura jerárquica
convencional a través del sistema de menús, y la página Web se
estructura en bloques que se sitúan en zonas según la plantilla o tema
usado (dos o tres columnas, cabecera, pie, etc.).

23

Ofrece una gestión de usuarios avanzada, en la que podremos generar
un sistema abierto de alta de usuarios, o cerrado o moderado. Los
usuarios se agrupan en roles, que permiten manejar los privilegios para
cada una de las funcionalidades y módulos.
Cada módulo de Drupal ofrece sus propias opciones de permisos, que se
aplican por roles.

En cuanto a la personalización de la presentación, se usan las plantillas o
Temas. Cada tema se compone de unas pocas plantillas que definen la
visualización específica de nodos, bloques y página general, aplicando
hojas de estilo CSS.

24

2.2. METODOLOGIA DE DESARROLLO

2.2.1. Diseño Centrado en el Usuario

Principios del Diseño Centrado en el Usuario

El Diseño Centrado en el Usuario de sistemas interactivos puede regirse
por muchos y muy diversos principios. A continuación, se presenta una
serie básica de dichos principios:

• Diseño para los usuarios y sus tareas.
• Consistencia.
• Diálogo simple y natural.
• Reducción del esfuerzo mental del usuario.
• Proporcionar realimentación adecuada.
• Proporcionar mecanismos de navegación adecuados.
• Dejar que el usuario dirija la navegación.
• Presentar información clara.
• El sistema debe ser amigable.
• Reducir el número de errores.

ISO 13407: Human-centred design processes for interactive
systems

El estándar ISO 13407 constituye un marco que sirve de guía para
conseguir el desarrollo de sistemas interactivos usables incorporando el
DCU durante el ciclo de vida del desarrollo.
El estándar describe las siguientes cuatro actividades que se necesitan
desde un principio:

a) Entender y especificar el contexto de uso.
b) Especificar los requisitos de los usuarios y organizativos.
c) Producción de soluciones de diseño.
d) Evaluar los diseños confrontándolos con los requisitos.

25

Y la naturaleza iterativa de estas actividades está ilustrada en la
siguiente figura:

El proceso implica iterar hasta satisfacer los objetivos marcados, para lo
que ISO 13407 describe los principios básicos sin estipular métodos
específicos. La secuencia de realización o seguimiento de las actividades y
el nivel de esfuerzo y detalle apropiado a cada proyecto varía dependiendo
del entorno de diseño y el estado del proceso del mismo.

26

Los elementos de la Experiencia de Usuario

Jesse James Garrett, en su libro “The elements of user experience” define
una guía a seguir para el diseño Web centrado en el usuario.

El esquema que se muestra a continuación es un resumen de los
principios expresados en su libro:

27

Existen una serie de métodos específicos desarrollados para llevar a cabo
las distintas fases de un diseño Web centrado en el usuario. En la Web
oficial de UsabilityNet, (un proyecto financiado por la Unión Europea para
proporcionar recursos y la creación de redes de profesionales de la
usabilidad, directores y proyectos de la UE) podemos encontrar una
utilidad que nos provee de una Tabla de Métodos a aplicar en cada una de
las fases que contempla, dependiendo de factores como tiempo
disponible, recursos, etc.

Fuente: http://www.usabilitynet.org/tools/methods.htm

28

2.2.2. Fases del Proyecto

El proyecto presenta tres condicionantes que debemos tener en cuenta
para la determinación de las Fases del mismo, así como del tiempo del
que podremos disponer para la ejecución de cada una:

• No tendremos acceso directo a los usuarios finales del sistema,
fundamentalmente a aquellos que son anónimos.
• Disponemos de un tiempo limitado para la entrega del Sitio Web:
30 días laborales / 240 horas.
• El proyecto se llevará a cabo por una sola persona que deberá de
dar solución a las tareas requeridas por cada fase del mismo.

Efectuamos una adaptación de las distintas disciplinas englobadas por la
metodología del Diseño Centrado en el Usuario en respuesta a los
condicionantes que tenemos.

29

El siguiente diagrama integra las etapas del proyecto:

30

Como indica el diagrama, las fases de “Análisis de requisitos” y de
“Diseño” son cíclicas e iterativas. Esto quiere decir que todo lo que se
diseñe debe ser contrastado con el cliente y comprobar que se ciñe a los
resultados del análisis de requisitos.

Las fases de “Implementación” y de “Evaluación” serán igualmente cíclicas
e iterativas hasta que el proceso quede completado con la fase de
“Documentación de la aplicación” en donde se realizará la documentación
entregable al cliente y el “Lanzamiento del Sitio”, es decir, la puesta en
explotación del sistema hacia la audiencia.

Asignación de tiempos

La siguiente tabla muestra la estimación de tiempo en base a días que
podemos asignar a cada fase del proyecto.

Fases Tiempo (días)
Planificación 2
Análisis de requisitos 3
Diseño 5
Implementación 15
Evaluación 2
Documentación de la aplicación 3
Total 30

Utilizaremos un diagrama de Gantt con el objetivo de mostrar el tiempo
de dedicación previsto para las diferentes fases del proyecto a lo largo del
tiempo total que se ha determinado consistente en 30 días laborales.

Mostraremos dos variedades del mismo diagrama para visualizar mejor las
etapas a desarrollar en base a los días y a una vista global del mes de
trabajo.

Estas fechas han sido previamente consensuadas con el cliente a fin de
cumplir con los plazos de colaboración necesaria para el avance del
proyecto, fundamentalmente en las etapas preliminares a la propia
implementación del sistema.

31

Diagrama de Gantt con vista mensual:

Diagrama de Gantt con vista diaria:

32

2.3. VIABILIDAD

2.3.1. Viabilidad legal

Drupal se distribuye bajo la licencia GNU General Public License (GPL), y
por lo tanto es software libre.

2.3.2. Viabilidad tecnológica

Los requerimientos mínimos y recomendaciones para un sistema que
soporte Drupal son:

• Servidor Web Apache
• PHP
• Servidor de Bases de Datos MySQL

Con la finalidad de que el cliente pueda conocer en tiempo real el estatus
del proyecto y facilitar la colaboración del mismo durante su desarrollo
contrataremos un servicio de hosting para alojar el sitio Web objeto del
proyecto, tomando todas las precauciones necesarias para protegerla de
los buscadores hasta su lanzamiento.

Contrataremos un dominio y el servicio deberá de disponer de varias
cuentas independientes para poder efectuar pruebas en remoto.
Instalaremos Drupal a través de la utilidad cPanel a tal efecto.

Estas informaciones quedarán ampliadas en la documentación que será
aportada con la aplicación.

Una vez finalizado el proyecto se cancelarán las cuentas y el dominio que
fueron contratados para su ejecución, alojando el cliente la aplicación en
sus propios servidores u otros recursos que considere oportunos.

33

2.3.3. Viabilidad económica

Estimación de RR.HH. componentes del equipo de desarrollo Web

• Ejecutivo de cuentas
• Arquitecto de información
• Consultor de usabilidad
• Diseñador gráfico
• Analista-programador

Podríamos incluir otras figuras como director de proyecto, especialista en
bases de datos, etc.

Estimación de costes de producción

• Personal: salario bruto anual estimado por persona componente del
equipo igual a 24.000 € equivalentes a 11,90 €/hora laboral sobre
un promedio de 21 días laborales mensuales con 8 horas de trabajo
diarias (contemplamos 12 meses incluyendo el coste de vacaciones).

En nuestro proyecto participa una sola persona que realiza las cinco
funciones básicas estimadas, por tanto el coste de la hora de esta única
persona debería de ser la suma de las capacidades y desempeños de todo
un equipo:

11,90 € * 5 = 59,5 €/hora

• Otras estimaciones de costes de producción en base mensual:

Recurso Coste mensual
Alquiler de oficina 700 €
Luz 80 €
Teléfono 30 €
Alquiler del servicio hosting multicuenta 29 €
Alquiler de dominio 10,44 €/año
Total otros costes del proyecto 849,44 €

• Desestimamos los siguientes costes:
 Seguros e impuestos
 Recursos hardware
 Recursos software (en todo caso Drupal es software libre
cuya licencia por tanto es gratuita).

34

Resultado:

Componente Coste
240 horas de trabajo x 59,5 €/hora 14.280 €
Otros costes estimados 849,44 €
Total 15.129,44 €

Estimación del precio final al cliente

Hoy en día un producto hardware de consumo fluctúa en unos márgenes
comerciales que pueden ir del 5% al 15% de promedio.

El proyecto incluye una Distribución libre de la aplicación que puede ser
instalada en otros Departamentos de la Universidad cuya potencialidad
como clientes bajaría en este sentido.

El margen comercial a aplicar no debería ser menor del 25%.

Resultado:

Componente Precio
Estimación de costes de producción 15.129,44 €
25% de margen comercial 3.782,36 €
Subtotal 18.911,80 €
16% I.V.A. 3.025,89 €
Total 21.937,69 €

Precio final al cliente I.V.A. incluido 21.937,69 €

Contrato de mantenimiento

Una acción futura para la figura del ejecutivo de cuentas podría consistir
en la negociación de un contrato de mantenimiento para la aplicación con
los diversos Departamentos que la instalen.

35

3. ANALISIS DE REQUISITOS

3.1. ENTREVISTA CON EL CLIENTE

Identificamos el interlocutor válido del Departamento; será la persona que
actuará como facilitador durante el desarrollo del proyecto y con quién
deberemos estar en contacto de forma continuada en todas sus fases.

Puede tratarse de una o varias personas; en nuestro caso estableceremos
que se trata de una sola y que actúa como representante de los decisores
finales, filtrando la información y colaborando activamente en la definición
de la misión y los objetivos del sitio Web.

3.2. EVALUACION DE OTROS SITIOS WEB

Una de las técnicas utilizadas en la ejecución de proyectos relacionados
con la elaboración de sitios Web consiste en la evaluación de productos
similares al que vamos a desarrollar, con el fin de identificar sus
características y facilitar la toma de decisiones por parte del cliente en
cuanto a sus propios requerimientos.

Muestra externa

Tomamos como muestra dos departamentos universitarios, uno de la
Universidad de Sevilla y otro de la Universidad de Granada.

Los aspectos que se consideraron más apropiados para evaluar en este
caso fueron los referentes a la estructura del sitio, organización de
contenidos y navegación.

36

Fuente: http://www.lsi.us.es/

Fuente: http://decsai.ugr.es/

37

Diagramamos en papel el mapa del sitio y situamos las etiquetas de
contenidos. Posteriormente se presentaron estos diagramas a nuestro
cliente con el fin de concretar los primeros contenidos de nuestro portal.

Ejemplo del diagramado en papel:

38

Muestra interna

Hemos usado el portal Web de la Universidad de Huelva como muestra
final en donde hemos encontrado los recursos necesarios para:

1. Obtener los datos precisos para la definición del look & feel de
nuestro sitio.

Fuente: http://www.uhu.es/sevirtual/

2. Obtener la documentación oficial en base a la cual estructurar:

 El Personal del departamento

Fuente: http://www.uhu.es/sec.general/Normativa/Normativa.htm

 La Oferta Académica del departamento

Fuente:
http://www.uhu.es/estudios/ofertaacademica/ofertaacademica.htm

39

3.3 PERFIL DE LOS USUARIOS

Dentro del proceso de la metodología del Diseño Centrado en el Usuario
existe un aspecto necesario: establecer los perfiles de uso de modo que
toda la actividad que se lleve a cabo esté dirigida por los “usuarios tipo”
que se identifiquen, para dar respuesta a sus necesidades reales.

Esto puede hacerse mediante estudios etnográficos de forma analítica o
entrevista con los distintos usuarios de forma experimental; en este
sentido también se puede usar el método de encuesta. Estos métodos
estarán condicionados por los medios económicos y el periodo de tiempo
con los que se cuente desde el inicio hasta la finalización del proyecto.

En este caso debemos tener en cuenta el factor tiempo, que es reducido,
así que procedemos a adaptar la técnica conocida como “personas” en
donde definiríamos arquetipos de usuarios que representen patrones de
conducta, objetivo y necesidades, y procedemos a una definición directa
de perfiles con la ayuda de nuestro facilitador durante el proceso de
entrevista y el análisis de la comunidad universitaria.

Teniendo en cuenta a los tipos de personas que atiende la Universidad de
Huelva como institución de educación superior, se han determinado, en
base a las diversas necesidades de información y tareas que pueden
realizar en el sitio Web del Departamento de Tecnologías de la
Información en particular y en un Departamento Universitario en general
los siguientes grupos de usuarios:

- Aspirantes a estudiantes de educación superior de las ramas de la
oferta académica de la Universidad de Huelva en las que el
Departamento imparte sus asignaturas.
- Estudiantes adscritos a otras carreras sin relación con las que
imparte el Departamento.
- Estudiantes adscritos a los estudios que imparte el Departamento.
- Personal docente del Departamento.
- Personal administrativo del Departamento.

40

3.4. ROLES

Del estudio de los distintos perfiles de los usuarios extraemos una
definición de roles del sistema que posteriormente nos servirá para
clasificar los objetivos del sitio tanto como Web que es visitada por
cualquier tipo de usuario como sistema de gestión de contenidos.

- Usuario anónimo: Por definición será el grupo de usuarios que no
tendrá acceso identificado al sistema. Fundamentalmente estará
compuesto por el alumnado en general y cualquier persona no
incluida en el personal del departamento.

 Estudiante: persona matriculada en cualquiera de las
titulaciones universitarias o que pretende cursar alguna
de las ofertas académicas.

- Usuario identificado: Por definición un usuario identificado tendrá
acceso al sistema y cierta responsabilidad en la gestión de sus
contenidos.

 Profesor del departamento: persona encargada de
enseñar o ejercer una disciplina dentro del grupo de
formación universitario. Incluye:
• Director del departamento
• Secretario del departamento
• Administrador del sistema: persona encargada
de gestionar la Web, su contenido y su
funcionamiento.
 Administrativos del departamento.
 Becarios adscritos al departamento.
 Estudiantes pertenecientes al Consejo de
Departamento.

41

3.5. MISION DEL SITIO

El sitio Web del Departamento de Tecnologías de la Información de la
Universidad de Huelva facilitará a los usuarios, tanto internos como
externos, el acceso a la información corporativa y a los servicios
académicos que ofrece la entidad. El personal adscrito al Departamento
gestionará en base a sus distintos niveles de responsabilidad la
información que se presente a la audiencia del sitio.

3.6. OBJETIVOS DEL SITIO

De la información recabada de la entrevista con el profesor representante
del departamento así como del estudio del perfil de los usuarios y su
agrupación en roles obtenemos el conjunto de requisitos que debe de
cumplir el sitio Web.

3.6.1. Requisitos del sitio Web para el usuario final

La relación de estos requisitos se establece en base a la visión de los
usuarios finales del Web, entendiendo que agrupa tanto al conjunto de
usuarios anónimos como a los distintos roles que componen el grupo de
usuarios identificados.

- Consistencia corporativa en el look & feel del sitio.
- Localización: se incluirá un apartado con un mapa tipo Google que
reflejará la dirección y coordenadas GPS de la ubicación del
departamento.
- Contacto: datos de contacto telefónico, fax, correo así como un
formulario electrónico. Existirá un formulario electrónico general del
departamento y uno para cada uno de sus componentes a fin de que
cualquier usuario anónimo pueda dirigirse en particular a cualquier
miembro del departamento.
Se incluirá un control anti-spam.
- Enlaces: utilidad de enlaces a favoritos del departamento.
- Búsqueda: se situará un buscador en la página inicial del sitio así
como en diversas páginas de contenido.
- Calendario del departamento: incorporará las convocatorias de
comisiones y consejos, así como las fechas de los seminarios que se
impartan. En este punto el rol “secretario” deberá disponer de una
utilidad para la distribución electrónica de las convocatorias.
- Personal: información académica de los distintos usuarios que
componen el departamento, incluyendo el área del mismo al que
pertenecen, su rol académico y los órganos de gobierno a los que
puedan pertenecer dentro de la estructura del departamento.

42

Adicionalmente la ficha individual de personal de cada profesor
deberá de presentar la siguiente información:
- Asignaturas que imparte
- Grupos de investigación a los que pertenece
- Proyectos fin de carrera o de máster que coordina

- Titulación: se desglosarán las carreras de la Universidad de Huelva
en las que el departamento imparte las distintas asignaturas
agrupando los estudios de forma que se tenga en cuenta los
actuales de primer y segundo ciclo, el Espacio Europeo de Educación
Superior, así como los masters oficiales y formación permanente
relacionada o impartida por el profesorado del departamento.
Adicionalmente deberá incluirse el listado de asignaturas que
imparte el departamento en cada una de las titulaciones.
- Asignaturas: relación de asignaturas impartidas por el departamento
en base al conjunto de titulaciones así como de otros estudios
contemplados. Se ordenarán por año académico y serán
diferenciadas por área.
- Noticias: utilidad de noticias del departamento. Así mismo los
profesores dispondrán de la posibilidad de generar noticias
referentes a las asignaturas que se imparten.
- Noticias destacadas: formarán parte de la página principal de la
Web.
- Proyectos fin de carrera o fin de máster: oferta de proyectos que
coordinen los distintos profesores del departamento. Debe reflejar el
estatus del proyecto, fundamentalmente su disponibilidad.
- Tutorías: información sobre horarios y despachos para las tutorías
del alumnado.
- Grupo de investigación: relación de grupos de investigación
compuestos por profesores del departamento.
- Publicaciones: bibliografía recomendada por el profesorado del
departamento. Existirá una información general bibliográfica así
como la posibilidad de concretarla en las asignaturas particulares.
- Seminario: información relacionada con seminarios que imparta el
departamento o inclusión de aquellos que por su relevancia
académica se estimen oportunos.
- Cualquier contenido podrá incorporar un PDF como guía que pueda
ser fácilmente descargable por el usuario. Así mismo la presentación
de las fichas de los contenidos: titulaciones, asignaturas, personal,
etc. deberá incorporar una utilidad de impresión, envío por correo
electrónico o descarga en formato PDF a voluntad del usuario de la
Web.

43

3.6.2. Requisitos del sitio Web para los usuarios con acceso
autorizado

La relación de estos requisitos se establece en base a la visión de los
usuarios identificados del Web como sistema de gestión de contenidos en
donde cada uno de los roles podrá ejecutar una serie de acciones
dependiendo de los permisos que le hayan sido adjudicados por el
administrador del sistema.

Con el fin de clarificar los distintos requisitos establecemos la siguiente
tabla:

Acceso identificado de los Usuarios
Permisos del usuario Profesores Director Secretario Estudiantes PAS
Editar su propia ficha de personal • • •
Editar su propia asignatura • • •
Crear y Editar su propio Proyecto
FC/FM • • •
Crear y Editar sus propias Noticias • • •
Editar Grupo de Investigación • • •
Crear y Editar su propio Seminario • • •
Crear y Editar Comisión Permanente •
Crear y Editar Consejo de
Departamento •
Crear y Editar Destacados • •
Crear y Editar Publicaciones • • •
Crear y Editar Enlaces • • •
Suscripción por mail a convocatorias • • • • •
El usuario administrador del sistema dispone de todos los privilegios para la administración del Portal, sus principales
responsabilidades serán:

- Configuración de la plataforma personalizando las áreas de contenidos que se precisen
- Actualización de los contenidos de la Web
- Gestión de altas y bajas de usuarios
- Control de acceso a las zonas públicas y privadas de la Web
- Actualización del software del CMS

44

4. DISEÑO

4.1. INVENTARIO DE CONTENIDOS Y ETIQUETADO

De acuerdo a los resultados obtenidos en la fase de “Análisis de
Requisitos” se propone una estructura de organización de contenidos y se
establece el siguiente sistema de organización para el sitio Web del
Departamento.

Representaremos así mismo el etiquetado tanto de los distintos menús y
elementos de menú como de los campos que componen las fichas de
contenido que se presentan al usuario cuando éste accede a uno de los
ítems representados como vista de tabla o como vista de lista de
elementos.

Las etiquetas las rotularemos en azul para su mejor identificación en la
tabla.

45

Menú Elemento del Presentación de la Ficha de Contenido que se
menú información al usuario presenta al usuario

Lista de “Destacados” Ficha de contenido “Destacados”:

Destacados Titular
2 ítems. Texto
Imagen
Lista de “Noticias” Ficha de contenido “Noticias”:

Noticias Título
5 ítems. Asignatura de referencia
Cuerpo
Logotipo de la Universidad de Huelva
Accesos:
con imágenes de portada aleatorias.
Universidad de Dichas imágenes serán personalizables
Rectorado
Huelva por el administrador.
Servicios
Los accesos redirigirán al usuario al
Centros
portal de la Universidad de Huelva.
Mapa Google Ficha de contenido “Localización”
Localización

Formulario de contacto con el Ficha de contenido “Contacto”
Contacto Departamento

Tabla de “Enlaces”: Ficha de contenido “Web Links”:

Web Link Name
Descripción URL
Enlaces Web Links: Boletines Oficiales,
*Buscar por texto Instituciones Académicas, Prensa,
*Categoría Publicaciones científicas o Sociedades
científicas.
Descripción del sitio
Lista de “Noticias” Ficha de contenido “Noticias”:

Noticias Todas las noticias Título
Asignatura de referencia
Cuerpo
Iniciar sesión o
Acceso Identificado Solicitar nueva contraseña

Buscador
Buscar

Vista mensual Anotaciones del Calendario:

Calendario Imagen Calendario Seminarios
Comisiones Permanentes
Consejos de Departamento
Tabla de Ficha de contenido “Titulación”:
“Licenciatura + Diplomatura + Ingeniería
+ Ingeniería Técnica”: Nombre de Titulación, Oferta Académica
(Licenciatura, Diplomatura, Ingeniería,
Titulación Ingeniería Técnica), Código, Descripción
Código de los estudios, Guía docente, Web.
Oferta Académica

Tabla de
Estudios 1º y 2º
“Asignaturas de los estudios”:
Docencia Ciclo
Asignatura
Año Académico

46

Tabla de “Grado + Posgrado-Máster + Ficha de contenido “Titulación”:
Posgrado-Doctorado”:
Nombre de Titulación, Oferta Académica
Titulación (Grado, Posgrado-Máster, Posgrado-
Código Doctorado), Código, Descripción de los
Oferta Académica estudios, Guía docente, Web.
EEES

Tabla de

Asignatura
Año Académico
Tabla de “Máster Oficial”: Ficha de contenido “Titulación”:

Titulación Nombre de Titulación, Oferta Académica
Código (Máster Oficial), Código, Descripción de
Oferta Académica los estudios, Guía docente, Web.
Máster Oficial

Tabla de

Asignatura
Año Académico
Tabla de “Curso + Título de Experto + Ficha de contenido “Titulación”:
Máster”:
Nombre de Titulación, Oferta Académica
Titulación (Curso, Título de Experto, Máster),
Código Código, Descripción de los estudios,
Formación Oferta Académica Guía docente, Web.
Permanente

Tabla de

Asignatura
Año Académico
Tabla de “Asignaturas Impartidas”: Ficha de contenido “Asignatura”:

Asignatura Nombre de la asignatura, Código de la
Coordinador asignatura, Titulación, Créditos, Año
Año Académico Académico (2009/2010, 2010/2011,
2011/2012), Curso / Cuatrimestre
*Búsqueda por texto (Primero, Segundo, Tercero, Cuarto,
*Áreas Quinto ), Área (CCIA, LSI)
Asignaturas
, Coordinador, Acceso para el
coordinador, Profesores de la
asignatura, Descriptores de la
asignatura, Guía docente, Web,
Bibliografía recomendada.

Lista de “Noticias” de la asignatura
Tabla de “Tutorías”:

Tutorías Profesor
Horario
Despacho
Tabla de “Proyectos FC/FM”: Ficha de contenido “Proyecto FC/FM”:

Título del proyecto Título, Código del proyecto, Créditos,
Coordinador Titulación, Año Académico (2009/2010,
Disponibilidad 2010/2011, 2011/2012), Curso /
Cuatrimestre (Primero, Segundo,
PFC/Fin Máster Tercero, Cuarto, Quinto), Área (CCIA,
LSI), Disponibilidad (Asignado, Leído,
Propuesto), Disponibilidad (detalles),
Coordinador del proyecto, Profesores
del proyecto, Descripción del proyecto,
Guía docente, Web, Bibliografía
recomendada.

47

Menú Elemento del Presentación de la Ficha de Contenido que se
menú información al usuario presenta al usuario

Tabla de “Grupos de investigación”: Ficha de contenido “Grupo de
investigación”:
Grupo
Grupos
Responsable Nombre del grupo, Responsable,
Web Miembros del grupo, Web, Descripción
del grupo.
Lista de “Publicaciones” Ficha de contenido “Publicaciones”:

Investigación Título
Publicaciones
Año
Autor
Todas las publicaciones
Lista de “Seminarios” Ficha de contenido “Seminario”:

Seminarios Título, Descripción del seminario, Fecha,
Ponente, Coordinador, Web.
Todos los seminarios
Tabla de “Profesores + Director del Ficha de contenido “Personal”:
Departamento + Secretario del
Departamento”: Nombre, Perfil (Profesores, Director del
departamento, Secretario del
Foto del profesor departamento), Área (CCIA, LSI),
Nombre Organos de Gobierno (Comisión
Despacho Permanente, Consejo de departamento),
Teléfono Foto usuario, Teléfono, Despacho, Web,
Horario Horario de tutoría.

*Búsqueda por texto
*Área Tabla de “Asignaturas” del profesor:

Asignatura
Profesores Titulación
Año Académico

Tabla de
“Grupo de Investigación” del profesor:
Grupo

Tabla de “Proyectos” del profesor, fin de
carrera o fin de máster:

Proyecto
Disponibilidad
Personal

“Formulario de Contacto” con el profesor
Tabla de “(PAS) Personal de Ficha de contenido “Personal”:
Administración y Servicios”:
Nombre, Perfil ((PAS) Personal de
Foto del PAS Administración y Servicios), Área (CCIA,
Nombre LSI), Organos de Gobierno (Comisión
Administrativos Teléfono Foto usuario, Teléfono, Despacho, Web,

*Área

“Formulario de Contacto” con el PAS
Tabla de “Becarios”: Ficha de contenido “Personal”:

Foto del Becario Nombre, Perfil (Becarios), Área (CCIA,
Nombre LSI), Organos de Gobierno (Comisión
Becarios

*Búsqueda por texto “Formulario de Contacto” con el Becario
*Área

48

Tabla de “Estudiantes Consejo del Ficha de contenido “Personal”:
Departamento”:
Nombre, Perfil (Estudiantes Consejo del
Foto del Estudiante Departamento), Área (CCIA, LSI),
Nombre Organos de Gobierno (Comisión
Estudiantes Horario Horario de tutoría.

*Área

“Formulario de Contacto” con el
Estudiante

Tabla de “Comisión Permanente”: Ficha de contenido “Comisión
Permanente”:
Convocatoria
Fecha Convocatoria, Tipo de convocatoria
(Ordinaria, Extraordinaria), Fecha, Hora
segunda convocatoria, Lugar, Orden del
día, Lista de convocados.
Gestión
* Comunicación de la convocatoria vía
correo electrónico
Convocatorias
Tabla de “Consejo de Departamento”: Ficha de contenido “Consejo de
Menú restringido a
Departamento”:
usuarios
Convocatoria
identificados
Fecha Convocatoria, Tipo de convocatoria
(Ordinaria, Extraordinaria), Fecha, Hora
segunda convocatoria, Lugar, Orden del
día, Lista de convocados.

* Comunicación de la convocatoria vía
correo electrónico

49

Inventariamos también como contenidos que tenemos que incorporar en
el sitio Web otra serie de requisitos que nos trasladaron los usuarios
durante el análisis, en dos tablas:

Utilidades de los Usuarios
Iconos de acciones de impresión, envío por e-mail y descarga en PDF de las Fichas de contenido que se presentan al usuario final

Carga de archivos en los distintos Tipos de contenido que generarán los usuarios con acceso identificado

Control de Spam en los Formularios de contacto

Acceso identificado de los Usuarios
Permisos del usuario Profesores Director Secretario Estudiantes PAS
Editar su propia ficha de personal • • •
Editar su propia asignatura • • •
Crear y Editar su propio Proyecto
FC/FM • • •
Crear y Editar sus propias Noticias • • •
Editar Grupo de Investigación • • •
Crear y Editar su propio Seminario • • •
Crear y Editar Comisión Permanente •
Crear y Editar Consejo de
Departamento •
Crear y Editar Destacados • •
Crear y Editar Publicaciones • • •
Crear y Editar Enlaces • • •
Suscripción por mail a convocatorias • • • • •
El usuario administrador del sistema dispone de todos los privilegios para la administración del Portal, sus principales
responsabilidades serán:

- Configuración de la plataforma personalizando las áreas de contenidos que se precisen
- Actualización de los contenidos de la Web
- Gestión de altas y bajas de usuarios
- Control de acceso a las zonas públicas y privadas de la Web
- Actualización del software del CMS

50

4.2. DISEÑO DE LA INFORMACION

Para el presente proyecto, en el cual estamos aplicando una metodología
de desarrollo centrada en el usuario, hemos realizado un diagrama de la
arquitectura de la información del sitio en donde se muestra su estructura
y la representación de etiquetas que hemos definido durante la realización
del inventario de contenidos.

Dentro del nivel de detalle del diagrama representaremos las vistas de
tabla o vistas de lista generales o particulares de la ficha de contenido de
un elemento, sin incluir los campos propios de dicha ficha, y marcando
aquellos campos de las vistas que actuarán como link hacia la ficha del
elemento.

Agruparemos en el mismo bloque los nombres de aquellas tablas cuyo
etiquetado de campos sea el mismo para todas ellas con el fin de facilitar
la comprensión del diagrama.

52

4.3 DISEÑO VISUAL

Uno de los aspectos clave para cumplir con la Misión del sitio Web del
Departamento de Tecnologías de la Información es respetar la línea
corporativa en el look & feel del sitio de tal forma que el sitio Web quede
integrado bajo la “Imagen de Marca” de la Universidad de Huelva.

La información de identidad de marca que aplicaremos ha sido obtenida
de la Web de la Universidad de Huelva en http://www.uhu.es/sevirtual/,
así mismo esta página nos ha servido como guía visual durante el proceso
de Implementación del sitio.

Utilizaremos CSS durante dicha fase.

53

Diseño de la página principal

En el diseño de la página principal aplicamos las directrices referentes a
identidad y misión del sitio: qué es este sitio y para qué es, así como una
distribución del contenido que permita una respuesta satisfactoria del
Departamento a las expectativas de conocimiento que el usuario que
accede al sitio Web del mismo, espera obtener.

Un sitio Web bien estructurado y con una jerarquía clara de contenidos es
el aspecto prioritario, complementado durante la navegación por el uso de
las breadcrumbs (migas de pan) que deben fundamentalmente de darnos
una visión acerca del nivel donde nos encontramos durante la navegación
y posibilitarnos el regreso a la página principal.

Aspecto corporativo: logos y colores

Hemos usado la anterior página Web de la Universidad de Huelva como
ejemplo para la composición de la línea corporativa que queremos para
nuestro sitio Web extrayendo de la misma los logos de la universidad así
como los colores corporativos indicados en la misma, en la dirección Web
http://www.uhu.es/sevirtual/#recursos_diseno

Resolución de pantalla

El tamaño de pantalla usado es de ancho fijo para pantallas con una
resolución mínima de 1024 píxeles, teniendo en cuenta el borde del
navegador y el scroll el ancho de la zona de contenidos visible de la Web
es de 960 pixels para darle más espacio a los márgenes laterales.

Los contenidos de las sucesivas páginas deben de aparecer un poco más
arriba de la mitad de la pantalla respecto al ojo del usuario.

54

Imágenes

Es recomendable dedicar entre el 5 y el 15% de la página de inicio a
imágenes. Podrían necesitarse más si su contenido fuera muy visual.
Para el sitio Web del Departamento de Tecnologías de la Información
teníamos que tener en cuenta también la aparición de imágenes aleatorias
en el bloque inferior al nombre del departamento y su personalización por
parte del mismo por parte del administrador del sistema de gestión de
contenidos.

Dichas imágenes deben de tener una resolución máxima que se ajuste
independientemente de su formato original al área de contenido al que se
adscriben. Es un aspecto que se tendrá en cuenta en la fase de
Implementación. A este respecto decidimos cargar imágenes de prueba en
blanco y negro para que sea el usuario administrador quién decida qué
imágenes situar en el sitio Web en referencia a la imagen corporativa del
mismo.

Diseño de rótulos

- Crearemos una jerarquía visual clara en cada página.
- Dividiremos las páginas en zonas claramente definidas.
- Usaremos un claro marcado de contenidos sobre los que se pueda
hacer clic mediante el cambio de color de la tipografía así como la
aplicación del subrayado como referencia explícita del link a todo
tipo de usuarios que visiten la Web.
- Reduciremos al máximo la posibilidad de ruido visual mediante una
aplicación de colores y de imágenes que respeten el concepto de
usabilidad.

55

4.4. PROTOTIPADO

En esta etapa se realizan prototipos o wireframes, término en inglés, del
sitio Web. Dichos prototipos describen cómo se verían las páginas
individualmente desde una perspectiva arquitectónica.

Trataremos de especificar y mostrar claramente en dónde estarán
ubicados cada uno de los elementos que componen una determinada
página como respuesta al inventario de contenidos y etiquetado ya
efectuado.

Su realización ayudará también a probar las ideas en contexto,
permitiendo visualizar posibilidades y hacer cambios, para evitar en un
futuro un posible rediseño entero del sitio. Igualmente, los wireframes
contribuirán a decidir cómo agrupar y ordenar los componentes del
contenido.

Crearemos wireframes para las páginas más importantes del sitio, tales
como la página de inicio y los principales elementos de los menús.
Identificaremos la posición de ciertos elementos en las páginas de
contenido del sitio. El objetivo no será crear wireframes para todas las
páginas del sitio, sino para las que configuran la estructura común de la
Web.

Para no demorar el proceso y por tanto cumplir con los tiempos asignados
sin incrementar los costos presupuestados realizaremos prototipos de baja
fidelidad de las principales páginas del sitio y posteriormente uno de
media fidelidad de la página principal del sitio en donde aplicaremos los
requerimientos de look & feel planteados por el Departamento.

En cada uno de los prototipos de baja fidelidad se definió mediante
cuadros y textos donde debía ir ubicado cada elemento de navegación,
búsqueda y contenido. De igual modo hemos usado una tabla de
anotaciones para explicar algunos contenidos o interacciones.

En el prototipo de media fidelidad hemos aplicado la información
suministrada por el Departamento junto con sus requerimientos,
siguiendo el apartado de diseño visual (colores y elementos gráficos de la
Universidad de Huelva).

Cabe destacar en este punto que para realizar cada prototipo se tuvieron
en cuenta los resultados del proceso de investigación previa. Así mismo
dichos prototipos, siguiendo con una metodología de Diseño Centrado en
el Usuario, fueron presentados al Departamento para su revisión y
modificación previa a la fase de Implementación.

56

En total se han realizado 13 prototipos de baja fidelidad y un prototipo de
media fidelidad.

57

4.4.1. Prototipo 1: Página principal

Personal
Docencia
Calendario
LOGO
12
11
7
4
2
1
•de
Gestión
M0 217364Serviciosla máximo caso
13
9
6
5
3
8
Buscar
.:temvezencabezado:noticias relevanciade
Tel la menúdelComplementa delmenú.delAcceso La Frontera.
TorreumbríadeFax:elementos en elmenú.del
Pabellóndeparte yNoticias. accesoprimarios
HuelvaUniversidadelementosde del21819 Palos
3 959 páginay DElasrelacionadas delsus
PROTOTIPOSprincipal217703els/n.menú.visual deidentificado
.Universidadexclusivamente del Lao mostrarán
elementos de y
Imágenes como 959yde sitio
2 ombre a Palos yquede Centros
Localización
Rectorado
Logo delateralportada.deque se Noticias
Bloque conContacto
Ubicación hayanBAJAEnlaces
DefinidastodasdeDestacados. través menú.
:-destacadosyLa página principal
1CarreteraPolitécnicala Fronteraa aspectocon de
12
11
7
4 Escuelase PermanenteAleatorias.Rábida
IOficial
item
items
PFC
EEES
Seminarios
Texto
Convocatorias
Footer
13
exitosamente.
10
9
6
5 noticias
DESCRIPCIONmenúdeelementos almenú.
No. lalateralespermisodeenlaces seensistema,
Este Personalvisible FIDELIDAD no
Becarios
8
Infomación
Publicaciones
dos
web Docencia de elementos
la
Personalizable2º elementos
Huelva primario Comopor su delpueda
destacados
Estudiantes
Administrativos
Profesores
Tutorías
Formación
Máster
acceder
N enú Calendario Ciclo de
Región noticiasdede ydel Tecnologías de la Información
/Fin
Menú Investigación Superior
Principal
Departamento
Grupos
Asignaturas
navigation Noticiasidentificado
Estudios
formarán1º izquierdo: accesible
enlace
independientemente
Lista
usuarios del Departamento.
asignaturas.
una Gestión izquierdo:
Investigación
Departamento
Página
Tecnologías
Departamento.
de
Noticias
Item
Huelva
Universidad
Área
image
Image

58

4.4.2. Prototipo 2: Docencia. Estudios

Cag e dap p la
Huelvaaa o
+eg so c g
oce
OGO
Departamento + de Tecnologías de la Información
Tecnologías de dede
Investigación
Departamento Ingeniería
Universidad
Diplomatura
Ingeniería g

59

4.4.3. Prototipo 3: Docencia. Item titulación

Cage daa o la
Huelvaa
OGO cp
eg so
oce
Departamento dede estudios de la Información
Tecnologías de de los
Investigación
Departamento de Tecnologías
Asignaturasp
g p
p
g
Universidad

60

4.4.4. Prototipo 4: Docencia. Asignaturas

Cage daa o la de
Huelvaa te to
OGO c
e so
oce
Departamento impartidas ea de de la Información
Tecnologías de ded s ó po
Investigación
Departamentoyde Tecnologías
g
Universidad
búsqueda po
Asignaturas

61

4.4.5. Prototipo 5: Docencia. Item asignaturas

Cage dap o
Huelvaaa
OGO c
egg
oce
g so
Departamento dede
Investigación
Departamento de
Tecnologías de la Tecnologías de la Información
Asignaturag p
p
Universidad

62

4.4.6. Prototipo 6: Docencia. Tutorías

Cage daa o
Huelvaa
OGO c
e so
oce
Departamento dede
Investigación
Departamento de
Universidad

63

4.4.7. Prototipo 7: Docencia. Proyectos

Cage day de la
Huelvaaa o
OGO pc
e so
oce
oyectos
Departamento dede
Investigación
Departamento
Tecnologías FC/ de Tecnologías de la Informaciónp
Universidad
Proyectos

64

4.4.8. Prototipo 8: Investigación. Grupos

Cageg ca o de
GOGO daa Investigación
e so
oce
upos
Departamentog dede
Investigación
Departamento gp
Grupos g
p
Huelvade
Universidad g

65

4.4.9. Prototipo 9: Investigación. Publicaciones

Cageg daa o
Huelvaa
pOGO c g
e so
oce
Departamento dede
Investigación
Departamento de
Universidad

66

4.4.10. Prototipo 10: Investigación. Seminarios

Cageg daa o
Huelvaa
OGO c g
e so
oce
Departamento dede
Investigación
Departamento de
Universidad

67

4.4.11. Prototipo 11: Personal. Profesores

Cage g caa +
Profesores o p
) OGO da
p g so q
e
oce
Departamentopdede p y p
Investigación
DepartamentopdegTecnologías de la Información
Tecnologías de Director del p
departamentola
Huelva
Universidad q departamento + Secretario del

68

4.4.12. Prototipo 12: Personal. Item profesor

Cage de gpa pep
Huelvade o
Gruposca p
e sop
ga os da
oce
Ó OGO q Gob
Departamento pdedeg p p pp
Investigación
Departamentoode p
p
gg
Universidad
Asignaturas
Proyectos investigación

69

4.4.13. Prototipo 13: Gestión

Gestiónyaqo dede p g
Cage da Permanente
Huelvaa
OGO c
e so
oce
Comisión p
Departamento la p qTecnologías de la Información
Investigación
Departamento
Tecnologías de de
pp
Universidad

PFC Antonio Bernal Baena

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a PFC Antonio Bernal Baena

Semelhante a PFC Antonio Bernal Baena (20)

Último

Último (20)

PFC Antonio Bernal Baena