How to use the Mail Merge feature of Microsoft Word 2007/2010

Mail Merge is an automated feature of MS Word that enables you to merge a data source( a file that stores fields and records of information, like first name, last name, etc...) into a copy of a document to customize or personalize the document.

The Word 2007 Mail Merge toolbar looks as follows:

Mail Merge in Word is accomplished by the following steps:

Step 1: Set the data document type.
The data document holds the text that repeats for all merged documents.
In the Mailings tab, click Start Mail Merge and select the document type.

Word offers the following types of documents :
Letters:
Use this option for composing and designing mass mailings for which only the recepient information varies.
This document type is also used when sending out a form letter or invoice.
E-mail Messages:
Using e-mail merge, multiple addresses in the To, Cc or Bcc fields can be avoided.
Each recepient can receive a personalized e-mail.
Envelopes:
Use this option for producing envelopes.
Labels:
Use this option to print sheets of labels. Many addresses can be printed on the same page, in different label formats.
Directory:
Use this option when printing a catalog or any other document that requires printing multiple records per page.

Step 2: Associate a data source with the document:
In the Mailings tab, choose Select Recepients.

The various options are:
Use Existing List:
The Select Data Source dialog box appears when you choose this option. Navigate to and select a data source file.Typically, the data source is created in Excel or Access.
Type New List:
If you choose this, click Create, and then use the dialog box that appears to enter names and addresses. If you don't plan to use the entire database, you can use the Mail Merge Recepients dialog box, to select just the recepients you want. To open the dialog box, click Edit Recepient list in the Start Mail Merge group of the Mailings tab.

The recepient list can be refined by Sort, Filter, Find Duplicates, Find Recepient and Validate addresses options.

Select from Outlook Contacts.

Step 3: Design your data document by combining ordinary document features with Word merge fields.
Placeholders can be used when designing the data document for information pertaining to the intended recepient. When you are done, edit your document and substitute Merge Fields for the placeholders. To insert a merge field, position the insertion point where you want the field to appear. In the Mailings tab, choose Insert Merge Field in the Write & Insert Fields group. Click on the field you want to insert.Special sets of merge fields like Address Block and Greeting Line can be inserted to save time!

Step 4: Preview the finished document by testing to see how it looks with different data records.
Click the Preview Results button in the Preview Results group of the Mailings tab. Navigation buttons help you to traverse through the records.

Step 5: Finish the process. Merge the data document with the data source, creating a printed result, a saved document or an e-mailed document.

Your other option is to use the Mail Merge Wizard! In the Start Mail Merge group of the Mailings tab, click the Start Mail Merge button and choose Step by Step Mail Merge Wizard.

Manage WordPress Comments From Your Windows Desktop

Wp-comment-notifier is a small free app for Windows that lets you easily view, approve, reply to, and delete comments from your WordPress blog. Whether you have a free WordPress.com blog or are running WordPress on your own server, this tool can keep you connected to your comments. Unfortunately it only lets you manage comments at one blog, so if manage multiple WordPress-powered sites you may find this a downside. Otherwise, it works great and helps you stay on top of the conversation at your blog.

Unfortunately it only lets you manage comments at one blog, so if manage multiple WordPress-powered sites you may find this a downside. Otherwise, it works great and helps you stay on top of the conversation at your blog.
Get notified with wp-comment-notifier, Download the wp-comment-notifier and install as usual

Run it once it’s installed. Enter your blog address, username, and password when prompted.

Wp-comment-notifier will automatically setup your account and download recent comments.

Finally, enter your blog’s name, and click Finish.

Save Searches in Windows 7 Tutorial

You regularly search for a certain group of files in Windows 7!? So saving searches is a great way to access them more quickly. Here we’ll take a look at how to share and organize searches in Windows 7.
Saving Searches

Anytime you are performing a search, you can click on the Save Search button in Explorer.

Now when you are in Explorer you will see the save searches under Favorites.

Another way to save a search is dragging the search icon in the address bar into your listed favorites list. Like in this example where I searched for “type:flac” and drag the icon to the list

You might also want to create shortcuts to the searches on your desktop for easy access.

17 website optimization tips for Web Developers

First we will talk about some performance rules for your website. One way to check for your website performance is to have the Yslow extension for Firefox Firebug installed. Here is how to install and use the Yslow plugin. And below you can see a picture how it looks like.

After you get the basics with Yslow, you can test your website and in the report view you’ll see the grade note and all the performance tips you could try. Let’s break them down.

1. Make fewer http requests


Here you’ll see how many JavaScript and CSS files will be loaded when someone enters your site. It is best to have a small number as possible by combining them or removing the extra code. The basic idea is: if you want a faster website you have to use fewer http requests. Just remember, not just http requests influence your rendering time. See the picture below.

In order to minimize your JavaScript files you could use JSMin. For your CSS files, try to combine them and use a csscompressor to load fewer bytes (like in this this tutorial). Just a quick remember, copy your CSS rules there, select compression level and how to handle the comments and press “Compress-it”. After that you will see the difference from the original and how much it was compressed in percentage points. Oh, I almost forget please paste the new compressed CSS rules into your file.

Another thing you should have in mind are the images from your website. It doesn’t matter if you use jpeg or png or even gif files, the size it’s all that matters. If you need transparent images, you should use png or gif files if they don’t have too many colors. Just remember to save them “for the web” in Photoshop, or any other image editing program you use. But the best way to compress http requests on images is to use csssprites. Here is a picture showing you how a CSS sprite looks like.

A tutorial on how to use css-sprites is here. Another way how to use CSS sprites is to use SpriteMe.

Another method to maximize the performance of your website is to use a compression method like Gzip. Compression reduces response times by reducing the size of the HTTP response. In order to use gzip you have to place some lines of code in your .htaccess file. If your server is using Apache, you have to know which version of Apache, because Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate. A tutorial on how to implement active gzip compression is here.

2. Place your stylesheets higher in the header

When you have many tags in your head section it is best to place your stylesheets at the top of the head section. The first line in the head section should be the “title tag”. This also helps with search engines. After that you should have your css files placed. Here is an example :

3. Place your JavaScript code at the bottom of the page


When you have scripts inside the your page, they block parallel downloads. An internet browser in general won’t download more than two components in parallel per hostname, accordingly to the HTTP/1.1 specification. If you host your images on different servers, you can have multiple downloads in parallel. This is a CDN (content delivery network ) tip that I will explain later on. But when a script is downloading, the browser won’t start any other downloads, even on different hostnames.

In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

4. Make your CSS rules and JavaScript external

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. If you have inline coding in your html document this means that the code is downloaded every time the HTML document is requested. And also you are increasing the html document size. For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.

5. Use a Content Delivery Network (advanced)

What is a CDN (Content Delivery Network) ?

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen. As your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site. A free CDN example is here. You should consider linking to Google’s CDN.

Not too long ago, Google began hosting popular scripts such as jQuery. If you’re using such a library, it is strongly recommended that you link to Google’s CDN rather than using your own script.

6. Add an Expires or a Cache-Control Header


Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. In this example: a far future Expires header, telling the browser that this response won’t be stale until April 15, 2011.
Expires: Thu, 15 Apr 2011 20:00:00 GMT

If your server is Apache, use the ExpiresDefault directive to set an expiration date
relative to the current date. This example of the ExpiresDefault directive sets
the Expires date 10 years out from the time of the request.
ExpiresDefault "access plus 10 years"

Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes (because the visitors will still get the old page until it expires).

7. Reduce DNS Lookups

The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server’s IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can’t download anything from this hostname until the DNS lookup is completed.

DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user’s ISP or local area network, but there is also caching that occurs on the individual user’s computer. The DNS information remains in the operating system’s DNS cache (the “DNS Client service” on Microsoft Windows). Most browsers have their own caches, separate from the operating system’s cache. As long as the browser keeps a DNS record in its own cache, it doesn’t bother the operating system with a request for the record.

Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the network.dnsCacheExpiration configuration setting. (Fasterfox changes this to 1 hour.)

When the client’s DNS cache is empty (for both the browser and the operating system), the number of DNS lookups is equal to the number of unique hostnames in the web page. This includes the hostnames used in the page’s URL, images, script files, stylesheets, Flash objects, etc. Reducing the number of unique hostnames reduces the number of DNS lookups.

Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.

8. Avoid Redirects

The main thing to know is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be. The meta refresh tag and JavaScript are other ways to direct users to a different URL, but if you must do a redirect, the preferred technique is to use the standard 3xx HTTP status codes, primarily to ensure the back button works correctly. Here’s an example of the HTTP headers in a 301 response:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

The browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers.

9. Configure ETags

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the ETagresponse header.

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: “10c24bc-4ab-457e1c1f” Content-Length: 12195

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

10. Flush the Buffer Early


When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:
...



...

11. Don’t Scale Images in HTML

Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need

then your image (mycat.jpg) should be 100×100px rather than a scaled down 500×500px image.

A bigger image means more bytes to download. And if you scale down that image then you load extra bytes that are unnecessary .

12. Embrace Firefox Extensions

The number of helpful plugins available for the browser is astounding. Here are some of them : Firebug, IE tab, FireFTP, Yslow, FirePHP, Web Developer Toolbar.

13. Utilize Console.log() to Debug

You’ve downloaded the jQuery library, and you’re slowly trying to grasp the syntax. Along the way, you hit a snag and realize that you can’t figure out what the value of $someVariable is equal to. Easy, just do…
console.log($someVariable);

Now, load up Firefox – make sure you have FireBug installed – and press F12. You’ll be presented with the correct value.
Now – multiply this by infinity and take it to the depths of forever and you still won’t realize how useful Firebug and console.log() can be.

14. Compress Your Images Even Further

When using the “Save for Web” tool in Photoshop, we can compress our images in order to lower their respective file sizes. But, did you know that the compression can be taken even further without sacrificing quality? A site named Smush.It makes the process a cinch. So, just before deploying a new website, run your url through their service to reduce all of your images – thus speeding up your website. Beware – the service may convert your GIF files to PNG. You might need to update your HTML and CSS files accordingly. While we’re on the subject, 99% of the time, saving as a PNG is the better decision. Unless you’re using a tacky animated GIF, consider the PNG format to be best practice.

15. Be Wise. Use Snippets.

Many IDEs offer a “code snippet” panel that will allow you to save code for later use. Do you find yourself visiting lipsum.com too often to grab the generic text? Why not just save it as a snippet? In Dreamweaver, press “Shift F9″ to open the snippet tab. You can then drag the appropriate snippet into the appropriate location.

16. Use Cuzillion to plan out an optimal web page structure

Cuzillion is a web-based application created by Steve Souders that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.

17. Monitor web server performance and create benchmarks regularly.

The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.

It’s essential that you are constantly checking your web server for performance issues. If you have root-like access and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.

If you don’t have access to your web server (or have no clue what I’m talking about) you’ll want to use a remote tool like Fiddler or HTTPWatch to analyze and monitor HTTP traffic. They will both point out places that are troublesome for you to take a look at.

Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.

If you have any other optimization tips, please share them. And if you have any questions you can send them at : omarreynoso09@live.com

Mobile App Layout

 

Create a new document 1200 x 950 pixels, set your foreground color to #252625 and background color to #101010. Select the gradient tool from the toolbar then from the top menu bar select a radial gradient.

Once you’ve selected the radial gradient start dragging from the center of your canvas outwards until your left with something like this.

Creating The Header/Navigation
Select the rectangular marquee tool then create a rectangular selection about 140 pixels in height, which spans the width of the canvas.

Fill the selection with a linear gradient using the colors #202123 and #070707.

Now add a stroke to your rectangle using the settings below.

Inside the rectangle add your website title to the left with your slogan. On the right side of the rectangle add a simple textual navigation.

Select your website title layer then add the following layer styles.

You should have something like this.

Creating The Featured Area

Using the rectangular marquee tool drag out a selection about 340 pixels in height and the same width as your canvas. The selection should be directly underneath your header/navigation.

Fill the selection with any color on a new layer underneath your header/navigation. Once you’ve filled the selection add the following layer styles.

Again using the rectangular marquee tool, create two horizontal 1 pixel lines on top of each other. Color the top line in black #000000 and the bottom line in white #FFFFFF, finally set the blend mode to overlay.

Were now going to create the featured area background pattern using the pen tool. Select the pen tool then create a wavy path like the image below.

Fill the path with the color white then add a gradient overlay using the settings below.

Once you’ve applied the gradient overlay we need to remove any excess of the shape from outside of the featured area. Start off by loading a selection around your featured rectangle but keep the wavy shape layer highlighted.

Now go to “Select > Inverse” and hit the delete key. Your pattern should now be inside the featured rectangle only and the excess removed, you should have something like this.

Duplicate your wavy shape then “Free Transform” (Ctrl + T) the shape. Once free transformed rotate anti-clockwise.

Remove the excess of the wavy shape by repeating the process explained above. Repeat the the whole process once more so you have a total of 3 wavy patterns, you should have something like this.

Adding The Featured Area Content

For this part your going to need an iphone or some type of mobile phone, I’m using an iphone from “DeviantArt“.

Drag your desired image onto your canvas then chop off the bottom of the phone using your desired cutting tool.

Inside the screen area of the phone add an image or create an image which best describes your app, I’ve just added an HV-Designs screen shot

Directly underneath your mobile phone create two 1 pixel horizontal lines, fill the top line in black and bottom line in white. Set the layer blend mode to “Soft Light”, you should have something like this.

Add a layer mask to your two 1px lines then drag a reflected gradient over the top starting from the middle of the line and dragging outwards. Doing this should blend the lines in with the background either side.

Select the rectangular marquee tool and a make a selection underneath your two 1 pixel lines.

Select the gradient tool with a radial gradient, set the gradient to “White (#ffffff) to Transparent” then drag the gradient from the top of the selection down.

Add a layer mask to the selection then drag a reflective gradient starting from the middle then dragging outwards, just like we did for out two 1 pixel lines. Finally set the blend mode to “Overlay”.

Finish your featured area off by adding your featured content. I went for a nice bold title with a small paragraph of text, underneath i went for a small list with small icons.

The Left Sidebar

Our sidebar will be relatively simple, start off by creating two 1 pixels lines next to each other. Color the first line in black (#000000) then the second line in white (#ffffff), finally set the layer blend mode to overlay.

Now select the rectangular marquee tool and create a selection starting from directly underneath the featured area, keep the selection pixel close to the divider line.

Once you’ve created the selection select the gradient tool with a linear gradient. Before applying the gradient set your foreground color to #0a0a0a and background color to #101010.

Drag the gradient from the top right hand corner of your selection, dragging the gradient diagonally towards the bottom left corner of the selection.

Using some nice icons dress up your sidebar.

Creating The Content Area

On the right next to the sidebar create your content area, i’ve added a simple but bold heading with a small paragraph of text.

Underneath our bold heading and text i’ve added a small gallery. Select the rectangular marquee tool and create 4 squares.

Add the following layer styles to your squares.

You should have something like this.

Were now going to add our image inside the squares but before we do lets add a 10pixel border. Make a selection around one of your squares then go to “Select > Modify > Contract”, enter 10px in the box that pops up then press ok.

Keep the selection active then paste your image into the selection by going to “Edit > Paste Into”.

Creating The Footer

Make selection around the bottom of the rest of your canvas then fill the area with the color #0a0a0a. Make sure the selection starts directly underneath the sidebar divider line.

Now add the following layer styles to your footer rectangle.

That’s it all done, hope you enjoyed this tutorials, see you all next time.