De la Idea al Link: Crea tu Landing Page Asistida por IA

1. Conceptos Fundamentales de una Landing Page

• Definición y propósito de una landing page: qué es y para qué se usa en proyectos digitales.
• Diferencia entre landing page y página web tradicional: enfoque en conversión y objetivos específicos.
• Principios básicos del diseño centrado en el usuario para landing pages.

2. Estructura Básica y Elementos Esenciales de una Landing Page

• Componentes clave: encabezado, propuesta de valor, llamada a la acción (CTA), imágenes y videos, testimonios, formularios, y pie de página.
• Jerarquía visual y flujo de atención: organización de elementos para maximizar la conversión.
• Ejemplos reales de landing pages con análisis detallado de sus elementos y estructura.

3. Importancia de una Landing Page Efectiva en Marketing Digital y Experiencia del Usuario

• Rol de la landing page en campañas de marketing digital: captación, conversión y seguimiento.
• Impacto en la experiencia del usuario (UX): usabilidad, tiempos de carga, y diseño responsivo.
• Indicadores clave de rendimiento (KPIs) para evaluar la efectividad de una landing page.

4. Herramientas Digitales para Diseño Asistido por IA: Canva y Gemini

• Introducción a Canva: características principales, plantillas, y funcionalidades para diseño gráfico y web.
• Introducción a Gemini: capacidades de IA para generación automática de contenidos visuales y estructurales.
• Comparación entre Canva y Gemini: ventajas, limitaciones y casos de uso específicos para landing pages.

5. Configuración y Uso Básico de Canva y Gemini para Creación de Landing Pages

• Proceso de registro, instalación (si aplica) y configuración inicial en ambas plataformas.
• Navegación por interfaces y herramientas básicas para comenzar el diseño de una landing page.
• Ejercicios guiados para crear un boceto inicial usando plantillas y funciones de IA.

Actividad 1: Análisis y Descripción de Landing Pages Reales

Objetivo: Desarrollar la habilidad de identificar y describir los conceptos fundamentales y elementos esenciales de una landing page.

Descripción:

• El docente selecciona 3 ejemplos reales de landing pages variadas.
• Los estudiantes, en grupos pequeños, analizan cada ejemplo identificando sus elementos clave.
• Cada grupo presenta un breve informe describiendo la estructura y propósito de las landing pages analizadas.

Organización: Grupos de 3-4 estudiantes

Producto esperado: Informe escrito y presentación oral breve.

Duración estimada: 90 minutos

Actividad 2: Debate sobre la Importancia de las Landing Pages en Marketing y UX

Objetivo: Analizar y argumentar la relevancia de una landing page efectiva en marketing digital y experiencia del usuario.

Descripción:

• El docente plantea preguntas orientadoras sobre la función de las landing pages en marketing y UX.
• Los estudiantes, en parejas, discuten y preparan argumentos para un debate.
• Se realiza un debate en clase donde se exponen y confrontan ideas, moderado por el docente.

Organización: Parejas y discusión plenaria

Producto esperado: Participación activa y argumentos escritos breves.

Duración estimada: 60 minutos

Actividad 3: Taller Práctico de Exploración de Canva y Gemini

Objetivo: Explorar, comparar y familiarizarse con las funcionalidades de Canva y Gemini para diseño asistido por IA.

Descripción:

• Los estudiantes crean cuentas en Canva y Gemini, siguiendo instrucciones guiadas.
• Realizan ejercicios prácticos propuestos para usar plantillas y funciones básicas de IA en ambas plataformas.
• Registran ventajas y limitaciones observadas en una tabla comparativa.

Organización: Individual

Producto esperado: Tabla comparativa y capturas de pantalla de los ejercicios realizados.

Duración estimada: 120 minutos

Actividad 4: Configuración y Primer Diseño de Landing Page

Objetivo: Seleccionar, configurar y usar Canva o Gemini para crear un boceto inicial de una landing page.

Descripción:

• Los estudiantes eligen una herramienta (Canva o Gemini) para configurar su espacio de trabajo.
• Siguen un tutorial para crear un diseño básico de landing page con los elementos esenciales.
• Presentan el boceto y explican su selección de elementos y estructura.

Organización: Individual o parejas

Producto esperado: Boceto digital de landing page y breve explicación escrita.

Duración estimada: 90 minutos

Evaluación Diagnóstica

Qué se evalúa: Conocimientos previos sobre landing pages, marketing digital básico, y familiaridad con herramientas digitales.

Cómo se evalúa: Cuestionario inicial con preguntas de opción múltiple y de respuesta corta.

Instrumento sugerido: Test digital o en papel con 10 preguntas breves.

Evaluación Formativa

Qué se evalúa: Progreso en análisis, argumentación, exploración de herramientas y aplicación práctica en diseño inicial.

• Revisión de informes y presentaciones de la Actividad 1.
• Observación y retroalimentación en el debate de la Actividad 2.
• Corrección y comentarios sobre la tabla comparativa y ejercicios en la Actividad 3.
• Validación del boceto y explicación en la Actividad 4.

Instrumento sugerido: Rúbricas específicas para cada actividad, listas de cotejo y feedback oral.

Evaluación Sumativa

Qué se evalúa: Comprensión integral y aplicación de los conceptos fundamentales, análisis crítico y manejo básico de herramientas digitales.

Cómo se evalúa: Proyecto final individual que consiste en la creación y presentación de una landing page básica usando Canva o Gemini, acompañada de un informe que describa la estructura, justifique la importancia del diseño y compare las herramientas usadas.

Instrumento sugerido: Rúbrica que evalúe contenido conceptual, calidad del diseño, uso de herramientas y argumentación escrita.

La unidad está diseñada para desarrollarse en 2 semanas con un total aproximado de 10 horas distribuidas de la siguiente manera: 3 horas para la introducción teórica y análisis de landing pages (Temas 1 y 2), 2 horas para el debate y contextualización en marketing y UX (Tema 3), 3 horas dedicadas a explorar y practicar con Canva y Gemini (Temas 4 y 5), y 2 horas para la realización y presentación del boceto inicial y actividades de evaluación formativa.

1. Introducción al Diseño Visual para Landing Pages

• Conceptos básicos de diseño gráfico: color, tipografía, espacio, y forma.
• Importancia de la coherencia estética y funcional en las interfaces digitales.
• Rol del diseño visual en la experiencia de usuario (UX).

2. Herramientas y Funcionalidades de Canva para Diseño Web

• Interfaz de Canva: menú, lienzo, y paneles de herramientas.
• Uso de plantillas prediseñadas para landing pages.
• Creación y gestión de diseños personalizados.
• Importación y edición de imágenes, iconos y otros recursos visuales.

3. Aplicación de Principios Básicos de Diseño Gráfico en Canva

• Selección y combinación de paletas de colores adecuadas.
• Elección tipográfica para legibilidad y estilo.
• Uso del espacio en blanco para equilibrar contenido y mejorar la lectura.
• Jerarquía visual para guiar la atención del usuario.
• Consistencia visual: alineación, repetición y proximidad de elementos.

4. Organización y Selección de Elementos Visuales para la Landing Page

• Tipos de elementos: imágenes, textos, botones, iconos, y videos.
• Colocación estratégica de elementos para mejorar la navegación.
• Diseño orientado a la experiencia de usuario: claridad y simplicidad.
• Incorporación de llamados a la acción (CTA) efectivos.

5. Técnicas de Maquetación en Canva para Diseño Responsivo

• Principios de diseño responsivo y adaptativo.
• Uso de cuadrículas y guías en Canva para alineación precisa.
• Distribución de contenidos en bloques funcionales.
• Optimización del diseño para diferentes dispositivos (móvil, tablet, desktop).

6. Evaluación y Ajuste del Diseño Visual en Canva

• Criterios de usabilidad aplicados al diseño visual.
• Evaluación de claridad y legibilidad del contenido.
• Revisión de la armonía estética general.
• Uso de feedback y pruebas de usuario para ajustes finales.
• Exportación y preparación del diseño para su implementación.

Actividad 1: Análisis y Rediseño de una Landing Page Existente

Objetivo: Aplicar principios básicos de diseño gráfico para crear una estructura visual atractiva en Canva.

Descripción:

• Seleccionar una landing page real y analizar su diseño visual.
• Identificar fortalezas y debilidades en color, tipografía, jerarquía y espacio.
• Rediseñar la landing page en Canva aplicando los principios aprendidos.

Organización: Individual

Producto esperado: Archivo de Canva con el rediseño visual de la landing page.

Duración estimada: 2 horas

Actividad 2: Creación de una Paleta de Colores y Selección Tipográfica para la Landing Page

Objetivo: Seleccionar y organizar elementos visuales en Canva para facilitar una experiencia de usuario intuitiva.

Descripción:

• Investigar y seleccionar una paleta de colores coherente con el objetivo de la landing page.
• Elegir tipografías que garanticen legibilidad y armonía visual.
• Crear una guía visual en Canva con las paletas y tipografías seleccionadas para su uso en la landing page.

Organización: Parejas

Producto esperado: Documento visual en Canva con paleta de colores y tipografías seleccionadas.

Duración estimada: 1.5 horas

Actividad 3: Maquetación de la Landing Page con Diseño Responsivo en Canva

Objetivo: Implementar técnicas de maquetación en Canva para construir la disposición de contenidos conforme a estándares responsivos.

Descripción:

• Diseñar la estructura visual de la landing page utilizando cuadrículas y guías en Canva.
• Organizar los bloques de contenido pensando en diferentes dispositivos (móvil, tablet, desktop).
• Incluir elementos interactivos visuales como botones y CTA.

Organización: Individual

Producto esperado: Landing page maquetada en Canva con diseño responsivo considerado.

Duración estimada: 3 horas

Actividad 4: Evaluación y Ajuste de la Landing Page Basado en Usabilidad

Objetivo: Evaluar y ajustar el diseño visual para optimizar claridad, legibilidad y atractivo visual.

Descripción:

• Realizar una revisión crítica del diseño en Canva basándose en criterios de usabilidad.
• Solicitar retroalimentación de compañeros o usuarios externos.
• Aplicar ajustes al diseño para mejorar la experiencia visual y funcional.

Organización: Grupos pequeños (3-4 estudiantes)

Producto esperado: Versión final ajustada de la landing page en Canva y reporte breve de modificaciones realizadas.

Duración estimada: 2 horas

Evaluación Diagnóstica

Qué se evalúa: Conocimientos previos sobre principios básicos de diseño gráfico y uso de Canva.

Cómo se evalúa: Cuestionario breve en línea con preguntas sobre conceptos de diseño y funcionalidad básica de Canva.

Instrumento sugerido: Formulario digital (Google Forms, Microsoft Forms) con preguntas de selección múltiple y respuesta corta.

Evaluación Formativa

Qué se evalúa: Progreso en la aplicación de principios de diseño, organización visual y uso de herramientas de Canva durante las actividades.

Cómo se evalúa: Revisión continua de los avances en los diseños entregados, retroalimentación en clase y foros de discusión.

Instrumento sugerido: Lista de cotejo para seguimiento de criterios de diseño, rúbrica para actividades prácticas y observación directa del docente.

Evaluación Sumativa

Qué se evalúa: Competencia para diseñar, maquetar, y ajustar una landing page completa en Canva, aplicando todos los principios y técnicas aprendidas.

Cómo se evalúa: Entrega final del proyecto de landing page con presentación oral o escrita que explique las decisiones de diseño y ajustes realizados.

Instrumento sugerido: Rúbrica de evaluación que incluya criterios de coherencia estética, funcionalidad, usabilidad, y calidad visual del diseño.

La unidad "Diseño Visual y Maquetación en Canva" se recomienda impartir en 2 semanas, con un total aproximado de 10 horas distribuidas de la siguiente manera:

• Semana 1: Introducción al diseño visual, exploración de Canva, y aplicación de principios básicos (4 horas, incluyendo actividades 1 y 2).
• Semana 2: Maquetación responsiva, evaluación y ajustes finales, y presentación de proyectos (6 horas, incluyendo actividades 3 y 4, y evaluación sumativa).

1. Introducción a Gemini para la conversión de diseños a HTML

• Descripción general de Gemini: características y beneficios en el diseño asistido por IA.
• Requisitos previos para la conversión: formatos de archivo, calidad del diseño en Canva.
• Interfaz y funcionalidades básicas de Gemini: recorrido guiado.

2. Proceso paso a paso para convertir diseños de Canva a código HTML con Gemini

• Exportación del diseño desde Canva: formatos compatibles y recomendaciones.
• Importación del diseño en Gemini: opciones y configuraciones iniciales.
• Uso de herramientas automáticas de Gemini para generación de código: parámetros ajustables.
• Revisión inicial del código generado: visualización y funcionalidades básicas.

3. Análisis y comprensión de la estructura del código HTML generado

• Elementos fundamentales del HTML en la landing page: etiquetas, estructura DOM.
• Relación entre componentes del diseño y su representación en código.
• Identificación de CSS y scripts generados: ubicación y función.
• Herramientas para visualizar y explorar el código (inspección de navegador, editores de código).

4. Ajustes y correcciones para optimizar la funcionalidad del sitio web

• Detección y solución de errores comunes en el código HTML generado.
• Adaptación del código para compatibilidad entre navegadores (cross-browser).
• Optimización de la carga y rendimiento del sitio web.
• Incorporación de mejoras manuales sin perder la coherencia con el diseño original.

5. Evaluación de la fidelidad entre diseño original y código HTML resultante

• Criterios para evaluar la coherencia visual y funcionalidad entre diseño y código.
• Herramientas y métodos para comparar diseño en Canva con la landing page generada.
• Propuestas de mejoras para mantener o aumentar la fidelidad.
• Documentación y comunicación de los ajustes realizados.

Actividad 1: Explorando Gemini para convertir tu diseño

Objetivo: Utilizar la herramienta Gemini para convertir un diseño realizado en Canva a código HTML funcional.

Descripción paso a paso:

• Seleccionar un diseño propio o de ejemplo creado en Canva.
• Exportar el diseño en el formato recomendado para Gemini.
• Importar el archivo en Gemini y seguir el proceso guiado para conversión.
• Guardar y visualizar el código HTML generado.

Organización: Individual

Producto esperado: Código HTML funcional generado a partir del diseño de Canva.

Duración estimada: 1.5 horas

Actividad 2: Análisis y mapeo de la estructura HTML generada

Objetivo: Analizar y comprender la estructura básica del código HTML generado por Gemini.

Descripción paso a paso:

• Abrir el código generado en un editor de código o navegador con herramientas de inspección.
• Identificar y anotar las etiquetas principales (div, header, footer, img, etc.).
• Relacionar cada sección del código con elementos visuales del diseño original.
• Presentar un esquema o mapa visual de la estructura HTML de la landing page.

Organización: Parejas

Producto esperado: Informe o presentación esquemática de la estructura HTML con su relación al diseño.

Duración estimada: 2 horas

Actividad 3: Corrección y optimización del código HTML

Objetivo: Realizar ajustes y correcciones en el código HTML para asegurar funcionalidad óptima y compatibilidad.

Descripción paso a paso:

• Validar el código HTML utilizando herramientas automáticas (ej. W3C validator).
• Identificar errores y problemas de visualización en diferentes navegadores.
• Aplicar correcciones en el código, como ajustes en etiquetas, rutas, estilos o scripts.
• Probar la landing page corregida en al menos dos navegadores diferentes.

Organización: Individual

Producto esperado: Código HTML corregido y funcional con evidencia de pruebas en distintos navegadores.

Duración estimada: 2.5 horas

Actividad 4: Evaluación comparativa y propuesta de mejoras

Objetivo: Evaluar la fidelidad entre el diseño original y el código HTML resultante, proponiendo mejoras.

Descripción paso a paso:

• Comparar visualmente la landing page generada con el diseño original en Canva.
• Identificar discrepancias en diseño, funcionalidad o usabilidad.
• Redactar un informe que incluya observaciones, causas detectadas y propuestas de mejora.
• Presentar el informe al grupo para retroalimentación y discusión.

Organización: Grupos de 3-4 estudiantes

Producto esperado: Informe evaluativo con propuestas de mejora y presentación grupal.

Duración estimada: 2 horas

Evaluación diagnóstica

Qué se evalúa: Conocimientos previos sobre diseño web básico, HTML y uso de herramientas IA.

Cómo se evalúa: Cuestionario corto con preguntas de opción múltiple y preguntas abiertas sobre conceptos básicos y experiencia con Canva y Gemini.

Instrumento sugerido: Formulario digital o papel con 10 preguntas.

Evaluación formativa

Qué se evalúa: Progreso en la aplicación del proceso de conversión, comprensión de código y corrección de errores.

Cómo se evalúa: Revisión de actividades prácticas 1, 2 y 3 con retroalimentación detallada, seguimiento en foro o sesiones de tutoría para aclarar dudas.

Instrumento sugerido: Lista de cotejo para código funcional, calidad del análisis, corrección aplicada y participación en actividades.

Evaluación sumativa

Qué se evalúa: Competencia global para convertir diseños a código HTML usando Gemini, analizar y ajustar el código, y evaluar la fidelidad visual y funcional.

Cómo se evalúa: Entrega final integrada que incluya código corregido, informe de análisis estructural y evaluación comparativa con propuestas de mejora.

Instrumento sugerido: Rúbrica con criterios sobre funcionalidad técnica, comprensión del código, calidad de ajustes realizados y profundidad del análisis evaluativo.

La unidad "Conversión Asistida a Código HTML con Gemini" se recomienda impartirla en un total de 8 horas distribuidas en dos semanas, con la siguiente distribución:

• Semana 1: 4 horas dedicadas a la introducción, familiarización con Gemini y realización de la Actividad 1 y 2.
• Semana 2: 4 horas para la corrección del código (Actividad 3), evaluación comparativa y propuestas de mejora (Actividad 4), y cierre con retroalimentación y evaluación sumativa.

Esta distribución permite combinar actividades prácticas con espacios para reflexión y mejora continua, asegurando el logro de los objetivos de la unidad.

1. Introducción a GitHub y Repositorios

• Concepto de repositorio y su importancia para proyectos web: se explicará qué es un repositorio, tipos (público y privado) y su función en el control de versiones y almacenamiento.
• Creación de cuenta y configuración básica en GitHub: pasos para registrarse, configurar perfil y aspectos de seguridad iniciales (2FA, contraseñas).
• Buenas prácticas en la organización de archivos y seguridad: estructura de carpetas recomendada para sitios web, archivos esenciales (.gitignore, README), y manejo responsable de credenciales.

2. Creación y Configuración de un Repositorio para la Landing Page

• Cómo crear un nuevo repositorio desde la interfaz web de GitHub: selección de nombre, descripción, visibilidad y opciones avanzadas.
• Configuración inicial del repositorio: ramas principales, protección de ramas, y configuración de colaboradores si aplica.
• Clonar repositorio localmente y sincronización inicial con proyecto local.

3. Subida de Archivos al Repositorio

• Uso de la interfaz web para subir y gestionar archivos: carga individual y múltiples, creación y edición directa.
• Introducción a Git y comandos básicos para subir archivos: git init, add, commit, push, explicación paso a paso con ejemplos prácticos.
• Resolución de conflictos y buenas prácticas para mantener la integridad del contenido.

4. Configuración del Despliegue Automático con GitHub Pages

• Concepto de GitHub Pages y sus ventajas para proyectos estáticos.
• Configuración de GitHub Pages en el repositorio: selección de rama y carpeta raíz para publicar.
• Opciones avanzadas: dominios personalizados, HTTPS y ajustes de visibilidad.
• Despliegue automático ante nuevos commits: cómo funciona y flujo de trabajo recomendado.

5. Validación y Pruebas de la Landing Page Publicada

• Verificación de la URL pública y accesibilidad desde diferentes dispositivos y navegadores.
• Pruebas funcionales básicas: navegación, enlaces, carga de recursos, y visualización.
• Uso de herramientas para verificar rendimiento y accesibilidad (ej. Lighthouse, validadores HTML/CSS).
• Registro y solución de problemas comunes post publicación.

