Bitacora #2: Tile.js generator

Dejando los posts sobre cosas curiosas de javascript para más adelante, cuento un poco sobre una pequeña utilidad que arme para usar en el port del gorillas.

Se trata de un simple generador de tiles para usar sobre un contexto 2d.
Dado que el juego original no utilizaba imágenes, me pareció que no seria correcto hacer un clon que sí las use, por lo que pensé en dibujar los elementos del juego (gorilas, edificios, bananas y el sol) con primitivas del contexto 2d.

Como seria bastante engorroso imaginarme donde tendría que poner cada punto, se me ocurrió hacer una ‘pizarra’ en la que se dibuje cada punto que selecciono. Estos se van guardando en memoria para luego obtener una función con el código para dibujar dichos puntos.

Para manejar de forma ‘elegante’ la orientación a objetos en javascript, use la libreria Base.js. Esta provee de una serie de objetos y métodos que hacen que la herencia y la creación de ‘clases’ sea más llevadero.
El resto del código, consiste en una clase con un ‘canvas virtual’ que lleva registro de los puntos que fueron dibujados para luego obtener el código de cada uno (tanto la clase ‘canvas’ como la clase ‘dot’ saben como obtener su código).
Ademas, al momento de obtener las funciones, se puede especificar un ‘multiplicador’ para reducir el tamaño de los puntos, de esta forma se puede dibujar en grande y de forma comoda, para luego disminuir el tamaño.

Ejemplo:

Tile Generator

Dibujamos esto...

 

 

Drawed gorilla

y obtenemos la función para dibujar esto...

El script es bastante sencillo y carece de buenas prácticas, pero es útil para lo que necesito en este momento.

Para verlo en acción: http://tehsis.com.ar/tilegen/
Repo en github: https://github.com/tehsis/Tile.js-Generator

En el futuro espero hacerlo extensible a primitivas distinta a los puntos (rectángulos en realidad) y poder dibujar otras cosas. No seria complicado, pero ahora la prioridad es el gorillas :D .

Dejo un par de links interesantes,

Base.js – Mini librería para trabajar con objetos, clases, herencia, etc de forma ‘clasica’
Load.js – Mini librería para ‘importar’ scripts js mediante código.
10 Things I learned from jQuery source – Video de Paul Irish contando 10 técnicas interesantes que estan presentes en el código de jQuery.
Tutorial del elemento Canvas (MDC) – Lindo y llevadero tutorial del MDC sobre la etiqueta canvas y el contexto 2d.


Bitacora #1: Funciones y scope en javascript

Para comenzar con la bitácora, me pareció innecesario hablar sobre que es javascript, como se ejecuta y cosas básicas sobre su sintaxis.
Es que de hecho, la mayoría de los desarrolladores web, sabemos que posee una sintaxis basada en C, que es un dialecto de la especificación ECMAScript y que se usa para hacer efectos raros en las páginas web… Si ya se, es prácticamente un cliché decir que javascript es mucho más poderoso que eso, teniendo ejemplos como Twitter, Facebook, Gmail y un largo etcétera, creo que ya no hace falta aclararlo.
Lo cierto es que durante mucho tiempo la mayoría simplemente buscaba en Google como hacer algo en particular sobre Javascript, cambiaba un par de cositas para adaptarlo a su necesidad y decia ‘Tengo que aprender javascript algún día’. Ese ‘algún día’ llego hace rato y hoy es difícil pensar un sitio o un sistema web que no lo utilice.
Es quizás por esto que mucha gente no entiende exactamente como se utiliza Javascript y por lo que muchas de sus capacidades como lenguaje, en el sentido estricto de la palabra, están subestimadas.
Por ello, elegí comenzar a escribir sobre los conceptos básicos que en mi opinión, hacen especial a javascript

Funciones y scopes

Las funciones en javascript son incluso más importantes que en otros lenguajes dado que son el único delimitador de contexto que tenemos a diferencia de C++ o Java en donde las variables tienen alcance solamente en el bloque en donde fueron definidas.

En el ejemplo, definimos una variable a en el contexto global, dentro de una función creamos una variable del mismo nombre a la cual le asignamos un valor. Ejecutamos la función y comprobamos que la variable a, tal y como es de esperarse, no fue modificada.
Sin embargo, dentro del bloque if, creamos una nueva variable a, le asignamos un valor y fuera del bloque, la variable continua teniendo ese valor. Como dije anteriormente, el único scope en javascript son las funciones y el scope global.

Funciones anónimas

Otra cosa interesante de javascript, es la posibilidad de crear funciones anónimas. Con ellas, podemos hacer dos cosas (en principio); asignarlas a una variable e invocarlas como una función común:

O bien, decirles que se autoejecuten, de la siguiente manera:

Esto último, es muy útil, no solo nos permite simular bloques para solucionar el problema del scope que mencionamos antes, si no que sirve para solucionar un problema bastante común e incluso visto en algunos frameworks famosos y es que, cualquier variable que definamos fuera de una función, se encuentra en el scope global. De modo que es muy común que diferentes scripts sobrescriban variables por estar definiendo todas en el contexto global.
Una solución a esto, es la de encerrar todo nuestro código en una gran función anónima que se autoejecute y solo exponer aquellas variables estrictamente necesarias y de esta forma simular espacios de nombres en nuestros scripts.
Un ejemplo práctico de esto, lo podemos ver en el código fuente del framework jQuery

Como vemos, al incluir jQuery en nuestro sitio web, se ejecuta una gran función anónima dentro de la cual, se crea una variable con toda la funcionalidad del framework y luego se la asigna a una propiedad del objeto window.
Para no entrar en mucho detalle simplemente tenemos que saber que dentro de un browser, el objeto window define nuestro contexto global. Es decir, jQuery en el contexto global es el mismo objeto que window.jQuery.

De esta forma, la única colisión de nombres posible es que haya otro objeto llamado jQuery (o $) dentro de window.

Nota 1: El $ en window.$ no es ni más ni menos que un identificador para una variable cualquiera. Es exactamente lo mismo usar jQuery o $, no posee ningún poder otro poder mágico.

Nota 2: Es recomendable usar jQuery en lugar de $, ya que este último es utilizado por otros frameworks y podemos tener efectos no muy deseados si tratamos de trabajar con ellos.

Conclusión

Las funciones en javascript son el único delimitador de scope que tenemos, esto podría resultar un grave problema ya que cualquier identificador que definamos fuera de una función puede colisionar con otro definido en otro script. Es por esto que es una buena práctica encerrar todo nuestro script en funciones anónimas que se autoejecuten y exponer (asignándolos como propiedades del objeto window) solamente aquellos identificadores imprescindibles.
Para cerrar, podemos decir que en javascsript las funciones son objetos, pero eso mejor lo vemos mañana.

Antes de cerrar, quiero comentar que pueden encontrar el estado actual del juego que comente en el post anterior en https://github.com/tehsis/Gorillas.js
Por lo pronto, estuve trabajando más que nada en crear un marco de trabajo para solucionar algunos problemas que vamos a ver más adelante.


[Perl] Expresiones regulares y cuantificadores no codiciosos

Hace poco tiempo tuve problemas con una regex que no tomaba lo que, al parecer, yo le indicaba. El problema no es grave, pero tiene que ver sobre como Perl trata las expresiones regulares y las wildcards.

Por ejemplo, si tenes el siguiente string “See spot, see spot run, run spot run” y tratamos de capturar lo que se encuentra antes del primer ‘spot’ podríamos querer hacer algo como esto:

Lo cual nos mostraría en pantalla ‘See spot, See spot run, run ‘. En vez del primer ‘See ‘ que ya cumpliría con lo que dice nuestra regex. El tema está en que Perl, tratara de matchear lo más que pueda ya que hace uso de cuantificadores codiciosos (greedy quantifiers). De modo que para traer el primer ‘See ‘ debemos hacer uso de los ‘cuantificadores no codiciosos’ (non-greedy quantifiers), En este caso ‘*?’  que tratara de matchear 0 o más lo menos que pueda. Es decir, cambiando a:

Obtendremos el primer ‘See ‘.

Del mismo modo, asì como con el cuantificador codicioso ‘+’ matchearemos 1 o 0 veces, con ‘+?’ matchearemos 0 o 1 veces (primero 0, luego una). y usando el cuantificador no codicioso  {x,y}? podremos matchear x veces, pero no màs de y.

Conclusión, un problema bastante sencillo pero que puede generar algunas confusiones.

Fuente:  http://perldoc.perl.org/perlretut.html


Importando datos SQL con Perl

Hace algun tiempo tenia que importar CSV a una tabla que tenia guardada en una base de datos Postgre para una materia de la escuela.

