Looking Glass. Alumno: Pablo Salido Luis-Ravelo Innovación Docente e Iniciación a la Investigación Educativa en el Ámbito Informático y Comunicación

Transcripción

1 Looking Glass Alumno: Pablo Salido Luis-Ravelo Innovación Docente e Iniciación a la Investigación Educativa en el Ámbito Informático y Comunicación Máster Universitario en Formación del Profesorado de Educación Secundaria Obligatoria, Bachillerato, Formación Profesional y Enseñanza de Idiomas

2 Índice Introducción Looking Glass Interfaz de Looking Glass Ejemplos prácticos de Looking Glass Conclusiones Bibliografía

3 1. Introducción

4 1.1 Programación para Principiantes (I) En los últimos años, aparecen una serie de entornos de programación para jóvenes. Muchos de estos entornos están disponibles para descargar. Los alumnos pueden crear programas simples en cuestión de minutos.

5 1.1 Programación para Principiantes (II) Ventajas: Combinan lenguajes de programación con ejecución gráfica 2D ó 3D. Recurso educativo para profesores y alumnos, ayuda online y mecanismos para intercambio de programas. Tienen en cuenta creatividad, actividades motivadoras con juegos, animaciones, cuentos interactivos, etc.

6 1.1 Programación para Principiantes (III) Niños y jóvenes comienzan a tener interés por la programación. Muchos no se consideran programadores, ni contemplan la carrera de Informática. Disfrutan con el proceso creativo de diseñar animaciones, aportarle interactividad y compartirlo.

7 1.2 Por qué aprender a programar? Experiencia valiosa en un mundo impulsado por las nuevas tecnologías La programación es útil en muchos campos, no sólo en Informática. Es una aplicación del pensamiento computacional, supone incremento habilidad creativa y es útil para resolver problemas cotidianos.

8 1.3 Pensamiento computacional En 2006, Jeannette Wing, defendía que esta nueva competencia debería ser incluída en la formación de los jóvenes. J. Wing: El pensamiento computacional, implica resolver problemas, diseñar sistemas y comprender el comportamiento humano haciendo uso de los conceptos fundamentales de la informática. Proceso que permite formular problemas de forma que sus soluciones puedan ser representadas como secuencia de instrucciones y algoritmos. Proceso de reconocimiento de aspectos informáticos en el mundo que nos rodea, y aplicar herramientas y técnicas de la informática para comprender y razonar los problemas que se nos plantean.

9 2. Looking Glass

10 2.1 Alice (v2.0 Predecesor) (I) Entorno de desarrollo diseñador para programación, creando mundos virtuales 3D. enseñar Estudiantes Instituto - Universidad. Diseñado en torno a un paradigma orientado a objetos. Interfaz de arrastrar y soltar, donde el usuario arrastra las acciones a un editor de código y añade parámetros.

11 2.1 Alice (v2.0 Predecesor) (II) Permite introducir conceptos de programación, sin correr el riesgo de errores de sintaxis. Una vez que se crea el programa, se ejecuta en un mundo 3D. El usuario observa rápidamente si su programa se implementa correctamente. Web oficial Alice

12 2.2 Curiosidad

13 2.1 Qué es Looking Glass? (I) Aplicación cuentos interactivos en 3D. Desarrollado en la Universidad de Washington, St. Louis. Se publica en Ofrece ambiente divertido y atractivo. Los estudiantes se expresan a través de historias, que tienen que programar.

14 2.1 Qué es Looking Glass? (II) El IDE está basado en Alice 2.0. Alice se centra en crear animaciones para motivar el aprendizaje de programación. Looking Glass se diseña con el objetivo de ayudar a alumnos que no están familiarizados con la programación o no se muestran interesados en ella, a crear historias en un mundo 3D. Orientado para alumnos de 11 a 14 años. Se pretende romper con la disparidad de géneros en cursos de informática.

15 2.1 Qué es Looking Glass? (III) Aumento en el uso de videojuegos en planes de estudio de secundaria, pero no suelen abordar intereses femeninos. Looking Glass contiene animaciones que son específicamente sociales y de interacción: mira a dirígete hacia toca Personajes en 3D, objetos diseñados para promover historias y tutoriales basados en historias. Los estudiantes aprenden conceptos de programación clave (iteraciones, condicionales, código orientado a objetos,...)

16 2.2 Video demostrativo

17 2.3 Qué es la Comunidad Looking Glass? Es el portal online de Looking Glass. Los usuarios pueden compartir historias que han creado, observar contenido creado por la comunidad y descubrir nuevas animaciones y trucos para sus historias. Entorno seguro Estudiantes continúan su educación en programación de forma online y colaboren con otros usuarios.

18 2.4 Registro (I) Para ver el contenido, no hace falta registrarse. Registro en la comunidad, para utilizar proyectos publicados o hacer comentarios. Solicita nombre de usuario, contraseña, correo electrónico y fecha de nacimiento. A estudiantes menores de 13 años, se les solicita el de los padres. No solicita datos personales (nombre, dirección o número de teléfono)

19 2.4 Registro (II) La web únicamente muestra los nombres de usuario, el resto de información es privada. Los usuarios sólo se comunican a través de los comentarios públicos. No hay forma de que un usuario se comunique con los alumnos de forma privada a través de Looking Glass.

20 2.4 Registro (III) Consejos Seguridad. No incluir comentarios con datos personales o información que la gente utilice para encontrarte. Curiosidad. Si encuentras algo en un mundo creado por otro usuario que deseas saber cómo hacerlo, trate de hacer remix o pregunte a través de un comentario. Solidaridad. Si no tienes nada útil que aportar a los proyectos, no incluyas nada. Si crees como mejorar algo, deja tu comentario. Diviértete!.

21 2.5 Descarga La descarga está disponible para Windows, Linux y Mac OS X. Aproximadamente 1GB.

22 3. Interfaz de Looking Glass

23 3.1 Home Acceder a nuestra cuenta de Looking Glass. Observar la actividad reciente de la Comunidad. Consultar diferentes tutoriales.

24 3.2 Crear nuevo mundo (I) Podemos crear un nuevo mundo a partir de una plantilla de la comunidad (Community Templates). Es posibles crear un mundo a partir de una plantilla en blanco (Blank Templates).

25 3.2 Crear nuevo mundo (II) Para crear el mundo que hemos seleccionado, hacemos click en el botón Abrir Proyecto (Open Project) Nos aparece el Editor de Acciones y el escenario de la historia.

26 3.2 Crear nuevo mundo (III)

27 3.2 Editar escena (I) La escena está formada por Personajes Activos (Active Characters) y elementos estáticos (Prop Characters) Por defecto, la escena está compuesta por el personaje activo Camera y por el elemento estático room. En el editor de escena, los alumnos pueden elegir personajes 3D y objetos de la galería, y colocarlos en la escena para crear sus historias.

28 3.2 Editar escena (II) Podemos seleccionar los objetos ordenados: Por clases: Por temas:

29 3.2 Editar escena (III) Podemos seleccionar los objetos ordenados: Por grupos: También podemos buscar objetos por su nombre, añadir formas o texto y buscar objetos almacenados en nuestro directorio:

30 3.3 Añadir objeto Al seleccionar el objeto que queremos añadir, nos permite modificar el nombre que le queremos dar. Crea el objeto, en este caso, de tipo Alice y al que hemos llamado MyAlice. Lo añade a la escena.

31 3.4 Propiedades del Objeto (I) Al añadir un objeto a la escena podemos modificar sus propiedades: Colorear objeto: Opacidad: Vehículo. Elemento de referencia del objeto. Por defecto, es la escena. Posición. Podemos moverlo con el ratón, o modificando las coordenadas.

32 3.4 Propiedades del Objeto (II) Al añadir un objeto a la escena podemos modificar sus propiedades: Tamaño: Mostrar articulaciones del objeto (show joints):

33 3.5 Propiedades del Fondo Al igual que los objetos, podemos modificar las propiedades del fondo de la escena. Podemos modificar el suelo, las paredes, el techo, la opacidad y el vehículo (elemento de referencia).

34 3.6 Propiedades de la Escena Como sucede con los objetos y con el fondo, podemos modificar las propiedades de la escena. Podemos modificar el color de la atmósfera, modificar el color de la luz superior y luz inferior, y modificar la densidad de la niebla.

35 3.7 Eliminar objeto de la escena Para eliminar un objeto de la escena, vamos al editor de escena. Pulsar con el botón derecho sobre el objeto que queramos borrar. Y seleccionamos Eliminar (Delete).

36 3.8 Editor de Acciones El entorno de desarrollo Looking Glass además del editor de escena, también tiene un Editor de Acciones. En el editor de acciones, los usuarios pueden arrastrar y colocar los bloques del programa y establecer parámetros para estos bloques, creando el programa.

37 3.9 Bloques de Acciones (I) Para añadir una acción a un objeto, hacemos click sobre él. Escogemos el bloque de la acción que queremos que realice nuestro personaje, y lo arrastramos hasta el campo de My Story.

38 3.9 Bloques de Acciones (II) Para eliminar un bloque del programa, escogemos el bloque que deseamos borrar y lo arrastramos a la zona en la que se encuentran las otras acciones del personaje. Nos debe aparecer un icono de un contenedor, y soltamos el bloque ahí.

39 3.9 Bloques de Acciones (III) Si queremos copiar uno de los bloques de acción en el portapapeles, tenemos que arrastrar el bloque hasta el icono del portapapeles situado en la esquina superior derecha.

40 3.10 Tipos de Acciones (I) Entre las acciones que puede realizar un personaje podemos encontrar: Caminar (walk), caminar hacia (walk to) Hablar (say), pensar (think) Desplazarse (move), desplazarse hacia (move toward), alejarse de (move away from), desplazarse hasta (move to), colocarse (place). Girar sobre sí mismo (turn), girar eje horizontal (roll), ponerse cara a (turn to face) Aparecer (appear), desaparecer (disappear) Cambiar tamaño (resize), cambiar ancho (resize width), cambiar alto (resize height), cambiar profundidad (resize depth).

41 3.10 Tipos de Acciones (II)

42 3.11 Casillas de orden de acciones (I) Con estas casillas, se establece un orden a las acciones que vamos a asignar a un objeto. Con las casillas podemos realizar las acciones de una en una, realizarlas todas a la vez, repetirlas, añadirles un condicional,...

43 3.11 Casillas de orden de acciones (II) Hacer en orden (Do in order). Realiza las acciones de una en una. En nuestro programa se establece por defecto. Hacer a la vez (Do together). Realiza todas las acciones al mismo tiempo.

44 3.11 Casillas de orden de acciones (II) Repetir X veces (Repeat X times loop). Realiza las acciones de una en una, y las repite X veces. Repetir mientras [Condición] (Repeat while [condition] loop. Realiza las acciones, y las repita mientras la condición se cumpla.

45 3.11 Casillas de orden de acciones (III) Si [condición] entonces (If [condition] Then/Else). Realiza una acción si la condición se cumple, si no realiza otra acción.

46 3.11 Casillas de orden de acciones (IV) Para cada elemento en [Array] (For each item in []). Realiza una acción para cada uno de los elementos del array.

47 3.11 Casillas de orden de acciones (V) Cada elemento en [Array] a la vez (Each item in [] together). Realiza la acción para todos los elementos del array al mismo tiempo.

48 3.12 Otras Herramientas (I) Create or Open World: ir a la pantalla Home para crear un nuevo proyecto o abrir uno existente. Save: guardar el proyecto de manera local. Undo: deshacer cambios. Redo: rehacer cambios. Play: reproduce la historia desde el principio hasta el final, con todas las acciones que hemos añadido. Play & Explore: permite reproducir la historia viendo el paso a paso de las acciones.

49 3.12 Otras Herramientas (II) Find A Remix. Looking Glass está centrado en el desarrollo de una interfaz de reutilización de código que permite a los estudiantes a identificar la funcionalidad que parecen interesados en el código escrito por otros y ser capaces de volver a utilizar esa funcionalidad en sus propios programas

50 3.12 Otras Herramientas (III) Find A Remix.

51 4. Ejemplos prácticos Looking Glass

52 4.1 Crear una historia a partir de una plantilla de Comunidad 1. Elegimos la plantilla The Dog Show desde la pantalla de creación de nuevos mundos, y lo abrimos. 2. Nos aparece la escena con un mal enfoque. Editamos la escena para corregir el ángulo de la cámara.

53 4.1 Crear una historia a partir de una plantilla de Comunidad (II) 3. Modificamos la vista con las flechas de control de vista. 4. Volvemos al Editor de Acciones. 5. Arrastramos las Acciones que queramos que los personajes realicen a nuestra historia. 6. Le damos a Play para ver la escena completada.

54 4.2 Historia Animada 1. Creamos una escena similar a la siguiente: 3. Creamos la acción de que el chico pregunte si juegan a la pelota. 4. Seleccionamos a la chica para que realice la acción de decir Vale! 2. Acercamos al personaje más alejado del balón, a la chica. 5. Ahora queremos que el balón se desplace hasta el chico.

55 4.3 Utilizar Remix de la Comunidad 1. Creamos una escena similar a la siguiente: 3. Buscamos el remix Eat Fish 4. Relacionamos los personajes de la siguiente manera: 2. Buscamos los remix que han realizado otros usuarios

56 4.3 Utilizar Remix de la Comunidad (II) 5. Arrastramos la escena eat fish a nuestra historia: 6. Le damos a play para ver el resultado:

57 4.4 Compartir nuestra historia con la Comunidad 1. Hacemos click en compartir como World (Share as World): 2. Presionamos Recording : sobre Start 3. Rellenamos los datos correspondientes (título, descripción y etiquetas) 4. Finalizamos la subida de nuestro mundo, para que esté disponible en la Comunidad.

58 4.5 Play & Explore (Paso a paso) Hacemos click en Play & Explore. Observamos las acciones que van realizando nuestros personajes en la Historia.

59 4.6 Crear Acciones personalizadas 1. Creamos una escena similar a la siguiente: 2. Hacemos click en New Action: 3. Le damos el nombre saltar de alegría 4. Añadimos las siguientes acciones: 5. Si queremos acciones: editar nuestras

60 4.7 Crear una historia interactiva 1. Para crear una historia, vamos a utilizar el ejemplo del tutorial anterior. 3. Añadimos el Event Listener: 2. Editamos initializeeventlisteners: 4. Añadimos la acción saltar de alegría :

61 4.7 Crear una historia interactiva (II) 5. Probamos el ejemplo, dándole a Play y clickando sobre el personaje. 7. Clickamos sobre el árbol, y vemos que sucede. 6. Si añadimos otros elementos a la escena: 8. Para condicional: solucionarlo, añadir

62 5. Conclusiones

63 5. Conclusiones (I) Los entornos de programación para jóvenes tienen una serie de ventajas: combinan lenguajes de programación con ejecución gráfica 2D ó 3D, es un recurso educativo para profesores y alumnos, y tienen en cuenta y motivan la creatividad del estudiante. El pensamiento computacional es una competencia que se debería contemplar en la formación de los niños y jóvenes. Looking Glass permite a los usuarios a programar historias animadas en 3D. Utiliza una interfaz de programación de arrastrar y soltar para realizar la codificación más fácil de aprender y de reducir los errores potenciales.

64 5. Conclusiones (II) Con el uso de Looking Glass, los jóvenes pueden aprender los conceptos de programación clave como iteraciones, condicionales y código orientado a objetos.

65 6. Bibliografía

66 6. Bibliografía Web oficial de Looking Glass: People-Oriented Programming: pdf/ /peopleorientedprogrammingjudithgood.pdf Web oficial de Alice: Qué es el pensamiento computacional?