Mi resumen de UXSpain 2012

mayo 17th, 2012 by vissit

Este pasado fin de semana tuve la suerte de ser invitado junto a otros compañeros de Paradigma al evento de UXSpain en el que se trataron las bienaventuranzas de la experiencia de usuario.

Lo primero que quiero hacer es felicitar a la organización, ya que fue casi perfecta. El lugar, la Universidad de Salamanca, fue inmejorable. Un lugar bien comunicado, y muy interesante turísticamente para el visitante. El catering, puntualidad, audio, auditorio, etc… muy bueno.

La única crítica que puedo hacer es respecto al nivel de algunas charlas. Creo que la temática era demasiado ecléctica,  y en muchas charlas se echaron en falta casos prácticos.

Yo destaco sobre el resto:

Desde Paradigma quisimos aportar nuestro granito de arena al evento con la interesante charla de Nacho Herranz y con el desarrollo de una aplicación web para realizar el seguimiento del hashtag #uxsp en twitter.

uxspain hashtag traking app

Aunque en líneas generales me llevo mucho positivo este fin de semana, lo mejor sin duda a sido el tener la oportunidad de conocer y compartir buenos momentos con @kremaster

Nos vemos el próximo año!

Se el primero en comentar este post

Aplicar estilo a la barra lateral Google Chrome Inspector

marzo 26th, 2012 by vissit

Este fin de semana estuve en el codemotion de Madrid, y una de las charlas que mas me llamo la atención fue la de como sacar más partido al Google Chrome Inspector, impartida por Jorge del Casar, ya que me di cuenta que usaba tan solo como un 10% de sus posibilidades.

Una de las cosas que no sabia es que se puede cambiar su apariencia. He estado investigando un poco, y el theme que más me ha gustado ha sido el de Darcy Clarke, pero ni con ese, ni con otros muchos que probé pude cambiar la apariencia de la barra derecha del inspector.

Tras consultarle a Jorge del Casar por esta duda me ofrecio dos posibilidades, pero me decante por la mas sencilla:

“Abrir un Chrome con remote debugging y desde la Chrome Canary debugeas una de las ventanas. Pulsas el atajo de teclado del inspector (⌥⌘i ó Ctrl + Shift + i) accedes al inspector de Canary el cual inspeccionará el inspector de Chrome. Importante el orden, porque si no te saldrá el inspector de Canary y verás el css de Canary, así que abre con remote debugging al que le quieras cambiar el Custom.css”

Como puede ser un poco complicado, aprovecho el post para indicarlos las principales clases a las que hay que aplicarles estilos:

/* right panel content */
.split-view-sidebar-right { }

/* right panel property text */
.split-view-sidebar-right .webkit-css-property {	  }

/* right panel value text */
.split-view-sidebar-right .value {  }

/* file text and line indicator */
 .properties .subtitle {	}

/*html selector*/
.properties.styles-selector { }

/*sidebar separator bar */
.sidebar-separator { }

Así es como ha quedado mi theme para el inspector de código de Chrome

Espero que os haya sido de ayuda, y muchas gracias Jorge!

Se el primero en comentar este post

Componente jQuery para combos multiselección

marzo 15th, 2012 by vissit

Hoy acabo de retocar el plugin para selects multiselección  jQuery UI Multiselect para que se adapte como un guante a mi último proyecto.

El plugin tal y como viene por defecto ya está muy bien, pero me he tomado la libertad de adaptarlo un poquito:

  • He cambiado el orden de las cajas, ya que siempre he visto que la caja de la izquierda es la formada por todos los elementos, y la de la derecha es la de los elementos seleccionados, y en el plugin lo tienen al revés.
  • He cambiado la posición de los botones de agregar todos y remover todos, par que quede un diseño mas limpio.
  • No he usado la opción de ordenar y soltar (sortable y draggable) de los elementos, ya que creo que confunde mas que ayuda.
  • He añadido algunos parámetros a la inicialización del plugin, para que para cada caso se puedan enviar unos textos diferentes. En un caso sera: Países seleccionados, en otro usuarios seleccionados, etc, etc…
  • Añadido otro parámetro de inicialización para que la selección de un elemento puede realizarse por un simple clic, y no solo con doble clic como estaba hasta ahora.
  • Añadido el atributo Placeholder al input de búsqueda, para ayudar al usuario a saber para que sirve dicho campo.

Podéis ver una demo de este plugin adaptado en esta pagina.

Si veis que se puede mejorar de algún otro modo, no dudéis en decírmelo.

También me ha gustado mucho el plugin jquery-ui-multiselect-widget. Tanto que de hecho ahora me voy a poner a adaptarlo también para otro formulario de mi proyecto.

¿ Conocéis algún otro componente jQuery que merezca la pena para hacer multiselección?

Se el primero en comentar este post

Convierte tu WP e-commerce Plugin en multi imagen

marzo 6th, 2012 by vissit

Estoy empezando a trastear con el Plugin de WordPress WP e-commerce y de momento me parece muy completo y sencillo.

En la tienda que estoy haciendo necesito que los productos que quiero vender tengan varias imagenes asociadas, y con la versión gratuita de este plugin esta opción esta capada. Podría comprar su version de pago, Gold Cart, que tiene dicha función y solo cuesta 40$, pero he preferido buscarme las castañas por mi cuenta, y tras pelearme un poco con el codigo lo he conseguido.

Tras investigar unas cuantas páginas para ver como podía convertir mi WP e-commerce plugin en multi imagen y ver que ninguna me funcionaba decidi crear una nueva función que me hiciera este trabajo.

Encontré una buena aproximación en:

http://builtbygeorge.net/blog/custom-multiple-thumbnail-images-in-wp-e-commerce

Pero la estructura de la base de datos ya no era la misma, así que hice unos cambios:

Añadir este codigo en el fichero functions.php

// function to receive all the images related to one product
function get_all_images($product) {
	global $wpdb;
	return $wpdb->get_results( "SELECT guid, menu_order FROM wp_posts WHERE post_type='attachment' AND post_parent=$product ORDER BY menu_order ASC" );
}

Y en la pagina donde se presenta el detalle de mi producto, wpsc-single-product.php añado esto donde se mostraba la imagen individual:

// multimage product hack for e-commerce
if ( function_exists( 'get_all_images' ) ) { // check if function exists
	foreach ( get_all_images(wpsc_the_product_id()) as $product_image )
		{
		echo "<img src='".$product_image->guid."' alt='".wpsc_the_product_title()."' />";
		}
} else {
  // simple image
}

Con estos dos sencillos pasos ya puedes mostrar tantas imagenes como quieras a tus productos en el WP e-commerce Plugin.

Ahora solo queda presentarlo de una manera mas bonito.

¿ Conocéis algún sistema mejor?

Se el primero en comentar este post

Efecto rebote con slideDown() de jQuery

noviembre 22nd, 2011 by vissit

Cada cierto tiempo me encuentro con un problema al mostrar cierto tipo de paneles con el método .slideDown() de jQuery.

Lo que me pasaba es que al irse desplegando el panel tomaba una altura superior a la de su contenido, para luego volver a su tamaño real cuando terminaba la animación.

Siempre pensé que era un problema relacionado con los margins y los paddings del elemento a mostrar, pero por fin he encontrado la solución a este problema, y parece que es de lo mas sencilla.

Al parecer jquery tiene problemas para detectar el tamaño real del texto que contiene el panel, y la solución es tan sencilla como definirle la anchura. Por ejemplo:

.element-to-slide { width:100%; }

 

Se el primero en comentar este post

Dibujos para pensar

septiembre 21st, 2011 by vissit

2 comentarios hasta el momento

Como detectar dispositivos móviles

agosto 19th, 2011 by vissit

Cada día el trafico generado desde los terminales móviles es mayor, pero todavía son pocas las paginas web que están adaptadas para ser vistas correctamente desde dichos dispositivos (entre ellas las mías).

Por este motivo, estoy empezando a investigar que alternativas gratuitas existen para controlar quien visita mis web, y en consecuencia presentarles el contenido de un modo o de otro.

La mas sencilla y que se adapta muy bien a mis necesidades es Detect Mobile Browsers: http://detectmobilebrowsers.com

Nos ofrece un pequeño script en los principales idiomas de programación (php, javascript, grails, asp,…)

Es suficiente con incluir una linea de código en nuestra pagina para que detecte si nuestro visitante nos ve a través de un móvil o de un PC.

Cuando sepamos que quien nos visita es un móvil podremos redirigirle a otra pagina, o cargar algún CSS especial.

En este pequeño ejemplo que he hecho la pagina nos dice a través de PHP y de jQuery si le visitamos desde un móvil o no:

http://www.vissit.com/projects/detectMobile/

Otra alternativa con buena pinta es php-mobile-detect.

http://code.google.com/p/php-mobile-detect/downloads/list

Es una opción más completa, ya que nos permite saber que tipo de móvil es (android, iphone, opera mini,…) pero con la limitación de estar solo disponible para PHP.

Por último, la opción mas completa es WURFL: http://wurfl.sourceforge.net/

En este caso se valida el user-agent con un XML completísimo (y actualizado periódicamente) de terminales móviles.

Nos proporciona mucha mas información, pero para el caso que yo busco (simplemente cargar una CSS especifica para móviles) es demasiado pesado y complejo.

¿Y vosotros conocéis alguna otra opción? ¿Cual os gusta más?

Se el primero en comentar este post

HeadJS un script para todos los demás

junio 7th, 2011 by vissit

HeadJS es una librería javscript que tiene multitud de virtudes, pero sobre todas ellas yo destacaría las siguientes:

Cargar Javascript en Paralelo:

HeadJS nos facilita cargar varios javscript en paralelo, pero ejecutarlos en orden.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
    // all done
});

Esto nos permite cargar librerías javascript sin bloquear la página, y reducir el número de peticiones al servidor.

Puede parecer una tontería, pero el cargar los javascript en paralelo puede hacer que nuestra pagina reduzca el tiempo de carga en varios segundos, dando a nuestros usuarios la sensación de que nuestra web es mucho más rápida.

Degración de CSS 3

HeadJS añade clases a la etiqueta HTML, informándonos de la capacidad del navegador para soportar determinadas propiedades de CSS3

/* target CSS for browsers without box-shadow support */
.no-boxshadow .box {
    border: 2px solid #ddd;
}

Diferentes diseños para diferentes dispositivos

Podemos definir diferentes estilos en función del tamaño de la pantalla. Si el usuario redimensiona la pantalla, las reglas CSS cambiarán automáticamente.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

Otras Ventajas

  • También nos permite usar etiquetas de HTML5 aunque el navegador todavía no lo soporte
  • Detección del navegador
  • Es una librería muy ligera. Tan solo pesa 2.5Kb (minimizada y comprimida)

Si queréis conocer en mayor profundidad esta librería os recomiendo leer la documentación desde su web

Uso

Todos los scripts se cargar a través de head.js()

// el caso mas simple.carga y ejecuta un fichero js.
head.js("/path/to/file.js");

// carga un script y ejecuta una function cuando se cargue
head.js("/path/to/file.js", function() {

});

// carga ficheros en paralelo pero ejecutalos en el siguiente orden
head.js("file1.js", "file2.js", ... "fileN.js");

//carga los ficheros  en paralelo y ejecutalos segun se carguen
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

//el ejemplo anterior también se puede poner así
head.js("file1.js").js("file1.js").js("file3.js");

Con head.js() podemos ejecutar javscript antes de que los scripts sean cargados. Esto elimina ese molesto lapso de tiempo que pasa desde que se carga el HTML de la pagina hasta que se ejecuta el $(document).ready()

Organización de Script

// llamar a una funcción después de que todos los scripts hayan sido cargados
head.ready(function() {   });

// llamar a una funcción cuando un determinado fichero sea cargado
head.ready("file2.js", function() {   });

Estos es útil cuando tienes ficheros javasciprt muy grandes, y quieres ejecutar algo antes de que sean cargados.

// head.ready() tambien se puede escribir así

head(function() {   });

Configuración

HeadJS es configurado con un variable global llamada head_conf antes de que el script sea cargador:

<script>
    var head_conf = { screens: [640, 1024, 1280, 1680] };
</script>

<script src="/js/head.min.js"></script>

Conclusión

En definitiva, esta parece una herramienta extremadamente útil y fácil para cargar asíncronamente nuestro javascript. Además aporta otras ventajas, que siendo en mi opinión de menor importancia, pueden ser también de gran utilidad.

Estoy deseando poderlo probar en un proyecto real, y así comprobar de todo lo que es capaz.

Y Vosotros ¿lo habéis probado ya? ¿os ha gustado? ¿conocéis alguna otra alternatíva?

Se el primero en comentar este post

NH Hoteles utiliza su plan ‘online’ para optimizar la satisfacción de sus clientes

junio 7th, 2011 by vissit

En Europa Press publican este articulo sobre la aplicación Quality Focus Online, la cual tengo el placer de haber diseñado y maquetado en Paradigma Tecnológico para su cliente NH Hoteles.

Actualmente estamos realizando la segunda versión de esta herramienta, que amplia y mejora algunas de sus funcionalidades.

Link a la noticia.

Se el primero en comentar este post

Pods CMS, mejora tu WordPress

febrero 3rd, 2011 by vissit

Pods es un plugin que convierte tu WordPress en un completo CMS. Cierto que WordPress ya es un CMS, pero se queda un poco limitado con los tipos de contenido que puedes crear.

Existen plugins como Custom Field Template o los propios Custom Fields de WordPress para añadir campos especificos a tus post, y esto está muy bien para muchos casos, pero yo prefiero usar Pods, ya que es mucho mas completo y cambia completamente la forma de trabajar con tus entradas.

Los Custom Fields son muy faciles de implementar, pero pueden ser poco intuitivos cuando nuestros clientes son los que tienen que introducir el contenido en la web. Con Pods haremos la vida mucho más facil a los editores de la web.

INSTALACIÓN

Se instala igual que cualquier otro plugin. Basta con descargar el plugin, descomprimirlo en la carpeta plugins y activarlo.

Puede que tengas que editar el fichero .htaccess para que el plugin funcione bien con las URLs amigables. El plugin te dirá que codigo debes de introducir y donde.

Una vez instalado, se añadirá en el menu izquierdo con los siguientes enlaces:

  • Manage Content: Ver el contenido de las tablas de Pods
  • Pachage Manager: Herramienta de exportación e importación
  • Menu Editor: Te permite crear una estructura de navegación como en las páginas de WordPress

CREAR UN POD

Es conveniente crear un Pod cuando una sección, o incluso una página, requiere campos especificos.

En mi caso, voy a crear un Pod para la sección Portfolio de mi web.

El nombre del pod debe de estar en minúsculas y no tener caracteres especiales ni espacios.

Una vez creado, verás el gestor de Pods, donde pondrás los campos que tendrá esta sección. Por defecto creara un campo “name”, que es obligatorio.

Los tipos de campos diponibles son:

  • Date
  • Number
  • Boolean: Renderiza un checkbox
  • Single Line Text: renderiza un input
  • Paragraph Text: Textarea con botones de formato HTML
  • Code: Campo para introducir código
  • File Upload: Permite añadir ficheros a la WordPress Media Library
  • Permalink: Genera el slug para la entrada
  • Relationship: Permite enlazar la entrada con otra entrada Pod o WordPress (pagina, post, usuario)

Con los atributos, puedes definir el campo como único o requerido.

Puedes añadir tantos campos como sean necesarios. En nuestro caso de ejemplo para el portfolio, añadiremos los siguientes:

  • intro: Single Line text
  • description: Paragraph text
  • image: Fule upload
  • tasks: Single Line text
  • endDate: Date
  • siteUrl: Single Line text
  • position: Number

Machine Name es el identificador del campo, no puede tener espacios ni caracteres especiales. Label es la descripción del campo que verá el usuario.

GESTIONAR EL CONTENIDO

Una vez creado el Pod se añadira un link en el menu de la izquierda (en nuestro caso Add Portfolio)

Si hacemos clic en este link, podremos gestionar su contenido.

Una vez creado, tendremos acceso al listado con todas las entradas creadas para este grupo

Para integrar Pods mas dentro de nuestro WordPres podemos marcar “Top Level Menu?” en la administración del Pod. Esto hará que nuestro Pod se muestre en la barra de menus de la adminsitracion de WordPress.

Otra útil caracteristica de este plugin es la posibilidad de limitar el acceso a ciertos apartados del plugin segun el rol de usuario.

MOSTRAR EL CONTENIDO DE TUS PODS EN TU TEMA

Aunque el plugin tiene una seccion llamada Page para gestionar esto, yo prefiero editar los ficheros de mi tema para mostrar la información de mis Pods.

Tendremos que añadir el siguiente código:

<?PHP
findRecords('position ASC');

$total_portfolio = $portfolio->getTotalRows();
if( $total_portfolio > 0 )
{
// Retrieves the next record from our object
?>
fetchRecord() ) : ?>

get_field('id');
$portfolio_name     = $portfolio->get_field('name');
$portfolio_intro    = $portfolio->get_field('intro');
$portfolio_description	= $portfolio->get_field('description');
$portfolio_image  = $portfolio->get_field('image');
$portfolio_tasks  = $portfolio->get_field('tasks');
$portfolio_endDate  = $portfolio->get_field('endDate');
$portfolio_siteUrl  = $portfolio->get_field('siteUrl');
$portfolio_position = $portfolio->get_field('position');

// data cleanup
$portfolio_description       = wpautop( $portfolio_description );
$portfolio_image     = $portfolio_image[0]['guid'];
?>


CAMPOS TIPO RELATIONSHIP

Estos campos tienen un gran potencial, ya que podemos relacionar una entrada con cualquier otra entrada, pod, o pagina del wordpress.

Más Información

Para obtener mas información sobre este tipo de campos, podeis leer este articulo.

Para obtener más información, os recomiendo leer estos ariculos, en los que yo me h basasdo:

Se el primero en comentar este post