Cristalab |
- Herramientas para comenzar a programar para Android
- Rigging facial con huesos en 3D Autodesk Maya
- Introducción a HTML5 Web Messaging
| Herramientas para comenzar a programar para Android Posted: 14 May 2012 02:05 AM PDT ¿Quieres empezar a desarrollar para dispositivos Android?, si es así, estás en el lugar correcto, en este tutorial veremos las herramientas necesarias para empezar a crear aplicaciones en java para este famoso sistema operativo, y pues, no está de más darnos una idea de cómo funciona esta plataforma haciendo el típico "hola mundo"   Manos a la obra con Java y EclipseComo cualquier otro lenguaje de programación vamos a necesitar un editor de texto, nosotros vamos a utilizar: EclipseEs un entorno de desarrollo integrado de código abierto multiplataforma para crear aplicaciones. Eclipse es usado como la principal herramienta de desarrollo para java, pero también podemos instalar plugins para otros lenguajes.Para utilizar java vas a necesitar el Java Development Kit (JDK) que lo puedes conseguir desde esta página. ¿Pero donde está nuestro IDE? Para descargar eclipse dirígete a su página oficial. Una vez hecho esto ya tenemos lo necesario para empezar a trabajar con java, pero no para Android, ¿entonces qué debemos hacer? ¿Qué necesitamos para trabajar con Android?Lo que vamos a hacer es dirigirnos hacia la página de Android developer, cuando estés dentro de ella haz click en la opción SDK, vas a encontrar un cuadro como este:  Podemos descargar una versión para Mac OS X y para Linux, en la sección se Windows hay dos: uno en formato .zip y otra en .exe. Para que se nos haga más fácil seleccionemos el que nos recomienda la misma página (exe) además así no tendremos que descomprimirlo. Si tienes problemas con la instalación puedes leer esta buena guía: (está en inglés, qué bueno que contamos con google translate).  Una vez descargado e instalado debe quedarnos lo siguiente:  AVD Manager: aquí se encuentran las maquinas virtuales que nos permitirán ver la aplicación en funcionamiento, mas adelante estaremos utilizando esta herramienta. SDK Manager: aquí se encuentran todas las herramientas ya instaladas y las que no hemos instalado, cada carpeta es una versión de Android. Dentro de ellas se encuentra el SDK que es básicamente el elemento que necesitamos para programar. Plugin ADT para eclipseUn Plugin es un complemento que añade función nueva y generalmente muy específica. Esta aplicación adicional es ejecutada por la aplicación principal. Sin salirnos de la página "android developer" vamos a seleccionar el ADT 18.0.0 (es un plugin para el IDE de Eclipse que está diseñado para darle un ambiente potente e integrado) en el menú izquierdo de la página:  Luego se nos mostrarán las instrucciones para añadirlo en eclipse, en una parte de la página vamos a encontrar la siguiente dirección: http://dl-ssl.google.com/android/eclipse/ Copiemos la dirección y ejecutemos eclipse y dirijámonos a help > install new software  Y pegamos la dirección en work with, luego seleccionamos "add", se nos abre una ventana pidiéndonos el nombre que le pondremos al plugin en mi caso yo escribí simplemente "ADT plugin":  Hacemos click en ok y Eclipse estará verificando y llamando a la dirección que le hemos indicado. Todos los elementos que aparecerán luego deben estar seleccionados (select all); damos click en next > next > aceptamos las condiciones de uso > finish. Eclipse se va a reiniciar y nos aparecerá una ventana como esta:  Nos vamos a la opción use existing SDKs y ubicamos la ruta donde se instaló, de lo contrario usamos install new SDK y marcamos la segunda casilla. Terminamos el proceso y listo!! Crear un dispositivo virtualEs algo parecido a usar virtualBox. En eclipse ahora van a aparecer dos iconos en el menú:  El primero es el AVD manager y el segundo es SDK manager, escojamos el segundo para crear una máquina virtual > click en new. Luego nos aparecerán las características del dispositivo:
Para finalizar click en create AVD, si queremos ver en funcionamiento la máquina virtual, click en start:  Ahora, ya podemos empezar a programar y crear un nuevo proyecto android. Crear un "Hola mundo" en AndroidAntes de empezar vamos a tener una serie de carpetas y me gustaría señalar algunas de ellas
 Si lo modificamos en la manera gráfica, automáticamente se genera el código xml, haciéndonos la vida más fácil  .
Código : <string name="hello">Hello World, EjemploActivity!</string> Ha, con que de ahí sale!! En java lo único que se hace es un llamado a ese contenido con: Código : setContentView(R.layout.main); Además, también podemos modificar el texto de un botón llamándolo a través de su nombre. Para crear nuestro propio hola mundo desde java importemos: Código : import android.widget.TextView; Para llamar a TextView, y escribamos: Código : TextView variable = new TextView(this); variable.setText("Hola Mundo"); setContentView(variable); Fácil, creamos un texto visual (que llamamos variable), luego le añadimos el método setText y por último escribimos que se coloque en pantalla el contenido visual de "texto". Espero que este tutorial te haya servido, no olvides dejar tus comentarios.
|
| Rigging facial con huesos en 3D Autodesk Maya Posted: 18 Apr 2012 08:22 AM PDT Haremos uso de Maya y su herramienta de huesos, para añadir elementos individuales de control, que nos ayudarán como manejadores de detalle adicional sobre otros sistemas de animación, como los Blend Shapes para desarrollo facial y otros específicos de otras zonas Asignaremos nuevos controles y conexiones para ajustar la deformación y redirigirla a nuestro gusto, además de aplicar un Skin en la malla del modelo, para controlar y deformar los vértices y las caras como deseemos. Saludos.
|
| Introducción a HTML5 Web Messaging Posted: 10 Apr 2012 01:40 AM PDT HTML5 Web Messaging es una API de JavaScript que permite de una forma segura compartir información entre documentos en el mismo contexto de navegación, sin correr el riesgo de exponer el DOM a un sitio hostil. La especificación está centrada en relegar la comunicación de documentos directamente al navegador, logrando así una implementación hermosa y sin necesidad de intervención del servidor, reduciendo así su carga e incrementando la seguridad en el sitio (teóricamente). En la Web actual es común el intercambio de información entre documentos pertenecientes o no al mismo dominio, no obstante es un problema no muy sencillo de solucionar. Un ejemplo común es cuando se tiene un anuncio publicitario contenido en un iframe alojado en un servidor externo, en el cual se necesita enviar valores relacionados con el contenido de la pagina principal, esto con la finalidad de mostrar un anuncio adecuado. Para automatizar este proceso recurrimos a JavaScript, y lo más sencillo es que el iframe lea de alguna manera la etiqueta meta keywords de la página principal o que esta misma proporcione dicha información; sin embargo, el acceso al DOM desde cualquiera de las partes no está permitido por el navegador, esto debido principalmente a la política del mismo origen –una medida importante de seguridad presente en los navegadores modernos– que admite la comunicación sin restricciones de scripts en documentos del mismo sitio, no siendo así entre aquellos que son diferentes.  Ante esta problemática surgieron algunos mecanismos como Cross-Frame Messaging; una solución que carece de naturalidad, poco elegante y que requiere hacer malabares. [nota:7e3558eab3] En los siguientes ejemplos se han utilizado dominios locales (revisar el apéndice) así como la ultima versión de Google Chrome. [/nota:7e3558eab3] Cross-document messaging: enviando y recibiendo mensajesEl envío de un mensaje es relativamente sencillo, no hace falta más que utilizar el método postMessage de un objeto window referenciado, ya sea de la propiedad contentWindow de un iframe, el objeto devuelto de window.open, o un nombre/indice en window.frames. Código : window.postMessage( Mensaje, Origen ); El primer parámetro es el mensaje que va a ser enviado. Éste puede ser una cadena de texto, un objeto, un array, etc. El segundo parámetro es el dominio de la ventana objetivo, es decir, la ventana que va a recibir el mensaje. Si no se desea especificar un origen en concreto puede utilizarse un asterisco como comodín, sin embargo esto no es nada recomendable ya que deja enormes agujeros de seguridad. Por otra parte si el origen es el mismo que el del emisor puede utilizarse simplemente una barra diagonal: "/" (lamentablemente Google Chrome no soporta este último). También puede añadirse un tercer parámetro, el cual debe ser un objeto MessagePort, pero esto será tratado mas adelante. Enviar un mensajehttp://emisor.com/emisor.html Código : ... <body> <iframe src="http://receptor.com/receptor.html"></iframe> <button>Enviar mensaje</button> <script> var iframe = document.querySelector("iframe"); var button = document.querySelector("button"); var enviarMensaje = function(){ iframe.contentWindow.postMessage("Hola, ¿como estas?", "http://receptor.com"); }; // Al dar click al botón se ejecutar el método enviarMensaje. button.addEventListener("click", enviarMensaje, false); </script> </body> ... Al dar click al botón se enviará un mensaje con el contenido: "Hola, ¿como estas?", al iframe alojado en receptor.com; sin embargo nuestro ejemplo no está completo con sólo enviar el mensaje, también es necesario recibirlo, pero antes de continuar es importante conocer los atributos del evento message que será disparado en receptor.com cuando se reciba un mensaje. Atributos del evento messageEl evento message está compuesto por cinco atributos que sólo pueden ser leídos, que básicamente significa que es imposible alterar el valor de cualquiera de ellos.
Recibir un mensajehttp://receptor.com/receptor.html Código : … <body> <div id="mensaje">Aún no he recibido nada. :(</div> <script> var mensaje = document.querySelector("#mensaje"); var recibirMensaje = function( evento ){ // Verificamos que efectivamente el origen sea de emisor.com if (evento.origin == "http://emisor.com") mensaje.innerHTML = evento.data; }; // Cuando se reciba un evento message se ejecutara las función recibirMensaje. window.addEventListener("message", recibirMensaje, false); </script> </body> … El funcionamiento del ejemplo anterior es simple: se comienza a escuchar al evento message; cuando un mensaje es detectado, se dispara el método recibirMensaje que simplemente verifica que el origen sea el esperado y después se coloca el texto recibido dentro del elemento #mensaje. [nota:7e3558eab3] Si intentan mandar a la consola – console.log(evento) – la información del objeto evento, se darán cuenta que al final les aparece un error. Esto se debe a lo que mencioné al principio, el receptor sólo tiene acceso a la información que explícitamente es enviada, y al colocarlo en la consola está siempre y tratará de imprimir todo el árbol del DOM.[/nota:7e3558eab3] Como pueden ver es igual de sencillo recibir un mensaje, pero deben tener siempre presente que se tiene que verificar que en efecto, el origen sea el esperado, incluso el tipo de dato que se espera: una cadena de texto, un número, un objeto, etc. Además de que es muy importante que se controle el número de mensajes que pueden ser recibidos por minuto, de lo contrario dejarían la puerta abierta a un posible ataque de denegación de servicio. Ahora bien, por qué no extender el ejemplo haciendo que nuestro receptor sea capaz de ser emisor también, y viceversa: http://emisor.com/emisor.html Código : ... <body> <iframe src="http://receptor.com/receptor.html"></iframe> <div id="mensaje">Esperando contestación...</div> <button>Enviar mensaje</button> <script> var iframe = document.querySelector("iframe"); var button = document.querySelector("button"); var mensaje = document.querySelector("#mensaje"); var enviarMensaje = function(){ iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com"); }; var recibirMensaje = function( evento ){ if (evento.origin == "http://receptor.com") // Retrasamos la publicación del mensaje solo para hacerla de emoción. setTimeout(function(){ mensaje.innerHTML = "Receptor: " + evento.data; }, 3000); }; button.addEventListener("click", enviarMensaje, false); window.addEventListener("message", recibirMensaje, false); </script> </body> ... http://receptor.com/receptor.html Código : … <body> <div id="mensaje">Aún no he recibido nada. :(</div> <script> var mensaje = document.querySelector("#mensaje"); var recibirMensaje = function( evento ){ if (evento.origin == "http://emisor.com"){ mensaje.innerHTML = "Emisor: " + evento.data; // Aquí evento.source es una referencia al objeto window del emisor. // evento.origin contiene el origen del emisor: "http://emisor.com" evento.source.postMessage("iPad Pepito, por que solo iPad es «too mainstream».", evento.origin); } }; window.addEventListener("message", recibirMensaje, false); </script> </body> ...Ver ejemplo funcionando en el navegadorMessageChannel y MessagePortHasta ahora sólo hemos visto la primera mitad que compone la especificación de HTML5 web messaging; sin embargo esta también nos provee de un objeto llamado MessageChannel, el cual permite el funcionamiento de dos piezas de código independendientes (ej. corriendo en diferentes contextos de navegación) comunicarse directamente. Por ejemplo: tenemos dos iframes contenidos en un documento: por simple deducción concluimos que están en el contexto de navegación del documento principal; por otra parte, estos iframes entre sí no están en el mismo contexto; a pesar de que están juntos; uno no sabe de la existencia del otro. Otro ejemplo: considera una situación en la cual una red social tiene incrustado un iframe de una libreta de direcciones, y otro iframe que contiene un juego en línea. El juego necesita las direcciones electrónicas de los amigos del usuario, para esto se necesita la información de la libreta de direcciones. Es aquí cuando MessageChannel hace su aparición para hacer este proceso posible, en este caso la red social actuaría como mediador en la comunicación entre ambos iframes. [nota:7e3558eab3] Lamentablemente Firefox todavía no soporta MessageChannel.[/nota:7e3558eab3] Componentes de MessageChannelEl objeto MessageChannel está compuesto por dos puertos (port1 y por2) que no son otra cosa sino objetos de MessagePort, y estos a su vez contienen tres métodos:
MessagePort también contiene el evento onmessage, que puede ser utilizado en lugar de agregar un addEventListener. EjemploCon la finalidad de explicar mejor cómo trabajan MessageChannel y MessagePort, en este ejemplo nos basaremos en el escenario de la red social descrito anteriormente. [nota:7e3558eab3] Por cuestiones de infraestructura se utilizara un mismo origen; sin embargo la estructura es básicamente la misma para orígenes externos.[/nota:7e3558eab3] En primera instancia tenemos la página del juego. Lo primero que haremos es definir una función que se ejecutará cuando la estructura de nuestro documento esté completamente cargada. El objetivo primordial de esta función será el indicar a nuestro documento principal – la red social – que ya está listo para empezar a recibir correos. Para conseguir esto se crea un nuevo objeto MessageChannel, del cual su segundo puerto será enviado en un mensaje al documento principal. Después iniciamos nuestro primer puerto para procesar los mensajes que serán recibidos. http://red-social.com/juego.html Código : … <body> <!-- En #correos serán añadidas las direcciones de correo electrónico que sean recibidas. --> <ul id="correos"></ul> <script> var documentoCargado = function(){ // Definimos las variables que serán utilizadas. var canal, correos, recibirMensaje; // Seleccionamos lo que será nuestro contenedor de correos. correos = document.querySelector("#correos"); // Creamos un objeto MessageChannel. canal = new MessageChannel(); // Esta es nuestra función que será encargada de procesar los mensajes entrantes, // en otras palabras, de publicar los correos que sean enviados desde la agenda. recibirMensaje = function( evento ){ // creamos un nuevo elemento "li" y le añadimos el correo recibido. var correo = document.createElement("li"); correo.innerText = evento.data; // Depues agregamos este mismo "li" a nuestro contenedor de correos (ul#correos). correos.appendChild( correo ); }; // Ahora que el documento esta cargado, le enviamos un mensaje con el puerto dos a la red social (el sitio que contiene este iframe) // diciendo que ya estamos listos para recibir los correos. window.parent.postMessage("¡Estoy listo!", "http://emisor.com", [canal.port2]); // Por el puerto uno escuchamos la llegada de cualquier mensaje. canal.port1.addEventListener("message", recibirMensaje, false); // y abrimos el puerto. canal.port1.start(); }; // Esperemos a que se cargue el DOM. // * esta es la versión con JavaScript puro de $(document).ready() de jQuery. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> … La red social actuará como proxy: será quien enlace el juego con la agenda. Una vez que se reciba el mensaje de parte de la página del juego será enviado un mensaje a la agenda contiendo el puerto para comunicarse con el juego. http://red-social.com/redsocial.html Código : … <body> <iframe src="juego.html"></iframe> <iframe src="agenda.html"></iframe> <script> var documentoCargado = function(){ // Seleccionamos nuestra agenda, la cual esta contenida en el segundo iframe // de nuestro documento. var agenda = window.frames[1]; // Función encarga de procesar el mensaje entrante. var recibirMensaje = function( evento ){ // Le enviamos a la agenda un mensaje avisando que puede empezar // a enviar información a la pagina del juego. Al mismo tiempo, le enviamos // el puerto (port2) por el cual puede comunicarse directamente con la pagina del juego. agenda.postMessage("Puede transmitir", "http://emisor.com", evento.ports) }; // Escuchamos a cualquier evento message que pueda llegar. window.addEventListener("message", recibirMensaje, false); }; // Esperamos a que se cargue el documento. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> ...En la agenda tenemos un simple formulario con una entrada de texto, en el cual serán ingresadas las direcciones electrónicas. http://red-social.com/agenda.html Código : … <body> <!-- Este es el formulario en donde se ingresarán las direcciones de correo electrónico que serán enviadas a la página del juego. --> <form> <input type="email" placeholder="Ingrese e-mail" required> <button>Enviar</button> </form> <script> var documentoCargado = function(){ var recibirMensaje = function( evento ){ // Localizamos nuestro formulario. var formulario = document.forms[0]; var procesarFormulario = function( form ){ // Detenemos el envio del formulario form.preventDefault(); // Leemos el contenido de nuestra entrada de texto. var correo = formulario.querySelector("input").value; // Enviamos el correo ingresado por el puerto recibido en el mensaje (port2) que fue enviado desde la red social. evento.ports[0].postMessage( correo ); }; // Cuando se envíe el formulario se ejecutara la función procesarFormulario. formulario.addEventListener("submit", procesarFormulario, false); }; // Escuchamos a cualquier evento message que pueda llegar. window.addEventListener("message", recibirMensaje, false); }; // Esperamos a que se cargue el documento. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> ...[nota:7e3558eab3] Por cuestiones de legibilidad y simpleza se omitieron todas las validaciones que deben hacerse; validar el origen, el tipo de datos, etc.[/nota:7e3558eab3] Ver el ejemplo funcionando en el navegador.ConclusiónEsta es una tecnología asombrosa que ayudará a hacer la vida mas fácil a muchos desarrolladores, no obstante habrá que esperar un tiempo más, ya que los navegadores principales solo han implementado parcialmente HTML5 web messaging. Referenciashttp://dev.w3.org/html5/postmsg/ https://developer.mozilla.org/en/DOM/window.postMessage http://dev.opera.com/articles/view/window-postmessage-messagechannel/ ApéndicePara simular distintos dominios se agregan entradas al archivo hosts de los dominios deseados, por ejemplo: emisor.com, receptor.com y red-social.com. En Ubuntu y Mac este archivo se encuentra en "/etc/hosts" y "system32\drivers\etc\hosts" en Windows. Se echa a andar un servidor web, como Nginx (aunque vale con cualquier otro como Lighttpd, Cherokee o el tradicional Apache) con los dominios apuntando a una misma carpeta, sin otro motivo más que de comodidad, ya que se tienen los archivos juntos. Archivo hosts Código : 127.0.0.1 emisor.com 127.0.0.1 receptor.com 127.0.0.1 red-social.com Configuración ejemplo de Nginx Código : server { listen 80; # Tres dominios distintos apuntando a la misma carpeta. server_name emisor.com alias receptor.com red-social.com; location / { root /home/jonasanx/public_html; autoindex on; } } Escrito por Jonathan Javier { Twitter: @jonasanx } para Cristalab.com
|
| 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