Tecnologas de la Web
Aplicaciones Web/Sistemas Web
Lenguajes de marcado
En la Web:
HTML
Meta-informacin: <metaname="keywords"content="CursoWeb,UCM"/>
Estructura del documento: <head><body><h1>
Formato: <b>Textoennegrita</b>
Enlaces a otros objetos: <ahref="http://www.ucm.es/">
Formularios: <form>
Scripts: <script>
Versiones actuales:
Identificadores de Recursos
UniformResourceLocator (URL)
Descriptor del acceso (cmo encontrar) un recurso
esquema://autoridad/ruta/archivo?solicitud
Esquema: http,https,ftp,mailto,ldap,file,
Autoridad: www.ucm.es
https://cv3.sim.ucm.es/portal/help/main?help=sakai.siteinfo
Se puede incluir tambin el puerto
(por defecto 80 para http y 443 para https)
https://cv3.sim.ucm.es:443/portal/help/main?help=sakai.siteinfo
UniformResourceIdentifier (URI)
Identificador inequvoco de un recurso
Definido en RFC 2396
Modelo cliente-servidor
peticin
Servidor
Cliente
respuesta
index.html
Navegador (HTML5,
Applet, Flash, JavaFX)
Juan Pavn - UCM 2013-14
Funcionamiento
53
int
mil
org
net jp
us
es
fr
java
UDP/IP
Servidor DNS
1
http://www.ucm.es
80
TCP/IP
internet
index.html
home.css
jquery.min.js
ucm.png
ar
Protocolo HTTP
Cliente
1
solicitud
y
Servidor
80
respuesta
cierre
3
Juan Pavn - UCM 2013-14
Protocolo HTTP
Tipos de mensajes
HTTP/1.0
GET
Solicitud de un recurso
POST
Envo de datos al servidor para que los procese (p.ej. con un script CGI)
Ejemplo: datos de un formulario
HEAD
Como el GET pero pide al servidor que solo enve la cabecera de la
respuesta (esto es, que responda sin enviar el objeto requerido)
Para comprobar caractersticas de un recurso sin descargarlo
HTTP/1.1
GET, POST, HEAD
PUT
Sube archivos en el cuerpo de la solicitud
DELETE
Borra el archivo especificado en el campo URL
Protocolo HTTP
Mensajes HTTP
Lnea inicial
0..n lneas de cabecera
Lnea en blanco (CRLF)
Cuerpo de mensaje opcional (un fichero, solicitud de datos, datos
resultado de una solicitud)
<lneainicial,diferenteparasolicitudorespuesta>
Cabecera1:valor1
Cabecera2:valor2
Cabecera3:valor3
<opcional cuerpodemensaje,contenidodeficheroodatosdequery;
puedetenercualquiercantidaddelneas,inclusodatosbinarios$&*%@!^$@>
Protocolo HTTP
Solicitud (request)
GET /path/to/file/index.html HTTP/1.0
Respuesta
HTTP/1.0 200 OK
HTTP/1.0 404 Not Found
Cdigos de estado tpicos
200 OK Solicitud existosa el recurso resultante sigue en el cuerpo
400 Bad Request El servidor no entiende la solicitud
404 Not Found El recurso solicitado no existe en el servidor
301 Moved Permanently
302 Moved Temporarily
303 See Other (solo en HTTP 1.1) El recurso se ha movido a otro
URL (indicado en la cabecera Location:), y debe ser
automticamente recuperado por el cliente (redireccin)
500 Server Error Error inesperado del servidor
10
Protocolo HTTP
11
12
Usa
Criptografa asimtrica (sistema de clave pblica) para acordar el protocolo
y claves de sesin
Criptografa simtrica para el intercambio confidencial de informacin
Cdigos de autenticacin de mensajes para la integridad de los mensajes
13
telnet www.dominio.com 80
$telnetwww.google.es80
Trying 212.106.221.27...
Connected to www.google.es.
Escapecharacter is '^]'.
HEAD/HTTP/1.1
Host:www.google.es
HTTP/1.1200OK
Date:Fri,01Mar201315:54:35GMT
Expires:1
CacheControl:private,maxage=0
ContentType:text/html;charset=ISO88591
SetCookie:PREF=ID=8730c30ca4e6210e:FF=0:TM=1362153275:LM=1362153275:S=lr3Lm912j2Rdd2mS;
expires=Sun,01Mar201515:54:35GMT;path=/;domain=.google.es
SetCookie:NID=67=e839boWwCqTrzsUkPjpafLY_5vLVoYBWhX7bWejx8RvmRylUJDbLCKFEh0jwpu0LtySsKu
AYG0z5rvinJoYwzjLXbDgE4nHmXQIrsVJwrT2WUyeQH1mITNowDsJJ_oo;expires=Sat,31Aug201315:54:35GMT;
path=/;domain=.google.es;HttpOnly
P3P:CP="This is not aP3Ppolicy!See
http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657for moreinfo."
Server:gws
XXSSProtection:1;mode=block
XFrameOptions:SAMEORIGIN
TransferEncoding:chunked
Connection closed by foreign host.
$
14
15
Cookies
Uso de cookies
16
Cookies
Atributos
17
Cookies
crea cookie
respuesta HTTP
navegador
servidor
peticin HTTP
Memoria/
Disco
18
19
Para enviarlo por HTTP hace falta codificarlo con el mtodo enconde()
de java.net.URLEncoder, que convierte el string al formato MIME
denominado x-www-form-urlencoded
'a' - 'z', 'A' - 'Z', y '0' - '9' no se modifican.
El carcter de espacio se transforma en '+'.
Los dems caracteres se convierten en string de 3-caracteres
"%xy", donde xy es la representacin hexadecimal con dos dgitos
de los 8-bits del carcter
Cookiecookie =newCookie("uid",java.net.URLEncoder.encode(uid));
//...
response.addCookie (cookie));
20
Recepcin de cookies
21
Configuracin de cookies
Comentario
cookie.setComment ("comentario");
Dominio
cookie.setDomain ("patron_de_dominio");
22
http://maquina/pagina.html?parametro=valor
Poco seguro
23
24
En el cliente:
En el servidor:
Navegadores
Lenguajes de programacin
Servidores
Lenguajes de programacin
Gestores de contenidos
Estndares en la web
Protocolos y Lenguajes
Accesibilidad
25
Navegadores (browsers)
Ms populares:
26
Navegadores (browsers)
Informacin de http://gs.statcounter.com/
Juan Pavn - UCM 2013-14
27
<object>
El navegador reconoce el tipo de elemento y lo ejecuta (requiere
normalmente un plugin)
Por ejemplo, un applet (<applet> est deprecated desde HTML 4.0)
<OBJECT
classid="clsid:8AD9C840044E11D1B3E900805F499D93"
width="200"height="200">
<PARAMname="code"value="Applet1.class">
</OBJECT>
<script>
DHTML (Dynamic HTML): HTML donde se ejecuta un cdigo de un
lenguaje de script (como JavaScript)
Ejemplo:
<scripttype="text/javascript">
alert("Hola Mundo");
</script>
28
http://w3techs.com
29
Tecnologas de script
JavaScript
30
Tecnologas de script
31
Libreras JavaScript
90.2%: JQuery
http://w3techs.com
8.1%:
6.1%:
5.1%:
4.7%:
2.5%:
MooTools
Prototype
ASP.NET Ajax
Script.aculo.us
YUI Library
32
33
Servidores Web
Estados
Datos
Cdigos de error
Documentos HTML
Ficheros multimedia
Aplicaciones CGI
Apache (apache.org)
El ms estndar en linux (tambin funciona en windows)
Internet Information Server (IIS)
Solo para windows, basado en la tecnologa .NET
Nginx (nginx.org)
Muy ligero y escalable, aunque menos verstil que Apache
34
Servidores Web
http://w3techs.com
Juan Pavn - UCM 2013-14
35
Servidores Web
http://w3techs.com
Juan Pavn - UCM 2013-14
36
37
http://w3techs.com
38
Gestores de contenidos
Aplicaciones
39
Gestores de contenidos
68,2 %: ninguno
http://w3techs.com
17,4%(54,8%): WordPress
2,8%(8,7%): Joomla
2,3%(7,2%): Drupal
1,1%(3,5%): vBulletin
1,1%(3,5 %): Blogger
40
41
Estndares de la Web
http://www.ietf.org/
Utiliza el mecanismo de Request for Comments (RFC)
Documentos que contienen las descripciones tcnicas necesarias
para el funcionamiento de todos los servicios de Internet
Tambin hay RFC de carcter simplemente informativo
Ejemplo: http://www.arrakis.es/~pjleon/rfc-es/rfc/rfc2223-es.txt
http://www.w3.org
http://www.w3c.es/ sitio espaol
Ms de 400 organizaciones
42
Uso de HTML/XHTML
62,2%
38,8%
http://w3techs.com
Juan Pavn - UCM 2013-14
43
XML
44
Xquery
XPointer y Xfragments
XSchema
45
Xforms
VoiceXML
MathML
ebXML
46
XML-Signature
Firma digital
47
JSON
JSON Schema
48
Tecnologas multimedia
49
Tecnologas multimedia
http://www.croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg
50
Tecnologas multimedia
51
Internacionalizacin
Unicode/ISO 10646
En HTML: lang="es"
Se recomienda indicar el idioma del documento antes del <HEAD>
Y cada vez que se cambie de idioma a lo largo del texto de la pgina
En XML: xml:lang="es"
52
Persian; Czech;
0,80% 0,60%
Dutch;1,10%
Turkish;1,30%
Italian;1,60%
Polish;1,70%
Portuguese;2,30%
Swedish;0,60%
Otros;
3,90%
Chinese;
4,40%
French;4,60%
Japanese;4,60%
English;54,90%
Spanish;
4,60%
Russian;
5,40%
German;
6,50%
http://w3techs.com
53
Accesibilidad
http://www.w3.org/WAI/
Guas y herramientas para facilitar la accesibilidad de los sitios Web
54
55
Web 2.0
Ejemplos:
56
Web 2.0
57
Servicios Web
UDDI
Registry
Servidor
Cliente
3. Invoca el servicio web
58
Web semntica
59
Web mvil
http://www.w3.org/Mobile/
60
Web mvil
El Pas 10 ENE 2013, Fuente: La sociedad de la informacin en Espaa 2012, Fundacin Telefnica.
61
Aplicaciones Web / Sistemas Web
Web ubicua
Nuevas aplicaciones
Conectar una cmara de fotos a una impresora cercana
Usar el mvil para dar una presentacin con un proyector
inalmbrico
Descubrimiento y coordinacin dinmica de los recursos
UPnP (Universal Plug and Play)
Jini
WSD (Web services for devices)
Inteligencia ambiental
Agentes inteligentes
62
Evolucin de la Web
63
http://www.w3.org/2004/10/RecsFigure.png
Juan Pavn - UCM 2013-14
64
Bibliografa
James Marshall. HTTP Made Really Easy. A Practical Guide to Writing Clients and
Servers. http://www.jmarshall.com/easy/http/
Adam Shostack. An Overview of SHTTP.
http://www.homeport.org/adam/shttp.html
Cursos variados sobre temas relacionados con la web, con licencia Creative
Commons: http://www.mclibre.org/consultar.html
Curso online de la Univ. Standford:
http://openclassroom.stanford.edu/MainFolder/CoursePage.php?course=WebAp
plications
Estndares
65