ResponsiveSlides: sencillo plugin para crear pases de imágenes adaptables

Por . Hace 1060 días

ResponsiveSlides es un plugin de jQuery para crear pases de imágenes o slideshows en tu web de forma sencilla y ligera que además por defecto se comporta de manera adaptable, se ajusta automáticamente al tamaño de la ventana o del contenedor.

ResponsiveSlides: plugin jQuery para crear pases de imágenes

Además de esta funcionalidad responsive, me gusta mucho este plugin porque pesa solamente 1kb y porque no necesita añadir estilos CSS especiales para el pase de imágenes, él solito se encarga de todo. Lógicamente, se pueden añadir estilos para modificar el diseño del mismo, pero no los requiere para funcionar y visualizar el slideshow correctamente.

La idea del proyecto es conseguir hacer un plugin ligero, simple y muy específico. Las opciones que puedes configurar son pocas pero cubren las necesidades más habituales:

  • Tiempo que debe permanecer cada imagen antes de pasar a la siguiente.
  • Tiempo que debe durar el efecto de la transición fade.
  • Elección entre reproducción automática o paginación, que se genera automáticamente.
  • Anchura máxima del pase de imágenes.

Creo que sería genial que en siguientes versiones se añadiera algún efecto más para las transiciones (no solamente fade) y soporte para títulos/subtítulos en cada imagen.

Cómo usar el plugin

Lo primero, descargar el paquete ZIP desde la página del proyecto en GitHub. Verás que dentro del paquete hay un sencillo ejemplo que puedes utilizar para probarlo y para ver el código necesario.

El marcado del HTML para hacerlo funcionar es lo más simple posible: un elemento contenedor sobre el que se aplica el plugin y automáticamente todas las imágenes que haya dentro formarán cada una un slide del pase de imágenes:

<div id="slides">
  <img src="1.jpg" alt="" />
  <img src="2.jpg" alt="" />
  <img src="3.jpg" alt="" />
</div>

//Código HTML/Javascript para activar el plugin sobre el contenedor #slides
<script type="text/javascript">
  $(function () {
    $("#slides").responsiveSlides();
  });
</script>

Su autor asegura que funciona en todos los navegadores modernos y también en muchos de los anticuados, como Firefox 2 o Internet Explorer 6 y 7. Yo lo he en varios sin ningún problema.

Enlace:

5 ejemplos de cómo consultar y mostrar las imágenes adjuntas a un post en WordPress

Por . Hace 1061 días

Una gran funcionalidad que tiene WordPress desde las primeras versiones es que los archivos que se suben desde la edición de una entrada o página quedan asociados como “adjuntos” a ese post. En la base de datos quedan guardados, sean el tipo de archivo que sean, como tipo de contenido attachment.

En esta entrada vamos a echar un vistazo a cinco ejemplos básicos pero muy útiles para trabajar con las imágenes adjuntas a un post, con varias formas para conocer la flexibilidad de WordPress para cubrir esta necesidad.

Chuck Norris sabe manejar las imágenes adjuntas en WordPress

La idea principal para realizar consultas de los archivos adjuntos a un post es que todos los adjuntos tienen guardado como post_parent el ID del post en cuestión. Este identificador, si estamos dentro del bucle de WordPress lo tendremos preparado en la variable $post->ID.

Consultar y mostrar todas las imágenes adjuntas a un post

Sabiendo que los adjuntos son hijos del post, podemos usar este código para generar un bucle en el que se consulten todos los archivos adjuntos a un post que sean imágenes. Utilizamos la función get_posts() para realizar la consulta con esas opciones y después, para cada uno de los resultados, obtenemos los datos de la imagen mediante la función wp_get_attachment_image_src(), que nos da la URL del propio archivo de imagen, su altura y su anchura. Así podemos crear nuestra propia etiqueta HTML para mostrar la imagen como queramos.

Esta función permite también especificar el tamaño de la imagen de la que queremos obtener la información. Puede ser “full”, “large”, “medium” o “thumbnail” y son los tamaños que pueden modificarse desde el propio panel de administración en la sección de Ajustes -> Multimedia.

<?php 
$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => 'image',
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'medium' ); ?>
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
	<?php
	}
}
?>

Consultar y mostrar sólo la última imagen adjuntada

En el segundo ejemplo cambiamos de función para generar la consulta y usaremos get_children(), que directamente consulta los hijos de un determinado post. Además, la vamos a mostrar en tamaño mediano e incluímos un enlace a la imagen en tamaño completo capturando la URL del archivo mediante la función wp_get_attachment_url().

<?php 
$args = array(
	'post_type' => 'attachment',
	'numberposts' => 1,
	'order' => 'ASC',
	'post_parent' => $post->ID,
	'post_mime_type' => 'image'
);
$attachments = get_children($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'large' ); 
		$attachment_full_url = wp_get_attachment_url($attachment->ID); ?>
		<a href="<?php echo $attachment_full_url; ?>">
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
		</a>
	<?php
	}
}
?>

Mostrar sólo las imágenes subidas en un formato determinado

A la función get_posts() también se le puede pasar como argumento una lista de MIME types concretos para que sólo obtenga las imágenes de un tipo determinado.

El bloque de código es muy parecido, pero en esta ocasión añadimos una nueva opción a la variable $args. En el ejemplo, consultamos todos los archivos adjuntos que sean imágenes de tipo JPG o PNG y las mostramos en tamaño miniatura. Para obtener la URL de la miniatura, en vez de usar la función anterior utilizaremos wp_get_attachment_thumb_url(), que nos devuelve directamente la dirección del thumbnail.

$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => array('image/jpeg', 'image/png')
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		<img src="<?php wp_get_attachment_thumb_url($attachment->ID); ?>" alt="" />
	<?php
	}
}
?>

Mostrar sólo la imagen establecida como destacada

Para mostrar sólo la imagen destacada de la entrada o página podríamos hacer un bucle, como en el ejemplo anterior. Pero también podemos utilizar la función get_post_thumbnail_id(), que nos devuelve el ID de la imagen destacada, por lo que ya no necesitamos crear un bucle y podemos usar la función wp_get_attachment_image_src() para consultar y traer el adjunto que especifiquemos mediante su identificador.

Primero averiguamos el ID de la imagen adjunta, después obtenemos la URL de dicha imagen en el tamaño que queramos, su altura y su anchura. Y construímos la etiqueta HTML para mostrar la imagen.

<?php 
$featured_id = get_post_thumbnail_id($post->ID);
$featured_size = 'large';
$featured_image = wp_get_attachment_image_src( $featured_id, $featured_size); 
if($featured_image){ ?>
	<img src="<?php echo $featured_image[0]; ?>" alt="" width="<?php echo $featured_image[1]; ?>" height="<?php echo $featured_image[2]; ?>" />
<?php } ?>

Mostrar todas las imágenes excepto la establecida como destacada

En muchas ocasiones queremos mostrar una galería con todas las imágenes que se han adjuntado a una entrada o página, pero la imagen destacada la tenemos reservada para mostrarla en otros espacios y no queremos que aparezca en esta galería.

En ese caso, podemos añadir a la variable $args la opción exclude para excluir de la consulta los adjuntos que tengan ese ID. Sólo necesitamos conocer el ID de la imagen que está establecida como destacada, pero como acabamos de ver en el ejemplo anterior esta información nos la dice la función get_post_thumbnail_id(), a la que solamente tenemos que especificarle el ID del post y nos devuelve el ID de su imagen destacada.

<?php 
$args = array(
	'post_type' => 'attachment',
	'numberposts' => null,
	'post_parent' => $post->ID,
	'post_mime_type' => 'image',
	'exclude' => get_post_thumbnail_id($post->ID)
);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		//Tamaños: "thumbnail", "medium", "large", "full"
		$image_atts = wp_get_attachment_image_src( $attachment->ID, 'medium' ); ?>
		<img src="<?php echo $image_atts[0]; ?>" alt="" width="<?php echo $image_atts[1]; ?>" height="<?php echo $image_atts[2]; ?>" />
	<?php
	}
}
?>

Como ves, WordPress nos permite trabajar con las imágenes adjuntas de una forma muy flexible. A partir de aquí, ya sólo queda la imaginación de cada uno, :)

Más información:

Ui Parade: escaparate de inspiración en diseño de interfaces de usuario

Por . Hace 1062 días

UI Parade es un sitio web donde se recopilan ideas de diseño de interfaces de usuario con el objetivo de servir de inspiración para profesionales o para cualquier persona intereasada en este arte. Es un escaparate donde pueden verse tendencias y nuevas propuestas creadas por diseñadores de renombre de cualquier parte del mundo.

UI Parade: inspiración para el diseño de interfaces de usuario

Este desfile de ejemplos de interfaces de usuario está organizado por temática para poder navegar por las diferentes ideas fácilmente:

  • Botones
  • Formularios
  • Kits completos de UI
  • Iconos
  • Sistemas de paginación
  • Tooltips

Por supuesto, también dispone de un canal de Twitter y un feed RSS que puedes añadir a tu lector para estar siempre atento a las nuevas publicaciones.

Si te animas, puedes usar la sección de contacto para enviar tus propias ideas y que el equipo de UI Parade las valore para incluirlas en la web, :)

Enlace:

Infografía: el año 2011 para Firefox

Por . Hace 1063 días

El año 2011 ha sido realmente intenso para Firefox, uno de los navegadores web más populares del momento, aunque recientemente se ha publicado la estadística de que Google Chrome le ha superado por primera vez en cuota de usuarios.

El equipo de Mozilla ha estado muy atareado con el desarrollo y las mejoras de su producto estrella, incluso han publicado una infografía en la que se detalla la evolución de Firefox en los últimos 12 meses:

  • Se publicó Firefox 4 con la herramienta de sincronización de datos del usuario.
  • Se publicó la versión de Firefox para dispositivos Android.
  • Se han mejorado enormemente las capacidades del usuario para decidir su privacidad en la navegación.
  • Se ha mejorado la velocidad (x7) y reducido a la mitad el consumo de memoria.
  • Se ha presentado y respetado el nuevo ciclo de actualizaciones de la aplicación.

Infografía completa:

Infografía: Firefox en 2011

Enlace:

@font-face Kit Generator: generador de paquetes de tipos de letra para tu web

Por . Hace 1067 días

@Font-face Generator es una aplicación gratuita creada por FontSquirrel para generar tus paquetes de tipos de letra y poder utilizarlos directamente desde el código CSS de tus sitios web.

@font-face Generator

Si eres diseñador, maquetador o programador web, esta herramienta es fundamental cuando se necesita jugar con tipografías no estándar de la web. El único requisito es disponer de los tipos de letra que se van a usar con su correspondiente licencia de uso. A partir de ahí, el procedimiento es muy sencillo:

  • Accedes a la página web de la herramienta y subes todos los archivos de tipos de letra, en el formato que los tengas. Te permite subir varios a la vez.
  • Eliges si quieres realizar una configuración básica, óptima o de experto. La diferencia es la optimización de las conversiones para mejorar la velocidad de la carga y la cantidad de opciones que te permite modificar y definir para generar el paquete.
  • Descargas el paquete.

¿Cuál es el resultado?

El paquete que te descargas de la herramienta es un ZIP que, al descomprimirlo, contiene una carpeta en la que se encuentran nuestros tipos de letra en el formato original y además convertidos al resto de formatos para garantizar la compatibilidad con todos los navegadores web y sistemas: EOT, SVG, WOFF y TTF.

@font-face generator: resultado del paquete

No se queda ahí, sino que también te descargas un fichero HTML de demostración para cada uno de los tipos de letra que has subido y un fichero CSS con el código @font-face para poder copiarlo y pegarlo en tu web. Por ejemplo:

@font-face {
    font-family: 'BelleroseLight';
    src: url('bellerose-webfont.eot');
    src: url('bellerose-webfont.eot?#iefix') format('embedded-opentype'),
         url('bellerose-webfont.woff') format('woff'),
         url('bellerose-webfont.ttf') format('truetype'),
         url('bellerose-webfont.svg#BelleroseLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Una maravilla.

Enlace:

WordPress 3.3 “Sonny” ya disponible para todos los usuarios

Por . Hace 1077 días

Después de varias versiones alpha, beta y release candidate, por fin hoy nos hemos leventado con la buena noticia de que WordPress 3.3 ya ha sido publicado y está disponible para todos los usuarios. El nombre en clave de esta nueva versión es “Sonny“, en honor al saxofonista de jazz Sonny Stitt. Al acceder a tu panel de administración ya verás la notificación de la actualización automática. Y también lo tenemos ya traducido al español.

A continuación el video oficial con el repaso a las novedades más importantes de la nueva versión:

Aunque próximamente veremos las novedades más en profundidad en Mundo Idibay, los cambios más interesantes desde el punto de vista del usuario son:

  • El nuevo cargador de archivos, que permite arrastrar y soltar archivos desde el escritorio del ordenador.
  • Rediseño de la barra superior de herramientas, haciéndola mucho más útil que antes.
  • Nuevo sistema de menús flotantes, mejorando la velocidad y comodidad al navegar por el panel de administración.
  • Las mejoras de diseño del panel de administración, haciéndolo más adaptable a dispositivos móviles y tablets.
  • ….

Aunque el sistema de actualizaciones automáticas de WordPress está muy maduro, se recomienda hacer una copia de seguridad antes de hacer cualquier actualización de versión.

Enlace:

Redirigir al usuario a una página después de enviar comentario en WordPress

Por . Hace 1080 días

commentVamos a suponer que tenemos una página publicada cuyo identificador (ID) es 34 y que queremos redirigir a los usuarios a esa página después de realizar un comentario. Puedes averiguar el ID de cualquier página o post editándola desde el panel de administración y fijándote en la URL, el identificador es el número que se especifica después del post=.

En esa página podemos tener un texto de agradecimiento por haber realizado un comentario en la web. O quizá un formulario para registrarse en la web y no tener que volver a rellenar los campos para comentar. O cualquier otra cosa, :)

En el formulario del comentario, que se encuentra en el fichero comments.php del tema activo, vamos a añadir un nuevo campo oculto en el que el atributo value es la URL a la que se redirigirá al usuario después de enviar el formulario:

<input name="redirect_to" type="hidden" value="<?php echo get_permalink(34); ?>" />

Con este cambio, todos los usuarios serán redirigidos a esa página después de publicar un nuevo comentario. En el caso de querer llevarlos a una página de registro, sería necesario comprobar primero si el usuario ya está registrado y ha iniciado sesión.

El código sería el siguiente:

<?php if(!is_user_logged_in()){ ?>
	// Usuario no logueado, redireccionar a página de registro
	<input name="redirect_to" type="hidden" value="<?php echo get_permalink(34); ?>" />
<?php } ?>

De esta forma, los usuarios que han iniciado sesión no serán redirigidos al publicar un comentario, pero a los anónimos se les llevará a la página 34 con el formulario de registro.

Infografía: el año 2011 en resumen, según Twitter

Por . Hace 1081 días

Leyendo Geek’sRoom he descubierto que Twitter ha publicado un sitio donde se hace un repaso al año 2011 en forma de infografía. La información está descrita en ocho idiomas diferentes y está dividida en cinco secciones:

En esta imagen se ve una parte de los temas más populares del 2011 organizados por categorías:

Temas más populares en Twitter en 2011

Y el tweet más retwiteado de 2011 es…

Tweet de oro 2011Un tweet promocionado de Wendy’s para conseguir fondos para los niños necesitados.

Enlace:

La nueva pantalla de bienvenida a WordPress 3.3

Por . Hace 1082 días

La versión 3.3 de WordPress sigue avanzando a buen ritmo. Ayer mismo se publicó la Release Candidate 2 y se espera tener la nueva versión estable para todos los usuarios en tan sólo unos días.

Como curiosidad, cuando los usuarios se actualicen a WordPress 3.3 desde el panel de administración, verán una nueva página de bienvenida mostrando las novedades de la nueva versión:

Bienvenida a WordPress 3.3

Además de hablar de las mejoras de diseño y uso de las diferentes funciones, la implementación de las últimas tecnologías y las actualizaciones en las diferentes partes del gestor de contenidos, también se ha creado una pestaña llamada “Créditos” donde conocer a los responsables más importantes del proyecto y a los colaboradores (con sus fotos y todo). Y un poco más abajo, se listan todas las librerías externas que se utilizan en WordPress.

Un detalle, :)

Basecamp Next: la nueva versión del gestor de proyectos ya está en camino

Por . Hace 1082 días

Por fin, 8 años después, el equipo de 37 Signals ha hecho público que se está trabajando en la nueva versión de Basecamp, el súper popular gestor de proyectos colaborativo y online.

Basecamp es el producto estrella de un equipazo de profesionales del diseño de interfaces de usuario para aplicaciones web. Durante varios años, muchos hemos sido los usuarios que pasamos de alabar su experiencia de uso a cuestionarnos si en algún momento se iba a modernizar la aplicación para adoptar las últimas tecnologías. Y muchos lo han dejado de usar por otras alternativas más modernas y más baratas.

Basecamp Next

Basecamp Next es una página web que ha sido abierta para dar a conocer la próxima renovación y para invitar a cualquier usuario a formar parte de la lista de posibles usuarios beta del producto. Los elegidos tendrán el privilegio de  poder probar la aplicación antes que el resto de los mortales y, probablemente, con alguna ventaja económica una vez se alcance la versión definitiva.

37 Signals nos promete con Basecamp Next que podremos ver la nueva aplicación a principios de 2012 y que van a volver a cambiar la forma en la que las personas colaboran online en la gestión de proyectos.

Que así sea.

Enlace: