The Architecture of Internet                        Applications                                   Prof. Juan Quemada     ...
El Modelo Cliente - Servidor                                             Conexión         Programación de aplicaciones di...
Servicios TCP-UDP/IP       Servicio TCP             4Servicio fiable orientado a conexión                   • Denominado ...
Dirección de Máquina                                             Ordenador                                                ...
Arquitectura TCP/IP                                              5Friday, March 4, 2011
Circuitos Virtuales y Sockets TCP                                      Conexión (circuito virtual)       Socket TCP: tran...
Puertos y Servidores     Cada “puerto” se asigna a un servidor          4Una misma maquina puede albergar varios servidor...
Sockets TCP de servidor y cliente                                                          Conexión (circuito virtual)    ...
Las aplicaciones de InternetFriday, March 4, 2011
Las Aplicaciones de Internet              Las aplicaciones son el motor del tráfico de Internet:                   Las ma...
Las primeras aplicaciones de Internet            El éxito de Internet se debe a sus aplicaciones            El carácter ab...
Correo electrónico          Correo electrónico (email)                  Primer motor de uso de Internet                   ...
Ejemplo de mensaje          Formato de mensaje definido en RFC 822 (1982)               Solo permite texto ASCII en Cabec...
MIME           MIME (Multipurpose Internet Mail Extensions)                Mensajes como acarreadores de contenidos      ...
Extensiónes MIME           MIME introduce 5 nuevos campos en un mensaje                MIME-Version: indica la versión MI...
Tipos de contenidos MIME           Campo Content-Type                Tiene dos partes: tipo / subtipo           Tipos:   ...
Ejemplo de mensaje         Asunto: Se han integrado los tuneles         De: Enrique Lopez <el@dit.upm.es>         Fecha: T...
Los 90: El Web           Inventado/propuesto por Tim Berners Lee (1989)           Es el almacén de contenidos que la red n...
Navegación Web: URLs, HTTP y HTML                                                                                         ...
Los componentes del primer Web           URI (URL)                Dirección en la red de un documento o recurso          ...
Evolución: Aplicaciones Web           Aplicaciones de servidor                El Web permite acceso remoto a aplicaciones...
El	  Web     • En	  1989	  Tim	  Berners	  Lee	  comienza	  el	  desarrollo	  del	  Web        – Nivel	  que	  permite	  c...
Clientes Web: Visor o Navegador           Programa de acceso al Web                Mucha funcionalidad y complejidad     ...
Servidor Web           Gestor de recursos Web con HTTP                Deben ofrecer servicios escalables que atiendan muc...
Cloud	  Compu)ng	  (Computación	  en	  la	  Nube)       Paradigma	  emergente	  de	  creación	  de	  servicios	          ...
Amazon	  Cloud	  Compu-ng	  Services      • La	  Nube	  permite	  crear	  servicios	          virtualizados            – P...
Mobile	  Internet	  Compu2ngFriday, March 4, 2011
Terminales:	  evoluciónFriday, March 4, 2011
Los componentes del Web:               Resources, URL, HTML, CSS,               Javascript, HTTP, ...Friday, March 4, 2011
Recursos y URLs           Un recurso es cualquier cosa en Internet que “merezca la           pena ser referenciada por si ...
URL: ejemplos         <prot>:<//><authority>/<path>?<query>#<frag>                   <authority> = <UserInfo@><host><:port...
Identificación de recursos             URI: Identificador de recurso uniforme                 Uniformiza el acceso a cual...
Plataforma HTML o (HTML5)          Tecnologías de cliente para “Web as platform”              Paradigma de aplicaciones d...
Lenguaje de Marcado HTML           Lenguaje de marcado:             Define la estructura de un documento con marcas de te...
Marcado HTML          Las marcas delimitan el principio y fin de un elemento:            <TITLE> Titulo .. </TITLE>      ...
Ejemplo de pagina HTML                        <HTML>                        <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD...
Elementos HTML del ejemplo           <HTML>: declaración de página HTML           <HEAD>: cabecera no visible           <B...
Árbol sintáctico del ejemplo         Árbol sintactico:             Árbol definido por anidamientos de marcas             ...
Representación en arbol de HTML          Un marcado HTML bien construido genera un arbol sintactico            Es utiliza...
JavascriptFriday, March 4, 2011
Javascript           Javascript             Lenguaje por excelencia de aplicaciones de cliente             Sintaxis muy ...
Ejemplo Javascript: Factorial                        <html>                        <head><title> Ejemplo 1 Javascript</tit...
Ejemplo Javascript: Fecha                        <html>                        <head><title> Hora y Fecha</title>         ...
HTML5Friday, March 4, 2011
XML y XHTML           1999: HTML deja de actualizarse por W3C             W3C promueve XHTML (redefinición de HTML en XML...
HTML5          2004: Desarradores de “Browsers” crean WHATWG            Para definir nueva versión de HTML: HTML5        ...
Características HTML5               HTML5: Primera revisión de HTML en una década                 Para diseñar las aplica...
Plataforma HTML5: principales novedades                Paginas Web bien estructuradas                Formularios muy enriq...
Plataforma HTML5               HTML5: se diseño como plataforma en WHATWG                 Incluyendo todos los componente...
*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Friday, March 4, ...
*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Friday, March 4, ...
Listado de marcas de HTML5 incluyendo las nuevas y las deprecadas:        por Antonio Lupetti http://woorkup.com/wp-conten...
HTTPFriday, March 4, 2011
HTTPFriday, March 4, 2011
Metodos de HTTP              Métodos mas utilizados               GET:    Pedir un fichero al servidor                  ...
Transacción HTTP GET                                  Acceso a página Web -> http://scom.dit.upm.es/index.html            ...
Formato de cabeceras HTTP GET           Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html     1) Solicitud del Cli...
Cabeceras HTTP POST           <FORM METHOD=post          ACTION="http://scom.dit.upm.es/cgi-bin/aut">     1) Solicitud del...
Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. TotyFriday, March 4, 2011
Carga de una página típica              Un pagina (X)HTML contiene habitualmente otros objetos que se              cargan ...
Conexión persistente y en paralelo              La conexión TCP en HTTP 1.1 es persistente                  Queda estable...
Ejercicio aplicación-2          • Installar Mozilla Firefox y añadirle el Add-On “Live HTTP                Header” que per...
Rest: Restful Web ServicesFriday, March 4, 2011
Índice           REST o WS           Principios de REST                Direccionabilidad                Interfaz uniform...
Servicios o RecursosFriday, March 4, 2011
Friday, March 4, 2011
Que es RESTFriday, March 4, 2011
REST: PrincipiosFriday, March 4, 2011
Interfaz uniformeFriday, March 4, 2011
Ejemplo: Amazon S3      Servicio de almacenamiento de objetos: “Disco Virtual”      Arquitectura Cloud Computing          ...
REST,	  reu-lización	  y	  mashupsFriday, March 4, 2011
Cachés y Gestión del tráfico WebFriday, March 4, 2011
Los Clicks y el tráfico de Internet                 Cada click en un URL de una página Web                   Desencadena ...
Descargas de Páginas WebFriday, March 4, 2011
Optimización del Tráfico               Se realiza con caches en dispositivos proxy o pasarela                 Interceptan...
Identificador de recurso: Etag           Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html    1) Solicitud condici...
Control de Última Modificación           Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html    1) Solicitud condici...
Gestión de Cache              Las cabeceras informan al gestor de una cache si los recursos son “frescos” o              “...
Redes	  de	  Distribución	  de	  Contenidos     • Internet	  no	  fue	  diseñada	  para	  realizar	  transacciones        ...
Future InternetFriday, March 4, 2011
Internet	  del	  Futuro	  y	  la	  Arquitectura	                               de	  Internet                             ....
Internet	  del	  Futuro     • Cada	  vez	  existe	  mayor	  conciencia	  sobre	  la	  necesidad	  de        – Redefinir	  I...
Upcoming SlideShare
Loading in...5
×

