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

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)

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

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

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

pintarFuentes(página)

pintarWidgets(página)

URLmostrar(URL)

obtener(URL)

página

UI Motor Render UI backend (GDI+SKIA)

Cambiar dimensión de browser

cambia tamaño de ventana

repintar(tamaño)

render(página)

repintar(tamaño)

render(página)

repintar(tamaño)

render(página)

Página web en cache con JS

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

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

Webkit

Blink (fork de webkit)

El motor de render (workflow)

Hojas de estilo

Arbol de contenido

Hojas de estilo

Arbol render

Arbol de contenido

Hojas de estilo

Arbol render

Arbol de contenido

Arbol render + Layout

Hojas de estilo

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

HTMLDivElement

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

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

<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

HTMLDivElement

Arbol DOM

Arbol render

Scroll

Viewport

Arbol render

Scroll

Viewport

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

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

Documents

Borrado Seguro de Archivos Con Secure Delete La Mirada Del Rep

Dg Tech Inst Boe (Do Not Delete)

Como Instalar Mib Browser

Nvegador o browser 6

Browser y buscadores

Actividad 4 los browser mas utilizados

Qué es un Navegador Web o Browser

Alumne: Rubén Expósito Rangel Consultor: José Manuel ...openaccess.uoc.edu/webapps/o2/bitstream/10609/37481... · - Executa diverses operacions DML (Insert, Delete, Update, Delete)

Agregar, Cambiar Encontrar Los Formatos Condicionales Delete - Excel - Office

Tesauro Automatizado MeSH Browser Tesauro Automatizado MeSH Browser para el uso de los profesionales de Información

Anuncios de Browser Guard (Para Mi Windows 8)

Wikis - euloxio.myds.meeuloxio.myds.me/dokuwiki/lib/exe/fetch.php/doc:wiki:wikis.pdf · Wikis disponibles en el mercado . 2. Manejo de una wiki (DokuWiki) Índice. 1. Qué es una

Actividad 4 los browser mas utilizados sol

Mapa conceptual browser

Browser navegadores

HTML ElementosdeProgramaciónyLógica Unidad1 …elementosdeprogramacionylogica.web.unq.edu.ar/wp-content/...HTML. Browser El Browser o Navegador web permitevisualizararchivos HTMLqueseencuentranenelequipo,asícomotambiénvisualizar

DD DELETE - WordPress.com · DD-DELETE Indicado para el tratamiento del sobrecrecimiento interdigital, las verrugas de talón y la dermatitis Tamaño del paquete: 360 g / cartucho

Tutorial 3.browser

Browser mas utilizados nicolas losada salazar

aplicacion dokuwiki wamp