AWP · Curso

Reposición única · Unidad 2 (evaluada por avances)

Recuperación de la Unidad 2: tu PWA completa, en video

La Unidad 2 se evaluó por avances semanales. Para recuperarla no basta con entregar el repositorio: grabas un solo video donde construyes la práctica completa de la Guía U2 desde cero, leyendo la guía en voz alta mientras la haces, hasta dejar tu PWA de ventas publicada e instalada en tu celular.

1Video continuo
≈3 hDuración estimada
22 novLímite · 10:00 pm
Revisión: lunes 23 de noviembre (reposición única) Cámara + guía + código, siempre visibles Ver calendario final →

⚠️ Reglas obligatorias para evaluar el video

Si no cumples cualquiera de las reglas de esta página, el video no se acepta y tendrías que rehacerlo completo. Como es la reposición única, un video rechazado manda la unidad al examen extraordinario del lunes 7 de diciembre. Solo tiene derecho quien tiene la Unidad 2 en NA y cumple el requisito de asistencia (85%) e incidencias del Anexo.

📹 Requisitos obligatorios del video

1Presentación inicial

Al inicio del video te presentas diciendo:

  • Nombre completo: apellido paterno, apellido materno, nombres.
  • Grupo: ING10-1.
  • Asignatura: Aplicaciones Web Progresivas.
  • Práctica: recuperación de la Unidad 2, tu PWA de ventas y tu giro de negocio.
  • Tu cuenta de GitHub abierta en pantalla, con tus dos apellidos visibles.

"Hola, mi nombre es Prado Díaz Bernardo, del grupo ING10-1, de la asignatura Aplicaciones Web Progresivas. En este video voy a realizar la recuperación de la Unidad 2: construir paso a paso la PWA de ventas de mi negocio, con su vista SSR en Django, renderizado en cliente, carrito con almacenamiento local, notificaciones, geolocalización, manifest, Service Worker con Workbox, pruebas con Lighthouse, publicación en GitHub Pages e instalación en mi celular…"

2Configuración de pantalla: 3 secciones

Durante todo el video deben verse al mismo tiempo:

  • Lado izquierdo: Visual Studio Code, la terminal y el navegador con tu app (Live Server, DevTools, GitHub).
  • Lado derecho, arriba: la Guía U2 abierta en el navegador, en el paso que vas leyendo.
  • Esquina inferior derecha: tu cámara, de 1/6 de la altura de la pantalla, con tu rostro visible.
Distribución de pantalla: código a la izquierda, guía arriba a la derecha y cámara abajo a la derecha VS Code · Terminal · App Live Server, DevTools, GitHub Guía U2 en el paso que lees Cámara 1/6 →
Captura de ejemplo de una grabación con el sistema a la izquierda, la guía a la derecha y la cámara del docente en la esquina inferior derecha
Ejemplo real de cómo debe verse la pantalla (grabación del docente en otra asignatura). En tu video, la guía de la derecha es la Guía U2.

3Calidad de audio y video

  • Grabado todo: la guía completa, tanto en local (Live Server) como publicada (GitHub Pages) e instalada en el celular.
  • Volumen alto: tu voz se escucha fuerte y clara en cualquier computadora.
  • Resolución mínima 720p: todo el código y el texto de la guía deben ser legibles.
  • Sin ruido de fondo y solo tu voz: no se debe escuchar a otra persona.

4Leer la guía y explicar mientras trabajas

Esta es la regla central de la recuperación: lees en voz alta cada paso de la Guía U2 y lo ejecutas en ese momento, explicando con tus palabras qué hace y para qué sirve. No es válido grabar en silencio, ni narrar algo que ya estaba hecho antes de grabar.

  • Explica CSR vs SSR y demuestra la diferencia con "Ver código fuente".
  • Muestra y explica cada archivo que escribes: index.html, catalogo.json, css/estilos.css, js/csr.js, js/carrito.js, js/notificaciones.js, js/geolocalizacion.js, manifest.json, js/app.js y workbox-config.js.
  • Muestra los comandos en la terminal: python -m venv venv, pip install django, python manage.py runserver, workbox wizard, workbox generateSW, npx lighthouse, git add, git commit, git push.
  • Usa DevTools → Application para mostrar el manifest, el Service Worker, Cache Storage y localStorage.
  • Tu catálogo debe ser el de tu giro de negocio, con tus 15 productos y sus fotografías.
  • Narra los errores si aparecen: detén la grabación, resuélvelo, reanuda y explica qué pasó y qué cambiaste.

