Crea un sitio web móvil con jQuery Mobile

Contenido

• Cómo codificar varias páginas en un solo archivo HTML
• Descripción
• Cómo utilizar los cuadros de diálogo y las transiciones
• Las transiciones que se pueden utilizar
• Descripción
• Cómo crear botones
• Descripción
• Cómo crear una barra de navegación
• Cómo codificar el HTML para una barra de navegación:
• Cómo formatear contenido con jQuery Mobile
• Los estilos predeterminados que usa jQuery Mobile
• Descripción
• Cómo aplicar temas a elementos HTML
• Dos formas de aplicar un tema:
• Descripción
• Perspectiva

Este es un extracto editado del Capítulo 15 de HTML5 y CSS3 de Murach por Zak Ruvalcaba y Anne Boehm.

jQuery Mobile es una biblioteca JavaScript gratuita, de código abierto y multiplataforma que puede utilizar para desarrollar sitios web móviles. Esta biblioteca le permite crear páginas que se ven y se sienten como las páginas de una aplicación móvil nativa.

Aunque jQuery Mobile está disponible actualmente como una versión de prueba beta, esta versión ya ofrece todas las funciones que necesita para desarrollar un excelente sitio web móvil. Como resultado, puede comenzar a usarlo de inmediato. También puede esperar que esta versión se mejore continuamente, por lo que jQuery Mobile solo mejorará.

En este artículo, aprenderá las técnicas básicas para crear las páginas de un sitio web móvil. Eso incluirá el uso de cuadros de diálogo, botones y barras de navegación.

Cómo codificar varias páginas en un solo archivo HTML

A diferencia de la forma en que desarrolla las páginas web para un sitio web de pantalla, jQuery Mobile le permite crear varias páginas en un solo archivo HTML. Esto se ilustra en la figura 15-7. Aquí, puede ver dos páginas de un sitio junto con el HTML de estas páginas. Lo sorprendente es que ambas páginas están codificadas en un solo archivo HTML.

Para cada página, codifica un elemento div con "página" como el valor del atributo de rol de datos. Luego, dentro de cada uno de esos elementos div, codifica los elementos div para el encabezado, el contenido y el pie de página de cada página. Posteriormente, cuando se carga el archivo HTML, se muestra la primera página del cuerpo del archivo.

Para vincular las páginas del archivo HTML, utilice marcadores de posición como se muestra en la figura 7-11 del capítulo 7. Por ejemplo, el elemento a> en la primera página de este ejemplo va a "#toobin" cuando el usuario toca el h2 o img elemento que está codificado como el contenido de este enlace. Esto se refiere al elemento div con "toobin" como su atributo id, lo que significa que al tocar el enlace se lleva al lector a la segunda página del archivo.

Aunque este ejemplo muestra solo dos páginas, puede codificar muchas páginas dentro de un solo archivo HTML. Sin embargo, recuerde que todas las páginas junto con sus imágenes, JavaScript y archivos CSS se cargan con un solo archivo HTML. Como resultado, el tiempo de carga será excesivo si almacena demasiadas páginas en un solo archivo. Cuando eso suceda, puede dividir sus páginas en más de un archivo HTML.

El HTML para las dos páginas en el cuerpo de un archivo HTML:

div data-role = "página"> encabezado data-role = "encabezado"> h1> Ayuntamiento de SJV / h1> / encabezado> sección data-role = "contenido"> h3> Los ponentes 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 de octubre de 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - LOS ELEMENTOS PARA EL RESTO DE LOS PONENTES - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Ayuntamiento de SJV / h1> / header> sección data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor del best-seller aclamado por la crítica, i> The Nine:! - LA COPIA CONTINÚA -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Descripción

• Cuando usa jQuery Mobile, no tiene que desarrollar un archivo HTML separado para cada página. En cambio, dentro del elemento del cuerpo de un solo archivo HTML, codifica un elemento div para cada página con su atributo de rol de datos establecido en "página".
• Para cada elemento div, establece el atributo id en un valor de marcador de posición al que pueden acceder los atributos href en los elementos a> de otras páginas.

