Herramienta Gratis de Gestión de Tareas - Pivotal Tracker

Pivotal Tracker

Es una herramienta gratuita de Pivotal Labs, que nos permite organizar las tareas de un proyecto, utilizando el concepto de gestión de pilas.

Esta herramienta es recomendable para los programadores y coordinadores del proyecto, como para los clientes y agentes externos, ya que es fácil de usar, fácil de aprender y muy amigable para los usuarios que interactúan con el mismo.

Cuenta con diversas fuentes de información y métricas para brindar de una forma detallada y comprensible, el progreso diario, semanal o mensual de un proyecto o de los miembros, dependiendo de las tareas y sus estados ( empezado, terminado y rechazado ), entre muchas más plantillas de información.

La curva de aprendizaje de la herramienta es muy sencilla, lo cual nos permite tomar esta herramienta en cualquier momento y probarla sin tener un costo adicional en cuanto a perdida de tiempo.

Cómo Se Usa
Lo primero que tenemos que hacer es registrarnos en Pivotal Tracker, luego creamos un proyecto y a trabajar. Agregamos a todos los miembros del proyecto ( desarrolladores, clientes, agentes externos, coordinadores ).

Creamos tareas, las tareas se crean pensando en el usuario y no pensando en cual es la forma más simbólica para mi de nombrar la tarea para que mi equipo entienda de que se trata, si le colocas un nombre pensando asi, el usuario final ( nuestro cliente ) no va a entender que se está haciendo, me explico,

Forma Incorrecta
"Implementar Sistema de Pago"

Forma Correcta
"El Usuario a de Poder Pagar"

El porque es muy simple, el momento que un cliente entre a revisar como va el proyecto, supongamos que nuestro cliente es graduado en Educación, cuando lea Implementar Sistema de Pago, se va a imaginar algo que se puede hacer en 30 minutos o menos, según su criterio, ahora si lee El Usuario a de Poder Pagar, ya se imagina, un diseño, diferentes pantallas, suena como mas grande y cuando lo vea en estado Terminado el cliente estará muy feliz y eso es lo que queremos.

Una ves creada la tarea tenemos una bandeja de entrada llamada IceBox, esta bandeja están todas nuestras tareas que alguna ves o quizá vamos a realizar, asignadas a un miembro del grupo que es quien la va a alguna ves o quizá ira realizar.

Las tareas tienen Puntos, que van del 0 a 3 dependiendo su dificultad. una ves colocado el punto según su dificultad, aparecerá un botón llamado START.


Cuando ya se pueda realizar una tarea la podemos arrastrar a la bandeja de entrada Current, la cual estarán todas nuestras historias pendientes actualmente y NO SON ALGUNA VES O QUIZA, esta tareas son para realizar "por que si".

Una ves que la tarea este en la bandeja Current, la puntuación que le hemos dado tiene 3 finalidades:

1. Colocar la carga de trabajo.
2. No sobre cargar el trabajo actual.
3. Calcular la Velocidad de las tareas.

Explico el segundo punto, la bandeja Current tiene un limite de puntos, este limite de puntos nos permite no sobre cargar nuestras actividades actuales, toda actividad que exceda este limite es pasadas automáticamente a la bandeja de BackLog. La idea es mantener la bandeja Current corta y realista.

El tercer punto, es una métrica llamada Velocidad, esta métrica, se calcula en base a la media de puntos por semana de una persona. Esto nos ayuda a calcular 2 cosas:

1. Que tan rápido va mi proyecto
2. Que tan rápido trabaja X persona con respecto a la tarea asignada.

El segundo punto, nos puede ayudar a distribuir mejor las tareas entre la cantidad de miembros, muy útiles para saber las fortalezas y debilidades de nuestro Team de Trabajo.

Conclusión

PivotalTracker es una herramienta gratis, fácil de usar y de aprender y no puede pasar por alto el usarlo por lo menos una ves a ver que beneficios nos trae.

Chiste de Requerimientos

SkinnableComponent Skin, Dynamic Change - Flex 4

Ejemplo:

Muchas veces necesitamos un component que se comporte como queramos y eso lo podiamos hacer perfectamente con flex 3, pero cuando hablamos de que se vea como queramos ya era otro cuento, teníamos que dibujar dentro de nuestro component o simplemente dibujaba nuestro Nuevo component en flash e importarlo desde flash a flex usando flex kid component.

Con el nuevo framework de flex, separaron lo que es la parte grafica de los componentes de la parte funcional del mismo. Esto quiere decir, que podemos hacer una clase para hacer que se comporte como queramos y luego hacer otra clase para crear como queremos que se vea.

Este diagrama de arquitectura nos dará una idea a que nos estamos enfrentando ahora en comparación con flex 3

