5 nov
2012

Game Jam en el centro cultural San Martin 10-11 de noviembre 2012

Game Jam centro cultural san martin

Me entero via Agustin Perez Fernandez de la realizacion de una Game Jam, pensada para los que recien se inician en la industria de los videojuegos, copio y pego la informacion publicada en este hilo de duval.vg:

¿Quieren hacer videojuegos y no saben como empezar? 

Estamos organizando un taller mezcla de Jam de videojuegos para personas sin o con poca experiencia. El espíritu de la GAME JAM consiste en crear rápidamente prototipos de videojuegos. Surgió en el ámbito independiente como una forma de generar nuevas ideas originales.

¿Cómo?

Los vamos a hacer crear juegos a partir de templates de géneros conocidos

¿Quienes?

Van a tener orientación de cuatro mentores con experiencia en el desarrollo de juegos:

Programación y Diseño:
Agustín Pérez Fernández (Tembac)
Martin Sebastian Wain (Nitram)

Arte y Diseño Gráfico
Fernando Calabro
Agustina Muller

Producción
Alejando Iparraguirre

¿Quien se puede anotar?

¡Todos!

La actividad está orientada a personas sin experiencia en desarrollo de videojuegos, interesadas en aprender e interiorizarse en la realización de videojuegos. Se organizará en 8 grupos de 3 o 4 personas cada uno, conformados por artistas y programadores o personas con conocimientos técnicos básicos.

El evento va a ser libre y gratuito y va a estar incluido dentro de otro evento más grande de arte digital llamado Noviembre Electrónico.

Inscripción: http://tinyurl.com/gamejamsanmartin

¡Tenemos pocas vacantes así que deben apurarse para inscribirse!

¿Cuando?

10 y 11 de noviembre de 10hs a 20hs.

 

5 nov
2012

Piwik, el reemplazo a google analitycs

Hoy les quiero hablar de piwik, para mi, un reemplazo perfecto de google analitycs, verdaderamente muy flexible y extensible por donde se lo mire.

Que es piwik?

Piwik es un software de estadisticas (llamadas en ingles analitycs) que nos permite medir de donde, como, cuando y hacia donde se dirigen nuestros usuarios en nuestra web. Las estadisticas son fundamentales para todo sitio que quiera cumplir un objetivo, nos permite saber como los usuarios estan encontrando nuestro sitio, a partir de que informacion de la que ofrecemos es indexada por los buscadores, que visitas vienen por las redes sociales, cuanto tiempo se quedaron en nuestro sitio etc..

Caracteristicas de piwik

Yo considero a piwik uno de los mejores software para estadisticas, un perfecto reemplazo de google analitycs, que es por ahi el mas usado y conocido de todos. Tiene una interfaz muy intuitiva, esta traducido en decenas de lenguajes, ademas de mostrar todo tipos de datos como:

  • Visitas e impresiones
  • Tiempo de permanencia del usuario
  • Paginas que visito el usuario por session/ip/pais
  • Palabras claves por las que ingresaron nuestros usuarios al sitio (por medio de los buscadores)
  • Sitios de referencia, sitios por los cuales entraron a el nuestro
  • Paginas de salidas y de entradas (por donde ingresan los usuarios a nuestro sitio y por cuales se van del mismo)
  • Se pueden definir campañas, y objetivos
  • Creacion de reportes y exportacion de datos

Como ven, tiene todo lo necesario para saber todo sobre nuestro sitio :)

Y para los programadores?

Lo que mas me gusta de piwik, es la poderosa RESTAPI que viene lista para usar, donde podemos obtener toda esta informacion que vemos en el panel de control, directamente. La API es muy flexible, ademas nos permite generar registros customizados para poder capturar eventos customizados (por ejemplo, con la API de javascript, podemos capturar visitas a paginas que no existan en nuestro site, pero que por ejemplo, hagan referencia a alguna caracteristica en especial). Tambien la API nos permite integrar todo este sistema de trackeo en una aplicacion propietaria, para mostrar los datos donde y como queramos, registrando en las secciones que necesitemos, filtrando la informacion general y mostrando solo lo que necesitemos.Tambien Piwik cuenta con un sistema de modulos, donde podemos programar nuestros propios modulos y agregarle funcionalidades especificas.

Conclusion

Sin mas, los invito a visitar su pagina oficial donde pueden descargar la ultima version, existe una comunidad muy activa y hay actualizaciones permanentes. Ademas, la instalacion es muy sencilla, en solo 7 pasos, requiere mas que nada de una bases de datos, y esta listo para usar. En terminos de consumo de recursos, no puedo darles precisiones, yo tengo andandolo con varios sitios que registra a unos 5000 usuarios diarios y unas 20.000 pageviews, y no consume practicamente nada, asi que no creo que sea un problema en la mayoria de los alojamientos que vemos hoy en dia con soporte de php.

 

