Pequeño código para resolver la ley de cookies en tu web, versión 1.2

cookie

Esta versión incluye mejoras:
– Si la política de cookies se acepta, el DIV de “política” de cookies se oculta para sesiones siguientes.
– Se ha introducido algunos elementos responsive para facilitar su visión en versiones móvil de webs.

España es especialmente absurda en su legislación de internet. Absurda o excesivamente garantista. Existe una legislación explícita de cookies en la UE, que en España es de la más exhaustiva (nos va la sobrelegislación en casi cualquier ámbito).

La ley de cookies es una especie de tortura para webmasters ya que cualquier web requiere cookies para su funcionamiento ordinario, desde cookies para seleccionar que tipo de plantilla prefiere el usuario, a cookies para las estadísticas de navegación. Algunas cookies pueden tener un uso que podemos considerar inapropiado o que atente nuestro anonimato y aprovechar información para realizar publicidad que utilice nuestros datos de navegación. Pero independientemente que en tu web no utilices este tipo de cookies has de informar de ellas.

Por suerte la ley no es especialmente restrictiva en la forma de informar y aceptar cookies y permite el consentimiento implícito siempre que el aviso sea visible, aparezca al usuario que aún no haya hecho la aceptación y se le informe de como tratar las cookies que le estamos instalando y que cookies estamos instalando y su utilidad y funcionalidad.

Lo cuál nos permite soluciones técnicas sencillas, que podemos instalar en cualquier web. Para WordPress hay algunos plugins, pero prefiero no quedarme en soluciones “justo para un tipo de web”, sino libero este pequeño código que nos permite resolverlo para cualquier web.

El código tiene tres partes y se ha de desarrollar una página donde expondremos nuestra política de cookies.

La primera parte es un código JavaScript que podemos incluir entre el código HEAD de nuestra página web, o mejor aún, incluirlo en los ficheros .js que nuestra web utiliza.

<!-- SCRIPT CONTROL DE COOKIES -->
<script type="text/javascript">
function controlcookies() {
         // si variable no existe se crea (al clicar en Aceptar)
    localStorage.controlcookie = (localStorage.controlcookie || 0);

    localStorage.controlcookie++; // incrementamos cuenta de la cookie
    cookie1.style.display='none'; // Esconde la política de cookies
}
</script>

La segunda parte incluye un código CSS que podemos variar para adaptarlo a la estética de nuestro portal y que hace la animación del aviso. He hecho especialmente complejo este código incluyendo algunas funcionalidades de animación de HTML5 pero cualquier webmaster podrá adaptarlo de forma sencilla. Este código también lo incluiremos en el HEAD de la página o bien, mejor, en el CSS de nuestra web.

<!--- Codigo para la política de cookies-->

 
<style type="text/css">
 
/* CSS para la animación y localización de los DIV de cookies */
 
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@-webkit-keyframes desaparecer /* Safari and Chrome */
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
 
@-webkit-keyframes aparecer /* Safari and Chrome */
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:43px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size: 1.2em;
	clear:both;
        font-weight: strong;
color: #333;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition: bottom 1s;
-webkit-transition:bottom 1s; /* Safari */
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
z-index:999999999;
}
 
.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
}
 
/* Fin del CSS para cookies */
 
</style>

Por último incluiremos este pequeño código en el BODY para tener la marquesina flotante para indicar nuestra política de cookies.

<!--Código HTML de la política de cookies -->
 
<!--La URL incluida es la parte que se ha de modificar -->
 
<div class="cookiesms" id="cookie1">
Esta web utiliza cookies, puedes ver nuestra  <a href="tu-url-donde-explicas-la-politica-de-cookies">la política de cookies, aquí</a> 
Si continuas navegando estás aceptándola
<button onclick="controlcookies()">Aceptar</button>
<div  class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de cookies + </div>
</div>
<script type="text/javascript">
if (localStorage.controlcookie>0){ 
document.getElementById('cookie1').style.bottom = '-50px';
}
</script>
 
<!-- Fin del código de cookies --->

Tienes que crear una página a donde apuntar la política de cookies donde informas de las cookies que estás utilizando. La mía por ejemplo, es esta.

Otras formas de meter el código

Para webs que utilicen un CMS como WordPress podemos estar variando la plantilla de tanto en tanto y modificar los diferentes CSS, JS y tocar el fichero PHP de turno para meter el código puede ser muy engorroso, una forma sencilla de conseguir que cualquier plantilla siempre incluya nuestro código de cookies es copiar los tres elementos de código y colocar un Widget de texto libre/html con él en una posición permitida por la plantilla. En Joomla podemos hacerlo con un plugin de HTML que ubicamos en una posición que cargue correctamente, en este caso lo copiaremos y pegaremos sin tener ningún editor activado y si es posible con el usuario de SuperAdmin para evitar problemas.

Badget “comedor de galletas”

En el caso de mi blog hay un pequeño “extra”, si aceptas las cookies permanentemente tendrás un badget de comedor de galletas en la parte derecha de mi blog. Es un pequeño ensayo de “gamificación” que aún estoy perpretando.

Web semántica ¿Qué es esto?
software image
3 based on 29 votes
Nombre de la aplicación
Código para resolver la política de Cookies en una web
Sistema operativo
HTML5
Página donde está ubicada

113 comentaris a “Pequeño código para resolver la ley de cookies en tu web, versión 1.2

  1. Hola, necesito ayuda.

    Cuando implemento el último código (en blogger) me aparece;

    “Error al analizar XML, línea 1437, columna 34: The string “–” is not permitted within comments”

    No soy programador, solo me limito a seguir los pasos. ¿Qué debo hacer?

  2. Buenas, me encanta el código pero en versión móvil no queda bien. Podrías decirnos como convertirlo responsive.

    Muchas gracias

  3. Muy fan del código. Bonito, útil y sencillo. Voy a usarlo para mis proyectos en HTML si no te importa. Subiré mi aporte en otro comentario en cuanto tenga una horita y logré subir una versión responsive del mismo. =) #EnEllo.

  4. ¿Podría ayudarme con algún codiguito que bloquee la página, hasta que se dé clic en algún botón que diga “Aceptar”? El código anterior me encantó!

  5. Hola!

    Muchas gracias por el código pero tengo una DUDA. Al dar a aceptar y seguir navegando permanece presente el aviso de “Política de cookies+

    Lo exige así la ley, es un fallo mio o es que está programado así el código. ¿No se supone que al aceptar se debería ya retirar el aviso?

    Mil gracias!

  6. Hola , me he vuelto un poco loca buscando una politica de cookies sencilla y fácil de implementar y MIL GRACIAS!! Ha funcionado. :)

    Para otros lectores: Si, al principio al dar a aACEPTAR no se bajaba, pero era porque puse el código de JS en un archivo JS y no quité la parte de :

    eso solo se debe poner si lo escribes en el HTML.

Deja un comentario