Resumen148.206.53.84/tesiuami/UAMI17120.pdf · 2014-01-15 · droid SDK Tools el cual contiene al...

2

Resumen

La difusión de eventos culturales y deportivos es un factor importante para el éxito o fracaso de los

mismos. El tomar en cuenta el contenido del evento así como el perfil de los posibles usuarios son

algunos de los elementos a considerar para la difusión de la información correspondiente. Cualquier

tipo de evento que vislumbre tener un impacto en su difusión debe apegarse a utilizar las redes sociales

así como, los dispositivos móviles. Dentro de la UAM, Unidad Iztapalapa se promueven eventos

culturales, deportivos y recreativos, gestionados respectivamente por la Coordinación de Extensión

Universitaria. Dicha coordinación cuenta con una página web para la difusión de eventos. Sin embargo,

no todos los estudiantes conocen de su existencia. Por lo anterior, en el proyecto de investigación (I, II)

se trabajó en conjunto con esta coordinación para difundir los eventos por otras vías (dispositivos

móviles) con el fin de ser asertivos en la difusión.

En este proyecto terminal se tiene por objetivo:

Proponer una metodología y desarrollar una aplicación móvil, para la difusión de eventos

académicos en dispositivos Android.

3

Índice

1. Introducción a Android………………………………………………………………………..04

1.1 Pasos para instalar Android……………………………………………………………...04

I. Archivos que necesitamos……………………………………………………..04

II. Instalación de JDK de java…………………………………………………….04

III. Instalación del SDK de android……………………………………………….05

IV. Instalación de Eclipse Indigo…………………………………………………..06

V. Instalar complemento de android para Eclipse………………………………...06

1.2 Arquitectura Android……………………………………………………………………07

2. Programación de Interfaces de Comunicación………………………………………………...10

2.1 Wi-Fi…………………………………………………………………………………….10

3. Servidores web para dispositivos móviles……………………………………………………..11

3.1 ¿Por qué tener una web para dispositivos móviles? …………………………………...11

3.2 Ventajas de la web móvil VS web tradicional…………………………………………..11

3.3 Web para dispositivos móviles gratis……………………………………………………11

3.4 Nuestra experiencia con webamobile.com………………………………………………12

3.5 ¿Por qué elegimos este servidor? ……………………………………………………….13

4. Aplicación móvil (Android): Actividades culturales y deportivas UAM-I…………………..15

4.1 Arquitectura de la aplicación…………………………………………………………….15

I. Modulo Cultura…………………………………………………………………….15

II. Modulo Salud………………………………………………………………………15

III. Modulo Comida…………………………………………………………………….16

IV. Modulo Deportes…………………………………………………………………...16

4.2 Desarrollo de la aplicación……………………………………………………………….18

I. Creamos un nuevo proyecto………………………………………………………..18

II. Elementos Principales………………………………………………………………25

III. Comenzamos con la nueva aplicación……………………………………………...25

IV. Archivo main.xml…………………………………………………………………..25

V. Archivo ActividadesUAM.java……………………………………………………28

VI. Creación de una nueva pantalla……………………………………………………30

VII. Dar de alta una nueva Activity en AndroidManifest.xml…………………………..31

VIII. Crear un nuevo XML………………………………………………………………32

IX. Creación del archivo Menu.java correspondiente a menu.java…………………….35

X. Probar la aplicación con la unidad virtual………………………………………….42

XI. Vista horizontal……………………………………………………………………..49

XII. Permiso para conexión a internet…………………………………………………...51

XIII. WebView…………………………………………………........................................53

5. Conclusiones……………………………………………………………………………………56

6. Referencias……………………………………………………………………………………...57

4

1. Introducción a Android Android es un sistema operativo basado en Linux el cual está diseñado pensando en dispositivos móvi-

les (como celulares y tabletas) que cuenten con una pantalla táctil. Gracias a android se ha facilitado la

difusión de información, ya que facilita el acceso a internet y a redes sociales, además de cientos de

aplicaciones con múltiples funcionalidades. Es por ello que en la actualidad pensar en una aplicación

que brinde a los usuarios información, y a la vez sirva de publicidad, sobre un determinado evento o

producto es una idea que ya se debe contemplar seriamente.

1.1.- Pasos para instalar Android

En esta sección se detallaran los pasos necesarios para instalar todo lo necesario para programar aplica-

ciones para dispositivos móviles con el sistema operativo android, además de que se mostrara como

instalar una unidad virtual para probar las aplicaciones que desarrollaremos en caso de no disponer de

un dispositivo con android.

Esta guía está basada en el sistema operativo Windows XP servicie pack 3, pero se puede usar para

versiones posteriores de Windows (hasta 7).

I. Archivos que necesitamos

Para poder instalar todo lo necesario para desarrollar aplicaciones para dispositivos android de-

bemos descargar varios programas:

1. JDK de java 1

2. SDK de android 2

3. Eclipse Indigo 3

Además de estos programas es necesario descargara otros archivos, pero estos se descargaran a

través de los programas.

II. Instalación de JDK de java

Primero descargamos el JDK desde la página de java1, la versión que descargaremos es la “Ja-

va Platform (JDK)”, debemos descargar la versión especial para nuestro sistema operativo.

La instalación consiste en dar simplemente doble click al ejecutable, presionar siguiente dejan-

do todas las opciones tal y como están, lo único que debemos recordar es el nombre de la carpe-

ta de instalación.

Una vez instalado el JDK tenemos que vincular la variable .path, para esto vamos a la carpeta

de instalación, ahí buscamos la carpeta java, dentro de la carpeta java buscamos la carpeta bin,

abrimos la carpeta bin y copiamos la dirección, por ejemplo en mi equipo la dirección es

1 http://www.oracle.com/technetwork/es/java/javase/downloads/index.html (20-07-2013)

2 http://developer.android.com/sdk/index.html (20-07-2013)

3 http://www.eclipse.org/downloads/ (20-07-2017)

http://www.oracle.com/technetwork/es/java/javase/downloads/index.html

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

http://www.eclipse.org/downloads/

5

C:\Archivos de programa\Java\jdk1.7.0_09\bin. En seguida ir al menú inicio de nuestra

computadora, ahí vamos al icono de MiPC, en el icono de MiPC presionamos el botón dere-

cho del mouse, seleccionamos la opción propiedades, nos abrirá una ventana con muchas pes-

tañas, buscamos la pestaña que dice Opciones Avanzadas y la seleccionamos. En esa pestaña

buscamos el botón Variables de entorno y lo presionamos, buscamos la sección Variables del

Sistema y en este buscamos la variable path, la seleccionamos con un click y presionamos el

botón modificar. Se abrirá otra ventana con una dirección, al final de esa dirección (sin borrar

nada) ponemos un “ ; “ y después pegamos la dirección que copiamos de la carpeta bin, pre-

sionamos el botón aceptar y ya podemos cerrar las ventanas.

Una vez hecho todo esto vamos a comprobar si se instaló correctamente, para esto vamos al

menu inicio y en ejecutar escribimos CMD, nos abrirá la consola de Windows. Escribimos el

comando javac y nos debe desplegar una lista de especificaciones algo larga, si dice que no se

reconoce el comando hay que revisar que este bien la dirección en la variable path. Si todo se

mostro como lo comentamos ya tenemos instalado el JDK de java.

III. Instalación del SDK de android

Primero descargamos el archivo SDK AVD bundle for Windows de la pagina4. Descargamos

la versión especial para el sistema operativo que tengamos (32 bits o 64 bits), nos descargará un

ejecutable.

La instalación simplemente consistirá en darle doble click al ejecutable y presionar siguiente sin

modificar ninguna opción. Una vez que se ha instalado, vemos que nos instalo el programa An-

droid SDK Tools el cual contiene al SDK y al AVD de android.

Ejecutamos el SDK Manager, nos aparecerá una ventana con una lista de muchas carpetas que

podemos instalar, estas carpetas son las herramientas necesarias para poder instalar la unidad

virtual de android (aparecen varias versiones de android). Seleccionar e instalar la carpeta To-

ols, la carpeta Extras y por lo menos una versión de android, recomendamos instalar la ver-

sión 2.1 y la versión 4 para tener dos versiones (una nueva y una antigua) para probar nuestras

aplicaciones. Presionamos el botón Instal packages y esperamos, tardará bastante tiempo pero

hay que ser pacientes y esperar a que termine todas las descargas.

Una vez instalados todos los paquetes ejecutamos ahora el AVD Manager, en el AVD creamos

todos los teléfonos virtuales en los cuales probaremos nuestras aplicaciones. En el AVD lo que

tenemos que hacer es crear un teléfono virtual, para eso presionamos el botón New, en Name

escribimos el nombre que tendrá nuestra unidad virtual, recomendamos que el nombre sea rela-

cionado a la versión de android que tendrá para identificarlo fácilmente, por ejemplo “an-

droid2.1”. En Target seleccionamos la versión de android que tendrá nuestra unidad virtual, so-

lo aparecerán las que instalamos por medio del SDK. Después elegimos el tamaño de la tarjeta

SD virtual y el tamaño de la pantalla, hay que tomar en cuenta que mientras más nueva sea la

versión de android y más grande sea la pantalla más recursos de la computadora se necesitaran

4 http://developer.android.com/sdk/index.html (20-07-2013)

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

6

para correr el emulador. Presionamos el botón create AVD y nos debe abrir el teléfono virtual

que acabamos de crear. Una vez que se cargo el teléfono y aparece en la pantalla como un telé-

fono físico, ya quedo instalado totalmente el SDK de android.

IV. Instalación de Eclipse Indigo

Primero descargamos el instalador de Eclipse de la página5. De todas las versiones disponibles

descargar la versión Eclipse IDE for Java EE Developers (de igual manera debemos escoger la ver-

sión para nuestro sistema operativo ya sea de 32 o de 64 bits). Una vez descargado, su instala-

ción es bastante sencilla, solo es dar doble click en el archivo descargado, este es un archivo

comprimido el cual nos solicita una dirección en la cual descargar los archivos (es recomenda-

ble que se descargue directamente en la unidad C). En la ubicación que le indiquemos se des-

comprimirán los archivos dentro de una carpeta llamada Eclipse, dentro de la cual hay un icono

circular llamado Eclipse el cual es el archivo con el cual iniciamos el programa (recomendamos

hacer un acceso directo de este archivo en el escritorio para su fácil localización y ejecución).

Cuando lo ejecutemos por primera vez nos pedirá que decidamos donde se creará la carpeta en

la cual se almacenarán todos nuestros proyectos (workspace), es recomendable que se cree en la

misma carpeta Eclipse, para localizarla rápidamente.

V. Instalar complemento de android para Eclipse

Comenzamos ejecutando el Eclipse, el cual tiene varias pestañas, una de esas pestañas dice

Help, seleccionamos la pestaña Help, nos aparecerán varias opciones, seleccionamos Install

New Software, aparecerá una ventana llamada Install y en esta presionamos Add. Después

aparecerá otra ventana llamada Add Repository la cual tiene dos edit text, en el edit text Name

debemos poner un nombre para identificar al software que vamos a instalar, ponemos un nom-

bre por ejemplo Android, el otro edit text se llama Location, en este debemos copiar la direc-

ción web de donde se descargara este nuevo software6, en este edit text pegamos la dirección

del plugin de android, ahí buscamos el enlace para vincularlo con Eclipse7, después presiona-

mos OK y esperamos a que cargue, una vez que cargo aparecen los paquetes encontrados, nos

deben aparecer los paquetes Developers Tools y NDK plugin seleccionamos ambos y presio-

namos siguiente, nos aparecerá una ventana donde aparece una licencia, aceptamos la licencia,

presionamos Next y comenzara la instalación. Continuamos aceptando hasta que se reinicie el

Eclipse (es posible que salga una advertencia, debemos presionar aceptar, aparece siempre que

se instalan las herramientas de android). Una vez que se descarguen todos los archivos te pedirá

reiniciar el Eclipse, una vez que se reinicie ya estarán instaladas todas las herramientas necesa-

rias para android.

Es fácil darse cuenta que se instaló porque al crear un nuevo proyecto, podemos seleccionar

“crear un proyecto de android”. Si creamos el proyecto de android automáticamente se generará

un editor visual que mostrara la pantalla de un teléfono virtual, si no aparece de esta forma algo

5 http://www.eclipse.org/downloads/ (20-07-2017)

6 http://developer.android.com/sdk/installing/installing-adt.html (20-07-2017)

7 http://dl-ssl.google.com/android/eclipse/ (20-07-2017)

http://www.eclipse.org/downloads/

http://developer.android.com/sdk/installing/installing-adt.html

http://dl-ssl.google.com/android/eclipse/

7

falló en la instalación, pero siguiendo estos pasos es muy seguro que la instalación se concluya

satisfactoriamente.

1.2.- Arquitectura Android

El sistema operativo Android8 está estructurado por varias capas (figura 1) que facilitan al desarrollador

la creación de aplicaciones. Esta distribución permite acceder a las capas más bajas mediante el uso de

librerías para que así el desarrollador no tenga que programar a bajo nivel las funcionalidades

necesarias para que una aplicación haga uso de los componentes de hardware de los teléfonos. Cada

una de las capas utiliza elementos de la capa inferior para realizar sus funciones, es por ello que a este

tipo de arquitectura se le conoce también como pila.

Figura 1. Diagrama de la arquitectura del Sistema Operativo Android

9

El núcleo (kernel) del sistema operativo Android está basado en el kernel de Linux versión 2.6, similar

al que puede incluir cualquier distribución de Linux, como Ubuntu. Tiene las características que

consideran el hardware en el que se ejecutará Android, es decir, para dispositivos móviles.

El núcleo actúa como una capa de abstracción entre el hardware y el resto de las capas de la

arquitectura. El desarrollador no accede directamente a esta capa, sino que debe utilizar las librerías

disponibles en capas superiores. De esta forma nos evitamos el tener que conocer las características

específicas de cada teléfono, y así desarrollar aplicaciones que se puedan utilizar en cualquier

dispositivo que cuente con este sistema operativo. Si necesitamos hacer uso de la cámara, el sistema

operativo se encarga de utilizar la que incluya el teléfono, sea cual sea. Para cada elemento de hardware

del teléfono existe un controlador (o driver) dentro del kernel que permite utilizarlo atreves del

software.

8 Basado en http://androideity.com/2011/07/04/arquitectura-de-android/ (21-07-2013)

9 http://developer.android.com/about/index.html (21-07-2013)

http://androideity.com/2011/07/04/arquitectura-de-android/

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

8

El kernel también se encarga de administrar los diferentes recursos del teléfono (energía, memoria,

etc.) y del sistema operativo en sí: procesos, elementos de comunicación (networking), etc.

La siguiente capa que se sitúa justo sobre el kernel está compuesta por las bibliotecas nativas de

Android, también llamadas Librerías. Están escritas en C o C++ y están compiladas especialmente

para la arquitectura hardware específica del teléfono. Estas normalmente están hechas por el fabricante,

quien también se encarga de instalarlas en el dispositivo antes de ponerlo a la venta. El objetivo de las

librerías es proporcionar funcionalidad a las aplicaciones para tareas que se repiten con frecuencia,

evitando tener que codificarlas cada vez y garantizando que se llevan a cabo de la forma “más

eficiente”.

Entre las librerías incluidas habitualmente encontramos OpenGL (motor gráfico), Bibliotecas

multimedia (formatos de audio, imagen y video), Webkit (navegador), SSL (cifrado de

comunicaciones), FreeType (fuentes de texto), SQLite (base de datos), entre otras.

El entorno de ejecución de Android no se considera una capa en sí mismo, dado que también está

formado por librerías. Aquí encontramos las librerías con las funcionalidades habituales de Java así

como otras específicas de Android.

El componente principal del entorno de ejecución de Android es la máquina virtual Dalvik. Las

aplicaciones se codifican en Java y son compiladas en un formato específico para que esta máquina

virtual las ejecute. La ventaja de esto es que las aplicaciones se compilan una única vez y de esta forma

estarán listas para distribuirse con la total garantía de que podrán ejecutarse en cualquier dispositivo

Android que disponga de la versión mínima del sistema operativo que requiera la aplicación.

Dalvik es una variación de la máquina virtual de Java, por lo que no es compatible con el bytecode

Java. Java se usa únicamente como lenguaje de programación, y los ejecutables que se generan con el

SDK de Android tienen la extensión .dex que es específico para Dalvik, y por ello no podemos correr

aplicaciones Java en Android ni viceversa.

El Framework de aplicaciones es la siguiente capa, está formada por todas las clases y servicios que

utilizan directamente las aplicaciones para realizar sus funciones. La mayoría de los componentes de

esta capa son librerías Java que acceden a los recursos de las capas anteriores a través de la máquina

virtual Dalvik. Siguiendo el diagrama encontramos:

Activity Manager. Se encarga de administrar la pila de actividades de nuestra aplicación así como su

ciclo de vida.

Windows Manager. Se encarga de organizar lo que se mostrará en pantalla. Básicamente crea las

superficies en la pantalla que posteriormente pasarán a ser ocupadas por las actividades.

Content Provider. Esta librería es muy interesante porque crea una capa que encapsula los datos que se

compartirán entre aplicaciones para tener control sobre cómo se accede a la información.

Views. En Android, las vistas los elementos que nos ayudarán a construir las interfaces de usuario:

botones, cuadros de texto, listas y hasta elementos más avanzados como un navegador web o un visor

de Google Maps.

9

Notification Manager. Engloba los servicios para notificar al usuario cuando algo requiera su atención

mostrando alertas en la barra de estado. Un dato importante es que esta biblioteca también permite

jugar con sonidos, activar el vibrador o utilizar los LEDs del teléfono en caso de tenerlos.

Package Manager. Esta biblioteca permite obtener información sobre los paquetes instalados en el

dispositivo Android, además de gestionar la instalación de nuevos paquetes. Con paquete nos referimos

a la forma en que se distribuyen las aplicaciones Android, estos contienen el archivo .apk, que a su vez

incluyen los archivos .dex con todos los recursos y archivos adicionales que necesite la aplicación, para

facilitar su descarga e instalación.

Telephony Manager. Con esta librería podremos realizar llamadas o enviar y recibir SMS/MMS,

aunque no permite reemplazar o eliminar la actividad que se muestra cuando una llamada está en curso.

Resource Manager. Con esta librería podremos gestionar todos los elementos que forman parte de la

aplicación y que están fuera del código, es decir, cadenas de texto traducidas a diferentes idiomas,

imágenes, sonidos o layouts.

Location Manager. Permite determinar la posición geográfica del dispositivo Android mediante GPS

