103133 - MULTIMEDIA LABORATORY

Subject type: Optional

Coordinator: Alfonso Palacios González

Trimester: Third term

Credits: 4

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

The ultimate goal of learning the subject is the design, coding, debugging and testing of interactive multimedia applications with the standard languages ​​of the web: HTML5 (Canvas), CSS3 and javascript (jQuery). The type of application to be worked on will be multimedia games with the following programming features: use of objects, use of the appropriate data structure, the user interacts with the mouse and keyboard, incorporation of sound, contains animations interactive with the main objects and finally it should be possible to save the game (status and scores).

To achieve this ultimate 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 programming language, javascript, for programming the logic of the game and programming in response to events will also be studied.

At a general level, this subject contributes to the following learning outcomes (RA) specified for the subject to which it belongs (Algorithm and Programming):

• Appropriately use theories, procedures and tools in the professional development of computer engineering in all its areas (specification, design, implementation, deployment -implementation- and product evaluation) so as to demonstrate an understanding of the commitments made in the design decisions.
• Demonstrate knowledge of the ethical dimension in the company: the social and corporate responsibility in general and, in particular, the civil and professional responsibilities of computer engineers.
• Demonstrate knowledge and understanding of essential facts, concepts, principles and theories related to computer science and its reference disciplines.
• Build correct and efficient algorithms for small difficulty problems.
• Implement simple algorithms in an imperative reference programming language for the initial level.
• Apply basic techniques of modular decomposition of programs.
• Design program architecture using object orientation, modularity, and specification and implementation techniques for abstract data types.
• Collaborate in a unidisciplinary environment. Identify the group's objectives and collaborate in the strategy to be followed and a work plan to achieve them. Identify the responsibilities of each member of the group and assume the personal commitment of the assigned task. Evaluate and present own results. Identify the value of cooperation and exchange information with the other members of the group. Exchange information on the progress of the group and propose strategies to improve its operation.
• Be able to carry out, alone or in a small team, programming projects of considerable size, considering the implications of the decisions taken at each stage and in a professional software development context.

At a more specific level, at the end of the course, the student must be able to:

• (LO1) Write javascript programs that use objects and arrays to store information. These programs will be written with a significant degree of modular decomposition.
• (LO2) Design, encode, debug and test an interactive multimedia game with the standard languages ​​of the web: HTML5 (Canvas), CSS3 and javascript (jQuery).
• (LO3) Use the canvas as an output element of the graphical user interface, ie know how to draw and paint on the canvas.
• (LO4) Use the javascript language and the jQuery library to provide web pages with animation and interactivity using the programming paradigm in response to events, both with objects from the DOM and on the canvas itself. 
• (LO5) Solve motion problems, collisions, and object bounces in the multimedia game interface by implementing simple algorithms appropriately and efficiently.
• (LO6) Incorporate sound into the game through sound effects that reinforce user interaction.
• (LO7) Appropriate use of professional development tools in computer engineering (FDI).
• (LO8) Demonstrate knowledge of the ethical dimension: safeguard the copyright of the images and sounds used in development.
• (LO9) Collaborate effectively and responsibly in a software development group.

The teaching methodology that is to be implemented is that of learning through projects (ABP). In theory, large group, there is a presentation and discussion of the activities that the student will develop in the laboratory and as a result of this analysis, the most important concepts are explained in order to achieve the learning objectives of the subject

The activities are designed to achieve the objectives incrementally, that is, in each activity new aspects are presented and worked on that will serve us in all future activities.

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.Syntax javascript vs Java.
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 the jQuery library.
3. Access and modification of the DOM with jQuery.
  3.1.Selectors: basic, advanced and filters.
  3.2.Add, change and delete HTML elements.
  3.3.Read and change CSS properties.
  3.4.JQuery 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.JQuery 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

In order to gather evidence of the achievement of the expected learning outcomes, 3 evaluation activities will be carried out.

In order to pass (pass) the assessment activities, students will have to demonstrate

• That they have acquired the theoretical knowledge related to the contents of the subject and that their understanding allows them to put them into practice [MECES-2 point a, point c]
• That they can develop solutions to problems that, although they are similar to others seen above, present aspects that are new [MECES-2 point f]

In relation to the basic competences assigned to the subject, these are covered especially with regard to the aspects that are explained:

• CB2: problem solving within their area of ​​study.
• CB4: convey information, ideas and solutions.
• CB5: development of learning skills needed for further studies (autonomous access to documentation, effective work habits)

Regarding the transversal competences associated with the subject:

• CT1: third language knowledge. This competence is worked on from the documentary sources that students must consult, since all of them are in English.
• CT2: group work in order to contribute to developing projects with a sense of responsibility. This competence is worked on with the practical activities as they are developed in groups and the student assumes a role within the team with specific tasks and objectives.

Title of the activity 1: DOM-based multimedia game.

General description:

This activity presents the web development environment that will be used in the subject. The student will become familiar with the edition of the program as well as the testing and debugging of the same. The console development tools (to view programming errors), debugger (to run the program step by step), and the variable inspector (to view the program trace) will be used.

