SoftOnTheRocks: julio 2013

martes, 30 de julio de 2013

Input number HTML5. Un campo de numérico para los formularios

En este post y en los siguientes vamos a publicar los nuevos tipos de input que encontramos en HTML5. Con estos nuevos input vamos a ahorrarnos muchas líneas de código validando los valores introducidos ya que ellos controlan automáticamente las respuestas.

El input number de HTML5 valida automáticamente que el valor introducido sea un numérico.

SINTAXIS

<input type="number" name="edad" min="18" max="99" step="2" value="18">

ATRIBUTOS

Los atributos más importantes que definen a input number son los siguientes:

min: valor mínimo del input
max: valor máximo del input
step: valor del intérvalo del input. Con este atributo indicamos el valor en que aumenta o disminuye el input si pulsamos las flechas que aparecen.
valor: valor por defecto del input.

Ordenar array numérico con Javascript

En Javascript la ordenación de arrays se realiza con el método array.sort(). Sin embargo, esta ordenación es lexicográfica y alfanumérica, con lo que si deseamos ordenar un array numérico tendremos problemas. Veamos este ejemplo:

var myarray = [40,100,1,5,25,10];

myarray.sort(); //La función devuelve [1,10,100,25,40,5]

Lo mismo ocurre si intentamos ordenar de forma descendente, ya que primero deberíamos ordenar ascendentemente con el método array.sort() y después invertir el resultado con el método array.reverse(). Al venir ya incorrecta la ordenación ascendente, el método reverse() simplemente nos imprimiría [5,40,25,100,10,1].

Para solucionar estos problemas es muy sencillo. Simplemente pasamos una función como argumento del método sort() y ya tenemos el array numérico ordenado ascendentemente:

var myarray = [40,100,1,5,25,10];

myarray.sort(function(a,b){return a - b}); //La función devuelve [1,5,10,25,40,100]

Para ordenar descendentemente podríamos usar el método reverse() sobre el resultado anterior o invertir la resta de los parámetros de la función que usamos dentro del sort() de la siguiente forma:

var myarray = [40,100,1,5,25,10];

myarray.sort(function(a,b){return b - a}); //La función devuelve [100,40,25,10,5,1]

sábado, 27 de julio de 2013

Mostrar PDF embebido en HTML

Para mostrar un archivo pdf embebido dentro de una página HTML lo único que tenemos que hacer es escribir el siguiente código:

<html>
<body>
<embed src="manual.pdf" width="100%" height="100%">
</body>
</html>

jueves, 25 de julio de 2013

Convertir numéricos con toFixed() y toPrecision() en Javascript

Estas dos funciones son una forma muy sencilla de convertir o formatear valores numéricos en Javascript.

Con la función toFixed() convertimos un número a string con una longitud exacta de valores decimales. Así pues, si se especifican más decimales de los que tiene el valor numérico original, nos añadirá ceros por detrás.

La función toPrecision() en cambio lo que hace es formatear un número a una longitud total concreta. Al igual que con la anterior función, nos añade ceros por detrás si la longitud especificada es mayor que la que tiene la variable numérica.

Veamos algunos ejemplos:

var num = 5.56789;
document.write(num.toFixed()); //6 -> sin decimales
document.write(num.toFixed(2)); //5.57
document.write(num.toFixed(4)); //5.5679
document.write(num.toFixed(6)); //5.567890 -> añade ceros por detrás
document.write(num.toFixed(8)); //5.56789000 -> añade ceros por detrás
 
document.write(num.toPrecision()); //5.56789 -> devuelve el número original
document.write(num.toPrecision(2)); //5.6
document.write(num.toPrecision(4)); //5.568
document.write(num.toPrecision(6)); //5.56789
document.write(num.toPrecision(8)); //5.5678900 -> añade ceros por detrás

Convertir cadenas de texto en números en Javascript

Os dejo un par de funciones Javascript muy útiles para convertir cadenas de texto a números enteros y decimales. Estas funciones se llaman parseInt y parseFloat.

La función parseInt evalúa una cadena y devuelve un entero. La sintaxis es parseInt(string, radix) donde string es la cadena a convertir y radix se utiliza para especificar el sistema numérico a usar. Si el parámetro radix no se especifica, Javascript asume lo siguiente:

Si la cadena empieza por "0x", Javascript interpreta que se tiene que convertir a hexadecimal.
Si empieza por "0" se asume que se quiere convertir a octal.
Si empieza por cualquier otra cadena se asume que el número base 10 (sistema decimal).

Ejemplos de uso:

<script>
document.write(parseInt("10")); //10
document.write(parseInt("10.33")); //10
document.write(parseInt("34 45 66")); //34
document.write(parseInt(" 60 ")); //60
document.write(parseInt("40 years")); //40
document.write(parseInt("He was 40")); //NaN
document.write(parseInt("10",10)); //10
document.write(parseInt("010")); //10
document.write(parseInt("10",8)); //8
document.write(parseInt("0x10")); //16
document.write(parseInt("10",16)); //16
</script>

La función parseFloat evalúa la cadena y devuelve un número decimal. Al igual que con parseInt, esta función analiza caracter a caracter hasta que encuentra el final de la cadena o un caracter no válido. Si el primer caracter no es numérico devuelve NaN.

Veamos algunos ejemplos:

<script>
document.write(parseFloat("10")); //10
document.write(parseFloat("10.33")); //10.33
document.write(parseFloat("34 45 66")); //34
document.write(parseFloat(" 60 ")); //60
document.write(parseFloat("40 years")); //40
document.write(parseFloat("He was 40")); //NaN
</script>

Fuente:

http://www.w3schools.com/jsref/jsref_parseint.asp

http://www.w3schools.com/jsref/jsref_parsefloat.asp

martes, 23 de julio de 2013

Parser online de JSON

Si trabajamos con la notación JSON nos habrá ocurrido más de una vez que al tratar de convertir una cadena a un objeto el parser nos ha indicado un error.

En lenguajes como PHP, la única información que podemos obtener al parsear es el tipo de error, pero si la cadena es larga nos puede costar un buen rato encontrar el motivo.

Para solucionar este problema os dejo el enlace de un parser online http://json.parser.online.fr/ en el que simplemente pegaremos la cadena JSON en el textarea de la izquierda y automáticamente nos evaluará si es válido y en el caso en que encuentre algún error nos indicará en qué línea y qué tipo de error es. Se trata de una herramienta muy útil y que a cualquier desarrollador le puede venir bien en algún momento.

lunes, 22 de julio de 2013

Funciones PHP en Javascript. Proyecto php.js

Con este post pretendemos hablar de un proyecto de código libre que ya lleva mucho tiempo activo, php.js. Se trata de una gran colección de funciones Javascript basadas en muchas de las funciones más comunes y utilizadas de PHP.

La web del proyecto es http://phpjs.org, que como podremos ver proporciona el código fuente de las funciones de forma totalmente libre y gratuita.

El apartado Functions es especialmente interesante ya que en él encontramos el listado completo de las funciones creadas agrupadas por categorías y pulsando sobre cada función podemos obtener el código fuente para añadirlo a nuestra aplicación web.

El repositorio para las descargas lo encontramos en github cuya url es https://github.com/kvz/phpjs.

Obtener dirname y basename de un fichero en Javascript

Si necesitamos con Javascript obtener el nombre del directorio padre o el nombre del fichero de una ruta a fichero completa lo podemos conseguir con estas dos funciones que utilizan una expresión regular para conseguirlo:

function basename(path) {
    return path.replace(/\\/g,'/').replace( /.*\//, '' );
}
 
function dirname(path) {
    return path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
}

domingo, 21 de julio de 2013

Aleatorizar un array en Javascript

Con esta sencilla función conseguimos ordenar de forma aleatoria los elementos de un array:

function shuffle(arr) {
 for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i,10), x = arr[--i], arr[i] = arr[j], arr[j] = x) {}
 return arr;
}

Quitar espacios con ltrim, rtrim y trim en Javascript

