Módulo 0

Bienvenida y herramientas

Bienvenido o bienvenida. Este curso da por hecho que nunca antes has programado y que quizá tampoco te sientes muy cómodo/a con el ordenador en general, así que vamos a ir muy despacio y a explicar hasta el detalle más pequeño. No hay preguntas tontas ni pasos "demasiado obvios": si algo no queda claro, es que hay que explicarlo mejor, no que tú vayas lento/a.

Antes de escribir una sola línea de código, vamos a conocer las cuatro herramientas que vas a usar todos los días: el editor de código (donde escribes), el navegador con su modo "detective" (donde ves el resultado), el validador de HTML (que revisa tus errores) y Figma (para dibujar antes de construir).

En este módulo vas a...

Entender qué es HTML y qué es CSS, y en qué se diferencian.
Familiarizarte con un editor de código, paso a paso, aunque nunca hayas usado uno.
Aprender a abrir las herramientas para desarrolladores del navegador.
Conocer el validador de HTML y para qué sirve.
Saber qué es Figma y por qué lo usaremos para bocetar antes de programar.

📖 Palabras que vamos a usar mucho

Archivo: Un documento guardado en tu ordenador, como un documento de Word o una foto. Tiene un nombre y una "extensión" (las letras después del punto, como .html) que le dice al ordenador qué tipo de archivo es.
Carpeta: Un contenedor donde guardas archivos, para tenerlos ordenados. Es como una carpeta de cartón física, pero dentro del ordenador.
Navegador: El programa con el que ves páginas web: Chrome, Firefox, Edge o Safari, por ejemplo. Es donde se abrirá y se verá tu propia página.
Editor de código: Un programa especial para escribir código (como Word, pero para programar). En este curso usaremos Visual Studio Code (también llamado "VS Code").

¿Qué es HTML y qué es CSS?

Imagina que construyes una casa de juguete con piezas de madera. Primero colocas las piezas: una pared aquí, una puerta allá, una ventana más arriba. Eso es HTML: define qué elementos hay y en qué orden aparecen (un título, una imagen, un párrafo...).

Después llega la pintura: pintas la pared de azul, la puerta de rojo... Eso es CSS: define cómo se ven esas piezas (colores, tamaños, espacios).

En este curso primero aprenderemos a "colocar las piezas" (HTML) y, poco a poco, iremos añadiendo "pintura" (CSS).

El editor de código

Un editor de código es como un procesador de textos (piensa en Word), pero pensado para escribir código: numera las líneas, colorea las palabras según su función y te avisa si algo está mal escrito.

Vamos a hacerlo despacio, paso a paso. No te saltes ninguno aunque te parezca muy básico: la primera vez que se hace todo esto puede costar un poco, y es completamente normal.

Instala Visual Studio Code. Es gratuito. Busca en tu navegador "Visual Studio Code descargar", entra en la página oficial de Microsoft, descarga la versión para tu sistema operativo (Windows, Mac o Linux) y ábrela como instalarías cualquier otro programa (haz doble clic en el archivo descargado y sigue las instrucciones en pantalla, pulsando "Siguiente" o "Instalar").
Crea una carpeta nueva en tu ordenador para guardar todo este curso. Por ejemplo, en el Escritorio: haz clic derecho sobre un espacio vacío del Escritorio, elige "Nuevo" → "Carpeta" (en Windows) o "Nueva carpeta" (en Mac), y ponle de nombre mi-primera-web, sin espacios ni tildes.
Abre esa carpeta desde el editor. Abre Visual Studio Code y ve al menú Archivo → Abrir carpeta... (en inglés, File → Open Folder...). Busca y selecciona la carpeta mi-primera-web que acabas de crear, y pulsa "Seleccionar carpeta".
Crea el primer archivo. A la izquierda verás un panel vacío con el nombre de tu carpeta. Pasa el ratón por encima de ese nombre: aparecerán unos pequeños iconos arriba; haz clic en el que parece una hoja de papel con un signo "+" (nuevo archivo). Escribe el nombre index.html y pulsa Intro. Todavía estará vacío: lo llenaremos en el próximo módulo.

Cuidado con esto

Escribe el nombre exactamente index.html, con esas letras y ese punto. Si tu ordenador tiene ocultas las extensiones de archivo, podrías acabar guardando sin querer un archivo llamado index.html.txt, que no funcionará. Si tienes dudas, vuelve a mirar el nombre del archivo en la pestaña de arriba del editor: debe terminar exactamente en .html.

