CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre...

CONCEPTOS BASICOSISIS 3710

Aplicaciones Web

ServidorCliente

Aplicaciones Web

ServidorCliente

Recurso: URI/URL

Aplicaciones Web

ServidorCliente

Localización/ generación recurso

Aplicaciones Web

ServidorCliente

Recurso: HTML/JS/ Imagen/PDF….

Aplicaciones Web

ServidorCliente

HTML/JS/ Imagen/PDF….

Aplicaciones Web

ServidorCliente

Web browser/cliente http

Aplicaciones Web

ServidorCliente

Web browser/cliente http Servidor/Contenedor web

Aplicaciones Web

ServidorCliente


Componentes del lado del cliente: HTML, CSS, JS

Componentes del lado del servidor: JSP, JSF, PHP, EJBs

Web browser

Cliente

- Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE)

- Analizador de sintaxis de HTML y XML

- Visualizador de archivos: imágenes

- Visualización de archivos no soportados vía plugins (ej., PDF)

Web browser

Ejemplo tomado de: “Head First Servlets and JSP”. O'Reilly Media

Web browser

http://gs.statcounter.com/

QUE COMPONENTES DEBERIA TENER

UN WEB BROWSER?

http://www.freegreatpicture.com/other/question-mark-30511

Interfaz (UI)

Motor (browser engine)

Motor de render

Intérprete de JS

Backend de UI

Persistencia

Conectividad (Networking)

Web browser (componentes)

Analizador de XML


Interfaz (UI)


Motor de render

Intérprete de JS Backend de UI

Persistencia



Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Intermediario entre la interfaz

y el motor de render

Intérprete de JS

Analizador de XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Pinta el recurso solicitado en la

interfaz (ej., interpreta HTML y CSS)

Intérprete de JS

Analizador de XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Hace las solicitudes a la red usando el protocolo HTTP

Intérprete de JS

Analizador de XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Interpreta y ejecuta código JS

Intérprete de JS

Interprete XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Analizador de sintaxis (parser)

XML

Intérprete de JS

Analizador de XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Pinta widgets (ej., combobox) usando

métodos del sistema operativo

Intérprete de JS

Analizador de XML


Interfaz (UI)


Motor de render

Backend de UI

Persistencia


Almacenamiento local de datos (ej., cookies)

Intérprete de JS

Analizador de XML

Interfaz + XPFE

Browser/Rendering engines (Gecko)

Spider-Monkey

GTK/X11

Persistencia

Necko + NSS/PSM

Ejemplo: Firefox

Expat

Workflow (caso Chrome)

UI Motor Red Render UI backend (GDI+SKIA)

Página web básica (HTML + CSS) sin cache

URL




URLmostrar(URL)




URLmostrar(URL)

obtener(URL)

página




URLmostrar(URL)

obtener(URL)

página

render(página)




URLmostrar(URL)

obtener(URL)

página

render(página)construir DOM




URLmostrar(URL)

obtener(URL)

página

render(página)construir DOM

pintarFuentes(página)

pintarWidgets(página)


UI Motor Render UI backend (GDI+SKIA)

Cambiar dimensión de browser

cambia tamaño de ventana





repintar(tamaño)





repintar(tamaño)

render(página)



Página web en cache con JS

URL

Intérprete JS




URLmostrar(URL)

Intérprete JS




URLmostrar(URL)

render(página)

Intérprete JS




URLmostrar(URL)

render(página) construir DOM

Intérprete JS




URLmostrar(URL)




Intérprete JS




URLmostrar(URL)




Intérprete JS

interpretar(js)




URLmostrar(URL)




Intérprete JS

interpretar(js)

js interpretado

El motor de render

Internet explorer

Mozilla, Firefox, Galeon,SeaMonkey

Safari, Tizen, Chrome

Chrome (28+)/Opera (15+)

Trident

Gecko

Webkit

Blink (fork de webkit)

El motor de render (workflow)

HTML

Hojas de estilo


HTML

Arbol de contenido

Hojas de estilo


HTML

Arbol render

Arbol de contenido

Hojas de estilo


HTML

Arbol render

Arbol de contenido

Arbol render + Layout

Hojas de estilo


HTML

Arbol render

Arbol de contenido

Arbol render + Layout

Hojas de estilo

UIMotorBackend


HTMLHtmlElement<html> <body>

<p> Hola mundo </p> <div> Chao mundo <div>

</body> </html>

HTMLBodyElement

HTMLParagraphElement

Text

HTMLDivElement

Text

HTML recibido Arbol DOM

HTML parser

• Cada elemento en el HTML es convertido a un nodo DOM • DOM es la representation en objetos del HTML • DOM es la interfaz de interacción entre JS y los elementos HTML


Documento HTML

Lexer

Parser

1. Análisis léxico

2. Análisis sintaxis

Arbol de contenido

El proceso de análisis es iterativo para ser tolerante a fallos

Tokenización (vocabulario HTML)

Cada token es agregado al árbol de acuerdo con las reglas de sintaxis


Arbol render

<html> <body>

<p> Hola mundo </p> <div> Chao mundo <div>

</body> </html>

Estilo en el HTML recibido, y propiedades visuales • Elementos visuales

en el orden en que deben ser pintados

• Cada nodo es un área rectangular: anchura, altura, posición, color

• Elementos visuales del árbol DOM

Hojas de estilo externas


HTMLHtmlElement

HTMLBodyElement

HTMLParagraphElement

Text

HTMLDivElement

Text

Arbol DOM

Block

Block

Block

Text

Block

Text

Arbol render

Scroll

Viewport


Block

Block

Block

Text

Block

Text

Arbol render

Scroll

Viewport

Block

Block

Block

Text

Block

Text

Arbol render + layout

Scroll

Viewport

Coordenadas exactas

QUE POLITICAS DEBERIA USAR EL

MOTOR DE RENDER PARA ANALIZAR/

PINTAR LOS ELEMENTOS HTML?


Mecanismo de pintado

- El proceso de análisis es gradual

- El proceso de análisis de HTML es tolerante a fallos

- HTML parser: gramática no libre de contexto

- XML parser: gramática libre de contexto

- Los elementos son pintados tan rápido como es posible

Aplicaciones Web

Servidor

Servidor/Contenedor web- Responde a peticiones HTTP

- En el caso de contenido estático, envía el contenido solicitado en un mensaje HTTP

- En el caso de un recurso dinámico (ej, JSP), este se compila y ejecuta para generar HTML

DIFERENCIAS ENTRE SERVIDOR WEB,

CONTENEDOR WEB, Y SERVIDOR DE

APLICACIONES?


Servidor vs. Contenedor

Servidor Web

Contenedor Web

Servidor de aplicaciones

Servidor de peticiones HTTP capaz de ejecutar CGIs, o scripts del lado del servidor

Servidor web que ejecuta código Java en el servidor

Contenedor web + contenedor de EJBS + otros servicios

Servidor Web

ServidorCliente

Recurso: URI/URL Core

Sistema Operativo

Módulos

Servidor de Aplicaciones

https://docs.oracle.com/cd/E19651-01/817-2144-10/


- Clustering - Tolerancia a fallas - Balanceo de cargas - Ejecución de objetos de negocio - Otros protocolos diferentes a HTTP - Seguridad - Transacciones distribuidas - Publicación y orquestación de

servicios

Servidor de aplicaciones


- Glassfish Application Server (Open source/Oracle) - Weblogic server (Oracle) - Oracle Application Server (Oracle) - JBoss (Red Hat) - Internet Information Services (Microsoft) - Oracle OC4J (Oracle) - Apache Geronimo (Apache) - WebSphere Application Server (IBM) - Sybase Enterprise Applicacion Server (Sybase)

Aplicaciones Web

ServidorCliente



Componentes del lado del servidor: JSP, JSF, PHP, WS-REST

Aplicaciones Web

ServidorCliente

Web browser/cliente http Servidor de aplicaciones


Componentes del lado del servidor que no usan HTTP: EJBs

Bibliografía

- Grosskurth, Alan. A Reference Architecture for Web Browsers. http://grosskurth.ca/papers/browser-refarch.pdf

- Garsiel, T., Irish, P. How Browsers Work: Behind the scenes of modern web browsers. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

- Webkit, Open Source Web Browser Engine. https://webkit.org/

- http://www.javaworld.com/article/2077354/learn-java/app-server-web-server-what-s-the-difference.html

http://grosskurth.ca/papers/browser-refarch.pdf

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://webkit.org/

http://www.javaworld.com/article/2077354/learn-java/app-server-web-server-what-s-the-difference.html

CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre...

Documents

Transcript of CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre...