Amigas Web Amigos — Salud con Nutrición

Propósito del Directorio

Este documento presenta seis capas de conexión primitiva entre el código, los sistemas operativos, los navegadores, los servidores y las redes de datos. Cada capa incluye un recurso funcional en la propia página y, debajo, el código desmenuzado con anotaciones, identificadores y especificaciones.

El objetivo es ofrecer una visión formativa y gerencial que permita entender no solo qué hace cada recurso, sino también cómo está construido y desde qué capa de conexión opera.

Versión: 1.0 · Documento demostrativo Autoría asistida: Copilot *.1 · Cortana *.1 Ámbito: Educativo · Profesional · Institucional

🏛️ Capa 1 · Conexión Primitiva de Núcleo Local

Código ↔ Sistema Operativo · Scripts nativos y automatización local

ID-CAPA: C01 Tipo: Núcleo Local / Consola

Recurso C1-R001 · Generador de Script Local para Organización de Fotos

Este recurso genera un script de consola (PowerShell o Bash) para organizar fotografías en carpetas por año y mes. El script se ejecuta en el sistema operativo del usuario, fuera del navegador, representando una conexión primitiva de núcleo local.

id_recurso: C1-R001 id_categoria: Capa 1 · Núcleo Local unidad: Script de automatización local

Ruta origen de fotos (ejemplo: C:\Fotos\Entrada o /home/usuario/fotos): Ruta destino organizada (opcional, puede ser la misma): Tipo de script a generar: Script generado (copia y ejecuta en tu sistema operativo):

Análisis del Recurso C1-R001

Procedencia: Generado desde el navegador por Copilot *.1, pero diseñado para ejecutarse en el sistema operativo del usuario.
Unidad que sirve la capacidad: Script de consola (PowerShell o Bash) que organiza archivos fotográficos en carpetas por año y mes.
Usos principales: - Organización masiva de fotografías.
- Preparación de archivos para copias de seguridad.
- Limpieza y estructuración de directorios personales o institucionales.
Características técnicas: - No se ejecuta en el navegador: el usuario debe copiar el script y ejecutarlo en su sistema.
- Opera directamente sobre el sistema de archivos local.
- Representa una conexión de bajo nivel entre código y sistema operativo.

Ver código desmenuzado del Recurso C1-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 1)

<section class="capa" id="capa1">
    <!-- ... cabecera de la capa omitida por brevedad ... -->

    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa1-titulo">
            <h4 id="recurso-capa1-titulo">Recurso C1-R001 · Generador de Script Local para Organización de Fotos</h4>
            <p>
                Este recurso genera un script de consola (PowerShell o Bash) para organizar fotografías en carpetas
                por año y mes. El script se ejecuta en el sistema operativo del usuario, fuera del navegador,
                representando una conexión primitiva de núcleo local.
            </p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C1-R001</span>
                <span>id_categoria: Capa 1 · Núcleo Local</span>
                <span>unidad: Script de automatización local</span>
            </div>

            <div class="recurso-widget">
                <label for="c1-ruta-origen">Ruta origen de fotos:</label>
                <input type="text" id="c1-ruta-origen" placeholder="Introduce la ruta de origen...">

                <label for="c1-ruta-destino">Ruta destino organizada (opcional, puede ser la misma):</label>
                <input type="text" id="c1-ruta-destino" placeholder="Introduce la ruta de destino...">

                <label for="c1-tipo-script">Tipo de script a generar:</label>
                <select id="c1-tipo-script">
                    <option value="powershell">PowerShell (Windows)</option>
                    <option value="bash">Bash (Linux / macOS)</option>
                </select>

                <button type="button" id="c1-generar-script">Generar script de organización</button>

                <label for="c1-salida-script">Script generado:</label>
                <textarea id="c1-salida-script" rows="8" readonly></textarea>
            </div>
        </article>

        <!-- El bloque <aside> con el análisis se define a continuación en el HTML -->
    </div>
</section>

Código JavaScript asociado (para colocar antes del cierre de </body>)

// =========================
// LÓGICA DEL RECURSO C1-R001
// =========================
(function () {
    const inputOrigen = document.getElementById("c1-ruta-origen");
    const inputDestino = document.getElementById("c1-ruta-destino");
    const selectTipo = document.getElementById("c1-tipo-script");
    const salida = document.getElementById("c1-salida-script");
    const boton = document.getElementById("c1-generar-script");

    if (!inputOrigen || !inputDestino || !selectTipo || !salida || !boton) return;

    boton.addEventListener("click", () => {
        const origen = (inputOrigen.value || "").trim();
        const destino = (inputDestino.value || "").trim() || origen;
        const tipo = selectTipo.value;

        if (!origen) {
            salida.value = "# Por favor, indica al menos una ruta de origen.";
            return;
        }

        if (tipo === "powershell") {
            salida.value = generarScriptPowerShell(origen, destino);
        } else {
            salida.value = generarScriptBash(origen, destino);
        }
    });

    function generarScriptPowerShell(origen, destino) {
        return `# Script PowerShell generado por Recurso C1-R001
# id_recurso: C1-R001
# id_categoria: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en PowerShell

$origen = "${origen}"
$destino = "${destino}"

Write-Host "Organizando fotos desde $origen hacia $destino por año/mes..."

Get-ChildItem -Path $origen -Recurse -File |
    Where-Object { $_.Extension -match "\\.(jpg|jpeg|png|heic|gif)$" } |
    ForEach-Object {
        $fecha = $_.LastWriteTime
        $anio = $fecha.Year
        $mes = "{0:D2}" -f $fecha.Month
        $carpetaDestino = Join-Path -Path $destino -ChildPath "$anio\\$mes"

        if (-not (Test-Path $carpetaDestino)) {
            New-Item -ItemType Directory -Path $carpetaDestino | Out-Null
        }

        $rutaDestino = Join-Path -Path $carpetaDestino -ChildPath $_.Name
        Move-Item -Path $_.FullName -Destination $rutaDestino -Force
    }

Write-Host "Proceso completado."`;
    }

    function generarScriptBash(origen, destino) {
        return `#!/usr/bin/env bash
# Script Bash generado por Recurso C1-R001
# id_recurso: C1-R001
# id_categoria: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en Bash

ORIGEN="${origen}"
DESTINO="${destino}"

echo "Organizando fotos desde $ORIGEN hacia $DESTINO por año/mes..."

find "$ORIGEN" -type f \\( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.heic" -o -iname "*.gif" \\) | while read -r archivo; do
    fecha=$(date -r "$archivo" +"%Y %m")
    anio=$(echo "$fecha" | cut -d" " -f1)
    mes=$(echo "$fecha" | cut -d" " -f2)

    carpeta_destino="$DESTINO/$anio/$mes"
    mkdir -p "$carpeta_destino"

    mv "$archivo" "$carpeta_destino/"
done

echo "Proceso completado."`;
    }
})();

Nota: Este recurso no ejecuta el script en el navegador. El usuario debe copiar el código generado y ejecutarlo en su consola local (PowerShell o Bash), lo que refleja la naturaleza de la Capa 1.

Recurso 1-1 · Datos Abiertos del Gobierno de España

Acceso directo al portal oficial datos.gob.es, punto central de datos abiertos de la Administración española para proyectos educativos y comunitarios.

id_recurso: R1-1 fuente: datos.gob.es

🌐 Explorar datos.gob.es

Recurso C1-R002 · Generador de Script Local para Copia de Seguridad de Documentos

Este recurso genera un script de consola (PowerShell o Bash) para realizar copias de seguridad de documentos desde una carpeta origen a una carpeta destino, manteniendo la estructura de subcarpetas. El script se ejecuta en el sistema operativo del usuario, fuera del navegador.

id_recurso: C1-R002 id_capa: Capa 1 · Núcleo Local unidad: Script de copia de seguridad local

Análisis del Recurso C1-R002

Procedencia: Generado desde el navegador por Copilot 1.* · Cortana *.1, diseñado para ejecutarse en el sistema operativo del usuario.
Unidad que sirve la capacidad: Script de consola (PowerShell o Bash) que realiza copias de seguridad de documentos manteniendo la estructura de carpetas.
Usos principales: - Copia de seguridad periódica de documentos personales o institucionales.
- Preparación de material para archivado externo o en la nube.
- Refuerzo de políticas de conservación de la información.
Características técnicas: - No se ejecuta en el navegador: el usuario debe copiar el script y ejecutarlo en su sistema.
- Opera directamente sobre el sistema de archivos local.
- Mantiene la estructura de subdirectorios.
- Representa una conexión de bajo nivel entre código y sistema operativo.

Ver código desmenuzado del Recurso C1-R002 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 1)

<!-- Bloque del recurso C1-R002 ya incluido arriba -->

Código JavaScript asociado (para colocar antes del cierre de </body>)

// =========================
// LÓGICA DEL RECURSO C1-R002
// =========================
(function () {
    const inputOrigen = document.getElementById("c1r2-origen");
    const inputDestino = document.getElementById("c1r2-destino");
    const selectTipo = document.getElementById("c1r2-tipo-script");
    const salida = document.getElementById("c1r2-salida-script");
    const boton = document.getElementById("c1r2-generar-script");

    if (!inputOrigen || !inputDestino || !selectTipo || !salida || !boton) return;

    boton.addEventListener("click", () => {
        const origen = (inputOrigen.value || "").trim();
        const destino = (inputDestino.value || "").trim();

        if (!origen || !destino) {
            salida.value = "# Por favor, indica una ruta de origen y una ruta de destino.";
            return;
        }

        const tipo = selectTipo.value;
        if (tipo === "powershell") {
            salida.value = generarScriptPowerShell(origen, destino);
        } else {
            salida.value = generarScriptBash(origen, destino);
        }
    });

    function generarScriptPowerShell(origen, destino) {
        return `# Script PowerShell generado por Recurso C1-R002
# id_recurso: C1-R002
# id_capa: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en PowerShell

$origen = "${origen}"
$destino = "${destino}"

Write-Host "Realizando copia de seguridad desde $origen hacia $destino..."

Get-ChildItem -Path $origen -Recurse -File | ForEach-Object {
    $rutaRelativa = $_.FullName.Substring($origen.Length).TrimStart("\\","/")
    $destinoFinal = Join-Path -Path $destino -ChildPath $rutaRelativa
    $carpetaDestino = Split-Path -Path $destinoFinal -Parent

    if (-not (Test-Path $carpetaDestino)) {
        New-Item -ItemType Directory -Path $carpetaDestino | Out-Null
    }

    Copy-Item -Path $_.FullName -Destination $destinoFinal -Force
}

Write-Host "Copia de seguridad completada."`;
    }

    function generarScriptBash(origen, destino) {
        return `#!/usr/bin/env bash
# Script Bash generado por Recurso C1-R002
# id_recurso: C1-R002
# id_capa: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en Bash

ORIGEN="${origen}"
DESTINO="${destino}"

echo "Realizando copia de seguridad desde $ORIGEN hacia $DESTINO..."

rsync -av --progress "$ORIGEN"/ "$DESTINO"/

echo "Copia de seguridad completada."`;
    }
})();

Nota: Este recurso no ejecuta el script en el navegador. El usuario debe copiar el código generado y ejecutarlo en su consola local (PowerShell o Bash), lo que refleja la naturaleza de la Capa 1.

Recurso C1-R003 · Generador de Script Local para Renombrado Masivo de Archivos

Este recurso genera un script de consola (PowerShell o Bash) para renombrar masivamente archivos en una carpeta aplicando un prefijo, sufijo o patrón numérico. El script se ejecuta en el sistema operativo del usuario, fuera del navegador.

id_recurso: C1-R003 id_capa: Capa 1 · Núcleo Local unidad: Script de renombrado masivo local

Ruta de archivos a renombrar: Prefijo (opcional): Sufijo (opcional, antes de la extensión): Tipo de script a generar: Script generado (copia y ejecuta en tu sistema operativo):

Análisis del Recurso C1-R003

Procedencia: Generado desde el navegador por Copilot 1.* · Cortana *.1, diseñado para ejecutarse en el sistema operativo del usuario.
Unidad que sirve la capacidad: Script de consola (PowerShell o Bash) que renombra archivos de forma masiva según un patrón definido.
Usos principales: - Normalización de nombres de archivos en proyectos institucionales.
- Preparación de lotes de documentos para publicación o archivo.
- Limpieza de nombres caóticos en directorios personales o de trabajo.
Características técnicas: - No se ejecuta en el navegador: el usuario debe copiar el script y ejecutarlo en su sistema.
- Opera directamente sobre el sistema de archivos local.
- Permite prefijo, sufijo y numeración secuencial.
- Representa una conexión de bajo nivel entre código y sistema operativo.

Ver código desmenuzado del Recurso C1-R003 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 1)

<!-- Bloque del recurso C1-R003 ya incluido arriba -->

Código JavaScript asociado (para colocar antes del cierre de </body>)

