Unidad 1

Alfabetización digital y programación de

aplicaciones 
 

Los estudiantes utilizan los medios que tienen a su alcance para acceder al conocimiento. Gran parte
de la información que usan para resolver las tareas escolares es obtenida de Internet.

No importa el dispositivo desde el cual acceda, lo importante es que el estudiante adquiera la

capacidad crítica para filtrar, valorar, sintetizar y construir nueva información.

Para lograr este objetivo, los alumnos tienen que dominar las TIC. La alfabetización digital es
relevante para acceder al saber, construir la identidad, relacionarse y acceder al mundo del trabajo.

El potencial de la programación, como una de las ramas de la alfabetización digital, aumenta cuando
se considera una herramienta transversal que nos permite realizar nuestras propias creaciones,
desarrollar el pensamiento lógico, la capacidad de abstracción y de resolución de problemas.

En este contexto, la programación de aplicaciones de celulares tiene múltiples utilidades en el ámbito

escolar, dado que puede mediar el proceso de enseñanza- aprendizaje de cualquier materia.

Las apps creadas se pueden utilizar para resolver problemas concretos de la vida real y se pueden
compartir fácilmente, lo cual incrementa la motivación del estudiante, se incorpora a su cotidianeidad
y trasciende las puertas del aula.

Introducción a la programación de aplicaciones

En el siguiente navegable, conoceremos el sitio web de App Inventor, la plataforma para crear
aplicaciones que utilizaremos en este curso. ¡Los invitamos a recorrerlo! 

          

Configuración de App Inventor

Podemos comenzar a utilizar App Inventor desde el navegador. Pero si queremos hacer “pruebas en

vivo” de las aplicaciones mientras las vamos diseñando, tendremos que conectar nuestro dispositivo.
Para eso, contamos con las siguientes alternativas:
  Opción 1: Conectar el teléfono o la tablet a través de WiFi.
 Opción 2: Si no contamos con un dispositivo Android, podremos utilizar el emulador.
 Opción 3: Si no tenemos conexión WiFi, podemos conectar la computadora al dispositivo
mediante un cable USB. Esta es lo opción menos recomendada, sobre todo si
trabajamos con S. O. Windows.

A continuación, presentaremos el procedimiento que deben realizar para utilizar alguna de las tres
alternativas.

Lo primero que debemos hacer es verificar los dispositivos móviles con los que contamos y el tipo de
conexión a Internet que utilizamos.

Opción 1: Conectar el teléfono o la tablet a través de WiFi

Debemos instalar la aplicación App Inventor Companion en nuestro dispositivo (se encuentra

disponible en Google Play Store).

  

     Esta es la forma más fácil y recomendada de probar nuestras aplicaciones

     “en  vivo”. Es la que debemos elegir si contamos con los requisitos.

Los pasos que debemos seguir son los siguientes:

Paso 1: Descargamos e instalamos la aplicación MIT AI2 Companion en nuestro teléfono o tablet.

Paso 2: Conectamos la computadora y el dispositivo a la MISMA red WiFi.

Paso 3: Abrimos un proyecto de App Inventor y elegimos "Conectar"-"AI Companion" en el menú

superior de AI2:

  

                                                  Opción que debemos seleccionar del menú superior de MIT App
Inventor 2 

 
En nuestra PC, aparecerá una ventana con un código QR. Paralelamente, debemos iniciar en
nuestro dispositivo la aplicación MIT App Companion. Hacemos clic en el botón "Escanear
código QR" y escaneamos el código en la ventana de App Inventor.

                                                  

                                                            Códigos que posibilitan la conexión con nuestra aplicación 

En unos segundos, deberíamos ver la aplicación que estamos creando en el dispositivo. Se

actualizará a medida que realicemos cambios en su diseño y en la programación.

Si tenemos problemas para escanear el código QR, también podemos escribir el código que aparece
en pantalla en el área de texto de AI Companion  y luego hacer clic en el botón naranja  "Conectar
con código".

Opción 2: Utilizar el emulador

Si no contamos con un dispositivo Android, debemos instalar en nuestra computadora

el software para poder utilizar el emulador en pantalla.

