San Jose State University : Site Name


Main Content

Working in Mars Mission Control, JPL

Ronald Mak

Department of Computer Engineering
Fall Semester 2017

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

TuTh 12 noon - 1:15 PM, room ENG 341


# Assigned Due Assignment
1 Aug 31 Sep 8 Functional Specification

Use case form: UseCaseForm.docx
Formal report rubrics: FormalReportRubrics.pdf
2 Sep 7 Sep 15 Prototype
3 Sep 28 Oct 9 jQuery and jQuery UI
4 Oct 19 Nov 3 MongoDB


Date Content
Aug 24 Slides: Course objectives; project teams; postmortem report; grading; client-server web apps; basic "naked" HTML; HTML page template; paragraphs and headings; lists; tables

Example basic HTML files: paragraphs.html   lists.html   tables.html  
Aug 29 Slides: links; images; static and dynamic web pages; node.js; Express; form data; text input; checkbox input; radio button input; select list input;

Example basic HTML files: links.html   images.html   cats.html
Example image files: RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg   RonCats1a.jpg
Example form HTML files: text.html   checkbox.html   radio.html   select.html
Example JavaScript form processing: text.js   checkbox.js   radio.js   select.js
Aug 31 Slides: Requirements elicitation; functional and nonfunctional; requirements of requirements; how to get requirements; use cases; use case descriptions; Functional Specification; Assignment #1
Sep 5 Slides: Link to a 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; 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 CSS style sheets: paragraphs1.html   css/mystyles1.css   paragraphs2.html   css/mystyles2.css   paragraphs3.html   css/mystyles3.css   links.html   css/linkstyles.css  
Example page layout: index.html   css/lejournal.css   img/about-me.jpg   img/gettyvilla.jpg   img/logo.jpg   img/map.png   img/victoria.jpg
Sept 7 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  
JavaScript Bingo: bingo.html   bingo.cs   bingo.js  
Sep 12 Slides: HTML5 canvas object; colors; gradients; rectangles; text; shadows; paths; line attributes; arcs and circles; quadratic and Bézier curves; images; altering pixels

Example canvas code: simple.html   gradients.html   rectangles.html   text.html   shadow.html   path.html   lines.html   arcs.html   quadratic.html   bezier.html   images.html   pixels.html   images/RonCats.jpg  
Sep 14 Slides: JavaScript animation; temporary coordinate system; scaling; rotation; translation; animation loop; animated rotation; moving objects; keyboard animation control; mouse events; mouse animation control; animated menus; review for Midterm #1

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  
Sep 19 Midterm #1
Sep 21 Slides: Midterm #1 solutions; Assignment #4 solutions; 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

Example regular expression code: reverse.html   reverse.js   format.html   format.js
Example DOM manipulation: nodes.html   nodes.js  
Sep 26 Slides: AJAX; XMLHttpRequest object; readyState property values; 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 AJAX code: nonajax.js   nonajax.html   nonajax2.html   ajax.js   ajax.html   bounce.js   lorem.txt   images/bristol.png

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/CS149.html   courses/CS153.html   courses/CS153.html   courses/CS235.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  
Sep 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 #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/CS149.html   courses/CS153.html   courses/CS153.html   courses/CS235.html
tools.html   css/tools.css   js/tools.js
Oct 3 Slides: Design patterns; organization design patterns; navigation design patterns; page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns
Oct 5 Slides: Navigation 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
Oct 10 Slides: Data visualization; data analysis tools; why analyze data; tables vs. graphs; history of data visualization; meaningful data; visual perception; abstract data; pre-attentive attributes; quantitative perceptions; successful data analyst
Oct 12 Slides: Well and poorly designed dashboards; what is a dashboard; visual display; information to achieve objectives; fits on a single screen; monitor information at a glance; how presents information; customized; what a dashboard is not; situational awareness; performance monitoring; decision making; dashboard solutions; dashboard design mistakes; data-ink ratio
Oct 17 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; cursor; eventually consistent; interfaces; command-line demo
Oct 19 Slides: Express/MongoDB example; create an Express project; project dependencies; "hello world"; initialize the MongoDB database; connect to the database; display database data; new user form; add a new user; Assignment #4

Example Express-MongoDB code: app.js   package.json   routes/index.js   views/helloworld.jade   views/userlist.jade   views/newuser.jade
Oct 24 Slides: Model-view-controller (MVC); model objects; view objects; controller objects; routes; REST; database actions and HTTP verbs; default RESTful actions; RESTful app example

Example RESTful code: routes/index.js   views/showuser.jade
Oct 26 Slides: Sessions; user authentication example; cookie example; review for midterm #2

Example session code: package.json   app.js   routes/index.js   views/register.jade   views/login.jade   views/protected_page.jade

Example cookie code: package.json   app.js  
Oct 31 Midterm #2
Nov 2 Slides: Midterm #2 solutions; render the home page; MVC request-response flow; MVC data flow; MVC directory structure; refactoring for MVC; MEAN full stack architecture; AngularJS; two-way data binding; single-page application (SPA); hybrid applications; app development steps; network architectures

Example MVC code: app.js   routes/index.js   controllers/main.js
Nov 7 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

Example AngularJS code: Controller.html   CSSclasses.html   DataBinding1.html   DataBinding2.html   DataBinding3.html   Expression.html   FilterPipe.html   FilterUpperCase.html   InputValidation.html   MVC.html   Person.html   PersonController.js   Repeating.html   ServiceHttp.html   ServiceLocation.html   welcome.htm  
Nov 9 Slides:

Example AngularJS code: 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 14 Slides:

Guest lecturer: Robert Nicholson
Topic: Search engine optimization (SEO)
Nov 16 Slides:

Guest lecturer: Robert Nicholson
Topic: WordPress
Example code:
Nov 21 Slides: Project presentations; 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
Nov 28 Slides: React event handling; event properties; synthetic events; usability testing

Example React code: Events.html
Nov 30 Slides: Presentations: Fantasy, Information, Parking Guaranteed, Web Architects
Dec 5 Slides: Presentations: Web Wizards, Nexus, JS Magician, Empty Coffee Cups
Dec 7 Slides: Presentations: Websters, No Name 1, Web Ex, Team 404


Learn UI design and the tools and techniques to develop web-based applications. Topics include: requirements analysis, client- and server-side programming, HTML 5, CSS 3, JavaScript, jQuery, node.js, Express, Angular, React, AJAX, NoSQL databases, RESTful web services, UI and UX design, usability testing, and search engine optimization.


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

Required books

Designed for Use: Create Usable Interfaces for Applications and the Web, 2nd ed
Lukas Mathis
Pragmatic Bookshelf, 2017
ISBN: 978-1680501605