3 nov
2012

flixel o no flixel

Flixel

Flixel

Una herramienta por muchos conocida por su facil y rapida implementacion, usada por muchos devs en la industria de los web games. pero la pregunta es, ¿es flixel una herramienta util? obviamente la respuesta es SI, o por lo menos al prinicipo asi parece, pero entonces porque estoy haciendo este post? si, es una herramienta maravillosa y si asi lo crees entonces deja de leer y a otra cosa, ahora si tenes duras sobre usar o no flixel te puedo ayudar un poco.

Que tiene de bueno?

  1. te permite sacar juegos muy rapidamente sin muchos conocimientos
  2. una comunidad activa y muy buena
  3. usa pixel blitting por lo que el renderizado es rapidisimo sobretodo con soporta miles de objetos en pantalla (aunque realmente no se si es algo realista porque en los juegos raramente se usan miles de objetos en la misma pantalla)
  4. se puede modificar todo lo que uno quiere, aunque el codigo es medio chancho y al principio cuesta un poco.

Que tiene de malo?

  1. codigo muy sucio y dificil de modificar
  2. muchas funciones de fisica y cosas que tal vez no usemos, pero que estan ahi consumiendo recursos
  3. mucho juegos usan flixel por lo que tu juego va a tener la marca flixel impresa y le va a costar mas diferensiarse del resto
  4. dificil de integrar con otras librerias, como por ejemplo box2d entonces

flixel es para mi o no? la respuesta es: si sos nuevo y estas empezando, si es para vos si ya tenes experiencia lo mas facil es hacerte tu propio engine, justo a tu medida, porque una vez que se empieza a concer bien como funciona flixel se puede sacar todo lo que esta “de mas” y aumentar muchisimo mas el rendimiento.

3 nov
2012

Que es node.js y con que se come?

nodejs logo

Para ser un poco sensacionalista, seria la vedette de la web de hoy (un rial en potencia el tipo :P ). Quiero hacer una pequeña introduccion a node.js, sobre que es, para que sirve y sus principales caracteristicas, mas adelante tendremos articulos que van a ir deatallando diferentes API’s y modulos que son muy utiles y populares.

Javascript en el servidor y algo mas.

La forma mas simplista de definirlo, seria esa, el poder ejecutar javascript del lado del servidor. Javascript siempre ha sido un lenguaje utlizado en la parte del cliente, en el navegador (y en otros ambitos, como lenguaje de scripting de engines de videojuegos por ejemplo), no existia hasta la aparicion de node.js, una forma rapida y sencilla de ejecutar javacript del lado del servidor. Node.js logra esto creado una plataforma sobre el motor de parseo de javascript de chrome, el famoso v8. Asi, permite crear aplicaciones escalables,flexibles, de alta flexiblidad en cuanto a I/O (por su estructura en base a eventos), lo que permite el instanciamiento de procesos y es ideal para aplicaciones en tiempo real.

A pesar de que efectivamente node.js depende de javascript, tenemos un modelo diferente al usado por muchos lenguajes del lado servidor y lenguajes en general. Este modelo es llamado   non-blocking I/O, donde no existen hilos de ejecucion (como existen en c++ o en java) sino que todo es manejado por un unico proceso, que hace las tareas fundamentales para poder devolver lo que requiere el usuario por medio del evento y procesa cualquier tarea secundaria (como escribir un archivo, insertar un registro en una bases de datos) la hace de manera independiente, asi el usuario ya hubiera terminado la conexion o la interaccion con node.js.

Para lograr este modelo basado en eventos, se usa un patron diferente de programacion al que se ve normalmente en javascript, lo que se llama, funciones asincronicas. El ejemplo en el javascript “comun y corriente” mas facil que tenemos, es la funcion setInterval que recibe como parametro una funcion directamente, que es ejecutada cada X cantidad de milisegundos. En node.js por ejemplo, tenemos las funciones que acceden al sistema de archivos, por ejemplo, para obtener el estado de un archivos:

1
2
3
4
5
var fs=require('fs');

fs.stat('ruta/al/archivo',function(statObj){ /* esta funcion se va ejecutar en algun momento, pero el ciclo de ejecucion sigue */  console.log('funcion ejecutada') });

console.log("foo");

En este ejemplo, le pasamos una funcion como parametro, pero al ser asincronica, el ciclo de ejecucion sigue, por lo tanto, muy probablemente, se ejecute primero el console.log(‘foo’) que el console.log(‘funcion ejecutada’). En este ejemplo parece muy sencillo, pero en un codigo en produccion, donde tenemos variables a las que se les cambia de valor en algun punto del codigo, o donde debemos usar un loop para hacer una accion repetitiva, tener un control y coordinacion de la ejecucion de las funciones asincornicas es fundamental (por ejemplo, con el uso de closures).

