Uso de barras de herramientas con jQuery Mobile

Las barras de herramientas son elementos que en la actualidad han tomado un papel fundamental como base de las estructuras de diseño web. Parte de su popularidad viene como consecuencia de su flexibilidad en diseño y facilidad de adaptación a distintos entornos.

Dichas barras nos proporcionan una forma sencilla de agregar elementos de navegación a un sitio web, lo que simplifica el acceso a la información y hace que el usuario conozca mejor lo que el sitio ofrece. En un sitio web diseñado para móviles, pueden resultar especialmente útiles si lo que se busca es diseñar un elemento de control, al cual los usuarios puedan llamar cada vez que necesiten navegar a través de la aplicación.

En este artículo, intentamos de dar una visión general de como utilizar estas barras, en sus distintas modalidades, con jQuery Mobile. Hablaremos de cómo crear encabezados y pies de página, así como la manera de convertirlos en barras de herramientas que sean útiles para móviles.

Añadir encabezados

Desde que realizamos nuestra Primera página con jQuery mobile, hicimos uso de la sección header para resaltar una parte del texto sobre el resto del contenido, por esto mismo es muy probable que el código que utilicemos en esta parte, te resulte bastante familiar.

En esta ocasión, no sólo nos enfocaremos a asignar un atributo de data para definir la sección, pretendemos profundizar más y demostrar cómo añadir funcionalidad extra a tu barra de encabezado.

Retomando un poco lo que ya se ha visto en este manual, debemos recordar que para definir un encabezado basta con utilizar un elemento de tipo div, el cual debe ser definido con el rol apropiado mediante el uso del atributo “data-role”.

<div data-role="header">Mi encabezado</div>

Esto bastará para que el navegador muestre la cadena de texto indicada, dentro de un recuadro de color negro, haciéndola resaltar del resto del texto. Sin embargo, esto no debe parar ahí, podemos hacer un mejor encabezado añadiendo unas cuantas etiquetas HTML las cuales permitan resaltar aún más su contenido.

Algo básico para comenzar, puede ser utilizar una etiqueta “h1” para definir el encabezado, si la añadimos a la cadena, jQuery Mobile alargará el texto y automáticamente lo centrará en base a la pantalla.

<div data-role="header"><h1>Mi encabezado</h1></div>

A nuestro encabezado, podemos añadirle algún tipo de funcionalidad extra mediante el uso de botones. Los botones, son elementos que pueden ser utilizados para promover la navegación (como es el caso del botón para regresar) o para enlazar con las secciones y páginas de contenido de nuestra aplicación.

Como el texto ya ocupa gran parte del centro de nuestro encabezado, nos restan solamente dos partes para colocar los botones, y estos espacios se encuentran en el extremos izquierdo y derecho de nuestro encabezado. Considerando la falta de espacio, debemos tener bien en claro cuales serán los enlaces a los que queremos direccionar desde la página.

En base a esto, podemos estructurar nuestro encabezado con dos enlaces, uno en cada extremo. El primero de estos redirigirá a la página principal y el otro a la sección de contacto, para ello bastará un código como el siguiente:

<div data-role="header">
    <a href="principal.html">Principal</a>
    <h1>Mi encabezado</h1>
    <a href="contacto.html">Contacto</a>
</div>

Quizás te preguntes, ¿Y dónde están los botones?, ya que claramente sólo estamos utilizando elementos de tipo anclaje en el código. Los botones es algo automáticamente añadido por jQuery Mobile, si tu visualizas en un navegador el código que acabamos de estructurar, podrás notar que los enlaces se convirtieron en dos botones los cuales aparecen en cada extremo del encabezado.

En caso de que se desee utilizar un solo botón, puede omitirse uno de los enlaces, y con eso bastará; pero si se desea colocar el botón en solitario al lado derecho del encabezado, se tiene que recurrir a la clase de estilo “ui-btn-right”, la cual alineará el botón a la derecha. De igual manera, en caso de ser necesario, se puede hacer uso de la clase “ui-btn-left” para colocar el botón a la izquierda, pero por defecto el elemento toma esa alineación.

Uso de iconos

Una alternativa que hace resaltar el diseño de nuestro encabezado, es el uso de iconos dentro de los botones que lo componen. Estos elementos visuales harán más atractivo el diseño y añadirán usabilidad.

La capacidad de agregar iconos a los elementos, es una propiedad que ha sido incluida como parte del framework de jQuery Mobile, por lo que puede ser utilizada en cualquier parte del diseño. En esta ocasión haremos un pequeño uso de esta funcionalidad y más adelante en el manual explicaremos a más detalle su comportamiento.

Por defecto, al cargar jQuery Mobile en nuestro proyecto, tenemos acceso a una librería de iconos, los cuales podemos utilizar sin ningún problema. En el siguiente código, desplegamos la manera en que estos iconos pueden ser utilizados:

<div data-role="header">
    <a href="principal.html" data-icon="home">Principal</a>
    <h1>Mi encabezado</h1>
    <a href="contacto.html" data-icon="info">Contacto</a>
</div>

Como se puede apreciar es bastante sencillo, una vez más hacemos uso de atributos de data, en este caso “data-icon” definirá cual es la imagen que se cargará enseguida del texto. Para este ejemplo utilizamos dos valores, el primero de ellos es “home”, el cual despliega la imagen de una pequeña casa indicando que ese botón lleva a la página de inicio o principal, mientras que el valor “info” es utilizado para desplegar un icono con una i, símbolo comúnmente utilizado por los centros de información.

Añadir un botón para regresar

El botón de regreso, es una de las funcionalidades que puede variar dependiendo del medio donde se despliegue la página, en dispositivos de tipo Android esta funcionalidad existe nativamente, pero desafortunadamente en dispositivos como iPhone, no existe un botón para regresar. Es por esta razón que jQuery Mobile nos ofrece la posibilidad de agregar un botón de regresar personalizado, y para ello existen dos maneras de agregar esta funconalidad en caso de que la necesites.

La forma más adecuada de hacerlo, es simplemente añadiendo un nuevo atributo de data al div que contiene la página, este atributo lleva por nombre “data-add-back-btn” y debe recibir el valor de “true” para que muestre el botón. Por otro lado, si no se quiere utilizar el poco espacio disponible en el encabezado, se puede agregar un link en el contenido de la página, para que realice la misma función, para ello basta con agregar un elemento de anclaje cuya URL este vacía y cuenta con el atributo “data-rel” y “back” como valor.

<div data-role="page" id="pagina" data-add-back-btn="true">
    <div data-role="header"><h1>Encabezado</h1></div>
    <div data-role="content">
        <p><a href="" data-rel="back">Regresar</a></p>
    </div>
</div>

Manejo de pies de página

En un dispositivo móvil, el footer generalmente luce de manera similar al encabezado de la página. Si previamente ya habíamos elaborado el diseño de un encabezado, resultará mucho más sencillo estructurar un pie de página que cumpla con la función de barra de herramientas y complemente nuestra página.

La elaboración de dichos pies de página con jQuery Mobile es bastante sencilla, y con semejanza a la realización de encabezados que expusimos en el artículo anterior. Una vez los atributos de data nos ayudarán a definir el tipo de sección con la que estamos trabajando, y para este caso utilizaremos el atributo “data-role” con el valor de “footer”.

<div data-role="footer">My Footer</div>

Al igual que con los headers, si agregamos una etiqueta de tipo encabezado a nuestra cadena de texto, podemos obtener un mejor formato. Con dicha etiqueta, el texto quedará centrado y se agregará un poco de espacio para que resalte sobre el resto.

Además de esto, en nuestros footers también podemos recurrir al uso de iconos y botones, con la diferencia de que estos no se alinean de manera automática como sucede en el encabezado. De hecho, si decides usar botones y texto extra en tu pie de página, es recomendable remover la etiqueta de encabezado; ya que de no ser así, el footer puede quedar bastante grande y perdería la esencia del estilo.

Si quisiéramos agregar botones a nuestro pie de página, basta con agregar un código como el siguiente:

<div data-role="footer">
<a href="contacto.html">Contacto</a>
<a href="mapa.html">Ubicacion</a>
</div>

Con esto se cumple el objetivo, pero los botones pueden lucir poco estéticos, ya que no existe mucho espacio entre ellos. Para solucionar este problema se puede recurrir a la clase “ui-bar”, si agregamos dicha clase al div contenedor del footer, se le da un estilo de barra por lo que se agrega un espacio entre cada botón que se despliega.

