104123 - FONAMENTS DE PROGRAMACIÓ

Tipus d'assignatura: Obligatòria

Coordinador: Rafael Suárez Gómez

Trimestre: Segon trimestre

Crèdits: 4

L'assignatura "Fonaments de Programació" s'emmarca dins de l'àrea Multimèdia del Grau en Mitjans Audiovisuals. En aquesta assignatura s'introdueix als estudiants en l'aprenentatge d'un llenguatge de programació que li permetrà escriure aplicacions web multimèdia amb una interacció de l'usuari augmentada.

Aquesta assignatura és la continuació natural de la precedent "Sistemes Multimèdia" cursada en el primer trimestre.

El llenguatge de programació que s'utilitza és el javascript, llenguatge estàndard a la web. Es veuen els fonaments de programació per poder fer petits càlculs, llegir i guardar informació que ha aportat l'usuari i crear transicions i animacions amb els objectes de la interfície gràfica d'usuari. Es treballa la programació en resposta a esdeveniments que ha provocat l'usuari amb el teclat i el ratolí.

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.

A nivell general, aquesta assignatura contribueix als següents resultats d'aprenentatge (RA) especificats per a la matèria a la qual pertany (Multimèdia):

• (RA1) Crear petits programes en javascript per a: validar formularis, recollir dades de l'usuari i emmagatzemar les dades.
• (RA2) Crear petites aplicacions multimèdia interactives a la web: jocs, reproductor de medis, animacions, etc.

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

• (RAC1) Crear petits programes en javascript que recullin i validin les dades de l'usuari i, posteriorment, facin uns càlculs amb aquestes dades i es presentin els resultats a l'usuari de forma adequada (vinculat a RA1).
• (RAC2) Escriure programes en javascript que utilitzen objectes per emmagatzemar la informació (vinculat a RA1).
• (RAC3) 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 (vinculat a RA2).
• (RAC4) Crear petites aplicacions multimèdia interactives a la web. La interacció més important serà el canvi de la posició d'alguns elements de la interfície gràfica d'usuari (vinculat a RA2).
• (RAC5) Analitzar els requeriments d'usabilitat i accessibilitat, recollint dades i informació de webs similars, per tal optimitzar el disseny de l'aplicació i, justificar, reflexivament, la idoneitat del disseny realitzat (vinculat a G3)

Les hores d'aprenentatge dirigit consisteixen:

• classes teòriques (grup gran) en les quals el professorat proposa i resolt un problema de programació a la web i fa una exposició per introduir els continguts teòrics necessaris per a la seva resolució (learning by example).  Convenientment intercalat i sense previ avís, es realitzen activitats de seguiment individuals o en grups dins la classe. Aquestes activitats acostumen a ser petits problemes o exercicis de comprensió dels continguts que s'estan presentant. S'aconsella que l'alumne porti el seu ordinador personal portàtil a classe. L'alumne disposa i utilitza com a material de suport, els apunts de l'assignatura que el professorat posa a la seva disposició des del primer dia, tant en format imprès com al campus virtual. Això, permetrà a l'alumne anar a classe havent fet una lectura prèvia dels temes i, a classe, concentrar-se en les explicacions del professor, tot prenent les notes que cregui oportunes per a un estudi posterior. La dedicació per part de l'estudiant serà: 3h/set. x 10 set. = 30 hores totals
• pràctiques (grup petit), en laboratoris que disposen dels equipaments necessaris per a la realització de la mateixa, bàsicament ordinadors. Els alumnes s'agrupen de dos en dos i comparteixen l'equipament i nota de la pràctica. La dedicació per part de l'estudiant serà: 1h/set. x 10 set. = 10 hores totals

Addicionalment, estan contemplades unes activitats dirigides que consisteixen en explicacions, més o menys personalitzades, de les correccions de les diferents activitats realitzades pels estudiants, bàsicament els exàmens parcials i les pràctiques. La dedicació per part de l'estudiant serà 5 hores, aproximadament.

Dins de les hores d'aprenentatge autònom es consideren les hores que l'alumne dedica a fer una lectura prèvia dels apunts per a la classe teòrica corresponent, realització d'exercicis i treballs proposats fora de l'aula, estudi de manuals necessaris per poder fer les pràctiques, redacció dels informes de les pràctiques i treballs, resolució de qüestionaris d'autoaprenentatge, estudi i preparació dels exàmens parcials, etc. La dedicació per part de l'estudiant serà 40 hores totals, aproximadament.

Títol contingut 1: Programació bàsica en javascript.

Descripció:

En aquest contingut es treballa:

1.1. Què és un programa?.
1.2. Estructura d’un programa javascript. Concepte de funció.
1.3. Entrada i sortida de dades.
  1.3.1. E/S amb finestres: prompt, confirm/ alert
  1.3.2. E/S amb formularis.
1.4. Tipus de dades: nombres, strings i booleans.
1.5. Valors de les dades.
  1.5.1. Variables: creació, accés i modificació.
  1.5.2. Constants i literals: creació i accés.
  1.5.3. Àmbit de les dades: local i global.
1.6. Expressions i operadors.
  1.6.1. Operadors aritmètics, lògics i relacionals.
  1.6.2. Avaluació d’expressions. Ordre de les operacions.
  1.6.3. Objecte Math
1.7. Estructures de control de l’execució.
  1.7.1. Estructura seqüencial.
  1.7.2. Estructura condicional: if..., if... else..., if... else if...
  1.7.3. Estructura iterativa: for
1.8. Estructuració del programa en funcions.
  1.8.1. Evitar la repetició de codi.
  1.8.2. Pas de paràmetres i retorn de valors.
1.9. Exercicis.

Activitats vinculades:

activitat 1: Entorn de desenvolupament web.
activitat 2: Aplicació amb E/S textual.
activitat 5: Examen parcial.
activitat 6: Examen final.

Títol contingut 2: Col·leccions de dades: els objectes.

Descripció:

En aquest contingut es treballa:

2.1. Objectes.
  2.1.1. Propietats i mètodes
  2.1.2. Creació d’objectes.
  2.1.3. Accés a les propietats i mètodes
2.3. Objecte String
2.4. Objecte Date
2.5. Exercicis

Activitats vinculades:

activitat 3: Aplicació amb selecció de l'usuari.
activitat 4: Joc interactiu.
activitat 5: Examen parcial.
activitat 6: Examen final.

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

Descripció:

En aquest contingut es treballa:

3.1. Model d’Objectes del Document (DOM).
3.2. Introducció a la llibreria jQuery.
3.3. Accés i modificació del DOM amb jQuery.
  3.3.1. Selectors: bàsics, avançats i filtres.
  3.3.2. Afegir, canviar i esborrar elements HTML.
  3.3.3. Llegir i canviar propietats CSS
  3.3.4. Efectes jQuery: mostrar/amagar, animacions.
3.4. Programació en resposta a events de l’usuari.
  3.4.1. Model d’events bàsic.
  3.4.2. Obtenció d’informació de l’event (objecte Event)
  3.4.3. Model d’events de jQuery.
3.5. Àudio i vídeo interactiu.
3.6. Jocs interactius.
3.7. Temporització: setInterval() i setTimeout()
3.8. Col·lissions.
3.9. Exercicis.

Activitats vinculades:

activitat 4: Joc interactiu.
activitat 6: Examen final.

Amb l'objectiu de recollir evidències de l'assoliment dels resultats d'aprenentatge esperats es realitzaran 6 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, pràctics i metodològics 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 b]
• Que poden desenvolupar solucions a problemes que, si bé semblants a d'altres vistos anteriorment, presenten aspectes que són nous [MECES-2 punt d]

En relació a la competència bàsica assignada a l'assignatura, aquesta queda coberta especialment pel que fa als aspectes que s'explicite:

• G3 (recopilar i interpretar dades i informacions per a fonamentar els seus judicis i si s'escau reflexionar sobre aspectes socials, científics o ètics [MECES-2 punt c]). Els estudiants han de demostrar: 
  • que davant diferents solucions a un problema, siguin capaços de recopilar dades i informació d'exemples similars que els permeti decidir, justificadament, quina solució és l'óptima.
  • que es tenen en compte el grau d'usabilitat i accessibilitat de l'aplicació, recollint dades empíriques, per tal de decidir optimitzacions del disseny de l'aplicació

Totes les activitats de l'assignatura contribueixen a l'assoliment progressiu de la competència específica de l'assignatura, més concretament, en els aspectes següents:

• E1 : Programar les interfícies gràfiques de portals web estàtics i aplicacions interactives seguint criteris d'usabilitat i accessibilitat.

Títol de l’activitat 1: Entorn de desenvolupament web.

Descripció general:

Pràctica de laboratori. Realització en grup de dues persones.

En aquesta activitat es presenta l’entorn de desenvolupament web que s’usarà en l’assignatura. L'estudiant o estudianta 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).

Material de suport:

Enunciat de la pràctica amb el codi font del programa que cal escriure, provar i depurar.

El programari necessari és: Adobe Dreamweaver o JetBrains WebStorm.

Lliuraments i vincles amb l’avaluació:

L'estudiant o estudianta, entrega a través de la intranet, la pàgina web amb el programa implementat per tal que es pugui provar en el navegador.

El resultat de l'activitat tindrà una ponderació de 6% corresponent a la qualificació final.

Objectius específics:

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

• usar l’entorn de desenvolupament per escriure, provar i depurar un programa web escrit en javascript.

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

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RAC1 i RAC2.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1.

Títol de l’activitat 2: Aplicació amb E/S textual.

Descripció general:

Pràctica de laboratori. Realització en grup de dues persones.

Cal desenvolupar un programa web en el qual l'usuari aporta informació (text i números) de forma textual i l'aplicació farà uns càlculs i informarà a l'usuari dels resultats obtinguts.

Material de suport:

Enunciat de la pràctica.

El programari necessari és: Adobe Dreamweaver o JetBrains WebStorm.

Lliuraments i vincles amb l’avaluació:

L'estudiant o estudianta, entrega a través de la intranet, la pàgina web amb el programa implementat per tal que es pugui provar en el navegador.

El resultat de l'activitat tindrà una ponderació de 6% corresponent a la qualificació final.

Objectius específics:

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

• Desenvolupar un programa web en javascript que recolli informació aportada per l’usuari i faci una sèrie de càlculs informant a l’usuari dels seus resultats. L'aplicació gestionarà la informació que mostra a l'usuari en tot moment.

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

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RAC1 i RAC2.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1.

Títol de l’activitat 3: Aplicació amb selecció de l'usuari.

Descripció general:

Pràctica de laboratori. Realització en grup de dues persones.

Cal desenvolupar un programa web que faciliti a l’usuari un test d’autoavaluació o un qüestionari. Es disposaran de 10 preguntes amb 4 possibles respostes (només una de bona) que l’usuari haurà de respondre una a una. Es donarà la possibilitat de canviar les respostes fins donar per acabat el test. Un cop l’usuari dóna per acabat el test, el programa informa dels resultats correctes i incorrectes així com la nota assolida. Una pregunta resposta malament, resta 1/3 de punt.

La interfície gràfica de l’usuari serà a través d’un formulari que caldrà validar.

Material de suport:

Enunciat de la pràctica.

El programari necessari és: Adobe Dreamweaver o JetBrains WebStorm.

Lliuraments i vincles amb l’avaluació:

L'estudiant o estudianta, entrega a través de la intranet, la pàgina web amb el programa implementat per tal que es pugui provar en el navegador.

El resultat de l'activitat tindrà una ponderació de 6% corresponent a la qualificació final.

Objectius específics:

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

• Desenvolupar un programa web en javascript que gestioni col·leccions de dades en objectes (preguntes i respostes del test d’autoavaluació), demani informació a l’usuari a través de formularis, validi les dades aportades per l’usuari i faci una sèrie de càlculs informant a l’usuari dels seus resultats.

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

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RAC2, RAC3 i RAC5.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1 i contribueix a avaluar la competència bàsica G3.

Títol de l’activitat 4: Joc interactiu.

Descripció general:

Pràctica de laboratori. Realització en grup de dues persones.

Caldrà completar el codi d’un programa javascript (+jQuery) que permeti implementar un joc interactiu. La interacció dels usuaris serà a través del teclat o ratolí. A l’inici del joc, el programa presentarà un menú de configuració del joc. La interfície s’ha d’adaptar a aquests valors de configuració que ha entrat l'usuari.

Material de suport:

Enunciat de la pràctica. Codi de l’esquelet del programa i HTML+CSS de la interfície gràfica d’usuari.

El programari necessari és: Adobe Dreamweaver o JetBrains WebStorm.

Lliuraments i vincles amb l’avaluació:

L'estudiant o estudianta, entrega a través de la intranet, la pàgina web amb el programa implementat per tal que es pugui provar en el navegador.

El resultat de l'activitat tindrà una ponderació de 12% corresponent a la qualificació final.

Objectius específics:

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

• Desenvolupar un programa web en javascript que interaccioni amb l’usuari a través del teclat o ratolí, demani informació a l’usuari a través de formularis i adapti la interfície gràfica d’usuari d’acord amb les dades aportades per l’usuari.

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

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RAC2, RAC3, RAC4 i RAC5.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1 i contribueix a avaluar la competència bàsica G3.

Títol de l’activitat 5: Examen parcial.

Descripció general:

Examen parcial individual.

Es realitza un examen on s'avalua els coneixements dels continguts 1 i 2. 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 2 hores per a la realització de la prova dins del seu horari habitual de classe. Un cop realitzat l'examen, el professor o professora explicarà la resolució al grup.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resultat de la prova.

El resultat de l'activitat tindrà una ponderació de 21% corresponent a la qualificació final.

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

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RAC1 i RAC2.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1.

Títol de l’activitat 6: Examen final.

Descripció general:

Examen final individual.

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 en el període d'exàmens finals establert pel Cap d'estudis. Un cop realitzat l'examen, el professor o professora publicarà la resolució.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resultat de la prova.

El resultat de l'activitat tindrà una ponderació de 49% corresponent a la qualificació final.

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

• questa activitat és una evidència dels resultats d'aprenentatge: RAC1, RAC2, RAC3 i RAC4.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1.

La qualificació final s'obté de la següent ponderació de les qualificacions parcials:

NotaFinal = 0.7 NotaTeoria + 0.3 NotaPràctiques

NotaPràctiques s'obté amb la mitja aritmètica de les quatre activitats de caràcter pràctic realitzades durant el curs. L'activitat 4 pondera el doble que les altres activitats pràctiques.

La NotaTeoria s'obté amb la realització de dos exàmens,

                  NotaTeoria = 0.3 NotaParcial + 0.7 NotaExamen_Final

En l'examen NotaParcial s'avalua els coneixements dels continguts 1 i 2. Aquestes prova té una durada de 1,5h i es realitza dins l’horari de classe, a meitat de trimestre (setmana 5, aproximadament).

L'examen NotaExamen_Final és un únic examen on s’avalua tots els coneixements dels continguts de l’assignatura. Tindrà una durada de 3 h, dins del període d’exàmens finals que estableix el Cap d’Estudis. És necessari treure una nota mínima de 5 en aquest examen per poder aprovar l'assignatura.

Si finalment, l'estudiant no ha obtingut una NotaFinal superior o igual a 5.0, l'estudiant o estudianta podrà presentar-se a un únic examen de recuperació de NotaTeoria (70% de NotaFinal), dins del període d’exàmens de recuperació que estableix el Cap d’Estudis. Els alumnes que tinguin una qualificació final de "No Presentat" en la primera convocatòria, no es podran presentar a l'examen de recuperació. És necessari treure una nota mínima de 5 en aquest Examen de Recuperació per poder aprovar l'assignatura.

Normes de realització de les activitats

Les activitats "pràctica de laboratori" es realitzaran en grups de dues persones.

Si no es realitza alguna de les activitats de pràctiques, es considerarà no puntuada. L'estudiant o estudianta obtindrà una qualificació de "No presentat" a NotaPràctiques si hi ha alguna activitat de pràctiques no puntuades.

La realització de les activitats pràctiques és obligatòria. És a dir, una qualificació de "No presentat" a NotaPràctiques, no permetrà aplicar la ponderació amb la NotaTeoria i, per tant, la qualificació final de l’assignatura serà de “No Presentat”.

David Sawyer McFarland. Javascript & jQuery. The missing manual. (2nd edition). O’Reilly Media. ISBN: 978-1-4493-9902-3

Mario Rubiales Gómez. Curso de Desarrollo Wev: HTML, CSS y Javascript. Grupo Anaya Publicaciones Generales, 2018. ISBN-10: 8441539391

JavasScript Guide. MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Natalie MacLees. jQuery for designers. Packt Publishing. ISBN: 978-1-84951-670-9

Edgar d'Andrea Font. Javascript. Curso de Programación. Info Book Ediciones. ISBN: 978-84-15033-01-1