sábado, 2 de noviembre de 2013

Magic quotes en PHP

Buenas a todos!!
Os voy a hablar sobre Magic quotes, de hecho si habéis llegado hasta aquí, con toda probabilidad lo que queréis es desactivarlas!! (y casi seguro ya habéis perdido algún tornillo por el camino)

Magic quotes es el mecanismo automático por el que PHP transforma cadenas que contengan comillas en cadenas donde las comillas están escapadas con barras, os pongo en situación:

El cliente envía por ejemplo una petición al servidor con una variable llamada json y transferida mediante post:

json={"id":"1","name":"Magic Quotes"}

En el servidor recogéis este json de la siguiente forma:

$obj = json_decode($_POST["json"]);

Y accedéis a los valores así:

echo $obj->{'id'};
echo $obj->{'nombre'};

Esto es perfecto, porqué en local con seguramente no tenéis magic quotes activado... Ahora bien!! Muchos servidores php de producción por cuestiones de seguridad tienen activada esta opción, y es cuando vuestros servicios json dejan de funcionar, y no sabéis por qué razón en concreto.

Hay varias formas de desactivar Magic quotes, mediante el .htaccess o mediante el php.ini. El problema es que no siempre tendréis acceso a estos ficheros y realmente por seguridad es mejor que no desactivéis esta opción. 
Pero php proporciona una función muy simple para poder regenerar el string al que se han añadido los carácteres de escape para las comillas, stripslashes(str):

$obj = json_decode(stripslashes($_POST["json"]));

Haciendo esto conseguimos obtener correctamente el json, no se genera ningún error, y magic quotes sigue activado.

Espero que os sirva de ayuda, si tenéis cualquier duda mandad comentarios!

Un saludete a todos!

lunes, 16 de septiembre de 2013

50 mil visitas!

Buenas a todos!! Hemos rebasado las 50 mil visitas!!

En el último año hemos pasado de 400 visitas mensuales a 3500!

Gracias a todos los que visitáis el blog, espero que os sea de ayuda!

viernes, 7 de junio de 2013

JQuery: cache de variables

Buenas a todos!
Cuando trabajamos exhaustivamente con JQuery es muy importante no estar haciendo consultas al árbol del documento HTML constantemente para trabajar con los mismos elementos, ya que cada consulta tiene un coste y desciende el rendimiento. Pensad que el operador $ es una función, y que cuando ponéis un string realiza un parseo para determinar si se trata de una consulta de ids, elementos de una misma clase css, elementos con el mismo tag, etc.

En el siguiente ejemplo, tenemos un campo input con id "username" y un botón con id "bt_validate", y vamos a añadir una serie de funcionalidades.
Al principio mostraremos sobre el campo username un mensaje, y cuando cliquemos sobre el camp, se borrará su contenido, el botón validará si el contenido del campo username tiene más de 6 letras.


<html>
  <head>
  <title>JQuery cache de variables</title>
  <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
  </head>
  <body>
  <input id="username" type="text"/>
<input id="bt_validate" type="button" value="Validar"></input>
<script languaje="JavaScript">

var input_username, button;

function init(){
input_username = $("#username");
button = $("#bt_validate");

input_username.val("Introduce tu username");
input_username.click(function(){
input_username.val("");
});

button.click(function() {
if(input_username.val().length > 6)
alert("username válido!");
else

alert("Faltan carácteres");
});

}

window.onload = init;

</script>
  </body>
</html>


Como podéis ver, es necesario acceder varias veces al elemento input, para modificar su valor, para consultar su valor o para añadir un evento click. En todos estos casos tendría que llamar a la función de jquery $("#username") para obtener el input y así trabajar con él.

En vez de eso creamos la variable input_username y cacheamos el objeto de jquery asignándolo a esta variable, gracias a esto evitamos tener que ejecutar la función de jquery que retorna el elemento, cosa que mejora el rendimiento.

De igual forma se ha realizado lo mismo con el botón, usando la variable "button".

En programas pequeños puede que no notéis mejoría, pero cuando tenéis que procesar mucha información, esto puede ser un factor clave para mejorar tiempos de ejecución.

Un saludo a todos!


jueves, 6 de junio de 2013

JQuery: cambiar una imagen

Buenas a todos!

Cambiar una imagen con jquery es un recurso muy sencillo que puede hacer más dinámico el diseño de vuestra web.

Supongamos que tenéis un elemento img con id "mi_imagen", cuyo atributo src apunta a imagen_1.png, y queréis que la imagen cambie por imagen_2.png:

<img id="mi_imagen" src="imagen_1.png"/>

Es importante que en elemento img incluyáis un id, es lo que utilizamos para indicar a qué elemento de la página vamos a modificarle su atributo src:

$('#mi_imagen').attr('src','imagen_2.png');

La función attr indica que vamos a modificar el valor de algún atributo del elemento, en el primer parámetro indicamos qué atributo, en este caso es 'src' y en el segundo parámetro indicamos su nuevo valor 'imagen_2.png'.

Con esto ya está!!

Así por ejemplo si queréis que al pulsar sobre la imágen, cambie a la segunda imágen podéis hacer:

<img id="mi_imagen" src="imagen_1.png" 
onclick="$('#mi_imagen').attr('src','imagen_2.png');">

Un saludo a todos!


JQuery: consultar el contenido de un div

Buenas!

Consultar el contenido de un div puede seros útil en una gran variedad de situaciones.
Por ejemplo para el duplicado de divs, para ver si un div tiene o no tiene contenido, para guardar el contenido temporalmente y mostrar otro en su lugar, etc.

Con JQuery es muy sencillo, supongamos que tenemos un div con id 'contenido', y queremos guardar su contenido en una variable 'c':

<div id="content">Este texto está en el div content</div>

Es tan simple como esto:

var c = $("#content").html();

Ahora si queréis por ejemplo mostrar ese contenido en otro div con id 'contenido_duplicado', tan sólo tenéis que hacer lo siguiente:

$("#contenido_duplicado").html(c);

Es importante tener presente que la función que retorna el contenido de un div, retorna el código html que contiene, es decir, si el div contiene tags como imágenes, tablas, u otros elementos, serán incluidos en el string retornado.

Un saludo a todos!

JQuery: cambiar el contenido de un div

Buenas a todos!
Cambiar el contenido de un div se ha convertido en algo esencial para la programación de páginas web. Permite que la información que mostramos sea más dinámica sin necesidad de recargas.

Con JQuery es bastante simple, supongamos que tenemos un div cuya id es "contenido" y queremos cambiar el texto que muestra:

$("#contenido").html("Contenido del div cambiado");


Así de simple!

El símbolo '#' indica que se trata de una id.

La función html() permite que pongáis directamente tags de html en su interior, incluso podéis añadir otros divs, tablas, imágenes, enlaces, etc.

$("#contenido").html("<img src='imagen.png'/>");

Eso es todo!

martes, 28 de mayo de 2013

Java: llamar a la función constructora desde otra función constructora de la misma clase

Buenas a todos!
Llamar a una función constructora dentro de la misma clase, puede ayudarnos a reducir el código, evitando que reescribamos las mismas inicializaciones y que tengamos código duplicado.
Por ejemplo, supongamos que tenemos dos formas de crear un objeto de una clase Rectangle:
- Indicando las coordenadas (x,y) y el ancho y alto del rectángulo. (por defecto será azul)
- Indicando el ancho y alto del rectángulo y el color del rectángulo. (por defecto estará en las coordenadas 0,0)

Con la función this() podemos llamar a cualquier método constructor de la clase, esta función sólo puede ser llamada al principio del constructor, y nos permitirá no tener que duplicar códigos de inicialización.

public Rectangle{

public float x;
public float y;
public float width;
public float height;
public float[] color = {0f, 192f, 255f};

public Rectangle(float x, float y, float width, float height){
this.x = x;

this.y = y;
this.width  = width;
this.height = height;
}

public Rectangle(float width, float height, float[] color){
this(0f, 0f, width, height);
this.color = color;
}
}


Como podéis ver en el segundo método constructor inicializo directamente los valores de x, y, width y height llamando al primer constructor, esto es muy útil cuando tenemos constructores grandes, y facilita el mantenimiento del código.

Un saludete!

lunes, 4 de marzo de 2013

HTML5 - Coordenadas en el canvas

Buenas a todos!

Las coordenadas en el canvas tienen el origen de los ejes X,Y en la esquina superior izquierda.

Así pues si trabajáis con ecuaciones paramétricas de trayectorias físicas, debéis tener presente que el eje Y está invertido; las coordenadas del suelo corresponden a la altura del canvas, es decir, el "height" que hayáis indicado. Y una velocidad en el eje Y, que hace que un objeto se desplace hacia arriba en la pantalla, debe indicarse como velocidad negativa, en vez de positiva.

Os adjunto un pequeño código en el que se pintan dos círculos, el círculo azul en las coordenadas del canvas (10, 10) y el círculo naranja en las coordenadas (190, 50):