// =========================
// LÓGICA DEL RECURSO C1-R003
// =========================
(function () {
    const inputRuta = document.getElementById("c1r3-ruta");
    const inputPrefijo = document.getElementById("c1r3-prefijo");
    const inputSufijo = document.getElementById("c1r3-sufijo");
    const selectTipo = document.getElementById("c1r3-tipo-script");
    const salida = document.getElementById("c1r3-salida-script");
    const boton = document.getElementById("c1r3-generar-script");

    if (!inputRuta || !inputPrefijo || !inputSufijo || !selectTipo || !salida || !boton) return;

    boton.addEventListener("click", () => {
        const ruta = (inputRuta.value || "").trim();
        const prefijo = (inputPrefijo.value || "").trim();
        const sufijo = (inputSufijo.value || "").trim();

        if (!ruta) {
            salida.value = "# Por favor, indica una ruta de carpeta.";
            return;
        }

        const tipo = selectTipo.value;
        if (tipo === "powershell") {
            salida.value = generarScriptPowerShell(ruta, prefijo, sufijo);
        } else {
            salida.value = generarScriptBash(ruta, prefijo, sufijo);
        }
    });

    function generarScriptPowerShell(ruta, prefijo, sufijo) {
        return `# Script PowerShell generado por Recurso C1-R003
# id_recurso: C1-R003
# id_capa: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en PowerShell

$ruta = "${ruta}"
$prefijo = "${prefijo}"
$sufijo = "${sufijo}"

Write-Host "Renombrando archivos en $ruta..."

$i = 1
Get-ChildItem -Path $ruta -File | ForEach-Object {
    $extension = $_.Extension
    $nuevoNombre = "{0}{1}{2}{3}" -f $prefijo, $i, $sufijo, $extension
    $nuevoPath = Join-Path -Path $ruta -ChildPath $nuevoNombre
    Rename-Item -Path $_.FullName -NewName $nuevoNombre -Force
    $i++
}

Write-Host "Renombrado completado."`;
    }

    function generarScriptBash(ruta, prefijo, sufijo) {
        return `#!/usr/bin/env bash
# Script Bash generado por Recurso C1-R003
# id_recurso: C1-R003
# id_capa: Capa 1 · Núcleo Local
# Procedencia: Generado desde interfaz HTML (navegador) para ejecución en Bash

RUTA="${ruta}"
PREFIJO="${prefijo}"
SUFIJO="${sufijo}"

echo "Renombrando archivos en $RUTA..."

i=1
for archivo in "$RUTA"/*; do
    [ -f "$archivo" ] || continue
    extension="${archivo##*.}"
    base_nueva="${PREFIJO}${i}${SUFIJO}"
    nuevo_nombre="${base_nueva}.${extension}"
    mv "$archivo" "$RUTA/$nuevo_nombre"
    i=$((i+1))
done

echo "Renombrado completado."`;
    }
})();

Nota: Este recurso no ejecuta el script en el navegador. El usuario debe copiar el código generado y ejecutarlo en su consola local (PowerShell o Bash), lo que refleja la naturaleza de la Capa 1.

Recurso C1-R001 - Script local de copia de seguridad de carpeta

Este recurso genera un script de consola (PowerShell o Bash) para copiar el contenido de una carpeta origen a una carpeta destino, creando una copia de seguridad simple en el sistema operativo del usuario.

id_recurso: C1-R001 id_capa: Capa 1 - Nucleo Local unidad: Script de copia de seguridad local

Analisis del Recurso C1-R001

Procedencia: Generado desde el navegador, diseñado para ejecutarse en el sistema operativo del usuario.
Unidad que sirve la capacidad: Script de consola que realiza una copia de seguridad de una carpeta local en otra ruta.
Usos principales: - Copia de seguridad periodica de documentos.
- Preparacion de datos para archivado externo.
- Replicacion simple de carpetas de trabajo.
Caracteristicas tecnicas: - No se ejecuta en el navegador.
- Opera directamente sobre el sistema de archivos local.
- Representa una conexion de bajo nivel entre codigo y sistema operativo.

Ver codigo JS asociado al Recurso C1-R001

// LOGICA C1-R001 - Generador de script de copia
(function () {
  const inputOrigen = document.getElementById("c1r1-ruta-origen");
  const inputDestino = document.getElementById("c1r1-ruta-destino");
  const selectTipo = document.getElementById("c1r1-tipo-script");
  const salida = document.getElementById("c1r1-salida-script");
  const boton = document.getElementById("c1r1-generar-script");

  if (!inputOrigen || !inputDestino || !selectTipo || !salida || !boton) return;

  boton.addEventListener("click", () => {
    const origen = (inputOrigen.value || "").trim();
    const destino = (inputDestino.value || "").trim();

    if (!origen || !destino) {
      salida.value = "# Por favor, indica ruta de origen y destino.";
      return;
    }

    const tipo = selectTipo.value;
    if (tipo === "powershell") {
      salida.value = generarScriptPowerShell(origen, destino);
    } else {
      salida.value = generarScriptBash(origen, destino);
    }
  });

  function generarScriptPowerShell(origen, destino) {
    return `# Script PowerShell - Copia de seguridad simple
# id_recurso: C1-R001
# id_capa: Capa 1 - Nucleo Local

$origen = "${origen}"
$destino = "${destino}"

Write-Host "Copiando desde $origen hacia $destino..."

if (-not (Test-Path $destino)) {
  New-Item -ItemType Directory -Path $destino | Out-Null
}

Copy-Item -Path "$origen\*" -Destination $destino -Recurse -Force

Write-Host "Copia completada."`;
  }

  function generarScriptBash(origen, destino) {
    return `#!/usr/bin/env bash
# Script Bash - Copia de seguridad simple
# id_recurso: C1-R001
# id_capa: Capa 1 - Nucleo Local

ORIGEN="${origen}"
DESTINO="${destino}"

echo "Copiando desde $ORIGEN hacia $DESTINO..."

mkdir -p "$DESTINO"
cp -r "$ORIGEN"/. "$DESTINO"/

echo "Copia completada."`;
  }
})();

Recurso C1-R002 - Script local para volcado de arbol de directorios

Este recurso genera un script de consola que recorre una ruta y vuelca el arbol de directorios y archivos en un fichero de texto, util para inventarios y auditorias locales.

id_recurso: C1-R002 id_capa: Capa 1 - Nucleo Local unidad: Script de volcado de estructura

Analisis del Recurso C1-R002

Procedencia: Generado desde interfaz web, ejecutado en consola local.
Unidad que sirve la capacidad: Script que recorre directorios y genera un listado estructurado en un archivo de texto.
Usos principales: - Inventario de archivos de un proyecto.
- Documentacion de estructuras de carpetas.
- Auditoria de contenidos en servidores locales.
Caracteristicas tecnicas: - No requiere conexion a red.
- Opera sobre el sistema de archivos local.
- Salida en texto plano para archivado o analisis posterior.

Ver codigo JS asociado al Recurso C1-R002

// LOGICA C1-R002 - Generador de script de volcado
(function () {
  const inputRuta = document.getElementById("c1r2-ruta");
  const inputSalida = document.getElementById("c1r2-salida");
  const selectTipo = document.getElementById("c1r2-tipo-script");
  const salida = document.getElementById("c1r2-salida-script");
  const boton = document.getElementById("c1r2-generar-script");

  if (!inputRuta || !inputSalida || !selectTipo || !salida || !boton) return;

  boton.addEventListener("click", () => {
    const ruta = (inputRuta.value || "").trim();
    const fichero = (inputSalida.value || "").trim();

    if (!ruta || !fichero) {
      salida.value = "# Indica ruta a inspeccionar y fichero de salida.";
      return;
    }

    const tipo = selectTipo.value;
    if (tipo === "powershell") {
      salida.value = generarScriptPowerShell(ruta, fichero);
    } else {
      salida.value = generarScriptBash(ruta, fichero);
    }
  });

  function generarScriptPowerShell(ruta, fichero) {
    return `# Script PowerShell - Volcado de arbol de directorios
# id_recurso: C1-R002
# id_capa: Capa 1 - Nucleo Local

$ruta = "${ruta}"
$fichero = "${fichero}"

Write-Host "Generando listado de $ruta en $fichero..."

Get-ChildItem -Path $ruta -Recurse | Format-List FullName | Out-File -FilePath $fichero -Encoding UTF8

Write-Host "Listado completado."`;
  }

  function generarScriptBash(ruta, fichero) {
    return `#!/usr/bin/env bash
# Script Bash - Volcado de arbol de directorios
# id_recurso: C1-R002
# id_capa: Capa 1 - Nucleo Local

RUTA="${ruta}"
FICHERO="${fichero}"

echo "Generando listado de $RUTA en $FICHERO..."

find "$RUTA" > "$FICHERO"

echo "Listado completado."`;
  }
})();

Recurso C1-R003 - Script local para limpieza de archivos antiguos

Este recurso genera un script que elimina archivos mas antiguos que un numero de dias indicado, dentro de una ruta concreta del sistema de archivos local.

id_recurso: C1-R003 id_capa: Capa 1 - Nucleo Local unidad: Script de limpieza de archivos antiguos

Analisis del Recurso C1-R003

Procedencia: Generado en la web, ejecutado en consola local.
Unidad que sirve la capacidad: Script que elimina archivos antiguos segun su fecha de modificacion.
Usos principales: - Limpieza periodica de carpetas temporales.
- Control de espacio en discos locales o de red.
- Mantenimiento de entornos de trabajo.
Caracteristicas tecnicas: - Opera directamente sobre el sistema de archivos.
- Requiere precaucion: elimina archivos de forma permanente.
- Representa una conexion directa codigo - sistema operativo.

Ver codigo JS asociado al Recurso C1-R003

// LOGICA C1-R003 - Generador de script de limpieza
(function () {
  const inputRuta = document.getElementById("c1r3-ruta");
  const inputDias = document.getElementById("c1r3-dias");
  const selectTipo = document.getElementById("c1r3-tipo-script");
  const salida = document.getElementById("c1r3-salida-script");
  const boton = document.getElementById("c1r3-generar-script");

  if (!inputRuta || !inputDias || !selectTipo || !salida || !boton) return;

  boton.addEventListener("click", () => {
    const ruta = (inputRuta.value || "").trim();
    const dias = parseInt(inputDias.value, 10);

    if (!ruta || isNaN(dias) || dias <= 0) {
      salida.value = "# Indica una ruta valida y un numero de dias mayor que 0.";
      return;
    }

    const tipo = selectTipo.value;
    if (tipo === "powershell") {
      salida.value = generarScriptPowerShell(ruta, dias);
    } else {
      salida.value = generarScriptBash(ruta, dias);
    }
  });

  function generarScriptPowerShell(ruta, dias) {
    return `# Script PowerShell - Limpieza de archivos antiguos
# id_recurso: C1-R003
# id_capa: Capa 1 - Nucleo Local

$ruta = "${ruta}"
$dias = ${dias}

Write-Host "Eliminando archivos en $ruta con mas de $dias dias..."

$limite = (Get-Date).AddDays(-$dias)

Get-ChildItem -Path $ruta -Recurse -File | Where-Object { $_.LastWriteTime -lt $limite } | Remove-Item -Force

Write-Host "Limpieza completada."`;
  }

  function generarScriptBash(ruta, dias) {
    return `#!/usr/bin/env bash
# Script Bash - Limpieza de archivos antiguos
# id_recurso: C1-R003
# id_capa: Capa 1 - Nucleo Local

RUTA="${ruta}"
DIAS=${dias}

echo "Eliminando archivos en $RUTA con mas de $DIAS dias..."

find "$RUTA" -type f -mtime +$DIAS -delete

echo "Limpieza completada."`;
  }
})();

Recurso 1-2 · Portal Europeo de Datos

Enlace institucional al portal data.europa.eu, que reúne datos abiertos de instituciones y países de la Unión Europea para proyectos comparativos.

id_recurso: R1-2 fuente: data.europa.eu

🇪🇺 Portal Europeo de Datos

Recurso 1-3 · Data.gov · Open Government

Acceso al portal Data.gov, sitio oficial de datos abiertos del Gobierno federal de Estados Unidos, útil para estudios comparados y proyectos globales.

id_recurso: R1-3 fuente: Data.gov

🇺🇸 Data.gov · Open Government

🧩 Capa 2 · Conexión por Puente de Aplicación

Código ↔ Navegador ↔ Sistema Operativo · Almacenamiento y eventos locales

ID-CAPA: C02 Tipo: Navegador / APIs Web

Recurso C2-R001 · Bloc Persistente de Notas Técnicas (LocalStorage)

Este recurso implementa un bloc de notas técnico que se guarda automáticamente en el localStorage del navegador. El contenido persiste entre sesiones en el mismo dispositivo, representando un puente entre el código web y el sistema del usuario.

id_recurso: C2-R001 id_categoria: Capa 2 · Puente de Aplicación unidad: Bloc de notas persistente

Análisis del Recurso C2-R001

Procedencia: Recurso ejecutado íntegramente en el navegador, utilizando APIs nativas de almacenamiento.
Unidad que sirve la capacidad: Bloc de notas persistente basado en localStorage, asociado al dominio y dispositivo.
Usos principales: - Guardar borradores de documentación técnica.
- Mantener notas de trabajo entre recargas del navegador.
- Prototipar formularios que persisten datos localmente.
Características técnicas: - Utiliza eventos de entrada para guardar automáticamente el contenido.
- No requiere servidor: todo se almacena en el navegador del usuario.
- Representa una conexión de nivel medio entre código web y sistema local.

Ver código desmenuzado del Recurso C2-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 2)

<section class="capa" id="capa2">
    <div class="capa-header">
        <!-- ... cabecera de la capa omitida por brevedad ... -->
    </div>

    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa2-titulo">
            <h4 id="recurso-capa2-titulo">Recurso C2-R001 · Bloc Persistente de Notas Técnicas (LocalStorage)</h4>
            <p>
                Este recurso implementa un bloc de notas técnico que se guarda automáticamente en el
                <code>localStorage</code> del navegador.
            </p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C2-R001</span>
                <span>id_categoria: Capa 2 · Puente de Aplicación</span>
                <span>unidad: Bloc de notas persistente</span>
            </div>

            <div class="recurso-widget">
                <label for="c2-titulo-nota">Título de la nota técnica:</label>
                <input type="text" id="c2-titulo-nota" placeholder="Ejemplo: Plan de indexación de recursos...">

                <label for="c2-contenido-nota">Contenido de la nota (se guarda automáticamente):</label>
                <textarea id="c2-contenido-nota" rows="7" placeholder="Escribe aquí tus notas técnicas..."></textarea>

                <button type="button" id="c2-borrar-nota">Borrar nota guardada</button>
                <p class="nota" id="c2-estado-nota">Estado: esperando interacción del usuario…</p>
            </div>
        </article>

        <!-- El bloque <aside> con el análisis se define a continuación en el HTML -->
    </div>
</section>

Código JavaScript asociado (para colocar antes del cierre de </body>)

