104123 - FONAMENTS DE PROGRAMACIÓ

Tipus d'assignatura: Obligatòria

Coordinador: Maddalena Fedele

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 a l'alumne 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í.

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 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.
• (RA2) Escriure programes en javascript que utilitzen objectes per emmagatzemar la informació.
• (RA3) 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 
• (RA4) 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.

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.
• 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.

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.

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.

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: Test d’autoavaluació.
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 les següents activitats amb caràcter d'avaluació:

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

Descripció general:

Pràctica de laboratori.

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).

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1 i RA2.

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’alumne, 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 1/5 del 25% corresponent a la qualificació final assignada al conjunt de les 4 activitats pràctiques programades.

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.

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

Descripció general:

Pràctica de laboratori.

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.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1 i RA2.

Material de suport:

Enunciat de la pràctica.

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

Lliuraments i vincles amb l’avaluació:

L’alumne, 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 1/5 del 25% corresponent a la qualificació final assignada al conjunt de les 4 activitats pràctiques programades.

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.

Títol de l’activitat 3: Test d’autoavaluació.

Descripció general:

Pràctica de laboratori.

Cal desenvolupar un programa web que faciliti a l’usuari un test d’autoavaluació. 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.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA2 i RA3.

Material de suport:

Enunciat de la pràctica.

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

Lliuraments i vincles amb l’avaluació:

L’alumne, 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 1/5 del 25% corresponent a la qualificació final assignada al conjunt de les 4 activitats pràctiques programades.

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.

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

Descripció general:

Pràctica de laboratori.

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.

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

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’alumne, 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 2/5 del 25% corresponent a la qualificació final assignada al conjunt de les 4 activitats pràctiques programades.

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.

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 explicarà la resolució al grup.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1 i RA2.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resultat de la prova.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 30% de la nota de teoria, és a dir, un 22,5% de la nota final.

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

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

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

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resultat de la prova.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 70% de la nota teoria, és a dir, un 52,5% de la nota final.

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

NFinal = 0.75 NTeoria + 0.25 NPràctiques

NPrà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 NTeoria s'obté amb la realització de dos exàmens,

                  NTeoria = 0.3 NParcial + 0.7 NExamen_Final

En l'examen NParcial 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 NExamen_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.

Si finalment, l’alumne no ha obtingut una NFinal superior o igual a 5.0, l’alumne podrà presentar-se a un únic examen de recuperació de NTeoria, 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ó.

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.

Obtindrà una qualificació de No presentat a NPrà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 NPràctiques, no permetrà aplicar la ponderació amb la NTeoria 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

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