2. Aventuniversidad“La Universidad de córdoba para los niños” Comité de Pedagogía: Iris Rosmira Mendoza Tirado Gloria Esther Tirado Correa Kevin Andrés Tordecilla Negrete Comité de diseño: Jader Javier Montes Jaramillo Luis Fernando Negrete Castro Raúl Guillermo Ruiz Altamiranda Comité de Programación Manuel Darío Martínez Jiménez Marcela Teresa Lozano Herrera Víctor Alonso Padilla Rivera Leonardo Andrés Vargas Cogollo

3. Aventuniversidad“La Universidad de córdoba para los niños” Asesores: Juan Carlos Giraldo Cardozo Harold Bula Herazo Franklin Martínez Ávila Diplomado: Creación e Implementación de sistemas Hipermediales Educativos para la Web 2.0

4. pedagogia

5. La estrategia de gobierno en línea es un proyecto del Ministerio de comunicaciones del programa Agenda de conectividad que tiene como finalidad contribuir, mediante el aprovechamiento de las Tecnologías de la Información y la Comunicación (TIC), a la construcción de un Estado más eficiente, más transparente, más participativo y que preste mejores servicios a los ciudadanos y las empresas

6. La Universidad de Córdoba ha iniciado una política interna para la implementación del gobierno en línea que inicio desde el 2000, donde se hicieron diferentes inversiones administrativas. para sistematizar todos los procesos administrativos y académicos, en la parte de información de gestión académica se encuentra en un 90% y en proceso de implementación la parte administrativa en un 25%. Servicios como pago e inscripción en línea, gestión de notas, programas, planes de asignatura, entre otros.

7. Referentes http://www.colombiaaprende.edu.co/html/estudiantes/1599/channel.html http://mincoweb1.mincomercio.gov.co/vuce-ninos/home.html http://www.clublancita.mil.co/ El gobierno Colombiano espera entregar a los niños información en un lenguaje adecuado sobre el estado y todos los servicios que presta a la ciudadanía, promover el sentido de pertenencia por lo nuestro y especialmente por nuestro país y nuestras instituciones, brindar información de apoyo para su formación académica y como ciudadanos.

8. Objetivo General Diseñar un video juego que permita a niños en edad escolar, conocer la Universidad de Córdoba mediante la realización de diferentes actividades lúdicas y altamente interactivas que permitan la acumulación de experiencias, identificación con la información y sobre todo aprender mientras se divierte

9. Objetivo Específicos Desarrollar un Video Juego que comprenda el papel que cumple la Universidad de Córdoba en el entorno cultural en que se encuentra, de forma interactiva, propiciando con esto un acercamiento de los niños cordobeses a la universidad. Informar a la comunidad infantil sobre todas las dependencias, facultades, carreras y grupos de investigación que hacen parte de la Universidad de Córdoba. Actualizar de manera ágil la información, el registro de los usuarios y sus logros en el juego, haciendo uso de herramientas colaborativas y de comunicación entre los usuarios del juego.

10. Metodología Se realizará la actividad siguiendo los lineamientos de la metodología SECMALI [Giraldo Cardozo, SECMALI, 2007] que determina las actividades educativas, lúdicas, interactivas e ingenieriles, para la concepción, diseño, desarrollo y entrega de un JuEGAS (Juego Educativo Gestionado con Agentes Software).

11. Estrategias de Aprendizaje -A través de los juegos educativos hay una reproducción de muchos entornos, los cuales de una u otra forma permiten que los niños recreen experiencias lúdicas, sumado a esto hay un desarrollo de diferentes competencias como las cognitiva, Actitudinal y procedimental, logrando con ello una interacción profunda de este binomio. -aprendizaje autónomo (Manrique, 2004) que se define como la facultad que tiene cada persona para dirigir, controlar, regular y evaluar su forma de aprender, empleando estrategias que lo lleven a lograr el objetivo planeado.

12. Estrategias de Aprendizaje -Aumentar la conciencia del estudiante sobre su estado afectivo motivacional -Mejorar el conocimiento declarativo y procedimental del estudiante con respecto a las estrategias de aprendizaje -Favorecer el conocimiento y el análisis de las condiciones en que se produce la resolución de un determinado tipo de tareas

13. Estrategias de Enseñanza -Desarrollo de estrategias afectivo-motivacionales: Estas estrategias se orientan a que el estudiante sea consciente de su capacidad y estilos de aprender. -Desarrollo de estrategias de auto planificación: Relacionadas con diversos aspectos cuyo propósito último es lograr la formulación de un plan de estudio realista y efectivo.

14. Estrategias de Enseñanza -Desarrollo de estrategias de autorregulación: Conduce a la aplicación de estrategias seleccionadas para el estudio y el aprendizaje, revisión continua de sus avances, dificultades y éxitos en la tarea -Desarrollo de estrategias de auto evaluación: Se orienta a la evaluación del estudiante, de la tarea o actividades realizadas y de las estrategias utilizadas.

15. Mecánica del Juego Especificaciones bajo las cuales se guiaran los agentes dentro del sistema, los principios de su interacción en relación a las decisiones tomadas, mostrar las variables generales del proceso sus funciones, su comportamiento para el desarrollo del ambiente de aprendizaje, definir las estructuras de las actividades planteadas para que los niños adquieran información de manera agradable sobre los principios de la Universidad de Córdoba en sus órganos constitutivos y en definiciones filosóficas de misión y visión, se establecen también reglas de cumplimiento para poder llevar acabo distintas situaciones y relaciones que lleven al usuario a lograr los objetivos establecidos por el videojuego.

16. La Meta Recorrer todos los sitios de la Universidad de Córdoba, con un 80% de NI, con un NA de 80% durante 100 UT Abreviaturas NE: Nivel de Energía TR: Total Recorrido NI: Nivel de Información BX: Bonos de Experiencia BA: Bonos de Alimentación UT: Unidades de Tiempo NA: Nivel de Animo MH: Menciones de Honor

18. El tiempo transcurrido reduce las unidades de NE

19. Al iniciar el juego se cuenta con un 100% de NE

20. Se puede adquirir energía en las cafeterías

21. Para comprar en la cafetería se necesitan BA

22. Los NE son intransferibles

23. los NE determinan si el jugador puede seguir el recorrido

24. Para continuar el recorrido se necesita como mínimo un NE de 50

25. Total Recorrido (TR)

26. Representa el 100 % de los lugares visitados

27. Se avanza a medida el usuario cumple con las actividades de determinado sitio

29. Cada actividad proporciona BE que permiten aumentar el NI

30. Las actividades que no se cumplen reducen el NI

31. Los niveles de NI son intransferibles

32. La biblioteca aumenta los NI

33. Para ingresar a la biblioteca se necesitan MH

35. Los BX se pueden transferir

36. Si se responde acertadamente la pregunta del Docente investigador se adquieren BX

38. los BA se pueden transferir

39. los BA aumentan los NE

41. Proporciona Bonos de Experiencia

43. Interactúa con los escenarios y sus actividades

44. interactúa con los auxiliares, estudiantes, guías, y docentes de investigación.

45. Tiene Niveles de Energía

46. Tiene Niveles de Información

47. Adquiere Bonos de Alimentación

48. Adquiere Bonos de Experiencia

49. Adquiere Menciones de Honor

51. Actividad Principal PRIMERA MISIÓN Encontrar alguien dentro de la facultad que le puede decir cual es el contenido de la carta, al momento de traducirlo encuentra las siguientes especificaciones: Se pide información sobre las necesidades de los estudiantes Se pide información sobre los grupos musicales Se pide información sobre los grupos deportivos Debe existir una notificación (explicar) interna de lo que esta sucediendo y que debe ser enviado por un correo electrónico. Existe un tiempo determinado para el envió de la respuesta La misión finaliza al regresar una notificación de recibido.

53. El profesor de música no puede hacer su actividad sin que ya esté traducido la información de la carta y sea notificado de su participación dentro del proceso.

55. El profesor de informática no puede hacer su actividad sin que ya esté traducido la información de la carta, sea notificado de su participación dentro del proceso y además los informes de música y educación física.

56. Los docentes de informática, música español educación física solo podrán dar sus necesidades si se encuentra el docente de sociales.Recompensas Al completar la misión recibe BA, BE, MH.

57. Diseno