Los componentes sigues extendiendo de UIComponente pero ahora tienen un clase llamada SkinnableComponent de este lado podemos programar todo lo que queremos que nuestro componente haga, y del lado de la interfaz nos crean lo que es la clase skin con esta clase podemos renderizar cualquier componente, existen skins ya prediseñados pero si queremos hacer uno por nuestra cuenta desde cero, extenderemos de skin class.

También tenemos el diagrama del ciclo de vida de los skin:

(Esta Imagen fue sacada de http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning)


Tenemos varios métodos que podemos sobre escribir para poder darle muchas más funcionalidades a nuestros diseños, no solo para decorar sino para crear efectos interesantes.

Communications between two Local Flex Apps - Comicacion entre dos Apps de Flex Locales

Translation:

• Spanish
• English

Algunas veces queremos comunicar dos aplicaciones de Flex o Flash que se encuentran en la misma página, y no vemos la manera de hacerlo.

ActionScript tiene una clase, que nos permite hacer esto sin mucho esfuerzo. Esta clase está ubicada en flash.net. LocalConnection.

Como todo principio de Cliente servidor, una aplicación tiene que escuchar y la otra tiene que ver si hay alguien escuchando.

Veamos el primer código donde vemos la aplicación que escucha, le colocaremos un nombre a la conexión llamada myConnection:

Sometimes we want to communicate two Flex or Flash applications that are on the same page, and do not see how.

ActionScript has a class, allowing us to do so without much effort. This class is located at flash.net. LocalConnection.

The idea is like a client server connection, an application needs to listen and the other has to see if anyone is listening.

Let us first see the application code where you hear, we will place a name to the connection called myConnection:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="300"
      applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">
 

 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   
   private const connection:LocalConnection = new LocalConnection();
[Bindable] private var   data:ArrayCollection = new ArrayCollection();
   
   protected function applicationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Application Complete Handler");
    connection.client = this;
    connection.connect("myConnection");
    data.addItem("The Client es THE APP, The name is myConnection");
   }
   
   public function colorBackground(sendedColor:uint):void
   {
    data.addItem("colorBackground Function");
    try
    {
     remoteColor.setStyle("backgroundColor",sendedColor);
     data.addItem("Recived Color in UInt -> "+ sendedColor);
    }
    catch (error:ArgumentError)
    {
     Alert.show("Error trying to connect to LocalConnection.");
    }
   } 
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 <s:VGroup height="100%" width="100%" 
     x="0" y="0" 
     paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" 
     horizontalAlign="center">
  <s:Panel id="remoteColor" 
     width="250" height="100" 
     title="Remote Background Color" >
  </s:Panel>
  <s:Panel width="100%" height="100%" 
     title="Console">
   <s:List id="console" 
     width="100%" height="100%" 
     x="0" y="0"
     dataProvider="{data}"></s:List>
  </s:Panel>
 </s:VGroup>
</s:Application>

Ahora veamos la segundo aplicación la cual envía un mensaje a myConnection buscando una función llamada colorBackground y le pasa como parámetro el Color Seleccionado:

Now for the second application which sends a message looking for a function called myConnection colorBackground and passes as parameters the Selected Color:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      minWidth="500" minHeight="300"
      applicationComplete="applicationCompleteHandler(event)" viewSourceURL="srcview/index.html">
 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.ColorPickerEvent;
   import mx.events.FlexEvent;
   
   private const connection:LocalConnection = new LocalConnection();