Otra cosa importante para destacar de node, es el uso de modulos a diferencia del javascript que tenemos en el browser, donde usualmente usamos una tag <script> para incluir un nuevo modulo/clase/funcion, en node usamos la funcion require(‘modulo’) asignandolo a una variable, para su uso. Esta funcion puede tomar tanto modulos inhertes en su API (como en el anteior ejemplo, ‘fs’), como tambien rutas directas a archivos, donde tengamos nuestros propios modulos. Tambien node.js cuenta con un gestor de modulos propios, llamado npm donde con un simple comando podemos instalar modulos de manera local (para el projecto que estemos desarollando actualmente) como de manera global (para todos los projectos dentro de nuestro OS).

Soporte, produccion, y otras yerbas

Hace un tiempo largo que node.js esta en el ambiente, tiene un soporte muy variado y extenso de API’s y de modulos, para bases de datos, para networking muy variado (un punto fuerte de node.js es tener modulos como express.js que nos permite servir paginas directamente desde node, sin apache o nginx, o socket.io que nos permite abrir conexiones persistentes en con el usuario, ideal para aplicaciones en tiempo real, videojuegos y demases), para servicios, como twitter, facebook y etc.. A mi parecer esta bastante maduro, aunque no lo reconozco como reemplazo de lenguajes con mas años como php, no por que sea mejor o peor, sino por que la cantidad de programadores y de soporte a nivel hosting de node.js es limitado a unas cuantas opciones, y probablemente, para un projecto simple de una tienda virtual, o un sitio empresarial, no sea la mejor idea (por la manotencion a corto y mediano plazo por parte del cliente si por alguna razon no quiere mas de nuestros servicios). En cambio, lo veo como un reemplazo genial de lo que personalmente yo usaba a Java, para crear aplicaciones de servidor, que respondan a pedidos (como servidor de chat, un software de monitoreo, etc..), te permite desplegar una aplicacion de este tipo en una fraccion de tiempo de lo que podrias hacerlo en java o cualquier otro lenguaje.

Sin mas, prometo segui escribiendo en detalle sobre node.js, hay muchooo que contar, que experimentar tambien, por lo pronto, los invito a que miren un poco su documentacion y bajarse sus instaladores disponible para todas las plataformas.

3 nov
2012

Conociendo Selenium IDE plugin

selenium-ide

selenium-ide

Una parte del proceso de desarrollo de cualquier aplicacion, es el llamado QA (abreviacion de Quality Assurance). Basicamente es el proceso (tedioso para mi gusto :P ) por el cual probamos nuestra aplicacion en (y los) entornos en los que deberia ser ejecutados, probando cada una de sus funciones, para verificar que todo funcione correctamente. Para realizar QA, hay muchas formas, y dependiendo la aplicacion que estemos desarrollando, los metodos varian. Una de ellas, es la que vamos a comentar un poco hoy, que es Selenium IDE, una aplicacion open source, que viene en diferentes sabores, entre ellos, como plugin de firefox, ideal para probar nuestras aplicaciones web.

Introduccion al QA

Como dije anteriormente, el QA es una tarea tediosa, basicamente, por que es una tarea repetitiva en la cual deben probarse todas las caracteristicas de nuestra aplicacion, tanto en condiciones ideales como adversas, para asegurar la calidad de la misma. Toda aplicacion debe pasar un proceso de QA (o por lo menos lo que deberia hacer cualquier profesional/empresa seria), en el caso de las aplicaciones web, es aun mas importante, teniendo en cuenta la fragmentacion de navegadores, de plataformas, etc.., y teniendo en cuenta todas las tecnologias que convergen en un mismo producto, resulta fundamental, no solo hacer un QA final, sino uno total por cada cambio que se le hace a la aplicacion (asi sea en el proceso de arreglo de bugs o en el agregado de features). Formas de testear una aplicacion hay muchas, como los unit testing, smoke testing, en este caso, Selenium nos permite crear scripts personalizados emulando el uso real del usuario para nuestro testeo.

Emulando nuestro user

Como dije, selenium nos permite emular acciones del usuario. Todo puede ser emulado por selenium, programando las acciones necesarias. Podemos hacer clicks en elementos de la aplicacion, esperar a que se ejecuten, chequear condicionales (por ejemplo, si el resultado de nuestra accion anterior, resulto como queriamos) y dependiendo de estos condicionales, realizas mas acciones o no. Selenium nos va a avisar por cada accion que no pueda ser ejecutada (por que un condicional fallo, por que se cumplio un tiempo de espera, o por que no existia el elemento que queriamos utilizar). La interfaz del plugin es muy intuitiva, es muy facil saber que hace cada accion y podemos customizarla escribiendo scripts en javascript. Ademas, podemos guardar estos script para ejecutarlos mas adelante, ideal cuando implementamos una nueva carateristica y queremos saber si todo lo que funcionaba, lo sigue haciendo :P .

