01 Intro Tecnologias Web

Programacion de Aplicaciones Web
Introduccion a las Tecnologia Web
Profesor: Ing Msc. Eddy MirandaV.

1
Protocolo HTTP Common Gateway Interface (CGI) Elementos de HTML
El protocolo HTTP
HTTP es un protocolo de aplicacin para transferencia de hipertexto, basado en peticiones de URL URL (Universal Resource Locator) = puntero a un recurso particular, habitualmente en Internet Formato:
protocolo : servidor : puerto / archivo Al pedir un recurso se indica el protocolo de comunicacin, el host en el que se encuentra, el puerto por el que se atiende y el path del recurso dentro del servidor web
Ejemplos:
http://java.sun.com/products/servlet/index.html mailto:alguien@servidor.com file:///etc/fstab
HTTP (HyperText Transfer Protocol) es un protocolo para sistemas distribuidos de informacin hipermedia Es de facto el protocolo de comunicacin en la Web Implementado sobre TCP/IP Es un protocolo sin estado (stateless), basado en peticiones y respuestas Define los tipos de peticiones que los clientes pueden enviar y el formato y estructura de las respuestas
HTTP 1.0 (RFC 1945) define GET, POST y HEAD HTTP 1.1 (RFC 2068) aade OPTIONS, PUT, TRACE y CONNECT
Tambin define una estructura de meta datos, en forma de cabeceras
Web Browser Cliente
Dame /index.html Aqu lo tienes...
Servidor Web HTTP/1.0
Dame /index.html Web Browser Cliente Aqu lo tienes... Ahora dame logo.gif Aqu lo tienes...
6
Servidor Web HTTP/1.1
Puede comprobarse el funcionamiento de HTTP con el comando telnet:

bash-2.04$ telnet www.yahoo.com 80 Trying 216.32.74.50... Connected to www.yahoo.akadns.net. Escape character is '^]'. GET / HTTP/1.0 HTTP/1.0 200 OK Content-Length: 15582 Content-Type: text/html <html><head><title>Yahoo!</title><base href=http://www.yahoo.com/><meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ ratingsv01.html" l gen true for "http://www.yahoo.com" r (n 0 s 0 v 0 l))'></head><body><center><form action=http://search.yahoo.com/bin/search><map name=m><area coords="0,0,52,52" href=r/a1><area coords="53,0,121,52" href=r/ p1><area coords="122,0,191,52" href=r/m1><area ...
Es el tipo de peticin ms simple y usado Se suele usar para recuperar recursos estticos del servidor Formato:
http://servidor/index.html GET /index.html HTTP/1.1
Puede usarse para recuperar recursos dinmicos enviando parmetros al servidor:

http://www.servidor.com/contDinamico?param=valor
Los parmetros van codificados en la URL
Se usa para recuperar metadatos de un recurso del servidor: tipo MIME, tamao, fecha de ltima modificacin... El servidor slo devuelve cabeceras (nunca el cuerpo) Formato:
HEAD /index.html HTTP/1.1
Se usa para implementar cachs de navegadores, informar al usuario del tamao del recurso antes de intentar recuperarlo, etc...
Se usa para mandar parmetros al servidor Normalmente sirve para recuperar recursos generados dinmicamente Su funcionamiento es igual al de GET, slo que los parmetros se envan en el cuerpo de la peticin, es decir, no son visibles en la URL.
10
OPTIONS Para preguntar al servidor sobre las funciones de proporciona PUT Mtodo complementario de GET, se usa para almacenar el cuerpo de la peticin en el servidor (en la URL indicada) DELETE Para borrar documentos del servidor
TRACE Para trazar la ruta de una peticin a travs de proxies y firewalls. Su mayor utilidad es la depuracin de redes complejas.
11
La primera lnea de la respuesta del servidor tiene el formato:

protocolo cdigo-de-estado descripcin HTTP/1.1 200 OK
Despus el servidor devolver las cabeceras de la respuesta Y finalmente el cuerpo de la respuesta Despus de enviar el cuerpo de la respuesta el servidor cierra la conexin del cliente, a no ser que el navegador haya enviado la cabecera Connection: KeepAlive, en cuyo caso el servidor puede mantener la conexin abierta
12
Rangos de repuesta del servidor: 100-199 200-299 300-399 400-499 500-599 Informacin Peticin procesada con xito Peticin redirigida Peticin incompleta Errores del servidor
13
Son meta datos que se envan tanto en la peticin como en la respuesta. Hay cuatro tipos: Generales: Informacin no relacionada con el cliente, el servidor o el protocolo HTTP. Peticin: Formatos de documento preferidos por el navegador y parmetros para el servidor. Respuesta: Informacin del servidor. Entidad: Informacin sobre los datos transferidos entre el cliente y el servidor.
14
Son cabeceras que se aplican tanto a mensajes de peticin como de respuesta, pero no dan informacin sobre la entidad que se est transmitiendo Proporcionan informacin sobre: Control de cach Cache-Control: no-cache Control de la conexin Connection: close Fechas Date: fecha-en-formato-rfc1123 Codificacin de la transferencia Transfer-Encoding: tipo Protocolos soportados Upgrade: HTTP/1.1
15
Permiten al navegador pasar informacin adicional al servidor sobre la peticin o sobre el propio navegador Proporcionan informacin sobre: El propio navegador (User-Agent) Tipos MIME, encoding, mapas de caracteres, idiomas que est dispuesto a aceptar el navegador (Accept, Accept-Charset, Accept-Encoding, Accept-Language...) Comportamiento que espera el navegador del servidor, si el servidor no puede adaptarse debe devolver un cdigo de error (Expect: 100-continue | otro) Peticiones condicionales; el servidor debe devolver el recurso pedido slo si se cumple la condicin indicada (If-ModifiedSince, If-Unmodified-Since, If-Range) Autorizacin (Authorization, Proxy-Authorization).
16
Dan informacin sobre el servidor que origin la respuesta Proporcionan informacin sobre: Informacin sobre la edad de la respuesta Age: segundos Si un recurso no est disponible, fecha en la que se espera que est disponible Retry-After: Fecha | segundos Informacin sobre el tipo servidor (Apache, WebSphere,...) Server: Informacin sobre el servidor El servidor necesita autorizacin para acceder al recurso pedido WWW-Authenticate: esquema dominio
17
Dan informacin sobre la entidad (recurso) que se est transfiriendo Proporcionan informacin sobre: Mtodos asociados con la entidad Allow: Mtodos Codificacin Content-Encoding: UTF-8 Idioma Content-Language: es_ES Longitud Content-Length: 1024 Seguridad e integridad Content-MD5: digest Tipo MIME Content-Type: text/xml Expiracin y fecha de modificacin Expires: fecha-rfc1123, Last-Modified: fecha-en-formato-rfc1123
18
Common Gateway Interface (CGI)
Qu es CGI?
Un modo general de funcionamiento de las aplicaciones web de servidor En vez de devolver una pgina web esttica, el servidor web devuelve el resultado de un programa Ejemplo Name=t Name=t
Web Browser
Hola, t!
Servidor Web
Hola, t!
Programa
20
Submit Formulario
Servidor
Llamada al script CGI
Cliente
Respuesta del programa CGI
Aplicacin
21
Cliente
Web browser Web form
respuesta HTTP peticin HTTP
Servidor
Script CGI Aplicacin
resultado
22
Qu lenguajes pueden usarse en los programas CGI?

Cualquiera: C/C++, Perl, Python, Java, etc. Ejemplo: Hola Mundo en Perl:
#!/usr/bin/perl print "Content-type: text/html\n\n"; print Hola, Mundo!\n";
Variables de entorno:
REMOTE_ADDR: Direccin del browser cliente SERVER_NAME: Nombre del host o direccin IP SERVER_SOFTWARE: Nombre y versin del software del servidor QUERY_STRING: Cadena de variables GET o POST
23
GET /welcome.html HTTP/1.0 Accept: text/plain Accept: text/html Accept: */* User-Agent: Browser [lnea en blanco]
24
HTTP/1.0 200 Document follows MIME-Version: 1.0 Server: CERN/3.0 Date: Sunday, 10-Nov-96 06:54:46 GMT Content-Type: text/html Content-Length: 4531 Last-Modified: Wednesday, 16-Oct-96 10:14:01 GMT <html>
25
Una forma de pasar informacin a un script CGI es con una cadena de consulta concatenada al final de la URL La cadena de consulta comienza por ? y los parmetros van separados por & Formato de parmetros: param=valor Ejemplos:
http://www.ncbi.nlm.nih.gov/blast/blast.cgi?Jform=0 http://foo/bar?param1=yo&param2=mismo&param3=hola
26
<form method=get action='http://foo/bar'> <pre> INTRODUZCA UNA PETICIN Al CGI http://foo/bar Parmetro 1 <input type='text' name='param1' width=10> Parmetro 2 <input type='text' name='param2' width=10> <input type='hidden' name='param3' value=hola'> <input type='submit' value='Enviar'> </pre> </form>
27
CGI es la solucin ms antigua para contenido web dinmico Otras alternativas

Java ServerPages (JSP: http://java.sun.com/products/jsp/) PHP (http://www.php.net/)
PHP y JSP mezclan HTML y sentencias de un lenguaje en un mismo documento que es pareseado por el servidor antes de ser entregado al cliente
Java Servlets (http://java.sun.com/products/servlet/)

Permite separar la lgica de presentacin (HTML) de la de la aplicacin Siguen usando el mismo protocolo para las peticiones (HTTP)
Microsoft ASP etc.
28
HTML
HTML es el lenguaje de publicacin de la web. Permite:

Publicar documentos con cabeceras, texto , listas, imgenes ... Recuperar informacin en-lnea va enlaces (hyperlinks). Diseo de formularios para transacciones con servicios remotos. Incluir archivos multimedia. Separacin del contenido de la vista mediante hojas de estilo (CSS). Aadir cabeceras con pequeas funciones en lenguajes de script (JavaScript).
30
Fue desarrollado por Tim Berners-Lee en el CERN (Organizacin Europea de Estudios Nucleares). Se populariz gracias al navegador Mosaic desarrollado en el NCSA (National Center for Supercomputing Applications), que fue comprado posteriormente por Microsoft para convertirse en Internet Explorer. Versiones:
HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.1 XHTML 1.0 1995, Internet Engineering Task Force (IETF). 1996, World Wide Web Consortium (W3C). 1997, World Wide Web Consortium (W3C). 1999, World Wide Web Consortium (W3C). 2000, World Wide Web Consortium (W3C).
31
Los documentos HTML tienen una nica raz indicada por la etiqueta <html> </html> El elemento raz puede contener otros dos elementos:
Cabecera: Indicada por la etiqueta <head></head>, que contiene el ttulo de la pgina, meta informacin y funciones de script. Cuerpo: Indicado por la etiqueta <body></body>, que contiene el cuerpo del documento, es decir, lo que se mostrar en la pantalla del navegador.
HTML no es sensible a maysculas, pero se recomienda usar minsculas por compatibilidad con XHTML.
32
<html> <head><title>Página HTML</title></head> <body> <h1>Cabecera del documento</h1> Primera línea del documento<br/> Segunda línea del documento<br/> <a href=http://www.otra-pagina.com>Otra Web</a> </body> </html>
33
En la cabecera de un documento HTML puede aparecer:

El ttulo del documento, que aparecer en el titulo de la ventana del navegador. Etiqueta: <title> Cdigo script que se ejecutar en el navegador. El lenguaje de script ms difundido y que puede ejecutar cualquier navegador es JavaScript. Etiqueta: <script> Meta-informacin sobre el documento. Estas etiquetas debe interpretarlas el navegador e informan sobre cosas tales como el comportamiento de la cach, tipo MIME del documento, mapas de caracteres, etc... Etiqueta: <meta>
34
El cuerpo de un documento HTML es la parte que se mostrar en el navegador <body> Muchos tipos de etiquetas de formato de texto:
Cabeceras: <h1> <h5> Alineacin: <center> Fuente: <font>, cursiva <i>, negrita <b>, subrayado <u>
La etiqueta <img src=URL>Texto Alternativo</img> se utiliza para incluir una imagen en el documento. La etiqueta <a href=URL>Texto</a> se usa para incluir enlaces a otros recursos, al usar este tipo de construccin se enviar una peticin GET.
35
HTML incluye estructuras predefinidas para la construccin de listas:

Listas numeradas, etiqueta <ol> Listas sin numerar, etiqueta <ul> Para los elementos de la lista se usar la etiqueta <li>
Ejemplo:
<ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>

36
HTML tambin tiene soporte para creacin de tablas:

Elemento raz: <table> Inicio de fila: <tr> Columna: <td>
Todos los elementos de las tablas son configurables:

Color de fondo, alineacin, espaciado
Ejemplo:
<table cellspacing="2 border="2" bgcolor="#c0c0c0"> <tr bgcolor="#ff0000"> <td>Fila 1 Col 1</td> <td>Fila 1 Col 2</td> </tr> <tr bgcolor="#ffff00"> <td>Fila 2 Col 1</td> <td>Fila 2 Col 2</td> </tr> <tr> <td>Fila 3 Col 1</td> <td>Fila 3 Col 2</td> </tr> </table>
37
Al igual que con las listas HTML define etiquetas para la generacin de formularios, para la interaccin del navegador con el servidor. Para ello HTML define los componentes visuales necesarios, as como atributos para indicar la URL a la que se enviar el formulario, as como el mtodo HTTP que se usar (GET o POST). Los valores que se introduzcan o seleccionen en los componentes del formulario llegan al servidor en forma de parmetros.
38
HTML da soporte a los formularios mediante la etiqueta <form>. Esta etiqueta debe incluir los siguientes atributos:
action, donde se indica la URL a la que se enviar el formulario. method, donde se indica al mtodo HTTP con el que se enviar el formulario. Su valor debe ser GET o POST. Si no aparece este atributo, se usar por defecto el mtodo GET.
Ejemplo:
<form action="http://www.servidor.com/cgi" method=POST">
39
Dentro de los formularios HTML se incluyen componentes para facilitar la interaccin con el usuario Las etiquetas para la generacin de componentes son:
<select> y <option> Para generar combos <input> Para generar checkboxes, radio buttons, campos de texto, botones y campos ocultos <textarea> Para generar reas de texto
Todos los componentes, excepto los botones reset y submit, deben incluir el atributo name que es el nombre del parmetro que se recibir en el servidor
40
Estn implementados por la etiqueta <input>. Existen tres tipos:

Botones de envo: se usan para enviar el formulario a la URL indicada en el atributo action:
<input type="submit" value="Enviar">
Botones de restablecimiento: se usan para devolver todos los campos de un formulario a su estado inicial:
<input type= "reset">
Botones normales: se usan junto con el modelo eventos para invocar funciones de script:
<input type= "button" name="boton" value="Botn" "javascript:enviar();"> onclick=
41
Estn implementados por la etiqueta <input>. Los check boxes se usan cuando se necesita dar dos opciones al usuario: verdadero o false, s o no, etc
<tr> <td>Enviar Notificaciones:</td> <td><input type="checkbox" name="notificaciones" checked="true"></td> </tr>
Los botones de radio se usan cuando se tienen una serie de opciones mutuamente excluyentes, hay que poner a todos los botones el mismo nombre.
<tr> <td>Das Necesarios:</td> <td> 1 <input type="radio" name="dias" checked="true value=1> 2 <input type="radio" name="dias value=2> 3 <input type="radio" name="dias value=3> </td> </tr>
42
Hay dos tipos de componentes de texto, los cuadros de texto (TextFields) y las reas de texto (TextArea), ambos permiten la escritura y la diferencia es el nmero de filas que presenta el componente; una en el caso de cuadros de texto y configurable en el caso de reas de texto. Las reas de texto estn implementadas por la etiqueta <textarea> y los cuadros de texto por <input>. Cuadros de texto:
<tr> <td>Nombre:</td> <td><input type="text" name="nombre"></td> </tr>
reas de texto: nmero de filas y de columnas configurable.

<tr> <td>Comentarios:</td> <td> <textarea cols="15" rows="3" name="comentarios"> Introduzca aqu sus comentarios </textarea> </td> </tr>
43
Los combos estn implementados por las etiquetas <select> y <option>. Se usan para presentar al usuario una serie de opciones de las que deber elegir slo una. La etiqueta <select> declara el combo y le asigna un nombre mientras que la etiqueta <option> lo rellena. Ejemplo:
<tr> <td>Cantidad:</td> <td> <select name="cantidad"> <option value="1" selected> Uno </option> <option value="3"> Tres </option> <option value="5"> Cinco </option> </select> </td> </tr>
44
Son campos que, a pesar de estar en el formulario, no aparecen en el navegador. Estn implementados por la etiqueta <input> y el atributo type="hidden". Se usan para mantener sesiones, para tener informacin de la actividad del usuario en la web, webflow, etc Ejemplo:
<input type="hidden" name="oculto" value="valor-oculto">
45
GET /?dias=2&notificaciones=on&nombre=Daniel&comentarios=Ninguno&cantidad=3&oculto=valoroculto HTTP/1.1
Este formulario, construido a partir de los ejemplos anteriores, enva la siguiente peticin al servidor (action=GET): Con la siguiente URL:
http://localhost:1234/?dias=2&notificaciones=on&nombre=Daniel&comentarios=Ninguno&cantidad=3&oculto=valor-oculto
46

01 Intro Tecnologias Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

01 Intro Tecnologias Web

Cargado por

Copyright:

Formatos disponibles

Programacion de Aplicaciones Web

Introduccion a las Tecnologia Web

Profesor: Ing Msc. Eddy MirandaV.

Protocolo HTTP Common Gateway Interface (CGI) Elementos de HTML

Tambin define una estructura de meta datos, en forma de cabeceras

Web Browser Cliente

Dame /index.html Aqu lo tienes...

Servidor Web HTTP/1.0

Servidor Web HTTP/1.1

Puede comprobarse el funcionamiento de HTTP con el comando telnet:

Puede usarse para recuperar recursos dinmicos enviando parmetros al servidor:

Los parmetros van codificados en la URL

La primera lnea de la respuesta del servidor tiene el formato:

Common Gateway Interface (CGI)

Respuesta del programa CGI

Qu lenguajes pueden usarse en los programas CGI?

CGI es la solucin ms antigua para contenido web dinmico Otras alternativas

Java Servlets (http://java.sun.com/products/servlet/)

Microsoft ASP etc.

HTML es el lenguaje de publicacin de la web. Permite:

En la cabecera de un documento HTML puede aparecer:

HTML incluye estructuras predefinidas para la construccin de listas:

<ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>

HTML tambin tiene soporte para creacin de tablas:

Todos los elementos de las tablas son configurables:

Estn implementados por la etiqueta <input>. Existen tres tipos:

reas de texto: nmero de filas y de columnas configurable.

GET /?dias=2&notificaciones=on&nombre=Daniel&comentarios=Ninguno&cantidad=3&oculto=valoroculto HTTP/1.1

También podría gustarte