Alumno:                   Antonio Bernal BaenaDirector:   Iñaki Fernández de Viana y González                       Diplom...
2Este proyecto de fin de carrera ha sido realizado para el Departamento deTecnologías de la Información, por Antonio Javie...
3A mi mujer, sin su apoyo nunca podría haber hecho realidad este reto.                                                    ...
4INDICE DE CONTENIDOS1. INTRODUCCION                                                        101.1. CONCEPTOS PREVIOS      ...
54. DISEÑO                                                         444.1.   INVENTARIO DE CONTENIDOS Y ETIQUETADO         ...
65.3.9. Casos de implementación del inventario de contenidos   115      5.3.9.1. Estudio del caso: Localización           ...
75.3.9.8. Estudio del caso: Docencia. Asignaturas         217      5.3.9.8.1. Configuración de módulos                219 ...
8      5.3.10. Tema                                                325           5.3.10.1. Tema framebasico               ...
99.2. MANUAL DEL USUARIO                                      380      9.2.1. Introducción                                ...
101. INTRODUCCION1.1. CONCEPTOS PREVIOSEl proyecto de creación del nuevo portal Web del Departamento deTecnologías de la I...
11Finalmente se entregará una Distribución del sistema para que pueda serimplantado en los Departamentos de la Universidad...
122. PLANIFICACION2.1. HERRAMIENTASPara desarrollar una aplicación Web se nos plantea la dificultad de elegiruna herramien...
132.1.2. Percepción del usuario acerca del CMSDesde el punto de vista del usuario interno:Sistema para gestionar, de forma...
14Nosotros usaremos una plataforma que podemos instalar para gestionarnuestro proyecto individual, y por lo tanto construi...
15PortalesUn portal está formado por una o varias secciones donde se publicannoticias o se actualiza el contenido periódic...
16Foros   • PHP BB http://www.phpbb.com/El sistema más popular de gestión de foros. Cuenta con muchísimascaracterísticas (...
17ECM: Gestión de contenidos en el ámbito empresarialLa AIIM (asociación para ayudar a las organizaciones a gestionar suin...
18La lista de plataformas opensource que se analizan en el ámbito de losgestores de contenidos Web (WCMS) es:  •   Alfresc...
19Una de las bases de la potencia es el control separado del contenidomediante plantillas para la visualización; con aplic...
20Drupal y JoomlaJoomla:  •   Muy fácil de instalar y de utilizar con muchas extensiones y      módulos.  •   La documenta...
212.1.7. DrupalEl CMS elegido para el desarrollo ha sido el sistema opensource Drupal,escrito en PHP y distribuido bajo li...
22Introducción a DrupalDries Buytaert, un informático belga y autor original de Drupal, comenzó adesarrollar un gestor de ...
23Ofrece una gestión de usuarios avanzada, en la que podremos generarun sistema abierto de alta de usuarios, o cerrado o m...
242.2. METODOLOGIA DE DESARROLLO2.2.1. Diseño Centrado en el UsuarioPrincipios del Diseño Centrado en el UsuarioEl Diseño ...
25Y la naturaleza iterativa de estas actividades está ilustrada en lasiguiente figura:El proceso implica iterar hasta sati...
26Los elementos de la Experiencia de UsuarioJesse James Garrett, en su libro “The elements of user experience” defineuna g...
27Existen una serie de métodos específicos desarrollados para llevar a cabolas distintas fases de un diseño Web centrado e...
282.2.2. Fases del ProyectoEl proyecto presenta tres condicionantes que debemos tener en cuentapara la determinación de la...
29El siguiente diagrama integra las etapas del proyecto:
30Como indica el diagrama, las fases de “Análisis de requisitos” y de“Diseño” son cíclicas e iterativas. Esto quiere decir...
31Diagrama de Gantt con vista mensual:Diagrama de Gantt con vista diaria:
322.3. VIABILIDAD2.3.1. Viabilidad legalDrupal se distribuye bajo la licencia GNU General Public License (GPL), ypor lo ta...
332.3.3. Viabilidad económicaEstimación de RR.HH. componentes del equipo de desarrollo Web   •   Ejecutivo de cuentas   • ...
34Resultado:                  Componente                                Coste240 horas de trabajo x 59,5 €/hora           ...
353. ANALISIS DE REQUISITOS3.1. ENTREVISTA CON EL CLIENTEIdentificamos el interlocutor válido del Departamento; será la pe...
36Fuente: http://www.lsi.us.es/Fuente: http://decsai.ugr.es/
37Diagramamos en papel el mapa del sitio y situamos las etiquetas decontenidos. Posteriormente se presentaron estos diagra...
38Muestra internaHemos usado el portal Web de la Universidad de Huelva como muestrafinal en donde hemos encontrado los rec...
393.3 PERFIL DE LOS USUARIOSDentro del proceso de la metodología del Diseño Centrado en el Usuarioexiste un aspecto necesa...
403.4. ROLESDel estudio de los distintos perfiles de los usuarios extraemos unadefinición de roles del sistema que posteri...
413.5. MISION DEL SITIOEl sitio Web del Departamento de Tecnologías de la Información de laUniversidad de Huelva facilitar...
42    Adicionalmente la ficha individual de personal de cada profesor    deberá de presentar la siguiente información:    ...
433.6.2. Requisitos del sitio Web para los usuarios con accesoautorizadoLa relación de estos requisitos se establece en ba...
444. DISEÑO4.1. INVENTARIO DE CONTENIDOS Y ETIQUETADODe acuerdo a los resultados obtenidos en la fase de “Análisis deRequi...
45     Menú             Elemento del               Presentación de la                    Ficha de Contenido que se        ...
46                 Tabla de “Grado + Posgrado-Máster +     Ficha de contenido “Titulación”:                 Posgrado-Docto...
47  Menú          Elemento del             Presentación de la               Ficha de Contenido que se                   me...
48                                     Tabla de “Estudiantes Consejo del     Ficha de contenido “Personal”:               ...
49  Inventariamos también como contenidos que tenemos que incorporar en  el sitio Web otra serie de requisitos que nos tra...
504.2. DISEÑO DE LA INFORMACIONPara el presente proyecto, en el cual estamos aplicando una metodologíade desarrollo centra...
51
524.3 DISEÑO VISUALUno de los aspectos clave para cumplir con la Misión del sitio Web delDepartamento de Tecnologías de la...
53Diseño de la página principalEn el diseño de la página principal aplicamos las directrices referentes aidentidad y misió...
54ImágenesEs recomendable dedicar entre el 5 y el 15% de la página de inicio aimágenes. Podrían necesitarse más si su cont...
554.4. PROTOTIPADOEn esta etapa se realizan prototipos o wireframes, término en inglés, delsitio Web. Dichos prototipos de...
56En total se han realizado 13 prototipos de baja fidelidad y un prototipo demedia fidelidad.
574.4.1. Prototipo 1: Página principal  Personal  Docencia  Calendario  LOGO  12  11  7  4  2  1  •de  Gestión  M0 217364S...
584.4.2. Prototipo 2: Docencia. Estudios  Cag e dap p la  Huelvaaa o   +eg so c g    oce    OGO  Departamento + de Tecnolo...
594.4.3. Prototipo 3: Docencia. Item titulación Cage daa o la Huelvaa  OGO cp  eg so   oce Departamento dede estudios de l...
604.4.4. Prototipo 4: Docencia. Asignaturas  Cage daa o la de  Huelvaa te to   OGO c    e so    oce  Departamento impartid...
614.4.5. Prototipo 5: Docencia. Item asignaturas Cage dap o Huelvaaa  OGO c  egg   oce   g so Departamento dede Investigac...
624.4.6. Prototipo 6: Docencia. Tutorías  Cage daa o  Huelvaa   OGO c   e so    oce  Departamento dede  Investigación  Dep...
634.4.7. Prototipo 7: Docencia. Proyectos  Cage day de la  Huelvaaa o   OGO pc   e so    oce    oyectos  Departamento dede...
644.4.8. Prototipo 8: Investigación. Grupos  Cageg ca o de  GOGO daa Investigación   e so    oce    upos  Departamentog de...
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
PFC Antonio Bernal Baena
Upcoming SlideShare
Loading in …5
×

PFC Antonio Bernal Baena

2,224 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,224
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PFC Antonio Bernal Baena

  1. 1. Alumno: Antonio Bernal BaenaDirector: Iñaki Fernández de Viana y González Diplomatura en Informática Proyecto Fin de Carrera Convocatoria Septiembre de 2009
  2. 2. 2Este proyecto de fin de carrera ha sido realizado para el Departamento deTecnologías de la Información, por Antonio Javier Bernal Baena. Estásujeto a la licencia académica de la Titulación de Diplomado enInformática de la Escuela Politécnica Superior de La Rábida (Huelva), yconfiere los derechos y obligaciones pertinentes.© 2009 – Antonio Bernal Baena
  3. 3. 3A mi mujer, sin su apoyo nunca podría haber hecho realidad este reto. A mi padre.
  4. 4. 4INDICE DE CONTENIDOS1. INTRODUCCION 101.1. CONCEPTOS PREVIOS 101.2. EL PROYECTO 102. PLANIFICACION 122.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 212.2. METODOLOGIA DE DESARROLLO 24 2.2.1. Diseño Centrado en el Usuario 24 2.2.2. Fases del Proyecto 282.3. VIABILIDAD 32 2.3.1. Viabilidad legal 32 2.3.2. Viabilidad tecnológica 32 2.3.3. Viabilidad económica 333. ANALISIS DE REQUISITOS 353.1. ENTREVISTA CON EL CLIENTE 353.2. EVALUACIÓN DE OTROS SITIOS WEB 353.3. PERFIL DE LOS USUARIOS 393.4. ROLES 403.5. MISION DEL SITIO 413.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. 5. 54. DISEÑO 444.1. INVENTARIO DE CONTENIDOS Y ETIQUETADO 444.2. DISEÑO DE LA INFORMACION 504.3. DISEÑO VISUAL 524.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 705. IMPLEMENTACION 715.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 785.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 865.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. 6. 65.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.2.1. Configuración de módulos 124 5.3.9.2.2. Creación de elementos de menú 126 5.3.9.2.3. Prototipos de pantalla 128 5.3.9.3. Estudio del caso: Enlaces 129 5.3.9.3.1. Configuración de módulos 129 5.3.9.3.2. Creación de tipos de contenido 130 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.3.6. Creación de elementos de menú 140 5.3.9.3.7. Prototipos de pantalla 141 5.3.9.4. Estudio del caso: Buscar 142 5.3.9.4.1. Configuración de módulos 142 5.3.9.4.2. Prototipos de pantalla 143 5.3.9.5. Estudio del caso: Destacados 144 5.3.9.5.1. Creación de tipos de contenido 144 5.3.9.5.2. Creación de campos 148 5.3.9.5.3. Creación de vistas 150 5.3.9.5.4. Prototipos de pantalla 154 5.3.9.6. Estudio del caso: Personal 155 5.3.9.6.1. Configuración de módulos 158 5.3.9.6.2. Creación de tipos de contenido 159 5.3.9.6.3. Creación de categorías 162 5.3.9.6.4. Creación de campos 164 5.3.9.6.5. Creación de vistas 167 5.3.9.6.6. Creación de elementos de menú 184 5.3.9.6.7. Visibilidad de bloques 188 5.3.9.6.8. Prototipos de pantalla 189 5.3.9.7. Estudio del caso: Docencia. Estudios 193 5.3.9.7.1. Creación de tipos de contenido 195 5.3.9.7.2. Creación de categorías 196 5.3.9.7.3. Creación de campos 198 5.3.9.7.4. Creación de vistas 200 5.3.9.7.5. Creación de elementos de menú 209 5.3.9.7.6. Visibilidad de bloques 212 5.3.9.7.7. Prototipos de pantalla 213
  7. 7. 75.3.9.8. Estudio del caso: Docencia. Asignaturas 217 5.3.9.8.1. Configuración de módulos 219 5.3.9.8.2. Creación de tipos de contenido 221 5.3.9.8.3. Creación de categorías 223 5.3.9.8.4. Creación de campos 225 5.3.9.8.5. Creación de vistas 232 5.3.9.8.6. Creación de elementos de menú 246 5.3.9.8.7. Visibilidad de bloques 247 5.3.9.8.8. Prototipos de pantalla 2485.3.9.9. Estudio del caso: PFC / Fin de máster 249 5.3.9.9.1. Creación de tipos de contenido 250 5.3.9.9.2. Creación de categorías 251 5.3.9.9.3. Creación de campos 252 5.3.9.9.4. Creación de vistas 255 5.3.9.9.5. Creación de elementos de menú 258 5.3.9.9.6. Prototipos de pantalla 2595.3.9.10. Estudio del caso: Tutorías 260 5.3.9.10.1. Creación de vistas 261 5.3.9.10.2. Creación de elementos de menú 264 5.3.9.10.3. Prototipos de pantalla 2655.3.9.11. Estudio del caso: Investigación 266 5.3.9.11.1. Configuración de módulos 267 5.3.9.11.2. Creación de tipos de contenido 268 5.3.9.11.3. Creación de campos 271 5.3.9.11.4. Creación de vistas 276 5.3.9.11.5. Creación de elementos de menú 282 5.3.9.11.6. Visibilidad de bloques 284 5.3.9.11.7. Prototipos de pantalla 2855.3.9.12. Estudio del caso: Gestión y Calendario 288 5.3.9.12.1. Configuración de módulos 289 5.3.9.12.2. Creación de tipos de contenido 294 5.3.9.12.3. Creación de categorías 296 5.3.9.12.4. Creación de campos 297 5.3.9.12.5. Creación de vistas 300 5.3.9.12.6. Creación de elementos de menú 310 5.3.9.12.7. Visibilidad de bloques 311 5.3.9.12.8. Prototipos de pantalla 3125.3.9.13. Estudio del caso: Utilidades de los usuarios 313 5.3.9.13.1. Configuración de módulos 3145.3.9.14. Estudio del caso: Control de acceso 319 5.3.9.14.1. Configuración de módulos 320 5.3.9.14.2. Creación de elementos de menú 321 5.3.9.14.3. Asignación de permisos 324
  8. 8. 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.3.10.4.1. Configuración de módulos 336 5.3.10.4.2. Creación de tipos de contenido 339 5.3.10.4.3. Creación de campos 340 5.3.10.4.4. Creación de vistas 342 5.3.10.4.5. Visibilidad de bloques 344 5.3.10.4.6. Prototipos de pantalla 3455.4. DISTRIBUCION DEL SITIO 3466. EVALUACION 3506.1. GUIA DE EVALUACION HEURISTICA PARA LA VALIDACION DE LAUSABILIDAD DEL SITIO 350 6.1.1. Checklist del sitio Web 3527. CONCLUSIONES 3547.1. MANTENIMIENTO 3547.2. EXTENSIONES Y MEJORAS 3558. BIBLIOGRAFIA 3569. ANEXOS 3579.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. 99.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.1. Ficha de personal 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.1. Ficha de personal 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. 10. 101. INTRODUCCION1.1. CONCEPTOS PREVIOSEl proyecto de creación del nuevo portal Web del Departamento deTecnologías de la Información de la Universidad de Huelva parte de lanecesidad que tiene este organismo de actualizar su medio decomunicación digital.El proyecto pretende, como parte fundamental, establecer un sistema deinformación con la comunidad educativa relacionada con el Departamento,ofreciendo el conocimiento acerca de los diferentes contenidos académicosa los diferentes tipos de usuarios que accedan.Durante el desarrollo del proyecto el Departamento será entendido comonuestro cliente, el cual, bien por decisión propia o a través de unaprospección comercial de nuestra empresa ha identificado la necesidad derenovación de su portal Web.Por tanto desde la fase de Planificación estamos ya en contacto connuestro cliente y debemos establecer los canales adecuados para facilitarla comunicación y la colaboración.1.2. EL PROYECTOEl proyecto consistirá en el diseño de una aplicación Web para la gestión yorganización de un departamento universitario personalizando laherramienta Drupal.Diseñaremos el sitio Web corporativo del Departamento de Tecnologías dela 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. 11. 11Finalmente se entregará una Distribución del sistema para que pueda serimplantado en los Departamentos de la Universidad de Huelva que así lorequieran. Por tanto el sistema deberá ser personalizable para responder alas características académicas de otros departamentos de la Universidad.Efectuaremos la implementación del producto sobre el sistema de gestiónde contenidos Drupal con el objetivo de revisar las posibilidades dedesarrollo que ofrece esta herramienta.
  12. 12. 122. PLANIFICACION2.1. HERRAMIENTASPara desarrollar una aplicación Web se nos plantea la dificultad de elegiruna herramienta de desarrollo del portal que nos permita disponer de unsoporte que agilice el desarrollo, que permita el crecimiento natural de laWeb, que sea extensible, flexible, robusto y seguro y que, además, cubralas necesidades específicas que esta Web requiere permitiendo cumplircon 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 gestor2.1.1. Sistemas para la gestión de contenidosDistinguiremos entre dos vías para gestionar contenidos:1. Publicarlos en un sistema alojado (ASP) gratuito o de pago, donderesidirá toda la tecnología, y sobre el que generaremos, almacenaremos yestructuraremos nuestra información.2. Creación de un sistema de publicación propio, en nuestros propiosservidores, usando gestores de contenidos comerciales o de softwarelibre.En el primer caso somos usuarios de un servicio de publicación.En el segundo aplicamos una solución tecnológica de gestión decontenidos orientado a la difusión de información de todo tipo en Web concódigo abierto.
  13. 13. 132.1.2. Percepción del usuario acerca del CMSDesde el punto de vista del usuario interno:Sistema para gestionar, de forma uniforme, accesible, y cómoda, un sitioWeb dinámico, con actualizaciones periódicas, y sobre el que puedentrabajar una o más personas, cada una de las cuales tiene una funcióndeterminada.Desde el punto de vista del usuario del WebSitio Web dinámico, con apariencia e interfaz uniforme, con un diseñocentrado en el usuario, y que permite llevar a cabo fácilmente las tareaspara las que ha sido diseñado.2.1.3. Tipos de gestores de contenidoGeneralmente encontramos: • Galerías de imágenes y fotos • Blogs • Aula Virtual • ForosEstán centrados en realizar una tarea.Además sobre ellos se han desarrollado extensiones que permiten ampliarsus funciones básicas. Podemos funcionar con varias aplicacionesespecializadas, o pensar en usar un gestor de contenidos de propósitogeneral.Una de las tendencias de las tecnologías llamadas Web 2.0 es laposibilidad de encajar piezas de un modo sencillo, piezas de contenidosprocedentes de diferentes plataformas.En la Web nos encontramos muchos servicios de publicación y difusión decontenidos online (ASP, Aplication Server Provider).Se trata de webs que ofrecen la plataforma de publicación. Son sistemasde puesta en marcha inmediata, y con un número reducido de opciones depersonalizació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. 14. 14Nosotros usaremos una plataforma que podemos instalar para gestionarnuestro proyecto individual, y por lo tanto construir con ellas algodiferente, 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 contenidosBitácoras, Blogs o WeblogsUna bitácora o weblog es una página en la que una o varias personaspublican artículos. Normalmente usa un CMS sencillo, con una serie decaracterí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ónAlgunos de los sistemas de publicación de bitácoras más populares son lossiguientes: • 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 yhojas de estilos) que desarrollan los propios usuarios. • Textpattern http://textpattern.com/También tiene plugins y temas, y, aunque aprender a utilizarlo es un pocomás complejo, usa un sistema muy potente de edición de las páginas, ysu propio lenguaje, Textile, para el formato de los artículos.
  15. 15. 15PortalesUn portal está formado por una o varias secciones donde se publicannoticias o se actualiza el contenido periódicamente. Son un tipo de CMSmucho más heterogéneos que los weblogs, algunas de sus principalescaracterí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 ForosAlgunos de los sistemas para construir portales más populares son lossiguientes: • 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 condistintos 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 ysistema de comentarios con weblogs incorporados. • Spip http://www.spip.net/Especialmente recomendado para publicaciones tales como revistas odiarios en línea, también ofrece la típica clasificación en secciones ymucha flexibilidad en la creación de diferentes tipos de página ypresentació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 yJ2EE).
  16. 16. 16Foros • PHP BB http://www.phpbb.com/El sistema más popular de gestión de foros. Cuenta con muchísimascaracterísticas (avatares, mensajería privada...). • PUN BB http://www.punbb.org/Sistema también muy completo que además respeta los estándares ycuenta con múltiples plugins que le aportan nuevas funcionalidades, deforma que se pone incluso a la altura de PHP BB. • Simple Machines http://www.simplemachines.org/Muchas funcionalidades y buen rendimientoWikisPáginas que cualquier visitante puede editar, creando así una aplicacióncolaborativa, generalmente para construir una base de conocimiento sobreun tema en concreto. • Media Wiki http://www.mediawiki.org/wiki/MediaWiki • Tiki Wiki http://info.tikiwiki.org/tiki-index.phpE-learningCursos 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, hacerblogs y gestionar contenidos al estilo Wiki.
  17. 17. 17ECM: Gestión de contenidos en el ámbito empresarialLa AIIM (asociación para ayudar a las organizaciones a gestionar suinformación, http://www.aiim.org) ofreció en 2003 una sencilla definiciónde la gestión de contenidos empresariales (ECM: Enterprise ContentManagement):“Las tecnologías utilizadas para capturar, gestionar, guardar, entregar yconservar 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 documentosentrantes, archivado electrónico, gestión del ciclo de vida de lainformación, gestión documental, flujo de trabajo, gestión de proceso denegocios y gestión del conocimiento, se aumenta el valor añadido delconjunto para satisfacer las exigencias corporativas de productividad yrentabilidad.CMS-Watch, http://www.cmswatch.com/, edita unos informes queanalizan 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. 18. 18La lista de plataformas opensource que se analizan en el ámbito de losgestores 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 • TYPO3En 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 Management2.1.5. Funcionamiento de los CMSUn 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 enuna base de datos, y se presenta a través del navegador en páginasgeneradas en un lenguaje de programación (PHP, JSP, ASP, Perl...) queejecutan un programa en nuestro servidor.
  19. 19. 19Una de las bases de la potencia es el control separado del contenidomediante 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 unapublicación digital compleja.2.1.6. Propuestas y comparaciónDrupal 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. 20. 20Drupal y JoomlaJoomla: • 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ónTanto WordPress como Joomla presentan una menor potencia frente aDrupal 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 deDrupal como herramienta de desarrollo frente a otras existentes en elmercado también hemos tenido en cuenta la serie de evaluaciones yrecomendaciones realizadas por Weitzman, Lewis-Bowen, y Evanchik(2006), ingenieros senior de software de IBM, quienes en busca de unasolución para un Sistema de Gestión de Contenidos, realizaron unacompleta 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. 21. 212.1.7. DrupalEl 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 unode los gestores con más soporte por su comunidad de usuarios y por losprofesionales del medio.Este CMS irá conectado a una base de datos donde se alojará el contenidodel sitio que mantendrá totalmente separado el diseño del mismo.El sistema de gestión de base de datos usado será MySQL, sobre elservidor 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 últimaliberación de las versiones 5 y 6 hasta el momento). Aunque la filosofía dela comunidad de desarrollo es mantener al máximo la compatibilidad entreversiones, existen diferencias entre ambas.Cabría pensar que la elección de la versión 6 es la más apropiada, pero elritmo lento de adaptación de los módulos más populares a estasdiferencias y la lentitud en las traducciones a otros idiomas, provoca queen la decisión deban considerarse otras opciones.Primero, debemos valorar la importancia que tiene que la interfaz deadministración esté traducida totalmente a nuestro idioma, no sólo poruna cuestión de usabilidad sino de eficacia. Por otra parte, no podemospermitirnos necesitar un módulo y que éste aún no tenga una versión 6.xlista para instalar.La versión elegida será la 5.19 (la última revisión hasta la fecha). Lasrazones son obvias: es una versión estable, completa, a la que no seañadirán cambios en el core que no sean actualizaciones de seguridad, esdecir, no cambiarán funcionalidades básicas, lo que nos hace pensar en unmantenimiento más fácil. La versión 5.x es ya veterana, y tiene un ampliosoporte desde que se liberara a finales de 2006. Tiene versiones establesy ampliamente contrastadas para todos sus módulos contribuidosesenciales como puedan ser CCK y Views.
  22. 22. 22Introducción a DrupalDries Buytaert, un informático belga y autor original de Drupal, comenzó adesarrollar un gestor de contenidos para páginas dinámicas en el año2000. El sistema pretendía dar soporte a una comunidad weblog, la cualDries quiso llamar Dorp (“pueblo” en holandés). Al comprobar ladisponibilidad del dominio dorp.org, Dries tecleó mal e introdujo“drop.org” en su lugar. Le gustó tanto el nombre que decidió registrar eldominio drop.org y renombrar su CMS como Drupal. (“Drupal” es lapronunciación en inglés de la palabra gota en holandés, “Druppel”). Nueveaños más tarde, Drupal ha crecido hasta convertirse en un gestor decontenido maduro y flexible, con cientos de desarrolladores trabajando ensus mejoras y extensiones.Con Drupal podemos construir casi cualquier tipo de Web, definiendo tiposde contenidos estructurados, permisos, sistema de registro de usuarios,sistemas de categorización y aplicando una combinación personalizada demódulos complementarios.Los Contenidos son la pieza fundamental de Drupal. Tiene un enfoqueestructurado, que permite definir tipos de contenidos diferentes, sobre losque se podrán aplicar diferentes permisos, flujos de publicación,categorías y listados. La unidad de contenido es el “nodo”, queinicialmente permite texto como en un blog, pero que se amplia mediantedos 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 ysubcapítulos).La organización de información se realiza fundamentalmente a través delpotente sistema de categorías. Se definen vocabularios con términoscontrolados (con jerarquía o no) o etiquetado libre. Para cada contenidose indicará qué vocabulario o vocabularios se le pueden aplicar, y si sonopcionales u obligatorios.Las categorías permiten una navegación por diferentes tipos de contenidosvinculados por su pertenencia a un mismo dominio temático.Además, los contenidos pueden adoptar una estructura jerárquicaconvencional a través del sistema de menús, y la página Web seestructura en bloques que se sitúan en zonas según la plantilla o temausado (dos o tres columnas, cabecera, pie, etc.).
  23. 23. 23Ofrece una gestión de usuarios avanzada, en la que podremos generarun sistema abierto de alta de usuarios, o cerrado o moderado. Losusuarios se agrupan en roles, que permiten manejar los privilegios paracada una de las funcionalidades y módulos.Cada módulo de Drupal ofrece sus propias opciones de permisos, que seaplican por roles.En cuanto a la personalización de la presentación, se usan las plantillas oTemas. Cada tema se compone de unas pocas plantillas que definen lavisualización específica de nodos, bloques y página general, aplicandohojas de estilo CSS.
  24. 24. 242.2. METODOLOGIA DE DESARROLLO2.2.1. Diseño Centrado en el UsuarioPrincipios del Diseño Centrado en el UsuarioEl Diseño Centrado en el Usuario de sistemas interactivos puede regirsepor muchos y muy diversos principios. A continuación, se presenta unaserie 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 interactivesystemsEl estándar ISO 13407 constituye un marco que sirve de guía paraconseguir el desarrollo de sistemas interactivos usables incorporando elDCU durante el ciclo de vida del desarrollo.El estándar describe las siguientes cuatro actividades que se necesitandesde 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. 25. 25Y la naturaleza iterativa de estas actividades está ilustrada en lasiguiente figura:El proceso implica iterar hasta satisfacer los objetivos marcados, para loque ISO 13407 describe los principios básicos sin estipular métodosespecíficos. La secuencia de realización o seguimiento de las actividades yel nivel de esfuerzo y detalle apropiado a cada proyecto varía dependiendodel entorno de diseño y el estado del proceso del mismo.
  26. 26. 26Los elementos de la Experiencia de UsuarioJesse James Garrett, en su libro “The elements of user experience” defineuna 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 losprincipios expresados en su libro:
  27. 27. 27Existen una serie de métodos específicos desarrollados para llevar a cabolas distintas fases de un diseño Web centrado en el usuario. En la Weboficial de UsabilityNet, (un proyecto financiado por la Unión Europea paraproporcionar recursos y la creación de redes de profesionales de lausabilidad, directores y proyectos de la UE) podemos encontrar unautilidad que nos provee de una Tabla de Métodos a aplicar en cada una delas fases que contempla, dependiendo de factores como tiempodisponible, recursos, etc.Fuente: http://www.usabilitynet.org/tools/methods.htm
  28. 28. 282.2.2. Fases del ProyectoEl proyecto presenta tres condicionantes que debemos tener en cuentapara la determinación de las Fases del mismo, así como del tiempo delque 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 lametodología del Diseño Centrado en el Usuario en respuesta a loscondicionantes que tenemos.
  29. 29. 29El siguiente diagrama integra las etapas del proyecto:
  30. 30. 30Como 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 sediseñe debe ser contrastado con el cliente y comprobar que se ciñe a losresultados del análisis de requisitos.Las fases de “Implementación” y de “Evaluación” serán igualmente cíclicase iterativas hasta que el proceso quede completado con la fase de“Documentación de la aplicación” en donde se realizará la documentaciónentregable al cliente y el “Lanzamiento del Sitio”, es decir, la puesta enexplotación del sistema hacia la audiencia.Asignación de tiemposLa siguiente tabla muestra la estimación de tiempo en base a días quepodemos 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 30Utilizaremos un diagrama de Gantt con el objetivo de mostrar el tiempode dedicación previsto para las diferentes fases del proyecto a lo largo deltiempo total que se ha determinado consistente en 30 días laborales.Mostraremos dos variedades del mismo diagrama para visualizar mejor lasetapas a desarrollar en base a los días y a una vista global del mes detrabajo.Estas fechas han sido previamente consensuadas con el cliente a fin decumplir con los plazos de colaboración necesaria para el avance delproyecto, fundamentalmente en las etapas preliminares a la propiaimplementación del sistema.
  31. 31. 31Diagrama de Gantt con vista mensual:Diagrama de Gantt con vista diaria:
  32. 32. 322.3. VIABILIDAD2.3.1. Viabilidad legalDrupal se distribuye bajo la licencia GNU General Public License (GPL), ypor lo tanto es software libre.2.3.2. Viabilidad tecnológicaLos requerimientos mínimos y recomendaciones para un sistema quesoporte Drupal son: • Servidor Web Apache • PHP • Servidor de Bases de Datos MySQLCon la finalidad de que el cliente pueda conocer en tiempo real el estatusdel proyecto y facilitar la colaboración del mismo durante su desarrollocontrataremos un servicio de hosting para alojar el sitio Web objeto delproyecto, tomando todas las precauciones necesarias para protegerla delos buscadores hasta su lanzamiento.Contrataremos un dominio y el servicio deberá de disponer de variascuentas 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 quefueron contratados para su ejecución, alojando el cliente la aplicación ensus propios servidores u otros recursos que considere oportunos.
  33. 33. 332.3.3. Viabilidad económicaEstimació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-programadorPodríamos incluir otras figuras como director de proyecto, especialista enbases 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 cincofunciones básicas estimadas, por tanto el coste de la hora de esta únicapersona debería de ser la suma de las capacidades y desempeños de todoun equipo: 11,90 € * 5 = 59,5 €/hora • Otras estimaciones de costes de producción en base mensual: Recurso Coste mensualAlquiler de oficina 700 €Luz 80 €Teléfono 30 €Alquiler del servicio hosting multicuenta 29 €Alquiler de dominio 10,44 €/añoTotal 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. 34. 34Resultado: Componente Coste240 horas de trabajo x 59,5 €/hora 14.280 €Otros costes estimados 849,44 €Total 15.129,44 €Estimación del precio final al clienteHoy en día un producto hardware de consumo fluctúa en unos márgenescomerciales que pueden ir del 5% al 15% de promedio.El proyecto incluye una Distribución libre de la aplicación que puede serinstalada en otros Departamentos de la Universidad cuya potencialidadcomo clientes bajaría en este sentido.El margen comercial a aplicar no debería ser menor del 25%.Resultado: Componente PrecioEstimació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 mantenimientoUna acción futura para la figura del ejecutivo de cuentas podría consistiren la negociación de un contrato de mantenimiento para la aplicación conlos diversos Departamentos que la instalen.
  35. 35. 353. ANALISIS DE REQUISITOS3.1. ENTREVISTA CON EL CLIENTEIdentificamos el interlocutor válido del Departamento; será la persona queactuará como facilitador durante el desarrollo del proyecto y con quiéndeberemos estar en contacto de forma continuada en todas sus fases.Puede tratarse de una o varias personas; en nuestro caso estableceremosque se trata de una sola y que actúa como representante de los decisoresfinales, filtrando la información y colaborando activamente en la definiciónde la misión y los objetivos del sitio Web.3.2. EVALUACION DE OTROS SITIOS WEBUna de las técnicas utilizadas en la ejecución de proyectos relacionadoscon la elaboración de sitios Web consiste en la evaluación de productossimilares al que vamos a desarrollar, con el fin de identificar suscaracterísticas y facilitar la toma de decisiones por parte del cliente encuanto a sus propios requerimientos.Muestra externaTomamos como muestra dos departamentos universitarios, uno de laUniversidad de Sevilla y otro de la Universidad de Granada.Los aspectos que se consideraron más apropiados para evaluar en estecaso fueron los referentes a la estructura del sitio, organización decontenidos y navegación.
  36. 36. 36Fuente: http://www.lsi.us.es/Fuente: http://decsai.ugr.es/
  37. 37. 37Diagramamos en papel el mapa del sitio y situamos las etiquetas decontenidos. Posteriormente se presentaron estos diagramas a nuestrocliente con el fin de concretar los primeros contenidos de nuestro portal.Ejemplo del diagramado en papel:
  38. 38. 38Muestra internaHemos usado el portal Web de la Universidad de Huelva como muestrafinal 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 departamentoFuente: http://www.uhu.es/sec.general/Normativa/Normativa.htm  La Oferta Académica del departamentoFuente:http://www.uhu.es/estudios/ofertaacademica/ofertaacademica.htm
  39. 39. 393.3 PERFIL DE LOS USUARIOSDentro del proceso de la metodología del Diseño Centrado en el Usuarioexiste un aspecto necesario: establecer los perfiles de uso de modo quetoda 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 oentrevista con los distintos usuarios de forma experimental; en estesentido también se puede usar el método de encuesta. Estos métodosestarán condicionados por los medios económicos y el periodo de tiempocon 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” endonde definiríamos arquetipos de usuarios que representen patrones deconducta, objetivo y necesidades, y procedemos a una definición directade perfiles con la ayuda de nuestro facilitador durante el proceso deentrevista y el análisis de la comunidad universitaria.Teniendo en cuenta a los tipos de personas que atiende la Universidad deHuelva como institución de educación superior, se han determinado, enbase a las diversas necesidades de información y tareas que puedenrealizar en el sitio Web del Departamento de Tecnologías de laInformación en particular y en un Departamento Universitario en generallos 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. 40. 403.4. ROLESDel estudio de los distintos perfiles de los usuarios extraemos unadefinición de roles del sistema que posteriormente nos servirá paraclasificar los objetivos del sitio tanto como Web que es visitada porcualquier 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. 41. 413.5. MISION DEL SITIOEl sitio Web del Departamento de Tecnologías de la Información de laUniversidad de Huelva facilitará a los usuarios, tanto internos comoexternos, el acceso a la información corporativa y a los serviciosacadémicos que ofrece la entidad. El personal adscrito al Departamentogestionará en base a sus distintos niveles de responsabilidad lainformación que se presente a la audiencia del sitio.3.6. OBJETIVOS DEL SITIODe la información recabada de la entrevista con el profesor representantedel departamento así como del estudio del perfil de los usuarios y suagrupación en roles obtenemos el conjunto de requisitos que debe decumplir el sitio Web.3.6.1. Requisitos del sitio Web para el usuario finalLa relación de estos requisitos se establece en base a la visión de losusuarios finales del Web, entendiendo que agrupa tanto al conjunto deusuarios anónimos como a los distintos roles que componen el grupo deusuarios 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. 42. 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. 43. 433.6.2. Requisitos del sitio Web para los usuarios con accesoautorizadoLa relación de estos requisitos se establece en base a la visión de losusuarios identificados del Web como sistema de gestión de contenidos endonde cada uno de los roles podrá ejecutar una serie de accionesdependiendo de los permisos que le hayan sido adjudicados por eladministrador del sistema.Con el fin de clarificar los distintos requisitos establecemos la siguientetabla:Acceso identificado de los UsuariosPermisos del usuario Profesores Director Secretario Estudiantes PASEditar su propia ficha de personal • • •Editar su propia asignatura • • •Crear y Editar su propio ProyectoFC/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 deDepartamento •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 principalesresponsabilidades 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. 44. 444. DISEÑO4.1. INVENTARIO DE CONTENIDOS Y ETIQUETADODe acuerdo a los resultados obtenidos en la fase de “Análisis deRequisitos” se propone una estructura de organización de contenidos y seestablece el siguiente sistema de organización para el sitio Web delDepartamento.Representaremos así mismo el etiquetado tanto de los distintos menús yelementos de menú como de los campos que componen las fichas decontenido que se presentan al usuario cuando éste accede a uno de losítems representados como vista de tabla o como vista de lista deelementos.Las etiquetas las rotularemos en azul para su mejor identificación en latabla.
  45. 45. 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 oAcceso 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. 46. 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 “Asignaturas de los estudios”: 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 “Asignaturas de los estudios”: 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 “Asignaturas de los estudios”: 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. 47. 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 Despacho Permanente, Consejo de departamento), Administrativos Teléfono Foto usuario, Teléfono, Despacho, Web, Horario Horario de tutoría. *Búsqueda por texto *Á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 Despacho Permanente, Consejo de departamento), Becarios Teléfono Foto usuario, Teléfono, Despacho, Web, Horario Horario de tutoría. *Búsqueda por texto “Formulario de Contacto” con el Becario *Área
  48. 48. 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 Despacho Permanente, Consejo de departamento), Teléfono Foto usuario, Teléfono, Despacho, Web, Estudiantes Horario Horario de tutoría. *Búsqueda por texto *Á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 deMenú 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. 49. 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 UsuariosIconos de acciones de impresión, envío por e-mail y descarga en PDF de las Fichas de contenido que se presentan al usuario finalCarga de archivos en los distintos Tipos de contenido que generarán los usuarios con acceso identificadoControl 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. 50. 504.2. DISEÑO DE LA INFORMACIONPara el presente proyecto, en el cual estamos aplicando una metodologíade desarrollo centrada en el usuario, hemos realizado un diagrama de laarquitectura de la información del sitio en donde se muestra su estructuray la representación de etiquetas que hemos definido durante la realizacióndel inventario de contenidos.Dentro del nivel de detalle del diagrama representaremos las vistas detabla o vistas de lista generales o particulares de la ficha de contenido deun elemento, sin incluir los campos propios de dicha ficha, y marcandoaquellos campos de las vistas que actuarán como link hacia la ficha delelemento.Agruparemos en el mismo bloque los nombres de aquellas tablas cuyoetiquetado de campos sea el mismo para todas ellas con el fin de facilitarla comprensión del diagrama.
  51. 51. 51
  52. 52. 524.3 DISEÑO VISUALUno de los aspectos clave para cumplir con la Misión del sitio Web delDepartamento de Tecnologías de la Información es respetar la líneacorporativa en el look & feel del sitio de tal forma que el sitio Web quedeintegrado bajo la “Imagen de Marca” de la Universidad de Huelva.La información de identidad de marca que aplicaremos ha sido obtenidade 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 procesode Implementación del sitio.Utilizaremos CSS durante dicha fase.
  53. 53. 53Diseño de la página principalEn el diseño de la página principal aplicamos las directrices referentes aidentidad y misión del sitio: qué es este sitio y para qué es, así como unadistribución del contenido que permita una respuesta satisfactoria delDepartamento a las expectativas de conocimiento que el usuario queaccede al sitio Web del mismo, espera obtener.Un sitio Web bien estructurado y con una jerarquía clara de contenidos esel aspecto prioritario, complementado durante la navegación por el uso delas breadcrumbs (migas de pan) que deben fundamentalmente de darnosuna visión acerca del nivel donde nos encontramos durante la navegacióny posibilitarnos el regreso a la página principal.Aspecto corporativo: logos y coloresHemos usado la anterior página Web de la Universidad de Huelva comoejemplo para la composición de la línea corporativa que queremos paranuestro sitio Web extrayendo de la misma los logos de la universidad asícomo los colores corporativos indicados en la misma, en la dirección Webhttp://www.uhu.es/sevirtual/#recursos_disenoResolución de pantallaEl tamaño de pantalla usado es de ancho fijo para pantallas con unaresolución mínima de 1024 píxeles, teniendo en cuenta el borde delnavegador y el scroll el ancho de la zona de contenidos visible de la Webes 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ásarriba de la mitad de la pantalla respecto al ojo del usuario.
  54. 54. 54ImágenesEs recomendable dedicar entre el 5 y el 15% de la página de inicio aimágenes. Podrían necesitarse más si su contenido fuera muy visual.Para el sitio Web del Departamento de Tecnologías de la Informaciónteníamos que tener en cuenta también la aparición de imágenes aleatoriasen el bloque inferior al nombre del departamento y su personalización porparte del mismo por parte del administrador del sistema de gestión decontenidos.Dichas imágenes deben de tener una resolución máxima que se ajusteindependientemente de su formato original al área de contenido al que seadscriben. Es un aspecto que se tendrá en cuenta en la fase deImplementación. A este respecto decidimos cargar imágenes de prueba enblanco 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 delmismo.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. 55. 554.4. PROTOTIPADOEn esta etapa se realizan prototipos o wireframes, término en inglés, delsitio Web. Dichos prototipos describen cómo se verían las páginasindividualmente desde una perspectiva arquitectónica.Trataremos de especificar y mostrar claramente en dónde estaránubicados cada uno de los elementos que componen una determinadapágina como respuesta al inventario de contenidos y etiquetado yaefectuado.Su realización ayudará también a probar las ideas en contexto,permitiendo visualizar posibilidades y hacer cambios, para evitar en unfuturo un posible rediseño entero del sitio. Igualmente, los wireframescontribuirán a decidir cómo agrupar y ordenar los componentes delcontenido.Crearemos wireframes para las páginas más importantes del sitio, talescomo la página de inicio y los principales elementos de los menús.Identificaremos la posición de ciertos elementos en las páginas decontenido del sitio. El objetivo no será crear wireframes para todas laspáginas del sitio, sino para las que configuran la estructura común de laWeb.Para no demorar el proceso y por tanto cumplir con los tiempos asignadossin incrementar los costos presupuestados realizaremos prototipos de bajafidelidad de las principales páginas del sitio y posteriormente uno demedia fidelidad de la página principal del sitio en donde aplicaremos losrequerimientos de look & feel planteados por el Departamento.En cada uno de los prototipos de baja fidelidad se definió mediantecuadros y textos donde debía ir ubicado cada elemento de navegación,búsqueda y contenido. De igual modo hemos usado una tabla deanotaciones para explicar algunos contenidos o interacciones.En el prototipo de media fidelidad hemos aplicado la informaciónsuministrada por el Departamento junto con sus requerimientos,siguiendo el apartado de diseño visual (colores y elementos gráficos de laUniversidad de Huelva).Cabe destacar en este punto que para realizar cada prototipo se tuvieronen cuenta los resultados del proceso de investigación previa. Así mismodichos prototipos, siguiendo con una metodología de Diseño Centrado enel Usuario, fueron presentados al Departamento para su revisión ymodificación previa a la fase de Implementación.
  56. 56. 56En total se han realizado 13 prototipos de baja fidelidad y un prototipo demedia fidelidad.
  57. 57. 574.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. 58. 584.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. 59. 594.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. 60. 604.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. 61. 614.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. 62. 624.4.6. Prototipo 6: Docencia. Tutorías Cage daa o Huelvaa OGO c e so oce Departamento dede Investigación Departamento de Tecnologías de la Tecnologías de la Información Universidad
  63. 63. 634.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. 64. 644.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 Tecnologías de la Tecnologías de la Información Grupos g p Huelvade Universidad g

×