Programaci

n Web

INSTITUTO TECNOLGICO
SUPERIOR DE XALAPA

EVOLUCIN DE
LAS
APLICACIONES
WEB
Daniel Enrique
de la Cerda Rocha

Aplicacin
usuarios pueden utilizar accediendo a un
servidor web a travs de Internet o de
Web
una intranet mediante un navegador.
Es una aplicacin de software que
codifica en
un lenguaje soportado
por los navegadores
web.

se

Las
aplicaciones
web
son
populares debido a lo prctico del
navegador como cliente ligero, a
la independencia del sistema
operativo, as como a la facilidad
para
actualizar
y
mantener
aplicaciones sin distribuir e
instalar software a miles de

Como Funciona . . .
1. La informacin es enviada a un servidor
2. Se conecta con el servidor mediante el protocolo tcp-ip
3. El servidor toma la informacin en una aplicacin que puede
ser programada en php, asp, ruby, python ,java, perl
4. El servidor retorna la
informacin y el
explorador lo procesa
de nuevo y lo codifica
segn sea su
programacin

rspectiva Histrica de Internet

Internet.
Red mundial de computadoras
interconectadas con un conjunto de
protocolos.

Internet
Es un conjunto descentralizado de
redes
de
comunicacin
interconectadas, que utilizan la
familia de protocolos TCP/IP,
garantizando que las redes fsicas
heterogneas que la componen
funcionen como una red lgica
nica, de alcance mundial.

Algunos servicios de Internet:

Web (WWW o World Wide Web).
Archivos de hipertexto.
Correo electrnico (protocolo
SMTP).
Transmisin de archivos (FTP y
P2P).
Conversaciones en lnea chat
(IRC).
Telefona (VoIP).
Televisin (IPTV).
Acceso remoto a mquinas (SSH y
Telnet).

WWW.
Uno de los servicios ofertados en la red
Internet. Mucha gente lo confunde con
el concepto de Internet.

Protocolo HTTP.

Hyper Text Transfer Protocol (Protocolo

de transferencia de hipertexto).

Se usa para la transmisin de archivos

de hipertexto (documentos HTML y
multimedia) en Internet. Es decir, se usa
en cada transaccin de la Web.

Protocolo HTTP.
HTTP define la sintaxis y la semntica que
utilizan los elementos software de la
arquitectura web (clientes, servidores, proxies
)
para comunicarse. Es un protocolo orientado a
transacciones y sigue el esquema peticinrespuesta entre un cliente y un servidor.
A la informacin transmitida se la llama
recurso y se la identifica mediante un URL.

Figura del uso del protocolo HTTP.

Arquitectura del WWW.

Arquitectura Web cliente /
servidor.
Cliente. Ejecuta un interprete de
HTML.
Servidor. Controla el acceso, sirve
la pgina solicitada, y puede
ejecutar aplicaciones especiales
(ej. Procesar formularios).
Backend. Entrega datos al servidor.
Servidor de aplicaciones. Enlaza el
servidor a la base de datos.

Arquitectura del WWW.

Una arquitectura de 3 capas:

URL

URL (Uniform Resources Location o

Localizador uniforme de
recursos).

Es una secuencia de caracteres, de

acuerdo a un formato estndar,
que se usa para nombrar recursos,
como documentos e imgenes en
Internet, por su localizacin.

El URL de un recurso de informacin es su

direccin en Internet, la cual permite que el
navegador la encuentre y la muestre de forma
adecuada.

Mtodos HTTP

HTTP es un protocolo que no maneja

persistencia (sin estado), es decir no
almacena informacin sobre sus
conexiones, envos, recepciones,
destinatarios, receptores, etc.

Lista de mtodos.
1. GET. Devuelve el recurso identificado
en la URL pedida.
2. HEAD. Funciona como el GET, pero
sin que el servidor devuelva el
cuerpo del mensaje. Es decir, slo se
devuelve la informacin de cabecera.
3. POST. Indica al servidor que se
prepare para recibir informacin del
cliente. Suele usarse para enviar
informacin desde formularios.
4. PUT. Enva el recurso identificado en
la URL desde el cliente hacia el
servidor.

