Fundamentos de la web

Fundamentos Web

Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo

Contenidos

Arquitectura de la Web
HTTP
URIs
Formatos de representación
Funcionamiento de la Web
Cliente
Servidor

Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra

Arquitectura de la Web


Características de la Web

Gran cantidad de información
Acceso casi instantáneo desde cualquier lugar
No centralizado Cualquiera puede añadir información
Multimedia (Texto, Imágenes, Vídeo, etc.)
Identificación de recursos unificada (URIs)
Interactividad: Aplicaciones Web


Pilares de la Web
Los pilares de la Web son:
Protocolo HTTP
URIs para representar recursos
Lenguajes de representación: HTML, XML, etc.

URI

WWW
HTTP

Representación
Usuario Navegador Servidor
Cliente


Protocolo HTTP

HTTP (Hypertext transfer protocol):
Arquitectura cliente/servidor (petición / respuesta)
Nº métodos reducido:
GET, PUT, POST, DELETE, etc.
Mensajes de texto
Formato de mensajes
línea inicial
cabecera del mensaje*
cuerpo del mensaje ?
Utilidades para trazar mensajes http
curl http://curl.haxx.se/
Hurl http://hurl.it
Redbot http://redbot.org
Web-sniffer: http://web-sniffer.net/
RestClient http://code.google.com/p/rest-client/

Peticiones HTTP

Ejemplo

GET /index.html HTTP/1.1
Host: www.uniovi.es
User-Agent: Mozilla/5.0 …
Accept: text/xml, application/xml, text/html, …
Accept-language: us,en; q= 0.5

Métodos: Cabecera = parejas "nombre: valor“
GET
PUT
POST
DELETE
HEAD
OPTIONS


Métodos HTTP

GET: Solicita una representación de un recurso
PUT: Actualiza una representación de un recurso
POST: Envía datos para que un recurso los procese
Puede implicar la creación/actualización de recursos
DELETE: Elimina un recurso

Otros
HEAD: Similar a GET, pero obtiene únicamente la cabecera
TRACE: Pide la solicitud que se envió al servidor
OPTIONS: Solicita los métodos que soporta el servidor
CONNECT: Convierte la petición en un túnel TCP/IP
Facilita la comunicación a través de SSL


Cabeceras en la petición
Accept: Tipos de representaciones aceptables
Accept-charset: Conjunto de caracteres aceptable
Accept-encoding: Codificación de caracteres aceptable
Accept-language: Idiomas aceptables
Authorization: Indicar credenciales de autorización
Cache-control: Especificar directivas para controlar la cache
Connection: Tipo de conexión preferida
Cookie: Cookie enviada previamente por el servidor
Content-length: Longitud de la petición
Content-type: Tipo MIME del cuerpo de la petición
Date: Fecha/hora de la solicitud
If-Modified-Since: Permite enviar código 304 No modificado si no se ha
modificado el contenido desde una fecha
If-None-Match: Permite enviar código 304 No modificado (ETag)
User-Agent: Identifica el tipo agente de usuario utilizado
...

Respuestas HTTP

Ejemplo
HTTP/1.1 200 OK
Date: Fri, 17 Nov 2006 15:36:32 GMT
Server: Apache
Last-Modified: Fri, 17 Nov 2006 09:05:32 GMT
Content-length: 43305
Content-type: text/html

<!DOCTYPE html PUBLIC …>
<html xmlns=“…”>
…
</html>

Códigos estándar:
2**: Variaciones de OK
3**: redirecciones
4**: Problemas del cliente (404, no encontrado)
5**: problemas del servidor

Cabeceras en la respuesta

Content-type: Tipo MIME de la respuesta
Cache-control: Especificar directivas para controlar la cache
Content-encoding: Tipo de codificación utilizado en el mensaje
Content-language: Idioma utilizado en el mensaje
Content-length: Tamaño del mensaje
Content-location: Localización alternativa de los datos devueltos
Date: Fecha/hora de la respuesta
ETag: Identificador de la versión de un recurso
Expires: Fecha a partir de la cual el contenido puede eliminarse de la caché
Server: Identifica el tipo de servidor
Set-cookie: Activa una cookie en el cliente
WWW-Authenticate: Indica el esquema de autentificación a utilizar
...


URIs


Recursos
Recurso = Unidad básica de la Web
Cualquier cosa que se identifique con una URI
URI ≠ Recurso ≠ Representación

URI http://tiempo.com/Asturias/Oviedo

Tiempo en Oviedo
Representación
Metadatos:
Content-type: text/html

Datos:
<html>
<head><title>Tiempo</title></head>
<body> Recurso
<h1>Tiempo en Oviedo</h1>
<p>Nubes y claros</p>
</body>
</html>


¿Qué se puede identificar con una URI?

Cualquier cosa concreta o abstracta

Ejemplo: Una página Web

http://www.uniovi.es

<!DOCTYPE html>
<html>
<head>
<title>Universidad de Oviedo</title>
</head>
identifica <body>
<h1>Universidad de Oviedo</h1>
<p>Fundada en el año 1608 en
<a href="http://www.wikipedia.org/Oviedo">
Oviedo</a></p>
. . .
</body>
</html>

Una página Web
Recurso de información
Formato HTML




Ejemplo: Una fotografía (recurso multimedia)

http://www.di.uniovi.es/~labra/images/asturias.jpg

identifica

Una fotografía
Recurso de información
Formato JPG




Ejemplo: Una persona

http://www.w3.org/People/Berners-Lee/card#i

identifica

Una persona (Tim Berners-Lee)
Recurso de no información




Ejemplo: Conjunto de todas las personas

http://xmlns.com/foaf/0.1/Person

identifica

Conjunto de Personas (concepto abstracto)




Ejemplo: Propiedad de creación

http://purl.org/dc/terms/creator

identifica

Propiedad de creación (concepto abstracto)




Ejemplo: Espacio de nombres

http://purl.org/dc/terms

publisher

description

identifica ...
language

Espacio de nombres (concepto)


Formato de una URI

esquema : // autoridad camino ?consulta #fragmento

http :// ejemplo.com:8042 /libros/castellano ?autor=Cervantes #capitulo2

Nota: los caracteres deben codificarse. Significado especial de espacios, ?, /, etc.

Otros ejemplos de URIs:
ftp://ftp.is.co.za/rfc/rfc1808.txt
mailto:pepe@ejemplo.com
telnet://192.0.2.16:80/
urn:oasis:names:specification:docbook:dtd:xml:4.1.2
Nota: las URNs identifican nombres únicos solamente. Sin protocolo

Más información: Especificación
http://tools.ietf.org/html/rfc3986

Dereferenciación

Dereferenciar una URI = Acceder al contenido de una URI
Obtener una representación del recurso identificado por la URI
Habitualmente se utiliza protocolo HTTP
Pueden existir diferentes representaciones
La representación puede incluir enlaces a otras URIs con
información relacionada

Principio: Follow your nose (“Sigue tu instinto”)

A partir de una URI, se puede ir encontrando más
información y más recursos relacionados fácilmente y de
casualidad (serendipia)


Estabilidad de las URIs

URIs = pilar fundamental de cualquier aplicación Web
Objetivo: Esquema de URIs estable
Lema: Cool URIs don’t change
Modificar una URI puede romper aplicaciones existentes
Evitar URIs que dependen de detalles de implementación
Ejemplo: http://156.35.41.34:8080/pagina.php

Recomendaciones:
Una URI genérica + 1 URI para cada representación
Ejemplo:
http://periodico.com/noticias/101 - URI genérica para la noticia 101
http://periodico.com/noticias/101.en - URI para la noticia en inglés
http://periodico.com/noticias/101.es - URI para la noticia en español

Importancia de nombres adecuados para URIs
http://www.w3.org/Provider/Style/URI

Formatos de Representación


Formatos de representación

En la Web, el formato más habitual es HTML
Existen muchos más formatos: XML, JSON, RDF, PNG, …
Un recurso puede tener diferentes tipos de representación
Cada tipo de representación sirve para un propósito


HTML

Tipo de representación más popular en la Web
Objetivo: representar hipertexto
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
</head>
<body>
<h1>Lista de enlaces</h1>
<p>Mis enlaces preferidos</p>
<ul>
<li><a href="http://www.wikipedia.org">Wikipedia</a>
<li><a href="http://www.w3c.org">Consorcio W3c</a>
</ul>
</body>
</html>

XML

Facilita intercambio de información
Objetivo: procesamiento automático
Comercio electrónico
<?xml version="1.0">
<pedido>
<producto codigo="R23">
<nombre>Rotulador RX2</nombre>
<cantidad>20</cantidad>
<comentarios>Comprobad que escriben</comentarios>
</producto>
<producto codigo="G56">
<nombre>Grapadora Lin</nombre>
<cantidad>2</cantidad>
<comentarios>Envuelta para regalo</comentarios>
</producto>
</pedido>


Tipos de representación

Los tipos de representación se identifican con MIME
MIME (Multipurpose Internet Mail Extensions)
Identificar el tipo de contenido (Cabecera Content-type)
Formato tipo/subtipo
Ejemplos:
text/html: Página Web en formato HTML
text/xml, application/xml : Documento XML
application/json: Documento JSON
application/pdf: Fichero PDF
image/jpeg: Imagen JPEG
application/xhtml+xml: Documento XHTML
application/rdf+xml: Documento RDF
text/turtle: Documento Turtle
...

Lista oficial: http://www.iana.org/assignments/media-types

Funcionamiento de la Web

2 computadores conceptuales: Cliente y Servidor
La representación puede calcularse dinámicamente
Computación en Cliente
Computación en servidor

URI

WWW
HTTP

Representación
Usuario Navegador Servidor
Cliente


Cliente

También se conoce como Agente de Usuario
Normalmente es un navegador (browser)
Múltiples tipos de agentes de usuarios y navegadores
Navegadores: Internet Explorer, Chrome, Firefox, Lynx, …
Dispositivos móviles
Lectores de pantalla
eBooks
TVs
…


Componentes de un navegador

Interfaz
Analizador
Motor visualización
Intérprete ECMAScript procesa eventos y modifica árbol
URI

URI
Motor WWW
Interfaz Visualización HTTP
Usuario
Analizador
Intérprete Representación
ECMAscript Árbol
Usuario
DOM
Navegador
Cliente

Motor de visualización

A veces los navegadores comparten el mismo motor de
visualización (rendering engine)

Navegadores Motor de
visualización
Internet Explorer Trident
Firefox Gecko
Opera Presto
Chrome Webkit (Webcore)
Safari (iPhone, iPad) Webkit


ECMAScript

Lenguaje interpretado basado en prototipos
Origen: Brendan Eich, Netscape (1995)
ECMAscript = estándar con dialectos Javscript, Jscript...
Permite la interacción entre el usuario del navegador y el árbol
DOM
Los navegadores utilizan APIs para crear objetos que pueden
manipular el árbol DOM


Intérprete de ECMAScript

Competición entre intérpretes

Navegadores Lenguaje Implementación

Internet Explorer JScript Chakra
Firefox Javascript Rhino
Tracemonkey
lonMonkey
Chrome, Javascript V8
Safari (iPhone, iPad) Javascript Squirrelfish (Nitro)

Opera Javascript Carakan


Componentes de un Servidor

La arquitectura del servidor suele descomponerse en
varias capas
Vista: Se encarga de preparar la representación
Negocio: Gestión de objetos de negocio
Datos: Modelos de datos

URI URI

WWW
Capa Capa Capa
HTTP
Vista Negocio
Datos

Representación


Tecnologías del lado servidor

Múltiples frameworks y lenguajes
Java: J2EE, Spring,…
Ruby: Ruby on Rails, Sinatra, Padrino…
Python: Django,…
Scala: Lift,…
PHP: Zend…
Modelo de datos
Bases de datos relacionales
Modelos NoSQL
Modelos RDF


Fin

Fundamentos de la web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Fundamentos de la web

Similar a Fundamentos de la web (20)

Más de Jose Emilio Labra Gayo

Más de Jose Emilio Labra Gayo (20)

Último

Último (20)

Fundamentos de la web