Scipion Strikes Back

Hace tiempo escribí un post acerca de los pixels aleatorios. Dibujaba una imagen en java para probar que no ser repetían patrones en la funcion random. Para hacer lo propio en javascript ahora gracias al html5 podemos usar la etiqueta canvas y pintar dentro de ella. Nos declaramos un canvas del tamaño que queramos, por ejemplo de 300 x 300

<canvas height="300" width="300" id="mycanvas"></canvas>

Antes de dibujar en nuestro lienzo tenemos que usar el contexto, en este caso en 2d.

Para dibujar pixel a pixel solo tienes que dibujar cuadrados de un pixel de tamaño. Empezamos por la cordenada (0,0) hasta la (299,299). En realidad puedes dibujar fuera del canvas, pero por supuesto no esperes que se vea.

function drawRandom(id){
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d');

	for(var j=0;j<300; j++){
		for(var i=0;i<300; i++){
			ctx.fillStyle = getRandColor();
			ctx.fillRect(i, j,i+1, j+1);
		}
	}
}

function getRandColor(){
	//Si quieres puedes usar solo blanco y negro para verlo más claro
	//var blanco="rgb(255,255,255)";
	//var negro="rgb(0,0,0)";
	return ("rgb("+(parseInt( (Math.random()*1000) % 256))+","
		+(parseInt( (Math.random()*1000) % 256))+","
		+(parseInt( (Math.random()*1000) % 256))+")");
}

drawRandom("mycanvas");

Puede que tarde un rato, o incluso que el navegador piense que tienes un bucle infinito en ejecución. Después te pintará una imagen tan “bonita” como esta:

canvas con pixels de colores aleatorios

Para este ejemplo sencillo vemos que la funcion Math.random( ) se comporta bastante bien en cuanto al grado de aleatoriedad. Pero si quieres profundizar en hacer dibujos con canvas puedes ver más cosas aquí. Si ya lo has hecho en otros lenguajes (no como yo) no te resultará complicado hacerlo en javascript.

Me ha parecido muy completa esta presentación de SQL injection. Toca un poco de Doctrine y Propel para dar ejemplos de buenas practicas.
Da un dato interesante, entre el 40-60% de los casos de acceso a datos no autorizados son por fallos de injecciones de SQL en el código de una web. Un error muy común por lo visto.
Las transparencias son de Krzysztof Kotowicz un experto en seguridad en e-comerce y web 2.0. Solo echarle un ojo a su blog ya es algo muy recomendable apara estar al día en seguridad para la web.

Visto en JSAPI User Guide una tan sencilla como complicada segunda opción

Hay dos formas de crear objetos personalizados que el JS engine puede utilizar:

• Escribir un script JS que crea un objeto, sus propiedades, métodos, y el constructor, y luego pasa la secuencia de comandos para el motor de JS en tiempo de ejecución.
• Insertar el código de la aplicación que define las propiedades del objeto y los métodos, llame al motor para inicializar un objeto nuevo, a continuación, establezcalas propiedades del objeto a través de llamadas adicionales al motor. Una ventaja de estemétodo es que su aplicación puede contener métodos nativos que manipulen directamente la incrustación de objetos.

La desventaja del segundo método es que para escribir algo en javascript tienes que escribirlo en C++. Sencillez vs rendimiento.

Hace tiempo leí una cita sobre Unix que decía algo así como:  ”UNIX es sencillo, solo que hace falta un genio para apreciar su sencillez”. Creo que no solo le pasa a Unix.

La ordenación de vectores es algo que se imparte desde los primeros años de carrera en informática con el método de la burbuja, inserción directa y alguno más con complejidad O(n^2). Más tarde cuando se profundiza en la algoritmia un poco llegamos a algoritmos más complejos de complejidad O(nLogn) se concluye que no hay nada mejor en la ordenación de vectores, y esas innovaciones son ya de hace bastante tiempo.

Métodos de ordenación de vectores

QuickSort,  MergeSort, HeapSort … hay muchos Sort’s por el mundo y todos tienen ventaja frente a otros. Los que he mencionado son de los más conocidos con complejidades de O(nLogn). Por lo que he estado viendo, el MergeSort es el que se suele utilizar más por su baja cantidad de operaciones de computo. Es muy sencillo, ya que mezclar listas ordenadas de elementos tiene complejidad lineal y no tiene mucha historia. Su principal desventaja, la gran cantidad de memoria temporal utilizada, tiene cada vez menos importancia gracias a que la memoria se va abaratando cada vez más. Pero…

