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
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
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
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
Lesson Five - Using Fx.Styles to Control Font Size
• Selecting an area to change
• Implementing Fx.Styles to change fonts
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
Lesson Seven - Implementing Reflection Javascript for Images
• Downloading and using reflection.js for images
Lesson Eight - Creating a Sliding Image Menu
• Understanding how the Sliding Image Menu works
• Implementing the Sliding Image Menu
Lesson Nine - Using AJAX with the Sliding Image Menu
• Creating an updated area for changing content
• Implementing AJAX links with the Sliding Image Menu
Example Files
(Included)
Updated: See this Quick Clips for further lessons!
Credits:
• LightBox Clone and Reflection.js created by digitalia.be
• Sliding Menu created by PhatFusion.net
• MooTabs created by SilverScripting.com
• Javascript library MooTools
Download:
http://rapidshare.com/files/67492121/Increasing.User.Experience.with.Javascript_lesson1.rar
http://rapidshare.com/files/67493454/Increasing.User.Experience.with.Javascript_lesson2.rar
http://rapidshare.com/files/67494064/Increasing.User.Experience.with.Javascript_lesson3.rar
http://rapidshare.com/files/67494609/Increasing.User.Experience.with.Javascript_lesson4.rar
http://rapidshare.com/files/67495576/Increasing.User.Experience.with.Javascript_lesson5.rar
http://rapidshare.com/files/67496165/Increasing.User.Experience.with.Javascript_lesson6.rar
http://rapidshare.com/files/67496416/Increasing.User.Experience.with.Javascript_lesson7.rar
http://rapidshare.com/files/67496839/Increasing.User.Experience.with.Javascript_lesson8.rar
http://rapidshare.com/files/67497288/Increasing.User.Experience.with.Javascript_lesson9.rar
http://rapidshare.com/files/67506480/Increasing.User.Experience.with.Javascript_ExampleFiles.zip
