Conocimientos Básicos Ecosistema Web
URL: https://ruvebal.github.io/web-atelier-udit/lessons/es/web-basics-diagnosis/
✅ Checklist de diagnóstico inicial
Repositorio de trabajo: student-project-template
Objetivo: comprobar en 30 minutos que todos partimos de unos mínimos comunes.
👉 Marca con una de estas opciones cada ítem:
| Estado | Significado |
|---|---|
| 🟢 | Sí, me lo sé |
| 🟡 | Más o menos |
| 🔴 | No, ni idea |
🔹 HTML + CSS
| Concepto | Referencia canónica | Estado |
|---|---|---|
Crear un documento index.html con estructura mínima (<!DOCTYPE html>, <html>, <head>, <body>) |
MDN: HTML basics | 🟢 / 🟡 / 🔴 |
Usar etiquetas semánticas (<header>, <main>, <footer>) |
MDN: Semantics | 🟢 / 🟡 / 🔴 |
Enlazar css/index.css en el <head> |
MDN: HTML <link> |
🟢 / 🟡 / 🔴 |
Propiedades básicas de color (color, background-color) |
MDN: CSS color | 🟢 / 🟡 / 🔴 |
| Crear y reutilizar clases CSS | MDN: CSS selectors | 🟢 / 🟡 / 🔴 |
🔹 Tipografía y diseño responsivo
| Concepto | Referencia canónica | Estado |
|---|---|---|
| Cargar una web font (Google Fonts, @font-face) | MDN: CSS @font-face · Google Fonts | 🟢 / 🟡 / 🔴 |
Tipografía fluida con clamp(), em, rem |
MDN: CSS clamp() | 🟢 / 🟡 / 🔴 |
| Layouts con Flexbox o CSS Grid | MDN: Flexbox · MDN: Grid | 🟢 / 🟡 / 🔴 |
🔹 JavaScript
| Concepto | Referencia canónica | Estado |
|---|---|---|
Enlazar js/index.js en index.html con <script> |
MDN: <script> |
🟢 / 🟡 / 🔴 |
console.log() en la consola |
MDN: console.log() | 🟢 / 🟡 / 🔴 |
Selección de elementos con document.querySelector() |
MDN: querySelector() | 🟢 / 🟡 / 🔴 |
Modificar texto (innerText, textContent) |
MDN: textContent | 🟢 / 🟡 / 🔴 |
Manejo de eventos (addEventListener) |
MDN: addEventListener() | 🟢 / 🟡 / 🔴 |
🔹 Navegador y DevTools
| Concepto | Referencia canónica | Estado |
|---|---|---|
| Usar Inspector (DevTools) en Chrome/Firefox | Chrome DevTools overview | 🟢 / 🟡 / 🔴 |
| Editar estilos en pestaña Elements | Chrome DevTools: CSS | 🟢 / 🟡 / 🔴 |
| Revisar solicitudes en Network | Chrome DevTools: Network panel | 🟢 / 🟡 / 🔴 |
| Desactivar caché en Network | Chrome DevTools: Disable cache | 🟢 / 🟡 / 🔴 |
| Simular móvil con Device Toolbar | Chrome DevTools: Device mode | 🟢 / 🟡 / 🔴 |
🔹 Entorno de desarrollo
| Concepto | Referencia canónica | Estado |
|---|---|---|
| Tener instalado Visual Studio Code | VS Code docs | 🟢 / 🟡 / 🔴 |
| Prettier funcionando al guardar | Prettier: Editor integration | 🟢 / 🟡 / 🔴 |
| Linter activo (HTMLHint/ESLint) | ESLint · HTMLHint | 🟢 / 🟡 / 🔴 |
| Clonar repo en VS Code | GitHub Docs: Clone repo | 🟢 / 🟡 / 🔴 |
| Hacer un commit de prueba | Git basics – Git SCM | 🟢 / 🟡 / 🔴 |
🔹 Conceptos básicos del ecosistema web
(Revisa también: FreeCodeCamp: How the Web Works)
| Concepto | Referencia canónica | Estado |
|---|---|---|
| Historia y evolución de la Web (Tim Berners-Lee, orígenes, estándares abiertos) | MDN: The web and web standards | 🟢 / 🟡 / 🔴 |
| Estándares web y organismos (W3C, WHATWG, IETF) | W3C Standards · WHATWG HTML Living Standard | 🟢 / 🟡 / 🔴 |
| Cómo funciona la Web (HTTP, DNS, hosting, navegadores) | MDN: How the Internet works | 🟢 / 🟡 / 🔴 |
| Web 1.0 → Web 2.0 → Web 3.0 | MDN: Evolución del protocolo HTTP | 🟢 / 🟡 / 🔴 |
| Accesibilidad web (WCAG, WAI-ARIA) | W3C WAI: Accessibility standards · WebAIM Principles | 🟢 / 🟡 / 🔴 |
| Diseño responsivo y adaptable | MDN: Responsive design | 🟢 / 🟡 / 🔴 |
| SEO (Search Engine Optimization) básico | Google SEO Starter Guide | 🟢 / 🟡 / 🔴 |
| Impacto visual y jerarquía en diseño web | Interaction Design Foundation: Web Design Basics | 🟢 / 🟡 / 🔴 |
🔹 Git, GitHub y CI/CD
| Concepto | Referencia canónica | Estado |
|---|---|---|
| Qué es un sistema de control de versiones y por qué se usa Git | Git SCM – About | 🟢 / 🟡 / 🔴 |
| Diferencia entre repositorio local y remoto (GitHub) | GitHub Docs: About repositories | 🟢 / 🟡 / 🔴 |
| Crear un repositorio y clonarlo en local | GitHub Docs: Clone a repository | 🟢 / 🟡 / 🔴 |
Flujo básico: git add, git commit, git push |
Git SCM – Recording Changes | 🟢 / 🟡 / 🔴 |
Crear y cambiar de ramas (git branch, git checkout, git switch) |
Git SCM – Branches | 🟢 / 🟡 / 🔴 |
| Pull Requests y revisiones de código en GitHub | GitHub Docs: About pull requests | 🟢 / 🟡 / 🔴 |
| Publicar un sitio en GitHub Pages | GitHub Docs: About GitHub Pages | 🟢 / 🟡 / 🔴 |
| Qué es CI/CD (Integración y Entrega Continua) | Atlassian CI/CD guide | 🟢 / 🟡 / 🔴 |
| Configuración básica de un workflow en GitHub Actions | GitHub Docs: About workflows | 🟢 / 🟡 / 🔴 |
🧪 Actividad en clase
- Completa este checklist en tu repo clonado
student-project-template. - Prueba en práctica los ítems dudosos (HTML, CSS, JS, DevTools, Git).
- Marca 🟢 / 🟡 / 🔴 en cada ítem.
- Haz un commit con el archivo actualizado:
git add .
git commit -m "diagnostic: checklist fundamentos completado"