Hay un enfoque muy popular entre HTML5 y CSS3 programadores para construir sitios web optimizados para móviles con AJAX, y eso es utilizar un complemento a la biblioteca jQuery llamado jQuery Mobile. JQuery Mobile es una poderosa combinación de código javascript y CSS incorporado en la parte superior de la biblioteca.

Video: Aprende a crear aplicaciones móviles multiplataforma con HTML5, CSS y javascript

La biblioteca jQuery funciona tomando una página normal HTML 5 y modificándola en formas que emulan un aspecto nativo. El código se parece mucho a HTML estándar:

JQuery Mobile Demostración

página web jQuery Mobile

• Esta es una lista ordinaria
• Codificado para parecerse
• una lista móvil

Algunos detalles hacen de esta página en una maravilla móvil:

1. Incluir el CSS jQuery móvil.

   Este es un archivo CSS especial diseñado para transformar los elementos HTML en sus contrapartes móviles. A pesar de que se puede descargar por sí mismo, la mayoría de los desarrolladores vinculan directamente a la jQuery sitio.

2. Incluir la librería estándar de jQuery.

   Video: Programacion Web #1 - Como hacer pagina web con HTML5 [HTML5, CSS3, JQuery y PHP]

   Gran parte del código se basa en jQuery, por lo que la integración de jQuery la biblioteca también. Una vez más, usted tiene que tirar jQuery de la principal jQuery sitio web.

3. Incorporar la biblioteca móvil jQuery.

   Esta es una biblioteca javascript que se extiende la biblioteca para añadir un nuevo comportamiento específico para móviles.

4. Agrega un Data-role =”página” atribuir a la div principal.

   Crear un div principal en su página y proporcionar el atributo a la misma. Esta es una costumbre los datos en roles atributo añadido por jQuery móvil. jQuery mira sobre los roles de datos de los diversos elementos y aplica los cambios de estilo y comportamiento de estos elementos de forma automática. Asignar su div principal el rol de datos página. Esto le dice al navegador para tratar todo el div como una página.

5. Especificar un tema de datos.

   Se puede aplicar un tema de datos a cualquier elemento, pero casi siempre aplicar un tema a la página. jQuery móvil viene con una serie de temas por defecto incorporados, denominado “a” a la “e”. Experimento para encontrar el que más le guste, o usted puede construir su propio con la versión móvil especial de la ThemeRoller.

6. Añadir más divs dentro de su página.

   Añadir unas cuantas más divs dentro de su página de div. En general, usted tendrá tres: encabezado, contenido y pie de página.

7. Especificar la cabecera con div datos-role =”header”.

   Video: Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design)

   Mediante la colocación de cualquier tipo de información de cabecera dentro de un div con una función de datos “de cabecera”, usted está diciendo a jQuery para tratar este elemento como una cabecera móvil y aplicar los estilos apropiados. La cabecera incluye típicamente una etiqueta.

   Por lo general deberá especificar la cabecera que se fija con el -Posición de datos =”fijo” atributo. Esto asegura la cabecera permanecerá en su lugar si el resto del contenido se desplaza, lo que es un comportamiento típico de una aplicación móvil.

8. Configurar un contenido div.

   Añadir un div con datos-role =”contenido” para configurar el área de contenido principal de su página. Cualquiera de los principales elementos de la carrocería de su sitio debe ir en este segmento.

9. Cualquier enlace se puede convertir en un botón.

   La convención estándar en las aplicaciones web es convertir los enlaces en los botones que tienen un objetivo más grande que la de entrada basado en el ratón. Es fácil convertir cualquier enlace a un botón mediante la adición de la datos-role =”botón” atribuir a la etiqueta de anclaje.

10. Convertir listas para listviews móviles.

    Las listas también tienen convenios especiales en el mundo móvil. Se puede utilizar el los datos en roles atribuir a convertir cualquier lista en una vista de la lista.

11. Construir un pie de página.

    Añadir un div más con los datos en roles ajustado a "pie de página". Normalmente, el pie de página (como la cabecera) se fija con el -Posición de datos atributo.