Mi primera APP (Programación y Testeo)

 

Programación

En el próximo paso programaremos nuestra aplicación.
Es decir, haremos que al tocar el botón, en este caso una imagen, se desencadene el audio.

Para ello, vamos a usar el Editor de bloques para definir la forma en que se comportará nuestra aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. En nuestro caso, lo que debe suceder cuando el usuario de tu aplicación pulse un botón.

Para comenzar, hacemos clic en el botón Bloques. 

Esto abre la ventana de programación con bloques. La parte más amplia, ahora en blanco, es el Editor, donde colocaremos los bloques de nuestros programas.

En la pestaña bloques hay dos grupos: Integrados y Screen1.

Los bloques integrados son el conjunto de bloques que están disponibles para cada aplicación a construir.
Como podemos ver, los bloque están organizados por colores.
Los bloques debajo de Screen 1 son los que se encuentran vinculados con los componentes que hemos seleccionado para nuestra aplicación.

Los botones situados debajo de cada grupo se amplían y se muestran los bloques cuando se hace clic en ellos.
Los bloques color mostaza son los manejadores o gestores de sucesos. Indican qué hay que hacer cuando sucede algo en la aplicación.

En este caso, el manejador nos permitirá decir que va a pasar cuando hagamos clic sobre la imagen.

Hacemos clic sobre Boton1

Seleccionamos el bloque "Cuando Boton1. Clic" y lo arrastramos al Visor.1.  

Hacemos clic en Sonido1.

Buscamos el bloque llamar "Sonido1.Reproducir", lo arrastramos al Visor y lo "enganchamos" dentro del bloque anterior.

Buscamos el bloque llamar Sonido1.Vibrar, arrastralo al Visor y "enganchalo" a continuación del bloque anterior.

Hacemos Clic en el bloque integrado Matemáticas
Seleccionamos el bloque numérico, lo arrastramos al Visor y lo vinculamos a la derecha de la palabra "milisegundos" del bloque anterior. Con el teclado cambiaremos el número "0" por "1000".

Probar nuestras APPs

Podemos probar nuestras APPs antes de descargarlas e instalarlas en nuestros dispositivos.

Para ellos utilizaremos una APP denominada MIT AI Companion.

Una vez instalada la aplicación, debemos abrirla.

Luego de ello, accedemos al menú Conectar y a la opción AI Companion.

Nos brindará un código textual y un código QR.

Según la opción seleccionada, presionaremos el botón correspondiente:

- El naranja para ingresar el código textual.

- El celeste para escanear el código QR.

Se vinculará el sitio de App Inventor con nuestro celular para que se pueda visualizar nuestra app.

La APP se visualizará en nuestro dispositivo, para su testeo.

Read More

MI primera APPs (Diseño)

 Hola!!!

¿Cómo están? Espero que bien.

Aquí estoy con una nueva propuesta...
¿Qué vamos a aprender?
Algo que les resultará útil, agradable  (eso espero) y que tal vez los haga famosos (no creo que los haga millonarios, pero nunca se sabe... jaja).

¿Qué es?
El diseño de aplicaciones móviles para celulares.

Para crear aplicaciones para móviles existen numerosas plataformas de desarrollo. 
Una de ellas es App Inventor, desarrollada por Google para crear aplicaciones para dispositivos Android. 
El entorno de desarrollo es completamente visual, tanto en la etapa del diseño como en la de programación (a través de bloques), y por eso es una buena puerta de acceso para los que recién se inician en este tema.


Clase Nº 1: Nuestra primera aplicación con App Inventor.

Empecemos la construcción de nuestra primer app: 
La vamos a llamar "MiprimeraApp".

A medida que construyas vas a aprender a usar las tres herramientas fundamentales de trabajo de App Inventor:

- El Diseñador, el lugar donde diseñás tu aplicación, y que se ejecuta en el navegador web.

- El Editor de bloques, el lugar donde se configura el comportamiento de la aplicación, y que también se ejecuta en el navegador web.

- El Celular.

IMPORTANTE!!!! Para usar App Inventor necesitamos una cuenta de GMail. Por suerte, ya la tenemos...

¿Listo? 

1) Vamos al sitio de App Inventor:
http://ai2.appinventor.mit.edu
y nos logueamos con nuestro email de gmail.

Se nos abrirá una página con los términos de uso que tendremos que aceptar.

Originalmente, la página está en Inglés, pero podemos seleccionar el idioma desde el último menú de la derecha.

El mensaje nos indica que aún no tenemos proyectos creados y nos sugiere el uso de una Guía si es la primera vez que trabajaremos en este tema.

2) Crearemos un proyecto nuevo haciendo clic en el botón "Comenzar un proyecto nuevo".

Escribimos el nombre del proyecto, por ejemplo: MiprimeraApp, en una sola palabra, sin espacios, y hacemos clic en Aceptar.

En el navegador se abre el Diseñador, el lugar donde se diseñan las pantallas de tu aplicación, organizando los distintos componentes en el Visor (el espacio central).

Los componentes disponibles se encuentran a la izquierda, bajo la etiqueta Paleta, agrupados en secciones:

- Interfaz de usuario
- Disposición
- Medios
- Dibujo y animación
- Maps
- Sensores
- Social
- Almacenamiento
entre otros.










Vamos a diseñar algo simple:
Una imagen que, cuando la toque, se desencadenará un audio.


En mi caso, mi bebé va a llorar al tocarlo.

3) Vamos a descargar a nuestra PC una imagen.

4) Crearemos un botón que contenga a la imagen.

a) Hacemos clic, arrastramos y soltamos el componente Botón a Screen1 (así se denomina nuestra pantalla). Aparecerá en la lista de componentes.

b)  En la lista de Propiedades, en la columna de la derecha, debajo de la palabra Imagen, hacemos clic en Ninguno para que se abra el menú de opciones.
c) Hacemos clic en Subir archivo, seleccionamos en la computadora el archivo descargado y hacemos clic en Aceptar.

d) Eliminamos el texto para Button1 que aparece bajo la propiedad Text usando la tecla de retroceso.

5) Ahora agregaremos una etiqueta con el texto que deseamos que aparezca debajo de la imagen (en mi caso: "Acariciame").

a) Arrastramos y soltamos el componente Etiqueta al Visor, situándolo por debajo del de la imagen. Aparecerá en la lista de componentes como Etiqueta1

b) En la ventana de propiedades, cambiaremos la propiedad Texto (text) de Etiqueta1 para que diga "Acariciame" (o lo que quieran). Verás el cambio del texto en el diseñador y en el dispositivo.

7. Cambiá el Color de Fondo (BackgroundColor) de Etiqueta1, haciendo clic en el cuadro.
8. Cambiá el Color de Texto (TextColor) de Etiqueta1
9. Cambiá el Tamaño de la Fuente (FontSize) de Etiqueta1 a 30

Finalmente, agregamos el sonido.

10. Hacemos clic en la sección Medios de la Paleta para ver los componentes disponibles en esa sección.
12. Arrastramos un componente Sonido y lo colocamos en el visor. 
Al colocarlo, aparecerá en la parte inferior del Visor marcada como Componentes no visibles.

13. En la lista de Propiedades, debajo de la palabra Origen, hacemos clic en Ninguno para que se abra el menú de opciones, hacemos clic después en Subir archivo, seleccionamos de la computadora el archivo que descargamos y hacemos clic en Aceptar.

SIEMPRE INCLUIRÁS EN TUS APPs UNA ETIQUETA CON TU FIRMA.
Puede ser un ALIAS.

En nuestra próxima clase, aprenderemos a programarla.

Fuente: Aulas Virtuales Entramar

Read More

Datos de los SITIOS WEB COLABORATIVOS

Completen el formulario (una persona por equipo) con la información correspondiente a los Sitios Web desarrollados en WIX.

4TO. COM

