Sistema colaborativo para el etiquetado de datos

Sis ema colabo a i o pa a el e ique ado de da os Collabo a i e sys em o da a labeling T abajo de in de g ado G ado en ingenie ía in o má ica Facul ad de in o má ica Cu so 2021/2022 Au o es: Gemma González Palacios (G ado en Ingenie ía in o má ica) Ad ián Sal ado C espo (G ado en Ingenie ía in o má ica) Di ec o es: En ique Ma ín Ma ín Ad ián Riesco Rod íguez 2 Resumen Ac ualmen e, al u iliza écnicas de ap endizaje au omá ico es necesa io pasa po una e apa de e ique ado manual de da os pa a en ena al so wa e. Es e p oceso de e ique- ado puede esul a muy edioso y ocupa una g an can idad de iempo po que en mu- chas ocasiones debe ealiza se de mane a manual. Es e p oyec o consis e en implemen a un sis ema colabo a i o pa a e ique a da os de o ma más e icien e y iable. La es a egia que hemos decidido pa a desa olla es e sis- ema es implemen a un se icio de CAPTCHA. Es e ipo de se icios suele unciona p esen ando un e o que no malmen e consis e en selecciona los elemen os den o de un conjun o de da os que cumplen una condición de e minada, po lo que las espues as que en ían los usua ios que ealizan es os e os pueden se i pa a clasi ica esos ele- men os que han seleccionado. Sin da se cuen a, los usua ios a los que el e o haya e i- icado como eales, es án ealizando un p oceso de e ique ado de da os. Palab as cla e E ique ado de da os, CAPTCHA, Py hon, Ja aSc ip , Boo s ap, Django. Sis ema colabo a i o pa a el e ique ado de da os 3 Abs ac Cu en ly, when using machine lea ning echniques, i is necessa y o go h ough a s age o manual da a labeling o ain he so wa e. This da a labeling p ocess can be e y edious and ake a lo o ime because o en i is done manually. This p ojec consis s o implemen ing a collabo a i e sys em o label da a mo e e i- cien ly and eliably. The s a egy we ha e decided o de elop his sys em is o imple- men a CAPTCHA se ice. This ype o se ice usually wo ks by p esen ing a challenge ha gene ally consis s o selec ing he elemen s wi hin a se o da a ha mee a ce ain condi ion, so he answe s sen by use s who pe o m hese challenges can be used o classi y hose elemen s hey ha e selec ed. Wi hou being awa e, use s who ha e been e i ied as eal by he challenge a e pe o ming a da a labeling p ocess. Key wo ds Da a labeling, CAPTCHA, Py hon, Ja aSc ip , Boo s ap, Django. 4 Índice de con enidos 1 In oducción ............................................................................................................. 6 1.1 Mo i ación ......................................................................................................... 6 1.2 Obje i os ............................................................................................................ 6 1.3 Plan de abajo .................................................................................................. 7 1.4 Licencia y código ................................................................................................ 8 2 In oduc ion ............................................................................................................. 9 2.1 Mo i a ion ......................................................................................................... 9 2.2 Objec i es .......................................................................................................... 9 2.3 Wo kplan ......................................................................................................... 10 2.4 License and code ............................................................................................. 10 3 P elimina es ........................................................................................................... 11 3.1 CAPTCHA .......................................................................................................... 11 3.2 Bene icios adicionales que se han ob enido de los CAPTCHA ......................... 12 3.3 Análisis de o os se icios de CAPTCHA ........................................................... 13 3.3.1 ReCap cha ................................................................................................ 13 3.3.2 hCap cha .................................................................................................. 14 3.4 Tecnologías u ilizadas en el p oyec o .............................................................. 15 3.4.1 Tecnologías básicas .................................................................................. 16 3.4.2 Lenguajes de p og amación ..................................................................... 19 3.4.3 Tecnologías pa a el Backend .................................................................... 20 3.4.4 Tecnologías del F on end ......................................................................... 21 3.4.5 He amien as pa a la ges ión del p oyec o .............................................. 23 4 A qui ec u a del p oyec o ...................................................................................... 25 4.1 Visión global del diseño del p oyec o .............................................................. 25 4.2 Vis a de adminis ado .................................................................................... 27 4.3 Vis a del clien e ............................................................................................... 28 5 Backend .................................................................................................................. 30 5.1 Modelos (Base de da os) ................................................................................. 30 5.2 In e az pa a las pe iciones del componen e del e o ..................................... 33 5.3 In e az pa a las pe iciones de las is as del clien e ........................................ 34 6 F on end ................................................................................................................. 37 Sis ema colabo a i o pa a el e ique ado de da os 5 6.1 Inicio del e o ................................................................................................... 37 6.2 Almacenamien o de espues as ...................................................................... 38 6.3 En ío de espues as ......................................................................................... 39 6.4 Recepción del e edic o .................................................................................. 39 6.5 Vis a de usua io ............................................................................................... 40 7 Conclusiones .......................................................................................................... 42 7.1 Ap endizaje y obje i os cumplidos .................................................................. 42 7.2 T abajo u u o .................................................................................................. 43 8 Conclusions ............................................................................................................ 44 8.1 Lea ning and objec i es me ............................................................................ 44 8.2 Fu u e wo k ..................................................................................................... 45 9 Con ibuciones pe sonales ..................................................................................... 46 9.1 Gemma González Palacios ............................................................................... 46 9.2 Ad ián Sal ado C espo ................................................................................... 48 10 Bibliog a ía ............................................................................................................. 51 6 1 In oducción En es a sección explica emos la mo i ación que nos ha lle ado a ealiza es e p oyec o, los obje i os que nos p oponemos alcanza y la plani icación pa a el desa ollo del p o- yec o. 1.1 Mo i ación En la ac ualidad el uso de aplicaciones que se apoyan en in eligencia a i icial es á muy ex endido, desde p og amas que se emplean pa a econocimien o acial, has a he a- mien as de dibujo que ayudan a comple a un diseño desde un boce o o una desc ip- ción. Pe o pa a que es as aplicaciones uncionen co ec amen e necesi an in o mación p epa ada pa a en ena sus uncionalidades. La c eación de es os conjun os de da os e ique ados puede se un p oceso len o y e- dioso; además, es os conjun os que se gene an muchas eces han sido cons uidos po una sola pe sona, lo que puede p o oca que en el p oceso de e ique ado in luyan ses- gos pe sonales y no sea impa cial. Po ello su ge la necesidad de c ea he amien as con las que o as pe sonas puedan clasi ica da os de o ma ápida, sencilla y e isable, es deci que a ias pe sonas den e ique as al mismo conjun o de da os. Hoy en día, la mayo ía de las aplicaciones web nos piden comp oba que somos se es humanos los que es amos u ilizando su se icio. Pa a di e encia en e un usua io eal y un p og ama au oma izado se emplean se icios de CAPTCHA que median e un sencillo e o ealizan esa comp obación. Uno de los e os más empleados es indica en un con- jun o de da os, cuales cumplen cie a condición, es deci , es os e os pueden se i de ayuda pa a clasi ica in o mación, po lo que hemos desa ollado un se icio de CAP- TCHA que ecoge la in o mación p opo cionada en los e os pa a e ique a da os. 1.2 Obje i os El p incipal obje i o del p oyec o es c ea un se icio de CAPTCHA que con la in o ma- ción que eciba en espues a a los e os que p oponga ayude a e ique a conjun os de da os y gene e un iche o con la in o mación deseada. En conc e o, las me as de es e p oyec o son los siguien es: 1. In es iga sob e el uso de se icios de CAPTCHA pa a el e ique ado de da os. 2. Desa olla un se icio de CAPTCHA ácil de in eg a en una aplicación web. 3. C ea un se icio uncional y escalable pa a que pueda se sencillo añadi nue os ipos de da os pa a e ique a . Sis ema colabo a i o pa a el e ique ado de da os 7 4. Consegui que el p oceso pa a añadi colecciones de da os y ecupe a la in o - mación e ique ada sea lo más sencillo posible. 1.3 Plan de abajo Pa a el desa ollo del abajo hemos ealizado una plani icación que nos pe mi a cub i las necesidades de un p oyec o de es as ca ac e ís icas, análisis del p oyec o, in es iga- ción de se icios de CAPTCHA, in es igación de he amien as pa a desa olla nues o se icio de CAPTCHA, implemen ación, es eo y esc i u a de la memo ia. Es ás a eas consis en en lo siguien e: • Análisis del p oyec o: Es udio de las di e en es o mas pa a p oduci conjun os de da os e ique ados. • In es igación de se icios de CAPTCHA: Ap endizaje de cómo uncionan o os se icios de CAPTCHA. • In es igación de he amien as pa a desa olla nues o se icio de CAPTCHA: Análisis y elección de las posibles he amien as que pod íamos u iliza pa a el desa ollo del se icio de CAPTCHA. • Implemen ación: Fase de desa ollo del se icio de CAPTCHA y del componen e u ilizable pa a o as aplicaciones web. • Tes eo: Comp obación del co ec o uncionamien o del se icio y co ección de e o es. • Esc i u a de la memo ia: C eación del documen o que desc ibe el p oceso de desa ollo del abajo y sus esul ados. En la igu a 1.1 se indica en o ma de diag ama de Gan , cómo se ha epa ido el abajo a lo la go del iempo. Figu a 1.1 - Diag ama de Gan de la plani icación del p oyec o 8 1.4 Licencia y código El p oyec o cuen a con la licencia Apache e sión 2.0. Todos los ecu sos del p oyec o es án disponibles en el siguien e enlace: h ps://gi hub.com/Ad iSC/ g Sis ema colabo a i o pa a el e ique ado de da os 9 2 In oduc ion In his sec ion we will explain he mo i a ion ha has made us o do his p ojec , he objec i es we wan o achie e and he planning o he de elopmen o he p ojec . 2.1 Mo i a ion Today, he use o applica ions ha ely on a i icial in elligence is widesp ead. F om p o- g ams used o acial ecogni ion, o d awing ools ha help o comple e a design om a ske ch o a desc ip ion. Bu o hese a i icial in elligences o wo k p ope ly, hey need in o ma ion p epa ed o ain hei unc ionali ies. Bu he c ea ion o hese labeled da ase s can be a slow and edious p ocess, and he da ase s ha a e gene a ed ha e o en been made by a single pe son, which can lead o pe sonal biases in luencing he labeling p ocess and making i biased. This is why he e is a need o c ea e ools wi h which o he people can classi y da a quickly, easily and eliably, ha is, se e al people can label he same da ase . Nowadays, mos web applica ions ask us o e i y ha we a e human beings using hei se ice. To di e en ia e be ween a eal use and an au oma ed so wa e, CAPTCHA se - ices a e used o pe o m his check by means o a simple challenge. One o he mos used challenges is o indica e in a se o da a, which mee a ce ain condi ion. These challenges can help o classi y in o ma ion, so we ha e de eloped a CAPTCHA se ice ha collec s he in o ma ion p o ided in he challenges o ag da a. 2.2 Objec i es The main goal o he p ojec is o c ea e a CAPTCHA se ice ha , wi h he in o ma ion i ecei es in esponse o he challenges i p o ides, helps o label da ase s and gene a es a ile wi h he eques ed in o ma ion. In pa icula , he goals o his p ojec a e he ollowing: 1. To in es iga e he use o CAPTCHA se ices o da a labeling. 2. To de elop a CAPTCHA se ice ha is easy o in eg a e in o a web applica ion. 3. To c ea e a unc ional and scalable se ice so ha i can be easy o add new da a ypes o labeling. 4. Make he p ocess o adding da a collec ions and e ie ing labeled in o ma ion as simple as possible. 16 • He amien as pa a la ges ión del p oyec o o Gi . o Visual S udio Code. 3.4.1 Tecnologías básicas HTML El Lenguaje de ma cado de hipe ex os o HTML [5] po sus siglas en inglés es la he a- mien a básica pa a de ini el con enido de una página web. Es e es ánda que es á con olado y desa ollado po el Wo ld Wide Web Conso ium (W3C) de ine cómo debe es a es uc u ado el código de una página web. El con enido de un documen o HTML es á o mado po a ios ipos de elemen os que de e minan cómo se mues a el con enido del documen o. Es os elemen os es án ma - cados po e ique as, una al comienzo pa a indica el inicio del elemen o y o a al inal, con el ca ác e “/” pa a ma ca el cie e, de la siguien e mane a: <nomb e del elemen o HTML>Con enido del elemen o</nomb e del elemen o HTML>. Gene almen e un documen o HTML es á es uc u ado de la siguien e mane a: el inicio y el inal del documen o se indican con la e ique a <h ml> y en su in e io la e ique a <head> ma ca la cabece a del documen o donde se puede inclui in o mación auxilia , como el í ulo del documen o o enlaces a o os ecu sos y la e ique a <body> donde se de ine el con enido isible del documen o, como se puede e en la igu a 3.1. Figu a 3.1 – Un documen o HTML siemp e es a á es uc u ado en e cabece a y con enido Den o de la e ique a inicial de un elemen o se pueden inclui di e en es a ibu os pa a modi ica la ep esen ación del con enido de es e. Es os a ibu os es án o mados po una cla e a la que se le asigna un alo con el ca ác e “=”, de la siguien e o ma: cla e = “ alo ”. Uno de es os a ibu os es s yle. Con él podemos u iliza CSS pa a modi ica como se mues a el con enido del elemen o del HTML. S yle ambién puede u iliza se como e i- que a den o de la cabece a del documen o. Sis ema colabo a i o pa a el e ique ado de da os 17 En nues o p oyec o, u ilizamos la e sión más ecien e, HTML5, pa a el desa ollo de las páginas web de los usua ios y el componen e que mues a los e os. CSS CSS [6], en ingles de Hojas de es ilo en cascada es o o es ánda con olado po el W3C. Es a he amien a se u iliza jun o a HTML pa a de ini los es ilos con los que se mues a el con enido de la página web. Como hemos dicho en el apa ado an e io , en un documen o HTML se puede inclui CSS median e el a ibu o o la e ique a s yle, pe o es o hace que la de inición del docu- men o, especialmen e den o de una e ique a sea muy eca gada. La ecomendación p incipal es de ini el es ilo de los elemen os de la página web en un iche o CSS sepa- ado del documen o HTML y enlaza lo a es e en la cabece a. Den o del documen o CSS se pueden especi ica los es ilos o bien pa a odos los ele- men os de un mismo ipo, o bien pa a elemen os conc e os que debe án ene un a i- bu o u o o elemen o que pueda iden i ica los. La especi icación del es ilo sigue es a es uc u a, p ime o se iden i ica el elemen o y en e los ca ac e es “{“ y “}”, se inclu- yen las p opiedades a modi ica , como se mues a en la igu a 3.2. Figu a 3.2 - Amplía al 100% el ancho y el al o del elemen o window Pa a el p oyec o, hemos empleado es a he amien a en su úl ima e sión CSS3 pa a da le un aspec o más ag adable a las páginas de los usua ios y al componen e de los e os. JSON La No ación de obje o de Ja aSc ip o JSON [7] es un o ma o de ex o pa a ep esen a da os de o ma sencilla. Es e o ma o iene de la no ación de obje os de Ja aSc ip , pe o debido a su auge en e a o as he amien as como XML ha pasado a se conside ado como un o ma o independien e del lenguaje del que p ocede. Un obje o JSON se delimi a en e los ca ac e es “{“ y “}”. Den o del obje o, la in o ma- ción de cada elemen o que lo o ma se ep esen a median e a un nomb e que lo iden- i ica, el ca ác e “:” y el con enido que iene asignado, desde ipos de da os simples como núme os en e os o cadenas de ca ac e es, has a in o mación más compleja como lis as u o os obje os JSON. Si un obje o con iene a ios elemen os se u iliza una coma pa a sepa a los, como se puede e en la igu a 3.3. 18 Figu a 3.3 - Obje o con la in o mación de una de las colecciones de ex os En el p oyec o, u ilizamos el o ma o JSON pa a de ini los mensajes que in e cambia an el componen e del e o y las dis in as is as de usua io con el se ido . HTTP El P o ocolo de ans e encia de hipe ex o o HTTP [8] po sus siglas en inglés es la he- amien a de comunicación que emplea el se ido pa a en ia el con enido de las pági- nas web y el componen e del e o. HTTP es un p o ocolo sin es ado, es deci , no alma- cena in o mación sob e conexiones p e ias que unciona en la capa de aplicación, sob e TCP/IP. Es e p o ocolo de ine como es a án o mados los mensajes de pe ición y espues a en- e se ido y clien e. HTTP cuen a con múl iples ipos de mensaje, es os son algunos de ellos: • HTTP CONNECT: El mé odo CONNECT si e pa a da comienzo a la conexión bi- di eccional con el pun o de des ino del mensaje. Un uso undamen al pa a es e mé odo es comp oba si un p oxy nos pe mi e accede a un ecu so bajo cie as condiciones. • HTTP DELETE: Es e es un mé odo muy sencillo cuya uncionalidad es bo a el ecu so indicado. • HTTP OPTIONS: Es e ipo de mensaje se u iliza pa a p egun a po los mé odos HTTP que admi e la di ección del ecu so solici ado. • HTTP GET: Es e mé odo solici a al ecep o una ep esen ación del ecu so que se especi ica en la URL del mensaje. La solici ud puede inclui pa áme os que se añadi án a la URL. • HTTP HEAD: Es e ipo de mensaje se u iliza pa a en ia una pe ición simila a HTTP GET, pe o en es e caso, la con es ación a es e mensaje solo inclui á la ca- bece a que end ía la espues a co espondien e a esa solici ud GET, sin el con- enido del ecu so solici ado. • HTTP POST: Es e es el mé odo p incipal pa a en ia da os al se ido . En ez de emplea la URL como el mé odo GET, en los mensajes HTTP POST se indica ipo del con enido que iene la solici ud en la cabece a Con en -Type y se incluye en el cue po de la pe ición. Sis ema colabo a i o pa a el e ique ado de da os 19 • HTTP PUT: Es e mé odo se u iliza pa a c ea un nue o ecu so o eemplaza o o exis en e en la di ección indicada en el mensaje y con el con enido incluido en es e. En nues o p oyec o emplea emos la e sión del p o ocolo HTTP/1.1. P incipalmen e, los ipos de mensaje que más u iliza emos son GET y POST. DOM De elope .mozilla.o g de ine el DOM como “una in e az de p og amación pa a los do- cumen os HTML y XML. Facili a una ep esen ación es uc u ada del documen o y de- ine de qué mane a los p og amas pueden accede , al in de modi ica , an o su es uc- u a, es ilo y con enido. El DOM da una ep esen ación del documen o como un g upo de nodos y obje os es uc u ados que ienen p opiedades y mé odos. Esencialmen e, conec a las páginas web a sc ip s o lenguajes de p og amación.” [9] Igual que HTML p ác icamen e ca ece de u ilidad sin Ja aSc ip , Ja aSc ip ca ece de u ilidad sin DOM, pues sin es a ep esen ación de los obje os del documen o HTML en Ja aSc ip , no se ía posible modi ica las componen es de la página web pa a que cum- plan con las uncionalidades asignadas pa a ellas. Con es a in e az es posible c ea ele- men os, ecupe a los y modi ica su con enido. Se hace uso del a ibu o “id” de las e i- que as HTML, en el caso de e e i se a un único elemen o del documen o. En o os casos se ecu e al a ibu o “class” o a la búsqueda según ipo de e ique a (di , p, label, e c.), lo que de ol e ía un a ay de elemen os. En nues o código ecu imos únicamen e a llamadas po iden i icado , no sin econoce la u ilidad de los o os mé odos menciona- dos. 3.4.2 Lenguajes de p og amación Py hon Py hon [10] es un lenguaje de p og amación de al o ni el cuya iloso ía p incipal de di- seño es la legibilidad del código. El uso de es e lenguaje es á ya bas an e ex endido lle- gando a se u ilizado en aplicaciones web an conocidas como D opbox, Ne lix o Reddi . Es e lenguaje, al igual que Ja a, es un lenguaje in e p e ado cuyo pa adigma p incipal e a la o ien ación a obje os, pe o al se un lenguaje mul ipa adigma, sopo a en meno medida la p og amación uncional. En el p oyec o Py hon ha sido el lenguaje escogido pa a p og ama el uncionamien o del se ido debido a que es un lenguaje que o ece una g an e sa ilidad de uso man- eniendo su sencillez. 20 Ja aSc ip Lenguaje u ilizado en el desa ollo del on end, cuyo desa ollo se explica á en p óximas secciones. Ja aSc ip [11] es á de inido como un lenguaje de al o ni el, in e p e ado y o ien ado a obje os, aunque ambién pe mi e écnicas de p og amación uncionales e impe a i as. Es un lenguaje de sc ip s basado en p o o ipos, que se ejecu a en el lado del clien e y se puede u iliza pa a p og ama cómo eacciona una página web an e unos e en os de- e minados. Aunque su p incipal uso sea en aplicaciones web, ambién puede ene usos en o os en o nos a pa e del na egado . En es e p oyec o ha sido cla e pa a la unión del backend y el on end; así como la co- municación en e el widge y la página en la que es é inc us ado. Su uso más ú il ha sido el de manipulación de JSON. G acias a DOM, es posible manipula los obje os HTML, pa a do a los de con enido, y/o ocul a los cuando es necesa io. Es e lenguaje es el nexo más signi ica i o en e los componen es, pues ayuda a p ocesa la in o mación en iada po el se ido y la de uel a a es e. Cuando el se ido en ía da os, és os se pie den si no exis e ningún mecanismo que se enca gue de su a amien o. Al igual que una página HTML no puede se dinámica sin ecibi da os du an e su uso. El lenguaje HTML, po sí solo, pe mi e con g an limi ación inse a con enido en una página. Sin emba go, es o no es su icien e, ya que es incapaz de do a la de ninguna uncionalidad. Y po ende, de ninguna u ilidad. 3.4.3 Tecnologías pa a el Backend Django Django [12] es un en o no esc i o en Py hon pa a desa ollo web. Inicialmen e ue dise- ñado pa a aplicaciones web de no icias de la Wo ld Company de Law ence, Kansas, pe o en julio de 2005 ue dis ibuida al público bajo una licencia de so wa e lib e. Es e en o no pe mi e la implemen ación ápida de aplicaciones web ácilmen e man e- nibles y segu as. Django se enca ga de la mayo ía de las complicaciones que su gen a la ho a de desa olla una aplicación web, lo que pe mi e cen a se en la implemen ación del compo amien o de la aplicación. Además de eso o ece una biblio eca pa a simpli- ica la implemen ación de las is as del clien e. Den o del en o no a es e o ma o de is as se les llama plan illas. Hemos elegido es e en o no pa a el desa ollo del backend ya que el obje i o p incipal de Django es simpli ica el desa ollo de si ios web complejos, haciendo hincapié en que los componen es que an a compone la aplicación web sean áciles de amplia e in e - conec a y puedan eu iliza se, lo que se adecua muy bien a nues as necesidades po - que agiliza el p oceso pa a añadi nue os ipos de da os que se quie an e ique a . Sis ema colabo a i o pa a el e ique ado de da os 21 SQLi e SQLi e [13] es una biblio eca desa ollada en C que p opo ciona un lige o y sencillo ges- o de bases de da os elacional. En ez de ejecu a se como un p oceso independien e con el cual el p og ama p incipal del se ido debe comunica se, SQLi e se une al p oceso del p og ama p incipal pasando a o ma pa e de es e. Debido a es o, el con enido de una base de da os implemen ada con es e ges o , se puede almacena en un solo iche o. Es e es uno de los ges o es que o ece Django pa a maneja la base de da os de u se - ido , lo hemos escogido ya que acili a la implemen ación del p o o ipo de una base de da os pa a un p oyec o como es e. G acias a Django, en caso de que el p oyec o c ezca más y sea necesa io o o ges o capaz de maneja bases de da os más g andes de ma- ne a más e icien e, se puede hace la mig ación a o o sis ema sin necesidad de hace g andes cambios en el código del se ido . 3.4.4 Tecnologías del F on end Django Widge Tweaks Django p opo ciona plan illas de o mula ios. Sin emba go, lo único que se mues a son los campos y un bo ón de en ia , en un ondo blanco. Un diseño que no da más que la imp esión de encon a se an e una página an icuada ( igu a 3.4). Figu a 3.4 - Fo mula io po de ec o, sin pe sonalización Es o no es deseable a la ho a de ende un p oduc o, ya que no in i a al usua io a elegi lo ni a ol e a usa lo. Pa a e i a es e p oblema, se ha in oducido el paque e Django Widge Tweaks [14], el cual ha á posible la pe sonalización de los o mula ios. Con muchos o pocos cambios en el código, dependiendo de la complejidad que equie a el nue o diseño. Cuando se in oca a una unción pa a ende iza un o mula io, Django lo que hace es de ol e le a la plan illa HTML un único obje o, el cual incluye odos los campos que se hayan con igu ado pa a el o mula io. No pode sepa a los campos, no imposibili a la pe sonalización, ya que se pod ía modi ica su es ilo o ealiza o os cambios como cam- bia el colo de ondo. 22 Esencialmen e lo que hace Django Widge Tweaks es da acceso a los dis in os campos del o mula io, pa a pode inse a los en el código según sea con enien e. De uel e un elemen o HTML, cuyos a ibu os es posible modi ica (class, placeholde , e c.). Dando esul ados como el de la igu a 3.5. Figu a 3.5 - Diseño más ag adable pa a los usua ios Boo s ap Debido a la necesidad de un diseño ag adable, mencionada an e io men e, se ha pen- sado en cómo alcanza es e obje i o. Al a a se de una página HTML, lo p ime o en lo que se piensa es en CSS, lenguaje usado pa a la de inición de es ilos de HTML, así como de es uc u ación de los elemen os. Con la p ác ica, c ea páginas usables y con una apa iencia ag adable con CSS, es un log o conseguible. Si bien es uno que escapa a los in e eses de es e equipo. Lo que ha lle ado a busca una al e na i a que acili e es e p oceso. De en e odas las opciones, se eligió el en o no Boo s ap [15]. La inclusión de es e en o no en el p oyec o se ha lle ado a cabo ía CDN, ya que equie e menos pasos. Únicamen e hay que inse a dos líneas de código en el iche o HTML a manipula . En el momen o en que se empezó a usa dicha he amien a, la e sión más ecien e que había disponible e a la 5, conocida po la eliminación de la posibilidad del uso de jQue y en su manejo. Es a ue e iden emen e la e sión elegida pa a el p oyec o. Cuando se dibuja el JSON ecibido con los ex os y las opciones, las opciones son asigna- das cada una a un bo ón, el cual o ma pa e de un g upo de bo ones o en el lenguaje de Boo s ap b n-g oup, nomb e del id del di en el que deben inse a se es os bo ones. Es os g upos de bo ones lo que acili an es el posicionamien o de unos espec o a o os (ho izon al, e ical), así como la sepa ación en e ellos. También se puede es ablece su es ilo como g upo en luga de ene que asigna le uno a cada uno po sepa ado, y o as ca ac e ís icas como su aspec o al posiciona el pun e o sob e el bo ón. Sis ema colabo a i o pa a el e ique ado de da os 23 Boo s ap ambién ue u ilizado pa a el diseño de la in e az de usua io. Es a ez sacando p o echo a las ablas y a su conocida ca ac e ís ica de o denación de elemen os po cuad ículas. 3.4.5 He amien as pa a la ges ión del p oyec o Gi Gi [16] es un so wa e pa a con ol de e siones de código abie o, publicado en 2005 po Linus To alds. Es una he amien a muy po en e que c ea un eposi o io que hace un seguimien o de odos los cambios en los a chi os del p oyec o, gua da un egis o de las modi icaciones que se han con i mado, además pe mi e c ea dis in as e siones au- xilia es o amas del p oyec o pa a que cada miemb o del equipo pueda abaja en sus cambios de o ma indi idual y de o ma sencilla ealiza la unión de es os. Gi p opo ciona una se ie de ins ucciones u ó denes pa a maneja el con enido y las e siones del p oyec o, algunas de es as ins ucciones son: • Gi ini : Es a o den si e pa a c ea un subdi ec o io en el p oyec o llamado .gi con odos los iche os necesa ios pa a la ges ión del eposi o io. • Gi e ch: Es a ins ucción se usa pa a desca ga odos los cambios que se han aplicado al eposi o io. • Gi me ge [nomb e de la ama]: Con es a ins ucción puedes di igi los cambios a la ama indicada en el pa áme o nomb e de la ama. • Gi pull: Es a o den combina los e ec os de las ins ucciones e ch y me ge en un mismo comando. • Gi commi -m [mensaje]: Es a ins ucción con i ma los cambios ealizados en el p oyec o. Con la opción -m podemos añadi un mensaje pa a desc ibi b e e- men e los cambios ealizados. • Gi push [nomb e ama]: Es e comando sube al eposi o io la ama indicada en el pa áme o nomb e ama. Al habe abajado p incipalmen e de o ma emo a, e a necesa io el uso de un eposi- o io Gi en línea en el que pode ges iona el p oyec o. Jun o a es o, hemos elegido Gi Hub como pla a o ma pa a aloja el p oyec o ya que su licencia pa a es udian es iene muchas en ajas. Visual S udio Code Visual S udio Code es un edi o de código uen e g a ui o desa ollado po Mic oso que o ece muchas he amien as pa a el p og amado , sopo e pa a depu a código, 24 in eg ación con Gi pa a acili a el con ol de e siones y múl iples ex ensiones pa a el lenguaje con el que se es á codi icando. Hemos elegido es e edi o de código po que es as he amien as, po ejemplo, la ex en- sión pa a pode e el con enido del a chi o que o ma la base de da os [17], nos han ayudado mucho a simpli ica el lujo de abajo. Sis ema colabo a i o pa a el e ique ado de da os 25 4 A qui ec u a del p oyec o Pa a es e p oyec o nos cen a emos en diseña una e sión inicial de nues o se icio de CAPTCHA cuyo e o mues e una se ie de ex os y un conjun o de opciones pa a cada ex o que depende án del con enido de es e. El p oceso de e ique ado consis e undamen almen e en asigna una de es as opciones como e ique a de un ex o pa a que una in eligencia a i icial pueda ap ende a econo- ce el alo , el sen ido, o las in enciones de un mensaje de ex o en lenguaje na u al. 4.1 Visión global del diseño del p oyec o La a qui ec u a de nues o p oyec o es á di ida en dos bloques, el clien e, que es á o - mado po el componen e de los e os y las is as pa a los usua ios y el se ido que en ía los e os al componen e y almacena oda la in o mación de las colecciones de da os e ique ados y usua ios. El esquema de la igu a 4.1 ep esen a es a es uc u a Figu a 4.1 - Rep esen ación de la a qui ec u a del p oyec o Ambos bloques se comunican median e mensajes en o ma o JSON pa a se i y com- p oba los e os que se p esen an al usua io. El componen e es un pequeño sc ip desa- ollado en Ja aSc ip que se puede añadi a una aplicación web como campo de un o mula io, inicialmen e se mues a un bo ón pa a da comienzo al e o al hace clic, el componen e solici a al se ido un conjun o de ex os con los pa áme os indicados en la con igu ación del sc ip , es os pa áme os son: • Palab as cla e: El usua io pod á p opo ciona un conjun o de palab as cla e pa a que el componen e solo mues e ex os de las colecciones elacionadas con esas palab as. 32 o Fiabilidad_eleccion: El po cen aje de espues as de la opción conside ada como elección del ex o. Pa a abaja con la in o mación almacenada en la abla co espondien e, en es e modelo de inimos los siguien es mé odos: o Comp ueba (Opción): Mé odo booleano que comp ueba si la opción ele- gida pa a el ex o mos ado en el e o coincide con la elección escogida pa a el ex o. Si son las mismas, es e mé odo de uel e ue, o alse en caso con a io. o Ac ualiza_eleccion: Mé odo que calcula la iabilidad de cada elección y la compa a con el umb al, en caso de la iabilidad sea mayo o igual, ac ua- liza la elección co espondien e al ex o. • Opciones_ ex o: Como cada ex o puede ene un núme o a iable de opciones necesi amos un modelo pa a de ini una abla que almacene las opciones y las elacione con su ex o co espondien e. Es os son los a ibu os del modelo: A ibu o Tipo ex o Fo eignKey opcion Cha Field cuen a BigIn ege Field o Tex o: A ibu o que de ine el campo pa a elaciona cada opción con su ex o co espondien e. o Opcion: A ibu o pa a de ini un campo que almacena la opción. o cuen a: A ibu o pa a de ini un campo que almacena una cuen a de cuan as espues as se han dado a una opción en conc e o. La biblio eca de modelos o ece un sis ema de eglas en caso de que se quie an añadi es icciones a la in o mación que se puede almacena en una abla. Pa a es e modelo end emos que de ini la egla unique_ oge he en e los a ibu os ex o y opción pa a es ingi la posibilidad de que pueda habe opciones epe i- das pa a un ex o. En es e modelo ambién necesi amos un mé odo auxilia pa a abaja con la in o mación de la abla. Es e mé odo es: o Ac ualiza_cuen a: Mé odo que añade uno a la cuen a de la opción en caso de que haya sido elegida en un e o. • Cla e_usua io: Sis ema colabo a i o pa a el e ique ado de da os 33 Es e modelo de ini á una abla complemen a ia a la abla de usua ios que Django de ine al inicializa el se ido . Es a abla almacena las cla es de los clien es que u ilizan el se icio de CAPTCHA y las elaciona con el usua io co espondien e. Los a ibu os del modelo son: A ibu o Tipo usua io OneToOneField cla e Cha Field o Usua io: A ibu o que de ine el campo pa a elaciona cada cla e con su usua io co espondien e. o Cla e: A ibu o pa a de ini un campo que almacena la cla e. Es a cla e es á o mada po una cadena de 32 ca ac e es al anumé icos alea o ios. Den o de es e modelo de inimos los siguien es mé odos pa a abaja con la in o mación con enida en la abla: o Renue a_cla e: Mé odo que sus i uye la cla e almacenada en la abla po o a nue a, en caso de que el clien e así lo decida. o Comp ueba_cla e: Mé odo booleano que comp ueba que la cla e que p opo ciona el clien e del se icio de Cap cha al solici a un e o es igual a la cla e almacenada en la abla. Si coinciden la espues a del mé odo se á ue, o alse en caso con a io. 5.2 In e az pa a las pe iciones del componen e del e o En es a sección explica emos la implemen ación de la in e az que se enca ga de p oce- sa las pe iciones que le en ía el componen e. Es a in e az es á de inida el a chi o api.py. Como hemos dicho an e io men e, el p oceso del e o se compone de es pa es jun o con la lec u a de las opciones que ealiza el componen e. P ime o se hace un il o, si el usua io ha de inido un conjun o con las palab as cla e y las palab as a e i a , de las colecciones álidas pa a busca ex os pa a el e o. Después se selecciona un núme o de ex os pa a en ia al componen e del e o, algunos de los ex os ienen ya una e ique a de inida y o os no. El núme o o al de ex os es mínimo de es po de ec o, pe o el clien e puede indica o o núme o en su pe ición. A con inuación, el se ido ecibe las opciones elegidas po el usua io. Con los ex os que ya es aban e ique ados, comp ueba si se a a de un usua io eal o no. Pa a odos los ex os mos ados se ac ualiza á su in o mación en caso de un usua io legí imo. 34 Los mé odos implemen ados en la in e az pa a ealiza es e p oceso son: • Fil a _colecciones (palab as cla e, palab as a e i a , lis a de colecciones): Es e mé odo booleano ealiza es a eas, p ime o il a las colecciones posibles con las palab as cla e. A con inuación de es e conjun o elimina las colecciones que con engan alguna palab a a e i a . Finalmen e, comp ueba que la lis a de ini i a de colecciones no es á acía de ol iendo ue, o alse si lo es á. • Selecciona_ ex os ( e os e ique ados, e os sin e ique a , núme o de ex os): Es e mé odo ecibe los ex os de la lis a de ini i a de colecciones, sepa ados en dos lis as según engan e ique a o no y la can idad de ex os que el clien e quie e mos a en el e o. En p ime luga , hace la di isión en e a de es e núme o en e dos, una de las mi ades, más uno, es la can idad de ex os con e ique a y el es o son los ex os que no es án e ique ados. A con inuación, selecciona la can idad co espondien e de ex os con y sin e ique a . Po úl imo, los de uel e ag upa- dos en una lis a. • Re o: Es e es el mé odo que en ía los ex os al componen e. P ime o, llama a il a _colecciones pa a gene a una lis a de colecciones alidas, si la lis a no es á acía sepa a los ex os en dos conjun os dependiendo de si ienen e ique a o no. Con es os conjun os llama a selecciona_ e os que de ol e á la lis a de ex os pa a en ia al componen e. Con es e conjun o, c ea á el mensaje en el o ma o JSON co espondien e. Si la lis a de ini i a de colecciones es á acía, c ea á el mensaje en el o ma o JSON co espondien e. El componen e hace la solici ud POST a es e mé odo a a és de la URL <<hos >>/ agcap cha/ e o • Comp obación: Es e mé odo ecibe el conjun o de espues as de un usua io a los ex os mos ados en el componen e. Después, comp ueba que las opciones ele- gidas pa a los ex os del conjun o que ienen e ique a son iguales con las elec- ciones almacenada en la base de da os, si coinciden se conside a un usua io le- gí imo, se ac ualizan las opciones de odos los ex os mos ados y las e ique as haciendo el cálculo de los umb ales de cada opción. Si no coinciden el usua io ha allado el e o y no se ac ualiza nada. Finalmen e, en ía el esul ado de la com- p obación. El componen e hace una solici ud POST a es e mé odo con la URL <<hos >>/ agcap cha/comp obación 5.3 In e az pa a las pe iciones de las is as del clien e En es e apa ado, explica emos el conjun o de mé odos que se enca ga de esponde a las pe iciones que se hacen desde las is as del clien e. Dependiendo del ipo de usua io las is as ienen uncionalidades dis in as. Ac ualmen e, la uncionalidad pa icula que ienen disponible los clien es del se icio de CAPTCHA es eno a su cla e de usua io. El mé odo que se enca ga de ealiza la eno ación son los siguien es: Sis ema colabo a i o pa a el e ique ado de da os 35 • Gene a _cla e: Es e mé odo simplemen e c ea una cadena alea o ia de ein a y dos ca ac e es al anumé icos. • Reno a _cla e: Recibe la pe ición del bo ón pa a gene a una cla e nue a. Des- pués, c ea la nue a cla e llamando al mé odo gene a _cla e y busca en la abla co espondien e de la base de da os al usua io y pa a sus i ui la cla e an igua po la ecién c eada. Los adminis ado es del se icio de CAPTCHA pod án añadi y desca ga colecciones de ex os de la base de da os. Pa a la ca ga de colecciones implemen amos los siguien es mé odos: • Lee _documen o_ca gado (da os de la pe ición): Es e mé odo se enca ga de p o- cesa la in o mación ecibida en la pe ición y esc ibi la en un a chi o de ex o empo al, como el que se mues a en la igu a 5.1. El o ma o de es e a chi o es simila a un a chi o de alo es sepa ados po comas (CSV) [18], es deci , los elemen os de cada ila es a án sepa ados po comas. Sin emba go, no odas las ilas end án el mismo núme o de columnas ya que la p i- me a línea end á solo dos elemen os que son el nomb e y la desc ipción de la colección y la segunda línea una lis a de palab as cla e. A pa i de la e ce a ila comienzan los ex os de la colección, el p ime elemen o de la ila es el con enido del ex o, a con inuación, la lis a de opciones en e co che es y po úl imo el umb al de acep ación pa a la opción que salga elegida como e ique a. Además, como los ex os pueden con ene comas y ambién las u ilizamos como sepa ado es en la lis a de palab as cla e y las lis as de opciones empleamos el pun o y coma como delimi ado . • Ca ga _coleccion_bbdd: La uncionalidad de es e mé odo es lee el a chi o em- po al con la in o mación de la colección y la almacena en la abla co espon- dien e de la base de da os. • Subi _ e os: Es e mé odo ecibe la pe ición con la in o mación de la colección que se desea almacena en la base de da os. El con enido de la solici ud se p o- cesa con la unción lee _documen o_ca gado c eando un a chi o empo al que p ocesa á ca ga _coleccion_bbdd. Una ez ha e minado la subida a la base de da os, elimina el a chi o empo al. La pe ición se ealiza median e una solici ud POST a la URL <<hos >>/ agcap cha/subi _ e os. El o ma o que end á el a chi o pa a subi la colección es el siguien e: Figu a 5.1 - Fo ma o del a chi o pa a ca ga colecciones Pa a desca ga de la base de da os la in o mación de una colección solo es necesa io el siguien e mé odo: 36 • Desca ga _cs : Es á unción se enca ga de busca en la base de da os la in o ma- ción con los ex os de una colección que ecibe como pa áme o en una pe ición GET a la URL <<hos >>/ agcap cha/subi _ e os?id_coleccion=<<id>> y desca - ga los en un a chi o como el que se mues a en la igu a 5.2. Al igual que en el a chi o de ca ga el o ma o de es e a chi o ambién es simila al o ma o CSV. La p ime a ila iene exac amen e la misma es uc u a, nomb e y desc ipción de la colección. La siguien e ila, que se á la misma pa a odos los a chi os que se desca guen, con iene los nomb es de los elemen os que es uc- u an las en adas de los ex os pa a que el documen o se mues e de o ma o ganizada en una abla. Y a pa i de la e ce a ila comenza án los egis os de los ex os. Figu a 5.2 - Fo ma o del a chi o desca gado con la in o mación de la colección Sis ema colabo a i o pa a el e ique ado de da os 37 6 F on end En es e apa ado se explica á cómo el compo amien o del CAPTCHA po pa e de on- end, la is a pa a los usua ios y su implemen ación. 6.1 Inicio del e o El e o se ca ga po de ec o al ca ga la página en la que es é inc us ado el widge , ya que el sc ip al ca ga se la página hace la pe ición al se ido pa a que le de uel a el JSON con el e o. Cuando se comp ueba que la pe ición ha enido éxi o (código 200), se in oca una unción (c ea Bo on), la cual c ea el bo ón y lo incluye en el HTML con el uso DOM. A es e bo ón se le añade un e en Lis ene de ipo clic, el cual se enca ga de llama a la unción que mues a los ex os del e o. Es a unción (mos a Mensaje) sigue los siguien es pasos: 1. Ocul a los elemen os de pan alla p incipal. 2. Cambia el amaño del elemen o de salida y le asigna como con enido HTML el ex o de la p ime a p egun a del e o. 3. En a en un bucle pa a imp imi los ex os, el cual hace lo siguien e: a. C ea un di pa a el g upo de bo ones si no es á ya c eado. b. C ea un nue o bo ón y un nodo de ex o al que se le asigna como alo el ex o de la opción. Se añade el nodo al bo ón. Su a ibu o alue se pone al índice de la opción, pa a después añadi dicho índice al JSON con las espues as, si se pulsa dicho bo ón (se elige esa opción). c. Al bo ón se le añade un e en Lis ene de ipo clic, el cual: § Si oda ía quedan ex os en el e o, aumen a el con ado y uel e e in oca a mos a Mensaje ecu si amen e. § Si no, se ocul an odos los elemen os y se in oca la unción que en ía el JSON con las opciones elegidas al se ido . § En ambos casos, se p oduce una llamada a la unción que se en- ca ga de inclui las opciones elegidas en el JSON. d. Se añade el bo ón al g upo y el g upo al di . Pa a da le a en ende al usua io que se a a de un CAPTCHA, se añade encima del bo ón el í ulo “¿E es un obo ?” ( igu a 6.1). 38 Figu a 6.1 - Lo p ime o que el usua io e á al ca ga se el o mula io 6.2 Almacenamien o de espues as Al hace clic en el bo ón “No”, al usua io se p esen a la p ime a p egun a del e o. Lo que se puede obse a es el ex o de la p egun a y debajo de él una se ie de bo ones con las posibles espues as ( igu a 6.2). Figu a 6.2 - El CAPTCHA mues a una p egun a Con el obje i o de ayuda al usua io a ene cla o, qué espues a es á siendo seleccio- nada, con CSS se con igu a la p opiedad ho e del elemen o di que con iene es os bo- ones, pa a que al posiciona el cu so sob e una de las espues as, el bo ón cambie de colo , esal ando así sob e los demás ( igu a 6.3). Figu a 6.3 - Respues a esal ada Pulsa uno de es os bo ones lle a á a la siguien e y el p oceso con inua á has a que se hayan con es ado odas. Inicialmen e la a iable que gua da á las espues as del e o, iene como alo un obje o, cuyo único campo es un a ay acío de nomb e “ espues as”. Los campos que se alma- cenan son los siguien es: 1. Iden i icado de la p egun a (id). Sis ema colabo a i o pa a el e ique ado de da os 39 2. Opción elegida ( espues a). La unción enca gada de inclui la opción seleccionada en el JSON, sigue únicamen e es pasos: 1. C ea una cadena de ca ac e es con el iden i icado de la espues a y su índice en el a ay de opciones. 2. Se con ie e es a cadena de ca ac e es a un obje o JSON. 3. Se añade es e nue o elemen o al inal del JSON de espues as. 6.3 En ío de espues as Como se ha mencionado, cuando se comp ueba que ya no quedan más ex os que mos- a , se llama a una unción que sigue los siguien es pasos: 1. Se inicializa la pe ición POST. 2. Se es ablece como la unción a ejecu a cuando la pe ición de uel a una es- pues a (mos a Exi o). 3. Se es ablece el ipo de con enido a en ia a ipo JSON. 4. Se con ie e el JSON de las espues as a una cadena de ca ac e es. 5. Se hace la HTTP Reques con el JSON como cue po de la pe ición. 6.4 Recepción del e edic o En esumen, mos a Exi o consul a el e edic o del se ido y mues a un esul ado aco demen e. Es os son los pasos que sigue: 1. Con ie e la cadena de ca ac e es ecibida a JSON. 2. Comp ueba el alo del campo esul ado: a. Si es igual a “co ec o” (se a a de un humano), se en ía un mensaje a la página con enedo a del widge pa a que uel a a habili a el bo ón de en ia el o mula io. Ce ándose el CAPTCHA al inal ( igu a 6.4). Figu a 6.4 - Bo ón habili ado si se ha supe ado el e o b. En o o caso (se a a de un bo ), se mues a el mensaje “In én alo de nue o”, jun o a un bo ón de ein en a ( igu a 6.5), el cual in oca á a 40 mos a Mensaje pa a comenza de nue o po la p ime a p egun a de o o e o. Figu a 6.5 - Bo ón deshabili ado si se ha allado el e o 6.5 Vis a de usua io Como se ha explicado an e io men e, Django o ece plan illas, las cuales equie en de una pos e io pe sonalización pa a cumpli los equisi os de uncionalidad. Es e es el caso de la plan illa de adminis ación pa a el usua io básico que se desca ga nues o CAPTCHA. El elemen o más impo an e de es a in e az son las ablas que mues an la lis a de ex os (e ique ados y sin e ique a ). Pa a es o, Boo s ap o ece una mane a más simple de es uc u a una abla y da le es ilo. En el elemen o de e ique a able, se debe asigna al a ibu o class el alo able y complemen a iamen e o os alo es pa a do a a la abla de o as ca ac e ís icas, po ejemplo: able-da k pa a ac i a el modo oscu o, able-s iped pa a que las ilas engan colo es in e calados, e cé e a. En nues as ablas u ilizamos el alo able-ho e pa a que la ila quede esal ada cuando se posiciona el cu so sob e ella. También exis e la posibilidad de esal a ilas y columnas po de ec o con el alo able-ac i e, no usado debido a la al a de necesidad. Las ablas se di iden en las e ique as head (columnas) y body ( ilas). El núme o de co- lumnas no a ía po lo que se inse an di ec amen e en el HTML. En cuan o a las ilas, se le asigna un iden i icado a la e ique a body pa a pos e io men e añadi su con enido con ayuda de un sc ip , el cual se enca ga de llama a la URL que de uel e los ex os. Con el a ibu o leng h del a ay puede sabe cuán os ex os se han de uel o pa a así inclui en el HTML el núme o de ilas co espondien e (elemen os con nodos d ag e- gados a él). Una peculia idad de Boo s ap, la cual lo do a de p ac icidad, es su sis ema de colum- nado. Pa a pode ap o echa lo, se equie e c ea un elemen o, cuyo a ibu o class con- enga el núme o de columnas a ocupa , la no ación se ía: col - [nº de columnas a ocupa po el elemen o]. Cada ila es á compues a de 12 columnas, siemp e, y el compo a- mien o de las columnas según la con igu ación depende á de es o. Po ejemplo, si se desea que un di ocupe 3 columnas, su alo class debe á se col-3. Una ila puede ene dos di de amaño 3 y 4. El esul ado se á que queden 5 columnas en blanco ( igu a 6.6). Sis ema colabo a i o pa a el e ique ado de da os 41 Figu a 6.6 - El á ea sin ex o son las cinco columnas es an es Si a es a ila se le añade un di con un amaño supe io a 5 columnas (ej. 10 columnas), dicho elemen o queda á desplazado po comple o a la siguien e ila ( igu a 6.7). Figu a 6.7 - Se puede ap ecia que en la nue a ila quedan dos columnas acías Adicionalmen e, dependiendo del amaño de en ana, se puede es ablece cuán as co- lumnas ocupa á una celda. Po ejemplo, el alo col-sm-4 quie e deci que cuando el amaño de en ana es in e io a 768 píxeles y supe io a 576, la celda ocupa á 4 colum- nas, cuando po de ec o, es e núme o pod ía se 3 (col-3) pa a el es o de los casos. En nues o p oyec o, hemos usado es a p opiedad pa a epa i de mane a p opo cional el espacio que debían de ocupa los bo ones de e y eno a la cla e de usua io. Se decidió que los bo ones ocupa an 3 columnas cada uno y la cla e 6 ( igu a 6.8). Figu a 6.8 - El amaño que ocupa cada elemen o se co esponde con el asignado El es o de uso de Boo s ap ue dedicado al cambio de es ilo de los elemen os y cambio en su compo amien o es é ico (ej. cuando se posicione el cu so sob e un bo ón, su colo cambia). 48 Memo ia Una ez es u o e minado el código, llegó el momen o de empeza a esc ibi es a me- mo ia, pa a lo que se necesi ó una p epa ación p e ia, ya que un documen o de es e calib e equie e conocimien os amplios sob e la ma e ia sob e la que se esc ibe, así como un buen en endimien o del p oceso de desa ollo. Repasé odos los pasos ealiza- dos has a ese pun o, ecabé in o mación sob e los emas a a a y e isé el código. Du- an e la esc i u a, leí en a ias ocasiones el código que había desa ollado, con el in del cub i la desc ipción de és e de la mejo mane a posible. Así como el de mi compañe o, pa a asegu a me de no inclui ninguna a i mación e ónea sob e el p oyec o. 9.2 Ad ián Sal ado C espo Análisis del p oyec o Pa a es a e apa inicial, mi a ea consis ió p incipalmen e en ap ende sob e cómo un- ciona el e ique ado de da os pa a el en enamien o de in eligencias a i iciales. También in es igué sob e sis emas de e ique ados de da os en la ac ualidad, descu- b iendo que exis ían se icios de CAPTCHA que ealizaban una unción de e ique ado de da os In es igación de se icios de CAPTCHA Du an e es a e apa comencé analizando o os se icios de CAPTCHA. Pa a ello p ime o es u e leyendo la documen ación online y algunos a ículos sob e las di e en es e sio- nes que se habían publicado de los se icios que in es igué ambién isioné algunas de- mos pa a e como un desa ollado podía in eg a es os se icios en su aplicación web y po úl imo diseñe una página con HTML que con enía un o mula io con el que pude u iliza yo mismo el componen e de es os se icios y comp oba cómo e a el unciona- mien o al ca ga la página, solici a , ecibi el e o y p ocesa las espues as o la in o - mación que en ía sob e el usua io. En e ellos cabe des aca eCAPTCHA, al se uno de los se icios más u ilizados, pe o ambién in es igué ace ca de o os se icios, como F iendlyCAPTCHA. El esul ado de es a in es igación ue ap ende como la pe sona que desa olla una apli- cación web puede inclui de o ma sencilla el componen e pa a mos a los e os y como ese componen e esponde a la aplicación. Sis ema colabo a i o pa a el e ique ado de da os 49 In es igación de he amien as pa a desa olla el se icio de CAPTCHA En es a e apa del p oyec o decidimos que yo me enca ga ía p incipalmen e del backend. Una ez di idido el abajo de es a mane a in es igué que ecnologías pod ía emplea pa a desa olla el se ido . Ac ualmen e hay múl iples opciones, hice algunas p uebas con Node.js y Apache, pe o inalmen e me decidí po Django. An es de empeza con el diseño del se icio, ealice una se ie de p uebas de cómo se ealizaba el despliegue y la con igu ación inicial de un se ido con Django. Una ez he- cho es o Django o ece una consola de usua io con la que puedes in e ac ua con el se ido , con ella in es igue cómo uncionaba el sis ema de modelos. Una ez decidido la ecnología pa a el se ido comencé a diseña en papel la es uc u a que end ía la base de da os y que uncionalidades necesi a ía pa a la comunicación con el clien e. Implemen ación y es eo Es a ue la e apa de desa ollo del se ido . Todo mi abajo es u o dedicado a la pa e del backend, implemen a los modelos y las in e aces de unciones pa a las pe iciones del clien e. El p ime p o o ipo e a una e sión sencilla, consis ía en una base de da os que almace- naba solo los ex os con un núme o ijo de opciones po e o sin ag upa po colección y una e sión inicial de la in e az de unciones pa a el componen e del e o. El siguien e paso ue añadi el modelo de colecciones, además de modi ica los mé odos que emplea el componen e pa a añadi el il ado po palab as cla e y a e i a y, las uncionalidades de ca ga y desca ga colecciones. Después, con inué con la ges ión de usua ios, es de- ci , las unciones de egis o, inicia sesión y c ea la cla e de usua io. La pa e de es eo que p incipalmen e se en elazaba con la implemen ación consis ió en ealiza las comp obaciones necesa ias de que las uncionalidades que es aba aña- diendo se compo aban de o ma co ec a. Po úl imo, cuando la implemen ación ya es u o e minada ealicé más p uebas de ca- sos de uso con la e sión uncional del se icio de CAPTCHA y ambién ap o eché es a ase pa a busca en edes sociales ex os eales que pode añadi a la base de da os p incipalmen e en comp oba el co ec o uncionamien o del se ido y sus espues as a las pe iciones del clien e. 50 Esc i u a de la memo ia Finalmen e, nos eunimos pa a de ini la es uc u a que end ía la memo ia y epa imos las di e en es pa es pa a su edacción. Mi abajo en la memo ia consis ió p incipalmen e en esc ibi los apa ados de esumen. En el apa ado de p elimina es, edac é las secciones de Bene icios adicionales de los CAPTCHA y los esul ados de mi in es igación sob e el se icio de eCap cha, aunque espec o a la in o mación que ob u e sob e F iendlyCAPTCHA no conside é inclui la en la memo ia ya que e a un sis ema muy simila a la e sión es de eCap cha. Finalmen e, pa a el apa ado de a qui ec u a y el capí ulo sob e el diseño del backend, me enca gué de ealiza la edacción y las cap u as de pan alla necesa ias pa a las igu as. Sis ema colabo a i o pa a el e ique ado de da os 51 10 Bibliog a ía [1] «Wha Is Fake Accoun C ea ion and how o p e en i »: h ps://www.pe ime e x.com/solu ions-by- h ea / ake-accoun -c ea ion/ [2] «Wha Does CAPTCHA Mean?»: h ps://www.impe a.com/lea n/applica ion- secu i y/wha -is-cap cha/ [3] « eCAPTCHA»: h ps://www.google.com/ ecap cha/abou / [4] «De elope Guide»: h ps://docs.hcap cha.com [5] «HTML: Lenguaje de e ique as de hipe ex o»: h ps://de elope .mozilla.o g/es/docs/Web/HTML [6] «CSS»: h ps://de elope .mozilla.o g/es/docs/Web/CSS [7] «T abajando con JSON»: h ps://de elope .mozilla.o g/es/docs/Lea n/Ja aSc ip /Objec s/JSON [8] «HTTP»: h ps://de elope .mozilla.o g/es/docs/Web/HTTP [9] «In oducción - Re e encia de la API Web»: h ps://de elope .mozilla.o g/es/docs/Web/API/Documen _Objec _Model/In oduc ion [10] «Abou Pyh on»: h ps://www.py hon.o g/abou / [11] «Ace ca de Ja aSc ip » h ps://de elope .mozilla.o g/es/docs/Web/Ja aSc ip /Abou _Ja aSc ip [12] «The web amewo k o pe ec ionis s wi h deadlines.»: h ps://www.djangop ojec .com/ [13] «Abou SQLi e»: h ps://www.sqli e.o g/abou .h ml. [14] «Django Widge Tweaks»: h ps://pypi.o g/p ojec /django-widge - weaks/ [15] «Ge s a ed wi h Boo s ap»: h ps://ge boo s ap.com/docs/5.2/ge ing- s a ed/in oduc ion/ [16] «Abou Gi »: h ps://gi -scm.com/abou [17] «SQLi e Viewe »: h ps://ma ke place. isuals udio.com/i ems?i emName=qw el.sqli e- iewe 52 [18] «Comma-sepa a ed alues - RFC 4180 and MIME s anda ds»: h ps://en.wikipedia.o g/wiki/Comma- sepa a ed_ alues#RFC_4180_and_MIME_s anda ds [19] T. N. Ninja, «Boo s ap 5 Tu o ial»: h ps://www.you ube.com/playlis ?lis =PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR