Introducción al

Desarrollo de Aplicaciones Web

Miguel Ángel Niño Zambrano

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

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.

*http://es.wikipedia.org/wiki/Web

Historia de la Web

Leonard Kleinrock y el primer IMP. fuente: http://www.lk.cs.ucla.edu/personal_history.html

1960: ARPANET

1972: 37 PC & Mail

1973: 1ª Conexión Internacional

1983: TCP / IP1986: NSFNET

1989: 10.000 PC. & WWW

1990: 1er Servidor & Cliente Web .

1994: W3C & CERN.

Tim Berners-Lee. Fuente: http://www.zator.com/Internet/A5_1.htm

Militar

Académica

WWW

Historia de la Web

Consejo Europeo para la Investigación Nuclear – CERN – W3C

1996: 1ª Recomendación (PNG) 1.0 & CSS Nivel 1

1997: El HTML 4.0

1998: XML 1.0

2000: (SVG) 1.0

2001: El Esquema XML

2002: Servicios Web

2003: Patente Libre DA

2004: El RDF y el OWLFuente: http://es.wikipedia.org/wiki/CERN

2005: Modelo Único Caracteres

2005: Web Móvil

Comercial

Crisis .COM

C. Ubicua & Web Sem.

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.

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.

1992 - 1994

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.1994 - 1995

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.1996 - 1998

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.1999 - 2005

5ª Generación de Sitios Web

– Páginas de Televisión, o TV IP.

2005 - 2008

Historia de la Programación Web

Páginas Estáticas

Programación del Cliente

Programación del Servidor

SGML (Standard Generalized Markup Language) llamado HTML (HyperText Markup Language)

HTML 4.0.1 & XHTML 2.0

DHTML : Scripts

Páginas Dinámicas

CGI (Common Gateway Interface)

RUN

ISAPI (Information Server Application Program Interface)

NAV

DLL

JSP, ColdFusion, PHP o JTHML, J2EE, JSF, ASP, ASPNET.

Internet

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

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

Encaminamiento de Paquetes TCP / IP

Direcciones IP: Estáticas & Dinámicas.Ej: 200.10.25.100Versión Nueva: IPv6.

DNS: Asocia un nombre a una IPEj: http://atenea.unicauca.edu.coSe asocia a: 10.200.1.129

World Wide Web

• Permite conectar y compartir información a cualquier PC conectado a Internet.

• Arquitectura Cliente / Servidor.

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-8859-1 (iso-latin-1), ISO-8859-15 (iso-latin-9), ISO-10646 (31 bits),

UTF-8, UTF-16, UTF-32.• URI: Uniform Resource Identifier

– URL: Uniform Resource Locator– URN: Uniform Resource Name

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.

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

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

Esquema de Interacción con el Servidor de Aplicaciones

• Clientes Pesados vs. Servidores.

• Centralizan el acceso a los recursos del negocio.

• Proveedores de Servicios.

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.

Bibliografía

• http://html.rincondelvago.com/arpanet.html.• http://es.wikipedia.org/wiki/Historia_de_Internet.• http://www.w3c.es/consorcio/historia, consultado

25/08/2008.• Sergio Lujan Mora. Programación de Aplicaciones Web:

historia, principios básicos y clientes Web. Octubre de 2002.

• CiberAula. http://www.ciberaula.com/curso/aspnet/que_es/.

• Carlos Alberto Cobos. Curso de Desarrollo de Cliente Inteligente. http://www.spar.unicauca.edu.co/ccobos/asignaturas/daci.

• Curso de Java Script. http://www.webestilo.com/javascript/js07.phtml.