Información general


Tipo de asignatura: optativa

Coordinador:

trimestre:3

Créditos: 4

Profesorado: Joan Jou Majó

Descripción


El objetivo final de aprendizaje de la asignatura es el diseño, codificación, depuración y prueba de aplicaciones interactivas multimedia con los lenguajes estándares de la web: HTML5 (Canvas), CSS3 y javascript (jQuery). El tipo de aplicación que se trabajará serán los juegos multimedia con las siguientes características de programación: utilización de objetos, utilización de la estructura de datos adecuada, el usuario interacciona con el ratón y el teclado, incorporación de sonido, contiene animaciones interactivas con los objetos principales y, finalmente, se ha de poder guardar el juego (estado y puntuaciones).

Para conseguir este objetivo final habrá que estudiar los lenguajes HTML y CSS para diseñar la interfaz gráfica del usuario, especialmente, el objeto Canvas de HTML5. También será objeto de estudio el lenguaje de programación, javascript, para la programación de la lógica del juego y la programación en respuesta a eventos.

Esta asignatura dispone de recursos metodológicos y digitales para hacer posible su continuidad en modalidad no presencial en el caso de ser necesario por motivos relacionados con la Covidien-19. De esta forma se asegurará la consecución de los mismos conocimientos y competencias que se especifican en este plan docente.

Resultados de aprendizaje


A nivel general, esta asignatura contribuye a siguientes resultados de aprendizaje (RA) especificados para la materia a la que pertenece (Algorítmica y Programación):

  • Utilizar de forma apropiada teorías, procedimientos y herramientas en el desarrollo profesional de la ingeniería informática en todos sus ámbitos (especificación, diseño, implementación, despliegue -implantació- y evaluación de productos) de forma que se demuestre la comprensión de los compromisos adoptados en las decisiones de diseño.
  • Demostrar conocimiento de la dimensión ética en la empresa: la responsabilidad social y corporativa en general y, en particular, las responsabilidades civiles y profesionales de los ingenieros en informática.
  • Demostrar conocimiento y comprensión de hechos esenciales, conceptos, principios y teorías relativas a la informática ya sus disciplinas de referencia.
  • Construir algoritmos correctos y eficientes para problemas de dificultad pequeña.
  • Implementar algoritmos sencillos en un lenguaje de programación imperativo de referencia para el nivel inicial.
  • Aplicar técnicas básicas de descomposición modular de programas.
  • Diseñar la arquitectura de los programas utilizando técnicas de orientación a objetos, de modularidad y de especificación e implementación de tipos abstractos de datos.
  • Colaborar en un entorno unidisciplinar. Identificar los objetivos del grupo y colaborar en la estrategia a seguir y un plan de trabajo para conseguirlos. Identificar las responsabilidades de cada componente del grupo y asumir el compromiso personal de la tarea asignada. Evaluar y presentar los resultados propios. Identificar el valor de la cooperación e intercambiar información con los otros componentes del grupo. Intercambiar información sobre el progreso del grupo y proponer estrategias para mejorar su funcionamiento.
  • Ser capaz de llevar a cabo, solo o en un equipo pequeño, proyectos de programación de tamaño considerable, considerando las implicaciones de las decisiones que se toman en cada etapa y en un contexto profesional de desarrollo del software.

A un nivel más concreto, al finalizar el curso, el estudiante debe ser capaz de:

  • (RA1) Escribir programas en javascript que utilizan objetos y arrays para almacenar la información. Estos programas se escribirán con un grado importante de descomposición modular.
  • (RA2) Diseñar, codificar, depurar y probar un juego interactivo multimedia con los lenguajes estándares de la web: HTML5 (Canvas), CSS3 y javascript (jQuery).
  • (RA3) Utilizar el canvas como un elemento de salida de la interfaz gráfica de usuario, es decir, saber dibujar y pintar en el canvas.
  • (RA4) Utilizar el lenguaje javascript y la librería jQuery para dotar a las páginas web de animación e interactividad utilizando el paradigma de programación en respuesta a eventos, tanto con objetos del DOM como en el propio canvas. 
  • (RA5) Resolver problemas de movimiento, colisiones, y rebotes de objetos en la interfaz del juego multimedia implementando algoritmos sencillos de forma adecuada y eficiente.
  • (RA6) Incorporar sonido al juego a través de efectos sonoros que refuercen la interacción del usuario.
  • (RA7) Utilizar de forma apropiada herramientas de desarrollo profesional de la ingeniería informática (IDE).
  • (RA8) Demostrar conocimiento de la dimensión ética: salvaguardar los derechos de autor de las imágenes y sonidos empleados en el desarrollo.
  • (RA9) Colaborar de forma efectiva y responsable en un grupo para el desarrollo del software.

Metodología de trabajo


La metodología docente que se quiere implementar es la de aprendizaje mediante ejemplos (learning by example). A teoría, grupo grande, se hace una presentación y discusión de las actividades que el alumno desarrollará en el laboratorio y fruto de este análisis, se explican los conceptos más importantes para alcanzar los objetivos de aprendizaje del asignatura.

Las actividades están pensadas para que se alcancen los objetivos de forma incremental, es decir, en cada actividad se presentan y trabajan aspectos nuevos que nos servirán en todas las actividades futuras.

contenidos


Título contenido 1: Lenguajes HTML, CSS y javascript.

Descripción:

En este contenido se trabaja:

1.Sintaxi de un elemento HTML.
2.Text, imágenes, vídeo y audio en HTML.
3.Sintaxi CSS.
4.Model de caja de los elementos HTML.
5.Selectors y propiedades.
6.Posicionament de las capas.
7.Noves características de CSS3: transiciones y transformaciones.
8.Sintaxi javascript vs Java.
9.Estructuració de un programa javascript en funciones.
10. Construcción de Objetos: propiedades y métodos.
11. Clases, herencia y modularidad.
12. Ejercicios.

actividades vinculadas

Actividad 1: Juego basado en el DOM.
Actividad 3: Práctica final
Actividad 4: Examen de programación


Título contenido 2: HTML Dinámico (DHTML).

Descripción:

En este contenido se trabaja:

1.Model de Objetos del Documento (DOM).
2.Introducción en la librería jQuery.
3.Accés y modificación del DOM con jQuery.
  3.1.Selectors: básicos, avanzados y filtros.
  3.2.Afegir, cambiar y borrar elementos HTML.
  3.3.Llegir y cambiar propiedades CSS.
  3.4.Efectes jQuery: mostrar / ocultar, animaciones.
4.Programació en respuesta a eventos del usuario.
  4.1.Model de eventos básico.
  4.2.Obtenció de información del evento (objeto Event).
  4.3.Model de eventos de jQuery.
5. Ejercicios.

actividades vinculadas:

Actividad 1: Juego basado en el DOM.
Actividad 2: Juego multimedia basado en Canvas
Actividad 3: Práctica final
Actividad 4: Examen de programación


Título contenido 3: Juegos multimedia con HTML5 Canvas.

Descripción:

En este contenido se trabaja:

1.Dibujar en el Canvas.
2.Animación.
3.Col • colisiones.
4.Text, imágenes, vídeo y audio interactivo en el Canvas.
5. Seleccionar y arrastrar elementos en el Canvas.
6. Ejercicios.

actividades vinculadas:

Actividad 2: Juego multimedia basado en Canvas.
Actividad 3: Práctica final.
Actividad 4: Examen de programación.

Actividades de aprendizaje


Con el objetivo de recoger evidencias del logro de los resultados de aprendizaje esperados se realizarán 4 actividades con carácter de evaluación.

Para superar (aprobar) las actividades evaluativas, los estudiantes deberán demostrar

  • Que han adquirido los conocimientos teóricos relativos a los contenidos de la asignatura y que su comprensión les permite llevarlos a la práctica [MECES-2 punto a, punto c]
  • Que pueden desarrollar soluciones a problemas que, si bien son similares a otros vistos anteriormente, presentan aspectos que son nuevos [MECES-2 punto f]