<div data-role="footer" class="ui-bar">
<a href="contacto.html">Contacto</a>
<a href="mapa.html">Ubicacion</a>
</div>

Encabezados y pies de página adaptables

Una forma de hacer resaltar nuestros encabezados y pies de página, es agregando cierto dinamismo a la forma en que los desplegamos, haciendo que la visibilidad se adapte a la página donde los estamos mostrando.

Los diseños que hemos manejado hasta ahora son bastante útiles y funcionales, pero cuando tenemos una página bastante larga, como alguna entrada de un blog o un menú de aplicaciones, es bastante frustrante para el usuario tenerse que estar moviendo del inicio hasta el fin para poder ver las barras de navegación, es por esto que debemos buscar formas de adaptar nuestro diseño y mejorar la experiencia del usuario.

jQuery Mobile proporciona una forma de crear encabezados y pies de página con posición fija. Con esta función activada, el encabezado y pie de página siempre estarán visibles, por lo que el usuario no necesitará desplazarse para escoger alguna opción de las barras.

Con esta opción, también se añade una funcionalidad de diseño bastante buena, ya que las barras desaparecen cuando el usuario esta desplazándose a través del contenido, pero una vez que deje de hacerlo y levante su dedo de la pantalla, estas aparecerán de nuevo para que pueda utilizar las barras.

Esta característica se puede activar, simplemente añadiendo data-position=”fixed” como atributo de los div contenedores de las barras.

<div data-role="page">
    <div data-role="header" data-position="fixed"><h1>Mi encabezado</h1></div>
         <div data-role="content">
             <p>Hola la webera, esto es un texto de prueba.</p>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Ut vel turpis sit amet ligula luctus porttitor. Cras at dictum mi. 
                Praesent risus diam, dictum et gravida eget, semper sit amet felis. 
                Sed dapibus rutrum ante sed varius. 
                Pellentesque feugiat sodales nisi id rhoncus. 
                Suspendisse potenti. 
                Maecenas augue ante, commodo non tempus tempor, scelerisque non metus.
                Nam mattis consectetur arcu quis elementum. 
                Quisque id nisl vel sem convallis placerat quis eget urna. 
                Sed hendrerit enim et elit ornare adipiscing. 
                Ut eget quam sit amet nisi molestie tempor. 
                Ut nulla libero, porttitor eget rutrum ut, consectetur non nulla.
             </p>
             <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Ut vel turpis sit amet ligula luctus porttitor. Cras at dictum mi. 
                Praesent risus diam, dictum et gravida eget, semper sit amet felis. 
                Sed dapibus rutrum ante sed varius. 
                Pellentesque feugiat sodales nisi id rhoncus. 
                Suspendisse potenti. 
                Maecenas augue ante, commodo non tempus tempor, scelerisque non metus.
                Nam mattis consectetur arcu quis elementum. 
                Quisque id nisl vel sem convallis placerat quis eget urna. 
                Sed hendrerit enim et elit ornare adipiscing. 
                Ut eget quam sit amet nisi molestie tempor. 
                Ut nulla libero, porttitor eget rutrum ut, consectetur non nulla.
             </p>
         </div>
     <div data-role="footer" data-position="fixed"><h4>Mi pie de pagina</h4></div>
</div>

Otra opción que podemos utilizar, es hacer barras que funcionen cuando se este desplegando un elemento en pantalla completa. Para lograr esta funcionalidad con jQuery Mobile, basta con habilitar la opción data-fullscreen=”true” como atributo del div que contenga la página.

<div data-role="page" data-fullscreen="true"></div>

Esta funcionalidad es particularmente útil cuando se hace uso constante de imágenes, ya que al desplegarlas de manera completa el usuario no tendrá la necesidad de regresar al sitio para poder utilizar el encabezado o el pie de página.

Uso de barras de navegación

Las NavBars, como su nombre lo indica, son barras de navegación, las cuales se encuentran predefinidas en el core de jQuery Mobile y son utilizadas para desplegar diferentes acciones de manera ordenada en forma de menú. A dicho menú se le agregan una serie de detalles gráficos y características de diseño para mejorar la experiencia del usuario (UX), entre ellos encontramos el “highlight” agregado al elemento activo.

