ajfmedia.

Implied Consent Script: Cookie Law (jQuery)

Ajfmedia — Wed, 20 Jun 2012 16:55:36 +0000

On May 26th 2011 a new cookie law was introduced targeting websites in the EU, it enforced the rule that users were to have the ability to opt out of non-essential cookies being used during their visit to the site. The UK had a years grace period which allowed webmasters to get their website up to a standard in which it complies. Shortly after May 26th 2012, the law adjusted slightly; the responsibility was shifted from the webmaster to the user with “implied consent”. Basically it was the user that was now responsible for blocking cookies as long as the website informs the user what type of cookies are being used and why. In short, by using a website without adjusting the browsers cookie settings, a user is agreeing to the usage of cookies.

I have built this super simple and compact “implied consent” script that creates an alert box that notifies a visitor that cookies are in use on your site and by continuing to use the site they are agreeing to this.

How it works

When the user arrives at your site, the cookie notification appears, if they select “OK” then the box closes and as they navigate through the site the cookie box will remain hidden. This preference is saved by a cookie (oh the irony), the cookie is set to expire in 10 days (this can be customised).

Demo

Click here to see a working demo of the script.
Note* You will need to clear your cookies in order to see the box appear again

Adding the script

1. Add jQuery

If you do not already have jQuery then you can download the latest version here.
You need to add include jQuery in the head of your website like so:

2. Add the cookie Script

You then need to place this script in your head of your site like so:

Download cookieAlert.js

3. Place the box in your HTML

Finally, in Your body HTML:

Customisation

//in this line you enter the URL of your cookie privacy policy
var privacyUrl = "http://www.google.com/privacy.html";

//in this line you enter text for the close button
var closeText = "[ok]";

//in this line you can adjust the cookie expire period (currently 10 days)
createCookie("cookieStatus", 1, 10)

//these lines you can customise the styling of the alert box
    var cookieBoxStyle = {
            position: "absolute",
            right: "10px",
            bottom: "10px",
            width: "200",
            "-webkit-border-radius": "10px",
            "-moz-border-radius": "10px",
            "border-radius": "10px",
            border: "1px solid #ccc",
            padding: "10px",
            "font-family": "Arial",
            "font-size": "12px",
            "background-color": "#efefef",
            display: "none"
        };

PHP Dynamic navigation with active class

Ajfmedia — Mon, 14 May 2012 12:58:38 +0000

So you have moved away from adding the same navigation HTML on each of your static pages and realised you were able to place all the navigation code in one single include file and include that in each of your pages. e.g.

If you haven’t already I would recommend this, because when it comes to altering navigation links, title tags, anchor text, it is a lot quicker to modify the one file, especially if your website is getting bigger and bigger. It makes your working HTML/PHP code a lot tidier and easier to work with.

But you have hit a problem, you wish to highlight to the user which page they are on when they select a link, it used to work when the navigation was static, because you placed an “active” class on the current link in each file, but now your navigation is one file, how can it be done?

It’s simple and can be done in a variety of ways.

Method 1:

First you will need to create a PHP variable that gets the current page: lets create one called “page”… e.g.

$page = $_SERVER['SCRIPT_NAME'];

This can be placed above your navigation code in the same file so it is re-declared each time the page loads.

Then we create our dynamic navigation.




   >Home
   >About
   >Contact

In the above you can see that in each listed item the PHP checks if the current page is equal to a certain page, and if so then it echo’s out a class name which will add a visual indication to user that they are on a page.

You will need to add something like this to your CSS.

ul.nav li.active {
font-weight:bold;
text-decoration:underline;
}

Then if someone selects the “about” page, for example it will style your navigation to appear like this:

Home About Contact

Method 2:

An alternative method would be to check if the URL contains a certain string of characters. This works particularity well with directories/folders, for example if you are linking to a WordPress blog from your dynamic navigation, you can do something like below:


>
Blog

The PHP “stripos” function finds the position of the first occurrence of substring in a certain string, in this case the string is the URL which was used in order to access a page, “/blog/… something…”.

So if the substring of “/blog/” within the current URL does not equal false then echo the class “active”, once again an “active” class style will need to be added to your CSS.

SEO: The different types of links

Ajfmedia — Wed, 11 Apr 2012 16:24:25 +0000

When you hear “Link building“, most people automatically think of one website linking to another. Essentially they would be correct, but depending on how the website is linked to the other website defines what type of link it is. Here is a short description of the various types of links you can gain during your link building campaign.

Contextual Links

A contextual link is a click-able piece of text that is placed within content in order to look as natural as possible, the content should be highly relevant to your chosen topic. The text included in the link is generally made up of a keyword phrase in which you are targeting to rank well for in search engines.

Social Bookmarks

Social bookmarks are links from ‘sharing’ sites, similar to Stumbleupon, inbound and Delicious. Bookmark links are stored as a resource, organised and managed online, they are easy to search and share to other internet users. Social bookmarking must not be confused with Social News links, these are links from places like Reddit and Digg and focus on the social bookmarking of news related items such as technology.

Web Directory Links

Web directory links are links that are placed and categorised in an online directory. The fundamental purpose of a web directory is to link to other websites that are useful and relevant to visitors, however over the past few years this resource service has been abused in the SEO industry by building up unnecessary and unrelated links, stuffing keywords in directories in order to improve rankings.

Authority links

An authority link is a back link from a site that is already trusted by a search engine. This means that the majority of people visiting the site trust the information on that site. Examples of authority websites include Wikipedia or a government site. .gov and .edu sites are often considered as ‘authority’ websites.

Reciprocal links

A reciprocal link is a link agreement between two websites and their webmasters. This is done to provide visitors with quick access to related websites or to show a relationship or partnership between two sites. Nowadays reciprocal linking (for SEO) is seen to be ineffective, but done in the correct way and by linking to the right sites, you can gain authority and traffic.

Comment and Profile Links

Comments links are text links placed within a comment submitted on a blog article. It is an effective method of link building if you comment with a useful and readable response and provide a link to a website that is relevant. Again this method can be abused by spammers, randomly spamming comment boxes with irrelevant gobbledygook. It is most effective if you comment on blogs that are maintained on regular basis. Profile links work in the sense that you place a link on a profile page of a forum or social media site that is indexable.

Press release links

A press release link is a text link building technique that involves placing a link within a news/informative based article. These publications are dependent on distributing content virally on highly exposed websites, blogs and search engines in a short period of time. Generally the article will stick around but get buried deep in an archive, the content will become less fresh and useful but the link will still exist and will remain available for long tail search queries.

How to give yourself a tan and whiten teeth in PhotoShop

Ajfmedia — Sat, 07 Apr 2012 09:11:12 +0000

Today I am going to show you how to whiten teeth and give the appearance of a sun tan in PhotoShop, I will also show you how to remove any blemishes, spots and freckles.

Whitening Teeth

You can clearly see there is some yellowing of the teeth on the original image to the left.

To achieve a brighter look…

1. Firstly duplicate your layer so we don’t work on the original , you can do this by dragging the layer down to the Create a new layer button or by right clicking the layer and selecting Duplicate Layer.

2. Zoom in on your new layer around the mouth by pressing Ctrl + or using the Zoom Tool (Shortcut: Z on keyboard). If you have zoomed in to much, press Ctrl – to zoom out slightly.

3. Then we need to select the PolyGonal lasso tool, by pressing this button in the tools panel (you can select this tool by pressing L on your keyboard).

4. Once the PolyGonal lasso tool is selected, begin clicking your mouse and selecting the around the area around the mouth you wish to whiten. This does not have to be precision job.

5. Once the area is selected, select the Create new fill or adjustment layer towards the bottom of the layers panel. A pop up will appear, then select Hue/Saturation.

6. Select Yellows from the “Edit” drop down list, or alternatively select Ctrl+2. Now adjust the saturation level down until the yellow taint has reduced to your requirement.

7. Next increase the Lightness slider to brighten up the smile. Voila!

Creating a tanned effect

Now I will show you have to give your skin a darker “sun kissed” tone.

1. Again before we begin, duplicate your layer, so we are not working on the original image. If you are continuing this tutorial after completing the above teeth whiting instructions then merge your duplicate layer and the fill/adjustment layer together by selecting them both and right clicking, then selecting Merge Layers. Then duplicate this layer by pressing Ctrl and J on your keyboard. Now you should have your original image (with the yellow teeth), another layer with whiter teeth and a duplicate layer which we are about to work with.

2. Select the Paint Brush tool (Keyboard shortcut: B) and adjust the master diameter to a comfortable level to brush over the face also adjust the brush hardness to about 80%. See image to the right.

3. Next hit Q on your keyboard to go into quick mask mode. The layer will should now have a grey active background to it.

4. Begin painting over the face (this areas you wish to tan), this excludes eyes/teeth/hair. See image to the left. Toggle the Background/forground colour box to remove unwanted brushed areas.

5. When you have finished you should have something that looks like this. (See image to right)

6. Next hit Q on your keyboard and you should see a dashed outline around the face which shows a selection. You will notice currently it is selecting all out the area outside the face. We only want to tan the face so we need to inverse the selection. To do this locate Select from the top menu then select Inverse. You will now see the outline is now highlighting the selection of the face only.

7. Next go to Image which can be located from the top menu, then select Adjustments then Curves.

8. Drag the curve slightly diagonally down and right to increase the tanned appearance. Once you are happy with your tan level. Select Ok.

9. If you find that you appear to be more orange more than tanned; change the mode of the layer to Luminosity , which can be selected from the drop down list located on the layers panel, next to the opacity dropdown. Congratulations you are now tanned!

Removing Spots and Freckles

1. To remove freckles, spots and other marks on your skin you simply need to use the Spot heeling brush tool (Keyboard shortcut: J).

2. Ensure the brush diameter is a comfortable size, this can be adjusted by click on the Brush picker button, towards the top left of your screen.

3. Begin selecting areas of the face you wish to remove. The heeling brush will recreate that area of skin with what it thinks should there, by using patches of skin near to that area.

So now lets take a look at what we have achieved today.

Original Image

PhotoShopped Image

Random Annoyances from the Designer and the Developer

Ajfmedia — Tue, 27 Mar 2012 12:58:01 +0000

I admit I am a bit of a jack of all trades, dabbling in both design and development and I enjoy both to an equal degree. However over time certain things have began to bother me about certain elements of both jobs. Sitting on both sides of the fence I can understand why there is sometimes a massive conflict in the mindset of both parties. Developers generally focus on efficiency, functionality and practicality taking into consideration standards, accessibility and taking pride in a robust and compact framework. Designers on the other hand, unless driven by guidelines, generally care about how sexy the site looks and also how unique the interface is, almost in a pretentious manor.

I have drawn together a personal list of some random grievances when I take a look at websites from both web design and web development aspects.

The Developer will cry when…

1. they see Flash… As you are aware there was a time when there were some things on the web that could only be done effectively with Flash, after all it is an extremely powerful tool. Initially flash filled various gaps in the market, for example before flash, all you could do was a produce a GIF animation to spruce up your site. Before Flash, HTML was very difficult to be creative with, Until CSS and jQuery of course. Flash has a massive disregard for user interaction and web conventions, due to its route through out life as a animation tool, then a design tool, then an interactive environment, than a platform. Flash is now out-dated, inaccessible and poor for SEO.

2. they see in-line JavaScript and CSS… When you start out building sites, you most probably did this without even thinking. Placing CSS styles in your HTML document, in the head with the