Welcome to Vasudevaservice.com

Use cases for the JW Media Player

Shane Magee — Tue, 17 Jun 2008 05:15:44

Playing an album list


<embed
src="http://www.srichinmoy.tv/c_/player/mediaplayer.swf"
width="300" height="380"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="height=380&width=300&displayheight=0&showstop=true
&showicons=false&repeat=list&backcolor=0xCCCCFF
&frontcolor=0x000066&lightcolor=0x3333FF&screencolor=0x6666FF&thumbsinplaylist=false
&file=http://www.radiosrichinmoy.org/c_/audio/radio/102/playlist-102.xml"
>

gives you

As you can see, the playlist is stored in the same filesystem location as the music files (see sample playlist here).

The flashvars set all the tweakable aspects - color, positioning ect. You can view all available flashvars here on Jeroen Wijering's site, and there is also a setup wizard where you can throw in various combinations and see how the code turns out

Playing a video - with youtube-like recommendations!


<embed
src="http://www.srichinmoy.tv/c_/player/mediaplayer.swf"
width="300"
height="220"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="height=220&width=300
&file=http://www.srichinmoy.tv/c_/video/tv/260/260-1-2.mp4
&showicons=false&image=http://www.srichinmoy.tv/images/tv/260-1.jpg
&displayheight=200&searchbar=false
&recommendations=http://www.srichinmoy.tv/c_/player/recommendations/rec-lifevoices.xml"
/>

gives

When the video is finished, a list of recommended videos are displayed. Just like the playlists above, the recommendations are also generated from an xml file (see sample).

Note:

The front preview image and the recommendation images already exist on the site. The Flash Player allows them to be jpgs instead of having to convert to mp4
Again, the colour of the controlbar at the bottom can be modified by playing with the flashvars
The controlbar is on the bottom because we set the displayheight 20px less than the height. If they are the same there is a nicer effect where the controlbar is inline, but then it gets in the way of the recommendations if you want to include them

Custom playlist from different albums


<embed
src="http://www.srichinmoy.tv/c_/player/mediaplayer.swf"
width="300" height="200"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="height=200&width=300&displayheight=0&showstop=true
&showicons=false&repeat=list&backcolor=0xCCCCFF
&frontcolor=0x000066&lightcolor=0x3333FF&screencolor=0x6666FF&thumbsinplaylist=true
&file=http://www.radiosrichinmoy.org/c_/audio/custom_playlists/playlist1.xml"
>

gives you

Here is the link to this playlist - note how we now have a 'creator' and 'album' tag added. We have also switched the thumbsinplaylist flashvar to true to include creator

Custom TV playlist


<embed
src="http://www.srichinmoy.tv/c_/player/mediaplayer.swf"
width="300" height="400"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="height=400&width=300&displayheight=200&showstop=true
&showicons=true&repeat=list&backcolor=0xCCCCFF
&frontcolor=0x000066&lightcolor=0x3333FF&screencolor=0x6666FF&thumbsinplaylist=true
&file=http://www.srichinmoy.tv/c_/custom_playlists/playlist1.xml"
>

gives you

Here is the link to this playlist - the 'image tag allows images to be displayed in listing, I just used images already on site.

Thanks to Jeroen Wijering for creating such a great player

Meditation for Tech Guys

Tejvan Pettinger — Sun, 15 Jun 2008 17:44:23

Meditation for Techies.

Google Analytics

Tejvan Pettinger — Sun, 27 Apr 2008 16:49:16

There are many statistics programmes which track web visitors. Google analytics is one of the best free statistics programmes.

To add Google analytics

Visit Google analytics - you will be instructed to get a google account.
Add your site and then add the code they give you into your web pages.

Blogger Template.

If you have a blogger (blogspot.domain). You would edit the blogger template and add the code.

Embedding Quicktime videos with preview picture

Shane Magee — Mon, 21 Apr 2008 15:47:08

To embed a quicktime video, use the following code:

<object width="400" height="274">
<embed src="video.mp4" type="application/quicktime"
  wmode="transparent" width="400" height="274" autoplay="true">
</embed></object>

The autoplay argument determines whether the video plays or not immediately the page is loaded.

There are also other arguments you can add just like autoplay:

loop="true"/"false"— the movie plays once or continuously.
controller="true"/"false" — toggles the playback controls e.g. pause, fast forward, or mute.

The full range of options are available on the Apple Quicktime site:

http://www.apple.com/quicktime/tutorials/embed2.html

Preview Picture

With the above, what you get is basically a black box with a grey control bar below. Perhaps you would like to have a preview picture that loads the film when it is clicked on, just like Youtube embeds

The first thing you need to do is create the picture to be the same size as the video + 16px height to allow for the controllers. If you don't do this the image gets squeezed/expanded to fit the video screen.

Then you need to save your image as something quicktime can deal with (eg .mp4). For this you need Quicktime Pro (costs $30) or for Mac you can use QTAmateur, available here:

http://www.mikeash.com/?page=software/qtamateur/index.html

Open up your image with either of these and then click File -> Export, and save to MPEG-4 (mp4), I think .mov also works

You can then use this code to embed

 <object width="400" height="274">
<embed src="images/preview_image.mp4" href="video.mp4" target="myself"
  type="application/quicktime" wmode="transparent" width="400" height="274"
  autoplay="false"></embed></object>

where preview_image.mp4 is your created image and video.mp4 is your video

How To Set up A Blogger Blog

Tejvan Pettinger — Mon, 28 Jan 2008 15:07:50

It is fairly straightforward to set up a blogger blog. Just follow the instructions at:

http://www.blogger.com/home

You will need to Create a google Account
Then click on Create Blog.
Give it a Title and choose domain e.g.

Title: "How to Grow Potatoes" Blog URL: howtogrowpotatoes.blogspot.com

Choose A Theme.
Your blog is created! http://www.howtogrowpotatoes.blogspot.com

To Use Your Own Domain Name

If you would prefer to have www.howtogrowpotatoes.com rather than http://www.howtogrowpotatoes.blogspot.com You need a few extra steps.

Click on Settings.
Click on Publishing
Click on Switch to Custom Domain
Buy A Domain with Google. They will then switch your blog to your new domain name.

You can do this at any stage, google will automatically redirect your old .blogspot domain
You can buy a domain name elsewhere, but you will need to switch cmod or something like that. That starts to get a little more complicated.

The fifth maintenance release of Plone 3.0 is out

Priyadarshan Bontempi — Sun, 13 Jan 2008 11:57:06

Plone 3.0.5 came out on January 7, 2008.

Full release announcement

Keeping More Visitors

Tejvan Pettinger — Sat, 05 Jan 2008 11:06:20

I watched a fascinating video about how to keep visitors on your site for longer.

One thing that stood out is that web viewers get confused and bored with reading long lists. If you have a navigation bar with many items, people can't be bothered to read through it, so they leave the site.

If you make the navigation bar shorter, they are 25% more likely to click on something.

The optimal number of text blocks is 5-7.

This is a problem if you use Plone navigation bars - they can become very long and unwieldly

Compare these 2 examples of a navigation bar at Sri Chinmoy Poetry

Hopefully, you will find the navigation bar for happiness makes it easier for the eye to choose a page.

This fits neatly in with the principles of Don't Make Me Think

BTW, I like the principles of: USEit.com

Having paged comments in Wordpress

Shane Magee — Wed, 07 Nov 2007 11:01:51

If you have a very popular blog it might be worth dividing your comments into pages for easier viewing. Fortunately there is a Wordpress plugin called Paged Comments to do just that, thanks to Keyvan Minoukadeh. However it needs a bit of tweaking to work on your site.

Installing and configuring

Download and extract plugin files to a folder locally.
You can change the number of posts per page and some other useful settings by editing the paged-comments-config-sample.php file (its all fairly well explained in the file), then save the file as paged-comments-config.php.
Upload the whole paged-comments directory to /wp-content/plugins/ and enable the plugin through the WordPress admin interface.

Template hacking (yuck)

We need to include the comment 'pager' in our template. If you are using a common theme, it might already be taken care of: just go to /wp-content/plugins/paged-comments/themes, open your theme folder, and then copy the comments-paged.php file there into your theme folder at /wp-content/themes
If you are not using any of the themes listed in /wp-content/plugins/paged-comments/themes then go to your theme and copy the comments.php file to comments-paged.php

We will then modify the comments-paged.php as follows:

In the code at the start

<?php // Do not delete these lines
    if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
        die ('Please do not load this page directly. Thanks!');

change comments.php to comments-paged.php

To add the pager, place this code

  <!-- Comment page numbers -->
<?php if ($paged_comments->pager->num_pages() > 1): ?>
 <p class="comment-page-numbers"><?php _e("Pages:"); ?> <?php paged_comments_print_pages(); ?></p>
 <?php endif; ?>
 <!-- End comment page numbers -->

before the <ol class="commentlist"> line and again after the </ol> marking the end of it

If you want to make comment number visible on the blog, add this line of code

<div class="comment-number"><?php echo $comment_number; $comment_number += $comment_delta;?></div>

You can add it anywhere between <?php foreach ($comments as $comment) : ?> and <?php endforeach; / end for each comment / ?>, but the best place is probably before the author name (<cite><?php comment_author_link() ?></cite>). In practice, this hasn't worked too well for me, so use with caution.

Customising wordpress templates

Shane Magee — Tue, 23 Oct 2007 04:06:03

Here are a few nice things to add to your wordpress template in case it doesnt have them. The important templates to modify are index.php (the full blog view), single.php (shows single posts) and comments.php (for comments)

Show author and date

Adding the following :

<p>Posted by <?php the_author(); ?> on <?php the_date('F j, Y'); ?> at <?php the_time('g:i a'); ?>
</p>

will give something like

Posted by Tejvan Pettinger on October 12, 2007 at 7:35 am

The arguments for the the_date and the_time functions tell you what format the date and time is in, you can read a full list of them here...

Show category

<?php the_category(' , '); ?>

shows the category; the comma in the brackets tells you what separates the categories if there are more than one of them.

Edit post link

Very handy to be able to edit posts from the actual post itself:

<?php edit_post_link(__(' Edit this post')); ?>

The stuff between the apostrophes is the wording of the link

Migrating Blogger blogs to Wordpress, and setting up 301 redirects to ensure no links are broken

Shane Magee — Fri, 07 Sep 2007 13:36:28

Ok, basically if your blog is a new Blogger blog (after it was acquited by Google and Google usernames introduced) first step is to be sure have Wordpress 2.2.

If you have an old version of WP, you can always upgrade:

http://codex.wordpress.org/Upgrading_WordPress_Extended

Wordpress 2.1 allows you to upgrade from Old Blogger blogs, but not New ones.

If your Blogger blog is hosted via FTP, go into the settings of the blogger blog and turn it into a blogspot blog (this change is reversible if anything goes wrong). Your blogger blog url will now be at (some name you choose).blogspot.com
Go to your blog admin on your WP blog. Go to Manage -> Import and select the 'New Blogger' option. You will be asked for your blogspot url, blogger username and password. And hey presto, the job is done! (You might want to verify that before we go on)

Some recent users may have trouble signing into their Google account from Wordpress due to the fact that Blogger changed their hostname API:

http://wordpress.org/support/topic/131952?replies=2

As you can see here, you just need to make a simple change in wp-admin/import/blogger.php file, changing www2.blogger.com in line 84 to www.blogger.com. This will be automatically fixed in Wordpress 2.3.

Ok, here is the time consuming job, setting up redirects from the old posts to the new, so that if someone clicks on a link to the old address they are automatically forwarded. Make sure you first are happy with the permalink structure on your WP blog (Go to Options -> Permalinks to change this)

Now open up some text editor to write the redirects. Suppose your old blogger blog was at
http://www.mysite.com/{old address}
and your new WP address is at
http://www.mysite.com/{new address}
basically all you do is type
redirect 301 /{old address} http://www.mysite.com/{new address}
301 is basically a code that tells Google that the item has permanently moved to the new address and you aren't trying to pull any funny stuff on them. For each entry, type in the proper 301 redirect on a separate line. You can still get the old url address by looking at the blogspot blog.
You need to type in the full URL of the new address. Why? Basically, it allows you to redirect your posts to entries on a completely different site if you so choose!

Now you need to use an FTP client to go into the filesystem of where you host your blog. At root there should be a file called .htaccess; if not, create one (all files with . in front are system files and might be hidden unless you tell your FTP client to show hidden files). Then just copy and paste your redirects into this file, save, and try it out by typing in an old blogger address

I've heard (although i don't know the logic behind it) that its good to keep the FTP site going for a couple of days. So go to your Blogger blog and move it back to ftp, and then delete it after a few days.

vsCore, vsPloneLibrary, vsPloneSongs projects listed on ohloh.net

Priyadarshan Bontempi — Thu, 19 Jul 2007 05:26:20

Our vsCore, vsPloneLibrary and vsPloneSongs, have been listed on http://www.ohloh.net.

vsCore

Home: http://www.vasudevaservice.com/products/vscore/
Download: http://www.vasudevaservice.com/products/vscore/download

Project: http://www.ohloh.net/projects/6714
Commits: http://www.ohloh.net/projects/6714/commits
Individual commits: http://www.ohloh.net/projects/6714/contributors

vsPloneLibrary

Home: http://www.vasudevaservice.com/products/vsplonelibrary
Download: Download page is missing

Project: http://www.ohloh.net/projects/6714
Commits: http://www.ohloh.net/projects/6717/commits
Individual commits: http://www.ohloh.net/projects/6717/contributors

vsPloneSongs

Home: This project doesn't have a home page.
Download: Download page is missing

Project: http://www.ohloh.net/projects/6718
Commits: http://www.ohloh.net/projects/6718/commits
Individual commits: http://www.ohloh.net/projects/6718/contributors

It even rates two of them as "Extremely well-commented source code" :D

Programs to help you build your website from scratch

Shane Magee — Thu, 26 Apr 2007 12:45:29

This is actually an email response I sent to a friend who was asking about this sort of thing. It kind of complements Richard's blog post below.

There are a number of programs out there to make the life of people designing websites much easier. Choosing the right one depends on what kind of website you want - so you need to ak yourself the following questions:

1. Are you designing a completely new site, or are you putting a new design to an already existing site?

2. Is your site big (greater than 30 pages) or small (less than 30 pages)

3. Do you see the site as a project that will take a finite amount of time (15-20 pages and then stop) or will it be an ongoing project and pages will be added as time goes on?

For small, finite sites we recommend using a very easy to use design program called Dreamweaver, which is expensive. There are also free equivalents of Dreamweaver which Richard mentioned in his blog post.

