Posts Tagged ‘Web Development’

October 6th, 2010

SEO and Internet Marketing

1286400493_Stats I have not been around much because I have been further investigating Internet Marketing and Search Engine Optimization. They tend to go hand in hand in most situations if not all.

Now being a web developer I was always quite versed in SEO and especially the core of it Keywords and have code semantically correct.

What I have not spent a lot of time on until the last couple months is the actual analysis of it all. Competition, the actual keywords, tracking of the keywords to see the trends and even go as far as testing the different testing techniques. Most of it I all ready used in practice but my resent studies have helped me tune my ways of analysis.

Also something to note is that some of the best tools out there are free tools from Google.

Keyword Research The starting point for finding keywords.

Google Search Is genuinely the starting point.

Google Analytics You can fine tune this wonderful tool to do all sorts of tracking if you spend some time on investigating what it has to offer.

Google Webmaster Tools

We did not even tap into paid systems and tools. These are just the simple necessities and Free.

Something that I have been playing with is Google Analytics and all that it has to offer. I am actually building a bunch of new features into my custom WordPress Framework that will leverage a large amount of the Analytics features that most people don’t even know are there.

Keep in mind the newest kid on the block Bing, they also have a full Webmaster Toolbox. I will get into that on the next SEO / IM article.

Tags:


Posted in:

SEO

Comments:

No Comments »

August 23rd, 2010

phpBB3 Custom Pages

Making Basic Additional pages in PhpBB3 is fairly easy if you follow these instructions.

There are 3 basic files needed

  • HTML template
  • your php file, goes in the root of the forum
  • language definition file php

Lets start with the template

open notepad or a code editor of your choice (NOT WORD, OR ANY MS PRODUCT)
Read More…

Tags:


Posted in:

phpBB3 Tutorials

Comments:

No Comments »

August 11th, 2010

Easy Mobile Site with CSS3

CSS3 brings sites to mobile comfortably.

One requirement that is becoming hugely popular in web development is mobile device support.

One of the biggest issues with sites on mobiles is bandwidth.
A lot of it is contributed to the sites style alone.
This can be resolved with CSS3, at least on Android and iPhone.
I tested them myself.
Of course, I doubt Windows Mobile will handle it as IE does not. Maybe the upcoming IE9 will.

On with the code!

To make a site have an alternate theme for the above mentioned phones and maybe others is simple.
No JavaScript required.

Simply make a CSS stylesheet, name it anything, eg. mobile.css
Now in this file you overwrite the widths of the site (main box model blocks).
Making them a max-width of less than 480px.
Make sure you count your padding in there.

In the example I am going to show, I also increase the navigation size for ease on touch screen devices.
I also increase the overall font size. This is easy if you use a Typographic scale like I do. (You will see this also)

Now link in the mobile styesheet with the CSS media=”" property.
In CSS3 you can now use it like this

Select All
1

media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"

The first part only screen and (max-width: 480px) works nicely so we can test it on our desktops in FireFox, Safari, Chrome… Not IE..
The second part , only screen and (max-device-width: 480px) is a device detection eg.(mobile device).

So this complete line linking to the mobile.css will look like this

Select All
1

<link href="mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css">

Add this after you normal CSS linked file so it overwrites it when used.

One other thing we need is a meta tag required for some mini browsers.
The tag looks like this

Select All
1

<meta name="viewport" content="width=device-width" />

Add this line to the top of your sites header by the other meta tags before your CSS links.

Here is a working sample
CSS3 Mobile Device Site Sample
View it in your browser and reduce the browser width to 480px or less and you will see it change.
Or view it in an iPhone or Android phone.

I also included links in this sample to the source code so you can see the code in full.
Here they are again
Index Source
StyleSheet
Mobile Stylesheet

Conclusion:

With simple options like this you can make a lightweight version of any site for these devices.
Simple overwriting backgrounds, CSS image links, etc…..

Nice simple solution with no extra URL re-writes or JavaScripts for detection…
We can only hope this will be fully adopted to all Mobile HTML browsers, and soon.

Tags:


Posted in:

CSS

Comments:

No Comments »

July 5th, 2010

External Links New Window

Open All External Links in a New Browser Window

Expanding on the post about XHTML valid target post.

Lets make this a bit automated using jQuery to search for external links and add a class named external.
As before, these links will be XHTML valid.
Then from the post we are expanding on these links will be automatically opened in a new window.

To start we need to load jQuery in our site, quick and simple we will load it from Google.

