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'll 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 in conjunction with the web design and implementation
• Work with the Dojo toolkit and JSON

Who Needs to Attend

Experienced developers who need to expand their knowledge of web design and development or need to reinforce sound HTML and CSS coding practices

Prerequisites

• Previous experience or working knowledge of developing software applications
• Familiarity with an object-oriented language is helpful
• Real world programming experience is a must

Follow-On Courses

• Advanced or additional web development courses
• XML courses
• Basic J2EE or JavaE/JEE training:
  • JSF
  • Struts 2.0
  • EJB3.0
  • Spring
  • Hibernate
• Application development security courses
• Agile or test-driven development courses
• Service-oriented analysis and design
• Web services courses
• XML or other web development courses

Course Outline

1. HTML5

• DOCTYPE Tag
• HEAD and BODY
• Basic HTML5 Structure
• HTML5 Semantic Tags
• HTML5 Structural Markup Using Semantic Tags
• HTML5 Forms
• HTML5 Media

2. HTML5 JavaScript API

• Drag and Drop API
• Messaging API
• Web Storage API

3. CSS3

• New Features
• Advantages
• Browser Support
• Selectors Support
• Properties Support

4. CSS3 Advanced Selectors

• Attribute Selectors
• Structural Pseudo-Classes
• Pseudo-Class Selectors

5. CSS3 Visual Effects

• 2D Transformations
• Transitions
• Font and Color in CSS3
• Border and Box Effects

6. Download Options

• Ajax and Traditional Web Apps
• Bandwidth
• User Experience on Page Load
• Multi-Stage Downloading
• Deciding How to Divide the Data
• Predictive Fetching
• Pre-Fetching Variant - Server Notification
• On-Demand Downloading
• JavaScript and CSS Minification

7. Optimization and Profiling

• Code Optimization
• Adding Elements to a Page
• JavaScript Verbosity Tradeoffs
• Minimizing Dot-Notation
• CSS and Reflow Minimization
• Minimizing Reflow Times

8. Memory Management

• JavaScript Memory
• Tools for Measuring Memory Footprint
• Removal of DOM Nodes
• Cyclic References
• Reusing DOM Nodes
• Interactions between Techniques

9. UI Patterns

• User Interface/Interaction Design Patterns
• Categories from Yahoo! Design Pattern Library
• Web Application Design Principles

10. Layout Patterns

• Page Grids

11. Navigation Patterns

• Accordion
• Alphanumeric Filter Links
• Breadcrumbs
• Item Pagination
• Search Pagination
• Module Tabs
• Navigation Tabs
• Progress Bar

12. Selection Patterns

• AutoComplete
• Calendar Picker
• Carousel

13. Rich Interaction Patterns

• Invitations
• Transitions
• Drag and Drop Modules

14. Challenges of Mobile Development (Optional)

• Mobile Web
• Native Code Generators
• Native Web Runtime (NWR)
• Unique Mobile Device Distribution
• Apple iOS
• Android
• Blackberry
• Design Tools
• DroidDraw
• jQuery ThemeRoller
• User-Base Considerations
• Data and Feature Constraints
• REST
• JavaScript Object Notation (JSON)
• Yahoo! Query Language (YQL)
• SQLite
• Security
• OpenID
• OAuth
• Client-Side XSS by innerHTML
• JavaScript eval() and parse()
• Encryption

15. jQuery (Optional)

• Using jQuery from Web Page
• Register a Ready Event
• jQuery Functionalities
• jQuery Selectors
• Basic Selectors
• ID Selector ("#id")
• Class Selector (".class")
• Multiple Selector
• DOM Traversal
• Manipulating DOM Elements
• Attributes
• Changing HTML and Text Content
• Managing Elements
• Effects and Animations
• Utility Methods

16. JSON Objects (Optional)

• Arrays and Objects

17. JSON Syntax and Processing (Optional)

• JSON Syntax and Parsers
• Sending Data
• HTML and Server - Using JSON
• JSON vs. XML
• Advantages and Disadvantages

18. Dojo (Optional)

• JavaScript Frameworks
• Selecting a Framework
• Using Dojo
• Request Object Properties

Labs

Approximately 60% of the course is dedicated to hands-on labs.