181122 - LABORATORI MULTIMÈDIA

Tipus d'assignatura: Obligatòria

Coordinador: Vladimir Bellavista Parent

Trimestre: Segon trimestre

Crèdits: 4

Curs acadèmic: 2026

Curs d'impartició: 1

• Català

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

L'aula (física o virtual) és un espai segur, lliure d'actituds masclistes, racistes, homòfobes, trànsfobes i discriminatòries, ja sigui cap a l'alumnat o cap al professorat. Confiem que entre totes i tots puguem crear un espai segur on ens puguem equivocar i aprendre sense haver de patir prejudicis d'altres. 

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.
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 2: Joc multimèdia basat en Canvas
Activitat 3: Examen de programació i validació

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

Descripció:

En aquest contingut es treballa:

1.Model d’Objectes del Document (DOM).
2.Introducció a javascript.
3.Accés i modificació del DOM amb javascript.
  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 javascript: 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 javascript.
5. Exercicis.

Activitats vinculades:

Activitat 1: Joc basat en el DOM.
Activitat 2: Joc multimèdia basat en Canvas
Activitat 3: Examen de programació i validació

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: Examen de programació i validació

És necessari treure una nota mínima de 5 a l'examen final per optar a aprovar l'assignatura.

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

      NotaFinal = 0,2 NotaPràctica1 + 0,4 NotaPràctica2 + 0,4 NotaExamen (mínim un 5)

Si la nota de l'examen final és inferior a 5 no és farà mitja amb les notes de les pràctiques i la NotaFinal serà de suspès. Si en acabar el curs l’estudiant no ha obtingut una NotaFinal igual o superior a 5, podrà presentar-se a un examen de recuperació, en les dates que determini el calendari de recuperacions. L'examen de recuperació no fa mitja amb les notes de les pràctiques.

Normes de realització de les activitats:

Les pràctiques són en grup i es realitzaran en el laboratori d’ordinadors amb un IDE professional.

L’examen és una activitat individual.

Qualsevol forma de frau acadèmic serà sancionada d’acord amb la normativa d’avaluació del centre. En cas que es detectin indicis de frau, inclòs l’ús indegut d’eines d’intel·ligència artificial generativa, el professorat de l’assignatura podrà convocar l’estudiant a una entrevista individual amb l’objectiu de verificar-ne l’autoria. A més a més, pel cas particular d'aquesta assignatura, atesa la naturalesa fonamental d’aquesta assignatura, es requereix a l’estudiant no només que proporcioni solucions a determinats problemes, sinó que sigui capaç de generar-les de manera autònoma, sense cap tipus d’ajut extern. Per aquest motiu, l’ús d’intel·ligències artificials generatives (IAG) per a la resolució dels problemes plantejats en l’assignatura —ja sigui en exercicis, pràctiques o proves— es contraproduent, queda estrictament prohibit i serà considerat un cas de frau per plagi. En aquest sentit, no es permet l’ús d’IAG per a generar codi de programació, ni tan sols en forma de fragments, encara que aquest codi sigui posteriorment modificat o personalitzat.  L'ús crític d'IAGs com a vehicle per a resoldre dubtes sobre la matèria no es considera un mal ús d'aquests mecanismes sempre i quan això no entri en contradicció amb el que s'ha indicat abans i l'estudiant no perdi de vista el fet que pot obtenir respostes incorrectes i/o no ajustades als continguts de la matèria.

JavaScript Cookbook, 3rd Edition by Adam D. Scott, Matthew MacDonald, Shelley Powers Released July 2021 Publisher(s): O'Reilly Media, Inc. ISBN: 9781492055754

Learning jQuery 3 - Fifth Edition by Adam Boduch, Jonathan Chaffer, Karl Swedberg Released May 2017 Publisher(s): Packt Publishing ISBN: 9781785882982

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

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

The Modern JavaScript Tutorial https://javascript.info/