Skip to content

README.md

Latest commit

 

History

History
76 lines (59 loc) · 2.49 KB

README.md

File metadata and controls

76 lines (59 loc) · 2.49 KB
Raw

🔬 Laboratorio Digital — Repositorio de Artefactos

Repositorio de artefactos educativos interactivos: simuladores, calculadoras, juegos y herramientas pedagógicas en HTML.

📁 Estructura del repositorio

/
├── index.html          ← Página principal (galería de artefactos)
├── README.md
└── artefactos/         ← Carpeta con todos los artefactos HTML
    ├── calculadora-calorica.html
    ├── simulador-mcu.html
    └── ...

🚀 Uso en GitHub Pages

  1. Ve a Settings → Pages en tu repositorio.
  2. En Branch, selecciona main y carpeta / (raíz).
  3. Guarda. En unos minutos tu repositorio estará disponible en: https://tu-usuario.github.io/nombre-repo/

➕ Agregar un nuevo artefacto

Opción A — Desde la interfaz web

  1. Abre index.html en el navegador.
  2. Haz clic en Agregar artefacto (botón flotante).
  3. Completa el formulario. Esto genera la tarjeta visualmente.
  4. Copia el código HTML generado y pégalo en index.html antes del placeholder #addPlaceholder.

Opción B — Editando index.html directamente

Copia este bloque dentro de <div class="cards"> y edítalo:

<a class="card" href="artefactos/mi-artefacto.html"
   style="--card-accent:#00d4ff; --card-bg:rgba(0,212,255,0.08);"
   data-tags="simulador">
  <div class="card-top">
    <div class="card-icon">🔬</div>
    <span class="card-tag">Simulador</span>
  </div>
  <div class="card-title">Nombre del artefacto</div>
  <div class="card-desc">Descripción breve del artefacto.</div>
  <div class="card-footer">
    <span>Asignatura · Nivel</span>
    <span class="card-link">Abrir →</span>
  </div>
</a>

Colores disponibles por categoría

Categoría --card-accent --card-bg
Simulador #7c3aed rgba(124,58,237,0.08)
Calculadora #00d4ff rgba(0,212,255,0.08)
Juego #f59e0b rgba(245,158,11,0.08)
Herramienta #10b981 rgba(16,185,129,0.08)
Visualizador #f43f5e rgba(244,63,94,0.08)

🏷️ Categorías y data-tags

El atributo data-tags permite filtrar las tarjetas. Usa uno o más valores separados por espacio:

  • simulador
  • calculadora
  • juego
  • herramienta
  • visualizador

Ejemplo con dos etiquetas: data-tags="simulador juego"

📄 Licencia

Uso educativo libre. Atribución apreciada.