1. Perspectiva Histórica de Internet. Internet. Red mundial de computadoras interconectadas con un conjunto de protocolos.
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.
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.
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.
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 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 Protocolo HTTP. Figura del uso del protocolo HTTP.
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.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.1 Arquitectura del WWW. Una arquitectura de 3 capas:
2.1 Arquitectura del WWW. Otra vista de la arquitectura.
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 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.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.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.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.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.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.
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.
3 Introducción al HTML. Una vista de un archivo HTML en el editor de Visual Studio.
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.
3.2 Elementos del lenguaje HTML. Las principales etiquetas de HTML son:
Clic aquí para abrir el archivo de etiquetas.
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:
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.
3.3 Tablas en HTML Ejemplo de estructura de tabla:
| Celda 1, linea 1 | Celda 2, linea 1 |
| Celda 1, linea 2 | Celda 2, linea 2 |
El resultado: Celda 1, linea 1Celda 2, linea 1 Celda 1, linea 2Celda 2, linea 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.
3.4 Formularios. Ejemplo de un formulario sencillo.
3.4 Formularios. La vista parcial HTML del formulario anterior. Se muestra solo la etiqueta < form>.
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.
4 Evolución del desarrollo de aplicaciones Web.
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.
ESTA PRESENTACIÓN CONTIENE MAS DIAPOSITIVAS DISPONIBLES EN LA VERSIÓN DE DESCARGA