nivel de aplicación: web i · pdf file · 2010-05-12extensiónes mime...
TRANSCRIPT
Nivel de aplicación: Web IBibliografia:- 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)
Sunday, February 28, 2010
Índice (primera parte)El Correo Electrónico y las primeras aplicacionesEl Web, Recursos y URIsHTML y HTTPNavegación WebAplicaciones Web de ServidorAutenticaciónSesiones WebHTTP y Gestión de TráficoHTML SemánticoWeb Semántico y Micro-formatosSeparando Estructura y Visualización: CSS………
Sunday, February 28, 2010
El Correo Electrónico y las primeras aplicaciones
Sunday, February 28, 2010
Los 80: Las primeras aplicacionesEl é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 óptima4
Sunday, February 28, 2010
Correo electrónicoCorreo 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: “[email protected]”
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
Sunday, February 28, 2010
Ejemplo de mensajeAsunto: Se han integrado los tunelesDe: Enrique Lopez <[email protected]>Fecha: Tue, 11 Sep 2007 10:49:08 +0200Para: [email protected], ....Message-ID: <[email protected]>Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)…….Content-Length: 532
Hola a todos:
Esta mañana he terminado de integrar ……………..........Un saludoEnrique
Sunday, February 28, 2010
MIMEMIME (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
Sunday, February 28, 2010
Extensiónes MIMEMIME 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 redEjemplo: “Content-ID: <[email protected]>”
Content-Description: texto descriptivoEjemplo: “Content-Description: Pagina de prueba del servicio”
Sunday, February 28, 2010
Tipos de contenidos MIMECampo 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, ...
Sunday, February 28, 2010
Ejemplo de mensajeAsunto: Se han integrado los tunelesDe: Enrique Lopez <[email protected]>Fecha: Tue, 11 Sep 2007 10:49:08 +0200Para: [email protected], ....Message-ID: <[email protected]>Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)MIME-Version: 1.0Content-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 saludoEnrique
Sunday, February 28, 2010
El Web
Sunday, February 28, 2010
Los 90: El WebInventado por Tim Berners Lee en 1989
Es el almacén de contenidos que la red necesita Crece incesantemente hasta convertirse en el mayor repositorio de
información que ha existido
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 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
12
Sunday, February 28, 2010
El Tráfico de InternetLas aplicaciones son el motor del tráfico de InternetMayor incremento de tráfico actual Video IP: YouTube, streaming, IP TV, …
Tráfico P2P esta perdiendo peso en el porcentaje global
Sunday, February 28, 2010
Acumulación de Recursos WebWeb: “repositorio de recursos, información y conocimiento”
El mayor que ha existido en la historia de la humanidad
Principal fuente de contenidos en 2008: Web socialContenido Generados por Usuarios, principalmente “social-media”
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
Reto principal del Web: Web MiningGestión de la información acumulada:
BúsquedaClasificaciónAnálisis….
Google: usa algoritmos todavía muy primitivos
Sunday, February 28, 2010
W3C - WWW ConsortiumWWW 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, … Normas en retroceso: Web Services (SOAP, … ) Web Semántico: RDF,
Ontologias, … HTML5
Mas información en: http://www.w3.org
Sunday, February 28, 2010
Los componentes del primer WebURI (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!!
16
Sunday, February 28, 2010
Navegación Web
Cada página HTML se identifica por un URL, por ejemplo http://mail.google.com/PaginaWeb.html
Cliente Web
Servidor Web
HTTP (URL)
El cliente recibe
y presenta página HTML
en Visor..
Servidor envía pag.
Web a cliente.
ClienteSolicita pag.con click en hiperenlace
HTTP - GET PaginaWeb.html HTTP 1.1
<PaginaWeb.html>
Sunday, February 28, 2010
Clientes y Servidores WebCliente Web: Visor o Navegador Web Permiten acceder a recursos Web
Simplifican el desarrollo de aplicaciones Web Son de gran complejidad
Ejemplos Microsoft Explorer, Firefox, Safari, Opera, Google Chrome, …
Servidor Web Programa capaz de dar recursos Web a clientes
Utilizando transacciones HTTP Prestaciones y escalabilidad son muy importantes
Debe atender muchos clientes Ejemplos:
Apache, Tomcat, Microsoft IIS, …
18
HTTP (URL)
HTML, XML, ..
Sunday, February 28, 2010
Cuotas de uso (2008)
Website Growth in 2008:
24.4% –Apache13.7% – IIS22.2% – Google GFE336.8% – Nginx100.3% –Lighttpd
HTTP (URL)
HTML, XML, ..
Sunday, February 28, 2010
Aplicaciones WebAplicaciones Web Basadas en URLs, HTML y HTTP Pueden ser aplicaciones de servidor o de cliente
Aplicaciones de servidor Proveen servicios avanzados
Para consulta a bases de datos, a servicios interactivos, ….. El usuario envía solicitudes con formularios HTML Programas del servidor devuelven resultados como páginas HTML
Aplicaciones de cliente Mejoran la experiencia de usuario y la interactividad
Optimizan el uso del ancho de banda de Internet Se ejecutan en visor Web (en Java, Javascript, C#, ..) Conocidas como aplicaciones AJAX: Asynchronous Javascript and XML
“RIA: Rich Internet(Web) Applications” (Flex) Arquitecturas de objetos distribuidos Nuevo paradigma muy eficaz
20
HTTP (URL)
HTML, XML, ..
Sunday, February 28, 2010
Mobile Internet Compu0ng
Sunday, February 28, 2010
Terminales: evolución
Sunday, February 28, 2010
Terminal Móvil de Acceso a Internet
Sunday, February 28, 2010
Internet Móvil (Morgan Stanley)
Sunday, February 28, 2010
Recursos y URIs
Sunday, February 28, 2010
Recursos y URIsUn 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, ….
Sunday, February 28, 2010
Identificación de recursosURI: 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 NameNombre de un recurso, independiente de posiciónSe definió en la norma, pero se utiliza escasamente
Sunday, February 28, 2010
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:[email protected] 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
Sunday, February 28, 2010
Usos especiales de URLsURLs 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 mensajesEl URL de mail (RFC 2368) permite generar mensajes asignando valores a campos
Tutorial en: http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htmEjemplo:
mailto:[email protected],[email protected]?subject=Cita&body=Quedamos%20hoy.
Si incluimos el URL anterioren una pagina web y hacemosclick en el, aparece este msj:
29
Sunday, February 28, 2010
Formato: x-www-form-urlencodedFormato 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
Sunday, February 28, 2010
Metodos: encode y decode public static String encode(String s, String encoding)
Codifica los campos de un URL de acuerdo al formato “application/x-www-form-urlencoded”
encode no codifica bien URLs completos, debe codificarse por partes Codifica también los caracteres reservados: ?, =, &, …..
encoding: se recomienda utilizar UTF-8 public static String decode(String s) throws Exception
Ejemplos: Parametro en query: texto=‘hay 27 casos (creo)’
“http://www.xx.es/path?texto=‘hay+27+casos+%28creo%29’ URL mailto:
mailto:[email protected],[email protected]?subject=Cita&body=Quedamos%20hoy.
31
Clase URLEncoder
Sunday, February 28, 2010
Ejercicio aplicación-1Codificar los siguientes parametros de un query correctamente codificado en x-www-form-urlencoded Nombre=“Batman for ever” [email protected] Año=1927 Cita=23/10/2001 a las 21:30
Sunday, February 28, 2010
HTML, Javascript y HTTP
Sunday, February 28, 2010
Lenguaje de marcado: lenguaje de definición de la estructura de un documento SGML (Standard Generalized Markup Language) es un lenguaje utilizado por la industria
editorial que sirve de inspiración al crear HTML Norma ISO 8879:1986 para descripción de documentos
1989-1999: HTML (HyperText Markup Language) Lenguaje de descripción de documentos enlazados Web
Evoluciona de HTML1-1989 a HTML4.01-1999
1997-2009: XML y XHTML XML: Equivalente a SGML pero de menor complejidad
XML es la base de “Web de Datos”, pero JSON gana popularidad. XHTML: redefinición de HTML en XML
Muchas versiones: transitional, frameset, strict, basic, .......
2009 - .....: HTML5: Actualización de HTML en W3C para aplicaciones Web En desarrollo, finalización prevista para 2012
Gran parte de HTML5 implementado en la mayoria de visores Web
Lenguajes de Marcado
Sunday, February 28, 2010
HTML (versiones 1 a 4.01)
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) Lenguaje muy sencillo, fácilmente extensible y escalable
Evoluciona hasta: HTML 4.01, Dic-99 http://www.w3.org/TR/1999/REC-html401-19991224
Se complementa con Javascript y DOM Javascript: lenguaje para aplicaciones de cliente DOM: arbol sintactico procesable en Javascript de HTML
Durante la 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
Sunday, February 28, 2010
Nueva version de HTML En desarrollo en W3C
http://www.w3.org/TR/html5/, http://en.wikipedia.org/wiki/HTML5 Norma prevista para 2012
Compatible con HTML y XHTML (transicional)
Primera revisión de HTML en más de una década Desde 1999 W3C intenta redefinir HTML como XHTML
Sustituira a: HTML4, XHTML1.0 y DOM2-HTML Fabricantes de browsers han rechazado XHTML
Pensado para aplicaciones Web actuales Google services, Youtube, Facebook, .... con acceso desde móvil: iPhone, Android, Blackberry, ...
Soporte muy avanzado en la mayoria de browsers http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
HTML5
Sunday, February 28, 2010
Múltiples mejoras en definición de estructura de documentos, formularios, ..... Adaptando al uso que se realiza en portales y Webs
Con soporte para accesibilidad en sentido amplioGráficos vectoriales con SVG (Scalable Vector Graphics) y formulas matematicas con (MathML) Deben verse con la misma calidad en movil que en sobremesa
CANVAS imagenes con mapas de bits (para juegos, etc.)
Geolocalicación y otros sensores Aplicaciones móviles con posicionamiento geográfico y realidad aumentada
Video y audio Portales de video (YouTube, ..) y audio (Spotify, ...)
Aplicaciones Web y soporte para mobile Web workers Base de datos local, cache de datos, ....
Para trabajar desconectados y sincronizar con servidor posteriormente Por jemplo en Gmail. Hotmail, Google Docs. etc
Mejoras en DOM y APIs Javascript.......
Nuevas funcionalidades de HTML5
Sunday, February 28, 2010
Marcado HTML Las marcas delimitan el principio y fin de un elemento: <TITLE> Titulo .. </TITLE> <H1> Cabecera nivel 1 </H1>, ...
Algunos elementos pueden llevar atributos <A HREF="http://www.dit.upm.es"> Dept. Ing. Telemática</A>
Algunos comandos pueden omitir el terminador (solo en HTML) <P> indica final de párrafo
En XML, XHTML el terminador es obligatorio </P> o se debe utilizar una sintaxis especial <P />
Las marcas deben anidarse salvaguardando la estructura de arbol Marcado correcto: <H1> El <EM> Titulo </EM> es lo mas <B> importante </B> </H1> Marcado erróneo: <H1> El <EM> Titulo </H1> </EM>
DOM: Document Object Model Representación del arbol sintáctico de un documento HTML
Sunday, February 28, 2010
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> <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> <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>
Sunday, February 28, 2010
HTML
HEAD BODY
TITLE
Ejemplo página HTML
H1 <!– --!>
Ejemplo decabecera
Accedaal A P
A cont. .....una lista y una tabla
UL TABLE.
HREF= http://ww ..”
LI
FONT
COLOR=”red” rojo
LI
elemento STRONG
en negrita
LI
SUB
con subíndic
TR TR
TD TD TD TD
Primera celda BR de la
tabla IMG Celda21
Celda22
Esto es un comentario
DOM: Doc. Object ModelDOM: API Javascript para procesar HTML Utiliza el árbol definido por anidamientos de marcas
Cada bloque (<..> …. <..>) es un sub-arbol 3 tipos de nodos:
elemento: amarillo atributo: rosa texto: blanco
BORDERTutorial de
HTML de W3C
elemento elemento
SRC=“Icono.gif”
Sunday, February 28, 2010
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 Ejemplo de atributo: ALIGN=“center”
<UL>: lista no numerada <OL>: lista numerada <DL> Lista definida:
Tipo de elemento <dt> .... </dt> Definición de elemento <dd> ... </dd>
<LI>: elemento de lista <OL> o <UL><UL id=“fragment”> permite referenciar ese elemento en un URL con fragment<FONT>: tipo de fuente<STRONG>: resaltar fuerte Otros: <SMALL>, <BIG>, <TT>, <Q>, ..
<SUB>: subíndiceSuperíndice: <SUP>
<TABLE BORDER>: tabla<TR>: fila de tabla<TD>: celda de tabla<IMG>: imagen El URL de la imagen va en el atributo SRC
El ejemplo ilustra
Texto EnlacesListas Tablas
Se pueden encontrar masdetalles sobre HTML oXHTML en el Tutorial.
Forms y objetos (ejecutables)de ven más adelante. No serecomienda usar Frames.
Sunday, February 28, 2010
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: [email protected] Con asunto: “Ejemplo aplicación-1”
Recordar que hay que codificarlo en “x-www-form-urlencoded”
Sunday, February 28, 2010
Javascript
Sunday, February 28, 2010
JavascriptJavascript Es el lenguaje por excelencia de aplicaciones de cliente Desarrollado por Netscape para ejecutar en “Navigator”
ECMA lo normalizó, siendo la version mas extendida ECMAScript v3 de dic. 1999, denominado también Javascript 1.3
Otras: ECMAscript v5 (Dic 09), Javascript 2.0 (Harmony) No es Java, aunque la sintaxis y palabras reservadas son casi iguales
Nombre: inicialmente “LifeScript”, pasó a “JavaScript” al triunfar Java
Lenguaje de scripting integrado en código HTML Diseñado para ejecución en un interprete en el visor Web
Interprete analiza y ejecuta el código fuente Javascript Lo ejecuta si es correcto y sino genera una excepción
Strings basados en UNICODE para universalización desde JavaScript 1.3
Sunday, February 28, 2010
Ejemplo de 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 un “string”, 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>
Sunday, February 28, 2010
Ejemplo: JavaScript en URL<html><head><title> Ejemplo 1 Javascript</title></head>
<body><h2> Show Date </h2>
<!-- Un URL JavaScript contiene un script --> <!-- El script se ejecuta al hacer click en URL --> <!-- alert('mensaje'); presenta 'mensaje' -->
<a href='javascript:alert("It is now " + new Date());'>Show date and hour </a>
</body></html>
Sunday, February 28, 2010
Ejemplo: JavaScript en URL con alert()<html><head><title> Ejemplo 1 Javascript</title></head>
<body><h2> Show Date </h2>
<!-- Un URL JavaScript contiene un script --> <!-- El script se ejecuta al hacer click en URL --> <!-- alert('mensaje'); presenta 'mensaje' -->
<a href='javascript:alert("It is now " + new Date());'>Show date and hour </a>
</body></html>
Sunday, February 28, 2010
48
Sentencias Javascript 1
Sunday, February 28, 2010
49
Sentencias Javascript 2
Sunday, February 28, 2010
Tipos Primitivos, Variables y SentenciasLa sintaxis de las sentencias Javascript es muy similar a Java Las sentencias se separán por “;” o “newline”
El interprete ignora “espacio”, “tab” y “newline”
Palabras reservadas y nombres son “case-sensitive” ASCII hasta ECMAScript v5
ECMAScript v5 permite nombres y comentarios en UNICODE
Tipos primitivos de Javascript (se pasan por valor) entero, real, boleano string (pseudo primitivo que se pasa por referencia)
Las variables no estan tipadas Pueden contener cualquier tipo: primitivo, objeto, array, funcion, ...
Cada variable ocupa 64 bits El ámbito de una variable es global o local de función
Una variable local tapa una global del mismo nombre
Sunday, February 28, 2010
Tipos y literales en Javascript
51
Entero Ejemplos: 0, 4, 12567, -943
Precisión muy alta: >>> equivalente aprox. a 53 dígitos decimales, Implementados como reales de 64 bits según la norma IEEE 754
Real
Ejemplos: 3.1416 6.7e5 (6,7x10^5) 1.797E-40 (1,797x10^-40)
Precisión muy alta: >>> entre 1,797x10^308 y 5x10^-324Implementados como reales de 64 bits según la norma IEEE 754
Boleano true, falseEn las conversiones entre tipos >>> 0, "", null o undefined se convierten a false >>> todo lo demás se convierte a true.
String
Ejemplos: "" o '' (string vacío) "Hoy" o 'Hoy' (string Hoy) "'hola'" (string 'hola') '2 \n lineas' (\n es newline)
En Javascript solo hay cadenas (string) de caracteres, >>> no hay tipo “char”!!!!. Utilizán el código UNICODE desde Javascript 1.3 Una cadena es un literal delimitado por comillas simples ('') o dobles (""), que no se puede modificar. Solo se puede utilizar para generar nuevas cadenas.No es un tipo primitivo, pero se pueda utilizar como tal aunque está implementado por referencia para optimizar uso de memoria.
indefinidos if (a == null) .., (b != undefined)null: variable no asignada (no contiene ningún valor)undefined: variable a null o indefinida (no creada)
Sunday, February 28, 2010
Strings en JavaScript 1.3// Strings UNICODE BMP, en anteriores solo se soporta ASCII o Latin-1
var first = ‘A’; // crea variable first y le asigna string: A
var c = ‘”’; // crea c y asigna string: ”c = ‘\u0022’; // asigna string: ” (representacion hexadecimal)c = ‘\042’; // asigna string: ” (representacion octal)c = ‘\”’; // asigna string: ” // 22 (hexadecimal) = 42 (octal) = código de caracter ”
// \0 caracter NUL // \b espacio atrás // \t tabulador horizontal // \n linea nueva // \v tabulador vertical // \r retorno de carro // \f paso de pagina // \” comillas // \’ comilla // \\ barra hacia atras
Sunday, February 28, 2010
Expresiones y Conversiones de tiposLas expresiones pueden contener literales de tipos mezclados Ejemplo 1: var s = '67' + 33;
se evalua como string y asigna '6733' a s, pero podía evaluarse como número y asignarle 100 a s
Ejemplo 2: var s = ('67' + 33) - 0; se evalua como numero y asigna 100 a s porque el contexto (operador -)
lo determina.
Javascript realiza conversión automatica de tipos primitivos Conversión de entero, booleano string a real
true a 1 y false a 0 Conversión de entero, booleano o string a entero truncando Conversión de entero, real, boleano y objeto a string Conversión de entero, real, string a boleano
False si 0, null, undefined o “”, resto se convierte a true ......
Sunday, February 28, 2010
Operadores Javascript 1
54
Prioridad, Asociatividad, Operador Operandos Descripción
Prioridad Mayor prioridad se evalua
primeroAsociatividad L: izquierda R: derecha
identifier nombre variable o función
lvalue variable propiedad de objeto elemento de array
number entero o real
Sunday, February 28, 2010
55
Operadores Javascript 2
Prioridad, Asociatividad, Operador Operandos Descripción
Prioridad Mayor prioridad se evalua
primeroAsociatividad L: izquierda R: derecha
identifier nombre variable o función
lvalue variable propiedad de objeto elemento de array
number entero o real
Sunday, February 28, 2010
Ejemplo Javascript: Función, Objeto<html><head><title> Hora y Fecha</title><script language="JavaScript">
function print_todays_date( ) { // Definicion de función var d = new Date( ); // Date() es un objeto predefinido // Contiene la fecha y hora document.write(d.toLocaleString( )); // “toLocaleString()”: metodo de Date() // Adapta el formato de presentación a idioma local }
</script> </head>
<body><h1>The date and time are:</h1>
<script language="JavaScript"> print_todays_date( ); // Invoca funcion definida en cabecera</script>
</body></html>
Sunday, February 28, 2010
Ejemplo Javascript: Objeto, array
<html><head><title> Week day</title></head>
<body><h1>Week day</h1>
<script type="text/javascript">
var d=new Date();var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // array weekday[] se crea con array literal document.write("Today is " + weekday[d.getDay()]); // metodo getDay() devuelve valor campo Day </script>
</body></html>
Sunday, February 28, 2010
Ejemplos string
<html> <head><title> Ejemplo string</title></head>
<body> <h2>Ejemplos de metodos y<br>campos de clase string</h2>
<script type="text/javascript">var str="Hello world!";document.write("'Hello world' in bold: " + str.bold() + "<br /><br />"); // metodo bold()
document.write("Length of 'Hello world' is: " + str.length + " chars <br /><br />" ); // campo length
document.write("Position of 'world' is: " + str.indexOf("world") + "<br /><br />"); // metodo indexOf()document.write("Match of 'world' is: " + str.match("world") + "<br /><br />"); // metodo match() con expresion regular de parametro document.write("Match of 'World' is: " + str.match("World") + "<br /><br />"); // metodo match() con expresion regular de parametro document.write("Replace 'world' : " + str.replace("world", "people") ); // metodo replace() con expresion regular y sustitución </script>
</body></html>
Sunday, February 28, 2010
FuncionesFunción: encapsula un bloque ejecutable, invocable por nombre Parametros de funciones no tipados (ocupan 64 bits)
Número de params variable (puede variar por invocación)Referencia a params por nombre o array
Puede crearse sin nombre y asignarse a variable con function literal Son objetos y se pueden crear con el constructor: new Function()
Uso no recomendado por poco eficiente
Ejemplos de definiciones e invocaciones equivalentes: Por nombre: function f1(x) {return ++x;} b se invoca f1(3); Por array: function f2() {return ++arguments[0];} se invoca f2(3); Function literal: var a = function (x) {return ++x;} se invoca a(3); Las invocaciones f1(3), f2(3) o a(3) devuelven todas un 4 Las invocaciones f1(3,6), f2(3,6) o a(3,6) devuelven también un 4
El segundo valor (6) no se utiliza
Sunday, February 28, 2010
Variables locales y ámbitos de visibilidadFunciones permiten definir variables locales Su ámbito de visibilidad es el bloque de código de la función
El ámbito de visibilidad es léxico Una variable local tapa una variable global del mismo nombre Las variables se pueden usar antes de su definición
Recomendación: definir las variables al principio de la función
var fact = 8; // variable globalfunction Factorial (x) { var fact = 1; // variable local for(i = 1; i <= x; i++) fact = fact*i; // variable iocal return fact; // variable local}fact = fact + Factorial(4); // variable global
function volumen (x, y, z) { var r = z; // variable local de volumen() function area (x, y) { var r; // variable local r de area() r = x*y; // la variables locales r, x, y de area() return r; // la variable local r de area() } return r * area (x, y); / la variables locales r, x, y de volumen()}
Sunday, February 28, 2010
Objetos Javascript tiene “Tipado de Patos” si anda y grazna como un pato, es un pato
Javascript “simula” objetos, clases, herencia, ...Los objetos se manejan por referencia (puntero)Un objeto se crea con el constructor: “new Object();” Los valores (campos) se pueden crear dinamicamente
Ejemplo: var p = new Object(); p.x = 1; p.y = 3;“this” referencia el objeto sobre el que se invoca
Ejemplo: p.area = function { return this.x * this.y }Lo mas adecuado es crear objetos con “object literals” Crean el objeto en una sentencia (literal)
var p = { x:1, y:3, area: function() {return this.x*this.y} };Array y función son tipos objetos con sintaxis y semantica especialHay muchos objetos predefinidos: document, location, navigator, Date, .......
Sunday, February 28, 2010
Objetos, Arrays y Funciones
62
Objeto y metodo
definición de objeto con 2 valores y método: var p = new Object(); p.x = 1; p.y = 3; p.area = function { return this.x*this.y} Definición equivalente: var p = { // con object literal x:1, y:3, area: function() {return this.x*this.y} };area2 = p.area(); // invocación método
Objeto: colección de valores asociados a nombres. La sentencia “var p = new Object();” crea el objeto. “p.x = 1;” añade un valor (propiedad, campo) a p. p.area = function { return this.x*this.y } define método. Los valores se pueden definir en cualquier parte del script. Object literal: define objeto, valores y métdodo conjuntamente. Es equivalente a lo anterior.
Arrayvar a = new Array(); // constructor a[0] = 1; a[1] = 3; var a = new Array (1, 3); // constructor var a = [ 1, 3 ]; // array literal
Array: tipo de objeto especial con valores ordenados y accesibles a través de un índice.a[n] representa el valor n.
Array literal: [1, 2] define array y valores a la vez.
Función function square(x) { return x*x; } y = square(45);
Función: código con parámetros invocable por su nombre. Es un objeto especial y puede asignarse a una variable.
RegExp /([0-9a-zA-Z][\t\n\f\r ])*/ Tipo de objeto especial para expresiones regulares. Se delimitan con /, Ejemplo:/RegExp/
Sunday, February 28, 2010
Jerarquia Objetos DOM DOM: API Javascript para dar acceso a Arbol de HTML
Con su jerarquia de elementos Parametros del visor Web y ventana .........
Sunday, February 28, 2010
Ejemplo Javascript: Función, Objeto
<html> <head> <title> Ejemplo 5</title> </head>
<body><h2> Interaccion</h2>
<!-- prompt('mensaje'); presenta 'mensaje' y pide un valor de entrada -->
<button onclick="var x=prompt('Background Color' ); document.body.style.backgroundColor=x ; ">Click here</button>
</body></html>
Sunday, February 28, 2010
Ejemplo Eventos en objeto HTML
<html><head><title> Hora y Fecha</title></head>
<body><h1>Event example</h1>
<a href="http://google.com"> <img name="x" src="go.png" // Carga imagen go.png onmouseover="this.src='ck.png'" // Carga imagen ck.png onmouseout="this.src='go.png'"\> // Carga imagen go.png</a>
</body></html>
Sunday, February 28, 2010
Eventos HTML Algunos elementos HTML tienen eventos asociados Eventos de raton: “onclick”, “ondbclick”, “onmouseover”, onmouseout”,
“onmousemove”, ....Están asociados a casi todos los elementos
Eventos asociados a botones: “onsubmit”, “onreset”Están asociados a elemento “form”
.......Las manejadores de eventos se pueden definir Como atributos de dichos elementos:
<img name="x" src="go.png" onmouseover="this.src='ck.png'">............
Sunday, February 28, 2010
HTTP
Sunday, February 28, 2010
HTTP
Sunday, February 28, 2010
Transacción HTTP GET
GET /index.html HTTP/1.0Accept: text/html, text/plain, image/gif, image/jpegUser-Agent: Netscape-Navigator/4.03 // linea en blanco indica final de cabecera // POST y PUT pueden llevar cuerpo
HTTP/1.0 200 OKServer: NCSA/1.2.3Content-type: text/htmlContent-length: 608 // tamaño cuerpo en bytes // linea en blanco hace de separador entre cabecera y cuerpo pregunta<html>....... // fichero html</html>
Sunday, February 28, 2010
Formato de cabeceras HTTP GET
HTTP/1.1 200 OK
Server: Apache/1.3.6 (Unix)Content-type: text/html, …Content-length: 608
<html> …….. </html>
1) Solicitud del Cliente
2) Respuesta del Servidor: scom.dit.upm.es
Comienzo
Cabecera
Cuerpo
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html
GET /lib/ej.html HTTP/1.1
Host: scom.dit.upm.es Accept: text/*, image/*Accept-language: en, spUser-Agent: Mozilla/5.0 (WinNT)
Comienzo
Cabecera
Cuerpo
Comando, camino-recurso, versión-HTTP
Sentencias de cabecera: dan información al servidor
GET no incluye cuerpo en la solicitud
Versión-HTTP, resultado, frase-adicional
Sentencias de cabecera: dan información al cliente
Cuerpo con fichero HTML
Sunday, February 28, 2010
Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. Toty
Sunday, February 28, 2010
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 persistentesSe 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
Sunday, February 28, 2010
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
Sunday, February 28, 2010
Ejercicio aplicación-21. 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> ....
Sunday, February 28, 2010
La clase URL
Sunday, February 28, 2010
Ejemplo: Construcción de URLsimport java.net.*; // Este ejemplo solo construye y trocea URLspublic 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);} }}
Sunday, February 28, 2010
Ejemplo: webAccessPrograma 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
Sunday, February 28, 2010
Ejemplo: acceso a través de URLimport 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);} } }}
Sunday, February 28, 2010
Ejercicio aplicación-3Guardar 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
Sunday, February 28, 2010
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........
Sunday, February 28, 2010
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 ........
Sunday, February 28, 2010
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........
Sunday, February 28, 2010
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}
Sunday, February 28, 2010
Aplicaciones de Servidor
Sunday, February 28, 2010
Aplicación Web de Servidor
Sunday, February 28, 2010
Aplicación Web de servidor
Base de Datos:
MySQL, Oracle, ..
HTTP (URL)
El cliente recibey presenta
página HTMLen Visor.
Servidor procesa parametros, consulta
BD y devuelve resultado en HTML.
XML, ..
Cliente solicita operación desde
formulario y envía parametros
Solicitud de operación: http://mail.google.com/serv?user=jose
GET serv?user=jose HTTP 1.1
Servidor Web:
Ejecuta aplicación en PERL, PHP, Java, RoR, …
BD gestiona datos del servidor
Visores Web:
SQL
Sunday, February 28, 2010
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
Sunday, February 28, 2010
Explicación Formulario 1
Un formulario se define con la marca: <FORM>El atributo “METHOD” define el método de HTTP que se invoca al hacer “submit”. Solo se soporta GET y POST
El atributo “ACTION” define el URL que se va a invocar Se le añadirán los parámetros que envíe el
usuario en el “query” Se usa formato “x-www-form-urlencoded”
La marca <INPUT> permite incluir diversos tipos de entradas TYPE=text: entrada de texto TYPE=password: palabra clave
Se envía como un parámetro más El texto tecleado aparece como “*”
TYPE=radio: selección alternativa TYPE=reset: botón para asignar valores por
defecto TYPE=submit: botón para enviar formulario a
servidorLa marca <TEXTAREA> define un area para teclear un texto.
<HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD>
<BODY><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 generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje
Sunday, February 28, 2010
Cabeceras HTTP GET
HTTP/1.1 200 OK
Server: Apache/1.3.6 (Unix)Content-type: text/html, …Content-length: 608
<html> …….. </html>
1) Solicitud del Cliente
2) Respuesta del Servidor: scom.dit.upm.es
Comienzo
Cabecera
Cuerpo
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/pngAccept-language: en, spUser-Agent: Mozilla/5.0 (WinNT)
Comienzo
Cabecera
Cuerpo
<FORM METHOD=get ACTION="http://scom.dit.upm.es/cgi-bin/aut">
Sunday, February 28, 2010
Cabeceras HTTP POST
HTTP/1.1 200 OK
Server: Apache/1.3.6 (Unix)MIME-version: 1.0Content-type: text/html, …Last-modified: Wed, 14-Mar-95 18:15:23 GMT Content-length: 608
<html> …….. </html>
1) Solicitud del Cliente
2) Respuesta del Servidor: scom.dit.upm.es
Comienzo
Cabecera
Cuerpo
<FORM METHOD=post ACTION="http://scom.dit.upm.es/cgi-bin/aut">
POST cgi-bin/aut HTTP/1.1
Host: scom.dit.upm.es Accept: text/*, imag/gif, image/jpeg, imag/pngAccept-language: en, spUser-Agent: Mozilla/5.0 (WinNT)Content-type: application/x-www-form-urlencodedContent-length: 30
color=blue&msg=Deje+su+mensaje
Comienzo
Cabecera
Cuerpo
Sunday, February 28, 2010
Ejemplo de pseudo-servidor nombre: FormServerEl ejemplo muestra un pseudo servidor http
Funcionalidad incompleta (efectos ilustrativos)Espera una solicitud de conexión TCPCuando 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
Sunday, February 28, 2010
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); } }}
Sunday, February 28, 2010
Ejercicio aplicación-4Modificar “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”
Sunday, February 28, 2010
Autenticación
Sunday, February 28, 2010
Identidad Digital y Autenticación
Sunday, February 28, 2010
Autenticación y Sesiones Web
Sunday, February 28, 2010
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:SWCMSe codifica como: U1dDTTpTV0NN
La transacción debe encriptarse con HTTPS
Figura tomada de “HTTP Developer’s Handbook” de Chris Shiflett
Sunday, February 28, 2010
Cabeceras: Basic Autentification
HTTP/1.1 401 Unauthorized
Content-type: text/html, …Content-length: 0WWW-Authenticate: Basic Realm=“example”
2) Solicitud del Servidor solicitando autenticación
3) Respuesta de autenticación del cliente
Comienzo
Cabecera
Cuerpo
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html
GET /lib/ej.html HTTP/1.1
Accept: text/*Accept-language: en, spAuthorization: Basic bXluYW1lOm15cGFzcw==
Comienzo
Cabecera
Cuerpo
1) Solicitud de recurso Web del Cliente
4) Respuesta de servidor entregando el recurso
Sunday, February 28, 2010
Ejemplo de servidor nombre: formserverEl ejemplo muestra un pseudo servidor http Funcionalidad incompleta (efectos ilustrativos)
Espera una solicitud de conexión TCPCuando 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
Sunday, February 28, 2010
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); } }}
Sunday, February 28, 2010
Autenticación propietaria
Ejemplo de path generado: /cgi-bin/aut?nombre=jose&clave=SWCM&color=blue&msg=Mensaje
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
Sunday, February 28, 2010
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
Sunday, February 28, 2010
Ejercicio aplicación-5Modificar “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”
Sunday, February 28, 2010
Clave pública y clave privada
Mensaje legible Mensaje cifrado
clave
Mensaje legible
clave
cifrador descifrador
Mensaje legible Mensaje cifrado
Clave pública
Mensaje legible
Clave privada
cifrador descifrador
Sunday, February 28, 2010
HTTPS: Conexiones segurasExtensió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
Sunday, February 28, 2010
Sesiones Web
Sunday, February 28, 2010
Cliente Servidor
Cliente se autentica
El servidor envía un identificador (ID) a cada Usuario autenticado
Las transacciones siguientes deben serasociadas con el mismo usuario y con su registro en la base de datos.
Durante todas las transacciones de lasesión el usuarioconservará el mismo identificador.
El identificador se libera al hacerLogout.
Ejemplo de sesión
Selecciona producto
Compra producto
Cierra sesión
Servidor crea y envia ID
Cliente envia ID
Cliente envia ID
Cliente envia ID
Servidor destruye ID
Sunday, February 28, 2010
Gestión de sesiones
Sunday, February 28, 2010
Mecanismos de gestión de sesiones
Sunday, February 28, 2010
Cookies
Cliente ServidorAutenticación
Set Cookie con Id
¿Dónde guarda el clienteel Id de sesión de usuario?
Respuesta: en una Cookie que se almacenaen el visor Web.
Send Cookie con Id
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 asociadoEjemplo
Set-Cookie: id=pepe.perez; path/; domain=.dit.upm.es Cookie: id=pepe.perez
Send Cookie con Id
Sunday, February 28, 2010
Cabeceras: Cookies
HTTP/1.1 200 OK
Content-type: text/html, …Content-length: 567Set-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=/
………
2a) Respuesta del servidor (Enviando Id en Cookie)
1b) Siguiente transacción (con Id en cookie)
Comienzo
Cabecera
Cuerpo
GET /lib/.html HTTP/1.1
Accept: text/*Accept-language: en, spCookie: Id=user675; User=Pepe+Perez
Comienzo
Cabecera
Cuerpo
1a) Solicitud de Autenticación: …….
2b) Respuesta de servidor a usuario Id
HTTP/1.1 200 OK
Content-type: text/html, …Content-length: 128……
………
Comienzo
Cabecera
Cuerpo
Sunday, February 28, 2010
Identificadores en URLCliente Servidor
Autenticación
HTML con ID en URLs
¿Dónde guarda el cliente el ID de usuario?
Respuesta: en URLs delcódigo ((X)HTML, XML ,…) devuelto al cliente.
No se requiere soporte especial ni en visor ni en HTTP.
El usuario solo permanece en la sesión si hace clicken las páginas devueltas por el servidor.
Se denominan tambiénFAT-URLs
ID en Path HTTP
HTML con ID en URLs
HTML con ID en URLs
HTML con Id en URLs
Ejemplo: http://mail.google.com/mail/?account_id=juan.quemada%40gmail.com&zx=nfxtz5vo7i90
ID en Path HTTP
ID en Path HTTP
Sunday, February 28, 2010
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
Sunday, February 28, 2010
Ejercicio aplicación-6
Sunday, February 28, 2010
Cachés y Gestión del tráfico Web
Sunday, February 28, 2010
Los Clicks y el tráfico de InternetCada 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
Sunday, February 28, 2010
Descargas de Páginas Web
Sunday, February 28, 2010
Optimización del TráficoSe 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
Sunday, February 28, 2010
Identificador de recurso: Etag
HTTP/1.1 304 Not Modified
Content-type: text/html, …Content-length: 0Date: Wed, 03 Jul 2002, 19:18:23 GMTEtag: “V45789099”Cache-Control: max-age=36000 // cachear 36000 segundos
2) Respuesta confirmando
Comienzo
Cabecera
Cuerpo
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html
GET /lib/ej.html HTTP/1.1
Accept: text/*Accept-language: en, spIf-None-Match: “V45789099”
Comienzo
Cabecera
Cuerpo
1) Solicitud condicional de recurso
Sunday, February 28, 2010
Control de Última Modificación
HTTP/1.1 304 Not Modified
Content-type: text/html, …Content-length: 0Date: Wed, 03 Jul 2002, 19:18:23 GMTExpires: Fri, 05 Jul 2002, 19:18:23 GMT
2) Respuesta confirmando
Comienzo
Cabecera
Cuerpo
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html
GET /lib/ej.html HTTP/1.1
Accept: text/*Accept-language: en, spIf-Modified-Since: Wed, 21 Jun 2002, 12:11:23 GMT
Comienzo
Cabecera
Cuerpo
1) Solicitud condicional de recurso
Sunday, February 28, 2010
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
Sunday, February 28, 2010
Resumen de Métodos, Cabeceras y Respuestas de HTTP
Sunday, February 28, 2010
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
Metodos de HTTP
Sunday, February 28, 2010
Interfaz Uniforme
Sunday, February 28, 2010
Extensiones WebDav
Sunday, February 28, 2010
Algunas cabeceras de HTTPCabeceras 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
Sunday, February 28, 2010
Respuestas mas habituales de HTTP
Sunday, February 28, 2010