A streaming feed is slightly different to a pre-recorded broadcast as Al Alamia was streaming the content from their own third-party provider. However, the direct feed link does not work out of the box using traditional EMBED codes in HTML.

I hit the same problem last week when trying to add a video to the Meejana website. I tried to get the LongTail Video plugin to work (which I used on the Al Alamia site – a great option for embedding streaming links from other providers) but, after trying several video conversions to different formats (.mov, .mp4, .avi, etc), the video just wouldn’t play.

A different approach was needed.

Enter YouTube

Possibly the most widely known video site on the planet, YouTube offers the perfect platform to host and stream your video. They have taken care of all of the technical issues surrounding playback and now offer a host of editing solutions to help you enhance your uploaded video if you so choose (for example subtitles, closed captions, new soundtracks, etc).

There are other sites that can deliver the same solution for you – such as Vimeo – and the choice is up to you.

1. Create an account on YouTube for yourself or your brand. This is your ‘channel’.
2. Access the ‘Video Manager’ and select ‘Upload a Video’.
3. Click ‘Select Files from your Computer’ and select the video file on your hard disk.
4. While the video is uploading (it will take a while), enter the Title, Description, Tags and select the Category that relates to this video. These will help you get views on YouTube and via general web searches.
5. After your video upload has completed, click the ‘View on Video Page’ button. This will take you to the live YouTube page that displays your video. Congratulations! You are now a video publisher!
6. To get the video on your website, click the ‘Share’ button under the video, then click the ‘Embed’ button that appears.
7. Copy the HTML code that is shown and paste this into your website where you want the video to appear. You can edit the options associated with this code, such as displaying related videos and the size of the player window – just remember to change these options before copying the code.
8. Upload your changed website page to your website.
9. That’s it! Your new video will stream from YouTube on your website.

Another advantage of using this method is that you can embed your video easily into other systems, such as Facebook, simply by copying the YouTube URL. This gives you an easy mechanism to share and propagate your content over-and-above simply embedding it in your website.

“Performance” is interpreted by many to infer search engine optimisation in connection with the Webmaster Tools - which is a very good application of the toolset as they provide up-to-date feedback on how your site is being found, what keywords are prominent, what people are searching for and how many of these convert to click-throughs. So they are good for SEO and SEM.

However, they are also great for managing the actual performance in the original sense for fine tuning and tweaking your website to give the best experience to your visitors – this is from within the “Diagnostics” section. Here are two examples.

Website Security (Malware)

Complex websites – especially those with any form of login such as content management systems, WordPress blogs, etc – are more vulnerable to hacking. Hackers may want to steal information about your customers or plant malware to infect unsuspecting visitors. The latter is particularly true for open source systems such as WordPress and phpBB (etc).

The great thing about Google Webmaster Tools is that they scan your site when the search engine crawler indexes the page and alert you (via email) if they find anything abnormal. If your site is hacked, you have an insight into what it is infected by, and even though your site may be flagged by Google as “harmful” to visitors, once you fix the problem you can use Webmaster Tools to resubmit your site to be crawled (usually within 24 hours) to remove its “harmful” status.

Without Webmaster Tools your site could be flagged as dangerous for some time before you realise - and so lose you valuable traffic – plus it can take some time for the site to be marked as “safe” as you are dependent on ad hoc crawls from Google to pick up the new status.

No More Dead Ends (Page Loading/Access)

Another great feature of the Webmaster Tools is their ability to flag broken links – both inbound and internal (titled “crawl errors”) – along with an error code telling you why the page is listed.

If you are getting lots of error 500s, this most likely means you have a coding or database optimisation issue which is causing requested pages to fail to load for the spider. If you look at your “crawl stats” you can also see how slow or fast search engine indexing is. In a current project, I noticed very slow indexing and also lots of error 500s. I tracked this back to database optimisation issues, and after changes were implemented indexing is now significantly faster (by a factor of 10 overall), the number of pages indexed has increased significantly and the error 500s have stopped appearing. The end result is a better performing site, both for visitors (they also don’t see error 500s and pages load more quickly) and in terms of what Google can index (which in turn is better for SEO as there is more content visible to the search engine).

Where there are lots of broken links, you can use this list to go back and fix them. If they are inbound links, you can update your .htaccess file (on a LAMP server) to catch and redirect them with a different error code. This has a benefit for SEO as when a search engine follows the external link it is told nicely that the page has moved and it should index the new page in place of the old one. You are being helpful to the search engine and so you get a more cleanly indexed site.

However, the real benefit is to the visitor because they don’t get 404 errors (and so decide to go elsewhere) which results in more readers for your site.

The Root Cause

The problem is that Outlook stores all the messages you read in a single file on your hard disk. This is usually a .PST file. The problem is that Outlook has a problem when this file gets over 2Gb in size, and can start to object when it gets close to this limit. Note that this depends on the version of Outlook you are running – earlier versions can object at around 1Gb.

The Solution

The only way to fix it is to adopt a system that prevents the situation occurring. Unfortunately, just creating new folders to move emails to isn’t sufficient as these folders are all stored in the same .PST file that everything else is stored in also (including calendar appointments, your contacts list, tasks, and all the data for the other tools that Outlook provides).

In Practice

You need to create additional .PST files to store archives of your old emails in – if you want to access them – or just delete the old stuff and keep the size down though this is very final. Your email server probably has a much larger quota than Outlook can cope with, so it’s best to adopt this practice early on and maintain it.

The method I use is to enable the Auto-Archive function in Outlook to automatically move the old emails out of the main account .PST file into a new .PST file. My settings moved everything over a month old out of the main .PST file into the archive .PST file. It kept everything running smoothly. Every January, I rename the archive .PST file to something like Archive2009.PST so that I have an annual backup. You may need to do this more often if you have huge amounts of email, but you get the idea. Outlook quite happily recreates the default archive .PST file next time the auto-archive process ran so it was relatively painless.

I could then re-open the old, archive .PST files from within Outlook and search back through emails if I needed to track anything down.

Here is a video showing you how to set up auto-archive in Outlook 2003. The approach is the same for all versions of Outlook though where the option is found may vary.

Of course, you can always tweak the auto-archive settings to suit your needs – archiving different folders into different .PST files for example to separate different types of emails – or just keep everything together. This method provides you with an elegant toolkit to keep your main Outlook .PST file below the dreaded 2Gb crash-and-burn limit. Hope it helps!

If you have already breached the limit

You will probably need to recover your .PST file as it may effectively be locked and even if you delete files from the mail server the .PST file won’t open until it’s fixed. In this case, I would suggest having a read through of this article which provides a good background and some tools to help. A word of caution: If you are unfamiliar with sysadmin type activities, ask somebody who understands things ‘under the hood’ of Windows. It might be better to get an expert in to fix it rather than spend hours trying to fix it yourself only to end up deleting everything by accident.

Let’s recap my original environment and requirements:

• Microsoft Office (Word, Excel & Powerpoint)
• JungleDisk Cloud Storage (Virtual File Server)
• Access and work on my documents from any device

Over the past few months I have slowly migrated across to a Mac platform from a PC, in part due to my laptop dying and having taken the decision to go back to a Mac which is a more solid platform. I migrated my development suites to Mac versions or alternatives and thought long and hard about what to do about Microsoft Office.

Eventually, I decided to go with iWorks (Numbers, Pages & Keynote) for the following reasons:

• I don’t need the full power of MS Office
• I can read MS Office documents in their iWork equivalents
• I can easily share iWork documents through iWork.com
• I can export files to MS Office formats if needed, or send PDFs

Slowly, I have been porting documents, letters and spreadsheets across to iWork as needed and found the process relatively easy. However, the access issue still remained from the iPad. I mentioned this to another aficionado and he said that it was easy to do from iDisk, which is part of the MobileMe suite of features. It is a shame I can’t use my own JungleDisk Cloud Storage service, but at least I can use a Cloud Storage service to save and access my files from any device.

I set up an account, and aside from the 10Gb disk space, also benefited from having all my contacts and appointments synchronised and backed up across my Apple devices, and also the ability to kill my remote devices if they go missing (although I think this is now a free service).

It was easy to move a few iWork files across to the iDisk account and I quickly discovered that I could read them in directly to Pages or Numbers from the iPad, and also export them back to iDisk. It takes a few clicks, but it is relatively painless and provides a mechanism to use a Cloud Store as a virtual file server and access ‘Office’ documents from anywhere. The recent addition of the personal hotspot feature in the iOS software makes remote access on the road even easier. You just need to remember to delete the file from the iPad after you have saved it to ensure you always go to the master in the Cloud (otherwise you could edit a local copy and overwrite a potentially newer remote copy). That is one small downside, but if you follow your own procedure rigidly you won’t go wrong.

The iPad versions of Numbers and Pages don’t have all the features of their desktop brothers, though for the most part this doesn’t cause any issues. However, retention of background colours would be a real plus (even though they are not deleted, editing on the iPad is made harder as a result) and also retaining merged cells in Numbers (which makes editing some spreadsheets a waste of time as the cells are de-merged). However, for straightforward documents and day-to-day number crunching they are sufficient and iPad + iWork + iDisk + iPhone Personal Hotspot makes for a workable mobile office.

I wrote about my experiences with Live Mesh previously and they were mostly positive. Here are the links:

• Live Mesh & The Cloud Oct 2009
• Conflict Resolution: Syncplicity vs Live Mesh Dec 2008
• Live Mesh – Synchronising Folders Nov 2008
• Cloud Storage: On SugarSync, DropBox & Live Mesh Oct 2008

However, as anybody following my twitter feed will know, my laptop died this week and I now only have 1 machine which I don’t have access too very often. So I took this opportunity to remove Live Mesh and clear up the overheads and uncertainty mentioned in the above posts. I have also planned a new mobile working strategy for when I get the new laptop (more on that in a future post) which is simpler and avoids pitfalls of the many synchronisation tools out there.

This is a quick post about the uninstall.

The process took a little over an hour during which time I could not use the computer – the uninstall closed Windows Explorer and the Desktop to do its behind-the-scenes admin. The number of temporary files had grown considerably since I last checked (now exceeding 125,000, up from 11,000 in Dec 2008), and the uninstall finished by moving all of these to the desktop in a folder called “conflicts”, which could be why it took so long.

Eh? 125,000 “conflicts”?! Live Mesh never mentioned these before in any dialogue window … But if you have read the earlier posts you will know some of the issues there! In my case 99.9% of these files were historic and remnants of folders I no longer sync with Live Mesh, so were clearly redundant and a waste of space.

Now that Mesh is gone, I have lots more free space and no more uncertainty. I have been using a solid backup strategy with Jungledisk so I know all my files are safe and recoverable. Adieu Live Mesh!

I will miss Live Mesh for a while. It did simplify some things (syncing my music library) and the remote PC access function was useful. But it also complicated other things and for this I am happy to make the switch to a new, better methodology for mobile working.

UPDATE 18 OCT: Live Mesh Beta is to be replaced with Live Mesh 2011 in the near future, and Live Mesh 2011 does not support Windows XP. So, unless you have Vista or later you will no longer be able to sync computers. For me, my base machine is an old XP machine, so it looks like the time was right to have a tidy up!

There are millions of Web users out there with iPads, iPhones, iPod Touches, et al, all of whom cannot access Flash websites (me included) when using these devices. Yet there are still web development companies producing exclusively Flash content for websites which stops this very large and growing user base from the services offered by the website (for example restaurants, clubs, car showrooms, etc, etc).

The issue isn’t going to go away – more mobile users are coming online every day with no mechanism to view Flash websites. While it is true that older websites are very unlikely to ever be updated (some companies just don’t like spending money on the Web, which is another debate for another day), websites built today need to offer alternative, accessible content – even if it is just a map and contact details (these are the most commonly looked for items by mobile users, after all). There are even laws about it!

To remedy this, I thought I would share some quick code I put in place for a client recently who had an exclusively 100% Flash website (which we didn’t build by the way) and needed a “quick fix” when their owner got an iPhone and suddenly couldn’t see his website Flash was important to this client, so the flow of the code detects if Flash is available and shows that content by default, otherwise it flips over to the static HTML for people without Flash – which includes the ubiquitous iPhone.

My solution was to take the published Abode Flash Detection Kit and modify it slightly to avoid breaking the existing Flash Application which was wrapped with SWFaddress (which provides deep linking capabilities for Flash & AJAX, so making each “page” in the Flash a separate URL and also better enabling SEO).