Consejo

Guarda tus archivos muy a menudo con el atajo de teclado Ctrl+S (en Windows/Linux) o Cmd+S (en Mac): mantén pulsada esa tecla y, sin soltarla, pulsa la letra S. El navegador solo muestra lo que está guardado en el archivo, nunca lo que ves "sin guardar" en el editor. Si ves un puntito blanco en la pestaña del archivo (en vez de una X para cerrar), significa que tienes cambios sin guardar.

Las herramientas para desarrolladores del navegador

Todos los navegadores (Chrome, Firefox, Edge...) traen un "modo detective" escondido que te deja ver el HTML y el CSS de cualquier página web, incluida esta misma.

📖 ¿Cómo hago "clic derecho"?

Con ratón: Pulsa el botón derecho del ratón (el de la derecha, no el que usas normalmente para hacer clic).
Con trackpad (portátil): Suele ser pulsar con dos dedos a la vez sobre la superficie táctil, o pulsar en la esquina inferior derecha del trackpad.
En Mac: También puedes mantener pulsada la tecla Control mientras haces clic normal.

Haz clic derecho en cualquier parte de esta página (por ejemplo, sobre este mismo texto) y elige "Inspeccionar" en el menú que aparece (también puedes pulsar la tecla F12).
Se abrirá un panel, normalmente a un lado o abajo de la pantalla, con varias pestañas arriba. Busca y pulsa la pestaña "Elements" / "Elementos".
Verás el HTML de esta página, con sangrías como las que veremos en el próximo módulo. Pasa el ratón (sin hacer clic) por encima de una de esas líneas: la parte correspondiente de la página se resaltará en color.
Haz doble clic sobre algún texto del panel y cámbialo escribiendo algo distinto. Verás que la página cambia al instante.

Tranquilo/a, no rompes nada de verdad

Los cambios que hagas en este panel solo existen en tu pantalla, en este momento: si recargas la página (o la cierras), todo vuelve a como estaba. Es un espacio seguro para "cacharrear" y curiosear sin miedo.

Para qué sirve de verdad

Cuando algo de tu página no se vea como esperas, inspeccionarla te permite ver exactamente qué etiqueta HTML y qué estilo CSS se está aplicando. Es la forma más rápida de encontrar errores, y la usarás constantemente cuando hagas tus propias páginas.

El validador de HTML

Un validador es una web que lee tu código HTML y te dice si tiene errores: una etiqueta que abriste pero no cerraste, un atributo mal escrito, etc. El más usado es el del W3C (la organización que crea los estándares de la web).

Cuando tengamos nuestra página escrita, entraremos en validator.w3.org, pegaremos nuestro código (o subiremos el archivo) y revisaremos la lista de avisos y errores, uno por uno.

Por qué importa

Un HTML sin errores se muestra igual en todos los navegadores y es más fácil de leer para las personas que usan lectores de pantalla. Piensa que estás publicando un libro para pantalla: debe ser lo más claro y correcto posible.

No te preocupes si al principio la lista de avisos te parece un idioma extraño: con el tiempo aprenderás a reconocer los errores más habituales, y en el Módulo 9 practicaremos esto con calma, paso a paso.

Figma: bocetar antes de construir

Antes de picar código, es buena idea dibujar cómo queremos que se vea la página. Figma es una herramienta gratuita (funciona en el navegador, no necesitas instalar nada) para hacer esos bocetos, llamados prototipos: dibujos simples, con rectángulos y texto, que muestran dónde va cada cosa antes de programar nada.

Busca en tu navegador "Figma" y entra en la página oficial (figma.com).
Crea una cuenta gratuita (puedes usar tu correo electrónico o tu cuenta de Google).
Crea un archivo nuevo y dibuja, con rectángulos y texto, cómo te imaginas tu página de inicio: ¿dónde va el título? ¿dónde las imágenes? ¿dónde el menú?

Piensa en el plano de una casa antes de construirla. Un arquitecto no empieza a poner ladrillos sin haber dibujado antes dónde va cada habitación. Tu boceto en Figma es ese plano: no hace falta que quede bonito ni perfecto, solo que te ayude a pensar antes de escribir código.