CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre...
Transcript of CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre...
![Page 1: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/1.jpg)
CONCEPTOS BASICOSISIS 3710
![Page 2: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/2.jpg)
Aplicaciones Web
ServidorCliente
![Page 3: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/3.jpg)
Aplicaciones Web
ServidorCliente
Recurso: URI/URL
![Page 4: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/4.jpg)
Aplicaciones Web
ServidorCliente
Localización/ generación recurso
![Page 5: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/5.jpg)
Aplicaciones Web
ServidorCliente
Recurso: HTML/JS/ Imagen/PDF….
![Page 6: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/6.jpg)
Aplicaciones Web
ServidorCliente
HTML/JS/ Imagen/PDF….
![Page 7: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/7.jpg)
Aplicaciones Web
ServidorCliente
Web browser/cliente http
![Page 8: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/8.jpg)
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
![Page 9: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/9.jpg)
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
Componentes del lado del cliente: HTML, CSS, JS
Componentes del lado del servidor: JSP, JSF, PHP, EJBs
![Page 10: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/10.jpg)
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)
![Page 11: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/11.jpg)
Web browser
Ejemplo tomado de: “Head First Servlets and JSP”. O'Reilly Media
![Page 12: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/12.jpg)
Web browser
Ejemplo tomado de: “Head First Servlets and JSP”. O'Reilly Media
![Page 13: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/13.jpg)
Web browser
http://gs.statcounter.com/
![Page 14: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/14.jpg)
QUE COMPONENTES DEBERIA TENER
UN WEB BROWSER?
http://www.freegreatpicture.com/other/question-mark-30511
![Page 15: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/15.jpg)
Interfaz (UI)
Motor (browser engine)
Motor de render
Intérprete de JS
Backend de UI
Persistencia
Conectividad (Networking)
Web browser (componentes)
Analizador de XML
![Page 16: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/16.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Intérprete de JS Backend de UI
Persistencia
Conectividad (Networking)
![Page 17: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/17.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Intermediario entre la interfaz
y el motor de render
Intérprete de JS
Analizador de XML
![Page 18: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/18.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Pinta el recurso solicitado en la
interfaz (ej., interpreta HTML y CSS)
Intérprete de JS
Analizador de XML
![Page 19: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/19.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Hace las solicitudes a la red usando el protocolo HTTP
Intérprete de JS
Analizador de XML
![Page 20: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/20.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Interpreta y ejecuta código JS
Intérprete de JS
Interprete XML
![Page 21: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/21.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Analizador de sintaxis (parser)
XML
Intérprete de JS
Analizador de XML
![Page 22: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/22.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Pinta widgets (ej., combobox) usando
métodos del sistema operativo
Intérprete de JS
Analizador de XML
![Page 23: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/23.jpg)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Almacenamiento local de datos (ej., cookies)
Intérprete de JS
Analizador de XML
![Page 24: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/24.jpg)
Interfaz + XPFE
Browser/Rendering engines (Gecko)
Spider-Monkey
GTK/X11
Persistencia
Necko + NSS/PSM
Ejemplo: Firefox
Expat
![Page 25: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/25.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URL
![Page 26: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/26.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
![Page 27: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/27.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
![Page 28: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/28.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)
![Page 29: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/29.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
![Page 30: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/30.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
pintarFuentes(página)
pintarWidgets(página)
![Page 31: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/31.jpg)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
pintarFuentes(página)
pintarWidgets(página)
![Page 32: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/32.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
![Page 33: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/33.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
![Page 34: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/34.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
![Page 35: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/35.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
pintarFuentes(página)
pintarWidgets(página)
![Page 36: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/36.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
pintarFuentes(página)
pintarWidgets(página)
![Page 37: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/37.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URL
Intérprete JS
![Page 38: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/38.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
Intérprete JS
![Page 39: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/39.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página)
Intérprete JS
![Page 40: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/40.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
Intérprete JS
![Page 41: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/41.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
![Page 42: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/42.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
![Page 43: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/43.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
interpretar(js)
![Page 44: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/44.jpg)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
interpretar(js)
js interpretado
![Page 45: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/45.jpg)
El motor de render
Internet explorer
Mozilla, Firefox, Galeon,SeaMonkey
Safari, Tizen, Chrome
Chrome (28+)/Opera (15+)
Trident
Gecko
Webkit
Blink (fork de webkit)
![Page 46: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/46.jpg)
El motor de render (workflow)
HTML
Hojas de estilo
![Page 47: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/47.jpg)
El motor de render (workflow)
HTML
Arbol de contenido
Hojas de estilo
![Page 48: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/48.jpg)
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Hojas de estilo
![Page 49: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/49.jpg)
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Arbol render + Layout
Hojas de estilo
![Page 50: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/50.jpg)
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Arbol render + Layout
Hojas de estilo
UIMotorBackend
![Page 51: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/51.jpg)
El motor de render (workflow)
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
![Page 52: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/52.jpg)
El motor de render (workflow)
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
![Page 53: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/53.jpg)
El motor de render (workflow)
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
![Page 54: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/54.jpg)
El motor de render (workflow)
HTMLHtmlElement
HTMLBodyElement
HTMLParagraphElement
Text
HTMLDivElement
Text
Arbol DOM
Block
Block
Block
Text
Block
Text
Arbol render
Scroll
Viewport
![Page 55: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/55.jpg)
El motor de render (workflow)
Block
Block
Block
Text
Block
Text
Arbol render
Scroll
Viewport
Block
Block
Block
Text
Block
Text
Arbol render + layout
Scroll
Viewport
Coordenadas exactas
![Page 56: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/56.jpg)
QUE POLITICAS DEBERIA USAR EL
MOTOR DE RENDER PARA ANALIZAR/
PINTAR LOS ELEMENTOS HTML?
http://www.freegreatpicture.com/other/question-mark-30511
![Page 57: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/57.jpg)
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
![Page 58: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/58.jpg)
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
![Page 59: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/59.jpg)
DIFERENCIAS ENTRE SERVIDOR WEB,
CONTENEDOR WEB, Y SERVIDOR DE
APLICACIONES?
http://www.freegreatpicture.com/other/question-mark-30511
![Page 60: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/60.jpg)
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
![Page 61: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/61.jpg)
Servidor Web
ServidorCliente
Recurso: URI/URL Core
Sistema Operativo
Módulos
![Page 62: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/62.jpg)
Servidor de Aplicaciones
https://docs.oracle.com/cd/E19651-01/817-2144-10/
![Page 63: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/63.jpg)
Servidor de Aplicaciones
- 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
![Page 64: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/64.jpg)
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)
![Page 65: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/65.jpg)
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
Componentes del lado del cliente: HTML, CSS, JS
Componentes del lado del servidor: JSP, JSF, PHP, WS-REST
![Page 66: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/66.jpg)
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor de aplicaciones
Componentes del lado del cliente: HTML, CSS, JS
Componentes del lado del servidor que no usan HTTP: EJBs
![Page 67: CONCEPTOS BASICOS - Uniandesisis3710/dokuwiki/lib/exe… · Web browser Cliente-Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) -Analizador de sintaxis](https://reader030.fdocumento.com/reader030/viewer/2022041006/5ead005fa34326048063e9da/html5/thumbnails/67.jpg)
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