Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow. Think of what it takes to set up WordPress the old school way:

Downloading the latest version. Extracting the downloaded zip file. Creating a new database. Creating wp-config.php file.

Developing WordPress sites has never been easier with WAMP and Simple WordPress Auto Installer.  The Auto Installer script is now available that allows you to add a WordPress install within the WampServer together with a database, all in one shot, thereby speeding up your local WordPress development.

To make this happen, you will need to download WampServer and the Simple WordPress Auto Installer, both of which are open source and available as free downloads. You will need to install the WampServer first and ensure that it is working. This is usually straight-forward and quick.

Upon downloading the Simple WordPress Auto Installer, you will notice 3 files: installer.php, license and readme.md. To install, simply drop a copy of the “installer.php” file into the root directory of WampServer designated as “www”.

When you open the “installer.php” file, you will see these lines of code:

array( 'label' => 'Latest version', 'url' => 'http://wordpress.org/latest.zip', 'description' => 'Download the latest stable English version' ), array( 'label' => 'Last nightly', 'url' => 'http://wordpress.org/nightly-builds/wordpress-latest.zip', 'description' => 'Download the latest beta version'

You can configure these settings to change the WordPress version as well as the build to your own preferences.

You can also add more languages by including an array like the one below:

array( 'label' => 'French', 'url' => 'http://fr.wordpress.org/wordpress-'.$last_v_doted.'-fr_FR.zip', 'description' => 'Download the latest stable French version' ),

Other global settings you can configure include the default username, database, password and CSS parameters.

Fire up your WampServer and navigate to the installer file we just uploaded using the link below:

http://localhost/installer.php

The Auto Installer will then allow you to configure your local site settings that include; the folder where you want WordPress to go, the database server (which by default should be localhost), the DB name, DB username and DB user password.  From here click `GO` and

the script will then download the latest copy of WordPress, extract the files to the directory you named and will create a new database.

Set your site’s name, username and password and you are ready to roll.

Whenever you need to start a new development project, you will simply fire up the installer using the above link and configure the settings for the new site as we have done. You will no longer need to download WordPress again, set up a database in phpMyAdmin or make any other configuration settings. Everything has been done for you.

...

I recently developed an application that sent variables into a mathematic function. This function needed to have a numeric count of the exactly how many zeros there were in a certain array. For this snippet, we can use both numeric and text based arrays.

I printed it using this code:

Our two example arrays will be:

$array_num = array(1, 1, 1, 2, 3, 4, 4, 4, 4, 4, 5, 6); $array_text = array(apple, apple, apple, orange, banana, banana);

We then put this array into array_count_values()

$count_array_num = array_count_values($array_num); $count_array_text = array_count_values($array_text);

If we print $count_array_num we get this result:

Array ( [1] => 3 [2] => 1 [3] => 1 [4] => 5 [5] => 1 [6] => 1 )

if we print $count_array_text we get:

Array ( [apple] => 3 [orange] => 1 [banana] => 2 )

From these results, we see the exact number of each value in the respective array.

Then we can define the values that we want to know:

$value_num = '4'; $value_text = "banana";

Finally, we can use this code to get the count for how many times the number 4 shows up in our $array_num and how many times ‘banana’ is listed in $array_text.

$result_num = $count_array_num[$value_num]; $result_text = $count_array_text[$value_text];

And of course, echo the results!

echo $result_num; echo '<br/>'; echo $result_text;

Now our page result will be:

5

2

And there we have it, now you can plug those variables in any where you’d like! Feel free to ask any questions below!

...

With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

HTML Issues

Sometimes, the “old-fashioned” methods are still the most effective. While many SEO experts have debated the degree of effectiveness of old-school metatags and how they affect search engine rankings, the common belief is that their presence is helpful, especially since spiders often crawl through much of the text content of each page they index.

Page Title

The first place most spiders crawl through is the page’s title tag. When a search engine finds a word in a title tag that matches the search terms, the results page displays that title in bold text. The bold text catches the reader’s eye and causes a nearly instinctive compulsion to click on that link. As the specificity of the search terms increase, so does the importance of the title tag.

Description Metatag

The next area of the page that the spiders will visit is the content within the “description” metatag. Unfortunately, many so-called “black hat” SEO specialists take advantage of this situation by spamming the title and description tags with keywords that are either tangentially related to the page’s content, or completely irrelevant but filled with “hot” keywords in order to boost traffic. Description content should be relevant, clear and precise.

Headlines and Subheaders

In HTML4, the header (<h1>,<h2>, etc.) tags specify the headlines and subheaders within content. Not only do search engine crawlers view the content within these tags as important, the tags also help the viewer find the the information they need without scrolling through the entire article. Wikipedia uses this technique to great effect when breaking down its lengthy and specific content.

Architecture Factors

While content is an important component of search engine optimization, the other key part lies in the design and architecture of the site itself. Spiders must be able to navigate through a site and index all its relevant pages quickly and efficiently. Also, the URLs that link pages together within the site can be used as search engine material.

Navigation

Since search engines view pages in much the same way as the least sophisticated browser, an overly complicated navigation scheme (or one that his highly dependent on user input) will hamper the spider’s ability to index pages. Most site architects believe that a site’s navigation structure should resemble that of a cake: two layers is good, three is better, four or more is too much.

Speed

Search engines also place a high priority on how fast a page loads. While Flash-heavy pages can produce stunning animations and eye-catching designs, they also slow down a page’s load speed. Search engines, like users, won’t wait forever for a beautiful presentation: they both want content and they want it now (if not sooner).

URL

Which link tells you more about a product? www.blahtech.com/product.asp?id=234 www.blahtech.com/moisture-balance-il-160.html Most developers understand how to assign a URL to a dynamic page. These links will enable the spiders to collect content and index the page much more quickly.

In a future article, we will address how the new tags in HTML5 will help with search engine optimization.

...

Web developers have a fond love for open source tools not only because these tools are generally free of cost, but they can be modified in any way the developer sees fit. That is actually where the free in free/open source software comes from.

While .NET and other paid technologies and tools do have their place on the Web, it really is open source tools and applications that power it. There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites. The list prepared for you represents 10 open source tools almost any Web developer can use every day:

1. KompoZer

All the fans of Dreamweaver might consider KompoZer the poor man’s choice but actually this isn’t so. KompoZer, the former Nvu, is a WISYWIG HTML editor that, unlike Dreamweaver, doesn’t require an ultra powerful PC just to open a file. KompoZer is a light-weight application but it is a good choice even for advanced programming tasks.

2. Eclipse

Java developers do have a lot of IDEs to choose from. Many of them choose Eclipse because it is convenient to work with. Additionally, it has a PHP plug-in so if you have occasional PHP programming tasks, you can still work in Eclipse.

3. Komodo Edit

Komodo Edit is an editor for Perl, Python, Tcl, PHP, Ruby, Javascript, etc. It is the little brother of their paid Komodo IDE, but even this kind of limited edition has all the perks you will need in your daily work.

4. Apache

Apache is the Web server that no Web developer can go without. Apache is fast and reliable but mastering it can be a bit hard, especially for a beginner.

5. XAMPP

If you want to write Web applications, a Web server is only the foundation. You need other tools, such as the relational MySQL database and the PHP language framework. Installing and configuring them one by one is not rocket science but it is much easier when you get XAMPP – a bundle with Apache, PHP, and MySQL. XAMPP is very easy to install.

6. PostgreSQL

MySQL is a good choice for a relational DB but if you have some reasons not to use it, you could consider an alternative, such as PostgreSQL.

7. phpMyAdmin

phpMyAdmin is another open source application many Web developers can’t live without. It is a GUI  used to administer MySQL databases and it makes the entire  process much easier.

8. Firefox Web Developer Toolbar

Firebug is cute, but if you want something really big and powerful then you should try the Firefox web developer toolbar. It has even more functions than the Firebug plug-in and with it you can literally dissect any Web page to see what’s inside its code.

And for you Chrome addicts out there, there is a version available for you as well.

9. OpenSTA

Once you finish coding your application you are not done yet. You need to test it. While there are tons of tests you can (and should) do, one of the tests you shouldn’t skip under any circumstances is load testing. With the help of OpenSTA you can perform the necessary tests to make sure that your application doesn’t misbehave under stress.

10. Browsershots.org

Unlike the other tools and applications on the list, this one isn’t an application/tool but rather a free service. However, since it is a great helper, I have included it in the list. Browsershots.org allows to you see how your site is viewed in any possible browser. The list of browsers includes almost any browser you can imagine and this saves you the hassle to manually test your site for browser compatibility.

Of course, if I left your favorite tool off this list please share it with our readers in the comment section below!

...

Indexed Database (IndexedDB) is an API for storing data at client side and a proposed standard, still in the relatively early stages of development. With the IndexedDB API, developers can store data objects within the user’s browser. In this tutorial series we will explore the basics of this emerging technology by building a simple note-keeping facility for a Web page or site. Users will be able to add and delete notes, with past notes automatically displaying when the user revisits. The notes are private to the user as they are stored locally. A typical use for this utility could be on a site with informational content, such as educational material.

At the time of writing, browser support is varied – IndexedDB itself is supported by Firefox 4+, Chrome 11+ and the forthcoming Internet Explorer 10. However, readers should note that we will be using methods in this tutorial series that are not currently supported by Chrome (specifically the “onupgradeneeded” method in part 2). It goes without saying that IndexedDB is not a feature you can rely on yet, but it is hoped that Chrome and other browsers will be improving support in the near future. In these tutorials we will be getting to grips with the technology from an educational point of view, but in any live sites you are working on, make sure you don’t use IndexedDB for vital functions just yet.

This series is in four parts:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

The following image should give you an idea what we’re building (pictured in Firefox):

Create the Page

Let’s use an HTML5 page outline as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will be adding code to the body, script and style sections throughout the series. First, add two sections in the page body:

<div id="content"> <h2>Page Content</h2> </div> <div id="note_col"> <h2>Your Notes</h2> </div>

The left side of the page will include the page content, with the note section on the right. Inside the content section add anything you like after the heading, e.g.:

<p>Here is the page content</p>

In the “note_col” div, after the heading, add the following element:

<div id="notes"> </div>

This is where the notes will be displayed. At the moment it is empty, but our JavaScript code will add elements to this when the user creates notes. Next, still inside the “note_col” element, add the following section to capture user note input:

<div id="add">Add a new note:<br/> <textarea id="note_in" rows="5" cols="30"></textarea><br/> <input type="button" value="add" onclick="addNote()"/> </div>

Take a moment to look over this code. We use a textarea to capture the user note text, with the button calling a JavaScript function we will add later.

Style the Elements

Let’s add some CSS for the initial appearance of these elements. In the style section of your page head, add the following section to apply general styling to the page body:

body { font-family:sans-serif; color:#333333; font-size:small; background-color: #ccccff; background-image: -moz-linear-gradient(top,...

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible.

To do this, use the code snippet below:

//keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); //if top of element is in view if (wintop > elementPosTop) { //always in view $('#sidebar-ads').css({ "position":"fixed", "top":"10px" }); } else { //reset back to normal viewing $('#sidebar-ads').css({ "position":"inherit" }); } }); }); })(jQuery);

The above code can also be made into a JQuery plug-in and used on WordPress sites.

Here is the plug-in version of the above code:

/** * jQuery keep element in view plugin. * * @author David Gitonga * @copyright Copyright (c) 2012 DeveloperDrive * @license Licensed * @link http://developerdrive.com * @since Version 1.0 * */ (function($) { $.fn.keepElementInView = function() { var elemPosTop = this.position().top; $(window).scroll(function()...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...