Embedding Quicktime videos with preview picture

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

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

http://www.blogger.com/home

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

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

  1. Choose A Theme.
  2. 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.

  1. Click on Settings.
  2. Click on Publishing
  3. Click on Switch to Custom Domain
  4. 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.

Keeping More Visitors

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

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

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

  1. 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.

  1. 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
  2. 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.

  1. 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

  1. 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

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

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" ๐Ÿ˜€

Evaluation of Blogger Software

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.

Other Blog Software to Consider:

WordPress – Good reviews, more features and plugins than blogger. Reliable software.

  • Example of WordPress Blog by Vasudevaservice CSS expert – John-Paul Gillespie
  • Free but does need installation, make sure your web host supports it. Not all do, some make it easy.

Type pad – Premier blog software, does cost though.

Programs to help you build your website from scratch

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.