[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


@jorgesancheznet

Funcionamiento de las aplicaciones web

•Dos estrategias

•En el lado del cliente (front-end)

•En el lado del servidor (back-end)


@jorgesancheznet

Funcionamiento en el lado del cliente

usuario navegador

petición Petición http

Servidor web


@jorgesancheznet

Tecnologías del lado del cliente

•Flash

•Silverlight

•Applets de Java

•HTML, CSS, JavaScript


@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


@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


@jorgesancheznet

Funcionamiento en el lado del servidor

usuario navegador

petición Petición http

Servidor web

El recurso tiene

contenido extra


@jorgesancheznet


usuario navegador

Servidor web

Se entregaa un servidor

capaz de traducir

el contenidoextra

Servidor deaplicaciones


@jorgesancheznet


usuario navegador

Servidor web

Se entregael código traducido

Servidor deaplicaciones


@jorgesancheznet


usuario navegador

Servidor web Servidor deaplicaciones

respuestasin contenido

extra, el navegador no necesita plugins


@jorgesancheznet


usuario navegador

Servidor web Servidor deaplicaciones

respuesta


@jorgesancheznet

Resumen del lado del servidor

•El clien


@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


@jorgesancheznet

Normalmente….

•Se usan ambas estrategias:• Hay contenidos del lado del servidor• Hay contenidos del lado del cliente


@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


@jorgesancheznet

Servidores web

•Software/Máquina capaz de interpretar el protocolo http

•Las peticiones http suelen requerir la entrega de un documento HTML


@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


@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


@jorgesancheznet

CAPA DE NEGOCIO

Bases de Datos


Navegador

Servidor Web Servidor de Aplicaciones


Envío de datos


@jorgesancheznet

CAPA LÓGICA


Navegador



Código traducido

Código del lado del servidor


@jorgesancheznet

CAPA DEPRESENTACIÓN


Navegador



Envío delresultado


@jorgesancheznet


•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


@jorgesancheznet


•Capa de negocio. Contiene el sistema de información empresarial.•Fundamentalmente la forma el SGBD•Lenguajes (base de datos)• SQL


@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


@jorgesancheznet

BACK-ENDFRONT-END

Back-End y Front-End

Navegador



HTML, CSS, JavaScript

PHP, ASP,Ruby, .NET, Java

SQL


@jorgesancheznet

BACK-ENDFRONT-END

Modelo Full-Stack

Navegador




PHP, ASP,Ruby, .NET, Java

SQL


@jorgesancheznet

BACK-ENDFRONT-END

Modelo Full-Stack

Navegador




JavaScript JavaScript


@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


@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.


@jorgesancheznet

Paradigma MVC

NAVEGADOR

CONTROLADOR

MODELO VISTA

DATOS

Demanda de datos

Solicitud de datosEnvío de datos

DatosDatos

RespuestaHTML, CSS, JS

Petición http

[1.4] funcionamiento de una aplicación web - jorgesanchez.net · implantación de aplicaciones...

Documents