PDF de programación - Introducción a las aplicaciones WEB

Introducción a las aplicaciones WEB

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid

21 de abril de 2008

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

¿Qué es Internet? I

LAN: Local Area Network, red de ámbito local.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

¿Qué es Internet? II

WAN: Wide Area Network, red de ámbito extenso.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

¿Qué es Internet? III

WAN de ámbito global.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

¿Qué es Internet? IV

http://www.opte.org/maps/

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Servicios en Internet

Páginas WEB, sistemas de e-learning, . . . (http).

Correo electrónico (smtp).

Conexiones remotas (telnet, ssh).

Compartición de ficheros (nfs, microsoft-ds).

Mensajería instantánea (jabber, microsoft messenger, yahoo
mesenger...)

Voz sobre internet (VoIP).

Sincronización de tiempo (ntp)

Impresión (ipp)

Bases de datos.

. . . Sólo la creatividad pone límites . . .

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Aplicación Web

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Petición http

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Petición http

http://antares.sip.ucm.es/~luis/index.html

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Petición http

http://antares.sip.ucm.es/~luis/index.html

Fichero (X)HTML

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Necesidad de estándares I

¿Quién va a ser el agente del usuario de una página WEB?

Navegador gráfico: Internet Explorer, Mozilla, Ópera, Safari,
Konqueror, Epiphany, Galeon, . . . cualquier sujeto (físico o
jurídico) podría hacer un navegador.

Navegadores de texto: Lynx.

Dispositivos: Ordenador personal, PDA, impresora, teléfono
móvil, teclado braille.

Es necesario seguir una notación estándar.
No se deben usar tecnologías dependientes de un
navegador/dispositivo.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Necesidad de estándares II

¿Quién dicta los estándares?

Una compañía privada
Peligros de monopolio privado: la compañía que posea el
estándar obliga a todo el mundo a aceptar sus condiciones.

ISO (AENOR), W3C: organismos independientes

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Necesidad de estándares III

HTML 4.01 es una recomendación del Web Consortium que es

entendida por el sevidor (el que manda la página) y
el agente de usuario (el que recibe la página).

WCAG 1.0 es una recomendación del Web Consortium para la

elaboración de contenidos accesibles en la WEB.

AENOR 139803:2004 norma norma es plenamente compatible con

WCAG 1.0.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

HTML: HyperText Markup Language

Hipertexto: Texto que enlaza referencias, permite la navegación.

Lenguaje de marcado: texto plano con marcas especiales que

indican el cometido de cada parte del mismo.
LATEX: Leslie Lamport TEX(D.E. Knuth).
HTML de Tim Berners-Lee.
XML, XHTML.....

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Documento HTML I

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " " http :// www . w3 . org / TR / html4 / strict . dtd " >
< html >
< head >

< meta http - equiv = " Content - Type " content = " text / html ; charset = iso -8859 -15 " >
< title > Prueba 1 </ title >

</ head >

< body >

< h1 > Prueba 1 </ h1 >
<p > Párrafo </ p >
< ul >

< li > ítem 1 </ li >
< li > ítem 2 </ li >

</ ul >
</ body >
</ html >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Documento HTML II

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Añadiendo estilo I

< head >

. . . . . . . . . . . . . . . .
< link rel = " s t y l e s h e e t " type = " text / css " href = " estilo . css " media = " screen " >
. . . . . . . . . . . . . . . . .

</ head >

body {

background - color : # ace ;
color : black ;
font - family : sans - serif ;
padding :0;
margin :0;

}

h1 , h2 , h3 , h4 , h5 , h6 {

font - variant : small - caps ;
background - color :#99 FF33 ;
padding - left :1 em ;
padding - right :1 em ;
border - top : solid 1 pt black ;
border - bottom : solid 1 pt black ;
text - align : right ;

}

1
2
3
4
5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Añadiendo estilo II

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Marcas importantes

Cabeceras: h1, . . . , h6.
Párrafos: p.
Listas: ol, ul, dl.
Tablas: table.
Enlaces: a.
Imágenes: img.
Formularios: form.
Marcas de formato: span, div.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Java Servlets I

¿Qué es un programa?

input

Programa

output

En pascal:

program h o l a M u n d o ( input , output );
var

nombre : String ;

begin

readLn ( nombre );
writeLn ( ’ Hola ’ , nombre );

end .

1
2
3
4
5
6
7

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Java Servlets II

Un Servlet:

input −→ HttpServletRequest
output −→ HttpServletResponse

import javax . servlet .*;
import javax . servlet . http .*;
import java . io .*;
public class H o l a M u n d o extends H t t p S e r v l e t {

public final void doGet ( final H t t p S e r v l e t R e q u e s t request ,

final H t t p S e r v l e t R e s p o n s e r e s p o n s e )

throws S e r v l e t E x c e p t i o n , I O E x c e p t i o n {
S e r v l e t O u t p u t S t r e a m out = r e s p o n s e . g e t O u t p u t S t r e a m ();
String nombre = request . g e t P a r a m t e r ( " nombre " );
r e s p o n s e . s e t C o n t e n t T y p e ( " text / html " );
if ( nombre == null ) {

out . println ( " <p > Hola Mundo </ p > " );

} else {

out . println ( " <p > Hola " + nombre + " </p > " );

}

}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB

Java Servlets III

Los severlet son controlados por servidor de aplicaciones.
Tomcat: http://jakarta.apache.org/tomcat/index.html
Cuando una petición llega

1 Si el objeto de la clase no ha sido creado

1 Carga la clase
2 Crea el objeto
3 Invoca el método init.

2 Llama al método service (doGet o doPost).

3 Si debe eliminar al servlet llama al método destroy.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

Introducción a las aplicaciones WEB