Dr. Zhijun Wang, Professor of Computer Science
♦   Welcome to CIS 450 — Web Design Studio   ♦
Weeks Topics | Resources | Suggested Readings | Special Days | Important Dates HAs | Projects | Exams
  • Introduction and syllabus. Course website. Class policies and guidelines.
  • Course prerequisite issue and the compromised solution.
  • Team projects → 2-3 students per team.
  • Introduction to web design. Current web technologies review.
  • Online tutorials - w3schools.com & numerous other sites.
  • Web application structure. Web MVC frameworks.
  • Readings - Chapters 1-6 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

1/08 Mon Add/Drop and Late Registration via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

1/12 Fri Last Day to Add/Drop or Late Register via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

Project 1 - Fundamentals
  • Front-end design for the "view" part. Understand basic web design principles.
  • Three areas of the front-end. Structure ↔ HTML. Format ↔ CSS. Behavior ↔ JavaScript.
  • HTML5 new features. Introduction/review of CSS and JavaScript concepts.
  • Client-side scripting. Embedded and external JavaScript. Examples.
  • Readings - Chapters 7-10 from "HTML&CSS design and build websites" or relevant HMTL5 resources.

1/15 Mon Martin Luther King, Jr. Day – Holiday.

1/19 Fri Last Day for Instructor-Approved Late Adds via RAIL.

  • Project 1 check and demo.
  • Define and style inline and block elements.
  • Understand style inheritance and overriding in the DOM picture.
  • Animations using CSS, JavaScript, or a library such as jQuery.
  • Readings - Chapters 11-12 from "HTML&CSS design and build websites" or relevant HMTL5 resources.
Project 2 - Design with CSS/JavaScript Features
  • Fluid/flexible/responsive design for different devices. Phones → Pads → Notebooks → Desktops.
  • Use percentage on dimension properties to make them scalable with viewport. Rendering difference between "width" and "height".
  • Demo of adding animation to webpages using JavaScript and jQuery.
  • Use of "z-index" and "float" for block and inline-block elements to make flexible page layouts.
  • Review of server side form processing and HTML form controls. New form controls in HTML5. Example demos.
  • Readings - Chapters 13-14 from "HTML&CSS design and build websites" or relevant HMTL5 resources.
  • Finish project 2. Project 2 check and demo on Wednesday.
  • Images. Layout and new HTML5 layout tags demo.
  • Process and design. Practical guidelines and rules. Ever changing web design.
  • Readings - Chapters 15-19 from "HTML&CSS design and build websites" and relevant HMTL5 resources.
  • JavaScript - an introduction, the language history, and common practices. CSS rendering engine and JavaScript interpreter. Progressive enhancement.
  • Document Object Model (DOM). JavaScript objects - properties, methods, and events. "window" and "document" objects. Add contents using document.write().
  • JavaScript types. Numerical, string, Boolean, array, object, undefined, null, etc.
  • Please focus on JavaScript syntax features which are different from Java to avoid potential errors in your programs.
  • In-class exercise answer.
  • Readings - Chapters 1, 2 from "JavaScript&jQuery Interactive Front-end Web Development".
Project 3 - A Simple Calculator using JavaScript
  • Function definition. Objects: literal notation, object constructor, and constructor function. Adding and removing properties.
  • Browser object model. Document object model. Global objects provided by JavaScript - Strings, Numbers, Dates, etc.
  • Control structures - selection structures and loops. Understand "truthy and falsy" objects and creative ways to use them.
  • Performance consideration - loops. Load minimum JavaScript code with the page and use events to run computation intensive tasks.
  • Finishing project #3 on Friday.
  • Readings - Chapters 3, 4 from "JavaScript&jQuery Interactive Front-end Web Development".

Mid-term Exam Week.

2/23 Fri Last Day to Apply for August and December 2018 Graduation (Registrar’s Office).

  • Document Object Model (DOM) review. DOM tree and 4 types of nodes.
  • Access and update node(s) via an ID, a class, a tag, or more general, a CSS selector. NodeList.
  • Access, update, and delete HTML (tags & text in subtrees), text, and attributes.
  • Readings - Chapter 5 from "JavaScript&jQuery Interactive Front-end Web Development".
Project 4 - DOM Tree
  • Events and event handling using JavaScript.
  • Event binding methods - HTML event handlers, DOM event handlers, and DOM event listeners.
  • Passing arguments or calling multiple handler functions using an anonymous function.
  • Event flow in the DOM tree. Event bubbling and event capturing.
  • The messenger - event object. Event delegation by an ancestor. Changing default behavior.
  • Event types - UI, keyboard, mouse, focus, and form events.
  • Mutation events and observers. HTML5 events.
  • Readings - Chapter 6 from "JavaScript&jQuery Interactive Front-end Web Development".

3/9 Fri Last Day to Withdraw from a Full Semester Class — See Advisor by Noon.


Spring Break

  • jQuery and the min version. Advantages of jQuery. Function jQuery() → $(). Object type jQuery.
  • Steps → Find elements using CSS-style selectors & Do something to them using jQuery functions.
  • Many jQuery functions are overloaded to both "get" and "set" contents.
  • Implicit iteration. Chaining. Shorthand notation for document.ready event.
  • Retrieving and updating functions → .html() | .text() | .replaceWith() | .remove()
  • Inserting functions → .before() | .after() | .prepend() | .append()
  • Attribute functions → .attr() | .removeAttr() | .addClass() | .removeClass()
  • Readings - Chapter 7 from "JavaScript&jQuery Interactive Front-end Web Development".

3/19 Mon First Day of Summer 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

3/21 Wed First Day of Academic Advisement for Continuing Students for Fall 2018.

  • .css() → getting/setting CSS properties. Note – It is better to change the class attribute to trigger new style rules.
  • Using .each() to process each item in the selection. Difference between this and $(this).
  • jQuery events. Using event function .on(). Event object and its properties. Using filters to listen to a subset of the selection. Passing extra information to event handlers.
  • jQuery effects. Animating CSS properties.
  • Accessing the DOM tree. Adding and filtering elements in a selection. Using index numbers in a jQuery object.
  • Special selectors for form elements. Form methods and events.
  • Cut, copy, and paste a jQuery selection.
  • Box dimensions. Window and page dimensions. Item positions on the page.
  • Adding jQuery from a CDN. jQuery documentation and free plugins. JavaScript libraries.
  • Readings - Chapter 7 from "JavaScript&jQuery Interactive Front-end Web Development".
Final Team Project - Learn jQuery fundamentals and redo project #4 using jQuery. Due by 11pm on 4/20.
  • Review jQuery - Selections and functions. Review examples from the textbook.
  • Asynchronous processing model and AJAX. Updating part of a page. XMLHttpRequest object.
  • Loading different data formats (HMTL, XML, and JSON) using AJAX.
  • Loading data from different domains. JSON with padding → JSONP.
  • Using jQuery to handle AJAX requests and responses. Sending form data using the .serialize() function.
  • $.ajax() function and its 30+ settings for greater control over AJAX requests.
  • APIs with different levels of abstraction. Browser, script, and platform APIs. API calls.
  • HTML5 API examples. Geolocation API and web storage API for local and session storage. History API.
  • Script API examples. jQuery UI accordion and tabs. jQuery UI form. Slider input and date picker.
  • AngularJS. Model-View-Controller (MVC) model. Examples - Binding local data. Getting/processing external JSON data from file/database.
  • Platform API example - Google maps API. Role of API keys. Map options & custom controls. Styling maps. Adding markers.
  • Readings - Chapters 8, 9 from "JavaScript&jQuery Interactive Front-end Web Development".

4/2 Mon First Day of Fall 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

4/4 Wed Last Day of Academic Advisement for Continuing Students for Fall 2018.

  • JavaScript execution context, variables object, and lexical scope.
  • Exceptions & Error objects. Exception handling. "try-catch-finally" blocks. Throwing exceptions.
  • Using browser's console methods (log, info, warn, error, group, groupEnd, table, assert) to debug. Debugging tips.
  • Breakpoints and conditional breakpoints (keyword debugger). Stepping through code and functions.
  • Making popular content panels using JavaScript&jQuery – accordions, tabs, photo viewers, modal windows, and sliders.
  • Separation of content (HTML), presentation (CSS), and behavior (JavaScript). Updating class properties to trigger style rules.
  • Turning functions to jQuery plugins (example – accordion). Immediately Invoked Function Expressions (IIFEs).
  • Readings - Chapters 10, 11 from "JavaScript&jQuery Interactive Front-end Web Development".
  • Static filtering using a foreach loop or the "filter" function.
  • Dynamic filtering with user inputs. Filtering tagged images. Search by filtering.
  • Array's sort function. Custom sort functions for ascending, descending, and random orders. Object "compare".
  • Form enhancement and validation using JavaScript or jQuery UIs. HTML5 form controls.
  • Examples – Disabling the submit button. Checkboxes. Radio buttons. Select boxes. Character counters. Placeholders. Polyfills. Form validation.
  • Final team project demos/presentations.
  • Readings - Chapters 12, 13 from "JavaScript&jQuery Interactive Front-end Web Development".

4/20 Fri McMurran Scholars Convocation; Last Day of Classes; Last Day for Complete Withdrawal from Semester.


Final Exam Week.

No final exam. Grades depend on completion of web projects.