General information


Subject type: Mandatory

Coordinator: Maddalena Fedele

Trimester: Second term

Credits: 4

Teaching staff: 

Joan Jou Majó

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

Description


The subject "Fundamentals of Programming" is part of the Multimedia area of ​​the Degree in Audiovisual Media. In this subject the student is introduced to learning a programming language that will allow him 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, the standard language on the web. 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.

Learning outcomes


In general, this subject contributes to the following learning outcomes (RA) specified for the subject to which it belongs (Multimedia):

  • (LO1) Create small programs in javascript that collect and validate user data and then make calculations with that data and present the results to the user appropriately.
  • (LO2) Write javascript programs that use objects to store information.
  • (LO3) Use the javascript language and the jQuery library to provide web pages with animation and interactivity using the programming paradigm in response to events. 
  • (LO4) Create small interactive multimedia applications on the web. The most important interaction will be the change of position of some elements of the graphical user interface.

Working methodology


Guided learning hours consist of:

  • theoretical classes (large group) in which the teacher proposes and solves a programming problem on the web and makes a presentation to introduce the theoretical contents necessary for its resolution (learning by example). Conveniently interspersed and without prior notice, individual or group follow-up activities are performed within the class. These activities are usually small problems or exercises for understanding the contents that are being presented. It is recommended that the student bring his / her personal laptop to class. The student has and uses as support material, the notes of the subject that the teacher puts at his disposal from the first day, both in printed format and on the virtual campus. This will allow the student to go to class having made a previous reading of the topics and, in class, concentrate on the teacher's explanations, taking the notes he deems appropriate for further study.
  • practices (small group), in laboratories that have the necessary equipment for the realization of the same, basically computers. Students are grouped in pairs and share the equipment and practice note.

In addition, there are guided activities that consist of explanations, more or less personalized, of the corrections of the different activities carried out by the students, basically the partial exams and the practices.

Within the hours of autonomous learning are considered the hours that the student dedicates to make a previous reading of the notes for the corresponding theoretical class, realization of exercises and works proposed out of the classroom, study of necessary manuals to be able do the practices, writing the reports of the practices and works, resolution of questionnaires of self-learning, study and preparation of the partial examinations, etc.

 

 

Contents


Content title 1: Basic programming in javascript.

Description:

This content works on:

1.1. What is a program?
1.2. Structure of a javascript program. Function concept.
1.3. Data input and output.
  1.3.1. I / O with windows: prompt, confirm / alert
  1.3.2. I / O with forms.
1.4. Data types: numbers, strings and booleans.
1.5. Data values.
  1.5.1. Variables: creation, access and modification.
  1.5.2. Constants and literals: creation and access.
  1.5.3. Data scope: local and global.
1.6. Expressions and operators.
  1.6.1. Arithmetic, logical and relational operators.
  1.6.2. Expression evaluation. Order of operations.
  1.6.3. Math object
1.7. Execution control structures.
  1.7.1. Sequential structure.
  1.7.2. Conditional structure: if ..., if ... else ..., if ... else if ...
  1.7.3. Iterative structure: for
1.8. Structuring the program in functions.
  1.8.1. Avoid code repetition.
  1.8.2. Passing parameters and returning values.
1.9. Exercises.

Related activities:

activity 1: Web development environment.
activity 2: Application with textual I / O.
activity 5: Partial exam.
activity 6: Final exam.

 

Content title 2: Data collections: objects.

Description:

This content works on:

2.1. Objects.
  2.1.1. Properties and methods
  2.1.2. Creating objects.
  2.1.3. Access to properties and methods
2.3. String object
2.4. Date object
2.5. Exercises

Related activities:

activity 3: Self-assessment test.
activity 4: Interactive game.
activity 5: Partial exam.
activity 6: Final exam.

 

Content title 3: Dynamic HTML (DHTML).

Description:

This content works on:

3.1. Document Object Model (DOM).
3.2. Introduction to the jQuery library.
3.3. Access and modification of the DOM with jQuery.
  3.3.1. Selectors: basic, advanced and filters.
  3.3.2. Add, change and delete HTML elements.
  3.3.3. Read and change CSS properties
  3.3.4. JQuery effects: show / hide, animations.
3.4. Programming in response to user events.
  3.4.1. Basic event model.
  3.4.2. Obtaining event information (Event object)
  3.4.3. JQuery event model.
3.5. Interactive audio and video.
3.6. Interactive games.
3.7. Timing: setInterval () and setTimeout ()
3.8. Collisions.
3.9. Exercises.

Related activities:

activity 4: Interactive game.
activity 6: Final exam.

Learning activities


In order to gather evidence of the achievement of the expected learning outcomes, the following assessment activities will be carried out:

Title of the activity 1: Web development environment.

General description:

Laboratory practice.

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.

This activity is evidence of learning outcomes: RA1 and RA2.

Support Material:

Practice statement with the source code of the program to be written, tested and debugged.

The software required is: Adobe Dreamweaver or JetBrains WebStorm.

Deliveries and links to the evaluation:

The student delivers via the intranet, the website with the program implemented so that it can be tested in the browser.

The result of the activity will have a weighting of 1/5 of 25% corresponding to the final qualification assigned to the set of the 4 programmed practical activities.

Specific objectives:

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

  • use the development environment to write, test, and debug a web program written in javascript.

 

Title of the activity 2: Application with textual I / O.

General description:

Laboratory practice.

It is necessary to develop a web program in which the user provides information (text and numbers) in a textual way and the application will make some calculations and inform the user of the results obtained.

This activity is evidence of learning outcomes: RA1 and RA2.

Support Material:

Statement of practice.

The software required is: Adobe Dreamweaver or JetBrains WebStorm.

Deliveries and links to the evaluation:

The student delivers via the intranet, the website with the program implemented so that it can be tested in the browser.

The result of the activity will have a weighting of 1/5 of 25% corresponding to the final qualification assigned to the set of the 4 programmed practical activities.

Specific objectives:

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

  • Develop a web program in javascript that collects information provided by the user and makes a series of calculations informing the user of its results. The application will manage the information it shows the user at all times.

 

Activity title 3: Self-assessment test.

General description:

Laboratory practice.

It is necessary to develop a web program that provides the user with a self-assessment test. There will be 10 questions with 4 possible answers (only one good) that the user will have to answer one by one. You will be given the opportunity to change the answers until the test is over. Once the user completes the test, the program reports the correct and incorrect results as well as the grade achieved. One question answered incorrectly, subtract 1/3 of a point.

The graphical user interface will be through a form that must be validated.

This activity is evidence of learning outcomes: RA2 and RA3.

Support Material:

Statement of practice.

The software required is: Adobe Dreamweaver or JetBrains WebStorm.

Deliveries and links to the evaluation:

The student delivers via the intranet, the website with the program implemented so that it can be tested in the browser.

The result of the activity will have a weighting of 1/5 of 25% corresponding to the final qualification assigned to the set of the 4 programmed practical activities.

Specific objectives:

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

  • Develop a web program in javascript that manages data collections on objects (questions and answers of the self-assessment test), ask the user for information through forms, validate the data provided by the user and do a series of calculations informing the user of their results.

 

Title of the activity 4: Interactive game.

General description:

Laboratory practice.

You will need to complete the code of a javascript program (+ jQuery) that allows you to implement an interactive game. User interaction will be via keyboard or mouse. At the start of the game, the program will present a game setup menu. The interface must adapt to these configuration values ​​entered by the user.

This activity is evidence of learning outcomes: RA2, RA3 and RA4.

Support Material:

Statement of practice. Program skeleton code and HTML + CSS of the graphical user interface.

The software required is: Adobe Dreamweaver or JetBrains WebStorm.

Deliveries and links to the evaluation:

The student delivers via the intranet, the website with the program implemented so that it can be tested in the browser.

The result of the activity will have a weighting of 2/5 of 25% corresponding to the final qualification assigned to the set of the 4 programmed practical activities.

Specific objectives:

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

  • Develop a web program in javascript that interacts with the user through the keyboard or mouse, request information from the user through forms and adapt the graphical user interface according to the data provided by the user.

 

Activity title 5: Partial examination.

General description:

Individual partial exam.

An exam is carried out where the knowledge of contents 1 and 2 is evaluated. This test consists of a part of questions on concepts associated with the learning objectives of the subject in terms of knowledge and understanding, and a set of application exercises. The student has 2 hours to take the test within his / her regular class schedule. Once the exam has been completed, the teacher will explain the resolution to the group.

This activity is evidence of learning outcomes: RA1 and RA2.

Support Material:

Statement of the test.

Deliveries and links to the evaluation:

Test result.

The result of the activity will be incorporated into the evaluation of the subject with a value of 30% of the theory mark, ie 22,5% of the final mark.


 

Title of the activity 6: Final exam.

 

General description:

Final exam.

A single final exam is carried out where the knowledge of contents 1, 2 and 3 is evaluated. This test consists of a part of questions on concepts associated with the learning objectives of the subject in terms of knowledge and understanding, and a set of application exercises. The student has 3 hours to take the test in the final exam period established by the Head of Studies. Once the exam is completed, the teacher will publish the resolution.

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

Support Material:

Statement of the test.

Deliveries and links to the evaluation:

Test result.

The result of the activity will be incorporated into the evaluation of the subject with a value of 70% of the theory mark, ie 52,5% of the final mark.

 

 

 

 

Evaluation system


The final grade is obtained from the following weighting of the partial grades:

NFinal = 0.75 NTheory + 0.25 NPractice

NPractics is obtained with the arithmetic mean of the four practical activities carried out during the course. Activity 4 weighs twice as much as the other practical activities.

NTeoria is obtained by taking two exams,

                  NTheory = 0.3 NPartial + 0.7 NExam_Final

In the NParcial exam, the knowledge of contents 1 and 2 is assessed. This test lasts 1,5 hours and is carried out during class hours, in the middle of the term (week 5, approximately).

The NExamen_Final exam is a single exam where all the knowledge of the contents of the subject is evaluated. It will have a duration of 3 hours, within the period of final exams established by the Head of Studies.

If, finally, the student has not obtained an NFinal higher than or equal to 5.0, the student will be able to present to an only examination of recovery of NTeoria, inside the period of examinations of recovery that establishes the Head of Studies. Students who have a final grade of "Not Presented" in the first call, will not be able to take the resit exam.

 

Rules for carrying out the activities

The "laboratory practice" activities will be carried out in groups of two people.

If any of the internship activities is not carried out, it will be considered non-scored.

You will get a grade of Not presented in NPractics if there is any non-scored internship activity.

Completion of practical activities is mandatory. That is to say, a qualification of Not presented in NPractices, will not allow to apply the weighting with the NTeoria and, therefore, the final qualification of the asignatura will be of “Not Presented”.

REFERENCES


Basic

David Sawyer McFarland. Javascript & jQuery. The missing manual. (2nd edition). O'Reilly Media. ISBN: 978-1-4493-9902-3

Complementary

Natalie MacLees. jQuery for designers. Packt Publishing. ISBN: 978-1-84951-670-9