Presentación interactiva básica

ANDREA DE LA CRUZ PEREZ 212706665TO SEMESTRE ACT 1.2EVOLUCION Y ARQUITECTURA DE LAS APLICAIONES WEBPROGRAMACION WEBCESAR IVAN ALVAREZ ALBORES06/09/2024TUXTLA GUTIERREZ, CHIAPAS

Arquitectura Cliente-Servidor

1. Arquitectura Cliente-Servidor:

• La arquitectura cliente-servidor es una de las estructuras más antiguas y fundamentales en el desarrollo de aplicaciones web. En este modelo, existen dos entidades principales: Cliente: Generalmente es el navegador web que solicita información o servicios de un servidor. El cliente envía solicitudes HTTP, que el servidor procesa y responde.
• Servidor: Es donde se almacenan y procesan los datos, generalmente en una base de datos o archivo. El servidor recibe solicitudes del cliente, las procesa, y envía la respuesta (HTML, datos JSON, etc.).
• Características de la Arquitectura Cliente-Servidor:
• Centralización: Todo el procesamiento de datos y la lógica empresarial se lleva a cabo en el servidor. El cliente solo solicita y muestra la información.
• Escalabilidad limitada: Dado que el servidor maneja todas las solicitudes, un aumento en el número de usuarios puede sobrecargarlo.
• Comunicación basada en HTTP: Los clientes y servidores interactúan a través de peticiones HTTP.
• Ventajas:
• Simplicidad: Fácil de desarrollar y mantener en proyectos pequeños.
• Centralización de recursos: La administración y seguridad se manejan desde un solo lugar (el servidor).
• Desventajas:
• Dependencia del servidor: Si el servidor falla, toda la aplicación se detiene.
• Escalabilidad: Dificultades para escalar en aplicaciones con alta demanda, ya que la carga recae completamente en el servidor.

2. Arquitectura de Microservicios:

• La arquitectura de microservicios es una evolución de la arquitectura monolítica, que divide una aplicación web en pequeños servicios independientes que se comunican entre sí a través de APIs. En lugar de tener toda la lógica empresarial en un solo lugar (servidor), cada microservicio se encarga de una función específica, como autenticación, procesamiento de pagos, o administración de usuarios. Características de la Arquitectura de Microservicios:
• Descentralización: Cada microservicio funciona como una entidad independiente con su propia base de datos, lógica y recursos.
• Escalabilidad horizontal: Cada microservicio puede escalarse de forma independiente, lo que hace más eficiente la gestión de grandes volúmenes de tráfico.
• Independencia de Tecnologías: Los diferentes microservicios pueden desarrollarse utilizando lenguajes y frameworks diferentes, dependiendo de las necesidades de cada uno.
• Ventajas:
• Escalabilidad: Como los microservicios se pueden escalar de forma independiente, es fácil gestionar grandes volúmenes de tráfico. Mantenimiento y Despliegue Independiente: Puedes actualizar, mantener y desplegar microservicios de forma individual sin afectar a toda la aplicación.
• Flexibilidad tecnológica: Se pueden utilizar tecnologías diferentes para cada microservicio según su función específica.
• Desventajas:
• Complejidad: La gestión de múltiples microservicios requiere una infraestructura más compleja y herramientas para la orquestación y monitoreo. Comunicación: Los microservicios dependen de la comunicación a través de APIs, lo que puede añadir latencia y posibles puntos de fallo.

Comparación entre Arquitecturas Cliente-Servidor y Microservicios

Evolución de Cliente-Servidor a Microservicios A medida que las aplicaciones web crecieron en tamaño y complejidad, la arquitectura cliente-servidor tradicional se volvió insuficiente para manejar el aumento de la demanda. La arquitectura de microservicios surgió como una respuesta a los problemas de escalabilidad y mantenimiento en aplicaciones web grandes, permitiendo un desarrollo más ágil, escalable y resiliente. Las grandes empresas como Netflix, Amazon, y Google han adoptado los microservicios para manejar aplicaciones distribuidas y escalar sus servicios globales con millones de usuarios simultáneos. La evolución hacia la arquitectura de microservicios ha permitido a las aplicaciones web actuales ser más flexibles, escalables y adaptables a cambios, respondiendo a las necesidades de negocios modernos.

Eventos Clave en la Evolución de las Aplicaciones Web

• 1. 1995:
• Aparición de JavaScript y el Cambio hacia la Interactividad Antes de 1995, las páginas web eran esencialmente estáticas, es decir, solo mostraban contenido sin la posibilidad de interactuar con los usuarios. La introducción de JavaScript por Netscape en ese año cambió el panorama al permitir que las páginas web se volvieran más interactivas y dinámicas.
• JavaScript es un lenguaje de programación del lado del cliente que permite a los desarrolladores agregar interactividad a las páginas web, como animaciones, formularios interactivos, validaciones, y más.
• Con JavaScript, los navegadores podían ejecutar código sin la necesidad de recargar la página, lo que mejoró drásticamente la experiencia del usuario y abrió la puerta para aplicaciones más complejas.
• Impacto:
• Interactividad: Por primera vez, los usuarios podían interactuar con las páginas web de una forma más rica.
• Desarrollo de la Web Dinámica: La web dejó de ser solo un medio de lectura pasiva y se convirtió en una plataforma de interacción y entretenimiento.

2. 2005: Introducción de AJAX y Actualizaciones en Tiempo Real

• En 2005, se popularizó el término AJAX (Asynchronous JavaScript and XML), que permitió un avance revolucionario en la forma en que las aplicaciones web manejaban la comunicación con los servidores.
• AJAX permite que las páginas web envíen y reciban datos de un servidor en segundo plano, sin necesidad de recargar toda la página. Esto hizo posible la creación de aplicaciones más rápidas y fluidas, donde solo partes específicas de la página se actualizaban en lugar de todo el contenido.
• Impacto:
• Actualización en Tiempo Real: Con AJAX, los usuarios podían interactuar con aplicaciones web en tiempo real, similar a las aplicaciones de escritorio.
• Nacimiento de Web 2.0: AJAX fue una de las tecnologías clave que impulsó el desarrollo de Web 2.0, permitiendo la creación de plataformas dinámicas como redes sociales, chats en tiempo real, y aplicaciones colaborativas.
• Ejemplos de Aplicaciones AJAX: Gmail, Google Maps, y redes sociales que podían actualizar mensajes y contenido sin recargar la página entera.

3. HTML5 y CSS3: Cambios Fundamentales para la Creación de Páginas Dinámicas Modernas

• En 2014, con la adopción generalizada de HTML5 y CSS3, la web dio un salto hacia estándares más modernos que ofrecieron capacidades mejoradas tanto en la presentación visual como en la funcionalidad de las aplicaciones web.
• HTML5 introdujo nuevas etiquetas semánticas, como <article>, <section>, y <header>, que mejoraron la estructura y accesibilidad de las páginas web. Además, permitió la integración de multimedia (audio y video) sin la necesidad de complementos adicionales como Flash.
• CSS3 trajo consigo nuevas capacidades de diseño, incluyendo transiciones, animaciones y media queries, que permiten un diseño más responsivo y adaptable a diferentes dispositivos y tamaños de pantalla.
• Impacto:
• Web Multimedia y Responsiva: Con HTML5, fue posible integrar multimedia de forma nativa, mientras que CSS3 permitió que los sitios web fueran más accesibles y atractivos visualmente, con diseños que se adaptan a cualquier pantalla.
• Fin de Flash: La llegada de HTML5 eliminó la necesidad de tecnologías externas como Adobe Flash para video y animaciones, haciendo la web más segura y eficiente.
• Aplicaciones Web Modernas: Junto con las APIs de JavaScript y la capacidad offline de HTML5, fue posible crear aplicaciones web avanzadas que se comportan casi como aplicaciones móviles nativas, como juegos en el navegador y editores de texto avanzados.

• Transformación Hacia una Web Interactiva y Dinámica
• Estos eventos clave han marcado una transición en la evolución de las aplicaciones web:
• De las simples páginas estáticas a aplicaciones interactivas gracias a JavaScript.
• La capacidad de trabajar en tiempo real con AJAX.
• Las tecnologías HTML5 y CSS3 han modernizado la web, permitiendo interfaces fluidas, ricas en contenido multimedia y accesibles en múltiples dispositivos.
• Estos avances han sentado las bases para las Single Page Applications (SPAs) y las aplicaciones progresivas (PWAs) que utilizamos hoy en día, donde la experiencia de usuario es similar a la de las aplicaciones nativas.

Comparación: Página Web Estática vs. Single Page Application (SPA)

Comparación: Página Web Estática vs. Single Page Application (SPA)

Diferencias Clave:

1. Tiempo de Carga:

• Páginas Web Estáticas: Tienen una carga inicial rápida, pero cada nueva página o cambio en la página requiere una nueva solicitud al servidor y una recarga completa de la página.
• SPAs: La carga inicial puede ser más lenta, ya que todos los componentes necesarios (HTML, CSS y JavaScript) se cargan de una vez, pero las interacciones posteriores son más rápidas y sin recargas.

• Páginas Estáticas: Limitada en cuanto a interactividad. Cualquier acción o actualización de datos requiere una recarga completa.
• SPAs: Extremadamente interactivas. Las aplicaciones pueden actualizar partes específicas del contenido sin necesidad de recargar la página completa, proporcionando una experiencia más parecida a una aplicación de escritorio.

• Páginas Estáticas: El flujo de datos es básico y se realiza mediante peticiones HTTP para cada página solicitada.
• SPAs: Utilizan un flujo de datos asíncrono mediante AJAX o APIs REST, lo que permite una comunicación constante entre el cliente y el servidor, actualizando solo las partes necesarias de la interfaz.

• Ejemplo Visual:
• Página Web Estática: Al hacer clic en un enlace o enviar un formulario, la página se recarga por completo y muestra el nuevo contenido.
• SPA: Al hacer clic en un enlace o botón, el contenido cambia instantáneamente sin recargar toda la página, dando la sensación de una aplicación fluida y en tiempo real.
• Las SPAs representan una evolución natural para aplicaciones web que requieren mayor interactividad, rapidez y eficiencia, mientras que las páginas estáticas siguen siendo útiles para sitios más simples con menos interacciones.