La función trim es una función muy utilizada en cualquier lenguaje de programación. En Javascript estas funciones no están implementadas aunque son unas funciones muy sencillas de programar.

LTRIM (Quitar espacios por la izquierda)

function ltrim(s) {
   return s.replace(/^\s+/, "");
}

RTRIM (Quitar espacios por la derecha)

function rtrim(s) {
   return s.replace(/\s+$/, "");
}

TRIM (Quitar espacios por la derecha e izquierda)

function trim(s) {
   return rtrim(ltrim(s));
}

Obtener la extensión de un fichero con PHP

Para obtener la extensión de un archivo en PHP tenemos varias posibilidades. Os dejo una muy sencilla a continuación:

function getExtension($file) {
  $pos = strrpos($file, '.');
  if($pos===false){
    return false;
  } else {  
    return substr($file, $pos+1);
  }
}

sábado, 20 de julio de 2013

Web Services JSON con PHP

En este ejemplo vamos a intentar explicar cómo realizar un simple web service que utiliza JSON como formato de intercambio, en lugar del clásico XML que utilizan los web services SOAP. Con JSON además de su sencillez para manejarlo con Javascript y PHP tenemos un formato ligero y muy simple de notación literal.

Lo primero que tendremos en cuenta es que el formato de intercambio será JSON, por lo que la información enviada y recibida será de tipo application/json.

El código de la clase del web service y la implementación de una función básica para obtener la hora del servidor sería este:

class JSON_WebService {
    private $methods, $args, $strcall;
    public function __construct($rawData) {
        $this->strcall = str_replace($_SERVER["SCRIPT_NAME"]."/", "", $_SERVER["REQUEST_URI"]);
        $this->args = $rawData;
        $this->methods = array();
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
        header('Cache-Control: no-cache, must-revalidate');
        header('Content-type: application/json; charset=utf-8');
    }
 
    public function Register($name) {
        $this->methods[$name] = true;
    }
 
    public function Remove($name) {
        $this->methods[$name] = false;
    }
 
    private function call($name, $args) {
        if ($this->methods[$name] == true) {
            $result = call_user_func_array($name, $args);
           return json_encode($result);
        }
    }
 
    function start() {
        try{
            if(!function_exists($this->strcall))
                throw new Exception("Function '".$this->strcall."' does not exist.");
            if (!$this->methods[$this->strcall])
                throw new Exception("Access denied for function '".$this->strcall."'.");
 
            header("HTTP/1.0 200 OK");
            print $this->call($this->strcall, json_decode($this->args));
        }
        catch(Exception $e){
            header("HTTP/1.0 500 Internal server error");
            print json_encode(
                array(
                    "message" => $e->getMessage(),
                    "code" => $e->getCode(),
                    "file" => $e->getFile(),
                    "line" => $e->getLine(),
                    "stackTrace" => $e->getTrace(),
                    "status" => array("message" => "Internal server error", "code" => "500")
                )
            );
        }
    }
}
 
//Obtiene el contenido de la solicitud POST
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : ''; 
  
//Instancia de la clase JSON_WebService
$server = new JSON_WebService($HTTP_RAW_POST_DATA);
  
//Registra los metodos del servicio web
$server->register("getServerTime");
  
//Inicializa el servicio
$server->start();
  
//Define los metodos del servicio web
function getServerTime($format){
     return date($format);
}

Para la llamada al web service implementamos una clase cliente. Realmente lo que hacemos es utilizar las funciones de la librería libcurl pasándole por POST los parámetros a la página PHP que hace de servidor. El código lo tenemos a continuación:

class JSON_WebClient{
    private $URL;
    public function __construct($url){
        $this->URL = $url;
    }
 
    public function call($method, $args, $successCallback = false, $errorCallback = false){
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array("Content-Type: application/json"));
        curl_setopt($ch, CURLOPT_URL, $this->URL."/".$method);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($args));
        $resposeText = curl_exec($ch);
        $resposeInfo = curl_getinfo($ch);
         
        if($resposeInfo["http_code"] == 200){
            if($successCallback)
                call_user_func($successCallback, json_decode($resposeText));
        } else {
            if($errorCallback)
                call_user_func($errorCallback, json_decode($resposeText));
        }
    }
}

Y la llamada la tendríamos con este código:

$client = new JSON_WebClient("http://localhost/service.php");
$client->call("getServerTime", array("format"=>"d/m/o H:i:s"), "onSucceededCallback", "onErrorCallback");
 
function onSucceededCallback($result){
    print $result;
}
 
function onErrorCallback($error){
    print "Error: ".$error->{"message"};
}

Leer variables GET de una URL mediante Javascript

Es posible que necesitemos obtener los valores de una serie de parámetros que nos llegan por GET en una URL mediante Javascript. Con una sencilla función en la que utilizamos una expresión regular sobre el location.href obtendremos un array asociativo con el resultado. La página de la que queremos extraer los valores podría ser example.html?param1=value1¶m2=value2. Código

function getUrlVars() {
 var map = {};
 var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  map[key] = value;
 });
 return map;
}

Llamada a la función

var params = getUrlVars();
var first = params["param1"];
var second = params["param2"];
  
alert(first);
alert(second);

miércoles, 17 de julio de 2013

Obtener número aleatorio entre un rango de números con Javascript

Con este simple código obtenemos un número aleatorio entre dos números dados.

function randomRange(ini, fin){
 return Math.floor(Math.random()*(fin-ini+1)+ini);
}

Obtener el factorial de un número con PHP

Calcular el factorial de un número es un algoritmo muy simple. Aquí abajo os dejo una implementación realizada en PHP

function factorial($valor) {
 $res = 1;
 while ($valor > 1) {
  $res*= $valor--;
 }
 return $res;
}

Eliminar el contenido de un directorio en PHP

Con el código que os dejo a continuación podemos eliminar fácilmente el contenido completo de un directorio mediante PHP.

function eliminarDirectorio($dir) {
 // Obtenemos un manejador del directorio
 if ($handle = opendir("$dir")) {
  $res = true;
 
  // Recorremos los archivos del directorio
  while ((($fich = readdir($handle)) !== false) && ($res)) {
   if ($fich != '.' && $fich != '..') {
    // Si el archivo es un directorio llamo recursivamente a la función
    if (is_dir("$dir/$fich")) {
     $res = eliminarDirectorio("$dir/$fich");
    } else { // Eliminamos el fichero
     $res = unlink("$dir/$fich");
    }
   }
  }
   
  // Cerramos el manejador del directorio
  closedir($handle);
   
  // Si se ha eliminado correctamente eliminamos el propio directorio
  if ($res)
   $res = rmdir($dir);
 } else {
  $res = false;
 }
  
 // Devolvemos si se ha podido eliminar el directorio por completo correctamente
 return $res;
}

jueves, 4 de julio de 2013

Agujero de seguridad en el 99% de los dispositivos Android

Hoy mismo ha aparecido en toda la prensa internacional la noticia de una reciente investigación de la empresa Bluebox Security en el que aseguran haber encontrado un error de vulnerabilidad en el 99% de los dispositivos con sistema operativo Android.

En el blog de la propia empresa Bluebox se explica perfectamente en qué consiste. Para los que tengáis problemas con el inglés el artículo se puede encontrar en español en muchísimas páginas como en la web de El País.

miércoles, 3 de julio de 2013

Oscurecer el color de un objeto HTML mediante Javascript o PHP

Una función que puede ser bastante útil es la de oscurecer un color que tenemos en formato hexadecimal. Yo lo uso para cambiar el color de un objeto HTML al pasar por encima de él y así obtengo el mismo color que el original pero más oscuro.
La función en PHP sería la siguiente:

