introducción al desarrollo de aplicaciones web -...

Introducción al desarrollo de aplicaciones Web

Facultad de Ciencias de la Computación

Juan Carlos Conde R.

Web Technologies

Introducción Fundamentos Ventajas y Desventajas Arquitectura Tecnologías IDEs Metodologías

Contenido

1 Introducción

2 Fundamentos

3 Ventajas y Desventajas

4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

1 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

2 / 51


Propósito

El diseño y desarrollo de aplicaciones Web consiste en solucionar las necesidadesdel cliente utilizando sus propias ideas a través de Internet. Para esto se utilizanlas tecnologías más idóneas según la naturaleza del proyecto.

Las características principales de este tipo de aplicaciones son:

I Servicios de Internet que utilizan un navegador.

I Acceso público (tiendas virtuales, revistas digitales o portales de internet).

I Cuando el acceso es restringido se está hablando de Intranets; que sirvenpara mejorar la gestión interna de una empresa.

3 / 51


Propósito

¾Cómo desarrollar una Aplicación Web?

4 / 51


Propósito

¾Cómo desarrollar una Aplicación Web?

Tecnologías Web + Ingeniería Web

5 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

6 / 51


HTTP y HTML

El éxito espectacular de la Web se basa en dos aspectos fundamentales:

1. El protocolo HTTP. Permite una implementación simple y sencilla de unsistema de comunicaciones que permite enviar cualquier tipo de archivos,permitiendo que los servidores con poco performance atiendan miles depeticiones y reduzcan los costos de despliegue.

2. El lenguaje HTML. Proporciona un mecanismo simple de composición depáginas enlazadas altamente e�ciente.

7 / 51


HyperText Transfer Protocol

Es el protocolo base de la WWW.

I Es un protocolo simple, orientado a conexión y sin estado.

I Emplea un protocolo de comunicaciones (TCP, Transport ControlProtocol).

I Emplea un protocolo que establece un canal de comunicaciones deextremo a extremo (cliente/servidor).

8 / 51



Por el canal de comunicaciones pasa el �ujo de bytes que constituyen los datosa transferir, pudiendo llegar por diferentes vías del servidor al cliente.

Por el contrario, los protocolos de datagrama (no orientados a conexión) divi-den los datos en pequeños paquetes (datagramas) y los envían sin garantizar laentrega de los datagramas.

9 / 51



HTTP no mantiene estado, cada transferencia de datos es una conexión inde-pendiente de la anterior, hasta el punto de que para transferir una página Webse tiene que enviar el código HTML del texto y las imágenes que la componen.

En la especi�cación inicial de HTTP, se abrían y usaban tantas conexiones comocomponentes tenía la página, trans�riéndose por cada conexión un componente(el texto de la página, cada una de las imágenes, etc.).

El puerto 80

HTTP utiliza por defecto el puerto 80 (equivalente al identi�cador de conexión oTCP) para todas sus conexiones. Sin embargo, se pueden utilizar otros puertosdistintos al 80.

10 / 51



La variante de HTTP conocida como HTTPS (+Secure) utiliza el protocolo deseguridad SSL (Secure Sokets Layer) para cifrar y autenti�car el trá�co entrecliente y servidor. Utilizado principalmente en el comercio electrónico o poraquellos servidores que contienen información con�dencial.

El puerto 443

HTTPS utiliza por defecto el puerto 443.

11 / 51



De manera esquemática, el funcionamiento de HTTP es el siguiente:

12 / 51


El lenguaje HTML

Otra parte del éxito de la WWW ha sido el HyperText Markup Language.

Se trata de un lenguaje que inserta marcas en el interior del texto y que permiterepresentar de forma rica el contenido como:

I referencias a recursos (imágenes, etc.),

I enlaces a otros documentos (la característica más destacada de la WWW),

I mostrar formularios para procesarlos posteriormente,

I etc.

13 / 51


El lenguaje HTML

Actualmente se encuentra en su versión HTML5, lo cual implica funcionalidadesavanzadas de contenido.

Además se ha de�nido una versión de XML compatible con HTML (XHTML

- eXtgensible HyperText Markup Language) que proporciona un XML Schemaque permite validar el documento para comprobar si está bien formado.

14 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

15 / 51


Ventajas

Compatibilidad:

I Las aplicaciones Web utilizan el navegador del cliente como interfaz deusuario.

I El lenguaje HTML garantiza la compatibilidad en distintas plataformas.

16 / 51


Ventajas

Accesibilidad:

I El acceso remoto es un pre-requisito de diseño.

I Los dispositivos móviles igualmente están considerados.

I Hay muchas soluciones a nivel de navegador para personas condiscapacidades (lectores de texto, dispositivos de entrada, fuentes de letraajustables).

17 / 51


Retos

Las arquitecturas y técnicas en programación Web buscan:

I Máxima compatibilidad con los navegadores.

I E�ciencia del lado del servidor (soportar el máximo número de conexionesconcurrentes).

I Creación de contenidos llamativos y dinámicos sin sacri�car los dos puntosanteriores; que es donde HTML falla.

18 / 51


Retos

Se necesitan lenguajes de programación más potentes que permitan �mini� apli-caciones dentro de la Web, por ejemplo:

I Carritos de compras.

I Contador de visitas.

I Web Mail

I Registro y acceso a un sistema.

I Transferencias y operaciones bancarias.

I Etc.

19 / 51


20 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

21 / 51


De dos niveles

Arquitectura de dos niveles: Es la más simple, se tiene el nivel del �cliente� y elnivel del �servidor�.

22 / 51


De tres niveles

Arquitectura de tres niveles: El primer nivel consiste en la capa de presentaciónque incluye no sólo el navegador, sino también el servidor Web que es el re-sponsable de dar a los datos un formato adecuado. El segundo nivel se re�erehabitualmente a algún tipo de programa o script. Finalmente, el tercer nivelproporciona al segundo los datos necesarios para su ejecución.

23 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

24 / 51


Lenguajes de programaciónCLIENTE

Los programas del lado del cliente están incluidos dentro de la página HTML yse descargan desde el servidor, para ejecutarse dentro del browser.

Tecnologías y lenguajes del lado del cliente:

I * Navegadores para la Web

I * HTML

I * Javascript y Vbscript

I * Applets en Java

I * Flash (lenguaje ActionScript)

I * XML

I * PDF

I * AJAX, acrónimo de Asynchronous JavaScript And XML

25 / 51


Navegadores Web

Amaya Epiphany GaleonInternet Explorer Konqueror LynxMozilla suite navigator Mozilla Firefox Netscape NavigatorOpera Safari ShiiraMaik Navigator Chrome.

26 / 51


Tecnologías

Algunos de las tecnologías requieren de un programa especial (plug-in) instaladodel lado del usuario. Ejemplo: Adobe Flash Player.

Un complemento (o plug-in en inglés) es una aplicación que se relaciona conotra para aportarle una nueva funcionalidad y generalmente muy especi�ca.

Esta aplicación adicional es ejecutada por la aplicación principal e interactúa através de una API.

27 / 51


De�niciónSERVIDOR

Un servidor Web es un programa que implementa el protocolo HTTP.

Este protocolo pertenece a la capa de aplicación del modelo OSI y estádiseñado para transferir lo que se llama hipertextos, páginas Web o páginasHTML: textos complejos con enlaces, �guras, formularios, botones y objetos

incrustados como animaciones o reproductores de música.

28 / 51


29 / 51


De�niciónSERVIDOR

Algunos de los servidores más utilizados:

I CERN httpd

I Apache (Libre, servidor más usado del mundo)

I IIS (exclusivo para Windows)

I Resin

I Tomcat (Libre, del proyecto Jakarta de Apache)

I Geronimo (Libre, orientado a J2EE, del proyecto Jakarta de Apache,actualmente se encuentra en desarrollo).

I JBoss

I JOnAS

I Cherokee

30 / 51


Lenguajes de programaciónSERVIDOR

Se ejecutan en el servidor Web y son dependientes de la plataforma del mismo.

Se usan para acceder a recursos del servidor, como bases de datos y generaciónde contenido dinámico en páginas web.

31 / 51



Por ejemplo, el ámbito de ejecución de una página ASP.NET.

32 / 51



Algunos ejemplos de lenguajes del lado del servidor:

33 / 51


34 / 51


ACTIVIDAD: Resumen

Descargar y leer cuidadosamente el documento �Web-Based Systems�disponible en la sección de Lecturas del directorio Web del curso:

http://climate.cs.buap.mx/CondeJC/cursos/#WT

Posteriormente elaborar los siguientes incisos:

1. Un resumen (al menos 1 cuartilla).

2. Una sección de conclusiones personales que exprese el propósito de lalectura y tu punto de vista (al menos 1/3 de cuartilla).

* Presentar tarea escrita a mano en la libreta y en limpio.

35 / 51

http://climate.cs.buap.mx/CondeJC/cursos/#WT


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

36 / 51


Ambientes de desarrollo WebIntegrated Development Environment

Los ambientes de desarrollo integrado o IDE para aplicaciones Web son nu-merosos. Por lo que es importante considerar los que permitan trabajar condiferentes lenguajes para la Web.

Algunos son especí�cos para lenguajes del lado del servidor. Por ejemplo, VisualStudio solo soporta ASP.NET del lado del servidor.

Existen IDE's libres y gratuitos de buena calidad

37 / 51


Ambientes de desarrollo WebIntegrated Development Environment

En general algunos de los más utilizados son:

I Microsoft Visual Studio.

I Microsoft Web Developer Express

I Mono (para ASP.NET)

I NetBeans

I Jbuilder

I Eclipse

38 / 51


Contenido

1 Introducción

2 Fundamentos


4 Arquitectura

5 Tecnologías

6 IDEs

7 Metodologías

39 / 51


Desarrollo Webparte I

I * HDM (Hypermedia Design Model)

I * RMM (Relationship Management Method)

I * EORM (Enhanced Object Relationship Methodology)

I * OOHDM (Object-Oriented Hypermedia Design Method)

I * WSDM (Web Site Design Method)

I * SOHDM (Scenario-based Object-oriented Hypermedia DesignMethodology)

I * RNA (Relationship-Navigational Analysis)

I * HFPM (Hypermedia Flexible Process Modelling Strategy)

I * Building Web Applications with UML (Conallen)

I * WebML (Web Modelling Language)

I * UWE (UML-based Web Engineering)

I * W2000

I * Proyecto UWA (Ubiquitous Web Applications)

I * OOH (Object-Oriented Hypermedia Method)

40 / 51


Desarrollo Webparte II

Ciclo de vida clásico.

Pressman �adapta� esta metodología para el desarrollo en la Web, a lo que elllama la �Ingeniería Web�:

41 / 51


Desarrollo Webparte III

El método UWE (UML-based Web Engineering), propuesto por Koch en 2001,consta de seis modelos:

I Casos de uso. Para capturar los requisitos del sistema.

I Conceptual. Para el contenido (modelo del dominio).

I De usuario. Modelo de navegación que incluye modelos estáticos ydinámicos.

I Estructura de presentación. Modelo de �ujo de presentación.

I Abstracto. Modelo de la interfaz de usuario y del ciclo de vida del objeto.

I De adaptación. Clasi�ca los requisitos dependiendo del carácter de cadauno. Además distingue entre las fases de captura, de�nición y validaciónde requisitos

42 / 51


Desarrollo Webparte IV

En 2007 se propusieron metodologías de desarrollo Web ágil. Donde el problemafundamental fue el siguiente:

¾Cómo pasar de los requisitos de los usuarios al código de la aplicación?

En otras palabras: si tengo una buena idea de lo que mi aplicación Web debehacer, las funcionalidades esperadas por los futuros usuarios... ¾Cómo obtener lomás e�cazmente posible un código computacional operativo, completo y probadoque responda perfectamente a los requisitos?

43 / 51


Desarrollo Webparte V

Este es un esquema completo que muestra cómo, partiendo de:

1. los requisitos de los usuarios

2. formalizados por los casos de uso y

3. una maqueta de IHC, y

4. con la contribución de los diagramas de clases participantes;

se pueden conseguir diagramas de diseño a partir de los cuales se derivará elcódigo de forma bastante directa.

44 / 51


Desarrollo Webparte V

45 / 51


Aspectos de SEGURIDADparte I

Las aplicaciones Web están más expuestas a 3 tipos de ataques:

I A la computadora del usuario.

I A la información en tránsito.

I Al servidor.

Por lo que la Web debe considerar 3 niveles de seguridad:

46 / 51


Aspectos de SEGURIDADparte II

1. Los usuarios deben contar con navegadores y plataformas seguras, libresde virus y vulnerabilidades. También debe garantizarse la privacidad de losdatos del usuario.

2. Garantizar que la información en tránsito no sea leída (con�dencialidad),modi�cada o destruida por terceros. También es importante asegurar queel enlace entre cliente y servidor no pueda interrumpirse fácilmente(disponibilidad).

3. Se debe garantizar la operación continua del servidor, que los datos nosean modi�cados sin autorización (integridad) y que la información sólosea distribuida a las personas autorizadas (control de acceso).

47 / 51


Aspectos de SEGURIDADRecomendaciones

Aseguramiento del servidor

I Asegurar el servidor en una forma fundamental: el sistema operativo, yasea por medio de actualizaciones (parches) y habilitando los mecanismospropios de la plataforma.

I Garantizar la seguridad del servidor Web propiamente (IIS, Apache, etc.)

I Auditar las aplicaciones que interactúan en las dos capas anteriores(módulos y bibliotecas).

48 / 51



Asegurar la información en tránsito

I Asegurando la red físicamente (switches en lugar de hubs).

I Esconder la información (esteganografía).

I Cifrar la información (criptografía) por medio de diversos algoritmos (SSL,VPNs).

49 / 51



Asegurar el equipo del usuario

Vulnerar el equipo del usuario quizás no tenga el impacto de vulnerar el servidor,sin embargo es un problema más difícil de erradicar (1 servidor, 5000 clientes):

1. Aplicar actualizaciones (parches) al sistema operativo.

2. Uso de antivirus, �rewalls personales.

3. Educación de los usuarios.

50 / 51


"Internet es la primera cosa que la humanidad haconstruido y que no entiende, el experimento másgrande de anarquía que hemos tenido."

[Eric Schmidt]

Juan Carlos Conde [email protected]

51 / 51

introducción al desarrollo de aplicaciones web -...

Documents