Lo primero a realizar para poder desarrollar estas modificaciones, ha sido estudiar el funcionamiento del motor de TinyTable v3. Fruto de este he dado en la clave de las modificaciones necesarias para el correcto funcionamiento.

Eliminación de acentos y otros caracteres en JavaScript

Hay muchos códigos por internet sobre la eliminación de acentos, pero por algún motivo que no he llegado a encontrar en TinyTable no funcionaban correctamente y es por eso que realicé este script para la eliminación de acentos:

function til(t){
   var ts = '';
   for(var i=0;i<t.length;i++)
   {
      var c = t.charCodeAt(i);
      if(c >= 224 && c <= 230)
         ts += 'a';
      else if(c >= 232 && c <= 235)
         ts += 'e';
      else if(c >= 236 && c <= 239)
         ts += 'i';
      else if(c >= 242 && c <= 246)
         ts += 'o';
      else if(c >= 249 && c <= 252)
         ts += 'u';
      else
         ts += t.charAt(i);
   }
   return ts;
};

Podéis consultar las tablas de codificación de caracteres ASCII.

Modificaciones a TinyTable v3

Fichero tinytable/script-new.js

En el método search (sorter.prototype.search) es necesario llamar a til() para que el texto que viene del campo de búsqueda y el texto que compra en la tabla HTML sean procesados sin acentos, así como la comparación sea basada en estos:

