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.

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.

Imprevistos (Desde cero...)

Esta mañana he tenido que volver a instalar todo el sistema operativo, con los drivers, programas de edición de texto y otros, por culpa de un Troyano que había afectado el archivo windows/system32/user32.dll, el cual el antivirus que tenía instalado (AVG) no ha conseguido subsanar. Dudo de si la infección ha ocurrido hoy o tal vez con anterioridad.

Por suerte, suelo mantener al día los backups del trabajo realizado.

TortoiseSVN

Para descargar la API del Timeline he utilizado el programa TortoiseSVN, exactamente el archivo:
“TortoiseSVN-1.4.5.10425-win32-svn-1.4.5.msi”
que se puede encontrar la página oficial. TortoiseSVN es un programa cliente SVN que se integra en la interfaz de Windows (windows explorer).

Cambiando de tema, dentro de la carpeta de la API de Timeline, existe un directorio llamado “images”, que es donde se almacena las imágenes que utiliza la API para construir las burbujas, los puntos referentes a los eventos, etc. Cambiando las imágenes por otras que conserven el mismo nombre, podemos personalizar, si cabe aún más, la visualización del Timeline. Aunque existen también otras alternativas como personalizar los eventos en el archivo XML, con los campos icon, image, ... (Para más información remítase a la entrada anterior).

Formato de los Eventos y Accesibilidad

Sigo programando la ardua tarea de filtrar la información del Timeline, y llegados a este punto he pensado que estaría bien comentar el formato que he utilizado en las burbujas del Timeline, que básicamente es el reflejo de la información almacenada en el archivo XML. He intentado mantener las misma filosofía para mostrar la información como cuando se presenta los registros en formato HTML.

Para formar el título de la burbuja, utilizo el nombre del curso, si es que la acción se asocia alguno, de lo contrario nada acerca del curso (site), el nombre completo del usuario a cargo de la acción, la acción especifica y por último, la imagen para mostrar del usuario.

Dentro de la descripción está la información de la I.P. que tenía el usuario en ese instante además del nombre completo del usuario, la acción que ha realizado y por último la información del evento (nombre del curso completo, Id, etc.). Se repite el nombre completo del usuario como la acción tanto en el título como en la descripción, para poder proporcionar los mismos enlaces que se proporcionan en la versión HTML.

Para completar la disertación dejaré un pequeño ejemplo de como debe de ser el archivo XML (extraído de la página oficial):

The XML format used for Timeline goes somewhat like this:

• Everything is contained by a <data /> element
  
  • The <data /> element can have the following attributes:
    
    • wiki-url -- Base url used to gin up url's for each event; by appending the wiki-section and the event's title; often a MediaWiki wiki URL
      
    • wiki-section -- MediaWiki wiki section
      
    
    
  • Inside <data>events</data> go a number of <event>content</event> elements, the order of these is unimportant.
    
  
  
  • Each <event /> element can have the following attributes:
    
    • start -- in full date format (e.g. "May 20 1961 00:00:00 GMT-0600"")
      
    • latestStart -- for imprecise beginnings...
      
    • earliestEnd -- for imprecise ends...
      
    • end -- same date format as start
      
    • isDuration -- either "true" or "false", if false the item will be drawn as a dot with a pale bar drawn behind it
      
    • title -- text title that goes next to the bar in the timeline
      
    • description -- more text for the bubble
      
    • image -- url to an image that will be displayed in the bubble
      
    • link -- the bubble's title text will become a hyper-link to this address.
      
    • icon -- this image will appear next to the title text in the bubble.
      
    • color -- color of the bar to display in the timeline
      
    • textColor -- color of the text to display next to the bars
      
    
    
  
  
• The "content" part is what will be displayed inside the bubble that pops up when the event is clicked
  
  • Should be escaped/formated HTML.
    

A example:

<data 
  wiki-url="http://simile.mit.edu/shelf/" 
  wiki-section="Simile JFK Timeline">
    <event 
       start="Sat May 20 1961 00:00:00 GMT-0600" 
       title="'Bay of Pigs' Invasion">

    </event>
    <event 
       start="Wed May 01 1963 00:00:00 GMT-0600" 
       end="Sat Jun 01 1963 00:00:00 GMT-0600" 
       isDuration="true" 
       title="Oswald moves to New Orleans">
         Oswald moves to New Orleans, and finds employment at the William
 <!-- This is "content" -->

         B. Riley Coffee Company. <i>ref. Treachery in Dallas, p 320</i>
 <!-- This is "content" -->
    </event>
    <event>

      ...
    </event>
</data>

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”

getxml.php v2.0

He corregido un pequeño fallo dentro de dicho archivo.

En resumen, el archivo getxml.php crea a partir de la base de datos de Moodle el archivo xml con la información de los eventos solicitados a través de la página /moodle/course/report/log/index.php. En dicho archivo se va concatenando la información de los eventos en una variable de tipo string (llamada, $file_xml) y al final se imprime todo (echo($file_xml);). Pero esta forma de almacenar la información implicaba que cuando el numero de eventos excedía una cantidad limitada (unos XX KBytes) se producía este error:

Como no sabía si existían limitaciones de variables con Moodle o en PHP, opté por ir imprimiendo en cada iteración un evento para solucionar el problema, y funcionó. El Guru Pigui, me dijo que seguramente existe una limitación de tamaño a nivel de programación en PHP o en el servidor.