Introducción al desarrollo web: ¿cómo funciona la web?

A la hora de introducirnos al desarrollo web, lo primero que deberíamos saber es cómo funciona la web. Este curso de introducción a HTML contiene nociones básicas, así que no voy a entrar en detalles complejos. Me esforzaré por ofrecerte información útil y sencilla, además de fuentes a través de las cuales podrás ampliar información.

Mi intención es que en pocas semanas seas capaz de hacer tus propias páginas web. En el caso de que utilices WordPress, Joomla o cualquier otro editor de contenidos, serás capaz de entender cómo funcionan sus aspectos básicos, e incluso hacer pequeñas reparaciones.

Pero, lo más importante de todo, cuando termines el curso tendrás las nociones necesarias para empezar a profundizar. Te ofreceré otros recursos formativos para que puedas especializarte, o bien aprender más detalles de otras tecnologías.

Por tanto, el alcance de este curso se centra en HTML, CSS y JavaScript. Estos son los tres lenguajes básicos de la web. Al terminar tendrás un conocimiento básico de los tres lenguajes, y bastante solvencia en HTML.

En cualquier caso, también vamos a ver otros temas de interés, como git, prácticas recomendadas o la configuración de nuestro entorno de desarrollo. No hace tanto, yo también estaba empezando, y quiero facilitarte el camino que he recorrido tratando de evitarte los errores que cometí o las vueltas innecesarias que di.

Nociones básicas: cómo funciona la web

En su nivel más básico, una página web no es más que un documento escrito en HTML almacenado en un servidor. Este servidor tiene una IP, que es una dirección que permite a otros servicios (como nuestro navegador) localizarlo. Cuando, desde tu navegador, te diriges a esa IP y le pides al servidor que te entregue la página web, lo que haces es descargarte ese archivo HTML.

