Toda la informacion sobre el curso esta alli..

La web cuenta con un sistema de Compra Facil por medio de Paypal, paga seguro y accede instantaneamene al producto, registro de usuarios y logeo integrado a Facebook, vizualisador de el curso online, descarga de archivos segura, codigos de descuento, foros para cualquier duda  y seguimiento amplio de los movimientos del usuario (Para la seguridad del mismo).

Otra de las buenas cualidades que le integre pensando en un futuro muy cercano es que por cada compra obtienes desde el 10% hasta el 25% del valor del producto en Dinero Electronico (Valido unicamente en muelalab.com), este dinero lo pueden usar en cualquier compra, otra caracteristica mas es que puedes invitar a tus amigos del Facebook a conocer los productos y por cada amigo que compre algun producto te llevas el 10% en Dinero Electronico.

La pagina por ahora tiene un diseño basico y limpio para facil lectura, esperemos pronto mejorar la parte visual y seguro estaremos añadiendo mejoras mas significativas y mejorando las ya mencionadas.

Por ultimo mencionarles que tenemos por ahora 30 Codigos de descuento, asi que aprovechenlos antes de que se acaben, los codigos son:

• desc2015 – 15 Codigos del 20% de descuento
• desc1015 – 15 Codigos del 10% de descuento

Ahora ya lo saben! El curso esta muy bueno!!  Pueden enpezar a verlo y cualquir duda que pudieran llegar a tener estare siempre atento para responderla.

Curso Desarrollo Aplicaciones En Facebook

Y si les parece bueno y quieren apoyar compartirlo con sus amigos es lamejor manera de hacerlo =)

Productos Muelalab

El curso se le hicieron unas modificaciones, pero fueron para bien, podran ver todos los temas y demas en la web (q les anuncion en cuanto este terminadas las pruebas), al final se paso de 175 minutos de video a 210 Minutos de video (3:30 Horas).. Quedo muy bueno, en si abarca todo lo importante sobre aplicaciones, que seria configuracion, FBML, Graph Api lectura y escritura, Javascript, FQL y permisos extendidos… Va para cualquier usuario de nivel bajo a nivel alto en programacion…

Entonces solo para avisarles que si estamos trabajando en esto y q para el jueves posiblemente ya estara a la venta!!!

saludos y suerte!

El curso ya esta a la venta, pueden encontrar este Producto y proximamente algunos mas en nuestra web de productos http://muelalab.com/productos/

Toda la informacion sobre el curso esta alli..

Ahora ya lo saben! El curso esta muy bueno!!  Pueden enpezar a verlo y cualquir duda que pudieran llegar a tener estare siempre atento para responderla.

Y si les parece bueno y quieren apoyar compartirlo con sus amigos es lamejor manera de hacerlo =)

Productos Muelalab

Antiguo

El Curso ya esta terminado, son aproximadamente 250 Minutos de video, divididos en 20 Tutoriales, en los que “imprimo” todo mi conocimiento sobre desarrollo de aplicaciones para facebook, que me tomo mas de 80 Horas de trabajo y edicion xD!!!!!!!… Claro esta usando todo lo que funciona actualmente (nuevos permisos, graph api, fql y demas..)

En este curso se abarca:

• Configuracion de una aplicacion (1 Video)
• FBML Total (2 Videos)
• Graph Api Facebook (3 Videos)
• Manejo De FQL (2 Videos)
• Old Rest Api (2 Videos)
• Manejo De Javascript SDK (2 Videos)
• Manejo De Informacion (Permisos Extendidos, Obtencion de datos, etc) (2 Videos)
• Integracion Con Bases De Datos (1 Video)
• Integrar CSS, JS y Flash (1 Video)
• Seguridad En Aplicaciones (1 Video)
• Crear Nuestra Aplicacion Completa (Creamos una aplicacion de ejemplo, donde utilizamos TODO lo aprendido, desde registro de usuarios, publicacion en muros, creacion de eventos, panel de control, musica y mas…) (2 Videos)

Ademas:

• Tips importantes (1 Video)
• Que se puede y que no se puede hacer (Texto – muy bueno)
• Codigo de la Aplicacion De Prueba listo
• Ejemplos de aplicaciones (Codigo listo de 3 Aplicaciones totalmente listas de nivel “experto”)
• Guia En PDF con imagenes.