// =========================
// LÓGICA DEL RECURSO C2-R001
// =========================
(function () {
    const KEY_TITULO = "c2_titulo_nota";
    const KEY_CONTENIDO = "c2_contenido_nota";

    const inputTitulo = document.getElementById("c2-titulo-nota");
    const textareaContenido = document.getElementById("c2-contenido-nota");
    const botonBorrar = document.getElementById("c2-borrar-nota");
    const estado = document.getElementById("c2-estado-nota");

    if (!inputTitulo || !textareaContenido || !botonBorrar || !estado) return;

    // Cargar datos previos desde localStorage
    function cargarDesdeLocalStorage() {
        const tituloGuardado = localStorage.getItem(KEY_TITULO) || "";
        const contenidoGuardado = localStorage.getItem(KEY_CONTENIDO) || "";

        inputTitulo.value = tituloGuardado;
        textareaContenido.value = contenidoGuardado;

        if (tituloGuardado || contenidoGuardado) {
            estado.textContent = "Estado: nota cargada desde localStorage.";
        } else {
            estado.textContent = "Estado: sin nota previa almacenada.";
        }
    }

    // Guardar datos en localStorage
    function guardarEnLocalStorage() {
        localStorage.setItem(KEY_TITULO, inputTitulo.value);
        localStorage.setItem(KEY_CONTENIDO, textareaContenido.value);
        estado.textContent = "Estado: cambios guardados automáticamente en localStorage.";
    }

    // Borrar datos de localStorage
    function borrarLocalStorage() {
        localStorage.removeItem(KEY_TITULO);
        localStorage.removeItem(KEY_CONTENIDO);
        inputTitulo.value = "";
        textareaContenido.value = "";
        estado.textContent = "Estado: nota borrada de localStorage.";
    }

    // Eventos
    inputTitulo.addEventListener("input", guardarEnLocalStorage);
    textareaContenido.addEventListener("input", guardarEnLocalStorage);
    botonBorrar.addEventListener("click", borrarLocalStorage);

    // Inicialización
    cargarDesdeLocalStorage();
})();

Nota: Este recurso no necesita servidor. Toda la persistencia se realiza en el navegador del usuario, utilizando localStorage, lo que ilustra claramente la Capa 2 (Puente de Aplicación).

🧩 Capa 2 · Conexión por Puente de Aplicación

Código ↔ Navegador ↔ Sistema Operativo · Almacenamiento y eventos locales

ID-CAPA: C02 Tipo: Navegador / APIs Web

Recurso C2-R002 · Cronología Dinámica del Sistema

Este recurso muestra la fecha y hora del sistema en tiempo real, actualizada cada segundo mediante APIs del navegador.

id_recurso: C2-R002 id_categoria: Capa 2 · Puente de Aplicación unidad: Cronología dinámica

Recurso C2-R003 · Migas de Pan Automáticas

Sistema dinámico que genera la ruta de navegación según la URL actual, mostrando carpetas y archivo final.

id_recurso: C2-R003 id_categoria: Capa 2 · Puente de Aplicación unidad: Breadcrumb dinámico

Recurso C2-R004 · Libro de Visitas con Voz + LocalStorage

Captador de pensamientos con dictado por voz y almacenamiento persistente en localStorage. Incluye libro artístico de notas.

id_recurso: C2-R004 id_categoria: Capa 2 · Puente de Aplicación unidad: Libro de visitas

Recurso C2-R005 · Libro Captador Visitante (Versión Extendida)

Sistema institucional de captación de pensamientos con dictado por voz, vista compacta, antología completa en modal, renderizado artístico y sincronización global.

id_recurso: C2-R005 id_categoria: Capa 2 · Puente de Aplicación unidad: Libro Captador Visitante

Lienzo de Pensamientos Libres

Deja tu impresión o postdata en esta ficha. Puedes escribirla o dictarla con tu voz.

— Últimos Pensamientos Sincronizados —

Análisis del Recurso C2-R005

Procedencia: APIs del navegador: Web Speech API, SpeechSynthesis, localStorage, DOM.
Unidad que sirve la capacidad: Libro de visitas avanzado con vista compacta y antología completa.
Usos principales: - Portales institucionales.
- Museos digitales.
- Plataformas educativas.
- Sistemas de participación ciudadana.
- Espacios de interacción comunitaria.
Características técnicas: - Dictado por voz.
- Síntesis de voz institucional.
- Vista compacta sincronizada.
- Modal completo.
- Motor IA integrado.
- Persistencia local.
- Renderizado artístico.
- Filtrado y accesibilidad.

Ver código desmenuzado del Recurso C2-R005


[El código HTML completo del recurso se encuentra arriba]
[El script completo se entregará en la PARTE 2/2]

Recurso C2-R006 · Central de Conectividad Estratégica

Módulo institucional para gestionar accesos a ecosistemas externos: laborales, comunitarios, educativos y de proyección profesional. Incluye filtrado dinámico, registro de interés y notificación gerencial.

id_recurso: C2-R006 id_categoria: Capa 2 · Puente de Aplicación unidad: HUB Sociolaboral

Nodos de Vinculación Externa

🌐 Central de Conectividad Estratégica

Gestión de espacios públicos, entornos formativos y plataformas de proyección laboral.

👔 LinkedIn

Perfil Institucional

Historial técnico corporativo, certificaciones y networking profesional.

Vincular con Espacio →

🎨 Behance

Galería de Diseño

Exposición de layouts, maquetaciones y componentes creativos.

Explorar Galería →

📢 Facebook

Iniciativa y Divulgación

Interacción con cibernautas, debates y avisos del proyecto.

Unirse a la Red →

💼 Indeed & Jobs

Disponibilidad Laboral

Hojas de servicio activas y estatus de disponibilidad.

Ver Historial Técnico →

                Módulo Operativo. Monitoreando enlaces de transferencia externa...
            

Análisis del Recurso C2-R006

Procedencia: DOM, localStorage, enlazamientos externos, filtrado dinámico.
Unidad que sirve la capacidad: HUB sociolaboral para vinculación externa.
Usos principales: - Proyección profesional.
- Gestión de redes externas.
- Portales institucionales.
- Espacios educativos y comunitarios.
Características técnicas: - Filtrado dinámico.
- Registro de clics.
- Tarjetas responsivas.
- Estética institucional.
- Integración con motores globales.

Ver código desmenuzado del Recurso C2-R006


[El código HTML completo del recurso se encuentra arriba]
[El script completo se entregará en la PARTE 2/2]

Recurso C2-R007 · Audio‑Guía Institucional para Artículos

Módulo de accesibilidad universal que permite escuchar artículos completos mediante síntesis de voz institucional. Ideal para textos largos, normativa, divulgación y contenidos formativos.

id_recurso: C2-R007 id_categoria: Capa 2 · Puente de Aplicación unidad: Audio‑Guía de Lectura

Ejemplo de Artículo Institucional

Este es un ejemplo de contenido que puede ser leído mediante la Audio‑Guía. El sistema captura el texto de forma limpia, elimina elementos no deseados y reproduce la lectura con voz institucional clara y pausada.

La herramienta es ideal para accesibilidad, inclusión, lectura asistida, formación continua y apoyo a usuarios con dificultades visuales.

Análisis del Recurso C2-R007

Procedencia: SpeechSynthesis API, DOM, accesibilidad universal.
Unidad que sirve la capacidad: Audio‑Guía institucional para lectura de artículos.
Usos principales: - Lectura asistida.
- Accesibilidad universal.
- Inclusión educativa.
- Normativa y documentación institucional.
- Apoyo a usuarios con dificultades visuales.
Características técnicas: - Voz institucional clara.
- Limpieza automática del texto.
- Botón interactivo.
- Integración con tarjetas de contenido.
- Compatible con cualquier artículo del dominio.

Ver código desmenuzado del Recurso C2-R007


[El código HTML completo del recurso se encuentra arriba]
[El script completo se entregará en la PARTE 2/2]

Recurso C2-R008 · Audio‑Lectura Integral del Documento

Módulo de accesibilidad universal que permite escuchar la página completa mediante síntesis de voz institucional. Ideal para lectura asistida, inclusión educativa y accesibilidad gerencial.

id_recurso: C2-R008 id_categoria: Capa 2 · Puente de Aplicación unidad: Audio‑Lectura Integral

Análisis del Recurso C2-R008

Procedencia: SpeechSynthesis API, DOM, accesibilidad universal.
Unidad que sirve la capacidad: Audio‑Lectura integral del documento completo.
Usos principales: - Lectura asistida.
- Accesibilidad universal.
- Inclusión educativa.
- Lectura de normativa y documentación.
- Apoyo a usuarios con dificultades visuales.
Características técnicas: - Voz institucional clara.
- Limpieza automática del texto.
- Botón interactivo.
- Lectura completa del documento.
- Integración con motores globales.
- Estética profesional y formativa.

Ver código desmenuzado del Recurso C2-R008


[El código HTML completo del recurso se encuentra arriba]
[El script completo se encuentra en la PARTE 2/2]

Recurso C2-R009 · Indicadores de Accesibilidad

Módulo institucional para mostrar certificaciones de accesibilidad digital según estándares WAI‑AA y WCAG 2.1. Ideal para pies de página, sellos de calidad y auditorías de conformidad.

id_recurso: C2-R009 id_categoria: Capa 2 · Puente de Aplicación unidad: Indicadores de Accesibilidad

WAI - AA

WCAG 2.1

Análisis del Recurso C2-R009

Procedencia: Normativa W3C, WCAG 2.1, WAI-AA.
Unidad que sirve la capacidad: Indicadores de accesibilidad digital.
Usos principales: - Pies de página institucionales.
- Sellos de conformidad.
- Auditorías de accesibilidad.
- Portales educativos y gubernamentales.
Características técnicas: - Totalmente responsivo.
- Estética institucional.
- Compatible con lectores de pantalla.
- Integración directa en footers.

Ver código desmenuzado

[El código HTML completo del recurso se encuentra arriba]

Recurso C2-R010 · Licencia Creative Commons (CC BY 4.0)

Módulo institucional para mostrar la licencia CC BY 4.0 mediante iconografía SVG oficial. Ideal para pies de página, documentación y proyectos educativos.

id_recurso: C2-R010 id_categoria: Capa 2 · Puente de Aplicación unidad: Licencia Creative Commons

Análisis del Recurso C2-R010

Procedencia: Creative Commons, CC BY 4.0 Internacional.
Unidad que sirve la capacidad: Licencia abierta con atribución obligatoria.
Usos principales: - Pies de página.
- Documentación institucional.
- Proyectos educativos.
- Publicaciones abiertas.
Características técnicas: - Iconografía SVG oficial.
- Ligero y responsivo.
- Compatible con cualquier layout.
- Estética institucional.

Ver código desmenuzado

[El código HTML completo del recurso se encuentra arriba]

Recurso C2-R011 · Pie de Página Institucional Normalizado

Pie de página profesional con licencia, accesibilidad, geolocalización, conformidad normativa y espacio para contadores globales. Diseñado para ecosistemas educativos, institucionales y de directorios.

id_recurso: C2-R011 id_categoria: Capa 2 · Puente de Aplicación unidad: Footer Institucional

Análisis del Recurso C2-R011

Procedencia: Normativa W3C, WCAG 2.1, Creative Commons, estándares institucionales.
Unidad que sirve la capacidad: Pie de página institucional completo y accesible.
Usos principales: - Portales educativos.
- Directorios institucionales.
- Sitios gubernamentales.
- Ecosistemas de información.
- Plataformas de divulgación.
Características técnicas: - Accesibilidad WAI‑AA.
- Licencia CC BY 4.0 integrada.
- Compatible con contadores globales.
- Estética profesional y formativa.
- Totalmente responsivo.

Ver código desmenuzado del Recurso C2-R011


[El código HTML completo del recurso se encuentra arriba]

Recurso C2-R012 · Traductor Multilingüe Instantáneo

Módulo institucional que permite traducir cualquier ficha técnica del ecosistema a múltiples idiomas sin recargar la página. Ideal para accesibilidad global, inclusión comunitaria y proyección internacional.

id_recurso: C2-R012 id_categoria: Capa 2 · Puente de Aplicación unidad: Traductor Multilingüe

Traducción Global Automática (Ecosistema Google)

Selecciona tu idioma para adaptar la terminología de la ficha técnica.

Análisis del Recurso C2-R012

Procedencia: Google Translate Element API.
Unidad que sirve la capacidad: Traducción instantánea del contenido del ecosistema.
Usos principales: - Inclusión lingüística.
- Accesibilidad global.
- Proyección internacional.
- Directorios multilingües.
Características técnicas: - Traducción sin recargar la página.
- Idiomas autonómicos incluidos.
- Integración ligera y asíncrona.
- Compatible con todo el ecosistema.

Ver código desmenuzado

[El HTML completo está arriba]

Recurso C2-R013 · Marcador de Recursos Favoritos

Permite guardar la ficha técnica actual en el gestor de marcadores del navegador. Compatible con Chrome, Edge y Firefox.

id_recurso: C2-R013 id_categoria: Capa 2 · Puente de Aplicación unidad: Marcadores del Navegador

Marcador de Recursos Favoritos

Guarda esta ficha técnica directamente en tu navegador.

Recurso C2-R014 · Buscador Inteligente del Directorio

Motor de búsqueda basado en Google Programmable Search Engine. Permite localizar fichas técnicas dentro del ecosistema con precisión instantánea.

id_recurso: C2-R014 id_categoria: Capa 2 · Puente de Aplicación unidad: Buscador Inteligente

Buscador Inteligente del Directorio (Soporte Google)

Utiliza la potencia del motor de Google para localizar fichas al instante.

Recurso C2-R015 · Migas de Pan Automáticas

Sistema dinámico que genera automáticamente la ruta de navegación según la URL. Ideal para directorios, fichas técnicas y estructuras jerárquicas.

id_recurso: C2-R015 id_categoria: Capa 2 · Puente de Aplicación unidad: Breadcrumbs Dinámicos

Recurso C2-R016 · Compartir Artículo

Módulo que permite compartir la ficha técnica actual mediante el menú nativo del sistema operativo (Android, iOS, Windows, macOS). Ideal para difusión comunitaria, educativa y profesional.

id_recurso: C2-R016 id_categoria: Capa 2 · Puente de Aplicación unidad: Compartición Nativa

Análisis del Recurso C2-R016

Procedencia: Web Share API (W3C).
Unidad que sirve la capacidad: Compartición nativa del sistema operativo.
Usos principales: - Difusión de artículos.
- Compartición educativa.
- Redes comunitarias.
- Comunicación institucional.
Características técnicas: - Compatible con Android, iOS, Windows, macOS.
- Fallback seguro.
- Integración ligera.
- Estética profesional.

Ver código desmenuzado

[El HTML completo está arriba]

Recurso C2-R017 · Compartir Artículo

Módulo que permite compartir la ficha técnica actual mediante el menú nativo del sistema operativo (Android, iOS, Windows, macOS). Ideal para difusión comunitaria, educativa y profesional.

id_recurso: C2-R017-A id_categoria: Capa 2 · Puente de Aplicación unidad: Compartición Nativa

Recurso C2-R017 · Centro de Impresión y Exportación

Módulo profesional que permite imprimir la ficha técnica, guardarla como PDF o generar un informe académico limpio mediante estilos especiales.

id_recurso: C2-R017-B id_categoria: Capa 2 · Puente de Aplicación unidad: Impresión y Exportación

🖨️ Centro de Exportación e Impresión

Selecciona el formato de salida para guardar o transferir la información:

Análisis del Recurso C2-R017

Procedencia: Web Share API, Web Print API, CSS Print Media.
Unidad que sirve la capacidad: Compartición nativa + impresión profesional.
Usos principales: - Difusión de artículos.
- Exportación PDF.
- Informes académicos.
- Impresión profesional.
- Documentación institucional.
Características técnicas: - Menú nativo del SO.
- Modo Informe automático.
- Estilos @media print.
- Exportación PDF nativa.
- Integración ligera y universal.

Ver código desmenuzado del Recurso C2-R017


[Incluye los dos apartados HTML: Compartir + Centro de Impresión]
[Incluye el script completo del recurso]
[Incluye el CSS técnico @media print]

Recurso C2-R018 · Motor de Impresión Profesional

Extensión del Centro de Impresión que añade la hoja de estilos nativa para impresión en papel, exportación a PDF y generación de informes académicos limpios mediante @media print.

id_recurso: C2-R018 id_categoria: Capa 2 · Puente de Aplicación unidad: CSS de Impresión

Este recurso no añade HTML visible, sino que incorpora la hoja de estilos técnica que controla:

Impresión estándar
Exportación a PDF
Modo Informe Académico
Ocultación de elementos no imprimibles
Optimización de tinta y legibilidad

Análisis del Recurso C2-R018

Procedencia: CSS Print Media, Web Print API.
Unidad que sirve la capacidad: Estilos de impresión profesional.
Usos principales: - Informes académicos.
- Exportación PDF.
- Impresión limpia de fichas.
- Documentación institucional.
Características técnicas: - Control total mediante @media print.
- Modo Informe con clase dinámica.
- Ocultación de elementos no imprimibles.
- Optimización de tinta.
- Compatibilidad universal.

Ver CSS técnico completo


/* ==========================================================================
   HOJA DE ESTILOS DE IMPRESIÓN NATIVA (@media print)
   ========================================================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    nav, footer, .panel-impresion-box, script {
        display: none !important;
    }

    /* MODO INFORME */
    body.modo-informe-activo {
        padding: 0;
        margin: 0;
    }

    body.modo-informe-activo header,
    body.modo-informe-activo .sidebar,
    body.modo-informe-activo .ia-butterfly,
    body.modo-informe-activo button {
        display: none !important;
    }

    body.modo-informe-activo .ficha-container {
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
        background: transparent !important;
    }
}

Recurso C2-R019 · Botones Institucionales Animados

Sistema avanzado de enlaces institucionales con animación secuencial de emojis, hover inteligente y comportamiento contextual según el tipo de recurso.

id_recurso: C2-R019 id_categoria: Capa 2 · Puente de Aplicación unidad: Emoji Engine · Botones Animados

😊
🌐
🧲 👥 🧑‍🤝‍🧑 🔗
💡🧲

Análisis del Recurso C2-R019

Procedencia: CSS avanzado, animación secuencial, hover inteligente.
Unidad que sirve la capacidad: Botones animados institucionales con secuencias de emojis.
Usos principales: - Presentaciones institucionales.
- Navegación creativa.
- Interacción educativa.
- Señalización de recursos clave.
- Interfaces de innovación.
Características técnicas: - Secuencias de emojis animadas.
- Hover inteligente con sustitución dinámica.
- Comportamiento contextual según aria-label y title.
- Animaciones cubic-bezier avanzadas.
- Integración total con el ecosistema institucional.

Ver código desmenuzado del Recurso C2-R019

[Incluye HTML + CSS completo del Emoji Engine]

🖥️ Capa 3 · Conexión por Despliegue de Servidor

Código ↔ Servidor Local/VPS ↔ Intranet · Arquitectura modular de archivos

ID-CAPA: C03 Tipo: Servidor / Hosting / VPS

Recurso C3-R001 · Generador de Estructura de Proyecto Web en Servidor

Este recurso genera una propuesta de estructura de archivos para desplegar un proyecto web en un servidor (hosting compartido, VPS o intranet). No despliega realmente, pero produce el árbol de directorios y archivos recomendados.

id_recurso: C3-R001 id_categoria: Capa 3 · Despliegue de Servidor unidad: Plan de estructura de proyecto

Nombre del proyecto: Tipo de backend principal: Estructura propuesta (para desplegar en el servidor):

Análisis del Recurso C3-R001

Procedencia: Generado en el navegador, pero orientado a la organización de archivos en un servidor web.
Unidad que sirve la capacidad: Árbol de directorios y archivos sugeridos para desplegar un proyecto web modular.
Usos principales: - Planificar la estructura de un proyecto antes de subirlo al servidor.
- Documentar la arquitectura de archivos para equipos técnicos.
- Estandarizar despliegues en hosting compartido o VPS.
Características técnicas: - No ejecuta acciones en el servidor: produce un plan estructural.
- Representa la lógica de despliegue de la Capa 3 (servidor como entorno primario).
- Puede adaptarse a distintos tipos de backend.

Ver código desmenuzado del Recurso C3-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 3)

<section class="capa" id="capa3">
    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa3-titulo">
            <h4 id="recurso-capa3-titulo">Recurso C3-R001 · Generador de Estructura de Proyecto Web en Servidor</h4>
            <p>...</p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C3-R001</span>
                <span>id_categoria: Capa 3 · Despliegue de Servidor</span>
                <span>unidad: Plan de estructura de proyecto</span>
            </div>

            <div class="recurso-widget">
                <label for="c3-nombre-proyecto">Nombre del proyecto:</label>
                <input type="text" id="c3-nombre-proyecto">

                <label for="c3-tipo-backend">Tipo de backend principal:</label>
                <select id="c3-tipo-backend">
                    <option value="php">PHP clásico</option>
                    <option value="node">Node.js</option>
                    <option value="static">Sitio estático</option>
                </select>

                <button type="button" id="c3-generar-estructura">Generar estructura de servidor</button>

                <label for="c3-salida-estructura">Estructura propuesta:</label>
                <textarea id="c3-salida-estructura" rows="10" readonly></textarea>
            </div>
        </article>
        <!-- aside con análisis -->
    </div>
</section>

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Este recurso demuestra una arquitectura de servidor basada en modulos HTML, JS y CSS separados, representando una conexion de despliegue real en un entorno local o VPS.

id_recurso: C3-R001 id_capa: Capa 3 - Despliegue de Servidor unidad: Modulo HTML-JS-CSS

Analisis del Recurso C3-R001

Procedencia: Arquitectura modular servida desde un entorno local o VPS.
Unidad que sirve la capacidad: Modulo JS externo que interactua con el DOM.
Usos principales: - Estructuras web profesionales.
- Separacion de responsabilidades.
- Despliegue en hosting o intranet.
Caracteristicas tecnicas: - Requiere servidor web (Apache, Nginx, Node, etc.).
- Carga de modulos externos.
- Arquitectura escalable.

Ver estructura de archivos

/root
  /css
    c3r001.css
  /modules
    c3r001.js
  index.html

Ver modulo JS (c3r001.js)

export function ejecutarModulo() {
  return "Modulo C3-R001 ejecutado correctamente.";
}

Ver CSS (c3r001.css)

#c3r1-boton {
  background: #0080ff;
  color: white;
  padding: 8px;
}

Ver JS asociado en index.html

// LOGICA C3-R001
import { ejecutarModulo } from "./modules/c3r001.js";

document.getElementById("c3r1-boton").addEventListener("click", () => {
  document.getElementById("c3r1-salida").textContent = ejecutarModulo();
});

Recurso C3-R002 - Mini Logger Web Servido

Este recurso registra eventos en un archivo JSON del servidor mediante una peticion fetch POST. Representa una conexion real entre cliente y servidor.

id_recurso: C3-R002 id_capa: Capa 3 - Despliegue de Servidor unidad: Logger JSON

Analisis del Recurso C3-R002

Procedencia: Cliente web enviando datos a un servidor local.
Unidad que sirve la capacidad: Archivo JSON que almacena eventos.
Usos principales: - Registro de actividad.
- Auditoria interna.
- Sistemas de control.
Caracteristicas tecnicas: - Requiere servidor con endpoint POST.
- Escribe en un archivo JSON.
- Simula un backend real.

Endpoint del servidor (Node.js)

app.post("/log", (req, res) => {
  const evento = req.body;
  const logs = JSON.parse(fs.readFileSync("logs.json"));
  logs.push(evento);
  fs.writeFileSync("logs.json", JSON.stringify(logs, null, 2));
  res.json({ ok: true });
});

JS del cliente

// LOGICA C3-R002
document.getElementById("c3r2-log").addEventListener("click", async () => {
  const r = await fetch("/log", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ evento: "click", fecha: Date.now() })
  });
  document.getElementById("c3r2-salida").textContent = "Evento registrado.";
});

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Este recurso demuestra una arquitectura de servidor basada en modulos HTML, JS y CSS separados.

id_recurso: C3-R001 id_capa: Capa 3 - Despliegue de Servidor unidad: Modulo HTML-JS-CSS

Analisis del Recurso C3-R001

Procedencia: Arquitectura modular servida desde un entorno local o VPS.
Unidad que sirve la capacidad: Modulo JS externo que interactua con el DOM.
Usos principales: - Estructuras web profesionales.
- Separacion de responsabilidades.
- Despliegue en hosting o intranet.
Caracteristicas tecnicas: - Requiere servidor web.
- Carga de modulos externos.
- Arquitectura escalable.

Estructura de archivos

/root
  index.html
  /modules
      c3r001.js
  /css
      c3r001.css

JS asociado (import)

<script type="module" src="./modules/c3r001.js"></script>

/root index.html /modules c3r001.js /css c3r001.css

-------------------------------

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Este recurso demuestra una arquitectura de servidor basada en modulos HTML, JS y CSS separados.

id_recurso: C3-R001 id_capa: Capa 3 - Despliegue de Servidor unidad: Modulo HTML-JS-CSS

Analisis del Recurso C3-R001

Procedencia: Arquitectura modular servida desde un entorno local o VPS.
Unidad que sirve la capacidad: Modulo JS externo que interactua con el DOM.
Usos principales: - Estructuras web profesionales.
- Separacion de responsabilidades.
- Despliegue en hosting o intranet.
Caracteristicas tecnicas: - Requiere servidor web.
- Carga de modulos externos.
- Arquitectura escalable.

Estructura de archivos

/root
  index.html
  /modules
      c3r001.js
  /css
      c3r001.css

JS asociado (import)

<script type="module" src="./modules/c3r001.js"></script>

Recurso C3-R003 - Cargador de Plantillas HTML

Este recurso carga fragmentos HTML desde el servidor y los inserta en el DOM, representando un sistema de plantillas reales.

id_recurso: C3-R003 id_capa: Capa 3 - Despliegue de Servidor unidad: Plantilla HTML externa

Analisis del Recurso C3-R003

Procedencia: Plantilla HTML servida desde el servidor.
Unidad que sirve la capacidad: Archivo HTML parcial.
Usos principales: - Sistemas de plantillas.
- Componentes reutilizables.
- Arquitecturas escalables.
Caracteristicas tecnicas: - Requiere servidor web.
- fetch() para cargar HTML externo.
- Insercion dinamica en el DOM.

Plantilla externa (template.html)

<div class="bloque-externo">
  <h3>Plantilla cargada desde servidor</h3>
  <p>Contenido externo insertado dinamicamente.</p>
</div>

JS asociado

// LOGICA C3-R003
document.getElementById("c3r3-cargar").addEventListener("click", async () => {
  const r = await fetch("/templates/template.html");
  const html = await r.text();
  document.getElementById("c3r3-contenedor").innerHTML = html;
});

Recurso C3-R002 - Mini Logger Web Servido

Este recurso registra eventos en un archivo JSON del servidor mediante una peticion POST.

id_recurso: C3-R002 id_capa: Capa 3 - Despliegue de Servidor unidad: Logger JSON

Analisis del Recurso C3-R002

Procedencia: Cliente web enviando datos a un servidor local.
Unidad que sirve la capacidad: Archivo JSON que almacena eventos.
Usos principales: - Registro de actividad.
- Auditoria interna.
- Sistemas de control.
Caracteristicas tecnicas: - Requiere servidor Node.js.
- Endpoint POST real.
- Escritura en archivo JSON.

Ver codigo del servidor (server.js)

const fs = require("fs");
const express = require("express");
const app = express();

app.use(express.json());
app.use(express.static("public"));

app.post("/log", (req, res) => {
  const evento = req.body;
  const logs = JSON.parse(fs.readFileSync("logs.json"));
  logs.push(evento);
  fs.writeFileSync("logs.json", JSON.stringify(logs, null, 2));
  res.json({ ok: true });
});

app.listen(3000, () => console.log("Servidor C3-R002 en puerto 3000"));

Ver archivo logs.json

[]

Ver JS del cliente (public/c3r002.js)

// LOGICA C3-R002
document.getElementById("c3r2-log").addEventListener("click", async () => {
  const r = await fetch("/log", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ evento: "click", fecha: Date.now() })
  });
  document.getElementById("c3r2-salida").textContent = "Evento registrado.";
});

Ver CSS (public/c3r002.css)

#c3r2-log {
  background: #00aa55;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c3r2-log:hover {
  background: #008844;
}

#c3r2-salida {
  margin-top: 10px;
  font-weight: bold;
}

