The new EU Cookie Law and Google Analytics

April 30, 2012

With the arrival of the new EU Cookie Law, Google Analytics will be targeted as an ‘undesirable’ use of cookies without user consent. This means that websites using Google Analytics will have to display a popup window to arriving visitors, letting them know that the website uses cookies and asking if they consent to their use.

If ever there was a law created for the internet by people who have no idea how the internet works, this is it. Even the ICO website (the lawmakers) took months to comply with its own regulation, and there is still a huge amount of ambiguity about the best implementation of these consent windows.

A few things do seem to be clear:

  • Google Analytics is not exempt from the law
  • Cookies that track items in a shopping cart through to check are exempt
  • Implied consent is not acceptable in the form of a simple privacy page explaining what cookies are used
  • Most people will ignore the law and wait to see what happens

Tinstar has put up this page in answer to the law, although whether it will satisfy the lawmakers remains to be seen. It will, however, not ruin a visit to the website and will not make the internet more ugly and user-unfriendly.

More information

BT Connect E-mails Go Missing

April 5, 2012

Had I written at length about my epic struggle with BT over the last year or so, (during which time the consolidation of my phones and broadband turned into what I can only describe as a targeted campaign of poor customer service and erroneous billing), this category (Named and Shamed) would be overflowing with ranting posts.

Now that the dust has settled I thought I had better upload the results of a problem I have been having with my BTConnect e-mail account. I had noticed that the account (which I use only occasionally, fortunately) had been suspiciously quiet for a couple of weeks. I sent a couple of test messages this morning, and sure enough – no e-mail was arriving despite the fact that no ‘receive error’ was displaying.

After trawling forums for similar distress stories (of which there were many), I saw that most were blaming an over-active spam filter. So I went straight to the horse’s mouth and logged into my BT online account. After clicking on ‘Your E-mail’ I was presented with a Microsoft-esque screen welcoming me to my new account: Welcome to Office 365.

Interesting.

I then clicked the (pink) login button and entered my BT e-mail address and password – and sure enough, all my missing e-mail was displayed in an online mail window. Including the test messages I just sent.

How do I manually set up my POP email client using Microsoft Office 365?

I found this page:

http://btbusiness.custhelp.com/app/answers/detail/a_id/18845

entitled: How do I manually set up my POP email client using Microsoft Office 365?

A list of options send you to your e-mail client (even catering for Apple Mail!):

After following the instructions, my BT Connect account inbox started filling up with all my missing messages. I hope you have the same success…

Adding Page Content to a Different Page in WordPress

March 22, 2012

With thanks to this post, this snippit of code (when added to a template) will allow you to create page content (or several pages) that can be inserted into another page, thus making any content management a little easier to cope with by a client. For example, instead of editing one big page with a variety of content (and risking damaging the layout), you can just edit single blocks of text that will automatically appear on your designated page.

<?php // Create second WordPress loop $page_content = new WP_Query( 'pagename=page-slug' ); while( $page_content->have_posts() ) : $page_content->the_post(); // Your content output goes here echo '<h2>'; the_title(); echo '</h2>'; the_content(); endwhile; // Don't forget to reset the post data! wp_reset_postdata(); ?>

If permalinks are set to default, pagename=page-slug becomes page_id=8 (substitute ‘8’ for the actualy page ID number).

Save YouTube Videos to Your Hard Drive on a Mac

March 9, 2012

If you have a Mac and you want to download YouTube videos to your hard drive (as we recently had to do for a client), here’s how.

METHOD 1

You need to download the VLC video player in order for this to work.

Step 1 – Copy the URL of Video you want to download from YouTube (select the website address at the top of Safari and copy the whole thing).

Step 2 – Open the VLC program. Select FILE/ADVANCED OPEN FILE… from the menu. Click ‘Network’ and paste the address into the URL field. Click Open.

Step 3 – Select WINDOW/MEDIA INFORMATION… A window will open up with ‘Location’ at the bottom containing the online address of the video. Select and copy this address.

