DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Configurar cookies

Cómo pedimos información

Una notificación que informa y permite gestionar el uso de cookies del sitio web.

Casos de uso

Si tu web tiene actividad económica y finalidad lucrativa

Debe llevar banner de cookies que te obligue a aceptarlas o rechazarlas.

Mostrar código del ejemplo: includes/_pattern.cookies.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}
{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{% set description %}
  <div class="mt-lg">
    <p class="c-paragraph-base">Este sitio web utiliza cookies propias y de terceros para garantizar su correcto funcionamiento. Esto implica la realización de tratamientos de datos de carácter personal con arreglo a la normativa europea y española aplicables.</p>
    <p class="c-paragraph-base">Para más información consulta nuestra <a href="#" class="c-link inline-block"  title="Se abre en ventana nueva" target="_blank">política de cookies</a></p>
    <ul class="w-full flex flex-wrap gap-sm mt-lg">
      <li>
        {{ componentButton({
          "text": "Aceptar todas",
          "classes": "c-button--primary"
        }) }}
      </li>
      <li>
        {% call componentDialog({
          "button": {
            "text": "Configurar preferencias",
            "classes":"c-button--transparent",
            "attributes": {
              "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
              "id": "button-label-secondary-action-example"
            }
          },
          "id": "secondary",
          "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
          "attributes": {
            "role": "dialog",
            "aria-labelledby": "secondary-action-example",
            "aria-modal": true
          }
        }) %}
        <!-- modal -->
        <div id="secondary-action-example" class="mt-16 sm:mt-0 relative max-w-2xl mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
          <h2 id="label-secondary-action-example" class="c-h2 focus:outline-none focus:underline pr-lg" tabindex="-1">Configuración de cookies</h2>
          <p class="c-paragraph-base my-base">Selecciona qué cookies quieres habilitar y guarda los cambios. Puedes volver a cambiar tu configuración más adelante.</p>
          <div>
            <div class="flex gap-lg">
              <div class="grow">
                <h3 class="c-h4" id="text1">Cookies técnicas</h3>
                <p class="c-paragraph-sm">Las cookies técnicas o necesarias son esenciales para que nuestra web pueda funcionar correctamente e incluye funcionalidades básicas como identificar la sesión. Por estos motivos las cookies técnicas no se pueden desactivar.</p>
              </div>
              <div>
                {{ componentToggle({
                  "id": "toggle1",
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "pressed": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm sr-only\" aria-hidden=\"true\">No activas</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm sr-only\" aria-hidden=\"true\">Activas</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm sr-only\" aria-hidden=\"true\">No activas</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm sr-only\" aria-hidden=\"true\">Activas</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text1"
                  }
                }) }}
              </div>
            </div>
            <div class="flex gap-lg mt-base">
              <div class="grow">
                <h3 class="c-h4" id="text2">Cookies de personalización</h3>
                <p class="c-paragraph-sm">Al utilizar cookies de personalización, la página web puede recordar información durante tu tiempo de navegación asociada a la forma en que la página se comporta o el aspecto que tiene.</p>
              </div>
              <div>
                {{ componentToggle({
                  "id": "toggle2",
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm sr-only\" aria-hidden=\"true\">No activas</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm sr-only\" aria-hidden=\"true\">Activas</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm sr-only\" aria-hidden=\"true\">No activas</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm sr-only\" aria-hidden=\"true\">Activas</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text2"
                  }
                }) }}
              </div>
            </div>
          </div>
          <ul class="flex flex-wrap w-full justify-between gap-sm mt-lg">
            <li class="mt-sm">
              <!-- button -->
              <button class="c-button c-button--primary"  onclick="closeDialog(this)">
                Guardar configuración
              </button>
              <!-- /button -->
            </li>
            <li class="mt-sm">
              <!-- button -->
              <button class="c-button"  onclick="closeDialog(this)">
                Cancelar <span class="sr-only">y cerrar la ventana modal</span>
              </button>
              <!-- /button -->
            </li>
          </ul>
          <div class="absolute top-0 right-0 p-sm lg:p-base">
            <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
            </button>
          </div>
        </div>
        <!-- /modal -->
        {% endcall  %}
      </li>
    </ul>
  </div>
{% endset %}

{{ componentNotification({
  "id": "banner-cookies",
  "headingLevel": 2,
  "title": {
    "text": "Gestión de cookies"
  },
  "description": {
    "html": description | safe
  }
})  }}

Ubicación

  • En la parte inferior de la página. Utiliza el bloque {% block notificationFooterBlock %} habilitado en las plantillas.

Qué componentes utilizamos

Cómo funciona

  • Este bloque aparece superpuesto al contenido cuando se accede a la página. La persona debe realizar una acción antes de navegar por ella.
  • El botón Aceptar todas cierra el bloque, mientras que el botón Configurar preferencias es un dialog que abre una modal.
  • En la modal se permite activar o desactivar varias preferencias y guardar la configuración.

Accesibilidad

  • Cuando se abre la ventana de diálogo para configurar las cookies, el foco de teclado se posiciona en el título de la ventana. El foco de teclado permanece dentro de la ventana hasta que se cierra.
  • Los interruptores para habilitar los diferentes tipos de cookies están etiquetados mediante el atributo aria-labelledby. Este atributo apunta al id del encabezado anterior, que describe el tipo de cookies que controla cada interruptor.

Si tu web no tiene actividad económica y finalidad lucrativa

Debes mostrar una notificación que avise al usuario.

Uso de cookies

Usamos cookies para que la aplicación funcione. Para más información consulta nuestra política de cookies

Mostrar código del ejemplo: includes/_pattern.cookies-simple.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies-simple.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}


{{ componentNotification({
  "id": "cookies-2",
  "headingLevel": 2,
  "title": {
    "text": "Uso de cookies"
  },
  "description": {
    "html": '<p>Usamos cookies para que la aplicación funcione. Para más información consulta nuestra <a class="c-link" href="https://www.aragon.es/-/detalle-sobre-las-cookies-en-el-portal-de-servicios-del-gobierno-de-aragon">política de cookies</a></p>'
  },
  "isDismissible": true
})  }}

Ubicación

  • En la parte inferior de la página. Utiliza el bloque {% block notificationFooterBlock %} habilitado en las plantillas.

Qué componentes utilizamos

Cómo funciona

  • Este bloque aparece superpuesto al contenido cuando se accede a la página. La persona puede realizar acciones aunque no cierre el aviso.