Cómo cumplir con la nueva política de cookies en tu web HTML

politica de cookies

Comparte en tus redes...

Cómo ya sabrás si estás aquí, añadir el dichoso asunto de la política de cookies en un WordPress es muy sencillo, sólo tienes que añadir y configurar el plugin que más te guste de la lista interminable que existe. Sin embargo, cuando se trata de una web HTML la cosa cambia. Anteriormente era suficiente añadir un enlace en el pie de la página con un enlace a un PDF donde mostrar la información que todo el mundo sabe, pero ahora, lo complican. Como siempre. Ahora hay que mostrar una ventana flotante avisando, con enlace al fichero PDF (o HTML, como quieras) y con un botón de Aceptar que oculte el mensaje.

En este post te indicamos como incluir esta ventana fácilmente en tu web. Además es una versión mejora, adaptada a móviles y con un recordatorio tal, que si se acepta una vez, aparecerá oculta en siguientes visitas a tu web.

Para insertar esta ventana, hay tres pasos sencillos:

Control de cookies

Es un código JavaScript que tendremos que incluir en el HEAD de nuestra web, justo antes del body o si quieres, al final de la página, lo que mejora siempre el tiempo de carga de esta. Aunque es tan breve, que no tiene mayor importancia.

  1. <!– SCRIPT PARA EL CONTROL DE COOKIES –>
  2. <script type=“text/javascript”>
  3. function controlcookies() {
  4. // si variable no existe se crea (al hacer clic en Aceptar)
  5. localStorage.controlcookie = (localStorage.controlcookie || 0);
  6.  
  7. localStorage.controlcookie++; // incrementamos la cuenta de la cookie
  8. cookie1.style.display=‘none’; // Esconde la política de cookies en futuras visitas
  9. }
  10. </script>

 

Código CSS para dar formato a la ventana con la información sobre Cookies

proteccion-datos-cookiesEn el segundo paso, tenemos que crear un fichero externo CSS con el formato de la ventana flotante.

Es bien sencillo, copiamos todo el contenido siguiente y lo llamamos cookies.css (por ejemplo).

Luego lo importamos desde nuestra web con la línea siguiente:

<link rel=”stylesheethref=”css/cookies.css“/>

El contenido del fichero CSS sería el siguiente:

  1. <!— Código del fichero cookies.css para la política de cookies–>
  2.  
  3. <style type=“text/css”>
  4. /* CSS para la animación y localización de los DIV de cookies */
  5. @keyframes desaparecer
  6. {
  7. 0% {bottom: 0px;}
  8. 80% {bottom: 0px;}
  9. 100% {bottom: 50px;}
  10. }
  11. @-webkitkeyframes desaparecer /* Safari and Chrome */
  12. {
  13. 0% {bottom: 0px;}
  14. 80% {bottom: 0px;}
  15. 100% {bottom: 50px;}
  16. }
  17. @keyframes aparecer
  18. {
  19. 0% {bottom: 38px;}
  20. 10% {bottom: 0px;}
  21. 90% {bottom: 0px;}
  22. 100% {bottom: 38px;}
  23. }
  24. @-webkitkeyframes aparecer /* Safari and Chrome */
  25. {
  26. 0% {bottom: 38px;}
  27. 10% {bottom: 0px;}
  28. 90% {bottom: 0px;}
  29. 100% {bottom: 38px;}
  30. }
  31. #cookiesms1:target {
  32. display: none;
  33. }
  34. .cookiesms{
  35. width:100%;
  36. height:43px;
  37. margin:0 auto;
  38. paddingleft:1%;
  39. paddingtop:5px;
  40. fontsize: 1.2em;
  41. clear:both;
  42. fontweight: strong;
  43. color: #333;
  44. bottom:0px;
  45. position:fixed;
  46. left: 0px;
  47. backgroundcolor: #FFF;
  48. opacity:0.7;
  49. filter:alpha(opacity=70); /* For IE8 and earlier */
  50. transition: bottom 1s;
  51. webkittransition:bottom 1s; /* Safari */
  52. webkitboxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  53. mozboxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  54. boxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  55. zindex:999999999;
  56. }
  57. .cookiesms:hover{
  58. bottom:0px;
  59. }
  60. .cookies2{
  61. backgroundcolor: #FFF;
  62. display:inline;
  63. opacity:0.95;
  64. filter:alpha(opacity=95);
  65. position:absolute;
  66. left:1%;
  67. top:-30px;
  68. fontsize:15px;
  69. height:30px;
  70. paddingleft:25px;
  71. paddingright:25px;
  72. webkitbordertoprightradius: 15px;
  73. webkitbordertopleftradius: 15px;
  74. mozborderradiustopright: 15px;
  75. mozborderradiustopleft: 15px;
  76. bordertoprightradius: 15px;
  77. bordertopleftradius: 15px;
  78. webkitboxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  79. mozboxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  80. boxshadow: 3px 3px 1px rgba(50, 50, 50, 0.56);
  81. }
  82. /* Fin del CSS para cookies */
  83. </style>

 

