Acceder a las propiedades de un IFRAME mediante Javascript

Si necesitamos acceder a las propiedades de un iframe que esté incorporado en nuestra página lo podemos hacer de una forma muy sencilla con la siguiente función:

function getIframe(id){
  var myframe = document.getElementById(id);
  var content = (myframe.contentWindow || myframe.contentDocument);
  return content.document;
}

A esta función le pasamos el id del iframe y obtendremos un objeto que podremos manejar y cambiar por ejemplo el color de fondo. Para ponerle el fondo de color gris lo haríamos así:

  var myframe = getIframe('myframe');
  myframe.body.backgroundColor = '#CCC';
}

La propiedad contentDocument es soportada por los principales navegadores excepto Internet Explorer, que solamente la soporta a partir de la versión 8 si está especificado !DOCTYPE. Para las versiones anteriores de Internet Explorer hay que usar contentWindow.

Acortar urls con goo.gl desde PHP usando la API de Google

Acortar una url es algo bastante común hoy en día, sobretodo en las redes sociales como Twitter donde el número de caracteres es limitado.

Si lo queremos de hacer desde nuestra sitio web de PHP tenemos una forma muy sencilla con la API de Google.

Los pasos a dar serían los siguientes:

1. Lo primero que necesitaremos será darnos de alta una cuenta de Google Developer, que lo puedes hacer fácilmente si tienes una cuenta de Google.

2. Deberemos ir la la consola del desarrollador y dar de alta un nuevo proyecto. Le pondremos el nombre que deseemos y una vez creado iremos en el menú de la izquierda al ítem APIs & Auth (APIs y autenticación en español). Seleccionando APIs en el submenú veremos toda la lista de servicios que nos ofrece Google. Buscaremos URL Shortener API y lo activaremos desde la parte superior de la página. Hecho esto elegiremos en el submenú Credentials (Credenciales en español) y haremos clic en Crear clave nueva. Nos aparecerá una ventana emergente y seleccionaremos Clave de servidor. Ahí nos pedirá que pongamos una IP si queremos limitar desde donde se puede llamar al servicio. Con todo esto realizado ya nos dará la clave de la api que necesitaremos posteriormente para acortar la url.

3. El último paso será coger el código que os dejo a continuación y cambiar únicamente la clave de la api por la vuestra y la url por la que necesitéis.

Código PHP

Lo primero que veremos será la clase que implementa las funciones de acortar y expandir:

class GoogleShortUrl{
 
 // Constructor
 function __construct($key, $apiURL = 'https://www.googleapis.com/urlshortener/v1/url'){
  $this->apiURL = $apiURL.'?key='.$key;
 }
 
 // Acortar la URL
 function shorten($url) {
  $response = $this->send($url);
  return isset($response['id']) ? $response['id'] : false;
 }
 
 // Expandir la URL
 function expand($url) {
  $response = $this->send($url, false);
  return isset($response['longUrl']) ? $response['longUrl'] : false;
 }
 
 // Enviar información a Google
 function send($url, $shorten = true){

  // Inicializamos curl y definimos el objeto
  $curlObj = curl_init();
  if ($shorten){
   curl_setopt($curlObj, CURLOPT_URL, $this->apiURL);
   curl_setopt($curlObj, CURLOPT_POST, 1);
   curl_setopt($curlObj, CURLOPT_POSTFIELDS, json_encode(array("longUrl"=>$url)));
   curl_setopt($curlObj, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
  } else {
   curl_setopt($curlObj, CURLOPT_URL, $this->apiURL.'&shortUrl='.$url);
  }
  curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);
  curl_setopt($curlObj, CURLOPT_HEADER, 0);
  
  // Ejecutamos el post
  $response = curl_exec($curlObj);

  // Cerramos la conexión
  curl_close($curlObj);
  
  // Devolvemos la respuesta
  return json_decode($response, true);
 }  
}

Ahora solamente nos queda hacer la llamada a la clase anterior y acortar o expandir una url:

// Creamos una instancia de la clase
$key = 'miclave';
$shorter = new GoogleShortUrl($key);

// Acortamos la URL
$shortname = $shorter->shorten("http://softontherocks.blogspot.com");
echo $shortname; // devuelve http://goo.gl/VF1HJ

// Expandimos la URL
$longname = $shorter->expand($shortname);
echo $longname; // devuelve http://softontherocks.blogspot.com

Espero que os sirva en vuestros proyectos.

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

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

 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
 

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

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

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