Tips con selenium

AJAX

ajax fue una de las caracteristicas que hizo famoso a javascript, el poder cargar contenido dinamico cambio la web completamente, pero para nosotros los programadores, debuggear estas llamadas al servidor, pueden ser un martirio. Selenium lo hace facil, ya que nos permite testear estas acciones de 2 formas, o ejecutamos la accion que va a disparar nuestro evento que hara la llamada de ajax, y ponemos a esperar selenium X cantidad de milisegundos para chequear, por si la llamada se completo. La otra, es usar el comando waitForCondition  que va a ejecutar una funcion hasta que la condicion se cumpla (por ejemplo, si la funcion de ajax debe insertar X informacion, chequeamos hasta que exista).

Acceder a elementos de la pagina

Para los scripts condicionales de selenium, normalmente es necesario acceder a algun elemento de la pagina, para saber si existe, o tiene las propiedades correctas y verificar su funcionamiento. Esto lo hacemos con:

1
this.page().findElement('locator');

Guardar resultados de los scripts

Si por ahi ejecutamos una funcion directamente desde selenium o necesitamos guardar el resultado de un script escrito en el mismo, lo pueden grabar y acceder de la siguiente manera:

1
storedVars['foo'];

Conclusion

En fin, eso es toda la introduccion que queriamos dar a Selenium, una herramienta muy poderosa, a la que hay que perderle el miedo, que segun tengo entendido (y lo tengo como materia pendiente para un proximo post ;) ) hasta puede ser ejecutado en paralelo, para simular un load testings de usuarios reales (o tomar metricas de aquellas funciones que son las mas intensivas a nivel recursos bajo grandes cargas de trabajo). Es una herramienta con una curva de aprendizaje muy corta, que espero les ahorre mucho tiempo :D

 

1 nov
2012

Por que programas en php?

siempre me gusto el elefante como imagen de php, aca tiene uno tipo vector

Hace tiempo, lei este post de  , entre otras cosas, creador de instapaper y tumblr. Y me senti identificado al 100% en todo lo que describia. Quiero compartir algunos pensamientos y experiencias al respecto.

Un poco de historia personal

Empece a programar web hace mas de 6 años, (en mis puberes 17 años), mis comienzos en la programacion nacieron de lenguajes mas tradicionalistas, como c y c++ para despues pasar a java. La cuestion de aprender php, fue exclusivamente laboral, necesitaba empezar a ganar algun dinero, y laburos webs habian (y hay) en cantidad y no pedian muchos requerimientos. Personalmente la mayoria de las cosas las aprendi de manera autodidacta, php no fue la excepcion, pero reconozco, que al aprenderlo de manera apresurada, me llevo a tomarme demasiadas libertades, en un lenguaje que es tan flexible, que te hace propenso a cometer muchisimos errores que se ven a largo plazo. PHP es un lneguaje con una curva de aprendizaje muy corta para proyectos chicos, podes estar haciendo cualquier cosa en unas par de horas, por la cantidad inmensa de funciones que te soluciona los tipos mas comunes de problemas, tipos dinamicos de variables, etc.. pero a largo plazo, si no se aprende una conducta de trabajo, usando algun patron/framework/arquitectura, se puede convertir, a veces sin notarlo, en una base codigo inmantenible.

Soy un adicto a php

Siempre he dicho que un verdadero programador, aquel que aprendio a despertar lo que yo llamo “el pensamiento abstracto” puede programar en cualquier lenguaje. Y aunque es verdad, a esta frase le falta exactitud. No es que no se pueda, pero llegar a la excelencia de una persona que ya lleva 1-2-3 años programando en ese lenguaje, te va a llevar mas, o el mismo tiempo. Basicamente por que aunque todos los lenguajes tienen puntos en comun (como alguna parte de sintaxis, o el manejo de datos etc..), lo mas costoso es aprender la API y lo nombres de funciones en si, para que y como se comporta cada uno y sus “mañas”. Esto no se aprende de otra forma mas que con tiempo. Por eso soy un adicto PHP, por que me permite completar projectos, no es el lenguaje ideal, tiene muchisimas fallas, el manejo de memoria es horrible, tiene inconsistencias por varios lados, muchos modulos dependen de la configuarion puesta en el servidor (y mantener el servidor y actualizar sus versiones es otro dilenma), es inseguro por default y demanda mucho practica y conocimientos varios hacerlo verdaderamente seguro, pero hoy dia lo elegiria para hacer mi proximo projecto, por que su penetracion en la web es mas importante que cualquier otro lenguaje (tanto en terminos de hosting como en terminos de fuerza de trabajo), va a seguir teniendo el mismo soporte que ahora y con suerte, arreglara los puntos flojos que tiene en el largo plazo.

