© 2015 Título de experto universitario en programación con tecnologías web
Desarrollos web adaptados a
dispositivos móvile...
© 2015 Título de experto universitario en programación con tecnologías web
ENIAC (1946)
30.000.000 g
170.000 W
500.000 $
3...
© 2015 Título de experto universitario en programación con tecnologías web
El presente es móvil
© 2015 Título de experto universitario en programación con tecnologías web
Android® iOS® Windows Phone® Blackberry
Platafo...
© 2015 Título de experto universitario en programación con tecnologías web
Plataformas relevantes
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
Único lenguaje Múlt...
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
Único lenguaje
Bajo...
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - ¿Qué es?
Es un framework para el desarr...
© 2015 Título de experto universitario en programación con tecnologías web
VS
Framework
Se basa en AngularJS
Declarativo
I...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Más que un framework
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Creator
creator.ionic.io
© 2015 Título de experto universitario en programación con tecnologías web
Pero centrémonos en el desarrollo
Estructura y ...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS + HTML5
Estética muy cercana
a la p...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Colores
Similar a bootstrap.
<but...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Iconos
Paquete de iconos vectoria...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Botones
button-<color>
<button cl...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Botones
Botones con iconos
<butto...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Toggle
<label class="toggle">
<in...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Checkbox
<li class="item item-che...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Rango
<div class="item range rang...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Listados
<ul class="list">
<li cl...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Grid System
<div class="row">
<di...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Estructura básica
<ion-pane>
<div...
© 2015 Título de experto universitario en programación con tecnologías web
VAMOS AL RECREO!
Pero no al que os pensáis...
p...
© 2015 Título de experto universitario en programación con tecnologías web
Ejercicio 1:
Crear una aplicación de cero y cre...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Angular JS
Uso del magnífico framework ...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - JS - Popover
$ionicPopover.fromTemplate...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - JS - Popup
$scope.showConfirm = functio...
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - JS - Action sheet
var sheet = $ionicAct...
© 2015 Título de experto universitario en programación con tecnologías web
Ahora instalemos Ionic en nuestra
máquina
> npm...
© 2015 Título de experto universitario en programación con tecnologías web
Y que empiece la fiesta
> ionic start proweb1 b...
© 2015 Título de experto universitario en programación con tecnologías web
Ejercicio 2
Crear una aplicación de cero y crea...
© 2015 Título de experto universitario en programación con tecnologías web
Ejercicio 3
Sobre el ejercicio 2:
1. Implementa...
© 2015 Título de experto universitario en programación con tecnologías web
Funcionalidad avanzada:
Estructuras de navegaci...
© 2015 Título de experto universitario en programación con tecnologías web
AngularJS por defecto utiliza ngRoute (angular-...
© 2015 Título de experto universitario en programación con tecnologías web
var myApp = angular.module('myApp', ['ui.router...
© 2015 Título de experto universitario en programación con tecnologías web
<ion-view>
<!-- este elemento se rellena con el...
© 2015 Título de experto universitario en programación con tecnologías web
Modales
La transición básica a esta vista que s...
© 2015 Título de experto universitario en programación con tecnologías web
Navegación horizontal
<ion-nav-bar class="bar-p...
© 2015 Título de experto universitario en programación con tecnologías web
Side menu
<ion-side-menus>
<!-- Center content ...
© 2015 Título de experto universitario en programación con tecnologías web
Ejercicio 4
Crear nuevo proyecto de ionic llama...
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
Gestionar plataformas
Nos permite...
Gestionar ...
© 2015 Título de experto universitario en programación con tecnologías web
Gestionar plataformas
Comandos
Listar: platform...
© 2015 Título de experto universitario en programación con tecnologías web
Gestionar plugins
Comandos
Listar: plugin list
...
© 2015 Título de experto universitario en programación con tecnologías web
Compilar aplicación
Comandos
Ejecutar en navega...
© 2015 Título de experto universitario en programación con tecnologías web
Ionicview
1. Descargar ionicview
2. Registrarse...
© 2015 Título de experto universitario en programación con tecnologías web
ngCordova
Cordova con la potencia de AngularJS
© 2015 Título de experto universitario en programación con tecnologías web
ngCordova es una colección de más de 63 extensi...
© 2015 Título de experto universitario en programación con tecnologías web
Ejemplo ngCordova
1. cordova plugin add cordova...
© 2015 Título de experto universitario en programación con tecnologías web
Proyecto final
© 2015 Título de experto universitario en programación con tecnologías web
Consejos para realizar el PF.
Paso 1
● Leer tod...
© 2015 Título de experto universitario en programación con tecnologías web
Proyecto final
1. Login
a. Si el usuario y cont...
Próxima SlideShare
Cargando en…5
×

Ionic, Adaptación de desarrollos web a dispositivos móviles

566 visualizaciones

Publicado el

Presentación de la asignatura "Adaptación a Dispositivos móviles" del Curso de Especialista en Desarrollos Web (PROWEB) de la Universidad de Alicante.

Publicado en: Software
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
566
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
8
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Ionic, Adaptación de desarrollos web a dispositivos móviles

  1. 1. © 2015 Título de experto universitario en programación con tecnologías web Desarrollos web adaptados a dispositivos móviles Ionic + Cordova
  2. 2. © 2015 Título de experto universitario en programación con tecnologías web ENIAC (1946) 30.000.000 g 170.000 W 500.000 $ 30.000 mm 500 FLOPS iPhone 6 (2014) 129 g 5 W 699 $ 138 mm 7.680.000.000 FLOPS x 0,0000043 x 15.360.000
  3. 3. © 2015 Título de experto universitario en programación con tecnologías web El presente es móvil
  4. 4. © 2015 Título de experto universitario en programación con tecnologías web Android® iOS® Windows Phone® Blackberry Plataformas relevantes
  5. 5. © 2015 Título de experto universitario en programación con tecnologías web Plataformas relevantes
  6. 6. © 2015 Título de experto universitario en programación con tecnologías web Posibilidades de desarrollo
  7. 7. © 2015 Título de experto universitario en programación con tecnologías web Posibilidades de desarrollo
  8. 8. © 2015 Título de experto universitario en programación con tecnologías web Posibilidades de desarrollo Único lenguaje Múltiples lenguajes Bajo rendimiento Mayor rendimiento → Rápido desarrollo Desarrollo dedicado Mezcla Acceso al dispositivoSin acceso
  9. 9. © 2015 Título de experto universitario en programación con tecnologías web Posibilidades de desarrollo Único lenguaje Bajo rendimiento Mayor rendimiento Acceso al dispositivo Rápido desarrollo Múltiples lenguajes Mezcla Desarrollo dedicado Sin acceso
  10. 10. © 2015 Título de experto universitario en programación con tecnologías web
  11. 11. © 2015 Título de experto universitario en programación con tecnologías web Ionic - ¿Qué es? Es un framework para el desarrollo de aplicaciones híbridas basadas en html5, css y javascript, con una estética y usabilidad mobile friendly. Utiliza AngularJS y Cordova.
  12. 12. © 2015 Título de experto universitario en programación con tecnologías web VS Framework Se basa en AngularJS Declarativo Incluye compilador Librería Se basa en jQuery Imperativo No incluye compilador
  13. 13. © 2015 Título de experto universitario en programación con tecnologías web Ionic - Más que un framework
  14. 14. © 2015 Título de experto universitario en programación con tecnologías web Ionic - Creator creator.ionic.io
  15. 15. © 2015 Título de experto universitario en programación con tecnologías web Pero centrémonos en el desarrollo Estructura y estética Funcionalidad+
  16. 16. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS + HTML5 Estética muy cercana a la propuesta por Apple En desarrollo la adecuación con la guía de estilo Material Design
  17. 17. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Colores Similar a bootstrap. <button class="button button-light"> Hello button </button>
  18. 18. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Iconos Paquete de iconos vectoriales Llamado ionicons Descargarlos desde ionicons.com Luego añadir las fonts y css. Ejemplo <i class="icon ion-star"></i>
  19. 19. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Botones button-<color> <button class="button button-stable"> button-stable </button> button-block <button class="button button-block"> button-stable </button> button-full <button class="button button-full"> button-stable </button>
  20. 20. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Botones Botones con iconos <button class="button icon-left ion-home"> Home </button> Agrupación de botones <div class="button-bar"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div>
  21. 21. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Toggle <label class="toggle"> <input type="checkbox"> <div class="track"> <div class="handle"></div> </div> </label>
  22. 22. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Checkbox <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> Flux Capacitor </li>
  23. 23. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Rango <div class="item range range-positive"> <i class="icon ion-volume-low"></i> <input type="range" name="volume" min="0" max="100" value="33"> <i class="icon ion-volume-high"></i> </div>
  24. 24. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Listados <ul class="list"> <li class="item"> ... </li> </ul>
  25. 25. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Grid System <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div> ● Columna libre ● Columna fija ● Alineación vertical ○ De fila ○ De columna ● Responsive
  26. 26. © 2015 Título de experto universitario en programación con tecnologías web Ionic - CSS - Estructura básica <ion-pane> <div class="bar bar-stable bar-header"> <h1 class="title">Awesome App</h1> </div> <div class="content padding has-header"> <button class="button button-assertive">I'm a button</button> </div> <div class="bar bar-stable bar-footer"> <h1 class="title">Awesome App</h1> </div> </ion-pane>
  27. 27. © 2015 Título de experto universitario en programación con tecnologías web VAMOS AL RECREO! Pero no al que os pensáis... play.ionic.io Y en otra pestaña: http://ionicframework.com/docs/
  28. 28. © 2015 Título de experto universitario en programación con tecnologías web Ejercicio 1: Crear una aplicación de cero y crear: 1. Header con título “Ejercicio 1” 2. Listado con un conjunto de libros. Cada ítem debe tener como mínimo el título. 3. Footer gris que contenga un interruptor. Cuando esté encendido el header se vuelve verde, cuando esté apagado se queda blanca.
  29. 29. © 2015 Título de experto universitario en programación con tecnologías web Ionic - Angular JS Uso del magnífico framework JS para: ➔ Empaquetar la aplicación Ionic ➔ Navegación por estados ➔ Directivas personalizadas ➔ Binding de los datos ➔ Modularización ➔ ...
  30. 30. © 2015 Título de experto universitario en programación con tecnologías web Ionic - JS - Popover $ionicPopover.fromTemplateUrl('popover.html', {scope: $scope}) .then(function(popover) { $scope.popover = popover; }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); };
  31. 31. © 2015 Título de experto universitario en programación con tecnologías web Ionic - JS - Popup $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: 'Do you accept our terms of service', template: 'You cannot use this app unless you accept?' }); confirmPopup.then(function(res) { if(res) { console.log('You are sure'); } else { console.log('You are not sure'); } });
  32. 32. © 2015 Título de experto universitario en programación con tecnologías web Ionic - JS - Action sheet var sheet = $ionicActionSheet.show({ buttons: [ { text: '<b>Share</b> This' }, { text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() {}, buttonClicked: function(index) {return true;} });
  33. 33. © 2015 Título de experto universitario en programación con tecnologías web Ahora instalemos Ionic en nuestra máquina > npm install -g ionic cordova > ionic -h
  34. 34. © 2015 Título de experto universitario en programación con tecnologías web Y que empiece la fiesta > ionic start proweb1 blank > cd proweb1 > ionic serve --lab
  35. 35. © 2015 Título de experto universitario en programación con tecnologías web Ejercicio 2 Crear una aplicación de cero y crear: 1. Navbar con título “Libros” 2. Listado de libros con: imagen, título, descripción 3. Botón superior con icono sin texto en navbar que muestre un ActionSheet con título, modo de visualización, y con las opciones, lista, slides y cancelar.
  36. 36. © 2015 Título de experto universitario en programación con tecnologías web Ejercicio 3 Sobre el ejercicio 2: 1. Implementar vista slide si en el actionsheet se ha seleccionado vista tipo slides
  37. 37. © 2015 Título de experto universitario en programación con tecnologías web Funcionalidad avanzada: Estructuras de navegación
  38. 38. © 2015 Título de experto universitario en programación con tecnologías web AngularJS por defecto utiliza ngRoute (angular-route.js). Ionic utiliza ui-router Compatible con todo lo que soporta ngRoute, pero puede realizar funciones extras. ● Herencia: vistas anidadas ● Linking entre estados fuerte mediante el nombre del estado. Permite cambiar las URL sin afectar a la navegación. ● Paso de parámetros a través de $stateParams. npm install angular-ui-router Navegación con estados
  39. 39. © 2015 Título de experto universitario en programación con tecnologías web var myApp = angular.module('myApp', ['ui.router']); [...] $stateProvider .state("nombre", { url: '/urlEstado, templateUrl: 'views/vista.html', controller: 'nombreControlador' }) [...] $urlRouterProvider.otherwise("/urlEstado"); Navegación por estados .state("nombre.hijo", { url: '/hijo, templateUrl: 'views/vista2.html', controller: 'nombreControlador2' })
  40. 40. © 2015 Título de experto universitario en programación con tecnologías web <ion-view> <!-- este elemento se rellena con el template que se haya definido en el estado --> </ion-view> <ion-view name=”header”> <!-- vista del header --> </ion-view> <ion-view name=”content”> <!-- vista del content --> </ion-view> Vista básica .state("nombre.hijo", { url: '/url, views:{ header:{ templateUrl: 'views/vista2.html', controller: 'nombreControlador2' }, content:{ templateUrl: 'views/vista2.html', controller: 'nombreControlador2' } }})
  41. 41. © 2015 Título de experto universitario en programación con tecnologías web Modales La transición básica a esta vista que suele estar por defecto es slide-in-up $ionicModal.fromTemplateUrl('modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() {$scope.modal.show();} $scope.closeModal = function() {$scope.modal.hide();};
  42. 42. © 2015 Título de experto universitario en programación con tecnologías web Navegación horizontal <ion-nav-bar class="bar-positive"> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-content>Hello! </ion-content> </ion-view> </ion-nav-view> Muy utilizada para navegar desde un listado a un detalle de la celda seleccionada. Requiere de una ion-nav-bar e ion-nav-view. Apila automáticamente las vistas sobre las que vamos navegando, de esta manera, sabe a qué vista volver cuando tocamos el botón atrás. Deberemos cambiar el contenido del ion-nav- view para que se realice la transición correctamente al cambiar de estado.
  43. 43. © 2015 Título de experto universitario en programación con tecnologías web Side menu <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ui-view name="content"></ui-view> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <a nav-clear menu-close href="#/cajeros" class="item">Cajeros</a> <a nav-clear menu-close href="#/oficinas" class="item">Oficinas</a> <a nav-clear menu-close href="#/contacto" class="item">Contacto</a> </ion-side-menu> </ion-side-menus>
  44. 44. © 2015 Título de experto universitario en programación con tecnologías web Ejercicio 4 Crear nuevo proyecto de ionic llamado “navh”: 1. Listado libros, imagen, título 2. Detalle del libro, imagen, título, descripción. Requisitos: 1. La navegación del listado al detalle debe ser horizontal 2. Tanto en el listado como el detalle tiene que haber un navbar. En el detalle tendrá el título del libro 3. Desde el detalle, se podrá volver al listado tocando el botón atrás y se deberá animar correctamente.
  45. 45. © 2015 Título de experto universitario en programación con tecnologías web
  46. 46. © 2015 Título de experto universitario en programación con tecnologías web
  47. 47. © 2015 Título de experto universitario en programación con tecnologías web Gestionar plataformas Nos permite... Gestionar plugins Compilar aplicación
  48. 48. © 2015 Título de experto universitario en programación con tecnologías web Gestionar plataformas Comandos Listar: platform list Añadir: platform add <nombre_pltfrm> Eliminar: platform remove <nombre_pltfrm> Actualizar: platform update <nombre_pltfrm> ej: cordova platform add ios
  49. 49. © 2015 Título de experto universitario en programación con tecnologías web Gestionar plugins Comandos Listar: plugin list Añadir: plugin add <nombre_plugin> Eliminar: plugin remove <nombre_plugin> Buscar: plugin search <nombre_plugin> ej: cordova plugin add cordova-plugin-camera
  50. 50. © 2015 Título de experto universitario en programación con tecnologías web Compilar aplicación Comandos Ejecutar en navegador: serve Build: build <nombre_pltfrm> Ejecutar en dispositivo: run <nombre_pltfrm> Emular: emulate <nombre_pltfrm> ej: cordova build android
  51. 51. © 2015 Título de experto universitario en programación con tecnologías web Ionicview 1. Descargar ionicview 2. Registrarse 3. ionic upload (desde consola)
  52. 52. © 2015 Título de experto universitario en programación con tecnologías web ngCordova Cordova con la potencia de AngularJS
  53. 53. © 2015 Título de experto universitario en programación con tecnologías web ngCordova es una colección de más de 63 extensiones para AngularJS, que utilizan el API de Cordova para acceder al dispositivo. Pasos: 1. bower install ngCordova 2. <script src="lib/ngCordova/dist/ng-cordova.js"></script> (antes de cordova.js) 3. angular.module('myApp', ['ngCordova']) ngCordova
  54. 54. © 2015 Título de experto universitario en programación con tecnologías web Ejemplo ngCordova 1. cordova plugin add cordova-plugin-camera 2. Inyectar en el controlador $cordovaCamera 3. var options = { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, }; $cordovaCamera.getPicture(options).then(function(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; }, function(err) { // error });
  55. 55. © 2015 Título de experto universitario en programación con tecnologías web Proyecto final
  56. 56. © 2015 Título de experto universitario en programación con tecnologías web Consejos para realizar el PF. Paso 1 ● Leer todos los apartados que se requieren en la app ● Realizar bocetos para la estructura de vistas y navegación. ● Validar los bocetos si cumplen los requisitos y mantienen buena usabilidad. Paso 2 ● Programar la estructura básica de vistas y navegación con estados. ● Terminar la funcionalidad requerida de cada vista
  57. 57. © 2015 Título de experto universitario en programación con tecnologías web Proyecto final 1. Login a. Si el usuario y contraseña es admin, entrará a la aplicación. b. Si no, mensaje de error y el móvil vibra. 2. Mi Perfil c. Se mostrará el nombre del usuario logueado. d. Imagen que nos podremos hacer con nuestra cámara del smartphone e. Podremos cerrar sesión y nos llevará al login la app. 3. About f. título de la app y descripción 4. Librería g. Listado de libros con imagen, título y descripción. h. Posibilidad de buscar por título i. Ver detalle de un libro a tocar en una celda del listado. j. Leer código QR el cual nos lleva al detalle del libro que corresponda con ese id.

×