Arquitectura Web 1

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)

Tuesday, October 27, 2009

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 descriptivo Ejemplo: “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 WebPropuesto por Tim Berners Lee en 1989

Es un “Servicio Abierto” de Publicación de documentos “hypertexto” en la red

Alta usabilidad: “se navega haciendo click en enlaces”

El Web crece incesantemente desde sus comienzos Arquitectura escalable: descentralizada

El Web es un universo de mundos interconectados Cada página es el comienzo de un mundo

El dueño (autor) publica y enlaza con otras páginas libremente

12


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

13


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 Microsoft Explorer, Firefox, Safari, Opera, Googe Chrome, …

Son de gran complejidad Simplifican el desarrollo de aplicaciones Web

Dan acceso a recursos Web

Servidor Web Programa capaz de dar recursos Web a clientes

Utilizando transacciones HTTP Servidores mas comunes: Apache, Tomcat, Microsoft IIS, … Prestaciones y escalabilidad son muy importantes

Debe atender muchos clientes

15

HTTP (URL)

HTML, XML, ..


Distribución mundial

Website Growth in 2008:

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

HTTP (URL)

HTML, XML, ..


Tipos de Aplicaciones WebNavegación Web Servidores sirven páginas Web en HTML

Navegación a través de hiperenlaces

Aplicaciones de servidor Las solicitudes se envían a través de formularios Servidores ejecutan programas en Java, PHP, RoR, C#, …

Consulta a BD, servicios interactivos, ….. Devuelven los resultados como una página HTML, XML, …

Aplicaciones de cliente Se ejecutan en visor Web (en Java, Javascript, C#, ..)

Optimizan el uso del ancho de banda de Internet Nombre: AJAX - Asynchronous Javascript and XML

“Rich Web Applications” (Flex) Arquitecturas de objetos distribuidos

17

HTTP (URL)

HTML, XML, ..


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: mayor repositorio de recursos, información y conocimiento

Esta dividido en continentes: Central Core, In, Out, Islands, …Mayor fuente de contenidos en 2008

Web-social: Contenido Generados por Usuarios (CGU)Email: 210 billardos diarios (70% spam)Sitios Web: 186 millones (31,5M nuevas).Blogs: 133 millones, 329 millones de posts (Tecnorati)Fotos: Facebook (10 Billardos), Flikr (3 Billa.), Photobucket (6 Billa.)Reproducción Video EEUU: 12,7 billard./mes, 87 al mes por usuario

Mayor reto: Web MiningGestión de la

información acumulada:BúsquedaClasificaciónAnálisis….

Google: usa algoritmos todavíamuy 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, … Web de datos (Web Services): WSDL, SOAP, … Web Semántico: RDF, Ontologias, …

Mas información en: http://www.w3.org


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 Name Nombre de un recurso, independiente de posición Se 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:

25


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.

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

Formato: x-www-form-urlencoded

Formato de codificación “universal” de URLs Independiente de maquina (RFC 3986) Adaptado a código ASCII y extendido a UTF-8

Utilizado en: URLs y objetos con tipo MIME: “application/x-www-form-urlencoded”

Reglas de codificación Caracteres que no se codifican: a-z A-Z 0-9 - _ . ~ Espacio en blanco: se transforma en ’+’ o ’%20’ Caracteres delimitadores de URL: ! * ‘ ( ) ; : @ & = + $ , / ? % # [ ]

No se codifican cuando son delimitadores en URI (RFC 3986) Resto de caracteres UTF-8 codificados en hexadecimal: %xy

excepto los que no se codifican o actúan como delimitadores de URI


Clase URLEncoder


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


HTTP y HTML


Navegación Web


Navegación Web

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

¡¡¡ Para publicar páginas Web y navegar no hace falta programar, solo crear páginas HTML y llevarlas a un servidor Web !!!


Lenguajes de Marcado


HTML

HTML Lenguaje de marcado de documentos

Permite definir la estructura de un documento introduciendo marcas Titulo, subtítulo, secciones, listas, párrafos, figuras, tablas, ...

HTML ha evolucionado mucho desde su aparición (1989) Inicialmente era un lenguaje muy sencillo

Pero fácilmente extensible y escalable Versión actual: HTML 4.01, Dic-99

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

Durante su evolución se introdujeron marcas presentacionales Permiten controlar la visualización de un documento

Están en proceso de extinción -> se recomienda no utilizarlas


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

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

http://www.w3schools.com/html

http://www.w3schools.com/html

Marcado HTML


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 id=”lista"> <LI> elemento <FONT COLOR=red>rojo</FONT> </LI> <LI> elemento <STRONG>en negrita</STRONG> </LI><LI> elemento <SUB>con subíndice</SUB> </LI></UL>

<TABLE BORDER id="tabla"> <TR> <TD>Primera celda <br> de la tabla</TD> <TD><IMG SRC="iconos.gif"></TD> </TR> <TR> <TD>Celda 21</TD> <TD>Celda 22</TD> </TR></TABLE>

</BODY> </HTML>


HTML

HEAD BODY

TITLE

Ejemplo página HTML

H1 <!– --!>

Ejemplo de cabecera

Acceda al A PA

continuación aparece una

lista y una tabla

UL TABLE.

HREF

http://ww ..

LI

elemento FONT

Tutorial de HTML de

W3C Schools

COLOR

red

rojo

LI

elemento STRONG

en negrita

LI

elemento SUB

con subíndice

TR TR

TD TD TD TD

Primera celda BR de la tabla IMG

SRC

Iconos.gif

Celda 21 Celda 22

Esto es un comentario

Un documento HTML representa un árbol El árbol describe la estructura del documento

Cada bloque (<..> …. <..>) es un sub-arbolEl árbol del ejemplo se representa en la figura

Representación en Arbol


Código HTML del ejemplo<HTML>: declaración de página HTML<HEAD>: cabecera no visible<BODY>: cuerpo visible<H1>: titulo de nivel 1

Sub-niveles: <H2>, <H3>, …<A HREF="http://....>: hipervínculo

El 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índice

Superíndice: <SUP><TABLE BORDER>: tabla<TR>: fila de tabla<TD>: celda de tabla<IMG>: imagen

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”




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 1Un 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 POSTEl 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



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 TCP Cuando llega la acepta y espera una solicitud HTTP

Cuando llega, asume que es GET sin analizar el comando No analiza ni el path ni la versión No analiza la cabecera

Una vez completada la solicitud HTTP (Línea en blanco) devuelve una respuesta cableada

Cabecera HTTP Página HTML generada al vuelo

URL de acceso: http://localhost:22000


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 UnauthorizedContent-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 TCP Cuando llega la acepta y espera una solicitud HTTP

Cuando llega, asume que es GET sin analizar el comando No analiza ni el path ni la versión No analiza la cabecera

Una vez completada la solicitud HTTP (Línea en blanco) devuelve una respuesta cableada

Cabecera Página HTML fija

URL de acceso: http://localhost:22000


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>

<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


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

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



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égicoProxy: 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 ModifiedContent-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 ModifiedContent-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


HTML Semántico


Descripción de Información


Marcado (X)HTML semánticoSemántica: “Estudio del significado de las palabras” Sintaxis: “Estudio de las reglas de composición de las palabras” Visualización: “Presentación visual de la información”

Marcado (X)HTML semántico Define la estructura de un documento con mayor precisión

Definiendo el formato gráfico para visualizar con CSS (Cascad. Style Sheets) Definiendo la semántica de los datos con microformatos

HTML semántico: http://en.wikipedia.org/wiki/HTML#Semantic_HTML

(X)HTML semántico Utiliza marcas estructurales existentes siempre que sea posible Headings (<h1,..>), Lists (<ul>, <ol>, ..), Paragraphs (<p>), Citation

(<cite>, <q>, <blockquote>,..), Abbreviations (<abbr>), …. Cuando no es posible, se extiende (X)HTML utilizando

Marca genéricas y atributos de definición de clases y relaciones


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

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

Marcas de bloque y líneaDelimitadores genéricos:

<div>: define un bloque Un bloque puede contener otro bloque o un elemento en línea.

<span>: define un elemento en línea

Un elemento en línea puede contener otro elemento en línea.

<

<HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD> <BODY> <H1> Ejemplo de Cabecera </H1>

<DIV><SPAN> Acceda al <A HREF="http://www.w3schools.com/html/"> tutorial de HTML de W3C Schools</A>. <p> </SPAN>

<SPAN> A continuación aparece una lista y una tabla </SPAN></DIV>

<UL> <LI> elemento <FONT COLOR=red>rojo</FONT> </LI> ………… </HTML>


Atributos de clase e identificadorAtributo “class”

Define una clase asociada al bloque marcado Se utilizan junto con <DIV> y <SPAN> para definir nuevas clases

La nueva clase tiene múltiples usos Sucedáneo de nuevas marcas Identificación de estructuras similares

Atributo “id” Define un identificador único en el fichero Crea una referencia única

Se asocia con un fragmentEjemlo URL: http://www.swcm.es/fich.htm#ColumnaP

Ejemplo 1: <h1 class=“cabecera1”> ……. </h1>Ejemplo 2: <div class=“ColumnaPrincipal” id=“ColumnaP”> ……. </div>


Atributos de relación


Web Semántica y Microformatos


Web SemánticaSemántica: “Estudio del significado de las palabras” Sintaxis: “Estudio de las reglas de composición de las

palabras”

La información Web accesible esta mayoritariamente en (X)HTML (X)HTML no puede ser procesado fácilmente por programas

(X)HTML está pensado para personas Un programa no es capaz de deducir el significado de una página

Web a partir del código (X)HTML

La Web Semántica Iniciativa para facilitar la deducción automática del significado

de los contenidos Web Añadiendo meta-datos a los contenidos Web

Que definan su significado y sus propiedades


Web Semántica o MicroformatosW3C: World Wide Web Consortium Esta definiendo lenguajes “semánticos”

RDF (Resource Description Framework) Para describir propiedades semánticas de recursos Web

OWL: Web Ontology Language Para describir significado, ontologías y propiedades semánticas de

recursos Web …..

Son lenguajes de bastante complejidad

Microformatos Conjunto de meta-datos sencillos y abiertos

Definidos en (X)HTML semántico Basados en normas ampliamente adoptadas en Internet


Microformatos


Microformatos: características


Microformatos: beneficiosPermiten indexación y agregación de micro-contenidos Búsquedas mas eficaces (Google, Yahoo, Technorati, …) Agregación de recomendaciones, tags, … dispersos

Interoperabilidad entre contenidos Web y aplicacionesPor ejemplo: Outlook, Agendas, Calendarios, ....

Ejemplo basado en Plug-in: Firefox Operator https://addons.mozilla.org/es-ES/firefox/addon/4106

Ejemplos: http://tantek.com/, http://suda.co.uk/contact/


https://addons.mozilla.org/es-ES/firefox/addon/4106


http://tantek.com/

http://tantek.com/

http://suda.co.uk/contact/

http://suda.co.uk/contact/

Ejemplo hCard en Página Web

hCard: Microformato para tarjetas de visita Basado en la norma vCard de Internet (RFC2426) Generador de hCard: http://microformats.org/code/hcard/creator

Ejemplo: “hCard” que contiene “adr”

<div id="hcard-Carlos-Terol" class="vcard"> <span class="fn">Carlos Terol</span> <div class="org">ASISA</div> <div class="adr"> <div class="street-address">Moncloa, 23</div> <span class="locality">Madrid</span>, <span class="postal-code">28040</span> <span class="country-name">Spain</span> </div> tf: <span class="tel”>+34 91 386 7371</span></div>


http://microformats.org/code/hcard/creator

http://microformats.org/code/hcard/creator

RelacionesLos atributos “rel” y “rev” se utilizan para definir relaciones,

por ejemplo

Microformato “rel-tag”: definición de índices (tags) de una página. El URL se utiliza para permitir búsquedas adicionales con dicho índice.

<a rel=“tag" href=“http://technorati.com/tag/css“>CSS</a>

Microformato “rel-license”: definición de licencia (URL) bajo la que se publica una página.

<a rel=“license" href=“http://creativecommons.org/licenses/by/2.5/“> This doc is published under …..</a>


Ejemplo: iCalendar y hCalendarhCalendar: Microformato para definir eventos y citas basados en vCard iCalendar (RFC2445) Generador de hCalendar: http://microformats.org/code/hcalendar/creator

Ejemplo de iCalendar:

<div id="hcalendar-Clase-SWCM" class="vevent"> <abbr title="2009-02-20T10:00+01:0000" class="dtstart">February 20, 2009 10</abbr> – <abbr title="2009-02-20T12:00+01:00" class="dtend">12pm</abbr> : <span class="summary">Clase SWCM</span> at <span class="location">ETSI Telecomunicacion, 28040, Madrid Spain</span>

<div class="tags">Tags: <a href="http://eventful.com/events/tags/Web" rel="tag">Web</a> <a href="http://eventful.com/events/tags/URL" rel="tag"> URL</a> <a href="http://eventful.com/events/tags/HTTP" rel="tag"> HTTP</a> <a href="http://eventful.com/events/tags/HTML" rel="tag"> HTML</a> </div></div>


http://microformats.org/code/hcalendar/creator




Separando Estructura y Visualización


Inicialmente HTML solo permitía definir la estructura de un documento Dejando al navegador libertad de visualización

En los noventa se añaden marcas de control de visualización Degradando el espíritu inicial de HTML

Por ejemplo: <font color=“red”> …… <font>

En paralelo comenzó la definición de un lenguaje de visualización CSS (Cascading Style Sheets)

Hoy se recomienda utilizar solo marcas estructurales Nunca las de visualización La visualización se debe definir en CSS

Estructura y Visualización


CSS (Cascading Style Sheets)

CSS permite separar ambas definiciones La estructura se define con XML o (X)HTML La visualización se define con CSS (o XSL)

CSS permite visualización independiente de terminal Una página puede visualizarse correctamente en PC, PDA o

móvil aplicando diferentes estilos CSS

Versiones de CSS CSS 1.1 (última versión del 99) CSS 2.1 (última versión del 07, valida)

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21 Tutorial: http://www.w3schools.com/css

CSS 3 (en desarrollo)

Tutorial: http://www.w3schools.com/css/default.asp


http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21

http://www.w3schools.com/css

http://www.w3schools.com/css

Ejemplo: presentación con CSS

Fichero HTML puro Fichero HTML + formato en CSS


Ejemplo: HTML y CSS<HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE><link rel="stylesheet" href="ejemplo.css" type="text/css" /></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>

/* Ejemplo de hoja de estilo */

H1 {color: red; background-color: #ABD;}

UL {color: blue; font-size: smaller; font-style: italic; background-color: #ABD;}

TABLE {border-collapse: separate; border-spacing: 5px 5px; background-color: #8BD;}


Características de CSS

Fichero CSS: comandos de presentación de marcas Definen tipos de letra (fonts), colores, espaciado, bordes, ...

Comando CSS: “Selector { propiedad: valor; …..}”

Ejemplo: “h1 {color: red; font: arial 20pt; }”

“Selector” identifica las marcas donde aplicar la propiedad <h1>, <p attr=“value”>, <table>, ….

“propiedad: valor;” define como visualizar


HTML

HEAD BODY

TITLE


H1 <!– --!>

Ejemplo de cabecera

Acceda al A PA


lista y una tabla

UL TABLE.

HREF

http://ww ..

LI

elemento FONT

Tutorial de HTML de

W3C Schools

COLOR

red

rojo

LI

elemento STRONG

en negrita

LI

elemento SUB

con subíndice

TR TR

TD TD TD TD


SRC

Iconos.gif

Celda 21 Celda 22



h1 {…………}ul {…………} table {…………}


Ejemplos de “selector” h1, h2, p {color: blue;} /* aplica a marcas h1, h2 y p */

h1 h2 {color: blue;} /* marca h2 después de h1 en el árbol */h1 > h2 {color: blue;} /* marca h2 justo después de h1 en el árbol */h1 + p {color: blue;} /* marca p adyacente a h1 del mismo nivel del árbol */

h1[border] {color: blue;} /* marca h1 con atributo border */h1[border=“yes”] {color: blue;} /* marca h1 con atributo border=“yes” */

h1.princ {color: blue;} /* marca h1 con class=“princ” */.princ {color: blue;} /* cualquier marca con class=“princ” */

h1#d83 {color: blue;} /* marca h1 con id=“d83” */#d83 {color: blue;} /* cualquier marca con id=“d83” */

a:link {color: blue;} /* antes de visitar enlace */a:visited {color: blue;} /* después de visitar enlace */a:hover {color: blue;} /* al pasar ratón encima del enlace */a:active {color: blue;} /* al hacer click en enlace */


El modelo de Caja Cualquier elemento del árbol (X)HTML es una caja para CSS Los comandos aplican en la caja(s) referenciada por el selector

La estructura de cada caja es similar: margin-area, padding-area, content-area

Esto es un parrafo de 2 lineas de texto content-area

padding-area

margin-area

outer edgeborder inner edge

Ejemplos de “propiedad: valores”background-color: #CCC /* color de fondo en RGB (#AB3), nombre (red, ..) */font-size: 8pt /* tamaño de letra 8pt, 12pt, .., smaler, larger, .. */font-style: italic; /* estlo de letra normal, italic, .. */font-family: Arial: /* estilo de letra Arial, Times, …… */font-weigth: bold: /* peso de letra normal, bold, bolder, lighter, … */border-collapse: separate; /* tipo de borde de tabla: collapse separate, inherit */border-spacing: 5px 5px; /* separación de borde de tabla */text-align: center; /* alineación de texto: left, right, center, ... */height: 200pt: /* altura de caja */width: 1mm; /* anchura de caja” */margin: 1cm; /* anchura de margen */padding: 10px; /* anchura de padding */float: right; /* displaay flotante: left, right, none, .. */clear: both; /* elimina flotación: left, right, both, none, .. */position: relative; /* define como posicionar caja: static, relative, absolute, .. */display: nonet; /* tipo de caja generada: inline, block, table, none, .. */content: “text”; /* inserta text: se utiliza con selector :before o :after */


CSS en Cascada

En (X)HTML CSS se puede incluir Como atributo “style” de marcas (X)HTML

Ejemplo: <strong style=“color: blue; font: arial 20pt;”> El selector no hace falta, porque la marca está implícita

En la cabecera de documento HTML con marca “style” Ejemplo: <head> <style type=“text/css”> strong {color: blue; font: arial 20pt;} </style> </head>

Como un fichero independiente con marcas “link” o “import”

Las definiciones de estilo se aplican en cascada Todas las definiciones se unen en una única definición Cuando varios comandos aplican a una marca:

aplica el mas próximo en el árbol


HTML

HEAD BODY

TITLE


H1 <!– --!>

Ejemplo de cabecera

Acceda al A PA


lista y una tabla

UL TABLE.

HREF

http://ww ..

LI

elemento FONT

Tutorial de HTML de

W3C Schools

COLOR

red

rojo

LI

elemento STRONG

STYLE

LI

elemento SUB

con subíndice

TR TR

TD TD TD TD


SRC

Iconos.gif

Celda 21 Celda 22


LINK

REL

HREF

TYPE

stylesheet

Ejemplo.css

Text/css

en negrita

Font-style: normal

En el ejemplo anterior se ha incluido un atributo CSS En la marca “STRONG” del segundo elemento de la lista

El nuevo atributo es el que se aplica Esta mas próximo en el árbol



Ejemplo Multicolumna

El próximo ejemplo ilustra como crear formatos sofisticados con múltiples columnas

Para ello es necesario combinar (X)HTML semántico

Para marcar los bloques de (X)HTML Con <div class=“…”> o <span class=“…”>

CSS Para definir como visualizar cada bloque


Ejemplo: Múltiples columnas (sin CSS)<HTML> <HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD>

<BODY> <div class="contenedor">

<h1 class="cabecera"> Ejemplo de Pagina con 2 Columnas </h1>

<div class="principal"> <H2 class="h2">Página formateada con CSS </H2> Esta es la columna principal de esta pagina Web formateada con CSS, que incluye cabecera, 2 columnas y pie de página. <UL> <LI> Para formatear los bloques se delimitan con <blockquote><strong><div class="TipoBloque"> .. </div></strong> </blockquote></LI> <LI> <strong>class="TipoBloque"</strong> se utiliza para definir cual es el formato de cada tipo de bloque</LI> <LI> Cada <em>TipoBloque</em> se formatea con un comando CSS. <blockquote><strong>TipoBloque {propiedad: valor; ...}</strong> </blockquote></LI> </UL> </div>

<div class="lateral"> <H3 class="h3"> Enlaces </H3> <A HREF="http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/"> W3C-CSS2.1</A> <br> <A HREF="http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo"> W3C-CSS</A> <br> <A HREF="http://www.w3schools.com/css/"> W3C-School</A> <br> </div>

<div class="Pie"> --->> Texto a pie de página </div>

</div></BODY> </HTML>


Ejemplo: Múltiples columnas con CSS


Ejemplo: CSS para múltiples columnas/* “columnas.css”: estilo para columnas.html */

body {margin: 10px; padding: 10px}

.contenedor {position: relative; width: 450px; border: solid 1px; background: #ABD; }

.cabecera {background: #BCE; padding: 5px; font-weight: bold; font-size: 24pt; text-align: center}

.principal {float: right; padding: 1%; background: #CDF; width: 80%}

.lateral {padding: 1%; font-size: 8pt; }

.pie {clear: both; hight: 50px; background: #89B; text-align: left; font-size: 8pt; font-weight: bold;}


Ejemplo: Página de estilo CSS /* “columnas.css”: estilo para columnas.html */

body {margin: 10px; padding: 10px}

.contenedor {position: relative; width: 450px; border: solid 1px; background: #ABD; }

.cabecera {background: #BCE; padding: 5px; font-weight: bold; font-size: 24pt; text-align: center}

.principal {float: right; padding: 1%; background: #CDF; width: 80%}

.lateral {padding: 1%; font-size: 8pt; }

.pie {clear: both; hight: 50px; background: #89B; text-align: left; font-size: 8pt; font-weight: bold;}

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

<BODY> <div class="contenedor">

<h1 class="cabecera"> Ejemplo de Pagina con 2 Columnas </h1>

<div class="principal"> <H2 class="h2">Página formateada con CSS </H2> Esta es la columna principal de esta pagina Web formateada con CSS, que incluye cabecera, 2 columnas y pie de página. <UL> <LI> Para formatear los bloques se delimitan con <blockquote><strong><div class="TipoBloque"> .. </div></strong> </blockquote></LI> <LI> <strong>class="TipoBloque"</strong> se utiliza para definir cual es el formato de cada tipo de bloque</LI> <LI> Cada <em>TipoBloque</em> se formatea con un comando CSS. <blockquote><strong>TipoBloque {propiedad: valor; ...}</strong> </blockquote></LI> </UL> </div>

<div class="lateral"> <H3 class="h3"> Enlaces </H3> <A HREF="http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/"> W3C-CSS2.1</A> <br> <A HREF="http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo"> W3C-CSS</A> <br> <A HREF="http://www.w3schools.com/css/"> W3C-School</A> <br> </div>

<div class="Pie"> --->> Texto a pie de página </div>

</div></BODY> </HTML>


Ejercicio aplicación-7Cambiar el código CSS para que la configuración del ejemplo de página Web con 2 columnas se visualice de la siguiente forma Los colores de fondo sean en tonos verdosos El ancho de la página sea de 500 puntos

Añadir estos microformatos en el pie de página los índices “CSS” y “W3C” como “rel-tag” La licencia (“rel-license”) identificada por el URL:

http://creativecommons.org/licenses/by/2.5/Visualizar la página con Firefox y el add-on “Operator” que reconoce microformatos para validar que los reconoce correctamente Operator: https://addons.mozilla.org/es-ES/firefox/addon/4106


http://creativecommons.org/licenses/by/2.5/

http://creativecommons.org/licenses/by/2.5/



Práctica P3 (a entregar)Modificar el servidor diseñado en la practica aplicación 6 a partir de FormServer para que

Incluya código CSS en la cabecera (<head>) que presente las cabeceras en amarillo con fondo azul.

Además todas las páginas que devuelva el servidor deberán incluir: Nombre, dirección y teléfono de la empresa

Incluidos como microformato hCard visible al final de cada página El nombre y dirección de la empresa serán:

SWCM S.A., Isaac Peral 8, 3º A, 28040, Madrid, tf: +91 321 4621

Date post:	14-Dec-2014
Category:	Technology
Upload:	juan-quemada
View:	7,699 times
Download:	0 times

Arquitectura Web 1

Technology