/root index.html server.js logs.json /public c3r002.js c3r002.css

Recurso C3-R003 - Cargador de Plantillas HTML

Este recurso carga fragmentos HTML desde el servidor y los inserta en el DOM, representando un sistema real de plantillas externas.

id_recurso: C3-R003 id_capa: Capa 3 - Despliegue de Servidor unidad: Plantilla HTML externa

Analisis del Recurso C3-R003

Procedencia: Plantilla HTML servida desde el servidor.
Unidad que sirve la capacidad: Archivo HTML parcial cargado dinamicamente.
Usos principales: - Sistemas de plantillas.
- Componentes reutilizables.
- Arquitecturas escalables.
Caracteristicas tecnicas: - Requiere servidor web.
- fetch() para cargar HTML externo.
- Insercion dinamica en el DOM.

Plantilla externa (templates/bloque.html)

<div class="bloque-externo">
  <h3>Plantilla cargada desde servidor</h3>
  <p>Este contenido proviene de un archivo HTML externo.</p>
</div>

JS del cliente (public/c3r003.js)

// LOGICA C3-R003
document.getElementById("c3r3-cargar").addEventListener("click", async () => {
  const r = await fetch("./templates/bloque.html");
  const html = await r.text();
  document.getElementById("c3r3-contenedor").innerHTML = html;
});

CSS (public/c3r003.css)

.bloque-externo {
  border: 2px solid #0080ff;
  padding: 10px;
  margin-top: 10px;
  background: #eef7ff;
}

#c3r3-cargar {
  background: #0066cc;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c3r3-cargar:hover {
  background: #004c99;
}

/root index.html /public c3r003.js c3r003.css /templates bloque.html

Recurso 3-1 · Indicador de Salud Mundial (World Bank)

Widget oficial del Banco Mundial que muestra la esperanza de vida al nacer (indicador SP.DYN.LE00.IN), integrable en proyectos de salud comunitaria.

id_recurso: R3-1 fuente: World Bank Open Data

Recurso 3-2 · Panel de Salud Global (OMS)

Integración de un panel de datos de la Organización Mundial de la Salud para visualizar indicadores de salud pública a escala internacional.

id_recurso: R3-2 fuente: World Health Organization

🏥 Ver datos de la OMS

Recurso 3-3 · Mapa de Calidad del Aire en Europa

Enlace a los visores de calidad del aire de la Agencia Europea de Medio Ambiente, útil para proyectos de salud ambiental y educación climática.

id_recurso: R3-3 fuente: European Environment Agency

🌍 Índice de Calidad del Aire (EEA)

🌐 Capa 4 · Conexión por Consumo de Datos Abiertos

Código ↔ Red Pública ↔ Repositorios Gubernamentales / Open Data

ID-CAPA: C04 Tipo: Red Pública / Open Data

Recurso C4-R001 · Visor Simple de Datos Abiertos (JSON)

Este recurso realiza una petición HTTP GET a un endpoint público de datos abiertos y muestra una tabla simplificada con algunos campos. El endpoint puede cambiarse según la administración o portal Open Data.

id_recurso: C4-R001 id_categoria: Capa 4 · Consumo de Datos Abiertos unidad: Visor de dataset público

Análisis del Recurso C4-R001

Procedencia: El navegador consulta un endpoint público de datos abiertos mediante HTTP GET.
Unidad que sirve la capacidad: Visor de datos JSON que transforma la respuesta en una tabla legible.
Usos principales: - Explorar rápidamente un dataset público.
- Prototipar integraciones con portales Open Data.
- Validar estructura y campos de una API pública.
Características técnicas: - Utiliza fetch para realizar la petición HTTP.
- Depende de CORS y disponibilidad del endpoint.
- Representa la Capa 4: consumo de datos abiertos sin credenciales privadas.

Ver código desmenuzado del Recurso C4-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 4)

<section class="capa" id="capa4">
    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa4-titulo">
            <h4 id="recurso-capa4-titulo">Recurso C4-R001 · Visor Simple de Datos Abiertos (JSON)</h4>
            <p>...</p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C4-R001</span>
                <span>id_categoria: Capa 4 · Consumo de Datos Abiertos</span>
                <span>unidad: Visor de dataset público</span>
            </div>

            <div class="recurso-widget">
                <label for="c4-endpoint">Endpoint de datos abiertos (JSON):</label>
                <input type="text" id="c4-endpoint" value="https://api.publicapis.org/entries">

                <button type="button" id="c4-cargar-datos">Cargar datos</button>

                <p class="nota" id="c4-estado">Estado: pendiente de carga…</p>

                <div id="c4-tabla-contenedor" class="recurso-widget" style="margin-top:8px; max-height:260px; overflow:auto;"></div>
            </div>
        </article>
        <!-- aside con análisis -->
    </div>
</section>

Recurso C4-R001 - Consulta de Estaciones Meteorologicas Publicas

Este recurso consulta un endpoint de datos abiertos que devuelve informacion de estaciones meteorologicas en formato JSON, sin necesidad de claves API.

id_recurso: C4-R001 id_capa: Capa 4 - Datos Abiertos unidad: Consulta GET a Open Data

Analisis del Recurso C4-R001

Procedencia: Datos publicos de un endpoint Open Data.
Unidad que sirve la capacidad: Respuesta JSON con informacion meteorologica.
Usos principales: - Visualizacion de estaciones.
- Sistemas de informacion ambiental.
- Aplicaciones educativas y cientificas.
Caracteristicas tecnicas: - No requiere autenticacion.
- Formato JSON estandar.
- Peticion GET simple.

Endpoint utilizado

https://api.open-meteo.com/v1/stations

JS del cliente (public/c4r001.js)

// LOGICA C4-R001
document.getElementById("c4r1-cargar").addEventListener("click", async () => {
  const r = await fetch("https://api.open-meteo.com/v1/stations");
  const data = await r.json();

  const lista = document.getElementById("c4r1-lista");
  lista.innerHTML = "";

  data.stations.slice(0, 10).forEach(s => {
    const li = document.createElement("li");
    li.textContent = s.name + " - " + s.country;
    lista.appendChild(li);
  });
});

CSS (public/c4r001.css)

#c4r1-cargar {
  background: #0055aa;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c4r1-cargar:hover {
  background: #003f7f;
}

#c4r1-lista {
  margin-top: 10px;
  padding-left: 20px;
}

/root index.html /public c4r001.js c4r001.css

Recurso C4-R002 - Consulta de Estaciones de Bicicletas Publicas

Este recurso consulta un servicio de datos abiertos de redes de bicicletas publicas y muestra algunas estaciones de una red seleccionada, sin necesidad de autenticacion.

id_recurso: C4-R002 id_capa: Capa 4 - Datos Abiertos unidad: Consulta GET a red de bicicletas

Analisis del Recurso C4-R002

Procedencia: Datos abiertos de un servicio publico de redes de bicicletas.
Unidad que sirve la capacidad: Respuesta JSON con informacion de estaciones de una red concreta.
Usos principales: - Visualizacion de estaciones de bicicletas publicas.
- Prototipos de mapas de movilidad urbana.
- Aplicaciones educativas sobre datos abiertos.
Caracteristicas tecnicas: - No requiere claves ni autenticacion.
- Formato JSON estandar.
- Peticiones GET a endpoints publicos.

Endpoint utilizado

https://api.citybik.es/v2/networks/{id_red}

JS del cliente (public/c4r002.js)

// LOGICA C4-R002
document.getElementById("c4r2-cargar").addEventListener("click", async () => {
  const idRed = (document.getElementById("c4r2-red").value || "").trim();
  const lista = document.getElementById("c4r2-lista");
  lista.innerHTML = "";

  if (!idRed) {
    const li = document.createElement("li");
    li.textContent = "Introduce un id de red, por ejemplo: bicing";
    lista.appendChild(li);
    return;
  }

  try {
    const r = await fetch("https://api.citybik.es/v2/networks/" + encodeURIComponent(idRed));
    if (!r.ok) {
      throw new Error("Error en la respuesta del servidor");
    }
    const data = await r.json();

    const estaciones = data.network.stations || [];
    if (estaciones.length === 0) {
      const li = document.createElement("li");
      li.textContent = "No se han encontrado estaciones para esta red.";
      lista.appendChild(li);
      return;
    }

    estaciones.slice(0, 10).forEach(est => {
      const li = document.createElement("li");
      li.textContent = est.name + " - " + est.free_bikes + " bicis libres";
      lista.appendChild(li);
    });
  } catch (e) {
    const li = document.createElement("li");
    li.textContent = "No se ha podido cargar la red. Verifica el id o la conexion.";
    lista.appendChild(li);
  }
});

CSS (public/c4r002.css)

#c4r2-cargar {
  background: #008844;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c4r2-cargar:hover {
  background: #006633;
}

#c4r2-lista {
  margin-top: 10px;
  padding-left: 20px;
}

#c4r2-lista li {
  margin-bottom: 4px;
}

/root index.html /public c4r002.js c4r002.css

Recurso C4-R003 - Consulta de Calidad del Aire (Datos Abiertos)

Este recurso consulta un endpoint publico europeo de calidad del aire y muestra los valores de particulas PM10 y PM2.5 de una ciudad seleccionada, sin necesidad de autenticacion.

id_recurso: C4-R003 id_capa: Capa 4 - Datos Abiertos unidad: Consulta GET a Open Data

Analisis del Recurso C4-R003

Procedencia: Datos publicos del portal OpenAQ (calidad del aire global).
Unidad que sirve la capacidad: Respuesta JSON con medidas ambientales.
Usos principales: - Visualizacion de calidad del aire.
- Sistemas ambientales educativos.
- Prototipos de aplicaciones de salud publica.
Caracteristicas tecnicas: - No requiere claves API.
- Formato JSON estandar.
- Peticion GET simple a un endpoint publico.

Endpoint utilizado

https://api.openaq.org/v2/latest?city={ciudad}

JS del cliente (public/c4r003.js)

// LOGICA C4-R003
document.getElementById("c4r3-cargar").addEventListener("click", async () => {
  const ciudad = (document.getElementById("c4r3-ciudad").value || "").trim();
  const salida = document.getElementById("c4r3-salida");
  salida.innerHTML = "";

  if (!ciudad) {
    salida.textContent = "Introduce una ciudad.";
    return;
  }

  try {
    const url = "https://api.openaq.org/v2/latest?city=" + encodeURIComponent(ciudad);
    const r = await fetch(url);
    if (!r.ok) throw new Error("Error en la respuesta del servidor");

    const data = await r.json();
    if (!data.results || data.results.length === 0) {
      salida.textContent = "No hay datos disponibles para esta ciudad.";
      return;
    }

    const medidas = data.results[0].measurements;
    const pm10 = medidas.find(m => m.parameter === "pm10");
    const pm25 = medidas.find(m => m.parameter === "pm25");

    salida.innerHTML =
      "Ciudad: " + ciudad + "" +
      "PM10: " + (pm10 ? pm10.value + " " + pm10.unit : "No disponible") + "" +
      "PM2.5: " + (pm25 ? pm25.value + " " + pm25.unit : "No disponible") + "";

  } catch (e) {
    salida.textContent = "No se ha podido obtener la informacion.";
  }
});

CSS (public/c4r003.css)

#c4r3-cargar {
  background: #aa5500;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c4r3-cargar:hover {
  background: #884400;
}

#c4r3-salida {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cccccc;
  background: #f7f7f7;
}

/root index.html /public c4r003.js c4r003.css

Recurso 4-1 · CORDIS · Proyectos de Investigación de la UE

Acceso al portal CORDIS, que recoge proyectos de investigación financiados por la Unión Europea (Horizon Europe y programas previos).

id_recurso: R4-1 fuente: CORDIS · Publications Office of the EU

🔬 Explorar proyectos CORDIS

Recurso 4-2 · Datos Educativos Globales (UNESCO UIS)

Enlace al explorador de datos del Instituto de Estadística de la UNESCO, con indicadores educativos globales para análisis comparados.

id_recurso: R4-2 fuente: UNESCO Institute for Statistics

🎓 Ver datos educativos UNESCO

Recurso 4-3 · Indicadores de Educación (World Bank)

Widget del Banco Mundial para visualizar indicadores educativos (por ejemplo, tasa de escolarización o gasto educativo) en proyectos formativos.

id_recurso: R4-3 fuente: World Bank Open Data

🔐 Capa 5 · Conexión por Integración API Dedicada

Código ↔ Pasarela Segura ↔ Centros de Información Privados

ID-CAPA: C05 Tipo: API REST / Webhooks / Tokens

Recurso C5-R001 · Simulador de Petición API con Token

Este recurso no llama a una API real, pero construye la petición HTTP (cabeceras, método y cuerpo) que se enviaría a una API privada con autenticación por token.

id_recurso: C5-R001 id_categoria: Capa 5 · Integración API Dedicada unidad: Plantilla de petición autenticada

URL base de la API: Endpoint (ruta): Token de acceso (ficticio para pruebas): Método HTTP: Cuerpo JSON (solo para POST/PUT): Petición simulada (cURL + fetch):

Análisis del Recurso C5-R001

Procedencia: Plantilla generada en el navegador para integraciones con APIs privadas.
Unidad que sirve la capacidad: Definición de una petición HTTP autenticada con token en cabecera.
Usos principales: - Documentar cómo se debe consumir una API privada.
- Preparar ejemplos para equipos de desarrollo o integraciones externas.
- Probar estructuras de cabeceras y cuerpos JSON.
Características técnicas: - No envía la petición: solo la construye y la muestra.
- Utiliza el esquema típico Authorization: Bearer <token>.
- Representa la Capa 5: comunicación autenticada con centros de datos privados.

Ver código desmenuzado del Recurso C5-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 5)

<section class="capa" id="capa5">
    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa5-titulo">
            <h4 id="recurso-capa5-titulo">Recurso C5-R001 · Simulador de Petición API con Token</h4>
            <p>...</p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C5-R001</span>
                <span>id_categoria: Capa 5 · Integración API Dedicada</span>
                <span>unidad: Plantilla de petición autenticada</span>
            </div>

            <div class="recurso-widget">
                <label for="c5-url-base">URL base de la API:</label>
                <input type="text" id="c5-url-base" value="https://api.ejemplo.com">
                <!-- ... resto de campos ... -->
            </div>
        </article>
        <!-- aside con análisis -->
    </div>
