Visto y no visto: una parte ocultable en una página web

Los usuarios, esas ricuras

Me encantan los usuarios contradictorios. Al fin y al cabo, esas contradicciones no dejan de reflejar la naturaleza humana, así que no hay por qué asustarse. Hay que saber escucharlos, y darles lo que realmente quieren o necesitan, que muchas veces no coincide exactamente con LO QUE TE PIDEN.

En esta ocasión, por un lado me piden que les incluya un texto fijo en una página web, unas instrucciones que deben ser utilizadas y tenidas en cuenta por todos los que utilizan la página. A veces la aplicación web les devuelve determinados resultados y los usuarios tienen que consultar en la documentación en papel, unas normas complejas que en los últimos meses están cambiando bastante (dependen de unas leyes un tanto "inestables"). Tener la información a la vista en la página, mientras usan el programa, les evitaría tener que abandonar la página para sumergirse en los papeles.

Pero, por otro lado, tener delante el texto, todo el tiempo, les molesta. Funcionalmente, no aporta utilidad al programa. No se necesita consultar siempre, sólo si el programa devuelve determinados datos, para dar explicaciones, para realizar procesos manuales... Así que, mientras unos me piden que el texto esté a la vista, otros me pregunta si no se puede quitar, ya que les "ensucia" la página.

O sea, resumiendo, quieren que las instrucciones se vean, pero al mismo tiempo, no se vean. Qué ricos.

Fig. 1. Que se vea, pero que no se vea. 

Foto: Jorge A. Loffler, Flickr, licencia CC BY-SA 2.0

Texto ocultable

Para resolver esto se pueden dar muchas soluciones, y seguro que los especialistas en interacción persona-ordenador lo han estudiado hasta la saciedad. El tema de dónde ubicar un elemento en la interfaz de usuario no es algo para tomarse a la ligera, sobre todo en aplicaciones que tengan cierta repercusión, con un alto número de usuarios. 

Una opción sencilla sería poner las instrucciones en una página aparte, y en la página principal poner un enlace, que se abra en una nueva ventana o pestaña. Sin embargo, en esta ocasión, yo me voy a limitar a una solución también muy simple y bastante efectiva, a juzgar por el feedback que me han dado los usuarios.

La técnica consiste en comenzar con el texto oculto en la página, y un botón que permita visualizarlo o volver a ocultarlo a placer. También se podía haber hecho justo al contrario: empezar con el texto visible, y que el usuario pueda ocultarlo. La elección de cualquiera de las dos alternativas depende de la naturaleza y necesidad del texto. En mi caso, es un texto que sólo hay que consultar de forma ocasional, con lo que interesa que la mayor parte del tiempo esté oculto. Por eso al cargar la página el texto no se muestra. Si fuera un mensaje de lectura obligatoria, para que nadie pueda decir que no lo ha visto, por ejemplo, pues comenzaría con el texto visible y el botón permitiría ocultarlo (y visualizarlo de nuevo, claro). En fin, estos detalles parecen tonterías pero muchas veces son tonterías importantes, así que si uno se encuentra situaciones similares, es buena idea dedicarle una pensada de unos minutos o, mejor aún, preguntarle a los usuarios, que son quienes al fin y al cabo van a valorar la utilidad del software.

Pasando ya a lo meramente técnico, nos basaremos en tres cosas:

• identificadores de elementos
• código HTML de un elemento (propiedad innerHTML)
• botón con una función Javascript asociada

Identificadores de elementos

Prácticamente cualquier elemento de una página puede tener un identificador (un id) que podemos utilizar para hacer referencia a él desde código Javascript. Esto incluye también a los párrafos, así que en vez de escribir

<p>Párrafo de texto</p>

Escribiremos

<p id="mensaje">Párrafo de texto</p>

Para poder manipularlo desde el código Javascript, accederíamos a ese elemento con la llamada

document.getElementById("mensaje");

Queremos comenzar con el texto oculto, lo que equivale a decir que el texto inicial del párrafo esté vacío. Debajo de ese párrafo pondremos un botón y debajo del botón, el resto de la página:

1 <p id="mensaje"></p>  
2 <button id="bInfo1" onclick="botonPulsado()">Mostrar mensaje</button> 
3 <p>Aquí va el resto de la página</p>

Como puede verse, el botón responderá al clic invocando a la función botonPulsado, que mostraremos más adelante.

Código HTML

Por otro lado, algunos elementos DOM tienen la propiedad innerHTML, que es un valor textual que representa el código HTML asociado a ese elemento. En el caso de un párrafo, es el texto HTML que se mostrará dentro. Esta propiedad puede ser tanto de lectura como de escritura, así que podemos recuperar el valor del párrafo o podemos asignarlo. Por ejemplo:

texto = "hola, caracola";

document.getElementById("mensaje").innerHTML = texto;

La función Javascript