However, these programs can be a little inefficient if you want to add lots and lots of content very quickly - there are specialised programs called Content Management Systems that handle this much better - for example the Plone program used to manage content on this very site (there are also other programs like Wordpress (used primarily for personal sites and blogs), Alfresco and Drupal. The only problem is sites using Content Management Systems often start out looking not quite the way you envisioned them (and perhaps even a little ugly). With some technical expertise you can also make these sites as beautiful as Dreamwaever sites, but it will take longer to learn, especially if the people you have in mind to work on the project have no computer experience.

Evaluation of Blogger Software

Tejvan Pettinger — Thu, 26 Apr 2007 16:24:27

If you are looking for a blog for your website, or just want a blog, the 2 most popular choices are: Wordpress and Blogger.

Advantages of Blogger

Owned by Google; the biggest blog software, and it is Free
Easy to install and add to your exiting website. At Blog set up choose - "Advanced Set UP". You will need your FTP password e.t.c.
Can also be used as a standalone and hosted on Blogger's servers, e.g. www.yoursite.blogspot.com
Easy to use and customise template.
Indexed very quickly by Google (not too surprising, since it is owned by Google. This is good for SEO
New features of www2.blogger include: blog labels. There are also hacks available, such as, teaser blog pages.
Google support group

Disadvantages of Blogger

With new blogger software hosted on external sites, I have frequently had blog publishing problems. (Sometimes takes a long time to publish, and then with errors - can be avoided by not having lables) Hopefully, these are problems which will be overcome soon, but it makes me reluctant to start more blogger blogs.

Web Hosting

Tejvan Pettinger — Thu, 26 Apr 2007 16:09:17

Finding a good, reliable web host is not easy.

It is important to bear in mind:

How much traffic will your site have? - Most sites start off small, but if traffic increases, you may need an option with more bandwidth available. E.g. small packages may start from 2GB per month.
Do you need optional extras? For example, wordpress blog.

Some Web Hosts worth Considering

SiteGround - $6.00 per month.

Supports Wordpress, High Bandwidth and disc space capacity.

Small Orange tiny packages from $25 per year.

Supports Wordpress and AWStats, Tiny package has small bandwidth, but can upgrade to higher bandwidth.

Pow Web $6.00 per month

Supports Wordpress, AWStats, High Bandwidth.

Heart Internet from $5.00 per month

Wordpress not available on cheap package, but is on more expensive.

Streamline.net from $28 per year.

Cheap if you want unlimited bandwidth and disc space. Wordpress is supported, but need to install yourself.

HTML Editors

Tejvan Pettinger — Sat, 21 Apr 2007 06:39:00

If you are building a website from scratch you will want a HTML editor to help create webpages.

Some of the best HTML editors.

Dreamweaver - The market Leader but quite expensive. Dreamweaver at Adobe
Microsoft Front Page - One of the most popular editors, it is now being superceded by Microsoft Expression Available for trial download.

Free HTML Editors

NVu - OPen source html editor How to build a website using NVu
Mozilla Composer

These HTML editors will enable you to upload your webpages using FTP transfer. However for optimal FTP transfer you may wish to make use of a dedicated FTP programme.

Cute FTP

Cheap Hosting and Site wizard - cheap webhosting with editor built in.

Tidy language folders with LinguaPlone

Shane Magee — Wed, 28 Mar 2007 11:47:38

Photo: Projjwal Pohland .

In Linguaplone, the one thing that you can't translate is the portal itself. Hence if you have any documents or folders at site root, then they will be translated into documents or folders also at site root. It is easy to see how (especially with more than two languages) things can get very messy indeed.

However there is a way around this if you have your site address directed to a folder at the root of the portal, public_home, say (in my opinion this should be Plone default behaviour to stop user content from being scattered around portal tools in the zmi). You can then translate the folder and the translated folder will show up on the same level as public_home. (You can even translate some content inside the folder before you translate the folder and LinguaPlone will put the content inside the folder for you)

However, perhaps you want all content - including translations - to be inside the public_home folder for ease of maintenance. Well, after you translate the folder, you can go into the zmi, cut the folder and paste it within public_home. This doesn't seem to have any effect on the links between original and translated folders, or on any content translated after you move the folder, and you now have all the content for each language inside their respective folders inside public_home.

Displaying body text of a news item in sdotnews

Shane Magee — Sat, 17 Mar 2007 06:11:17

Who says a technical site can't have pictures? (Photo:Kedar Misani )

Sdotnews by default displays the description of a news item. However, sometimes you will want to link to another page direct from the front sdotnews page, so it might be better to display the body text instead of the description, and in the body text of the news item you can then insert your links.

In order to implement this change we have to change the sdotnews_view template; specifically, replacing the bit that says

<p tal:content="result/Description">

At first I tried to call the text of the page body using

<p tal:content="result/getText">

<p tal: content="python: result.CookedBody()">

But this doesn't work, because once sdot has batched the news articles in groups so they can be displayed on different pages, the page results can access the metadata listed in the catalog, (so result/Description or result/Title is ok, but result/getText isn't).

Now, to get around this, you can include the page body in the catalog metadata (which would defeat the whole purpose of having a catalog in the first place), or else you can use the getObject method to access the obkjct and all of its attributes, rather than just the ones specified in the catalog.

tal:define="resultObject result/getObject;
            resultText python:resultObject.CookedBody(stx_level=2);

 <p tal:replace="structure resultText">

Note that sdot news already has defined resultObject, which it needed to access the news item image. Also note the structure command, this converts the HTML or ReStructured text. If you just put in

<p tal:content="resultText">

you will just get all the HTML tags.

Adding images to a csv-table in restructured text

John Gillespie — Tue, 27 Feb 2007 20:49:00

Anyone who has tried to add images using the csv-table directive in restructured text may have come to the following conclusion: it can't be done. Well certainly not using any of the existing attributes or syntax for tables (an oversight?), but it can be done with the replacement directive.

Firstly, a csv-table in restructured text looks like this:

Currently Held Records

No Category Details Record Date Photo

1 Somersaulting Longest continuous distance 12 miles 390 yards Apr 1986

Currently Held Records
No	Category	Details	Record	Date	Photo
1	Somersaulting	Longest continuous distance	12 miles 390 yards	Apr 1986

And would created with the following code:

.. csv-table:: Currently Held Records
  :header: "No", "Category", "Details", "Record", "Date", "Photo"
  :widths: 42, 270, 270, 220, 119, 119

  1, "**Somersaulting**", "Longest continuous distance", "12 miles 390 yards", "Apr 1986", |green_face.jpg|

Ignore the first three lines—it's the table structure info, similar to the way you would define an image, but instead defining table column titles and widths. Should be pretty obvious how to change anything there, but in case not, let's recap a few csv-table fundamentals, as it is important in restructed text that formatting is followed precisely—right down to the space and comma:

a single space after each comma—no other spaces
bold text like **this**
all text inside "quote marks"
numbers don't need to be in quote marks, unless together with text: "12 miles 390 yards"
return at the end of the line

The last line is an example of a row of the table, and more importantly contains the image:

1, "**Somersaulting**", "Longest continuous distance", "12 miles 390 yards", "Apr 1986", |green_face.jpg|

The image is the complex, for “|green_face.jpg|” (without quotes) is actually a “replacement” for the image definition, somewhat akin to an ID in css or a variable in pretty much any programming language you could name.

The image url, link and any other image parametres pointed to by the replacement id then get defined below the table (ie at the bottom of your reSt document):

.. |green_face.jpg| image:: green_face.jpg
  :target: green_face.jpg

Note:

The spaces are important as usual, as is putting the info on two lines
the name of the replacement/id can be anything, but it makes sense to me to use the image name
you can use the same image two times (or more) but only define the replacement once.

Example

You can view an example of a resturctured text csv-table including images here: Ashrita.com

Tips for faster speed in Plone

Shane Magee — Tue, 13 Feb 2007 04:16:09

Plone, like any content management system, has slower page load speeds than static pages. Ensuring a fast enough page load speed so users won't get turned off is therefore a big concern of Plone site maintainers. Here are some tips:

1. Avoid missing page components

If a part of a page (most commonly an image) returns a 404 or 301, it can slow down the page to more than half the speed. No matter what one does on system level you cannot make up for that kind of speed loss.

301 errors are particularly tricky since it is basically a bad link, but some code (most probably RedirectionTool) finds the requested object somewhere else and redirects the original request to the correct url. The url is served correctly, but that 301 makes the page load slow.

Actually the standard use of RedirectionTool (aliases) has the same effect, so it should be used just temporarily.

The Tamper Data extension (https://addons.mozilla.org/firefox/966/) to Firefox is a great tool because it allows you to quickly inspect headers of all the page components, not only the page itself. After installation, you will be requested to close the browser completely and start it again. Now Open Tamper Data from Tools menu in Firefox, and open a page you want to check out in Firefox. You can now see that Tamper Data window is being populated. Each line is one individual component of the requested page that has to be loaded in order to render the page. The most important column for us is "Status". We are looking for 404 and 301 errors. 200 means you accessed site content without error and 304 means your local content is the same as in the squid, which is even better.

2. Page content - sometimes less is more

A page with twice as much content will most probably load two times slowly. Understandably that we want put as much possible into every page, but quite often less is more. Things that have to be generated by Zope (smart folders ect) will obviously take longer to load than static content

3. Caching

Most speed improvement on a system level involves caching - storing site content in easily accessible areas. Most large sites run a proxy cache like squid to serve up static content and keep Zope from doing the work. Other static content is cached in the browser itself. The most import thing is to make sure all pages and their components have correct caching headers; this is done by the CacheFu product, which now ships with Plone.

The whole plone caching business is described in http://plone.org/events/regional/nola06/collateral/make-plone-go-fast.pdf and CacheFu product documentation.

Obviously, any caching issue we fix has a double effect. The page is served from cache much faster and it does not create any load on zope server. Then the pages that have to be served by zope (cache refresh, editors) are much faster.

Another crucial point is to evaluate any new feature or product we are going to use from the caching and performance perspectives. Then we should document what adjustments have to be done when a product or a feature is deployed on a particular site. For instance if EasyBlog is installed on a site, the CacheFu will have to be set; if sdot is installed, the CacheFu will have to be set and icon image will have to be created, etc.

(Thanks to Atmasamarpan for all his help with this article)

Benefits of Writing with Lists

Tejvan Pettinger — Wed, 07 Feb 2007 09:42:53

The Advantages of Writing in Lists.

Easier to Read. People don’t have time or the interest to read long sections of text. Writing by bullet points or numbers makes it easy to read and skim through. Picking up on the points which look most interesting.
Easier to Write. Writing lists tends to be easier. Writing by bullet points means that you focus on one point at a time. It also tends to encourage simpler writing which is a good habit to encourage.
Discussion. Lists provide an opportunity for discussion. For my next blog post I am going to choose my top 13 books that changed the world. It engages the reader because they start thinking what they would have chosen. If you want people to add comments to your blog this is a good strategy to employ.

Interesting Links for building web traffic

Tejvan Pettinger — Wed, 07 Feb 2007 07:40:29

Archetypes and ATContentTypes, part 2: Templates and customization slots

Shane Magee — Thu, 25 Jan 2007 04:33:08

We will now look at how these schemas are called by the edit templates, and point out slots and hooks which Archetypes have left for customization.

Let us return to our Image type: selecting this type in portal_types and looking at properties will show that atct_edit is the default editing form, as it is for all ATContent Types. There is only one line in atct_edit, calling the master macro in the base_edit template. The main function of this macro is to call other macros for different parts of the page: most of these macros are located in the edit_macros file"

the top slot gets filled by edit_macros/topslot
javascript is looked after by archetypes_custom_js/macros/javascript_head
css: edit_macros/css
header,description, body,footer all in edit_macros.

So, let's take a closer look at some of the macros in edit_macros:

Macros in edit_macros

header generates document actions like print, rss ect via the document actions macro and generates a title for the edit form with the name 'Edit (Content Type)'
byline generates the byline, via the document_byline macro
archetypes_schemata_links: not sure what this bit does yet :)
typedescription returns the description of the content type, which will appear at the top of the page under the title. It can be edited in portal_types without customizing, but the resulting edit will only appear in the 'add item' listng and not the edit form where you want it.
body: This is where the main action happens: for us, the interesting part of this macro is:

<metal:block define-slot="extra_top" />

        <metal:block define-slot="widgets">
          <tal:fields repeat="field fields">
            <metal:fieldMacro use-macro="python:here.widget(field.getName(), mode='edit')" />
          </tal:fields>
        </metal:block>

        <metal:block define-slot="extra_bottom" />

If we look at the above piece of code, it is essentially asking us to go through each field of the image schema and get its widget (For more on schemas and widgets, see part 1). Note the two slots 'extra-top' and 'extra-bottom' if you want to put something above or below the image widgets without changing the template.

The body macro also contains a good bit to do with sending the form, and the buttons. It contains a block defining Previous, Next (these automatically appear if there is more than one page in the edit form) Save and Cancel buttons. There is also a slot called 'extra-buttons' if you need to make any more buttons for your form, so you can make them in another template.

Whilst Archetypes does have a range of customization slots, one cannot make any easily reversible customizations to the schema as one might with a page template, as the files containing the schema are not stored on the zodb.

One is then left with the prospect of defining a new Archetype derived from your old one, either in a new product or as part of an existing one. Then in Extension/Install.py the portal_types tool can be manipulated to use the new type, or alternatively you can set that the old type can be just not globally allowed while the new type would be. Before you run into that course of action, there might be extra hooks for customization I havent found: for example, Villiam pointed out a post_validate hook for validators.

I am very grateful to Villiam Segeda, our resident Archetypes expert, for teaching me what little I know.

How do they do the navigation on the plone.org site?

Shane Magee — Thu, 25 Jan 2007 04:29:08

When you visit the plone site (http://plone.org) you see that the side navigation bar (viewable at any page besides homepage) contains only the root folders, the item and its immediate ancestors. A very nice behaviour, and one I spent a while fiddling with navigation properties trying to make happen.

But actually the solution is much simpler. Every version of Plone since 2.1 comes packaged with two identical states 'public draft' and 'published' - items in either of these two states are available to the general public. Why two identical states? Well, it does enable the user to choose which items he wants public but not available in navigation by putting the items he wants available in navigation 'published' and the ones he doesn't 'public draft', say. Then he can go to navigation properties in preferences, check filter workflow states, and put in published into the box below.

That's what Plone have done on their site: in addition, only the folders at site root are published, and all other content is visible, so that it will only appear in navigation if the actual page is selected.

Hide email address from spammers

Tejvan Pettinger — Sat, 13 Jan 2007 17:23:14

hide email

<p>Send your comments and questions Richard

<script language=javascript>

 <!--

 var contact = "Joe Blogs"

 var email = "joebloggs"

 var emailHost = "vasudevaservice.com"

 document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "</a>" +   ".")

 //-->

</script>

</p>

NOte many plone sites have javascript automatically disenabled. to see what it looks like press more

Archetypes and ATContentTypes, part 1: The Archetype Schema

Shane Magee — Tue, 02 Jan 2007 17:58:49

All the default types in Plone - file, image, folder - are part of the ATContentTypes product, and are examples of archetypes. Archetypes were integrated into Plone 2.1, and allow you to create content types easily by providing a range of readymade tools so you can generate edit forms without using any HTML.

An example will perhaps best explain how Archetypes works - lets look at the familiar 'image' type. The edit form of an Archetype is generated using a schema, and the schema for image can be found in Products/ATContentTypes/content/image.py: here we've taken out some of the code to focus on the essentials:

ATImageSchema = ATContentTypeSchema.copy() + Schema((
  ImageField('image',
        required=True,
                ....(lots of other stuff here, to do with image sizing and such).....
        validators = (('isNonEmptyFile', V_REQUIRED),
                      ('checkImageMaxSize', V_REQUIRED)),
        widget = ImageWidget(
                   #description = "Select the image to be added by
                                   clicking the 'Browse' button.",
                   #description_msgid = "help_image",
                   description = "",
                   label= "Image",
                   label_msgid = "label_image",
                   i18n_domain = "plone",
                   show_content_type = False,)),

  ), marshall=PrimaryFieldMarshaller()
  )

That's all a bit of a mouthful, so we'll break it up and isolate the essential parts:

ATImageSchema = ATContentTypeSchema.copy() + Schema((
     ImageField(

Every schema contains a collection of fields; in the edit form the short name is one field , the Title is another and so on... The reason we don't see the title, id, or description in the above schema is they are already defined in ATContentSchema (they are common to all types); the first line of the code joins ATContentTypeSchema to the schema we are creating above.

For an image, there is only one extra field, the ImageField. Lets say we want another field to specify the camera the image was taken with; our schema will then look like:

ATImageSchema = ATContentTypeSchema.copy() + Schema((
      ImageField(   # all the stuff above
           ),

       StringField('camera',
                  required=1,
                  widget=TextAreaWidget(),),

   ), marshall=PrimaryFieldMarshaller()
       )

Archetypes provides many different kinds of field you can include - TextField, BooleanField (for yes/no values) ect. In plone.org there is a list of available Archetypes fields....

OK, lets look at the arguments of ImageField:

ImageField('image',
       required=True,
               ....(lots of other stuff here).....
       validators = (('isNonEmptyFile', V_REQUIRED),
                     ('checkImageMaxSize', V_REQUIRED)),
       widget = ImageWidget(
                                # whatever goes here we'll explain
                                # when we talk about widgets
        )),

 )

The first argument 'image' is the title of the field, the required=True puts the little red 'required' dot beside the title. Now, the next two are important:

validators: these are classes which check that whatever we've entered into the field satisfies a set of conditions, and it won't accept it if it doesn't. For example, ImageField calls instances of two validator classes: one of them makes sure the uploaded file isn't empty, and the other rejects the uploaded file if it is too large. There is some readymade validators at Products/validation/validators, although quite often people have the need to add extra ones of their own.
widget: the widget is the graphical layout that the field will take; it defines how to render the field into HTML/XML. For example a StringWidget will set out a one-line box; a TextAreaWidget will set out a bigger box, like what is used for the Description. On plone.org you can see pictures of all the available Archetypes widgets ; it is very unlikely you will need to make your own. In many cases, the field type suggests what widget type to use: an ImageField will use an ImageWidget, for example.

The arguments of ImageWidget are quite straightforward:

widget = ImageWidget(
       #description = "Select the image to be added by clicking the 'Browse' button.",
       #description_msgid = "help_image",
       description = "",
       label= "Image",
       label_msgid = "label_image",
       i18n_domain = "plone",
       show_content_type = False,)),

The _msgid label is used by the internationalization (i18n) mechanism to generate translations in other languages.

Ok, one final thing to deal with, the marshaller, this makes Archetype fields understandable to clients such as WebDAV. As you can see above, the schema took two arguments, the field and the marshaller.

Schema (    (ImageField( all the stuff we discussed ),),
                                    marshall=PrimaryFieldMarshaller()
     )

PrimaryFieldMarshaller is the most common marshaller used, apparently.

Ok, so that's the first part of my ATContentTypes exploration; the second part will deal with the question I first asked when I saw a type schema: how does all this called by a template and end up on our screens?

Selecting content item as default view of a folder (including the /Members folder!)

Shane Magee — Fri, 29 Dec 2006 06:03:11

I always wondered why the 'Display' tab containing the 'select content item as default view' was sometimes clickable and sometimes not. Well the answer is simple (it always is after you've found it): if you have an item in your folder called index_html, Plone will automatically recognise that as the default view item, and you have to rename it before you can access the 'Display' tab....

This also goes for the Members folder. By default, index_html will bring up a 'search for members' template, which I never found very useful, and always wanted to replace with a nice smart folder. First go into /Members in the zmi, select index_html (it's in there somewhere amongst all the members), and rename it to something like index_html.old. Now, somewhere outside of Members, create the item you want to have as default view, and paste it into Members with title (guess) index_html.

This is a rather contrived way of going about things, I admit: Atmasamarpan tells me there is an index_home python script which calls index_html as the default view for the Members Large Plone Folder (which I have yet to find). Rename this script and you can access the display tab as normal. (Note: if you dont rename the script and there is no index_html item, you will get a site error when you try to acess the Members folder in Plone),.

Inserting content of Plone document into Zope template

Shane Magee — Mon, 11 Dec 2006 11:21:44

As explained in an recent article titled 'Edit ZPT content through Plone ' on plone.org, we can insert the content of a document called my-document, say, by inserting the following into your template:

<tal:block tal:condition="exists:here/footer-content/my_document"
             tal:replace="structure here/footer-content/my_document/getText">
              Document content here</tal:block>

Perhaps one of these days Plone can use this method so that we can edit footers and colophons directly through Plone; ive submitted a ticket to Plone here... ...

Perhaps we could even extend it to things like bylines, although that's a harder kettle of fish as we're dealing with variables like creator and modification date. Any ideas, anyone?

Negotiating the Plone security maze

Shane Magee — Wed, 22 Nov 2006 08:07:26

If, like me, you have been trying to resolve permission problems by checking and unchecking boxes in the ZMI Security tab in a trial-and-error fashion, there is in fact an easier way (I never doubted Plone for an instant :) )

Before going to the Security tab, you should first find the Actions tab for the process you want to control permissions for. By default, things like the top navigation tabs and the buttons at the bottom of the folder listing are controlled in the Actions tab of portal_actions.
Things like the edit, properties and sharing tabs are defined seperately for each item type in portal_types: i.e to access the actions for an image, one would go to portal_types->image and click on the Actions tab. (The Content tab is defined globally in portal_actions).
Scroll down to see the action you want to change the permissions for, and you will see the permission you need to change (there are cases where you might want to change this permission: for example, to stop object owners from accessing the properties tab, you would have to change the permission from 'modify portal content' to something like 'manage properties' and restrict that permission).

Plone Screencasts

Tejvan Pettinger — Fri, 17 Nov 2006 13:19:06

Plone have some screencasts which are an excellent introduction to Plone and how it works

Plone Videos

Includes Screencast Editing with Plone

"How to use the Plone content management system to edit both images and text in a site. Demonstrates Plone's built-in image manipulation and rescaling, as well as its rich text editing capabilities." 12 mins

4 Second Rule for Websites

Tejvan Pettinger — Fri, 17 Nov 2006 10:57:11

Users abandon sites that take longer than 4 seconds to load

Shoppers are likely to abandon a website if it takes longer than four seconds to load, a survey suggests.

The research by Akamai revealed users' dwindling patience with websites that take time to show up.

It found 75% of the 1,058 people asked would not return to websites that took longer than four seconds to load.

More at BBC

CMFLinkChecker

Shane Magee — Thu, 16 Nov 2006 10:19:26

This promises to be a very useful tool for webmasters of large sites or sites with many users. Sure, one could always check broken links using server states, but by having a link checking mechanism in the UI you can let each user in a multi-user site be responsible for keeping their own section 404-free.

The CMFlinkchecker program comes in two parts; the user interface (CMFLinkchecker) and the bit that actually crawls the site (LMS). These are distributed as two seperate programs. You can however, just install CMFLinkChecker and then go to 'link management' in plone preferences panel and register your website to access LMS on a server kindly provided by the authors somewhere over in Germany. After a couple of goes (the server might have benn down) I eventually got through and was given an id and password via email to enter in the 'link monitoring server fields' in the aforementioned 'link management' page. After that, I srolled down to the bottom of the page, hit 'crawl my site for all links', and got the ball rolling....

For a small site (around 200 links), about 20% of the links were evalusted straight away, the rest were queued up on the server and were ready the next time I logged in. The process probably goes a lot faster if you have LMS installed on your own server.

Looking at LinguaPlone

Shane Magee — Tue, 14 Nov 2006 17:06:36

LinguaPlone is the standard multilingual translation solution for Plone, and is used to generate translations of websites like Oxfam .

Upon first hearing of LinguaPlone, I was expecting a scenario where the whole page - page body, tabs, portlets, the lot - would obediently translate given the necessary words and a couple of clicks of the mouse. Then again, the open source community was not made for demanding types like me who expects everything without putting in some spadework himself (I am only making my first forays into Python now...:) )

What LinguaPlone offers (so far) is a very easy way to translate the page body. Simply choose what languages you are going to have your site in in Preferences (they are pretty much all there), do up a page in your default language, and access the 'translate' tab at the top of the document to translate into the language of your choice. In addition, uninstalling Linguaplone doesn't affect this translated content, it only removes the links between the different translations, which can be restored by reinstalling the product.

All the same, it's a little hard to know if LinguaPlone offers all that much more convenience and functionality over manually creating new content for each language yourself. I'm sure it does, else it would not be so widely used, but the lack of decent documentation doesnt help much to illumine me. For example, a cool thing would be if LinguaPlone used the IP address of your computer to automatically serve you up the content in your own language - its a rather intuitive thing and one might reasonably expect a multilingual solution to have this facility. It's not an easy thing to test (unless you have access to a private plane), and so I dont really know if it does this.....

(If my interest in Linguaplone persists over the next couple of months, I promise I will document answers as I find them here)

One thing that would really enhance LinguaPlone, in my view, is if translated objects could inherit the properties of the original object. Perhaps I want to use a couple of portlets in left_slots: in current LinguaPlone, I put the portlets in for a page, but they are not there for their translated counterpart. Not everyone will want this of course, but it would be nice if it were included as an option, along with an option to automatically update translation properties if the default properties are changed. Perhaps all the contents of the ZMI properties tab could even be displayed in the 2-column 'translate' page, and the user could pick which ones he wants to keep.

The top navigation bar tabs are a known issue with Plone multilingual sites, but if property inheritance were allowed the subsite feature of our vsCore product could then be enabled for those sites whose tabs bear the names of the content they point to.

Mozilla 2.0

Tejvan Pettinger — Wed, 25 Oct 2006 13:55:48

This week Mozilla released the latest version of its popular Firefox browsers. Among the main benefits of Firefox 2.0 include:

Enhanced security Features new anti-phishing functionality, (identify's scam sites)
Improved tabbed browsing.
Recovers your opened tabs if computer unexpectedly crashes. This will also save a half finished blog entry. - could be very useful.
More efficient use of memory. (Old versions could be heavy on memory use, causing my relatively small memory computer to close down) It is also worth pointing out that it is often "add on" products which use a lot of memory. Mozilla are trying to encourage these developers to use less.

very slowly internet explorer seems to be catching up with mozilla in terms of features. IE 7 has (for the first time) tabbed browsing and also boasts improved security settings. It will be interesting to see whether Mozilla is able to gain more market share.

How Viewers read a web page

Tejvan Pettinger — Sat, 21 Oct 2006 18:02:21

Interesting blog entry about how viewers read a screen. What I learned from Eye Tracking Using an eye tracking programme the video plots how people scan across a screen. Often people go quickly from one thing to the next. There is little evidence of people actually reading the text. Most people are scanning for a subheading or picture that interests them.

What people look at:

Headings
pictures (including thumbnail
Buttons and Menus
Lists are popular - blocks of text aren't.

Good Documentation - some musings

Shane Magee — Thu, 19 Oct 2006 11:07:45

A 'speed is better than perfection' philosophy might be applied to many areas of life, but documentation is not one of them. Unfortunately the standard of documentation needed so that 90% of people can follow it is, well, 90% perfect.

It actually doesnt take all that much longer to write good documentation once you sit back and think for a moment about what it was like when you had to perform the task for the first time yourself. Its no coincidence that much of the better documentation written on this site comes from things the documenter just recently found out how to do.

Documentation doesnt have to be austere, the tone can be warm and conversational, especially if the user is not all that au fait with computers.

However the most important things are still the obvious ones: check after each sentence and see if if you have relayed to the user exactly what he needs to do (and where to find things - screenshots can be of enormous help) and lastly, get your completely computer illiterate auntie/uncle/person-dragged-in-off-the-street to try using your documentation!

Two directives: sidebar and figure pt.2

John Gillespie — Sat, 14 Oct 2006 14:54:08

Sidebars

We recently covered the use here of two very handy features of reStructured Text (reST): namely the sidebar and figure directives. Sidebars and figures are very useful features for adding additional content styles to documents using reST, for example web diaries created using the EasyBlog product...

Error reporting and screenshots

Shane Magee — Wed, 11 Oct 2006 11:15:31

Here is a very good article on bug reporting, discovered by Atmasamarpan:

http://www.chiark.greenend.org.uk/~sgtatham/bugs.html

It certainly helped me sympathise with poor developers and curb my linguistic excesses when reporting problems.

Whenever possible, screenshots really help to pinpoint the problem by making the developer or Plone admin see what you're seeing. Below are some instructions for screenshots for both Windows and Mac.....

1. Windows

You can capture the screen and paste it into any graphics program: by pressing the 'print screen button' (up there somewhere to the right of F12). This appears to do nothing when you press it, but the screen is then stored in memory. One can then open any graphics program like Photoshop or even Microsoft Paint and paste in the image. (For Photoshop one should first create a new document)

If you dont want to save the whole screen, pressing 'Alt' and 'Print Screen' together will capture only the window you have open.

This is a slightly clumsy way to do it; there are freeware programs out there which do the job much quicker (and which personally I'm happy enough with, for example MWSnap) but I understand the words 'windows' + 'freeware' together can be enough to send a chill up the stoutest of spines......

2. Mac

The keyboard shortcuts are:

Apple-Shift-3: Capture the entire screen
Apple-Shift-4: Capture a self-selected portion of the screen
Apple-Shift-4 then Space: Capture a window

Both options automatically create an image for you named "Picture 1.png" on your desktop.

There is also an application named "Grab" in the Utilities folder which allows screen captures with more options. Grabs features can also be accessed from the "File" menu within the application Preview.

Further in-depth information on screen captures in Mac OSX 10.4 can be found here: http://www.macworld.com/weblogs/macgems/2005/09/tigerscreenshots/index.php

(thanks to John-Paul for the info)

More unearthed tips....

Shane Magee — Wed, 11 Oct 2006 11:06:25

Again from my email clear out, I have found a few more tips, this time suggested by Priyadarshan.....

Drag and drop item reordering in Plone 2.5

You can just reorder the order items have in a folder just by dragging and dropping them around. This is of course of great usefulness, since the order in a folder dictates the order in the navigation.

Making a static copy of a Plone Site

This is an excellent recipe to make a static copy of a Plone site: http://www.zopelabs.com/cookbook/1103609775

Searching for Code in Google

http://www.google.com/codesearch allows searches for source code on the web. Allows filtering for programming language, license etc.

Plone Navigation and Google Images

Shane Magee — Tue, 10 Oct 2006 11:31:18

I was cleaning out my mail account today and discovered this rather interesting tip from Richard which he divulged to me decades ago...if you want to boost the standing of an image on your Plone site in Google Images, one way would be to make images viewable in navigation (via preferences -> navigation settings).

This is by no means an aesthetic solution; however you can always use workflow to filter out images you do and don't want displayed in navigation.

ReStructured Text Guide

Tejvan Pettinger — Fri, 06 Oct 2006 03:49:43

Another Guide to reStructured text which consists of the 7 functions I find most useful (plus three others which Shane found useful but was too lazy to write his own article).

Not comprehensive but good to make a start.

Also, for a listing of links to other articles and guides on restructured text, see our ReStructured Text blog category

Changing to reStructured Text

Shane Magee — Mon, 02 Oct 2006 13:03:45

We've written lofty paeans in praise of reStructured Text without bothering to tell people how to select it; we've now updated our Changing your Content Editor page to do the needful...

BTW, the excellent reStructured Text primer is a bit scarce on adding links; we've also updated the adding links page too...

Polaroid effect using css and reST

John Gillespie — Mon, 02 Oct 2006 06:59:50

Those who are not familiar restructured text may initially bemoan it's lack of power and flexibility when compared to XHTML, but as often the case in life, initial appearances can be deceiving.

Although the use of CSS for styling and presentation is "best practice" in XHTML, it is not yet mandatory, which allows anyone with knowledge of such "deprecated" tags as "align=center" or "font", to illegally wreck havoc with your beautiful CMS-based site.

Outside of a mandatory 2 month course in basic XHTML and CSS, one solution which desperate webmasters have often deployed is to force site editors and contributors to work with WYSIWYG editors configured to strip out any and all illegal tags. Not only is this a somewhat draconian solution, and immensely frustrating from a user point of view, but it still doesn't bring your site any closer to being beautifully or correctly formatted. Just not illegally so.

And don't get me started on tables...

Editing old pages in reSt

Shane Magee — Mon, 25 Sep 2006 18:14:03

One problem with changing from HTML (or a content editor) to reStructured Text in Plone is that the text editor doesnt convert your old HTML docs to reStructured Text.

However, my experience so far is that if you copy the text of the page (not the code), click on the edit tab, delete the HTML code and paste the content of the page back in, it does a pretty good job of keeping the layout of the page. Paragraphs, bullet points and numbered lists are largely mantained. Of course, links images and preformatted text all have to be put back, but what can you do...

Creating proper internal links

Tejvan Pettinger — Fri, 22 Sep 2006 10:05:40

Internal Links

Plone has been standardising internal links without a trailing slash "/" at the end. It is good to follow that standard, for both SEO reasons and data collection.

Links to pages and images should be like this:

/plone_basics/adding_internal_links, and NOT like this:

/plone_basics/adding_internal_links/ (in the first case, the terminating "/" is not there)

See also Plone Basics
We also have an updated page on internal links

Note 1: when linking in blog entries which can have different urls it is best to add the full link like e.g /blog/archive/2006/08/26/atimage-tips

Note 2: Plone wysiwyg content editors can automatically change the format of links to: ../../blog/e.t.c which is very bad. It is advisable to either use reStrucutredText, or Dreamweaver if you really need to use HTML still.

Images

Images are the same: .. image:: /images/vasudevaserver.gif

This is bad: /images/vasudevaserver.gif/

The bottom line is: Never add a trailing slash!

Also, please make sure images always have the type of file at the end (.jpg or .gif)

Please read: "WYSIWYG Considered Harmful"

Priyadarshan Bontempi — Mon, 18 Sep 2006 22:30:37

A really good article: http://kopsis.blogspot.com/2004/09/wysiwyg-considered-harmful.html