[1.4] Funcionamiento de una aplicación web - jorgesanchez.net · Implantación de Aplicaciones...
Transcript of [1.4] Funcionamiento de una aplicación web - jorgesanchez.net · Implantación de Aplicaciones...
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
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)
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
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
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
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
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
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
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
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
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
IAW-1-Conceptos sobre Aplicaciones WebJorge Sánchez, www.jorgesanchez.net
@jorgesancheznet
Resumen del lado del servidor
•El clien
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.