</section>

Recurso 5-1 · PIB per cápita (World Bank)

Widget oficial del Banco Mundial para visualizar el PIB per cápita (indicador NY.GDP.PCAP.CD) en proyectos de economía aplicada y desarrollo.

id_recurso: R5-1 fuente: World Bank Open Data

Recurso 5-2 · Indicadores de Empleo (Eurostat)

Enlace a los visores de Eurostat para tasas de empleo y desempleo en la Unión Europea, útiles para proyectos socioeconómicos y laborales.

id_recurso: R5-2 fuente: Eurostat

📊 Ver datos de empleo Eurostat

Recurso 5-3 · Catálogo de Datos Económicos (Data.gov)

Acceso al catálogo de datos económicos y de contratación pública de Estados Unidos a través de Data.gov y GSA Open Data.

id_recurso: R5-3 fuente: Data.gov / GSA Open Data

💼 Catálogo económico Data.gov

🧬 Capa 6 · Conexión por Inyección o Dependencia Externa

Código ↔ Webs Externas ↔ Renderizado Local (CDN / Widgets / Librerías)

ID-CAPA: C06 Tipo: CDN / Script Externo / Widget

Recurso C6-R001 · Gráfico Dinámico con Librería Externa (Chart.js)

Este recurso inyecta una librería externa (Chart.js) desde un CDN y renderiza un gráfico de barras en el navegador. El código principal se ejecuta en la página, pero la lógica de renderizado del gráfico depende de la librería externa.

id_recurso: C6-R001 id_categoria: Capa 6 · Inyección / Dependencia Externa unidad: Gráfico dinámico externo

Análisis del Recurso C6-R001

Procedencia: Librería Chart.js servida desde un CDN externo, integrada en esta página.
Unidad que sirve la capacidad: Gráfico de barras dinámico que representa datos de ejemplo.
Usos principales: - Visualizar métricas de forma gráfica en paneles de control.
- Integrar componentes visuales avanzados sin desarrollarlos desde cero.
- Demostrar dependencia de código externo en aplicaciones web.
Características técnicas: - Carga de script externo mediante etiqueta <script src="...">.
- El renderizado del gráfico depende de la librería externa.
- Representa la Capa 6: inyección de recursos externos en la web principal.

Ver código desmenuzado del Recurso C6-R001 (HTML · JS · Comentarios)

Fragmento HTML dentro del <body> (sección Capa 6)

<section class="capa" id="capa6">
    <div class="recurso-panel">
        <article class="recurso-demo" aria-labelledby="recurso-capa6-titulo">
            <h4 id="recurso-capa6-titulo">Recurso C6-R001 · Gráfico Dinámico con Librería Externa (Chart.js)</h4>
            <p>...</p>
            <div class="recurso-meta">
                <span class="pill-id">id_recurso: C6-R001</span>
                <span>id_categoria: Capa 6 · Inyección / Dependencia Externa</span>
                <span>unidad: Gráfico dinámico externo</span>
            </div>

            <div class="recurso-widget">
                <canvas id="c6-chart" width="400" height="220"></canvas>
            </div>
        </article>
        <!-- aside con análisis -->
    </div>
</section>

Recurso 1-1 · Datos Abiertos del Gobierno de España

Acceso directo al portal oficial datos.gob.es, punto central de datos abiertos de la Administración española para proyectos educativos y comunitarios.

id_recurso: R1-1 fuente: datos.gob.es

🌐 Explorar datos.gob.es

Recurso 1-2 · Portal Europeo de Datos

Enlace institucional al portal data.europa.eu, que reúne datos abiertos de instituciones y países de la Unión Europea para proyectos comparativos.

id_recurso: R1-2 fuente: data.europa.eu

🇪🇺 Portal Europeo de Datos

Recurso 1-3 · Data.gov · Open Government

Acceso al portal Data.gov, sitio oficial de datos abiertos del Gobierno federal de Estados Unidos, útil para estudios comparados y proyectos globales.

id_recurso: R1-3 fuente: Data.gov

🇺🇸 Data.gov · Open Government

Recurso 3-1 · Indicador de Salud Mundial (World Bank)

Widget oficial del Banco Mundial que muestra la esperanza de vida al nacer (indicador SP.DYN.LE00.IN), integrable en proyectos de salud comunitaria.

id_recurso: R3-1 fuente: World Bank Open Data

Recurso 3-2 · Panel de Salud Global (OMS)

Integración de un panel de datos de la Organización Mundial de la Salud para visualizar indicadores de salud pública a escala internacional.

id_recurso: R3-2 fuente: World Health Organization

🏥 Ver datos de la OMS

Recurso 3-3 · Mapa de Calidad del Aire en Europa

Enlace a los visores de calidad del aire de la Agencia Europea de Medio Ambiente, útil para proyectos de salud ambiental y educación climática.

id_recurso: R3-3 fuente: European Environment Agency

🌍 Índice de Calidad del Aire (EEA)

Recurso 4-1 · CORDIS · Proyectos de Investigación de la UE

Acceso al portal CORDIS, que recoge proyectos de investigación financiados por la Unión Europea (Horizon Europe y programas previos).

id_recurso: R4-1 fuente: CORDIS · Publications Office of the EU

🔬 Explorar proyectos CORDIS

Recurso 4-2 · Datos Educativos Globales (UNESCO UIS)

Enlace al explorador de datos del Instituto de Estadística de la UNESCO, con indicadores educativos globales para análisis comparados.

id_recurso: R4-2 fuente: UNESCO Institute for Statistics

🎓 Ver datos educativos UNESCO

Recurso 4-3 · Indicadores de Educación (World Bank)

Widget del Banco Mundial para visualizar indicadores educativos (por ejemplo, tasa de escolarización o gasto educativo) en proyectos formativos.

id_recurso: R4-3 fuente: World Bank Open Data

Recurso 5-1 · PIB per cápita (World Bank)

Widget oficial del Banco Mundial para visualizar el PIB per cápita (indicador NY.GDP.PCAP.CD) en proyectos de economía aplicada y desarrollo.

id_recurso: R5-1 fuente: World Bank Open Data

Recurso 5-2 · Indicadores de Empleo (Eurostat)

Enlace a los visores de Eurostat para tasas de empleo y desempleo en la Unión Europea, útiles para proyectos socioeconómicos y laborales.

id_recurso: R5-2 fuente: Eurostat

📊 Ver datos de empleo Eurostat

Recurso 5-3 · Catálogo de Datos Económicos (Data.gov)

Acceso al catálogo de datos económicos y de contratación pública de Estados Unidos a través de Data.gov y GSA Open Data.

id_recurso: R5-3 fuente: Data.gov / GSA Open Data

💼 Catálogo económico Data.gov

Recurso 6-1 · Modelo de Declaración de Accesibilidad

Enlace a la información oficial sobre accesibilidad web y cumplimiento del RD 1112/2018, útil como referencia para redactar la declaración de accesibilidad.

id_recurso: R6-1 fuente: Gobierno de España

♿ Accesibilidad Web · España

Recurso 6-2 · Recursos de Privacidad (AEPD)

Acceso a la Agencia Española de Protección de Datos, con guías, herramientas y materiales para cumplir RGPD y LOPDGDD en proyectos web.

id_recurso: R6-2 fuente: AEPD

🔐 Agencia Española de Protección de Datos

Recurso 6-3 · Open Government Data Toolkit

Recurso del Banco Mundial que recopila buenas prácticas, guías y herramientas para programas de datos abiertos y gobernanza responsable de la información.

id_recurso: R6-3 fuente: World Bank · Open Government Data Toolkit

📚 Toolkit de Datos Abiertos (World Bank)

Recurso C3-R002 - Generador de Contrasenas Seguras

Genera contrasenas seguras de forma local, sin enviar datos a ningun servidor.

id_recurso: C3-R002 id_capa: Capa 3 - Interaccion con el Usuario unidad: Generador interno

Analisis del Recurso

Seguridad: Generacion local - No se envia nada a la red.
Usos: Contrasenas para cuentas, sistemas, archivos cifrados.

Ver codigo JS


// =========================
// LOGICA C3-R002
// =========================
(function(){
  const btn = document.getElementById("c3r2-gen");
  const len = document.getElementById("c3r2-len");
  const out = document.getElementById("c3r2-out");

  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}";

  btn.addEventListener("click", () => {
    const L = parseInt(len.value);
    let pass = "";
    for(let i=0;i


















  
    Recurso C3‑R003 · Conversor Universal de Unidades
    Convierte longitudes, pesos y temperaturas de forma instantánea.

    
      id_recurso: C3‑R003
      id_capa: Capa 3 · Interacción con el Usuario
      unidad: Conversor interno
    

    
      Valor:
      

      Tipo:
      

      

      Resultado:
      
    
  

  
    Análisis del Recurso
    
      Usos
      Educación, ciencia, ingeniería, cálculos rápidos.

      Características
      Conversión instantánea · Sin dependencias externas.
    

    
      Ver código JS
      
// =========================
// LÓGICA C3‑R003
// =========================
(function(){
  const v = document.getElementById("c3r3-valor");
  const t = document.getElementById("c3r3-tipo");
  const o = document.getElementById("c3r3-out");
  const b = document.getElementById("c3r3-convertir");

  b.addEventListener("click", () => {
    const val = parseFloat(v.value);
    if(isNaN(val)){
      o.value = "Introduce un número válido";
      return;
    }

    let r = 0;
    switch(t.value){
      case "km-m": r = val * 1000; break;
      case "m-km": r = val / 1000; break;
      case "kg-g": r = val * 1000; break;
      case "g-kg": r = val / 1000; break;
      case "c-f": r = (val * 9/5) + 32; break;
      case "f-c": r = (val - 32) * 5/9; break;
    }

    o.value = r;
  });
})();
      
    
  












  
    Recurso C4‑R001 · Motor Interno de Búsqueda en Texto
    Motor interno que permite buscar palabras o frases dentro de un texto cargado en la página. No usa APIs externas.

    
      id_recurso: C4‑R001
      id_capa: Capa 4 · Motores Internos
      unidad: Motor de búsqueda local
    

    
      Texto a indexar:
      

      Búsqueda:
      

      

      Resultados:
      
    
  

  
    Análisis del Recurso
    
      Función
      Indexación interna · Búsqueda instantánea · Sin dependencias.

      Usos
      Documentación, análisis de texto, educación, revisión de contenido.
    

    
      Ver código JS
      
// =========================
// LÓGICA C4‑R001
// =========================
(function(){
  const txt = document.getElementById("c4r1-texto");
  const q = document.getElementById("c4r1-busqueda");
  const out = document.getElementById("c4r1-salida");
  const btn = document.getElementById("c4r1-ejecutar");

  btn.addEventListener("click", () => {
    const contenido = txt.value.toLowerCase();
    const query = q.value.toLowerCase();

    if(!query){
      out.value = "Introduce un término de búsqueda.";
      return;
    }

    const posiciones = [];
    let idx = contenido.indexOf(query);

    while(idx !== -1){
      posiciones.push(idx);
      idx = contenido.indexOf(query, idx + 1);
    }

    out.value = posiciones.length === 0
      ? "No se encontraron coincidencias."
      : "Coincidencias encontradas en posiciones: " + posiciones.join(", ");
  });
})();
      
    
  










  
    Recurso C4‑R002 · Motor Interno de Ordenación de Listas
    Ordena listas de texto o números de forma ascendente o descendente.

    
      id_recurso: C4‑R002
      id_capa: Capa 4 · Motores Internos
      unidad: Motor de ordenación
    

    
      Lista (un elemento por línea):
      

      Tipo de ordenación:
      

      

      Resultado:
      
    
  

  
    Análisis del Recurso
    
      Función
      Ordenación interna · Sin dependencias · Motor propio.

      Usos
      Listas, inventarios, datos educativos, análisis.
    

    
      Ver código JS
      
// =========================
// LÓGICA C4‑R002
// =========================
(function(){
  const lista = document.getElementById("c4r2-lista");
  const tipo = document.getElementById("c4r2-tipo");
  const out = document.getElementById("c4r2-out");
  const btn = document.getElementById("c4r2-ordenar");

  btn.addEventListener("click", () => {
    const arr = lista.value.split("\n").map(x => x.trim()).filter(x => x);

    let res = [];

    switch(tipo.value){
      case "texto-asc": res = arr.sort(); break;
      case "texto-desc": res = arr.sort().reverse(); break;
      case "num-asc": res = arr.sort((a,b)=>parseFloat(a)-parseFloat(b)); break;
      case "num-desc": res = arr.sort((a,b)=>parseFloat(b)-parseFloat(a)); break;
    }

    out.value = res.join("\n");
  });
})();
      
    
  










  
    Recurso C4‑R003 · Generador Automático de Índice (TOC)
    Escanea la página y genera un índice automático basado en los encabezados H2 y H3.

    
      id_recurso: C4‑R003
      id_capa: Capa 4 · Motores Internos
      unidad: Motor TOC
    

    
      

      Índice generado:
      
    
  

  
    Análisis del Recurso
    
      Función
      Escaneo interno del DOM · Generación automática de índice.

      Usos
      Documentación, manuales, páginas largas, informes.
    

    
      Ver código JS
      
// =========================
// LÓGICA C4‑R003
// =========================
(function(){
  const btn = document.getElementById("c4r3-generar");
  const out = document.getElementById("c4r3-out");

  btn.addEventListener("click", () => {
    const headers = [...document.querySelectorAll("h2, h3")];
    let toc = "";

    headers.forEach(h => {
      const nivel = h.tagName === "H2" ? "• " : "   - ";
      toc += nivel + h.textContent.trim() + "\n";
    });

    out.value = toc || "No se encontraron encabezados.";
  });
})();
      
    
  







 


  
    Recurso C5‑R001 · NASA APOD · Imagen Astronómica del Día
    Consulta la API oficial de la NASA para obtener la imagen astronómica del día, con título y explicación.

    
      id_recurso: C5‑R001
      id_capa: Capa 5 · APIs Externas
      unidad: NASA APOD
      ⚠️ Requiere clave API en config.js
    

    
      

      
      
      
    
  

  
    Análisis del Recurso
    
      Procedencia
      NASA · API oficial APOD

      Características
      Consulta externa · Procesamiento interno · Imagen + texto

      Advertencia
      ⚠️ Requiere clave API en config.js → const NASA_API_KEY = "TU_CLAVE";
    

    
      Ver código JS
      
// =========================
// LÓGICA C5‑R001 · NASA APOD
// =========================
(function(){
  const btn = document.getElementById("c5r1-cargar");
  const titulo = document.getElementById("c5r1-titulo");
  const img = document.getElementById("c5r1-img");
  const exp = document.getElementById("c5r1-explicacion");

  btn.addEventListener("click", async () => {
    if(typeof NASA_API_KEY === "undefined"){
      titulo.textContent = "⚠️ Falta la clave NASA_API_KEY en config.js";
      return;
    }

    const url = `https://api.nasa.gov/planetary/apod?api_key=${NASA_API_KEY}`;

    const r = await fetch(url);
    const data = await r.json();

    titulo.textContent = data.title;
    img.src = data.url;
    img.style.display = "block";
    exp.textContent = data.explanation;
  });
})();
      
    
  









  
    Recurso C5‑R002 · Meteorología en Tiempo Real (Open‑Meteo)
    Consulta meteorológica profesional sin clave API, con temperatura y viento en tiempo real.

    
      id_recurso: C5‑R002
      id_capa: Capa 5 · APIs Externas
      unidad: Open‑Meteo
      ✔ No requiere clave API
    

    
      Latitud:
      

      Longitud:
      

      

      
    
  

  
    Análisis del Recurso
    
      Procedencia
      Open‑Meteo · API oficial sin clave

      Características
      Datos en tiempo real · Procesamiento interno
    

    
      Ver código JS
      
// =========================
// LÓGICA C5‑R002 · Open‑Meteo
// =========================
(function(){
  const lat = document.getElementById("c5r2-lat");
  const lon = document.getElementById("c5r2-lon");
  const out = document.getElementById("c5r2-out");
  const btn = document.getElementById("c5r2-cargar");

  btn.addEventListener("click", async () => {
    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat.value}&longitude=${lon.value}¤t_weather=true`;

    const r = await fetch(url);
    const data = await r.json();

    const w = data.current_weather;

    out.textContent = 
      `Temperatura: ${w.temperature}°C · Viento: ${w.windspeed} km/h`;
  });
})();
      
    
  












  
    Recurso C5‑R003 · Indicadores Económicos (World Bank)
    Consulta el PIB per cápita de un país usando la API oficial del Banco Mundial.

    
      id_recurso: C5‑R003
      id_capa: Capa 5 · APIs Externas
      unidad: World Bank API
      ✔ No requiere clave API
    

    
      Código de país (ISO‑2):
      

      

      
    
  

  
    Análisis del Recurso
    
      Procedencia
      World Bank · API oficial

      Características
      Datos económicos · Procesamiento interno · Sin clave
    

    
      Ver código JS
      
// =========================
// LÓGICA C5‑R003 · World Bank
// =========================
(function(){
  const pais = document.getElementById("c5r3-pais");
  const out = document.getElementById("c5r3-out");
  const btn = document.getElementById("c5r3-cargar");

  btn.addEventListener("click", async () => {
    const url = 
      `https://api.worldbank.org/v2/country/${pais.value}/indicator/NY.GDP.PCAP.CD?format=json`;

    const r = await fetch(url);
    const data = await r.json();

    const ultimo = data[1][0];

    out.textContent = 
      `PIB per cápita (${ultimo.date}): ${ultimo.value.toLocaleString()} USD`;
  });
})();
      
    
  











  
    
      Recurso C5-R001 - Autenticacion Basica (Basic Auth)
      
        Este recurso realiza una peticion autenticada mediante Basic Auth a un endpoint privado.
        El usuario introduce sus credenciales y el sistema genera la cabecera Authorization.
      

      
        id_recurso: C5-R001
        id_capa: Capa 5 - Integracion API Dedicada
        unidad: Basic Auth privada
      

      
        Usuario:
        

        Contraseña:
        

        Endpoint privado:
        

        

        
      
    

    
      Analisis del Recurso C5-R001
      
        Procedencia
        
          Pasarela privada que requiere credenciales de usuario para acceder a datos protegidos.
        

        Unidad que sirve la capacidad
        
          Cabecera HTTP Authorization: Basic {token_base64}
        

        Usos principales
        
          - Acceso a paneles internos.

          - APIs privadas de empresas.

          - Sistemas legacy que usan Basic Auth.
        

        Caracteristicas tecnicas
        
          - Requiere usuario y contraseña reales.

          - Codificacion Base64 en cabecera.

          - Comunicacion obligatoria por HTTPS.

          - Es el nivel mas basico de Capa 5.
        
      

      
        Fragmento HTML del recurso
        <input type="text" id="c5r1-user">
<input type="password" id="c5r1-pass">
<input type="text" id="c5r1-endpoint">
<button id="c5r1-enviar">Enviar peticion segura</button>
      

      
        JS asociado (public/c5r001.js)
        // LOGICA C5-R001 - Basic Auth
(function () {
  const user = document.getElementById("c5r1-user");
  const pass = document.getElementById("c5r1-pass");
  const endpoint = document.getElementById("c5r1-endpoint");
  const boton = document.getElementById("c5r1-enviar");
  const salida = document.getElementById("c5r1-salida");

  if (!user || !pass || !endpoint || !boton || !salida) return;

  boton.addEventListener("click", async () => {
    salida.textContent = "";

    const u = (user.value || "").trim();
    const p = (pass.value || "").trim();
    const url = (endpoint.value || "").trim();

    if (!u || !p) {
      salida.textContent = "Introduce usuario y contraseña.";
      return;
    }

    const token = btoa(u + ":" + p);

    salida.textContent = "Enviando peticion segura...\n";

    try {
      const r = await fetch(url, {
        method: "GET",
        headers: {
          "Authorization": "Basic " + token,
          "Accept": "application/json"
        }
      });

      salida.textContent += "Codigo de estado: " + r.status + "\n";

      let cuerpo = "";
      try {
        const json = await r.json();
        cuerpo = JSON.stringify(json, null, 2);
      } catch (e) {
        cuerpo = "No se pudo interpretar el cuerpo como JSON.";
      }

      salida.textContent += "\nRespuesta del servidor:\n" + cuerpo;

    } catch (err) {
      salida.textContent += "Error de red o CORS. Este recurso requiere un endpoint privado real.";
    }
  });
})();
      

      
        CSS (public/c5r001.css)
        .recurso-widget label {
  display: block;
  margin-top: 8px;
}

.recurso-widget input {
  width: 100%;
  max-width: 420px;
  padding: 6px;
  margin-top: 2px;
}

#c5r1-enviar {
  margin-top: 10px;
  background: #006699;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c5r1-enviar:hover {
  background: #004c73;
}

#c5r1-salida {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cccccc;
  background: #f7f7f7;
  max-height: 260px;
  overflow: auto;
  font-family: monospace;
}
      

    
  

/root
  index.html
  /public
      c5r001.js
      c5r001.css
















  
    
      Recurso C5-R002 - Validador de API Key contra Pasarela Dedicada
      
        Este recurso simula la validacion de una API key contra una pasarela segura de datos privados.
        El usuario introduce su clave y se realiza una peticion autenticada a un endpoint protegido.
      

      
        id_recurso: C5-R002
        id_capa: Capa 5 - Integracion API Dedicada
        unidad: Peticion autenticada con API key
      

      
        API key privada:
        

        Endpoint protegido (solo lectura):
        

        

        
      
    

    
      Analisis del Recurso C5-R002
      
        Procedencia
        
          Interfaz web que actua como cliente de una API privada de empleo o red profesional,
          utilizando una API key proporcionada por la plataforma.
        

        Unidad que sirve la capacidad
        
          Peticion HTTP GET autenticada mediante cabecera X-API-Key hacia un endpoint
          protegido de una pasarela de datos privados.
        

        Usos principales
        
          - Verificar que una API key es valida antes de integrarla en sistemas mayores.

          - Demostrar el patron de cabeceras seguras en Capa 5.

          - Prototipar integraciones con plataformas de empleo o redes institucionales.
        

        Caracteristicas tecnicas
        
          - Requiere API key privada emitida por el proveedor.

          - La clave se envia en cabecera HTTP, no en la URL.

          - La comunicacion debe realizarse sobre HTTPS.

          - Representa una integracion real de pasarela segura (Capa 5).
        
      

      
        Fragmento HTML dentro del <body> (seccion Capa 5)
        <section class="capa" id="capa5-c5r002">
  <div class="recurso-panel">
    <article class="recurso-demo" aria-labelledby="recurso-c5-r002-titulo">
      <h4 id="recurso-c5-r002-titulo">Recurso C5-R002 - Validador de API Key contra Pasarela Dedicada</h4>
      <p>
        Este recurso simula la validacion de una API key contra una pasarela segura de datos privados.
        El usuario introduce su clave y se realiza una peticion autenticada a un endpoint protegido.
      </p>

      <div class="recurso-meta">
        <span class="pill-id">id_recurso: C5-R002</span>
        <span>id_capa: Capa 5 - Integracion API Dedicada</span>
        <span>unidad: Peticion autenticada con API key</span>
      </div>

      <div class="recurso-widget">
        <label for="c5r2-api-key">API key privada:</label>
        <input type="password" id="c5r2-api-key" placeholder="ak_live_xxx...">

        <label for="c5r2-endpoint">Endpoint protegido (solo lectura):</label>
        <input type="text" id="c5r2-endpoint" value="https://api.ejemplo-empleo.com/v1/perfil" />

        <button id="c5r2-probar">Probar conexion segura</button>

        <pre id="c5r2-salida" aria-live="polite"></pre>
      </div>
    </article>
    <!-- aside con analisis aqui -->
  </div>
</section>
      

      
        Codigo JavaScript asociado (public/c5r002.js)
        // =========================
// LOGICA DEL RECURSO C5-R002
// =========================
(function () {
  const inputKey = document.getElementById("c5r2-api-key");
  const inputEndpoint = document.getElementById("c5r2-endpoint");
  const boton = document.getElementById("c5r2-probar");
  const salida = document.getElementById("c5r2-salida");

  if (!inputKey || !inputEndpoint || !boton || !salida) return;

  boton.addEventListener("click", async () => {
    const apiKey = (inputKey.value || "").trim();
    const endpoint = (inputEndpoint.value || "").trim();

    salida.textContent = "";

    if (!apiKey) {
      salida.textContent = "Introduce una API key privada.";
      return;
    }
    if (!endpoint) {
      salida.textContent = "Introduce un endpoint protegido.";
      return;
    }

    salida.textContent = "Realizando peticion segura...\n";

    try {
      const respuesta = await fetch(endpoint, {
        method: "GET",
        headers: {
          "X-API-Key": apiKey,
          "Accept": "application/json"
        }
      });

      salida.textContent += "Codigo de estado: " + respuesta.status + "\n";

      let cuerpo = "";
      try {
        const json = await respuesta.json();
        cuerpo = JSON.stringify(json, null, 2);
      } catch (e) {
        cuerpo = "No se ha podido interpretar el cuerpo como JSON.";
      }

      salida.textContent += "\nRespuesta del servidor:\n" + cuerpo;
    } catch (error) {
      salida.textContent += "Error de red o de CORS. Este recurso ilustra el patron de integracion, " +
        "pero requiere un endpoint real accesible desde el navegador.";
    }
  });
})();
      

      
        Hoja de estilos (public/c5r002.css)
        .recurso-widget label {
  display: block;
  margin-top: 8px;
}

.recurso-widget input {
  width: 100%;
  max-width: 420px;
  padding: 6px;
  margin-top: 2px;
  box-sizing: border-box;
}

#c5r2-probar {
  margin-top: 10px;
  background: #663399;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c5r2-probar:hover {
  background: #4b2673;
}

#c5r2-salida {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cccccc;
  background: #f7f7f7;
  max-height: 260px;
  overflow: auto;
  font-family: monospace;
  font-size: 0.9rem;
}
      

    
  






  
    
      Recurso C5-R003 - Cliente de Descarga de Informes Privados (API con token Bearer)
      
        Este recurso ilustra una integracion de Capa 5 donde se accede a informes privados
        mediante un token de acceso tipo Bearer enviado en la cabecera Authorization.
      

      
        id_recurso: C5-R003
        id_capa: Capa 5 - Integracion API Dedicada
        unidad: Peticion autenticada con Bearer token
      

      
        Token de acceso (Bearer):
        

        Endpoint de informes:
        

        

        
      
    

    
      Analisis del Recurso C5-R003
      
        Procedencia
        
          Cliente web que consume una API privada de informes institucionales, protegida mediante
          un token de acceso emitido por un proveedor de identidad o plataforma interna.
        

        Unidad que sirve la capacidad
        
          Endpoint HTTP GET que devuelve un informe privado en formato JSON, accesible solo
          si la cabecera Authorization incluye un token Bearer valido.
        

        Usos principales
        
          - Descarga de informes de rendimiento o actividad institucional.

          - Integracion con paneles internos de gestion.

          - Prototipos de clientes seguros para intranets.
        

        Caracteristicas tecnicas
        
          - Requiere token de acceso (Bearer) emitido por un sistema de autenticacion.

          - El token se envia en la cabecera HTTP Authorization, no en la URL.

          - La comunicacion debe realizarse sobre HTTPS.

          - Representa una integracion tipica de Capa 5 con recursos privados.
        
      

      
        Fragmento HTML del recurso
        <section class="capa" id="capa5-c5r003">
  <div class="recurso-panel">
    <article class="recurso-demo" aria-labelledby="recurso-c5-r003-titulo">
      <h4 id="recurso-c5-r003-titulo">Recurso C5-R003 - Cliente de Descarga de Informes Privados (API con token Bearer)</h4>
      <p>...</p>
      <div class="recurso-widget">
        <label for="c5r3-token">Token de acceso (Bearer):</label>
        <input type="password" id="c5r3-token" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...">

        <label for="c5r3-endpoint">Endpoint de informes:</label>
        <input type="text" id="c5r3-endpoint" value="https://api.ejemplo-informes.com/v1/reportes/ultimo" />

        <button id="c5r3-descargar">Descargar informe</button>

        <pre id="c5r3-salida" aria-live="polite"></pre>
      </div>
    </article>
  </div>
