Ir al contenido principal

Tutorial jQuery Mobile: Primeros pasos con jQuery Mobile

De Xandrusoft
S

e está hablando mucho de aplicaciones y página webs para móviles y, aunque cualquier opción es válida, en este artículo hablaremos de cómo adaptar nuestra página web para móviles con la tecnología jQuery Mobile.

Como su propio nombre indica, se trata de una librería basada en jQuery y que hace uso de la misma. Por lo tanto, para su utilización deberemos cargar dicha librería e incluir las especificaciones necesarias en nuestro código para su interpretación.

Por supuesto, esta librería se utiliza sobre HTML5, como no podía ser de otra forma para una tecnología tan novedosa y potente.

Una de las ventaja a destacar es que esta tecnología es compatible con casi la totalidad de los sistemas operativos móviles como Android, iOS, Windows Phone, Blackberry, Bada o Simbian.

El primer paso, como en el uso de cualquier librería, es incluir la librería en nuestra aplicación. Para ello, como casi siempre, disponemos de dos opciones: descargarnos la librería o hacer referencia a su ubicación.

Para descargarnos la librería lo podemos hacer desde la página del proyecto jQuery Mobile. Una vez descargada la guardamos en nuestro directorio de javascripts (por ejemplo) y hacemos referencia a la su ubicación

Si, por el contrario, queremos cargarla directamente del sitio debemos hacer la llamada a la página web del proyecto

Lógicamente no debemos olvidarnos cargar la librería jQuery, de la que hace uso

La estructura básica de una página con jQuery Mobile es muy similar a la de cualquier página, basándose en los atributos data de HTML5 para soportar varios elementos de UI.

Como cualquier página web, la estructura de una página con jQuery Mobile se divide en tres zonas: la cabecera, el cuerpo y el pie. Su definición la vemos a continuación:

     
        

            
 
                
Header Bar
 
            

            
 
                
Footer Bar

Como en este blog no tenemos costumbre de tratar los conceptos más básicos de programación, os dejamos el link de las demos oficiales -muy completas por cierto- de la página demos de jQuery Mobile.

En la página jqmgallery podemos ver algunos ejemplos de las aplicaciones que han sido creadas con esta tecnología.

Es hora de que empecéis a crear vuestro primer proyecto con jQuery mobile!

Comentarios

  1. Anónimo21 de diciembre de 2012, 17:30

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  2. Anónimo21 de diciembre de 2012, 17:31

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Anónimo10 de enero de 2013, 18:35

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  4. Anónimo10 de enero de 2013, 18:36

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Exportar archivo de configuración de WinSCP

De Xandrusoft
S i estamos trabajando con WinSCP seguro que ya hemos guardado distintas sesiones para acceder a ellas directamente en futuras ocasiones y evitar volver a introducir todos los parámetro de configuración. Seguro que también muchos de vosotros habéis agrupado las sesiones en carpetas dependiendo de la naturaleza de las mismas. Este trabajo ocupa un valioso tiempo que no nos podemos permitir repetirlo para todos los equipos que tenemos, por lo que lo más lógico es configurar todas las sesiones y exportar su configuración al resto de equipos , teniendo una sola versión y evitarnos tener que volver a configurar todas las sesiones en cada uno. El problema es que WinSCP no nos muestra la opción de exportar de una forma sencilla, por lo que tendremos que buscarnos la vida. Lo primero que debemos hacer es abrir el programa y acceder a Preferencias -> Almacenamiento (o su equivalente al inglés) En esta pantalla deberemos indicar que almacene la configuración en un archivo
3 comentarios
Leer más

Asignar valores por defecto a input=”file” y a textarea

De Xandrusoft
S eguro que muchos os habéis estado rompiendo la cabeza buscando la forma de dar un valor por defecto a el tipo de dato input=”file” . Pues que sepáis que no se puede!!! No se puede dar un valor por defecto a los campos de este tipo, ya que hacen referencia a una ruta física local y podrían surgir problemas de seguridad. Lo que se puede hacer, por ejemplo, es mostrar la imagen o el nombre del dato que tenemos almacenado y si el usuario desea modificarla, ofrecerle la opción de cargar una nueva. La etiqueta textarea , aunque pueda parecérnoslo, no se trata de un input y para darle valor por defecto simplemente debemos mostrar el texto que deseemos entre su marca de apertura y de cierre. Es decir, en caso de que lo que deseemos mostrar por defecto sea una variable, introduciremos el siguiente código: <textarea id="txtobservaciones" name="txtobservaciones" rows="2" cols="40" class="txt" ><?=$_POST["txtobservaciones"] ?&
6 comentarios
Leer más

Configuración de archivo de Logs para IpTables

De Xandrusoft
I pTables se usa para configurar, mantener e inspeccionar las tablas de reglas de filtrado de IPs en el kernel de Linux, pero por defecto, su sistema de logs no es todo lo completo esperamos. Por defecto, la mayoría de los logs del sistema se guardan en el fichero /var/log/messages pero en este caso vamos a configurar un nuevo fichero para que almacene únicamente los logs que generaremos con algunas reglas en IpTables , creando así su propio archivo de bitácora . Lo primero que debemos hacer es configurar el archivo /etc/syslog.conf , que se trata de un archivo de configuración en el que se indica el modo en que los mensajes del sistema son bitacorizados a través de la utilidad syslogd que se instala y configura por defecto en todos los sistemas GNU/Linux . Debemos añadir al final del fichero la siguiente sentencia: kern.warning /var/log/iptables.log Con esto indicamos que se almacenen los mensajes provienen del kernel con prioridad 4 o superior ('warning' es el nivel de
13 comentarios
Leer más