Tutorial: Política de cookies en cumplimiento de la ley europea

  • Autor Autor KevinCastro
  • Fecha de inicio Fecha de inicio
Hola,

No he usado ningun CMS, blogger, etc; lo he hecho 2 veces en HTML, el código que uso es el que aparece en el tutorial creando una página llamada "pagina.html" que llama a los ficheros cookie.js y cookies.css i (los reproduzco al fina). En cuanto a si funciona, parcialmente sí, sale un aviso discreto y suficiente, pero no se quita al pulsar "Acepto"; reitero que no tengo claro que debería hacer entonces, pero se supone que como mínimo desaparecer el aviso (yo quisiera que además cargara un fichero js donde llamo a oogle. Analytics, redes sociales,etc).

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<link type="text/css" href="cookies.css" rel="stylesheet">
</head>

<body>

<p>Hola mundo</p>

<p><b>1. Qué son las cookies y por qué las utilizamos en las webs de Weblogs SL</b></p>

<!-- Cookies Mensaje De Alerta  -->
<div id="cookieMessageWrapper">
<div id="cookieMessage">
<strong>Este Sitio Utiliza Cookies.</strong>Usted Puede Leer En Nuestra <a href="#"><b>Politica De Privacidad</b></a>. <button onclick="window.location.href='#'">Aceptar</button>
</div>
</div>
<!-- Cookies Mensaje De Alerta  -->
</body>
</html>

Fichero cookie.js :
Insertar CODE, HTML o PHP: 
// Control cookies
$(document).ready(function() {

	var strCookieName = "cookie-compliance";
	var strApprovedVal = "approved";

	var cookieVal = readCookie(strCookieName);
	var $displayMsg = $('#cookieMessageWrapper');

	if (cookieVal != strApprovedVal) {
		setTimeout(function() { $displayMsg.slideDown(200); }, 200);
	} else if (!$displayMsg.is(':hidden')) {
		$displayMsg.slideUp();
	};

	$('#cookieClose').click(function() {
		$displayMsg.slideUp();
		createCookie(strCookieName, strApprovedVal, 365);
	});
});

//Cookie functions
function createCookie(name, value, days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
	}
	else var expires = "";
	document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name, "", -1);
}

Fichero cookies.css :
Insertar CODE, HTML o PHP: 
@charset "utf-8";
/* CSS Document */

#cookieMessageWrapper
{
/* Este Es My Estilo que le Agrege :D*/
	width: 100%;
	border-top: 1px solid #aaaaaa;
	background: #f6f6f6;
	position: fixed;
	left: 0;
	bottom: 0px;
	text-align: center;
	padding: px 0;
	
	/*
	Este Es El Que Viene por Defecto
	background: #fd8;
	font-family: "Segoe UI",Verdana,Arial,Helvetica,Sans-Serif; 
	font-size: 11pt; 
	font-weight: normal; 
	color: #333;
	padding: 0;
	margin: 0;
	display: none;
	border-bottom: solid 1px #f80;*/
}
#cookieMessage
{
	width: 640px; /* this needs to be set to the width of the centre container */
	padding: 3px 0 3px 0;
	margin: 0 auto;
	position: relative;
}
#cookieMessage:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#cookieMessage p
{
	margin: 5px 0 0;
}
#cookieClose
{
	float: right;
	display: block;
	padding: 0px 5px;
	text-decoration: none;
	background: #f80;
	border: solid 1px #000;
	border-radius: 2px;
	color: #fff;
	font-size: 100%;
	margin-top: 6px;
	font-weight: bold;
 
Excelente aporte, perfecto para un buen articulo. Con algunas modificaciones
 
Gracias por el aporte y por la información. Espero que esta ley no dure mucho, de momento espero no hacer uso de este tuto, demás no está tenerlo por si el asunto se pone más represivo.

Me llamaba la atención ver este flotante en algunos sitios y no sabia de que se trataba. Ahora en mi opinión ¿No sería mejor educar a los Internautas ej. desde la escuela sobre configurar navegadores, cookies y privacidad? (esto es informática de niños 4º grado) Así se evita la contaminación visual que produce esa ridícula ley. :hmmmm2: Se me hace que no quieren educar a los ciudadanos sino se les dificultaría gobernarlos, además les crea un presupuesto extra.

¿Y que tal si no está el aviso flotante? Por más multa que le pongan la privacidad ya estaría vulnerable. Es mejor prevenir, es mejor educar.
 
ylodis dijo:
Hola,

No he usado ningun CMS, blogger, etc; lo he hecho 2 veces en HTML, el código que uso es el que aparece en el tutorial creando una página llamada "pagina.html" que llama a los ficheros cookie.js y cookies.css i (los reproduzco al fina). En cuanto a si funciona, parcialmente sí, sale un aviso discreto y suficiente, pero no se quita al pulsar "Acepto"; reitero que no tengo claro que debería hacer entonces, pero se supone que como mínimo desaparecer el aviso (yo quisiera que además cargara un fichero js donde llamo a oogle. Analytics, redes sociales,etc).

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://forobeta.com/cookie.js"></script>
<link type="text/css" href="http://forobeta.com/cookies.css" rel="stylesheet">
</head>

<body>

<p>Hola mundo</p>

<p><b>1. Qué son las cookies y por qué las utilizamos en las webs de Weblogs SL</b></p>

<!-- Cookies Mensaje De Alerta  -->
<div id="cookieMessageWrapper">
<div id="cookieMessage">
<strong>Este Sitio Utiliza Cookies.</strong>Usted Puede Leer En Nuestra <a href="#"><b>Politica De Privacidad</b></a>. <button onclick="window.location.href='#'">Aceptar</button>
</div>
</div>
<!-- Cookies Mensaje De Alerta  -->
</body>
</html>

Fichero cookie.js :
Insertar CODE, HTML o PHP: 
// Control cookies
$(document).ready(function() {

	var strCookieName = "cookie-compliance";
	var strApprovedVal = "approved";

	var cookieVal = readCookie(strCookieName);
	var $displayMsg = $('#cookieMessageWrapper');

	if (cookieVal != strApprovedVal) {
		setTimeout(function() { $displayMsg.slideDown(200); }, 200);
	} else if (!$displayMsg.is(':hidden')) {
		$displayMsg.slideUp();
	};

	$('#cookieClose').click(function() {
		$displayMsg.slideUp();
		createCookie(strCookieName, strApprovedVal, 365);
	});
});

//Cookie functions
function createCookie(name, value, days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
	}
	else var expires = "";
	document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name, "", -1);
}

Fichero cookies.css :
Insertar CODE, HTML o PHP: 
@charset "utf-8";
/* CSS Document */

#cookieMessageWrapper
{
/* Este Es My Estilo que le Agrege :D*/
	width: 100%;
	border-top: 1px solid #aaaaaa;
	background: #f6f6f6;
	position: fixed;
	left: 0;
	bottom: 0px;
	text-align: center;
	padding: px 0;
	
	/*
	Este Es El Que Viene por Defecto
	background: #fd8;
	font-family: "Segoe UI",Verdana,Arial,Helvetica,Sans-Serif; 
	font-size: 11pt; 
	font-weight: normal; 
	color: #333;
	padding: 0;
	margin: 0;
	display: none;
	border-bottom: solid 1px #f80;*/
}
#cookieMessage
{
	width: 640px; /* this needs to be set to the width of the centre container */
	padding: 3px 0 3px 0;
	margin: 0 auto;
	position: relative;
}
#cookieMessage:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#cookieMessage p
{
	margin: 5px 0 0;
}
#cookieClose
{
	float: right;
	display: block;
	padding: 0px 5px;
	text-decoration: none;
	background: #f80;
	border: solid 1px #000;
	border-radius: 2px;
	color: #fff;
	font-size: 100%;
	margin-top: 6px;
	font-weight: bold;
Hacer clic para expandir...

Gracias. Pero una pregunta "tonta" y de ignorante... ¿podrías decirme por favor (o cualquiera que lea estas líneas y lo sepa) en qué parte del HTML debo copiar y pegar y qué códigos de los tres que has puesto? Tengo una web en Blogger y me gustaría ponerlo por si las moscas.
 
Hola,

No uso Blogger, pero debes utilizar los 3 códigos correspondientes a 3 tipos de fichero/codigos HTML, CSS; JS
De todas hormas los tienes al principio de este hilo del cual no soy autor-iniciador y sólo los he transcrito porque a mí no me funciona, pido ayuda al respecto y alguien pregunto que qué códigos utilicé (los del principio del hilo). Vuelvo a reiterar mi petición de ayuda.
 
Hola de nuevo, acabo de encontrar de casualidad una web donde generan el script a modo de widget en un momentito rellenáis un par de cosas y lo tenéis en vuestra web

Cookie Script - free EU cookie law solution
 
Lo vi en algunos foros y queria saber como hacerlo, seguramentelo usare..

Gracias por dejarlo.​
 
Genial, la verdad esq no sabía por qué esq ahora me salian en muchas páginas ese mensaje. 🙂
 
amigo me ayudas a colocar que lo coloque y no me sale bien
 
¿Esto ya no está puesto de forma automática cuando te creas un blog en blogger? Porque hace poco me hice uno, y me salió el mensaje sin necesidad de añadir/quitar nada.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

DiegoTorres79
Problemas con la política de cookies en AdSense: ¿cómo asegurarse del cumplimiento?
Respuestas
1
Visitas
200
Priorato
Priorato
tucrush
Cumplimiento de la Política de Consentimiento de Usuarios de la Unión Europea de Google
Respuestas
2
Visitas
303
tucrush
tucrush
Atrás
Arriba