3.1 ¿Qué es el Desarrollo Web?¶

Introducción al Desarrollo Web¶

El desarrollo web es el proceso de crear y mantener sitios web. A lo largo de este proceso, se involucran varias tecnologías y prácticas, y es esencial comprender cómo las aplicaciones web están estructuradas. En este módulo, exploraremos los diferentes tipos de desarrollo web y su evolución.

¿Qué es el Desarrollo Web?¶

El desarrollo web se divide principalmente en dos áreas clave: Frontend y Backend.

Frontend vs Backend¶

Frontend: Se refiere a la parte de la web con la que los usuarios interactúan directamente. Incluye todo lo que se ve en la pantalla: los colores, las imágenes, los textos, los botones, etc. El frontend está asociado con las tecnologías como HTML, CSS, JavaScript y sus frameworks como React, Vue.js, Angular, entre otros.
Backend: Es la parte del desarrollo que se ejecuta en el servidor. Es responsable de procesar y almacenar datos, gestionar la lógica de negocio, autenticar usuarios y, en general, proporcionar los servicios necesarios al frontend. En el backend se utilizan lenguajes y frameworks como Python (Django, Flask), Ruby (Ruby on Rails), PHP, Node.js, entre otros.

Recuerda

El frontend es todo lo que ves y con lo que interactúas en tu navegador, mientras que el backend es el conjunto de procesos que ocurren detrás de escena para hacer funcionar el sitio web.

¿Cómo funcionan las aplicaciones web?¶

Las aplicaciones web funcionan bajo un modelo cliente-servidor. Esto significa que hay dos partes involucradas en el proceso: el cliente (quien hace la solicitud) y el servidor (quien responde con la información solicitada).

Petición y Respuesta

El cliente hace una petición HTTP al servidor, solicitando información o acción específica.
El servidor procesa la petición, realiza la acción necesaria (por ejemplo, acceder a una base de datos, realizar un cálculo, etc.) y devuelve una respuesta HTTP con los datos requeridos.

Ejemplo de petición y respuesta: 1. Un usuario abre su navegador y escribe una URL (por ejemplo, www.ejemplo.com). 2. El navegador (cliente) envía una petición HTTP al servidor que aloja el sitio web. 3. El servidor recibe la petición, procesa la solicitud y envía de vuelta una respuesta con el contenido de la página web. 4. El navegador recibe la respuesta y muestra la página al usuario.

Para todo esto se implica el protocolo HTTP (HyperText Transfer Protocol), que es el protocolo estándar para la comunicación en la web. Si vemos un ejemplo de petición HTTP (behind the scenes):

GET /index.html HTTP/1.1
Host: www.ejemplo.com

Y la respuesta del servidor podría ser algo así:

HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head>
    <title>Ejemplo</title>
</head>
<body>
    <h1>Bienvenido a Ejemplo.com</h1>
</body>
</html>

En resumen, una aplicación web funciona mediante la comunicación entre el cliente y el servidor, que se lleva a cabo utilizando peticiones HTTP.

Modelo Vista Controlador (MVC)¶

El protocolo HTTP no se creó para aplicaciones web complejas, por lo que se desarrollaron patrones de diseño para organizar el código y facilitar el desarrollo. Uno de los patrones más comunes es el Modelo Vista Controlador (MVC).

Definición de MVC

El Modelo Vista Controlador (MVC) es un patrón de diseño arquitectónico que se utiliza ampliamente en el desarrollo web. Este modelo divide una aplicación web en tres componentes principales:

Modelo (Model): Representa la lógica de negocio y los datos de la aplicación. El modelo se encarga de gestionar los datos, como acceder a una base de datos o realizar cálculos.
Vista (View): Es la parte de la aplicación que se muestra al usuario. Es la interfaz visual, que se comunica con el modelo para mostrar los datos.
Controlador (Controller): Actúa como intermediario entre el modelo y la vista. El controlador recibe las peticiones del usuario, maneja la lógica necesaria y actualiza la vista o el modelo según corresponda.

"¿Por qué es importante MVC?"¶

El patrón MVC organiza el código de una aplicación web, separando las responsabilidades y funcionalidades, lo que facilita el mantenimiento, la escalabilidad y la colaboración en equipo. Cada capa tiene una función bien definida.

Modleo MVT¶

En Django, se utiliza una variante del patrón MVC llamada MVT (Model-View-Template), que es similar pero con algunas diferencias en la terminología:

Model: Igual que en MVC, gestiona los datos y la lógica de negocio.
View: En Django, la vista maneja la lógica de negocio y las solicitudes del usuario.
Template: Es la parte que presenta los datos al usuario, similar a la vista en MVC.

Hay que tener en cuenta que, aunque los nombres son diferentes, el concepto subyacente es el mismo: separar las responsabilidades para mejorar la organización del código.

Tipos de Peticiones en el Desarrollo Web¶

En el desarrollo web, las aplicaciones manejan distintos tipos de peticiones HTTP que se utilizan para comunicar al cliente con el servidor. Los tipos de peticiones más comunes son:

GET: Se utiliza para solicitar datos del servidor (como cargar una página web). No modifica el estado del servidor, solo obtiene información.
POST: Se utiliza para enviar datos al servidor (por ejemplo, cuando un usuario llena un formulario en una web). Se puede utilizar para crear nuevos recursos en el servidor. Por ejemplo un nuevo post, un nuevo mensaje, etc.
PUT: Se utiliza para actualizar los datos en el servidor. Es más específico que POST, ya que se espera que el recurso ya exista.
DELETE: Se usa para eliminar recursos en el servidor.

Recuerda

GET: Solicitar datos.
POST: Enviar datos/Crear recursos.
PUT: Actualizar datos/Modificar recursos.
DELETE: Eliminar datos.

¿En qué lado estamos programando?¶

Cuando trabajamos en el desarrollo web, necesitamos saber en qué lado estamos programando. Los roles de cliente y servidor definen cómo se gestionan los datos y cómo se presenta la información:

Programación del lado del cliente (Frontend): Aquí programamos en lenguajes como HTML, CSS y JavaScript. Los navegadores son el "cliente" que hace peticiones al servidor para recibir la información necesaria.
Programación del lado del servidor (Backend): En este caso, programamos con lenguajes como Python, Ruby, PHP, Java o Node.js. El servidor procesa las solicitudes y devuelve la información adecuada.

Conclusión¶

El desarrollo web es un campo multidisciplinario que requiere comprender cómo interactúan las aplicaciones entre el cliente y el servidor. Al aprender sobre el frontend y el backend, así como el patrón MVC, podemos crear aplicaciones web organizadas, mantenibles y escalables. Además, conocer los tipos de peticiones HTTP y cómo se gestionan en el desarrollo web nos ayudará a crear aplicaciones que respondan correctamente a las interacciones de los usuarios.

Recursos adicionales¶

Video explicativo sobre métodos HTTP: Enlace al video

Ejercicios prácticos¶

Ejercicio 1: ¿Qué es una petición HTTP?¶

Explica la diferencia entre los métodos GET y POST. Proporciona un ejemplo de cada uno en el contexto de una aplicación web.

¿Qué es una petición HTTP?

Explica la diferencia entre GET y POST.
Da un ejemplo de cuándo utilizarías cada uno en una aplicación web.

Solución

GET: Se utiliza para obtener datos sin modificarlos. Ejemplo: Solicitar una página de inicio en una web.
POST: Se utiliza para enviar datos que modifican el estado del servidor. Ejemplo: Enviar un formulario con los datos de contacto.

Ejercicio 2: Comprender el Modelo Vista Controlador¶

Haz una lista de las responsabilidades de cada uno de los componentes del patrón MVC. ¿Cómo ayudan a separar las tareas en el desarrollo de una aplicación web?

Explicación de MVC

Enumera las responsabilidades de Modelo, Vista y Controlador en una aplicación web.
Explica cómo este patrón ayuda a organizar el código.

Solución

Modelo: Gestiona los datos y la lógica de negocio (por ejemplo, acceso a la base de datos).
Vista: Muestra los datos al usuario.
Controlador: Intermedia entre la vista y el modelo, gestionando las peticiones del usuario.