Responsive design, media queries
Diseño de respuesta y media queries una técnica para crear website que se puedan ver adecuadamente en distintos dispositivos tanto tablet, como smartphone ademàs de desktop. Este vídeo tutorial pretende ayudar a aquellos desarrolladores frontend que busquen información para el uso de esta técnica
Validar Formularios con VANADIUMJS
Validar formularios del lado del cliente es algo que solemos hacer los desarrolladores frontend a menudo, una librería que permite hacerlo de manera rápida entre otras muchas (como el validate de jquery) es VANADIUMJS, dejo aquí un pequeño video tutorial de como sacarle el jugo .
Tutorial Sublime text 2, fragmentos de código que se repiten
Un tutorial de como hacer las cosas más rápidas con Sublime text 2
Tutorial Sublime Text 2 snippet
Sublime text 2 es un editor de código muy potente, he decidido hacer pequeños tutoriales con trucos interesantes para los desarrolladores frontend que nos ayudarán a ser más productivos, el primero de estos vídeo tutoriales trata sobre los snippet o fragmentos de código.
<span style=»text-align:center; display: block;»></span>
Airkinect 2 en FlashDevelop
Mi mayor problema siempre ha sido el día en que se vencio mi licencia de prueba de Flash Builder, es por eso que busque una manera de correr Airkinect en Flash Develop, encontre mucha documentación para la version 7.1 de airkinect pero no para la versión 2, es así que decidí hacer un tutorial de como correr airkinect 2 en Flash Develop, para todos aquellos que quieran iniciarse en la programación con Kinect y Air.
Primero deben considerar que deben tener un kinect y el sdk instalado en su máquina, la manera de instalar y de donde sacar el sdk se encuentra aquí :
http://www.kinectforwindows.org/
Lo segundo que deben considerar es que deben tener el core de airkinect y lo descargan de aquí :
http://as3nui.github.com/airkinect-2-core/
Este es el vídeo tutorial :
El código con el que llame a la cámara depth es el siguiente
package
{
import flash.display.Sprite;
import com.as3nui.nativeExtensions.air.kinect.Kinect;
import com.as3nui.nativeExtensions.air.kinect.KinectSettings;
import com.as3nui.nativeExtensions.air.kinect.data.SkeletonJoint;
import com.as3nui.nativeExtensions.air.kinect.data.User;
import com.as3nui.nativeExtensions.air.kinect.events.CameraImageEvent;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
/**
* …
* @author Luis Rodriguez
*/
public class Main extends Sprite
{
private var kinect:Kinect;
private var bmp:Bitmap;
private var skeletonContainer:Sprite;
public function Main():void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.nativeWindow.visible = true;
if(Kinect.isSupported())
{
bmp = new Bitmap();
addChild(bmp);
skeletonContainer = new Sprite();
addChild(skeletonContainer);
kinect = Kinect.getDevice();
kinect.addEventListener(CameraImageEvent.DEPTH_IMAGE_UPDATE, depthImageHandler);
var settings:KinectSettings = new KinectSettings();
settings.depthEnabled = true;
kinect.start(settings);
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
}
protected function depthImageHandler(event:CameraImageEvent):void
{
bmp.bitmapData = event.imageData;
}
protected function enterFrameHandler(event:Event):void
{
skeletonContainer.graphics.clear();
for each(var user:User in kinect.usersWithSkeleton)
{
for each( var joint:SkeletonJoint in user.skeletonJoints)
{
skeletonContainer.graphics.beginFill(0xff0000);
skeletonContainer.graphics.drawCircle(joint.depthPosition.x, joint.depthPosition.y , 3);
skeletonContainer.graphics.endFill();
}
}
}
}
}
Luis Rodriguez Martinez 