https://forms.gle/H1DHmvTS5En95gZ76

4TO. ECO

https://forms.gle/f1MKQxXRyhrbroYj6

COMPLETAR HASTA EL 25/09
ESE DÍA SE CIERRAN LOS FORMULARIOS

Read More

Datos de los SITIOS WEB PERSONALES

 Completen los formularios con la información correspondiente a los Sitios Web desarrollados en WIX.

SITIOS PERSONALES

4TO. COM

4TO. ECO

Read More

Wix - Edición de páginas.

 Grabación de la clase del 27/08.

Read More

Diseñando un sitio en WIX

Elige la platilla que mejor se adapte a la temática de tu sitio:

https://es.wix.com/website/templates

LISTA DE DISTRIBUCIÓN de videos de YouTube sobre Diseño y Estilo:

https://www.youtube.com/playlist?list=PLSUkP_5z0eicTQALxEEzNLiTVIX7c8QCy

GRABACIÓN DE LA CLASE DEL 13/08

Read More

INICIANDO LA SEGUNDA ETAPA

En esta segunda etapa, vamos a generar un sitio web a través de plantillas.

Nos encontraremos por video conferencia para continuar aprendiendo juntos:

- Martes 11 de agosto de 9 a 9.50 horas: 4to. COM
- Jueves 13 de agosto de 11 a 11.50 horas: 4to. ECO.

Hasta esta fecha, tendrán tiempo para entregar la actividad anterior.
Esta será la fecha definitiva

Read More

Actividades de cierre de la primera etapa.

Hola chicos/as!!!
Les dejo unas actividades como cierre de esta primera parte del año.

A la hora de pensar en internet, se suele pensar únicamente en los consumos de información que se realizan (por ejemplo, ver videos, acceder a redes sociales, chatear con amigos/as).
Pocas veces surgen interrogantes acerca de qué es internet y por qué se la conoce como la “red de redes”.
¿Cómo se comunican puntos distantes en diversos continentes? •






Accedan al mapa “Submarine Cable Map” (Mapa de cables submarinos), del sitio Telegeography, y tomen nota de aquellos puntos con los que está conectada Argentina de forma física. 
Realiza una entrada en tu blog que incluya:
- Una imagen de la distribución de los cables y nombra esos puntos de conexión de la Argentina, mediante un cable submarino.

Resuelve luego este  VIDEO-QUIZ... vinculado a cómo llega Internet a nuestro país.

Y eso?
Siempre con cosas raras esta profe...

--------------------------------------------------

Sigamos trabajando en la previa del diseño de nuestro sitio Web.

La segunda actividad consiste en seleccionar el sitio que más los impactó positivamente de los que seleccionaron para analizar, y responder en forma colaborativa (los dos participantes del equipo), el cuestionario:

https://docs.google.com/document/d/1JxbOhFOBAosQnZWUfFwVoK2nJqsSQxayYWKfot1hjYM/edit?usp=sharing

PIENSEN QUE SON UN EQUIPO DE TRABAJO Y QUE DEBEN TRABAJAR EN FORMA COLABORATIVA.

Pasos para trabajar hacerlo:

1) Uno accede a su cuenta de gmail
2) Abre en otra solapa este documento compartido.
3) Crea una copia.
4) Invita al compañero/a para que también pueda editarlo:

Una vez completado el cuestionario creen una entrada en su blog que incluya el link al mismo.



Fecha de entrega de la actividad: 7 de agosto.

Read More

Si tus archivos son muy pesados para el campus...

Hola chicos/as!!

Recuerden lo que les expliqué...

Si sus archivos de Word son muy pesados para ser subidos al campus, pueden guardarlos como PDF.

Les dejo un videito...

Saludos
Profe Cristina

Read More

Diseño Web (4to. ECO y 4to.COM)

El sitio web más sencillo requiere trabajo, planificación y seguimiento. Tiene que garantizarle una buena experiencia al visitante (usabilidad). De lo contrario, no pasará de ser una visita única y debe verse correctamente en cualquier dispositivo del que disponga el usuario. Con todo esto queremos dejar claro que en el diseño web debe haber equilibrio entre la arquitectura, el diseño, contenido y tecnología.

Estamos a punto de comenzar a desarrollar nuestro primer sitio web y hay algunas preguntas importantes que debemos hacernos antes de comenzar.

1. Definir nuestro objetivo: ¿Qué queremos lograr con nuestro sitio web?

Cada web tiene al menos un objetivo.
Antes de empezar a planear, piensa en cuál debería ser el objetivo de tu web.
El objetivo del sitio web es también una parte importante de tu estrategia de marketing.

2. Definir nuestro grupo objetivo: ¿A quién queremos llegar a través de nuestro sitio?

Es el momento de identificar a nuestro grupo objetivo. Esto nos dará una idea de cómo se pueden organizar el contenido, la redacción y otras áreas del sitio.

El diseño web debe adaptarse a la audiencia. No es lo mismo un sitio dirigido a jóvenes entre 16 y 35 años, amantes del fútbol que uno dedicado a mujeres, madres, entre 25 y 45. Durante la investigación buscas esos elementos que encajen con el perfil al cual quieres llegar.Una buena manera de definir un grupo objetivo sería crear personas - se trata de perfiles ficticios que representan a un usuario típico de nuestro sitio web.

Los criterios comunes utilizados para definir los grupos objetivo incluyen:

• Edad
• Género
• Condición social
• Nivel de educación

3. Analicemos la Competencia: ¿Quiénes son mis competidores en Internet?

Siempre es importante saber quiénes son nuestros competidores. 

El primer paso para analizar la competencia es realizar una búsqueda en Google. Las páginas de resultados de búsqueda te mostrarán qué competidores hay y qué competidores están bien posicionados.

Contenido: ¿Las webs mejor posicionadas utilizan mucho contenido? ¿Tienen un blog o una revista? ¿Cuál es la tonalidad de la web? ¿El contenido es de alta calidad? ¿Son originales o se utilizan imágenes de stock estándar? ¿Están disponibles en diferentes idiomas?

Velocidad de la página: ¿La web se carga rápido?

Arquitectura: ¿Qué tipos de menús están disponibles? ¿Qué categorías se utilizan en el sitio web?

Diseño: ¿Cómo se realizó el diseño web? ¿Cómo es el sitio web móvil?

La intención de este análisis de la competencia no debería ser copiar exactamente las otras webs. Sin embargo, los proyectos competitivos son una excelente manera de definir tus propias fortalezas y determinar qué dirección vamos a tomar con nuestra web.

Analiza sitios similares a lo que quieres dentro de tu sector. Identifica qué están haciendo bien y qué hacen mal. De esta manera evitas cometer los mismos errores y reconoces las oportunidades que tienes. 

Define qué estilo te gustaría que tuviera tu web.

ACTIVIDAD:
Realicen una entrada en el blog con su compañero/a (la misma entrada en los dos blogs) en donde analicen los 3 puntos que vimos en el encuentro:

- Objetivo del sitio.
- Público objetivo.
- Análisis de la competencia. (incluyan 3 sitios y analicen qué les gusta y qué no, de ellos).

Fecha de entrega (3/07). 

Read More

Organizando los equipos - COMUNICACIÓN

SÍ... CAMBIÉ DE IDEA...
Van a desarrollar el mismo proyecto que el otro curso.

Un proyecto de producción audiovisual, en el que trabajarán con técnicas y herramientas de edición de textos, video y audio.

Cada grupo de 2 integrantes desarrollará un proyecto global sobre un tema vinculado a la Tecnología que integrará diferentes producciones audiovisuales y un sitio web.

Seleccionarán un tema o un área general cualquiera, donde la Tecnología haya modificado y enriquecido su realidad, con el tiempo.
Por ejemplo, la impresión 3D en la Salud, la Tecnología en el Deporte, Arte, Cine, Biología, Agricultura, Ganadería, Música, etc.

Primera actividad:
Cada uno deberá realizar una entrada en su blog en la que indicará con quien trabajará y que tema seleccionaron.

Segunda actividad:
Investigarán el tema en profundidad e incluirán en la misma entrada las URLs de al menos 10 sitios web con información CONFIABLE (Presten atención a las fuentes) que luego utilizarán para generar material informativo.

Envía un mensaje a devotolearning@gmail.com una vez finalizadas las actividades, para su revisión y evaluación.

FECHA LÍMITE: MARTES 23/06
Fecha de nuestra próxima conferencia de 9 a 9:40 horas

Read More

Nueva Sala de Videoconferencia

Hola chicos/as!!!

A partir de hoy algunos de sus docentes comenzarán a utilizar con ustedes, una nueva Sala de Videoconferencias que se encuentra instalada en una nueva Plataforma, dentro del Campus Virtual Tomás Devoto.
Su URL es:

https://campustomasdevoto.net/campus/

Allí encontrarán un espacio destinado a cada uno de los grupos:

Y además, espacios para cada uno de los grupos de Inglés, Italiano y Deportes.

En esos espacios, sus docentes organizarán reuniones, con modalidades similares a las que desarrollan por Zoom.

La diferencia más importante es LA SEGURIDAD, ya que solo se podrá acceder a las reuniones a través del Campus Virtual.

Se accede a este Campus Virtual con el mismo usuario que en el otro campus.
Deben reestablecer la contraseña.

Como se accede a una videoconferencia:

El ícono que representa a una reunión es el siguiente:

Al acceder encontrarán un botón, que al hacer clic sobre él, entrarán a la reunión dentro de la Sala de Videoconferencias.

IMPORTANTE!!! NO podrán acceder a la sala si antes no ingresó un docente que será el moderador de la reunión.

Al acceder a la sala les solicitará que indiquen como se conectarán con el audio:

Daremos permiso para el uso de nuestro micrófono:

Si seleccionamos el micrófono, haremos una "prueba de eco" para ver si se escucha correctamente nuestra voz.

Así se visualizará la Sala de Videoconferencias:

Encontrarán un sector para comunicarse por Chat y los botones para activar y desactivar micrófono y cámara.

Los docentes les comunicarán por correo electrónico y/o Campus las fechas y horas de las reuniones.

Saludos
Profe Cristina

Read More

Murales interactivos (Primera parte) - 4to. ECO

En esta oportunidad, aprenderemos a crear un mural digital online con contenidos multimedia que puede utilizarse para presentar información, sintetizar o registrar un proyecto o una actividad en particular.

Existen varias aplicaciones de este tipo para hacer murales: Glogster, Muraly, Linoit, entre otros.

1) Hoy vamos a trabajar con Padlet (accederemos al sitio en http://es.padlet.com/) que es una herramienta que nos permite crear y disponer de nuestro propio muro colaborativo con pequeñas notas al estilo de los post-it.

2) Para acceder a la herramienta, podemos hacerlo con nuestra cuenta de Gmail, con usuario y contraseña. 

Algo que siempre recomiendo es acceder previamente a la cuenta que vamos a utilizar y luego en otra solapa acceder a Padlet.

3) Cuando accedamos por primera vez, nos pedirá seleccionar entre dos tipos de cuenta: Básica (que se supone que será gratis por siempre) y que nos permitirá crear hasta 3 muros y subir archivos de hasta 3 MB.

4) Luego de acceder, por primera vez, nos dará la bienvenida y accederemos al escritorio, donde tendremos diferentes posibilidades:
- Crear un muro, unirnos a uno ya creado por otro usuario, acceder a la galería o subir de nivel en nuestra cuenta, si tenemos una FREE.
En este caso seleccionaremos Hacer un padlet.

5) Y se nos creará nuestro primer muro.

Lo primero que haremos es seleccionar una plantilla.

Tenemos diferentes opciones:

Muro: con un formato de bloques como si fueran ladrillos, que podemos acomodar y modificar el orden en el que aparecen.

Canvas: que me permite ubicar los elementos en forma libre y moverlos y agruparlos de la manera que yo desee.

Secuencia: en el que las notas se irán ubicando una debajo de la otra.

Rejilla: en donde los componentes se organizan en filas

Estantería: en donde los componentes se organizan en columnas.

Conversación: en el que puedo comunicarme via muro como si estuviéramos en un chat.

Mapa: que me permite agregar información en diferentes puntos de un mapa.

Cronología: que me permite hacer como una línea de tiempo horizontal.

En nuestro caso, vamos a seleccionar Rejilla o Estantería.

6) En nuestro caso, vamos a seleccionar ESTANTERÍA.

Realizarás un muro vinculado al tema seleccionado, que incluya información actualizada sobre el mismo.

7) Le cambiarás el nombre al muro por uno vinculado al tema general, y agregarás una descripción.

Por. ej.:

8) Seleccionarás un ícono que se visualizará a la izquierda del título y la descripción.

9) Le modificaremos la URL por una más fácil de recordar:

Luego nos ocuparemos de la parte visual.

10) Modificaremos el fondo de pantalla.

11) Modificaremos el esquema de colores de las entradas, claras u oscuras, la fuente, el tipo de letra.

12) Luego configuraremos cómo será la publicación.

- Si se mostrará el nombre del autor de cada entrada.

- Cómo será el orden de las entradas. Primero la más vieja o la más nueva.

- Si permitiremos que los visitantes puedan publicar comentarios.

- O si permitiremos reacciones: votar, dar puntaje u otorgar estrellas. En este caso voy a permitir un me gusta.

13) Luego configuraremos el filtrado de contenidos:

Si las entradas se publicarán luego de ser aprobadas por u moderador y si las palabras desagradables aparecerán reemplazadas por empjis agradables.

Luego de esto haremos clic en siguiente.

Y ya está todo listo para comenzar a publicar.

Continuaremos con esta actividad la próxima semana.

Read More

Informe de Actividades

El siguiente es el listado de las actividades que deberían tener publicadas en el blog.

- Proyecto de Producción audiovisual (4to. ECO) (Fecha de entrega máxima 3 de mayo) 

• Act. 1: Formulación del tema del proyecto y organización.
• Act. 2: Links de interés

- Proyecto de Gamificación (4to. COM) 

• Act. 1: Concepto y ejemplos de Gamificación (Fecha de entrega máxima 3 de mayo) 
• Act. 2: Diferencias entre Gamificación y Apredizaje Basado en Juegos (Fecha de entrega máxima 11 de mayo) 

NOTA:

Se ha informado, ante el pedido de Dirección de Estudios, cuál ha sido el desempeño de cada uno de ustedes y el grado de cumplimiento de las actividades propuestas hasta el día jueves 7/05.

Read More

GAMIFICACIÓN y Juego - 4to. COMUNICACIÓN

El hecho de utilizar elementos de juego no convierte a la gamificación en un juego, aunque en ocasiones el formato que se elija sea el de un juego. La gamificación tiene la clara intención de motivar a realizar una determinada acción, a desarrollar unas destrezas o habilidades y, por tanto, no tiene un contexto de ganancia o pérdida: se trata de un proceso donde se evoluciona, se empodera al participante y se le brinda la oportunidad de mejorar o alcanzar objetivos.

La siguiente imagen resume las diferencias entre cada uno de esos conceptos de forma gráfica: 

¿Qué es el Game-based learning?

• Gamificación educativa Vs Aprendizaje Basado en Juego.
  Infografía.

ACTIVIDAD:

Realiza una entrada en tu blog que incluya la diferenciación entre Gamificación y Aprendizaje basado en Juegos.

Incluye al menos 3 elementos audiovisuales (imágenes, videos) diferentes a los incluidos e esta entrada.

Fecha límite de entrega: 11/05.

Read More