Diferencia entre revisiones de «Plantilla:TecnologiaDesarrloWeb/ArquitecturaWeb»

De WikiEducator
Saltar a: navegación, buscar
(→‎Los componentes de una aplicación web)
(→‎Componentes principales de una aplicación web)
Línea 47: Línea 47:
 
# '''Lenguajes de programación''' → usados para construir tanto la parte visible (frontend) como la lógica (backend).
 
# '''Lenguajes de programación''' → usados para construir tanto la parte visible (frontend) como la lógica (backend).
  
−
{{Pregunta_MRM|¿Qué diferencia hay entre el cliente (frontend) y el servidor (backend)?}}
+
===Diferencia entre el cliente (frontend) y el servidor (backend)===
 +
; El Frontend (lado del cliente)
 +
*Es la parte visible de la aplicación, con la que el usuario interactúa desde su navegador. 
 +
*Incluye la estructura (HTML), los estilos (CSS) y la interactividad (JavaScript). 
 +
*Ejemplo: el formulario de registro o el botón de “Enviar”.
 +
 
 +
;Backend (lado del servidor)
 +
*Es la parte que no se ve. Se ejecuta en el servidor y se encarga de procesar las peticiones del cliente, acceder a la base de datos y devolver los resultados. 
 +
Ejemplo: el código que guarda los datos del formulario en la base de datos.
 +
}}
 +
 
 +
{{MRM_Puntos clave|
 +
El frontend muestra y recoge información del usuario, 
 +
mientras que el backend la procesa, almacena y devuelve resultados.
 +
}}
 +
 
 +
{| class="wikitable" style="width:100%; text-align:center"
 +
! Aspecto !! Frontend (cliente) !! Backend (servidor)
 +
|-
 +
| Dónde se ejecuta || En el navegador del usuario || En el servidor web
 +
|-
 +
| Lenguajes habituales || HTML, CSS, JavaScript, Vue, React || PHP, Python, Node.js, Java
 +
|-
 +
| Función principal || Mostrar la interfaz y captar datos del usuario || Procesar datos y comunicarse con la base de datos
 +
|-
 +
| Ejemplo práctico || Formulario de contacto en pantalla || Código que guarda el mensaje en una base de datos
 +
|-
 +
| Resultado visible || Sí, el usuario lo ve directamente || No, solo devuelve una respuesta
 +
|}
 +
 
 +
{{MRM_Ejemplo| title=Una metáfora: el restaurante web
 +
;Imagina que una aplicación web funciona como un restaurante:
 +
 
 +
* El **cliente (frontend)** es la '''mesa del comensal''', con todo lo que el usuario ve e interactúa: 
 +
  la carta, los cubiertos, el plato servido, el salero o las vinagreras. 
 +
  Es el lugar donde el usuario decide qué quiere hacer y cómo quiere ajustar su experiencia (por ejemplo, echar más sal o vinagre).
 +
 
 +
* El **servidor (backend)** es la '''cocina del restaurante'''. 
 +
  Allí los cocineros preparan los platos según los pedidos recibidos, mezclan los ingredientes (los datos), y devuelven el resultado terminado al cliente.
 +
 
 +
'''El proceso completo:'''
 +
El comensal (usuario) hace un pedido → el camarero (navegador) lo lleva a la cocina (servidor) → 
 +
los cocineros (código backend) preparan el plato → lo devuelven a la mesa → 
 +
y el cliente puede añadir más sal o vinagre (interacciones frontend).
 +
}}
 +
 
 +
{{MRM_Ejemplo|title=Siguiendo con la metáfora|
 +
*'''''Frontend''''' → la experiencia visible e interactiva (presentación).
 +
 
 +
“El plato, la mesa, los utensilios, el salero y lo que el usuario toca.”
 +
 
 +
*'''''Backend''''' → el trabajo oculto que genera el contenido (lógica y datos).
 +
 
 +
“La cocina donde se preparan los platos según el pedido.”
 +
 
 +
*'''''Base de datos''''' → la despensa donde se guardan los ingredientes.
 +
 
 +
“Lugar donde se almacenan los productos (datos) para cocinar los platos.”
 +
 
 +
*'''''HTTP / navegador''''' → el camarero que lleva y trae la información entre ambos mundos.
 +
 
 +
“Transporta los pedidos (peticiones) y devuelve las respuestas.”
 +
}}
  
 
===Arquitectura de la aplicación===
 
