The great thing about Macs is that they have so much functionality built into them already, without have to purchase various different pieces of software to carry out this and that.  One such thing that sprung to mind when I cam across this problem was that your Mac is a web server.

If you take a look in the System Preferences and then the Sharing link ( > System Preferences > Sharing) you will see a whole list of sharing options.  One of these is labelled “Web Sharing“.  Turn this option on by clicking on the tick box next to it. In the information panel to the right, your Mac will now give you your personal website address which will be in the form of computername.lan/~honefoldername.  This folder is mapped to your sites folder which is contained in your home folder.

The next thing to do is to copy any videos that you want to make available via WiFi to your iPod/iPad into this sites folder.  Then on your iPad or iPod open the Safari browser and enter the address given in the Web Sharing panel of System preferences and you you will be presented with a list of the video that you have copied into the site folder.  Click on them to play and you are good to go.

You will need to make sure that the videos are playable on an iPod or iPad using supported video and audio codecs, but I guess as they are videos you would store on those devices anyway they should be fine.

The first thing to note was the new HTML5 tags to integrate the HTML video.  There is now simply a <video> tag that can be used to incorporate video into your webpage.  The issue is what video codecs to use in order to display your video.  As usual different browser behave different and support different video and codec types, so the first thing is to get your video into the correct format.

I quickly found that for each video that would be displayed on the website, we would need to encode the video in three different formats.  The first of these is the familiar H.264 video codec.  This is usually wrapped in an MPEG4 file and is recognised by Chrome, Safari, IE9, iPhone (iPad) and Android.  The second is the less well known Theora codec which is wrapped in a .OGV file.  This is compatible with Chrome, Opera and Firefox.  As you will notice it is only Chrome that supports both types and therefore to make sure that all users can see your videos you will need to include both types.

But what about users that are not using an up to date browser?  These users will need to relay of the older (although still widely used) flash (.flv) format.  Therefore you need to encode you final video in the .flv format or you could use a video sharing service such as YouTube.

In order to enable all three of these videos, so that all browsers and configurations are covered, the following code is used:

<video width="480" height="272" controls>
    <!-- used for HTML5 enabled browsers -->
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <!-- fallback for none HTML5 users -->
    <p id='preview'>In order to view this content you need to enable javascript in your browser.</p>
    <script type='text/javascript' src='swfobject.js'></script>
    <script type='text/javascript'>
        var s1 = new SWFObject('player.swf','player','480','272','9');
        s1.addParam('allowfullscreen','true');
         s1.addParam('allowscriptaccess','always');
         s1.addParam('flashvars','file=video.flv');
         s1.write('preview');
    </script>
</video>

You can see that the first part of the code above is the HTML5 video.  We have embedded everything inside the new HTML5 video tag.  What this means is that first of all the browser will use the .mp4 version of the video, however browsers that can’t play that will then display the .ogv version of the video.  Any browser that doesn’t use HTML5 will not understand the video tags used and therefore will simply use the code inside the <script> tags which uses the JW Flash Player.

This works really well but what I wanted to do was to give the user the ability from with a post or page to add the video URLs (for all three codecs) as well as the height of the video.  To do this I have utilised WordPress custom fields in order to store the information for the video URLs.  Therefore the code above has been turned into something like the code below in order to pull the video URLs and the height of the video from the current post or pages custom fields.

<video width="480" height="<?php echo get_post_meta($post->ID, "th_videoheight", true); ?>" controls>
    <!-- used for HTML5 enabled browsers -->
    <?php if ( get_post_meta($post->ID, "th_mp4videourl", true) ) { // checks if an mp4 version of the video has been added ?>
         <source src="<?php echo get_post_meta($post->ID, "th_mp4videourl", true); ?>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <?php } ?>
    <?php if ( get_post_meta($post->ID, "th_ogvvideourl", true) ) { // checks if an ogv version of the video has been added ?>
         <source src="<?php echo get_post_meta($post->ID, "th_ogvvideourl", true); ?>" type='video/ogg; codecs="theora, vorbis"'>
    <?php } ?>
    <!-- fallback for none HTML5 users -->
    <p id='preview'>In order to view this content you need to enable javascript in your browser.</p>
    <script type='text/javascript' src='<?php bloginfo('template_url'); ?>/videoplayer/swfobject.js'></script>
    <script type='text/javascript'>
        var s1 = new SWFObject('<?php bloginfo('template_url'); ?>/videoplayer/player.swf','player','480','<?php echo get_post_meta($post->ID, "th_videoheight", true); ?>','9');
        s1.addParam('allowfullscreen','true');
        s1.addParam('allowscriptaccess','always');
        s1.addParam('flashvars','file=<?php echo get_post_meta($post->ID, "th_flvvideourl", true); ?>');
        s1.write('preview');
    </script>
</video>

In the code above you will notice that all the code starting with th_ is the custom field names that have been used.

The next thing that I did was to looks for a piece of software that I could use to encode my videos in the correct formats.  I came across a piece of software for Mac called Evom which enables you to choose to encode for HTML5 and therefore it produces video in the 2 HTML formats (.mp4 and .ogv).  I then used the Adobe Flash Video Encoder bundled with Adobe CS3 suite to make the flash version.

This code therefore enables HTML5 video with a WordPress install as well as using a more traditional flash player to cope with legacy browsers.  I hope you find this post useful and as usual please comment with any questions/feedback.

The kit consists of a plastic case for your iPad which can stay on the iPad all the time and act as a suitable case and a wall mounting disc which is the patented wall mounting part.  The idea is that you fasten the wall mounting disc to the wall and then this slots into the back of the case on the iPad.

I have to say that initial impressions are extremely good and I am probably looking at purchasing a second or even third wall mounting disk from the Wallee store so that I can mount my iPad in several locations.  It was very easy to install and requires just some simple DIY tools.  Well done to The Wallee for a great product.

Lets think a little about how your website points to the current server. Usually the domain registrar is the service which controls the DNS for your domain name. This means it controls where your website is stored i.e. which server it is on. Something there could be some different name servers set by the registrar but you will need to change these anyway.

The first stage is to copy all of the data from your WordPress site. Your consists of 2 elements that need to be copied.  The first are the files. This is the WordPress files that make your website run in WordPress including  your theme, plugins and all your uploads. Therefore what I always do is run a backup of all the files on the server. If you are using a cPanel host this is very easy.  Click on the backups icon on the cPanel home screen and then click the button which says home folder.  This will download all the files to your computer that are on your website.  Once download unpack the compressed folder and you are interested in the public_html/ folder as that is where all your website files are stored.

What I now do is compress all these files into a ZIP file as it makes the site easier to upload to your new host.  Select all the files in the public_html folder and then compress them into 1 ZIP file.  Then login to the cPanel on the new host and upload this ZIP file to the public_html/ folder. Use the cPanel File Manager tools in order to extract the files to the same folder they were uploaded too.

Now for your database which is the second thing that makes your WordPress website work.  In the cPanel of your old host, click on the phpMyAdmin icon.  Once loaded select the database that is being used for your site from the list on the left. Now click the export button.  Make sure all the tables are selected as well as the Save As check box at the bottom and click go.  A .sql file will now be downloaded to your computer.

Next step is to create a new database with your new host and import the tables that you have just exported.  In the cPanel of your new hosts in the databases section, click on the MySQL Databases icon and then create a new database and user.  Add the user to the database and grant all privileges.  Now go in phpMyAdmin in the new host and select the database you have just created on the left.  Click on the import tab along the top.  Choose the .sql file that was downloaded from the old host and then upload this.  Once done you should get a message saying that a certain amount of queries were executed, thats fine.

There are now just a couple of steps left to take.  The first is that you will need to edit your wp-config.php file in order to reflect the new database and user details.  Use the cPanel file manager to load that file and make the changes for your new database name and user as well as the password that you set when you created the new database and user.  Don’t forget to save the file.

Last but not least you will need to point the domain at the new host. This can either be done my changing the name servers to the new name servers given by your host or adding A records with your domain registrar to point to the new IP address of your server.  Once you have done this is could take 48 hours for the DNS to propagate around the Internet and therefore I would leave both your old and new sites live, and don’t make any changes to them during this time.  After a couple of days you can remove your old server and everything should be fine.

A quick search on the Internet and you will find several offerings of different solutions of how to shorten URLs using your very own domain for example Google offer a url shortening service for their domain app customers.  However some of these seemed quite complicated and I just wanted something really simple. As I was not bothered about statistics or anything I just wanted something where I could enter the domain I wanted to shorten, press go and then it would provide me with a shortened URL using the domain I wanted.

My first tasks was to find a domain that I could use or this shortening.  The first requirement of such as domain was that it was short (of course!).  I also wanted it to represent Equal Web Creative and therefore I tried all sorts of three letter dot two letter domains. To my surprise the only one that I could get that was reasonably priced was http://eqw.be. I purchased this and then added it to my hosting package.

The solution that I settled on was a shortening script by Shaun Inman called Lessn. This seemed to tick all the boxes as it was simply and worked with PHP and MySQL, tools that I am fairly familiar with.  I download the script followed the very simply instructions in the readme/txt file provided and hey presto, my very own URL shortening service using a domain of my choice.

When clients forget to click the File URL button it means that when they click on a link, instead of being show the file that they think they are linking to they are shown the post that WordPress creates for that attachment.  If the attachment is an image this not a major issue as you can include a custom image.php file in your theme folder and make that page looks nice. However if the link is to a PDF for example the user is simply presented with another post with the same link in that they just clicked on.  Worse still is that if the author has not added a title tag to the attachment they will see an ugly link.

First I wanted to see if there was a way to make WordPress default to the File URL rather than always placing the Post URL in the attachments link option. I drew a blank on this search but then came across a handy WordPress function called wp_redirect().  What this does is redirects the user to an absolute URL.  Therefore I combined this with wp_get_attachment_url() and hey presto, everytime a link is clicked to a file that has been uploaded in WordPress, whether an image or not the user gets sent straight to the files location and not the attachment post.  The code I placed in my attachment.php page is below:

<?php wp_redirect(wp_get_attachment_url()); ?>

Thanks to WordPress’ comprehensive template tags the function to test whether or not a user is logged in or not is already present. By combining this function with a php if statement we can check whether the user is logged in and then display something accordingly.

The code below is the code to use in order to use the is_user_logged_in(); function:

<?php if(is_user_logged_in() ) { ?>
  <!-- place here whatever you want to show to logged in users only -->
<?php } else { ?>
  <!-- place here the content that you want available to everyone -->
<?php } ?>

So how might you take advantage of this feature?  There are lots of ways when this can be of use in a WordPress theme.  I have used it several times and below is an example.

In this example the site has been used in order to protect content for teachers on a site that students are using.  WordPress pages are used as lesson outlines and part of this there is a teacher section where notes can be added about the lesson which teachers do not want students to be able to see.  Therefore this lesson information is only displayed to logged in users only.

There are a number things you can use this for.  You could even use it reverse as it were by cleaning up your site for logged in users that don’t want to see information for posts and pages that you would show for normal users.  It will be interesting to how others are using this handy little function.

To start with your will need to install a copy of WordPress onto your server and then activate the multisite capabilities of WordPress.  To do this I followed the excellent tutorial below:

Once you have your installation completed you now have the ability to create multiple sites on one WordPress install.  The idea here is that each of your clients will have a 1 site for their client or project log.  You then create users for each of the people within the organisation that will be working on the site so that they can contribute to the discussion and keep track of the progress that is being made.

The next thing is that you will need a theme for the client sites.  I had a brief look around for a theme that was in the style of discussion rather than pure blogging or a website and quickly remembered about Automattic’s P2 theme.  This is a discussion real time blogged theme that is more conducive to a project logs functionality.  The one major alteration to the code that I wanted to make in this theme was to make it so that pages and posts did not appear unless the user was logged in.  To do this I made use of the WordPress is_user_logged_in() function.  The following was added to the site in order to display the content if the user is logged in and to show a login form if the user is not logged in:

<?php if(is_user_logged_in() ) { ?>
  // continue with theme code
<?php } else { >
  <?php
    // get the login form file
    get_template_part( 'loginform' );
  ?>
<?php } ?>

The next thing I wanted to do was to make the users login from a standard page that was linked to on the Equal Web Creative site, labelled client login.  Therefore a created a very simple theme on the main network site that consisted on an index.php page in the same design and style as the main Equal Web Creative site that contained a login page.  On submit this redirected the users to the main sites dashboard.  Here is how this was done:

<form name="loginform" id="loginform" action="<?php echo site_url('wp-login.php', 'login_post') ?>" method="post">
  <p>
    <label><?php _e('Username') ?>
    <input type="text" name="log" id="user_login" class="input" value="<?php echo $user_login; ?>" size="15" tabindex="10" /></label>
  </p>
  <p>
    <label><?php _e('Password') ?>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="15" tabindex="20" /></label>
  </p>
  <?php do_action('login_form'); ?>
  <input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Log In'); ?>" tabindex="100" />
  <input type="hidden" name="redirect_to" value="<?php bloginfo('url'); ?>/wp-admin" />
  <input type="hidden" name="testcookie" value="1" />
</form>

It is the last part of line 12 above that takes the user to the main blogs dashboard.  The problem here was that I wanted them to go to their own project log site rather than this one.  To do this I removed them as a user of the main blog through the Super Admin panel in the WordPress dashboard.  Once this was done it meant they we redirected to the dashboard of their primary site which was their own client or project log.

The final step here was that I wanted them to go straight to the front end of the site and not into the dashboard.  In fact there really is no need for the clients to see the dashboard of WordPress in this setup.  I Googled and searched for this for a long time but eventually settled on this rather botched way of doing it, using a javascript window redirect.  This code is placed in the P2 themes functions.php file in order to redirect none admin users from the dashboard to the live site:

<?php
// widget dashboard content
	function my_wp_dashboard_test() { ?>
	<?php if ( current_user_can('manage_options') ) { // checks whether the user is an admin ?>
		<p>Welcome to this Equal Web Creative Project Log site.  As you are seeing this it means you are a site admin!</p>
	<?php } else { ?>
		<?php // if the currnet user is not an admin of the site then they are redirected to their primary sites homepage
			$user = wp_get_current_user();
			$details = get_active_blog_for_user( $user->ID );
			$addr = $details->siteurl;
        ?>
        <script type="text/javascript">
        <!--
        window.location = "<?php echo $addr; ?>"
        //-->
        </script>
    <?php } ?>
<?php } ?>
<?php
// add Dashboard Widget via function wp_add_dashboard_widget()
	function my_wp_dashboard_setup() {
		wp_add_dashboard_widget( 'my_wp_dashboard_test', __( 'Site Information' ), 'my_wp_dashboard_test' );
	}
// use hook, to integrate new widget
	add_action('wp_dashboard_setup', 'my_wp_dashboard_setup');
?>

Basically this code adds a new dashboard widget to the sites dashboard. In that widget it first checks to see if the user is an admin of the site.  If they are it simply outputs a paragraph telling them so.  If they are not an admin it gets their primary sites ID and then redirects them to that site using the javascript window.location function.

And there you have it.  No doubt there are several things within this that could be done better a neater and if you have any feedback on this then please let me know below.  I hope you find it useful.

For a long time I blogged over at penny4them.com.  On that blog (designed by me) you will find all sorts of posts about anything and everything.  So why move the blog over to this new site and start a fresh you might be saying?  Well that is an excellent question so let me try and answer.

For a while now I have been looking for an online brand name.  Having a name like Mark Wilkinson, which is very very common means that I have no chance in obtaining my own domain name and even getting my own username for online facilities and services such as twitter and gmail is impossible.  Therefore I wanted to come up with something that would be good as well as being unique.

So why Equal Mark then?  Well I got the Equal part from my original freelance work that I did for Equal Design.  It seemed to sound good and all of the domains (except .com which I will come onto in a minute) where available.  I was also able to get almost all usernames for many online services with this name and so I went for that.  You will find me as ‘equalmark’ as most things in and around the web.  I said every domain except the .com domain which has been bought by a company who are trying to sell it on.  They want a whopping $1600 for domain.  I offered them $300 about 9 months ago but they declined and it is still for sale today.  I reckon they would have been better off with my $300 in their account, but its not up to me, hence the reason why this blog is at .net and not .com.

The Design

I have pondered for ages over what design to use for this blog and finally settled on this one.  I think my main problem was that I just not had time to work on my own sites.  I have been so busy building WordPress websites for others that I have not had any time to sit down on my own site.  So I came to the conclusion that I was going to use a theme already on the market and then do some minor changes to make it mine.

Last night I came across a new site from Nick La and a colleague that had been newly launched called themify.me. Knowing the designs that Nick has produced as well as some other WordPress themes I thought these were going to be something special.  I spotted the Sidepane theme and thought that it was just what I was after.  I purchased the theme and then got to work on some customization applying my own skin using their new framework which was easy enough. About 40 minutes I arrived at the look you are looking at now.

I am a little disappointed that I have not had the time to create this sites theme myself but I am pleased with the results and the sites does exactly as I want.

The Content

So what sort of content are we going to be posting on here?  Well I think the answers is really I am not sure, but I can say what I think will end up on here. I would like to post about the solutions that I have produced using WordPress on many of the client sites that I have created with equalwebcreative.com.  I can also see me posting photos here and things to do with family life, so I suppose it is a classic personal blog with a mix of all sorts but with some distinct topics running throughout.

No doubt it will evolve over the next few weeks and shortly I shall be pulling some posts over from Equal Web Creatives blog as they have more relevance here I think.

When using the CSS hover selector and using background images, these however background images do not load when the page loads, only when they are called on hover  and as a result give a delay before the image is displayed.  In this post I will explain how I get around this problem using some simple ideas with HTML and CSS.

Hover selectors are always a good idea to use as they give the user an indication of which link they are currently over and about to click.  In some more complex designs, perhaps where there are images of buttons in the navigation rather than just text, you will need to assign these as background images.  It is often the case that the background image needs to change when the user hover over the button and therefore you assign a different image to the :hover part of your CSS.

The problem arises when the user first rolls over the button as the hover image is only loaded with the browser when the user rolls over the image.  Therefore the user sees a rather ugly delay.  You can use javascript on order to get around this problem and pre-load the images, however I like to keep it simple and simply add the hover images in normal <img> tags right before the close of the web pages <body> tag.  When doing give them a class and name the class hidden.

Now create a CSS rule for the hidden class and simply give this display: none.  What this does is it means that these images are loaded when the page is loaded but you cannot see them because they have been hidden with CSS.  It also means of course that because they are already loaded, when a user hovers over the button which has the image as a hover image the images will load straight away.