Aplicaciones móviles
![](/daisy/Materials/img/uoc_masterbrand.png)
Índice
- 1.Introducción
- 2.Desarrollo de aplicaciones híbridas con PhoneGap
- 3.Creación de aplicaciones móviles con estándares Web
- 4.Uso de un emulador para testear la aplicación
- 5.Creación de la aplicación y descarga en nuestro teléfono móvil
- 6.Interacción de la aplicación con el dispositivo móvil
- 7.Aplicación web con varias páginas, recuperación dinámica de datos y Google Maps
1.Introducción
-
Aplicaciones nativas: aquellas que están íntegramente programadas en un lenguaje y entorno de programación desarrollado específicamente para cada sistema operativo (Java para Android, Objective-C para iOS y C# para Windows Phone).
-
Aplicaciones móviles con estándares web: completamente desarrolladas en HTML5.
-
Aplicaciones híbridas: aplicaciones creadas en parte con el entorno de desarrollo nativo y en parte con lenguaje web (HTML5).
2.Desarrollo de aplicaciones híbridas con PhoneGap
3.Creación de aplicaciones móviles con estándares Web
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.js"></script> <title>Hello World</title> </head>
3.1.Estructura del header
<meta name="viewport" content="width=device-width, initial-scale=1">
3.2.Estructura del body
<body> <div id="index" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Hello Word Header</h1> </div> <div data-role="content"> Hello world Content! </div> <div data-role="footer"> <h2>Hello Word Footer</h2> </div> </div> </body> </html>
4.Uso de un emulador para testear la aplicación
5.Creación de la aplicación y descarga en nuestro teléfono móvil
-
Comprimir en un .zip todos los archivos de nuestra aplicación.
-
Instalar un lector de códigos QR.
6.Interacción de la aplicación con el dispositivo móvil
7.Aplicación web con varias páginas, recuperación dinámica de datos y Google Maps
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.js"> </script> <!-- Librerías para google maps --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"> </script> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <title>Pizza World</title> </head>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.js"></script> <!-- Librerías para google maps --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"> </script> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <title>Pizza World</title> </head>
$('#index').bind('pageinit', function(event) { loadRestaurants(); });
function loadRestaurants(){ $.getJSON("http://comoras.uoc.edu/~abartroli/apps/pizza/src/restaurants.php") .done(function (data) { var i, rest; $.each(data.restaurants, function (i, rest) { $("#restaurant-list").append("<li><a href='restaurant.html? id_rest="+rest.id+"&aa=4'>"+ "<h3>" + rest.name + "</h3>" + "<div> <img src='"+rest.img+"' width=120 height=120 /></div>" + "</a>"+ "<p> Tlf:"+rest.phone+"</p> <p> Av. Diagonal 621</p></li>"); }); }); $('#restaurant-list').listview('refresh'); // refrescamos la lista de la página index.html }
<body> <div id="restoDetail" data-role="page" data-add-back-btn="true"> <div data-role="header"> <h1>Restaurant details</h1> <button id="saveBtn" data-icon="star" class="ui-btn- right">Favoritos</button> </div> <div data-role="content"> <div id="restoDetails"> <h3 id="restoName"></h3> <img id="restoImg" src="" width="100%"/> <h5>Telephon</h5> <p id="telephon"></p> <h5>Description</h5> <p id="description"></p> <p id="forks"></p> </div> <div id="map_canvas" style="width:device-width; height:150px; "></div> </div> </div> <script type="text/javascript" src="js/index.js"></script> </body>
-
Captura del evento para mostrar el código cuando se carga la página.
-
Función para recuperar los parámetros de la página con el identificador del restaurante.
-
Función para recuperar los datos del restaurante.
-
Función para definir el evento de mostrar el mapa de Google cuando el dispositivo esté preparado.
-
Funciones para mostrar el mapa de Google.
$(document).delegate("#restoDetail", "pageshow", function() { var id = getUrlVars().id_rest; loadRestoDetail(id); });
function loadRestoDetail( id ){ $.getJSON("http://comoras.uoc.edu/~abartroli/apps/pizza/src/resto_detail.php? id_rest="+id).done(function(data) { var rest = data; $('#restoName').html("<p>" + rest.name + "</p>"); $('#restoImg').attr('src', rest.img ); $('#telephon').text(rest.phone); $('#description').text(rest.descr);
document.addEventListener("deviceready", function() { onDeviceReady( lat, lon );}, false);
onDeviceReady( rest.lat, rest.lon ); }); }
function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }
function GoogleMap(){
this.initialize = function( lat, lon ){ var map = showMap( lat, lon ); }
var showMap = function( lat, lon ){ var mapOptions = { zoom: 16, center: new google.maps.LatLng(lat, lon), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); return map; } } function onDeviceReady( lat, lon ){ var map = new GoogleMap(); map.initialize( lat, lon ); }