This course aims at providing students with the methodological and technical knowledge and skills needed to develop, in a systematic and efficient way, high quality web-based multi-device hypermedia applications (for desktop computer, tablet, or smart phone).

After this course, the student will be skilled in the development of web-based applications and in the modular implemenentation both the front-end and the back-end components of a web-based application. The student will also be able to analyse the quality of a web-based application from a user-centered perspective, and to perform inspection-based evaluation of the usability  of the interface and the navigation structure.

Course contents include two main components: a technology-oriented componentand a methodology-oriented component.

The technology-oriented part aims at developing key competences related to the implementation of complex web based hypermedia. Topics addressed include:

• Key concepts of: Multilayer Web Architectures, Cloud Computing, Web protocol, Multimedia Formats, Web vs Hybrid vs Native Applications
• Presentation technologies and languages: XML (XHTML) and Cascading Style Sheets (CSS3)
• Technologies for client-side oriented web applications (HTML5, JS, JQuery)
• Technologies for dynamic web page queries (PHP, NodeJS)
• Architectural Patterns for web applications: Model View Controller (MVC) such as Angular JS
• Interfacing web applications with DBs (SQL)
• Mock-up tools (e.g., Pencil, Balsamique, Invision) that enable to quickly and easily create interactive mockups of web-based hypermedia for stationary and mobile devices.

The methodology-oriented part focuses on conceptual design. It proposes IDM (Interactive Dialogue Model) as a means to define and represent information architecture, navigation, interaction, and presentation features of complex multi-device applications that are truly usable, i.e., easy to use and consistent with users’ requirements.

Additional topics include inspection-based usability evaluation and user requirements management.

The course includes:

-  Ex-cathedra lectures

-  Hands-on sessions, devoted to exemplify, through supervised exercises, demos, and case studies, the above topics

-  Supervised project activities (project tutoring) devoted to support students in the development of their project.

-  Industrial seminars organized with testimonials from major national and international companies or start-ups

Please notice that unfortunately we will not be able to offer project tutoring after the end of the course: students are invited to perform their project work as much as possible during the course to benefit of tutoring support

Basic programming skills; basic concepts of data base design

The exam is maily project-based. A "project" consists in the conceptual and wire-frame design, full-sized prototyping,  and inspection-based usability evaluation of a (multi-device) web based hypermedia application following the domain specifications and requirements assigned by the reacher for each exam session.

The project outcome is composed of 2 parts:

Part 1: Design, Front-end development, and Usability Evaluation of the assigned web application (with the following deliverables: IDM design documentation + wireframes + interactive prototype developed using one of the front-end tools presented during the course ) + usability report

Part 2: Development of the back-end components for the prototype developed in Part 1, implemented using the technology presented during the course

Team work (max 3 students) is strongly recommended but individual projects can also be considered.

Project outcomes can be delivered during the course or in the official exam dates.

The project-based exam might be complemented by a very short (written or oral) exam to check the technical skills developed during the project and the individual contribution of each  group member to the project work.

Evaluation criteria

The exam aims at verifying that students have understood the contents of the course and have learned how to apply the proposed methods and techniques.

Evaluation criteria include: Completeness; Methodological and technical correctness of the solutions (in particular, consistency with the assigned requirements); Originality of the solutions and effort invested in the project activity

In Italian

Chapter 8 of book: Gustavo Rossi, Oscar Pastor, Daniel Schwabe and Luis Olsina "Web Engineering: Modelling and Implementing Web Applications", Springer 2008

Cascading Style Sheets (CSS) is a way to separate a document's structure from its presentation. Eric Meyer an internationally known expert on HTML and CSS, tackles the subject with passion and delivers a comprehensive and thorough update to his groundbreaking book.