¿Que pasa en los dispositivos que no tienen mucha memoria? Lo primero que viene a la mente es que siempre hay alguien que tiene un equipo en el que la memoria se mide en K’s, pero no van por ahí los tiros. Los smartphones y tablets son cada vez más populares, y por ahora lo que se considera normal en estos dispositivos es lo que se tenía en escritorio hace ya bastante tiempo.

TimSort

En esta visión del ahorro de memoria + mergeSort es donde surge el algoritmo TimSort. Lo ideó Tim Peters para la ordenacion en Python (donde se pueden programar librerias nativas en C) y lo bautizó con su propio nombre, como el dice: “eh, me lo he ganado”.

El TimSort no mejora en complejidad a su padre, el MergeSort, pero si que tiene ciertas optimizaciones que lo hacen que ahorre mucha memoria en los casos medios. Cuando una parte del vector está “bastante” ordenada no sigue dividiendo el vector en partes hasta llegar a una lista de un elemento, sino que utiliza la inserción directa para ordenar todo ese trozo. Aunque la inserción directa sea de complejidad O(n^2) para listas muy pequeñas de elementos es muy rápido gracias a su sencillez.

Si un tramo del vector que estamos intentado ordenar de mayor a menor por ejemplo, se encuentra ordenado de menor a mayor, el algoritmo invierte este tramo y continua.

Con esto y ajustando los vectores temporales al mínimo requerido timsort consigue un ahorro de memoria y de rendimiento respecto de MergeSort en vectores parcialmente ordenados o con muchos repetidos.

TimSort en C (Python) y en Java

Es por estas pequeñas cosas que el TimSort ha sido seleccionado para ser el tipo de ordenación de vectores por defecto en Java 7 (lanzamiento estimado en Julio de 2001) y en la plataforma para móviles Android (que se puede decir que es Java también)

También es la ordenación por defecto en Python, bastante lógico cuando el algoritmo se ideó en principio para este lenguaje. Esta implementación es nativa de Python, por eso está escrito en C (no todo lo nativo de Python está escrito en C pero sí es aconsejable para aumentar el rendimiento).

El TimSort de Tim lo puedes encontrar aquí (timsort.c) y una explicación de sus pruebas de rendimiento.

Otra implementación en java Josh Bloch con bastantes menos lineas de código.

Y … en JavaScript

Siendo un obsesionado del JavaScript me pregunté, ¿y no hay implementación en JavaScript?. En javascipt ya se pueden ordenar vecteres con el metodo nativo del Array sort(funcionDeComparacion) pero cada maquina viertual de JS utiliza la ordenación que más le conviene. Bueno en realidad la que han decidido sus desarrolladores. Pero de todas maneras, si los desarrolladores de una maquina virtual de JS decidieran implementarlo usarían el código ya existente si implementan en C/C++ como son el SpiderMonkey y el V8, o la versión Java para Rhino.

Utilizar una versión JavaScript para ordenar vectores en JavaScript sería una perdida de rendimiento, al menos en gran cantidad de los casos.

Mi pequeña contribución

Si aun así no te fias y quieres hacer tus propias pruebas de rendimiento he portado la versión Java del algoritmo a JavaScript (TimSort JavaScript), con algunas optimizaciones propias del lenguaje; intentando utilizar el mayor numero de métodos nativos del lenguaje, aunque estoy seguro de que se puede optimizar algo más hasta equipararse en rendimiento 1 a 1 al sort nativo (que puede que en cada implementación sea un algoritmo distinto). Actualmente solo supera en rendimiento al nativo en muy pocas ocasiones, cuando el vector tiene muy poca entropía; y en casos muy malos llega a duplicar el tiempo de computo de la versión nativa.

No he buscado mucho y no sé que algoritmos utilizan las maquinas virtuales de los navegadores de hoy en día así que indagaré un poco pero eso es otro post.

Dibujando rutas

Puedes consultar las partes anteriores del manual de Google Maps Api 3:
Primera parte del manual

Segunda parte del manual

Tercera parte del manual

Este servicio es interesante, a demás podemos usar coordenadas o direcciones directamente, ya que el servicio las traducirá por sí solo.
Las clases principales son: google.maps.DirectionsService que es la que ejecuta la peticion del servicio al servidor y nos devuelve los datos, y google.maps.DirectionsRenderer que es la encargada de mostrar la ruta en nuestro mapa.
El ejempo básico de inicialización es el siguiente:

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

