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 the electronic publication and his fields of application. This subject delves both into the field of web communications design and into the field of the production of technological supports that support it.

Learning outcomes


  • Explain the function of electronic publishing and its fields of application.
  • Design, edit and maintain websites.
  • Design, edit and publish websites taking into account usability and accessibility criteria.
  • Build websites from an information architecture and an appropriate publishing model.
  • Distinguish the characteristics of web-based information systems and the main telematic content distribution networks.

 

Working methodology


Theoretical classes: With the exception of some master classes, the rest of the classes the teacher proposes and solves problems, exposing the theoretical contents necessary for their resolution. Each of these activities are usually simple problems or exercises for understanding the contents that are being presented. The student has and uses as support material within the virtual campus. The solution to these problems is published a few days later and discussed in class. 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.

Practical classes: Although these classes will be held in the labs, the student is recommended to use their own laptop for added convenience. Some of the practices will be individual, and others 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.

Contents


  • U1: Publication of contents on the Internet
    • Basic concepts of electronic publishing.
    • Study of the WWW as a language of a medium.
    • Rules of etiquette, ethics and licensing.
  • U2: Tools for web publishing
    • Operation of the protocols that make the WWW possible
    • HTML5 features
      • HTML skeleton
      • Elements of HTML5
      • Tables
      • Lists
      • Span, Div, Id and Class groupings
      • Forms
    • Class hierarchies
    • CSS style sheets
      • CSS Validator
      • CSS selectors
      • Colors in CSS
      • CSS animations
      • Organization of styles with CSS
      • Use of CSS libraries
    • Adaptive web design (responsive)
  • U3: Development of interactivity with JS
    • Operation of the DOM
      • Properties and methods of the DOM
    • Interactive CSS-HTML-JS editing with CodePen
    • Debugging and inspection using the browser.
    • Variables, conditionals and loops.
    • Mathematical functions for the motion of elements.
    • Collisions and interactions with mouse and keyboard.
  • U4: Information architecture and interactive design
    • Characteristics of information in an onLine environment
    • Structuring information on a website
    • Principles of interactive design
    • Style guide
    • Typography and colors
    • User-centered design / design thinking
  • U5: Data access and visualization
    • Organization of data on a server
    • Access to structured data
    • Visualization and representation tools
    • Types of databases
    • Types of relationship with social networks
    • Graphic display of large amounts of data
  • U6: Construction of websites with CMS
    • Installation and configuration of a CMS
    • Modification of topics
    • Operation of accommodation services
    • ECommerce oriented CMS

Learning activities


  • U1: Publication of contents on the Internet
    • Exercise 1: Exercise on some of the concepts worked on in class
    • Exercise 2: Self-assessment questionnaire
  • U2: Tools for web publishing
  • U3: Information architecture and interactive design
    • Practice 1: Analysis of a website.
      • With this practice, the student is expected to demonstrate the knowledge acquired in unit 3.
    • Exercise 4: Work with tools to make color palettes and styles.
    • Partial Exam
      • Theoretical exam to evaluate the contents in writing
      • No notes or technological resources may be used
      • The exam will be done in person on paper
  • U4: Development of interactivity with P5.JS
    • Practice 2: Simple video games with HTML + CSS + JS
      • The student will have to demonstrate in the first practice the comprehension of the contents worked in the U2, the U3 and to previous subjects.
    • Exercise 3: Battery of exercises to practice with loops
  • U5: Data access and visualization
    • Practice 3: Building an interactive website with p5.js
      • This practice involves retrieving data from the cloud from CSV or JSON documents and representing them interactively.
    • Exercise 5: Interactive visualization of data in the cloud.
  • U6: Construction of websites with CMS
    • Practice 4: Construction of a content management system.
      • This practice involves implementing a content manager.
    • Final Exam.

Evaluation system


Weighting of notes

  • Partial Exam: 20%
  • Final Exam: 30%
  • Class work: 10%
  • Internships: 40%

In order to take into account the internship grade and the class work grade, the average of the exams must exceed 5. The extraordinary call for the subject will recover the grade of the two exams.

Activities (internships and assignments) cannot be recovered. In the case of plagiarism or copying, both the plagiarized student and the plagiarized student will be penalized. The student will have to deliver the works in the established terms. Otherwise, the grade for an overdue activity is a 0.

REFERENCES


Basic

MacDonald, Matthew. HTML5: The Missing Manual. Sevastopol, California: O’Reilly, 2011 

https://www.amazon.com/HTML5-Missing-Manual-MacDonald/dp/1449363261

 

McFarland, David Sawyer. CSS3: The Missing Manual, 3rd Edition [online]. 3. Sevastopol, California: O’Reilly, 2012 

http://www.oreilly.com/pub/missingmanuals/csstmm4e

Palacios, Alfons. Electronic Publishing Notes. 5.9. Mataró: Electronic publication in the Atenea space, 2015.

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

Complementary

Damian Wielgosik. How to Code in HTML and CSS3.

http://howtocodeinhtml.com/

Processing community times JavaScript community - https://p5js.org