===Arquitectura de la aplicación===

Revisión de 11:39 7 oct 2025

Qué es Arquitectura Web

  • Hay que empezar diciendo que en este campo nuestro objetivo es construir una aplicación que funcione en un entorno web
  • Como toda construcción vamos a tener una forma de hacerlo, y necesitamos herramientas:
  1. Planificar y analizar, diseñar y construir el producto final.
  2. Usaremos un determinado material o herramientas para construirlo.
  3. Usaremos roles profesionales (desarrolladores, diseñadores, administradores de sistemas).
Arquitectura Web


Icon define.gif

Definición

La arquitectura web define la estructura y la forma en que se organizan los diferentes componentes de una aplicación que funciona en un entorno web.

Como en la construcción de un edificio, necesitamos planos (diseño), materiales (tecnologías) y roles profesionales (desarrolladores, diseñadores, administradores de sistemas).



(Comment.gif: hay que decidir al principio qué herramientas (tecnologías) vamos a utilizar 

(comparación con una construcción clásica por ejemplo de edificios)

)



  • Arquitectura: Constuyendo los planos
  • Arquitectura: planificando y realizando

  • Planificando.

  • Herramientas.

  • Roles.



Componentes principales de una aplicación web

  1. Servidor web → recibe las peticiones del cliente y devuelve una respuesta HTTP (ej: Apache, Nginx).
  2. Servidor de bases de datos → gestiona la información (ej: MySQL, PostgreSQL, MongoDB).
  3. Módulo de ejecución de código en el servidor → interpreta scripts dinámicos (ej: PHP, Node.js, Python).
  4. Cliente web → interpreta HTML, CSS y JavaScript (ej: navegadores).
  5. Lenguajes de programación → usados para construir tanto la parte visible (frontend) como la lógica (backend).

Diferencia entre el cliente (frontend) y el servidor (backend)

El Frontend (lado del cliente)
  • Es la parte visible de la aplicación, con la que el usuario interactúa desde su navegador.
  • Incluye la estructura (HTML), los estilos (CSS) y la interactividad (JavaScript).
  • Ejemplo: el formulario de registro o el botón de “Enviar”.
Backend (lado del servidor)
  • Es la parte que no se ve. Se ejecuta en el servidor y se encarga de procesar las peticiones del cliente, acceder a la base de datos y devolver los resultados.

Ejemplo: el código que guarda los datos del formulario en la base de datos. }}



Icon key points.gif

Puntos clave

El frontend muestra y recoge información del usuario, mientras que el backend la procesa, almacena y devuelve resultados.



Aspecto Frontend (cliente) Backend (servidor)
Dónde se ejecuta En el navegador del usuario En el servidor web
Lenguajes habituales HTML, CSS, JavaScript, Vue, React PHP, Python, Node.js, Java
Función principal Mostrar la interfaz y captar datos del usuario Procesar datos y comunicarse con la base de datos
Ejemplo práctico Formulario de contacto en pantalla Código que guarda el mensaje en una base de datos
Resultado visible Sí, el usuario lo ve directamente No, solo devuelve una respuesta



Icon casestudy.gif
Ejemplo
{{{1}}}



Icon casestudy.gif
Ejemplo
  • Frontend → la experiencia visible e interactiva (presentación). 
“El plato, la mesa, los utensilios, el salero y lo que el usuario toca.”
  • Backend → el trabajo oculto que genera el contenido (lógica y datos). 
“La cocina donde se preparan los platos según el pedido.”
  • Base de datos → la despensa donde se guardan los ingredientes. 
“Lugar donde se almacenan los productos (datos) para cocinar los platos.”
  • HTTP / navegador → el camarero que lleva y trae la información entre ambos mundos. 
“Transporta los pedidos (peticiones) y devuelve las respuestas.”



Arquitectura de la aplicación



