Recomanador de matrícula en format web dirigit als estudiants de la UPC-ETSEIB, basat en el mètode estadístic de l’anàlisi del veí més pròxim

Treball de Fi de Grau/Màster Grau en Enginyeria en Tecnologies Industrials Recomanador de matrícula en format web dirigit als estudiants de la UPC-ETSEIB, basat en el mètode estadístic de l’anàlisi del veí més pròxim MEMÒRIA Autor: Guillermo Amado Balaguer Director: Lluís Solano Albajes Convocatòria: Juny 2021 Escola Tècnica Superior d’Enginyeria Industrial de Barcelona A l’Alèxia, per haver-me fet suport al llarg de tota la carrera i per incentivar-me a sempre donar el millor de mi. Al Lluís, per brindar-me l’oportunitat de començar aquest projecte de nou i acceptar tutoritzar-me’l. Memòria TFG 2020-2021 RESUM I PARAULES CLAU Aquest Treball de Fi de Grau ha estat creat amb la finalitat d’ajudar els actuals i futurs estudiants del Grau en Enginyeria en Tecnologies Industrials a la Universitat Politècnica de Catalunya a Barcelona (ETSEIB). Més concretament, ha consistit en el desenvolupament d’una eina que els facilitarà el complex procés de matriculació d’assignatures durant la fase inicial del grau (primer i segon quadrimestre). Per tal d’aconseguir-ho, he intentat combinar una vessant teòrica amb una de pràctica. En primer lloc, he fet un anàlisis i un tractament de les dades extens, combinant una base estadística amb el llenguatge Python i la seva llibreria Pandas. D’aquesta manera he aconseguit, no només estructurar i filtrar les dades necessàries per aquest projecte, sinó també elaborar un codi que em facilités la part pràctica (i, per tant, el producte final real) del treball. A partir d’aquí, la part pràctica es recolza en la creació d’una pàgina web dinàmica, intuïtiva, senzilla i accessible. Per tal de fer-ho possible he combinat tres llenguatges de programació web: HTML5, CSS3 i JavaScript. Finalment, he aconseguit crear un producte final que considero prou realista i que es podia ampliar molt més en un futur i arribar a ser de gran utilitat per als estudiants i docents de l’escola ETSEIB de la Universitat Politècnica de Catalunya. Paraules clau: recomanador de matrícula, anàlisi de dades, Python, Pandas, HTML5, CSS3, JavaScript, fase inicial Memòria TFG 2020-2021 ABSTRACT AND KEY WORDS This Final Degree Project has been created with the aim of helping current and future students of the Degree in Engineering in Industrial Technologies at the Polytechnic University of Catalunya in Barcelona (ETSEIB). More specifically, it has consisted of the development of a tool that will facilitate the complex process of enrollment of subjects during the initial phase of the degree (first and second semester). In furtherance of that goal, I have tried to combine a theoretical slope with a practical one. In the first place, I did extensive data analysis and processing, combining a statistical basis with the Python language and its Pandas library. By doing so, I have managed not only to structure and filter the data needed for this project, but also to develop a code that facilitates the practical part (and, therefore, the real final product) of the project. From here, the practical part is supported by creating a dynamic, intuitive, simple, and accessible website. To make this possible, I have combined three web programming languages: HTML5, CSS3 and JavaScript. Finally, I have managed to create a final product that I consider realistic enough and that could be expanded much more in the future and become very useful for students and teachers of the ETSEIB school of the Polytechnic University of Catalunya. Key words: enrollment recommender, data analysis, Python, Pandas, HTML5, CSS3, JavaScript, initial phase Pàg. 5 Memòria TFG 2020-2021 ÍNDEX ÍNDEX ............................................................................................................................................. 5 1. GLOSSARI .............................................................................................................................. 9 2. PREFACI ............................................................................................................................... 11 2.1. Origen del treball ............................................................................................................ 11 2.2. Motivació ........................................................................................................................ 11 2.3. Requeriments previs ....................................................................................................... 12 3. INTORUDCCIÓ ................................................................................................................... 13 3.1. Objectius del treball ........................................................................................................ 13 3.2. Abast del treball .............................................................................................................. 14 4. CONTEXT ............................................................................................................................ 15 5. PROBLEMES A RESOLDRE ............................................................................................. 17 6. BASE DE DADES ORIGINAL ........................................................................................... 18 7. APLICACIONS I REQUERIMENTS .................................................................................. 20 7.1. Filtre ................................................................................................................................ 20 7.1.1. Filtre inicial ............................................................................................................. 20 7.1.2. Alumnes amb assignatures suspeses ....................................................................... 20 7.1.3. Codificació d’assignatures ...................................................................................... 21 7.2. Localitzar els veïns ......................................................................................................... 21 7.3. Tractament de dades previ a anàlisi ................................................................................ 22 7.4. Rendiment dels veïns ...................................................................................................... 22 Pàg. 6 Memòria TFG 2020-2021 7.5. Resultat ........................................................................................................................... 23 8. EINES .................................................................................................................................... 24 9. DESCRIPCIÓ DE LES EINES ............................................................................................. 25 9.1. Llenguatges de programació........................................................................................... 25 9.1.1. Python ..................................................................................................................... 25 9.1.2. HTML 5 .................................................................................................................. 26 9.1.3. CSS 3 ....................................................................................................................... 26 9.1.4. JavaScript ................................................................................................................ 27 9.1.5. Conjunt HTML + CSS + JavaScript ....................................................................... 28 9.2. Editors de text ................................................................................................................. 28 9.2.1. Jupyter Notebook .................................................................................................... 28 9.2.2. Python y Python Shell ............................................................................................. 29 9.2.3. Visual Studio Code ................................................................................................. 29 9.3. Llibreries ......................................................................................................................... 30 9.3.1. Pandas ..................................................................................................................... 30 9.3.1. Flask ........................................................................................................................ 31 10. IMPLEMENTACIÓ .......................................................................................................... 34 10.1. Funcions creades amb Python .................................................................................... 34 10.1.1 Fitxers filtreQ1.py i filtreQ2.py............................................................................... 34 10.1.1.1. Funcions filtrar_Q1 ( ) i filtrar_Q2 ( ) ............................................................ 34 10.1.1.2. Funcions creafitxersQ2 ( ) i crearfitxersQ1 ( ) ............................................... 35 Pàg. 7 Memòria TFG 2020-2021 10.1.2. Fitxer programaQ1.py ........................................................................................ 36 10.1.2.1. Funció veins(l) ................................................................................................. 36 10.1.2.2. Funció analitza_veins ( l ) ............................................................................... 36 10.1.2.3. Funció exit ( ) ................................................................................................... 38 10.1.2.4. Funció addicio ( l ) .......................................................................................... 39 10.1.2.5. Funció resposta ( l ) ......................................................................................... 40 10.1.3. Fitxer filtres_q1_q2_q3.py .................................................................................. 41 10.1.3.1. Funció mercat ( ) ............................................................................................. 41 10.1.4. Fitxer programaQ_altres.py ............................................................................... 42 10.1.4.1. Funció vecinos ( ls ) ......................................................................................... 42 10.1.4.2. Funció df_q3 ( ) ............................................................................................... 43 10.1.4.3. Funció analiza_vecinos (la, ls) ........................................................................ 43 10.1.4.4. Funció addicion (la, ls) ................................................................................... 44 10.1.4.5. Funció respuesta (la, ls) .................................................................................. 44 10.2. Lloc Web ..................................................................................................................... 44 10.2.1 Pàgina principal .......................................................................................................... 45 10.2.1.1. Formulari per l’opció Q1 ................................................................................. 45 10.2.1.2. Formulari de Q1 i/o Q2 ................................................................................... 46 10.2.2. Pàgina amb la recomanació................................................................................. 48 10.2.3. Aplicació de l’HTML .......................................................................................... 50 10.2.4. Aplicació del CSS ............................................................................................... 51 Pàg. 14 Memòria TFG 2020-2021 3.2. Abast del treball La proposta que s’ha realitzat per a dur a terme aquest treball, és bastant completa, ja que s’ha de pensar i planificar la manera com es tractaran les dades i tenir en compte els coneixements necessaris per a dur-ho a terme. Les dades tractades s’han de manipular de manera que s’obtingui el resultat desitjat i, per últim, preparar una interfície per que permeti a l’usuari accedir-hi. A més, degut a que aquest treball es focalitza en ajudar els estudiants que estan cursant la fase inicial, es pot ampliar fàcilment per la cua, en un futur, i donar suport a estudiants que es troben en un punt més avançats del grau. En base a l’abast d’aquesta primera proposta del projecte, s’han podria considerar la utilitat i viabilitat per futurs estudis, i fins i tot es podria extrapolar a altres sectors professionals. Pàg. 15 Memòria TFG 2020-2021 4. CONTEXT En un món dominat per la tecnologia digital, cada dia cobren més força conceptes com globalització, big data (bases de dades) i llenguatges informàtics. En primer lloc, vull parlar de la globalització i la digitalització, ja que són fets que van molt lligats i als que cada vegada estem més exposats i condicionats. Actualment, gairebé tots els aspectes del nostre dia a dia se’n veuen cada vegada més influenciats i, bviament, cal que ens hi anem adaptant ja que també provoquen canvis en les necessitats de les persones i, en general, canvis en el món que ens envolta. Entenem com globalització (o mundialització) el procés pel qual els sistemes socials, naturals i tecnolgics convergeixen fins el punt d’afectar el conjunt de la Terra, la societat i els individus de tot el món. Aquest procés de globalització s’ha vist afavorit, en gran part, per l’exponencial desenvolupament tecnolgic que ha tingut lloc els darrers anys. Podem dividir aquesta evolució en 3 onades de transformacions de la tecnologia de la informació 1 : la tercera és la que estem vivint en l’actualitat, i que es caracteritza per introduir la tecnologia de la informació com a part integral del propi producte, pel que comporta molta innovació, guanys de productivitat i creixement econmic. Per altra banda, la digitalització és el fet de convertir una magnitud física, un text o una senyal analògica en una representació digital 2 : registrar dades de manera digital. En definitiva, les noves tecnologies ens donen l’oportunitat de saber què passa arreu del món, aprendre, investigar, i fins i tot crear negocis i vendre sense haver de sortir de casa. Les bases de dades (o big data) són definides a l’Enciclopèdia Catalana com el conjunt total de dades de què pot disposar l’ordinador o els seus usuaris. També es poden definir com dades de gran mida, típicament el grau de manipulació de les quals presenta reptes lògics 3 . Per tant, és clar veure que es tracta d’un concepte molt variant alhora que subjectiu, cosa que converteix en un repte qualsevol tractament que se’n vulgui fer. 1 Porter, M. i Heppelmann J. (2014). “How Smart, Connected Products Are Transforming Competition”, Harvard Business Review 2 Oxford Languages 3 Oxford English Dictionary Pàg. 16 Memòria TFG 2020-2021 Les dades es generen contínuament a partir de pràcticament tots els dispositius electrònics que avui en dia acompanyen a la societat. El món que ens envolta gira al voltant de la informació i l’anàlisi de la mateixa. Les grans empreses líders estan tan ben posicionades perquè, entre d’altres, utilitzen la immensitat de dades que generen, ja sigui per estudiar els seus potencials clients, com per vendre aquestes dades a altres empreses perquè les puguin analitzar i aplicar als seus respectius sectors. Així, és fàcil veure l’arma de doble fil que suposen: la dualitat que tenen com a eina de control, i alhora com a eina de gran ajuda per entendre millor com són els seus clients i què volen. Empreses com Google, Facebook i Apple són clars exemples d’aquest fenomen; han observat que generen un gran volum de dades i han sabut analitzar-les per treure’n profit. Si bé és cert que el big data afavoreix a les grans empreses, ja que són les que poden generar més volum de dades, també es pot aplicar en d’altres més petites i, inclús en entitats públiques, universitats, etc. Sense anar més lluny, al llarg del treball es demostrarà com l’ús de les bases de dades de les diferents matrícules dels estudiants de l’ETSEIB m’han fet possible desenvolupar aquest projecte. Així doncs, un dels principals objectius és buscar la optimització dels processos per tal de reduir els temps d’execució dels programes i de les funcions. Finalment, crec necessari fer menció als llenguatges informàtics o de programació per introduir el meu treball. Definits com els mitjans utilitzats pels programadors per crear un programa d’ordinador 4 , s’han convertit en les noves llengües del món actual, i de gran importància per aquest Treball Fi de Grau que presento. 4 https://es.wikipedia.org/wiki/Lenguaje_informático Pàg. 17 Memòria TFG 2020-2021 5. PROBLEMES A RESOLDRE El grau d’Enginyeria en Tecnologies Industrial esta dividit en dues parts: les assignatures que formen part de la fase inicial, i la resta d’assignatures que s’han de cursar fins el final de la carrera. Durant aquesta fase inicial és quan es produeix el famós primer filtre ja que, a l’estudiant, per a continuar en el grau se li exigeix, primerament, que al llarg d’un any acadèmic hagi superat un mínim de dotze crèdits i que, per altre banda, finalitzi aquesta fase inicial (que està composta per deu assignatures) en un termini màxim de dos anys. Un dels majors problemes en els que es troben els estudiants és la manca d’experiència que tenen tant en el coneixement general de les assignatures com en el funcionament de la universitat, ja que és quelcom que els ve de nou. Per això, existeixen molts casos d’estudiants que, després d’haver realitzat un quadrimestre molt dolent, amb l’objectiu de remuntar el curs, es matriculen a un gran número d’assignatures. Els resultats no solen ser els esperats i es troben en una situació pitjor que la inicial. És per això que, amb aquest treball, pretenc oferir una eina que pugui ajudar-los a fer una bona tria d’assignatures de cara al quadrimestre següent, de manera que, des d’un començament, tinguin la probabilitat més alta d’assolir el màxim número d’assignatures aprovades com sigui possible. Per altra banda, el principal repte que suposa dur a terme aquest treball, recau sobre el tractament de les dades que s’han proporcionat des de l’escola, ja que inicialment s’hauran de realitzar diferents filtrats per quedar-nos únicament amb aquelles dades que realment interessen per dur a terme l’estudi desitjat. Pàg. 18 Memòria TFG 2020-2021 6. BASE DE DADES ORIGINAL Des del servidor de PRISMA de la UPC es reben les dades que es disposaran per a realitzar el projecte. Aquestes dades, per, contenen molta informació innecessària per a dur a terme l’anàlisi i, per tant, se’ls hi d’aplicar algun filtre per poder-ne reduir el volum i quedar-nos només amb les que m’interessen. S’ha de tenir en compte que, com major sigui el volum de dades, major serà el temps de resposta i, per tant, interessa poder reduir-les al màxim. El primer fitxer que es traçarà serà “qfini2019.csv”, que presenta la següent estructura: Figura 1. Estructura i exemple d'entrades del fitxer qfini2019.csv. Font: elaboració pròpia 2021 Cada entrada d’aquest fitxer ens dona la informació tant dels resultats obtinguts per un estudiant (CODI_EXPEDIENT) cursant una assignatura de la fase inicial (CODI_UPC_UD), com del curs (CURS) i del quadrimestre (QUAD) en que l’ha cursat, entre d’altres. Per l’estudi que vull dur a terme, les dades que em seran de essencials són les que he destacat en color vermell: - El CODI_EXPEDIENT servirà per poder identificar en tot moment els alumnes. - El CODI_UPC_UD servirà per identificar quina assignatura ha cursat l’alumne. - El CURS indica l’any en què l’alumne ha cursat aquella assignatura. - El QUAD indica el quadrimestre en què l’alumne a cursat l’assignatura. - SUPERA indica si l’estudiant ha superat (S) o no (N) l’assignatura. - La NOTA_NUM_DEF fa referència a la nota que ha tret l’alumne a l’assignatura. Es pot observar que, de totes les dades, n’hi ha una que està subratllada en groc (CODI_PROGRAMA). Tot i que no es consideri de gran importància de cara a l’estudi, sí que ajudarà molt a l’hora de fer el filtrat de dades ja que, imposant que tingui un valor de 752, es descartaran totes les entrades dels estudiants que no pertanyin a l’ETSEIB. Per altra banda, també es disposa del fitxer qfnoini2019.csv que conté exactament la mateixa informació que el prèviament descrit però, en aquest cas, dels alumnes que han cursat la fase no inicial. Per tant, la informació que ens serà rellevant serà la del primer fitxer. Pàg. 19 Memòria TFG 2020-2021 Figura 2. Estructura i exemple d'entrades del fitxer qfnoini2019.csv. Font: elaboració pròpia 2021 Les dades d’aquest fitxer es poden fer servir per estudiar el pas dels alumnes del primer any al segon. Més concretament, el pas del quadrimestre dos al quadrimestre tres. Així doncs, entre d’altres filtres que s’hauran d’aplicar per poder tractar aquestes dades, un dels més rellevants serà quedar-se només amb les assignatures que pertanyin al tercer quadrimestre del grau. Pàg. 20 Memòria TFG 2020-2021 7. APLICACIONS I REQUERIMENTS Abans d’introduir el funcionament del programa en si, que s’ha desenvolupat per arribar al resultat final d’aquest treball, és important descriure correctament i clarament amb quines tasques s’ha anat dividint el projecte i quins objectius s’han anat complint amb elles. 7.1. Filtre 7.1.1. Filtre inicial Prèviament ja s’han introduït quines són les dades amb les que s’ha de treballar, i s’ha pogut comprovar que, efectivament, hi ha dades innecessàries que faran que el programa tardi més temps en executar-se i, per tant, disminueixi el rendiment. Per tant, aquest primer filtre simplement servirà per fer que, dels dos fitxers esmentats, n’apareguin només les dades que interessen per l’estudi. 7.1.2. Alumnes amb assignatures suspeses Serà necessari tenir agrupats als estudiants en funció de les assignatures que hagin suspès, per poder localitzar als estudiants que s’hagin trobat en la mateixa situació que l’usuari i analitzar el seu rendiment en el següent quadrimestre. Per aix s’elaborarà un segon filtre que agruparà els alumnes en diferents documents en funció de les assignatures suspeses. En aquests documents cada alumne tindrà una única entrada on apareixeran les assignatures que ha suspès. En el cas, per exemple, d’un alumne que hagi suspès en el primer quadrimestre Càlcul I (240012), Àlgebra (240011) i Química I (240014), es trobarà emmagatzemat en el fitxer amb tots els estudiants amb tres assignatures suspeses i es veurà representat de la següent manera: CODEX S1 S2 S3 Codi alumne 240011 240012 240014 Taula 1. Exemple entrada d'un alumne que ha suspès Àlgebra, Càlcul I i Química I, al fitxer de tres assignatures suspeses. Font: elaboració pròpia 2021 En els casos on l’usuari acabi de cursar per primer cop el primer quadrimestre, es creen cinc fitxers diferents, des dels alumnes que han suspès una assignatura fins als alumnes que n’han suspès cinc. Això és degut a que, en aquesta situació, l’alumne pot cursar cinc assignatures com a màxim. Per als casos on l’usuari acabi de cursar per primer cop el segon quadrimestre del grau, es creen fins a set documents diferents ja que, en aquest cas, els alumnes poden cursar més de cinc assignatures. Pàg. 21 Memòria TFG 2020-2021 7.1.3. Codificació d’assignatures Per fer més fàcil el tractament de dades es decideix donar una nomenclatura pròpia a cada assignatura, de manera que no s’hagi de treballar constantment amb els codis predeterminats. Així, durant tot el procés, les assignatures passaran a tenir els següents valors: Assignatura Codi Assignatura Codi propi Àlgebra 240011 0 Càlcul I 240012 1 Mecànica Fonamental 240013 2 Química I 240014 3 Fonaments d’Informàtica 240015 4 Geometria 240021 5 Càlcul II 240022 6 Termodinàmica Fonamental 240023 7 Química II 240024 8 Expressió Gràfica 240025 9 Informàtica 240132 10 Mecànica 240133 11 Equacions Diferencials 240131 12 Materials 240033 13 Electromagnetisme 240031 14 Mètodes Numèrics 240032 15 Taula 2. Nomenclatura establerta per a cada assignatura. Font: elaboració pròpia 2021 7.2. Localitzar els veïns El resultat del projecte es basa en analitzar el rendiment a posteriori de totes les persones que s’han trobat en la mateixa situació que l’usuari, és a dir, s’ha d’analitzar a quines assignatures s’han matriculat aquestes persones en la següent matrícula, i veure els resultats obtinguts. En funció d’aquests resultats es recomanarà una alternativa o una altra. Per tant, és imprescindible poder localitzar a aquests estudiants, que anomenarem veïns. Per ferho es voldrà crear una funció que rebi com a entrada una llista amb les assignatures que l’usuari Pàg. 22 Memòria TFG 2020-2021 ha suspès i que retorni el DataFrame de tots els estudiants que s’han trobat en la mateixa situació. La funció esmentada prèviament es farà servir en el cas on l’estudiant acabi de cursar per primera vegada el primer quadrimestre. En cas contrari, la funció ha de complir exactament el mateix objectiu, però amb la diferència que ara es rebran dues entrades: una llista amb les assignatures que l’usuari ja ha aprovat, i una altra llista amb les assignatures que l’usuari acaba de suspendre. Aquest canvi és degut a que, per donar una recomanació realista i coherent, si no es descartessin les assignatures que l’usuari ja ha aprovat, el programa possiblement faria una recomanació inútil per l’usuari ja que li recomanaria que es matriculés a assignatures que ja hauria cursat i aprovat. 7.3. Tractament de dades previ a anàlisi Amb el veïns ja localitzats, abans d’iniciar el procés d’anàlisi, caldrà tenir les dades perfectament preparades i estructurades. Amb aquest objectiu present, es voldrà crear una funció que, rebent el DataFrame dels veïns esmentat a l’anterior punt i el DataFrame qfini2019.csv amb el primer filtre aplicat, aconsegueixi els següents objectius: - Obtenir el següent quadrimestre dels veïns. - Aconseguir tota la informació rellevant sobre el següent quadrimestre dels veïns (assignatures matriculades, assignatures suspeses, assignatures aprovades, notes, etc). - Plasmar tota la informació obtinguda en un nou DataFrame. Per tant, com a resposta, aquesta funció donarà un DataFrame que servirà per poder avaluar correctament el rendiment de cada veí en el següent quadrimestre. 7.4. Rendiment dels veïns Com ja s’ha esmentat prèviament es vol que, a l’hora d’avaluar el rendiment de cada veí, es tinguin en compte el màxim número de factors per poder fer més realista l’estudi. Per això es voldrà que en aquest estudi es tingui en compte el següent: - El tant per cent de les assignatures aprovades respecte les matriculades. - La nota obtinguda en les assignatures. - La dificultat de les assignatures. - Quines assignatures s’han aprovat i quines assignatures s’han suspès. Pàg. 23 Memòria TFG 2020-2021 Tenint present que el primer punt esmentat ja vindrà incorporat en el DataFrame obtingut en l’última apartat, per incorporar els següents factors pretenc crear dues noves funcions diferents: 1. La primera funció servirà simplement per obtenir el tant per cent d’èxit de cadascuna de las assignatures. 2. La segona funció servirà per relacionar la nota obtinguda amb l’assignatura cursada, és a dir, es plantejarà un sistema de bonificacions i penalitzacions. Per tenir en compte els factors restants alhora es vol aplicar una bonificació als estudiants per assignatura aprovada. Aquesta bonificació consistirà en sumar-los la nota treta a l’assignatura multiplicada pel tant per cent d’èxit de la prpia assignatura. En cas contrari, es vol aplicar una penalització seguint el mateix procediment. 7.5. Resultat Per finalitzar tot el procediment, només queda establir com es voldrà donar la recomanació. L idea és crear una nova funció que, tenint com a entrada els resultats de l’anàlisi comentat prèviament, doni fins a 8 possibles matrícules en funció del número d’assignatures a matricular. És possible que, en els casos extrems, el programa es trobi que no té suficients dades per analitzar o que la recomanació que se li faria a l’usuari sigui inviable. En aquests casos, la resposta hauria de ser que, per aquell número d’assignatures, no es pot donar una recomanació fiable. En el cas on sí que es pugui donar, la funció hauria de retornar el bloc d’assignatures que ha obtingut millor puntuació, així com la puntuació en qüestió. Pàg. 30 Memòria TFG 2020-2021 • Bracket Pair Colorizer 2: En llenguatges com HTML, CSS i, sobretot, JavaScript, és molt important tenir present l’obertura i tancaments d’etiquetes, parèntesis, claus o claudàtors. Fent servir aquesta eina es dóna color a aquests elements per poder identificar ràpidament l’inici i el final dels diferents elements. - Debuguejar: La forma més habitual que es fa servir per trobar errors en el codi és fer imprimir valors a la consola i analitzar-los. Amb Visual Studio Code, per defecte, es té l’opció d’aplicar breack points o call stacks i, alhora, disposa d’una prpia consola. - Identificar errors: Analitza el codi per defecte, remarca en vermell aquelles parts del codi que no estan ben implementades i dóna a la consola el motiu d’aquest error. 9.3. Llibreries Per poder millorar el rendiment del codi que es crea, l’ús de llibreries és essencial. Un llibreria permet aplicar una funció en el teu cadi fent servir una única sentencia, en lloc d’haver primer de definir-la. És a dir, es tracta d’un codi extern que està preparat per aplicar funcions que facilitarà la creació del codi i també, li millorarà el rendiment. La comanda bàsica per poder fer ús d’una llibreria és import. Aquesta comanda, permet importar qualsevol llibreria en el nostre codi, de manera que ens puguem beneficiar de les funcions definides en ella. Si es volgués, també es podria importar únicament una funció d’una llibreria fent, from llibreria import function. 9.3.1. Pandas Es tracta d’una llibreria de Python que permet fer un tractament de dades molt eficaç en quant a temps d’execució, i evita al programador haver de desenvolupar línies de codi per llegir les dades mitjançant iteració. Figura 11. Llibreria Pandas. Font: https://www.adictosaltrabajo.com/2020/12/29/primerospasos-con-pandas/ Pàg. 31 Memòria TFG 2020-2021 L’objecte per defecte que es fa servir amb Pandas són els DataFrames. Això equivaldria a una taula indexada organitzada en files i columnes i que, per tant, serà imprescindible tenir un gran domini sobre aquests objectes. Els DataFrames emmagatzemen les dades de manera que el programador sempre tingui accés a elles mitjançant la crida de qualsevol de les sentencies definides en la llibreria. Tots els fitxer proporcionats que s’han descrit prèviament es llegeixen mitjançant una funció de Pandas que permet convertir diferents tipus de documents (en aquest cas .cvs) en DataFrames amb la sentència pd.read_csv (‘document.csv’). Com es pot observar, s’ha utilitzat l’expressió pd per referir-se a la llibreria Pandas. Això és degut que, com a criteri general, s’ha establert que a l’hora d’importar la llibreria s’importi amb el nom de pd. 9.3.1. Flask Flask és la llibreria de Python que ens permetrà poder connectar el lloc web amb el servidor. Es pot entendre doncs, que serà l’eina que farà d’intermediaria entre l’HTML i Python, de manera que puguem rebre la informació de l’usuari, tractar-la amb els fitxer elaborats i, posteriorment, plasmar els resultats al lloc web. Flask, es caracteritza per necessitar un tipus d’organització i estructura especial pel que fa als directoris. Tot ha d’estar contingut dins d’una carpeta que anomenarem carpeta mare (senyalada amb vermell a la Figura 3): Figura 13. Carpeta mare. Font: elaboració pròpia 2021 Dins d’aquesta carpeta mare (llocweb), es destaquen: - Carpeta app: En aquesta carpeta es troben tots els continguts que conformen la pàgina web. Des de els scripts de Python fins a les imatges que s’han de cargar al codi CSS. - Fitxer run.py: Executant aquest script en el terminal o Command Window, és la manera Figura 12. Llibreria Flask. Font: https://pythondiario.com/2018/08/construccion-de-una-apide-prediccion.html Pàg. 32 Memòria TFG 2020-2021 de poder accedir al lloc web i, alhora, a totes les funcions que es troben dins dels scripts a la carpeta app. En la carpeta app, s’hauran de distribuir tots els arxius en subcarpetes depenent de la seva funcionalitat: Figura 14. Distribució de la carpeta app. Font: elaboració pròpia 2021 - Carpeta scripts: En aquesta carpeta s’ubicaran tots els scripts creats amb Python que són necessaris per dur a terme l’estudi. En el nostre cas hi trobarem dos: Figura 15. Carpeta scripts. Font: elaboració pròpia 2021 - Carpeta statics: En aquest directori es posaran totes les imatges, documents, etc, que es facin servir en algun dels fitxers Python o HTML. Figura 16. Carpeta static. Font: elaboració pròpia 2021 Pàg. 33 Memòria TFG 2020-2021 - Carpeta templates: És on s’ubicaran tots els fitxers relacionats amb la pàgina web. Tant el codi CSS com el JavaScript, es troben dins del document HTML. Figura 17. Carpeta templates. Font: elaboració pròpia 2021 - Fitxer __init__.py : Fitxer que es executat pel run.py. Té com a objectius la importació del fitxer views.py i iniciar l’execució del lloc web. - Fitxer views.py: És el fitxer on es rebrà tota la informació de la web i, per tant, és on s’executaran les funcions dels scripts creats. Les respostes obtingudes, es podran enviar als fitxers HTML per a que es pugin tractar i ensenyar-se de la forma desitjada. A més, des d’aquest fitxer es definirà la manera de navegar entre les pàgines de la web. Pàg. 34 Memòria TFG 2020-2021 10. IMPLEMENTACIÓ L’objectiu d’aquest apartat és explicar com s’han cobert totes les necessitats explicades en l’apartat 8 a partir de funcions creades amb Python. Tot i que els fitxers de codi es troben adjuntats, és important explicar com s’han definit cadascuna de les funcions ja que, a vegades, entendre el codi escrit per una altra persona pot ser complicat. A més, també s’explicarà com s’ha desenvolupat el lloc web. 10.1. Funcions creades amb Python Com ja s’ha explicat, Python és l’eina fonamental que s’ha fet servir per dur a terme tot l’estudi. En aquest subapartat s’analitzaran els diferents fitxers que s’han creat i les funcions que contenen. 10.1.1 Fitxers filtreQ1.py i filtreQ2.py Aquests fitxers contenen les funcions necessàries per aconseguir els documents .csv (en el cas de filtreQ1.py retornarà cinc documents .csv, i en el cas de filtreQ2.py en retornarà set) que serviran per ubicar a tots els estudiants que s’han trobat en la mateixa situació que l’usuari. Aquests documents, posteriorment, els llegirà el fitxer principal de Python per iniciar el tractament de les dades. Per tant, no es trobaran dins de la carpeta Scripts ja que únicament els necessitem executar un cop per aconseguir els documents. Dins de cadascun d’aquests fitxers es troben dues funcions. 10.1.1.1. Funcions filtrar_Q1 ( ) i filtrar_Q2 ( ) Aquestes funcions són les encarregades de llegir el document qfini2019filtrat.csv fent servir la comanda pd.read_csv(nom_document.csv ) 5 i, d’aplicar-hi dos filtres: - En el cas de filtrar_Q1 ( ), filtra el DataFrame per la columna que representa el número del quadrimestre i per la columna que fa referència als codis d’assignatura. Es quedarà, doncs, amb totes aquelles entrades que tinguin com a valor el quadrimestre 1 i que contingui alguna de les assignatures cursades en el primer quadrimestre. - Pel que fa a filtrar_Q2 ( ), únicament filtrarà el quadrimestre ja que, els alumnes, en el segon quadrimestre, poden haver cursat el total d’assignatures que es troben a la fase inicial. Per tant, simplement es descartaran totes aquelles entrades que tinguin com a valor 1 en la columna de quadrimestre. 5 Converteix els documents .csv en un Dataframe. Pàg. 35 Memòria TFG 2020-2021 10.1.1.2. Funcions creafitxersQ2 ( ) i crearfitxersQ1 ( ) Aquestes funcions cridaran a les anteriors per poder treballar amb el DataFrame, obtingut prèviament. Té dos principals objectius: realitzar el canvi de nomenclatura, per als codis d’assignatura; i crear i omplir nous DataFrames que contindran als alumnes en funció del numero d’assignatures que hagin suspès. El funcionament és exactament igual per a les dues funcions i, per tant, s’explicarà únicament de crearfitxersQ2. Primerament, iterant el DataFrame es crearà un diccionari que tindrà com a clau el ‘CODEX’ de l’estudiant i, com a valors, les diferents assignatures que l’estudiant hagi suspès. En la Figura 3 es pot veure un fragment del diccionari esmentat. Un cop creat aquest diccionari, es crearan cinc nous DataFrames buits, on, cadascun d’ells, farà referencia als estudiants que hagin suspès una, dues, tres, quatre o cinc assignatures, respectivament. Tots tindran en la primera columna el ‘CODEX’ de l’estudiant i després, tantes columnes depenent del DataFrame que es tracti, Per omplir-los, es recorrerà el diccionari creat i, tenint en compte la llargada de cada un dels valors d’aquest (la llargada ens indicarà el número d’assignatures que ha suspès un estudiant), s’aniran afegint entrades fent servir l’atribut df.at[index, columna] 6 al DataFrame corresponent. Figura 19. Entrades del document d'estudiants amb tres assignatures suspeses. Font: elaboració pròpia 2021 Un cop ja s’hagin omplert tots, fent servir la comanda df.to_csv(‘nom del fitxer.csv’) 7 es crearan a la carpeta de treball els cinc documents esmentants. A la Figura 4 es pot veure la informació que 6 Accedir a un valor d’una fila indicant l’índex i la columna on es troba. 7 És la comanda inversa a pd.read_csv(), converteix el DataFrame df en un document .csv amb el nom del fitxer que s’imposi. Figura 18. Diccionari amb els CODEX i assignatures suspeses. Font: elaboració pròpia 2021 Pàg. 36 Memòria TFG 2020-2021 es trobaria en el document dels estudiants que han suspès tres assignatures. Per últim, destacar que per la funció crearfitxersq2 (), enlloc de cinc fitxers se’n crearan set ja que, en el segon quadrimestre, els alumnes poden cursar més de cinc assignatures i, per tant, també en poden suspendre més. 10.1.2. Fitxer programaQ1.py En aquest fitxer és on es troben totes les funcions que duen a terme l’estudi per als usuaris que acabin de cursar per primer cop el primer quadrimestre. 10.1.2.1. Funció veins(l) El primer que s’ha de fer és trobar els veïns més prxims de l’usuari, és a dir, els alumnes que hagin suspès exactament les mateixes assignatures que ell. Per fer-ho, es necessari conèixer les assignatures que ha suspès l’usuari i per tant, com a paràmetre d’entrada, requerirà una llista amb les matèries suspeses (introduïdes mitjançant el lloc web). En funció de la llargada d’aquesta llista i, per tant, de les assignatures suspeses, és llegirà un dels documents .csv creats amb la funció crearfitxersq1 ( ). Per assegurar-nos que només apareixeran les matèries suspeses, s’imposarà que només apareguin les entrades que continguin els mateixos codis d’assignatura que els de la llista d’entrada. Així doncs, com es pot apreciar a la Figura 5, aquesta funció retornarà un DataFrame que contingui tots els veïns de l’usuari. 10.1.2.2. Funció analitza_veins ( l ) Es tracta, segurament, de la funció més important de l’estudi, ja que aconseguirem obtenir un DataFrame que reculli tota la informació necessària per poder, finalment, escollir la millor combinació d’assignatures. El següent pas, és analitzar què és el que han fet els veïns en el següent quadrimestre. Per tant, s’hauran de creuar el DataFrame que conté tota la informació dels estudiants que han cursat la fase Figura 20. Veïns de l'usuari que ha suspès Càlcul I, Mecànica Fonamental i Fonaments d'Informàtica. Font: elaboració pròpia 2021 Pàg. 37 Memòria TFG 2020-2021 inicial (del qual només ens quedarem amb les dades que representin assignatures cursades en el segon quadrimestre), amb el que conté tots els veïns de l’estudiant. Cal tenir molt present que només ens interessa el quadrimestre cursat immediatament després d’haver finalitzat per primer cop el primer quadrimestre. Per aix s’hauran d’eliminar totes les entrades que facin referencia a altres anys, és a dir, si un alumne cursa per primer cop el Q1 en el curs 2014 (en les dades el curs escolar 2014-2015 es reflecteix com a 2014), les entrades que eliminarem seran totes aquelles que representin assignatures cursades en el quadrimestre de primavera de qualsevol altre curs. Tenint en compte que, per eliminar aquestes entrades, s’haurà d’iterar el DataFrame creuat (dfq2), amb l’objectiu de millorar el temps d’execució del programa, s’aprofitarà la iteració per crear una llista de llistes que contingui els valors de les columnes ‘CODEX’, ‘CURS’, ‘CODASS’, ‘APR’ i ‘NF’. Amb aquesta llista es crearan cinc diccionaris on tots tindran el ‘CODEX’ com a clau i es diferenciaran segons el valor de cada diccionari. Per tant, aconseguirem tenir, per a cada alumne: - Una llista de les assignatures matriculades. - Una llista de les assignatures aprovades. - Una llista de les assignatures suspeses. - Una llista de les notes de les assignatures aprovades. - Una llista de les notes de les assignatures suspeses. Totes aquestes dades recollides i organitzades, són la base del DataFrame que crearem (recompte) per dur a terme l’anàlisi final. Ja que, gràcies a com ha estat ordenat el DataFrame que s’ha iterat (dfq2) (primer pel codi de l’estudiant, després pel curs i per últim, per si s’ha aprovat o no), tots els diccionaris estan organitzats de la mateixa manera i, els codis dels estudiants, apareixen en el mateix ordre. Això facilita molt la feina ja que, simplement, cal afegir al DataFrame recompte els valors dels diccionaris com a columnes. Per un usuari que hagi suspès Càlcul I (1), Mecànica Fonamental (2) i Fonaments d'Informàtica (4), s’obté: Figura 21. DataFrame "recomana" per un estudiant que ha suspès Càlcul I, Mecànica Fonamental i Fonaments d'Informàtica. Pàg. 38 Memòria TFG 2020-2021 Font: elaboració pròpia 2021 Tot i ja tenir molta informació útil, encara falta afegir dues columnes més, el tant per cent d’assignatures aprovades respecte les matriculades, i la mitjana ponderada. Pel que fa al tant per cent esmentat, simplement cal afegir una nova columna on es faci la divisió del número d’assignatures aprovades entre el número d’assignatures matriculades. Per trobar la mitjana ponderada, es recorrerà el diccionari creat que tenia com a valors les assignatures matriculades i, a cada iteració, calcularem dos valors: el sumatori de la nota obtinguda a cada assignatura multiplicat pels respectius crèdit de l’assignatura i la suma total de crèdits matriculats. Totes aquestes dades les obtindrem del DataFrame dfq2, ja que és on podrem trobar alhora els crèdits de las assignatures i la nota obtinguda per l’alumne. Fent servir la comanda recomana.at[índex, ‘nom de la columna’] podrem assignar la mitjana ponderada per a cada alumne. Finalment, aquesta funció retornarà un DataFrame com el següent: Figura 22. DataFrame "recomana" per un estudiant que ha suspès Càlcul I, Mecànica Fonamental i Fonaments d'Informàtica. Font: elaboració pròpia 2021 10.1.2.3. Funció exit ( ) Prèviament, en l’apartat 7.4, s’ha introduït el concepte de les bonificacions i penalitzacions que es vol aplicar. Per poder realitzar-ho, és necessari conèixer el tant per cent d’èxit de cadascuna de les assignatures que es cursen a la fase inicial. Aquesta funció ens permetrà trobar-los. Per aconseguir-ho, s’han creat dos DataFrames a partir del document qfini2019filtrat.csv: en el primer, s’imposarà que apareguin només totes les assignatures que s’hagin aprovat; en el segon, totes les que s’hagin suspès. A partir de la comanda df.columna.value_counts() 8 s’obté el número de vegades que apareixen els elements que es troben en la columna indicada, per tant, ens servirà 8 Permet comptar el número de cops que apareix un valor en una columna del DataFrame. Pàg. 39 Memòria TFG 2020-2021 per identificar el número de cops que s’ha aprovat una assignatura i els cops que s’ha suspès. En un nou DataFrame (num2), afegirem tres columnes: - En la primera, posarem el número de cops que s’ha aprovat cada assignatura. - En la segona, posarem el número de cops que s’han suspès cada assignatura - En la tercera, posarem el resultat de la divisió entre la primera columna i la suma de les dues Figura 23. DataFrame amb el número d'aprovats i suspesos per assignatura i, el tant per cent d'èxit de l'assignatura. Font: elaboració pròpia 2021 Com es pot observar a la Figura 8, els diferents indexes del DataFrame són els codis de les assignatures. Per facilitar el tractament posterior de les dades, la funció retornarà una llista amb els indexes del DataFrame (d’on s’identifiquen les assignatures) i una llista de la columna exit (on es guarden els tant per cents d’èxit). 10.1.2.4. Funció addicio ( l ) En aquesta funció, donada una llista amb les assignatures suspeses de l’usuari, s’implementaran les esmentades bonificacions i penalitzacions als veïns. Internament, aquesta funció crida a les funcions analitza_estudiants ( l ) (per aconseguir el DataFrame amb tota la informació dels veïns) i exit () (per conèixer el tant per cent d’èxit de les assignatures). Degut a que ens interessa premiar les notes en els assignatures més complicades (aquelles que tinguin un percentatge de suspesos més elevat), es sumarà a la columna PERC la nota obtinguda a l’assignatura per el tant per cent de suspesos d’aquesta (és a dir 1 menys el tant per cent d’èxit obtingut). Pàg. 46 Memòria TFG 2020-2021 Figura 25. Formulari de Q1 que ha d’omplir l’alumne. Font: Elaboració pròpia, 2021 Quan l’alumne hagi seleccionat les assignatures que ha suspès i premi el botó Envia, se’l redirigirà immediatament a la pàgina on rebrà la resposta. Figura 26. Formulari de Q1 omplert per l'alumne. Font: elaboració pròpia 2021 10.2.1.2. Formulari de Q1 i/o Q2 Per als estudiants que, com a mínim, acaben de cursar el seu segon quadrimestre del grau, serà necessari que ens diguin quines són les assignatures que ja han aprovat i les que acaben de suspendre. Per tant, tot i estar tot configurat en el mateix formulari, s’ha organitzat de manera que Pàg. 47 Memòria TFG 2020-2021 hi hagi dues etapes: en la primera es seleccionaran les assignatures ja aprovades; i en la segona les ja suspeses. Per tal que se n’entengui el funcionament, es replicarà el que hauria de fer un alumne que ja té aprovades Àlgebra Lineal, Fonaments d’Informàtica, Química I, Càlcul I, Mecànica Fonamental i Química II (Figura 17) però que, en l’últim quadrimestre, ha cursat i suspès Expressió gràfica, Termodinàmica Fonamental i Geometria (Figura 18). Figura 27. Exemplificació de la selecció d'assignatures ja aprovades. Font: elaboració pròpia 2021 Figura 28. Exemplificació de la selecció d'assignatures suspeses. Font: elaboració pròpia 2021 Si comparem les Figures 17 i 18 podem identificar que, al prémer el botó Següent, les assignatures Pàg. 48 Memòria TFG 2020-2021 marcades (les que ja han estat aprovades) desapareixen i canvia el text que descriu l’acció que ha de fer l’usuari, donant lloc a la selecció de les assignatures suspeses. A part del botó Envia, a la Figura 18 també veiem el botó Enrere. Si el preméssim, es tornaria enrere en el formulari de manera que les assignatures eliminades tornarien a aparèixer i ens trobaríem en la mateixa situació que en la de la Figura 17 (sense cap opció seleccionada). Altra vegada, al prémer Envia, es redirigeix directament a la pàgina on es trobarà la recomanació. 10.2.2. Pàgina amb la recomanació Degut que es plantegen dues situacions diferents, existiran dues pàgines que contindran la resposta. Ara bé, aquestes pàgines estan configurades de la mateixa manera, pel que es tractaran com una sola. Quan s’hagi enviat el respectiu formulari (explicat en els dos últims apartats) es mostraran les millors opcions de matrícules en funció del número d’assignatures que continguin. Primer es mostraran, altra vegada, un seguit d’inputs (de tipus checkbox) per a que l’usuari pugui seleccionar, en funció del número d’assignatures, la matrícula que li sigui més atractiva. Ja seleccionat un dels checkbox, es mostrarà la recomanació pertinent. Cal destacar que, en els casos extrems (matricula amb 3 assignatures i matricula amb 8 assignatures), és habitual que no s’hagi pogut obtenir una recomanació. En aquests casos, s’ha configurat de manera que, a l’iniciar la pàgina, s’amaguin les opcions que no continguin cap recomanació, abans d’ensenyar res. En el cas d’un estudiant que hagi suspès Àlgebra Lineal i Fonaments d’Informàtica, la primera vegada que cursava el Q1, s’obtindran les següents opcions de recomanació: Pàg. 49 Memòria TFG 2020-2021 Figura 29. Recomanació d'un estudiant que ha cursat per primer cop Q1 i ha suspès Àlgebra Lineal i Fonaments d'Informàtica. Font: elaboració pròpia 2021 Es pot observar que tot i ensenyar les diferents opcions existents (en quant a número d’assignatures a matricular), es remarca quina d’elles és la que ha obtingut els millors resultats. Si volem, per exemple, veure la recomanació que dona el programa amb una matrícula de cinc assignatures, que és en aquest cas la que ha obtingut una puntuació més alta, hauríem de prémer 5 assignatures: Figura 30. Recomanació d'una matricula de cinc assignatures per l'estudiant del cas anterior. Font: elaboració pròpia 2021 Per fer encara més evident el bloc d’assignatures que ofereix la millor puntuació, es mostraran les assignatures amb un verd. Les altres, mantindran el fons blau que s’ha fet servir fins ara. Pàg. 50 Memòria TFG 2020-2021 Figura 31. Exemple de la visualització d'un conjunt d'assignatures que no ha obtingut la puntuació màxima. Font: elaboració pròpia 2021 Per últim, s’ha tingut en compte un tercer escenari, on amb les dades proporcionades per l’estudiant no es pugui arribar a proporcionar cap recomanació. És doncs quan es mostrarà la següent pàgina: Figura 32. Pàgina que apareix quan no existeix cap recomanació. Font: elaboració pròpia 2021 10.2.3. Aplicació de l’HTML Com ja s’ha explicat a l’apartat 9.1.2, l’HTML ens servirà per crear l’estructura i, introduir els elements que es visualitzin a la pàgina web mitjançant etiquetes. Principalment, s’han usat les següents: Pàg. 51 Memòria TFG 2020-2021 - Formularis (<form></form>): Part fonamental del funcionament del lloc web, ja que és l’etiqueta que ens permet enviar la informació de l’usuari al sistema. Tot i així, també s’han fet servir per contenir els inputs de tipus checkbox que ens permeten ensenyar o amagar contingut. Així doncs, s’han implementat fins a cinc formularis diferents. Tres en la pàgina principal: • Formulari per navegar entre Q1 i Q1 i/o altres. • Formulari per recopilar la informació de Q1. • Formulari per recopilar la informació de Q1 i/o altres. I un a cadascuna de les pàgines de resposta: • Formulari per navegar entre les diferents opcions de matricules proposades. - Div (<div></div>): Aquesta etiqueta és, segurament, una de les més utilitzades, ja que permet agrupar tot tipus de contingut (altres etiquetes) en caixes que, posteriorment i amb CSS podràs ubicar i estilitzar com millor et convingui. Per tant, ens ha estat molt útil per exemple, per agrupar dins de cada formulari els elements input i label (conjuntament formen les opcions seleccionables que s’han ensenyat als apartats previs). - Estrucutura Checkboxes i labels(<input type = “checkbox”></input> + <label></label>): És l’element que permet aportar tot el dinamisme i atractiu a la pàgina web. Ens ha estat molt útil ja que, definint un valor a cadascuna de les etiquetes input, ens ha permès tant seleccionar la informació que és vol transmetre al servidor (el valor d’un checkbox és el contingut que s’envia). També ens ha permès identificar els checkboxs marcats amb JavaScript. 10.2.4. Aplicació del CSS En les figures adjuntades anteriorment, es pot observar com clarament s’ha aplicat el mateix estil en la major part del elements que apareixen en cadascuna de las pàgines de la web. Parlo de l’estil dels checkboxs. Vaig voler implementar un estil diferent als que vénen per defecte i després de buscar possibles exemples, vaig acabar trobant el que més creia que encaixaria dins la pàgina web. La principal característica dels checkboxs és que es defineix un estil per tres dels seus estats: quan està desmarcat, quan el ratolí passa per sobre i quan es marca. Pàg. 52 Memòria TFG 2020-2021 Quan es troben desmarcats, sembla que siguin com qualsevol altre input amb un nom i amb una caixa (forma de circumferència o quadrada) que identifica si es troba marcat o desmarcat (en aquest cas desmarcat). Si es passa el ratolí per sobre fent us de l’atribut .classe:hover{} s’aconsegueix crear un nou estat en el que el color de fons passa de ser blanc a ser un blau clar i, ja es pot identificar clarament el tamany de l’input i les cantonades arrodonides. En el moment en el que es prem, es passa a un nou estat on s’ha fet desaparèixer la figura, s’ha canviat el color de la lletra (de blanc a blau) i, per remarcar l’opció que es tria, es canvia el color de fons a un blau més fosc i intens i es centra el text dins del checkbox. Degut a que s’ha eliminat la figura, el tamany del checkbox ha disminuït però com que es troben continguts en un caixa (div) a la que si li ha aplicat un display: flex, quan es trobin orientats horitzontalment, els altres checkboxs ocuparan l’espai que ha quedat lliure. 10.2.5 Aplicació del JavaScript Ens ha permès aplicar tot el moviment existent en la pàgina web, des d’amagar contingut fins a fer variar la classe CSS d’un element. Aquestes són algunes de les funcions que s’ha aconseguit aplicar gracies a JavaScript: - Amagar i ensenyar contingut: És, possiblement, l’acció més recorrent que es troba dins el lloc web. A partir de determinar quan es fa clic sobre un input ($(“#id”).click(function(){}), i, generalment, aplicant una estructura de condicionals, es pot determinar fàcilment què és el que es vol ensenyar amb la comanda $(“#id”).show() i, què es vol amagar amb Figura 33. Boto desmarcat. Font:elaboració pròpia 2021 Figura 34. Checkbox amb el ratolí a sobre. Font: elaboració pròpia 2021 Figura 35. Chceckbox seleccionat Figura 36. Q1 i/o Q2. Font: elaboració pròpia 2021 Figura 37. Q1 marcada. Font: elaboració pròpia 2021 Pàg. 53 Memòria TFG 2020-2021 $(“#id”).hide(). A més, dins del parèntesis es pot introduir un número que indicarà la rapidesa o la lentitud amb la que es durà a terme l’acció. - Canviar el codi CSS: Ha estat útil poder modificar, a traves de JavaScript, els estils aplicats a certs elements, en funció de l’activitat de l’usuari. Aquesta tasca es duu a terme principalment gràcies a tres comandes: $(“#Id” o “.Class”).css(“property”, “value”) i (“Id” o “.Class”).style.property = “value” permeten modificar el valor d’una propietat, en concret de l’estil d’un element; i $(“.Class”).toggleClass(“.Nova_Clase”) canvia directament la classe d’un element de manera que s’apliquin uns estils definits prèviament en l’apartat del codi CSS. - Obtenir elements de l’HTML: És habitual requerir d’un element en concret. Per exemple, hem requerit, a l’hora d’implementar l’estructura de condicionals, conèixer els valors dels checkboxs. Hi ha diverses maneres d’accedir a un element HTML, en aquest treball s’han usat principalment dos: document.getElementById(“Id”) i document.getElementByClassName(“Clase”). Combinant aquestes comandes amb d’altres, es pot aconseguir fer gairebé qualsevol cosa que es necessiti: accedir als ChildNodes 10 , modificar el valor, substituir tota l’estructura del codi de l’element, etc. - Fer iteracions: Ens ha estat molt útil poder iterar tant la informació que es rep des del servidor com llistes que contenen identificadors de diversos blocs. Amb JavaScript, una de las formes d’iterar (i la feta servir en aquest treball) és fent ús de la següent expressió: $.each(variable a iterar, function(ind, elem){}. S’han fet servir iteracions, per exemple, per poder ensenyar només els blocs d’assignatures que no estiguessin buits. - Estructura de condicionals: En Python i en la majoria de llenguatges, aquest tipus d’estructures són molt recurrents, ja que ens permet filtrar la informació en diferents categories. En JavaScript, el format per fer-ho és molt semblant i l’expressió que engloba a tots els possibles condicionals és la següent: 10 Elements HTML que són fills, és a dir, que es troben dins d’un altre element Pàg. 54 Memòria TFG 2020-2021 Figura 38. Estructura del condicionals. Font: elaboració pròpia 2021 El terme &&, imposa que s’hagin de complir totes les condicions imposades per poder accedir a fer les accions que es troben dins del condicional. I el terme ||, indica que s’ha de complir alguna de les condicions escrites per a que es realitzin les accions definides. Normalment, existeixen tres tipus de condicions: aquelles que imposen igualtat (== o ===), les que imposen desigualtat (!= o !==) i les que comparen la magnitud dels valors (<, >, <=, >=). - Executar una funció abans de mostrar el contingut de la pàgina: Per eliminar les opcions de matrícules que no continguessin informació, s’ha aplicat una iteració i una estructura de condicionals, sobre una llista creada amb dades proporcionades per Flask (es fa referència a aquestes dades posant: ‘{{variable}}’) dins de la comanda $(document).ready(function(){}). Aquesta comanda, executa tot el que es troba dins d’ella abans d’ensenyar qualsevol altre element del document HTML. Pàg. 55 Memòria TFG 2020-2021 11. COSTOS, PLANIFICACIÓ I IMPACTE AMBIENTAL 11.1. Costos Els costos que s’han hagut de tenir en consideració en quant a instruments o maquinària són molt reduïts ja que, per poder dur a terme aquest treball, només ha estat necessari utilitzar un ordinador i tot el programari utilitzat ha estat gratuït. Ara bé, també s’han de tenir en compte les hores invertides en el projecte, el preu que s’ha d’abonar a la universitat per poder realitzar el Treball de Fi de Grau i, per últim, uns cursos prèviament realitzats, a través de la plataforma Domestika, enfocats a aprofundir el coneixement necessari per desenvolupar una pàgina web. En la següent taula: ANÀLISI COSTOS TFG PC amortitzat 56,60 € PVP ordinador 848,99 € Vida mitjana 5 anys 60 mesos Temps usat pel treball 4 mesos Preu mà d'obra 4.008 € Hores invertides 300h Preu/hora mig (eng.indus ESP) 13,36€/h Preu matriculació TFG 332,04 € Preu per crèdit ECTS 27,67€/ECTS Número de crèdits TFG 12 ECTS Cursos Domestika 40 € 4 cursos en total 10€/curs COST TOTAL DEL PROJECTE 4.436,64 € Taula 3. Càlcul dels diferents costos tinguts en compte. Font: elaboració pròpia 2021 En el cas que es plantegés l’opció de portar al mercat aquest projecte, es podria comercialitzar de dues maneres: venent el projecte en si, o bé cedint-ne l’ús a canvi d’un pagament mensual o anual. En el cas de vendre’l, s’han plantejat dos possibles escenaris que varien segons el marge de ventes fixat: aquest marge serà del 30% o del 35% respectivament. D’aquesta manera ens podrem protegir i prevenir sobre possibles despeses imprevistes o difícils de quantificar. Realitzant els càlculs pertinents, s’arriba a dos possibles preus de venta: Pàg. 62 Memòria TFG 2020-2021 [29] MONTERO JAVIER., 2012. Python: Agregar y eliminar elementos de un diccionario | El Club del Autodidacta. A: [en línia]. Disponible a: http://elclubdelautodidacta.es/wp/2012/08/python-agregar-y-eliminar-elementos-de-undiccionario/. [30] MOULANA, A., 2019. JavaScript : What happens with the browser ? - DEV Community. A: [en línia]. Disponible a: https://dev.to/azkar_moulana/javascript-what-happens-withthe-browser-3cdn. [31] MP1990., 2014. html - An invalid form control with name=’’ is not focusable - Stack Overflow. A: [en línia]. Disponible a: https://stackoverflow.com/questions/22148080/aninvalid-form-control-with-name-is-not-focusable. [32] OCHO, B.D., 2020. Cómo instalar Visual Studio Code en Linux - ochobitshacenunbyte. A: [en línia]. Disponible a: https://www.ochobitshacenunbyte.com/2020/05/21/comoinstalar-visual-studio-code-en-linux/. [33] OPEN JS WORLD.Download jQuery | jQuery. A: [en línia]. Disponible a: https://jquery.com/download/#downloading-jquery. [34] PANDAS.DataFrame — pandas 1.2.4 documentation. A: [en línia]. Disponible a: https://pandas.pydata.org/pandas-docs/stable/reference/frame.html. [35] RIVAS, M., 2012. Efectos de la Globalización en las economías de escala. by Michelle Rivas. A: [en línia]. Disponible a: https://prezi.com/dl9urnxk504e/efectos-de-laglobalizacion-en-las-economias-de-escala/. [36] ROBERTS, C.Roboto - Google Fonts. A: [en línia]. Disponible a: https://fonts.google.com/specimen/Roboto. [37] ROLANDOCALDAS.CSS3 básico parte 1 - PHP paso a paso - rolandocaldas.com. A: [en línia]. Disponible a: https://rolandocaldas.com/php/css3-basico-1-php-paso-a-paso. [38] SALCEDO, L.Construcción de una API de predicción con Flask, Inteligencia Artificial y Python - Mi Diario Python. A: [en línia]. Disponible a: https://pythondiario.com/2018/08/construccion-de-una-api-de-prediccion.html. Pàg. 63 Memòria TFG 2020-2021 [39] SOFT CATALÀ CORRECTOR.Corrector ortogràfic i gramatical català | Corrector valencià. A: [en línia]. Disponible a: https://www.softcatala.org/corrector/. [40] TEOREMA.JavaScript, HTML and CSS Web Development (workshop) - Teorema. A: [en línia]. Disponible a: https://teorema-rd.com/producto/workshop-javascript-html-andcss-web-development. [41] TUTORIALFOR., 2020. python - pandas cannot be imported. A: [en línia]. Disponible a: https://www.tutorialfor.com/questions-311017.htm. [42] UDDIN, N., 2020. Social Network for Programmers and Developers. A: [en línia]. Disponible a: https://morioh.com/p/3b2d2eeb23f3. [43] UNIPYTHON., 2018. Solicitudes HTTP en Python con Requests - ▷ Cursos de Programación de 0 a Experto © Garantizados. A: [en línia]. Disponible a: https://unipython.com/solicitudes-http-en-python-con-requests/. [44] URIBE GOMEZ, G., 2018. html - Cambiar value de un input con jQuery o Javascript - Stack Overflow en español. A: [en línia]. Disponible a: https://es.stackoverflow.com/questions/153476/cambiar-value-de-un-input-con-jquery-ojavascript. [45] W3SCHOOLS.W3Schools Online Web Tutorials. A: [en línia]. Disponible a: https://www.w3schools.com/default.asp. [46] WIKIPEDIA.Proyecto Jupyter - Wikipedia, la enciclopedia libre. A: [en línia]. Disponible a: https://es.wikipedia.org/wiki/Proyecto_Jupyter. [47] WIKIPEDIA.Globalització - Viquipèdia, l’enciclopèdia lliure. A: [en línia]. Disponible a: https://ca.wikipedia.org/wiki/Globalització.