¿Qué tecnología utiliza un sitio web?
Un sitio web es un programa de software que corre en una computadora. Está conectado las 24 horas del día a internet, y otros usuarios pueden acceder a él escribiendo una URL específica en su navegador. Por ejemplo, cuando escribís google.com, te estás conectando a otra computadora e interactuando con ella. Podés ver información, ingresar datos y recuperar material específico.
No necesitás entender técnicamente cómo funcionan los sitios web para usarlos. Pero si alguna vez te preguntaste qué hay detrás de escena que los hace funcionar, te conviene seguir leyendo 🙂
Diferentes tipos de sitios web
Internet está lleno de millones de sitios web que cubren diferentes necesidades. El front end se ejecuta en tu navegador local. Es todo lo que ves en un sitio web: todo lo que aparece en tu pantalla.
El tipo más básico de front-end que podés tener es un archivo HTML simple. Este archivo define la estructura del sitio web; determina qué es un título, qué es un párrafo y qué es una imagen. A través de diferentes etiquetas, podés dictar cómo se categoriza cada contenido, y es mediante estas etiquetas que los motores de búsqueda como Google leen el contenido del sitio web para entenderlo y priorizarlo correctamente.
Diferentes tipos de sitios web
Internet está lleno de millones de sitios web que cubren diferentes necesidades.
Sitios Web Estáticos
Los más básicos son sitios informativos con contenido estático.
Son sitios web con los que no podés interactuar; solo leés información y navegás por diferentes páginas.
Sitios web Interactivos
Un sitio web interactivo, por otro lado, es aquel en el que el usuario puede ingresar y recuperar datos dinámicamente. Por ejemplo, Facebook, Amazon, Twitter y la mayoría de los sitios de redes sociales. Podés crear una cuenta, ingresar tus “publicaciones” e interactuar con otros usuarios.
Anatomía de un sitio web
Front-End: programación del lado del cliente
El front end se ejecuta en tu navegador local. Es todo lo que ves en un sitio web: todo lo que aparece en tu pantalla.
El tipo más básico de front-end que podés tener es un archivo HTML simple. Este archivo define la estructura del sitio web; determina qué es un título, qué es un párrafo y qué es una imagen. A través de diferentes etiquetas, podés dictar cómo se categoriza cada contenido, y es mediante estas etiquetas que los motores de búsqueda como Google leen el contenido del sitio web para entenderlo y priorizarlo correctamente.
Un sitio web de HTML simple se vería horrible, sería solo texto sin estilos. Ahí es donde entra en juego el CSS (Hoja de Estilos en Cascada). CSS es lo que usamos para agregar estilos al HTML: determina la fuente y el tamaño de los títulos y textos, define el color de fondo, y organiza el contenido en la página para que se vea estético.
Usando HTML y CSS podés crear un sitio web estático con contenido fijo. Pero la mayoría de los sitios web hoy en día son dinámicos y para eso necesitan un lenguaje de programación adicional: JavaScript.
Si querés ir un paso más allá y crear un sitio web dinámico, podés usar JavaScript (no confundir con JAVA) para agregar funcionalidades extra y permitir que los visitantes interactúen con el sitio. Con JavaScript, un sitio puede ser mejorado con micro-animaciones cuando se hace clic en un botón, pero también permite a los usuarios enviar formularios o crear perfiles y chatear con otros (con la ayuda del back-end o una API, más detalles sobre esto más adelante).
Actualmente, hay un montón de bibliotecas y frameworks de JavaScript: ReactJS, Angular, VueJS, y muchos más. Todos estos se basan en JavaScript y facilitan la vida a los desarrolladores al crear aplicaciones y sitios web front-end.
Back-end: programación del lado del servidor
El back end, por el contrario, es el software que corre en el servidor (una computadora conectada a internet de forma permanente). Combinado con el front end, juntos conforman el sitio web.
Por ejemplo, cada vez que un usuario crea una nueva publicación, los programas del back-end reciben esta solicitud del front end y ejecutan una función para conectarse a la base de datos y guardar esta nueva publicación en ella.
Sin el back end para ejecutar esta función, la publicación solo viviría en el navegador local del usuario y se perdería cada vez que se recarga la página.
Todo esto sucede en un programa que corre en el servidor. Podría ser JavaScript -Node JS está particularmente en tendencia ahora- pero hay muchos otros lenguajes, como PHP, C#, Python o Ruby.
Base de datos: almacenamiento de datos
El back end puede ejecutar funciones y hacer muchas cosas, pero sin una base de datos para almacenar la información, se quedaría corto.
La base de datos es donde se almacena toda la información. Para hacer una analogía, podés pensar en una base de datos como una enorme hoja de cálculo donde almacenás diferentes tipos de información: datos de inicio de sesión, usuarios y contraseñas, publicaciones de blogs o productos de un mercado en línea.
Entonces, cuando iniciás sesión o buscás información sobre un usuario o producto, el back end consigue esos datos de la base de datos y los traslada al front end, que muestra esa información al usuario.
Algunas de las bases de datos más comunes son MySQL, MongoDB y SQL, y también hay enormes bases de datos administradas por Oracle y Microsoft.
Hosting: donde vive el sitio web
Como se mencionó antes, un sitio web es un programa de software que vive en una computadora que está permanentemente conectada a internet. Si el servidor se apaga o pierde la conexión a internet, el sitio web estará fuera de servicio.
En teoría, podés ejecutar un sitio web usando tu computadora de casa. Necesitarás configurar diferentes servicios y asegurarte de que esté ininterrumpidamente conectada a internet y nunca se apague o quede congelada.
Es una tarea complicada y que consume mucho tiempo, por suerte los proveedores de hosting ofrecen servicios que facilitan este proceso. Los proveedores de servicios de hosting tienen enormes almacenes (centros de datos) con toneladas de racks de computadoras que están invariable y permanentemente conectadas a internet. Alquilan estas computadoras a sus clientes, ahorrándoles problemas de energía, actualizaciones, conexiones a internet y similares.
Podés alquilar una parte de una computadora por tan solo USD 3 al mes y ejecutar un sitio web estático sin demasiados problemas. Sin embargo, para sitios web interactivos con millones de usuarios, el precio puede escalar rápidamente y llegar a miles de dólares en poco tiempo. Pero si necesitás pagar mucho por el hosting probablemente estés recibiendo mucho tráfico, y no deberías tener problema en encontrar la manera de monetizar eso ;).
Dependiendo de tus necesidades, tenés diferentes proveedores de hosting. Varían desde los más fáciles de configurar y usar (GoDaddy, BlueHost, HostGator) hasta los más flexibles pero difíciles de usar, como Amazon Web Services (AWS), Google Cloud y Microsoft Azure.
¿Qué otros stacks tecnológicos has escuchado?
Esperamos que esta guía para principiantes te ayude a comenzar a entender cómo funcionan los sitios web. Así, la próxima vez que busques a un amigo en Facebook o un video musical en YouTube, recuerdes las diferentes partes que hacen que tu solicitud se convierta mágicamente en el perfil de tu amigo o en ese increíble video musical.
Hay muchos otros componentes que explican el funcionamiento de los sitios web. ¡Dejanos saber si has escuchado de otros stacks tecnológicos que te gustaría que expliquemos en nuestro próximo post de blog!
Esta entrada de blog se basa en nuestro último podcast – Qué es un sitio web y cómo funciona – Episodio #4. Te invitamos a seguirnos para aprender más sobre este y otros temas 🙂