Icon define.gif

Definición

Las aplicaciones web modernas suelen dividirse en tres capas:
  • Capa de presentación → interfaz de usuario (HTML, CSS, JS)
  • Capa lógica o de negocio → funcionalidad de la aplicación (PHP, Python, Node.js)
  • Capa de datos → almacenamiento y acceso a la base de datos (MySQL, MongoDB, etc.)



Diagrama de arquitectura de tres capas


(Comment.gif: Separar el código por capas facilita el mantenimiento, la escalabilidad y el trabajo en equipo. )



Roles en el desarrollo

  • Desarrollador backend
  • Desarrollador frontend
  • Diseñador web
  • Administrador de sistemas
  • DevOps / Full Stack Developer



Icon qmark.gif

Pregunta

{{{1}}}




Icon define.gif
Servidor web

y generar un mensaje de respuesta usando igualmente el protocolo http. Es muy frecuente que la respuesta es una página html.



2.-El Servidor de Bases de datos


Icon define.gif
Servidor Bases de datos
  • Un servidor web es un software (programa) encargado de gestionar una bases de datos
  • Dada la importancia de esta sección confidencialidad y posible cuello de botella en una aplicación, el servidor de bases de datos suele estar en un servidor dedicado específicamente a ese cometido



  • 3.- El módulo de ejecución de código en el servidor


Icon define.gif
Ejecutando código en el servidor
Ante una solicitud del cliente el servidor no solo entrega una página web, antes de ello es muy frecuente que ejecute código del cual el cliente nunca será consciente. Para ello tenemos que tener un módulo instalado en el servidor para ejectuar ese código.Nosotros usaremos PHP y posteriormente JavaScript en el servidor con NodeJS. Es el aspecto fundamental para este módulo o asignatura



Módulo de ejecución de script en el servidor
    • genera la página web resultante.
    • Este módulo debe integrarse de alguna forma con el servidor web
    • Dependerá del lenguaje y tecnología que utilicemos para programar la aplicación web.


  • 2.- El cliente

Ya lo hemos visto, corresponde al inicio del proceso, generalmente un navegador

  • En el cliente se recibe la página del servidor
  • Se interpreta las etiquetas de html con sus atributos
  • Se aplica el estilo detallado en las páginas css
  • Se ejecuta el código javascript y se atiende a los eventos javascript que haya configurados en código en la página que el servidor nos entrega
    • Suelen ser los navegadores. Reciben la página que solicitan

Para ello tendrá módulos encargados de la ejecución del código y cómo se debe comunicar con él.


  • 4.-El lenguaje de programación
  • Tanto para los script del cliente como del servidor o bien CGI, que utilizarás para desarrollar las aplicaciones.
  • Aquí es donde se pueden usar diferentes opciones incluso con el mismo servidor web


La arquitectura de la aplicación

  • Además de los componentes a utilizar, también es importante decidir cómo vas a organizar el código de la aplicación.
  • Esto se conoce como la arquitectura de la aplicación web.
  • Muchas de las arquitecturas que se usan en la programación de aplicaciones web te ayudan a estructurar el código de las aplicaciones en capas o niveles.
  • El motivo de dividir en capas el diseño de una aplicación es que se puedan separar las funciones lógicas de la misma, de tal forma que sea posible ejecutar cada una en un servidor distinto (en caso de que sea necesario).


La arquitectura de una aplicación
  • Un servidor de aplicaciones web en realidad puede estar formado por varios servidores físicos; 
cada servidor se puede encargar de ejecutar una parte de la aplicación.
  • Internamente se puede dividir la funcionalidad de una aplicación web en tres capas


Arquitectura de 3 capas
  1. capa de acceso a datos: que se tendrá que encargar de almacenar la información de la aplicación en una base de datos y recuperarla cuando sea necesario.
  2. capa intermedia : donde deberás programar la funcionalidad de tu aplicación.
  3. capa cliente: que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario.



Icon inter.gif
Recursos de la Web


Obtenido de «https://es.wikieducator.org/index.php?title=Plantilla:TecnologiaDesarrloWeb/ArquitecturaWeb&oldid=32059»