La tecnologia esta para que nos sirva, no al revez

En una charla con otro programador, en algun momento, te vas a pelear por algo. Es fija, es una ley universal, nos peleamos por php vs ruby, windows vs linux vs mac y un largo etc.. a veces es divertido, otras veces es enriquecedor, pero la mayoria de las veces no sirve de nada.A los seres humanos nos gusta idolatrar nuestras creaciones, ser parte de algo, y programar en un lenguaje en especifico, donde por ahi nos da una satisfaccion laboral/monetaria/personal, nos lleva a esto. Pero nos olvidamos, que esto son simplemente lineas de codigo, que no existirian sin nosotros, por lo tanto, nunca se debe olvidar, que cualquier pieza de tecnologia, es para mejorar nuestra calidad de vida, ayudandonos a crear nuevas cosas, expresiones de nuestra sociedad, de nuestra humanidad, ayudandonos a comunicarnos mejor, a en definitiva, innovar nuestra vida. Cualquier pieza de tecnologia que no cumpla con este objetivo, es totalmente inservible. Por eso, si al vecino de enfrente le gusta programar en perl y le sirve, le reditua, le da trabajo o simplemente lo hace vivir, dejalo ser :D

30 oct
2012

Hype: La espada de damocles

los simpson deberia estar en algun billete de algun pais, true story

Les traigo opiniologia barata para este martes lluvioso (por lo menos en argentina) :D . Hoy vamos a hablar del hype o como le decimos por estas tierras, el vender humo.

Hype/Vender humo? WTF?

Para aquellos que no conozcan la terminologia, o no esten muy metidos en el tema, el vender humo o hacer “hype” es estimular la espectacion por un producto, evento o cosa de la cual uno es parte o protagonista. Esta tecnica se utiliza para poder hacer crecer el nivel de importancia de esto que queremos promocionar entre nuestro objetivo de mercado. A veces esto se hace exagerando, otras a veces hasta mintiendo si es necesario. Y por que hacemos esto? por la misma razon que una publicidad de desodorante te pone una femina a medio vestir, para vender. En este articulo quiero hacer incapie en 2 sectores de tecnologia que usan el hype casi a diario y los efectos positivos como negativos del mismo.

Hype en productos

  • La nueva red social que revolucionara la internet para X mercado
  • La nueva app de fotografia mobil que va a revolucionar el mercado de smartphones
  • La nueva app que va a darte conversiones por social media x 20

Estos tipos de enunciados, se ven a diario en internet, en foros o blogs sobre startups (mas que nada web). Son muy lindos, es verdad, y normalmente, atraen a muchas personas a una plataforma/app/site nuevo. El problema radica es que, cuanto mas alto el hype, mas riesgo se corre de decepcionar al usuario y asi perder hasta la base de usuarios mas fiel que tengas. La realidad es que, aunque nos dejemos, no nos gusta ser engañada, por eso mismo lo que se promete, debe ser cumplido, sino, no va a ser algo que dure a largo plazo.

Como ejemplo de hypes en productos que salieron mal, tenemos varios, simplemente por nombrar algunos:

  • quora.com: Prometio ser la nueva revelacion en una comunidad de preguntas y respuestas. Despues de un crecimiento desmesurado en los primeros meses, no logro el atractivo a largo plazo que necesito para mantener su base de usuarios. hoy no lo usa nadie verdaderamente.
  • Daikatana: Viejo, pero el ejemplo mas claro de una muerte por hype y en la industria de los videojuegos. Creado por jhon romero, despues del grandioso exito de doom, llego hasta a insultar a sus jugadores para levantar aun mas hype. Decepciono a medio mundo, no tanto por que el juego fuera tan malo (para la epoca, tenia varios avances interesantes) pero se pavoneo demasiado y nunca estuvo a las espectativas
  • MySpace: El primer prototypo de red social, como fue el primero, agarro la primer ola de early adopters, pero cuando vino la competencia, no supo cumplir con lo prometido, una verdadera interconexion entre sus miembros. Igual, vi la nueva interfaz del nuevo myspace, y me gusto mucho, quien te dice, todavia puede dar batalla

Como prenderse fuego a si mismo por Jhon Romero

Hype en tecnologia/metodos/lenguajes

Y a donde mas queria llegar, era al hype en lo que es la tecnologia en si, probablemente la que mas me molesta, y la mas peligrosa de todas (por lo menos para aquellos que trabajamos todos los dias). Con esto quiero referirme, por ejemplo, a la fiebre que sufrimos hoy en dia con el bendito html5 ahora, todo es html5, por que es la denominacion de moderno, de estable, de lo que viene, del futuro del futuro. lo mas gracioso, es que no existen aplicaciones html5. Y ahora vienen todos a matarme :P pero es la verdad, html5 no es un tipo de aplicacion, es solo una nueva version del estandar que usamos hace años, con nuevas API’s y nuevas tags, es verdad, pero que probablemente solo un 20% de estas apps usen algo verdaderamente html5 (y ese 20% son juegos o cosas intensamente visuales que usan tags como camvas, local storage a morir y alguna que otra cosa).

Pero, es el estandarte de batalla, y le ponemos html5 a todo, aun a aquello que usa el mismo plugin de jquery para un slide que se usaba hace 4 años hasta antes de que siquiera se dijera html5 en una reunion de devs. Y tambien asi, engañamos a clientes, para verderles, obviamente, que esto es HTML5! pero al mismo tiempo, otros (como yo, me incluyo) soportamos clientes que te preguntan si tu plugin, app, o si programas en html5, cosa que normalmente explico lo mismo que explico aca, pero a veces, el cansancio, solo me deja responder con un “Yes sir”.

Y no crean que este hype afecta solo a los clientes, tambien les lava el cerebro a los puberes devs que recien empiezan en esto, y como normalmente tienen todas las pilas de recien empezar, defienden a muerte lo indefendible. Esto lleva a discusiones interminables sin ningun tipo de aprovechamiento para ninguna de las partes. Lo gracioso, es que como normalmente este tipo de devs no labura en entornos de produccion (o lo hace de manera sectorizada) sus implementaciones de “html5″ normalmente son en cosas personales. No se dan cuenta que al dia de hoy, pocas cosas de html5 se pueden implementar de manera real, basicamente por que el soporte de sonido es inexistente, la performance de canvas y otros elementos de para la animacion o produccion de contenido interactivo, varia muchisimo dependiendo el agente (navegador, webview etc..) y la plataforma y un largo etc..

Conclusion

Es momento de dejar de quejarme no? :P como resumen, veran que el hype, es una herramienta, pero debe usarse con moderacion, sino, como bien dice el titulo, se convierte en una espada de damocles, para nosotros y a veces, para los demas, implcitamente.

29 oct
2012

Se viene la EVA 2012 !

EVA 2012

El evento mas importante (y unico (?)) de la industria de los videojuegos se hace este viernes y sabado, asi que si te interesa algo de esta industria, no te la podes perder ! Aca abajo podes ver el cronograma con todo lo que tienen preparado :D

Personalmente, siempre voy a decir que yo a la EVA le debo mucho. Conoci mucha gente muy copada, aprendi muchisimo y aunque hoy dia no estoy tan metido en la indutria por que ando mas en la web que otra cosa, creo que el grupo humano que se encuentra en la misma, es inigualable. Particularmente sobre esta EVA, las charlas de postmorten son para no perderselas, hay varios workshops y tambien va a estar el stand indie, asi que con eso solo, ya tienen suficiente razon para ir. Lo unico, espero que no den otra vez esa cintita de mierda para el brazo como acreditacion, el pueblo quiere credenciales carajo !

Para mas informacion, pueden ir a la pagina de la EVA o a su pagina de Facebook. Gracias a ADVA por poner toda la onda en organizar este evento todos los anios

29 oct
2012

Sistemas de templates

gracias a http://agileblaze.com/ por la imagen ilustrativa

Este articulo va a combinar varias cosas, desde opinion, a experiencias propias, y va a ir de php a javascript al final, raro no? Espero ser lo suficientemente claro para poder hacerles entender lo que pienso en este aspecto. Primero, empecemos por lo basico:

Que es un sistema de templates?

Un sistema de templates se le llama a un framework/clases/funciones que se encargan de abstraer la vista/diseño de la obtencion de la informacion misma a ser mostrada al usuario (por ejemplo, nuestro index.php de un sitio obtiene toda la informacion que necesita de la DB, archivos etc.. y se la pasa al sistema de templates para que la muestre junto al codigo html/css/js que componen finalmente lo que se le muestra al usuario).

Sistemas de templates en web

Mas alla de la obvia ventaja de poder separar datos de la vista a nivel arquitectura de una aplicacion, hay que tener cuidado al usar y elegir un sistema de template. Algunos puntos claves que aprendi (a la manera dificil por cierto) es que para que un framework/sistema de template sea util a largo plazo.

  • No debe usar ningun pseudo lenguaje, solamente php: uno de los sistemas mas conocidos de templates es smarty (no lo voy a ni a linkear…). Este fue para mi, el primer (y ultimo) sistema de templates para php que use. Voy a reconocerlo, al principio, me parecio genial, con un monton de caracteristicas, funciones etc.. Lo implemente en un sistema de mediana envergadura, y cuanto mas codigo le empece a agregar, peor fue, cada vez consumia mas recursos hasta que se hizo inmantenible. Smarty usa un pseudo lenguaje, que es parseado y convertido en php. Esto requiere de procesos extras sin sentido, ademas que hace dificil a nuevos devs no acostumbrados a usarlo, a trabajar con sus archivos.
  • Debe tener una forma facil de cachear contenido, mejor si es a multiples destinos: El cachear contenido es uno de los pilares de la web, ya que es la unica forma de poder servir contenido al usuario en caso de alta demanda. Un sistema de templates tiene que tener una forma facil de crear y actualizar la cache en caso de cambios, y si es en diferentes formatos, mejor (archivos, memcache etc..)
  • En lo posible, debe isolar las variables/funciones disponibles para la template a ejecutar: Como paranoico de la seguridad, y al tener que ejecutar codigo php, es ideal que el sistema pemita declarar especificamente (o bindear) funciones y variables que solo van a ser usadas en la template y solo esas sean accessible (ademas de las estandar de php, por supuesto). Asi evitamos que la template pueda obtener datos sensibles que pueden ser de acceso global (como credenciales de bases de datos y etc..).

Por ahi no tengan la necesidad de evaluar esto en el futuro si estan obligados a utilizar un framework, pero si algun dia necesitan elegir un sistema de templates o un framework, son puntos importantes a tomar en cuenta.

El cambio de roles con el 2.0

Aquellos que vieron por lo menos la mitad de la evolucion de la web, se daran cuenta que cada vez mas funciones que antes se hacian en php (o no se hacian :P ) se trasladaron a la vista, al cliente con javascript. Transiciones, carga de datos, cambios dinamicos. Esto no tiene solo que ver con aliviar la carga del servidor, ya que todo esto se hace en la maquina del cliente, sino tambien en ofrecer una experiencia mas rica, visual, y disfrutable a los ojos y experiencia del usuario. Pero tambien trajo problemas en el mantenimiento a largo plazo del contenido, el cacheo del mismo y de mantener una organizacion y mantenimiento de codigo entre la vista procesada por el servidor y la vista procesada por el cliente.

Todo lo que sean transiciones, normalmente es encargado a un framework (conjunto de) JS que hace todo esto (jQuery, Backbone, etc..). Pero yendo a un punto mas primitivo, todo es html como base de transiciones, como contenedor de datos, y para los que lo han echo, saben que escribir html con JS, puede ser tremendamente engorroso. Tambien, atrae a un problema en estructuras de empresas donde no se tienen diseñadores capacitados en JS para mantener esta basica contruccion de html.

Por suerte, existe Plates, que es un sistema de template, pero para JS. En este, no es necesario construir html con JS, sino que puede cargarse dinamicamente (via AJAX) o puede estar en una string y plates lo va a parsear en elementos DOM directamente. Actualmente estoy desarrollando un projecto que utiliza Plates intensivamente, asi que mas adelante tendre datos certeros del mismo, pero me resulta interesantisimo mover la vista directamente (y en lo posible, de manera total) al cliente. Que el lenguaje del servidor se encarga de solo construir cadenas de datos y cachearlos (en memoria si fuera necesario) y que Plates se encargara de la vista, seria mucho mas simple de mantener a largo plazo y de agregar/quitar/modificar comportamientos en la vista de manera simple y practica. Ademas, para grupos de trabajo, aquellos diseñadores que no comprenden JS del todo, pueden agregar su codigo html/css sin problemas.

En conclusion, se vienen tiempos interesantes, un poco fragmentados, pero eso no es una novedad en la web verdad? :D

 

 

 

26 oct
2012

Patrones con javascript

javascript o'reilly books

asusta no? :P

Reconozco que hasta hace un tiempo, patrones y javascript no era algo que crei que podian ir de la mano, pero viendo que mi codigo sinceramente se convertia en algo inmantenible, busque opciones que me permitiera escribir algo mas entendible a largo plazo. Por eso hoy dia les traigo las descripciones de los diferentes patrones que se usan en javascript, aplicables tanto en el navegador como en su contrapartida de servidor (usando node.js).

Pero como siempre, vamos a lo basico primero:

Que son los patrones?

Patrones o mejor dicho, patrones de diseño en programacion, se le llama a formas especificas de escribir codigo, para que este sea lo suficientemente versatil para ser re-utilizado en otras partes del desarrollo. En programacion es muy comun encontrar casos donde un mismo codigo es necesario que sea ejecutado varias veces, o con alguna minima modificacion es un sus propiedades. Para el ahorro de tiempo y el evitar la multiplicacion de codigo, entran los patrones de diseño en juego, para hacerle la vida mas facil al programador.

Patrones y javascript

No creo que javascript sea un lenguaje complicado, pero como sucede con php, la libertad que da en los 2 casos y el no llevar a una organizacion correcta del codigo, lleva a que a largo plazo, una base de codigo sea insostenible.

