Arquitectura Web 1

Nivel de aplicación: Web I
Bibliografia:
- Web Design in a Nutshell, J. Niederst Robbins, 3rd Ed., O’Reilly, 2006 (Safari)
- HTTP: Pocket Reference, Clinton Wong, O’Reilly 2000 (Safari)
- Java Network Programming, E. Rusty Harold, 3ª Ed., O’Reilly 2004 (safari)
- Restful Web Services, L. Richardson, S. Ruby, O’Reilly, 2007 (Safari)
- Safari Books: http://proquest.safaribooksonline.com/
Otros:
- XML in a Nutshell, E. R. Harold, W. S. Means, 3rd Ed., O’Reilly, 2004 (Safari)
- HTTP: The Definite Guide, D. Gourley & B. Totty, O’Reilly 2002 (Safari)
- HTTP Developer’s Handbook, Chris Shiflett, Developer’s Library, 2003 (Safari)
- HTML & XHTML, C. Musciano, B. Kennedy, 6th Ed., O’Reilly, 2006 (Safari)
- Using Microformats, B. Suda, O’Reilly, 2006 (Safari)
- Normas W3C (http://www.w3.org) y RFCs del IETF (http://www.ietf.org)

Tuesday, October 27, 2009

Índice (primera parte)
El Correo Electrónico y las primeras Aplicaciones
El Web, Recursos y URIs
HTML y HTTP
Navegación Web
Aplicaciones Web de Servidor
Autenticación
Sesiones Web
HTTP y Gestión de Tráfico
HTML Semántico
Web Semántico y Micro-formatos
Separando Estructura y Visualización: CSS
………


El Correo Electrónico y las
primeras aplicaciones


Los 80: Las primeras aplicaciones
El éxito de Internet se debe a sus aplicaciones


El carácter abierto de Internet produjo nuevas aplicaciones
 Los usuarios las creaban extendiendo aplicaciones existentes
 e-mail: Evolución de mensajería entre usuarios
 FTP (Transferencia de Ficheros): Evolución de COPY
 Otros:
 Terminal Virtual, News, Gopher (pre–Web), ….

Los S.O. de entonces eran orientados a comando

Intercambian datos en ASCII (o ristras de octetos)
 Son legibles y fáciles de procesar
 pero la compresión no es óptima
4


Correo electrónico
Correo electrónico (email): primer motor de Internet
Todavía es una de las aplicaciones más utilizadas

Envía un mensajes electrónico entre dos buzones
 Crea una dirección de buzón: “javier@dit.upm.es”

Protocolo SMTP (Simple Mail Trans. Prot., RFC821)
 Posteriormente aparecen otros protocolos: POP3, IMAP, ...

Formato de mensaje definido en RFC 822 (1982)
 Solo permite texto ASCII en Cabecera y Cuerpo
 Línea en blanco: separa Cabecera de Cuerpo
5


Ejemplo de mensaje
Asunto: Se han integrado los tuneles
De: Enrique Lopez <el@dit.upm.es>
Fecha: Tue, 11 Sep 2007 10:49:08 +0200
Para: jquemada@dit.upm.es, ....
Message-ID: <46E65684.9010901@dit.upm.es>
Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)
…….
Content-Length: 532

Hola a todos:

Esta mañana he terminado de integrar ……………
..........
Un saludo
Enrique


MIME
MIME (Multipurpose Internet Mail Extensions)
 Mensajes como acarreadores de contenidos
 Múltiples formatos: texto, imágenes, aplicaciones, …
 Contenidos no-ASCII se encapsulan y se trans-codifican
en
 hexadecimal, uuencode, base 64, …

Definido en RFCs 2045-6, 2077, 3023, ….
 http://www.iana.org/assignments/media-types/

El uso de MIME se ha extendido a otros ámbitos:
 HTTP y Web, S.O., ...

7


Extensiónes MIME
MIME introduce 5 nuevos campos en un mensaje
 MIME-Version: indica la versión MIME utilizada
 Ejemplo: “MIME-Version: 1.0” (acorde RFC1521)
 Content-Type: indica el tipo de contenido acarreado
 Ejemplo: “Content-Type: text/html”
 Content-Transfer-Encoding: de octetos a ASCII
 Códigos típicos: hexadecimal, uuencode, base 64, …
 Ejemplo: “Content-Transfer-Encoding: base64”
 Content-ID: identificador único en la red
Ejemplo: “Content-ID: <id23457689@gilito.lab.dit.upm.es>”
 Content-Description: texto descriptivo
 Ejemplo: “Content-Description: Pagina de prueba del servicio”


Tipos de contenidos MIME
Campo Content-Type
 Tiene dos partes: tipo / subtipo
Tipos:
 “application”, “audio”, “image”, “message”, “model”, “multipart”, “text”,
“video”, extension-token
 IANA coordina la definicion de nuevos tipos/subtipos
 http://www.iana.org/assignments/media-types/
Ejemplos:
 image/gif, image/jpeg, image/png, ...
 text/plain, text/html, message/rfc822, ......
 application/postcript, application/msword,
