ICS 499: Learning the Yahoo User Interface

In my efforts to improve the web user interface for the Devcathlon, I have spent an extra amount of time on researching the use of Java Script.  There are a number of things I want to implement onto the user interface; but as a novice in web scripting, I will have to take small steps.  As I mentioned in my last blog, I have been researching on inserting a progress bar and a pop up box (Yahoo UI tooltip).

Have you seen my Tooltip

After downloading the YUI package from Yahoo, I realized I was in for a long ride.  The package was filled with a lot of useful and complicated things.  So as I searched for an example of the tooltip, that’s located in the container folder and apart of the container class.  It was fairly simple to understand what was going on; basically when the mouse is hovered over a specific item on a page, a pop up box will appear with text inside.  There is a simple HTML attribute that will do this as well, the “alt” attribute.  Unlike the “alt” attribute, what the YUI tooltip with the Java Script does is; the programmer can not only set the inside text, but also set how long the pop up box will appear and disappear. 

Also the inside text messages can be set by a Java Script function, where it becomes more dynamic.  One way I saw the dynamic text messages was at my work place, Star Degree’s website.  Setting the pop up box with dynamic text messages gets more complicated.  The programmer would have the Java Script function access a database with all the information; this is where AJAX and Java Script inter twines with each other.  Another cool thing with the YUI tooltip was setting some CSS to make the pop up box to your liking. 

 

 

This tooltip has round corners, this was possible by manipulating the CSS and adding in the corners into the CSS folder. 

Finding a progress bar

Another improvement to the Devcathlon user interface I researched on was a progress bar.  When I Googled some examples of a progress bar, the results given was not what I wanted.  Many of the examples showed a download progress bar, but what I wanted was actually a page loading image.  An image that would appear when an action was made, like after pressing a link, then disappear when the page for that link was done loading. 

 

After hours of researching, I found that YUI also has this feature; but was called a loading panel, also apart of the container class. The loading panel not only shows the animated loading image, but also grays out the web page.  When I was done looking at the YUI loading panel example and narrowing down what was needed, I proceeded to implement my own version.  After many attempts to have a web page load just like the example did, nothing worked.  I then assumed that the web page that uses the loading panel must be on an online server.  My assumptions were correct, I test this by loading a web page onto my works server and everything worked. 

 

Conclusion

I realized after researching these two web page improvements was not easy at all.  A good thing I found was the Yahoo UI has many great features to use for a website, and a good API to make researching easy.  Also a lot of the hard Java Script is pre-written; a programmer can also add in new Java Script functions to work with the YUI.  In an effort to possibly write and understand, Java Script and YUI; I have obtained a copy of these two books “Learning the Yahoo User Interface” and “Head First JavaScript”.  Both books were highly recommended by one of the web programmers from my work.