Archive for the ‘ Programación ’ Category

Si estamos trabajando con la nueva API de facebook y por ejemplo queremos tener acceso a los posts del muro, necesitamos generar un token que nos permita hacer esto. Generalmente estos token se generan cuando el usuario se loguea, pero en nuestro caso no queremos que se autentifiquen sino que queremos que el usuario pueda leer nuestros post en un sitio externo sin tener que ingresar a facebook. Por defecto los token que nos genera el nuevo panel de control de aplicaciones expiran dos horas luego de haber sido creado. Por lo que si lo que queremos es crear una applicacion que lea nuestro muro para publicarlo en otro lado necesitamos crear un token que no expire.
Para esto necesitamos darle a nuestro usuario acceso offline (Oauth offline_access), esto es muy facil, solamente encesitamos ir a la siguiente url:

1
2
https://www.facebook.com/dialog/oauth?
client_id=APP_ID&redirect_uri=URL_DE_LA_APLI&scope=offline_access

Una vez generado el token si ingresamos al panel de nuestra aplicación en facebook.com/developers
veremos que el token y si hacemos click en “more” notaremos en los detalles que el token no expira. por lo que lo podremos usar para hacer llamados al Graph. (ver la imagen).

Antes se tenia acceso al feed mediante un rss pero yo ya no esta disponible por lo que la unica opcion que nos queda es el leer el feed en formato JSON usando el Graph. Por ejemplo si queremos leer el muro de un usuario en particular:

1
https://graph.facebook.com/usuario/feed?access_token=$token

donde $token puede ser el token que generamos en el paso anterior.

ocultar email

El ocultar emails en pagina web es todo un tema. El problema es que si ponemos nuestro email simple y llanamente un robot cosechador de direcciones de email va a encontrarlo y luego agregado a una base de datos para que nos envíen email basura.

Entonces como hacemos?

hay varias soluciones la que veo más comúnmente es la de incluir la dirección del email como una imagen ya que lo cosechadores sólo ven texto. y aunque es un método bastante efectivo tiene dos problemas: primero que el usuario no puede copiar y pegar por lo que va a tener que memorizar la dirección, y el segundo problema es que puede pasar que aparezca un cosechador con reconocimiento de texto.

Que otras alternativas?

CSS Codedirection
<span style=”unicode-bidi:bidi-override; direction: rtl;”>
moc.olpmeje@zyx
</span>

CSS display:none
xyz<span style=”display:none”>foo</span>@ejemplo.com

Encryptacion ROT13
klm@rknzcyr.pbz

Usar ATs y DOTs
xyz AT ejemplo DOT com

Building with Javascript
var m = ‘xyz’; // podes crear algo ingenioso
m += ‘@’; // y luego agregarlo al DOM usando jquery
m += ‘ejemplo.com’;
$(‘.email).append(m);

Reemplazando ‘@’ y ‘.’ con Entities
xyz&#64;example&#46;com

separando la dirección de email con comentarios
xyz<!– eat this spam –><!– yeah! –>example<!– shoo –>com

Urlencode
xyz%40example.com

Plain Text
xyz@example.com

Acá hay un gráfico con estadísticas de resultados usando estas diferentes opciones:

El grafico anterior fue creado por Silvan Mühlemann

Detectar dirección y rotación

Ayer estuvimos discutiendo con Eduardo un poco sobre su tutorial para detectar la dirección y la rotación en Flash. Su comienzo esta muy bien pero analizamos que tenía un par de fallas. Además él también nombró que le gustaría animar el traslado del avion para que no sea tan brusco, a esto lo realizaremos usando una clase para tweeners.

La primera en realidad no es una falla, sino más bien el deseo que el avión gire hacia la dirección de traslado, lo cual trae un nuevo problema que es hacia donde gira. Por defecto si en Flash sólo se usa rotación el giro que efectúa es en sentido horario, por lo cual a veces esto puede ser muy raro cuando es más rápido girar hacia el otro lado. Hay varias formas de detectar ésto y la que discutíamos es simplemente detectar el angulo de rotación actual restarle 360 y listo. Pero mientras discutiamos con Eduardo que formula utilizar encontré un propiedad/plugin dentro de la clase Tweenmax que no sólo te hace la rotación al ángulo deseado sino que también detecta hacia donde es el giro más corto.

1
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:270}});

Con shortRotation nos evitamos tener que hacer el calculo nosotros y decide hacer el giro en sentido horario o antihorario según cual sea más corto

Ahora el otro problema es que cuando movemos el mouse no lo hacemos en un movimiento perfecto hacia arriba o abajo o hacia los laterales, en realidad siempre existen una componente hacia arriba, abajo o laterales . una especie de ruido.
Para solucionar este problema empecé por detectar manualmente en donde se encuentra el mouse y hacia donde se mueve. Luego hago los cambios de giro solamente cuando el movimiento es 100% hacia los costados o 100% hacia arriba o abajo. De esta forma se evita que haya pequeño intentos de cambiar el gira cuando en realidad es sólo ruido.

El código completo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import com.greensock.*;
import com.greensock.easing.*;
 
function Start()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);
}
 
Start();
 
var prevX = 0;
var prevY = 0;
var curX = 0;
var curY = 0;
var dirX:String = "";
var dirY:String = "";
 
