INTRODUCCION AL DESARROLLO WEB

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 1Celda 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?

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

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

• Proporciona un método uniforme para describir e intercambiar datos estructurados.

• Podemos definir nuestros propios elementos y atributos.• Los elementos pueden anidarse.

Instrucción de procesamientoInstrucción de procesamiento

ElementosElementos

AtributosAtributos

ComentariosComentarios

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.