Por último, necesitaremos una función que cambie el contenido del párrafo en cada pulsación del botón, mostrando u ocultando el texto, alternativamente. Esto se hará comprobando si el párrafo en ese momento está vacío o no:

    if (document.getElementById("mensaje").innerHTML == "") {

        document.getElementById("mensaje").innerHTML = texto;

        document.getElementById("bInfo1").innerHTML = "Ocultar mensaje";

    } else {

        document.getElementById("mensaje").innerHTML = "";

        document.getElementById("bInfo1").innerHTML = "Mostrar mensaje";

    }

Con esto, ya tenemos las tres piezas de nuestro pequeño puzzle. Así quedaría la página completa:

01 <HTML>  
02 <HEAD> 
03 <script> 
04 function botonPulsado() { 
05 texto = 'Esto es un bloque de texto <br>\  
06 que debería poder mostrarse u ocultarse <br>\  
07 según lo desee el usuario. Por ejemplo, unas<br>\  
08 instrucciones de cómo actuar en determinados casos,<br>\  
09 o unos teléfonos de contacto de emergencia...<br>\  
10 En general, cualquier información útil que tenga que<br>\  
11 estar rápidamente accesible<br>'  
12 if (document.getElementById("mensaje").innerHTML == "") { 
13 document.getElementById("mensaje").innerHTML = texto;  
14 document.getElementById("bInfo1").innerHTML = "Ocultar mensaje";  15 } else { 
16 document.getElementById("mensaje").innerHTML = ""; 
17 document.getElementById("bInfo1").innerHTML = "Mostrar mensaje"; 18 }  
19 }  
20 </script> 
21  
22 </HEAD> 
23 <BODY> 
24 
25 <H1>Página importantísima, con un mensaje secreto</H1>  
26  
27 <P ID="mensaje"></P>  
28 <BUTTON ID="bInfo1" ONCLICK="botonPulsado()">Mostrar mensaje</BUTTON>  
29 <P>Aquí va el resto de la página</P>  
30  
31 </BODY>  
32 </HTML>

Listado 1. La página al completo

Y si la probamos veremos el resultado de las imágenes:

Y una vez pulsado el botón

Unos comentarios finales

Como vemos, la técnica de mostrar y ocultar un elemento es muy sencilla, pero también muy versátil. Se puede utilizar, entre otras cosas, para

• textos de instrucciones, notas legales o mensajes de ayuda para el usuario
• bloques de iconos
• una sección de enlaces corporativos
• ...y cualquier otra cosa que se os ocurra y para la que tenga sentido verse y ocultarse

Como curiosidad, os comento que un par de usuarios me han felicitado efusivamente por el resultado. Para ellos, resulta muy práctico olvidarse de mirar los papeles cuando están en la página y tienen que consultar la normativa. La técnica empleada en la página, desde un punto de vista técnico, es una trivialidad, pero oyendo sus alabanzas parece que uno les hubiera hecho la aplicación del siglo, ya que han quedado muy satisfechos.

Esto viene a recordarnos que no todo es calidad técnica o calidad objetiva, sino que también es muy importante la calidad percibida por el usuario. De hecho, podemos rompernos la cabeza ideando virguerías técnicas y haciendo que nuestro programa sea una maravilla tecnológica, pero si los usuarios no lo perciben así, entonces quizás no tiene tanta calidad. O sin quizás.

Quien de verdad puede valorar algo es quien lo usa. Esto no es una verdad absoluta (recordemos el caso de los coches de Volkswagen: los usuarios podían estar satisfechos con la conducción, comodidad... pero su calidad tecnológica no llegaba a las exigencias legales en materia de emisiones), pero es importante tener en cuenta qué cosas podemos dar que aporten mayor valor a los usuarios de nuestras aplicaciones.

Esas cosas que aportan valor no siempre han de suponer un esfuerzo técnico muy alto, así que es bueno estar atentos para detectarlas y poder darlas. Así, con poco esfuerzo podemos aumentar el nivel de satisfacción de nuestros usuarios. Que los usuarios estén contentos es bueno para ellos y mejor aún para nosotros.

Bueno, aquí corto ya el rollo. A seguir programando.Y que los usuarios de vuestros programas os lo agradezcan, al menos ahora que se acerca la Navidad.

María Jesús y su acordeón (o cómo aprovechar mejor la interfaz de usuario)

Habréis observado que muchas aplicaciones y páginas web, en particular en su versión para teléfonos móviles, organizan la información de una forma muy útil, que consiste en agrupar secciones de información bajo un título, de manera que cada uno de esos bloques se puede expandir o contraer. Eso permite aprovechar mejor la interfaz de usuario y agiliza la organización de la información en pantalla. Este tipo de interfaz se denomina "acordeón", por el hecho de que cada sección se puede expandir y contraer como el cuerpo de dicho instrumento.

Fig. 1. Las secciones del acordeón contienen info "en su interior"

Al desplegar la sección de Historia

Fig. 2.Al desplegar una sección, el icono cambia

En la documentación de jQuery sobre los "acordeones" [http://jqueryui.com/accordion/]se describe en detalle cómo utilizar este tipo de interfaz, pero aquí os dejo una brevísima introducción para que en un minuto podáis tener algo así funcionando con tres sencillos pasos:

1) Como siempre, crear una página e incluir en ella la referencia a jQuery

 1 <head>
 2 ...
 3     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 4     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 5     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 6 ...
 7 </head>

2) Crear una división (DIV) que contendrá todas las secciones del acordeón. Cada sección ha de ir precedida por una etiqueta de cabecera (H1, H2... H6). Si hacéis pruebas, veréis que da igual usar H1 que H2 que H3... e incluso se pueden mezclar indistintamente, que jQuery las usará como títulos de las secciones.

 1 <body>
 2 ...
 3 <div id="bloque_acordeon">
 4   <h1>Sección 1. Mis personas preferidas</h1>
 5     <div>
 6     <p>
 7     Esto está dentro del bloque1
 8         <ul>
 9             <li>Claudia Chífer</li>
10             <li>Mariano Gandhi</li>
11             <li>Jason Voorhees</li>
12         </ul>
13     </div>
14 
15   <h1>Sección 2. Mis animales preferidos</h1>
16     <div>
17     <p>
18     Esto está dentro del bloque2
19         <ul>
20             <li>Lassie</li>
21             <li>El pollo a la brasa</li>
22             <li>Claudia Chífer</li>
23         </ul>
24     </div>
25     
26   <h1>Sección 3. Mis plantas preferidas</h1>
27     <div>
28     Esto está dentro del bloque3
29         <ul>
30             <li>El algarrobo mediterráneo</li>
31             <li>María</li>
32             <li>Claudia Chífer</li>
33         </ul>   
34     </div>
35     
36 ...
37 </body>

y 3) Incluir el código jQuery que hace que esta sección funcione como un acordeón. Una simple llamada a una función

 1   <script>
 2   $(function() {
 3     $("#bloque_acordeon" ).accordion();  
 4   });
 5   </script>

Hay un detalle que a mí me gusta, y es el hecho de que la primera sección se pueda cerrar sin tener que abrir ninguna otra. Para esto, basta con añadir dentro de la función "accordion" la propiedad "collapsible: true", quedando así el paso 3:

 1   <script>
 2   $(function() {
 3     $("#bloque_acordeon" ).accordion(
 4         { collapsible: true }
 5     );
 6   });
 7   </script>

Pues aquí está todo junto en esta plantilla que podéis adaptar a vuestras necesidades:

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4     <title>Ejemplo de un acordeón con jQuery</title>
 5     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 6     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 7     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 8   <script>
 9   $(function() {
10     $("#bloque_acordeon" ).accordion(
11         { collapsible: true }
12     );
13   });
14   </script>
15   
16 </head>
17 
18 <body>
19 Organizar la interfaz de usuario con un "acordeón"
20 <div id="bloque_acordeon">
21     <h1>Mis personas favoritas</h1>
22     <div>
23         Esto está dentro del bloque1
24         <ul>
25             <li>Claudia Chífer</li>
26             <li>Mariano Gandhi</li>
27             <li>Jason Voorhees</li>
28         </ul>
29     </div>
30     
31     <h1>Mis animales favoritos</h1>
32     <div>
33         Esto está dentro del bloque2
34         <ul>
35             <li>Lassie</li>
36             <li>El pollo a la brasa</li>
37             <li>Claudia Chífer</li>
38         </ul>
39     </div>
40     
41         <h1>Mis plantas favoritas</h1>
42     </span>
43     <div id="contenido_bloque3" style='display: none'>
44         Esto está dentro del bloque3
45         <ul>
46             <li>El algarrobo mediterráneo</li>
47             <li>María</li>
48             <li>Claudia Chífer</li>
49         </ul>       
50     </div>
51 </div>
52  
53 </body>
54 </html>

Cuenta atrás en una página web (Javascript) para redirigir a otra página

Útil para mostrar un aviso durante unos segundos (por ejemplo, "Este mes finaliza el plazo para presentar la declaración de la renta") y luego cargar la "verdadera" página de inicio del sitio web.

Guardar el texto siguiente un un fichero con nombre "atras.htm"

<html>
<head> <title> Ejemplo de cuenta atrás </title> </head> 
<body> <h1>Ejemplo de cuenta atrás</h1>
<form name="redirect">
<h2>Vamos contando...
<span id="Segundos"></span> 
<input type="hidden" size="3" name="contador">
segundos restantes
</h2>
</form>

<script language="javascript">
var targetURL="atras.htm" //URL A LA QUE DIRIGIR. Redirige a sí misma
var cuentaAtras=10 //SEGUNDOS A CONTAR
var segundoActual = document.redirect.contador.value=cuentaAtras+1
function contarParaRedireccionar(){
	if (segundoActual!=1){
		segundoActual-=1
		var textoSegundos = document.getElementById("Segundos");
		textoSegundos.innerHTML =segundoActual
	} else {
		window.location=targetURL
		return
	}
	setTimeout("contarParaRedireccionar()",1000)
}
contarParaRedireccionar()
</script>

<p>Si no se le redirige automáticamente, pulse <a href="atras.htm">aquí</a></p>
</body>
</html>