Some possible improvements

1) skin CSS linked to too soon

skins/default/skin.css is linked to before other CSS styling canvases that could be considered important canvases for institutional skins – luckily these can be trumped in the skins css by ratcheting the specificity in skins/default/skin.css, ie: topnavigation.css is linked to after skins/default/skin.css and trumps the style for #general_search_container in skin.css unless one uses a contextual selector with more specificity: #topnavigationcontainer #general_search_container instead of #general_search_container

This is somewhat clumsy and not very obvious. Did not have to resort to !important but can see that happening if the later CSS selector is too specific to trump.

I notice for example that in the Wiki documentation !important is used to change the color of links – this is a symptom.

In other words: it may be a good idea to include skins/default/skin.css last.

2) side effects from overrides

There is a flash and jiggle of previous styles that is very apparent if the palette of skins/default/skin.css or the position of an element affected there is at variance with the values of any of the previous core selectors. This flash and jiggle is more pronounced if the connexion is slow or there is load or the sheets are not cached.

It may be a good idea to leave style “gaps” in the core sheets and supply a skin/example sheet that fills them in – this would accomplish several things:

1. avoid possible flash and jiggle;
2. identify clearly what are good skinnable canvases/targets;
3. separate style concerns into core sheets (generic substance), skin sheets (institutional style);
4. establish a sort of contract: “address the selectors in the skin/example and everything will be simple and you will not have to touch anything else probably,” reducing the task of the adopter to painting by numbers sort of.

3) facilitating broad strokes changes to match the institutional style guide.

Links are a good example that tend to spark a lot of controversy. One of the gaps in the core sheets may be link color and decoration. This would be addressed in the skin sheet, which would address the generic link (and the pseudo classes), and also the ones that are identified by class/id or context. This is very hard as everyone’s definition of what should be in the skin scope will be different. But identifying what a core set of skinnable possibilities will cover the majority of the cases.

4) increasing the scope of the core sheets and decreasing the scope of widget/page sheets

This would also be very helpful – specially since the widget sheets are loaded last – migrating all rules that should be generic to the core sheets would allow a skin sheet to affect anything it needs to affect with more ease (because it could trump core sheets without any skullduggery). I see this is happening  (SAKIII-1800, SAKIII-1803), which is great.  For example in order to eliminate the rounded corners in the main content area this was needed in the skin:

.header .fixed-container,
.header .fixed-container .decor,
.search-container .content_search .fixed-container,
.search-container .content_search .fixed-container .decor,
.account_preferences .header .fixed-container
  {
    background-image: none;
  }

Since it is the same graphic element anywhere it happens, it might best be served by a core sheet, once.

These points all revolve around separating core and page from skin, core and page from widget, skin from widget. 1) above is moot if we get the widgets out of the business of styling generic items best left to the core; 2 and 3 are moot if the core avoids declarations best left to the skin and so forth.

Portal changes

The main change, that made the rest worthwhile and necessary, was using an updated WURFL to redirect mobile devices to the mobile portal  (SAK-18720 / Roldán Martinez, Horwitz, Swinsburg, Qian). This is controllable by a server property and is a huge leap forward!

The rest of the changes are below:

Give  users the chance to bail out of the mobile portal and going to full version (SAK-18800)

Fix some login issues (SAK-18955,  SAK-18768)

Fix JSR-168 tools in mobile portal (SAK-19060)

Links directly to tools/pages/on sites don’t work when portal autoforwards to PDA portal (SAK-18801)

Provide the ability to reset tools (SAK-14808)

Add the ability present in the full portal to insert arbitrary markup into a site’s mobile portal via a site property (SAK-19275) – this is useful in many ways, from adding Google Analytics to the Mobile gateway to adding any Javascript driven functionality to a given site.

Put all strings in bundle, fix scaling/orientation issues, sub-site link displays (SAK-19179)

Tool changes

Disable RT Editor and present a text-area instead for mobile devices (SAK-18098). This has the important side benefit that it removes an important accessibility barrier: the FCK Editor.  Screen reader users can use the mobile portal till the transition to the CK Editor takes place.

Detect inability to upload files in Resources tool for iOS devices (SAK-18711) and prevent subsequent errors

Skin changes

Fork the user experience three ways: 1) small mobile webkit (iPhone/iPod/Android), 2) iPad, 3) the rest. Provide a base for all user agents, a few small adjustments to the mobile portal and a few to the tools it encloses to size elements better for this medium (a lot of people contributed to this, but piles of thanks to Keli A. from Stanford).  Here is the tool menu in Firefox.

We used an @media selector for iPad to style links to fit in with iOS conventions and pad the toolbar links to help Zhen avoid hitting the iPad browser menu by mistake:

We used an @media selector for iPhone/iPod/Android browser:

To style toolbar, site and tool menu to fit in better with iOS conventions

In this format we omit from the breadcrumb unneeded information: the link to site list is the logo, link to tool list is the site name. If site name is too long it gets trimmed and an ellipsis is provided (in the toolbar crumb and in the site list). This is all very debatable – but there was just no earthly way of fitting it all (“Sites > Site name > Tool name”) in there otherwise. The trim is adjusted for orientation – horizontal gets more characters. Here is an example with a long site name:

Since the tool is in the same document as the portal in the mobile response – one can reach into frequently used tools and massage the display for small devices via pda.css. The initial Resources list view is unusable at an small size, but since we are dealing with a modern browser we can reach in and hide a few columns with some complex attribute selectors,  and trim and ellipse the resource title link based on device orientation (portrait / lanscape). Here is an example with Android:

It looks very busy still, but it is actually usable I think – although that remains to be tested. Here it is on a landscape orientation with an iPhone:

Announcements got similar treatment.

One of the gratifying things was to see decisions taken eons ago as to the structure of the interface elements bear fruit.  The liquid layout of form elements (from Ben Brophy, formerly of MIT, and Marc Brierly, Stanford) adjusts well to this format: the inputs drop under the label, neat!  Here is a screen shot of the create new user screen on Android:

Being able to affect tool rendering in the mobile portal  also had some other perhaps more questionable benefits. In some tools, because of use of iframes or other issues, some of the functionally was affected. In lieu of doing something sensible like fixing the tool, the pda.css hides the offending sector (in Chat it is the list of users that blows up and is hidden) or the opportunity to trigger the error (link to preview an edited page and link to create comments in Wiki).

The main work detailed above in the SAKs and the skin work has been merged to 2.7.x and our CTools branch (thanks again Zhen!) and we are testing the functionality in Michigan at the moment, including a stress test on the mobile portal itself.  Aside from uncovering more bugs we also hope to produce documentation that will rate the user experience of each of the tools (pleasant/root canal) for the guidance of our users.

Here it is in Android with the UM look (“ctools-int” is a dev server identifier string):

Naturally this falls way short of the experience of a native app, but at least the functionality is all (mostly) there now.  Maybe for Sakai 2.9 an expanded participation of tools in Entity Broker will foster a complete native app development following the Oxford example.

A question: we are assuming, perhaps wrongly, that covering iOS and the Android default browser will cover the lion’s share of our users. Do you have other suggestions?

I will try to post next about conclusions, in a less discursive manner.

The gateway

I have touched on this previously in a non-serious vein.

Institutions with many resources can and should tailor the gateway to suit. It does not need to have the present markup and functionality structure. The possibilities are limitless, more so than in Sakai 2. On the other hand, in Sakai 2 there is a set of known configurations that an adopter can easily set to produce a gateway that is perfectly acceptable:

• Login (internal, CAS, primary and secondary)
• Appearance (the gateway can have it’s own skin, be defined in the default skin, or inherit from the defult skin)
• Institutional messages are possible
• Institutional links in footer are configurable
• Etc.

In Sakai 3 the process of customizing the gateway seems more open ended. The exercise below covers the case of an institution that does not have many resources to change the gateway framework, and can affect just the look.

dev/index.html

I added a .masthead wrapper to .header-title and .header-byline. The design I received required it as I explain below. An aside: in Sakai 2 modifying the structure of the portal in this manner would have been harder.

<div class="masthead fl-centered">
    <!-- HEADER -->
<div class="header-title">
       <img src="_images/sakai_logo_index.png" alt="__MSG__INSTANCE_NAME__" />
    </div>
<div class="header-byline">
        __MSG__HEADER_BYLINE__
    </div>
</div>

This will allow us to have superimposed background images – one in .masthead and the other one in .header-title, see below.

dev/_css/sakai.index.css

Change the background:

html {
    background: #093b52 url(../../_images/umich_bg.gif) top left repeat;
}

Style the added wrapper, it gets a repeating background to match the UM logo background:

.masthead {
   height:100%;
   overflow:hidden;
   width:100%;
   margin-bottom:3px;
   background: url(../../_images/umich_banner_bg.png) top left repeat;
}

Style .header-title – giving it a background to display the sanctioned University of Michigan logo

.header-title{
  color: #08415E;
  font-size: 4.0em;
  float: left;
  margin: 0;
  padding: 0;
  background: #fff url(../../_images/umich_banner.png) top left no-repeat;<
  width:500px;
  height:79px
}

Hide the original Sakai logo

.header-title img{
   display:none
}

Hide the byline

.header-byline{
   display:none
}

Hide the Sakai logo in the footer

#footer_logo {
  display:none
}

Style the links in the footer

.sakai-footer .fixed-container a {
    color:#fff !important;
    text-decoration:underline;
}

Note !important, more on that later.

Here is the result so far. Not very exciting, I know – but the major requirements (family resemblance to institutional gateway, adherence to the institutional web style guides) are on their way to be met.

Other things that are in this screen that properly fall within a “branding” scope are the preview image, the link colors, the button colors.

Reminder: the gateway framework is not an immutable given – am just treating it as such.

Other pages

After you log in other rendering mechanisms come into play: new pages call different stylesheets, etc. Carrying out the stuff below takes care of mysakai.html and with some exceptions that will be noted and dealt with, all of the “my” pages (Inbox, Contacts, Profile, Inbox). Yay!

dev/_css/sakai.base.css

Added

.header{
   background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}

umich-transparent.png is transparent bottom 1/3rd, top 2/3ds the color of the tab at top:

<div class="personal-container fl-force-right">
    <div class="personal">
        <ul>

containing links to the hidden institutional login, user name and menu, the mail icon, help and sign out links.

This gives us a nice top area that ties in the tab mentioned above, the search area and then transitions into the main content area, pretty much following the original.

What if the needs of the institution dictate this gray area needs to reflect the school palette? For example – if instead of #86898B it needs to be #3A5E8C (following the UM identity guidelines at http://www.logos.umich.edu/web.html)

Things get complicated:

dev/_css/sakai.base.css

Edit the image referenced here so that the top 2/3 matches the new color (#3A5E8C)

.header{
    background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}

devwidgets/navigationchat/css/navigation.chat.css

Change the background color of #navigationchatcontainer from #86898B to #3A5E8C:

#navigationchatcontainer{background: #3A5E8C}

That was the easy part. The “personal” tab also needs to match that color.

Still on devwidgets/navigationchat/css/navigation.chat.css

The tab is composed of 2 sliding door images and a background color.

.explore_nav .personal-container {
    margin-top: 10px;
    background: url('../../../dev/_images/topBar_tr.png') top right no-repeat;
    padding-right: 5px;
    overflow: hidden;
}
.explore_nav .personal {
    padding: 4px 0 0 5px;
    margin: 0;
    background: url('../../../dev/_images/topBar_tl.png') top left no-repeat;
    min-height: 30px;
}

Change to

.explore_nav .personal-container {
    margin-top: 10px;
    background: url('../../../dev/_images/umich_topBar_tr.png') top right no-repeat;
    padding-right: 5px;
    overflow: hidden;
}
.explore_nav .personal {
    padding: 4px 0 0 5px;
    margin: 0;
    background: url('../../../dev/_images/umich_topBar_tl.png') top left no-repeat;
    min-height: 30px;
}

With this new background color the link separators need to be made lighter, change the border-left from #666a6d to #aaa

.explore_nav .personal li a {
    font-size: 9pt;
    padding:0 5px 0 7px;
    border-left: 1px solid #aaa;
    color: #fff;
}

And here is the University of Michigan “My Sakai” page.

One thing that remains to be done is adjusting the separators between the links in the “explore” link set at the top. Since the separators are not the same color as the background they bleed into the blue (see below). An easy fix is to give the border-left not to the LI but instead to the child A.

From

.explore_nav ul.explore li {
    padding: 0;
    padding-bottom: 6px;
    border-left: 1px solid #878a8c;
}
.explore_nav .explore li#nav_my_sakai_link { border-left: none; }
.explore_nav .explore li a {
    height:16px;
    color:#fff;
    padding: 8px 20px;
    text-align: center;
    display: block;
    float: left;
    font-weight: bold;
}

To

.explore_nav ul.explore li {
    padding: 0;
    padding-bottom: 6px;
}
.explore_nav .explore li#nav_my_sakai_link a { border-left: none; }
.explore_nav .explore li a {
    height:16px;
    color:#fff;
    padding: 8px 20px;
    text-align: center;
    display: block;
    float: left;
    font-weight: bold;
    border-left: 1px solid #878a8c;
}

Finally – the top rounded corners of the main content area are still expecting a #86898B background. These corners are created by background images referenced in

dev/_css/sakai.core.2.css

.header .fixed-container {
    background: #fff url('../../_images/header_l.png') top left no-repeat;
}
.header .fixed-container .decor {
    background: url('../../_images/header_r.png') top right no-repeat;
    height: 5px; margin-right: -20px;
}

Change to:

.header .fixed-container {
    background: #fff url('../../_images/umich_header_l.png') top left no-repeat;
}
.header .fixed-container .decor {
    background: url('../../_images/umich_header_r.png') top right no-repeat;
    height: 5px; margin-right: -20px;
}

duplicate and edit the 2 images to reflect the new background.

And that is enough for now. One could argue that with the new background the “Search” button needs to be a different color for contrast. We would need to nip over to:

dev/_css/sakai.base.css

and do some heavy styling to get just this button (and any other search button that shows in same background) to show new background color in all it’s states. I have not explored this but it would be a requirement and am sure it is perfectly feasible.

One final wrinkle. If I navigate somewhere else (try to search something, for example) the bottom background of the “search” area will disappear and the corners we fixed previously are misbehaving again.

We need to go over to:

dev/_css/sakai.search_b.css

and adjust the following selectors:

.content_search { padding: 12px 0 0 0; }
.search-container .content_search .fixed-container {
    background: #fff url('../../_images/header_l.png') top left no-repeat;
}
.search-container .content_search .fixed-container .decor {
    background: url('../../_images/header_r.png') top right no-repeat;
    height: 5px;
    margin-right: -20px;
}

to

.content_search {
    padding: 12px 0 0 0;
    background: transparent url("../../../dev/_images/umich-transparent.png") left top repeat-x;
}
.content_search a {
    color: #006E96;
}
.search-container .content_search .fixed-container {
    background: #fff url('../../_images/umich_header_l.png') top left no-repeat;
}
.search-container .content_search .fixed-container .decor {
    background: url('../../_images/umich_header_r.png') top right no-repeat;
    height: 5px;
    margin-right: -20px;
}

Much better:

Finally – the footer, that we addressed in the gateway, needs to be addressed again for screens where the user is logged in:

devwidgets/footer/css/footer.css

Hide the Sakai logo and style the links in a more neutral manner:

.sakai-footer img{display:none}
.sakai-footer .fixed-container a {
    color: #fff;
    text-decoration:underline;
}

Specific site/page looks

When creating a site we have the choice to change the appearance. The appearance files are contained in the dev/_skins directory.

Edit dev/_configuration/config.js to include the info on what site appearances are possible. In our case we need skins for the School of Business, The School of Medicine and Literature, Science and the Arts.

Site: {
  Styles: {
    bus: {
      name: "Ross School of Business",
      image: "/dev/_skins/bus/images/thumb.png",
      URL: "/dev/_skins/bus/bus.html"
    },
    lsa: {
      name: "LS&A",
      image: "/dev/_skins/lsa/images/thumb.png",
      URL: "/dev/_skins/lsa/lsa.html"
    },
    med: {
      name: "School of Medicine",
      image: "/dev/_skins/med/images/thumb.png",
      URL: "/dev/_skins/med/med.html"
    }
 }
},

Then create the first one, in this case the school of Business. I just copied the “original” skin and modified all the paths, file names and references, radically simplifying it. Here is the new structure.

Our requirements are modest – let’s say a logo on the page is good enough for unit identification. In order to add a logo to just the page (site, space, etc) I had to touch the following files:

bus.html – has the structure of the page in it. Only addition to the “original” model was the addition at the bottom of it:

<link rel="stylesheet" type="text/css"
    href="/dev/_skins/bus/css/page.css"
/>

It loads the page/site/skin specific skin late in the cascade. More on this matter later.

page.css – the content of this sheet is modest as well – since all we want to do is add a logo:

#sitetitle{
    background: url("../images/logo.png") no-repeat scroll right top transparent;
    padding: 10px 310px 0px 10px;
    min-height: 50px;
    text-align:left;
    vertical-align:middle;
}

The 2 images in the images folder are the logo.png that this site will be graced with and a thumbnail thumb.png that will be used as a link so that this theme can be picked by the user. Another image in the root folder is prev.png. This is an image sized to 520 × 366 approximately that will show when a user picks this theme in the theme picking panel. I used a screen shot of the finished page for that, then re sized it.

After I was satisfied with the modest page/site/space skin, I duplicated the bus folder a few times, named the other 2 to match the paths I specified in dev/_configuration/config.js, and then edited the *.html files to point to the corresponding *.css, changed the images, and done.

Here is the theme picking panel showing the thumbnails and previews:

And here are cropped parts of the three themes. Click on the images to see a full sized version.

More soon on what all of this means.

I) A skinning system needs to account for different user spaces

1. Institutional Gateway – traditionally has family resemblance to other institutional spaces. May have to obey institutional web style guides (logos, palettes, fonts)
2. Personal spaces – can have an a) institutional branding as 1 above, b) a sub-institutional branding depending on affiliation (College of Life Sciences branding) or c) self selection (“cool dude” branding) – these are in descending order of probability, ascending order of complexity (and narcissism).
   Personal spaces are any space that is restricted to just one user: spaces that index one of the following: 1) other spaces, 2) activity that takes place in other spaces, 3) spaceless activity that is meaningful to the user because of user’s relationship to that activity. Also any space where the user changes the dynamics of her relationship to the system: ie – changing one’s profile, notification options, etc.
3. Shared spaces
   Any space that is not private to one user *and* needs branding by virtue of what the space functionally is. Can have 1) institutional branding, 2) affiliation (Life Sciences) branding, 3) cascading affiliation (Life Sciences > Entomology) branding; 4) space type specific branding [a) t&l, b) research, c) club, ad hoc]. There is a cascade involved in that branding closest to the root determines branding unless lower nodes specifically override parts or all of the branding elements. How the cascade works in practice is left to the institution’s best judgement and restraint – but the ability needs to be there, it is important to the sense of self of the institution and it’s subunits.

II) A skinning system needs to account for different functional locales

A given functionality has unique rendering needs that it takes care of itself. All non specific needs are taken care of by skinning system. Widget A is very unique and has unique needs, but the UI idioms it shares with the rest are shared (Save button is blue and flush left, for example)

III) A skinning system needs to be easy to customize

1. enable and encourage customizations via a canonical mechanism, allow customizations via other means (but not facilitate them or even account for them, an institution should be aware of the risks involved)
2. common locales and procedures to customize should be provided, named appropriately, with a clear and documented cascade.

V) A skinning system needs to hint at what elements can best be skinned and to what degree it is recommended they be skinned. The institution can do as it pleases – but probably would appreciate the help and guidance.

VI) A skinning system needs to account for special user needs

A user should be able to override any and all skin definitions because of low vision, poor eyesight, color blindness, other factors. This has two facets: the skinning system should not trump user stylesheets (if that is how the system has chosen to deal with this issue), or the skinning system needs to provide a set of alternates, and the user choice of the system alternate is part of the user’s preferences.

Maybe now is the time to explore. As an experiment I pretended to be someone charged to change the gateway (and only the gateway). An effort was made to not even “think” about what would be the ideal process – but just to get the job done.

The results can be sen here and if that poor old tired seven year old Dell is down, in this screenshot

For the curious, the process is detailed below. The good news is that it took a about an hour (it shows!) and it would have taken less time if I actually knew how to use Photoshop and Illustrator. The bad news is that on reflection the path I took (out of ignorance or because it was the only path) was not optimal. More on this later.

dev/_css/sakai/sakai.index.css

Change watery background image to city scape

html {
  background: #093b52 url(../../_images/cityscape.jpg) top left repeat-x;
}

Hide header byline

.header-byline {
  display:none
}

Hide Sakai logo

.header-title img {
  display:none
}

Display an alternate banner via .header-title (adjusting width, height, padding and margins)

.header-title {
  color: #08415E;
  width:650px;
  font-size: 4.0em;
  float: left;
  margin: 25px 35px 25px 0;
  padding: 40px 0;
  background:url(../../_images/header-title-back.png) top left no-repeat
}

The “Register here” link is defined in this sheet as well, instead of in a global/core sheet

#register_here a {
  color: #000000;
  text-decoration: underline;
  font-weight: bold;
}

dev/index.html

The thumbnail is hardwired in the markup.

<img src="_images/panel_thumb.jpg" alt="__MSG__INSTANCE_NAME__" />

So either change the source, overwrite the image with a new one, or hide it and add a background to the container (.preview-box). Chose to change in the markup

<img src="_images/cityscape_panel_thumb.jpg" alt="__MSG__INSTANCE_NAME__" />

I also found I needed an additional canvas. For a zombie, sure, but it could have been a panel representing the institutional image of self, so added as a direct child of the body:

<div id="zombie"></div>

dev/_css/sakai/sakai.base.css

The background for all pages (other than index.html) is here

html {
  background: #75ADD7 url('../../_images/cityscape.jpg') top left repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 120%;
}

“Sign in” button of the gateway: like all buttons – depends on a sprite (retrieved from a common non-skinned context) applied and positioned in an outer and inner elements, changing the sprite may need a change of color of text.  The sprite is here:

dev/_images/button-sprite-5state.png

Changing the colors in the sprite might also entail changing the text color for the caption in the .s3d-button selector.

I left the buttons alone in this experiment.

footer files

Note: background of footer is a composite of inline CSS set in 1) devwidgets/footer/javascript/footer.js; 2) image background set in devwidgets/footer/css/footer.css and 3) background color in devwidgets/footer/css/footer.css

I left the footer alone in this experiment, except for the logo and links:

.sakai-footer .fixed-container img {
  display:none;
}

.sakai-footer .fixed-container a {
  color: #fff;
  text-decoration:underline;
}

At some point, for example, one of us snuck in the FCKEditor for editing a Sakai site description. The problem is, the display locales for the site description were not designed to render gracefully complex/long/enormous/gigantic  blocks of stuff, they were reserving space for the original plain text description only !

One solution is to strip the html and display the first “n” characters (KNL-133).   This solves the problem of the rich text description mangling the context (gateway sites list, site info, etc.).

And yet the original  information in the site description was of importance to the person who crafted it – how to make it available again? Enter the Entity Broker.  Since the context provides the ID of the site the RESTful url to the site’s information is:

‘/direct/site/’ + siteId + ‘.json’;

The rest is a matter of parsing the site JSON, extracting the useful info, and displaying it in (following Noah Botimer’s recommendation) a jQuery UI Dialog. The details can be found at SAK-15861 – the trickiest part was manipulating the dialog to display correctly in an iframed environment, but luckily the jQuery UI Dialog was very tweakable:

We considered other places where this would be useful. One obvious place was in group selection instances. When creating an assignment, targeting an announcement, restricting a resource access, etc.,  you can select what groups are involved.  A modal dialog displaying the group’s membership might be good (“Who is in this ‘The Scroungers’ group after all?”). As with the site description there is a handy url:

‘/direct/membership/group/’ + groupId + ‘.json’;

That can be parsed for useful data which can be displayed in a dialog, this time with the addition of a print preview link that might be helpful.

The combination of the Entity Broker and jQuery makes this absurdly easy, there is no actual, um, development in the traditional sense going on here.   A project we are almost done with at Michigan uses an “entitized”  provider to display to a user a list of the courses they are enrolled in, links to the corresponding site if any, as well as a way to navigate to past and future terms.  This was designed to address the “Where is my course site?” issue that the tab metaphor unfortunately produces as a side effect.

Once the heavy lifting was done entitizing the provider (thanks to Savitha!) the view component was not only fast but fun to produce. We used a velocity template but only to load the language strings into a json, otherwise it could have been just some html.

The urls in this case were, to retrieve the terms that the user was registered for courses:

“/direct/mycourses/terms.json”

This is used to build the navigation menu for the user. The current term and any the user picks is retrieved via:

‘/direct/mycourses/’ + termId + ‘.json’;

The json gets parsed and the UI gets constructed (blurred here because this is an actual person/persons, real CM data):

That is it.  This is happening in these msub  branches: CT-912 mycourses and CT-912 ctools-provider.

There are a few things that need a lot of work. For one, since this is mostly DOM manipulation (all of the information of value here is the result of DOM manipulation) and since it is sort of a central piece of information (what are your courses, where are the sites) it makes it both important and difficult to ensure it is accessible. Will be studying ARIA ways of addressing this.

1. it flattens the tool/site hierarchy so that they can coexist in the same breadcrumb
2. it serves up an iframeless experience
3. it elides many elements from the portal that would be noise in a small screen

Am working on several improvements to it for Sakai 2.7  under SAK-14827 and we are testing it at Michigan. It has been a very instructive experience constraining things to the small screen. What follows is a description of the changes, some tools and techniques that were useful, and some  observations from the preliminary testing.

The main tool turned out to be an iTouch that Chuck Severance donated to the lab. I tried several emulators such as iPhoney, Apple’s iPhone Simulator that comes with the iPhone SDK but there was no substitute for the actual thing.

Initially all I had in mind was polishing the portal, taking into account the screen size and the input device (your finger!). The PDA portal is served via a single Velocity template file present at a specific URL, so there was no need to do device detection – if you are there, you are using  a PDA (or, if you want to use a PDA you should use that URL). In the future it would be nice to route that  user agent to that URL automatically.

http://localhost:8080/portal/pda

The main complication was setting the viewport via the <meta /> tag. The official documentation is very telegraphic, but there is discussion about it. Eventually I settled on the following:

<meta name="viewport" content="width=device-width,
     user-scalable=yes,  initial-scale=1.0, maximum-scale=2.0"/>

The main issue here is font sizing after an portrait/landscape orientation change or after the user input zoom function takes place. Amazing to think that some people are using Javascript to detect the first.

The second task was to take all the styling references out of the template and out of the experimental portalstyles.css and create a CSS framework for the PDA. This entailed adding a pda.css + 3 images to each skin in the system, and querying in the template what was the skin in use per site.

Note: I have only checked into trunk the style sheets and images. The changes to the velocity template (pda.vm) and loginTool.java are being reviewed.

Now that the PDA portal was skinnable, it’s styles could be addressed via the CSS. The main preoccupations here were the following:

1. font sizing
2. adjusting padding/margins on links so that fingers of a moderate fatness could poke in the right place…
3. curtailing horizontal spread

The results for the gateway pages and the site/tool pages are pretty good. Below with the University of Michigan skin, site navigation.

The tool navigation:

And an actual tool:

I have craftily selected a tool for the screen-shot that works very well in this medium: the calendar summary from the excellent folks at Universidade Fernando Pessoa. Other tools are less fortunate.

A fun thing was adding icons for bookmarks. Following this tutorial I created a handful in no time. The iPhone actually takes care of all the glitz effects (corners, glassy look).

And this is what the icon looks like in the “desktop”

And what the Sakai skin looks like:

Preliminary testing with the iTouch indicates some problem areas.

1. Any tool that uses internal iframes is hosed.
2. The browser detection identifies the iTouch as Safari, and serves it the default rich text editor, with it is unable to use – it should instead serve a plain text area.
3. Cannot do attachments because the <input type=”file” /> is disabled in the iTouch.
4. Not all tools render nicely, lots more to be done in this area.

If you are not very interested in the details  - the uncombed and disreputable skin is availiable here

If you want to know how we got to this and the shortcomings of this approach, read on.

We will begin with a simple tool view  - the Announcements list. What it looks like in a LTR context:

What the direction:rtl applied to .portletBody gets us. Am keeping the language as English.

Some nice things: the toolbar has been rearranged. The columns of the announcement table have been flipped correctly. Block elements are now flush right, such as the <h3>Announcements</h3>. The label of the view navigator select is not to the right of the select. The select itself is reoriented. The list paged lists, from right to left: “first page, previous page, next page, last page” correctly as the entire block has been flipped.

Some things that will need to be addressed: a) the pipes between the toolbar items look wacky and need to be aligned right; 2) the navigation panels need to be flipped ( a sad irony: if the layout of these and the toolbar  had been a table our work would be done); 3) the text direction of the cells inside the table needs to be adjusted.

The toolbar

Align the toolbar right. We will be working in the new rtl/tool.css):

.navIntraTool {
	text-align: right;
}

Add a border to the span child of the first list element:

}
/*special style for the first item, namely no border-left*/
.navIntraTool li.firstToolBarItem span{
	/*border:none;*/border-left:1px solid #ccc;
}

and take the border away from the last:

.navIntraTool li:last-child span{
	border:none
}

Since the design of the toolbar did not take into account a RTL possibility we had to resort to a pseudo class to identify the last element. We will see this problem elsewhere.

The navigation panels

The layout of these is set in tool_base.css. We will override in rtl/tool.css:

.viewNav{
	float: right;
}
.listNav{
	float: left;
}

The table list

/*skinned header of standard tab. data table*/
.listHier th, .listHier td{
	text-align: right !important;
}

The !important is needed to override the !important in tool_base.css - a bad decision that now needs to be dealt with.

The end result:

And in the target language:

Some issues remain with the navigation panels – reversing the floats did not exactly reverse the position, resulting in some inexplicable whitespace.  Someone help, please.

To recapitulate before we take on a more complex view of this tool: a) any series that identifies a first item also needs to identify the last; b) floats are not always totally reversible.

Forms and inputs

Some problems regarding the layout of the input, label and required marker troika. The orientation of the three is just not working due to floats. An example from create a new announcement.

So we rearrange the floats and display attributes, paddings, margins (if you are redoing an existing skin, look for some of these definitions elsewhere in the sheets if your results do not match):

.shorttext label{
	float:none;
	display:block;
	padding:0;
	margin:0;
}
.shorttext .reqStar{
	float:right;
	margin-right:-7px;
}
.longtext label{
	float:none;
	display:block
}
.longtext label .reqStar{
	float:right;
	margin-right:-7px;
}

So:

And in Arabic:

The other input types render correctly without any tweaking (this is also from create a new announcement):

While on the subject of inputs, the following is also needed if there is to be mixed RTL and LTR content:

input, textarea{
	unicode-bidi: override;
}

A quick glance over the core tools and it seems most rendering now is OK. There will be exceptions where the developer has been forced to apply sui generis layout or styles because of the paucity of the default styles. There will also need to be addressed – please leave some comments where that is the case, thanks!

Off hand – here are some locales that need more work because of these and other reasons:

1. Filtering controls in Schedule list view.
2. “Add” menu in Resources – text is misaligned.
3. Certain icons are facing in the wrong direction – such as disclosure triangles. These will need to be replaced in the file system when they are inline images, or in the skin when pulled as background images.
4. The FCK Editor – needs configuration – information on configuring the FCK Editor for RTL is here. There are language files for Arabic and Hebrew, Persian as well. Probably a lot of other stuff that a native speaker could figure out needs to be tweaked.
5. Placement of icons inside certain blocks needs to be tweaked – see alertMessage etc. 

The uncombed and disreputable skin is avaliable here.

Site navigation

Some portal clean up: the pipes between site links still reflect a LTR orientation.

Change the location of the borders:

/*links to other sites*/
#siteLinkList a,#siteLinkList a:link,#siteLinkList a:visited{
    color: #fff;
    padding: 2px 6px 2px 4px;
    text-decoration: none;
    /*border-right: 1px solid #fff;*/border-left: 1px solid #fff;
}

and take borders away from the last link (which is the left-most one):

#siteLinkList li:last-child a{
    border:none
}

Portlet titles

The portlet titles also need sorting, flip the floats and text directions :

.portletTitle .title{
	/*float: left;*/float: right;
}
.portletTitle .title a{
	/*float:left;*/float:right;
}
.portletTitle .action{
	/*text-align: right;*/text-align: left;
}

So now the direction is correct:

Presence

Presence also shows the old LRT orientation:

On the portal level – adjust the title:

