1. Fundamentos del Desarrollo Web

• Concepto de desarrollo web: Definición y alcance del desarrollo de sitios y aplicaciones web.
• Protocolos básicos en la web: HTTP, HTTPS y su función en la comunicación cliente-servidor.
• Arquitectura cliente-servidor: Descripción de cómo interactúan el cliente (navegador) y el servidor.
• Lenguajes de programación y marcado: Introducción a HTML, CSS y JavaScript para frontend; introducción a lenguajes backend comunes (ejemplo: Node.js, PHP).

2. Estructura General de una Aplicación Web

• Componentes Frontend: Definición y función, ejemplos (interfaz gráfica, interacción, presentación).
• Componentes Backend: Servidor, base de datos, lógica de negocio.
• Comunicación entre frontend y backend: APIs, solicitudes HTTP, formatos de datos (JSON).
• Ejemplo práctico de estructura: Diagrama y explicación de una aplicación web sencilla.

3. Configuración del Entorno de Desarrollo Web

• Herramientas necesarias: Navegadores, editores de código, terminal o consola, servidores locales.
• Instalación y configuración de un editor de código: Visual Studio Code (VS Code) como ejemplo.
• Extensiones útiles para desarrollo web: Emmet, Live Server, Prettier.
• Configuración de un servidor local: Uso de Live Server o servidores simples para pruebas locales.

4. Organización y Preparación de Archivos Iniciales en un Proyecto Web

• Estructura básica de carpetas y archivos: index.html, carpeta css, carpeta js, carpeta assets (imágenes, fuentes).
• Buenas prácticas en organización: Nombres claros, consistencia y modularidad.
• Creación y edición de archivos iniciales: Creación de un archivo HTML básico con estructura mínima.
• Gestión de versiones básica: Introducción a Git para control de versiones (conceptos básicos, no instalación).

Actividad 1: Mapa conceptual de la estructura web

Objetivo: Describir la estructura general de una aplicación web identificando sus componentes frontend y backend.

Descripción:

• Individualmente, el estudiante crea un mapa conceptual que incluya los componentes frontend y backend de una aplicación web.
• Debe incluir ejemplos de tecnologías/lenguajes para cada componente.
• Se recomienda usar papel o herramientas digitales (como MindMeister o Miro).
• Al finalizar, se realiza una breve presentación oral de 3 minutos explicando su mapa.

Organización: Individual

Producto esperado: Mapa conceptual claro y presentación oral.

Duración estimada: 1 hora

Actividad 2: Instalación y configuración de Visual Studio Code

Objetivo: Configurar un entorno de desarrollo utilizando herramientas y editores adecuados para el desarrollo web, siguiendo instrucciones específicas.

Descripción:

• Seguir un tutorial guiado para descargar e instalar Visual Studio Code.
• Configurar extensiones recomendadas: Emmet, Live Server, Prettier.
• Configurar opciones básicas de VS Code (tema, tamaño de fuente).
• Realizar una prueba creando un archivo HTML simple y abrirlo con Live Server.

Organización: Individual o parejas (dependiendo de recursos disponibles)

Producto esperado: Entorno VS Code configurado y archivo HTML visible en navegador local.

Duración estimada: 1.5 horas

Actividad 3: Creación de la estructura inicial de un proyecto web

Objetivo: Organizar y preparar los archivos iniciales de un proyecto web, asegurando una estructura coherente para el desarrollo posterior.

Descripción:

• Crear la carpeta principal del proyecto.
• Crear subcarpetas: css, js, assets.
• Crear un archivo index.html con estructura básica (DOCTYPE, head, body).
• Crear un archivo style.css vacío dentro de la carpeta css y enlazarlo en index.html.
• Crear un archivo script.js vacío dentro de la carpeta js y enlazarlo en index.html.
• Agregar una imagen de prueba en assets y mostrarla en index.html.

Organización: Individual o parejas

Producto esperado: Proyecto web con estructura de carpetas y archivos iniciales correctamente organizados y funcionando.

Duración estimada: 2 horas

Actividad 4: Explicación práctica de protocolos y comunicación web

Objetivo: Explicar los fundamentos básicos del desarrollo web, incluyendo protocolos, lenguajes y arquitecturas, mediante ejemplos prácticos.

Descripción:

• En grupos pequeños, analizar una solicitud HTTP simple simulada (por ejemplo, petición GET a un servidor web) y discutir qué ocurre en cada paso.
• Crear un esquema o diagrama de la comunicación cliente-servidor.
• Presentar ejemplos de uso de HTML, CSS y JavaScript en el frontend y explicar brevemente el papel del backend en esa comunicación.
• Discutir los resultados con el docente y corregir conceptos erróneos.

Organización: Grupos de 3-4 estudiantes

Producto esperado: Diagrama de flujo y explicación verbal o escrita del proceso de comunicación web.

Duración estimada: 1.5 horas

Evaluación Diagnóstica

Qué se evalúa: Conocimientos previos sobre desarrollo web, conceptos de frontend y backend, familiaridad con herramientas básicas.

Cómo se evalúa: Cuestionario de opción múltiple y preguntas abiertas breves.

Instrumento sugerido: Cuestionario digital o papel con 10 preguntas, incluyendo definición de términos y ejemplos.

Evaluación Formativa

Qué se evalúa: Progreso en la configuración del entorno, comprensión de la estructura de proyectos, participación en actividades prácticas.

Cómo se evalúa: Observación directa, revisión de productos parciales (mapas conceptuales, estructuras de archivos, configuraciones realizadas).

Instrumento sugerido: Lista de cotejo para seguimiento de actividades, feedback personalizado durante las actividades.

Evaluación Sumativa

Qué se evalúa: Capacidad para describir la estructura web, configurar un entorno de desarrollo, explicar fundamentos y organizar archivos.

Cómo se evalúa: Proyecto integrador donde el estudiante presenta un pequeño sitio web con estructura organizada, configurado en VS Code, acompañado de un documento explicativo sobre la arquitectura y protocolos usados.

Instrumento sugerido: Rúbrica que evalúe claridad en la explicación, correcta estructura del proyecto, configuración adecuada del entorno y uso correcto de tecnologías básicas.

La unidad tiene una duración sugerida de 1 semana, con un total aproximado de 6 horas distribuidas de la siguiente manera:

• 2 horas para fundamentos teóricos y explicación inicial del desarrollo web y arquitectura.
• 1.5 horas para instalación y configuración del entorno de desarrollo (Visual Studio Code).
• 2 horas para actividades prácticas de organización de archivos y creación del proyecto inicial.
• 0.5 horas para evaluación diagnóstica y formativa continua, incluyendo retroalimentación.

1. Introducción a HTML

• Concepto y función de HTML: definición de HTML, su rol en la estructura de páginas web.
• Estructura básica de un documento HTML: etiquetas , , , .
• Etiquetas básicas y semánticas:

  -

  ,

  ,

  , ,

  ,
  ,
  1. , , ,
     ,
  2. Atributos comunes en HTML: id, class, src, href, alt, title.

  2. Introducción a CSS

  • Concepto y función de CSS: definición, cómo CSS complementa a HTML para diseño visual.
  • Formas de aplicar CSS: estilos inline, internos (en la etiqueta