INTRODUCCION A LA PROGRAMACION

WEB

Programación Web
2.1 Perspectiva Histórica de Internet.
Internet.
Red mundial de computadoras interconectadas con un
conjunto de protocolos.
2.1 Perspectiva Histórica de Internet.
Internet.
Es un conjunto descentralizado de
redes de comunicación interconectadas, que utilizan la
familia de protocolos TCP/IP, garantizando que las
redes físicas heterogéneas que la componen funcionen
como una red lógica única, de alcance mundial.
2.1 Perspectiva Histórica de Internet.
Hechos más sobresalientes.

 1961, Leonard Kleinrock publicó desde el MIT el primer documento

sobre la teoría de conmutación de paquetes
 1969, se estableció la primera conexión de computadoras, conocida
como ARPANET, entre tres universidades en California y una en Utah,
Estados Unidos.
 1983, ARPANET cambió el protocolo NCP por TCP/IP.
 1989, Integración de los protocolos OSI en la arquitectura de Internet,
facilitando el uso de distintos protocolos de comunicaciones.
 2006, Internet alcanzó los mil cien millones de usuarios. Se prevé que
en diez años, la cantidad de navegantes de la Red aumentará a 2,000
millones.
2.1 Perspectiva Histórica de Internet.
Algunos servicios de Internet:
Web (WWW o World Wide Web). Archivos de
hipertexto.
Correo electrónico (protocolo SMTP).
Transmisión de archivos (FTP y P2P).
Conversaciones en línea “chat” (IRC).
Telefonía (VoIP).
Televisión (IPTV).
Acceso remoto a máquinas (SSH y Telnet).
Juegos en línea.
2.1 Perspectiva Histórica de Internet.
WWW.
Uno de los servicios ofertados en la red Internet.
Mucha gente lo confunde con el concepto de Internet.
2.2 Protocolo HTTP.
Hyper Text Transfer Protocol (Protocolo de
transferencia de hipertexto).

Se usa para la transmisión de archivos de hipertexto

(documentos HTML y multimedia) en Internet. Es
decir, se usa en cada transacción de la Web.
2.2 Protocolo HTTP.
Figura del uso del protocolo HTTP.
2.2 Protocolo HTTP.
HTTP define la sintaxis y la semántica que utilizan
los elementos software de la arquitectura web
(clientes, servidores, proxies) para comunicarse. Es
un protocolo orientado a transacciones y sigue el
esquema petición-respuesta entre un cliente y un
servidor.
A la información transmitida se la llama recurso y
se la identifica mediante un URL.
2.2.1 Arquitectura del WWW.
Arquitectura Web cliente / servidor.
Cliente. Ejecuta un interprete de HTML.
Servidor. Controla el acceso, sirve la página 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.
2.2.1 Arquitectura del WWW.
Una arquitectura de 3 capas:
2.2.1 Arquitectura del WWW.
Otra vista de la arquitectura.
2.2.2 URL
URL (Uniform Resources Location o “Localizador
uniforme de recursos”).

Es una secuencia de caracteres, de acuerdo a un

formato estándar, que se usa para nombrar recursos,
como documentos e imágenes en Internet, por su
localización.
2.2.2

URL
El URL de un recurso de información es su
dirección en Internet, la cual permite que el
navegador la encuentre y la muestre de forma
adecuada.
2.2.3 Métodos HTTP
HTTP es un protocolo que no maneja persistencia (sin
estado), es decir no almacena información sobre sus
conexiones, envíos, recepciones, destinatarios,
receptores, etc.
2.2.3 Métodos HTTP
Lista de métodos.
GET. Devuelve el recurso identificado en la URL pedida.
HEAD. Funciona como el GET, pero sin que el servidor
devuelva el cuerpo del mensaje. Es decir, sólo se devuelve la
información de cabecera.
POST. Indica al servidor que se prepare para recibir
información del cliente. Suele usarse para enviar
información desde formularios.
PUT. Envía el recurso identificado en la URL desde el
cliente hacia el servidor.
2.2.3 Métodos HTTP
Lista de métodos.
OPTIONS. Pide información sobre las características de
comunicación proporcionadas por el servidor. Le permite al
cliente negociar los parámetros de comunicación.
TRACE. Inicia un ciclo de mensajes de petición. Se usa para
depuración y permite al cliente ver lo que el servidor recibe
en el otro lado.
DELETE. Solicita al servidor que borre el recurso
identificado con el URL.
CONNECT. Este método se reserva para uso con proxys.
Permitirá que un proxy pueda dinámicamente convertirse
en un túnel. Por ejemplo para comunicaciones con SSL.
2.2.3 Métodos HTTP
Para manejar la persistencia HTTP, puede usar las
“cookies”.
Una “cookie” es un fragmento de información que se
almacena en el disco duro del visitante de una
página web a través de su navegador, a petición del
servidor de la página. Esta información puede ser
luego recuperada por el servidor en posteriores visitas.
2.2.3 Métodos HTTP
Uso de las cookies.
Llevar control de usuarios.
Ofrecer opciones de diseño.
Conseguir información sobre hábitos de navegación
del usuario.

Se pueden administrar con Javascript.

2.3 Introducción al HTML.
El HTML, en inglés HyperText Markup Language
(lenguaje de marcas de hipertexto), es un lenguaje de
etiquetas (o marcas) diseñado para estructurar textos
y presentarlos en forma de hipertexto, que es el
formato estándar de las páginas Web.
2.3 Introducción al HTML.
Una vista de un archivo HTML en el editor de Visual
Studio.
2.3.1 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
organización y etiquetado de documentos.
El lenguaje SGML sirve para especificar las reglas
de etiquetado de documentos y no impone en sí
ningún conjunto de etiquetas en especial.
El lenguaje HTML está definido en términos del
SGML.
2.3.2 Elementos del lenguaje HTML.
Frames o marcos.
Permiten definir divisiones en la página HTML. Útil
para colocar el menú de navegación.
Normalmente permanece siempre a la vista el menú
de navegación y lo que cambia es el contenido de la
ventana principal.
Ejemplo:
Ejemplo con “frames” o marcos
La vista del archivo anterior en el “browser”.
Ejemplo con “frames”.
Las opciones de navegación en el menú, indica en la
etiqueta de referencia, que las páginas se mostrarán en
la ventana principal. Ejemplo:
2.3.3 Tablas en HTML
Permiten el acomodo adecuado del contenido de la
página. Debido a que en las páginas Web no es posible
usar coordenadas de pantalla para colocar elementos.
2.3.3 Tablas en HTML
 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
2.3.4 Formularios.
Un formulario HTML permite que el usuario ingrese
datos y que estos sean enviados al servidor.
Normalmente los datos serán almacenados en una
base de datos.
2.3.4 Formularios.
Ejemplo de un formulario sencillo.
2.3.4 Formularios.
La vista parcial HTML del formulario anterior. Se
muestra solo la etiqueta <form>.
2.4 Evolución del desarrollo de
aplicaciones Web.
 Informativos y contenido estático (HTML estático).
 DHTML (“D” de dinámico), que incluye la posibilidad de incluir
comportamiento dinámico en la página. Ejemplo: menús, hojas de
estilo.
 Lenguajes de programación del lado del cliente como Javascript,
Vbscript, Applets (Java).
 Incorporación de multimedia (Flash, SilverLigth).
 Lenguajes de programación del lado del servidor (tecnología CGI).
 Lenguajes de programación del lado del servidor de siguiente
generación (ASP, PHP, JSP, etc.).
 Desarrollo de tecnología para la seguridad (uso de claves,
encriptación).
 Aplicaciones en Web como Comercio Electrónico.
 E-Government, E-procurement, Internet banking, etc.
 Servicios Web.
2.4 Evolución del desarrollo de
aplicaciones Web.
2.5 Hojas de estilo en cascada e
introducción al XML.
Las hojas de estilo en cascada (Cascading Style
Sheets, CSS) son un lenguaje formal usado para definir
la presentación de un documento estructurado escrito
en HTML o XML (y por extensión en XHTML).
Hojas de estilo en cascada.
Hojas de estilo en VS 2005
 En la opción 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 diálogo 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 página.
Para aplicar el estilo simplemente se selecciona el
archivo de estilos, y se arrastra y coloca en la página
donde se quiere aplicar dicho estilo.
Demostración con una hoja de estilos en VS 2005.
XML
XML, en inglés “Extensible Markup Language” («
lenguaje de marcas ampliable»), es un
metalenguaje extensible de etiquetas desarrollado
por el World Wide Web Consortium (W3C). Es
una simplificación y adaptación del SGML y
permite definir la gramática de lenguajes
específicos (de la misma manera que HTML es a su
vez un lenguaje definido por SGML).
Actualmente es un estándar para compartir datos
en la Web.
• Proporciona un método uniforme para describir e intercambiar datos
¿Qué es XML?
estructurados.
• Podemos definir nuestros propios elementos y atributos.
• Los elementos pueden anidarse.

Atributos
Atributos

Instrucción
Instrucción de
de
procesamiento
procesamiento <?xml
<?xml version="1.0"?>
version="1.0"?>
<authors>
<authors>
<author
<author ID="1">
ID="1">
Elementos
Elementos <name>Jay</name>
<name>Jay</name>
</author>
</author>
<!--
<!-- There
There are
are more
more authors.
authors. -->
--> Comentarios
Comentarios
</authors>
</authors>
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 Publicación de páginas HTML en
Internet.
Se cuenta en Web con varios sitios de hospedaje
gratuitos, con más 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
contraseña para el acceso.
Normalmente el servicio incluye editores HTML,
servicio FTP para subir archivos, etc.
Un ejemplo de sitio de hospedaje gratuito es:
Publicación de páginas.
 Una vez llenado la forma de registro si todo esta correcto, abre la
página para trabajar con el sitio Web.
 Cuando se accede posteriormente, se accede mediante el vínculo
“Members Area”, y muestra la pantalla para el acceso, como se muestra.
Publicación de páginas.
 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 botón “Go”.
Publicación de páginas.
 Para subir páginas y las demás operaciones para crear y mantener el
sitio Web, entrar a la opción “File Maneger”.
Publicación de páginas.
 Dentro del “File Manager” ya se puede administrar el sitio. Las páginas
se deben subir a partir de la carpeta “public_html” como se muestra.
Publicación de páginas.
 Observar las opciones “Crear directorio”, “Subir archivo”, “Editar”, etc.
Y la posibilidad de indicar el idioma.