MITHA

Cuando tenía alrededor de 12 años recuerdo haber hecho mi primer sitio web usando HTML y CSS, en esos tiempos no había tantos youtubers de desarrollo web; hoy por suerte tenemos muy buenos canales como TodoCode, Midudev o Fatz que están comprometidos con la divulgación y educación gratuita, además de llevar un tiempo haciendo contenido y tener un amplio catálogo de temas publicados. Pero cuando comencé aún estaban empezando a hacer contenido y FalconMasters fue el que tenía completo su pequeño curso acerca de HTML y CSS. Gracias a sus videos fue que logré hacer mi sitio web, una página estática acerca de una cafetería: Binary Coffee, aclaremos que nunca la publiqué, si buscan el nombre y sale alguna página, no es mía. Pero había un pequeño detalle, cuando iba de la página principal a la página de artículos las imágenes no cargaban, la url terminaba con un “.html” y lo más importante, estaba en mi computadora, pero no sabía cómo subirla a un sitio web. Son preguntas que hoy en día, luego de haber pasado una carrera donde enseñan redes, arquitectura de computadoras y bases de datos, me parecen simples; pero para un niño de 12 años son igual o más profundas que el universo mismo. Por eso, en este pequeño artículo trataré de explicarle a mi pequeño yo ¿Cómo crean los sitios en internet?

¿Cómo se crea lo que vemos en internet?

Empecemos con el frontend

A muchos les encanta empezar con la historia de internet, pero es algo demasiado antiguo y seguro que muchos de los que lean esto quieran en algún momento hacer algo propio, pero ni siquiera saben qué tecnología usar.

Bueno, en una respuesta corta, las páginas se hacen con 2 “lenguajes” de programación: HTML y CSS. Por un lado HTML se encarga de definir las partes del sitio web; si tiene un menu, si tiene una imagen, párrafos, pie de página, etc. Es el que arma el esqueleto del sitio. Luego tenemos CSS que podríamos decir que es el diseñador de interiores; se encarga de cambiar los colores, dar estilos y en general hacer que el sitio no parezca vómito de bebé. A esto se le conoce como frontend. Todas las páginas funcionan con estos dos, pero hay un tercer miembro en la ecuación que permite agregar funciones: JS o ECMAScript. Este es un lenguaje de programación propiamente dicho a diferencia de los anteriores. Se encarga de que si presionas algo ocurra… algo, valga la redundancia. Estos 3 son los que forman todos los sitios de internet.

Pero no todo es color de rosas, si alguna vez hiciste alguna página web podrás estar de acuerdo que trabajar solo con HTML, CSS y JS puede llegar a ser un dolor de huevos. Es en ese punto donde aparecen los frameworks que es una palabra bonita para decir “herramientas para que no te quieras tirar de un puente cada vez que haces una página web enorme”… mucho mejor, ¿no? Entre estos frameworks tenemos herramientas como React, Laravel, Vue, Astro, etc. Cada uno de ellos tiene un enfoque; Astro por ejemplo está diseñado para hacer cosas más estáticas, mientras que React permite hacer miles de compoonentes, hacer diseño para móviles, etc. Sin mencionar que también existen frameworks para CSS como bootstrap o mi favorito, tailwind.

¿Backend?

Lo anterior que te he contado son las herramientas para hacer lo que el usuario mira, pero eso no es todo, también existe algo llamado backend que se encarga de la lógica de programación; guardar imágenes, hacer inicio de sesión, guardar datos, traer datos, etc.

Un pequeño ejemplo lo podemos ver con proyecto-mitha.org: cuando tu entras al sitio te encuentras con los artículos nuevos, proyectos y lo que sea que publiquemos en el futuro, pero cuando uno de nuestros autores quiere publicar algo necesitamos guardarlo en alguna parte (en una base de datos para este caso). Ese proceso de guardado lo realiza el backend.

Para este proceso puedes usar muchos lenguajes como PHP, Python usando Django o Flask, puedes usar Node.js, C# usando .net o incluso Java usando Spring. Los que te acabo de mencionar son algunos lenguajes con sus respectivos frameworks. En mi experiencia, si te estás planteando empezar con alguno quizá te guste Python usando Flask. Al final de este artículo te dejaré algunos links a tutoriales de Youtube donde puedes aprender las bases.

Ya tengo todo hecho. ¿Cómo subo mi sitio web?

La pregunta del millon y lastimosamente no hay solo una respuesta. En resumen puedes ir por 3 caminos diferentes: Usar un VPS, usar un Host compartido o ser un completo psicópata y crear tu propio servidor web con un centro de cálculo. Veamos cada una paso a paso.

Host compartido

Imagina que tienes hambre y que quieres comprarte una pizza, pero te das cuenta que solo quieres un pedazo y que el resto va a sobrar. Pues si tienes amigos puedes llamarlos para que cada uno se coma solo un pedazo. Esa es la idea del host compartido: Cuando tu sitio web no necesita mucha capacidad de cómputo, o si el backend no es tan complejo o usas un estándar como WordPress, puedes optar por esta opción, tiene las ventajas de ser sencillo y barato, pero al estar compartiendo una misma “pizza“ (en este caso sería una computadora) no tienes tanta libertad para hacer lo que quieras.

VPS: Virtual Private Server

Siguiendo con el ejemplo de la pizza, los VPS son una pizza completa. Es como alquilar una computadora (los servidores son computadoras) y le instalas todas las herramientas necesarias para el sitio web. Debes instalar una base de datos (si la usas), el backend y el frontend. Este proceso se suele realizar usando una tecnología llamada “contenedores” la cual te permite subir tu sitio en porciones que se conectan entre sí. Además de facilitar la tarea. Las herramientas de contenedores más usadas actualmente son Docker y Kubernetes. Y por si te lo preguntas, sí, la computadora que alquilas tiene un sistema operatico como cualquier otra, este sistema puede ser Windows, Linux o Mac. Pero seamos realistas, yo no tocaría ni con un palo un vps que no tuviese Linux.

Servidores propios y centros de cálculo

Por último, tenemos la opción empresarial… o la opción de las personas que tienen mucho tiempo libre. Seguro que si te digo servidores web te viene a la mente grandes edificios con muchas máquinas dentro, como los servidores de Google o Amazon. Pues es correcto, pero también puedes crear tu propio servidor en casa, solo necesitas una computadora que esté conectada los 365 días del año las 24 horas… o que esté conectada el tiempo que quieras. Ah, y que tenga internet, eso es importante.

Cuando Creas tu propio servidor te enfrentas a cosas como el sobrecalentamiento, el consumo de energía y la seguridad, porque sí, mi pequeño saltamontes. Aunque en todas las opciones anteriores te pueden hackear y tumbarte el sitio web, aquí es muy fácil si no sabes qué estás haciendo. Basta con no tener el sistema operativo actualizado, o no haber colocado los cors (permisos para que la gente u otros sitios se conecten a tu página) correctamente para que Paquito el del barrio se meta a tu sistema y borre todo.

Y cuando tengo mi servidor. ¿Cómo se conectan las personas?

En este punto necesitamos entender un poco acerca de redes y de telecomunicación.

Cuando tú abres el navegador y buscas algo lo que haces primero es abrir una aplicación llamada navegador. Existen varios como Chrome, Edge, Firefox, Safari, Opera, etc. Cada uno de ellos es el “visualizador de internet”; son aplicaciones que interpretan el HTML, CSS y Js, y te los muestran en pantalla. Dentro de estos navegadores está el buscador, que es un programa que consulta en los servidores de todo el mundo el contenido que quieres ver: si escribes “gatitos” el buscador consulta los sitios web que están relacionados con gatitos.

No te equivoques, el buscador no se ejecuta en tu computadora, lo que hace es decirle al servidor del buscador “¡Hey! quiero algo que tenga que ver con gatitos” y luego el backend del servidor envia los enlaces que quieres.

Luego, al hacer click en un enlace, o al buscar una url en específico, lo que hace el buscador es ir a un lugar llamado DNS. Los DNS son directorios telefónicos que indican en donde se encuentra el sitio web que quieres visitar.

imagen de: Estructura y arquitecura de software

Por ejemplo, al buscar “https://proyecto-mitha.org” el buscador le pregunta al DNS “¿Donde está la computadora que tiene el sitio web ‘proyecto-mitha.org’?”, este le devuelve la dirección ip que es como la dirección donde se encuentra la computadora. Cuando el navegador obtiene esa dirección ip, va hacia la computadora del sitio web y le pide al backend que le envie los datos del frontend, es decir, pide el HTML. Y al tener el HTML del sitio el último paso es mostrarlo en pantalla.

Si eres observador te darás cuenta de que entonces las direcciones web como proyecto-mitha.org, google.com, youtube.com o cualquier otro nombre de sitio web, están almacenados en el DNS. Así que si lo que tú quieres es usar un nombre en específico para tu sitio, necesitas alquilar un dominio web, un DNS. Y en esto existen varias alternativas como Cloudflare, Porkbun, DonDominio, etc. Con la experiencia de haber creado este sitio web, te sugiero Clouflare o Porkbun. Ambos tienen buenos precios y son sencillos de usar.

Este artículo resultó ser más largo de lo que pensé, pero creo que mi yo de 12 años estaría satisfecho. Y si tu idea era aprender cómo hacer un sitio, pero en algún punto te perdiste, tranquilo. Todo lo que te he contado es el resultado de varios años de estudio y una visión fullstack. Cuando tu empiezas a aprender es mejor concentrarte en una sola área: frontend, backend o el comportamiento de las redes.

¿Cuál es la mejor? Ninguna es mejor que otra, depende de qué es lo que quieres hacer. A continuación, te dejo los links a algunos tutoriales para las diferentes ramas del desarrollo web donde podras ver una introducción a lo que te interese. Todos los links son recomendaciones propias.

Enlaces y referencias

Si quieres aprender de redes necesitas estos conceptos

Si quieres subir tu sitio web

Si quieres aprender un poco de bases de datos

Recuerda, todos estos links son introductorios. Ninguno te hará un experto en una o dos horas. Necesitas practicar todo lo que aprendas y mi sugerencia es que intentes hacer algún proyecto pequeño. La comunidad de TodoCode o de Midudev tienen muchos proyectos y retos abiertos que te pueden interesar.

¿Cómo se crean los sitios en internet?