Skip to content
diciembre 19, 2011 / martinbeltran

window.navigate en google chrome y mozilla firefox

Hola a tod@s,

Los que llevamos tiempo en el desarrollo web hemos sufrido cambios entre navegadores, incompatibilidades, upgrades que hacen de tu web un lugar inaccesible o un SIMO de tecnologías.

Para aquellas aplicaciones que pensaste para IE y llenaste tus HREF de window.navigate habrás “notado” que en chrome o firefox no funciona, como tantas otras funciones exclusivas de IE que solo funcionan en su navegador (hoy día merecidamente denostado), bueno aquí teneis una sencilla solución:

Publicar en vuestras paginas o en un js para incluirlo la siguiente porción de código:

	<script type="text/javascript">
		function navigate(sURL) {
		if (sURL.substring(0, 7) != "http://")
			sURL = "http://" + sURL;
			window.location.href=sURL;
		}	
	</script>
 

Con ésta sencilla solución vuestro site podrá hacer uso de los HREFs que hacen referencia a ese método del objeto window.

Hasta la próxima

noviembre 30, 2011 / martinbeltran

Review casadellibro.com (buscador)

Lo primero, me encanta la nueva web de lacasadellibro.com, dicho lo cual no quita que algunos detalles sean “mejorables” al menos para una mente como la mía… o vista.

Era imprescindible orientar la web a la busqueda y a la sugerencia, tal cual lo han hecho, aunque como digo hay detalles que se podrían afinar (subjetivamente hablando).  El otro día compre un libro a través de su página y lo primero que me llamó la atención es  ¿donde está el buscador?… en la primera versión (de la nueva web) se apreciaba bien… solo hay que detenerse un par de segundos para ver donde está obviamente pero la pregunta es ¿porque?. Yo diría que es por la combinación de colores dependientes de la imagen de “destacado” que pongan y en ésta ocasión ocultaba o no favorecía la localización del buscador.

Esta es la pantalla:

Home original lacasadellibro.com

Home original lacasadellibro.com

Y estas algunas propuestas:

1. Resaltar de forma elegante el buscador para ayudar a la localización del buscador de forma sutil, el destacado está ahí por algo y cumple su función pero no debe ocultar otros elementos.

Alternativa 1 a la home de lacasadellibro.com

Alternativa 1 a la home de lacasadellibro.com

2. Cambiar la ubicación a una zona bastante preferida por miles de páginas manteniendo su estética y fomentando una buena localización permanente, además de ahorra algunos pixeles del frame principal (esto es cada vez menos importante parece).

Alternativa Home lacasadellibro.com

Alternativa 2 Home lacasadellibro.com

Bueno aquí queda una apreciación más de usabilidad.

Hasta la próxima.

agosto 1, 2011 / martinbeltran

Pildoras de usabilidad: Ms Word (Añadir Filas/Columnas)

Bueno no sé si os ha pasado alguna vez trabajando con word que insertas una tabla y luego tienes que añadir alguna fila o columna.. word no te ofrece la posibilidad de añadir varias filas o columnas de una vez, si es un 1 o 2 no pasa nada pero si tienes que hacerlo más veces creo que sería util lo siguiente:

Por un lado tenemos la actualidad donde tenemos que ir añadiendo filas/columnas una a una, y por otro una propuesta donde al añadir puedes indicar el número de elementos que deseas añadir.

En fin no cuesta tanto hacer la vida un poco más facil.

julio 13, 2011 / martinbeltran

El +1 de Google, apreciación gráfica

Hoy es mi primer día en Google +, y aunque ya había visto ésta funcionalidad en el buscador hasta hoy no había hecho uso de ella. Se trata de la calificación +1, el tan utilizado “Me Gusta” de Facebook….

Para hacer uso de ella solo tienes que clickar sobre el icono que aparece junto a los comentarios o resultados. El resultado de hacerlo es un cambio de apariencia en el icono a, visto en pantalla:

Parece obvio que para quitar el +1 tendrás que pinchar sobre él de nuevo…. me pregunto si sería tan obvio para otras personas menos acostumbradas a determinadas interfaces, y aunque siempre tienes la ayuda del tooltip , no sería más intuitivo hacer un -1???…. algo así???

En fin es solo una apreciación….😉

junio 20, 2011 / martinbeltran

La escasa usabilidad en páginas de administración pública

Si amigos, es un hecho, hoy os pongo un ejemplo pero seguro que en alguna ocasión lo habreis sufrido en vuestras carnes. El hecho es que las administraciónes públicas se afanan en que sus servicios o paginas sean accesibles, pero obvian que también tienen que ser usables, comprensibles….

Por ejemplo, supongamos que quereis solicitar una copia de vuestra vida laboral, lo primero que os recomiendo es utilizar google y buscarlo (link) porque si vais directamente a la página del organismo http://www.seg-social.es/ minimo os costará 3 clicks… esto si teneis suerte de mirar en “lo más visitado”, y si teneis suerte de acertar en el servicio de una lista de 11, y si teneis suerte de ver el link “acceso al servicio” que sí está puesto lo primero pero a mi se me fue la vista al link que pone “formato PDF” y resulta que es descargarte lo que estás viendo.

Bueno supongamos que has llegado a la página que te proporciona el servicio de solicitar la vida laboral, que te encuentras??…. pues esto (click para ampliar)

Aparentemente no destaca por nada pero vamos a ir viendo esas cosas que hacen de lasa aplicaciónes un lugar agradable o todo lo contrario.

Veamos algunas mejoras sencillas:

  1. Agrupamiento de información: No se puede decir mucho porque es correcto, dos bloques diferenciados “Datos Personales” y “Domicilio”, aunque éste último también es un dato personal, pero ni lo planteo.
  2. Disposición de campos: En este punto sí que he visto un gap donde decir algo. Dentro de la orientación apaisada o panorámica de los campos, que entiendo se hace para no ocupar mucho espacio vertical sí que entiendo que deberían haber trabajado un poco más la alineación y tamaño de los campos para hacerlo más “legibles” o localizables.
  3. Tipología de campos: En este caso propongo que, por ejemplo, el campo “tipo de identificación” en lugar de una lista con 3 elementos fuera un combo, con el NIF por defecto. Además la etiqueta “Nº de Identificación” podría incorporar dinámicamente el texto de la tipología para identificar mejor el contenido que debes incoporar por ejemplo “Nº de NIF”.
  4. Apariencia: En el caso de campos que no sean editables deberían tener un aspecto diferente, por ejemplo, Localidad.
  5. Información inferida: Una funcionalidad que me llama mucho la atención que no se incorpore con más frecuencia es la detección de la provincia directamente del codigo postal, si pongo 28003 que me identifique directamente MADRID… porque tengo que seleccionarlo si es claramente deducible??!!…. por no hablar de la localidad que también lo és, aunque comprendo que esto puede tener variantes que lo compliquen.
  6. Claridad de información: Es muy muy importante ayudar en aquellas tareas que pueden resultar más tediosas o complicadas a los usuarios con mensajes claros. Por ejemplo en el campo “Tipo de Via” aparecen algunos tipos, en otro espacio (continuo pero no al lado) hay un enlace con el texto “otros tipos de via”…. Creo que se debería haber incorporado en el desplegable el tipo “otros tipos” y un mensaje la lado “en caso de no encontrar el tipo de vía seleccione ‘otro tipo'”…. Incluso es susceptible de quitar hasta el mensaje si aparece este tipo “otros” en el desplegable.

    Aun es más complicado de entender la gestión de localidades, donde en el propio campo aparece un texto en “disabled” pinche en ‘mostrar localidades’… y ‘mostrar localidades’ está antes de éste mismo campo… como alternativa propondría introducir el propio link dentro del campo ‘seleccionar localidad’.

  7. Tamaño de campos: Es importante que el campo esté preparado para albergar la información, aunque sabemos que es muy dificil cubrir el 100% de lo casos sí podemos aproximarnos, en éste formulario el nombre de la vía puede ser insuficiente. El Nombre como vemos es más grande que los apellidos puesto que es más comun los nombres compuestos que los apellidos compuestos lo cual es sintoma de haber tenido ésta casuistica en cuenta, aunque no descartaría esta ultima opción y agrandaría los apellidos al menos hasta alinear con el resto de campos.
  8. Obligatoriedad y señalización: Es una buena práctica marcar aquella tipología menos común en los formularios, si hay menos campos obligatorios se marcarán éstos y si son los opciónales se indicarán éstos últimos, en el caso que nos ocupa se cumple con corrección esta buena practica, aunque quizas cambiaria el icono o el color para hacerlo menos llamativo de un primer vistazo.
  9. Posición de los botones: Hay multitud de casos y opciónes para la disposición de la botonera, pero en caso de formularios solo si estos son corridos en vertical , es decir, un campo debajo de otro y así sucesivamente pondría el boton a la izquierda… como digo es digno de estudio, y los hay a cientos.

Después de estudiar estas pautas y hacer un breve boceto de las mejoras, propondría este formulario como más usable:

marzo 30, 2011 / martinbeltran

AutoComplete dinámico MVC 3.0 y jQuery

En muchas ocasiones disponemos de formularios con campos de entrada cuyos valores corresponden con una tabla maestra, pongamos un ejemplo un campo ‘Persona Responsable’ cuyos valores son los disponibles en una tabla ‘empleados’ de nuestro sistema de información. En estos casos podemos ofrecer al usuario una pantalla de busqueda enlazada con el campo, con campos de busqueda como nombre, apellido 1, apellido 2, etc… o bien, un campo autocomplete donde al empezar a escribir se mostrará una lista denombre coincidentes.

En este post vamos a ver como implementar éste tipo de campos utilizando jQuery y su extensión de funcionalidades de Interface de Usuario (UI), pero haciendo que el control busque en nuestra base de datos, para dinamizar los resultados.

Requisitos Previos:

  1. Librería jQuery
  2. Librería UI jQuery con el autocomplete
  3. Hoja de estilos jQuery

Hacerlo funcionar:

Vamos a establecer dos integrantes de nuestro ejemplo, por un lado el formulario y por otro la fuente de información,veamos:

  1. Fuente de Información

    En esta parte solo tendremos que definir un metodo en un controlador, en nuestro ejemplo PersonasController, que nos devuelva los registros coincidentes con la busqueda formateados con JSON.

    No mostramos el codigo de FindbyNombre porque no es interesante, utilizar de vuestro modelo los metodos de busqueda que considereis para devolver estos datos.

public
ActionResult Find(string term)

{

term = ‘%’ + term + ‘%’;


return Json(Personas.FindbyNombre(term), “personas”, JsonRequestBehavior.AllowGet);

}
  1. Formulario

    Aquí está toda la potencia del caso, el objeto automplete de jquery permite asociarle la función a una caja de texto de nuestro formulario para desplegar toda la funcionalidad, podeis ver toda la documentación de éste objeto aquí, en éste ejemplo voy a resumir a lo que necesitamos exclusivamente que son

  • Propiedad Source: aquí defines el origen de datos que quieres usar, puede ser un array estático, un array que devuelva una función… y lo que nos ocupa hoy… puede ser una llamada ajax a un web service, un controlador…etc..
  • Metodo Select(): Salta cuando pulsas enter sobre un registro o pinchas con el ratón sobre él.

 

Visto esto solo tenemos que incorporar las siguientes lineas de código en nuestro formulario:

$(“#txtNombrePersona“).autocomplete({

source: function (request, response) {

$.ajax({

url: ‘@Url.Action(“Find”, “Personas”)‘,

dataType: “json”,

data: {

term: request.term

},

success: function (data) {

response($.map(data, function (item) {

return {

label: item.nombre + ” ” + item.apellido1 + ” ” + item.apellido2,

codigo: item.codigopersona

}

}));

},

error: function (msg) {

alert(‘error’ + msg.toString());

}

});

},

minLength: 2,

select: function (event, ui) {

//Aqui recogemos el objeto ui que tiene la información del elemento selecciónado

// podemos acceder a la información por ui.nombre, ui.codigopersona…. y hacer lo que queramos!!

},

open: function () {

$(this).removeClass(“ui-corner-all”).addClass(“ui-corner-top”);

},

close: function () {

$(this).removeClass(“ui-corner-top”).addClass(“ui-corner-all”);

}

});

 

 

Espero que os sea de utilidad, para mi me abre un mundo de posibilidades de mejora de interface.

 

 

 

 

 

 

 

 

 

 

 

marzo 14, 2011 / martinbeltran

Elementos gráficos de un cuadro de mando (I)

Desde los comienzos de éste concepto se ha intentado proporcionar una herramienta que permita visualizar, rapidamente, el estado de cumplimiento de los indicadores establecidos por la gerencia empresarial. Para mí un CdM es el paradigma de un capitan de yate que tiene una ruta trazada y puede ver en su panel de instrumentos en que medida se cumple la ruta, que diferencias existen, como puede corregirlas y el estado de aquellos factores que pueden alterar el plan establecido… a fin de cuentas creo que hemos intentado simular un panel de instrumentos cotidiano:

Obviando cuestiones como ¿qué medimos?, ¿Qué parametros establecemos?, ¿Qué ejes/perspectivas controlar?…. veremos que posibilidades gráficas tenemos disponibles para distintas necesidades de medición.

En primer lugar tengo que decir que personalmente no entiendo los cuadros de mandos exclusivamente semafóricos ni tabulados, porque tanto unos como otros son vistas parciales de la realidad que deben complementarse. Por un lado los semaforos u otros gráficos de estado pueden ocultar errores de parametrización que no veremos si no hacemos drill-down cosa imposible en CdM estáticos o impresos, y por otro lado las tablas dificilmente permiten la rapidez necesaria para evaluar el estado del indicador.

En segundo lugar entiendo como valor real de un CdM la posibilidad de ver el estado general en una sola hoja o pantalla, de tal forma que los CdM de cientos de hojas pierden el verdadero valor de la información agil, una cosa es un informe de explotación y otra distinta un CdM.

En este post veremos algunos elementos gráficos y sus posibles utilidades tanto en CdM como en otros informes.

  • Relojes/Velocímetros: Es correcto utilizar este elemento para indicar valores discretos sin memoria, es decir, aquellos sobre los que no necesitamos ver una evolución del valor que representa solo el su valor actual. Podemos encontrar distintas variantes, aunque dividiremos este elemento en dos grandes bloques:
    • Standars: La información mostrada no es valorada, es decir, muestra el dato pero no un baremo de si está dentro de lo esperado, bueno o malo:
    • Semafóricos: Se añade además una escala de colores para indicar en la idoneidad del dato, si es bueno o malo:

  • Semáforos: La característica de este elemento es mostrar visualmente “algo” sin indicar el valor que lo condiciona, es por tanto ideal para indicar estados. Aunque hay multiples posibilidades que pueden alterar ésta perspectiva prefiero ceñirme a lo que representan en su concepción cada elemento, pero como digo pueden combinarse con otros que extiendan su utilidad.

  • Gráficos Lineales: Este elemento tiene poco que describir puesto que estamos familiarizados con él por su uso en multiples ámbitos, pero a modo de descripción podemos decir que son útiles para:
    • Representar la evolución de un dato
    • Comparar con la evolución de otro dato
    • Combinar con varios valores en un solo gráfico

  • Mapas Geográficos: Normalmente se utilizan para localizar elementos geoposicionados pero con algún indicador más (colores, iconos, etcc) que den información sobre su estado, por ejemplo un comparativo de tiendas con el resultado en ventas.


  • Mapas de Calor: Son interesante para elementos con más de 5-6 items a comparar, aunque a veces ésta comparativa pueda no ser tan interesante, y teniendo en cuenta que se pueden utilizar varias dimensiones como el tamaño, el color, etc… para ésta comparativa.

    Aquí podeis ver un ejemplo de mapa de calor muy bueno: http://finviz.com/map.ashx?t=sec

  • Barras de progreso: Con el objetivo de comparar un valor con su máximo, éste elemento funciona bien para éste tipo de visualizaciónes como por ejemplo la cantidad facturada de un presupuesto, la evolución temporal de un proyecto, etc… no tienen porque indicar si la evolución es correcta.


    Continuaremos proximamente!!