Nivel de aplicación: Web I · PDF file · 2010-05-12Extensiónes MIME MIME introduce 5 nuevos campos en un mensaje MIME-Version: indica la versión MIME utilizada Ejemplo: “MIME-Version:

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

http://proquest.safaribooksonline.com/

http://proquest.safaribooksonline.com/

http://www.w3.org/

http://www.w3.org/

http://www.ietf.org/

http://www.ietf.org/

Í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………


El Correo Electrónico y las primeras aplicaciones


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


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


mailto:[email protected]


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


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


http://www.iana.org/assignments/media-types/


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”


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


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, ...




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


El Web


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


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


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


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


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


http://www.upm.es/centros/etsit/personal.html

http://www.upm.es/centros/etsit/personal.html

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>


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, ..


Cuotas de uso (2008)

Website Growth in 2008:

24.4% –Apache13.7% – IIS22.2% – Google GFE336.8% – Nginx100.3% –Lighttpd

HTTP (URL)

HTML, XML, ..


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, ..


Mobile Internet Compu0ng


Terminales: evolución


Terminal Móvil de Acceso a Internet


Internet Móvil (Morgan Stanley)


Recursos y URIs


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, ….


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


http://www.faqs.org/rfcs/rfc2396.html




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


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


http://www.bb.es/archivo/doc1.html

http://www.bb.es/archivo/doc1.html

http://www.bb.es/eventos/congreso.html

http://www.bb.es/eventos/congreso.html

http://www.bb.es/archivo/


http://www.bb.es/archivo/index.html






http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm

http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm



mailto:[email protected]?subject=Cita&body=Quedamos%20hoy.


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


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


http://www.xx.es/path?texto=

http://www.xx.es/path?texto=





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


HTML, Javascript y HTTP


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


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


http://www.w3.org/TR/1999/REC-html401-19991224

http://www.w3.org/TR/1999/REC-html401-19991224

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


http://www.w3.org/TR/html5/

http://www.w3.org/TR/html5/

http://en.wikipedia.org/wiki/HTML5

http://en.wikipedia.org/wiki/HTML5

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29

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


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


http://www.dit.upm.es

http://www.dit.upm.es

Ejemplo de pagina HTML <HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD>

<BODY> 

<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>


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”


http://ww

http://ww

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.


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”




Javascript


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


Ejemplo de Javascript: Factorial<html><head><title> Ejemplo 1 Javascript</title></head>

<body><h2> Tabla de Factorial </h2>

  

<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>


Ejemplo: JavaScript en URL<html><head><title> Ejemplo 1 Javascript</title></head>

<body><h2> Show Date </h2>

  

<a href='javascript:alert("It is now " + new Date());'>Show date and hour </a>

</body></html>


Ejemplo: JavaScript en URL con alert()<html><head><title> Ejemplo 1 Javascript</title></head>

<body><h2> Show Date </h2>

  

<a href='javascript:alert("It is now " + new Date());'>Show date and hour </a>

</body></html>


48

Sentencias Javascript 1


49

Sentencias Javascript 2


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


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)


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


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 ......


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


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


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>


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>


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>


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


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()}


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, .......


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/


Jerarquia Objetos DOM DOM: API Javascript para dar acceso a Arbol de HTML

Con su jerarquia de elementos Parametros del visor Web y ventana .........


Ejemplo Javascript: Función, Objeto

<html> <head> <title> Ejemplo 5</title> </head>

<body><h2> Interaccion</h2>



<button onclick="var x=prompt('Background Color' ); document.body.style.backgroundColor=x ; ">Click here</button>

</body></html>


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>


http://google.com

http://google.com

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'">............


HTTP


HTTP


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>


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


Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. Toty


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


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


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> ....


La clase URL


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);} }}


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


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);} } }}


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


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........


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 ........


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........


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}


Aplicaciones de Servidor


Aplicación Web de Servidor


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


Ejemplo Formulario 1

<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 + query generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje


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>





Ejemplo de path generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje


Cabeceras HTTP GET

HTTP/1.1 200 OK

Server: Apache/1.3.6 (Unix)Content-type: text/html, …Content-length: 608




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">


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




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


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


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); } }}


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”


Autenticación


Identidad Digital y Autenticación


Autenticación y Sesiones Web


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


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



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


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


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); } }}


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


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>


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


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”


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


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


Sesiones Web


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


Gestión de sesiones


Mecanismos de gestión de sesiones


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


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


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


Ejemplo Formulario (FAT-URLs)<HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD>

<BODY>

 

<FORM METHOD=get ACTION="http://localhost:22000/cgi-bin/user7/aut">


Elija Producto:<br>





Ejemplo de path + query generado: /cgi-bin/aut?color=blue&msg=Deje+su+mensaje


Ejercicio aplicación-6


Cachés y Gestión del tráfico Web


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


Descargas de Páginas Web


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


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



Accept: text/*Accept-language: en, spIf-None-Match: “V45789099”

Comienzo

Cabecera

Cuerpo

1) Solicitud condicional de recurso


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



Accept: text/*Accept-language: en, spIf-Modified-Since: Wed, 21 Jun 2002, 12:11:23 GMT

Comienzo

Cabecera

Cuerpo

1) Solicitud condicional de recurso


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


Resumen de Métodos, Cabeceras y Respuestas 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

Metodos de HTTP


Interfaz Uniforme


Extensiones WebDav


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


Respuestas mas habituales de HTTP

Documents

Nivel de aplicación: Web I · PDF file · 2010-05-12Extensiónes MIME MIME introduce 5 nuevos campos en un mensaje MIME-Version: indica la versión MIME utilizada Ejemplo: “MIME-Version: