Duration: 4 Days
In this in-depth web development course, you will discover of the latest in web technologies, performance, optimization, and user interface design patterns and best practices. You will work through practical labs designed to take you through HTML5, CSS3, and related technologies. You will leave this course armed with the new skills to design, implement, and deploy robust, flexible, and safe web applications.
What You Will Learn
- New features of HTML5 and how it's used within the context of web applications
- New features of CSS3 and how it's used within the context of web applications
- Wide variety of options, tools, and approaches that can be used with the web design and implementation
- jQuery: What it is, why you should use it, and how it reduces the amount of code and adds rich functionality
- jQuery best practices
- jQuery plugins and extensions
- Options for debugging and monitoring the client-side of web applications
- Considerations, best practices, and optimizations for client-side functionality, data, and rendering
- Concepts, terminology, and implementation options for web-based user-interface patterns
Audience
Experienced developers who need to expand their knowledge of web design and development or need to reinforce sound HTML and CSS coding practices
Prerequistes
- Real-world programming experience is a must
- Previous experience or working knowledge of developing software applications
- Basic HTML and CSS
Course Outline
1. Session: Working with HTML5
- Lesson: HTML5
- HTML5 Overview
- Status of HTML5
- Support in Browsers
- HTML5 Web Applications
- HTML5 Graphics & Embedded Content
- HTML5 Forms Inputs
- HTML5 Media
- Lesson: HTML5 JavaScript API
- Drag and Drop API
- Messaging API
- Web Storage API
- Offline with Application Cache
2. Session: CSS3
- Lesson: CSS3 Overview
- CSS3 New Features
- CSS3 Advantages
- CSS3 Browser Support
- CSS3 Selectors Support
- CSS3 Properties Support
- Lesson: CSS3 Advanced Selectors
- CSS3 New DOM Attribute Selectors
- Combinators
- Structural PseudoClasses
- PseudoClass Selectors
- UI Selectors
- Lesson: CSS3 Visual Effects
- 2D Transformations
- Transform Property
- Rotate Function
- Translate Functions
- Skew Function
- Scale Function
- Transitions
- Font and Color in CSS3
- Border and Box Effects
3. Session: jQuery
- Lesson: Why jQuery?
- Why jQuery?
- jQuery Usage
- Downloading jQuery
- Lesson: Basic jQuery
- Using jQuery from Web Page
- Document Object Model (DOM)
- jQuery: Operational Overview
- jQuery Capability Overview
- Lesson: Manipulating the DOM
- Selecting by Order
- Attributes vs. Properties
- Manipulating Children
- Removing Elements
- Inserting Content
- Replacing Content
- Wrapping and Unwrapping
- Effects (Basic Animation)
- Lesson: More On Element Selection
- Selectors
- Hierarchical Selectors (Combinators)
- Attribute Selectors
- Child Filters (from CSS)
- Content Filters
- Form Filters
- Filtering Methods
- Traversing Methods
- Restoring jQuery objects
- Lesson: jQuery UI
- jQuery UI Effects
- Advanced Easing
- Draggable Interaction
- Droppable Interaction
- Resizable Interaction
- Selectable Interaction
- Sortable Interaction
- Widgets
- Lesson: jQuery Plugins
- jQuery Validation Plugin
- jQuery Form plugin
- jQuery BBQ (Back Button & Query) Plugin
- jQuery Hotkeys Plugin
- jQuery Color Plugin
- Grid Plugins
- Tree Plugins
4. Session: JavaScript Object Notation (JSON)
- Lesson: JSON Objects
- JSON Overview
- Arrays
- Objects
- Arrays in Objects
- Objects in Arrays
- Lesson: JSON Syntax and Processing
- JSON Syntax
- JSON Parsers
- Sending Data
- JSON vs. XML
5. Session: Dojo
- Lesson: Dojo
- JavaScript Frameworks
- Selecting a Framework
- Dojo
- Using Dojo
- Request Object Properties
- Using Dojo
6. Session: Web Application Performance
- Lesson: Debugging Tools
- What is Fiddler?
- Running Fiddler
- F12: Internet Explorer's F12 Developer Tooling
- Lesson: JavaScript Best Practices (Optional)
- JavaScript Code Convention Overview
- Managing JavaScript
- Drupal Naming Conventions
- Managing Whitespace
- JavaScript Best Practices Overview
- Lesson: Download Options
- Ajax and Traditional Web Apps
- Bandwidth
- MultiStage Downloading
- Deciding How to Divide the Data
- Predictive Fetching
- Predictive Fetching Pitfalls
- OnDemand Downloading
- JavaScript and CSS Minification
- Lesson: Optimization & Profiling
- Code Optimization
- JavaScript Verbosity Tradeoffs
- Minimizing Reflow Times
- Lesson: Memory Management
- Ajax Memory Considerations
- JavaScript Memory
- Tools for Measuring Memory Footprint
- Removal of DOM Nodes
- Cyclic References
- Reusing DOM Nodes
- Interactions Between Techniques
7. Session: Web App Design Patterns
- Lesson: UI Patterns Overview
- User Interface/Interaction Design Patterns
- Categories from Yahoo! Design Pattern Library
- Web Application Design Principles
- Lesson: Layout Patterns
- Page Grids
- Page Grids Solution
- Lesson: Navigation Patterns
- Accordion
- Alphanumeric Filter Links
- Breadcrumbs
- Item Pagination
- Search Pagination
- Module Tabs
- Navigation Tabs
- Designing Categories for Navigation
- Progress Bar
- Lesson: Selection Patterns
- AutoComplete
- Calendar Picker
- Carousel
- Lesson: Rich Interaction Patterns
- Invitations
- Cursor Invitation
- Drop Invitation
- Hover Invitation
- Tool Tip Invitation
- Transitions
- Animate Transition
- Drag and Drop
8. Session: Mobile Development
- Lesson: Challenges for Mobile Development
- Mobile Web Applications
- Mobile Web Key Benefits
- Mobile Web Key Drawbacks
- Native Code Generator
- Native Web Runtime (NWR)
- Unique Mobile Device Distribution
- Design Tools
- REST
- JSON
- Yahoo! Query Language (YQL)
- SQLite
- OpenID
- OAuth
- Encryption
Course Labs
Approximately 60% of the course is dedicated to hands-on labs.