o redes disponibles y trabajar con mapas.

Sensor Manager. Nos permite manipular los elementos de hardware del teléfono como el

acelerómetro, giroscopio, sensor de luminosidad, sensor de campo magnético, brújula, sensor de

presión, sensor de proximidad, sensor de temperatura, etc.

Cámara. Con esta librería podemos hacer uso de la(s) cámara(s) del dispositivo para tomar fotografías

o para grabar vídeo.

Multimedia. Permiten reproducir y visualizar audio, vídeo e imágenes en el dispositivo.

En la última capa se incluyen todas las aplicaciones del dispositivo, tanto las que tienen interfaz de

usuario como las que no, las nativas (programadas en C o C++) y las administradas (programadas en

Java), las que vienen preinstaladas en el dispositivo y aquellas que el usuario ha instalado.

En esta capa encontramos también la aplicación principal del sistema: Inicio (Home) o lanzador

(launcher), porque es la que permite ejecutar otras aplicaciones mediante una lista y mostrando

diferentes escritorios donde se pueden colocar accesos directos a aplicaciones o incluso widgets, que

son también aplicaciones de esta capa.

Como podemos ver, Android nos proporciona un entorno sumamente poderoso para que podamos

programar aplicaciones que hagan cualquier cosa. Nada dentro de Android es inaccesible y podemos

jugar siempre con las aplicaciones de nuestro teléfono para optimizar cualquier tarea.

El potencial de Android se sitúa en el control total que se le da al usuario para que haga de su teléfono un dispositivo a su medida.

2. Programación de Interfaces de Comunicación

2.1.-Wi-Fi

10

Wi-Fi10

es una marca comercial de Wi-Fi Alliance (una organización que adopta y certifica los equipos

que cumplen con los estándares 802.11 de las redes inalámbricas de área local). El objetivo tras la

marca WiFi es fomentar las conexiones inalámbricas y facilitar la compatibilidad de los distintos

equipos. Todos los productos con conectividad WiFi tienen certificada su interoperabilidad.

Los estándares certificados por WiFi son cada vez más populares. Pero este crecimiento amenaza la

disponibilidad del espectro radioeléctrico, sobre todo cuando las conexiones deben concretarse a más

distancia (con lo cual aumenta el riesgo de interferencias).Uno de los principales defectos de la

conectividad WiFi es su poca seguridad. Para evitar esto se han creado diferentes protocolos de cifrado

que permitan codificar la transmisión de los datos y garantizar su confidencialidad. La infraestructura

de una conexión WiFi incluye puntos de acceso (emisores remotos), routers (que reciben la señal que

emite el operador de telefonía) y dispositivos de recepción (tarjetas USB, PCI o PCMCIA).

La red Wi-Fi11

es una tecnología de comunicación inalámbrica mediante ondas, nos permite tener

acceso a una red y a internet de forma inalámbrica, tiene un alcance aproximado de 20 metros en

interiores y al aire libre alcanza una distancia mayor, dependiendo del tipo de router y del medio

ambiente.

Para tener acceso a una red de Wi-Fi, debes conectarte a un punto de acceso inalámbrico o zona activa

al alcance del dispositivo que deseas conectar. Algunos puntos de acceso están abiertos y puedes

conectarte directamente a ellos. Otros puntos de acceso implementan funciones de seguridad y

requieren otros pasos de configuración, como el ingreso de una contraseña, para garantizar que solo

tendrán acceso a la red los usuarios autorizados

3. Servidores web para dispositivos móviles

3.1 ¿Por qué tener una web para dispositivos móviles?

Un dispositivo móvil conectado a Internet proporciona experiencias de interacción con un usuario que

busca respuestas inmediatas y en pocos clics. Es un mundo digital acelerado, en donde para cualquier

empresa, institución, escuela, etc. ya es indispensable tener presencia en todos los medios sociales y

digitales.

Un sitio web para dispositivos móviles es una adaptación que se realiza al desarrollo web tradicional,

logrando que con esto se ajuste perfectamente a cualquier tipo de pantalla.

10

http://definicion.de/wifi/ (22-07-2013) 11

https://support.google.com/nexus/galaxy/answer/1649770?hl=es (22-07-2013)

http://definicion.de/wifi/

https://support.google.com/nexus/galaxy/answer/1649770?hl=es

11

3.2 Ventajas de la web móvil VS web tradicional

Navegación

El navegar y explorar una página web convencional desde un móvil dispositivo móvil es muy

tedioso, ya que hay que usar el zoom, desplazarse horizontal y lateralmente para leer, lo cual es

lento y conduce al aburrimiento y la frustración en pocos segundos.

Efectividad

Una web especial para un dispositivo móvil obedece a principios diferentes a los de una web

tradicional para PC, ya que la web para dispositivos móviles tiene tamaños, iconos,

diagramación, velocidad de carga, etc. Diseñados especialmente para los dispositivos móviles,

lo cual produce comodidad al visualizarla a diferencia de visualizar una web tradicional en el

dispositivo móvil. Contiene la información más concisa que un sitio web tradicional,

facilitando a los usuarios la búsqueda rápida de la información que necesitan.

Contacto

La visualización de las páginas web a través de los dispositivos móviles permite a los usuarios

tomar acciones que incrementan la comunicación e interacción con sus lugares de interés, ya

que es posible en el momento llamar del celular, ubicar las rutas y direcciones, realizar

reservaciones, y muchas más cosas a través del dispositivo móvil.

3.3 Web para dispositivos móviles gratis

El sitio webamobile.com contiene herramientas para crear un sitio web para dispositivos móviles de

una forma fácil, rápida y en versiones Gratuita y Premium.

Estamos en un momento en que el internet en los dispositivos móviles está en plena expansión, con

unas cifras de mercado crecientes exponencialmente mes a mes. Datos como que más del 50% de los

accesos a facebook se realizan desde dispositivos Smartphone o que en España hay más de 9 millones

de usuarios con un plan tarifario de internet en el celular hacen que sea más relevante el tener una web

adaptada para dispositivos móviles.

El sitio webamobile.com esta creado sobre código abierto y amplía sus funciones día a día, permitiendo

crear una web para dispositivos móviles más completa y acceder al mercado de usuarios que usan

internet en dispositivos móviles de una forma económica y sin mucho esfuerzo.

Con las funcionalidades más relevantes de webamobile.com puedes:

Crear tu web para dispositivos móviles con un gestor intuitivo, sin conocimientos de

programación y de forma gratuita

Incorporar a tu web para dispositivos móviles los RSS de tu sitio web.

Añadir galerías de imágenes en tu sitio web para dispositivos móviles.

Agregar videos a tu sitio web para dispositivos móviles.

Disponer de funciones de redes sociales; para ello, difunde tu sitio web para dispositivos móviles.

Crear tantas páginas como desees: catálogos, cartas de platos y menús, pisos, etc.

12

Hacer que tu sitio web para dispositivos móviles sea compatible con todas las plataformas del mercado.

Conseguir diseños para tu sitio web para dispositivos móviles con resultados profesionales.

Disponer de soporte on-line.

Utilizar QR-codes para difundir tu sitio web para dispositivos móviles.

El mercado de la web para dispositivos móviles esta poco explotado y es un momento clave para

posicionarse en un entorno con muchos clientes potenciales donde actualmente la competencia es muy

inferior al de la web estándar.

3.4 Nuestra experiencia con webamobile.com

Nosotros elegimos el servidor webamobile.com por su facilidad de crear páginas web a la medida de

un teléfono móvil o de una tableta, ya que con las plantillas que te otorga este servidor nos brinda un

ambiente más fácil para diseñar y crear nuestra paginas.

Las plantillas que brinda este servidor hacen que nuestros diseños se vean de una forma profesional y

que nuestra información que luzca de una forma sin igual. Estas plantillas nos dan una amplia variedad

de diseños para cualquier tipo de información (Figura 2).

Figura 2. Plantillas de páginas web para dispositivos móviles de webamobile.com

Este servidor aparte de plantillas nos da otro tipo de herramientas como el tipo de páginas que

queremos hacer. Si queremos usar pura información o si queremos videos o algún formulario, este tipo

de servicio también nos lo da este servidor.

Lo que nos ayudo mucho de este servidor fue que a pesar de que estaba limitado y solo te dejaba crear

algunas páginas, logramos crear varias cuentas y así tener más de 20 páginas diferentes con las cuales

logramos interactuar.

En estas páginas la información está organizada y clasificada, y así toda la información sale desplegada

de la forma que buscábamos.

Dentro de esas 20 páginas están las de deportes, cultura y otras.

13

Las fotos fueron creadas por nosotros mismos con programas de fotografía, algunas las tomamos

nosotros, otras las bajamos de Internet y gracias a las plantillas de este servidor se lograron subir y

organizar de una manera fácil.

3.5 ¿Por qué elegimos este servidor?

A diferencia de otros servidores que probamos este servidor nos daba una dirección por cada página

además de que nos daba más páginas disponibles por cada cuenta gratuita.

Además nos daban más opciones de diseño para las paginas, tenía como 20 diferentes diseños a

comparación de las otros servidores que solo ofrecían como 10 diseños y a pesar de que no usamos

todos, si es mejor tener más opciones.

También la forma de diseñar la página y de subir los archivos es mucho más fácil, ya que cuando

necesitas subir un archivo en cierta página te lo sube donde tú le indicas y no como los demás