Cómo utilizar los cuadros de diálogo y las transiciones

La Figura 15-8 muestra cómo crear un cuadro de diálogo que se abre cuando se toca un enlace. Para hacer eso, codifique el cuadro de diálogo como lo haría con cualquier página. Pero en el elemento a> que va a esa página, codificas un atributo data-rel con “dialog” como su valor.

Como muestran los ejemplos de esta figura, el archivo CSS de jQuery Mobile formatea un cuadro de diálogo de manera diferente a una página web normal. De forma predeterminada, un cuadro de diálogo tendrá un fondo oscuro con texto de primer plano blanco, y el encabezado y el pie de página no abarcarán el ancho de la página. Un cuadro de diálogo también tendrá una "X" en el encabezado que el usuario debe tocar para volver a la página anterior.

Cuando codifica un elemento a> que va a otra página o cuadro de diálogo, también puede usar el atributo de transición de datos para especificar una de las seis transiciones que se resumen en la tabla de esta figura. Cada una de estas transiciones pretende imitar un efecto que utiliza un dispositivo móvil como un iPhone.

Las transiciones que se pueden utilizar

HTML que abre la página como un cuadro de diálogo con la transición "emergente":

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML que abre la página con la transición de "desvanecimiento":

a href = "# toobin" data-transition = "fade">

Descripción

• El HTML para un caja de diálogo se codifica de la misma forma en que se codifica cualquier página. Sin embargo, el elemento a> que enlaza con la página incluye el atributo data-rel con "diálogo" como su valor. Para cerrar el cuadro de diálogo, el usuario toca la X en el encabezado del cuadro.
• Para especificar la forma en que se abre una página o un cuadro de diálogo, puede utilizar el atributo de transición de datos con uno de los valores de la tabla anterior. Si un dispositivo no admite la transición que especifica, el atributo se ignora.
• El estilo de un cuadro de diálogo lo realiza el archivo CSS de jQuery Mobile.

Cómo crear botones

La Figura 15-9 muestra cómo usar los botones para navegar de una página a otra. Para hacer eso, simplemente establezca el atributo de rol de datos para un elemento a> en "botón", y jQuery Mobile hace el resto.
Sin embargo, también puede establecer algunos otros atributos para los botones. Si, por ejemplo, desea que aparezcan dos o más botones uno al lado del otro, como los dos primeros botones de esta figura, puede establecer el atributo data-inline en "verdadero".

Si desea agregar uno de los 18 íconos proporcionados por jQuery Mobile a un botón, también codifique el atributo data-icon. Por ejemplo, el tercer botón de este ejemplo utiliza el icono de "eliminar" y el cuarto botón utiliza el icono de "inicio". Todos estos íconos se parecen a los íconos que puede ver dentro de una aplicación móvil nativa. Por cierto, estos iconos no son archivos separados a los que la página debe acceder. En su lugar, son proporcionados por la biblioteca jQuery Mobile.

Si desea agrupar dos o más botones horizontalmente, como los botones Sí, No y Quizás en esta figura, puede codificar los elementos a> para los botones dentro de un elemento div que tiene "controlgroup" como su atributo de rol de datos y “Horizontal” como su atributo de tipo de datos. O, para agrupar los botones verticalmente, puede cambiar el atributo de tipo de datos a "vertical".

