Centro de Bachillerato Tecnolgico Industrial y de Servicios No#11

Portafolio de evidencias
Especialidad: Programacin
Alumno: Ivn Martnez Ruiz
Profesor: Julin Flores
30 de Abril del 2015 Hermosillo, Sonora

Introduccin
Este trabajo se ha realizado con el objetivo de demostrar todo lo que hemos
aprendido de una forma de programacin muy dinmica y fcil tanto con el
programador como con el usuario, ya que esta te permite crear aplicaciones de
forma ms fcil que con otros tipos de programacin. Este nuevo tipo de
programacin est estructurada por bloques, y se puede usar por medio de la
pgina de Mit App Inventor la cual es gratuita para todos los usuarios.
Este mtodo es mucho ms sencillo de programar que los dems, ya que no
ocupamos aprendernos cdigos ni nada de eso, solo tenemos que saber cmo
acomodar los bloques y leerlos para poder programar y hacer una aplicacin para
Android muy fcilmente.

ndice
1.-Desarrollo de ambiente de desarrollo mvil
2.-Desarrollo de practica Guiada conociendo APP Inventor y Navegando en el
entorno
3.-Resumen de sesin de videos
-Todos deberan aprender a programar
-El sueo del Programador de cdigo - Prodigioso a los 14 aos
-Insercin laboral del programador
4.-Desarrollo de prctica elaborada en equipo en donde se realiz
calculadora en un juego de roles en donde est presente: Programador,
Analista, Diseador
5.-Desarrollo de la prctica si condicional con la prctica donde se determina
si una persona es mayor de edad
6.-Desarrollo de practica de modelaje en donde el alumno determina cul de
los dos nmeros es mayor elaborando un algoritmo y utilizando la
herramienta APP inventor
7.-Desarrollo de un programa es que muestre en una caja de texto, una lista
de animales, esta debe contener cuando menos 6 tipos de animales
utilizando un ciclo FOR
8.-Desarrollo de prcticas la cual deber contener, pantalla principal,
presentacin de cdigo utilizado en APP inventor, pantalla generada con el
emulador
9.-Text Grouping
10.- Investigacin de Conceptos
11.- Desarrollo cuestionario CQA
12.- Desarrollo Prctica sin mensajes mientras manejo (Trabajo en equipo)

13.- Desarrollo de Practica Text To Speach (Trabajo en equipo)

14.- Seleccin del Proyecto para Presentacin Exposicin
15.- Desarrollo de practica Mole Mash 2
16.- Desarrollo de practica: Donde est mi carro?
17.- Desarrollo proyecto final (Trabajo en equipo)
18.- Elaboracin de conclusin de forma global

1.-Desarrollo de ambiente de desarrollo mvil

1. Qu es una plataforma abierta?

Concepto que designa un computador y una red que permiten a todos los usuarios
de Internet la posibilidad de acceder, crear y publicar informacin, as como
acceder a la informacin de otros.
2. Qu es una aplicacin mvil?
Una aplicacin mvil o app es una aplicacin informtica diseada para ser
ejecutada en telfonos inteligentes, tabletas y otros dispositivos mviles. Por lo
general se encuentran disponibles a travs de plataformas de distribucin,
operadas por las compaas propietarias de los sistemas operativos mviles como
Android, iOS, BlackBerry OS, Windows Phone, entre otros.
3. Cules son algunos de los dispositivos mviles ms usados?
IPhone, Samsung Galaxy, LG, Motorola etc.
4. Cules son los sistemas operativos para dispositivos mviles ms conocidos?
Android, IOS, Windows Phone y Blackberry.
5. Cules son los componentes ms usados en una interfaz de usuario para una
aplicacin mvil?
Fotos, barra de tareas, notas, teclas de navegacin.
6. Qu es un Widgets en una aplicacin mvil?
Los Widgets son pequeas aplicaciones presentados en archivos pequeos que
son ejecutados en el escritorio del ordenador, en una pgina web o en telfono
mvil. Su objetivo es dar acceso a funcionalidades y proveer informacin visual
actualizada.
Los Widgets pueden ser de 4 tipos: Los widgets de escritorio, los widgets para la
web, los widgets para los mviles y los widgets fsicos.

2.-Desarrollo de practica Guiada conociendo APP Inventor y Navegando en el

entorno

Paso 1: Ingresamos a la pgina principal: http://appinventor.mit.edu/explore/

Paso 2: Creamos una cuenta de usuario con gmail

Paso 3: Buscamos las configuraciones iniciales

Paso 4: Seleccionamos la opcin que se ajusta a nuestras posibilidades, en esta

seccin se mencionaran las posibilidades de conectividad

3.-Resumen de sesin de videos

-Todos deberan aprender a programar

En el primer video se da a explicar lo que es la programacin y para que nos sirve,
la programacin no es tan difcil comparece. Nada ms tenemos que saber leer y
escribir y eso es todo. En el video aparecen algunos programadores famosos
como Bill Gates, Mark Zuckerberg, el creador de Dropbox, entre otros. Ellos
hablan de lo que es la programacin que es una carrera que se disfruta y se
aprende todos los das y que es una carrera que a futuro tiene mucha oportunidad
para las prximas generaciones. Es algo que se puede disfrutar mucho y tomarle
mucho cario.
-El sueo del Programador de cdigo - Prodigioso a los 14 aos
En el otro video habla sobre un joven de 14 aos de edad que se llama Santiago,
que es un joven que a su corta edad le gusta mucho la especialidad de
programacin, va a clases avanzadas sobre ciencias de la computacin y el
programa en su propia casa. Su pasin es la programacin y su sueo es poder
estudiar en Stanford programacin y trabajar en la empresa Apple.
-Insercin laboral del programador
La programacin informtica, acortada como programacin, es el proceso de
disear, codificar, depurar y mantener el cdigo fuente de programas
computacionales. El cdigo fuente es escrito en un lenguaje de programacin. El
propsito de la programacin es crear programas que exhiban un comportamiento
deseado. El proceso de escribir cdigo requiere frecuentemente conocimientos en
varias reas distintas, adems del dominio del lenguaje a utilizar, algoritmos
especializados y lgica formal. Programar no involucra necesariamente otras
tareas tales como el anlisis y diseo de la aplicacin (pero s el diseo del
cdigo), aunque s suelen estar fusionadas en el desarrollo de pequeas
aplicaciones.

4.-Desarrollo de prctica elaborada en equipo en donde se realiz

calculadora en un juego de roles en donde est presente: Programador,
Analista, Diseador
Cliente
El cliente nos pidi una aplicacin para su celular, lo cual consta de hacer una
calculadora en donde introduzcas 2 valores, le puedas da la opcin de sumar,
restar, multiplicar, dividir y sacar la raz. Tambin quiere que la calculadora tenga
un botn para poder salir de la aplicacin. Por ltimo la aplicacin ser de color
gris para que las letras sean de color blanco, con un Gif de gato sacando la
lengua.
Analista
Para poder crear esa aplicacin utilizaremos la pgina MIT app inventor en
donde trabajaremos por medio de bloque, el programador es el encargado de
hacer las funciones: En la suma, se introducir el primer valor y despus el
segundo valor y cuando se haga clic en el botn SUMA te deber sumar los dos
nmeros y mostrarte el resultado. Es el mismo caso para la resta, la divisin y la
multiplicacin, solo que cambiara la operacin que se realizara, pero ene l caso de
la raz se tomara el primer nmero para poder sacar su raz. Por ltimo tendr que
tener un botn de salir para cuando se seleccione, se cerrara la aplicacin.
Bsicamente de lo que se encarga el programador es la parte de Blocks en el
desarrollo de la aplicacin. Con todo esto desarrollado, tendremos lo que el cliente
solicito y podremos entregarle su aplicacin.
Diseador
El diseador es el que se encarga de poner el tipo de letra as como su color,
tambin pondr el fondo de color gris con el Gif de un gato sacando la lengua.
Tambin escoger las medidas y el lugar en donde irn los botones al igual que su
color. En los cuadros de texto, los pondr en donde debe de ir para que todo este
ordenado para que sea ms fcil de usar.

1.- Haremos el diseo de la calculadora en la pgina MIT App Inventor, para hacer
la calculadora seguiremos los siguientes pasos:
- Introduciremos 3 textos los cuales indicaran: El primer y segundo nmero y el
resultado.
-Introduciremos 3 Cuadros de textos en el cual en el primero ira el primero
nmero, en el segundo el segundo nmero y en el tercer ira el resultado.
-Introduciremos 6 botones los cuales sern para las operaciones las cuales son:
suma, resta, multiplicacin, divisin, raz cuadrada y un botn de salida.

2.-Ya hecho el diseo de la aplicacin nos iremos a los bloques en el cual

haremos las funciones que tendr la aplicacin
Ponemos la opcin When-click- do , que significa que cuando hagamos click en el
botn haga una funcin la cual ser imprimir en el cuadro de resultado , y
pondremos la opcin de operacin matemtica de suma, resta , multiplicacin ,
divisin y raz cuadrada respectivamente en cada uno de los ciclos.
Para cerrar la aplicacin ponemos la opcin que cuando hagas click en el botn de
salir haga la funcin Close Applicaction que eso har que nuestra calculadora se
cierre.

5.-Desarrollo de la prctica si condicional con la prctica donde se determina

si una persona es mayor de edad
Diseo

El diseo de la aplicacin es sencillo, solo tendremos que introducir una caja de

texto donde nosotros introduciremos la edad, un botn que tendr la funcin que
cuando lo oprimamos nos imprima en otra caja de texto que si la edad que
introducimos es mayor a 18 o menor a 18, nos dir que si es mayor de edad o
menor de edad.
Si es mayor de edad nos imprimir en la caja de texto que es mayor de edad y
cambiara el color a verde, y si no es mayor de edad nos imprimir que es menor
de edad y la caja de texto cambiara a color rojo.

Bloques

Solo utilizaremos un bloque con la funcin When-click-do que har que cuando le
demos click al botn Procesar, nos de 3 ciclos if y en el primero nos comparara el
nmero que introducimos que si es mayor a 18, si el nmero que introducimos si
es mayor a 18 nos imprimir Es mayor de edad y cambiara el color de la caja de
texto a color verde.
Si el nmero que introdujimos es menor a 18 nos imprimir en la caja de texto Es
menor de edad y cambiara el color a rojo.
Y si el nmero es igual a 18 nos imprimir Es mayor de edad y cambiara el color
a verde.

6.-Desarrollo de practica de modelaje en donde el alumno determina cul de

los dos nmeros es mayor elaborando un algoritmo y utilizando la
herramienta APP inventor
Diseo

El diseo de la pgina tendremos que introducir 3 cajas de textos, las primeras

dos son en donde introduciremos el numero A y el numero B, los cuales son los
nmeros que vamos a comparar que si cual es mayor y cual es menor.
Introduciremos un botn que es el que har la funcin de comparar los dos
nmeros que introducimos y que no los imprima en otra caja de texto de los
nmeros comparados.
Bloques

Esta aplicacin tendr un ciclo when, que cuando le demos click al botn
comparar tenga 3 condiciones.
Si el numero A es mayor a B, nos imprimir en la caja de texto El numero A es
mayor al nmero B.
Si el numero B es mayor al nmero A, nos imprimir en la caja de texto El numero
B es mayor a el numero B.
Si el numero A es igual al nmero B, nos imprimir en la caja de texto Los dos
nmeros son iguales.

7.-Desarrollo de un programa es que muestre en una caja de texto, una lista

de animales, esta debe contener cuando menos 6 tipos de animales
utilizando un ciclo FOR

Diseo
Este sera el diseo de la pgina, solo utilizaremos un botn que procese y una
caja de texto

Bloques
Utilizaremos una variable donde introduciremos 6 nombres , que en este caso son
nombres de animales marinos y la funcion sera que cuando le demos click al
boton procesar imprima esa lista de nombres.

8.-Desarrollo de prcticas la cual deber contener, pantalla principal,

