P00 · Autopsia de una web
El encargo (como lo diría un cliente)
"Me han dado tres presupuestos muy distintos para mi web y no entiendo por qué. ¿Puedes mirar estas tres páginas y explicarme en qué se diferencian y qué tiene cada una por detrás?"
Esto es, literalmente, una consulta real y facturable. Y es lo que vas a practicar.
Alcance
Incluye: visitar tres webs, inspeccionarlas con las DevTools, clasificarlas, justificar la clasificación y escribir tu mapa de la web. No incluye: escribir código, instalar nada, ni entender lo que pone el código. Si te pierdes leyendo, es lo esperado.
Elige tus tres webs
Una de cada tipo, y que sean de verdad:
- Una simple: la web de un bar, una peluquería, un fisio de tu barrio. Busca en Google "peluquería + tu ciudad".
- Una tienda: cualquier e-commerce pequeño o mediano (mejor una tienda local que Amazon).
- Una aplicación con cuenta de usuario: algo donde inicies sesión (un gestor de tareas, un banco, una plataforma de cursos). Con mirar la pantalla de acceso basta.
Apunta las tres direcciones aquí:
- Simple:
... - Tienda:
... - Con usuarios:
...
Cómo abordarlo, paso a paso
Paso 1 · Mira la dirección (5 min por web)
- ¿Empieza por
https? Si alguna es solohttp, fíjate en el aviso del navegador → HTTP / HTTPS - Identifica en la URL el dominio, la ruta y, si hay buscador o filtros, los parámetros.
- Navega dos o tres páginas y observa cómo cambia la ruta.
Paso 2 · Abre las DevTools (10 min por web)
F12 o clic derecho → Inspeccionar.
Pestaña Elements
- Pasa el ratón por el código y mira cómo se resalta la parte correspondiente de la página. Ahí acabas de ver la relación entre HTML y lo que se ve.
- Busca un titular, haz doble clic en su texto y cámbialo. Pon el nombre de tu madre. Recarga: vuelve a estar como antes. Acabas de comprobar que el frontend está en tu ordenador y no puedes hacerle nada real a la web.
Pestaña Network
- Recarga la página con la pestaña abierta. Cada línea es una petición.
- Anota: cuántas peticiones hace y cuánto pesa en total (lo dice abajo). Compara las tres webs.
- Busca alguna línea en rojo: es una petición fallida. Mira su código (404, 500...).
Pestaña Console
- ¿Hay errores en rojo? Muchas webs profesionales los tienen. No los entiendas: solo comprueba que existen.
Paso 3 · Deduce qué hay detrás (10 min por web)
Sin ver el servidor, se nota. Pistas de que hay backend y base de datos:
| Si ves esto... | Entonces hay... |
|---|---|
| Iniciar sesión / crear cuenta | backend + base de datos + usuarios |
| Carrito, stock, "quedan 2 unidades" | backend + base de datos |
| Un buscador que filtra de verdad entre muchos resultados | backend (o un buen truco de frontend) |
| Un formulario que guarda algo, no solo envía un email | backend |
| Precios distintos según quién entra | backend |
Textos y fotos que el dueño cambia solo, con un /blog o /wp-admin |
un CMS |
| Solo información fija, teléfono y un formulario de contacto | probablemente nada: es estático |
Paso 4 · Clasifica y justifica (15 min)
Rellena la tabla de abajo. La columna importante es la última: la clasificación sin justificación no vale nada.
Paso 5 · Escribe tu mapa (30-40 min)
En la la bitácora, sin mirar la nota de la fase, escribe El viaje de una página web con tus palabras. Máximo 400 palabras. Cuando termines, compáralo con el apartado 4.1 de la Fase 0 y corrige en otro color lo que te faltó.
Paso 6 · Explícaselo a una persona (10 min)
A alguien que no sea del gremio: pareja, amigo, tu madre. Si te hace una pregunta que no sabes responder, apúntala en Dudas abiertas. Este paso es el examen de verdad.
Tu análisis
| Web 1 (simple) | Web 2 (tienda) | Web 3 (usuarios) | |
|---|---|---|---|
| Dirección | |||
| ¿HTTPS? | |||
| Tipo de producto (tipos de producto web) | |||
| ¿Estática o dinámica? | |||
| ¿Tiene backend? ¿Cómo lo sabes? | |||
| ¿Necesita base de datos? ¿Para guardar qué? | |||
| ¿Tiene CMS? | |||
| Nº de peticiones al cargar | |||
| Peso total | |||
| ¿Errores en la consola? | |||
| Esfuerzo relativo estimado (×1 = landing) |
Criterios de aceptación
- Tres webs elegidas, reales y de tipos distintos
- Tabla de análisis completa, con la justificación de por qué crees que hay backend o no
- He cambiado un titular con las DevTools y he entendido por qué al recargar vuelve atrás
- Sé decir cuántas peticiones y cuánto pesa cada una de las tres, y cuál es la más ligera
- El viaje de una página web escrito con mis palabras en la la bitácora (≤400 palabras, sin copiar)
- Comparado con el apartado 4.1 y corregido lo que me faltaba
- Explicado en voz alta a una persona no técnica, y me ha entendido
- Las dudas que no he sabido resolver están en Dudas abiertas
Cómo delegarlo (y qué no)
Úsalo así: primero analizas tú, luego contrastas. Si preguntas antes de mirar, te quedas con su respuesta y no aprendes a mirar.
Ya he analizado esta web: <url>.
Mi conclusión es: <tipo de producto>, <estática o dinámica>, <tiene backend o no>,
y me baso en <tus pistas>.
Dime en qué me equivoco y qué pistas se me han pasado por alto.
Voy a explicarte qué creo que pasa desde que escribo una dirección hasta que
veo la página: <tu explicación>.
Corrígeme paso a paso: ❌ lo que está mal, ⚠️ lo impreciso, ✅ lo correcto.
Al final, dime qué paso me he saltado.
Si Claude no puede abrir la página, pégale el código (clic derecho → Ver código fuente) o descríbele lo que ves. Y recuerda: puede deducir cosas de una web, pero no ve su servidor. Si afirma con total seguridad qué base de datos usan, desconfía → la checklist de revisión.
No delegues: escribir tu mapa. Es todo el valor del proyecto.
Cómo verificar que está bien
- Tapa la tabla y explica de memoria por qué la web 3 necesita base de datos y la web 1 no.
- Tu mapa escrito, ¿menciona DNS, petición, servidor, HTML y navegador en el orden correcto?
- Al explicárselo a otra persona, ¿has tenido que decir "esto no sé"? Eso está bien y es información: apúntalo.
Qué has aprendido al terminarlo
(Rellénalo tú, en 3-4 líneas, cuando acabes. Tu yo de dentro de seis meses lo va a leer.)