|
Ronald Mak
Department of Computer Engineering
|
||||||
|
Mission Control, Jet Propulsion Laboratory (JPL) NASA Mars Exploration Rover Mission |
| Section 2: | TuTh | 10:30 - 11:45 AM | room ENG 337 |
| # | Assigned | Due | Assignment |
|---|---|---|---|
| 1 | Jan 30 | Feb 7 |
Functional Specification
Use case form: UseCaseForm.docx Formal report rubrics: FormalReportRubrics.pdf |
| 2 | Feb 6 | Feb 17 | Prototype |
| 3 | Feb 18 | Feb 26 | JavaScript and HTML Canvas |
| 4 | Feb 27 | Mar 6 | jQuery UI |
| 5 | Mar 17 | Mar 27 | MongoDB |
| 6 | Mar 26 | Apr 20 | Information dashboard |
| Week | Date | Content |
|---|---|---|
| 1 | Jan 23 |
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 28 |
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 30 | 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 4 |
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 based on attributes;
select links; inheritance; 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 6 |
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 11 |
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 13 |
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 HTML 5 and CSS 3;
new HTML 5 input types; JavaScript event handlers;
HTML 5 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 18 |
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 20 |
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 |
|
| 6 | Feb 25 |
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: jq-ajax.html js/jq-ajax.js 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 27 |
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 3 |
Guest lecturer: Prof. Robert Nicholson Slides: Search engine optimization (SEO) |
| Mar 5 |
Guest lecturer: Prof. Robert Nicholson Slides: Content management and WordPress Example code: WordPress-skeletons.zip Example WordPress website: Dog Spotters |
|
| 8 | Mar 12 |
Video recording
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 17 |
Video recording
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: MongoDBExample.zip |
| Mar 19 |
Video recording
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 24 |
Video recording
Slides: Misuse of color; data-ink ratio; chart junk; why data visualization; preattentive attributes in graphs and text; highlighting in graphs |
| Mar 26 |
Video recording
Slides: Assignment #6; 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 7 |
Video recording
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 9 |
Video recording
Slides: Page layout; how to show importance; how to show relationships; gestalt principles; page layout design patterns; data analysis; stages; acquaintance with a data set; meaningful data; data visualization tools; classic data viz; prerequisites for data analyst; visual perception; information architecture for lists; list UI design patterns Paper: Ways to Become Acquainted with a Data Set for the First Time |
|
| 12 | Apr 14 |
Video recording Password: B8*=hm#%
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; team projects and presentations |
| Apr 16 |
Video recording Password: x0$K2*1$
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 |
|
| 13 | Apr 21 |
Video recording Password: 5F$LQ0@+
Slides: AngularJS filters; location service; $http service; tables; events; forms; animation; routing; SPA shopping example; mobile-centric thinking; designing with small screens; persistent navigation; transient navigation Example AngularJS code: FilterPipe.html FilterUpperCase.html InputValidation.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 23 |
Video recording Password: 2N&2*oD$
Slides: 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 |
|
| 14 | Apr 28 |
Video recording Password: 9J!RaOP9
Slides Presentations: WELL, Go Bully, Front Enders |
| Apr 30 |
Video recording Password: 2q.22&YZ
Slides Presentations: The Impact, Akali, Backup |
|
| 15 | May 5 |
Video recording Password: 4Z^2*6yA
Slides Presentations: Seekers, Immortal, Minions |
| May 7 |
Slides Presentations: Simpsons, Formation, Brute Force, Think Tanks |
Department policy is to enforce
all course prerequisites strictly
|
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 |
