1 fundamentos 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

Representación de informaciónInformación textual

Información Binaria

Arquitectura de la WebHTTP

URIs

Formatos de representación

Funcionamiento de la WebCliente

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 €

¡CUIDADO! ...hay muchos idiomas y muchos caracteres...

€ ℜ きㄝ㌟㉃ ∀ ℵ ⋐ ₤ ウぼ

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.org http://unicode-table.com


UTF-8

Uno de los códigos más popularesCó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 pilaresInteracción: Protocolos HTTP, FTP, SMTP, etc.

Identificación: URIs

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

IdentificaciónURI

FormatosHTML, JSON,...

IdentificaciónURI

InteracciónProtocolos

FormatosHTML, JSON,...

WWW


Esquema conceptual de HTTP

Usuario NavegadorCliente

Servidor

URI

Representación

WWWHTTP

Petición

Respuesta


Recursos

La Web está formada por recursos

Recurso = cualquier fuente de contenido WebSe identifican mediante URIs

Diversas Posibilidades:Estáticos: almacenados en Sistema de Ficheros

Pá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

Basedatos

Programa

Sistema ficheros

=

Gateway

Gateway

Gateway

GatewayOtro servidor

CámaraWeb

Base datos

Informac.Bursátil

ControlRobot


Tipos de recursos

Los servidores asocian un tipo a cada recursoTipos 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 mensajes

Modo texto:línea inicialcabecera 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: 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 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 utilidades

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/

curl http://cursoxml.herokuapp.comAlgunas opciones: -v (verbose) -H (cabeceras) -X (verbos POST, PUT, DELETE,...)


CURL

Ejemplos:

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


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


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><html> …</html>


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

URI


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


Referencias


• Fin

1 fundamentos web

Education

Transcript of 1 fundamentos web