103133 - MULTIMEDIA LABORATORY

Subject type: Mandatory

Coordinator: Vladimir Bellavista Parent

Trimester: Third term

Credits: 4

Academic year: 2025

Teaching course: 1

• Catalan

Almost all the information that the student has to consult is in English, but the notes and classes are taught in Catalan.

The final learning objective of the subject is the design, coding, debugging and testing of interactive multimedia applications with the standard web languages: HTML5 (Canvas), CSS3 and JavaScript. The type of application that will be worked on will be multimedia games with the following programming characteristics: use of objects, use of the appropriate data structure, the user interacts with the mouse and keyboard, incorporation of sound, contains interactive animations with the main objects and, finally, the game must be able to be saved (state and scores).

To achieve this final goal, it will be necessary to study the HTML and CSS languages to design the graphical user interface, especially the Canvas object of HTML5. The JavaScript programming language will also be studied, for programming the game logic and programming in response to events.

The classroom (physical or virtual) is a safe space, free of sexist, racist, homophobic, transphobic and discriminatory attitudes, either towards students or teachers. We trust that together we can create a safe space where we can make mistakes and learn without having to suffer the prejudices of others. 

Content title 1: HTML, CSS and javascript languages.

Description:

This content works on:

1.Syntax of an HTML element.
2.Text, images, video and audio in HTML.
3. CSS syntax.
4. Box template of HTML elements.
5. Selectors and properties.
6.Positioning of the layers.
7. New features of CSS3: transitions and transformations.
8.JavaScript syntax.
9.Structuring a javascript program into functions.
10. Construction of Objects: properties and methods.
11. Classes, inheritance and modularity.
12. Exercises.

Related activities

Activity 1: Game based on the DOM.
Activity 2: Canvas-based multimedia game
Activity 3: Programming and validation exam

Content title 2: Dynamic HTML (DHTML).

Description:

This content works on:

1.Document Object Model (DOM).
2.Introduction to javascript.
3. Accessing and modifying the DOM with JavaScript.
  3.1.Selectors: basic, advanced and filters.
  3.2.Add, change and delete HTML elements.
  3.3.Read and change CSS properties.
  3.4.JavaScript effects: show/hide, animations.
4.Programming in response to user events.
  4.1.Basic event model.
  4.2.Obtaining information about the event (Event object).
  4.3.Javascript event model.
5. Exercises.

Related activities:

Activity 1: Game based on the DOM.
Activity 2: Canvas-based multimedia game
Activity 3: Programming and validation exam

Content title 3: Multimedia games with HTML5 Canvas.

Description:

This content works on:

1.Draw on the Canvas.
2.Animation.
3. Collisions.
4.Text, images, video and interactive audio in the Canvas.
5. Select and drag items in the Canvas.
6. Exercises.

Related activities:

Activity 2: Canvas-based multimedia game.
Activity 3: Programming and validation exam

It is necessary to get a minimum grade of 5 in the final exam to choose to pass the subject.

The final grade of the course will be obtained from the following weighting:

      Final Grade = 0,2 Practical Grade 1 + 0,4 Practical Grade 2 + 0,4 Exam Grade (minimum 5)

If the grade of the final exam is lower than 5, it will not be averaged with the grades of the internships and the Final Grade will be a failing grade. If, at the end of the course, the student has not obtained a Final Grade equal to or higher than 5, he/she may take a make-up exam, on the dates determined by the make-up calendar. The make-up exam does not count against the practical grades.

Rules for carrying out the activities:

The practices are in groups and will be carried out in the computer laboratory with a professional IDE.

The exam is an individual activity.

Any form of academic fraud will be sanctioned in accordance with the school's assessment regulations. If signs of fraud are detected, including the improper use of generative artificial intelligence tools, the subject's teaching staff may call the student for an individual interview with the aim of verifying their authorship. Furthermore, in the particular case of this subject, given the fundamental nature of this subject, the student is required not only to provide solutions to certain problems, but also to be able to generate them autonomously, without any type of external help. For this reason, the use of generative artificial intelligences (GAI) to resolve the problems posed in the subject —whether in exercises, practices or tests— is counterproductive, is strictly prohibited and will be considered a case of fraud by plagiarism. In this sense, the use of IAGs to generate programming code, not even in the form of fragments, is not allowed, even if this code is later modified or personalized. The critical use of IAGs as a vehicle to resolve doubts about the subject is not considered a misuse of these mechanisms as long as this does not contradict what has been indicated above and the student does not lose sight of the fact that he may obtain incorrect answers and/or not adjusted to the contents of the subject.

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

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

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

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