La web

¿ Cómo funciona la web?

Web es una palabra inglesa que en español significa red o telaraña. Es una forma abreviada de World Wide Web , es decir Red de Alcance Mundial. También conocido como www.

Este nombre fue puesto por Tim Berners-Lee en 1989 al sistema que le permitía en ese momento compartir documentos académicos con un grupo de personas. Empezó para un grupo exclusivo y en 1993 se permitió el uso para el público general.

Un usuario solicita datos mediante un navegador; un servidor procesa la petición y devuelve archivos HTML, CSS y JavaScript para visualizarlos.

El servidor es una computadora remota conectada a internet las 24 horas, encargada de almacenar y despachar la web.

1. ❖ Escucha: Espera la llamada del navegador (por ejemplo, al ingresar a google.com).
2. ❖ Procesa: Busca los archivos solicitados en su disco duro o consulta una base de datos si la información es dinámica.
3. ❖ Responde: Envía de vuelta los paquetes de datos utilizando un protocolo de comunicación seguro (HTTP o HTTPS).

El navegador (Chrome, Safari, Firefox), por donde un usuario desde cualquier parte del mundo solicita ver un sitio web, actúa como un traductor que convierte el código de texto en una interfaz visual.

1. ❖ HTML (El esqueleto): Define la estructura de la página (textos, títulos, imágenes, enlaces).
2. ❖ CSS (La ropa): Aplica los estilos visuales (colores, fuentes, márgenes, diseño responsivo para móviles).
3. ❖ JavaScript (Los músculos): Añade la interactividad (animaciones, ventanas emergentes, recarga de datos sin refrescar la página).

Los servidores si bien son computadoras, como deben estar las 24 horas del día, los 365 días del año encendidas, están diseñadas para atender peticiones de miles de usuarios o dispositivos simultáneamente.

Es por eso que para tener un sitio web en red se alquila un espacio en un servidor. Comprarlo, mantenerlo y conectarlo a internet por cuenta propia es extremadamente costoso, complejo y arriesgado para la mayoría de las personas y empresas.

Éstos se encuentran en Data Centers profesionales con conexiones de fibra óptica ultrarrápidas, generadores eléctricos de emergencia y sistemas de refrigeración industrial para que nunca se apaguen.

Hostinger, Vercel, Netlify, Cloudflare Pages,Vultr, Don Web entre muchos otros son empresas dedicadas al rubro de alquiler de un espacio donde colocar tu web. Algunos con instancias gratuitas para que puedas aprender.

¿Cómo comenzar?

Descargamos un Editor de texto plano

El editor de texto plano guarda únicamente las letras, números y símbolos que ves en pantalla.

Es el formato obligatorio para programar. Los servidores y los navegadores web solo entienden código en texto plano. Si intentaras meter estilos de diseño dentro del código, el programa fallaría.

Usaremos Visual Studio Code porque es de código abierto, es decir gratis.

Se descarga de su página oficial, según el sistema operativo de tu computadora: https://code.visualstudio.com/download

Aprender a usar este programa con precisión puede llevar un curso entero. Para concentrarnos en la escritura de documentos web lo iremos descubriendo en el camino.

VSC - Extensiones

Para empezar a escribir documentos con HTML, CSS y JavaScript en Visual Studio Code, necesitaremos también extensiones esenciales que harán todo más fácil.

Vamos a instalar:

1. ❖ Para ver tus cambios en tiempo real Live Server (de Ritwick Dey). ¿Qué hace? Crea un servidor local en tu computadora con un solo clic. Cada vez que guardas un cambio en tu archivo HTML o CSS, la página web se actualiza automáticamente en tu navegador sin que tengas que presionar F5.
2. ❖ Para mantener tu código limpio y ordenado Prettier - Code formatter (de Prettier). ¿Qué hace? Ordena y da formato a tu código automáticamente cada vez que guardas el archivo. Acomoda los espacios, las sangrías (indentación) y las llaves para que tu código sea legible y profesional.
3. ❖ Para escribir código HTML y CSS a la velocidad de la luz Auto Rename Tag (de Jun Han). ¿Qué hace? Si cambias una etiqueta de apertura en HTML (por ejemplo, de <div> a <section>), esta extensión cambia automáticamente la etiqueta de cierre </div> por ti, escribiendo </section> en el cierre, evitando errores tipográficos comunes.
4. ❖ Para ver tus cambios en tiempo real dentro de Visual Studio Code Live Preview (de Microsoft). ¿Qué hace? Es igual que Live Server, pero usa el navegador de Visual Studio Code.

¿Cómo instalo las extensiones?

Para descargar y buscar extensiones en Visual Studio Code, debes usar el Menú de Extensiones que ya viene integrado dentro del propio programa.

Sigue estos pasos directos:

1. ❖ ¿Dónde ir? (El botón de Extensiones) Mira la barra lateral izquierda de VS Code (donde están todos los iconos).Haz clic en el icono que parece cuatro bloques cuadrados (el cuadrado superior derecho está despegado).Atajo de teclado: Puedes presionar Ctrl + Shift + X (en Windows) o Cmd + Shift + X (en Mac) para abrirlo al instante.
2. ❖ ¿Cómo buscarlas e instalarlas?. En la parte superior de esa barra lateral, verás una barra de búsqueda que dice “Search Extensions in Marketplace”.Escribe el nombre de la extensión que necesitas (por ejemplo: Live Server o Prettier).Haz clic sobre la extensión correcta en la lista de resultados. Presiona el botón verde que dice “Install”. ¡Listo! El botón cambiará a un engranaje de configuración, lo que significa que la extensión ya está activa y funcionando en tu editor.

Primer documento HTML

Para escribir tu primer archivo HTML en Visual Studio Code, debes seguir estos pasos para crear tu carpeta de trabajo y estructurar tu código:

Crear tu carpeta de proyecto.

❖ 1-Crea una carpeta nueva en tu computadora (por ejemplo, en el Escritorio, o donde te quede mejor) y ponle un nombre, por ejemplo mi-primer-proyecto.

❖ 2-Abre Visual Studio Code. Ve al menú superior, haz clic en Archivo (File) -> Abrir carpeta (Open Folder) y selecciona la carpeta que acabas de crear.

Crear tu archivo HTML.

❖ 3-En el panel izquierdo de VS Code (el explorador de archivos), haz clic en el icono de la hoja con un signo más (New File). O también puedes ir al menú superior y en File elegir New File (nuevo archivo). Nómbralo exactamente index.html y presiona Enter. (Es obligatorio usar .html al final para que el programa sepa que es una web). La extensión debe ser si o sí .html, el nombre index puede variar, pero para subirlo a un servidor debe llamarse index.html el primer documento por el que se inicia un sitio web. Por ello lo llamaremos así.

Escribir el código.

No hace falta que escribas toda la estructura de la web a mano. VS Code lo hace por vos:

En la primera línea del archivo vacío, escribe un signo de exclamación: ! y presiona la tecla Enter o Tab. Verás cómo aparece automáticamente toda la estructura básica de una página web.

Comenzamos

Dentro del bloque <body>, escribe un primer título. Debería quedar algo así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Web</title>
</head>
<body>

    <h1>¡Primer paso al mundo!</h1>
    <p>Este es mi primer párrafo en texto plano.</p>

</body>
</html>

Para visualizar el documento, se entra por el explorador de archivos y se hace doble click en el index.html. Aparecerá en el navegador web que nuestra computadora tenga por defecto.

En el curso de HTML-CSS , en el ejercicio presentación se desarrolla con detenimiento el primer documento HTML de este curso.

Se puede continuar con el teórico o ir directamente al desarrollo de un documento HTML, presionando en HTML-CSS del menú superior.