Portal web SardEscola

FACULTAT D’INFORMÀTICA DE BARCELONA (FIB) UNIVERSITAT POLITÈCNICA DE CATALUNYA (UPC) – BarcelonaTech DISSENY I IMPLEMENTACIÓ DEL PORTAL WEB SARDESCOLA TREBALL FINAL DE GRAU GRAU EN ENGINYERIA INFORMÀTICA SISTEMES D’INFORMACIÓ 03/07/19 Autor: Director: Enric Sales Martínez Josep Solé Pareta Arquitectura de Computadors 1 RESUM En aquest document s’explica el desenvolupament d’un projecte que ha estat presentat per a finalitzar el grau en Enginyeria Informàtica. El contingut comença amb una introducció on s’expliquen les motivacions que han portat a prendre aquest projecte i el problema que es vol solucionar en el món educatiu pel que fa als professors de primària i secundària involucrats en el projecte transversal “La sardana, més que una dansa”  que encara preparen les activitats de classe de manera tradicional, proporcionant una solució IT en forma de portal web. Des de l’exploració de solucions existents que tenen objectius semblants, s’ha establert una planificació a seguir en el desenvolupament d’aquest projecte on s’han distribuït les tasques a realitzar en un marc temporal i s’han avaluat els seus costos i l’impacte del projecte en les diferents dimensions de la sostenibilitat. Aquest document presenta la primera versió del projecte que ha sigut desenvolupat, però amb el temps s’inclouran noves característiques a la solució per tal d’ampliar les funcionalitats i utilitats proporcionades als usuaris. 2 RESUMEN En este documento se explica el desarrollo de un proyecto que ha sido presentado para finalizar el grado en Ingeniería Informática. El contenido comienza con una introducción donde se explican las motivaciones que han llevado a tomar este proyecto y el problema que se quiere solucionar en el mundo educativo en cuanto a los profesores de primaria y secundaria involucrados en el proyecto transversal "La sardana, més que una dansa" que todavía preparan las actividades de clase de manera tradicional, proporcionando una solución IT en forma de portal web. Desde la exploración de soluciones existentes que tienen objetivos similares, se ha establecido una planificación a seguir en el desarrollo de este proyecto donde se han distribuido las tareas a realizar en un marco temporal y se han evaluado sus costes y el impacto del proyecto en las diferentes dimensiones de la sostenibilidad. Este documento presenta la primera versión del proyecto que ha sido desarrollado, pero con el tiempo se incluirán nuevas características a la solución para ampliar las funcionalidades y utilidades proporcionadas a los usuarios. 3 ABSTRACT This document explains the development of a project that has been presented to complete the degree in Computer Engineering. The content begins with an introduction explaining the motivations that led to this project and the problem that needs to be resolved in the educational world regarding primary and secondary school teachers involved in the transversal project "La sardana, més que una dansa" that still prepare class activities in a traditional way, providing an IT solution in the form of a web portal. From the exploration of existing solutions that have similar objectives, a planning has been established to follow in the development of this project where the tasks to be performed in a temporary framework have been distributed and their costs have been evaluated and the impact of the project on the different dimensions of sustainability. This document presents the first version of the project that has been developed, but eventually new features will be included in the solution to extend the functionalities and utilities provided to users. 4 Índex de pàgines 1. INTRODUCCIÓ 1.1. Context …………………………………………………………………............. 9 1.1.1. Actors implicats ………………………………………………………….. 10 1.2. Formulació del problema …………………………………………………….... 11 2. ABAST DEL PROJECTE 2.1. Abast …………………………………………………………………………….. 12 2.1.1. Definició de l’abast …………………………………………………….... 12 2.1.2. Obstacles i riscos ……………………………………………………….. 13 2.2. Metodologia i rigor …………………………………………………………….. 14 2.2.1. Mètodes de treball …………………………………………………….... 14 2.2.2. Eines de seguiment ……………………………………………………... 14 2.2.3. Mètodes de validació ……………………………………………………. 15 3. ESTAT DE L’ART 3.1. Portal de referència ……………………………………………………………... 16 3.2. Estudi d’alternatives …………………………………………………………….. 16 3.3. Selecció de la tecnologia ………………………………………………………. 18 4. DESENVOLUPAMENT DEL PROJECTE 4.1. Anàlisi de requisits ………………………………………………………………. 19 4.1.1. Parts interessades ………………………………………………………... 19 4.1.2. Propietats i hipòtesis del domini …………………………………………. 20 4.1.3. Requisits no funcionals …………………………………………………... 20 4.1.4. Restriccions ……………………………………………………………….. 20 4.2. Especificació ……………………………………………………………………... 21 4.2.1. Requisits funcionals ………………………………………………………. 21 4.2.2. Casos d’ús …………………………………………………………………. 22 4.2.3. Històries d’usuari ………………………………………………………….. 34 4.2.4. Criteris d’acceptació ………………………………………………………. 35 4.2.5. Esquema de comportament …………………………………………….... 37 4.3. Disseny ……………………………………………………………………………. 38 4.3.1. Arquitectura del sistema ………………………………………………….. 38 4.3.2. Mockups ……………………………………………………………………. 40 4.4. Implementació ……………………………………………………………………. 44 4.4.1. Procés d’instal·lació ………………………………………………………. 44 4.4.2. Funcionament de WordPress ……………………………………………. 47 4.4.3. Procés d’implementació ………………………………………………….. 48 4.4.4. Funcionalitats ………………………………………………………………. 53 5 5. PLANIFICACIÓ TEMPORAL 5.1. Descripció de les tasques i recursos …………………………………………... 59 5.1.1. Tasques …………………………………………………………………….. 59 5.1.2. Diagrama de Gantt ………………………………………………………... 61 5.1.3. Distribució de l’esforç ……………………………………………………... 63 5.1.4. Recursos ……………………………………………………………………. 64 5.2. Valoració d’alternatives i pla d’acció ……………………………………………. 65 6. PRESSUPOST 6.1. Identificació i estimació de costos ………………………………………………. 66 6.1.1. Recursos humans ………………………………………………………….. 66 6.1.2. Recursos materials ……………………………………………………….... 67 6.1.3. Costos directes per activitat ………………………………………………. 67 6.1.4. Costos indirectes …………………………………………………………... 68 6.1.5. Contingències ………………………………………………………………. 68 6.1.6. Imprevistos ………………………………………………………………….. 69 6.1.7. Pressupost total …………………………………………………………….. 69 6.2. Control de gestió ………………………………………………………………….. 70 7. SOSTENIBILITAT 7.1. Informe ……………………………………………………………………………... 71 7.2. Dimensions ……………………………………………………………………….... 72 7.2.1. Econòmica …………………………………………………………………... 72 7.2.2. Ambiental ……………………………………………………………………. 73 7.2.3. Social ……………………………………………………………………….... 73 8. LLEIS I REGULACIONS ………………………………………………………………... 74 9. CONCLUSIÓ ……………………………………………………………………………... 75 REFERÈNCIES ……………………………………………………………………………... 76 6 Índex de diagrames Diagrama 1. Casos d’ús …………………………………………………….……………… 22 Diagrama 2. User flow  ………………………………………………………………...……. 37 Diagrama 3. Visió general components sistema ………..……………………….………. 39 Diagrama 4. Gantt  de tasques del projecte ………………………………………………. 62 Índex de figures Figura 1. Arxius i carpetes del projecte ……………………………………………….….. 38 Figura 2. Mockup pàgina “Presentació” …………………………………….……………. 40 Figura 3. Mockup subpàgina “Projectes” ………………………………………...………. 41 Figura 4. Mockup subpàgina “Tallers” …………………………………………………..... 42 Figura 5. Mockup subpàgina “Tasques” …………………………………………....…….. 43 Figura 6. Back-End  del portal web ……………………………………………………..….. 47 Figura 7. Selecció del tema ………………………………………………………………... 48 Figura 8. Selecció del títol i del logotip …………………………………………..……….. 49 Figura 9. Gestió dels usuaris ………….……………………………………………….…... 50 Figura 10. Creació de les pàgines …………………………………………………….…... 51 Figura 11. Creació del menú principal ………………………………………………..…… 52 Figura 12. Visualitzar pàgina ……………………………………………………………..… 53 Figura 13. Títol i logotip ………………………………………………………………...…… 54 Figura 14. Descarregar document ……………………………………………………….… 54 Figura 15. Iniciar sessió …………………………………………………………………..… 55 Figura 16. Tancar sessió ………………………………………………………………….… 55 Figura 17. Editar perfil ………………………………………………………………….…… 56 Figura 18. Afegir pàgina …………………………………………………………………..… 56 Figura 19. Editar pàgina ………………………………………………………………..…… 57 Figura 20. Afegir usuari …………………………………………………………………...… 57 Figura 21. Editar usuari …………………………………………………………………...… 58 7 Índex de taules Taula 1. Metodologia de treball ………………………………………….……………...… 14 Taula 2. Exemple de taula de seguiment utilitzant Google Drive  …………….……..… 14 Taula 3. Cas d’ús “Iniciar sessió” …………………………………………………..…..…. 23 Taula 4. Cas d’ús “Tancar sessió” ………………………………………………….…..…. 24 Taula 5. Cas d’ús “Editar perfil” …………………………………………………….…..…. 25 Taula 6. Cas d’ús “Descarregar document” ……………………………………….…..… 26 Taula 7. Cas d’ús “Títol i logotip” ………………………………………………..……..…. 27 Taula 8. Cas d’ús “Visualitzar pàgina” …………………………………………….……... 28 Taula 9. Cas d’ús “Afegir pàgina” ……………………………………………………….... 29 Taula 10. Cas d’ús “Editar pàgina” ………………………………………………...…..…. 30 Taula 11. Cas d’ús “Afegir usuari” …………………………………………………….…... 31 Taula 12. Cas d’ús “Editar usuari” ……………………………………………………...…. 32 Taula 13. Cas d’ús “Accedir a totes les característiques d’administració” ………...…. 33 Taula 14. Gantt  de tasques del projecte ………………………………………………..... 61 Taula 15. Duració i percentatge del temps empleat en cada fase ………………….…. 63 Taula 16. Llistat de recursos materials ……………………………………………...….… 64 Taula 17. Valoració de riscos i pla de contingència ………………………………...…... 65 Taula 18. Pressupost de recursos humans …………………………………………....... 66 Taula 19. Pressupost de recursos materials ………………………………………...….. 67 Taula 20. Cost directe total per a cada activitat del Gantt  …………………………...... 67 Taula 21. Pressupost dels costos indirectes ………………………………………….… 68 Taula 22. Pressupost total del projecte ………………………………………………..… 69 Taula 23. Control diari d’hores treballades per cada rol ……………………………..... 70 Taula 24. Control de desviacions pressupostàries segons rol ………………………... 70 8 La comunicació amb el director del projecte i els clients es realitzarà tant de manera presencial, com per correu electrònic, i s'utilitzarà l'eina Google Drive per poder compartir documents i imatges a través d'Internet. 2.2.3. Mètodes de validació Per tal de realitzar un correcte seguiment de totes les fases de desenvolupament del projecte, existiran els següents mètodes de validació: Tasques avaluatòries Es realitzarà una tasca avaluatòria a l’acabar cadascuna de les diferents fases del projecte, en la qual es prendrà nota de tots els problemes i imprevistos que hagin sorgit. A més a més, es definirà un pla d’acció per tal d’evitar que aquests es repeteixin posteriorment. Reunions de seguiment amb els clients S’anirà realitzant diverses reunions de seguiment amb els clients al llarg del desenvolupament del projecte per tal d’anar validant la feina realitzada. 15 3. ESTAT DE L’ART 3.1. Portal de referència Aquest projecte s’inspira i pren com a referència el portal web Cinescola, el qual ofereix un ampli ventall de funcionalitats i recursos estructurats en sis seccions visibles en el menú principal horitzontal: ● En primer lloc, la pàgina de presentació del projecte en la qual es presenta i es reflexiona sobre la seva creació i els seus objectius. ● En segon lloc trobem la “Filmoteca”, estructurada segons el nivell educatiu (primària o secundària) i la matèria (en el cas de secundària), on s’ofereix per a cada pel·lícula una breu introducció, el seu tràiler i un document descarregable ja preparat en el qual es presenta la sinopsis, la fitxa tècnica i les activitats que es poden treballar a partir de la pel·lícula en qüestió. ● En tercer lloc hi ha un apartat anomenat “Llibres”, en el qual podem trobar diversos llibres relacionats amb el món del cinema i se’ns facilita informació, resums i punts de venda d’aquests. ● La quarta secció consisteix en una pàgina de commemoracions a persones referents en el món del cinema, com ara, l’especial a Miquel Porter. ● En cinquè lloc trobem la secció anomenada “Enllaços”, en la qual s’adjunten una gran quantitat d’enllaços d’interès relacionats amb la temàtica del portal web. ● Finalment l’última secció d’aquest portal web, anomenada “Contactar”, ofereix la possibilitat de posar-se en contacte amb els creadors del projecte mitjançant un formulari que permet deixar un comentari. Dit això, es pot considerar que el portal web Cinescola és una solució existent similar tot i que no idèntica ja que es basa en una altra temàtica. Tot i així el portal web SardEscola, fruit d’aquest TFG, segueix sent un repte únic ja que proporciona una solució didàctica personalitzada sota la temàtica de les sardanes. És per això que no hi ha cap solució idèntica en el mercat. 3.2. Estudi d’alternatives Pel que fa a l'estat de l'art en la creació d’un portal web, que també es podria entendre com a Sistema de Gestió de Continguts o CMS [3], es poden trobar tres programes de codi obert al capdavant: WordPress  , Joomla! i Drupal. 16 WordPress WordPress [4] és un programari que es pot instal·lar fàcilment al vostre lloc web per crear webs, blogs o aplicacions. Ha estat creat i actualment mantingut per milers de voluntaris a la comunitat i hi ha molts connectors i temes disponibles per personalitzar el vostre lloc web, donant-los l'aspecte que voleu i afegint noves funcionalitats. Va començar el 2003 com un poc de codi per millorar la tipografia de l'escriptura quotidiana, i des de llavors, ha passat a ser l'eina d'allotjament web autònoma més gran del món. Des de la documentació al codi, va ser creat per i per a la comunitat. El sistema de publicació està basat en PHP [5] i MySQL [6] i està llicenciat sota la GPL [7] o posterior. És un producte madur i estable centrat en l'experiència de l'usuari i en els estàndards web [8]. Entre la gran disponibilitat de complements (plugins  ) de WordPress  , hi ha alguns que podrien encaixar en l'àmbit d'aquest projecte. Joomla! Joomla! [9] és un sistema de gestió de continguts lliure i codi obert per publicar continguts al World Wide Web i a intranets i alhora és un entorn de treball (framework  ) de desenvolupament d'aplicacions web de tipus Model-Vista-Controlador (MVC). Aquest sistema inclou funcions com la memòria cau de pàgines per millorar el rendiment, sindicació RSS  , versions imprimibles o en pdf de les pàgines, flaixos de notícies, blogs, enquestes d'opinió, cerca en el web, i internacionalització de l'idioma. És escrit en llenguatge de programació PHP i utilitza el sistema de bases de dades MySQL o PostgreSQL  [10] (des de la versió 3.0) per a emmagatzemar la informació. Publicat sota els termes de la GPL  de GNU  , el Joomla!  és programari lliure. Drupal Drupal [11] és, també, un CMS de codi obert amb grans funcions estàndard que proporcionen un rendiment fiable i seguretat d'excel·lència, caracteritzades per la seva flexibilitat i modularitat. La comunitat de Drupal  és una de les comunitats de codi obert més grans del món, plena de desenvolupadors, dissenyadors, entrenadors, estrategs, coordinadors, editors i patrocinadors que funcionen juntament amb un compromís compartit amb l'esperit de codi obert que va impulsar el projecte Drupal endavant. El programari és gratuït, es distribueix sota els termes de la GPL i es basa en els principis de col·laboracions, globalisme i innovació. 17 3.3. Selecció de la tecnologia Una vegada realitzat un estudi exhaustiu dels tres CMS més populars en el mercat i havent cercat diverses comparacions entre sí, tot valorant les següents característiques de cadascun: ● Número de webs ● Descàrregues ● Volum de mercat ● Temes gratuïts ● Complements gratuïts ● Cost ● Freqüència d’actualitzacions ● Funcionalitats ● Opinions ● Temps d’instal·lació ● Nivell d’expertesa requerit ● Hosting ideal ● Disponibilitat d’instal·lació en un clic ● Exemples de grans webs que utilitzen les plataformes ● Avantatges ● Inconvenients Destacant com WordPress a part de ser gratuït, posseeix més del 26,4% de tots els llocs web de la xarxa mundial, el 58.4% de quota de mercat pel que fa als tres CMS principals, +3000 temes gratuïts i 44.000 complements gratuïts [12]. I una vegada havent-ho parlat amb els clients tenint en compte les funcionalitats requerides per part del portal web, s’ha decidit realitzar el projecte en WordPress  . Aquesta decisió es deu a que s’ha valorat positivament com WordPress és capaç de complir amb tots els requisits i oferir totes les funcionalitats desitjades pel que fa al portal web. 18 4. DESENVOLUPAMENT DEL PROJECTE 4.1. Anàlisi de requisits 4.1.1. Parts interessades Les part interessades d’aquest projecte són totes aquelles persones les quals es veuen afectades ja sigui tant directament com indirectament. Tal i com s’explica en l’apartat “1.2. Actors implicats”, les parts interessades principals són: ●Equip desenvolupador: involucrat directament en el projecte ja que és l’encarregat principal de desenvolupar-lo i portar-lo a terme. ●Director del projecte: involucrat directament en el projecte ja que és l’encarregat principal de dirigir-lo i portar-lo a terme. ●Clients: part interessada principal ja que són ells qui plantegen el seu problema per tal de solucionar la seva necessitat. ●Usuaris interessats: involucrats directament en el projecte ja que també podran visitar el portal web, visualitzar el contingut i descarregar documents en cas d’així voler-ho. A més a més, a l’hora de desenvolupar el portal web s’aplicarà una jerarquia de rols [13] pel que fa als comptes d’usuari (nom d’usuari i contrasenya) de les parts interessades: ●Equip desenvolupador: disposarà d’un compte d’usuari únic amb rol d’administrador amb el qual tindrà accés a totes les característiques d’administració del portal web. ●Clients (director inclòs): disposaran d’un compte d’usuari amb rol d’editor amb el qual podran publicar i editar el contingut del portal web. ●Usuaris interessats: no disposaran de cap compte ja que de moment, per a qualsevol navegant d’Internet, l’accés al portal web serà lliure sense necessitat d’identificar-se. Tot i així, si en futures versions del portal web s’inclogués alguna pàgina en la qual els visitants poguessin deixar comentaris, llavors se’ls oferiria la possibilitat de crear-se un compte d’usuari amb rol de subscriptor per tal de poder identificar-se a l’hora de comentar en el portal web. Finalment cal esmentar que, com de moment les úniques parts interessades que tenen un compte d’usuari són l’equip desenvolupador i els clients, no s’afegirà un botó per iniciar sessió al portal web sinó que hauran d’afegir al domini “/wp-login.php” per tal de ser redirigits a la pàgina d’inici de sessió i un cop allà introduir les seves credencials. D’aquesta manera s’espera evitar confusions per part dels visitants del portal web com, per exemple, la innecessària creació de comptes d’usuari. 19 4.1.2. Propietats i hipòtesis del domini La finalitat d’aquest apartat consisteix en descriure les principals característiques i propietats del tema d’aquest projecte. El domini d’aquest projecte està relacionat amb el món de l’educació. Més concretament, amb els portals web de caràcter acadèmic enfocats a l’aprenentatge en escoles. Dit això, se’ns plantegen un seguit de propietats i hipòtesis del domini: ● Aquests portals web són de caràcter educatiu. ● Funcionen com a material de suport. ● Es presenten com a solució tecnològica. ● S’adapten a la situació tecnològica actual. ● S’adapten a la situació educativa actual. 4.1.3. Requisits no funcionals Els requisits no funcionals d’un projecte consisteixen en descriure les característiques del funcionament de les seves operacions en comptes de les funcionalitats en sí. En el cas d’aquest projecte, pel que fa al portal web són els següents: ● Ha de ser visualment amigable. ● Ha de ser visualment intuïtiu. ● Ha de carregar ràpidament. ● Ha d’estar disponible en tot moment. ● Ha d’oferir extensibilitat. ● Ha de complir amb totes les funcionalitats requerides. ● S’ha de poder accedir-hi fàcilment. ● S’ha de poder visualitzar des del mòbil, ordinadors i tauletes. 4.1.4. Restriccions Les restriccions d’un projecte són les condicions que imposa el client respecte a la solució que necessita. En el cas d’aquest projecte, al llarg de les reunions amb els clients aquests van mantenir una postura poc restrictiva ja que estaven oberts a escoltar diferents solucions i, en conseqüència, van imposar poques restriccions les quals s’esmenten a continuació: ● Ha d’estar acabat per abans de juliol. ● Ha de soportar la quantitat d’usuaris visitants. ● Ha d’aparèixer el logotip del projecte. ● Han de poder actualitzar el contingut. 20 4.2. Especificació 4.2.1. Requisits funcionals Els requisits funcionals d’un projecte consisteixen en descriure les funcionalitats de les seves operacions. En el cas d’aquest projecte, pel que fa al portal web són els següents: ● Tot usuari ha de poder visitar la pàgina “Presentació”. ● Tot usuari ha de poder visitar qualsevol subpàgina de “Projectes”. ● Tot usuari ha de poder visitar qualsevol subpàgina de “Tallers”. ● Tot usuari ha de poder visitar qualsevol subpàgina de “Tasques”. ● Tot usuari ha de poder visitar la pàgina “Evidències”. ● Tot usuari ha de poder visitar la pàgina “La Sardana”. ● Tot usuari ha de poder visitar la pàgina “Contacte”. ● Tot usuari ha de poder descarregar qualsevol document allotjat. ● Els editors han de poder iniciar sessió mitjançant un compte d’usuari. ● Els editors han de poder modificar les seves dades personals. ● Els editors han de poder tancar sessió. ● Els editors han de poder afegir/editar contingut al portal web: ○ Els editors han de poder afegir/editar entrades. ○ Els editors han de poder afegir/editar mèdia. ○ Els editors han de poder afegir/editar pàgines. ● L’administrador ha de poder iniciar sessió mitjançant un compte d’usuari. ● L’administrador ha de poder modificar les seves dades personals. ● L’administrador ha de poder tancar sessió. ● L’administrador ha de poder afegir/editar contingut al portal web: ○ L’administrador ha de poder afegir/editar entrades. ○ L’administrador ha de poder afegir/editar mèdia. ○ L’administrador ha de poder afegir/editar pàgines. ○ L’administrador ha de poder afegir/editar usuaris. ● L’administrador ha de poder tenir accés a totes les característiques d’administració del portal web. ● El menú principal ha de mostrar totes les pàgines i subpàgines del portal web. ● El menú principal ha de redirigir a qualsevol pàgina o subpàgina seleccionada. ● Fer clic al títol o al logotip del portal web ha de redirigir a la pàgina “Presentació”. 21 4.2.2. Casos d’ús Els casos d’ús consisteixen en descriure les activitats o accions que hauran de dur a terme els usuaris per tal de realitzar les operacions desitjades. En aquest apartat, començarem adjuntant un diagrama dels casos d’ús per tal de tenir una visió general i després es realitzarà una completa especificació per a cada cas d’ús. Diagrama 1. Casos d’ús 22 Cas d’ús Iniciar sessió Actor principal Administrador, Editor Precondicions L’usuari no s’ha identificat. Disparador L’usuari vol iniciar sessió. Escenari principal d’èxit 1. L’usuari cerca en el navegador “http://sardaescola.cba.upc.edu/wp-login.php”. 2. Es mostra la pàgina d’inici de sessió al portal web. 3. L’usuari introdueix el seu nom d’usuari o correu electrònic. 4. L’usuari introdueix la seva contrasenya. 5. L’usuari fa clic en el botó “Entra”. 6. El sistema verifica que les credencials introduïdes siguin correctes. 7. El sistema permet l’accés al portal web com a usuari autenticat. Extensions (escenaris alternatius) 1. Escenari alternatiu (6a) a. Les credencials introduïdes no són correctes. b. Torna al pas 2. Taula 3. Cas d’ús “Iniciar sessió” 23 Cas d’ús Tancar sessió Actor principal Administrador, Editor Precondicions L’usuari s’ha identificat. Disparador L’usuari vol tancar sessió. Escenari principal d’èxit 1. L’usuari fa clic en el seu nom a dalt a la dreta de la pantalla. 2. L’usuari fa clic en “Surt”. 3. L’usuari és redirigit a la pantalla d’inici de sessió. Extensions (escenaris alternatius) Taula 4. Cas d’ús “Tancar sessió” 24 Cas d’ús Afegir usuari Actor principal Administrador Precondicions L’usuari ha iniciat sessió. Disparador L’usuari vol afegir un usuari al portal web. Escenari principal d’èxit 1. L’usuari clica el botó “Afegeix” en la barra superior de la pantalla. 2. L’usuari fa clic en “Usuari”. 3. L’usuari omple les dades del nou usuari: a. Nom d’usuari b. Correu electrònic c. Contrasenya 4. L’usuari defineix el rol del nou usuari. 5. L’usuari clica el botó “Afegeix”. Extensions (escenaris alternatius) Taula 11. Cas d’ús “Afegir usuari” 31 Cas d’ús Editar usuari Actor principal Administrador Precondicions L’usuari ha iniciat sessió. Disparador L’usuari vol editar un usuari del portal web. Escenari principal d’èxit 1. L’usuari clica el botó “SardEscola” en la barra superior de la pantalla. 2. L’usuari és redirigit al “Tauler”. 3. L’usuari clica el botó “Usuari” en la barra lateral esquerra de la pantalla. 4. L’usuari fa clic en el nom de l’usuari que desitgi editar. 5. L’usuari modifica les dades que desitgi. 6. L’usuari clica el botó “Actualitza l’usuari”. Extensions (escenaris alternatius) Taula 12. Cas d’ús “Editar usuari” 32 Cas d’ús Accedir a totes les característiques d’administració Actor principal Administrador Precondicions L’usuari ha iniciat sessió. Disparador L’usuari vol accedir a totes les característiques d’administració. Escenari principal d’èxit 1. L’usuari clica el botó “SardEscola” en la barra superior de la pantalla. 2. L’usuari és redirigit al “Tauler”. Extensions (escenaris alternatius) Taula 13. Cas d’ús “Accedir a totes les característiques d’administració” 33 4.2.3. Històries d’usuari Les històries d’usuari s’utilitzen per tal de representar els requisits en un llenguatge comú a nivell d’usuari. En el nostre cas, seguirem la següent estructura a l’hora de definir-les: 1. < Nom història d’usuari >: 1. Com a < rol >, 2. Jo vull poder < alguna cosa > 3. Per tal de < benefici > Dit això, en el cas d’aquest projecte, pel que fa al portal web són les següents: ●Iniciar sessió: 1. Com a administrador/editor, 2. Jo vull poder iniciar sessió en el portal web 3. Per tal de poder gaudir de les funcionalitats del meu rol. ●Tancar sessió: 1. Com a administrador/editor, 2. Jo vull poder tancar sessió en el portal web 3. Per tal de poder sortir-ne de manera segura. ●Editar perfil: 1. Com a administrador/editor, 2. Jo vull poder editar el meu perfil del portal web 3. Per tal de poder tenir-lo actualitzat. ●Descarregar document: 1. Com a usuari, 2. Jo vull poder descarregar qualsevol document 3. Per tal de poder visualitzar-lo en local. ●Títol i logotip: 1. Com a usuari, 2. Jo vull poder clicar en el títol i logotip del portal web 3. Per tal de poder ser redirigit a la pàgina principal. ●Visualitzar pàgina: 1. Com a usuari, 2. Jo vull poder navegar pel menú principal horitzontal 3. Per tal de poder accedir a la pàgina desitjada. ●Afegir pàgina: 1. Com a administrador/editor, 2. Jo vull poder afegir una pàgina 3. Per tal de poder ampliar el contingut del portal web. ●Editar pàgina: 1. Com a administrador/editor, 2. Jo vull poder editar qualsevol pàgina 3. Per tal de poder actualitzar el contingut del portal web. 34 ●Afegir usuari: 1. Com a administrador, 2. Jo vull poder afegir un usuari 3. Per tal de poder permetre-li l’accés. ●Editar usuari: 1. Com a administrador, 2. Jo vull poder editar qualsevol usuari 3. Per tal de poder modificar els seus privilegis. ●Accedir a totes les característiques d’administració: 1. Com a administrador, 2. Jo vull poder accedir a totes les característiques d’administració 3. Per tal de poder modificar qualsevol configuració necessària del portal web. 4.2.4. Criteris d’acceptació Els criteris d’acceptació de les històries d’usuari consisteixen en justificar quines condicions s’han de complir per tal de que cada història d’usuari es pugui considerar com acceptada. En el nostre cas, seguirem la següent estructura a l’hora de definir-los: ●< Nom criteri d’acceptació >: 1. Donat < precondició > 2. Quan < acció > 3. Aleshores < resultat > En el cas d’aquest projecte, pel que fa al portal web són els següents: ●Iniciar sessió: 1. Donat un usuari que encara no s’ha identificat en el portal web 2. Quan cerca en el navegador “http://sardaescola.cba.upc.edu/wp-login.php” 3. Aleshores és redirigit a la pàgina d’inici de sessió. ●Tancar sessió: 1. Donat un usuari que s’ha identificat en el portal web 2. Quan clica en el botó “Surt” 3. Aleshores la seva sessió en el portal web és tancada ●Editar perfil: 1. Donat un usuari que s’ha identificat en el portal web 2. Quan clica en el botó “Edita el perfil” 3. Aleshores és redirigit a la pàgina del seu perfil ●Descarregar document: 1. Donat un usuari qualsevol que es troba en el portal web 2. Quan clica en el nom del document que desitja descarregar 3. Aleshores el document s’obre en una finestra i es descarrega en local ●Títol i logotip: 1. Donat un usuari qualsevol 2. Quan clica en el títol o logotip del portal web 3. Aleshores és redirigit a la pàgina principal 35 ●Visualitzar pàgina: 1. Donat un usuari qualsevol 2. Quan fa clic en qualsevol nom de pàgina del menú principal 3. Aleshores és redirigit a la pàgina que hagi seleccionat ●Afegir pàgina: 1. Donat un usuari que s’ha identificat en el portal web 2. Quan fa clic en el botó “Pàgina” 3. Aleshores és redirigit a l’eina per afegir una pàgina ●Editar pàgina: 1. Donat un usuari que s’ha identificat en el portal web 2. Quan fa clic en el botó “Edita pàgina” 3. Aleshores és redirigit a l’eina per editar la pàgina ●Afegir usuari: 1. Donat un usuari administrador ja identificat en el portal web 2. Quan fa clic en el botó “Usuari” 3. Aleshores és redirigit a l’eina per afegir un usuari ●Editar usuari: 1. Donat un usuari administrador ja identificat en el portal web 2. Quan fa clic en el nom de l’usuari que vol editar 3. Aleshores és redirigit a l’eina per editar l’usuari ●Accedir a totes les característiques d’administració: 1. Donat un usuari administrador ja identificat en el portal web 2. Quan fa clic en el botó “SardEscola” 3. Aleshores és redirigit al “Tauler” 36 4.2.5. Esquema de comportament En aquest apartat especificarem quin serà el comportament esperat per a cada tipus d’usuari en el portal web. Aquesta vegada, es mostraran les dependències i condicions especificades en els apartats anteriors les quals determinaran el flux que pugui seguir cada tipus d’usuari. Diagrama 2. User flow Tal i com es pot veure en el “Diagrama 2. User flow”  , l’usuari del portal web no podrà realitzar certes accions en el cas que no hagi iniciat sessió prèviament. Amb aquesta condició, ens assegurem d’establir un control d’accés molt necessari pel cas d’aquest portal web. 37 4.3. Disseny 4.3.1. Arquitectura del sistema Per tal d’explicar l’arquitectura del sistema d’aquest projecte, es començarà realitzant una explicació pel que fa a l’estructura dels arxius i carpetes del portal web desenvolupat amb WordPress  . Una vegada feta, es procedirà a l’explicació de l’estructura de la base de dades amb la qual s’ha pogut desenvolupar dit portal web. Finalment, s’adjuntarà un diagrama amb una visió general dels components que formen part de l’arquitectura del sistema. Estructura arxius i carpetes En aquesta secció, en primer lloc s’adjuntarà una captura de pantalla dels arxius i carpetes del projecte i, en segon lloc, es procedirà a l’explicació dels més importants. Per tal de localitzar-los, caldrà iniciar la màquina virtual VirtualBox amb el sistema operatiu Ubuntu  , obrir l’aplicació Konsole i iniciar sessió en el nostre servidor mitjançant la comanda “ssh [email protected]”. Un cop dins, ens dirigirem al directori “/var/www/html” per tal de poder visualitzar els arxius i carpetes del projecte tal i com podem veure a continuació: Figura 1. Arxius i carpetes del projecte ● Carpeta “wp-admin”: on es guarden els arxius de back-end de WordPress  . ● Carpeta “wp-content”: on es guarda tot el contingut en format d’arxius. ● Carpeta “wp-includes”: API i llibreries principals. ● Arxiu “index.php”: arxiu principal al qual s’accedeix i des d’on es carreguen la resta de parts de WordPress  . ● Arxiu “wp-config.php”: és l’arxiu principal de configuració de WordPress  , on es guarden les dades de connexió amb la base de dades. ● Arxiu “wp-login.php”: encarregat de gestionar el login de tots els usuaris. 38 Estructura base de dades Tal i com ha sigut mencionat en apartats anteriors, la base de dades relacional utilitzada en aquest projecte és MySQL  . Aquesta secció consistirà en una explicació general de l’estructura d’aquesta BD tot comentant les taules involucrades i les relacions entre aquestes, que són les següents: ● Taula “wp_comments”: conté les dades dels comentaris. ● Taula “wp_commentmeta”: conté contingut addicional sobre els comentaris. ● Taula “wp_links”: conté la llista d’enllaços. ● Taula “wp_options”: conté totes les opcions de WordPress  , incloent la configuració de temes i plugins. ● Taula “wp_posts”: conté tot el contingut de WordPress com entrades, pàgines, fitxers i menús. ● Taula “wp_postmeta”: conté informació relacionada amb els posts (relacionada amb “wp-posts”. ● Taula “wp_terms”: conté les categories i etiquetes. ● Taula “wp_termmeta”: conté les metadades relacionades amb categories. ● Taula “wp_term_relationships”: conté les relacions entre posts-categories/etiquetes. ● Taula “wp_term_taxonomy”: estableix les característiques de les taxonomies com les entrades i pàgines. ● Taula “wp_users”: conté tots els usuaris amb la seva informació bàsica. ● Taula “wp_usermeta”: conté informació addicional de tots els usuaris (relacionada amb “wp_users”. Tot i així, deixo adjuntat el següent enllaç [14] en el qual es pot veure el diagrama de la base de dades i una explicació molt més profunda i detallada de tota la base de dades. Visió general Diagrama 3. Visió general components sistema 39 4.3.2. Mockups A continuació s’adjunten els mockups del portal web que s’han considerat més rellevants. La principal finalitat d’aquests consisteix en plasmar una primera idea de com haurà de ser el producte desenvolupat a nivell visual però també, i molt important, com haurà d’estar estructurat. Aquest últim factor, tal i com podrem veure, vindrà directament definit per l’estructura del menú principal horitzontal, el qual determina les pàgines i subpàgines d’aquest portal web. Presentació En el cas de la pàgina de presentació coincidirà en que també serà la pàgina d’inici en la qual, a part del logotip i el títol del portal web, hi haurà contingut en forma de presentació sobre el projecte per tal d’oferir context a qualsevol usuari que visiti el portal web. Figura 2. Mockup pàgina “Presentació” 40 4.4.2. Funcionament de WordPress Per tal d’explicar de manera general el funcionament de WordPress  , ens basarem en que té una part de Front-End  i una altra de Back-End  . Per una banda, el Front-End de WordPress consisteix en la part visible del portal web, és a dir, tot allò que podran veure els usuaris que visitin el portal web. Per tal de poder accedir-hi, només cal cercar al navegador l’adreça del mateix portal web (en el nostre cas, “http://sardaescola.cba.upc.edu”). Per altra banda, el Back-End (o “Tauler”) de WordPress consisteix en la part considerada entorn de treball, a la qual només podran accedir a les seves funcionalitats els usuaris autoritzats com ara l’administrador i els editors del portal web (tot i que aquests últims només a unes certes funcionalitats, prèviament ja esmentades). És on es prepara tot el que es veurà en el Front-End i, per tal de poder accedir-hi, només cal iniciar sessió en la pàgina d’inici de sessió (en el nostre cas, “http://sardaescola.cba.upc.edu/wp-login.php”). Figura 6. Back-End del portal web Tal i com es pot veure a la barra de la part esquerra de la imatge, WordPress ofereix la possibilitat de treballar amb les següents facilitats: ● Entrades ● Mèdia ● Pàgines ● Comentaris A més a més permet configurar l’aparença, les extensions, els usuaris, les eines i les opcions del portal web. 47 4.4.3. Procés d’implementació En aquest apartat s’explicaran els passos que es van dur a terme al llarg del procés d’implementació del portal web, els quals es poden classificar en les següents fases: Selecció del tema WordPress ofereix una gran varietat de temes a l’hora de dissenyar el teu portal web, tant gratuïts com de pagament. Un tema és una plantilla predefinida la qual s’encarrega principalment de l’estructura de la part estètica del web. Per tal de seleccionar el tema desitjat, cal dirigir-se al menú “Aparença” i fer clic en “Temes”. Un cop allà, apareixeran els temes per defecte. En cas de voler un altre estil de tema, només caldrà fer clic en “Afegir un nou tema” i instal·lar el que més ens agradi o millor s’adapti a l’estil de projecte de cadascú. Figura 7. Selecció del tema En el cas d’aquest projecte, al principi va ser necessari estar instal·lant, provant i desinstal·lant diversos temes per tal de veure quin era el que millor s’adaptava a l’estil d’aquest projecte i oferia més possibilitats de personalització per tal de complir amb les necessitats d’aquest. Finalment, es va seleccionar el tema gratuït anomenat “Twenty Nineteen” ja que es va valorar positivament tant la manera en que s’adequava a les necessitats del projecte, com per l’estructura que oferia, com pel fet que es buscava un estil el més senzill i clar possible. Tot i així, com el portal web a dia d’avui encara està en fase d’evolució constant, no es descarta pas que en un futur es valori actualitzar el tema. 48 Selecció del títol i del logotip Estem d’acord en que tot projecte ha de tenir la seva identitat (com per exemple, el seu títol i logotip), doncs en el cas d’aquest projecte, el portal web desenvolupat no serà menys. Durant les reunions amb els clients, entre moltes altres coses, es va estar parlant sobre quin títol i logotip s’assignaria al portal web. Per una banda, pel que fa al títol es va decidir “SardEscola” ja que representa una fusió entre els mots “Sardana” i “Escola”, els quals representen prou acuradament la ideologia d’aquest projecte. Una vegada va ser mencionada la idea, vem trigar ben poc en posar-nos tots d’acord i decantar-nos per ella ja que la vem considerar molt original i acertada. Per altra banda, el procés d’elecció de logotip va ser més peliagut ja que hi havia diverses opcions i, en conseqüència, vàrem acabar realitzant una votació per tal d’escollir el logotip més adient al projecte. En la següent captura es pot veure tant el títol com el logotip finalment escollit: Figura 8. Selecció del títol i del logotip En cas de voler modificar-los, caldria dirigir-se al “Tauler”, al menú “Aparença”, fer clic en “Personalitza” i finalment en “Identitat del lloc web”. A més a més, WordPress ens ofereix l’opció de modificar la icona del lloc web. 49 Gestió dels usuaris Pel que fa a la gestió d’usuaris d’aquest projecte, ha sigut necessària la creació de dos tipus d’usuari segons el seu rol: ● Administrador ● Editor Figura 9. Gestió dels usuaris Tant les funcionalitats, com els privilegis, com les diferències entre aquests dos tipus d’usuari ja han sigut prèviament explicades en l’apartat “4.1.1. Parts interessades”. El motiu per el qual s’ha remarcat que la creació dels dos tipus d’usuari segons el seu rol hagi sigut necessària es deu al fet que, mentre l’equip desenvolupador (concretament l’autor d’aquest TFG) s’havia d’encarregar de desenvolupar el portal web a nivell funcional fent ús de l’usuari administrador, els clients (concretament l’estudiant del Màster de Secundària) havien de poder recopilar, organitzar i allotjar el contingut docent al portal web simultàniament. Per tal de que això fos possible, es va haver de crear un altre usuari amb rol d’editor amb el qual s’aconseguiria permetre l’accés als clients al portal web amb el privilegi de poder tant afegir com editar contingut. 50 Creació de les pàgines L’element fonamental d’aquest portal web són les pàgines ja que és on es troba tot el contingut docent allotjat. A més a més, les pàgines poden ser organitzades jeràrquicament per tal de seguir una estructura ben ordenada i clara. Al llarg del procés d’implementació del portal web, la creació de pàgines ha sigut imprescindible ja que és la manera idònia de mostrar el contingut allotjat al portal web (independentment de que sigui text, imatges o documents). Per tal de veure les pàgines creades, cal fer clic en “Pàgines” i se’ns mostrarà una llista amb totes les pàgines del portal web. En cas de voler afegir una nova pàgina, caldrà fer clic en el botó “Afegeix” i se’ns redirigirà a l’eina de creació de noves pàgines. Figura 10. Creació de les pàgines 51 Creació del menú principal Durant el procés d’implementació, a mesura que anava creant les pàgines necessàries em vaig adonar de que posteriorment seria necessària la creació d’un menú principal horitzontal ben complert, intuïtiu i ben estructurat ja que seria clau a l’hora de facilitar la navegació pel portal web als usuaris. Degut a la importància que suposava la correcta implementació i estructuració d’aquest menú principal, vaig optar per informar-me sobre els plugins disponibles. Finalment, em vaig decantar per instal·lar l’extensió gratuïta anomenada “Max Mega Menu” i, honestament, he quedat molt satisfet amb les possibilitats que ofereix tant de personalització com de funcionalitats. Un cop instal·lat, vaig fer clic en “Mega Menu” a la part inferior de la barra lateral esquerra i em vaig dedicar a configurar-lo al meu gust per tal de que s’adaptés de la millor manera possible a les necessitats dels clients i, en conseqüència, del portal web. Una vegada configurat, vaig optar per començar a estructurar-lo. Per estructurar, entenem el fet d’afegir tant les pàgines com les categories que ja hagin sigut prèviament preparades i organitzar-les segons l’estructura acordada en les reunions amb els clients (cada secció del menú segueix una estructura diferent, tal i com s’ha explicat en l’apartat “4.3.2. Mockups”). Per tal d’estructurar un menú cal dirigir-se a “Aparença” i fer clic en “Menús”. Figura 11. Creació del menú principal 52 4.4.4. Funcionalitats En aquest apartat es mostraran les funcionalitats del resultat final del portal web desenvolupat en aquest projecte. Tot i així cal remarcar que el portal web es troba en fase de prototipatge i que, per tant, seguirà evolucionant constantment. En conseqüència, anirà variant segons es vagin realitzant noves iteracions per tal d’establir noves funcionalitats o inclús millorar les ja existents. Per tal de mostrar les funcionalitats, s’adjuntaran certes captures del portal web en el seu estat actual les quals facilitaran l’explicació i comprensió de les funcionalitats. Visualitzar pàgina Tal i com s’havia comentat en l’apartat “4.2.1. Requisits funcionals”, tot usuari ha de poder visualitzar qualsevol pàgina del portal web sense la necessitat d’haver-se identificat prèviament. Per tal d’aconseguir-ho, caldrà que cerquin en el navegador l’adreça del portal web (“http://sardaescola.cba.upc.edu”) i que naveguin per el menú principal horitzontal per tal de visualitzar la pàgina que desitgin. Figura 12. Visualitzar pàgina 53 Títol i logotip Tal i com s’havia comentat en l’apartat “4.2.1. Requisits funcionals”, qualsevol usuari que faci clic en el títol o logotip ha de ser redireccionat a la pàgina inicial o “Presentació”. Aquesta funcionalitat no és representable mitjançant captures però sí que es troba operativa. Per tal de comprovar-ho només cal que us dirigiu al portal web i feu clic en el mateix títol o logotip. Figura 13. Títol i logotip Descarregar document Tal i com s’havia comentat en l’apartat “4.2.1. Requisits funcionals”, en cas que qualsevol usuari faci clic en el nom d’algun document (enllaç de color blau), automàticament s’iniciarà la descàrrega d’aquest. D’aquesta manera es pretén facilitar l’obtenció de material educatiu ja adaptat per tal de que l’usuari pugui posteriorment posar-lo en pràctica o, senzillament, donar-li una ullada. Figura 14. Descarregar document 54 Iniciar sessió Tal i com s’ha comentat prèviament, tot usuari administrador o editor ha de poder iniciar sessió en el portal web per poder gaudir dels privilegis que ofereixen els seus rols. Per tal de poder fer-ho, caldrà que afegeixin a l’adreça del portal web “/wp-login.php” (és a dir, “http://sardaescola.cba.upc.edu/wp-login.php”) i seran redireccionats a la pàgina d’inici de sessió. Un cop allà, hauran d’introduir el seu nom d’usuari i contrasenya i fer clic en el botó “Entra” per tal de poder accedir al Back-End  del portal web. Figura 15. Iniciar sessió Tancar sessió Tal i com s’ha comentat prèviament, tot usuari administrador o editor ha de poder tancar sessió en el portal web una vegada vulgui finalitzar de manera segura la seva visita. Per tal de poder fer-ho, només caldrà que faci clic en el seu nom a dalt a l’esquerra i seguidament en l’opció del desplegable “Surt”. Figura 16. Tancar sessió 55 Editar perfil Tal i com s’ha comentat prèviament, tot usuari administrador o editor ha de poder modificar les seves dades personals una vegada hagi iniciat sessió en el portal web. Per tal de poder fer-ho, només caldrà que faci clic en el seu nom a dalt a l’esquerra i seguidament en l’opció del desplegable “Edita el perfil”. Figura 17. Editar perfil Afegir pàgina Tal i com s’ha comentat prèviament, tot usuari administrador o editor ha de poder afegir una pàgina al portal web (una vegada hagi iniciat sessió) per tal de poder ampliar el contingut d’aquest. Per tal de poder fer-ho, caldrà que faci clic en les opcions “Afegeix” i “Pàgina” visibles en la barra superior de la pantalla. Figura 18. Afegir pàgina 56 5.1.3. Distribució de l’esforç A partir de la planificació de tasques anterior mitjançant tant la taula com el diagrama de Gantt, s’obté com a resultat el nombre d’hores necessàries per a cada fase del projecte i el pes corresponent de cadascuna respecte al del total. Per tal de poder complir amb el termini del projecte a temps i correctament, s’ha determinat que es dedicaran 4 hores/dia, 5 dies/setmana i 20 dies/mes. Dit això, la taula final representant la distribució de l’esforç és la següent: Fase Duració Pes 1. Anàlisi prèvia 11 dies (44 hores) 11 % 2. Gestió de projectes 30 dies (120 hores) 30 % 3. Anàlisi de requisits 6 dies (24 hores) 7 % 4. Especificació 15 dies (60 hores) 15 % 5. Disseny, implementació i proves 34 dies (136 hores) 34 % 6. Final 3 dies (12 hores) 3 % TOTAL 99 dies (396 hores) 100 % Taula 15. Duració i percentatge del temps emprat en cada fase 63 5.1.4. Recursos Recursos humans A continuació es descriuen, de manera resumida, els rols que estaran implicats en aquest projecte i les tasques que realitzarà cadascú: ●Cap de projecte: Encarregat de la planificació i supervisió de les tasques a desenvolupar en un projecte així com de l'organització, coordinació i mediació d'un equip de recursos humans. ●Analista: Estudien els problemes actuals per proposar una solució òptima i d'acord amb els recursos disponibles. Proporcionen les funcionalitats que tindrà el sistema mitjançant el model de casos d'ús, entre d'altra documentació. ●Dissenyador: En base a la documentació proporcionada pels analistes, estructuren i defineixen una arquitectura pel sistema que s'ha de desenvolupar. ●Programador: S'encarreguen d'implementar el disseny proposat pels dissenyadors d'una forma eficient. ●Tester: Proven el sistema per detectar errors o recomanar modificacions, han de realitzar un informe després de cada prova executada. Recursos materials A banda de tots els recursos humans necessaris, també faran falta els següents recursos materials (tan hardware  com software  ) per tal de poder dur a terme el projecte: Recurs Finalitat Windows 10 Sistema operatiu per treballar. Linux Sistema operatiu per treballar. Wordpress Plataforma per desenvolupar el portal web. Google Docs Software per a la documentació de tot el projecte. Google Drive Software per a l’emmagatzematge del projecte. Google Chrome Navegador per a cercar informació. Gantter Software per planificar el projecte. Balsamiq Mockups Software per realitzar els esbossos. MySQL Base de dades per emmagatzemar contingut. Taula 16. Llistat de recursos materials 64 5.2. Valoració d’alternatives i pla d’acció En la planificació inicial s'han tingut en compte dos aspectes. D'una banda, s'ha decidit donar més temps del que li sol correspondre a la fase d'implementació ja que és la part en la qual valoro que poden aparèixer problemes a causa de la inexperiència amb la tecnologia que es treballarà (portal web). D'altra banda, s'ha acotat la realització de la feina fins a la tercera setmana de juny per la qual cosa hi ha un marge de maniobra de fins a una setmana i mitja més, en cas que alguna tasca s’allargués respecte del temps previst. A continuació s’especifiquen els possibles obstacles/riscs que es poden trobar un cop es comenci a treballar en el projecte, ordenats per ordre de gravetat decreixent: Risc Gravetat Pla de contingència Pèrdua de documentació del projecte. Elevada Es faran còpies de seguretat en local cada vegada que s’avanci en el projecte. Poca experiència en les noves tecnologies, eines de desenvolupament i llenguatges de programació nous. Mitjana Es consultarà informació disponible en webs i s'implementaran primer les funcionalitats menys complexes per adquirir experiència. Manca de temps per acabar el projecte. Mitjana En les diferents reunions amb el director, s'avaluarà si hi ha hagut desviacions i com es podran corregir. Aparició de noves funcionalitats o canvis. Baixa S'intentarà definir totes les funcionalitats en la fase de requisits. Si apareixen noves, es valorarà el cost de incloure-les. Taula 17. Valoració de riscos i pla de contingència En el cas que s'hagi de dedicar més temps del que inicialment s'havia planificat per a alguna tasca, es realitzarà alguna de les següents accions per tal d’evitar provocar una desviació molt gran respecte la planificació inicial: ●Prioritzar el treball imprescindible: Es dedicarà més temps a solucionar problemes que afectin al conjunt del projecte i es reduiran o suprimiran les tasques secundàries. ●Augmentar el temps de dedicació: S'augmentarà el nombre d'hores diàries dedicades al projecte. 65 6. PRESSUPOST 6.1. Identificació i estimació de costos En aquesta secció es fa una estimació dels elements que componen el pressupost total del projecte tenint en compte els recursos utilitzats. Dins dels recursos s'inclouen les hores de treball dedicades, el cost del maquinari i programari que s'ha utilitzat, entre d'altres factors. 6.1.1. Recursos humans A continuació es mostra una taula on, per a cadascun dels rols implicats en el projecte, es defineixen les hores totals dedicades estimades, la remuneració i el seu cost total estimat: Rol Hores estimades Remuneració Cost estimat Cap de projecte 176 h 20,83 €/h 3.666 € Analista 84 h 12,5 €/h 1.050 € Dissenyador 41 h 9,375 €/h 384,375 € Programador 73 h 9,375 €/h 684,375 € Tester 22 h 9,375 €/h 206,25 € TOTAL 396 h - 5.991 € Taula 18. Pressupost de recursos humans Per a l'estimació de les hores de treball de cada rol, s'han tingut en compte les hores en què el paper estarà implicat en les activitats del projecte a partir de les taules 14 i 15 (establint un percentatge de dedicació en les etapes que hi ha rols solapats). Pel que fa a la remuneració associada a cada rol definida en la Taula 18, cal mencionar que ha sigut extreta de l’estudi de remuneració realitzat per Page Personnel [17] a l’any 2018 el qual mostra el sou anual de cada rol, entre d’altres estimadors. I per tal de calcular la remuneració per hora, s’ha hagut de calcular de la següent manera: Remuneració (€/h) = Sou anual mínim / 240 dies laborals / 8 hores al dia 66 6.1.2. Recursos materials A continuació es mostra una taula amb el cost de cada recurs material i el cost total: Recurs Cost Windows 10, Linux 0 € WordPress 0 € MySQL 0 € Google Docs, Drive i Chrome 0 € Gantter 0 € Balsamiq Mockups 0 € Ordinador portàtil 0 €* TOTAL 0 € Taula 19. Pressupost de recursos materials *Si l´equip té més de 4 anys ja està amortitzat i no computa com a cost (és el cas). 6.1.3. Costos directes per activitat La taula següent mostra les hores i recursos emprats per a cada activitat del Gantt i el cost: Activitat Hores Recurs Cost 1. Anàlisi prèvia 44 h Cap de projecte 916 € 2. Gestió de projectes 120 h Cap de projecte 2.500 € 3. Anàlisi de requisits 24 h Analista 300 € 4. Especificació 60 h Analista 750 € 5. Disseny, implementació i proves 136 h Dissenyador, programador i tester 1.275 € 6. Final 12 h Cap de projecte 250 € TOTAL 396 h - 5.991 € Taula 20. Cost directe total per a cada activitat del Gantt 67 6.1.4. Costos indirectes En aquest apartat s’han tingut en consideració les despeses generals associades al desenvolupament del projecte. Per una banda ens trobem amb el consum energètic i la connexió a Internet, tots dos factors claus per a poder treballar en el desenvolupament del projecte. I per l’altra banda, el cost del transport públic ja que periòdicament s’hauran de realitzar reunions amb el director del projecte a la mateixa facultat. Producte/Servei Preu Període Cost estimat Consum energètic 0.15 €/kWh 396 h 9 € Connexió a Internet 23 €/mes 5 mesos 115 € Transport públic T-10 3 zones 27,40 €/bitllet 5 mesos 137 € TOTAL - - 261 € Taula 21. Pressupost dels costos indirectes 6.1.5. Contingències Tot i que el projecte ha sigut planificat per tal de ser finalitzat amb dues setmanes d'antelació respecte la defensa oral final, és probable que al final facin falta més dies. Per tal de contemplar aquesta possible contingència, s’assumeix que aquest cas es pot produir amb un risc d’un 35% i que el cost destinat a cada dia fora de la planificació inicial es calcula segons el cost mitjà dels costos directes i indirectes entre el nombre de dies de la planificació inicial. Cost per dia fora de la planificació inicial = 0,35 risc * (costos directes + costos indirectes) / nombre de dies = 0,35 * (5.991 € + 261 €) / 99 dies = 22 € Cost per 14 dies fora de la planificació inicial = 22 € * 14 dies = 308 € A més a més, podria donar-se el cas que sorgís una fallada a l'ordinador utilitzat per al desenvolupament del projecte, llavors caldria afegir el cost de reparació que aproximadament seria de 100 €, i mentre estigués inactiu s'utilitzaria un segon ordinador per tal d’evitar endarrerir les activitats planificades. El risc de que succeeixi aquesta contingència és d'un 10%, suposant-nos així un cost d’imprevist de 10 €. 68 6.1.6. Imprevistos Com a mesura d’imprevist, s’ha establert un marge del 10% respecte el total del projecte. Aplicant la següent fórmula, per tal de calcular-ho: Imprevists = 0,1 * (Total costos directes + Total costos indirectes) = 0,1 * (5.991 € + 261 €) = 625 € 6.1.7. Pressupost total Finalment, de tots els costos analitzats i comentats fins ara, se n’ha extret el cost estimat del pressupost total: Concepte Cost estimat Costos directes 5.991 € Costos indirectes 261 € Contingència 318 €* Imprevistos 625 €* TOTAL 7.195 € Taula 22. Pressupost total del projecte *En cas que no calgui utilitzar els diners d’aquestes dues partides, significarà que l’equip desenvolupador del projecte haurà realitzat una bona feina i que, per tant, es mereixeran ser recompensats distribuint proporcionalment dita quantitat segons el tant per cent de participació/aportació en el projecte. 69 6.2. Control de gestió Tal com s'ha explicat en apartats anteriors, diàriament s'anirà actualitzant una taula amb les tasques realitzades en el dia i el temps de dedicació. Per tal de portar un control de les hores que treballa un paper concret en un dia; es crearà una segona taula que s'actualitzarà diàriament, tal com mostra la següent taula d'exemple: Dia Cap de projecte Analista Dissenyador Programador Tester 07/03/19 4h - - - - Taula 23. Control diari d’hores treballades per cada rol En finalitzar el projecte (o en un moment concret del desenvolupament), es sumaran les hores que cada paper ha treballat en el projecte, i d'aquesta manera s’obtindran les hores reals per poder comparar-les amb les que es van estimar durant l'etapa de planificació i així poder visualitzar possibles desviacions del pressupost inicial: Rol Hores estimades Cost estimat Hores reals Cost real Cap de projecte 176 h 3.666 € 190 h 3.958 € Analista 84 h 1.050 € 80 h 1.000 € TOTAL 260 h 4.716 € 270 h 4.958 € Taula 24. Control de desviacions pressupostàries segons rol Tota aquesta informació facilitarà la feina a l’hora de detectar i calcular les possibles desviacions que s’hagin pogut produir. A continuació, com a exemple, es mostra com es calcularien les desviacions per hores i per cost respecte a la taula anterior: Desviació per hores = Hores estimades – Hores reals = 260 h – 270 h = -10 h Desviació per cost = Cost estimat – Cost real = 4.716 € - 4.958 € = -242 € És a dir, finalment hauria fet falta treballar 10 hores més respecte a les estimades inicialment i hauria sigut necessari augmentar el pressupost 242 € per tal de poder cobrir les despeses extres per part dels recursos humans. 70 7. SOSTENIBILITAT 7.1. Informe Una vegada contestada l’enquesta del projecte EDINSOST i enviada, m’ha fet reflexionar sobre el tema de la sostenibilitat i la seva importància. A mesura que anava llegint les afirmacions m’he adonat que en més de la meitat en desconeixia el context al qual feien referència i, en conseqüència, m’ha fet qüestionar-me pel que fa al meu nivell de formació en sostenibilitat fins a dia d’avui. És a dir, pel que fa a aquesta temàtica i les dimensions que la componen, reconec tenir un nivell bàsic amb el qual a nivell teòric-general sabria parlar i actuar al respecte. Però a mesura que anava avançat en l’enquesta m’adonava com les afirmacions requerien d’un coneixement més tècnic i detallat. Tot i així, cal esmentar que per la part de gestió econòmica m’he vist més capacitat d’entendre les afirmacions i estar més d’acord amb elles, degut a que ja ho havia posat prèviament en pràctica en algunes assignatures del grau. A diferència de, per exemple, quan se’m pregunta pels principis deontològics de la sostenibilitat els quals de primeres reconec desconèixer fins que els he acabat cercant en Internet. Així mateix, pel que feia a les afirmacions relacionades amb indicadors me n’he adonat també que no els hagués sapigut especificar. Cal esmentar que qualsevol dubte o desconeixement l’he resolt al moment consultant-lo en la web per tal de convertir-lo en coneixement. Com a conclusió, penso que la sostenibilitat és un factor molt important que cal tenir present a l’hora de desenvolupar qualsevol estil de projecte ja que per més rendible que sigui el resultat final del teu projecte, si no tens en compte tant a la societat com al medi ambient quan totes dues dimensions estan directament relacionades amb el nostre dia a dia, indirectament d’una manera o altra t’estaràs perjudicant. 71 7.2. Dimensions 7.2.1. Econòmica En aquest projecte sí que s’ha realitzat una avaluació dels costos, tant dels recursos humans i materials com de les despeses generals. Però no s’ha tingut en compte el cost dels ajustaments / actualitzacions / reparacions durant la vida útil del projecte ja que ha sigut desenvolupat en un entorn acadèmic. Pel que fa al cost del projecte, al ser comparat amb altres projectes similars que realitzen les empreses del sector, es pot comprovar com aquest té un cost molt ajustat i, per tant, pot ser considerat tant viable com competitiu. Respecte a la realització del projecte, és cert que es podria acabar en menys temps si els recursos humans fossin més experimentats professionalment parlant. Per altra banda, pel que fa a reduir la utilització de recursos, seria poc viable i força difícil, ja que actualment s’utilitzen els mínims recursos necessaris per a la correcta realització del projecte. El temps dedicat a cada tasca és proporcional a la seva importància que sol tenir en projectes similars i no s'ha dedicat molt de temps a desenvolupar parts del projecte que podien haver estat reutilitzades de tecnologies / projectes / coneixements existents. Finalment, pel que fa a una possible col·laboració amb altres projectes (principalment acadèmics), aquest projecte pretén facilitar la feina als professors, de manera que si alguna institució o empresa privada del sector estigués interessada, podria realitzar-se algun tipus de col·laboració. 72