presentacin de cdigo utilizado en APP inventor, pantalla generada con el
emulador:
1. Calculadora con variables
Diseo de la pgina

Primero haremos el diseo de nuestra calculadora, lo que ocuparemos ser dos

casillas de texto en donde introduciremos el nmero A y el numero B, despus
introduciremos 5 botones que cada uno de ellos le pondremos su propia funcin.
El botn (+) sumar los dos nmeros, el botn (-) restar los dos nmeros, el
botn (*) multiplicara los dos nmeros, el botn (/) dividir los dos nmeros y el
botn () sacar la raz cuadrada del primer nmero.
El resultado no los imprimir en una caja de texto, el diseo de la pgina la
hacemos a nuestro gusto.

Bloques

Utilizaremos variables, indicaremos globalmente que el valor A , el valor B y el

valor del resultado sean 0. Haremos 5 funciones con el ciclo When click do
El primero ser que cuando demos click en el botn de sumar, introduzcamos los
dos nmeros con los que realizaremos la operacin y pondremos una herramienta
de math que ser la suma del valor global de A y el valor global de B y lo
imprimiremos el resultado en la caja de texto resultado.
En los dems casos usaremos el mismo procedimiento, lo nico que cambiara
seria el signo de la operacin math , que cambiara a resta , multiplicacin y
divisin. Para poder sacar la raz cuadrada solo introduciremos el valor A y con
ese valor A usaremos la funcin matemtica square root para sacar la raz
cuadrada.

2. Imprime edad con si condicional

Diseo

El diseo de la aplicacin es sencillo, solo tendremos que introducir una caja de

texto donde nosotros introduciremos la edad, un botn que tendr la funcin que
cuando lo oprimamos nos imprima en otra caja de texto que si la edad que
introducimos es mayor a 18 o menor a 18, nos dir que si es mayor de edad o
menor de edad.
Si es mayor de edad nos imprimir en la caja de texto que es mayor de edad y
cambiara el color a verde, y si no es mayor de edad nos imprimir que es menor
de edad y la caja de texto cambiara a color rojo.

Bloques

Solo utilizaremos un bloque con la funcin When-click-do que har que cuando le
demos click al botn Procesar, nos de 3 ciclos if y en el primero nos comparara el
nmero que introducimos que si es mayor a 18 , si el nmero que introducimos si
es mayor a 18 nos imprimir Es mayor de edad y cambiara el color de la caja de
texto a color verde.
Si el nmero que introdujimos es menor a 18 nos imprimir en la caja de texto Es
menor de edad y cambiara el color a rojo.
Y si el nmero es igual a 18 nos imprimir Es mayor de edad y cambiara el color
a verde.

3. Imprime edad con si condicional con Variables

Diseo

El diseo de la aplicacin es sencillo, solo tendremos que introducir una caja de

texto donde nosotros introduciremos la edad, un botn que tendr la funcin que
cuando lo oprimamos nos imprima en otra caja de texto que si la edad que
introducimos es mayor a 18 o menor a 18, nos dir que si es mayor de edad o
menor de edad.
Si es mayor de edad nos imprimir en la caja de texto que es mayor de edad y
cambiara el color a verde, y si no es mayor de edad nos imprimir que es menor
de edad y la caja de texto cambiara a color rojo.

Bloques

Introduciremos la variable edad que nos indique que su valor es igual a 18.
Cuando le demos click al botn de procesar tendr dos condiciones, si el nmero
que introducimos en la caja de texto es mayor a la variable Edad que es 18, nos
imprimir La persona es mayor de edad y el color de la caja de texto cambiara a
verde.
Si el nmero que introdujimos es menor a la variable edad que es 18, nos
imprimir La persona es menor de edad y el color de la caja de texto cambiara a
color rojo.

4. Determinacin de un nmero mayor / con Variables

Diseo

El diseo de la pgina tendr dos cajas de textos en donde en la primera

introducirs el primero nmero (A) ,y en la segunda introduciremos el nmero (B).
La aplicacin tendr un botn que tenga la funcin que cuando le demos click
compare cual nmero es mayor y cual es menor y que el resultado no los imprima
en la caja de texto Resultado.

Bloques

Introduciremos dos variables, una ser el valor A que le daremos el valor de 0, la

otra variable ser el valor B que tendr el valor de 0.
Despus ponemos la funcin when , que cuando le demos click al botn de
comparar nos de tres condiciones diferentes las cuales son:
Si el valor A es mayor al valor B , nos imprimir en la caja de texto que El nmero
A es mayor al nmero B.
Si el valor A es menor al valor B, nos imprimir en la caja de texto que El nmero
A es menor al nmero B.
Si el valor A es igual al valor B, nos imprimir en la caja de texto que Los dos
nmeros son iguales.

5. Operaciones con listas

Diseo

El diseo de la pgina solo tendr un botn con la funcin que cuando lo

aplastemos nos imprima aleatoriamente en una caja de texto el nombre de
animales, en mi caso yo puse nombre de razas de perros.
Bloques

Utilizaremos una variable la cual llamaremos animales, y en esa variable

crearemos una lista en donde introduciremos el nombre de los animales, en mi
caso yo pondr nombre de perros.

Le pondremos funcin al botn de procesar para que cuando le demos click nos
imprima en la caja de texto, y elija aleatoriamente alguno de los nombres de la
lista de animales.
Al hacer click nos imprimir aleatoriamente cualquier nombre de la lista.

6. Operaciones matemticas determinacin de un numero factorial

Diseo

El diseo de la pgina tendr una caja de texto en donde nosotros introduciremos

el nmero a el cual queremos calcular su factorial.
Tendr un botn llamado factorial que es al que le pondremos la funcin de que
calcule el factorial y que lo imprima en la caja de texto del resultado.

Bloques

Introducir las variables Factorial y Resultado y darles valor de 0

Cuando el botn Factorizar sea presionado
Cambiar los valores de la variable Factorial a 1 y de la variable Resultado a 1
Mientras la variable Factorial sea <= a Nmero ingresado
La variable Resultado es = a Factorial * Resultado
La variable Factorial es = a Factorial + 1
Se imprimir el Resultado

7. Desarrollo de listas con textbox Multiline

Diseo
Este sera el diseo de la pgina, solo utilizaremos un botn que procese y una
caja de texto

Bloques
Utilizaremos una variable donde introduciremos 6 nombres , que en este caso son
nombres de animales marinos y la funcion sera que cuando le demos click al
boton procesar imprima esa lista de nombres.

8. Remplazar un ITEM de una lista

Diseo
Este sera el diseo de la aplicacin, solo utilizaremos 2 botones con diferentes
funciones y una caja de texto.

Bloques
Declararemos la variable felinos e introduciremos los nombres y le daremos
funcin a la aplicacin para que cuando le demos click al botn procesar, imprima
la lista, y cuando le demos click al botn remplazar le indicaremos que remplac el
primer nombre.

9. Verificar ITEM de lista

Diseo de la aplicacin

Tendr un diseo en el cual solo introduciremos un botn y una caja de texto en

donde nos verifique que si esta un tem de la lista.
Bloques de la Aplicacin

Tendr una variable llamada felinos en donde introduciremos una lista de 6

nombres de animales felinos.
Le pondremos funcin al botn de procesa que cuando le demos click busque
determinado tem en la lista de la variable felinos.
Aplicacin en emulador

La aplicacin tendr la funcin que cuando nosotros aplastemos el botn nos

procesa, nos verifique que el tem est en la lista , si es cierto nos imprimir en la
caja de texto true.

10. Retorna en qu posicin se encuentra un determinado tem en la lista

Diseo de la aplicacin

Esta aplicacin solo utilizara un botn que procese la funcin y una caja de texto
donde saldr el resultado.

Bloques de la aplicacin

Utilizaremos una variable a la que llamaremos Felinos e introduciremos en ella

una lista de 6 nombres de animales felinos, cuando toquemos el botn procesa
dir si la lista est vaca o no , imprimiendo false.

Aplicacin en el emulador

11. Inserta un tem en determinada posicin de la lista

Diseo de la aplicacin

Esta aplicacin utilizara 2 botones y 2 cajas de texto. Los botones que procese
cual tem ser insertado y el botn Muestra lista para que muestre la lista con el
tem insertado
Bloques de la aplicacin

Iniciaremos una variable llamada felinos e introduciremos 3 nombres de felinos,

indicaremos que tome un tem de la lista de felinos y con el otro botn haremos
que nos muestre la lista con el tem insertado.

Aplicacin en el emulador

Cuando aplastemos el botn procesa nos saldr un nombre de la lista , y ese

nombre es el que se aadir a la lista de la caja de texto de abajo cuando la
mostremos con el botn MuestraLista.

12. Quita un elemento de la lista

Diseo de la aplicacin

Esta aplicacin tendr 2 botones y 2 cajas de texto. Un botn indicara en la

primera caja de texto cual es el tem de la lista que se eliminara y el otro botn
nos mostrara la lista con el tem eliminado.
Bloques de la aplicacin

Iniciaremos una variable felinos con 3 nombres, indicaremos la funcin del botn
remover que elimine de la variable global felinos un tem indicando el 2 que ser el
tem que se eliminara de la lista. El botn muestra nos mostrara la lista con el tem
ya eliminado.

Aplicacin en emulador

Cuando damos click en el botn de remover elemento, el tem que aparezca es el

que se eliminara de la lista cuando aplastemos el botn de muestra el elemento ya
no aparecer en la lista.

13. Copia una lista en otra

Diseo de la aplicacin

Esta aplicacin tendr 3 botones, uno que procesara la funcin que copie la lista
en otra, uno que muestre la lista original y el otro la lista copiada. Y nos imprimir
la lista en una misma caja de texto.

Bloques de la aplicacin

Haremos 2 variables una llamada felinos en la cual introduciremos 3 nombres de

felinos y otra que se llamara copia que tendr una lista vaca. Cuando toquemos el
botn procesa copiara a la lista de copia lo que este en la lista de felinos.
Y cuando le demos click en el botn Muestra nos mostrara la lista original y en el
botn copia aparecer la lista copiada.

Aplicacin en emulador

Lo que hace esta aplicacin es que cuando aplastemos el botn muestra nos
muestre la lista felinos, y cuando toquemos el botn copia no saldr nada, pero
cuando aplastamos el botn procesa hace que la lista felinos se copie a la lista
copia y aparezca.

14. Adiciona una lista a otra lista

Diseo de la aplicacin

Esta aplicacin tendr 3 botones y 3 cajas de texto, los botones lista 1 y lista 2 que
se mostraran en la caja de texto de la lista 1 y la caja de texto de la lista 2. Y el
botn adiciona que tendr la funcin de copiar la lista 2 a la lista 1.
Bloques de la aplicacin

Haremos dos variables, una llamada felinos y otra marinos e introduciremos una
lista con 6 nombres cada una. El botn adiciona agregara a la lista 1 todo lo que
contenga de la lista 2, y cuando toquemos el botn de lista nos mostrara la lista
que introducimos en las variables.

Aplicacin en emulador

Cuando aplastemos el botn lista1 nos aparecer la lista de felinos, cuando

aplastemos el botn lista2 nos aparecer la lista de marinos, cuando aplastemos
el botn adiciona agregara a la lista felinos los elementos de la lista marinos.

15. Base de datos

Diseo de la aplicacin

Utilizaremos una caja de texto en donde introduciremos un cdigo, una caja de

texto donde pongamos la descripcin del cdigo introducido, un botn de guardar
para guardar el cdigo en la BD. Una caja de texto donde introduciremos un
cdigo cualquiera para poder buscarlo en nuestra base de datos con el botn de
buscar, y y otra caja de texto para que nos imprima que si el cdigo introducido
est en la base de datos o no.

Bloques de la aplicacin

Utilizaremos la funcin de guardar el cdigo introducido de la base datos, y que

cuando aplastemos el botn de buscar, busque el cdigo en nuestra base de datos
y en caso que no se encuentre el cdigo que nos imprima No existe en la base de
datos.
Aplicacin en emulador

16. Funciones hipotenusa

Diseo de la aplicacin

Utilizaremos dos cajas de texto en donde introduciremos en cada una de ellas un

valor, un botn de procesar para que haga la operacin e imprima el resultado en
una caja de texto.
Bloques de la aplicacin

Utilizaremos las funciones matemticas para poder sacar el teorema de Pitgoras

utilizando variables.

Aplicacin en emulador

Nos imprimir el resultado al final cuando aplastemos el botn procesa.

17. Grficos
Diseo de la aplicacin

Utilizaremos un espacio canvas para poder introducir los grficos, y 2 botones que
uno tendr la funcin de dibujar una lnea y el otro de dibujar un circulo en el
grfico.
Bloques de la aplicacin

Cuando toquemos el botn circulo se dibujara un circulo en el grafico depende en

que pixel lo indiquemos y su tamao como el radio.
Cuando toquemos el botn lnea nos dibujara la lnea tambin dependiendo de los
valores que le demos a X y a Y.
Aplicacin en emulador

18. Dibujar puntos, lneas y crculos

Diseo de la aplicacin

Utilizaremos un canvas que es donde dibujaremos la lnea, el punto y el crculo.

Con 3 botones que indique cada uno la funcin.
Bloques de la aplicacin

Aplicacin en emulador

19. Texto en grafico

Diseo de la aplicacin

Utilizaremos un canvas en donde se imprimirn los grficos que introduzcamos en

la caja de texto cuando aplastemos el botn Texto en grafico
Bloques de la aplicacin

Lo que introduzcamos en la caja de texto se dibujara en el grfico.

Aplicacin en emulador

20. Texto en Grafico Girado

Diseo de la aplicacin

Solo ocuparemos insertar un canvas que es donde se imprimir el texto girado ,

cuando aplastemos el botn.
Bloques de aplicacin

En los bloques indicaremos que cuando toquemos el botn text , nos imprima un
texto que diga Esto es un texto en angulo e indicaremos la posicin de X y Y que
es donde se imprimra el texto.

Aplicacin en emulador

Cuando aplastemos el botn de texto nos imprimir en el canvas el texto girado.

21. Texto en grafico girado con color

Diseo de la aplicacin

Introduciremos un canvas donde se imprimir el texto introducido en los bloques

cuando aplastemos el botn de texto.
Bloques de la aplicacin

Esta aplicacin lleva los mismos bloques de la aplicacin anterior , solo se le

aadir el color de la letra , que es el PaintColor y elegiremos el que nosotros
queramos , en mi caso el color rojo.

Aplicacin en emulador

Cuando aplastemos el botn texto nos imprimir el texto girado con color.

22. Color de dimensin

Diseo de la aplicacin

Introduciremos un canvas en el cual se cambiara el color de fondo cuando

nosotros aplastemos el botn de dibujar.
Bloques de la aplicacin

Solo pondremos una funcin en los bloques que cuando aplastemos el botn de
dibujar cambie el color de fondo , usando BackgroundColor.

Aplicacin en emulador

23. Dibujar lnea de determinado color

Diseo de la aplicacin

Solo introduciremos un canvas donde nos dibujara la lnea con el determinado

color cuando aplastemos el botn de dibujar.
Bloques de la aplicacin

Utilizaremos el BackgroundColor para cambiar el color del fondo del canvas,

LineWidth es lo ancho que medir la lnea y PaintColor es para cambiar el color de
la lnea.

Aplicacin en emulador

Cuando aplastemos el botn de dibujar nos aparecer la lnea de color con el

fondo de color.

24. Imagen fondo

Diseo de la aplicacin

Introduciremos un canvas en el que cuando aplastemos en el botn de dibujar se

cambiara la imagen de fondo, en este caso ser la imagen de un koala.
Bloques de la aplicacin

Solo ocuparemos indicar que cuando aplastemos el botn dibujar cambie la

imagen de fondo con BackgroundImage.

Aplicacin en emulador

25. Dibujar crculos

Diseo de la aplicacin

Introduciremos un canvas que ocupe toda la pantalla, en el cual cuando lo

toquemos se dibujen crculos.
Bloques de aplicacin

Cuando toquemos la pantalla en canvas se dibujara un circulo con determinado

tamao y color.

Aplicacin en emulador

26. Dibujos
Diseo de aplicacin

Bloques de aplicacin

Aplicacin en emulador

27. Animacin
Diseo de la aplicacin

Bloques de aplicacin

Aplicacin en emulador

28. Paint
Diseo de aplicacin

Bloques de aplicacin

Aplicacin en emulador

9.- Text Grouping

Diseo de la aplicacin

Bloques de la aplicacin

Aplicacin en Emulador

10.- Investigacin de Conceptos

1. Qu es una plataforma cerrada?
Plataforma cerrada es aquella que no expone sus fuentes de su desarrollo para
una posible modificacin por parte de sus usuarios. Un ejemplo es el repertorio de
productos de Apple que posee grandes restricciones (cdigo cerrado), sobre todo
a
nivel
de
IOS.
2. Cules son algunos ambientes de desarrollo mvil para plataformas cerradas?
iOs y Android
3. Qu tipo de aplicacin es objective-c?
Objective-C es un lenguaje de programacin orientado a objetos creado como un
supe conjunto de C para que implementase un modelo de objetos parecido al de
Smalltalk. Originalmente fue creado por Brad Cox y la corporacin StepStone en
1980. En 1988 fue adoptado como lenguaje de programacin de NEXTSTEP y en
1992 fue liberado bajo licencia GPL para el compilador GCC. Actualmente se usa
como lenguaje principal de programacin en Mac OS X, iOS y GNUstep.
4. Qu tipo de aplicacin es xcode?
Xcode es el entorno de desarrollo integrado (IDE, en sus siglas en ingls) de
Apple Inc. y se suministra gratuitamente junto con Mac OS X. Xcode trabaja
conjuntamente con Interface Builder, una herencia de NeXT, una herramienta
grfica para la creacin de interfaces de usuario.
Xcode incluye la coleccin de compiladores del proyecto GNU (GCC), y puede
compilar cdigo C, C++, Swift, Objective-C, Objective-C++, Java y AppleScript
mediante una amplia gama de modelos de programacin, incluyendo, pero no
limitado a Cocoa, Carbn y Java. Otras compaas han aadido soporte para GNU
Pascal, Free Pascal, Ada y Perl.