#presenceTitle{
   font-size: .7em;
   /*text-align: left;*/text-align: right;
   margin-left: .5em;
}

The presence list is inside of an iframe – and as such it is a tool, so it will be a useful segue to RTL’ng the tools. As with the portal we are adding the direction attribute to the first child of body (.portletBody).

.portletBody{
   direction:rtl
}

This will get us a lot of LTR > RTL changes for free in all of the tool descendants as we will see later. Except in the presence list as that doc does not have a .portalBody wrapper!!! Since presence does not have a .portletBody we need to add direction attribute to the list itself and fiddle with the paddings:

/*below for "presence in chat" functionality*/
.presenceList{
   font-size: .8em;
   list-style: none;
   margin: 0;
   direction:rtl;
   text-align:right;
   /*padding-left: .1em*/padding-right: .1em;
}

.presenceList li {
    /*padding: 0 0 0 .7em;*/padding: 0 .7em 0 0;
    margin-bottom: .2em;
}

Looks better now:

The results this far:

Next post – the tools in all their glory.

Now there is a Arabic translation (in trunk), so I thought I would go through the process again and hope it is useful. The framework has changed substantially also, so it was due. In this post I will outline the steps to turn a LTR portal (the Michigan CTools) into a RTL portal for some hypothetical university where Arabic is the main language. Disclaimer: I took Arabic in college, but it is long forgotten – so I am relying on random boilerplate and on iGoogle’s translator service for example strings. Don’t read too much into it!

In a future post I will go through one or two tools in a similar fashion.

1. Use trunk. Add ‘ar’ to the locales attribute in sakai.properties, start tomcat.
2. Login as admin. Create a user, give him a RTL name. In this case I used داود سيلڤَر (with a Latin id if you are not a RTL speaker, I used daud).
3. We will want داود to mess around with tools as ‘mantain’ to get the full experience so create a site and add him as mantain. I used boilerplate Arabic for site title and description.
4. Login as ‘daud’
5. Change your Preferences > Locales to ‘Arabic’

First thing – let’s add a direction attribute to first child of the portal body:

#portalOuterContainer{
	direction: rtl;
}

This gets us started. All HTML elements that inherit this attribute and use it will reverse direction. Now we need to address the elements that are not affected.

Some things will need to be addressed substantially: 1) the orientation of the mast head needs to be fixed so that from RTL: logo, banner, login; 2) site list orientation; 3) the portlet title (Announcements) also needs to be reconfigured as well; 4) finally – the portal content needs to be from RTL: tool links, content.

Reorienting the mast head

We have this mess to contend with:

I have outlined the three components in red. From LTR: #mastLogo, #mastBanner, #mastLogin. They are all floated. We need to reverse the order, so let’s reverse the float:

#mastLogin{
  /*float:right*/ float:left
}
#mastBanner{
  /*float:left*/float:right
}

That is it – really. Am omitting all of the other attributes. Which gives us:

The order of labels and inputs is following the direction attribute of the body. Everything else needs work. Am going to hide #mastLogo because we do not need it. Any graphic element can be poked in as a background of any of the (embarrassingly numerous) other canvases available. I will also add different logos and background colors.

So – new image for banner_inst.gif and reverse the padding orientation on #mastLogin:

#mastLogin{
	float: left;
	text-align: right;
	/*padding-right: 15px;*/padding-left: 15px;
	vertical-align: top;
}

Which leaves us with:

The language bundle seems to be missing the Arabic equivalents for the input labels, but the position basics are in place: logo to the right, login to the left.

Reorienting the site navigation

We are left with:

Swapping the floats (links and select) reflect the importance of the 2 in the RTL context:

#linkNav{
	/*float:right*/ float:left
}
#selectNav{
	/*float:left;*/ float:right
}

Although the the direction:rtl in the body gets us the RTL select, it does not flip the orientation of the inline list that the site links are, a list is a list and has an order. We will need to be more devious…

#siteLinkList li{
	display: inline;
	float:right;
}

Reorienting the content

#toolMenuWrap {
     border-right:2px solid #FFFFFF;
     color:#000000;
     /*float:left;*/ float:right
     padding:0 0.5em 0 0;
     text-align:right;
     width:9.6em;
}

and the margin of the other

#content{
	padding: 0;
	margin-top: .5em;
	/*margin-left: 11em;*/ margin-right: 11em;
}

and the text-align of the #toolMenu list items:

#toolMenu li{
	margin: 0;
	width: auto;
	padding: 0;
	border: 1px solid #fff;
	/*text-align: left;*/text-align: right;
}

Not bad, although quite a bit of clean up left to do (the presence block, the portlet titles (which are in the portal doc of all things) for example, the footers, etc.) And being ignorant of the actual use and needs, quite a few things I have overlooked as well – do leave comments setting me straight. I will upload the finished skin later. I will also address soon the skinning of the tools (gulp).