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?

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

http://www.joserodriguez.info/bloc/?p=7474