De una computadora vacía a tu primera página en el navegador

Instala Google Chrome

Si ya lo tienes, pasa al paso 2.

1. Abre cualquier navegador (Edge viene incluido en Windows) y ve a google.com/chrome.
2. Haz clic en Descargar Chrome.
3. Ejecuta el archivo descargado (ChromeSetup.exe) y sigue el asistente hasta el final.
4. Ábrelo y, en la barra de direcciones, escribe chrome://version y presiona Enter: si ves información de versión, quedó instalado.

Instala Visual Studio Code

1. Ve a code.visualstudio.com.
2. Haz clic en Download for Windows.
3. Ejecuta el instalador (VSCodeUserSetup-x64-*.exe).
4. Acepta el acuerdo de licencia. En la pantalla de "Tareas adicionales", marca la casilla "Add to PATH" — es importante para más adelante.
5. Termina la instalación y abre VS Code.

Instala la extensión Live Server

1. Dentro de VS Code, haz clic en el ícono de Extensiones en la barra lateral izquierda (parece cuatro cuadritos).
2. En el buscador escribe Live Server.
3. Elige la extensión de Ritwick Dey (la más instalada) y haz clic en Install.

Instala Git para Windows

1. Ve a git-scm.com/download/win (la descarga inicia sola).
2. Ejecuta el instalador y deja todas las opciones por defecto: haz clic en "Next" en cada pantalla hasta "Install".
3. Verifica: abre una terminal (busca "PowerShell" en el menú de inicio) y escribe:

Debe mostrar algo como git version 2.4x.x.

Configura tu identidad en Git

Cada vez que guardes un cambio ("commit"), Git anota quién lo hizo. Configúralo una sola vez, usando Apellido Paterno Apellido Materno Nombre(s) — el mismo orden que usa la institución en sus documentos — para que el facilitador identifique fácilmente de quién es cada commit:

Ejemplo real: git config --global user.name "Prado Díaz Bernardo".

Crea tu cuenta de GitHub

1. Ve a github.com y haz clic en Sign up.
2. Sigue el asistente (correo, contraseña, nombre de usuario). Cuando te pida el nombre de usuario, usa ApellidoPaternoApellidoMaternoNombre(s) — todo corrido, sin espacios ni símbolos (GitHub no permite guiones bajos en el nombre de usuario, así que ni siquiera los intentes). Ejemplo real: PradoDiazBernardo.
3. Confirma tu correo cuando te llegue el mensaje de verificación.

Instala Node.js (LTS)

No lo usarás en esta unidad, pero lo necesitarás para Workbox en la Unidad 2 — mejor instalarlo ya.

1. Ve a nodejs.org.
2. Descarga el botón que diga LTS (no "Current").
3. Ejecuta el instalador dejando todo por defecto.
4. Verifica en PowerShell:

Ambos deben responder con un número de versión.

Crea la carpeta del proyecto

1. En el Explorador de archivos de Windows, crea una carpeta en Documentos llamada mi-pwa-ventas.
2. Abre VS Code → menú File → Open Folder… → selecciona esa carpeta.
3. Dentro, crea una subcarpeta css (clic derecho en el panel de archivos → "New Folder").
4. Crea un archivo index.html en la raíz, y otro estilos.css dentro de css.

Escribe el HTML — cada etiqueta explicada

Copia esto en index.html. Los comentarios <!-- así --> no se ven en el navegador, son solo para ti.

<!-- Éste es tu primer archivo. Guárdalo y ábrelo con "Open with Live Server". -->
<!doctype html>
<!-- <html lang="es">: le dice al navegador (y a lectores de pantalla) que el idioma es español -->
<html lang="es">
<head>
  <!-- meta charset="utf-8": para que acentos y "ñ" se vean bien -->
  <meta charset="utf-8">
  <!-- meta viewport: hace que la página se vea bien en celulares, no solo en monitor -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- title: lo que aparece en la pestaña del navegador -->
  <title>Mi primera página - PWA de ventas</title>
  <!-- link a nuestra hoja de estilos, en la carpeta css/ -->
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <!-- header: encabezado de la página -->
  <header>
    <h1>Tienda Escolar</h1>
    <p>Mi primer paso hacia la PWA de ventas</p>
  </header>

  <!-- main: el contenido principal de la página -->
  <main>
    <p>Si ves esta página en tu navegador, tu entorno de desarrollo ya funciona.</p>
    <p>Próximo paso: revisa <code>css/estilos.css</code> para ver cómo se le dio color.</p>
  </main>

  <!-- footer: pie de página -->
  <footer>
    <p>Unidad 1 · Aplicaciones Web Progresivas</p>
  </footer>
</body>
</html>

Escribe el CSS — cada regla explicada

Copia esto en css/estilos.css:

