Cumplir la Ley de Cookies

Actualizado el lunes, 20 junio, 2016

Cualquier web requiere cookies para su funcionamiento normale, 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 muy 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.

Este 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 incluiremos entre el código HEAD de nuestra página web, o si es posible, incluirlo en los ficheros .js de la web.

<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 nuestra web 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 */
 

#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:33px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size:12px;
	clear:both;
        font-weight: strong;
color: #000;
top:-38px;
position:fixed;
left: 0px;
background-color: #5CF156;
opacity:0.99;
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(255, 255, 255, 0.61);
z-index:999999999;
}
 
.cookiesms:hover{
top:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:38px;
font-size:11px;
height:20px;
padding-left:25px;
padding-right:25px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-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);
}
 
/* Landscape 480 */
/* esto funcionará si la resolución de pantalla es menor de 480 pixeles de ancho */
@media (max-width: 480px) {
.cookiesms{	
	width:100%;
	height:66px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size:12px;
	clear:both;
        font-weight: strong;
color: #333;
top:-71px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */

}
.cookies2{
opacity:0.95;
filter:alpha(opacity=95);
top:71px;}
}

/* Fin del CSS para cookies */
 
</style>

Ahora incluiremos este pequeño código en el BODY para tener la barra flotante que muestra los botones y el enlace a nuestra pagina de cookies.
<div class="cookiesms" id="cookie1">
Esta web utiliza cookies, <a href="https://www.sololinux.es/pages/politica-cookies"> LEER</a> 
. Aceptar-->
<button onclick="controlcookies()">Aceptar</button>
 Rechazar-->
  <button onclick="location.href='http://www.google.es'">Salir</button>  
<div  class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de   cookies + </div>
</div>
</div> 
<script type="text/javascript">
if (localStorage.controlcookie>0){ 
document.getElementById('cookie1').style.bottom = '-50px';
}
</script>

Modificado por Sergio G.B., sobre el código de Jose R.

Agradecimientos a www.joserodriguez.info

3 Comentarios

  1. Rulo
    07/10/2014
  2. Sergio
    16/10/2014
  3. Rulo
    20/10/2014

Agregar comentario