La llamada a route tiene el formato “directionsService.route(request, function(result, status)”. Hay que generar un objeto request primero(DirectionRequest) que solo es necesario rellenar los campos que no sinteresan. Despues la funcion de callback es la que a partir del status tratamos los reultados.

var request = {
  origin:start,
  destination:end,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
};

La llamada y el tratamiento del objeto result. Comprobamos que el status es OK, si no no hay nada que hacer, salvo mostrar el tipo de error.

directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setMap(map);
    var mystr="";
    for(var i in result.routes){
      var mylegs=result.routes[i].legs
      for(var j in mylegs){
        mystr += mylegs[j].distance.text;
        mystr += " " + mylegs[j].duration.text+ " <br/>";
      }
      mystr+="<br/>";
      $(“#infoRecorrido).html(mystr);
    }
    directionsDisplay.setDirections(result);
  }
});

Lo que realmente dibuja el mapa es ‘directionsDisplay.setDirections(result)’ ¿y todo lo demas? pues bien, google nos envia un objeto con bastante información. Los margenes en que se visualizará el mapa, las coordenadas de los puntos de incio y fin, y otras cosas entre ellas la distancia y tiempo de recorrido.
La distancia se encuentra en “result.routes[0..n-1].legs[0..n-1].duration”. Se puede visualizar en texto en tiempo ya tranformado en horas:minutos:segundos con ‘.text’ o directamente en el numero de segundos con ‘.value’.
La respuesta contiene bastante información y se le puede sacar mucho partido (ver: http://code.google.com/intl/es/apis/maps/documentation/directions/ )

bounds = new google.maps.LatLngBounds();
for(var l in markers){
  bounds.extend( markers[l].getPosition() );
}
map.fitBounds(bounds);

visto en: http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/

Finalmente y por experiencia propia recomiendo re posicionar los margenes con cierto retardo con una función como esta:

function rebounds(){
  setTimeout(recReBounds,250,(6));
}

function recReBounds(veces)
  if(!veces){
    return false;
  }
  try{
    bounds = new google.maps.LatLngBounds();
    for(var l in markers){
    bounds.extend( markers[l].getPosition() );
  }
  map.fitBounds(bounds);
  }
  catch(e){
    setTimeout(recReBounds,250,(veces-1));
  }
}

rebounds();

A veces la velocidad del navegador que esté utilizando el cliente no carga las imágenes del mapa con mucha velocidad. Si ejecutamos el reajuste de margenes una vez recogidos los datos puede que se reajusten los margenes antes de pintar el mapa, con lo cual el reajuste no tiene efecto. Con un retardo de un cuarto de segundo el usuario siente interacción de la web y el reajuste tiene efecto.

Trabajando con los markers

Puedes consultar las partes anteriores del manual de Google Maps Api 3

primera parte del manual

segunda parte del manual

Para empezar vamos a trabajar con un vector de marcas que va a ser una variable global markers. Tan sencillo como:

var markers={};

setMarker hace algo más que posicionar un marker en el mapa. Seleciona el campo donde tenemos la localidad (o direccion), esto lo hace con la funcion dollar de jquery. Esta direccion la traduce a coordenadas LatLng con el servicio geocoder.
Despues invoca al método marker que es el que realmente inserta el marcador en el punto correcto del mapa.

function setMarker(id,addid){
  var dir = $("#"+id).val();
  geocoder.geocode( { 'address': dir}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      marker(id, results[0].geometry.location);
    } else {
      marker(id,null);
    }
  });
}

Marker en realidad es una funcion muy sencilla. Si existe el marcador añade una nueva posición, si no existe lo crea indicandole el mapa y la posicion donde irá.
La unica complejidad en cuanto a configuracion del maker es indicarle que no sea arrastrable (draggable) ni que se pueda pinchar (clickable).

function marker(id, location){
  if(markers[id]){
    markers[id].setPosition(location);
  }
  else{
    markers[id] = new google.maps.Marker({
      map: map
      ,position: location
      ,markerOptions:{
        draggable:false
        ,clickable:false
      }
    });
  }

  map.setZoom(10);
}

Otras opciones posibles son hacer zoom y centrar el mapa en el marcador (en este caso está comentado) pero son opciones del mapa, no del marcador.

Borrar un marker

Para borrar un marker es tan sencillo como añadirle una posicion nula. Como en nuestro caso tenemos un objeto global donde están todos nuestros markers nos podemos hacer las funciones hideMarker y hideAllMarkers:

function hideAllMarkers(){
  for(var m in markers){
    markers[m].setPosition(null);
  }
}

function hideMarker(id){
  if(id && id != "" && markers[id]){
    markers[id].setPosition(null);
    return true;
  }
  return false;
}

*Cuidado si se usan otras propiedades de los markers como el texto que despliegan al clickarlos. Si volvemos a ponerle una posicion al marker esas propiedaden persisten. Suponemos que en esta aplicacion no añadimos informacion extra y que los markers no son clickables. En otro caso para más seguridad hay que hacer un new cada vez para chafar las propiedades anteriores, o cambiarlas una por una.

De dirección a coordenada

Puedes consultar la primera parte del manual de Google Maps Api 3

El objeto Geocoder se usa para traducir coordenadas a direcciones y viceversa. Si nos fijamos en las indicaciones de uso de google nos encontramos que si usameos el servico Geocoder tenemos que incluir obligatoriamente un mapa de google en nuestra web.
Bueno en realidad es lo logico al traducir direcciones a coordenadas, pero si estabas pensando dar un servicio de otro tipo que no sea visualizado, siento decirte que te caparán el servicio

Este ejemplo traduce una dirección (de un input text) a unas coordenadas y centra el mapa en esas coordenadas y crea un marker.

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
</script>

más info: http://code.google.com/intl/es/apis/maps/documentation/javascript/services.html#Geocoding

una consulta correcta devuelve un json tal que así:

{
"status": "OK",
"results": [ {
  "types": [ "locality", "political" ],
  "formatted_address": "Winnetka, IL, USA",
  "address_components": [ {
  "long_name": "Winnetka",
  "short_name": "Winnetka",
  "types": [ "locality", "political" ]
  }, {
  "long_name": "Illinois",
  "short_name": "IL",
  "types": [ "administrative_area_level_1", "political" ]
  }, {
  "long_name": "United States",
  "short_name": "US",
  "types": [ "country", "political" ]
  } ],
"geometry": {
  "location": {
    "lat": 42.1083080,
    "lng": -87.7417070
  },
"location_type": "APPROXIMATE",
  "viewport": {
    "southwest": {
      "lat": 42.0917501,
      "lng": -87.7737218
    },
    "northeast": {
      "lat": 42.1248616,
      "lng": -87.7096922
    }
  },
  "bounds": {
    "southwest": {
      "lat": 42.0885320,
      "lng": -87.7715480
    },
    "northeast": {
      "lat": 42.1284090,
      "lng": -87.7110160
    }
  }
}
} ]
}

Accediendo al objeto results[0].geometry.location obtenemos un objeto lonLat, objeto propio de google.maps, que contiene la coordenada. ya podemos hacer lo que queramos con ella.

Google Maps api3 con ejemplos

Esta es la primera parte de un manual sobre el Api 3 de google maps. Simplemente es una primera guia para cómo, a partir de pocas lineas de código, poder implementar una aplicación interesante en tu web.

Aportar información geolocalizada está hoy a la orden del día, yo voy a basarme en los ejemplos que proporciona google añadiendo variaciones que amplian su funcionamiento. Para hacerlo de forma más comoda voy a utilizar jQuery 1.4.2 en algunos casos.

Ejemplo ligeramente modificado con jquery:
-muestra un mapa. se puede insertar longitud y latitud numerica y actualizar el mapa. Despues una lista de las propiedades de google.maps

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./jquery.1.4.2.js"></script>
<script type="text/javascript">
var myOptions, latlng, map;

function initialize() {
  latlng = new google.maps.LatLng(-34.397, 150.644);
  myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$(document).ready(function(){
  $("#buttonver").click(function(){
    var latVar,lonVar;
    latVar = $("#lat").val();
    lonVar = $("#lon").val();
    latlng = new google.maps.LatLng(latVar, lonVar);
    myOptions.center=latlng;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  });
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
<label for="lat">latitud</label><input type="text" id="lat" name="lat" value="38.5"/>
<label for="lon">longitud</label><input type="text" id="lon" name="lon" value="-0.5"/>
<input type="button" id="buttonver" value="ver" />

</body>
</html>

Añadimos evento cuando haga click para que muestre la longitud y latitud:
*MEJORA: no hacemos un new Map cuando cambiamos las coordenadas. Usamos el método map.setCenter(latlng)

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./jquery.1.4.2.js"></script>
<script type="text/javascript">
var myOptions, latlng, map;

function initialize() {
  latlng = new google.maps.LatLng(-34.397, 150.644);
  myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);
  });
}

$(document).ready(function(){
  $("#buttonver").click(function(){
    var latVar,lonVar;
    latVar = $("#lat").val();
    lonVar = $("#lon").val();
    latlng = new google.maps.LatLng(latVar, lonVar);
    myOptions.center=latlng;
    map.setCenter(latlng);
  });
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
<label for="lat">latitud</label><input type="text" id="lat" name="lat" value="38.5"/>
<label for="lon">longitud</label><input type="text" id="lon" name="lon" value="-0.5"/>
<input type="button" id="buttonver" value="ver" />
</body>
</html>

Reseña sobre los eventos posibles:

- ‘click’
- ‘dblclick’
- ‘mouseup’ -> no me va
- ‘mousedown’ -> no me va
- ‘mouseover’
- ’mouseout’

En estos eventos se les pasa un event a la funcion calback que contiene una variable latLng.

- ‘zoom_change’ -> el callback no recibe parámetros
- ‘bounds_changed’
- ‘center_changed’

Enlaces de referencia:

-Tutorial:
http://code.google.com/intl/es/apis/maps/documentation/javascript/tutorial.html

-Referencia:
http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.html

-Ejemplos:
http://code.google.com/intl/es/apis/maps/documentation/javascript/examples/

Hace un tiempo me encontre este post:

llamamiento: http://hacks.mozilla.org/2011/01/write-some-docs-get-an-mdn-t-shirt/

La gente de mozilla iba a hacer un sprint de generar documentación en developer.mozilla.org y buscaban colaboradores. Explicaban que si querias colaborar te podias meter en el canal de chat de irc de desarrolladores (que es #mozdev) y que si colaborabas te podias ganar una camiseta de mozilla.

Pues bien, esa documentación que tanto me ha dado y tan poco le he dado yo. La verdad es que la mayoría está en ingles. Yo tampoco es que conozca el código fuente de firefox como la palma de mi mano, pero si que acostumbro a leer la documentación de distintos sitios para aprender, tanto en ingles como en español, y el wiki de la documentación de mozilla es uno de mis sitios de referencia importantes.

Pues bien, el citado día del sprint me presencié en el canal de chat. Allí me preguntaron que si estaba por el sprint doc day y contesté que sí. “¿En que apartado te gustaría trabajar Scipion?” – me preguntó Janet Swisher, que trabaja en la documentación de mozilla y era una de las coordinadoras del spint. – “En la traducción al español”. – le contesté – “Excelente, tenemos personas trabajando en la traducción al francés y al portugués pero nadie trabajando en español. Enviame tus datos para que te mandemos una camisera”.

Ese día traduje unos cuantos artículos y revisé algún otro, pero queda muchísimo que hacer en la parte hispana de la documentación.

… y los chicos de mozilla me mandaron la camiseta.

No he dejado de contribuir el tiempo que puedo en la docu de mozilla y seguiré cuando tenga un rato, porque muchas cosas que no son novedosas siguen estando solo en inglés.

Por lo visto fue bastante bien la cosa según explican. Normalmente la comunidad produce documentación a un ritmo bastante lento. La comunidad hispana no es una excepción, es más, somos de los que más lentos vamos. Por eso os animo a subiros al carro. Estad pendientes del próximo sprint y ¡¡¡Ganad una camiseta!!!

El otro día intenté entrar en el blog de Tuti PR. Esa chica tiene siempre algo interesante que decir y junto a motagirl2 forma parte del mundillo bloggero femenino que realmente sigo.

Aunque podría escribir un post sobre Relaciones Publicas y Emprendimiento que es de lo que Tuti sabe, en ralidad me voy a centrar en un error. Por lo visto su blog estaba sobrecargado justo en el momento en el que entré y lanzó el error 503.

Un error 503 es un error de sobracarga, seguramente porque algun spider esté rastreando tu web en ese momento, estas sufriendo un efecto meneame o algo similar. Aunque puede que no sea directamente tu web, pero si otra con la que compartes hosting.

A pesar de no poder leer los ultimos posts de tuti si que vi algo que me alegró la vista. Como el servidor en el momento de saturarse debe trabajar lo menos posible lanza una página estática. Esta página se puede personalizar, y ya que tenemos que devolver una pagina estática que sea cool (o geek). Esto es lo que me encontré:

Lo mejor de todo es que la cara de Moss (IT Crowd) no es una imagen. Eso sería muy pesado y consumiría ancho de banda, y estamos hablando de una página que se devuelve cuando el servidor está saturado, así que mejor que no tenga imagenes. ¿Y que puede sustituir a las imágenes en estos tiempos? Pues sí, el CSS. La cara de Moss está hecha completamente en CSS.

No puedo mostrar el trozo de código css+html por aquí porque me da problemas pero es la listra de divs y su respectivo identificador indicando el la posición el tamaño y el color.

Me tendré que manufacturar algo parecido XD. Un 10 para el hosting de Tuti.