Parametros estrategia BBlock Open Layers

Cuando se tienen muchas marcas que mostrar en un mapa no es recomendable cargarlas todas a la vez, lo recomendado es cargar únicamente las marcas de la sección visible del mapa. Para hacer esto en Open Layers se utiliza la estrategia BBox (Bounding Box).

BBox envía una petición a nuestro servidor cada vez que el área visible del mapa cambia. La petición, por defecto GET, tienen como parámetro principal uno llamado bbox que tiene por valor cuatro puntos en el mapa para delimitar el cuadrado visible, concatenados por comas.

La petición se ve así:

http://mymapsapp.com/GetAreaPoints?bbox=0,50,50,0

El primer punto es el más bajo; el segundo, el más a la izquierda; el tercero, el más alto y por último, el más a la derecha.

Bonus Track: en PostGis podríamos utilizar le siguiente query para obtener los puntos dentro del cuadrado.

SELECT punto_id, nombre_punto, coordenada_punto
FROM tabla_puntos
WHERE coordenada_punto && ST_SetSRID(ST_MakeBox2D(ST_Point(0, 50), ST_Point(50, 0)), 4326)

Saludos,
Giank

Logoshi, bosqueja tu logo

Hoy quería hablar de algo diferente, pero que también sea útil y me acordé Logoshi. El concepto de la web es simple y útil, bosqueja un logo y Logoshi te generará uno a partir del tuyo.

La idea surge de un programador que necesitaba un logo para un proyecto pequeño y no tuvo suerte con diseñadores, decidió tomar el toro por las astas para diseñar su logo y creó esta web que es capaz de transformar bocetos simples en logos de estilo moderno.

Luego de dibujar tu boceto Logoshi generará 4 alternativas distintas entre las que podrás escoger, además también genera la tipografía; cuenta, también, con una zona de preview donde puedes ver tu logo en tarjetas de presentación, papelería y hasta en las oficinas de tu compañía, es un detalle genial. Al terminar puedes descargar tu recién generado logo en formato PNG o como imagen vectorial de alta resolución, la descarga incluye el logo con el nombre de tu compañía en varias presentaciones.

Saludos,
Giank

gTimer, mi librería para conteos regresivos

Continuando con los post relacionados a mi proyecto, esta vez me toca hablarles de una librería Javascript que hice hace poco, se llama gTimer y es una librería para trabajar con un contador regresivo.
Trabajando con un menú lateral me di cuenta que sería útil ocultar el menú luego de un tiempo sin usarlo, googlee un poco en busca de una librería que me ayudara pero no encontré nada útil por lo que me decidí a implementarlo yo mismo.  La librería es simple de usar, consta  de un inicializador, el que recibe el tiempo de la cuenta y un método para ejecutarse al terminar y varios métodos sin parámetros para controlar el conteo, terminarlo o reiniciarlo.
La librería está publicada bajo la licencia del MIT y alojada en GitHub. Si tienen alguna idea o necesitan que se agregue algo pueden pedirlo directamente en el repositorio del proyecto (aqui) o por los comentarios.

Saludos,
Giank

Agregar texto fijo a un mapa con OpenLayers

Entre las cosas que tiene mi proyecto es que trabajo con mapas en web, como quiero que use componentes 100% libres decidí utilizar la librería OpenLayers para manejar el mapa y demás cosas relacionadas. Una de las últimas cosas que he tenido que hacer es mostrar una etiqueta perenne en el mapa que indique el nivel de zoom en el que el usuario se encuentra. Leyendo y probando cosas encontré un solución, esta consiste en agregar un panel en el mapa que contenga un único "botón", el que luego reemplazaremos por nuestra etiqueta.
Para que esta solución funcione es necesario crear un div con id "panel" en nuestra web, no entiendo bien el motivo de esto, pero así funciona. Además, hay que definir estilos para el botón-etiqueta y para el panel.

Sin más preámbulo, aquí está el código explicado!

//Primero, debemos crear el botón que insertaremos en nuestro panel.
var btnZoom = new OpenLayers.Control.Button({
 displayClass: 'olControlBtnZoom',
    text: 'Soy la etiqueta de Zoom',
    type: OpenLayers.Control.TYPE_BUTTON
});

//Luego definimos el panel que contendrá el botón e indicamos que será el control por defecto.
//Además en la propiedad "createControlMarkup" definimos una función que se encargará de crear nuestra
//etiqueta y nos la retornará, esto con el fin de reemplazar el botón.
var panel = new OpenLayers.Control.Panel({
defaultControl: btnZoom,
createControlMarkup: function(control) {
var textoSpan = document.createElement('span');
textoSpan.id="spnZoomText";
textoSpan.innerHTML = control.text;
return textoSpan;
}
});

//A continuación agregamos el botón al panel y el panel al mapa
panel.addControls([btnZoom]);
map.addControl(panel);

//Esta es la clase para el panel, el nombre es el que asigna por defecto OpenLayers
//y es el que debemos usar
.olControlPanel {
    top: 15px;
    left: 15px;
    width: 65px;
    cursor: default;
    }

//Esta es la clase para el botón que luego será etiqueta, es importante saber que si quieren cambiar el
//nombre del estilo solo puede cambiar el texto correspondiente al nombre del botón, el prefijo "olControl"
//es usado por OpenLayers y debe permanecer.
.olControlBtnZoom{
    position: absolute;
    height: 18px;
    width : 65px;
}

Espero que esto les sea de utilidad!

Saludos,
Giank

Trello, que útil eres!

Como ya había comentado, tengo un proyecto personal en el que ando trabajando y desde que lo empecé he buscado un sitio donde pueda gestionar las tareas y el avance del mismo. Como siempre lo primero que se me vino a la mente fue lo que conocía, Scrumy, una web app donde podría gestionar al estilo Scrum Board el avance de mi proyecto, pero no me llegó a convencer del todo. Luego busqué otras alternativas online, que resultaron en su mayoría de paga, por lo que ni pensé en usarlas. Por último decidí registrar todo en un excel y trabajarlo "a mano". Ya tenía un buen tiempo en excel cuando conversando con unos amigos uno de ellos me contó de Trello. Cuando me terminó de contar puso el video de presentación y fue amor a primera vista, era exactamente lo que estaba buscando, flexible, online, organizado, colaborativo, simplemente perfecto.

En general Trello es una especie de kanban board flexible, se divide en organizaciones, pizarras y listas. Los proyectos se pueden gestionar como organizaciones, las organizaciones están compuestas por pizarras (boards) y estas a su vez están compuestas listas(lists) de tarjetas (cards). Las tarjetas son objetos sumamente útiles y completos; permiten agregar una descripción, que será el texto mostrado; comentarios; aplicar etiquetas; asignar miembros; adjuntar imágenes o links; organizar votaciones; agregar listas de tareas y comentarios. Son la herramienta principal de trabajo en Trello y están muy bien pensados. En los proyectos se pueden asignar miembros y estos repartirse entre pizarras distintas para formar grupos de trabajo. 

Por ejemplo, para usar Trello como herramienta en Scrum podríamos crear una organización para todo el proyecto. Crear una pizarra como Backlog, esta puede contener 3 listas, una para historias nuevas, otra con historias ya puntuadas y priorizadas, listas para un próximo Sprint, y por ultimo una que tenga las historias terminadas. Para cada Sprint habría que crear una nueva pizarra, agregar a todos los miembros del team y crear listas para los estados de las historias, creo que también sería bueno agregar una lista para registrar bugs. Cada historia sería una tarjeta y las tareas de cada una se podrían incluir en un check list, incluso si hubieran documentos relacionados con la historia se podrían adjuntar.

Particularmente uso Trello para mi proyecto personal con una configuración de listas simple: por hacer, en progreso, en proceso constante, detenida, terminada, ideas nuevas(como backlog) e incidencias/cambios. Para un proyecto pequeño esto debe ser más que suficiente, todo en una sola pizarra y se puede trabajar de maravilla.
Esta útil herramienta tiene apps para Android, iOS y Windows Phone 8, solo he probado la de Android y es completamente funcional, tiene prácticamente las mismas opciones que la web con el adicional de notificaciones para el móvil.

Saludos,
Giank

WhatsApp se cae y se lleva consigo a Telegram

Se ha caído la app de comunicación escrita más grande del mundo, es algo de lo que todos los usuarios nos dimos cuenta al instante; y si no eres usuario igual ya lo sabes porque lo has visto en Facebook o más rápido aún en Twitter.

Según los primeros comentarios y reportes la caída fue a alrededor de las 13:30 hrs, hora Peruana y un rato después también callo el chico nuevo del barrio mensajero, Telegram. La noticia llenó los muros de Facebook y los time lines de Twitter, el hashtag #WhatsApp se hizo TT en  menos de media hora y en una hora la palabra Telegram hizo lo mismo. Era la oportunidad perfecta del avión de papel para crecer, muchísimas personas están volteando a verlo, a tomarlo en cuenta, a descubrirlo, pero han fallado. Según su propio reporte están teniendo alrededor de 100 activaciones por segundo, motivo por el que supongo se ha caído el servicio o en todo caso está muy lento.

Por otro lado debo decir que WhatsApp escogió el mejor día y momento para caerse, un sábado por la tarde, cuando todos están coordinando que hacer, a donde ir, como ir y demás cosas; pero sobre todo cuando aún está fresca la idea de su venta al gigante azul de las redes sociales. Es inevitable pensar que de alguna manera la compra de WhatsApp por parte de Facebook tiene algo que ver con el actual problema y lo primero que se me ocurre es que han metido la pata tratando de migrar data de los servidores de una compañía a la otra. Aún no hay un anuncio oficial ni en redes sociales por parte de WhatsApp, por lo que solo nos queda seguir suponiendo que es lo que pueda haber pasado.

#BonusTrac: ¿Alguien se acuerda de que existe LINE? Particularmente no me gusta su interfaz, prefiero el simplismo de Whatsapp o de Telegram

Saludos,

Giank

Copiar arreglos en Javascript

Hoy toca hablar de Javascript, hace un par de meses vengo trabajando intensivamente con este lenguaje y tengo algunas cosas que compartir, esta es una de ellas.
En JS siempre se trabaja pasando valores y no referencias excepto en el caso de arreglos, objetos o funciones. En general esto es útil y uno se acostumbra con el tiempo, pero cuando trabajas con objetos complejos que contienen arreglos de otros objetos te topas con unos cuantos problemas, sobre todo al momento de modificar o copiar un arreglo.

Si tenemos arreglos que contienen tipos primitivos hacer copias es simple, existen principalmente dos formas de hacer copias sin que los datos de ambos arreglos queden linkeados: usando el método slice() o el método concat(). Un pequeño ejemplo.

var arregloFuente = ['a','b','c','d','e'];

var arregloDestino = arregloFuente.slice(); 
o 
var arregloDestino = arregloFuente.slice(0); 
o
var arregloDestino = arregloFuente.concat(); 

Estos mismos métodos también se pueden aplicar a arreglos de objetos, con la diferencia que en este caso los dos arreglos contendrán referencias a los mismos objetos, por lo que si modificamos algún objeto en un arreglo este cambio se verá en ambos. Esto puede ser útil para sincronizaciones, pero molesto a la hora de aplicar filtros o duplicar data para modificarla. A nuestros rescate llega jQuery con su método extend() que permite hacer copias "superficiales"( shallow) o "profundas"(deep) de arreglos. Con "superficiales" me refiero a copias que se hacen usando referencias y con "profundas" me refiero a copias usando valores; esto es que, si modificamos un objeto dentro de uno de los arreglos no afectaremos al otro. La sintaxis es la siguiente.

var arregloFuente = [{color: 'rojo', peso: 10},{color: 'verde', peso: 10},{color: 'rojo', peso: 20}, {color: 'amarillo', peso: 5}];

// Copia superficial (Shallow copy) 
var arregloDestino = jQuery.extend([], arregloFuente); 

// Copia en profundidad (Deep copy) 
var arregloDestino = jQuery.extend(true, [], arregloFuente); 

Me pasó recientemente que incluso el método extend() no me hizo una copia en profundidad de un arreglo el cual contenía entre sus propiedades otro arreglo con objetos, para este caso lo único que me quedó fue hacer un método propio que haga el copiado del arreglo. Como dato, el arreglo anidado era un objeto observable de knockout, creo que esto tuvo algo que ver con que no me haga la copia en profundidad bien.

Saludos,
Giank.