En relación a las competencias básicas asignadas a la asignatura, éstas quedan cubiertas especialmente en cuanto a los aspectos que se explicitan:

  • CB2: resolución de problemas dentro de su área de estudio.
  • CB4: transmitir información, ideas y soluciones.
  • CB5: desarrollo de habilidades de aprendizaje necesarias para estudios posteriores (acceso autónomo a documentación, hábitos de trabajo efectivos)

En cuanto a las competencias transversales asociadas a la asignatura:

  • CT1: conocimiento tercera lengua. Esta competencia se trabaja a partir de las fuentes documentales que los estudiantes deben consultar, dado que todas ellas se encuentran en inglés.
  • CT2: trabajo en grupo con el fin de contribuir a desarrollar proyectos con sentido de la responsabilidad. Esta competencia se trabaja con las actividades prácticas dado que se desarrollan en grupo y el estudiante asume un rol dentro del equipo con unas tareas y objetivos concretos.

 

Título de la actividad 1: Juego multimedia basado en el DOM.

Descripción general:

En esta actividad se presenta el entorno de desarrollo web que se usará en la asignatura. El alumno se familiarizará en la edición del programa así como la prueba y depuración del mismo. Se utilizarán las herramientas de desarrollo consola (para ver los errores de programación), depurador (para ejecutar paso a paso el programa) y el inspector de variables (para ver la traza del programa).

Se deberá completar la codificación de parte de la lógica de un juego cuya interfaz serán diferentes elementos HTML. El estudiante dispondrá de un pre (inacabado) del juego que debe implementar.

Material de apoyo:

Enunciado de la práctica.

Preproyecto del juego donde ya está elaborada la interfaz gráfica de usuario con objetos del DOM.

Entregas y vínculos con la evaluación:

Hay que entregar el proyecto terminado, es decir, que cumpla con todas las especificaciones del enunciado. Habrá también entregó un documento con una breve memoria donde se detallan los aspectos de programación que el alumno ha implementado razonando la idoneidad y eficiencia de los algoritmos empleados.

El resultado de la actividad se incorporará a la evaluación de la asignatura con un valor del 20% de la nota final.

objetivos específicos:

Al finalizar la actividad el estudiante debe ser capaz de:

  • conocer y usar adecuadamente el entorno de desarrollo: escribir, probar y depurar el programa.
  • programar la animación de objetos de la interfaz de usuario: traslación y rotación.
  • acceder a los elementos HTML de la interfaz de usuario para su modificación.

Vinculación con los resultados de aprendizaje y competècnies de la asignatura:

Esta actividad es una evidencia de los resultados de aprendizaje: RA2, RA4, RA6, RA7 y RA8.

Esta actividad contribuye al logro de las competencias comúnes y específicas siguientes (entre paréntesis los aspectos más relevantes de cada competencia a los que la actividad contribuye):

  • CIN1 (diseñar y desarrollar aplicaciones, asegurando su fiabilidad),
  • CIN5 (conocimiento y administración de aplicaciones informáticas: Servidor web),
  • CIN6 (aplicar procedimientos algorítmicos básicos),
  • CIN8 (diseñar y construir aplicaciones de forma robusta, segura y eficiente),
  • CIN17 (diseñar IPO que garenteixin la accesibilidad y usabilidad),
  • EFB3 (comprender y dominar los conceptos básicos de la lógica y algorítmica) y
  • EFB4 (uso de programas informáticos: IDE) 
           

 

Título de la actividad 2: Juego multimedia basado en Canvas.

Descripción general:

Hay que diseñar un juego multimedia (audio y / o vídeo) en que la parte más importante de la interfaz gráfica de usuario sea uno o varios elementos Canvas. La interacción será con el ratón y permitirá mover un objeto dentro del canvas.

Material de apoyo:

Enunciado de la práctica.

Preproyecto del juego donde ya está resuelto el movimiento con el ratón de un objeto dibujado en el canvas por parte del usuario.

Entregas y vínculos con la evaluación:

Hay que entregar el proyecto terminado así como una memoria donde se detallan los aspectos de programación que el alumno ha implementado.

El resultado de la actividad se incorporará a la evaluación de la asignatura con un valor del 20% de la nota final.

objetivos específicos:

Al finalizar la actividad el estudiante debe ser capaz de:

  • dibujar gráficos (bolas y líneas) en el canvas.
  • modelar con objetos y descomponer el proyectos en diferentes módulos.
  • programar la interacción del usuario con el canvas.
  • resolver los cálculos necesarios para detectar colisiones e intersecciones.
  • incorporar sonido a la ejecución del juego.

Vinculación con los resultados de aprendizaje y competècnies de la asignatura:

Esta actividad es una evidencia de los resultados de aprendizaje: RA1, RA2, RA3, RA6, RA7, RA8 y RA9.

Esta actividad contribuye al logro de las competencias comúnes y específicas siguientes (entre paréntesis los aspectos más relevantes de cada competencia a los que la actividad contribuye):

  • CIN1 (diseñar y desarrollar aplicaciones, asegurando su fiabilidad),
  • CIN3 (hábitos de trabajo efectivos en los entornos de desarrollo de software),
  • CIN5 (conocimiento y administración de aplicaciones informáticas: Servidor web),
  • CIN6 (aplicar procedimientos algorítmicos),
  • CIN7 (usar estructuras de datos),
  • CIN8 (diseñar y construir aplicaciones de forma robusta, segura y eficiente),
  • CIN17 (diseñar IPO que garenteixin la accesibilidad y usabilidad),
  • EFB3 (comprender y dominar los conceptos básicos de la lógica y algorítmica) y
  • EFB4 (uso de programas informáticos: IDE)  

 

Título de la actividad 3: Práctica final.

Descripción general:

El alumno debe diseñar, codificar y depurar un juego interactivo donde el elemento más importante de la interfaz de usuario sea el canvas.

La interacción será con el teclado y con el ratón y habrá que resolver colisiones entre los objetos dibujados en el canvas.

El juego debe tener sonido y rankings.

Se debe poder almacenar el estado del juego: puntos, ranking, etc.

La única librería javascript permitida es jQuery.

Los alumnos que conforman el grupo que ha desarrollado la práctica, harán una presentación y defensa oral de su trabajo en clase.

Material de apoyo:

Enunciado de la práctica.

Entregas y vínculos con la evaluación:

Hay que entregar el proyecto terminado así como una memoria muy detallada con la descripción de todos los aspectos de programación que el alumno ha implementado. Habrá una presentación y defensa oral pública del trabajo.

El resultado de la actividad se incorporará a la evaluación de la asignatura con un valor del 30% de la nota final.

objetivos específicos:

Al finalizar la actividad el estudiante debe ser capaz de:

  • diseñar, codificar, depurar y probar un juego interactivo multimedia con los lenguajes estándares de la web: HTML5 (Canvas), CSS3 y javascript (jQuery).
  • las características de programación que se implementan son: utilización de objetos, utilización de la estructura de datos adecuada, el usuario interacciona con el ratón y el teclado, incorporación de sonido, contiene animaciones interactivas con los objetos principales y, finalmente, se puede guardar el juego (estado y puntuaciones).

Vinculación con los resultados de aprendizaje y competècnies de la asignatura:

Esta actividad es una evidencia relacionada con todos los resultados de aprendizaje de la asignatura: RA1 ... RA9, pero, especialmente, se evalúa el RA5 y RA9.

Esta actividad contribuye al logro de las competencias comúnes y específicas siguientes (entre paréntesis los aspectos más relevantes de cada competencia a los que la actividad contribuye):

  • CIN1 (diseñar y desarrollar aplicaciones, asegurando su fiabilidad),
  • CIN3 (hábitos de trabajo efectivos en los entornos de desarrollo de software),
  • CIN5 (conocimiento y administración de aplicaciones informáticas: Servidor web),
  • CIN6 (aplicar procedimientos algorítmicos),
  • CIN7 (usar estructuras de datos),
  • CIN8 (diseñar y construir aplicaciones de forma robusta, segura y eficiente),
  • CIN17 (diseñar IPO que garenteixin la accesibilidad y usabilidad),
  • EFB3 (comprender y dominar los conceptos básicos de la lógica y algorítmica) y
  • EFB4 (uso de programas informáticos: IDE)      

 

Título de la actividad 4: Examen de programación.

Descripción general:

Examen final.

Se realiza un único examen final donde se evalúa los conocimientos de los contenidos 1, 2 y 3. Esta prueba consta de una parte de cuestiones sobre conceptos asociados a los objetivos de aprendizaje de la asignatura en cuanto al conocimiento y comprensión, y de un conjunto de ejercicios de aplicación. El estudiante dispone de 3 horas para la realización de la prueba. Una vez realizado el examen, el profesor publicará la resolución.

Material de apoyo:

Enunciado de la prueba.

Entregas y vínculos con la evaluación:

Resolución de la prueba, por escrito.

El resultado de la actividad se incorporará a la evaluación de la asignatura con un valor del 30% de la nota final.

objetivos específicos:

Al finalizar la actividad, el estudiante debe ser capaz de:

  • Escribir programas en javascript que utilizan objetos y arrays para almacenar la información.
  • dibujar en el canvas.
  • Utilizar el lenguaje javascript y la librería jQuery para dotar a las páginas web de animación e interactividad utilizando el paradigma de programación en respuesta a eventos, tanto con objetos del DOM como en el propio canvas. 
  • Resolver problemas de movimiento, colisiones, y rebotes de objetos en la interfaz del juego multimedia.

Vinculación con los resultados de aprendizaje y competècnies de la asignatura:

Esta actividad es una evidencia de los resultados de aprendizaje: RA1, RA3, RA4 y RA5

Esta actividad contribuye al logro de las competencias comúnes y específicas siguientes (entre paréntesis los aspectos más relevantes de cada competencia a los que la actividad contribuye):

  • CIN1 (desarrollar software),
  • CIN6 (aplicar procedimientos algorítmicos básicos para diseñar soluciones a problemas),
  • CIN7 (usar de forma eficiente, los tipos y estructuras de datos más adecuadas),
  • CIN8 (construir aplicaciones de forma robusta y eficiente),
  • CIN17 (diseñar IPO que garenteixin la accesibilidad y usabilidad),
  • EFB3 (comprender y dominar los conceptos básicos de la lógica y de la algorítmica)        

Sistema de evaluación


La nota final del curso se obtendrá de la siguiente ponderación:

      NotaFinal = 0,2 NotaPráctica1 + 0,2 NotaPráctica2 + 0,3 NotaPrácticaFinal + 0,3 NotaExamenProgramación

Si al finalizar el curso el estudiante no ha obtenido una NotaFinal igual o superior a 5.0, podrá recuperar la NotaPràcticaFinal con un trabajo adicional y presentarse a un examen de programación de recuperación, en las fechas que determine el Jefe de estudios.

 

Normas de realización de las actividades:

Las prácticas (actividades 1, 2 y 3) son en grupo de dos personas y se realizarán en el laboratorio de computadoras con un IDE profesional.

El examen de programación es una actividad individual. Es necesario sacar una nota mínima de 5 en el examen de programación para poder aprobar la asignatura.

Bibliografía


básico

Physics for JavaScript Games, Animation, and Simulation with HTML5 Canvas. Adrian Dobre, Dev Ramtal, Apress 2014, ISBN 978-1-4302-6338-8

Steve Fulton, Jeff Fulton. HTML5 Canvas. Native Interactivity and Animation for the Web. O'Reilly Media, 2011. ISBN: 978-1-449-39390-8

Complementario

MDL, Web technology for developers> JavaScript, https://developer.mozilla.org/en-US/docs/Web/JavaScript

David Sawyer McFarland, JavaScript & jQuery. The missing manual. (Second edition). O'Reilly Media. ISBN: 978-1-4493-9902-3