Cálculo automático de porcentaje para tareas madres y porcentaje de avance de proyecto en web2project

9 Mayo, 2011 at 11:39

Llevo varios años utilizando sistemas de gestión de proyectos y uno de los sistemas libres que más me gusta el DotProject , sin embargo el poco movimiento que ha tenido en los últimos años me ha hecho moverme a una de sus variantes, Web2project.

Web2project es un clon mejorado de Dorproject, tiene varios plugins publicados que incrementan notablemente las capacidades del sistema. Sin embargo posee algunos detalles que se podrían considerar como críticos por algún project manager.

Una problemática que me ha dejado bastante intranquilo es que actualmente en web2project no se calcula automáticamente el porcentaje de avance de las tareas madres cuando una tarea hija es modificada. Es decir si una tarea contiene 4 subtareas, es lógico que el porcentaje de avance cambie si una de sus subtareas lo hace. De la misma forma si una subtarea de una tarea cambia, es lógico que el porcentaje de avance total del proyecto también lo haga, cosa que actualmente no sucede.

Para solucionar este problema, hemos implementado un trigger, que se preocupa de verificar los % de avance de cada tarea madre cada vez que una tarea hija sufre cambios. de esta forma el % de avance total del proyecto siempre indicará el valor correcto del momento.

Dejo a continuación los códigos SQL que implementan la función que calcula el nuevo porcentaje y el código del Trigger que se mantendrá atento cuando se realicen cambios.

//*****************************************
// FUNCION QUE CALCULA EL NUEVO PORCENTAJE
//*****************************************
CREATE FUNCTION new_percent (id_tarea int) RETURNS decimal(6,2)
BEGIN
DECLARE salida decimal(6,2);

SELECT
CAST(
round(
IF(
( SELECT COUNT(stasks.task_id)
FROM ((`tasks` AS stasks))
WHERE stasks.task_id <> tasks.task_id
AND stasks.task_parent = tasks.task_id
) = 0,
task_percent_complete,
( SELECT ifnull(SUM(stasks.task_percent_complete),0)/if(COUNT(stasks.task_id)=0,1,COUNT(stasks.task_id))
FROM ((`tasks` AS stasks))
WHERE stasks.task_id <> tasks.task_id
AND stasks.task_parent = tasks.task_id
)
),2)
AS DECIMAL(6,2)
)
AS X into salida
FROM ((`tasks` AS tasks))
where task_id = id_tarea;
RETURN salida;
END

//*****************************************
// Trigger
//*****************************************

CREATE TRIGGER update_task AFTER UPDATE ON tasks
FOR EACH ROW
BEGIN

update tasks set task_percent_complete = round(new_percent(task_id),0);
END

espero les sea útil.

Alternativa a json_encode() de php

22 Diciembre, 2010 at 11:54

La versión 5.2 de php tiene la posibilidad de agregar la función json_encode() si cargamos una librería en el php del servidor. json_encode() tiene la capacidad de convertir la mayoría de los datos de php en estructuras de datos válidos para JavaScript.

Lamentablemente algunos proveedores de hosting no habilitan json_encode(). Pero no se precupen, ya tenemos la alternativa :).

