Hacer drag and drop con jQuery

Una de las primeras cosas que aprendí a hacer cuando me inicié con jQuery fue hacer un ejercicio de drag and drop.

Os dejo los pasos que necesitamos para que funcione:

1. Incluir las librerías js de jQuery

?

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

2. Crear los divs que vamos a cambiar de posición

?

<div id="sortable">  <div class="drag">Item 1</div>  <div class="drag">Item 2</div>  <div class="drag">Item 3</div>  <div class="drag">Item 4</div>  <div class="drag">Item 5</div> </div>

3. Poner el código para que los divs puedan ejecutar el movimiento

?

<script>  $(function() {   $("#sortable").sortable({ // id del elemento padre sobre el que hacer drag and drop    revert: true, // activar pequeña animación al soltar    opacity: 0.5 // mostrar una sombra del elemento que estamos arrastrando   });  }); </script>

4. Añadir CSS para que los divs tengan mejor aspecto

?

<style>  .drag {   width: 300px;   cursor: move;   padding: 5px;   border: 1px #CCC solid;   margin: 5px;   border-radius: 5px;   background-color: #CCC;  } </style>

Listar los archivos de un directorio ordenados alfabéticamente con PHP

Hace pocos días tuve que crear una pequeña página en la que leía un directorio y mostraba los ficheros que contenía, usando PHP.

La primera función que os dejo utiliza el readdir() y me listó bien el contenido del directorio en mi servidor de desarrollo, sin embargo cuando lo subí al hosting no me mostró los archivos ordenados alfabéticamente.

?

function getFiles($dir){  $files = array();  // Abrimos el directorio  if ($dh = opendir($dir)){   // Recorremos los ficheros del directorio   while (($file = readdir($dh))!==false){    // Comprobamos que sea un fichero y no un subdirectorio    if (is_file($dir.'/'.$file)){     $files[] = $file;    }   }   closedir($dh);  }  return $files; }

Para mostrarlos de forma ordenada tuve que cambiar la función y usar scandir() que además es más simple ya que directamente nos devuelve un array con los archivos encontrados, ordenados ascendente o descendentemente, según queramos.

?

function getFiles($dir){  $files = array();  // Leemos el directorio ordenado ascendentemente  $tmp = scandir($dir);  // Recorremos los ficheros del directorio  foreach ($tmp as $file){   // Comprobamos que sea un fichero y no un subdirectorio   if (is_file($dir.'/'.$file)){    $files[] = $file;   }  }  return $files; }

Obtener el tamaño de un fichero y mostrarlo en un formato comprensible mediante PHP

En PHP tenemos la posibilidad de obtener el tamaño de un fichero mediante la función filesize. Esta función nos devuelve un entero con el número de bytes del archivo.

Este tamaño, en el caso de que el fichero sea grande, es posible que lo queramos representar en kilobytes, megabytes..., o simplemente dejar que la función decida la magnitud más adecuada.

En este caso hemos realizado una función que recoge esta posibilidad:

?

function convertFileSize($file, $size=null, $decimals=2, $dec_sep='.', $thousands_sep=','){  if (!is_file($file)){   return "El fichero no existe";  }  $bytes = filesize($file);  $sizes = 'BKMGTP';  if (isset($size)){   $factor = strpos($sizes, $size[0]);   if ($factor===false){    return "El tamaño debe ser B, K, M, G, T o P";   }  } else {   $factor = floor((strlen($bytes) - 1) / 3);   $size = $sizes[$factor];  }  return number_format($bytes / pow(1024, $factor), $decimals, $dec_sep, $thousands_sep).' '.$size; }

Los parámetros son:

$file: ruta completa del fichero

$size: magnitud en la que queremos obtener el resultado. Si lo dejamos a null hará el cálculo la propia función

$decimals: número de decimales que queremos que nos muestre. Por defecto nos mostrará 2.

$dec_sep: separador decimal. Por defecto coge el punto que es el que se usa en inglés.

$thousand_sep: separador de miles. Por defecto coge la coma que es el que se usa en inglés.

Ordenar array UTF-8 con Javascript

Ordenar arrays con Javascript es una función muy habitual que ejecutamos los programadores web. Sin embargo, existen ocasiones en que lo que queremos ordenar lleva tildes, eñes o cualquier grafía de otro alfabeto.

Cuando ocurre esto, el método habitual de ordenación sort() no sirve ya que nos los ordena en último lugar. Veamos un ejemplo:

?

var myarray = ['Álex', 'Juan', 'José', 'Antonio', 'Carlos']; myarray.sort(); // Queda ordenado como Antonio, Carlos, José, Juan, Álex

Para este tipo de caracteres necesitamos una función específica para ordenar, que podría convertirse en nuestro método sort() si nuestro alfabeto habitual lleva caracteres Unicode. Para realizar la ordenación UTF-8 tenemos que hacer lo siguiente:

?

var myarray = ['Álex', 'Juan', 'José', 'Antonio', 'Carlos']; myarray.sort(function(a,b){return a.localeCompare(b);}); // Queda ordenado como Álex, Antonio, Carlos, José, Juan

Enviar tweets desde PHP

Hace pocos días me vi en la necesidad de buscar la forma de enviar tweets desde PHP. Empecé a buscar y encontré varias clases que implementaban lo que necesitaba, pero finalmente me decanté por una llamada Twitter for PHP.

Se trata de una pequeña librería de PHP con funciones muy interesantes para manejar una cuenta de Twitter y además lleva soporte para el protocolo OAuth. Si buscáis información en google encontraréis mucha información sobre este protocolo pero os dejo este enlace que lo explica bastante bien. La librería Twitter for PHP requiere como mínimo la versión PHP 5.0 y tener instalada la librería cURL.

Primeros pasos

Para utilizar esta librería lo primero que tendremos que hacer es descargarla desde su repositorio en GitHub. En el repositorio encontraremos ejemplos de lo que veremos en este mismo post.

A continuación deberemos dar de alta una cuenta de Twitter, si no la tenemos, e ir a http://dev.twitter.com/apps para registrar una aplicación. Una vez creada tienes que ir a la pestaña Key and Access Tokens y darle clic en la parte inferior de la ventana a Create my access token. Con esto ya tendremos los cuatro parámetros que necesitamos: consumer key, consumer secret, access token y access token secret.

Con todos estos datos ya estamos preparados para poder crear un objeto usando la librería:

?

$twitter = new Twitter($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);

Enviar

El envío de un tweet lo realizaremos con el método post(). El mensaje debe ir codificado en UTF-8 y además le podremos añadir una imagen al tweet:

?

$twitter->send('Mi primer tweet'); $twitter->send('Mi primer tweet con imagen', $imageFile);

Ejemplo completo

Veamos ahora un ejemplo completo para enviar un tweet:

?

// Incluimos la librería descargada require_once 'src/twitter.class.php';   // Definimos cuatro constantes con nuestros datos de Twitter define(CONSUMER_KEY, 'myconsumerkey'); define(CONSUMER_ACCESS, 'myconsumeraccess'); define(ACCESS_TOKEN, 'myaccesstoken'); define(ACCESS_TOKEN_SECRET, 'myaccesstokensecret');   // Creamos el objeto $twitter = new Twitter(CONSUMER_KEY, CONSUMER_ACCESS, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);   // Enviamos manejando el posible error try {  $tweet = $twitter->send('Mi primer tweet'); } catch (TwitterException $e){  echo $e->getMessage()); }

Obtener los links que vienen en el contenido de una URL usando DOMDocument de PHP

En un post anterior vimos la forma de obtener un array con los enlaces que nos venían en el contenido de una URL. Este contenido lo obteníamos mediante una función que utilizaba la librería cURL (Client URL) de PHP.

En esta ocasión vamos a simplificar el método ya que utilizaremos para ello la clase DOMDocument.

La función que nos va a descargar y leer las etiquetas de tipo enlace será esta:

?

function getUrls($url){  $doc = new DOMDocument;  $doc->preserveWhiteSpace = false;     // cargamos la url  @$doc->loadHTMLFile($url);     // buscamos todos los tags del tipo < a >  $links = $doc->getElementsByTagName("a");     // recorremos cada uno de los tags encontrados  foreach ($links as $link){   // obtenemos la parte href de la etiqueta   $href = $link->getAttribute("href");       if (strlen($href)>=4 && substr($href,0,4)=="http"){    // url entera    $urls[] = $href;   } else if (strlen($href)>0 && substr($href, 0, 1)=="/"){    // url empieza por / le añadimos el dominio por delante    $urls[] = $url.$href;   }else{    // arhivo    $urls[] = $url.'/'.$href;   }  }    // eliminamos duplicados  $urls = array_unique($urls);     // ordenamos alfabéticamente  sort($urls);     return $urls; }

La llamada se realizará de esta forma tan sencilla, en la que además mostraremos el resultado del array devuelto por la anterior función:

?

// especificamos la url $url = "http://softontherocks.blogspot.com.es";   // obtenemos las url $urls = getUrls($url);   // mostramos el resultado echo nl2br(implode($urls, "\n"));