Portal Active Zones

Information

This describes an idea to allow more flexible use of the portal by tool writers and services in Sakai. This is meant to replace the things that are effectively hardcoded into the portal with more flexible zones which can have content placed into them. This will allow for more flexible control over the portal and the ability to added more interesting data and UI pieces within the portal itself.

Summary

• Current issues that this addresses

  • Portal layout is relatively inflexible and in some cases hardcoded, tools are stuck in frame-bound silos

• Goals

  • More flexible presentation options for tools and services

  • Allow developers to easily extend the portal to add widgets, controls, etc. to various hotspots in the portal called active zones

  • Allows for control of the location of the active zones using CSS

  • Uses a very simple provider style methodology to add extra data to an active zone (tool developer does not have to make changes to the portal code)

  • Allows for appending of multiple html fragments from multiple sources in a single zone (or replacing/clearing zone content)

• Benefits

  • Impact on UX and teaching and learning benefit: promotes better UI and more options for innovation, so both positive

  • More flexible portal and more dynamic tools, more customization for local institutions without branching code

  • Easy solution to the issue: Fairly simple patch to the existing portal code to allow this to work (quick solution)

  • Reduce dependencies of portal on other projects

Portal Active Zones

• Mockup showing the zones (just to give a general idea of their locations)

  • Zones can be resized and tweaked via CSS

  • Initially the Special Zones will be populated with default data

  • Open Zones can have as many html fragments added to them as is desired
    

  • Sample HTML for a zone

    <div class="activezone"> <ul class="activezonelist"> <li class="activezonelistitem"> An HTML fragment with a <a href="http://mail.university.edu/">link to university email</a> </li> <li class="activezonelistitem"> <form target="something.html"> <input type="submit" value="Revert user to aaronz" /> </form> </li> </ul> </div>

  • NOTE Unused zones would simply not be rendered (i.e. they would not take up room on the screen)

• How would it work?

  • Developers would implement an interface which returns a String or a Stream or something which is an html fragement (this may also support portlets)

    • The interface would include mentioning the zone key (e.g. HeaderTop) which the html fragment is inserted into

  • The portal will ask for all the zone contributors to provide it with content when it renders

  • The content would be inserted into an html list in the zone which will be a div or whatever the UX team deems appropriate

    • This would allow as many html fragments to be inserted as are desired for a single zone without overwriting current data

    • Example: In Zone HeaderTop, Tool A puts in an html fragment with a form and submit button, Tool B puts in a fragment with some html and javascript, the portal would put each fragment into the html list in HeaderTop such that both fragments are rendered in the list

• Some sample uses of active zones

  • Presence could be handled via an active zone instead of requiring hard coding in the portal

  • Become User could place a button in one of the header zones which allows the user to switch back to their original account

  • Search could be optionally placed into the header

  • Tools could suppress the menu bar or other parts of the portal if desired

• Active Zones Implementation Ideas - some possible ways to implement this idea in the portal