General information

Subject type: Mandatory

Coordinator: Rafael Suarez Gómez

Trimester: First term

Credits: 4

Teaching staff: 

Roger King Sole


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


The subject "Multimedia Systems" is the first contact with digital media and multimedia environments within the curriculum of the "Degree in Audiovisual Media". In this subject, the learning of both the nomenclatures and essential concepts that live in the ecosystem of audiovisual technology begins, as well as the layout of multimedia documents through the language of brands.

The aim is to provide the student with a global vision of audiovisual techniques, and at the same time, initiate him in the creation of interfaces using the standard languages ​​on the web. In this first contact with multimedia design, the knowledge that refers to the management of the interaction is left out, since this subject has its continuation in the subject of the second term Fundamentals of Programming (in which starts in the use of the programming language javascript to increase the interactivity of the web application).


Learning outcomes

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

  • (LO2) Know how to apply the most appropriate characteristics and formats of the different digital media that make up a multimedia production: text, image, sound and video.
  • (LO3) Know how to correctly apply information representation languages ​​to the HTML and CSS web.
  • (RA5) create, edit, publish and maintain basic multimedia websites following current design patterns to achieve a high degree of usability and accessibility.


Working methodology

Guided learning hours consist of:

  • Theoretical classes (large group) in which the teacher makes a presentation to introduce the general learning objectives of the corresponding contents. 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 highly recommended that the student have his / her own laptop in class for the correct follow-up of the theoretical sessions. The student has and uses, as support material, the notes of the subject that the teacher puts at his disposal from the virtual campus. The dedication by the student will be: 3h / week. x 10 set. = 30 total hours.
  • The practices (in small groups in alternating weeks), are carried out in laboratories that have the necessary equipment, although the student can use his laptop to work these contents. The dedication by the student will be: 2h / week. x 5 set. = 10 total hours.

The dedication by the student will be 4 hours a week, approximately. Within the hours of autonomous learning are counted the hours that the student dedicates to make a previous reading of the notes for the corresponding theoretical class, the realization of exercises and works proposed out of classroom, the study of the necessary manuals for to be able to carry out the practices, the writing of the reports of the practices and works, the resolution of questionnaires of self-learning, the study and preparation of the partial examinations, etc. The dedication by the student will be 40 hours total, approximately.


U1 Audiovisual technical concepts

1.1 Disciplines of the audiovisual industry

Description of technical disciplines (Rotoscopy, Keying, Mat Painting, mocap, etc.) as well as the possible ones workflows among them, from an example of study.

1.2 Nonlinear editing and vertical composition

1.3 Codec format and resolution

1.4 Color depth

This section includes learning certain related concepts, such as the difference between Bytes & bits, or some issues such as Banding.

1.5 Channels alpha

1.6 Magnitudes and capacities

Vectorial Vs. Bitmap, compression systems, capacity calculation, etc.

1.7 Color spaces

RGB, CMYK, HSB models. Color spaces Rec709, Rec2020, etc.

1.8 Interfaces

Exploration and comparison between some systems Friendly and others by trees.

1.9 Definitions

Visual definitions of some basic technical concepts, such as motion blur, Frame blending, Interpolation, Composition operations, among others.


U2 Multimedia Contents

2.1 Definitions

This section sets out some of the definitions needed to construct the knowledge that is raised later. Multimedia applications and interactives, webdocs, etc.

2.2 Internet and hypertext

Historical and technical review of the Internet. How is information stored on the network? What is hypertext? What hardware and software is required for the operation of Internet services? What do we need to create a website?

2.3 Graphical user interface

Information architecture, usability, accessibility, adaptive, etc.

2.4 The internet network

Protocols, IP's, internet services, static and dynamic pages, etc.


U3 Multimedia file structure and markup language

HTML markup language is needed to structure multimedia content. This unit will show the most common tags when modeling content on the web.

3.1 HTML5 documents

3.2 Basic labels

3.3 Images

3.4 Links

3.5 Multimedia

3.6 Tables

3.7 Lists


U4 Presentation of documents using style sheets

Style sheets are the technique used to define and create the presentation of structured documents. This unit will analyze the possibilities of CSS to configure the graphical presentations of these documents.

4.1 Colors

4.2 Typographies

4.3 Margins

4.4 selectors

Learning activities

A1: Web creation practice (Mobirise or similar) and connection to server via ftp

Sessions: 1 and 2

Description: First contact in the creation and publication of websites and ftp file sharing systems.

Material: Mobirise web layout system or similar. Filezilla FTP file sharing software. Official references and statement of the practice available in the virtual classroom.

Delivery: Publish the website to the server and deliver to the virtual classroom a document in .pdf format where the web address is attached.


This activity is evidence of learning outcomes: LO5

This activity contributes to achieving the specific competencies G5 and E1.


A2: Test on units 1 and 2

Session: 3

Description: Brief test on the first two units. It will be done through the virtual classroom. At the end, possible mistakes will be discussed in the classroom. This test corresponds to the value of the Partial Note set out above.


This activity is evidence of learning outcomes: LO2

This activity contributes to achieving the G5 specific competence.


A3: Layout a web page using HTML source code and give it a custom look using CSS.

Session: 4

Description: Implement the HTML and CSS tags discussed in the theoretical sessions.

Equipment: sublime text o in order to model the practice in question.

Delivery: Delivery to the virtual classroom of a .zip file with the corresponding code.


This activity is evidence of learning outcomes: RA3 and RA5

This activity contributes to achieving the specific competencies G5 and E1.


A4: Final exam

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

This activity contributes to achieving the specific competence E1.

Evaluation system

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 three activities of a practical nature carried out during the course.

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.

The FinalNote_Ex exam is a single exam where all knowledge is assessed of all the contents of the subject. 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 Examination of Recovery of NotaToría (70% of NotaFinal), within the period of examinations of recovery that establishes the Director 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 take a minimum grade of 5 in this resit exam in order to pass the course.


Rules for carrying out the activities

All the activities of the subject are individual.

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 Internship Note if there is any unrated internship activity.

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



Matthew MacDonald. HTML5: The missing manual, 2nd Edition. O'Reilly Media. ISBN: 978-1-44936-326-0

David Sawyer McFarland. CSS3: The missing manual, 3rd Edition. O'Reilly Media. ISBN: 978-1-4493-2594-7

Peters, JJ A History of Television (EBU)

Pareja Carrascal, E.- Current television technology. IORTV; Madrid 2005


Daniel D. McCracken and Rosalee J. Wolfe. User-centered web site development: a human-computer interaction approach. Prentice-Hall, 2004. ISBN 0130411612.

Patrick J. Lynch, Ms. Sarah Horton. Web Style Guide. Basic Design Principles for Creating Web Sites. 3rd 2008. ISBN 978-0-300-13737-8.

Rainwater, C. Light and Color. DAIMON editions

Grob, B., Herndon, Ch.- Basic TV and Video Systems. Glencoe / McGraw-Hill, 1999.