TIS Brief Me GDPR

From FdIwiki ELP
Jump to: navigation, search

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.

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.

Example-brief-me-gdpr.png

  • Informa al usuario del fin sobre la recolección y sobre la protección de sus datos.

Example-brief-me-gdpr-how-we-use-data.png

  • Permite al usuario ejercer todos sus derechos a golpe de click.

Example-brief-me-gdpr-manage-your-data.png

  • Informa que medidas toma la empresa para proteger tus datos.

Example-brief-me-gdpr-how-we-protect-data.png


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.

Referencias

Enlaces Externos