Programación Web

Unidad 2. Introducción a las

tecnologías 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.
• Las principales etiquetas de HTML son:

• Clic aquí para abrir el archivo de

etiquetas.
 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.
 ¿Qué es XML?
• Proporciona un método uniforme para describir e intercambiar datos
estructurados.
• Podemos definir nuestros propios elementos y atributos.
• Los elementos pueden anidarse.

Atributos

Instrucción de
procesamiento <?xml version="1.0"?>
<authors>
<author ID="1">
Elementos
<name>Jay</name>
</author>
<!-- There are more authors. --> Comentarios
</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.