Tutorial: Política de cookies em conformidade com a lei europeia

  • Autor Autor KevinCastro
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
Olá,

Não usei nenhum CMS, blogger, etc; fiz isso 2 vezes em HTML, o código que uso é o que aparece no tutorial criando uma página chamada "pagina.html" que chama os arquivos cookie.js e cookies.css (os reproduzo ao final). Quanto a se funciona, parcialmente sim, aparece um aviso discreto e suficiente, mas não sai ao clicar em "Aceito"; reitero que não tenho certeza do que deveria fazer então, mas supõe-se que no mínimo o aviso deveria desaparecer (eu gostaria que além disso carregasse um arquivo js onde chamo o Google Analytics, redes sociais, 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>

Arquivo cookie.js :
Inserir CODE, HTML ou 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);
}

Arquivo cookies.css :
Inserir CODE, HTML ou 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 contribuição, perfeito para um bom artigo. Com algumas modificações
 
Obrigado pela contribuição e pela informação. Espero que esta lei não dure muito, por enquanto espero não fazer uso deste tutorial, mas não custa tê-lo caso o assunto fique mais repressivo.

Me chamava a atenção ver este flutuante em alguns sites e não sabia do que se tratava. Agora, na minha opinião, não seria melhor educar os internautas, por exemplo, desde a escola sobre configurar navegadores, cookies e privacidade? (isso é informática de crianças da 4ª série). Assim se evita a poluição visual que essa lei ridícula produz. :hmmmm2: Tenho a impressão de que não querem educar os cidadãos, senão seria mais difícil governá-los, além de criar um orçamento extra para eles.

E que tal se não estiver o aviso flutuante? Por mais multa que coloquem, a privacidade já estaria vulnerável. É melhor prevenir, é melhor educar.
 
Olá,

Não usei nenhum CMS, blogger, etc; fiz isso 2 vezes em HTML, o código que uso é o que aparece no tutorial criando uma página chamada "pagina.html" que chama os arquivos cookie.js e cookies.css (os reproduzo ao final). Quanto a se funciona, parcialmente sim, aparece um aviso discreto e suficiente, mas não sai ao clicar em "Aceito"; reitero que não tenho claro o que deveria fazer então, mas supõe-se que no mínimo o aviso deveria desaparecer (eu gostaria que além disso carregasse um arquivo js onde chamo o Google Analytics, redes sociais, 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>

Arquivo cookie.js :
Inserir CODE, HTML ou 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);
}

Arquivo cookies.css :
Inserir CODE, HTML ou 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;

Obrigado. Mas uma pergunta "boba" e de ignorante... você poderia me dizer por favor (ou qualquer um que leia estas linhas e saiba) em que parte do HTML devo copiar e colar e quais códigos dos três que você colocou? Tenho um site no Blogger e gostaria de colocar por precaução.
 
Olá,

Não uso Blogger, mas você deve utilizar os 3 códigos correspondentes a 3 tipos de arquivo/códigos HTML, CSS; JS
De qualquer forma, você os tem no início deste tópico do qual não sou autor-iniciador e apenas os transcrevi porque para mim não funciona, peço ajuda a respeito e alguém perguntou quais códigos utilizei (os do início do tópico). Volto a reiterar meu pedido de ajuda.
 
Vi isso em alguns fóruns e queria saber como fazer, certamente usarei..

Obrigado por deixar.​
 
Genial, a verdade é que eu não sabia por que agora aparecia essa mensagem em muitas páginas. 🙂
 
amigo, você me ajuda a colocar? eu coloquei e não está saindo bem
 
Isso já não está colocado de forma automática quando você cria um blog no Blogger? Porque faz pouco tempo que fiz um, e a mensagem apareceu sem necessidade de adicionar/remover nada.
 
Voltar
Topo