UI Panel:Default Skins and other fun

Aaron Zeckoski

Virginia Tech

Aaronz@vt.edu

2

Default Skin WG

• Formed after the Austin conference– First meeting in December 2005

• Tracked all our work in confluence– http://bugs.sakaiproject.org/confluence/display/SKIN

3

WG Goals

• Create a default skin for Sakai 2.2– The default skin should be ready by June 2006.

• The WG will organize a contest to collect skins from the community and allow voting on these skins.

• The skins will be presented at the Vancouver conference in Summer 2006.

4

Issue 1: CSS needed to be refactored

• Right off the bat we realized that the CSS selector codes needed to be redone before skinning in Sakai would be reasonable– Of course this took a long time– Required us to mimic the 2.2 environment

in 2.1.2

From: http://www.w3.org/TR/CSS21/selector.html

5

CSS file changes

• Renamed many selectors

• Changed the layout of the portal to increase flexibility and give designers more control

• Added comments for every selector– Most comments name the children of that

selector

From: https://source.sakaiproject.org/svn/reference/trunk/library/src/webapp/skin/default/

6

Code changes

• Once the CSS was refactored we had to update the Sakai tools source code to use the new CSS

• This was a huge effort which was largely done by Gonzalo Silverio from Michigan

7

Clean / minimal skin created

8

CSS bottomline

• Easier for web designers to create a skin in Sakai 2.2

• More control over the look and feel than previous versions of Sakai

• Many thanks to Gonzalo for lots of great work on the CSS!

9

Issue 2: Too hard for web designers to run Sakai

• Problems– Too hard for web designers to install Sakai– Sakai demo version has the skins inside a

war file where you can’t edit them easily

• Solution– Created a Quickstart package which

makes it easier for web designers

From: http://bugs.sakaiproject.org/confluence/display/SKIN/Quickstart+Sakai

10

Sakai Quickstart

• Extensive instructions for multiple platforms

• Basically:– Download a zip file– Install Java– Extract file– Run Sakai– Edit skins

From: http://bugs.sakaiproject.org/confluence/display/SKIN/Quickstart+Sakai

11

Recommended tools

• Created a set of software recommendations for CSS work– TopStyle Lite 3.10 -

http://www.bradsoft.com/download/ (PC only)– Xyle Scope - http://www.culturedcode.com/xyle/

(Mac)– Firefox Web Developer Extension -

http://chrispederick.com/work/webdeveloper/– Firebug (CSS debugging) -

https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843

12

Issue 3: Method of collecting and evaluating skins

• Original plan was to just create the new skins within the workgroup and solicit feedback from the community

• Decided to try turning this into a contest to see if we could get more ideas

13

Default Skin Contest

• Created a contest to try to encourage community participation and raise awareness of skinning

• Contest took a lot more work than we had originally thought it might

• Less community interest than we had hoped

14

Contest logistics

• Wrote extensive contest rules– Took much longer than we thought

• Created tools for the contest– Skin submission– Skin voting– Skin administration– Results viewing

From: https://sakaiproject.org/skin/

15

Contest Issues

• Took much longer to complete the CSS refactoring and tool refactoring than we had hoped

• This delayed the contest by well over a month– We had to reduce the amount of time that

skin designers had to make skins and shorten the voting period significantly

16

Contest Results

• Lower number of skins submitted than we had hoped– 9 entries total, only 6 work in Sakai 2.2

• Lower voting than we had hoped– 44 users voted, 230 votes total

From: https://sakaiproject.org/skin/results.php

17

Summary of Default Skin WG

• Major improvements to the CSS in the portal and tools in Sakai

• Clean skin to start from

• Quickstart package to help web designers reskin Sakai

• Low participation in the contest

• Identified a new default skin for 2.2

18

Next steps?

• The CSS selectors should stay mostly the same (for awhile anyway)

• Look at the Default Skin WG pagehttp://bugs.sakaiproject.org/confluence/display/SKIN

• Create your own skin(s) for your institution

• Get involved in the community!