Implementación de una aplicación web usando el sistema gestor de contenidos drupal

! ! ! ESCUELA!TÉCNICA!SUPERIOR!DE!INGENIERÍA!INFORMÁTICA! ! GRADUADO'EN'INGENIERIA'DEL'SOFTWARE' ! ! ! IMPLEMENTACION!DE!UNA!APLICACIÓN!WEB!USANDO!EL!SISTEMA!GESTOR! DE!CONTENIDOS!DRUPAL! ! ! IMPLEMENTATION'OF'A'WEB'APPLICATION'USING'THE'CONTENT' MANAGEMENT'SYSTEM'DRUPAL' ! ! ! Realizado)por) ! Antonio!Molina!Olivares! ! ! ! Tutorizado)por) ! Antonio!Jesús!Nebro!Urbaneja! ! ! ! Departamento) ! Lenguajes!y!Ciencias!de!la!Computación! ! ! ! ! UNIVERSIDAD!DE!MÁLAGA! ! !!!Málaga,!Julio!2015! ! ) ) ) ) Fecha)de)defensa:) ) El)secretario)del)tribunal:) ) Resumen:"El"proceso"de"desarrollo"de"software"define"una"secuencia"de"actividades" que"se"aplican"en"la"creación"de"un"producto"o"aplicación"de"tipo"software."Entre"las" actividades" que" se" pueden" realizar" dentro" del" ciclo" de" vida" del" desarrollo" software" destacamos"algunas"como"pueden"ser"la"captura"de"requisitos,"el"análisis,"el"diseño,"la" implementación,"las"pruebas,"la"documentación,"el"despliegue"o"el"mantenimiento."" " En" este" trabajo" fin" de" grado" se" propone" desarrollar" una" aplicación" web" desde" sus" primeras"etapas"hasta"las"últimas,"indicando"como"aplica"cada"una"de"ellas"al"ejemplo" de"un"proyecto"real."" " Para"nuestro"caso,"el"desarrollo"de"software"consistirá"en"la"creación"de"una"aplicación" web"para" una" clínica" podológica,"en" la" que" vamos" a" tener" un"cliente,"en"este" caso" el" propietario"de"la"clínica,"que"demanda"funcionalidades"y"que"necesita"que"el"software" cumpla"con"sus"necesidades."" " Dicha" página" Web" servirá" para" promocionar" los" servicios" de" la" clínica," mostrar" una" galería" de" fotos," tendrá" un" formulario" de" contacto," gran" cantidad" de" páginas" de" información," un" mapa" de" geoFlocalización" para" mostrar" la" ubicación," menús" de" navegación," mapa" web," buscador" y" otras" funcionalidades" más" típicas" de" cualquier" página"Web."Además,"la"aplicación"deberá"cumplir"ciertos"requisitos"de"usabilidad"así" como"ser"navegable"en"dispositivos"móviles,"responsivo." " La"creación"de"la"aplicación"se""hará"con"el"sistema"gestor"de"contenidos"Drupal,"una" herramienta"muy"utilizada"actualmente"para"crear"y"gestionar"aplicaciones"Web"y"con" la" que" podremos" implementar" todas" las" funcionalidades" demandadas" por" nuestro" cliente." " Palabras,clave:"Drupal,"Software,"Ciclo,"Vida,"Ingeniería,"Sistema,"Gestión,"Contenidos,"" Requisitos,"Análisis,"Diseño,"Implementación,"Documentación,"Pruebas,"Implantación," Despliegue,"Calidad." " " " " " " Abstract:" The" software" development" process" defines" a" sequence" of" activities" that" apply"to"the"creation"of"a"product"or"application"software."Among"the"activities"that"can" be" performed" within" the" life" cycle" of" software" development" we" highlight" some" as" requirements" capture," analysis," design," implementation" ," testing," documentation," deployment"and"maintenance." " This"final"degree"project"it"intends"to"develop"a"Web"application"from"its"early"stages"to" the"last","indicating"how"each"of"them"applies"to"a"real"project." " In"our"case,"the"software"development"will"be"the"creation"of"a"Web"application"for"a" foot" clinic," which" will" have" a" customer" ," in" this" case" the" owner" of" the" clinic," who" demands"functionality"and"needs"that"the"software"resolves"their"needs." " This"website"will"serve"to"promote"the"services"of"the"clinic,"show"a"photo"gallery,"have" a"contact"form","a"lot"of"pages"of"information,"a"geo@location"map"to"show"the"location," navigation" menus," site" map," search" and" more" typical" functions" os" this" kind" of" Web" page." Besides" this," the" application" must" meet" certain" requirements" of" usability" and" mobile"mobility,"responsive"design." " The" creation" of" the" application" will" be" made" with" the" content" management" system" Drupal,"currently"used"to"create"and"manage"Web"applications"and"with"which"we"can" implement"all"the"requirements"demanded"by"our"client." " Keywords:"Drupal"Software,"Cycle,"Life,"Engineering,"System,"Management,"Contents," Requirements,"Analysis,"Design,"Implementation,"Documentation,"Tests,"Implantation," Deployment,"Quality"" Indice'General' ! 1.!!!Introducción! 1.1!Objetivos! 1.2!Fases!del!Proyecto! 1.3!Estructura!de!la!Memoria! ! 2.!!Conceptos!Básicos! 2.1!Apache! 2.2!MySQL! 2.3!XAMPP! 2.4!HTML! 2.5!CSS! 2.6!PHP! 2.7!DRUPAL!CMS! ! 3!!Ciclo!de!Vida!del!Desarrollo!Software! 3.1!Captura!de!Requisitos! 3.2!Análisis!de!la!Solución! 3.3!Diseño!de!la!Aplicación! 3.4!Implementación! 3.5!Pruebas! 3.6!Documentación! 3.7!Implantación!y!Despliegue! 3.8!Mantenimiento! ! 4.!Conclusiones!y!Trabajos!Futuros! ! 5.!Referencias! ! 6.!!Apéndice! 6.1!Contenido!del!CD! 6.2!Manual!de!Instalación!y!Configuración! 6.3!Manual!de!Usuario! ! ! 1! 1. Introducción- - El!término!ciclo!de!vida!del!software!describe!el!desarrollo!de!software!desde!la!fase! inicial! hasta! la! fase! final.! El! propósito! de! este! proyecto! es! definir! cada! una! de! estas! etapas!en!detalle!y!así!poder!validar!el!desarrollo!de!una!aplicación!Web.! ! Todo!ingeniero!software!debe!conocer!perfectamente!estas!tareas!y!debe!ser!capaz!de! aplicarlas!en!el!desarrollo!de!productos!y!aplicaciones!software.!Es!importante!conocer! cuáles!son!estas!actividades!en!el!ciclo!de!vida!de!desarrollo!pero!mas!aun!lo!es!el!saber! como!aplica!cada!una!de!ellas!a!la!etapa!del!desarrollo!en!la!que!nos!encontremos.!!! ! En!este!caso,!se!va!a!desarrollar!una!aplicación!Web!que!servirá!para!promocionar!los! servicios!de!una!clínica!podológica,!mostrar!una!galería!de!fotos,!tendrá!un!formulario! de! contacto,! gran! cantidad! de! páginas! de! información,! un! mapa! de! geoClocalización! para! mostrar! la! ubicación,! menús! de! navegación,! mapa! Web,! buscador! y! otras! funcionalidades!más!típicas!de!un!portal!Web!estándar.! - 1.1 Objetivos- - Los!objetivos!del!trabajo!fin!de!grado!son!principalmente!los!siguientes:!- ! 1. Desarrollo! de! una! aplicación! Web! paso! a! paso,! desde! las! primeras! etapas! del! desarrollo!del!ciclo!de!vida!del!software!hasta!las!últimas.! ! 2. Como!proyecto!desarrollado!con!Drupal,!explicar!como!esta!herramienta!que!nos! aporta!las!soluciones!que!necesitamos!para!poder!implementar!el!producto!final.! ! 1.!Desarrollo(de(una(aplicación(Web( ! En!este!apartado!se!detallará!paso!por!paso!como!iremos!creando!nuestra!aplicación! Web,!desde!las!fases!iniciales!de!captura!de!requisitos!y!análisis,!pasando!por!la!fase!de! configuración!de!la!herramienta,!la!implementación,!las!pruebas!o!el!despliegue.! ! Podemos!diferenciar!varios!apartados!en!este!punto:! ! • Definición!de!requisitos! o Reuniones!con!el!cliente! • Análisis!de!la!solución! o Viabilidad!de!la!solución!software! • Diseño!de!la!aplicación! o Creación!de!mockups!de!presentación!que!se!ajusten!a!la!interfaz!gráfica! deseada! o Diseño!de!la!estructura!y!regiones!para!el!tema!gráfico!(cabecera,!menú,! cuerpo,!pie,!menús…)! • Implementación! o Instalación!y!configuración!de!módulos!necesarios! o Creación! de! contextos! para! las! páginas! (unificar! comportamientos! comunes)! ! 2! o Creación! de! bloques! con! funcionalidades! (regiones! particulares! de! código)! o Creación!de!listados!para!mostrar!contenidos!(uso!de!vistas)! o Creación!de!páginas!de!información!(elemento!básico!de!contenido)! o Creación!de!formularios!(mediante!componentes)! o Responsivo! • Pruebas! o Tests!en!Drupal! • Documentación! o Manual!de!usuario/administrador! • Despliegue! o Instrucciones!de!instalación!y!despliegue! • Mantenimiento! ! Con!el!desarrollo!de!este!trabajo!fin!de!grado!la!idea!es!que!un!usuario!sea!capaz!de! crear!software!aplicando!satisfactoriamente!todas!las!etapas!existentes!en!el!desarrollo! (que! para! nuestro! caso! se! verá! en! la! implementación! de! la! aplicación! Web! de! una! clínica!podológica)!así!como!dar!una!visión!cercana!sobre!cuáles!son!los!conceptos!mas! importantes! de! un! sistema! de! gestión! de! contenidos! como! Drupal! y! como! aplicarlos! para!la!gestión!de!un!sitio!Web.! ! 2.!Principales(componentes(de(Drupal( ( Se! explicarán! cuáles! son! los! conceptos! principales! que! maneja! la! herramienta! y! que! son!necesarios!entender!para!la!construcción!de!nuestra!aplicación!Web.! ! Sobre! todo! haremos! hincapié! en! las! principales! componentes! de! esta! herramienta! como!son!las!vistas,!contextos,!temas,!páginas!o!bloques!y!la!manera!en!la!que!aplican! en!nuestro!proyecto!para!darnos!la!solución!que!necesitamos.! - 1.2 Fases-del-Proyecto- - La!elaboración!del!trabajo!fin!de!grado!se!puede!dividir!en!las!siguientes!fases:! ! • Captura!de!requisitos!de!la!aplicación!Web!y!análisis!de!la!solución- • Estudio!y!análisis!general!del!sistema!de!gestión!de!contenidos!Drupal- • Creación!del!diseño!gráfico!(hojas!de!estilo,!imágenes,!templates)- • Instalación!y!configuración!de!un!servidor!Apache!con!Mysql- • Instalación!de!Drupal- • Instalación!y!configuración!de!módulos!adicionales- • Implementación!de!componentes!y!funcionalidades- • Personalización!mediante!la!creación!de!contextos,!bloques,!vistas…- • Pruebas- • Documentación!y!elaboración!de!memoria!del!trabajo!fin!de!grado- • Despliegue!y!mantenimiento- ! - - ! 3! 1.3 Estructura-de-la-Memoria- - Los!capítulos!de!esta!memoria!son!los!siguientes:! ! • Capítulo-1-Introducción.!Descripción!general!de!los!objetivos!y!fases!del! proyecto.- • Capítulo-2-Conceptos-Básicos.!Introducción!a!las!tecnologías!utilizadas!en!el! proyecto.!Descripción!de!conceptos!relacionados.- • Capítulo-3-Ciclo-de-Vida-del-Desarrollo-Software.!Descripción!de!las! principales!etapas!del!desarrollo!software!y!su!aplicación!a!la!Web.- • Capítulo-4-Conclusión-y-Trabajos-Futuros.!Comentarios!sobre!la!aplicación.- • Capítulo-5-Referencias.- • Capítulo-6-Apéndice.!Descripción!del!CD!adjunto.- ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! - - - ! 4! 2. Conceptos-Básicos- - En! esta! sección! se! describen! algunas! de! las! componentes! más! importantes! que! se! utilizan!en!el!proyecto.! ! 2.1 Apache- ! Apache-es!un!servidor!Web!HTTP!de!código!abierto!para!plataformas!Unix,!Microsoft! Windows,!!Macintosh!y!otras,!que!implementa!el!protocolo!HTTP/1.1!y!el!concepto!de! sitio!virtual.!! ! El!servidor!Apache!se!desarrolla!dentro!del!proyecto!HTTP!Server!(httpd)!de!la!Apache! Software!Fundation!(Fundación!creada!para!dar!soporte!a!los!proyectos!Software!bajo! la!denominación!Apache)!y!es!usado!principalmente!para!enviar!páginas!Web!estáticas! y! dinámicas! en! la! World! Wide! Web.! ! Muchas! aplicaciones! Web! están! diseñadas! asumiendo!como!ambiente!de!implantación!a!Apache,!o!que!utilizarán!características! propias!de!este!servidor.! ! Apache! es! el! servidor! de! aplicaciones! que! se! utiliza!en! la! popular! plataforma! de! aplicaciones!LAMPP,!junto!a!MySQL!y!los!lenguajes!de!programación!PHP,!Perl,!Python,! o!Ruby.!! ! Entre!las!principales!características!destacamos!las!siguientes:! ! • Modular!à!Sus!componentes!se!dividen!en!módulos!del!core!y!externos.!!Esto! permite!una!mejor!estructuración!del!código.! • Código-abierto!à!Cualquier!persona!puede!descargar!y!utilizar!gratuitamente! este!servidor.!Es!software!de!libre!distribución.! • Multiplataforma!à!Válido!para!múltiples!entornos!Linux,!Macintosh!o! Windows.! • Extensible!à!Al!ser!modular!permite!la!implementación!de!extensiones!fuera! del!core,!como!por!ejemplo!la!mod_php.! • Popular!à!Fácil!conseguir!ayuda!y!soporte!técnico! - ! Para!obtener!mas!información!sobre!Apache,!se!puede!consultar!el!sitio:!! http://httpd.apache.org/! ! ! ! ! ! ! 5! 2.2 MySQL- ! Es!un!sistema!de!gestión!de!bases!de!datos!relacional,!multihilo!y!multiusuario.!MySQL! se! desarrolla! como! software! libre! licenciamiento! dual.! Por! un! lado! se! ofrece! bajo! la! GNU!GPL!para!cualquier!uso!compatible!de!esta!licencia,!pero!para!aquellas!empresas! que! quieran! incorporarlo! en! productos! privativos! deben! comprar! a! la! empresa! una! licencia!específica!que!les!permita!este!uso.!Está!desarrollado!en!su!mayor!parte!en!el! estándar!ANSI!C.! ! Al! contrario! de! proyectos! como!Apache,! donde! el! software! es! desarrollado! por! una! comunidad! pública! y! los!derechos! de! autor!del! código! están! en! poder! del! autor! individual,!MySQL!es!patrocinado!por!una!empresa!privada,!que!posee!el!copyright!de! la! mayor! parte! del! código.! Esto! es! lo! que! posibilita! el! esquema! de! licenciamiento! anteriormente! mencionado.! Además! de! la! venta! de! licencias! privativas,! la! compañía! ofrece!soporte!y!servicios.! ! Para!hacerse!una!idea!de!la!popularización!que!tiene!MySQL!hoy!en!día,!basta!con!citar! algunos!de!los!proyectos!que!lo!utilizan:!Wikipedia,!Google,!Facebook,!Twitter,!Flickr!y! Youtube.! ! Entre!sus!principales!características!destacamos:! ! • Multihilo!à! Permite! la! separación! de! las! tareas! en! múltiples! hilos! (threads)! que! son! ejecutados! por! separado! para! obtener! los! resultados.! Esto! permite! aumentar! la! velocidad! en! las! operaciones! lo! que! lo! convierte! en! uno! de! los! gestores!relacionales!mas!rápidos!y!con!mejor!rendimiento.! • Multiusuario!à! Permite! procesar! operaciones! de! múltiples! usuarios! simultáneamente.! • Softwarelibre!à!Podemos!utilizar!licencias!con!fines!no!lucrativos!de!forma! gratuita.! • Multiplataforma!à!Se!puede!ejecutar!en!muchos!sistemas!operativos!(Linux,! Mac,!Windows….)! • Popular-à-Al!ser!muy!utilizado,!se!puede!encontrar!información!sin!dificultad.! ! !! ! ! Para!obtener!mas!información!sobre!Apache,!se!puede!consultar!el!sitio:!! https://www.mysql.com/! ! - 2.3 XAMPP- ( Cuando!queremos!realizar!proyectos!Web!se!hace!necesario!la!instalación!de!una!serie! de! herramientas! y! aplicaciones! para! tal! fin! como! por! ejemplo! compiladores! de! lenguajes! de! programación,! servidores! de! aplicaciones! para! poder! probar! los! ! 12! • Documentación! • Implantación! • Mantenimiento! ! ! 3.1 Captura-de-Requisitos- - Introducción( - Esta! etapa! mas! formalmente! llamada! ingeniería! de! requisitos,! comprende! todas! las! tareas!relacionadas!con!la!determinación!de!las!necesidades!y!requisitos!a!satisfacer! para!cumplir!con!los!objetivos!del!producto!software.! ! En! el! ámbito! de! la! ingeniería! del! software,! ! podemos! definir! un! requisito! como! una! necesidad!documentada!sobre! el! contenido,! forma!o!funcionalidad!de! un! producto! o! servicio.!Establecen!que!debe!hacer!un!sistema!pero!no!como!hacerlo.!! ! Destacamos!dos!tipos!!de!requisitos:! ! • Funcionales-à! son! descripciones! documentadas! de! cosas! que! debe! hacer! el! producto!a!entregar.! ! • No-funcionales!à!pueden!referirse!a!conceptos!mas!generales!pero!no!por!ello! menos!importantes,!por!ejemplo!rendimiento,!calidad!o!usabilidad.! ! Los!buenos!requisitos!deben!ser!ponderables!y!sobre!todo!no!contener!ambigüedades! o!contradicciones.! ! La!captura!de!requisitos!en!general!es!de!vital!importancia!porque!depende!de!ella!el! éxito!del!resto!ya!que!es!donde!tenemos!que!asentar!las!especificaciones!del!proyecto!y! tener! absolutamente! claro! que! tenemos! que! hacer.! De! hecho,! los! requisitos! son! directamente!los!datos!de!entrada!que!recibe!la!etapa!justamente!posterior!en!el!ciclo! de!vida,!la!etapa!de!diseño.! ! El! propósito! de! la! ingeniería! de! requisitos! es! hacer! que! los! requisitos!alcancen! un! estado!óptimo!antes!de!llegar!a!la!fase!de!diseño!en!el!proyecto.!! ( Aplicación( - El!desarrollo!de!la!aplicación!Web!comenzó!con!una!primera!reunión!con!el!cliente,!en! nuestro!caso!una!podóloga!que!acababa!de!abrir!su!clínica!y!quería!promocionarse.! ! En!ella!el!cliente!expresó!que!quería!crear!un!portal!Web!con!los!siguientes!requisitos:! ! 1. Determinar!la!tecnología!y!herramientas!a!utilizar! 2. Promocionar!los!servicios!destacados! 3. Incorporar!distintas!secciones!de!información! 4. Mostrar!banners!representativos! 5. Poder!realizar!ofertas!y!promociones! ! 13! 6. Formulario!de!contacto! 7. Mapa!de!geoClocalización!para!ubicar!la!clínica!fácilmente! 8. Buscador!de!información!de!contenido! 9. Galería!de!fotos! 10. Adaptada!a!dispositivos!móviles! 11. Zona!donde!poder!dar!consejos!a!los!usuarios! 12. Enlaces!destacados! 13. Facilidad!de!gestión!de!la!información! 14. Temática!de!acuerdo!a!los!colores!de!la!clínica! 15. Fácil!navegación!! 16. Buen!rendimiento! 17. Coste!económico!no!elevado! 18. Estabilidad!y!seguridad!del!software! ! La!mayoría!de!los!requisitos!como!se!puede!apreciar!son!no!funcionales,!es!decir,!son! requisitos! sobre! conceptos! o! ideas! que! se! necesitan! implementar! pero! que! no! se! encuentran!muy!detallados.!!Los!requisitos!no!funcionales!son!mas!habituales!cuando! el!cliente!no!es!del!ámbito!tecnológico!o!no!tiene!normalmente!experiencia!en!requerir! este!tipo!de!productos!o!servicios!ya!que!cuando!es!así!normalmente!los!requisitos!se! especifican!en!detalle!y!quedan!perfectamente!documentados.! ! En!principio!podemos!decir!que!las!necesidades!estaban!claras!y!las!funcionalidades! requeridas!eran!bastante!comunes.!El!cliente!no!detalló!en!exceso!cuál!quería!que!fuese! la!estructura!de!la!Web,!!tenía!claro!las!conceptos!que!necesitaba!pero!lo!dejaba!en!mis! manos!para!analizar!la!solución!y!poder!darle!una!respuesta!sobre!si!era!o!no!viable! hacer!el!proyecto!con!lo!que!estaba!pidiendo.! ! ! ! 3.2 Análisis-de-la-Solución- - Introducción( - En!esta!etapa!del!ciclo!de!vida!del!desarrollo!software!el!ingeniero!determina!si!es!o!no! viable!la!realización!del!producto!de!acuerdo!a!las!necesidades!del!cliente.! ! Hay!que!analizar!con!especial!detalle!todo!los!requisitos!que!en!principio!puedan!ser! mas!complicados!porque!de!su!ejecución!podrá!depender!que!la!implementación!del! producto!final!se!lleve!a!cabo!o!no.!Incluso!aunque!se!de!el!caso!de!que!algún!requisito! no! se! puede! realizar! o! sea! incompatible! con! otro,! se! pueden! proponer! alternativas! siempre!y!cuando!cuenten!con!la!aprobación!final!del!cliente.! ! ! 14! Los!posibles!problemas! que! se! pueden!producir!durante!el! análisis! de! los!requisitos! son:! ! • El!personal!técnico!y!los!clientes!finales!pueden!tener!vocabularios!distintos!y! pueden!llegar!a!creer!incorrectamente!que!están!de!acuerdo!cuando!en!realidad! ambos!se!están!refiriendo!a!cosas!distintas.! ! • Los!desarrolladores!pueden!intentar!encajar!el!sistema!en!un!modelo!existente! en!vez!de!desarrollar!un!sistema!nuevo!y!único!adaptado!al!cliente.! ! • En! ocasiones! el! análisis! de! requisitos! lo! puede! hacer! un! ingeniero! o! programador! que! no! tenga! las! suficientes! habilidades! de! relación! o! el! conocimiento!apropiado!para!entender!las!necesidades!de!un!cliente.! - - ( Aplicación( ! A!continuación!se!muestran!las!deducciones!y!conclusiones!que!obtuve!al!analizar!cada! uno!de!los!requisitos!presentados.! ! 1. Determinarlatecnologíayherramientasautilizar!à!Teniendo! una! visión! genérica!de!las!necesidades!del!cliente!y!con!el!objetivo!de!ver!si!cada!requisito! podría!ser!satisfecho!o!no!cuando!lo!analizara,!creí!conveniente!primero!intentar! buscar!una!solución!tecnológica!que!se!adaptara!a!nuestras!necesidades.!Teniendo! en!cuenta!que!existían!requisitos!vitales!para!el!cliente!tales!como!el!rendimiento,! el! coste! económico! y! la! facilidad! de! gestión! y! administración! decidí! que! lo! que! tenía!que!usar!era!un!sistema!gestor!de!contenidos!o!más!comúnmente!llamado! CMS!(Content!Management!System).! - Un!CMS!tiene!la!ventaja!que!al!estar!pensado!ya!de!por!sí!para!la!gestión!presenta! interfaces! de! usuario! amigables! y! que! facilitan! las! tareas! de! mantenimiento.! Teniendo! en! cuenta! que! debía! abaratar! costes! como! fuese! posible! para! dar! viabilidad! al! proyecto,! pensé! en! un! CMS! de! software! libre.! Por! último,! para! asegurar! el! correcto! funcionamiento! y! rendimiento! me! puse! a! investigar! sobre! CMS!que!fuesen!muy!populares!y!que!tuvieran!gran!comunidad!de!usuarios!detrás! con!el!objetivo!de!que! ante! cualquier! duda! que!pudiera!surgir,!poder!encontrar! una!solución!rápidamente.! ! Por! todo! lo! anterior! decidí! inclinarme! por! Drupal! (implementado! con! PHP)! debido!también!a!que!vi!que!tenía!un!carácter!bastante!modular!y!eso!me!podría! ayudar! a! la! hora! de! incorporar! de! forma! independiente! las! distintas! funcionalidades!que!el!cliente!demandaba.! ! ! 15! 2. Promocionarlosserviciosdestacados!à!Una! clínica! de! podología! presta! servicios! de! distinto! tipo! de! acuerdo! a! los! tratamientos! que! ofrece.! Cualquier! usuario!de!una!Web!que!entre!en!una!página!que!servicios!lo!que!quiere!es!poder! encontrarlos! rápido! y! con! buenas! descripciones! de! qué! pueden! ofrecer.! Al! ser! quizás! el! punto! de! información! mas! importante! a! mostrar! consideré! que! debía! tener!una!sección!específica!para!mostrarlos.!Desde!el!punto!de!vista!de!Drupal! estos!servicios!estarían!en!un!contenido!de!tipo!página.! ! 3. Incorporar-distintas-secciones-de-información!à!Como!cualquier!negocio,!es! importante!además!de!promocionar!los!servicios,!otro!tipo!de!información.!Es!por! ello!que!pensé!en!la!creación!de!distintas!secciones!también!teniendo!en!cuenta! algunos!requisitos!que!me!había!percatado!que!serían!necesarios:!! ( a. Inicio,!a!modo!de!página!principal!donde!mostrar!información!directa).! b. !¿Quiénes!somos?!Información!mas!concreta!sobre!la!clínica!y!su! personal).! c. Equipamiento,!donde!mostrar!los!utensilios!y!maquinaria!con!los!que!la! clínica!está!equipada.! d. Servicios,!mostrar!los!servicios!que!la!clínica!realizar.! e. Ofertas,!donde!ubicar!las!ofertas!en!promoción!de!la!clínica.! f. Contacto,!para!incluir!un!formulario!de!contacto.! g. Buenas!prácticas,!para!mostrar!consejos!relacionados!con!el!cuidado!del! pie.! h. ¿Cómo!llegar?!Incluyendo!un!mapa!de!geoClocalización!de!la!clínica.! ! Todos!estos!contenidos!también!podrían!considerarse!como!páginas!dentro!de!la! arquitectura!de!contenidos!de!Drupal.!Además!todas!estas!secciones!iban!a!estar! representadas!a!través!de!un!menú!transversal!de!navegación.! ! 4. Mostrarbannersrepresentativos!à!Se!refiere!a!información!mas!destacada!y! visible!que!debía!venir!acompañada!como!es!lógico!de!una!imagen!representativa! de!la!información!que!mostraba.!Drupal!ofrece!un!módulo!que!se!llama!Nivo!Slider! y!que!ofrece!precisamente!esta!funcionalidad.! ! 5. Poderrealizarofertasypromociones-à!Para! ello! tenía! pensado! crear! una! sección!específica!donde!poder!mostrar!contenido!sobre!ofertas!y!promociones.! Igualmente!sería!un!contenido!de!tipo!página!de!Drupal.! ! 6. Formulario-de-contacto-à!Ante!la!necesidad!del!cliente!de!poder!facilitar!a!los! usuarios!que!se!pusieran!en!contacto!con!él,!mi!idea!era!crear!una!nueva!sección! única!y!exclusivamente!para!poder!contactar!con!la!clínica.!El!módulo!Webform!de! Drupal!me!daba!la!solución.! ! 7. MapadegeoYlocalizaciónparaubicarlaclínicafácilmente-à! Está! muy! de! moda!tener!un!mapa!de!tipo!Google!Maps!para!poder!ubicar!en!un!mapa!dinámico! un! lugar.! Pretendía! justamente! esto! y! ví! que! lo! podía! conseguir! utilizando! el! módulo!de!Drupal!Location!Map.! ! ! 16! 8. Buscador-de-información-de-contenido-à!El!objetivo!de!este!requisito!es!que! cualquier!usuario!pudiera!realizar!búsquedas!de!contenidos!para!poder!acceder! directamente!a!los!temas!de!su!interés.!El!módulo!Search!de!Drupal!proporciona! esta!funcionalidad.! ! 9. Galería-de-fotos-à!El!cliente!quería!tener!una!sección!donde!poder!ver!fotos!de! su!clínica.!Para!ello!pensé!habilitar!en!el!pie!de!página!un!listado!de!imágenes!que! se!pudieran!mostrar!al!pulsar!sobre!ellas.!En!Drupal!esto!se!podía!implementar! con!el!módulo!Lightbox.! ! 10. Adaptada-a-dispositivos-móviles-à-Era!fundamental!que!la!aplicación!Web!se! visualizase! correctamente! en! dispositivos! móviles.! Drupal! proporciona! gran! cantidad!de!temas!para!poder!aplicar!a!un!sitio!Web,!de!manera!que!utilicé!uno!de! ellos!que!ya!tenía!implementada!esa!característica!responsive.!El!tema!utilizado!es! Rubix! Responsive! Theme! aunque! por! supuesto! tuve! que! hacer! muchas! modificaciones!en!él!para!adaptarlo!a!la!temática!y!estilo!gráfico!de!la!clínica.! ! 11. Zona-donde-poder-dar-consejos-a-los-usuarios-à-Se!podía!considerar!un!tipo! de! contenido! de! Drupal! de! tipo! página.! Tendrá! una! ubicación! destacada! en! el! menú!de!la!aplicación.! ! 12. Enlacesdestacadosà-Similar! a! las! páginas! de! información,! Drupal! permite! definir! bloques! de! código! para! ubicarlo! en! distintas! regiones! de! la! Web.! Los! enlaces!destacados!serían!precisamente!esto.! ! 13. FacilidaddegestióndelainformaciónàDrupal! proporciona! una! interfaz! amigable! para! que! una! persona! con! los! permisos! necesarios! sea! capaz! de! gestionar!y!mantener!los!contenidos!de!la!Web.! ! 14. Temáticadeacuerdoaloscoloresdelaclínicaà! Además! del! concepto! de! responsive,! la! aplicación! debía! poseer! estilos! gráficos! que! fuesen! en! la! misma! línea!de!la!decoración!de!la!consulta.!Como!la!clínica!tiene!tonos!blancos,!grises!y! morados,! esos! mismos! colores! son! los! que! había! que! modificar! en! las! hojas! de! estilos!del!tema!para!que!quedase!de!acuerdo!a!las!necesidades!indicadas.! ! 15. Fácilnavegaciónà!Uno!de!los!aspectos!mas!importantes!a!tener!en!cuenta!en! cualquier!producto!o!servicio,!incluso!independientemente!del!ámbito!al!que!nos! refiramos,! es! la! facilidad! para! poder! interactuar! con! él.! Si! no! diseñamos! un! producto! que! sea! intuitivo! y! que! realmente! satisfaga! las! necesidades! de! los! clientes!habremos!fracasado.!No!hay!que!olvidar!que!por!muy!bonita!que!sea!una! aplicación!Web!si!al!final!no!es!intuitiva!lo!más!probable!es!que!no!tenga!éxito.! ! Drupal!tiene!una!estructura!bastante!jerarquizada!de!componentes!con!las!cuáles! se! puede! gestionar! de! manera! eficiente! los! elementos! visibles! y! facilitar! la! navegación! al! usuario.! Mediante! el! uso! de! menús,! bloques,! contextos,! paneles,! categorías,!etc…!se!permite!personalizar!el!aspecto!de!nuestra!Web.!! ! 16. Buenrendimiento-à! Nuestro! CMS! es! mundialmente! conocido! por! la! gran! cantidad! de! usuarios! que! lo! utilizan.! Existe! una! comunidad! muy! grande! de! ! 17! programadores! que! mantienen! Drupal! y! van! continuamente! sacando! nuevas! versiones! del! core! (núcleo)! con! el! objetivo! de! ir! siempre! mejorando! sus! características.!Existen!algunos!módulos!en!Drupal!para!mejorar!el!rendimiento,! pero!el!más!importante!es!sin!duda!Memcache.! ! 17. Coste-económico-no-elevado-à!Teniendo!en!cuenta!que!el!coste!del!proyecto!no! podía!ser!elevado,!recortar!gastos!en!la!tecnología!a!utilizar!como!consecuencia!de! no!tener!que!pagar!licencias!era!un!punto!a!favor!y!por!ese!motivo!Drupal!cumple! perfectamente!con!este!requisito.! ! 18. Estabilidadyseguridaddelproductosoftware!à!Un! aspecto! interesante! se! refería!a!la!estabilidad!del!producto.!Desde!el!punto!de!vista!de!programación,!la! comunidad! de! Drupal! se! encarga! de! estabilizar! el! software! cada! cierto! tiempo! liberando!las!últimas!modificaciones!que!tiene!testeadas!y!que!aportan!valor.!! ! Desde!el!punto!de!vista!de!la!gestión!del!código,!la!seguridad!del!mismo!se!puede! asegurar!utilizando!un!control!de!versiones!para!tener!un!control!exhaustivo!de! los!cambios.!Esto!va!ligado!directamente!con!la!mantenibilidad.!En!nuestro!caso! hemos!usado!el!cliente!Tortoise!SVN!(http://tortoisesvn.net/)! - - 3.3 Diseño-de-la-Aplicación- - Introducción( - El!diseño!es!el!primer!paso!de!la!fase!de!desarrollo!de!cualquier!producto!o!sistema!de! ingeniería.! ! Esta! etapa! del! ciclo! de! vida! del! desarrollo! permite! describir! como! el! sistema! va! a! satisfacer!los!requisitos.!A!menudo!tiene!diferentes!niveles!de!detalle.!Los!niveles!más! altos!de!detalle!generalmente!describen!los!componentes!o!módulos!que!formarán!el! software! a! ser! producido.! Los! niveles! más! bajos,! describen,! con! mucho! detalle,! cada! módulo!que!contendrá!el!sistema.! ! Una!vez!que!se!han!establecido!los!requisitos!del!software,!el!diseño!es!la!primera!! de! las! tres! actividades! técnicas:! diseño,! codificación! y! prueba.! Cada! actividad! transforma!la!información!de!forma!que!al!final!se!obtenga!un!software!validado.! ! ! ! 18! El! diseño! es! la! única! forma! mediante! la! que! podemos! traducir! con! precisión! los! requisitos!del!cliente!en!un!producto!o!sistema!acabado.!Es!la!base!de!todas!las!partes! posteriores!del!desarrollo!y!de!la!fase!de!pruebas.! ! Aplicación( - En!nuestro!proyecto!el!diseño!de!la!aplicación!no!tenía!una!estructura!predeterminada,! es!decir,!el!cliente!nos!solicitó!una!serie!de!requisitos!pero!no!hizo!tanto!hincapié!en!el! diseño! de! la! aplicación,! lo! único! que! quería! es! que! la! temática! de! la! misma! tuviese! relación! con! la! clínica! (por! ejemplo! en! cuanto! a! colores)! pero! no! indicó! nada! sobre! cómo!se!iban!a!distribuir!los!contenidos!en!el!portal!Web.! ! ! ! Teniendo! decidido! a! Drupal! como! el! CMS! a! utilizar! como! solución! tecnológica! al! proyecto,! y! sabiendo! que! la! herramienta! me! proporcionaba! soluciones! para! poder! implementar!los!requisitos!solicitados,!lo!siguiente!fue!empezar!a!proponer!bocetos!de! diseño!de!cómo!irían!quedando!las!distintas!partes!de!la!aplicación.! ! Es!decir,! antes! de!poder!empezar! con! la!implementación,! el! cliente!tiene! que! dar!su! aprobación!al!diseño!para!ver!si!se!ajusta!a!sus!necesidades,!y!por!ello!estructuré!la! Web!en!varias!pantallas!principales!cuyo!mockup!fue:! ! 3.3.1 Pantalla-principal- ! Es!la!pantalla!principal!de!acceso!al!portal,!también!comúnmente!conocida!como!Home.! En!ella!quería!concentrar!los!contenidos!mas!importantes!de!la!clínica!de!tal!manera! que!un!usuario!al!entrar!en!la!Home!pudiera!tener!información!directa!de!cuáles!son! las!posibilidades!que!ofrece!la!clínica.! ! ! 19! El!mockup!del!diseño!de!esta!pantalla!es!el!siguiente:! ! ! ! ! Las!principales!componentes!que!destacamos!son:!! ! • Nombre!de!la!clínica! • Buscador! • Menú! transversal! (Inicio,! ¿Quiénes! somos?,! Equipamiento,! Servicios,! Ofertas,! Buenas!prácticas,!¿Cómo!llegar?)! • Banner!informativo! • Bloques!de!información!(Horario,!Contacto,!¿Dónde!estamos?)! • Sección!información!(Nombre!clínica,!servicios,!descripción)! • Bloques! con! imágenes! seleccionables! (Equipamiento,! Servicios,! Atención! a! domicilio)! • Podología!en!general! • Mapa!Web!(enlaces)! • Galería!de!imágenes!seleccionables! ! Además!de!las!componentes!anteriores,!podemos!destacar!que!vamos!a!tener!varias! regiones!que!son!compartidas!por!todas!las!pantallas,!y!que!son:! ! • Cabecera!(que!incluye!nombre!de!la!clínica,!buscador!y!menú!transversal)! • Pie!(que!incluye!información!de!podología!en! general,! mapa! web! y!galería!de! imágenes)! • Contenido!(esta!región!cambiará!en!función!de!la!página!que!estemos!visitando)! ! ! ! 20! 3.3.2 Pantalla-detalle-contenido- - El!mockup!del!diseño!de!esta!página!es:! ! ! ! Este! tipo! de! página! mantiene! la! misma! cabecera! y! pie! que! en! el! caso! de! la! pantalla! principal,!lo!único!que!cambia!es!la!región!de!contenido.! ! Destacar! en! esta! pantalla! que! aparece! una! nueva! componente! que! es! la! barra! de! información!vertical!y!que!mostrará!información!útil!para!el!usuario!así!como!algunas! fotos!y!enlaces!de!interés.!! ! Pertenecen! a! este! tipo! de! pantalla! las! secciones! de! ¿Quiénes! somos?,! Equipamiento,! Servicios,!Ofertas,!Contacto!y!Buenas!prácticas.! ! 3.3.3 Pantalla-formulario-contacto- - Este!tipo!de!pantalla!es!similar!al!anterior,!por!supuesto!comparte!la!cabecear!y!el!pie! común!a!toda!la!aplicación!pero!cambia!ostensiblemente!la!información!generada!en!la! zona!de!contenido.!La!barra!de!información!vertical!mostrará!información!asociada!al! horario,! contacto,! dónde! estamos! o! cómo! llegar! mientras! que! la! descripción! de! la! página!incluirá!un!formulario!de!contacto.! ! El!mockup!de!esta!pantalla!es:! ! ! 21! ! ! - 3.3.4 Pantalla-¿Cómo-llegar?- ! Su!diseño!es!muy!similar!a!la!pantalla!anterior,!únicamente!que!se!elimina!el!mapa!de! geoClocalización!de!la!barra!vertical!de!información!y!se!incorpora!como!zona!principal! del!contenido!ya!que!no!tenía!mucho!sentido!mantener!el!mapa!pequeño!en!la!barra! vertical!cuando!podemos!encontrar!el!mapa!principal!en!el!contenido!de!la!pantalla.! ! ! ! 28! Contenido!de!página!principal! ! ! ! ! Implementación! ! Esta!página!de!contenido!varia!en!función!de!la!sección!que!estemos!consultando,!por! ejemplo!si!entramos!en!la!Home,!vemos!un!contenido,!si!entramos!en!¿Quiénes!somos?! vemos!otro!y!así!con!todas!las!pantallas!que!definan!contenido!en!esta!área.! ! Por! ejemplo,! para! el! caso! de! la! página! de! contenidos! para! la! sección! de! Servicios,! tendríamos!lo!siguiente:! ! ! ! ! 29! Bloque!lateral!de!consejos!permanentes! ! ! ! ! Implementación! ! ! ! Bloque!de!enlaces!de!interés! ! ! ! ! ! 30! Implementación! ! ! ! Bloque!location!map! ! ! ! Implementación! ! Para! los! mapas! de! geoClocalización!de! tipo! Google,! se! ha! utilizado! el! módulo! contribuido! Location! Map.! Este! módulo! permite! configurar! una! ubicación! (mediante! latitud!y!longitud)!y!automáticamente!crear!un!punto!de!búsqueda!sobre!él.!Igualmente! permite!añadirle!información!al!mismo.!Su!pantalla!de!configuración!es:! ! ! ! 31! ! ! ! Bloque!formulario!contacto! ! ! ! Implementación! ! El!formulario!de!contacto!se!ha!creado!a!partir!del!módulo!contribuido!Webform.!Su! configuración! es! muy! sencilla,! únicamente! tenemos! que! crear! un! contenido! de! tipo! Webform!e!ir!asignando!los!campos!del!formulario!con!su!correspondiente!nombre!y! tipo.!La!pantalla!de!configuración!es!tal!que!así:! ! ! 32! ! ! Sitio!elaborado!con!Drupal! ! ! ! Implementación! ! Este!bloque!se!crea!en!Drupal!en!base!al!tema!que!tengamos!seleccionado.!Podemos! decidir!si!mostrarlo!o!no!en!el!pie!de!la!Web!únicamente!en!la!configuración!del!bloque.! ! Bloque!podología! ! ! ! Implementación! ! ! ! ! ! ! 33! Bloque!mapa!web! ! ! ! Implementación! ! ! ! Bloque!galería!de!imágenes! ! ! ! Implementación! ! Para! la! galería! de! imágenes,! hemos! creado! un! tipo! de! contenido! Imagen! que! representará!cada!una!de!las!imágenes.!Posteriormente!mediante!el!uso!de!las!vistas! de!Drupal,!hemos!creado!un!listado!de!imágenes!para!poder!tener!un!listado!dinámico.! Las! vistas! en!Drupal! tiene! un! algo! grado! de! configuración,! ! por! tipo! de! contenido,! campos!a!mostrar,!ordenación!específica,!etc…! ! Mención!especial!también!para!el!módulo!Lightbox!que!hemos!tenido!que!utilizar!para! la! visualización! de! las! imágenes! a! modo! de! popup! y! para! poder! iterar! por! ellas! de! forma!intuitiva.! ! ! 34! A!modo!de!resumen,!podemos!decir!que!con!la!utilización!de!bloques!la!idea!es!tener! unidades!independientes!de!código!que!muestran!información!con!el!objetivo!de!luego! poder! ubicarlas! en! las! distintas! zonas! que! se! definen! en! la! Web,! como! si! fuese! una! especie!de!puzzle!donde!vamos!encajando!las!piezas.! ! Por!ejemplo,!en!nuestra!zona!de!cabecera!pueden!ir!los!bloques!búsqueda!y!nivo!slider,! en! la! zona! central! tendremos! los! bloques! de! ! horario! atención! al! cliente,! contacto,! donde! estamos,! equipamiento,! servicios,! atención! a! domicilio,! contenido! de! página! principal,! location! map! y! formulario! de! contacto,! mientras! que! en! el! pie! tenemos! el! bloque!de!podología,!mapa!web,!galería!de!imágenes!o!sitio!web!creado!con!Drupal.! ! Evidentemente!no!todos!los!bloques!se!muestran!en!las!mismas!pantallas,!por!lo!que! hay!que!establecer!un!criterio!para!decir!que!bloques!se!muestran!en!que!pantallas!y! para!eso!tenemos!que!hablar!de!los!contextos!de!Drupal.! ! Las! zonas! (cabecera,! central,! vertical,! pie…)! se! definen! en! la! configuración! del! tema! (apariencia! gráfica)! usado.! Mas! adelante! en! la! sección! de! adaptación! de! apariencia! gráfica!se!hablará!de!cómo!configurar!estas!zonas!o!regiones.! ! Mas!información!sobre!vistas!en!el!manual!de!administración,!sección!3.6.! ! 3.4.4 Creación-de-contextos- ! Como! acabamos! de! ver! en! la! fase! de! diseño,! nuestra! aplicación! va! a! implementar! cuatro! pantallas! tipo,! una! Home,! una! para! el! detalle! de! contenidos,! otra! para! el! formulario!de!contacto!y!una!última!para!el!mapa!de!geoClocalización,!de!manera!que! todas!las!pantallas!que!tengamos!en!nuestra!aplicación!se!ajustarán!siempre!a!un!tipo! de!estos!cuatro.! ! Drupal! puede!definir! distintos! contextos! mediante! el! uso! del! módulo! Context! que! resuelve!perfectamente!esta!necesidad.!El!módulo!funciona!de!forma!sencilla,!primero! se!define!la!condición!bajo!la!cuál!queremos!que!el!contexto!actúe!(por!ejemplo!la!url! de!las!páginas!que!queremos!que!se!vean!afectadas!por!el!contexto)!y!posteriormente! se!definen!los!bloques!de!información!que!queremos!mostrar!en!él.! ! La!pantalla!de!configuración!de!contextos!es:! ! ! 35! ! ! - 3.4.5 Adaptación-del-tema-gráfico- - El!tema!gráfico!era!uno!de!los!temas!mas!importantes!en!el!proyecto.!El!cliente!tenía! claro! que! los! colores! debían! ser! parecidos! a! la! decoración! de! la! clínica,! donde! predominan!los!colores,!blancos,!grisáceos!y!morados.! - Para!hacer!el!diseño,!me!basé!en!un! tema! de! Drupal! que! se! llama!Rubix!Responsive! Theme!porque!se!adaptaba!a!lo!que!estaba!buscando!y!porque!las!modificaciones!que! tenía!que!realizar!sobre!él!no!serían!demasiado!costosas.! - Lo! primero! de! todo! era! definir! las! áreas! o! regiones! que! necesitaríamos! en! nuestro! portal! Web.! Para! ello! hay! que! ir! al! fichero! “rubix_responsive_theme.info”.! Aquí! se! define!las!hojas!de!estilo!y!Javascripts!que!usa!el!tema!y!lo!mas!importante,!también!se! definen!las!regiones.!Estas!regiones!son!las!que!se!utilizan!para!asignar!los!bloques.! ! ! 36! - - Los!cambios!que!se!hicieron!a!nivel!gráfico!afectaban!básicamente!a!los!colores!de!las! hojas! de! estilos! y! a! las! coordenadas! de! posicionamiento! de! los! estilos! de! algunos! bloques.!Las!modificaciones!se!hicieron!sobre!el!fichero!de!estilos!del!tema!“style.css”.! Algunos!de!ellos!fueron:! ! Cambio!sobre!los!enlaces! ! a!{! !!color:!#c92ccc;! !!textCdecoration:none;! }! a:hover!{! !!/*color:!#93C90F;*/! !!color:!#727272;! }! ! Cambios!en!las!tablas! ! table!{! ! 37! !!/*background:!#ececec;*/! !!border:!0px!solid!#bbbbbb;! }! td!{! !!/*background:!#ebebeb;*/! !!color:!#747474;! !!textCalign:!left;! !!paddingCleft:!4px;! !!borderCright:!0px!solid!#c8c7c7;! !!borderCbottom:!0px!solid!#c8c7c7;! }! ! Cambios!en!los!menús! ! #mainCmenu!a!{! !!display:!block;! !!color:!rgb(153,!153,!153);! !!textCalign:!center;! !!/*padding:!13px!23px;*/! !!padding:!13px!21.9px;! !!textCdecoration:!none;! !!fontCsize:!12px;! !!textCtransform:!uppercase;! !!fontCweight:!bold;! !!background:!url(images/menu_bg_a.png);! }! #mainCmenu!a:hover,! #mainCmenu!li!a.active{! !!color:!#fff;! !!textCdecoration:!none;! !!background:!#c92ccc;! }! ! ! Cambios!en!las!regiones!de!contenidos! ! .front!.contentCsidebarCwrap{! !!/*marginCtop:!5px;*/! !!marginCtop:C15px;! }! .front!.contentCsidebarCwrap!article{! !!margin:!0;! }! .contentCsidebarCwrap!#content!{! !!display:!inline;! !!marginCbottom:!2.7%;! !!float:right;! !!width:100%;! !!/*marginCright:!C12px;*/! ! 44! Diseño!responsivo! ! Diseño!de!la!aplicación!visto!en!dispositivos!móviles:! - - ! 45! - - ! 46! - - - 3.5 Pruebas- - Introducción( - Las! pruebas! ! de! software! se! refieren! a! las! investigaciones! técnicas! cuyo! objetivo! es! proporcionar!información!objetiva!e!independiente!sobre!la!calidad!del!producto!a!la! parte!interesada,!en!este!caso!nuestro!cliente.!Es!una!actividad!que!pretende!asegurar! la!calidad!de!nuestro!producto.! ! Existen! muchos! tipos! de! pruebas,! pruebas! automáticas,! manuales,! funcionales,! no! funcionales,! etc…! pero! nosotros! en! este! caso! vamos! a! centrarnos! en! pruebas! automáticas! y! funcionales! que! testean! la! correcta! construcción! de! un! sitio! Web! de! acuerdo!a!los!estándares!que!Drupal!establece.! ! Aplicación( ! Para! ello! vamos! a! utilizar! el! módulo! SimpleTest.! Después! de! instalarlo,! podemos! acceder! a! su! pantalla! de! configuración! para! darnos! cuenta! de! la! gran! cantidad! de! pruebas!automáticas!que!es!capaz!de!lanzar!sobre!todas!las!estructuras!de!datos!que! tengamos! en! nuestro! sitio! Web.! Por! ejemplo,! podemos! lanzar! pruebas! automáticas! sobre!los!menús,!bloques,!vistas,!contenidos,!etc…! ! La!pantalla!de!configuración!de!las!pruebas!es:! ! ! 47! ! ! Para!el!caso!anterior!hemos!indicado!que!queremos!lanzar!pruebas!automáticas!sobre! todos!los!bloques!creados!en!nuestro!sitio!Web.!Cuando!lanzamos!las!pruebas!debemos! esperar! a! que! Drupal! recorra! todos! los! bloques! para! confirmar! que! no! hay! ningún! problema:! ! ! ! Al!final!del!test!recibimos!un!informe!detallado!de!cómo!han!ido!todas!las!pruebas:! ! ! ! ! 48! De!esta!manera!podemos!hacer!pruebas!rápidas!con!Drupal!y!asegurarnos!de!que!no! tenemos! inconsistencias! ni! comportamientos! anómalos.!!Además! de! estas! pruebas! también!realicé!varios!test!unitarios!para!comprobar!las!principales!funcionalidades!de! la!aplicación.!Los!recorridos!que!definí!se!referían!sobre!todo!a!la!creación,!eliminación! y!edición!de!contenidos,!menús!y!listados.! ! ! 3.6 Documentación- - Introducción( ! La! documentación! del! diseño! del! software! tiene! como! objetivo! facilitar! la! mejora! y! mantenimiento!de!un!proyecto!a!lo!largo!de!su!desarrollo.!Esta!documentación!no!tiene! porque!ser!sólo!de!las!funcionalidades!de!la!aplicación,!también!puede!entrar!al!nivel! de! detallar! APIs! utilizadas! en! el! caso! de! que! haya! comunicaciones! con! servicios! o! aplicaciones!externas.! ! Aplicación! ! En! nuestro! caso,! al! ser! un! proyecto! basado! en! el! CMS! Drupal,! no! necesitamos! una! documentación!en!cuanto!a!arquitectura!del!sistema,!ya!que!toda!esa!parte!siempre!es! común!para!todos!los!proyectos!de!Drupal!y!se!puede!encontrar!mucha!documentación! por!la!Web.! ! Lo! que! si! vamos! a! incluir! es! un! pequeño! manual! de! usuario! administrador! con! el! objetivo!de!que!el!cliente!pueda!también!en!la!medida!de!lo!posible!gestionar!por!si! mismo!su!sitio!Web.!Hablaremos!de!gestión!de!menús,!contextos,!nivo!slider,!tipos!de! contenido,!vistas,!bloques!y!usuarios.! ! 3.6.1 Gestión-de-menús- - Los!menús!son!un!elemento!básico!de!Drupal!ya!que!permiten!definir!la!estructura!de! niveles!de!los!contenidos.!Al!igual!que!el!resto!de!las!opciones!que!vamos!a!ver,!para!ir! a!ellas!tenemos!que!ir!a!la!sección!de!“Estructuras”.! ! Drupal!define!por!defecto!varios!menús!(desarrollo,!navegación,!gestión…)!pero!el!que! a!nosotros!nos!interesa!es!el!de!Menú!principal.! ! ! 49! ! ! Cómo! se! puede! apreciar! en! la! imagen,! añadir! o! quitar! enlaces! es! tan! sencillo! como! pulsar! en! “Añadir! enlace”! o! directamente! pulsar! en! “eliminar”.! También! tenemos! el! botón!“editar”.! ! 3.6.2 Gestión-de-contextos- - Ya! vimos! anteriormente! el! concepto! de! contexto.! Un! contexto! en! Drupal! permite! definir!pantallas!tipo!con!el!objetivo!de!poder!indicar!que!bloques!queremos!mostrar! en!cada!una!de!ellas.!En!nuestra!aplicación!tenemos!los!siguientes!contextos:! ! ! ! Mediante! los! botones! de! “Agregar”! añadimos! nuevos,! de! igual! forma! que! también! tenemos!botones!para!“Editar”,!“Desactivar”,!“Eliminar”…! ! Dentro!del!detalle!de!un!contexto!en!concreto,!definimos!el!nombre,!tags,!descripción!y! lo!mas!importante,!las!condiciones!y!las!reacciones.!O!lo!que!es!lo!mismo,!bajo!que!url! queremos!que!se!ejecute!el!contexto!y!que!bloques!queremos!que!se!muestren!en!él.! ! ! 50! ! ! ! - Añadir! un! bloque! a! un! contexto! es! tan! sencillo! como! seleccionar! el! tipo! de! bloque! queremos! añadir! de! la! columna! de! la! derecha! y! a! continuación! pulsar! en! el! botón! “Agregar”!de!la!región!donde!lo!vamos!a!insertar.! - - - - - - - - - ! 51! 3.6.3 Gestión-Nivo-slider- - Este!módulo!de!Drupal!nos!permite!gestionar!banners!en!la!plataforma.!Es!tan!sencillo! como!ir!creando!imágenes!y!publicándolas,!tal!como!se!muestra!en!la!siguiente!imagen:! ! ! ! ! A!partir!de!aquí!lo!único!que!queda!es!añadir!el!efecto!de!visualización!que!queremos! en! la! transición,! que! se! hace! también! desde! la! pantalla! anterior! de! configuración! y! tiene!este!aspecto:! ! ! - 3.6.4 Gestión-tipos-de-contenido- - Los!contenidos!son!los!elementos!de!información!que!Drupal!muestra.!Podemos!definir! nuevos!tipos!de!contenido!o!usar!los!que!Drupal!nos!da!por!defecto.!En!nuestro!caso,! básicamente! nos! manejamos! con! los! contenidos! de! tipo! “página”,! aunque! también! manejamos!los!contenidos!de!tipo!“banner”.! ! La!página!de!gestión!de!contenidos!es:! ! ! 52! ! ! ! Aquí!podemos!tanto!crear,!como!eliminar!o!editar!contenidos.!Si!entramos!al!detalle!de! uno!de!ellos,!encontramos!su!información!tal!que!así:! ! ! - Bastará!con!asignar!un!nombre!al!contenido,!y!luego!introducir!su!contenido!mediante! el!editor!WYSIWYG.! ! - 3.6.5 Gestión-de-vistas- - Las!vistas!son!un!elemento!básico!de!Drupal!y!sirven!para!mostrar!contenido!de!forma! dinámica!aplicando!gran!cantidad!de!filtros!que!nosotros!podemos!configurar!(tipo!de! contenido,!fecha!publicación,!etc…).!Por!ejemplo,!en!nuestro!proyecto!tenemos!la!vista! de!galería!de!imágenes!que!muestra!un!listado!de!contenidos!de!tipo!imagen.! ! 53! ! ! A!partir!de!esta!vista!se!crea!un!bloque!que!será!el!que!se!posicione!en!la!región!del!pie.!! ! Mención!especial!también!para!el!módulo!Lightbox!que!hemos!tenido!que!utilizar!para! la! visualización! de! las! imágenes! a! modo! de! popup! y! para! poder! iterar! por! ellas! de! forma!intuitiva.! ! Cuando! instalamos! el! módulo! de! vistas! (views),! automáticamente! aparece! un! nuevo! formato!de!visualización!en!la!vista!de!imágenes!que!proporciona!el!efecto!requerido.! Se!configura!al!editar!el!campo!Contenido:!Imagen!de!la!vista:! ! ! - - 3.6.6 Gestión-Bloques- - Los!bloques!en!Drupal!vienen!a!ser!como!los!principales!elementos!de!información.!Son! como!regiones!de!código!que!muestran!información.!La!pantalla!de!gestión!de!bloques! es:! ! ! 60! 4. Conclusiones-y-Trabajos-Futuros- ! Con!la!realización!de!este!trabajo!fin!de!grado!queda!clara!la!importancia!que!tiene!el! ciclo!de!vida!de!desarrollo!software!para!asegurar!la!calidad!de!un!producto!o!servicio! software.! El! objetivo! que! tiene! todo! ingeniero! es! hacer! software! de! calidad! que! proporcione!soluciones!que!satisfagan!las!necesidades!de!los!clientes.! ! Como! vimos! en! capítulos! anteriores,! existen! distintos! tipos! de! modelos! a! la! hora! de! implementar!este!ciclo!de!desarrollo!y!por!tanto!no!existe!una!única!manera!de!buscar! soluciones.!Dependiendo!de!las!circunstancias!de!cada!proyecto!(clientes,!!tecnología,! complejidad!de!requisitos,!coste…)!nos!adaptaremos!a!uno!u!otro!modelo.! ! Lo! mas! importante! es! que! todos! los! procesos! estén! establecidos! y! seamos! capaz! de! llevarlos! a! cabo! con! la! mayor! solvencia! posible.! Podemos! concluir! sin! ninguna! duda! que!cualquier!software!de!calidad!que!un!ingeniero!quiera!proporcionar!debería!estar! sujeto!a!un!modelado!de!ciclo!de!vida!software!reconocible.! ! En! cuanto! a! los! trabajos! futuros! para! la! aplicación! Web,! se! podría! meter! nuevas! funcionalidades,!como!por!ejemplo:!encuestas,!creación!de!nuevos!tipos!de!contenidos! como! por! ejemplo! noticias,! inclusión! de! información! procedente! de! redes! sociales,! lectura! de! RSS! procedente! de! diferentes! fuentes! de! información! relacionada! con! la! podología,!reservas!de!citas!desde!la!aplicación!o!por!ejemplo!integración!con!Google! Analytics!para!obtención!de!estadísticas.! ! Las!posibilidades!de!trabajos!futuros!son!múltiples!y!todo!depende!como!siempre!del! cliente!y!de!las!necesidades!que!tenga.!Lo!mas!importante!de!todo!es!que!todo!lo!que!se! demandó!al!inicio!del!ciclo!de!vida!se!pudo!cumplir!de!acuerdo!a!las!necesidades.! ! ! 5. Referencias- - [1] Página oficial de Drupal http://www.drupal.org [2] Drupal hispano. Comunidad de usuarios de Drupal http://drupal.org.es [3] Todd Tomlison, John K. VanDyk. Desarrollo con Drupal 7, ed Anaya, 2011. [4] Cristophe Aubry. Drupal 7, Crear y administrar sus sitios web, ed eni, 2012. [5] Angela Byron, Addison Berry y Bruno De Bondt, Sitios web dinámicos y atractivos con Drupal 7, ed O´Reilly Anaya, 2012. [6] Todd Tomlison. Manual imprescindible Drupal 7, ed Anaya, 2011. [7] Gregoria Gil García. El gran libro de Drupal 7, ed Marcombo, 2011. [8]!!!!!Php!Language!Specification.!http://php.net! ! [9]!!!!!Roger!S.!Pressman.!Ingeniería!del!software,!ed!McGrawHill,!2014.! ! ! 61! [10]!!!Whitten!Jeffrey.!Análisis!y!de!Diseño!de!Sistemas!de!la!Información,!ed!! !!!!!!!!!!!McGrawHill,!2008.! ! [11]!!Steve!McConnell.!Desarrollo!y!Gestión!de!Proyectos!Informáticos,!ed!! !!!!!!!!!!McGrawHill,!1996.! -- - 6. Apéndice- - 6.1 Contenido-del-CD- - • Código!de!la!aplicación!Drupal- • Resumen!en!español!e!inglés- • Export!de!la!base!de!datos!de!la!aplicación!- • Paquete!XAMPP- - 6.2 Manual-de-instalación-y-configuración- - Incluido!dentro!de!la!sección!de!implantación!y!despliegue!3.7.! ! 6.3-Manual-de-Usuario- - Incluido!dentro!de!la!sección!de!documentación!3.6.!