Introducción al Desarrollo de Aplicaciones Web

Presentación del tema: "Introducción al Desarrollo de Aplicaciones Web"— Transcripción de la presentación:

1 Introducción al Desarrollo de Aplicaciones Web
Miguel Ángel Niño Zambrano

2 Temas Conceptos Básicos de la Web
Historia del Desarrollo de Aplicaciones Web Historia de Internet y la Web. Historia del diseño Web. Historia de la programación Web. El Internet Protocolo TCP / IP. Aplicaciones: DNS, FTP, SMTP, etc. World Wide Web (HTTP, URLs, Unicode, HTML). Servidores Web Arquitectura Cliente / Servidor. Páginas estáticas/dinámicas Servidor de Aplicaciones Servicios

3 Conceptos Básicos de la Web
Web*: El sistema de documentos interconectados por enlaces de hipertexto, que se ejecutan en Internet. 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. *

4 Historia de la Web Militar 1960: ARPANET 1972: 37 PC & Mail
1973: 1ª Conexión Internacional Leonard Kleinrock y el primer IMP. fuente: 1983: TCP / IP Académica 1986: NSFNET 1989: PC. & WWW WWW 1990: 1er Servidor & Cliente Web . 1960: Nace como una red del Departamento de Defensa de Estados Unidos desarrollada por ARPA denominada Arpanet. La red original conectaba solo cuatro computadores, de los Estados Unidos. 1972: Ya existían 37 computadores conectados a la ARPANet. En ese mismo lapso, el nombre de ARPA fue cambiado por el de DARPA (Defense Advanced Reserach Projects Agency). Ray Tomlinson de la BBN inventó el correo electrónico. En 1973, el protocolo FTP ya estaba definido e implementado, facilitando el movimiento de ficheros en ARPANET 1973: Hacen la primera conexión internacional con Inglaterra y Noruega. 1983: DARPA decidió que el TCP/IP debería ser el conjunto estandarizado de protocolos usados para conectarse a la ARPANet. Esta disponible y sin costo y así se incremento su uso por las redes. 1986: Fue creada una red muy rápida denominada NSFNET (National Science Foundation Network). 1989: Existían cerca de computadores huéspedes conectados a la INTERNET o "red de redes". 1990: la ARPANet fue disuelta oficialmente. 1989: Tim Berners-Lee creó la World Wide Web. Acuñó el término "World Wide Web“ - WWW. 1990: Desarrolló el primer servidor Web, "httpd," y el primer programa de cliente (un navegador y un editor) WorldWideWeb. Creó la primera versión del "Lenguaje de Etiquetado de Hipertexto" (HTML), lenguaje de formateo de documentos con enlaces de hipertexto que se convirtió en el formato de publicación principal para la Web. 1994: Berners-Lee fundó el Consorcio World Wide Web (W3C) en el Laboratorio de Ciencias Informática del Instituto de Tecnología de Massachusetts [MIT/LCS], en colaboración con el CERN, , donde la Web tuvo su origen (más información sobre el servidor original del CERN), con la colaboración del DARPA y de la Comisión Europea 1994: W3C & CERN. Tim Berners-Lee. Fuente:

5 Historia de la Web Comercial
1996: 1ª Recomendación (PNG) 1.0 & CSS Nivel 1 1997: El HTML 4.0 1998: XML 1.0 Crisis .COM 2000: (SVG) 1.0 2001: El Esquema XML 2002: Servicios Web Octubre de 1996: Se publica la primera Recomendación del W3C -- Gráficos de Red Portátiles (PNG) 1.0. Diciembre de 1996: Separación de contenido y estructura, se publica el CSS Nivel 1. Hojas de Estilo en Cascada. Febrero de 1997: Lanzamiento de la Iniciativa de Accesibilidad Web. Diciembre de 1997: El HTML 4.0 añade tablas, scripting, hojas de estilo, internacionalización y accesibilidad a la publicación en la Web. Febrero de 1998: El XML 1.0 promueve la interoperabilidad y el etiquetado específico de dominio. Agosto de 2000: Los Gráficos Vectoriales Escalables (SVG) 1.0 enriquecen los gráficos Web. Mayo de 2001: El Esquema XML es la pieza esencial para que XML alcance su máximo potencial. Enero 2002: El W3C lanza la Actividad de Servicios Web. Mayo 2003: El W3C adopta oficialmente su Política de Patentes libre de derechos de autor. Febrero 2004: El RDF y el OWL suponen un importante avance para las aplicaciones de Web Semántica. Marzo 2004: El W3C le da voz a la Web con VoiceXML 2.0. Diciembre 2004: El W3C describe los principios de la Arquitectura Web. Febrero de 2005: El Modelo de Caracteres supone un enfoque unificado en el uso de caracteres en la Web. Mayo de 2005: La Iniciativa de Web Móvil fue creada para facilitar el acceso a la Web móvil. Noviembre de 2005: El W3C pone en marcha un Grupo que vincula la Medicina con la Web Semántica. 2003: Patente Libre DA 2004: El RDF y el OWL Fuente: Consejo Europeo para la Investigación Nuclear – CERN – W3C 2005: Modelo Único Caracteres C. Ubicua & Web Sem. 2005: Web Móvil

6 Historia Del Desarrollo de Diseño de Aplicaciones Web
David Siegel, Libro: “Creating Killer Web Sites: The Art of Third-Generacion Site Desing”, establece tres generaciones de Sitios Web. (1996). Se puede añadir otras dos generaciones.

7 1ª Generación de Sitios Web
Ancho de banda de Modem 2,4 Kbps. Tiempo carga rápido (texto). Navegación poco estructurada. Texto escrito del ancho del monitor, saltos de línea, líneas horizontales, listas, etc. Aparece al Final las páginas con Common Gateway Interface – CGI.

8 2ª Generación de Sitios Web
Iconos que sustituyen las palabras y fondos. Banners para encabezados y pies. Listas con gráficos animados. Tiempo de carga lento. Uso de Tablas. Navegación Jerárquica. Aparecen multimedia que solicitan la instalación de un plug-in para su ejecución. CGI acceso a datos.

9 3ª Generación de Sitios Web
Tiempo de Carga rápido. Uso de Cascading Style Sheets – CSS. Se limitan a visualización en una sola página. Diseño enfocado al usuario. Pocos enlaces y desde una página principal. Principios tipográficos y empleo de metáforas. Principios de usabilidad y amigabilidad. Identidad corporativa con uso adecuado de colores. Consolidación de generación de páginas Web dinámicas. CGI extendido, aparece IDC y luego ASP, ColdFusion,PHP, JSP.

10 4ª Generación de Sitios Web
Empleo de recursos gráficos en exceso. Páginas con mucha información al tiempo. Aparece el DHTML haciendo las páginas más dinámicas. Tecnologías multimedia como Macromedia Flash. Principios de diseño de CDROM interactivos se aplican en la Web. Empleo de equipo interdisciplinar (informático, experto en contenidos, diseñador gráfico, etc.) Streaming de video y audio. Gran parte de páginas acceden a BD.

11 5ª Generación de Sitios Web
Páginas de Televisión, o TV IP.

12 Historia de la Programación Web
SGML (Standard Generalized Markup Language) llamado HTML (HyperText Markup Language) Páginas Estáticas HTML & XHTML 2.0 NAV Programación del Cliente DHTML : Scripts RUN Paginas Estáticas El principal punto flaco que inicialmente tenía este sistema consistía en que las páginas HTML eran simples ficheros colocados en un servidor Web, que eran enviadas a sus clientes tal cual, sin ninguna posibilidad de interacción con los mismos excepto, claro está, la utilización de sus hipervínculos y forzando a que cualquier actualización que se les hiciese, tenía que ser realizada editando su contenido y sobrescribiéndolo en el servidor. Tecnologías del lado del Cliente Una forma de conseguir aumentar el dinamismo de los sitios Web consistió en dotar al lenguaje HTML de la capacidad de poder incluir scripts de código escritos en diversos lenguajes (como Javascript o VBScript) que los navegadores interpretarían para, a través de ellos, modificar el aspecto de las páginas e interactuar con el navegador, a esto se le conoce como DHTML (HTML dinámico) y forma parte de las denominadas tecnologías en el lado cliente, pues requiere de un soporte directo por parte del navegador del cliente. Ahí es precisamente donde se encuentra su principal problema: Los fabricantes de navegadores nunca han llegado a un acuerdo a la hora de implementar esto, y cada uno soporta tanto diferentes lenguajes de scripts como diversas peculiaridades dentro de un mismo lenguaje, lo que hace que sea difícil la creación y mantenimiento de páginas DHTML compatibles con los navegadores más utilizados, antes Internet Explorer y Netscape Navigator, y ahora Internet Explorer y Mozilla. Tecnologías en el lado servidor Se basan en la ejecución de código en el servidor que se encargue de generar dinámicamente el contenido (páginas web, imágenes o cualquier otro tipo de información binaria) a enviar a cada cliente. Esto se realiza de forma completamente transparente al cliente, quien recibe los contenidos tal como si fuesen ficheros estáticos almacenados en el servidor, por lo que no necesita ninguna clase de soporte especial para tratarlos. Aunque hay quien puede argumentar que esta opción provoca un aumento en la carga de trabajo del servidor, lo cierto es que el alto nivel de compatibilidad que proporciona está haciendo que se convierta en la tendencia actual en el desarrollo de aplicaciones web, sobre todo debido a la proliferación de todo tipo de dispositivos con acceso a Internet (teléfonos móviles, agendas electrónicas, etc.) y con capacidades de visualización y procesamiento muy heterogéneas, cuyos navegadores suelen ser muy simples y no admitir scripts. El CGI no es un lenguaje. Es simplemente un protocolo que puede ser usado para comunicarse entre formas Web y tu programa Un script CGI puede ser escrito en cualquier lenguaje que pueda leer de STDIN, escribir en STDOUT, y leer variables de entorno como virtualmente cualquier lenguaje de programación, incluyendo C, Perl, o incluso scripts de shell. Su gran problema es que cada vez que llegue una nueva petición CGI al servidor, éste tendrá que lanzar un nuevo ejecutable para tratarla y descargarlo de memoria tras ello, lo que resulta un proceso muy costoso y que tiende a degradar mucho el rendimiento y la escalabilidad de la aplicación web. Como solución a este problema se empezó a tender a sustituir los programas CGIs por librerías que el servidor enlazase dinámicamente en su mismo espacio de memoria (DLLs) cuyos tiempos de carga y ejecución serán muy inferiores que los de programas que se ejecutan en espacios de memoria independientes, no siendo además necesaria descargarlas tras atender a cada cliente. Programación del Servidor CGI (Common Gateway Interface) DLL Páginas Dinámicas ISAPI (Information Server Application Program Interface) JSP, ColdFusion, PHP o JTHML, J2EE, JSF, ASP, ASPNET.

13 Internet

14 Protocolo TCP / IP ¿Qué?: Se encarga de llevar a cabo la conmutación de paquetes Transmission Control Protocol (TCP) Internet Protocol (IP) Protocolo: Es un conjunto de reglas para formatear, ordenar y comprimir mensajes, comprobar errores, etc. Pueden implementarse en hardware o software

15 Capas del TCP / IP Capa de Aplicación
HTTP, Telnet, FTP, SMTP, IRC, DNS Capa de Transporte TCP Capa de Internet IP Capa de Red Ethernet, Token Ring, Frame Relay, ATM La familia de protocolos TCP/IP se divide en 4 capas: Capa de red: de más bajo nivel. Representa el medio físico encargado de enviar en última instancia los 0 y 1 que componen cada mensaje. Diversas tecnologías: Ethernet, ATM… Capa de Internet (IP): Esquema de direcciones, encaminamiento de los mensajes… Capa de transporte (TCP): Envía acuses de recibo, reagrupa el mensaje en destino, vuelve a mandar los paquetes perdidos o defectuosos. No garantiza tiempos de transmisión Capa de aplicación: programas que hacen uso de los servicios proporcionados por las capas inferiores. HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), SMTP (Simple Mail Transfer Protocol).

16 Encaminamiento de Paquetes TCP / IP
Cada ordenador conectado a Internet (=Host) debe tener una dirección para poder recibir los paquetes TCP Puede ser: Estática: Fija, siempre la misma Dinámica: Por ejemplo, cada vez que nos conectamos a Internet con un módem telefónico, nuestro proveedor de Internet (ISP,Internet Service Provider) nos asigna una dirección temporal Las direcciones IP son números de 32 bits separados en cuatro partes (por ejemplo, ) Cada uno va de 0 a 255; esto nos da un total de 2^32 direcciones (algo más de cuatro mil millones) Direcciones IP: Estáticas & Dinámicas. Ej: Versión Nueva: IPv6. DNS: Asocia un nombre a una IP Ej: Se asocia a:

17 World Wide Web Permite conectar y compartir información a cualquier PC conectado a Internet. Arquitectura Cliente / Servidor. Modo de Trabajo en la Web El usuario solicita un documento tecleando su dirección en el navegador: Es lo que se denomina un URL (localizador uniforme de recursos). El cliente busca en el DNS cuál es la IP de El DNS traduce de nombres lógicos a direcciones físicas. El Navegador y servidor web comienzan un diálogo a través del protocolo HTTP (protocolo de transferencia de hipertexto) GET /HTTP/1.0 El servidor, si todo es correcto, devuelve el documento solicitado más información adicional El navegador mira el tipo de documento devuelto (MIME). Si es “text/html” es un documento HTML, lo visualiza el propio navegador. Si es otro tipo de documento se ejecutará el programa que tenga asociado, o nos preguntará si queremos guardar el documento en nuestro ordenador Nota: estos tipos MIME los podemos configurar en nuestro navegador

18 Elementos Web HTTP: (HyperText Transform Protocol) es el protocolo usado para transferir páginas Web. Protocolo sin estado. Tipos de peticiones GET, HEAD, POST, PUT, DELETE, … Define códigos de respuestas 200 – OK 400 – Bad Request 401 – Unauthorized 403 – Forbidden 404 – Not Found Unicode: Consorcio de empresas que define restricciones sobre la implementación de ISO-10646 ASCII: 7 bits Þ (0 – 127) (A)merican (S)tandard (C)ode for (I)nformation (I)nterchange. ISO (iso-latin-1), ISO (iso-latin-9), ISO (31 bits), UTF-8, UTF-16, UTF-32. URI: Uniform Resource Identifier URL: Uniform Resource Locator URN: Uniform Resource Name

19 Elementos Web Protocolo: Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea Protocolo del Web. FILE, FTP, HTTP, /, etc. Puerto: Canales que se habilitan en la tarjeta de red para escuchar y enviar información. HTTP tiene defecto: 80.

20 Servidores Web Un programa que atiende las peticiones HTTP llegadas a un puerto determinado de la máquina. También se denomina así, por extensión, a la máquina que cuenta con uno de tales programas. Ejemplos de servidores Web: Apache HTTP Server Project Internet Information Server (IIS) TomCat Server. Tipos de páginas Web: Estáticas (htm, html). Dinámicas. (CGIs, ASP, JSP, Servlets, etc.) En el siguiente capitulo se tratarán las plataformas de desarrollo de aplicaciones Web

21 Servidor de Aplicaciones
¿Qué es? Es un programa que provee la infraestructura necesaria para las aplicaciones Web empresariales ¿Qué quiere decir esto? Que los programadores van a poder dedicarse casi en exclusiva a implementar la lógica del dominio, ya que servicios de uso común, como transacciones, seguridad, persistencia, etc. ya son proporcionados por el servidor Web Se ha convertido en una pieza de software clave para cualquier empresa dedicada al comercio electrónico Es una capa intermedia (middleware) que se sitúa entre el servidor Web y las aplicaciones y bases de datos subyacentes

22 Esquema de Interacción con el Servidor de Aplicaciones
Clientes Pesados vs. Servidores. Centralizan el acceso a los recursos del negocio. Proveedores de Servicios.

23 Servicios Proporcionados por los Servidores de Aplicaciones
Gestión de la Sesión: El servidor debe mantener la información del usuario entre llamados http. Gestión automática de la carga: El servidor se encarga de llamar a otros servidores si es necesario. Gestión y Acceso a datos: Permite conexiones con diversas BD con la lógica de componentes. Permite acceso a otros tipos de datos como ERP, XML,etc. Permiten la integración de sistemas heredados. Manejo del Polling de Conexiones. Gestión Transaccional: Indispensable para las aplicaciones comerciales. Aprovechamiento de Plataformas Tecnológicas de punta: J2EE y .NET.

24 Bibliografía http://html.rincondelvago.com/arpanet.html.
consultado 25/08/2008. Sergio Lujan Mora. Programación de Aplicaciones Web: historia, principios básicos y clientes Web. Octubre de 2002. CiberAula. Carlos Alberto Cobos. Curso de Desarrollo de Cliente Inteligente. Curso de Java Script.