Fundamentos de la web

797 views
704 views

Published on

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.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
797
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Fundamentos de la web

  1. 1. Fundamentos Web Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo
  2. 2. Contenidos Arquitectura de la Web HTTP URIs Formatos de representación Funcionamiento de la Web Cliente ServidorJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  3. 3. Arquitectura de la WebJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  4. 4. 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 WebJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  5. 5. Pilares de la Web Los pilares de la Web son: Protocolo HTTP URIs para representar recursos Lenguajes de representación: HTML, XML, etc. URI WWW HTTP Representación Usuario Navegador Servidor ClienteJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  6. 6. Protocolo HTTP HTTP (Hypertext transfer protocol): Arquitectura cliente/servidor (petición / respuesta) Nº métodos reducido: GET, PUT, POST, DELETE, etc. Mensajes de texto Formato de mensajes línea inicial cabecera del mensaje* cuerpo del mensaje ? Utilidades para trazar mensajes http 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/Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  7. 7. Peticiones HTTP Ejemplo GET /index.html HTTP/1.1 Host: www.uniovi.es User-Agent: Mozilla/5.0 … Accept: text/xml, application/xml, text/html, … Accept-language: us,en; q= 0.5 Métodos: Cabecera = parejas "nombre: valor“ GET PUT POST DELETE HEAD OPTIONSJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  8. 8. 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 procese Puede implicar la creación/actualización de recursos DELETE: Elimina un recurso Otros HEAD: 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 SSLJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  9. 9. 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 ...Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  10. 10. Respuestas HTTP Ejemplo HTTP/1.1 200 OK Date: Fri, 17 Nov 2006 15:36:32 GMT Server: Apache Last-Modified: Fri, 17 Nov 2006 09:05:32 GMT Content-length: 43305 Content-type: text/html <!DOCTYPE html PUBLIC …> <html xmlns=“…”> … </html> Códigos estándar: 2**: Variaciones de OK 3**: redirecciones 4**: Problemas del cliente (404, no encontrado) 5**: problemas del servidorJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  11. 11. 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 ...Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  12. 12. URIsJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  13. 13. Recursos Recurso = Unidad básica de la Web Cualquier cosa que se identifique con una URI URI ≠ Recurso ≠ Representación URI http://tiempo.com/Asturias/Oviedo Tiempo en Oviedo Representación Metadatos: Content-type: text/html Datos: <html> <head><title>Tiempo</title></head> <body> Recurso <h1>Tiempo en Oviedo</h1> <p>Nubes y claros</p> </body> </html>Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  14. 14. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Una página Web http://www.uniovi.es <!DOCTYPE html> <html> <head> <title>Universidad de Oviedo</title> </head> identifica <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> Una página Web Recurso de información Formato HTMLJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  15. 15. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Una fotografía (recurso multimedia) http://www.di.uniovi.es/~labra/images/asturias.jpg identifica Una fotografía Recurso de información Formato JPGJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  16. 16. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Una persona http://www.w3.org/People/Berners-Lee/card#i identifica Una persona (Tim Berners-Lee) Recurso de no informaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  17. 17. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Conjunto de todas las personas http://xmlns.com/foaf/0.1/Person identifica Conjunto de Personas (concepto abstracto) Recurso de no informaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  18. 18. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Propiedad de creación http://purl.org/dc/terms/creator identifica Propiedad de creación (concepto abstracto) Recurso de no informaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  19. 19. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Espacio de nombres http://purl.org/dc/terms publisher description identifica ... language Espacio de nombres (concepto) Recurso de no informaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  20. 20. Formato de una URI esquema : // autoridad camino ?consulta #fragmento http :// ejemplo.com:8042 /libros/castellano ?autor=Cervantes #capitulo2 Nota: los caracteres deben codificarse. Significado especial de espacios, ?, /, etc. 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: las URNs identifican nombres únicos solamente. Sin protocolo Más información: EspecificaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra http://tools.ietf.org/html/rfc3986
  21. 21. Dereferenciación Dereferenciar una URI = Acceder al contenido de una URI Obtener 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)Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  22. 22. 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ón Ejemplo: http://156.35.41.34:8080/pagina.php Recomendaciones: Una URI genérica + 1 URI para cada representación Ejemplo: http://periodico.com/noticias/101 - URI genérica para la noticia 101 http://periodico.com/noticias/101.en - URI para la noticia en inglés http://periodico.com/noticias/101.es - URI para la noticia en español Importancia de nombres adecuados para URIs http://www.w3.org/Provider/Style/URIJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  23. 23. Formatos de RepresentaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  24. 24. 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ósitoJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  25. 25. 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>Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  26. 26. XML Facilita 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>Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  27. 27. 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-typesJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  28. 28. Funcionamiento de la Web 2 computadores conceptuales: Cliente y Servidor La representación puede calcularse dinámicamente Computación en Cliente Computación en servidor URI WWW HTTP Representación Usuario Navegador Servidor ClienteJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  29. 29. 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 …Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  30. 30. Componentes de un navegador Interfaz Analizador Motor visualización Intérprete ECMAScript procesa eventos y modifica árbol URI URI Motor WWW Interfaz Visualización HTTP Usuario Analizador Intérprete Representación ECMAscript ÁrbolUsuario DOM Navegador ClienteJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  31. 31. 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) WebkitJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  32. 32. 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 DOMJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  33. 33. Intérprete de ECMAScript Competición entre intérpretes Navegadores Lenguaje Implementación Internet Explorer JScript Chakra Firefox Javascript Rhino Tracemonkey lonMonkey Chrome, Javascript V8 Safari (iPhone, iPad) Javascript Squirrelfish (Nitro) Opera Javascript CarakanJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  34. 34. Componentes de un Servidor La arquitectura del servidor suele descomponerse en varias capas Vista: Se encarga de preparar la representación Negocio: Gestión de objetos de negocio Datos: Modelos de datos URI URI WWW Capa Capa Capa HTTP Vista Negocio Datos RepresentaciónJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  35. 35. Tecnologías del lado servidor Múltiples frameworks y lenguajes Java: J2EE, Spring,… Ruby: Ruby on Rails, Sinatra, Padrino… Python: Django,… Scala: Lift,… PHP: Zend… Modelo de datos Bases de datos relacionales Modelos NoSQL Modelos RDFJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  36. 36. FinJose Emilio Labra Gayo – http://www.di.uniovi.es/~labra

×