PROGRAMACIÓN WEB Desarrollo de aplicaciones Web Jaime Grajales Puente. Universidad Libre Seccional Cali Ingeniero de Sistemas y Telecomunicaciones

Arquitectura de las aplicaciones Web. Arquitectura de dos niveles: Es la más simple, se tiene el nivel del “Cliente” y el nivel del “Servidor”.

Arquitectura Web de tres niveles: •

El primer nivel consiste en la capa de presentación que incluye no sólo el navegador, sino también el servidor web que es el responsable de dar a los datos un formato adecuado. El segundo nivel está referido habitualmente a algún tipo de programa o script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecución.

Lenguajes de programación del lado del cliente. • Los programas del lado del cliente están incluidos dentro de la página HTML, se descargan del servidor junto con este. • Los programas se ejecutan dentro del ámbito del browser.

Tecnologías y lenguajes del lado del cliente. – – – – – – – –

Navegadores para Web. HTML. Javascript y Vbscript. Applets en Java. Flash (lenguaje ActionScript). XML. PDF. AJAX, acrónimo de Asynchronous JavaScript And XML ( JavaScript asíncrono y XML).

Lenguajes del lado del cliente •

Algunos navegadores Web. – – – – – – – – – – – – –

Amaya Epiphany Galeon Internet Explorer Konqueror Lynx Mozilla suite navigator Mozilla Firefox Netscape Navigator Opera Safari Shiira Maik Navigator

Tecnologías y lenguajes del lado del cliente. • Algunos de estos lenguajes y tecnologías requieren de un programa especial (plug-in) instalado en la computadora del usuario. Ejemplo: Adobe Flash Player. • Un complemento (o plug-in en inglés) es una aplicación que se relaciona con otra para aportarle una función nueva y generalmente muy especifica. Esta aplicación adicional es ejecutada por la aplicación principal e interactúan por medio de la API.

Lenguajes de programación del lado del servidor. •

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

•

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

y

son

3.3 Lenguajes de programación del lado del servidor. • Por ejemplo, el ámbito de ejecución de una página ASP.NET.

Lenguajes de programación del lado del servidor. Algunos ejemplos de lenguajes del lado del servidor: • • • • • • •

ASP, ASP.NET (son tecnologías, soportan diferentes lenguajes como VB, C#, C++, etc.). PHP. JSP. Perl. Ruby. Python. XML.

Servidor Web • 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áginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de música.

Servidor Web. •

Algunos ejemplos: – – – – – – – – –

CERN httpd Apache (Libre, servidor más usado del mundo, según Wikipedia) IIS Resin Tomcat (Libre, del proyecto Jakarta de Apache) Geronimo (Libre, orientado a J2EE, del proyecto Jakarta de Apache, actualmente se encuentra en desarrollo) JBoss JOnAS Cherokee

Java • Historia – Lenguaje orientado a objetos creado por Sun Microsystems • Encapsulación – ocultacion de datos y metodos • Herencia • Polimorfismo – circulo.area() , cuadrado.area()

– Éxito alcanzado gracias a: • Internet: aplicaciones web • “Independencia” del S.O. y plataforma • Marketing

Plataforma Java Java Language Java Bytecode Java API Java Virtual Machine Plataform

Características • El código Java se estructura en clases – Las clases se estructuran a su vez en paquetes

• Clase Object de la que derivan las demás • Los tipos básicos no son clases – void, char, boolean, byte, int, array

• Herencia simple: – las clases derivadas pueden añadir variables y (re)definir métodos

• Herencia múltiple: interfaces – no definen ninguno de sus métodos y únicamente declaran constantes class Circulo extends Figura implements Superficie

CONTROL DE ACCESO - En variables y métodos miembro - Tres tipos: - public - protected - private Modificador acceso Misma clase Subclase Clase externa en el mismo paquete Clase externa en otro paquete

Public

   

Protected

 [*]  

Private

   

Concepto de static - Afecta a variables y métodos - Hacen referencia a la clase (no al objeto) - Se inicializan justo antes de utilizar por primera vez la clase - Llamada: - Clase.variable (objeto.variable -> no aconsejado). - Clase.metodo()

- Ej: Math.cos()

Pila de protocolos HTML HTTP TCP IP MAC - LLC FÍSICO

Modelo Cliente Servidor • Cuando un usuario desea acceder a una determinada página web, utiliza un navegador • Similarmente en el otro extremo se precisa un servidor

HTTP

Evolución • Inicialmente, únicamente información estática. – HTML estático – Aplicaciones “pobres”

• Posteriormente, ejecución de código en el lado del cliente: – HTML dinámico: JavaScript – Principalmente mejoras de interfaz

Evolución (II) • Programación en el lado del servidor: – CGIs – Páginas ASP – Páginas JSP, servlets – PHP – J2EE, .NET – Zope, Ruby on Rails –…

Evolución (III) • Web Services – Interoperabilidad entre servidores y clientes – Programación de procedimientos remotos – WSDL – SOAP, XML-RPC – WS-Security

TECNOLOGÍA SERVLET INTRODUCCIÓN • Son la respuesta de la tecnología Java a la programación CGI. • Programas Java que se ejecutan en el SERVIDOR y construyen dinámicamente una página HTML

Servlets – Caracteristicas • Tienen acceso a todas las Apis de Java: JDBC, JavaMail, etc.. • Permiten utilizar cookies y seguimiento de sesiones (HttpSession), muy útiles para el desarrollo de aplicaciones Web. • Define métodos para atender a cada una de las peticiones de HTTP que se puedan dar: doGet, doPost, doPut... • Dos Parámetros importantes: • •

HttpServletRequest: modeliza la petición del usuario y contiene información de la petición HTTP realizada HttpServletResponse: objeto que implementa la conexión de salida con el usuario

Servlets – Comparativa con CGI • Eficiencia: CGI arranca un proceso por cada llamada. En Servlets, por cada llamada se controla por un thread de Java • Potencia: Permite hacer fácilmente cosas que son complicadas de hacer con CGI normal • Portabilidad: Escrito en Java • Funcionalidad: acceso a la Api de Java • Barato: añadir soporte para servlets en un servidor web es gratuito o muy barato.

Servlets - Funcionamiento servlet

cliente

servidor

pagina.html

Servlets - Ejemplo • http://miservidor:8080/HelloWorld?nombre=Iñaki • Servlet que escribe código HTML public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); String nom = request.getParameter(“nombre”); PrintWriter out = response.getWriter(); out.println( "\n" + "<TITLE>Hello World\n" + "\n" + "

Hello World, + nom +

\n" + "+ " ); } }

Tecnología JSP – Introduccion • Es un fichero de texto con etiquetas HTML y código java embebido. • Se compilan automáticamente según se necesitan: se convierte en un servlet • Desde un JSP: uso de JavaBeans, uso de JDBC. Cualquier clase de Java.

JSP Ejemplo <%@ page import=“ java.util.*” %>

servlet

compilación <% Date date = new Date(); String hoy = DateFormat.getDateInstance().format(d);%>

Hola, <%request.getParameter(“nombre”)%>

Hoy es : <%= hoy %>

fichero jsp

JSP vs Servlet • Servlets: Java con HTML embebido • JSPs: HTML con Java embebido • Semejanzas: – JSP son una extensión de Servlets. funcionalidades nuevas – Un JSP compilado es un Servlet – Misma función: construir contenido dinámico

No

aporta

• Diferencias: – JSP separa más claramente el diseño de la lógica – Más sencillo modificar código HTML que miles de sentencias println.

JSP – SERVLET: FUNCIONAMIENTO GENERAL CONTROL CONTROL

servlet

VISTA

cliente

servidor

jsp

MODELO

IDE´s • Alternativa a la línea de comandos • Integración de herramientas: – Compilación – Depuración (necesitan el SDK) – Ant, CVS…

• Modulares: ampliables mediante plugins • Ayuda a la programación

Motor de Servlet • Aplicación que contiene la aplicación java • Necesario para ejecutar los servlet y jsp • Productos – Apache Tomcat – BEA WebLogic – IBM WebSphere – Sun/Netscape IPlanet – Macromedia JRun –…

IDE´s • Eclipse: – Open Source, impulsado por IBM – meta-IDE: sirve para muchas cosas – SWT: sustituye a AWT y Swing

• NetBeans: – Open Source, desarrollado por Sun – Generación automática de plantillas – Java 100% estándar

3.4 Ambientes para el desarrollo de aplicaciones Web. • Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy numerosos. • Considerar los que permitan trabajar con los diferentes lenguajes para Web. • Algunos son específicos para lenguajes del lado del servidor. Por ejemplo, Visual Studio solo soporta ASP.NET del lado del servidor. • Existen IDE’s de buena cantidad, libres y gratuitos de buena calidad.

3.4 Ambientes para el desarrollo de aplicaciones Web. • Algunos ejemplos de IDE para Web: – – – – – –

Microsoft Visual Studio. Microsoft Web Developer Express. Mono (para ASP.NET). NetBeans. Jbuilder. Eclipse.

Otros IDE • BlueJ (http://www.bluej.org/) - Software libre • jCreator (http://www.jcreator.com/) - Software propietario, versión gratuita disponible. • Sun Java Studio (http://wwws.sun.com/software/sundev/jde/) Software propietario, extensión de netBeans. • JBuilder (http://www.borland.com/jbuilder/) - Software propietario • IntelliJ IDEA (http://www.jetbrains.com/idea/) Software propietario

3.5 Metodologías para el desarrollo de aplicaciones Web. • Ciclo de vida clásico. Pressman, “adapta” esta metodología para el desarrollo de Web, en lo que el llama la “Ingeniería Web”: – – – –

Formulación. Planificación. Análisis (contenido, interacción, funcional, configuración). Diseño (arquitectónico, navegación, interfaz, de base de datos). – Implementación. – Pruebas.

3.5 Metodologías para el desarrollo de aplicaciones Web. • UWE UML (UML-Based Web Engineering) es una metodología de desarrollo de aplicaciones web, utilizada en la ingeniería web, prestando especial atención en sistematización y personalización (sistemas adaptativos).

UWE UML El método UWE UML consta de seis modelos: • • • • • •

Modelo de casos de uso para capturar los requisitos del sistema. Modelo conceptual para el contenido (modelo del dominio). Modelo de usuario: modelo de navegación que incluye modelos estáticos y dinámicos. Modelo de estructura de presentación, modelo de flujo de presentación. Modelo abstracto de interfaz de usuario y modelo de ciclo de vida del objeto. Modelo de adaptación.

3.6 Aspectos de seguridad. • Las aplicaciones Web están más expuestas a ataques. Se pueden tener ataques en tres niveles: – A la computadora del usuario. – Al servidor. – A la información en tránsito.

La seguridad en Web tiene 3 etapas primarias: – Seguridad de la computadora del usuario. – Seguridad del servidor Web y de los datos almacenados ahí. – Seguridad de la información que viaja entre el servidor Web y el usuario.

Seguridad de la computadora del usuario • Los usuarios deben contar con navegadores y plataformas seguras, libres de virus y vulnerabilidades. También debe garantizarse la privacidad de los datos del usuario.

Seguridad del servidor Web y de los datos almacenados ahí • Se debe garantizar la operación continua del servidor, que los datos no sean modificados sin autorización (integridad) y que la información sólo sea distribuida a las personas autorizadas (control de acceso).

Seguridad de la información que viaja entre el servidor Web y el usuario. Garantizar que la información en tránsito no sea leída (confidencialidad), modificada o destruida por terceros. También es importante asegurar que el enlace entre cliente y servidor no pueda interrumpirse fácilmente (disponibilidad).

Recomendaciones: Asegurar el servidor Se deben considerar los siguientes puntos: • Asegurar el servidor en una forma fundamental: el sistema operativo, ya sea por medio de actualizaciones (parches) y habilitando los mecanismos propios de la plataforma. • Garantizar la seguridad del servidor Web propiamente (IIS, Apache, etc.) • Auditar las aplicaciones que interactúan en las dos capas anteriores (módulos, bibliotecas).

Recomendaciones: Asegurar la información en tránsito Esto se puede lograr por diversos medios: • Asegurando la red físicamente (switches en lugar de hubs). • Esconder la información (esteganografía). • Cifrar la información (criptografía) por medio de algoritmos diversos (SSL, VPNs).

Recomendaciones: 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): • Aplicar actualizaciones (parches) al sistema operativo. • Uso de antivirus, firewalls personales. • Educación de los usuarios.

ISIS en Aplicaciones Web y CD-ROM´s

GALILEO. Enfoque, experiencias y capacidades. • Aplicaciones para Internet (Servicios de Información para el Web) •

Bases de Datos ISIS en el Web – Documentos completos

•

Aplicaciones en CD-ROM habilitadas para visualizadores Web

•

Servicios de Información para Organismos Internacionales de Cooperación y Organismos Gubernamentales

• Enfoque en herramientas tecnológicas de Fuente Abierta: • PHP • MySQL • FreeBSD • Apache • CMS - PostNuke ISIS y las tecnologías de Fuente Abierta funcionan perfectamente para servicios de información críticos y complejos en Ambientes Web

Desarrollos ISIS para el Web. Biblioteca del Sistema de Información sobre la Microempresa en América Central (SIPROMICRO – http://www.sipromicro.org/biblioteca) • Biblioteca del Servicio de Información sobre Cooperativas del Proyecto COOPNET de la OIT (Coopnet al dia – http://www.coopnetaldia.org) •

Esquema técnico de funcionamiento (wwwisis y PHP): • PHP => CGI (shell) => wwwisis y script isis => PHP • PHP => wwwisis y script isis => PHP • Seguridad y archivos de “include” en PHP • Comunicación por variables de medio ambiente • Funcionalidad de Subir Archivos en PHP • Enlace con el documento completo (PDF) a través de un Descriptor • Se integra con el Content Management System (CMS) PostNuke como uno de sus módulos

Desarrollos ISIS en CD-ROM: • La Microempresa en América Central – PROMICRO-OIT • Matcom – Formación en Gestión de Cooperativas – OIT Ginebra

Esquema técnico de funcionamiento (Wxis y Servidor Web): • Utiliza un Servidor Web => Microweb • Comunica directamente HTML con Wxis • El wxis se ejecuta como si estuviera en el Web (browser) – Método POST o enlaces (links) utilizando un script .xis • Utiliza “layers” para la visualización del detalle de los registros

r

Otras experiencias: • Se desarrolló una extensión de PHP para consultar Bases de Datos ISIS, basada en OpenIsis. • Permitirá tener aplicaciones o módulos desarrollados en PHP accediendo a Bases de Datos ISIS directamente sin pasar por un lenguaje de scripting intermedio. • Se desarrolló una aplicación multilenguaje de Gestión de Bases de Datos ISIS en wxis. • Esto perimititía a los usuarios administradores dar un mantenimiento completo a su conjunto de Bases de Datos ISIS y generar al mismo tiempo y automáticamente, aplicaciones para CD-ROM.

¿Qué nos gustaría para ISIS en un futuro? • Explorar las posibilidades de ISIS como un mecanismo de búsqueda Full-Text • ISIS como una plataforma natural de Bases de Datos XML • Módulos para conectar diferentes lenguajes de programación con Bases de Datos ISIS

Créditos: • Equipo de desarrolladores de GALILEO. • Braulio Solano • Paul Ovares • Bert Hiddink • Bireme • Todos aquellos que han contribuido con diferentes herramientas de Fuente Abierta (PHP, MySQL, Apache, PostNuke, FreeBSD, OpenIsis, etc.)

MUCHAS GRACIAS