Your SlideShare is downloading. ×
Arquitectura Web 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Arquitectura Web 1

7,779
views

Published on

Introduccion a la arquitectura del Web I

Introduccion a la arquitectura del Web I

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
7,779
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
164
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. Nivel de aplicación: Web I Bibliografia: - Web Design in a Nutshell, J. Niederst Robbins, 3rd Ed., O’Reilly, 2006 (Safari) - HTTP: Pocket Reference, Clinton Wong, O’Reilly 2000 (Safari) - Java Network Programming, E. Rusty Harold, 3ª Ed., O’Reilly 2004 (safari) - Restful Web Services, L. Richardson, S. Ruby, O’Reilly, 2007 (Safari) - Safari Books: http://proquest.safaribooksonline.com/ Otros: - XML in a Nutshell, E. R. Harold, W. S. Means, 3rd Ed., O’Reilly, 2004 (Safari) - HTTP: The Definite Guide, D. Gourley & B. Totty, O’Reilly 2002 (Safari) - HTTP Developer’s Handbook, Chris Shiflett, Developer’s Library, 2003 (Safari) - HTML & XHTML, C. Musciano, B. Kennedy, 6th Ed., O’Reilly, 2006 (Safari) - Using Microformats, B. Suda, O’Reilly, 2006 (Safari) - Normas W3C (http://www.w3.org) y RFCs del IETF (http://www.ietf.org) Tuesday, October 27, 2009
  • 2. Índice (primera parte) El Correo Electrónico y las primeras Aplicaciones El Web, Recursos y URIs HTML y HTTP Navegación Web Aplicaciones Web de Servidor Autenticación Sesiones Web HTTP y Gestión de Tráfico HTML Semántico Web Semántico y Micro-formatos Separando Estructura y Visualización: CSS ……… Tuesday, October 27, 2009
  • 3. El Correo Electrónico y las primeras aplicaciones Tuesday, October 27, 2009
  • 4. Los 80: Las primeras aplicaciones 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  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 4 Tuesday, October 27, 2009
  • 5. Correo electrónico Correo electrónico (email): primer motor de Internet Todavía es una de las aplicaciones más utilizadas Envía un mensajes electrónico entre dos buzones  Crea una dirección de buzón: “javier@dit.upm.es” Protocolo SMTP (Simple Mail Trans. Prot., RFC821)  Posteriormente aparecen otros protocolos: POP3, IMAP, ... Formato de mensaje definido en RFC 822 (1982)  Solo permite texto ASCII en Cabecera y Cuerpo  Línea en blanco: separa Cabecera de Cuerpo 5 Tuesday, October 27, 2009
  • 6. 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) ……. Content-Length: 532 Hola a todos: Esta mañana he terminado de integrar …………… .......... Un saludo Enrique Tuesday, October 27, 2009
  • 7. 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., ... 7 Tuesday, October 27, 2009
  • 8. 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” Tuesday, October 27, 2009
  • 9. 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, ... Tuesday, October 27, 2009
  • 10. 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 Enrique Tuesday, October 27, 2009
  • 11. El Web Tuesday, October 27, 2009
  • 12. Los 90: El Web Propuesto por Tim Berners Lee en 1989 Es un “Servicio Abierto” de  Publicación de documentos “hypertexto” en la red  Alta usabilidad: “se navega haciendo click en enlaces” El Web crece incesantemente desde sus comienzos  Arquitectura escalable: descentralizada El Web 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 12 Tuesday, October 27, 2009
  • 13. 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!! 13 Tuesday, October 27, 2009
  • 14. Navegación Web 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.html Tuesday, October 27, 2009
  • 15. Clientes y Servidores Web Cliente Web: Visor o Navegador Web  Microsoft Explorer, Firefox, Safari, Opera, Googe Chrome, …  Son de gran complejidad  Simplifican el desarrollo de aplicaciones Web  Dan acceso a recursos Web HTTP (URL) HTML, XML, .. Servidor Web  Programa capaz de dar recursos Web a clientes  Utilizando transacciones HTTP  Servidores mas comunes: Apache, Tomcat, Microsoft IIS, …  Prestaciones y escalabilidad son muy importantes  Debe atender muchos clientes 15 Tuesday, October 27, 2009
  • 16. Distribución mundial HTTP (URL) HTML, XML, .. Website Growth in 2008: 24.4% –Apache 13.7% – IIS 22.2% – Google GFE 336.8% – Nginx 100.3% –Lighttpd Tuesday, October 27, 2009
  • 17. Tipos de Aplicaciones Web Navegación Web  Servidores sirven páginas Web en HTML HTTP (URL)  Navegación a través de hiperenlaces HTML, XML, .. Aplicaciones de servidor  Las solicitudes se envían a través de formularios  Servidores ejecutan programas en Java, PHP, RoR, C#, …  Consulta a BD, servicios interactivos, …..  Devuelven los resultados como una página HTML, XML, … Aplicaciones de cliente  Se ejecutan en visor Web (en Java, Javascript, C#, ..)  Optimizan el uso del ancho de banda de Internet  Nombre: AJAX - Asynchronous Javascript and XML “Rich Web Applications” (Flex)  Arquitecturas de objetos distribuidos 17 Tuesday, October 27, 2009
  • 18. El Tráfico de Internet Las aplicaciones son el motor del tráfico de Internet Mayor incremento de tráfico actual  Video IP: YouTube, streaming, IP TV, …  Tráfico P2P esta perdiendo peso en el porcentaje global Tuesday, October 27, 2009
  • 19. Acumulación de Recursos Web Web: mayor repositorio de recursos, información y conocimiento Esta dividido en continentes: Central Core, In, Out, Islands, … Mayor fuente de contenidos en 2008 Web-social: Contenido Generados por Usuarios (CGU) Email: 210 billardos diarios (70% spam) Sitios Web: 186 millones (31,5M nuevas). Blogs: 133 millones, 329 millones de posts (Tecnorati) Fotos: Facebook (10 Billardos), Flikr (3 Billa.), Photobucket (6 Billa.) Reproducción Video EEUU: 12,7 billard./mes, 87 al mes por usuario Mayor reto: Web Mining Gestión de la información acumulada: Búsqueda Clasificación Análisis …. Google: usa algoritmos todavía muy primitivos Tuesday, October 27, 2009
  • 20. W3C - WWW Consortium WWW Consortium  Creado en 1994  Participan empresas e instituciones  Trata de anticiparse a las implementaciones  Con normas que abran caminos nuevos  Normas W3C (en colaboración con IETF)  Web inicial: URI, HTTP, HTML  Normas posteriores : CSS, XML, XHTML, MathML, SVG, SMIL, …  Web de datos (Web Services): WSDL, SOAP, …  Web Semántico: RDF, Ontologias, …  Mas información en: http://www.w3.org Tuesday, October 27, 2009
  • 21. Recursos y URIs Tuesday, October 27, 2009
  • 22. Recursos y URIs 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  El URI define también el formato del recurso Un recurso debe tener un formato “conocido”  Texto ASCII, HTML, XML, JSON, …. Tuesday, October 27, 2009
  • 23. 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 escasamente Tuesday, October 27, 2009
  • 24. Formato de un URL <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#seccion Tuesday, October 27, 2009
  • 25. Usos especiales de URLs URLs Web relativos y absolutos: URL Web absoluto: http:///www.bb.es/archivo/doc1.html URL Web relativo al anterior: /../eventos/congreso.html equivale a: http://www.bb.es/eventos/congreso.html donde “/..” significa directorio anterior http://www.bb.es/archivo/ equivale a http://www.bb.es/archivo/index.html Recurso por defecto de un URL Web: index.html http://www.bb.es/archivo/ equivale a http://www.bb.es/archivo/index.html URLs mailto para crear mensajes El URL de mail (RFC 2368) permite generar mensajes asignando valores a campos Tutorial en: http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm Ejemplo: mailto:jesus@dit.upm.es,santi@dit.upm.es?subject=Cita&body=Quedamos%20hoy. Si incluimos el URL anterior en una pagina web y hacemos click en el, aparece este msj: 25 Tuesday, October 27, 2009
  • 26. Formato: x-www-form-urlencoded Formato de codificación “universal” de URLs Independiente de maquina (RFC 3986)  Adaptado a código ASCII y extendido a UTF-8  Utilizado en:  URLs y objetos con tipo MIME: “application/x-www-form-urlencoded” Reglas de codificación  Caracteres que no se codifican: a-z A-Z 0-9 - _ . ~  Espacio en blanco: se transforma en ’+’ o ’%20’  Caracteres delimitadores de URL: ! * ‘ ( ) ; : @ & = + $ , / ? % # [ ]  No se codifican cuando son delimitadores en URI (RFC 3986)  Resto de caracteres UTF-8 codificados en hexadecimal: %xy  excepto los que no se codifican o actúan como delimitadores de URI Tuesday, October 27, 2009
  • 27. Clase URLEncoder Tuesday, October 27, 2009
  • 28. Ejercicio aplicación-1 Codificar los siguientes parametros de un query correctamente codificado en x-www-form- urlencoded  Nombre=“Batman for ever”  Email=bf@paramount.com  Año=1927  Cita=23/10/2001 a las 21:30 Tuesday, October 27, 2009
  • 29. HTTP y HTML Tuesday, October 27, 2009
  • 30. Navegación Web Tuesday, October 27, 2009
  • 31. Navegación Web 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 y presenta página HTML en Visor.. ¡¡¡ Para publicar páginas Web y navegar no hace falta programar, solo crear páginas HTML y llevarlas a un servidor Web !!! Tuesday, October 27, 2009
  • 32. Lenguajes de Marcado Tuesday, October 27, 2009
  • 33. HTML HTML  Lenguaje de marcado de documentos  Permite definir la estructura de un documento introduciendo marcas  Titulo, subtítulo, secciones, listas, párrafos, figuras, tablas, ... HTML ha evolucionado mucho desde su aparición (1989)  Inicialmente era un lenguaje muy sencillo  Pero fácilmente extensible y escalable  Versión actual: HTML 4.01, Dic-99  http://www.w3.org/TR/1999/REC-html401-19991224  http://www.w3schools.com/html  Durante su evolución se introdujeron marcas presentacionales  Permiten controlar la visualización de un documento  Están en proceso de extinción -> se recomienda no utilizarlas Tuesday, October 27, 2009
  • 34. Marcado HTML Tuesday, October 27, 2009
  • 35. 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> Tuesday, October 27, 2009
  • 36. Representación en Arbol Un documento HTML representa un árbol  El árbol describe la estructura del documento  Cada bloque (<..> …. <..>) es un sub-arbol El árbol del ejemplo se representa en la figura HTML HEAD BODY A continuación TITLE H1 <!– --!> Acceda al A . P aparece una UL TABLE lista y una tabla Tutorial de Ejemplo Ejemplo de Esto es un HTML de página cabecera comentario HREF W3C LI LI LI TR TR HTML Schools http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD con Primera COLOR rojo en negrita subíndice celda BR de la tabla IMG Celda 21 Celda 22 red SRC Iconos.gif Tuesday, October 27, 2009
  • 37. Código 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 ejemplo ilustra  El URL va en el atributo HREF <P> párrafo  Ejemplo de atributo: ALIGN=“center” Texto <UL>: lista no numerada Enlaces <OL>: lista numerada Listas   <DL> Lista definida:   Tipo de elemento <dt> .... </dt> Definición de elemento <dd> ... </dd> Tablas <LI>: elemento de lista <OL> o <UL> <UL id=“fragment”> permite referenciar ese Se pueden encontrar mas elemento en un URL con fragment detalles sobre HTML o <FONT>: tipo de fuente <STRONG>: resaltar fuerte XHTML en el Tutorial.  Otros: <SMALL>, <BIG>, <TT>, <Q>, .. <SUB>: subíndice Forms y objetos (ejecutables) Superíndice: <SUP> <TABLE BORDER>: tabla de ven más adelante. No se <TR>: fila de tabla recomienda usar Frames. <TD>: celda de tabla <IMG>: imagen Tuesday, October 27, 2009
  • 38. Ejercicio aplicación-2 Modificar el ejemplo de página HTML anterior para que  La lista sea numerada en vez de “itemizada”  El “elemento rojo” se cambie por  “elemento DIT” y se coloree en azul  Asociando hiperenlace http://www.dit.upm.es/  La lista tenga un nuevo elemento  Con texto “Notificar por correo electrónico”  Con hiperenlace asociado que genere un email  A la dirección: swcm@dit.upm.es  Con asunto: “Ejemplo aplicación-1”  Recordar que hay que codificarlo en “x-www-form- urlencoded” Tuesday, October 27, 2009
  • 39. HTTP Tuesday, October 27, 2009
  • 40. Transacción HTTP GET 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> Tuesday, October 27, 2009
  • 41. Formato de cabeceras HTTP GET Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html 1) Solicitud del Cliente Comienzo GET /lib/ej.html HTTP/1.1 Comando, camino-recurso, versión-HTTP Host: scom.dit.upm.es Cabecera Accept: text/*, image/* Sentencias de 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 HTML Tuesday, October 27, 2009
  • 42. Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. Toty Tuesday, October 27, 2009
  • 43. 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 Web Tuesday, October 27, 2009
  • 44. 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 asociados Tuesday, October 27, 2009
  • 45. Ejercicio aplicación-2 1. 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> .... Tuesday, October 27, 2009
  • 46. La clase URL Tuesday, October 27, 2009
  • 47. Ejemplo: Construcción de URLs import java.net.*; // Este ejemplo solo construye y trocea URLs public class urls { // No accede a los recursos asociados public static void main (String args[]) { try { URL u1 = new URL("http://www.upm.es/hola.html#sec3"); URL u2 = new URL(u1, "manual.html?t=net#sec3"); System.out.println(u1); System.out.println(u2); System.out.println("Protocol: " + u2.getProtocol()); System.out.println("Anchor: " + u2.getAuthority()); System.out.println("Host: " + u2.getHost()); System.out.println("Port: " + u2.getPort()); System.out.println("File: " + u2.getFile ()); System.out.println("File: " + u2.getPath()); System.out.println("Anchor: " + u2.getRef()); } catch (Exception e) {System.out.println(e);} } } Tuesday, October 27, 2009
  • 48. Ejemplo: webAccess Programa de acceso a un recurso en un servidor Web  Crea un objeto URL de acceso a la página Web  Abre el flujo de entrada  Lee y presenta en pantalla la información recibida  Interpreta los octetos como caracteres ASCII invocación:  > java webAccess <url>  > java webAccess http://www.dit.upm.es Tuesday, October 27, 2009
  • 49. Ejemplo: acceso a través de URL import java.io.*; import java.net.*; public class webAccess { public static void main (String args[]) { String line; if (args.length > 0) { try { URL u = new URL(args[0]); // openStream provoca la transacción HTTP-GET DataInputStream p = new DataInputStr.(u.openStream()); while ((line=p.readLine()) != null) {System.out.println(line);} } catch (Exception e) {System.out.println(e);} } } } Tuesday, October 27, 2009
  • 50. Ejercicio aplicación-3 Guardar en un fichero en el escritorio el primer ejemplo HTML de la transparencia 35 “Ejemplo de Pagina HTML”, dando al fichero el nombre:  “Ejemplo de Pagina HTML.html” Modificar el programa del ejemplo “webAccess” para que acepte un URL con blancos y los sustituya por “+” o %20, de forma que pueda acceder a dicho fichero con un URL de tipo “file:///Users/……/Ejemplo de Pagina HTML.html” Entregar tanto el programa modificado como el path de acceso utilizado  Nota: se recomienda crear el fichero y presentarlo en un visor Web para ver el “path” del fichero en el ordenador en que se este trabajando Tuesday, October 27, 2009
  • 51. Clase URL (I) public final class URL extends Object implemen. Serializable { public URL(String protocol, String host, int port, String file) throws MalformedURLException // creación de un URL por partes public URL(String protocol, String host, String file) throws MalformedURLException // creación de un URL por partes public URL(String spec) throws MalformedURLException // parsing de un URL public URL(URL context, String spec) throws MalformedURLException // spec: URL relativo a context ........ Tuesday, October 27, 2009
  • 52. Clase URL (II) ....... public int getPort() public String getProtocol() public String getHost() public String getFile() public String getRef() // sección o referencia protected void set (String protocol, String host, int port, String file, String ref) public int hashCode() public boolean equals(Object obj) // igualdad de URLs public boolean sameFile(URL other) // igualdad de fichero ........ Tuesday, October 27, 2009
  • 53. Clase URL (III) (algunas extensiones de Java 1.3) ....... public String getPath() // getFile() sin query // se introduce por compatibilidad con RFC2396 public String getQuery() public String getUserInfo() public String getAuthority() ........ public final Object getContent(Class[] classes) throws IOException ........ Tuesday, October 27, 2009
  • 54. Clase URL (IV) .......... public final InputStream openStream() throws IOException // Abre la conexión http y accede al recurso public URLConnection openConnection() throws IOExcept. // acceso a la factoría de URLConnection public final Object getContent() throws IOException // acceso a URLConnection y objetos MIME public String toString() public String toExternalForm() public static synchronized void setURLStreamHandlerFactory(URLStreamHandlerF. fac) // instalar una factoría de URLConnection } Tuesday, October 27, 2009
  • 55. Aplicaciones de Servidor Tuesday, October 27, 2009
  • 56. Aplicación Web de Servidor Tuesday, October 27, 2009
  • 57. Aplicación Web de servidor Servidor Web: Ejecuta aplicación en Base de Datos: PERL, PHP, Java, RoR, … MySQL, Oracle, .. Visores Web: HTTP (URL) SQL Cliente solicita Servidor procesa GET serv?user=jose HTTP 1.1 operación desde parametros, formulario y consulta BD y envía parametros devuelve resultado en HTML. XML, .. BD gestiona datos del servidor El cliente recibe y presenta página HTML en Visor. Solicitud de operación: http://mail.google.com/serv?user=jose Tuesday, October 27, 2009
  • 58. Ejemplo Formulario 1 <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <!-- <FORM> define un formulario --> <!-- <INPUT> o <TEXTAREA> def. parámetros de query --> <FORM METHOD=get ACTION="http://localhost:22000/cgi-bin/aut"> <H1>Información de Productos</H1> Elija Producto:<br> <INPUT TYPE=radio NAME=color VALUE=red> Producto rojo <INPUT TYPE=radio NAME=color VALUE=blue CHECKED> Producto azul <INPUT TYPE=radio NAME=color VALUE=green> Producto verde <br><br Escriba su mensaje aquÌ:<br> <TEXTAREA NAME=msg ROWS=2 COLS=30> Deje su mensaje </TEXTAREA><br><br> <INPUT TYPE=reset VALUE="Limpiar campos"><br> <INPUT TYPE=submit VALUE="Enviar formulario”> </FORM> </BODY> </HTML> Ejemplo de path + query generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje Tuesday, October 27, 2009
  • 59. Explicación Formulario 1 Un formulario se define con la marca: <FORM> <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> El atributo “METHOD” define el método <BODY> <FORM METHOD=get de HTTP que se invoca al hacer ACTION="http://localhost:22000/cgi-bin/aut"> “submit”. <H1>InformaciÛn de Productos</H1>  Solo se soporta GET y POST El atributo “ACTION” define el URL que Elija Producto:<br> se va a invocar <INPUT TYPE=radio NAME=color VALUE=red>  Se le añadirán los parámetros que envíe Producto rojo el usuario en el “query” <INPUT TYPE=radio NAME=color VALUE=blue CHECKED>  Se usa formato “x-www-form-urlencoded” Producto azul <INPUT TYPE=radio NAME=color VALUE=green> Producto verde <br><br La marca <INPUT> permite incluir diversos tipos de entradas Escriba su mensaje aquÌ:<br>  TYPE=text: entrada de texto <TEXTAREA NAME=msg ROWS=2 COLS=30> Deje su mensaje </TEXTAREA><br><br>  TYPE=password: palabra clave  Se envía como un parámetro más  El texto tecleado aparece como “*” <INPUT TYPE=reset VALUE="Limpiar campos"><br> <INPUT TYPE=submit VALUE="Enviar formulario”>  TYPE=radio: selección alternativa </FORM>  TYPE=reset: botón para asignar valores </BODY> por defecto </HTML>  TYPE=submit: botón para enviar formulario a servidor La marca <TEXTAREA> define un area para teclear un texto. Ejemplo de path generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje Tuesday, October 27, 2009
  • 60. Cabeceras HTTP GET <FORM METHOD=get ACTION="http://scom.dit.upm.es/cgi-bin/aut"> 1) Solicitud del Cliente Comienzo GET cgi-bin/aut?color=blue&msg=Deje+su+mensaje HTTP/1.1 Host: scom.dit.upm.es Accept: text/*, imag/gif, image/jpeg, imag/png Cabecera Accept-language: en, sp User-Agent: Mozilla/5.0 (WinNT) Cuerpo 2) Respuesta del Servidor: scom.dit.upm.es HTTP/1.1 200 OK Comienzo Server: Apache/1.3.6 (Unix) Cabecera Content-type: text/html, … Content-length: 608 Cuerpo <html> …….. </html> Tuesday, October 27, 2009
  • 61. 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.1 Comienzo Host: scom.dit.upm.es Accept: text/*, imag/gif, image/jpeg, imag/png Accept-language: en, sp Cabecera 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 Comienzo Server: Apache/1.3.6 (Unix) 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> Tuesday, October 27, 2009
  • 62. Ejemplo de pseudo-servidor nombre: FormServer El ejemplo muestra un pseudo servidor http Funcionalidad incompleta (efectos ilustrativos)  Espera una solicitud de conexión TCP  Cuando llega la acepta y espera una solicitud HTTP  Cuando llega, asume que es GET sin analizar el comando  No analiza ni el path ni la versión  No analiza la cabecera  Una vez completada la solicitud HTTP (Línea en blanco)  devuelve una respuesta cableada  Cabecera HTTP  Página HTML generada al vuelo URL de acceso: http://localhost:22000 Tuesday, October 27, 2009
  • 63. import java.io.*; import java.net.*; public class FormServer { public static void main (String args[]) { String l; try { ServerSocket serv = new ServerSocket(2000); System.out.println(”formserver created at port 2000."); while (true) { Socket c = serv.accept(); LineNumberReader i = new LineNumberReader(new InputStreamReader(c.getInputStream())); PrintWriter o= new PrintWriter(c.getOutputStream(), true); while (true) { System.out.println(l = i.readLine()); if (l.equals("")) break;} // Solicitud o.println("HTTP/1.0 200 OK"); o.println("Server: SWCM/1.0"); o.println("MIME-version: 1.0"); o.println("Content-type: text/html"); o.println("Content-length: 96"); o.println(""); // Cabecera o.println("<HTML> <BODY>"); // Cuerpo o.println("<H1> Servidor SWCM </H1>"); o.println("muchas gracias por su transacción"); o.println("</BODY> </HTML> "); c.close(); } } catch (IOException e) { System.err.println(e); } } } Tuesday, October 27, 2009
  • 64. Ejercicio aplicación-4 Modificar “FormServer” para que responda a peticiones con “Formulario” del ejemplo anterior como sigue: El servidor analizará que el comando enviado es GET  En caso de no serlo responda con “400 Bad Request”  Además insertará en la página de respuesta: “Comando no soportado”  En caso de recibir un comando GET  el servidor devolvera “200 OK”  Además analizara si lleva el parametro “color”  Si no lo lleva añadira a la página de respuesta el texto “Bad request”.  Si lo lleva añadira a la página de respuesta en función del valor asignado a “color” el siguiente texto: red: “El producto es SWCM27 y la clave XC5h7-67YH5”  blue: “El producto es SWCM89 y la clave XC5h7-7UI90”  green: “El producto es SWCM02 y la clave XC5h7-R45TY”  Cualquier otro valor: “Producto desconocido” Tuesday, October 27, 2009
  • 65. Autenticación Tuesday, October 27, 2009
  • 66. Identidad Digital y Autenticación Tuesday, October 27, 2009
  • 67. Autenticación y Sesiones Web Tuesday, October 27, 2009
  • 68. HTTP: Autenticación básica  Basic access authentication Pide UserId y pwd a usuario  Formato: “user:pwd” Codificadas en base64  Codificador: http://www.motobit.com/util/base64-decoder-encoder.asp  Ejemplo: SWCM:SWCM Se codifica como: U1dDTTpTV0NN  La transacción debe encriptarse con HTTPS Figura tomada de “HTTP Developer’s Handbook” de Chris Shiflett Tuesday, October 27, 2009
  • 69. Cabeceras: Basic Autentification Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html 1) Solicitud de recurso Web del Cliente 2) Solicitud del Servidor solicitando autenticación Comienzo HTTP/1.1 401 Unauthorized Content-type: text/html, … Cabecera Content-length: 0 WWW-Authenticate: Basic Realm=“example” Cuerpo 3) Respuesta de autenticación del cliente Comienzo GET /lib/ej.html HTTP/1.1 Accept: text/* Cabecera Accept-language: en, sp Authorization: Basic bXluYW1lOm15cGFzcw== Cuerpo 4) Respuesta de servidor entregando el recurso Tuesday, October 27, 2009
  • 70. Ejemplo de servidor nombre: formserver El ejemplo muestra un pseudo servidor http  Funcionalidad incompleta (efectos ilustrativos)  Espera una solicitud de conexión TCP  Cuando llega la acepta y espera una solicitud HTTP  Cuando llega, asume que es GET sin analizar el comando  No analiza ni el path ni la versión  No analiza la cabecera  Una vez completada la solicitud HTTP (Línea en blanco)  devuelve una respuesta cableada  Cabecera  Página HTML fija URL de acceso: http://localhost:22000 Tuesday, October 27, 2009
  • 71. import java.io.*; import java.net.*; public class FormServer { public static void main (String args[]) { String l; try { ServerSocket serv = new ServerSocket(2000); System.out.println(”formserver created at port 2000."); while (true) { Socket c = serv.accept(); LineNumberReader i = new LineNumberReader(new InputStreamReader(c.getInputStream())); PrintWriter o= new PrintWriter(c.getOutputStream(), true); while (true) { System.out.println(l = i.readLine()); if (l.equals("")) break;} // Solicitud o.println("HTTP/1.0 200 OK"); o.println("Server: SWCM/1.0"); o.println("MIME-version: 1.0"); o.println("Content-type: text/html"); o.println("Content-length: 96"); o.println(""); // Cabecera o.println("<HTML> <BODY>"); // Cuerpo o.println("<H1> Servidor SWCM </H1>"); o.println("muchas gracias por su transacción"); o.println("</BODY> </HTML> "); c.close(); } } catch (IOException e) { System.err.println(e); } } } Tuesday, October 27, 2009
  • 72. Autenticación propietaria La autenticación también se puede enviar como parámetros de query.  La comunicación debera ir cifrada con HTTPS  La aplicación del usuario tendrá libertad para gestionar claves y usuarios de forma mas libre Ejemplo de path generado: /cgi-bin/aut?nombre=jose&clave=SWCM&color=blue&msg=Mensaje Tuesday, October 27, 2009
  • 73. Ejemplo Formulario 2 <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <FORM METHOD=get ACTION="http://localhost:2000/cgi-bin/aut"> nombre: <INPUT TYPE=text NAME=nombre SIZE=10 MAXLENGTH=30> clave: <INPUT TYPE=password SIZE=10 NAME=clave> <br><br> <H1>Información de Productos</H1> Elija el color del producto solicitado:<br> <INPUT TYPE=radio NAME=color VALUE=red> rojo <INPUT TYPE=radio NAME=color VALUE=blue CHECKED>azul <INPUT TYPE=radio NAME=color VALUE=green> verde <br><br> Buzón de mensajes:<br> <TEXTAREA NAME=msg ROWS=2 COLS=30> Mensaje </TEXTAREA><br><br> <INPUT TYPE=reset VALUE="Limpiar campos"><br> <INPUT TYPE=submit VALUE="Enviar formulario"> </FORM> </BODY> </HTML> Ejemplo de path generado: /cgi-bin/aut?nombre=jose&clave=SWCM&color=blue&msg=Mensaje Tuesday, October 27, 2009
  • 74. Ejercicio aplicación-5 Modificar “FormServer”  Añadiendo “autenticación básica” en el acceso a la página  Con usuario “SWCM” y palabra de paso “SWCM” Modificar el servidor desarrollado en la práctica “aplicación-4” a partir de “FormServer”  Añadiendo también “autenticación básica”  Con usuario “SWCM” y palabra de paso “SWCM” Tuesday, October 27, 2009
  • 75. Clave pública y clave privada Mensaje legible cifrador Mensaje cifrado descifrador Mensaje legible clave clave Mensaje legible cifrador Mensaje cifrado descifrador Mensaje legible Clave pública Clave privada Tuesday, October 27, 2009
  • 76. HTTPS: Conexiones seguras Extensión de HTTP y Sockets  para cifrar transacciones  Servidor envía certificado público  Cliente envía clave simétrica cifrada con certificado público de servidor  URL https://dit.upm.es/……  Se introduce una capa adicional entre TCP y HTTP Figuras tomada de “HTTP Developer’s Handbook” de Chris Shiflett Tuesday, October 27, 2009
  • 77. Sesiones Web Tuesday, October 27, 2009
  • 78. Ejemplo de sesión Cliente Servidor El servidor envía un identificador (ID) a cada Cliente se autentica Usuario autenticado Las transacciones Servidor crea y envia ID siguientes deben ser asociadas con el mismo Cliente envia ID usuario y con Selecciona producto su registro en la base de datos. Durante todas las transacciones de la Cliente envia ID sesión el usuario Compra producto conservará el mismo identificador. Cliente envia ID Cierra sesión El identificador se libera al hacer Servidor destruye ID Logout. Tuesday, October 27, 2009
  • 79. Gestión de sesiones Tuesday, October 27, 2009
  • 80. Mecanismos de gestión de sesiones Tuesday, October 27, 2009
  • 81. Cookies Servidor enviar cookie al cliente cuando se autentica  Toda cookie lleva asociado un dominio y un path  Cliente almacena cookie durante sesión o hasta fecha límite  Cliente devuelve cookie en toda transacción con dominio/path asociado Ejemplo  Set-Cookie: id=pepe.perez; path/; domain=.dit.upm.es  Cookie: id=pepe.perez Cliente Servidor Autenticación ¿Dónde guarda el cliente el Id de sesión de usuario? Set Cookie con Id Respuesta: en una Send Cookie con Id Cookie que se almacena en el visor Web. Send Cookie con Id Tuesday, October 27, 2009
  • 82. Cabeceras: Cookies 1a) Solicitud de Autenticación: ……. 2a) Respuesta del servidor (Enviando Id en Cookie) Comienzo HTTP/1.1 200 OK Content-type: text/html, … Cabecera Content-length: 567 Set-Cookie: Id=user675; Expires=Tue, 31 Mar 2008 11:30:12 GMT; Path=/ Set-Cookie: User=Pepe+Perez; Expires=Tue, 31 Mar 2008 11:30:12 GMT; Path=/ Cuerpo ……… 1b) Siguiente transacción (con Id en cookie) Comienzo GET /lib/.html HTTP/1.1 Accept: text/* Cabecera Accept-language: en, sp Cookie: Id=user675; User=Pepe+Perez Cuerpo 2b) Respuesta de servidor a usuario Id Comienzo HTTP/1.1 200 OK Content-type: text/html, … Content-length: 128 Cabecera …… Cuerpo ……… Tuesday, October 27, 2009
  • 83. Identificadores en URL Cliente Servidor ¿Dónde guarda el Autenticación cliente el ID de usuario? Respuesta: en URLs del HTML con ID en URLs código ((X)HTML, XML , …) devuelto al cliente. ID en Path HTTP No se requiere soporte especial ni en visor ni HTML con ID en URLs en HTTP. ID en Path HTTP El usuario solo permanece en la sesión si hace click HTML con ID en URLs en las páginas devueltas por el servidor. ID en Path HTTP Se denominan también FAT-URLs HTML con Id en URLs Ejemplo: http://mail.google.com/mail/?account_id=juan.quemada%40gmail.com&zx=nfxtz5vo7i90 Tuesday, October 27, 2009
  • 84. Ejemplo Formulario (FAT-URLs) <HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> <BODY> <!-- <FORM> define un formulario --> <!-- <INPUT> o <TEXTAREA> def. parámetros de query --> <FORM METHOD=get ACTION="http://localhost:22000/cgi-bin/user7/aut"> <H1>Información de Productos</H1> Elija Producto:<br> <INPUT TYPE=radio NAME=color VALUE=red> Producto rojo <INPUT TYPE=radio NAME=color VALUE=blue CHECKED> Producto azul <INPUT TYPE=radio NAME=color VALUE=green> Producto verde <br><br Escriba su mensaje aquÌ:<br> <TEXTAREA NAME=msg ROWS=2 COLS=30> Deje su mensaje </TEXTAREA><br><br> <INPUT TYPE=reset VALUE="Limpiar campos"><br> <INPUT TYPE=submit VALUE="Enviar formulario”> </FORM> </BODY> </HTML> Ejemplo de path + query generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje Tuesday, October 27, 2009
  • 85. Ejercicio aplicación-6 Tuesday, October 27, 2009
  • 86. Cachés y Gestión del tráfico Web Tuesday, October 27, 2009
  • 87. 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ón Tuesday, October 27, 2009
  • 88. Descargas de Páginas Web Tuesday, October 27, 2009
  • 89. 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 Shiflett Tuesday, October 27, 2009
  • 90. 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 Cuerpo Tuesday, October 27, 2009
  • 91. 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 Cuerpo Tuesday, October 27, 2009
  • 92. 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 que Tuesday, October 27, 2009
  • 93. Resumen de Métodos, Cabeceras y Respuestas de HTTP Tuesday, October 27, 2009
  • 94. Metodos de HTTP Métodos de HTTP  GET: Pedir un fichero al servidor  HEAD: Pedir la cabecera de un fichero al servidor  POST: Enviar un formulario al servidor  PUT: Cargar un recurso en el servidor  DELETE: Borrar un recurso del servidor  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 proxy Interfaz CRUD (Create, Read, Update, Delete)  Create: PUT  Read: GET, HEAD  Update: POST  Delete: DELETE Tuesday, October 27, 2009
  • 95. Interfaz Uniforme Tuesday, October 27, 2009
  • 96. Extensiones WebDav Tuesday, October 27, 2009
  • 97. Algunas cabeceras de HTTP Cabeceras mas comunes de HTTP  Accept: // CS  Connection: <para gestión de conexiones> // CS  Content Type: <tipo MIME de datos> // CS  Date: // CS  Content-Length: // C  User-Agent: <si el visor es Explorer, Mozilla, …> // C  Host: <dirección del servidor> // C Gestión de cache  If-Non-Match: <versión Etag de un recurso> // C  Etag: <version del objeto para determinar si ha cambiado> // S Gestión de HTTP GET condicional (solo da el recurso si ha cambiado)  If-Modified-Since: <para gestionar GET condicional> // C  Last-Modified: <complementaria de If-Modified-Since> // S Autenticación  Authorization: <user y pwd> // S  WWW-Authenticate: asociada a “401 Unauthorized” // R Cookies (no standard)  Cookie: // S  Set-Cookie: // R Otros  Slug: <titulo de un doc binario en ATOM-PP” // S Tuesday, October 27, 2009
  • 98. Respuestas mas habituales de HTTP Tuesday, October 27, 2009
  • 99. HTML Semántico Tuesday, October 27, 2009
  • 100. Descripción de Información Tuesday, October 27, 2009
  • 101. Marcado (X)HTML semántico Semántica: “Estudio del significado de las palabras”  Sintaxis: “Estudio de las reglas de composición de las palabras”  Visualización: “Presentación visual de la información” Marcado (X)HTML semántico  Define la estructura de un documento con mayor precisión  Definiendo el formato gráfico para visualizar con CSS (Cascad. Style Sheets)  Definiendo la semántica de los datos con microformatos  HTML semántico: http://en.wikipedia.org/wiki/HTML#Semantic_HTML (X)HTML semántico Utiliza marcas estructurales existentes siempre que sea posible  Headings (<h1,..>), Lists (<ul>, <ol>, ..), Paragraphs (<p>), Citation (<cite>, <q>, <blockquote>,..), Abbreviations (<abbr>), ….  Cuando no es posible, se extiende (X)HTML utilizando  Marca genéricas y atributos de definición de clases y relaciones Tuesday, October 27, 2009
  • 102. Marcas de bloque y línea Delimitadores genéricos: <div>: define un bloque  Un bloque puede contener otro bloque o un elemento en línea. <span>: define un elemento en línea  Un elemento en línea puede contener otro elemento en línea. <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD> <BODY>  <!-- Esto es un comentario --> < <H1> Ejemplo de Cabecera </H1> <DIV> <SPAN> Acceda al <A HREF="http://www.w3schools.com/html/"> tutorial de HTML de W3C Schools</A>. <p> </SPAN> <SPAN> A continuación aparece una lista y una tabla </SPAN> </DIV> <UL> <LI> elemento <FONT COLOR=red>rojo</FONT> </LI> ………… </HTML> Tuesday, October 27, 2009
  • 103. Atributos de clase e identificador Atributo “class” Define una clase asociada al bloque marcado  Se utilizan junto con <DIV> y <SPAN> para definir nuevas clases  La nueva clase tiene múltiples usos  Sucedáneo de nuevas marcas  Identificación de estructuras similares Atributo “id” Define un identificador único en el fichero  Crea una referencia única  Se asocia con un fragment Ejemlo URL: http://www.swcm.es/fich.htm#ColumnaP Ejemplo 1: <h1 class=“cabecera1”> ……. </h1> Ejemplo 2: <div class=“ColumnaPrincipal” id=“ColumnaP”> ……. </div> Tuesday, October 27, 2009
  • 104. Atributos de relación Tuesday, October 27, 2009
  • 105. Web Semántica y Microformatos Tuesday, October 27, 2009
  • 106. Web Semántica Semántica: “Estudio del significado de las palabras”  Sintaxis: “Estudio de las reglas de composición de las palabras” La información Web accesible esta mayoritariamente en (X)HTML  (X)HTML no puede ser procesado fácilmente por programas  (X)HTML está pensado para personas  Un programa no es capaz de deducir el significado de una página Web a partir del código (X)HTML La Web Semántica  Iniciativa para facilitar la deducción automática del significado de los contenidos Web  Añadiendo meta-datos a los contenidos Web  Que definan su significado y sus propiedades Tuesday, October 27, 2009
  • 107. Web Semántica o Microformatos W3C: World Wide Web Consortium  Esta definiendo lenguajes “semánticos”  RDF (Resource Description Framework)  Para describir propiedades semánticas de recursos Web  OWL: Web Ontology Language  Para describir significado, ontologías y propiedades semánticas de recursos Web  …..  Son lenguajes de bastante complejidad Microformatos  Conjunto de meta-datos sencillos y abiertos  Definidos en (X)HTML semántico  Basados en normas ampliamente adoptadas en Internet Tuesday, October 27, 2009
  • 108. Microformatos Tuesday, October 27, 2009
  • 109. Microformatos: características Tuesday, October 27, 2009
  • 110. Microformatos: beneficios Permiten indexación y agregación de micro-contenidos  Búsquedas mas eficaces (Google, Yahoo, Technorati, …)  Agregación de recomendaciones, tags, … dispersos Interoperabilidad entre contenidos Web y aplicaciones Por ejemplo: Outlook, Agendas, Calendarios, ....  Ejemplo basado en Plug-in: Firefox Operator  https://addons.mozilla.org/es-ES/firefox/addon/4106  Ejemplos: http://tantek.com/, http://suda.co.uk/contact/ Tuesday, October 27, 2009
  • 111. Ejemplo hCard en Página Web hCard: Microformato para tarjetas de visita  Basado en la norma vCard de Internet (RFC2426)  Generador de hCard: http://microformats.org/code/hcard/creator Ejemplo: “hCard” que contiene “adr” <div id="hcard-Carlos-Terol" class="vcard"> <span class="fn">Carlos Terol</span> <div class="org">ASISA</div> <div class="adr"> <div class="street-address">Moncloa, 23</div> <span class="locality">Madrid</span>, <span class="postal-code">28040</span> <span class="country-name">Spain</span> </div> tf: <span class="tel”>+34 91 386 7371</span> </div> Tuesday, October 27, 2009
  • 112. Relaciones Los atributos “rel” y “rev” se utilizan para definir relaciones, por ejemplo Microformato “rel-tag”: definición de índices (tags) de una página. El URL se utiliza para permitir búsquedas adicionales con dicho índice. <a rel=“tag" href=“http://technorati.com/tag/css“>CSS</a> Microformato “rel-license”: definición de licencia (URL) bajo la que se publica una página. <a rel=“license" href=“http://creativecommons.org/licenses/by/2.5/“> This doc is published under …..</a> Tuesday, October 27, 2009
  • 113. Ejemplo: iCalendar y hCalendar hCalendar: Microformato para definir eventos y citas basados en vCard iCalendar (RFC2445)  Generador de hCalendar: http://microformats.org/code/hcalendar/creator Ejemplo de iCalendar: <div id="hcalendar-Clase-SWCM" class="vevent"> <abbr title="2009-02-20T10:00+01:0000" class="dtstart">February 20, 2009 10</abbr> – <abbr title="2009-02-20T12:00+01:00" class="dtend">12pm</abbr> : <span class="summary">Clase SWCM</span> at <span class="location">ETSI Telecomunicacion, 28040, Madrid Spain</span> <div class="tags">Tags: <a href="http://eventful.com/events/tags/Web" rel="tag">Web</a> <a href="http://eventful.com/events/tags/URL" rel="tag"> URL</a> <a href="http://eventful.com/events/tags/HTTP" rel="tag"> HTTP</a> <a href="http://eventful.com/events/tags/HTML" rel="tag"> HTML</a> </div> </div> Tuesday, October 27, 2009
  • 114. Separando Estructura y Visualización Tuesday, October 27, 2009
  • 115. Estructura y Visualización Inicialmente HTML solo permitía definir la estructura de un documento  Dejando al navegador libertad de visualización En los noventa se añaden marcas de control de visualización  Degradando el espíritu inicial de HTML  Por ejemplo: <font color=“red”> …… <font> En paralelo comenzó la definición de un lenguaje de visualización  CSS (Cascading Style Sheets) Hoy se recomienda utilizar solo marcas estructurales  Nunca las de visualización  La visualización se debe definir en CSS Tuesday, October 27, 2009
  • 116. CSS (Cascading Style Sheets) CSS permite separar ambas definiciones  La estructura se define con XML o (X)HTML  La visualización se define con CSS (o XSL) CSS permite visualización independiente de terminal  Una página puede visualizarse correctamente en PC, PDA o móvil aplicando diferentes estilos CSS Versiones de CSS  CSS 1.1 (última versión del 99)  CSS 2.1 (última versión del 07, valida)  http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21  Tutorial: http://www.w3schools.com/css  CSS 3 (en desarrollo) Tutorial: http://www.w3schools.com/css/default.asp Tuesday, October 27, 2009
  • 117. Ejemplo: presentación con CSS Fichero HTML puro Fichero HTML + formato en CSS Tuesday, October 27, 2009
  • 118. Ejemplo: HTML y CSS <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE> <link rel="stylesheet" href="ejemplo.css" type="text/css" /> </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> <LI> elemento <FONT COLOR=red>rojo</FONT> </LI> <LI> elemento <STRONG>en negrita</STRONG> </LI> /* Ejemplo de hoja de estilo */ <LI> elemento <SUB>con subíndice</SUB> </LI> </UL> H1 {color: red; background-color: #ABD;} <TABLE BORDER> UL {color: blue; <TR> <TD>Primera celda <br> de la tabla</TD> font-size: smaller; font-style: italic; <TD><IMG SRC="iconos.gif"></TD> </TR> background-color: #ABD;} <TR> <TD>Celda 21</TD> <TD>Celda 22</TD> </TR> TABLE {border-collapse: separate; </TABLE> border-spacing: 5px 5px; background-color: #8BD;} </BODY> </HTML> Tuesday, October 27, 2009
  • 119. Características de CSS Fichero CSS: comandos de presentación de marcas  Definen tipos de letra (fonts), colores, espaciado, bordes, ... Comando CSS:  “Selector { propiedad: valor; …..}”  Ejemplo: “h1 {color: red; font: arial 20pt; }” “Selector” identifica las marcas donde aplicar la propiedad  <h1>, <p attr=“value”>, <table>, …. “propiedad: valor;” define como visualizar Tuesday, October 27, 2009
  • 120. Representación en Arbol h1 {…………} HTML ul {…………} table {…………} HEAD BODY A continuación TITLE H1 <!– --!> Acceda al A . P aparece una UL TABLE lista y una tabla Tutorial de Ejemplo Ejemplo de Esto es un HTML de página cabecera comentario HREF W3C LI LI LI TR TR HTML Schools http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD con Primera COLOR rojo en negrita subíndice celda BR de la tabla IMG Celda 21 Celda 22 red SRC Iconos.gif Tuesday, October 27, 2009
  • 121. Ejemplos de “selector” h1, h2, p {color: blue;} /* aplica a marcas h1, h2 y p */ h1 h2 {color: blue;} /* marca h2 después de h1 en el árbol */ h1 > h2 {color: blue;} /* marca h2 justo después de h1 en el árbol */ h1 + p {color: blue;} /* marca p adyacente a h1 del mismo nivel del árbol */ h1[border] {color: blue;} /* marca h1 con atributo border */ h1[border=“yes”] {color: blue;} /* marca h1 con atributo border=“yes” */ h1.princ {color: blue;} /* marca h1 con class=“princ” */ .princ {color: blue;} /* cualquier marca con class=“princ” */ h1#d83 {color: blue;} /* marca h1 con id=“d83” */ #d83 {color: blue;} /* cualquier marca con id=“d83” */ a:link {color: blue;} /* antes de visitar enlace */ a:visited {color: blue;} /* después de visitar enlace */ a:hover {color: blue;} /* al pasar ratón encima del enlace */ a:active {color: blue;} /* al hacer click en enlace */ Tuesday, October 27, 2009
  • 122. El modelo de Caja Cualquier elemento del árbol (X)HTML es una caja para CSS  Los comandos aplican en la caja(s) referenciada por el selector  La estructura de cada caja es similar: margin-area, padding-area, content-area margin-area padding-area Esto es un parrafo de 2 lineas de texto content-area border inner edge outer edge Ejemplos de “propiedad: valores” background-color: #CCC /* color de fondo en RGB (#AB3), nombre (red, ..) */ font-size: 8pt /* tamaño de letra 8pt, 12pt, .., smaler, larger, .. */ font-style: italic; /* estlo de letra normal, italic, .. */ font-family: Arial: /* estilo de letra Arial, Times, …… */ font-weigth: bold: /* peso de letra normal, bold, bolder, lighter, … */ border-collapse: separate; /* tipo de borde de tabla: collapse separate, inherit */ border-spacing: 5px 5px; /* separación de borde de tabla */ text-align: center; /* alineación de texto: left, right, center, ... */ height: 200pt: /* altura de caja */ width: 1mm; /* anchura de caja” */ margin: 1cm; /* anchura de margen */ padding: 10px; /* anchura de padding */ float: right; /* displaay flotante: left, right, none, .. */ clear: both; /* elimina flotación: left, right, both, none, .. */ position: relative; /* define como posicionar caja: static, relative, absolute, .. */ display: nonet; /* tipo de caja generada: inline, block, table, none, .. */ content: “text”; /* inserta text: se utiliza con selector :before o :after */ Tuesday, October 27, 2009
  • 123. CSS en Cascada En (X)HTML CSS se puede incluir  Como atributo “style” de marcas (X)HTML  Ejemplo: <strong style=“color: blue; font: arial 20pt;”>  El selector no hace falta, porque la marca está implícita  En la cabecera de documento HTML con marca “style”  Ejemplo: <head>  <style type=“text/css”>  strong {color: blue; font: arial 20pt;}  </style>  </head>  Como un fichero independiente con marcas “link” o “import” Las definiciones de estilo se aplican en cascada  Todas las definiciones se unen en una única definición  Cuando varios comandos aplican a una marca:  aplica el mas próximo en el árbol Tuesday, October 27, 2009
  • 124. Representación en Arbol En el ejemplo anterior se ha incluido un atributo CSS  En la marca “STRONG” del segundo elemento de la lista El nuevo atributo es el que se aplica  Esta mas próximo en el árbol HTML HEAD BODY A continuación TITLE LINK H1 <!– --!> Acceda al A . P aparece una lista y UL TABLE una tabla Tutorial de Ejemplo Ejemplo de Esto es un HTML de página REL cabecera comentario HREF W3C LI LI LI TR TR HTML Schools stylesheet http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD con Primera HREF COLOR rojo STYLE en negrita subíndice celda BR de la tabla IMG Celda 21 Celda 22 Font-style: Ejemplo.css red normal SRC TYPE Iconos.gif Text/css Tuesday, October 27, 2009
  • 125. Ejemplo Multicolumna El próximo ejemplo ilustra como crear formatos sofisticados con múltiples columnas Para ello es necesario combinar  (X)HTML semántico  Para marcar los bloques de (X)HTML  Con <div class=“…”> o <span class=“…”>  CSS  Para definir como visualizar cada bloque Tuesday, October 27, 2009
  • 126. Ejemplo: Múltiples columnas (sin CSS) <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE> </HEAD> <BODY> <div class="contenedor"> <h1 class="cabecera"> Ejemplo de Pagina con 2 Columnas </h1> <div class="principal"> <H2 class="h2">Página formateada con CSS </H2> Esta es la columna principal de esta pagina Web formateada con CSS, que incluye cabecera, 2 columnas y pie de página. <UL> <LI> Para formatear los bloques se delimitan con <blockquote><strong>&lt;div class="TipoBloque"> .. &lt;/div></strong> </blockquote></LI> <LI> <strong>class="TipoBloque"</strong> se utiliza para definir cual es el formato de cada tipo de bloque</LI> <LI> Cada <em>TipoBloque</em> se formatea con un comando CSS. <blockquote><strong>TipoBloque {propiedad: valor; ...}</strong> </blockquote></LI> </UL> </div> <div class="lateral"> <H3 class="h3"> Enlaces </H3> <A HREF="http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/"> W3C-CSS2.1</A> <br> <A HREF="http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo"> W3C-CSS</A> <br> <A HREF="http://www.w3schools.com/css/"> W3C-School</A> <br> </div> <div class="Pie"> Tuesday, October 27, 2009 --->> Texto a pie de página
  • 127. Ejemplo: Múltiples columnas con CSS Tuesday, October 27, 2009
  • 128. Ejemplo: CSS para múltiples columnas /* “columnas.css”: estilo para columnas.html */ body {margin: 10px; padding: 10px} .contenedor {position: relative; width: 450px; border: solid 1px; background: #ABD; } .cabecera {background: #BCE; padding: 5px; font-weight: bold; font-size: 24pt; text-align: center} .principal {float: right; padding: 1%; background: #CDF; width: 80%} .lateral {padding: 1%; font-size: 8pt; } .pie {clear: both; hight: 50px; background: #89B; Tuesday, October 27, 2009 text-align: left;
  • 129. Ejemplo: Página de estilo CSS <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE> /* “columnas.css”: estilo para columnas.html */ </HEAD> body {margin: 10px; padding: 10px} <BODY> <div class="contenedor"> .contenedor {position: relative; <h1 class="cabecera"> Ejemplo de Pagina con 2 Columnas </h1> width: 450px; border: solid 1px; background: #ABD; } <div class="principal"> <H2 class="h2">Página formateada con CSS </H2> Esta es la columna principal de esta pagina Web formateada con CSS, que incluye cabecera, 2 columnas y pie de página. .cabecera {background: #BCE; <UL> padding: 5px; <LI> Para formatear los bloques se delimitan con font-weight: bold; <blockquote><strong>&lt;div class="TipoBloque"> .. &lt;/div></strong> </blockquote></LI> font-size: 24pt; <LI> <strong>class="TipoBloque"</strong> se utiliza para definir cual es el text-align: center} formato de cada tipo de bloque</LI> <LI> Cada <em>TipoBloque</em> se formatea con un comando CSS. <blockquote><strong>TipoBloque {propiedad: valor; ...}</strong> </blockquote></LI> .principal {float: right; </UL> padding: 1%; </div> background: #CDF; width: 80%} <div class="lateral"> <H3 class="h3"> Enlaces </H3> <A HREF="http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/"> .lateral {padding: 1%; W3C-CSS2.1</A> <br> font-size: 8pt; } <A HREF="http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo"> W3C-CSS</A> <br> <A HREF="http://www.w3schools.com/css/"> W3C-School</A> <br> </div> .pie {clear: both; hight: 50px; background: #89B; <div class="Pie"> text-align: left; Tuesday, October pie de página --->> Texto a 27, 2009
  • 130. Ejercicio aplicación-7 Cambiar el código CSS para que la configuración del ejemplo de página Web con 2 columnas se visualice de la siguiente forma  Los colores de fondo sean en tonos verdosos  El ancho de la página sea de 500 puntos Añadir estos microformatos en el pie de página  los índices “CSS” y “W3C” como “rel-tag”  La licencia (“rel-license”) identificada por el URL:  http://creativecommons.org/licenses/by/2.5/ Visualizar la página con Firefox y el add-on “Operator” que reconoce microformatos para validar que los reconoce correctamente  Operator: https://addons.mozilla.org/es-ES/firefox/addon/4106 Tuesday, October 27, 2009
  • 131. Práctica P3 (a entregar) Modificar el servidor diseñado en la practica aplicación 6 a partir de FormServer para que  Incluya código CSS en la cabecera (<head>) que presente las cabeceras en amarillo con fondo azul.  Además todas las páginas que devuelva el servidor deberán incluir:  Nombre, dirección y teléfono de la empresa Incluidos como microformato hCard visible al final de cada página   El nombre y dirección de la empresa serán:  SWCM S.A., Isaac Peral 8, 3º A, 28040, Madrid, tf: +91 321 4621 Tuesday, October 27, 2009