Proyecto Integrador de Repaso

06.05.2026

Módulo 5: Proyecto Integrador - Guía de Taller

Módulo 5

Proyecto: Mi Tarjeta de Causa Social

Guía práctica paso a paso para construir tu primera aplicación web interactiva.

🥤

Antes de empezar: ¡Toma un poco de agua! Mantenerte hidratado te ayudará a que el código fluya mejor.

🛠️ Paso 1: El Taller Digital (VS Code)

Todo gran desarrollador necesita un espacio ordenado. Antes de escribir una sola línea de código, debemos preparar las carpetas y archivos donde vivirá nuestro proyecto.

¿Qué hay que hacer?

Crea una carpeta en tu computadora llamada proyecto_causa.
Abre Visual Studio Code y arrastra esa carpeta al editor.
Crea tres archivos nuevos haciendo clic en el icono de "Nuevo Archivo": index.html, style.css y script.js.

Ojo con el Entorno: En VS Code, si ves un círculo blanco en la pestaña superior junto al nombre del archivo, significa que el archivo tiene cambios sin guardar. ¡Presiona Ctrl + S!

Resultado esperado: Deberías ver en el panel izquierdo de VS Code tu carpeta con los tres archivos creados y listos para trabajar.

🦴 Paso 2: El Esqueleto (Estructura HTML)

El HTML es la base de todo. Aquí definimos qué elementos tendrá nuestra página: títulos, botones y textos, pero todavía sin colores ni funciones.

¿Qué hay que hacer?

Abre el archivo index.html.
Escribe el signo ! y presiona la tecla Tab para generar la estructura básica.
Dentro de la etiqueta <body>, escribe el siguiente código:

<!-- Conectamos el diseño y la lógica -->
<link rel="stylesheet" href="style.css">

<article class="tarjeta">
    <h1>Reforestación Urbana</h1>
    <p>Ayúdanos a plantar árboles hoy.</p>
    <button id="btnApoyar">¡Plantar Árbol!</button>
    <p>Total plantados: <span id="contador">0</span></p>
</article>

<!-- Conectamos nuestro cerebro: JavaScript -->
<script src="script.js"></script>
            

Resultado esperado: Si abres el archivo en tu navegador, verás un título, un botón y un texto simple. Se verá muy básico porque aún no tiene estilo.

🎨 Paso 3: El Diseño (Estilos CSS)

Es hora de darle "personalidad" a la tarjeta. Usaremos CSS para centrar la tarjeta, darle colores verdes relacionados con la reforestación y hacer que el botón destaque.

¿Qué hay que hacer?

Abre el archivo style.css.
Copia y pega las siguientes reglas para transformar la apariencia:

body {
    background-color: #e8f5e9;
    display: flex;
    justify-content: center;
    padding: 50px;
}

.tarjeta {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}

button {
    background-color: #2e7d32;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
            

Resultado esperado: Ahora la página debe verse profesional, con una tarjeta blanca centrada sobre un fondo verde suave.

🧠 Paso 4: El Cerebro (Lógica JavaScript)

¿Qué pasa cuando hacemos clic? Nada... todavía. Necesitamos JavaScript para "escuchar" el clic del botón y actualizar el contador de árboles plantados en la pantalla.

¿Qué hay que hacer?

Abre el archivo script.js.
Escribe el código para conectar el botón de HTML con la lógica de suma:

let totalArboles = 0;
const visualContador = document.getElementById("contador");
const miBoton = document.getElementById("btnApoyar");

// Programamos la acción al hacer clic
miBoton.addEventListener("click", () => {
    totalArboles++; // Sumamos 1
    visualContador.textContent = totalArboles; // Actualizamos el texto
});
            

Resultado esperado: ¡Felicidades! Al hacer clic en el botón verde, el número 0 debe cambiar y aumentar. Has creado una aplicación funcional.

📝 Paso 5: Examen de Consolidación

Es momento de poner a prueba lo aprendido. Responde las 10 preguntas para verificar tu dominio de la Trinidad Web.

Proyecto Integrador de Repaso

Datos del Alumno

🛠️ Paso 1: El Taller Digital (VS Code)

¿Qué hay que hacer?

🦴 Paso 2: El Esqueleto (Estructura HTML)

¿Qué hay que hacer?

🎨 Paso 3: El Diseño (Estilos CSS)

¿Qué hay que hacer?

🧠 Paso 4: El Cerebro (Lógica JavaScript)

¿Qué hay que hacer?

📝 Paso 5: Examen de Consolidación

Tu calificación:

Configuración avanzada