da-software

Validar Nif NIE con Laravel

2020-05-11T13:05:00.001+02:00

Para validar si un Cif o NIE es correcto podemos emplear una Rule personalizada. El código completo de la regla sería:

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class NifNie implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
   //
}

/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
   return ($this->isValidNif($value) || $this->isValidNie($value));
}

/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
   return 'Debe ser un Nif o Nie válido';
}

public function isValidNif($nif)
{
   $nifRegEx = '/^[0-9]{8}[A-Z]$/i';
   $letras = "TRWAGMYFPDXBNJZSQVHLCKE";

   if (preg_match($nifRegEx, $nif)) {
      return ($letras[(substr($nif, 0, 8) % 23)] == $nif[8]);
   }

   return false;
}

public function isValidNie($nif)
{
   $nieRegEx = '/^[KLMXYZ][0-9]{7}[A-Z]$/i';
   $letras = "TRWAGMYFPDXBNJZSQVHLCKE";

   if (preg_match($nieRegEx, $nif)) {

      $r = str_replace(['X', 'Y', 'Z'], [0, 1, 2], $nif);

      return ($letras[(substr($r, 0, 8) % 23)] == $nif[8]);
   }

   return false;
}
}

Para usarlo en nuestra request, haríamos:

public function rules()
{
return [
'vat' => [new NifNie, 'required', 'string', 'max:255', 'unique:users,vat'],
];
}

Rules, validaciones personalizadas en Laravel

2020-05-11T12:18:00.000+02:00

Laravel ya nos ofrece gran cantidad de validaciones para emplear en las request, pero muchas veces nos puede surgir la necesidad de crear una propia. Se hará mediantes Rules y el comando de artisan para crear una nueva sería:

php artisan make:rule MyRule

Se creará el archivo MyRule.php dentro de la carpeta app/Rules con el siguiente contenido:

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class MyRule implements Rule
{
/**
* Create a new rule instance.
*
* @return void
*/
public function __construct()
{
   //
}

/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
   //
}

/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
   return 'The validation error message.';
}
}

Dentro de la funcción passes() es donde escribiríamos nuestra validación, que tendrá que devolver true o false dependiendo si la pasa o no.

A modo de ejemplo, vamos a modificar MyRule para que verifique que un número A es mayor que otro número B. Una validación que se podría hacer con la validaciones que trae Laravel, pero que vamos a realizarla a modo explicativo:

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class MyRule implements Rule
{
private $number_a;
private $number_b;

/**
* Create a new rule instance.
*
* @return void
*/
public function __construct($number_a, $number_b)
{
   $this->number_a = $number_a;
   $this->number_b = $number_b;
}

/**
* Determine if the validation rule passes.
*
* @param string $attribute
* @param mixed $value
* @return bool
*/
public function passes($attribute, $value)
{
   return $number_a > $number_b;
}

/**
* Get the validation error message.
*
* @return string
*/
public function message()
{
   return 'El numero A no es mayor que el B';
}
}

El constructor de la regla recibirá dos parámetros que serán los números a verificar. La funcción passes() devuelve el resultado de la comparación de los dos valores. Por último, la funcción message() devuelve el texto del error.

Para usar nuestra nueva regla, lo haríamos de la siguiente forma en la request:

public function rules()
{
return [
'number_a' => ['required', 'integer', new MyRule($this->number_a, $this->number_b)],
];
}

Al campo number_a de la request, ademas de que sea requerido e integer, le agregamos nuestra regla MyRule. Pasándole al constructor los dos valores a comprobar, que en este caso serán dos parámetros de la propia request, number_a y number_b.

Carbon en plantillas Blade de Laravel

2020-05-11T11:16:00.000+02:00

Usar Carbon en Blade es imprescindible y se puede hacer de forma muy sencilla. Unos ejemplos de uso:

Hoy: {{ \Carbon\Carbon::now()->format('d-m-Y')) }}

Nueva fecha: {{ \Carbon\Carbon::createFromFormat('Y-m-d', '2000-01-01')->format('d/m/Y') }}

Rutas con slug en Laravel 7

2020-05-11T10:18:00.001+02:00

Una de las nuevas funcionalidad que trae Laravel 7 es la facilidad para enlazar los modelos a las rutas por un campo slug, o cualquier otro de nuestro modelo. La forma es bien sencilla:

//ruta para visitantes
Route::get('/post/{post:slug}', function(Post $post){
dd($post);
});

//ruta para administradores
Route::get('/admin/post/{post}', function(Post $post){
dd($post);
});

En el código anterior se definen dos rutas, una para visitantes de un blog y otra para los administradores. En la primera, se accederá al post mediante el campo slug del modelo con :slug; mientras que en la segunda, se enlazará al modelo mediante el campo por defecto id, es decir, sería lo mismo que indicar :id en la ruta definida para administradores.

Para versiones de Laravel anteriores a la 7, se puede modificar el comportamiento por defecto de enlazar la ruta al modelo mediante en campo id. Esto se puede hacer mediante la función getRouteKeyName(), en el articulo Rutas con slug en Laravel explico el funcionamiento.

Rutas con slug en Laravel

2020-05-11T10:11:00.001+02:00

En Laravel, si queremos enlazar un modelo a un ruta se hace por el campo id de dicho modelo, es decir:

Route::get('/post/{post}', function(Post $post){
dd($post);
});

Para cambiar este comportamiento de Laravel de enlazar al modelo mediante el campo id, podemos hacerlo mediante la función getRouteKeyName() en el modelo:

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
function getRouteKeyName(){
return 'slug';
}
}

Centrado horizontal y vertical de un elemento HTML

2013-09-15T18:21:00.001+02:00

Para centrar cualquier elemento HTML tenemos que tener en cuenta como esta definida su anchura y altura. Las dimensiones de los elementos podemos definirlas en porcentajes o en píxeles y dependiendo de esta unidad de medida el elemento será centrado de una forma u otra.

Cuando las dimensiones del elemento están definidas en porcentajes su centrado es muy sencillo y se hará de la siguiente forma:

#elemento{
width: 60%;
height: 40%;
margin-left: 20%;
margin-right: 20%;
margin-top: 30%;
margin-bottom: 30%;
}

Es decir, habrá que asignar un margen con la mitad del ancho y alto del elemento

Cuando el tamaño del elemento esta definido en píxeles haremos lo siguiente:

#elemento{
width: 540px;
height: 400px;
margin: -200px 0 0 -270px;
left: 50%:
top: 50%;
position: relative;
}

Asignamos un margen negativo por la izquierda de la mitad del ancho total del elemento; un margen superior negativo con la mitad de la altura total; lo posicionamos tanto por la izquierda como por la parte superior al 50% y establecemos su posición a relativa.

Libros Javascript gratuitos

2013-08-19T19:19:00.000+02:00

JSbooks es una amplia colección de libros Javascript gratuitos clasificados según el nivel de dificultad, encontrado los mejores libros para principiantes, programadores con nivel intermedio y para programadores Javascript avanzados.

Entre los distintos títulos encontrarás libros dedicados a Javascript, jQuery y NodeJS

Para acceder a la guía completa de libros puedes acceder desde JSbooks.

Almanaque CSS

2013-08-19T19:13:00.002+02:00

Fantástica recopilación de selectores y propiedades CSS. Un almanaque completo, ordenado por orden alfabético, con todos los selectores CSS y propiedades CSS con sus correspondientes especificaciones y ejemplos de uso.

También incluye consejos y guías de buenas prácticas que te ayudaran a manejar de forma correcta los selectores y propiedades CSS. El almanaque completo puedes verlo en css-tricks.com pinchando aquí.

Detectar si jQuery está cargado

2013-08-14T15:45:00.003+02:00

A veces es importante detectar si jQuery está o no cargado, ya que en caso de ya este cargado y volvamos a hacerlo puede producir errores inesperados en nuestro script. Si por el contrario no está cargado, nuestro script no funcionará.

Esto se evidencia durante la creación de plugins, ya que si nuestro plugin precisa de jQuery, deberíamos comprobar si ya ha sido previamente cargado por otro plugin.

Para detectar si jQuery está cargado y cargarlo en caso de que no lo este, haríamos:

Obtener sistema operativo del visitante con PHP

2013-08-10T09:50:00.000+02:00

Para realizar estadísticas de uso de una Web, resulta interesante obtener el sistema operativo empleado por cada usuario, así podremos conocer los hábitos de los visitas a nuestra.

Para obtener el sistema operativo o plataforma empleada en una visita, en primer lugar, debemos obtener el USER_AGENT. El USER_AGENT nos dará toda la información necesaria sobre el sistema operativo y navegador de la visita.