Sobre esta cuestión vamos a volver recurrentemente, porque esto es un resumen muy, muy básico. De momento te basta con entender que al conectarte a Internet, realizas peticiones a servidores remotos a través de su IP, y que estos te contestan enviándote información (en este caso, un archivo HTML.

Si quieres una visión rápida pero en mayor detalle, te recomiendo ver el siguiente vídeo. De todos modos, las nociones comentadas en él exceden nuestras necesidades en estos momentos:

Espera… ¿Demasiado rápido? Vamos a explicar estos conceptos

Cuando entras en tu navegador para visitar una página en Internet, estableces una comunicación. Una comunicación entre tu navegador y el servidor donde se hospeda la web que buscas. De modo que hasta ahora tenemos:

1. Tu ordenador, que está ejecutando un navegador. El navegador no es más que un programa que solicita información a un servidor y posteriormente interpreta el código que este le devuelve. El código que el servidor enviará al navegador estará escrito, fundamentalmente, en HTML, CSS y JS.
   No todos los navegadores funcionan igual, por lo que podemos encontrarnos con problemas de compatibilidad. Pero sobre esta cuestión volveremos al introducirnos en CSS.
   Llamamos a tu ordenador “cliente”, y al código que se ejecuta en el lado del cliente “frontend”.
2. El servidor, que hospeda los archivos que componen la web. Estos son los archivos que enviará a tu navegador, quien posteriormente los interpretará para componer la página que estás visitando.

Pero, ¿cómo se establece esta comunicación o conexión entre tu navegador y el servidor remoto?

El protocolo HTTP

Cuando navegamos en Internet lo hacemos utilizando un protocolo de comunicación conocido como HTTP (Hypertext Transfer Protocol o protocolo de transferencia de hipertexto). De momento no hace falta que profundices en esto, pero lo necesitamos para entender qué es y cómo funciona una URL.

URL son las siglas de Uniform Resource Locator. Se trata de la ruta que utilizamos para acceder a un recurso único a través de Internet. Es decir, da igual qué navegador estemos usando. Si le pedimos que acceda a una URL, siempre llegaremos al mismo conjunto de archivos.

Generalmente (aunque no siempre), una URL comienza con el protocolo que estamos utilizando para establecer la comunicación. Si accedemos a una página web, este protocolo será HTTP. Lo habrás visto al inicio de URLs, de esta forma: http:// aunque normalmente no hace falta escribirlo porque será el propio navegador quien lo incluya por defecto.

También es posible que hayas visto su versión segura, https://. HTTPS es una variación del protocolo HTTP (HTTP sobre Secure Sockets Layer o SSL). De momento basta con saber que se trata de un protocolo más seguro y que, por tanto, es el que más se utiliza ahora mismo. Para utilizar el protocolo HTTPS necesitaremos utilizar un certificado SSL, pero esto son demasiados conceptos técnicos para el momento y todavía no necesitas dominarlos. Ya profundizaremos al explicar cómo publicar una página web.

Dominios y direcciones IP

Bien, ahora sabemos que la comunicación entre cliente y servidor se establece utilizando el protocolo HTTP. Puede que esto todavía no te diga nada, pero irá cobrando sentido poco a poco, especialmente cuando publiquemos nuestro primer proyecto o empecemos a escribir código en el lado del servidor.

También sabemos que el protocolo es el primer componente de una URL. El siguiente componente es el anfitrión. Es decir, el servidor o host. Cuando trabajamos en local podemos llamar a nuestro ordenador localhost, de modo que http://localhost será la dirección que hace referencia a nuestro propio ordenador.

Pero lo cierto es que la forma de apuntar a un servidor o host que no sea nuestro propio equipo es utilizando una dirección IP. Las direcciones IP (Internet Protocol) son direcciones únicas, que apuntan de forma lógica  jerárquica a interfaces dentro de una red. Pero no te compliques, de momento quédate con que son direcciones únicas que nos permiten ubicar, por ejemplo, dispositivos.

Ahora bien, las IP son poco “human-friendly”. Se trata de una combinación de números, por ejemplo, 192.010.1. ¿Te imaginas tener que recordar la combinación que corresponde a cada una de las páginas que quieres visitar?

Sería imposible. Y por eso utilizamos lo que conocemos como dominios. El dominio es un alias, una forma amigable de referirnos a una IP determinada. Pero, ¿cómo se relacionan los dominios con las direcciones IP?

Servidores DNS

Lo cierto es que de momento no necesitas conocer todos los detalles técnicos que entran en juego. Te basta con saber que hay servidores públicos, conocidos como DNS (Domain Name Servers) que tienen una lista con todos los dominios registrados y las direcciones IP a las que apuntan.

De modo que, si en vez de dirigirnos a una IP del tipo 192.0.10.1 nos dirigimos a un dominio del tipo adriangarzon.lexterna.es, nuestro navegador consultará con los DNS a qué dirección IP está asociado ese dominio. El servidor le devolverá la IP y entonces podremos dirigir nuestra petición a la dirección correcta.

Definimos esta dirección mediante la URL, que como ya sabemos se compone de:

• Protocolo. Normalmente http o https.
• Servidor o host. Que, como acabamos de ver, podemos sustituir por un alias o dominio para que sea más fácil recordarlo.
• Puerto (opcional). Normalmente no utilizaremos este parámetro, así que te lo explico más adelante. Por defecto, para el protocolo http utilizamos 80, pero al ser un valor por defecto no hace falta que lo escribamos. Es el propio servidor quien indica a qué puertos de puede acceder y en qué condiciones.
• Ruta. Se trata de la ubicación del recurso dentro del servidor. Por ejemplo, la ruta “/” hará referencia a la carpeta raíz. A su vez, “/contacta” hará referencia a una carpeta llamada “contacta” que se encuentra en la carpeta raíz. Y “/contacta/imagen.jpg” hará referencia a un archivo llamado “imagen.jpg” ubicado en la carpeta “contacta”, que a su vez se ubica en la carpeta raíz.
• Cadena de búsqueda o query (también opcional). Dado que es opcional, dejaremos esta pieza para cuando empecemos a trabajar con formularios.

Sobre las URL y rutas profundizaremos al tratar el sistema de archivos (file system). De momento nos basta con conocer su composición, que resultará en algo así como:

https://adriangarzon.lexterna.es/contacta

¿Y qué pasa con el ‘www’?

Habrás visto que muchas páginas empiezan por ‘www’. Estas siglas provienen de “World Wide Web”, y conforman un subdominio. Un subdominio viene a ser un dominio dentro de otro dominio.

Por ejemplo, si soy titular del dominio ejemplo.com, puedo crear un subdominio mail.ejemplo.com para hospedar mis servicios de correo electrónico. O blog.ejemplo.com para hospedar mi blog.

Hasta que no lleguemos a la parte en que estudiemos la publicación de páginas web no vamos a trabajar con subdominios. Así que de momento no es necesario que conozcas nada más de ellos. Simplemente, se trata de otro nombre con el cual apuntar a una dirección IP, e incluso a una carpeta dentro de esa dirección IP.

Tradicionalmente, se han hospedado las páginas web en el subdominio www. para separarlas de otros servicios. Pero esto no solo no es necesario, sino que cada vez es menos frecuente.

Peticiones y respuestas (requests and responses)

Vale, ya sabemos que cuando entramos en una web, nuestro ordenador (cliente) se conecta a un servidor por medio del protocolo HTTP. También sabemos que, al establecer la conexión, solicita los recursos ubicados en una ruta determinada, que señalamos por medio de la URL. A esta solicitud la llamamos petición (request).

El servidor recibirá nuestra petición, ejecutará la lógica que sea necesaria para gestionarla y nos devolverá una respuesta (response). En su nivel más básico, esta respuesta consiste en un documento HTML, que contendrá las instrucciones que necesita nuestro navegador para renderizar la página web o aplicación que estamos visitando.

Por tanto, nos encontramos con dos partes en la comunicación que, a su vez, utilizan dos tipos diferentes de código:

• El cliente, o nuestro navegador, que realiza la petición y recibe la respuesta. La respuesta no son más que instrucciones de renderizado, escritas generalmente en HTML, CSS y JavaScript. Llamamos a esta parte “frontend”.
• Y el servidor, que recibe la petición, ejecuta la lógica necesaria para gestionarla y devuelve una respuesta. Esta lógica está escrita en lo que llamamos lenguajes de programación (por oposición a los de marcado o scripting como HTML y CSS), como pueden ser PHP, Pyton, .NET o, como veremos más adelante, JavaScript (en concreto, mediante Node.js). Llamamos a esta parte “backend”.

Nótese que las respuestas del servidor no siempre tienen contenido. Lo que sí tienen imprescindiblemente es un código. Y, aunque entraremos en detalle en los códigos HTTP, seguro que te suenan los códigos de error 404 (recurso no encontrado) o 500 (error en el servidor).

Resumen: el ciclo de vida de las peticiones y respuestas

En resumen, el funcionamiento de Internet es el siguiente:

1. El cliente hace una petición a un servidor, a través de una URL.
2. La petición llega primero a los servidores DNS, que resuelven la IP a la que se dirige la petición a partir del dominio indicado en la URL.
3. El cliente envía su petición a la dirección IP indicada por los DNS.
4. Una vez recibida, el servidor gestiona la petición y devuelve la correspondiente respuesta, que es un paquete de código con instrucciones para el navegador.
5. El navegador interpreta el código recibido y renderiza la página web. De hecho, primero renderiza HTML y CSS y luego ejecuta JavaScript. Y digo “ejecuta” porque JavaScript sí es un lenguaje de programación.

Si insisto tanto en esta cuestión es porque comprenderla adecuadamente va a ser fundamental para el progreso de tus habilidades de desarrollo. Pronto verás la importancia de conocer cómo funciona Internet.

¿Qué es HTML?

HTML son las siglas de Hyper Text Markup Language. Se trata de un lenguaje de marcado que nos permite estructurar un documento.

La primera noción que debemos retener al estudiar HTML es precisamente la de estructura o contenido. Cuando uno se inicia en el desarrollo web y estudia por primera vez HTML puede pensar que este lenguaje también tiene funciones estéticas. Pero, como veremos, de la parte estética se va a encargar otro lenguaje, que es CSS.

Volviendo a la definición de HTML, podemos destacar:

• Que, como hemos dicho, es el lenguaje que estructura y aporta contenido a una página web. Es decir, nos indicará cuáles son los elementos que integran el documento (títulos, párrafos, botones, listas…). Además, nos permitirá hacer referencias a otros documentos que queremos que se muestren dentro de nuestra página web, como fotografías o scripts.
• Que, como su nombre indica, se trata de un lenguaje de marcado. Es decir, nos permite decirle al navegador: “esto es un párrafo”. O “esto es un enlace”. Para ello utilizamos una serie de etiquetas.
  Cuando alguien empieza a estudiar HTML es normal que se abrume por la cantidad de etiquetas que se utilizan. Pero no te preocupes: en seguida aprenderás las etiquetas más comunes, y cuando tengas que utilizar otras más complejas podrás recurrir a documentación. Una de las habilidades básicas a la hora de desarrollar aplicaciones es saber cómo encontrar los recursos que necesitas, y en este curso voy a enseñarte a hacerlo. No tienes por qué memorizarlo todo.

¿Cómo es HTML?

Como digo, HTML es un conjunto de etiquetas, que le dirán al navegador qué es exactamente cada pieza del contenido que hayas insertado en tu web. Por ejemplo, si quiero escribir un párrafo lo haré del siguiente modo:

<p>Esto es un párrafo.</p>

Como ves, hemos delimitado nuestro párrafo con dos etiquetas.

• La primera simplemente incluye la denominación de la etiqueta (en este caso “p” de “paragraph”, es decir, de “párrafo”), mientras que la segunda repite esta denominación pero le añade antes una barra.
• Al insertar la etiqueta <p> le estamos diciendo al navegador: “a partir de esta etiqueta, lo que viene es un párrafo”. Por tanto, el navegador entenderá como un párrafo todo el contenido que siga, hasta llegar a la etiqueta de cierre (en este caso, </p>).
• Al conjunto formado por una etiqueta de apertura, un contenido y una etiqueta de cierre lo llamamos elemento. Por tanto, “<p>Esto es un párrafo</p>” es un elemento HTML.

HTML es un lenguaje peculiar y permisivo. Los navegadores son lo suficientemente inteligentes como para perdonarnos algunos errores gramaticales (como olvidar la etiqueta de cierre en algunas ocasiones). Pero si queremos seguir buenas prácticas no podemos olvidar abrir y cerrar los elementos HTML en cada caso.

Pese a ello, quiero anticipar:

• Que existen elementos HTML que no tienen un contenido. Los veremos pronto, de momento basta con quedarse con la noción de que un elemento HTML se compone de una etiqueta de apertura, un contenido, y una etiqueta de cierre.
• Que los elementos HTML pueden tener atributos, que dan más información sobre cómo debe interpretarlos el navegador. También los veremos pronto, pero quedémonos ahora con esta noción inicial.

¿En qué consiste el desarrollo web?

El desarrollo web no es más que la redacción de las instrucciones que necesita el navegador para generar una web o aplicación funcional. Para ello utilizamos diferentes lenguajes, siendo los fundamentales HTML, CSS y JS. Y cada uno de estos lenguajes tiene sus propias reglas sintácticas.

Pese a ello, no es necesario memorizar todo lo relativo al lenguaje que estemos utilizando. Es más, es prácticamente imposible conocer todas sus características y atributos de memoria.

Lo que sí debes hacer es familiarizarte con el lenguaje y con los principios de programación, así como con la búsqueda de documentación y de información. Ten en cuenta que la programación es un campo eminentemente colaborativo.

Precisamente por ello, dentro de este curso estudiaremos herramientas como Git y GitHub. Apoyarnos en el trabajo de otros compañeros nos permite llegar más lejos. De hecho, una de las claves del desarrollo es no reinventar la rueda: cualquier problema que se te presente, le habrá aparecido a otras personas antes que a ti.

Busca en Stack Overflow los consejos de otras personas que ya hayan tenido tus necesidades. O investiga los repositorios de código abierto para encontrar herramientas que te ayuden a resolver tus problemas.

A lo largo de este curso aprenderás a utilizar todas estas herramientas. Porque, al final, para aprender a programar solo necesitas un navegador y un editor de texto. Aunque veremos herramientas mucho más útiles, debes recordar que aprender a programar no es difícil. Se basa, sobre todo, en encontrar retos y practicar.

Último concepto de la lección: stack

Antes de cerrar, y aprovechando que hablamos de qué es el desarrollo web, quiero lanzar una última noción, que es el stack:

• Llamamos stack al conjunto de herramientas que utilizamos para desarrollar una solución tecnológica. Por ejemplo, MERN viene de MongoDB, Express.js, React.js y Node.js.
• Los desarrolladores que se centran en el código ejecutado en el cliente (HTML, CSS, JS y sus librerías y frameworks -ya explicaremos más sobre estos conceptos, pero de momento los puedes considerar como “extensiones”-) se denominan frontend.
• Aquellos que se centran en el código ejecutado en el servidor (PHP, Node.js, Python, Go, .NET, Java…) se denominan backend.
• Los que tocan un poco de ambos campos se denominan fullstack.

Al final del curso entenderás perfectamente las diferencias entre unos y otros roles.

¡Hagamos nuestra primera (e incorrecta) página web!

Al final de cada una de las lecciones vamos a hacer una práctica para poner en juego lo aprendido. En esta ocasión, haremos nuestra primera página web. Como aprenderás muy pronto, a esta página web le van a faltar muchas piezas. Pero bastará para ilustrar lo que hemos visto.

Aprendiendo informática, es costumbre que el primer programa que escribamos sea un “hello, world”. Una práctica que seguiremos a continuación con un sencillísimo ejercicio. Tan solo sigue los siguientes pasos:

1. Abre el editor de texto que venga con tu sistema operativo (por ejemplo, en Windows es el “bloc de notas”).
2. Ahora, en un archivo nuevo, escribe “<p>hello, world!</p>”.
3. Guarda el archivo como “hello.html”. La terminación normal del archivo debería ser .txt, pero asegúrate de que es .html para que el navegador pueda abrirlo.
4. Ahora ábrelo con tu navegador. Lo más probable es que el propio sistema detecte que se trata de un archivo .html y te proponga abrirlo con el navegador, pero si no fuera así puedes seleccionar el programa con el que quieras abrirlo.
5. En la pantalla de tu navegador aparecerá el mensaje “hello, world!”. No es muy fascinante, pero acabas de hacer tu primera página web.

[codepen_embed height="300" default_tab="css,result" slug_hash="NWyReyX" preview="true" editable="true" user="agarzon48"]See the Pen
Hello World 1.0 by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]

Profundizando: editando nuestra primera página web

Antes de pasar al siguiente tema vamos a hacer una segunda práctica:

1. Vuelve a abrir tu documento hello.html, o bien crea uno nuevo.
2. Ahora sustituye <p> por <h1> y </p> por </h1>. El resultado debería ser “<h1>hello, world!</h1>”.
3. Vuelve a guardarlo y a abrirlo con tu navegador.
4. ¿Ves la diferencia? Si todo ha ido bien, el texto será más grande que antes. Acabas de utilizar tu segunda etiqueta HTML: la correspondiente a los títulos. ¡Pero recuerda! HTML define contenido, no estilos.

[codepen_embed height="300" default_tab="css,result" slug_hash="dydpwmG" preview="true" editable="true" user="agarzon48"]See the Pen
Hello, world, 1.1 by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]

Glosario

• HTML
• IP
• CSS
• Cliente
• Frontend
• Servidor
• Backend
• Fullstack
• Stack
• HTTP
• HTTPS
• IP
• DNS

Fuentes de interés

• Qué es HTML (wikipedia)