Control de acceso con cookies Javascript para web de mayores de edad

Control de acceso con cookies Javascript para web de mayores de edad

Este ejercicio es una variación avanzada del ejercicio ventana emergente con control de edad.

El punto de partida es pues la solución de este. La encontraréis en este enlace de descarga.

Pero cuidado, ya aviso de antemano que es necesario modificarlo bastante. Por tanto en el apartado enunciado de esta publicación encontraréis un archivo inicial para el alumno ligeramente distinto. Quien quiera partir de zero… pues más emocionante.

La idea es conseguir que la web recuerde si es la primera vez que visitamos la página o no y que en función de nuestras respuestas anteriores veamos unos resultados o otros.

Tener en cuenta también que existen muchas soluciones posibles. La mía sólo es una propuesta.

Entre los conceptos clave que usaremos:

  • Llamada a nodos del documento web.
  • Asignación de eventos mediante javascript.
  • Modificar el HTML mediante javascript.
  • Modificar el CSS mediante javascript.
  • Funciones anónimas.
  • Biblioteca de funciones para trabajar con cookies que encontraréis navegando en esta entrada.

A nivel de CSS vamos a practicar los conceptos de :

  • Centrado horizontal y vertical de una capa.
  • Propiedad opacity.
  • Posicionamiento fijo y absoluto de cajas.

Vayamos al ejercicio.

Visionado para usuarios que nunca han entrado a la página
Visionado para usuarios que nunca han entrado a la página
Control de acceso con cookies Javascript para web de mayores de edad 1
Visionado para usuarios que han reconocido ser mayores de edad
Visionado para usuarios que han reconocido ser menores de edad
Visionado para usuarios que han reconocido ser menores de edad

Enunciado

Dado un documento html que únicamente contiene texto de tipo Lorem Ipsum hacer que cuando se cargue el documento haga salir una ventana emergente que pregunte a los usuarios si son mayores de edad o no.

  • En caso de ser mayores de edad la venta emergente desaparece y el texto de fondo pasa a verse con claridad. La siguiente vez que se accede al mensaje se sustituye el mensaje ¿Es la primera vez que nos visitas? por Disculpa las molestias, debemos asegurarnos que eres mayor de edad.
    ¿Te importa volver a responder?.
  • En caso de no ser mayor de edad el contenido de la página se sustituye por «<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>«. La idea es que cuando se haga click en el botón se vuelve a cargar la web pero en esta ocasión se ha borrado la cookie que recordaba la edad. Es como volver al punto original.
  • Para fines del ejercicio en el extremo inferior izquierdo de la página, al cargarse, habrá un botón fijo al scroll que permitirá borrar todas las cookies.

Para mayor claridad ver las imágenes adjuntas en la introducción de este ejercicio.

Como requisitos:

  • La ventana emergente inicial sólo desaparecerá si se hace click en algún botón.
  • Por mucho scroll que haga el usuario la ventana emergente no desaparece si no se selecciona alguna opción.

Si lo prefieres puedes usar este documento como punto de partida  que incluye el html, el css y el documento cookies.js. También un embrión de funciones.js

Solución del ejercicio

La idea es jugar con una cookie de nombre edad que puede tomar los valores mayor o menor.

Como puntos clave que apreciaréis al descargar la solución el css y el javascript se llaman desde el el <head>. El motivo es que en el caso de ser  menor de edad reemplazo todo el código dentro de la etiqueta <body> y entonces eliminaríamos el css y el javascript de no tenerlos en el <head>.

Otra instrucción importante es document.location=document.location.href. Sirve para obligar a cargar de nuevo la página web.

Una posible solución alternativa sería que en lugar de sustituir el código html que hay dentro del <body>, como es la solución presentada, en su lugar reenviar los visitantes que digan ser menores de edad a otra página.

Otra posible mejora de la solución encontrada es no jugar con capas ocultas para no perjudicar el SEO. Idealmente deberíamos insertar y eliminar nodos en el DOM a medida que se necesiten. Esto también lo dejo para quién se anime.

El código de index.html y de estilos.css se incluye con el documento descargable que encontraréis. Por razones prácticas no lo incluyo en la entrada.

¿Como queda el JS?

window.onload = init;
function init(){    
    if(detectCookie("edad")){
        if (getCookie("edad")=="mayor"){
                document.querySelector(".emergente p").innerHTML = "<p>Disculpa las molestias, debemos asegurarnos que eres mayor de edad.<br>¿Te importa volver a responder?</p>";
                asignarEventosBotones();
            }else{
                removeCookie("edad");    
                menor18();
            }    
    }else{
        //si no se encuentra la cookie o está vacía
        asignarEventosBotones()
    }
}
        
function menor18(){
    setCookie("edad","menor",7);
    document.body.innerHTML="<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>";
    
    //ahora usaremos una función anónima para practicar un poco
    document.querySelector("button").addEventListener("click",function(){
        removeCookie("edad");                           
        document.location=document.location.href;
        }
    );
}    

function mayor18(){
    setCookie("edad","mayor",7);
    document.querySelector(".emergente").style.display="none";
    document.querySelector("#container").style.opacity="1";
}

function asignarEventosBotones(){
    document.querySelector(".emergente .menor").addEventListener("click",menor18);
    document.querySelector(".emergente .mayor").addEventListener("click",mayor18);
    document.querySelector(".cookies").addEventListener("click",function(){removeCookie("edad")}); 
}

Si juntamos todas las piezas resolvemos el ejercicio.

Podéis descargar la solución completa en este enlace.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.