comparte el articulo 

Uso de barras de herramientas con jQuery Mobile – Parte 2

Actualizado el 02/10/2012 < > 0 Comentarios

Resumen: Segunda parte de esta serie, donde explicamos como diseñar y estructurar barras de herramientas con jQuery Mobile, para facilitar la navegación en la versión móvil de nuestro sitio.

Cuando un usuario accede a nuestro sitio mediante el uso de algún dispositivo móvil, la navegación a través de las páginas que componen al sitio, puede resultar en una mala experiencia en caso de contar con una estructura adecuada. El uso de barras de herramientas con jQuery Mobile, nos permite facilitar al usuario esta acción, además de proporcionarnos una manera simple de mantener un estándar de diseño, ahorrándonos a la vez varias líneas dentro del código de nuestra aplicación.

En la primera parte del artículo, pudimos establecer la sencillez con la que se puede mejorar el encabezado de nuestro sitio, aplicando tan sólo unas cuantas funciones ofrecidas por este framework. En esta ocasión, haremos mención sobre el uso de pies de página, utilzaremos una dinámica similar para mejorar la accesibilidad al sitio, y mediante el uso de atributos de data, botones e iconos mejoraremos su aspecto.

De igual manera, explicaremos como agregar dinamismo a nuestros encabezados y pies de página, utilizando posiciones de tipo fixed, así como añadiendo la posibilidad de utilizarlos cuando se muestra un elemento en modo pantalla completa.

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.

Publicado el 02/10/2012, última actualización 02/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