web design

Ventrino Traffic Exchange Community

Small changes are taking place at Ventrino.  Our website, which was once built using an HTML editor, now uses Joomla.  Yesterday I updated the Wordpress blog to use the same template as the main Joomla website thus providing some consistency in the look and feel of the website.

I also added the Community link which allows the Ventrino community to share information, photos, videos, create groups and friend one another in a similar fashion to Facebook.  Twitter can be integrated and in time Google Plus too.

The website is built with open source and free to use code as well as commercial Joomla components.  These include:

  • Joomla 1.7 – The Content Management System
  • Wordpress – The Blog
  • Artisteer – The template creation tool (not just Wordpress and Joomla)
  • JomSocial – provides most of the community code
  • RSJoomla! – Form creation tool, Firewall, SEO
Mixed in with JomSocial and Joomla are several chunks of code developed by myself and Adam to add new features.  For example Adam has created a module that enables the Community to distribute video uploads to the major streaming sites such as Youtube and Daily motion.

How to add a video to your website

There are hundreds of ways to add video to a Wordpress blog, Flash Video is a good place to start.  If all you want is to embed a Youtube then Smart Youtube from Vladimir Prelovac reduces the complex to the ridiculously simple. If you can find the V on your keyboard then you will master it in a nano second.

But what about a website?  Raw HTML?  Where do you go for that?

I guess I should create a video but until I do here are a few pointers that have worked well for me.  The process from 30,000ft up is:-

  1. Locate the place in your HTML you wish to add your video
  2. Paste in the video code
  3. Save the file

If you are an HTML webmaster guru this will be elementary stuff.  All you have to do is decide which flavour of video player you are going to offer your visitors.  I tested a few and like flowplayer although their demo videos were broken when I tested them!

How to install flowplayer on your website

  1. Download from the free version http://flowplayer.org/download/index.html
  2. Create a folder off the root of your website and call it flowplayer
  3. Upload these files to the new flowplayer directory you just created
    • flowplayer-3.1.5\flowplayer\example\flowplayer-3.1.4.min.js
    • flowplayer-3.1.5\flowplayer\flowplayer.controls-3.1.5.swf
    • flowplayer-3.1.5\flowplayer\flowplayer-3.1.5.swf

The version of flowplayer you download maybe different but the principle is likely to stay the same.

That’s all there is to the installation so let’s see how we can use it in our web page.  Much of this depends on how you prefer to edit your pages, if you do not know how to edit HTML then search Google for HTML tutorials, there are many companies offering top quality training with free books and videos to get you started.  There are plenty of free editors available too, so if you are starting from scratch google for free html editor too.

Ready to integrate video in your web page

Now you have installed your flowplayer all you need to do is add a few lines of code.  First add the Javascript file in the header.

<script type="text/javascript" src="flowplayer/flowplayer-3.1.4.min.js"></script>

Which should look a bit like this when you’re done:-

Locate the position in the HTML where you would like your video and use an Anchor tag and another line of Javascript.

<a href="http://www.yourdomain.com/this-will-be/the-path/to-your-video.mp4"  
<script type="text/javascript">
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf");

Alter the size of the video to suit your page design and make sure you keep the ratio between the height and width the same so that it doesn’t distort the output.

Download an example
Click here to download everything you need to get started. This uses flowplayer 3.1.5 so don’t forget to check their website for updates and new features at flowplayer.org

Another great design from Digital Dave (Not a shit shoveler)

snag-0015While it might look like one of his previous designs it is what the owner wanted.  It in fact uses many new images and very different template code.  Inside there are brand new icons and apparently Digital Dave’s own sister makes a guest appearance.

Dave is a drop out science student who began life in Kingston University in Surrey, UK.  He got halfway through and decided there was more science to be learned in a kitchen and his love of music and art were far more compelling than going to work for the local water company as a microbiologist (a fancy name for shit shoveler according to Dave).

snag-0020Keen to point out it’s not just traffic exchange work he does I am including something he’s working on, very much outside the reign of sales and marketing.

Dave also creates banners and icons which can be bought direct from 123rf.com which he says is a great resource for anyone developing websites.

If you like Dave’s work and want him to help you can find out more here.