Cuaderno De Bitácora: Javascript

Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

domingo, 13 de enero de 2008

Timeline (Archivos modificados o creados)

La metodología que utilizaré será exponer la ruta completa del fichero, siempre suponiendo que me encuentro dentro de la carpeta instalada de Moodle, y en función de si se han modificado funciones o métodos ya existentes, dos puntos y el nombre de la función. Del estilo de:
ruta_completa_del_archivo/archivo:función

Archivos creados

/course/report/log_timeline/index.php
Contiene la construcción de la página web principal. Es el archivo encargado de construir la página web además de verificar los datos del usuario. Punto de partida a la hora de trabajar, ya que es en este archivo donde se definen variables globales muy importantes para los Javascripts.

/course/report/log_timeline/getxml.php

Es el encargado de generar los sucesivos archivos XML con la información de los eventos que se le han solicitado. Además verifica los datos de usuario y los permisos al igual que el archivo index.php.

/course/report/log_timeline/count.php
Sirve para crear una sencilla página web con el número de eventos que se están visualizando en este momento.

/course/report/log_timeline/timeline_processing.js
Crea todas las funciones necesarias para poder enlazar las actividades de las listas desplegables con el Timeline. También es el archivo encargado de inicializar los atributos que tendrá del Tiemline. Es muy importante que este archivo sea llamado por la página web, después de que se haya definido la variable file_xml (contiene la información de la selección actual de todas las listas desplegables) y también después de la creación de las listas desplegables. Para unir definir eventos en los diferentes tags mediante el DOM, los objetos deben de estar inicializados de antemano.

/course/report/log_timeline/timeline.lib.php
Contiene dos funciones auxiliares y sencillas que se utilizan en el archivo getxml.php.

/course/report/log_timeline/api_timeline
Esta carpeta contiene la ultima versión de la Api de Timeline. Sin esta carpeta, se tendría que llamar a la página de SIMILE cada vez que se llamará a la página index.php.

Archivos Modificados

/course/report/log_timeline/mod.php
Moodle permite añadir fácilmente diferentes plugins para Informes, únicamente creando una carpeta nueva dentro de /course/report/ e incluyendo el archivo mod.php (definiéndolo a nuestro gusto) dentro de la nueva carpeta.

/course/repor/log_timeline/lib.php
Modificación del archivo /course/report/log/lib.php para adaptarlo a nuestros intereses.

... Actualidad ...

Sigo trabajando en la implementación de los grades. De momento estoy trabajando en la implementación de las interfaces que tendrán las páginas para evaluar tanto las páginas wiki como su ediciones.

Además hace unos días que he comenzado ha redactar la memoria. He añadido la mayoría de entradas de este blog a la memoria, pero hay algunos puntos que no están redactados y que tengo que añadir.

sábado, 15 de diciembre de 2007

Un bug ...

El plugin de Timelines para ver la actividad de Moodle tenía un pequeño bug.

Al crear el objeto Timeline dentro de la página web, hay que definir la información y la estructuración que tendrá, por ejemplo, dentro de cada banda (o tira) hay que especificar la unidad temporal (minutos, días, meses, años, ...), también existe un atributo dentro de cada banda que permite definir la posición inicial por defecto y es aquí donde residía el fallo.

Para establecer este parámetro creo un objecto en JavaScript de la clase Date que por defecto contiene la fecha y hora actual, posteriormente realizó la conversión a tipo string y construyo correctamente el valor del atributo requerido. Esto implica que en Firefox se compone correctamente, pero en cambio en Internet Explorer no, debido a que la conversión a String en Internet Explorer es diferente, la posición del año se encuentra cambiada de lugar. Este hecho se puede comprobar directamente con el siguiente código:


<html>
<head></head>
<body>
<script type="text/javascript">
var today = new Date();
alert(today);
</script>
</body>
<html>

Mozilla Firefox

Internet Explorer

Aparte de esta pequeña peculiaridad, trabajar con DOM los objetos de la página html, puede tener también algunas complicaciones. Como por ejemplo, para modificar el texto de una etiqueta h2, en Internet Explorer tenemos que utilizar el atributo innerHTML y en Firefox es suficiente con utilizar el atributo textContent.

domingo, 25 de noviembre de 2007

Trabajo de la Semana (II)

Mejoras de la última versión del plugin:

He tenido problemas con la fechas a la hora de tratar los milisegundos transcurridos desde las 00:00 del 1 enero de 1970 (timestamp) que están almacenados en la etiqueta select con id="menudate". Al convertir el valor de timestamp en un determinado formato dentro de Javascript, constantemente daba un valor erróneo. Para solucionarlo he añadido dentro de cada opción (<option>) del select con id="menudate", el atributo id con la traducción de la fecha con el formato necesario para, si es necesario, filtrar los eventos por fecha. El formato del string es "mes día año", donde el mes tiene un representación textual y corta (las tres primeras letras, en inglés), el día con dos dígitos (añadiendo el 0 de 1-9) y el año con los cuatro dígitos. La primera solución que había implementado, no contemplaba todos los casos posibles, es decir se construía el filtro a partir del la representación de texto ya existente de la fecha.

He integrado los Highlights ya implementados de Timeline. Estos consisten en cuatro campos de distintos colores, en los que se pueden escribir para subrayar los eventos que contengan las mismas cadenas dentro de la descripción o el título.

He añadido algo que creo que se tenía que conservar, el número de registros que se mostraban en el timeline. Primero opté por buscar la forma de hacerlo a partir del objeto que creaba, pero no sabía si al filtrar se incluirían estos o no, y al no encontrar una solución solvente, me decante por crear mediante JavaScript otra pequeña ventana del navegador que llama a la página count.php con la query necesaria mostrar el número de eventos dibujados en el timeline. Si no se cierra la nueva ventana y se pulsa de nuevo el botón count, la ventana se actualiza en vez de crear otra nueva.

Ya no hace falta modificar ninguna dirección dentro del script timeline_processing.js para utilizar el plugin.

sábado, 24 de noviembre de 2007

Trabajo de la semana (I)

Durante el transcurso de esta semana he añadido estas funcionalidades principales:

Para instalar el plugin solo hay que descomprimir el fichero en la carpeta de /moodle/course/report/ (y modificar, de momento, una dirección url en el archivo timeline_processing.js, el archivo que inicializa el timeline)

Se ha añadido la API a la cabecera de la página en HTML. Existe el parametro $return de la función print_header, que si evalúa cierto devuelve el string de la cabecera en vez de imprimirla con el comando "echo" (la función que tiene por defecto).

Ahora dentro del propio fichero del plugin del timeline, se incluye la última versión de la API de Timeline.

He añadido los saltos de linea a las burbujas del timeline (<br/>).

Se mantiene el mismo formato de la página web para todos los usuarios. Cuando el usuario era el administrador, se añadían bloques de administración.

Ahora explicaré algunos detalles relevantes a la hora de modificar o mejorar el código, que cabe destacar:

La inicialización del Timeline (timeline_preocessing.js) tiene que ir dentro del body, porque lo modifica. Se añade por JavaScript los eventos onLoad y onResize al body.

En el caso de ser administrador, dependiendo de la página a la que accedamos para ver los registros, no es visible el plugin, ja que el plugin o los plugins dentro de la carpeta de /moodle/course/report/ solo son visibles si la url solicitada es parecida a /moodle/course/report.php?id=(numero de identificación del curso)

Cada vez que se accede al index.php se registra en el log una nuevo report log. Este funcionamiento se ha cambiado para que en vez de añadir como si se tratará de un report log normal, se añada un timeline log. Es de agradecer la modularidad y libertad de añadir entradas al log de moodle con la función add_to_log(...).

Sigo trabajando en tener una versión estable (en la medida de lo posible...) para el lunes.

domingo, 4 de noviembre de 2007

Filtros & Eventos

Para filtrar los eventos podemos utilizar nuestras propias funciones. Dichas funciones pueden utilizan el potencial que nos brindan las expresiones regulares de Javascript. Un ejemplo de definición de una función de filtraje sería:

var regex = new RegExp(chain /* Patrón o cadena a filtrar */, "i");

filterMatcher = function(evt) {

return regex.test(evt.getDescription());

};

Se define una expresión regular con la cadena o patrón a buscar. En este caso, se buscará el string dentro de la descripción de cada evento (el texto que hay entre las etiquetas de <event></event>), los que valúen a cierto serán visibles y los que valúen a falso no se mostrarán. Después se asigna está función a las bandas del Timeline que queremos filtrar, y por último repintamos el Timeline:

for (var i = 0; bandIndices.length; i++)
{
var bandIndex = bandIndices[i];
timeline.getBand(bandIndex).getEventPainter().
setFilterMatcher(filterMatcher);
}

timeline.paint();

Para poder trabajar con filtros es necesario saber algunos métodos de la clase Event, estos métodos nos sirven para acceder a la información (los eventos) ya cargada con el método loadXML del objeto Timeline:

Straight from the code:
Timeline.DefaultEventSource.Event.prototype
Event Methods:
getID: function() { return this._id; },
isInstant: function() { return this._instant; },
isImprecise: function() { return this._start != this._latestStart
|| this._end != this._earliestEnd; },
getStart: function() { return this._start; },
getEnd: function() { return this._end; },
getLatestStart: function() { return this._latestStart; },
getEarliestEnd: function() { return this._earliestEnd; },
getText: function() { return this._text; },
getDescription: function() { return this._description; },
getImage: function() { return this._image; },
getLink: function() { return this._link; },
getIcon: function() { return this._icon; },
getColor: function() { return this._color; },
getTextColor: function() { return this._textColor; },
getProperty: ...
getWikiURL: function() { return this._wikiURL; },
getWikiSection: function() { return this._wikiSection; },
setWikiInfo: function(wikiURL, wikiSection) { ... }

Por último decir, que tengo la pestaña de Participante casi acabada. Tengo que ir implementando los demás filtros de forma más personalizada. Aparentemente la pestaña de Fechas y Acciones dentro de la página de registros, supondrán un poco más de dedicación.

“No cambié de canal, mañana más”

domingo, 28 de octubre de 2007

Change the course

Jordi, me comentó que para evitar la carga completa de la página de Informes->Registros, la página de Moodle en la que estoy trabajando, exactamente el fichero moodle/course/report/log/index.php, modificara únicamente el Timeline para agilizar el servidor y mejorar la eficiencia.

Actualmente, estoy trabajando en esta tarea, que consiste en que al cambiar los selectores no se tenga que volver a pedir el documento HTML entero al servidor, sino que solo se actualice el Timeline. Para hacerlo utilizaré filtros, es decir, modificar el Timeline desde el cliente y sin necesida de establecer conexión con el servidor. Pero el problema es que existen algunos casos donde filtrando la información mostrada no es suficiente y hay que recargar los eventos. Para ilustrar este ejemplo supondré que tengo que cambiar una fecha determinada para ver la actividad de todos los días (opción disponible). A la hora de hacer esto hay que controlar los eventos que ya existen y los que tengo que añadir, este punto requiere trabajo en el cliente (administración de eventos) y en el servidor (la petición de los eventos a añadir en el Timeline). Por eso he pensado que sería mejor volver a cargar el archivo XML entero (donde está la información necesaria para dibujar los eventos), una solución sencilla y en la que estoy trabajando actualmente.

De esta forma dependiendo del estado estableceré dos posibles acciones:

Si falta información
- Recargo los eventos del XML(getxml.php)
- Filtrar dependiendo del estado anterior
Filtro los eventos liberando el servidor más trabajo

La tarea propuesta por Jordi, empieza ha dar sus frutos después de un tiempo. He conseguido que al cambiar el curso se cambie el Timeline sin tener que recargar la página pero si pidiendo de nuevo la información de los eventos. El visitar la Wiki de Timelines fue decisivo.

... to be continued

lunes, 22 de octubre de 2007

La notación JSON

Leyendo Introducción a AJAX, he encontrado que la notación utilizada en la mayoría de scripts de Timeline y en su definición, es la JSON, que es básicamente una forma estructurada de componer los objetos y arrays.

Según el libro: “La notación de objetos mediante JSON es una de las características principales de JavaScript y un mecanismo definido en los fundamentos básicos del lenguaje. JSON permite definir arrays y objetos de una manera concisa, lo que supone una gran ventaja respecto de la notación tradicional de los objetos y los arrays”.

Un ejemplo de la notación JSON para crear objetos sería:

var objeto = {
"propiedad1": valor_simple_1,
"propiedad2": valor_simple_2,
"propiedad3": [array1_valor1, array1_valor2],
"propiedad4": { "propiedad anidada": valor },
"metodo1": nombre_funcion_externa,
"metodo2": function() { ... },
"metodo3": function() { ... },
"metodo4": function() { ... }
};

Siguiendo con la lectura, he encontrado una sutil diferencia a la hora de crear objetos o como dice el libro, pseudoclases. La diferencia está en la propiedad prototype. Me explico, los métodos que se definen con protoype se crean una sola vez para todos los objetos, en cambio, si no utilizamos prototype, se crea el mismo método para cada objeto y en consecuencia ocupando más espacio. Utilizando protoype, podemos redefinir metodos de clases ya existentes o bien añadir nuevos.

Para ilustrarlo mejor adjunto un ejemplo de la propiedad prototype.

Clase original
function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
this.muestraCliente = function() {
alert(this.idCliente);
}
this.muestraId = function() {
alert(this.idFactura);
}
}

Clase que utiliza su prototype
function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
}
Factura.prototype.muestraCliente = function() {
alert(this.idCliente);
}
Factura.prototype.muestraId = function() {
alert(this.idFactura);
}

AJAX

Tras leer algunos apartados de Introducción a Javascript, que me han servido para solucionar algunos problemas que tenía con los Timelines, he comenzado a leer otro libro que también me puede ser de gran ayuda, se llama Introducción a AJAX, del mismo autor que Introducción al Javascript (Javier Eguíluz Pérez) y de la misma página web.

Este libro trata con más profundidad el tema DOM y Javascript, y por eso creo que me puede servir de cara a trabajar con Timelines.

jueves, 18 de octubre de 2007

DOM Inspector

Utilizando el DOM Inspector de la pestaña de herramientas de Mozilla, he encontrado que aunque el código del html tenga dos bodys (uno con identidad y el otro no) los eventos de onload y onresize, que están en el segundo, pasan a estar en el primer body.

Igualmente he quitado el body que servía para cargar el Timeline y reescalarlo, y he añadido estos dos eventos a través de un javascript con las siguientes instrucciones:

window.onload=onLoad;
window.onresize=onResize;

Al objeto window podemos definirle cuales serán las funciones o sentencias a llamar cuando se generen los eventos onload y onresize de la ventana.

martes, 16 de octubre de 2007

El menú del día

Esta tarde he estado practicando en un menú opcional para la visualización del Timeline. Esta idea consiste en añadir una menú para poder redefinir algunos aspectos de la visualización del Timeline (el tamaño básicamente, pero también otras personalizaciones), y también de paso, empezar ha trabajar más en JavaScript. Hasta ahora, la mayor parte de código que he programado ha sido en php y quería comenzar ha trabajar un poco más JavaScript.

El primer libro que leí de JavaScript durante el verano, Guía Practica de JavaScript , ha sido de ayuda en algunos aspectos, pero no abarcaba otros que son importantes. El libro se centraba en la manipulación de objetos ya existentes en html pero no se hacía referencia al Document Object Model, DOM.

En la búsqueda de otro manual más reciente, he encontrado un libro con licencia Creative Commons llamado “Introducción al JavaScript” de Javier Eguíluz Pérez. En este libro he encontrado funciones del navegador(?) que desconocía, como por ejemplo createElement, appendChild o removeChild. Solo decir que me ha ayudado bastante para empezar ha trabajar más en JavaScript.

See you.

jueves, 4 de octubre de 2007

Identifícate

Había detectado un fallo cuando se cambiaban los participante.

Cuando se seleccionaba de “Todos los usuarios” a “Invitado”, siempre se pintaban en el timeline los mismos eventos. Esto era debido a que tras haber conseguido los registros de todos los usuarios, se creaba el archivo 0_info_timeline.xml (“id. del participante solicitado”_info_timeline.xml, en este caso todos) y al pedir el registro del invitado creaba otro archivo con un número distinto, pero en la inicialización de variables del timeline solo se utilizaba el archivo 0_info_timeline.xml.

Este error conceptual lo he solucionado cambiando la “id. del participante” por la “id. de la persona que esta accediendo a los registros” que era en principio lo que tenia en mente, de esta forma solo hay un archivo por usuario en el servidor. Otra razón era la de evitar conflictos con los archivos.

Más detalladamente, he insertado un input hidden con el número de identificación del usuario y desde el JavaScript tomo el valor guardado, esto implica que la inicialización de las variables del timeline debe ser posterior a la definición del input.

lunes, 17 de septiembre de 2007

Moodle, bases de datos y otras cosas...

Después de trabajar con Moodle, PHP, JavaScript, HTML y Bases de Datos, he conseguido hacer (de esa forma...) una de las tareas que me había encomendado Marc, visualizar un timeline con un log de Moodle.

Y mis primeras conclusiones son: que tengo que seguir aprendiendo más de JavaScript, PHP y volver a revisar en profundidad los apuntes de BD (algo muy importante a saber para brillar en una entrevista de trabajo, pero eso es algo que ya explicaré).

Por último he tenido un problemilla con la librería GD, requerida por Moodle para generar gráficos, que no he llegado a poder instalar, algo que espero solventar.

domingo, 16 de septiembre de 2007

Primeros pasos

Es hora de poner a prueba lo aprendido en los deberes de verano (programar en PHP y JavaScript).

Mi primera tarea, y en mi opinión muy estimulante, es la de crear Timelines (“widget” en AJAX) a partir de un registro de Moodle, es decir, de la base de datos que utiliza Moodle para crear estos logs de participación.

Un Timeline es un espectacular cronograma con el que podemos interactuar directamente con solo unos clicks de ratón. Para generarlo solo necesitamos incrustarlo en la página web que queramos y llamar a la API con la información de los eventos.

Cuaderno De Bitácora