comparte el articulo 

Uso de barras de herramientas con jQuery Mobile – Parte 1

Actualizado el 25/09/2012 < > 1 Comentario

Resumen: Primera parte de un artículo donde explicamos como utilizar encabezados y pies de páginas como barras de herramientas, todo esto mediante el uso de 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>

Publicado el 25/09/2012, última actualización 25/09/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

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

Añadir Comentario (Subir al texto)

1 Comentario

  1. Fabián

    Buenas,

    Primero dar las gracias por este excelente material, tan claro y fácil de seguir.
    Tengo una pregunta, como se haría un botón para actualizar la página??

    Muchas gracias.

    Sábado, 19 de julio 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras