More often than I remember, I have spent hours googling for nice, good looking gallery plugins for a variety of reasons. To save you time and frustration, I have put together a collection of posts that detail the various gallery plugins available.

1. jQuery Image Galleries & Sliders – Best Of
   HONKIAT.COM lists 22 gallery plugins in this post.
2. Top 10 Content Slider Plugins for WordPress
   Speckyboy Design Magazine short lists 11 plugins to be used along with worpdress.
3. 10 Pure CSS3 Image Galleries and Sliders
   Speckyboy Design Magazine also features 10 CSS3 based plugins
4. 30 Free Resources for Photoblogging and Image Galleries (WordPress)
   A long exhaustive listing of photoblogging galleries for wordpress blog platform from Speckyboy Design Magazine.
5. Top 14 JQuery Photo Slideshow / Gallery Plugins
   BLUE PRINT DESIGN STUDIO has their 14 top jQuery gallery plugin collection.
6. 11 Photoblogging Plugins for WordPress
   (Anti) Social Development has 11 more wordpress plugins for photoblogging.
7. WordPress Plugins for Photo Galleries
   All Web Design BlOg has well over 50 wordpress plugins for setting up photo galleries! Amazing feat!

1. Search Everything

The biggest flip side of wordpress, according to me, is its search or rather its lack. I can’t understand why they have made it absolutely difficult to locate stuff inside a blog! Search Everything plugin extends searching to inside of tags, categories and even comments should you opt so.

Home Page | Download

2. TinyMCE Advanced

I know I have already discussed this plugin in this blog, but still TinyMCE Advanced needs to be retold simply because of its usefulness. WordPress’ default editor’s lack of features is the life of this plugin. This plugin set can add over 40 new buttons to the toolbar making blogging a pleasure.

Home Page | Download

3. WordPress Database Backup

It’s always good to be prepared. WordPress database backup creates backups of your core WordPress tables as well as other tables of your choice in the same database and mails it to you periodically – once in a day, week or month.

Home Page | Download

4. Twitter Publisher

With the Twitter Publisher plugin you can send automated tweets out when you publish a new post. As simple as that – but very useful.

Home Page | Download

5. Google XML Sitemaps

This plugin generates a XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

Home Page | Download

6. All in One SEO Pack

All in One SEO Pack is a vital tool in managing the search engine optimization strategy for websites, utilizing the automated tools in it which will save us countless hours and headaches in performing the necessary SEO functions of our sites.

Home Page | Download | User Guide

7. WordPress Related Posts

WordPress Related Posts Plugin generates related posts via the WordPress tags. It then adds the related posts to a feed which can, among things, be displayed at the bottom of all your posts. It will help keep people on your site for longer, and get more of your content viewed.

Home Page | Download

8. Hyper Cache

According to the site, “Hyper Cache is a new cache system for WordPress, specifically written for people who have their blogs on low resources hosting provider (cpu and mysql). It has three invalidation methods: all the cache, single post based and nothing but with control on home and archive pages invalidation.” Whatever that means, you will notice improved page response time.

Home Page | Download

9. Remove Title Attributes

Another WordPress goof up. WordPress puts title tags to anything and everything that it can put its hands on. This annoys you most when themes make use of menus. A handy plugin to have under such circumstances.

Home Page | Download

10. AddThis Social Bookmarking Widget

To “Make sharing easy” and they deliver.

Home Page | Download

11. Contact Form 7

A simple plugin to easily setup contact form in a wordpress blog. You can find a demo here.

Home Page | Download

12. ?

Did I miss anything? Let me know.

‘Good artists copy, great artists steal’

— Pablo Picasso (Later made popular by Steve Jobs)

This holds true for blog posts too. Not only does great content matter, nice layout and presentation is equally important. Writers pour tons of hours sprucing up the looks; but many hardly give consideration to the web crawlers that index those pages. Clean HTML is a vital aspect in making crawlers fall in love with your posts.

Giving attention to a handful of rules can make big difference to the way crawlers see and index your posts. Given below are 7 golden rules to keep in my mind while composing a post in wordpress.

1. Enable Kitchen Sink in Post Editor

The native post editor that comes with wordpress doesn’t support many formatting options. If your editor toolbar looks like this:

Click on the button “Show/Hide Kitchen Sink”. You will get slightly richer tool set, like this:

2. Spruce up WordPress Editor with TinyMCE Advanced Plugin

Working with the native post editor, leave you with a longing for more controls. TinyMCE Advanced plugin provides tons of WYSIWIG tags which will make you say “Yeh Dil Maange No More!”

The plugin can be installed and configured in a jiffy.

Step 1: Download and Install TinyMCE

Go to Install Plugins page (Plugins->Add New) and search for “TinyMCE Advanced”

Click Install.

Step 2: Arranging TinyMCE Buttons

This could be a daunting task! TinyMCE is heavily loaded with tons of options such that pick and choose could take you a while.

Go to Tools -> TinyMCE Advanced option and then drag and drop your options to the toolbar.

Head the advice (in red letters) and Save Changes when you are done.

Step 3: Preview and Trial Run

Go back to “Add New” post option to see the plugin in action.

3. Format Proper

It is very important to format a post keeping in mind of the various search engine web crawlers. Since the only way crawlers understands a post is by looking at the HTML tags, proper formatting dramatically improves effectiveness of indexing.

To site a simple example, you can either bold a heading or use header HTML tag as shown below.

4. alt Attribute

alt tag is defined as:

A proper alternate text for images plays a vital role in increasing the visibility in image searches as they essentially describe the image. But even the most popular sites often conveniently ignore this little caveat.

While adding images to a wordpress post, remember to specify a meaningful alt text, like shown below.

The title field doubles as tooltip for the image.

5. Meaningful Category and Tags

While categorising and tagging a post, always keep in mind that those keywords describe the post. It is noticed that crawlers and search engines assign greater weight to these keywords. Use your better judgement while assigning these values.

6. Importing posts composed in MS Word

If you are in the habit of composing your posts in MS Word and finally copy + paste-ing the finished draft, beware. Even though the layout will more or less look the same, if you check the HTML source, you can see that a lot of junk HTML tags are added.

For example, if I pasted this post and check its HTML source, it will look like this.

Initially you may not encounter any issues, but I have experienced that later on when you want to edit something, layout will go over the hill.

If you use the Paste from Word button (paste the contents from the word file into the window that pops up), the pasted post will be clean.

7. Do not use image resize HTML attributes

Another often overlooked mistake is resizing a big image inside the post using HTML tags – width and height. Not only does it increase the download size of the post, also it puts unnecessary overhead on the browser. So it is always advised to properly resize the dimensions of the image, after it is uploaded, using the Edit Media tool of WordPress.

WordPress Media Library’s Edit Media supports resizing, cropping and scaling of images. Use it to appropriately resize the image.

And that’s it!

Now let me hear from you. Share your thoughts below.

Here’s the design for you to download.

Click on the image to go to the download page that has different resolution files

Design

A cinemascope layout was adopted for the design. This decision was made to leave plenty of real-estate available in the desktop even after the full calendar is added. Also this choice of layout makes the central theme of the design to stand out and catch the eye of the beholder.

A metallic background is used to give a premium look. Monochromatic colors are used so that the design will not distract the user when it is in desktop background. Music notes are added to complete the outlook of the company.

Software: Adobe Photoshop
Design date: 25-Dec-2009

We will discuss mainly about two types of optimisations – Image Optimisation and Minifier

Image Optimisation

Anything other than the image data is extra. Strip them off – especially if your site features a lot of images. The following table detail the tools to use.

Minifiers

One of the many methods at improving performance of sites is code minification. “The goal of JavaScript abd CSS minification is to preserve the operational qualities of the code while reducing its overall byte footprint.” For this, use Yahoo!’s YUICompressor . Detailed instruction on how to use the tool can be found here.

Website Analysis Tools

There exists two Firefox plugins to give more insight into the client-server interaction and website as a whole. They are:

1. Yslow

“YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.”

– Yahoo! Developer Network

2. Page Speed

Page Speed is an open-source Firefox/Firebug Add-on from Google. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. Page Speed performs several tests on a site’s web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance. Page Speed can be downloaded from this link.

