https://wikis.fdi.ucm.es/ELP/api.php?action=feedcontributions&user=OscarC&feedformat=atomFdIwiki ELP - Contribuciones del usuario [es]2024-03-28T20:17:32ZContribuciones del usuarioMediaWiki 1.23.4//wikis.fdi.ucm.es/ELP/TIS_Brief_Me_GDPRTIS Brief Me GDPR2021-02-11T21:04:08Z<p>OscarC: /* Referencias */</p>
<hr />
<div>[https://agonsant.github.io/brief-me-gdpr/ BRIEF ME GDPR] es un [https://es.wikipedia.org/wiki/Componentes_web Web Component] reutilizable y agnóstico a la tecnología web que, mediante un modelo de datos JSON, muestre al usuario la política de gestión de datos del mismo por parte de la empresa de manera usable y entendible. <br />
<br />
== Autores del TIS ==<br />
<br />
* Haroon Sammaraie<br />
* Miriam Patricia Choy Castillo<br />
* Maikel Jesús Spranger Hierro<br />
* Oscar Canive Huguet<br />
* Alejandro Rodríguez Calzada<br />
* Alejandro González Santiago<br />
<br />
== Problema a solucionar ==<br />
<br />
Desde que cambió la [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018], las páginas web estaban obligadas a mostrar a los usuarios que datos iban a coger, como los iban a usar y mostrarles todos sus derechos, además de como ejercerlos. <br />
<br />
Ante esto, muchas páginas optaron por usar plantillas de eterna longitud y un texto jurídico difícil de interpretar que no hacían mas que complicar su lectura a los usuarios.<br />
<br />
Este punto impide que se cumpla el '''Derecho a la Transparencia''' que se está incluyendo en la nueva ley de GDPR <br />
<br />
Aquí es donde la idea de Brief Me GDPR surge, facilitar a las páginas una manera de mostrar toda la información relacionada con tus datos de manera resumida y de fácil lectura para humanos. <br />
<br />
Además de esto, construye unos accesos directos para que el usuario a golpe de botón pueda ejercer sus derechos de manera más sencilla.<br />
<br />
== Que nos proporciona un Web Component ==<br />
<br />
Un [https://es.wikipedia.org/wiki/Componentes_web Web Component] es un conjunto de estándares web que nos permiten:<br />
<br />
* Encapsular el contexto de estilos CSS del DOM mediante lo que se conoce como '''Shadow DOM'''<br />
* Definir nuestras propias etiquetas HTML que el navegador sepa interpretar mediante conocidos como '''Custom Elements'''<br />
* Importar elementos como módulos gracias a los '''ES Modules'''<br />
* Crear templates reutilizables mediante las '''HTML Templates'''.<br />
<br />
Gracias a estos estándares podemos crear elementos de interfaz UI reutilizables en cualquier entorno web, ya sea Angular, React o Wordpress.<br />
<br />
Para ayudarnos en la construcción, la librería utilizada es '''[https://lit-element.polymer-project.org/ lit-element]'''<br />
<br />
== Que funcionalidades tiene Brief Me GDPR ==<br />
<br />
El componente tiene 4 funcionalidades principales:<br />
<br />
* Proporciona al usuario la información sobre el tipo de datos que se recogen en la página web donde esté navegando.<br />
<br />
[[Archivo:Example-brief-me-gdpr.png|400px]]<br />
<br />
* Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-use-data.png|400px]]<br />
<br />
* Permite al usuario ejercer todos sus derechos a golpe de click.<br />
<br />
[[Archivo:Example-brief-me-gdpr-manage-your-data.png|400px]]<br />
<br />
* Informa que medidas toma la empresa para proteger tus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-protect-data.png|400px]]<br />
<br />
<br />
== Como puedo usar Brief Me GDPR ==<br />
<br />
Para usar nuestro componente BRIEFME tenemos debemos hacer lo siguiente:<br />
<br />
'''1. Instalación de los paquetes necesarios'''<br />
<br />
<pre>npm i brief-me-gdpr</pre><br />
<br />
'''2. Inyectamos el tag HTML en nuestra Web'''<br />
<br />
<pre><brief-me-gdpr></brief-me-gdpr></pre><br />
<br />
'''3. Nos aseguramos que tenemos el módulo del componente importado'''<br />
<br />
<pre><script type="module" src="./node_modules/brief-me-gdpr/brief-me-gdpr.js"></script></pre><br />
<br />
'''4.Configuramos los atributos como Objetos JS:'''<br />
<br />
<pre>customElements.whenDefined('brief-me-gdpr').then(wc => {<br />
gdprComponent = document.getElementById('example');<br />
gdprComponent.user = [<br />
{ title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' },<br />
{ title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'},<br />
{ title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' },<br />
{ title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' },<br />
{ title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' },<br />
{ title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' }<br />
];<br />
gdprComponent.usage = [<br />
{ title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' },<br />
{ title: 'Comercial', iconURL: '/brief-me-gdpr/assets/comercial.png', description: 'We use some of your data for commercial purposes, such us offer you a filtered product' },<br />
{ title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' }<br />
];<br />
<br />
gdprComponent.protection = [<br />
{ title: 'Data Protection Officer', iconURL: '/brief-me-gdpr/assets/officer.png', description: 'A DPO is responsible for overseeing the data protection approach, strategy, and its implementation' },<br />
{ title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'},<br />
{ title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' }<br />
];<br />
gdprComponent.management = [<br />
{ title: 'Access', action: (ev) => console.log('User has clicked on Access')},<br />
{ title: 'Modify', action: (ev) => console.log('User has clicked on Modify')},<br />
{ title: 'Erase', action: (ev) => console.log('User has clicked on Erase')},<br />
{ title: 'Port', action: (ev) => console.log('User has clicked on Portability')},<br />
{ title: 'Forget', action: (ev) => console.log('User has clicked on Forget')},<br />
{ title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')},<br />
{ title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')}<br />
]<br />
})</pre><br />
<br />
== Licencia ==<br />
<br />
* El código del componente web está construido bajo una [https://es.wikipedia.org/wiki/Licencia_MIT licencia MIT].<br />
* Todos los recursos artísticos (archivos en las carpetas qa/, infografía/, diseño/ y src/assets/) se distribuyen bajo la licencia internacional [https://es.wikipedia.org/wiki/Licencias_Creative_CommonsCreative Commons Attribution 4.0] de Etimática FDI.<br />
<br />
== Referencias ==<br />
<br />
* [http://wikis.fdi.ucm.es/ELP/GDPR GDPR]<br />
* [https://github.com/agonsant/brief-me-gdpr/blob/main/infography/infography-es.pdf Infografía Brief Me GDPR ES-es]<br />
* [https://github.com/agonsant/brief-me-gdpr/blob/main/infography/infography-en.pdf Infografía Brief Me GDPR EN-gb]<br />
<br />
==Enlaces Externos==<br />
<br />
* [https://github.com/agonsant/brief-me-gdpr Repositorio Github de Brief Me GDPR]<br />
* [https://www.webcomponents.org/ Página oficial de Web Components]<br />
* [https://lit-element.polymer-project.org/ Librería lit-element]<br />
* [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018]</div>OscarC//wikis.fdi.ucm.es/ELP/TIS_Brief_Me_GDPRTIS Brief Me GDPR2021-02-11T21:01:54Z<p>OscarC: </p>
<hr />
<div>[https://agonsant.github.io/brief-me-gdpr/ BRIEF ME GDPR] es un [https://es.wikipedia.org/wiki/Componentes_web Web Component] reutilizable y agnóstico a la tecnología web que, mediante un modelo de datos JSON, muestre al usuario la política de gestión de datos del mismo por parte de la empresa de manera usable y entendible. <br />
<br />
== Autores del TIS ==<br />
<br />
* Haroon Sammaraie<br />
* Miriam Patricia Choy Castillo<br />
* Maikel Jesús Spranger Hierro<br />
* Oscar Canive Huguet<br />
* Alejandro Rodríguez Calzada<br />
* Alejandro González Santiago<br />
<br />
== Problema a solucionar ==<br />
<br />
Desde que cambió la [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018], las páginas web estaban obligadas a mostrar a los usuarios que datos iban a coger, como los iban a usar y mostrarles todos sus derechos, además de como ejercerlos. <br />
<br />
Ante esto, muchas páginas optaron por usar plantillas de eterna longitud y un texto jurídico difícil de interpretar que no hacían mas que complicar su lectura a los usuarios.<br />
<br />
Este punto impide que se cumpla el '''Derecho a la Transparencia''' que se está incluyendo en la nueva ley de GDPR <br />
<br />
Aquí es donde la idea de Brief Me GDPR surge, facilitar a las páginas una manera de mostrar toda la información relacionada con tus datos de manera resumida y de fácil lectura para humanos. <br />
<br />
Además de esto, construye unos accesos directos para que el usuario a golpe de botón pueda ejercer sus derechos de manera más sencilla.<br />
<br />
== Que nos proporciona un Web Component ==<br />
<br />
Un [https://es.wikipedia.org/wiki/Componentes_web Web Component] es un conjunto de estándares web que nos permiten:<br />
<br />
* Encapsular el contexto de estilos CSS del DOM mediante lo que se conoce como '''Shadow DOM'''<br />
* Definir nuestras propias etiquetas HTML que el navegador sepa interpretar mediante conocidos como '''Custom Elements'''<br />
* Importar elementos como módulos gracias a los '''ES Modules'''<br />
* Crear templates reutilizables mediante las '''HTML Templates'''.<br />
<br />
Gracias a estos estándares podemos crear elementos de interfaz UI reutilizables en cualquier entorno web, ya sea Angular, React o Wordpress.<br />
<br />
Para ayudarnos en la construcción, la librería utilizada es '''[https://lit-element.polymer-project.org/ lit-element]'''<br />
<br />
== Que funcionalidades tiene Brief Me GDPR ==<br />
<br />
El componente tiene 4 funcionalidades principales:<br />
<br />
* Proporciona al usuario la información sobre el tipo de datos que se recogen en la página web donde esté navegando.<br />
<br />
[[Archivo:Example-brief-me-gdpr.png|400px]]<br />
<br />
* Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-use-data.png|400px]]<br />
<br />
* Permite al usuario ejercer todos sus derechos a golpe de click.<br />
<br />
[[Archivo:Example-brief-me-gdpr-manage-your-data.png|400px]]<br />
<br />
* Informa que medidas toma la empresa para proteger tus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-protect-data.png|400px]]<br />
<br />
<br />
== Como puedo usar Brief Me GDPR ==<br />
<br />
Para usar nuestro componente BRIEFME tenemos debemos hacer lo siguiente:<br />
<br />
'''1. Instalación de los paquetes necesarios'''<br />
<br />
<pre>npm i brief-me-gdpr</pre><br />
<br />
'''2. Inyectamos el tag HTML en nuestra Web'''<br />
<br />
<pre><brief-me-gdpr></brief-me-gdpr></pre><br />
<br />
'''3. Nos aseguramos que tenemos el módulo del componente importado'''<br />
<br />
<pre><script type="module" src="./node_modules/brief-me-gdpr/brief-me-gdpr.js"></script></pre><br />
<br />
'''4.Configuramos los atributos como Objetos JS:'''<br />
<br />
<pre>customElements.whenDefined('brief-me-gdpr').then(wc => {<br />
gdprComponent = document.getElementById('example');<br />
gdprComponent.user = [<br />
{ title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' },<br />
{ title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'},<br />
{ title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' },<br />
{ title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' },<br />
{ title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' },<br />
{ title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' }<br />
];<br />
gdprComponent.usage = [<br />
{ title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' },<br />
{ title: 'Comercial', iconURL: '/brief-me-gdpr/assets/comercial.png', description: 'We use some of your data for commercial purposes, such us offer you a filtered product' },<br />
{ title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' }<br />
];<br />
<br />
gdprComponent.protection = [<br />
{ title: 'Data Protection Officer', iconURL: '/brief-me-gdpr/assets/officer.png', description: 'A DPO is responsible for overseeing the data protection approach, strategy, and its implementation' },<br />
{ title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'},<br />
{ title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' }<br />
];<br />
gdprComponent.management = [<br />
{ title: 'Access', action: (ev) => console.log('User has clicked on Access')},<br />
{ title: 'Modify', action: (ev) => console.log('User has clicked on Modify')},<br />
{ title: 'Erase', action: (ev) => console.log('User has clicked on Erase')},<br />
{ title: 'Port', action: (ev) => console.log('User has clicked on Portability')},<br />
{ title: 'Forget', action: (ev) => console.log('User has clicked on Forget')},<br />
{ title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')},<br />
{ title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')}<br />
]<br />
})</pre><br />
<br />
== Licencia ==<br />
<br />
* El código del componente web está construido bajo una [https://es.wikipedia.org/wiki/Licencia_MIT licencia MIT].<br />
* Todos los recursos artísticos (archivos en las carpetas qa/, infografía/, diseño/ y src/assets/) se distribuyen bajo la licencia internacional [https://es.wikipedia.org/wiki/Licencias_Creative_CommonsCreative Commons Attribution 4.0] de Etimática FDI.<br />
<br />
== Referencias ==<br />
<br />
* [http://wikis.fdi.ucm.es/ELP/GDPR GDPR]<br />
<br />
==Enlaces Externos==<br />
<br />
* [https://github.com/agonsant/brief-me-gdpr Repositorio Github de Brief Me GDPR]<br />
* [https://www.webcomponents.org/ Página oficial de Web Components]<br />
* [https://lit-element.polymer-project.org/ Librería lit-element]<br />
* [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018]</div>OscarC//wikis.fdi.ucm.es/ELP/TIS_Brief_Me_GDPRTIS Brief Me GDPR2021-02-11T21:01:33Z<p>OscarC: </p>
<hr />
<div>{{#breadcrumb: }}<br />
<br />
[https://agonsant.github.io/brief-me-gdpr/ BRIEF ME GDPR] es un [https://es.wikipedia.org/wiki/Componentes_web Web Component] reutilizable y agnóstico a la tecnología web que, mediante un modelo de datos JSON, muestre al usuario la política de gestión de datos del mismo por parte de la empresa de manera usable y entendible. <br />
<br />
== Autores del TIS ==<br />
<br />
* Haroon Sammaraie<br />
* Miriam Patricia Choy Castillo<br />
* Maikel Jesús Spranger Hierro<br />
* Oscar Canive Huguet<br />
* Alejandro Rodríguez Calzada<br />
* Alejandro González Santiago<br />
<br />
== Problema a solucionar ==<br />
<br />
Desde que cambió la [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018], las páginas web estaban obligadas a mostrar a los usuarios que datos iban a coger, como los iban a usar y mostrarles todos sus derechos, además de como ejercerlos. <br />
<br />
Ante esto, muchas páginas optaron por usar plantillas de eterna longitud y un texto jurídico difícil de interpretar que no hacían mas que complicar su lectura a los usuarios.<br />
<br />
Este punto impide que se cumpla el '''Derecho a la Transparencia''' que se está incluyendo en la nueva ley de GDPR <br />
<br />
Aquí es donde la idea de Brief Me GDPR surge, facilitar a las páginas una manera de mostrar toda la información relacionada con tus datos de manera resumida y de fácil lectura para humanos. <br />
<br />
Además de esto, construye unos accesos directos para que el usuario a golpe de botón pueda ejercer sus derechos de manera más sencilla.<br />
<br />
== Que nos proporciona un Web Component ==<br />
<br />
Un [https://es.wikipedia.org/wiki/Componentes_web Web Component] es un conjunto de estándares web que nos permiten:<br />
<br />
* Encapsular el contexto de estilos CSS del DOM mediante lo que se conoce como '''Shadow DOM'''<br />
* Definir nuestras propias etiquetas HTML que el navegador sepa interpretar mediante conocidos como '''Custom Elements'''<br />
* Importar elementos como módulos gracias a los '''ES Modules'''<br />
* Crear templates reutilizables mediante las '''HTML Templates'''.<br />
<br />
Gracias a estos estándares podemos crear elementos de interfaz UI reutilizables en cualquier entorno web, ya sea Angular, React o Wordpress.<br />
<br />
Para ayudarnos en la construcción, la librería utilizada es '''[https://lit-element.polymer-project.org/ lit-element]'''<br />
<br />
== Que funcionalidades tiene Brief Me GDPR ==<br />
<br />
El componente tiene 4 funcionalidades principales:<br />
<br />
* Proporciona al usuario la información sobre el tipo de datos que se recogen en la página web donde esté navegando.<br />
<br />
[[Archivo:Example-brief-me-gdpr.png|400px]]<br />
<br />
* Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-use-data.png|400px]]<br />
<br />
* Permite al usuario ejercer todos sus derechos a golpe de click.<br />
<br />
[[Archivo:Example-brief-me-gdpr-manage-your-data.png|400px]]<br />
<br />
* Informa que medidas toma la empresa para proteger tus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-protect-data.png|400px]]<br />
<br />
<br />
== Como puedo usar Brief Me GDPR ==<br />
<br />
Para usar nuestro componente BRIEFME tenemos debemos hacer lo siguiente:<br />
<br />
'''1. Instalación de los paquetes necesarios'''<br />
<br />
<pre>npm i brief-me-gdpr</pre><br />
<br />
'''2. Inyectamos el tag HTML en nuestra Web'''<br />
<br />
<pre><brief-me-gdpr></brief-me-gdpr></pre><br />
<br />
'''3. Nos aseguramos que tenemos el módulo del componente importado'''<br />
<br />
<pre><script type="module" src="./node_modules/brief-me-gdpr/brief-me-gdpr.js"></script></pre><br />
<br />
'''4.Configuramos los atributos como Objetos JS:'''<br />
<br />
<pre>customElements.whenDefined('brief-me-gdpr').then(wc => {<br />
gdprComponent = document.getElementById('example');<br />
gdprComponent.user = [<br />
{ title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' },<br />
{ title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'},<br />
{ title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' },<br />
{ title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' },<br />
{ title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' },<br />
{ title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' }<br />
];<br />
gdprComponent.usage = [<br />
{ title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' },<br />
{ title: 'Comercial', iconURL: '/brief-me-gdpr/assets/comercial.png', description: 'We use some of your data for commercial purposes, such us offer you a filtered product' },<br />
{ title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' }<br />
];<br />
<br />
gdprComponent.protection = [<br />
{ title: 'Data Protection Officer', iconURL: '/brief-me-gdpr/assets/officer.png', description: 'A DPO is responsible for overseeing the data protection approach, strategy, and its implementation' },<br />
{ title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'},<br />
{ title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' }<br />
];<br />
gdprComponent.management = [<br />
{ title: 'Access', action: (ev) => console.log('User has clicked on Access')},<br />
{ title: 'Modify', action: (ev) => console.log('User has clicked on Modify')},<br />
{ title: 'Erase', action: (ev) => console.log('User has clicked on Erase')},<br />
{ title: 'Port', action: (ev) => console.log('User has clicked on Portability')},<br />
{ title: 'Forget', action: (ev) => console.log('User has clicked on Forget')},<br />
{ title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')},<br />
{ title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')}<br />
]<br />
})</pre><br />
<br />
== Licencia ==<br />
<br />
* El código del componente web está construido bajo una [https://es.wikipedia.org/wiki/Licencia_MIT licencia MIT].<br />
* Todos los recursos artísticos (archivos en las carpetas qa/, infografía/, diseño/ y src/assets/) se distribuyen bajo la licencia internacional [https://es.wikipedia.org/wiki/Licencias_Creative_CommonsCreative Commons Attribution 4.0] de Etimática FDI.<br />
<br />
== Referencias ==<br />
<br />
* [http://wikis.fdi.ucm.es/ELP/GDPR GDPR]<br />
<br />
==Enlaces Externos==<br />
<br />
* [https://github.com/agonsant/brief-me-gdpr Repositorio Github de Brief Me GDPR]<br />
* [https://www.webcomponents.org/ Página oficial de Web Components]<br />
* [https://lit-element.polymer-project.org/ Librería lit-element]<br />
* [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018]</div>OscarC//wikis.fdi.ucm.es/ELP/TIS_Brief_Me_GDPRTIS Brief Me GDPR2021-02-11T20:58:21Z<p>OscarC: Página creada con «{{#breadcrumb: }} {{short description|Trabajo de Impacto Social que consta de la creación de un componente web para el cumplimiento del GDPR}} [https://agonsant.github.io...»</p>
<hr />
<div>{{#breadcrumb: }}<br />
{{short description|Trabajo de Impacto Social que consta de la creación de un componente web para el cumplimiento del GDPR}}<br />
<br />
[https://agonsant.github.io/brief-me-gdpr/ BRIEF ME GDPR] es un [https://es.wikipedia.org/wiki/Componentes_web Web Component] reutilizable y agnóstico a la tecnología web que, mediante un modelo de datos JSON, muestre al usuario la política de gestión de datos del mismo por parte de la empresa de manera usable y entendible. <br />
<br />
== Autores del TIS ==<br />
<br />
* Haroon Sammaraie<br />
* Miriam Patricia Choy Castillo<br />
* Maikel Jesús Spranger Hierro<br />
* Oscar Canive Huguet<br />
* Alejandro Rodríguez Calzada<br />
* Alejandro González Santiago<br />
<br />
== Problema a solucionar ==<br />
<br />
Desde que cambió la [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018], las páginas web estaban obligadas a mostrar a los usuarios que datos iban a coger, como los iban a usar y mostrarles todos sus derechos, además de como ejercerlos. <br />
<br />
Ante esto, muchas páginas optaron por usar plantillas de eterna longitud y un texto jurídico difícil de interpretar que no hacían mas que complicar su lectura a los usuarios.<br />
<br />
Este punto impide que se cumpla el '''Derecho a la Transparencia''' que se está incluyendo en la nueva ley de GDPR <br />
<br />
Aquí es donde la idea de Brief Me GDPR surge, facilitar a las páginas una manera de mostrar toda la información relacionada con tus datos de manera resumida y de fácil lectura para humanos. <br />
<br />
Además de esto, construye unos accesos directos para que el usuario a golpe de botón pueda ejercer sus derechos de manera más sencilla.<br />
<br />
== Que nos proporciona un Web Component ==<br />
<br />
Un [https://es.wikipedia.org/wiki/Componentes_web Web Component] es un conjunto de estándares web que nos permiten:<br />
<br />
* Encapsular el contexto de estilos CSS del DOM mediante lo que se conoce como '''Shadow DOM'''<br />
* Definir nuestras propias etiquetas HTML que el navegador sepa interpretar mediante conocidos como '''Custom Elements'''<br />
* Importar elementos como módulos gracias a los '''ES Modules'''<br />
* Crear templates reutilizables mediante las '''HTML Templates'''.<br />
<br />
Gracias a estos estándares podemos crear elementos de interfaz UI reutilizables en cualquier entorno web, ya sea Angular, React o Wordpress.<br />
<br />
Para ayudarnos en la construcción, la librería utilizada es '''[https://lit-element.polymer-project.org/ lit-element]'''<br />
<br />
== Que funcionalidades tiene Brief Me GDPR ==<br />
<br />
El componente tiene 4 funcionalidades principales:<br />
<br />
* Proporciona al usuario la información sobre el tipo de datos que se recogen en la página web donde esté navegando.<br />
<br />
[[Archivo:Example-brief-me-gdpr.png|400px]]<br />
<br />
* Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-use-data.png|400px]]<br />
<br />
* Permite al usuario ejercer todos sus derechos a golpe de click.<br />
<br />
[[Archivo:Example-brief-me-gdpr-manage-your-data.png|400px]]<br />
<br />
* Informa que medidas toma la empresa para proteger tus datos.<br />
<br />
[[Archivo:Example-brief-me-gdpr-how-we-protect-data.png|400px]]<br />
<br />
<br />
== Como puedo usar Brief Me GDPR ==<br />
<br />
Para usar nuestro componente BRIEFME tenemos debemos hacer lo siguiente:<br />
<br />
'''1. Instalación de los paquetes necesarios'''<br />
<br />
<pre>npm i brief-me-gdpr</pre><br />
<br />
'''2. Inyectamos el tag HTML en nuestra Web'''<br />
<br />
<pre><brief-me-gdpr></brief-me-gdpr></pre><br />
<br />
'''3. Nos aseguramos que tenemos el módulo del componente importado'''<br />
<br />
<pre><script type="module" src="./node_modules/brief-me-gdpr/brief-me-gdpr.js"></script></pre><br />
<br />
'''4.Configuramos los atributos como Objetos JS:'''<br />
<br />
<pre>customElements.whenDefined('brief-me-gdpr').then(wc => {<br />
gdprComponent = document.getElementById('example');<br />
gdprComponent.user = [<br />
{ title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' },<br />
{ title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'},<br />
{ title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' },<br />
{ title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' },<br />
{ title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' },<br />
{ title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' }<br />
];<br />
gdprComponent.usage = [<br />
{ title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' },<br />
{ title: 'Comercial', iconURL: '/brief-me-gdpr/assets/comercial.png', description: 'We use some of your data for commercial purposes, such us offer you a filtered product' },<br />
{ title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' }<br />
];<br />
<br />
gdprComponent.protection = [<br />
{ title: 'Data Protection Officer', iconURL: '/brief-me-gdpr/assets/officer.png', description: 'A DPO is responsible for overseeing the data protection approach, strategy, and its implementation' },<br />
{ title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'},<br />
{ title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' }<br />
];<br />
gdprComponent.management = [<br />
{ title: 'Access', action: (ev) => console.log('User has clicked on Access')},<br />
{ title: 'Modify', action: (ev) => console.log('User has clicked on Modify')},<br />
{ title: 'Erase', action: (ev) => console.log('User has clicked on Erase')},<br />
{ title: 'Port', action: (ev) => console.log('User has clicked on Portability')},<br />
{ title: 'Forget', action: (ev) => console.log('User has clicked on Forget')},<br />
{ title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')},<br />
{ title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')}<br />
]<br />
})</pre><br />
<br />
== Licencia ==<br />
<br />
* El código del componente web está construido bajo una [https://es.wikipedia.org/wiki/Licencia_MIT licencia MIT].<br />
* Todos los recursos artísticos (archivos en las carpetas qa/, infografía/, diseño/ y src/assets/) se distribuyen bajo la licencia internacional [https://es.wikipedia.org/wiki/Licencias_Creative_CommonsCreative Commons Attribution 4.0] de Etimática FDI.<br />
<br />
== Referencias ==<br />
<br />
* [http://wikis.fdi.ucm.es/ELP/GDPR GDPR]<br />
<br />
==Enlaces Externos==<br />
<br />
* [https://www.webcomponents.org/ Página oficial de Web Components]<br />
* [https://lit-element.polymer-project.org/ Librería lit-element]<br />
* [https://eur-lex.europa.eu/content/news/general-data-protection-regulation-GDPR-applies-from-25-May-2018.html?locale=es ley europea 25 mayo del 2018]</div>OscarC//wikis.fdi.ucm.es/ELP/Archivo:Example-brief-me-gdpr-how-we-protect-data.pngArchivo:Example-brief-me-gdpr-how-we-protect-data.png2021-02-11T20:52:36Z<p>OscarC: </p>
<hr />
<div></div>OscarC//wikis.fdi.ucm.es/ELP/Archivo:Example-brief-me-gdpr-how-we-use-data.pngArchivo:Example-brief-me-gdpr-how-we-use-data.png2021-02-11T20:52:22Z<p>OscarC: </p>
<hr />
<div></div>OscarC//wikis.fdi.ucm.es/ELP/Archivo:Example-brief-me-gdpr-manage-your-data.pngArchivo:Example-brief-me-gdpr-manage-your-data.png2021-02-11T20:52:05Z<p>OscarC: </p>
<hr />
<div></div>OscarC//wikis.fdi.ucm.es/ELP/Archivo:Example-brief-me-gdpr.pngArchivo:Example-brief-me-gdpr.png2021-02-11T20:47:55Z<p>OscarC: </p>
<hr />
<div></div>OscarC