Tema 8.1
Integración de lenguajes de guión en navegadores web
8.1 Integración de lenguajes de guión en navegadores web
Introducción al Apartado
Dentro del ámbito de la programación web en el entorno cliente, los lenguajes de guión o scripting desempeñan un papel fundamental para dotar a las páginas web de dinamismo, interactividad y funcionalidad avanzada. La integración de estos lenguajes en los navegadores web permite que las páginas no sean solo documentos estáticos, sino aplicaciones interactivas capaces de responder a las acciones del usuario en tiempo real. En este contexto, el presente apartado se centra en analizar cómo los navegadores web soportan y gestionan la ejecución de lenguajes de guión, cuáles son los mecanismos técnicos involucrados y qué consideraciones se deben tener en cuenta para una integración eficiente y segura.
Este análisis resulta crucial, ya que la correcta integración de los lenguajes de guión impacta directamente en la experiencia del usuario, la seguridad del sistema y la compatibilidad entre diferentes plataformas y navegadores. Además, comprender estos aspectos sienta las bases para el desarrollo de aplicaciones web modernas, donde el cliente asume gran parte del procesamiento y la interacción con el usuario.
Los objetivos específicos de este apartado incluyen: definir qué significa integrar lenguajes de guión en navegadores, describir los mecanismos técnicos que permiten esta integración, analizar los estándares y tecnologías involucradas, y presentar ejemplos prácticos que ilustren su uso efectivo. La importancia práctica radica en que todo desarrollador web debe entender cómo funcionan estos mecanismos para optimizar sus aplicaciones, garantizar compatibilidad y mantener altos niveles de seguridad.
Marco Teórico y Fundamentos
Definiciones y Conceptos Clave
La integración de lenguajes de guión en navegadores web se refiere a la capacidad del navegador para interpretar, ejecutar y gestionar código escrito en lenguajes de scripting dentro del contexto de una página web. Estos lenguajes permiten manipular dinámicamente el contenido, gestionar eventos, comunicar con servidores y realizar tareas complejas sin necesidad de recargar la página completa.
Entre los principales lenguajes utilizados en este entorno se encuentran JavaScript, VBScript (en plataformas específicas) y otros lenguajes mediante tecnologías como WebAssembly. Sin embargo, JavaScript es actualmente el estándar dominante y universalmente soportado.
La integración implica tanto la inclusión del código en la estructura HTML (mediante etiquetas <script>) como la interacción con APIs internas del navegador que permiten acceder a funcionalidades del sistema operativo o hardware (como geolocalización, cámara o almacenamiento local).
Nota: La integración efectiva requiere que el navegador interprete correctamente el código, gestione su ciclo de vida (carga, ejecución, destrucción) y garantice un entorno seguro para evitar vulnerabilidades como ataques por scripts maliciosos.
Teorías y Principios
El soporte técnico para lenguajes de guión en navegadores se sustenta en principios fundamentales como:
- Interpretación vs. compilación: La mayoría de los navegadores modernos interpretan el código JavaScript en tiempo real mediante motores específicos (como V8 en Chrome o SpiderMonkey en Firefox). Sin embargo, algunos entornos utilizan técnicas de compilación just-in-time (JIT) para mejorar el rendimiento.
- Seguridad sandbox: La ejecución del código JavaScript se realiza en un entorno aislado que limita su acceso a recursos del sistema operativo, protegiendo así al usuario contra scripts maliciosos.
- Compatibilidad con estándares: La integración debe cumplir con las especificaciones definidas por organismos como WHATWG o W3C para garantizar interoperabilidad entre diferentes navegadores.
- Ejecución asíncrona: Muchos scripts se ejecutan asincrónicamente para no bloquear la carga o interacción del usuario, mediante técnicas como promesas, async/await, o eventos.
Estos principios aseguran que la integración sea eficiente, segura y compatible con las expectativas modernas de desarrollo web.
Desarrollo Teórico
En términos técnicos, la integración comienza con la inclusión del código script dentro del documento HTML mediante etiquetas específicas:
<script src="archivo.js"></script>o directamente embebido:
<script>
// Código JavaScript aquí
</script>El navegador detecta estas etiquetas durante la fase de parseo del documento HTML. Cuando encuentra una etiqueta <script>, dependiendo de sus atributos (async, defer, etc.), decide cuándo cargar y ejecutar el script.
El motor JavaScript interno interpreta el código línea por línea (o mediante compilación JIT), gestionando variables, funciones y objetos definidos. La interacción con APIs del navegador (como DOM, XMLHttpRequest o Fetch API) permite modificar dinámicamente el contenido visual o realizar llamadas a servicios externos.
Cabe destacar que la integración también involucra mecanismos para gestionar eventos (, onload) que disparan funciones script ante acciones del usuario o cambios en el estado del documento.
A nivel técnico avanzado, los navegadores implementan políticas como CORS (Cross-Origin Resource Sharing) para controlar qué scripts pueden acceder a recursos externos, garantizando así seguridad y control sobre la integración.
Relaciones y Contexto
La integración de lenguajes de guión está estrechamente relacionada con otros componentes del entorno cliente:
- Páginas HTML: Son la estructura base donde se insertan los scripts.
- Cascading Style Sheets (CSS): Aunque distintos en función, ambos trabajan conjuntamente para definir apariencia y comportamiento dinámico.
- APIs Web: Interfaces programáticas que permiten a los scripts interactuar con funcionalidades avanzadas del navegador.
- Motores JavaScript: Implementaciones internas que interpretan y ejecutan código JavaScript eficientemente.
- Sistemas de seguridad: Como políticas CORS o Content Security Policy (CSP), que regulan qué scripts pueden ejecutarse y qué recursos pueden accederse.
Toda esta red interrelacionada garantiza que los scripts puedan integrarse eficazmente dentro del ecosistema web moderno, permitiendo aplicaciones ricas e interactivas sin comprometer la seguridad ni la compatibilidad.
Ejemplos Aplicados
Ejemplo 1: Inclusión básica de un script externo
Supongamos una página sencilla que requiere incluir un archivo JavaScript externo para gestionar una interacción simple. El archivo <script src="funciones.js"></script>, contiene una función para mostrar un mensaje al hacer clic en un botón:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Básico</title>
<script src="funciones.js"></script>
</head>
<body>
<button id="saludo">Haz clic aquí</button>
<script>
document.getElementById('saludo').addEventListener('click', mostrarMensaje);
</script>
</body>
</html>Código contenido en funciones.js:
<script>
function mostrarMensaje() {
alert('¡Hola! Has hecho clic en el botón.');
}
</script>Puedes observar cómo se integra un script externo mediante <script src="...">. La función se enlaza al evento click del botón usando JavaScript embebido en línea. La carga secuencial asegura que las funciones estén disponibles cuando se asignan los manejadores.
Ejemplo 2: Uso avanzado con APIs Web
Pensemos en una aplicación que obtiene datos geográficos mediante la API Geolocation. El script incluido realiza una solicitud al usuario para compartir su ubicación y muestra las coordenadas:
<!DOCTYPE html>
<html>
<head>
<title>Geolocalización</title>
<script>
function obtenerUbicacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarPosicion);
} else {
alert("La geolocalización no es soportada por este navegador.");
}
}
function mostrarPosicion(pos) {
document.getElementById('coordenadas').textContent =
'Latitud: ' + pos.coords.latitude + ', Longitud: ' + pos.coords.longitude;
}
</script>
</head>
<body>
<button onclick="obtenerUbicacion()">Compartir ubicación</button>
<p id="coordenadas"> ></p>
</body>
</html>Aquí se evidencia cómo un script integra una API Web nativa para ofrecer funcionalidad avanzada. La gestión asíncrona es clave para mantener una experiencia fluida sin bloquear la interfaz.
Ejemplo 3: Caso complejo con múltiples scripts y políticas de seguridad
Pensemos en una aplicación moderna basada en módulos ES6 donde diferentes scripts gestionan distintas funcionalidades: interfaz gráfica, comunicación con servidores RESTful y gestión local. La estructura puede ser así:
<!DOCTYPE html>
<html lang="es">
<head>
Módulos ES6 Ejemplo Complejo</title>
<script type="module" src="app.js"></script>
</head>
<body>
<div id="contenido"></div&g
t;
<!-- app.js -->
import { cargarDatos } from './datos.js';
import { mostrarUI } from './ui.js';
document.addEventListener('DOMContentLoaded', () => {
mostrarUI();
cargarDatos();
});
</code></pre>
<p>Aquí se emplea un módulo ES6 para organizar el código modularmente. La integración requiere que el servidor sirva los archivos con cabeceras CORS adecuadas si son remotos. Además, las políticas CSP deben configurarse correctamente para permitir estos módulos seguros.</p>
<h3>Análisis y Consideraciones Especiales</h3>
<p>Aunque la integración de lenguajes de guión resulta esencial para potenciar las capacidades del cliente web, presenta desafíos importantes. Uno de los aspectos críticos es garantizar la seguridad frente a ataques por inyección o ejecución maliciosa. La adopción estricta de políticas CSP ayuda a limitar qué scripts pueden ejecutarse y desde qué orígenes.</p>
<p>No menos importante es gestionar correctamente las dependencias entre scripts externos e internos para evitar errores durante la carga o ejecución. El uso adecuado de atributos como <em>&async;</em>, <em>&defer;</em>, así como técnicas modernas como módulos ES6 contribuyen a optimizar el rendimiento y compatibilidad.</p>
<p>También es recomendable emplear herramientas automáticas para validar compatibilidad entre navegadores (como Babel) o verificar cumplimiento normativo respecto a estándares ECMAScript recientes. La tendencia actual apunta hacia el uso intensivo de módulos JS nativos y APIs Web avanzadas integradas mediante scripts seguros y bien gestionados.</p>
<h3>Síntesis y Conceptos Clave</h3>
<ul>
<li><strong>Integración:</strong> Proceso mediante el cual los navegadores interpretan y ejecutan código scripting dentro de páginas web.</li>
<li><strong><script></strong>: Elemento HTML fundamental para incluir código JavaScript u otros lenguajes compatibles.</li>
<li><strong>Motores JavaScript:</strong>: Componentes internos responsables de interpretar código JS eficientemente (ejemplo: V8).</li>
<li><strong>Sistemas seguros:</strong>: Uso de políticas CSP, sandboxing e APIs Web seguras para proteger contra vulnerabilidades.</li>
<li><strong>Módulos ES6:</strong>: Mecanismo moderno para organizar scripts complejos mediante import/export, facilitando mantenimiento y escalabilidad.</li>
<li><strong>CORS & CSP:</strong>: Políticas esenciales que regulan qué scripts pueden ejecutarse o acceder a recursos externos.</li></ul>
<p>Cumplir con estos conceptos garantiza una integración efectiva que respete principios técnicos sólidos mientras soporta aplicaciones web modernas e interactivas. En futuros apartados se abordarán aspectos específicos sobre optimización, seguridad avanzada y desarrollo modular basado en estas bases teóricas.</p> </div>
<!-- Acciones al final del apartado: marcar como visto + CTA siguiente apartado -->
<div class="apartado-actions">
<div class="apartado-actions-text">
<strong>¿Has terminado este apartado?</strong>
<span id="apartado-actions-hint">Tu progreso se guarda en este navegador. <a href="/register.php">Regístrate</a> para conservarlo en tu cuenta.</span>
</div>
<div class="apartado-actions-buttons">
<button type="button" id="btn-completar" class="btn-mark-seen" data-action="completar-apartado"
aria-pressed="false" aria-keyshortcuts="m">
<span class="mark-icon" aria-hidden="true"></span>
<span class="mark-label">Marcar como visto</span>
</button>
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-2" class="btn-next-cta" data-direction="next" rel="next">
Siguiente apartado
<span class="next-cta-title" aria-hidden="true">· Estructura general de un programa en un lenguaje de guión</span>
<span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Navegación inferior -->
<nav class="content-navigation" aria-label="Apartado anterior y siguiente">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-7/apartado-2" class="nav-btn nav-prev" rel="prev" data-direction="prev" aria-keyshortcuts="ArrowLeft k">
<i class="fas fa-chevron-left" aria-hidden="true"></i>
<div>
<span class="nav-label">Anterior</span>
<span class="nav-title">Lenguajes para el desarrollo de contenido dinámico</span>
</div>
</a>
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-2" class="nav-btn nav-next" rel="next" data-direction="next" aria-keyshortcuts="ArrowRight j">
<div>
<span class="nav-label">Siguiente</span>
<span class="nav-title">Estructura general de un programa en un lenguaje de guión</span>
</div>
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</a>
</nav>
</article>
</main>
<!-- Fondo oscurecido del cajón lateral (solo móvil; lo gestiona curso-viewer.js) -->
<button type="button" id="sidebarBackdrop" class="sidebar-backdrop" hidden tabindex="-1" aria-label="Cerrar índice"></button>
<!-- Índice del curso (cajón lateral en móvil, columna fija en escritorio) -->
<aside id="sidebar" class="sidebar" aria-labelledby="sidebar-title">
<div class="sidebar-header">
<h2 id="sidebar-title">Programación Web en el Entorno Cliente</h2>
<button id="closeSidebar" type="button" class="close-sidebar" aria-label="Cerrar índice">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<!-- Barra de progreso -->
<div class="progress-container">
<div class="progress-info">
<span id="progress-label">Progreso del curso</span>
<span class="progress-percentage" aria-hidden="true">0%</span>
</div>
<div class="progress-bar" role="progressbar" aria-labelledby="progress-label"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
aria-valuetext="0% · 0 de 71 apartados">
<div class="progress-fill" style="width: 0%"></div>
</div>
<div class="progress-stats">
0 de 71 apartados completados
</div>
</div>
<!-- Índice del curso -->
<nav class="course-index" aria-label="Índice del curso">
<section class="module-item" aria-labelledby="mod-1">
<div class="module-header">
<span class="module-number">Tema 1</span>
<h3 class="module-title" id="mod-1">Diseño web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-1/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">1.1</span>
<span class="apartado-title">
Principios de diseño web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-1/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">1.2</span>
<span class="apartado-title">
El proceso de diseño web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-2">
<div class="module-header">
<span class="module-number">Tema 2</span>
<h3 class="module-title" id="mod-2">Lenguajes de marcado generales</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">2.1</span>
<span class="apartado-title">
Origen de los lenguajes de marcado generales - sgml y xml </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">2.2</span>
<span class="apartado-title">
Características generales de los lenguajes de marcado </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">2.3</span>
<span class="apartado-title">
Estructura general de un documento con lenguaje de marcado </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">2.4</span>
<span class="apartado-title">
Documentos válidos y bien formados </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-3">
<div class="module-header">
<span class="module-number">Tema 3</span>
<h3 class="module-title" id="mod-3">Lenguajes de marcado para presentación de páginas web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.1</span>
<span class="apartado-title">
Historia de html y xhtml </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.2</span>
<span class="apartado-title">
Estructura de un documento </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.3</span>
<span class="apartado-title">
Color </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.4</span>
<span class="apartado-title">
Texto </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.5</span>
<span class="apartado-title">
Enlaces de hipertexto </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-6">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.6</span>
<span class="apartado-title">
Imágenes </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-7">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.7</span>
<span class="apartado-title">
Listas </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-8">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.8</span>
<span class="apartado-title">
Tablas </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-9">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.9</span>
<span class="apartado-title">
Marcos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-10">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.10</span>
<span class="apartado-title">
Formularios </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-11">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.11</span>
<span class="apartado-title">
Elementos específicos para tecnologías móviles </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-3/apartado-12">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">3.12</span>
<span class="apartado-title">
Elementos en desuso </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-4">
<div class="module-header">
<span class="module-number">Tema 4</span>
<h3 class="module-title" id="mod-4">Hojas de estilo web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-4/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">4.1</span>
<span class="apartado-title">
Tipos de hojas de estilo - estáticas y dinámicas </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-4/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">4.2</span>
<span class="apartado-title">
Elementos y estructura de una hoja de estilo </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-4/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">4.3</span>
<span class="apartado-title">
Diseño de estilos para diferentes dispositivos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-4/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">4.4</span>
<span class="apartado-title">
Buenas prácticas en el uso de hojas de estilo </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-5">
<div class="module-header">
<span class="module-number">Tema 5</span>
<h3 class="module-title" id="mod-5">Arquitecturas de aplicaciones web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-5/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">5.1</span>
<span class="apartado-title">
Esquema general </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-5/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">5.2</span>
<span class="apartado-title">
Arquitectura en capas </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-5/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">5.3</span>
<span class="apartado-title">
Interacción entre las capas cliente y servidor </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-5/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">5.4</span>
<span class="apartado-title">
Arquitectura de la capa cliente </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-6">
<div class="module-header">
<span class="module-number">Tema 6</span>
<h3 class="module-title" id="mod-6">Navegadores web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-6/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">6.1</span>
<span class="apartado-title">
Arquitectura de un navegador </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-6/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">6.2</span>
<span class="apartado-title">
Navegadores de uso común </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-6/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">6.3</span>
<span class="apartado-title">
Seguridad en navegadores </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-6/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">6.4</span>
<span class="apartado-title">
Integración de aplicaciones en navegadores </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-6/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">6.5</span>
<span class="apartado-title">
Conformidad a estándares </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-7">
<div class="module-header">
<span class="module-number">Tema 7</span>
<h3 class="module-title" id="mod-7">Creación de contenido web dinámico</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-7/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">7.1</span>
<span class="apartado-title">
Fundamentos de programación </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-7/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">7.2</span>
<span class="apartado-title">
Lenguajes para el desarrollo de contenido dinámico </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-8">
<div class="module-header">
<span class="module-number">Tema 8</span>
<h3 class="module-title" id="mod-8">Lenguajes de guión de uso general</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item active ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-1" aria-current="page">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.1</span>
<span class="apartado-title">
Integración de lenguajes de guión en navegadores web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.2</span>
<span class="apartado-title">
Estructura general de un programa en un lenguaje de guión </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.3</span>
<span class="apartado-title">
Funciones </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.4</span>
<span class="apartado-title">
Manipulación de texto </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.5</span>
<span class="apartado-title">
Listas - arrays </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-6">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.6</span>
<span class="apartado-title">
Formatos estándar de almacenamiento de datos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-7">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.7</span>
<span class="apartado-title">
Objetos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-8">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.8</span>
<span class="apartado-title">
El modelo de documento web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-9">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.9</span>
<span class="apartado-title">
Gestión de eventos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-10">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.10</span>
<span class="apartado-title">
Gestión de errores </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-11">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.11</span>
<span class="apartado-title">
Usos específicos de lenguajes de guión </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-12">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">8.12</span>
<span class="apartado-title">
Entornos integrados </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-9">
<div class="module-header">
<span class="module-number">Tema 9</span>
<h3 class="module-title" id="mod-9">Contenidos multimedia</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.1</span>
<span class="apartado-title">
Definición de multimedia. tipos de recursos multimedia </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.2</span>
<span class="apartado-title">
Inclusión de contenido multimedia en páginas web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.3</span>
<span class="apartado-title">
Gráficos multimedia </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.4</span>
<span class="apartado-title">
Audio </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.5</span>
<span class="apartado-title">
Vídeo </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-6">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.6</span>
<span class="apartado-title">
Animaciones multimedia </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-9/apartado-7">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">9.7</span>
<span class="apartado-title">
Elementos interactivos </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-10">
<div class="module-header">
<span class="module-number">Tema 10</span>
<h3 class="module-title" id="mod-10">Accesibilidad web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.1</span>
<span class="apartado-title">
Definición de accesibilidad web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.2</span>
<span class="apartado-title">
Normativa y estándares sobre accesibilidad web </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.3</span>
<span class="apartado-title">
Guías para el cumplimiento de normativas y estándares </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.4</span>
<span class="apartado-title">
Descripción del proceso de la conformidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.5</span>
<span class="apartado-title">
Tecnologías donde la accesibilidad es aplicable </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-6">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.6</span>
<span class="apartado-title">
Herramientas para la validación de la accesibilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-10/apartado-7">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">10.7</span>
<span class="apartado-title">
Evolución de la accesibilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
</ul>
</section>
<section class="module-item" aria-labelledby="mod-11">
<div class="module-header">
<span class="module-number">Tema 11</span>
<h3 class="module-title" id="mod-11">Usabilidad web</h3>
</div>
<ul class="apartados-list">
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-1">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.1</span>
<span class="apartado-title">
Definición de usabilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-2">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.2</span>
<span class="apartado-title">
Importancia del diseño web centrado en el usuario </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-3">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.3</span>
<span class="apartado-title">
Diferencias entre accesibilidad y usabilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-4">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.4</span>
<span class="apartado-title">
Ventajas y problemas en la combinación de accesibilidad y usabilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-5">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.5</span>
<span class="apartado-title">
Ventajas y dificultades en la implantación de sitios web usables </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-6">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.6</span>
<span class="apartado-title">
Métodos de usabilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-7">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.7</span>
<span class="apartado-title">
Análisis de requerimientos de usuario </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-8">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.8</span>
<span class="apartado-title">
Principios del diseño conceptual </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-9">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.9</span>
<span class="apartado-title">
Pautas para la creación de sitios web usables </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-10">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.10</span>
<span class="apartado-title">
Evaluación de la usabilidad </span>
<span class="cg-sr-only apartado-estado"></span>
</a>
</li>
<li class="apartado-item tipo-actividades ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-11">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.11</span>
<span class="apartado-title">
Actividades prácticas del curso <i class="fas fa-tasks" aria-hidden="true"></i> </span>
<span class="cg-sr-only apartado-estado"> (actividades)</span>
</a>
</li>
<li class="apartado-item tipo-bibliografia ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-11/apartado-12">
<span class="apartado-check" aria-hidden="true">
<i class="far fa-circle"></i>
</span>
<span class="apartado-number">11.12</span>
<span class="apartado-title">
Bibliografía y referencias del curso <i class="fas fa-book" aria-hidden="true"></i> </span>
<span class="cg-sr-only apartado-estado"> (bibliografía)</span>
</a>
</li>
</ul>
</section>
</nav>
<!-- Botón de certificado (solo visible cuando está completado) -->
</aside>
<script>
// Configuración global para el viewer
window.CURSO_CONFIG = {
slug: "programacion-web-en-el-entorno-cliente",
moduloActual: 8,
apartadoActual: 1,
basePath: "",
baseUrl: "https:\/\/mail.cursogratis.info",
// Sin sesión no se envía progreso al servidor (evita POST 401 en cada visita anónima)
loggedIn: false };
</script>
<!-- Cargar data-loader ANTES de curso-viewer.js -->
<script src="/assets/js/data-loader.min.js?v=1789168726"></script>
<script src="/assets/js/curso-viewer.min.js?v=1789168725"></script>
<!-- Mejoras visor: notas + highlighting + atajos teclado -->
<script src="/assets/js/viewer-enhancements.min.js?v=1789168730" defer></script>
<footer class="cg-ink-section mt-auto" aria-labelledby="footer-heading">
<h2 id="footer-heading" class="cg-sr-only">Pie de página</h2>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<nav class="grid grid-cols-2 md:grid-cols-4 gap-8" aria-label="Enlaces del sitio">
<div class="col-span-2 md:col-span-1">
<a href="/" class="inline-flex items-center gap-2 mb-4 rounded-md">
<svg class="h-7 w-7 text-marcador" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M24 4C25.7818 14.2173 33.7827 22.2182 44 24C33.7827 25.7818 25.7818 33.7827 24 44C22.2182 33.7827 14.2173 25.7818 4 24C14.2173 22.2182 22.2182 14.2173 24 4Z" fill="currentColor"></path>
</svg>
<span class="font-display font-bold text-xl text-white">CursoGratis<span class="text-white/70">.info</span></span>
</a>
<p class="text-sm text-white/75 leading-relaxed">Cursos 100% gratis. Diploma verificable con QR desde €12,99, solo si lo quieres.</p>
</div>
<div>
<h3 class="font-display font-semibold text-white mb-4">Aprende</h3>
<ul class="space-y-2.5 text-sm text-white/75">
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/categorias.php">Todas las categorías</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/buscar.php">Buscar cursos</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/carreras.php">Carreras profesionales</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/blog/">Blog</a></li>
</ul>
</div>
<div>
<h3 class="font-display font-semibold text-white mb-4">Diplomas</h3>
<ul class="space-y-2.5 text-sm text-white/75">
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/precios.php">Precios y descuentos</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/verificar.php">Verificar un diploma</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/empresas.php">Packs para empresas</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/afiliados.php">Programa de afiliados (50 %)</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/testimonios.php">Testimonios</a></li>
</ul>
</div>
<div>
<h3 class="font-display font-semibold text-white mb-4">Soporte</h3>
<ul class="space-y-2.5 text-sm text-white/75">
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/faq.php">Centro de ayuda</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/contacto.php">Contacto</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="mailto:hola@cursogratis.info">hola@cursogratis.info</a></li>
<li><a class="inline-block py-0.5 hover:text-marcador transition-colors" href="/legal/terminos-venta.php">Términos de venta</a></li>
</ul>
</div>
</nav>
<div class="border-t border-white/10 mt-10 pt-6">
<!-- text-white/70 sobre tinta = 7.9:1 (antes /50 = 4.5:1 y /40 = 3.6:1, por debajo de AA) -->
<nav class="flex flex-wrap justify-center items-center gap-x-4 gap-y-0 text-xs text-white/70 mb-2" aria-label="Legal">
<a class="inline-flex items-center min-h-[44px] hover:text-marcador transition-colors" href="/legal/aviso-legal.php">Aviso legal</a>
<span aria-hidden="true">·</span>
<a class="inline-flex items-center min-h-[44px] hover:text-marcador transition-colors" href="/legal/privacidad.php">Privacidad</a>
<span aria-hidden="true">·</span>
<a class="inline-flex items-center min-h-[44px] hover:text-marcador transition-colors" href="/legal/cookies.php">Cookies</a>
<span aria-hidden="true">·</span>
<a class="inline-flex items-center min-h-[44px] hover:text-marcador transition-colors" href="/legal/devoluciones.php">Devoluciones</a>
<span aria-hidden="true">·</span>
<button type="button" class="cg-link-btn inline-flex items-center !no-underline hover:!text-marcador transition-colors" data-cg-cookie-config>Configurar cookies</button>
</nav>
<p class="text-center text-xs text-white/70">© 2026 CursoGratis.info. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<!-- Cookie banner GDPR-compliant -->
<script src="/assets/js/cookie-banner.min.js?v=1789168725" defer></script>
<!-- Wishlist global (localStorage) -->
<script src="/assets/js/wishlist.min.js?v=1789168730" defer></script>
<!-- Onboarding tour para nuevos usuarios -->
<script src="/assets/js/onboarding.min.js?v=1789168728" defer></script>
<!-- Push notifications (solo activo si hay clave VAPID configurada) -->
<script src="/assets/js/push-notifications.min.js?v=1789168729" defer></script>
<!-- Service Worker registration (PWA) -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register("\/sw.js", { scope: "\/" })
.catch(function () { /* silencioso */ });
});
}
</script>
</div>
<!-- Scripts globales (solo se cargan una vez) -->
<script>
// Cargar scripts solo si no han sido cargados
if (!window.scriptsLoaded) {
window.scriptsLoaded = true;
// Cargar data-loader.js
if (typeof DataLoader === 'undefined') {
const dataLoaderScript = document.createElement('script');
dataLoaderScript.src = "\/assets\/js\/data-loader.min.js?v=1789168726";
document.head.appendChild(dataLoaderScript);
}
// Cargar search.js
if (typeof CourseSearch === 'undefined') {
const searchScript = document.createElement('script');
searchScript.src = "\/assets\/js\/search.min.js?v=1789168729";
searchScript.onload = function() {
// Inicializar búsqueda cuando se cargue
if (typeof CourseSearch !== 'undefined') {
window.courseSearch = new CourseSearch();
}
};
document.head.appendChild(searchScript);
}
}
</script>
</body>
</html>