Cargando

Ir a contenido

X

 


Web en dispositivos móviles - jQuery Mobile

En algunos caso las empresas y desarrolladores necesitan que sus aplicación o sitios web estén disponibles en diferentes dispositivos y formatos. Haremos una web de ejemplo con el framework Jquery mobile


Escrito por el ago 13 2013 14:12 jquery mobile jquery movil moviles jquery


Una solución seria desarrollar una aplicación para cada dispositivo y plataforma Android, iOS, BlackBerry, Windows Phone, etc.

La otra seria crear una web versión móvil. Una opción interesante es utilizar Jquery mobile un framework Jquery para facilitar el desarrollo compatible de sitios web orientados a dispositivos móviles. Jquery es un framework javascript muy utilizado en el desarrollo de sitios web.
Uno de los principales objetivos de Jquery mobile es que el desarrollador no tenga que luchar con los navegadores por la compatibilidad, sino que el framework brinde compatibilidad.

Comenzaremos descargando el framework desde http://jquerymobile.com/download/ las librerias jquery y css, podemos usarlas comprimidas o descromprimidas.

Creamos la cabecera de la web indicando las librerías que utilizaremos

<!DOCTYPE HTML>
<HTML>
    <head>
	    <meta charset="UTF-8">
	    <title>Alquila tu coche</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="stylesheet" href="jquery.mobile.structure-1.3.1.min.css" />
	    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
	    <script src="js/jquery-1.7.1.min.js"></script>
	    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    </head>

Luego creamos el cuerpo de la web , no exponemos aquí el css pero se le puede dar el formato y diseño que se quiera. El framework Jqeury tien distintos componentes ya programados para que podamos utilizar y facilitar la tarea. En este caso utilizaremos listview.

<body>

    <div data-role="page" id="home" data-theme="c">

	    <div data-role="content">

		    <div id="branding">

			    <h1>Alquila tu coche </h1>

		    </div>

	   	 <div class="choice_list">

			    <h1> Elige tu coche y mira la ficha t&eacute;cnica </h1>

			    <ul data-role="listview" data-inset="true" >

				    <li><a href="ficha.html" data-transition="slidedown"><img src="mini-cooper-s.jpg"  /> <h3>mini Cooper</h3></a></li>

				    <li><a href="ficha.html"  data-transition="slidedown"> <img src="mercedes.jpg"/> <h3>Mercedes</h3></a></li>

			    </ul>		  

		    </div>

	    </div>

    </div>

    </body>

</html>

El componentes listview transforma una lista html

<ul>
<li>item</li>
</ul>

en una lista con el atributo de rol lisview

 <ul data-role=listview>
 <li> Element 1 </li>
 </ul>


Jquery mobile y las librerías css ya tiene predefinido el código que transformaran a listview en un menú como el que veremos

La idea entonces de una web de alquiler de coches. Donde el usuario seleccione el coche que quiere y pueda ir a una ficha técnica, también podría añadirse un formulario de contacto.

JQuery-mobile.jpg


Vemos como en este caso el listview se ha convertido en un menú para seleccionar los coches, el ejemplo es solo la home de la web. Podremos comprobar además que funciona en cualquier dispositivo móvil o en ordenadores.

Son muchos los atributos y ventajas que tiene este framework, otra posibilidad para nuestra aplicación seria dividir en categorias utilizando el atributo list-divider por ejemplo para dividir Sedan y Cabrio.

<li data-role=list-divider>Sedan<li>
   <li><a href="ficha.html" data-transition="slidedown"><img src="mini-cooper-s.jpg"  /> <h3>mini Cooper</h3></a></li>

<li data-role=list-divider>Cabrio<li>
				    <li><a href="ficha.html"  data-transition="slidedown"> <img src="mercedes.jpg"/> <h3>Mercedes</h3></a></li>


JQuery-mobile-2.jpg


Las posibilidades para crear aplicaciones son infinitas, para sitios web estáticos, o dinámicos y aplicaciones de captura de datos.
Una herramienta muy buena y gratuita para los desarrolladores es Netbeans ya que trae incorporadas todas las librerías para desarrollar aplicaciones con html5 y Jquery mobile.

Existen diversas herramientas online como http://ipadpeek.com/ para testear aplicaciones aunque no son del todo exactas ya que son simuladores.


Podemos observar el mismo ejemplo pero con el atributo list-divider aplicado a modo de ejemplo
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


1 Comentarios


Cesar Ortiz
ago 13 2013 14:13
Grande como siempre Innovehost ;)
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 13 2013 14:12
  •   Visitas 1.7K