Autoevaluación GUÍA TIC 2, Cortes 2 y 3
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Actividad 1. ESPACIO VIRTUAL MULTIMEDIA (EVM)
Crea un EVM en la plataforma tu elección (sitio web, blog, red social, etcétera) y desarrolla en un mínimo de CUATRO páginas alguno de los siguientes temas:
-
Mi familia
-
Mi música favorita
-
Mis pasatiempos
Tu sitio deberá contar con las siguientes especificaciones:
Actividad 2. HIPERVÍNCULOS en PowerPoint
Ahora, aprenderemos no sólo de hipervínculos sino de lo que és la IDENTIDAD DIGITAL, y también a tomar las decisiones correctas de cómo cuidar nuestra HUELLA DIGITAL. Para empezar a revisar este tema, observa el siguiente video para posteriormente realizar la actividad solicitada:
Actividad 3. HIPERVÍNCULOS en Word
Abre el documento TIC2_Corte2_Insumo4.docx que contiene dos poemas de Mario Benedetti: “Testamento del miércoles” y “Curriculum”. Los párrafos de los mismos se encuentran revueltos solo diferenciados por numeración escrita y las letras “A” y “B”.
Sin mover los párrafos del lugar que ocupan originalmente, trabaja el documento con las siguientes especificaciones:
Actividad 4. HIPERVÍNCULOS en Excel
Abre un libro nuevo de Excel y realiza las siguientes tareas:
1. En la celda A1 escribe el texto CONTINUAR… con el tipo de letra y color de fondo que desees.
2. En la celda M32 escribe el texto NUEVA POSICIÓN de la misma forma con el tipo de letra y color de fondo de tu preferencia.
3. Crea un hipervínculo para que al dar clic en la celda A1, nos posicione en la celda M32.
4. En la celda A4 escribe el texto OTRO DOCUMENTO… con el tipo de letra y color de fondo que desees.
5. Crea un hipervínculo para que al dar clic en la celda A4 se abra el documento de PowerPoint TIC2_Corte2_Insumo1.pptx que modificaste en la Actividad 2.
6. En la celda A7 escribe el texto SITIO… con el tipo de letra y color de fondo que desees.
7. Crea un hipervínculo para que al dar clic en la celda A7 se abra el Espacio Virtual Multimedia que creaste en la Actividad 1.
Actividad 5. PATRÓN DE DIAPOSITIVAS en PowerPoint
En esta sesión continuaremos revisando lo correspondiente a Ciberbullying y Sexting.
Utilizaremos el presentador de diapositivas para realizar la siguiente actividad.
Será necesario crear una historia en el Presentador de diapositivas que explique algunos de los riesgos o problemas que tiene la realización del Sexting en la red. Deberás considerar las siguientes especificaciones:
BACHILLERES
Recapitulación de contenidos y
Pensamiento computacional:
Introducción al ambiente de programación app
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Con el fin de recapitular conocimientos del corte anterior, resuelve el siguiente crucigrama:
AVISO IMPORTANTE:
Previo al inicio a esta clase, es de vital importancia instalar en el equipo móvil a utilizar, la app
MIT AI2 Companion disponible en Play Store
para realizar las pruebas de los programas a desarrollar.
App inventor
Iniciaremos esta clase hablando de la historia del App inventor y posteriormente describiremos el entorno para el desarrollo de aplicaciones.
Fue concebido por Google en 2011 y posteriormente, por diversos motivos no muy claros, fue "abandonado". A partir de ese momento su desarrollo lo retomó el MIT (Instituto Tecnológico de Massachusetts) y aunque aún está en su versión beta (de prueba), ya cuenta con muchas características funcionales.
App inventor es una aplicación distribuida, es decir, una aplicación donde sus componentes se ejecutan en diferentes plataformas conectadas a través de una red.
Para acceder a él hay que ir a la siguiente dirección electrónica: http://appinventor.mit.edu/
La aplicación se basa en desarrollo visual a través de su editor, por lo que no son necesarios grandes conocimientos de programación, pero sí, el entendimiento del desarrollo de pensamiento computacional ya que las aplicaciones que desarrollaremos se realizan mediante la composición de elementos y bloques que utilizan estructuras de control.
Para acceder a la plataforma Web es necesario contar con una cuenta de Gmail:
En algunos casos, solicitará llenar una breve encuesta (en inglés). Puedes hacerlo en ese momento, más tarde, o si lo deseas puedes no llenarla jamás:
Finalmente te mostrará el siguiente mensaje:
No tienes ningún proyecto en App Inventor 2. Para aprender a usarlo , haz clic en el enlace "Guía" en la parte superior; o para iniciar tu primer proyecto, haz clic en el botón "Iniciar nuevo proyecto" (Star New Proyect)en la parte superior izquierda. Diviértete inventando!
Para las siguientes ocasiones que ingreses se te solicitará únicamente la contraseña de tu cuenta de correo gmail:
Para crear un nuevo proyecto hay que dar clic en Start New Proyect. Los proyectos se almacenan en la propia plataforma y la información se guarda de manera automática y en cualquier momento podremos recuperar un proyecto anterior.
Una vez determinado el proyecto, la plataforma nos dirige a la pantalla del diseñador App Inventor:
La interfaz del editor Web se divide en varias secciones, en la parte central tenemos el editor de pantallas de nuestra aplicación (Viewer).
Por defecto, la aplicación solo tiene una pantalla/ventana (Screen 1), pero se pueden agregar más.
Empezaremos a utilizar el App Inventor creando una aplicación muy básica que genere un saludo personalizado.
Iniciaremos incluyendo en la pantalla principal (Screen 1) los siguientes elementos, que basta arrastrarlos desde la sección Palette hasta el Viewer:
1) Campo de entrada de
texto (TextBox)
2) Etiqueta textual (Label)
3) Botón (Button)
Si deseas eliminar algún elemento, basta con seleccionarlo y pulsar del teclado el botón SUPRIMIR o BORRAR.
Para seleccionar un elemento, puede resultar más útil utilizar la vista Components ya que en ocasiones resulta difícil identificar un elemento concreto en la pantalla, sobre todo si hay muchos de ellos.
Por defecto, el editor asigna nombres genéricos a los elementos que se incluyen en pantalla: Screen 1, TextBox1, Label1, Button1. Para que la lógica de pensamiento computacional, resulte más fácil de comprender, es conveniente modificar los nombres de los controles colocando otros más descriptivos.
Para modificar los nombres de los elementos, en la misma vista Components, basta seleccionar el elemento en cuestión y dar clic en el botón Rename.
Para el ejemplo que estamos realizando, modifica los nombres de los siguientes elementos:
-
TextBox -- CajaTextoNombre
-
Label1 -- TextoSaludo
-
Button1 -- BotonSaludar
A continuación modificaremos las propiedades de algunos de los elementos utilizando la vista Propierties. Para ello, selecciona el elemento TextoSaludo.
-
Asigna el color de fondo amarillo. (Propiedad BackgroundColor: Yellow)
-
El texto debe ser letra negrita (Propiedad FondBold)
-
Aumenta el tamaño del texto a 20 (Propiedad FontSize)
-
Cambia el texto por defecto a "Sin saludo" (Propiedad Text)
-
Cambia la alineación para que aparezca en el centro (Propiedad TextAlignment: center)
-
Cambia el ancho para que ocupe todo el espacio disponible en la pantalla (Propiedad Width valor: Fill parent). Fill parent significa que se extiende por todo el espacio disponible en la pantalla, en cambio si seleccionas Automatic el elemento ocupará el mínimo espacio posible para su representación
Ahora modificaremos las propiedades del elemento BotonSaludar, cambia su texto (Propiedad Text) por "Saluda!", puedes incluir cualquier otra modificación de aspecto que sea de tu preferencia: cambiar el color de fondo (Propiedad BackgroundColor), la forma (Propiedad Shape), incluir una imagen (Propiedad Image), etcétera.
Una vez que hemos definido la interfaz de usuario, es el momento de programar la lógica de operación de la app. Para ello, App Inventor utiliza un editor de bloques.
Al editor de bloques se accede pulsando sobre el botón Blocks situado en la parte superior derecha de la Web.
Podemos movernos entre el editor y el diseñador de bloques alternando los botones Designer y Blocks.
PROGRAMACIÓN DE EVENTOS
En la parte izquierda del editor de bloques tenemos una lista dónde están todas las estructuras de control que podemos utilizar (Built-in) y todos los componentes que tenemos en la pantalla (Screen1).
Las estructuras de control son el mismo conjunto de Pensamiento Computacional revisadas en TIC 3 en el tercer semestre, con la salvedad que App Inventor las designará ahora en inglés.
Al seleccionar cada una de las categorías nos aparecerá un panel desplegable donde se encuentran todos los bloques que se pueden utilizar.
-
Control. Contiene los bloques de control tradiciones: if / else (Si / entonces), for (Haz / hasta), while (Haz / mientras). Además contiene bloques que permiten realizar evaluaciones y abrir / cerrar ventanas (Screens) y la aplicación. Para mayor información, consultar CONTROL.
-
Logic. Contiene bloques para manejar los operadores lógicos y especificar condiciones /comparaciones. Para mayor información, consultar LOGIC.
-
Math. Contiene los bloques para trabajar con elementos numéricos, estos elementos consisten principalmente en elementos de comparación y diferentes tipos de funciones matemáticas. Para mayor información, consultar MATH.
-
Text. Contiene los bloques para definir y manipular textos, permite definir una gran cantidad de operaciones básicas sobre cadenas de texto: unión, evaluación, reemplazos, etcétera. Para mayor información, consultar TEXT.
-
Lists. Contiene los bloques que permiten gestionar listas de elementos, crearlas, manipularlas y realizar operaciones básicas con ellas. Para mayor información, consultar LISTS.
-
Colors. Contiene los bloques que permiten realizar acciones relacionadas con la selección o definición de Colores. Estos bloques casi no son utilizados. Para mayor información, consultar COLORS.
-
Variables. Contiene los bloques que permiten definir variables globales (en todo el programa) o locales (dentro del procedimiento), además los correspondientes a los valores (get) y de modificación (set). Para mayor información, consultar VARIABLES.
-
Procedures. Contiene los bloques que permiten la gestión de procedimientos, los procedimientos permiten "agrupar" un conjunto de bloques bajo un mismo nombre (son similares a las funciones utilizados en otros lenguajes de programación). Ya definidos estos procedimientos pueden ser invocados posteriormente a lo largo del programa. Para mayor información, consultar PROCEDURES.
Para programar la lógica de la aplicación, es necesario seleccionar los bloques y "arrastrarlos" hasta el área de diseño de la pantalla. Los bloques que se incluyen en el área de diseño definen el comportamiento de la aplicación.
De forma parecida como se hace en Scratch, los bloques se combinan y encajan entre sí para definir la lógica computacional de una aplicación.
Toma en cuenta que en todo momento podemos eliminar los bloques que no necesitemos arrastrándolos hacia el "cesto de basura" que aparece en la parte inferior izquierda de la pantalla.
Iniciaremos la funcionalidad que ejecutará nuestra app cuando el usuario pulse el botón BotonSaludar.
Selecciona de la lista de elementos de la parte izquierda la opción BotonSaludar y a continuación, asígnale la funcionalidad WhenBotonSaludar.Click do, que activará una acción al darle clic al botón.
A continuación, definiremos las funcionalidades que realizará la app sobre el botón saludar:
-
Obtener el texto que el usuario escriba en el componente CajaTextoNombre.
-
Formar una nueva cadena con "Hola " + el texto introducido en CajaTextoNombre
-
Asignar esa nueva cadena a la etiqueta TextoSaludo
(Es importante notar que después de la palabra Hola, hay un espacio en blanco)
Para lograr lo anterior, primero selecciona del lado izquierdo de la pantalla el elemento CajaTextoNombre y busca la caja que permite obtener el valor de su propiedad Text y arrástrala dentro de la pantalla de trabajo Viewer sin realizar ningún tipo de conexión.
Para que la app opere como se desea, será necesario "concatenar" el valor del texto de la CajaTextoNombre con la cadena de texto
"Hola "
(recuerda que tiene un espacio final).
Para ello utilizaremos el elemento de tipo
Text - Join.
El Join permite concatenar cadenas de texto.
Vamos a concatenar el texto "Hola " (con un espacio al final) de tipo Text, con el valor del texto de CajaTextoNombre.
El bloque donde se permite escribir texto literal es:
Concatenación de cadenas (Join):
Ahora solo falta asignar la concatenación al elemento TextoSaludo.
Para esto selecciona TextoSaludo y busca el bloque que permite modificar el valor de su atributo Text (setTextoSaludo.Text)
El texto que se le asigna es el resultado de Join
Todo eso se realizará cuando el usuario haga clic sobre el botón BotonSaludar, por lo que tendremos que encajar el bloque dentro del bloque Click
Con esto finalizamos la implementación de la lógica del botón BotonSaludar y podemos probar la aplicación en el dispositivo.
Desde la pantalla Designer hay que dar clic en la opción del menú principal Connect y elegir la la primera opción Al companion:
Esta acción te generará un código QR que deberás escanear desde la aplicación App Inventor 2 instalada en tu móvil:
Después de que se establece la conexión entre la aplicación y tu móvil...
...podrás ver su funcionamiento directamente en pantalla:
Tarea Semana 4
Productos y actividades solicitadas en clase:
-
T13. Participación activa en clase
-
T14. Ejercicio de pensamiento computacional con las especificaciones solicitadas.
Productos DE TAREA A ENTREGAR:
-
T15. Conclusiones del corte publicadas en Facebook.
-
T16. Autoevaluación del corte.
-
T17. Comentario del Capítulo 03 en Facebook
Referencias:
- Pascual, J. García V. & González R. (2014). Desarrollo de aplicaciones android con App Inventor, Paso a paso. México: Jordán Pascual Estrada.
- Cabello, J.M. (2014). Crea tus aplicaciones Android con App Inventor 2. España: IC