It will be necessary to complete the coding of part of the logic of a game whose interface will be different HTML elements. The student will have a pre-project (unfinished) of the game to be implemented.

Support material:

Statement of practice.

Pre-project of the game where the graphical user interface with objects of the DOM is already elaborated.

Deliveries and links to the evaluation:

It is necessary to deliver the finished project, that is to say, that it fulfills all the specifications of the statement. It will also be necessary to deliver a document with a brief report detailing the programming aspects that the student has implemented, reasoning the suitability and efficiency of the algorithms used.

The result of the activity will be incorporated into the evaluation of the subject with a value of 20% of the final grade.

Specific objectives:

At the end of the activity the student must be able to:

• know and use the development environment appropriately: write, test and debug the program.
• program the animation of UI objects: translation and rotation.
• access the HTML elements of the user interface for modification.

Link with the learning outcomes and competencies of the subject:

This activity is evidence of learning outcomes: RA2, RA4, RA6, RA7 and RA8.

This activity contributes to the achievement of the following common and specific competencies (in brackets the most relevant aspects of each competence to which the activity contributes):

• CIN1 (design and develop applications, ensuring their reliability),
• CIN5 (knowledge and administration of computer applications: Web server),
• CIN6 (apply basic algorithmic procedures),
• CIN8 (design and build applications in a robust, secure and efficient way),
• CIN17 (design IPOs that guarantee accessibility and usability),
• EFB3 (understand and master the basics of logic and algorithms) i
• EFB4 (use of computer programs: IDE) 
         

Title of the activity 2: Canvas-based multimedia game.

General description:

You need to design a multimedia game in which the most important part of the graphical user interface is one or several Canvas elements.

The interaction will be with the keyboard and the mouse and collisions between the objects drawn on the canvas will have to be resolved.

The game should have sound and rankings.

It must be possible to store the status of the game: points, ranking, etc.

The students who make up the group that has developed the practice, will make a presentation and oral defense of their work in class.

Support material:

Statement of practice.

Deliveries and links to the evaluation:

The completed project must be submitted as well as a report detailing the programming aspects that the student has implemented.

The result of the activity will be incorporated into the evaluation of the subject with a value of 40% of the final grade.

Specific objectives:

At the end of the activity the student must be able to:

• draw graphics (balls and lines) on the canvas.
• program user interaction with the canvas.
• solve the calculations needed to detect collisions and intersections.
• design, code, debug and test an interactive multimedia game using standard web languages: HTML5 (Canvas), CSS3 and javascript.
• the programming features that are implemented are: 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 can be saved (status and scores).

Link with the learning outcomes and competencies of the subject:

This activity is an evidence related to all the learning outcomes of the subject: RA1 ... RA9, but, especially, RA5 and RA9 are evaluated.

This activity contributes to the achievement of the following common and specific competencies (in brackets the most relevant aspects of each competence to which the activity contributes):

• CIN1 (design and develop applications, ensuring their reliability),
• CIN3 (effective work habits in software development environments),
• CIN5 (knowledge and administration of computer applications: Web server),
• CIN6 (apply algorithmic procedures),
• CIN7 (using data structures),
• CIN8 (design and build applications in a robust, secure and efficient way),
• CIN17 (design IPOs that guarantee accessibility and usability),
• EFB3 (understand and master the basics of logic and algorithms) i
• EFB4 (use of computer programs: IDE)      

Title of the activity 3: Programming and validation exam

General description:

Final exam.

There is a single final exam where the knowledge of contents 1, 2 and 3 is assessed. This test consists of a part of questions about concepts associated with the learning objectives of the subject in terms of knowledge and understanding, and of a set of application exercises.

Support material:

Statement of the test.

Deliveries and links to the evaluation:

Test resolution, in writing.

The result of the activity will be incorporated into the evaluation of the subject with a value of 40% of the final grade.

Specific objectives:

At the end of the activity, the student must be able to:

• Write programs in javascript that use objects and arrays to store information.
• draw on canvas.
• Use the javascript language and the jQuery library to provide animation and interactivity web pages using the programming paradigm in response to events, both with objects from the DOM and on the canvas itself. 
• Solve motion problems, collisions, and object bounces in the multimedia game interface.

Link with the learning outcomes and competencies of the subject:

This activity is evidence of learning outcomes: RA1, RA3, RA4 and RA5

This activity contributes to the achievement of the following common and specific competencies (in brackets the most relevant aspects of each competence to which the activity contributes):

• CIN1 (software development),
• CIN6 (apply basic algorithmic procedures to design solutions to problems),
• CIN7 (use efficiently the most appropriate data types and structures),
• CIN8 (build applications robustly and efficiently),
• CIN17 (design IPOs that guarantee accessibility and usability),
• EFB3 (understand and master the basic concepts of logic and algorithms)        

It is necessary to take a minimum grade of 5 in the programming exam in order to pass the course.

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 Schedule 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.0, he/she may take a make-up exam, on the dates determined by the Head of Studies. 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 scheduling exam is an individual activity.

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

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

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

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