5Despedida y cierre

  • Repite tu nombre completo y tu grupo.
  • Da un resumen de lo que construiste y menciona lo que aprendiste.
  • Muestra por última vez la URL pública de tu app y la app instalada en el celular.
  • Despídete formalmente.

"Esto ha sido todo. Mi nombre es Prado Díaz Bernardo, del grupo ING10-1. En este video construí mi PWA de ventas: comparé SSR con Django contra CSR, guardé el carrito en localStorage y lo sincronicé al volver la conexión, agregué notificaciones y geolocalización, generé el Service Worker con Workbox, la audité con Lighthouse, la publiqué en GitHub Pages y la instalé en mi celular. Aprendí a convertir un sitio web en una aplicación instalable que funciona sin conexión. Gracias por su atención."

6Formato y duración

  • Un solo video. Si grabaste por partes, únelas en un solo archivo antes de entregarlo.
  • No hay tiempo máximo: los minutos que hagan falta para recorrer toda la guía.
  • Los errores no se dejan en la grabación: detienes, corriges y al reanudar explicas la corrección.
  • No debe verse el uso de IA durante la grabación. Si la usas para resolver un error, detén el video, resuélvelo, reanuda y explica qué ocurrió y qué partes del código cambiaste.
  • Prepárate antes de grabar: la guía en pantalla es tu apoyo para ir diciendo lo que se pide.

7Herramientas de grabación (sin marca de agua)

  • OBS Studio (gratuito, recomendado: permite poner la cámara en la esquina).
  • Zoom (grabar una reunión contigo solo y compartir pantalla).
  • ShareX (gratuito), Loom (gratuito con límites), Camtasia (de pago).

🎬 Demostración de la práctica, parte por parte

El video sigue el orden de la Guía U2. Los tiempos son estimados; lo que se evalúa es que se vea cada punto funcionando.

Parte 0 · Presentación y punto de partida 5 min
  1. Presentación (regla 1) y la distribución de pantalla (regla 2) ya activa.
  2. Muestra tu cuenta de GitHub y que la carpeta del proyecto está vacía: la práctica se construye desde cero en el video.
  3. Menciona tu giro de negocio y tu producto estrella (tu giro en la guía).
Parte A · Vista SSR con Django 25 min
  1. python --version, creación de servidor-ssr, python -m venv venv y activación (se ve (venv)).
  2. pip install django, django-admin startproject ssr_demo . y python manage.py startapp catalogo.
  3. Registrar la app en ssr_demo/settings.py; escribir catalogo/views.py, la plantilla catalogo_ssr.html, catalogo/urls.py y ssr_demo/urls.py.
  4. python manage.py runserver y la vista con tus productos.
  5. Ver código fuente: los productos ya vienen escritos en el HTML (SSR). Explica por qué.
Parte B · La PWA de ventas (HTML, CSS y JavaScript) 75 min
  1. Estructura de carpetas y catalogo.json con tus 15 productos, precios, categorías y fotos.
  2. App Shell en index.html y estilos en css/estilos.css con los colores de tu giro.
  3. Renderizado en cliente con js/csr.js; Ver código fuente con <div id="catalogo"> vacío y compáralo con SSR.
  4. Filtro del catálogo por categoría.
  5. js/carrito.js: agregar productos, cambiar cantidad con +/− y mostrar localStorage en DevTools. Recarga la página y el carrito sigue ahí.
  6. Sincronización: marca Offline en DevTools, modifica el carrito, vuelve a Online y muestra que se sincroniza.
  7. js/notificaciones.js: pedir permiso y recibir la notificación.
  8. js/geolocalizacion.js: permiso de ubicación y distancia a tu sucursal.
  9. manifest.json con íconos PNG de 192×192 y 512×512; revísalo en Application → Manifest.
  10. Service Worker: workbox wizard, corrige workbox-config.js y workbox generateSW workbox-config.js.
  11. js/app.js registra el Service Worker y el estado de conexión; pruébalo con Live Server, apaga la red y la app sigue abriendo.
