San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Engineering
Spring Semester 2019

Office hours: TuTh: 3:00-4:00 PM
Office location: ENG 250
Mission Control, Jet Propulsion Laboratory (JPL)
NASA Mars Exploration Rover Mission

Instructional Student Assistant
Amir Radman

CMPE 280: Web UI Design and Development

Section 2:  TuTh  10:30 - 11:45 AM  room DMH 227


# Assigned Due Assignment
1 Jan 31 Feb 8 Functional Specification

Use case form: UseCaseForm.docx
Formal report rubrics: FormalReportRubrics.pdf
2 Feb 12 Feb 22 Prototype


Week Date Content
1 Jan 24 Slides: Course learning outcomes; topics; project teams; postmortem report; grading; client-server web apps; basic "naked" HTML; HTML page template; headings and paragraphs; lists; tables

Example basic HTML files: paragraphs.html   lists.html   tables.html   links.html   images.html   cats.html
Example image files: RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg
2 Jan 29 Slides: Model-view-controller (MVC); routes; HTTP methods; serving web pages; node.js; Express; form data; GET and POST; three-tier web app; Express hello world app; form examples app

Example Express programs:
Hello, World: package.json   app.js   index.js   main.js  
Form Examples: package.json   app.js   index.js   main.js   index.html   text.html   checkbox.html   radio.html   select.html
Jan 31 Slides: Express form examples: text fields, checkboxes, radio buttons, menu; requirements elicitation; functional and nonfunctional; requirements of requirements; how to get requirements; use cases; use case descriptions; Functional Specification; Assignment #1
3 Feb 5 Slides: Link to a CSS style sheet; style rules; style colors; element classes; class selectors; element IDs; ID selectors; grouping selectors; selection by context; first or last child; first letter or line; select links; select based on attributes; cascade; embedded style sheet; inline styles

Example CSS style sheets: paragraphs1.html   css/mystyles1.css   paragraphs2.html   css/mystyles2.css   paragraphs3.html   css/mystyles3.css   links.html   css/linkstyles.css  
Feb 7 Slides: Formatting text; font family, style, weight, size, line height; variants; combining font values; line and letter spacing; text alignment, indentation; transformation; controlling element display; box model; borders; padding; margins; floating elements; relative positioning; absolute positioning; vertical alignment; HTML container elements; ARIA Landmark roles; page layout example

Example page layout: index.html   css/lejournal.css   img/about-me.jpg   img/gettyvilla.jpg   img/logo.jpg   img/map.png   img/victoria.jpg
4 Feb 12 Slides: Sessions; cookie example; Jade page templates; user authentication example; Document Object Model (DOM); JavaScript functions and variables; obtaining text input field values; modifying the DOM; viewing generated source code; Assignment #2

Example cookie and session code: package.json   app.js
Example user authentication code: package.json   app.js   index.js   main.js   layout.jade   index.jade   register.jade   login.jade   loggedin.jade   protected.jade  
Example JavaScript DOM code: backgroundcolor1.html   backgroundcolor2.html   backgroundcolor3.html   adds1.html   adds2.html  
Feb 14 Slides: Checkbox values; radio button values; select menu values; multiple selection values; input validation; JavaScript regular expressions; validate phone number and email address; validation with HTML5 and CSS3; new HTML5 input types; JavaScript event handlers; JavaScript Bingo program

Example JavaScript DOM code: checkbox.html   radio.html   multisel.html
Example input validation code: validate1.html   validate1.css   validate2.html   validate2.css   validate3.html   validate3.css  
Example canvas code: simple.html   gradients.html  
JavaScript Bingo: bingo.html   bingo.cs   bingo.js  


This section of the course will concentrate on current industry practices of UI design for web applications and on the tools and techniques to develop these applications. The first half of the semester will introduce the practices, tools, and technologies. After a brief introduction to data visualization, the second half of the semester will focus on the creation of web-based information dashboards and websites that tell stories with data, all of which are important for data science. GUI design patterns and usability testing will help ensure that applications offer a compelling user experience (UX).

Department policy is to enforce
all course prerequisites strictly


Classified graduate standing or instructor consent.
Computer Engineering and Software Engineering majors only.

Recommended books

Web standards, tools, and techniques evolve too rapidly for published books to keep up.
Rely on the Internet for the most current information.
JavaScript & jQuery
The Missing Manual, 3rd edition

David Sawyer McFarland
O'Reilly Media, 2014
ISBN: 978-1491947074
Getting MEAN with Mongo, Express, Angular, and Node
Simon Holmes
Manning Publications, 2015
ISBN: 978-1617292033
Express in Action:
Writing, Building, and Testing Node.js Applications

Evan Hahn
Manning Publications, 2016
ISBN: 978-1617292422
Learning React
Kirupa Chinnathambi
Addison-Wesley Professional, 2016
ISBN: 978-0134546315
RESTful Web API Design with Node.js, 2nd edition
Valentin Bojinov
Packt Publishing, 2015
ISBN: 978-1783985869
Storytelling with Data:
A Data Visualization Guide for Business Professionals

Cole Nussbaumer Knaflic
Wiley, 2015
ISBN: 978-1119002253
Designed for Use:
Create Usable Interfaces for Applications and the Web, 2nd edition

Lukas Mathis
Pragmatic Bookshelf, 2017
ISBN: 978-1680501605
Designing Interfaces:
Patterns for Effective Interaction Design, 2nd edition

Jenifer Tidwell
O'Reilly Media, 2011
ISBN: 978-1449379704
Books on data visualization and information dashboard design by
Edward Tufte and Stephen Few