Upload
others
View
11
Download
0
Embed Size (px)
Citation preview
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
Capítulo 2 Introducción teórica
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
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Figura 1: Situación de partida
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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...
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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).
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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 ).
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
✔ 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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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); }
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
function _setdata($data){ $file = $this->_getfile(); $fs = @fopen($file, w); if ($fs) { fwrite($fs, $data); fclose($fs);} if (!$fs) { return(FALSE); } } function _getdata(){ $file = $this->_getfile(); $fs = @fopen($file, 'r'); if ($fs) { $data = fread($fs, filesize($file)); fclose($fs); return $data; } if (!$fs) { return(FALSE); } } function set($key, $value){ $data = $this->_getdata(); $data = base64_decode($data); $array = unserialize($data); $array["$key"] = $value; $newdata = serialize($array); $newdata = base64_encode($newdata); $this->_setdata($newdata); } function get($key){ $data = $this->_getdata(); $data = base64_decode($data); $array = unserialize($data); return($array[$key]); }}?>
Las Cookies
Las Cookies son bloques de información almacenadas en el cliente, que
transfiere el servidor en la cabecera de los mensajes. Para que se puedan enviar, el cliente
tiene que tenerlas habilitadas. Sólo pueden ser textos, como máximo tienen un tamaño de
1K y sólo son válidas desde el servidor que las envió.
Se utilizan para agilizar algunos procesos de identificación de usuarios, a veces
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.3.2.1 Introducción
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.4.1.1 Introducción
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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>
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
➢ 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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.4.2.1 Introducción
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.4.3.1 Introducción
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).
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.4.4.1 Introducción
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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).
2.4.4.4 Conclusiones
En estos momentos AJAX está revolucionando el modo en el que se programan
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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:
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
➢ 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
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
2.5.1.2 Conclusiones
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
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.
Carlos Serrano Sánchez
Plataforma Ninbox: aplicación web para integración de servicios e-Learning
Capítulo 2 Introducción teórica
Carlos Serrano Sánchez