Como tenia un problema con la forma oficial para hacer esto y no funcionaba internet, con la ayuda de Perl arme un pequeño script que, leyendo desde un archivo CSV, generaba sentencias “insert” con los datos para luego pegarlos en una consola y de esa forma tener mís datos importados… como quien dice, una “rebuscada freak”

En fin, el código pueden verlo a continuación o bien desde mí cuenta de gitHub en: https://github.com/tehsis/importSQL

EDIT: Debido a que el script fue sufriendo algunos cambios desde que lo publique, dejo solo el link al repo


Presentando a El Goblin

Desde hace un par de semanas, comence a aprender Perl y para esto inicie un pequeño proyecto sobre un buscador de páginas web, sin más intenciones que obtener sitios y buscarlos mediante tags y principalmente, aprender a trabajar con Perl y otras herramientas.
Así fue que nacio “The Goblin Search Engine”. Una serie de scripts que permitian añadir sitios a una base de datos  (MongoDB) y luego buscarlos mediante los tags  (los cuales son obtenidos del sitio).

Habiendo avanzado ya un poco, me dispuse a darle un objetivo más “práctico” a este buscador para que no muera solamente en un puñado de código mal armado y es así como nace Goblin como proyecto personal.

¿En que consiste?

Actualmente, esta dividido en dos partes. “The Goblin server” y “The Goblin client”, conectados el uno con el otro mediante SOAP.
El primero, como ya dije, esta hecho completamente en Perl y es el encargado de agregar los sitios a la base de datos, realizar las busquedas y brindarle los resultados al cliente.
El segundo (el cliente) no es más que una API para poder acceder a los servicios del servidor (valga la redundancia).
Tambien junto con el cliente se incluye un script como ejemplo para usarlo.

¿Y el objetivo?

El objetivo sigue siendo aprender. Las ideas que tengo para implementar en Goblin son muchas y seguramente apareceran más sobre la marcha.
De momento, es solamente un pseudo buscador de páginas web indexadas en una BD que no esta pensado bajo ningun punto de vista para usarlo en producción (aunque bien podría servir como base).
Sin dudas, el siguiente paso sera hacerlo más robusto, actualmente es bastante inestable y “facil de romper”  ademas, claro, que carece de muchas caracteristicas que podrian considerarse un “must” en este tipo de apps. Vamos, que hay que mejorarle TODO.

En conclusión. La idea de este post era solamente comentar sobre Goblin. No recomiendo su uso actualmente, pero el código esta ahí listo para que lo bajen y hagan lo que quieran con el (bueno, siempre que la GPLv3 lo permita ;) )

Por último, quiero agradecer a @guitarrear por impulsarme a aprender Perl y por consiguiente, a comenzar ese humilde proyecto :)

http://github.com/tehsis/Goblin


Simphple Gallery 0.1 – Galeria de imagenes simple con PHP

Bueno… bastante hace ya de mí último post… espero poder dedicarle más tiempo a esto en estos días, aunque no prometo nada.

Hace unos días para una web que estoy armando, necesitaba hacer una galería de imágenes de forma que el usuario pueda agregar y sacar imágenes a su antojo y como buscando por la web me encontré con varías galerías que usaban AJAX o Flash, decidí armar una donde predomine la simpleza.

El script esta hecho enteramente en PHP de forma que no dependa del navegador que estemos usando para poder visualizarlo correctamente.

Para usarlo, solamente deben crear un directorio llamado “img/” en el mismo lugar que donde tienen el archivo gallery.php (aunque pueden cambiarlo modificando dicho archivo) y meter allí las imágenes que quieren que formen parte de la galería. Luego incluyen el script mediante:

 
<?php include("gallery.php"); ?>

Dentro de su página o bien crean un link directo al mismo.

Al comienzo del código fuente, van a poder encontrar las variables que pueden modificar para poder “personalizar” el script, tal como el directorio desde el cual se tomaran las imágenes, el ancho y largo con el que seran mostradas y los textos que hacen de link a las imágenes anterior y siguiente (de forma que sea sencillo traducirlo).

Las imágenes son redimensionadas por medio de HTML. Sé que podría usar gd para que no pierdan tanta calidad, pero 1-Nunca use gd 2-Por el momento preferí que los requisitos para usar el script sean los menos posibles.

El script no genera ningún estilo CSS ni nada que se le parezca. Esto fue adrede para que podemos agregar uno de nuestra propia manufactura simplemente envolviendo nuestro include con las correspondientes etiquetas. Por ejemplo:

 
<div id='gallery'>

<?php include("gallery.php"); ?>

</div>

Tengan en cuenta que de momento, no hay ningún filtro para los archivos dentro del directorio que contiene las imágenes así que asegurense de meter allí solamente archivos de imágenes (.jpg,.png,etc) si no quieren resultados raros.

Posiblemente más adelante agregue esto junto con el redimensionamiento de imágenes via gd… ya veremos que sale. Por el momento, solamente quería compartir esto que arme para mí uso personal esperando que a alguien más le pueda servir.

Sin más, el link de descarga:

Descargar:  Simphple Gallery 0.1


Qt 4.5 publicado

Por medio de El Código K y Barrapunto, leo que ya se encuentra disponible la versión 4.5 de las bibliotecas Qt.
Esta actualización incluye muchas novedades, entre las que se destacan: un nuevo SDK (que incluye todas las herramientas necesarias para desarrollar con Qt), la posibilidad de licenciar nuestras creaciones con LGPL (lo que suma una nueva opción a el embrollo ya existente), mejoras en la versión de 64bits para Cocoa (mac), mejoras en la integración con Webkit (ahora podremos hacer uso del plugin de flash para Netscape en nuestras aplicaciones) y las siempre discutibles mejoras de performance.

Junto con esto, publican tambien (junto al SDK) la versión 1.0.0 de Qt Creator. Un entorno de desarrollo multiplataforma que nos permite trabajar de forma “amigable” con estas bibliotecas.

Opinión personal, es interesante ver el desarrollo que le esta dando Nokia a todo lo que se refiera a Qt, una historia que vengo siguiendo de cerca por ser Qt una de mis APIs favoritas para aplicaciones gráficas.
El hecho de que ahora también sea distribuida con licencia LGPL, nos permitirá crear aplicaciones cerradas y/o comerciales de forma completamente gratuita, algo que a la FSF no le gusta mucho pero que me parece interesante que se haya hecho, eliminando así toda posible “disputa” respecto a las licencias de Qt. Recordemos que la opción comercial sigue existiendo para aquellos que lo requieran.
Aprovecho para decir que en estos días (seguramente la semana que viene, después de mis exámenes) publicare por fin la segunda parte de mi articulo sobre Qt Jambi… Esta vez es en serio ;)


Eclipse GanyMade esta aquí