Si establece el atributo data-rel para un botón en "atrás" y el atributo href en el símbolo de almohadilla (#), el botón volverá a la página que lo llamó. En otras palabras, el botón funciona como un botón Atrás. Esto se ilustra con el último botón del contenido de la página.

Los dos últimos botones muestran cómo aparecen los botones en el pie de página de una página. Aquí, los iconos y el texto son blancos sobre un fondo negro. En este caso, el atributo de clase para el pie de página se establece en “ui-bar”, lo que le dice a jQuery Mobile que debe poner un poco más de espacio alrededor del contenido del pie de página. Aprenderá más sobre eso en la figura 15-12.

El HTML de los botones de la sección:

! - Para botones en línea, establezca el atributo de línea de datos en verdadero -> a href = "#" data-role = "button" data-inline = "true"> Cancelar / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Para agregar un icono a un botón, use el atributo data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Para agrupar botones, use un elemento div con los atributos que siguen -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Sí / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> Tal vez / a> / div>! - Para codifique un botón Atrás, establezca el atributo data-rel en back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Regresar a la página anterior / a >

El HTML para los botones en el pie de página:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Agregar a Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" más "> Tweet esta página / a> / footer>

Descripción

• Para agregar un botón a una página web, codifica un elemento a> con su atributo de rol de datos establecido en "botón".

Cómo crear una barra de navegación

La Figura 15-10 muestra cómo puede agregar una barra de navegación a una página web. Para hacer eso, codifica un elemento div con su rol de datos establecido en "navbar". Dentro de este elemento, codifica un elemento ul que contiene elementos li que contienen los elementos a> para los elementos en la barra de navegación. Sin embargo, tenga en cuenta que no codifica el atributo de rol de datos para los elementos a>.

Para cambiar el color de los elementos en la barra de navegación, el código de este ejemplo incluye el atributo data-theme-b para cada elemento. Como resultado, jQuery Mobile cambia el color de fondo de cada elemento de negro, que es el predeterminado, a un atractivo azul. Además, este código establece el atributo de clase para el botón activo en “ui-btn-active” para que jQuery Mobile cambie el color del botón activo a un azul más claro. Esto muestra cómo puede cambiar el formato que usa jQuery Mobile, y aprenderá más sobre eso a continuación.

El HTML de la barra de navegación:

header data-role = "header"> h1> Ayuntamiento de SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Inicio / a> / li> li> a href =" # altavoces "data-icon =" estrella "data-theme =" b "> Altavoces / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Contáctenos / a> / li> / ul> / div> / header>

Cómo codificar el HTML para una barra de navegación:

• Codifique un elemento div dentro del elemento de encabezado. Luego, establezca el atributo de rol de datos para el elemento div en "navbar".
• Dentro del elemento div, codifique un elemento ul que contenga un elemento li para cada enlace.
• Dentro de cada elemento li, codifique un elemento a> con un atributo href que use un marcador de posición para la página a la que debe ir el enlace. Luego, establezca el atributo de icono de datos en el icono de su elección.
• Para el elemento activo en la barra de navegación, establezca el atributo de clase en “ui-btn-active”.Entonces, el color de este elemento será más claro que el de los otros elementos de la barra de navegación.
• También debe usar el atributo de tema de datos para aplicar un tema de jQuery Mobile a cada elemento en la barra de navegación. De lo contrario, los botones de la barra serán del mismo color que el resto del encabezado. Para obtener más información sobre la aplicación de temas, consulte la figura 15-12.

Cómo formatear contenido con jQuery Mobile

Como ya ha visto, jQuery Mobile formatea automáticamente los componentes de una página web en función de su propia hoja de estilo. Ahora, aprenderá más sobre eso, así como también sobre cómo ajustar el estilo predeterminado que usa jQuery Mobile.

Los estilos predeterminados que usa jQuery Mobile

La Figura 15-13 muestra los estilos predeterminados que utiliza jQuery Mobile para elementos HTML comunes. Para todos sus estilos, jQuery Mobile se basa en el motor de renderizado del navegador, por lo que su propio estilo es mínimo. Esto mantiene los tiempos de carga rápidos y minimiza la sobrecarga que el CSS excesivo impondría en una página.

Como puede ver, el estilo de jQuery Mobile es tan efectivo que no debería necesitar modificar su estilo proporcionando su propia hoja de estilo CSS. Por ejemplo, el espacio entre los elementos de la lista desordenada y el formato de la tabla son aceptables tal como están. Además, la letra negra sobre el fondo gris es coherente con el formato de las aplicaciones móviles nativas.

Descripción

• De forma predeterminada, jQuery Mobile aplica estilos automáticamente a los elementos HTML de una página. Estos estilos no solo son atractivos, sino que también imitan los estilos nativos de un navegador.
• De forma predeterminada, jQuery Mobile aplica una pequeña cantidad de relleno a la izquierda, la derecha, la parte superior e inferior de cada página móvil.
• De forma predeterminada, los enlaces son un poco más grandes que el texto normal. Esto hace que sea más fácil para el usuario tocar los enlaces.
• De forma predeterminada, los enlaces están subrayados con azul como color de fuente.

Cómo aplicar temas a elementos HTML

En algunos casos, querrá cambiar los estilos predeterminados que usa jQuery Mobile. Ya lo ha visto en la barra de navegación de la figura 15-10. Para cambiar los estilos predeterminados, puede utilizar los cinco temas que proporciona jQuery Mobile. Estos se resumen en la figura 15-12. Aquí nuevamente, estos temas están destinados a imitar la apariencia de una aplicación móvil nativa.

Una forma de aplicar temas es codificar un atributo de tema de datos con la letra del tema como su valor. Lo vio en la barra de navegación en la figura 15-10, y puede verlo en el código de la segunda barra de navegación en esta figura. Aquí, el atributo de tema de datos aplica el tema "e" al encabezado y el tema "d" a los elementos de la barra de navegación.

La otra forma de aplicar temas es establecer el atributo de clase de un elemento en un nombre de clase que indique un tema. Esto se ilustra con el primer ejemplo después de la tabla. Aquí, el atributo de clase se usa para aplicar las clases “ui-bar” y “ui-bar-b” al elemento div. Como resultado, jQuery Mobile primero aplica su estilo predeterminado para una barra al elemento y luego aplica el tema b a ese estilo. En las páginas siguientes, verá otros ejemplos de este tipo de estilo.

Tenga en cuenta que la tabla de esta figura dice que use el tema e con moderación. Eso es porque usa un color naranja que funciona bien para acentuar un artículo, pero no es atractivo en grandes dosis. Esto se ilustra con el segundo encabezado y la barra de navegación en esta figura, que tiende a ser discordante cuando se ve en color.

En general, es mejor quedarse con los estilos predeterminados y los primeros tres temas, que suelen funcionar bien juntos. Luego, puede experimentar con los temas dye cuando crea que necesita algo más.

El HTML para el segundo encabezado y barra de navegación:

header data-role = "header" data-theme = "e"> h1> Ayuntamiento de SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Inicio / a> / li> li> a href =" # altavoces "data-icon =" estrella "data-theme =" d "> Altavoces / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> News / a> / li> / ul> / div> / header>

Los cinco temas de jQuery Mobile:

Dos formas de aplicar un tema:

Utilizando un atributo de tema de datos:

li> a href = "# inicio" icono-datos = "inicio" tema-datos = "b"> Inicio / a> / li>

Usando un atributo de clase que indica el tema:

div> Bar / div>

Descripción

• Al utilizar los cinco temas que se incluyen con jQuery Mobile, puede realizar los ajustes necesarios a los estilos predeterminados para los elementos HTML.
• Aunque puede usar su propia hoja de estilo CSS con una aplicación jQuery Mobile, debe evitar hacerlo siempre que sea posible.

Perspectiva

El uso de dispositivos móviles ha aumentado drásticamente en los últimos años. Por eso, se ha vuelto cada vez más importante diseñar sitios web que sean fáciles de usar desde estos dispositivos. Aunque eso generalmente significa desarrollar un sitio web separado, esto puede ser un aspecto crítico para mantener su presencia en Internet.

Afortunadamente, la tarea de crear un sitio web móvil se ha vuelto mucho más fácil con la llegada de jQuery Mobile. Las páginas web móviles ya no se limitan a páginas estáticas que contienen títulos, párrafos, enlaces e imágenes en miniatura. Con jQuery Mobile, los desarrolladores web ahora pueden crear sitios web ricos en funciones que se ven y se sienten como aplicaciones móviles nativas.