Creating a Plone 3 theme product on the file system can be notoriously daunting for beginners. A lot of documentation exists, but it is somewhat fragmented and can be confusing. I’ve been designing and skinning themes for Plone for quite sometime now and thought it would be nice to have a quick guide on how to create Plone 3 theme products on the file system.

There are essentially 3 things that you need to do which involve:

1. Moving viewlets
2. Modifying viewlets
3. Adding theme files

To start, you should first create your theme through the web in the ZMI and place all of the files in the /custom folder. Once your design is finalized, you can then move everything into your product on the file system. I like to use FSDump to dump files from the ZMI into the file system.

Through the web

1. Moving viewlets

Plone’s default layout is composed of viewlets such as the globalnav (top navigation) that are controlled by viewlet managers. These viewlets can be re-arranged by re-ordering the viewlets through the web by appending @@manage-viewlets to the end of your site URL: http://[your_plone_site]/@@manage-viewlets.

For a quick reference on what each viewlet is, check out Where is What in Plone 3.

2. Modifying viewlets

To modify the templates for each viewlet, you’ll need to go into the ZMI to /portal_view_customizations.

3. Adding theme files

Files such as images and CSS should be placed in the /custom folder within the ZMI

The file system

Once your design is finalized, you need to transfer all of the files and layout changes from the web to the file system to create a Plone 3 theme product.

You should use Paster to generate the initial framework and files for your Plone 3 theme product on the file system. For more information on how to use Paster, check out How to Create a Plone 3 Theme Product on the Filesystem.

1. Moving viewlets

Re-ordering viewlets through the web is quite easy using the @@manage-viewlets option. However, when creating a product on the file system, you’ll need to re-order these by calling specific rules within profiles/default/viewlets.xml, which is created by Paster.

Let’s say you moved the personal_bar to the top of the layout. You need to locate the viewlet manager that contains the viewlet using @@manage-viewlets.

By default, plone.personal_bar is managed by the plone.portaltop viewlet manager. A rule needs to be applied that re-orders the plone.personal_bar viewlet within the plone.portaltop viewlet manager.

Here is the rule within viewlets.xml:

...

 <order manager="plone.portaltop" skinname="[YOUR_PLONE_THEME]"
     based-on="Plone Default">
     <viewlet name="plone.personal_bar" insert-before="*"/>
 </order>

...

This rule says to place plone.personal_bar before all other viewlets that are managed by the plone.portaltop viewlet manager.

For more detailed information on moving viewlets, check out Move Viewlets Between Viewlet Managers.

2. Modifying viewlets

Any viewlets that you customized in /portal_view_customizations through the ZMI goes into the browser/ folder of your theme that was created by Paster.

Let’s say you customized the footer and global_sections. You’ll need to add the footer.pt and sections.pt templates in the browser/ folder and then reference them in browser/configure.zcml:

...

<browser:viewlet
    name="plone.footer"
    for="*"
    manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
    layer=".interfaces.IThemeSpecific"
    template="footer.pt"
    permission="zope.Public"
/>

<browser:viewlet
    name="plone.global_sections"
    for="*"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=”plone.app.layout.viewlets.common.GlobalSectionsViewlet”
    layer=".interfaces.IThemeSpecific"
    template="sections.pt"
    permission="zope2.View"
/>

...

One important thing to note is the class=”plone.app.layout.viewlets.common.GlobalSectionsViewlet” attribute in global_sections.

global_sections creates content dynamically and therefore references a special class. If you forget to include it, you’ll get an error. The footer on the other hand is only static text by default, so it doesn’t need the class attribute.

The manager=” “ attribute can also be found in @@manage-viewlets.

3. Adding theme files

You’ll need to place your theme files such as images and CSS in the skins/ folder, which is broken up into three sections:

skins/plonetheme_[your_product_name]_custom_images
skins/plonetheme_[your_product_name]_custom_templates
skins/plonetheme_[your_product_name]_styles

Any custom CSS files also need to be be registered within portal_css. To do this, you’ll need to reference them in profiles/default/cssregistry.xml. Paster should have created them for you.

Note, you have two options for your image and CSS files. You can either place them in the skins/ folder or in the browser/ folder. However, if you’ll be using any custom DTML calls in your CSS such as &dtml-portal_url; to generate your URL dynamically, you’ll need to keep them in the skins/ folder. Only static CSS files can go into the browser/ folder.

As best practice, you should also create an uninstall profile. If you don’t, when your theme is uninstalled it may not reset your Plone site back to its default layout.

Now that you have your product, install it!

Twitter can be used as more than just a platform for saying what’s on your mind. I talked about the power of real-time search with Twitter in a previous post of mine.

Simply having a Twitter account will do nothing for your company or brand. In order to use Twitter effectively and gain the benefits it can provide, you need to engage with your users and give them a reason to follow you. What’s great about Twitter is that anyone can do it and most importantly, it’s free. Conan O’Brien knows this all too well.

The topics covered here are based on “How to Use Twitter as a Marketing Weapon” by Guy Kawasaki who gave a great talk at UCLA Alumni Day in May.

1. Monitor Your Audience

What are people saying about your brand on Twitter? If you don’t care, then you should leave right now. Twitter gives you unfiltered access to what people are saying and feeling about your brand RIGHT NOW. No amount of research or focus groups will give you this kind of data.

You can use http://search.twitter.com to search what’s happening in real-time on Twitter. Let’s say I’m Canon since I’m a Canon fan (P.S. – Canon, if you’re monitoring this, feel free to send me free stuff. I REALLY want the 7D). In this example, I’m doing a quick search on the word “Canon.”

If I’m Canon and I’m monitoring Twitter like in the search above, I have a great opportunity to reach out to @krrrsten who tweeted that she isn’t sure about her new Canon SD1400is. I could offer to help answer any questions she might have or provide her with some links to great reviews about the model.

Now let’s see what people are saying about my competitor Nikon.

Looks like Nikon is where it’s at according to @pointlessramble. They obviously have some passionate followers.

You can also see what people are saying directly to you. Canon has an official Twitter account with @Canon_Camera. Twitter users can send messages directed to Canon by adding @Canon_Camera in their messages. Unless you are following someone, you won’t be able to see any messages directed at you. So you’ll need to find them by adding “to:” in your search. For Canon, you’d search for “to:Canon_Camera.”

We can see that @ugogalassi is showing love for Canon. Word-of-mouth advertising is in full effect here.

2. Engage Your Audience

Twitter also gives you an opportunity to engage with your audience directly.

If you’ve ever flown on Virgin, you know it’s a unique experience. Mood lighting, extra amenities, and great customer service are just some of the perks you’ll receive.

@Virgin America extends their service on Twitter and does a great job with its customers. It’s constantly active, responding to customer questions and offering special deals and tips on flights.

3. Sell and Promote

Kogi BBQ

If you haven’t heard of Kogi BBQ, you’re probably watching too much Dancing with the Stars. Kogi BBQ is enormously successful, and sells a fusion of Korean and Mexican style tacos and burritos from taco trucks that drive around Los Angeles. What made Kogi BBQ unique was that it was one of the first well known cases that effectively used Twitter to help their business grow. Each day it announces the locations of where it will be, providing daily updates and announcements to its customers.

Dell Outlet

Dell Outlet has been a huge success story for large companies using Twitter. It uses Twitter to sell excess inventory at major discounts directly to customers. At the end of 2009 revenue had reached $6.5 million from sales through Twitter.

Keep in mind that users are following you for a reason. They want special offers or incentives. Give them a compelling reason to follow you.

4. Support

Comcast

Companies have also been using Twitter to provide support for its customers. Comcast is a good example of what is possible by communicating and responding to customers.

5. Prospect

This is where we start to dig in deeper into the advanced tools that Twitter offers within its search.

Search by Location

Let’s say you’re a camera shop in Anaheim and you want to find out who your potential customers are. Since every Twitter account has a location field in its profile you can search for any tweets on photography within, say 25 miles, of Anaheim by typing “photography near:92802 within:25mi.”

You now have a target market who you can reach out to with people that are interested in photography within your area of business.

Search by Keyword

Every Twitter account also has a Bio section where you can enter information about who you are.

So let’s find all the people who say they are photographers on Twitter. For this, you’ll need to use Google to search within Twitter by typing “intext:”bio * photographer” site:twitter.com.” This will search the entire Twitter site for the word “photographer” in the Bio section.

This is just the tip of the iceberg. There are plenty of other ways to use Twitter, but these tips should help you get started. If you’re curious to see how other brands and companies are using Twitter, check out Clever Accounts which is run by Twitter’s Communication department. Interesting and clever use cases of Twitter are posted by their team.

Google Analytics comes with two very useful tools that aren’t enabled by default: Site Search and Event Tracking. When used, these tools can help give more meaningful statistics about users on your site.

Site Search

Site Search uses internal search data to track and analyze what visitors are searching for within your site. Internal search data is very important because it helps give insight into what your visitors want and why they are there. Here’s a quick snapshot of some top searches on UCLA Happenings.

Using this information, you can find out if your site has the content your visitors need. Site Search can also tell you how effective your content is organized and if it can be easily found.

For example, when visitors use your search, which link do they click on first within the search results? Is it the correct page? Or do they search for a few pages, then get discouraged and leave your site? These are just some of the important questions that Site Search can help answer to help manage your content.

Event Tracking

Event Tracking allows you to track events such as clicks to external links, downloads of files such as PDF’s, interaction with Flash objects, and more. For the UCLA gateway this is hugely beneficial for us. The majority of our pages such as Academics act as a “gateway” by providing external links to other departments and organizations within UCLA. By analyzing the data from Event Tracking, we’re now able to determine which links are the most popular and which links are just not working.

Event Tracking report for Academics.

We can also easily track how many times files such as PDF’s are downloaded like our campus map. Statistics such as these can be very useful in determining whether or not we still need to publish a static version of our campus map.

Event Tracking report for file downloads.

In order to implement Event Tracking, you’ll need to customize the way you call your Google Analytics code a little and use jQuery, but it’s not that hard. There is a great tutorial called Extend Google Analytics with jQuery on how to do this.

Using these tools will help give you a greater understanding of what your users are looking for. It will help you understand them more effectively, lead to greater usability, and deliver the most out of your website.

At UCLA Happenings, we are constantly trying to improve our site and keep our users engaged. A while back we integrated comments for every event via Facebook’s social plugins. Facebook also makes it very easy to integrate these plugins with little work. In most cases, only a few lines of HTML code need to be added and you’re ready to go. We’ve seen activity and usage steadily grow as many users have begun actively engaging with our site.

Recently, Facebook launched a new plugin called Recommendations that allows users to recommend any piece of content on your website. We’ve decided to implement this feature for every event on UCLA Happenings. Users can now recommend events they like by clicking the “Recommend” button when viewing an event.

Once clicked, the event is also published on their Facebook profile so that other Facebook users can see which events they have recommended.

Additionally, we also display the number of recommendations each event has on our summary of event listings. By doing so, we hope to encourage and engage our users to check out more events that have been recommended.

What’s also important to note is that our users are creating word-of-mouth for events. Word-of-mouth has always been one of the most powerful tools of marketing. According to a survey conducted online by Nielsen in 2009 of over 25,000 Internet consumers from 50 countries, 90 percent of its consumers surveyed trust recommendations from people they know.

The power of content sharing through mediums such as Facebook’s social plugins can help leverage your brand and create word-of-mouth. Your sites can become more social and engaging and have the potential to reach a vast network of users. It’s a service that’s worth trying and it’s easy to implement.

YouTube Most Liked

Facebook Like

What YouTube found was that users were inclined to rate videos extremely high or low depending on whether they liked or disliked a video. In this situation, the 5-star ratings system was highly ineffective. A post on their blog goes on to explain, “Seems like when it comes to ratings it’s pretty much all or nothing. Great videos prompt action; anything less prompts indifference. Thus, the ratings system is primarily being used as a seal of approval, not as an editorial indicator of what the community thinks about a video.”

On sites such as Yelp, review ratings can be significantly skewed based on customer emotions or experiences. If a customer receives terrible service but the food is excellent, how is that factored in Yelp’s 5-star ratings system? Customers will often give 1-star simply because their waiter was rude or the service was terrible. These factors aren’t conveyed appropriately into their ratings system.

TripAdvisor, which focus on hotel reviews, takes a more holistic approach. Unlike Yelp, their ratings are based on the average of several specific criteria such as rooms, location, cleanliness, service and sleep quality. Did you have terrible service but an amazing room and location? On TripAdvsior, your ratings can be more refined with an average that is reflective of the overall experience.

TripAdvisor holistic reviews

Amazon tries to implement the best of both worlds. It uses a 5-star ratings system and a version of like/dislike that allows users to note if a review was helpful or not. Thus helping to filter out only the most useful reviews.

Amazon helpful review

It will be interesting to see what trends and patterns continue to emerge with online review ratings. Each system has its advantages and disadvantages. While like/dislike may work well for sites such as YouTube, a more holistic approach can be beneficial for sites such as Yelp. Yelp, please take note.

Resources

Can You Trust Crowd Wisdom?, Technology Review MIT, September 16, 2009
On the Internet, Everyone’s a Critic But They’re Not Very Critical, The Wall Street Journal, October 5, 2009

If you were one of the lucky fans who scored tickets to Conan O’Brien’s upcoming sold out tour, you were probably following him on Twitter, or heard about it from someone who did. How do I know? Because the only advertising was through a post by Conan O’Brien (@ConanOBrien) on his Twitter account. No other form of traditional advertising was done, and within a few hours after his post, most of the dates had already sold out.

With less than a month since joining Twitter, Conan has already amassed more than 734,000+ loyal followers. Since then, he has been actively engaged with his audience, providing everything from jokes to personal photos online. Conan illustrates a great example of how brands can successfully engage and leverage their audience online. Many brands or businesses think they need to have a Twitter account, but fail to use it in an effective matter. To be successful on Twitter, brands need to engage with their audience and offer compelling reasons for them to continue following them. Dues to his existing fan base, Conan has been able to successfully do this in just a short amount of time. It illustrates what is possible when social media tools such as Twitter are used effectively. If you’re a small or large brand, there’s no reason why your brand can’t do the same.

American Express, who is sponsoring Conan’s shows, is also using Twitter as a platform to generate more publicity and word of mouth advertising. Fans can win the chance to meet Conan by first following him on Twitter and then tweeting the following:

Hey @americanexpress I want to be with Coco in (insert city from list below). Pick me! http://bit.ly/bEUqsh #amexConan

Reported cost for NBC to let Conan go? $45 million

Cost to advertise his sold out tour? $0

For everything else there’s Master…wait, my bad. This tour is sponsored by American Express. Don’t leave home without it.

URL shorteners have recently exploded in popularity with the emergence of Twitter. One of the most popular services bit.ly recently launched a free service called bit.ly Pro that creates custom branded short URLs. Companies such as Facebook and Google have also created their own using fb.me and goo.gl. So what’s the big deal?

Custom shortened URLs can act as verified links and be used as an important branding tool for your business or organization. In time, users who are familiar with your brand can also learn to trust them. bit.ly also includes real-time statistics associated with each link, which can be helpful when trying to monitor the success of click-through rates for links that you send out.

At UCLA, we’ve chosen to create our own branded URL shortener at ucla.in using bit.ly Pro. bit.ly Pro offers a service that integrates any custom domain with bit.ly’s existing service. It also includes several features such as a publishers dashboard, which provides aggregate real-time statistics from the past 24 hours. Partners already include AOL, The Wall Street Journal and the New York Times.

You can also customize the service by using bit.ly’s API. By default, bit.ly allows users to shorten any URL. This can lead to the creation of malicious links and spam, potentially hurting your brand. For ucla.in, we’ve integrated a white list that only allows the creation of shortened links to sites in the *.ucla.edu and UCLA-owned domains. So when users go to use ucla.in, they won’t be able to create links to unaffiliated websites.

There is always a risk of using URL shorteners because links are now being redirected through a middleman. What happens if bit.ly’s service goes down, or a malicious attacker takes over, similar to what happend with Cligs? These are still issues to consider. However, bit.ly appears to be a well established player, and with so many high profile organizations now on board, it’s a service you should consider.

As applications continue to migrate toward the web, mobile devices are an even more integral part of our everyday lives. According to The Mobile Internet Report released by Morgan Stanley in December 2009, the mobile internet will be twice the size of the desktop internet. More users will connect to the web through mobile devices than desktop computers within 5 years. With the emergence of the iPhone and Google’s Android platform now able to create quality user experiences on the web, these findings shouldn’t come as much of a surprise.

At UCLA, we recently launched a mobile version of the UCLA Happenings website, our campus events calendar at http://m.happenings.ucla.edu. If you haven’t thought about it already, then it’s only a matter of time before you’ll need to consider what you’re mobile strategy will be. Here are a few things to consider.

Understand your audience

These days everyone seems to be creating an iPhone specific application for their website. However, it’s important to think twice before you spend time and resources developing one. First, ask yourself who your target audience is. Take things into consideration. For example, business people are more likely to use a Blackberry, whereas more technically savvy and creative people use the iPhone. If you create an iPhone application for your website, what happens to the rest of your audience who don’t have one? Will you be developing and maintaining two different platforms? For UCLA Happenings, we chose to be platform independent so we could reach the widest possible audience. As a result, our website works well across all platforms and browsers.

Don’t copy

Your mobile website shouldn’t simply copy your existing website, it should complement it. Users to mobile websites are typically on the go and they want to find information quickly and easily. Think of the context of your website and what you need to deliver to your audience. A successful mobile design will deliver the most important information quickly, easily and intuitively.

Best Buy’s mobile website (http://m.bestbuy.com) does this well. They have two main options: Search Products and Find Store.

Urban Outfitters (http://m.urbanoutfitters.com) is also very similar.

For UCLA Happenings, we stripped out many additional features of the desktop website and concentrated on the delivery of events. Two functions we’ve concentrated on are search and finding events by date.

Keeping it simple

You should always separate content from presentation as much as possible while using semantic markup. Take into consideration that each device will differ in aspects such as the speed of connection, layout, screen size and color depth. Many devices may not support CSS, or have it disabled by default, such as Blackberry.

Here is how UCLA Happenings looks with CSS diabled.

By keeping the markup simple and semantic, even with CSS disabled, the site is still quite usable.

Browser Compatibility

There are so many different phones and browsers that you’ll never be able to support them all. One approach is to start off by looking at the statistics of visitors to your website to see which browsers are the most popular. As your website gains more users, you can always add additional browser support in the future as needed. For UCLA Happenings, we implemented a progressive enhancement strategy to give the best possible experience regardless of what mobile device the user is on.

Testing and more Testing

Many of the popular devices such as iPhone, Blackberry and Android allow you to download emulators for your desktop. However, there can be inconsistencies between emulators and real devices as we found. When we were testing for Blackberry, the emulators were correctly displaying the website. However, some of our co-workers who had a Blackberry weren’t rendering the website correctly. After some more testing and research, we found that many Blackberry devices have CSS disabled by default. To get the best experience possible, you should try and use the actual device. If you don’t have access to certain devices, you can always go down to the local cell phone providers store and test them out.

Resources

Mobile Design and Development by Brian Fling – This is an excellent resource that provides great insight, background and information on creating mobile websites and applications. The book is very thorough and covers everything from basic design design and development principles to more advanced topics such as markup and and styling techniques.

Mobile Web Design Trends for 2009 – A great article that details mobile web design trends and strategies.

A recent article from the Wall Street Journal entitled “Marketers Find Web Chat Can Be Inspiring” describes how Harrah’s Entertainment started monitoring Twitter and Facebook to find out what consumers were saying about their casinos, hotels and spas.

They found that many consumers were interested in hotel amenities such as room size and details of menu offerings and services. It quickly made adjustments to their marketing messages in online ads by adding the square footage of its suites. These subtle changes boosted Harrah’s online bookings by a double-digit percentage.

Setting up monitoring tools are free and easy. Using them will allow you to engage and understand your audience more effectively while staying relevant with them.

Here are a few:

Google Alerts

http://alerts.google.com

Google Alerts allows you select specific search terms and notifies you via email or an RSS feed anytime that phrase is found by Google. It gives you the ability to search within blogs, news, groups, video and the web.

Twitter

http://search.twitter.com

Twitter’s search function allows you to monitor what people are saying in real-time and save the results as an RSS feed. Additionally, within the advanced options, you can limit searches to particular locations, dates, and even if users are asking a question.

The new Google Chrome OS has been getting a lot of attention recently. In short, it will be a light weight operating system for netbooks that rely on applications residing in the cloud, such as Google Docs. Nothing gets installed or updated on your machine. It’s the complete opposite of traditional operating systems such as Windows.

So why is this such a big deal?

As Sundar Pichai, vice president of product management for Google has stated, “Every capability you want today [in native applications], in the future it will be written as a web application.” The future of applications will be in the cloud. You’re currently already using the cloud when you use web-based applications such as Gmail for email or Flickr to store photos. This is just the beginning as high profile applications like Microsoft Office are slowly migrating to the cloud as well.

By using applications online, you’ll be able to access information anywhere from any device that has access to the internet. Dependency issues on specific machines at work or home will be a thing of the past. From an infrastructure point, the cloud can also be beneficial in areas such as cost, collaboration, maintenance and flexibility. However, these benefits also draw issues and concerns regarding the privacy and security of your data, since it is no longer locally managed and in your control.

As other applications and ideas continue to evolve in the cloud, the web will become an even more integral part of our daily lives. It will be interesting to see how Chrome OS will be adopted. It may not be the end all solution, but it’s certainly heading toward the right direction of how we will be interacting with content and accessing information in the future.

Resources

• Google Chrome OS: Its Promises and Secrets
• Everything You Need To Know About Chrome OS
• Counting On The Cloud To Drive Computing’s Future