Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Aplicaciones móviles con HTML5

No description
by

Noelia Franco

on 2 October 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Aplicaciones móviles con HTML5

Aplicaciones Móviles
1.2 billones de personas
acceden a la web a través de sus móviles
Mercado de aplicaciones
76%
18%
3%
3%
Total de App disponibles
900.000
800.000
120.000
100.000
IPHONE
Última versión: 5
Apps descargadas en 2012: 18.5 b
SO: iOS 7 (beta)
ANDROID
Apps descargadas en 2012: 32.5 b
SO: Jelly Bean 4.2.x
Tipos de aplicaciones móviles
Aplicaciones móviles nativas
Totalmente programadas en el entorno de desarrollo específico para cada sistema operativo.
IDE: XCode
Lenguaje: Objective-C
IDE: Eclipse o Android Studio
Lenguaje: Java
IDE: Visual Studio
Lenguaje: C#
IDE: BB Native SDK
Lenguaje: Java
https://developer.blackberry.com/native/documentation/bb10/getting_started.html
http://developer.android.com/sdk/index.html
https://dev.windowsphone.com/en-us/downloadsdk
https://developer.apple.com/xcode/index.php
Aplicaciones móviles híbridas
Desarrolladas en parte con el entorno de desarrollo nativo y en parte en HTML5
Aplicaciones móviles nativas
Acceso a todas las APIs nativas
Perfomance y gráficos rápidos
Distribución en el App store
Mejor experiencia de usuario
Solo funciona en la plataforma nativa
Mayor costo de desarrollo
Mayor curva de aprendizaje
Derechos de licencia
Aplicaciones móviles híbridas
Mayor afinidad cross-plataforma
Uso de HTM5, CSS3 y JS
Acceso a APIs nativas
Corre en el dispositivo, no en web
Disminuye la experiencia de usuario
Bajo costo de mantenimiento
HTML5 no funciona para todo
Puede tener problemas de performance
Se requiere de un buen framework
Aplicaciones web
Completamente desarrolladas en HTML5
Aplicaciones Web
Pueden no funcionar sin conexión
Multiplataforma
Pocos requisitos de hardware
Curva de aprendizaje rápida
No disponibles en App store
Acceso parcial a las APIs nativas
Problemas de seguridad
No requieren procesos de aprobación
Menor costo
Disminuye la experiencia de usuario
HTML5
Mayor semántica
Mejoras en cuanto a accesibilidad
Nuevos tags (audio, video, canvas)
Mejor soporte para SVG
Geolocation
Local Storage

CSS3
Transformaciones: 2D y 3D
Transiciones
RGBA colors
Media queries
Media queries
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
Nos permite tener código HTML que responde a diferentes resoluciones y orientaciones.
Responsive web design
Adaptar el sitio web al dispositivo del usuario
http://foundation.zurb.com/
http://rwdcalc.com/
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
http://getbootstrap.com/
http://resizemybrowser.com/
http://www.responsinator.com/
http://www.targetlocal.co.uk/responsive-web-design-resources/
Algunas herramientas útiles para responsive
http://www.tutosytips.com/hablemos-de-el-uso-de-media-queries-en-css3/
Creando nuestra página responsive
Respond.js:
polyfill para utilizar media queries en IE6/IE8
https://github.com/scottjehl/Respond
CSS Reset
Reducir inconsistencias en diferentes browsers
http://meyerweb.com/eric/tools/css/reset/
Android
¿Qué es Android?
Sistema operativo móvil basado en Linux
Desarrollado por la Open Handset Alliance, la cual es liderada por Google
¿Qué es un .apk?
Es el formato en el cual se construyen las aplicaciones para el SO Android
APK significa “Android package file”
¿Qué es Bloatware?
Aplicaciones que una proveedora le instala a un equipo que se vende en contrato
Algunas de estas aplicaciones no se pueden desinstalar y ese es el principal problema con el “bloatware” en los equipos Android.
¿Qué significa que Android es Open Source?
El código se puede descargar y modificar.
Permite que se puedan crear ROMs
¿Qué es un ROM?
Un ROM es un paquete que contiene una versión entera de Android, con sus aplicaciones y modificaciones al software
Pueden ser hechos oficialmente por un fabricante o por desarrolladores
¿Qué es Holo?
Con la llegada de Android 4.0 Google introdujo Holo, un nuevo término para identificar el nuevo diseño de las aplicaciones.
http://developer.android.com/design/style/themes.html
Android SDK
Es un conjunto de librerías y herramientas de desarrollo necesarias para construir y testear aplicaciones Android.
http://developer.android.com/intl/es/sdk/index.html
Android SDK Manager
Permite instalar paquetes de Android, realizar actualizaciones de las diferentes versiones o traer nuevos cambios.
Android Virtual Device Manager
Permite setear configuraciones de diferentes dispositivos para luego testear la app
Phonegap
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.
http://phonegap.com/
¿Para qué tipo de apps es útil?
Apps informativas
Apps utilitarias
Juegos
Apps webs
http://phonegap.com/app/
Entorno de Desarrollo
Instalar PhoneGap en nuestro IDE
Help->Install new software
http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download
Finalizada la instalación, reiniciar Eclipse
Tendremos un nuevo ícono en toolbar
Framework javascript que permite crear sitios webs para dispositivos móviles
http://jquerymobile.com/
Customizando estilos
http://jquerymobile.com/themeroller/
Estructura HTML
http://jquerymobile.com/demos/1.2.1/docs/pages/page-anatomy.html
Transiciones entre páginas
Componentes
http://jquerymobile.com/demos/1.2.1/
APIs disponibles
http://docs.phonegap.com/en/3.0.0/index.html
Camera API
<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
Incluir el script camera.js:
Llamar al método takePic()
<div class="ui-block-a"><div data-role="button" onclick="take_pic();">Take a Picture</div></div>
Estructura básica del proyecto
carpeta con el código JS/HTML5/CSS3
carpeta con los js de las apis de phonegap
página inicial de la app
archivo de configuración de la app
Si el ADT no trae editor HTML y CSS:
Ir a la página:
Descargar el .jar
Colocarlo en la carpeta /plugins dentro de donde tienen instalado el Eclipse
Reiniciar el Eclipse
http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor
Android Manifest
Android Manifest
Permisos a pedir al usuario
Logo y título de la app en el dispositivo
Importante para posiciones de la pantalla y teclado
http://developer.android.com/intl/es/guide/topics/manifest/manifest-intro.html
Exportar nuestra app para publicar en Google Play
En la carpeta principal del proyecto, botón derecho->Export
Paso 1: Android->Export Android Application
Exportar nuestra app para publicar en Google Play
Paso 2: Crear una keystore y guardarla en una carpeta
Exportar nuestra app para publicar en Google Play
Paso 3: Completar los datos solicitados
Paso 4: Elegir carpeta de destino para guardar el .apk
http://developer.android.com/intl/es/distribute/googleplay/publish/register.html
Publicar en Google Play
Pasos a seguir
Registrarse
https://play.google.com/apps/publish/
Pagar 25 dólares
Agregar la info de nuestra app
y el archivo .apk


Publicar!!!!!
Full transcript