TecnoCampus Foundation
eCampus
University Business
eCampus

What are you looking for?

General information

Subject type: Mandatory

Coordinator: Rosa Herrero Antón

Trimester: Third term

Credits: 4

Teaching staff: 

Jordi Jordano Massó

Teaching languages

  • Catalan

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

Skills

Basic skills

  • B2_That students know how to apply their knowledge to their job or vocation in a professional way and have the skills they demonstrate by developing and defending arguments and solving problems within their area of ​​study

  • B4_That students can convey information, ideas, problems and solutions to both specialized and non-specialized audiences

  • B5_That students have developed those learning skills necessary to undertake further studies with a high degree of autonomy

Specific skills

  • EFB3_Ability to understand and master the basic concepts of discrete mathematics, logic, algorithms and computational complexity, and their application for solving engineering problems

  • EFB4_Basic knowledge of the use and programming of computers, operating systems, databases and computer programs with application in engineering

Transversal competences

  • T1_That students know a third language, which will be preferably English, with an adequate level of oral and written form, according to the needs of the graduates in each degree

  • T2_That students have the ability to work as members of an interdisciplinary team either as one more member, or performing management tasks in order to contribute to developing projects with pragmatism and a sense of responsibility, making commitments taking into account the available resources

Description

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.

 

 

 

Contents

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

Evaluation system

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.

REFERENCES

Basic

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

Complementary

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

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