Haz clic en cualquier elemento del visor para editarlo.
Selecciona un título, párrafo o tarjeta en el visor y edita su texto aquí. Se admite HTML.
También puedes hacer doble clic sobre cualquier texto del visor para escribir directamente encima.
Modo avanzado: acceso directo al HTML completo de la sección, con todas sus clases, atributos y eventos.
Elige primero una diapositiva en el visor. Puedes usar una imagen, un color plano o un degradado.
Tus secciones vienen al 65 %. Bajarla mejora la lectura del texto y deja ver el marco decorativo que está detrás.
El marco se dibuja sobre el fondo, en los bordes de la pantalla, así que ninguna imagen lo tapa. Se aplica a todas las diapositivas.
Cambia tipografías, tarjetas y contrastes de todas las secciones sin tocar su estructura ni sus scripts.
Haz clic sobre la imagen que quieres cambiar en el visor y luego súbela o pega su dirección.
Pega el enlace de YouTube tal como lo copias del navegador; se convierte solo al formato correcto.
Para la sección del visor de documentos. Sube el PDF y se coloca a la vez en el visor de escritorio y en el enlace para móviles.
Estos arreglos alimentan el reto de preguntas, la línea de tiempo y los gráficos. Escribe JSON válido y guarda.
Sube el programa de la asignatura y la IA propone qué secciones usar, en qué orden y con qué contenido. Tú revisas la propuesta antes de que se construya.
De aquí salen las unidades, los objetivos y el orden de los temas.
De aquí sale la sustancia: definiciones, ejemplos, datos y explicaciones reales. Sin esto, la IA redacta con conocimiento general.
Reescribe los textos de una diapositiva o de toda la OVA según el tema que indiques. Conserva clases, estilos, scripts y estructura tal como están.
Se obtiene gratis en aistudio.google.com y solo se guarda en este navegador.
·
Revisa el orden y el tipo de cada diapositiva antes de construir. Puedes cambiar la sección, corregir el título, reordenar o quitar lo que no necesites.
Cada sección conserva el fondo, los colores y el estilo con los que fue diseñada en plantilla.html. Solo cambian los textos.
Todo lo que has publicado en tu carpeta del servidor.
Todo lo que agregues se copia de plantilla.html con sus estilos, sus scripts y su registro de analítica intactos.
Este constructor no dibuja páginas desde cero: copia secciones ya diseñadas desde plantilla.html. Cada vez que haces clic en una sección de la izquierda, se clona con su HTML, sus clases y su identificador, y se inserta en tu OVA.
El CSS y los scripts que hacen funcionar las animaciones, los popups, los gráficos y el envío de datos viven en la cabecera del documento y se copian una sola vez. Por eso todas las OVAs que crees se comportan igual, aunque el contenido sea distinto.
Tu trabajo se guarda solo en este navegador mientras editas. Si cierras la pestaña y vuelves con el mismo usuario, lo recuperas. Solo queda en el servidor cuando publicas.
Puedes repetir la misma sección tantas veces como necesites: cada copia es independiente y se edita por separado.
Escribir sobre el lienzo. Haz doble clic sobre cualquier título o párrafo del visor y escribe encima, como en un procesador de texto. Aparece una barra flotante con negrita, cursiva, subrayado, alineación, color, tamaño y enlaces. Al terminar pulsa Esc o el botón «Listo».
Si prefieres el panel lateral, sigue funcionando igual:
El cuadro de texto admite HTML, así que puedes usar <b>negrita</b>, <br> para un salto de línea o <span style="color:#00c3ff">color</span>.
El color y el tamaño se aplican solo al elemento seleccionado. Si quieres cambiar el aspecto de toda la OVA de una vez, eso se hace con los estilos visuales de la pestaña Fondo, no aquí.
Para cambiar una imagen: haz clic sobre ella en el visor, ve a la pestaña Imagen y video y sube el archivo desde tu PC. Se guarda en tu-carpeta/img/ en el servidor y queda referenciada como img/nombre.jpg para que la OVA publicada la encuentre.
También puedes pegar la dirección de una imagen de internet en el cuadro de texto y pulsar «Cambiar imagen».
Para colocar un PDF: agrega la sección «Visor de PDF», selecciónala en el visor y sube el documento desde la pestaña Imagen y video. Se guarda en tu-carpeta/img/ y se coloca a la vez en el visor de escritorio y en el enlace de descarga que ven los estudiantes desde el celular. La lista desplegable muestra los PDF que ya subiste, para reutilizarlos en otras OVAs sin volver a cargarlos.
Para cambiar un video: selecciona el reproductor o el bloque de la clase, pega el enlace de YouTube tal como lo copias del navegador y pulsa «Cambiar video». El enlace se convierte solo al formato que se puede incrustar; no hace falta que busques el código de inserción.
En la pestaña Fondo eliges primero el tipo:
El deslizador de intensidad es el que resuelve el problema más común: cuando la foto tiene mucho detalle y el texto no se lee. Bájalo a 40–60 % y el texto vuelve a destacar.
«Aplicar a toda la OVA» pone el mismo fondo en todas las diapositivas de una sola vez, que es la forma rápida de dar unidad visual.
Tu plantilla trae un marco decorativo que vive detrás de las diapositivas, y por eso solo se ve cuando el fondo no es totalmente opaco: si subes la intensidad al 100 %, el marco desaparece. Esa es la razón por la que tus secciones vienen al 65 %.
En «Marco de la OVA» puedes conservar el tuyo o elegir entre ocho alternativas —filete doble, esquinas, institucional, cinta lateral, académico, viñeta, diagonal o ninguno— y cambiarles el color. Los marcos nuevos se dibujan encima del fondo, en los bordes de la pantalla, así que ninguna imagen los tapa, sin importar la intensidad que uses.
Más abajo hay cinco estilos: Original, Aurora, Aula clara, Grafito y Ámbar. Cambian tipografía, tarjetas, tablas y contrastes de todas las secciones a la vez, sin tocar la estructura ni los scripts. «Aula clara» es la mejor opción cuando la OVA se va a proyectar en un salón con luz.
El mapa de la esquina inferior izquierda lista tu OVA en orden. Sobre cada renglón, al pasar el mouse, aparecen cuatro botones:
También puedes arrastrar un renglón y soltarlo sobre otro para moverlo varias posiciones de golpe. Un clic simple sobre el renglón salta a esa diapositiva en el visor.
Algunas secciones no leen su contenido del HTML sino de listas de datos que viven en los scripts de la plantilla. Se editan en la pestaña Datos:
bancoPreguntas: las preguntas del reto de evaluación.textosPro: los textos que aparecen en la línea de tiempo.datosBI: los números que dibujan los gráficos.Se escriben en formato JSON. La regla práctica: no borres los corchetes ni las llaves, respeta las comillas dobles y no dejes una coma después del último elemento. Pulsa «Guardar datos» y la vista previa se actualiza.
Para quien sabe programar, este es el acceso directo a la sección. Se abre desde el botón «Editar el código HTML de esta diapositiva» de la pestaña Contenido, o desde la pestaña Código.
Hay dos modos:
<section>. Es el modo seguro y el que conviene usar casi siempre.<section> y sus atributos, por ejemplo data-id-seccion, data-background-image o data-transition.La barra de herramientas permite recargar el código real, reacomodar la sangría, copiarlo y deshacer el último cambio aplicado. Tab escribe sangría dentro del editor y Ctrl+Enter aplica el código.
Abajo hay fragmentos listos para insertar (párrafo, caja, lista, imagen, video, tabla, botón) que ya usan las clases de la plantilla, de modo que heredan su estilo sin que tengas que escribir CSS.
data-id-seccion identifica la sección ante la analítica; los atributos onclick y onmouseenter conectan con funciones de la plantilla; los id numerados alimentan el reto de preguntas; y las clases de la plantilla son las que dan el estilo. Si los borras, el elemento sigue viéndose pero deja de funcionar.Los estilos globales y los scripts no se editan desde aquí: viven en la cabecera de plantilla.html, y así es como se garantiza que todas las OVAs compartan la misma estructura.
Es la función más automática del constructor. Subes el programa de la asignatura en PDF, texto o incluso una foto del documento, y la IA propone la OVA completa: qué secciones usar de las 28 disponibles, en qué orden, con qué título y con qué contenido cada una.
Conviene subir dos cosas distintas. El microcurrículo define la estructura: unidades, objetivos, orden de los temas y evaluación. El material de contenido —presentaciones, apuntes, capítulos, lecturas— aporta la sustancia: definiciones exactas, clasificaciones, cifras, ejemplos y autores. Sin el segundo, la IA redacta con conocimiento general y el resultado queda correcto pero genérico.
Puedes adjuntar hasta seis archivos de material, sumando 18 MB entre todos. Cuando hay material, el asistente hace una segunda pasada que desarrolla el contenido de cada diapositiva a partir de los documentos, y marca con [sin material de origen] los temas del microcurrículo que no encontró en ellos.
La propuesta no se aplica sola. Primero se abre una ventana donde revisas el plan diapositiva por diapositiva: puedes cambiar el tipo de sección, corregir los títulos, reordenar, quitar lo que sobre o agregar lo que falte. Solo entonces pulsas «Construir la OVA».
Durante la construcción, el constructor clona cada sección de la plantilla igual que si la agregaras a mano —conservando estilos, scripts y el identificador de analítica— y luego pide a la IA que redacte sus textos con el material del microcurrículo. También aplica un estilo visual, un marco y una paleta de fondos coherente en toda la OVA, y genera el banco de preguntas si el plan incluye el reto de evaluación.
Antes de construir eliges el diseño visual. Con «Original de la plantilla», que viene marcado por defecto, cada sección conserva el fondo, los colores y el estilo con los que fue diseñada, y solo cambian los textos. Con «El que propone la IA» se aplican el estilo, el marco y la paleta de fondos sugeridos, reemplazando los de la plantilla en toda la OVA.
Los archivos de Word no se leen directamente. Guarda el microcurrículo como PDF o copia el texto en el cuadro de indicaciones.
Sirve para adaptar una OVA existente a otro tema sin rehacer el diseño. Pega tu clave de Google AI Studio una sola vez (queda solo en este navegador), escribe el tema y elige:
El asistente tiene instrucciones estrictas de cambiar únicamente el texto visible: no toca etiquetas, clases, estilos, eventos ni scripts. Aun así, revisa el resultado antes de publicar.
.html.Antes de guardar, el constructor limpia las marcas temporales de la vista previa y deja las rutas de imágenes en su forma final, para que la OVA publicada funcione por sí sola.
Si ya tienes una OVA abierta, al publicar te pregunta si quieres guardar sobre ella o crear otra con distinto nombre. El nombre en edición se ve siempre en la barra superior.
El botón Mis OVAs de la barra superior (o Ctrl+O) lista todo lo que has publicado en tu carpeta del servidor. Desde ahí puedes abrir, duplicar, renombrar y enviar a la papelera.
Cada vez que publicas sobre una OVA existente se guarda antes una copia de la anterior. El icono del reloj muestra esas versiones y permite recuperar cualquiera. Se conservan las diez últimas.
Eliminar no borra nada: el archivo se mueve a la carpeta papelera de tu cuenta con la fecha en el nombre.
Cada sección de la plantilla lleva un identificador propio en data-id-seccion. Cuando un estudiante abre la OVA, los scripts registran lo que hace —tiempo en cada diapositiva, clics, apertura de popups, respuestas correctas e incorrectas, avance del video, lectura del PDF— y lo envían por lotes a tu API de analítica educativa.
Todo eso viaja en la copia de la sección, así que no tienes que configurar nada para que una OVA nueva quede medida. Solo hay dos formas de romperlo: borrar el data-id-seccion desde el editor de código, o quitar los atributos de evento de los elementos interactivos.
Si duplicas una sección, las dos copias reportan bajo el mismo identificador. Es el comportamiento esperado: la analítica agrupa por tipo de sección, no por posición.
Hice clic y no se seleccionó nada. Toca directamente sobre el texto o la imagen. Las capas decorativas y las animaciones de fondo están desactivadas a propósito para que no estorben.
La imagen no se ve en la vista previa. Vuelve a subirla desde «Imagen y video». El visor y la OVA publicada usan rutas distintas y el constructor las traduce cuando subes el archivo.
El texto no se lee sobre el fondo. Baja la intensidad del fondo, o cambia a color plano.
Apliqué código y la sección se rompió. Usa «Deshacer» en la barra del editor de código. Si ya recargaste, elimina la diapositiva y vuelve a insertarla desde el catálogo.
Me equivoqué en algo. Ctrl+Z deshace y Ctrl+Shift+Z rehace, en todo el editor y no solo en el código. Se recuerdan los últimos cuarenta cambios de la sesión.
Perdí el trabajo. El borrador se guarda por usuario en este navegador. Se pierde si publicas, si pulsas «Reiniciar el proyecto» o si borras los datos del navegador. Descarga copias con frecuencia.
El asistente da error. Casi siempre es la clave: revisa que esté completa y que la cuenta de Google AI Studio tenga cuota disponible.
Ctrl+S guardar borrador · Ctrl+Z deshacer · Ctrl+Shift+Z rehacer · Ctrl+O mis OVAs · Ctrl+K buscar sección · Ctrl+Enter aplicar código · Esc cerrar o salir de la edición