tecnologías web y xml - cd universidad de...

Fundamentos Web

Jose Emilio Labra Gayo

Departamento de Informática

Universidad de Oviedo

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

Contenidos

Representación de información

Información textual

Información Binaria

Arquitectura de la Web

HTTP

URIs

Formatos de representación

Funcionamiento de la Web

Cliente

Servidor


Los ordenadores manejan código binario: 0s y 1s

Bytes: Grupos de 8 bits

Caracteres: Asociar a cada carácter un nº

Sistema ASCII (A)merican (S)tandard (C)ode for (I)nformation (I)nterchange

Utiliza 7 bits (0 – 127). Ejemplo: A = 65 = 1000001

Sólo cubre 27 = 128 caracteres

Diversas extensiones:

ISO-8859-1 (iso-latin-1)

(8 bits) ASCII (0-127) + otros caracteres típicos de Europa occidental

Familia ISO-8859-X = Otros alfabetos europeos

ISO-8859-15 (iso-latin-9): iso-8859-1 + símbolo de €

Información textual


ISO-10646: Define repertorio universal de caracteres (UCS)

UNICODE = Consorcio de empresas de internacionalización.

Estándard Unicode: Añade más definiciones a ISO-10646

Última versión 2012 (6.2) contiene más de 110.000 caracteres

Codificaciones (UTF = Unicode Transformation Format)

UTF-8: Código de longitud variable compatible con ASCII

UTF-16: Usa 16 bits para los caracteres más comunes, el resto con pares de 16 bits

UTF-32: Codificación directa en 32 bits (desperdicio de espacio)

NOTA: Conviene distinguir:

Carácter: Entidad abstracta (Letra A)Glifo (Glyph): Representación del carácter A A A A A A

Fuente (Font): Conjunto de glyphs, ejemplo: Times Roman, Arial, etc.

Unicode

Más información http://unicode.orghttp://unicode-table.com


UTF-8

Uno de los códigos más populares

Código de longitud variable

Los primeros 127 caracteres = ASCII

Bits Byte1 Byte2 Byte3 Byte4 Byte5 Byte6

0-7 0ccccccc - - - - -

8-11 110ccccc 10cccccc - - - -

12-16 1110cccc 10cccccc 10cccccc - - -

17-21 11110ccc 10cccccc 10cccccc 10cccccc - -

22-26 111110cc 10cccccc 10cccccc 10cccccc 10cccccc -

27-31 1111110c 10cccccc 10cccccc 10cccccc 10cccccc 10cccccc

Ejemplo: Z = 90 = 01011010 (= ASCII y UTF-8)= 5073 = 0001 001111 010001 (binario)

En UTF-8 = 11100001 10001111 10010001 (UTF-8)


Imágenes

Formatos Raster (Raw): Se enumeran los puntos con sus colores

Ejemplo: Bitmap, TIFF

Compresión: diversos algoritmos de compresión

GIF: Utiliza 8 bits (hasta 256 colores)

Byte de color = Indice en la paleta de colores

JPEG: utiliza 24 bits (hasta 16 millones de colores)

Sonido: Formatos raster (WAV) y comprimidos (MP3)

Vídeo: Formatos comprimidos (MPEG)

Información Binaria

¡Cuidado con la información binaria!


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

3 pilares

Interacción: Protocolos HTTP, FTP, SMTP, etc.

Identificación: URIs

Formatos de representación: HTML, JSON, XML, ...

Identificación

URI

Formatos

HTML, JSON,...Identificación

URI

Interacción

Protocolos

Formatos

HTML, JSON,...

WWW


Esquema conceptual de HTTP

Usuario Navegador

Cliente

Servidor

URI

Representación

WWW

HTTP

Petición

Respuesta

RecursosLa Web está formada por recursos

Recurso = cualquier fuente de contenido Web

Se identifican mediante URIs

Diversas Posibilidades:

Estáticos: almacenados en Sistema de FicherosPáginas HTML

Otros formatos multimedia: Imágenes, vídeos, sonidos, ...

Dinámicos: bajo demandaGenerado a partir de bases de datos

Integrando información de otros servicios Web

Información online

NOTA: La mayoría de la información disponible en la Web se genera dinámicamente

Recursos

NavegadorCliente

Servidor

URI

WWWHTTP

Fichero texto

Imagen

Base

datosPrograma

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

Usuario

NavegadorCliente

Servidor

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ón

Formato 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: valor1nombre2: 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 respuesta

Formato 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.it

Redbot http://redbot.org

Web-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="[email protected]" -password="abc"

Métodos HTTP

GET: Solicita una representación de un recurso

PUT: Crear 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

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

Métodos HTTP

Propiedades

Mé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étodosGET, PUT, POST y DELETE de HTTP no son idénticos

Cabeceras en la peticiónAccept: 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><html>…</html>

Cabeceras en la respuestaContent-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

. . .

Recursos

Recurso = Unidad básica de la Web

Cualquier cosa que se identifique con una URI

URI ≠ Recurso ≠ RepresentaciónURI

http://tiempo.com/Asturias/Oviedo

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>

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



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

description

language

publisher

. . .

Formato de una URI

Más información: Especificación

http://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: Significado especial de espacios, ?, /, etc.

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

Partes de una URI

Más información: Especificación


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

esquema autoridad//usuario@host:port

path querystring fragment

httphttphttpftpmailtourn

//localhost:3000//google.com//uniovi.es///[email protected]: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:[email protected]?subject=cursourn:isbn:045125021

Ejemplos

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 change

Modificar 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 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

HTMLTipo de representación más popular en la Web

Objetivo: representar hipertexto

Ejemplo:<!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á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>

JSONFacilita intercambio de información

Objetivo: procesamiento automático

Servicios 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 datos

Objetivo: 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ó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ámicamenteComputació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 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

Usuario

NavegadorCliente

URI

Representación

WWWHTTP

Analizador

ÁrbolDOM

MotorVisualizaciónInterfaz

Usuario

Intérprete ECMAscript

URI

Componentes de un Servidor

La arquitectura del servidor depende de muchos factoresDescomposición habitual

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

Computación en Servidor

Contenido es generado dinámicamente1. Llega la petición al servidor

2. El servidor analiza parámetros de peticiónVerbo (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

CGIs

Lenguajes específicos para Web: PHP

Lenguajes dinámicos: Perl, Python, Ruby,...

Javascript en servidor: Nodejs

Lenguajes generales compiladosJVM: Java (JSP, Servlets,...), Scala, Groovy

CLR: 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_INTERFACE

SERVER_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 servidor

El código se incrusta en HTML mediante marcas especiales

Cuando el servidor reconoce código PHP:Llama al intérprete

Ejecuta el código

Devuelve el resultado

Según w3techs, el 81.1% de los sitios Web utiliza PHP

http://w3techs.com/technologies/details/pl-php/all/all

Lenguajes dinámicos

Python, Ruby

Lenguajes interpretados de propósito general

Buenos frameworks y librerías para Web

Ruby: Ruby on Rails

Python: Django

...

Javascript lado servidor

Librería Node.js

Incluye V8, el motor Javascript de Google

Permite utilizar Javascript en el servidor

Entrada/Salida basada en eventos

Creciendo en popularidad

Lenguajes generales compilados

2 ecosistemas

Java (JVM) .Net (CLR)

JVM

Máquina virtual de Java

Empotrado: JSP

Servlets y Contenedores de aplicaciones

TOMCAT

Otros lenguajes sobre JVM

Scala, Groovy, ...

Programación políglota!

ASP.Net

Basado en CLR

Máquina virtual de C#

ASP Permite empotrar lenguaje en HTML

Extensión aspx <% .... código %>

Diversos frameworks: ASP.Net MVX

Otras lenguajes:

VB.Net, F#,...

Web Frameworks

Micro-frameworks

Basados en protocol HTTP

Enrutan verbos HTTP (GET, PUT, POST, DELETE) con acciones

MVC based

Abstracción del modelo de la Web

Separación: Modelo, Vista, Controlador

Pueden utilizar ORMs

Micro-frameworks

PHP: Slim, Silex

Ruby: Sinatra

Python: Flask

Java: Spark,

Scala: Scalatra

Frameworks Web

Numerosos frameworks

PHP: CakePHP, Zend, Symfony

Ruby: Ruby on Rails

Python: Django, Zope

Java: Spring MVC, Play

Scala: Play, Lift

Groovy: Grails

Haskell: Yesod

Más información:http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks

http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks


Referencias


Fin

tecnologías web y xml - cd universidad de...

Documents