San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Engineering
Department of Computer Science
Department of Applied Data Science
Spring Semester 2020

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

CMPE 280: Web UI Design and Development

Section 2:  TuTh  10:30 - 11:45 AM  room ENG 337


# Assigned Due Assignment
1 Jan 30 Feb 7 Functional Specification

Use case form: UseCaseForm.docx
Formal report rubrics: FormalReportRubrics.pdf
2 Feb 6 Feb 17 Prototype
3 Feb 18 Feb 26 JavaScript and HTML Canvas
4 Feb 27 Mar 6 jQuery UI
5 Mar 17 Mar 27 MongoDB
6 Mar 26 Apr 20 Information dashboard


Week Date Content
1 Jan 23 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 28 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 30 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 4 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 based on attributes; select links; inheritance; 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 6 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 11 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 13 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 HTML 5 and CSS 3; new HTML 5 input types; JavaScript event handlers; HTML 5 canvas object; canvas basics; colors; gradients; 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  
5 Feb 18 Slides: HTML5 canvas object; colors; gradients; rectangles; text; shadows; paths; line attributes; arcs and circles; quadratic and Bézier curves; images; altering pixels; JavaScript animation; temporary coordinate system; scaling; rotation; translation; animation loop; animated rotation; moving objects; keyboard animation control; mouse events; mouse animation control; animated menus

Example canvas code: rectangles.html   text.html   shadow.html   path.html   lines.html   arcs.html   quadratic.html   bezier.html   images.html   pixels.html   images/RonCats.jpg  
Example animation code: transform.html   rotate.html   bounce.html   arrowkeys.html   images/bristol.png
Example animated menus: menu1.html   menu1.css   menu1.js   menu2.html   menu2.css   menu2.js  
Feb 20 Slides: More JavaScript regular expressions: reversing and formatting names; more document object model (DOM): adding, inserting, replacing, and deleting DOM nodes; JavaScript classes, objects, and prototypes; AJAX; AJAX vs non-AJAX example; XMLHttpRequest object; readyState property values

Example regular expression code: reverse.html   reverse.js   format.html   format.js
Example DOM manipulation: nodes.html   nodes.js  
Example AJAX code: package.json   app.js   index.html   index.js   main.js   ajax.html   nonajax.html   nonajax2.html   common.js
6 Feb 25 Slides: jQuery: downloads, library, API; simple AJAX; objects; initialization; selecting elements; setting style; events; changing classes; jQuery/AJAX templates; automatic looping; object effects; object animation

Example jQuery code:
jq-ajax.html   js/jq-ajax.js   lorem.txt
hover.html   js/hover.js
class.html   css/class.css   js/class.js
courses.html   css/courses.css   js/courses.js   parts/header.html   parts/footer.html
courses/CMPE180A.html   courses/CMPE226.html   courses/CMPE280.html   courses/CMPE295A.html
pullquote.html   css/pullquote.css   js/pullquote.js
effects.html   css/effects.css   js/effects.js   images/bristol.png
animate.html   css/animate.css   js/animate.js  
Feb 27 Slides: The jQuery User Interface Toolkit; themes; drag and resize an object; UI icons; toolkit classes for CSS; drag and drop; UI widgets: accordion, tabs, AJAX tabs; UI widgets: data picker, slider, selectable, sortable, dialog; Assignment #4

Example jQuery UI code:
drag.html   js/drag.js   images/bristol.png
resize.html   css/resize.css   js/resize.js
dragdrop.html   css/dragdrop.css   js/dragdrop.js
accordion.html   js/accordion.js
tabs.html   js/tabs.js   ajaxtabs.html
courses/CMPE180A.html   courses/CMPE226.html   courses/CMPE280.html   courses/CMPE295A.html
widgets.html   css/widgets.css   js/widgets.js
7 Mar 3 Guest lecturer: Prof. Robert Nicholson
Slides: Search engine optimization (SEO)
Mar 5 Guest lecturer: Prof. Robert Nicholson
Slides: Content management and WordPress

Example code:
Example WordPress website: Dog Spotters
8 Mar 12 Video recording
Slides: NoSQL benefits and disadvantages; types of NoSQL databases: key-value stores, graph stores, wide-column stores, document databases; comparisons of types; document model; agile development; scalability; auto-sharding; cloud computing; data replication; data caching; CAP theorem; SQL vs. NoSQL; MongoDB; documents and collections
9 Mar 17 Video recording
Slides: Express/MongoDB example; initialize the MongoDB database; connect to the database; display users; new user form; add a new user; delete a user; Assignment #5

Example Express-MongoDB code:
Mar 19 Video recording
Slides: Software as a Service (SaaS); REST; RESTful actions; what is a dashboard; what a dashboard is not; well-designed dashboards; situational awareness; dashboard solutions; dashboard design mistakes; cluttering
10 Mar 24 Video recording
Slides: Misuse of color; data-ink ratio; chart junk; why data visualization; preattentive attributes in graphs and text; highlighting in graphs
Mar 26 Video recording
Slides: Assignment #6; avoid spaghetti graphs; sparklines; exploratory vs. explanatory analysis; examples of storytelling with data; the 5-minute narrative; logical order of presentation; data visualization examples from the web

Past student projects
11 Apr 7 Video recording
Slides: Types of data; use of color: sequential, diverging, highlight, alerting; color vision deficiency; good design examples; types of charts; KPI example; call center dashboard example; Assignment #6; UI design patterns; organization design patterns; navigation design patterns
Apr 9 Video recording
Slides: Page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns; data analysis; stages; acquaintance with a data set; meaningful data; data visualization tools; classic data viz; prerequisites for data analyst; visual perception; information architecture for lists; list UI design patterns

Paper: Ways to Become Acquainted with a Data Set for the First Time
12 Apr 14 Video recording Password: B8*=hm#%
Slides: Action design patterns; undoable and not undoable actions; user input design patterns; input controls; choice controls; controls for list item selection; controls for creating lists; controls for sorting lists; user input design patterns; team projects and presentations
Apr 16 Video recording Password: x0$K2*1$
Slides: MVC request-response flow; MVC data flow; MEAN full stack architecture; AngularJS; two-way data binding; single-page application (SPA); hybrid applications; design options; app development steps; network architectures; AngularJS framework; extend HTML; expressions; module and controller; scope; repeating elements; input validation; CSS classes; model-view-controller; controllers in external files

Example AngularJS code: DataBinding1.html   Expression.html   Controller.html   CSSclasses.html   DataBinding2.html   DataBinding3.html   Person.html   PersonController.js   Repeating.html   MVC.html
13 Apr 21 Video recording Password: 5F$LQ0@+
Slides: AngularJS filters; location service; $http service; tables; events; forms; animation; routing; SPA shopping example; mobile-centric thinking; designing with small screens; persistent navigation; transient navigation

Example AngularJS code: FilterPipe.html   FilterUpperCase.html   InputValidation.html   ServiceHttp.html   ServiceLocation.html   welcome.htm   Table.html   TableStyles.css   Events.html   FormCheckbox.html   FormRadio.html   FormSelect.html   Animation.html   AnimationStyles.css   Routing1.html   Routing2.html   main.html   london.htm   paris.htm   ShoppingSPA.html   ShoppingList.js  
Apr 23 Video recording Password: 2N&2*oD$
Slides: SPA development issues; React library: state management, DOM manipulation, composable user interfaces; JSX; components; state; React examples; criticisms

Example React code: HelloWorld1.html   HelloWorld2.html   Component1.html   Component2.html   Styling.html   Lightning.html
14 Apr 28 Video recording Password: 9J!RaOP9
Presentations: WELL, Go Bully, Front Enders
Apr 30 Video recording Password: 2q.22&YZ
Presentations: The Impact, Akali, Backup
15 May 5 Video recording Password: 4Z^2*6yA
Presentations: Seekers, Immortal, Minions
May 7
Presentations: Simpsons, Formation, Brute Force, Think Tanks


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).

Course Learning Outcomes (CLO)

You will follow industry-standard best practices and use software development tools that are common in today’s software industry. You will develop the critical job skill of working in a small project team.

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