2.1 Origen de los lenguajes de marcado generales - SGML y XML
En el contexto de la evolución de los lenguajes de marcado, es fundamental comprender los antecedentes históricos y técnicos que dieron lugar a los lenguajes de marcado generales, en particular al SGML (Standard Generalized Markup Language) y al XML (eXtensible Markup Language). Ambos representan hitos en la estandarización y desarrollo de tecnologías que permiten la estructuración, almacenamiento y transmisión de información en formatos legibles tanto por humanos como por máquinas. La importancia práctica de estos lenguajes radica en su capacidad para facilitar la interoperabilidad, la extensibilidad y la compatibilidad en entornos diversos, aspectos esenciales en el diseño y desarrollo de páginas web modernas. Además, su influencia se extiende a otros ámbitos como la gestión documental, los sistemas de información y las aplicaciones multimedia.
Marco Teórico y Fundamentos
Definiciones y Conceptos Clave
El lenguaje de marcado es un sistema que utiliza etiquetas o tags para definir la estructura y el formato del contenido en un documento digital. Estas etiquetas permiten identificar diferentes partes del contenido, como encabezados, párrafos, listas o tablas, facilitando su procesamiento automático. La estructura que se crea mediante estos lenguajes es jerárquica y formalizada, lo que favorece la interpretación coherente por parte de distintos sistemas.
SGML (Standard Generalized Markup Language), definido en 1986 por el International Organization for Standardization (ISO), es un lenguaje meta-lenguaje que permite definir otros lenguajes de marcado específicos. Es decir, SGML proporciona las reglas y convenciones para crear lenguajes de marcado adaptados a necesidades particulares, siendo altamente flexible y extensible.
XML (eXtensible Markup Language), desarrollado por el World Wide Web Consortium (W3C) en 1998, es una simplificación y adaptación del SGML con el objetivo de facilitar la creación de lenguajes de marcado específicos para diferentes ámbitos. XML mantiene la estructura jerárquica y la sintaxis estricta de SGML pero con una sintaxis más sencilla, promoviendo su uso en aplicaciones web, intercambio de datos y sistemas distribuidos.
Teorías y Principios
El desarrollo de los lenguajes de marcado generales responde a varias teorías fundamentales relacionadas con la estructuración del conocimiento, la interoperabilidad y la extensibilidad. La idea central es que los documentos no deben limitarse a presentar información estática sino que deben ser estructurados mediante etiquetas que describan su significado semántico.
Desde una perspectiva técnica, estos lenguajes se basan en principios como:
- Sintaxis formalizada: reglas precisas para definir cómo deben escribirse las etiquetas y atributos.
- Jerarquía estructural: los documentos se organizan en nodos anidados formando árboles DOM (Document Object Model).
- Extensibilidad: posibilidad de definir nuevas etiquetas sin alterar el núcleo del lenguaje.
- Separación entre contenido y presentación: especialmente en XML, donde el contenido puede ser separado mediante hojas de estilo o tecnologías similares.
Estos principios aseguran que los documentos sean fáciles de validar, interpretar y transformar mediante diferentes herramientas automáticas.
Desarrollo Teórico
El SGBML, como meta-lenguaje, establece un conjunto de reglas para definir lenguajes específicos mediante un conjunto formalizado de elementos: <DOCTYPE>, <ELEMENT>, <ATTLIST>, entre otros. La flexibilidad radica en que cada lenguaje definido puede tener su propia gramática, permitiendo adaptarse a diferentes dominios como documentos legales, ingeniería o publicaciones científicas.
Por ejemplo, un esquema SGML puede definir qué elementos son válidos para un tipo particular de documento: un artículo científico puede tener `
` para títulos, `<author>` para autores y `<abstract>` para resúmenes. La estructura general del documento se valida contra estas definiciones mediante un proceso conocido como validación.</p>
<p>XML simplifica este proceso al eliminar muchas características complejas del SGML —como las declaraciones DTD complejas— pero mantiene su esencia: definir reglas claras para estructurar datos. En XML, los documentos son siempre bien formados si cumplen con las reglas sintácticas básicas: cada etiqueta abierta debe cerrarse correctamente, las etiquetas deben ser anidadas correctamente y los atributos deben estar entre comillas.</p>
<p>A nivel técnico, XML es compatible con un amplio ecosistema de tecnologías como XPath, XSLT o DOM que permiten manipular, transformar y consultar documentos estructurados eficientemente.</p>
<h3>Relaciones y Contexto</h3>
<p>Los lenguajes SGML y XML están estrechamente relacionados con otros conceptos fundamentales del curso. En particular:</p>
<ul>
<li><strong>Sintaxis y estructura:</strong> conceptos que se aplican también a HTML, aunque con diferencias importantes en flexibilidad y formalización.</li>
<li><strong>Estructuración semántica:</strong> XML promueve una separación clara entre contenido y presentación, facilitando la accesibilidad e interoperabilidad en entornos web.</li>
<li><strong>Estandarización:</strong> ambos lenguajes han contribuido a establecer estándares internacionales para el intercambio electrónico de información.</li>
<li><strong>Tecnologías complementarias:</strong> XML sirve como base para tecnologías como SOAP (para servicios web), RSS (para sindicación), SVG (gráficos vectoriales) o XBRL (informes financieros).</li>
</ul>
<p>A medida que avanzamos en el estudio del curso, comprender estos antecedentes permitirá entender mejor cómo se diseñan los lenguajes específicos como HTML o XHTML y cómo se integran en arquitecturas modernas basadas en datos estructurados.</p>
<h2>Ejemplos Aplicados</h2>
<h3>Ejemplo 1: Documento simple en XML</h3>
<p>Supongamos que queremos crear un archivo XML para describir una librería con libros. La estructura básica sería:</p>
<pre><code><?xml version="1.0" encoding="UTF-8"?>
<library>
<book id="001">
<title>Cien años de soledad</title>
<author>Gabriel García Márquez</author>
<year>1967</year>
</book>
<book id="002">
<title>Don Quijote</title>
<author>Miguel de Cervantes</author>
<year>1605</year>
</book>
</library></code></pre>
<p>Cada elemento tiene una etiqueta clara (<code><title></code>) que indica su significado semántico. La estructura jerárquica permite entender fácilmente qué datos corresponden a cada libro.</p>
<h3>Ejemplo 2: Caso profesional - Intercambio de datos entre sistemas</h3>
<p>En una empresa editorial digital, se utiliza XML para intercambiar catálogos entre diferentes departamentos o socios comerciales. Cada catálogo sigue un esquema definido por DTD o XML Schema que garantiza la validez del contenido. Por ejemplo:</p>
<pre><code><productCatalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="catalogo.xsd">
<product id="A123">
<name>Libro electrónico: Programación Web</name>
<price currency="EUR">29.99</price>
<availability>In stock</availability>
</product>
</productCatalog></code></pre>
<p>Aquí se aprovecha la capacidad del XML para validar automáticamente que todos los productos tengan los atributos necesarios y respeten la estructura definida por el esquema.</p>
<h3>Ejemplo 3: Caso complejo - Integración con tecnologías modernas</h3>
<p>Un sistema avanzado puede usar XML junto con XSLT para transformar datos estructurados en diferentes formatos visuales o informativos. Por ejemplo, convertir un inventario XML en una página HTML dinámica mediante hojas de estilo XSLT permite presentar datos actualizados sin modificar manualmente el código HTML.</p>
<h2>Análisis y Consideraciones Especiales</h2>
<p>Aunque los lenguajes SGML y XML ofrecen flexibilidad y estandarización, existen aspectos críticos a tener en cuenta. La complejidad del SGML puede dificultar su implementación práctica debido a su sintaxis extensa y opciones avanzadas que no siempre son necesarias. Por ello, XML fue diseñado con una sintaxis más sencilla pero conservando sus capacidades esenciales.</p>
<p>No obstante, uno de los errores comunes al trabajar con XML es no validar correctamente los documentos contra sus esquemas o DTDs asociados. Esto puede generar problemas de interoperabilidad o errores en procesamiento automático. Además, es importante seguir buenas prácticas como mantener una estructura coherente, utilizar nombres descriptivos para etiquetas y documentar claramente los esquemas utilizados.</p>
<p>Tanto SGML como XML han evolucionado hacia modelos más especializados o integrados con otras tecnologías (como JSON). Sin embargo, siguen siendo fundamentales en ámbitos donde la estructura formalizada del dato es prioritaria frente a otras formas menos rígidas.</p>
<h2>Síntesis y Conceptos Clave</h2>
<p><strong>Síntesis:</strong>, los lenguajes <em>Sgml</em> y <em>Xtml</em>, representan hitos históricos en la estandarización del marcado digital. SGML sirvió como base teórica flexible para definir otros lenguajes específicos mediante reglas formales. XML simplificó estas ideas permitiendo una sintaxis más accesible sin perder sus capacidades estructurales esenciales. Ambos han sido cruciales para facilitar el intercambio interoperable de información estructurada en múltiples ámbitos tecnológicos.</p>
<p><strong>Puntos clave:</strong></p>
<ol>
<li><strong>Sgml</strong>: Lenguaje meta-lenguaje flexible para definir otros lenguajes específicos.</li>
<li><strong>Xtml</strong>: Simplificación práctica del SGML orientada a aplicaciones web e interoperabilidad.</li>
<li><strong>Sintaxis formalizada</strong>: Reglas estrictas para garantizar documentos válidos.</li>
<li><strong>Estructura jerárquica</strong>: Datos organizados en árboles DOM para fácil manipulación.</li>
<li><strong>Extensibilidad</strong>: Capacidad para crear nuevas etiquetas según necesidades específicas.</li>
<li><strong>Estandarización internacional</strong>: Facilita interoperabilidad global entre sistemas informáticos.</li>
<li><strong>Tecnologías relacionadas</strong>: XPath, XSLT, DOM complementan estos lenguajes facilitando manipulación avanzada.</li>
<li><strong>Diferencias clave entre SGML y XML</strong>: Complejidad vs simplicidad, flexibilidad vs estandarización estricta.</li>
<li><strong>Evolución histórica</strong>: Desde SGML hacia XML adaptándose a nuevas demandas tecnológicas.</li>
<li><strong>Papel actual</strong>: Base conceptual para muchas tecnologías modernas relacionadas con datos estructurados.</li></ol></p>
<!-- Este contenido proporciona una visión exhaustiva sobre el origen histórico y técnico del SGML y XML dentro del marco teórico del curso "Lenguajes de marcado generales". Es fundamental comprender estos conceptos para entender cómo evolucionaron las tecnologías actuales utilizadas en programación web cliente. --> </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-2/apartado-2" class="btn-next-cta" data-direction="next" rel="next">
Siguiente apartado
<span class="next-cta-title" aria-hidden="true">· Características generales de los lenguajes de marcado</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-1/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">El proceso de diseño web</span>
</div>
</a>
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/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">Características generales de los lenguajes de marcado</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 active ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-2/apartado-1" aria-current="page">
<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 ">
<a href="https://mail.cursogratis.info/curso/programacion-web-en-el-entorno-cliente/modulo-8/apartado-1">
<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: 2,
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>