Solutiongrove has been using YUI on the front-end since it was released in 2006. I fell in love with it's sophisticated handling of browser events and how event listeners put unobtrusive in "Unobtrusive Javascript".

We have seen it evolve from a couple of core utilities to a library with complex controls and widgets.

Just a few days ago the YUI team released a developer preview of YUI 3, the next generation YUI library (YNG, YUI Next Generation). 

I haven't had a chance to try it yet out but I'm pretty sure I will soon.

While I haven't had a chance to examine the code , I have had the opportunity to read up on the documentation and join the YUI 3 Yahoo Group.

View full post

Google Reader now fully supported by screenreaders using WAI-RIA specification.

 

View full post

Step by step is a YUI-based tool that builds guided walkthroughs of Web applications.  This looks like a great tool to build documentation right into a Web application.  A context-sensitive help system could be built with this tool.  The script is available under a Creative Commons license.

The positives are it is much more interactive than a video or screencast and the users stay right on the Web site.   

The negative is that, at least for now, a programmer has to be involved in creating the experience.  A screencast or documentation page can be created by a nonprogrammer.  However, we could write a front end if someone wanted to use it extensively.

View full post

As we add Ajax-powered applications for our clients and share the code with others, there is some demand to make these features available within OpenACS and .LRN. .LRN, in particular, has a goal of meeting WAI accessibility guidelines. It is very challenging to meet these guidelines with Ajax-powered systems.

At the latest OpenACS/.LRN conference, we had a discussion on new Ajax applications and accessibility. I created a wiki page to document what we learned, including links to resources and best practices, as well as draft proposals from WAI for accessible rich internet applications.

View full post

I got back this week from the OpenACS/.LRN conference in Guatemala. There was a great bunch of interesting people there and there was a lot to learn.

I presented on an AJAX-enhanced data table, known in OpenACS as Listbuilder. The video and slides are available. The user interface was inspired by DabbleDB, which provides a collaborative alternative to spreadsheets for managing data. In our case, we needed to integrate this level of interactive data manipulation with an existing .LRN system. Data privacy was also an issue, so everything must be hosted internally. 

View full post

It's interesting how different companies, competitors even, can come together for a good cause in the name of making it easier for more people to use the Web.

In this feature from the Ajaxian, a Web architect from Yahoo, Chris Heilman, makes Google Charts, a product from Google, more accessible to people who can't see the charts it generates.

By "people who can't see", I am referring to people who are either fully or partially (color) blind and who rely on special screen readers like JAWS to view Web pages. 

View full post

We're very pleased to announce that Ajax File Storage UI turns 1.0 BETA and is now available from OpenACS CVS on HEAD.

What's New ? 

This release is a rewrite of the javascript code to use ExtJS 2.0. Additional changes include :

• autocomplete when adding/editing tags
• accordion layout for the panel navigation
• use of famfam silk icons from http://www.famfamfam.com/lab/icons/silk/
• various bug fixes and general code cleanup

New to AjaxFS UI ?

View full post

This is a demo of a custom UI we created for one of our clients to assign users to groups and subgroups. This implementation is customer specific but the idea could be used in a variety of use cases. The interactive drag and drop makes a tedious task fun and faster!

 

View full post

I am working to document our new AJAX enhanced UIs. This one is an interface for LORS, the .LRN Learning Objects Repository. This specific use case is not at all general, but I think there are UI elements we can reuse for a more general solution.

View full post

Basic Effects http://www.solutiongrove.com/blogger/one-entry?entry%5fid=266153 http://www.solutiongrove.com/mashup/tutorial1 Using Ajax http://www.solutiongrove.com/blogger/one-entry?entry%5fid=266155 http://www.solutiongrove.com/mashup/tutorial2 Drag and Drop http://www.solutiongrove.com/blogger/one-entry?entry%5fid=268010 http://www.solutiongrove.com/mashup/tutorial3 The flash presentation : http://www.empressr.com/viewPresentation.aspx?pres=d1oNvrWG10E%3d# SG Web Desktop http://www.solutiongrove.com/ - demo drag and drop - demo mashup, integration with google maps, yahoo weather, google ads MyCSM Portal http://www.mycsm.com/xowiki/portal - demo calendar MyCSM Ajax FS http://dev.mycsm.com/ajaxfs/ - ajax tree view, loads branches in the background - drag and drop (but it's a bit clunky), drag a file to a folder to copy, drag a file to the trash can to delete Streaming Search and Tag Could http://www.3ecompass.info/library/web2 - searchable tagcloud - streaming search results - preview url in search results by hovering mouse over URL icon Google Maps Integration http://tech.contextsensitivesolutions.org/content/gen/state-profiles/CA - mouseover markers - click Case Studies and Organization & Contacts links Blog Comments http://www2.pps.org:8000/news/one-entry?entry_id=5144 - background submission and updating of a section of the webpage via ajax - example of graceful degradation, try to turn off javascript and then try to comment Javascript Charts http://uptime.solutiongrove.com/uptime/reports?monitor_id=831 click "Visitors" link - more google maps integration - javascript charts using tschartlib

View full post

Draggable Portlets (part 1)

Overview

This is the third installment of a series of tutorials about Solution Grove's Web 2.0 Demo Page. In this tutorial I show you how to make elements, like the portlets in our demo, draggable, specifically the "Add Stuff" and "Map" portlets.

Prerequisites

The usual prerequisites apply. If you've tried the first two tutorials you should probably have an OpenACS instance running with Ajax Helper installed.

HTML Element

We start by creating html elements that users of your web application can drag. In the case of the demo page we used div elements with CSS styles. The css styles define the background color, width, height and other attributes of the div element. Here's what a draggable portlet looks like.

View full post

Ajax Connections

Overview

The first tutorial in this series introduces you to the Ajax Helper package and how to implement simple cinematic effects. The second tutorial in this series will show you how to make ajax requests to update sections of an html page without refreshing an entire page.

If you're wondering how a portlet can be inserted into the the mashups demo page without refreshing the entire page, this tutorial is for you.

Prerequisites

Prerequisites for this tutorial are the same as the first. Please make sure you have Ajax Helper installed on your OpenACS instance. The installation should also mount ajax helper in /ajax. Also ensure that you have sourced the needed javascript libraries. Please consult the first tutorial on how to source javascript libraries.

View full post

Using Cinematic Effects on your Web Applications

Overview

This is the first in a series of tutorials from my experience building Solution Grove's Web 2.0 Demo.

I'll start easy by showing you how to use the Ajax Helper Package to add neat effects to your OpenACS applications. The Ajax Helper package is a helper package that hopes to make it easy for OpenACS developers to incorporate Ajax and other javascript effects to OpenACS web applications

If you're wondering how the portlets disppaer and appear in our mashups demo, you'll find out in this tutorial.

View full post