General information


Subject type: Mandatory

Coordinator: Maddalena Fedele

Trimester: First term

Credits: 4

Teaching staff: 

Marco Antonio Rodríguez Fernández

Skills


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

  • E4_Design, plan, edit, program and market interactive multimedia applications

  • E17_Write journalistic pieces of different genres with their headline systems and express themselves correctly both in writing and orally

Description


 

With the aim that the student achieves the necessary skills to be able to understand the function of electronic publication and its fields of application. This subject delves into both the field of web communications design and the production of technological supports that support it. The first topic of the subject delves into the concepts necessary to understand the structure that supports the Internet as well as the history and the more normative aspects of the publication of content on the network. The second topic reviews the possibilities and limitations of the technique that makes it possible to publish content on the web. The third topic reviews the most relevant theoretical and practical concepts when developing interactive content, and finally the fourth topic reviews the most relevant theories regarding the concepts of usability, accessibility and user experience design within the scope of the publications on the network.

Learning outcomes


At the end of the course students must be able to:

  • LO1: Use web, email, ftp and www services.
  • LO2: Know and be able to correctly apply the information representation languages ​​on the HTML and CSS web.
  • LO3: Create, edit, publish and maintain basic multimedia websites following current design patterns.
  • LO4: Create small interactive multimedia applications on the web: games, media players, animations, etc.
  • LO5: Make use of strategies and processes for creating interactive multimedia products.
  • LO6: Explain the function of electronic publishing and its fields of application.
  • LO7: Design, edit and maintain dynamic websites: blogs, wikis, digital publications using content management systems.
  • LO8: Build websites based on information architecture and a suitable publishing model.
  • LO9: Explain the legislation that affects and regulates electronic publishing.

 

Working methodology


Theory classes: In the theory classes, the teaching staff combines master classes with problem solving and the presentation of theoretical content necessary for their resolution. The student has the support material in the virtual campus. The solution to the problems raised is published after a few days and discussed in class. This will allow the student to go to class having previously read the topics.

Practical classes: Although these classes will be held in the laboratories, it is recommended that the student use his own laptop for greater comfort. Some of the practices can be individual, although usually the students are grouped in teams of 3 or 4 people. The dynamics of the activities consist of an explanation of the work to be carried out over the next two weeks and personalized attention to resolving doubts.

The assignment is structured in 3h/week of theory sessions and 1h/week of practical work in the laboratory.

Contents


1. Publication of content on the Internet 

1.1 Basic concepts of electronic publication.

1.2. Study of the WWW as a medium language.

1.3. Rules of netiquette, ethics and licenses.

2.: Tools for web publishing

2.1. Operation of the protocols that make the WWW possible

2.2. HTML5 features

2.2.1. HTML skeleton

2.2.2. Elements specific to HTML5

2.2.3. tables

2.2.4. Lists

2.2.5. Span, Div, Id and Class groupings

2.2.6. Forms

2.3. Class hierarchies

2.4. CSS style sheets

2.4.1. CSS validator

2.4.2. CSS selectors

2.4.3. Colors in CSS

2.4.4. CSS animations

2.4.5. Organization of styles with CSS

2.4.6. Use of CSS libraries

2.5. Adaptive web design

3. Development of interactivity with JS (P5.js)

3.1. Principles of interactive design

3.2. fitts law

3.3. Interaction via keyboard and mouse

3.3.1. Types of events

3.3.2. Active consultation and event managers

3.4. Collisions with elements

4. Usability and accessibility

4.1. Information architecture

4.2. Accessibility

4.3. Usability

4.3.1. Usability test

4.3.2. Usability heuristics

4.4. User-centered design and co-creation

Learning activities


With the aim of collecting evidence of the achievement of the expected learning outcomes, the following activities of an evaluative nature will be carried out (related to all the common competences):

 

A1. Class exercise: Level quiz (Evidence of learning outcome RA2 and RA1)

A2. Class exercise: HTML+CSS exercise (Evidence of learning outcome RA2)

A3. Home exercise: Interactive programming exercises (Evidence of learning outcome LO5)

A4. Class exercise: Heuristic test (Evidence of learning outcome RA6)

A5. Class exercise: Test card sorting (Evidence of learning outcome RA5)

A6. Laboratory practice: Web construction with HTML and CSS (Evidence of the learning outcome RA2 and RA1)

A7. Laboratory practice: Construction of interactive elements in web format (Evidence of learning outcome RA4)

A8. Laboratory practice: Application prototyping (Evidence of learning outcome RA4 and RA5)

A9. Laboratory practice: Design of a CMS (Evidence of the learning outcome LO3, LO8 and LO7)

A10. Final exam (Evidence of all learning outcomes)  

 

General criteria of the activities:

  • The teacher will present a statement for each activity and the evaluation and / or rubric criteria.

  • The teacher will inform of the dates and format of the delivery of the activity.

Evaluation system


The grade of each student will be calculated following the following percentages:

 

A1. Class exercise: 0% level quiz 

A2. Exercise in class: HTML + CSS exercise 3,5%

A3. Exercise at home: Interactive programming exercises 3,5% 

A4. Class exercise: Heuristic test 3,5%

A5. Class exercise: Test card sorting 3,5%

A6. Laboratory practice: Web construction with HTML and CSS 8%

A7. Laboratory practice: Construction of interactive elements in web format 8% 

A8. Laboratory practice: Application prototyping 8%

A9. Laboratory practice: Design of a CMS 12%

A10. Final exam: 50% 

 

Final grade = A1 0 + A2 0,035 + A3 0,035 + A4 0,035 + A5 0,035 + A6 0,08 + A7 0,08 + A8 0,08 + A9 0,12 + A10 0,50

 

Considerations:

  • It is necessary to obtain a mark higher than 5 in the final exam to be able to pass the subject.

  • An activity not delivered or delivered late and without justification (court summons or medical matter) counts as a 0.

  • It is the responsibility of the student to prevent plagiarism in all its forms. In the case of detecting plagiarism, regardless of its scope, in any activity it will correspond to having a grade of 0. In addition, the teacher will inform the head of studies of the situation so that applicable measures can be taken in the matter of sanctioning regime.

  • Attendance at laboratory practices is mandatory.

  • The make-up exam only recovers the theory grade. This theory grade must be higher than a 5.

REFERENCES


Basic

Designing Web Usability: The Practice of Simplicity - Jakob nielsen, 1999 - https://www.amazon.com/dp/156205810X?tag=useitcomusablein

Nielsen, J. (1999). Designing web usability: The practice of simplicity. New Riders Publishing.

Complementary

MacDonald, M. (2013). HTML5: The missing manual. "O'Reilly Media, Inc.".

 

McFarland, DS (2012). CSS3: the missing manual. "O'Reilly Media, Inc.".

McCarthy, L., Reas, C., & Fry, B. (2015). Getting Started with P5. js: Making Interactive Graphics in JavaScript and Processing. Maker Media, Inc.