Resumen. En este proyecto terminal se tiene por objetivo:

Transcripción

1

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. 2

3 Índice 1. Introducción a Android 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 Arquitectura Android Programación de Interfaces de Comunicación Wi-Fi Servidores web para dispositivos móviles Por qué tener una web para dispositivos móviles? Ventajas de la web móvil VS web tradicional Web para dispositivos móviles gratis Nuestra experiencia con webamobile.com Por qué elegimos este servidor? Aplicación móvil (Android): Actividades culturales y deportivas UAM-I Arquitectura de la aplicación.15 I. Modulo Cultura.15 II. Modulo Salud 15 III. Modulo Comida.16 IV. Modulo Deportes 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 Conclusiones Referencias

4 1. Introducción a Android Android es un sistema operativo basado en Linux el cual está diseñado pensando en dispositivos móviles (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 Pasos para instalar Android En esta sección se detallaran los pasos necesarios para instalar todo lo necesario para programar aplicaciones 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 debemos 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 java 1, la versión que descargaremos es la Java 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 dejando todas las opciones tal y como están, lo único que debemos recordar es el nombre de la carpeta 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 ( ) 2 ( ) 3 ( ) 4

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 derecho del mouse, seleccionamos la opción propiedades, nos abrirá una ventana con muchas pestañ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, presionamos 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 pagina 4. 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 Android 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 Tools, la carpeta Extras y por lo menos una versión de android, recomendamos instalar la versió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 relacionado a la versión de android que tendrá para identificarlo fácilmente, por ejemplo android2.1. En Target seleccionamos la versión de android que tendrá nuestra unidad virtual, solo 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 ( ) 5

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ágina 5. De todas las versiones disponibles descargar la versión Eclipse IDE for Java EE Developers (de igual manera debemos escoger la versión para nuestro sistema operativo ya sea de 32 o de 64 bits). Una vez descargado, su instalació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 recomendable que se descargue directamente en la unidad C). En la ubicación que le indiquemos se descomprimirá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 nombre por ejemplo Android, el otro edit text se llama Location, en este debemos copiar la dirección web de donde se descargara este nuevo software 6, en este edit text pegamos la dirección del plugin de android, ahí buscamos el enlace para vincularlo con Eclipse 7, después presionamos 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 presionamos 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 necesarias 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 ( ) 6 ( ) 7 ( ) 6

7 falló en la instalación, pero siguiendo estos pasos es muy seguro que la instalación se concluya satisfactoriamente Arquitectura Android El sistema operativo Android 8 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 ( ) 9 ( ) 7

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. 8

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 9

10 Wi-Fi 10 es una marca comercial de Wi-Fi Alliance (una organización que adopta y certifica los equipos que cumplen con los estándares 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-Fi 11 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 ( ) 11 ( ) 10

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. 11

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. 12

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. 13

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 14

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). 15

16 Figura 7. Desarrollo del modulo de deporte

17 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 continuació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: 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 caracterí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 proyecto 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áticamente 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. 18

19 El Package Name es el nombre del paquete principal de nuestra aplicación, en el se alojaran los archivos.java principales. La forma en que se llena este campo es la siguiente: com.android.nombre.aplicasion, este nombre debe ser único para cada aplicación. Para nuestra aplicació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 predeterminado. 19

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 imagen 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. 20

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 importantes 12 : 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) principal de la aplicación, siempre bajo la estructura del paquete java definido (figura 14). 12 Una descripción más detallada se encuentra en ( ) 21

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 dependiendo de la resolución del dispositivo (figura 15). /res/layout/. Contienen los archivos de definición de las diferentes pantallas de la interfaz gráfica(figura 15). Se puede dividir en /layout y /layout-land para definir distintos layouts dependiendo 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). 22

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 Android 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. 23

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 aplicació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 pantalla 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 aparecerán en esta ventana, además de poder asignar un fondo de pantalla, un texto, etc, es decir todo lo visible 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 manda 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 almacenar 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 aparecerá una ventana donde nos pregunta que si deseamos copiarla o solo ligarla, nosotros elegimos copiarla. Ya que tenemos la imagen en la carpeta res/drawable-mdpi proseguimos a editar el archivo main.xml. 24

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. Nosotros 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áticamente 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=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> 25