5.Que es Oracle Database Lite 10g?

Oracle Database Lite 10g es una solucin integrada y completa para
rpido desarrollo y despliegue de alto impacto, de misin crtica

aplicaciones para entornos mviles y ligeros. Las empresas con

fuerzas de trabajo mviles pueden aprovechar Oracle Database Lite 10g para
aumentar
productividad de los empleados, reducir los costos de operacin y mejorar al
cliente
satisfaccin.

6. Qu es SQL Anywhare?
SAP SQL Anywhere es una propiedad de sistema de gestin de bases de datos
relacionales (RDBMS) de productos de SAP. SQL Anywhere se conoca como
Sybase SQL Anywhere antes de la adquisicin de Sybase por SAP.
7. Qu es SQLite?
SQLite es un sistema de gestin de bases de datos relacional compatible con
ACID, contenida en una relativamente pequea (~275 kiB)2 biblioteca escrita en C.
SQLite es un proyecto de dominio pblico1 creado por D. Richard Hipp.
8. Que es un Almacenamiento Aislado?
Para las aplicaciones de escritorio, el almacenamiento aislado es un mecanismo
de almacenamiento de datos que proporciona aislamiento y seguridad mediante la
definicin de modos estndar de asociar cdigo a los datos guardados. La
estandarizacin ofrece adems otras ventajas. Los administradores pueden usar
herramientas diseadas para manipular el almacenamiento aislado para configurar
el espacio de almacenamiento de archivos, establecer directivas de seguridad y
eliminar los datos no utilizados. Con el almacenamiento aislado, el cdigo ya no
requiere rutas de acceso nicas para especificar ubicaciones seguras en el
sistema de archivos y los datos estn protegidos de otras aplicaciones que solo
tienen acceso a un almacenamiento aislado. La informacin en cdigo que indica
la ubicacin del rea de almacenamiento de la aplicacin no es necesaria.

11.- Desarrollo cuestionario CQA

(C)=Que conozco
-Android
-Ubuntu
- Programacin en C
- Programacin en Java

(Q)=Que quiero aprender

-Seguir desarrollando
aplicaciones mviles
para android pero ms
elaboradas
-Aprender a programar
en otros lenguaje de
programacin
-Aprender a desarrollar
pginas web

(A)=Que aprend
-Instalar el Sistema
operativo UBUNTU en
una mquina virtual
-Desarrollo de
aplicaciones mviles en
Android
-Instalar eclipse en
Ubuntu
- A usar Mit App Inventor
para desarrollar
aplicaciones mviles
-Desarrollamos
diferentes tipos de
aplicaciones para
android una calculadora,
juegos etc.
-El uso de variables para
la creacin de las
aplicaciones, adems del
uso de los diversos ciclos
que ya conocamos con
anterioridad como
vendran siendo el While,
If, y For.

12.- Desarrollo Prctica sin mensajes mientras manejo (Trabajo en equipo)

Diseo

La aplicacin tendr una caja de texto en donde introduciremos el mensaje que

deseamos que aparezca cuando nos llegue un mensaje.

Bloques

Aplicacin en emulador

Cuando aplastemos el botn de modificar respuesta al momento de que nos llegue

un mensaje se le enviara un mensaje automticamente como respuesta.

13.- Desarrollo de Practica Text To Speach (Trabajo en equipo)

Diseo

Bloques

Aplicacin en emulador

14.- Seleccin del Proyecto para Presentacin Exposicin

Decidimos hacer varios proyectos para presentarlos en la exposicin y terminamos

haciendo 4 diferentes aplicaciones. Uno llamado magic8Ball que es un programa
que te da respuestas al azar, otro que es un juego llamado brick breaker que es de
romper bloques, un juego de carros que funciona con el movimiento del celular y
un juego de ping pong.

15.- Desarrollo de practica Mole Mash 2

Diseo

En un canvas introduciremos las imgenes de los hoyos en donde se posicionara

el mole y abajo tendr la puntuacin y un botn para resetear la puntuacin.
Bloques

Aplicacin en emulador

WOW

16.- Desarrollo de practica: Donde est mi carro?

Diseo

Bloques

Aplicacin en emulador

17.- Desarrollo proyecto final (Trabajo en equipo)

Desarrollamos 4 proyectos los cuales son :
Magic 8 Ball
Esta aplicacin est diseada con la idea que es una esfera mgica como el
juguete que es una bola de billar que cuando le preguntabas algo y la agitabas te
daba una respuesta al azar. En este caso esta aplicacin hace prcticamente lo
mismo solamente que aqu tienes que aplastar la imagen de la bola de billar lo
cual es un botn y te dir una respuesta.

Diseo de la aplicacin

Solo se ocupara un botn en el cual le cambiaremos la imagen y pondremos una

bola de billar, tendremos 4 textos, 3 que sern constantes y 1 que es donde se
imprimir la respuesta de la esfera mgica. Agregaremos un sonido para cuando
aplastemos el botn suene.

Bloques de la aplicacin

Le pondremos funcin al boton1 que es el botn de la bola de billar, cuando

aplastemos el botn 1 sonara un sonido, vibrara por 0.1 segundos y lo importante
es lo que se imprimir en el texto numero4. Tomar un tem de la lista al azar
cuando aplastemos el botn y lo imprimir en el texto4, al lado de la funcin pick a
random tem list crearemos una lista en la cual introduciremos nuestras posibles
respuestas para la esfera mgica.

Aplicacin en emulador

Ya emulada nuestra aplicacin cuando aplastemos el botn , vibrara el celular ,