function oscurecerColor($color, $cant){
 //voy a extraer las tres partes del color
 $rojo = substr($color,1,2);
 $verd = substr($color,3,2);
 $azul = substr($color,5,2);
 
 //voy a convertir a enteros los string, que tengo en hexadecimal
 $introjo = hexdec($rojo);
 $intverd = hexdec($verd);
 $intazul = hexdec($azul);
 
 //ahora verifico que no quede como negativo y resto
 if($introjo-$cant>=0) $introjo = $introjo-$cant;
 if($intverd-$cant>=0) $intverd = $intverd-$cant;
 if($intazul-$cant>=0) $intazul = $intazul-$cant;
 
 //voy a convertir a hexadecimal, lo que tengo en enteros
 $rojo = dechex($introjo);
 $verd = dechex($intverd);
 $azul = dechex($intazul);
 
 //voy a validar que los string hexadecimales tengan dos caracteres
 if(strlen($rojo)<2) $rojo = "0".$rojo;
 if(strlen($verd)<2) $verd = "0".$verd;
 if(strlen($azul)<2) $azul = "0".$azul;
 
 //voy a construir el color hexadecimal
 $oscuridad = "#".$rojo.$verd.$azul;
 
 //la función devuelve el valor del color hexadecimal resultante
 return $oscuridad;
}

Y su equivalente en Javascript

function oscurecerColor(color, cant){
 //voy a extraer las tres partes del color
 var rojo = color.substr(1,2);
 var verd = color.substr(3,2);
 var azul = color.substr(5,2);
 
 //voy a convertir a enteros los string, que tengo en hexadecimal
 var introjo = parseInt(rojo,16);
 var intverd = parseInt(verd,16);
 var intazul = parseInt(azul,16);
 
 //ahora verifico que no quede como negativo y resto
 if (introjo-cant>=0) introjo = introjo-cant;
 if (intverd-cant>=0) intverd = intverd-cant;
 if (intazul-cant>=0) intazul = intazul-cant;
 
 //voy a convertir a hexadecimal, lo que tengo en enteros
 rojo = introjo.toString(16);
 verd = intverd.toString(16);
 azul = intazul.toString(16);
 
 //voy a validar que los string hexadecimales tengan dos caracteres
 if (rojo.length<2) rojo = "0"+rojo;
 if (verd.length<2) verd = "0"+verd;
 if (azul.length<2) azul = "0"+azul;
 
 //voy a construir el color hexadecimal
 var oscuridad = "#"+rojo+verd+azul;
 
 //la función devuelve el valor del color hexadecimal resultante
 return oscuridad;
}

Llenar una cadena con ceros a la izquierda mediante PHP

Aquí os dejo una función muy simple para añadir ceros a la izquierda hasta una determinada longitud.

function zerofill($valor, $longitud){
 $res = str_pad($valor, $longitud, '0', STR_PAD_LEFT);
 return $res;
}

martes, 2 de julio de 2013

Obtener la dirección IP que solicita una página PHP

A continuación os dejo una función hecha en PHP que permite obtener la dirección IP de quien solicita una página. En esta función se tienen en cuenta las posibles direcciones de los proxys por los que pasa la petición. Para localizar la ip real del usuario se comienza a mirar por el principio hasta encontrar una dirección ip que no sea del rango privado. En caso de no encontrarse ninguna se toma como valor el REMOTE_ADDR.

function getRealIP(){
 if( $_SERVER['HTTP_X_FORWARDED_FOR'] != '' ){
  $client_ip =
   ( !empty($_SERVER['REMOTE_ADDR']) ) ?
    $_SERVER['REMOTE_ADDR']
   :
            ( ( !empty($_ENV['REMOTE_ADDR']) ) ?
    $_ENV['REMOTE_ADDR']
    :
    "unknown" );
 
  $entries = split('[, ]', $_SERVER['HTTP_X_FORWARDED_FOR']);
 
  reset($entries);
  while (list(, $entry) = each($entries)){
   $entry = trim($entry);
   if ( preg_match("/^([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)/", $entry, $ip_list) ){
    // http://www.faqs.org/rfcs/rfc1918.html
    $private_ip = array(
     '/^0\./',
     '/^127\.0\.0\.1/',
     '/^192\.168\..*/',
     '/^172\.((1[6-9])|(2[0-9])|(3[0-1]))\..*/',
     '/^10\..*/');
 
    $found_ip = preg_replace($private_ip, $client_ip, $ip_list[1]);
 
    if ($client_ip != $found_ip){
     $client_ip = $found_ip;
     break;
    }
   }
  }
 } else {
  $client_ip =
   ( !empty($_SERVER['REMOTE_ADDR']) ) ?
    $_SERVER['REMOTE_ADDR']
   :
    ( ( !empty($_ENV['REMOTE_ADDR']) ) ?
    $_ENV['REMOTE_ADDR']
    :
    "unknown" );
 }
 return $client_ip;
}

lunes, 1 de julio de 2013

Como obtener nuestra posición con HTML5, Javascript y jQuery sin usar GPS

Hoy en día una de las cosas que más nos pueden llamar la atención al utilizar un smartphone o un tablet es que muchas de las aplicaciones que ejecutamos nos piden permiso para localizar tu posición. Para esto no hace falta tener un receptor GPS en el dispositivo sino que la combinación de varias tecnologías como WIFI y GSM pueden llegar a dar una posición bastante exacta.

Con las redes WIFI lo que se hace para obtener nuestra posición es triangular las direcciones MAC de dichas redes. Para ello existen bases de datos que guardan las posiciones de las redes y sus "matrículas". Existen varias empresas que se dedican a ir anotando esta información, entre ellas por supuesto Google con su Google Street View.

La tecnología GSM utiliza las antenas de telefonía para también triangular nuestra posición.

Todo esto llevado a la práctica es una tarea muy sencilla que se puede realizar mediante Javascript sobre navegadores que soporten HTML5 y siempre y cuando permitamos al navegador que detecte nuestra posición. A continuación os dejo un pequeño trozo de código para que veáis qué se puede hacer. Simplemente muestro el resultado en formato imagen de Google Maps, pero lo podríamos complicar mucho más utilizando la API de Google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript">
 function getPosition() {
  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(showMap, showError);
  } else {
   alert('El navegador no soporta la API de geolocalización');
  }
 }
 
 function showMap(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + latitude + "," +
      longitude + "&zoom=14&size=500x500&markers=color:blue|label:P|" +
      latitude + ',' + longitude;
  $(document.body).append(
   $(document.createElement("img")).attr("src", image_url).attr('id','map')
  );
 }
 
 function showError(err) {
  if (err.code == 0) {
   alert("Error desconocido");
  }
  if (err.code == 1) {
   alert("El usuario no ha compartido su posición");
  }
  if (err.code == 2) {
   alert("No se puede obtener la posición actual");
  }
  if (err.code == 3) {
   alert("timeout recibiendo la posicion");
  }
 }
</script>
<a href="javascript:getPosition();">Mostrar Posición</a>

Saber si estamos en modo online con Javascript

Una de las necesidades que nos podemos encontrar a la hora de programar con Javascript es la de saber si tenemos conexión o no. Para ello el objeto navigator presenta una propiedad llamada onLine que devuelve un valor booleano.

Un ejemplo sencillo puede ser:

if (navigator.onLine){
  alert('CON conexión');
} else {
  alert('SIN conexión');
}

Osclass. Software gratuito para crear webs de anuncios clasificados

Osclass es un software gratuito desarrollado sobre PHP y MySQL, bajo licencia Affero GPLv3, destinado a crear de una forma muy sencilla webs de anuncios clasificados.

Sus características más importantes son:

Sencillez a la hora de instalarlo. Basta tener un servidor WAMP/LAMP instalado en tu PC o en un hosting básico y descargarlo a la carpeta de documentroot.
Multi-idioma. Está disponible en cerca de 20 idiomas.
Panel de control sencillo de manejar para introducir las categorías de los anuncios.
Posibilidad de descargar temas desde el propio panel de control.
Posibilidad de más de 40 plugins para aumentar las posibilidades de configuración de la web.

Para poder ver una demo, obtener una guia de instalación y descargar el software podéis ir a la web del proyecto Osclass.