San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Engineering
Fall Semester 2018

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 ENG 325


# Assigned Due Assignment
1 Aug 28 Sep 5 Functional Specification

Use case form: UseCaseForm.docx
Formal report rubrics: FormalReportRubrics.pdf
2 Sep 6 Sep 15 Prototype
3 Sep 13 Sep 20 JavaScript and HTML Canvas
4 Sep 25 Oct 5 jQuery UI
5 Oct 19 Oct 29 MongoDB
6 Oct 25 Nov 5 Information dashboard
7 Nov 6 Nov 14 RESTful API


Week Date Content
1 Aug 21 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
Aug 23 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
2 Aug 28 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
Aug 30 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  
3 Sep 4 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
Sep 6 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

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  
4 Sep 11 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  
Sep 13 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; Assignment #3

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  
5 Sep 18 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
Sep 20 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:
js/jq-ajax.js   jq-ajax.html   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  
6 Sep 25 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
Sep 27 Slides: UI design patterns; organization design patterns; navigation design patterns

Design video: The Expert
7 Oct 2 Slides

Guest lecturer: Robert Nicholson
Topic: Search engine optimization (SEO)
Oct 4 Slides

Guest lecturer: Robert Nicholson
Topic: Content management and WordPress
Example code:
Example WordPress website: Dog Spotters
8 Oct 9 Slides: Page layout design patterns; how to show importance; how to show relationships; gestalt principles; page layout design patterns; review for the midterm
9 Oct 16 Slides: Midterm solutions; 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
Oct 18 Slides: MongoDB; documents and collections; cursor; consistency; 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: package.json   app.js   index.js   cntrlMain.js   modelMain.js   error.jade   index.jade   layout.jade   newuser.jade   showuser.jade   userlist.jade
10 Oct 23 Slides: What is a dashboard; what a dashboard is not; well-designed dashboards; situational awareness; dashboard solutions; dashboard design mistakes; cluttering; misuse of color; data-ink ratio; chart junk
Oct 25 Slides: Why data visualization; preattentive attributes in graphs and text; highlighting in graphs; 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
11 Oct 30 Slides: 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
Nov 1 Slides: Data analysis; stages; acquaintance with a data set; meaningful data; data visualization tools; classic data viz; prerequisites for data analyst; visual perception; list UI design pattern

Paper: Ways to Become Acquainted with a Data Set for the First Time
12 Nov 6 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; Model-view-controller (MVC); routes; REST; database actions and HTTP verbs; default RESTful actions; RESTful app example; Assignment #7
Nov 8 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 Nov 13 Slides: AngularJS filters; location service; $http service; tables; events; forms; animation; routing; SPA shopping example

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  
Nov 15 Smoked out. No class.
14 Nov 20 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
15 Nov 27 Slides:
Presentations: UI Land, Building, Infinity, Information
Nov 29 Slides:
Presentations: AddOneSecond, Helix, Byte Karma, Developers
16 Dec 4 Slides:
Presentations: AmazingWeb, WebKeepers, Tech Squad, Peace Corp
Dec 6 Slides: Final project submission; final exam; usability testing

Presentation: Webamazers


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