1. UI Panel: Default Skins and other fun Aaron Zeckoski Virginia Tech Aaronz@vt.edu

2. 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/SKINhttp://bugs.sakaiproject.org/confluence/display/SKIN

3. 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. 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.htmlhttp://www.w3.org/TR/CSS21/selector.html

5. 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/ https://source.sakaiproject.org/svn/reference/trunk/library/src/webapp/skin/default/

6. 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. 7 Clean / minimal skin created

8. 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. 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 http://bugs.sakaiproject.org/confluence/display/SKIN/Quickstart+Sakai

10. 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 http://bugs.sakaiproject.org/confluence/display/SKIN/Quickstart+Sakai

11. 11 Recommended tools Created a set of software recommendations for CSS work –TopStyle Lite 3.10 - http://www.bradsoft.com/download/ (PC only) http://www.bradsoft.com/download/ –Xyle Scope - http://www.culturedcode.com/xyle/ (Mac)http://www.culturedcode.com/xyle/ –Firefox Web Developer Extension - http://chrispederick.com/work/webdeveloper/ http://chrispederick.com/work/webdeveloper/ –Firebug (CSS debugging) - https://addons.mozilla.org/extensions/moreinfo.ph p?application=firefox&id=1843 https://addons.mozilla.org/extensions/moreinfo.ph p?application=firefox&id=1843

12. 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. 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. 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/https://sakaiproject.org/skin/

15. 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. 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.phphttps://sakaiproject.org/skin/results.php

17. 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. 18 Next steps? The CSS selectors should stay mostly the same (for awhile anyway) Look at the Default Skin WG page http://bugs.sakaiproject.org/confluence/display/SKIN Create your own skin(s) for your institution Get involved in the community!