Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo lanzar una acción con jQuery cuando se acaba de redimensionar la ventana del navegador

Si se asocia una acción al evento $(window).resize() se ejecuta inmediatamente después de redimensionar la ventana. Como resultado, si se cambia el tamaño de la ventana con el ratón, la acción se lanza muchas veces.

Para lanzar una acción únicamente cuando se ha terminado de cambiar el tamaño de la ventana, es decir, cuando hemos soltado el puntero del ratón, podemos usar el siguiente snippet:

$(window).resize(function() {
   if(this.resizeTO) clearTimeout(this.resizeTO);
   this.resizeTO = setTimeout(function() {
      $(this).trigger('resizeEnd');
   }, 500);
});
$(window).bind("resizeEnd", function() {
   // Acción
});

Cómo sobreescribir un script js en un child theme de WordPress

Imago voragine.net
[actualizado el ] • Por Enlace permanente

Para modificar un archivo javascript en un tema hijo (child theme) de WordPress no basta con incluirlo en la carpeta del child theme y esperar que WordPress lo use en vez del equivalente en el parent theme (tema padre), como ocurre con los archivos PHP.

Con los archivos javascript tenemos que realizar dos operaciones: eliminar de la cola de scripts el archivos del parent theme, y añadir el archivo modificado alojado en la carpeta del child theme:

function child_theme_prefix_load_scripts() {
 wp_dequeue_script('parent-theme-script-handler');
 wp_enqueue_script(
   'child-theme-script-hadler',
   get_stylesheet_directory_uri().'/js/script.js',
   array( 'jquery' ), // dependencias
   '1.0', // versión
   false // incluir script en la sección header del HTML
 );
}
add_action( 'wp_print_scripts', 'child_theme_prefix_load_scripts', 100 );

Usar el hook wp_print_scripts, en vez de wp_enqueue_scripts, nos asegura que la acción se ejecutará después de que el parent theme haya registrado y añadido a la cola los scripts.

Además de la función wp_dequeue_script existe wp_deregister_script. Ambas conseguirán que el script del parent theme no se cargue, pero usando la segunda sin la primera obtendremos un notice de PHP. Parece ser que lo correcto es usar ambas.

Función JavaScript para detectar si una página web está siendo visitada desde un dispositivo móvil

Imago voragine.net
[actualizado el ] • Por Enlace permanente

Buceando en el código del theme Hero de WordPress, desarrollado por ThemeTrust he encontrado una función JavaScript muy sencillita para detectar si una página web está siendo visitada desde un dispositivo móvil.

No es completa, pero sí cubre los principales dispositivos móviles:

function isMobile(){
    return (
        (navigator.userAgent.match(/Android/i)) ||
        (navigator.userAgent.match(/webOS/i)) ||
        (navigator.userAgent.match(/iPhone/i)) ||
        (navigator.userAgent.match(/iPod/i)) ||
        (navigator.userAgent.match(/iPad/i)) ||
        (navigator.userAgent.match(/BlackBerry/i))
    );
}

Botones de compartir en redes sociales personalizados y sin javascript

Imago voragine.net
[actualizado el ] • Por
Cada botón de compartir en su red social no es otra cosa que una llamada a un programa en el servidor de la red social que permite publicar algo. Todo ello rodeado de un logo y un buen trozo de javascript, que hacen opaco el proceso, dificultando por ejemplo personalizar el aspecto del botón o modificar la petición. Por otro lado, los códigos ofrecidos por cada red social que construyen los botones de compartir, solicitan el logo y algo más de información a los servidores de la red social, así que muchas veces tardan en cargarse en exceso. La llamada al programa de la red social se realiza mediante URL, así que si conocemos la URL podemos ejecutarlo mediante un simple enlace, al que daremos el aspecto que queramos. Con parámetros en la URL podemos personalizar la petición como queramos.

Cómo llamar scripts de manera segura y adecuada en WordPress

Imago voragine.net
• Por
WordPress tiene funciones para todo, y cada vez más. Por ejemplo wp_enqueue_script que llama a un script de manera segura, y se asegura antes de que no ha sido invocado ya. En la página del Codex de WordPress sobre esta función, se listan además todos los scripts que vienen incluidos con WordPress: útil listado.

Recursos para empezar con jQuery

Imago voragine.net
• Por
jQuery tutorials for designers. Una serie de pequeños tutoriales, casi recetas, para entender los fundamentos de jQuery y aprender a hacer los efectos visuales dinámicos típicos de menú. / 50+ Amazing Jquery Examples. Desde los plugins más sencillos, listados deslizantes, menús en acordeón, hasta algunos más complejos o menos corrientes, formularios o ruedas de selección de color. Muy útil para empezar a concebir lo que jQuery puede hacer. / Easy Slider. Un plugin para incorporar menús deslizantes realmente fácil de añadir a cualquier página, desarrollado por CSS Globe. / Easy Tooltip. Un plugin para incorporar elementos de ddistinta complejidad que aparecen al hacer rollover sobre cualquier elemento HTML, también desarrollado por CSS Globe.