Fluid Project Highlights

Project Highlights to Date

• Established a strong community of expertise and interest in usability and accessibility in the open/community source environment

• Significant education and outreach activities: four U-Camps to date, as well as presentations and evangelism

• Created a Design Handbook to help open source communities improve user experience:

  • UX Walkthroughs, to help assess usability and accessibility

  • UI design patterns: advice and guidance on building effective user interfaces

  • User testing techniques and advice

• Worked with many communities to help with usability, accessibility, and JavaScript development requirements

• Pioneered new interactions for accessible drag and drop

• Created the Lightbox and Layout Customizer components and integrated them into several applications

• Established several primary strategies for the Fluid framework, including:

  • Unobtrusive, markup-driven components

  • Portal-safe markup binding

  • Keyboard navigation plugins

  • Support for multiple versions

• Released Fluid 0.1, including a diverse package of components, sample code, and documentation

Milestones and Deliverables

Community

• Established all of the communication infrastructure required by a health open source community:

  • Wiki

  • Issue tracker

  • Source code repository

  • Mailing lists

  • Continuous integration

  • Videoconferencing
    • Defined a comprehensive project roadmap, release plan, and component design strategy
    • Defined and implemented community procedures:
    • Security process
    • Commit access and voting
    • Licensing and contributor agreements

Design Handbook and Design

• User Experience Walkthroughs

  • Comprehensive protocols, checklist, and advice on how to do a UX Walkthrough

  • Substantial walkthroughs of Sakai, uPortal, and Moodle, including accessibility evaluations

  • Mentored the communities in doing their own UX Walkthroughs

• Contributed to the W3C's DHTML Style Guide working group, to help establish conventions for keyboard accessibility

• User interface design patterns

  • Created three new UI design patterns related to drag and drop

  • Established plan for the Open Source Design Patterns Library, the first truly open and collaborative repository for UI design patterns

  • Collaborated with other communities and industry partners on design pattern best practices

• Defined user testing and contextual inquiry procedures

Components

• Designed and developed the first Fluid component, the Lightbox

  • Integrated into the Sakai Image Gallery tool and the ATutor gallery module

• Designed and implemented the Sakai "My Active Sites" tab-based interface. This will serve as the basis for an upcoming reusable Fluid component.

  • Integrated into Sakai 2.5

• Designed and implemented the Layout Customizer, designed to provide customizable module layouts

  • Will be integrated into the post-3.0 release of uPortal

• Designed wireframes and spects for initial versions of new File Upload and Tagging components.

  • Will be implemented and released in Fluid 0.3 and 0.4.

Fluid DHTML Framework

• Built the first Fluid framework service, the Reorderer

  • Accessible, unobtrusive, highly reusable drag and drop

  • The backbone of the Lightbox and other Fluid components

  • Available within Sakai, and ATutor; will be integrated into uPortal's next release post-3.0

• Evaluated several JavaScript toolkits and widget sets for the following criteria, ultimately settling on jQuery

  • Unobtrusiveness and support for graceful degradation

  • Accessibility, UX design

  • Clarity and simplicity

• Developed a keyboard accessibility plugin for the jQuery JavaScript toolkit, making it significantly easier to add accessibility to DHTML interfaces

• Established an approach for allowing multiple versions of the Fluid framework to coexist on a single page. Essential for portal safety.

Releases

• Fluid 0.1 was release on November 30, 2007. The release contains:

  • Lightbox component

  • Reorderer framework service for accessible drag and drop

  • 3 UI design patterns offering advice about how to design for drag and drop

  • Protocols and guidance on how to do your own UX Walkthrough

  • Tons of sample code and documentation