Las interfaces de usuario son unas de las partes más importantes de las aplicaciones, ya que es la forma en la cual los usuarios van a interactuar con nuestras creaciones, pero más allá de eso, una buena interfaz hace que la experiencia con nuestra aplicación sea positiva, en cambio una interfaz dudosa hace que una buena aplicación pueda dejar de ser utilizada.
Bootstrap no nos da interfaces construidas, es algo que debemos ingeniarnos nosotros mismos, sin embargo nos da los componentes para poder construir estas y si bien la mayoría de sus componentes están destinados al diseño de aplicaciones web, en realidad tiene otros componentes para mejorar la experiencia de usuario.
Estos componentes están basados en JavaScript y jQuery, por lo que vamos a requerir esta última librería para poder hacer uso de estos elementos que mencionamos, sin embargo una vez que veamos algunos de los resultados justificaremos esta inclusión.
Como hemos indicado en la introducción, es necesario el uso de jQuery para poder emplear estos componentes, es por ello que lo primero que vamos a definir es como debe ser nuestra etiqueta head de todos los ejemplos que veremos. Veamos el código de la misma:
Estas inclusiones las podemos realizar como vemos en el código desde una carpeta en nuestra máquina donde almacenamos el proyecto, o también podemos usar un CDN, como vemos en la siguiente porción de código:
Una buena interfaz siempre debe ser de ayuda para el usuario, está siempre debe mostrarle que camino debe seguir y para que funcionan sus diferentes componentes, de esta manera es intuitiva y evita la adivinación por parte del usuario al ir probando botones y menús para encontrar algo.
Veamos un pequeño código donde demostramos como construir un tooltip con la ayuda de Bootstrap:
Finalmente dentro del body creamos un elemento button, este tiene un atributo llamado data-toggle y le indicamos que será un tooltip donde en el atributo title colocamos el texto que debe mostrar nuestro cuadro de ayuda, y por supuesto en el atributo class debemos incluir tool1 que fue la clase que definimos al inicio. Una vez que todo está en su lugar al pasar el mouse sobre nuestro botón podremos visualizar el tooltip creado, el cual al ejecutar en nuestro navegador debe lucir de la siguiente forma:
Como vemos este componente es bastante útil ya que nos da la oportunidad de explicarle al usuario a través de los cuadros de ayuda cómo funcionan o para que sirven algunos elementos en nuestra interfaz.
Existe otro componente muy importante para la interfaz de usuario y es el acordeón, la finalidad de este elemento es poder guardar el texto bajo un componente de nuestra aplicación, con ello obtenemos una primera impresión tanto de orden como de limpieza de nuestra interfaz, donde el usuario al realizar click sobre este, se despliega el contenido.
Esto es importante porque otra cualidad que necesita una buena interfaz de usuario es limpieza, ya que una interfaz limpia significa que el usuario no se siente aturdido, y por ende se le hará más placentero utilizar la misma.
La constitución del acordeón es simple, en este caso no necesitamos construir un script como tal, simplemente debemos hacer una estructura de divs que nos permitan indicar que son del tipo panel, el titulo de nuestro acordeón será un div del tipo panel-heading y nuestro contenido será otro div del tipo panel-content, lo cual debemos repetir por la cantidad de elementos que queramos mostrar.
Veamos en el siguiente ejemplo donde creamos un acordeón de dos elementos:
![interfaz-usuarios-bootstrap-2.jpg]()
Como podemos ver el elemento1 muestra su contenido sin problemas mientras que el elemento2 no muestra ninguna información, si hacemos click sobre este podremos ver entonces como el contenido del elemento1 se esconde y el contenido del elemento2 es desplegado:
![interfaz-usuarios-bootstrap-3.jpg]()
Por último otro de los grandes componentes para las interfaces de usuario son los cuadros modales, estos son elementos que se invocan al hacer click sobre un botón o ancla y su funcionalidad es mostrarnos una especie de ventana emergente.
Esta ventana es muy útil porque nos permite desplegar texto que por su extensión no es práctico en un tooltip, o tal vez necesitamos que el usuario llene una información y no queremos enviarlo a otra página. Este tipo de componente nos ayuda a mantener la limpieza de nuestra aplicación, pero nos ayuda también a forzar al usuario a prestar atención a algo que puede ser muy importante.
Por supuesto las reglas de sentido común deben aplicar aquí, ya que aunque es posible que un modal levante otro modal, esto es de pésimo gusto y perjudica la navegación del usuario, también si necesitamos incorporar más de cuatro campos en un formulario es mejor hacerlo en una nueva página y no en un modal por mencionar algunos ejemplos. Veamos en el siguiente código como podemos crear un modal:
Normalmente en el header va un título con un tamaño que resalte para indicar cuál es el motivo del modal, en el body la explicación o el contenido como por ejemplo un formulario o mensaje, y en el footer los botones de acción como continuar o cerrar. Veamos entonces como luce nuestra ventana modal cuando la ejecutamos en el navegador:
Este componente es bastante sencillo de implementar y le da a nuestra aplicación un estilo profesional, sin embargo es importante que sepamos utilizar nuestra lógica para colocar el mismo en un lugar que no interrumpa con la armonía de la aplicación.
Con esto finalizamos este tutorial, donde hemos desarrollado de manera efectiva tres grandes componentes que nos ayudan a crear interfaces de usuarios parar lograr así una mejor organización y entendimiento de las acciones en nuestra aplicación, mejorando así la experiencia de navegación y uso de la misma.
Bootstrap no nos da interfaces construidas, es algo que debemos ingeniarnos nosotros mismos, sin embargo nos da los componentes para poder construir estas y si bien la mayoría de sus componentes están destinados al diseño de aplicaciones web, en realidad tiene otros componentes para mejorar la experiencia de usuario.
Estos componentes están basados en JavaScript y jQuery, por lo que vamos a requerir esta última librería para poder hacer uso de estos elementos que mencionamos, sin embargo una vez que veamos algunos de los resultados justificaremos esta inclusión.
La cabecera
Como hemos indicado en la introducción, es necesario el uso de jQuery para poder emplear estos componentes, es por ello que lo primero que vamos a definir es como debe ser nuestra etiqueta head de todos los ejemplos que veremos. Veamos el código de la misma:
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> <script type="text/javascript" src="bootstrap/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>En primer lugar incluimos el bootstrap.css en su versión minificada y luego el theme.css, hasta aquí todo ha sido lo usual pero luego debemos incluir jQuery y además debemos incluir bootstrap.js que es la forma en la cual este framework nos va a dar la oportunidad de incorporar los componentes para nuestras interfaces.
Estas inclusiones las podemos realizar como vemos en el código desde una carpeta en nuestra máquina donde almacenamos el proyecto, o también podemos usar un CDN, como vemos en la siguiente porción de código:
<!-- Archivos CSS --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link> <!-- Archivos JS --> <script src="//oss.maxcdn.com/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>Cualquiera de las opciones que utilicemos está bien, lo que es importante es respetar el orden en el cual incluimos las librerías de lo contrario nuestros componentes no funcionarán de la manera que deseamos.
Creación de tooltips
Una buena interfaz siempre debe ser de ayuda para el usuario, está siempre debe mostrarle que camino debe seguir y para que funcionan sus diferentes componentes, de esta manera es intuitiva y evita la adivinación por parte del usuario al ir probando botones y menús para encontrar algo.
Tooltip
Una herramienta que nos permite evitar esto es el Tooltip, que no son más que pequeños cuadros emergentes que nos ayudan a explicar secciones de nuestra aplicación, se les conoce también como cuadros de ayuda, la idea es que en estos pequeños cuadros añadamos pequeñas frases que le den sentido a la acción que podemos realizar en nuestra interfaz.
Veamos un pequeño código donde demostramos como construir un tooltip con la ayuda de Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo Tooltip</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tool1").tooltip({
placement : 'right'
});
});
</script>
<style type="text/css">
#cuerpo{
padding: 50px 150px 150px 150px;
}
</style>
</head>
<body id="cuerpo">
<button type="button" class="btn btn-primary tool1" data-toggle="tooltip" title="Guardar el documento actual"> Guardar
</button>
<hr><br><br>
</body>
</html>En nuestro código hemos incluido las librerías mencionadas y luego en la etiqueta script utilizamos el evento document.ready para crear nuestro tooltip el cual se va a aplicar a todo lo que tenga la clase tool1, este nombre de clase se puede personalizar por cualquiera que deseemos, y adicionalmente le añadimos como opción que tenga una disposición a la derecha, es decir, nuestra ayuda se va a mostrar en el lado derecho. Luego creamos un estilo general para el cuerpo para que nuestro contenido se vea más dentro de la pantalla a manera demostrativa.Finalmente dentro del body creamos un elemento button, este tiene un atributo llamado data-toggle y le indicamos que será un tooltip donde en el atributo title colocamos el texto que debe mostrar nuestro cuadro de ayuda, y por supuesto en el atributo class debemos incluir tool1 que fue la clase que definimos al inicio. Una vez que todo está en su lugar al pasar el mouse sobre nuestro botón podremos visualizar el tooltip creado, el cual al ejecutar en nuestro navegador debe lucir de la siguiente forma:
Como vemos este componente es bastante útil ya que nos da la oportunidad de explicarle al usuario a través de los cuadros de ayuda cómo funcionan o para que sirven algunos elementos en nuestra interfaz.
Creando un acordeón
Existe otro componente muy importante para la interfaz de usuario y es el acordeón, la finalidad de este elemento es poder guardar el texto bajo un componente de nuestra aplicación, con ello obtenemos una primera impresión tanto de orden como de limpieza de nuestra interfaz, donde el usuario al realizar click sobre este, se despliega el contenido.
Esto es importante porque otra cualidad que necesita una buena interfaz de usuario es limpieza, ya que una interfaz limpia significa que el usuario no se siente aturdido, y por ende se le hará más placentero utilizar la misma.
La constitución del acordeón es simple, en este caso no necesitamos construir un script como tal, simplemente debemos hacer una estructura de divs que nos permitan indicar que son del tipo panel, el titulo de nuestro acordeón será un div del tipo panel-heading y nuestro contenido será otro div del tipo panel-content, lo cual debemos repetir por la cantidad de elementos que queramos mostrar.
Veamos en el siguiente ejemplo donde creamos un acordeón de dos elementos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo acordeon</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#cuerpo{
padding: 150px 150px 150px 150px;
}
</style>
</head>
<body id="cuerpo">
<div class="panel-group" id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#elemento1">
Primer Elemento
</a>
</h4>
</div>
<div id="elemento1" class="panel-collapse collapse in">
<div class="panel-body">
<p>Este es el primer elemento de nuestro acordeon</p>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#elemento2">
<p>Segundo Elemento</p>
</a>
</h4>
</div>
<div id="elemento2" class="panel-collapse collapse">
<div class="panel-body">
<p> Este es el contenido de nuestro segundo elemento del acordeon </p>
</div>
</div>
</div>
</div>
</body>
</html>Lo más importante para hacer funcionar el acordeón luego de la estructura son los identificadores, si nos fijamos tenemos en el título del acordeón un ancla y esta va dirigida en el ejemplo a elemento1 y elemento2 donde cada una de estas anclas corresponde al identificador del contenido, entonces vemos como el bloque contenido de cada uno tiene como id estas dos palabras, lo cual hace que cuando hagamos click sobre los títulos se desplieguen los contenidos. Veamos como luce en nuestro navegador cuando ejecutamos nuestro ejemplo:
Como podemos ver el elemento1 muestra su contenido sin problemas mientras que el elemento2 no muestra ninguna información, si hacemos click sobre este podremos ver entonces como el contenido del elemento1 se esconde y el contenido del elemento2 es desplegado:
Cuadros modales
Por último otro de los grandes componentes para las interfaces de usuario son los cuadros modales, estos son elementos que se invocan al hacer click sobre un botón o ancla y su funcionalidad es mostrarnos una especie de ventana emergente.
Esta ventana es muy útil porque nos permite desplegar texto que por su extensión no es práctico en un tooltip, o tal vez necesitamos que el usuario llene una información y no queremos enviarlo a otra página. Este tipo de componente nos ayuda a mantener la limpieza de nuestra aplicación, pero nos ayuda también a forzar al usuario a prestar atención a algo que puede ser muy importante.
Por supuesto las reglas de sentido común deben aplicar aquí, ya que aunque es posible que un modal levante otro modal, esto es de pésimo gusto y perjudica la navegación del usuario, también si necesitamos incorporar más de cuatro campos en un formulario es mejor hacerlo en una nueva página y no en un modal por mencionar algunos ejemplos. Veamos en el siguiente código como podemos crear un modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cuadros Modales</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nuestroModal").modal('show');
});
</script>
<style>
#cuerpo { padding: 30px 30px 30px 30px; }
</style>
</head>
<body id="cuerpo">
<div id="nuestroModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="modal-title">Atención</h1>
</div>
<div class="modal-body">
<p>Una vez que pase a la siguiente fase todas sus acciones serán definitivas</p>
<p class="text-warning"><small> No podra deshacer sus respuestas</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Salir</button>
<button type="button" class="btn btn-danger">Continuar</button>
</div>
</div>
</div>
</div>
</body>En este caso el modal se configura en el document.ready para que se muestre directamente, este tipo de implementación se utiliza mucho para hacer advertencias antes que el usuario continúe. Luego nuestro modal se compone de tres partes; parte superior (header), cuerpo (body) y pie de página (footer).Normalmente en el header va un título con un tamaño que resalte para indicar cuál es el motivo del modal, en el body la explicación o el contenido como por ejemplo un formulario o mensaje, y en el footer los botones de acción como continuar o cerrar. Veamos entonces como luce nuestra ventana modal cuando la ejecutamos en el navegador:
Este componente es bastante sencillo de implementar y le da a nuestra aplicación un estilo profesional, sin embargo es importante que sepamos utilizar nuestra lógica para colocar el mismo en un lugar que no interrumpa con la armonía de la aplicación.
Con esto finalizamos este tutorial, donde hemos desarrollado de manera efectiva tres grandes componentes que nos ayudan a crear interfaces de usuarios parar lograr así una mejor organización y entendimiento de las acciones en nuestra aplicación, mejorando así la experiencia de navegación y uso de la misma.