sorter.prototype.search=function(f){
   var i=x=n=0, k=-1, q=til(T$(f).value.toLowerCase());
   if(this.p.colddid){k=T$(this.p.colddid).value}
   [...]
   for(x=s;x<e;x++){
      var b=til(r.cells[x].innerHTML.toLowerCase());
      if(b.indexOf(q)==-1){v=0}else{v=1; break}
   }
[...]

El método sort (sorter.prototype.sort) es el encargado de ordenar las columnas, pero la decisión sobre el orden lo hace el método cp() (comparation) y es aquí donde he tenido que realizar las modificaciones añadiendo el uso de til():

function cp(f,c){
   var g,h; f=g=til(f.v.toLowerCase()); c=h=til(c.v.toLowerCase());
   var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
[...]

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo

Sin las modificaciones en el código de jQuery ContextMenu pasa esto:

En el directorio jqueryContextMenu encontramos jquery.contextMenu.js dónde está el código JavaScript de menú contextual. Sólo es necesario añadir estas líneas para que quede así:

(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
(e.pageY) ? y = e.pageY : x = e.clientY + d.scrollTop;

//Código añadido
var menuW = menu.width();
var parentRightPosition = $(this).position().left+$(this).width();
if((x+menuW) > parentRightPosition)
{
     x -= menuW;
}
//fin código añadido
// Show the menu
$(document).unbind('click');
$(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);

Gracias a este código se puede controlar la posición donde va a aparecer el menú contextual, que en nuestro caso es hacia la izquierda si iba a salir fuera del elemento padre:

Hace ya algún tiempo que en la Web de anieto2k encontré un interesante artículo sobre TinyTable v3.

TinyTable v3 es un script Javascript que agrega ordenación, búsqueda, promedios de columna y totales, paginación... en tablas HTML. Todo esto lo hace con tan sólo 7Kb!!

Partiendo de esta base y después de usar TinyTable en diferentes proyectos he visto la necesidad de extender sus funcionalidades, concretamente el uso de jQuery Context Menu y jQuery Dialog UI.

Librerías usadas

Listado de librerías usadas para este desarrollo:

• JQuery 1.4.2
• TinyTable v3
• jQuery Context Menu
• jQuery Dialog UI

Motor del sistema

Para poder controlar todas las acciones que intervienen en el Script programado he creado un "controller" para canalizarlas y así simplificar el código:

function Controller(action, el)
{
	//COLUMNA de TinyTable con el id principal
	var idColumn = 0;
	//COLUMNA de TinyTable con el nombre más destacado
	var nameColumn = 1;
	var ids = $(el).children('td').eq(idColumn).text();

	switch(action)
	{
		case "eliminarAction":
			alert("Eliminar "+$('#dialogTable #idEliminar').text());
			break;
		case "eliminar":
			$('#dialogTable').dialog('open');
			$('#dialogTable #nomEliminar').text($(el).children('td').eq(nameColumn).text());
			$('#dialogTable #idEliminar').text(ids);
			break;
		case "editar":
			alert("Eliminar fila: "+ids);
			break;
	}
}

Como queremos que el menú secundario aparezca en cada fila de la tabla, creamos un método para poder inicializar las propiedades de las fila "TR" al finalizar la carga de la página y al realizar una reordenación de la tabla.

function initFuncionsTaula()
{
//Iniciamos el menú secundario personalizado para las filas de la tabla
	$('#tableData tbody tr').contextMenu({
			menu: 'contextMenuElements',
			inSpeed: 10,
			outSpeed: 10
		},
		function(action, el, pos) {
			Controller(action, el)
		}
	);
//Permitimos que se pueda editar la fila con doble click de ratón.
	$('#tableData tbody tr').dblclick(
		function() {
			Controller('editar', this)
		}
	);
}

Modificaciones a Tiny Table v3

Tiny Table al ordenar y al hacer un reset en las filas, reescribe el contenido de ellas una vez ordenadas internamente, esto hace que las inicializaciones de initFunctionsTaula() no tengan efecto. Es por eso que he hecho unas pequeñas modificaciones a Tiny Table para que inicialice nuestros métodos cada vez que se cambia la estructura:

Fichero tinytable/script-new.js

[...]
TINY.table=function(){
	function sorter(n,t,p,r){this.n=n; this.id=t; this.p=p; if(r == undefined ) r = function(){}; this.r = r; if(this.p.init){this.init()}}
[...]

Ahora Tiny Table v3 tiene un cuarto parámetro que es una función que se llamará en sorter.prototype.reset y sorter.prototype.sort, como this.r().

Inicialización de Tiny Table y jQuery Dialog UI

Para finalizar nuestro código Javascrit para que todo funcione nos falta iniciar Tiny Table con el método initFunctionsTaula() y jQuery Dialog UI usando $(document).ready() de Jquery:

var sorter = null;
$(document).ready( function() {
	//INICIAR TINYTABLE
	sorter = new TINY.table.sorter('sorter','tableData',{
		headclass:'head',
		ascclass:'asc',
		descclass:'desc',
		evenclass:'evenrow',
		oddclass:'oddrow',
		evenselclass:'evenselected',
		oddselclass:'oddselected',
		paginate:true,
		size:10,
		colddid:'columns',
		currentid:'currentpage',
		totalid:'totalpages',
		startingrecid:'startrecord',
		endingrecid:'endrecord',
		totalrecid:'totalrecords',
		hoverid:'selectedrow',
		pageddid:'pagedropdown',
		navid:'tablenav',
		sortcolumn:1,
		sortdir:1,
		sum:[8],
		avg:[6,7,8,9],
		columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
		init:true
		},
		function() {initFuncionsTaula()}
	);
	//INICIALIZAR EL MÓDULO DE DIALOGO
	$("#dialogTable").dialog({
		bgiframe: true,
		resizable: false,
		autoOpen: false,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'Cancelar': function() {
				$(this).dialog('close');
			},
			'Eliminar esta fila': function() {
				Controller('eliminarAction',this);
				$(this).dialog('close');
			}
		}
	});
});

Para el menú secundario ContextMenu será necesario algo como esto:

Editar
Eliminar

Y esto para el contenido del diálogo de eliminar:

 Está intentando eliminar la fila:




¿Está seguro que desea continuar?

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo

En pocos días Internet se ha llenado de resultados sobre Google Buzz, pero me gustaría explicar algunos puntos importantes que se deben tener en cuenta:

¿Que implica un comentario público en Google buzz?

Todo que se publique como "público" será indexado por Google Search en sus resultados, puesto que estas entradas aparecen en el perfil público de Google.

Por ejemplo:

http://www.google.com/profiles/109348304351241456985

o bien

http://www.google.com/profiles/nombreusuario

Es importante conocer esto, ya que muchas veces no vamos a querer que el resto del mundo tenga acceso a los comentarios que pongamos.

Lo ideal para aquellos a quienes no les gusta las redes sociales, pero en cambio les gusta compartir cosas con sus contactos de GMail, sería poner los post como privados, y asignados a los grupos que interese.

¿Qué comentarios puedo ver?

Como usuario de Buzz puedes ver todos los comentarios de las personas que tienes configuradas como “siguiendo” que hagan posts públicos o bien a un grupo privado al que pertenezcas.

Pero también puedes seguir un hilo de conversación de un grupo de personas que no conoces, si una de las que responde es contacto tuyo.

¿Cómo envío un post privado a un usuario concreto sin crear un grupo?

Por último, lo más importante,  cómo enviar un post privado de forma individual:

1. Crear un Buzz privado.
2. Seleccionar un grupo de amigos con 0 amigos.
3. Usar el símbolo @ más la dirección de correo de tu amigo a quien enviar el Buzz. Por ejemplo @micorreo@gmail.com
4. Publicar el mensaje y éste será privado entre tú y la persona o personas que has puesto en el cuerpo del mensaje.

Esta información la hemos obtenido  conjuntamente con unos compañeros, entre ellos Gerard Sanz, a base de hacer pruebas…. ya que Google buzz no dispone de ayuda al respeto.

Espero que os sea útil esta información!!

Actualizado:

Podéis encontrar más información aquí: http://aext.net/2010/02/12-undocumented-tricks-for-google-buzz/

y aquí: Google Buzz introduce nuevos cambios por segunda vez en una semana

Nueva actualización 21/02/2010 22:00

El equipo de Google Buzz ha sacado un Buzz donde se van contando las mejoras y algunos trucos. Os dejo el link: http://www.google.com/profiles/googlebuzz#buzz

Información sobre Play-chek

Ha sido editado por Roche i se han distribuido 20.000 ejemplares.

La Diabetes Mellitus tipo 1, se considera la segunda enfermedad crónica más frecuente en la infancia y la adolescencia después del asma. La educación diabetológica es uno de los pilares fundamentales del tratamiento y ha demostrado ser efectiva a la hora de prevenir las complicaciones propias de la enfermedad. Pero esta educación es especialmente difícil en este grupo de edad.

Actualmente los video-juegos, se están implantando cada vez más entre los jóvenes como primera elección a la hora de jugar.

Todo esto, nos llevó a Miquel Flores, y a mi, David Figueres, a buscar/crear una herramienta educativa, que utilizando estos juegos interactivos, ayudara a conseguir los siguientes objetivos:

• Proporcionar y reforzar conocimientos sobre los aspectos considerados básicos en la diabetes: alimentación, autocontrol, medicación, autocuidado, ejercicio...)
• Facilitar el diálogo entre el niño, los padres y el equipo asistencial.
• Que los niños/jóvenes conozcan la diabetes jugando.

Material y contenido: Previa revisión bibliográfica, se diseña un juego interactivo para PC en formato CD, que entre otras tiene las siguientes características:

- El juego incluye 1.316 preguntas y 112 ilustraciones en color, repartidas de la siguiente manera:

• alimentación (230 preguntas/23 ilustraciones)
• autocontrol (200/16)
• conceptos de diabetes y autocuidado (228/21)
• medicación (221/14)
• ejercicio (203/14)
• otros temas (234/24)

- Pueden jugar uno o dos jugadores.
- Dos niveles de dificultad (básico /adelantado).
- Posibilidad de jugar al juego completo a cada uno de los bloques que contiene (anteriormente mencionados).
- Registrar e imprimir los resultados obtenidos otorgando un diploma personalizado a nombre del jugador.
- Posibilidad por parte del jugador y/o el educador en diabetes de consultar la estadística del juego para conocer en qué bloque se deben reforzar conocimientos.

Conclusiones:

Pensamos que su distribución entre los niños y las familias puede contribuir a aumentar de una manera más lúdica los conocimientos y la capacidad de autocuidado de este grupo de población.

Los juegos en CD, si bien requieren ciertos conocimientos y material informático para su creación, una vez realizados tienen ventajas evidentes sobre otros materiales (libros, pósters, juegos de mesa...):

-Mayor aceptación entre la población joven.

- Bajo coste de producción y reedición.

– Facilidad en las actualizaciones.

– Facilidad en la difusión (Internet).

- Posibilidad de incluir videos, ilustraciones animadas ... con un solo límite: la imaginación.

Información extraída de la Web de Miquel Flores

Jugar a Play-Chek >>