Select All
1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Moving on to the code needed for our task,
The Full Code, I will explain following the code.

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jQuery(document).ready(function(){
	//Process links to check if they are internal or external
	var start = "[href*='";
	var local = 'http://localhost/';
	var urlcheck = start + local + "']";
 
	jQuery("a[href^='http:']").not(urlcheck).addClass('external');
 
	//External links should now have a class added to them, lets process this classes action
	jQuery(function(){
	      jQuery('a.external').click(function(){
			window.open(this.href);
			return false;
	      });
	  });
});

The line that MUST BE CHANGED

Select All
1

var local = 'http://localhost/';

The http://localhost/ needs to be changed to the URL of your site.
For example, here it would be http://validwebs.com/

It gets added to the urlcheck variable and used for checking all links against with in the viewed page.
Then the search happens in this line

Select All
1

jQuery("a[href^='http:']").not(urlcheck).addClass('external');

If any links in the page do not have the URL var local they will have the external class added to them.

Then the click function is added to the class external the same as in the original post.

Select All
1
2
3
4
5
6

jQuery(function(){
    jQuery('a.external').click(function(){
        window.open(this.href);
        return false;
    });
});

From that point on all external links with in the site will open in a new browser window.

Tags:


Posted in:

jQuery

Comments:

No Comments »

June 20th, 2010

WordPress 3 New Features

WordPress 3.0 release has some awesome new features added to it.

How about the integration of Multi-Site functionality!

This allows us to have multiple sites for one install.

We can now easily

  • Have multiple sites
  • Show demo sites
  • Allow others to signup for a WordPress site
  • Even sell WordPress sites if you want and have the know how to set it up.

There is a small tweak to turn the multi-site feature on,

Edit your config.php

Before:

Select All
1

/** Absolute path to the WordPress directory. */

ADD:

Select All
1

define('WP_ALLOW_MULTISITE', true);

Now in your Admin Dashboard under tools there will be a Network link.

It is there that you configure your network for multi-site and follow it’s further instructions.

Another new feature is the Custom Navigation Menus.

To activate this in existing themes you have to add the Menu registration function to the functions.php

For single menu simply add

Select All
1
2
3
4
5

add_action( 'init', 'register_my_menu' );
 
function register_my_menu() {
	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}

Then display it by calling wp_nav_menu(); function like this
I’m adding a condition here, you don’t have to.

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14

if ( has_nav_menu( 'primary-menu' ) ) {
   wp_nav_menu( array(
        'sort_column' => 'menu_order',
        'container_id'    => 'page-nav',
        'container_class' => 'my-nav-class',
        'menu_id' => 'menu',
        'menu_class' => '',
        'link_before'     => '' ,
        'link_after'      => '' ,
        'depth'           => 3,
        'theme_location' => 'primary-menu',
        'fallback_cb' => ''
    ) );
}

You can see I added some arguments to it for styling purposes.

A full list of arguments can be found here wp_menu_nav()

One issue with this menu is that it adds the UL element to the menu for you.

This proposes an issue when you want to add a link to your template.

Say you want to add a floated link to the far right of the menu, without adding a bunch of new markup.

You need to use a filter. To do this add a variable to the place you are calling the wp_nav_menu() function like this.

Select All
1

$my_menu =  wp_nav_menu( $then_Your_args);

Now in the functions.php we add a filter that looks something like this

Select All
1
2
3
4
5
6
7
8
9

function wp_nav_menu_add_menuclass($my_menu) {
    return str_replace(
            '</ul></div>', //Find the end of the menu
            '<li id="phone-tab"><a href="#" title="Contact Phone Numbers">Contact Info</a></li></ul></div>', //Add link
            $my_menu
        ); 
 
}
add_filter('wp_nav_menu','wp_nav_menu_add_menuclass');

This will search out the closing UL and DIV elements for the menu and replace them with the new content.

If you want to add Multiple Menu Support simple add an array like this

Select All
1
2
3
4
5
6
7
8
9
10
11
12

add_action( 'init', 'register_my_menus' );
 
function register_my_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' ),
			'secondary-menu' => __( 'Secondary Menu' ),
			'tertiary-menu' => __( 'Tertiary Menu' )
                        'cat-menu' => __( 'Category Menu' ),
		)
	);
}

There are plenty of other examples in the new default theme TwentyTen.
Like adding custom styles to the editor
Eg.

Select All
1
2

//Allows use to add custom styles to the editor
add_editor_style();

Then create an editor-style.css file
See TwentyTen theme for an example.

If you have anything specific you would like me to write about or an example of something you would like me to go over let me now via twitter or use the contact page here.

Tags:


Posted in:

Tutorials

Comments:

No Comments »