San Jose State University : Site Name

Navigation

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


Assignments

# 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

Lectures

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: WordPress-skeletons.zip
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

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