fundamentos de la web
DESCRIPTION
Fundamentos de la Web. Repaso a algunos conceptos importantes para entender la Web. Material realizado por Jose Emilio Labra Gayo para impartir diversos cursos sobre tecnologías Web.TRANSCRIPT
![Page 1: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/1.jpg)
Fundamentos Web
Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo
![Page 2: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/2.jpg)
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
![Page 3: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/3.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Arquitectura de la Web
![Page 4: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/4.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 5: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/5.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 6: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/6.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 7: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/7.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 8: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/8.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 9: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/9.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
. . .
![Page 10: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/10.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 11: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/11.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
. . .
![Page 12: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/12.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
URIs
![Page 13: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/13.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 14: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/14.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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
![Page 15: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/15.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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 16: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/16.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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 17: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/17.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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 18: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/18.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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 19: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/19.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
¿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 . . .
![Page 20: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/20.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 21: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/21.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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 22: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/22.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 23: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/23.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
Formatos de Representación
![Page 24: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/24.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 25: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/25.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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>
![Page 26: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/26.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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>
![Page 27: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/27.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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 28: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/28.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 29: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/29.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
…
![Page 30: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/30.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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 31: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/31.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 32: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/32.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 33: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/33.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 34: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/34.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 35: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/35.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
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
![Page 36: Fundamentos de la web](https://reader033.vdocuments.co/reader033/viewer/2022061210/5490b22eb47959ed448b4631/html5/thumbnails/36.jpg)
Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
• Fin