#!/usr/bin/env bash # PUBLICACIÓN DIDÁCTICA EN TUTO XAMPP # Este archivo es una copia de consulta del generador maestro. # Revísalo antes de ejecutarlo. Crea una carpeta nueva en ~/Desktop y se detiene # si ya existe un proyecto con el mismo nombre; no publica automáticamente nada. # Uso: chmod +x NOMBRE_SCRIPT.sh && ./NOMBRE_SCRIPT.sh # ============================================================== # Script: crear_pagina_web_HTML.sh # Descripción: # Genera un esqueleto web sencillo con dos niveles: # # 1) Raíz del proyecto: # - index.html = panel/lanzador # - botón "INICIAR ESTA WEB" # - acceso directo a public/index.html # # 2) public/: # - web real # - Inicio | Web | Contacto # - calculadora JavaScript # - formulario de contacto de demostración # # Las carpetas internas docs/, src/, scripts/ y backups/ # quedan bloqueadas por HTTP mediante .htaccess. # ============================================================== set -e echo "==========================================" echo " GENERADOR DE ESQUELETO WEB" echo "==========================================" echo read -rp "Nombre del proyecto [mi_pagina_web]: " NOMBRE_PROYECTO NOMBRE_PROYECTO="${NOMBRE_PROYECTO:-mi_pagina_web}" # Evitar espacios y barras en el nombre de la carpeta NOMBRE_PROYECTO="${NOMBRE_PROYECTO// /_}" NOMBRE_PROYECTO="${NOMBRE_PROYECTO//\//_}" # Nombre visible NOMBRE_WEB="${NOMBRE_PROYECTO//_/ }" # Crear siempre el proyecto en el Escritorio Linux RUTA_BASE="${HOME}/Desktop" mkdir -p "${RUTA_BASE}" PROYECTO="${RUTA_BASE}/${NOMBRE_PROYECTO}" PUBLIC="${PROYECTO}/public" ASSETS="${PUBLIC}/assets" CSS="${ASSETS}/css" JS="${ASSETS}/js" IMG="${ASSETS}/img" ICONOS="${IMG}/iconos" FONTS="${ASSETS}/fonts" SRC="${PROYECTO}/src" DOCS="${PROYECTO}/docs" SCRIPTS="${PROYECTO}/scripts" BACKUPS="${PROYECTO}/backups" if [ -e "${PROYECTO}" ]; then echo echo "ERROR: Ya existe la carpeta:" echo " ${PROYECTO}" echo echo "Usa otro nombre o mueve/elimina la carpeta existente." exit 1 fi echo echo "Creando estructura..." echo mkdir -p \ "${PUBLIC}" \ "${CSS}" \ "${JS}" \ "${ICONOS}" \ "${FONTS}" \ "${SRC}" \ "${DOCS}" \ "${SCRIPTS}" \ "${BACKUPS}" # ============================================================== # PANEL / LANZADOR EN LA RAÍZ DEL PROYECTO # ============================================================== cat > "${PROYECTO}/index.html" < ${NOMBRE_WEB} · Inicio del proyecto

${NOMBRE_WEB}

Este es el punto de entrada del proyecto. La web que vas a ver está guardada dentro de la carpeta public.

Pulsa el botón para abrir la página principal.

INICIAR ESTA WEB

Las carpetas internas del proyecto quedan separadas de la parte pública de la web.

EOF # Impedir listados automáticos de directorios en la raíz cat > "${PROYECTO}/.htaccess" <<'EOF' Options -Indexes EOF # Bloquear por HTTP las carpetas internas for CARPETA_PRIVADA in "${SRC}" "${DOCS}" "${SCRIPTS}" "${BACKUPS}"; do cat > "${CARPETA_PRIVADA}/.htaccess" <<'EOF' Require all denied EOF done # ============================================================== # WEB PÚBLICA: INICIO # ============================================================== cat > "${PUBLIC}/index.html" < ${NOMBRE_WEB} · Inicio

${NOMBRE_WEB}

Inicio

Este es el inicio.

Este proyecto es un esqueleto básico para empezar una página web.

${NOMBRE_WEB} · Sitio web de ejemplo

EOF # ============================================================== # WEB PÚBLICA: WEB + CALCULADORA # ============================================================== cat > "${PUBLIC}/web.html" < ${NOMBRE_WEB} · Web

${NOMBRE_WEB}

Web

Esta es la página web.

Calculadora sencilla

Resultado: —

${NOMBRE_WEB} · Sitio web de ejemplo

EOF # ============================================================== # WEB PÚBLICA: CONTACTO # ============================================================== cat > "${PUBLIC}/contacto.html" < ${NOMBRE_WEB} · Contacto

${NOMBRE_WEB}

Contacto

Formulario de contacto de demostración.

${NOMBRE_WEB} · Sitio web de ejemplo

EOF # ============================================================== # CSS # ============================================================== cat > "${CSS}/estilo.css" <<'EOF' /* Estilos base compartidos por las tres páginas públicas del ejemplo. */ * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; background: #f4f4f4; color: #222; } .cabecera { background: #222; color: white; padding: 20px; } .cabecera h1 { margin: 0 0 15px; } .menu { display: flex; gap: 10px; flex-wrap: wrap; } .menu a { color: white; text-decoration: none; padding: 8px 12px; border-radius: 5px; } .menu a:hover, .menu a.activo { background: #555; } .contenido { max-width: 900px; margin: 30px auto; padding: 0 20px; } .tarjeta { background: white; padding: 25px; border-radius: 8px; border: 1px solid #ddd; } .calculadora, .formulario { max-width: 480px; margin-top: 25px; } .calculadora label, .formulario label { display: block; margin-top: 12px; margin-bottom: 4px; font-weight: bold; } .calculadora input, .calculadora select, .formulario input, .formulario textarea { width: 100%; padding: 10px; border: 1px solid #bbb; border-radius: 5px; } button { margin-top: 15px; padding: 10px 18px; border: 0; border-radius: 5px; cursor: pointer; } .resultado { margin-top: 18px; font-weight: bold; } .pie { text-align: center; padding: 20px; color: #666; } EOF # ============================================================== # JAVASCRIPT # ============================================================== cat > "${JS}/app.js" <<'EOF' document.addEventListener("DOMContentLoaded", () => { // Calculadora const botonCalcular = document.getElementById("boton-calcular"); if (botonCalcular) { botonCalcular.addEventListener("click", () => { const numero1 = parseFloat(document.getElementById("numero1").value); const numero2 = parseFloat(document.getElementById("numero2").value); const operacion = document.getElementById("operacion").value; const resultado = document.getElementById("resultado"); if (Number.isNaN(numero1) || Number.isNaN(numero2)) { resultado.textContent = "Resultado: introduce dos números."; return; } let valor; if (operacion === "sumar") { valor = numero1 + numero2; } else if (operacion === "restar") { valor = numero1 - numero2; } else if (operacion === "multiplicar") { valor = numero1 * numero2; } else if (operacion === "dividir") { if (numero2 === 0) { resultado.textContent = "Resultado: no se puede dividir entre cero."; return; } valor = numero1 / numero2; } resultado.textContent = `Resultado: ${valor}`; }); } // Formulario local de demostración const formulario = document.getElementById("formulario-contacto"); if (formulario) { formulario.addEventListener("submit", (evento) => { evento.preventDefault(); const nombre = document.getElementById("nombre").value.trim(); const mensaje = document.getElementById("mensaje-formulario"); mensaje.textContent = `Gracias, ${nombre}. El formulario funciona, pero no envía datos a ningún servidor.`; formulario.reset(); }); } }); EOF # ============================================================== # ARCHIVOS AUXILIARES # ============================================================== cat > "${PUBLIC}/.htaccess" <<'EOF' Options -Indexes EOF cat > "${PUBLIC}/robots.txt" <<'EOF' User-agent: * Disallow: EOF cat > "${PUBLIC}/sitemap.xml" <<'EOF' EOF cat > "${PROYECTO}/README.md" <