58. Metodología de trabajo de diseño Desde un principio para Aventuniversidad se pensó en un diseño detallado, bonito, parecido a la realidad del entorno de la Universidad de Córdoba y que a su vez este fuera lo más liviano posible en cuanto a peso, teniendo en cuenta que sería un producto para montar en la web. Cuando se habló de parecido a la realidad hacemos referencia a que la ubicación de las estructuras edificadas no será exactamente igual a la existente ya que entre cada una de las edificaciones existe demasiado espacio, por esta razón se hizo un pequeño reordenamiento territorial en cuanto a recortar distancias y permaneciendo igual la secuencia y ubicación de las estructuras.

59. Una vez se definió el reordenamiento con este mismo esquema se hizo un análisis de cuales serian los pantallazos a mostrar de cada una de las edificaciones de manera que se pudieran ubicar vínculos para que el usuario se dirija a otras calles, es decir a otras estructuras de todo el ambiente de la universidad a manera de un juego donde el personaje se desplaza por todo el pantallazo guiándonos como antecedentes con el conocido juego de nombre YoVille que está disponible en facebook y fue realizado por la compañía Zinga

60. Una vez definido todos estos temas con respecto a la ubicación y la vista de las cámaras, se analizaron opciones para construir cada uno de los pantallazos teniendo en cuenta el objetivo inicial (detallado, bonito y liviano). Inicialmente se ensayo con el programa gratuito de 3D denominado Google Sketchup, con este programa se construyeron dos edificaciones y de ahí se dedujo que no era conveniente hacer las estructuras en un programa de 3D ya que estos trabajan con puntos de fuga muy prolongados y puesto que la visión de nuestro juego es en picado, entonces las líneas verticales se prolongarían desde abajo hacia arriba de forma diagonal y esto dañaría el andar del personaje por todo el entornomostrado en el pantallazo como se observa en la imagen

61. Una de las razones por la que inicialmente queríamos utilizar un programa de 3D era para aprovechar la bondad de estos software con relación al uso de texturas y la proyección de luz y sombras, pero al ubicar la cámara de forma mas en picado mas se tornan diagonales las líneas verticales y esto no era conveniente para el efecto que queríamos causar, pues si se trabajaba con puntos de fuga como lo proponen estos software de 3D nos obligarían a poner el muñeco más grande o pequeño de acuerdo a su posición en el display y además al exportar estas imágenes tan detalladas para luego importar en flahs cs4 nos generaría mucho mas peso en el producto final para la web. Por esta razón se optó por trabajar con los mismos vectores de flash cs4, y de esta manera se obtendría un producto liviano.

62. El proceso de dibujo en flash se realizo después de fotografiar todos los edificios, una vez analizadas las fotos se procedió a dibujar la conocida zapata de las edificaciones y a partir de ella a levantar las líneas totalmente verticales como era lo acordado inicialmente teniendo como resultado la imagen siguiente.

63. Como se observa en la imagen las líneas se trazan de diferentes colores, porque de esta manera en caso de error se hace fácil seleccionar la línea errónea para eliminarla o ajustarla y esto ahorra mucho tiempo a la hora de dibujar. Por otro lado nos dimos cuenta que flash permite el uso de texturas quedándonos como único problema las luces y sombras.

64. Acudiendo a nuestra astucia ideamos la forma de semejar este efecto como si fuera un programa de 3D y fue el siguiente: 1-anexamos tres capas mas a la que teníamos inicialmente con el esqueleto del dibujo de la edificación. 2-luego copiamos el fotograma de la primera capa y la repetimos en cada uno de los fotogramas de las tres capas nuevas anexadas.

65. 3-A la primera capa la denominamos “texturas” y en ella solo rellenábamos todo el dibujo con las texturas a utilizar, esto ayuda mucho a no subir el tamaño del producto final puesto que flash hace un calculo para repetir el la la pequeña textura en todo el área donde nosotros la deseamos y mejor aun no permite cambiar la dirección de esta textura par hacerla coincidir con la perspectiva manejada.

66. 4-A la segunda capa la denominamos sombrabisel, ya que en ella nos dedicamos a rellenar con un negro en alpha de 40% las zonas del dibujo en las cuales imaginamos no pegaría el sol, partiendo de la idea imaginaria de que el sol estaría ubicado en un lugar x, el cual se deduce luego de ver la imagen final.