servidores que primero subes el archivo y después dices su ubicación.

Otra ventaja de este servidor comparado con los demás es que su registro es mucho más corto ya que

los demás servidores te piden demasiadas cosas y son muy laboriosos.

Características webamobile.com Otros

Número de páginas que ofrece 5 Alrededor de 4

Plantillas de diseños para las paginas 15 Alrededor de 7

Espacio de almacenamiento 50 mg Alrededor de 40 mg

Ofrece galería de fotos Disponible No disponible

Plantilla de formulario Disponible Disponible

Conexión a paginas RSS Disponible Disponible

Gestión de datos Disponible Disponible

Conexión a redes sociales Disponible No Disponible

Botón me gusta (Facebook) Disponible No Disponible

Tabla comparativa de páginas de desarrollo de sitios web para dispositivos móviles.

14

4. Aplicación móvil (Android): “Actividades

culturales y deportivas UAM-I

4.1.-Arquitectura de la aplicación

Propusimos una arquitectura de 5 módulos principales, la figura 3 muestra dichos módulos: Menú,

Deportes, Cultura, Salud, Comida.

Figura 3. Módulos principales de la aplicación.

A continuación mostraremos como se desarrolla cada uno de estos módulos.

I. Modulo Cultura En este modulo incluimos todas las actividades culturales que se pueden realizar dentro de la UAM

Iztapalapa, como son asistir a conciertos, a obras de teatro, a clases de salsa, proyección de una película,

etc. Además de que incluyen la información de cómo unirse al coro o al club de teatro. Estas

15

actividades las englobamos en diferentes módulos (figura 4).

Figura 4. Desarrollo del modulo Cultura.

II. Modulo Salud

En este modulo incluimos toda la información referente a los servicios de salud que brinda la UAM

Iztapalapa como son: Dentista, Medico General, Nutrición.

Figura 5. Desarrollo del modulo Salud.

III. Modulo Comida

En este modulo incluimos toda la información de los lugares en los que se puede comprar alimentos,

donas, café, agua, pastes, etc. en la UAM Iztapalapa como son el kiosco y la cafetería (figura 6).

Figura 6. Desarrollo del modulo Comida.

IV. Modulo Deportes

En este modulo incluimos todas las actividades deportivas que se pueden practicar en la UAM

Iztapalapa como son: Soccer, Karate, Squash, Atletismo, etc. (figura 7).

Figura 7. Desarrollo del modulo de deporte

4.2.-Desarrollo de la aplicación

A continuación describiremos los pasos que seguimos para programar la aplicación de forma detallada.

Dependiendo la versión del Eclipse y del SDK de android los pasos pueden variar un poco. A continua-

ción describiremos los pasos que seguimos utilizando los siguientes programas:

Windows XP Professional

Version 2002 Service Pack 3

Eclipse Java EE IDE for Web Developers

Version: Indigo Service Release 2

Build id: 20120216-1857

Android SDK manager rev 21

Nota sobre Eclipse

Eclipse nos brinda ayuda para realizar el código, casi siempre si presionamos las teclas ctrl y barra

espaciadora Eclipse nos desplegara una serie de opciones que podemos utilizar según la parte del

código en que nos encontremos. Por ejemplo en android en los view debemos llenar una serie de carac-

terísticas con el comando “android:”, entonces si presionamos ctrl y barra espaciadora después de los

“:” nos desplegara una lista de los atributos que le podemos asignar a ese tipo de elemento.

I. Creamos un nuevo proyecto

Lo primero que tenemos que hacer es crear un nuevo proyecto de android. Para crear un nuevo proyec-

to de android seleccionamos la pestaña File y seleccionamos la opción New, nos desplegara una serie

de opciones, elegimos la opción Other, ahí nos mostrara una lista con carpetas, elegimos la carpeta de

android. A continuación nos mostrara una lista de todos los tipos de archivos que podemos generar,

elegimos el tipo Android Aplication Project (figura 7 y 8).

18

Figura 7. Ventana donde seleccionamos el tipo de proyecto que crearemos.

Figura 8. Ventana en la que llenamos el nombre y otros datos del proyecto.

El Aplication Name y el Project Name deben ser idénticos (de hecho al llenar uno se llena automáti-

camente el otro). Este es el nombre que tendrá nuestra aplicación, se debe escribir comenzando con

una letra mayúscula, se recomienda que no sea muy largo además de que no debe contener espacios y

este nombre debe ser algo que describa que describa lo que hace la aplicación, en este caso para esta

aplicación utilizamos ActividadesUAM.

19

El Package Name es el nombre del paquete principal de nuestra aplicación, en el se alojaran los archi-

vos .java principales. La forma en que se llena este campo es la siguiente: co-

m.android.nombre.aplicasion, este nombre debe ser único para cada aplicación. Para nuestra aplica-

ción utilizamos com.android.actividades.uam

El Build SDK es la versión de android en la que se basa para generar el código con el que empezamos

la aplicación, además de que carga los elementos que podemos utilizar. Se recomienda usar la misma

versión que el Minimum Required SDK para evitar errores. En esta aplicación utilizamos la versión

Android 2.1.

El Minimum Required SDK es la versión mínima de android en la cual funcionará la aplicación, en

nuestra aplicación utilizamos Android 2.1. (figura 9).

Figura 9. Ventana donde se eligen el Package Name, Build SDK y el Minimum Required SDK

Si todo se hizo correctamente se habilitara el botón Next, lo presionamos y nos aparecerá otra pantalla,

en donde podemos diseñar el icono que tendrá nuestra aplicación (figura 10), o podemos usar uno pre-

determinado.

20

Figura 10. Pantalla para personalizar el icono de la aplicación.

Nosotros diseñamos el icono, primero seleccionamos una imagen, para esto presionamos el botón ima-

gen nos cargara un Image File, en el cual pondremos la ubicación de la imagen que queremos utilizar.

Para el icono, en el Foreground Scaling podemos elegir si la imagen aparecerá centrada o expandida

para que abarque todo el icono. En Shape escogemos la forma que tendrá, ya sea cuadrada o circular,

en Background Color elegimos el color que tendrá para rellenar las partes donde no cubra la imagen.

Una vez que diseñamos el icono presionamos el botón Next. Nos aparecerá otra ventana (figura 11), en

esta ventana elegimos que nuestro Activity aparezca en blanco y presionamos el botón Next. Después

nos aparecerá otra ventana con varias opciones (figura 12).

Figura 11. Ventana en la que elegimos como se creara la nueva Activity. Figura 12. Ventana con opciones para la nueva Activity.

21

En Activity Name debemos poner el nombre que tendrá nuestra actividad, es decir el archivo .java con

el que inicia nuestra aplicación, el archivo que le da la funcionalidad a la primera vista (Se explicara

más adelante), nosotros utilizamos ActividadesUAMActivity.

En Layout Name se pone el nombre que tendrá el archivo .xml con el que iniciara nuestra aplicación,

nosotros utilizamos main.

Las demás opciones las dejamos tal y como están, presionamos el botons Finish y Eclipse nos generara

automáticamente el proyecto con una serie de archivos creados por default, que lo único que contienen

es el código necesario para el clásico Hola Mundo.

Figura 13. Archivos generados por default al crear un nuevo proyecto android.

La figura 13 muestra las carpetas principales, describiremos brevemente los elementos más importan-

tes12

:

Carpeta /src/. Contiene todo el código fuente de la aplicación, código de la interfaz gráfica, clases

auxiliares, etc. Inicialmente, Eclipse creará por nosotros el código básico de la pantalla (Activity) prin-

cipal de la aplicación, siempre bajo la estructura del paquete java definido (figura 14).

12

Una descripción más detallada se encuentra en http://es.slideshare.net/tiradorarco/manual-programacin-android-

sgolivernet-v20-11296903 (24-07-2013)

http://es.slideshare.net/tiradorarco/manual-programacin-android-sgolivernet-v20-11296903

http://es.slideshare.net/tiradorarco/manual-programacin-android-sgolivernet-v20-11296903

22

Figura 14. Contenido de la carpeta src.

Carpeta /res/. Contiene todos los archivos de recursos necesarios para el proyecto: imágenes, vídeos,

cadenas de texto, etc. Los diferentes tipos de recursos se distribuyen entre las siguientes carpetas:

/res/drawable/. Contienen las imágenes de la aplicación. Se puede dividir en /drawable-ldpi,

/drawable-mdpi, /drawable-hdpi y /drawable-xhdpi para utilizar diferentes recursos dependien-

do de la resolución del dispositivo (figura 15).

/res/layout/. Contienen los archivos de definición de las diferentes pantallas de la interfaz gráfi-

ca(figura 15). Se puede dividir en /layout y /layout-land para definir distintos layouts depen-

diendo de la orientación del dispositivo (para definir una pantalla horizontal y una vertical).

/res/values/. Contiene otros recursos de la aplicación como por ejemplo cadenas de texto

(strings.xml), estilos (styles.xml), colores (colors.xml), etc. (figura 15).

23

Figura 15. Ubicación de las carpetas drawable, layout y values.

Carpeta /gen/. Contiene una serie de elementos de código generados automáticamente al compilar el

proyecto (figura 16). Cada vez que generamos nuestro proyecto, la maquinaria de compilación de An-

droid genera por nosotros una serie de archivos fuente .java dirigidos al control de los recursos de la

aplicación, es decir se dedican a darle funcionalidad a los elementos definidos en el .xml.

Figura 16. Contenido de la carpeta gen.

El archivo más importante de esta carpeta es el archivo R.java, y la clase R.

Esta clase R contendrá en todo momento una serie de constantes con los ID de todos los recursos de la

aplicación incluidos en la carpeta /res/, de forma que podamos acceder fácilmente a estos recursos

desde nuestro código a través de este dato.

Por lo mismo es recomendable no modificarlas manualmente, Eclipse escribe en ellas conforme se va

necesitando sin necesidad de hacer ningún paso extra.

24

Carpeta /assets/. Contiene todos los demás archivos auxiliares necesarios para la aplicación (y que se

incluirán en su propio paquete), como por ejemplo archivos de configuración, de datos, etc.

La diferencia entre los recursos incluidos en la carpeta /res/raw/ y los incluidos en la carpeta

/assets/ es que para los primeros se generará un ID en la clase R y se deberá acceder a ellos con los

diferentes métodos de acceso a recursos. Para los segundos sin embargo no se generarán ID y se podrá

acceder a ellos por su ruta como a cualquier otro archivo del sistema.

Archivo AndroidManifest.xml. Contiene la definición en XML de los aspectos principales de la apli-

cación, como por ejemplo su identificación (nombre, versión, icono, etc.), sus componentes (pantallas,

mensajes, etc.), o los permisos necesarios para su ejecución. Aquí debemos definir cada Activity que

necesite nuestra aplicación (una Activity es el archivo .xml y el archivo .java que conforman una panta-

lla o ventana con funcionalidad de nuestra aplicación).

II. Elementos Principales

Nuestra aplicación se basa principalmente por Activitys, una Activity es una pantalla (o ventana) que se

compone por dos archivos:

Un archivo .xml en el cual se define la vista, en este definimos que elementos y en que posición apare-

cerán en esta ventana, además de poder asignar un fondo de pantalla, un texto, etc, es decir todo lo vi-

sible se define en el archivo .xml.

Un archivo .java en el cual se le da la funcionalidad a los elementos definidos en el archivo .xml, aquí

se especifica que acción se desencadenará al utilizar cada elemento.

III. Comenzamos con la nueva aplicación

Después de crear el nuevo Android Aplication Proyect, Eclipse nos generara varios archivos de los

cuales editaremos solo dos. En la carpeta res/layout editaremos el archivo main.xml y en la carpeta

src editaremos el archivo ActividadesUAM.java

IV. Archivo main.xml

Nosotros decidimos que nuestra aplicación tuviera una pantalla de introducción, entonces para hacer

esto es necesario que nuestra aplicación muestre una imagen cierta cantidad de tiempo y después man-

da llamar a otra Activity.

Primero comenzamos agregando una imagen a la carpeta de res, como es para la pantalla completa

queremos que tenga una buena calidad; entonces elegimos la carpeta res/drawable-mdpi para almace-

nar la imagen que utilizaremos para nuestra introducción.

Para utilizar una imagen en nuestra aplicación debemos seleccionar la imagen con el mouse, después la

“jalamos” a la carpeta que le corresponde según la calidad que queremos que tenga. Después nos apa-

recerá una ventana donde nos pregunta que si deseamos copiarla o solo ligarla, nosotros elegimos co-

piarla. Ya que tenemos la imagen en la carpeta res/drawable-mdpi proseguimos a editar el archivo

main.xml.

25

Para editar los archivos .xml Eclipse nos permite hacerlo de dos formas distintas, una es con un editor

gráfico (el código se generara automáticamente según el elemento seleccionado, ver figura 17) y la

segunda es modificar directamente el código (figura 18).

Figura 17. Editor grafico de Eclipse para android. Figura 18. Editor de código de Eclipse para android.

Se puede utilizar cualquiera de las dos formas según los gustos y los conocimientos del usuario. Noso-

tros utilizamos la forma de modificar directamente el código.

En el archivo main.xml podemos observar que tenemos ya código, este código lo genera automática-

mente Eclipse cuando crea el proyecto de android. El código que tenemos es un linear layout y un

textview.

Este es el TextView

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:text="@string/hello_world"

tools:context=".MainActivity" />

Esta parte del código la debemos borrar (la explicaremos más adelante), porque en esta pantalla no la

utilizaremos.

El linear layout es un contenedor de elementos que según la orientación del layout es la forma en que

se acomodará cada elemento, si elegimos orientación horizontal los elementos se acomodara uno a la

derecha del otro, y si elegimos la orientación vertical cada elemento se acomodara uno debajo del otro.

El código que tememos del linear layout es:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

26

</LinearLayout>

Vamos a explicar línea por línea para comprender que significa cada elemento13

:

<?xml version="1.0" encoding="utf-8"?>. En versión tenemos la versión de xml y en encoding

tenemos el el tipo de caracteres que podemos utilizar según el código que pongamos.

Los elementos en android se definen de la siguiente forma <NombreElemento

Caracteristicas>

Elementos que contiene

</NombreElemento>}

Ahora explicaremos la forma en que se define el elemento LinearLayout:

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android. Aquí mos-tramos una referencia de donde ver las especificaciones de xml para android.

android:layout_width="fill_parent". Esta línea es una línea de propiedades de los elementos. Los elementos que podemos utilizar para nuestras aplicaciones tienen varias propiedades que podemos

ajustar según nuestros gusto y necesidades, para poder poner una característica lo que se hace es que se

escribe android:, con lo cual Eclipse nos desplegara una lista de características disponibles para el

elemento especifico. En este casi tenemos android:layout_width="fill_parent" , lo que indica

esta característica es el ancho que tendrá el layout, fill_parent nos dice que será del ancho del conte-nedor, en este caso es la pantalla por lo cual el ancho será el ancho de la pantalla.

android:layout_height="fill_parent". Esta línea nos indica que tan alto será nuestro layout,

como tenemos fill_parent el alto será del tamaño del contenedor, como nuestro contenedor es la pantalla el alto será lo que tiene de alto la pantalla.

android:orientation="vertical". En esta instrucción indicamos que orientación tendrá nuestro

linear layout, como elegimos vertical los elementos que contenga se colocaran uno debajo de otro.

Ahora lo siguiente que vamos a hacer es ponerle un fondo de pantalla a nuestra pantalla, como quere-

mos que sea una introducción haremos que se vea esa imagen unos segundos y después nos mande al

menú de la aplicación.

Para que nuestra pantalla muestre la imagen basta simplemente en definirla como fondo de pantalla,

para hacer esto lo que tenemos que hacer es agregar una característica más al LinearLayout.

android:background="@drawable/intro" Esta característica lo que hace es que utiliza de fondo de

pantalla la imagen que se encuentra en la carpeta drawable la cual tiene de nombre intro.

13

Estas explicaciones pueden ser vistas en los video tutoriales de Jouss Alonso

http://www.youtube.com/user/JoussAlonso/videos?sort=da&view=0 (24-07-2013)

http://schemas.android.com/apk/res/android

http://www.youtube.com/user/JoussAlonso/videos?sort=da&view=0

27

Bien ahora ya terminamos con el .xml de la introducción de la aplicacion, ahora lo que debemos hacer

es darle funcionalidad, para ello hay que modificar el archivo .java.

V. Archivo ActividadesUAM.java

En nuestro caso el archivo java tiene el nombre ActividadesUAM.java pero puede cambiar según el

nombre que el asignemos a la aplicación. El archivo java se encuentra en la carpeta

src/com.android.actividades.uam, el nombre del paquete también puede cambiar según el que le

asignamos en el Package Name cuando creamos el proyecto.

En el archivo ActividadesUAM.java tenemos el código:

package com.android.actividades.uam;

import android.app.Activity;

public class ActividadesUAM extends Activity{

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

Para poder hacer que aparezca un cierto tiempo la introducción de la aplicación y luego mande a llamar

al menú tenemos que agregar las siguientes líneas de la siguiente forma:



import android.content.Intent;

import android.os.Bundle;

public class ActividadesUAM extends Activity{

@Override

public void onCreate(Bundle savedInstanceState) {


setContentView(R.layout.main);

Thread logo = new Thread(){

public void run(){

try{

int tiempo = 0;

while(tiempo < 1500){

sleep(100);

tiempo = tiempo + 100;

}

Intent menu = new In-

tent("com.android.actividades.uam.MENU");

startActivity(menu);

}catch(InterruptedException e){

e.printStackTrace();

}finally{

28

finish();

}

}

};

logo.start();

}

}

A continuación explicaremos las partes más importantes del código anterior:

Lo que haremos es utilizar un thread para contar un periodo de tiempo, que será el tiempo que se mos-

trara la imagen de nuestra introducción para después llamar a la pantalla del menú.

Thread logo = new Thread(). En esta instrucción generamos un nuevo hilo llamado logo, el cual

se ejecutara en el instante en que inicia nuestra aplicación.

public void run(). Lo que se encuentra dentro de esta es lo que nuestro hilo (logo) hará durante su

ejecucion.

try{

int tiempo = 0;

while(tiempo < 1500){

sleep(100);

tiempo = tiempo + 100;

}

Intent menu = new Intent("com.android.actividades.uam.MENU");

startActivity(menu);

}catch(InterruptedException e){

e.printStackTrace();

}finally{

finish();

}

Lo que sucede en estas líneas es que se intentara inicializar una variable llamada tiempo, mientras

tiempo sea menor a 1500 se realizara un siclo en el cual el programa dormirá 100 milisegundos e in-

crementara a la variable tiempo en 100, una vez que la variable tiempo llegue a 1500 se finalizara el

siclo. Después el programa llamara a la nueva pantalla llamada menú (esto lo explicaremos posterior

mente). Si todo esto falla el programa mandara un mensaje de error, si no falla continua la ejecución y

se finaliza este mini programa.

Y de esta forma generamos la introducción de la aplicación. En la figura 19 mostramos como quedo la

introducción de nuestra aplicación, la cual dura aproximadamente entre 1 y 2 segundos.

29

Figura 19. Captura de la introducción de la aplicación en un teléfono real.

VI. Creación de una nueva pantalla

Como mencionamos anteriormente, nuestra introducción manda llamar una pantalla nueva, esta panta-

lla nueva recibe el nombre de Activity, la cuan es de tipo Intent.

Primero explicaremos como se invoca un nuevo Intent (o Activity). La estructura para invocar un nue-

vo Intent es la siguiente:

Intent nombre_variable = new Intent(“nombre del paquete.nombre_activity”);

startActivity(nombre_variable);

Se tiene que definir una variable de tipo Intent, podemos usar el nombre que tendrá nuestra nueva Acti-

vity, después debemos igualarla a new Intent porque estamos generando una nueva Activity, y entre los

paréntesis y comillas va el nombre del paquete después un punto y el nombre que tendrá nuestra Acti-

vity. En nuestra aplicación utilizamos Intent menu = new Intent("com.android.actividades.uam.MENU");

Donde definimos a la variable menú de tipo Intent, nuestro paquete es android.actividades.uam y

nuestra nueva actividad se llamara MENU, se utilizan mayúsculas para que sea fácil identificar el nom-

bre.

30

Después de definir nuestra nueva Activity, la invocamos para invocarla se utiliza el comando:

startActivity(nombre_variable);.

En nuestra aplicación utilizamos startActivity(menu);

Una vez que lo invocamos sigue darla de alta en el archivo AndroidManifes.xml.

VII. Dar de alta una nueva Activity en AndroidManifest.xml

Para dar de alta una nueva Activity en el AndroidManifest podemos copiar el código de la Activity ya

existente y pegarlo, después aremos unas modificaciones para que sea propio de la nueva Activity. El

código de una Activity es el siguiente:

<activity

android:name=".ActividadesUAM"

android:label="@string/title_activity_actividades_uam" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

Ahora lo que necesitamos modificar es lo siguiente:

En android:name debemos escribir el nombre que tendrá nuestro archivo .java correspondiente a esta

nueva Activity.

En android:label debemos escribir el titulo que aparecerá en la pantalla del teléfono cuando se en-

cuentre en esta Activity.

En <action android:name debemos escribir el nombre del paquete donde se encuentra la Activity

junto con el nombre que le asignamos, es decir debemos copiar y pegar lo mismo que escribimos cuan-

do la creamos en el archivo java de la actividad que invoque a esta nueva actividad.

En <category android:name="android.intent.category.LAUNCHER" /> solo debemos cambiar

el LAUNCHER por DEFAULT.

En el caso de nuestra aplicación quedaría de la siguiente manera:

<activity

android:name=".Menu"

android:label="Actividades UAM" >

<intent-filter>

<action android:name="com.android.actividades.uam.MENU" />

<category android:name="android.intent.category.DEFAULT" />

</intent-filter>

</activity>

31

Ahora simplemente guardamos los cambios en el AndroidManifest y proseguimos con la generación

del archivo XML correspondiente a esta nueva Activity.

VIII. Crear un nuevo XML

En esta nueva pantalla (que será el menú de la aplicación) lo que haremos es ponerle un fondo de pan-

talla, una imagen que utilizaremos como título, después le agregaremos un ScrollView para qué dentro

coloquemos unas imágenes que utilizaremos como botones para llamar a otra Activity. Las cuatro imá-

genes que utilizaremos como botones serán las imágenes representativas de las actividades culturales,

deportivas, el servicio médico y el servicio de alimentos.

Para crear un nuevo archivo XML tenemos que hacer lo siguiente:

En la carpeta res/layout, ponemos el cursor del mouse, presionamos el botón derecho y seleccionamos

new, en new elegimos la opción Android XML File, ver figura 20.

Figura 20. Pasos para crear un nuevo archivo Android XML File.

Si no aparece seleccionamos Other y después seleccionamos la carpeta Android, dentro de esta apare-

cerá el Android XML File.

Después nos aparecerá una ventana (figura 21) con Resourse Tipe, en este aparece Layout, también

aparece Proyect, aquí aparece el nombre del proyecto y al final File, aquí debemos poner el nombre

que tendrá nuestro archivo XML, se recomienda que sea el mismo nombre que le dimos a la Activity

pero solo con minúsculas, ya que los nombres de los archivos XML deben ir en solo minúsculas.

32

Figura 21. Ventana donde le asignamos nombre y otras opciones al nuevo archivo XML.

Ya que escribimos el nombre (en File) se habilita el botón Finish y lo presionamos, nos generara el

archivo XML con el nombre que le dimos únicamente con un Linear Layout.

Primero le damos unas propiedades al linear layout, que el ancho y el alto sean del tamaño de la panta-

lla (fill parent), que la orientación sea vertical (cada elemento se coloca debajo del anterior) y le asig-

namos un fondo de pantalla (recordemos que primero hay que importar la imagen que utilizaremos a la

carpeta drawable). Quedándonos de la siguiente manera:





android:orientation="vertical"

android:background="@drawable/fondo">

Ahora colocaremos un ImageView una imagen que utilizaremos como título. Para poder ver una ima-

gen tenemos que utilizar el elemento ImageView, el ImageView es un elemento que sirve para visuali-

zar las imágenes que tenemos en las carpetas drawable, a las cuales podemos darles diferentes atributos

como tamaño, posición, etc. Además de que estas las podemos utilizar como botones (si les asignamos

esa funcionalidad).

Para nuestra aplicación utilizamos el siguiente ImageView:

<ImageView


android:layout_height="120dp"

android:layout_gravity="center_horizontal"

android:src="@drawable/actividades"

android:id="@+id/ivTitulo"

android:paddingBottom="10dp"/>

33

Al cual le dimos las características de que sea del acho de la pantalla y de alto 120dp, tanto en el alto y

el ancho además de utilizar el fill_parent (tamaño del contenedor) y del wrap_content (tamaño del

contenido) pueden utilizar valores numéricos para tener un mayor control en el tamaño de la imagen.

El android:layout_gravity nos indica la posición que tendrá nuestra imagen respecto al layout, en este

caso escogimos center_horizontal, lo cual nos indica se centrara pero solo en la posición horizontal.

En android:src debemos colocar la ubicación y el nombre de la imagen que vamos a utilizar, solo se

coloca el nombre, no es necesario poner la terminación.

En android:id debemos escribir el id con el que identificaremos al elemento para darle una funcionali-

dad en el archivo .java. Se recomienda que se utilicen siglas del tipo de elemento y un nombre descrip-

tivo, como en este caso usamos iv haciendo referencia a ImageView y Titulo porque es la imagen que

utilizaremos de titulo.

Ahora ya que tenemos la imagen de titulo crearemos un ScrollView el cual contendrá a las imágenes

que corresponden a cada tipo de actividad.

Un ScrollView es un contenedor en el cual podemos desplazar los elementos como si fuera un carrusel,

en este caso imágenes, este es útil cuando tenemos muchas imágenes y estas no caben en la pantalla.

La forma de utilizar el ScrollView primeramente elegimos el tipo de ScrollView, puede ser el Horizon-

taScrollView para que el carrusel se mueva de izquierda a derecha y el ScrollView para que el carrusel

se mueva de arriba abajo.

En este caso utilizaremos un ScrollView

<ScrollView



android:scrollbars="none">

Al igual que los otros Views podemos asignarle un alto y un ancho, en este caso queremos que sea del

ancho de la pantalla y que sea del alto del contenido. Una característica que no habíamos visto es el

android:scrollbars="none" con la cual podemos hacer que aparezca la barra de desplazamiento u

ocultarla.

Ya que definimos al ScrollView, para que funcione dentro debemos definir un LinearLayout, el cual

debe tener la misma orientación que el ScrollView.

Dentro del LinearLayout pondremos los ImageView de las imágenes que queremos que muestre, va-

mos a mostrar una imagen para deportes, una para actividades culturales, una para servicios médicos y

una para servicios de alimentos (no hay que olvidar que hay que copiar las imágenes en la carpeta dra-

wable).

El código para esta sección de la actividad quedaría de la siguiente manera:

<ScrollView


34



<LinearLayout

android:paddingTop="20dp"

android:weightSum="8"




<ImageView




android:src="@drawable/deportes"

android:id="@+id/ivDeportes"/>

………

<ImageView




android:src="@drawable/comida"

android:id="@+id/ivAlimentos"/>

</LinearLayout>

</ScrollView>

Ya que tenemos definido nuestro archive XML proseguimos a darle funcionalidad a los elementos que

definimos en el archive .java.

IX. Creación del archivo Menu.java correspondiente a menu.java

Para crear un nuevo archivo .java tenemos que posicionar el ratón en la carpeta src, la abrimos y posi-

cionamos el puntero del ratón en el paquete y presionamos click derecho, seleccionamos la opción

New, nos aparecerá una lista, en la lista elegimos la opción class y la seleccionamos, ver figura 22.

35

Figura 22. Pasos para crear una nueva Java Class.

Nos desplegara una pantalla, la cual contiene un Source folder, en el cual se debe encontrar la ubica-

ción de la carpeta res. También contiene un Package el cual debe contener el nombre de nuestro pa-

quete. En la opción Name debemos escribir el nombre de nuestro archivo java, es recomendable escri-

bir el mismo nombre que el archivo XML (además debe ser el mismo que el que pusimos en el android

manifest). Como tenemos menu.xml debemos llamar al archivo java Menu (los nombres de los archi-

vos java deben comenzar con una mayúscula). Las demás opciones las dejamos tal y como están, des-

pués presionamos Finish, ver figura 23.

36

Figura 23. Ventana en la que se le asigna nombre al nuevo archivo .java.

Se nos generara el archivo Menu.java pero estará casi vacío. Solo contendrá:


public class Menu {

}

Lo primero que tenemos que hacer es ligarlo a nuestra Activity, para esto después de donde dice Menu

debemos poner el comando extends Activity (figura 24), Eclipse nos mostrara un error, este error indi-

ca que nos falta importar algo, para importarlo basta con poner el cursor sobre Menu y presionar click

derecho, Eclipse nos desplegara una lista de opciones entre las que aparece la opción de importar la

actividad.

37

Figura 24. Como ligar el archivo .java a nuestra Activity.

Una vez que importamos la actividad debemos añadirle el método OnCreate (figura 25), para poderlo

generar lo que tenemos que hacer es presionar la pestaña Source, de la cual elegimos la opción Ove-

rride/Implements.

Figura 25. Como generar el método OnCreate.

Nos desplegara una lista con todos los métodos que podemos implementar, buscamos el onCrea-

te(Bundle), seleccionamos su casilla y presionamos OK (Figura 26 y 27).

38

Figura 26. Seleccionar el método onCreate(Bundle). Figura 27. El código que se genera al seleccionar el método onCrete(Bundle).

Ya que tenemos el OnCreate, ahora tenemos que ligarle el XML, para esto usamos el setContenView,

el cual se utiliza de la siguiente manera, setContentView(R.layout.nombre_xml); ver figura 28.

Figura 28. Como se utiliza el setContenView.

Ya que generamos lo básico para el java comenzamos a darle funcionalidad a los elementos del XML,

primero tenemos que definir los elementos según su tipo de la formar

TipoElemento nombre_elemento;

Estas definiciones van arriba del @Override, debemos definir los ImageView, no hay que definir el

ScrollView ni el LinearLayout porque son solo contenedores y no se les puede asignar alguna fun-

ción.

Ya que definimos el tipo de los elementos debemos decirle a la aplicación donde se encuentran, para

indicar donde se encuentra un elemento se sigue la estructura:

39

nombre_elemento = (TipoElemento) findViewById (R.id.id_elemento);.

Ya que le dijimos donde se encuentra, ahora debemos indicar que elemento se puede utilizar como

botón, para ello después de Activity debemos implementar el OnClickListener, al igual que cuando

extendimos la actividad nos marcara el error de que falta implementarlo, se implementa de la misma

forma, simplemente se pone el cursor del ratón sobre OnClickListener y nos aparecerán una serie de

opciones entre las que se encuentra importar el OnClickListener (android, view, View), la seleccio-

namos y nos generar más código, ver imagen 29.

Figura 29. Import “OnClickListener”

Ahora podemos indicar que imágenes son botones, estos se hace:

nombre_elemento.setOnClickListener(contexto donde se ejecutara);

Como las imágenes de deportes, alimentos, salud y cultura son botones las definimos a las cuatro como

botones (Figura 30).

40

Figura 30. Creación de los botones Deportes, Alimentos, Salud y Cultura.

Elegimos this como contexto porque se ejecutara en esta misma Activity.

Ahora cuando implementamos el OnClickListener nos genera código, el onClick(View v), dentro de

este tenemos que colocar que acción desarrollara cada botón, para esto nos auxiliaremos de un switch,

en el que cada caso corresponderá a presionar un botón diferente. La acción que se llevara a cabo al

presionar cada botón, será la de llamar a una nueva pantalla de la misma forma en que lo hicimos ante-

riormente (Figura 31).

41

}

Figura 31. Asignación de la acción que se desencadenara al presionar cada botón.

X. Probar la aplicación con la unidad virtual

Es recomendable probar constantemente nuestra aplicación para que en caso de que tengamos algún

error podamos corregirlo más fácilmente, porque si lo probamos después de desarrollar mucho código

será más difícil localizar el error.

Para probar una aplicación en la unidad virtual lo que hacemos es lo siguiente:

1. Ponemos el cursor del ratón en la flechita boca abajo a lado de la flechita play, ver figura 32.

Figura 32. Selección del botón play.

2. Lo presionamos y nos desplegara una lista, elegimos Run Configurations, ver figura 33.

42

Figura 33. Seleccionar Run Configurations.

3. Nos desplegara una lista, elegimos Android Aplication, ver figura 34.

Figura 34. Seleccionamos Android Aplication.

Le damos doble clikc y nos creara un archivo llamado New_configuration, lo seleccionamos y cam-

biara la pantalla, ahora podemos cambiarle el nombre (figura 35), elegimos el nombre de nuestra apli-

cación para identificarlo en posteriores ejecuciones.

43

Figura 35. Escribimos el nombre del tipo de ejecución de la aplicación.

En la pestaña Android presionamos el botón Browse y elegimos la aplicación que queremos ejecutar

(figura 36).

Figura 36. Buscamos la aplicación que queremos ejecutar.

En la pestaña Target elegiremos el dispositivo en el cual se ejecutara, ver figura 37.

Figura 37. Elección del dispositivo virtual en el cual se ejecutara la aplicación.

44

En la pestaña Common elegiremos que deseamos hacer, seleccionamos Debug y Run, ver figura 38.

Figura 38. Marcamos Debug y Run en la pestaña Common.

Final mente presionamos el botón Run, entonces comenzara a cargar nuestro emulador, una vez que

cargue completamente, si nuestra aplicación no tiene errores, la aplicación aparecerá en el emulador

automáticamente (Figura 39), en este podemos probar nuestra aplicación como si se tratase de un telé-

fono real.

Figura 39. Ejecución de nuestra aplicación en el dispositivo virtual de android.

En la figura 40 podemos observar una captura de esta misma pantalla pero tomada en un teléfono real.

45

Figura 40. Ejecución de la aplicación en un teléfono real.

A pesar de que las imágenes de cultura, deportes, salud y comida son botones, no funcionan porque

todavía no creamos a las Activitys que llamaran.

Recordemos los pasos para crear una nueva Activity:

En el archivo java que invoca la nueva Activity debemos definir una variable de tipo Intent la

cual contendrá el nombre del paquete.nombre_nueva_activity.

Damos de alta esta nueva Activity en el archivo AndroidManifest, con el nombre que le asig-

namos cuando definimos el Intent.

Creamos el archivo XML que contendrá todas las vistas de la Activity

Creamos el archivo java que contendrá la funcionalidad de la vista creada en el XML

La funcionalidad de las ventanas salud, cultura, alimentos y deportes es la misma por eso solo explica-

remos una.

Primero creamos el archivo XML con el nombre con el que definimos a esta nueva Activity pero escri-

to todo en minúsculas, este archivo ya tiene un LinearLayout al cual le ponemos el fondo de pantalla

principal, dentro de este colocamos el ImageView del título y después de este creamos un Horizon-

talScrollView, recordemos que para que funcione el ScrollView dentro debe tener un LinearLayout

con la misma orientación que el ScrollView. Dentro del ScrollView colocamos los ImageView corres-

pondientes, en el caso de la de deportes pondremos futbol, voleibol, squash, etc.

El código debe quedar de esta manera:

46







<ImageView





android:id="@+id/ivPortadaDeportes"


<HorizontalScrollView




<LinearLayout




android:orientation="horizontal">

<ImageView

android:layout_width="200dp"



android:src="@drawable/futbol"

android:id="@+id/ivSoccer"


……………

</LinearLayout>

</HorizontalScrollView>

</LinearLayout>

Ahora generamos el archivo java, recordemos que debe tener el mismo nombre que utilizamos en el

AndroidManifest y que el archivo XML, salvo que este debe comenzar con una letra mayúscula.

Al igual que en el anterior primero extendemos la actividad, le agregamos el OnCreate, lo ligamos al

archivo XML correspondiente con el setContentView, después definimos todos los elementos (en este

caso son solo ImageView), como vamos a utilizar imágenes como botones implementamos el OnClic-

kListener, definimos que imágenes serán botones y finalmente definimos que acción se desarrollara al

presionar un botón (que será llamar a una nueva actividad).

El código quedaría como el siguiente (solo variando las imágenes)



import android.content.Intent;


import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

47

public class Alimentos extends Activity implements OnClickListener{

ImageView cafeteria, kiosko, titulo;

@Override

protected void onCreate(Bundle savedInstanceState){

// TODO Auto-generated method stub


setContentView(R.layout.alimentos);

titulo = (ImageView) findViewById (R.id.ivTitulo);

cafeteria = (ImageView) findViewById (R.id.ivCafeteria);

kiosko = (ImageView) findViewById (R.id.ivKiosko);

cafeteria.setOnClickListener(this);

kiosko.setOnClickListener(this);

}

public void onClick(View v) {


switch(v.getId()){

case R.id.ivCafeteria:

Intent intent1 = new In-

tent("com.android.actividades.uam.CAFETERIA");

startActivity(intent1);

break;

case R.id.ivKiosko:

Intent intent2 = new In-

tent("com.android.actividades.uam.KIOSKO");

startActivity(intent2);

break;

}

}

}

Y así quedan definidas las Activitys de alimentos, culturales, salud y deportes, en la figura 41, 42 y 43

mostramos las vistas verticales de como se ven estas tres pantallas en un teléfono real.

48

Figura 41. Pantalla de Servicios Médicos Figura 42. Pantalla de Actividades Deportivas Figura 43. Pantalla de Servicios de Alimentos

Ahora mostraremos como generar la vista horizontal de estas pantallas.

XI. Vista horizontal

Es posible establecer cómo queremos nosotros que aparezcan los elementos cuando giramos la pantalla,

si omitimos este paso la aplicación se ajustara automáticamente al girar el teléfono, pero puede que los

elementos no se vean bien, es por eso que debemos establecer nosotros como queremos que se vea la

pantalla al ponerla en posición horizontal.

Lo primero que debemos hacer es, en la carpeta res/layout ponemos el cursor del mouse, presionamos

click derecho y elegimos la opción de New, dentro elegimos Folder (imagen 44). A este nuevo folder

le ponemos el nombre de layout-land, dentro de este copiaremos los XML que deseamos modificar

para la su vista horizontal (figura 45).

49

Figura 45. Creación de un nuevo folder en la carpeta Layout. Figura 46. En el folder que creamos copiamos los archivos XML.

La única modificación que les aremos es que el HorizontalScrollView lo cambiaremos por un Scroll-

View y la orientación del LinearLayout la cambiaremos a vertical. Esto lo hacemos porque cuando

giramos la pantalla las imágenes no se veían bien si estaban de forma horizontal, pero si las podemos

de forma vertical es posible moverlas de arriba abajo y así ya se verán bien. Entonces el código para

esta vista nos quedaría:







<ImageView





android:id="@+id/ivTitulo"


<ScrollView




<LinearLayout


50




<ImageView




android:src="@drawable/cafeteria"

android:id="@+id/ivCafeteria"

android:paddingLeft="10dp"/>

<ImageView




android:src="@drawable/kiosko"

android:id="@+id/ivKiosko"

android:paddingLeft="10dp"/>

</LinearLayout>

</ScrollView >

</LinearLayout>

A continuación mostraremos como se ven estas pantallas en un teléfono real (Figura 47).

Figura 47. Vistas horizontales de las ventanas Servicios Médicos, Actividades Culturales y Servicios de Alimentos.

Cada uno de estos Activitys llamara a otra Activity cuando se presione uno de sus botones, esta nueva

Activity tendrá la particularidad de que se conectara a internet para mostrar la información correspon-

diente alojada en un servidor.

XII. Permiso para conexión a internet

Los permisos en android se dan a través del AndroidManifest. Para darle a la aplicación el permiso

para conectarse a internet, lo que tenemos que hacer es lo siguiente:

1. Abrimos el AndroidManifest.

2. Seleccionamos la pestaña Permissions, nos abrirá una ventana.

3. Seleccionamos Uses Permission (Figura 48).

51

Figura 48. Ventana en la que elegimos Uses Permission.

4. Presionamos OK, nos mostrara una ventana llamada Atributes for Usses Permision (fi-

gura 49).

Figura 49. Ventana Atributes for Usses Permision.

5. En Name buscamos el permiso Internet (figura 50).

52

Figura 50. Permiso Internet en la ventana Atributes for Usses Permision

6. Seleccionamos el permiso Internet

7. Guardamos y ya tenemos el permiso del uso de internet (figura 51).

Figura 51. Línea de código que se genera al dar el permiso de conexión a Internet.

Ya que tenemos los permisos necesarios ahora creamos el archivo XML.

XIII. WebView

Este archivo XML solo contendrá dos elementos uno es un botón que servirá para actualizar y el otro es

un WebView.

El WebView es un view que sirve para ver elementos de internet.







<Button



android:text="Actualizar"

53

android:id="@+id/btActualizar"/>

<WebView



android:id="@+id/wvNavegador"/>

</LinearLayout>

El botón tiene además de las características de ancho y alto, tiene la característica de android:text, esta

solo muestra el texto que escribamos en el botón.

El WebView decimos que sea de ancho del resto de la pantalla (después del botón) y de alto del tama-

ño de la pantalla.

A ambos también le asignamos un id para poderles definir su funcionalidad en el archivo java.

En el archivo java tenemos el siguiente código:




import android.view.View;

import android.view.View.OnClickListener;

import android.webkit.WebView;

import android.widget.Button;

public class Cine extends Activity implements OnClickListener{

Button actualizar;

WebView navegador;

@Override

protected void onCreate(Bundle savedInstanceState) {



setContentView(R.layout.cine);

actualizar = (Button) findViewById (R.id.btActualizar);

navegador = (WebView) findViewById (R.id.wvNavegador);

navegador.loadUrl("http://manage.webamobile.com/sites/kt33xvlu/?page=15");

navegador.setWebViewClient(new ViewClient());

navegador.getSettings().setJavaScriptEnabled(true);

navegador.getSettings().setLoadWithOverviewMode(true);

navegador.getSettings().setUseWideViewPort(true)

54

actualizar.setOnClickListener(this);

}

public void onClick(View v) {


switch(v.getId()){

case R.id.btActualizar:

navegador.reload();

break;

}

}

}

Al igual que en los otros archivos primero extendemos la Activity, después le agregamos el método

OnCreate, luego lo enlazamos al XML correspondiente con el setContentView.

Definimos al botón y al WebView, le indicamos a la aplicación donde encontrarlos. Ahora le agrega-

mos algunas características para el WebView.

navegador.loadUrl("http://manage.webamobile.com/sites/kt33xvlu/?page=15"); Esta ins-

trucción le indica al WebView la dirección url a la que se debe conectar.

navegador.setWebViewClient(new ViewClient()); Esta instrucción inicializa al WebView.

navegador.getSettings().setJavaScriptEnabled(true); Esta instrucción autoriza al WebView

para abrir archivos en formato JavaScript.

navegador.getSettings().setLoadWithOverviewMode(true); Esta opción permite al Web-

View hacer zoom en los elementos visualisados.

navegador.getSettings().setUseWideViewPort(true); Esta opción hace que el contenido que

se abra en el WebView se ajuste al tamaño de la pantalla.

Ahora el botón Actualizar utiliza una instrucción ya definida para el WebView navegador.reload(); ,

con esta opción el WebView actualizara la información.

Todas las páginas de consulta tienen esta estructura.

Y de esta forma es como diseñamos nuestra aplicación.

55

5. Conclusiones

Android es un SO en toda la extensión de la palabra, las aplicaciones son programas muy complejos,

pero por las facilidades que brinda es posible aprender a desarrollarlas con facilidad, simplemente es

cuestión de practicar para poder desarrollar aplicaciones cada vez más funcionales y atractivas, ya que

en este SO es posible hacer una gran variedad de aplicaciones con muchísimas funciones diferentes,

además de que son muy practicas.

Hoy en día las estadística muestran que las aplicaciones móviles son muy solicitas gracias al éxito que

han tenido y a su fácil uso. Sin embargo la UAM-I no tiene ninguna y las páginas web cada vez son

menos utilizadas.

Por lo cual nos dimos a la tarea de crear una aplicación que sea creada específicamente para nuestra

UAM-I. Sin embargo podría adaptarse para cualquier otra escuela, la cual lleve una organización

parecida a la nuestra universidad.

Es recomendable que la UAM-I actualice la difusión de información por diferentes medios como son

los dispositivos móviles.

Esperamos con esta aplicación modernizar un poco a nuestra universidad y que su uso pueda ser

utilizado y ser visto por varios de nuestros compañeros.

56

6. Referencias: 1. Curso de programación en android, Autor Salvador Gómez Oliver, Fuente www.sgoliver.net

(01-08-2013)

2. http://androideity.com/2011/07/04/arquitectura-de-android/ (01-08-2013)

3. https://support.google.com/nexus/galaxy/answer/1649770?hl=es (01-08-2013)

4. http://qreative-marketing.co/desarrollo-de-sitios-web-moviles-vs-aplicaciones-moviles/ (01-08-

2013)

5. http://definicion.de/wifi/ (01-08-2013)

6. http://www.youtube.com/user/JoussAlonso/videos?sort=da&view=0 (01-08-2013)

7. http://es.wikipedia.org (01-08-2013)

http://www.sgoliver.net/

http://androideity.com/2011/07/04/arquitectura-de-android/

https://support.google.com/nexus/galaxy/answer/1649770?hl=es

http://qreative-marketing.co/desarrollo-de-sitios-web-moviles-vs-aplicaciones-moviles/

http://definicion.de/wifi/

http://www.youtube.com/user/JoussAlonso/videos?sort=da&view=0

http://es.wikipedia.org/

Resumen148.206.53.84/tesiuami/UAMI17120.pdf · 2014-01-15 · droid SDK Tools el cual contiene al...

Documents

Transcript of Resumen148.206.53.84/tesiuami/UAMI17120.pdf · 2014-01-15 · droid SDK Tools el cual contiene al...