La instalación que elijamos dependerá del Sistema Operativo de nuestra PC (Mac OS X, Windows o
GNU/Linux). En todos los casos, los pasos para la instalación del emulador son los mismos:

Paso 1: Descargar e instalar el software emulador de la aplicación Inventor. Si necesitan ayuda,

pueden consultar el  documento anexo “Instalación del emulador para los distintos Sistemas
Operativos”.

Paso 2: Iniciamos aiStarter (Windows y GNU/Linux solamente).

Usar el emulador o el cable USB requiere el uso de un programa llamado aiStarter. Este programa
es el asistente que permite que el navegador se comunique con el emulador o el cable USB. El
programa aiStarter se instala cuando instalamos el paquete de instalación de App Inventor.
En una Mac, aiStarter se iniciará automáticamente cuando iniciemos sesión en nuestra cuenta y se
ejecutará de manera invisible en segundo plano.

En Windows, habrá accesos directos a aiStarter desde el escritorio, desde el menú Inicio,

desde Todos los programas y desde la carpeta de Inicio. Si deseamos utilizar el emulador con App
Inventor, debemos iniciar manualmente aiStarter en nuestra computadora cuando iniciemos sesión.
Podemos iniciar aiStarter haciendo clic en el ícono en su escritorio o usando la entrada en su menú
de inicio. Veremos que aparece una ventana como la siguiente:

          

                                                 Ventana que indica que aiStarter se inició con éxito

 Paso 3: Abrimos un proyecto de App Inventor y lo conectamos al emulador desde el

menú Conectar de App Inventor, luego hacemos clic en la opción Emulador.

                                                                   Opción que debemos seleccionar del menú Conectar 

Recibiremos un aviso que dice que el emulador se está conectando. Esta operación  puede tardar
unos minutos. El emulador aparecerá, inicialmente, con una pantalla negra vacía, tendremos que
esperar unos instantes hasta que el dispositivo emulado termine de preparar su tarjeta SD. Cuando
esté conectado, el emulador mostrará la aplicación que tenemos abierta en App Inventor.
 

Opción 3: Conectar mediante el cable USB

Si no contamos con una conexión inalámbrica a Internet, debemos instalar el software en nuestra
computadora para que pueda conectarse al dispositivo Android a través de USB. 

   

 La opción de conexión USB puede ser complicada, especialmente en entorno Windows, por
que utilizaremos esta opción como último recurso.

Paso 1: Instalamos el software de la aplicación Inventor. Si necesitan ayuda, pueden consultar el 

documento anexo “Instalación del emulador para los distintos Sistemas Operativos”. 

Paso 2: Descargamos e instalamos la aplicación MIT AI2 Companion en nuestro  dispositivo con

Android. 

Paso 3: Iniciamos aiStarter (Windows y GNU/Linux solamente) en una Mac; aiStarter se iniciará

automáticamente cuando iniciemos sesión en nuestra cuenta y se ejecutará de manera invisible en
segundo plano.

Paso 4: Debemos activar la depuración USB. Para eso, en el dispositivo, iremos a Configuración
del sistema,Opciones de desarrollador, los encendemos y nos aseguramos de que esté permitida
la "Depuración de USB".

En la mayoría de los dispositivos con Android 3.2 o versiones anteriores, podemos encontrar esta
opción enConfiguración> Aplicaciones> Desarrollo.

En Android 4.0 y versiones posteriores, la misma se encuentra en Configuración> Opciones de

desarrollador.

Importante: en Android 4.2 y versiones posteriores, las opciones de desarrollador están ocultas de
manera predeterminada. Para que estén disponibles, debemos ir a Configuración> Acerca del
teléfono y tocamosNúmero de compilación siete veces. Regresamos a la pantalla anterior y las
“opciones de desarrollador” estarán visibles. Ahora podremos activar la "depuración de USB". 

Paso 5: Conectamos el dispositivo Android a la computadora mediante el cable USB. Es importante

que verifiquemos que se haya conectado como un “Dispositivo de almacenamiento masivo”.

En las versiones de Android 4.2.2 en adelante, el dispositivo nos mostrará el mensaje “¿Permitir la
depuración de USB?”, al cual respondemos seleccionando OK. Este cartel solo aparecerá la primera
vez que realicemos la conexión.

