DESARROLLO DE APLICACIONES PARA

DISPOSITIVOS MVILES

L.I. CINTHYA PREZ VILCHIS

Unidad 4. Desarrollo de
aplicaciones mviles.
O
B
J
E
T
I
V
O

Utilizar tcnicas de
modelado para la
solucin de problemas.
Aplicar un lenguaje para
la solucin de
problemas para
dispositivos mviles.

TEMARIO
4.1 Instalacin.
4.2 Metodologa de desarrollo y ejecucin.
4.3 Uso de formularios Web mvil.
4.4 Uso de controles.
4.5 Creacin Interfaces de usuario.
4.6 Temas selectos de programacin para
mviles.

T
E
M
A
4
.
2

Metodologa de
desarrollo y
ejecucin

T
E
M
A
4
.
3

Uso de formularios
web mvil

Aplicaciones web en Android

El xito de desarrollo de aplicaciones
mviles es indiscutible: cada da ms
personas cuentan con un:
Dispositivo
mvil

Aplicaciones varias

Juegos
Web
Descargas
Msica

Conxin a
Internet

Correo

Etc.

Y descubren las ventajas que su uso supone.

Por otra parte:

Son cada vez ms los desarrolladores que
persiguen llegar a ms consumidores, por lo
que se plantean lanzar su aplicacin en
varias plataformas.

Opciones:
Una posibilidad para desarrollar aplicaciones
independientes de la plataforma consiste en
usar tecnologa web; es decir:

HTML5
CSS3
JavaScript

Las aplicaciones creadas con esta tecnologa

pueden ser ejecutadas desde una gran
variedad de plataformas.

Aplicaciones segn la
tecnologa que utilicen:
1.

2.

3.

Aplicaciones Mviles Nativas

Aplicaciones web optimizadas para
mviles
Aplicaciones hibridas

1.- Aplicaciones mviles nativas

Aplicaciones creadas de forma
convencional.
El lenguaje utilizado y la forma de
trabajar pueden ser muy diferentes
segn desarrollemos en Android, iOS o
Windows Phone.

2.- Aplicaciones web

optimizadas para mviles
Aplicaciones creadas utilizando
principalmente tecnologa web. Tienen la
ventaja de su fcil portabilidad.
Adems, este tipo de aplicaciones pueden
ser incrustadas dentro de una aplicacin
convencional, de forma que el usuario
apenas nota la diferencia con respecto a
estar ejecutando una aplicacin nativa.

3.- Aplicaciones hibridas

Usar tecnologa web en una aplicacin
Android tiene muchas limitaciones. Por
ejemplo, resulta imposible generar una
notificacin en la barra de estado.

En una aplicacin hibrida seguiremos el

siguiente planteamiento: escribir el ncleo
de la aplicacin con tecnologa web y
aquellas partes donde la API web no
permita llegar, desarrollarla como
aplicacin nativa.

Introduccin a la tecnologa
web
Muchas veces no es necesario crear una
aplicacin mvil para cada tipo de dispositivo
(Android, iOS, Blackberry ), incluso hay veces
que no es necesario crear una aplicacin
como tal. Bastara con optimizarla para ser
visualizada desde un dispositivo mvil.
Por definicin, estas aplicaciones sern
ejecutadas por un navegador web o mdulo
de ejecucin web. Aunque en muchos casos
esta podr ser empaquetada en una
aplicacin convencional.

Una aplicacin web ser caracteriza por estar

desarrollada utilizando los siguientes tres
componentes:
1.
2.
3.

HTML
CSS
JavaScript

En otras palabras, es una aplicacin de

software que se codifica en un lenguaje
soportado por los navegadores web y en la
que se confa la ejecucin al navegador.

Ventajas de estas aplicaciones:

Facilita la migracin de aplicaciones entre

sitios web y las diferentes plataformas
mviles.
Son populares por:
Lo

practico del navegador web como cliente

ligero
Independencia del sistema operativo
Facilidad para actualizar y mantener
aplicaciones web sin distribuir ni instalar software
a miles de usuarios potenciales

Caractersticas

Ejemplos son: webmails, wikis, weblogs,

tiendas en lnea o Google Docs.
Suele alojarse en un servidor web.
Tambin es posible alojarla de forma local
en el dispositivo cliente, permitiendo
acceder a ella de forma ms rpida y sin
tener acceso a internet.
Debe contener elementos que permitan
una comunicacin activa entre el usuario
y la informacin.

Ejemplo Aplicacin 3 en Raya

Se ejecutara desde un navegador pero
posteriormente se incrustara en una aplicacin
para Android.
Consta de 3 archivos:

Un archivo HTML con la estructura visual de la

aplicacin.
Un fichero CSS para dar estilo
Un fichero JavaScript para otorgar funcionalidad.

El juego requiere de 2 jugadores humanos y

controla quien ha ganado o si se ha producido
un empate.

Ejercicio crear la aplicacin

1.

2.

Crear una carpeta en el ordenador

llamo 3enRaya
Dentro crea un fichero de texto plano
con un editor de texto; llmalo index.html
y copia el siguiente cdigo:

3.

Crea tambin en la carpeta otro fichero con el

editor de texto llamado estilos.css y copia el
siguiente cdigo:

4.

Por ultimo crea otro fichero de texto llamado

funciones.js con el siguiente cdigo JavaScript:

Aplicacin web online y offline

Aplicacin Online

Ejercicio paso a paso: Aplicacin 3 en Raya en Lnea

1. Abre un navegador web en un dispositivo mvil o emulador

y accede a la URL:
http://cursoandroid.hol.es/appweb/index.html
Observa como el navegador trata de visualizar la
informacin de la mejor manera posible.

Aplicacin web online y offline

Aplicacin offline
Ejercicio paso a paso: Aplicacin 3 en Raya en fuera de Linea
1. Dentro de la carpeta del ejercicio anterior crea un fichero
de texto plano con un editor de texto, llamado
3enraya.manifest y copia el siguiente cdigo:

2. Vamos a declarar el archivo manifest dentro de index.html.

Abre el archivo index.html con el editor de texto y sustituye
la etiqueta <html> por :

Aplicacin web online y offline

Aplicacin offline

Ejercicio paso a paso: Aplicacin 3 en Raya en fuera de Linea

3. Desconecta tu computadora de internet y abre el fichero
index.html con un navegador. Observa como la imagen no
se visualiza.
4. Conectate a internet y recarga la pagina (pulsa <<f5>>).
Observa como la imagen se visualiza.
5. Desconectate de internet y recarga la pagina. Observa
como la imagen se visualiza gracias a que ahora esta en la
cach.

Entregables:

Aplicacin web 3 en Raya (carpeta con los

archivos fuentes)
Reporte de la aplicacin online y la aplicacin
offline (describiendo que hace el cdigo de los 3
archivos).
Contestar el siguiente cuestionario (en libreta)
Colocar una conclusin acerca de por que es
importante conocer la informacin vista en estas
dispositivas en el tema 4.3 Uso de formularios Web
mvil y anexarlo al reporte.

Cuestionario
1.

2.

3.

4.

5.

Por qu es importante el desarrollo de

aplicaciones mviles?
Qu tecnologas nos permiten desarrollar
aplicaciones web para distintas plataformas?
Describe los tipos de aplicaciones segn la
tecnologa que utilicen, realiza un cuadro
comparativo.
Indica cuales son las ventajas de las aplicaciones
web
Caractersticas de las aplicaciones web en los
dispositivos mviles.

Uso de WebView

Existen muchas posibilidades de incluir

contenido web en las aplicaciones
Android.
No solo puedes integrar una aplicacin
web, sino que puedes optimizar tus diseo
para los distintos tamaos y densidades
de pantalla.

Ejercicio: Mostrar contenido

web usando una intencin
Objetivo: Mostrar una opcin para integrar contenido
web en una aplicacin es abrir un URL mediante una
intencin.
1.Crear un nuevo proyecto con los siguientes datos:
Application Name: AplicacionWeb
Project Name:AplicacionWeb
Package Name:nombre.unidad4.aplicacionweb
Minimum Required SDK: API 10
TarjeT SDK:API 19
Compile With: API 19
Theme: None
Activity_name: Actividad1

2.- Se crea una intencin en la clase principal de nuestra aplicacin y se

le indica la direccin url a abrir en el navegador predeterminado del
dispositivo quedando de la siguiente manera:

3.- Se ejecuta la aplicacin. Se abrir la pgina indicada en la variable

uri en el navegador por defecto del dispositivo.

Esta es la forma ms sencilla de integrar contenido web en nuestras

aplicaciones Android. Sin embargo tiene sus inconvenientes:

No podemos saber cuando el usuario sale de la aplicacin

No sabemos cuando el usuario vuelve a la aplicacin

No controlamos lo que el usuario esta visualizando

Por esta razn Android SDK proporciona un control denominado

WebView para visualizar paginas web, ya sea obtenindolas a travs de
un URL de internet o en un fichero local, o bien generando el cdigo
HTML directamente.

Uso de WebView

WebView esta basado en el proyecto Open Source

WebKit, incluye un motor de representacin de
HTML/CSS y un intrprete de JavaScript.
WebKit es utilizado en numerosas aplicaciones y es la
base de los navegadores como Safari, ChromiunGoogle Chrome u Opera.

<WebView
android:id=@+id/identificador
android:layout_width=fill_parent
android:layout_height=fill_parent/>

Aspectos bsicos de un WebView

Se pueden consultar todos los mtodos pblicos

de WebView en:

http://developer.android.com/reference/android/we
bkit/WebView.html

Uso de un WebView para

mostrar contenido web
Para mostrar el contenido web en una aplicacin de
Android debes hacerlo usando la vista WebView, la
cual permite visualizar pginas web como parte del
diseo de la actividad.
Por defecto, no incluye todas las caractersticas de
un navegador web, como controles de navegacin
o una barra de direcciones.

Ejercicio: Abrir contenido web

en lnea mediante un WebView
1.

2.

Crear un proyecto con las mismas caractersticas del proyecto

AplicacionWeb (diapositiva 34) llamado AplicacionWeb2.
Se aadir un componente WebView al cdigo del layout
activity_actividad.xml, borrando el TextView que contiene por
default quedando de la siguiente manera:

3.- Se aadir la siguiente variable global a la clase Actividad1.java

WebView navegador;
4.- Se crea una referencia al WebView de nuestro layout mediante su
id webkit, para despus mediante su mtodo loadUrl indicar la pagina
web a visualizar. Quedando de la siguiente manera el constructor de la
clase que es el nico que sufre modificaciones:

5.- Para poder visualizar el contenido nuestro WebView hay que

solicitar permiso para que nuestra aplicacin pueda acceder a
Internet en el AndroidManifest.xml, por lo cual se deber de agregar la
siguiente lnea despus de la etiqueta <application></application>
<uses-permission android:name="android.permission.INTERNET" />
6.- Ejecuta la aplicacin.
Por defecto la aplicacin:

no puede ejecutar el JavaScript

puedes hacer zum

los enlaces se abren en el navegador web

etc.

las cuales pueden modificarse.

Android Manifest

Ejercicio: Abrir contenido web

fuera de lnea en un WebView
1. Crea un nuevo proyecto llamado AplicacionWeb3 con las
caractersticas del proyecto AplicacionWeb original.
2.- Sino existe, crea una carpeta

llamada assets en la raz del proyecto.

3.-Copiar los tres ficheros que hemos creado anteriormente en
la carpeta 3enraya y pegarlos dentro de la carpeta assets:

Ejercicio: Abrir contenido web

fuera de lnea en un WebView
1. Crea un nuevo proyecto llamado AplicacionWeb3 con las
caractersticas del proyecto AplicacionWeb2.
2.- Sino existe, crea una carpeta

llamada assets en la raz del proyecto.

3.-Copiar los tres ficheros que hemos creado anteriormente en
la carpeta 3enraya y pegarlos dentro de la carpeta assets:

Ejercicio: Abrir contenido web

fuera de lnea en un WebView
4. Cambia la direccin de loadUrl del WebView por
file:///android_asset/index.html para que acceda al fichero
local.
5.- Ejecuta la aplicacin y observa que no se visualiza bien y
que tampoco puedes jugar.
6.-Aade el siguiente cdigo antes de la llamada a loadURL en
el mtodo onCreate de la clase Actividad1:
navegador.getSettings().setJavaScriptEnabled(true);
Aqu le indicamos al proyecto que permita la ejecucin del
contenido JavaScript

Ejercicio: Abrir contenido web

fuera de lnea en un WebView
7. Ejecuta la aplicacin y comprueba que el juego funciona.
8.- Pulsa el enlace <<AndroidCurso>> y comprueba que se abre
en el navegador
9.- Rota la pantalla. La actividad se reinicia y volvemos a la
pantalla de inicio, perdiendo lo que tuviramos en pantalla.

10.- No es necesario agregar permiso de internet en el manifest

Actividad en clase

Investigar la clase WebSettings, uso, caractersticas,

funciones.
Investigar los elementos de un WebView, funciones.
Investigar como:
Evitar el reinicio de una actividad
Abrir los enlaces web en el mismo WebView
Como deshabilitar el zum de una pagina web en
el WebView.
Habilitar alertas JavaScript
E implementarlas en el proyecto AplicacionWeb3

Evitar el reinicio de una actividad

1.

Deshabilitamos las rotaciones

sustituyendo en AndroidManifiest el
cdigo de la Actividad1 por el siguiente:
android:configChanges="orientation|keyboardHidden"
android:screenOrientation="portrait

2.

Ejecuta la aplicacin y comprueba que

no se reinicia la actividad al cambiar la
orientacin de la pantalla.

Evitar el reinicio de una actividad

Los eventos que pueden hacer que una actividad se
reinicie son:

Un cambio en la orientacin de la pantalla

El uso del teclado en pantalla

Declarando
android:configChanges="orientation|keyboardHidden"
indicamos que orientation y keyboardHidden tienen su propio
manejador, en este caso vaco. A partir de Android 3.2 tenemos
que
utilizar
android:configChanges="orientation|keyboardHidden|screenSiz
e. Tambien podemos indicar la orientacin de la pantalla con
android:screenOrientation con los valores portrait o landscape.

Abrir los enlaces en el WebView

Aade al final del mtodo onCreate de la clase

Actividad1 el siguiente cdigo:

navegador.setWebViewClient(new WebViewClient()
{
@Override
public boolean shouldOverrideUrlLoading (WebView
view, String url)
{
return false;
}
});

Abrir los enlaces en el WebView

Ejecuta la aplicacin y observa que al pulsar un

enlace no se abre en el navegador, sino en la
aplicacin.
Si queremos permanecer en nuestra aplicacin al
pulsar un enlace hay que especializar la clase
WebViewClient
y
sobreescribir
el
mtodo
shouldOverrideUrlLoading para que devuelva false.
Este mtodo recibe como parmetro el URL
solicitado. Se podra utilizar para filtrar direcciones a
las que se permite el acceso.

Opciones de inicio

La clase WebSettings es usada para controlar

los ajustes del WebView.
Dos aspectos fundamentales en el uso de un
WebView son:
Decidir

si es capaz de ejecutar JavaScript y si el

usuario puede hacer zum en el contenido:
navegador.getSettings().setJavaScriptEnabled(true);
navegador.getSettings().setBuiltInZoomControls(false);

Habilitar alertas JavaScript

Sobreescribimos el mtodo onJsAlert de

setWebChromeClient aadiendo el siguiente cdigo:

navegador.setWebChromeClient (new
WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String
message,JsResult result)
{
return super.onJsAlert(view,url,message,result);
}
});

Barra de progreso

El usuario no sabe que una pagina se esta

cargando hasta que el WebView la
muestra. Lo cual puede dar la sensacin
que no responde.
Podemos proporcionar una barra de
progreso con el widget ProgressBar y
hacer uso de la clase WebChromeClient
para saber el progreso de la carga de la
pagina.

Barra de progreso

Esta barra la podemos mostrar solamente

cuando se este cargando la pagina para
ahorrar espacio en pantalla.

Otra opcin es crear un dialogo de

progreso de carga, o bien, simplemente,
mostrar el tpico dialogo <<Espere por
favor>>.

Ejercicio paso a paso: aadir

barra de progreso
1.

Aade antes del WebView la barra de

progreso en el activity_actividad1.xml (o
su interfaz de usuario generada por
default).

Ejercicio paso a paso: aadir

barra de progreso
2.

3.

Declara la
Actividad1:

barra

de

progreso

en

Aade el cdigo que se mostrara y

ocultara la barra de progreso de
Actividad1 al final del mtodo onCreate: