Search Modules > CS3249 > Module Overview

Learning Outcomes

Aims

This module aims at providing students with technical skills and hands-on experience of user interface development. Due to the importance of the Internet, it focuses on the design and implementation of user interfaces on the web. It covers essential highlevel topics including Graphical design, UI architecture, Input, Output, Layout guidelins, etc. It also covers the latest technologies for front-end web development including Webpack, Node.js,React.js, Redux.js, GraphQL, etc. Recent trends and projects in front end development research will also be briefly discussed.

Objectives

* Understand the basics of graphical design.
* Understand best practices of web interface development.
* Understand techniques for building user interfaces, including input, output, and model-view-controller.
* Implement web based user interface with Javascript programming.
* Understand user interface frameworks and libraries such as react.js and redux.js.
* Extend UI development knowledge to other platforms such as mobile and desktop.

Prerequisites

TopCS2103 or CS2103T Software Engineering

Teaching Modes

Top

Tutorial

7 + 1 Tutorials will be offered in week 3, 4, 5, 6, 7, 8, 9, 10. Week 3's tutorial is optional. If you feel that you need to brush up your skills in HTML, CSS, Javascript, etc., you are welcome to take week 3's tutorial. The remaining tutorials will cover best web development practices, webpack/node.js, react, redux, graphQL, etc.

Note: to make things easier to manage, two tutorials slots will be offered instead of four. A poll will be created to allow you to pick the two most convenient tutorial slots.

Assignments & Project

Assignments and class project will cover the topics of best web development practices assignment 1, input+output assignment 2, mv* web development using react/redux class project.

For the class project, students will form teams of two to build a pre-designed website using react/redux.

Schedule

Top

Note: this is a tentative schedule. The actual schedule may change during the semester.

Time	Topic	Instructor	Duration	Activities
Week 1 (Jan 12)	Introduction	Dr. Shengdong Zhao	2 hrs	Join the class facebook page
Week 2 (Jan 19)	Graphical Design and Gestalt Principle	Dr. Shengdong Zhao	2 hrs	Assignment 1 out
Week 3 (Jan 23, 24)	Optional Tutorial: Javascript, CSS, Bootstrap, etc.	Deb	2 hrs	Optional tutorial exercise
Week 3 (Jan 26)	Best Web UI Development Practices	Dr. Shengdong Zhao	2 hrs
Week 4 (Feb 2)	UI Architecture	Dr. Shengdong Zhao	2 hrs	Happy Chinese New Year! No Tutorial
Week 5 (Feb 6, 7)	Tutorial: Best web development practices	Deb	2 hrs	Tutorial exercise
Week 5 (Feb 9)	Input/Output	Dr. Shengdong Zhao	2 hrs	Assignment 1 due, assignment 2 out
Week 6 (Feb 13, 14)	Tutorial: UI Architecture	Deb	2 hrs	Tutorial exercise
Week 6 (Feb 16)	*MV framework + React.js**	Dr. Shengdong Zhao	2 hrs
Recess week
Week 7 (Feb 27, 28)	Tutorial: Input/Output	Danny	2 hrs	Tutorial exercise
Week 7 (Mar 2)	*MV framework + React.js**	Dr. Shengdong Zhao	2 hrs	Class project out
Week 8 (Mar 6, 7)	Tutorial: React.js	Danny	2 hrs	Tutorial exercise
Week 8 (Mar 9)	Redux.js basic	Dr. Shengdong Zhao	2 hrs	Assignment 2 due, Final project out
Week 9 (Mar 13, 14)	Tutorial: Redux.js	Deb	2 hrs	Tutorial exercise
Week 9 (Mar 16)	Redux.js advanced	Dr. Shengdong Zhao	2 hrs
Week 10 (Mar 20, 21)	Tutorial: React+Redux	Deb	2 hrs	Tutorial exercise
Week 10 (Mar 23)	UI Testing	Dr. Shengdong Zhao	2 hrs
Week 11 (Mar 27, 28)	Tutorial: UI Testing	Danny	2 hrs	Tutorial exercise
Week 11 (Mar 30)	React Native	Dr. Shengdong Zhao	2 hrs
Week 12 (Apr 6)	Desktop Application	Dr. Shengdong Zhao	2 hrs
Week 14 (Apr 20)	Class project presentation (schedule TBD)	Dr. Shengdong Zhao, Danny, Deb	3 hrs	Class project due

Assessment

Top

Item	Percentage
Participation, in-class exercises & quizzes	21%
Tutorial exercises	14%
Assignment 1: Responsive Design	10%
Assignment 2: Input & Output	20%
Class project	35%
Total	100%

Extra credit

Participating in HCI experiments (0.5% per experiment), up to 3 experiments. You can also own bonus points by helping your classmates (details will be revealed in class).

LATE ASSIGNMENTS: 5% of deducted everyday, up to 8 days. RE-MARKING: submit detailed reasons in writing within a week. CHEATING (official): will receive an F in the course

Preclusions

TopNIL

Workload

Top2-1-1-3-3

Workload Components : A-B-C-D-E
A: no. of lecture hours per week
B: no. of tutorial hours per week
C: no. of lab hours per week
D: no. of hours for projects, assignments, fieldwork etc per week
E: no. of hours for preparatory work by a student per week