Artículos técnicos Archivos - Blog de ADW.es

Poradw.es

¿Cómo crear tu página de Políticas de cookies?

A todos nos ha pasado alguna vez, acabamos de realizar una preciosa web y te preguntas ¿mi página lleva cookies?, ¿tengo que informar de ello?, ¿cómo lo hago?

En ADW.es no damos consultoría sobre políticas de privacidad o de cookies pero nuestro afán por ayudar a esos usuarios que necesitan esta información no tiene limites.

En este artículo de hoy:

Os daremos las herramientas necesarias para crear el pop-up de “este sitio tiene cookies”
Os daremos una plantilla sobre “Políticas de cookies” que podéis adaptar en vuestro sitio.
Os enseñaremos cómo podéis ver qué cookies utilizáis en vuestro sitio web.
Os enseñaremos cuales son las cookies más comunes.

Crear pop-up: “este sitio web contiene cookies”

Lo primero que debemos hacer es avisar a los usuarios de que se utilizan cookies. Para ello lo podemos hacer de diferentes maneras dependiendo de como tengamos codificada nuestra página, o si por el contrario utilizamos algún CMS, en este artículo os pondremos 2 ejemplos.

para HTML y CSS.
- El HTML a incluir en tu documento index.html:

<!-- creado por ADW.es -->
<div class="cookie">
  <div class="contenedor-cookie">
    <p class="texto-de-cookie">Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo.
 <!-- inicio: modificar este enlace -->
      <a href="#" target="_blank">
 <!-- fin: modificar este enlace -->
        Políticas de Privacidad
      </a>
    </p>
  </div>
  <div class="contenedor-boton">
    <a class="boton-de-cookie">Seguir Navegando</a>
  </div>
</div>
<!-- creado por ADW.es -->

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<p class="texto-de-cookie">Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo.

Políticas de Privacidad

</a>

</p>

</div>

<a class="boton-de-cookie">Seguir Navegando</a>

</div>

- El CSS a añadir en tu documento style.css:

.texto-de-cookie, .boton-de-cookie {
  font-family: Work Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

.cookie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f8f9fa; /*color de fondo de la ventana*/
  bottom: 0;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.08);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  left: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  z-index: 1010;
}

.texto-de-cookie {
  display: inline;
  color: #545454;
}

.contenedor-cookie > .texto-de-cookie > a {
  text-decoration: none;
  font-weight: bold;
  color: #14a08f; /*color enlace políticas de cookies*/
}

.contenedor-boton {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: 20px;
}

