Page Comparison

...

uPortal and the FLUID Project

by Colin Clark

Wiki page for this presentation

Powerpoint slides for this presentation 

FLUID Project 

[During this session I typed in a lot more things from the slides than I had for other sessions. Because the FLUID Project is new to uPortal I decided to leave in a lot of that. But you can refer to the slides as well. There is some discussion here also, especially toward the end. -- Michael Oltz]

Poor usability and accessibility are a significant signicant barrier for community source

...

• Start with a heuristic and usability reviews
• Establish a baseline for usabillity and accessibility
  • Know where we need to improve
  • Prioritize the pain points
• Designer's Toolkit: shared design resources
  • Personas and profiles
  • Scenarios
  • UI Design patterns (presenter considers this the best book: Jennifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design from O'Reilly, 2005.)
• U-Camps
• Iterative UI design and testing

Colin showed and spoke about a flowchart "Component Lifecycle" the process that will be taken with respect to each platform.

...

Components are more than widgets

What does FLUID mean in a Portal environment?

Components capture recurring patterns

Reuse: UI layer consistency

Con Can be reused across differrent portlets

...

Focus on uP3: JSR-168 for uP2 support?

A bit about the technology

...

Based on JavaScript, DHTML, and AjaxAJAX

Thin binding layer between client and RESTful RESTful, largely stateless server

Also advanced customization based on user preferences

FLUID Accessibility

Ajax Colin believes that AJAX will be accessible; it's just a matter of time

ARIA standard: Accessible Rich Intnernet Application (W3C)

AccssForAll AccessForAll for component metadata

Ongoing tooklit accesibility accessibility support

--- Dojo, YUI, others?

Design specific alternatives

FLUID: Accessibility from the ground up

Ideas for components that FLUID could implement

Resource organization

-- Drag and drop

-- Folders and hierarchies

-- reordering and rearranging

navigationNavigation

breacrumbs

pagin

-- breadcrumbs

-- paging

-- affordances for external content

Composite, domain-specific:

-- Users, groups, permissions

-- Calendar

Add your suggestions here

Flexibility and Customization

FLUID wil be a highly flexible UI layer

At configuratinconfiguration-time:

-- Appearance, branding, style, page text

-- Locale, reading level, density

-- Functionality and user experience

At run-time:

-- Swap in accessible controls

-- Re-styling for higher contrast,etc.

-- Components built for specific disciplines or user needs

A The next slide was a diagram of what the pieces of Configuration-time flexibility would look likewould be and their relationship to each other

Another diagram of how they will transform the would be used to transform [in the software development sense of the word] the user interface

Core Architecture

• Component framework
• Repository of shared components
• Semantics and specifications
• Integration

Component framework

• Component model and APIs
  • JavaScript, CSS, HTML
• Component container
  • JavaScript, AJAX toolkit integration
• Runtime Transformation Engine
  • Finds and aggregates alternatives
• Server-side binding layer
  • REST-based specificatoin + implementation
    

Integration of FLUID components with any particular project

• Early and often
• Heuristics to measure improvements
• Project integration as soon as possible
• Requires regular collaboration with

...

• the developers of the various projects
• Litmus test of project usefulness

Criteria for Initial Components

• Align with project needs/priorities
• Simple, known design
• Complex technically [therefore worth doing, and robust test cases]
• Test AJAX accessibility
• Generalizable
• Addresses "pain point"
• Accessible alternatives
• Learn early!

Jonathan: How will you prioritize the "pain points"?

Colin: We will rely on interaction with the design team, then ask the respective user community what it thinks.

Milestones

• Choose Technology frameworks: May
• Evaluate technology in practice

  ...

  • • Develop real componenets with candidate technologies
  • Create prototype image gallery components
    • Design,

  ...

  • • develop, integrate, test, iterate
    • Create accessible alternatives or equivalents
  • Find other components to get started with

  ...

  • Aim for a demo at the June conferences of JA-SIG and Sakai
    

  First component: Drag and Drop

  • Image Gallery: a mini iPhoto for the Web
  • Currently a simple tool written in RSF
  • Some clear UX problems to solve
    • No way to re-order or sort images in albums
  • Plans
    • Build components for reorganizing images
    • Move to JSR-168
    • Create accessible equivalents
    • Test in Sakai and uPortal
      

  DnD Accessibility

  • What does accessibility mean here?
    • Keyboard access
    • Low vision
    • Single switch/on-screen keyboard
  • Focus on the goal, not the task
    • Re-ordering images
    • Doesn't necessarily look like DnD
    • What alternatives are available on the desktop?
    • Cut and paste, etc.
  • We're starting on research and testing to find out the best alternative solutions
    

  Ideas for uPortal Starting POintsPoints

  • Jen's drag and drop preferences?
    • Help with interaction desgin & testing
    • Imrpovements to tab editing
    • Refactor to FLUID components
    • Accessibility support & alternatives
  • uP3 framework?
    • Administrative tools
    • Other interfaces Eric & co are working on
      

  Susan: Let's get a near-term decision for the non-JavaScript enabled. Which of the currently bad alternatives is the most reasonable?

  ...

  Jason: It looks like we're going to have stateful components on the client side, in which case reinitializing the session by refreshing the page would mess up things.

  Roy Fielding's dissertation on the architecture of the web was mentioned; that's where he coined the term "REST".
  

  Summary

  www.fluidproject.org

  Design and development work is ramping up

  ...

  Join our community, we need your input!
  

  QUestions Qyestions and Discussion

  Ideas for starting points in uPortal

  ...

  uP3 framework

  Challenges of Ajax AJAX in portlets

  Ajax AJAX toolkit preferences?
  

  Architectural suggestions

  Jen: It would be tough right now to add Drag and Drop preferences to another theme, if this makes it easier that would be great.
  
  

  Review of last two days and expectations of work between now and the conference.

  by Eric Dalquist

  [note-taker missed a couple points at beginning]

  Functional integration testing.

  [went Eric suggested let's go around the room]

  Elliott: My interest is in working on uPortal 3

  Chris: Consolidating efforts with existing portlets and channels and making it make sense.....

  Theron Feist: still getting up to speed, interested in the UI enhancements. Getting more portlets out of the box.

  ...