application/x-www-form-urlencoded, multipart/form-data, ...


Ejemplo de mensaje
Asunto: Se han integrado los tuneles
De: Enrique Lopez <el@dit.upm.es>
Fecha: Tue, 11 Sep 2007 10:49:08 +0200
Para: jquemada@dit.upm.es, ....
Message-ID: <46E65684.9010901@dit.upm.es>
Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)
MIME-Version: 1.0
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 8bit
…….
Content-Length: 532

Hola a todos:

Esta mañana he terminado de integrar ……………
..........
Un saludo
Enrique


El Web


Los 90: El Web
Propuesto por Tim Berners Lee en 1989

Es un “Servicio Abierto” de
 Publicación de documentos “hypertexto” en la red
 Alta usabilidad: “se navega haciendo click en enlaces”

El Web crece incesantemente desde sus comienzos
 Arquitectura escalable: descentralizada

El Web es un universo de mundos interconectados
 Cada página es el comienzo de un mundo
 El dueño (autor) publica y enlaza con otras páginas libremente

12


Los componentes del primer Web
URI (URL)
 Dirección en la red de un documento o recurso
 Ejemplo: http://www.upm.es/centros/etsit/personal.html
 Los hiperenlaces modelan
 Relaciones o interacciones entre personas, información, empresas, …
 ¡¡Todo recurso Web posee un URL que lo identifica!!

HTML
 Lenguaje abierto de
 descripción de documentos hipermedia, formularios, …
 ¡¡Permite navegación Web muy sencilla!!

HTTP
 Protocolo transaccional genérico
 Protocolo sin estado (Stateless) -> ¡¡Servidores y servicio escalables!!

13


Navegación Web
Servidor Web
Cliente Web

HTTP (URL)

Cliente
Solicita pag. HTTP - GET PaginaWeb.html HTTP 1.1
con click en
hiperenlace
Servidor
envía pag.
Web a
cliente.

El cliente
recibe <PaginaWeb.html>
y presenta
página HTML
en Visor..

Cada página HTML se identifica por un URL, por ejemplo http://mail.google.com/PaginaWeb.html


Clientes y Servidores Web
Cliente Web: Visor o Navegador Web
 Microsoft Explorer, Firefox, Safari, Opera, Googe Chrome, …

 Son de gran complejidad
 Simplifican el desarrollo de aplicaciones Web
 Dan acceso a recursos Web
HTTP (URL)
HTML, XML, ..

Servidor Web
 Programa capaz de dar recursos Web a clientes
 Utilizando transacciones HTTP
 Servidores mas comunes: Apache, Tomcat, Microsoft IIS, …
 Prestaciones y escalabilidad son muy importantes
 Debe atender muchos clientes

15


Distribución
mundial

HTTP (URL)
HTML, XML, ..

Website Growth
in 2008:

24.4% –Apache
13.7% – IIS
22.2% – Google GFE
336.8% – Nginx
100.3% –Lighttpd


Tipos de Aplicaciones Web
Navegación Web
 Servidores sirven páginas Web en HTML HTTP (URL)

 Navegación a través de hiperenlaces HTML, XML, ..

Aplicaciones de servidor
 Las solicitudes se envían a través de formularios
 Servidores ejecutan programas en Java, PHP, RoR, C#, …
 Consulta a BD, servicios interactivos, …..
 Devuelven los resultados como una página HTML, XML, …

Aplicaciones de cliente
 Se ejecutan en visor Web (en Java, Javascript, C#, ..)
 Optimizan el uso del ancho de banda de Internet
 Nombre: AJAX - Asynchronous Javascript and XML

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

17


El Tráfico de Internet
Las aplicaciones son el motor del tráfico de Internet
Mayor incremento de tráfico actual
 Video IP: YouTube, streaming, IP TV, …
 Tráfico P2P esta perdiendo peso en el porcentaje global


Acumulación de Recursos Web
Web: mayor repositorio de recursos, información y conocimiento
Esta dividido en continentes: Central Core, In, Out, Islands, …
Mayor fuente de contenidos en 2008
Web-social: Contenido Generados por Usuarios (CGU)
Email: 210 billardos diarios (70% spam)
Sitios Web: 186 millones (31,5M nuevas).
Blogs: 133 millones, 329 millones de posts (Tecnorati)
Fotos: Facebook (10 Billardos), Flikr (3 Billa.), Photobucket (6 Billa.)
Reproducción Video EEUU: 12,7 billard./mes, 87 al mes por usuario

Mayor reto: Web Mining
Gestión de la
información acumulada:
Búsqueda
Clasificación
Análisis
….

Google: usa
algoritmos todavía
muy primitivos


W3C - WWW Consortium
WWW Consortium
 Creado en 1994
 Participan empresas e instituciones
 Trata de anticiparse a las implementaciones
 Con normas que abran caminos nuevos
 Normas W3C (en colaboración con IETF)
 Web inicial: URI, HTTP, HTML
 Normas posteriores : CSS, XML, XHTML, MathML, SVG, SMIL, …
 Web de datos (Web Services): WSDL, SOAP, …
 Web Semántico: RDF, Ontologias, …
 Mas información en: http://www.w3.org


Recursos y URIs


Recursos y URIs
Un recurso es cualquier cosa en Internet que
“merezca la pena ser referenciada por si misma”
Un fichero, un mapa, un libro, una foto, un video, una
base de datos, …..

Cada recurso se identifica con un URI
 El URI identifica y da acceso al recurso
 El URI define también el formato del recurso

Un recurso debe tener un formato “conocido”
 Texto ASCII, HTML, XML, JSON, ….


Identificación de recursos
URI: Identificador de recurso uniforme
 Uniformiza el acceso a cualquier recurso de Internet
 Definido en: RFC 2396 (98), RFC 2732 (99) y RFC 3986 (05)
 T. Berners-Lee, R. Fielding, L. Masinter, B. Carpenter
 http://www.faqs.org/rfcs/rfc2396.html

 http://www.faqs.org/rfcs/rfc3986.html

Tipos de URI
 URL: Uniform Resource Locator
 Localiza un recurso unívocamente en un lugar físico de la red
 Lugar físico: Recurso en un “host” de Internet
 URN: Uniform Resource Name
 Nombre de un recurso, independiente de posición
 Se definió en la norma, pero se utiliza escasamente


Formato de un URL
<prot>:<//><authority>/<path>?<query>#<frag>
<authority> = <UserInfo@><host><:port>

prot: protocolo o esquema de acceso: http:, mailto:, ftp:, telnet:, ..
authority: identificación de servidor (host), puerto (port) y usuario
Dirección de correo electrónico: mailto:jesus@dit.upm.es
URLs Web con dominio o IP: http://dit.upm.es, http://138.15.12.223:8080

path: identificación de recurso (dentro el servidor)
URL Web: http:///www.bb.es/archivo/doc1.html
URL de fichero: file:///usr/lib/registro.txt

query: Define valores de parámetros en formularios
URL Web: http://www.bb.es/foto?nombre=Paco&apellido=Perez

frag: sección de un recurso (se denomina también: anchor, fragment, ref,
…)
URL Web: http://www.bb.es/archivo/doc1.html#seccion


Usos especiales de URLs
URLs Web relativos y absolutos:

URL Web absoluto: http:///www.bb.es/archivo/doc1.html
URL Web relativo al anterior: /../eventos/congreso.html
equivale a: http://www.bb.es/eventos/congreso.html
donde “/..” significa directorio anterior
http://www.bb.es/archivo/ equivale a http://www.bb.es/archivo/index.html

Recurso por defecto de un URL Web: index.html
http://www.bb.es/archivo/ equivale a http://www.bb.es/archivo/index.html

URLs mailto para crear mensajes
El URL de mail (RFC 2368) permite generar mensajes asignando valores a campos
Tutorial en: http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm
Ejemplo:
mailto:jesus@dit.upm.es,santi@dit.upm.es?subject=Cita&body=Quedamos%20hoy.

Si incluimos el URL anterior
en una pagina web y hacemos
click en el, aparece este msj:

25


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-1
Codificar los siguientes parametros de un query
correctamente codificado en x-www-form-
urlencoded
 Nombre=“Batman for ever”
 Email=bf@paramount.com
 Año=1927
 Cita=23/10/2001 a las 21:30


HTTP y HTML


Navegación Web


Navegación Web
Servidor Web
Cliente Web

HTTP (URL)

Cliente
Solicita pag. HTTP - GET PaginaWeb.html HTTP 1.1
con click en
hiperenlace
Servidor
envía pag.
Web a
cliente.

El cliente
recibe
y presenta
página HTML
en Visor..

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


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


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>

Representación en Arbol
Un documento HTML representa un árbol
 El árbol describe la estructura del documento
 Cada bloque (<..> …. <..>) es un sub-arbol

El árbol del ejemplo se representa en la figura

HTML

HEAD BODY

A
continuación
TITLE H1 <!– --!> Acceda al A . P aparece una UL TABLE
lista y
una tabla

Tutorial de
Ejemplo
Ejemplo de Esto es un HTML de
página
cabecera comentario HREF W3C LI LI LI TR TR
HTML
Schools

http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD

con Primera
COLOR rojo en negrita
subíndice celda BR de la tabla IMG Celda 21 Celda 22

red SRC

Iconos.gif


Código HTML del ejemplo
<HTML>: declaración de página HTML
<HEAD>: cabecera no visible
<BODY>: cuerpo visible
<H1>: titulo de nivel 1
 Sub-niveles: <H2>, <H3>, …
<A HREF="http://....>: hipervínculo El ejemplo ilustra
 El URL va en el atributo HREF
<P> párrafo
 Ejemplo de atributo: ALIGN=“center”
Texto
<UL>: lista no numerada Enlaces
<OL>: lista numerada
Listas


 <DL> Lista definida:


Tipo de elemento <dt> .... </dt>
Definición de elemento <dd> ... </dd>
Tablas
<LI>: elemento de lista <OL> o <UL>
<UL id=“fragment”> permite referenciar ese Se pueden encontrar mas
elemento en un URL con fragment
detalles sobre HTML o
<FONT>: tipo de fuente
<STRONG>: resaltar fuerte XHTML en el Tutorial.
 Otros: <SMALL>, <BIG>, <TT>, <Q>, ..
<SUB>: subíndice Forms y objetos (ejecutables)
Superíndice: <SUP>
<TABLE BORDER>: tabla
de ven más adelante. No se
<TR>: fila de tabla recomienda usar Frames.
<TD>: celda de tabla
<IMG>: imagen



Modificar el ejemplo de página HTML
anterior para que
 La lista sea numerada en vez de “itemizada”
 El “elemento rojo” se cambie por
 “elemento DIT” y se coloree en azul
 Asociando hiperenlace http://www.dit.upm.es/
 La lista tenga un nuevo elemento
 Con texto “Notificar por correo electrónico”
 Con hiperenlace asociado que genere un email
 A la dirección: swcm@dit.upm.es
 Con asunto: “Ejemplo aplicación-1”
 Recordar que hay que codificarlo en “x-www-form-

urlencoded”


HTTP


Transacción HTTP GET

GET /index.html HTTP/1.0
Accept: text/html, text/plain, image/gif, image/jpeg
User-Agent: Netscape-Navigator/4.03
// linea en blanco indica final de cabecera
// POST y PUT pueden llevar cuerpo

HTTP/1.0 200 OK
Server: NCSA/1.2.3
Content-type: text/html
Content-length: 608 // tamaño cuerpo en bytes
// linea en blanco hace de separador entre cabecera y cuerpo
pregunta
<html>
....... // fichero html
</html>


Formato de cabeceras HTTP GET
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html

1) Solicitud del Cliente
Comienzo GET /lib/ej.html HTTP/1.1 Comando, camino-recurso, versión-HTTP
Host: scom.dit.upm.es
Cabecera Accept: text/*, image/* Sentencias de cabecera:
Accept-language: en, sp dan información al servidor
User-Agent: Mozilla/5.0 (WinNT)
Cuerpo GET no incluye cuerpo en la solicitud

2) Respuesta del Servidor: scom.dit.upm.es

Comienzo HTTP/1.1 200 OK Versión-HTTP, resultado, frase-adicional
Server: Apache/1.3.6 (Unix) Sentencias de cabecera:
Cabecera Content-type: text/html, … dan información al cliente
Content-length: 608

Cuerpo <html> …….. </html> Cuerpo con fichero HTML


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 persistentes
Se puede mantener la conexión TCP establecida con
 Connection: keep-alive

HTTP 1.1 permite transacciones en paralelo (pipelined)
 Una transacción puede comenzar sin que finalice la anterior
 La finalización de las transacciones debe seguir el orden de comienzo
 Aumenta mucho la velocidad de carga de páginas Web


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


1. Installar Mozilla Firefox y añadirle el Add-On “Live
HTTP Header” que permite ver las cabeceras HTTP
intercambiadas con un servidor.
 Acceder a un servidor e interpretar las cabeceras
intercambiadas.
Hacer un telnet al puerto 80 y simular comandos
HTTP introduciendolos a través del teclado
 > telnet <host> <port> ....


La clase URL


Ejemplo: Construcción de URLs
import java.net.*; // Este ejemplo solo construye y trocea URLs
public class urls { // No accede a los recursos asociados
public static void main (String args[]) {
try {
URL u1 = new URL("http://www.upm.es/hola.html#sec3");
URL u2 = new URL(u1, "manual.html?t=net#sec3");
System.out.println(u1);
System.out.println(u2);
System.out.println("Protocol: " + u2.getProtocol());
System.out.println("Anchor: " + u2.getAuthority());
System.out.println("Host: " + u2.getHost());
System.out.println("Port: " + u2.getPort());
System.out.println("File: " + u2.getFile ());
System.out.println("File: " + u2.getPath());
System.out.println("Anchor: " + u2.getRef());
} catch (Exception e) {System.out.println(e);}
}
}


Ejemplo: webAccess
Programa de acceso a un recurso en un
servidor Web
 Crea un objeto URL de acceso a la página Web
 Abre el flujo de entrada
 Lee y presenta en pantalla la información recibida
 Interpreta los octetos como caracteres ASCII

invocación:
 > java webAccess <url>
 > java webAccess http://www.dit.upm.es


Ejemplo: acceso a través de URL
import java.io.*; import java.net.*;

public class webAccess {
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);}
}
}
}


Guardar en un fichero en el escritorio el primer ejemplo HTML de la
transparencia 35 “Ejemplo de Pagina HTML”, dando al fichero el
nombre:
 “Ejemplo de Pagina HTML.html”

Modificar el programa del ejemplo “webAccess” para que acepte un
URL con blancos y los sustituya por “+” o %20, de forma que pueda
acceder a dicho fichero con un URL de tipo
“file:///Users/……/Ejemplo de Pagina HTML.html”

Entregar tanto el programa modificado como el path de acceso
utilizado
 Nota: se recomienda crear el fichero y presentarlo en un visor Web para ver el “path”
del fichero en el ordenador en que se este trabajando


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

Servidor Web:
Ejecuta aplicación en Base de Datos:
PERL, PHP, Java, RoR, … MySQL, Oracle, ..
Visores Web:

HTTP (URL) SQL

Cliente solicita Servidor procesa
GET serv?user=jose HTTP 1.1
operación desde parametros,
formulario y consulta BD y
envía parametros devuelve resultado
en HTML. XML, ..
BD gestiona
datos del
servidor

El cliente recibe
y presenta
página HTML
en Visor.

Solicitud de operación: http://mail.google.com/serv?user=jose


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>
<HTML> <HEAD> <TITLE> Formulario </TITLE> </HEAD> El atributo “METHOD” define el método
<BODY>
<FORM METHOD=get
de HTTP que se invoca al hacer
ACTION="http://localhost:22000/cgi-bin/aut"> “submit”.
<H1>InformaciÛn de Productos</H1>
 Solo se soporta GET y POST
El atributo “ACTION” define el URL que
Elija Producto:<br> se va a invocar
<INPUT TYPE=radio NAME=color VALUE=red>  Se le añadirán los parámetros que envíe
Producto rojo el usuario en el “query”
<INPUT TYPE=radio NAME=color VALUE=blue CHECKED>  Se usa formato “x-www-form-urlencoded”
Producto azul
La marca <INPUT> permite incluir
diversos tipos de entradas
Escriba su mensaje aquÌ:<br>  TYPE=text: entrada de texto
 TYPE=password: palabra clave
 Se envía como un parámetro más
 El texto tecleado aparece como “*”
<INPUT TYPE=submit VALUE="Enviar formulario”>  TYPE=radio: selección alternativa
</FORM>
 TYPE=reset: botón para asignar valores
</BODY> por defecto
</HTML>  TYPE=submit: botón para enviar
formulario a servidor
La marca <TEXTAREA> define un area
para teclear un texto.

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


Cabeceras HTTP GET
<FORM METHOD=get ACTION="http://scom.dit.upm.es/cgi-bin/aut">


Comienzo GET cgi-bin/aut?color=blue&msg=Deje+su+mensaje HTTP/1.1
Host: scom.dit.upm.es
Accept: text/*, imag/gif, image/jpeg, imag/png
Cabecera
Accept-language: en, sp
User-Agent: Mozilla/5.0 (WinNT)
Cuerpo


HTTP/1.1 200 OK
Comienzo
Server: Apache/1.3.6 (Unix)
Cabecera Content-type: text/html, …
Content-length: 608
Cuerpo <html> …….. </html>


Cabeceras HTTP POST
<FORM METHOD=post ACTION="http://scom.dit.upm.es/cgi-bin/aut">

POST cgi-bin/aut HTTP/1.1
Comienzo Host: scom.dit.upm.es
Accept: text/*, imag/gif, image/jpeg, imag/png
Accept-language: en, sp
Cabecera User-Agent: Mozilla/5.0 (WinNT)
Content-type: application/x-www-form-urlencoded
Content-length: 30
Cuerpo color=blue&msg=Deje+su+mensaje

HTTP/1.1 200 OK

Comienzo Server: Apache/1.3.6 (Unix)
MIME-version: 1.0
Content-type: text/html, …
Cabecera
Last-modified: Wed, 14-Mar-95 18:15:23 GMT
Content-length: 608
Cuerpo <html> …….. </html>


Ejemplo de pseudo-servidor
nombre: FormServer
El ejemplo muestra un pseudo servidor http
Funcionalidad incompleta (efectos ilustrativos)
 Espera una solicitud de conexión TCP
 Cuando llega la acepta y espera una solicitud HTTP
 Cuando llega, asume que es GET sin analizar el comando
 No analiza ni el path ni la versión
 No analiza la cabecera
 Una vez completada la solicitud HTTP (Línea en blanco)
 devuelve una respuesta cableada
 Cabecera HTTP

 Página HTML generada al vuelo

URL de acceso: http://localhost:22000


import java.io.*; import java.net.*;

public class FormServer {
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); }
}
}


Modificar “FormServer” para que responda a peticiones con
“Formulario” del ejemplo anterior como sigue:
El servidor analizará que el comando enviado es GET
 En caso de no serlo responda con “400 Bad Request”
 Además insertará en la página de respuesta: “Comando no soportado”
 En caso de recibir un comando GET
 el servidor devolvera “200 OK”
 Además analizara si lleva el parametro “color”
 Si no lo lleva añadira a la página de respuesta el texto “Bad
request”.
 Si lo lleva añadira a la página de respuesta en función del valor
asignado a “color” el siguiente texto:
red: “El producto es SWCM27 y la clave XC5h7-67YH5”
 blue: “El producto es SWCM89 y la clave XC5h7-7UI90”

 green: “El producto es SWCM02 y la clave XC5h7-R45TY”

 Cualquier otro valor: “Producto desconocido”


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:SWCM
Se codifica como: U1dDTTpTV0NN
 La transacción debe encriptarse con HTTPS

Figura tomada de “HTTP Developer’s Handbook” de Chris Shiflett


Cabeceras: Basic Autentification

1) Solicitud de recurso Web del Cliente
2) Solicitud del Servidor solicitando autenticación
Comienzo HTTP/1.1 401 Unauthorized
Cabecera Content-length: 0
WWW-Authenticate: Basic Realm=“example”
Cuerpo
3) Respuesta de autenticación del cliente
Comienzo GET /lib/ej.html HTTP/1.1
Accept: text/*
Cabecera Accept-language: en, sp
Authorization: Basic bXluYW1lOm15cGFzcw==
Cuerpo
4) Respuesta de servidor entregando el recurso


Ejemplo de servidor
nombre: formserver
El ejemplo muestra un pseudo servidor http
 Funcionalidad incompleta (efectos ilustrativos)
 Espera una solicitud de conexión TCP
 Cuando llega la acepta y espera una solicitud HTTP
 Cuando llega, asume que es GET sin analizar el comando
 No analiza ni el path ni la versión
 No analiza la cabecera
 Una vez completada la solicitud HTTP (Línea en blanco)
 devuelve una respuesta cableada
 Cabecera

 Página HTML fija

URL de acceso: http://localhost:22000


Autenticación propietaria
La autenticación también se puede
enviar como parámetros de query.

 La comunicación debera ir cifrada
con HTTPS

 La aplicación del usuario tendrá
libertad para gestionar claves y
usuarios de forma mas libre

Ejemplo de path generado: /cgi-bin/aut?nombre=jose&clave=SWCM&color=blue&msg=Mensaje


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
VALUE=blue CHECKED>azul
VALUE=green> verde <br><br>
Buzón de mensajes:<br>
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


Modificar “FormServer”
 Añadiendo “autenticación básica” en el acceso a la página
 Con usuario “SWCM” y palabra de paso “SWCM”

Modificar el servidor desarrollado en la práctica
“aplicación-4” a partir de “FormServer”
 Añadiendo también “autenticación básica”
 Con usuario “SWCM” y palabra de paso “SWCM”


Clave pública y clave privada

Mensaje legible cifrador Mensaje cifrado descifrador Mensaje legible

clave clave

Mensaje legible cifrador Mensaje cifrado descifrador Mensaje legible

Clave pública Clave privada


HTTPS: Conexiones seguras
Extensión de HTTP y Sockets
 para cifrar transacciones
 Servidor envía certificado público
 Cliente envía clave simétrica cifrada con certificado público de servidor
 URL https://dit.upm.es/……
 Se introduce una capa adicional entre TCP y HTTP

Figuras tomada de “HTTP Developer’s Handbook” de Chris Shiflett


Sesiones Web


Ejemplo de sesión
Cliente Servidor
El servidor envía un
identificador (ID) a cada Cliente se autentica
Usuario autenticado

Las transacciones Servidor crea y envia ID
siguientes deben ser
asociadas con el mismo Cliente envia ID
usuario y con Selecciona producto
su registro en la base
de datos.

Durante todas las
transacciones de la Cliente envia ID
sesión el usuario Compra producto
conservará el mismo
identificador.
Cliente envia ID
Cierra sesión
El identificador se
libera al hacer Servidor destruye ID
Logout.


Gestión de sesiones


Mecanismos de gestión de sesiones


Cookies
Servidor enviar cookie al cliente cuando se autentica
 Toda cookie lleva asociado un dominio y un path
 Cliente almacena cookie durante sesión o hasta fecha límite
 Cliente devuelve cookie en toda transacción con dominio/path asociado
Ejemplo
 Set-Cookie: id=pepe.perez; path/; domain=.dit.upm.es
 Cookie: id=pepe.perez

Cliente Servidor
Autenticación
¿Dónde guarda el cliente
el Id de sesión de usuario? Set Cookie con Id

Respuesta: en una Send Cookie con Id
Cookie que se almacena
en el visor Web.
Send Cookie con Id


Cabeceras: Cookies
1a) Solicitud de Autenticación: …….
2a) Respuesta del servidor (Enviando Id en Cookie)
Comienzo HTTP/1.1 200 OK
Set-Cookie: Id=user675; Expires=Tue, 31 Mar 2008 11:30:12 GMT; Path=/
Set-Cookie: User=Pepe+Perez; Expires=Tue, 31 Mar 2008 11:30:12 GMT; Path=/

Cuerpo ………

1b) Siguiente transacción (con Id en cookie)
Comienzo GET /lib/.html HTTP/1.1
Accept: text/*
Cookie: Id=user675; User=Pepe+Perez
Cuerpo
2b) Respuesta de servidor a usuario Id
Comienzo HTTP/1.1 200 OK
Content-length: 128
Cabecera
……

Cuerpo ………


Identificadores en URL
Cliente Servidor
¿Dónde guarda el Autenticación
cliente el ID de usuario?

Respuesta: en URLs del HTML con ID en URLs
código ((X)HTML, XML ,
…) devuelto al cliente. ID en Path HTTP

No se requiere soporte
especial ni en visor ni HTML con ID en URLs
en HTTP.
ID en Path HTTP
El usuario solo permanece
en la sesión si hace click HTML con ID en URLs
en las páginas devueltas
por el servidor. ID en Path HTTP
Se denominan también
FAT-URLs HTML con Id en URLs

Ejemplo: http://mail.google.com/mail/?account_id=juan.quemada%40gmail.com&zx=nfxtz5vo7i90


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>
<INPUT TYPE=radio NAME=color VALUE=red>
Producto rojo
<INPUT TYPE=radio NAME=color VALUE=blue CHECKED>
Producto azul

Escriba su mensaje aquÌ:<br>

<INPUT TYPE=submit VALUE="Enviar formulario”>
</FORM>
</BODY>
</HTML>

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

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


Los Clicks y el tráfico de Internet
Cada click en un URL de una página Web
 Desencadena una acceso Web (HTTP)

El tráfico actual de Internet se mide en clicks
 Es decir: Transacciones HTTP

Todos los portales de Internet
 Intentan maximizar el número de accesos recibidos
 Sus ingresos de publicidad dependen del número de accesos

Atractores de clicks
 El tráfico (clicks) depende de los enlaces a una página
 Desde blogs, Google o sistemas de recomendación


Descargas de Páginas Web


Optimización del Tráfico
Se realiza con caches en dispositivos proxy o pasarela
 Interceptan los accesos
 Y sirven el contenido solicitado de la cache, si no ha cambiado en el servidor
 Una cache se situa en ciente, servidor o punto intermedio estratégico
Proxy: dispositivo intermedio elegido por el cliente
Pasarela: dispositivo intermedio elegido por el servidor o la red

Figura tomada de “HTTP Developer’s Handbook” de Chris Shiflett


Identificador de recurso: Etag
1) Solicitud condicional de recurso
Accept: text/*
If-None-Match: “V45789099”
Cuerpo

2) Respuesta confirmando
Comienzo HTTP/1.1 304 Not Modified
Date: Wed, 03 Jul 2002, 19:18:23 GMT
Etag: “V45789099”
Cache-Control: max-age=36000 // cachear 36000 segundos
Cuerpo


Control de Última Modificación
1) Solicitud condicional de recurso
Accept: text/*
If-Modified-Since: Wed, 21 Jun 2002, 12:11:23 GMT
Cuerpo
2) Respuesta confirmando
Comienzo HTTP/1.1 304 Not Modified
Date: Wed, 03 Jul 2002, 19:18:23 GMT
Expires: Fri, 05 Jul 2002, 19:18:23 GMT
Cuerpo


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


Metodos de HTTP
Métodos de HTTP
 GET: Pedir un fichero al servidor
 HEAD: Pedir la cabecera de un fichero al servidor
 POST: Enviar un formulario al servidor
 PUT: Cargar un recurso en el servidor
 DELETE: Borrar un recurso del servidor
 OPTIONS: Determinar que métodos acepta un servidor
 TRACE: Trazar mensaje a través de proxies hasta el servidor
 CONNECT: Conectar a un servidor a través de un proxy

Interfaz CRUD (Create, Read, Update, Delete)
 Create: PUT
 Read: GET, HEAD
 Update: POST
 Delete: DELETE


Interfaz Uniforme


Extensiones WebDav


Algunas cabeceras de HTTP
Cabeceras mas comunes de HTTP
 Accept: // CS
 Connection: <para gestión de conexiones> // CS
 Content Type: <tipo MIME de datos> // CS
 Date: // CS
 Content-Length: // C
 User-Agent: <si el visor es Explorer, Mozilla, …> // C
 Host: <dirección del servidor> // C
Gestión de cache
 If-Non-Match: <versión Etag de un recurso> // C
 Etag: <version del objeto para determinar si ha cambiado> // S
Gestión de HTTP GET condicional (solo da el recurso si ha cambiado)
 If-Modified-Since: <para gestionar GET condicional> // C
 Last-Modified: <complementaria de If-Modified-Since> // S
Autenticación
 Authorization: <user y pwd> // S
 WWW-Authenticate: asociada a “401 Unauthorized” // R
Cookies (no standard)
 Cookie: // S
 Set-Cookie: // R
Otros
 Slug: <titulo de un doc binario en ATOM-PP” // S

Respuestas mas habituales de HTTP


HTML Semántico


Descripción de Información


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

Marcado (X)HTML semántico
 Define la estructura de un documento con mayor precisión
 Definiendo el formato gráfico para visualizar con CSS (Cascad. Style Sheets)
 Definiendo la semántica de los datos con microformatos
 HTML semántico: http://en.wikipedia.org/wiki/HTML#Semantic_HTML

(X)HTML semántico
Utiliza marcas estructurales existentes siempre que sea posible
 Headings (<h1,..>), Lists (<ul>, <ol>, ..), Paragraphs (<p>), Citation
(<cite>, <q>, <blockquote>,..), Abbreviations (<abbr>), ….
 Cuando no es posible, se extiende (X)HTML utilizando
 Marca genéricas y atributos de definición de clases y relaciones


Marcas de bloque y línea
Delimitadores genéricos:
<div>: define un bloque
 Un bloque puede contener otro bloque o un elemento en línea.
<span>: define un elemento en línea
 Un elemento en línea puede contener otro elemento en línea.
<HTML>
<HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD>
<BODY> 


<


<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>
…………
</HTML>

Atributos de clase e identificador
Atributo “class”
Define una clase asociada al bloque marcado
 Se utilizan junto con <DIV> y <SPAN> para definir nuevas clases
 La nueva clase tiene múltiples usos
 Sucedáneo de nuevas marcas

 Identificación de estructuras similares

Atributo “id”
Define un identificador único en el fichero
 Crea una referencia única
 Se asocia con un fragment
Ejemlo URL: http://www.swcm.es/fich.htm#ColumnaP

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


Atributos de relación


Web Semántica y Microformatos


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

La información Web accesible esta mayoritariamente
en (X)HTML
 (X)HTML no puede ser procesado fácilmente por programas
 (X)HTML está pensado para personas
 Un programa no es capaz de deducir el significado de una página
Web a partir del código (X)HTML

La Web Semántica
 Iniciativa para facilitar la deducción automática del significado
de los contenidos Web
 Añadiendo meta-datos a los contenidos Web
 Que definan su significado y sus propiedades


Web Semántica o Microformatos
W3C: World Wide Web Consortium
 Esta definiendo lenguajes “semánticos”
 RDF (Resource Description Framework)
 Para describir propiedades semánticas de recursos Web
 OWL: Web Ontology Language
 Para describir significado, ontologías y propiedades semánticas de
recursos Web
 …..
 Son lenguajes de bastante complejidad

Microformatos
 Conjunto de meta-datos sencillos y abiertos
 Definidos en (X)HTML semántico
 Basados en normas ampliamente adoptadas en Internet


Microformatos


Microformatos: características


Microformatos: beneficios
Permiten indexación y agregación de micro-contenidos
 Búsquedas mas eficaces (Google, Yahoo, Technorati, …)
 Agregación de recomendaciones, tags, … dispersos
Interoperabilidad entre contenidos Web y aplicaciones
Por ejemplo: Outlook, Agendas, Calendarios, ....
 Ejemplo basado en Plug-in: Firefox Operator
 https://addons.mozilla.org/es-ES/firefox/addon/4106
 Ejemplos: http://tantek.com/, http://suda.co.uk/contact/


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>


Relaciones
Los atributos “rel” y “rev” se utilizan para definir relaciones,
por ejemplo

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

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

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

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


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

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

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


Separando Estructura y
Visualización


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


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

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> 

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 <STRONG>en negrita</STRONG> </LI> /* Ejemplo de hoja de estilo */
<LI> elemento <SUB>con subíndice</SUB> </LI>
</UL> H1 {color: red;
background-color: #ABD;}

<TABLE BORDER> UL {color: blue;
<TR> <TD>Primera celda <br> de la tabla</TD> font-size: smaller;
font-style: italic;
<TD><IMG SRC="iconos.gif"></TD> </TR> background-color: #ABD;}
<TR> <TD>Celda 21</TD>
<TD>Celda 22</TD> </TR> TABLE {border-collapse: separate;
</TABLE> border-spacing: 5px 5px;
background-color: #8BD;}
</BODY>
</HTML>

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



h1 {…………} HTML
ul {…………} table {…………}
HEAD BODY

A
continuación
TITLE H1 <!– --!> Acceda al A . P aparece una UL TABLE
lista y
una tabla

Tutorial de
Ejemplo
página
cabecera comentario HREF W3C LI LI LI TR TR
HTML
Schools

http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD

con Primera
COLOR rojo en negrita
subíndice celda BR de la tabla IMG Celda 21 Celda 22

red SRC

Iconos.gif


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
margin-area
padding-area
Esto es un parrafo de 2 lineas de
texto content-area

border inner edge outer edge

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


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


En el ejemplo anterior se ha incluido un atributo CSS
 En la marca “STRONG” del segundo elemento de la lista
El nuevo atributo es el que se aplica
 Esta mas próximo en el árbol
HTML

HEAD BODY

A
continuación
TITLE LINK H1 <!– --!> Acceda al A . P aparece una
lista y
UL TABLE
una tabla

Tutorial de
Ejemplo
página REL cabecera comentario HREF W3C LI LI LI TR TR
HTML
Schools

stylesheet http://ww .. elemento FONT elemento STRONG elemento SUB TD TD TD TD

con Primera
HREF COLOR rojo STYLE en negrita subíndice celda BR de la tabla IMG Celda 21 Celda 22

Font-style:
Ejemplo.css red
normal SRC

TYPE Iconos.gif

Text/css


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


Arquitectura Web 1

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Ähnlich wie Arquitectura Web 1

Ähnlich wie Arquitectura Web 1 (20)

Mehr von Juan Quemada

Mehr von Juan Quemada (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Arquitectura Web 1