INFOTEP Técnico en Programación de Páginas Web cheat sheet

HTTP es un protocolo sin estado: cada petición es independiente; el estado se mantiene con cookies, tokens o sesiones en servidor.

Métodos HTTP y semántica: GET recupera sin modificar datos, POST crea, PUT reemplaza el recurso completo, PATCH modifica parcialmente, DELETE elimina.

Códigos de estado por rango: 1xx informativo, 2xx éxito (200 OK, 201 Created, 204 No Content), 3xx redirección (301 permanente, 302 temporal, 304 no modificado), 4xx error del cliente (400, 401, 403, 404, 422), 5xx error del servidor (500, 502, 503).

Un ciclo petición-respuesta típico: el navegador resuelve el DNS, abre conexión TCP/TLS, envía la petición HTTP con cabeceras, el servidor responde con estado, cabeceras y cuerpo, y el navegador renderiza.

Modelo cliente-servidor: el cliente inicia la comunicación y el servidor escucha en un puerto; el frontend se ejecuta en el navegador y el backend en el servidor, comunicados por HTTP.

Idempotencia: GET, PUT y DELETE son idempotentes (repetir la petición produce el mismo estado final); POST no lo es.

HTTPS añade TLS sobre HTTP: cifra el canal, autentica el servidor mediante certificado y garantiza integridad; el puerto por defecto es 443 frente al 80 de HTTP.

Cabeceras clave: Content-Type indica el tipo de medio, Authorization transporta credenciales, Cache-Control y ETag controlan el almacenamiento en caché, Set-Cookie crea cookies.

Esqueleto mínimo: , , con y , y con el contenido.

Elementos semánticos de estructura:

, , (uno por documento), , , y .

Jerarquía de encabezados:

a sin saltar niveles; un solo por página describe el tema principal.

Accesibilidad: toda imagen informativa necesita alt descriptivo; las decorativas usan alt=""; los formularios asocian con el id del control.

Atributos ARIA: aria-label nombra un control, aria-hidden="true" oculta de lectores de pantalla, aria-live anuncia cambios dinámicos, role define el rol cuando no hay elemento nativo.

Formularios HTML5: tipos email, number, date, url activan validación nativa; required, minlength, pattern y min/max restringen la entrada.

Elementos multimedia: y con para formatos alternativos; aporta subtítulos accesibles.

Contraste mínimo WCAG AA: 4.5:1 para texto normal y 3:1 para texto grande; el contenido debe ser navegable solo con teclado.

Box model: ancho total = width + padding + border + margin; box-sizing: border-box incluye padding y border dentro del width declarado.

Flexbox resuelve distribución en un eje: justify-content alinea en el eje principal y align-items en el transversal; flex-direction define el eje.

CSS Grid maquetación en dos dimensiones: grid-template-columns define columnas, gap separa celdas y grid-area nombra zonas.

Especificidad (de mayor a menor): estilos inline, ID, clases/atributos/pseudo-clases, elementos/pseudo-elementos; a igual especificidad gana la última regla.

Media queries responsive: @media (min-width: 768px) aplica estilos desde ese ancho; enfoque mobile-first usa min-width y escala hacia arriba.

Unidades relativas: rem se basa en el tamaño de fuente del root, em en el del elemento padre, % en el contenedor; vw y vh en el viewport.

Preprocesadores como Sass aportan variables, anidamiento, mixins y partials; se compilan a CSS plano antes de servirse al navegador.

position: static, relative, absolute, fixed y sticky; absolute se posiciona respecto al ancestro posicionado más cercano.

Declaración de variables: const para enlaces inmutables, let para reasignables con ámbito de bloque; var tiene ámbito de función y hoisting.

Igualdad: === compara valor y tipo sin coerción; == aplica coerción de tipos y produce resultados inesperados.

Selección en el DOM: document.querySelector(selector) devuelve el primer nodo coincidente; querySelectorAll devuelve una NodeList estática.

Eventos: addEventListener(tipo, manejador) registra un listener; el objeto event expone target y preventDefault() para cancelar el comportamiento por defecto.

Burbujeo de eventos: el evento asciende del target a los ancestros; stopPropagation() lo detiene y la delegación aprovecha el burbujeo en un contenedor.

Promesas: estados pending, fulfilled y rejected; then() encadena el éxito, catch() captura el rechazo y finally() se ejecuta en ambos casos.

async/await permite escribir código asíncrono secuencial; await pausa la función async hasta que la promesa se resuelve o rechaza, y se captura con try/catch.

fetch(url) devuelve una promesa que resuelve a un objeto Response; hay que llamar a response.json() para obtener el cuerpo parseado.

REST modela recursos identificados por URL y usa los métodos HTTP para operar sobre ellos; las respuestas suelen ser JSON con Content-Type application/json.

Diseño de rutas REST: GET /recurso lista, GET /recurso/:id obtiene uno, POST /recurso crea, PUT/PATCH /recurso/:id actualiza, DELETE /recurso/:id elimina.

Códigos REST habituales: 201 con cabecera Location al crear, 204 al eliminar sin cuerpo, 400 por datos inválidos, 401 sin autenticar, 403 sin permiso, 404 inexistente, 409 conflicto.

Middleware es una función que recibe (req, res, next) y se ejecuta en cadena antes del manejador final; next() pasa al siguiente middleware.

Autenticación con token: el servidor valida credenciales y emite un JWT firmado; el cliente lo envía en la cabecera Authorization: Bearer .

Un JWT tiene tres partes codificadas en base64url separadas por puntos: header, payload y signature; el payload es legible, no cifrado.