Actividad 1: Creación y Configuración del Repositorio en GitHub

Objetivo: Crear y configurar correctamente un repositorio en GitHub para alojar la landing page, siguiendo buenas prácticas.

Descripción:

• Crear una cuenta (si no se tiene) y acceder a GitHub.
• Crear un nuevo repositorio con nombre relacionado a su proyecto.
• Configurar la visibilidad pública o privada según indicaciones.
• Agregar un archivo README.md con una breve descripción del proyecto.
• Configurar la rama principal y revisar opciones de seguridad básicas.

Organización: Individual

Producto esperado: Repositorio creado y configurado, con README inicial.

Duración estimada: 1 hora

Actividad 2: Subida de Archivos Usando Git y la Interfaz Web

Objetivo: Subir correctamente los archivos de la landing page al repositorio, utilizando interfaz web y comandos Git.

Descripción:

• Clonar el repositorio en la computadora local.
• Agregar los archivos de la landing page al repositorio local.
• Realizar commit con mensaje claro y hacer push al repositorio remoto.
• Alternativamente, subir algunos archivos directamente desde la interfaz web de GitHub.
• Verificar que los archivos estén correctamente almacenados en GitHub.

Organización: Individual

Producto esperado: Archivos de la landing page correctamente subidos y visibles en GitHub.

Duración estimada: 1.5 horas

Actividad 3: Configuración y Publicación con GitHub Pages

Objetivo: Configurar el despliegue automático mediante GitHub Pages para publicar la landing page.

Descripción:

• Acceder a las configuraciones del repositorio en GitHub.
• Activar GitHub Pages seleccionando la rama y carpeta raíz.
• Obtener la URL pública generada por GitHub Pages.
• Verificar que la landing page se visualice correctamente desde la URL.

Organización: Individual

Producto esperado: URL pública funcional con la landing page desplegada.

Duración estimada: 1 hora

Actividad 4: Pruebas Funcionales y de Accesibilidad en la Landing Page Publicada

Objetivo: Validar la operatividad y accesibilidad de la landing page publicada mediante pruebas en diferentes dispositivos y navegadores.

Descripción:

• Acceder a la URL publicada desde al menos dos navegadores diferentes (ej. Chrome, Firefox).
• Probar la visualización y navegación en dispositivo móvil y escritorio.
• Ejecutar herramientas de evaluación como Lighthouse para validar rendimiento y accesibilidad.
• Documentar problemas encontrados y proponer soluciones.

Organización: Parejas o grupos pequeños

Producto esperado: Informe breve con resultados de las pruebas y recomendaciones.

Duración estimada: 2 horas

Evaluación Diagnóstica

Qué se evalúa: Conocimientos previos sobre GitHub, repositorios y publicación web.

Cómo se evalúa: Cuestionario corto con preguntas de opción múltiple y respuesta abierta.

Instrumento sugerido: Test en línea o formulario digital.

Evaluación Formativa

Qué se evalúa: Progreso en la creación del repositorio, subida de archivos, configuración de GitHub Pages y pruebas de accesibilidad.

Cómo se evalúa: Revisión continua de las actividades prácticas, retroalimentación individual y en grupo, y seguimiento de problemas reportados.

Instrumento sugerido: Lista de cotejo para cada actividad, observación directa y revisión en plataforma GitHub.

Evaluación Sumativa

Qué se evalúa: Competencia global para crear, subir, publicar y validar la landing page en GitHub.

Cómo se evalúa: Entrega final del repositorio con todos los archivos organizados, URL funcional de GitHub Pages, y reporte de pruebas realizadas.

Instrumento sugerido: Rúbrica que mida organización, integridad del contenido, configuración correcta de GitHub Pages y calidad del informe de pruebas.

La unidad se sugiere impartir en un total de 6.5 a 7 horas distribuidas en una o dos semanas. La distribución recomendada es: 1 hora para la introducción y creación del repositorio, 1.5 horas para la subida de archivos, 1 hora para la configuración de GitHub Pages, y 2 a 2.5 horas para las pruebas y validación de la landing page publicada, incluyendo actividades de retroalimentación y evaluación formativa.