Upload
nelson-jordan
View
215
Download
1
Embed Size (px)
Citation preview
Localize Sakai SkinJune 14, 2007
Julie Mai, Stanford University
Gonzalo Silverio, University of Michigan
Agenda
• Survey results• Examples of localized skins• Getting started: where to begin?• Default Sakai skin: what can be modified?• Best Practices• Helpful tools and resources for localizing skin
Survey Goals
Better understand the process of localizing out-of-the box skin:
• Who is doing this work
• How long is the process
• Tools and resources used
• Areas for improvement
Survey Results
• Number or respondents: 18
• Wide range of skills– Instructional technologist, user support, graphic designer, webmaster,
software engineer, UI developer– 34% have minimal experience with X(HTML) and CSS, rely on WYSIWYG
editor
• Types of modifications (based on v2.3.x):– 53%: slight modifications to the layout, color scheme, typography;
gateway page: major modifications– 42%: complete rework of the default skin
Survey Results• Time spent on localizing skin:
– Varies depending on tasks: 1-3 days to > 1 week
• Tools used:– Dreamweaver, BBEdit, EditPlus, Notepad, TextMate, Photoshop, Fireworks,
Firebug, CSS Viewer
• Suggestions for improvement:– “It works very well for us! It’s pretty good and straightforward”– “Since our instance of Sakai is shared between 19 schools, we want our overall
brand to be part of the initial logon but individual sites are branded based on the sponsoring institution so each institution also has its own skin. It works well for us!”
Survey Results• Suggestions for improvement (continued):
– Improve documentation:• nearly 50% didn’t know documentation existed (“Knowing about documentation
would have helped”)• make it more detailed: “to change the color of this link, go to line 45 in
portal.css”• “a simple explanation of UI changes between versions is most helpful for
upgrading an institutional skin to a new Sakai version”– More variety in out-of-the-box skin templates that have different layouts– Have a Sakai tool for administrators that allow you to easily make CSS changes
through a web interface– “Move away from frames would be nice”
Examples of Localized Skins
Out-of-the-box Sakai skin (v.2.3.x)
Examples of Localized Skins
Lubeck University of Applied Sciences, Germany
Examples of Localized Skins
Yale University, USA
Examples of Localized Skins
Stockholm University, Sweden
Getting Started• Download “sakai-demo” at http://sakaiproject.org (pre-built Sakai with Tomcat
and a simple configuration):
TOMCAT_HOME/webapps/library/skin
-tool_base.css
default-portal.css-tool.css-access.css images
Getting Started• Download skin documentation associated with each Sakai release in
Confluence: sakai_skin.doc (Changing the appearance of the Sakai Portal and Tools) https://source.sakaiproject.org/svn/reference/trunk/docs/architecture/
• Other helpful documentation in Confluence: sakai.properties (Sakai 2.4 Admin Guide - Branding and Identity) http://bugs.sakaiproject.org/confluence/display/DOC/
Sakai+2.4+Admin+Guide+-+Branding+and+Identity
Sakai Skin Setup http://bugs.sakaiproject.org/confluence/display/ENC/Reskinning+Sakai
Default Skin Demo: What Can Be Modified
• Setting up• sakai.properties settings• Modifying the skin - demo of small / medium / large effort and change
• To follow remotely:– http://burgoo.ummu.umich.edu/portal
Best Practices
• Save copy of default folder / backup your work• Comment your local changes• Develop for IE first and then for other more compliant browsers
(IE 7 issues)• Avoid overlapping background and foreground images• Beware of float drops, inheritance, other flammable materials
Helpful Tools and Resources
• A good CSS editor• Firefox extensions/add-ons:
o FireBug: “Inspect” to understand relationship between markup/css o Web Developer Toolbar: adds a menu and a toolbar with very helpful tools such as
“Outline Block Level Elements”.o View Source Chart: display a page’s source code in a more readable format.
• HTML validator (also validates css)
• Production/Pilot Deployments of Sakai Worldwide:o View other skins for inspiration
http://bugs.sakaiproject.org/jira/secure/IssueNavigator.jspa?mode=hide&requestId=11294
• DG: User Interactiono Sakai Discussion Group on User Interaction
http://confluence.sakaiproject.org/confluence/display/UI/Home
Helpful Tools and Resources• Web Typography:
o Web Style Guide: Typographyhttp://webstyleguide.com/type/index.html
o HTMLSource: Web Typographyhttp://www.yourhtmlsource.com/text/webtypography.html
o Elements of Typographic Style Applied to the Webhttp://webtypography.net/toc/
o Typography for the Webhttp://www.flywebmaster.com/webdesign/tips/typography.php
• Web Graphics:o Web Style Guide: Graphics
http://webstyleguide.com/graphics/index.html
o Web Graphics Basicshttp://www.efuse.com/Design/web_graphics_basics.html
• Web Color:o moreCrayons
http://www.morecrayons.com
o Lynda.com web-safe color pallettehttp://www.lynda.com/hex.html
Questions? Suggestions?