En concepto, una NavBar es simplemente una lista desordenada contenida por un elemento div, el cual para funcionar debe contar con el atributo “data-role” y con su respectivo valor establecido a “navbar”. En el siguiente código, agregaremos una barra de navegación adentro de nuestro pie de página:

<div data-role="footer">
  <div data-role="navbar">
    <ul>
      <li><a href="index.html" class="ui-btnactive">Inicio</a></li>
      <li><a href="contenido.html">Contenido</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </div>
</div>

También se puede apreciar en el código, el uso de la clase “ui-btn-active” en el primer elemento del menú, esta clase sirve para marcar como activa dicha opción y añade elementos a su diseño para hacerlo resaltar sobre los demás. Desafortunadamente el framework no añade esta clase de manera automática, por lo que deberás crear alguna otra función para añadir y remover dicha clase cuando sea necesario.

Se pueden añadir hasta cinco opciones a la barra de navegación sin problema alguno, jQuery Mobile se encargará de redimensionar sus recuadros de tal manera que encajen con el ancho de la pantalla. Esto no significa que si agregamos más de cinco opciones ocurrirá alguna clase de problema, lo único distinto será que tendremos múltiples líneas de opciones en la misma barra.

El problema de tener múltiples líneas para seleccionar una opción, es que el usuario se puede ver abrumado, confundido e incluso molesto por el hecho de que ocupamos gran parte de la pantalla del dispositivo con tan sólo el menú.

En el ejemplo anterior agregamos la barra de navegación dentro de un footer, pero este elemento también puede ser utilizado dentro del encabezado, donde es más común utilizar dos líneas, una para mostrar el texto de encabezado de la página y la segunda para mostrar el menú.

<div data-role="header">
  <h1>Encabezado</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="index.html" class="ui-btnactive">Inicio</a></li>
      <li><a href="contenido.html">Contenido</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </div>
</div>

Pies de página persistentes

Si queremos agregar uniformidad a la estructura de nuestras páginas móviles, podemos añadir un pie de página que no desaparezca cuando se realice un cambio de página. Para ello necesitamos que nuestro footer utilice el mismo valor para el atributo “data-id” en todas las páginas, además necesitamos asignar las clases CSS “ui-state-persist” y “ui-btn-active” a la opción relacionada con la página que se encuentra activa y por supuesto utilizar la propiedad de persistencia en el footer.

El proceso puede sonar algo complejo, pero en realidad sólo consiste en unas cuantas adaptaciones al código con el que ya contamos:

<div data-role="page">
  <div data-role="header"><h1>Inicio</h1></div>
  <div data-role="content">
    <p>Pagina de inicio</p>
  </div>
  <div data-role="footer" data-position="fixed" dataid="piedepagina">
    <div data-role="navbar">
      <ul>
        <li><a href="index.html" class="ui-btnactive ui-state-persist">Inicio</a></li>
        <li><a href="contenido.html">Contenido</a></li>
        <li><a href="contacto.html">Contacto</a></li>
      </ul>
    </div>
  </div>
</div>

El código para el resto de las páginas es bastante similar, lo único que cambiará sera la opción que contenga la clases CSS y por supuesto la información de la sección “content”.

Conclusión

A lo largo de estos tres artículos tuvimos la oportunidad de trabajar con distintos tipos de barras, las cuales en la práctica nos ayudarán a desplegar la información necesaria para que el usuario logre una navegación adecuada a través de nuestro sitio móvil, además de ser de gran ayuda para mostrar elementos adicionales que pueden persistir a través de múltiples páginas.

Hemos cubierto diversas técnicas para mejorar el aspecto de dichas barras, haciendo uso de clases CSS y atributos de data específicos para diversas situaciones. Utilizamos encabezados y pies de página en modo pantalla completa, logramos que se desplegaran correctamente en páginas con contenido muy largo, también hicimos que desaparecieran al dar clic sobre la pantalla y los combinamos con NavBars para hacerlos persistir y agregar detalles de diseño.

En el siguiente artículo, empezaremos con un nuevo tema el cual se enfocará en el estudio y uso de listas, otra forma de agregar accesibilidad y fomentar la navegación a través de nuestro sitio.