El resultado de estudiarse este tutorial de poco menos de 3 Horas, seria el de comvertirse en un usuario de nivel “avanzado” (si se pudiera medir) en la creacion de aplicaciones para facebook, ademas de que crearimos una aplicacion con todas las funcionalidades de ejemplo, este conocimiento nos permitiria realziar nuestras PROPIAS aplicaciones, ya sea para uso personal o comercial… lo que permitiria ya sea una empresa de diseño web o un freelacer meterse en el NEGOCIO de las aplicaciones en facebook

Bueno ya basta de habladurias, les tengo una medio-mala noticia, yo pense este curso para publicarlo en mi blog gratuitamente, pero hablando con un compañero de mi grupo de trabajo, pues me hizo pensar un poco, son muchas las cosas que tome en cuenta para tomar esta decicion (mi tiempo invertido, el conocimiento integro que recibiran los usuarios, competencia, etc…) y queria ver que opinan, la decicion que tome es venderlo a un bajo costo, no es algo que haga ( de hehco nunca e vendido algo asi).. pero tanto a mis amigos y ami nos parecio un curso con excelente material… Pensandolo pues los usuariso que compren este curso lo pueden ver como uan inversion ya que con el conocimiento que adquiriran van apoder sacarle provecho vendiendo sus aplicaciones a cualquier cliente interesado.. La idea seria venderlo por un costo de unos 30Dolares…

Porfavor opinen, si les parece bien que lo venda (se q diran que no xD!!!!!… pero vean la parte del trabajo y como una inversion, la realidad…), si estarian interesados en comprarlo y si pagarian la cantida de 30 dolares…, espero porfavor que dejen sus opiniones (por que aqui parace blog fantasma xD,, pero eso si a mi correo y messenger me lelgan muchos mail diarios XD pidiendo ayuda! xD!!!)

Un saludo y suerte!!

Como saben las Profile Boxes, son esas cajitas que tiene toda pagina, por defecto Facebook nos pone la Caja de “muro” la caja de “Photos”, etc… Ahora veremos como agregar una caja Personalizada en el perfil de tu pagina, y esto es realmente simple si usamos una Aplicacion ya creada para esteo proposito “Static FBML”

Como colocar Profile Box:
Lo primero que debemos hacer es visitar la aplicacion Static FBML, en la parte izquierda superior veremos debajo de la imagen una serie de opciones, seleccionamos “Add to my Page” o “Agregar A mi Pagina”

Al precionar este link nos aparecera un cuadro con todas nuestras paginas y aplicaciones de Facebook, Precionamos “Add to Page” en la pagina que quermos poner la caja personalizada!..
Una ves hecho esto, nos vamos a nuestra pagina y vamos a “editar Pagina” nos apareceran muchas cositas entre ellas una que dice “static FBML”, ahi precionamos “editar”

Ahora simplemente nos pareceran 2 cuadros de texto uno para ponerle el Titulo que queramos a nuestra caja, y otro para colocar el contenido (puede ser imagenes, texto, etc), este contenido es estatico no puede ser php o javascript..
Escribimos nuestro contenido y damos en “save Changes”

Ahora solo necesitan ir denuevo a su pagina y veras la pestaña aparecer =)!! en caso que no la vean precionan el boton + y ahi les aparecera la seleccionan para que se muestre!!.. Y Listo!! Pueden agregar tantas cajas como sea necesario, esto es como digo una practica muy usada que servira para dar a conocer con mayor impacto su pagina de Facebook

Espero les sea de ayuda y ahi stare publicando otros tutoriales!

Gracias y suerte!

Creamos un nuevo documento de Flash y Actionscript 3, lo ponemosa 24Frames/seg y con un ancho de 480 y un alto de 200, ahora nos descargamos estas imagenes de prueba que usaremos para nuestro ejemplo, una ves descargas (y descomprimidas) simplemente las arrastramos de la carpeta al escenario de flash… Y ahora procederemos a ordenarlas tomamos de una por una y las colocamos cada una a 10px de separacion entre ellas… (Pueden colocar una en X=0 Y=0, la siguiente en X=110 y Y=0 y luego X=220 y asi sucesivamente) una ves ordenadas las seleccionamos todas y las convertimos en MovieClip precionando F8, selecionamos el punto de control en el centro y ponemos como nombre img_mc….

Imagenes Seleccionadas Y MovieClip

Una ves echo esto, seleccionamos el MC en el escenario y en el panel de propiedades le ponemsocomo nombre de instancia “img_mc”, por ultimo colocamos el MC centrado (x=240 y=100)… Listo tenemos el MC preparado empecemos con el codigo, que solo son unas cuantas lineas, seleccionamos el primer frame de la pelicula y en el panel de acciones (F9) ponemos el siguiente codigo:

var minX:Number=35;
var maxX:Number=445;
var mitadEscenario:Number=240;
img_mc.addEventListener(Event.ENTER_FRAME,mover);

Explicacion: Es muy simple, creamos 3 Variables que contienen datos sencillos, la coordenada menor (minX) que el mc img_mc puede tener, la coordenada mayor (estas dos las sacamos simplemente haciendo que el mc quede 10px separado del inio y 10 del final del escenario) y la mitad del escenario…
Luego al MC img_mc le colocamos un listener que ejecutara la funcion “mover” cada ves que se haga el evento ENTER_FRAME…

Ahora nos falta crear esa funcion “mover” que como su nombre lo dice se encargara de mover el MC img_mc.. asi que agregamos estas lineas debajo de las anteriores:

function mover(e:Event){
	var movX:Number= ((stage.mouseX-mitadEscenario)/mitadEscenario)*15;
	img_mc.x+=movX;
	if(img_mc.x<minX){
		img_mc.x=minX;
	}else if(img_mc.x>maxX){
		img_mc.x=maxX;
	}
}

Explicacion: Primero obtenemos un valor que seran los pixeles que se movera el MC, para esto usamos una simple formula (stage.mousex: nos da la pocicion del Mouse en la coordenada X del escenario) y la mejor manera de explicarla seria con un ejemplo: Si tenemos el mouse en la coordenada 20, (stage.mouseX-mitadEscenario) nos dara como resultado -220 (esta parte siempre nos dara un numero entre -240 y 240, dependiendo la pociocion del Mouse), ahora si ese -220 lo dividimo entre la mitad del escenario -220/240 nos dara como resultado -.91 (igualmente al hacer esta division siempre obtendremos un numero entre -1 y 1, dependiendo de la pocicion del mouse!!!! =O…) por ultimo este numero lo multiplicamos por 15 (podria ser caulquier valor) y de esta forma obtenemos un movimiento de pixeles de -13.75 (simepre obtendremos un numero entre -15 y 15)… como ven de esta forma dependiendo la pociccion del mouse, la galeria se movera mas o menos rapido y en la direccion correcta!!!.. =)
Ya teniendo este valor!! se lo sumamos al valor actual de “img_mc” y asi se movera…
Por ultimo tenemos 2 condiciones que simplemente verifican si la pocicion de “img_mc” se sale de alguno de los limites que establecimos antes (minX o maxX) y si es asi entonces lo pociciona directamente en el limite…

Y listo!! tenemos nuestra galeria funcionando facilmente!! pocas lineas de codigo y da un muy buen efecto! esto en ActionScript3 =)…

Espero les haya gustado el tutorial y ya saben que cualquier duda comentario o sugerencia escribanos y estare atento =)!!!..
La proxima ves veremos como hacerla con un efecto 3D … Gracias y suerte!!

Por lo tanto por ahora me queda hablar de un TAG de FBML que es lo mas sencillo, ahora hablaremos del tag bookmark…
Que es?
Es un link de acceso directo a la aplicacion que aparece de lado izquierdo de la pagina de facebook, y estos nos permiten añadir y organizar nuestras aplicaciones mas usadas…

Colocar Boton Bookmark:
En realidad es muy sencillo colocar un boton de bookmark en tu aplicacion, como cualquier otro tag de FBML, solo abrimos nuestra aplicacion para editar el codigo (y recuerden tener configurada la aplicacion para usar FBML) y colocamos el siguiente codigo donde queremos que aparesca el boton

<fb:bookmark/>

Simpleeeee, ahora los usuarios de tu aplicacion pueden agregar a su barra de favoritos tu aplicacion =)

suerte y gracias!

Vamos a empezaar..
Antes que nade tienen que tener ya una apllicacion configurada…

