Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

Aplicaciones Móviles

Finalizada la instalación, reiniciar Eclipse

Tendremos un nuevo ícono en toolbar

Android Manifest

Importante para posiciones de la pantalla y teclado

Logo y título de la app en el dispositivo

Permisos a pedir al usuario

Aplicaciones móviles nativas

1.2 billones de personas

Aplicaciones móviles híbridas

Transiciones entre páginas

Totalmente programadas en el entorno de desarrollo específico para cada sistema operativo.

Android Manifest

Mayor afinidad cross-plataforma

Disminuye la experiencia de usuario

HTML5 no funciona para todo

Uso de HTM5, CSS3 y JS

http://developer.android.com/intl/es/guide/topics/manifest/manifest-intro.html

IDE: Visual Studio

Lenguaje: C#

IDE: XCode

Lenguaje: Objective-C

Puede tener problemas de performance

Acceso a APIs nativas

IDE: BB Native SDK

Lenguaje: Java

https://dev.windowsphone.com/en-us/downloadsdk

Corre en el dispositivo, no en web

Se requiere de un buen framework

https://developer.apple.com/xcode/index.php

IDE: Eclipse o Android Studio

Lenguaje: Java

acceden a la web a través de sus móviles

Bajo costo de mantenimiento

https://developer.blackberry.com/native/documentation/bb10/getting_started.html

¿Qué es un .apk?

http://developer.android.com/sdk/index.html

Android Virtual Device Manager

Android

CSS3

Es el formato en el cual se construyen las aplicaciones para el SO Android

Permite setear configuraciones de diferentes dispositivos para luego testear la app

HTML5

Componentes

Mercado de aplicaciones

Phonegap

Aplicaciones móviles nativas

APK significa “Android package file”

Es un framework de código abierto que nos permite convertir nuestros proyectos HTML5 – CSS3 – JS en aplicaciones que se ejecutan en diferentes dispositivos móviles como iOS, Android, Blackberry, entre otros.

76%

18%

3%

Solo funciona en la plataforma nativa

Acceso a todas las APIs nativas

Transformaciones: 2D y 3D

Transiciones

RGBA colors

Media queries

Perfomance y gráficos rápidos

Mayor costo de desarrollo

Mayor semántica

Mejoras en cuanto a accesibilidad

Nuevos tags (audio, video, canvas)

Mejor soporte para SVG

Geolocation

Local Storage

http://phonegap.com/

http://jquerymobile.com/demos/1.2.1/

Distribución en el App store

Mayor curva de aprendizaje

Derechos de licencia

Mejor experiencia de usuario

Entorno de Desarrollo

¿Para qué tipo de apps es útil?

Camera API

Si el ADT no trae editor HTML y CSS:

Ir a la página:

Incluir el script camera.js:

Apps informativas

Framework javascript que permite crear sitios webs para dispositivos móviles

http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor

Tipos de aplicaciones móviles

Total de App disponibles

Aplicaciones móviles híbridas

<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>

Apps utilitarias

Descargar el .jar

carpeta con el código JS/HTML5/CSS3

archivo de configuración de la app

Apps webs

¿Qué es Bloatware?

carpeta con los js de las apis de phonegap

  • Colocarlo en la carpeta /plugins dentro de donde tienen instalado el Eclipse

¿Qué es Android?

Llamar al método takePic()

Responsive web design

Instalar PhoneGap en nuestro IDE

página inicial de la app

Creando nuestra página responsive

Juegos

¿Qué es Holo?

900.000

800.000

100.000

120.000

Desarrolladas en parte con el entorno de desarrollo nativo y en parte en HTML5

<div class="ui-block-a"><div data-role="button" onclick="take_pic();">Take a Picture</div></div>

Help->Install new software

Adaptar el sitio web al dispositivo del usuario

Aplicaciones que una proveedora le instala a un equipo que se vende en contrato

Sistema operativo móvil basado en Linux

http://phonegap.com/app/

Con la llegada de Android 4.0 Google introdujo Holo, un nuevo término para identificar el nuevo diseño de las aplicaciones.

Media queries

http://jquerymobile.com/

Respond.js: polyfill para utilizar media queries en IE6/IE8

Estructura básica del proyecto

Algunas de estas aplicaciones no se pueden desinstalar y ese es el principal problema con el “bloatware” en los equipos Android.

Desarrollado por la Open Handset Alliance, la cual es liderada por Google

Reiniciar el Eclipse

Es una expresión CSS que se evalúa por true o false.

Si es true, los selectores CSS y las propiedades dentro de la expresión serán aplicadas

Estructura HTML

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download

https://github.com/scottjehl/Respond

http://developer.android.com/design/style/themes.html

Exportar nuestra app para publicar en Google Play

Nos permite tener código HTML que responde a diferentes resoluciones y orientaciones.

Customizando estilos

Paso 2: Crear una keystore y guardarla en una carpeta

Aplicaciones web

IPHONE

Completamente desarrolladas en HTML5

Última versión: 5

Apps descargadas en 2012: 18.5 b

SO: iOS 7 (beta)

Exportar nuestra app para publicar en Google Play

Paso 3: Completar los datos solicitados

http://jquerymobile.com/themeroller/

¿Qué es un ROM?

http://jquerymobile.com/demos/1.2.1/docs/pages/page-anatomy.html

¿Qué significa que Android es Open Source?

Algunas herramientas útiles para responsive

Android SDK

CSS Reset

APIs disponibles

Paso 4: Elegir carpeta de destino para guardar el .apk

http://www.responsinator.com/

El código se puede descargar y modificar.

Un ROM es un paquete que contiene una versión entera de Android, con sus aplicaciones y modificaciones al software

http://getbootstrap.com/

Permite que se puedan crear ROMs

Es un conjunto de librerías y herramientas de desarrollo necesarias para construir y testear aplicaciones Android.

http://foundation.zurb.com/

Reducir inconsistencias en diferentes browsers

http://rwdcalc.com/

Pueden ser hechos oficialmente por un fabricante o por desarrolladores

Aplicaciones Web

http://resizemybrowser.com/

ANDROID

Exportar nuestra app para publicar en Google Play

http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

En la carpeta principal del proyecto, botón derecho->Export

http://www.targetlocal.co.uk/responsive-web-design-resources/

Android SDK Manager

Registrarse

Paso 1: Android->Export Android Application

http://meyerweb.com/eric/tools/css/reset/

http://developer.android.com/intl/es/sdk/index.html

http://docs.phonegap.com/en/3.0.0/index.html

Apps descargadas en 2012: 32.5 b

SO: Jelly Bean 4.2.x

Multiplataforma

Pueden no funcionar sin conexión

Pocos requisitos de hardware

No disponibles en App store

Permite instalar paquetes de Android, realizar actualizaciones de las diferentes versiones o traer nuevos cambios.

Curva de aprendizaje rápida

Acceso parcial a las APIs nativas

No requieren procesos de aprobación

Problemas de seguridad

Menor costo

Disminuye la experiencia de usuario

Pagar 25 dólares

http://developer.android.com/intl/es/distribute/googleplay/publish/register.html

http://www.tutosytips.com/hablemos-de-el-uso-de-media-queries-en-css3/

Publicar en Google Play

Pasos a seguir

https://play.google.com/apps/publish/

Agregar la info de nuestra app

y el archivo .apk

Publicar!!!!!

Learn more about creating dynamic, engaging presentations with Prezi