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.

Medir el tiempo de carga de una página en PHP

Insertar este código en la página:

 1 //al principio
 2 
 3 $hora_inicio = microtime(true);
 4 
 5 //... hacer cosas ...
 6 
 7 //al final
 8 
 9 $hora_fin = microtime(true);
10 $tiempo_total = round($hora_fin - $hora_inicio, 4);
11 echo "<div class=\"tiempocarga\">Página construida en " . $tiempo_total . " segundos </div>\n";

Como veréis, en el CSS he definido una clase para mostrar este mensaje con un tipo de letra más pequeño de lo habitual, pero vamos, esto va a gusto del consumidor

 1 .tiempocarga {
 2     font-family: Arial, Helvetica, sans-serif;
 3     color: #606680;
 4     font-size: 8pt;
 5     text-align: center
 6 }

Limitar el acceso a una página web por IP mediante el fichero .htaccess

En la última entrada, os proponía como ejercicio cómo limitar el acceso a una aplicación web mediante el uso del fichero .htaccess (propio de Apache y otros servidores web imitadores) a determinadas direcciones IP. Bueno, por si alguno no lo ha sacado, es tan sencillo como añadir al fichero .htaccess unas líneas tal que así:

… otras cosas…

order deny,allow

deny from all

allow from 10.15.xx.yy

allow from 10.15.xx.zz

…

…

Si uno intenta acceder desde una dirección que no se encuentra en la lista, obtendrá un mensaje similar a este: 

Otra cosa que también puede interesar a veces es tener un subdirectorio, dentro del directorio de la aplicación web, en el que queramos tener información (ficheros de datos, configuración, imágenes…) pero no queramos permitir que nadie acceda a esos ficheros a través del navegador (accederemos nosotros mediante código). En esos casos, es suficiente con poner ahí un fichero .htaccess con una única línea:

Deny from all

En este caso, el mensaje sería algo similar a

Si os fijáis, aunque el número del error es el mismo (403), los mensajes de descripción son ligeramente diferentes. ¿Alguien sabe por qué?

En estos dos casos, el fichero .htaccess no necesita ir acompañado del fichero de usuarios / claves (que hemos llamado htpasswd durante estas explicaciones, aunque este no ha de ser necesariamente su nombre real)

Limitar el acceso a una página web mediante usuario y clave

Como ya dije en una entrada anterior, una forma de incrementar un poco la seguridad de nuestras aplicaciones web consiste en limitar el acceso a la página por diversos medios. En aquella entrada explicaba cómo restringir con PHP el conjunto de direcciones IP a las que permitimos la conexión, cosa que puede venir particularmente bien en entornos controlados (corporativos, nuestra red doméstica, académica…).

Otra posibilidad muy rápida de poner en marcha consiste en utilizar una pareja que se lleva muy bien entre sí: los ficheros HTACCESS y un fichero de usuarios / claves (HTPASSWD). Estos ficheros se popularizaron con el servidor web Apache, pero hay otros servidores web que también los utilizan, según he leído (yo sólo los he probado con Apache). El nombre del fichero .htaccess comienza por un punto (herencia de cómo se identificaban los ficheros ocultos en los primeros sistemas UNIX).

Aunque su contenido puede ser muy variado, yo me voy a limitar a explicar un uso básico. (Más info sobre este fichero en donde siempre: http://es.wikipedia.org/wiki/Htaccess)

En mi caso, los voy a utilizar tanto para autenticación como para autorización. Para ello, crearemos dos ficheros, de nombres .htaccess y un fichero de claves que puede llamarse como queramos, y al que me referiré como HTPASSWD (obsérvese el punto inicial en el nombre del primero). El nombre del segundo lo elegiremos a voluntad.

El fichero .htaccess se puede crear con cualquier editor de texto, y contendrá algo similar a:

 1 AuthName "Usuario de MiAplicación"
 2 AuthType Basic
 3 AuthUserFile "C:\tmp\miapp.users"
 4 require valid-user

La línea 3 indica cuál será el fichero de claves, con la lista de los usuarios permitidos. En este caso, los usuarios estarán en el fichero “miapp.users”, el cual podemos crear con la herramienta htpasswd.exe (en la carpeta bin dentro del directorio de instalación de Apache), mediante el comando:

htpasswd.exe -c <ruta>miapp.users <usuario>

Y a continuación teclear la clave que queremos para ese usuario.

Si queremos añadir usuarios adicionales, simplemente repetiremos el comando sin la opción “-c”

Cómo funciona

Cuando el usuario intente acceder a nuestra página, le aparecerá un mensaje para que introduzca el usuario y la contraseña. En el navegador Opera se ve así (otros navegadores mostrarán pantallas equivalentes):

Fijaos que la palabra con tilde se muestra mal. Esto se debe a que mi editor de texto codifica el fichero de texto con codificación UTF-8 y ya no sé si el problema está en cómo sirve el Apache ese mensaje (¿puede que esté configurado para servir las páginas en ANSI?), o en cómo lo visualizan los navegadores. Me inclino más por lo primero, ya que ese fallo de la tilde me ocurre en TODOS los navegadores en los que lo he probado (y he probado con Opera, IE, Firefox y Epiphany), pero como tampoco quiero extenderme más, aquí lo dejo por hoy.

Ejercicio adicional: El fichero .htaccess también se puede utilizar para limitar las IPs desde las que permitir las conexiones a nuestra página web. ¿Cómo se hace esto?