• Like
1 fundamentos web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

1 fundamentos web

  • 413 views
Published

Fundamentos de la Web

Fundamentos de la Web

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
413
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Fundamentos Web Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo
  • 2. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 3. Información textual 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 € Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 4. Unicode 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) Más información http://unicode.org http://unicode-table.com 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. Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 5. 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) Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 6. Información Binaria 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) ¡Cuidado con la información binaria! Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 7. Arquitectura de la Web Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 8. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 9. Pilares de la Web 3 pilares Interacción: Protocolos HTTP, FTP, SMTP, etc. Identificación: URIs Formatos de representación: HTML, JSON, XML, ... WWW Interacción Protocolos Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Identificación URI Formatos HTML, JSON,...
  • 10. Esquema conceptual de HTTP Petición URI WWW HTTP Representación Usuario Navegador Cliente Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Respuesta Servidor
  • 11. Recursos La Web está formada por recursos Recurso = cualquier fuente de contenido Web Se 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 demanda Generado 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 12. Recursos Sistema ficheros = Fichero texto Imagen Programa URI WWW HTTP Navegador Cliente Gateway Servidor Gateway Base datos Base datos Otro servidor Cámara Web Gateway Gateway Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Informac. Bursátil Control Robot
  • 13. Tipos de recursos Los 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 Petición WWW HTTP Usuario Respuesta Navegador Cliente Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Content-type: image/jpeg Content-length: 8854 Servidor
  • 14. HTTP: Formato de mensajes Modo texto: Petición línea inicial cabecera del mensaje* cuerpo del mensaje ? GET /index.html HTTP/1.1 Host: www.uniovi.es User-Agent: Mozilla/5.0 … Accept: text/html Accept-language: es, en Navegador Cliente Respuesta WWW HTTP HTTP/1.1 200 OK Date: Thu, 12 Oct 2013 09:36:05 GMT Server: Apache Content-length: 80554 Content-type: text/html; charset=utf-8 <html> <head> <title>Curso XML</title> <head> ... </html> Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Servidor
  • 15. Mensajes de petición Formato general: <method> <url> <version> <headers> * <entity-body> <method>= GET,PUT,POST,DELETE,... <headers> = parejas de la forma: nombre1: valor1 nombre2: valor2 Ejemplos: GET /index.html HTTP/1.1 Host: www.uniovi.es User-Agent: Mozilla/5.0 … Accept: text/html Accept-language: es, en Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra POST /admin HTTP/1.1 Host: www.uniovi.es User-Agent: Mozilla/5.0 … Accept: text/html Accept-language: es, en ...datos POST...
  • 16. Mensajes de respuesta Formato general: <version> <status> <reason-phrase> <headers> * <entity-body> <Status> Códigos estándar: 2**: Variaciones de OK 3**: redirecciones 4**: Problemas del cliente 5**: problemas del servidor Ejemplos: HTTP/1.1 200 OK Date: Thu, 12 Oct 2013 09:36:05 GMT Server: Apache Content-length: 80554 Content-type: text/html; charset=utf-8 <html> <head> <title>Curso XML</title> <head> ... </html> Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra HTTP/1.1 404 Not found Content-length: 0
  • 17. 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.com Algunas opciones: -v (verbose) -H (cabeceras) -X (verbos POST, PUT, DELETE,...) Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 18. 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="pepe@abc.org" -password="abc" Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 19. 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 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 SSL Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 20. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 21. 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
  • 22. 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> <html> … </html> Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 23. 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
  • 24. URIs Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 25. 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 Representación Tiempo en 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> Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Recurso
  • 26. ¿Qué se puede identificar con una URI? Cualquier cosa concreta o abstracta Ejemplo: Una página Web http://www.uniovi.es identifica <!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> Una página Web Recurso de información Formato HTML Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 27. ¿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 JPG Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 28. ¿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ón Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 29. ¿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ón Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 30. ¿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ón Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 31. ¿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ón Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 32. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Más información: Especificación http://tools.ietf.org/html/rfc3986
  • 33. 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
  • 34. 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/URI Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 35. Formatos de Representación Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 36. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 37. 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
  • 38. 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
  • 39. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 40. 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 Cliente Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Servidor
  • 41. 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
  • 42. Componentes de un navegador Interfaz Analizador Motor visualización Intérprete ECMAScript procesa eventos y modifica árbol URI Interfaz Usuario Usuario URI Motor Visualización WWW HTTP Analizador Intérprete ECMAscript Árbol DOM Navegador Cliente Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Representación
  • 43. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 44. 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 Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 45. 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 Carakan Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 46. 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 WWW HTTP URI Capa Vista Representación Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra Capa Negocio Capa Datos
  • 47. 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 RDF Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 48. Referencias Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra
  • 49. Fin Jose Emilio Labra Gayo – http://www.di.uniovi.es/~labra