Estos dias, he tenido que revisar un sitio que desarrollé hace 11 años, con PHP y su Framework YII.(Podeis encontrar mas información en esta web en Empezando con YII). Recoger un proyecto despues de 11 años, es bastante duro, sobre todo si en todo ese tiempo he estado orientado a otros lenguajes (como Java)
Pero un cliente, es un cliente, y ademas, despues de ese tiempo, quizas es un poco mas que cliente, de forma que me preparé a sufrir, y, eso si, muy esperanzado en que Copilot, me ayudara en la labor.
Planificación
Para el desarrollo, estoy pensando en:
- Index.html: En el desarrollo, simulará ser la página inicial de un sitio web; cuando todo esté funcionando, moveré el trabajo al index real del sitio web, y se podrá prescindir de esta. Para esta página he utilizado Bootstrap, para simplificar las cosas
- styleCookies.css: Se trata de una hoja en donde se encuentran todos los estilos necesarios para pedir autorizaciones, o gestionar las cookies
- gestorCookies.js: con todas las funciones javascript necesarias para la gestión o personalización de las cookies para usuario
- base.html: Para simplificar el tratamiento, hemos preparado una pagina comun en donde cargaremos las paginas de seguridad, de esta forma, mantenemos el mismo aspecto para todas ellas. La carga se realiza desde el mismo cliente para no interferir el desarrollo de la web
- hojas de informacion: (no-cookies.html, t_hoja_aviso_legal.html, t_politica_cookies.html, t_politica_privacidad.html) que contendrán la informacion a presentar, y serán cargadas en base.html
A continuación, os presento la idea de funcionamiento:
Cada vez que un usuario accede a nuestra página index, se le ha de presentar un mensaje advirtiendo que estamos trabajando con cookies, y preguntamos por la opción que desea elegir
- Aceptar: Si opta por aceptar que trabajemos con cookies, podemos cerrar el anuncio, y empezamos a mostrarle nuestra web
- Rechazar: Si podemos trabajar sin cookies, deberíamos dejar preparado el ir borrando todas las cookies que generemos, a la vez que procuramos no generarlas; si no podemos trabajar sin cookies, deberemos redirigirlo a una pagina en donde facilitaremos esa información, y le daremos la posibilidad que acepte nuestras cookies
- Rechazar cookies de terceros. Habitualmente, nuestra web podrá funcionar sin cookies de terceros, de forma que las borramos las que hayamos generado, procuramos no generar, y presentamos nuestra pantalla.
Quiero aclararos que ese control lo debemos hacer en todas las paginas, y, que si nuestro usuario ya ha contestado, deberemos realizar la acción pedida, si es necesario(caso borrar cookies)
Tambien, quiero aclarar que la opción que hemos tomado, es borrar las cookies, ya que el evitar la generación de las mismas, iba a ser bastante mas complicado en algunos casos. De cualquier forma, deberemos borrar todas las generadas antes de la pregunta y no generar ninguna despues de la pregunta…parece sencillo ¿no?
Trabajando en nuestra pagina index.html
Vamos a construir nuestra primera pagina, que no deberia presentaros ningun problema.
Aunque os voy a mostrar el codigo, tambien os indicaré el repositorio en donde se encuentra
Utilizando Copilot IA
Tras abrir Visual Code, (podéis ver la preparación de Code con Copilot aqui) hemos preguntado a copilot algo como esto:
«crear pagina index com menu de inicio, productos, ventas precios»
y hemos recibido una respuesta muy válida. De acuerdo, no es la de nuestro proyecto, pero supongo que para realizar pruebas, no necesitamos mas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Tienda</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
margin-bottom: 20px;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<!-- Menú de navegación -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mi Tienda</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#inicio">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#productos">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ventas">Ventas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#precios">Precios</a>
</li>
</ul>
</div>
</nav>
<!-- Contenido de la página -->
<div class="content">
<section id="inicio">
<h1>Bienvenido a Mi Tienda</h1>
<p>Esta es la sección de inicio de nuestra tienda. Aquí puedes encontrar información general sobre nuestros productos y servicios.</p>
</section>
<section id="productos">
<h2>Productos</h2>
<p>En esta sección, puedes encontrar una lista de nuestros productos disponibles.</p>
<!-- Lista de productos -->
<ul>
<li>Producto 1</li>
<li>Producto 2</li>
<li>Producto 3</li>
</ul>
</section>
<section id="ventas">
<h2>Ventas</h2>
<p>En esta sección, puedes encontrar información sobre nuestras ventas y promociones actuales.</p>
<!-- Información de ventas -->
<ul>
<li>Venta 1</li>
<li>Venta 2</li>
<li>Venta 3</li>
</ul>
</section>
<section id="precios">
<h2>Precios</h2>
<p>En esta sección, puedes encontrar información sobre los precios de nuestros productos.</p>
<!-- Lista de precios -->
<ul>
<li>Producto 1: $10</li>
<li>Producto 2: $20</li>
<li>Producto 3: $30</li>
</ul>
</section>
</div>
<!-- Scripts de Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>Que viene a ser
Añadiendo simulación de Google
Lo hecho, ya seria una página index normal, pero…vamos a hacer que google tambien pueda generar cookies, para ello, añadimos al principio de Head la rutina de gtag, que en condiciones normales, casi seguro que la teneis en vuestras páginas.
En mi ejemplo, despues de la linea 5, añado
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
y, justo antes de cierre del body
<!--simulacion google-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-11111111-1', 'auto');
ga('send', 'pageview');
</script>Como veis la pagina sigue funcionando, aunque me haya inventado los IDs y códigos de google, se me estan generando cookies
(siempre que la mostréis por medio de un sitio web.
La pagina se muestra asi
y el código que he utilizado es:
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Tienda</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
margin-bottom: 20px;
}
.content {
padding: 20px;
}
.navbar-brand img {
max-height: 40px;
/* Ajusta la altura del logo según sea necesario */
}
</style>
</head>
<body>
<!-- Menú de navegación -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://www.recursosformacion.com/wp-content/uploads/2021/12/logoRFRelieve.png" alt="Recursos Formación"> <!-- URL del logo -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#inicio">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#productos">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ventas">Ventas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#precios">Precios</a>
</li>
</ul>
</div>
</nav>
<!-- Contenido de la página -->
<div class="content">
<section id="inicio">
<h1>Bienvenido a Mi Tienda</h1>
<p>Esta es la sección de inicio de nuestra tienda. Aquí puedes encontrar información general sobre nuestros
productos y servicios.</p>
</section>
<section id="productos">
<h2>Productos</h2>
<p>En esta sección, puedes encontrar una lista de nuestros productos disponibles.</p>
<!-- Lista de productos -->
<ul>
<li>Producto 1</li>
<li>Producto 2</li>
<li>Producto 3</li>
</ul>
</section>
<section id="ventas">
<h2>Ventas</h2>
<p>En esta sección, puedes encontrar información sobre nuestras ventas y promociones actuales.</p>
<!-- Información de ventas -->
<ul>
<li>Venta 1</li>
<li>Venta 2</li>
<li>Venta 3</li>
</ul>
</section>
<section id="precios">
<h2>Precios</h2>
<p>En esta sección, puedes encontrar información sobre los precios de nuestros productos.</p>
<!-- Lista de precios -->
<ul>
<li>Producto 1: $10</li>
<li>Producto 2: $20</li>
<li>Producto 3: $30</li>
</ul>
</section>
</div>
<!-- Scripts de Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--simulacion google-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-11111111-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>Proximamente, os añado el video en el que realizo este primer paso, y, en unos dias continuamos con el desarrollo.
Descubre más desde Recursos para formacion
Suscríbete y recibe las últimas entradas en tu correo electrónico.