If you’re not familiar with Adobe’s Flash Detection Kit (or many similar alternatives), the code relies on JavaScript to detect if Flash is installed and then either displays the Flash content or alternative HTML content. The Adobe kit does this in-line by calling further JavaScript to either build the Flash object (a good mechanism which avoids other browser issues, notably for IE), or display the HTML content.

Here are the steps I took to wrap the existing Flash website with the detection system to prevent breaking the existing application:

1. Created a new home page containing some static content (in this case, a small HTML website was produced and the home page was an introduction with contact details). This was named “index.php” (LAMP server) and uploaded next to the original index.html homepage which wrapped the Flash.
2. Included the Adobe Flash Detection Kit and wrapped it with some logic (used by step 5 below):

   <?php
     $noflash = ( isset( $_GET['noflash'] ) ) ? $_GET['noflash'] : 0 ;
     if ( $noflash <> 1 )
     {
   ?>
   <script src="/flash-detect/AC_OETags.js" language="javascript"></script>
   <script src="/flash-detect/detection.js" language="javascript"></script>
   <?php
     }
   ?>
   

3. Modified the detection.js code to provide a simple switch for Flash. This meant that if Flash was detected it simply redirected the browser to the Flash application wrapped in the existing index.html file:

   // -----------------------------------
   // Globals
   // Major version of Flash required
   var requiredMajorVersion = 8;
   // Minor version of Flash required
   var requiredMinorVersion = 0;
   // Minor version of Flash required
   var requiredRevision = 0;
   //-----------------------------------
   
   // Version check based upon the values entered above in "Globals"
   var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
   
   // Check to see if the version meets the requirements for playback
   if (hasReqestedVersion) {
       // if we've detected an acceptable version
       // embed the Flash Content SWF when all tests are passed
       location.href = 'index.html' ;
   }

4. Added a line to the .htaccess file which redefined the home page of the website to look for index.php first:

   DirectoryIndex index.php index.html index.htm default.htm index.php3 index.phtml mwindex.phtml

5. I also modified the index.html file to make the Flash an embedded object (making it a proper layer instead of floating to the top which happens with OBJECT tags; thank you PS3 website!), and added a layer allowing visitors to click through to the HTML if preferred (the noflash=1 flag ensures that when the index.php home page is called from the HTML that it doesn’t run the Flash detection and flip the visitor back to the Flash content!):

   <body>
     <div id="flash_content">
       <embed id="mainFlashObj" width="100%" height="100%" wmode="transparent" quality="high" bgcolor="#000000" name="mainFlashObj" src="website.swf" type="application/x-shockwave-flash"></embed>
     </div>
     <div id='footer'>
       <a href="/index.php?noflash=1">Non-Flash Version of the Website</a>
     </div>
   </body>

6. Added some CSS to position the ‘footer’ layer over the Flash (since the Flash was set to 100% of the viewport):

   #footer {
       text-align: center;
       top: 0px;
       z-index: 10;
       position: absolute;
       padding: 5px 0 0 0;
       overflow: hidden;
       width: 100%;
       height: 25px;
   }

One benefit of this approach is also to make the static HTML content immediately visible to search engines. By changing the default home page of the website via the .htaccess file, we point search engines to this new content. Also, since search engines fail the Flash detection test, they are not redirected to the Flash content and only get the static HTML. A link is provided within the HTML site to the Flash content so that the content is still accessible by visitors and search engines alike.

The end result is a seamless experience which, while prioritising Flash (at the client’s request), presents a complete website without the need to introduce a splash page asking the user to choose Flash or HTML, which is a lazy choice in my book and not a good user experience.

I hope you find this approach useful to wrapping Flash sites with alternative content.

Fortunately, on the RackSpace Cloud, the solution to this problem is simple – simply increase the maximum memory allocated to the site so that there is sufficient available during the auto-upgrade process.

Is all you need to do is add the following line to your .htaccess file in the root of your web site and the auto-upgrade will then work.

php_value memory_limit 64M

You can change the 64M value – theoretically 32M should work, but sometimes doesn’t. 64M worked for us, or you can increase in 16M chunks to find a value that works for you. Try to be sensitive to the operation of the Cloud and not hog lots of memory though!