Creando una aplicación multiplataforma para móviles con jquery y phonegap - parte 1

18
Giancarlo Marín Gaitán TRUJILLO – PERÚ CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1 [email protected] @GianMarin

description

Primera Parte de la creación de una aplicación multiplataforma para móviles con jquery y phonegap haciendo uso de Adobe Dreamviewer

Transcript of Creando una aplicación multiplataforma para móviles con jquery y phonegap - parte 1

Page 1: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

Giancarlo Marín Gaitán TRUJILLO – PERÚ

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

[email protected]

@GianMarin

Page 2: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 1

Hola a todos, en esta oportunidad mostraré como hacer una aplicación web para dispositivos móviles. A modo de ejemplo haremos un website tomando

como base nuestra antigua página web www.ifxperu.com. Para el cual haremos lo siguiente:

1. Pre-requisitos:

a. Descargar jquery mobile aquí [http://jquerymobile.com/download/]

b. Descargar phonegap aquí [http://phonegap.com/download]

2. Crear nuestro Prototipo:

.

NOTA:

Pero, ¿Por qué es necesario crear un prototipo? Porque en realidad, es una buena

práctica, que nos servirá tener ya conceptualizado de cómo será el resultado final;

en este caso la apariencia del software y porque a su vez nos permite enfocarnos

principalmente en la experiencia del usuario

Page 3: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 2

3. Una vez plasmado lo que se hará, procedemos a crear nuestras páginas web usando Dreamviewer, para el cual crearemos nuestro sitio

IFXPERU_WEBAPP_MOVIL.

4. Seleccionamos el nombre de la carpeta y del sitio donde se alojarán las páginas web.

Page 4: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 3

5. Creamos un nuevo documento en blanco html5.

Page 5: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 4

6. Agregamos los javascript y hojas de estilo del jquery-mobile y phonegap a nuestra carpeta ‘WebSite’ que hemos creado en el Dreamveawer

Page 6: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 5

7. Ahora a continuación codificaremos la página principal.

a. En la tag del head [cabecera]:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>IFX Informatrix | Con todo el power!!! < / title> <link href="jquery-mobile/jquery.mobile.theme-1.2.0.min.css" rel="stylesheet" type="text/css"/> <link href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> <script src="phonegap/phonegap-1.4.1.js" type="text/javascript"></script> <script> document.addEventListener("deviceready", function() { // Vibrar el equipo navigator.notification.vibrate(400); }, false); </script> </head>

■■■ Permite la codificación al español, el cual nos posibilita utilizar letras como la ñ ■■■ Este tag nos permitirá según sus atributos “device-width” que el ancho de la pantalla del dispositivo, es independiente al tamaño, posición

o resolución del dispositivo móvil y “user-scalable=no” que el sitio se muestra en su escala original y que el usuario no tiene posibilidad de cambiar el tamaño.

■■■ Nombre del título de la página

■■■ Hojas de estilo propio del jquery-mobile, que nos permitirá darle una mejor apariencia a la interfaz ■■■ Javascript de propios de jquery-mobile y phonegap ■■■ Este es un evento propio que nos brinda phonegap, el cual una vez finalizado de iniciar la aplicación, el dispositivo móvil vibrará 400

milisegundos

Page 7: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 6

b. En la tag del body <body> </body> escribimos los siguiente:

i. Página Principal:

<!--************** PAGINA PRINCIPAL - INICIO ****************--> <div data-role="page" id="inicio" data-theme="a"> <!--************** INICIO - CABECERA - INDEX****************--> <div data-role="header" data-theme="a" id="logo"> <div data-role="navbar"> <ul> <li><a href="#inicio" data-theme="a”><img src="jquery-mobile/images/logoReload.png" width="300" height="80"></a> </li> </ul> </div> </div> <!--************** FIN - CABECERA - INDEX****************--> <!--************** INICIO - CUERPO - INDEX****************--> <div data-role="content" data-theme="a" > <ul data-role="listview" data-theme="c" data-inset="true"> <li><a href="#blogger"><img src="jquery-mobile/images/Blogger.png" width="70" height="80">Blogger<span class="ui-li-count">4</span> </a></li> <li><a href="#contacto"><img src="jquery-mobile/images/Contact.png" width="70" height="80">Contacto</a> </li> <li><a href="#nosotros"><img src="jquery-mobile/images/About.png" width="70" height="80">Sobre Nosotros</a> </li> <li><a href="#ubicar"><img src="jquery-mobile/images/Location Marker.png" width="70" height="80">Ubicanos</a></li> </ul> </div> <!--************** FIN - CUERPO - INDEX****************--> <!--************** INICIO - PIE - INDEX****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" class="ui-btn-active" data-icon="home">Inicio</a></li> <li><a href="#contacto" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - INDEX****************--> </div> <!--************** PAGINA PRINCIPAL - FIN ****************--></body>

Page 8: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 7

ii. Adicionalmente agregamos al body el div propio de la página Bloggers:

<!--************** PAGINA BLOGGERS - INICIO ****************--> <div data-role="page" id="blogger" data-theme="a"> <!--************** INICIO - CABECERA - BLOGGERS ****************--> <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Bloggers</h1> <a href="galeria.html" data-icon="star" rel="external">Galer&iacute;a</a> </div> <!--************** FIN - CABECERA - BLOGGERS ****************--> <!--************** INICIO - CUERPO - BLOGGERS ****************--> <div data-role="content" data-theme="d"> <ul data-role="listview" data-dividertheme="e"> <li data-role="list-divider">Fredy Guibert</li> <li><a href="#">Programando en C Sharp</a></li> <li><a href="#">Programando en C Sharp 2</a></li> <li><a href="#">Programando en C Sharp 3</a></li> <li><a href="#">Programando en C Sharp 4</a></li> <li><a href="#">Webminar Gratuito Virus Informaticos</a></li> <li data-role="list-divider">Diego Ludeña</li> <li><a href="#">Six Sigma en la enseñanza de Ingeniería de Software</a></li> <li><a href="#">25 Cosas que debería de tener una ciudad futurista</a></li> <li><a href="#">Trabajando con Coffee.io</a></li> <li data-role="list-divider">Giancarlo Mar&iacute;n</li> <li><a href="#">Como hacer una aplicación de escritorio en menos de 5 minutos</a></li> <li><a href="#">Creando una aplicaci&oacute;n web para dispositivos m&oacute;viles con jquery mobile y phonegap</a></li> <li data-role="list-divider">Wilson Vargas</li> <li><a href="#">Lo que los desarrolladores deben saber de Windows 8</a></li> <li><a href="#">TypeScript, el nuevo lenguaje de programacion de Microsoft</a></li> <li><a href="#">Lo nuevo de Windows Defender en Windows 8</a></li> </ul> </div> <!--************** FIN - CUERPO - BLOGGERS ****************--> <!--************** INICIO - PIE - BLOGGERS ****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" data-icon="home">Inicio</a></li> <li><a href="#contacto" class="ui-btn-active" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - BLOGGERS****************--> </div> <!--************** PAGINA BLOGGERS - FIN ****************-->

Page 9: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 8

iii. Así mismo para la página Contacto:

<!--************** PAGINA CONTACTO - INICIO ****************--> <div data-role="page" id="contacto" data-theme="a"> <!--************** INICIO - CABECERA - CONTACTO ****************--> <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Contacto</h1> </div> <!--************** FIN - CABECERA - CONTACTO ****************--> <!--************** INICIO - CUERPO - CONTACTO ****************--> <div data-role="content" data-theme="c" > <form action="" method="post" name="tourDate"> <p>Nombre: <input name="nombre" id="nombre" type="text"></p> <p>Email: <input name="email" type="email"></p> <p>Asunto: <input name="asunti" type="text"></p> <p><label for="mensajes">Mensaje:</label> <textarea name="mensajes" id="mensajes"> </textarea></p> <input name="submit" type="submit" value="Enviar"> <p>&nbsp;</p> </form> </div> <!--************** FIN - CUERPO - CONTACTO ****************--> <!--************** INICIO - PIE - CONTACTO ****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" data-icon="home">Inicio</a></li> <li><a href="#contacto" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - CONTACTO****************--> </div> <!--************** PAGINA CONTACTO - FIN ****************-->

Page 10: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 9

iv. También para la página Sobre Nosotros:

<!--************** PAGINA NOSOTROS - INICIO ****************--> <div data-role="page" id="nosotros" data-theme="a" data-add-back-btn="true"> <!--************** INICIO - CABECERA - NOSOTROS ****************--> <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Nosotros</h1> </div> <!--************** FIN - CABECERA - NOSOTROS ****************--> <!--************** INICIO - CUERPO - NOSOTROS ****************--> <div data-role="navbar" data-theme="e" > <ul> <li><a href="http://www.ifxperu.com/" data-show-count="false" data-show-screen-name="false" target="_blank"><img src="jquery- mobile/images/browser.png" width="18" height="18" alt="Visitamos!"><br />Visitanos</a></li> <li><a href="#redes" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"><img src="jquery-mobile/images/redes.png" width="18" height="18" alt="Visitanos en las redes!"><br />Redes Sociales</a></li> </ul> </div> <div data-role="content" data-theme="d" > <p>Descripcion: IFXPERU Team - Grupo de informáticos sencillos con gustos en la cultura geek.<br>Slogan: Con todo el power!!!</br>Correo: [email protected]</p> <p> <strong>Misión</strong><br /><p>Brindar información de tecnología, programación, informática en general y sin formalismos.</p> <strong>Descripción</strong><br /> <p>IFX Informatrix nació como un proyecto bloggero creado por Clayder Gonzalez y William Medina en donde se intenta recopilar artículos de informática útiles, algunas noticias, videos, material y miscelánea basándose en el mundo informático en el que vivimos. </p><p> Creado originalmente como Online Desktop el 7 de diciembre del 2007 bajo la plataforma Blogspot, fue migrado en múltiples ocasiones y muchos post y artículos se perdieron en las consiguientes versiones, hasta llamarse como se llama hoy.</p><p> En la actualidad mantenemos la misma esencia, somos un grupo de informáticos con gustos en la cultura geek, programadores freelancers para proyectos de software, consultoría en tecnologías de información, charlas y capacitaciones.</p> </p> </div> <!--************** FIN - CUERPO - NOSOTROS ****************--> <!--************** INICIO - PIE - NOSOTROS ****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" data-icon="home">Inicio</a></li> <li><a href="#contacto" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" class="ui-btn-active" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - NOSOTROS ****************--> </div> <!--************** PAGINA NOSOTROS - FIN ****************-->

Page 11: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 10

v. Además adicionar para la página Redes

<!--************** PAGINA REDES - INICIO ****************--> <div data-role="page" id="redes" data-theme="a" data-add-back-btn="true" > <!--************** INICIO - CABECERA - REDES ****************--> <div data-role="header" data-theme="a"> <a href="#nosotros" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Redes Sociales</h1> </div> <!--************** FIN - CABECERA - REDES ****************--> <!--************** INICIO - CUERPO - REDES ****************--> <div data-role="navbar" data-theme="c" > <ul> <li><a href="https://twitter.com/ifxperu" class="twitter-follow-button" target="_blank"><img src="jquery-mobile/images/twitter.png" width="18" height="18"><br />Encuentranos</a></li> <li><a href="https://www.facebook.com/ifxperu" target="_blank"><img src="jquery-mobile/images/facebook.png" width="18" height="18"><br />Dale Me gusta</li> <li><a href="http://www.youtube.com/user/IFXPeru" target="_blank"><img src="jquery-mobile/images/youtube.png" width="18" height="18"><br />Miranos</a></li> </ul> </div> <div data-role="content" data-theme="d" > <h4>Nuestros últimos tweet</h4> <p><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"> </script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 3, interval: 30000, width: 'auto', height: 300, theme: { shell: { background: '#05296E', color: '#ffffff' }, tweets: { background: '#faeca4', color: '#030303', links: '#05296E' } }, features: { scrollbar: true, loop: false, live: false, behavior: 'all” } }).render().setUser('ifxperu').start(); </script> </p> </div> <!--************** FIN - CUERPO - REDES ****************--> <!--************** INICIO - PIE - REDES ****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" data-icon="home">Inicio</a></li> <li><a href="#contacto" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" class="ui-btn-active" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - REDES ****************--> </div> <!--************** PAGINA REDES - FIN ****************-->

Page 12: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 11

vi. Y por último para la página Ubícanos:

<!--************** PAGINA UBICANOS - INICIO ****************--> <div data-role="page" id="ubicar" data-theme="a" data-add-back-btn="true"> <!--************** INICIO - CABECERA - UBICANOS ****************--> <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Ubicanos</h1> </div> <!--************** FIN - CABECERA - UBICANOS ****************--> <!--************** INICIO - CUERPO - UBICANOS ****************--> <div data-role="content" data-theme="d" > <h2>Estamos en:</h2> <div style="width: 100%; height:250px; margin-bottom:10px;" id="map_canvas"></div> <div id="geolocation"></div> </div> <!--************** FIN - CUERPO - UBICANOS ****************--> <!--************** INICIO - PIE - UBICANOS ****************--> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="#inicio" data-icon="home">Inicio</a></li> <li><a href="#contacto" data-icon="grid">Blogger</a></li> <li><a href="#nosotros" data-icon="info">Sobre Nosotros</a></li> </ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> <!--************** FIN - PIE - UBICANOS ****************--> </div> <!--************** PAGINA UBICANOS - FIN ****************-->

Page 13: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 12

<script> // manejos de documentos listos y phonegap ya terminado de iniciarse window.addEventListener('load', function () { document.addEventListener('deviceready', onDeviceReady, false);}, false) // Phonegap está cargado y obtiene las coordenadas de la posicion gps function onDeviceReady(){ getPosition();} // obtiene la posición actual y lo muestra en un mapa function getPosition(){ var geoOptions = { enableHighAccuracy: true, timeout: 10000 }; navigator.geolocation.getCurrentPosition(function(position){ // geoSuccess var geolocation = $('#geolocation'); geolocation.html('<table></table>'); var table = geolocation.find('table'); if(position.coords.latitude) table.append('<tr><th>Latitud</th><td>' + position.coords.latitude + '</td></tr>'); if(position.coords.longitude) table.append('<tr><th>Longitud</th><td>' + position.coords.longitude + '</td></tr>'); if(position.coords.altitude) table.append('<tr><th>Altitud</th><td>' + position.coords.altitude + '</td></tr>'); if(position.coords.accuracy) table.append('<tr><th>Precisión</th><td>' + position.coords.accuracy + '</td></tr>'); if(position.coords.altitudeAccuracy) table.append('<tr><th>Altitud Precisión</th><td>' + position.coords.altitudeAccuracy + '</td></tr>'); if(position.coords.heading) table.append('<tr><th>Título</th><td>' + position.coords.heading + '</td></tr>'); if(position.coords.speed) table.append('<tr><th>Velocidad</th><td>' + position.coords.speed + '</td></tr>'); if(position.coords.timestamp) table.append('<tr><th>Marca de Tiempo</th><td>' + new Date(position.timestamp) + '</td></tr>'); /* muestra posición en un mapa */ var map_canvas = $('#map_canvas'); map_canvas.gmap( {'center' : position.coords.latitude + ',' + position.coords.longitude, 'zoom' : 12, 'disableDefaultUI':true, 'callback':function(){ var self = this; var marker = self.addMarker({ 'position' : this.get('map').getCenter() }); marker.click(function(){ self.openInfoWindow({ 'content' : 'Esta es su ubicación actual' }, this); }); } }); }, function(error){ // geoError navigator.notification.alert('error: ' + error.message + '\n' + 'code: ' + error.code); }, geoOptions); } </script>

NOTA:

Adicionalmente agregamos el script el cual hará que se capture las

coordenadas de nuestra móvil y lo muestre en una imagen, en la

imagen anterior no se muestra el mapa porque para visualizarlo se

debe hacer uso de un emulador y en este caso usaremos RIPPLE

Page 14: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 13

8. Creamos una nueva página para nuestra página Galería:

<!doctype html><html><head><meta charset="utf-8"><title>Galería de Fotos</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="jquery-mobile/jquery.mobile.theme-1.2.0.min.css" rel="stylesheet" type="text/css"/> <link href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" type="text/css"/> <!--These are the photo gallery specific css files needed by photoswipe--> <link href="photoswipe/3.0.5/examples/jquery-mobile.css" type="text/css" rel="stylesheet" /> <link href="photoswipe/3.0.5/photoswipe.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="photoswipe/3.0.5/lib/klass.min.js"></script> <script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="photoswipe/3.0.5/code.photoswipe.jquery-3.0.5.min.js"></script> <!—Script para que la animacion de fotos funcione--> <script type="text/javascript"> (function(window, PhotoSwipe){document.addEventListener('DOMContentLoaded', function(){ var options = { getImageMetaData: function(el){return {href: el.getAttribute('href'),something:el.getAttribute('data-something'),anotherThing: el.getAttribute('data-another-thing')}}}, instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){var currentImage = instance.getCurrentImage(); console.log(currentImage.metaData.something); console.log(currentImage.metaData.anotherThing);});}, false); window, window.Code.PhotoSwipe)); </script> </head> <body> <div data-role="page" data-add-back-btn="true" data-theme="a"> <div data-role="header" data-theme="a"> <a href="index.html#contacto" rel="external" data-rel="back" data-icon="arrow-l">Atr&aacute;s</a> <h1>Galeria de Fotos</h1> </div> <div data-role="content"> <ul id="Gallery" class="gallery"> <li><a href="galeriafoto/SliderIFX001B.png" rel="external"><img src="galeriafoto/SliderIFX001B.png" alt="Desarrollo de Software" /></a></li> <li><a href="galeriafoto/SliderIFX002B.png" rel="external"><img src="galeriafoto/SliderIFX002B.png" alt="Consultoría en Tecnologias de Informacion" /></a></li><li><a href="galeriafoto/SliderIFX003B.png" rel="external"><img src="galeriafoto/SliderIFX003B.png" alt="Charlas y Capacitaciones" /></a></li> </ul> </div> <footer data-role="footer" data-theme="a" data-position="fixed"> <div data-role="navbar" data-theme="a" > <ul> <li><a href="index.html#inicio" data-icon="home" rel="external">Inicio</a></li> <li><a href="index.html#contacto" data-icon="grid" rel="external">Blogger</a></li> <li><a href="index.html#nosotros" data-icon="info" rel="external">Sobre Nosotros</a></li></ul> </div> <p align="center" class="copyright">&copy; 2013 IFX Informatrix - Per&uacute;</p> </div> </div></body></html>

NOTA:

Adicionalmente agregamos la siguiente

sentencia de código del recuadro

amarillo, el cual nos permitirá la

visualización de la galería de fotos.

Page 15: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 14

9. Ahora procedemos a comprobarlo en un emulador, para lo cual bajamos la extensión para Google Chrome llamado RIPPLE que nos permitirá emular

nuestra aplicación en distintos móviles y plataformas

Page 16: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 15

Page 17: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 16

Page 18: Creando una aplicación multiplataforma para móviles con jquery y phonegap -  parte 1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 1

Giancarlo Marín Gaitán 17