Versions Compared

Old Version 3

changes.mady.by.user B. Collier Jones

Saved on

compared with

New Version Current

changes.mady.by.user B. Collier Jones

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

[Introduction to come soon, just trying to get the mockups posted]

Key Points

  • Drag-and-drop customization
  • Uses AJAX to reduce page reloads
  • No "customization mode"
  • XHTML 1.0 Transitional
  • Primarily CSS-based layout (still using a table for columns unless someone can show me a bulletproof CSS-based column example)
  • Highly accessible to screen readers and by people using keyboards vs. mice
  • What else?

Icons, Colors, and Spacing
This is just a rough mockup I made quickly to get something out for people to comment on.  The colors, icons, and padding were just quick picks Colors were picked to get things out the door, not to look good.  Agonizing over these things so early on would be a waste of time.  These things will definately change in when it comes time to release something.

...

  • Liferay
  • live.com
  • google.com/ig
  • my.yahoo.com 

I've put questions I need answers to in green. 

Normal View

This is the normal view of the portal.

...

  • Text Only - (rough idea) Presents the portal in a text-only-optimized mode.  The thinking here is that sometimes even a logical reading order in the HTML or on screen is still problematic for some.  This link would switch uPortal to a completely different theme that presents different navigation/customization options specifically designed for screen readers.  This introduces a long term maintenance problem since there are now two theme transforms to worry about, but hopefully the community will pick this idea up (if it generally considered worthwhile) and someone with a specific need for this will keep it up to date. What do you think of this idea?
  • uPortal Settings - Take you to the uPortal Settings view.  See the 4/28/2005 designfor an overview of this screen.
  • Help - We have help content, right?
  • Log Out - ...
  • Portal Logo - a graphic

Tabs

  • Icons - A per-tab icon.  Do we want this?
  • Tab Menu - Displays the tab menu.  Only works with JavaScript enabled.  A purely CSS based approach is not possible with IE6. Is this correct?  For the active tab, the menu arrow is always shown.  For inactive tabs, the menu arrow is only shown when mousing over the tab.
    • Move Left/Right - simple
    • Move to <Tab Name> - makes the 'tab' a 'page' of the tab specified (see pages
    • Rename - provides a way for the user to change the name of the tab.
    • Delete - deletes the tab
  • Add Tab - Adds a tab named 'New Tab' to the end of the current list of tabs.  If a user cannot add a tab, this doesn't even appear.
  • Dragging a Tab - When a tab begins to be dragged, it is removed from the tab list, made semi-transparent, and a dotted outline is shown over valid drop zones.
    • If the tab is released over an invalid drop zone, it snaps back to its original location.
    • If there are no valid drop zones (all of the other tabs are part of pushed fragments) then none of the tabs will be draggable.
    • When dragging a tab, tabs that have had their movement restricted by the layout manager will present some UI to the effect that they cannot be moved.  Perhaps a (tick) symbol on the mouse cursor.
    • What additional feedback is required?

Pages

I'm calling subtabs Pages so I don't have to call them subtabs.  Anyone have a better name?

  • Icons - They're just like tabs.
  • Page Menu - just like the tab menus
  • Add Page - just like Add Tab
  • First/Default "Page" - The first/default page is simply the parent tab.  It cannot be moved/reordered.  It is there to allow navigation between pages without having to click the actual tab to return to the default view.
  • Dragging a Page - See Dragging a Tab above.

...

  • the >> is the collapse/expand button.  The button adopts the convention of indicating the current state of the portlet.  (see My Yahoo or live.com)
    • Up - portlet is collapsed
    • Down - portlet is expanded
  • Icons - A per-channel icon.  Do we want this?

up3-portlet-menu.png* Customization Menu - same as other customization menus

  • Portlet Actions - Help, Settings, Detach, Focus/Maximize (which one?), Delete  - Am I missing any?  Can I remove some?

...

This is sorta mirrored after flickr, but in our case shows your tab hierarchy. What do you think?

Accessibility Support

Accessibility is a major design goal, since uPortal is focused on university needs.  I'm currently working on enabling three rough scenarios:

  1. Mouse/JavaScript Enabled
    • Dragging and dropping portlets/tabs/pages
    • Clicking on the arrows brings up menus
  2. Keyboard/JavaScript Enabled
    • Portlets/tabs/pages can be moved using the Move Up/Down arrows on the menus
    • Tab focusing arrows brings up the menus
  3. Keyboard/JavaScript Disabled
    • No menu arrows are visible
    • Portlets can be removed via Delete button on toolbar
    • Further customization options available in Change Layout interface

AJAX Support

The new uP3 will make heavy use of AJAX, especially behind-the-scenes calls to the portal for layout management operations.

For channels though, the portal will only use AJAX for switching between portlet modes: Normal, Edit, Help, and others.  Why?  We have no safe way to make portlets use uPortal 's AJAX functionality if they weren't written to use it explicitly.  We're not comfortable "rewriting" links and forms inside of unknown portlets to make their calls via AJAX.

Gallery