Hace un par de días, salio una nueva versión de la que es considerada una de las mejores IDE’s para desarrollar aplicaciones Java (si bien cuenta con soporte a muchos otros lenguajes por parte propia o de terceros.
Como hace un rato termine de rendir y queria probarlo, me dí el gusto y esto es lo que paso…

Luego de descomprimir el paquete universal para Linux que descargué de su página oficial, crear un enlace simbolico (o acceso directo para los que vienen de Windows) en mí escritorio al ejecutable, inice Ganymade por primera vez. Como es costumbre, me pregunto cual sería la carpeta para mi “workspace” para la cual elegí la misma carpeta que vengo usando para las versiones anteriores.

Todo resulto estar tal y como lo había dejado la última vez que cerre Europe (Algo que era de suponer) mismos archivos abiertos y mís proyectos estaban ahí tal cual los deje.
El primer cambio, a simple vista, es un boton en la barra de menús que realmente siempre me pregunte porque no existia, se trata del “Breadcumb”… cuya traducción literal sinceramente desconozco, pero nos permite tener una visión de la jerarquia que tiene la clase que estamos editando, (como si se tratara del Package explorer) pero en la propia ventana de edición. Comenzando desde la carpeta donde se encuentra nuestro proyecto, pasando por los paquetes y clases hasta llegar al metodo que estamos editando, si hacemos click en las flechas de alado, rapidamente vemos el resto de los elementos de esa categoria, algo muy útil que se suma al resto de las caracteristicas de Eclipse.

Lo otro nuevo que veo, es la posibilidad de movernos por un “historial” en cuanto a las clases que hemos estado editando, es decir, podemos ir atras, adelante e incluso lo mismo pero para errores, bookmarks, breakpoints, etc.
Creo que esto seria todo “para mí”, si bien vengo usando Eclipse para casi todo lo que sea Java ultimamente, todavía hay muchas caracteristicas que estoy descubriendo.
Si todavía no lo probaste, realmente lo recomiendo. Sobre todo si leemos el “Overview” que viene junto al programa (al cual accedemos mediante la pantalla de bienvenida) ya que la cantidad de herramientas y “facilidades” que nos brinda, son realmente increibles.

Por último, decir que si quieren descargarlo deben darse una vuelta por http://www.eclipse.org/downloads/packages/ y ademas recomiendo el resto del sitio que no tiene desperdicio.


La popularidad de los lenguajes de programación segun Tiobe – Junio 2008

Siempre es bueno, si estamos en el tema, tener conocimiento de los lenguajes de programación más usados, aunque sea a nivel estadístico. Esto puede ser crucial a la hora de elegir un determinado lenguaje para encarar cierto tipo de proyecto y que este no muera o quede estancado en el camino. Leyendo el blog de Fernando Bordignon por medio del feed de Codear, encontre una tabla elaborada por la empresa TIOBE, la cual esta elaborada en base a entrevistas con profesionales del medio y analisis de las busquedas de los buscadores web más usados. Como ellos mismos aclaran, estos datos no quieren decir que tan bueno sea un lenguaje o cuantas líneas de código hay escritas con cada uno, simplemente mostrar que tan “populares” son.

Algunas cosas que me llamaron la atención, primero, el aumento de la popularidad de Pascal respecto del año anterior, segundo que tanto Visual Basic como C# esten cayendo y tercero, la baja posición que tiene ActionScript. El resto de la tabla no revela nada que no me hubiera podido esperar en realidad, tanto Java, C y C++ se mantienen a la cabeza y Python esta en aumento…

Position
Jun 2008
Position
Jun 2007
Delta in Position Programming Language Ratings
Jun 2008
Delta
Jun 2007
Status
1 1 Java 20.890% +0.86% A
2 2 C 15.513% -0.45% A
3 3 C++ 10.806% -0.31% A
4 5 PHP 10.206% +1.33% A
5 4 (Visual) Basic 9.787% +0.46% A
6 6 Perl 5.548% -0.63% A
7 8 Python 4.899% +1.74% A
8 7 C# 4.058% +0.57% A
9 9 JavaScript 2.927% +0.31% A
10 10 Ruby 2.640% +0.51% A
11 13 Delphi 2.022% +0.45% A
12 14 D 1.445% +0.19% A
13 12 SAS 0.923% -0.84% A
14 11 PL/SQL 0.759% -1.26% A-
15 23 Pascal 0.596% +0.11% B
16 15 Lisp/Scheme 0.436% -0.23% B
17 17 Ada 0.421% -0.21% B
18 19 COBOL 0.379% -0.21% B
19 21 Lua 0.366% -0.21% B
20 24 ActionScript 0.341% -0.05% B

Fuentes: http://ferbor.blogspot.com
http://www.tiobe.com


Recomendado: FCKeditor

Al momento de armar un sistema que permita publicar contenido en una página web, ¿quien no desea un editor de texto que permita ser usado de la misma forma que usamos un editor de escritorio sin tener que escribir esas molestas etiquetas de HTML?
Eso es precisamente lo que nos ofrece FCKeditor. Un editor de texto WYIWYG, cuya apariencia hace recordar a Word, que podemos integrar en cualquier desarrollo web que estemos realizando. Con soporte para PHP, Python, ASP.Net, Perl y varios lenguajes más, resulta bastante sencillo tenerlo funcionando. Cabe aclarar que tiene soporte para la mayoria de los navegadores web e incluso aquellos que no lo soporten veran un simple cuadro de texto (aunque sin las opciones visuales) que nos permitira escribir usando HTML común y corriente.
Ademas de dar formato al texto que escribamos, nos permite subir imagenes a nuestro servidor e incorporarlas de forma sencilla a lo que estemos escribiendo e incluso guardar los archivos para continuar su edición posterior.

El metodo para incorporarlo a nuestro desarrollo, varía de acuerdo al lenguaje utilizado, pero básicamente, se trata de incorporar un archivo a nuestro código fuente e instanciar un objeto del editor dentro de un formulario y luego tomar las variables por medio de GET o POST (de acuerdo a como configuremos.

En cuanto a su licencia… es bastante amplio, si queremos usarlo en desarrollos abiertos, tenemos una licencia GPL, si queremos hacer un desarrollo cerrado, podemos usarlo con licencia LGPL pero tambien cuenta con una licencia paga, por si nuestra empresa lo solicita, en fin, no hay excusas para no usarlo.

Web Oficial: www.fckeditor.net/