Front-End Engineering and Web 2.0 with Ajax Course

This course teaches participants how to provide richer, more dynamic applications to clients by going beyond the classic client-side HTML development model and bringing forth a new paradigm.  Participants of this course will learn how to use modern techniques such as AJAX, in conjunction with Cascading Style Sheets (CSS) and semantic-based HTML to develop more powerful, interactive web applications.  Participants will learn how to develop solutions for multiple browsers, marking content with appropriate HTML, controlling the application from JavaScript, and presenting it by manipulating the CSS information.  This course emphasizes the use of leading industry standards and examines how to deal with the “quirks” between different browsers. 

Participants will begin by learning about browsers, standards, and rendering differences.  Discussions and exercises will quickly turn towards Cascading Style Sheets (CSS) with only a light reference to HTML.  It is suggested that participants have knowledge of basic HTML before attending as this is not an introduction to HTML.  The CSS Box Model, positioning, and browser hacks are also discussed.  The following client-side presentational features are explored and hands-on labs allow participants to practice them:

>2, 3, and multi-column layouts
>Rounded corners
>Drop Shadows
>Table-less page designs
>Highlighting tables
>Sorting Data (client-side)
>Removing Tag Soup
>Tool tips (Popup text)
>Styling Forms
>Tabbed Layouts
>Drop Down Menus
>Dragging and Dropping
>Data Validation
>Utility Libraries
>Asynchronous Data Updating

To provide these client-side solutions, JavaScript will be examined in detail.  Beginning JavaScript moves quickly to allow for important topics such as object-oriented concepts, Document Object Model (DOM) manipulation, event handling, and developing solutions with Asynchronous JavaScript and XML (AJAX).  An approximate breakdown in time for subjects is as follows:  ½ day is spent discussing Web 2.0 and adherence to evolving standards browsers, and tools, 1 day on CSS manipulation and layered architectures, 1 day on JavaScript and modern uses of it, and 1 ½ days on AJAX implementations.

This course is designed for developers looking to update their client-side skills by teaching modern-day web development techniques incorporating JavaScript, AJAX, and CSS. 

Upon completion of this course, the participant will be able to:
> Implement many client-side techniques such as drop-down menus, tabs, and rounded corners
> Create solutions that asynchronously call the server without full page reloads
> Understand how to dynamically change the content on a page using JavaScript
> Create properly designed architectures using CSS, JavaScript, and semantic HTML
> Create professional-looking designs that work within multiple browsers
> Interact with a server by sending and receiving AJAX-based XML and JSON formatted data
> Utilize many tools for development, testing, and debugging for multiple browser support

Web Standards and Introduction
SGML, HTML History
CSS History
Browser Support For CSS
“Quirky” Browsers
Quirks Mode
Standards Mode
Almost-Standards Mode
DTDs and Browser DOCTYPE Switching
Guides for Selecting DOCTYPEs
Development Tools: FireFox, Firebug
JavaScript Console
DOM Inspector
Venkmann JavaScript Debugger
Microsoft Script Debugger
Layered Semantic Markup
Presentational HTML
Semantic HTML
Block vs. Inline Elements
Replaced and Non-replaced Elements

CSS Basics
CSS Rules
Inline Rules
Embedded Styles
Linked Style Sheets
Working with New and Old Browsers
Creating a Common Starting Point with Browsers
A Template CSS
Selectors
Descendent Groupings
Child/Sibling Selectors
Classes
ID Selectors
Contextual Selectors
Attribute Selectors
Pseudo-Elements
Pseudo-Classes
Determining Cascade Order
Specificities
CSS Inheritance
!important
General CSS Rule Layouts
IE and CSS incompatibilities

CSS Design: Fonts, Colors, Backgrounds
Numbers and Units
Specifying Colors
Font Properties
Text Properties
Background Properties
Creating Lists
Styling Lists
List Properties

CSS Box Model, Positioning, Visual Formatting
The CSS Box Model
Setting Borders and Margins
Special Styles and Colors
Shorthand Notations
Collapsing Margins
Box Paddings
IE vs. W3C Box Model Differences
IE Box Model Hacks
Height and Widths
Block vs. Inline Styles
Absolute Positioning
Relative Positioning
Floating Elements
Three-Column Layouts
Fixed Positioning
Clearing Elements
Two-Column Layouts
Using Rounded Corners on Layouts
Drop Shadows on Text
Drop Shadows on Images
Image Opacities

Improving Design
Creating Complex Designs
Fixed Width Layouts
Design Tips: Line Lengths
Design Tips: Text Units
Design Tips: Removing Tag Soup
Styling Tables
Highlighting Table Rows
Creating Tooltips
Styling Forms
Creating Tabbed Layouts
Creating Drop Down Menus

JavaScript Basics
How Does JavaScript Fit In?
JavaScript: The Old Way
Modern JavaScript
ECMAScript Syntax
Various Operators
JavaScript Types
NaN
Manipulating Strings
Conversions
Control Structures
Functions

Object-Oriented JavaScript
Native Objects
String, Date, Boolean, Number
Array, Function, Object
Creating and Working with Arrays
Encapsulation: public and private
Static variables
This
Creating Objects Using Factories
Creating Objects Using Prototypes
Creating Objects Using Constructors
Constructor/Prototype Combinations

Advanced JavaScript
The Function Class
call()
apply()
Argument Passing
Advanced Argument Passing: Argument Object
Overloading
Functional Closures
Inheritance
Prototype Chaining
OO Best Practices
Utility Libraries

Error Handling
Exception Handling
Try-catch
Onerror Event Handler
Throwing Exceptions
Debugging Techniques

DHTML and JavaScript
What is the DOM?
Accessing Nodes
DOM Traversal
Node Properties
Manipulating the DOM Tree
Dynamically Changing Style Properties
Adding and Removing Classes
Creating Interactions
Browser Object Model (BOM)
Browser Detection Techniques
Working with Windows
Working with Timeouts
InnerHTML
Manipulating Styles
Events and DHTML
W3C Event Model
IE Event Model
The Event Object
Event Types
Creating a Browser-Independent Event Object
Sorting Data within Tables
Reverse Sorting
Sorting and Events
Forms and Event Handling
Controlling the Requests
Asynchronous Operations
Creating Callback Functions
Monitoring the state of the XHR
Communicating with the Server
XML as a response
Creating a more Robust Solution
Graceful degradation and Error Handling

Creating Rich AJAX Interactions
An AJAX Utility Library
Automating Requests
Object-Oriented Responses
JavaScript Object Notation (JSON)
XML vs. JSON
The Prototype Toolkit
Architecture in the Solution
A Front-End Model View Controller
Creating a Complex Controller
Inline Data Retrieval
Dynamic Forms and Updates
Rolling Forms into Ajax Requests Automatically
POSTing Data
Dynamic Validation Routines
Advanced Client-Server Communication and Other Topics
Using Cross-Domain Proxies
Incorporating a Dynamic Script Tag Solution
Utilizing RSS and XML Feeds
Server-to-Client Status Submit
Validation
Regular Expressions
Editing Lists
Dragging and Dropping Items

Asynchronous JavaScript and XML Overview
Rich Internet Application Development
Incorporating AJAX Solutions into Applications
Practical Examples of AJAX and Web 2.0
Understanding the Layered Semantic Architectures

Asynchronous JavaScript and XML Principles
Introducing the XMLHttpRequest Object
Creating the XHR for any Browser
Sending Updates (Server Push)
Browser Memory Leaks
JavaScript Performance
Integrating AJAX and J2EE
Implementing With AJAX
Creating Dynamic Tooltips
Look Ahead Type Suggestion Boxes
Event-based Rich User Interactions

Appendix A
Server-side support of AJAX
Java-based Server Support
Ruby on Rails

READING
Due to the amount of material covered, reading ahead of time is recommended.  The following sources are suggested reading before and during the course:

Designing with Web Standards, by Jeffrey Zeldman, New Riders, 2003
JavaScript For Web Developers, by Nicholas C. Zakas, Wrox, 2005
Head Rush AJAX, by Brett McLaughlin, O’Reilly, 2006

COURSE COVERAGE
This course spends approximately 50% of time on labs and 50% in lecture.  Approximately 1 day is spent on CSS and related topics, about 1 day on JavaScript Syntax, 1 day on DHTML, and 1 day of AJAX.  The discussions build upon each other and topics from the first days are used in the later days.

This course assumes participants have a basic knowledge of HTML (paragraph, header, body, table, form, input, etc. tags) and can construct a simple web page.  JavaScript knowledge is not assumed though knowledge of basic JavaScript syntax (e.g. dot notation, calling functions, writing functions, etc.) is helpful.