I’ve been tasked with the (un)envious job of skinning our installation of uPortal which we’re using to develop a students’ portal and have been frustrated at the lack of online documentation available for guiding Tomcat n00bs like me at how to do it.

The online documentation takes you so far, and outlines the various steps:

1. Set up a development environment (Consider the uPortal Quickstart)
2. Copy the entire skin directory
3. Rename the skin directory
4. Register the new skin in the portal
5. Make modifications to skin files
6. Test the new skin in a test environment
7. Move the new skin to a public environment
8. Restart the portal server
9. Verify the new skin within the portal

But it’s the finer details that I’ve struggled with. Thankfully we’ve got a contract with uPortal consultants Unicon who came up trumps last night with a top tip that has sped up development incredibly.

Creating a new skin directory

Steps 2 and 3 above instruct you to “Copy the entire skin directory” and “Rename the skin directory”.  Here’s what I did.

uPortal comes with a default theme (called universality) and two skins (uportal3 and ivy). In uPortal themes control the page structure and layout, while skins control the design of themes.

For our purposes the ivy skin was close to what we wanted to achieve so I just copied the ivy folder within the uPortal war source directory (\uPortal-3.1.1\uportal-war\src\main\webapp\media\skins\universality\) and renamed it standrews.

This new standrews directory contains the following files and folders:

• [images]
• ivy.css
• ivy_base.css
• ivy_jsr168.css
• ivy_legacy.css
• ivy_thumb.gif
• jquery.css

The next step was to rename any instance of the old skin name (ivy) with the new (in this case: standrews).  So we now get:

• [images]
• standrews.css
• standrews_base.css
• standrews_jsr168.css
• standrews_legacy.css
• standrews_thumb.gif
• jquery.css

But it doesn’t stop there.  There are also references to the theme within the standrews_base.css file.  I used my web editor of choice (Blumentals WeBuilder 2010) to replace within these files an instance of ‘ivy’ with ’standrews’.

The standrews_thumb.gif file shows a thumbnail screenshot image of your new theme, but since I’ve not created it yet I simply edited the existing file to make it look different from the original.

Register the new skin

The next step is to register your skin within uPortal by editing the skinList.xml file within the uPortal-3.1.1\uportal-war\src\main\webapp\media\skins\universality\ directory.

It’s simply a case of copying the XML entry for ivy and making the necessary adjustments, e.g.

<skin>
<skin-key>standrews</skin-key>
<skin-name>St Andrews</skin-name>
<skin-description>New design</skin-description>
</skin>

Redeploy uPortal

Redeploying uPortal (ant deploy-war) and restarting Tomcat will now give you the option of your new skin.

So far so good.

Modify skin files

But it’s step 5 that I was struggling with: make modifications to skin files.

The problem is that once I’d discovered where Tomcat stores the files: apache-tomcat-6.0.18\webapps\uPortal\media\skins\universality\ (and accounting for uPortal minifying the files too) whenever I made a change to a CSS element within, for example, standrews_base.min.css and then refreshed my browser nothing would happen.

Turn off uPortal caching

And I couldn’t find any documentation to explain that uPortal itself was caching the CSS and JavaScript files used by the skin.  Not the browser, the application.

I fired off another email to Unicon and within a couple of hours (they’re in the US) I got the reply I was looking for:

The caching can be turned off by commenting out a couple lines in the web.xml file.  The web.xml file can be found in the following locations:

• /path/to/uportal-war/src/main/webapp/WEB-INF/web.xml
• /path/to/tomcat/webapps/uportal/WEB-INF/web.xml

Commenting out filter-mapping for *.css and *.js disables the caching. The code that needs to be commented is around line 186. This is what it looks like in my environment.

<!-- Comment out filter for development purposes
<filter-mapping>
<filter-name>pageCachingFilter</filter-name>
<url-pattern>*.js</url-pattern>
<url-pattern>*.css</url-pattern>
</filter-mapping>-->

I then redeployed uPortal and that was it.  That was the missing link.  Now I can edit the CSS files, refresh my browser and there are the changes.

That’s one piece of information that would be a welcome addition to the JA-SIG Wiki.

Gareth @ St Andrews

At last! the presentations from the last Scottish Web Folk meeting in Glasgow on Friday 17 April 2009.

Flickr

Robert Morrison’s presentation about building “an institutional image request interface on Flickr’s API with PHP”.

Microsoft SharePoint

Frank MacDonald’s presentation about whether Microsoft SharePoint is suitable as an intranet CMS.

CSS Frameworks

Gareth Saunders’ presentation about using CSS Frameworks, with a particular focus on Blueprint CSS.

Everything goes with PHP sauce

Well, I clearly had too much time on my hands this afternoon for me to come up with the above poster, which is now proudly displayed on our office wall!

Gareth @ St Andrews

On Monday Steve and I attended an Opera Software University Seminar hosted here at the University of St Andrews, one of many stops on their world tour of educational institutions.

I found it an interesting and encouraging hour long presentation which looked at the Opera range of browsers (did you know that there are four main products: Desktop, Embedded, Mini and Mobile, which all use the same rendering engine?), Web Standards and a brief dive into HTML 5 and CSS 3.  I’ve blogged about it elsewhere if you want to read more.

On our way out of the PC classroom (it was hosted in the School of Computer Science) in exchange for a completed feedback slip we were given a FREE umbrella. I know! FREE!  We didn’t even have to download it from one of over 80 download locations.

Comparisons

However, the question I know you’re all asking: how does it compare with the St Andrews Web Team’s Mozilla Firefox umbrella, which was purchased from the Mozilla store a few months ago?

Mozilla Firefox umbrella next to the Opera umbrella

Size

As you can see from the image above the Opera brolly is considerably smaller than the more cumbersome Mozilla brolly.

That observation correlates with my experience of the two browsers, currently Firefox is hogging 236 MB of RAM, while Opera is displaying the same three pages using only 34 MB. This is clearly the Opera Mini of umbrellas.

Opened each fares as you would expect: the Mozilla browser is considerably larger offering protection for more than one user.  The Opera Mini umbrella is clearly designed for single tab user use.

Mozilla Firefox umbrella open

Opera Mini umbrella open

Rendering

Opera has clearly taken HTML 5 and CSS 3 to heart with this umbrella as in particularly windy situations the brolly dynamically re-renders itself … mostly inside out.  Ironically, for such a stable browser their umbrella does have a tendency to ‘crash’ alot in bad weather.  I suspect, however, that the weather we threw at it just had the wrong !DOCTYPE.

The Firefox umbrella on the other hand does appear to bend and sway a little but resolutely and reliably continues to do its job.

User interface

Both umbrellas feel robust enough, although I have to say that I would feel more confident taking the Firefox brolly out in the winds whistle down the streets of St Andrews.

In fact, in tests the Firefox umbrella proved to be easier and quicker to use simply due to the sturdiness of the fastenings and other hardware.

It is said that the first umbrella was likely to be nothing more than some largely-waterproof fabric stretched over a wooden or wire frame, and both models follow this tradition in terms of construction.  However, again, the Firefox brolly feels more robust with the stretched fabric stitches into the end of the spokes; the Opera brolly relies on small metal ‘cups’ slotting over the end of the spokes, which are too easy to knock off.

Security

Clasps on Firefox and Opera umbrellas

Security is no less important on an umbrella as it is on a browser, and both models’ security features are built to impress.

The Mozilla model uses the traditional ring on a piece of elastic which wraps snuggly around the shaft of the umbrella and afixes on a button, while the Opera model relies on a vecro fastening.

One particularly impressive security feature though was the clear plastic sheath that the Opera umbrella came in.  It keeps your umbrella safe and secure when not being used.

Open Source

As an open-source product you are welcome to take the code of Mozilla Firefox and redevelop it.  While the brolly is available to anyone within the Web Team we discourage any modifications to the overall structure, and as far as I’m aware there are currently no official add-ons for the brolly.

Opera is not an open-source product, which is reflected in our need to go directly to Opera to obtain it on request.  Although, as I understand it, 3rd parties such as Oxfam may be able to sign up to distribute copies.

Conclusion

Other than the fact that I clearly have too much time on my hands during the lunch hour, I’d say that the Firefox umbrella is probably the one you want if you need to stay dry (in all sorts of weather), although it is more cumbersome. Perhaps, a bit like Firefox Portable.

The Opera umbrella on the other hand is wonderfully compact, so you can take it anywhere you want … a bit like their Opera Mini and Mobile browsers.

Interesting article “How I Work: Bill Gates” about how Bill Gates (you know, that bloke with the software house) works.  Good insights into his productivity methods.

It seems to boil down to:

1. Three monitors (email, current work item, browser)
2. Email filtering
3. Ignore “the toast” – pop-up email notification
4. Email, Desktop folders and Calendar instead of to-do lists
5. SharePoint to collaborate on projects
6. Search
7. Whiteboard

I can certainly vouch for three monitors, email filtering and the whiteboard.

Gareth @ St Andrews

I meant to post this months ago, but for anyone that wasn’t there — or indeed anyone who was, but chose to sit outside in the sunshine rather than sitting indoors listening to a 45 minutes presentation on institutional repositories (you know who you are!) — the streaming videos are still available to watch on the University of Aberdeen website: www.abdn.ac.uk/web/iwmw/

Enjoy!

Don’t you just love it when you discover Information Architecture topics in non-IA-specific locations.  I saw these and thought of you folks:

I LOVE PROGRESS BARS
http://www.goodiebag.tv/episodes/11_progress_bars.htm

AMERICANS LOVE LISTS
http://www.goodiebag.tv/episodes/05.htm

I can’t vouch for the appropriateness of any of the other film clips on that site, but those sure made me smile.  AND … I think watching them constitutes as research.

These are my slides from today’s meeting.  I was looking at:

• Improvement 1 – Adding hCard to Contact Details and hCalendar to Events
• Improvement 3 – Search Auto-discovery
• Improvement 6 – Add hint text to search boxes

It’s published under a Creative Commons licence (details on the slideshow) so feel free to use it and adapt it as required.

Cheat sheets

These are a few of the cheat sheets that I use with these technologies:

Microformats

• Brian Suda’s Microformats cheat sheet
• Added Bytes’ Microformats cheat sheet

jQuery

• jQuery 1.2 cheat sheet

OpenSearch

• OpenSearch 1.1 (Draft 3) cheat sheet

Gareth @ St Andrews

A bit late (perhaps) to post this (as the meeting is being held tomorrow), but here’s the information about the next meeting of the Scottish Web Folk:

When

Friday 12th September 2008

1030-1200 Parallel sessions on T4 SiteManager and SiteStat

1200-1300 Lunch

1300-1600 Main session

Where

University of Glasgow, No 2 University Gardens

Both the morning and afternoon sessions will be held in rooms in No. 2 University Gardens.

You can also get information about travel arrangements as well as a full campus map at Travel into Glasgow. University Gardens is at D15 on the full map.

T4 parallel session will be held in Room 208, 2 University Gardens
SiteStat parallel session will be held in Room 209, 2 University Gardens

Main afternoon session will be held in Room 208, 2 University Gardens

About

The morning T4 session is going to have a more technical spin, looking at the API, brokers, handlers etc. Colin might want to chip in with what he has planned for the SiteStat folk.

The afternoon session includes a discussion about the ‘10 improvements’ presentation that Mike Nolan (from Edge Hill University) presented as a Parallel Session at the IWMW08. You can see the slides from the presentation for more info.

Proposed agenda

1030-1200 Simultaneous T4 / Sitestat Sessions (Similar to the May meeting)

1200-1300 Lunch / Afternoon session arrivals

1300-1310 Welcome
1310-1330 IWMW08 Feedback / Discussion including Brian K’s offer of consultancy
1330-1340 Improvement 1 – Adding hCard to Contact Details
1340-1350 Improvement 2 – Adding hCalendar to Events
1350-1400 Improvement 3 – Feed Auto-discovery
1410-1420 Improvement 4 – Search Auto-discovery
1420-1430 Improvement 5 – Minimise JS/CSS with YUI Compressor

1430-1500 Coffee

1500-1510 Improvement 6 – Enable gzip compression
1510-1520 Improvement 7 – Add hint text to search boxes
1520-1530 Improvement 8 – Optimise page loading
1530-1540 Improvement 9 – Make the most of Google – alerts, Webmaster tools, etc.
1540-1550 Improvement 10 – Custom 404 page
1550-1600 General discussion / Close

FamFamFam Silk Icons

I was recently needing a number of small (16 x 16 pixel) icons for a project and came across the Silk Icons collection from FamFamFam, which I can thoroughly recommend.

“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that … This work is licensed under a Creative Commons Attribution 2.5 License.

The only icon that I couldn’t find amongst that positive smörgåsbord of iconic loveliness was one for a QuickTime movie, but apart from that it’s served me well for what I’ve required.

Shopping cart icon

While on the topic of icons if you’re looking for an icon for a shopping cart (and let’s face it, who isn’t these days?) there’s an attractive one on offer for free at Bartleme Design.