.boton-de-cookie {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  white-space: nowrap;
  padding: 9px 10px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #000; /*color del texto del boton*/
  background-color: #22d8c2; /*modificar color de dentro del boton*/
  border-color: #000; /*modificar color del contorno del boton*/
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
  padding: 10px 20px 10px 20px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

.texto-de-cookie, .boton-de-cookie {

font-family: Work Sans,Helvetica Neue,Helvetica,Arial,sans-serif;

font-size: 14px;

line-height: 1.42857143;

}

.cookie {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

background-color: #f8f9fa; /*color de fondo de la ventana*/

bottom: 0;

box-shadow: 0 0 20px 0 rgba(0,0,0,.08);

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

left: 0;

padding: 20px;

position: fixed;

right: 0;

z-index: 1010;

}

.texto-de-cookie {

display: inline;

color: #545454;

}

.contenedor-cookie > .texto-de-cookie > a {

text-decoration: none;

font-weight: bold;

color: #14a08f; /*color enlace políticas de cookies*/

}

.contenedor-boton {

-ms-flex-negative: 0;

flex-shrink: 0;

margin-left: 20px;

}

.boton-de-cookie {

display: inline-block;

margin-bottom: 0;

font-weight: 400;

text-align: center;

vertical-align: middle;

-ms-touch-action: manipulation;

touch-action: manipulation;

cursor: pointer;

background-image: none;

border: 1px solid transparent;

border-top-color: transparent;

border-right-color: transparent;

border-bottom-color: transparent;

border-left-color: transparent;

white-space: nowrap;

padding: 9px 10px;

line-height: 1.42857143;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

color: #000; /*color del texto del boton*/

background-color: #22d8c2; /*modificar color de dentro del boton*/

border-color: #000; /*modificar color del contorno del boton*/

border-radius: 3px;

font-size: 14px;

line-height: 18px;

padding: 10px 20px 10px 20px;

}

para el CMS de WordPress.
- Con el Plugin Cookie Notice : Con este plugin podrás implementar un aviso de que existen cookies en tu sitio, configurar el mensaje y fijar los botones correspondientes.
- Configuración inicial del Plugin: Instala tu Plugin y actívalo.
  - En plugins>Cookie Notice> Haz clic en “Ajustes” justo debajo del titulo del plugin.
  - En el plugin tienes más opciones que si quieres puedes configurar (nosotros te enseñaremos lo básico) ¡Recuerda, tienes que crear una página a donde apuntar la política de cookies donde informas de las cookies que estás utilizando.!
  - Ve hasta abajo de la página y configura los colores de tu pop-up:
  - ¡Y listo! Ya tenemos nuestro pop-up / ventana emergente creado a nuestra web.

Plantilla sobre Políticas de Cookies/ Privacidad.

Después de añadir nuestra ventana informando a los usuarios de nuestra web de que existen cookies, tenemos que añadir más información sobre ¿que son las cookies?, ¿que tipos de cookies existen?, ¿cuales usamos en nuestra web?, ¿cómo las desactivamos?.

Esta información tiene que estar si o si en nuestra página sobre políticas de cookies, ya que no todos los usuarios saben que son las cookies ni la información que se puede llegar a recopilar de una persona si está navegando por un sitio web, tenemos que dejar a los usuarios con una sensación de transparencia en la boca y por ello la plantilla que os vamos a facilitar tiene que contener toda esa información. (No recomendamos quitar trozos de la plantilla, pero si se quiere se puede modificar a gusto de cada uno y en su conveniencia)

ADVERTENCIA: Las partes en rojo y en verde de la plantilla hay que modificarlos con los datos de nuestra web/empresa/ o como administradores de la misma.

Aquí os dejamos la siguiente plantilla:

Descargar Plantilla

¿Qué cookies utilizo en mi sitio web?

Una vez de que incrustamos la plantilla a nuestra web y de que hemos modificado los datos que estaban de color rojo y verde queda saber que cookies tenemos en nuestra web, para ello entraremos en nuestro navegador (ejemplo de los navegadores más utilizados):

Desde Chrome> entramos en nuestra web y hacemos clic en “el candado” o en la “i” de información que aparece a la izquierda de la URL de nuestra página.
- (DATO: si no tienes “el candado” (certificado SSL) y te gustaría tener uno, contacta con nosotros a comercial@adw.es y te asesoraremos al respecto.)
- Una vez que hemos hecho clic se nos abrirá un pop-up con la información del sitio. Hacemos clic en “Cookies”:
- Hacemos clic en la flecha o carpeta de la cookies y nos aparecerá la siguiente información:
- Aquí podremos sacar la información correspondiente a la cookie, su nombre, su tipo de contenido y cuánto tiempo estará creada. (el usuario final desde el mismo sitio podrá bloquear o quitar las cookies correspondientes sabiendo que si no lo hace correctamente podría entorpecer su navegación y experiencia en la web).
Desde Firefox > Vamos a nuestra web desde el navegador de firefox, allí haremos clic en el siguiente botón: (que lo tendremos disponible en la esquina superior derecha).
- Desde aquí iremos a la opción que estará en la parte de abajo del menú. Después haremos clic en “Inspector de almacenamiento”:
- Donde se nos abrirá una nueva pestaña en la parte inferior del navegador y aquí tendremos una carpeta llamada “cookies”.

¿Dónde podemos consultar la información sobre las cookies que utilizamos?

WooCommerce, si tienes una tienda WooCommerce seguramente tendrás una de las siguientes cookies: https://docs.woocommerce.com/document/woocommerce-cookies/
- Ejemplo:

woocommerce_cart_hash

woocommerce_items_in_cart

wp_woocommerce_session_

woocommerce_recently_viewed

store_notice[notice id]

Google Analytics: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage?hl=es-419 Las cookies de Analytics se utilizan principalmente para medir cómo interactúan los usuarios con el contenido del sitio, podemos encontrar las siguientes cookies:
- _ga
  
  _gid
  
  _gat
  
  AMP_TOKEN
  
  _gac_<property-id>
Tipos de cookies que utiliza Google: https://policies.google.com/technologies/types?hl=es
Páginas de terceros, esta no es una práctica muy recomendada pero si vas a realizar tu mismo la página de políticas de cookies y no tienes mucha idea puedes buscar tu cookie en internet y comparar en páginas de terceros su política de cookies con las que tu tienes para ir creando una a una la tabla que debes mostrar en tu política de cookies.

¿Cómo lo describo en mi página de “políticas de cookies”?

En nuestra página de “Políticas de cookies” tenemos que crear una tabla (Mira la plantilla descargable para tu web y comprueba el ejemplo de como tiene que quedar la tabla de cookies).

La tabla que tenemos que crear debe tener la siguiente información:

El nombre de la cookie (obligatorio)
Entidad que gestiona dicha cookies (obligatorio) si no sabemos quien la gestiona podemos indicar que no es una cookie de uso propio y que es una cookie de 3eros.
- (Más información sobre los tipos de cookies en la plantilla descargable).
El plazo que permanece activa la cookie (obligatorio)
Finalidad de la cookie (obligatorio)

EXTRA: Configuración de cookies para los navegadores más populares.

En ese apartado os enseñaremos a bloquear o quitar las cookies en los diferentes navegadores.

Nota: estos pasos pueden variar en función de la versión del navegador:

A continuación le indicamos cómo acceder a una cookie determinada del navegador Chrome. :

Vaya a Configuración o Preferencias mediante el menú Archivo o bien pinchando el icono de personalización que aparece arriba a la derecha.
Verá diferentes secciones, pinche la opción Mostrar opciones avanzadas.
Vaya a Privacidad, Configuración de contenido.
Seleccione Todas las cookies y los datos de sitios.
Aparecerá un listado con todas las cookies ordenadas por dominio. Para que le sea más fácil encontrar las cookies de un determinado dominio introduzca parcial o totalmente la dirección en el campo Buscar cookies.
Tras realizar este filtro aparecerán en pantalla una o varias líneas con las cookies de la web solicitada. Ahora sólo tiene que seleccionarla y pulsar la X para proceder a su eliminación.

Para acceder a la configuración de cookies del navegador Internet Explorer siga estos pasos:

Vaya a Herramientas, Opciones de Internet
Haga click en Privacidad.
Mueva el deslizador hasta ajustar el nivel de privacidad que desee.

Para acceder a la configuración de cookies del navegador Firefox siga estos pasos:

Vaya a Opciones o Preferencias según su sistema operativo.
Haga click en Privacidad.
En Historial elija Usar una configuración personalizada para el historial.
Ahora verá la opción Aceptar cookies, puede activarla o desactivarla según sus preferencias.

Para acceder a la configuración de cookies del navegador Safari para OSX siga estos pasos:

Vaya a Preferencias, luego Privacidad.
En este lugar verá la opción Bloquear cookies para que ajuste el tipo de bloqueo que desea realizar.

Para acceder a la configuración de cookies del navegador Safari para iOS siga estos pasos:

Vaya a Ajustes, luego Safari.
Vaya a Privacidad y Seguridad, verá la opción Bloquear cookies para que ajuste el tipo de bloqueo que desea realizar.

Para acceder a la configuración de cookies del navegador para dispositivos Android siga estos pasos:

Ejecute el navegador y pulse la tecla Menú, luego Ajustes.
Vaya a Seguridad y Privacidad, verá la opción Aceptar cookies para que active o desactive la casilla.

Para acceder a la configuración de cookies del navegador para dispositivos Windows Phone siga estos pasos:

Abra Internet Explorer, luego Más, luego Configuración
Ahora puede activar o desactivar la casilla Permitir cookies.

Poradw.es

Error de Plesk (WordPress Toolkit) en Web Admin Edition: Web en Modo Mantenimiento

¿Tu página web se ha quedado en mantenimiento después de una actualización?

Si tu página web se ha quedado en este estado (HTTP 503): Leer más

Poradw.es

Plesk VS cPanel

En el post de hoy hablaremos de 2 paneles de control que ocupan prácticamente el total de la cuota de mercado: Plesk y cPanel.

¿Qué es un Panel de Control?

Es un servicio que te ofrece el proveedor de tu alojamiento web (p.e: ADW.es), sirve para que los usuarios puedan gestionar, realizar modificaciones y administrar todo lo relacionado con el hosting que han contratado Leer más

Poradw.es

Redirecciones 301 y archivo .htaccess

¿Qué es una redirección 301?

Resumidamente envía a los visitantes de una web a otra diferente automáticamente.

<strong>Ejemplo</strong>: Un visitante entra a web1.com y automáticamente es redirigido a web2.com.

1	<strong>Ejemplo</strong>: Un visitante entra a web1.com y automáticamente es redirigido a web2.com.

¡AVISO! Las redirecciones 301 son permanentes. (Si buscas algo temporal, estas buscando una redirección 302)

Poradw.es

Modificar archivo host en Windows, Linux y Mac

¿Qué es el archivo hosts?

Es un archivo que nuestro ordenador “consulta” antes de acceder a una web.

¿Para que podemos modificar el archivo host?

Para forzar el visualizado de nuestro nombre de dominio (que todavía no resuelve) a través de otro alojamiento web.

¿Cuando podemos modificar el archivo host?

Cuando realizamos una migración o estamos creando una página web podemos ver si la migración va bien o si la web que estamos creando esta correctamente.

¿Cómo lo modificamos?

En Linux y Mac

-Abrimos el terminal y ejecutamos la siguiente linea:

sudo nano /etc/hosts

-Añadimos en el archivo host la siguiente linea de código (ejemplo):

000.000.000.000 midominio.com www.midominio.com

-Pulsamos ^x (para salir) y luego nos preguntará si queremos guardar los cambios Y(Yes).

En Windows

Inicio > cmd (consola de comandos)> con el botón derecho clic encima del cmd>Ejecutar como administrador >y escribimos la siguiente linea de código:

notepad c:\windows\systems32\drivers\etc\hosts

-Y añadimos en el archivo hosts la siguiente linea de código (ejemplo):

000.000.000.000 mi dominio.com www.midominio.com

-En la parte superior izquierda le damos a Archivo>Guardar y luego a Archivo>Salir o “X” y cerramos el cmd.

Para finalizar, podemos borrar la linea de código que hemos añadido cuando cambiemos las DNS.

Vídeo explicativo:

Archivo de categoría Artículos técnicos

¿Cómo crear tu página de Políticas de cookies?

Crear pop-up: “este sitio web contiene cookies”

Plantilla sobre Políticas de Cookies/ Privacidad.

¿Qué cookies utilizo en mi sitio web?

¿Dónde podemos consultar la información sobre las cookies que utilizamos?

¿Cómo lo describo en mi página de “políticas de cookies”?

EXTRA: Configuración de cookies para los navegadores más populares.

A continuación le indicamos cómo acceder a una cookie determinada del navegador Chrome. :

Para acceder a la configuración de cookies del navegador Internet Explorer siga estos pasos:

Para acceder a la configuración de cookies del navegador Firefox siga estos pasos:

Para acceder a la configuración de cookies del navegador Safari para OSX siga estos pasos:

Para acceder a la configuración de cookies del navegador Safari para iOS siga estos pasos:

Para acceder a la configuración de cookies del navegador para dispositivos Android siga estos pasos:

Para acceder a la configuración de cookies del navegador para dispositivos Windows Phone siga estos pasos:

Error de Plesk (WordPress Toolkit) en Web Admin Edition: Web en Modo Mantenimiento

Plesk VS cPanel

¿Qué es un Panel de Control?

Redirecciones 301 y archivo .htaccess

¿Qué es una redirección 301?

Modificar archivo host en Windows, Linux y Mac

Categorías

Sitios de interés

Suscríbete a nuestra Newsletter