La Arquitectura de las Aplicaciones de Internet

6,867

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,867
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

La Arquitectura de las Aplicaciones de Internet

  1. 1. The Architecture of Internet Applications Prof. Juan Quemada UPMFriday, March 4, 2011
  2. 2. El Modelo Cliente - Servidor Conexión  Programación de aplicaciones distribuidas en TCP/IP 4Clientes: dan acceso a los servicios 4Servidores: proveen datos, información, servicios, ... • Son públicos (dirección fija y conocida: URL, ..)  Cliente y Servidor son roles en una aplicación 4Un ordenador puede ser cliente y servidor simultaneamenteFriday, March 4, 2011
  3. 3. Servicios TCP-UDP/IP  Servicio TCP 4Servicio fiable orientado a conexión • Denominado también de “circuitos virtuales”  Servicio UDP 4Servicio no fiable de envío de datagramas (paquetes) • Puede haber perdida, desorden o duplicación de datagramas 4Denominado también servicio “sin conexión” (connectionless)Friday, March 4, 2011
  4. 4. Dirección de Máquina Ordenador (host) y de Aplicación dir. puerto 0 IP ... Aplic. 1 ... red puerto n ... ...  Dirección IP (o de red): Aplic. 2 4identifica una máquina (host) • 192.2.3.122, 98.8.77.66, ... • dit.upm.es, google.com, .. • “localhost” (mi maquina): 127.0.0.1  Puerto: dirección de aplicación 4Tienen 16 bits de longitud • Los servidores usan direcciones prefijadas – HTTP: puerto 80 – Daytime: puerto 13Friday, March 4, 2011
  5. 5. Arquitectura TCP/IP 5Friday, March 4, 2011
  6. 6. Circuitos Virtuales y Sockets TCP Conexión (circuito virtual)  Socket TCP: transporte fiable de datos 4orientado a conexión • Las conexiones se denominan tambien circuitos virtuales  Cada circuito transporta datos de forma fiable 4Envía flujos de datos, streams de bytes 4Garantiza la entrega • pero no un plazo de entrega 4Imposibilidad de entregar los datos • provoca la liberación del circuitoFriday, March 4, 2011
  7. 7. Puertos y Servidores  Cada “puerto” se asigna a un servidor 4Una misma maquina puede albergar varios servidores • En puertos diferentes  Los clientes tambien utilizan “puertos” 4Se suelen asociar solo para un acceso al servidor máquina máquina de cliente servidora puerto 0 puerto 0 ... dir. progr. ... IP2 ... serv. l ... ... red puerto n cliente ... ... dir. m ... progr. IP1 serv. nFriday, March 4, 2011
  8. 8. Sockets TCP de servidor y cliente Conexión (circuito virtual) Conexión (circuito virtual)  Existen 2 tipos de sockets 4Socket de servidor • Espera solicitudes de establecimiento de conexión – Las acepta cuando llegan si tiene recursos 4Socket de cliente • Gestiona la conexión, tanto en el cliente, como en el servidor  Un servidor acepta múltiples conexiones 4Una para cada cliente que se conecte • Cada conexión posee una cola de información independienteFriday, March 4, 2011
  9. 9. Las aplicaciones de InternetFriday, March 4, 2011
  10. 10. Las Aplicaciones de Internet Las aplicaciones son el motor del tráfico de Internet:  Las mas usadas: Web (23%), P2P (23%) y Video (51%) El mayor incremento de tráfico actual se debe al  Video IP: YouTube, streaming, IP TV, …  Tráfico P2P y el Web estan perdiendo peso en el porcentaje global, aunque no importanciaFriday, March 4, 2011
  11. 11. Las primeras aplicaciones de Internet El éxito de Internet se debe a sus aplicaciones El carácter abierto de Internet produjo nuevas aplicaciones  Los usuarios las creaban extendiendo aplicaciones existentes  e-mail: Evolución de mensajería entre usuarios de “mainfarmes”  FTP (Transferencia de Ficheros): Evolución de COPY  Otros:  Terminal Virtual, News, Gopher (pre–Web), …. Los S.O. de entonces eran orientados a comando Intercambian datos en ASCII (o ristras de octetos)  Son legibles y fáciles de procesar  pero la compresión no es óptima 11Friday, March 4, 2011
  12. 12. Correo electrónico Correo electrónico (email) Primer motor de uso de Internet Todavía es una de las aplicaciones más utilizadas Envía un mensaje electrónico entre dos buzones  Dirección de buzón/usuario: “javier@dit.upm.es” Protocolo SMTP (Simple Mail Trans. Prot., RFC821)  Con el tiempo surgen otros protocolos: POP3, IMAP, ... 12Friday, March 4, 2011
  13. 13. Ejemplo de mensaje Formato de mensaje definido en RFC 822 (1982)  Solo permite texto ASCII en Cabecera y Cuerpo  Línea en blanco: separa Cabecera de Cuerpo Asunto: Se han integrado los tuneles De: Enrique Lopez <el@dit.upm.es> Fecha: Tue, 11 Sep 2007 10:49:08 +0200 Para: jquemada@dit.upm.es, .... Message-ID: <46E65684.9010901@dit.upm.es> Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824) ……. Content-Length: 532 Hola a todos: Esta mañana he terminado de integrar …………… .......... Un saludo EnriqueFriday, March 4, 2011
  14. 14. MIME MIME (Multipurpose Internet Mail Extensions)  Mensajes como acarreadores de contenidos  Múltiples formatos: texto, imágenes, aplicaciones, …  Contenidos no-ASCII se encapsulan y se trans-codifican en  hexadecimal, uuencode, base 64, … Definido en RFCs 2045-6, 2077, 3023, ….  http://www.iana.org/assignments/media-types/ El uso de MIME se ha extendido a otros ámbitos:  HTTP y Web, S.O., ... 14Friday, March 4, 2011
  15. 15. Extensiónes MIME MIME introduce 5 nuevos campos en un mensaje  MIME-Version: indica la versión MIME utilizada  Ejemplo: “MIME-Version: 1.0” (acorde RFC1521)  Content-Type: indica el tipo de contenido acarreado  Ejemplo: “Content-Type: text/html”  Content-Transfer-Encoding: de octetos a ASCII  Códigos típicos: hexadecimal, uuencode, base 64, …  Ejemplo: “Content-Transfer-Encoding: base64”  Content-ID: identificador único en la red Ejemplo: “Content-ID: <id23457689@gilito.lab.dit.upm.es>”  Content-Description: texto descriptivo  Ejemplo: “Content-Description: Pagina de prueba del servicio”Friday, March 4, 2011
  16. 16. Tipos de contenidos MIME Campo Content-Type  Tiene dos partes: tipo / subtipo Tipos:  “application”, “audio”, “image”, “message”, “model”, “multipart”, “text”, “video”, extension-token  IANA coordina la definicion de nuevos tipos/subtipos  http://www.iana.org/assignments/media-types/ Ejemplos:  image/gif, image/jpeg, image/png, ...  text/plain, text/html, message/rfc822, ......  application/postcript, application/msword, application/x-www-form-urlencoded, multipart/form-data, ...Friday, March 4, 2011
  17. 17. Ejemplo de mensaje Asunto: Se han integrado los tuneles De: Enrique Lopez <el@dit.upm.es> Fecha: Tue, 11 Sep 2007 10:49:08 +0200 Para: jquemada@dit.upm.es, .... Message-ID: <46E65684.9010901@dit.upm.es> Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824) MIME-Version: 1.0 Content-Type: text/plain; charset="iso-8859-1" Content-Transfer-Encoding: 8bit ……. Content-Length: 532 Hola a todos: Esta mañana he terminado de integrar …………… .......... Un saludo EnriqueFriday, March 4, 2011
  18. 18. Los 90: El Web Inventado/propuesto por Tim Berners Lee (1989) Es el almacén de contenidos que la red necesitaba  Crece incesantemente hasta convertirse en  el mayor repositorio de información que haya existido nunca Es un Servicio “Abierto”, “Escalable” y “Descentralizado” para  Publicación de documentos “hypertexto” en la red  Alta usabilidad: “se navega haciendo click en enlaces” Permite modelar las relaciones sociales  Es un universo de mundos interconectados  Cada página es el comienzo de un mundo  El dueño (autor) publica y enlaza con otras páginas libremente 18Friday, March 4, 2011
  19. 19. Navegación Web: URLs, HTTP y HTML Servidor Web Cliente Web HTTP (URL) Cliente Solicita pag. HTTP - GET PaginaWeb.html HTTP 1.1 con click en hiperenlace Servidor envía pag. Web a cliente. El cliente recibe <PaginaWeb.html> y presenta página HTML en Visor.. Cada página HTML se identifica por un URL, por ejemplo http://mail.google.com/PaginaWeb.htmlFriday, March 4, 2011
  20. 20. Los componentes del primer Web URI (URL)  Dirección en la red de un documento o recurso  Ejemplo: http://www.upm.es/centros/etsit/personal.html  Los hiperenlaces modelan  Relaciones o interacciones entre personas, información, empresas, …  ¡¡Todo recurso Web posee un URL que lo identifica!! HTML  Lenguaje abierto de  descripción de documentos hipermedia, formularios, …  ¡¡Permite navegación Web muy sencilla!! HTTP  Protocolo transaccional genérico  Protocolo sin estado (Stateless) -> ¡¡Servidores y servicio escalables!! 20Friday, March 4, 2011
  21. 21. Evolución: Aplicaciones Web Aplicaciones de servidor  El Web permite acceso remoto a aplicaciones interactivas  Consulta y actualización de bases de datos HTTP (URL) Aplicaciones de cliente HTML, XML, ..  HTML no es suficiente  Hay que mejorar la experiencia de usuario (velocidad, interactividad)  Aparecen: CSS, Javascript, XML, AJAX, .... “RIA: Rich Internet Applications” (Flex)  Arquitecturas de objetos distribuidos (nuevo paradigma) 21Friday, March 4, 2011
  22. 22. El  Web • En  1989  Tim  Berners  Lee  comienza  el  desarrollo  del  Web – Nivel  que  permite  construir  aplicaciones • Se  convierte  en  el  interfaz  universal  de  acceso  a  aplicaciones  Friday, March 4, 2011
  23. 23. Clientes Web: Visor o Navegador Programa de acceso al Web  Mucha funcionalidad y complejidad  Presentan HTML, XML o CSS, ejecutan Javascript, ....  Se estan convirtiendo en S.O.  Ejemplos: Explorer, Firefox, Chrome, Safari, Opera, … 23Friday, March 4, 2011
  24. 24. Servidor Web Gestor de recursos Web con HTTP  Deben ofrecer servicios escalables que atiendan muchos usuarios  Servicios en la nube (cloud-computing)  Google, Apple o Amazón tienen granjas de miles de servidores  Servicios en Ruby on Rails, Java Restlet, PHP Symphony, .....  Ejemplos: Apache, Tomcat, Microsoft IIS, … 24Friday, March 4, 2011
  25. 25. Cloud  Compu)ng  (Computación  en  la  Nube)  Paradigma  emergente  de  creación  de  servicios   escalables,  fiables,  ……  y  baratos – Con acceso ubicuo y global a través de Web – Minimiza costes con componentes baratos – Utilizando tecnologías de virtualización  Las  grandes  empresas  de  Internet  uClizan  “Cloud   CompuCng”  y  suelen  revenderlo  como  servicio:  Amazon, Google, Facebook, Yahoo, Youtube, …Friday, March 4, 2011
  26. 26. Amazon  Cloud  Compu-ng  Services • La  Nube  permite  crear  servicios   virtualizados – Pago  por  uso,  sin  inversión  inicial • Solo  3ene  costes  variables – Accesible  con  interfaz  Web  Services • Amazón  Web  Services – Plataformas  virtualizadas: • Servidores,  computo,  bases  de  datos,  … – Oferta  variada:   • S3,  EC2,  SQS,  RDS,  Elas3c  Map-­‐Reduce,  ….Friday, March 4, 2011
  27. 27. Mobile  Internet  Compu2ngFriday, March 4, 2011
  28. 28. Terminales:  evoluciónFriday, March 4, 2011
  29. 29. Los componentes del Web: Resources, URL, HTML, CSS, Javascript, HTTP, ...Friday, March 4, 2011
  30. 30. Recursos y URLs Un recurso es cualquier cosa en Internet que “merezca la pena ser referenciada por si misma” Un fichero, un mapa, un libro, una foto, un video, una base de datos, ….. Cada recurso se identifica con un URI  El URI identifica y da acceso al recurso (HTTP)  El URI define también el formato del recurso Un recurso debe tener un formato “conocido”  Texto ASCII, HTML, XML, JSON, ….Friday, March 4, 2011
  31. 31. URL: ejemplos <prot>:<//><authority>/<path>?<query>#<frag> <authority> = <UserInfo@><host><:port> prot: protocolo o esquema de acceso: http:, mailto:, ftp:, telnet:, .. authority: identificación de servidor (host), puerto (port) y usuario Dirección de correo electrónico: mailto:jesus@dit.upm.es URLs Web con dominio o IP: http://dit.upm.es, http://138.15.12.223:8080 path: identificación de recurso (dentro el servidor) URL Web: http://www.bb.es/archivo/doc1.html URL de fichero: file:///usr/lib/registro.txt query: Define valores de parámetros en formularios URL Web: http://www.bb.es/foto?nombre=Paco&apellido=Perez frag: sección de un recurso (se denomina también: anchor, fragment, ref, …) URL Web: http://www.bb.es/archivo/doc1.html#seccionFriday, March 4, 2011
  32. 32. Identificación de recursos URI: Identificador de recurso uniforme  Uniformiza el acceso a cualquier recurso de Internet  Definido en: RFC 2396 (98), RFC 2732 (99) y RFC 3986 (05)  T. Berners-Lee, R. Fielding, L. Masinter, B. Carpenter  http://www.faqs.org/rfcs/rfc2396.html  http://www.faqs.org/rfcs/rfc3986.html Tipos de URI  URL: Uniform Resource Locator  Localiza un recurso unívocamente en un lugar físico de la red  Lugar físico: Recurso en un “host” de Internet  URN: Uniform Resource Name  Nombre de un recurso, independiente de posición  Se definió en la norma, pero se utiliza escasamenteFriday, March 4, 2011
  33. 33. Plataforma HTML o (HTML5) Tecnologías de cliente para “Web as platform”  Paradigma de aplicaciones desplegadas desde un servidor  Soportadas en visores Web: IE, Firefox, Safari, Chrome, ...... Tecnologías mas importantes  HTML(HyperText Markup Language), HTML5  Lenguaje de marcado de texto para definir su estructura  CSS (Cascading Style Sheets)  Lenguaje de definición de presentación visual  Javascript  Lenguaje de programación de aplicaciones de cliente 33Friday, March 4, 2011
  34. 34. Lenguaje de Marcado HTML Lenguaje de marcado:  Define la estructura de un documento con marcas de texto SGML (Standard Generalized Markup Language)  Utilizado por la industria editorial: Norma ISO 8879:1986 HTML (HyperText Markup Language)  Documentos Web con hiperenlaces, derivado de SGML  Evolución de HTML  IETF publica: HTML (1993) y HTML2 (1995)  W3C publica: HTML3.2 y 4.0 en 1997 y HTML 4.01 en 1999  Se promueve XHTML hasta 2008  W3C estima: HTML5 en 2012 (candidate rec.) y 2022 (prop. rec.)  Tutorial:  http://www.dit.upm.es/~santiago/docencia/master/web/web.html  http://www.w3schools.com/html/ 34Friday, March 4, 2011
  35. 35. Marcado HTML Las marcas delimitan el principio y fin de un elemento:  <TITLE> Titulo .. </TITLE>  <H1> Cabecera nivel 1 </H1>, ... Las marcas pueden llevar atributos  <A HREF="http://www.dit.upm.es"> Dept. Ing. Telemática</A> Algunas marcas de HTML pueden omitir el terminador  <P> indica separador de párrafo en HTML  En XML, XHTML  el terminador es obligatorio </P>  o se puede utilizar una marca con sintaxis especial <P /> Algunos tutoriales  http://www.dit.upm.es/~santiago/docencia/master/web/web.html  http://www.w3schools.com/html/  http://www.html.net/tutorials/html/Friday, March 4, 2011
  36. 36. Ejemplo de pagina HTML <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD> <BODY> <!-- Esto es un comentario --> <H1> Ejemplo de Cabecera </H1> Acceda al <A HREF="http://www.w3schools.com/html/"> tutorial de HTML de W3C Schools</A>. <p> A continuación aparece una lista y una tabla <UL id="lista" > <LI> elemento <FONT COLOR=red>rojo</FONT> </LI> <LI> elemento <STRONG>en negrita</STRONG> </LI> <LI> elemento <SUB>con subíndice</SUB> </LI> </UL> <TABLE BORDER id="tabla"> <TR> <TD>Primera celda <br> de la tabla</TD> <TD><IMG SRC="iconos.gif"></TD> </TR> <TR> <TD>Celda 21</TD> <TD>Celda 22</TD> </TR> </TABLE> </BODY> </HTML>Friday, March 4, 2011
  37. 37. Elementos HTML del ejemplo <HTML>: declaración de página HTML <HEAD>: cabecera no visible <BODY>: cuerpo visible <H1>: titulo de nivel 1  Sub-niveles: <H2>, <H3>, … <A HREF="http://....>: hipervínculo  El URL va en el atributo HREF <P> párrafo El ejemplo ilustra  Ejemplo de atributo: ALIGN=“center” <UL>: lista no numerada Texto <OL>: lista numerada <LI>: elemento de lista <OL> o <UL> Enlaces <DL> Lista definida: Listas  Tipo de elemento <dt> .... </dt>  Definición de elemento <dd> ... </dd> Tablas <.... id=“referencia”> fragment  referencia a este elemento en URL como: #referencia Se pueden encontrar mas <FONT>: tipo de fuente detalles sobre HTML o <STRONG>: resaltar, mas fuerte que el resto  Otros: <SMALL>, <BIG>, <TT>, <Q>, .. XHTML en el Tutorial. <SUB>: subíndice Superíndice: <SUP> Forms y objetos (ejecutables) <TABLE BORDER>: definicion de tabla con borde de ven más adelante. No se  BORDER es un atributo opcional <TR>: fila de tabla recomienda usar Frames. <TD>: celda de tabla <IMG src=”URL”>: imagen  El URL de la imagen va en el atributo SRCFriday, March 4, 2011
  38. 38. Árbol sintáctico del ejemplo Árbol sintactico:  Árbol definido por anidamientos de marcas  Cada bloque (<..> …. <..>) es un sub-arbol  3 tipos principales de nodos:  elemento: amarillo  atributo: rosa  texto: blanco HTML HEAD BODY Acceda A cont. ..... TITLE H1 <!– --!> A . P una lista y UL TABLE al una tabla Ejemplo Tutorial de página Ejemplo de Esto es un HREF= HTML de W3C LI LI LI BORDER TR TR cabecera comentario http://ww ..” Schools HTML elemento FONT elemento STRONG elemento SUB TD TD TD TD COLOR en con Primera de la Celda Celda rojo BR IMG =”red” negrita subíndice celda tabla 21 22 SRC= “Icono.gif”Friday, March 4, 2011
  39. 39. Representación en arbol de HTML Un marcado HTML bien construido genera un arbol sintactico  Es utilizado por programas y herramientas para procesar HTML  Javascript: lenguaje para procesar paginas Web en HTML  CSS: lenguaje de visualización “bonita” de páginas HTML Un marcado bien construido debe anidar unas marcas dentro de otras  Preservando la estructura de arbol  Ejemplo de marcado correcto:  <H1> El <EM> Titulo </EM> es lo mas <B> importante </B> </H1>  Nunca deben solapse  Ejemplo de marcado erróneo:  <H1> El <EM> Titulo </EM> es lo mas <B> importante </H1> </B> DOM: Document Object Model  API Javascript para acceder al arbol sintáctico de HTMLFriday, March 4, 2011
  40. 40. JavascriptFriday, March 4, 2011
  41. 41. Javascript Javascript  Lenguaje por excelencia de aplicaciones de cliente  Sintaxis muy similar a Java  Pero la semantica es diferente  Nombre:  inicialmente “LifeScript”, pasó a “JavaScript” al triunfar Java Lenguaje de scripting integrado en código HTML  Diseñado para ser ejecutado en el visor Web  Interprete analiza el código fuente Javascript  Si es correcto lo ejecuta, sinó genera una excepción Tutoriales  http://wwwwww.dit.upm.es/~santiago/docencia/master/web/web.html  http://www.w3schools.com/js/, http://www.w3schools.com/jsref/Friday, March 4, 2011
  42. 42. Ejemplo Javascript: Factorial <html> <head><title> Ejemplo 1 Javascript</title></head> <body> <h2> Tabla de Factorial </h2> <!-- Un script es un nodo mas del arbol html. --> <!-- Ejecución de script genera HTML, que --> <!-- document.write(..) inserta en su nodo DOM. --> <script> var fact = 1; // Define variable fact y asigna el entero 1 for(i = 1; i < 10; i++) { // bucle for similar a Java fact = fact*i; // calcula el factorial iterativamente document.write(i + "! = " + fact + "<br />") ; // Inserta string (argumento) en codigo HTML // Transformación automatica de enter (i, fact) a string } </script> </body> </html>Friday, March 4, 2011
  43. 43. Ejemplo Javascript: Fecha <html> <head><title> Hora y Fecha</title> </head> <body> <h1>The date and time are:</h1> <script language="JavaScript"> document.write(new Date( )); // Date(): objeto predefinido // al crearlo se inicializa con fecha y hora actual </script> </body> </html>Friday, March 4, 2011
  44. 44. HTML5Friday, March 4, 2011
  45. 45. XML y XHTML 1999: HTML deja de actualizarse por W3C  W3C promueve XHTML (redefinición de HTML en XML)  Sustitución muy compleja -> no aceptada por usuarios  XHTML tiene demasiadas variantes:  transitional, frameset, strict, basic, ....... Aparecen tecnologías propietarias para nuevas aplicaciones  Adobe Flash  para Webs dinámicas  con gráficos bonitos  para video Se consolida plataforma HTML  Javascript, CSS, XML, JSON, ...Friday, March 4, 2011
  46. 46. HTML5 2004: Desarradores de “Browsers” crean WHATWG  Para definir nueva versión de HTML: HTML5  Debido a la no actualización de HTML en W3C Objetivo HTML5: Desarrollo de nueva versión de HTML para  aplicaciones Web actuales y futuras 2008: W3C finaliza actividad en XHTML 2  Debido a rechazo de fabricantes de browsers 2008: W3C confluye con WHATWG y HTML5  Publica “Working Draft” de HTML5 en W3C Calendario de HTML5  2012: Candidate Recommendation  2022: Proposed RecommendationFriday, March 4, 2011
  47. 47. Características HTML5 HTML5: Primera revisión de HTML en una década  Para diseñar las aplicaciones Web mas avanzadas  video, redes sociales, móviles, juegos, gráficos, 3D, ..  Sustituira a: HTML4, XHTML1.0 y DOM2-HTML  http://www.w3schools.com/html5/  http://diveintohtml5.org/table-of-contents.html  http://www.w3.org/TR/html5/ Soporte a HTML5 debe preceder a las normas (y validarlas)  Alto soporte en Firefox, Safari, Chrome, Opera, IE, ..  http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29 HTML4 Polyglot  Subconjunto compatible con HTML y XHTML (transicional)Friday, March 4, 2011
  48. 48. Plataforma HTML5: principales novedades Paginas Web bien estructuradas Formularios muy enriquecidos Gráficos vectoriales Formulas matematicas CANVAS para juegos y animaciones Geolocalicación y sensores Video y audio nativo Almacenamiento de datos local y en BD Web & Offline Web workers .......Friday, March 4, 2011
  49. 49. Plataforma HTML5 HTML5: se diseño como plataforma en WHATWG  Incluyendo todos los componentes  marcas HTML, APIs Javascript y comandos CSS  Partes iniciales de HTML5 son ahora normas separadas  Almacenamiento local (Local storage)  Web Sockets  Geolocation  SVG  MathML  HttpXMLRequest Level 2  microdatos  ...... Plataforma HTML5  Todo lo necesario para crear nuevas aplicaciones sin plugins  Paradigma “Web as Platform”:Friday, March 4, 2011
  50. 50. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Friday, March 4, 2011
  51. 51. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Friday, March 4, 2011
  52. 52. Listado de marcas de HTML5 incluyendo las nuevas y las deprecadas: por Antonio Lupetti http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdfFriday, March 4, 2011
  53. 53. HTTPFriday, March 4, 2011
  54. 54. HTTPFriday, March 4, 2011
  55. 55. Metodos de HTTP Métodos mas utilizados  GET: Pedir un fichero al servidor  Se invoca desde HTML  HEAD: Pedir la cabecera de un fichero al servidor  POST: Enviar un formulario al servidor  Se invoca desde HTML  PUT: Cargar un recurso en el servidor  DELETE: Borrar un recurso del servidor Otros métodos  OPTIONS: Determinar que métodos acepta un servidor  TRACE: Trazar mensaje a través de proxies hasta el servidor  CONNECT: Conectar a un servidor a través de un proxyFriday, March 4, 2011
  56. 56. Transacción HTTP GET Acceso a página Web -> http://scom.dit.upm.es/index.html GET /index.html HTTP/1.0 Accept: text/html, text/plain, image/gif, image/jpeg User-Agent: Netscape-Navigator/4.03 // linea en blanco indica final de cabecera // POST y PUT pueden llevar cuerpo HTTP/1.0 200 OK Server: NCSA/1.2.3 Content-type: text/html Content-length: 608 // tamaño cuerpo en bytes // linea en blanco hace de separador entre cabecera y cuerpo pregunta <html> ....... // fichero html </html>Friday, March 4, 2011
  57. 57. Formato de cabeceras HTTP GET Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html 1) Solicitud del ClienteComienzo GET /lib/ej.html HTTP/1.1 Comando, camino-recurso, versión-HTTP Host: scom.dit.upm.es Accept: text/*, image/* Sentencias de cabecera:Cabecera Accept-language: en, sp dan información al servidor User-Agent: Mozilla/5.0 (WinNT) Cuerpo GET no incluye cuerpo en la solicitud 2) Respuesta del Servidor: scom.dit.upm.es Comienzo HTTP/1.1 200 OK Versión-HTTP, resultado, frase-adicional Server: Apache/1.3.6 (Unix) Sentencias de cabecera: Cabecera Content-type: text/html, … dan información al cliente Content-length: 608 Cuerpo <html> …….. </html> Cuerpo con fichero HTMLFriday, March 4, 2011
  58. 58. Cabeceras HTTP POST <FORM METHOD=post ACTION="http://scom.dit.upm.es/cgi-bin/aut"> 1) Solicitud del Cliente POST cgi-bin/aut HTTP/1.1Comienzo Host: scom.dit.upm.es Accept: text/*, imag/gif, image/jpeg, imag/png Accept-language: en, spCabecera User-Agent: Mozilla/5.0 (WinNT) Content-type: application/x-www-form-urlencoded Content-length: 30 Cuerpo color=blue&msg=Deje+su+mensaje 2) Respuesta del Servidor: scom.dit.upm.es HTTP/1.1 200 OK Server: Apache/1.3.6 (Unix) Comienzo MIME-version: 1.0 Content-type: text/html, … Cabecera Last-modified: Wed, 14-Mar-95 18:15:23 GMT Content-length: 608 Cuerpo <html> …….. </html>Friday, March 4, 2011
  59. 59. Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. TotyFriday, March 4, 2011
  60. 60. Carga de una página típica Un pagina (X)HTML contiene habitualmente otros objetos que se cargan en transacciones separadas.  Conexiones persistentes y transacciones concurrentes aceleran mucho la descarga de la página completa Pagina Objetos asociadosFriday, March 4, 2011
  61. 61. Conexión persistente y en paralelo La conexión TCP en HTTP 1.1 es persistente  Queda establecida al finalizar una transacción  Hasta que cliente o servidor solicitan el cierre con  Connection: close  Permite múltiples transacciones con una única conexión TCP Las conexiones HTTP 1.0 no son persistentes Se puede mantener la conexión TCP establecida con  Connection: keep-alive HTTP 1.1 permite transacciones en paralelo (pipelined)  Una transacción puede comenzar sin que finalice la anterior  La finalización de las transacciones debe seguir el orden de comienzo  Aumenta mucho la velocidad de carga de páginas WebFriday, March 4, 2011
  62. 62. Ejercicio aplicación-2 • Installar Mozilla Firefox y añadirle el Add-On “Live HTTP Header” que permite ver las cabeceras HTTP intercambiadas con un servidor.  Acceder a un servidor e interpretar las cabeceras intercambiadas. • Hacer un telnet al puerto 80 y simular comandos HTTP introduciendolos a través del teclado  > telnet <host> <port> ....Friday, March 4, 2011
  63. 63. Rest: Restful Web ServicesFriday, March 4, 2011
  64. 64. Índice REST o WS Principios de REST  Direccionabilidad  Interfaz uniforme  Sin estado  Representación abierta  Hipertexto ConclusionesFriday, March 4, 2011
  65. 65. Servicios o RecursosFriday, March 4, 2011
  66. 66. Friday, March 4, 2011
  67. 67. Que es RESTFriday, March 4, 2011
  68. 68. REST: PrincipiosFriday, March 4, 2011
  69. 69. Interfaz uniformeFriday, March 4, 2011
  70. 70. Ejemplo: Amazon S3 Servicio de almacenamiento de objetos: “Disco Virtual” Arquitectura Cloud Computing http://aws.amazon.com/s3/ Autenticación: “AWS Access Key” o “Certificado X.509” Tiene 3 tipos de recursos: Bucket-list: conjunto de buckets* de un usuario https://s3.amazonaws.com/ Bucket en particular: repositorio de objetos https://s3.amazonaws.com/{Bucket}/ Objeto: posee metadato y valor https://s3.amazonaws.com/{Bucket}/{Objeto} *Bucket: disco o repositorio virtual accesible a través de HTTPFriday, March 4, 2011
  71. 71. REST,  reu-lización  y  mashupsFriday, March 4, 2011
  72. 72. Cachés y Gestión del tráfico WebFriday, March 4, 2011
  73. 73. Los Clicks y el tráfico de Internet Cada click en un URL de una página Web  Desencadena una acceso Web (HTTP) El tráfico actual de Internet se mide en clicks  Es decir: Transacciones HTTP Todos los portales de Internet  Intentan maximizar el número de accesos recibidos  Sus ingresos de publicidad dependen del número de accesos Atractores de clicks  El tráfico (clicks) depende de los enlaces a una página  Desde blogs, Google o sistemas de recomendaciónFriday, March 4, 2011
  74. 74. Descargas de Páginas WebFriday, March 4, 2011
  75. 75. Optimización del Tráfico Se realiza con caches en dispositivos proxy o pasarela  Interceptan los accesos  Y sirven el contenido solicitado de la cache, si no ha cambiado en el servidor  Una cache se situa en ciente, servidor o punto intermedio estratégico Proxy: dispositivo intermedio elegido por el cliente Pasarela: dispositivo intermedio elegido por el servidor o la red Figura tomada de “HTTP Developer’s Handbook” de Chris ShiflettFriday, March 4, 2011
  76. 76. Identificador de recurso: Etag Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html 1) Solicitud condicional de recurso Comienzo GET /lib/ej.html HTTP/1.1 Accept: text/* Cabecera Accept-language: en, sp If-None-Match: “V45789099” Cuerpo 2) Respuesta confirmando Comienzo HTTP/1.1 304 Not Modified Content-type: text/html, … Cabecera Content-length: 0 Date: Wed, 03 Jul 2002, 19:18:23 GMT Etag: “V45789099” Cache-Control: max-age=36000 // cachear 36000 segundos CuerpoFriday, March 4, 2011
  77. 77. Control de Última Modificación Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html 1) Solicitud condicional de recurso Comienzo GET /lib/ej.html HTTP/1.1 Accept: text/* Cabecera Accept-language: en, sp If-Modified-Since: Wed, 21 Jun 2002, 12:11:23 GMT Cuerpo 2) Respuesta confirmando Comienzo HTTP/1.1 304 Not Modified Content-type: text/html, … Cabecera Content-length: 0 Date: Wed, 03 Jul 2002, 19:18:23 GMT Expires: Fri, 05 Jul 2002, 19:18:23 GMT CuerpoFriday, March 4, 2011
  78. 78. Gestión de Cache Las cabeceras informan al gestor de una cache si los recursos son “frescos” o “caducados” Cabeceras de gestión de cache mas comunes  If-Non-Match: <versión Etag de un recurso> // Cliente  Etag: <version del objeto para determinar si ha cambiado> // Servidor  If-Modified-Since: <Enviar solo si modificado desde xxx> // Cliente  Last-Modified: <Fecha de ultima de última modificación> // Servidor  Cache-Control: max-age=3600 // Servidor  Otros parametros de Cache-Control:  max-age=0 // no guardar  no-store // no guardar  No-cache // guaradar, pero no utilizar sin comprobar queFriday, March 4, 2011
  79. 79. Redes  de  Distribución  de  Contenidos • Internet  no  fue  diseñada  para  realizar  transacciones – TCP/IP  es  muy  ineficaz  para  esta  funcion • No  opCmiza  el  tráfico – Se  diseño  para  crear  aplicaciones  extremo-­‐a-­‐extremo • Clientes  dialogan  con  el  servidor • Son  necesarias  CDNs  (Content  Delivery  Networks) – OpCmizan  el  uso  del  ancho  de  banda  con  “caches” • Evitando  retransmiCr  el  mismo  recurso – Cada  vez  que  lo  pide  un  usuarioFriday, March 4, 2011
  80. 80. Future InternetFriday, March 4, 2011
  81. 81. Internet  del  Futuro  y  la  Arquitectura   de  Internet ....Friday, March 4, 2011
  82. 82. Internet  del  Futuro • Cada  vez  existe  mayor  conciencia  sobre  la  necesidad  de – Redefinir  Internet  y  TCP/IP • Para  opCmizar  la  distribución  de  contenidos – Dilema:  “Evolu@on”  o  “Revolu@on” – Van  Jacobson,  Agosto  2006:   • h=p://video.google.com/videosearch?q=van+jacobson&emb=0&aq=f#   • Todos  los  países  han  creado  programas  de  invesCgación – Centrados  en  crear  la  Internet  del  Futuro • Aunque  nadie  sabe  como  será  realmenteFriday, March 4, 2011
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×