Upload
cancerbero-luthier
View
42
Download
0
Embed Size (px)
DESCRIPTION
taller de tecnologias
Citation preview
5/25/2018 Ejercicios - Taller de Tecnologas
1/25
Ejercicios
Taller de tecnologas
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
2/25
Antes del Ejercicio 1
jQuery Mobile - MaquetacinVamos a necesitar:
Bsico de PhoneGapBsico de jQueryBsico de jQuery MobileEstructura de pginasPginas independientes y multi pginasdata-*ListViewsFormularios
Navegacin
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
3/25
PhoneGap (Apache Cordova)
Es un framework para la creacin de aplicaciones mviles a partir detecnologa HTML5.
Permite crear aplicaciones hbridas nativas - web.
Acceso a caractersticas propias de smartphone. (API del sistema nativo)
Posibilidad de desarrollar para mltiples plataformas.
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
4/25
Android - PhoneGap
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
5/25
JavaScript
Es ideal generar un archivo JS por cada pgina que lo necesite.
El evento $('document').ready de jQuery se cambia a $(document).bind('pageinit en jQuery Mobile.Este evento es lanzado en el momento que la pgina es iniciada.
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
6/25
jQuery
Docente: Alexis Espsito
Es una biblioteca JavaScript que nos permite simplificar eltrabajo de interactuar con HTML.
Manipular DOM
Eventos
Animacin
AJAX
5/25/2018 Ejercicios - Taller de Tecnologas
7/25
jQuery Mobile
Docente: Alexis Espsito
Es una framework para trabajar con la interfaz de usuario.
Especialmente diseado para aplicaciones mviles.
Utiliza y aprovecha al mximo HTML5, CSS3 y JS.
5/25/2018 Ejercicios - Taller de Tecnologas
8/25
jQuery Mobile
Docente: Alexis Espsito
ElementosSoporte de elementos HTML
Pginas
Popups
Barras de herramientas
Barra de bsquedasVistas de Listas
Botones
Iconos
Formularios
Calendarios
RadioButtonsCheckbox
Pestaas
Barras de progreso
y ms...
5/25/2018 Ejercicios - Taller de Tecnologas
9/25
jQuery Mobile
Docente: Alexis Espsito
Atributos data-*jQuery Mobile trabaja con atributos data-* en las etiquetas HTML
para manejo de apariencia y funcionalidades.
Los atributos data-* son atributos personalizables, los siguientes
son los ms utilizados y son propios de jQuery Mobile:
data-role
page
header
content
footer
list-viewnavbar
button
data-theme
data-rel
data-icon
data-ajax
data-transition
y ms...
http://jquerymobile.com/test/docs/api/data-attributes.html
http://jquerymobile.com/test/docs/api/data-attributes.htmlhttp://jquerymobile.com/test/docs/api/data-attributes.htmlhttp://jquerymobile.com/test/docs/api/data-attributes.html5/25/2018 Ejercicios - Taller de Tecnologas
10/25
jQuery Mobile
Docente: Alexis Espsito
Estructura de pginasjQuery Mobile nos permite tener pginas (pantallas) de dos formas
diferentes.
Varias pginas dentro de un mismo HTML.
Estas pginas se precargan a la vezDiv data-rol="page"
Una pgina por HTML
Estas pginas se cargan de forma tradicional.
Para navegarlas se utiliza
5/25/2018 Ejercicios - Taller de Tecnologas
11/25
jQuery Mobile
Docente: Alexis Espsito
ListViewsLos listados se construyen en base a elementos ul y li utilizando el
atributo data-rol="listview"
Para actualizar un listview jQuery Mobile nos brinda el metodo
$('#mylist').listview('refresh');
FormulariosSe crean de manera similar a un formulario en HTML
Barra de navegacin
Uno
Dos
5/25/2018 Ejercicios - Taller de Tecnologas
12/25
Ejercicio 1
jQuery Mobile - MaquetacinConstruir una aplicacin mobile donde el usuario pueda navegar por 2 pantallas distintas.Pantalla 1: Listado de clientes. (Se muestra slo el Nombre)Pantalla 2: Formulario de ingreso de clientes.
El clientes contiene id, nombre, direccin y telfono.
Para su creacin:
No utilizar multi pginaPara la navegacin utilizar Navbar
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
13/25
Antes del Ejercicio 2
jQuery Mobile - NavegacinVamos a necesitar:
jQuery MobilejQueryNavegacin entre pginaPginas independientes y multi pginasArchivos JSEnvo de parmetros
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
14/25
Ejercicio 2
jQuery Mobile - NavegacinEn base al ejercicio 1, el usuario puede obtener ms informacin de un cliente presionando sobre l en la lista.
Para su creacin:
El detalle de la informacin se muestra en otra pantalla distinta.Esta pantalla debe permitir volver para atrs.Para llegar a la pantalla donde se muestra el detalle, es necesario enviar el parmetro Id por GET en la url.
Interesante: (funcin para obtener un parmetro por GET)$.urlParam = function(name) {
var results = new RegExp('[\\?&]' + name + '=([^]*)').exec(window.location.href);return results[1] || 0;
}
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
15/25
jQuery Mobile - Consulta servicio web (JSON y AJAX)Vamos a necesitar:
jQueryAJAXJSON
Antes del Ejercicio 3
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
16/25
AJAX
Tecnologa que nos permite comunicarnos con el servidor sin necesidad de recargar la pgina.
Trabaja de manera asincrnica por lo que necesitamos tener un callback para enterarnos cuando finaliza la llamada.Podemos hacer una llamada AJAX por POST o por GET, y como resultado podemos obtener TEXT, XML, JSON, etc.
jQuery nos brinda los mecanismo para trabajar con AJAX.
Docente: Alexis Espsito
JSON
JSON es un formato ligero de datos.Se utiliza tanto para enviar informacin al servidor como para recibir.Una vez que obtenemos un JSON pedido mediante AJAX al servidor, el mismo se puede manejar como si fuera unobjeto. Ejemplo: usuario.nombre;
5/25/2018 Ejercicios - Taller de Tecnologas
17/25
jQuery Mobile - Consulta servicio web (JSON y AJAX)
En base al proyecto creado previamente debemos consultar un servicio web donde obtenemos un listado depedidos.El listado de pedidos se debe mostrar en una nueva pantalla.En el listado se mostrar: fecha, monto y nombre del clienteUrl del servicio: http://innvenio.com/ort/pedidos.php
Para su creacin:
Agregar la nueva pantalla como opcin al Navbar
Interesante:
$.ajax({
url : "",
data : "",
dataType : "JSON",
beforeSend : function() {},
success : function(response) {}
});
Ejercicio 3
Docente: Alexis Espsito
http://innvenio.com/ort/pedidos.php5/25/2018 Ejercicios - Taller de Tecnologas
18/25
Antes del Ejercicio 4
jQuery Mobile - Consulta servicio web con parmetro
Vamos a necesitar:
jQueryAJAXJSON
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
19/25
Ejercicio 4
jQuery Mobile - Consulta servicio web con parmetro
A la pantalla donde se muestra el detalle de un cliente debemos agregar un botn para consultar sus pedidos.El listado resultantes de pedidos de un cliente se debe mostrar en la misma pantalla debajo del botn.Url del servicio: http://innvenio.com/ort/pedidos.phpParmetro a enviar: id_cliente
Docente: Alexis Espsito
http://innvenio.com/ort/pedidos.php5/25/2018 Ejercicios - Taller de Tecnologas
20/25
Antes del Ejercicio 5
PhoneGap - Storage
Vamos a necesitar:
Apache CordovaStorageOpen DatabaseExecute SQLSQLTransactionSQLResultsetDeviceReady
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
21/25
Storage
Docente: Alexis Espsito
PhoneGap nos brinda mtodos para el sencillo manejo de la base
de datos y todo desde JavaScript.
Abrir base de datos
window.openDatabase("nombre", "versin", "nombre a mostrar", tamao);
Ejecutar transaccin
db.transaction(function_ejecutante, function_error, function_exito);
Funcin que ejecuta
function function_ejecutante(tx)
{
tx.executeSql('SQL'); //SOLO EJECUTAR
tx.executeSql('SELECT ..', [], funcion_ejecutado, function_error); //EJECUTAR CON RESULTADO}
function funcion_ejecutado(tx, results) {}
5/25/2018 Ejercicios - Taller de Tecnologas
22/25
Ejercicio 5
PhoneGap - Storage
Para hacer la aplicacin ms completa, vamos a permitirle al usuario agregar nuevos clientes desde la pantalla delformulario.A su vez vamos a cambiar la pantalla del listado de clientes para que la misma sea cargada con informacin directadesde la base de datos.
Interesante:
document.addEventListener("deviceready", function(){}, false);
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
23/25
Antes del Ejercicio 6
PhoneGap - API
Vamos a necesitar:
Apache CordovaStorageOpen DatabaseExecute SQLSQLTransactionSQLResultsetDeviceReadyAPI
Docente: Alexis Espsito
5/25/2018 Ejercicios - Taller de Tecnologas
24/25
API
Docente: Alexis Espsito
PhoneGap nos permite interactuar con los diferentes componentes y
servicios nativos del smartphone.
Que nos permite?
Accelerometer
Camera
Compass
Contacts
Files
Geolocalization
Notification
Storage
y ms...
5/25/2018 Ejercicios - Taller de Tecnologas
25/25
Ejercicio 6
PhoneGap - API
Queremos asociar clientes a contactos internos del smartphone.Dentro del detalle de un cliente le vamos a permitir al usuario ver el listado de contactos y seleccionar uno paraasociar.Se deber agregar un botn en la pantalla de detalles de un cliente donde presionando se mostrar una lista decontactos. Seleccionando uno, el usuario quedar asociado a ese contacto y en la pantalla de detalle aparecer su
nmero de telfono para llamar.
Interesante:
var campos = ["id", "phoneNumbers", "name"];
navigator.contacts.find(campos, onSuccess, onError, {filter:""});
'nombre';
Docente: Alexis Espsito