Podemos verificar si la conexión fue realizada con éxito en la siguiente página de prueba:
                 http://appinventor.mit.edu/explore/ai2/setup-device-usb.html

La página mostrará un mensaje que informa el estado de la conexión. En el caso de encontrar

alguna falla, deberán volver a realizar el procedimiento desde el principio; de lo contrario, no podrán
hacer pruebas en vivo de las apps que vayan creando. 

Visión general de las interfaces de usuario y sus características

Diseñador

La interfaz de diseñador de App Inventor se encuentra organizada de la siguiente manera: 

Vista de la interfaz Diseñador

En esta ventana, podremos organizar visualmente los componentes de la aplicación. También,

estableceremos colores, fuente, tamaño, valores predeterminados, alineación, etc. Las propiedades
disponibles dependerán del componente utilizado.

Los componentes se organizan en categorías según su funcionalidad.

A continuación, describiremos las categorías que utilizaremos para el desarrollo de los ejercicios de
este curso. 

 
Categoría Componentes disponibles Funcionalidad

Componentes que
Interfaz
permiten la
de
interacción con el
usuario
usuario.

 
 Elementos que

permiten organizar
Disposición
los objetos en la

aplicación.

Permite la

Medios utilización de

objetos multimedia.

 
 Componentes de

interacción con las

Social redes sociales y

herramientas de

comunicación.

Permite guardar

datos de la

aplicación en bases
Almacenamiento
de datos en el

dispositivo o en un

servidor en la web.
 

Permite la

comunicación entre

Conectividad nuestra app y los

componentes

externos.

 
 

Bloques

Desde la interfaz Bloques, podremos programar el comportamiento que tendrán los componentes de la

aplicación.

Al seleccionar cada objeto, se desplegará una ventana que nos mostrará los bloques sugeridos. Luego, podremos
modificar las variables que cada uno utiliza para obtener los resultados que deseamos.

                                                                                        Vista de la interfaz Bloques

 Creación y personalización de la interfaz de una aplicación

¡Empezamos a programar!

El primer paso para crear una aplicación es ingresar en nuestra cuenta. Para eso, nos dirigimos a la
página deApp Inventor, introducimos nuestros datos y configuramos el idioma en Español.
  

                                                            Desde el menú, podremos cambiar el idioma a Español

Del menú Proyectos, seleccionamos Comenzar un nuevo proyecto y tendremos que completar con el nombre
del proyecto. 

     Importante: El nombre elegido no puede tener espacios ni caracteres especiales.

Luego, se abrirá la interfaz Diseñador del programa.

 
  

                                                                Opciones que presenta el menú Proyectos

Antes de comenzar, debemos pensar cuáles son los elementos que necesitaremos para que
funcione nuestraapp. Para ello, pensemos qué es lo que debe hacer exactamente nuestro programa.

Tradicionalmente, el primer proyecto de los programadores se llama ¡Hola, mundo! Se trata de un

programa sencillo que nos devuelve el texto “Hola, mundo” cuando presionamos un botón.  Este
ejercicio nos permitirá conocer las funciones básicas de App Inventor y su personalización. 

Los elementos que necesitamos son los siguientes:

 el componente Screen1 (pantalla de fondo) que está presente en todas las aplicaciones.

 una etiqueta, para mostrar el texto que le indiquemos.
 un botón para que el usuario presione y el programa responda. 

Screen1

Al seleccionar el componente Screen1, podremos modificar las siguientes características de la

pantalla de nuestra app.
  Título: Título de la aplicación, aparece en la parte superior de la pantalla.
 Disposición horizontal: nos permitirá establecer la alineación horizontal por defecto de los
componentes: izquierda, centro, derecha.
 Disposición vertical: ídem anterior en sentido vertical. Podremos seleccionar entre arriba,
centro y abajo.
 Color de fondo: podremos seleccionar un color de la paleta.
 Imagen: subir una imagen como fondo.
 Icon: Imagen para ser utilizada como ícono de la aplicación instalada en el dispositivo. Este
debe tener formato PNG o JPG. El tamaño recomendable es 48x48 px.
 Sizing: Seleccionaremos entre los que se mencionan a continuación:
o Fixed: tamaño fijo para todos los usuarios, no importa el dispositivo.
o Responsive: la aplicación se adaptará al tamaño de la pantalla del dispositivo en la cual
se esté utilizando.

Componente Etiqueta

Las propiedades que modificaremos de este componente son las siguientes:

 Texto: completaremos con “Texto de Bienvenida”.

 También podremos cambiar las siguientes propiedades: negrita, cursiva, tamaño, tipo de letra,
color del texto.

Componente Botón

Podremos hacer modificaciones similares a la etiqueta en cuanto a las características de la letra.

Otras propiedades específicas:

 Forma. Las opciones disponibles son las siguientes: por defecto, redondeado, rectangular,
oval.
 Alto y ancho. En ambos casos, podremos seleccionar entre las que se describen a
continuación:
o Automático: Toma como referencia el texto o la imagen que contiene.
o Ajustar al contenedor: en este caso, la referencia es el tamaño de la pantalla del
dispositivo.
o Pixels: indicaremos el tamaño en esa unidad de medida.
o Percent: proporcional al tamaño de la pantalla del dispositivo.

                                                     Opciones personalización del tamaño de los botones

 
¡Ahora sí! Estamos listos para comenzar a crear nuestra primera App

Paso 1: En la vista Diseñador, arrastrar los componentes que mencionamos sobre el área de
trabajo y personalizarlos cambiando los valores predeterminados por los que nosotros elegimos.
Anímense a cambiar colores, tamaños, fuentes, hasta que logren el resultado deseado.   

 Importante: Para personalizar un componente, lo debemos tener seleccionado; únicamente

esa manera, se mostrarán las opciones disponibles para cada uno.

 En la vista Bloques, vamos a darle la función a cada uno de los componentes. 

Paso 2: Clic sobre el elemento Botón, seleccionamos el siguiente bloque y lo arrastramos al área de
trabajo.

                                              Vista de los bloques disponibles con el componente Botón seleccionado

 
          Bloque que debemos seleccionar

Paso 3: Clic sobre el componente etiqueta y seleccionaremos el siguiente bloque para arrastrar
sobre el área de trabajo.

                                                  Bloques disponibles con el componente Etiqueta seleccionado

                                                                        Bloque que debemos seleccionar

Paso 4: Los bloques elegidos se “encajan” como piezas de rompecabezas.

                                                                Posición correcta de los bloques

Paso 5: De la categoría Texto, seleccionamos un bloque que nos permite agregar el mensaje de
bienvenida dentro de la etiqueta.

                                                   Vista Bloques con el componente Texto seleccionado

                                                                  Bloque seleccionado de la categoría Texto

                                                                 Disposición final de los bloques seleccionados

En esta instancia, nuestra aplicación ya está lista para que la probemos. Para ello, seleccionamos
del menú superior la opción Conectar y luego elegimos AI Companion, Emulador o USB, teniendo
en cuenta las características de los dispositivos con los que contamos (Ver Configuración de App
Inventor, pág. 8).
  

                                                               Opciones disponibles desde el menú Conectar

  Actividad opcional para profundizar los aprendizajes

 Modificar la apariencia de los componentes Screen1 y

botón1 de nuestra aplicación agregando imágenes.

 
 Investigar cómo se renombran los componentes que
hemos agregado.

El siguiente tutorial los guiará para que puedan realizarla. ¡Adelante!

                                               Guía de ayuda para resolver la actividad de profundización

 Actividades de autoevaluación
 A continuación, los invitamos a resolver una serie de actividades interactivas para que pongan a
prueba su conocimiento sobre los temas trabajados en la clase. ¿Comenzamos? 

  
Síntesis

 A lo largo de esta clase, abordamos los siguientes temas:

 Recorrimos la interfaz de la herramienta y reconocimos las diferentes vistas que ella

provee.
 Conectamos nuestro dispositivo Android a la web para realizar las pruebas de las
aplicaciones que fuimos creando.
 Diseñamos una aplicación sencilla y revisamos su correcto funcionamiento.

 En la próxima clase, diseñaremos aplicaciones utilizando la cámara del dispositivo y los
recursos   multimedia.


o






Siguiente