PDF de programación - Web Sciences - Presente y futuro de la Web

“The ideal architect should be a man of letters, a skillful draftsman, a
mathematician, familiar with historical studies, a diligent student of
philosophy, acquainted with music; not ignorant of medicine, learned
in the responses of jurisconsults, familiar with astronomy, and
astronomical calculations”
Vitruvius 25 B.C.

Web Sciences

Presente y futuro de la Web

Dr. Juan Ignacio Sanz Fuentes
enero 2016
[email protected]

Tecnologías para la Programación
y el Diseño Web i
2º GCD

computersciencemathematicswebengineeringartificialintelligenceeconomicslawsocio-culturalpsychologybiologyecologysociology contenido

▫ Breve introducción y evolución de la Web
▫ Arquitectura de las aplicaciones web
▫ Desarrollo de aplicaciones web
▫ Web Sciences

Breve introducción y
evolución de la Web

computersciencemathematicswebengineeringartificialintelligenceeconomicslawsocio-culturalpsychologybiologyecologysociology Origen de la Web




need international

collaboration

issues

editable

hypertext mesh
idea

URI
HTTP
HTML

technology

social

shared info

link to good stu!

can't access

info

hypertext +

net

idea

can't find

issues

stu!

URI
HTTP
HTML

technology

social

link

incentives

macro

micro

World Wide Web

macro

Web explosion

user-client-server-publisher

micro

issues

Google

spoofing...

can't find

stu!

index +

SVM

idea

eigenvector
algorithm

technology

social

link incentive

Ads

macro

Google

phenomenon

micro

Google site

wiki

wiki battles

can't write

issues

stu!

use forms

idea

to edit
content

wiki

process

form-based

editors

technology

social

anyone can
edit; respect

macro

wikipedia

micro

wiki

blog

need to
express

issues

column +
comments

idea

authentication,

editor,

trackback

technology

social

shared info

link to good stu!

macro

blogosphere

micro

blog

Evolución de la Web

web concebida
originalmente

La web del mañana

Aplicaciones y estándares web de alto nivel

Accesibilidad, internacionalización, independencia del dispositivo, QA

o
d
a
c
r
a
m

L
M
T
H
X

s
o
c
fi
á
r
g

G
V
S

s
e
n
o
i
c
a
m
n
a

i

L
I
M
S

s
o
d
o
m

s
e
l
p
i
t
l
ú
m

L
M
X
e
c
i
o
v

.
.
.

d
a
d
i
r
u
g
e
s

S
M
K

c
n
E

g
i
S

web services

Arquitectura

P
3
P

P
P
/
C
C

.
.
.

P
A
O
S

L
D
S
W

.
.
.

web semántica

RDF
OWL

(Base, Namespaces, XQuery, XML Schema, XSLT, XPath,

XLink, XPointer, XForms, ...)

XML

HTTP 1.1

URI

HTML

HTTP 1.0

URL

¿por qué HTML NO es

suficiente?

<P> paragraph

<BR> break

<B> bold

<H1> heading level 1

<P>09 19 2005
10:30 AM
MAD/LON
<BR>
IB745
<P>18C /home/photos/madrid.jpg</P>
<P>12C /home/photos/london.jpg</P>

• Tags shows how data should be rendered, not its

meaning.

• Automatic processing unavailable: an interpretation of the

sequence of elements and content found is needed

Es necesario definir estructura
y etiquetas con significado

<?xml version="1.0" encoding="iso-8859-1"?>
<ticket>
<date>
<day>19</day>
<month>09</month>
<year>2005</year>
</date>
<flight>
<airline>IB</airline>
<number>745</number>
<time>10:30 AM</time>
<departure id=”MAD” temp=”18C” img=”/home/photos/madrid.jpg”/>
<arrival id=”LON” temp=”12C” img=”/home/photos/london.jpg”/>
</flight>
</ticket>

Arquitectura de las
aplicaciones web

computersciencemathematicswebengineeringartificialintelligenceeconomicslawsocio-culturalpsychologybiologyecologysociology arquitectura Web
• Capas: separar lo que cambia de lo que permanece
• Varios niveles: arquitectura

100.000 pies
- Cliente - servidor (vs. P2P)
50.000 pies
- HTTP y URIs

Navegador
(Safari, Firefox,
Chrome, ...)

Internet

Website
uspceu.com

10.000 pies
- XHTML y CSS

5.000 pies
- Arquitectura de tres capas
- Escalado horizontal

html

css

Servidor web
(Apache,
Microsoft IIS,
WEBRick, ...)

Capa de

Presentación

Servidor de
aplicaciones

(Rack)

Capa de
Lógica

Base de
datos
(SQlite,

Postgres, ...)

Capa de

Persistencia

1.000 pies
- Modelo - Vista - Controlador
- MVC vs. Front controller o Page controller

Modelos

Contro-
ladores

Vistas

500 pies
- Modelos Active Record vs. Data Mapper
- Controladores RESTful (Representational State Transfer for
self-contained actions)
- Template View vs. Transform View

- Active Record
- Data Mapper

- REST

- Template View
- Transform View

12

arquitectura Web

100.000 pies
- Cliente - servidor (vs. P2P)
50.000 pies
- HTTP y URIs

Navegador
(Safari, Firefox,
Chrome, ...)

Internet

Website
uspceu.com

10.000 pies
- XHTML y CSS

5.000 pies
- Arquitectura de tres capas
- Escalado horizontal

html

css

Servidor web
(Apache,
Microsoft IIS,
WEBRick, ...)

Capa de

Presentación

Servidor de
aplicaciones

(Rack)

Capa de
Lógica

Base de
datos
(SQlite,

Postgres, ...)

Capa de

Persistencia

