San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Engineering
Spring 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

CMPE 280: Web UI Design and Development

CS 235 Data Visualization Projects

Section 2: TuTh 1:30 - 2:45 PM, room Clark 225


# Assigned Due Assignment
1 Feb 1 Feb 9 Functional Specification and Prototype

Use case form: UseCaseForm.docx
Formal report rubrics: FormalReportRubrics.pdf
2 Feb 15 Feb 26 JavaScript input validation and interactivity
3 Mar 1 Mar 9 jQuery and jQuery UI
4 Mar 22 Apr 9 MongoDB and REST
May 14 Final project


Date Content
Jan 25 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
Jan 30 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;

Example Express program:
Hello, World: package.json   app.js   index.js   main.js  
Feb 1 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

Example Express program:
Form Examples: package.json   app.js   index.js   main.js   index.html   text.html   checkbox.html   radio.html   select.html
Feb 6 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 8 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
Feb 13 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  
Feb 15 Slides: Document Object Model (DOM); JavaScript functions and variables; obtaining text input field values; modifying the DOM; viewing generated source code; 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; Assignment #2; JavaScript Bingo program

Example JavaScript code: backgroundcolor1.html   backgroundcolor2.html   backgroundcolor3.html   adds1.html   adds2.html   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  
Feb 20 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 22 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
Feb 27 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  
Mar 1 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 #3

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
Mar 6 Slides

Guest lecturer: Robert Nicholson
Topic: Search engine optimization (SEO)
Mar 8 Slides

Guest lecturer: Robert Nicholson
Topic: Content management and WordPress
Example code:
Mar 13 Slides: Review for the midterm
Mar 20 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

Midterm solution
Mar 22 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 #4

Example Express-MongoDB code (original version): package.json   app.js   index.js   main.js   error.jade   index.jade   layout.jade   newuser.jade   showuser.jade   userlist.jade
Apr 3 Slides: Model-view-controller (MVC); routes; REST; database actions and HTTP verbs; default RESTful actions; RESTful app example; Assignment #4; render the home page with Express; 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

Example AngularJS code: DataBinding1.html   Expression.html   Controller.html
Apr 5 Slides: AngularJS framework; 2-way data binding; expressions; module; controller; scope; repeating elements; input validation; CSS classes; model-view-controller; controllers in external files; filters; location service; $http service; tables; events; forms; animation; routing; SPA shopping example

Example AngularJS code: CSSclasses.html   DataBinding2.html   DataBinding3.html   FilterPipe.html   FilterUpperCase.html   InputValidation.html   MVC.html   Person.html   PersonController.js   Repeating.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 10 Slides: Assignment #5; 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
Apr 12 Slides: Dangers of URL auto-completion; new version of Express-MongoDB example; data visualization; data analysis tools; why analyze data; where to get data; tables vs. graphs; history of data visualization; meaningful data; visual perception; abstract data; pre-attentive attributes; quantitative perceptions; successful data analyst

Example Express-MongoDB code (new version): package.json   app.js   index.js   cntrlMain.js   modelMain.js   error.jade   index.jade   layout.jade   newuser.jade   showuser.jade   userlist.jade   deleteuser.jade
Apr 17 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
Apr 19 Slides: UI design patterns; organization design patterns; navigation design patterns; page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns
Apr 24 Slides: List design patterns; action design patterns; undoable and not undoable actions; getting input from users; input controls; choice controls; controls for list item selection; controls for creating lists; controls for sorting lists; user input design patterns

Design video: The Expert
Apr 26 Slides: Oral presentations schedule; mobile-centric thinking; designing with small screens; persistent navigation: springboard, cards;, list menu, dashboard, gallery, tab menu, configurable tabs, skeuomorphism; transient navigation: side drawers, toggle menu, pie menu, page swiping, scrolling tabs, accordion; usability testing

Testing video: Usability Testing
May 1 Slides: Forms; forms abandonment; sign in; registration; multi-step; checkout; calculator; search; long forms; anti-patterns: novel notions, skeuomorphic cuteness, nonstandard navigation, needless complexity, bad navigation controls, hidden controls, mental model mismatch, idiot boxes, chart junk, too many buttons, poor platform porting
May 3 Slides:
Presentations: Ace, Dynamic, Heisenbugs, In the North
May 8 Slides:
Presentations: Tech Army, Web Ninjas, Firelight, Spartans
May 10 Slides:
Presentations: Orange, Gang of 4, Code Titans, Patriots, RATS


This course will concentrate on practical aspects of UI design for web-based applications as currently practiced by industry and on the tools and techniques to develop the applications. There will also be an introduction data visualization and the creation of information dashboards, which are important for data science.


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
Designed for Use: Create Usable Interfaces for Applications and the Web, 2nd ed
Lukas Mathis
Pragmatic Bookshelf, 2017
ISBN: 978-1680501605
Books on data visualization by Edward Tufte and Stephen Few