/* Selector "*": aplica a TODOS los elementos. box-sizing:border-box hace que
   el padding y el borde se cuenten DENTRO del ancho, no se sumen aparte. */
* {
  box-sizing: border-box;
}

/* Selector de etiqueta "body": estilos del cuerpo de toda la página */
body {
  margin: 0;                                  /* quita el margen blanco por defecto del navegador */
  font-family: system-ui, sans-serif;         /* usa la tipografía del sistema operativo */
  background-color: #f1f5f4;                  /* color de fondo, un gris-verde muy claro */
  color: #142523;                             /* color del texto, casi negro con tono verdoso */
}

header {
  background-color: #0e6b5c;   /* verde-azulado, el color "de marca" de la tienda */
  color: white;                /* texto blanco para que contraste con el fondo oscuro */
  padding: 1.5rem;             /* espacio interno alrededor del texto */
  text-align: center;          /* centra el texto horizontalmente */
}

main {
  max-width: 640px;            /* no deja que el texto se estire demasiado en pantallas anchas */
  margin: 2rem auto;           /* 2rem arriba/abajo, "auto" centra horizontalmente */
  padding: 0 1rem;
}

footer {
  text-align: center;
  color: #3f5450;               /* gris suave, menos protagonismo que el texto principal */
  padding: 1rem;
  font-size: 0.85rem;
}

