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 y son
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.
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 Public Protected Private

Misma clase   
Subclase  [*] 
Clase externa en el
mismo paquete   
Clase externa en
otro paquete   
 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( "<HTML>\n" +
"<HEAD><TITLE>Hello World</TITLE></HEAD>\n" +
"<BODY>\n" +
"<H1>Hello World, + nom + </H1>\n" +
"</BODY>+
</HTML>" );
}
}
 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.
 servlet
JSP - Ejemplo
<%@ page import=“ java.util.*” %>
<html>
<head>
<title>Ejemplo de JSP</title>
</head>
<body>
compilación
<% Date date = new Date();
String hoy = DateFormat.getDateInstance().format(d);%>
<h1> Hola, <%request.getParameter(“nombre”)%></h2>
<br>
<h2>Hoy es : <%= hoy %> </h2>
</body>
</html>

fichero jsp
 JSP vs Servlet
• Servlets: Java con HTML embebido
• JSPs: HTML con Java embebido
• Semejanzas:
– JSP son una extensión de Servlets. No aporta
funcionalidades nuevas
– Un JSP compilado es un Servlet
– Misma función: construir contenido dinámico
• 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

MODELO
VISTA

cliente servidor
jsp
 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