Código para la ventana flotante

En último lugar, tenemos que introducir el siguiente código en la web, dentro de la etiqueta body. Como siempre podemos introducirlo al inicio o al final, para mejorar el tiempo de carga del resto de la web. Al ser tan poco contenido, realmente la diferencia no es mucha.

  1. <!–Código HTML de la política de cookies –>
  2. <!–La URL incluida es la parte que se ha de modificar –>
  3. <div class=“cookiesms” id=“cookie1”>
  4. Esta web utiliza cookies, puedes ver nuestra <a href=“cookies.pdf” target=”_blank”>la política de cookies, aquí</a>
  5. Si continuas navegando estás aceptándola
  6. <button onclick=controlcookies()>Aceptar</button>
  7. <div class=“cookies2” onmouseover=document.getElementById(‘cookie1’).style.bottom = ‘0px’;>Política de cookies + </div>
  8. </div>
  9. <script type=“text/javascript”>
  10. if (localStorage.controlcookie>0){
  11. document.getElementById(‘cookie1’).style.bottom = ‘-50px’;
  12. }
  13. </script>
  14. <!– Fin del código de cookies —>

 

Con esto estaremos completamente cubiertos en lo que se refiere a política de Cookies. Pero además os mostramos la información que debería tener el fichero cookies.pdf

 

INFORMACIÓN SOBRE COOKIES

1. ¿Qué son las cookies?

Se trata de una herramienta web destinada a guardar y recuperar información sobre los visitantes y usuarios de la página, en forma de fichero de texto que se puede enviar al ordenador o dispositivo automatizado del usuario y que permite saber al propietario de la web qué ha estado haciendo el visitante en la misma, prestarle ciertos servicios o mejorar y hacer más segura la navegación del mismo. Las cookies no son permanentes y se podrían eliminar automáticamente pasado un tiempo.

 

2. Tipo de cookies que se usan en esta web:

La página web que está visitando, en este momento, utiliza cookies de de terceros, que son:

– GOOGLE ANALYTICS, propiedad de Google INC: se trata de una cookie analítica, que se emplea para recopilar datos estadísticos de la actividad (número de visitas, origen, áreas visitadas…). Si desea obtener más información sobre esta cookie, se puede dirigir a la propia web de Google en la siguiente dirección:

https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage

– Cookies de redes sociales externas, para que los usuarios puedan interactuar con el contenido de diferentes plataformas sociales (como FACEBOOK) y que se generan sólo para los usuarios de dichas redes sociales. Las condiciones de uso de estas cookies y la información recopilada se puede consultar en la propia política de privacidad de la correspondiente red social. Más información sobre esta política en caso de facebook, aquí:

https://es-es.facebook.com/policies/cookies/

 

3. Más información sobre navegación en modo privado y gestión de cookies:

Tenga en cuenta que usted puede configurar su navegador de forma que o acepte o rechace por defecto todas las cookies o para recibir aviso de la recepción de las mismas y dedicir así sobre su instalación o no. Puede, por ejemplo, consultar la sección de ayuda sobre su navegador a tal efecto. También puede usted eliminar las cookies instaladas en su equipo o dispositivo en cualquier momento. Además de lo anterior, le recomendamos que consulte los siguientes enlaces para ampliar información sobre gestión de cookies (navegación en modo privado y eliminación de cookies tras cada visita), en función de su navegador:

– INTERNET EXPLORER 8 Y SUPERIOR:
http://windows.microsoft.com/es-es/windows7/how-to-manage-cookies-in-internet-explorer-9

– FIREFOX 3.5 Y SUPERIOR:
http://support.mozilla.org/es/products/firefox/privacy-and-security/cookies

– GOOGLE CHROME 10 Y SUPERIOR:
http://support.google.com/chrome/bin/answer.py?hl=es&answer=95647

– OPERA 10.5 Y SUPERIOR:
http://help.opera.com/Windows/11.50/es-ES/cookies.html

– SAFARI 2 Y SUPERIOR:
http://support.apple.com/kb/HT1677?viewlocale=es_ES

 

política

Be the first to comment on "Cómo cumplir con la nueva política de cookies en tu web HTML"

Leave a comment