capítulo 2 introducción teórica

Capítulo 2 Introducción teórica

“Los que se enamoran de la práctica sin la teoría son como los pilotos sin timón ni brújula, que nunca podrán

saber a dónde van.” Leonardo Da Vinci. Pintor, escultor e inventor italiano.

Plataforma Ninbox: aplicación web para integración de servicios e-Learning


2.1 IntroducciónEn este capítulo se comienza con un estudio del arte sobre las tecnologías

existentes hoy en día en la programación web, en las aplicaciones existentes más populares

y cómo se han llevado a cabo.

A continuación se realiza la introducción de la teoría necesaria para comprender

las tecnologías empleadas en las aplicaciones desarrolladas y el por qué de su empleo.

Se comienza con temas relacionados a la generación de documentos web bien formados y

compatibles con la mayoría de los sistemas con acceso a internet. Posteriormente se

continúa con conceptos más avanzados como es la programación en servidor y la

programación en cliente.

Por último se define la arquitectura MVC (Modelo Vista Controlador), utilizada

en el desarrollo de la aplicación de autenticación de este proyecto, y que supone hoy en día

uno de los modelos más cómodos y con mayor efectividad para el desarrollo de

programación web.

Carlos Serrano Sánchez



2.2 Situación de partidaA continuación se muestra una figura que representa la situación de partida de

una aplicación web.

En las aplicaciones web intervienen dos partes bien diferenciadas. Por un lado el

servidor, máquina remota donde se encuentran almacenados los datos referentes a la


Figura 1: Situación de partida



interfaz de la web y los contenidos de la misma. En esta maquina se ejecuta un servicio

servidor web, encargado de gestionar las peticiones HTTP.

Por otro lado se encuentra el cliente, que realiza dicha petición a través de su navegador.

Usualmente, introduciendo la URL de la página a la que desea acceder.

Mediante el protocolo HTTP, el navegador lanza la petición que es gestionada por el

servidor web en el cual se encuentre almacenada la página en cuestión.

Una vez el servidor web recoge la petición, solicita al intérprete de PHP que ejecute los

scripts que se encuentren relacionados con la página solicitada. Durante la ejecución de

PHP se pueden realizar consultas a base de datos, disco duro... y generación de contenido

XHTML,CSS,imágenes, código Javascript...

Una vez el intérprete termina la ejecución devuelve el resultado al servidor web que es el

encargado, en instancia última, de devolver el contenido total de la página al navegador del

cliente.

El navegador del cliente interpreta el código y genera la interfaz. Además está encargado

de ejecutar código Javascript que reciba del servidor.

Es decir, por un lado en el servidor nos encontramos con código PHP y MySQL.

Y por el lado del cliente, código Javascript para proporcionar aplicaciones ejecutadas en

cliente y XHTML,CSS... para generar la interfaz.

Todos estas tecnologías serán explicadas en los apartados posteriores.

De esta manera queda definido el flujo de comunicación en una aplicación web, desde el

punto de vista navegador-servidor.

Pero la comunicación cliente-aplicación va más allá de la tecnología empleada,

es un aspecto más comportamental, en el sentido de cómo deben interaccionar cliente y

aplicación. Cómo debe ser la interfaz, su usabilidad e incluso los servicios que debe

proporcionar la aplicación, independientemente del tipo de web que sea.

Este punto es en el que entra en juego el concepto web 2.0, que además de incluir un nuevo

tipo de comunicación basado en AJAX, que será detallado más adelante, integra ciertos

tipos de comportamientos de la aplicación, como son interacción máxima, estandarización

de mensajes, sindicación de contenidos...




Este capítulo comienza introduciendo el concepto web 2.0, una característica

que están siguiendo actualmente las aplicaciones web.

Posteriormente se explicarán las tecnologías servidor y cliente empleadas en las

aplicaciones desarrolladas y por último, la arquitectura empleada en la construcción de la

aplicación desarrollada en este proyecto , MVC (Modelo Vista Controlador ) , que supone

un patrón a seguir en la programación web.

2.2.1 Web 2.0

El estallido de la burbuja tecnológica en el otoño de 2001 marcó un momento

crucial para la web. Mucha gente concluyó que la expectación sobre la web era exagerada,

cuando de hecho las burbujas y las consiguientes crisis económicas parecen ser una

característica común de todas las revoluciones tecnológicas. Las crisis económicas marcan

típicamente el punto en el cual una tecnología en ascenso está lista para ocupar su lugar en

el escenario económico. Se descarta a los impostores, las historias de éxito verdaderas

muestran su fortaleza, y comienza a comprenderse qué separa a los unos de los otros.

El concepto de 'Web 2.0' comenzó con una sesión de 'brainstorming' realizada

entre O'Reilly y MediaLive International. Dale Dougherty, pionero de la web y

vicepresidente de O'Reilly, observaron que lejos de 'estrellarse', la web era más importante

que nunca, con apasionantes nuevas aplicaciones y con sitios web apareciendo con

sorprendente regularidad. Lo que es más, las compañías que habían sobrevivido al

desastre parecían tener algunas cosas en común.

Tras año y medio, el término 'Web 2.0' ha arraigado claramente, con más de 9,5 millones

de menciones en Google. Pero todavía existe un enorme desacuerdo sobre qué significa

Web 2.0, existiendo algunas críticas que afirman que se trata simplemente de una palabra

de moda, fruto del marketing, y sin sentido, en tanto que otros la aceptan como un nuevo

paradigma.




Los ejemplos de conversión que alumbran el concepto web2.0 son los

siguientes:

Web 1.0 Web 2.0

Doble click Google AdSense

Ofoto Flickr

Akamai BitTorrent

mp3.com Napster

Britannica Online Wikipedia

personal websites blogging

evite upcoming.org and EVDB

domain name speculation search engine optimization

page views cost per click

screen scraping web services

publishing participation

content management systems wikis

directories (taxonomy) tagging ('folksonomy')

stickiness syndication

En su conferencia, O'Reilly y Battelle resumieron los principios clave que creen

que caracterizan a las aplicaciones web 2.0: la web como plataforma; datos como el "Intel

Inside"; efectos de red conducidos por una "arquitectura de participación"; innovación y

desarrolladores independientes; pequeños modelos de negocio capaces de sindicar

servicios y contenidos; el perpetuo beta; software por encima de un solo aparato.

En general, cuando se utiliza el término web 2.0 indica una serie de aplicaciones y páginas

de Internet que utilizan la inteligencia colectiva para proporcionar servicios interactivos en

red dando al usuario el control de sus datos.

La infraestructura de la Web 2.0 es compleja y va evolucionando, pero incluye el

software de servidor, sindicación de contenidos, protocolos de mensajes, navegadores




basados en estándares, y varias aplicaciones para clientes.

En General:

El sitio no debe actuar como un "jardín cerrado": la información debe

poderse introducir y extraer fácilmente

Los usuarios deberían controlar su propia información

Basada exclusivamente en la Web: los sitios Web 2.0 con más éxito

pueden ser utilizados enteramente desde un navegador

2.2.2 Servicios web

Los protocolos de mensajes bidireccionales son uno de los elementos clave de la

infraestructura de la Web 2.0. Los dos tipos más importantes son los métodos RESTful y

SOAP. REST indica un tipo de llamada a un servicio web donde el cliente transfiere el

estado de todas las transacciones. SOAP y otros métodos similares dependen del servidor

para retener la información de estado. En ambos casos, el servicio es llamado desde una

API. A veces esta API está personalizada en función de las necesidades específicas del sitio

web, pero las APIs de los servicios web estándares (como por ejemplo escribir en un blog)

están también muy extendidos. Generalmente el lenguaje común de estos servicios web es

el XML, si bien puede haber excepciones.

Recientemente, una forma híbrida conocida como Ajax ha evolucionado para

mejorar la experiencia del usuario en las aplicaciones web basadas en el navegador. Esto

puede ser usado en webs propietarias (como en Google Maps) o en formas abiertas

utilizando una API de servicios web, una semilla de sindicación.

2.2.3 Programación servidor

La funcionalidad de la Web 2.0 se basa en la arquitectura existente de servidor




web pero con un énfasis mayor en el software dorsal. La sindicación sólo se diferencia

nominalmente de los métodos de publicación de la gestión dinámica de contenido, pero los

servicios Web requieren normalmente un soporte de bases de datos y flujo de trabajo

mucho más robusto y llegan a parecerse mucho a la funcionalidad de intranet tradicional

de un servidor de aplicaciones. El enfoque empleado hasta ahora por los fabricantes suele

ser bien un enfoque de servidor universal, el cual agrupa la mayor parte de la

funcionalidad necesaria en una única plataforma de servidor, o bien un enfoque plugin de

servidor Web con herramientas de publicación tradicionales mejoradas con interfaces API

y otras herramientas. Independientemente del enfoque elegido, no se espera que el camino

evolutivo hacia la Web 2.0 se vea alterado de forma importante por estas opciones.




2.3 Programación del lado servidorEn este capítulo se describen los conceptos teóricos empleados en el desarrollo

de este proyecto que se utilizan en un servidor web. Por un lado se encuentra el lenguaje de

programación principal (PHP) y por otro el sistema de base de datos empleado ( mySQL ).

2.3.1 PHP

En esta sección se introduce el lenguaje de programación empleado en la

plataforma Ninbox. Con este punto se intenta describir su arquitectura y funcionamiento,

así como sus características, ventajas y desventajas.

2.3.1.1 Introducción

PHP es un lenguaje de programación usado generalmente para la creación de

páginas web. Las siglas PHP significan "PHP Hypertext Pre-processor" (inicialmente PHP

Tools o Personal Home Page Tools), y se trata de un lenguaje interpretado usado para la

creación de aplicaciones para servidores, o creación de contenido dinámico para sitios web.

Últimamente también para la creación de otro tipo de programas incluyendo aplicaciones

con interfaz gráfica usando la biblioteca GTK+.

Su fácil uso y la similitud con los lenguajes más comunes de programación

estructurada, como C y Perl, permiten a la mayoría de los programadores experimentados

crear aplicaciones complejas con una curva de aprendizaje muy suave. También les

permite involucrarse con aplicaciones de contenido dinámico sin tener que aprender todo

un nuevo grupo de funciones y prácticas.

Debido al diseño de PHP, también es posible crear aplicaciones con una interfaz gráfica

para el usuario (también llamada GUI), utilizando la extensión PHP-GTK.

PHP puede ser usado desde la línea de órdenes, de la misma manera que Perl o Python,

esta versión de PHP se llama PHP CLI (Command Line Interface).




Su interpretación y ejecución se da en el servidor, en el cual se encuentra almacenado

el script, y el cliente sólo recibe el resultado de la ejecución. Cuando el cliente hace una

petición al servidor para que le envíe una página web, generada por un script PHP, el

servidor ejecuta el intérprete de PHP, el cual procesa el script solicitado que generará el

contenido de manera dinámica, pudiendo modificar el contenido a enviar; y regresa el

resultado al servidor, el cual se encarga de regresárselo al cliente. Además es posible

utilizar PHP para generar archivos PDF, Flash, así como imágenes en diferentes formatos,

entre otras cosas.

Permite la conexión a diferentes tipos de servidores de bases de datos tales como

MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite; otorgando

la posibilidad de creación de Aplicaciones web muy robustas.

Tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos tales como

UNIX, Windows y Mac OS X, y puede interactuar con los servidores de web más populares

ya que existe en versión CGI, módulo para Apache e ISAPI.

El modelo PHP puede ser visto como una alternativa al sistema de Microsoft que utiliza

ASP.NET/C#/VB.NET, a ColdFusion de la compañía Macromedia, a JSP/Java de Sun

Microsystems, y al famoso CGI/Perl.

Aunque su creación y desarrollo se da en el ámbito de los sistemas libres, bajo la licencia

GNU, existe además un IDE comercial llamado Zend Optimizer.

2.3.1.2 Ventajas

✔ Es un lenguaje multiplataforma.

✔ Capacidad de conexión con la mayoría de los manejadores de base de

datos que se utilizan en la actualidad.

✔ Leer y manipular datos desde diversas fuentes, incluyendo datos que

pueden ingresar los usuarios desde formularios HTML.

✔ Capacidad de expandir su potencial utilizando la enorme cantidad de

módulos (llamados ext's o extensiones).

✔ Posee una amplia documentación en su página oficial ( www.php.net ).




✔ Es libre, por lo que se presenta como una alternativa de fácil acceso para

todos.

✔ Permite las técnicas de Programación Orientada a Objetos.

✔ Permite crear los formularios para la web.

2.3.1.3 Uso de PHP

PHP se emplea principalmente en los siguientes entornos de trabajo:

➢ Programación de páginas web dinámicas, habitualmente en combinación

con el motor de base datos MySQL, aunque cuenta con soporte nativo

para otros motores, incluyendo el estándar ODBC, lo que amplía en gran

medida sus posibilidades de conexión.

➢ Programación en consola, al estilo de Perl o Shell scripting.

➢ Creación de aplicaciones gráficas independientes del navegador, por

medio de la combinación de PHP y GTK (GIMP Tool Kit), lo que permite

desarrollar aplicaciones de escritorio en los sistemas operativos en los

que está soportado.

2.3.1.4 Aspectos técnicos

En las versiones anteriores de PHP el parámetro register_globals estaba

habilitado, esto conllevaba un uso inadecuado e inseguro por muchos programadores que

utilizaban dichas variables sin tener en cuenta de dónde procedían y su uso correcto.

Cuando se envía un formulario a una web PHP para su posterior procesado

mediante POST o GET, si register_globals está habilidato, se produce una inyección de

código a nuestra página, eso en un principio puede producir huecos de seguridad, pero con

un uso adecuado no tiene porque crear problemas, sin embargo estaba demostrado que la

gente las utilizaba sin saber de dónde procedían.

A partir de la versión 4.2.0 estas variables fueron desactivadas por defecto.




Por este motivo se aconseja el uso de las variables de sistema, como son $GET, $POST,

$SESSION ...

Esto no asegura que no se inyecte código malicioso, pero al menos se mantiene bajo

control la procedencia de las variables.

En el caso de un formulario que contiene el campo nombre y es enviado a un

archivo PHP para su procesado , dicho archivo quedaría así con las superglobales

activadas:

<?php $nombre..... ?>

En caso de tener las superglobales desactivadas el ejemplo anterior quedaría de

la siguiente manera:

<?php $GET['nombre'] o $POST['nombre'] ....?>

Las sesiones

El apoyo que PHP proporciona para las sesiones consiste en una forma de

conservar ciertos datos a lo largo de los subsiguientes accesos, lo cual permite construir

aplicaciones más personalizadas e incrementar el atractivo del sitio web.

A cada visitante que accede a la web se le asigna un identificador único, llamado

"session id" (identificador de sesión). Éste se almacena en una cookie por parte del usuario

o se propaga en la URL.

El soporte de las sesiones le permite registrar un número arbitrario de variables

que se conservarán en las siguientes peticiones. Cuando un visitante acceda a la web, PHP

comprobará automáticamente (si session.auto_start está puesto a 1) o cuando se

especifique (de forma explícita mendiante session_start() o implícita a través de




session_register()) si se le ha enviado un "session id" específico con su petición, en cuyo

caso se recrean las variables que se habían guardado anteriormente.

Todas las variables registradas son almacenadas tras finalizar la petición. Las

variables que están indefinidas se marcan como no definidas. En los subsiguientes accesos,

no estarán definidas por el módulo de sesiones a menos que el usuario las defina más

tarde.

El código de una clase ejemplo proporcionada por php.net para el manejo de

sesiones en PHP se muestra a continuación.

<?phpclass Session { function _makeid(){ $time = time(); $ip = $_SERVER["REMOTE_ADDR"]; $agent = $_SERVER["HTTP_USER_AGENT"]; $md5 = md5($time.$ip.$agent); setcookie("SClass", $md5); return($md5); } function getid(){ $md5 = $_COOKIE['SClass']; return($md5); }

function start(){ $id = $this->getid(); if (!$id) { $id = $this->_makeid(); } } function _getfile(){ $file = $this->getid(); $file .= ".ssn"; $file = "[--PATH-TO-SESSION-FOLDER--]".$file; return($file); }




también se utilizan de modo comercial, por ejemplo si un usuario entra al menú en una

tienda on-line y suele visitar el catálogo de electrodomésticos, cuando entre un día en otra

sección, como alimentación, como ven que el cliente ha visitado habitualmente las

secciones de electrodomésticos, puede aparecer “casualmente” en la página alguna oferta

de elctrodomésticos o algún enlace...

Las Cookies se programan de un modo sencillo en PHP. (Son compatibles con

las versiones PHP3 PHP4 y PHP5).

Tienen una serie de campos, como mínimo se envía el nombre y el valor de la cookie. Otros

campos son:

➢ fecha: pueden tener una fecha de expiración. Hay que destacar que esta

fecha es un número entero, por lo que habrá que calcularla con las funciones

mktime() y time() de PHP.

➢ path: especifica el subconjunto de URLs en el servidor de origen para las

cuales se aplica la cookie.

➢ dominio: establece el dominio en el cual es válida la cookie.

➢ segura: indica si la cookie necesita una conexión segura, toma valores

enteros, si no se quiere especificar nada, poner a cero.

2.3.1.5 Características principales

Las cuatro grandes características de PHP pueden enumerarse como : velocidad,

estabilidad, seguridad y simplicidad.

Velocidad: No solo la velocidad de ejecución, la cual es importante, sino

además no crear demoras en la máquina. Por esta razón no debe requerir demasiados

recursos de sistema. PHP se integra muy bien junto a otro software, especialmente bajo




ambientes Unix, cuando se configura como módulo de Apache.

Estabilidad: La velocidad no sirve de mucho si el sistema se cae cada cierta

cantidad de ejecuciones. Ninguna aplicación es 100% libre de bugs, pero teniendo de

respaldo una increíble comunidad de programadores y usuarios es mucho mas fácil pulir

posibles fallos. PHP utiliza su propio sistema de administración de recursos y dispone de

un sofisticado método de manejo de variables, conformando un sistema robusto y estable.

Seguridad: El sistema debe poseer protecciones contra ataques. PHP provee

diferentes niveles de seguridad, estos pueden ser configurados desde el archivo .ini.

Simplicidad: Se les debe permitir a los programadores generar código

productivamente en el menor tiempo posible. Usuarios con experiencia en C y C++ podrán

utilizar PHP rápidamente.

Otra característica a tener en cuenta sería la conectividad. PHP dispone de una

amplia gama de librerías, y agregarle extensiones es muy fácil. Esto le permite a PHP ser

utilizado en muchas áreas diferentes, tales como encriptado, gráficos, XML y otras.

Ventajas adicionales de PHP

PHP se ejecuta en (casi) cualquier plataforma utilizando el mismo código

fuente, pudiendo ser compilado y ejecutado en algo así como 25 plataformas, incluyendo

diferentes versiones de Unix, Windows (95,98,NT,ME,2000,XP...) y Macs. Como en todos

los sistemas se utiliza el mismo código base, los scripts pueden ser ejecutados de manera

independiente al OS.

PHP es completamente expandible. Está compuesto de un sistema principal

(escrito por Zend), un conjunto de módulos y una variedad de extensiones de código.

PHP actualmente se puede ejecutar bajo Apache, IIS, AOLServer, Roxen

yTHTTPD. Otra alternativa es configurarlo como módulo CGI.




Puede interactuar con muchos motores de bases de datos tales como MySQL,

MS SQL, Oracle, Informix, PostgreSQL, y otros muchos.

PHP es Open Source, lo cual significa que el usuario no depende de una

compañía específica.

2.3.2 MySQL

En esta sección se introduce el sistema de base de datos que se ha empleado en

el desarrollo de este proyecto, MySQL.


MySQL es un sistema de gestión de base de datos, multihilo y multiusuario con

más de seis millones de instalaciones.

MySQL AB desarrolla MySQL como software libre en un esquema de

licenciamiento dual. Por un lado lo ofrece bajo la GNU GPL, pero empresas que quieran

incorporarlo en productos privativos pueden comprar a la empresa una licencia que les

permita ese uso. Está desarrollado en su mayor parte en ANSI C.

Al contrario de proyectos como el Apache, donde el software es desarrollado por una

comunidad pública, y el copyright del código está en poder del autor individual, MySQL

está poseído y patrocinado por una empresa privada, que posee el copyright de la mayor

parte del código. Esto es lo que posibilita el esquema de licenciamiento anteriormente

mencionado. Además de la venta de licencias privativas, la compañía ofrece soporte y

servicios. Para sus operaciones contratan trabajadores alrededor del mundo que colaboran

vía Internet. MySQL AB fue fundado por David Axmark, Allan Larsson, y Michael

Widenius.




Existen varias APIs que permiten a aplicaciones escritas en diversos lenguajes

de programación acceder a las bases de datos MySQL, incluyendo C, C++, C#, Pascal,

Delphi (vía dbExpress), Eiffel, Smalltalk, Java (con una implementación nativa del driver

de Java), Lisp, Perl, PHP, Python, Ruby, REALbasic (Mac), FreeBASIC, y Tcl; cada uno de

estos utiliza una API específica. También existe un interfaz ODBC, llamado MyODBC que

permite a cualquier lenguaje de programación que soporte ODBC comunicarse con las

bases de datos MySQL.

MySQL es muy utilizado en aplicaciones web como MediaWiki o Drupal, en

plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por herramientas de

seguimiento de errores como Bugzilla. Su popularidad como aplicación web está muy

ligada a PHP, que a menudo aparece en combinación con MySQL.

Es una base de datos muy rápida en la lectura cuando utiliza el motor no transaccional

MyISAM, pero puede provocar problemas de integridad en entornos de alta concurrencia

en la modificación. En aplicaciones web hay baja concurrencia en la modificación de datos

y en cambio el entorno es intensivo en lectura de datos, lo que hace a MySQL ideal para

este tipo de aplicaciones.

2.3.2.2 Características

MySQL es un sistema de administración de bases de datos. Una base de datos es

una colección estructurada de datos. Esta puede ser desde una simple lista de compras a

una galería de pinturas o el vasto volumen de información en un red corporativa. Para

agregar, acceder y procesar datos guardados en un computador, se necesita un

administrador como MySQL Server. Dado que los computadores son muy buenos

manejando grandes cantidades de información, los administradores de bases de datos

juegan un papel central en computación, como aplicaciones independientes o como parte

de otras aplicaciones.

MySQL es un sistema de administración relacional de bases de datos. Una base

de datos relacional archiva datos en tablas separadas en vez de colocar todos los datos en




un gran archivo. Esto permite velocidad y flexibilidad. Las tablas están conectadas por

relaciones definidas que hacen posible combinar datos de diferentes tablas sobre pedido.

MySQL es software de fuente abierta. Fuente abierta significa que es posible

para cualquier persona usarlo y modificarlo. Cualquier persona puede bajar el código

fuente de MySQL y usarlo sin pagar. Cualquier interesado puede estudiar el código fuente y

ajustarlo a sus necesidades. MySQL usa el GPL (GNU General Public License) para definir

qué puede hacer y qué no puede hacer con el software en diferentes situaciones. Si no se

ajusta al GPL o requiere introducir código MySQL en aplicaciones comerciales, se puede

comprar una versión comercial licenciada.

Características (versión 4.0):

Inicialmente, MySQL carecía de elementos considerados esenciales en las bases

de datos relacionales, tales como integridad referencial y transacciones. A pesar de ello,

atrajo a los desarrolladores de páginas web con contenido dinámico, justamente por su

simplicidad; aquellos elementos faltantes fueron llenados por la vía de las aplicaciones que

la utilizan.

Poco a poco los elementos de los que carecía MySQL están siendo incorporados tanto por

desarrollos internos, como por desarrolladores de software libre. Entre las características

disponibles en las últimas versiones se puede destacar:

➢ Amplio subconjunto del lenguaje SQL. Algunas extensiones son incluidas

igualmente.

➢ Disponibilidad en gran cantidad de plataformas y sistemas.

➢ Diferentes opciones de almacenamiento según si se desea velocidad en

las operaciones o el mayor número de operaciones disponibles.

➢ Transacciones y claves foráneas.

➢ Conectividad segura.

➢ Replicación.

➢ Búsqueda e indexación de campos de texto.




Características de la versión 5.0.22:

➢ Soporte a multiplataforma

➢ Procedimientos almacenados

➢ Triggers

➢ Soporte a VARCHAR

➢ Motores de almacenamiento independientes (MyISAM para lecturas

rápidas, InnoDB para transacciones e integridad referencial)

➢ Transacciones con InnoDB, BDB y motores de almacenamientos por

clúster

➢ Soporte SSL

➢ ...

El mapa de ruta de MySQL 5.1 indica soporte para:

➢ Particionado de la base de datos

➢ Backup en línea para todos los motores de almacenamiento

➢ Replicación segura

➢ Restricciones a nivel de columna

➢ Planificación de eventos

➢ Funciones XML

2.3.2.3 Conclusiones

MySQL Database Server es la base de datos de código fuente abierto más usada

del mundo. Su ingeniosa arquitectura lo hace extremadamente rápido y fácil de

personalizar. La extensiva reutilización del código dentro del software y una aproximación

minimalista para producir características funcionalmente ricas, ha dado lugar a un sistema

de administración de la base de datos incomparable en velocidad, compactación,

estabilidad y facilidad de despliegue. La exclusiva separación del core server del manejador

de tablas, permite funcionar a MyQSL bajo control estricto de transacciones o con acceso a




disco no transaccional ultrarrápido.

Además MySQL está bajo la licencia GNU que se ajusta perfectamente al alcance de este

proyecto.

Con MySQL tenemos la posibilidad de trabajar con bases MyISAM o InnoDB,

ésta última es una tecnología de almacenamiento de datos de fuente abierta para MySQL,

incluido como formato de tabla estándar en todas las distribuciones de MySQL AB a partir

de las versiones 4.0. Su característica principal es que soporta transacciones de tipo ACID

y bloqueo de registros e integridad referencial. InnoDB ofrece una fiabilidad y consistencia

muy superior a MyISAM.

En cambio MyISAM es la tecnología de almacenamiento de datos usada por defecto por el

sistema administrador de bases de datos relacionales MySQL. Este tipo de tablas están

basadas en el formato ISAM pero con nuevas extensiones. La principal característica de

este tipo de almacenamiento es la gran velocidad que obtiene en las consultas, ya que no

tiene que hacer comprobaciones de la integridad referencial, ni bloquear las tablas para

realizar las operaciones por la ausencia de características de atomicidad. Este tipo de tablas

está especialmente indicado para sistemas que no tienen una número elevado de

inserciones como pueden ser las páginas web.

Teniendo en cuenta el uso de la Base de datos en este sistema, la elección

óptima sería el motor MyISAM, no obstante para probar características avanzadas como

operaciones atómicas y control de integridad la versión utilizada ha sido InnoDB.

Como opción alternativa se ha estudiado PostgreSQL, que es un motor de base de datos. Es

servidor de base de datos relacional libre, liberado bajo la licencia BSD. Es una alternativa

a otros sistemas de bases de datos de código abierto (como MySQL, Firebird y MaxDB), así

como sistemas propietarios como Oracle o DB2.

No obstante para los requisitos de este proyecto se adecúa perfectamente

MySQL y dado que es el tipo de base de datos más extendido, se ha optado por su empleo

en las aplicaciones desarrolladas.




2.4 Programación del lado clienteEn este punto se describen los conceptos teóricos de las tecnologías empleadas

en el desarrollo de este proyecto que corresponden con aplicaciones ejecutadas en el

navegador del cliente. Por un lado se introducen conceptos básicos en la generación de un

documento web y posteriormente se avanza en programación Javascript y el uso de AJAX.

2.4.1 XHTML

En esta sección se introducen los conceptos básicos de XHTML que especifica la

W3C para la formación correcta de documentos web.


XHTML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje

extensible de marcado de hipertexto) es el sucesor de HTML. Es por eso que muchos lo

consideran la “versión actual” del HTML, pero es una recomendación aparte y a la vez

paralela; la W3C continúa recomendando el uso de XHTML 1.1, XHTML 1.0, y HTML 4.01

para publicar en la web.

La necesidad de una versión más estricta de HTML se sintió principalmente porque el

contenido de la World Wide Web ahora puede visualizarse desde numerosos dispositivos

(como móviles) aparte de los ordenadores tradicionales, donde no pueden dedicarse

recursos suplementarios para afrontar la complejidad añadida de la sintaxis del HTML.

La mayoría de las versiones recientes de los navegadores web más populares

soportan XHTML adecuadamente, pero algunas versiones más antiguas sólo pueden leer el

XHTML como si se tratara de HTML. Asimismo casi todos los navegadores que son

compatibles con XHTML también leen HTML correctamente. Algunos argumentan que

esta compatibilidad ralentiza el cambio de HTML a XHTML. En octubre de 2005

aproximadamente el 10% de los internautas utilizaban un navegador compatible con el

estándar XHTML. El Internet Explorer de Microsoft (versión actual en el momento de




desarrollo de este documento) es incompatible con XHTML, a pesar de que esta empresa

sea miembro de la W3C. Por tanto, gran parte de los autores de sitios web se ven forzados a

elegir entre la escritura de documentos válidos, respetuosos con los estándares u ofrecer

contenido que se visualice correctamente en la mayor parte de los navegadores.

2.4.1.2 Diferencias con HTML

Una característica especialmente útil del XHTML es que elementos de distintos

espacios de nombres XML (como MathML y Scalable Vector Graphics) pueden ser

incorporados.

Los cambios de HTML a la primera generación de XHTML (es decir, XHTML

1.x) son menores; ya que, principalmente, están destinados a conseguir la conformidad con

XML. El cambio más importante es el requerimiento que el documento esté bien formado

y que todas las etiquetas estén explícitamente cerradas, como se requiere en XML. Como

las etiquetas en XML distinguen entre mayúsculas y minúsculas (case-sensitive), la

recomendación XHTML ha definido todos los nombres de etiqueta en minúsculas. Lo cual

está en contraste directo a las tradiciones extendidas en el tiempo de HTML 2.0, cuando

mucha gente prefería las mayúsculas para estos casos, normalmente para mostrar más

fácilmente el contraste de éstas con el contenido. En XHTML, los valores de los atributos

deben encerrarse entre comillas ('simples' o "dobles", es indiferente). Al contrario ocurría

en SGML y por consecuencia en HTML, donde las comillas podían omitirse en algunos

casos. Todos los elementos han de ser explícitamente cerrados, incluyendo elementos

vacíos como pueden ser img o br. Esto puede hacerse añadiendo una barra a la etiqueta:

<img … /> y <br />. La minimización de atributos (como <option selected>) está también

prohibida, ya que el atributo “selected” no contiene ningún valor explícito; en lugar de eso,

se usa <option selected="selected">. Hay más diferencias detalladas en la recomendación

XHTML 1.0 de la W3C.

La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de

HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML




a ser una aplicación del más estricto XML:

➢ Los elementos vacíos deben cerrarse siempre:

Incorrecto: <br>Correcto: <br></br> o <br/> o <br />

➢ Los elementos no vacíos también deben cerrarse siempre:

Incorrecto: <p>Primer párrafo<p>Segundo párrafoCorrecto: <p>Primer párrafo</p><p>Segundo párrafo</p>

➢ Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se

abre último, debe cerrarse primero).

Incorrecto: <em><strong>Texto</em></strong> Correcto: <em><strong>Texto</strong></em>

➢ Se debe siempre especificar un texto alternativo para imágenes (atributo "alt" para

la etiqueta "img"). Incorrecto: <img src="http://ninbox.png" />Correcto: <img src="http://ninbox.png" alt="logo ninbox" />

➢ Insertar elementos de bloque dentro de elementos de línea.

Incorrecto: <em><h2>Título</h2></em>Correcto: <h2><em>Título</em></h2>

➢ Los valores de los atributos deben siempre ir encerrados entre comillas (simples o

dobles).

Incorrecto: <td rowspan=3>Correcto: <td rowspan="3">Correcto: <td rowspan='3'>

➢ El símbolo & (ampersand) debe ser usado únicamente como parte de una entidad.

Incorrecto: Cars & housesCorrecto: Cars & housesIncorrecto: <a src="http://index.php?id=1&cat=2">Category 2</a>Correcto: <a src="http://index.php?id=1&cat=2">Category 2</a>

➢ Los nombres de elementos y atributos deben ir en minúsculas.

Incorrecto: <A HREF="http://www.domname.com">Domname</A>Correcto: <a href="http://www.domname.com">Domname</a>

➢ No está permitida la minimización de atributos (se usa el nombre del atributo como

valor). Incorrecto: <textarea readonly>Solo-lectura</textarea>Correcto: <textarea readonly="readonly">Solo-lectura</textarea>




➢ Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.

Incorrecto: <font color="#0000FF">Blue text</font>Correcto: <span style="color: #0000FF;">Blue text</span>

➢ Reglas para DTDs estrictos. El texto no debe ser insertado directamente en el

cuerpo (dentro de la etiqueta "body").

Incorrecto: <body>Texto plano</body>Correcto: <body><span>Texto plano</span></body>

2.4.1.3 Ventajas e inconvenientes

Ventajas

Las principales ventajas del XHTML sobre otros formatos para la formación de

documentos web son:

✔ Compatibilidad parcial con navegadores antiguos: la información se

visualiza, aunque sin formato. Apuntar que el XHTML 1.0 fue diseñado

expresamente para ser mostrado en navegadores que soportan HTML de base.

✔ Un mismo documento puede adoptar diseños radicalmente distintos en

diferentes aparatos, pudiendo incluso escogerse entre varios diseños para un mismo

medio.

✔ Facilidad de edición directa del código y de mantenimiento.

✔ Formato abierto, compatible con los nuevos estándares que actualmente

está desarrollando el W3C como recomendación para futuros agentes de usuario o

navegadores.

✔ Los documentos escritos conforme a XHTML 1.0 pueden potencialmente

presentar mejor rendimiento en las actuales herramientas web que aquellos escritos

conforme a HTML.

Inconvenientes




Algunos navegadores antiguos no son totalmente compatibles con los

estándares, lo que hace que las páginas no siempre se muestren correctamente. Esto cada

vez es menos problemático, al ir cayendo en desuso.

Muchas herramientas de diseño web aún no producen código XHTML correcto,

pudiendo producir resultados no esperados.

2.4.2 CSS

En esta sección se introducen las hojas de estilo CSS utilizadas para la

maquetación de los documentos web.


Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje

formal usado para definir la presentación de un documento estructurado escrito en HTML

o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el

encargado de formular la especificación de las hojas de estilo que servirá de estándar para

los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un

documento de su presentación.

Por ejemplo, el elemento de HTML <H1> indica que un bloque de texto es un

encabezamiento y que es más importante que un bloque etiquetado como <H2>. Versiones

más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle

formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <H1> debía

disponer de la información si se deseaba un diseño consistente para una página, y además,

una persona que lea esa página con un navegador pierde totalmente el control sobre la

visualización del texto.

Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre como

va a ser visualizado, solamente marca la estructura del documento. La información de




estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <H1> : color,

fuente, alineación del texto, tamaño, y otras características no visuales como definir el

volumen de un sintetizador de voz , por ejemplo.

La información de estilo puede ser adjuntada tanto como un documento separado o en el

mismo documento HTML. En este último podrían definirse estilos generales en la cabecera

del documento o en cada etiqueta particular mediante el atributo "style".

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son las que se enumeran

a continuación:

✔ Control centralizado de la presentación de un sitio web completo con lo

que se agiliza de forma considerable la actualización del mismo.

✔ Los Navegadores permiten a los usuarios especificar su propia hoja de

estilo local que será aplicada a un sitio web remoto, con lo que aumenta

considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales

pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o

remarcar más los enlaces.

✔ Una página puede disponer de diferentes hojas de estilo según el

dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser

impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.

✔ El documento HTML en sí mismo es más claro de entender y se consigue

reducir considerablemente su tamaño.

Hay varias versiones : CSS1 y CSS2, con CSS3 en desarrollo por el World Wide

Web Consortium (W3C). Los navegadores modernos implementan CSS1 bastante bien,

aunque existen pequeñas diferencias de implementación según marcas y versiones de los

navegadores. CSS2, sin embargo, está sólo parcialmente implentado en los más recientes.




2.4.2.2 Maquetación

Un tiempo atrás los diseñadores web han optado por la utilización de tablas

para el diseño de páginas webs, de esta forma, el uso que daban a las tablas era como

elementos de estilo cuando su verdadero cometido es albergar contenido. La maquetación

CSS consiste en utilizar capas (layers) que en HTML se definen con las marcas

<div></div> (de apertura y cierre, respectivamente) para estructurar la aplicación web,

como alternativa a las tablas y los marcos (frames). Así, podemos nombrar cada capa con

el atributo id de manera que podremos definir las propiedades de dicha capa en el archivo

CSS externo al documento, aunque también se puede incluir el código CSS en la misma

página que el HTML, pero es poco funcional (es conveniente hacer uso de la modularidad

para hacer más fácil el mantenimiento). Un ejemplo de utilización de la marca div sería:

<div id="capa1">Contenido: imágenes, texto, etc.

</div>#capa1 { /*aquí definimos las propiedades de la capa*/

background-color: #ffffff;margin: auto;color: #000000;}

Además también se pueden aplicar extensiones CSS no estándares como se

muestra en el siguiente código:

#capa2 {

-moz-border-radius: 2.5px;

-moz-opacity: 0.55;

filter:alpha(opacity=55);

}

En este caso -moz-border-radius es una propiedad de los productos Gecko el

cual puede moldear el radio de elementos de una página, -moz-opacity es una




implementación también de los motores de rendering de Mozilla y por último filter:alpha

es una extensión propietaria de Internet Explorer de Microsoft.

2.4.2.3 Importancia de su correcto uso

Las hojas de estilo proporcionan un mecanismo modulado y eficaz para

maquetar el contenido de la web. Además proporcionan atributos como las pseudo-clases

que permiten añadir efectos a los elementos de la web, para conseguir una mejor

usabilidad sin tener que recurrir al uso de JavaScript. Aunque el sistema Ninbox utiliza

Javascript para muchas partes del sistema está diseñado para que que las partes

principales de la web no necesiten su uso, gracias al uso de CSS; además proporciona

mecanismos de usabilidad paralelos en caso de que el usuario tenga desactivado Javascript

en el navegador.

Existen propiedades no estandarizadas en la W3C para los diferentes

navegadores que nos permiten la posibilidad de añadir efectos avanzados, como es el caso

del canal alpha. Su uso no esta desaconsejado , siempre que se tenga en cuenta que debe

ser empleado en elementos secundarios de la web , que no afecten directamente la

usabilidad y que además se compruebe que en caso de que no sea compatible con el

navegador utilizado la visualización aunque no sea la pretendida sea correcta y no afecte la

maquetación general de la web.

En cuanto al tipo de maquetación de la web se deben tener en cuenta los

siguientes aspectos:

➢ Según el estudio que se ha realizado sobre legibilidad, las fuentes de tipo

sheriff , es decir, aquellas que en los finales de las letras tienen remates, como por

ejemplo la Times New Roman son más fáciles de distinguir por los lectores cuando

el material está imprimido. Sin embargo en pantalla este tipo de letras no son tan

"distinguibles" por el pequeño blur que introduce la resolución de la propia

pantalla. En este caso lo aconsejable es utilizar tipos de fuente sans sherif, es decir




sin esos remates en los bordes, como es el caso de Arial.