<html>
<head><title>Coordenadas en el canvas</title></head>
<body>
<canvas id="c" width="200" height="60" style="border:1px solid #000000"></canvas>
<script languaje="JavaScript">

var canvas, ctx;

function drawBall(x,y,r,color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}

function init(){
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
drawBall( 10, 10 , 8,"#007eff");
drawBall( 190, 50 , 8,"#dd521c");
}

window.onload = init;

</script>
</body>
</html>


Un saludo a todos!

jueves, 21 de febrero de 2013

Cambiar el background color con Javascript

Hola a todos!
Para cambiar el background color del body con Javascript, basta con asignar un nuevo código en formato RGB al atributo background del estilo del elemento que queramos cambiar, en este caso el body, el formato es "#rrggbb".

document.body.style.background = "#000cff";

Para trabajar de forma más cómoda opino que es mejor encapsular esta línea en una función:

function bgcolor(color){
    document.body.style.background = color;
}

Supongamos que queremos que al pulsar sobre una imagen cambie el color de fondo, en el evento onclick podemos añadir lo siguiente:

<img src="boton.png" onclick="bgcolor('#d2ffae');"/>

Y ya está!!

miércoles, 20 de febrero de 2013

HTML5: Dibujar un círculo en el canvas

Buenas a todos!
Para dibujar un círculo en el canvas, no disponemos de una función específica, es necesario dibujar un arco cerrado y después pintar su interior.

En el siguiente código la función que se encarga de dibujar el círculo recibe 4 parámetros, las coordenadas (x, y) donde se dibujará el círculo, su radio y el color de relleno.

<html>
<head><title>ball html5</title></head>
<body>
<canvas id="c" width="200" height="200"></canvas>
<script type="text/javascript">

var canvas, ctx;

function drawBall(x,y,r,color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}


function clear(){
canvas.width =  canvas.width;
}

function init(){
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
setInterval(loop, 1000/30);
}

function loop(){
clear();
drawBall(100,100,20,"#007eff");
}

window.onload = init;

</script>
</body>
</html>


El código es completamente funcional para que creéis directamente un .html y veáis como funciona. La estructura es la clásica que ya he introducido en otros tutoriales, una función de inicialización donde configuro los objetos que referencian al canvas y su contexto y una función loop, que itera constantemente pintando el canvas a 30 fotogramas por segundo.

Un saludo a todos!

martes, 19 de febrero de 2013

Punteros a funciones con Java

Buenas a todos!
El siguiente post es el resultado de una serie de experimentos matutinos que he llevado a cabo y que únicamente pretendían explorar nuevas formas de trabajar con grandes grupos de condicionales.

Supongamos que queremos ejecutar diferentes comandos en función de un parámetro entero. Es una situación bastante común que suele solventarse empleando un "switch case" o con condicionales del tipo "if ( param == value)", estos métodos clásicos son perfectos, pero su lógica es invariable, difícilmente dinámica, y además no podemos emplearla en diferentes puntos del programa.

Para generar los punteros a funciones he empleado un array de un tipo de clase definida como interface, esto me permite tener instancias con implementaciones distintas para cada función definida por esta interface.

public interface Function{
public void function();
}


Function[] options = {
new Function(){ public void function(){ System.out.println("Option 0"); } },
new Function(){ public void function(){ System.out.println("Option 1"); } },
new Function(){ public void function(){ System.out.println("Option 2"); } },
new Function(){ public void function(){ System.out.println("Option 3"); } }
};


options[2].function();


Tras realizar unas cuantas pruebas, (tampoco excesivamente exhaustivas), he podido concluir que en todos los casos se obtiene un rendimiento igual o superior al que obtendríamos empleando un "switch case". Además, en los casos en que tengamos muchas opciones, el código será mucho más legible, sobretodo si empleamos constantes para definir los índices que originan los distintos comportamientos. Otra ventaja es la posibilidad de reutilizar este tipo de estructura condicional entre distintas partes del programa, es tan simple como compartir el objeto "options".

Espero que os sea de ayuda o al menos que sirva para mostrar otra forma de pensar en las estructuras condicionales.

Un saludete a todos!

domingo, 17 de febrero de 2013

Jagged Arrays en Java

Hola a todos!

¿Qué es un Jagged array?
Jagged significa mellado o dentado, así que más o menos su nombre indica que está incompleto o falta algo por especificar.

Cuando trabajamos con arrays multidimensionales, es muy corriente encontrarnos con el problema de que no todos los niveles del array tendrán las mismas dimensiones o simplemente inicialmente desconocemos las dimensiones de cada nivel.

Supongamos que queremos definir un array que guarde identificadores de fotogramas de diferentes animaciones, pero a priori desconocemos cuantos fotogramas tendrá cada animación.

int MAX_ANIMATIONS = 10;
int[][] animations = new int[MAX_ANIMATIONS][];

int[] framesAnim0 = {1, 2, 3, 4, 5};
int[] framesAnim1 = {6, 7, 8};
int[] framesAnim2 = {9, 10, 11, 12};

animations[0] = framesAnim0;
animations[1] = framesAnim1;
animations[2] = framesAnim2;


animations[][] es el jagged array, es inicializado con un máximo de 10 animaciones, y no especificamos cuántos fotogramas tendrá cada animación.
En caso de que hubiéramos especificado por ejemplo que cada animación tendrá 5 fotogramas, se habrían generado automáticamente 10 arrays con 5 ceros cada uno.

int[][] animations = new int[MAX_ANIMATIONS][5];

Después simplemente asignamos 3 arrays de animaciones a las 3 primeras posiciones del array animations.
En este caso las dimensiones de cada animación pasan a ser directamente las dimensiones de cada uno de los arrays de frames referenciados.

En el caso de que no disponemos de arrays previamente inicializados pero deseamos inicializar con distintas dimensiones cada uno de los niveles de un jagged array podemos hacerlo de la siguiente forma:

int MAX_ANIMATIONS = 4;
int[][] animations = new int[MAX_ANIMATIONS][];

animations[0] = new int[2];
animations[1] = new int[4];
animations[2] = new int[8];
animations[3] = new int[16];

Con este tipo de inicialización conseguiríamos un array que contiene los siguientes elementos:

animations[0] = {0,0};
animations[1] = {0,0,0,0};
animations[2] = {0,0,0,0,0,0,0,0};
animations[3] = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};

Un saludo a todos!

miércoles, 30 de enero de 2013

Comprobar soporte para OpenGL ES 2.0 en Android

Hola a todos!!
Aunque hoy en día prácticamente todos los tablets y móviles con Android, ofrecen soporte para OpenGL ES 2.0, hay algunos usuarios rezagados en los que vuestras implementaciones en 2.0 no funcionarán!

Para poder comprobar si el dispositivo ofrece soporte para OpenGL ES 2.0, en el método onCreate() de vuestra activity principal y antes de configurar el view con OpenGL, podéis poner el siguiente código:


final ActivityManager activityManager = (ActivityManager)getSystemService(this.ACTIVITY_SERVICE);
final ConfigurationInfo configurationInfo = activityManager.getDeviceConfigurationInfo();
final boolean supports_OGL2 = configurationInfo.reqGlEsVersion >= 0x20000;

if(supports_OGL2)  log.println("Supports OGL2");
else               log.println("Doesn't supports OGL2");


La variable supports_OGL2 de tipo boolean indica si el dispositivo ofrece o no ofrece soporte para OpenGL ES 2.0.

Y ya está!!

Crear logs en Android

Hola  a todos!!
Los logs pueden transformarse en piezas fundamentales durante el desarrollo de aplicaciones con un mínimo de complejidad, sobretodo en entornos donde no podemos acceder a la consola directamente o donde la consola emite grandes cantidades de información y se vuelve ilegible.

Crear un log en android

Crear un Log para android es bastante simple:

LogPrinter log = new LogPrinter(Log.INFO, "INFO_PLAYER");

Creamos una instancia de la clase LogPrinter, indicando el tipo de alerta en el parámetros prioridad y el tag que identificará al log.
Los tipos de prioridad son los siguientes:
Log.VERBOSE, Log.DEBUG, Log.INFO, Log.WARN,Log.ERROR

Para mostrar información en el log, se emplea de forma similar al clásico System.out.println:

log.println("player creado!");

Ver los logs de una aplicación para Android en Eclipse

Antes de ejecutar la aplicación sobre el móvil o tablet que tengamos conectado debemos configurar un filtro de logs, para ver fácilmente los logs que pertenezcan al tag que hemos creado.
Primero abrimos el panel de logs de android y después creamos un filtro.



Sobretodo es importante que el nombre del tag sea exactamente igual que el que usasteis para crear la instancia del log, y que el log level sea igual que la prioridad con la que configurasteis el log.

Una vez creado el filtro, cuando ejecutéis vuestra aplicación, simplemente tendréis que seleccionarlo en el panel de la izquierda del cuadro de logs, para ver los mensajes que va pintando vuestra aplicación.

Eso es todo!

un saludete!