taller: elaboraciÓn de una aplicaciÓn para dispositivos mÓviles

TALLER:TALLER:ELABORACIÓN DE UNA APLICACIÓN PARA ELABORACIÓN DE UNA APLICACIÓN PARA

DISPOSITIVOS MÓVILESDISPOSITIVOS MÓVILES

Proyecto:Proyecto:"EL EJERCICIO FÍSICO EN ESPACIOS PÚBLICOS DE "EL EJERCICIO FÍSICO EN ESPACIOS PÚBLICOS DE

BADAJOZ"BADAJOZ"

Red de Escuelas de I+D+i

Prof. Isaac Buzo SánchezIES San Roque (Badajoz)

Vamos a la web www.mobincube.com

Prof. Isaac Buzo SánchezIES San Roque

Abrimos una cuenta


Completamos datos y creamos cuenta

También podemos acceder a través de

una cuenta de Google, Facebook o

Twitter.


Pantalla inicial cuando no tenemos ninguna App creada.

Creamos nuestra primera App


Se abre una ventana en la que nos pide un nombre para la App y la forma de hacerla: 1) Siguiendo modelos establecidos o 2) Desde cero,

teniendo la posibilidad de un diseño completo.


Si tomamos el camino de realizar la aplicación mediante un modelo, seleccionamos el modelo que más se acerque a nuestras

necesidades y completamos los datos que nos vayan pidiendo.


Pero nosotros vamos a tomar el camino del diseño completo de la aplicación.


Pulsamos Modify data para completar los datos de nuestra aplicación


1. Completamos datos en descripción, categoría e idioma

2. Elaboramos un icono y lo insertamos en su

lugar3. Guardamos

4. Pasamos a la edición.


Añadir más páginas

Diferentes tipos de pantallas

Pantallas específicas para cada uno de estos servicios

Funciones de edición


Para nuestro proyecto seleccionamos el tipo de pantalla "Detalle"


Desde aquí debemos configurar la pantalla inicial de nuestra App.

Arrastramos al dispositivo de la imagen y editamos los

diferentes elementos que nos permiten ordenar la pantalla

inicial. Podemos añadir textos, tablas, imágenes, separadores

lineales, etc.


Separador sin línea


Tabla de dos celdas con una imagen cada una: serán botones que irán enlazados con nuestros mapas

Tabla de dos celdas vacías


Texto con la frase editada

Tabla de una celda con con texto + imagen que será botón e irá enlazado con youtbue.



Añadimos una imagen de cabecera:

1º

2º

3ºResultado


Añadimos una barra de menú:

1º

2º

3º

Pulsar y arrastrar al sitio donde queramos que aparezca.

4º

Editar la barra para que aparezcan varios botones y los logos del IES y del la Red.

Resultado


Con la pantalla inicial terminada añadimos más pantallas y las editamos:

1º

2º

Pan

talla

s de

nu

estr

a A

pp


Para cada una de las rutas elegimos una pantalla tipo web


Copiar en este espacio la URL de la web que queramos que se abra en nuestro marco (con la imagen de cabecera y la barra de menú). En nuestro caso copiaremos la URL del mapa rojo. Repetiremos la operación con el azul en su respectiva pantalla.


Volvemos a la pantalla de inicio y enlazamos cada botón con la pantalla correspondiente.


Cuando tengamos todas las pantallas listas y enlazadas entre sí pasamos a previsualización, allí nos ofrecerán un enlace y un código QR para que instalemos una aplicación provisional en nuestro dispositivo móvil y comprobemos el funcionamiento.


Finalmente, para que sea accesible públicamente debemos publicar la aplicación en alguno de los mercados de aplicaciones disponibles.

2º

1º


Una vez publicada podremos hacer modificaciones y publicar una nueva versión.

URL de descarga de la AppCódigo QR para escanear con el móvil y descargar la App


RESULTADO:

Pantalla inicial Pantalla Ruta Roja


taller: elaboraciÓn de una aplicaciÓn para dispositivos mÓviles

Education