3. Speed Tracer

“Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).”

4. LiveHTTP Headers

LiveHTTP Headers helps to view HTTP headers of a page during client-server interaction thereby making it easy to debug/locate issues associated with pages.

Reference

To learn more about Web optimisation and how the above mentioned tools can be put to better use, read these books – “High Performance Web Sites” and “Even Faster Web Sites – Performance Best Practices for Web Developers” – written by Steve Souders.

Conclusion

When I first started out to develop a site I had no clue as to where to start and what to do. With this series of posts, I have tried to show you a path. Hope it helps. Signing off wishing you all the very best.

HTML, XML, CSS, RSS and JavaScript can be validated using the following tools – online as well as offline.

[Note: The last item is out-of-syllabus – strictly to be taken as a bonus : - ) ]

What’s next?

Good coding alone is not enough. To bring out the best performance, a site and its components needs to be optimised. Part 5 of this tutorial sums up the series with various ways to optimise your site for best performance.

Nailing bugs can be done with assistance from browsers. We will discuss tools that are available with the three major browsers in the market – IE 8, Firefox 3.5 and Google Chrome 3.0.

IE 8 packs Developer Tools, a powerful tool for debugging layout, CSS or JavaScript associated issues. It is available under Tools menu (Keyboard shortcut F12) as shown below.

Upon selecting the option, you are greeted with the Developer Tools.

HTML, CSS, Script source viewer and Profiler is available. Script allows breakpoints to be set, thus facilitating line by line debugging of JavaScript lines. A detailed discussion on using IE Developer Tools is available here.

Firefox comes naked without any debugging tools. It requires plugin to be installed, called Firebug. Once it is installed, a quick launch icon is seen at the status bar of the browser.

When it is clicked, a window similar to IE’s Developer Tool is cropped up gathering information from the page which is currently displayed.

Firebug is a superior tool than IE’s. Like IE, “F12” acts as keyboard shortcut. To learn the full capabilities of Firebug read this post.

And finally there comes my favourite browser, Chrome. Chrome comes with a Developer Tools of its own available under the page icon.

The resulting tool window has an assortment of tools stacked neatly at the top.

Get familiar with the tools that are available and read this tutorial for a complete understanding of this tool.

What’s next?

Doing things the standard way is time consuming – but it’s always a good practise to stick to, especially since you are starting out. HTML, CSS, JS – all of them can be validated. Part 4 of this tutorial explains how to do this with offline and online tools.

(This tutorial is a part of the series – “How to become a web programmer in 4 easy steps” . Read previous post here.)

Choice of an Editor

My stints with text editors always ended in disaster until I used Notepad++; and I fell in love with it.

Notepad++ is the best text editing software in its category. It boasts of a lot of features including support for a whopping 48 scripting languages and portability.

Reference Material

A reference always comes handy – especially if it is available offline. Free offline materials are hard to find. Given below is a collection of offline and online reference material for HTML, CSS, JavaScript and PHP.

What’s next?

In Part 3 we will learn how to do debugging when it is required.

For every budding web developer, it is extremely important to get himself/herself familiarised with the basic setup required for client-server architecture. On the client-side only a browser is needed. Since all operating systems come with at least a browser, we can concentrate on setting up the server part of the story.

Here’s what you will need:

1. A server – most popular being Apache
2. A programming language – PHP being the most popular among the many available
3. A database manager – MySQL being the most popular

Besides their popularity, all of them are free to use.

How to get them

Either you can install them separately or you can opt for packages that package everything inside them. We will concentrate on the second option since it is very easy to setup for a beginner.

In the pre-packaged section, you have two choices.

or

WAMPP and XAMPP serve similar purpose except that they come from two different vendors. Their installation is fairly straight forward and ample documentation is available in respective sites.

How to get familiarised

To get an overview of the various technologies involved, follow the links.

1. Client – Server architecture
2. Apache
3. PHP
4. DBMS – Database Management Systems
5. MySQL
6. phpMyAdmin

What’s next?

Now that the client-server architecture is setup, next we will talk about

-        choosing a text editor

and

-        procuring lookup materials

in Part 2 – “Editing tools and Lookup materials for becoming a web programmer”.