function CheckDirection(e:MouseEvent)
{
var dirHorizontal:String = obtenerDireccionHorizontal();
var dirVertical:String = obtenerDireccionVertical();
trace("movimiento en X : " + dirHorizontal + ", movimiento en Y : " + dirVertical);
TweenMax.to(avion_mc, 1, { x:mouseX,y:mouseY});
hacerGiro(dirHorizontal,dirVertical);
e.updateAfterEvent();
}
 
function hacerGiro(dirHorizontal,dirVertical)
{
if (dirHorizontal == 'derecha' && dirVertical == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:90}});
}
else if (dirHorizontal=='izquierda' && dirVertical == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:270}});
}
if (dirVertical == 'arriba' && dirHorizontal == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:0}});
}
else if (dirVertical=='abajo' && dirHorizontal == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:180}});
}
}
 
function obtenerDireccionHorizontal():String
{
 
prevX = curX;
curX = stage.mouseX;
 
if (prevX > curX)
{
dirX = "izquierda";
}
else if (prevX < curX)
{
dirX = "derecha";
}
else
{
dirX = "none";
}
return dirX;
}
 
function obtenerDireccionVertical():String
{
prevY = curY;
curY = stage.mouseY;
if (prevY > curY)
{
dirY = "arriba";
}
else if (prevY < curY)
{
dirY = "abajo";
}
else
{
dirY = "none";
}
return dirY;
}

Para que les funcione tienen que bajar la clase tweenMax para AS3 desde: http://www.tweenmax.com

Acá el ejemplo funcionando:

Esto requiero Flash player 9

noten que cambié la resolución a la misma resolución del iPhone, el próximo post será como portar esto a una aplicación de iPhone.

Comenzar a desarrollar para Android

Ayer fue a una reunion del Google User Group de Irlanda donde se hbaló principalmente del desarrollo de aplicaciones para android. En esté momento se recomienda dos tecnologías Java y AIR. Siendo JAVA la más correcto ya que se tiene acceso a API completa y se puede desarrollar apuntando a distintas versiones. El desarrollo en AIR es mucho más simple y para aquellos que manejen Flash les va a ser muy fácil la portación. La única dificulta encontrada cuando se desarrolla en AIR es que se requiere que el dispositivo tenga AIR runtime instalado, cosa que únicamente está disponible a partir de Froyo. De lo contrario hay que empezar a incursionar en el desarrollo en JAVA y la herramienta recomendada para esto es Eclipse.

Dejó aquí un par de links que compartieron ayer con video tutoriales y ejemplo de aplicaciones para bajar.

http://android.voxisland.com/

http://eclipsetutorial.sourceforge.net/totalbeginner.html

http://developer.android.com/sdk/adding-components.html

Detectar dirección con ActionScrip 2

Si lo que intentan es detectar hacia que dirección va el cursor del mouse utilizando ActionScript2, les recomiendo utilizar un método que poco conocía que es nativo de Flash, su nombre es “watch“. Esta función analizar una variable y devuelve dos valores uno nuevo “newVal” y otro viejo “oldVal“,  lo cual nos facilita el trabajo si tenemos que desarrollar una pelicula que detecte si el mouse va hacia la derecha o hacia izquierda, arriba o abajo, este método es muy interesante ya que nos permitiría saber si los valores en x e y se incrementan o disminuye lo cual con un simple if podríamos saber hacia donde se dirige el cursor. Esta función también puede servir para activar alertas, cuando una variable cambia, se analiza con watch y cuando se cumple una condición se activa una alarma, se ejecuta una función o simplemente se activa una animación.

Esto también se puede hacer con listeners, pero es mas complejo ya que hay que armar la función que permite comparar el valor viejo con el valor nuevo de la variable mientras cambia. No les aconsejo utilizar onEnterFrame ya que consume muchos recursos.

Ejempo:

Esto requiero Flash player 9

Codigo:

Mouse.hide();
posX = function (dx, oldVal, newVal) {
    if (oldValnewVal) {
        trace("Izquierda");
        avion_mc._rotation = -90;
    }
    return newVal;
};
posY = function (dy, oldVal, newVal) {
    if (oldValnewVal) {
        trace("rriba");
        avion_mc._rotation = 360;
    }
    return newVal;
};
 
this.watch("dirx",posX);
this.watch("diry",posY);
 
this.onMouseMove = function() {
    avion_mc._x = _xmouse;
    avion_mc._y = _ymouse;
    dirx = _xmouse;
    diry = _ymouse;
 
};

Para los que estan trabajando con As3, el método watch no existe mas, por lo cual les dejo una solución AQUI

Clase:

package
{
   import flash.events.Event;
   import flash.events.EventDispatcher;
   public class Model extends EventDispatcher
   {
       public static const VALUE_CHANGED:String = 'value_changed';
       private var _number:Number = Number;
       public function Model():void
       {
           trace('The model was instantiated.');
       }
       public function set number(newNb:Number):void
       {
          _number=newNb;
          this.dispatchEvent(new Event(Model.VALUE_CHANGED));
       }
       public function get number():Number
      {
          return _number;
 
      }
   }
}

Modo de uso:

var objectToWatch:Model = new Model();
objectToWatch.addEventListener(Model.VALUE_CHANGED, onValuedChanged);
 
function onValuedChanged(e:Event) {
   //do what you need here
}

Espero que les sea útil, la próxima me gustaría completar la pelicula de arriba con algo de trigonometría para simular 100% la dirección.