manual del participante
TRANSCRIPT
Manual del Participante
Tabla de Contenidos
CAPIacuteTULO 1 FUNDAMENTOS DE PROGRAMACIOacuteN 1
iquestPorque ensentildear a programar a nintildeos 2
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares 2
La ensentildeanza de programacioacuten en la escuela es el presente y no el futuro 3
Razones para ensentildearles a los nintildeos a programar 3
Uso de Scratch para aprender a programar 5
Fundamentos de programacioacuten 6
iquestQueacute es lenguaje de programacioacuten 6
Definicioacuten de algoritmo 6
Scratch como herramienta de programacioacuten 6
Descarga e instalacioacuten del programa Scratch 7
Propiedades de ventana 11
Pasos 12
Variables 16
CAPIacuteTULO 2 ALGORITMOS Y ESTRUCTURA DE UN PROYECTO MOacuteVIL USANDO
ANDROID 21
Estructuras condicionales 22
Condicionales simples 22
Condicionales dobles 22
Condicionales anidados 23
Bucles en Scratch 24
Repetir 24
Por siempre 25
Repetir hasta que 25
Uso de laacutepiz en Scratch 26
Mit App Inventor 35
Instalacioacuten App Inventor 35
Configuracioacuten de Java 36
Descarga e instalar el software necesario para la instalacioacuten del emulador del App
Inventor 43
Teleacutefono 46
Elementos de programacioacuten en App Inventor 48
Ingresando a App Inventor 48
CAPIacuteTULO 3 MULTIMEDIA ndash AUDIO Y VIDEO CON ANDROID 53
Diagrama de bloques 54
Variables 56
Eventos 56
Sentencias condicionales 57
Bucles o sentencias repetitivas 64
Visor de sitios web ndash webviewer 66
Editor de bloques 68
Sonidos y videos 69
Video 70
Reconocimiento de voz 73
Herramienta Clock 77
CAPIacuteTULO 4 SENSORES 81
Sensores 82
Sensor de Aceleracioacuten (Aceleroacutemetro) 82
LocationSensor 82
OrientationSensor 83
Capiacutetulo
Fundamentos de
programacioacuten
Objetivos
Introducir al participante a la loacutegica de la programacioacuten Diferenciar una variable y sus tipos Aprender a crear algoritmos Crear algoritmos Secuenciales utilizando variables y constantes
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 2
iquestPorque ensentildear a programar a nintildeos
El uso de la tecnologiacutea en las aulas llego hace muchos antildeos hace mucho tiempo ya que
los alumnos utilizan las computadoras para que puedan realizar muchas tareas y puedan
aprender su funcionamiento incluso el gobierno en muchos departamentos a echo
entrega de notebook a los alumnos para que estos puedan estudiar buscar informacioacuten y
aprender maacutes faacutecilmente pero son muy pocos los casos en los que se explota estas
herramientas como se debe ya que existe gran diversidad de formas para sacarle el
mayor provecho a un computador y una de ellas es ensentildeando lenguaje de
programacioacuten
A pesar de que la programacioacuten ha llegado hace
mucho tiempo a las aulas en nuestro paiacutes existe
un poco porcentaje de instituciones educativas
que ensentildean a sus alumnos a programar es maacutes
la programacioacuten fue uno de los primeros cursos
que se ensentildeoacute con la llegada de la computadora
con un programa llamado logo el cual se teniacutea
que dar instrucciones a un icono para que este pueda ir dibujando figuras convirtieacutendose
convirtieron en un potente tractor para esos joacutevenes programadores que se sentaban
por primera vez delante de un ordenado esto se fue perdiendo con el pasar de los antildeos
reemplazaacutendolo el aprendizaje de herramientas graacuteficas
La ensentildeanza de programacioacuten aumenta la motivacioacuten mejora la autonomiacutea y fomenta
la creatividad de los estudiantes ademaacutes de prepararlos para un mercado laboral que
cada vez demanda maacutes profesionales en el aacuterea de las tecnologiacuteas de la informacioacuten
(TIC)
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares
La programacioacuten en escolares los prepara para un mercado laboral cada vez maacutes
tecnoloacutegico y agresivo ademaacutes permite a los alumnos encarar procesos de autocorreccioacuten
y buacutesqueda de errores no solo para tareas informaacutetica sino para la autocorreccioacuten de y
busca de errores de otras materias ya que los vuelven constantes en dicha tarea ya que
ellos van a buscar que su programa informaacutetico se ejecute adecuadamente formando
habito de correccioacuten en todas las tareas los enfrenta a retos de resolucioacuten de problemas
Si un alumno de ingenieriacutea llega a la universidad con conocimientos baacutesicos de fiacutesica
quiacutemica o matemaacuteticas iquestpor queacute no llega tambieacuten con conocimientos baacutesicos de
programacioacuten algoritmos loacutegica Ya que los ayudara en sus tareas de autocorreccioacuten y
facilitando el aprendizaje de sus materias
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Tabla de Contenidos
CAPIacuteTULO 1 FUNDAMENTOS DE PROGRAMACIOacuteN 1
iquestPorque ensentildear a programar a nintildeos 2
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares 2
La ensentildeanza de programacioacuten en la escuela es el presente y no el futuro 3
Razones para ensentildearles a los nintildeos a programar 3
Uso de Scratch para aprender a programar 5
Fundamentos de programacioacuten 6
iquestQueacute es lenguaje de programacioacuten 6
Definicioacuten de algoritmo 6
Scratch como herramienta de programacioacuten 6
Descarga e instalacioacuten del programa Scratch 7
Propiedades de ventana 11
Pasos 12
Variables 16
CAPIacuteTULO 2 ALGORITMOS Y ESTRUCTURA DE UN PROYECTO MOacuteVIL USANDO
ANDROID 21
Estructuras condicionales 22
Condicionales simples 22
Condicionales dobles 22
Condicionales anidados 23
Bucles en Scratch 24
Repetir 24
Por siempre 25
Repetir hasta que 25
Uso de laacutepiz en Scratch 26
Mit App Inventor 35
Instalacioacuten App Inventor 35
Configuracioacuten de Java 36
Descarga e instalar el software necesario para la instalacioacuten del emulador del App
Inventor 43
Teleacutefono 46
Elementos de programacioacuten en App Inventor 48
Ingresando a App Inventor 48
CAPIacuteTULO 3 MULTIMEDIA ndash AUDIO Y VIDEO CON ANDROID 53
Diagrama de bloques 54
Variables 56
Eventos 56
Sentencias condicionales 57
Bucles o sentencias repetitivas 64
Visor de sitios web ndash webviewer 66
Editor de bloques 68
Sonidos y videos 69
Video 70
Reconocimiento de voz 73
Herramienta Clock 77
CAPIacuteTULO 4 SENSORES 81
Sensores 82
Sensor de Aceleracioacuten (Aceleroacutemetro) 82
LocationSensor 82
OrientationSensor 83
Capiacutetulo
Fundamentos de
programacioacuten
Objetivos
Introducir al participante a la loacutegica de la programacioacuten Diferenciar una variable y sus tipos Aprender a crear algoritmos Crear algoritmos Secuenciales utilizando variables y constantes
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 2
iquestPorque ensentildear a programar a nintildeos
El uso de la tecnologiacutea en las aulas llego hace muchos antildeos hace mucho tiempo ya que
los alumnos utilizan las computadoras para que puedan realizar muchas tareas y puedan
aprender su funcionamiento incluso el gobierno en muchos departamentos a echo
entrega de notebook a los alumnos para que estos puedan estudiar buscar informacioacuten y
aprender maacutes faacutecilmente pero son muy pocos los casos en los que se explota estas
herramientas como se debe ya que existe gran diversidad de formas para sacarle el
mayor provecho a un computador y una de ellas es ensentildeando lenguaje de
programacioacuten
A pesar de que la programacioacuten ha llegado hace
mucho tiempo a las aulas en nuestro paiacutes existe
un poco porcentaje de instituciones educativas
que ensentildean a sus alumnos a programar es maacutes
la programacioacuten fue uno de los primeros cursos
que se ensentildeoacute con la llegada de la computadora
con un programa llamado logo el cual se teniacutea
que dar instrucciones a un icono para que este pueda ir dibujando figuras convirtieacutendose
convirtieron en un potente tractor para esos joacutevenes programadores que se sentaban
por primera vez delante de un ordenado esto se fue perdiendo con el pasar de los antildeos
reemplazaacutendolo el aprendizaje de herramientas graacuteficas
La ensentildeanza de programacioacuten aumenta la motivacioacuten mejora la autonomiacutea y fomenta
la creatividad de los estudiantes ademaacutes de prepararlos para un mercado laboral que
cada vez demanda maacutes profesionales en el aacuterea de las tecnologiacuteas de la informacioacuten
(TIC)
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares
La programacioacuten en escolares los prepara para un mercado laboral cada vez maacutes
tecnoloacutegico y agresivo ademaacutes permite a los alumnos encarar procesos de autocorreccioacuten
y buacutesqueda de errores no solo para tareas informaacutetica sino para la autocorreccioacuten de y
busca de errores de otras materias ya que los vuelven constantes en dicha tarea ya que
ellos van a buscar que su programa informaacutetico se ejecute adecuadamente formando
habito de correccioacuten en todas las tareas los enfrenta a retos de resolucioacuten de problemas
Si un alumno de ingenieriacutea llega a la universidad con conocimientos baacutesicos de fiacutesica
quiacutemica o matemaacuteticas iquestpor queacute no llega tambieacuten con conocimientos baacutesicos de
programacioacuten algoritmos loacutegica Ya que los ayudara en sus tareas de autocorreccioacuten y
facilitando el aprendizaje de sus materias
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Diagrama de bloques 54
Variables 56
Eventos 56
Sentencias condicionales 57
Bucles o sentencias repetitivas 64
Visor de sitios web ndash webviewer 66
Editor de bloques 68
Sonidos y videos 69
Video 70
Reconocimiento de voz 73
Herramienta Clock 77
CAPIacuteTULO 4 SENSORES 81
Sensores 82
Sensor de Aceleracioacuten (Aceleroacutemetro) 82
LocationSensor 82
OrientationSensor 83
Capiacutetulo
Fundamentos de
programacioacuten
Objetivos
Introducir al participante a la loacutegica de la programacioacuten Diferenciar una variable y sus tipos Aprender a crear algoritmos Crear algoritmos Secuenciales utilizando variables y constantes
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 2
iquestPorque ensentildear a programar a nintildeos
El uso de la tecnologiacutea en las aulas llego hace muchos antildeos hace mucho tiempo ya que
los alumnos utilizan las computadoras para que puedan realizar muchas tareas y puedan
aprender su funcionamiento incluso el gobierno en muchos departamentos a echo
entrega de notebook a los alumnos para que estos puedan estudiar buscar informacioacuten y
aprender maacutes faacutecilmente pero son muy pocos los casos en los que se explota estas
herramientas como se debe ya que existe gran diversidad de formas para sacarle el
mayor provecho a un computador y una de ellas es ensentildeando lenguaje de
programacioacuten
A pesar de que la programacioacuten ha llegado hace
mucho tiempo a las aulas en nuestro paiacutes existe
un poco porcentaje de instituciones educativas
que ensentildean a sus alumnos a programar es maacutes
la programacioacuten fue uno de los primeros cursos
que se ensentildeoacute con la llegada de la computadora
con un programa llamado logo el cual se teniacutea
que dar instrucciones a un icono para que este pueda ir dibujando figuras convirtieacutendose
convirtieron en un potente tractor para esos joacutevenes programadores que se sentaban
por primera vez delante de un ordenado esto se fue perdiendo con el pasar de los antildeos
reemplazaacutendolo el aprendizaje de herramientas graacuteficas
La ensentildeanza de programacioacuten aumenta la motivacioacuten mejora la autonomiacutea y fomenta
la creatividad de los estudiantes ademaacutes de prepararlos para un mercado laboral que
cada vez demanda maacutes profesionales en el aacuterea de las tecnologiacuteas de la informacioacuten
(TIC)
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares
La programacioacuten en escolares los prepara para un mercado laboral cada vez maacutes
tecnoloacutegico y agresivo ademaacutes permite a los alumnos encarar procesos de autocorreccioacuten
y buacutesqueda de errores no solo para tareas informaacutetica sino para la autocorreccioacuten de y
busca de errores de otras materias ya que los vuelven constantes en dicha tarea ya que
ellos van a buscar que su programa informaacutetico se ejecute adecuadamente formando
habito de correccioacuten en todas las tareas los enfrenta a retos de resolucioacuten de problemas
Si un alumno de ingenieriacutea llega a la universidad con conocimientos baacutesicos de fiacutesica
quiacutemica o matemaacuteticas iquestpor queacute no llega tambieacuten con conocimientos baacutesicos de
programacioacuten algoritmos loacutegica Ya que los ayudara en sus tareas de autocorreccioacuten y
facilitando el aprendizaje de sus materias
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Capiacutetulo
Fundamentos de
programacioacuten
Objetivos
Introducir al participante a la loacutegica de la programacioacuten Diferenciar una variable y sus tipos Aprender a crear algoritmos Crear algoritmos Secuenciales utilizando variables y constantes
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 2
iquestPorque ensentildear a programar a nintildeos
El uso de la tecnologiacutea en las aulas llego hace muchos antildeos hace mucho tiempo ya que
los alumnos utilizan las computadoras para que puedan realizar muchas tareas y puedan
aprender su funcionamiento incluso el gobierno en muchos departamentos a echo
entrega de notebook a los alumnos para que estos puedan estudiar buscar informacioacuten y
aprender maacutes faacutecilmente pero son muy pocos los casos en los que se explota estas
herramientas como se debe ya que existe gran diversidad de formas para sacarle el
mayor provecho a un computador y una de ellas es ensentildeando lenguaje de
programacioacuten
A pesar de que la programacioacuten ha llegado hace
mucho tiempo a las aulas en nuestro paiacutes existe
un poco porcentaje de instituciones educativas
que ensentildean a sus alumnos a programar es maacutes
la programacioacuten fue uno de los primeros cursos
que se ensentildeoacute con la llegada de la computadora
con un programa llamado logo el cual se teniacutea
que dar instrucciones a un icono para que este pueda ir dibujando figuras convirtieacutendose
convirtieron en un potente tractor para esos joacutevenes programadores que se sentaban
por primera vez delante de un ordenado esto se fue perdiendo con el pasar de los antildeos
reemplazaacutendolo el aprendizaje de herramientas graacuteficas
La ensentildeanza de programacioacuten aumenta la motivacioacuten mejora la autonomiacutea y fomenta
la creatividad de los estudiantes ademaacutes de prepararlos para un mercado laboral que
cada vez demanda maacutes profesionales en el aacuterea de las tecnologiacuteas de la informacioacuten
(TIC)
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares
La programacioacuten en escolares los prepara para un mercado laboral cada vez maacutes
tecnoloacutegico y agresivo ademaacutes permite a los alumnos encarar procesos de autocorreccioacuten
y buacutesqueda de errores no solo para tareas informaacutetica sino para la autocorreccioacuten de y
busca de errores de otras materias ya que los vuelven constantes en dicha tarea ya que
ellos van a buscar que su programa informaacutetico se ejecute adecuadamente formando
habito de correccioacuten en todas las tareas los enfrenta a retos de resolucioacuten de problemas
Si un alumno de ingenieriacutea llega a la universidad con conocimientos baacutesicos de fiacutesica
quiacutemica o matemaacuteticas iquestpor queacute no llega tambieacuten con conocimientos baacutesicos de
programacioacuten algoritmos loacutegica Ya que los ayudara en sus tareas de autocorreccioacuten y
facilitando el aprendizaje de sus materias
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 2
iquestPorque ensentildear a programar a nintildeos
El uso de la tecnologiacutea en las aulas llego hace muchos antildeos hace mucho tiempo ya que
los alumnos utilizan las computadoras para que puedan realizar muchas tareas y puedan
aprender su funcionamiento incluso el gobierno en muchos departamentos a echo
entrega de notebook a los alumnos para que estos puedan estudiar buscar informacioacuten y
aprender maacutes faacutecilmente pero son muy pocos los casos en los que se explota estas
herramientas como se debe ya que existe gran diversidad de formas para sacarle el
mayor provecho a un computador y una de ellas es ensentildeando lenguaje de
programacioacuten
A pesar de que la programacioacuten ha llegado hace
mucho tiempo a las aulas en nuestro paiacutes existe
un poco porcentaje de instituciones educativas
que ensentildean a sus alumnos a programar es maacutes
la programacioacuten fue uno de los primeros cursos
que se ensentildeoacute con la llegada de la computadora
con un programa llamado logo el cual se teniacutea
que dar instrucciones a un icono para que este pueda ir dibujando figuras convirtieacutendose
convirtieron en un potente tractor para esos joacutevenes programadores que se sentaban
por primera vez delante de un ordenado esto se fue perdiendo con el pasar de los antildeos
reemplazaacutendolo el aprendizaje de herramientas graacuteficas
La ensentildeanza de programacioacuten aumenta la motivacioacuten mejora la autonomiacutea y fomenta
la creatividad de los estudiantes ademaacutes de prepararlos para un mercado laboral que
cada vez demanda maacutes profesionales en el aacuterea de las tecnologiacuteas de la informacioacuten
(TIC)
iquestQueacute aporta la ensentildeanza de programacioacuten a los escolares
La programacioacuten en escolares los prepara para un mercado laboral cada vez maacutes
tecnoloacutegico y agresivo ademaacutes permite a los alumnos encarar procesos de autocorreccioacuten
y buacutesqueda de errores no solo para tareas informaacutetica sino para la autocorreccioacuten de y
busca de errores de otras materias ya que los vuelven constantes en dicha tarea ya que
ellos van a buscar que su programa informaacutetico se ejecute adecuadamente formando
habito de correccioacuten en todas las tareas los enfrenta a retos de resolucioacuten de problemas
Si un alumno de ingenieriacutea llega a la universidad con conocimientos baacutesicos de fiacutesica
quiacutemica o matemaacuteticas iquestpor queacute no llega tambieacuten con conocimientos baacutesicos de
programacioacuten algoritmos loacutegica Ya que los ayudara en sus tareas de autocorreccioacuten y
facilitando el aprendizaje de sus materias
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 3 Escuela de Tecnologiacuteas de la Informacioacuten
La ensentildeanza de programacioacuten en la escuela es el presente y no el
futuro
Aprender a programar significa mucho maacutes que ensentildear un simple curso de computacioacuten
ya que ayuda a expandir las oportunidades loacutegicas y laborales de un nintildeo e ir
moldeaacutendolo desde el inicio para adaptarlo al mercado de trabajo
Tenemos en el mercado muchos nintildeos que han llegado a
alcanzar un nivel de programacioacuten muy alto llegando asiacute
con tan solo entre 9 y 12 antildeos a trabajar en empresas
muy prestigiosas como Microsoft Google Apple En
Estados Unidos
Aprender a descomponer un programa a los nintildeos les
puede ser de mucha utilidad ya que aprenderaacuten a localizar errores y repeticiones
ademaacutes trabajaraacuten la loacutegica y solucioacuten de problemas
Ademaacutes las matemaacuteticas se convierten en una necesidad una herramienta muy
necesaria de un sentido mayor que el resultado numeacuterico de una multiplicacioacuten Lo
mismo ocurre con la geometriacutea y asiacute se va desarrollando no soacutelo la comprensioacuten para
entender estas materias sino el intereacutes por las mismas
La creatividad es el reto de crear un programa que funcione correctamente e incluso que
se diferencie de otros ya existentes mejoraacutendolos o creando versiones parecidas
Razones para ensentildearles a los nintildeos a programar
Para alguien que no tiene nociones de programacioacuten ver
liacuteneas de coacutedigo Java C++ SQL y hasta de lenguajes
de programacioacuten maacutes sencillos como Python o Ruby
puede ser un verdadero problema ya que no
entenderiacutean nada de los dicen las liacuteneas de coacutedigo es
por eso que si hablamos de ensentildearle programacioacuten a
un nintildeo de 6 antildeos a base de coacutedigo puede ser una tarea muy difiacutecil pero el reciente
intereacutes en la programacioacuten para el puacuteblico en general tiene un enfoque distinto ya que en
la actualidad existen muchos software que ensentildean a utilizar la loacutegica de la programacioacuten
y la algoritmia en nintildeos de muy corta edad adentraacutendolos al mundo de la programacioacuten
sin necesidad de escribir liacuteneas de coacutedigo A continuacioacuten se muestra algunas razones por
las que un nintildeo debe aprender a programar
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 4
1) Es muy faacutecil y muy divertido para los nintildeos
Existen una serie de programas con entornos graacuteficos que permiten utilizar los
conceptos de la programacioacuten para crear programas en especial utilizando el
movimiento de imaacutegenes llegando a ser muy atractivo para los nintildeos ya que ellos
mediante la loacutegica de programacioacuten tendraacuten que poner bloques obteniendo resultados
que los sorprenderaacuten y los incentivaran a seguir buscando opciones parta realizar
alguacuten cambio
2) Promueve el uso de la tecnologiacutea
En la actualidad se dice que los nintildeos que vienen a este mundo viene con la
tecnologiacutea en sus manos es por ello que son llamados los ldquonativos digitalesrdquo ya que a
ellos se les hace muy faacutecil el uso de las herramientas tecnoloacutegicas por ello debemos
buscar herramientas informaacuteticas que despierten maacutes el intereacutes por el desarrollo de
estas tecnologiacuteas y sus usos
3) Fomenta la igualdad de geacutenero
Integrar el aprendizaje de programacioacuten en las escuelas es una forma de promover el
acercamiento e intereacutes temprano de nintildeas y adolescentes hacia el aacutembito de la
tecnologiacutea
4) Aprender a programar es programar para aprender
Eacutesta es una de las frases maacutes famosas de Mitchel Resnick que compara a la
programacioacuten con habilidades como la lectura las ciencias y matemaacuteticas Plantea
que al principio aprendemos a leer pero eventualmente leemos para aprender lo
mismo sucede con la programacioacuten es decir primero aprendemos a utilizar la
computadora luego usaremos la computadora para crear nuevos software que
ayuden a la tecnologiacutea convirtieacutendola en una herramienta que se puede usar
cambiar doblar mover y romper para crear
Aprender a programar implica fomentar el pensamiento creativo la comunicacioacuten de
ideas la resolucioacuten de problemas y la capacidad de disentildear proyectos
Cuando un nintildeo aprende a programar tambieacuten aprende ideas matemaacuteticas como
variables condicionales y secuencias y desarrolla un razonamiento sistemaacutetico que le
seraacute uacutetil en muchas otras aacutereas de la vida
Ademaacutes de fortalecer habilidades cognitivas los nintildeos y joacutevenes tambieacuten se van
familiarizando con valores importantes de la cultura tecnoloacutegica como la
comunidad open source la creatividad y el trabajo colaborativo
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 5 Escuela de Tecnologiacuteas de la Informacioacuten
5) Mejora su desempentildeo en otros cursos
El ensentildear a programar a un nintildeo en el colegio no quiere decir que lo estamos
formando para que sea un futuro programador de sistemas lo que se busca es que el
nintildeo o adolecente desarrolle una relacioacuten maacutes inteligente con Internet y la tecnologiacutea
mientras se promueven habilidades necesarias para la programacioacuten como la loacutegica
6) Ayuda a la solucioacuten de problemas
Cuando hablamos de solucioacuten de problemas no solo hablamos de solucioacuten de
problemas estudiantiles sino que ensentildeamos a los alumnos a solucionar problemas en
la vida real ya que se les hace un habito el corregir errores
7) Alfabetismo digital
Los nintildeos que aprenden a programar no solo interactuacutean con la tecnologiacutea sino que
aprenden a crear y se expresan a traveacutes de ella de distintas formas
8) Se necesitan programadores
Seguacuten las estadiacutesticas la demanda de programadores creceraacute de forma dramaacutetica en
los proacuteximos antildeos Soacutelo en Estados Unidos se calcula que para el antildeo 2020 habraacute 1
milloacuten maacutes de trabajos de los que podraacuten cubrir los licenciados e ingenieros en
Informaacutetica seguacuten los planes de estudio actuales ldquoInformaacutetica es el tiacutetulo
universitario mejor pagado y los trabajos de programacioacuten estaacuten creciendo el doble
que la media nacional del paiacutesrdquo indican en un reciente estudio
Uso de Scratch para aprender a programar
SCRATCH es un lenguaje de programacioacuten orientado especiacuteficamente a nintildeos y
adolescentes con un concepto muy didaacutectico basado en la utilizacioacuten de ldquobloquesrdquo que se
unen para formar pequentildeos fragmentos de coacutedigo y que permiten crear historias
interactivas animaciones juegos piezas musicales y artiacutesticas etc
Dos elementos motivacionales fundamentales de SCRATCH son
Permite antildeadir cualquier creacioacuten artiacutestico-digital del ldquoprogramadorrdquo en el entorno de
una manera muy sencilla es decir podemos crear nuestros propios dibujos nuestros
propios elementos multimedia etc
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 6
Podemos compartir nuestras creaciones con otros ldquoprogramadoresrdquo en la misma
paacutegina web del proyecto SCRATCH aprendiendo de las creaciones de otros y
poniendo a disposicioacuten de los demaacutes las nuestras
Evita los tiacutepicos problemas con los errores de sintaxis al no permitir que piezas que no
pueden ir unidas se junten De esta manera antes de ldquoejecutarrdquo nuestro programa
sabemos si va a funcionar o no al menos desde el punto de vista de la correccioacuten
sintaacutectica
Fundamentos de programacioacuten
iquestQueacute es lenguaje de programacioacuten
Es un lenguaje disentildeado para expresar procesos y coacutedigos que pueden ser
llevados a cabo por maacutequinas como son las computadoras Estos lenguajes
pueden usarse para la creacioacuten de programas que obedezcan las oacuterdenes para los
usos fiacutesico o loacutegico de la maacutequina
Estos distintos tipos de lenguaje sirven como proceso de creacioacuten de
un programa de computadora mediante la aplicacioacuten de procedimientos loacutegicos
Definicioacuten de algoritmo
Un algoritmo es un conjunto ordenado y finito de operaciones que permite hallar
la solucioacuten de un problema Meacutetodo y notacioacuten en las distintas foacutermulas del
caacutelculo
El algoritmo constituye un meacutetodo para resolver un problema mediante una
secuencia de pasos a seguir Dicha secuencia puede ser expresada en forma de
diagrama de flujo con el fin de seguirlo de una forma maacutes sencilla
Scratch como herramienta de programacioacuten
Scratch es un entorno graacutefico de programacioacuten desarrollado por un grupo de
investigadores del Lifelong Kindergarten Group del Laboratorio de Medios del MIT
bajo la direccioacuten del Dr Mitchel Resnick
Este entorno grafico hace que la programacioacuten sea maacutes atractiva y accesible para
todo aquel que se enfrente por primera vez a aprender a programar llegando asiacute a
convertirse en un proceso muy divertido y nada engorroso Seguacuten sus creadores
fue disentildeado como medio de expresioacuten para ayudar a nintildeos y joacutevenes a expresar
sus ideas de forma creativa al tiempo que desarrollan habilidades tanto de
pensamiento loacutegico como de aprendizaje para el Siglo XXI
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 7 Escuela de Tecnologiacuteas de la Informacioacuten
La pantalla principal de scratch es la siguiente
Descarga e instalacioacuten del programa Scratch
Primera forma
1) Ingresamos a la paacutegina del scratch
httpwwwscratchmiteduscratch_14
Luego hacemos click en el link Scratch 14 para Windows y procedemos a
descargar el software al equipo para poder instalarlo
Cuando hagamos click en el enlace se procederaacute la descarga
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 8
Segunda forma
Abrimos Google y escribimos Scratch y le damos click en el link que dice Scratch
14
Se mostrara la misma ventana anterior de donde descargaremos el software
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 9 Escuela de Tecnologiacuteas de la Informacioacuten
De cualquiera de las dos formas encontraremos el icono de instalacioacuten del Scratch
en la carpeta descargas el cual lo ejecutaremos con doble click
Se mostrara la siguiente ventana la cual le daremos click en next
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 10
Se mostrara una ventana que nos mostrara la ruta donde se instalara el
programa Luego click en Next
Se mostrara una ventana indicando el folder o ruta donde encontraremos el
acceso directo Luego click en Install
Se iniciara el proceso de instalacioacuten esperar hasta que la barra verde llegue al
final y hacemos click en Next
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 11 Escuela de Tecnologiacuteas de la Informacioacuten
Seleccionar los dos check para crear los respectivos accesos directos y finish
Propiedades de ventana
1
1
2
3
4
7
5
6
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 12
1) Bloques
2) Propiedades del objeto
3) Aacuterea de desarrollo de diagramas de bloques
4) Escenario
5) Botones de nuevos graacuteficos
6) Elementos del escenario
7) Botones de ejecutar y detener animacioacuten
Pasos
1) Abrir Scratch
2) Click en los bloques control y hacer click en iniciar cuando se presiona la
banderita verde Esto nos permitiraacute iniciar las acciones cuando demos click en
dicho botoacuten
Crear una aplicacioacuten que permita que el gato (figura que se muestra
por defecto cuando se abre el programa) avance 400 pasos pero cada
100 de un sonido
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 13 Escuela de Tecnologiacuteas de la Informacioacuten
3) Click en el grupo de bloques movimiento y arrastrar el bloque mover
encajaacutendolo debajo del bloque al presionar
Y modificamos su valor a 100 Esto nos permitiraacute que el gato avance cien
pasos
4) Ir al grupo de bloques sonido y arrastrar el bloque tocar sonido que permitiraacute
tocar el sonido de un maullido de gato despueacutes de que avanzo 100 pasos
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 14
5) Nos vamos al grupo de bloques control y arrastramos el bloque esperar 1
segundo y lo colocamos debajo del bloque tocar sonido esto permitiraacute esperar
1 segundo antes de iniciar la siguiente accioacuten
6) Repetimos los mismos pasos 4 veces para el gatito se una secuencia de 4
saltos y en cada salto de un maullido quedando el diagrama de bloques de la
siguiente manera
7) Al finalizar colocar el botoacuten detener todo para que la aplicacioacuten deje de
ejecutarse
Si queremos que el gato tome otras direcciones se procedan a utilizar
el bloque girar o apuntar en direccioacuten que se encuentran en el panel
movimiento tomando en cuenta las siguientes direcciones
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 15 Escuela de Tecnologiacuteas de la Informacioacuten
Tomando en cuenta el ejercicio anterior haremos las modificaciones
respectivas para que el gatito (figura que se muestra por defecto
cuando se abre la aplicacioacuten) recorra todo el contorno del escenario
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 16
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Una variable es una estructura de datos referenciada por un nombre que puede
cambiar de contenido durante la ejecucioacuten de un programa
En Scratch podemos crear variables asignarles nombre darle un valor inicial y
modificar el valor durante la ejecucioacuten del programa
Esta etiqueta podemos aprovecharla para hacer caacutelculos con los operadores o
comprobaciones con los bloques de control
En Scratch tenemos un panel especial para las variables que se encuentra en la
parte inferior de todos los grupos de paneles
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 17 Escuela de Tecnologiacuteas de la Informacioacuten
Botoacuten nueva variable
Permitiraacute crear nuevas variables
Cuando creamos una nueva variable aparecen nuevas propiedades
Num1 Es la nueva variable creada
Fijar Permite asignar el valor a una variable
Cambiar Modifica incrementado o disminuyendo el valor de una variable
Mostrar variable Muestra la variable en el escenario
Esconder variable Oculta la variable del escenario
1) Creamos tres variables haciendo click en el grupo de bloques variables y
hacemos click en nueva variable Quedaraacute de la siguiente manera
Crear una aplicacioacuten que permita ingresar dos nuacutemeros La aplicacioacuten
se encargara de sumar dichos valores y mostrar el resultado
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 18
2) Acomodamos las variables de la siguiente manera y hacemos click en el botoacuten
pintar un objeto nuevo para dibujar el siacutembolo ldquo+rdquo y una liacutenea para simular
una suma
3) En la pantalla de dibujo hacemos una cruz con las herramientas y la
insertamos en el escenario hacemos lo mismo con la liacutenea de la suma El
resultado seraacute el siguiente
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 19 Escuela de Tecnologiacuteas de la Informacioacuten
4) Hacemos clic al gato y arrastramos el bloque al presionar
5) Nos vamos al grupo de bloques y seleccionamos el bloque pregunta luego le
cambiamos el texto a ingrese nuacutemero 1 esto haraacute que el gato nos pida el
numero1
6) Luego nos vamos al grupo de bloques variables y hacemos clic en fijar como
opcioacuten seleccionamos numero1 y dentro de fijar arrastramos la el bloque
respuesta que se encuentra en sensores esto haraacute que la respuesta a la
pregunta echa una liacutenea antes se almacene dentro de la variable 1
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Fundamentos de programacioacuten
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 20
7) Hacemos exactamente lo mismo con la segunda variable
8) Luego arrastramos la variable res y dentro del grupo de bloques operadores
arrastramos el bloque correspondiente a la sima y lo arrastramos a la altura de
la variable resultado Luego de control arrastramos detener todo El resultado
final seriacutea el siguiente
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Capiacutetulo
Algoritmos y estructura de
un proyecto moacutevil usando
Android
Objetivos
Utilizar las Sentencias secuenciales y decisioacuten Disentildear una pantalla de una aplicacioacuten moacutevil utilizando las
herramientas de diagramacioacuten y herramientas de control de una aplicacioacuten moacutevil
Instalar una aplicacioacuten moacutevil en un celular o una Tablet
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 22
Estructuras condicionales
Condicionales simples
Son aquellos bloques que evaluacutean una condicioacuten loacutegica Es decir preguntas con
respuestas de la forma siacute o no
Condicionales dobles
En este caso si la respuesta es siacute realizaraacute las instrucciones contenidas en el
bloque Pero si la respuesta es no saltaraacute a las instrucciones que se encuentran
fuera del bloque
Es muy parecido al bloque anterior salvo que en caso de que la respuesta al siacute
sea falsa saltaraacute al siguiente bloque (sino) Y si esta condicioacuten fuese verdadera
realizaraacute las instrucciones del primer bloque e ignoraraacute las del segundo bloque
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales
En la imagen veremos como preguntamos si a es igual a 10 si la condicioacuten es
afirmativa entonces se mostrara el mensaje Son Iguales y si la condicioacuten es
negativa de mostrar el mensaje son diferentes
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 23 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros y ademaacutes pida una letra La
letra es ldquosrdquo entonces se realizara una suma con los valores ingresados pero si es
otra letra los valores se restaran
El diagrama de bloques seria el siguiente
Condicionales anidados
Tenga en cuenta de que estos constructos pueden anidarse para permitir por
ejemplo tres o maacutes condiciones diferentes
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 24
El diagrama de bloques seriacutea el siguiente
Bucles en Scratch
Repetir
Permite repetir una determinada cantidad de veces una o muchas sentencias
todas aquellas que esteacuten dentro del bloque repetir y la cantidad de veces que se
ha especificado dentro del bloque
Crearemos una aplicacioacuten donde una figure pregunte que deporte
praacutecticas dando tres alternativas (1 Fuacutetbol 2 Voacuteley 3 Natacioacuten)
ingresando los nuacutemeros de cada opcioacuten El condicional se encargara de
evaluar cada una de las condiciones y mostrar un mensaje como
respuesta
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 25 Escuela de Tecnologiacuteas de la Informacioacuten
Por siempre
Permite repetir las sentencias infinitamente El programa terminara de repetir las
sentencias cuando se haga clic en el botoacuten rejo que se encuentra en la parte
superior del escenario En el ejemplo repetiraacute infinitamente el texto ldquofundamento
de programacioacutenrdquo y esperara un segundo para que pueda salir nuevamente
Repetir hasta que
Permite repetir un grupo de sentencias hasta que se cumpla una condicioacuten En el
ejemplo repetiraacute infinitamente el texto ldquofundamento de programacioacutenrdquo y esperara
un segundo para que pueda salir nuevamente hasta que a = 10
Crear una aplicacioacuten que permita que el gato vaya de lado a lado y
rebote cada vez que choque con el bode de la venta
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 26
El diagrama de bloques seria el siguiente
Uso de laacutepiz en Scratch
Los bloques de la categoriacutea Laacutepiz se pueden aplicar a un objeto sobre el escenario para
que este pueda realizar trazos o dibujos seguacuten sea el caso
Borrar Permite borrar todos los trazados dibujados en el escenario
Bajar laacutepiz Para comenzar a trazar cuando se desplaza mediante el bloque Mover X
pasos
Subir laacutepiz Para poder moverse sin realizar trazos
Fijar color de laacutepiz a Para definir el color que tendraacute el trazo realizado El color se
elige de una amplia paleta de colores
Fijar color de laacutepiz a XX Permite definir el color del trazo utilizando un nuacutemero
comprendido entre 0 y 200 Por ejemplo el 0 es el rojo el 70 es el verde el 130 es el
azul y el 170 el magenta
Cambiar color del laacutepiz por XX Cambiaraacute el color del trazo por aquel que se
corresponda con el valor anterior sumaacutendole el valor introducido XX
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 27 Escuela de Tecnologiacuteas de la Informacioacuten
Fijar intensidad del laacutepiz a XX Se utiliza para establecer la intensidad del color
elegido en un valor entre 0 y 100 El valor 0 convertiraacute el color en negro y el valor
100 en blanco
Cambiar intensidad de laacutepiz por XX Cambiaraacute la intensidad por la se corresponda
con el valor anterior sumaacutendole el valor introducido XX
Fijar tamantildeo de laacutepiz a XX Permite establecer la anchura del trazo
Cambiar tamantildeo de laacutepiz por XX Para incrementar la anchura del trazo en la
cantidad que se indique
Sellar Esta orden crea una copia del objeto en la posicioacuten actual
Crear un laacutepiz con la herramienta de creacioacuten de graacuteficos y mediante
esta figura dibujar un cuadrado en el escenario
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 28
1) Clic en la herramienta para crear dibujos nuevos
2) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
3) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 29 Escuela de Tecnologiacuteas de la Informacioacuten
4) Click en la herramienta para crear dibujos nuevos
Utilizando el laacutepiz y los bucles
Se creara un ejercicio en el cual dibujaremos un laacutepiz y cuando se
ejecute la aplicacioacuten este dibujara 5 cuadrados uno a continuacioacuten del
otro tal y como se observa en la figura
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 30
5) Crear el dibujo del laacutepiz utilizando las herramientas de dibujo
6) Seleccionamos el grafico creado y creamos el siguiente diagrama de bloques
Crear un juego que simule una carrera de carros tal y como se muestra
en la figura
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 31 Escuela de Tecnologiacuteas de la Informacioacuten
7) Importamos dos figuras de 2 autos
8) Seleccionamos la figura y aceptamos para que la figura pase a la lista de elementos
9) Seleccionamos el primer auto y creamos el siguiente diagrama de bloques
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 32
Se puede observar que en el diagrama de bloques encontramos un bloque que dice
nuacutemero al azar entre 1 y 10 quiere decir que cuando se ejecute la aplicacioacuten el
programa escogeraacute un numero al azar entre el 1 y 10 para que pueda avanzar y
como se encuentra en un bucle las sentencias se repetiraacuten hasta que alguno de los
elementos toque el borde la pantalla Al momento que alguno de ellos toque la
ventana todas las acciones del programa se detendraacuten
Luego seleccionamos el segundo auto y le aplicamos la misma programacioacuten El
diagrama de bloques del segundo auto seria el siguiente
Crear una aplicacioacuten en la cual un auto avanzara hasta que choque
con un aacuterbol al momento que el auto choque con el aacuterbol se veraacute un
mensaje que diga ldquoploprdquo y luego el aacuterbol desapareceraacute
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 33 Escuela de Tecnologiacuteas de la Informacioacuten
1) Hacemos clic al escenario y hacemos clic en la etiqueta fondo
2) Luego hacemos clic en importar y escogemos un fondo para que cambie el escenario
3) Cuando le demos clic en aceptar el fondo se mostrara en el escenario
4) Luego importamos el auto y el aacuterbol
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 34
5) Seleccionamos el auto y creamos su diagrama de bloques
6) Creamos el diagrama de bloques para el auto
Crear un juego que permita mover una barra dibujada e importar una
pelota Cuando inicie la aplicacioacuten la barra se moveraacute impidiendo que
la pelota choque con el lado izquierdo de la pantalla
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 35 Escuela de Tecnologiacuteas de la Informacioacuten
Mit App Inventor
App Inventor es una herramienta uacutetil de programacioacuten con la ventaja adicional de
permitir el desarrollo de aplicaciones para dispositivos moacuteviles que usen el sistema
operativo Android
El App Inventor consta de dos partes principales un moacutedulo Web y el editor de bloques
de Android
1) Modulo Web Aquiacute podemos encontrar 2 cosas la primera es una lista de todos los
proyectos que se han ido desarrollando y han sido guardados ademaacutes es ahiacute donde se
crearan nuevos proyectos En ese mismo modulo se abren los proyectos y se pueden
trabajar la vista de disentildeo de los proyectos
2) Editor de Bloques Es aquiacute donde se construiraacute la loacutegica de la programacioacuten es ahiacute
donde se empleara los conocimientos de algoriacutetmica para programar las aplicaciones
Para los familiarizados con desarrollo de aplicaciones mediante componentes visuales
veraacuten que es un concepto bastante similar
Instalacioacuten App Inventor
App Inventor se ejecuta a traveacutes de un navegador Web por lo tanto el programa
no requeriraacute ser instalado aun asiacute para poder probar las aplicaciones en un
teleacutefono virtual si es necesario descargar e instalar 2 software los cuales son java
y el instalador del emulador del App inventor 2
1) Configuracioacuten de PC
Sistema Operativo
Macintosh (con procesador Intel) Mac OS X 105 106
Windows Windows XP Windows Vista Windows 7 Windows 8
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 36
GNU Linux Ubuntu 8 + 5 + Debiacutean
Navegador
Mozilla Firefox 36 o superior
Nota Si estaacutes utilizando Firefox con el complemento NoScript deberaacute ser
desactivado ya que App Inventor utiliza JavaScript Mira la nota en la
paacutegina de solucioacuten de problemas
Apple Safari 50 o superior
Google Chrome 40 o superior
Microsoft Internet Explorer 7 o superior
Configuracioacuten de Java
El computador debe ejecutar Java 6 (tambieacuten conocido como Java 16) o
superior Para contar con la uacuteltima versioacuten de Java se tiene que descargar de la
paacutegina principal de Java httpjavasuncom y ser instalado tal y como se
muestra a continuacioacuten
1) Se mostraraacute una segunda ventana donde le daremos click en la opcioacuten Java
Clic
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 37 Escuela de Tecnologiacuteas de la Informacioacuten
2) Luego se tiene que aceptar la licencia y seleccionar la versioacuten de java
adecuada para nuestro sistema operativo En el ejemplo se sentildealan los
instaladores para las versiones de Windows x86 y Windows 64 El ejecutable
puede ser el siguiente jdk-7u11-windows-i586exe
Clic
Clic
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 38
3) Ejecute el instalador y acepte de preferencia todas las caracteriacutesticas
ofrecidas Clic en Next
4) Seleccionar funciones opcionales para la instalacioacuten Clic en Next
Clic
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 39 Escuela de Tecnologiacuteas de la Informacioacuten
5) Comenzaraacute a cargar los archivos necesarios para la instalacioacuten
6) En esta ventana se podraacute cambiar la ubicacioacuten de los archivos de instalacioacuten
Clic en Next
7) Se procede a realizar la instalacioacuten
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 40
8) Terminada la instalacioacuten se mostrara la siguiente ventana
9) Adicionalmente se debe configurar la PC para que se reconozca su ubicacioacuten
(Path) por ejemplo en Windows 7 seriacutea Clic derecho en Equipo Propiedades
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 41 Escuela de Tecnologiacuteas de la Informacioacuten
10) En el diaacutelogo Propiedades del Sistema elija la ficha Opciones avanzadas
11) En la ficha Opciones avanzadas de clic en el botoacuten Variables de Entorno
12) En el diaacutelogo Variables de Entorno debe crear la variable Path usando el botoacuten
Nueva si es que no existe
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 42
13) En caso que exista la variable Path elija dicha variable y ediacutetela haciendo uso
del botoacuten Editar
14) Ahora debe modificar o ingresar por primera vez el valor de la variable Path
Debe adicionar la ruta donde se halla el directorio bin del JDK que ha
instalado le recomiendo buscar en CArchivos de programaJava
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 43 Escuela de Tecnologiacuteas de la Informacioacuten
En la figura de arriba la ruta del directorio bin es
CProgram Files (x86)Javajdk170_13bin
Si en el valor de la variable Path ya existe un valor coacutepielo al bloc de notas
(Notepad) o a un editor cualquiera Por ejemplo si tengo el siguiente valor
CArchivos de programaIDM Computer SolutionsUltraEdit-32
Le agrego la ruta anterior de la siguiente manera
ltRuta anteriorgt ltRuta del bin del JDK del Javagt
En el ejemplo seriacutea
Ahora debe pegar el contenido del editor y reemplazar el valor de la variable
como se aprecia en la figura de abajo
Para finalizar de clic en el botoacuten Aceptar
Descarga e instalar el software necesario para la instalacioacuten
del emulador del App Inventor
1) Ingresar a la paacutegina httpappinventormiteduexploreai2windowshtml
2) Hacer click en el viacutenculo download the installer
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 44
Una vez descargado el software encontraran el siguiente icono el cual tiene que ser
instalado
Para realizar la instalacioacuten los se tiene que dar doble click a icono de
AppInventor_Setup_Installer_v_2_2 que se ha descargado Se mostrara la
siguiente ventana que le daremos clic en Next
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 45 Escuela de Tecnologiacuteas de la Informacioacuten
Aceptamos las licencias de
uso y clic en I Agree
Se mostraraacute la ruta donde el
programa seraacute instalado Clic
en Next
Se mostraraacute la ubicacioacuten del
acceso directo Clic en
Install
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 46
Teleacutefono
Todas las aplicaciones creadas en el App Inventor pueden ser ejecutados en cualquier
tipo de moacutevil pero al momento de desarrollar el software y ejecutar las pruebas no
todos los moacuteviles seraacuten reconocidos A continuacioacuten mostramos la lista de compantildeiacuteas
cuyos moacuteviles son compatibles en el desarrollo en el Mit App Inventor
Google Nexus S Nexus One ADP1 ADP2 Ion
T-Mobile G1 myTouch 3G
Motorola Droid
O hardware similar en otras compantildeiacuteas
Sea cual sea el modelo que tuacute tienes el teleacutefono debe tener instalada una
tarjeta SD o de lo contrario no funcionaraacute con App Inventor
App Inventor tambieacuten trabaja con muchos otros teleacutefonos que cuentan con Android
incluyendo modelos de HTC LG Samsung y Dell pero en muchos casos se tendraacute que
descargar e instalar software adicional desde el sitio del fabricante Puedes encontrar los
detalles de algunos de estos modelos en la tabla en la parte inferior de la paacutegina
configuracioacuten del teleacutefono Incluso si tu teleacutefono no estaacute en la lista todaviacutea es probable
que trabaje con App Inventor Consult con el Foro de Usuarios en la seccioacuten Coacutemo
instalar y conectar el teleacutefono para obtener el consejo de otras personas que puedan
estar usando el mismo modelo de teleacutefono
Configuracioacuten del teleacutefono para que sirva de emulador de aplicaciones
Para tener el teleacutefono listo para trabajar con App Inventor sigue estos pasos
1) Pulsa el botoacuten de Inicio para ir a la pantalla principal del teleacutefono
2) Pulse el botoacuten Menuacute selecciona Ajustes y luego Aplicaciones
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 47 Escuela de Tecnologiacuteas de la Informacioacuten
3) Aseguacuterate de activar la casilla de verificacioacuten en Oriacutegenes desconocidos Esto permite
a tu moacutevil recibir aplicaciones de fuentes diferentes al Market
4) Pulsa sobre Desarrollo
5) Aseguacuterate que las casillas de verificacioacuten tanto de Depuracioacuten USB como de Pantalla
activa queden marcadas
Si el teleacutefono estaacute bloqueado con alguacuten coacutedigo a clave desbloquear Ahora coger el cable
USB y conectar el teleacutefono al ordenador Tras unos instantes en ocasiones largos
apareceraacuten dos mensajes de estado en el aacuterea de notificaciones en la parte superior de
la pantalla
Conectado por USB significa que el teleacutefono estaacute conectado al ordenador
Dispositivo de depuracioacuten USB permite a App Inventor controlar el teleacutefono desde tu
ordenador
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 48
Su tu moacutevil le ofrece la opcioacuten Activar almacenamiento USB no seleccionar el botoacuten para
activarlo ya que en realidad necesitamos el dispositivo para ejecutar la aplicacioacuten que
desarrollemos y no para almacenar archivos en su memoria SD
Elementos de programacioacuten en App Inventor
Ingresando a App Inventor
1) Ingresar a la direccioacuten web
httpai2appinventormitedu
Se mostraraacute una ventana en la cual se tendraacute que ingresar su direccioacuten de
correo y su contrasentildea de GMail
Una vez que ingrese al sistema se mostraraacute la siguiente pantalla
Hacemos clic en la opcioacuten Start New Project
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 49 Escuela de Tecnologiacuteas de la Informacioacuten
Se mostraraacute una pequentildea ventana donde se colocara el nombre del nuevo
proyecto y le daremos click en ok
Se mostrara la siguiente ventana
En la ventana mostrada en la imagen anterior es donde se disentildeara la vista de
la aplicacioacuten En esta parte no se necesitara nociones de programacioacuten ya que
el disentildeo de la aplicacioacuten se creara por medio de los controles que trae el app
inventor que seraacuten arrastrados al aacuterea de disentildeo A continuacioacuten se explican
las partes de la ventana de disentildeo
1) Se llama paleta de herramientas y es donde encontraremos todas las
herramientas de disentildeo tales como cuadro de texto listas etiquetas
botones etc las cuales seraacuten arrastrado al aacuterea de disentildeo por medio del
mouse
2) El visor de la pantalla Simula la apariencia de la pantalla de un moacutevil la
cual almacenara todos los elementos arrastrados desde la paleta de
herramientas alliacute es donde se procederaacute a crear la vista disentildeo de la
aplicacioacuten
3) Componentes en eacutel se muestran todos los elementos que han sido
colocados en el visor de pantalla ademaacutes se mostraran los nombres de
cada uno de los elementos y si se desea eliminar o renombrar un
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 50
elemento en la parte inferior de esta paleta se encuentran los botones
delete o rename respectivamente
4) Media muestra la lista de las imaacutegenes o sonidos que se utilizaran en el
proyecto Para agregar elementos a esta paleta se tiene el botoacuten upload
file el cual permitiraacute subir elementos a dicha paleta
5) Propiedades Mostrara todas las propiedades de todos los elementos que
se han colocado en el visor de pantalla Estas propiedades se mostraran
cuando se le haga click a cada uno de los elementos colocados en el visor
Paleta de herramientas
Es donde encontraremos todas las herramientas de disentildeo
de las pantallas de los moacuteviles
Componentes
Es donde se encuentra todos los elementos que se van
insertando en la pantalla de disentildeo de la aplicacioacuten
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 51 Escuela de Tecnologiacuteas de la Informacioacuten
Propiedades
Es donde configuramos las propiedades de cada uno de los
elementos que se van insertando en el disentildeo de las
ventanas de la aplicacioacuten
Con la ayuda del instructor crear una aplicacioacuten que permita utilizar las
herramientas como son los label layout e image en donde mostraras
tus datos personales El resultado final de la aplicacioacuten en el moacutevil seraacute
el siguiente
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Algoritmos y estructura de un proyecto moacutevil usando Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 52
El disentildeo en la interface de App Inventor seraacute de la siguiente manera
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Capiacutetulo
Multimedia ndash audio y
video con Android
Objetivos
El participante podraacute reconocer y diferenciar cada una de las partes de un diagrama de bloques configurar los diferentes tipos de emulador en el moacutevil
Reconocer las herramientas multimedia del App Inventor Crear aplicaciones que permitan reproducir audio y video
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 54
Diagrama de bloques
Para programar en App Inventor se necesita de la loacutegica de programacioacuten es decir los
algoritmos App Inventor cuenta con bloques que interpretan estas sentencias
algoriacutetmicas estos bloques los podemos identificar con unos textos en la parte superior
que dice Call Set o Def (abreviatura de define) los cuales representan una accioacuten a
realizar Los bloques del App Inventor son sentencias que las podemos encontrar en
colores Azul verde rojo fucsia entre otros Los colores de los bloques se muestran a
continuacioacuten
A continuacioacuten Mostramos algunos de los bloques de coacutedigo tales como declaracioacuten de
variables procedimientos sentencias condicionales o bucles entre otros
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 55 Escuela de Tecnologiacuteas de la Informacioacuten
Crear una aplicacioacuten que permita ingresar tu nombre en una caja de texto La aplicacioacuten
te responda con un saludo ldquoHola hellip (el nombre que se ingresoacute) Me alegra que esteacutes
Aquiacute ldquo
Para hacer el disentildeo tener en cuenta que la diagramacioacuten esta echa a base de layouts El
disentildeo seria el siguiente
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 56
El diagrama de bloques quedariacutea de la siguiente manera
Variables
Las variables son espacios en memoria que almacenan un valor sea numeacuterico
cadena booleano etc Para asignarle valores a una variable se realiza de la
siguiente manera
En las imaacutegenes anteriores tenemos una variable de nombre total_alumnos que
almacena un valor numeacuterico luego tenemos una variable de nombre alumnos que
es de arreglo (en el caso de app inventor es tipo lista) y la tercera imagen
muestra como se le antildeaden elementos a la lista
Eventos
Los eventos son acciones impulsadas por el usuario para que los programas
respondan las peticiones de los usuarios como ejemplo general tenemos el
conocido evento click que realizara una accioacuten al momento que se haga un click
encima de un control
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 57 Escuela de Tecnologiacuteas de la Informacioacuten
En la imagen anterior se pueden observar algunos eventos tales como Shaking
que es un evento que lanza el aceleroacutemetro AfterPicture es un evento que dispara
la caacutemara al tomar una fotografiacutea el ya conocido click que dispara al hacer click
generalmente sobre un botoacuten el evento initialize que se dispara al momento que
se inicia la aplicacioacuten el evento LostFocus que permite que una caja de texto
realiza una acciona al momento que el cursor la focalice o el evento
ScreenOrientation que se dispara al momento que la pantalla cambia de
orientacioacuten etc
Sentencias condicionales
Una estructura condicional permite evaluar una a mas condiciones Las sentencias
condicionales en App Inventor son if-then if-then-else while y choose
En todas las imaacutegenes mostradas se puede observar coacutemo se tiene el test para
encajar las condiciones En el caso de las dos primeras despueacutes de evaluar la
condiciones se podraacute encajar cada uno de los proceso en caso al condicioacuten sea
verdadera o falsa lo mismo sucede con el while la cual tiene el test para la
condicioacuten y si la condicioacuten cumple se procederaacute a realizar el bucle (do) y en el
caso del choose (select-case) es un condicional de muacuteltiples opciones
Crear una aplicacioacuten que permita ingresar dos nuacutemeros mediante dos
cajas de texto y estos muestre la suma de los dos nuacutemeros La
aplicacioacuten quedara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 58
El disentildeo de la aplicacioacuten seriacutea el siguiente
El diagrama de bloques seriacutea el siguiente
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 59 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
Crear una aplicacioacuten que muestre la imagen de una bola maacutegica la cual
le haraacutes preguntas escribieacutendolas en una caja de texto y esta te
responderaacute La aplicacioacuten en el moacutevil se vera de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 60
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 61 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es de la siguiente manera
El diagrama de bloques seria el siguiente
Crear una aplicacioacuten que permita ingresar 2 nuacutemeros ademaacutes permita
seleccionar el tipo de operacioacuten que se realizara con los nuacutemeros
ingresados La aplicacioacuten en el moacutevil tendraacute la siguiente apariencia
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 62
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 63 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear un juego que muestre dos nuacutemeros al azar y pida el resultado de
la multiplicacioacuten de dichos nuacutemeros si la respuesta es correcta se
mostrar el mensaje ldquomuy bien acertasterdquo y si fallas se mostrar el
mensaje ldquofallaste sigue estudiandordquo cada uno con su respectiva
imagen El programa se mostrara de la siguiente manera en el moacutevil
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 64
Bucles o sentencias repetitivas
Un bucle o sentencia repetitiva es aquella sentencia que se ejecutar muchas veces de
acuerdo a la especificacioacuten de la condicioacuten de termino del bucle El App Inventor tenemos
los siguientes bucles while for range y foreach
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 65 Escuela de Tecnologiacuteas de la Informacioacuten
En las imaacutegenes tenemos la sentencia while que procederaacute a realizar el bucle siempre y
cuando cumpla la condicioacuten del test En el segundo y tercer caso el for each tiene un
liacutemite es decir se utiliza cuando se sabe cuaacutendo terminara el bucle y el cuarto es el
foreach que realizara las iteraciones sobre los elementos de una lista
Disentildeo de la primera ventana seraacute el siguiente
Crear una aplicacioacuten que muestre una pelotita y 4 botones que
permitan mover a la pelotita con las teclas izquierda derecha arriba
abajo La aplicacioacuten tendraacute el siguiente disentildeo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 66
Diagrama de bloques
Disentildeo de la segunda ventana Tener en cuenta la configuracioacuten del reloj
El diagrama de bloques es el siguiente
Visor de sitios web ndash webviewer
Se puede cargar una paacutegina web en una aplicacioacuten en App Inventor utilizando
componentes WebViewer Para ello simplemente arrastramos el componente
WebViewer al disentildeador y en la propiedad HomeUrl del WebViewer se tiene que colocar
a la paacutegina web que queremos ver cuando se inicia el app para arriba Se tiene que
tener en cuenta que la inclusioacuten de un protocolo de red como http o https es importante
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 67 Escuela de Tecnologiacuteas de la Informacioacuten
de lo contrario la paacutegina web no se cargaraacute Si intenta navegar en wwwhotmailcom no
va a navegar si es que no pone httpwwwhotmailcom
Podemos establecer el HomeUrl ya sea en la ventana del visor o el disentildeador o el
editor de bloques
El disentildeo se muestra a continuacioacuten
Se creara un cuadro de texto donde el usuario puede especificar una
direccioacuten URL y pulse el botoacuten Ir a cargar la paacutegina web Tambieacuten
contaremos con los botones Anterior y Siguiente para navegar por las
paacuteginas Asiacute es como nuestra aplicacioacuten se veriacutea asiacute
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 68
Editor de bloques
Ademaacutes cuando se pulse el botoacuten anterior podremos retorcer a la paacutegina que se a
visitado anteriormente y cuando pulsemos el botoacuten siguiente podremos visitar la paacutegina
que se ha retrocedido Ademaacutes el botoacuten siguiente permaneceraacute desactivado si es que no
hemos presionado el botoacuten anterior y el botoacuten anterior permaneceraacute desactivado si es
que no hemos ingresado en maacutes de dos paacuteginas
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 69 Escuela de Tecnologiacuteas de la Informacioacuten
Sonidos y videos
Sound en App Inventor-El componente Sound es el que usa App Inventor para
reproducir un archivo de audio o tambieacuten puede reproducir la vibracioacuten del moacutevil Sound
es un componente no visible que reproduce archivos de sonido y la vibracioacuten para el
nuacutemero de milisegundo que se especifican en el Editor de bloques Para utilizar sonidos
estos deben ser especificados y subidos al momento de realizar el disentildeo de la pantalla
El disentildeo seraacute el siguiente
El diagrama de bloques es el siguiente
Crear una aplicacioacuten donde se mostrara una imagen de un gatito que
mauacutella cuando la tocamos Para construir tendraacutes una imagen de un
gatito y el sonido de un maullido(Los archivos seraacuten proporcionados
por el instructor)
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 70
Video
VideoPlayer en App Inventor (Reproductor de viacutedeo de App Inventor) Es
el componente VideoPlayer de App Inventor que sirve para reproducir archivos de
viacutedeo Aparece en el programa como un rectaacutengulo que al pulsarlo aparecen los
controles multimedia el play pausa saltar hacia delante saltar hacia atraacutes El
programa que hagamos puede controlar la llamada al Inicio Pausa y los meacutetodos
SeekTo
Los formatos de viacutedeo que soporta son archivos que soporta Windows Media
Player como
WMV
3GPP
3GP
MPEG-4 o MP4
Crear una aplicacioacuten que permita controlar el tamantildeo de la
reproduccioacuten de viacutedeo en una aplicacioacuten utilizando Ancho del
componente Reproductor de viacutedeo altura y caracteriacutesticas de pantalla
completa El resultado de la aplicacioacuten en el moacutevil es la siguiente
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 71 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo de la vista de disentildeo queda de la siguiente manera
Antes de iniciar con el Diagrama de bloques se deben de cargar dos videos a su
vez asignarle los videos a cada uno de los controles VideoPlayer
El diagrama de bloques queda se la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 72
Ahora crearemos los bloques correspondientes al clic de cada uno de los botones
que nos permitiraacuten cambiarle el tamantildeo a los videos
Los bloques deben de quedar de la siguiente manera
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 73 Escuela de Tecnologiacuteas de la Informacioacuten
Ahora se procederaacute a crear los bloques de coacutedigo que permitiraacuten ver los videos en
modo pantalla completa
Los bloques quedaran de la siguiente manera
Diagrama de bloques final
Reconocimiento de voz
SpeechRecognizer
Use el componente SpeechRecognizer para escuchar el habla de usuario y convertir el
sonido hablado en texto usando la funcioacuten de Android de reconocimiento de voz
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 74
Propiedades
Result El uacuteltimo texto producido por el reconocedor
Meacutetodos
GetText () Llame a este meacutetodo para solicitar al usuario que hable y convertir su voz
en texto Utilice el evento AfterGettingText cuando el resultado esteacute disponible
Eventos
AfterGetting (resultado de texto) Ocurre despueacutes de que el reconocedor ha
producido texto El argumento es el resultado del texto producido
BeforeGettingText () Ocurre justo antes de la llamada al reconocedor
El disentildeo es el siguiente
Crear una aplicacioacuten que permita escuchar lo que hablas y lo escriba
en el moacutevil La aplicacioacuten en el moacutevil se vera de la siguiente manera
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 75 Escuela de Tecnologiacuteas de la Informacioacuten
El diagrama de bloques es el siguiente
TextToSpeech
Es un componente de texto a voz para que el dispositivo hable un texto Para que
este componente trabaje el dispositivo debe tener el TTS extended service
app de Eyes-Free Project instalado Puede descargarlo desde
httpcodegooglecompeyes-freedownloadslist
Este componente tiene propiedades debes establecer para definir el idioma Estas
propiedades utilizan coacutedigos de tres letras para especificar el idioma y el paiacutes en el
que se habla esa lengua Por ejemplo puede especificar Ingleacutes Britaacutenico o Ingleacutes
EEUU Para Ingleacutes Britaacutenico el coacutedigo de idioma es eng y el coacutedigo de paiacutes
es GBR mientras que para EEUU El coacutedigo de idioma es eng y el coacutedigo de paiacutes
es EEUU La lista completa estaacute abajo
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 76
Propiedades
Paiacutes- El coacutedigo de paiacutes para la produccioacuten del habla
Idioma-El coacutedigo de idioma para la produccioacuten del habla
Resultados-Details to come
Meacutetodos
Speak (Mensaje de texto)
Habla el texto dado
Eventos
AfterSpeaking (resultado de texto)- Ocurre despueacutes de que el texto se
habla El argumento es el resultado del texto que fue producido
BeforeSpeaking ()- Ocurre antes el texto se habla
Crear una aplicacioacuten en la cual escribas y el moacutevil hable lo que el
usuario escribe
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 77 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Herramienta Clock
La herramienta clock puede adoptar muchas funciones como medidor de tiempos
contador de eventos o como cualquier otro segmento de coacutedigo uacutetil Con la herramienta
clock se puede crear desde una aplicacioacuten uacutetil para contabilizar tiempo hasta un
cronoacutemetro un temporizador es una sencilla aplicacioacuten Android que puedes construir
con App Inventor en pocas horas manipulando el tiempo
Crear una aplicacioacuten que permita crear un juego en el cual se tendraacute
que atrapar una pelota por cada acierto que tengamos aumentara un
punto en el contador de la parte inferior y el moacutevil vibrara pero si
cuando se quiere atrapar fallas el contador de fallos aumentara La
aplicacioacuten se vara de la siguiente manera
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Multimedia ndash audio y video con Android
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 78
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Android Kids
Paacutegina 79 Escuela de Tecnologiacuteas de la Informacioacuten
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Capiacutetulo
Sensores
Objetivos
Reconocer los sensores con los que cuenta el
moacutevil
Crear aplicaciones con usando los distintos
sensores con los que cuenta un moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 82
Sensores
Sensor de Aceleracioacuten (Aceleroacutemetro)
Este componente permite detectar la aceleracioacuten del moacutevil cuando este tiene un
movimiento Al momento de capturar la aceleracioacuten lo hace en tres dimensiones
La aceleracioacuten se mide en unidades del SI (m s 2) Si el dispositivo no estaacute en
movimiento y solo esta recostado en su espalda la aceleracioacuten Z seraacute de
aproximadamente 98
El componente produce tres valores
XAccel Positiva cuando el dispositivo se inclina a la derecha (es decir su lado
izquierdo se eleva) y negativo cuando el dispositivo se inclina a la izquierda
(su tamantildeo derecho se levanta)
YAccel Positiva cuando se levantoacute la parte inferior y negativo cuando su
parte superior se eleva
ZAccel Positivo cuando la pantalla esteacute orientada hacia arriba y negativos
cuando la pantalla esteacute orientada hacia abajo
Propiedades
Available Indica si el aceleroacutemetro estaacute presente en el dispositivo Android
Enabled Si esta en true indica que el aceleroacutemetro estaacute activo
XAccel La aceleracioacuten en el X-dimensioacuten
YAccel La aceleracioacuten en la dimensioacuten Y
ZAccel La aceleracioacuten en la dimensioacuten Z
MinimumInterval Intervalo de tiempo miacutenimo entre el teleacutefono y la
vibracioacuten del mismo
LocationSensor
Este componente proporciona la localizacioacuten del dispositivo androide siempre y
cuando este activado el uso del GPS en el moacutevil y haciendo uso de esta sentildeal es
que funciona el LocationSensor
LocationSensor es un componente que muestra informacioacuten sobre la localizacioacuten
incluyendo longitud latitud altitud y la direccioacuten ademaacutes este control es un
control no visible es decir no se muestra fiacutesicamente en el equipo Este
componente tambieacuten puede proporcionar geo codificacioacuten es decir la conversioacuten
de una direccioacuten dada a una latitud y una longitud dada
Para poder funcionar el componente debe tener su Enabled propiedad se
establece en true ademaacutes para que funcione alguna aplicacioacuten echa con sensores
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Nombre del moacutedulo
Paacutegina 83 Escuela de Tecnologiacuteas de la Informacioacuten
esta tendraacute que ser empaquetada y probada en un dispositivo moacutevil real y no en
un emulador ademaacutes el moacutevil debe tener todos los permisos y configuraciones de
GPS activados
OrientationSensor
Este control permite determinar la orientacioacuten espacial del moacutevil
Un sensor de orientacioacuten es un control no visible que da de resultado tres valores
a) Rollo 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo estaacute inclinado hacia arriba sobre su lado izquierdo y la
disminucioacuten de -90 grados cuando el dispositivo se inclina para arriba sobre su
lado derecho
b) Pitch 0 grados cuando el dispositivo esteacute nivelada aumentando a 90 grados
como el dispositivo se inclina por lo que su parte superior estaacute apuntando
hacia abajo luego bajando a 0 grados ya que se dio la vuelta Del mismo
modo ya que el dispositivo se inclina por lo que sus puntos inferiores hacia
abajo el tono disminuye hasta -90 grados luego aumenta a 0 grados ya que
se volvioacute todo el camino
c) Azimut 0 grados cuando la parte superior del dispositivo estaacute apuntando al
norte 90 grados cuando se estaacute apuntando al este 180 grados cuando se estaacute
apuntando al sur 270 grados cuando se estaacute apuntando al oeste
Crear una aplicacioacuten que tenga una pelotita y esta pelota se mueva
conforme se va moviendo el moacutevil haciendo uso del sensor de
orientacioacuten La aplicacioacuten se veraacute se la siguiente manera en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 84
El disentildeo es el siguiente
El diagrama de bloques es el siguiente
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Nombre del moacutedulo
Paacutegina 85 Escuela de Tecnologiacuteas de la Informacioacuten
El disentildeo seraacute de la siguiente manera
El diagrama de bloques seraacute de la siguiente manera
Crear una aplicacioacuten la cual permita tener una bruacutejula la cual se
orientara utilizando el sensor de orientacioacuten esta bruacutejula siempre
buscara el norte y la imagen se moveraacute conforme se mueva el moacutevil
La aplicacioacuten tendraacute la siguiente apariencia en el moacutevil
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
Nombre del curso
Escuela de Tecnologiacuteas de la Informacioacuten Paacutegina 86
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-
PROHIBIDA SU REPRODUCCIOacuteN Y VENTA
SIN LA AUTORIZACIOacuteN CORRESPONDIENTE
ANtildeO DE EDICIOacuteN 2014
- Portada
- TOC
- Capiacutetulo 1 Fundamentos de programacioacuten
- Capiacutetulo 2 Algoritmos y estructura de un proyecto moacutevil usando Android
- Capiacutetulo 3 Multimedia ndash audio y video con Android
- Capiacutetulo 4 Sensores
-