Skip to end of metadata
Go to start of metadata

Overview

Fluid is an open source community of designers and developers who help improve the usability and accessibility of the open web. We contribute to a variety of open source projects (such as jQuery UI), and we work on a few projects of our own: the Design Handbook, a guidebook of techniques for improving usability, and Infusion, a JavaScript application framework for developing flexible user interfaces.

Fluid Infusion is built on top of jQuery, providing all the stuff you need to create user interfaces that are incredibly flexible, accessible, and easy-to-use. Infusion is an application framework and a suite of user interface components built with HTML, CSS, and JavaScript. In contrast to many other user interface toolkits, Infusion components aren't black boxes--they're built to be modified, adapted, and changed to suit your application or context. Taking a "one size fits one" approach, Infusion even lets end-users customize their experience with the UI Options component.

We're looking for students to collaborate with us on the Google Summer of Code 2013 program. Working with Fluid gives you a chance to learn more about accessibility and usability while writing code with cutting-edge open web technologies like HTML5 Canvas and Video. Create cool stuff and make a real impact on users at the same time!

For information about the various ways we communicate with each other, see our Get Involved wiki page.

Projects

Storyboarder

1 position available
Difficulty: medium

With our focus on inclusive design, we strive to have systems that can adapt to the user's needs and preferences. Current systems have means for providing captions and transcripts as alternatives to video and audio. This proposal takes it a step further, by providing still images as a story board to accompany the text alternatives. The goals of the project will be to create a transcript of a video with both visuals and captions. This way, you can visually read what a video is communicating without having to play the video. This is useful for users who have attention needs, students doing learning review, or users who can not or prefer not to play video (i.e. noisy environment, slow system, or poor internet connection). Students will be expected to make use of the Fluid Infusion framework, as well as ensuring that the results of the project have a focus on usability, accessibility and inclusivity.

Inspirations: Fluid Video Player Demo, Slideshow print-out with notes, TimeToast, iOS Messages, SoundCloud player and timeline

See also: Github space, Fluid Studios, Infusion Documentation, Get Involved, Coding and Commit Standards

Drupal Plugins for Infusion Components

1 position available
Difficulty: medium

For this project, you will create a plugin, module or theme that incorporates one of the following Infusion tools into Drupal:

UI Options will enable users to easily customize the appearance and layout of the Drupal site. For example, UI Options provides high contrast, large print, and simplified layouts that help improve usability with assistive technologies such as a screen magnifier or mobile device. The Video Player is fully accessible, and designed to work with UI Options.

We have already created a UI Options theme and a Video Player plugin for Wordpress; Now we want your help to make these tools available to other CMSs.

You should have a firm knowledge of open web technologies: HTML, CSS, and JavaScript, as well as experience with Drupal. Familiarity the Infusion Framework is not required; we'll show you the ropes.

See also:

Joomla Plugins for Infusion Components

1 position available
Difficulty: medium

For this project, you will create a plugin, module or theme that incorporates one of the following Infusion tools into Joomla:

UI Options will enable users to easily customize the appearance and layout of the Joomla site. For example, UI Options provides high contrast, large print, and simplified layouts that help improve usability with assistive technologies such as a screen magnifier or mobile device. The Video Player is fully accessible, and designed to work with UI Options.

We have already created a UI Options theme and a Video Player plugin for Wordpress; Now we want your help to make these tools available to other CMSs.

You should have a firm knowledge of open web technologies: HTML, CSS, and JavaScript, as well as experience with Joomla. Familiarity the Infusion Framework is not required; we'll show you the ropes.

See also:

Accessible WebRTC Collaboration with Infusion

1 position available
Difficulty: medium

The Web Real Time Communication specification (WebRTC) promises to enable audio and video collaboration directly within a web browser without the need for plugins such as Flash. This has the potential to create a whole new ecosystem of reliable tools that can meet diverse user needs. While WebRTC is still emerging, now is the time to explore how we can create accessible and inclusive collaboration tools using HTML, CSS, and JavaScript.

This project will entail the creation of a WebRTC-based collaboration tool written using the Fluid Infusion framework to provide a flexible, personalizable user interface. At minimum, the tool should enable several participants to communicate via audio and video as well as to share links to web pages and collaborate using third-party tools such as Etherpad, chat, and more. Most importantly, this tool should be accessible in a variety of ways, working reliably with screenreaders, keyboard-only control, and personalized accessibility tools such as Fluid's UI Options. Like all Fluid software, it should have a flexible presentation and be developed in a way that is modular, so that it can be easily embedded into other web applications and tools.

You should have a firm knowledge of open web technologies: HTML, CSS, and JavaScript and be comfortable working with bleeding-edge web specifications.

See also: Github space, Fluid Studios, Infusion Documentation, Get Involved, Coding and Commit Standards

Inclusive Web-Based Music Development Environment

1 position available
Difficulty: difficult but awesome

With the new Web Audio, Web MIDI, and Audio Data APIs, it is now viable to create sophisticated music software entirely using open web technologies. However, most current music-making software is complex, inaccessible to assistive technologies, and requires the use of a mouse. This project will involve the creation of a web-based integrated development environment (IDE) for making electronic music using the Flocking framework and Fluid Infusion.

Taking the current Flocking Playground as inspiration, a new development environment will be created that allows music developers to write synthesis code and connect it up to a variety of accessible controls such as the Automagic Music Maker piano, sliders, knobs, oscilloscopes, and other graphical user interfaces for music-making. Users should be able to save their synths and easily share them with others. Architecturally, this work may also include a declarative binding system that enables developers to quickly connect synthesis algorithms to user interfaces in a loosely-coupled manner.

Most importantly, this tool should be accessible in a variety of ways, working reliably with screenreaders, keyboard-only control, and personalized accessibility tools such as Fluid's UI Options. Like all Fluid software, it should have a flexible presentation and be developed in a way that is modular, so that it can be easily embedded into other web applications and tools.

Students should have knowledge of open web technologies, including HTML, CSS, and JavaScript. More importantly, they should have a desire to experiment with novel user interactions and understand some electronic music and Digital Signal Processing techniques.

See also: Flocking on Github, Automagic Music Maker on Github, Fluid Infusion Github space, Fluid Studios, Infusion Documentation, Get Involved, Coding and Commit Standards

Infusion Documentation

Most of the work we do here either uses or directly involves the Infusion Framework and Component Library. These links should get you started learning about Infusion, and should lead you to many more pages.

Contributing Code To Infusion
Infusion Documentation
How Infusion Works
Tutorial - Getting started with Infusion
Infusion Framework Best Practices