Parte C · Pruebas, publicación e instalación 45 min
  1. Lighthouse móvil y escritorio con npx lighthouse; explica cada puntaje y guarda los reportes en docs/.
  2. Después de cambiar archivos, actualiza el Service Worker (vuelve a generar con Workbox).
  3. .gitignore sin venv, db.sqlite3 ni __pycache__.
  4. git init, commit con tu nombre: git commit -m "Recuperación U2 - APELLIDOPATERNO APELLIDOMATERNO NOMBRES: PWA completa", y git push.
  5. Activa GitHub Pages y abre tu URL pública con tus apellidos.
  6. Valida en PWABuilder y explica las advertencias.
  7. Instala la app en tu celular mostrándolo a la cámara: ícono en la pantalla de inicio, se abre sin barra del navegador, funciona en modo avión.
Parte D · Evidencias y cierre 15 min
  1. README.md con encabezado de identificación y guía breve de instalación, escrito por ti.
  2. Reporte de pruebas en PDF (Evidencia 2) con las capturas y los candados anti-copia de la guía.
  3. Último git push y el hash del commit visible en GitHub.
  4. Despedida (regla 5).

8️⃣ Nomenclatura de cuentas y repositorios

Todos los nombres llevan tus dos apellidos

  • Cuenta de GitHub: PradoDiazBernardo ✅ · bernardo123 ❌ · pradodev ❌ (falta un apellido).
  • Repositorio: tu-negocio-pwa_pradodiaz-bernardo ✅ · pwa-ventas ❌.
  • URL publicada: https://pradodiazbernardo.github.io/tu-negocio-pwa_pradodiaz-bernardo/ ✅.

Si tu cuenta o tu repositorio no tienen tus dos apellidos, crea unos nuevos con la nomenclatura correcta. No se acepta una entrega que no cumpla esta regla.

9️⃣ Entrega del video

1

Súbelo a Google Drive

En una carpeta llamada Recuperacion U2-apellidopaternoapellidomaterno (ejemplo: Recuperacion U2-pradodiaz). Un solo enlace, no por partes.

2

Abre los permisos

Clic derecho → Compartir → "Cualquier persona con el enlace puede ver". Verifica el enlace en una ventana de incógnito antes de enviarlo.

3

Envía el correo antes del domingo 22 de noviembre, 10:00 pm

A Tenor_Prado@yahoo.com.mx.

  • Asunto: Apellido Paterno Apellido Materno Nombres ING10-1 Recuperación U2
    Ejemplo: Prado Diaz Bernardo ING10-1 Recuperación U2
  • Cuerpo: lo mismo del asunto, el enlace del repositorio de GitHub, la URL de GitHub Pages y el enlace de Google Drive listo para ver el video.
4

Preséntate el lunes 23 de noviembre

Es el día de reposición única (7:00 – 8:50 am, tolerancia hasta las 7:30). Trae tu celular con la app instalada: el docente puede pedirte que la abras o que expliques una parte de tu código.

Escala de calificación

CalificaciónNivelEn el video
8.0 – 10.0SA SatisfactorioTodas las partes funcionando y explicadas; la PWA queda publicada en GitHub Pages e instalada en el celular.
0 – 7.9NA No acreditadoFaltan partes, no se publica o se rompe alguna regla: pasa al extraordinario.

✅ Lista de verificación antes de entregar

0 de 0 puntos listos

Consejos para que tu video salga a la primera

  • Haz un video de prueba de 2 minutos para revisar audio, cámara y que el texto se lea.
  • No lo dejes para el último día: grábalo por partes (A, B, C, D) y únelas al final.
  • Haz commit al terminar cada parte para no perder trabajo.
  • Si un error te detiene más de 30 minutos, pide ayuda antes de la fecha límite.

← Recuperación de la Unidad 1 · Abrir la Guía U2 → · Calendario final →