Post on 15-Jan-2017
Arquitectura de la Web yComputación en el Servidor
Jose Emilio Labra GayoDepto. Informática
Universidad de Oviedo
Pilares de la Web3 pilares
Interacción: Protocolos HTTP, FTP, SMTP, etc.Identificación: URIsFormatos de representación: HTML, JSON, XML, ...
IdentificaciónURI
FormatosHTML, JSON,...
IdentificaciónURI
InteracciónProtocolos
FormatosHTML, JSON,...
WWW
Protocolos: HTTP
HTTP (Hypertext Transfer Protocol)Versión 0.9 (1991)HTTP 1.0 (1996) desarrollado por HTTP WG (IETF)HTTP/1.1 (1999) RFC 2616
Modo textoArquitectura de la Web
SPDY (2009) GoogleHTTP/2.0 (2015)
Cabeceras comprimidas, formato binarioObjetivo: rendimiento
Esquema conceptual de HTTP
Usuario NavegadorCliente
Servidor
URI
Representación
WWWHTTP
Petición
Respuesta
RecursosLa Web está formada por recursosRecurso = cualquier fuente de contenido Web
Se identifican mediante URIs
Diversas Posibilidades:Estáticos: almacenados en Sistema de Ficheros
Páginas HTMLOtros formatos multimedia: Imágenes, vídeos, sonidos, ...
Dinámicos: bajo demandaGenerado a partir de bases de datosIntegrando información de otros servicios WebInformación onlineNOTA: La mayoría de la información disponible en la Web se
genera dinámicamente
Recursos
NavegadorCliente
Servidor
URI
WWWHTTP
Fichero texto
Imagen
Basedatos
Programa
Sistema ficheros
=
Gateway
Gateway
Gateway
GatewayOtro servidor
CámaraWeb
Base datos
Informac.Bursátil
ControlRobot
Tipos de recursosLos servidores asocian un tipo a cada recurso
Tipos MIME (Multipurpose Internet Mail Extensions)
Ejemplos: text/plain, text/html, application/xml, image/jpg,...
El cliente decide qué hacer con dichos tipos
UsuarioNavegador
ClienteServidor
Petición
Respuesta
WWWHTTP
Content-type: image/jpegContent-length: 8854
HTTP: Formato de mensajesModo texto: línea inicial
cabecera del mensaje*cuerpo del mensaje ?
NavegadorCliente
Servidor
Petición
WWWHTTP
HTTP/1.1 200 OKDate: Thu, 12 Oct 2013 09:36:05 GMTServer: ApacheContent-length: 80554Content-type: text/html; charset=utf-8<html> <head> <title>Curso XML</title> <head> ...</html>
GET /index.html HTTP/1.1Host: www.uniovi.esUser-Agent: Mozilla/5.0 …Accept: text/htmlAccept-language: es, en
Respuesta
Mensajes de peticiónFormato general:
POST /admin HTTP/1.1Host: www.uniovi.esUser-Agent: Mozilla/5.0 …Accept: text/htmlAccept-language: es, en...datos POST...
<method> <url> <version><headers> *<entity-body>
GET /index.html HTTP/1.1Host: www.uniovi.esUser-Agent: Mozilla/5.0 …Accept: text/htmlAccept-language: es, en
<headers> = parejas de la forma: nombre1: valor1 nombre2: valor2
<method>= GET,PUT,POST,DELETE,...
Ejemplos:
HTTP/1.1 200 OKDate: Thu, 12 Oct 2013 09:36:05 GMTServer: ApacheContent-length: 80554Content-type: text/html; charset=utf-8<html> <head> <title>Curso XML</title> <head> ...</html>
Mensajes de respuestaFormato general:
HTTP/1.1 404 Not foundContent-length: 0
<version> <status> <reason-phrase><headers> *<entity-body>
<Status>Códigos estándar: 2**: Variaciones de OK3**: redirecciones4**: Problemas del cliente5**: problemas del servidor
Ejemplos:
Utilidades
Diversas utilidadescurl http://curl.haxx.se/Hurl http://hurl.itRedbot http://redbot.orgWeb-sniffer: http://web-sniffer.net/RestClient http://code.google.com/p/rest-client/
curl http://cursoxml.herokuapp.comAlgunas opciones: -v (verbose) -H (cabeceras) -X (verbos POST, PUT, DELETE,...)
CURLEjemplos:
curl http://cursoxml.herokuapp.com
curl -H "Accept-language:es" http://cursoxml.herokuapp.com
curl -H "Accept:text/html" http://cursoxml.herokuapp.com/search?course=html5
curl -H "Accept:application/xml" http://cursoxml.herokuapp.com/search?course=html5
curl -X POST http://cursoxml.herokuapp.com/login -d email="pepe@abc.org" -password="abc"
Métodos HTTPGET: Solicita una representación de un recursoPUT: Crear un recursoPOST: Envía datos para que un recurso los procese
Puede implicar la creación/actualización de recursos
DELETE: Elimina un recursoOtros
HEAD: Similar a GET, pero obtiene únicamente la cabeceraTRACE: Pide la solicitud que se envió al servidorOPTIONS: Solicita los métodos que soporta el servidorCONNECT: Convierte la petición en un túnel TCP/IP
Facilita la comunicación a través de SSL
Métodos HTTP
PropiedadesMétodo Bases de
datos*Función Segura? Idempotente?
PUT Create Crear recurso No SI
POST Update Actualizar No No
GET Retrieve Consultar recurso Si Si
DELETE Delete Eliminar recurso No Si
* Aunque son similares, las operaciones CRUD de bases de datos y los métodos GET, PUT, POST y DELETE de HTTP no son idénticos
Cabeceras en la peticiónAccept: Tipos de representaciones aceptablesAccept-charset: Conjunto de caracteres aceptableAccept-encoding: Codificación de caracteres aceptableAccept-language: Idiomas aceptablesAuthorization: Indicar credenciales de autorizaciónCache-control: Especificar directivas para controlar la cacheConnection: Tipo de conexión preferidaCookie: Cookie enviada previamente por el servidorContent-length: Longitud de la peticiónContent-type: Tipo MIME del cuerpo de la peticiónDate: Fecha/hora de la solicitudIf-Modified-Since: Permite enviar código 304 No modificado si no se ha modificado el contenido desde una fechaIf-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><html> …</html>
Cabeceras en la respuestaContent-type: Tipo MIME de la respuestaCache-control: Especificar directivas para controlar la cacheContent-encoding: Tipo de codificación utilizado en el mensajeContent-language: Idioma utilizado en el mensajeContent-length: Tamaño del mensajeContent-location: Localización alternativa de los datos devueltosDate: Fecha/hora de la respuestaETag: Identificador de la versión de un recursoExpires: Fecha a partir de la cual el contenido puede eliminarse de la cachéServer: Identifica el tipo de servidorSet-cookie: Activa una cookie en el clienteWWW-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>
identifica
Ejemplo: Una página Web
Una página WebRecurso de información
Formato HTML
¿Qué se puede identificar con una URI?
Cualquier cosa concreta o abstracta
http://www.di.uniovi.es/~labra/images/asturias.jpg
identifica
Ejemplo: Una fotografía (recurso multimedia)
Una fotografíaRecurso de información
Formato JPG
¿Qué se puede identificar con una URI?
Cualquier cosa concreta o abstracta
http://www.w3.org/People/Berners-Lee/card#i
identifica
Ejemplo: Una persona
Una persona (Tim Berners-Lee)Recurso de no información
¿Qué se puede identificar con una URI?
Cualquier cosa concreta o abstracta
http://xmlns.com/foaf/0.1/Person
identifica
Ejemplo: Conjunto de todas las personas
Conjunto de Personas (concepto abstracto)Recurso de no información
¿Qué se puede identificar con una URI?
Cualquier cosa concreta o abstracta
http://purl.org/dc/terms/creator
identifica
Ejemplo: Propiedad de creación
Propiedad de creación (concepto abstracto)Recurso de no información
¿Qué se puede identificar con una URI?
Cualquier cosa concreta o abstracta
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://autoridadcamino?consulta#fragmento
http://ejemplo.com:8042/libros/castellano?autor=Cervantes#capitulo2
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: Significado especial de espacios, ?, /, etc.
Nota: las URNs identifican nombres únicos solamente. Sin protocolo
Partes de una URI
Más información: Especificaciónhttp://tools.ietf.org/html/rfc3986
Nota: las URNs identifican nombres únicos solamente. Sin protocolo
esquema autoridad//usuario@host:port
path querystring fragment
httphttphttpftpmailtourn
//localhost:3000//google.com//uniovi.es///ftp.is.co.zapepe@uni.esisbn:045125021
/about//course/view.php/rdf/rfc1808.txt
?a=1&b=2?q=pepe?id=4590
?subject=Curso
#historia
http://localhost:3000/about?a=1&b=2#historiahttp://google.com/?q=pepehttp://uniovi.es/course/view.php?id=4590ftp://ftp.is.co.za/rdf/rfc1808.txtmailto:pepe@uni.es?subject=cursourn:isbn:045125021
Ejemplos
DereferenciaciónDereferenciar una URI = Acceder al contenido de una URI
Obtener una representación del recurso identificado por la URI
Habitualmente se utiliza protocolo HTTPPueden existir diferentes representacionesLa 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 URIsURIs = pilar fundamental de cualquier aplicación WebObjetivo: Esquema de URIs estableLema: Cool URIs don’t change
Modificar una URI puede romper aplicaciones existentesEvitar URIs que dependen de detalles de implementación
Ejemplo: http://156.35.41.34:8080/pagina.php
Importancia de nombres adecuados para URIshttp://www.w3.org/Provider/Style/URI
URI
Formatos de Representación
Formatos de representaciónEn 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ónCada tipo de representación sirve para un propósito
HTMLTipo de representación más popular en la WebObjetivo: representar hipertextoEjemplo:
<!DOCTYPE html><html><head><title>Pedido</title><meta charset="utf-8" /> </head><body><h1>Pedido</h1><table><tr><th>Código</th><th>Nombre</th><th>Cantidad</th><th>Comentarios</th></tr><tr><td>R23</td><td>Rotulador RX2</td><td>20</td><td>Comprobad que escriben</td></tr><tr><td>G56</td><td>Grapadora Lin</td><td>2</td><td>Envuelta para regalo</td></tr></table><p>Más información: <a href="http://empresa.com">Empresa</a></body></html>
XMLFacilita intercambio de información
Objetivo: procesamiento automáticoComercio 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>
JSONFacilita intercambio de información
Objetivo: procesamiento automáticoServicios Web { "pedido": [
{ "type": "producto", "codigo": "R23", "nombre": "Rotulador RX2", "cantidad": 20, "comentarios": "Comprobad que escriben" }, { "type": "producto", "codigo": "G56", "nombre": "Grapadora Lin", "cantidad": 2, "comentarios": "Envuelta para regalo" } ]}
RDFPermite integración de información
Integración automática de los datosObjetivo: Evitar ambigüedad en cadenas de texto
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .@prefix schema: <http://schema.org/> .@prefix : <http://example.org/> .@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
:pedido a schema:Order ; schema:orderedItem [ :code "R23"; schema:name "Rotulador RX2"; rdfs:comment "Comprobad que escriben"; schema:orderQuantity 20 ] ; schema:orderedItem [ :code "G56"; schema:name "Grapadora Lin"; rdfs:comment "Envuelta para regalo"; schema:orderQuantity 2 ] .
Tipos de representaciónLos tipos de representación se identifican con MIMEMIME (Multipurpose Internet Mail Extensions)
Identificar el tipo de contenido (Cabecera Content-type)Formato tipo/subtipoEjemplos:
text/html: Página Web en formato HTMLtext/xml, application/xml : Documento XMLapplication/json: Documento JSONapplication/pdf: Fichero PDFimage/jpeg: Imagen JPEGapplication/xhtml+xml: Documento XHTMLapplication/rdf+xml: Documento RDFtext/turtle: Documento Turtle. . .
Lista oficial: http://www.iana.org/assignments/media-types
Funcionamiento de la Web2 computadores conceptuales: Cliente y Servidor
La representación puede calcularse dinámicamenteComputación en ClienteComputación en servidor
Usuario NavegadorCliente
Servidor
URI
Representación
WWWHTTP
Cliente
También se conoce como Agente de UsuarioNormalmente es un navegador (browser)Múltiples tipos de agentes de usuarios y navegadores
Navegadores: Internet Explorer, Chrome, Firefox, Lynx, …Dispositivos móvilesLectores de pantallaeBooksTVs…
Componentes de un navegadorInterfazAnalizadorMotor visualizaciónIntérprete ECMAScript procesa eventos y modifica árbol
Usuario
NavegadorCliente
URI
Representación
WWWHTTP
Analizador
ÁrbolDOM
MotorVisualizaciónInterfaz
Usuario
Intérprete ECMAscript
URI
Componentes de un ServidorLa arquitectura del servidor depende de muchos factoresDescomposición habitual
Vista: Se encarga de preparar la representaciónNegocio: Gestión de objetos de negocioDatos: Modelos de datos
CapaVista
CapaNegocio
URI
CapaDatos
Representación
URI
WWWHTTP
Computación en Servidor
Contenido es generado dinámicamente1. Llega la petición al servidor 2. El servidor analiza parámetros de petición
Verbo (GET, PUT, POST, ...), Ruta (URI), Cabeceras, Entorno
3. Servidor "computa" y envía una respuesta
Usuario NavegadorCliente
Servidor
URI
Representación
WWWHTTP
Petición
Respuesta
MétodoURIHeadersEnvironment
Múltiples alternativas
CGIsLenguajes específicos para Web: PHPLenguajes dinámicos: Perl, Python, Ruby,...Javascript en servidor: NodejsLenguajes generales compilados
JVM: Java (JSP, Servlets,...), Scala, GroovyCLR: C# (ASP.Net), F#, ...
Otros: Frameworks, CMS, etc.
CGI
CGI (Common Gateway Interface), 1.1 (2004)Método estándar para transmitir parámetros entre servidor y programas ejecutables
Nombres de variablesSERVER_NAME, SERVER_SOFTWARE, GATEWAT_INTERFACESERVER_PROTOCOL, REQUEST_METHOD, QUERY_STRING,...
Los programas CGIs son ejecutados por el servidorDevuelve la respuesta de la ejecución
Otras variantes: FastCGI (optimiza creación de procesos)
PHP
Lenguaje interpretado por el servidorEl código se incrusta en HTML mediante marcas especiales
Cuando el servidor reconoce código PHP:Llama al intérpreteEjecuta el códigoDevuelve el resultado
Según w3techs, el 81.1% de los sitios Web utiliza PHP
Lenguajes dinámicos
Python, RubyLenguajes interpretados de propósito generalBuenos frameworks y librerías para WebRuby: Ruby on RailsPython: Django...
Javascript lado servidor
Librería Node.js Incluye V8, el motor Javascript de GooglePermite utilizar Javascript en el servidorEntrada/Salida basada en eventosCreciendo en popularidad
Lenguajes generales compilados
2 ecosistemasJava (JVM) .Net (CLR)
JVM
Máquina virtual de JavaEmpotrado: JSPServlets y Contenedores de aplicaciones
TOMCATOtros lenguajes sobre JVM
Scala, Groovy, ...Programación políglota!
ASP.Net
Basado en CLR Máquina virtual de C#
ASP Permite empotrar lenguaje en HTMLExtensión aspx <% .... código %>
Diversos frameworks: ASP.Net MVXOtras lenguajes:
VB.Net, F#,...
Web Frameworks
Micro-frameworksBasados en protocol HTTPEnrutan verbos HTTP (GET, PUT, POST, DELETE) con acciones
MVC basedAbstracción del modelo de la WebSeparación: Modelo, Vista, ControladorPueden utilizar ORMs
Micro-frameworks
PHP: Slim, SilexRuby: SinatraPython: FlaskJava: Spark, Scala: Scalatra
Frameworks Web
Numerosos frameworksPHP: CakePHP, Zend, SymfonyRuby: Ruby on RailsPython: Django, ZopeJava: Spring MVC, PlayScala: Play, LiftGroovy: GrailsHaskell: Yesod
Más información:http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks