[Música] Hola amigos bienvenidos nuevamente a su canal de tecnología de 41 Canal del profesor de tecnología magíster dialmer Fernando giraldo magister en educación de la universidad icesi licenciado en electricidad y electrónica de la Universidad del Quindío docente de tecnología de la Secretaría de Educación municipal de Santiago de Cali bueno en esta ocasión voy a enseñarles cómo pueden elaborar una pequeña aplicación en para celular en un sitio muy conocido de la Universidad de Massachusetts que se llama mid at inventor Entonces en este sitio ustedes van a poder crear aplicaciones y enseñarle a esos niños cómo pueden programar usando este sitio este sitio muy conocido porque también tiene otra aplicación para enseñar programación de computadores o de celulares que se llama Scratch Scratch también es una aplicación en el cual puede programarse a través de bloque es muy sencilla y pues espero que todos ustedes saquen gran provecho ellos bueno bienvenido y no es Paz Vamos a continuar con el vídeo un abrazo no se olviden comentar también compartir darle me gusta que la interacción hace que el canal crezca y podamos seguir haciendo vídeos para la utilidad de muchos estudiantes y también de muchos docentes un abrazo Bueno muy bien jóvenes en este momento vamos a empezar a crear una aplicación usando el sitio web bit at inventos Entonces inicialmente le voy a mostrar que mira inventor tiene Pues un diseñador gráfico donde usted puede enseñar la apariencia la aplicación aquí ya tengo la apariencia que debe tener la aplicación básicamente tiene inicialmente un contenedor el cual va a recibir la imagen un contenedor de este tipo que es vertical estos contenedores se encuentran aquí en esta opción de disposición de de los recipientes ustedes la van a la van a la van a encontrar y van a trasladar allí Ahí van a colocar la imagen de la carne recibir la imagen luego mantener una etiqueta que vamos a encontrar en interfaz de usuario que es donde usted va a colocar el texto que luego va a ser leído por el por el por la aplicación y más abajo van a encontrar ustedes esto que ven acá que es un recipiente horizontal horizontal que tiene dos botones uno para hablar y otro para cerrar la aplicación Bueno ese es el diseño el diseño visual de la aplicación la parte de programación la vamos a ver en esta parte y eso lo vamos a ver a continuación Entonces vamos a empezar con la parte del diseño visual de esta aplicación es muy sencillo tiene tres partes el primer dispositivo que recibe la imagen El otro es una etiqueta que recibe el texto y finalmente un dispositivo o recipiente que recibe los botones de hablar y de Bueno entonces a continuación a continuación vamos a trabajar con lo que es el diseño desde cero Entonces ustedes jóvenes van a darle aquí comenzar nuevo proyecto él van a colocar el nombre del proyecto en este caso la vamos a colocar Cali 20 Bueno yo lo voy a colocar Cali 20 pero ustedes la van a colocar Cali solo esto lo hago porque pues ya tengo varios proyectos con el nombre de Cali Entonces lo primero que vamos a hacer es arrastrar el recipiente vertical Esta es la parte visual este recipiente vertical va a recibir la imagen Entonces como queremos que reciba la imagen y que se sea a lo ancho de la pantalla le damos 100% acá donde dice ancho hemos considerado que el ancho es el acto es correcto de un 40% y que esa imagen va a estar centrada ahorita a la izquierda de la derecha propia no vamos a colocar la imagen la imagen la arrastramos desde acá desde interfaz de usuario y observen de que quedó por acá en esta esquina entonces esa imagen debemos de centrarla por lo tanto Vamos a darle acá centrar en la parte horizontal y centrar en lo en lo vertical luego que ya tenemos esto ubicado la imagen en el centro la vamos a dar acá que se ajuste tanto al contenedor en lo vertical como en lo horizontal Igualmente le vamos a hacer y vamos a seleccionar la imagen entonces la imagen pues debemos a la descargado previamente tenerla en nuestros archivos yo ya tengo la imagen acá en mi computador descargada Por eso la voy a colocar rápidamente Entonces ustedes lo quieren hacer es Descargar esa imagen como descargan cualquier imagen de Santiago de Cali acá cuando coloque el Santiago de Cali le van a dar en imágenes y pues descargan alguna de estas imágenes emblemáticas de la ciudad le dan clic derecho y le dan guardar imagen Y de esa forma ustedes van a poder guardar la imagen de colocan acá el nombre de la imagen por ejemplo le puedo colocar en este caso Ermita Y le doy guardar y se descarga la imagen que después puedo utilizar acá Bueno lo siguiente es colocar el texto entonces para eso colocamos una etiqueta que va a estar desplegada en un 100% para poder para poder escribir todo el texto necesario También acá en la búsqueda de Santiago de Cali podemos tomar texto que encontremos por ejemplo ese texto que está acá podemos tomar lo elemental copiarlo y pegarlo para que tengamos el texto ese texto va a ser insertado en este gozo en este espacio que tenemos acá para texto queda aquí al lado derecho inferior y colocamos el texto Bueno cuando leemos enter el texto va a quedar aquí desplegado pero como ustedes pueden ver ese texto hay que ajustarlo más o menos en este caso voy a colocarle un 30% que es lo que a mí me parece exactamente un 30% para dar un espacio a lo que son los botones ustedes estos necesitan los botones requieren un dispositivo este dispositivo que ven acá que es un dispositivo vertical horizontal Entonces esta etiqueta se puede pasar acá arriba la podemos movilizar bueno acá se puede mover todo esto de acuerdo a nuestros intereses pero aquí por ejemplo esta imagen las debo pasar aquí Bueno y ahorita ya quedó bueno esta tenemos que esta disposición horizontal tenemos que acomodarla muy acá estamos un 40% acá y aquí tenemos un 30 o sea sería un 70% O sea que nos queda un 30% para nuestro para los botones entonces podemos colocar aquí un 30% en el alto y el ancho ya dijimos que íbamos a utilizar todo el ancho que es un 100% entonces él se nos se nos despliega en toda la pantalla luego ya podemos tener el recipiente para nuestros botones podemos ir a interfaz de usuario y vamos a a incrustar estos botones acá aquí los colocamos como vemos que no hay necesidad de tener tanto espacio Entonces vamos a bajarle un poco el tamaño de esta aún a un 10% de alto para que no quede tan allí tan apeñuscar bueno Y tenemos esto lo centramos tanto en el ancho como en el alto luego los botones hay que colocarle su respectivo nombre por ejemplo este botón primer botón se va a utilizar para hablar y el siguiente botón se va a utilizar para salirse de la aplicación Entonces le vamos a aceptar finalmente recuerden de que a los botones hay que colocarles también el nombre acá en esta parte de abajo en colocarles por ejemplo este que es para hablar hay que colocarles que es para hablar y el otro botón debe decir salir Bueno Esta es digamos que la primera parte y la parte visual en medios hay un componente que va a convertir el texto lo va a convertir a voz Entonces eso es básicamente lo que vamos a hacer ahora con la parte visual luego haremos la parte de programación Entonces vamos a esperar un momento para ver la parte de programación Bueno vamos a hacer brevemente el programa o el programa muy sencillo acá en este botón hablar pues lo que queremos nosotros es que cuando se haga clic en el botón a hablar ese texto que ya hemos escrito se convierta en voz por eso usamos esta que dice llamar texto a voz de este Comando que está acá lo traspasamos acá este bloque y de esta manera que va a convertir de texto a voz el texto que está en la etiqueta 1 por eso colocamos aquí etiqueta uno texto el texto se ha convertido en voz y cuando andamos el botón salir pues lo que queremos es que la aplicación se cierre entonces solamente eso venimos acá y donde dice control aquí a la parte de abajo hay una opción un comando que cerrar la aplicación es cuando le den el botón salir porque hay dos botones hablar y salir cuando en el botón salir se va a salir la aplicación Bueno aquí ya estamos listos para generar la aplicación ustedes hu el botón y ya empieza a generarse el código de respuesta rápida para la aplicación bueno él se demora un poquito Entonces vamos a esperar un poco mientras eso cuando ya esté 100 vamos a descargar la aplicación bueno como ustedes pueden ver acá ya tenemos generado el código entonces solamente tenemos que desde el celular que vemos aquí al lado derecho vamos a poder lo que vamos a hacer es Buscar la aplicación companion Mira hay dos companion abrir esa aplicación que la veo de escaneado descargado desde la Play Store también otras aplicaciones lectores de códigos de respuesta rápida pueden funcionar yo voy a activar aquí la función de escanear el código y pues voy a escanear el código el código de respuesta rápida que tengo allí en la pantalla a lo que ya tenga el código entonces va a poder descargar como ustedes van a ver voy a poder descargar esta aplicación Aunque si estoy trabajando desde un celular también puedo descargar la aplicación en mi celular o sea que ustedes pueden hacer estas aplicaciones tanto desde un computador como desde el celular aquí ya Estoy actualizando la aplicación que ya había descargado previamente y La estoy dando acá al funcionamiento aquí cuando presiona hablar ella habla Cali es una ciudad colombiana ubicada en el departamento del Valle del cauca al suroeste el botón pues sirve para salir también entonces doy el botón salir Entonces se sale la aplicación y ya tengo la aplicación allí entonces cuando vas a salirme de acá entonces si yo le doy por ejemplo acá Cali 20 me sale allí la aplicación y va a poder usarla Bueno ya tengo la mi aplicación observen que aquí también está la opción de descargarla la aplicación para ser enviada por correo o también puedo si le estoy programando desde mi celular también lo puedo lo puedo hacer desde mi celular bueno eso es todo eso es todo por hoy Entonces espero que les haya gustado por favor le dan me gusta lo comparten un abrazo para todos espero sus comentarios al final del vídeo en los comentarios puedo responder algunas dudas Espero que estén muy bien Un abrazo para todos de Santiago de Cali [Música] [Música] [Aplausos] [Música] [Música] [Música] [Aplausos] [Música]
