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

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

Skills

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
• Implementation of complex data structures
• Use of local storage
2. Hypermedia programming with p5js (visual web canvas programming)
   
   1. Introduction to the p5js environment
   2. Basic shapes
   3. Work with images
   4. colors
   5. Freelance agents and classes
   6. Parsing JSON data
   7. interaction

Evaluation

The evaluation is based on:

• Specific assessment tests (exams): 30%
  • Final exam
• Completion of required work or projects: 50%
  • Work 1. Audiovisual interactive interface (project): 20%
  • Work 2. Clock with p5js (project): 10%
  • Work 3. One-button game (project): 10%
  • Work 4. Data viewer (project): 10%
• Follow-up of work done: 20%

The final exam can be recovered on the recovery 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.