[1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... ·...
Transcript of [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... ·...
![Page 1: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/1.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[1.4] Funcionamiento de una aplicación web
Implantación de Aplicaciones Web, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
![Page 2: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/2.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento de las aplicaciones web
•Dos estrategias
•En el lado del cliente (front-end)
•En el lado del servidor (back-end)
![Page 3: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/3.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del cliente
usuario navegador
petición Petición http
Servidor web
![Page 4: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/4.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Tecnologías del lado del cliente
•Flash
•Silverlight
•Applets de Java
•HTML, CSS, JavaScript
![Page 5: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/5.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento el lado del cliente
usuario navegador
Servidor web
Envío depágina con
tecnología del lado del cliente
El navegadortraduce el contenido
extra
![Page 6: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/6.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del cliente
1. El cliente realiza una petición de recurso2. Un servidor web entrega el recurso al ordenador del
cliente3. El navegador del cliente traduce el código que recibe4. El usuario ve el resultado
![Page 7: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/7.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario navegador
petición Petición http
Servidor web
El recurso tiene
contenido extra
![Page 8: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/8.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario navegador
Servidor web
Se entregaa un servidor
capaz de traducir
el contenidoextra
Servidor deaplicaciones
![Page 9: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/9.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario navegador
Servidor web
Se entregael código traducido
Servidor deaplicaciones
![Page 10: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/10.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario navegador
Servidor web Servidor deaplicaciones
respuestasin contenido
extra, el navegador no necesita plugins
![Page 11: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/11.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario navegador
Servidor web Servidor deaplicaciones
respuesta
![Page 12: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/12.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del servidor
•El clien
![Page 13: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/13.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del cliente
1. El cliente realiza una petición de recurso2. Un servidor web encuentra el recurso y se encuentra
con código especial3. Pide ayuda a otro servidor o servicio para traducir ese
código4. El servidor entrega el código traducido al navegador5. El navegador interpreta lo que se le entrega6. El usuario ve el resultado
![Page 14: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/14.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Normalmente….
•Se usan ambas estrategias:• Hay contenidos del lado del servidor• Hay contenidos del lado del cliente
![Page 15: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/15.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
[1.5] Creación de aplicaciones web
Implantación de Aplicaciones Web, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
![Page 16: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/16.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Servidores web
•Software/Máquina capaz de interpretar el protocolo http
•Las peticiones http suelen requerir la entrega de un documento HTML
![Page 17: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/17.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Servidores de aplicaciones web
•Los servidores web solo interpretan peticiones http
•Los servidores de aplicaciones interpretan instrucciones en lenguajes del lado del servidor
•En la práctica son módulos que se añaden a los servidores web
![Page 18: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/18.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
Navegador
Servidor Web
Petición http
Servidor de Aplicaciones
Petición de traducción
Servidor de Bases de Datos
Petición de servicio
![Page 19: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/19.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
CAPA DE NEGOCIO
Bases de Datos
Arquitectura de tres niveles
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
Envío de datos
![Page 20: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/20.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
CAPA LÓGICA
Arquitectura de tres niveles
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
Código traducido
Código del lado del servidor
![Page 21: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/21.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
CAPA DEPRESENTACIÓN
Arquitectura de tres niveles
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
Envío delresultado
![Page 22: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/22.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
•Capa lógica. Gestiona el funcionamiento de la aplicación. Se suele dividir en:• Modelo• Vista• Controlador
• Lenguajes que utiliza (lado del servidor):• PHP• ASP.net• Python• JavaScript
![Page 23: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/23.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
•Capa de negocio. Contiene el sistema de información empresarial.•Fundamentalmente la forma el SGBD•Lenguajes (base de datos)• SQL
![Page 24: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/24.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Programación Back-End y programación Front-End
•Front-end. • Apariencia final• Lado del cliente, capa de presentación• Wireframes, Mockups y programadores HTML+CSS+JavaScript
•Back-end.• Capas ocultas al usuario• Lado del servidor
![Page 25: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/25.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
BACK-ENDFRONT-END
Back-End y Front-End
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
HTML, CSS, JavaScript
PHP, ASP,Ruby, .NET, Java
SQL
![Page 26: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/26.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
BACK-ENDFRONT-END
Modelo Full-Stack
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
HTML, CSS, JavaScript
PHP, ASP,Ruby, .NET, Java
SQL
![Page 27: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/27.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
BACK-ENDFRONT-END
Modelo Full-Stack
Navegador
Servidor Web Servidor de Aplicaciones
Servidor de Bases de Datos
HTML, CSS, JavaScript
JavaScript JavaScript
![Page 28: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/28.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Modelo Full Stack
•Todas las capas utilizan el mismo lenguaje (JavaScript)•Ventajas• Se domina un solo lenguaje• El programador puede cambiar de capa
•Detractores:• Son mejores los lenguajes especializados
![Page 29: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/29.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Paradigma MVC
•Pertenece a la capa lógica•Separa las tareas de esa capa• Modelo. Asocia los datos en la capa lógica con datos de la
capa de negocio• Vista. Se encarga de la interfaz de usuario• Controlador. Capa que captura los eventos de usuario
actuando en consecuencia con las otras capas. Captura eventos, solicita (modelo) los datos y los envía a la capa Vista.
![Page 30: [1.4] Funcionamiento de una aplicación webjorgesanchez.net/presentaciones/implantacion... · Resumen del lado del cliente 1. El cliente realiza una petición de recurso 2. Un servidor](https://reader034.fdocuments.es/reader034/viewer/2022042207/5ea994e9cc37bb35b342bae2/html5/thumbnails/30.jpg)
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Paradigma MVC
NAVEGADOR
CONTROLADOR
MODELO VISTA
DATOS
Demanda de datos
Solicitud de datosEnvío de datos
DatosDatos
RespuestaHTML, CSS, JS
Petición http