Blog
Mensaje aceptar cookies para cumplir con la Ley General de Protección de Datos (LGPD)
Autor: Manuel E. Toledo | Comentarios: 0Si tu sitio utiliza cookies de las que hay que avisar al usuario, no basta con añadir un párrafo en el texto legal de tu política de privacidad. La ley obliga a que este aviso sea claramente visible, aunque no indica la forma de hacerlo.
La mayoría de sitios han optado por incluir un mensaje de texto en una zona claramente visible, como por ejemplo Google, que lo muestra justo encima del primer resultado de búsqueda:
Las cookies son simples ficheros de texto en plano que no contienen absolutamente ningún programa. No se ejecutan ni pueden infiltrarse en un ordenador, pero la ley se cumple nos guste o no.
Estas cookies, o galletas en castellano, se usan para hacer carritos de compra en tiendas online, almacenando los productos que estas comprando. A veces se usan para asegurar una sesión, evitando gracias a ellas que otros usuarios suplanten la identidad de otros. Más que un peligro para el usuario, que no lo son, son una gran ayuda para todos.
Con un sencillo código HTML, un par de estilos CSS y un par de funciones Javascript resolvemos el problema. Veamos como:
Javascript
<script>
/* ésto comprueba la localStorage si ya tiene la variable guardada */
function compruebaAceptaCookies() {
if(localStorage.aceptaCookies != 'true'){
cajacookies.style.display = 'block';
}
}
/* aquí guardamos la variable de que se ha
aceptado el uso de cookies así no mostraremos
el mensaje de nuevo */
function aceptarCookies() {
localStorage.aceptaCookies = 'true';
cajacookies.style.display = 'none';
}
/* ésto se ejecuta cuando la web está cargada */
$(document).ready(function () {
compruebaAceptaCookies();
});
</script>
Ésto de aquí arriba lo ponemos donde queramos. Necesitaremos jQuery ya incluido en la cabecera de la web. Me remito a la página oficial para incluirlo si es que no lo tienes ya http://jquery.com/ puedes poner uno de los CDN para hacerlo más fácil desde la web https://code.jquery.com/ por ejemplo añadiendo en el HEAD lo siguiente:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head>
El código HTML
La caja donde se muestra el mensaje, la puedes poner donde quieras porque luego le daremos estilo y la pondremos fija arriba o abajo
<div id="cajacookies"> <p><button onclick="aceptarCookies()" class="pull-right"><i class="fa fa-times"></i> Aceptar y cerrar éste mensaje</button> Éste sitio web usa cookies, si permanece aquí acepta su uso. Puede leer más sobre el uso de cookies en nuestra <a href="politica.html">política de privacidad</a>. </p> </div>
Estilos CSS
El código CSS para el estilo de la caja del mensaje puede ser como este
#cajacookies {
display: none;
box-shadow: 0px 0px 5px 5px #808080;
background-color: white;
color: black;
padding: 10px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: 0px;
position: fixed;
top: 0px;
width: 100%;
}
#cajacookies button {
color: black;
}
Cómo ver la información de cookies, localStorage, etc...
En Firefox o Chrome se hace dándole con el botón derecho a la página, y click en inspeccionar página web. Deberías de ver algo parecido a la imagen siguiente:
Su Comentario:
Deje aquí su comentario acerca de este artículo...
Otros artículos del blog
¿Cómo crear una API REST con CodeIgniter?
¿Cómo redimensionar imágenes con CodeIgniter?
¿Qué documentos necesitas para solicitar la ayuda como emigrante retornado?
¿Qué es y para qué sirve un archivo robots.txt?
Adapta tu sitio web a la nueva normativa sobre cookies
Atributo download HTML5 para descargar archivos del servidor mediante enlaces
Botón redondeado con CSS
Bucle para recibir todas las variables por POST en PHP
Carga o upload de archivos con CodeIgniter
Columnas múltiples con CSS3
Como evitar la inyección SQL en PHP
Cómo optimizar la cabecera de una página web para SEO: guía avanzada y completa
Cómo optimizar la etiqueta de título para atraer más tráfico de Google
Como puedo abrir puertos en mi router para acceder remotamente a mi ordenador personal
Contador de caracteres con JQuery
Copias de seguridad avanzadas para bases de datos MySQL
Creando fácilmente imágenes de relleno para tus prototipos
Crear un sticky desplegable en la web
Detectar el sistema operativo, navegador y versión del cliente
Diseño y desarrollo web a la medida
Ejecutar script automáticamente con Cron en Linux
El elemento meter HTML5
El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
El nuevo elemento <picture> de HTML5 para crear imágenes responsive
Elementos fundamentales para trabajar con Codeingniter
Envío de correos o emails con CodeIgniter, guía rápida
Función para extraer la extensión de un archivo con PHP
Guía rápida sobre el elemento br en HTML
Guía rápida sobre el elemento p en HTML
Guía rápida sobre los bordes en CSS
La etiqueta meta viewport en html5
La relación entre el contenido extenso y el convencimiento del usuario
Las fuentes de Google Font para nuestra web y efectos sobre nuestras fuentes
Lo bueno y lo malo del SEO
Los helpers en CodeIgniter para definir nuestras funciones
Mensaje aceptar cookies para cumplir con la Ley General de Protección de Datos (LGPD)
Meta tags de HTML
Múltiples bordes en un contenedor con CSS
Script para automatizar backups de MySQL en servidores Windows
Streams en PHP
Trucos y ejemplos de configuración del archivo htaccess de Apache
Uso de las páginas de error 404 como soporte estratégico de contenidos