Cristalab |
- Reemplazar elemento en movimiento con una animación en After Effects
- Instalar Wordpress de forma local con Xampp
- Introducción a Backbone.js : Modelos
- Detección y manejo de sensores en Android
| Reemplazar elemento en movimiento con una animación en After Effects Posted: 28 May 2012 04:59 AM PDT Usando de nuevo la herramienta rastreador en After Effects, capturaremos el movimiento de un elemento, reemplazándolo con una composición animada, con toques de estilo futurista añadidos que crearemos con formas básicas, para incorporarla en el material original. Para completar el resultado, ajustaremos la fusión del conjunto y los colores para obtener la mayor calidad en la unión, añadiendo efectos de resplandor que darán el toque final de realismo necesario. Saludos.
|
| Instalar Wordpress de forma local con Xampp Posted: 28 May 2012 04:28 AM PDT Aquí les traigo este videotutorial donde les enseñaré a convertir su pc en un hosting local instalando Xampp, para realizar pruebas y así poder trabajar más cómodamente con Wordpress.
|
| Introducción a Backbone.js : Modelos Posted: 30 Apr 2012 06:43 AM PDT Con el pasar del tiempo en el mundo del desarrollo web, hemos visto la aparición de cientos de Frameworks con el objetivo de agilizar el proceso de desarrollo. Javascript no ha sido ajeno a esta corriente y hoy día podemos encontrar Mootools, Dojo, Ext Core, Prototype y jQuery entre otros más.  A pesar de ser tan poderosas herramientas de desarrollo, ninguna posee algún tipo de lineamiento o estructura para crear nuestro código y con el pasar del tiempo nos vamos llenando de una cantidad de líneas y archivos en JS con un montón de selectores y funciones por todos lados (Código Spaghetti). Hoy hablaremos sobre Backbone.js, una librería Javascript creada por Jeremy Ashkenas, el mismo señor que ha creado CoffeeScript . Esta librería nos da la posibilidad de implementar el patrón de desarrollo MVC en Javascript además de otra gran cantidad beneficios. Backbone.js posee cuatro clases principales:
[nota:fc148f99de]El siguiente tutorial es obtenido a partir de la lectura de otros tutoriales, la documentación de Backbone.js y las experiencias durante este proceso.[/nota:fc148f99de] Manos a la obraPrimero vamos a crear una estructura HTML desde donde llamar nuestros archivos JS. Código : <!DOCTYPE html> <html lang="es"> <head> <meta charset='utf-8'> <title>Introduccion a Blackbone.js + Mustache.js</title> </head> <body> <!-- script --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/underscore-min.js"></script> <script type="text/javascript" src="js/backbone-min.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html> [nota:fc148f99de]Blackbone.js requiere estrictamente la librería Underscore.js para funcionar. Esta debe ir primero que blackbone.js[/nota:fc148f99de] ModelEn Backbone.js los modelos son el corazón de nuestra aplicación, imaginémoslos como un conjunto de atributos y métodos de la forma {key:value} donde los valores pueden ser funciones, objetos o arreglos. Código : (function(){ var DesarrolladorModel = Backbone.Model.extend(); })(); De esta forma hemos extendido todos los métodos y atributos de la clase Backbone.Model en DesarrolladorModel .Agreguemos algunos atributos a nuestra clase DesarrolladorModel: Código : (function(){ var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); })();La función initialize como su nombre lo indica se ejecuta automáticamente al crear una nueva instancia de nuestro modelo. Por el momento no veremos ningún cambio. [nota:fc148f99de]El atributo "defaults" nos permite definir valores por defecto para nuestro modelo.[/nota:fc148f99de] Ahora vamos a crear una instancia de nuestro modelo DesarrolladorModel: Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; })();Si nos fijamos en nuestra consola, vamos a ver el mensaje que definimos en la función del atributo initialize. Para ver que atributos posee nuestro nuevo modelo puedes hacer esto: Código : console.dir(desarrollador.attributes); También podemos definir unos atributos durante la creación del modelo: Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); })();Podemos definir atributos aun después de creado el modelo a través del método .set(): Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); })();Para obtener los atributos individuales de cada modelo podemos usar el método .get(): Código : desarrollador2.get("editor");Ahora vamos a crear un método para nuestro modelo que nos permita agregar lenguajes de programación a las instancias. Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ //Obtenemos lenguajes del model var array_lenguajes = this.get('lenguajes'); //Adicionamos el nuevo lenguaje array_lenguajes.push(nuevoLenguaje); // Redefinimos el atributo lenguajes this.set({lenguajes:array_lenguajes}); } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();Bueno, hasta ahora nada del otro mundo, un montón de objetos con funciones dentro podrían decir ustedes, por eso seguimos con lo bueno de esta librería. En Backbone.js podemos asignar eventos de escucha, es decir, cuando un atributo del modelo cambie generamos un evento particular. Cuando la propiedad editor de nuestro modelo cambie, dispararemos un evento que genere un mensaje en consola: [nota:fc148f99de]En este caso pondremos en escucha el evento desde el atributo "initialize", pero también puede ser llamado desde la instancia del modelo.[/nota:fc148f99de] Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); // Escuchando cambios para el modelo this.on("change:editor", function(){ console.log("Has modificado el editor"); }); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ var array_lenguajes = this.get('lenguajes'); array_lenguajes.push(nuevoLenguaje); this.set({lenguajes:array_lenguajes}); } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();En la consola debemos estar visualizando el mensaje que definimos en el evento change:editor. Si deseáramos que el evento se iniciara al modificar cualquier atributo del modelo lo haríamos retirando el valor de change para que escuche sobre cualquier atributo. Código : this.on("change", function(){ ... }); Como dije anteriormente también podemos llamar el evento desde la instancia de nuestro modelo. Código : desarrollador.on("change:editor", function(){ ... });Otra función de las muchas que poseen los modelos de Backbone.js es validate, la cual nos permite realizar validaciones previas a los cambios que se apliquen a las instancias de nuestros modelos. Imagina que la función validate es un policía que te chequea antes de entrar, Si cumples con los requisitos te dejará pasar y podrás realizar tus actividades. Pero si no los cumples no te dejará pasar y mandará un mensaje de error. Realizaremos una validación en nuestro modelo que se encargará de verificar si el editor de uno de nuestros desarrolladores (instancias de modelo) es Dreamweaver. Luego tendremos un evento en escucha de este error que nos genere un log en la consola con el mensaje de error. Código : (function(){ // Crear modelo var DesarrolladorModel = Backbone.Model.extend({ initialize: function(){ console.info("Nuevo modelo de: DesarrolladorModel"); this.on("change:editor", function(){ console.log("Has modificado el editor"); }); // Evento a la escuha del error this.on("error", function(model, error){ console.log(error); }); }, defaults:{ nombre: "Pepito Perez", edad: 24, lenguajes:[] }, addLenguaje: function(nuevoLenguaje){ var array_lenguajes = this.get('lenguajes'); array_lenguajes.push(nuevoLenguaje); this.set({lenguajes:array_lenguajes}); }, // Funcion de validacion validate: function(attributes){ if(attributes.editor == "Dreamweaver"){ return "Dreamweaver no es un editor permitido!"; } } }); // Crear instancia var desarrollador = new DesarrolladorModel; // Crear otra instancia cambiando valores var desarrollador2 = new DesarrolladorModel({ nombre: "Mario marito", edad: 19, lenguajes: ["Javascript", "C"], editor: "Sublime Text 2" }); // Agregando atributos posteriormente desarrollador.set({editor: "Notepad++"}); desarrollador.set({editor: "Dreamweaver"}); // Agregar nuevo lenguaje desarrollador.addLenguaje("Python"); })();Según lo anterior, en nuestra consola deberíamos tener dos mensajes. El primero con el mensaje de cambio de editor realizado correctamente y el segundo avisándonos que Dreamweaver no es un editor válido. La función validate es muy sencilla. Recibimos los atributos, los verificamos y retornamos un mensaje de error. Código : // Funcion de validacion validate: function(attributes){ if(attributes.editor == "Dreamweaver"){ return "Dreamweaver no es un editor permitido!"; } }El evento on.("error") ubicado en el atributo de initialize recibe el modelo donde se produjo el error y el mensaje de dicho error. Finalizando la actividad que disparó el evento sin que ésta se lleve a cabo. Código : // Evento a la escuha del error this.on("error", function(model, error){ console.log(error); });[nota:fc148f99de]Podemos obtener valores de los atributos aplicando el método ".get()" al modelo que recibimos en el evento error.[/nota:fc148f99de] De esta forma terminamos el primer tutorial de Blackbone.js y modelos. Los invito a que lean la documentación que es muy completa y con ejemplos para todos los métodos. En el segundo tutorial de Blackbone.js trataremos las vistas. Espero que este haya sido de su agrado. [nota:fc148f99de]Yo también soy novato en el mundo de Blackbone.js, cualquier duda o sugerencia trataremos de resolverla entre todos. @vlycser  [/nota:fc148f99de]
|
| Detección y manejo de sensores en Android Posted: 30 Apr 2012 06:25 AM PDT Una de las características que más llamó la atención desde el primer dispositivo Android, es la implementación de diferentes tipos sensores, los cuales no parecen tener límites en los nuevos dispositivos que salen a la luz (¿De verdad se necesita un barómetro en el móvil?) y a la par de ello, su implementación a través de código se realiza de manera sencilla y rápida. Para el manejo de los diferentes sensores disponibles es necesario hacer uso de estas clases:
Crear la Interfaz a utilizarPara poder ver los cambios registrados por los sensores de nuestros dispositivos, vamos a implementar en nuestra interfaz dos TextView que nos permitirá mostrar el valor de los cambios ocurridos en nuestros sensores. Código : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id = "@+id/etiqSensorDeMovimiento" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/etiqSensorDeMovimiento"> </TextView> <TextView android:id = "@+id/sensorDeMovimiento" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"> </TextView> <TextView android:id = "@+id/etiqSensorDeOrientacion" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/etiqSensorDeOrientacion"> </TextView> <TextView android:id="@+id/sensorDeOrientacion" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"> </TextView> </LinearLayout> Crear la ActividadLa actividad que vamos a crear hereda de Activity para otorgarle las características de una actividad e implementa SensorEventListener para el registro de cambios en el sensor. Código : public class SensorActivity extends Activity implements SensorEventListener{Definir las variables a utilizarEn este caso, he definido 5 variables del tipo Sensor, los cuales utilizaré para guardar una instancia de cada sensor que pueda detectar usando un objeto de SensorManager, y 2 objetos de TextView, los cuales ya definimos en la interfaz y modificaremos a través de código. Código : private SensorManager sensorManager = null; private Sensor sensorDeTemperatura = null; private Sensor sensorDeProximidad = null; private Sensor sensorDeLuz = null; private Sensor sensorAcelerometro = null; private Sensor sensorDeOrientacion = null; private TextView textViewAcelerometro = null; private TextView textViewOrientacion = null; Detección de SensoresPara poder obtener instancias de los sensores embebidos en el dispositivo Android, se utiliza SensorManager a través de la llamada al método getSystemService() que nos retorna un servicio a nivel de sistema, dependiendo del parámetro que le pasemos, en este caso SENSOR_SERVICE, pues queremos hacer uso de los sensores. Una vez inicializado sensorManager, podemos hacer uso de este objeto para solicitar instancias de los diferentes tipo de sensores haciendo uso del método getDefaultSensor() y añadiendo el tipo de sensor que queremos como parámetro. Código : public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); sensorManager = (SensorManager) getSystemService(SENSOR_SERVICE); sensorDeProximidad = sensorManager.getDefaultSensor(Sensor.TYPE_PROXIMITY); sensorDeTemperatura = sensorManager.getDefaultSensor(Sensor.TYPE_TEMPERATURE); sensorDeLuz = sensorManager.getDefaultSensor(Sensor.TYPE_LIGHT); sensorAcelerometro = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); sensorDeOrientacion = sensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION); Registro del manejador de Eventos de los sensoresExiste la posibilidad de que nuestro dispositivo no tenga todos estos sensores que pensamos, por ejemplo, en el dispositivo que yo estoy utilizando no hay sensor de Temperatura, por lo que siempre es buena idea hacer un filtro que nos permita identificar con cuáles sí contamos, y añadir el manejador de eventos de acuerdo a eso. El siguiente código lo hace de una manera sencilla: si el sensor existe, registra el manejador de eventos usando el método registerListener() del objeto sensorManager, al que se le pasa como parámetros la clase que está implementando la interfaz SensorEventListener, el sensor que se quiera registrar y la velocidad de registro de cambios en el sensor. Código : if(sensorAcelerometro == null){ Toast.makeText(getApplicationContext(), "No hay Sensor movimiento", Toast.LENGTH_SHORT).show(); } else{ Toast.makeText(getApplicationContext(), "Hay Sensor de movimiento", Toast.LENGTH_SHORT).show(); sensorManager.registerListener(this, sensorAcelerometro, SensorManager.SENSOR_DELAY_NORMAL); } if(sensorDeProximidad == null){ Toast.makeText(getApplicationContext(), "No hay Sensor de Proximidad", Toast.LENGTH_SHORT).show(); } else{ Toast.makeText(getApplicationContext(), "Hay Sensor de Proximidad", Toast.LENGTH_SHORT).show(); sensorManager.registerListener(this, sensorDeProximidad, SensorManager.SENSOR_DELAY_NORMAL); } if(sensorDeLuz == null){ Toast.makeText(getApplicationContext(), "No hay Sensor de Luz", Toast.LENGTH_SHORT).show(); } else{ Toast.makeText(getApplicationContext(), "Hay Sensor de Luz", Toast.LENGTH_SHORT).show(); sensorManager.registerListener(this, sensorDeLuz, SensorManager.SENSOR_DELAY_NORMAL); } if(sensorDeTemperatura == null){ Toast.makeText(getApplicationContext(), "No hay sensor de Temperatura", Toast.LENGTH_SHORT).show(); } else{ Toast.makeText(getApplicationContext(), "Hay sensor de Temperatura", Toast.LENGTH_SHORT).show(); sensorManager.registerListener(this, sensorDeTemperatura, SensorManager.SENSOR_DELAY_NORMAL); } if(sensorDeOrientacion == null){ Toast.makeText(getApplicationContext(), "No hay sensor de Orientacion", Toast.LENGTH_SHORT).show(); } else{ Toast.makeText(getApplicationContext(), "Hay sensor de Orientacion", Toast.LENGTH_SHORT).show(); sensorManager.registerListener(this, sensorDeOrientacion, SensorManager.SENSOR_DELAY_NORMAL); }Registro de Variables de la InterfazEsta parte es sencilla, es sólo inicializar los TextView definidos en la interfaz anterior Código : setContentView(R.layout.main); textViewAcelerometro = (TextView) findViewById(R.id.sensorDeMovimiento); textViewAcelerometro.setTextSize(30); textViewOrientacion = (TextView) findViewById(R.id.sensorDeOrientacion); textViewOrientacion.setTextSize(30); } Implementación de los métodos de la InterfazLa Interfaz SensorEventListener nos pide implementar 2 métodos:
Código : @Override public void onAccuracyChanged(Sensor arg0, int arg1) { } @Override public void onSensorChanged(SensorEvent arg0) { synchronized (this){ float[] masData; float x; float y; float z; // TODO Auto-generated method stub switch(arg0.sensor.getType()){ case Sensor.TYPE_PROXIMITY: masData = arg0.values; if(masData[0]==0){ textViewAcelerometro.setTextSize(textViewAcelerometro.getTextSize()+10); } else{ textViewAcelerometro.setTextSize(textViewAcelerometro.getTextSize()-10); } break; case Sensor.TYPE_ACCELEROMETER: masData = arg0.values; x = masData[0]; y = masData[1]; z = masData[2]; textViewAcelerometro.setText("x: " + x + "\ny: "+y + "\nz: "+z); break; case Sensor.TYPE_ORIENTATION: masData = arg0.values; x = masData[0]; y = masData[1]; textViewOrientacion.setText("x: " + x + "\ny: "+y); break; default: break; } } }En este caso se ha implementado de manera que muestre en un TextView las variaciones registradas por los sensores. RecomendacionesEl uso de los sensores requiere de más energía por parte de la aplicación a diferencia de las que no lo hacen, por lo que es recomendable liberar al manejador de eventos cuando se vaya a salir de la aplicación e implementarla de nuevo cuando se vaya a hacer uso de ésta nuevamente. Esto se puede hacer de la siguiente manera: Código : @Override protected void onResume() { super.onResume(); sensorManager.registerListener(this,sensorManager.getDefaultSensor(Sensor.TYPE_PROXIMITY),SensorManager.SENSOR_DELAY_NORMAL); } @Override protected void onPause() { sensorManager.unregisterListener(this); super.onStop(); }Espero les sea de utilidad este tutorial, dudas, preguntas, quejas o sugerencias, nos encontramos en los comentarios más abajo, si les gustó no se olviden de compartir =) ENJOY!!!
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario