|
Increasing User Experience With Javascript |
 Using the javascript library MooTools with some other free libraries, this tutorial series teaches how to increase user experience with some simple javascript. Using a fictional "blog" as the test site, subscribers will learn how to enhance the blog with modern web techniques such as:
- LightBox type photo gallery
- Expanding sub-menus
- AJAX loaded pages
- Sliding image menus
- Reflecting images without having to touch Photoshop
- Condensing a web page with Fx.Styles and Sliding Tabs
- ...and more
Sign-up to access more great tutorials!
Recommended Skills for This Series: Basic knowledge of HTML. Many of the javascript techniques used are explained in detail so no javascript background is needed if the user has a decent grasp of basic HTML and a little CSS. Please note that this is a beginner's series of javascript. Experienced users will find the code in this series erratic, though it is simpler for those who know nothing about javascript.
Introduction
- Overview of the series
- Showcasing the javascript effects
Watch The Introduction
Lesson Two - De-Cluttering the Membership Page
- Attaching scripts
- Considering MooTools as a solution to a cluttered layout
- Using the Fx.Styles of Mootools to change element properties
Lesson Three - Using MooTabs to Condense Related Products
- Understanding how MooTabs works
- Implementing MooTabs to condense the related products of a shopping cart
Watch Lesson Three
Lesson Four - Using a MooTools 'Light Box' to Create a Friendly Gallery
- Understanding the problem with the existing gallery
- Fixing the gallery with the MooTools Light Box
Watch Lesson Four
Lesson Five - Using Fx.Styles to Control Font Size
- Selecting an area to change
- Implementing Fx.Styles to change fonts
Watch Lesson Five
Lesson Six - Creating a Sliding Sub Menu with MooTools
- Analyzing the main menu and sub-menu for implementation
- Implement some simple MooTools effects to reveal sub-links
Watch Lesson Six
Lesson Seven - Implementing Reflection Javascript for Images
- Downloading and using reflection.js for images
Watch Lesson Seven
Lesson Eight - Creating a Sliding Image Menu
- Understanding how the Sliding Image Menu works
- Implementing the Sliding Image Menu
Watch Lesson Eight
Lesson Nine - Using AJAX with the Sliding Image Menu
- Creating an updated area for changing content
- Implementing AJAX links with the Sliding Image Menu
Watch Lesson Nine
Example Files
Updated: See this Quick Clips for further lessons!
Credits:
Tags: Tutorial MooTools Ajax lightbox reflecting images javascript Fx.Styles Video Series Increasing User Experience With Javascript
|
