104113 - MULTIMEDIA SYSTEMS

Subject type: Mandatory

Coordinator: Rafael Suarez Gómez

Trimester: First term

Credits: 4

The subject Multimedia Systems opens the subject Multimedia within the Curriculum of the Degree in Audiovisual Media. In this subject the knowledge of the languages ​​of representation of the information (HTML) and design of the presentation (CSS) for web applications begins. The main objective of the subject is to train the student for the creation, edition, design and layout of web portals using the standard languages ​​on the web, paying special attention to their accessibility and usability. The following media are worked on: text, photographic and vector image (drawings), audio and video. The interaction is worked only at the level of navigation (hypermedia).

This subject is continued in the subject of the second term Fundamentals of Programming in which you start using the javascript programming language to increase the interactivity of the web application.

This subject has methodological and digital resources to make possible its continuity in non-contact mode in the case of being necessary for reasons related to the Covid-19.
In this way, the achievement of the same knowledge and skills that are specified in this teaching plan will be ensured.

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

• (RA1) use the ftp and www web services.
• (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.
• (LO4) Know how to edit photographic images and vector drawings with professional software and decide the format for publication on the web.
• (RA5) create, edit, publish and maintain basic multimedia websites following current design patterns to achieve a high degree of usability and accessibility.

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 exercises for understanding the contents that are being presented. It is recommended to bring the laptop to class in order to do these activities. 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 total hours.
• practices (small group), in laboratories that have the necessary equipment for the realization of the same, basically, computers. Students group in pairs and share equipment. 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 by the student will be 5 hours, approximately.

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 by the student will be 40 hours total, approximately.

Content title 1: Basic concepts of multimedia

Description:

This content works on:

1.1. Definitions.
1.2. Representation of information on the computer.
1.3. The Internet.
1.4. Internet services: FTP and WWW.
1.5. Website vs web application.
1.7. Phases of a multimedia project

Related activities:

Activity 4: Partial exam.
Activity 5: Final exam.

Content title 2: Multimedia on the World Wide Web.

Description:

This content works on:

2.1. Website development: local and remote administration of the website.
2.2. The HTML language for multimedia information (content).
2.3. Adding text.
2.4. Adding images.
2.5. Hypermedia navigation: the links.
2.6. The tables.
2.7. The CSS language for design (presentation).
  2.7.1. The selectors.
  2.7.2. Where are CSS placed ?.
  2.7.3. How do styles spread?
2.8. Text and font properties.
2.9. CSS3.

Related activities:

Activity 1. Practice creating and publishing web pages.
Activity 4: Partial exam.
Activity 5: Final exam.

Content title 3: Image, audio and video on the web.

Description:

This content works on:

3.1. Color: nature, RGB, CMYK and HSV models.
3.2. Characteristics of photographic images: color depth, resolution and file weight.
3.3. Properties of compression algorithms: RLE, LZW and JPEG.
3.4. Characteristics of file formats: GIF, JPG and PNG. Optimization.
3.5. Characteristics of vectorized images (drawings).
3.6. Introduction to SVG format.
3.7. Audio incorporation.
3.8. Video embedding.

Related activities:

Activity 2. Practice of photo and vector editing.
Activity 5: Final exam.

Content title 4: Web layout.

Description:

This content works on:

4.1. Graphical user interface (GUI) concept.
4.2. Technologies for the creation of the IGU: layers with CSS.
4.3. Pattern of 3 panels.
  4.3.1. Creation of the horizontal and vertical navigation menu.
4.4. Single page pattern (bootstrap library).
  4.4.1. Creating menus.
  4.4.2. Interactive elements; photo carousels.

Related activities:

Activity 3. Web layout practice.
Activity 5: Final exam.

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

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

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

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

• G5 (development of learning skills needed for further studies). Students must demonstrate: 
  • who are able to access independently the complementary documentation that is given to them: user guides of the software necessary to do the practices, reference tutorials, etc.
  • who have acquired effective work habits, knowing how to analyze the problem they have to solve, access the necessary sources of documentation, and apply advanced technical solutions.
  • that they correctly identify which are the most relevant aspects of learning of the subject, which will be essential to face later subjects successfully.

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: Design the graphical interfaces of static web portals, following usability and accessibility criteria.

Title of the activity 1: Practice of creating and publishing web pages.

General description:

With this practice the student learns to create a website of the personal portfolio type. The mobirise application will be used (https://mobirise.com/es/) for the creation of the portal, so that the student focuses his attention on the structure of the web and in the contents that he wants to present. The portal will only contain text and images of own elaboration. In this first practice, the student does not modify the HTML or CSS directly, any changes are made through the application.

It will be the goal of the practice, to publish the website on the school's web server using ftp. Adobe Dreamweaver software will be used (https://www.adobe.com/es/products/dreamweaver.html) or Filezila (https://filezilla-project.org/) for file transfer.

Support material:

Practice script (available on the digital campus and on the subject's website).

Adobe Dreamweaver User Guide.

Deliveries and links to evaluation:

Must deliver:

• a .zip file with all the files needed to make the web page. It is therefore necessary to compress the structure of folders and files of the website created with mobirise into a single file.
• a text document (.pdf) where the incidents when doing the practice are explained: how long it took to do it, was it easy or not, what was the most difficult, what would you improve, ...

All these documents will be placed in the eCampus mailbox

The website must be published on the student's personal website on the School's web server, ssh.eupmt.tecnocampus.cat.

The result of the activity will have a weighting of 7.5% with respect to the final grade.

Specific objectives:

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

• create a project (website) with Mobirise.
• layout with the portfolio structure.
• incorporate images with the appropriate sizes and format.
• publish the website to the server.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RA1, RA2 and RA5
• This activity contributes to the achievement of the specific competence E1.

Title of the activity 2: Practice of photo and vector editing.

General description:

With this practice the student learns to work with an image editing program for the creation of logos and headers of the website. The technique of the grouping will be worked forming masks that will allow to fuse two different images in one of a single one. We will also use filters to create special effects on images. We will learn to work with layers. The student will create the logo and the cover of his / her personal page started in activity 1.

Support material:

List of reference tutorials that can be found on the web.

Adobe Photoshop User Guide (https://www.adobe.com/es/products/photoshop.htmland Adobe Illustrator (https://www.adobe.com/es/products/illustrator.html).

Deliveries and links to the evaluation:

Must deliver:

• a .zip file with all files in .psd or .ai format that contain the logo and cover designed for your personal page.
• a text document (.pdf) where the incidents when doing the practice are explained: how long it took to do it, was it easy or not, what was the most difficult, what would you improve, ...

All these documents will be placed in the eCampus mailbox.

The logo and cover must be incorporated and published, with the appropriate file type (.gif, .jpg, .png), on the student's personal website.

The result of the activity will have a weighting of 7.5% with respect to the final grade.

Specific objectives:

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

• create a photomontage by mixing different images.
• apply masks with diffused edges to merge two images.
• work with layers
• apply filters to images
• decide the most appropriate file format for the image for web publishing.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: LO4.
• This activity contributes to the achievement of the specific competence E1 and to the evaluation of the basic competence G5.

Title of the activity 3: Web layout practice.

General description:

With this practice the student learns to create a graphical user interface for their personal page that implements the unique page pattern using the Bootstrap library. Practice should incorporate interactive elements: carousels of images, images that rotate when the mouse is over them, and so on. In addition, it will be necessary to incorporate audiovisual pieces into the published content. This practice will be a second version of activity 1, incorporating many elements, especially the application of styles in terms of color and typography. In this practice, emphasis is placed on the semantic structure of HTML and the degree of customization of the design with its own CSS.

Support material:

Internship script (available on the digital campus and on the subject's website)

Adobe Dreamweaver User Guide.

User Guide Adobe Photoshop Handbook.

Deliveries and links to evaluation:

It is necessary to deliver a text document (.pdf) where the incidents when doing the practice are explained: how long it took to do it, it was easy or not, what was the most difficult, what would you improve, ... make explicit the decisions regarding the styles used: why these colors ?, why this typography ?, etc.

This document will be placed in the eCampus mailbox.

The website must be published on the school's web server in the space reserved for the student.

The result of the activity will have a weighting of 15% with respect to the final grade.

Specific objectives:

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

• create an HTML page layouted with Bootstrap.
• decide on the appropriate style for web publishing in terms of the range of colors and typography to be used, using CSS.
• incorporation of interactive elements.
• incorporation of audio and video.

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RA1, RA2, and RA3 RA5
• This activity contributes to the achievement of the specific competence E1

Title of the activity 4: Partial examination.

General description:

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.

Support material:

Statement of the test.

Deliveries and links to evaluation:

Test resolution.

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

Link with the learning outcomes and competencies of the subject:

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

Title of the activity 5: Final exam.

General description:

A single final exam is carried out where the knowledge of contents 1, 2, 3 and 4 is evaluated. This test consists of a part of questions about 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.

Support material:

Statement of the test.

Deliveries and links to evaluation:

Test resolution.

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

Link with the learning outcomes and competencies of the subject:

• This activity is evidence of learning outcomes: RA1, RA2, RA3 i RA5
• 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 three activities of a practical nature carried out during the course. Activity 3 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 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

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.