Hipermedia Programming

Sustainable Development Goals (SDG)

• 5. Gender equality

Objectives

This subject focuses on the programmatic use of audiovisual elements. The objectives are:

• Incorporate digital audio and video elements into an application and provide them with interactivity.
• Work with interactive graphic elements.

Learning outcomes

• Knows how to incorporate multimedia elements into a web application.
• Learn about the mechanisms of interaction with audiovisual elements.
• Knows how to incorporate graphic animations into a client web environment.
• Knows how to work with pixel and vector graphic elements.
• Knows how to program in a language oriented towards artistic context.
• Analyzes one's own personal and professional capabilities in relation to the various areas of professional practice.

Competencies

General skills

• Combine scientific knowledge with technical skill and technological resources to deal with difficulties in professional practice.

Specific skills

• Analyze, design and implement applications for the web, mobile devices, video games or general purposes, using programming languages ​​​​and development tools.
• Develop and manage software and hardware in a multimedia environment.
• Know about the characteristics, functions and structure of operating systems, distributed systems and computer networks, in order to use them well for design and implementation of multimedia applications.

Basic skills

• Students can apply their knowledge to their work or vocation in a professional manner and have competencies typically demonstrated through drafting and defending arguments and solving problems in their field of study.

Core skills

• Display professional skills in complex multidisciplinary contexts, working in networked teams, whether face-to-face or online, through use of information and communication technology.
• Use oral, written and audiovisual forms of communication, in one's own language and in foreign languages, with a high standard of use, form and content.

Content

1. Interactive audiovisual elements in HTML

• Audio
• Video
• Implementing complex data structures
• Use of local storage

Evaluation

The evaluation is based on:

• Specific assessment tests (exams): 30%
  • Final exam
• Completion of required work or projects: 50%
  • Work 1. Interactive audiovisual interface (project): 20%
  • Work 2. Clock with p5js (project): 10%
  • Work 3. One button game (project): 10%
  • Work 4. Data Visualizer (project): 10%
• Monitoring of work carried out: 20%

The final exam can be retaken on the retake date established in the calendar.

Methodology

The subject is based on practical learning through projects in which the following activities are used:

• Explanation of the theoretical content by the teacher
• Practical demonstrations by the teacher
• Guided project development sessions

Bibliography

Key references

• Gross, B., Lee, J. & Poldervaart, N. (2018). Generative design : visualize, program, and create with JavaScript in p5.js. Retrieved from https://ucercatot.uvic-ucc.cat/permalink/34CSUC_UVIC/16civub/alma991001108878606718
• McCarthy, L., Reas, C. & Fry, B. (2016). Getting started with p5.js. Retrieved from https://ucercatot.uvic-ucc.cat/permalink/34CSUC_UVIC/16civub/alma991001042743306718
• McCarthy, L.; Reas, C.; Fry, B. (2015). Getting Started with p5.js. Maker Media.
• Meyer, J. (2022). Programming 101 : learn to code with the processing language using a visual approach. Retrieved from https://ucercatot.uvic-ucc.cat/permalink/34CSUC_UVIC/1nl2ep/alma991060892349806706
• Reas, C.; Fry, B. (2014). Processing: A Programming Handbook for Visual Designers (2 ed.). The MIT Press.

Further reading

Teachers will provide complementary bibliography and compulsory reading throughout the course via the Virtual Campus.