Programacion funcional en un lenguaje puramente de objetos

La manera mas comun que vemos de programar en javascript, es la orientado a la creacion de funciones, como el siguiente ejemplo:

1
2
3
4
funciton Alerta(){
alert("Mostrando un alerta");
}
Alerta();

Esta es la formas mas simple que tiene javascript de escribir codigo, creando funciones individuales en el ambito global de la aplicacion y llamandolas a voluntad, logramos la ejecucion del codigo y el resultado deseado. Aunque no esta mal, ya que es la forma mas primitiva del lenguaje, cuando tenemos que realizar cientos de cambios y tenemos cientos de lineas de codigo (o miles) se vuelve engorroso encontrar las llamadas y mantener una persistencia de datos que no moleste a presentes o futuros desarrollos o pedazos de codigo.

Singleton

Un patron interesante, es el singleton, que consiste basicamente en crear un objeto, y asignarle a sus propiedades, diferentes valores (que pueden ser simplemente datos en variables como tambien funciones), un ejemplo de singleton puede ser el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
var ejemploDeSingleton = {
propiedadA : "Hello",
propiedadB : "World",

init : function(){
/* Referenciamos en self al objeto actual */
var self = this;
alert(self.propiedadA+" "+self.propiedadB);
}
};

ejemploDeSingleton.init();

Como dijimos anteriormente, creamos un objeto, le asignamos diferentes propiedades y funciones, y podemos usar las propiedades creadas para nuestras necesidades.

Module Pattern (Patron de modulo)

Derivado del singleton, llegamos a lo que Douglas Crockford llamo “Module Pattern” la idea es encapsular un bloque de codigo, que no interfiera con modulos creados por otros. De esta manera, tambien permite la declaracion de propiedad, y metodos publicos y privados. El patron de modulo empieza declarando una funcion de auto-instanciacion de la siguiente manera:

1
var funcionAutoInstanciable = function () {}();

Como dijimos anteriormente, este patron nos permite declarar propiedades publicas y privadas. Como lo dice la palabra, las propiedades publicas van a poder ser accedidas desde afuera del objeto en si mismo, no asi las privadas. Para esto, las propiedades publicas deben ser definidas en el objeto que retorna la misma funcion, de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var patronModulo = function() {
/*  Propiedades y funciones privadas */
propiedadPrivadaA = {"texto1":"Hello","texto2":"World"};
funcionPrivadaA = function(obj){
return obj.texto1+" "+obj.texto2;
}

/* Propiedades y funciones publicas */

return {
init: function(){
/* llama y utiliza funciones de indole privada en la funcion publica */
alert(functionPrivadaA(propiedadPrivadaA));
}
};

}();
patronModulo.init();

Revealing Module Pattern

Como una evolucion del Module Pattern, nace el siguiente patron, que es practicamente lo mismo que el anterior, pero pretende solucionar problemas inherentes del mismo en cuanto a la flexibilidad y colaboracion de la escritura de codigo, ya que para la declaracion de propiedades publicas, lo que hace, es referenciarlas a sus pares privadas. Pueden verlo en el siguiente ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var patronModulo = function() {
/*  Propiedades y funciones privadas */
propiedadPrivadaA = {"texto1":"Hello","texto2":"World"};
funcionPrivadaA = function(obj){
return obj.texto1+" "+obj.texto2;
}

funcionQueSeraPublica = function(){
alert(functionPrivadaA(propiedadPrivadaA));
}

/* Propiedades y funciones publicas */
return {
init: funcionQueSeraPublica
};
}();

patronModulo.init();
 Objetos Personalizados
En un lenguaje orientado a objetos, estos son instanciados. Javascript no es un lenguaje orientado a objetos sino basado en objetos, por lo tanto, es necesario llamar a una funcion contructora para poder instanciar un objeto. Los objetos personalizados pretende emular algo que en lenguajes orientados a objetos como java, se llama poliformismo. Usando la propiedad especial “prototype” podemos hacer que todas las instancias de un objeto tengan la misma propiedad, desde su creacion, como lo pueden ver en el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
var customObj = function(){</div>
this.init();
};
customObj.prototype.valor1 = 0;
customObj.prototype.init = function(){
this.valor1 = Math.random();
alert(this.valor1);
};
/* cada una de estas instancias, le va a dar un valor diferente a la propiedad valor1 de su instancia. */

new customObj();
new customObj();
new customObj();
Y asi es como hemos cubierto los patrones mas conocidos y utiles del mundo javascript. Te invito a que te animes a probarlos, y si tenes alguna duda o te gustaria discutir algo, pasate por el foro que lo charlamos :)

Sigueme !

Follow Me! Follow Me! Follow Me!