AWP · Curso

Guía paso a paso · Unidad 1

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

Esta guía asume que no tienes nada instalado. Sigue los pasos en orden, sin saltarte ninguno: al final tendrás tu entorno de desarrollo completo, tu primera página web funcionando con recarga automática, y ese trabajo ya respaldado en tu propio repositorio de GitHub.

Objetivo: entorno de desarrollo + primer sitio publicado en GitHub

Herramientas que instalarás en esta unidad

Google Chrome

Navegador con las mejores herramientas de desarrollo (DevTools) para inspeccionar y depurar PWA.

Visual Studio Code

El editor donde escribirás todo el código del curso.

Extensión Live Server

Abre tus archivos HTML en el navegador y los recarga solo cuando guardas.

Git para Windows

Guarda el historial de cambios de tu proyecto.

Cuenta de GitHub

Donde vivirá tu repositorio — lo que pedirá la evidencia de la Unidad 2.

Node.js (LTS)

No lo usarás todavía, pero lo instalamos ya para no interrumpir la Unidad 2.

Parte A · Instalar el entorno

1

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.
2

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.
3

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.
4

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:
git --version

Debe mostrar algo como git version 2.4x.x.

5

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:

git config --global user.name "ApellidoPaterno ApellidoMaterno Nombre" git config --global user.email "tu-correo@ejemplo.com"

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

6

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).
  3. Confirma tu correo cuando te llegue el mensaje de verificación.
7

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:
node -v npm -v

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

Parte B · Tu primera página, explicada línea por línea

8

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.
9

Escribe el HTML — cada etiqueta explicada

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

📄 index.html 
<!-- É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>
10

Escribe el CSS — cada regla explicada

Copia esto en css/estilos.css:

📄 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.

11

Á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.

Parte C · Sube tu proyecto a GitHub

12

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 git add . git commit -m "Primer commit: estructura inicial del proyecto"

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ó.

13

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. 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 (cambia TU-USUARIO por tu usuario real):
git remote add origin https://github.com/TU-USUARIO/mi-pwa-ventas.git git branch -M main git push -u origin main

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

Evidencias de la Unidad 1

Evidencia 1 — Tabla comparativa

Un documento (Word, Google Docs o Markdown) con una tabla que compare: aplicaciones web, orientadas a servicios, móviles nativas, multiplataforma y PWA. Columnas sugeridas: definición, características, ventajas, desventajas, herramientas típicas.

Evidencia 2 — Reporte de entorno

Lista con capturas de pantalla mostrando: chrome://version, code --version (VS Code), git --version, node -v, tu perfil de GitHub y el repositorio ya creado con tu primer commit.

Cómo nombrar tus documentos de evidencia

Usa el mismo formato que el plan oficial de la asignatura: ApellidoPaterno_ApellidoMaterno_Nombre, por ejemplo PRADO_DIAZ_BERNARDO_Evidencia1.docx.

← Ver el resumen y la rúbrica de la Unidad 1 · Siguiente: Guía paso a paso de la Unidad 2 →