➢ Respecto al tamaño no hay una norma estricta, pero al menos en la

impresión se aconseja 12 px, y muchas web también han adoptado este tamaño

como el más adecuado.

➢ Si existe mucho contenido en la web de lectura se debe poner un color al

fondo ( aconsejable casi blanco ) y un color de letra (aconsejable muy oscuro) que

tengan un gran contraste.

➢ Los párrafos no deben ser extremadamente anchos , porque así es más

difícil seguir la lectura.

➢ Lo aconsejable es realizar un maquetado similar a los periódicos.

➢ Por ultimo que las lineas del párrafo tengan sentido por sí mismas.

2.4.3 Javascript

En esta sección se introduce el lenguaje de programación que se ejecuta

directamente en el navegador del cliente.


JavaScript es un lenguaje interpretado, es decir, que no requiere compilación,

orientado a las páginas web, con una sintaxis similar a la del lenguaje Java y el Lenguaje C.

Al contrario que Java, JavaScript no es un lenguaje orientado a objetos

propiamente dicho, ya que no dispone de Herencia, es más bien dirigida por eventos.

Estará listo para actuar en cuanto un evento (un click en un botón, por ejemplo) sea

ejecutado. Aún así javascript implementa una sencilla interfaz de

objetos/propiedades/métodos.

Javascript se integra dentro del código HTML de las páginas Web (aunque es

recomendable emplear archivos js).




El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que

es la que fabricó los primeros navegadores de Internet comerciales. Apareció por primera

vez en el producto de Netscape llamado Netscape Navigator 2.0.

Tradicionalmente, se venía utilizando en páginas web HTML, para realizar

tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a

funciones del servidor. JavaScript se ejecuta en el navegador al mismo tiempo que las

sentencias van descargándose junto con el código HTML.

Los autores inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado

como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de

diciembre de 1995.

En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la

the European Computer Manufacturers' Association ECMA, que a pesar de su nombre no

es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como

un estándar ECMA, con el nombre de ECMAScript. Poco después también lo fue como un

estándar ISO.

JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de

Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a

ambas versiones con frecuencia incompatibles.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el

estándar Document Object Model (DOM, ó Modelo de Objetos del Documento en

castellano), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape

Navigator, Opera versión 7, y Mozilla desde su primera versión.

2.4.3.2 DOM

El Document Object Model (en español ‘Modelo de Objetos de Documento’),

frecuentemente abreviado DOM, es una forma de representar los elementos de un

documento estructurado (tal como una página web HTML o un documento XML) como

objetos que tienen sus propios métodos y propiedades. El responsable del DOM es el




World Wide Web Consortium (W3C).

En efecto, el DOM es una API para acceder, añadir y cambiar dinámicamente

contenido estructurado en documentos con lenguajes como ECMAScript (Javascript).

La guerra entre navegadores que hubo entre el Netscape Navigator y el Internet Explorer

de Microsoft creó graves problemas para los programadores de páginas web, ya que,

aunque ambos navegadores utilizaban Javascript como lenguaje de programación, los

objetos no se comportaban de la misma forma, lo que obligaba con frecuencia a programar

dos veces las páginas, una para el Netscape, y otra para el Explorer; aún así, seguían

teniendo problemas, ya que no todas las versiones de un mismo navegador se

comportaban igual.

Finalmente, el W3C, el consorcio encargado de definir los estándares de la web,

decidió crear un modelo de objetos único, el DOM, para que todos los fabricantes pudieran

adoptarlo, facilitando la compatibilidad plena entre ellos.

No obstante, Microsoft ha añadido su propia extensión al DOM, creando problemas de

interoperabilidad para los navegadores web.

Como el navegador de Microsoft, Internet Explorer, es desde el año 2002 el navegador web

estándar de facto, esto lleva a un problema real a los desarrolladores de navegadores más

comprometidos con los estándares, como Mozilla. Si adoptan las extensiones de Microsoft

al DOM, se arriesgan a perder credibilidad en sus llamadas a que los sitios web respeten el

estándar, y si no lo hacen, se arriesgan a alienar a sus usuarios por la pérdida de

compatibilidad con casi todos los sitios web que utilizan las extensiones de Microsoft. Los

críticos ven esta actitud como otro caso de aplicación de la táctica de Microsoft de

"adoptar, extender y extinguir". Esto puede ser considerado irónico, debido a que tanto

Microsoft como Netscape fueron responsables de proporcionar extensiones no estándares

en la carrera armamentística por el control del estándar, y Mozilla surgió como una

iniciativa de Netscape.

La opinión general parece indicar que esto cambiará sólo si nuevos navegadores

que respeten los estándares ganan una cuota de mercado significativa en la web, de forma


que el uso de extensiones no estándares se convierta en un problema comercial para los

autores de los sitios web que las usen.

Se espera que la siguiente versión de Internet Explorer sea más riguroso con los estándares

en su implementación del DOM, pero Microsoft ha asegurado que saldrá con la siguiente

versión de Windows, prevista para 2006, aunque ya hay disponible una versión de prueba.

2.4.3.3 Uso correcto

Los espacios, las tabulaciones, los avances de línea y los comentarios utilizados

fuera de las constantes de tipo cadena se les llama espacio en blanco (whitespace en

inglés). A diferencia del lenguaje C, el espacio en blanco de un código fuente de JavaScript

puede impactar directamente la semántica. Debido a una técnica conocida como

«inserción de punto y coma», cualquier declarativa que esté bien formada al momento de

procesar un avance de línea será considerada como completa (como si hubiera un punto y

coma al final de la línea). Se recomienda a los programadores utilizar el punto y coma de

manera explícita para marcar el final de las declarativas y reducir los efectos no deseados

provocados por la inserción automática de punto y coma.

El espacio en blanco innecesario, los caracteres de espacio en blanco que no son

necesarios para tener una sintaxis correcta, puede incrementar la cantidad de espacio

desperdiciado y por lo tanto también el tamaño de los archivo. Cuando se utilizan técnicas

de compresión que eliminan el espacio en blanco, se puede mejorar el desempeño al

utilizar los punto y coma llamados 'opcionales'.

La sintaxis de los comentarios es la misma de C++, comentarios en bloque

delimitados por «/*» y «*/», y comentarios del 'resto de la línea' delimitados por «//» y el

fin de línea, a excepción del comentario de inicio <!--, que sirve para que no lo detecte

navegadores que no entiendan Script.

En las nuevas aplicaciones web el uso de Javascript es casi imprescindible,

puesto que proporciona métodos y efectos al usuario para interactuar con las aplicación. El



hecho de que se ejecute en la parte del cliente conlleva la ventaja de tener disponibles

acciones como si de una aplicación de escritorio se tratase, sin sobrecargar al servidor. Su

uso debe ser moderado, puesto que existen dispositivos móviles y lectores de pantalla que

no permiten su ejecución, además es posible que un cliente por motivos de seguridad tenga

desactivado la ejecución de Script. Por esta razón se debe diseñar el sitio de manera que sin

el uso de Javascript se pueda navegar normalmente sin limitar el contenido o el acceso a

dichos usuarios.

2.4.3.4 Introducción a AJAX

Javascript como se ha explicado anteriormente es código ejecutable en el lado

del cliente, por este motivo se suele usar para interactuar con la interfaz, realizar

comprobaciones en los formularios..., pero hasta hace poco no se podía hacer uso de él

para interaccionar con código de servidor.

Con la aparición de AJAX(Asynchronous JavaScript And XML), que se explica en el

capítulo posterior, desde Javascript se puede realizar consultas directas al servidor y

recoger las respuestas sin tener que cargar la página.

Esto ha supuesto una revolución en las webs, pero también un problema de convergencia

para las diferentes soluciones web.

2.4.4 AJAX

En esta sección se explican los conceptos teóricos del empleo de AJAX como

medio de interacción cliente-servidor.


AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript y XML

asíncronos), es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se

ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación




asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios

sobre la misma página sin necesidad de recargarla. Esto significa aumentar la

interactividad, velocidad y usabilidad en la misma.

AJAX es una combinación de tres tecnologías ya existentes:

➢ XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que

acompaña a la información.

➢ Document Object Model (DOM) accedido con un lenguaje de scripting

por parte del usuario, especialmente implementaciones ECMAScript como

JavaScript y JScript, para mostrar e interactuar dinámicamente con la información

presentada.

➢ El objeto XMLHttpRequest para intercambiar datos de modo asíncrono

con el servidor web. En algunos frameworks y en algunas situaciones concretas, se

usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos

intercambios.

➢ XML es el formato usado comúnmente para la transferencia de vuelta al

servidor, aunque cualquier formato puede funcionar, incluyendo HTML

preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, AJAX no constituye una tecnología en sí, sino

que es un término que engloba a un grupo de éstas que trabajan conjuntamente.

2.4.4.2 Ventajas e inconvenientes

Ventajas

➢ Interactividad




Las aplicaciones AJAX se ejecutan en la máquina cliente, manipulando la

página actual dentro de sus navegadores usando métodos de Document Object Model.

Puede ser usado para multitud de tareas como actualizar o eliminar registros, expandir

formularios web, devolver peticiones simples de búsqueda, o editar árboles de categorías;

todo sin tener la necesidad de tener que recargar toda la página de HTML cada vez que se

realiza un cambio. Generalmente sólo requiere enviar pequeñas peticiones al servidor, y se

devuelven respuestas relativamente cortas. Esto permite el desarrollo de aplicaciones

interactivas con interfaces de usuario más responsivas gracias al uso de las técnicas

DHTML.

➢ Portabilidad

Las aplicaciones de Ajax utilizan características bien documentadas presentes

en todos los navegadores importantes en la mayoría de las plataformas existentes. Aunque

esta situación podría cambiar en el futuro, en este momento, los usos de Ajax son efectivos

entre plataformas.

Mientras que la plataforma de Ajax está más restringida que la plataforma de

Java, las aplicaciones actuales de Ajax llenan con eficacia la parte de los Java applets:

ampliar el navegador con mini-aplicaciones ligeras.

Inconvenientes

➢ Críticas de usabilidad

Una de las mayores críticas contra el uso de AJAX en aplicaciones web es que

puede fácilmente acabar con el comportamiento normal del botón atrás del navegador. Las

diversas expectativas entre volver a una página que se ha modificado dinámicamente y la

vuelta a una página estática pueden ser sutiles. Los usuarios normalmente esperan que

haciendo click en atrás mientras están en una aplicación web les llevará a la última página

cargada, y en aplicaciones AJAX lo más seguro es que esto no ocurra. Los desarrolladores




han implementado varias soluciones a este problema, muchos de los cuales giraron

alrededor de crear o usar IFrame invisibles para invocar los cambios que hacen que se

genere el historial usado por el botón atrás del navegador. Google Maps, por ejemplo,

realiza búsquedas en un IFrame invisible y luego inserta los resultados en la página web

visible; es posible seguir el comportamiento del usuario vía callbacks que son llamados

cada vez que se pulsa el botón atrás, recuperando el estado de la aplicación que existía en

ese momento.

Un problema relacionado es que las actualizaciones dinámicas hacen difícil al

usuario agregar a los marcadores/favoritos un momento particular de la aplicación.

Existen soluciones a este problema, muchas de las cuales utilizan el fragmento

identificador del URL (la parte de una URL precedida del signo '#' para no perderla de

vista, y permitir a los usuarios volver a ese momento exacto. Esto es posible porque

muchos navegadores permiten al JavaScript actualizar dinámicamente el fragmento

identificador del URL, por lo que las aplicaciones Ajax pueden mantenerlo a medida que el

usuario va cambiando el estado de la página. Esta solución también mejora el

funcionamiento del botón para retroceder a una página anterior en el historial.

➢ Tiempos de respuesta

El intervalo entre la petición del usuario y la respuesta del servidor debe tenerse

en cuenta durante el desarrollo de AJAX. Sin el feedback claro al usuario, carga de datos

rápida, y dirección apropiada del objeto XMLHttpRequest los usuarios pueden

experimentar esperas en la interfaz de la aplicación web, algo que los usuarios pueden no

esperar o comprender. Como soluciones a estas esperas, frecuentemente se recomienda el

uso de feedback visual para informar al usuario de la actividad en segundo plano y/o

precarga de contenido y datos.

En general el impacto potencial de la espera no ha sido "resuelto" por ninguno de los

toolkits y frameworks para AJAX de código abierto disponibles hoy en día.

➢ JavaScript




Aunque AJAX no necesita ningún tipo de plug-in para el navegador, requiere

que los usuarios tengan el JavaScript activado. Esto se aplica a todos los navegadores que

soportan esta tecnología excepto para Microsoft Internet Explorer 6 y anteriores los cuales

necesitan también tener el ActiveX activado, ya que el objeto XMLHttpRequest está

implementado junto con el ActiveX en este navegador. Internet Explorer 7, por otra parte,

va a implementar esta interfaz como un objeto JavaScript nativo y por tanto no se va a

necesitar ActiveX para que AJAX pueda funcionar con normalidad.

Como ocurre con las aplicaciones DHTML, las de AJAX deben de ser probadas

rigurosamente para adaptarse a los diferentes navegadores y plataformas. Han ido

apareciendo numerosas librerías de programación a medida que AJAX ha ido madurando

que pueden ayudar en esta tarea. Asimismo, se han desarrollado técnicas para asistir en el

diseño de aplicaciones que ofrecen funcionalidades alternativas para los usuarios que no

tienen el JavaScript activado.

➢ Nombre

Ha habido varias críticas en torno al término AJAX, reclamando que Adaptive

Path (el consultorio que creó la palabra) u otros defensores lo usan como un vehículo de

marketing para técnicas antes usadas.

2.4.4.3 Accesibilidad y compatibilidad

La utilización de tecnologías AJAX en la web proporciona muchos desafíos para

desarrolladores interesados en la adhesión a las directrices de la WAI de accesibilidad. Los

desarrolladores necesitan proporcionar opciones fallback para usuarios en otras

plataformas o navegadores, ya que la mayoría de los métodos de puesta en práctica de

AJAX confían en rasgos sólo presentes en navegadores gráficos de escritorio.

Los desarrolladores web usan AJAX en algunos casos para ofrecer contenido




sólo a porciones específicas de una página, permitiendo la manipulación de datos sin la

necesidad de recargar la página completa en el navegador. Los no usuarios de AJAX

seguirían cargando y manipulando la página entera como un fallback, permitiendo a los

desarrolladores preservar la experiencia de los usuarios en entornos no-AJAX (incluyendo

todos los temas relevantes de accesibilidad) mientras que da a aquellos con un navegador

capaz, una experiencia de usuario mucho mejor.

Navegadores que permiten AJAX

Debe tenerse en cuenta que ésta es una lista general, y el soporte de las

aplicaciones AJAX dependerá de las características que el navegador permita.

➢ Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los

navegadores basados en él.

➢ Navegadores basados en Gecko como Mozilla, Mozilla Firefox,

SeaMonkey, Camino, Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores.

➢ Navegadores con el API KHTML versión 3.2 y superiores implementado,

incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y

superiores, y el Web Browser para S60 de Nokia tercera generación y posteriores.

➢ Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser

versión 8.0 y superiores.

Navegadores que no permiten AJAX

➢ Opera 7 y anteriores.

➢ Microsoft Internet Explorer para Windows versión 4.0 y anteriores.

➢ Microsoft Internet Explorer para Macintosh, todas las versiones.

➢ Dillo.

➢ Navegadores basados en texto como Lynx y Links.

➢ Navegadores para incapacitados visuales (braille).


En estos momentos AJAX está revolucionando el modo en el que se programan




las webs y el modo en el que se presentan. Gracias a AJAX se consigue una interfaz muy

parecida a la de una aplicación de escritorio.

Cuando se pulsa un botón , que por ejemplo ordene los contenidos de una base de datos ,

sin AJAX debíamos cargar la web de nuevo pasándole como parámetro mediante POST o

GET la información de la acción que queremos. Este parámetro era capturado por PHP y

así procesaba la información de una manera o de otra, consiguiendo mostrar el contenido

procesado una vez cargada la web. Esto conllevaba que por cada operación que se deseaba

realizar había que cargar toda la web, trayendo consigo el retraso oportuno dependiendo

de la cantidad de información , imágenes... de la web.

Mediante AJAX al pulsar al botón, se envía información al servidor mediante

una petición httprequest y una vez procesado, el servidor devuelve la información al

navegador (Javascript).Mediante Javascript se actualiza la interfaz y ya estaría acabado el

proceso, sin que el usuario necesite recargar la web.

Por motivos de compatibilidad y de usabilidad AJAX es usado en este sistema como apoyo

a la interacción que se desea conseguir, pero no como base de programación, puesto que

eso limitaría su portabilidad.

AJAX concretamente será usado en peticiones de información que no afecten al

comportamiento general de la web, como por ejemplo petición de usuarios conectados,

petición de información personal, pero nunca para la navegación por la web, esto permitirá

al usuario con compatibilidad experimentar sensaciones de usabilidad parecidas a una

aplicación de escritorio y no limitará a aquellos usuarios que no posean compatibilidad.

Para el desarrollo de AJAX se utiliza la biblioteca SAJAX que es de uso libre y

permite escribir las funciones PHP o archivos PHP que serán solicitados por los diferentes

Javascript de las web.

El tratamiento del HttpRequest también es controlado por el framework prototype.js para

proporcionar toda la compatibilidad posible.




2.5 Arquitectura MVC

2.5.1 Introducción

El modelo Model-View-Control (MVC) es un patrón de arquitectura de software

que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres

componentes distintos. El patrón MVC se ve frecuentemente en aplicaciones web, donde la

vista es la página HTML, el control es el código que provee de datos dinámicos a la página,

y el modelo contiene clases representativas de la aplicación (como el mensaje de un foro,

un miembro registrado, etc.).

➢ Modelo: Ésta es la representación específica del dominio de la

información sobre la cual funciona la aplicación. El modelo es otra forma de llamar

a la capa de dominio. La lógica de dominio añade significado a los datos; por

ejemplo, calculando si hoy es el cumpleaños del usuario o los totales, impuestos o

portes en un carrito de la compra.

➢ Vista: Éste presenta el modelo en un formato adecuado para interactuar,

usualmente un elemento de interfaz de usuario.

➢ Controlador: Éste responde a eventos, usualmente acciones del usuario e

invoca cambios en el modelo y probablemente en la vista.

Muchas aplicaciones utilizan un mecanismo de almacenamiento persistente

(como puede ser una base de datos) para almacenar los datos. MVC no menciona

específicamente esta capa de acceso a datos.

Es común pensar que una aplicación tiene tres capas principales: presentación

(IU), dominio, y acceso a datos. En MVC, la capa de presentación está partida en

controlador y vista. La principal separación es entre presentación y dominio; la separación

entre V/C es menos clara.

Aunque se pueden encontrar diferentes implementaciones de MVC, el flujo que sigue el

control generalmente es el siguiente:




➢ El usuario interactúa con la interfaz de usuario de alguna forma (por

ejemplo, el usuario pulsa un botón, enlace).

➢ El controlador recibe (por parte de los objetos de la interfaz-vista) la

notificación de la acción solicitada por el usuario. El controlador gestiona el evento

que llega, frecuentemente a través de un gestor de eventos (handler) o callback.

➢ El controlador accede al modelo, actualizándolo, posiblemente

modificándolo de forma adecuada a la acción solicitada por el usuario (por ejemplo,

el controlador actualiza el carro de la compra del usuario). Los controladores

complejos están a menudo estructurados usando un patrón de comando que

encapsula las acciones y simplifica su extensión.

➢ El controlador delega a los objetos de la vista la tarea de desplegar la

interfaz de usuario. La vista obtiene sus datos del modelo para generar la interfaz

apropiada para el usuario donde se refleja los cambios en el modelo (por ejemplo,

produce un listado del contenido del carro de la compra). El modelo no debe tener

conocimiento directo sobre la vista. Sin embargo, el patrón de observador puede ser

utilizado para proveer cierta indirección entre el modelo y la vista, permitiendo al

modelo notificar a los interesados de cualquier cambio. Un objeto vista puede

registrarse con el modelo y esperar a los cambios, pero aun así el modelo en sí

mismo sigue sin saber nada de la vista. El controlador no pasa objetos de dominio

(el modelo) a la vista aunque puede dar la orden a la vista para que se actualice.

Nota: En algunas implementaciones la vista no tiene acceso directo al modelo,

dejando que el controlador envíe los datos del modelo a la vista.

➢ La interfaz de usuario espera nuevas interacciones del usuario,

comenzando el ciclo nuevamente.

2.5.1.1 Aplicación de la arquitectura

La aplicación de esta arquitectura y su funcionalidad depende estrechamente de

la tecnología que decidamos elegir para realizar el proyecto. En el caso del desarrollo de

una aplicación web como la desarrollada en este proyecto se deben tener en cuenta y




aclarar aspectos que en el desarrollo de un soft de escritorio no sería necesario.

El modelo en el sistema Ninbox constituye todos los archivos PHP que

componen el dominio del sistema. Es decir, el archivo encargado de mostrar los foros, el

archivo encargado de mostrar los hilos, el archivo encargado de crear una nueva

respuestas..., en definitiva el conjunto de archivos que componen el núcleo lógico de la

aplicación.

La vista está compuesta de todos los archivos plantilla, que contendrán

información de presentación, es decir, serán archivos XHTML y archivos CSS que

maquetarán de forma adecuada la información que se obtiene en la ejecución de cada

archivo modelo.

Por último el controlador, como antes se introducía es quizá la parte del modelo

que más confusión puede plantear. Para el sistema en cuestión esta parte está compuesta

por el código Javascript que es el encargado de controlar todos los eventos creados por el

usuario y que interviene en la variación de la interfaz o en la ejecución de un nuevo archivo

modelo.


Actualmente existen miles de aplicaciones web en la red, muchas de ellas

realizadas con una programación no estructurada y sin diferenciación de módulos. Esto

implica una difícil actualización, optimización y división de trabajo.

En estos momentos las aplicaciones web están convirtiéndose en soft de gran complejidad

que en ocasiones se implementan por diferentes personas, como por ejemplo el equipo de

programadores y el equipo de diseñadores. Esto obliga a utilizar un modelo estructurado

de programación.

La arquitectura MVC no es la única que existe, pero nos proporciona un división

tanto lógica como técnica en el sistema.




Además proporciona un medio más organizado para el diseño del sistema, permitiendo

realizar aplicaciones pensadas para todos los tipos de navegadores que existen.

Sistemas tan famoso como BLOGGER, GMAIL , WIKIPEDIA... utilizan estos modelos para

su implementación, están marcando el futuro del desarrollo de aplicaciones.

Aunque existen FRAMEWORKS que permiten el desarrollo de aplicaciones basadas en la

arquitectura MVC como es por ejemplo CAKEPHP, la evolución de las webs está

apuntando hacia una nueva tecnología basada en un lenguaje que pueda desarrollar por si

mismo las tres partes del modelo. Obviamente existen problemas que hacen que esto no

pueda ser ahora mismo viable, parte del modelo es código ejecutado en servidor, y parte

vista-controlador es código ejecutado en el navegador.

Un sistema que puede asemejarse algo más a estas premisas pueden ser las JSP

( Java Server Page ), pero también existe el problema de su desarrollo como código, según

mi punto de vista Java es el lenguaje mejor diseñado de todos los que existen. Fue

diseñado de manera concisa y proporciona herramientas muy potentes, pero su aspecto

más poderoso que es la compatibilidad y portabilidad también genera su parte más oscura.

Java fue diseñado para “todo” y para “nada” en concreto, esto implica que en aspectos más

concretos como aplicaciones de escritorio o aplicaciones web, sus rivales en el caso de las

aplicaciones web,como PHP, le aventajan en facilidad y rapidez de desarrollo.


capítulo 2 introducción teórica

Documents