Bufa Webmaster

jmpress.js – webs con lienzo infinito y transiciones 3D

Jorge Maiden — Thu, 10 May 2012 06:14:28 +0000

jmpress.js es un plugin de jQuery (que se basa en impress.js) creado por Bartek Szopka para construir un sitio web con un “lienzo infinito”, donde su mayor atractivo reside en las transiciones CSS3 al navegar con los menus o teclado e ir a las diferentes secciones de la página web. Por ahora solo Chrome, Safari y Firefox 10 son compatibles.

Este plugin es ideal para hacer presentaciones (al estilo powerpoint) con interesantes efectos en 3D.

http://shama.github.com/jmpress.js/

Facebook SDK php: detectar idioma

Jorge Maiden — Mon, 07 May 2012 10:19:53 +0000

Si estais desarrollando una app de facebook y necesitais mostrar un contenido dependiendo del idioma del usuario de facebook, a continuación un ejemplo básico utilizando la API php de facebook (SDK v.3.1.1).

Lo primero que necesitaremos, es la API oficial de Facebook, que podemos descargar desde GitHub. Descomprimimos el archivo y subimos a nuestro servidor los archivos de la carpeta “src”…

Y por último ya en el archivo php que utilizamos en nuestra app (en este ejemplo detectamos si el usuario es de España):

require_once('src/facebook.php');

// Iniciamos nuestra APP
$facebook = new Facebook(array(
'appId' => 'EL_ID_DE_MI_APP',
'secret' => 'EL_CODIGO_SECRETO_DE_MI_APP',
'cookie' => true,
));

// Código ISO del usuario
$locale = $signed_request['user']['locale'];

// Detecto país (si es España)
if(stristr($locale, 'es')) {
?>
Bienvenido...

}else{
?>
Welcome...

}
?>

Detectar móvil con php

Jorge Maiden — Thu, 03 May 2012 08:30:32 +0000

Código php para detectar si el usuario entra en nuestra web lo hace a través de un dispositivo móvil u otro dispositivo.

Para detectar el navegador usamos la variable de php HTTP_USER_AGENT:

// Si el NAVEGADOR WEB del cliente es un MÓVIL
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){
?>
HOLA, ENTRAS DESDE UN MÓVIL...

}else{
?>
HOLA, ENTRAS DESDE OTRO DISPOSITIVO...

}
?>

Por ejemplo, podeis este código para cargar diferentes estilos CSS si se accede desde un dispositivo móvil u otro, etc…

WordPress: cambiar calidad compresión imagenes JPG

Jorge Maiden — Thu, 26 Apr 2012 10:55:59 +0000

Por defecto WordPress comprime las imágenes JPG cuando las insertamos en nuestra librería multimedia o en nuestros post (para reducir el peso de las imágenes originales en nuestro servidor).

Pero si os interesa cambiar la calidad de esta compresión (ya sea para subir o bajar) solo tenéis que añadir el siguiente código php en el archivo functions.php de vuestro theme:

add_filter('jpeg_quality', function($arg){return 100;});

* Con ese código la calidad de las imagenes que subamos sera máxima, con una compresión de 100%.

Ocultar texto en CSS

Jorge Maiden — Tue, 17 Apr 2012 12:20:02 +0000

Hay varios métodos o técnicas para ocultar textos utilizando css.

A continuación 3 ejemplos de los métodos que más he utilizado.

1. display:none

Es el más sencillo pero también más agresivo para los buscadores, ya que detectan a primera vista que estas ocultando este elemento (no recomendable desde el punto de vista SEO).

.ocultatexto {
display:none;
}

2. text-indent:-666em

Tabulamos el elemento a -666em

.ocultatexto {
text-indent:-666em;
overflow:hidden;
}

3. text-indent: 100%; white-space: nowrap;

Tabulamos el elemento al 100% sin añadir saltos de línea en el texto para que el contenido si pueda salir de contenedor

.ocultatexto {
text-indent: 100%;
white-space: nowrap;
overflow:hidden;
}

WordPress: ordenar posts por custom field

Jorge Maiden — Thu, 05 Apr 2012 11:05:25 +0000

Ordenar los post de WordPress por el valor de un determinado campo personalizado (custom field) es muy sencillo utilizando la función query_posts() de WordPress.

Solo tenems que añadirle los parámetros: meta_key (con el valor del nombre que hemos puesto al custom field) y orderby (con el valor “meta_key”).

Un ejemplo: si tenemos un campo personalizado que se llama “EDAD” y queremos ordenar los post por este valor, el loop de WordPress sería así:

query_posts('meta_key=EDAD&orderby=meta_value'); ?>
while (have_posts()) : the_post(); ?>
...
endwhile; ?>

WordPress: excluir ID post del query

Jorge Maiden — Sun, 01 Apr 2012 19:24:29 +0000

A continuación un método para excluir de del query de WordPress uno o varios post o entradas utilizando post__not_in.

Para ello solo nos hace falta averiguar el ID de los post que queremos excluir y a continuación insertar los ID en la función query_posts antes del loop de esta forma:

query_posts(array('post__not_in' => array(1798,145,334))); ?>
while (have_posts()) : the_post(); ?>
....
endwhile; ?>

* En este ejemplo excluimos del loop los post con los ID: 1798,145 y 334. Editarlos y insertar hay el o los post que os interesen excluir.

PHP: convertir espacios en blanco en %20

Jorge Maiden — Mon, 26 Mar 2012 12:20:36 +0000

2 formas para convertir los espacios en blanco en %20 y viceversa en PHP.

La primera forma es utilizando la función str_replace para reemplazar esas cadenas.

El segundo método es utilizando la función urlencode, que se encarga de codificar una cadena para ser usada como la parte de consulta de una URL.

Elegid el método que más os guste.

Convertir espacios en blanco en %20

$cadena = str_replace(" ","%20",$mitexto);

$cadena = urlencode($mitexto);

Convertir %20 en espacios en blanco

$cadena = str_replace("%20"," ",$mitexto);

$cadena = urldecode($mitexto);

WordPress: eliminar custom field o campos personalizados

Jorge Maiden — Sat, 24 Mar 2012 11:56:13 +0000

Si habéis creado campos personalizados (custom fields) para alguno/s de vuestros post, y ya no los necesitáis más, os adjunto una forma de poder eliminarlos de la base de datos mysql y de esta forma que ya no aparezcan en el desplegable de campos personalizados en el backend de WordPress…

Podeis borrar el postmeta que lo crea con la siguiente consulta sql:

DELETE FROM wp_postmeta WHERE meta_key = 'miMetaKey';

Si por ejemplo habéis creado un campo personalizado que se llama “Teléfono” solo teneis que sustituir ‘miMetaKey’ por ‘Teléfono’ en la anterior sentencia sql…

Saber “quien no me sigue en Twitter”

Jorge Maiden — Thu, 22 Mar 2012 19:57:45 +0000

Friendorfollow es una herramienta online que permite para conocer o saber quién de los usuarios que estas siguiendo ya no te siguen en twitter. Por ejemplo, si quieres dejar de seguir a todos los amigos que no te siguen, esta herramienta te va a ser de gran utilidad.

Basta con insertar tu nombre de usuario de twitter y pinchar en el botón para buscar:

http://www.friendorfollow.com/