[Bindable] private var   data:ArrayCollection = new ArrayCollection();
   protected function applicationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Application Complete Handler");
    connection.addEventListener(StatusEvent.STATUS, connectionStatusHandler);
    data.addItem("Add Listener Status to the Connection");
   }
   
   private function connectionStatusHandler(event:StatusEvent):void
   {
    data.addItem("Connection Status Handler");
    switch (event.level)
    {
     case "status":
      trace("Use of LocalConnection.send() succeeded");
      break;
     case "error":
      Alert.show(
       "The LocalConnection.send() call failed: "
       + event.code + "\n"
       + event.toString() );
      break;
    }
    data.addItem("Status -> "+ event.level );
   }
   
   protected function sendColorHandler(event:ColorPickerEvent):void
   {
    // TODO Auto-generated method stub
    data.addItem("Send Color Handler");
    connection.send("myConnection", "colorBackground", event.color);
    data.addItem("Color Sending in UInt -> " + event.color);
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:VGroup x="0" y="0" 
     width="100%" height="100%" 
     paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" 
     horizontalAlign="center">
  <mx:ColorPicker change="sendColorHandler(event)"/>
  <s:Panel width="100%" height="100%" 
     title="Console">
   <s:List id="console" 
     x="0" y="0" 
     width="100%" height="100%"
     dataProvider="{data}"></s:List>
  </s:Panel>
 </s:VGroup>
</s:Application>

Los archivos pueden Descargarlos arriba de cada ejemplo.

The files can be downloaded above each example.

Ejemplo Uno - Recive el mensaje:

Example One - The message receiver:

Ver y Descargar Archivo del App 1:

• Archivos - Descargar.
  

View Source and Download Files of the App 1:

• Download Source.
  

Ejemplo Dos - Envia el Mensaje:

Example Two - Sends the Message:

Ver y Descargar Archivo del App 2:

• Archivos - Descargar.
  

View Source and Download Files of the App 2:

• Download Source.
  

Cryptography in Flex - Encriptar en Flex - Flex 4

Translation:

• Spanish
• English

Siempre necesitamos usar algún tipo de seguridad, para garantizar a nuestros clientes finales, la seguridad, valga la redundancia, de sus datos. Es por eso que cada ves que vamos a usar un Login o algún texto que necesite de algún tipo de Ofuscamiento, recurrimos a los que son algoritmos de Encriptación.

Flex tiene una librería para encriptar de forma muy sencilla y brinda varios algoritmos, logrando así nuestro objetivo, asegurarnos que nadie tenga la clave o texto de viaje por la red y pueda leerlo o al menos leerlo de forma inmediata.

Aquí les dejo el link para que se bajen la librería para ActionScript, as3corelib Link.

Y aquí le dejos solo la clase donde se ve mejor la implementación, de igual forma al final del texto están todas las clases y archivos del ejemplo, para verlos o descargarlos.

We always need to use some type of security to ensure our end, safety, despite the redundancy of your data. That's why every time we use a login or some text that needs some kind of obfuscation, we turn to those who are encryption algorithms.

Flex is a library for a simple way to encrypt and provides several algorithms, thus achieving our goal, to make sure that no one has the key or text traveling through the network and can read or at least read it immediately.

Here is the link to get off the library for ActionScript, as3corelib Link .

I will leave the most important class, so you can see who is implemented and you can see all the classes and download them at the end of this post.

package com.developyourdream.vo
{
 import com.adobe.crypto.MD5;
 import com.adobe.crypto.SHA1;
 import com.adobe.crypto.SHA224;
 import com.adobe.crypto.SHA256;
 import com.adobe.crypto.WSSEUsernameToken;
 import flash.utils.ByteArray;
[Bindable]
 public class LoginVO
 {
  public function LoginVO()
  {
  }
  private var _username:String;
  private var _password:String;
  private var _cryptoDetail:PasswordVO;
  private var _passwordByteArray:ByteArray;
  
  public function get username():String{
   return _username;
  }
  public function set username(value:String):void{
   _username = value;
  }
  public function get cryptoDetail():PasswordVO{
   return _cryptoDetail;
  }
  public function get password():String{
   return _password;
  }
  public function set password(value:String):void{
   _password = value;
   
   _cryptoDetail = new PasswordVO;
   
   _passwordByteArray = byteArrayTrasform(value);
   
   _cryptoDetail.originalByteArrayPassword = byteArrayToString(_passwordByteArray);
   
   _cryptoDetail.md5   = MD5.hash(_password);
   
   _cryptoDetail.sha1   = SHA1.hash(_password); 
   _cryptoDetail.sha1_base64 = SHA1.hashToBase64(_password); 
   _cryptoDetail.sha1_Bytes = SHA1.hashBytes(_passwordByteArray);
   
   _cryptoDetail.sha224  = SHA224.hash(_password); 
   _cryptoDetail.sha224_base64 = SHA224.hashToBase64(_password); 
   _cryptoDetail.sha224_Bytes = SHA224.hashBytes(_passwordByteArray);
   
   _cryptoDetail.sha256  = SHA256.hash(_password); 
   _cryptoDetail.sha256_base64 = SHA256.hashToBase64(_password); 
   _cryptoDetail.sha256_Bytes = SHA256.hashBytes(_passwordByteArray);
   
   _cryptoDetail.token = WSSEUsernameToken.getUsernameToken(_username,_password);
   
  }
  /*OTHER FUNCTIONS*/
  private function byteArrayTrasform(value:String):ByteArray
  {
   var _auxByteArray:ByteArray;
   _auxByteArray = new ByteArray();
   _auxByteArray.writeMultiByte(value,"utf-8");
   return _auxByteArray;
  }
  private function byteArrayToString(byteArray:ByteArray):String
  {
   byteArray.position = 0;
   var str:String = "";
   while(byteArray.position != byteArray.length - 1)
   {
    str += byteArray.readByte().toString(16).toUpperCase()+" ";
   }
   return str;
  } 
 }
}

Ejemplo:

Example:

Ver y Descargar Archivo:

• Archivos - Descargar.
  

View Source and Download Files:

• Download Source.
  

Google Maps HighLighting - (Country - Region - State - City ) - Flex 3

OBSERVACION: solo sirve en el GOOGLE MAPS 1.09

Zoom Levels:

• Default Zoom: Country.
• Zoom 1 and 2 : Region.
• Zoom 3 and 4 : States.
• Zoom 5 to last : City's.

Default View

Select Country

Drag Country

Region View

Select Region

State View

Select State

Drag State

City View

Select City