General information


Subject type: Mandatory

Coordinator: Rafael Suarez Gómez

Trimester: Second term

Credits: 4

Teaching staff: 

Catherine Juan Nadal
Montserrat Rabassa Jou 

Skills


Specific skills
  • E1_Design and program the graphical interfaces of static or dynamic web portals, interactive applications and video games, following usability and accessibility criteria

  • E4_Design, plan, edit, program and market interactive multimedia applications

Description


The subject "Fundamentals of Programming" is part of the Multimedia area of ​​the Degree in Audiovisual Media. This course introduces students to learning a programming language that will allow them to write multimedia web applications with increased user interaction.

This subject is the natural continuation of the previous "Multimedia Systems" taken in the first term.

The programming language used is javascript and in particular the P5.js library with the aim of facilitating the writing of programs. You see the basics of programming to be able to make small calculations, read and save information provided by the user and create transitions and animations with the objects of the graphical user interface. Programming is worked on in response to events caused by the user with the keyboard and mouse.

The various concepts worked on in the subject are designed to train students in learning and using the basic concepts of programming.

 

Learning outcomes


In general, this subject contributes to the learning outcome specified for the subject to which it belongs (Multimedia and Animation):

  • The student must be able to create small interactive multimedia applications on the web: games, media players, animations, etc.

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

  • RAC1: Use a programming environment to build interactive and animated programs on the web
  • RAC2: Write programs with animations and interactivity
  • RAC3: Understand and apply the basic concepts and elements of programming
  • RAC4: Use some of the libraries included in the programming language

Working methodology


The subject has 3h / week of theory and 1h / week of practice.

All the theoretical concepts of the subject will be exposed in theory classes (large groups). In these classes, and at the discretion of the teachers, computers will be used to solve the exercises and problems of a more practical nature. Likewise, and always at the discretion of the teachers, students may be asked to solve, individually or in groups, short problems and / or exercises. These activities, which due to their optional nature and brevity are not reflected in the list of activities, will serve the student as a tool for self-assessment of their achievement of the contents of the subject and may be used by the teacher. to make decisions about the final grade of the good student and that never to the detriment of the numerical grade calculated according to the indicated grading system.

The more practical concepts and everything that can essentially be considered the practical application of the theoretical concepts will be worked on in small (laboratory) groups. In the sessions scheduled for this purpose, the appropriate tools will be given to solve the scheduled activities well and it is expected that these will be extended from a temporal point of view, beyond the laboratory hours and that, consequently, , students must complete them during the autonomous learning time.

Whenever deemed appropriate, totally optional activities will be made available to students to help them prepare and prepare for the compulsory ones.

Contents


UNIT 1.- ALGORITHM AND PROGRAMMING. WORK TOOL

This teaching block has a dual purpose, on the one hand the familiarization of the student with the work tool that will be used for the production of interactive applications and on the other the introduction of basic concepts towards algorithms and the programming.

This content works on:

1. Introduction to algorithms and programming

2. What is JavaScript? Bookshop p5.js

3. Work tool: Programming environment

4. Programming Process. Interpreted languages ​​versus compiled languages

5. Structure of a program

    5.1 The setup () function

    5.2. The draw () function. Animations

 

SUBJECT 2.- PROGRAMMING WITH P5JS. INTERACTIVITY 

This teaching block aims to write programs with P5.js that allow you to include graphics, animations and interactivity.

This content works on:

1. Concept of variable. Environment variables

2. Mouse interaction

3. Keyboard interaction

4. Event concept. Event functions

5. Basic drawing tools

 

SUBJECT 3.- BASIC PROGRAMMING

This teaching block aims to write programs with animation and / or interactivity achieved using a basic programming.

This content works on:


1. Data types: numbers, strings, and booleans

2. Data values
  2.1. Variables: creation, access and modification
  2.2. Constants and literals: creation and access
  2.3. Data scope: local and global

3. Expressions and operators
  3.1. Arithmetic, logical and relational operators
  3.2. Expression evaluation. Order of operations

4. Data inputs and outputs

5. Execution control structures
  5.1. Sequential structure.
  5.2. Conditional structure
  5.3. Iterative structure

 

SUBJECT 4.- ADVANCED PROGRAMMING

This teaching block aims to write programs with animation and / or interactivity achieved using the most advanced programming structures.

This content works on:

1. Functional decomposition
  1.1. Avoid code repetition
  1.2. Procedures: actions and functions

2. Parameterization
  2.1. Pass parameters
  2.2. Return values

 

 

Learning activities


A series of activities of an eminently practical nature (short exercises, problems ...) are made available to students, which are the basis of the learning activities of the subject. These activities will have to be solved by the students, often in a non-contact way, following the instructions of the teachers and will also be worked in class, either as examples in the theory sessions or in the laboratory sessions. Although these activities will be optional (teachers will not individually verify the performance by students), they will be essential to achieve the theoretical and practical knowledge of the subject.

In order to gather evidence of the achievement of the expected learning outcomes, the following evaluative activities will be carried out. The two written tests are individual. It will be up to the teacher to decide whether the internships are carried out individually or in groups of two students.

 

Two written tests (using, when appropriate, an IDE tool)

The first, WRITTEN TEST I, will focus on the first three contents (interactivity and basic programming) and will provide evidence of RAC2, RC3 and RC4 learning outcomes.

This test asks students to develop software correctly. This has to do with the following common and specific competences (in brackets the most relevant aspects of each competence to which the subject contributes):

  • E4 (programming interactive multimedia applications)
  • E1 (programming graphical web interfaces for interactive applications and video games)

