Instituto Tecnolgico de Chihuahua II

Programacin Web itch2leonardo.galeon.com/archivo s/ProgramacionWeb.ppt

Unidad 2. Introduccin a las tecnologas Web.

2.1 Perspectiva Histrica de Internet.

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

2.1 Perspectiva Histrica de Internet.

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.

2.1 Perspectiva Histrica de Internet.

Hechos ms sobresalientes. 1961, Leonard Kleinrock public desde el MIT el primer documento sobre la teora de conmutacin de paquetes 1969, se estableci la primera conexin 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, Integracin 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 aos, la cantidad de navegantes de la Red aumentar a 2,000 millones.

2.1 Perspectiva Histrica de Internet.

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). Juegos en lnea.

2.1 Perspectiva Histrica 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 transmisin de archivos de hipertexto (documentos HTML y multimedia) en Internet. Es decir, se usa en cada transaccin de la Web.

2.2 Protocolo HTTP.

Figura del uso del protocolo HTTP.

2.2 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.

2.2.1 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.

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 estndar, que se usa para nombrar recursos, como documentos e imgenes en Internet, por su localizacin.

2.2.2 URL
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.

2.2.3 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.

2.2.3 Mtodos HTTP

Lista de mtodos. 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, slo se devuelve la informacin de cabecera. POST. Indica al servidor que se prepare para recibir informacin del cliente. Suele usarse para enviar informacin desde formularios. PUT. Enva el recurso identificado en la URL desde el cliente hacia el servidor.

2.2.3 Mtodos HTTP

Lista de mtodos. OPTIONS. Pide informacin sobre las caractersticas de comunicacin proporcionadas por el servidor. Le permite al cliente negociar los parmetros de comunicacin. 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. DELETE. Solicita al servidor que borre el recurso identificado con el URL. CONNECT. Este mtodo se reserva para uso con proxys. Permitir que un proxy pueda dinmicamente convertirse en un tnel. Por ejemplo para comunicaciones con SSL.

2.2.3 Mtodos HTTP

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.

2.2.3 Mtodos HTTP

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.

2.3 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.

2.3 Introduccin 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 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.

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 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:

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:

2.3.3 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.

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 sern 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 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 Instruccin de procesamiento

Elementos

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

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.