1.- Login con Facebook Connect
Creamos un nuevo documento .php o .html, y comenzamos colocando este codigo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Muelalab.com :: Publicar Con Api Facebook</title>
    </head>
    <body>
</body>
</html>

Esto es necesario siempre que vayamos a utilizar la graph Api, Ahora entre los tag escribimos el siguiente codigo, cambiando las xxxx por tu Aplication ID:

<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'xxxxxxxxx', status: true, cookie: true, xfbml: true});
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());

Esta es la manera mas eficiente de cargar la SDK javascript en la pagina, lo que hace el metodo FB.init es inicializar las librerias SDK… aca hay mas info, igual el div “root” siempre debe estar colocado…

Ahora usaremos otro metodo FB.Events.subscribe que nos permite registrar algunso eventos como son login y logout, vamos a cambiar el codigo anterior y colocamos este:

<div id="fb-root"></div>
        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: '124092184283992', status: true, cookie: true, xfbml: true});
                FB.Event.subscribe('auth.login', function(response) {login();});
                FB.Event.subscribe('auth.logout', function(response) {logout();});
                FB.getLoginStatus(
					function(response){
                    if(response.session){login();}
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());

De esta forma cuando el usuario se hga login se ejecutara la funcion login, cuando le usuario haga logout, se ejecutara la funcion logout… y por ultimo tenemos otro metodo FB.getLoginStatus que este verifica si el usuario ya estaba logeado (auto-login) y si es asi entonces ejecuta la funcion login…

Ahora falta crear el boton de login, para esto usaremos lel tag fb:login-button y como saben tenemos que pedir permisos para poder obtener informacion “privada” del usuario, el codigo para el boton seria:

<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>

Como ven aqui estamos requiriendo que el usuario otorge permisos para poder publicar, obtener us email, y otros mas…
Bueno por ahora el codigo completo estaria asi:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Muelalab.com :: Publicar Con Api Facebook</title>
    </head>
    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({appId: '124092184283992', status: true, cookie: true, xfbml: true});
                FB.Event.subscribe('auth.login', function(response) {login();});
                FB.Event.subscribe('auth.logout', function(response) {logout();});
                FB.getLoginStatus(
					function(response){
                    if(response.session){login();}
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());
        </script>
    <fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
</body>
</html>

2.- Publicando con la Graph Api
Ahora crearemos 3 funciones, la funcion de login la funcion de logout y la funcion para estas 3 usaremos la graph api, escribimos el siguiente codigo dentro de el tag script:

function login(){
                FB.api('/me', function(response) {
                    alert(response.name + " se ha logeado.!");
                });
            }
            function logout(){
                alert("Hasta luego!");
            }
            function Apipublish(){
                var mensaje = 'Aprendiendo A Publicar Con La Graph Api Desde muelalab.com';
                FB.api('/me/feed', 'post', {message:mensaje}, function(response){
                    if(!response || response.error) {
                        alert('Error!');
                    }else{
                        alert('Se Ha Publicado');
                    }
                });
            }

Las funciones login y logout son sencillas (en este caso), simplemente cuando son llamadas muestran un mensaje, en el caso de usar FB.api(‘/me’… estamos requieriendo a la Api nuestra informacion, entre ellas esta el “name”…
Para la funcion de Apipublish hace uso del metodo FB.Api() que hace una llamada al HTTP POST a http://graph.facebook.com/me/feed con un mensaje como parametro… y ese mensaje sera el publicado en el feed (wall) del usuario.. Aca mas info de la Api

Y listo ya tienen su funcion para publicar! logicamente solo hay que llamarla.. para eso podrian ahcerlo con un link de la siguiente forma…

<a href="#" onClick="Apipublish(); return false;">Publicar En Muro Usando La Graph Api</a>

Espero les ea util!! y estare habalndo mas sobre la Graph Api, les dejo el codigo de mi ejemplo para escargar…
Cualquier duda/sugerencia/comentario es bueno para mi!

muchas gracias y sueerte!!

Pero bueno sigamos!… ahroa vamos a ver como obtener por medio de la Graph Api alguna informacion del usuario logeado…
Aqui les dejo un ejemplo:
http://muelalab.com/ejemplos/tutos/facebook/info.php

Vean el ejemplo!… Entre la informacion que podemos acceder esta la siguiente:

• ID: El id del usuario logeado
• first_name: Primer nombre
• last_name: Apellido
• name: nombre completo
• link: un link hacia el perfil del usuario
• about: el texto que aparece debajo de la imagen del perfil
• birthday: fecha de cumpleaños
• work: lo que tenga escrito en la casilla trabajo
• education: lo que tenga en la casilla educacion
• email: Su correo electronico
• website: su pagina web

Como ven esos son los datos que podemos acceder de un USUARIO, como lo hariamos!.. mas q simple!! (ya se los habia dicho en el tutorial anterior pero parece q nadie experimento ni me hizo caso XD!!!)
Lo que haremos es seguir EXACTAMENTE el tutorial de Graph Api Facebook Tutorial hagan el tutorial y pruiebenlo.. una ves les funcione, podran acceder a la informacion del usuario simplemente ahciendo algo como esto:

echo '<h3>Mis Datos</h3><br>';
echo '<img src="https://graph.facebook.com/'.$uid.'/picture"><br>';
echo $me['name'];
echo "<br>Email: ".$me['email'];
echo "<br>Cumpleaños: ".$me['birthday'];
echo "<br>About Me:".$me['about'];

Calro ese codigo lo agregan al index.php donde imprimimos los datos… y listo tendran accesos a esa informacion! =)!!
Espero les sea de ayuda!! y seguire colocando tutoriales!! de hecho ya tengo un muy buen ejemplo preparado!! es cuestion de escribir el tutorial!! sigan visitandonos, recomendandonos y sobre todo comentando!! hasta un gracias es bueno y si tiene dudas con gusto las resolvemos!!

Suerttee!!

Empecemos, Primero crearemos dos nuevos MovieClips, sencillo dibujamos dos cuadros seleccionamos uno y lo convertimos en MC precionando F8, les damos cualquier nombre y luego hacemos lo mismo con el otro, una ves hecho esto, les damos un nombre de instancia en el panel de propiedades (Ctrl+F3) a uno le ponemos “miClip” y al otro “miClip2“… listo tenemos dos clips!!
Ahora creamos un campo de texto de tipo Dinamico, y le ponemos como nombre de instancia “texto”, este servira pra mostrarnos que esta pasando… =)..
Ahora seleccionaremos el primer frame de la pelicula (preferiblemente el de la capa superior) y en el panel de acciones (F9) escribimos el siguiente codigo:

function arrastrar(e:Event):void{
	miClip.startDrag();
}
function soltar(e:Event):void{
	miClip.stopDrag();
}
miClip.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
miClip.addEventListener(MouseEvent.MOUSE_UP,soltar);

Explicacion: Este codigo hace posible que el MC “miClip” se peuda arrastrar (drag&Drop), la explicacion ya esta en el tutorial de Drag y Drop…

Ahora si probamos la pelicula el MC “miClip” se podria arrastrar, pero ahora encesitamos verificar cuando este sobre el MC “miClip2″, para eso usaremos el enterFrame y hitTest.. asi que debajo del codigo anterior escribimos el siguiente codigo:

miClip.addEventListener(Event.ENTER_FRAME,checa_choque);
function checa_choque(e:Event){
	if(miClip.hitTestObject(miClip2)){
    texto.text="Ah!! Chocaron!!!";
	}else{
	texto.text="No Se Tocan =)!";
	}
}

Explicacion: Como ven añadimos un listener a “miClip” que se encargara de ejecutar la funcion “checa_choque” mientras este el evento “Enter_Frame” (que este es mientras que el clip este en escena), luego la funcion “checa_choque” verifica si el clip “miClip” esta chocando con el objeto “miClip2″ (linea 3), si es asi modifica el texto “texto” para avisarnos que esta chocando, en caso contrario… pues no indica lo contrario XD!!..

Como ven sigue siendo simple, sin embargo es un poco mas de codigo que en ActionScript 2, talves por ahora no vean muchas ventajas en AS3.. pero mientras avancemos en el nivel de programacion veremos las ventajas de ActionScript3… Espero les sea de ayuda y cualquier duda aqui estoy con gusto… dejen sus comentarios!..

Gracias y suerte!!

Estoy pendiente con el tutorial de publicar con la graph api de facebook, posiblemente mañana este aqui (pasa que estoy con un nuevo proyecto y 0 tiempo =(!!..) pero estare poniendo por aqui segurismo!
gracias y suerte!!