Ir a contenido
Está usando una versión antigua de su navegador. Este sitio web no está preparado para su visualización en navegadores obsoletos.
Por favor, por su seguridad, instale un navegador más actualizado y seguro.

Navegador Internet Explorer 8  Navegador Google Chrome  Navegador Mozilla Firefox
 

blog

04 ene

Carritos de la compra abandonados

1 comentario Opinión , Usabilidad , e-commerce

Hace tiempo leía en Twitter a @furilo:

 

 

Si todo el mundo abandonase sus carritos en el mundo real como lo hacen en la internet, no podrías entrar en el supermercado.

 

 

Y eso me hizo pensar: ¿es una tienda online equivalente a un supermercado? ¿Por qué la gente abandona el carrito? ¿Por qué no considerar abandonados los carritos aún vacíos? ¿En un e-commerce podemos hablar de compradores que "sólo venían a mirar"? ¿Qué puede aprender el e-commerce del comercio tradicional?


Seguir leyendo


01 sep

Notificaciones en el favicon

0 comentarios how-to , Programación , Javascript , Web

Muchas aplicaciones web usan el favicon para notificar eventos, como nuevos mensajes o nueva actividad. Uno de los ejemplos más claros es Gmail, aunque también otros como Facebook o Pinterest lo usan.

 

Hace poco encontré una clase Javascript que permite implementar esta funcionalidad en una web: Notificon. Con esta clase, el notificar al usuario, por ejemplo, que tiene un nuevo mensaje en nuestra aplicación web es coser y cantar.


Seguir leyendo


30 jul

Identificar qué proceso tiene abierto un puerto

0 comentarios Linux , how-to

Nota rápida para que no se me olvide: si se supone que hay un puerto ocupado por un proceso, pero no se sabe qué proceso, podemos identificarlo fácilmente:

 

$ sudo nc -l $PUERTO # Esto es para confirmar que el puerto está ocupado
$ sudo lsof -Pnl +M -i6 | grep $PUERTO

 

Esto nos devuelve, por ejemplo:

 

java      13983        0   52u  IPv6 456646354       TCP *:8080 (LISTEN)

 

Y de ahí podemos sacar toda la información del proceso usando su PID (el primer número):

 

$ sudo ps aux | grep $PID



24 jul

Git para repositorios compartidos

0 comentarios how-to , Programación , Git

Una de las grandes ventajas de Git es su potencia para el trabajo en grupo. Para poder usar Git de esta forma basta con un par de comandos para configurar el repositorio de forma que permita escribir a los usuarios autorizados.

 

Lo primero es crear los usuarios autorizados para que puedan conectar por SSH (es el método de conexión que utilizo en mis repositorios, por comodidad de configuración), y añadirlos a un grupo que será el que esté autorizado para escribir en el repositorio. Yo utilizo el grupo git-user para ello.

 

Después, ya sólo nos falta configurar el repositorio para permitir el acceso compartido. Para ello basta con cambiar el contenido del repositorio al grupo autorizado, y configurar el parámetro adecuado del repositorio:

 

$ cd /var/git/mirepositorio.git
$ sudo chmod -R g+ws *
$ sudo chgrp -R git-user *
$ git repo-config core.sharedRepository group

 

El último comando configura el repositor para el uso compartido por varios usuarios pertenecientes a un mismo grupo. Este grupo es el tienen asignados los objetos del repositorio, y hay que asegurarse de que todos los archivos y objetos pueden ser escritos por ese grupo (los dos comandos anteriores).

 

También se podría haber usado el parámetro world:

 

$ git repo-config core.sharedRepository world

 

Esto haría el repositorio visible a todo el mundo, lo cual es mucho más inseguro y sólo debe usarse cuando el sistema operativo no permita que los nuevos directorios creados tengan el grupo adecuado (NetBSD por ejemplo).

 

Cuando ya tenemos un repositorio personal, y queremos dar acceso a otros usuarios, lo más probable es que los usuarios vean este error al hacer un push:

 

Insufficient permission for adding an object to repository database

 

La forma de solucionarlo es ejecutando los comandos indicados anteriormente, ya que por defecto el repositorio de Git está configurado para no ser compartido (core.sharedRepository = false).



13 jun

Presentado Bicis Robadas.net

0 comentarios General , Web , Proyectos

En los últimos meses estoy viendo crecer exponencialmente los anuncios de bicis robadas. Las víctimas de los robos suelen avisarlo en foros, blogs, páginas de asociaciones, páginas de compraventa, etc. pero, aunque se quiera ayudar, resulta imposible recordar cada bici robada que has visto.



Por ello, he presentado una web que actúa como un censo de bicis robadas: www.bicisrobadas.net. Esta web permite a las víctimas de robos subir los datos y fotos de su bici, a la vez que facilita a cualquier persona el comprobar si una bici sospechosa está censada como robada.

Más información en la entrada del proyecto Bicis Robadas.

 
El propósito de esta web es tratar de ayudar en la recuperación de bicis sustraídas, llamando a la colaboración ciudadana y facilitando al máximo posible esta tarea.



31 may

Liberado SitemapHP

0 comentarios Programación , PHP , SEO , Web

En los proyectos web es importante asegurar un buen posicionamiento desde el principio, ya que una web mal posicionada es una web inexistente. Una de las herramientas de SEO son los sitemaps, archivos que contienen un listado de todas las páginas de un sitio, de forma que los buscadores puedan indexarlas sin tener que rastrear todos los enlaces de la web; estos archivos suelen generarse de forma automatizada según se añade nuevo contenido a la web.



He liberado la clase SitemapHP que hace exactamente eso: facilita al programador la tarea de generar sitemaps programáticamente. Puedes leer más información sobre SitemapHP, o ir directamente a descargarlo en el repositorio Github de SitemapHP.



11 abr

Adiós -9999px

0 comentarios how-to , Programación , CSS , Web , Diseño

Una técnica CSS muy extendida, casi básica, es la de reemplazar un texto por una imagen usando text-indent. Con esta técnica podemos transformar un enlace en un botón, o un aburrido título en un título con fuentes especiales o con un bonito diseño. Esto último es cada vez menos necesario ya que podemos usar fuentes propias con CSS3, pero para muchas otras situaciones el reemplazar texto por imagen sigue siendo una labor del día a día.

 

Hasta ahora usábamos la identación negativa del texto, a la vez que dábamos una imagen de fondo al elemento; así, conseguimos que se muestre la imagen pero el texto se desplaza fuera de la pantalla, siendo "invisible":

 

background: url("../images/boton.png") 0 0 no-repeat;
text-indent: -9999px;

 

Esto conlleva dos pequeños detalles, uno de rendimiento y otro de diseño:

  1. El navegador debe "dibujar entre bastidores" una caja de 9999 píxels cuadrados, o dicho más fácilmente, una caja inmensa. Esto consume memoria, y si en una misma página usamos varias veces esta técnica (varios botones, por ejemplo) el problema se multiplica.
  2. Al hacer clic en elementos con texto oculto aparecen esas horribles líneas (outlines, las "líneas de enlace") desde la izquierda de la página. Estas líneas se podrían ocultar con outline: 0; pero eso está prohibido si queremos que nuestra página sea accesible a personas con deficiencia visual.

 

La nueva solución

 

Un nuevo planteamiento para resolver esta situación, propuesto por Scott Kellum en Zeldman.com, identa el texto al mismo tamaño que la caja contenedora, pero al no hacer wrapping y esconder el overflow, el texto no aparece ni cambia el tamaño de la caja:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

 

Esta solución evita los dos problemas del clásico -9999px, siendo una solución mucho más elegante y limpia.



09 abr

La usabilidad del límite de caracteres

0 comentarios Usabilidad , Programación , Web , Diseño

En muchas webs encontramos cajas de texto con limitación de caracteres. Esto suele ser debido a limitación en el tamaño de datos que la web quiere soportar, o a limitación de espacio en pantalla. Cada desarrollador elige lo que cree más conveniente. Pero cuando esta limitación interfiere con la usabilidad del sitio web ya entramos en el ámbito del fallo, por no hablar de chapuza.

 

Esto viene a raíz de que hace un rato me he estado registrando en un nuevo servicio web de proyectos y servicios freelance, cuyo nombre mantendré en la intimidad. En el momento de introducir mi descripción, me aparece una caja de texto. Escribo una descripción que considero adecuada y... error, máximo 500 caracteres. Problemas de usabilidad:

 

  1. En ningún momento se indica que exista esta limitación, sólo aparece el mensaje de error al tratar de enviar un texto de más de 500 caracteres. Esto implica que alguien puede perder mucho tiempo redactando un texto que luego no podrá guardar.
  2. No hay un contador de caracteres, de forma que la única forma de saber si el texto ya es correcto o si aún es demasiado largo es pulsando una y otra vez el botón de Guardar y recibiendo, una y otra vez, el mensaje de error.

 

Estos dos problemas derivan en una experiencia de uso nefasta. El buen trabajo hecho en el resto del diseño del portal se va al traste cuando se trata de rellenar un apartado tan importante como es la descripción del usuario del servicio y te encuentras con esta... desfuncionalidad. Una de las reglas de oro de la usabilidad es no sorprender nunca al usuario. No se le puede pedir al usuario que rellene un texto y darle la sorpresa de que hay un límite de tamaño del que no se le ha informado previamente. Ni tampoco se puede pedir al usuario que vaya contando caracteres uno a uno.

 

Además, es un error tan fácilmente subsanable que confío en que lo arreglen cuanto antes mientras este servicio aún luzca el cansino cartel de Beta en su logo. Para arreglar este problema de usabilidad basta con poner un mensaje al mostrar la caja de texto, indicando el tamaño máximo del texto a introducir, y poner un contador de caracteres que de feedback al usuario de la longitud del texto que lleva escrito (hace más de un año que liberé maxlen, un plugin jQuery para dotar de esta funcionalidad -y más- a un textarea).



Creative Commons License Esta web http://alvaroremesal.net , su contenido, texto e imágenes está licenciado bajo una Licencia Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 España.

2017 - Álvaro Remesal Royo   Avisos legales

logo-acms