uPortal Themes

Last week I updated the Bullet Resistant Scrollable Table. It now includes some form elements to test scrolling and also has some Javascript to hide SELECT elements in Window IE 5.x/6.x

I’ve had this sitting around for awhile now. Originally I was going to write up an article describing this technique, but that fell on the wayside. Anyways, I present to the Web Development world:

Pure CSS Scrollable Table with Fixed Header - The Big Four Version and The Bullet Resistant Version

This is useful in web applications for displaying data sets, web mail applications, mp3 playlists, etc. I’ve tried to comment as much as the code as possible.

While I things may seem idle here, I’ve actually developed a rather interesting CSS technique and am hoping to get an article published on it. Will post an update when possible.

Development on integratedModes has been painfully slow for the past 2 weeks. I recieved a few comments regarding Alpha 2, and will apply some of the suggested modifications. I’m gonna take a self deserved long weekend and pick up development next week.

I’ve posted a zip distribution of inductiveModes Developer Alpha 2. It is still through a quick-start distribution, but it can now be deploy from source. I don’t have instructions for registering the theme into another DB, so please continue using the included HSQL script. A changelog and TODO list has also been posted.

Some comparitive screenshots of inductiveModes versus integratedModes. Look at the “Size and main page:” and “Size of inline elements". There are some big differences. Bandwidth savings are realized once you take into account that the inline elements are typically cached on the client-side. Also, most of the inline elements of the inductiveModes theme are completely optional. How does that sound?

Sakai has just made available their first public release.

I messed around with their online demo, appears that they are using some code from my Nested DIVs theme (and skins). Nice! They removed most of the eye-candy DIV markup used for the channels, and seem to be going with a minimalist markup base. They have also introduced the concept of pages within tabs. It works nice, but the lack of spatial cues blurs the concept.

I was, however, expecting a more advanced theme from the Sakai group and was extremely disappointed. From my inspections of the HTML, they have not address any of the remaining accessibility / usability issues of uPortal. Thankfully, my inductiveModes theme does and it seems I’m fighting an uphill battle mostly by myself.

A screenshot of skin dubbed the “University of Nested DIVs” is posted. Will be cleaning up some code, write up a changelog, and hopefully post a new alpha release within a week or two.

One last additional feature to the theme (skin) is the ability to define custom icons per tab. See the screenshot above for an example.

The skin for new theme is just about finished. The hard part will be modifying the default channels and the preferences section. This is what makes a complete theme. No ETA on completion for this part.

What’s new thus far in the theme

• Introduction of unobtrusive JavaScript (UJS). Any feature enhanced with UJS is still available when JS is turned off.
• Removed inline JS from source XHTML.
• Use UJS to assign titles to anchors. Any anchor without a title is given default title of the link itself.
• Any anchor that has a target value of blank is assumed to be an external link, append text “(link opens in a new window)” to title attribute.
• Focus control is done dynamically where possible through UJS.
• Detach control is done dynamically where possible through UJS.
• Minimize control is done dynamically where possible through UJS.
• Maximize control is done dynamically where possible through UJS.
• Control icons are given better ALT and TITLE values. ex: “Hide the content of this channel” vs “Minimize".
• Channel title now contained within H1 element.
• H1 elements act as in page anchors.
• Tabs are now given a tabindex attribute.
• A “Skip to Navigation” link now available at top most of page. (for Screen Readers)
• A “Skip to Page Content” link now available at top most of page. (for Screen Readers)

These are in addition to what’s already available in the ND theme.

I’ve posted a developer alpha in quick-start distribution. It’s based off a uPortal 2.3.2 distro. This alpha release introduces some unobtrusive javascript for increased client-side interaction. Try the Minimize/Maximize and Focus controls. I haven’t tested it with a wide set of browser yet, and this is only a couple of days theme tinkering. Sorry no readme file at the moment.

Progress on the theme update has been steady for the past two nights. I’ve made several nice usability enhancements that increase uPortal’s “perceived” speed while reducing un-necessary server load. There’s one more enhancement in the works, but it’s giving me problems right now.

I’d would like to thank Patty Gertz and Princeton for sponsoring me in the JA-SIG Clearinghouse. This allows me to continue along and contribute my work back to the educational sector. Thank You.

Please consider helping theme development by purchasing a book on my Amazon Wishlist. In particular, I am in need of references related to W3C DOM. XSLT reference books would be nice too.

If you didn’t know by now, I left Virginia Tech near the end of March. I traveled ~3000 miles to start working at a new position located in Bellevue, WA.

I live a stone shot away from Microsoft and a dollar short of Seattle. I’m settling nicely and am ready to start working on uPortal Themes again.