26 </LinearLayout> Vamos a explicar línea por línea para comprender que significa cada elemento 13 : <?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= Aquí mostramos 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 contenedor, 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 queremos 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 ( ) 26

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 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: package com.android.actividades.uam; import android.app.activity; import android.content.intent; import android.os.bundle; public class ActividadesUAM extends public void oncreate(bundle savedinstancestate) { super.oncreate(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 Intent("com.android.actividades.uam.MENU"); startactivity(menu); }catch(interruptedexception e){ e.printstacktrace(); }finally{ 27

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 mostrara 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 incrementara 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. 28

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 pantalla 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 nuevo 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 Activity, 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 Activity. 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 nombre. 29

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 encuentre 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 cuando 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> 30

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 pantalla, 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 aparecerá 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. 31

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 pantalla (fill parent), que la orientación sea vertical (cada elemento se coloca debajo del anterior) y le asignamos un fondo de pantalla (recordemos que primero hay que importar la imagen que utilizaremos a la carpeta drawable). Quedándonos de la siguiente manera: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@drawable/fondo"> Ahora colocaremos un ImageView una imagen que utilizaremos como título. Para poder ver una imagen tenemos que utilizar el elemento ImageView, el ImageView es un elemento que sirve para visualizar 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_width="fill_parent" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:src="@drawable/actividades" android:id="@+id/ivtitulo" android:paddingbottom="10dp"/> 32

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 funcionalidad en el archivo.java. Se recomienda que se utilicen siglas del tipo de elemento y un nombre descriptivo, 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 HorizontaScrollView 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:layout_width="fill_parent" android:layout_height="wrap_content" 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, vamos 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 drawable). El código para esta sección de la actividad quedaría de la siguiente manera: <ScrollView android:layout_width="fill_parent" 33

34 android:layout_height="wrap_content" android:scrollbars="none"> <LinearLayout android:paddingtop="20dp" android:weightsum="8" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:paddingtop="10dp" android:layout_width="fill_parent" android:layout_height="80dp" <ImageView android:paddingtop="10dp" android:layout_width="fill_parent" android:layout_height="80dp" </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 posicionamos 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

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 ubicación de la carpeta res. También contiene un Package el cual debe contener el nombre de nuestro paquete. En la opción Name debemos escribir el nombre de nuestro archivo java, es recomendable escribir 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 archivos java deben comenzar con una mayúscula). Las demás opciones las dejamos tal y como están, después presionamos Finish, ver figura

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á: package com.android.actividades.uam; 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 indica 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. 36

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 Override/Implements. Figura 25. Como generar el método OnCreate. Nos desplegara una lista con todos los métodos que podemos implementar, buscamos el oncreate(bundle), seleccionamos su casilla y presionamos OK (Figura 26 y 27). 37

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 debemos definir los ImageView, no hay que definir el ScrollView ni el LinearLayout porque son solo contenedores y no se les puede asignar alguna funció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: 38

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 seleccionamos 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). 39

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 anteriormente (Figura 31). 40

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

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 cambiara la pantalla, ahora podemos cambiarle el nombre (figura 35), elegimos el nombre de nuestra aplicación para identificarlo en posteriores ejecuciones. 42

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. 43

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. 44

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 asignamos 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 explicaremos una. Primero creamos el archivo XML con el nombre con el que definimos a esta nueva Activity pero escrito 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 HorizontalScrollView, 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 correspondientes, en el caso de la de deportes pondremos futbol, voleibol, squash, etc. El código debe quedar de esta manera: 45

46 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" <ImageView android:layout_width="fill_parent" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:paddingbottom="10dp"/> <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="none"> <LinearLayout android:paddingtop="20dp" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <ImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:paddingbottom="10dp"/> </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 OnClickListener, 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) package com.android.actividades.uam; import android.app.activity; import android.content.intent; import android.os.bundle; import android.view.view; import android.view.view.onclicklistener; import android.widget.imageview; 46

47 public class Alimentos extends Activity implements OnClickListener{ ImageView cafeteria, kiosko, protected void oncreate(bundle savedinstancestate){ // TODO Auto-generated method stub super.oncreate(savedinstancestate); 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) { // TODO Auto-generated method stub switch(v.getid()){ case R.id.ivCafeteria: Intent intent1 = new Intent("com.android.actividades.uam.CAFETERIA"); startactivity(intent1); break; case R.id.ivKiosko: Intent intent2 = new Intent("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. 47

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). 48

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: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@drawable/fondo"> <ImageView android:layout_width="fill_parent" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:src="@drawable/actividades" android:id="@+id/ivtitulo" android:paddingbottom="10dp"/> <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="none"> <LinearLayout android:paddingtop="20dp" 49

50 android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <ImageView android:layout_gravity="center_horizontal" android:layout_width="350dp" android:layout_height="200dp" android:paddingleft="10dp"/> <ImageView android:layout_gravity="center_horizontal" android:layout_width="350dp" android:layout_height="200dp" 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 correspondiente 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). 50

51 Figura 48. Ventana en la que elegimos Uses Permission. 4. Presionamos OK, nos mostrara una ventana llamada Atributes for Usses Permision (figura 49). Figura 49. Ventana Atributes for Usses Permision. 5. En Name buscamos el permiso Internet (figura 50). 51

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. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@drawable/fondo"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="actualizar" 52