Informació general


Tipus d'assignatura: Optativa

Coordinador:

Trimestre:3

Crèdits: 4

Professorat: Joan Jou Majó

Descripció


L’objectiu final d’aprenentatge de l’assignatura és el disseny, codificació, depuració i prova d’aplicacions interactives multimèdia amb els llenguatges estàndards de la web: HTML5 (Canvas), CSS3 i javascript (jQuery). El tipus d’aplicació que es treballarà seran els jocs multimèdia amb les següents característiques de programació: utilització d’objectes, utilització de l’estructura de dades adequada, l’usuari interacciona amb el ratolí i el teclat, incorporació de so, conté animacions interactives amb els objectes principals i, finalment, s’ha de poder guardar el joc (estat i puntuacions).

Per aconseguir aquest objectiu final caldrà estudiar els llenguatges HTML i CSS per dissenyar la interfície gràfica de l’usuari, especialment, l’objecte Canvas de l’HTML5. També serà objecte d’estudi el llenguatge de programació, javascript, per a la programació de la lògica del joc i la programació en resposta a events.

Aquesta assignatura disposa de recursos metodològics i digitals per fer possible la seva continuïtat en modalitat no presencial en el cas de ser necessari per motius relacionats amb la Covid-19. D'aquesta forma s'assegurarà l'assoliment dels mateixos coneixements i competències que s'especifiquen en aquest pla docent.

Resultats d'aprenentatge


A nivell general, aquesta assignatura contribueix als següents resultats d'aprenentatge (RA) especificats per a la matèria a la qual pertany (Algorísmica i Programació):

  • Utilitzar de forma apropiada teories, procediments i eines en el desenvolupament professional de la enginyeria informàtica en tots els seus àmbits (especificació, disseny, implementació, desplegament -implantació- i avaluació de productes) de manera que es demostri la comprensió dels compromisos adoptats en las decisions de disseny.
  • Demostrar coneixement de la dimensió ètica a l’empresa: la responsabilitat social i corporativa en general i, en particular, les responsabilitats civils i professionals dels enginyers en informàtica.
  • Demostrar coneixement i comprensió de fets essencials, conceptes, principis i teories relatives a la informàtica i a les seves disciplines de referència.
  • Construir algorismes correctes i eficients per a problemes de dificultat petita.
  • Implementar algorismes senzills en un llenguatge de programació imperatiu de referència per al nivell inicial.
  • Aplicar tècniques bàsiques de descomposició modular de programes.
  • Dissenyar l'arquitectura dels programes utilitzant tècniques d'orientació a objectes, de modularitat i d'especificació i implementació de tipus abstractes de dades.
  • Col·laborar en un entorn unidisciplinar. Identificar els objectius del grup i col·laborar en l’estratègia a seguir i un pla de treball per a aconseguir-los. Identificar les responsabilitats de cada component del grup i assumir el compromís personal de la tasca assignada. Avaluar i presentar els resultats propis. Identificar el valor de la cooperació i intercanviar informació amb els altres components del grup. Intercanviar informació sobre el progrés del grup i proposar estratègies per millorar el seu funcionament.
  • Ser capaç de portar a terme, sol o en un equip petit, projectes de programació de mida considerable, considerant les implicacions de les decisions que es prenen en cada etapa i en un context professional de desenvolupament del software.

A un nivell més concret, en finalitzar el curs, l'estudiant o estudianta ha de ser capaç de:

  • (RA1) Escriure programes en javascript que utilitzen objectes i arrays per emmagatzemar la informació. Aquests programes s'escriuran amb un grau important de descomposició modular.
  • (RA2) Dissenyar, codificar, depurar i provar un joc interactiu multimèdia amb els llenguatges estàndards de la web: HTML5 (Canvas), CSS3 i javascript (jQuery).
  • (RA3) Utilitzar el canvas com un element de sortida de la interfície gràfica d'usuari, és a dir, saber dibuixar i pintar en el canvas.
  • (RA4) Utilitzar el llenguatge javascript i la llibreria jQuery per dotar a les pàgines web d’animació i interactivitat utilitzant el paradigma de programació en resposta a events, tant amb objectes del DOM com en el propi canvas. 
  • (RA5) Resoldre problemes de moviment, col·lisions, i rebots d’objectes en la interfície del joc multimèdia implementant algorismes senzills de forma adequada i eficient.
  • (RA6) Incorporar so al joc a través d'efectes sonors que reforcin la interacció de l'usuari.
  • (RA7) Utilitzar de forma apropiada eines de desenvolupament professional de la enginyeria informàtica (IDE).
  • (RA8) Demostrar coneixement de la dimensió ètica: salvaguardar els drets d'autor de les imatges i sons emprats en el desenvolupament.
  • (RA9) Col·laborar de forma efectiva i responsable en un grup per al desenvolupament del software.

Metodologia de trabajo


La metodologia docent que es vol implementar és la d’aprenentatge mitjançant exemples (learning by example). A teoria, grup gran, es fa una presentació i discussió de les activitats que l’alumne desenvoluparà en el laboratori i fruit d’aquest anàlisi, s’expliquen els conceptes més importants per tal d’assolir els objectius d’aprenentatge de l’assignatura.

Les activitats estan pensades perquè s’assoleixin els objectius de forma incremental, és a dir, en cada activitat es presenten i treballen aspectes nous que ens serviran en totes les activitats futures.

Continguts


Títol contingut 1: Llenguatges HTML, CSS i javascript.

Descripció:

En aquest contingut es treballa:

1.Sintaxi d’un element HTML.
2.Text, imatges, vídeo i àudio en HTML.
3.Sintaxi CSS.
4.Model de caixa dels elements HTML.
5.Selectors i propietats.
6.Posicionament de les capes.
7.Noves característiques de CSS3: transicions i transformacions.
8.Sintaxi javascript vs Java.
9.Estructuració d’un programa javascript en funcions.
10. Construcció d'Objectes: propietats i mètodes.
11. Classes, herència i modularitat.
12. Exercicis.

Activitats vinculades

Activitat 1: Joc basat en el DOM.
Activitat 3: Pràctica final
Activitat 4: Examen de programació


Títol contingut 2: HTML Dinàmic (DHTML).

Descripció:

En aquest contingut es treballa:

1.Model d’Objectes del Document (DOM).
2.Introducció a la llibreria jQuery.
3.Accés i modificació del DOM amb jQuery.
  3.1.Selectors: bàsics, avançats i filtres.
  3.2.Afegir, canviar i esborrar elements HTML.
  3.3.Llegir i canviar propietats CSS.
  3.4.Efectes jQuery: mostrar/amagar, animacions.
4.Programació en resposta a events de l’usuari.
  4.1.Model d’events bàsic.
  4.2.Obtenció d’informació de l’event (objecte Event).
  4.3.Model d’events de jQuery.
5. Exercicis.

Activitats vinculades:

Activitat 1: Joc basat en el DOM.
Activitat 2: Joc multimèdia basat en Canvas
Activitat 3: Pràctica final
Activitat 4: Examen de programació


Títol contingut 3: Jocs multimèdia amb HTML5 Canvas.

Descripció:

En aquest contingut es treballa:

1.Dibuixar en el Canvas.
2.Animació.
3.Col•lisions.
4.Text, imatges, vídeo i àudio interactiu en el Canvas.
5. Seleccionar i arrossegar elements en el Canvas.
6. Exercicis.

Activitats vinculades:

Activitat 2: Joc multimèdia basat en Canvas.
Activitat 3: Pràctica final.
Activitat 4: Examen de programació.

Activitats d'aprenentatge


Amb l'objectiu de recollir evidències de l'assoliment dels resultats d'aprenentatge esperats es realitzaran 4 activitats amb caràcter d'avaluació.

Per tal de superar (aprovar) les activitats avaluatives, els estudiants hauran de demostrar

  • Que han adquirit els coneixements teòrics relatius als continguts de l’assignatura i que la seva comprensió els permet de portar-los a la pràctica [MECES-2 punt a, punt c]
  • Que poden desenvolupar solucions a problemes que, si bé són semblants a d’altres vistos anteriorment, presenten aspectes que són nous [MECES-2 punt f]

En relació a les competències bàsiques assignades a l’assignatura, aquestes queden cobertes especialment pel que fa als aspectes que s’expliciten:

  • CB2: resolució de problemes dins de la seva àrea d’estudi.
  • CB4: transmetre informació, idees i solucions.
  • CB5: desenvolupament d’habilitats d’aprenentatge necessàries per a estudis posteriors (accés autònom a documentació, hàbits de treball efectius)

Pel que fa a les competències transversals associades a l’assignatura:

  • CT1: coneixement tercera llengua. Aquesta competència es treballa a partir de les fonts documentals que els estudiants han de consultar, atès que totes elles es troben en anglès.
  • CT2: treball en grup amb la finalitat de contribuir a desenvolupar projectes amb sentit de la responsabilitat. Aquesta competència es treballa amb les activitats pràctiques atès que es desenvolupen en grup i l'estudiant assumeix un rol dins de l'equip amb unes tasques i objectius concrets.

 

Títol de l’activitat 1: Joc multimèdia basat en el DOM.

Descripció general:

En aquesta activitat es presenta l’entorn de desenvolupament web que s’usarà en l’assignatura. L’alumne es familiaritzarà en l’edició del programa així com la prova i depuració del mateix. S’utilitzaran les eines de desenvolupament consola (per veure els errors de programació), depurador (per executar pas a pas el programa) i l’inspector de variables (per veure la traça del programa).

Caldrà completar la codificació de part de la lògica d'un joc la interfície del qual seran diferents elements HTML. L’estudiant disposarà d’un preprojecte (inacabat) del joc que ha d'implementar.

Material de suport:

Enunciat de la pràctica.

Preprojecte del joc on ja està elaborada la interfície gràfica d’usuari amb objectes del DOM.

Lliuraments i vincles amb l’avaluació:

Cal entregar el projecte acabat, és a dir, que compleixi amb totes les especificacions de l'enunciat. Caldrà també lliurar un document amb una breu memòria on es detallen els aspectes de programació que l’alumne ha implementat raonant la idoneïtat i eficiència dels algorismes emprats.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 20% de la nota final.

Objectius específics:

En finalitzar l’activitat l’estudiant o estudianta ha de ser capaç de:

  • conèixer i usar adequadament l'entorn de desenvolupament: escriure, provar i depurar el programa.
  • programar l’animació d’objectes de la interfície d'usuari: translació i rotació .
  • accedir als elements HTML de la interfície d’usuari per a la seva modificació.

Vinculació amb els resultats d'aprenentatge i competècnies de l'assignatura:

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA2, RA4, RA6, RA7 i RA8.

Aquesta activitat contribueix a l'assoliment de les competencies comúnes i específiques següents (entre parèntesis els aspectes més rellevants de cada competència als quals l’activitat contribueix):

  • CIN1(dissenyar i desenvolupar aplicacions, assegurant la seva fiabilitat),
  • CIN5(coneixement i administració d'aplicacions informàtiques: Servidor web),
  • CIN6(aplicar procediments algorísmics bàsics),
  • CIN8(dissenyar i construir aplicacions de forma robusta, segura i eficient),
  • CIN17(dissenyar IPO que garenteixin l'accessibilitat i usabilitat),
  • EFB3(comprendre i dominar els conceptes bàsics de la lògica i algorísmica)  i
  • EFB4(ús de programes informàtics: IDE) 
           

 

Títol de l’activitat 2: Joc multimèdia basat en Canvas.

Descripció general:

Cal dissenyar un joc multimèdia (àudio i/o vídeo) en que la part més important de la interfície gràfica d'usuari sigui un o varis elements Canvas. La interacció serà amb el ratolí i permetrà moure un objecte dins del canvas.

Material de suport:

Enunciat de la pràctica.

Preprojecte del joc on ja està resolt el moviment amb el ratolí d’un objecte dibuixat en el canvas per part de l’usuari.

Lliuraments i vincles amb l’avaluació:

Cal entregar el projecte acabat així com una memòria on es detallen els aspectes de programació que l’alumne ha implementat.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 20% de la nota final.

Objectius específics:

En finalitzar l’activitat l’estudiant o estudianta ha de ser capaç de:

  • dibuixar gràfics (boles i línies) en el canvas.
  • modelar amb objectes i descomposar el projectes en diferents mòduls.
  • programar la interacció de l’usuari amb el canvas.
  • resoldre els càlculs necessaris per detectar col·lisions i interseccions.
  • incorporar so a l’execució del joc.

Vinculació amb els resultats d'aprenentatge i competècnies de l'assignatura:

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2, RA3, RA6, RA7, RA8 i RA9.

Aquesta activitat contribueix a l'assoliment de les competencies comúnes i específiques següents (entre parèntesis els aspectes més rellevants de cada competència als quals l’activitat contribueix):

  • CIN1(dissenyar i desenvolupar aplicacions, assegurant la seva fiabilitat),
  • CIN3(hàbits de treball efectius en els entorns de desenvolupament de software),
  • CIN5(coneixement i administració d'aplicacions informàtiques: Servidor web),
  • CIN6(aplicar procediments algorísmics),
  • CIN7(usar estructures de dades),
  • CIN8(dissenyar i construir aplicacions de forma robusta, segura i eficient),
  • CIN17(dissenyar IPO que garenteixin l'accessibilitat i usabilitat),
  • EFB3(comprendre i dominar els conceptes bàsics de la lògica i algorísmica)  i
  • EFB4(ús de programes informàtics: IDE)  

 

Títol de l’activitat 3: Pràctica final.

Descripció general:

L’alumne ha de dissenyar, codificar i depurar un joc multimèdia interactiu on l'element més important de la interfície d'usuari sigui el canvas.

La interacció serà amb el teclat i amb el ratolí i caldrà resoldre col·lisions entre els objectes dibuixats en el canvas.

El joc ha de tenir so i rànquings.

S'ha de poder emmagatzemar l'estat del joc: punts, ranquing, etc.

L’única llibreria javascript permesa és jQuery.

Els alumnes que conformen el grup que ha desenvolupat la pràctica, faran una presentació i defensa oral del seu treball a classe.

Material de suport:

Enunciat de la pràctica.

Lliuraments i vincles amb l’avaluació:

Cal entregar el projecte acabat així com una memòria molt detallada amb la descripció de tots els aspectes de programació que l’alumne ha implementat. Caldrà una presentació i defensa oral pública del treball.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 30% de la nota final.

Objectius específics:

En finalitzar l’activitat l’estudiant o estudianta ha de ser capaç de:

  • dissenyar, codificar, depurar i provar un joc interactiu multimèdia amb els llenguatges estàndards de la web: HTML5 (Canvas), CSS3 i javascript (jQuery).
  • les característiques de programació que s’implementen són: utilització d’objectes, utilització de l’estructura de dades adequada, l’usuari interacciona amb el ratolí i el teclat, incorporació de so, conté animacions interactives amb els objectes principals i, finalment, es pot guardar el joc (estat i puntuacions).

Vinculació amb els resultats d'aprenentatge i competècnies de l'assignatura:

Aquesta activitat és una evidència relacionada amb tots els resultats d'aprenentatge de l'assignatura: RA1... RA9, però, especialment, s'avalua el RA5 i RA9.

Aquesta activitat contribueix a l'assoliment de les competencies comúnes i específiques següents (entre parèntesis els aspectes més rellevants de cada competència als quals l’activitat contribueix):

  • CIN1(dissenyar i desenvolupar aplicacions, assegurant la seva fiabilitat),
  • CIN3(hàbits de treball efectius en els entorns de desenvolupament de software),
  • CIN5(coneixement i administració d'aplicacions informàtiques: Servidor web),
  • CIN6(aplicar procediments algorísmics),
  • CIN7(usar estructures de dades),
  • CIN8(dissenyar i construir aplicacions de forma robusta, segura i eficient),
  • CIN17(dissenyar IPO que garenteixin l'accessibilitat i usabilitat),
  • EFB3(comprendre i dominar els conceptes bàsics de la lògica i algorísmica)  i
  • EFB4(ús de programes informàtics: IDE)      

 

Títol de l’activitat 4: Examen de programació.

Descripció general:

Examen final.

Es realitza un únic examen final on s'avalua els coneixements dels continguts 1, 2 i 3. Aquesta prova consta d'una part de qüestions sobre conceptes associats als objectius d'aprenentatge de l'assignatura pel que fa al coneixement i comprensió, i d'un conjunt d'exercicis d'aplicació. L'estudiant o estudianta disposa de 3 hores per a la realització de la prova. Un cop realitzat l'examen, el professor publicarà la resolució.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resolució de la prova, per escrit.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 30% de la nota final.

Objectius específics:

En finalitzar l'activitat, l'estudiant o estudianta ha de ser capaç de:

  • Escriure programes en javascript que utilitzen objectes i arrays per emmagatzemar la informació.
  • dibuixar en el canvas.
  • Utilitzar el llenguatge javascript i la llibreria jQuery per dotar a les pàgines web d’animació i interactivitat utilitzant el paradigma de programació en resposta a events, tant amb objectes del DOM com en el propi canvas. 
  • Resoldre problemes de moviment, col·lisions, i rebots d’objectes en la interfície del joc multimèdia.

Vinculació amb els resultats d'aprenentatge i competècnies de l'assignatura:

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA3, RA4 i RA5

Aquesta activitat contribueix a l'assoliment de les competencies comúnes i específiques següents (entre parèntesis els aspectes més rellevants de cada competència als quals l’activitat contribueix):

  • CIN1(desenvolupar programari),
  • CIN6(aplicar procediments algorísmics bàsics per a dissenyar solucions a problemes),
  • CIN7(usar de forma eficient, els tipus i estructures de dades més adequades),
  • CIN8(construir aplicacions de forma robusta i eficient),
  • CIN17(dissenyar IPO que garenteixin l'accessibilitat i usabilitat),
  • EFB3(comprendre i dominar els conceptes bàsics de la lògica i de l’algorísmica)        

Sistema d'avaluació


La nota final del curs s’obtindrà de la següent ponderació:

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

Si en acabar el curs l’estudiant no ha obtingut una NotaFinal igual o superior a 5.0, podrà recuperar la NotaPràcticaFinal amb un treball addicional i presentar-se a un examen de programació de recuperació, en les dates que determini el Cap d’estudis.

 

Normes de realització de les activitats:

Les pràctiques (activitats 1, 2  i 3) són en grup de dues persones i es realitzaran en el laboratori d’ordinadors amb un IDE professional.

L’examen de programació és una activitat individual. És necessari treure una nota mínima de 5 a l'examen de programació per poder aprovar l'assignatura.

Bibliografia


Bàsic

Physics for JavaScript Games, Animation, and Simulations 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

Complementary

MDN, 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