uportal and the fluid project
Post on 22-Jan-2016
31 Views
Preview:
DESCRIPTION
TRANSCRIPT
uPortal and the FLUID Project
uPortal and the FLUID Project
Colin ClarkFLUID Project Technical LeadATRC, University of Toronto
Colin ClarkFLUID Project Technical LeadATRC, University of Toronto
SummarySummary
• Project goals and philosophy• Who is involved?• Design deliverables• Technology• Timelines and first steps• How to get involved• Discussion
• Project goals and philosophy• Who is involved?• Design deliverables• Technology• Timelines and first steps• How to get involved• Discussion
The Context for FLUIDThe Context for FLUID
• Poor usability & accessibility are a significant barrier for community source
• Now is the time to address the concerns of our communities
• Our goal is to incrementally improve the overall user experience of Sakai, uPortal, Kuali Student, and Moodle
• Poor usability & accessibility are a significant barrier for community source
• Now is the time to address the concerns of our communities
• Our goal is to incrementally improve the overall user experience of Sakai, uPortal, Kuali Student, and Moodle
FLUID in Community SourceFLUID in Community Source
• Cross-project collaboration• Take a holistic approach by combining
both technology and UX design• A two-fold path:
• Social: build a community around UX• Technical: new UI development tools
• Cross-project collaboration• Take a holistic approach by combining
both technology and UX design• A two-fold path:
• Social: build a community around UX• Technical: new UI development tools
Who is Involved?Who is Involved?
• Partnership among several universities and corporations
• Toronto, UBC, UC Berkeley, York, Cambridge, and others
• IBM, Sun, and Mozilla Foundation• Broad range of experience
• Partnership among several universities and corporations
• Toronto, UBC, UC Berkeley, York, Cambridge, and others
• IBM, Sun, and Mozilla Foundation• Broad range of experience
Design DeliverablesDesign Deliverables
• Start with heuristic and usability reviews• Baseline for usability 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
• U-Camps• Iterative UI design and testing
• Start with heuristic and usability reviews• Baseline for usability 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
• U-Camps• Iterative UI design and testing
Presentation TechnologiesPresentation Technologies
• The last thing community source needs is yet another presentation technology
• To be different, the technology needs to be fundamentally driven by user needs
• FLUID will integrate with the best existing technologies
• The last thing community source needs is yet another presentation technology
• To be different, the technology needs to be fundamentally driven by user needs
• FLUID will integrate with the best existing technologies
What are we going to build?What are we going to build?
• A living library of flexible UI components that can be used across applications
• A new component framework built specifically to improve usability
• Easy to wire up new components or customize properties of existing ones
• Components are more than widgets
• A living library of flexible UI components that can be used across applications
• A new component framework built specifically to improve usability
• Easy to wire up new components or customize properties of existing ones
• Components are more than widgets
FLUID in a Portal EnvironmentFLUID in a Portal Environment
• Components capture recurring patterns• Reuse: UI layer consistency• Can be reused across different portlets• Build FLUID into cross-cutting areas such
as portal navigation• Personalization: UI customizability for
institutions and individuals• Focus on JSR-168/286 and uP3 framework
• Components capture recurring patterns• Reuse: UI layer consistency• Can be reused across different portlets• Build FLUID into cross-cutting areas such
as portal navigation• Personalization: UI customizability for
institutions and individuals• Focus on JSR-168/286 and uP3 framework
A bit about the technologyA bit about the technology
• Unique challenge: how to enable support for very diverse presentation technologies?
• Based on JavaScript, DHTML, and AJAX• Thin binding layer between client and
RESTful, largely stateless server• Also advanced customization based
on user preferences
• Unique challenge: how to enable support for very diverse presentation technologies?
• Based on JavaScript, DHTML, and AJAX• Thin binding layer between client and
RESTful, largely stateless server• Also advanced customization based
on user preferences
FLUID AccessibilityFLUID Accessibility
• AJAX will be accessible• it’s just a matter of time
• ARIA: Accessible Rich Internet Applications (W3C)
• AccessForAll for component metadata• Ongoing toolkit accessibility support
• Dojo, YUI, others?
• Design specific alternatives• FLUID: Accessibility from the ground up
• AJAX will be accessible• it’s just a matter of time
• ARIA: Accessible Rich Internet Applications (W3C)
• AccessForAll for component metadata• Ongoing toolkit accessibility support
• Dojo, YUI, others?
• Design specific alternatives• FLUID: Accessibility from the ground up
Ideas for ComponentsIdeas for Components
• Resource organization:• Drag and drop• Folders and hierarchies• Re-ordering and rearranging items
• Navigation:• Breadcrumbs• Paging• Affordances for external content
• Composite, domain-specific:• Users, groups, permissions• Calendars
• Add your suggestions here
• Resource organization:• Drag and drop• Folders and hierarchies• Re-ordering and rearranging items
• Navigation:• Breadcrumbs• Paging• Affordances for external content
• Composite, domain-specific:• Users, groups, permissions• Calendars
• Add your suggestions here
Flexibility & CustomizationFlexibility & Customization
• FLUID will be a highly flexible UI layer• At configuration-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
• FLUID will be a highly flexible UI layer• At configuration-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
ConfigurationConfiguration
TransformationTransformation
Core ArchitectureCore Architecture
• Component framework• Repository of shared components• Semantics and specifications• Integration
• Component framework• Repository of shared components• Semantics and specifications• Integration
Component FrameworkComponent 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 specification +
implementation
• 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 specification +
implementation
IntegrationIntegration
• Early and often• Heuristics to measure improvements• Project integration as soon as possible• Requires regular collaboration with
you!• Litmus test of project usefulness
• Early and often• Heuristics to measure improvements• Project integration as soon as possible• Requires regular collaboration with
you!• Litmus test of project usefulness
Criteria for Initial ComponentsCriteria for Initial Components
• Align with project needs/priorities• Simple, known design• Complex technically• Test AJAX accessibility• Generalizable• Addresses “pain point”• Accessible alternatives• Learn early!
• Align with project needs/priorities• Simple, known design• Complex technically• Test AJAX accessibility• Generalizable• Addresses “pain point”• Accessible alternatives• Learn early!
Milestones & Short Term GoalsMilestones & Short Term Goals
• Choose technology frameworks: May• Evaluate technology in practice
• Develop real components with candidate technology
• 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
• JA-SIG• Sakai
• Choose technology frameworks: May• Evaluate technology in practice
• Develop real components with candidate technology
• 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
• JA-SIG• Sakai
First Component: Drag and DropFirst 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
• 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 AccessibilityDnD 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
• 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 PointsIdeas for uPortal Starting Points
• Jen’s drag and drop preferences?• Help with interaction design & testing• Improvements to tab editing• Refactor into FLUID components• Accessibility support & alternatives
• uP3 framework?• Administrative tools• Other interfaces Eric & co. are working on
• Jen’s drag and drop preferences?• Help with interaction design & testing• Improvements to tab editing• Refactor into FLUID components• Accessibility support & alternatives
• uP3 framework?• Administrative tools• Other interfaces Eric & co. are working on
SummarySummary
• The FLUID Project is a reality:
www.fluidproject.org
• Design and development work is ramping up• Goal: incremental, achievable
improvements• We’re here to help with your work• Join our community, we need your input!
• The FLUID Project is a reality:
www.fluidproject.org
• Design and development work is ramping up• Goal: incremental, achievable
improvements• We’re here to help with your work• Join our community, we need your input!
Questions & DiscussionQuestions & Discussion
• Ideas for starting points in uPortal• Individual portlets• uP3 framework
• Challenges of AJAX in portlets• AJAX toolkit preferences?• Architectural suggestions
• Ideas for starting points in uPortal• Individual portlets• uP3 framework
• Challenges of AJAX in portlets• AJAX toolkit preferences?• Architectural suggestions
top related