The second test, WRITTEN TEST II, ​​will include all the contents and will give evidence of all the expected learning outcomes. This test asks students for the correct development of software that includes all the contents of the subject. At the level of common and specific competencies, all the above will be relevant for the first test, adding:

  • G5 (develop skills with a high degree of autonomy)
  • G3 (interpret data and reflect on the use of appropriate structures in programming) 

 

Five practice sessions

They will be performed five practice sessions using the programming environment. These sessions are designed for the student to work on the concepts explained and worked on in the theory sessions. During the session the student will have to solve a list of exercises proposed by the teacher and from the result of these sessions exercises and a practice divided into two parts will have to be delivered. The statement of the deliverables will aim to assess the correct use of the objective contents of the sessions.  

Session 1

In this first session, the students have their first contact with the program development environment that they will have to use in the rest of the practices and activities of the subject.

In the first part of the session, the teacher is the one who presents the environment, showing them those elements that will be most useful to them. In the second part the student faces the resolution of several statements that will incorporate interactivity, the mouse and keyboard will be used to interact with the user.

This will enable evidence of RAC1 and RAC2 learning outcomes to be collected.

Session 2

This session is intended for students to practice coding programs of a sequential nature. Due to the nature of the subject, in each session they will use all the concepts worked on in the previous ones. At the end of this session the students will have to solve individually an exercise that will form part of the subject's assessment. 

This will allow evidence of RAC1, RAC2, RAC3 and RAC4 learning outcomes to be collected.

Session 3

This session is intended for students to practice coding programs of a conditional nature.

This session will incorporate work with the concepts of the previous sessions. At the end of the session the students will have to solve individually an exercise that will form part of the subject's assessment. In addition, you will be responsible for programming an INTERACTIVE GAME: Part 1, which you will have to deliver at the beginning of session 5.

This will allow evidence of RAC1, RAC2, RAC3 and RAC4 learning outcomes to be collected.

Session 4

This session is intended for students to practice coding programs of an iterative nature.

At the end of the session the students will have to solve individually an exercise that will form part of the subject's assessment. In this session the student can resolve any doubts that may have arisen regarding the interactive game that was assigned to him in the previous session INTERACTIVE GAME: Part 1 and that he must hand in at the beginning of session 5.

This will allow evidence of RAC1, RAC2, RAC3 and RAC4 learning outcomes to be collected.

Session 5

This session is intended for students to practice coding programs by applying functional decomposition, coding parameterized procedures and using the different forms of execution. 

At the end of the session the students will have to solve individually an exercise that will form part of the subject's assessment. In addition, the expansion of the delivered interactive game, INTERACTIVE GAME: Part 2, will be in charge, adding new functionality. It must be handed in at the end of the quarter.

This will allow evidence of RAC1, RAC2, RAC3 and RAC4 learning outcomes to be collected.

 

At the competency level, the assignments, which will mostly be carried out in non-face-to-face time, cover all the basic and specific competencies of the subject:

  • E4 (design, edit and program interactive multimedia applications)
  • E1 (apply processes, methods and techniques to develop creativity and in video game programming)
  • G5 (develop learning skills with a high degree of autonomy)
  • G3 (interpret data and reflect on the use of appropriate structures in programming) 

In order to pass (pass) the assessment activities, students must 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]

 

Rules for carrying out the activities

For each activity, teachers will be informed of the particular rules and conditions that govern them.

One-on-one activities presuppose the student's commitment to carry them out individually. All activities in which the student does not comply with this commitment will be considered suspended, regardless of their role (sender or receiver). Likewise, the activities to be carried out in groups presuppose the commitment on the part of the students who make it up to carry them out within the group. All activities in which the group has not respected this commitment regardless of its role (sender or receiver) will be considered suspended.

In group activities, the teacher can, based on the information available, customize the grade for each member of the group.

Any undelivered activity will be considered scored with zero points. No late delivery will be accepted.

Evaluation system


The final grade is the weighted sum of the grades for the following activities:

WEIGHT ACTIVITY

WRITTEN TEST AND 20%

WRITTEN TEST II 50%

PRACTICE INDIVIDUAL EXERCISES 5%

PRACTICE: INTERACTIVE GAME PART 1 8%

PRACTICE; INTERACTIVE GAME PART 2 17%

With the above weightings, laboratory activities (exercises and practicals) have a weight of 30% and theoretical activities have a weight of 70%.

Considerations:

To pass the subject, it is essential that the student has a minimum rating of 4 in the individual exercises of the sessions, and also in each of the parts of the interactive game given in the practice part.

If the final mark of the WRITTEN TEST II is not higher than 4 the subject is suspended with the qualification of this activity.

Retrieval only allows retrieving the grade of the theoretical activities: WRITTEN TEST I and II. If the grade of the make-up exam is 4 or higher and the weighting with the practice grade equals or exceeds 5, the subject is approved with a grade of 5.

REFERENCES


Basic

Lauren McCarthy, Casey Reas, Ben Fry. Introduction to p5.js. Marker Media. ISBN: 973-099881309

P5js Reference Guide. https://p5js.org/es/reference/

Montse Rabassa, Lina Juan. Transparencies and class exercises. Internal publication of the ESUPT

Complementary

JavaScript Guide. MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Mario Rubiales Gómez. Wev Development Course: HTML, CSS and Javascript. Grupo Anaya General Publications, 2018. ISBN-10: 8441539391

 

HTML, CSS and JavaScript APIs in w3Schools. https://www.w3school.com