San Jose State University : Site Name

Navigation

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
E-mail: ron.mak@sjsu.edu
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


Assignments

# 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
3 Feb 21 Mar 1 JavaScript and HTML Canvas
4 Feb 28 Mar 8 jQuery UI
5 Mar 19 Mar 29 MongoDB
6 Apr 9 Apr 22 Information dashboard

Lectures

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; HTML5 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 19 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 21 Slides: Assignment #3; 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 26 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  
Feb 28 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 5 Guest lecturer: Robert Nicholson
Slides: Search engine optimization (SEO)
Mar 7 Guest lecturer: Robert Nicholson
Slides: Content management and WordPress

Example code: WordPress-skeletons.zip
Example WordPress website: Dog Spotters
8 Mar 14 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 19 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: package.json   app.js   index.js   cntrlMain.js   modelMain.js   error.jade   index.jade   layout.jade   newuser.jade   showuser.jade   userlist.jade
Mar 21 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 26 Slides: Misuse of color; data-ink ratio; chart junk; why data visualization; preattentive attributes in graphs and text; highlighting in graphs
Mar 28 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
11 Apr 9 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 11 Slides: Data analysis; stages; acquaintance with a data set; meaningful data; data visualization tools; classic data viz; prerequisites for data analyst; visual perception; page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns; information architecture for lists; list UI design patterns

Paper: Ways to Become Acquainted with a Data Set for the First Time
12 Apr 16 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
Apr 18 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

Goals

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

Prerequisites

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