ACTIVIDAD INTEGRADORA
CREA TU LIBRO DIGITAL INTERACTIVO
Desarrollo de Software y Frameworks
Tu imaginación propone la historia. Tus conocimientos de programación la convierten en una experiencia digital.
10 capítulos · 1 página principal · Infinitas posibilidades
01. Propósito del proyecto
Diseñar y desarrollar un libro digital de diez capítulos dentro de Blogger, aplicando HTML, CSS y Bootstrap para construir una experiencia de lectura atractiva, visual, interactiva y funcional.02. Elige una temática que te apasione
Selecciona una propuesta o crea una propia. Tu tema deberá permitir diez capítulos y diferentes recursos digitales.
El futuro ya comenzó
Inteligencia artificial, robots, ciudades inteligentes y profesiones del futuro.Reto: imágenes futuristas y comparaciones.
El código del misterio
Una historia de enigmas, pistas, sospechosos y secretos.Reto: acertijos y minijuegos.
Detrás de la pantalla
Videojuegos, personajes, reglas, niveles y herramientas de desarrollo.Reto: diseñar personajes y un juego sencillo.
Hackers, secretos y huellas digitales
Privacidad, contraseñas, estafas e identidad digital.Reto: casos y cuestionarios de ciberseguridad.
De una idea a un emprendimiento
Necesidades, productos, marcas, costos y prototipos.Reto: catálogo digital y tablas de costos.
Tu propia historia
Ciencia, deportes, música, aventuras, cultura o fantasía.Reto: inventar una propuesta original.
03. Crea la identidad de tu libro
Define un nombre atractivo, un eslogan original y una reseña breve que invite a leer.
EJEMPLO DE PORTADA
EL CÓDIGO DEL MISTERIO
Cada pista te acerca a la verdad.
Diez capítulos. Diez desafíos. Una historia por descubrir.La página principal debe incluir el título, el eslogan, una imagen de portada, la reseña y los diez botones del índice.
04. Organiza tus diez capítulos
Ejemplo para el libro El código del misterio. Adapta los títulos a la temática de tu equipo.
| Cap. | Título | Recurso |
|---|---|---|
| 1 | El mensaje oculto | Portada con IA |
| 2 | La primera pista | Tabla de evidencias |
| 3 | Código encriptado | Acertijo |
| 4 | El sospechoso | Tarjetas de personajes |
| 5 | Evidencias digitales | Tabla comparativa |
| 6 | El archivo perdido | Galería de imágenes |
| 7 | La clave secreta | Cuestionario |
| 8 | El desafío lógico | Juego de lógica |
| 9 | La última prueba | Reto interactivo |
| 10 | El misterio final | Resolución y reflexión |
05. ¿Qué debe contener cada capítulo?
1Título e introducción: presenta el tema.
2Contenido original: desarrolla la historia o investigación.
3Imagen principal: utiliza una ilustración pertinente, creada o generada con IA.
4Recurso visual: tabla, esquema, infografía o galería.
5Interactividad: botón, acertijo, cuestionario o minijuego.
6Conclusión: una idea importante para el lector.
7Navegación: botones para regresar al índice y avanzar entre capítulos.
06. Requisitos técnicos
HTML
Organiza títulos, párrafos, imágenes, tablas, listas y enlaces.CSS
Personaliza colores, fondos, tipografía, márgenes y tarjetas.Bootstrap
Integra botones, cuadrículas, tarjetas y otros componentes.Navegación
Conecta los diez botones con las entradas reales de Blogger.Inteligencia artificial
Genera imágenes con instrucciones propias y revisa los resultados.Interactividad
Incluye al menos dos recursos funcionales, como un cuestionario y un minijuego.07. Etapas de desarrollo
1Planeación: tema, título, eslogan y público lector.
2Diseño: portada, índice y estilo visual.
3Escritura: elaboración de los diez capítulos.
4Desarrollo: creación de entradas y componentes.
5Integración: conexión de los enlaces.
6Pruebas: revisión de imágenes, enlaces y visualización móvil.
7Presentación: demostración y explicación del proyecto.
08. Lista de entregables
□ Página principal con nombre, eslogan, portada y reseña.
□ Diez capítulos publicados como entradas independientes.
□ Imágenes originales o generadas con IA.
□ Botones de navegación funcionales.
□ Tablas, recursos visuales y dos elementos interactivos como mínimo.
□ Enlace al libro digital terminado.
□ Explicación breve del proceso de desarrollo.
09. Rúbrica de evaluación
| Criterio | Valor |
|---|---|
| Página principal, título, eslogan y reseña | 10% |
| Calidad y originalidad de los capítulos | 20% |
| Diseño visual e imágenes con IA | 15% |
| HTML, CSS y Bootstrap | 20% |
| Navegación funcional | 15% |
| Tablas y recursos interactivos | 10% |
| Pruebas y presentación | 10% |
| Total | 100% |
10. Reflexiona sobre tu aprendizaje
Responde al finalizar:
¿Cómo te ayudaron HTML, CSS y los frameworks a transformar una idea en un producto digital?
¿Cuál fue la dificultad técnica más importante y cómo la resolviste?
¿Qué mejorarías si tuvieras más tiempo?
Tu idea puede convertirse en un gran proyecto
Investiga, diseña, programa, prueba y mejora. Demuestra lo que eres capaz de crear.
Abrir BloggerActividad integradora · Desarrollo de Software y Frameworks · Libro digital interactivo