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.

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

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:

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.

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

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:

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.

Ahora el problema es que en general cuando uno crea gráficos para pantallas, especialmente para la web lo hace en 72 dpi cuando los nuevos gráficos para retina debieran ser en 326.

Otro problema es que todavía hay dispositivos sin la nueva pantalla retina, lo que se traslada a que necesitamos duplicar la cantidad de gráficos: los comunes y los de mayor densidad de pixeles. Aún más necesitamos una manera de decidir cual mostrar, osea detectar que es un dispositivo con retina y mostrar los gráficos correspondientes de lo contrario seguir usando los gráficos comunes.

Con éste problema en mente encontré un plugin de jQuery que soluciona éste problema. Su implementación es súper sencilla.

<script src="js/jquery.retina.js" type="text/javascript"></script> 
<script type="text/javascript">  
     $(document).ready(function() { 
          $('img').retina(); 
     }); 
</script>

http://troymcilvena.com/post/998277515/jquery-retina

La idea de este post es de notar que hay varias respuesta para el mismo problema y no siempre la típica, usual o común es la más acertada en cuanto a productividad. Hay que estar atentos si ven en la web formas más eficaces de hacer las cosas. si quieren recomendar algo que hayan visto mandenos un mail o dejen un comentario y lo publicamos

Fomation: http://mattnull.com/formation

El CSS es algo como lo siguiente:

.button { border-top: 1px solid #96d1f8; background: #d66565; background: -webkit-gradient(linear, left top, left bottom, from(#7d3e9c), to(#d66565)); background: -moz-linear-gradient(top, #7d3e9c, #d66565); padding: 8.5px 17px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #cdf227; font-size: 13px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #28597a; background: #28597a; color: #c400c4; } .button:active { border-top-color: #030303; background: #030303; }

acá dejo el link: http://css-tricks.com/examples/ButtonMaker/#