Diferencia entre revisiones de «TIS Brief Me GDPR»
(→Referencias) |
|||
(Una revisión intermedia por el mismo usuario no mostrado) | |||
Línea 1: | Línea 1: | ||
− | |||
− | |||
[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. | [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. | ||
Línea 116: | Línea 114: | ||
* [http://wikis.fdi.ucm.es/ELP/GDPR GDPR] | * [http://wikis.fdi.ucm.es/ELP/GDPR GDPR] | ||
+ | * [https://github.com/agonsant/brief-me-gdpr/blob/main/infography/infography-es.pdf Infografía Brief Me GDPR ES-es] | ||
+ | * [https://github.com/agonsant/brief-me-gdpr/blob/main/infography/infography-en.pdf Infografía Brief Me GDPR EN-gb] | ||
==Enlaces Externos== | ==Enlaces Externos== |
Última revisión de 23:04 11 feb 2021
BRIEF ME GDPR es un 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.
Contenido
Autores del TIS
- Haroon Sammaraie
- Miriam Patricia Choy Castillo
- Maikel Jesús Spranger Hierro
- Oscar Canive Huguet
- Alejandro Rodríguez Calzada
- Alejandro González Santiago
Problema a solucionar
Desde que cambió la 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.
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.
Este punto impide que se cumpla el Derecho a la Transparencia que se está incluyendo en la nueva ley de GDPR
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.
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.
Que nos proporciona un Web Component
Un Web Component es un conjunto de estándares web que nos permiten:
- Encapsular el contexto de estilos CSS del DOM mediante lo que se conoce como Shadow DOM
- Definir nuestras propias etiquetas HTML que el navegador sepa interpretar mediante conocidos como Custom Elements
- Importar elementos como módulos gracias a los ES Modules
- Crear templates reutilizables mediante las HTML Templates.
Gracias a estos estándares podemos crear elementos de interfaz UI reutilizables en cualquier entorno web, ya sea Angular, React o Wordpress.
Para ayudarnos en la construcción, la librería utilizada es lit-element
Que funcionalidades tiene Brief Me GDPR
El componente tiene 4 funcionalidades principales:
- Proporciona al usuario la información sobre el tipo de datos que se recogen en la página web donde esté navegando.
- Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.
- Permite al usuario ejercer todos sus derechos a golpe de click.
- Informa que medidas toma la empresa para proteger tus datos.
Como puedo usar Brief Me GDPR
Para usar nuestro componente BRIEFME tenemos debemos hacer lo siguiente:
1. Instalación de los paquetes necesarios
npm i brief-me-gdpr
2. Inyectamos el tag HTML en nuestra Web
<brief-me-gdpr></brief-me-gdpr>
3. Nos aseguramos que tenemos el módulo del componente importado
<script type="module" src="./node_modules/brief-me-gdpr/brief-me-gdpr.js"></script>
4.Configuramos los atributos como Objetos JS:
customElements.whenDefined('brief-me-gdpr').then(wc => { gdprComponent = document.getElementById('example'); gdprComponent.user = [ { title: 'Name and Surname', iconURL: '/brief-me-gdpr/assets/user-info.png' }, { title: 'Location',iconURL: '/brief-me-gdpr/assets/location.png'}, { title: 'Phone Number', iconURL: '/brief-me-gdpr/assets/phone-number.png' }, { title: 'Email', iconURL: '/brief-me-gdpr/assets/email.png' }, { title: 'Financials Info', iconURL: '/brief-me-gdpr/assets/financial.png' }, { title: 'Working Information', iconURL: '/brief-me-gdpr/assets/job.png' } ]; gdprComponent.usage = [ { title: 'Web Operation', iconURL: '/brief-me-gdpr/assets/web.png', description: 'We use some of your data for our web proper operation' }, { 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' }, { title: 'Analytics', iconURL: '/brief-me-gdpr/assets/analytics.png', description: 'We improve our website by seeing how you browse' } ]; gdprComponent.protection = [ { 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' }, { title: 'Security', iconURL: '/brief-me-gdpr/assets/security.png', description: 'We follow all security protocols and keep our systems updated, eliminating vulnerabilities'}, { title: 'Encryption', iconURL: '/brief-me-gdpr/assets/encryption.png', description: 'We store your encrypted data in an independent database' } ]; gdprComponent.management = [ { title: 'Access', action: (ev) => console.log('User has clicked on Access')}, { title: 'Modify', action: (ev) => console.log('User has clicked on Modify')}, { title: 'Erase', action: (ev) => console.log('User has clicked on Erase')}, { title: 'Port', action: (ev) => console.log('User has clicked on Portability')}, { title: 'Forget', action: (ev) => console.log('User has clicked on Forget')}, { title: 'Oppose', action: (ev) => console.log('User has clicked on Oppose')}, { title: 'Restrict its usage', action: (ev) => console.log('User has clicked on Restrict')} ] })
Licencia
- El código del componente web está construido bajo una licencia MIT.
- Todos los recursos artísticos (archivos en las carpetas qa/, infografía/, diseño/ y src/assets/) se distribuyen bajo la licencia internacional Commons Attribution 4.0 de Etimática FDI.