jsonwrapper ( http://www.boutell.com/scripts/jsonwrapper.html ), provee de las funciones necesarias para reemplazar y/o crear una alternativa a json_encode en los servidores que no la tengan soportada. Solo es necesario agregar un ” require ‘jsonwrapper.php’; ” en nuestro código ( y evidentemente subir la librería a nuestro directorio fuente ) para que todo funcione de maravilla.

sitio oficial de jsonwrapper –> http://www.boutell.com/scripts/jsonwrapper.html

Historia de como integrar correctamente el motor de búsqueda google a un sitio web

27 Agosto, 2010 at 14:04

Todos sabemos que google permite crear busquedas “personalizadas” , permitiendo restringir los dominios de búsqueda y “acomodar” los resultados a un estilo parecido a la de la web que desplegará los resultados.

Sin embargo algunos webmasters que desean personalizar los resultados gráficos, más allá de los que google les ofrece, no tienen opción más que meter las manos a los códigos y diseñar inventos raros.

Hace algunos días (o semanas), en lacosox.org nos propusimos mejorar el motor de búsqueda del “Grupo de usuarios GNU/Linux IX región Chile” ( http://www.gulix.cl ).  Ellos anteriormente tenían una búsqueda “personalizada” a través del motor de búsqueda de google, pero a decir verdad esta “personalización” dejaba mucho que desear. El motor de búsqueda era excelente, pero la integración gráfica era pésima.

280px-Busqueda_antes_de_personalizar

Al realizar la búsqueda el resultado era este.


Nos Propusimos encontrar la forma de integrar correctamente el buscador Goole en la web,  permitiendo que los resultados se desplegaran dentro de la lógica gráfica del sitio y manteniendo al mismo tiempo los derechos y lógica de Google Inc.

Después de algunas horas de trabajo logramos finiquitar el tema , obteniendo como resultado una visión similar a esta.

280px-Busqueda_despues_de_personalizar

Resultados actuales de la búsqueda.

La lógica ingenieril que está detrás de este proces puedes revisarlo en el acta de actualización del sitio de Gulix.cl, donde se encuentran todas las características técnicas que permiten realizar esta personalización extrema. Puedes revisar el acta aquí -> ( http://gulix.cl/wiki/WebGulix_2.0.3 )

Aunque te puedo adelantar que la lógica se basa en este diagrama:

 Diagrama que explica toda la lógica de solución.

Diagrama que explica toda la lógica de solución.

Mejora la usabilidad de tus formularios en el campo input text

10 Junio, 2010 at 04:19

usabilidadEl tema de la usabilidad es un tema crucial para quienes nos dedicamos al desarrollo web, determina muchas cosas; que el usuario use el servicio, que lo recomiende, que le agrade usarlo étc. El otro dìa visitando la web de jamendo.com (sitio para escuchar música libre) estube analizando varias cosas que me llamaron la atención entre ellas bastantes conceptos interesantes que han inplementado sobre la usabilidad del sitio, de hecho me sorprendió y estoy seguro que el desarrollador de ese sitio conoce mejor que yo  la importancia de la usabilidad hasta en los mínimos detalles, por eso he querido dedicarle estas lineas y si es que me lee por ahi mi mensaje seria “eres seco” jjeje.

Ahora bien como me encantó tanto el concepto de varias cosas las anoté por ahi en mi super agenda para ver si de a poco las voy implementando en mis próximos desarrollos, analicé tambien las lienas de javascript y css tratando de hacer ingeniería inversa pero fué imposible, el código esta ofuscado y cuando logre descubrir las funciones que estaban tras pequeños detalles me di cuenta que se implementaron con javascript solamente “a poto pelado” y carecen de bastante estilod e programación, al leer tanto desastre he pensado que la implementación de dichos conceptos basandome en jquery podría simplificarse bastante y he aqui el primer resultado un concepto  de usabilidad sobre los campos input interesante simple  para el usuario final y simple para el desarrollador basado en jquery.

Típicamente un campo input se ve asi:

esa implemntación es más que simple:

<input type=”text” value=””>

Añadiendole un poco de estilo al campo podríamos lograr cambiar el estilo de la linea, el fondo y el color de fondo al hacer focus sobre el mismo, y hasta ahi llegan los consejos de usabilidad en este campo que puedas encontrar en google. Ahora conun poco de esfuerzo podemos transformar todos nuestros campos input  para agregarles además del color y el estilo de lineas un indicador del uso del campo. Primeros definamos el estilo css:

    <style type=”text/css”>
.form .form-txt{
border: 2px solid #dadada;
background-color: #f3f3f3;
color:#2a2a2a;
font-family: Helvetica, Arial, Sans-serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form .form-txt:hover{
border-color:#235485;
}
.form .form-txt:focus{
border: 2px solid #8cc63f;
background-color: #FFFFFF;
color:#235485;

}

</style>

Podemos ver que el color de fondo cambia al hacer o no click en conjunto con el color de la linea y el efecto se vería así:

Con esto le indicamos al usuario donde esta parado y que ha habilitado el campo, sin embargo no le hemos indicado que puede escribir sobre el para eso agregaemos la especificación de el css que indique la escritura:

    .form .input_escribiendo { /* para aplicarlo a los elementos input type=”text”*/
padding-right: 20px;
background-image: url(“lapiz.png”);
background-repeat: no-repeat;
background-position: right center;
min-height:16px; /*altura imagen*/
}

Ahora lo usaremos desde un javascript cambiando a dicho estilo solo cuando el input este en focus,  algo muy simple si usas jquery como framework para manejar los elementos dom:

 

<script type="text/javascript">
	$(function(){
		$('input[type="text"]').focus(function() {
			$(this).css("width",$(this).width()-20);
			$(this).toggleClass("input_escribiendo");
		
			if (this.value == this.defaultValue){ 
				this.value = '';
			}
			if(this.value != this.defaultValue){
				this.select();
			}
		});
		
		$('input[type="text"]').blur(function() {
			
			$(this).toggleClass("input_escribiendo");
			$(this).css("width",$(this).width()+20);
			$(this).val($(this).val());/*fix para re-reenderizar el valor por desface en ancho*/		
			if ($.trim(this.value) == ''){
				this.value = (this.defaultValue ? this.defaultValue : '');
			}
		});
	});
	</script>

 

El truco es eluso de la función “toggleClass” agregando o quitando el estilo según sea el focus, puedes observar también un pequeño truco sobre el ancho del campo que he realizado, se que esto quita un poco de estilo de programación pero ruego que si alguien encuentra una forma más estética de hacerlo la postee en un futuro quiza lo mejore pero como diría por ahi alguien “lo mejor es enemigo de lo bueno” por eso lo deje como estaba no mas.



$(this).toggleClass("input_escribiendo");

finalmente se verá así:

El resultado final puedes verlo acá (adjunto el ejemplo bajo licencia gpl v3):

VER EJEMPLO ONLINE

demo_inputtext_usables.tar
Título: demo_inputtext_usables.tar (0 click)
Leyenda:
Filename: demo_inputtext_usables-tar.gz
Size: 15 KB

Efecto loading con jquery (forma simple)

8 Marzo, 2010 at 20:26

Este ejemplo no tiene nada de novedoso, ya lo habrán visto en muchas web implementado. Tiempo atrás había relaizado ya este efecto utilizando jquery como framework ajax para conseguir el efecto sin mayores complicaciones, hoy respondiendo a la petición de un amigo me vi obligado a reescribir el código dado que si bien está el efecto en la red la implementación es bastante más compleja que la que escribí yo. Puedes observar la poca cantidad de código que utiliza esta alternativa para mostrar el efecto de loading,  Ver Ejemplo

Source:

<html>
<head>
<title>Ejemplo prueba loading ajax</title>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js‘></script>
<script type=”text/javascript”>
         function  efecto(){
$(‘#fotocargando’).hide();
$(‘#contenidoWeb’).fadeIn(500);
}

</script>
</head>
<body onload=”efecto();”>

<div id=”fotocargando” style=”width:100%;text-align: center;”>
<img src=”http://www.lacosox.org/sites/default/files/cargando.gif”>
</div>

<div id=”contenidoWeb” style=”display:none;“>
Bienvenido a Lacosox.org, ejemplo simple de carga ajax <br>
<img src=”http://www.lacosox.org/sites/default/files/plazacuracautin.jpg”>
<div>

</body>
</html>

 

Ver Ejemplo Funcional

cargando
Título: cargando (0 click)
Leyenda:
Filename: cargando.gif
Size: 3 KB
ejemplo_simple_carga_ajax
Título: ejemplo_simple_carga_ajax (0 click)
Leyenda:
Filename: ejemplo_simple_carga_ajax.html
Size: 888 B
plazacuracautin
Título: plazacuracautin (0 click)
Leyenda:
Filename: plazacuracautin.jpg
Size: 61 KB

Solución al Error de subida de ficheros (flash uploader) en WordPress 2.7 español (dbv 9872)

23 Enero, 2009 at 01:34

Ya hace un mes se lanzó la versión 2.7 de wordpress, la nueva versión incoorpora una serie de cambios radicales muy buenas , sin embargo hay un problema que le está partiendo la cabeza ya a muchos blogueros, me refiero al flash uploader que trae incoorporado. El problema no es culpa de wordpress, sino más bien, de adobe aunque no entraré en detalle de eso vamos a la solución mejor. Básicamente son 2 los problemas , pero el segundo quizá no a todos les pase ya que es por falta de librerias en tu servidor, pues biens las soluciones:

 

Primer problema es que el flash uploader(aplicación de subidade ficheros) da un error con resultado de una pagina invalida.

Causa: Usted tiene la versión 10 de flash la cual es incompatible con ese wordpress.

Solucion: 1.- Cambiarse de flash , volver a la versión 9

2.- Alternativamente se puede desactivar el flash uploader y utilizar solo el del navegador basado en php, para esto instale el siguiente pluggin http://www.lacosox.org/sites/default/files/no-flash-uploader.1.1.zip

 

El segundo problema trata de redimensionar las imágenes que son subidas por medio de php a wordpress, por defecto solo aparece habilitada la opción de Tamaño completo (full size), y el resto de radio buttons aparecen desactivados.

Solución:

Acceder con permisos de root a su servidor y ejecutar lo siguiente:

apt-get install php5-gd


/etc/init.d/apache2 restart

no-flash-uploader.1.1
Título: no-flash-uploader.1.1 (0 click)
Leyenda:
Filename: no-flash-uploader-1-1.zip
Size: 1 KB