|

Comentarios anidados con PHP y MySQL

Los comentarios anidados es algo muy común entre los foros o blogs. Realizarlo es bastante sencillo, aunque quizás hacerlo de la forma más eficiente puede tener su dificultad.
En el post que referencio, nos explican paso a paso cómo hacerlo: estructura de la BD, formulario, consultas, …
La solución es de las sencillas, se trata de que cada comentario tenga un campo que enlace con el comentario padre, y luego a la hora de recuperar los comentarios, hay que ir realizando consultas de obtención de comentarios por cada comentario padre, salvo en el primer caso que se buscan los comentarios iniciales.
HOW-TO: Multi-level Comments In PHP

Introducción a una buena usabilidad

La usabilidad es algo muy importante que siempre hay que tener en cuenta , entre otras cosas porque se diseña para los usuarios y éstos deben estar cómodos visitando nuestra página.
Para los que necesiten empezar a aprender, el documento que pasamos a continuación introduce algunos de los aspectos importantes. Pero empieza diciendo algo importante: sobre el tema de usabilidad es muy difícil hacer algo nuevo, por lo que es mejor que no pierdas el tiempo inventando, copia de los grandes, que gastan mucho dinero en hacer que sus sitios sean usables.
Entre los consejos que da, trata el tema de los breadcrumbs (barra de navegación), indicando que debe ser la misma que los menús, no debes inventarte una navegación nueva, y que la página actual no debe tener enlace.
Sobre las pestañas indica que debe haber solamente una fila, y en el caso de que haya dos, la segunda debe ser dependiente de la primera (tipo submenús) y quedar diferenciadas en el diseño (por ejemplo con distintos colores).
De los enlaces dice que lo mejor es seguir los estándares, que sean azules y subrayados y que los enlaces visitados también se diferencien. Aunque si no lo quieres hacer así (lo más normal), deben ser claramente diferenciables del texto normal y si se usan imágenes, que estas cambien al pasar el ratón sobre ellas.
De los servicios que acortan URLs no habla demasiado bien, pero yo creo que su uso es muy correcto en determinados escenarios, sobre todo si el enlace solo se usa para ir a un contenido que se ha descrito anteriormente.
En resumen, un documento muy interesante para ir empezando con la usabilidad.
Introduction to Good Usability
Vía / Css Globe

8 consejos para mejorar la usabilidad

8 buenos consejos para que podamos mejorar la usabilidad de nuestras aplicaciones web, algo que a veces se ignora pero que hace sufrir a algún que otro usuario.

  • Cuanta más interacción se necesite para realizar una tarea, más difícil se vuelve: cuando se necesite realizar una acción hay que evitar pedir todas las posibles características de la acción, simplemente pide lo estrictamente necesario. Por ejemplo, un buscador, puedes pedir que te ofrezcan la categoría, el número de resultados, el criterio de orden, … o simplemente pedir la palabra a buscar y si se quiere ofrecer una búsqueda avanzada para quien quiera refinar la búsqueda.
  • Cuanto mayor tiempo de concentración se necesite para realizar una tarea, menor es la usabilidad: intenta que la aplicación responda lo más rápido posible para que el usuario mantenga su atención.
  • Cuanto más tenga que trabajar el usuario, menos efectiva es la interfaz: lo que nos lleva a otro punto, haz la interfaz intuitiva.
  • No vayas en contra de lo que espera el usuario: el usuario está acostumbrado a una serie de herramientas: botón para volver, recargar, … Diseña la aplicación teniendo en cuenta que el usuario está acostumbrado a algo y es lo que espera encontrar. El mal uso de Ajax a veces va en contra de esta premisa.
  • Las páginas de error no gustan: nada es peor que mostrar uno o dos errores al usuario al mismo tiempo.
  • Permite al usuario modificar la interfaz: a todo el mundo le gusta modificar los colores y el aspecto del entorno de trabajo. Que la gente se sienta cómodo con los colores es también algo a tener en cuenta.
  • No esperes que los usuarios lean las instrucciones: debido a ello, la interfaz debe ser lo más parecido a lo que se está acostumbrado, para que cuando se encuentren con lo que tienen que hacer sea igual o muy parecido que lo de siempre.
  • Mantén al usuario libre de errores: por ejemplo, una página 404 no dice nada, en vez de ello ofrece alternativas.

5 (+3) tips to increase web application usability

Vía / dzone

|

Basar el diseño del historial del navegador en la memoria del usuario

La usabilidad del historial del navegador podría ser mucho más útil si se rediseña pensando en cómo funciona la memoria del usuario. Es la acertada reflexión que hace Alex Faaborg, diseñador de experiencia de usuario en Mozilla y miembro del equipo de desarrollo de Firefox 3.

El objetivo del usuario cuando va al historial se podría resumir en algo como: "Yo vi algo en algún sitio hace poco y quiero volver ahí". Lo que normalmente hacemos para volver a encontrar esa información es ir al sitio donde lo vimos y recrear las acciones realizadas para volver a encontrar la información: esto suele ser más sencillo y rápido que usar el historial del navegador.

El problema es que el historial funciona mostrando una lista de titulos de páginas, además ordenados por orden alfabético y casi nadie se fija en el título de una página que, además, suele ser poco descriptivo.

Sin embargo hay elementos de la interacción con el navegador que son más fáciles de recordar:

  • Acciones específicas que hizo: recordamos más facilmente lo que hemos hecho que dónde hemos estado. Por ejemplo: yo busqué tal palabra, guardé tal sitio en mis favoritos o ví el enlace en tal blog.
  • El aspecto del sitio donde estuvimos: la ciencia cognitiva ha demostrado repetidamente que somos mucho mejores recordando imágenes que textos, especialmente en tareas de reconocimiento.
  • Palabras o frases que leímos
  • Cuándo hicimos algo: sabemos que hemos hecho algo hoy, ayer o hace varios días. No sabemos lo que hicimos hace exactamente 5 días o hace 7 días.

En base a estas premisas, algunas hipotéticas, pero muy lógicas, Faaborg hace una propuesta de rediseño del historial que se puede ver en este prototipo:

http://sentidoweb.com/img/2007/01/newHistory.jpg_large-thumb.jpg

y que tendría estas características:

  • Poder buscar sobre las búsquedas que has realizado
  • Estaría organizado sobre segmentos de tiempo y acciones realizadas (buscar, abrir pestaña, pulsar link…). Cada segmento se agruparía sobre la acción que disparó la visualización de una serie concreta de páginas.
  • Añadiría al título de la página una imagen en miniatura de la misma.

Una interesante propuesta que es posible que se convierta en una extensión para Firefox del laboratorio de Mozilla

Vía / Blog de Alex Faaborg

| |

Laboratorio: desplegar mapa del sitio mediante Ajax

Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librería jQuery).

Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).

Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).

Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librería jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.

También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.

Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:

<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>

También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código debería haber la siguiente función:

<?php require('secciones.html'); ?>

Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.

window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}

El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:

  • Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para así no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
  • La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
  • hide() oculta un elemento HTML.
  • show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
  • mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
  • attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
  • attr(código) añade el atributos y valores a un elemento.
  • slideDown despliega una capa hacia abajo.
  • slideUp repliega una capa hacia arriba.

Código fuente

| |

Endless.com: Experimento de Amazon en comercio electrónico

endless_logo.pngEndless es una nueva tienda de Amazon, dedicada a la venta de zapatos y bolsos, en la que destaca una interfaz de usuario rica y novedosa a base de DHTML y AJAX.
El sitio merece una exploración en profunidad pero un primer recorrido ya nos permite ver detalles alentadores:

  • Explorador visual de los artículo con zoom
  • Filtros de productos por marcas, color, tamaño o precio mediante AJAX (espectacular el de precios)
  • Paginación AJAX

http://sentidoweb.com/img/2007/01/endless_cap_2-thumb.png
Una interfaz de usuario realmente lograda, ejemplo de lo que la web 2.0 está consiguiendo y posiblemente una referencia en patrones de diseño en comercio electrónico.
Una pequeña crítica: se echa de menos un poco de enfoque social; al menos comentarios sobre los productos.

ModernCaptcha: captcha con usabilidad

Si el otro día mostrábamos un ejemplo de CAPTCHA, ahora mostramos un ejemplo de CAPTCHA en el que no se trata de reconocer un texto deformado, sino de asociar un logotipo a un nombre. Así por ejemplo saldría el logotipo de Sentido Web y el usuario debería seleccionar “Sentido Web” de una lista de nombres.
La idea es buena, ya que un impedido visual tendría problemas para reconocer el texto deformado, que ya de por sí nos cuesta reconocer al resto. Pero le encuentro un problema, se supone que el CAPTCHA está hecho para que procesos OCR automáticos, pero o bien se tiene una lista de logotipos enorme, o se podría reconocer la imagen del logo con el nombre correspondiente.
Así, sin pensarlo mucho, se podría hacer la media de cada componente RGB de cada pixel de la imagen para asociarla a cada nombre, claro que si la imagen se cambiara de tamaño o se rotara se evitaría este “ataque”, aunque sería ponerse a buscar otro algoritmo más eficiente, que seguro que se pueden encontrar por internet.
ModernCaptcha – when captcha meets usability
Vía / dzone

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

| |

Cómo hacer una tag cloud ‘perfecta’

tagcloud.pngAlgo típico de la Web 2.0 son las tag clouds o nube de etiquetas, las cuales muestran las etiquetas definidas en nuestra sitio, variando el tamaño de la letra según la relevancia del tag.
Se trata de algo muy vistoso y que cumple bien su objetivo, acceder a lo más importante de forma rápida. El problema está cuando queremos implementar nuestra propia tag cloud (claro, que nos podemos dejar de romper la cabeza y buscar alguien que ya lo haga). Por ejemplo, si la nube tiene scroll, ya sea por la cantidad de tags o por la ventana del usuario, la finalidad de que los más destacados sean los más visibles puede fallar si alguna etiqueta importante queda oculta por el scrolling.
Con este problema y muchos otros se ha encontrado Kevin Hoffman y por ello se ha creado un documento en el que explica cómo resolver esos problemas (o al menos intentarlo).
Whitepaper : In Search of the Perfect Tag Cloud
Via / dzone

| |

Laboratorio: filtrado de tablas

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
filtrado-tablas.png

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “líquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
filtro.gif

Read More “Laboratorio: filtrado de tablas”