trabajo fin de carrera gestores de contenido web: wordpress y

UNIVERSIDAD DE LEÓNCURSO ACADÉMICO 2009/2010

Trabajo Fin de CarreraGestores de Contenido Web:

Wordpress y Drupal

DOCUMENTACIÓN

María Cañizares OrdásTrabajo Fin de Carrera

Escuela de Ingenierías Industrial e Informática

UNIVERSIDAD DE LEÓN

El presente documento es presentado como Trabajo de Fin de Carrera por Dña. MaríaCañizares Ordás, alumna de la Escuela de Ingenierías Industrial e Informática de laUniversidad de León, con el fin de obtener el título de Ingeniero en Informática. Elproyecto “Gestores de Contenido Web: Wordpress y Drupal” ha sido tutelado porD. Rafael Santamaría Sánchez perteneciente al Departamento de Matemáticas de laUniversidad de León.

Vo Bo Tutor

Dr. D. Rafael Santamaría Sánchez

Vo Bo Oficina Técnica

Dr. D. Javier Alfonso Cendón

Autor

Dña. María Cañizares Ordás

León, 10 de junio de 2010

5

ResumenEl presente proyecto se plantea con un doble objetivo:Por una parte como proyecto de investigación en el campo de las tecnologías de la

información, donde se ha profundizado en los diferentes gestores de contenidos (CMS)aprendiendo cuáles son las plataformas más adecuadas para la resolución de diversosproblemas, teniendo conocimiento sobre su gestión e implantación así como las tenden-cias futuras de desarrollo. Y por otra parte suplir las necesidades actuales del Departa-mento de Matemáticas en el campo de la tecnología e Internet.

En este proyecto, hemos elegido y nos hemos centrado en el manejo de Wordpress yDrupal. Wordpress ha sido elegido por considerarlo como el CMS ligero más adecuadopara la resolución de problemas simples. Cabe destacar que el esfuerzo necesario paraun uso inicial de Wordpress resulta bajo, pero crece exponencialmente cuando se inten-tan resolver problemas de mayor magnitud. Drupal, por otro lado, ha sido elegido porconsiderarlo como un CMS mucho más estructurado y con la mejor capacidad de resolu-ción de problemas, ya que resulta totalmente configurable y adaptable a las necesidadesde los usuarios. Aunque implique un esfuerzo mayor a priori, para comprender su meto-dología y funcionamiento, en poco tiempo el esfuerzo es compensado y las necesidadesde aprendizaje para la resolución de problemas se reducen enormemente.

A lo largo de este proyecto como resumen del trabajo realizado, podemos destacar lasdiferentes labores de instalación, implantación y administración de diversos gestores decontenido y sus tecnologías allegadas, para conseguir las soluciones más óptimas segúnla recopilación de necesidades detectadas antes y durante el desarrollo del proyecto.Entre las tecnologías utilizadas resalto el aprendizaje y la utilización de php, mysql,apache y css, que han resultado necesarias para el buen fin de este trabajo de fin decarrera.

Como conclusión más importante, fruto del trabajo de investigación realizado, cabedestacar el cambio voraz que se está experimentado en los sistemas de contenido. Has-ta ahora, el registro de un usuario (también llamado perfil) en un gestor de contenidocontiene pocos datos, no relaccionables entre sí.

Sin embargo, en el futuro, y una muestra de ello es Drupal, la parte de programaciónweb referida al perfil del usuario pasará a albergar contenido realmente relaccionable.Una funcionalidad que hasta ahora no ha sido implementada en ningún CMS y queDrupal incluirá en su nueva versión Drupal7, desarrollo en el que este proyecto ha con-seguido implicarme.

María Cañizares Ordás Gestores de Contenido Web: Wordpress y Drupal

Índice 7

Índice

0. Introducción 130.1. Antecedentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130.2. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130.3. Situación del problema . . . . . . . . . . . . . . . . . . . . . . . . . . 140.4. Solución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

0.4.1. Implementación . . . . . . . . . . . . . . . . . . . . . . . . . . 150.5. Organización de la memoria . . . . . . . . . . . . . . . . . . . . . . . 15

1. Conceptos previos y herramientas 161.1. WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.2. Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.2.1. Motivos para usar Drupal . . . . . . . . . . . . . . . . . . . . . 171.3. Otras herramientas utilizadas . . . . . . . . . . . . . . . . . . . . . . . 18

1.3.1. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181.3.2. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2. Desarrollo 192.1. Gestor de contenidos CMS con WordPress . . . . . . . . . . . . . . . . 19

2.1.1. Instalación de Wordpress . . . . . . . . . . . . . . . . . . . . . 192.1.2. Configuración del sitio . . . . . . . . . . . . . . . . . . . . . . 202.1.3. Instalación de plugins . . . . . . . . . . . . . . . . . . . . . . 202.1.4. Instalación de la plantilla . . . . . . . . . . . . . . . . . . . . . 21

2.2. Gestor de contenidos CMS con Drupal . . . . . . . . . . . . . . . . . . 222.2.1. Instalación básica de Drupal . . . . . . . . . . . . . . . . . . . 222.2.2. Instalación del idioma . . . . . . . . . . . . . . . . . . . . . . 392.2.3. Configuración de perfiles . . . . . . . . . . . . . . . . . . . . . 482.2.4. Configuraciones generales del sitio Web . . . . . . . . . . . . . 732.2.5. Ejemplo de instalación de un módulo . . . . . . . . . . . . . . 772.2.6. Configuraciones esenciales . . . . . . . . . . . . . . . . . . . . 832.2.7. Configuración de la Intranet . . . . . . . . . . . . . . . . . . . 862.2.8. Creando las secciones públicas . . . . . . . . . . . . . . . . . . 1052.2.9. Instalación del CCK y VIEWS . . . . . . . . . . . . . . . . . . 1242.2.10. Instalación de la plantilla . . . . . . . . . . . . . . . . . . . . . 139

2.3. Desarrollo de plantillas para Wordpress y Drupal . . . . . . . . . . . . 1422.4. Estado final del Proyecto . . . . . . . . . . . . . . . . . . . . . . . . . 143

Síntesis del trabajo 147

Referencias 149


Índice de figuras 8

Índice de figuras1. Relación entre el conocimiento y la Web. . . . . . . . . . . . . . . . . 131.1. Icono de WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.2. Icono de Drupal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171.3. Icono de PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.1. Formulario1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.2. Formulario2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.3. Web Physcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.4. Búsqueda de Drupal en google. . . . . . . . . . . . . . . . . . . . . . . 232.5. Web oficial de Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.6. Eleccion de versión de Drupal . . . . . . . . . . . . . . . . . . . . . . 242.7. Lista de bugs de Drupal 7 . . . . . . . . . . . . . . . . . . . . . . . . . 242.8. Configuración de MAMP . . . . . . . . . . . . . . . . . . . . . . . . . 252.9. Configuración de MAMP2 . . . . . . . . . . . . . . . . . . . . . . . . 262.10. Configuración de MAMP3 . . . . . . . . . . . . . . . . . . . . . . . . 262.11. Configuración de la base de datos . . . . . . . . . . . . . . . . . . . . 272.12. Modificación de fichero host . . . . . . . . . . . . . . . . . . . . . . . 272.13. Modificación de fichero host2 . . . . . . . . . . . . . . . . . . . . . . 272.14. Modificación de fichero host3 . . . . . . . . . . . . . . . . . . . . . . 282.15. Escritura del archivo de configuración en vi . . . . . . . . . . . . . . . 282.16. Comprobación de la instalación en local . . . . . . . . . . . . . . . . . 282.17. Instalación de los ficheros al directorio raíz de MAMP . . . . . . . . . 292.18. Instalación de los ficheros al directorio raíz de MAMP2 . . . . . . . . . 292.19. Instalación de los ficheros al directorio raíz de MAMP3 . . . . . . . . . 292.20. Instalación de los ficheros al directorio raíz de MAMP4 . . . . . . . . . 302.21. Instalación de los ficheros al directorio raíz de MAMP5 . . . . . . . . . 302.22. Instalación de Drupal 6 . . . . . . . . . . . . . . . . . . . . . . . . . . 312.23. Modificación del archivo de configuración . . . . . . . . . . . . . . . . 312.24. Modificación del archivo de configuración2 . . . . . . . . . . . . . . . 322.25. Modificación del archivo de configuración3 . . . . . . . . . . . . . . . 322.26. Modificación del archivo de configuración4 . . . . . . . . . . . . . . . 332.27. Modificación del archivo de configuración5 . . . . . . . . . . . . . . . 332.28. Modificación del archivo de configuración6 . . . . . . . . . . . . . . . 332.29. Modificación del archivo de configuración7 . . . . . . . . . . . . . . . 342.30. Modificación del archivo de configuración8 . . . . . . . . . . . . . . . 342.31. Configuración de la base de datos . . . . . . . . . . . . . . . . . . . . 352.32. Configuración de la base de datos2 . . . . . . . . . . . . . . . . . . . . 362.33. Configuración de la base de datos3 . . . . . . . . . . . . . . . . . . . . 362.34. Configuración de la base de datos4 . . . . . . . . . . . . . . . . . . . . 372.35. Configuración de los enlaces relativos . . . . . . . . . . . . . . . . . . 382.36. Configuración del sitio Web . . . . . . . . . . . . . . . . . . . . . . . 392.37. Configuración del sitio Web2 . . . . . . . . . . . . . . . . . . . . . . . 402.38. Configuración del sitio Web3 . . . . . . . . . . . . . . . . . . . . . . . 412.39. Configuración del idioma . . . . . . . . . . . . . . . . . . . . . . . . . 42



2.40. Configuración del idioma2 . . . . . . . . . . . . . . . . . . . . . . . . 432.41. Configuración del idioma3 . . . . . . . . . . . . . . . . . . . . . . . . 432.42. Configuración del idioma5 . . . . . . . . . . . . . . . . . . . . . . . . 442.43. Configuración del idioma6 . . . . . . . . . . . . . . . . . . . . . . . . 452.44. Configuración del idioma7 . . . . . . . . . . . . . . . . . . . . . . . . 452.45. Configuración del idioma8 . . . . . . . . . . . . . . . . . . . . . . . . 462.46. Configuración del idioma9 . . . . . . . . . . . . . . . . . . . . . . . . 462.47. Configuración del idioma10 . . . . . . . . . . . . . . . . . . . . . . . 472.48. Configuración del idioma11 . . . . . . . . . . . . . . . . . . . . . . . 472.49. Configuración del idioma12 . . . . . . . . . . . . . . . . . . . . . . . 472.50. Configuración del idioma13 . . . . . . . . . . . . . . . . . . . . . . . 482.51. Configuración del perfil . . . . . . . . . . . . . . . . . . . . . . . . . . 492.52. Configuración del perfil2 . . . . . . . . . . . . . . . . . . . . . . . . . 492.53. Configuración del perfil3 . . . . . . . . . . . . . . . . . . . . . . . . . 502.54. Configuración del perfil4 . . . . . . . . . . . . . . . . . . . . . . . . . 512.55. Configuración del perfil5 . . . . . . . . . . . . . . . . . . . . . . . . . 522.56. Configuración del perfil6 . . . . . . . . . . . . . . . . . . . . . . . . . 522.57. Configuración del perfil7 . . . . . . . . . . . . . . . . . . . . . . . . . 532.58. Configuración del perfil8 . . . . . . . . . . . . . . . . . . . . . . . . . 542.59. Configuración del perfil9 . . . . . . . . . . . . . . . . . . . . . . . . . 552.60. Configuración del perfil10 . . . . . . . . . . . . . . . . . . . . . . . . 562.61. Configuración del perfil11 . . . . . . . . . . . . . . . . . . . . . . . . 572.62. Configuración del perfil12 . . . . . . . . . . . . . . . . . . . . . . . . 582.63. Configuración del perfil13 . . . . . . . . . . . . . . . . . . . . . . . . 592.64. Configuración del perfil14 . . . . . . . . . . . . . . . . . . . . . . . . 602.65. Configuración del perfil15 . . . . . . . . . . . . . . . . . . . . . . . . 612.66. Configuración del perfil16 . . . . . . . . . . . . . . . . . . . . . . . . 612.67. Configuración del perfil17 . . . . . . . . . . . . . . . . . . . . . . . . 622.68. Configuración del perfil18 . . . . . . . . . . . . . . . . . . . . . . . . 632.69. Configuración del perfil19 . . . . . . . . . . . . . . . . . . . . . . . . 642.70. Configuración del perfil20 . . . . . . . . . . . . . . . . . . . . . . . . 652.71. Configuración del perfil21 . . . . . . . . . . . . . . . . . . . . . . . . 652.72. Configuración del perfil22 . . . . . . . . . . . . . . . . . . . . . . . . 662.73. Perfil de Miguel Carriegos en la Web anterior . . . . . . . . . . . . . . 672.74. Configuración del perfil23 . . . . . . . . . . . . . . . . . . . . . . . . 682.75. Configuración del perfil24 . . . . . . . . . . . . . . . . . . . . . . . . 692.76. Configuración del perfil25 . . . . . . . . . . . . . . . . . . . . . . . . 702.77. Configuración del perfil26 . . . . . . . . . . . . . . . . . . . . . . . . 712.78. Configuración del perfil27 . . . . . . . . . . . . . . . . . . . . . . . . 722.79. Configuración del perfil28 . . . . . . . . . . . . . . . . . . . . . . . . 732.80. Configuración básicas1 . . . . . . . . . . . . . . . . . . . . . . . . . . 742.81. Configuración básicas4 . . . . . . . . . . . . . . . . . . . . . . . . . . 752.82. Configuración básicas7 . . . . . . . . . . . . . . . . . . . . . . . . . . 752.83. Configuración básicas12 . . . . . . . . . . . . . . . . . . . . . . . . . 762.84. Configuración básicas16 . . . . . . . . . . . . . . . . . . . . . . . . . 772.85. Ejemplo de instalación del módulo cron1 . . . . . . . . . . . . . . . . 78



2.86. Ejemplo de instalación del módulo cron2 . . . . . . . . . . . . . . . . 782.87. Ejemplo de instalación del módulo cron3 . . . . . . . . . . . . . . . . 792.88. Ejemplo de instalación del módulo cron4 . . . . . . . . . . . . . . . . 792.89. Ejemplo de instalación del módulo cron5 . . . . . . . . . . . . . . . . 792.90. Ejemplo de instalación del módulo cron6 . . . . . . . . . . . . . . . . 802.91. Ejemplo de instalación del módulo cron7 . . . . . . . . . . . . . . . . 802.92. Ejemplo de instalación del módulo cron8 . . . . . . . . . . . . . . . . 802.93. Ejemplo de instalación del módulo cron9 . . . . . . . . . . . . . . . . 812.94. Ejemplo de instalación del módulo cron10 . . . . . . . . . . . . . . . . 812.95. Ejemplo de instalación del módulo cron12 . . . . . . . . . . . . . . . . 812.96. Ejemplo de instalación del módulo cron13 . . . . . . . . . . . . . . . . 822.97. Ejemplo de instalación del módulo cron14 . . . . . . . . . . . . . . . . 832.98. Ejemplo de instalación del módulo cron15 . . . . . . . . . . . . . . . . 832.99. Ajustes esenciales1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 842.100.Ajustes esenciales3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852.101.Ajustes esenciales5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852.102.Configuración de la Intranet1 . . . . . . . . . . . . . . . . . . . . . . . 862.103.Configuración de la Intranet2 . . . . . . . . . . . . . . . . . . . . . . . 862.104.Configuración de la Intranet3 . . . . . . . . . . . . . . . . . . . . . . . 872.105.Configuración de la Intranet4 . . . . . . . . . . . . . . . . . . . . . . . 882.106.Configuración de la Intranet5 . . . . . . . . . . . . . . . . . . . . . . . 882.107.Configuración de la Intranet6 . . . . . . . . . . . . . . . . . . . . . . . 882.108.Configuración de la Intranet7 . . . . . . . . . . . . . . . . . . . . . . . 892.109.Configuración de la Intranet8 . . . . . . . . . . . . . . . . . . . . . . . 892.110.Configuración de la Intranet9 . . . . . . . . . . . . . . . . . . . . . . . 892.111.Configuración de la Intranet10 . . . . . . . . . . . . . . . . . . . . . . 892.112.Configuración de la Intranet13 . . . . . . . . . . . . . . . . . . . . . . 902.113.Configuración de la Intranet14 . . . . . . . . . . . . . . . . . . . . . . 902.114.Configuración de la Intranet13 . . . . . . . . . . . . . . . . . . . . . . 902.115.Configuración de la Intranet14 . . . . . . . . . . . . . . . . . . . . . . 902.116.Configuración de la Intranet15 . . . . . . . . . . . . . . . . . . . . . . 912.117.Configuración de la Intranet16 . . . . . . . . . . . . . . . . . . . . . . 912.118.Configuración de la Intranet17 . . . . . . . . . . . . . . . . . . . . . . 922.119.Configuración de la Intranet18 . . . . . . . . . . . . . . . . . . . . . . 932.120.Configuración de la Intranet19 . . . . . . . . . . . . . . . . . . . . . . 932.121.Configuración de la Intranet20 . . . . . . . . . . . . . . . . . . . . . . 942.122.Configuración de la Intranet21 . . . . . . . . . . . . . . . . . . . . . . 942.123.Configuración de la Intranet22 . . . . . . . . . . . . . . . . . . . . . . 942.124.Configuración de la Intranet23 . . . . . . . . . . . . . . . . . . . . . . 952.125.Configuración de la Intranet24 . . . . . . . . . . . . . . . . . . . . . . 952.126.Configuración de la Intranet25 . . . . . . . . . . . . . . . . . . . . . . 962.127.Configuración de la Intranet26 . . . . . . . . . . . . . . . . . . . . . . 972.128.Configuración de la Intranet27 . . . . . . . . . . . . . . . . . . . . . . 972.129.Configuración de la Intranet28 . . . . . . . . . . . . . . . . . . . . . . 982.130.Configuración de la Intranet29 . . . . . . . . . . . . . . . . . . . . . . 982.131.Configuración de la Intranet30 . . . . . . . . . . . . . . . . . . . . . . 99



2.132.Configuración de la Intranet31 . . . . . . . . . . . . . . . . . . . . . . 1002.133.Configuración de la Intranet32 . . . . . . . . . . . . . . . . . . . . . . 1012.134.Configuración de la Intranet33 . . . . . . . . . . . . . . . . . . . . . . 1012.135.Configuración de la Intranet34 . . . . . . . . . . . . . . . . . . . . . . 1022.136.Configuración de la Intranet35 . . . . . . . . . . . . . . . . . . . . . . 1022.137.Configuración de la Intranet36 . . . . . . . . . . . . . . . . . . . . . . 1022.138.Configuración de la Intranet37 . . . . . . . . . . . . . . . . . . . . . . 1032.139.Configuración de la Intranet38 . . . . . . . . . . . . . . . . . . . . . . 1032.140.Configuración de la Intranet39 . . . . . . . . . . . . . . . . . . . . . . 1042.141.Configuración de la Intranet40 . . . . . . . . . . . . . . . . . . . . . . 1042.142.Creando las secciones públicas1 . . . . . . . . . . . . . . . . . . . . . 1052.143.Creando las secciones públicas2 . . . . . . . . . . . . . . . . . . . . . 1062.144.Creando las secciones públicas3 . . . . . . . . . . . . . . . . . . . . . 1072.145.Creando las secciones públicas4 . . . . . . . . . . . . . . . . . . . . . 1082.146.Creando las secciones públicas5 . . . . . . . . . . . . . . . . . . . . . 1092.147.Creando las secciones públicas6 . . . . . . . . . . . . . . . . . . . . . 1102.148.Creando las secciones públicas7 . . . . . . . . . . . . . . . . . . . . . 1112.149.Creando las secciones públicas8 . . . . . . . . . . . . . . . . . . . . . 1122.150.Creando las secciones públicas9 . . . . . . . . . . . . . . . . . . . . . 1132.151.Creando las secciones públicas10 . . . . . . . . . . . . . . . . . . . . . 1142.152.Creando las secciones públicas11 . . . . . . . . . . . . . . . . . . . . . 1152.153.Creando las secciones públicas12 . . . . . . . . . . . . . . . . . . . . . 1152.154.Creando las secciones públicas13 . . . . . . . . . . . . . . . . . . . . . 1162.155.Creando las secciones públicas14 . . . . . . . . . . . . . . . . . . . . . 1172.156.Creando las secciones públicas15 . . . . . . . . . . . . . . . . . . . . . 1182.157.Creando las secciones públicas16 . . . . . . . . . . . . . . . . . . . . . 1192.158.Creando las secciones públicas17 . . . . . . . . . . . . . . . . . . . . . 1202.159.Creando las secciones públicas18 . . . . . . . . . . . . . . . . . . . . . 1212.160.Creando las secciones públicas19 . . . . . . . . . . . . . . . . . . . . . 1212.161.Creando las secciones públicas20 . . . . . . . . . . . . . . . . . . . . . 1222.162.Creando las secciones públicas21 . . . . . . . . . . . . . . . . . . . . . 1232.163.Creando las secciones públicas22 . . . . . . . . . . . . . . . . . . . . . 1232.164.Creando las secciones públicas23 . . . . . . . . . . . . . . . . . . . . . 1242.165.Creando las secciones públicas24 . . . . . . . . . . . . . . . . . . . . . 1242.166.Instalación del CCK y VIEWS1 . . . . . . . . . . . . . . . . . . . . . 1252.167.Instalación del CCK y VIEWS2 . . . . . . . . . . . . . . . . . . . . . 1252.168.Instalación del CCK y VIEWS3 . . . . . . . . . . . . . . . . . . . . . 1262.169.Instalación del CCK y VIEWS4 . . . . . . . . . . . . . . . . . . . . . 1272.170.Instalación del CCK y VIEWS5 . . . . . . . . . . . . . . . . . . . . . 1282.171.Instalación del CCK y VIEWS6 . . . . . . . . . . . . . . . . . . . . . 1292.172.Instalación del CCK y VIEWS7 . . . . . . . . . . . . . . . . . . . . . 1292.173.Instalación del CCK y VIEWS8 . . . . . . . . . . . . . . . . . . . . . 1302.174.Instalación del CCK y VIEWS9 . . . . . . . . . . . . . . . . . . . . . 1312.175.Instalación del CCK y VIEWS10 . . . . . . . . . . . . . . . . . . . . . 1312.176.Instalación del CCK y VIEWS11 . . . . . . . . . . . . . . . . . . . . . 1312.177.Instalación del CCK y VIEWS12 . . . . . . . . . . . . . . . . . . . . . 132



2.178.Instalación del CCK y VIEWS13 . . . . . . . . . . . . . . . . . . . . . 1322.179.Instalación del CCK y VIEWS14 . . . . . . . . . . . . . . . . . . . . . 1332.180.Instalación del CCK y VIEWS15 . . . . . . . . . . . . . . . . . . . . . 1332.181.Instalación del CCK y VIEWS16 . . . . . . . . . . . . . . . . . . . . . 1342.182.Instalación del CCK y VIEWS17 . . . . . . . . . . . . . . . . . . . . . 1352.183.Instalación del CCK y VIEWS18 . . . . . . . . . . . . . . . . . . . . . 1362.184.Instalación del CCK y VIEWS19 . . . . . . . . . . . . . . . . . . . . . 1372.185.Instalación del CCK y VIEWS20 . . . . . . . . . . . . . . . . . . . . . 1382.186.Instalación del CCK y VIEWS21 . . . . . . . . . . . . . . . . . . . . . 1392.187.Instalación de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . 1402.188.Instalación de la plantilla2 . . . . . . . . . . . . . . . . . . . . . . . . 1402.189.Instalación de la plantilla3 . . . . . . . . . . . . . . . . . . . . . . . . 1412.190.Instalación de la plantilla4 . . . . . . . . . . . . . . . . . . . . . . . . 1412.191.Instalación de la plantilla5 . . . . . . . . . . . . . . . . . . . . . . . . 1422.192.Instalación de la plantilla6 . . . . . . . . . . . . . . . . . . . . . . . . 1422.193.Estado final Physcon . . . . . . . . . . . . . . . . . . . . . . . . . . . 1432.194.Estado final physcon2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1442.195.Estado final matematicas . . . . . . . . . . . . . . . . . . . . . . . . . 1452.196.Estado final matematicas2 . . . . . . . . . . . . . . . . . . . . . . . . 1462.197.Estado final matematicas3 . . . . . . . . . . . . . . . . . . . . . . . . 146


0 Introducción 13

0. Introducción

0.1. AntecedentesActualmente existe una necesidad real de transmitir conocimientos mediante las redes

de comunicación e Internet ya que forman parte del día a día de la mayoría de laspersonas de este país.

Una página Web tiene muchos usos, podemos nombrar por ejemplo, un tablón deinformación corporativa, una herramienta para comunicarse con los alumnos (esta co-municación ha de ser bidireccional), una sala de prensa,o un lugar para el intercambio deinformación, que es de vital importancia y resulta imprescindible para un departamento.

El principal inconveniente que presenta este tipo de sistemas en la actualidad, esque requieren de la existencia de un profesional que adapte o configure un aplicaciónespecífica de modo que sea usable por todos y cada unos de los miembros interesadosdentro de un determinado entorno de trabajo, de modo que todos puedan generar lainformación y tengan un acceso rápido y fácil a los recursos que necesita.

Figura 1: Relación entre el conocimiento y la Web.

Conocer la situación actual de las herramientas llamadas gestores de contenidos oCMS y tener una visión clara de su evolución resultan sin duda de vital importancia enel mundo actual donde la tecnología de la transmisión de la información ocupa ahoramas que nunca un lugar privilegiado.

Descubrir que se necesita, por qué, y cómo implementarlo es sin duda un eje delpoder del conocimiento en nuestra sociedad que cada vez lo es más de la gestión dela información. Drupal [6] es sin duda el trampolín más alto para zambullirnos en lapiscina del conocimiento colectivo en Internet.

0.2. ObjetivosEl presente proyecto tiene como objetivo principal el de desarrollar dos aplicacio-

nes web, como gestores de contenidos, la 1a, una web para el Congreso de Matemáti-cas, desarrollada en Wordpress y la 2a, una web para el Departamento de Matemáticasbasada en Drupal. Los dos proyectos, se realizarán de manera separada de modo queofrezcan todas las funcionalidades necesarias para dar servicio al Departamento de Ma-temáticas de la Universidad de León y cubran todas sus necesidades.

Las funcionalidades básicas de la Web para el Congreso Physcon, se pueden resumirsólo en una, la transmisión de información, por ese motivo, y después del análisis de


0 Introducción 14

varios gestores de contenido, se decide desarrollarla en Wordpress, ya que se adapta muybien a las necesidades iniciales y resulta adecuado para resolver el primer problema.

Entre las funcionalidades de la Web del Departamento de Matemáticas podemos des-tacar como más importantes las siguiente:

1. Crear una página personal a cada profesor del departamento donde pueda publicarsu información personal, las asignaturas que imparte, sus trabajos de investigacióny los libros que ha publicado. Donde también dispondrán de un blog.

2. Crear un Intranet de acceso restringido, donde los miembros del departamentopuedan intercambiar diversos materiales, ya sean propios o de los congresos quese imparten.

3. Crear una sección de recursos matemáticos que sean útiles para todos los alumnos,(revistas, editoriales, sofware matemático...)

Para llevar a cabo todo estos requisitos necesitamos usar un gestor de contenidos quenos permita editar y configurar según las necesidades iniciales. Después de un análisisse decide usar Drupal.

Para el cumplimiento de estos objetivos, aparece un objetivo secundario evidente:realizar un aprendizaje sobre el gestor de contenido Drupal, para poder dar cabida anuestros requisitos.

Además, como objetivo subyacente se buscará evaluar y demostrar el potencial quepuede ofrecer Drupal como tecnología para desarrollar páginas Web estructuradas den-tro del contexto del desarrollo tecnológico de la información en Internet.

0.3. Situación del problemaLas aplicaciones que se desarrollan en este proyecto se encargarán de gestionar los

contenidos tanto de la Web de Congreso de Matemáticas con los del Departamento deMatemáticas.

Actualmente no se dispone de ninguna página web activa para el Departamento deMatemáticas donde poder comunicar la información considerada de interés por losmiembros del mismo, aunque si existió en un pasado no era interactiva, no respetabalos estándares de accesibilidad ni de interoperabilidad web 2.0 como suscripción, for-mularios de contacto, posibilidad de recibir feedback de la comunidad a través de loscomentarios etc.

Para el Congreso, nace la necesidad de transmitir información via Internet, ya quedada la internacionalidad de sus participantes Internet resulta la vía más optima.

0.4. SoluciónPara la Web de Departamento, la solución que se plantea a este problema es la de

migrar los datos existentes en la Web antigua y crear una nueva Web con las nuevasfuncionalidades que han ido surgiendo y algunas propuestas.

Para el Congreso de Matemáticas, se crea una Web desde el estado más inicial, inten-tando cumpla con todas las necesidades que puedan surgir.


0 Introducción 15

0.4.1. Implementación

Para implementar esto a través de software, lo que se ha hecho ha sido analizar losgestores de contenido actualmente más punteros y elegir cuál era es que mejor se adaptaal problema para conseguir los mejores resultados. Sumergirnos en éste, además nosdará una visión excepcionalmente valiosa acerca del Estado del Arte de esta rama de latecnología de la información.

Los gestores de contenido sobre los que se trabajaran serán Wordpress y Drupal.WordPress es un sistema de gestión de contenido enfocado a la creación de blogs

(sitios web periódicamente actualizados). Está desarrollado en PHP y MySQL, y tienelicencia GPL.

Drupal es un sistema de gestión de contenido modular multipropósito y muy configu-rable que está escrito en PHP y tiene licencia GNU/GPL.

Ambas herramientas, se explicarán con mayor énfasis en el capítulo 1 de esta memo-ria.

0.5. Organización de la memoriaEl documento está estructurado en varios capítulos que se detallan a continuación:

Introducción: Este capítulo describe a grandes rasgos el problema al que se en-frenta el proyecto y la solución a implementar, además de definir la estructura dela memoria.

Conceptos previos y herramientas utilizadas: En este capítulo se hace refe-rencia a todo aquello que es necesario conocer para afrontar la realización delproyecto.

Desarrollo: Este capítulo explica como está desarrollado el proyecto, describien-do la especificación técnica del mismo. Pretende ser una guía de como se ha rea-lizado este trabajo de fin de carrera, para que sirva a la vez de testigo y punto departida para cualquiera que necesite operar con la página web de Departamento deMatemáticas. Por ello, esta sección está desarrollada con gran cantidad de infor-mación gráfica que considero puede ayudar a utilizar este proyecto y modificarlopara futuras aplicaciones.

Síntesis del trabajo: En este capítulo se resumen los objetivos alcanzados eneste proyecto, dificultades encontradas y posibles mejoras y complementacionesal proyecto.

Bibliografía: Apartado en el que se citan las fuentes consultadas durante el desa-rrollo del proyecto.


1 Conceptos previos y herramientas 16

1. Conceptos previos y herramientasÉste capítulo describe las diferentes herramientas que se han utilizado para el desa-

rrollo del proyecto y da una breve introducción a las tecnologías empleadas.

1.1. WordPressWordPress [8] es un sistema de gestión de contenido enfocado a la creación de blogs

(sitios web periódicamente actualizados). Desarrollado en PHP y MySQL, bajo licenciaGPL. Wordpress, es un sistema de publicación web basado en entradas ordenadas porfecha, entre otras muchas posibilidades además de páginas estáticas.

La estructura y diseño visual del sitio depende del sistema de plantillas.

Figura 1.1: Icono de WordPress.

La gestión y ejecución corre a cargo del sistema de administración con los plugins ylos widgets que usan las plantillas.

Permite múltiples autores o usuarios.Permite comentarios y herramientas de comunicación entre blog.Tiene búsqueda integrada y un sin fin de utilidades desarrolladas por sus usuarios de

forma independiente y no muy coordinada que suplen casi cualquier necesidad mientrasésta no sea muy compleja y el mantenedor esté dispuesto a ir saltando de un autor a otrohasta que uno de los plugins con funcionalidades similares se imponga sobre los demásy se convierta en el más o menos oficial

1.2. DrupalDrupal [6] es un sistema de gestión de contenido modular multipropósito y muy con-

figurable que permite publicar artículos, imágenes u otros archivos y servicios añadidoscomo foros, encuestas, votaciones, blogs y administración de usuarios y permisos.

Destaca por la calidad y limpieza de su código y de las páginas generadas, el respetode los estándares de la web, y un énfasis especial en la usabilidad y consistencia de todoel sistema. Su comunidad está altamente profesionalizada y exigen una metodologíaaltamente rígida y efectiva para la inclusión de código fuente en su comunidad.

Drupal es un sistema dinámico: en lugar de almacenar sus contenidos en archivosestáticos en el sistema de ficheros del servidor de forma fija, el contenido textual de



las páginas y otras configuraciones son almacenados en una base de datos y se editanutilizando un entorno Web.

Es un software libre, con licencia GNU/GPL, escrito en PHP, desarrollado y mante-nido por una activa comunidad de usuarios alrededor de todo el planeta.

Figura 1.2: Icono de Drupal.

El diseño de Drupal es especialmente idóneo para construir y gestionar comunidadesen Internet. No obstante, su flexibilidad y adaptabilidad, así como la gran cantidad demódulos adicionales disponibles, hace que sea adecuado para realizar muchos tiposdiferentes de sitio web.

1.2.1. Motivos para usar Drupal

Los principales motivos por los que usar Drupal en este proyecto son los siguiente:

1. Cualquier diseño es posible con Drupal. Muchas veces la gente dice que un CMSpreconfigurado no tiene un diseño flexible y que puede limitar la creatividad delos diseñadores. Drupal te permite hacer cualquier cosa.

2. El concepto de usuario es intrínseco a Drupal. Esto quiere decir que si alguien seregistra, se registra para todas las aplicaciones que haya en Drupal. Desde foros,blogs, encuestas, UGCs, tienda... este control centralizado del usuario es clavepara los proyectos de hoy en día y donde se centrará nuestra atención.

3. Drupal es multi-idioma. Es normal tener un sitio web en dos idiomas o más. Estafuncionalidad es natural en Drupal y muy fácil de activar y con herramientas muyprofesionales para generar el contenido traducido y mantenerlo actualizado.

4. Abierto a PHP. Drupal por defecto te permite que en cualquier tipo de contenidopuedas agregar tu PHP a medida. Este te permite retocar y personalizar las fun-cionalidades de tu sitio Web si aún no estas cómodo con su api de programación.

5. La principal ventaja de Drupal frente a Joomla es que Drupal tiene una comunidadmuy buena. Cualquier duda está documentada y explicada.



6. El soporte natural de Drupal permite editar video y audio sin problemas.

7. El consumo de recursos del servidor que hace Drupal es muy bajo, grandes por-tales de internet usan esta herramienta como principal.

8. El control para los administradores es total.

1.3. Otras herramientas utilizadasA continuación se enumeran algunas de las herramientas utilizadas para la elabora-

ción de estos sitios Web.

1.3.1. PHP

PHP [5] es un lenguaje de programación interpretado, diseñado originalmente para lacreación de páginas web dinámicas.

Generalmente se ejecuta en un servidor web, tomando el código en PHP como suentrada y creando páginas web como salida. Puede ser desplegado en la mayoría de losservidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.

Figura 1.3: Icono de PHP.

En este proyecto ha sido usado para la creación de la interface gráfica de las dos Websque se ha realizado.

1.3.2. CSS

CSS es una tecnología que nos permite crear la estética de las páginas web de unamanera más exacta, flexible y accesible que con tecnologías anteriores.

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.Las hojas de estilo consisten en la creación de estilos propios dentro de las páginas web,o en un archivo separado que será invocado por el sistema al momento de presentar losdocumentos.

Gracias a las CSS podemos incluir márgenes, tipos de letra, fondos, colores... inde-pendientemente del contenido de la web pudiendo cambiar la apariencia de la mismasin necesidad de tocar para nada el contenido. Con esta tecnología quedan ambos sepa-rados completamente pudiendo realizar la labor de adaptación a distintos dispositivosde forma completamente independiente al contenido mostrado.

En este proyecto ha sido usado para la creación de la interface gráfica de las dos Websque se ha realizado.


2 Desarrollo 19

2. DesarrolloEste capítulo recoge toda la especificación técnica referente al desarrollo del proyecto.

Se va a estructurar en las diferentes secciones referidas a las dos páginas Web diseñadas.

2.1. Gestor de contenidos CMS con WordPressEste gestor de contenidos resulta mucho más sencillo de implantar y mantener que

Drupal. Esta sencillez es la que ha marcado claramente su éxito entre los usuarios quedesarrollan actividades sin ánimo de lucro y también entre aquellos que sí la tienen, perocuyas necesidades en la red no son excesivas. Usar Wordpress dentro del proyecto es unpaso lógico ya que hablamos del hermano menor de Drupal. Si no necesitas demasiadode tu gestor de contenidos a nivel de funcionalidades probablemente Wordpress sea loque más se ajuste a tus necesidades. Además posee la tremenda ventaja de ser muchomas fácil darle una apariencia vistosa. La enorme cantidad de usuarios desarrollandosoluciones individuales en forma de plugins hacen posible resolver casi cualquier ne-cesidad puntual. Si bien es cierto que estas soluciones son puntuales y desarrolladas deforma inconexa excepto por su gestor de contenidos en común.

Por poner un ejemplo recientemente tenemos la posibilidad de poner Wordpress enmulti-idioma con un plugin, característica hasta hace muy poco exclusiva únicamentede Drupal. Si tenemos un formulario de contacto también en nuestra web hacer que seintegre con el formulario de contacto u otros plugins.. será toda una odisea. De hecho lasolución mas habitual para crear blogs multilingües debido a estas incompatibilidadesconsiste en crear tantos Wordpress como idiomas, dejándolo todo al menos organizadoe integrado de una forma más estándar.

Entonces surge la pregunta.. ¿Y si nuestro administrador no sabe francés? No cabeduda de que Drupal responde excelentemente a todo este tipo de situaciones no tanhabituales, pero va por detrás en comodidad de instalación con respecto a Wordpressy es normal porque se preocupan por hacer las cosas bien y en común, mientras queWordpress resulta la solución ideal si alguien hizo un desarrollo concreto que es loúnico que necesitas importante. Pero si tu web crece y necesita hablarse con un banco,o soportar una gran carga de visitas sin consumir casi memoria en el servidor o quizásnecesitas que tu web tu foro y tu galería de imágenes y tu galería de vídeos no esténseparadas en webs distintas, probablemente necesitarás cambiar a Drupal.

2.1.1. Instalación de Wordpress

La instalación de Wordpress es similar a la de Drupal. Una base de datos mysql phpy apache suele ser la combinación habitual como es el caso de Drupal y unas brevesconfiguraciones acerca del usuario administrador y su e-mail. Cabe destacar que el usode Wordpress se ha extendido por la razón de que la mayoría de los usuarios nuncase lo han instalado. Existen muchos sitios web y el principal es Wordpress.com que teofrecen crearte una web de este tipo si tener que instalar nada ni saber nada acerca deadministración. Este tipo de servicio que no existe en Drupal (al menos que yo sepa)pero que desde luego no está popularizado ha marcado la diferencia en el uso de la


2 Desarrollo 20

gente de a pie de los gestores de contenidos. Cabe destacar en este ámbito el tambiénbastante famoso servicio de blog ofrecido por google, Blogger.

2.1.2. Configuración del sitio

La configuración del sitio es muy similar a la de Drupal pero con muchas menosopciones. No nos vamos a extender en este documento en mostrarlo ya que nos cen-traremos en Drupal. Cuando instalamos algún plugin al igual que si instalamos algúnmódulo estas opciones de configuración se amplían. La diferencia radica en que todossus aspectos son mucho menos modulares que en Drupal.

2.1.3. Instalación de plugins

Para las necesidades del congreso las funcionalidades de Wordpress fueron suficien-tes ya que sólo necesitaban mostrar información y recabar las direcciones de la genteque deseaba registrarse así como mostrar a la gente como llegar hasta el lugar de la con-ferencia y sus servicios. Para lograr esto se hizo un interesante trabajo de integracióncon google de forma que rutas, servicios y ubicaciones son mostrados interactivamentey muy detalladamente a los visitantes de la web. En estos servicios se incluye realidadvirtual con google street views.

Para el resto de funcionalidades los módulos empleados fueron:

Admin Favicon: que añade un icono personalizado en las pestañas de los navega-dores.

Akismet: que evita el spam (modulo genérico que que ya viene con Wordpress).

Contact Form 7: para el formulario de registro y de contacto.

Countdown Timer: un contador hacia atrás de fecha que esta por ver si se usará

Custom Meta: para que en el login de usuario no aparezcan campos que no desea-mos, ya que por defecto no viene solo el login.

Hello Dolly: otro plugin genérico de ejemplo para animar al desarrollo de losmismos.

Private WP: hace el blog sólo accesible a usuarios registrados (fue útil para que eldepartamento revisara la web sin que esta se hiciera pública)

La única parte compleja fue el cómo hacer que el formulario de contacto permitieraregistrar a los usuarios del congreso de forma fácil. Crear un sistema de registro parecíademasiado esfuerzo para algo que sólo se iba a usar una vez y es cierto que al finalsiempre se termina trabajando en la hoja de excel porque la gente te llama, se apun-ta, se desapunta, etc. Decidimos entonces no darle vueltas a la información y llevarladirectamente a la hoja de cálculo.

Hice que la web enviara un e-mail con los datos formateados de forma sencilla paraintroducirlos en excel además de en forma visible y bonita para que los miembros deldepartamento certificaran fácilmente el registro a través del e-mail. Si alguien lo enviaba


2 Desarrollo 21

dos veces o una vez mal y otra vez bien sería fácilmente identificable en el correo y conla lista de e-mails en el buzón de entrada después sería fácil extraer los datos hacia elexcel sólo copiando la linea final con sus campos separados por un punto y coma.

Figura 2.1: Formulario1

Figura 2.2: Formulario2

2.1.4. Instalación de la plantilla

La instalación de la plantilla es muy similar a la instalación de Drupal que describirémás adelante. La creación de la misma fue de lo que más trabajo llevó y resulto unesfuerzo considerable aunar la estética de ambas entidades y darle un aspecto sobrio yabstracto a la web.

Fue mi primer contacto con la maquetación css en serio y me alegra que el resultadohaya sido agradecido.

Veo demasiado tedioso y poco informativo entrar en los detalles de la maquetación cssy sólo deseo resaltar la importancia de usar esta tecnología a pesar de sus dificultades,


2 Desarrollo 22

ya que es la única que garantiza la flexibilidad de los contenidos a nivel estético yla accesibilidad para que la web sea usable desde cualquier dispositivo, incluidos losmóviles y accesible por cualquier tipo de persona: desde gente con ordenadores antiguoshasta invidentes valor que para mí resulta de gran importancia.

Figura 2.3: Web Physcon

2.2. Gestor de contenidos CMS con Drupal2.2.1. Instalación básica de Drupal

Drupal está disponible en su página oficial, para encontrarlo sólo debemos buscar engoogle, es el sitio ideal para descargarlo.


2 Desarrollo 23

Figura 2.4: Búsqueda de Drupal en google.

En la web de Drupal lo primero que vemos es la cercanía del lanzamiento de Drupal7. En este caso nos veremos obligados ha decidir que versión es la más adecuada. Eneste caso, se ha elegido Drupal 6 dado que la lista de bugs de Drupal 7 todavía es extensay como la web tendrá una función productiva además de la investigadora hemos optadopor esta versión en un afán por resultar lo más conservadora y útil posible.

Figura 2.5: Web oficial de Drupal

Podemos observar que la versión de Drupal 7 aún no está recomendada y podríaocasionar problemas.


2 Desarrollo 24

Figura 2.6: Eleccion de versión de Drupal

Como vemos en la siguiente figura, aunque lo idóneo para mi interés investigadorsería usar Drupal 7, sobre todo por los nuevos avances en el módulo profile, la gran listade bugs que no hemos listado completamente aquí, por motivos de espacio, obligan aser conservadores.

Figura 2.7: Lista de bugs de Drupal 7

Elegimos para descargarnos la última versión estable, esto es, Drupal 6.


2 Desarrollo 25

Para instalarlo en nuestra máquina local necesitaremos tener instalados tres elementosindispensables usados hoy en día por casi todos los gestores de contenido.

PHP,MYSQL y APACHE son conocidos habitualmente por las siglas AMP y exis-ten para todas las plataformas un paquete de fácil instalación que nos permitirán instalarestos tres elementos de forma sencilla en nuestro computador.

Si usamos Windows hemos de buscar en la web por WAMP, en el caso de Linuxdispondremos de un paquete para instalar en nuestros repositorios llamado LAMP, ypor último, si usamos Macintosh nos será fácil bajar e instalar MAMP.

En mi caso voy a utilizar MAMP.

Figura 2.8: Configuración de MAMP

Una vez realizadas las configuraciones básicas dependientes del sistema operativo só-lo tenemos que pulsar en Iniciar Servidores. En el caso de Mac, MAMP viene configu-rado por defecto en los puertos 8888. Él mismo tiene una opción para usar los Puertospor defecto tanto en apache con mysql. Resulta incómodo ya que pide autorización peroresulta útil ya que la web queda exactamente configurada como si realmente estuvieraen Internet si procedemos con los siguientes pasos.


2 Desarrollo 26

Figura 2.9: Configuración de MAMP2

Una vez que MAMP arranca nos llevará a una página de configuración donde tieneya preinstaladas algunas de las herramientas más útiles para la gestión de los servidoresasí como la información básica para poder empezar a trabajar.

Figura 2.10: Configuración de MAMP3

Lo primero que necesitaremos crear para nuestro sitio web es una base de datos dondeel gestor de contenidos almacenará toda la información necesaria. Tanto cofiguracionescomo datos de usuario y el contenido generado por ellos. Para ello usaremos la herra-mienta del MAMP PhpMyAdmin donde en la primera página ya nos aparece al opción


2 Desarrollo 27

de crear una base de datos. Si no nos confundimos nos aparecerá una pantalla simi-lar a la siguiente. En nuestro caso hemos creado como se puede ver la base de datosmatemáticas.

Figura 2.11: Configuración de la base de datos

Lo siguiente que necesitaremos para empezar a trabajar es hacerle creer a nuestroordenador que el el dominio matemáticas.unileon.es se encuentra en nuestro propioordenador y no en algún lugar de Internet. Para ello modificaremos el fichero hosts,vestigio primigenio de los actuales DNS y todavía en uso, donde podemos indicarle queeste dominio se encuentra en nuestra propia máquina. Para ello abriremos un terminal yusaremos el comando más presente todos los sistemas Unix, el editor vi.

Figura 2.12: Modificación de fichero host

Si no poseemos de los permisos necesarios seguramente hemos de ejecutar el coman-do con el prefijo sudo que nos permite escalar nuestros privilegios.

Figura 2.13: Modificación de fichero host2

Una vez aquí pulsaremos la tecla i para pasar a modo de edición y añadir en la lineadonde aparece el localhost, nuestro dominio. De esta forma nuestro ordenador cuandollamemos a esta máquina, se dirigirá a la nuestra propia.


2 Desarrollo 28

Figura 2.14: Modificación de fichero host3

Para salir y salvar nuestros cambios hemos de teclear ESC+:+w+q+!+ENTER

Figura 2.15: Escritura del archivo de configuración en vi

¿Realmente nuestra máquina ya cree que ese dominio esta en ella misma? Para com-probarlo podemos hacer un simple ping, prueba de conexión y veremos que la direcciónresuelta es 127.0.0.1 dirección ip reservada para la propia máquina.

Figura 2.16: Comprobación de la instalación en local

El siguiente paso será copiar los archivos de Drupal al Raíz de nuestro servidor web.En este caso donde véis según la captura y hemos usado para descomprimir y copiar en


2 Desarrollo 29

todo este proyecto el programa Mucomander un equivalente del mc de linux realmentefácil de manejar, que permite ver los ficheros ocultos, y que tiene versiones en toda lasplataformas.

Figura 2.17: Instalación de los ficheros al directorio raíz de MAMP

Con Mucomander o mc (Midnight Comander) podemos entrar dentro de un archivocomprimido simplemente haciendo click sobre el para después descomprimirlo en eldirectorio de la otra ventana.

Figura 2.18: Instalación de los ficheros al directorio raíz de MAMP2

Una vez dentro nos mostrará una carpeta. Debemos entrar en ella para descomprimirdirectamente los archivos para nuestro servidor web.



2 Desarrollo 30

DS Store es un archivo invisible de Mac OS X que guarda configuraciones sobre lacarpeta y otras cosas. No debemos preocuparnos por él y copiaremos los contenidos delarchivos comprimido.


Así deben quedar los dos directorios con la salvedad del DS Store. Es importante usarun gestor de archivos que nos permita ver los ficheros ocultos, ya que los servidores weby estas aplicaciones usan archivos de la misma nomenclatura como el .htacces que conoperaciones de copiado normal no se realizarían, o de realizarse, no podríamos verificarsu integridad.

Hay más soluciones además de Mucomander pero la consideramos la más apta seacual sea la plataforma, además es gratuita y de ser de código fuente abierto.



2 Desarrollo 31

Ya podemos con nuestro navegador dirigirnos a la dirección de nuestra página webque nuestro ordenador redireccionará hacia nuestro propio computador mostrándonoslos archivos web que acabamos de copiar.

Si, como tantos otros, Drupal tiene un sistema de instalación más o menos automati-zado. Al menos desde este punto. En nuestro caso, instalaremos Drupal en inglés paradespués castellanizarlo.

Figura 2.22: Instalación de Drupal 6

Figura 2.23: Modificación del archivo de configuración

Por defecto Drupal nos deja un fichero de configuración default.settings.php que de-bemos renombrar a settings.php si deseamos editarlo a mano.

En nuestro caso vamos a intentar seguir los pasos de una instalación guiada a través dela web. Veremos en este caso que nos pide la modificación del archivo de configuracióny asignarle los permisos necesarios para que el entorno web pueda editar el archivopor nosotros.


2 Desarrollo 32

Figura 2.24: Modificación del archivo de configuración2

Tendremos que renombrar el archivo configuración default.settings.php y denominar-lo como settings.php, pero antes para hacer mejor las cosas además copiaremos nuestracarpeta default a la carpeta matemáticas.unileon.es.

Es una forma más seria de realizar al configuración, ya que Drupal nos permite tenermuchas web bajo el mismo motor.

Esto hará que cuando dirijamos nuestro navegador a matemáticas.unileon.es tome encuenta los archivos de configuración de esa carpeta. Realizar un entorno de pruebas serátan fácil como copiar esta carpeta a otra de nombre similar como veremos más adelante.



2 Desarrollo 33


Una vez hecha esta copia del directorio entero por defecto, seguimos con la instala-ción y vemos que nos pide al igual que antes de renombrar el archivo de configuraciónde la carpeta matematicas.unileon.es que es el directorio que ahora toma como válido.



Y los archivos, siempre dentro de la carpeta sites nos quedarían así.


2 Desarrollo 34


Nunca deberemos configurar ni instalar ningún módulo que no esté dentro de la car-peta sites. Aunque podemos hacerlo y funcionará, es lo que en Drupal se denomina unamala práctica.

La configuraciones archivos y módulos propios sólo de nuestro sitio web, siempreen la carpeta sites, y a la vez dentro de la carpeta de su dominio. Si instalamos algúnmódulo podemos por ejemplo dejarlo dentro de la carpeta sites/all/modules y lo mismoocurre para los themes y todo lo demás. Todo lo que dejemos dentro de la carpeta all lopodrán usar todos los sitios web que instalemos dentro de este mismo Drupal.

Ahora Drupal nos pide configurar los datos de la base de datos, son los datos quehemos visto y con anterioridad en el PhpMyAdmin y el nombre de la base de datos quecreamos.


El tipo de base de datos es mysql y el nombre será en que haya definido en la confi-guración que hemos realizado previamente.


2 Desarrollo 35

Figura 2.31: Configuración de la base de datos

Introducimos un prefijo a la base de datos como buena práctica de programación, quesólo es útil realmente cuando deseamos tener muchos Drupales alojados en una mismabase de datos para evitar equivocaciones.


2 Desarrollo 36

Figura 2.32: Configuración de la base de datos2

Y ahora empezamos a configurar el nuestro sitio web. Drupal nos anuncia que ha rea-lizado las modificaciones necesarias al archivo de configuración y nos pide que dejemosel archivo de configuración de nuevo con los permisos de sólo lectura. Lo primero quenos pide es el nombre del nuestro sitio y una dirección mail que usará para cualquierurgencia de administración que sea necesaria.



2 Desarrollo 37

Introducimos los datos solicitados y por motivos de seguridad cambiamos de nuevolos permisos del archivo de configuración como se nos había solicitado.


Seguimos con la configuración en la que para nuestro objetivo consideramos estasopciones.

Por defecto observamos que las URLs limpias están activas, sin embargo, como laweb va a estar alojada en la Universidad de León, y como sabemos por experienciasanteriores que no funcionan de manera adecuada ya que no están soportadas por laadministración del servidor de la Universidad adecuadamente, las deshabilitamos.


2 Desarrollo 38

Figura 2.35: Configuración de los enlaces relativos

Pasamos al configurar el sitio web. Lo vamos a hacer a través de nuestro navegadordespués de haber colocado una contraseña al usuario admin.

En esta fase el gestor de contenidos nos insta a realizar las opciones de configuraciónbásica, instalación de módulos, etc. Sin embargo lo primero que haremos para facilitarel seguimiento del documento es castellanizarlo.


2 Desarrollo 39

Figura 2.36: Configuración del sitio Web

2.2.2. Instalación del idioma

Nos dirigimos a la web de proyectos de Drupal, ya que vamos a descargarnos el idio-ma para tener el sitio web en castellano, para ello buscamos el apartado de translations.


2 Desarrollo 40

Figura 2.37: Configuración del sitio Web2

Buscamos el módulo que es más adecuado para nosotros. Siempre es aconsejableinstalarse la versión recomendada.


2 Desarrollo 41

Figura 2.38: Configuración del sitio Web3


2 Desarrollo 42

Figura 2.39: Configuración del idioma

Lo ideal hubiera sido bajarse los archivos de idioma y copiarlos antes de haber insta-lado Drupal. Ahora lo que vamos a hacer es copiarlos en el directorio raíz de Drupal yconfigurar el idioma desde el navegador.


2 Desarrollo 43

Figura 2.40: Configuración del idioma2

Activamos el Content translation en el menú de los módulos de nuestro Drupal yhabilitamos el módulo local.



2 Desarrollo 44

Ahora nos desplazamos por el menú, administración, construcción del sitio, traduc-ción de la interface (translate interface).


Aún no nos aparece el idioma por lo que tenemos que añadirlo.


2 Desarrollo 45


Tenemos que ir a administración, configuración del sitio, lenguajes, y en este caso,podemos configurar y añadir todos los lenguajes de los que dispongamos.



2 Desarrollo 46

En la etiqueta add language seleccionamos Español y guardamos los cambios.


Entonces nos aparecerá en Español en la lista de idiomas para que podamos activarlo.



2 Desarrollo 47



Cambiamos la configuración del idioma y lo dejamos seleccionado por defecto.



2 Desarrollo 48

Ahora ya nos aparece nuestro sitio web en castellano y la configuración del idiomadebería estar finalizada.


2.2.3. Configuración de perfiles

Vamos ahora a configurar el perfil de los usuarios que van a utilizar el sitio web.Para ello nos desplazamos por el menú lateral, administrar, administración de usuario, yelegimos la opción opciones de usuario. Actualmente todos los visitantes que lo deseenpueden crear cuentas de usuario como podemos observar en la imagen.

Sin embargo como los usuarios de esta web tienen unos requisitos previos, ya quetienen que pertenecer al departamento de Matemáticas de la Universidad de León, estaconfiguración no nos interesa.


2 Desarrollo 49

Figura 2.51: Configuración del perfil

Vamos a cambiar la configuración de modo que sólo los administradores puedan crearlas cuentas de usuario. Seremos nosotros quien demos de alta a cada uno de los profe-sores del Departamento de Matemáticas.

Una vez creada la cuenta, podrán modificar todos los datos referentes a sus cuentas.Todos los datos menos su nombre completo que será el nombre de usuario.

Figura 2.52: Configuración del perfil2

Nos interesa identificar a cada uno de los usuarios con una foto, por ello, vamos aactivar el soporte para imágenes en este menú. Además indicamos la ruta donde se van


2 Desarrollo 50

a encontrar las imágenes de los usuarios. Si no existe el directorio se creará. Podemosasignar unas dimensiones máximas a las fotos y un tamaño al archivo. He elegido comoresolución máxima de la imagen 200pxX200px y como tamaño máximo de la imagen300Kb.


Una vez guardadas las configuraciones de las opciones de usuario, se crea el directoriodonde se guardan las imágenes si no existía con anterioridad.


2 Desarrollo 51


Tenemos que configurar también los permisos de los usuarios, para ello accedemos apermisos, que se encuentra en Administrar, Administración de usuario, permisos.

Por ahora va a tener acceso al módulo comment y le vamos a permitir tener acceso alos comentarios, así como publicar comentarios.


2 Desarrollo 52



Ahora vamos a detallar cual será el rol de cada usuario. Con los roles podemos crear


2 Desarrollo 53

grupos de usuarios, con diferentes privilegios. A nosotros nos interesa el rol de miembrodel departamento, ya que así vamos a poder diferenciar la información a la que tienenacceso los diferentes miembros de la web.

Como podemos observar, inicialmente sólo disponemos de los roles de usuario anó-nimo y usuario autentificado.


Por lo que creamos un nuevo rol que va a tener el nombre de miembro del depar-tamento. Este nuevo rol nos va a permitir dar acceso a nuestros usuarios a contenidosrestringidos.


2 Desarrollo 54


Los permisos de los que disponen este grupo de nuevo de usuarios va a cambiar, apartir de ahora van a poder crear páginas propias de contenido y borrarlas. Para ellocambiamos los permisos en el módulo node.


2 Desarrollo 55



2 Desarrollo 56


Además, este nuevo grupo de usuarios también van a poder acceder a los perfiles deusuarios. Para ello debemos cambiar la configuración en el módulo user.


2 Desarrollo 57


Una forma adecuada de personalizar un perfil es mediante una foto. En la siguienteimagen podemos observar como actualizar nuestro perfil con esta información. Hayque tener en cuenta que la imagen debe cumplir los requisitos que hemos seleccionadoanteriormente, referente al tamaño de la imagen y las dimensiones. Para editar nuestroperfil tenemos que ir a inicio, mi cuenta, editar. En esta pantalla podemos configurar elidioma, la hora y cambiar o subir una imagen personal.


2 Desarrollo 58


A continuación se muestran los módulos son que aconsejables instalar para que unsitio web funcione de forma correcta. Podemos destacar el módulo comment, el módulohelp, el módulo locate, el módulo blog, el profile y y el módulo search.


2 Desarrollo 59



2 Desarrollo 60


Como nuestros usuarios van a ser los profesores del Departamento de Matemáticas,necesitamos crear campos de perfil donde añadir información relativa a los profesores,como por ejemplo la información personal. Para poder realizar estas funciones, anterior-mente hemos habilitado todos los módulos del core necesarios. Para ello nos dirigimos aInicio, administrar, administración de usuario, perfiles y seleccionamos añadir un nuevocampo.


2 Desarrollo 61


La categoría nos va a ayudar a agrupar lógicamente los campos: el título hace referen-cia al campo que vamos a crear. Es importante dar una pequeña descripción para hacermás fácil el manejo por parte del usuario.



2 Desarrollo 62

Además de crear el campo, tenemos que configurar las opciones de visibilidad. Eneste caso serán públicas de modo que se muestre en el perfil personal.


En esta imagen podemos ver cómo vamos creando los diferentes campos que vamosa tener en el perfil de cada usuario. Actualmente tenemos el área al que pertenece elprofesor y la información relativa a su página web.


2 Desarrollo 63


Y así se van creando los demás campos que sean de interés en el perfil de usuario.Cuando creamos un campo, podemos habilitar el título de la página de manera que siotra persona introduce la misma información, podamos mostrar pulsando encima de unenlace quienes son las personas que cumplen esas características.


2 Desarrollo 64


Sin embargo, para el caso de localización, no debemos activar el título de la página,ya que se supone que en cada despacho hay sólo un profesor. En caso de que estainformación cambiase, o tuviéramos una relación de aulas en las que se imparte clase,podría resultar de interés.


2 Desarrollo 65


También podemos seleccionar la opción de que el formulario se autocomplete mien-tras el usuario escribe. Esto puede ser de gran interés cuando estamos creando un datoque es cómún para todos, por lo que esta funcionalidad resultará muy útil.



2 Desarrollo 66

Para este trabajo en particular, hemos creado los siguientes campos dentro del perfil,pues son los que consideramos más adecuados a la hora de mostrar la información deun profesor. Con estos datos vamos a tener información del área al que pertenece elprofesor, la categoría, dónde podemos encontrarle, su telefóno de contacto, su direcciónpostal, las asignaturas que imparte y su página web en caso de que disponga de ella.


Ésta es una captura de pantalla de como se mostraban los datos de lo que acabamos dehablar en la web anterior. De modo que lo que queremos conseguir en obtener mediantenuestro sistema de CMS un organización parecida de la información.


2 Desarrollo 67

Figura 2.73: Perfil de Miguel Carriegos en la Web anterior

Nosotros vamos ahora a crear el perfil de Miguel Carriegos en nuestra web.Como nombre de usuario usamos el nombre completo del miembro del departamento

y evitamos confusiones de administración y duplicación de datos (el tener un usuario yun nombre completo) Situación conveniente dado que el acceso por parte de los miem-bros va a ser muy esporádico.

Eliminamos la dirección de e-mail de la página personal para evitar el spam a losusuarios porque ya hemos habilitado el formulario de contacto para todos los miembros.

Además habilitaremos el formulario de contacto cuando editemos el usuario.


2 Desarrollo 68


Completamos toda la información relativa al nuevo usuario. Es decir, los campos quehemos creado con anterioridad. Así obtendremos una página con la misma informaciónque la web antigua del Departamento de Matemáticas.


2 Desarrollo 69


En la información personal podemos seleccionar entre los diferentes áreas que hayen el Departamento de Matemáticas, para ello las hemos creado previamente. En elapartado de categoría, cada profesor podrá poder lo que decida, ya que nadie mejorque él para editar su información referida a su categoría como profesional. Es por estemotivo que hemos dejado el campo abierto, para que se pueda introducir todo tipo deinformación.


2 Desarrollo 70


Así es pues, como tendríamos la información de perfil de Miguel Carriegos. Nóteseque si existen más personas con una misma categoría podríamos mostrar todos los quetienen esa categoría. O si bien hay más personas que imparten una misma asignaturapodríamos ver quienes son simplemente pulsando en el enlace que contiene el nombre.


2 Desarrollo 71


En esta imagen podemos ver un ejemplo de todas las personas que tienen la categoríade Titular de la Universidad.


2 Desarrollo 72


Aquí un ejemplo de las personas que imparte Matemáticas I. Como vemos nos mues-tra la información referente a los miembros del departamento y no aparece la lista deasignaturas, ya que se considera que se está accediendo la información de una asignaturaen particular.


2 Desarrollo 73


2.2.4. Configuraciones generales del sitio Web

Nos disponemos ahora a configurar la información del sitio. Es importante realizaresta configuración para ver como cambian los mensajes y el aspecto de la web cuandose configure el nuevo tema.


2 Desarrollo 74

Figura 2.80: Configuración básicas1

Vamos a configurar ahora el formulario de contacto, para ello vamos a administrar,construcción del sitio, formulario de contacto. Simplemente tenemos que compilar losdestinatarios a los que va enviado dicho formulario y si lo deseamos una respuestaautomática que servirá al usuario para saber si su mensaje se ha enviado correctamente.


2 Desarrollo 75


Cabe destacar que podemos tener más de un formulario de contacto, esto puede serútil por ejemplo si tenemos varias secciones, (matrículas, becas, ...) y necesitamos queel formulario de contacto se envíe a sitios diferentes.



2 Desarrollo 76

Para tener el contacto disponible en algún sitio vamos a crear un primary link (inicio,administrar, configuración del sitio, primary links) definiendo la ruta que deseamos ten-go el contacto, así como el título del enlace y la descripción.


Para contactar será tan fácil como completar un pequeño formulario de contacto. Ladirección es obligatoria para dar una respuesta el remitente.


2 Desarrollo 77


2.2.5. Ejemplo de instalación de un módulo

Una de las partes más importantes de Drupal es la instalación de módulos.Nosotros vamos a instalar un módulo que se ocupa de configurar las tareas de mante-

nimiendo ordinarias de Drupal, se puede hace manualmente en http://matematicas.unileon.es/cron.phpo automáticamente (usando el cron de tu sistema operativo para que acceda esa url). Pue-de estar o no en la mista máquina que se aloja. No es obligatorio. Elijo usar el módulode Drupal cron para pobres. http://Drupal.org/project/poormanscron

Las ventajas es que si migramos el sitio web ya va con el esta configuración, y notenemos que depender de servidor externo. Nuestro módulo se va a ejecutar si tenemosal menos una vista al día. Si no tienes al menos unas visita al día es mejor no uses estemódulo, ni tampoco Drupal. El módulo lo buscamos en la web. Y lo descargamos igualque hicimos con el de idioma.


2 Desarrollo 78

Figura 2.85: Ejemplo de instalación del módulo cron1



2 Desarrollo 79




¡¡¡Se nos ha olvidado darle permisos a la carpeta!!!


2 Desarrollo 80





2 Desarrollo 81




Ahora ya sólo tenemos que realizar las configuraciones adecuadas.


2 Desarrollo 82


Con esta configuración ya no tenemos avisos de las páginas de administración ni enla sección de informes. Podemos acceder a la sección de informe de estado para ver queestá todo correcto.


2 Desarrollo 83



2.2.6. Configuraciones esenciales

En esta sección nos vamos a ocupar de algunos ajustes esenciales, como por ejemploestablecer de forma correcta la hora del nuestro sitio web. Para ello accedemos a admi-nistrar, configuración del sitio, fecha y hora. En esta pantalla podemos efectuar tantoscambios como consideremos oportunos para establecer la hora del sistema. Poniendo elsite en hora


2 Desarrollo 84

Figura 2.99: Ajustes esenciales1

También vamos a definir los limites de las imágenes y archivos (GENERAL), paraello definimos un máximos de resolución de las imágenes de 1024x1024 y que ningúnarchivo sobre pase los 30 mb y que ningún usuario sobrepase los 5 gigas de informaciónsubida.


2 Desarrollo 85


Además vamos a definir también los límites de las imágenes y archivos (Api deblogs). Esta api la habilitamos para recordar su existencia pero sin usar pues es pocoprobable que el departamento actualice sus noticias usando dispositivos móviles.



2 Desarrollo 86

2.2.7. Configuración de la Intranet

Vamos a configurar ahora la Intranet, que será un lugar donde los miembros del de-partamento podrán colgar información de Interés general pero no con intención de queesté pública, sino que tendrá carácter interno. Usaremos el módulo book creando un li-bro principal al que llamaremos INTRANET, y dejaremos a todo el mundo pueda editarlos books y evitaremos que el público vea este tipo de contenido.

Revisando los permisos de los módulos activados

Figura 2.102: Configuración de la Intranet1



2 Desarrollo 87



2 Desarrollo 88




Todos tienen que poder ver los archivos cargados pero sólo los miembros puedencargar otros nuevos.


2 Desarrollo 89



Permitiremos a todos los usuarios del departamento administrar todos los archivos:propios y ajenos.



Si alguna palabra está traducida y alguien cree que se puede traducir mejor debe podercambiarla así que habilitamos a todos los miembros del departamento la posibilidad dehacerlo en el módulo locale.


2 Desarrollo 90




Hemos configurado el formulario de contacto en el módulo contact, pero todavía nohemos definido las reglas de visibilidad y acceso.


En el módulo blog definimos que cada uno pueda editar su propio blog.


2 Desarrollo 91


En la siguiente figura, se puede apreciar lo que puede hacer el usuario antes de aplicarnuestros permisos.



2 Desarrollo 92


Hasta ahora, los usuarios registrados no podían crear contenido, sin embargo conlas nuevas configuraciones ya pueden hacerlo. Como vemos en la siguiente imagen,estamos logeados como Miguel Carriegos y podemos crear una entrada de bitácora.


2 Desarrollo 93


Probemos a crear contenido, vaya nos hemos pasado con los permisos . . .


Con todos los permisos que vemos en la imagen habilitados podríamos anidar nuestra


2 Desarrollo 94

entrada de blog en cualquier parte de uno de los libros del sitio web. Como es una fun-ción un poco avanzada y difícil de explicar vamos a deshabilitarla para que la bitácorasea un simple y sencillo blog como los que todos conocemos.



Creando la Intranet web de acceso sólo interno con aviso opcional.



2 Desarrollo 95

Creamos una página de libro inicial con los comentarios desactivados.


Y ya tenemos nuestra Intranet, que es un libro con acceso restringuido.



2 Desarrollo 96

Ahora podemos crear páginas en el libro.


Si hacemos una página del libro con el menú y no seleccionamos el libro al quepertenece, la página se creará pero permanecerá deslindada de los menús. Para evitaresta posible confusión que puede tener accidentalmente el usuario de una forma sencilla,desactivaremos el menú.


2 Desarrollo 97


Hemos obligado al usuario a crear las páginas sólo desde la Intranet que ya autocon-figura el menú y la jerarquía de la página y así no hay confusiones.


Aquí vemos un ejemplo de una página creada. Además pueden dejar comentariosacerca de una página ya creada.


2 Desarrollo 98



Al igual que evitaremos la duplicación de los lugares donde se puede crear la páginade un libro, haremos lo mismo con la forma de introducir información en la Intranet.Deshabilitaremos los comentarios por defecto para invitar al usuario a que realice mo-dificaciones si cree que algo no está bien y evitar la confusión de meter información


2 Desarrollo 99

dentro de los comentarios, práctica en principio poco útil para una INTRANET lo mis-mo se podrá hacer para los blogs ya que será una web fundamentalmente demostrativa,siempre podrá ser cambiado el comportamiento por defecto y el de cada entrada deinformación en particular.


Aprovechamos para darle un nombre más afable para el usuario al tipo de contenido ycolocamos un aviso de uso del editor de texto enriquecido que instalaremos más adelantey habilitamos las revisiones para que nadie borre por error algo importante.


2 Desarrollo 100



2 Desarrollo 101


Seleccionamos la opción multilenguaje y la configuración de los archivos adjuntosdejamos la que está por defecto. Además quitamos los comentarios por defecto por elmotivo que hemos expresado anteriormente. En los comentarios hacemos los cambiosque se recogen en la imagen anterior.


Finalmente y para que el usuario tenga la estructura en árbol visible en los menús,pero de forma que sea igual que la estructura de la información debemos realizar loscambios siguientes.


2 Desarrollo 102




De esta forma ya tenemos nuestra estructura en árbol.


2 Desarrollo 103



Actualmente la navegación de nuestro sitio web está así:


2 Desarrollo 104


Los perfiles autorizados podrán administrar la jerarquía del libro aquí.



2 Desarrollo 105

2.2.8. Creando las secciones públicas

Se pide que las noticias marcadas con la señal alama aparezcan en una página osección distinta e identificable para poder después ser dada a otras webs de esta redcomo referencia enlazable.

Para poner esta marca a las noticias o cualquier otro tipo de contenido hay varias vías,pero la más simple y lógica parece que es añadirle tags a nuestro sitio web. Las tags sonmuy importantes para identificar el contenido, respeta la idea de la web semántica, ayudaa google a encontrarnos y también nos puede servir para discriminar una tipo de noticiasde otra y que aparezcan en una página o Vista como llamaremos en Drupal. Las tagpueden ser predefinidas o libres. Usaremos esta última opción. La marca o señal alamahace referencia a que el contenido habla de este tema. No es una funcionalidad nueva ninecesita requisitos específicos por eso me parece la forma de organizar la informaciónmás apropiada.

Figura 2.142: Creando las secciones públicas1

Las tags llamadas en Drupal Taxonomías se crean a través de los Vocabularios queson grupos de tags. Por ejemplo si estuviéramos clasificando objetos podríamos crear unvocabulario que se llamara color y cuyos términos o tags fuesen: rojo,azul,añil,rosa,etc


2 Desarrollo 106


El siguiente paso importante será definir a que tipo de contenido vamos a asignar esevocabulario, ya que no todos los tipos de contenido son sensibles de ser clasificadoscon los mismos vocabularios. Si tuviéramos una embotelladora de agua, difícilmentetendríamos agua roja por poner un ejemplo sencillo.


2 Desarrollo 107


Lo mismo ocurre para nuestra web y en este caso el tipo de contenido que nos interesaque sea clasificado es el blog o bitácora. Hemos seleccionado el tipo de tag Etiquetaslo que quiere decir que no especificaremos la lista de palabras con las que se puedeetiquetar el contenido. Me ha parecido más útil dejar etiquetar libremente a los usuariosya que podrás clasificar su contenido de forma libre y así ser mejor encontrados por losbuscadores y otras páginas de interés.


2 Desarrollo 108


En esta imagen podemos ver como queda el vocabulario después de haber sido crea-do. Podremos ver la lista de términos creados por los usuarios en este caso y agregarnosotros más.


2 Desarrollo 109


Si creamos una entrada del blog o bitácora veremos que ahora nos aparece un cam-po para introducir nuestras tags. El círculo de la derecha en el campo indica que losnombres introducidos se autocompletan, si alguien lo había hecho antes


2 Desarrollo 110


Aquí vemos una entrada hecha y nos aparecen ya como seleccionables las tags inclui-da alama que nos servirá para crear una página de referencia con todo lo que publique-mos cuando añadimos esta tag a un envío nuestro.


2 Desarrollo 111


Éste es sólo un ejemplo de como se ven las noticias cuando presionamos la tag alama,y como copiando su url ya tenemos la Vista en la que sólo nos salen las noticias de lared alama.


2 Desarrollo 112


Ahora debemos crear un enlace en el menú. Pero no como antes. Intranet lo hemosdejando en el menú principal navigation debido a que sólo aparecerá a los usuariosregistrados o miembros del departamento. Por eso el lugar más apropiado para el enlacedel menú de la Intranet parece ser ese conjunto de menús cuyas opciones son tambiénpara mostrar a usuarios registrados. Sin embargo para las secciones públicas pareceobvia la necesidad de crear un apartado nuevo de menús apropiado a la visualizaciónpública.


2 Desarrollo 113


Sin embargo si queremos tener un Menú más limpio donde nos quede bien claro quées lo que le va a aparecer al público, la mejor opción es crear un conjunto de menús.Eso haremos para la nueva sección creada de Alama. Aprovecharemos para definir elmenú por defecto en el que nos aparecerán ya enlazados nuestros contenidos creadosy lo cambiamos de Primary links a secciones de forma que quede en la manera de lafigura.


2 Desarrollo 114


En la siguiente pantalla confirmamos su existencia en la lista de menús del reciéncreado menú y por consiguiente su bloque.


2 Desarrollo 115


Ahora cuando creamos un enlace del menú nuevo no será necesario seleccionar elmenú en que queríamos que apareciera porque ya pusimos en la categoría por defecto.Ésto nos será muy útil para editar las siguientes secciones con rapidez. Caso contrariotendríamos que viajar por todo este menú en busca de la jerarquía de menús adecuadacada vez que crearemos uno nuevo.


Efectivamente al crear la nueva sección en la ruta deberemos colocar la url absolutahttp://matemáticas.unileon.es/?q=taxonomy/term/1 o si queremos ser más limpios la re-


2 Desarrollo 116

lativa taxonomy/term/1. Esto nos creará un enlace en el menú dentro de secciones a lavista de las noticias que han sido categorizados como alama.


¡Qué vemos! Todavía no nos aparece el enlace. ¿Por qué? Cada vez que creamosun grupos de enlaces de menú o Menú a secas como se llama en Drupal, este generaautomáticamente un bloque cuya ubicación aún no hemos definido. ¿Donde apareceráel bloque de nuestro menú? Para ello tendremos que ir a bloques dentro de la sección deadministración para poder hacer uso de una de las funciones más potentes de este gestorde contenido.


2 Desarrollo 117


Como vemos nuestro bloque de menús está al final sin ninguna posición. Lo coloca-remos con los otros menús en el lado izquierdo, recordando que esta configuración sóloafecta a este theme o apariencia.


2 Desarrollo 118


Así quedaría finalmente el bloque de secciones con nuestro menú. De esta formaya tendríamos el sistema preparado para la creación de todas la páginas y seccionespúblicas, proceso que por su simpleza sólo vamos a describir rápidamente.


2 Desarrollo 119


Aunque al usuario sólo le aparecerá la posibilidad de crear su blog y las páginas de laIntranet, el administrador podrá crear otros tipos de contenido. Para las secciones másbien estáticas de la web, he decidido usar el tipo de contenido que ya tiene habilitadopor defecto Drupal Page.


2 Desarrollo 120


Así de sencillo. Indicamos el contenido de la página si es que ya lo sabemos y en lasección de menú indicamos la jerarquía de menú según nuestras preferencias.


2 Desarrollo 121




2 Desarrollo 122


Al crear páginas sólo nos tenemos que preocupar de ir creando la jerarquía. Lo po-demos hacer también con un libro para que quede más organizado como en la Intranet.Pero esto complicaría la administración por parte de los usuarios que tendrían que haceruna operación similar a esta para editar una sección de la Intranet.

¿Qué ocurre si nos confundimos? Ya hemos editado una buena parte de las seccionespúblicas y no hemos puesto las Áreas dentro del menú Áreas.


2 Desarrollo 123


Sólo tendremos que ir a la administración de menús en el submenú que vemos en laimagen. Y arrastrar y soltar haciendo click con el ratón en las cruces y moviendo unpoco a la derecha o la izquierda para determinar la jerarquía.


Podemos colocar en orden de nuevo las páginas simplemente arrastrando y soltandoen la cruceta hacia arriba o hacia abajo si no han quedado en el orden deseado cuandolas creamos o las reorganizamos.


2 Desarrollo 124


Si nos confundimos de orden de importancia también lo podremos solucionar a golpede ratón.


2.2.9. Instalación del CCK y VIEWS

El listado de asignaturas lo programaremos con cck y views. En realidad cck no lonecesitaremos ya que los campos que contiene el módulo perfiles que ya viene en elcore de Drupal nos será suficiente pero lo habilitaremos para futuros desarrollos y paraexperimentar.

Antes de empezar a configurar views y cck haremos un copia de seguridad de la basede datos. Para hacer pruebas de forma tranquila sin destrozar lo hecho hasta ahora.

Una vez bajados los módulos que creemos nos van a ser necesarios procedemos asu instalación como hemos visto con el módulo poorsmancron descomprimiendo en eldirectorio sites/matematicas.unileon.es/modules


2 Desarrollo 125

Figura 2.166: Instalación del CCK y VIEWS1

En este caso hemos elegido cck link y views además del poormanscron que ya hemosinstalado. Los descomprimiremos por el mismo método en nuestra carpeta de módulos.


Procederemos a su activación en la pantalla de preferencias de administración.


2 Desarrollo 126


Aquí podemos ver el módulo anteriormente instalado en el apartado de Otros al finalde la lista de módulos que es donde aparecerán los módulos nuevos que instalemosexcepto raras excepciones.


2 Desarrollo 127


Aquí lo vemos activado. Seleccionamos todas las opciones aunque para el resultadofinal sólo necesitaremos la primera.


2 Desarrollo 128


Aquí vemos los módulos que provee CCK. El campo Link ha aparecido debido a quehemos instalado el módulo link para cck anteriormente. Content habilita el corazón delmódulo que nos permite añadir campos a cualquier tipo de contenido y configurarlosa nuestro antojo. Content copy permite hacer copias de contenido, permissions habi-lita las reglas de acceso, fieldgroup agrupa campos y los demás campos nos habilitanotras funciones obvias y sólo destacar node reference y user reference que nos permitenvincular un campo a un usuario o a un nodo.

Las habilitamos todas aunque sólo necesitaremos content link y user reference.


2 Desarrollo 129


En cuanto los activamos nos pedirá que revisemos los permisos proporcionándonosun enlace directo al mismo.



2 Desarrollo 130

Como todo lo que vamos a crear es público podemos activar el acceso a todas lasvistas a todos los roles de la web. Las vistas o Views son configuraciones que nos per-mitirán personalizar la información mostrada de un forma sorprendente.

La instalación del módulo help, resulta imprescindible para iniciados y expertos, yaque las opciones de cck y views además de ser el plato fuerte de Drupal, aumentan encomplejidad y forma de trabajo con cada versión nueva. Avanzando tanto que este tipode ayudas se ha vuelto casi obligatoria ya que es fácil olvidar las herramientas al alcancey como manejarlas. En esta figura vemos como en la página web para hacer una vistaya nos sugieren la instalación del módulo help.


El enlace nos lleva directamente a la página de descargas donde sólo tendremos queelegir la versión adecuada para nuestra instalación, en este caso Drupal 6.


2 Desarrollo 131


La descarga la haremos como la de otros módulos.


Así como la instalación.



2 Desarrollo 132

Activaremos los módulos en la sección correspondiente bajo Administración, Módu-los.


Esto nos cambiara la vista anterior ofreciéndonos ahora mensajes de ayuda acerca decomo crear nuestra primera vista.


En este caso podemos ver una ayuda acerca de como trabajar con Views.


2 Desarrollo 133


Vamos a crear nuestra Vista del personal que es miembro del departamento. Es decir,un lugar en la web en la que se verán los usuarios con sus asignaturas y otras caracterís-ticas que nos interesen. Lo primero que debemos hacer es comprobar que está habilitadoel módulo.



2 Desarrollo 134

Después nos dirigimos a la sección de administración y seleccionamos el enlaceViews. Y allí para crearla seleccionamos Add lo que nos creará una vista nueva.


Hemos de completar unos datos identificativos esenciales como son: el nombre dela vista, una descripción y si lo deseamos alguna tag para nuestra organización internacomo programadores.

También debemos de seleccionar el dato más importante y que no es cambiable. Sinos confundimos no tendremos más remedio que borrar todo el trabajo echo en la vista.Se trata de saber que tipo de vista va a ser. Puede ser de archivos de contenido, derevisiones de contenido, de comentarios etc.. En nuestro caso va a ser una vista deUsuario.


2 Desarrollo 135


Aquí podemos ver el esquema en detalle del funcionamiento de las distintas partes delentorno de programación de views, donde definiremos todos los campos que deseamosque aparezcan, como tienen que aparecer, el orden etc. En fields iremos añadiendo loscampos y definiendo su forma de mostrarse. Sólo tenemos que hacer click sobre ellos yaparecerán abajo para configurarlos.


2 Desarrollo 136


Aquí se muestra una view por defecto. No tiene creada ninguna página y por lo tantono tiene vista en la cual se pueda ver su resultado. Desde la versión 6, y debido a queera habitual crear muchas vistas con similares resultados, se cambio la programacióndel módulo para que fuera jerárquica. Es decir, creamos una configuración de vista conunos valores genéricos y de esta creamos páginas con valores similares, bloques coninformaciones similares etc.


2 Desarrollo 137


Este es el objetivo. Una lista del personal que pertenezca al rol Miembro del Depar-tamento, en la cual se verá su nombre cargo asignaturas y foto y enlace a su formulariode contacto personalizado. Todos los elementos de interés serán seleccionables para suauto clasificación.


2 Desarrollo 138


Aquí tenemos la configuración de la vista para conseguir este resultado. Como vemosse ha creado una vista de página que sale de la default en la que hemos definido quelos resultados se muestren en forma de tabla y en la que hemos aplicado un filtro. Sólosalen aquellos usuarios cuyo rol sea Miembro del departamento.

Imprescindible ya que ahora hay al menos 2 usuarios que no son miembros de estegrupo. El usuario anónimo que aparecería si no estuviera puesto este filtro y yo mismaque aún siendo la administradora puedo pertenecer o no a otros grupos.


2 Desarrollo 139


2.2.10. Instalación de la plantilla

Para la instalación de la plantilla será necesario crear una carpeta dentro de nues-tro subdirectorio sites llamada themes donde colocaremos nuestro tema de aparienciapersonalizado para el departamento de matemáticas. Existen muchos lugares de dondedescargarse apariencias de Drupal aunque desde luego muchos menos de los que hayen Wordpress. Sin embargo los nuevos requisitos específicos de imagen corporativa dela Universidad de León [7] y la indisponibilidad de los temas de apariencia corporati-vos, me ha obligado ha realizar uno en exclusiva para el Departamento de Matemáticas.El Wordpress del congreso también tiene una apariencia totalmente personalizada, sinembargo el nivel de elementos para tematizar es mucho más alto que el de Wordpressy no ha resultado un trabajo nada desdeñable, tanto por el esfuerzo estético como porla cantidad de elementos a diseñar a nivel de css. Para ello he tomado una plantilla pro-fesional base y la he rediseñado en apariencia completamente, tomando solamente susfunciones básicas.


2 Desarrollo 140

Figura 2.187: Instalación de la plantilla

Un sólo directorio contiene todos los elementos estéticos: imágenes, hojas de css yarchivos de orden de información (tpl’s) y javascripts necesarios para la correcta visua-lización en todos los navegadores y algunos efectos visuales.

Figura 2.188: Instalación de la plantilla2

En administración, temas, podremos encontrar nuestro nuevo tema en la lista. Ten-dremos que activarlo y definirlo por defecto si queremos que sea la apariencia siemprede nuestro sitio web.


2 Desarrollo 141


Cada tema tiene sus propias opciones generadas por el propio Drupal. Marcaremostodas y deshabilitaremos las frases y otras informaciones adicionales que no nos seanútiles, como por ejemplo, la misión del sitio. En el apartado icono personalizado subire-mos el favicon.ico que identificará con una imagen las pestañas de nuestro navegador



2 Desarrollo 142

Después de esto la parte más importante es que va a ir donde. Drupal permite que nodejemos todo el trabajo a las plantillas y cede todo el trabajo de colocación a su secciónde bloques, si el theme esta correctamente programado.


Este es el resultado final: un excelente tema con transparencias. Dejamos el bloque deinicio de sesión el más bajo y cuando se entra como usuario surge el menú de la Intranety las opciones para crear contenido. Por defecto he dejado todo habilitado, como lasfotos de los usuarios en los envíos a la espera de que se pueda cambiar bajo la opiniónde los usuarios. En pequeño arriba a la izquierda decorando la pestaña podemos ver elicono corporativo.


2.3. Desarrollo de plantillas para Wordpress y DrupalEl desarrollo de plantillas o themes entre estos dos gestores de contenido difiere

enormemente, ya que el número de elementos, posibilidades y opciones es mucho mayor


2 Desarrollo 143

en Drupal. La gran popularidad de Wordpress ha hecho que exista una ingente cantidadde plantillas entre las cuales es difícil no encontrar alguna que cubra las expectativasrequeridas. Incluso proliferan sitios web que venden plantillas especializadas para crearun videoblog o un podcast mientras que en Drupal se sigue estilando contratar a unprofesional para que te haga una plantilla a medida o realice severos ajustes a alguna delas plantillas del corazón de la distribución de Drupal. Las herramientas usadas han sidoel editor de textos y firebug extensión de firefox para analizar el código css en vivo sinel cual las ediciones hubieran sido infinitas

2.4. Estado final del ProyectoAquí se puede apreciar como ha quedado el proyecto una vez ha sido concluido.

1. Para la web Physcon:

Figura 2.193: Estado final Physcon


2 Desarrollo 144

Figura 2.194: Estado final physcon2


2 Desarrollo 145

2. Para la web matematicas.unileon.es:

Figura 2.195: Estado final matematicas


2 Desarrollo 146

Figura 2.196: Estado final matematicas2

Figura 2.197: Estado final matematicas3



Síntesis del trabajoEn este capítulo se explican las conclusiones obtenidas una vez finalizado el proyecto,

así como posibles mejoras que puedan realizarse.

ConclusionesTras la finalización del proyecto se puede afirmar que se han alcanzado satisfacto-

riamente todos los objetivos para el “Departamento de Matemáticas”, así como para el“Congreso Physcon de la Universidad de León” (5th International Scientific Conferenceon Physics and Control).

Con la experiencia acumulada en el desarrollo de este trabajo de investigación acercade la actualidad de los gestores de contenido, se han puesto en evidencia sus limita-ciones y necesidades futuras. Resalta especialmente todo lo concerniente al conceptode perfil de usuario usado en los gestores de contenido, concepto cambiante a medidaque los servicios web evolucionan a un perfil más social. Sin duda este concepto deprogramación ha pasado de ser puramente funcional a ser albergador de contenido. Yano sólo sirve para dar la información puntual necesaria para el registro de usuario y suinteractividad a nivel de acceso y permisos con la web, sino que en el futuro será consi-derado a nivel de programación un núcleo de contenido, sensible a la clasificación portags y otros métodos de ordenación, solución que hasta ahora en todos los CMS resulta-ba puramente casual y limitada. Tanto es así que este tema está resultando actualmenteun punto de discusión importante en la comunidad de Drupal, sin duda la pionera eneste tipo de avance, ya que será el primer cms en adoptar este nuevo concepto de pro-gramación como podemos ver en su módulo básico “profile2” actualmente en vías deaceptación dentro del core de Drupal 7 cuando esté totalmente programado.

Al margen de los objetivos del proyecto, “Web del Departamento de Matemáticas” ypara mejorar la usabilidad del proyecto, se han desarrollado unas ayudas de búsquedade dos de los elementos más importantes en el contexto de la aplicación, los profesoresy las asignaturas, de modo que el usuario pueda consultar estos valores de una formarápida y sencilla.

El diseño último de las aplicaciones web se ha concebido pensando en el usuariofinal, tanto en la web del“Departamento de Matemáticas”, como en la web “CongresoPhyscon de la Universidad de León”, se ha buscado las sencillez y la funcionalidad,consiguiendo que el usuario no se encuentre con dificultades la hora de manejar ningunade ellas y considerando que la web en general conlleve un mantenimiento mínimo paragarantizar la longevidad del proyecto.

El proyecto ha servido para adquirir el conocimiento del estado del arte del los gesto-res de contenidos y amplios conocimientos en diversos campos especializados: análisisde diferentes gestores de contenidos (Wordpress, Joomla y Drupal), así como el apren-dizaje específico del manejo de Wordpress y Drupal, aprendizaje de los lenguajes phpy css para el desarrollo de temas para Wordpress y Drupal, administración de bases dedatos de MySQL mediante la herramienta phpMyAdmin.

La mayor dificultad encontrada en el proyecto ha sido comprender las necesidadesy desarrollarlas bajo el gestor de contenido de Drupal, dada la curva exponencial deaprendizaje que implica este gestor de contenido. Al contrario que Wordpress y otros



gestores de contenido, Drupal exige un largo aprendizaje para conocer su forma de hacerlas cosas y solucionar los problemas que implica un entendimiento de una filosofíadel CMS. Este punto negativo se vuelve a favor cuando después realizar desarrolloscomplejos se vuelve mucho más fácil que en cualquier otra plataforma similar. El altonivel de sus contribuyentes de código fuente y la dureza de sus revisores y aceptadoresdel código hacen de ésta la plataforma más idónea para afrontar problemas de desarrolloweb difíciles y de gran calidad. Durante el desarrollo del proyecto se ha utilizado, enun entorno real, las bases de análisis y diseño de sistemas que se han aprendido durantela carrera. Estas bases han demostrado que una buena planificación es la mejor de lasopciones para desarrollar un proyecto cumpliendo con los plazos.

El resultado final del proyecto es una página web, aplicable a este departamento uotros, que está lista para su uso y que facilita enormemente la gestión de contenidos porparte de los profesores, ya que sólo requiere un dispositivo con conexión a Internet parasu manipulación. Esto favorece enormemente el desarrollo de la actividad dentro delDepartamento, así como la comunicación entre todos los miembros. Además, graciasal auge que tiene Internet en la actualidad, es muy probable que en un futuro a corto-medio plazo, este proyecto u otros similares estén implantado en la gran mayoría de losdepartamentos de la Universidad de León.

Líneas de trabajo futurasToda aplicación es susceptible de ser mejorada, por tanto, se han pensado en algunas

posibles ampliaciones futuras entre las que destacan:

Ofrecer actualización automatizada: mediante herramientas de fácil gestión co-mo drush

Integración de un editor de texto html enriquecido: para facilitar la edición delas noticias, ofreciendo más funcionalidad.

Optimización de la estética: a lo largo del uso se podrá saber cuáles son lasnecesidades especificas no contempladas actualmente.

Ofrecer soporte para múltiples idiomas: actualmente los textos de las aplica-ciones Web están en castellano, pero dado la cantidad del alumnos que se recibende otras universidades, sería posible traducir estas aplicaciones a diversos idiomasprácticamente sin dificultad alguna

Ampliar y mejorar la ayuda de búsqueda: el principal problema con el quese encuentra el usuario final de la aplicación, es que casi siempre desconoce deinformación exacta sobre los distintos elementos.

Conexión automática con redes sociales: que lo que publiquemos en la webaparezca en nuestro grupo de facebook o en twitter u otras redes sociales futurasparece una función interesante mirando al futuro.


Referencias 149

Referencias[1] BYRON, A. BERRY, A. HAUG, N. EATON, J. WALKER, J. ROBBINS,

J. Drupal, 2o ed. Madrid: Ediciones Anaya Multimedia, 2010. 544 p. ISBN9788441526129

[2] MERCER, D. Building powerful and robust websites with Drupal 6, 2o ed. Bir-mingham: Packt Publishing Ltd., 2008. 380 p. ISBN 9781847192974

[3] VANDYK, J. Drupal Development Pro, 2o ed. United States of America: Apress,2008. 661 p. ISBN 9781430209904

[4] BOWEN, R. COAR, K Apache Cookbook, 1o ed. United States of America:O’Reilly, 2007. 306 p. ISBN 9780596529949

[5] SUEHRING, S. PHP6 and MySQL, Bible, 1o ed. Canada: Wiley Publishing, Inc,2009. 873 p. ISBN 9780470384503

[6] Drupal [en línea] DRUPAL Community, forum, module donwload, 2010 [Con-sultado: 10 de mayo 2010]. Disponible en World Wide Web:<http://drupal.org/>

[7] Manual de Identidad Corporativa [en línea] Universidad de León, 2010 [Con-sultado: 10 de mayo 2010]. Disponible en World Wide Web:<http://www.unileon.es/ficheros/informacion_general/id_visual_corporativa/manual_ule.pdf/>

[8] Wordpress [en línea] Wordpress donwload, 2010 [Consultado: 10 de mayo 2010].Disponible en World Wide Web:<http://wordpress.org/>

[9] PhpMyAdmin [en línea] PhpMyAdmin configuration, 2010 [Consultado: 10 demayo 2010]. Disponible en World Wide Web:<http://www.phpmyadmin.net/home_page/>


http://drupal.org/

http://www.unileon.es/ficheros/informacion_general/id_visual_corporativa/manual_ule.pdf/

http://www.unileon.es/ficheros/informacion_general/id_visual_corporativa/manual_ule.pdf/

http://wordpress.org/

http://www.phpmyadmin.net/home_page/

trabajo fin de carrera gestores de contenido web: wordpress y

Documents