Download [1.4] Funcionamiento de una aplicación web

[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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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)
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del cliente
petición
usuario
Petición http
navegador
Servidor web
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Tecnologías del lado del cliente
• Flash
• Silverlight
• Applets de Java
• HTML, CSS, JavaScript
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento el lado del cliente
El navegador
traduce el
contenido
usuario
extra
navegador
Envío de
página con
tecnología del
lado del cliente
Servidor web
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del cliente
1. El cliente realiza una petición de recurso
2. Un servidor web entrega el recurso al ordenador del
cliente
3. El navegador del cliente traduce el código que recibe
4. El usuario ve el resultado
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
petición
usuario
Petición http
navegador
Servidor web
El recurso
tiene
contenido
extra
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario
navegador
Se entrega
a un servidor
capaz
Servidor web de traducir
el contenido
extra
Servidor de
aplicaciones
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario
Se entrega
el código
traducido
navegador
Servidor web
Servidor de
aplicaciones
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
usuario
respuesta
sin contenido
extra,
navegador
el navegador no
necesita plugins
Servidor web
Servidor de
aplicaciones
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Funcionamiento en el lado del servidor
respuesta
usuario
navegador
Servidor web
Servidor de
aplicaciones
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del servidor
• El clien
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del cliente
1. El cliente realiza una petición de recurso
2. Un servidor web encuentra el recurso y se encuentra
con código especial
3. Pide ayuda a otro servidor o servicio para traducir ese
código
4. El servidor entrega el código traducido al navegador
5. El navegador interpreta lo que se le entrega
6. El usuario ve el resultado
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Normalmente….
• Se usan ambas estrategias:
• Hay contenidos del lado del servidor
• Hay contenidos del lado del cliente
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
Petición http
Navegador
Petición de
traducción
Servidor Web
Petición de
servicio
Servidor de
Aplicaciones
Servidor de
Bases de Datos
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
Envío de
datos
Navegador
Servidor Web
Servidor de
Aplicaciones
Servidor de
Bases de Datos
CAPA DE NEGOCIO
Bases de Datos
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
Código
traducido
Navegador
Servidor Web
CAPA LÓGICA
Servidor de
Aplicaciones
Servidor de
Bases de Datos
Código del
lado del servidor
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Arquitectura de tres niveles
Navegador
Envío del
resultado
Servidor Web
Servidor de
Aplicaciones
Servidor de
Bases de Datos
CAPA DE
PRESENTACIÓN
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Back-End y Front-End
Navegador
Servidor Web
HTML, CSS,
JavaScript
FRONT-END
Servidor de
Bases de Datos
Servidor de
Aplicaciones
PHP, ASP,
Ruby, .NET, Java
SQL
BACK-END
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Modelo Full-Stack
Navegador
Servidor Web
HTML, CSS,
JavaScript
FRONT-END
Servidor de
Bases de Datos
Servidor de
Aplicaciones
PHP, ASP,
Ruby, .NET, Java
SQL
BACK-END
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Modelo Full-Stack
Navegador
Servidor Web
HTML, CSS,
JavaScript
FRONT-END
Servidor de
Bases de Datos
Servidor de
Aplicaciones
JavaScript
JavaScript
BACK-END
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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
IAW-1-Conceptos sobre Aplicaciones Web
Jorge 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.
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Paradigma MVC
NAVEGADOR
Petición http
DATOS
Envío
de datos
Solicitud
de datos
Respuesta
HTML, CSS, JS
CONTROLADOR
Datos
Demanda de datos
Datos
MODELO
VISTA
IAW-1-Conceptos sobre Aplicaciones Web
Jorge Sánchez, www.jorgesanchez.net
@jorgesancheznet