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

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


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; inheritance; 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 21 Slides: Midterm 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  


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