tecnologías web y xml - cd universidad de...
TRANSCRIPT
![Page 1: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/1.jpg)
Fundamentos Web
Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo
![Page 2: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/2.jpg)
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
![Page 3: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/3.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 4: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/4.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 5: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/5.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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)
![Page 6: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/6.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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!
![Page 7: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/7.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Arquitectura de la Web
![Page 8: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/8.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 9: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/9.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 10: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/10.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Esquema conceptual de HTTP
Usuario Navegador
Cliente
Servidor
URI
Representación
WWW
HTTP
Petición
Respuesta
![Page 11: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/11.jpg)
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
![Page 12: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/12.jpg)
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
![Page 13: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/13.jpg)
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
![Page 14: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/14.jpg)
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
![Page 15: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/15.jpg)
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:
![Page 16: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/16.jpg)
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:
![Page 17: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/17.jpg)
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,...)
![Page 18: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/18.jpg)
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"
![Page 19: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/19.jpg)
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
![Page 20: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/20.jpg)
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
![Page 21: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/21.jpg)
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
. . .
![Page 22: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/22.jpg)
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>
![Page 23: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/23.jpg)
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
. . .
![Page 24: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/24.jpg)
URIs
![Page 25: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/25.jpg)
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
![Page 26: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/26.jpg)
¿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
![Page 27: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/27.jpg)
¿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
![Page 28: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/28.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
![Page 29: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/29.jpg)
¿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
![Page 30: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/30.jpg)
¿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
![Page 31: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/31.jpg)
¿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
description
language
publisher
. . .
![Page 32: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/32.jpg)
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
![Page 33: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/33.jpg)
Partes de una URI
Más información: Especificación
http://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///[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
![Page 34: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/34.jpg)
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)
![Page 35: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/35.jpg)
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
![Page 36: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/36.jpg)
Formatos de Representación
![Page 37: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/37.jpg)
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
![Page 38: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/38.jpg)
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>
![Page 39: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/39.jpg)
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>
![Page 40: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/40.jpg)
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"
}]
}
![Page 41: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/41.jpg)
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
] .
![Page 42: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/42.jpg)
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
![Page 43: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/43.jpg)
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
![Page 44: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/44.jpg)
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
…
![Page 45: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/45.jpg)
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
![Page 46: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/46.jpg)
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
![Page 47: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/47.jpg)
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
![Page 48: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/48.jpg)
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.
![Page 49: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/49.jpg)
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)
![Page 50: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/50.jpg)
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
![Page 51: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/51.jpg)
Lenguajes dinámicos
Python, Ruby
Lenguajes interpretados de propósito general
Buenos frameworks y librerías para Web
Ruby: Ruby on Rails
Python: Django
...
![Page 52: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/52.jpg)
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
![Page 53: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/53.jpg)
Lenguajes generales compilados
2 ecosistemas
Java (JVM) .Net (CLR)
![Page 54: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/54.jpg)
JVM
Máquina virtual de Java
Empotrado: JSP
Servlets y Contenedores de aplicaciones
TOMCAT
Otros lenguajes sobre JVM
Scala, Groovy, ...
Programación políglota!
![Page 55: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/55.jpg)
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#,...
![Page 56: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/56.jpg)
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
![Page 57: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/57.jpg)
Micro-frameworks
PHP: Slim, Silex
Ruby: Sinatra
Python: Flask
Java: Spark,
Scala: Scalatra
![Page 58: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/58.jpg)
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
![Page 59: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/59.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Referencias
![Page 60: Tecnologías Web y XML - CD Universidad de Oviedodi002.edv.uniovi.es/~labra/cursos/presentaciones/1...Estáticos: almacenados en Sistema de Ficheros Páginas HTML Otros formatos multimedia:](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed2b678d0cb7c1cf73858fd/html5/thumbnails/60.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Fin