sonara el sonido que introducimos y nos dar una respuesta al azar.

Ping Pong

Este proyecto es sobre un juego donde tu controlas una de las barras, y la

maquita la otra la maquina, tu como jugador tienes que evitar que la pelota te
pase y asi ir subiendo de nivel hasta ganar.

Estos bloques permiten que la pelota cambie de color aprox. en 900 colores, a
la par que mueve la segunda barra autnomamente y los botes de la pelota no
son siempre iguales. Aparece un botn cuando llegas a los 30 puntos para
avanzar el nivel y a los 70 otro nivel y a los 90 otro, si se llega a los 160 puntos
se gana, si se llega a los -30 se pierde, cuenta con una pantalla para la derrota
y otra para la victoria.

Brick Breaker
Brick Breaker

Vista de inicio

Vista de blocks

Vista en telfono

Esta app que se llama Brick Breaker consiste en destruir los ladrillos de colores
con la pelota rebotando, esto pero sin dejarla caer ya que si cae la bola
desaparece, para evitar que caiga se utiliza la tabla azul que se controla
arrastrando sta misma de un lado a otro, para que esta aplicacin funcionara se
tienen los bloques que asignan funciones a la pelota por ejemplo, bloques que dan
la velocidad, el intervalo del movimiento que lleva la pelota, el rebote de la pelota
en las esquinas, con los bloques de edge, los que hacen que la pelota
desaparezca si cae, entre otras. Las funciones de los ladrillos que son que al ser
impactados por la pelota, se desvanezcan esto es porque al principio los ladrillos,
que son imgenes, son establecidas como true, y al ser impactados su visibilidad
se turna falsa con bloques de lgica, el hecho de que cada bloque se rompa,
incrementa en uno la puntuacin, y al ser 25 ladrillos, cuando la puntuacin llega a
25, comienza el nivel 2, al 50 (otra vez los 25), comienza el nivel 3, y as
sucesivamente, en cada nivel lo que hace que se distingan del anterior, la pelota
cambia de color, e incrementa la velocidad en 5 unidades hasta el nivel 5, lo que
significa que aumenta 20 unidades despus de la velocidad inicial, tambin est
todo lo que slo es diseo, como los bloques de color diferente, el fondo que tiene
la aplicacin y los colores de las pelotas de cada nivel.

Proyecto del carrito

Esta aplicacin est basada en un juego en donde se mueve un carro hacia
cualquier lado que se mueva el celular, ya que el carro est programado para
moverse segn el movimiento del celular. El juego consiste en que el carro ira
avanzando en la carretera y tratara de ir agarrando unas esferas amarillas para ir
sumando puntos, tambin se encontraran con unas bombas con el avance de la
carretera lo cual, si recoge una de estas bombas naranjas, les restara puntos. Se
tendr que ir sumando los puntos que se puedan e ir evitando las bombas para
que no les reste puntos, si agarra muchas bombas, el juego terminara.
Captura de pantalla del diseo
Esta aplicacin consta de 3 pantallas:

La primera pantalla se basa en el juego, contiene un canvas, en donde todo el

desarrollo est dentro de esta parte. Contiene una BombaImageSprite y
Otrocarro en donde la primera es una bomba que restara puntos en el caso de
ser tocada por el CarroImageSprite, y la segunda es una ball de color amarilla
que tiene el mismo proceso que la anterior peo esta sumara puntos en el caso de
ser tocara por el mismo CarroImageSprite. Este carro, se mover hacia cualquier

lado que se mueva el celular, ya que est programado para ser movido debido a
los movimientos del celular.
En esta pantalla tambin contiene 2 Label, los cuales estn basados en la
puntuacin. En esta parte es donde se ir sumando o restando puntos
dependiendo del caso, es decir, la puntuacin se ir actualizando.
Tambin contiene un botn de comenzar el cual al ser seleccionado el carro se ir
moviendo o ms bien, la aplicacin comenzara.
Por ltimo, esta pantalla contiene un Reloj el cual es el encargado del tiempo, y un
AceleratorSensor el cual, es el encardo de la velocidad y el movimiento del carro.

La pantalla dos contiene un canvas el cual tendr una imagen de fondo sealando
que el juego se acabo. Para poder llegar a esta pantalla se tiene que juntar el
nmero de puntos negativos determinados, es decir, que la puntuacin sea muy
baja. Tambin contiene un botn que al ser seleccionado se volver a intentar
juntar ms puntos para no perder, es decir, se volver a iniciar la aplicacin de
nuevo.

Esta tercera pantalla contiene una imagen en canvas que dice que se ha ganado,
solo se llegara aqu si se junta el nmero de puntos determinados. Tambin tiene
un botn que si lo presionas se vuelve a iniciar la aplicacin para que se pueda
volver a jugar.
Captura de pantalla del bloque de programacin
SCREEN 1 o primera pantalla

En estos bloques, primeramente se inicializaran las variables que se necesitaran

en esta aplicacin, la velocidad, la velocidad_x (velocidad en el eje X),
velocidad_y (velocidad en el eje Y), y la variable C que nos servir para el
tiempo.
Se creara un bloque de acelermetro que ir cambiando segn sea el caso, en
donde en este bloque se indicaran los procesos a realizar para que el carro
avance tanto en ejes X como en el eje Y; esto nos servir para mover el carro
cuando movamos el dispositivo a la izquierda, derecha, arriba o abajo ya que el
carro se mueve segn se mueva el celular.
Dentro de este bloque lo que estas indicando bsicamente es que el carro se
pueda mover tanto a la derecha como izquierda, as como tambin arriba o abajo
segn sea el caso, en donde la velocidad ser la misma para cualquier lado que
se mueva. Tambin se indica que es la misma velocidad pero en algunos casos
es negativa ya que puede retroceder el carro pero sigue siendo la misma
velocidad para que el carro contenga el mismo ritmo por as decirlo.

En este bloque lo que se est indicando es que cuando se presione el botn

Comenzar iniciara el conteo del reloj, as como los cambios de velocidad, el
movimiento del as bombas y pelotas amarrillas as como la puntuacin.
Bsicamente cuando se presione este botn se iniciara el juego.

Este bloque es el Clock1 el cual se basa en el tiempo. Se tomara el valor de la

variable C, es decir 0, y a partir de ese valor se ir contando el tiempo en
segundos. Cuando el segundo sea igual a 2 se cambiara la imagen de fondo,
cuando llegue al segundo 4, la imagen de fondo ser la que se tena antes de ser
cambiada, cuando se llegue al segundo 6 se volver a cambiar a la segunda
imagen, cuando se llegue al segundo 8 se pondr la imagen del principio y cuando

llegue al segundo 10, la variable C volver a 0 y de esta forma creamos un ciclo

en donde el tiempo dura de 0 a 10 pero se repite y repite creando un bucle infinito
en donde cambia de una imagen a otra imagen y esto hace que parezca que el
carro vaya avanzando. Tambin en este bloque es necesario mandar a llamar las
bombas y a las bolitas amarillas para que en el eje Y vayan cayendo para que
puedan ser agarradas o esquivadas por el carro. Por ltimo manda a llamar al
finaljuego o al Ganarjuego segn sea el caso, estos son dos procesos que
sern explicados ms adelante.

Estos dos bloques son muy parecidos ya que uno hace que la bomba cuando
toque los bordes, en este caso el inferior, aparecer en una posicin aleatoria en
el eje X y en l Y saldr en 0, para que aparezca siempre desde arriba pero en
una posicin aleatoria en cuando al eje X. Sera el mismo procedimiento para el
OtroCarro que son las bolitas amarillas. Por ltimo se iniciara una nueva variable
llamada puntuacin en la cual tiene un valor de 0.

En estos bloques son muy parecidos, ya que en el de bombas hace que cuando la
bomba sea colapsada, es decir, que el carro la toque, se le restaran 50 puntos y
llamara a actualizar la puntuacin y en el mismo momento que sea tocada
cambiara de posicin aleatoria en el eje X pero en Y seguir siendo desde arriba.

Es el mismo procedimiento para cuando la bolita amarilla o Otrocarro colapse

con el carro, pero la diferencia es que este te sumara 50 puntos y de igual forma,
cambiara de posicin igual que el anterior.
El tercer bloque que se muestra es la actualizacin de puntos en la cual la
puntuacin se escribe en el Label PuntuacionLabel que une puntuacin con el
global puntuacin es decir, en ese Label se mostrara la palabra puntuacin
seguida del valor de la puntuacin, esta se ir actualizando cuando se sumen 50 o
-50 segn sea el caso y siempre se mostrara en la parte de abajo del canvas.

En el proceso finaljuego hace que cuando la puntuacin sea menor o igual a

-350 todo se detendr, es decir, el carro, la bomba, las bolitas amarillas, el reloj y
el acelerador se detendr y la parte de canvas se limpiara e inmediatamente te
mandaran a la Screen 2 o pantalla 2. Si se llega a esa puntuacin bsicamente ya
perdiste por agarras mas bombas que bolitas amarillas.
En el proceso Ganarjuego se basa en que cuando la puntuacin sea mayor o
igual a 350 todo se detendr como en el proceso anterior, pero este proceso te
mandara a la Screen3 o pantalla 3 en donde si llegas a esta pantalla ya ganaste
por juntar mas bolitas amarillas que bombas, que son las que te quitan puntos.

SCREEN 2 o segunda pantalla

Los procesos de la segunda pantalla son simples, cuando te manden a esta

pantalla por juntar menos o igual a -350 puntos se mostrara una imagen que
Game Over significando que ya perdiste en una imagen.
Esta pantalla contiene un botn en el cual al ser presionado volvers a jugar para
intentar ganar mandndote nuevamente a la Screen1 o pantalla 1, este botn hace
que la aplicacin funcione de nuevo desde el principio.
SCREEN 3 o tercera pantalla

Esta pantalla contiene lo mismo que la Screen2 pero solo llegaras aqu cuando
hayas juntado mas o igual a 350 puntos en donde se mostrara una imagen
sealando que has ganado.
Cuando se presione el botn Volver a Jugar esta pantalla te mandara a la
Screen1 en donde toda la aplicacin volver a comenzar para que puedas volver a
disfrutar el juego.

Comprobacin con la aplicacin corriendo en un dispositivo movil

Esta imagen es cuando ya se esta

jugando la aplicacin despues de
seleccionar el botn comenzar. Podemos
observar que el carro se movi, las
bombas y la bolita amarilla tambin se
movi, juntando una puntuacin.

En esta imagen se muestra la pantalla

diciendo que ganaste, lo cual solo
llegaras a ella cuando juntes una
cantidad de puntos, y para esto tendrs
que agarrar mas bolitas amarillas que
bombas.

En esta imagen, se puede mostrar que

se acabo el juego en donde perdi ya
que junto una cantidad de puntos
negativos, para llegar a esto tiene que
recoger ms bombas que bolitas
amarillas ya que las bombas quitan
puntos.

Este es una aplicacin de juego en la que se puede ganar o perder segn sea el
caso, con esta aplicacin podrs divertirte y en el caso que pierdas, se darn ms
ganas de poder superarse y ganar este juego. Este juego no se puede jugar en el
emulador, solo se puede jugar en dispositivos mviles ya que el carro se mueve a
travs del movimiento del celular.

18.- Elaboracin de conclusin de forma global

En todo este semestre aprendimos a desarrollar aplicaciones web para Android de
una forma muy sencilla, fcil y divertida. Este mtodo es mucho ms sencillo de
programar que los dems, ya que no ocupamos aprendernos cdigos ni nada de
eso, solo tenemos que saber cmo acomodar los bloques y leerlos para poder
programar y hacer una aplicacin para Android muy fcilmente.
Aprend a instalar Ubuntu en una maquina virtual y configurar su propio entorno.
Agradecemos al Profesor Julin flores por compartir sus conocimientos en este
semestre y permitirnos alcanzar metas planteadas, Sin sus enseanzas no
hubiramos podido completar estas aplicaciones.