ADN
Doble hélice con bases A, T, C, G y complementariedad.
Emparejamiento
Demo front-end: HTML, CSS y JavaScript
Visualizá, generá y procesá secuencias biológicas
Esta página muestra conceptos clave de biología molecular mediante animación y lógica en el navegador: emparejamiento de bases, transcripción y traducción. Ideal para una demo de despliegue estático.
ARN
Hebra simple con U en lugar de T. Puente hacia proteínas.
Transcripción
Proteína
Traducción de codones (tripletes) a aminoácidos.
Traducción
Tip: si lo abrís con Live Server, podés mostrar en vivo cambios en CSS y JS.
Doble hélice con “escalones” que representan pares de bases.
Hebra simple con bases que se desplazan como una “cinta”.
Listo
Interactivo, sin dependencias externas.
Laboratorio interactivo
Generá secuencias y aplicá operaciones típicas: complemento, transcripción y traducción.
Entrada
60
Conteo
0
GC
0%
Codones
0
Salida
Esperando una operación…
Traducción paso a paso
Codón
STOP
La traducción usa el código genético estándar (ARN). Inicia en el primer AUG encontrado y se detiene en un codón STOP.
Mini guía para explicar en clase
- Complemento: A↔T y C↔G en ADN. En ARN: A↔U y C↔G.
- Transcripción: plantilla de ADN → ARN (T se reemplaza por U).
- Traducción: el ribosoma lee tripletes (codones) y produce aminoácidos.
Pregunta rápida
¿Cuál es el complemento de ATGCC?
Detalles técnicos
- Sin frameworks. Ideal para hosting estático (GitHub Pages, Azure Static Web Apps, Netlify).
- Accesible: roles, aria-live y foco visible.
- Animaciones CSS y lógica de biología molecular en JavaScript.
Checklist de despliegue
Carpeta
index.html, styles.css, app.js
Probar local
Abrir index.html o usar Live Server
Subir
Arrastrar la carpeta al proveedor elegido