JQuery Mobile
Anuncio
DESARROLLO DE APLICACIÓNES
MOVILES EN ANDROID
Desarrollo de aplicaciones
Android - Web utilizando el
Framework JQUERY MOBILE
JQuery Mobile
Es un Framework Javascript, ampliamente usado por muchos desarrolladores de sitios
webs. Este Framework sirve para incrementar la velocidad de desarrollo con Javascript,
encapsulando muchas tareas comunes que se realizan cuando usamos el lenguaje
JavaScript.
Las características básicas de jQuery Mobile incluyen:
Simplicidad y flexibilidad general
El marco de trabajo es simple de usar.
Puede: Desarrollar páginas utilizando principalmente marcas con un mínimo o
sin JavaScript.
Utilizar JavaScript avanzado y eventos.
Utilizar un solo documento HTML con varias páginas incluidas.
Separar su aplicación en varias páginas.
Mejoras progresivas y degradación natural
Mientras que jQuery Mobile nivela los últimos HTML5, CSS 3 y JavaScript, no todos los
dispositivos móviles cuentan con esa compatibilidad. La filosofía de jQuery Mobile
consiste en ser compatible tanto con dispositivos de alta gama como con dispositivos
menos poderosos, como los que no tienen compatibilidad con JavaScript, y aún así
proporcionar la mejor experiencia posible.
Compatibilidad para táctiles y otros métodos de ingreso de datos
JQuery Mobile proporciona compatibilidad para los diferentes métodos de ingreso de
datos y eventos: métodos de ingreso de datos del usuario basados en el cursor, mouse
y pantallas táctiles.
Accesibilidad
JQuery Mobile está diseñado teniendo en cuenta la accesibilidad. Tiene compatibilidad
con Aplicaciones de Internet enriquecidas y accesibles (WAI-ARIA) para que los
visitantes accedan a las páginas web a través de tecnologías asistenciales.
Simple y modular
El marco de trabajo es simple con un tamaño total (minimizado y comprimido con Zip
Versión 1.0.1) de 24 KB para la biblioteca JavaScript, 7 KB para el CSS, más algunos
iconos.
2
Elementos relativos a un tema
El marco de trabajo también proporciona un sistema de temas que le permite definir
su propio estilo de la aplicación. Con la nueva aplicación ThemeRoller puede crear
fácilmente sus propios temas.
Código HTML de la página básica
<!DOCTYPE html>
<html>
<head>
<title>Probando jQuery Mobile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
Página para móviles
</div>
<div data-role="content">
Esta es la versión para móviles de mi sitio web
</div>
<div data-role="footer">
Contacta y lo que sea...
</div>
</div>
</body>
</html>
Nota: Como acabas de ver, la página básica de este framework para
móviles incluye, no solo los scripts jQuery y el componente jQuery Mobile,
con sus CSS, sino también un bloque de código HTML para crear las partes
fundamentales de toda página jQuery Mobile.
3
Compatible con el mayor número de plataformas
Los creadores del framework comentan entre sus características que se han esforzado
para cubrir el mayor número de plataformas de dispositivos móviles posible. Dicen que
el target que han buscado es mayor que el del resto de frameworks disponibles en el
mercado.
En la siguiente imagen podemos ver los logos de los sistemas
operativos que jQuery Mobile soporta.
Ahora que ya tenemos una mejor idea de lo que es JqueryMobile procederemos a
desarrollar casos practicos usando este framework.
DESCARGANDO EL JQUERYMOBILE
Primero para descargar el JQuery Mobile tenemos que visitar su sitio web el cual es:
www.jquerymobile.com.
La siguiente imagen muestra la forma de hacerlo:
4
Ir al sitio web: www.jquerymobile.com.
Ir a descargas
En la siguiente página podemos descargarnos los archivos JS y CSS.
Descargarse el JQuery
Mobile en archivo JS
Descargarse la hoja de
estilo css
5
Ahora vamos a descargarnos el JQuery Tradicional a través de la siguiente página
www.jquery.com
Descargar la librería
jQuery
Estos son los archivos que hemos bajado para poder desarrollar los ejercicios:
CASOS PRACTICOS
A continuación realizaremos dos casos prácticos usando JQuery Mobile:
En el primer caso práctico desarrollaremos una aplicación para Android
en la cual usaremos JQuery Mobile donde
información de nuestra Universidad Telesup.
6
podamos
visualizar
A continuación vamos a crear un proyecto en Android a través del ID Eclipse:
Así se muestra un proyecto cuando se crea
satisfactoriamente.
Realizando la interfaz grafica
Ir a Composite Agregar un WebView al
main
Arrastrarlo al main
Dar click sobre main.xml
7
A continuación vamos a implementar una página index.html de la siguiente manera.
Abrir un bloc de notas y digitar una estructura básica en HTML.
Ira Archivo
Guardar Como….
Escoger Escritorio
Poner indez.hmtl
Guardar
Aquí se muestra nuestro archivo en el escritorio:
Ahí tenemos nuestro
archivo el escritorio
8
Ahora vamos a copiar el archivo index.html y copiarlo en la carpeta assets de nuestro
proyecto en Android.
Pegar
el
archivo
index.html dentro de
assets
Al dar doble click saldrá
esto
Mapeando el componente WebView en el Activity (Movil05):
Declarar una
referencia de la
clase WebView
Maquear el
componente
WebView
9
Ahora vamos a activar el Javascript e insertar la página index.html en la vista de la aplicación
Habilitar el
JavaScript
El método loadUrl me
permite
Insertar
la
página web en la
aplicación
Ejecutando la aplicación móvil en Android
Click derecho
a la cabecera
Escoger Run
AS:
10
Android
Application
APLICACIÓN EJECUTADA
Ahora nosotros hemos logrado insertar una página web dentro de nuestra aplicación nativa
en Android.
Pero ahora usando jQueryMobile realizaremos el ejercicio de crear una página HTML que
contenga un menú desde donde se pueda acceder a otras 3 páginas con la información de la
Universidad Privada Telesup.
Primero tenemos que pegar los 3 archivos que hemos descargado dentro de assets:
Clic derecho
sobre assets y
pegar los
archivos
Deberá
quedar así
la carpeta
11
Ahora pegaremos también dentro de la carpeta assets una carpeta que contiene un archivo css
y una carpetas que contienes imágenes que serán usadas en nuestra pagina*
*Estos archivos serán proporcionados por el profesor
Ya sabemos los pasos para pegar dentro de la carpeta assets por lo cual esta debería quedar
así como muestra la imagen:
Así deberá
quedar tu
proyecto
Hemos copiado los archivos jQuery y también una hoja de estilos y también las imágenes que
vamos a necesitar ahora vamos a trabajar sobre nuestro nuevo archivo HTML.*
*Este archivo será proporcionado por el profesor el cual ya esta configurado para que Usted
pueda trabajar de manera sencilla sobre el mismo.
En esta página vamos a mostrar un resumen de nuestra Universidad Privada Telesup.
Esta es la pagina HTML que usaremos ahora.
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi; width=device-width;"/>
<title>UNIVERSIDAD PRIVADA TELESUP</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!-body,td,th {
color: #039;
}
Puedes ver las
-->
referencias a la
</style></head>
<body>
librería JqueryMobile
<div data-role="page" id="page">
<div class="logo"></div>
<div class="separator"></div>
<div data-role="header" class="heading">
</div>
<div data-role="content">
<ul data-role="listview" class="mainmenu">
<li><a href="#page2">Quienes Somos</a></li>
<li><a href="#page3">Nuestra Vision</a></li>
<li><a href="#page4">Nuestra Mision</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy;2013&bull; TELESUP</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Quienes Somos</h1>
</div>
<div data-role="content">
<p>Bienvenido a La Universidad Privada Telesup, que nace con
el objetivo de brindarte todas las posibilidades para que puedas convertir tu talento, en fuente
de sabiduria, desarrollo y satisfaccion para ti y para nuestra patria.
Las carreras que te ofrecemos gozan de una amplia demanda
en el mercado laboral, nacional e internacional, lo que te permitira desenvolverte con exito,
una vez egresado. El desarrollo de competencias para la generacion y
conduccion de empresas exportadoras sera el sello que te
distinga como egresado de la Universidad Privada Telesup.</p>
</div>
<div data-role="footer">
13
<h4>&copy;2013&bull; TELESUP</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Vision:</h1>
</div>
<div data-role="content">
<h2> Nuestra Vision es:</h2>
<p>Posicionarnos como la mejor universidad en la formacion de profesionales
con una excelente capacitacion en las carreras de:</p>
<figure>
<imgsrc="img/imgPage2.png" alt="photo" width="120" />
<figcaption>Formando Talentos para la Exportacion</figcaption>
</figure>
<p>Ingeniera de sistemas e informatica</p>
<p>Administracion de negocios globales</p>
<p>Derecho corporativo</p>
<p>Contabilidad y finanzas</p>
<p>Ingenieria de agro negocios</p>
<p>Arquitectura y urbanismo</p>
</div>
<div data-role="footer">
<h4>&copy;2013&bull; TELESUP</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>NuestraMision</h1>
</div>
<div data-role="content">
<p>Formar profesionales comprometidos con el desarrollo regional y nacional,
mediante una adecuada seleccion de los postulantes.
Ofrecer a los estudiantes de la universidad privada TELESUP una adecuada
formacion profesional y social, con conocimientos, habilidades,
destrezas y competencias dentro de sus respectivas carreras que le permitan
contribuir al desarrollo de la region y del pais.</p>
</div>
<div data-role="footer">
<h4>&copy;2013&bull; TELESUP</h4>
</div>
</div>
</body>
</html>
14
En estas partes hemos
puesto información de
la universidad
Ahora que ya tenemos nuestro nuevo archivo HTML iremos al index que tenemos en nuestro
proyecto y haremos lo siguiente:
Text Editor
Seleccionar open with
Ir al archivo index.html
Se mostrara en pantalla
15
Ahora procederemos a pegar nuestro nuevo HTML sobre el index.html podemos borrar el
contenido de la pantalla y pegar el nuevo código HTML. Por lo cual la pantalla debería verse así
ahora:
Se mostrara en pantalla
16
Ahora procederemos a ejecutar la aplicación.
Aplicación ejecutada:
Cuando nosotros seleccionemos un
botón este botónnos llevara a otra
página con información de la Universidad.
Usamos el botón back
para regresar a la
página principal
17
