Creando Una Aplicación Multiplataforma para Móviles Con Jquery y Phonegap - Parte 1

CREANDO UNA APLICACIN NATIVA PARA MVILES CON JQUERY MOBILE + PHONEGAP
PARTE 1
Giancarlo Marn Gaitn

TRUJILLO PER
giankrlo_91@hotmail.com @GianMarin
PARTE 1
Hola a todos, en esta oportunidad mostrar como hacer una aplicacin web para dispositivos mviles. A modo de ejemplo haremos un website tomando como base nuestra antigua pgina 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 prctica, que nos servir tener ya conceptualizado de cmo 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
PARTE 1
3. Una vez plasmado lo que se har, procedemos a crear nuestras pginas web usando Dreamviewer, para el cual crearemos nuestro sitio IFXPERU_WEBAPP_MOVIL.
4.
Seleccionamos el nombre de la carpeta y del sitio donde se alojarn las pginas web.
PARTE 1
5. Creamos un nuevo documento en blanco html5.
PARTE 1
6. Agregamos los javascript y hojas de estilo del jquery-mobile y phonegap a nuestra carpeta WebSite que hemos creado en el Dreamveawer
PARTE 1
7. Ahora a continuacin codificaremos la pgina 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 codificacin al espaol, el cual nos posibilita utilizar letras como la Este tag nos permitir segn sus atributos device-width que el ancho de la pantalla del dispositivo, es independiente al tamao, posicin o resolucin del dispositivo mvil y user-scalable=no que el sitio se muestra en su escala original y que el usuario no tiene posibilidad de cambiar el tamao. Nombre del ttulo de la pgina 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 aplicacin, el dispositivo mvil vibrar 400 milisegundos
PARTE 1
b. En la tag del body <body> </body> escribimos los siguiente: i. Pgina Principal:
 <div data-role="page" id="inicio" data-theme="a">  <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>   <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-licount">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>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> </body>
PARTE 1
ii. Adicionalmente agregamos al body el div propio de la pgina Bloggers:

 <div data-role="page" id="blogger" data-theme="a">  <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atrás</a> <h1>Bloggers</h1> <a href="galeria.html" data-icon="star" rel="external">Galería</a> </div>   <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 Ludea</li> <li><a href="#">Six Sigma en la enseanza de Ingeniera de Software</a></li> <li><a href="#">25 Cosas que debera de tener una ciudad futurista</a></li> <li><a href="#">Trabajando con Coffee.io</a></li> <li data-role="list-divider">Giancarlo Marín</li> <li><a href="#">Como hacer una aplicacin de escritorio en menos de 5 minutos</a></li> <li><a href="#">Creando una aplicación web para dispositivos mó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>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> 
PARTE 1
iii. As mismo para la pgina Contacto:

 <div data-role="page" id="contacto" data-theme="a">  <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atrás</a> <h1>Contacto</h1> </div>   <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> </p> </form> </div>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> 
PARTE 1
iv. Tambin para la pgina Sobre Nosotros:

 <div data-role="page" id="nosotros" data-theme="a" data-add-back-btn="true">  <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atrás</a> <h1>Nosotros</h1> </div>   <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="jquerymobile/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="jquerymobile/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 informticos sencillos con gustos en la cultura geek.<br>Slogan: Con todo el power!!!</br>Correo: info.ifxperu@gmail.com</p> <p> <strong>Misin</strong><br /><p>Brindar informacin de tecnologa, programacin, informtica en general y sin formalismos.</p> <strong>Descripcin</strong><br /> <p>IFX Informatrix naci como un proyecto bloggero creado por Clayder Gonzalez y William Medina en donde se intenta recopilar artculos de informtica tiles, algunas noticias, videos, material y miscelnea basndose en el mundo informtico en el que vivimos. </p><p> Creado originalmente como Online Desktop el 7 de diciembre del 2007 bajo la plataforma Blogspot, fue migrado en mltiples ocasiones y muchos post y artculos 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 informticos con gustos en la cultura geek, programadores freelancers para proyectos de software, consultora en tecnologas de informacin, charlas y capacitaciones.</p> </p> </div>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> 
PARTE 1
v. Adems adicionar para la pgina Redes

 <div data-role="page" id="redes" data-theme="a" data-add-back-btn="true" >  <div data-role="header" data-theme="a"> <a href="#nosotros" data-rel="back" data-icon="arrow-l">Atrás</a> <h1>Redes Sociales</h1> </div>   <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>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> 
10
PARTE 1
vi. Y por ltimo para la pgina Ubcanos:

 <div data-role="page" id="ubicar" data-theme="a" data-add-back-btn="true">  <div data-role="header" data-theme="a"> <a href="#inicio" data-rel="back" data-icon="arrow-l">Atrás</a> <h1>Ubicanos</h1> </div>   <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>   <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">© 2013 IFX Informatrix - Perú</p> </div>  </div> 
11
PARTE 1
<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 posicin 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>Precisin</th><td>' + position.coords.accuracy + '</td></tr>'); if(position.coords.altitudeAccuracy) table.append('<tr><th>Altitud Precisin</th><td>' + position.coords.altitudeAccuracy + '</td></tr>'); if(position.coords.heading) table.append('<tr><th>Ttulo</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 posicin 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 ubicacin 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 mvil 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
12
PARTE 1
8. Creamos una nueva pgina para nuestra pgina Galera:

<!doctype html><html><head><meta charset="utf-8"><title>Galera 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" /> NOTA: <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"/>  Adicionalmente agregamos la siguiente <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" /> sentencia de cdigo del recuadro <script type="text/javascript" src="photoswipe/3.0.5/lib/klass.min.js"></script> amarillo, el cual nos permitir la <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> visualizacin de la galera de fotos. <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á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="Consultora 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">© 2013 IFX Informatrix - Perú</p> </div> </div></body></html>
13
PARTE 1
9. Ahora procedemos a comprobarlo en un emulador, para lo cual bajamos la extensin para Google Chrome llamado RIPPLE que nos permitir emular nuestra aplicacin en distintos mviles y plataformas
14
PARTE 1
15
PARTE 1
16
PARTE 1
17

Creando Una Aplicación Multiplataforma para Móviles Con Jquery y Phonegap - Parte 1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Creando Una Aplicación Multiplataforma para Móviles Con Jquery y Phonegap - Parte 1

Загружено:

Авторское право:

Доступные форматы

CREANDO UNA APLICACIN NATIVA PARA MVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

5. Creamos un nuevo documento en blanco html5.

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

ii. Adicionalmente agregamos al body el div propio de la pgina Bloggers:

Giancarlo Marn Gaitn

iii. As mismo para la pgina Contacto:

Giancarlo Marn Gaitn

iv. Tambin para la pgina Sobre Nosotros:

Giancarlo Marn Gaitn

v. Adems adicionar para la pgina Redes

Giancarlo Marn Gaitn

vi. Y por ltimo para la pgina Ubcanos:

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

8. Creamos una nueva pgina para nuestra pgina Galera:

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Giancarlo Marn Gaitn

Вам также может понравиться