comparte el articulo 

Uso de barras de herramientas con jQuery Mobile – Parte 3

Actualizado el 18/10/2012 < > 0 Comentarios

Resumen: Tercera y útlima parte de una serie de artículos donde explicamos cómo utilizar encabezados y pies de página como barras de herramientas y navegación para nuestro sitio móvil.

Hasta el momento, en este curso hemos tenido la oportunidad de utilizar encabezados y pies de páginas como barras de herramientas, que nos han permitido facilitar el acceso y navegación a través de los distintos elementos que conforman el contenido de nuestra aplicación móvil.

Estas barras hacen uso de etiquetas de encabezado y botones para lucir adecuadamente presentables y ofrecer un gran soporte. Sin embargo, existe una manera más limpia de realizar el trabajo de navegación, y a esta se le da el nombre de NavBars.

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.

Publicado el 11/10/2012, última actualización 18/10/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras