Author:
Andrés Argüello Pitt
ago
9
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.
Author:
Andrés Argüello Pitt
ene
23
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@example.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
Author:
Andrés Argüello Pitt
sep
11
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.
Author:
Andrés Argüello Pitt
sep
10
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
Author:
Eduardo Martin
sep
9
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.