</section>
      

      
        Codigo JavaScript asociado (public/c5r003.js)
        // =========================
// LOGICA DEL RECURSO C5-R003
// =========================
(function () {
  const inputToken = document.getElementById("c5r3-token");
  const inputEndpoint = document.getElementById("c5r3-endpoint");
  const boton = document.getElementById("c5r3-descargar");
  const salida = document.getElementById("c5r3-salida");

  if (!inputToken || !inputEndpoint || !boton || !salida) return;

  boton.addEventListener("click", async () => {
    const token = (inputToken.value || "").trim();
    const endpoint = (inputEndpoint.value || "").trim();

    salida.textContent = "";

    if (!token) {
      salida.textContent = "Introduce un token de acceso (Bearer).";
      return;
    }
    if (!endpoint) {
      salida.textContent = "Introduce un endpoint de informes.";
      return;
    }

    salida.textContent = "Realizando peticion autenticada...\n";

    try {
      const respuesta = await fetch(endpoint, {
        method: "GET",
        headers: {
          "Authorization": "Bearer " + token,
          "Accept": "application/json"
        }
      });

      salida.textContent += "Codigo de estado: " + respuesta.status + "\n";

      let cuerpo = "";
      try {
        const json = await respuesta.json();
        cuerpo = JSON.stringify(json, null, 2);
      } catch (e) {
        cuerpo = "No se ha podido interpretar el cuerpo como JSON.";
      }

      salida.textContent += "\nRespuesta del servidor:\n" + cuerpo;
    } catch (error) {
      salida.textContent += "Error de red o de CORS. Este recurso ilustra el patron de integracion, " +
        "pero requiere un endpoint real accesible desde el navegador.";
    }
  });
})();
      

      
        Hoja de estilos (public/c5r003.css)
        .recurso-widget label {
  display: block;
  margin-top: 8px;
}

.recurso-widget input {
  width: 100%;
  max-width: 420px;
  padding: 6px;
  margin-top: 2px;
  box-sizing: border-box;
}

#c5r3-descargar {
  margin-top: 10px;
  background: #c0392b;
  color: white;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
}

#c5r3-descargar:hover {
  background: #992d22;
}

#c5r3-salida {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cccccc;
  background: #f7f7f7;
  max-height: 260px;
  overflow: auto;
  font-family: monospace;
  font-size: 0.9rem;
}
      

    
  

/root
  index.html
  /public
      c6r001.js
      c6r001.css








  
    
      Recurso C6-R001 - Mapa Interactivo Externo Inyectado
      
        Este recurso carga un mapa interactivo desde un servidor externo mediante un script CDN.
        La logica, el renderizado y los datos se ejecutan fuera de la plataforma.
      

      
        id_recurso: C6-R001
        id_capa: Capa 6 - Inyeccion Externa
        unidad: Widget externo incrustado
      

      
        
      
    

    
      Analisis del Recurso C6-R001
      
        Procedencia
        
          Libreria OpenLayers cargada desde CDN externo (jsDelivr).  
          El mapa se ejecuta en un hilo externo, no en la plataforma.
        

        Unidad que sirve la capacidad
        
          Script remoto que renderiza un mapa completo sin codigo propio.
        

        Usos principales
        
          - Mapas interactivos sin programacion interna.

          - Visualizacion geoespacial inmediata.

          - Integracion de servicios externos en la web.
        

        Caracteristicas tecnicas
        
          - Dependencia total de un proveedor externo.

          - El recurso no pertenece a la plataforma.

          - Se ejecuta desde CDN, no desde nuestro servidor.

          - Representa la esencia de la Capa 6.
        
      

      
        Fragmento HTML con inyeccion externa
        <script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
<div id="c6r1-mapa"></div>
      

      
        JS asociado (public/c6r001.js)
        // LOGICA C6-R001 - Mapa externo OpenLayers
(function () {
  const mapa = new ol.Map({
    target: "c6r1-mapa",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM() // Datos externos
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-3.7038, 40.4168]), // Madrid
      zoom: 6
    })
  });
})();
      

      
        CSS (public/c6r001.css)
        #c6r1-mapa {
  width: 100%;
  height: 380px;
  border: 2px solid #444444;
  margin-top: 10px;
}
      

    
  

/root
  index.html
  /public
      c6r001.js
      c6r001.css







  
    
      Recurso C6-R002 - Widget de Chat Externo Incrustado
      
        Este recurso incrusta un widget de chat de un proveedor externo mediante un iframe.
        Toda la logica, almacenamiento y procesamiento se ejecutan en los servidores del proveedor.
      

      
        id_recurso: C6-R002
        id_capa: Capa 6 - Inyeccion Externa
        unidad: iframe de chat remoto
      

      
        El siguiente bloque es un iframe que carga un chat externo simulado:
        
          
        
        
          Nota: la URL es de ejemplo. En un entorno real se usaria la URL oficial del proveedor de chat.
        
      
    

    
      Analisis del Recurso C6-R002
      
        Procedencia
        
          Widget de chat proporcionado por un tercero (por ejemplo, proveedor de atencion al cliente
          o asistente conversacional) que se integra mediante iframe.
        

        Unidad que sirve la capacidad
        
          Documento HTML remoto cargado dentro de un iframe, con su propio ciclo de vida,
          scripts, estilos y almacenamiento.
        

        Usos principales
        
          - Atencion al usuario sin desarrollar un chat propio.

          - Integracion de asistentes externos en portales institucionales.

          - Delegacion de la logica conversacional en un proveedor especializado.
        

        Caracteristicas tecnicas
        
          - El contenido del iframe no se ejecuta en el mismo contexto que la web principal.

          - La plataforma no controla el codigo interno del widget.

          - El recurso depende totalmente de la disponibilidad del proveedor externo.

          - Es un ejemplo claro de Capa 6: inyeccion de funcionalidad completa ya programada.
        
      

      
        Fragmento HTML con iframe externo
        <div class="c6r2-marco">
  <iframe
    id="c6r2-chat"
    title="Chat externo"
    src="https://example.com/widget/chat-demo"
    loading="lazy"
  ></iframe>
</div>
      

      
        JS asociado (public/c6r002.js)
        // LOGICA C6-R002
// En este recurso, la logica principal reside en el proveedor externo.
// El JS local solo puede, como mucho, ajustar estilos o registrar eventos
// sobre el iframe, sin acceder a su contenido por politicas de seguridad.

(function () {
  const iframe = document.getElementById("c6r2-chat");
  if (!iframe) return;

  // Ejemplo: registrar en consola cuando el iframe ha cargado
  iframe.addEventListener("load", function () {
    console.log("Widget de chat externo cargado (C6-R002).");
  });
})();
      

      
        CSS (public/c6r002.css)
        .c6r2-marco {
  border: 2px solid #555555;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  height: 420px;
  margin-top: 10px;
}

#c6r2-chat {
  width: 100%;
  height: 100%;
  border: none;
}

.c6r2-aviso {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #555555;
}
      

    
  

/root
  index.html
  /public
      c6r002.js
      c6r002.css







  

  





  
    
      Recurso C6-R003 - Grafico Externo Inyectado (Chart.js CDN)
      
        Este recurso carga la libreria Chart.js desde un CDN externo y renderiza un grafico
        completamente ejecutado fuera de la plataforma.
      

      
        id_recurso: C6-R003
        id_capa: Capa 6 - Inyeccion Externa
        unidad: Libreria CDN remota
      

      
        
      
    

    
      Analisis del Recurso C6-R003
      
        Procedencia
        
          Libreria Chart.js cargada desde CDN externo (jsDelivr).  
          El motor de graficos se ejecuta fuera de la plataforma.
        

        Unidad que sirve la capacidad
        
          Script remoto que genera un grafico sin logica propia local.
        

        Usos principales
        
          - Visualizacion rapida de datos sin programar un motor grafico.

          - Integracion de librerias externas en portales institucionales.

          - Prototipos de dashboards con dependencia externa.
        

        Caracteristicas tecnicas
        
          - Dependencia total del CDN externo.

          - El grafico no pertenece a la plataforma.

          - El procesamiento se ejecuta en el script remoto.

          - Es un ejemplo puro de Capa 6.
        
      

      
        Fragmento HTML con inyeccion externa
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="c6r3-grafico"></canvas>
      

      
        JS asociado (public/c6r003.js)
        // LOGICA C6-R003 - Grafico externo Chart.js
(function () {
  const ctx = document.getElementById("c6r3-grafico");
  if (!ctx) return;

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["A", "B", "C", "D"],
      datasets: [{
        label: "Valores externos",
        data: [12, 19, 7, 14],
        backgroundColor: ["#3366cc", "#dc3912", "#ff9900", "#109618"]
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true }
      }
    }
  });
})();
      

      
        CSS (public/c6r003.css)
        #c6r3-grafico {
  width: 100%;
  max-width: 480px;
  height: 320px;
  margin-top: 10px;
  border: 2px solid #444444;
}
      

    
  

/root
  index.html
  /public
      c6r003.js
      c6r003.css

Propósito del Directorio

🏛️ Capa 1 · Conexión Primitiva de Núcleo Local

Recurso C1-R001 · Generador de Script Local para Organización de Fotos

Recurso 1-1 · Datos Abiertos del Gobierno de España

Recurso C1-R002 · Generador de Script Local para Copia de Seguridad de Documentos

Recurso C1-R003 · Generador de Script Local para Renombrado Masivo de Archivos

Recurso C1-R001 - Script local de copia de seguridad de carpeta

Recurso C1-R002 - Script local para volcado de arbol de directorios

Recurso C1-R003 - Script local para limpieza de archivos antiguos

Recurso 1-2 · Portal Europeo de Datos

Recurso 1-3 · Data.gov · Open Government

🧩 Capa 2 · Conexión por Puente de Aplicación

Recurso C2-R001 · Bloc Persistente de Notas Técnicas (LocalStorage)

🧩 Capa 2 · Conexión por Puente de Aplicación

Recurso C2-R002 · Cronología Dinámica del Sistema

Recurso C2-R003 · Migas de Pan Automáticas

Recurso C2-R004 · Libro de Visitas con Voz + LocalStorage

— Antología de Pensamientos Libres —

Recurso C2-R005 · Libro Captador Visitante (Versión Extendida)

Lienzo de Pensamientos Libres

— Últimos Pensamientos Sincronizados —

Antología Completa de Pensamientos

Recurso C2-R006 · Central de Conectividad Estratégica

🌐 Central de Conectividad Estratégica

Perfil Institucional

Galería de Diseño

Iniciativa y Divulgación

Disponibilidad Laboral

Recurso C2-R007 · Audio‑Guía Institucional para Artículos

Ejemplo de Artículo Institucional

Recurso C2-R008 · Audio‑Lectura Integral del Documento

Recurso C2-R009 · Indicadores de Accesibilidad

Recurso C2-R010 · Licencia Creative Commons (CC BY 4.0)

Recurso C2-R011 · Pie de Página Institucional Normalizado

Recurso C2-R012 · Traductor Multilingüe Instantáneo

Traducción Global Automática (Ecosistema Google)

Recurso C2-R013 · Marcador de Recursos Favoritos

Marcador de Recursos Favoritos

Recurso C2-R014 · Buscador Inteligente del Directorio

Buscador Inteligente del Directorio (Soporte Google)

Recurso C2-R015 · Migas de Pan Automáticas

Recurso C2-R016 · Compartir Artículo

Recurso C2-R017 · Compartir Artículo

Recurso C2-R017 · Centro de Impresión y Exportación

🖨️ Centro de Exportación e Impresión

Recurso C2-R018 · Motor de Impresión Profesional

Recurso C2-R019 · Botones Institucionales Animados

🖥️ Capa 3 · Conexión por Despliegue de Servidor

Recurso C3-R001 · Generador de Estructura de Proyecto Web en Servidor

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Recurso C3-R002 - Mini Logger Web Servido

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Recurso C3-R001 - Gestor Modular de Archivos Estaticos

Recurso C3-R003 - Cargador de Plantillas HTML

Recurso C3-R002 - Mini Logger Web Servido

Recurso C3-R003 - Cargador de Plantillas HTML

Recurso 3-1 · Indicador de Salud Mundial (World Bank)

Recurso 3-2 · Panel de Salud Global (OMS)

Recurso 3-3 · Mapa de Calidad del Aire en Europa

🌐 Capa 4 · Conexión por Consumo de Datos Abiertos

Recurso C4-R001 · Visor Simple de Datos Abiertos (JSON)

Recurso C4-R001 - Consulta de Estaciones Meteorologicas Publicas

Recurso C4-R002 - Consulta de Estaciones de Bicicletas Publicas

Recurso C4-R003 - Consulta de Calidad del Aire (Datos Abiertos)

Recurso 4-1 · CORDIS · Proyectos de Investigación de la UE

Recurso 4-2 · Datos Educativos Globales (UNESCO UIS)

Recurso 4-3 · Indicadores de Educación (World Bank)

🔐 Capa 5 · Conexión por Integración API Dedicada

Recurso C5-R001 · Simulador de Petición API con Token

Recurso 5-1 · PIB per cápita (World Bank)

Recurso 5-2 · Indicadores de Empleo (Eurostat)

Recurso 5-3 · Catálogo de Datos Económicos (Data.gov)

🧬 Capa 6 · Conexión por Inyección o Dependencia Externa

Recurso C6-R001 · Gráfico Dinámico con Librería Externa (Chart.js)

Recurso 1-1 · Datos Abiertos del Gobierno de España

Recurso 1-2 · Portal Europeo de Datos

Recurso 1-3 · Data.gov · Open Government

Recurso 3-1 · Indicador de Salud Mundial (World Bank)

Recurso 3-2 · Panel de Salud Global (OMS)

Recurso 3-3 · Mapa de Calidad del Aire en Europa