MuelaLab Blog: Tutoriales Diseño Web, flash, Facebook, php, Actionscript.

Curso Desarrollo De Aplicaciones Para Facebook

Beunas, bueno no e colocado mas tutoriales por que tengo algo de trabajo (Y) mas que nada… Sin embargo estas vacaciones ademas de mi trabajo estube Desarrollando un curso para crear aplicacion para facebook, que pensaba publicar aqui para su descarga..

El Curso ya esta terminado, son aproximadamente 175 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!!

Profile Boxes Facebook Tutorial

Hola hola, ahora veremos una forma sencilla de crear las llamas Profile Boxes o Cajas de Perfil para pagians de Facebook!..
Como saben hoy en dia lsa Paginas de Facebook son muy comunes y actualmente se utilizan para llevar a tu empresa a la fama (xd), es la forma mas facil de promocionar tu empresa.

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”
Agregar Static FBML

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!!.. Profile Box con Static FBMLY 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!

Tutorial Galeria Finita ActionScript 3

Ahora vamos a hacer uno Tutorial de Actionscript3, para realizar una galeria de imagenes Finitas, de cierta forma es un tutorial super basicoooooo, pero sirvie bien para los que estan migrandose o comenzando con AS3, ademas la idea de este tutorial es crear una galaeria simple, pero luego veremos como aplicar un efecto 3D a la misma que le dara un toque mucho mas vistozo! :) … Por ultimo cabe decir que para realizar este ejemplo necesitas tener como minimo la version de Flash CS3.
Este sera el resultado final:

This movie requires Flash Player 8

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

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 =)!!!..Descarga De Archivos Muelalab.com
La proxima ves veremos como hacerla con un efecto 3D :) … Gracias y suerte!!

Tag ‘bookmark’ FBML Facebook

Hola hola, bueno ahor mismo tengo problemas con la PC y estoy sin Flash, dreamweaver, photoshop ya saben todos esos programas que nos encantan U.u!!! (sin embargo ahroa mismo ya estoy instalandolos!)

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!