104123 - FUNDAMENTALS OF PROGRAMMING

Subject type: Mandatory

Coordinator: Maddalena Fedele

Trimester: Second term

Credits: 4

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, 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.

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 to: validate forms, collect user data and store data.
• (LO2) Create small interactive multimedia applications on the web: games, media player, animations, etc.

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

• (RAC1) Create small programs in javascript that collect and validate user data and then make calculations with this data and present the results to the user appropriately (linked to RA1).
• (RAC2) Write programs in javascript that use objects to store information (linked to RA1).
• (RAC3) Use the javascript language and the jQuery library to provide web pages with animation and interactivity using the programming paradigm in response to events (linked to RA2).
• (RAC4) 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 (linked to RA2).
• (RAC5) Analyze the usability and accessibility requirements, collecting data and information from similar websites, in order to optimize the design of the application and, reflectively, justify the suitability of the design (linked to G3)

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 comprehension exercises of 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. The dedication by the student will be: 3h / week. x 10 set. = 30 hours total
• 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. The dedication by the student will be: 1h / week. x 10 set. = 10 hours total

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. The dedication on the part of the student will be 5 hours, about.

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. The dedication on the part of the student will be 40 hours total, about.

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: Application with user selection.
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.

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

In order to pass (pass) the assessment activities, students must demonstrate:

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

In relation to the basic competence assigned to the subject, this is covered especially with regard to the aspects that are explained:

• G3 (collect and interpret data and information to substantiate their judgments and, if necessary, reflect on social, scientific or ethical aspects [MECES-2 point c]). Students must demonstrate: 
  • that in the face of different solutions to a problem, they are able to collect data and information from similar examples that allows them to decide, justifiably, which solution is optimal.
  • that the degree of usability and accessibility of the application are taken into account, collecting empirical data, in order to decide optimizations of the application design

All the activities of the subject contribute to the progressive achievement of the specific competence of the subject, more specifically, in the following aspects:

• E1: Program the graphical interfaces of static web portals and interactive applications following usability and accessibility criteria.

Title of the activity 1: Web development environment.

General description:

Laboratory practice. Realization in group of two people.

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 test 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.

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 6% corresponding to the final grade.

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.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RAC1 and RAC2.
• This activity contributes to the achievement of the specific competence E1.

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

General description:

Laboratory practice. Realization in group of two people.

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.

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 6% corresponding to the final grade.

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.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RAC1 and RAC2.
• This activity contributes to the achievement of the specific competence E1.

Activity title 3: Application with user selection.

General description:

Laboratory practice. Realization in group of two people.

It is necessary to develop a web program that provides the user with a self-assessment test or a questionnaire. 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.

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 6% corresponding to the final grade.

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.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RAC2, and RAC3 RAC5.
• This activity contributes to the achievement of the specific competence E1 and contributes to assessing the basic competence G3.

Title of the activity 4: Interactive game.

General description:

Laboratory practice. Realization in group of two people.

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.

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 12% corresponding to the final grade.

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.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RAC2, RAC3, and RAC4 RAC5.
• This activity contributes to the achievement of the specific competence E1 and contributes to assessing the basic competence G3.

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 taken, the teacher will explain the resolution to the group.

Support Material:

Statement of the test.

Deliveries and links to the evaluation:

Test result.

The result of the activity will have a weighting of 21% corresponding to the final grade.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RAC1 and RAC2.
• This activity contributes to the achievement of the specific competence E1.

Title of the activity 6: Final exam.

General description:

Individual 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 has been taken, the teacher will publish the resolution.

Support Material:

Statement of the test.

Deliveries and links to the evaluation:

Test result.

The result of the activity will have a weighting of 49% corresponding to the final grade.

Link with the learning outcomes and competencies of the subject:

• this activity is evidence of learning outcomes: RAC1, RAC2, RAC3 and RAC4.
• This activity contributes to the achievement of the specific competence E1.

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

Final Note = 0.7 Theory Note + 0.3 Practical Note

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

The Theory Note is obtained by taking two exams,

                  Theory Note = 0.3 Partial Note + 0.7 FinalExamination Note

In the NotaParcial 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 FinalNoteExam exam is a single exam where all the knowledge of the contents of the subject is assessed. It will have a duration of 3 hours, within the period of final exams established by the Head of Studies. It is necessary to take a minimum grade of 5 in this exam to be able to pass the subject.

If, finally, the student has not obtained a Final Grade greater than or equal to 5.0, the student will be able to appear in a single exam of recovery of NotaTeoria (70% of NotaFinal), within the period of recovery exams 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. It is necessary to get a minimum grade of 5 in this Recovery Exam to be able to pass the subject.

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. The student will obtain a grade of "Not presented" in the Practice Note if there is an internship activity not scored.

Completion of practical activities is mandatory. That is to say, a qualification of "Not presented" in NotaPràctiques, will not allow to apply the weighting with the NotaTeoria and, therefore, the final qualification of the asignatura will be of "Not Presented".

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

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

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

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

Edgar by Andrea Font. Javascript. Programming Course. Info Book Editions. ISBN: 978-84-15033-01-1