En el artículo Obtener navegador del visitante con PHP explico cómo obtener el navegador empleado. Para recoger el USER_AGENT de la visita lo haremos:

$user_agent = $_SERVER['HTTP_USER_AGENT'];

Una vez obtenido el user_agent únicamente tenemos que pasar este valor a nuestra función getPlatform():

function getPlatform($user_agent) {
$plataformas = array(
'Windows 8' => 'Windows NT 6.2+',
'Windows 7' => 'Windows NT 6.1+',
'Windows Vista' => 'Windows NT 6.0+',
'Windows XP' => 'Windows NT 5.1+',
'Windows 2003' => 'Windows NT 5.2+',
'Windows' => 'Windows otros',
'iPhone' => 'iPhone',
'iPad' => 'iPad',
'Mac OS X' => '(Mac OS X+)|(CFNetwork+)',
'Mac otros' => 'Macintosh',
'Android' => 'Android',
'BlackBerry' => 'BlackBerry',
'Linux' => 'Linux',
);
foreach($plataformas as $plataforma=>$pattern){
if (eregi($pattern, $user_agent))
return $plataforma;
}
return 'Otras';
}

La función nos devolverá una cadena de texto con el nombre del sistema operativo. En caso de que no lo reconozca devolverá “Otras”.

A medida que van surgiendo nuevas plataformas o nuevas versiones, podemos ir ampliando la función getPlatform() para así reconocerlos y que la función no nos devuelva el valor “Otras”.

Obtener navegador del visitante con PHP

2013-08-10T09:43:00.000+02:00

A la hora de realizar estadísticas de uso de una Web, es interesante obtener el navegador empleado por cada usuario, así podremos conocer los hábitos de los visitas a nuestra Web y poder tomar decisiones en función de ello.

Para obtener el navegador empleado en una visita, en primer lugar, debemos obtener el USER_AGENT. El USER_AGENT nos dará toda la información necesaria sobre el navegador y sistema operativo de la visita.

En el artículo Obtener sistema operativo del visitante con PHP explico cómo obtener el sistema operativo. Para recoger el USER_AGENT de la visita lo haremos:

$user_agent = $_SERVER['HTTP_USER_AGENT'];

Una vez obtenido el USER_AGENT únicamente tenemos que pasar este valor a nuestra función getBrowser():

function getBrowser($user_agent) {
$navegadores = array(
'Opera' => 'Opera',
'Chrome' => 'Chrome',
'Safari' => 'Safari',
'Mozilla Firefox'=> '(Firebird)|(Firefox)',
'Galeon' => 'Galeon',
'Mozilla'=>'Gecko',
'MyIE'=>'MyIE',
'Lynx' => 'Lynx',
'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
'Konqueror'=>'Konqueror',
'IExplorer 10' => '(MSIE 10\.[0-9]+)',
'IExplorer 9' => '(MSIE 9\.[0-9]+)',
'IExplorer 8' => '(MSIE 8\.[0-9]+)',
'IExplorer 7' => '(MSIE 7\.[0-9]+)',
'IExplorer 6' => '(MSIE 6\.[0-9]+)',
'IExplorer 5' => '(MSIE 5\.[0-9]+)',
'IExplorer 4' => '(MSIE 4\.[0-9]+)',
);
foreach($navegadores as $navegador=>$pattern){
if (eregi($pattern, $user_agent))
return $navegador;
}
return 'Otros';
}

La función nos devolverá una cadena de texto con el nombre del navegador. En caso de que no lo reconozca devolverá “Otros”.

A medida que van surgiendo nuevos navegadores o nuevas versiones de los navegadores, podemos ir ampliando la función getBrowser() para así reconocerlos y que la función no nos devuelva el valor “Otros”.

Capturar imagen y subir imagen con PhoneGap

2013-08-06T19:10:00.000+02:00

Para capturar una imagen realizada desde la cámara de un dispositivo móvil y posteriormente subirla a un servidor Web mediante PhoneGap, deberemos realizar dos pasos: primero realizar la captura de la imagen y en segundo lugar subir el archivo.

Para hacer la captura y el envío del archivo al servidor Web emplearemos las funciones nativas de PhoneGap, posteriormente necesitaremos guardar la imagen en el servidor y para ello se empleará cualquier lenguaje de programación del lado del servidor, en este ejemplo se empleara PHP.

En primer lugar la captura y subida de la imagen. El código HTML y Javascript sería el siguiente, a continuación la explicación:

<html>
<head>
<title>Subida de fotos</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Esperar a que cargue PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap listo
function onDeviceReady() {
// lo que tengas que hacer
}

function getImage() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('error al capturar imagen');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}

function uploadPhoto(imageURI) {
var options = new FileUploadOptions(),
params = new Object ;
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";

params.value1 = "test";
params.value2 = "param";

options.params = params;
options.chunkedMode = false;

var ft = new FileTransfer();
ft.upload(imageURI,"http://miservidor.com/services/upload.php",
function(){
console.log('imagen subida correctamente');
},
function(err){
console.log('error al subir la imagen, error code: ' + err.code);
},
options);
}
</script>
</head>
<body>
<button onclick="getImage();" id=”subir-foto”>Subir foto</button>
</body>
</html>

Lo primero será cargar PhoneGap y esperar a que esté listo para usar sus funciones. Crearemos la función getImage() que será la encarda de capturar la imagen. En caso de que la captura se realice con éxito llamará a la función uploadPhoto() que será la encargada de subirla al servidor (si se produce algún error al realizar la captura se mostrará una alerta indicándolo)

La función uploadPhoto() realizará la subida del archivo, para ello emplearemos el File Transfer API de PhoneGap. Lo primero será crear los objetos options, params y ft necesarios. FileKey será empleado por el fichero PHP para obtener la imagen; fileName es el nombre del archivo creado al capturar la imagen desde la cámara, al cual le quitaremos la ruta completa para quedarnos únicamente con el nombre; mimeType es empleado para indicar al servidor que tipo de archivo estamos enviando. En el objeto params podemos incluir cualquier otro tipo de variable que necesitemos en nuestra aplicación y posteriormente añadimos params al objeto options.

A continuación se crea el objeto ft FileTransfer y llamamos a su método upload para la realizar la subida del archivo indicando el fichero; la ruta del fichero PHP encargado de guardarlo en el servidor remoto; callback para cuando falla la subida; callback para cuando la subida se ejecuta correctamente; y las opciones definidas previamente

La captura y el envío de la imagen se realizar al pulsar el botón HTML con id “subir foto” que llamará a la función getImage().

Por último, el fichero upload.php alojado en tu servidor y que guarda la foto en el servidor sería:

<?php
$ruta = "images/";
$nombre_imagen = "unnombre.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], $ruta.$nombre_imagen);
?>

La realización de este tutorial está realizada en base al artículo obtenido de http://zacvineyard.com/blog/2011/03/upload-a-file-to-a-remote-server-with-phonegap

Servicio Web RESTful con Php

2013-08-05T18:32:00.002+02:00

La creación de Servicios Web esta hoy en día en un total auge debido a la proliferación de las aplicaciones para dispositivos móviles. Los servicios web nos permiten distribuir los datos entre distintos tipos de aplicaciones, páginas Web, etc. Estos servicios Web generarán una respuesta a una petición realizado por un cliente del servicio, respuesta que generalmente será en formato JSON o XML

El ejemplo que os muestro a continuación está basado en el artículo incluido en http://www.9lessons.info/2012/05/create-restful-services-api-in-php.html el cual generará una respuesta JSON. El código principal de la API RESTful será la siguiente:

<?php
require_once("Rest.inc.php");

class API extends REST {
public $data = "";
const DB_SERVER = "localhost";
const DB_USER = "Database_Username";
const DB_PASSWORD = "Database_Password";
const DB = "Database_Name";
private $db = NULL;
public function __construct()
{
    parent::__construct();// Init parent contructor
    $this->dbConnect();// Initiate Database connection
}

//Database connection
private function dbConnect()
{     $this->db=mysql_connect(self::DB_SERVER,self::DB_USER,self::DB_PASSWORD);
    if($this->db)mysql_select_db(self::DB,$this->db);
}

//Public method for access api.
//This method dynmically call the method based on the query string
public function processApi()
{
    $func = strtolower(trim(str_replace("/","",$_REQUEST['rquest'])));
    if((int)method_exists($this,$func) > 0)
      $this->$func();
    else
      $this->response('',404);
    // If the method not exist with in this class, response would be "Page not found".
}

private function login()
{
    ..............
}

private function users()
{
    ..............
}

private function deleteUser()
{
    .............
}

//Encode array into JSON
private function json($data)
{
    if(is_array($data)){
return json_encode($data);
    }
}
}

// Initiiate Library
$api = new API;
$api->processApi();
?>

En el API se establecen los valores de conexión con la base de datos MySql y las funciones necesarias para realizar dicha conexión. A continuación crearemos tres métodos: login(), que realizará la función de autentificación de un usuario en la base de datos; users(), que nos devolverá una lista de los usuarios que tengamos la tabla de base de datos; y el método deleteUser(), el cual borrará un usuario.

Login: será una petición del tipo POST. En la petición se enviarán dos parámetros, “email” y “pwd”. La función lo primero que hace es comprobar el tipo de petición y que sea del tipo POST, en caso contrario enviara una respuesta de error 406 (en el fichero Rest.inc.php se pueden consultar las posibles respuestas). Una vez recibida la petición se verificarán los parámetros enviados, se consultará a la base de datos y en caso de que los datos sean correctos se devolverá la respuesta JSON con los datos del usuario y las correspondientes cabeceras de que la consulta se realizo correctamente (200).

private function login()
{
// Cross validation if the request method is POST else it will return "Not Acceptable" status
if($this->get_request_method() != "POST")
{
     $this->response('',406);
}

$email = $this->_request['email'];
$password = $this->_request['pwd'];

// Input validations
if(!empty($email) and !empty($password))
{
    if(filter_var($email, FILTER_VALIDATE_EMAIL)){
      $sql = mysql_query("SELECT user_id, user_fullname, user_email FROM users WHERE user_email = '$email' AND user_password = '".md5($password)."' LIMIT 1", $this->db);
      if(mysql_num_rows($sql) > 0){
        $result = mysql_fetch_array($sql,MYSQL_ASSOC);
        // If success everythig is good send header as "OK" and user details
        $this->response($this->json($result), 200);
      }
      $this->response('', 204);
      // If no records "No Content" status
    }
   }
   // If invalid inputs "Bad Request" status message and reason
   $error = array('status' => "Failed", "msg" => "Invalid Email address or Password");
   $this->response($this->json($error), 400);
}

Users: será una petición del tipo GET. Al igual que en login(), lo primero que haremos será comprobar el tipo de petición. Si la petición es correcta se realizará la consulta SQL y se devolverá la lista de usuarios en formato JSON.

private function users()
{
// Cross validation if the request method is GET else it will return "Not Acceptable" status
if($this->get_request_method() != "GET")
{
    $this->response('',406);
}
$sql = mysql_query("SELECT user_id, user_fullname, user_email FROM users WHERE user_status = 1", $this->db);
if(mysql_num_rows($sql) > 0)
{
    $result = array();
while($rlt = mysql_fetch_array($sql,MYSQL_ASSOC))
    {
      $result[] = $rlt;
    }
    // If success everythig is good send header as "OK" and return list of users in JSON format
    $this->response($this->json($result), 200);
}
$this->response('',204); // If no records "No Content" status
}

DeleteUser: como siempre lo primero es verificar el tipo de petición, posteriormente recibimos el parámetro “id” que será el usuario a borrar de nuestra tabla. Si todo es correcto ejecutamos la consulta SQL y lanzamos la correspondiente respuesta JSON confirmando la acción.

private function deleteUser()
{
if($this->get_request_method() != "DELETE"){
    $this->response('',406);
}
$id = (int)$this->_request['id'];
if($id > 0)
{
    mysql_query("DELETE FROM users WHERE user_id = $id");
    $success = array('status' => "Success", "msg" => "Successfully one record deleted.");
    $this->response($this->json($success),200);
}
else
{
    $this->response('',204); // If no records "No Content" status
}
}

Hasta aquí hemos visto como desarrollar las funciones básicas para desarrollar nuestra API RESTful. Para probar su funcionamiento podemos utilizar una extensión para Chrome: AdvancedREST client Application

Adicionalmente, podemos crear un fichero .htaccess para generar URLs amigables y que las llamadas a los métodos de nuestro servicio sean mas sencillas. El fichero .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?rquest=$1 [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
</IfModule>

Y para hacer las llamadas a los métodos del servicio seria:

http://mi_dominio.com/ruta_del_servicio/login

http://mi_dominio.com/ruta_del_servicio/users

http://mi_dominio.com/ruta_del_servicio/DeleteUser

Puedes descargar el ejemplo completo desde aquí.

Cerrar aplicación PhoneGap

2013-08-02T16:58:00.000+02:00

Una de las acciones básicas e imprescindibles en el desarrollo de una aplicación para dispositivos móviles es la de cerrar la propia aplicación. En PhoneGap disponemos del método exitApp() para realizar esta acción.

A continuación os dejo un ejemplo completo de un botón que realiza la función de cerrar la aplicación:

<a onclick="showConfirm(); return false;" href="#" >salir</a>

function showConfirm() {

navigator.notification.confirm(

'¿Seguro que quieres cerrar la aplicación?', // mensaje a mostrar

exitFromApp, // callback a invocar cuando el botón es presionado

'Salir', // titulo de la ventana

'Cancelar,Si' // etiquetas de los botones

);

}

function exitFromApp(buttonIndex) {

if (buttonIndex==2){ navigator.app.exitApp();}

}

</script>

El botón será un enlace que al hacer click en él llamara a la función showConfirm() (en el evento onclick también incluiremos un return false; para evitar la acción por defecto de los enlaces y que no se produzca un refresco de la página).

La función showConfirm() desplegará una ventana de notificación con dos botones y que al presionar alguno de ellos se llamará a la función exitFromApp(), la cual recibirá el parámetro buttonIndex que nos indicará cuál de los botones de la ventana de notificación fue pulsado. En el caso de que el usuario presionase el botón "Si", identificado por el índice 2, se ejecutará la función nativa de PhoneGap navigator.app.exitApp() que cerrará nuestra aplicación.

Variables en PhoneGap

2013-08-02T16:50:00.000+02:00

El uso de variables en PhoneGap es tan necesario como en cualquier otro tipo de aplicación. Para crear y asignar el valor a una variable lo haremos mediante el método setItem y para recuperar el valor de una variable con getItem.

A continuación un ejemplo en el que guardamos el valor "mi_valor" en la variable "mi_variable":

window.localStorage.setItem("mi_variable", "mi_valor");

var mi_var_js = window.localStorage.getItem("mi_variable");

</script>

Personalizar icono PhoneGap app

2013-08-02T16:45:00.001+02:00

Para personalizar el icono de tu aplicación desarrollada con PhoneGap necesitarás el mismo icono en cuatro tamaños. Esto es debido a las diferentes resoluciones de pantalla que se pueden encontrar en los distintos dispositivos móviles.

En concreto serán necesarios iconos para resoluciones bajas (36x36 píxeles), resolución media (48x48 píxeles), resolución alta (72x72 píxeles) y resolución extra alta (96x96 píxeles). Los iconos deberán ser imágenes en formato PNG y la ubicación dentro de tu proyecto PhoneGap la siguiente:

Miapp/res/drawable-ldpi/icon.png – para baja resolución (ldpi)
Miapp/res/drawable-mdpi/icon.png – para resolución media (mdpi)
Miapp/res/drawable-hdpi/icon.png – para alta resolución (hdpi)
Miapp/res/drawable-xhdpi/icon.png – para extra alta resolución (xhdpi)

En estas ubicaciones podrás encontrar los archivos icon.png que se generan por defecto si has creado tu proyecto/app mediante el asistente de PhoneGap. Simplemente tendrás que reemplazarlos o bien copiarlos si es que no existen.

Tabla caracteres Unicode

2013-06-12T10:06:00.000+02:00

La tabla definitiva con todos los caracteres Unicode. Un importante recurso para todos los programadores Web. Además de todos los caracteres de los distintos alfabetos, en la última versión de Unicode encontramos todo tipo de símbolos.

En la última versión de Unicode se definen más de 100.000 caracteres, entre los que podemos encontrar símbolos meteorológicos, reproductores de audio y de vídeo, todo tipo de flechas y un largo etcétera. Todos los caracteres los podemos encontrar, perfectamente ordenados y clasificados en unicode-table.com

Chuleta Drupal7

2013-03-22T11:57:00.001+01:00

Siguiendo la colección de chuletas Web, en esta ocasión recogemos una importante ayuda para los desarrolladores del gestor de contenidos Drupal en su versión 7.

Para descargar la chuleta en formato PDF has click aquí

chuleta Drupal 7

Chuleta Wordpress

2013-02-25T10:09:00.000+01:00

Otra chuleta imprescindible para los que trabajen con Wordpress.

Para descargar la plantilla en formato pdf haz click aquí.

Cortar palabras con puntos suspensivos y CSS

2013-01-10T15:23:00.002+01:00

Cuando tenemos un texto demasiado largo para que entre en una sola linea, podemos cortarlo y añadirle unos puntos suspensivos de forma sencilla mediante CSS. Para ello debemos definir unas cuantas propiedades para el elemento contenedor:

.contenedor {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 120px;
}

Una serie de consideraciones a tener en cuenta: todas las propiedades definidas anteriormente son necesarias y este truco no sirve para textos con multilínea.

Igualar la altura de unas capas con jQuery

2013-01-10T12:58:00.000+01:00

Supongamos que tenemos varias capas en nuestras Web y que queremos que todas tengan la misma altura, pero sin definir una altura fija. Lo que haremos es igualar la altura de las capas más pequeñas a la altura de la capa mas alta:

var maxHeight = 0;

$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Comprobar si un elemento existe con jQuery y length

2013-01-10T12:34:00.000+01:00

Comprobar si un elemento existe es muy sencillo mediante jQuery y la propiedad length. Sea nuestro elemento con id="miElemento", para verificar si existe haríamos:

if ($("#miElemento").length > 0){
//el elemento existe
}

La propiedad length nos devolverá el número de elementos que hay en el objeto jQuery. Si por ejemplo, tenemos 3 elementos con la clase miClase podríamos saber el número de elementos con la clase miClase de la siguiente forma:

Math.random() en Javascript

2013-01-09T09:55:00.000+01:00

La función Math.random() genera números aleatorios en Javascript, pero hay que tener en cuenta una serie de consideraciones:

Math.random() genera numero aleatorios entre 0 y 1, por lo que al ejecutar la función nos podría devolver un resultado como 0.5632785542115765.

Si necesitásemos obtener un número aleatorio entre 0 y 10 o entre 0 y 100 lo haríamos de la siguiente forma:

//random entre 0 y 10
var num = Math.floor((Math.random()*10)+1);

//random entre 0 y 100
var num = Math.floor((Math.random()*100)+1);

Selectores CSS3 ^=, $= y *=

2012-11-27T13:15:00.002+01:00

En la nueva definición de las hojas de estilo en cascada CSS3 se agregan nuevos selectores, así como nuevas pseudo-clases y pseudo-elementos. En cuanto a selectores, se añaden 3 nuevos selectores de atributos: ^=, $= y *=.

elemento[atributo^="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
elemento[atributo*="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

Algunos ejemplos:

/*selecciona todos los enlaces que tienen el atributo class y comienza por icon*/
a[class^="icon"]{...}

/*selecciona todos los enlaces que tienen el atributo class y acaba en icon*/
a[class$="icon"]{...}

/*selecciona todos los enlaces que tienen el atributo class y contiene la palabra icon*/
a[class*="icon"]{...}

/*selecciona todos los elementos que tienen el atributo class y comienza por icon*/
[class^="icon"]{...}

Rotar elementos con transform y efectos con transition y CSS3

2012-10-24T17:45:00.001+02:00

Ahora con CSS3 podemos fácilmente rotar elementos, tanto imágenes, divs o cualquier otro, tarea que antes resultaba un poco pesada ya que se tenia que recurrir a javascript u otras artimañas. Ahora con CSS3 únicamente tenemos que incluir una linea de código en nuestros estilos:

#midiv{transform: rotate(60deg)}

Aplicamos una rotación de 60 grados al elemento con id midiv.

Como los distintos navegadores no han acabado de soportar CSS3 en todas sus características y cada uno lo hace a su manera, para que el efecto de rotación sea visible en todos aquellos que soporten CSS3 deberemos incluir la especificación para cada uno:

#midiv{
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg)
}

El efecto de rotación puede ser combinado con el efecto transform de CSS3. Su sintaxis es la siguiente:

transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo]

Por lo que aplicado a nuestro ejemplo:

transition:all 0.8s ease-in;

Un ejemplo completo de los dos efectos convinados sería:

#midiv{
width: 150px;
height:150px;
background:#ccc;
transition:all 0.8s ease-in;
-webkit-transition:all 0.8s ease-in;
-moz-transition:all 0.8s ease-in;
-o-transition:all 0.8s ease-in;
}
#midiv:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Pasa el ratón por encima del cuadro gris para ver como rota con el efecto transition: