localize sakai skin june 14, 2007 julie mai, stanford university gonzalo silverio, university of...
TRANSCRIPT
![Page 1: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/1.jpg)
Localize Sakai SkinJune 14, 2007
Julie Mai, Stanford University
Gonzalo Silverio, University of Michigan
![Page 2: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/2.jpg)
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
![Page 3: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/3.jpg)
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
![Page 4: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/4.jpg)
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
![Page 5: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/5.jpg)
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!”
![Page 6: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/6.jpg)
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”
![Page 7: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/7.jpg)
Examples of Localized Skins
Out-of-the-box Sakai skin (v.2.3.x)
![Page 8: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/8.jpg)
Examples of Localized Skins
Lubeck University of Applied Sciences, Germany
![Page 9: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/9.jpg)
Examples of Localized Skins
Yale University, USA
![Page 10: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/10.jpg)
Examples of Localized Skins
Stockholm University, Sweden
![Page 11: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/11.jpg)
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
![Page 12: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/12.jpg)
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
![Page 13: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/13.jpg)
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
![Page 14: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/14.jpg)
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
![Page 15: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/15.jpg)
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
![Page 16: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/16.jpg)
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
![Page 17: Localize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan](https://reader036.vdocuments.net/reader036/viewer/2022062720/56649f125503460f94c25b1f/html5/thumbnails/17.jpg)
Questions? Suggestions?