/* code: estilo para el texto dentro de <code>, como si fuera una etiqueta física */
code {
  background: #e8f0ed;
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

Este archivo (con los mismos comentarios) ya está listo en sitio/ejemplos/unidad1/ por si prefieres abrirlo directo en VS Code en vez de copiarlo a mano.

Ábrelo con Live Server

1. Guarda ambos archivos (Ctrl+S).
2. En el panel de archivos de VS Code, haz clic derecho sobre index.html.
3. Elige Open with Live Server.
4. Chrome debe abrirse solo en una dirección como http://127.0.0.1:5500 mostrando tu página con el encabezado verde.
5. Prueba: cambia el texto del <h1>, guarda, y observa cómo el navegador se actualiza solo, sin que tengas que recargar.
6. Con tu página abierta, presiona F12 para abrir DevTools y entra a la pestaña Application (si no la ves, búscala en el botón »). Revisa Manifest y Service workers: por ahora dicen que no hay nada. En la Unidad 2 ahí verás tu manifest.json y tu sw.js funcionando.

Primer commit local

En VS Code abre una terminal integrada: menú Terminal → New Terminal. Debe abrir ya dentro de la carpeta de tu proyecto. Escribe:

git init convierte la carpeta en un repositorio. git add . marca todos los archivos para guardarlos. git commit crea una "fotografía" permanente de ese estado, con un mensaje que explica qué cambió.

Crea el repositorio en GitHub y sube tu código

1. En github.com, haz clic en el + (arriba a la derecha) → New repository.
2. Nómbralo mi-pwa-ventas_ + tus iniciales (ej. mi-pwa-ventas_CBY; ver 04 · Convención de nombres). La carpeta de tu computadora puede seguir llamándose mi-pwa-ventas. Déjalo en Public. No marques "Add a README" (ya tienes archivos locales).
3. Haz clic en Create repository.
4. GitHub te mostrará unos comandos bajo "…or push an existing repository from the command line". Cópialos y pégalos en tu terminal de VS Code (ya traen tu usuario y el nombre de tu repositorio; abajo se ven con TU-USUARIO y TUS-INICIALES):

Recarga la página de tu repositorio en GitHub: deberías ver index.html y la carpeta css.

Objetivo de esta sección

Al cerrar la Unidad 1 entregas dos documentos en formato PDF como evidencia: uno teórico (una tabla comparativa con portada) y uno práctico (capturas de tu propio entorno ya funcionando, cubriendo todos los pasos de esta guía). Ambos se califican por su contenido, pero también por que sean verificablemente tuyos. Por eso, además de explicarte paso a paso cómo armarlos, esta sección te muestra exactamente qué datos deben quedar visibles en tus capturas para que nadie pueda entregar el trabajo de otra persona como propio.

Evidencia 1 — Tabla comparativa, paso a paso

1. Abre Word (o Google Docs) y trabaja normalmente; al terminar, guarda/exporta el archivo final en formato PDF (Word: Archivo → Guardar como → PDF · Google Docs: Archivo → Descargar → Documento PDF). No entregues .docx.
2. Página 1 — Portada: incluye el logo de la universidad, y tus datos generales: nombre completo (Apellido Paterno Apellido Materno Nombre), matrícula, grupo ING10-1, asignatura "Aplicaciones Web Progresivas", nombre del facilitador y fecha de entrega.
3. Página 2: repite el encabezado del documento — tu nombre completo, tu grupo ING10-1 y "Unidad 1 · Evidencia 1" — y a partir de ahí coloca la tabla comparativa.
4. Inserta una tabla de 5 columnas × 6 filas (1 fila de encabezado + 5 tipos de aplicación).
5. Columnas: Definición, Características, Ventajas, Desventajas, Herramientas típicas.
6. Filas: Aplicaciones web, Orientadas a servicios, Móviles nativas, Multiplataforma, PWA.
7. Redacta cada celda con tus propias palabras — la sección 05 · Ejemplo resuelto te muestra el nivel de detalle esperado, pero copiarla tal cual cuenta como plagio.
8. Al final, agrega un apartado de Fuentes consultadas con las URL verificables donde investigaste la teoría de cada tipo de aplicación — cada enlace debe abrir y llevar directo al contenido que citaste, no a la portada genérica de un sitio.
9. Guarda el archivo con el nombre exacto de la sección 04, en PDF.

Evidencia 2 — Reporte de entorno, paso a paso

Es un segundo documento en formato PDF (mismo procedimiento: Word/Google Docs y al final exportas como PDF) con una captura de pantalla de cada punto clave de esta guía — no te limites a las instalaciones, cubre todos los pasos que realizaste en las Partes A, B y C. Una captura por página o claramente separadas, cada una con un título corto arriba y una línea explicando qué muestra:

1. chrome://version en la barra de direcciones de Chrome (Parte A, paso 1).
2. code --version ejecutado en la Terminal integrada de VS Code (paso 2).
3. git --version en la misma terminal (paso 4).
4. git config --global --list en la misma terminal, mostrando tu user.name y tu user.email (paso 5).
5. node -v y npm -v en la misma terminal (paso 7).
6. Tu perfil de GitHub, ya con sesión iniciada — se debe ver tu usuario en la esquina superior derecha (paso 6).
7. El explorador de archivos de VS Code con tu carpeta del proyecto abierta, mostrando index.html y css/estilos.css ya escritos (Parte B, pasos 8-10).
8. Tu página abierta en el navegador con Live Server, mostrando que funciona (paso 11).
9. DevTools (F12) → pestaña Application abierta sobre tu página, mostrando Manifest y Service workers (paso 11).
10. La terminal integrada mostrando tu primer git commit local ya hecho (Parte C, paso 12).
11. Tu repositorio mi-pwa-ventas_TUS-INICIALES ya creado en GitHub, mostrando el commit que hiciste al subirlo (paso 13).

Antes de tomar cada captura, revisa la sección siguiente: son los 7 datos que deben quedar visibles para que la captura cuente como evidencia válida.

Cómo nombrar tus documentos y tu repositorio

Usa siempre el mismo formato que el plan oficial de la asignatura: ApellidoPaterno_ApellidoMaterno_Nombre.

• Evidencia 1: PRADO_DIAZ_BERNARDO_Evidencia1.pdf
• Evidencia 2: PRADO_DIAZ_BERNARDO_Evidencia2.pdf
• Usuario de GitHub (obligatorio): ApellidoPaternoApellidoMaternoNombre(s) — todo corrido, sin espacios ni símbolos (ni guiones, ni guiones bajos). Ejemplo real: PradoDiazBernardo.
• Repositorio en GitHub (obligatorio): mi-pwa-ventas_CBY (nombre del proyecto + guion bajo + tus iniciales; a diferencia del nombre de usuario, el nombre del repositorio sí acepta guiones bajos).
• Usuario de Windows (el que aparece en tus rutas C:\Users\...): el que ya tengas configurado — no hace falta cambiarlo, solo que sea el tuyo.

Ese mismo nombre debe repetirse igual en el encabezado del documento, en el nombre del archivo y en el nombre del repositorio: si no coinciden, al facilitador le cuesta más relacionar tu entrega con tu perfil.

Checklist de entrega

• Evidencia 1 y Evidencia 2 entregadas en PDF, no en .docx.
• Evidencia 1 con portada (logo de la universidad + tus datos generales) y apartado de fuentes consultadas verificables (sin Wikipedia).
• Evidencia 2 con una captura de cada punto de la guía, no solo de las instalaciones.
• Ventana completa en cada captura, sin recortes ajustados al texto.
• URL completa y legible en cada captura donde aplica (Chrome, GitHub, Live Server).
• Reloj y fecha del sistema visibles en cada captura.
• Tu propio usuario de Windows visible en las rutas de archivo (C:\Users\TU-USUARIO\...).
• Sesión iniciada con tu cuenta real de GitHub, usuario y avatar visibles.
• Repositorio con nombre único bajo tu cuenta: mi-pwa-ventas_ + tus iniciales (ej. mi-pwa-ventas_CBY).
• Hash de commit visible en la vista del repositorio.