Fundamentos de la web

Fundamentos Web

Jose Emilio Labra Gayo

Departamento de Informática

Universidad de Oviedo

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

Contenidos

Arquitectura de la WebHTTP

URIs

Formatos de representación

Funcionamiento de la WebCliente

Servidor


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.

Usuario NavegadorCliente

Servidor

URI

Representación

WWWHTTP


Protocolo HTTP

• HTTP (Hypertext transfer protocol):– Arquitectura cliente/servidor (petición /

respuesta)– Nº métodos reducido:

• GET, PUT, POST, DELETE, etc.

– Mensajes de texto

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/

Utilidades para trazar mensajes http

línea inicialcabecera del mensaje*cuerpo del mensaje ?

Formato de mensajes


Peticiones HTTP

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

Métodos: GETPUTPOSTDELETEHEADOPTIONS

Cabecera = parejas "nombre: valor“

Ejemplo


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 procesePuede implicar la creación/actualización de recursos

DELETE: Elimina un recurso

OtrosHEAD: 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

• EjemploHTTP/1.1 200 OKDate: Fri, 17 Nov 2006 15:36:32 GMTServer: ApacheLast-Modified: Fri, 17 Nov 2006 09:05:32 GMTContent-length: 43305Content-type: text/html

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

Códigos estándar: 2**: Variaciones de OK3**: redirecciones4**: 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 WebCualquier cosa que se identifique con una

URI

URI ≠ Recurso ≠ RepresentaciónURI http://tiempo.com/Asturias/Oviedo Identifica

Metadatos: Content-type: text/html

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

Representa

Representación

Recurso

Tiempo en Oviedo


¿Qué se puede identificar con una URI?

Cualquier cosa concreta o abstracta

http://www.uniovi.es

<!DOCTYPE html><html> <head> <title>Universidad de Oviedo</title> </head> <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>

<!DOCTYPE html><html> <head> <title>Universidad de Oviedo</title> </head> <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>

identifica

Ejemplo: Una página Web

Una página WebRecurso de información

Formato HTML




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

identifica

Ejemplo: Una fotografía (recurso multimedia)

Una fotografíaRecurso de información

Formato JPG




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

identifica

Ejemplo: Una persona

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




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

identifica

Ejemplo: Conjunto de todas las personas

Conjunto de Personas (concepto abstracto)Recurso de no información




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

identifica

Ejemplo: Propiedad de creación

Propiedad de creación (concepto abstracto)Recurso de no información




http://purl.org/dc/terms

identifica

Ejemplo: Espacio de nombres

Espacio de nombres (concepto)Recurso de no información

creator title

subject

contributor

created

datedescription

format

languagemodified

publisher

rights . . .


Formato de una URI

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

esquema : // autoridad camino ?consulta#fragmento

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

Otros ejemplos de URIs:

ftp://ftp.is.co.za/rfc/rfc1808.txt

mailto:[email protected]

telnet://192.0.2.16:80/

urn:oasis:names:specification:docbook:dtd:xml:4.1.2

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

Nota: las URNs identifican nombres únicos solamente. Sin protocolo


Dereferenciación

Dereferenciar una URI = Acceder al contenido de una URIObtener 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 changeModificar una URI puede romper aplicaciones existentes

Evitar URIs que dependen de detalles de implementaciónEjemplo: http://156.35.41.34:8080/pagina.php

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

Recomendaciones: Una URI genérica + 1 URI para cada representaciónEjemplo:

http://periodico.com/noticias/101 - URI genérica para la noticia 101http://periodico.com/noticias/101.en - URI para la noticia en ingléshttp://periodico.com/noticias/101.es - URI para la noticia en español


Formatos de Representación


Formatos de representación

En la Web, el formato más habitual es HTMLExisten 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ónObjetivo: 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 ServidorLa representación puede calcularse dinámicamente

Computación en Cliente

Computación en servidor

Usuario NavegadorCliente

Servidor

URI

Representación

WWWHTTP


Cliente

También se conoce como Agente de Usuario

Normalmente es un navegador (browser)

Múltiples tipos de agentes de usuarios y navegadoresNavegadores: 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

Usuario

NavegadorCliente

URI

Representación

WWWHTTP

Analizador

ÁrbolDOM

MotorVisualizaciónInterfaz

Usuario

Intérprete ECMAscript

URI


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 RhinoTracemonkeylonMonkey

Chrome, Javascript V8

Safari (iPhone, iPad) Javascript Squirrelfish (Nitro)

Opera Javascript Carakan


Componentes de un Servidor

La arquitectura del servidor suele descomponerse en varias capasVista: Se encarga de preparar la representación

Negocio: Gestión de objetos de negocio

Datos: Modelos de datos

CapaVista

CapaNegocio

URI

CapaDatos

Representación

URI

WWWHTTP


Tecnologías del lado servidor

Múltiples frameworks y lenguajesJava: J2EE, Spring,…

Ruby: Ruby on Rails, Sinatra, Padrino…

Python: Django,…

Scala: Lift,…

PHP: Zend…

Modelo de datosBases de datos relacionales

Modelos NoSQL

Modelos RDF


• Fin

Fundamentos de la web

Education

Transcript of Fundamentos de la web