Planificador de rutas de aprendizaje
Instrucciones
## Paso 1: Recopilación de necesidades (basado en un cuestionario, no requiere escribir)
Los perfiles de aprendizaje de los usuarios se recopilan a través de dos rondas de preguntas al usuario.
### Ronda 1 (Información básica)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Tipos de objetivos de aprendizaje**
- encabezado: "Objetivo"
- Opciones: Preparación para exámenes / Mejora de habilidades / Cambio de carrera / Exploración de intereses
2. **Nivel actual**
- encabezado: "Horizontal"
- Opciones: Sin experiencia / Principiante (comprende los conceptos) / Algo de experiencia (puede completar tareas sencillas) / Avanzado (requiere superar obstáculos)
3. **Tiempo disponible diariamente**
- encabezado: "Tiempo"
- Opciones: Menos de 30 minutos / 1-2 horas / 2-4 horas / Más de 4 horas
### Segunda ronda (Información complementaria)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Dirección de aprendizaje específica** (permite a los usuarios introducir información libremente)
- Guíe a los usuarios para que ingresen áreas de interés específicas en la pregunta, tales como: programación en Python, IELTS 7, examen CPA, diseño de interfaz de usuario, etc.
- encabezado: "Dirección"
- Opciones: Ofrece varios ejemplos populares para elegir, a la vez que permite a los usuarios introducir contenido personalizado.
2. **Plazo de finalización previsto**
- encabezado: "Periodo"
- Opciones: Sprint de 1 mes / Progreso constante de 3 meses / Desarrollo en profundidad de 6 meses / Proyecto a largo plazo de 1 año o más
3. **Preferencias de aprendizaje** (Se pueden seleccionar varias opciones)
- encabezado: "Preferencias"
- multiSelect: verdadero
- Opciones: Cursos en vídeo / Lectura de libros / Proyectos prácticos / Interacción con la comunidad
Una vez completada la recopilación de datos, toda la información se organizará en un "perfil del alumno" estructurado para su uso en los pasos posteriores.
## Paso 2: Búsqueda exhaustiva de recursos y planificación de rutas
### 2.1 Búsqueda de recursos
En función de la dirección de aprendizaje y las preferencias del usuario, realice 2 o 3 búsquedas utilizando la Búsqueda de Google:
1. **Busca la mejor hoja de ruta de aprendizaje en este campo**
- Consulta: "[Orientación de aprendizaje] Hoja de ruta de aprendizaje 2024 2025" o "[Orientación de aprendizaje] Hoja de ruta de aprendizaje recomendada"
- Extracción: División por etapas, puntos clave de conocimiento, orden de aprendizaje
2. **Buscar recursos de aprendizaje específicos**
- Buscar recursos relevantes en función de las preferencias del usuario:
- Cursos en vídeo: Busca cursos populares en Coursera/Udemy/Bilibili.
- Libros: Busca libros con altas calificaciones en las listas de lectura recomendadas de Douban/Amazon.
- Proyectos prácticos: Buscar en GitHub/tutoriales prácticos
- consulta: "[Dirección de aprendizaje] mejor [Tipo de recurso] principiante/intermedio/avanzado"
3. **Buscar estándares de hitos**
- consulta: "[Área de aprendizaje] Lista de verificación de evaluación de habilidades" o "[Área de aprendizaje] Estándares de evaluación de competencias"
- Extracción: ¿Qué nivel se debe alcanzar en cada etapa?
### 2.2 Planificación de rutas
En función de los resultados de la búsqueda y los perfiles de usuario, planifique la ruta de aprendizaje:
**Principio basado en fases:**
- En función del cronograma de aprendizaje previsto por el usuario, divida el proceso de aprendizaje en 3 a 5 etapas.
- Cada fase incluye: nombre de la fase, duración estimada, objetivos principales, recursos específicos (3-5) y puntos de control clave.
- Los recursos deben ser auténticos y haberse encontrado mediante la búsqueda (con nombre, plataforma y enlace).
- Los hitos deben ser descripciones verificables de capacidades específicas.
**Principios de asignación de tiempo:**
- Calcula el total de horas de estudio para cada etapa en función del tiempo diario disponible.
- Proporcione sugerencias de horarios semanales (días laborables vs. fines de semana).
- Reservar un 10% de tiempo de margen
**Formato de salida (estructura de datos interna, pasada al paso 3):**
```
Perfil del alumno: {objetivos, dirección, nivel, tiempo, frecuencia, preferencias}
Planificación de rutas: [
{
Nombre de la fase
Número de fase,
Duración estimada (semanas)
Descripción del objetivo principal,
Lista de recursos: [{Nombre, Tipo (Vídeo/Libro/Proyecto), Plataforma, Enlace, Horas de estudio estimadas}],
Hito: {Descripción, Método de verificación}
}
]
Sugerencias semanales: {Horario entre semana, Horario de fin de semana, Total de horas de estudio semanales}
```
## Paso 3: Generar un sitio web de aprendizaje interactivo al estilo Kami
Utilice la herramienta generateWebpage para generar un sitio web interactivo con una ruta de aprendizaje.
El parámetro de instrucción contiene la siguiente especificación completa más los datos específicos de la ruta de aprendizaje generados en el Paso 2:
### Especificaciones del sistema de diseño (Sistema de diseño Kami adaptado para escenarios de aprendizaje):
**Combinación de colores:**
- Fondo de página: #f5f4ed (pergamino beige cálido)
- Fondo de la tarjeta: #FAF9F5 (Marfil)
- Color de acento/color de la marca: #1B365D (Azul tinta)
- Color del texto: #141413 (Casi negro)
- Color del subtexto: #4D4C48 (Carbón)
- Color de la nota: #87867F (Piedra)
- Color del borde: #D6D5CE (borde gris cálido)
- Barra de progreso completada: #1B365D (color de la marca)
- Barra de progreso no completada: #E8E7E2
- Estado de éxito/finalización: #2D5016 (Verde oliva oscuro)
- En progreso: #1B365D (color de la marca)
- No iniciado: #87867F (Piedra)
- Fondo de la etiqueta: #E4ECF5
- Todos los grises deben ser de tonos cálidos (R≈G>B); los grises azulados fríos están prohibidos.
**Sistema de fuentes:**
- Cargar Noto Serif SC y Noto Sans SC a través de Google Fonts
- Título: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Texto: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Datos/Énfasis en los números: font-family: Charter, Georgia, serif
- Deshabilitar el grosor de la fuente: 700/negrita
**tipografía:**
- Interlineado: Encabezado 1,2 / Texto del cuerpo 1,5
- Espaciado entre letras chinas: 0,3 pt
- Ancho máximo de la página: 800px, centrado
- Adaptable y compatible con dispositivos móviles
**Reglas visuales:**
- Sombra: sombra de anillo (0 0 0 1px rgba(0,0,0,0.05)) o sombra susurrante (0 1px 3px rgba(0,0,0,0.04))
- Esquinas redondeadas: 8px (predeterminado) / 12px (tarjeta grande)
- Separador: 0,5 px sólido #D6D5CE o 2,5 px sólido #1B365D (línea vertical de marca)
- Método de énfasis: Texto en tinta azul o línea de marca vertical a la izquierda
### Requisitos de estructura de página:
**1. Área principal del héroe:**
- Encabezado de objetivos de aprendizaje (Serif 28px)
- Etiquetas de información clave en una línea: Tipo de objetivo | Duración estimada | Hora diaria
- Barra de progreso general (con porcentajes)
- Fila de tarjetas de estadísticas: Recursos totales / Completado / Etapa actual
**2. Área de la tarjeta de escenario (núcleo):**
- Una tarjeta grande para cada etapa
- Encabezado de la tarjeta: Número de etapa + Nombre + Etiqueta de estado (✅ Completado / 🔄 En progreso / ⬜ No iniciado) + Duración estimada
- Contenido de la tarjeta:
- Descripción del objetivo principal (1-2 frases)
- Lista de recursos: Cada recurso aparece en una línea separada, incluyendo un icono (📚Libro/🎬Vídeo/💻Proyecto/👥Comunidad) + Nombre (enlace clicable) + Etiqueta de plataforma + Casilla de verificación
- Área de hitos: Resaltada con líneas verticales de la marca y un estilo especial para describir el logro de los estándares.
- Las tarjetas se pueden doblar/desdoblar (por defecto, se desdoblan para la etapa actual y se doblan para la etapa que ya se ha completado).
**3. Área de sugerencias de aprendizaje semanales:**
- Sugerencias concisas para la asignación de tiempo
- Horario entre semana vs. horario de fin de semana
**4. Parte inferior:**
- Una breve línea de texto: Desarrollado por Learning Path Planning Master · Diseñado con Kami Design System
### Requisitos de funcionalidad interactiva (JavaScript puro para el front-end + almacenamiento local):
1. **Alternancia del estado de la casilla de verificación**:
- Haga clic en la casilla de verificación que aparece junto al recurso para alternar su estado de finalización.
- Guarda el estado en el almacenamiento local (la clave utiliza la dirección de aprendizaje + el hash del nombre del recurso).
- Los recursos completados se mostrarán tachados y con transparencia reducida.
2. **Cálculo automático del progreso:**
- Progreso general = (Número de recursos seleccionados / Número total de recursos) × 100%
- Progreso de la etapa = Número de etapas seleccionadas / Número total de etapas
- Transición de animación de la barra de progreso (transición: ancho 0,3 s, facilidad)
3. **Actualización automática del estado de la etapa**:
- Seleccione todos los recursos dentro de la fase → El estado cambia a ✅ Completado, se contrae automáticamente.
- Si se marca algún elemento durante la fase → el estado cambia a 🔄En progreso.
- Sin marca de verificación → ⬜ No iniciado
4. **Doblar/Desdoblar**:
- Al hacer clic en el encabezado de la tarjeta, esta se contraerá o expandirá.
- Con animación fluida
5. **Ventana emergente de verificación de hitos**:
- Aparecerá un aviso de verificación de hito cuando se hayan completado todos los recursos de una fase.
- Mostrar los estándares de hitos para esta etapa
Los usuarios pueden hacer clic en "Completado" para confirmar o marcar "Necesita mayor consolidación" para indicar que se ha completado.
6. **Persistencia de datos**:
- Todos los estados se almacenan en el almacenamiento local.
- Restaurar el estado después de actualizar la página
- Proporciona un botón de "Restablecer progreso" (requiere confirmación secundaria).
### Relleno de contenido:
Complete la estructura anterior con todos los datos de la ruta de aprendizaje planificada en el Paso 2. Asegúrese de lo siguiente:
- El enlace de cada recurso es una URL real y accesible.
- Los iconos de tipo de recurso coinciden correctamente.
- La duración de cada fase es coherente con la lógica del ciclo total.
- Las descripciones de los hitos son específicas y verificables.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, archivo único
- Sin dependencias externas (excepto Google Fonts)
- Adaptable a dispositivos móviles
- Se puede imprimir
- Código limpio con comentarios
Descripción
Por qué recomendamos esta habilidad
Esta habilidad captura con precisión las necesidades de aprendizaje del usuario mediante un cuestionario, y puede generar un sitio web de aprendizaje interactivo altamente personalizado, destacando especialmente su estilo de diseño Kami y su función de seguimiento de progreso.
Según tus objetivos de aprendizaje, nivel actual, tiempo disponible y preferencias, realiza búsquedas profundas de recursos de aprendizaje reales para crear una ruta personalizada por etapas y presentarla como un sitio web interactivo de aprendizaje al estilo de Kami, con seguimiento del progreso, revisiones de hitos y enlaces directos a los recursos.
Habilidades relacionadas
Ver todo
InvestigaciónChispa | Analizador de hooks
Cuando nos preparamos para hacer un video, a menudo nos pasa algo: puedes notar claramente que un video de referencia «sabe contar una historia», pero cuando te toca hacerlo a ti, solo puedes imitarlo por intuición. «Chispa | Analizador de hooks» está diseñado para ese paso. Dale un video específico de YouTube y primero confirmará cuál es el video y leerá los subtítulos verificables. Después separará tres elementos que suelen confundirse: Literal 30s: qué ocurre realmente entre 0:00 y 0:30 del video. Intro: toda la apertura antes de entrar en el contenido principal. Hook / Re-hook: uno o varios puntos estructurales que realmente se encargan de retener a la audiencia. Por eso, no interpretará a la fuerza los primeros 30 segundos de todos los videos como Hook solo porque «todo el mundo dice que los primeros 30 segundos son lo más importante». Si el verdadero Hook aparece después del primer minuto, te lo dirá tal cual; si faltan subtítulos o marcas de tiempo, señalará claramente la falta de evidencia en lugar de inventar una respuesta que parezca profesional. Después de desglosar la apertura, continuará reconstruyendo la estructura de todo el video mediante un esquema: ¿avanza a través de una línea de tiempo, un experimento, pasos, comparaciones, una historia, una cadena de preguntas u otro recurso de organización? Por último, abstraerá esas estructuras en plantillas de [espacios]. La plantilla conserva el orden y la función de la estructura, no las experiencias, palabras, marcas, cifras, opiniones ni la autoridad del autor original. Al final, no obtienes un resumen del video, sino un Hook Outline + una plantilla de estructura completa que puedes entregar al siguiente paso del proceso creativo. Lo que no hace No hace lo siguiente: Escribir directamente el Hook nuevo final por ti; Calificar o reescribir tu apertura con BRENS; Buscar a gran escala en todo un nicho o canal; Generar un guion completo; Generar diagramas, recursos, animaciones ni miniaturas. La búsqueda masiva de muestras de referencia corresponde a la Skill anterior «Chispa | Investigador de contenido de YouTube»; perfeccionar tu propio Hook corresponde a la Skill posterior indicada.
InvestigaciónChispa｜Analista YouTube
¿Quieres hacer un video, pero no sabes cómo han tratado ya ese tema? 「Chispa｜Analista YouTube」entra realmente en YouTube para investigar: encuentra videos relacionados, lee sus subtítulos, desglosa los títulos y los primeros 30 segundos, reconstruye la estructura del contenido y detecta, a partir de varias muestras, los recursos que se repiten, las diferencias evidentes y los vacíos que todavía nadie ha cubierto bien. Puedes usarlo para: Investigar qué contenidos sobre un tema se están usando una y otra vez Analizar a fondo cómo está contado un video Escanear los temas, títulos y hábitos de contenido de un canal Desglosar el Hook de los primeros 30 segundos y la estructura del video completo Encontrar nuevos ángulos creativos en videos existentes Investigar cómo volver a empaquetar tu propio video terminado No te dirá categóricamente que «este título funciona» solo porque un video tenga muchas reproducciones. Si no puede obtener subtítulos, marcas de tiempo o datos de rendimiento, también te indicará con claridad qué evidencia falta. Al final, no recibirás una pila de resúmenes de videos, sino un informe de investigación de YouTube que puedes entregar directamente al siguiente paso de ideación, desarrollo del Hook o escritura del guion. Ideal para: creadores de YouTube, planificadores de videos, responsables de contenido en redes y cualquier persona que, antes de grabar, quiera saber hasta dónde han llevado otros ese tema.
Palabras locas en inglés
Ingresa una palabra en inglés y obtén una tarjeta de memoria estilo cómic: la pronunciación aproximada, el significado y el ejemplo aparecen dibujados dentro de la misma escena breve y continua (en globos de diálogo, letreros y onomatopeyas). Fuera de la ilustración solo quedan una línea de información principal y otra de recordatorio para recuperar la palabra. Se prioriza el impacto sobre el acabado refinado, con contenido seguro para niños.
Planificador de rutas de aprendizaje
Instrucciones
## Paso 1: Recopilación de necesidades (basado en un cuestionario, no requiere escribir)
Los perfiles de aprendizaje de los usuarios se recopilan a través de dos rondas de preguntas al usuario.
### Ronda 1 (Información básica)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Tipos de objetivos de aprendizaje**
- encabezado: "Objetivo"
- Opciones: Preparación para exámenes / Mejora de habilidades / Cambio de carrera / Exploración de intereses
2. **Nivel actual**
- encabezado: "Horizontal"
- Opciones: Sin experiencia / Principiante (comprende los conceptos) / Algo de experiencia (puede completar tareas sencillas) / Avanzado (requiere superar obstáculos)
3. **Tiempo disponible diariamente**
- encabezado: "Tiempo"
- Opciones: Menos de 30 minutos / 1-2 horas / 2-4 horas / Más de 4 horas
### Segunda ronda (Información complementaria)
Utilice askUserQuestion para formular preguntas en las siguientes tres dimensiones simultáneamente:
1. **Dirección de aprendizaje específica** (permite a los usuarios introducir información libremente)
- Guíe a los usuarios para que ingresen áreas de interés específicas en la pregunta, tales como: programación en Python, IELTS 7, examen CPA, diseño de interfaz de usuario, etc.
- encabezado: "Dirección"
- Opciones: Ofrece varios ejemplos populares para elegir, a la vez que permite a los usuarios introducir contenido personalizado.
2. **Plazo de finalización previsto**
- encabezado: "Periodo"
- Opciones: Sprint de 1 mes / Progreso constante de 3 meses / Desarrollo en profundidad de 6 meses / Proyecto a largo plazo de 1 año o más
3. **Preferencias de aprendizaje** (Se pueden seleccionar varias opciones)
- encabezado: "Preferencias"
- multiSelect: verdadero
- Opciones: Cursos en vídeo / Lectura de libros / Proyectos prácticos / Interacción con la comunidad
Una vez completada la recopilación de datos, toda la información se organizará en un "perfil del alumno" estructurado para su uso en los pasos posteriores.
## Paso 2: Búsqueda exhaustiva de recursos y planificación de rutas
### 2.1 Búsqueda de recursos
En función de la dirección de aprendizaje y las preferencias del usuario, realice 2 o 3 búsquedas utilizando la Búsqueda de Google:
1. **Busca la mejor hoja de ruta de aprendizaje en este campo**
- Consulta: "[Orientación de aprendizaje] Hoja de ruta de aprendizaje 2024 2025" o "[Orientación de aprendizaje] Hoja de ruta de aprendizaje recomendada"
- Extracción: División por etapas, puntos clave de conocimiento, orden de aprendizaje
2. **Buscar recursos de aprendizaje específicos**
- Buscar recursos relevantes en función de las preferencias del usuario:
- Cursos en vídeo: Busca cursos populares en Coursera/Udemy/Bilibili.
- Libros: Busca libros con altas calificaciones en las listas de lectura recomendadas de Douban/Amazon.
- Proyectos prácticos: Buscar en GitHub/tutoriales prácticos
- consulta: "[Dirección de aprendizaje] mejor [Tipo de recurso] principiante/intermedio/avanzado"
3. **Buscar estándares de hitos**
- consulta: "[Área de aprendizaje] Lista de verificación de evaluación de habilidades" o "[Área de aprendizaje] Estándares de evaluación de competencias"
- Extracción: ¿Qué nivel se debe alcanzar en cada etapa?
### 2.2 Planificación de rutas
En función de los resultados de la búsqueda y los perfiles de usuario, planifique la ruta de aprendizaje:
**Principio basado en fases:**
- En función del cronograma de aprendizaje previsto por el usuario, divida el proceso de aprendizaje en 3 a 5 etapas.
- Cada fase incluye: nombre de la fase, duración estimada, objetivos principales, recursos específicos (3-5) y puntos de control clave.
- Los recursos deben ser auténticos y haberse encontrado mediante la búsqueda (con nombre, plataforma y enlace).
- Los hitos deben ser descripciones verificables de capacidades específicas.
**Principios de asignación de tiempo:**
- Calcula el total de horas de estudio para cada etapa en función del tiempo diario disponible.
- Proporcione sugerencias de horarios semanales (días laborables vs. fines de semana).
- Reservar un 10% de tiempo de margen
**Formato de salida (estructura de datos interna, pasada al paso 3):**
```
Perfil del alumno: {objetivos, dirección, nivel, tiempo, frecuencia, preferencias}
Planificación de rutas: [
{
Nombre de la fase
Número de fase,
Duración estimada (semanas)
Descripción del objetivo principal,
Lista de recursos: [{Nombre, Tipo (Vídeo/Libro/Proyecto), Plataforma, Enlace, Horas de estudio estimadas}],
Hito: {Descripción, Método de verificación}
}
]
Sugerencias semanales: {Horario entre semana, Horario de fin de semana, Total de horas de estudio semanales}
```
## Paso 3: Generar un sitio web de aprendizaje interactivo al estilo Kami
Utilice la herramienta generateWebpage para generar un sitio web interactivo con una ruta de aprendizaje.
El parámetro de instrucción contiene la siguiente especificación completa más los datos específicos de la ruta de aprendizaje generados en el Paso 2:
### Especificaciones del sistema de diseño (Sistema de diseño Kami adaptado para escenarios de aprendizaje):
**Combinación de colores:**
- Fondo de página: #f5f4ed (pergamino beige cálido)
- Fondo de la tarjeta: #FAF9F5 (Marfil)
- Color de acento/color de la marca: #1B365D (Azul tinta)
- Color del texto: #141413 (Casi negro)
- Color del subtexto: #4D4C48 (Carbón)
- Color de la nota: #87867F (Piedra)
- Color del borde: #D6D5CE (borde gris cálido)
- Barra de progreso completada: #1B365D (color de la marca)
- Barra de progreso no completada: #E8E7E2
- Estado de éxito/finalización: #2D5016 (Verde oliva oscuro)
- En progreso: #1B365D (color de la marca)
- No iniciado: #87867F (Piedra)
- Fondo de la etiqueta: #E4ECF5
- Todos los grises deben ser de tonos cálidos (R≈G>B); los grises azulados fríos están prohibidos.
**Sistema de fuentes:**
- Cargar Noto Serif SC y Noto Sans SC a través de Google Fonts
- Título: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500
- Texto: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400
- Datos/Énfasis en los números: font-family: Charter, Georgia, serif
- Deshabilitar el grosor de la fuente: 700/negrita
**tipografía:**
- Interlineado: Encabezado 1,2 / Texto del cuerpo 1,5
- Espaciado entre letras chinas: 0,3 pt
- Ancho máximo de la página: 800px, centrado
- Adaptable y compatible con dispositivos móviles
**Reglas visuales:**
- Sombra: sombra de anillo (0 0 0 1px rgba(0,0,0,0.05)) o sombra susurrante (0 1px 3px rgba(0,0,0,0.04))
- Esquinas redondeadas: 8px (predeterminado) / 12px (tarjeta grande)
- Separador: 0,5 px sólido #D6D5CE o 2,5 px sólido #1B365D (línea vertical de marca)
- Método de énfasis: Texto en tinta azul o línea de marca vertical a la izquierda
### Requisitos de estructura de página:
**1. Área principal del héroe:**
- Encabezado de objetivos de aprendizaje (Serif 28px)
- Etiquetas de información clave en una línea: Tipo de objetivo | Duración estimada | Hora diaria
- Barra de progreso general (con porcentajes)
- Fila de tarjetas de estadísticas: Recursos totales / Completado / Etapa actual
**2. Área de la tarjeta de escenario (núcleo):**
- Una tarjeta grande para cada etapa
- Encabezado de la tarjeta: Número de etapa + Nombre + Etiqueta de estado (✅ Completado / 🔄 En progreso / ⬜ No iniciado) + Duración estimada
- Contenido de la tarjeta:
- Descripción del objetivo principal (1-2 frases)
- Lista de recursos: Cada recurso aparece en una línea separada, incluyendo un icono (📚Libro/🎬Vídeo/💻Proyecto/👥Comunidad) + Nombre (enlace clicable) + Etiqueta de plataforma + Casilla de verificación
- Área de hitos: Resaltada con líneas verticales de la marca y un estilo especial para describir el logro de los estándares.
- Las tarjetas se pueden doblar/desdoblar (por defecto, se desdoblan para la etapa actual y se doblan para la etapa que ya se ha completado).
**3. Área de sugerencias de aprendizaje semanales:**
- Sugerencias concisas para la asignación de tiempo
- Horario entre semana vs. horario de fin de semana
**4. Parte inferior:**
- Una breve línea de texto: Desarrollado por Learning Path Planning Master · Diseñado con Kami Design System
### Requisitos de funcionalidad interactiva (JavaScript puro para el front-end + almacenamiento local):
1. **Alternancia del estado de la casilla de verificación**:
- Haga clic en la casilla de verificación que aparece junto al recurso para alternar su estado de finalización.
- Guarda el estado en el almacenamiento local (la clave utiliza la dirección de aprendizaje + el hash del nombre del recurso).
- Los recursos completados se mostrarán tachados y con transparencia reducida.
2. **Cálculo automático del progreso:**
- Progreso general = (Número de recursos seleccionados / Número total de recursos) × 100%
- Progreso de la etapa = Número de etapas seleccionadas / Número total de etapas
- Transición de animación de la barra de progreso (transición: ancho 0,3 s, facilidad)
3. **Actualización automática del estado de la etapa**:
- Seleccione todos los recursos dentro de la fase → El estado cambia a ✅ Completado, se contrae automáticamente.
- Si se marca algún elemento durante la fase → el estado cambia a 🔄En progreso.
- Sin marca de verificación → ⬜ No iniciado
4. **Doblar/Desdoblar**:
- Al hacer clic en el encabezado de la tarjeta, esta se contraerá o expandirá.
- Con animación fluida
5. **Ventana emergente de verificación de hitos**:
- Aparecerá un aviso de verificación de hito cuando se hayan completado todos los recursos de una fase.
- Mostrar los estándares de hitos para esta etapa
Los usuarios pueden hacer clic en "Completado" para confirmar o marcar "Necesita mayor consolidación" para indicar que se ha completado.
6. **Persistencia de datos**:
- Todos los estados se almacenan en el almacenamiento local.
- Restaurar el estado después de actualizar la página
- Proporciona un botón de "Restablecer progreso" (requiere confirmación secundaria).
### Relleno de contenido:
Complete la estructura anterior con todos los datos de la ruta de aprendizaje planificada en el Paso 2. Asegúrese de lo siguiente:
- El enlace de cada recurso es una URL real y accesible.
- Los iconos de tipo de recurso coinciden correctamente.
- La duración de cada fase es coherente con la lógica del ciclo total.
- Las descripciones de los hitos son específicas y verificables.
### Requisitos técnicos:
- HTML puro + CSS + JavaScript, archivo único
- Sin dependencias externas (excepto Google Fonts)
- Adaptable a dispositivos móviles
- Se puede imprimir
- Código limpio con comentarios
Descripción
Por qué recomendamos esta habilidad
Esta habilidad captura con precisión las necesidades de aprendizaje del usuario mediante un cuestionario, y puede generar un sitio web de aprendizaje interactivo altamente personalizado, destacando especialmente su estilo de diseño Kami y su función de seguimiento de progreso.
Según tus objetivos de aprendizaje, nivel actual, tiempo disponible y preferencias, realiza búsquedas profundas de recursos de aprendizaje reales para crear una ruta personalizada por etapas y presentarla como un sitio web interactivo de aprendizaje al estilo de Kami, con seguimiento del progreso, revisiones de hitos y enlaces directos a los recursos.
Habilidades relacionadas
Ver todoInvestigaciónChispa | Analizador de hooks
Cuando nos preparamos para hacer un video, a menudo nos pasa algo: puedes notar claramente que un video de referencia «sabe contar una historia», pero cuando te toca hacerlo a ti, solo puedes imitarlo por intuición. «Chispa | Analizador de hooks» está diseñado para ese paso. Dale un video específico de YouTube y primero confirmará cuál es el video y leerá los subtítulos verificables. Después separará tres elementos que suelen confundirse: Literal 30s: qué ocurre realmente entre 0:00 y 0:30 del video. Intro: toda la apertura antes de entrar en el contenido principal. Hook / Re-hook: uno o varios puntos estructurales que realmente se encargan de retener a la audiencia. Por eso, no interpretará a la fuerza los primeros 30 segundos de todos los videos como Hook solo porque «todo el mundo dice que los primeros 30 segundos son lo más importante». Si el verdadero Hook aparece después del primer minuto, te lo dirá tal cual; si faltan subtítulos o marcas de tiempo, señalará claramente la falta de evidencia en lugar de inventar una respuesta que parezca profesional. Después de desglosar la apertura, continuará reconstruyendo la estructura de todo el video mediante un esquema: ¿avanza a través de una línea de tiempo, un experimento, pasos, comparaciones, una historia, una cadena de preguntas u otro recurso de organización? Por último, abstraerá esas estructuras en plantillas de [espacios]. La plantilla conserva el orden y la función de la estructura, no las experiencias, palabras, marcas, cifras, opiniones ni la autoridad del autor original. Al final, no obtienes un resumen del video, sino un Hook Outline + una plantilla de estructura completa que puedes entregar al siguiente paso del proceso creativo. Lo que no hace No hace lo siguiente: Escribir directamente el Hook nuevo final por ti; Calificar o reescribir tu apertura con BRENS; Buscar a gran escala en todo un nicho o canal; Generar un guion completo; Generar diagramas, recursos, animaciones ni miniaturas. La búsqueda masiva de muestras de referencia corresponde a la Skill anterior «Chispa | Investigador de contenido de YouTube»; perfeccionar tu propio Hook corresponde a la Skill posterior indicada.
InvestigaciónChispa｜Analista YouTube
¿Quieres hacer un video, pero no sabes cómo han tratado ya ese tema? 「Chispa｜Analista YouTube」entra realmente en YouTube para investigar: encuentra videos relacionados, lee sus subtítulos, desglosa los títulos y los primeros 30 segundos, reconstruye la estructura del contenido y detecta, a partir de varias muestras, los recursos que se repiten, las diferencias evidentes y los vacíos que todavía nadie ha cubierto bien. Puedes usarlo para: Investigar qué contenidos sobre un tema se están usando una y otra vez Analizar a fondo cómo está contado un video Escanear los temas, títulos y hábitos de contenido de un canal Desglosar el Hook de los primeros 30 segundos y la estructura del video completo Encontrar nuevos ángulos creativos en videos existentes Investigar cómo volver a empaquetar tu propio video terminado No te dirá categóricamente que «este título funciona» solo porque un video tenga muchas reproducciones. Si no puede obtener subtítulos, marcas de tiempo o datos de rendimiento, también te indicará con claridad qué evidencia falta. Al final, no recibirás una pila de resúmenes de videos, sino un informe de investigación de YouTube que puedes entregar directamente al siguiente paso de ideación, desarrollo del Hook o escritura del guion. Ideal para: creadores de YouTube, planificadores de videos, responsables de contenido en redes y cualquier persona que, antes de grabar, quiera saber hasta dónde han llevado otros ese tema.
Palabras locas en inglés
Ingresa una palabra en inglés y obtén una tarjeta de memoria estilo cómic: la pronunciación aproximada, el significado y el ejemplo aparecen dibujados dentro de la misma escena breve y continua (en globos de diálogo, letreros y onomatopeyas). Fuera de la ilustración solo quedan una línea de información principal y otra de recordatorio para recuperar la palabra. Se prioriza el impacto sobre el acabado refinado, con contenido seguro para niños.
Encuentra tu próxima habilidad favorita
Explora más habilidades de IA seleccionadas para investigación, creación y trabajo cotidiano.