Paginación de APIs: parámetros page y limit o offset y limit; la respuesta incluye metadatos como total y página actual.

CORS: el servidor debe enviar Access-Control-Allow-Origin para que el navegador permita peticiones cruzadas desde otro origen.

Claves: la clave primaria identifica de forma única cada fila; la clave foránea referencia la primaria de otra tabla y garantiza integridad referencial.

Formas normales: 1FN elimina grupos repetidos, 2FN elimina dependencias parciales de la clave compuesta, 3FN elimina dependencias transitivas entre atributos no clave.

Relaciones: uno a uno, uno a muchos y muchos a muchos; esta última se implementa con una tabla intermedia que contiene las dos claves foráneas.

SQL básico: SELECT columnas FROM tabla WHERE condición ORDER BY columna LIMIT n; INSERT INTO, UPDATE ... SET ... WHERE e DELETE FROM ... WHERE.

JOIN combina filas de tablas relacionadas: INNER JOIN devuelve solo coincidencias, LEFT JOIN conserva todas las filas de la izquierda y rellena con NULL.

Índice acelera búsquedas y ordenaciones sobre una columna a cambio de espacio y coste de escritura; conviene indexar columnas usadas en WHERE y JOIN.

Transacción ACID: atomicidad, consistencia, aislamiento y durabilidad; COMMIT confirma y ROLLBACK deshace los cambios.

Inyección SQL se previene con consultas parametrizadas o prepared statements, nunca concatenando entrada del usuario en la cadena SQL.

Estados de un archivo en Git: modificado en el working directory, preparado en el staging area con git add y confirmado en el repositorio con git commit.

Flujo básico: git init o git clone, git status, git add, git commit -m "mensaje", git push y git pull para sincronizar con el remoto.

git branch crea una rama, git checkout o git switch cambia de rama y git merge integra los cambios de otra rama en la actual.

Un conflicto de merge ocurre cuando dos ramas modifican las mismas líneas; se resuelve editando el archivo, marcando con git add y cerrando con git commit.

git log --oneline muestra el historial compacto; git diff compara cambios entre working directory, staging e historial.

git revert crea un commit que deshace otro conservando el historial; git reset --hard reescribe el historial local y es peligroso en ramas compartidas.

Pull request o merge request: propuesta de integración revisada por pares antes de fusionar en la rama principal.

.gitignore excluye archivos del seguimiento, como node_modules, archivos .env y artefactos de compilación.

XSS (cross-site scripting) se mitiga escapando la salida y usando textContent en lugar de innerHTML; la validación de entrada sola no basta.

CSRF se mitiga con tokens anti-CSRF, cookies con atributo SameSite y verificación de origen en peticiones que modifican estado.

Contraseñas: se almacenan con hash lento y salado (bcrypt, Argon2), nunca en texto plano ni con hash rápido como MD5 o SHA-1.

HTTPS obligatorio en producción; cabeceras recomendadas: Strict-Transport-Security, Content-Security-Policy, X-Content-Type-Options: nosniff.

Las cookies de sesión llevan HttpOnly para impedir acceso desde JavaScript y Secure para enviarse solo por HTTPS.

Principio de mínimo privilegio: el usuario de base de datos de la aplicación solo tiene los permisos que necesita, no permisos de administrador.

Nunca incluir secretos, claves API ni credenciales en el código del frontend ni en el repositorio; se gestionan con variables de entorno.

Validar siempre en el servidor: la validación del cliente mejora la experiencia pero puede eludirse, por lo que no es un control de seguridad.

Hosting estático sirve HTML, CSS y JS sin procesamiento en servidor; el hosting con backend ejecuta código y requiere base de datos y variables de entorno.

DNS traduce el dominio a una dirección IP: un registro A apunta a IPv4, AAAA a IPv6 y CNAME a otro nombre de dominio.

El despliegue típico compila o empaqueta el proyecto, sube los artefactos al servidor y reinicia el servicio; en CI/CD se automatiza con un pipeline.

Entornos separados: desarrollo, pruebas y producción; las variables de entorno cambian los valores de configuración sin tocar el código.

Caché del navegador: Cache-Control: max-age define la vigencia; los assets con hash en el nombre se sirven con caché larga e inmutable.

Monitorización y logs registran errores y tiempos de respuesta; las alertas avisan de caídas o degradación antes que el usuario.

Copias de seguridad: la estrategia 3-2-1 conserva tres copias, en dos medios distintos, con una fuera del sitio.

Renovación del certificado TLS: Let's Encrypt emite certificados de 90 días que deben renovarse automáticamente.

Scrum define roles (Product Owner, Scrum Master, equipo), artefactos (product backlog, sprint backlog, incremento) y eventos (planificación, daily, revisión, retrospectiva).

Un sprint es una iteración de duración fija, habitualmente de una a cuatro semanas, al final de la cual se entrega un incremento potencialmente desplegable.

Kanban visualiza el flujo en columnas con límites de trabajo en curso (WIP) y mide el tiempo de ciclo.

Historias de usuario: formato «Como , quiero para »; incluyen criterios de aceptación verificables.

Definition of Done: lista acordada de condiciones que un incremento debe cumplir, como pruebas superadas y revisión de código, para considerarse terminado.

README del proyecto: descripción, requisitos previos, instalación, comandos de ejecución, variables de entorno y cómo contribuir.

Documentación de API: especificación OpenAPI/Swagger que describe rutas, parámetros, cuerpos de petición y respuestas con sus códigos.

Control de versiones semántico: MAJOR para cambios incompatibles, MINOR para funcionalidad compatible y PATCH para correcciones compatibles.