jQuery: añadir diferentes clases CSS en función del dispositivo (movil, tablet, pc)

Añadir diferentes clases css en función del dispositivo con el usuario entre a la página web, usando la propiedad userAgent y en este caso añadiendo la clase correspondiente al “body” como vemos en el siguiente ejemplo:

$(document).ready(function(){
    // Averiguo dispositivo
    var ua = navigator.userAgent.toLowerCase(),
    tablet  = ( /ipad|android 3|sch-i800|playbook|tablet|kindle|gt-p1000|sgh-t849|shw-m180s|a510|a511|a100|dell streak|silk/i.test( ua ) ),
    movil  = ( /iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test( ua ) ),
    pc = ( !tablet && !movil );
    // Añado la clase css
    if( tablet )  $('body').addClass( 'tablet' );
    if( movil )  $('body').addClass( 'movil' );
    if( pc ) $('body').addClass( 'pc' );
});

De esta forma podemos aplicar diferentes estilos, cargar diferentes css, etc… dependiendo del dispositivo de entrada del usuario.

TimThumb: urls amigables

Código htaccess para convertir las urls “feas” de las imágenes de timthumb.php a url amigables, y de este modo ponérselo un poco más fácil a “google imágenes” para posicionaras mejor.

Por defecto con timthumb.php tenemos urls de las foto miniatura de este tipo:

http://web.com/timthumb.php?src=http://web.com/imagenes/foto2629.jpg&w=500&h=200

Y queremos transformarlas en urls más cortas y “bonitas”, por ejemplo:

http://web.com/imagenes/thumb/foto2629.jpg

Pues basta con añadir la siguiente línea a nuestro archivo .htaccess:

RewriteRule ^images/thumb/(.*)$ /timthumb.php?src=http://web.com/imagenes/$1&w=500&h=200 [L]

Y si por ejemplo tenemos diferentes tipos de miniatura con diferentes tamaño podemos añadirle parámetros a la url:

RewriteRule ^images/thumb/([0-9]*)x([0-9]*)/(.*)$ /timthumb.php?w=$1&h=$2&src=http://web.com/imagenes/$3 [L]

Y con esto obtendríamos urls de diferentes tamaños, ej:

http://web.com/imagenes/thumb/500×200/foto2629.jpg.
http://web.com/imagenes/thumb/200×200/foto2629.jpg.
etc..

Sass y Compass: Actualizar a su última versión

Actualizar Sass o Compass a su última versión estable es tan sencillo como su instalación. Abrimos la consola de Ruby e insertamos los comandos:

Para actualizar a la última versión de Sass:

gem update sass

Para actualizar a la última versión de Compass:

gem update compass

PoEdit: [solución] problemas con caracteres en otros idiomas

Si usáis Poedit, como herramienta de traducción de vuestras webs… y suponiendo que nuestro server ya tiene configurado la directivaAddDefaultCharset UTF-8.

4 pasos imprescindibles para evitar problemas de signos o caracteres raros como: �, etc… en diferentes lenguajes (alemán, ruso, etc…) que tengan caracteres diferentes del español:

1. Los archivos fuente (php, html…) tienen que estar codificados en utf-8. Esto es muy importante.

2. Dentro del “head” de vuestras webs, el meta charset tiene que tener la codificación de caracteres en UTF-8:

Para html 5:

<meta charset="utf-8" />

Para html 4:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

3. En el archivo php que llamamos a los archivos “locale” de los diferentes idiomas, hay que añadir la función bind_textdomain_codeset con su parámetro “utf-8″, ej:

putenv("LC_ALL=$language");
setlocale(LC_ALL, $language);
bindtextdomain("messages", "./locale/");
bind_textdomain_codeset("messages", 'utf-8'); /* importante */
textdomain("messages");

4. En configuración de los archivos poedit, en el menu: catálogo > propiedades > propiedades de traducción. Elegir “UTF-8″ en los 2 conjunto de caracteres.

WordPress: ACF & qTranslate [solución] conflicto Editor Wysiwyg

Si usáis estos 2 plugins (Advanced Custom Fields y qTranslate) conjuntamente es probable que tengáis problemas al usar el campo “Wysiwyg” de ACF, ya que duplica el texto del último campo Wysiwyg en el Content del post/página.

Esto pasa por un conflito del qTranslate con ACF. Para solucionarlo, prueba a editar el archivo “qtranslate_javascript.php” del plugin qtranslate:

1. Busca la línea (línea 288 aprox.):

qtrans_save(switchEditors.pre_wpautop(o.content));

Y reemplázala por:

if (ed.id.match(/^qtrans_/)) { qtrans_save(switchEditors.pre_wpautop(e.content)); }

2. Busca la línea (línea 334 aprox.):

id = id || 'qtrans_textarea_content';

Y reemplázala por:

window.id = id || 'qtrans_textarea_content';

pd: lo acabo de testear también con mqTranslate 2.6.3 y Advanced Custom Fields 4.3.8.