Continuacin lista de mtodos

5. OPTIONS. Pide informacin sobre las
caractersticas de comunicacin
proporcionadas por el servidor. Le permite
al cliente negociar los parmetros de
comunicacin.
6. TRACE. Inicia un ciclo de mensajes de
peticin. Se usa para depuracin y permite
al cliente ver lo que el servidor recibe en el
otro lado.
7. DELETE. Solicita al servidor que borre el
recurso identificado con el URL.
8. CONNECT. Este mtodo se reserva para uso
con proxys. Permitir que un proxy pueda

Para manejar la persistencia HTTP,

puede usar las cookies.
Una cookie es un fragmento de
informacin que se almacena en el
disco duro del visitante de una
pgina web a travs de su navegador,
a peticin del servidor de la pgina.
Esta informacin puede ser luego
recuperada
por
el
servidor
en
posteriores visitas.

Uso de las cookies.

Llevar control de usuarios.
Ofrecer opciones de diseo.
Conseguir informacin sobre
hbitos de navegacin del usuario.

Se pueden administrar con

Javascript.

Introduccin al HTML.
El HTML, en ingls HyperText
Markup Language (lenguaje de
marcas de hipertexto), es un
lenguaje de etiquetas (o marcas)
diseado para estructurar textos
y presentarlos en forma de
hipertexto, que es el formato
estndar de las pginas Web.

Introduccin al HTML.
Una vista de un archivo HTML en el
editor de Visual Studio.

HTML como un tipo SGML

SGML son las siglas de Standard
Generalized Markup Language o "
Lenguaje de Marcado Generalizado".
Consiste en un sistema para la
organizacin
y
etiquetado
de
documentos.
El
lenguaje
SGML
sirve
para
especificar las reglas de etiquetado
de documentos y no impone en s
ningn conjunto de etiquetas en
especial.
El lenguaje HTML est definido en
trminos del SGML.

Elementos del lenguaje HTML.

Frames o marcos.
Permiten definir divisiones en la pgina
HTML. til para colocar el men de
navegacin.
Normalmente permanece siempre a la
vista el men de navegacin y lo que
cambia es el contenido de la ventana
principal.

Ejemplo con frames o marcos

La vista del archivo anterior en el

browser.

Ejemplo con frames.

Las opciones de navegacin en el
men, indica en la etiqueta de
referencia, que las pginas se
mostrarn en la ventana principal.
Ejemplo:

Tablas en HTML
Permiten el acomodo adecuado del contenido de la
pgina. Debido a que en las pginas Web no es
posible usar coordenadas de pantalla para colocar
elementos.
Ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Celda 1, linea 1Celda 2, linea 1
Celda 1, linea 2Celda 2, linea 2

Formularios.
Un formulario HTML permite que el
usuario ingrese datos y que estos
sean enviados al servidor.
Normalmente los datos sern
almacenados en una base de
datos.

La vista parcial HTML del formulario

anterior. Se muestra solo la etiqueta
<form>.

2.4 Evolucin del desarrollo de

aplicaciones Web.

Informativos y contenido esttico (HTML esttico).

DHTML (D de dinmico), que incluye la posibilidad de
incluir comportamiento dinmico en la pgina. Ejemplo:
mens, hojas de estilo.
Lenguajes de programacin del lado del cliente como
Javascript, Vbscript, Applets (Java).
Incorporacin de multimedia (Flash, SilverLigth).
Lenguajes de programacin del lado del servidor (tecnologa
CGI).
Lenguajes de programacin del lado del servidor de
siguiente generacin (ASP, PHP, JSP, etc.).
Desarrollo de tecnologa para la seguridad (uso de claves,
encriptacin).
Aplicaciones en Web como Comercio Electrnico.
E-Government, E-procurement, Internet banking, etc.
Servicios Web.

2.4 Evolucin del desarrollo de

aplicaciones Web.

2.5 Hojas de estilo en cascada e

introduccin al XML.

Las hojas de estilo en cascada

(Cascading Style Sheets, CSS) son un
lenguaje formal usado para definir la
presentacin de un documento
estructurado escrito en HTML o XML (y
por extensin en XHTML).

Hojas de estilo en
cascada.

Hojas de estilo en VS 2005

En la opcin para agregar nuevo elemento al proyecto. Sugerencia tener

una carpeta para las hojas de estilo.

Hojas de estilo en VS 2005

Se cuenta con un dilogo para definir el formato del estilo.

Hojas de estilo en VS 2005

Una vez seleccionado el formato para los

diferentes elementos (body, table, h1, h2, etc.),
se puede aplicar esta hoja de estilos a la
pgina.
Para aplicar el estilo simplemente se selecciona
el archivo de estilos, y se arrastra y coloca en la
pgina donde se quiere aplicar dicho estilo.
Demostracin con una hoja de estilos en VS
2005.

XML

XML, en ingls Extensible Markup

Language (lenguaje de marcas
ampliable), es un metalenguaje extensible
de etiquetas desarrollado por el
World Wide Web Consortium (W3C). Es una
simplificacin y adaptacin del SGML y
permite definir la gramtica de lenguajes
especficos (de la misma manera que HTML
es a su vez un lenguaje definido por SGML).
Actualmente es un estndar para compartir
datos en la Web.

Qu es XML?

Proporciona un mtodo uniforme para describir e intercambiar datos

estructurados.
Podemos definir nuestros propios elementos y atributos.
Los elementos pueden anidarse.
Atributos
Atributos
Instruccin
Instruccin de
de
procesamiento
procesamiento

Elementos
Elementos

<?xml
<?xml version="1.0"?>
version="1.0"?>
<authors>
<authors>
<author
<author ID="1">
ID="1">
<name>Jay</name>
<name>Jay</name>
</author>
</author>
<!-<!-- There
There are
are more
more authors.
authors. -->
-->
</authors>
</authors>

Comentarios
Comentarios

XML

Otro ejemplo de archivo XML.

Agregar un archivo XML en VS

2005

Vista de un archivo XML en VS

2005

XML.
Ejemplo:
Crear en VS2005 un archivo XML de
empleados.
Ver archivo en:
El navegador Web.
En Excel.

2.6 Publicacin de pginas HTML

en Internet.

Se cuenta en Web con varios sitios de

hospedaje gratuitos, con ms restricciones
que los servicios de pago. Un ejemplo es
Galeon.com.
Es necesario registrar los datos generales
del usuario. Se proporciona un nombre de
usuario y contrasea para el acceso.
Normalmente el servicio incluye editores
HTML, servicio FTP para subir archivos,
etc.

Un ejemplo de sitio de hospedaje gratuito es:

Publicacin de pginas.

Una vez llenado la forma de registro si todo esta correcto, abre la

pgina para trabajar con el sitio Web.
Cuando se accede posteriormente, se accede mediante el vnculo
Members Area, y muestra la pantalla para el acceso, como se
muestra.

Publicacin de pginas.

Una vez dados los datos del usuario, si todo esta correcto,
aparece la pantalla, donde se selecciona el dominio y se
hace clic en el botn Go.

Publicacin de pginas.

Para subir pginas y las dems operaciones para crear y mantener

el sitio Web, entrar a la opcin File Maneger.

Publicacin de pginas.

Dentro del File Manager ya se puede administrar el sitio. Las

pginas se deben subir a partir de la carpeta public_html como se
muestra.

Publicacin de pginas.

Observar las opciones Crear directorio, Subir archivo,

Editar, etc. Y la posibilidad de indicar el idioma.