67. 5- la tercera capa la denominamos sombrareal, pues en esta capa anexamos unas líneas en el piso del dibujo imaginando cual seria la sombra que la edificación proporcionaría en el suelo y luego esta se relleno con un negro en alpha del 20%.

68. 6-a la cuarta y ultima capa la denominamos objetos, en esta capa es donde se anexan árboles, bancas, lámparas, postes, autos o cualquier tipo de objeto que ayude a la ambientación del entorno que se esta mostrando en el momento. 7-y como ultimo paso se procedió a eliminar cada línea de cada capa, suprimiéndolas totalmente, obteniendo como resultado la imagen final, una imagen sin líneas y que no tiene nada que envidiarle a cualquier otra exportación de una imagen hecha en un programa de 3D

69. capa 1 + capa 2 Capa 1 (texturas) Capa 2 (sombrabisel) Suma de las cuatro capas Capa 3 (sombrareal) Capa 4 (objetos)

70. Componente Grafico y de Interfaz

71. Edificio de Agronomia

72. Auditorio Cultural

73. Biblioteca

74. Cafetería, exterior

75. Cafetería, interior

76. Cancha Basket

77. Cancha Micro

78. Salones Ciencias básicas e ingenierías

79. Facultad de educación y ciencias humanas

80. Parqueadero de Facultad de Educación

81. Edificio de Post-Grados

82. Danza y Gimnasio

83. Edificio Administrativo

84. Unidad Administrativa de Salud

85. Estadio

86. Geografía

87. Informática

88. Matemática y Estadística

89. Oficina de la Facultad de Educación

90. Piscina

92. Desarrollo De los Personajes La idea principal de diseño del juego consiste en generar un entorno agradable para el niño, en donde se sienta cómodo e identificado, es cuando nace la necesidad de crear personajes que se acoplen a los principios antes mencionados, las tendencias internacionales en cartoon ó caricaturas presentan personajes con características de diseño definidas y en cierto sentido estandarizadas, alejándose un poco de la realidad y entrando a un contenido mas abstracto de la forma. “Imagen de la bella durmiente de Disney, realizado en la década de los cincuenta, los personajes son mas identificados con la realidad.”

93. Tomamos como referencia los personajes que mas impacto y acogida tienen en los niños actuales, que corresponden a la imagen de cartoonnetwork (Canal de televisión para niños), la idea se centra en la creación de personajes donde las figuras toman diferentes estructuras, se aleja un poco de los principios realistas, como también la idea de reducir las cosas a su estructura geométrica esencial. “Imagen de personajes de Cartoon Network, los personajes se vuelven mas abstractos jugando con las formas y colores.”

94. Uno de los referentes para la creación de los personajes es el reconocido cartoonistaGenndyTartakovsky reconocido por sus trabajos (Ellaboratorio de Dexter, Samurai Jack, Las Chicas Superpoderosas) siendo estos un ejemplo de la idea central de los personajes y de lo que se ha venido mencionando. Otro de los referentes utilizados es Van Partible creador entre muchos otros de Jhony Bravo.

95. A continuación y teniendo en cuenta los conceptos e imágenes tratados anteriormente diseñamos una serie de personajes con las características que mas atraen a los niños, estos personajes harán parte de nuestro juego AVENTUNIVERSIDAD:

96. Personaje Masculino

97. Profesor de Español

98. Profesor de Ingles

99. Profesor de Musica

100. Celador

101. Secretaria

103. Inicialmente para trabajar la parte grafica del videojuego se prefiere utilizar varias herramientas que nos ayuden a desarrollar los gráficos lo más adecuado, para el videojuego que se va a desarrollar. Una ves pensado y analizados los elementos y objetos que se van a mostrar en pantalla basándonos en la metodología y mecánica del juego, se decide trabajar con herramientas como PhotoShop y Flash CS4. Básicamente estos son los software empleados para desarrollar nuestros diseños. ¿Por qué trabajar con estas herramientas y no con otras? Bueno primero que todo llegamos a ellas por la experiencia que se ha adquirido gracias a la elaboración de otros proyectos en el transcurso de la carrera (Licenciatura en Informática y medios audiovisuales, Universidad de Córdoba) y también por el fácil manejo y la amplia funcionalidad que estos ofrecen al momento de diseñar.

104. Centrándonos en el juego en si y la ubicación que tendrán los iconos, estos se ubicaran la parte superior de la pantalla ocupando un mínimo espacio en ella, pero que proporcione o brinde al usuario la información necesaria en la interacción entre maquina – usuario. Ahora hablemos un poco sobre el diseño de los iconos y paisaje que conformaran el juego. Una ves iniciado el videojuego aparecerá un intro con un diseño referente a la universidad a la cual se desarrolla la aplicación y el contexto en el que nos encontramos, Barra de niveles seguido a esto la parte icónica del juego ha sido analizada previamente para poder desarrollarse y así hacer de estos un objeto o elemento mas del juego que brinde al usuario información y navegabilidad. Se cargaran inicialmente los siguientes: Nivel de energía (indicara el nivel de energía que posee el personaje en el juego), Bonos de experiencia (indicara la experiencia o interacción que ha tenido en el juego), Bonos de alimentación (indicara el estado de alimentación que tiene el personaje). Estos iconos o estas abreviaciones se encontraran definidas y mas explicitas en la mecánica del juego.

105. Ahora hablemos un poco sobre el diseño de los iconos y paisaje que conformaran el juego. Una ves iniciado el videojuego aparecerá un intro con un diseño referente a la universidad a la cual se desarrolla la aplicación y el contexto en el que nos encontramos, seguido a esto la parte icónica del juego ha sido analizada previamente para poder desarrollarse y así hacer de estos un objeto o elemento mas del juego que brinde al usuario información y navegabilidad. Se cargaran inicialmente los siguientes: Nivel de energía (indicara el nivel de energía que posee el personaje en el juego), Bonos de experiencia (indicara la experiencia o interacción que ha tenido en el juego), Bonos de alimentación (indicara el estado de alimentación que tiene el personaje). Estos iconos o estas abreviaciones se encontraran definidas y mas explicitas en la mecánica del juego.

106. Caratulas de entrada

107. Otro punto importante para el diseño de interfaz es la forma y colores del juego, para esto implementamos colores vivos como una forma de capturar la atención del usuario pero sin hacer un abuso de estos colores, ya que se podrían ocasionar una sobrecarga de colores. Formulario delogueo Formularios de registro de datos

108. Mapa del Juego Una vez el Niño registre sus datos, o si ya es usuario antiguo y se logue, le aparecerá el mapa del juego, el cual podemos ver a la derecha, desde allí el niño decidirá a donde quiere desplazarse, teniendo en cuenta que cada lugar le ofrecerá un reto por cumplir

109. Música del Juego La música de nuestro juego se centra en dos puntos importantes, la representación del movimiento en relación a la aventura, y la variabilidad de sentimientos y emociones dependiendo del escenario o en la situación en la que se encuentre, dándole al juego una identidad y acoplamiento entre lo que se ve y lo q se oye.

110. Aspectos Técnicos Para evitar tener un proyecto muy pesado se ha recurrido a una composición minimalista, recurriendo solo a aquellos instrumentos que son necesarios para dar las sensaciones requeridas para determinado escenario El sonido se ha dejado en el establecido por MIDI ya que da una efecto más para niños y enfocado a videojuegos, muy parecido a los que aparecieron en las décadas de los ochenta y noventa (Super Mario, Zelda, Donkey Kong) Konji Kendo, NobouHuematsu, KoishiSuguiyama

111. La música se creo en el programa Guitar PRO en su versión número cinco, además se ha exportado por cada pista creada una versión en el formato musicXML, para poder ser editado en distintos programas de composición entre los mas destacados de ésta área (Finale, Sibelius) herramientas libres (MuseScore, RoseGarden)

114. Otros Referentes Para la creación de algunas de nuestras pistas se tuvieron en cuenta los argumentos musicales de dos músicos populares famosos internacionalmente, JhonDeacon y Bernard Edwards, este último ya fallecido, sus composiciones se basan en el bajo como instrumento guía y predominante, es cuando tenemos entonces una fusión entre la melodía tipo Kondo, Uematsu con el ritmo marcado y profundo de Deacon y Edwards.

116. Porro AvenetUniversidad La creación de la música para aventuniversidad generó nuevas ideas, por eso fuimos a lo Esencial a lo nuestro (porro) haciendo arreglos que guardaran los principios que hemos Venido mencionando con las melodias tradicionales, entre esos arreglos tenemos Tolú Rio Sinú Soy pelayero

117. PROGRAMACION

118. Para la programación del juego se utilizó la herramienta Adobe Flash CS4® y el lenguaje empleado fue ActionScript 3.0, este es un lenguaje de programación orientado a objetos utilizado en especial para aplicaciones tipo Web animadas realizadas en Adobe Flash® con mayor dinamismo e interactividad, este surgió desde la versión 4 de Flash y ha evolucionado hasta la versión 10 de Flash (Adobe Flash CS4®). ActionScript es un lenguaje de script, esto es, no requiere la creación de un programa completo para que la aplicación alcance los objetivos.

119. En este ejemplo vemos las primeras pruebas de detección de colisiones entre dos MovieClips, trabajando con la clase Tween para el movimiento con aceleración y Hitest para las colisiones.

120. En este caso trabajamos las colisiones dentro de un escenario con un código distinto, utilizando un timer para el movimiento y removiéndolo al momento de las colisiones

121. Finalmente se desarrolló una clase para cada movieclip donde se agrega el personaje y se recorren todas las colisiones del escenario. Cada objeto dentro del escenario tiene su zona de colisión, representada por los cuadros grises que se muestran en la imagen.

122. De esta forma agregamos al personaje en cada movieclip y le damos una ubicación dentro del mismo así como controlamos la cara del personaje que se debe ver de acuerdo a la posición a la que desee moverse

123. Nuestro personaje presenta 4 caras, cada una es visible solo dependiendo de la dirección del teclado, con el cual se hacen los movimientos, están diseñadas en diagonal puesto que así es la perspectiva del juego.

124. En esta sección del código vemos entonces como se hace el movimiento del personaje con el teclado y como se muestra y se oculta cada cara de acuerdo a su posición.

125. Nivel 1 (150PX) Nivel 2 (245PX) Nivel 3 (340PX) Nivel 4 (465PX) Nivel 5 (530PX) Nivel 6 (555PX) Nivel 7 (965PX) Para darle realidad al juego nos enfocamos en la movilidad del personaje, vista desde dos puntos: las colisiones y la posición frente a los objetos. Para esto dividimos el escenario por niveles, así, el personaje puede evitar los objetos con los cuales debe hacer colisión y ubicarse por delante o detrás de estos de acuerdo a su posición.

126. Diseño de la Base de Datos La base de datos para el juego AventUniversidad debe contener información acerca de los usuarios, facultades, departamentos y programas, incluidos sus semilleros de investigación, de la universidad de Córdoba. Debe almacenar los datos los datos para los usuario, que además de los datos de registro e inicio de sesión, se le asignan las puntuaciones (bonos, nivel de energía, menciones, etc.) obtenidas durante le recorrido de las actividades y el numero de estas aprobadas.

127. Modelo Entidad-Relación

128. Los datos referentes a Facultades, departamentos, programas y semilleros de investigación serán suministrados por el administrador del sitio. Los datos que corresponden a usuarios, actividades, recorridos y puntuaciones se obtendrán mediante la interacción de juego-usuario.

129. Modelo Relacional

130. A partir del diseño de la base de datos y los modelos correspondientes se realiza la programación del sitio desde la óptica del servidor con el lenguaje PHP. Este lenguaje de programación cumple con los requerimientos establecidos en el documento de la propuesta. PHP permite además conectar la base de datos con los escenarios actividades del videojuego que fueron desarrollados con el lenguaje ActionScript 3.0. El siguiente es un ejemplo de envío de datos desde la interfaz (archivo swf) a la base de datos mediante PHP El siguiente código (en ActionScript) carga y envía los datos que se toman en la interfaz a través de un archivo PHP a una clase PHP

132. En el archivo php(en este caso login.php):

133. En la clase los datos son recibidos mediante parámetro se realiza la respectiva consulta.

134. Agradecimientos: Juan Carlos Giraldo Cardozo Harold Bula Herazo Franklin Martínez Ávila Alexander Toscano Ricardo