1.000 pies
- Modelo - Vista - Controlador
- MVC vs. Front controller o Page controller

Modelos

Contro-
ladores

Vistas

500 pies
- Modelos Active Record vs. Data Mapper
- Controladores RESTful (Representational State Transfer for
self-contained actions)
- Template View vs. Transform View

13

- Active Record
- Data Mapper

- REST

- Template View
- Transform View

arquitectura Web a 100.000 pies

• Cliente:

• Presentación, interfaz
• complejo actualmente

• Servidor:

• eficiencia

• Estándares web: cliente universal
• Otras arquitecturas: P2P como bitTorrent
• Arquitectura de producción/explotación vs desarrollo

14

arquitectura Web a 100.000 pies

1. El navegador (Safari) realiza una solicitud al servidor web (Bottle)
2. Bottle obtiene el contenido de la aplicación y lo envía de vuelta a
3. Safari muestra el contenido en pantalla y cierra la conexión HTTP

Safari

15

arquitectura Web

100.000 pies
- Cliente - servidor (vs. P2P)
50.000 pies
- HTTP y URIs

Navegador
(Safari, Firefox,
Chrome, ...)

Internet

Website
uspceu.com

10.000 pies
- XHTML y CSS

5.000 pies
- Arquitectura de tres capas
- Escalado horizontal

html

css

Servidor web
(Apache,
Microsoft IIS,
WEBRick, ...)

Capa de

Presentación

Servidor de
aplicaciones

(Rack)

Capa de
Lógica

Base de
datos
(SQlite,

Postgres, ...)

Capa de

Persistencia

1.000 pies
- Modelo - Vista - Controlador
- MVC vs. Front controller o Page controller

Modelos

Contro-
ladores

Vistas

500 pies
- Modelos Active Record vs. Data Mapper
- Controladores RESTful (Representational State Transfer for
self-contained actions)
- Template View vs. Transform View

16

- Active Record
- Data Mapper

- REST

- Template View
- Transform View

arquitectura Web a 50.000 pies

• Protocolo de red:

• Reglas participantes en un acuerdo
• Comunicación Navegador servidor web y vuelta
• HTTP basado en TCP/IP

• IP:

• Puerto:

• número identificación de cada máquina
• DNS traduce nombres a números (navegador)
• localhost es la propia máquina

• mismos agentes distintas conexiones

• HTTP: ip/hostname + puerto

17

arquitectura Web a 50.000 pies

• URI:

• http://localhost:8080/todo
• Recurso: imagen, texto, video, formulario, hoja de estilo, js, …
• SaaS: reglas recursos y REST

• HTTP: métodos Get, Post, Put, Delete, …
• Stateless:

• peticiones independientes, responsabilidad de la app saber si el usuario está logueado o no

• Cookies:

• responsabilidad del browser no SaaS ni app ni HTTP
• asociar navegador con sesión en servidor
• rails lo enmascara completamente
• http header set_cookie primera vez

18

arquitectura Web a 50.000 pies

1. El navegador (Safari) realiza una solicitud al servidor web (Bottle)

1.a. Safari construye una petición HTTP utilizando la URI http://localhost:8080/todo

para contactar con el servidor web (Bottle) que escucha en el puerto 8080 de la
misma máquina que el navegador (localhost)

1.b.Bottle que escucha en el puerto 8080 recibe una petición HTTP para el recurso /todo

(la lista de tareas en la aplicación todo)

2. Bottle obtiene el contenido de la aplicación y lo envía de vuelta a Safari
3. Safari muestra el contenido en pantalla y cierra la conexión HTTP

19

arquitectura Web

100.000 pies
- Cliente - servidor (vs. P2P)
50.000 pies
- HTTP y URIs

Navegador
(Safari, Firefox,
Chrome, ...)

Internet

Website
uspceu.com

10.000 pies
- XHTML y CSS

5.000 pies
- Arquitectura de tres capas
- Escalado horizontal

html

css

Servidor web
(Apache,
Microsoft IIS,
WEBRick, ...)

Capa de

Presentación

Servidor de
aplicaciones

(Rack)

Capa de
Lógica

Base de
datos
(SQlite,

Postgres, ...)

Capa de

Persistencia

1.000 pies
- Modelo - Vista - Controlador
- MVC vs. Front controller o Page controller

Modelos

Contro-
ladores

Vistas

500 pies
- Modelos Active Record vs. Data Mapper
- Controladores RESTful (Representational State Transfer for
self-contained actions)
- Template View vs. Transform View

20

- Active Record
- Data Mapper

- REST

- Template View
- Transform View

arquitectura Web a 10.000 pies

• HTML:

• lenguaje de marcado
• jerarquía, etiquetas anidadas
• start tag contenido end tag
• atributos

• id, class: inspector web

• CSS:

• selectores y propiedades
• CSS nivel 1, 2 y 3

21

arquitectura Web a 10.000 pies

1. El navegador (Safari) realiza una solicitud al servidor web (Bottle)

1.a. Safari construye una petición HTTP utilizando la URI http://localhost:8080/todo para contactar con
el servidor web (Bottle) que escucha en el puerto 8080 de la misma máquina que el navegador (localhost)
1.b.Bottle que escucha en el puerto 8080 recibe una petición HTTP para el recurso /todo (la lista de tareas
en la aplicación todo)

2. Bottle obtiene el contenido de la aplicación y lo envía de vuelta a Safari

2.a. Bottle devuelve el contenido codificado en HTML de nuevo utilizando HTTP. El código HTML puede

contener referencias a otros tipos de contenido como imágenes embebidas en la página a visualizar. El
código HTML puede además contener referencias a hojas de estilo CSS con información descrita sobre
atributos visuales de la página (fuentes, colores, di