Step 4 – Go back to Safari and open a new window. Paste the address into the Safari address bar. Select WINDOW/DOWNLOADS and you should see the last thing on the list in the downloads window is a file called ‘videoplayback’. Click the little magnifying glass to the right of the file to locate it on your hard drive. It would be a good idea to rename the videoplayback file to the name of the video so you know what you’re looking at when you play it back later.

Step 5 – Drag the file from the downloads folder over the VLC video player window and you should now be able to watch the video offline…

METHOD 2

In Safari, go to the video you want to watch in YouTube. Whilst it is playing, select WINDOW/ACTIVITY. Look down the list of items displayed under the name of the page you’re on. There should be one much bigger than the rest (in terms of file size). Double click this one and a file called videoplayback.flv should appear in your downloads window. Once it has downloaded it you’ll be able to play it back offline (assuming you have a Flash player available). VLC player will also play Flash videos so you could just open it in there.

Add Identifying CSS Class to WordPress Caption Boxes

February 23, 2012

It’s been a source of some irritation up to now that WordPress caption containers have been somewhat unwieldy when it comes to styling. I really wanted them to behave differently depending on what size image they contained, and whilst the images have identifying hooks (like size-large & size-medium etc) the caption containers just displayed wp-caption and wp-caption-text (other than the dynamically generated individual image identifier).

What I had to do in the end was ‘hack the core’ and make a very slight adjustment to the includes/media.php file as follows:

I changed this line (approximately line 745):

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”width: ‘ . (10 + (int) $width) . ‘px”>’

to this:

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . ‘imagesize’.$width . ‘ ‘ . esc_attr($align) . ‘” style=”width: auto”>’

This achieved two things. First it removed the automated additional 10px width added to the box (taking the image width and adding 10 pixels). Secondly it added a CSS class after the wp-caption entry. This becomes imagesizexxx. The xxx becomes whatever the image width is. That way you can specify exactly how you want the caption box to behave depending on what width image it contains.

Problem using the WordPress App to edit a self-hosted blog

February 20, 2012

If you want to edit your WordPress self-hosted blog using the iPhone or iPad App, you may come across an error message that reads: “http/1.1 405 Method Not Allowed”. The reason for this is that the file in the root of a WordPress blog that smart devices access for editing purposes: xmlrpc.php is often used by hackers to access a website and cause malicious damage. For this reason Web Hosts take a flamethrower approach by blocking all access to the file.

I ran across this issue whilst trying to add a blog to an iPad version of the App. The blog is running on WordPress 3.3.1 and I managed to solve the problem by following these steps:

  1. Rename the xmlrpc.php file via FTP (found in website root) to xmlrpc_whatever.php
  2. Through WordPress Dashboard, click on Plugins / Add New and search for Rename XMLRPC
  3. Install Rename XMLRPC plugin but don’t activate it
  4. Find Rename XMLRPC plugin in list and click ‘edit’
  5. Locate the line that reads:
    $renamed_xml_rpc_filename = ‘xmlrpc2.php’; //CHANGE THIS pointing to the renamed file
  6. Change the filename xmlrpc2.php to xmlrpc_whatever.php and click Update File
  7. Activate the plugin
  8. In the WordPress Dashboard, go to Settings / Writing
  9. Near the bottom of the page find and tick the checkbox: Enable the WordPress, Movable Type, MetaWeblog and Blogger XML-RPC publishing protocols.
  10. From your device WordPress App, add a self-hosted WordPress blog and make sure the address is: http://www.yourwebsite.com/xmlrpc_whatever.php

This should now add the blog without further error.

CSS3menu.com Menu Drops Down Behind Flash Element – Four Fixes

December 6, 2011

In an effort to improve the Google crawl rate, loading time and general SEO good practice on a number of our clients’ websites, we began to replace some of the older Javascript menus with CSS3 versions.

In order to speed up the coding process I searched around to see if I could find a CSS ‘menu creator’ which could do the donkey work, and which would create CSS that I could subsequently edit. Thus I came across css3menu.com which seemed to tick the boxes.

I bought a license and went to work. Initially I was a little disappointed that there wasn’t much control over the features, such as drop shadows etc. There only seemed to be an option to select a pre-designed template. If any further editing were required, it was clear that I’d have to do it myself.

What it is really good at though is offering the ability to construct the menu structure quickly and easily. You can also set basic settings such as menu width and submenu fading; although the latter became a thorn in my side…

Once I’d created my first menu I brought it into Dreamweaver to see how it worked within the website, and to ensure that none of the Flash elements were affected. Unfortunately they were. For at least an hour I struggled to get the menu to work in (surprisingly) Safari. All other browsers (except IE6) worked fine – but in Safari the menu was hiding behind the Flash element underneath.

Normally if a dropdown menu disappears behind a Flash element there are a number of possible fixes.

Fix 1.
Adjust the z-index value of the menu DIV to be higher than that of the DIV containing the Flash object.

Fix 2.
Add the following code parameter to the OBJECT tag of the Flash item:
<param name=”wmode” value=”transparent”>

Add the following code parameter to the EMBED tag:
wmode=”transparent”

Fix 3.
If Fix 2 doesn’t work try adding the following code parameter to the OBJECT tag of the Flash item:
<param name=”wmode” value=”opaque”>

Add the following code parameter to the EMBED tag:
wmode=”opaque”

Normally these fixes would help, but in the bizarre case of the CSS3Menu.com menu, it did not. The menu appeared above the Flash item in Firefox, (Windows & Mac), IE7 and 8 and even Opera… but not Safari.

Fix 4.
After pulling my hair out for a while it occurred to me that I had turned off the ‘Open with fade’ option under the submenu tab; but the submenus were still fading in. I found the piece of code in the generated CSS:

ul#css3menu1 li>ul{
opacity:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:opacity 0.5s;}

…and deleted it. The CSS generator had simply ignored my request to remove it from the menu. After doing this, all was well and menu worked perfectly.

One other slight annoyance though… if I entered an ‘&’ character in a menu item, it messed up the code and produced this in the source code:

&amp;amp;

Easily fixed though – I just had to go through with a search and replace with:

&amp;

CSS3Menu.com Verdict

A handy way to familiarise yourself with CSS dropdown menus and a fast way to create the bones of a nicely compliant dropdown menu. There are a few glitches as detailed above, and a very poor help section, but overall I think that the time I’ll save will be well worth the money.

If you want a menu to work in IE6, this one is not for you – although I compromised by including the following script in place of the menu (only to appear in IE6):

<!–[if IE 6 ]>
<span style=”text-align:center;”>In order to correctly view the navigation on this site, please upgrade your browser from Internet Explorer 6 to the <a href=”http://windows.microsoft.com/en-US/internet-explorer/products/ie/home”>latest version</a>. Other browser options include <a href=”http://www.mozilla.org/en-US/firefox/new/”>Firefox</a&gt;, <a href=”https://www.google.com/chrome”>Chrome</a&gt; and <a href=”http://www.apple.com/safari/”>Safari</a&gt;. Alternatively, please navigate our site via our <a href=”http://www.yoursite.co.uk/sitemap.html”>Sitemap</a&gt;. Thank you.</span>
<![endif]–>

Common Paper Sizes – ISO 216 Infographics by Tinstar

December 3, 2011

These rectangles showing ‘A’ paper sizes next to each other are all very well, but wouldn’t it be more useful to have them held up by a person so you could gauge their actual size? Thus the graphics below… Download the Cheat Sheet Page Size Poster here

A0 Paper Size

A1 Paper Size

A2 Paper Size

A3 Paper Size

A4 Paper Size

A5 Paper Size

A6 Paper Size

A7 Paper Size

From this, to this, to this. Sign done.

July 21, 2011

The new Photoshop Cake Filter at work

March 31, 2011

A project for Martin & Co – to turn a house into a cake.Photoshop Cake Filter