World War II Simple Version Cartoon

My good friend Ed came across this cartoon while investigating map graphics for a website.

While it's not entirely accurate, it's an awesome way to get someone interested in WWII and maps

World War 2 Simple Version by Angus Mcleod 

Author:

Tags:

Squiz Matrix Text Mate Template Bundle on GITHub

After a long train journey up to Leeds and also down to Bournemouth with no Internet connection I found myself trying to solve problems to do with the Interwebs whilst not being connected to the Interwebs...... very difficult.

I've been using TextMate on a daily basis for editing HTML and CSS, taking notes, and also dabbling in the "easy to make pages look like web apps" bundle JQTouch.

This got me thinking that there must be an easier way to build Mysource Matrix Parse files without having to look up the keywords that can be included.

From there I created a Squiz TextMate Bundle and have hosted it on GitHub.

Download & Install Squiz TextMate Bundle

You can get the Squiz TextMate bundle by downloading the zip file below, or alternatively if you want the latest version from GitHub follow the instructions below.

GitHub Instructions

mkdir -p /Library/Application\ Support/TextMate/Bundles
cd !$
git clone git://github.com/justincavery/Squiz-Textmate-Bundles.git Squiz.tmbundle
osascript -e 'tell app "TextMate" to reload bundles'

If that last step doesn't activate the bundle for you then navigate tousernameLibrary/Application Support/TextMate/Bundles and open the Textmate file

This adds a Squiz - HTML5 template to your File - New from Template selection and Adds "Squiz" to your list of bundles.

Using Squiz TextMate Bundle

Activation Words

Once you have created your template you can activate any of the bundle options by typing the activation word and pressing tab.

  • menu
  • body
  • site
  • user
  • asset
  • body
  • nested
  • img
  • css

Next Steps

  1. Add reset styles and jquery google api's to the head
  2. Create a "mysource_files" folder as part of the template creation

If you have any comments or suggestions please update the GitHub page or leave a comment below.

Author: Justin Avery

Tags:

Hyphenator.js or html5 word break

Tom Shand of the http://www.theinternet.co.nz sent me an email earlier today to show me Hyphenator.js, but I'm wondering why the demo didn't include the example below......

This is a very long sentance and right at the end of it there seems to be a breakintheword.

This is a very long sentence and right at the end of it there seems to be a breakintheword.

Below I'm using the wbr tag, but I'd like to know if it's possible to do this and have a - Hyphen added when it decides to move to the next line.

Anyone?

Author:

Tags:

Lily Allen F@%! You

Author: Justin Avery

Tags:

Controling your computer with iTeleport

http://www.iteleportmobile.com is a handy tool that will allow you to access your computer from anywhere in the world via your iphone or ipad.

"But this is just for macs" I hear Paul Manning say. Well, not this time.

iTeleport Mobile allows you to connect to both your PC and Mac meaning that you can run it across your work pc and your home mac laptop.

Have more then one of each device? That's no problem for iTeleport Mobile as you can run multiple devices from the one iphone or ipad.

At $24.99 the price is a little more steep than your usual purchase from the app store, but these guys are pulling in about $1000 a day in downloads so they must be doing something right. Head over to theapp store to get your copy of iTeleport Mobile

.

Author: Justin Avery

Tags:

Non Hover Event in Touch Screen Devices

I came across an article on non hover events for touch screen devices and dropped the below in as a comment.

It's an interesting topic and one that will begin to become more and more important as the touch screen world evolves.

The sales figures are definitely pointing towards the need to do something now.

376 Million touch-screen phones being sold in 2009 is nothing to balk at :)

Having said that though what are the actual usage statistics? I had a quick whip around the interweb in search of such data but have come back fairly empty handed in terms of real statistics, but quite a few ways to detect such devices.

I agree that we should be designing interfaces that are accessible across all mediums, but we need to be able to cater for each of these with some relative ease.

Here, http://www.zytrax.com/tech/web/mobile_ids.html, is a list of user strings for most of the current mobile phones, and over here http://www.hand-interactive.com/resources/detect-mobile-php.htm we have a break down of iphone/windows/symbian/blackberry etc etc.

http://wurfl.sourceforge.net/ offers an XML file of available mobile devices and a very detailed review of their capabilities.

MobileESP is available from the code base on google, http://code.google.com/p/mobileesp/, which appears to be quite helpful, but also goes on to say it’s not a replacement for WURFL or Hand Interactive.

Hand Interactive uses PHP to identify what device you have such as the iPhone/iPod Touch, Symbian S60 or BlackBerry – http://www.hand-interactive.com/resources/detect-mobile-php.htm

Does anyone use other ways to touch/smart phone detection? Is it possible to identify if a device offers touch capabilities as part of the user agent string rather than comparing it to another list?

Author: Justin Avery

Tags:

West Ham United Olympic Bid

West Ham United Olympic Stadium

Author: Justin Avery

Tags:

Bintang

Bintang!

Author: Justin Avery

Tags:

Using Google Docs & Google Charts

<update>

Google Charts are rubbish right now.  The image does not get published correctly outside of the spreadsheet.  Once I find a fix, the post will resume it's regular service.

</update>

In a previous post I touched on my trip to Malta late last year and included a free play Roulette game on the site.

The following few months had me consumed within gambling, which led me to try out one or two of the more popular online gaming platforms.

The more "research" I conducted, the more and more I found myself having a cheeky bet here and there.

To keep in the spirit of sharing at work, we started £5 a week syndicate which is now running into it's 6th week.

I'd like to say that we're doing quite well, but that would be a lie.

Only Mr Tom (yes that's Mr, not Major) has managed to return a higher stake then what was bet.

When running these things it's always difficult to keep track of everything.  You need to know

  • Who's betting this week
  • Who has already bet
  • Who owes money
  • How much did people win
Alright it's not too much, but if you also want to share that information what options do you have?

Enter Google Docs!

Google docs is an easy, and more importantly FREE, way to keep all your important documents available where ever you may be (subject, of course, to an internet connection).

If you already have a google account then you're ready to tackle the wonderful world on online document editing!

Google Docs - what does it offer?

Google Docs allows you to create new files as well as upload your existing files

The supported documents for creation include

  • Document - .doc
  • Presentaiton - .ppt
  • Spreadsheet - .xls
  • Form - .notsurewhat

Along with these you can upload just about any document type, and it also gives you the option to transform taht into a Google Document for online editing, or maintain the file type so that it becomes more of a document repository than a editing suite

There are practically thousands of uses for Google Docs, however the key uses for me include

  • User Name & Passwords for online accounts (WARNING WARNING THIS IS NOT A GOOD IDEA
  • Transfer image files between computers
  • Budget Calculator
  • Job Applications
  • CV
  • PDF Book resources
  • Gambling Spreadsheets

If you find yourself, like me, having a bit of data from this you can even produce dynamic charts

See below the chart of Bets vs Winnings from our Syndicate

How do I create a Google Chart?

The same way that you might create on in Excel.

  • Create your data
  • Select the Data you want Charted
  • Go to Insert - Chart
  • Select the Chart type, add in your titles
  • Click on Create chart
  • Right click on the chart and slect - Publish
  • Copy and Paste the IMG tag into your web page

Next review will be on Country based data and charting from a live datasource....... more to come

Author: Justin Avery

Tags:

The Green Man

Earlier last year I was privileged to have worked in a team of exceptional people.

Not only did they have the technical skills to solve any issues surrounding web development, they were bloody good value as well.

As time passes people begin to go their own way, but fortunately good people tend to stay in touch.  Every couple of weeks we meet up at the Green Man over one or two beers/ciders and chew the fat about this and that.

See more of their work here....

Adamnfish

needh.am

 more to come.... eadmundo, urbantweetard, daelan, coltman, grumpy james.....

Author: Justin Avery

Tags:

SVG Maps in HTML

A work colleague approached me the other day with a requirement to build a flashy world map interface, minus the flash.

I thought about the requirements for a while before I turned to my Green Men with the same question.

They came back with SVG Vector images.

What are SVG Maps in HTML?

SVG is a way of visually displaying an image, without actually having the image available as a file. 

Instead the image is drawn by the browser through a series of coordinates that are fed into, or loaded along with, the page.  This allows an image, like vector images, to scaled depending on the media rather then the predefined limits otherwise imposed by the short sighted creator.

How do I create SVG Maps in HTML with Mysource Matrix?

It's not to difficult at all to get an image of Australia into your browser, and a scalable image at that.

First of all, take a look at the example SVG file on its own.....

SVG Image using Mysource Matrix

To get that image you will need the following assets

  • Folder (titled with country name)
  • Data source assets (created under the folder)
  • Metadata Schema (will hold the vector points and should be cascaded from the folder, inherited by the data source assets  )
  • Asset Listing (listing data source assets with the folder as the rootnode, this needs a URL so must be created within the site)
  • Blank Design (to correct the MIME type of the SVG file)
  • Blank Paint Layout (to avoid any unwanted HTML)
  • Standard Page  (to hold the Vector Image object)

Step 1 - preparation

  • Create the folder outside of the site asset (you don't need it to have a url). I've created a folder called Australia.
  • Create the Metadata Schema with only one value called coordinates.  This should be a text value with multiple lines.
  • Create a datasource asset for each of the Australian states and territories.  In the MediaWiki example I used for this it also include Bathurst Island, Fraser Island etc etc, but I decided to just keep to the mainland (and Tassy ;) Remember to name them with their initials and no spaces as the title will be later used for the SVG group IDs.
  • Create an Asset Listing, listing data source assets, direct links, and use the Australia folder as the root node.
  • Create a Blank Design called........ blank design.

Step 2 - set up the assets

Folder & Data source Assets

Apply the Metadata Schema to the Australia Folder and cascade across all of the assets.  Next, visit this site http://upload.wikimedia.org/wikipedia/commons/b/bf/Australia_map_States.svg and view the source of the svg image. 

You want to copy the contents of the

<path id="collect-all-the-content-here" />

for each of the states, and enter it into the corresponding state coordinate metadata value.

Now you have a country folder containing all of the states/territories as data source assets, and each of those assets contain the vector points to draw.

Asset Listing

Open the Asset listing you have created and go into the default type format.  **Note that you should define your display formats when using the asset listing asset, but for the sake of this example it's not required**

First off you need to change the content div presentation and content type to RAW HTML.  This is true for the Type Format AND the Page Contents on the Asset Listing.

Include the following HTML into the type format 

<g id="(%)asset_name(%)">
<path id="(%)asset_name(%)-state" d="(%)asset_metadata_coordinates(%)" />
</g>

This provides a group and path id and specifies the coordinates for each state/territory.

Commit these changes and then open the Asset Listing Page Contents, remembering to change the presentation and content types to RAW HTML again.

Past the following code into the content div and commit the changes.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="700"
   height="700"
   viewBox="-50 100 400 200"
   id="svg2"
   xml:space="preserve">
<defs id="defs4" />
<g fill="#d3d3d3" stroke="black" stroke-width="0.5">
</g>
(%)asset_listing(%)
</svg>

While we're with the Asset Listing, right click and choose "Web Paths" and update the web path to name-of-file.svg

Don't be fooled yet though!  Even though we've specified a file extension for this asset Matrix will still serve it with html/text mime headers. 

So how do we get around that?

Design File

Right click on the Blank Design file that you created earlier, select edit parse file and paste in the following items

<MySource_PRINT id_name="__global__" var="content_type" content_type="image/svg+xml" />
<MySource_AREA id_name="page_body" design_area="body" />

The first line sets the mime headers to image/svg+xml instead of text/html on any matrix asset that has this design applied.  The second line simple prints the assets contents, nothing more and nothing less.... and hence the name "blank".

Now that you've created the design, remember to go back to your Asset Listing and set the override design (right click settings) to this this blank design.

That's just about it.  If you've followed these steps correctly you should be able to preview your SVG Country image using the URL set on the asset listing like this SVG Australia Map example.

**Please note that if you're getting any unwanted HTML in the SVG image check that you haven't got a Paint Layout cascading and causing you issues.  If so, apply the blank paint layout you created earlier and remember that everything should be set to RAW HTML for type formats and page contents.**

Show SVG Image with HTML


The final step is to include your SVG within the page you require.

For this you only need one line added to any standard page.

<object data="./?a=assetid-of-svg-asset-listing" type="image/svg+xml" height="700" width="700">


Is there anything else I can do with SVG?


Does a bear shit in the woods?

There is an ever ending number of cool things that can be done with SVG.  We have only covered a basic example here for a proof of concept.

We are going to be taking this a lot further and pushing the realms of flash interactivity, and with the native support of SVG within the new HTML5 specification you won't even need to include the <object> tags to display within the browser.

Check back here for more updates, and enjoy below the SVG image with Mysource Matrix.

Author: Justin Avery

Tags:

Image editing HTML 5 Canvas

This is a great tutorial featuring some of the upcoming features of HTML 5.

I say upcoming, when in fact this is available right now, however there is still a while to go before we will see this accessible across the greater browser share.

Find out more about using HTML5 Canvas as on offline image editor and uploader.

Author: Justin Avery

Tags:

XFN Friend Network

I'm increasingly excited about the possibilities of including XFN tags within the link structure of sites.

There is a neat little form which helps those that aren't strong on their HTML but would like to include these formats within their URL structures.

XFN 1.1 Creator

Name
URL
friendship
physical
professional
geographical
family
romantic

<a href="" rel=""></a>

This user interface, and the code behind it, is provided as an example for the benefit of XFN developers, and to demonstrate the clear one to one correspondence between XFN relationship values and the code that can be used to represent those values. XFN Creator 1.0 by Matt Mullenweg. XFN Creator 1.1 update by Tantek Çelik.

Author: Justin Avery

Tags:

How to add pod casts to your web site

Pod casts have been around for a few years now, and there is no sign of them dying off anytime soon. With more and more people making the switch to iPods, iPhones and the iPod Touch, pod casts are now reaching a wider market than ever before.

Of course you don't need a portable "i" device to listen to a podcast. I spend my afternoons at work catching up on the latest web design and web 2.0 pod casts on my laptop.

Why Pod Cast?

The reason the pod cast is so great is it is a part of your website that contains relative information to the user with the added bonus that they can listen to it on demand, providing they have previously downloaded the pod cast of course.  Consider how many people in London alone take the tube to work and own an "i" device.

That's a HUGE market.

On the way to work I listen to my web related podcasts to see if there are any new sites or techniques that I can share with my collegues, and on the way home I find out what's new with the DV Show.

All of the pod casts mention URL's on their own site for further information on the topics discussed during the pod cast, which in turn drives more repeat visitors to the site and increases the web site content.

How do I create a Pod Cast?

So you know why pod casting is a great tool to add to you site but how exactly do you go about recording them and getting them up on your site and iTunes?

  1. Script your pod cast

    You might be the best speaker in the world, but you need to have some cues to keep you on topic and ensure you don't skip over and miss out important details.

  2. Say it with a smile
    Remember the old talk that if you smile when answering the pohone the person on the other end notices? Well the same thing goes for pod casting.

    You're going to be reading from a script (remember, or did you already forget step 1) so you need to ensure that your voice remains animated. If the listener can imagine that someone is actually talking to them then they will take more interest in what your saying, follow the links you mention, and will most importantly be more likely to come back and download another pod cast.

  3. Say it clearly

    I don't mean you have to alter the way you speak so you dound like Dr Doolittle, I'm saying that you need to have the correct equipment and the right environment when recording your pod cast.

    While you could use your on board microphone and record it in your bathroom while you still have Adium or MSN Messenger running, there will be back ground noise echos and an annoying little chime everytime someone comes online.

    Ideally you would want a studio for this, but that's just unrealistic.

    Record it in a quiet room where you're not likely to get interrupted, try andy and get a carpeted room as that will absorb some of the background noise and echos.

    Buy a directional microphone, Rode do a cheap good quality microphone, or if you're going to be doing a multi person cast get a multi directional microphone rather then passing the one around.

    You should also be recording the pod cast with the best possible software.

    Fortunately for mac users you can use Garage Band but for those recordin on PC dowlaod Audacity free of charge rather then use the basic recording software in the accessories menu.

    You should record and save the pod cast in the hiest quality format allowed.  I'm against edits of podcasts but if you want to do so you will loose some of the quality so start big.

  4. Convert to a Pod Cast ready format

    Regardless of whether you recorded in Garage Band or Audacity it won't be ready for people to download just yet, or at least not optimised to download and listen.

Author:

Tags:

Roulette

Celebrating my recent trip to Malta for a gambling site, check this out.......

Author: Justin avery

Tags:

Clear Mysource Matrix Cache from the Command Line

While upgrading from Mysource Matrix 3.20.2 to 3.22.1 you need to turn off and clear the cache from the system.

Unfortunately, if you are running a large system you may not have the memory allocation to perform the system wide clear cache option that can be found under the System Management - Cache Manager - Clear Cache section in the back end.

There is an easier solution though, and for those that have ssh access to their systems I can say it is a much simpler way to clear mysource matrix cache.

SSH into your system and type the following:

psql -U postgres -d DBNAME -c "TRUNCATE sq_cache;" 

v.o.i.l.a.d.o.n.eh.o.w.e.a.s.y.w.a.s.t.h.a.t 

Big cheers to Dan "The Man" Simmons for the tip..... 

Author:

Tags:

Adding URLs to Mysource Matrix

I've recently been asked to build a site for a friend of mine, and what better system to build it on then Mysource Matrix?

Other then setting the site and all its elements in mysource matrix itself, there are a few fundamental tasks that are required to get a website running.

First off is to buy a domain name, and then have it pointing to the right server.

For this my friend bought a domain through MelbourneIT, however I always find they are a little over priced.  I use http://www.domai.nr to find an appropriate domain name and usually buy through godaddy.com.

Once you've bought the domain name you need to update the domains name servers and create a few name server records through your DNS area.

I use Slicehost for my hosting needs, absolutely brilliant in my eyes!

So I update the nameservers on MelbourneIT to point towards

ns1.slicehost.net
ns2.slicehost.net
ns3.slicehost.net

I then visit the Slicehost DNS manager and create a new domain for the site, yoursitedomain.com. Now that has been created you need to associate some records to the domain.

There are numerous records to choose from, but to start with you should set up 3xNS records pointing towards the name servers, and 2xA records pointing yoursitedomain.com and www to the ip address of the server you are hosting with.

If that seems a little confusing, head over to the Slicehost documentation which is very clear and extremely thorough.

Now this is the bit that I wanted to write about at the beginning, adding a URL to the mysource matrix installation.

Go to the terminal window and ssh into your server. 

Type cd /etc/apache2/sites-enabled/

Type sudo vi nameofyourslicehost (so in my case it was sudo vi surfthedream.com.au)

You should see something like this.... 

ServerName surfthedream.com.au

ServerAlias surfthedream.com.au surfthedream.net.au www.surfthedream.com.au www.surfthedream.net.au justinavery.me www.justinavery.me

You want to navigate to the ServerAlias line and press shift+a (A, which takes you to the end of the line to edit in vi).

As you can see from the example you can add multiple urls separating them with spaces.

Once you're finished adding them you should have something like..... 

ServerName surfthedream.com.au

ServerAlias surfthedream.com.au surfthedream.net.au www.surfthedream.com.au www.surfthedream.net.au justinavery.me www.justinavery.me yoursitedomain.com www.yoursitedomain.com

Press <esc> to get out of the editing mode and then :wq to write then quit the file.

Next step is to restart apache, but make sure you test restart apache first to make sure nothing went wrong.

Author: Justin Avery

Tags:

Using Postgres SQL (psql) from the terminal window

While upgrading from Mysource Matrix version 3.20.1 - 3.22.1 I needed to make some changes to the database in Postgres.

Do you think I had any recollection on how this might be done?  Of course not.

After a few attempts I got it back to this....

Open the terminal window and ssh to the server (although you should already be there during the upgrade, this is just incase you are really starting from the beginning)

Type 'psql -d mysource_matrix -U matrix' and press enter

psql  this tells the terminal that you want to go to the postgres command line

-d denotes which database you will be making changes to, so if you're not working with mysource_matrix add your own database name

-U dentoes the user you are performing the commands as.

Both of these default to the current user for both the database and the user, so you need to specify both.

Author: Justin Avery

Tags:

New Canon 50D

After much thought and investigation I finally made the decision to go with the Canon 50D as my introduction into the world of DSLR photography.

It was a a toss up between the Canon 50D and the Nikon D90, but at the end of the day the 50D was going to be a better overall fit. 

Canon 50D Low Resolution

Why the 50D?

There were many reasons why the Canon 50D got the winning vote over the Nikon D90, and here are a few reasons why.

15.1 megapixels over 12.3

 It's not too much of a difference, but when it comes down to it nearly 3 megapixels is still nearly 3 megapixels.

Continuous shooting 6.4 frames per second against 4 frames per second

A good portion of the photo's that I'm going to be taking will be portrait and landscape scenary, however there will still be an element of sports photography as well.

With most important sports events occurring in under half a second, I'm much more likely to capture the right moment with 3 shots rather then 2.

SPL Water Housings also don't ready make any housings for the Nikon D90 because of the slow shooting speed and need for at least 6 frames per second for Surf Photography.

Here is a very quick example of a series of shots I took yesterday of a soccer incident.

Rugged Body and water resistant connections

 The Canon 50D offers a better built body.  While you should be extra careful with cameras at this price range, the truth of the matter is that after a while you begin to become a little less careful with the camera and it will suffer a bump or two.  It's much better to have a camera that will sustain these small knocks rather then wind up in the repair shop after the first mishap.

I also intend, after the next money bonus, to get a water housing for the camera.  While the water housings are great, there will still be a lot of impact while in the water and the better made camera will always outlast the poorer competition.

Canon Interchangeable Lenses

This was probably the clincher..... apart from every person apart from Rich telling me to go for the Canon.

Having an all Canon product line allows me the opportunity to buy a single lens with multiple uses.  The Canon 50D came with either the 18-200mm or the 17-85 kit lens.

I opted to go with the cheaper 17-85mm kit lens to being with, and buy additional lenses as they were needed.

The bonus for me with the Canon 50D over the Nikon D90 is that with a Canon Extender Lens 1.6x I can use any of the EOS lenses with my Canon XL1S, which means that if I do go for the 18-200mm lens it effectively becomes a 28.8-320mm lens for the Canon XL1S.

Other advantages of the Canon 50D

  • Faster start up
  • Better flash synchronisation
  • No proprietary software required for raw files (nikon needs it's own software)
  • Higher ISO settings
  • Advanced auto focus (AF) microadjustment
  • Faster shutter speed (1/8000 compared to 1/4000)

Nikon D90 advantages over the Canon 50D

The Nikon had a couple of things going for it too, but these weren't enough to sway the decision

  • Cheaper (a few hundred dollars)
  • Has HD Video (I've already got a Canon HV20 and Canon XL1s
  • More points of focus (11 for the Nikon with only 7 for the Canon)

Overall what IS the best camera

It doesn't matter which camera you decide to go for, you will be VERY happy with your purchase.

Both the Canon 50D and the Nikon D90 have there goods and bads, it just depends on exactly what you're looking for and your own personal preference.

Author: Justin Avery

Tags:

Getting started with social media

Getting Started...

Lets have a quick look at some figures to allow you to gauge whether this is actually worth spending any time on.

  • Facebook has approximately 140 Million Members and 18 Million Unique Visitors a month in the UK.
  • You Tube exceeded 100 million unique visitors in March 2009
  • Twitter increased by 1382 percent to 7 million users in February 2009 from 12 months previous, and of those lets say all of them use twitter on a daily basis.

So even if a minute number of these unique visitors were to visit your site each month, let's say 0.01% of these visitors, your website will have exposure to an additional 24,700 unique visitors.... and that’s before we take continued growth rates in the industry into consideration.

Still here?  Great. 

Now that you have a basic understanding of the numbers lets look at what you need to do.

Email

For each of the below sections you will need to sign up with some kind of user name and password.  Often the user name will be an email address so prior to reading on below you should take this opportunity to ask you system administrators to set up a single social media email address,

  • socialmedia@mycompany.com

or one for each section,

  • facebook@mycompany.com
  • youtube@mycompany.com
  • twitter@mycompany.com

Branding

All Social Networking sites provide you with a certain level of customization options.  These include backgrounds, logos, or full control over the html + css.

It is important to know your branding guidelines before you start spreading the social word, so you should meet with your marketing department and get a hold of the following as a minimum;

  • Square Logo approximately 240x240 pixels in size (most social networking sites will resize this to fit so it’s best to go a little bigger then required)
  • Hexidecimal chart of available corporate colours (remember that no matter how hard you try to convince the marketing manager sky blue isn't the same as ski-ish blue)
  • Mission Statement for your company, keep it to 30 words or less

Finally, remember to keep your social networking URL’s as consistent as possible.  For example, it is much easier to remember

  • http://www.twitter.com/yourcompany
  • http://www.facebook.com/yourcompany
  • http://www.youtube.com/yourcompany

is much easier to remember than http://www.twitter.com/yourcompany

  • http://www.facebook.com/yourcompanyothername
  • http://www.youtube.com/yourcompanyacronym
  • FACEBOOK

    It's free, it's easy, and you only need an email to set up an account (have you set those accounts up yet?)

    Yes of course you could use your own email address.  But what happens if you decide to leave or if you move into a new role? It becomes a pain to update or change.

    Creating a Facebook Page

    Visit http://www.facebook.com/pages/create.php and select what type of category your Business Facebook page should be associated with.  It could be a Local Business, Brand or Product, or an Artist, Brand or Public Figure.  (note that non-profit options are under Brand or Product).

    For this example I'm going to choose Brand or Product and choose Website.

    Once you've chosen you Brand or Product add the name of the business/brand/product/artist, or in this case the Website….. for example “Your Company”.

    The next page will allow you to either sign up with a new account (which is recommended), or with an existing account. 

    Sign up with your new business account email, remember the one you had created during the introduction, and you're done!

    The next steps are all about creating your social profile, setting up events that you will be holding, uploading some videos that you've previously shot of such events, some photo's of your company advertisements, a list of links to your website detailing the services you offer etc etc. 

    You should also take this opportunity to upload the profile image, in this case your logo, and tailor the page colours to your own branding guidelines.

    TWITTER

    tweets, twits, twitters, twitterific, twitscoop, twats...... the list goes on for as long as there are as many questions about what twitter actually is.

    What is it? How do I do it? Twitter, what's the point?  Well here's a quick overview...

    What is it?

    • Twitter is like the status update function on Facebook, but you're limited to 140 characters.  No picures, no wall posts, no applications, just updates.
    • Twitter is what SMS used to be when you were restricted to 180 character text messages, except these messages are accessible by anyone on the internet.

    Twitter, what's the point?

    Aside from the figures mentioned at the beginning of this article, the point is you can use twitter for anything. 

    You can follow your favourite celebrities, get immediate news updates, blow your own trumpet, follow experts in your chosen field, winge about work (search for "hate" and "work" and "monday"), maintain realtime search updates on topics that concern you personally or your business........ or anything else that you might want to do.

    There's a good article listing 50 ideas on using twitter for business you can read here http://www.chrisbrogan.com/50-ideas-on-using-twitter-for-business/ but here are a couple of the best picks.

    1. Use Twitter Search to keep an eye on what's happening in your space and identify twitter users you might want to follow.
    2. Share deep content/services you offer through twitter
    3. Tweet about things happening outside of your company that may affect your clients
    4. Utilise tweetdeck or twhirl to maximise twitters effectiveness.
    5. Utilise tiny urls
    6. Twitter breaks news faster then any other resource

    Prior to setting up your twitter account you should utilise sites such as http://www.tweetscoop.com and http://search.twitter.com to get a feel about what is being discussed around your social networking interests.

    How does it work?

    1. Sign up for an account and start leaving updates.
    2. You can choose the other Twitter user updates you would like to receive by visiting a twitter account page and clicking on "Follow".  The best way to get followers when you begin is to follow users or saved searches in your field.

    If you're setting up a personal account make your user name something useful, like joe bloggs and have http://www.twitter.com/joebloggs, this is better to send around the http://www.twitter.com/joe39.

    Setting up your business account should follow a similar process.  Remember that in both of these cases you are limited to 15 characters for the user name so keep it short.  Something like www.twitter.com/cfdg for the Charity Finance Directors' Group for instance is perfect.

    If you are concerned that CFDG may not be recognised as a full profile name let me put your mind at ease, you can specify a longer name in the profile section (and use the full Charity Finance Directors' Group which is associated with www.twitter.com/cfdg).

    Now that you've signed up it's time to make your account more human... more social if you will.

    For personal accounts a simple head shot as your profile picture will work wonders.  Twitter is all about being social and making the interaction with each other more human.  A nice head shot is a lot better then a picture of baby kitten, unless of course you horribly unattractive in which case a picture of Brad Pitt or Angelina Jolie is perfectly acceptable. 

    Another important reason to update the profile image is to override the Twitter generic logo.  This is often thought of as the sign of a spam account and is usually not followed by anyone.

    Business Accounts will not usually have a single face associated with them, so you should use the logo you prepared at the beginning of this article.  Upload the logo and start updating!

    It's probably worth pointing out that these steps should all be done before you begin following people.  If other users see that you haven't completed these steps then the chances of them following your updates are greatly reduced.

    You might notice that some people have background images with their site twitter pages as well.  This is important when it comes to Business Accounts as it's a sign of professionalism, and it allows you to promote more of your look and feel and also visually represent the other social media sections of your company (i.e. Facebook, Twitter, YouTube)  When choosing your background image either keep it the same as Facebook and YouTube, or at least very similar.

    YAMMER

    Yammer is 'essentially' the same as Twitter, but used within a closed network of users.
    Yammer controls who can sign up to see and post updates based on your email domain name. 
    What is that?  Well for instance if we started using Yammer at Squiz, you could only join if you have an email address ending with @squiz.co.uk

    This makes it difficult to obtain cross country collaboration (@squiz.net.au, @squiz.co.uk, @squiz.co.nz would be all different social networking groups) however Yammer becomes beneficial if you have a security conscious IT or Information Manager as it provides them with the confidence that the information is safe.

    But can't I just sign up with joe.bloggs@squiz.co.uk and get access to the network?

    No, you cannot.  A confirmation email is sent to joe.bloggs@squiz.co.uk and until you enable the account from that address the account remains inactive.

    Remember that Twitter and Yammer are different.  Yammer is about connecting within your Company where as Twitter is about connecting with the World.

    YOUTUBE CHANNEL

    Youtube has a massive amount of traffic each month, and is often under utilised when it comes to redirecting traffic to your site.

    If your company produces television advertising the chances are someone has tried to find the ad via You Tube to either poke fun at it, or to remember some information that was mentioned during the ad.

    Either way they're looking for you, and it's your chance to convert another user to your site.

    Television Ad’s are only one of YouTube’s uses though, it’s also an excellent way to share your resources with the world.  Some videos you could use include;

    • A snippet of a Conference that you have run which provides the user information on how to get the full video from your site,
    • A video enabled powerpoint slide presentation on a topic that you are the experts,
    • Television advertising,
    • A screen captured tutorial to assist your clients to use/navigate your site or use your software

    It doesn't matter what it is, what matters is that it benefits your clients and will direct them to your site for more information.

    Creating your Channel

    Visit youtube.com and go to the "Sign Up" link in the top right corner.

    Use your social media email address (seriously, this is the third time you've needed to set this up now, get to it!) and fill out the remainder of the information as you have done for the previous networking sites.  As mentioned in the introduction it's important to be consistent with your naming conventions so that your clients get used to always using the same term.

    It is important to remember that you CAN NOT change your YOUTUBE channel URL once you have signed up for it.  Twitter can be updated/deleted and facebook can be updated if it's available, but YOUTUBE can NOT.

    Once you've set up your channel you can go into My Account - Account Settings and Customise Homepage to add and remove different sections from your video channel.

    Next you should go to My Account - My Channel to update the Channel Info & Channel Designs.
    Channel Info holds the settings for comments, tags applied to your channel, your channel description and the Title of your channel.  Remember that as with Twitter and Facebook the Title is different to the URL that is used for your pages.

    To properly get the look and feel of your channel page you need to ignore the "Select a Theme" options and update the Advance Settings section of the Channel Design section.

    This is where the previously organised logo, corporate hex colour list and branding guidelines come in handy.

    The last option below Channel Info and Channel design is "Organise Videos" where you can customise the way your videos are displayed.

    What's that?  You haven't uploaded any videos yet?  Well, read on.......

    Uploading you video

    There are some basic rules to follow when uploading your videos as well to ensure you get the maximum exposure.

    Categories

    Some categories in You Tube are more popular then others, and that means you have a better chance of getting it seen.
    So what are the popular categories

    • Entertainment
    • Sports
    • Music
    • Comedy
    • News & Politics

    So does this mean that you put all your videos in Entertainment?

    No.  You should associate your video with the category appropriate for the video, however if you have a funny entertaining video you are better off putting it in Entertainment then Comedy.

    Ratings & Comments

    Ratings and comments are a great way to raise the profile of your video and should always be enabled.  It's up to you whether you want only registered users commenting or leave it open to the public, but I say the more comments the better.... leave it open.

    I've created them all, what now?

    Alright, I think you mean "I've created them all, how do I now get a network of users?"

    There are a few individual tips listed in the instructions above, but the rule of thumb is that people will join if you have something to offer them.  Of course the chances of them stumbling across the information is slim, but by following these few suggestions you will see a steady increase in visitors.

    • Add links to your email signature (directly under the name/email/website is best)
    • Integrate the links onto the Home page of your website as well as at the bottom of each of the information pages or articles
    • Add them to your letterhead or any other Corporate branded document you use to provide information to your clients

    Good Luck! 

    Author: Justin Avery

    Tags:

    Tracking tiny url analytics using tr.im

    Tiny URLs, what are they?

    Tiny URLs are a facility to take a long url, lets take this blog post for example http://www.surfthedream.com.au/blog/Archives/may-2009/tracking-tiny-url-analytics-using-tr.im, enter it into a text box and magically watch it transform into something smaller but albeit unreadable http://tr.im/luzK.

    Why use Tiny URLs?

    A lot of people are using twitter these days, I myself am running 2 accounts and contribute to a third when I can.

    While it's a blessing to be able to get your message across quickly and informally, sometimes it can be tough to fit everything you need within the 140 characters, and especially if you're also providing a link for further reading or a tutorial you might be plugging.

    So what is the solution?  That's right, Tiny URLs.

    Why track my Tiny URLs?

    There are many reasons you might want to track your links in a twitter post.  Any links that are coming back to your site you could identify by looking at the referral links in your analytics program like Google Analytics, but what happens when your readers are using twitterific, tweetdeck or the like?  The referrals could look like direct links instead of coming from Twitter (I am currently trialing this to see how analytics registers those clicks).

    Enough chit chat, how do I track Tiny urls

    Alright, okay, I was just making sure we were all on the same page.  Geez, patience!

    I use tr.imfor my tiny urls.  It's not because they offer the best service, or have the shortest urls, or send me miniature miniatures in the post, it's because I saw a big "Sign up from tr.im account" logo on their site and followed along.

    Once you've registered and logged in you use the site in the same way that you would use any tiny url type site, but with the added bonus that every link that you tr.im goes into a list of "your tr.immed urls".

    At a glance the list contains the following information

    • Original URL
    • tr.im url
    • # of visits
    • link to more stats
    • link to the url
    • option to delete from the list
    • date the url was tr.immed 

    By clicking on the stats link for one of the urls you go to the summary page that includes

    • Total visitors
    • Break up between humans and bots
    • Visitor location
    • Last 15 visitors

    There are also heading links for more information on

    • Timelines (how many clicks on each day)
    • Referrers (if you use the tr.im url across multiple sites like tublr, facebook, twitter, yammer etc)
    • Agents (browsers, bots and platforms)
    • Locations (by Country)

    In the Account section there are more options to 

    • View all tr.im URLs
    • View Top tr.ims
    • Authorise twitter accounts with your tr.im account (to submit directly from tr.im)
    • Claim URLs
    • Update Preferences
    • Change Timezone
    • Add/update Email Address
    • Update Account Profile

     I haven't had a look through all of these options so feel free to check them out and post back some feedback.

    Everything on the site is clear and simple to use.  There are a few extras that might come in handy, the firefox addon and dashboard widget are my favourites but there are a few more there with more to come.

    There was no export function that I could see, but that's not a big deal for me at the moment.

    For those that want to do a bit more fiddling and integration they have a nice simple tr.im API available as well.

    Excuse me sir, there's a time and a place for that tiny url!

    As with adjusting your nether region or picking your nose, there is a time and a place for tiny urls. 

    You should never use them within your site and be reluctant to allow peole to link to you from their sites.  For one there is no need to make urls short in this case, and it will badly hurt your SEO (or at least not help it).  You should also never put them to printed material because although not damaging to SEO, it takes away from any brand that you're trying to build up.

    All internal and outbound urls within your site should be tracked through an analytics program such as Google Analytics

    Good Luck, and beware of the most dangerous of the tr.immed urls http://tr.im/luLH

     

    Author: Justin Avery

    Tags:

    How to test restart apache

    If you're new to Linux, and to Apache, chances are you are going to make a couple of mistakes when updating configuration files.

    Fortunately there are a few commands to help you fix these issues before you make the changes matter.

    With most changes to the Apache configuration file, you are required to restart Apache for the changes to take affect, but if you've made a mistake in your reconfiguration then Apache will still restart with those mistakes present, or what's worse it won't restart at all and you'll be without a website.

    That's when a nice little command like

    sudo /usr/sbin/apache2ctl configtest

    or,

    sudo /usr/sbin/apachectl graceful

    come in very handy. These commands return any error messages that you might receive if you were to reboot.

    Once you're happy the changes you have made are right to go, use the trusty

    sudo /etc/init.d/apache2 restart

    Author: Justin Avery

    Tags:

    Introduction to video on the web

    You tube is great because it's simple, easy, and cheap.


    You don't have to pay for bandwidth if all of a sudden your clip goes viral and is watched by 2 million people around the world.


    It's also another way that you can drive traffic to your site. Users will find your video on You Tube rather then only on your site, and with a few clever marketing addons you could redirect them back to your site (e.g. See a transcript of this video at www.mysite.com)


    Have a look at the You Tube blog to find out all the features that you can include as part of your video also.


    On the other hand, you're stuck with the way YouTube compresses your video, have size constraints and also have the limitation of the length of video.


    You will also have the "You Tube" slapped across the video in a watermark, which depending on your audience might not be the best.


    Also, at the end of your video a bunch of related videos will appear even when you're embedding on your site which could potentially drive traffic away from your site and your videos and back to youtube (there may be options to change this though).


    You Tube isn't the only video hosting option, you should also check out Vimeo, Revver, MySpace Video, Google Videos, Grouper, Yahoo Videos,AOL Uncut Video, Dailymotion etc etc (search for video hosting)


    I prefer Vimeo only because I'm more impressed with the final products I've seen from them, not because of personal experiences.


    If you want to go the "host your own" then you don't need to look at any money at all (well apart from your own hosting fees and bandwidth).


    Have a look at Long Tail Video which is a free player for your site, although if you're hosting on a CMS, for a Corporate site or you are making money from your site (listing ads) they do ask for a one off fee (nominal fee, about $30 at most).


    Of course you still need to covert your files to FLV, and there are plenty of options out there however my pick would be FFMPEG that can be run from the command line.


    By hosting the own you have COMPLETE control over what happens to the video, how it is displayed, bit rate, size, audio quality etc etc, however it is a little bit trickier to set up then you tube and you will have to cover the bandwidth costs.


    Good Luck!

    Author: Justin Avery

    Tags:

    Mysource Matrix Demo System

    The Surf the Dream site started out as a blogspot blog in 2005 but was moved over to a Mysource Matrix site when I started with Squiz UK in November 2007.

    It started as a basic site with just 4 standard pages, but quick evolved to include

    • Asset Listings
    • Contact Form
    • Video Listings
    • Image Listings
    • Paint Layouts
    • Video Player
    • Blog
    • Enabled/Disabled Commenting
    • Dynamic Home Page Feed
    • Home Page Video Feature
    • Google Site Map
    • Google Video Map
    • Tag Clouds
    • Redirect Pages
    • Podcast Listings
    • Mashable Remote Content Pages
    • Image Gallery
    • Front End Video/Image uploading
    • Front End Page Creation
    • Simple Edit Interface for Blogs and Videos

    As part of the ongoing work on this site there is still to come;

    • Post Roll Advertising on Videos
    • Improved Simple Edit for Related Asset Tagging
    • Multiple Designs
    • Multi-category Image Gallery
    • Server Side Javascript pulling news/vimeo/flickr feeds

    If you want to see any other functionality features on the site please leave a comment below.... I'll make sure I enable them.

    Author: Justin Avery

    Tags:

    wait for the world by rosie burgess

    I just finished listening to Rosie Burgess latest album titled waiting for the world.

    It's Rosies third album behind "Humble Pie" and "Viewed (though a little distracted)" and she has once again managed to capture the beautiful sound and feelings that I've come to associate with 'Rosie Burgess'.

    My personal favourites include

    • the pirate song
    • best dress
    • banksia men
    • dont turn your back
    • big watery sky

    I was lucky enough to meet Rosie a few years ago during the Festival of the Sun in Port Macquarie and have been listening to her ever since.   After seeing her on stage on day one I was sure to be back with video camera in hand to catch her day two performance with songs like Road Kill, Big Watery Sky, and Dollars and Cents.

    So thank you very much Miss Burgess for producing another fantasic album and keep up the great music.

    Author: Justin Avery

    Tags:

    Video Tutorial 101

    With the internet so jam packed with sites about everything it is rare to come across a video 101 course that covers the topics as well as http://www.video101course.com

    The site provides an excellent and indepth look into the following of Video production...

    A great overview of videography, on a less than impressively designed site.

    It's true when they say content is king.

    Author: Justin Avery

    Tags:

    How to split a movie file into multiple parts

    In an earlier post I talked about settings for ffmpeg for flash video, and today I came across another helpful setting for ffmpeg.

    Sometimes your video will run for 30 minutes, however you only want to upload it in 10 minute segments.

    The following command will split a movie file

    ffmpeg -i myfiletosplit.flv -ss 00:00:00 -t 00:10:00 mydestinationsplit_1.flv 

    -i defines the input, it would usually look like -i location/of/my/movietosplit.flv

    -ss is the beginning of the file in hh:mm:ss from the beginning of the video file

    -t is the length of time you want to capture the clip in hh:mm:ss.  The first time I used this I made the mistake of thinking this was the time I wanted to record until, remember it is the duration of the clip you want to capture.

    So if you had a 24 minute clip and wanted to capture it in 3 x 8 minute clips you would use the following

    ffmpeg -i myfiletosplit.flv -ss 00:00:00 -t 00:08:00 mydestinationsplit_1_3.flv -ss 00:08:00 -t 00:08:00 mydestinationsplit_2_3.flv -ss 00:16:00 -t 00:08:00 mydestinationsplit__3_3.flv

     

    Author: Justin Avery

    Tags:

    The DV Show

    As far as online tools go for videographers, The DV Show has got to be one of the best.

    I started listening to their podcasts about a year ago and have been an avid follower ever since.

    Each week Brian, the host, takes you through the latest products, has an interview with some of the leading peers in the field of videography and offers up some great downloads for the mac and the pc.

    To cap it off the show often starts with a Q&A built from that weeks most interesting questions.

    I joined up during my recent trip through Europe and have been taking advantage of the premium subscribers offers during the past few months, and although you MORE then get your money from paying $35.00 life time subscription fee if you don't want to there's still tons of free stuff there.

    Enough plugging someone elses site though, I'm about a week away from finishing off the video tutorial on how to install ffmpeg which will then tie in nicely with the previous post on FFMpeg Settings for Flash Video.

    Author: Justin Avery

    Tags:

    SPL Water Housing for Canon HV20

    Last December I flew over to Ireland on a chance and ended up filming the biggest waves ever surfed.

    Once I had returned and downloaded the footage I was a little disappointed that I wasn't able to capture the full enormity of waves and the feeling you get when you're there watching.  As you can see from the footage it was still an impressive day, but it was even so much more impressive then it looks.

    One of the reasons for this was the angle I was shooting from, high on the cliff and behind the peak of the wave.

    This position didn't allow me to see deep into the barrel, catch the lip throwing over the crazy surfers that were surfing there, or catch the deafening roar of that much water moving into itself.

    This prompted me to start the search for a water housing for the Canon HV20.

    I consulted a water photographer that was also at the Mullaghmore session, Tony Plant, and he pointed me in the direction of SPL Housings.

    The owner of SPL Housings, Sean Labrie, was a pleasure to deal and replied to my novice queries quickly with suggestions on the requirements for water videography and this particular water housing.

    Overall I'm very happy with the housing, however I would suggest one change on future housings.

    The variable zoom control.

    The Canon HV20 is a great camera with an amazing picture quality, however it is still a consumer camera and has the very small and fiddly zoom toggle control.

    The lever that controls the zoom has about one inch range of movement, however the zoom only requires a 5mm range of movement.  By including two pins inside the housing to restrict the movement it would be much easier to control zoom movement while in the water.

    For now I frame shot once I reach the peak and hope that it doesn't get knocked around too much after I go over the falls the first time ;)

    HV20 SPL Housing 

     

    HV20 SPL Housing 

    HV20 SPL Housing 

    HV20 SPL Housing 

    HV20 SPL Housing 

     

    HV20 SPL Housing 

     

    Author: Justin Avery

    Tags:

    FFMpeg Settings for Flash Video

    Flash Video is currently the best format to share your videos on the web. Sites such as You Tube, Vimeo, and Myspace all use the .flv format to deliver videos to the end user.

    Some of the latest versions of video editing software have included .flv as an export option, however if you are using a free or cheaper option like Imovie, Windows Movie Maker or Final Cut Express then you will need third party software to get the desired .flv file format.

    There are hundreds of products out there that can so this for you, for a small fee, however as with all good things on the web the best tool is free.

    You can download FFMpeg from http://ffmpeg.mplayerhq.hu/

    The FFMpeg settings that I use for Flash Video are listed below......

    /opt/local/bin/ffmpeg -i /Users/justinavery/Movies/name_of_sequence.mov -qscale 10 -r 15 -s 720x540 -ar 44100 /Users/justinavery/Movies/name_of_flash_squence.flv

    There are multiple options to choose from in FFMpeg, but I try and keep it as simple as possible.

    Let's break this down into simpler terms.

    /opt/local/bin/ffmpeg

    The first part calls the application. You will see a lot of articles on the web that just start out with ffmpeg, but I've had some issues getting that to consistently work so have chosen to use the full path.

    - i /Users/justinavery/Movies/name_of_sequence.mov

    The - i is where you define the location of the movie that you are encoding to a flash flv file. As a quick way to get the location try using the tab key as you are typing the file path...... if there is a matching name of the file name will automatically be printed.

    -qscale 10

    This has to do with the quality of the video and the final bit rate. Previously I guessed a bit rate for the video I was encoding, or entered a maximum file size however I usually had to tweak it a few times before the flash video was to my liking. The -qscale ranges from 1 - 25 with 1 being the best quality and 25 the worse.

    -r 15

    This defines the frame rate, or the number of video frames that are produced each second. Generally PAL works in 25fps and NTSC works in 27.93fps, but as long as your footage doesn't involve fast moving action or quick pans you should be able to set it at 15 without noticing much loss of quality. Obviously, the less frames per second the smaller the file will be.

    -s 720x540

    As you can probably guess from the look of this, -s is the setting for the size of the video. The camera I use most often now is the Canon HV20 which outputs a whopping 1920x1080, so I need to scale it down to be suitable when previewing. Remember, most people won't be running HUGE screen resolutions so make sure you're not using valuable file size only for the video not to display on the screen.

    The setting 720x540 is set for wide screen, but play around with it depending on the layout of your site or your target audience.

    -ar 44100

    Can you hear me? Well without this you run the risk of your audio content being to high or too low. 44100 is the highest, and most of my footage includes an audio track or musicians playing so I try to keep it that way. If audio isn't important to your clip then halve the number, 22050, halve again for less quality etc etc until you get the desired result.

    If you're not good at maths and halving proves tough don't be alarmed, the application will alert you that your audio bit rate is not compatible and give you a list of options you can use.

    /Users/justinavery/Movies/name_of_flash_squence.flv

    To finish off the command we need to tell FFMpeg what to call the video and where to put it. Keep the name without spaces, use an underscore as I have done if you want to make it more readable.

    Now this is by no means a be all and end all explanation on using FFMpeg to produce flash .flv files, but it's a start that will get you going and allow you to further investigate options that will suit you.

    My next task will be to include the exact frame that I would like to export as the preview thumbnail for my video listing pages.

    Author: Justin Avery

    Tags:

    Mysource Matrix 3.18.2

    The Mysource Matrix site has just been upgraded to  3.18.2 and the new url, www.surfthedream.com.au has been added.

    Author:

    Tags: