Pablo Otaola Web Design

Six Things to Keep in Mind when Designing a Logo

2010-02-23T09:12:00.000-08:00

I thought this was worth re-posting. It's an article from iStockPhotography...

So you fancy yourself a Paul Rand or Saul Bass and want to design some logos for iStock? Great! You've come to the right place! Logo design needs to begin with a great idea or concept, backed up with some jedi-like vector skills to bring it to life. In this article you'll find some design and technical tips to get you started and keep you on the right track. I've included some important things for you to think about as you are creating, as well as some reminders on how to keep your files technically sound for submission to avoid the dreaded "Subpar" rejection.

Thought and planning are a huge part of Logo design: preparation is key. We've prepared a set of considerations here for any illustrators ready to plunge into Logos. Keep the following in mind during your planning and throughout the process.

Please note: The 'good' versions of logo design seen below were each designed by some of our amazing logo contributors. They'd never dream of submitting anything like the 'bad' files you see here, which we created for illustrative purposes only!

It All Starts With a Great Idea

Start by selecting a Business Category or something that inspires you. Try to envision who the client will be or what kind of company or business may want to buy your logo. Creativity sometimes strikes when you combine a couple of ideas. For example, you may decide on creating a logo for a security company. For this business category you probably would want to convey trust, strength and reliability. This can be accomplished by choosing appropriate subject matter and using style, colors, weight, balance and shapes. The idea could be a bear with strong angular or masculine shapes and bold, dark colors combined with a sturdy font to finish it off.

By clearly visualizing who your client is and with some forethought, research and planning, the end result should be an appropriate symbol that immediately identifies the company, and clearly communicates the product or service. This is absolutely key to a successful logo design and should always be foremost in your mind while conceptualizing your design.

When you have your concept, start sketching it out to quickly come up with ways you can execute the idea. Starting in black and white can help ensure that your design is clear, legible and reproducible without any distracting features. Adding great color, style characteristics, or subtle effects will help make your design unique to stand out amongst the competition. Add some type to bring some context to your design and choose a font that compliments the symbol and communicates clearly. To ensure a successful logo remember to keep your design, Simple, Memorable, Timeless, Versatile, and Appropriate.

Reproducibility

It's extremely important that Logos are created with versatility in mind. As the main component of a company's corporate identity, the logo acts as the cornerstone of their visual brand. This means it must be reproducible using a huge variety of formats and processes while maintaining the integrity of the logo as it is utilized. Logos may be printed on anything like small business cards and pens to extremely large billboards and signage. They need to work well using traditional print methods like offset lithography and screen printing for T-Shirts, as well as other things the buyer may want like rubber stamps, stickers and embroidered golf shirts. Of course, it must also look fabulous on screen for use on websites and other pixel based media. It's a good idea to test your logo file at a monitor resolution of 72ppi at an inch or so wide to see what issues may pop up.

Here are some things to watch out for to keep your design from ending up on top of the reject pile:

— Consider carefully how much detail to add to your logo design. Lots of small shapes and skinny lines should be avoided as they could disappear or print very broken and rough when reduced to small sizes.

— The white spaces, or negative spaces, between shapes should be consistent and not too close together or they may fill in causing a loss in the definition of objects.

— Gradients should be used selectively, creatively, and only when they enhance the design. At one end, if tints are too light, they can disappear when printed and only show up as white. Conversely, dark tints can fill in to solids causing the logo to look muddy and unclear which can happen easily when printed in a newspaper. Also, gradients may not work with some reproduction processes that can not use continuous tone.

— It's easy to get carried away with our design by adding tons of fun and interesting things but the bottom line is it has to reproduce really, really well. In the end, ask yourself, "Does this help or hinder my design?" If the logo communicates the intended message just as well (or better) without it, take it out.

The excessive use of detail in this logo will seriously compromise its ability to be reproduced. Fine details like the sharp pointed tail and thin lines will disappear when printed at smaller sizes and the small white shapes will fill in losing their definition. Outlined type with extreme gradients will print poorly as well, making the type hard to read at any size. On the right, the elephant is drawn with bold shapes, leaving ample white space in between for definition. Just the right amount of detail is used to help convey the idea and the solid flat colors used will ensure that this design will reproduce great with pretty well any process. I wouldn't recommend using multiple colors like this in the type all the time but in this case it works to make it fun and exciting.

In these examples the differences are noticeable mostly through the addition of a heavy black drop shadow and the application of gradients to every shape. Gradients can work when used sparingly but in this case they are far too severe, and would look dreadful at a small size. The tiny hairline strokes on all the shapes will also be problematic especially when this logo is printed as a 4 color process job. The example on the right is clean, clear, and looks great at any size.

Reversals. What the heck are these?

Nope, we don't want you to create a mirrored image of your design and it is not necessarily a negative. A Reversal Logo is simply a version of your file that is created to ensure it looks great when used on black or dark colored backgrounds. Logos with dark or mid-tone level colours may not be visible so another version is needed. Again, its all about versatility so the buyer can use your logo design anywhere they want. A common method of doing this is by changing all of your colors to white. It doesn't have to be all white, as light or bright colors may be used, but by using white, you are keeping it neutral and making it usable on a large spectrum of dark colours. It also gives the client an added bonus of having a 1 color version of the logo if you chose to not create a solid Black Version or created a Black Version with tints of grey. Solid, 1 color logos are great to use as watermarks or as a reference for a die-cut or foil stamp.

Please do NOT place any kind of colored box behind your design. "But no one will see my design!", you say with despair! Yes, it looks invisible as it is now an all white logo in an all white document. Don't worry, we've thought of that! When you upload your white PNG file (with transparent background) it will show up on a nice black background conveniently supplied by iStock so your wonderful creation will be available for all to see.

The concept of a 'reversed' logo design can be confusing if you've never designed a logo before. In the example on the left, there is a black box placed in behind the design. While it may look nice on screen, this could look awful if the logo was placed on top of a photograph or different colored background. The logo itself has also been 'reversed' by mirroring the design! The example on the right shows an all-white logo selected in Illustrator: No background necessary. This design is ready to place onto any color the client wishes.

Color Palette

Never underestimate the power of color! There is so much emotion inherent in color and its psychological power can be extremely persuasive. Warm, cool, neutral, vivid, complimentary, analogous, soft, light, dark, bright, saturated — all of these color types can be used effectively to enhance our intended message. How we combine these colors is also equally important as they can create contrast, balance, and weight to help convey our idea.

Have fun choosing colors for your design and experiment with many different options and combinations. Color selections need to be appropriate for the subject matter. For example, it wouldn't be a good choice to use red for a dentist office, that's scary! Red is alarming and can symbolize blood. Instead, choose professional, calming colors. Soft blues or browns may be more appropriate.

Full color logos, or designs that use a large range of CYMK colors can look really great, but can also be very expensive or difficult to reproduce. Consider keeping your design to a couple of colors to keep costs down, and use tints of those colors when more levels are needed. Smaller color palettes can also work to keep logos from looking too busy and cluttered. Be inventive with your color choices and step out of the Illustrator default color swatch trap, there’s a whole world of color to explore!

The sample on the left is using far too many colors than is necessary, making it very busy and more difficult to define the individual objects. The use of fluorescent and uncomplimentary colors makes the overall composition unappealing and less attractive. Using default colors straight from the swatch palette and plain black for the type make the design much less sophisticated than it could be. The sample on the right utilizes a beautiful main palette of custom mixed complimentary colors of orange, green and brown. They all work together in harmony to bring the cute kitties to life while adding a warm and cozy feeling. The use of dark brown for the type keeps it complimentary to the graphic and maintains a good contrast necessary for legibility. Using the same orange that's in the kitties for the "petcare" type offers additional visual interest and helps separate it from the main type. This helps give the eye a break and enhances legibility as well.

Simple is good right?

That's a yes and no answer. YES, logo designs should be simple to effectively communicate an idea and to be easily reproducible. NO, they shouldn't be limited to simplistic stars, circles, ovals, squares and rectangles. It's important to keep logo graphics relatively simple to make them useable in many applications and print processes, but not at the expense of style! Chances are if you create something too simple it may look like like hundreds of other icons out there already. Not good! A company's logo has to work to differentiate them from their competition in order to be successful, and they don't want to buy logos that they could make themselves using Illustrators Shape Tool.

Think about what you can do to add you own style or flair to make your design unique. When designing simple logos it's important to find ways of adding subtle but highly effective visual interest. You can do this by giving equal consideration to both positive and negative space and the careful placement of each shape. Use different perspectives can add tons of visual interest putting a unique spin on your design. A little twist, shape or tapered line here and there can simulate motion or other effects making the design much more dynamic than it would be otherwise. Simply styled directional devices (shapes that lead the eye) can add real excitement. Get in there with the Pen Tool and add some personality!

The left example is very simple in its execution, using only basic square and circle shapes. The placement of all of the objects has left the overall composition looking static and boring while the plain black type is under considered, effectively ensuring that this logo generates about as much excitement as flossing your teeth. The example on the right however, has cleverly used positive and negative space to create the plate. The entire logo is comprised of only four shapes by creating two simple arcs to help define the plate and by letting the cutlery bleed off the bottom edge. The combination of these design choices and using Tragan for the font, give it a simple, classic, stylish feel appropriate for this audience.

The logo on the left is plain, and was created using simple squares, rectangles and triangles. It took literally 10 seconds to draw, so to jazz it up a little we added a snazzy orange outline (which took an additional 2 seconds to apply). The problem is that there must be thousands of simple symbols like this out there. The logo on the right, on the other hand, is also very simple but the designer has kicked things up a notch by incorporating a clever magnifying glass and using reversed gaps in between shapes to create a much more interesting visual composition.

Choosing a Typeface

OK, you've got your award winning logo design in the bag and now its time to add some text and a name. This will help add context to your design and give the buyer a clear idea of how it may be used (like it doesn't already do that!). A quick reminder here to remember to research any name you would like to use to help avoid any potential copyright or trademark issues. You must make sure it is not currently in use by any other company and a quick search on the internet should help you along the way. A safer bet is to stick to generic terms like, Construction Contractor, Attorney Logo, Retail Business, etc. It's not necessary to add a tagline or brand statement but if you do, make sure you have done it in such a way that it works well with the logo and any other logotype and that it is clearly legible without being too small to read.

Next step, read the font licensing agreement for your chosen typeface. Yes, these can be long and boring but it's important to make sure you have the rights to use this font in a manner that is compatible with the sale of your logo to iStock clients. Specifically look for the Usage Agreement section that states it allowable for Commercial Use in this way. Just because your font was 'Free' does NOT mean its OK for Commercial use! Also, 'Free' does not necessarily mean 'good'. Use quality fonts to add to your great logo design to keep the whole package looking good.

Choose a font that is appropriate and looks great alongside your logo. This can mean choosing a font that has complimentary shapes to match the style of your design or match the mood of the idea. A very professional business such as an attorneys office, would require a more formal looking font perhaps using caps or small caps. A font for a children's clothing store could use a more casual, friendly font using lowercase letters. Try not to choose fonts that are too funky or illustrative. Yeah, they're fun but they can seriously compromise the legibility of your logo and are really more for use in headlines, posters and other media.

Keep your type simply colored as harsh gradients, drop shadows and skinny outlines can create issues in reproduction making it very hard to read. Find a good spot to place your text alongside your logo and choose a size that is appropriate. Usually this means aligning it to some part of the logo to keep things looking neat and tidy. Remember to not get to close to the symbol, (give it some breathing room!) and find a size that strikes a nice balance. Again, think about how the logo will be used. Text that is too small in relation to the symbol will be too small to read when the logo is reduced to fit on a business card. A good habit is to test print your logo at about 1 to 1.5 inches wide and see what issues pop up.

Last step, include the name of ALL fonts used in the "Font used" field in step 4 of the upload process. The font field will only appear if you've clicked on 'YES' for the last question on Step 3 of the upload process ("This logo contains a font or typeface that I did not create"). This is because some people don't use fonts in their submissions – when they click 'No', they won't have to enter the font name.

Hard to read? It sure is! Skinny outlines, drop shadows and other effects used on type all work against keeping it clear and legible. The "Tiederhouse" text is too tightly kerned while the "Attorney ay law" type has far too much letter spacing. The type is placed too close to the graphic without enough breathing room and the tagline is much too small in proportion. The "Tiederhouse" text uses the font "Hobo" which is a 70's style font not at all appropriate for a professional law office. The sample on the right uses a much more professional and appropriate looking serif font with spacing and shapes that seem to mimic the construction of the symbol. It's clear, easy to read and is just the right amount of distance from the torch device. Making the line between the text gold colored would have been a nice touch.

We hope these tips give you something to keep in mind as you design your next logo submissions. Happy designing!

Image credits

'Grenade' sketches by 72ppi
'Circus' logo by DistinctiveDesign
'Shrimp' logo by samoyloff
'Love Coffee' logo by samoyloff
'Cat Twins' logo by o-che
'Paper Document Company' logo by filo
'Dining Room' logo by mediaploy
'Real Estate Search' logo by filo
'Torch' logo by lagomar4
'Salmon' logo by samoyloff
Get out of your comfort zone by alvinburrows
Printing Press by Franck-Boston
Splatter by bruce7

Browser Size by Google

2010-02-23T07:40:00.000-08:00

When developing a website, one of the trickiest components to master is having your site appear well in all monitor resolutions.

Google has released a tool to help with this called BrowserSize.

This tool will load up any URL and provide you a schematic of how your site looks on certain monitor resolutions.

Thanks to Jade Listings for this little tidbit...

Network Folder Password Protection

2009-11-18T07:09:00.000-08:00

My wife needed this for work and I thought that this was great! I found the post on TeachME-Buzz.

1. Open Notepad and copy the code below
2. Change your password in the code it's shown the place where to type your password.
3. Save file as locker.bat
4. Now double click on locker.bat
5. I t will create folder with locker automatically for you. After creation of the locker folder, place the contents you want to lock inside the locker folder and run locker.bat again .

<---The code, copy the whole thing---->

cls
@ECHO OFF
title Folder Locker
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Locker goto MDLOCKER
:CONFIRM
echo Are you sure u want to Lock the folder(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Locker "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to Unlock folder
set/p "pass=>"
if NOT %pass%== type your password here goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Locker
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md Locker
echo Locker created successfully
goto End
:End

Just make sure that the phrase "type your password here" is fully replaced by your password. So if your password was "chain123"the line:

if NOT %pass%== type your password here goto FAIL

would turn out to be:

if NOT %pass%== chain123 goto FAIL

Let me know how it goes!

SugarCRM Overview

2009-04-10T10:00:00.000-07:00

Thanks to The Sugar Refinery for this post!

Key Concepts - What is SugarCRM

Customer Relationship Management (CRM) is a term given to the process of managing your relationship with your customers...better.

But what does that mean in practical terms? How does it improve your business? How does it add value and increase your bottom line?

This article will walk you through how a CRM solution, such as SugarCRM, fits within your organisation and how it benefits you, your staff, your customers and ultimately your profitability.

It covers:

Managing Leads
Qualifying and Converting Leads
Managing Opportunities
Keeping track of Activities
Management Reporting and Forecasting
Summary of the Benefits

Managing Leads

Consider the various ways new customers interact with your business:

These are broad categories, but your first contact with a customer, will likely be through one of these methods. Further more, the contact may be initiated by you, or simply by the customer. For example:

Phone: You may cold-call a prospective list of customers or alternately, you may receive enquiries from customers who have simply seen your web site or an ad in the yellow pages.
eMail: You may receive email enquiries or people may reply in repsonse to email based marketing initiatives such as newsletters.
Web: You may receive enquiries from a web based "contact us" form. In addition, you may promote your web site through various marketing initiatives such as Google Adwords.

Your business may have additional lead sources not covered here depending on your specific marketing methods. Perhaps you have door-to-door salesmen, or run campaigns via SMS text messaging. The point is, there are many sources from which you may receive contact from potential customers.

A CRM system will first of all provide you a unified way of managing those leads. So for example, with SugarCRM, inquiries through a web based contact form can automatically create leads in your system. Similarly, the email integration allows one click lead creation once you've received an email. Cold call lists can be imported into the system and integrated with your telephony system so that staff can work systematically through a of leads.

Furthermore, by tracking the lead source of each and every lead, you can report on the success of marketing campaigns and measure the return on investment of those campaigns.

Key point: What is the difference between a lead and a customer?

A lead is someone who may, one day, become a customer but you're not yet sure if they will. For example, let's say you arrive at the office at 9am, and there is a message on the answer machine, "Hi my name is John Smith. I'm calling about your ABC product. Can you call me back on...." This lead may well become a customer. But it does need qualifying. Perhaps the caller isn't interested in buying ABC product at all. Perhaps, they're actually a supplier offering you a better price than your existing supplier. In short, until you talk to them, you can't decide.

Qualifying & Converting Leads

This is the process of deciding whether your lead is really a potential customer. It involves assigning someone to manage the lead, gathering additional information from the customer, and then deciding whether the lead is suitable to be converted into an opportunity.

Assigning the lead

Your first task may simply be to decide who deals with the enquiry. Perhaps in your organisation different people manage different types of enquiry? Or perhaps you organise work based on the customer's geographic location? Or perhaps, as with many small businesses, you simply do everything yourself. A CRM system allows flexibility. Leads may be assigned to specific individuals if required. If so, they will then pop into a queue for the relevant staff member to qualify. This process may even be automated through the implementation of defined work flow process.

SugarCRM showing leads assigned to an individual" title="My Leads SugarCRM Screenshot" border="0">

Methods of Qualification

Just as you receive enquiries through a variety of channels, so you may also qualify leads in different ways. You might, for example, reply to an email with further information. You may phone the lead up and talk to them. You might schedule a meeting to discuss in person. A CRM system allows you to manage these basic activities, schedule calls, send emails, arrange meetings etc.

During all of these activities, however, the purpose is to gather more information about the potential customer, and decide whether they really might be interested in buying something. The initial requirements are to gather:

The customers contact details
Determine where they heard of you (the lead source and potentially marketing campaign source)
Determine if they have ever been a customer (IE. already have an account)
And finally determine what product or service they are interested in buying

Once you have this information you are ready to convert your lead into an Opportunity.

SugarCRM work flow process of converting a lead to an opportunity" title="SugarCRM Lead to Opportunity process" border="0">

Typically, this will involve setting up a new Account for the customer, ensuring the contact details from the Lead are transformed into a full Contact record and recording details of the Opportunity.

Fortunately, a CRM system such as SugarCRM makes this process very simple - it's a one-click process.

So what sort of information makes up an Opportunity? Generally, this will be information about the potential sale. So, it may include the potential size of any deal, the probability of winning the deal, an estimated close date, and the stage the Opportunity is at. Such stages may include:

Qualifying and analysing
Proposal
Negotiation and Review
Closed Won
Closed Lost

Managing Opportunities

A flexible system such as SugarCRM will allow assignment of the opportunity to various members of your team at various stages of the process. This allows for effective management, ownership and tracking of each and every opportunity within your organisation.

SugarCRM showing an individuals Top Ten Opportunities" title="Top Ten Opportunities SugarCRM screen shot" border="0">

Furthermore, as the Opportunities contain potential financial information, along with sales status and expected close dates, it's possible to report on this information in a very useful way (more on that later).

SugarCRM of a dashlet sales pipeline" title="Sales Pipeline" border="0">

Managing Activities

The above sections have covered the basics of making and tracking a sale. But there is often a lot of activity that goes on around this process. Here are just some of those activities:

Depending upon the individual characteristics of your business, there may be a good deal of correspondence between you and your customer - either by email or phone. You may produce quotes, send fact sheets and receive purchase orders and produce invoices. You might regularly meet with your client, either alone or with other members of your organisation. An intense negotiation stage may take place. You may need to collaborate with other members of your organisation and chase them up on where they are on tasks you've assigned them.

Wouldn't it be great to have a system that helped track, organise and manage all of that in one place? That's exactly what a CRM system does. It allows you to not only manage all of your activities but also to relate those to particular Accounts or Opportunities. This makes finding information a breeze. Want to know when the quote for a client is due? It's in your diary. Want to know what fact sheets your colleague has already sent them? It's recorded against the customer. Want to review all the emails that have been sent to your client? It's all there.

A CRM system turns your office into a well oiled machine. It makes your work more efficient and gives you a complete view of your history with the customer.

It allows you to manage that relationship better, and allows you to profile customers for future marketing.

Management Reporting and Forecasting

One of the great advantages of having a centralised repository holding so much information about your customers and your sales is the ability to produce useful and effective reports. Here are a few examples of the types of information that can easily be extracted:

Sales information - broken down by sales staff, or month, or sales status, or marketing campaign
Return on Investment for marketing strategies
Customer extracts - for example, all customers with opportunities in a particular status
Workloads - who is dealing with the bulk of your work
Project management - what stage is your project at? What tasks are complete or overdue?

A CRM system such as SugarCRM can provide many different types of report. Information can be presented in either text form (such as customer lists) or in graphical form. Alternately, information can be filtered, sorted, and then exported to popular products such as Microsoft Word or Excel.

In summary, a CRM system places management information at your fingertips, equipping you to take informed decisions for your business.

SugarCRM showing Sales Outcome by Month" title="SugarCRM Sales Outcome by Month screen shot" border="0">

Summary of the Benefits

CRM is about managing your relationship with the customer...better.

A CRM system, such as SugarCRM, archives this by:

Effectively managing your sales process, ensuring every lead counts, from every potential source
Organising and distributing the workload around your organisation
Managing and tracking every activity
Providing a holistic view of each and every customer
Effective management reporting and forecasting

The result is that you server your customers better, that you understand your customers better and that you can react faster to customer demands.

Installing SugarCRM Upgrade

2009-04-06T09:37:00.000-07:00

This is a GREAT step-by-step explanation to this process. Thanks SugarCRM!

Upgrading Sugar

This document describes how to upgrade from Sugar versions 5.0 and 5.1 to version 5.2.

In order to upgrade your Sugar application, you need to download the appropriate Upgrade zip file from the Sugar Website to your local machine. For Sugar Enterprise and Sugar Professional, you can obtain the Upgrade zip file from the Sugar Support Portal at https://www.sugarcrm.com/crm/support and upload it to your local machine. For Sugar Community Edition, you can upload the Upgrade zip file from the SugarCRM Web site to your local machine.

To use the Upgrade Wizard, you need to log into the Sugar application. To use the Silent Upgrader, you need to run a PHP script from the command line on the server where the Sugar instance is installed.

CAUTION:

It is strongly recommended that you run the upgrade process on a copy of your production system.

If you are using Zend Core 2.0, you will need to increase the default value of the parameters listed below before you begin the upgrade process:

a.	Navigate to C:\Program Files\Zend\Core\etc\fastcgi.conf and increase the default value for ConnectionTimeout to 3000 and RequestTimeout to 6000.

b.	Navigate to the php.ini file and increase the default value of max_execution_time to 6000.

Compatibility Matrix for Upgrade


PHP versions	5.1 and higher
Databases	MySQL, MSSQL, and Oracle (Oracle is supported only for Sugar Enterprise)
Operating systems	Windows, Linux

Important Upgrade Information

•	Backup your system before beginning the upgrade process. It is imperative to backup your current Sugar directory and database.

•	Because the upgrade files are large, do the following:

a.	In the Advanced section of the System Settings page of your current Sugar installation, modify and save the value of Maximum upload size to 21000000 (20MB).

b.	Navigate to the php.ini file on your Web Server and configure the parameters listed below as follows:

•	Set post_max_size to more than 20MB.

•	Set upload_max_filesize settings to more than 20MB.

•	Set max_input_time to a large number.

Restart the Web Server and then begin the upgrade process.

•	If you are using an Apache Web Server and if you have set LimitRequestBody in the httpd.conf file, then ensure that you set it to a large number or use the default value of 2GB. Restart Apache and then begin the upgrade process.

•

Ensure that the Webserver user has Write permissions to the Sugar database. The upgrade to Sugar 5.2 will add and replace files in several locations including the sugar root directory. The Webserver user must have Write permissions for the root folder and all sub-directories during the upgrade process.

•	The process of upgrading can take up to 30 minutes. If you are using the IIS Web server, you need to ensure that the CGI application does not time out. To do this, on IIS, set the CGI script timeout to more than 300 seconds, which is the default value.

•	If you have customized any module’s PHP file, for example, accounts.php, we strongly recommend that you save it in the Customs directory and not within the main module. This is because, during upgrade, any customizations that you have made may be overridden by changes that Sugar has made for 5.2.

•	Some entry points were changed in Sugar 5.1. Hence, unless you manually updated custom files that were created in 5.0 with the new entry points in 5.1, they may fail in 5.2 with the error message “Not a valid entry point”.

For example, if you have customized vCard, navigate to custom\modules\\metadata\detailviewdefs.php and replace <name="vcard" action="vCard.php>"

with the following:

<name="vcard" action="index.php">

Using the Upgrade Wizard

The Upgrade Wizard provides a quick way to upgrade to the latest version of the Sugar application. The Upgrade Wizard includes critical upgrade logic as well as the SQL commands needed to upgrade the application.

Before using the Upgrade Wizard, ensure that the config.php file for your installation is writable.

Note:

Attempting to manually upgrade by simply replacing files and running the upgrade SQL is not supported.

To upgrade Sugar using the Upgrade Wizard

1.	Download the appropriate Sugar Upgrade zip file from the Sugar Website to your local machine. For example, to upgrade Sugar Professional from version 5.0 to 5.2, you need to download the SugarPro-Upgrade-5.0.0-to-5.2.0.zip.

2.	Log into your existing Sugar application as the administrator and click admin on the right-hand corner of the page.

3.	In the Systems panel of the Administration Home page, click Upgrade Wizard.

The Upgrade Wizard screen displays on the page.

4.	Click Next.

The System Checks screen displays on the page.

5.	Click Next.

The Upload an Upgrade screen displays on the page.

6.	Click Browse, navigate to the location of the Upgrade zip file, and select it.

The path to the file displays in the Upload an upgrade field.

7.	Click Upload Upgrade to upload the package to the Sugar application.

The system uploads the package and displays it on the page.

Click Next.

The Preflight Check screen displays on the page.

By default, the Upgrade Wizard Runs SQL option is selected as the database update method. If you ran the SQL queries manually, select Manual SQL Queries from the Database Update Method drop-down list and select the Check when SQL has been manually run box.

8.	Click Next.

The Commit Upgrade screen displays on the page.

Optionally, you can click Show to see a list of files that were copied and the rebuild results.

9.	Click Next.

The Debrief screen confirms that the upgrade has been installed.

10.	Click Done.

The upgrade is now complete.

11.	In the Systems panel of the Administration Home page, click Repair and select the Rebuild Relationship and Rebuild Extensions options to perform these actions. For more information, see the Installation and Administration Guide that is appropriate to your Sugar application.

12.	If you unchecked any files to prevent the Upgrade Wizard from overwriting then manually merge the files by extracting the skipped file from the patch zip file. Merge the file that was installed in the Sugar application directory.

Note:

If your attempt to upgrade Sugar is unsuccessful, check the upgradeWizard.log file in the Sugar folder for information.

Using the Sugar Silent Upgrader

The Silent Upgrader enables you to avoid some of the limitations that the Web application environment may have that prevents the Upgrade Wizard from completing the upgrade. The upload size limit (by PHP and sometimes even by Web server), the CGI (or equivalent) timeout limit, and the MySQL (or equivalent) session timeout limit are some of the challenges people run into when upgrading to Sugar 5.2. The Silent Upgrader either avoids the limitations or better controls the settings in its stand-alone execution environment.

Note:

The silentUpgrade.php script creates new files for the user who is running it. For example, for the root user it create files as user/group root. Because Apache cannot read this, you must ensure that the Web server user has the permissions to read and write the script.

To upgrade Sugar using the Silent Upgrader

1.	From the command line on the server where the Sugar instance is installed, execute the silentupgrade.php script as follows:

php.exe -f silentUpgrade.php [upgradeZipFile] [logFile] [pathToSugarInstance] [adminUser]

where:

upgradeZipFile is the full path to the upgrade zip file. For example, SugarCE-Upgrade-5.1.0-to-5.2.0.zip

logFile is the full path to an alternate log file.

pathToSugarInstance is the full path to the instance being upgraded.

adminUser is a valid admin user name.

Note:

After upgrading to Sugar 5.2.0, you will need to rebuild the relationship metadata. To do this, log into Sugar as the administrator. On the Administration Home page, select the Repair option in the Systems sub-panel and click Rebuild Relationships.

Locking Down the Upgrade Wizard

If you are managing multiple instances of the Sugar application and you want to maintain complete control over the Sugar instances, you can lock down the Upgrade Wizard to ensure that no user with administrative privileges can upgrade any of them. To lock down functions on the Administration page

1.	Navigate to the config.php file in the Sugar root directory.

2.	Set the following parameter to true as below:

$sugar_config['admin_access_control']=true

3.	Save the file.

Hiding Pages in Wordpress

2009-03-20T16:35:00.000-07:00

You might run across a time in your life when you need to hide a page in wordpress.

You have 3 options to do this:

Write the page as Draft. This will hide the page from the list of pages in the menu but you can still access the page by search, and the page will be accessible if you type the direct URL to the page.
I use this method a lot to provide pages when I do not want them in the menu. I like horizontal menus for my blogs, and if you add too many pages, your menus might start looking bad.
Example of hiding with a draft: Real Estate Blog Lab
Make the page private. This will remove the page from the menu, and you will not be able to access it by search, or by entering the URL. Please remember to log out once you make a page private. Many people make the page private and then try to access it immediately and find they can still see it. This is because you are logged in as "admin" still. So make the page private, logout and try to access the page.
This would be the preferred method to hide a page
The last way is to hardcode your menu function. Wordpress created the menu with this function: wp_list_pages();
You can either remove that function and add your own links, or add the "exclude" argument to wp_list_pages() like so:
wp_list_pages(exclude=17,38);
The numbers are the page id's…you can get the page id's from the manage pages section of you wordpress blog admin section.
Since this method will probably never be used, I will not go to far into it.

I use hidden pages all the time, especially when I have a sidebar widget that displays a small snippet of information, but can open a full page when more details are needed.

Thank you realiventblog.com for this useful post :)

Installing Wordpress in GoDaddy.com

2009-03-11T13:49:00.000-07:00

Here is a good tutorial on how to install Wordpress in GoDaddy.com.

If you have chosen a Wordpress friendly domain host then you will have no problem installing Wordpress they will be the one to do it for you. If you have chosen a host like Godaddy then read on.

(Note: these steps should only be taken if you already have set up a hosting account in Godaddy. )

1. Download the Wordpress files from wordpress.org and extract.

2. Go to your account on www.GoDaddy.com
.

3. Click on Hosting Account List Under My products.

4. The hosting account control panel should appear. Click open. Then a new page will appear for Hosting Control Center.

5. Click the Databases dropdown, you will see there a MYSQL icon.

6. After clicking the my SQL icon, you can now create your new database.

7. Choose which version you want to use. If you are not familiar with SQL then just choose the latest version. Note: list down the username and password for your database because you are going to need it later for the Wordpress installation.) It would take a few min for go daddy to create your new database.

8. After your database is ready go back and check your newly created database. Under the Action column you will see a pen icon click it to edit or view details. List down the host name.

9. Now that you are all set go to your extracted Wordpress files and open the file wp-config-sample.php. edit the following fields.

define(’DB_NAME’, ‘putyourdbnamehere‘); // The name of the database

define(’DB_USER’, ‘usernamehere‘); // Your MySQL username

define(’DB_PASSWORD’, ‘yourpasswordhere‘); // …and password

define(’DB_HOST’, ‘localhost‘); ~~// 99% chance you won’t need to change this value~~. Enter the host name which you listed back in step 8.

Save your file as wp-config.php removing the -sample.

10. Now go back to Godaddy and click the content button. Under content you should find a FTP Client Icon. Click the icon and start transferring your Wordpress files unto the root directory of your server. Note: do not transfer the Wordpress folder. Select all the files inside the Wordpress folder and then begin the transfer. It should take some time before all the files are transferred.

11. After all the files are transferred then you are all set! Just type-in www.yourdomain.com/wp-admin/install.php. Place an email add and a password will be given to you. Now you can stop reading this tutorial and start blogging. Enjoy!

Thanks to oranageinks for this Post!

Why iWeb is not a Good Web Design Program

2009-02-12T09:00:00.000-08:00

I have some friends that have built their first web site with iWeb. Building a web site is not an easy task and there are a lot of companies that want to make it so by building WYSIWIG programs that seem to make the whole process easy. However, unless a person has some coding knowledge and web site creation experience, the layperson will get into some issues that will build a lot of frustration.

My friends are building www.redislandrestoration.com. I'm sure that the site will eventually work perfectly, but for now, it will need some major tweaking.

There is an inherent issue with iWeb in that the code that it produces will, most of the time, have cross browser issues since the program is used to produce web content and not web code. The code that iWeb produces, while it validates XHTML and has minor errors in the CSS validation test, it is not ideal by far. So what does that mean for "web designers"? It means that a lot of flexibility and learning is needed if you are not an experienced web designer. When you encounter a problem, you're going to need to hit the forums. iWeb has been around for a while, so there should be an answer to just about every problem that you have. At first it might seem like Chinese, but continue to tinker with your web site and reading the forums and the forums should provide you with a good answer to your problem. It's good to enter a web design project knowing that frustration is inevitable so that it doesn't overwhelm you when you can't do something.

Tango Hosting Email Setup

2008-11-26T12:41:00.000-08:00

To set up Outlook 2000 (PC) you will first have to acquire the necessary information:

Server Type: POP3
Incoming Server: mail.yourdomain.com (where yourdomain.com is your actual domain name)
Outgoing Server: mail.yourdomain.com

Email Address: (i.e. name@yourdomain.com)
Password: Your E-mail Password

Start Outlook, and on the Tools menu, click Accounts. (Also called "Email Accounts")
In the Internet Accounts dialog box, click Add, and then click Mail. The Internet Connection Wizard will guide you through the account setup process.
In the Your Name box type your Display Name, the name you would like to have appear on all mail messages you send, and then click Next.
In the Email Address box, type the address that you setup in your Control Panel. Click Next.
Select POP3 in the "My incoming mail server is a ______ server" list.

Type your incoming mail server in the "Incoming Mail (POP3 or IMAP) server" box. This server name is mail.yourdomain.com (where yourdomain.com is replaced with your actual domain name).

Type the outgoing mail server in the "Outgoing mail (SMTP) server" box. This server name is mail.mydomain.com (where mydomain.com is replaced with your actual domain name) Click Next.

Important: Many ISP's (Internet Service Providers) require that you enter their Outgoing SMTP information rather then your own (i.e. mail.yourdomain.com), especially if you are using a non-business service account. Cox, Verizon,, Earthlink, NetZero, Mindspring, MSN, Flashnet, MediaOne, AT&T, Bell, Yahoo SBC etc. all require this setting, please contact them directly to acquire this information, if you are having trouble sending email. For additional information on this issue please click here
Type your Account Name (NOTE: This is your entire email address name@yourdomain.com) and Password. This information was set when you setup this email account in your Control Panel.
Click Next until you get to the final window. Click Finish

This is copied from the www.tangohosting.com web site.

How to copy files to a CD using Mac OSX

2008-11-24T08:10:00.000-08:00

Once you have access to the files that you wish to backup, insert a blank CD into the CD-ROM drive on your computer. When you do this a screen will pop up asking you what you want to do.

The action that you want to take is “Open Finder” - Select that and then click on “OK.” Once you do that the Blank CD will pop up onto your desktop and it should look something like this:

Next all you have to do is drag and drop the files you want to copy onto the “Untitled CD” icon on your desktop. Once you have finished selecting and moving the files you want to burn onto the cd, open the “Untitled CD” on your desktop. This will show you all the files that you selected to burn and how much space you have left on disk. You can copy as many files as you want as long as it does not go over that limit.

If you are satisfied with the contents of your disk, click on the “Burn” button at the top right hand side of the window.

Once you click on the “Burn” button you are in the starting process of burning your CD. Here it give you options to change the name of the CD and the burning speed. You can leave the speed at the default setting - in this instance we named the cd “Backup” so that I know this CD is a backup of my files. Click on “Burn” to continue and burn the CD.

The next screen shows you the progress of burning the CD.

Once the CD has completed burning, the “Untitled CD” will change to the name that you specified, and in this case it shows up on the desktop as “Backup.”

A good thing to do is to open up the CD that you just burned to verify that it did indeed burn successfully. If there is anything wrong with the files, they will not open or not all the files that you wanted to burn are actually on the CD, insert a new blank CD and start again.

Once you have checked your CD you have successfully made a backup CD of the files that you wish to save off of your computer/network drive!

Original post can be found here.

Google Ad Manager

2008-11-10T16:17:00.000-08:00

So I work for a company that needed an ad server and I came across Google Ad Manager. It's great. No installation needed and it worked wonderfully! We were using OpenAds, but that doesn't work well. We were having unique errors and the people are overseas and were super hard to get a hold of when we needed them. Below is some beginning knowledge on this that I learned within the first day or two. Any questions, please feel free to comment.

Inventory

Once you log into Adm Manager you’ll notice four tabs at the top labeled Order, Inventory, Reports, and Admin. First lets focus on the Inventory tab. This is where you’ll set up you actual available ad slots for your website.

Click ‘Inventory’

Click ‘New Ad Slot’

Name your ad slot something descriptive like, RightColumnTop125×125. This name cannot contain any spaces. Select the size of the ads that will be displayed in this slot and fill in an optional description. You can uncheck ‘Allow AdSense ads to compete for remnant inventory’ because these are your own inhouse ads and they aren’t costing you anything, therefore it wouldn’t make sense for adspeed to compete with your own ads. Don’t worry about placements yet. We’ll get to that.

Scroll to the bottom and click Save

Placements

Now lets create a placement. Placements are groups of ad slots put together. Lets say you have one ad slot named RightColumnTop125×125 and another named RightColumnBottom125×125. You could group these two together in a placement called ‘Right Column’. Placements are useful for reporting purposes and for specifying where our creatives (our actual ads) will show up.

Click ‘Placements’

Click ‘New Placement’

Enter a name and again uncheck ‘Allow Google advertisers to target’ since these are for our inhouse ads. Below you’ll see your ad slots. ad the relevant ad slots to the placement.

Scroll to the bottom and click Save

Orders

Lets head over to the Orders section. This is where we’ll actually upload our ads.

Click ‘Orders’

Click ‘New Order’

Fill out all the fields. For Order Name put something like ‘You Company inhouse ads’. Don’t worry about external ID for now. Make sure to set end date to unlimited.

Click the ‘Advertiser’ drop down menu

Create a new advertiser with your company name

Click Save

Orders -> Line Items

Next we’ll create our line items. I like to think of line items like categories for our order. For example if you’re order may be for Toyota Cars, and your line item would be ‘Toyota Corolla’. This is important because you can only apply targeting (which we’ll get into in another article) at the line level. Inside the line we’ll place our actual ads.

Click ‘New line item’

You should be getting good at filling out these forms by now. On this page ‘Delivery Priority’ is the key field. Make sure to set it to ‘House’. This will allow you to set an unlimited end date. Also your start date must be in the future.

Below you’ll see our placements. Select which placement you want this line item to display your ads.

Scroll down and you’ll see targeting. This allows you to target your line item to specific countries, browsers, day and time, or even bandwidth. I’ll get more into the advanced features of targeting in another article.

Below targeting you can set your ‘Delivery Options’. I set Delivery rate and Creative Rotation to ‘even’ and left the other boxes unchecked.

Click Save

Orders -> Line Items -> Upload Creative

You should see a link that says ‘Needs Creatives’ in the status menu. Click this link and now we’ll upload our actual ads.

This next screen is pretty self explanatory. You can name your ad and choose the correct ad slot size. You can use flash or static images. You can even insert your own code under ‘Rich Media’. For most of you you’ll probably have a static image or flash file. If you’ve already uploaded your image/flash to a server choose ‘Standard image redirect’ or ‘Flash media redirect’ and you can put the appropriate link to the actual file. You can also specify where you want the ad to link. Manual weight will be grayed out because we’ve selected even distribution for this ad slot.

Click Save

Generate HTML

Now all we need it the actual HTML to place on our web page. Head back over to ‘Inventory’ and click ‘Generate sample HTML’. Select which ad slots you want to generate code for and click ‘Generate Sample HTML’.

The Generated HTML will show up below and you’ll notice that it’s a complete web page with head and body tags. Just copy and paste the javascript in and your done.

Remember your ads will not show up until they reach the begin date for you line item. Even then it can take 10min to an hour for Google’s cache to update itself so be patient. You’ll know everything is good when you go to your order page and see the status set to ‘Delivering’.

Hope this helps. If you have any questions please feel free to comment below.

Blackberry Storm 9530: Minute with Mike from Verizon Wireless

2008-10-28T11:12:00.000-07:00

not the best video but I'm SO getting this phone!

Fonts - Mac, PC, Ubuntu (linux)

2008-10-23T09:33:00.000-07:00

Web designers often feel that they are restricted to a basic set of core web fonts. This small set of fonts has been widely distributed and most designers stick to them, just to be on the safe side. However, when you look at the fonts available on the three most widely used operating systems, you can see that this really isn't necessary.

All three operaing systems come with a variety of fonts, many

of which can be reasonably substituted for each other without affecting the design.You can also choose fonts that have the same look and feel that you want, but may not be exact matches. This allows for much more flexibility in design while still ensuring compatibility across operating systems.

Stacking fonts in your CSS allows you to cover all your bases by specifying back-up fonts for users who don't have your preferred typeface. For example, the font stack for this site is:

font-family: "Lucida Grande","Lucida Sans Unicode","Eras Medium ITC","DejaVu Sans",Helvetica,Verdana,sans-serif

For more on creating great font stacks, read Better CSS Font Stacks from Unit Interactive.

About these tables

Ubuntu is used as a sample Gnu/Linux operating system.
Other distributions may have different fonts installed. If you can
provide a list of pre-installed fonts on other distros
please send it to me and I will incorporate it into this article.

Fonts listed in the same row are near equivalents of each
other, with the exception of the last row in each table which is used
for other/non matching fonts. The "matching" fonts may not match exactly but in practical use can be subsituted for each other without
problems

All font samples were taken from a sample page in Firefox at .9em (Linux, Mac, Windows). Keep relative sizing in mind when choosing a list of fonts to specify (i.e. you don't want big sizing variations depending on which font the user has installed).

The "Installed with MS Programs" column lists typefaces incuded with common Microsoft applications. You can probably expect that most Windows users have some of these applications installed, and some Mac users may have Office installed as well. Non-starred entires are installed with all versions of Office 2003/2007 and many other programs. Starred (*) entries are installed primarily with Office Professional Plus 2007 but some also come with with Office 2003 Professional Edition, Publisher, and other programs. Entries with a - next to them are installed with Office 2003 and other older programs (that are still quite pervasive at this point). Details are available in the Microsoft Typography Database.

In the Mac OSX column, entries with a + are included with OSX 10.5 (Leopard), entries with a - are included with versions prior to 10.4 (but not in 10.4)

Starred entries in the Ubuntu column are installed by the mscorefonts package. According to a survey on the Ubuntu Forums, approximately 74% of Ubuntu users have mscorefonts installed.

Serif

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)

	*
			*
	*
		-
		-
			*
* *	* * * * * * * * * * * * * * * *

*Cambria and Constantia are part of the Windows Vista font
pack and are included with Windows Vista and as an upgrade to
Office 2003. These are cleartype
fonts which means that they render differently than traditional fonts
(anti-aliasing is used to make them appear smoother). On Windows they
tend to look bad on non-Microsoft web browsers when cleartype is not
enabled in the desktop preferences. Cleartype is not enabled by
default on Windows XP but it is included as an option when installing IE 7.

Palatino and New York are not installed by default on OS 10.4 but are installed on previous versions

Sans Serif

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
			*
			*




		+
			*
			*
* * *	* * * * * * * *	+

Notes:

DejaVu is a modification of Bitstream Vera Sans, with additional unicode characters

Script/Handwriting

Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
*

		*
*	+Papyrus Condensed
* * * * * * * * * * * * * * * * *

Notes:

One way to counter the problem with script fonts in Windows
(namely, that only Comic Sans is installed by default), would be to
specify a nice serif as your last option (Georgia, for example) and
make it italic. Script fonts usually don't have italic variants, so
people with nice script fonts installed will see the font you intended
while others will see italic Georgia which isn't quite the same but
would still look nice. This technique would also work for decorative
fonts or other categories where no suitable alternative is available on
some operating systems.

Monospace

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
			*

*	* *	+	*

Decorative

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
	* * * * * * * * * * * * * * * * * * * * * * * * * * * * - * * * - - * *		*

Symbol/Dingbat

(link to full character set where available)

Of course, it is probably not a good idea to use these fonts in web pages! However, they are listed here just to keep this resource complete.

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
Symbol Webdings Wingdings	WingDings 2 WingDings 3 VisualUI MT Extra	Apple Symbols Symbol Webdings +Wingdings Zapf Dingbats	Dingbats Open Symbol Standard Symbols L *Webdings

Foreign Language

This list is by no means complete and is based on what I was
able to find out online about various typefaces. If you have more information that
could help to complete this list please contact me.

Notes:

In the OSX column, fonts marked with ** are part of the Additional Fonts package (installed by default)

In Ubuntu, many of these fonts will look the same as Deja Vu/Bitstream Vera Sans when typing latin characters. You do not have 10 versions of the same font under different names – these are foreign language variations. Foreign language support must be enabled in some cases to see the characters (I think ???).

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
Multi-language support (Unicode)	Arial Unicode (installed with Office): Arabic script (Arabic, Balochi, Persian, Shahmukhi, Urdu) Armenian Cyrillic (all or most of range) Devanagari Georgian (Mkhedruli and Asomtavruli) Greek (including polytonic and Coptic characters) Gurmukhi Hebrew IPA Japanese (Hiragana, Katakana, Kanji/Han Ideographs) Kannada Korean (Hangul only) Latin Tamil Thai Vietnamese	Last Resort (fallback font, contains all unicode characters)	DejaVu (Unicode): Arbic Armenian Cryllic Greek Hebrew Lao Plus other unicode characters (see Wikipedia) Gentium (Unicode): Greek Cryllic (under development) GentiumAlt is designed to improve the appearance of letters with multiple diacritics. Free Serif (Unicode): Bengali Cyrillic Greek Devanagari Ethiopic Gurmukhi Hebrew Hiragana Katakana Malayalam Tamil Telugu Thaana Thai FreeSans and FreeMono include fewer glyphs than Free Serif but do have some multi-language support.
Aboriginal		Unified Canadian Aboriginal Syllabics: EuphemiaCASBold EuphemiaCASItalic EuphemiaCASRegular Cherokee: PlantagenetCherokee
Arabic	Estrangelo Edessa	Geeza Pro Bold Geeza Pro AlBayan AlBayanBold Baghdad DecoTypeNaskh KufiStandarGK Nadeem	TAMu_Kadambri TAMu_Kalyani TAMu_Maduram
Simplified Chinese		Hei ST Heiti Light STHeiti Regular STFangsong STKaiti STSong**
Traditional Chinese		Apple LiGothic Medium LiHei Pro Apple LiSung Light BiauKai LiSong Pro**
Hebrew		ArialHB ArialHBBold Corsiva CorsivaBold NewPeninimMT Raanana RaananaBold**
Indic	Gautami (Telugu) Latha (Tamil) Mangal (?) ( Devanagari) Raavi (Devanagari, Gurmukhi) Shruti (?) (Gujarati) Tunga (Kannada)	DevanagariMT DevanagariMTBold GujaratiMT GujaratiMTBold Gurmukhi InaiMathi(Tamil)	aakar (Gujarati) Ani (Bengali) Chandas (Devanagari) Gargi 1.7 (Devanagari) Jamrul (Bengali) Kalimati (Hindi/Devanagari) Kedage (Kannada) Likhan (Bengali) Lohit Bengali Lohit Gujarati Lohit Hindi Lohit Punjabi Lohit Tamil Malayalam Mallig (Kannada) Mitra Mono (Bengali) Mukti Narrow (Bengali) oriUni (also called Oriya; Oriya, Khondi, Santali) padmaa (Gujarati) Pothana 2000 Rekha (Gujarati) Saab (Gujarati) Samanata (Hindi/Devanagari) Vemana2000 (Telugu)
Japanese	*Meiryo	AquaKanaBold AquaKanaRegular Hiragino Kaku Gothic Pro W3 Hiragino Kaku Gothic Pro W6 Hiragino Kaku Gothic Std W8 Hiragino Maru Gothic Pro W4 Hiragino Mincho Pro W3 Hiragino Mincho Pro W6 Osaka OsakaMono	Kochi Gothic Kochi Mincho
Korean		AppleGothic #Gungseouche #HeadlineA #PCmyoungjo #Pilgiche AppleMyungjo**	Baekmuk Batang Baekmuk Dotum Baekmuk Gulim Baekmuk Headline
Thai		Ayuthaya Krungthep Sathu Silom Thonburi**	Garuda Loma Norasi Purisa
Miscellaneous	Western language variants: WST_Czech WST_Engl WST_Fren WST_Germ WST_Ital WST_Span WST_Swed Cryllic: Sylfaen (Armenian, Cyrillic, Georgian, Greek, Latin) Thaana: MV Boli	Cyrillic: CharcoalCY GenevaCY HelveticaCY Armenian: MshtakanBold MshtakanBoldOblique MshtakanOblique MshtakanRegular NISC18030	Lao: Phetsarath OT

References:

Mac Fonts from Apple

List of System fonts in Mac OS X (includes fonts installed with iWork and iLife, which are usually included with OSX)

Common fonts to all versions of Windows & Mac equivalents

Microsoft Typography Database

Fonts installed with Windows XP

Fonts available in each version of Windows

Font supplied with Window Service Pack 2

Fonts installed with Office

South Asian Script Fonts

Indic font list

Fonts that ship with Adobe Creative Suite 3

How-to's

Better CSS Font Stacks - explains how to create a font stack and recommends some attractive stacks for both paragraphs and headings.

Using a Feed to Dynamically post a Blog on your own Web Site

2008-09-02T11:38:00.000-07:00

Use this Application and everything will go juuuust fine :)

http://landmark-project.com/feed2js/build.php?

However, please make sure that you use FeedBurner.com to have a feed from your own blog first!

Google's New Browser

2008-09-02T08:40:00.001-07:00

Yet another browser for us to test our web sites in.... See below what the Google Blog says:

At Google, we have a saying: “launch early and iterate.” While this approach is usually limited to our engineers, it apparently applies to our mailroom as well! As you may have read in the blogosphere, we hit "send" a bit early on a comic book introducing our new open source browser, Google Chrome. As we believe in access to information for everyone, we've now made the comic publicly available -- you can find it here. We will be launching the beta version of Google Chrome tomorrow in more than 100 countries.

So why are we launching Google Chrome? Because we believe we can add value for users and, at the same time, help drive innovation on the web.

All of us at Google spend much of our time working inside a browser. We search, chat, email and collaborate in a browser. And in our spare time, we shop, bank, read news and keep in touch with friends -- all using a browser. Because we spend so much time online, we began seriously thinking about what kind of browser could exist if we started from scratch and built on the best elements out there. We realized that the web had evolved from mainly simple text pages to rich, interactive applications and that we needed to completely rethink the browser. What we really needed was not just a browser, but also a modern platform for web pages and applications, and that's what we set out to build.

On the surface, we designed a browser window that is streamlined and simple. To most people, it isn't the browser that matters. It's only a tool to run the important stuff -- the pages, sites and applications that make up the web. Like the classic Google homepage, Google Chrome is clean and fast. It gets out of your way and gets you where you want to go.

Under the hood, we were able to build the foundation of a browser that runs today's complex web applications much better. By keeping each tab in an isolated "sandbox", we were able to prevent one tab from crashing another and provide improved protection from rogue sites. We improved speed and responsiveness across the board. We also built a more powerful JavaScript engine, V8, to power the next generation of web applications that aren't even possible in today's browsers.

This is just the beginning -- Google Chrome is far from done. We're releasing this beta for Windows to start the broader discussion and hear from you as quickly as possible. We're hard at work building versions for Mac and Linux too, and will continue to make it even faster and more robust.

We owe a great debt to many open source projects, and we're committed to continuing on their path. We've used components from Apple's WebKit and Mozilla's Firefox, among others -- and in that spirit, we are making all of our code open source as well. We hope to collaborate with the entire community to help drive the web forward.

The web gets better with more options and innovation. Google Chrome is another option, and we hope it contributes to making the web even better.

So check in again tomorrow to try Google Chrome for yourself. We'll post an update here as soon as it's ready.

Photoshop Fluffy Realistic Clouds

2008-09-01T10:14:00.000-07:00

Step 1 - Setting up the Document

Create a new image 500x500px with a "transparent" background.

Fill ( Edit > Fill ) the background layer with Black ( Hex #000000 ). On the Color Palette, set the Background color as #3E6CAA and the Foreground color as #76B6F4.

Right-click the background layer on the Layer Palette and choose Blending Options.

Apply a Gradient Overlay using the settings shown in the image to the left.

Note: If the colors shown in the Gradient Overlay window are not the blue shown in the screenshot, click on the dropdown in the Gradient Overlay window and choose the first option.

Step 2 - Rendering the Clouds

Create a new layer called "CloudBase". Press D to reset the Color Palette.

Render some Clouds ( Filter > Render > Clouds ). Next, render Difference Clouds ( Filter > Render > Difference Clouds ) three times. Do this by using the top menu to execute the Difference Clouds filter once, then pressing Ctrl-F 2 times to repeat the last filter (in this case Difference Clouds) two times.

Step 3 - Creating 3 Dimensions

Bring up the Levels Menu ( Ctrl-L or Image > Adjustments > Levels... ). Use around the settings shown in the image to the left.

Duplicate layer "CloudBase" and rename the new layer "Cloud3D".

Extrude ( Filter > Stylize > Extrude ) layer "Clouds3D" with the settings shown to the right.

Change the Blending Modes of both layer "Cloud3D" and "CloudBase" to "Screen".

Choose layer "Cloud3D". Apply a Gaussian Blur ( Filter > Blur > Gaussian Blur ) with a power of 1.6.

The clouds are decent at this point but they look a bit flat. To fix this, we must brush on some shadows.

Step 4 - Applying Shadows

Take the Brush Tool and change its settings to what is shown in the image below.

Make a new layer and name it "Shadows".

The light will be coming from slightly above. Imagine you are looking up into the sky. The shadows on the clouds are going to be on the bottom of them. just follow the sample if you are confused.

It does not matter at this point if your shadows are sticking out beyond the clouds into the sky.

Step 5 - Cleaning up the Shadows

Now, open the Color Range window ( Select > Color Range ). Set the Fuzziness to 118. Click on a part you know has no clouds. Click Ok.

You should have a selection where the sky is and a little bit into the clouds. If you are not already on layer "Shadows" go to it. Press Delete. Change layer "Shadows" opacity to 50%.

The clouds are starting to look much more realistic. One more step! If you were looking at clouds from below, the clouds would not be that white. You are going to airbrush a showdown that covers the whole cloud except the edges that are above. It is a little confusing so please look at the images.

Step 6 - Final Shadowing

Create a new layer and name it "Shadows 2". Take out the Brush Tool again and start shadowing the cloud. Be careful not to shadow the top of each cloud. Also, don’t brush a place more than once.

Apply a Gaussian Blur ( Filter > Blur > Gaussian Blur ) with a power of 6.5.

You're done! Finito! Terminaste!

Flash Web Site About to Become Google / Yahoo Searchable!

2008-08-11T09:48:00.001-07:00

I just found this article by SchoolOfFlash.com and they said the following. How exciting!!

-------

For years, the advice has always been that if you want good search engine results, then you don’t want to create your website entirely with Flash, because search engines have no way of effectively indexing swf files. Well, all of that is about to change.

Adobe just announced that they are teaming up with Google and Yahoo in order to address this issue. Adobe has supplied these search industry leaders with technology that will allow them to index swf files in a way that has never been possible before. In fact, Google has already started implementing this technology, and as I understand it, Yahoo won’t be too far behind.

“But wait,” you say. “I thought search engines already had a way to index swf files.”

Well, you’re right, but up until now, they could only index the static information and static links within your swf file. With this new technology, even the dynamic content of your Flash files will be open to search engine indexing, making it infinitely more possible for your all-Flash website to achieve top rankings in search engine results.

ActionScript 3 Music for Web Site

2008-08-11T09:12:00.001-07:00

Here is what a friend of mine wrote and asked me along with the code that was giving him problems:

K dude... it's 4 in the morning, and I'm killing myself trying to get this stupid toggle button to work. I have the button working, I just can't figure out how to get the sound to stop and play with clicking the button. below is my code... could you take a look and see if you can figure out how to get the sound to stop and play... I tried to do this without asking to much of your help... lol...

stop();

var music:Sound = new Sound(new URLRequest("Equanimity.mp3"));
var sc:SoundChannel = music.play();
var isPlaying:Boolean = true;

//togglebtn.addEventListener(MouseEvent.CLICK, playSound);
//togglebtn.addEventListener(MouseEvent.CLICK, stopSound);
togglebtn.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
togglebtn.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
togglebtn.addEventListener(MouseEvent.CLICK, toggleClick);
togglebtn.buttonState="off";

function rolloverToggle(event:MouseEvent) {
togglebtn.gotoAndStop(togglebtn.buttonState+"_over");
}

function rolloutToggle(event:MouseEvent) {
togglebtn.gotoAndStop(togglebtn.buttonState);
}

function toggleClick(event:MouseEvent) {
if (togglebtn.buttonState == "on") {
togglebtn.buttonState = "off";
//not sure what code to put here to stop music
//function stopSound(event:)???
} else {
togglebtn.buttonState = "on";
//not sure what code to put here to play music
//function playSound(event:Event)???
}
togglebtn.gotoAndStop(togglebtn.buttonState+"_over");
}

function onWhoClick(evt:MouseEvent):void {
gotoAndStop("Who");
}
who_btn.addEventListener(MouseEvent.CLICK, onWhoClick);

function onWhatClick(evt:MouseEvent):void {
gotoAndStop("What");
}
what_btn.addEventListener(MouseEvent.CLICK, onWhatClick);

function onWhyClick(evt:MouseEvent):void {
gotoAndStop("Why");
}
why_btn.addEventListener(MouseEvent.CLICK, onWhyClick);

This was my response:

Let’s attack this by giving you the option of pausing or stopping: The playSong event listener will be added within a function below. I’m going to try and let you place this code where you think you need to (pretty easy in as3). Also, change the button names and function names to what then need to be. Functions are hard to write when you’re a beginner in the code J It’s hard to know the syntax. But it’s good that you knew you were supposed to write a function bc you have the logic and that’s where it starts. This language is SUPER hard because it’s all theoretical. It’s called object-oriented programming. You will NOT get it the first or second or even third time your try and go at it. It’s too vague and theoretical. It’s like you have to be thinking in the 4^th dimension when it’s all waves… lol… it’s hard for realz J

pause_btn.addEventListener(MouseEvent.CLICK,pauseSong);
stop_btn.addEventListener(MouseEvent.CLICK,stopSong);

Then you need the functions:

function pauseSong(e:Event):void

{

pos = sc.position; //get the song position

sc.stop();//stops the song in its possition

songPlaying = false; //sets the flag to show that song is not playing with this Boolean statement (Boolean means that it’s either true or false)

play_btn.addEventListener(MouseEvent.CLICK,playSong); //add event list. to show look for a playSong on mouse click

}

function playSong(e:Event):void

{

if(songPlaying == false) //if song is not playing then run this function

{

sc = currentSound.play(pos); //find the current song position

sc.addEventListener(Event.SOUND_COMPLETE, nextSong); //I don’t know if you have a next song, but in case you do, here’s how to look for it

songPlaying = true; //set song playing to true

play_btn.removeEventListener(MouseEvent.CLICK,playSong); //remove event listener for playing song since you don’t need to look for a song playing

}

function stopSong(e:Event):void //I’m sure you can get this function on your own since it’s the same as the play function just backwards

{

sc.stop();

pos = 0;

songPlaying = false;

play_btn.addEventListener(MouseEvent.CLICK,playSong);

}

CS4 Already????

2008-07-30T16:34:00.000-07:00

Adobe Systems is offering two-day trials of three beta applications from its next Creative Suite package.

The previews of Dreamweaver for Web design, Fireworks for image editing, and Soundbooth for audio editing became available Monday.

Trials expire after 48 hours for most people, but registered CS3 users get to keep using the CS4 betas until the final applications replace them.

Adobe hasn't publicly confirmed its planned shipping date or the name for the next Creative Suite, which we're nicknaming CS4. Adobe Creative Suite 3 was released in March 2007.

We took a quick test drive of the Dreamweaver trial and liked some of the changes. Among the touted enhancements are a Related Files Toolbar and Code Navigator. The Properties panel integrates HTML and CSS coding, which could save time for those who edit dynamic sites. A new Live View Mode, driven by Webkit open-source rendering, previews pages within Dreamweaver, eliminating the need to open a browser. Adobe intends for this feature to make it easier to debug JavaScript as well as to work with Flash animation.

The interface of Fireworks, originally from Macromedia, finally resembles those of other applications in the Creative Suite. Fireworks features compatibility with Adobe's AIR, Flash, and Flex Builder as well as HTML. And users can export design mockups as high fidelity, interactive, and secure Adobe PDF files.

Soundbooth adds support for multiple track editing as well as volume matching across audio files. Users can preview the compression settings before saving MP3s. Speech recognition is supposed to enable quick, searchable transcripts of dialog content.

There's no word yet on whether the next rough draft of Photoshop will be available for a free trial. However, Photoshop's next iteration may become available in widgets, enabling users to mix and mash up some features with third-party content, according to a blog post last week by Photoshop product manager John Nash. We suspect that there will be more opportunities to blur the lines between the desktop, the Web, and mobile platforms within the next Creative Suite.

System requirements for the Windows trials demand a machine running XP or Vista with at least 512MB of RAM, 1 gigabyte of disk space, and a Pentium 4 processor. Mac users must have OS X version 10.4.11 or later on a PowerPC G5 or Intel-based system. Soundbooth, however, won't run on a PowerPC Mac.

You can download some trial BETA versions by clicking HERE.

Thanks for the research Elsa Wenzel

Do's and Dont's of Amazing Web Design

2008-07-23T08:11:00.000-07:00

When followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

-a brain
-a pen and paper
-(optional) flowchart software
-a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View this flowchart below when conceptualizing Chromatic Sites:

(1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Dos
-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling
In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

-logo
-navigational menu
-content
-images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Below is our example of how a wireframe mock-up should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos
-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
-focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts
-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution
In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. As you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.

Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos
-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts
-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect
By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

Learn Programming in 10 Years

2008-07-14T15:49:00.000-07:00

Why is everyone in such a rush?

Walk into any bookstore, and you'll see how to Teach Yourself Java in 7 Days alongside endless variations offering to teach Visual Basic, Windows, the Internet, and so on in a few days or hours. I did the following power search at Amazon.com:

     pubdate: after 1992 and title: days and
     (title: learn or title: teach yourself)

and got back 248 hits. The first 78 were computer books (number 79 was Learn Bengali in 30 days). I replaced "days" with "hours" and got remarkably similar results: 253 more books, with 77 computer books followed by Teach Yourself Grammar and Style in 24 Hours at number 78. Out of the top 200 total, 96% were computer books.

The conclusion is that either people are in a big rush to learn about computers, or that computers are somehow fabulously easier to learn than anything else. There are no books on how to learn Beethoven, or Quantum Physics, or even Dog Grooming in a few days.

Let's analyze what a title like Learn Pascal in Three Days could mean:

Learn: In 3 days you won't have time to write several significant programs, and learn from your successes and failures with them. You won't have time to work with an experienced programmer and understand what it is like to live in that environment. In short, you won't have time to learn much. So they can only be talking about a superficial familiarity, not a deep understanding. As Alexander Pope said, a little learning is a dangerous thing.
Pascal: In 3 days you might be able to learn the syntax of Pascal (if you already knew a similar language), but you couldn't learn much about how to use the syntax. In short, if you were, say, a Basic programmer, you could learn to write programs in the style of Basic using Pascal syntax, but you couldn't learn what Pascal is actually good (and bad) for. So what's the point? Alan Perlis once said: "A language that doesn't affect the way you think about programming, is not worth knowing". One possible point is that you have to learn a tiny bit of Pascal (or more likely, something like Visual Basic or JavaScript) because you need to interface with an existing tool to accomplish a specific task. But then you're not learning how to program; you're learning to accomplish that task.
in Three Days: Unfortunately, this is not enough, as the next section shows.

Teach Yourself Programming in Ten Years

Researchers (Bloom (1985), Bryan & Harter (1899), Hayes (1989), Simmon & Chase (1973)) have shown it takes about ten years to develop expertise in any of a wide variety of areas, including chess playing, music composition, telegraph operation, painting, piano playing, swimming, tennis, and research in neuropsychology and topology. There appear to be no real shortcuts: even Mozart, who was a musical prodigy at age 4, took 13 more years before he began to produce world-class music. In another genre, the Beatles seemed to burst onto the scene with a string of #1 hits and an appearance on the Ed Sullivan show in 1964. But they had been playing small clubs in Liverpool and Hamburg since 1957, and while they had mass appeal early on, their first great critical success, Sgt. Peppers, was released in 1967. Samuel Johnson (1709-1784) thought it took longer than ten years: "Excellence in any department can be attained only by the labor of a lifetime; it is not to be purchased at a lesser price." And Chaucer (1340-1400) complained "the lyf so short, the craft so long to lerne." Hippocrates (c. 400BC) is known for the excerpt "ars longa, vita brevis", which is part of the longer quotation "Ars longa, vita brevis, occasio praeceps, experimentum periculosum, iudicium difficile", which in English renders as "Life is short, [the] craft long, opportunity fleeting, experiment treacherous, judgment difficult." Although in Latin, ars can mean either art or craft, in the original Greek the word "techne" can only mean "skill", not "art".

Here's my recipe for programming success:

Get interested in programming, and do some because it is fun. Make sure that it keeps being enough fun so that you will be willing to put in ten years.
Talk to other programmers; read other programs. This is more important than any book or training course.
Program. The best kind of learning is learning by doing. To put it more technically, "the maximal level of performance for individuals in a given domain is not attained automatically as a function of extended experience, but the level of performance can be increased even by highly experienced individuals as a result of deliberate efforts to improve." (p. 366) and "the most effective learning requires a well-defined task with an appropriate difficulty level for the particular individual, informative feedback, and opportunities for repetition and corrections of errors." (p. 20-21) The book Cognition in Practice: Mind, Mathematics, and Culture in Everyday Life is an interesting reference for this viewpoint.
If you want, put in four years at a college (or more at a graduate school). This will give you access to some jobs that require credentials, and it will give you a deeper understanding of the field, but if you don't enjoy school, you can (with some dedication) get similar experience on the job. In any case, book learning alone won't be enough. "Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter" says Eric Raymond, author of The New Hacker's Dictionary. One of the best programmers I ever hired had only a High School degree; he's produced a lot of great software, has his own news group, and made enough in stock options to buy his own nightclub.
Work on projects with other programmers. Be the best programmer on some projects; be the worst on some others. When you're the best, you get to test your abilities to lead a project, and to inspire others with your vision. When you're the worst, you learn what the masters do, and you learn what they don't like to do (because they make you do it for them).
Work on projects after other programmers. Be involved in understanding a program written by someone else. See what it takes to understand and fix it when the original programmers are not around. Think about how to design your programs to make it easier for those who will maintain it after you.
Learn at least a half dozen programming languages. Include one language that supports class abstractions (like Java or C++), one that supports functional abstraction (like Lisp or ML), one that supports syntactic abstraction (like Lisp), one that supports declarative specifications (like Prolog or C++ templates), one that supports coroutines (like Icon or Scheme), and one that supports parallelism (like Sisal).
Remember that there is a "computer" in "computer science". Know how long it takes your computer to execute an instruction, fetch a word from memory (with and without a cache miss), read consecutive words from disk, and seek to a new location on disk. (Answers here.)
Get involved in a language standardization effort. It could be the ANSI C++ committee, or it could be deciding if your local coding style will have 2 or 4 space indentation levels. Either way, you learn about what other people like in a language, how deeply they feel so, and perhaps even a little about why they feel so.
Have the good sense to get off the language standardization effort as quickly as possible.

With all that in mind, its questionable how far you can get just by book learning. Before my first child was born, I read all the How To books, and still felt like a clueless novice. 30 Months later, when my second child was due, did I go back to the books for a refresher? No. Instead, I relied on my personal experience, which turned out to be far more useful and reassuring to me than the thousands of pages written by experts.

Fred Brooks, in his essay No Silver Bullets identified a three-part plan for finding great software designers:

Systematically identify top designers as early as possible.
Assign a career mentor to be responsible for the development of the prospect and carefully keep a career file.
Provide opportunities for growing designers to interact and stimulate each other.

This assumes that some people already have the qualities necessary for being a great designer; the job is to properly coax them along. Alan Perlis put it more succinctly: "Everyone can be taught to sculpt: Michelangelo would have had to be taught how not to. So it is with the great programmers".

So go ahead and buy that Java book; you'll probably get some use out of it. But you won't change your life, or your real overall expertise as a programmer in 24 hours, days, or even months.

Seven Incredibly Useful Tools for Evaluating Your Web Design

2008-07-14T15:06:00.000-07:00

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly - or if moving from one section to another takes a long time - it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.

Some things to consider:

Are important information being seen by the user?
Are the navigation and action items intuitive?
Is the user being directed to sections in a logical manner?
Does the web page load quickly enough to not turn away the user?

If you’re interested in analyzing and optimizing your page layout - here’s some extremely useful tools that you can use to help.

1. ClickHeat

ClickHeat is an open source visual tool for showing “hot” and “cold” zones of a web page. It allows you to see which spots users click on most, and which spots are being ignored.

It’s very easy to implement on your website, you only have to include an external JavaScript file.

Download: Clickheat on SourceForge.net.

2. Crazy Egg

Crazy Egg offers a myriad of analytical tools to help you visualize what visitors are doing.

Features include: Confetti - allowing you to see what people are clicking on based on certain factors such as their operating system and where they came from, Overlay - providing you with tons of data about particular links, and Report sharing - enabling you to share the data with team members and clients.

The free version only allows 4 pages to be tracked - so use your top landing pages to get the most data.

3. YSlow for Firebug

A key tenet of a strong design is that, not only should information be presented in a logical and elegant fashion, but that it must also be served quickly, with very little delay.

YSlow for Firebug is a free tool for Mozilla Firefox that gives you information about your front-end design to see if it performs well. It gives you a letter grade (A through F) and outlines your web page’s trouble spots.

It’s based on the Yahoo! Developer Network’s “Best Practices for Speeding Up Your Web Site” initially written by Steve Souders, who was once the Chief of Performance at Yahoo! and is now working over at Google on web performance and open source initiatives.

Downloads: Firebug extension for Firefox (required) and YSlow.

4. clickdensity

clickdensity is a full suite of usability analysis tools that will help you assess your web page design.

You can use heat maps showing where users click on the most, hover maps - which shows people scrolling over links but not clicking on them, and A/B Tests which allows you to change certain page elements to see which style is more effective.

The free subscription give you 5,000 clicks and only one page and one site to monitor.

5. ClickTale

ClickTale offers a lot of user data pertaining to how visitors use your website.

There are plenty of things you can look at such as average time it takes for a user to click on a link, a user’s hesitation on clicking a link, hover to click ratio, and much more. It also provides detailed reports and charts on your users’ monitor sizes to better optimize your web page design to cater for the typical visitor.

6. Clicky

Perhaps the most interesting feature that Clicky has is its real-time tracking and monitoring feature, called Spy (check out the demo here).

Besides Spy, there’s a host of other analytics data you can look at such as user Actions - which records click data from your users and Visitors - providing you user data.

7. Google Analytics

One of the best free services that Google offers is Google Analytics and probably the most well-known analytics tool. It’s incredibly easy to install and offers plenty of user and content data to help you learn more about your web pages’ performance.

It has a feature called Site Overlay, which gives you a visual representation of the popular places your users like to click on. It also offers data on bounce rates and your top exit pages (to see what pages make users leave).

So there they are, some of the best tools in the market to help you troubleshoot and optimize your page layout. In the end, it’s a combination of great content, as well as how you present this content — that will lead to an effective design.

Some Basic Web Design Tips

2008-07-14T13:56:00.001-07:00

Jakob Nielsen's Alertbox:

Top Ten Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)

1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.

Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.

2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

> Usability implications of changing link colors
> Guidelines for showing links

4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

subheads
bulleted lists
highlighted keywords
short paragraphs
the inverted pyramid
a simple writing style, and
de-fluffed language devoid of marketese.

> Eyetracking of reading patterns

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.

6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML “title” tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.

The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Other Top-10 Lists

10 High-Profit Redesign Priorities
Usability in the Movies — Top 10 Bloopers
Most violated homepage guidelines
Top homepage usability guidelines
Good deeds in Web design
Web design mistakes (2005)
Web design mistakes (2003)
Web design mistakes (2002)
With cartoons.
Web design mistakes (1999)
Web design mistakes (1996)
My first list. Luckily, many of these mistakes have been fixed by now.
Application design mistakes

I'll present my newest usability guidelines in the tutorial on Fundamental Guidelines for Web Usability at the Usability Week 2008 conference in San Francisco, London, and Melbourne.

> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes

Create Sites With Impact

2008-06-23T14:03:00.000-07:00

First impressions count and with the clock ticking, make sure your site has impact.

You’ve got 50 milliseconds – just one twentieth of a second – to impress us. If you aren’t sure how long that is, go and get a stopwatch (or use your mobile) and time it. According to recent research, it’s the length of time it takes site visitors to decide if your site has anything of value for them. Scary isn’t it? It doesn’t matter how great your navigation, or how popular your online store, if you don’t make that all-important, top-quality, first impression, you’re history. This issue Karl Hodge shows you how to beat the clock with tips and tweaks from web professionals...

It’s long been assumed that web users make their mind up about sites in a short space of time. Some sources say you’ve got twenty seconds to make an impact, others a more speedy ten. A recent series of studies by academics at Careleton University in Ottawa, Canada suggests, however, that the allimportant first impression is made in less than one tick of the clock. They flashed a series of sites in front of test subjects and asked them to rate the pages for visual appeal. The finished study concluded that visitors were able to make their mind up about whether they like a site’s home page in just 50 milliseconds. That’s one twentieth of a second.

If you’re surprised, you’re not the only one. Even Gitte Lindgaard, Director of the Human-Oriented Technology Lab that carried out the research had set the bar much higher; “My colleagues believed it would be impossible to really see anything in less than 500 milliseconds,” she told the journal Nature. “Unless the first impression is favourable, visitors will be out of your site before they even know that you might be offering more than your competitors,” says Lindgaard. It’s enough to make your head spin.

There’s more too. Cathy Dudek, a researcher who worked on the third phase of the study, told us there was a ‘high consistency’ between the sites rated as visually appealing by test subjects. “In study one, the 25 most appealing home pages were also the 25 most appealing in study two, and the same was true for the 25 least appealing home pages,” said Dudek.

If that’s the case, then perhaps visual appeal – the measure that was common to all three phases of the study – might be something you can predict and even design for. John Knight, Director at usability research centre User-Lab (www.user-lab.com) suggests there may be something in that hypothesis, “You can probably generalise an aesthetic preference to a specific audience,” he told us. Interestingly, there were also matches between the visual appeal of a site and how several other characteristics were rated. These included design, layout, colour use and ‘imagination’.

While the researchers at Carleton couldn’t venture any conclusions beyond those already in their research, Cathy Dudek admitted these were interesting results. “It opens lots of doors, and should inspire further research,” she said.

What this study shows academically, many good designers already knew intuitively; you really don’t have long to make your mark. To create a positive impact with your home page and site there are some broad rules you can and should follow – and the basics are easy to identify. Your pages should look and work the same way on all target platforms. Sticking to W3C standards (www.w3c.org) to ensure consistency helps, but browser quirks should be taken into consideration. We’re pretty sure by now that slow loading Flash splash pages are a big turn off – even in broadband Britain. “Can you imagine the BBC with a huge spinning globe intro page and music that you were forced to experience or click to surf through every time you visited the home page?” asks Tim Gibbon, communications director of WebTrafficIQ (www.webtrafficiq.com).

We also know that people expect and, indeed, should get clear navigation cues within the first half of the page. But what about more esoteric issues? What about those elements – design, layout and colour – that the Carleton study identified as being so important?

In the eye of the beholder
“What makes a visually appealing site is often in the eye of the beholder, but there are some general rules of thumb,” says Jason Arber, co-founder at Pixelsurgeon. “As the Canadian study shows, users have become very adept at deciding whether they like a site in less than a second. The eye scans the page from top left to bottom right, looking for visual clues, so having extremely clear navigation and a clean layout will work in your favour. The brain can process images very quickly, so a couple of wellchosen pictures will help, as will a complimentary colour scheme”.

This advice should be taken in context and sites designed with a specific audience and its needs in mind. “If your web site is for a company specialising in relaxation techniques and the site is bright pink, you’ll find your visitors quickly hitting the back button,” says Arber. This is an appropriate example, as colour is especially important when thinking of the initial impact a site will make on the user. Whether you choose a bold statement or a more subdued approach may depend on your audience, but either way, colour choices will have a profound influence. “Colours work online in the same way that they do in print,” says Arber. “Certain bright colours can quickly draw the eye, while more neutral colours are calming and sophisticated. Unlike print, however, once a site is live a quick tweak of the style sheet can create a whole new colour scheme”.

For more on conducting your own usability tests, check out the US government’s own usability site www.usability.gov/methods/usability_testing.html

Web design evolves over time; it’s not a static thing. Pages with silver backgrounds were all the rage in 1996. At the beginning of the noughties, sliding Flash navigation bars could be found on all the hippest sites. Does following these trends make your site more appealing? “By coincidence or design, many “Web 2.0” sites favour a stripped down look,” says Jason Arber, “There’s clean typography and simple neutral colours, such as dark greys for text. Because these sites are leading the way with technology, expect their look and feel to permeate the entire web.”

We’ve noticed a further trend among Web 2.0 sites: rounded corners and distinct, colour-delineated content boxes. Visitors love sites like Flickr and Technorati for their content and design, so if you use similar visual elements in your layout it’s reasonable to assume that some of that success will rub off on your site. Be careful of trying to be too ‘contemporary’, though. This year’s Google may be next year’s Altavista. Trends age extremely quickly, while classic design lasts.

While the Carleton study concentrated on visual appeal, content plays its part in making a positive impact. In fact, the research found a symbiotic relationship between the two. The tests discovered a ‘halo effect’, where content on pages that were deemed aesthetically appealing by the participants was more highly rated than page designs they didn’t like.

John Knight makes an interesting suggestion. Sometimes it’s best not to saturate your front page with content. Although it’s important to clearly state what your site provides in a tone and manner that’s appropriate to your audience, curiosity is also key. For maximum impact, you want to draw users into the site – not give them everything on the front page. That means linking to content in an eye catching way, rather than running your big stories or listing your full catalogue on your home page.

Measuring success
Although these design tips can be applied broadly, there’s one rule that overrides and informs them all; know your user. “People tend to think of other folk’s taste being like theirs,” says John Knight, “That’s not the case”. Different people and different audiences have different tastes, desires, needs and aspirations. While you may be able to generalise about those tastes at the prototype stage, there’s only one way to find out if you’ve got it right for certain; and that’s to test your site.

There are two distinct types of research you can undertake. You’ll start with usability testing before you launch. We’ve got some great tips elsewhere in this article, but the first thing you should know is that it’s not brain surgery – anyone can put together a usability study. “It’s probably possible to hash together a guerrilla version of the Canadian study,” says Gerred Blyth, Head of Consulting at Human-Computer Interaction experts Amberlight (www.amber-light.co.uk). “Take a screen shot of the home page and make a PowerPoint presentation that advances the slide after a fraction of a second. Put the slide show in front of your participants and record their reactions.”

Though your home page is important, don’t forget the rest of your site. “A large number of visitors arrive through internal landing pages. It’s equally important to usability test these journeys and ensure that users are driven into other areas,” says Blyth.

With template based content management and external CSS is becoming the norm for page building and layout, it’s easier than ever to tweak your site after the fact. You can continue running usability tests after your site has gone live, but now you’ve an additional source of data too – your actual users.

Tim Gibbon explains: “Web analytics software is used to determine and understand how visitors arrive at web sites, how they navigate, where and how they are exiting it and why. It’s one of the first and most crucial factors a web site owner needs to consider when making their web site ‘sticky’ because this creates the relationship and builds a rapport with them,” says Tim.

Agencies like WebtrafficIQ can use their expertise to do this for you, though, there are options for personal pages and outfits on a small budget, too. AWStats is one of our favourite site traffic tools. It’s free, CGI powered and displays the data it gathers about your site traffic in colourful, easy to understand charts and tables.

With all these tweaks and testing guidelines, your site should be as attractive to your punters as pollen is to bees. Hopefully it can do that in the fraction of a second that your user take to make a value judgement about your front page. It’s not all about design, though, the Carleton study deliberately excluded sites that were famous or familiar to the test subjects, so you’ve one last weapon in your arsenal: spin. “Lots of research shows that branding is persuasive in forming favourable impressions,” says Cathy Dudek; “I think it does have an effect”. We think that combining our ninja design tips with a bit of judicious marketing should be everything you need to make your mark.

How to Redesign a Web Site

2008-06-23T13:58:00.000-07:00

Most designers would jump at the chance to revisit their work but what is the right motivation for a site redesign and how should the process actually work? .net puts you in the know

Even if you get it right first time, there are plenty of reasons to take a fresh look at an older site. For a start, the web is changing. Again. Consider the web circa 1994 – design didn’t even come into it for those of us struggling to view grey, graphics-free pages using Mosaic. Today’s Web 2.0 revolution promises an epochal shift in user-expectation as significant as that caused by the introduction of streaming media, WYSIWIG web design applications or Flash.

There are other factors, too: accessibility, for one, and, of course, the time-honoured tradition of corporate re-branding, which is as good a reason for redesigning a website as any other.

When it comes to redesigning, there is a clear divide about how websites should be handled: is it better to patch-up any problems and give a quick coat of paint to the original aesthetic or burn the whole thing down and start again from scratch?

To redesign or not to redesign

Ultimately, the level of redesign required depends on how well-designed the site is in the first place. A poorly designed site that makes use of tables, deprecated HTML, lacks accessibility features for disabled users, doesn’t work properly or is simply horrendous to look at will need something rather more comprehensive than a makeover.

“Good designers redesign, great designers re-align,” says the respected new media designer Cameron Moll. Moll, who contributes to webzine A List Apart (alistapart.com), explains that some sites can be redesigned comprehensively and immediately while others need to take a more gradual approach: “You have to understand and evaluate the users’ switching costs – will a full-blown redesign shock them? NationalGeographic.com is undergoing a phased redesign at the moment. You can go through the site and see how some areas have the new design and some, the older one. They’re doing a live redesign in pieces, which may not work for everyone.”

When dealing with well-established brands the process is likely to be a much more protracted affair because such work has extra considerations. Damian Cranney, managing director and co-founder of Frank (www.frankbelfast.com), explains that if you’re not working on everything from the branding upward, dealing with someone else’s design is going to be a certainty: “A lot of the time you’re inheriting other people’s work and this is the most frustrating part of any redesign,” he says.

A question to ask of any site undergoing a redesign, or any client interested in pursuing one is: what is the motivating factor? The answer will often define whether a site needs a simple revamp or a complete re-imagining.

When it comes to motivations for redesign, there are good reasons and bad. Good reasons include a company or product re-brand or a desire for marketplace re-positioning, updating to web standards or implementation of much-needed new functionality. Bad reasons might include keeping up with fashions, or even just a vague notion that a site needs to be changed – something rather different from knowing through business experience that a site is underperforming or is just plain ugly.

“There are two camps,” says Moll. “One typically relies on aesthetics with someone deciding ‘It kind of looks old’. That kind of emotional response to aesthetics brings about the redesign. The other focuses on strategic objectives and user-needs to decide that ‘our demographic has changed’ or ‘the market has shifted’.”

Stuart Avery, joint managing director of Bristol’s E3Media (www.e3media.co.uk) explains that his clients approach redesigns very rationally: “A redesign can be triggered by a branding change – some of our clients, such as Triumph, have gone through this – others may have under-performing sites. Also, there are patterns of design and usability that people get used to, particularly in ecommerce,” he says.

www.betfair.com

Based in the UK and licenced in Australia, Austria and Malta. www.betfaircorporate.com British-based betting website Betfair overhauled its site in February of this year. Originally launched in 2000, Betfair won a Queen’s Award for innovation in enterprise. The company, a registered bookmaker, uses its website to take a different view of betting. Betfair is a betting exchange, which operates in a similar fashion to stock exchanges, allowing punters to bet at odds set by other punters rather than the bookmaker itself. .net spoke to Joe Waller, Betfair’s head of exchange engineering.

.net: Why was Betfair redesigned?
JW: There are several reasons: from a product perspective, it’s important to not only deliver new products but to keep users involved and make usage easier; we read our forums – there’s an active community and we take notice of what they think; we have enormous access logs and use that data to try and understand our customers. The question to ask is how can we become more successful and that, for us, involved a redesign. Also, the technology of the web grows – things become possible that were not before.

.net: How comprehensive was the process and what did it involve?
JW: We really tried to do an awful lot of stuff – our timelines were quite aggressive. We launched [the redesigned site] in February this year, having started the redesign in August 2005. This was a long time for us but we developed prototypes and wireframes that went to internal and externally focus groups. If we do a redesign it’s really important to keep focused. It’s very easy to lose it and say things like ‘this will look cool over here’. You have to ask the question: are we keeping our eyes on the ball?

.net: What were the biggest challenges?
JW: It’s incredibly challenging technically to run an exchange. We promise you the price you wanted or better, so it operates on a first come, first served basis. This means that it is a serial process, which is a significant technical challenge. A normal stock exchange runs during business hours – we run 24 hours a day, seven days a week. As far as transactions go, we process more than most stock exchanges. The design is largely in house because of the huge technical challenge.

Accessing the users

A growing factor in web design is accessibility. In the early days of the internet, this wasn’t an issue – disabled users simply were not catered for. Today, things are different. Patrick Lauke, webmaster at the University of Salford and freelance designer at splintered.co.uk, says: “A site should definitely be redesigned if the current one isn’t up to scratch – there are both legal and moral reasons to do so.”

Designers in the UK need to be aware of compliance issues surrounding websites because the Disability Discrimination Act (1994) has now been amended to cover websites. “Basically, it comes under the provision of goods and services,” says Lauke. “The code of practice, which came out later [than the DDA (1994) itself] does specify websites. They have to be accessible to the visually-impaired, deaf and hard-ofhearing.” All of which is perfectly laudable, but what, exactly, does ‘accessibility’ mean? “A lot of it is common-sense, really. If you provide audio content, for example, you should also provide text transcriptions,” says Lauke.

There are collateral benefits to making accessible sites: market expansion, of course, is one but there are others. “If a university lecture is made available as a text transcript, it can be used for quotations much more easily than an MP3 file,” says Lauke.

Lauke flags the growth of podcasting as a problemarea for accessibility: “For some people, it’s so much easier to put on a mic and talk rubbish instead of typing it.” Here Lauke is echoing comments by Andy Hertzfeld, one of the original designers of the Apple Macintosh computer, who feels that podcasts go against the very nature of how information is presented online. One major benefit of offering a transcript is that, unlike audio content, text transcriptions are fully searchable and will be indexed by search engines.

“With web-accessibility, I see a parallel with access ramps in architecture. That’s not done purely for wheelchair-users. It has other benefits, for example, delivery of goods,” says Lauke.

There is a danger that the DDA (1994) – and similar provisions elsewhere, such as Section 508 in the United States – may be used by unscrupulous designers to make a quick buck by forcing redesigns on clients. Clients should not have their hands forced, at least not by designers, when it comes to accessibility. Instead, if a client is not convinced about the need for accessibility, explain to them that a standards-compliant site is not only an ethical imperative, but will also create greater market opportunities. After all, business people think in business terms.

Surfing the zeitgeist of redundancy

When it comes to motivations for redesigning, an oft-quoted response is desire to keep up with the cool kids – trend following.

Trends are all very well, but there is the danger of becoming too obsessed with ephemeral fashions. A newly designed site may look good today, but if a designer becomes obsessed with following each and every passing fad they may well awake to find their work the visual equivalent of Sigue Sigue Sputnik.

Cameron Moll is suspicious of redesigns motivated by trends: “This goes back to redesigning merely for aesthetic reasons. I think it is harmful to redesign to just keep up with trends.” For Moll, such redesigns are not just unnecessary, they also risk not fulfilling clientand user-needs: “This is allowing external factors to dictate what you do,” he says. “I don’t think it’s necessarily bad to adapt to trends. Apple does a great job of not only adapting, but setting trends, but to just slavishly follow is not very creative.”

In a sense, obsessive style-watching is a failure of imagination. Certainly, to begin emulating ‘what’s hot’ in a purely robotic fashion is to start out on a journey that’s likely to end at the dole office, but, conversely, it’s impossible to not be influenced by what you see – nor should you try.

When Moll says, “Good designers redesign, great designers re-align”, he is playing on the old adage: good artists copy, great artists steal. Reportedly coined by Pablo Picasso, this comment itself has been purloined so many times since then it’s now routinely attributed to all manner of people and has been regurgitated by virtually every media commentator you could care to mention. In truth, Picasso probably didn’t even say it, though he did note that artists should be aware of other artists’ work – and this is an important point.

Keeping-up with every passing fad in web design is a fool’s errand, but knowing what other people are doing – and being inspired by it – is just good sense. Plagiarism is bad, but inspiration is vital.

Stuart Avery explains that his company E3Media keeps an eye on the web design world: “We have a creative database of sites that people, internally, think are cool. We also try go get out and about and see design in the real world.”

It’s not just other designers you should keep an eye on, though. As a rule, designers should keep their eyes open and pay attention to the world around them. Damian Cranney from Frank says that he gets inspiration not only from works of design, but from the world around him – and his clients: “It could come from a conversation, something the chief-executive says in a meeting with you, it can come from the company’s location or the way they work. Inspiration can come from anywhere.

“We find trends occur on a micro-level – a year ago we found that a lot of clients wanted content management systems for sites that would be updated daily, now we’re finding that people are, once again, wanting really cool-looking sites.”

Frank’s unapologetic, design-focused strategy is not necessarily suited to every client, which is something that Cranney freely admits: “We’re not focused on search engine optimisation – that term makes my head explode. A website is an affirmation of what you hope people think of you,” says Cranney. “I believe that design, though an inherently commercial activity, is about employing visual images to solve communication problems. The media are deployed to say something. Some people wax lyrical about the business-to-business aspect of things or site optimisation. Well, that’s for the marketing department to consider and it should all be in the brief. The designer has to produce a working design of cultural significance.”

Cranney is here exhibiting some good business sense: all designers are different, as are clients, and all will bring different things to the table. In order to succeed, it is vital to know your clients and to play to your strengths.

The National Geographic home page circa 2005 was a fairly typical info-rich design. It’s quite stark by today’s standards and uses a lot of tables. The new NG home page makes extensive use of CSS for both styling and positioning. Tables are still used, but not to the same degree as in 2005. Note that the subtle colour-scheme using gradated greys makes the page more attractive.

Value judgements

It sounds so simple: a successful website is one that works. But how on earth should a website be evaluated? From a prosaic and purely functional perspective? Or should you grapple with the more nebulous area of aesthetics?

It’s difficult to make value judgements on aesthetic issues, but not impossible. One problem is our criteria for quality have changed and the notion of a ‘correct’ design has been exploded. Nevertheless, judgements must be made.

An amateurish site will be easily identified – bad design of that order is easy to spot, but there’s more to aesthetics than avoiding the use of corny type faces and dodgy images. The aesthetic of a site should be judged by the needs, desires and expectations of its users. Technically, both the Guardian and The Sun are the same kind of product: newspapers. However, they take rather different approaches to design and layout, approaches that can be seen as clearly on their websites as they are in the actual newspapers themselves. In short, keep the audience in mind: there’s no point employing the simplicity of Die Neue Typographie if your client is a discount superstore.

Beyond the rarefied realm of art, there are other methods of distinction and qualification that a successful designer must employ. For a start, most sites function as part of a business. A typical pitfall in the redesign process is to become over-involved in art issues or side-tracked by colour-schemes or obsessed with technical details and forget to keep an eye on the bottom-line: does the site do what it is supposed to?

This happens time and again in web design. It happened with frames, it happened with Flash and it happened with streaming media. Now it’s happening again with AJAX. Cameron Moll explains: “AJAX came along and suddenly there were two camps. The first group thought: ‘we’ve got to put it everywhere’ and the second decided: ‘it’s useful but to use it for the sake of it is poor judgement.”

There are methods by which a designer can assure success – clear and frequent communication with the client is one and site-testing is another: “We have a level that we want to achieve,” says Avery. “Alongside that we perform user-testing.”

Thanks to today’s sound-bite politics, focus groups have a bad reputation, but if a site is to face heavy traffic from the public they’re virtually essential – people often approach websites in ways that no designer could ever think of and a focus group should help show where any otherwise invisible problems lie.

The best way to avoid mistakes is to stay on track and the best time to judge is actually at the beginning and throughout the project. Damian Cranney explains: “That kind of judgement happens at the beginning – you set the objectives and come back to the client, showing sample projects. At that point, set up a meeting to discuss these things. Therefore, the judgement is made by the client as you go along. The feedback at later stages should simply be things such as changing images.”

Ultimately, though, there is one over-arching objective in any redesign: the new version must be better than what preceded it. Keep this in mind and you’re set for success.

create an 80s-style underground gig poster effect

2008-06-23T13:54:00.000-07:00

Derek Lea shows you how to combine Photoshop with ‘traditioinal’ technology to create an 80s-style underground gig poster effect.

When it comes to editing images for use in websites, more often than not, we’re trying to achieve perfection within Photoshop. But every once in a while, a task comes along that demands something different.

In this tutorial, we’re going to show you that to achieve that gritty, street-level look, you needn’t bother trying to find a filter that does it for you. You simply need to be willing to venture down the street, find the cheapest, least impressive, cornershop photocopier and treat it as your primary artistic tool.

What you see before you is a splash page design for Canadian rock band The Weekend. The band requires a welcome page that’s as unrefined as their bare-bones rock ’n’ roll. They’re the type of band that sticks up DIY photocopied posters around town advertising the next gig. Taking this as our cue, we’re going to mimic this style by combining Photoshop with an old photocopier. For a more pronounced effect, photocopy your photocopies several times, crumple up the pages and then copy them again!

Step 1: Adjust levels On the CD, open ‘photo.psd’. To bump up the contrast, create a new levels adjustment layer via the menu at the bottom of the Layers palette. Drag the Input Levels slider to the right, darkening the shadow areas. Drag the middle slider to the right to lighten the midtones. Click OK.	Step 2: Duplicate the background Duplicate the background layer by dragging it on to the ‘Create a new layer’ button. Drag the duplicated layer to the top of the stack and change the Blending mode of the layer to Overlay in the Layers palette. This increases the image’s saturation and contrast.	Step 3: Remove the colour Because we’re going to print the image in black-and-white and photocopy it, it’s a good idea to preview the image in greyscale. Create a new hue/saturation layer from the drop-down menu at the bottom of the Layers palette and decrease the saturation by 100.
Step 4: Increase contrast and print Because the image is still lacking contrast, we now need to create a new levels adjustment layer. Do this using the same method as we showed you in the first step. When you’re happy with the result, print out the file using your own printer.	Step 5: Create a polygonal selection Using the Layers palette, create a new layer. Drag it up above the others in the palette. Select the Polygonal Lasso tool. With the new layer targeted, press D to set the foreground to black. Create a polygonal selection that surrounds a band member’s face area.	Step 6: Fill the selection area Now add more polygonal areas to the existing selection. Be sure to add a polygonal selection area to every area where skin appears. When you’re finished, type Alt+Delete on the keyboard. Once the selection is filled, disable the visibility of all other layers.
Step 7: Show and hide selected layers With just this layer visible, print the file. This will be scanned in later, after it’s photocopied, and used for the basis of the skin colour. Hide the currently visible layer and enable the visibility of all other layers. Create a new layer and target it in the Layers palette.	Step 8: Print a second polygon layer On the new layer, draw a polygonal selection around a piece of clothing. Draw more selections over the top of other members' clothing. Fill the selection with black on the current layer. Hide all other layers and, with only the current layer visible, print the file again.	Step 9: Print and create a new file Create a new layer using the Polygonal Lasso tool to define areas, and fill them with black. Create black polygons over details, such as jewellery and sunglasses. Hide the visibility of other layers, and print. Save and close the file, then create a new file for the next phase.
Step 10: Generate selections Enable the Paths option in the Tool Options bar. Create a rounded rectangle path. Generate a selection from the path. Fill the active selection with black. Use the Marquee tool to click and drag the inside of the selection border to another location. Fill the selection with a gradient.	Step 11: Fun with type Try entering text with a white fill then adding a stroke effect from the list of styles at the bottom of the Layers menu. Duplicate the layer, remove the effect, then fill the text with black. Generate a selection from the layer, move the selection to a different area and fill it with a gradient.	Step 12: Print and photocopy Use the rest of the canvas area and the methods you’ve employed so far to add the rest of the text and other elements you want on your splash page. When you’re finished, print the page. Make photocopies of all your printouts until the desired roughness is achieved.
Step 13: Create a new file Scan your favourite photocopied results and then create a new file, but keep all of your scans open. Specify a pink background colour. Go to your scan of the band photo first. Use the Polygonal Lasso tool to select them. Choose Edit > Copy and return to your new file.	Step 14: Paste the band Paste the copied image into your working file (Edit > Paste). Change the Blending mode of the layer to Multiply. Use the Move tool to position the layer in the centre. Go to the scan of the skin areas, select and copy them, then return to the working file. Go to the Channels palette.	Step 15: Create an alpha channel Click ‘Create new channel’ in the Channels palette. Type Ctrl+I to invert it. Paste the copied image into the new alpha channel. Ctrl+click the Channel icon to generate a selection from it. You might need to invert the selection by typing Ctrl+Shift+I.
Step 16: Fill the new selection Create a new layer in the Layers palette. Choose a light pink as your foreground. Fill the active selection with this colour. Drag the layer beneath the black layer in the Layers palette. Type Ctrl+D to deactivate the selection. Position the layer so it lines up with the band photo.	Step 17: Repeat the process Open the scan of the black clothing polygons. Select and copy the desired areas. Return to the working file. Create a new alpha channel. Invert it and paste your selection into it. Invert the selection. Create a new layer. Fill the selection with blue. Move it beneath the black layer.	Step 18: Select the rectangle Deactivate the selection and position the layer. Repeat this process again with the scan of the black polygons, using green. Go to your scan of the other image elements. Copy the black, rounded rectangle. In the working file, paste it into a new inverted alpha channel.
Step 19: Alter the layer As before, fill the selection with colour on a new layer. Drag it beneath all other layers. Increase size using Free Transform. Select the rectangle with a gradient. Create a new layer with a green area based on the copied shape. Change the Blending mode to Overlay. Increase the size.	Step 20: Add logo Copy and paste the Weekend logo from the other file into the working file as a new layer. Change the Layer Blending mode to Multiply, use Free Transform to adjust size and drag it to the top of the stack in the Layers palette. Return to the other file and select the two lines of intro text.	Step 21: Repetition Use the methods above to copy the selection, bring it into the working file, create a channel-based selection, then fill it with colour on a new layer. Add the colour fill to the inside of the logo on a series of layers, tweaking as you go.

Photoshop CS3 - Background Erase Tool

2008-06-19T14:53:00.000-07:00

The erase background tool is powerful, but good results are only possible if you understand how it works. In this tute, we will look at all the options in the tool and use them to extract backgrounds from our images.

The tool works best if the background is all a similar colour, for example, someone against a solid colour or a bright sky.

1I have deliberately chosen a difficult image, as the girl has flyaway hair that i want to keep.

2From the toolbox, select the background eraser tool

3When the tool is selected, the control palette will display the default settings. Select the 3rd button, Sampling:Foreground Swatch This will only erase the foreground colour. Set the tolerance to 25%
Make sure Protect Foreground Colour is ticked.Selecting the option Sampling:Foreground Swatch allows you to sample the background colour most prominent in your image, so the eraser will ignore contrasting colour pixels.

Choosing to Protect Foreground Colour allows you to sample a foreground colour to protect from the eraser.

4Now we need to sample the background colour to erase. Select the background swatch in your toolbox, and double click to bring up the colour panel.

5Select the background colour with the eyedropper, right click to select a 51X51 average. This will make sure that the area sampled will be larger than just one pixel, so many shades of light blue will be included instead of just a singular blue pixel.
Next, select the foreground to protect (we will start with the girl’s hair) I will use a 11X11 average for this. Notice the colours on my background and foreground swatches.

6Choose a nice big size for the brush. Use CTRL (CMD) and the bracket keys({}) to change the brush size.

7Think of the brush as a sort of magic wand tool, that erases selections based on the colour it clicks on. The more a colour is prersent under the "radius" of the brush, the more photoshop will think it is the background colour, and erase it.

8You can now get nearer the edge, just remember that you want more of the colour to be erased, less of the protected colours, under the brush!

9Notice that to select the more fiddly edges, I am positioning the centre of the brush on top of the light blue, not the hair.

10These settings will remain true for similar areas, as soon as we get to areas with different colurs, for example the girl’s blouse, we need to select different colours to ‘protect’ - use the eyedropper to select the new foreground colour, right click to select a 51X51 pixel average.

11 You will need to change foreground and background colours often as you work through the image.

12Now open another image, perhaps an outdoor image like a beach or busy street.
Paste the selection of the girl above it, resize to fit and get rid of any stray white areas with a soft brush eraser.

13To tidy up any stray white edges around the hair, we will darken some parts of the imageSelect the Burn Tool

14From the Range dropdown options, select highlights and an exposure of 25% or thereabouts.

15Now go over the edges of the hair to darken (burn) any stray highlights or white halos on the edges.

16The finishing touches:
Image>adjustments>levels to increase tonal contrast on the background to match the girl image. This is a quick and dirty fix, As this tute is about the background eraser tool, not levels
Position the girl so her eyes are aligned with the horizon, to make the perspective credible.
You’re done!

Great Font Resources!

2008-05-20T15:19:00.000-07:00

Here are some GREAT fonts resources!!

A GREAT RESOURCE FOR ANYTHING WEB DESIGN

2008-05-20T15:16:00.000-07:00

You can find SO many web sites here!! This is incredible!! Check out the free CMS at the bottom...

Click HERE

Christian Web Designers

2008-05-20T14:45:00.001-07:00

Obviously I added my company www.stepstonedesigns.com to this list, but I was in class the other day (more like 3 weeks ago) and I found a lot of Christian web designers and web design companies so I made a list.... and here it is:

Check out www.church123.com
Christian web desisgn

http://www.lastdaywarriors.com/

URBAND.ORG - the crossover church link doesn't work
JUST AN AMAZING MINISTRY - http://www.crossoverchurch.org/
http://www.sanctuarycovenant.org/joomla/

Flash PHP Email / Contact Form

2008-05-20T09:06:00.000-07:00

To get the flash conatct form, please click here to download. After unraring the file, please follow the below instructions.

Installing the contact form

The contact form will help you recieving messages directly from your site. The message is sent by a PHP script so you will need PHP support on your hosting server.

1. Unzip / Unrar the contact form archive. You will find 3 files :

contact_form.fla - the contact form source file
email.php - the PHP file which will send the message
contact_form.swf - the standard contact form

The standard contact form has 3 fields : Name, E-mail, Comments and the send button:

2. Copy those 3 files into your site folder.

3. Edit your site in Macromedia Flash MX or Macromedia Flash MX 2004.

4. Go in the timeline on the contact keyframe.

5. Insert a new empty movie clip : Insert -> New Symbol -> Movie clip. You can name it "contact form".

6. Open the Flash Library ( CTRL+L or Window -> Library ) and drag the "contact form" movie clip symbol into the timeline contact keyframe.

7. Name the "contact form" movie clip symbol : "contact_form"

8. On the timeline click the contact keyframe, open the actions tab ( F9 ) and place the following actions:

_root.contact_form.loadMovie("contact_form.swf");

Now when you will export your movie the contact form will load into the contact keyframe.

9. Now you will have to insert the email address where the messages will arrive. For this you will have to edit the second line : << $destination="email@domain_name.com"; >>. You have to change "email@domain_name.com" with your email.

Now the contact form will work and the messages will arrive on your email address.

Contact Form Customization

The standard contact form has only 3 input text fields, but you can add more fields.

Adding a new text field :

1. Open in Macromedia Flash contact_form.fla

2. Open the Flash Library ( CTRL+L or Window -> Library ) and edit the "form" movie clip symbol.

3. Select the Text Tool (T), from the Properties panel select Input text and draw your new text field..

4. Also in the Properties panel there is the "Var" property where you must enter the name for your new text. Let's name it "new_text_field".

5. Edit the "email.php" file. Right click the file and select : Open With -> Notepad . For the new texfield you must add new lines in the PHP script: and the standard script will be now like this:

$destination="email@domain.com";

$new_text=$_POST['new_text_field'];

$name=$_POST['name'];
$email=$_POST['email'];
$mes=$_POST['comments'];
$subject="Message from $name" ;
$mes="Name : $name\n
Email: $email\n
Comments: $mes\n

New text field : $new_text";

mail($destination,$subject,$mes);

Now the new text field will work.

GOOD LUCK!

Thanks to those that contributed to this tutorial :)

Free Money Donations from Google for Non-Profits

2008-05-03T12:56:00.000-07:00

Google's the man! or da company if you will :)

Check this out if you are a non-profit and would like to receive donations from people for your organization for free!

Check this out: http://checkout.google.com/seller/npo/

The will have this for free until 2009 so take advantage of it!!

SUBSTITUTE FOR PAYPAL!

2008-04-28T10:36:00.000-07:00

Hey everyone!

Paypal is prolly going to go out of business with www.revolutionmoneyexchange.com. It's a relatively new (2007), but REALLY effective. They are trying to overtake paypal and everyone is saying that they are going to!!

Sign up and STOP getting charged 2.9% of your transaction fee PLUS $.30 per transaction. This is FREE!

Use this button to sign up, receive $25 for FREE and this will also give me $10 since I referred you!!

A Hilarious Designer's Post

2008-04-11T17:35:00.001-07:00

From the Trenches of In-house Design…

Posted by: Thomas Stephan
Category: Dyer Straits
Bookmark on: del.icio.us

Wait…wait…what exactly do you think you’re doing there?

Okay, stop. Just…just stop…step away from the Microsoft WordArt toolbar right now.

I mean it.

That’s right. Put the mouse down, buddy. Now what exactly were you trying to do here?

You’re trying to show me how this brochure should look? Wow. Okay…I can accept that. I get the idea. But if I recall right, I left a proof of the brochure on your desk a week ago. You were supposed to get back to me about this because it was vital and super important.

Yeah — that folder there…the one that your coffee cup’s sitting on. No, under the book. To your left. Your left. Your other left. Yes.

You didn’t like it? Is that it? You…you didn’t like it? Can I ask why?

“It’s not purpley enough?” That’s your answer to the question as to why you didn’t like it, and why it’s been a coffee cup parking lot for a week? “You just don’t like it?”

I’m sorry — lemme pick my jaw up off the floor for a second. It’s probably over here next to the other three proofs I left on your desk. Okay…I’m back.

Now…you don’t like it and it’s not ‘purpley’ enough…anything else?

It doesn’t have the photos you want on it…okay…which photos?

The ones you have on your camera…at home…that I’ve never seen nor heard of until now…right.

Okay. Well - you go ahead and get me those photos and I’ll see what I can do about the “purple issue.”

Oh, you DO have the photos? Oh good! Well that saves some time.

They’re on your phone. Your camera phone. And they’re 1 inch wide by 1 inch tall. And you want them to be 4×6 inches each.

*sigh

Okay. I tell you what. Because you’ve asked for the impossible, and you want it yesterday, and you want me to read your mind, I’m going to save myself the hassle of designing and beat you to death with this imitation leather chair in your office. I’m killing you with this chair because it’s cheap, tacky and disposable, and therefore your equal in many respects.

Please don’t scream…it’s demeaning. And nobody will hear your feeble cries for help because they’re all wearing headphones to drown out those phone calls you make where you bray about your colonoscopy and just how BIG that probe was.

I’m sorry it had to come to this, really I am. But honestly, ‘purpley’ isn’t even a word, and this is the third time you’ve used it. I’ll make you a deal though; if any of the welts I’m going to leave are the right shade of ‘purpley,’ you can take a photo with your camera phone and I’ll try to get that blown up to a usable size.

See how well things go when we communicate? Now stop dodging me…this is a small office and you’re an easy target…

10 things your IT guy wants you to know

2008-04-07T14:56:00.000-07:00

I didn't write this article, I found it here. But if you're in IT or a computer savvy person that become the IT person by default... then you'll enjoy this!

If you ask me technical questions please don’t argue with me because you don’t like my answer. If you think you know more about the topic, why ask? And if I’m arguing with you…it’s because I am positive that I am correct, otherwise I’d just say “I don’t know” or give you some tips on where to look it up, I don’t have the time to just argue for the sake of it.
Starting a conversation by insulting yourself (i.e. “I’m such an idiot”) will not make me laugh, or feel sorry for you; all it will do is remind me that yes, you are an idiot and that I am going to hate having to talk to you. Trust me; you don’t want to start a call that way.
I am ok with you making mistakes, fixing them is my job. I am not ok with you lying to me about a mistake you made. It makes it much harder to resolve and thus makes my job more difficult. Be honest and we can get the problem resolved and continue on with our business.
There is no magic “Fix it” button. Everything takes some amount of work to fix, and not everything is worth fixing or even possible to fix. If I say that you just need to re-do a document that you accidentally deleted 2 months ago, please don’t get mad at me. I’m not ignoring your problem, and it’s not that I don’t like you, I just cant always fix everything.
Not everything you ask me to do is “urgent”. In fact, by marking things as “urgent” every time, you almost ensure that I treat none of it as a priority.
You are not the only one who needs help, and you usually don’t have the most urgent issue. Give me some time to get to your problem, it will get fixed.
Emailing me several times about the same issue in the same day is not only unnecessary, it’s highly annoying. Emails will stay until I delete them, I won’t delete them until I’m done with them. I will typically respond as soon as I have a useful update. If it is an urgent issue, let me know (see number 5).
Yes, I prefer email over telephone calls. It has nothing to do with being friendly, it’s about efficiency. It is much faster and easier for me to list out a set of questions that I need you to answer than it is for me to call and ask you them one by one. You can find the answers at your leisure and while I’m waiting I can work on other problems.
Yes, I seem blunt and rude. It’s not that I mean to, I just don’t have the time to sugar coat things for you. I assume we are both adults and can handle the reality of a problem. If you did something wrong, I will tell you. I don’t care that it was a mistake, because it really makes no difference to me. Don’t take it personal, I just don’t want it to happen again.
And finally, yes, I can read your email, I can see what web pages you look at while you are at work, yes, I can access every file on your work computer, and I can tell if you are chatting with people on an instant messenger or chat room (and can also read what you are typing). But no, I don’t do it. It’s unethical, I’m busy, and in all reality you aren’t all that interesting. So unless I am instructed to specifically monitor or investigate your actions, I don’t. There really are much more interesting things on the internet than you.

How to Create Gradient Website Background (y axis)

2008-04-02T12:29:00.000-07:00

This tutorial will walk you thru the basic steps required to create a background gradient similar to the one used on this site (and contained in the Bex01 serendipity template). Once you have completed this tutorial you will understand the principals involved and can make your own variations.

********** STEP 1: CREATE OUR .PSD INTERFACE FILE **********
Create a new file 120 pixels wide and 5 pixels high. Put the Resolution at 72 pixels/inch.
Set the background color to White. Name it something appropriate ie: backgrad.psd.

********** STEP 2: CREATE OUR GRADIENT LAYER **********
In the layers palette double click on the text "Background" (not the thumbnail). This will generate a pop-up window which will allow you to rename the layer and it will simultaneously unlock the layer. For the sake of simplicity, I’ve left the layer name default to Layer 0. With Layer 0 selected, choose edit --> fill (Shift F5) and fill the layer with black. If you wish to create your own gradient, in this step fill your layer with the general background color you desire on your website.

********** STEP 3: CREATE OUR GRADIENT **********
At the bottom of the layers palette is the cursive F (contained in a circle) which enables you to apply layers styles to your layer. Click on this cursive F and from the drop down menu associated with it, select "Gradient Overlay".

With the layer Style window open, click directly on the Gradient that is represented. This will pop-up the gradient editor. Choose a gradient (usually the second choice from the top left) from the presets which represents Foreground to Transparent. This specific gradient is a part of the default gradients that ship with Photoshop. If you have messed around with your gradients previously and do not have this gradient available as an option, in the gradient editor click on the small right pointing arrow to the far right of the word "presets" and from the drop menu choose "Reset Gradient".

Once your Foreground to Transparent gradient preset is selected, it will appear in the window under the preset choice. The color represented in the gradient is derived from your existing choice of foreground/background colors. Since my foreground/background colors are white/black - I will see white moving into transparency. Look at the image below to get a good handle on this.

Now click on the far left stop that appears under the gradient in the gradient editor. We need to change this color. By clicking on it, the color swatch appears referenced under Stops (directly below it). Click on the color swatch in the color picker pop-up enter the following: #2b646b. Click OK to exit the Color Picker. Your gradient should now show that color fading to transparent. Leave everything the way it is and click OK to exist the Gradient Editor. In the layer style your gradient should appear in the gradient overlay. Check the box next to the word Reverse. This will flip the gradient. Now change the Angle to 0.

We want the gradient "flipped" because on our website, we want the light color extending for the box area that defines the content of the website out to the edge of the browser. In effect, we need our background color to get lighter as it approaches our site (which is centered on the page).

Click OK to exit the Gradient Overlay style.

********** STEP 4: DUPLICATE OUR GRADIENT LAYER **********
With Layer 0 selected, right click on it and choose duplicate layer. Call this new layer "grad right". Now with the grad right layer selected, from the layers palette window choose the cursive f at the bottom and select "Gradient Overlay". Deselect the check box next to reverse. Your gradient flips. Click OK.

You should now have two layer files, both with identical gradients except than in grad right the gradient is opposite to layer 0.

********** STEP 5: SET OUR FILE UP FOR THE WEB **********
Now here is where the fun starts. In the case of Bex01, I know that my website is centered in the browser. I know that the width of my website is fixed at 750px. The width of my graphic is 120 pixels. I want the gradient appearing on the left side and the right side. The formula is simply 120 + 120 + 750. So the minimum width of my graphic needs to be 990 pixels. However, I don’t want my background to repeat on a screen both on the x and y axis, so I’ll extend that width to 1000 pixels.

In Photoshop go to Image --> Canvas Size. Enter a width value of 1000 pixels and select the box so that the pixels will be added to the right side.

Select the Move Tool and then select the "grad right" layer. holding down the shift key drag that layer until it is positioned to the far right.

You will notice that the area in the middle is transparent. We need to fill that area with our teal green color. To do this, create a new layer (Shift Ctrl N on the PC | Shift Command N on the Mac) and fill it (Shift f5) with #2b646b. Drag this layer in the layers palette window to the bottom of the stack. Your layers palette should resemble the following.

You are now basically finished. Save your file as a .psd. Once you have it saved, choose "save as" and save it out as background.jpg or choose save for web and save a copy as .gif.

********** STEP 6: ADD THE CSS TO OUR WEB PAGE **********
On your webpage put the following html in your css. For your background color specify the general background color you choose in Step 2.



body {
margin:0 auto;
padding:0px 0px 0px 0px;
background:#000000 url(yourpicture.jpg) top center repeat-y;
}

How to Create a Background Layer

2008-04-02T12:09:00.000-07:00

This is a very basic, but yet extremely useful tutorial which will teach you how to an appealing background texture/pattern for your website.

Start off by opening your Adobe Photoshop application. Then create a new Photoshop document. In order to create a new Photoshop document, you need to go to ‘File > New…’ *or simply by double-clicking anywhere on the empty workspace. Once you have done this, you should notice a ‘New’ dialog opening on the workspace. View Figure1 below as an illustration and reference to the values which you need to input into the prompting fields.

Figure 1

Once you have filled in all the fields as shown in Figure1 above, you may press ‘Ok’ to continue with the creation of you new Photoshop document. This is a very small document which we are creating, but it will simply serve as a pattern for implementation on other designs.

Press ‘Z’ to select the ‘Zoom Tool’. Now zoom in as much as possible. You will now select the ‘Pencil Tool’ from the ‘Toolbox’. View Figure2 below as an illustration to selecting the ‘Pencil Tool’.

Figure 2

With the ‘Pencil Tool’ actively selected, you will now right-click anywhere on the stage of the new document to reveal the size preferences of the tool. Select the 1px size and click anywhere outside of the stage. Closely observe Figure3 below, for you need to clone the structure and effect as shown in Figure3 below. Simply click once with the ‘Pencil Tool’ on the corresponding positions to make a square dot.

Figure 3

After you have achieved the same result as shown in Figure3 above, you are now ready to save the pattern for further implementation. If you are satisfied with the design, go to ‘Edit > Define Pattern…’ and notice a dialog opening on the workspace. This dialog will require you to type the appropriate name according to your personal preferences. View Figure4 below as an illustration to this step.

Figure 4

We have now created a custom pattern, and thus we are ready to implement this pattern into our desired design.

Create another new document. You can do this by going to ‘File > New…’ *or simply by double-clicking on the empty workspace. This will open up a ‘New’ dialog. View Figure5 below as a reference and exact illustration to the values which you need to enter into the prompting fields of this dialog.

Figure 5

If you have filled in all the fields as shown in Figure5 above, you may press ‘Ok’ to continue creating the new document. Now move over to the ‘Layers’ panel. If the ‘Layers’ panel is not visible on your workspace, you can make it visible by going to ‘Window > Layers’ *or by pressing ‘F7’ as a keyboard shortcut.

You will notice that there is one, empty layer named ‘Layer1’. We will now fill this layer with the pattern which we have saved previously. You can use the fill action by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When you do this, you will notice a dialog opening on the workspace. View Figure6 below as a reference to the values which you need to input.

Figure 6

You will notice, as seen in Figure6 above, that I have chosen the pattern which we created earlier on. Once you have done this, you may press ‘Ok’ to fill this layer with the pattern. Now rename ‘Layer1’ as ‘texture’. You can rename the layer by double-clicking directly on the text/caption of the layer and then typing the new name at the insertion point.

Now create a new layer in the ‘Layers’ panel. You can do this by going to ‘Layer > New > Layer…’ *or by pressing ‘Ctrl’ + ‘Shift’ + ‘N’ as a keyboard shortcut. You should notice a dialog opening on the workspace. View Figure7 below as a reference to the values which needs to be entered.

Figure 7

We are almost done with this tutorial. There is one last step which needs to be completed. Move over to the ‘Layers’ panel. You will notice that the ‘background color’ layer is above the ‘texture’ layer in the ‘Layers’ panel. Simply click and drag the ‘background color’ layer below the ‘texture’ layer in the ‘Layers’ panel.

Move over to the color box which is situated on the ‘Toolbox’. You will now change the primary/foreground color to the color which you would prefer to use. I have chosen to use #009CFF as my foreground/primary color. View Figure8 below as an illustration.

Figure 8

Ensure that you have the ‘background color’ layer selected in the ‘Layers’ panel. Now fill the ‘background color’ layer with the foreground/primary color. This can be done by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When the ‘Fill’ dialog opens up on the workspace, simply press ‘Ok’.

We have completed this tutorial, and you may view the background texture which I have created in Figure9 below. You can use the same idea and effect to create different textures and effects.

Figure 9

I have decided to transform the ‘background color’ layer to a gradient of two different color shades. You can play around with different effects, filters and other features. View Figure10 below as my final result.

Figure 10 (Final Result)

Thanks to Tutorialized.com for this tutorial!

Microsoft - One click opens up search???

2008-03-27T22:57:00.000-07:00

Man this was making me angry!! Finally I found the answer to thisproblem.

Quick fix

Click Start, Run and type this command:

regsvr32 /i shell32.dll

Yeah!

Search Engine Optimization (SEO)

2008-03-18T08:38:00.000-07:00

Search engine optimization (SEO) is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results for targeted keywords. Usually, the earlier a site is presented in the search results, or the higher it "ranks", the more searchers will visit that site. SEO can also target different kinds of search, including image search, local search, and industry-specific vertical search engines.

A superiorly designed and laid-out Web site, along with excellent and good-quality content, has a lot more to do with search engine rankings as any other aspects.

A factor which is more vital than the quantity of content, is the quality of the content that needs to be seriously taken cared of, because you simply can't just put out a lot of words and expect your online visitors to find it interesting, and keep coming back to it for some time.

Getting a professional SEO expert or firm to improve your Web site is often compared to making an investment in your firm's core infrastructure, than simply paying for mere advertising space. In devoting significant resource and effort by utilizing a coherent SEO program, this helps you run a long-term strategy for your online business.

This holds true, because when a business stops paying its optimization expert at some point after the campaign has started, it would still continue to get results from that campaign for longer periods of time, depending on whether they hire a decent, professional SEO company or expert. Below are more of the many, wide-ranging benefits optimization brings.

Most search engines allow you to find relevant web pages even if you only remember snippets of information. A company name, a running shoe, product review, or a person.

Getting seen on the first page of a search engine results page is key, particularly if your businesses' keywords belong to a competitive search query field.

As search is demand-driven, anybody who is referred from a search engine is hoping that your Web page would match their search query. If it does, and you show them all the information they need to know, and they may well become your next customer.

A professionally designed and optimized online Web site should stay long term in the rankings, as compared to PPC where costs and outlay are either ongoing or unpredictable.

Online clients referred from search engines tend to stick around for longer periods, and this will surely increase customer lifetime revenues via SEO.

Search engine optimization aids online businesses in meeting their various online marketing objectives, among these are generating leads, sales or by simply creating increased awareness.

There is more to search engine optimization than just marketing, as firms can derive many business benefits from utilizing this method. At present, the many advantages offered by SEO services have made competition in this field increase quite drastically.

These effective methods can surely make your site to rank among the top sites in most search engines. The high competition has also led to the rise of many unique methods and processes of Web site optimization. Among the key benefits of optimization is significant return on investment (ROI), increased brand visibility, attaining targeted customers, and generating higher sales.

If you have had no luck driving traffic to your website, you may want to employ an expert in Search Engine Optimization (SEO). When you start your search for an expert, there are several things you should consider:

1. Start by interviewing the expert. Find out if their style and philosophy will suit your purpose. Give them information about what you want to accomplish and ask them WHAT THEY WILL DO to help you achieve your goals.
Ask specifically how they will address your objectives.
2. Ask for examples of their previous work. Visit the websites they have already worked on and look at the sites. Perform searches with search engines to see where these sites rank on the search engine lists.
Do they come up in the top ten? Look at the keywords they are using on the sample websites and compare those to the sites that come up in the first, second and third position on the search engine.

Is the SEO expert giving the right advice to his/her clients?

In addition to sample websites, see if you can get actual references to call. Contact names and phone numbers for clients who have already worked with the SEO expert can be quite valuable.

How did the client feel about the SEO expert services? Were they timely in delivering their services? Did they deliver what the promised in additional traffic?
3. Find out who will be working on YOUR project. It may not be the person who sells you the service. You want to be sure that you have a good team of people assigned to perform various tasks.
One person isn't going to be expert in all aspects of search engine optimization. How many projects have these team members worked on for this employer and what success stories can they tell?

What reports will they produce?

At minimum, their documentation should include:

Your current web traffic results

A list of issues they feel you should address, and what they will do to resolve these issues

Progress reports on your project

Post-Mortem reports to demonstrate positive results for website traffic, etc.
4. Ask for white papers, reports and any documented processes the SEO expert has to offer. What exactly does the SEO expert do for his fee? Is his or her process logical and thorough? You may not be a search engine expert.
Nevertheless, if you look at the sequence of their processes, and the activities listed in the SEO process, you may find that your prospective SEO expert is using poor business practices to get information.

Or perhaps he or she is recommending unrealistic methods or unscrupulous methods to deliver good search engine ranking.

If this is the case, your initially good search engine ranking may rapidly change to NO search engine ranking when you find yourself booted off search engine lists for bad business practices.

Make sure you know where your prospective SEO expert firm stands on business ethics.

You may want search engine optimization but you certainly don't want 'keyword stuffing' without content or logical association to the topic that brings the customer to your website.

You don't want false keywords to attract clients and you don't want cloaking or doorway pages.

You don't need to know all the details of how these things work; you just need to get a statement of ethics from your SEO and have a value discussion with the SEO firm and its team members.

While it may seem that no online business practice could be THAT unethical, your business reputation and your status on search engines WILL be damaged, if your website uses artificial or misleading techniques to attract customers.
5. What will the SEO expert charge for your project? Is it based on a fixed price project or an hourly rate? Will you have to pay travel expenses or other associated expenses?
What is included in the price? You should get a detailed accounting in writing, so that you KNOW what you can expect.

Don't buy into the explanation that the price is higher, but there is a 'guarantee' of results.

Even the BEST SEO firms will find it hard to guarantee rankings and results when they don't know what your competitors are doing next and whether new keywords and action will be necessary next month to keep your rankings high.

A guarantee of ranking and traffic can, at best, only guarantee results for a particular day or time period immediately after the project is completed, and even THEN it is unlikely the guarantee will be exact in terms of results.

There are many other personal considerations you may have when hiring an expert in SEO.

However, if you do nothing other than ask these five questions and get the information included in this research, you should be very pleased with the Search Engine Optimization expert you hire.

I hear you! Everyone knows there are literally DOZENS of ways to drive traffic to your sites. But what a pain looking for and buying all the different products out there! Web Traffic Pack solves that problem for you...

A number of articles and white papers have been written on this topic. Before the days of Google and Web 2.0 there was little attention paid to the topic of Search Engine Optimization (SEO). In the early days of the Internet Era you could get a site listed on Yahoo! or Altavista by merely submitting it. As long as it wasn't too complicated for search engines to understand you could get your site listed within 2 to 3 days. But Yahoo! and Altavista couldn't keep up with the flood of URL submissions. As web evolved, more and more companies began to embrace the online medium and the potential for using it as a marketing tool.

In the late 90's something dramatic happened. Google introduced PageRank, a system of ranking Web pages based on their importance and other factors. Google searchbots (or spiders) crawl through the world wide web following links, indexing and categorizing pages based on their content and relevancy. The more links a page has, the more likely they will be picked up and indexed by searchbots. In order to allow spiders to understand the site content, web masters needed to follow certain rules like placing proper keywords, title tags and content in each web page. At this point search became more of an art than a science. Companies can no longer expect to simply add their sites to directories and wait for them to appear on the top of search engine results.

The Search Engine market is fragmented, with Google commanding the majority of the market share (over 80%). If there is one search engine that you want to focus on, that would be Google. Microsoft's announced bid for Yahoo! (subjected to regulatory approval) might increase Microsoft's share in the search market, but I still don't think they will be able to challenge Google's dominance anytime in the near future.

In 2007, a survey concluded that over 50% of traffic originated at a search engine. According to a 2007 report published by eMarketer, over 20% of U.S Internet users use a search engine at least 4-5 times in a day. According to Internet Measurement firm, Hitwise, Search Engines were the highest sources of traffic during the peak Christmas shopping season, representing 57% of upstream traffic. Google alone was responsible for 18% of the upstream traffic, followed by Yahoo with 6%.

The above figure highlights the importance of SEO as a potential marketing tool in attracting visitors to your site.

A few ideas of ways to implement SEO:

Before you start your SEO implementation, it is a good practice to analyze your current state. Evaluate your goals and priorities. Determine your plan of attack. After you implement a solution do not expect immediate results. Don't be tempted to go straight for a Price Per Click (PPC) campaign such as Google AdWords or Yahoo! Small Business marketing to promote your site. As I pointed in the previous sections, what determines your site's placement involves more than one factor.

Some companies take an easier route by hiring optimization firms that use shady techniques to increase search rankings. These optimization firms typically guarantee linking in from 50 or more sites (aka link-spamming). They are linked to doorway pages or parked domains that may work short term, but it is only a matter of time before the search spiders detect and penalize the site. Google even makes a point about this on their SEO support page.

As we noted in the first section, PageRank is a value that Google gives to a page based on the number of links pointing to your site. So how do you get others to provide links to your site? You can try the following methods:

* Send press releases about your product or idea that generates free links

* Hire an expert to write something positive about your product and publish in an industry newsletter, magazine or a local newspaper

* Ask to be a featured or sponsored client in a major portal site

* Ask employees to mention you and your products

* Enlist in a local library's site

* Make reciprocal link requests

* Mention your site in major Blogging sites, Yahoo! Answers and Google Groups

* Respond to blogs or queries in Yahoo! Answers (just don't over-do it)

* Syndicate your content through external RSS feeds to different sites

* Use announcement sites like URLwire to announce your site

* Consider ad campaigns through Google AdWords

Here are a few basic things you can do to clean up your site and make it Search Engine friendly.

Most sites employ DHTML, Flash, Frames and other fancy objects to enhance the end user's experience. While these objects are great to captivate the users attention, Google and other search engines can't understand them and will have trouble interpreting them while crawling your sites. Google introduced a new concept called Site Maps. Most people overlook the power of this feature. The Site Maps feature allows Google to understand your site structure and diagnose any potential problems.

Many sites use session IDs to track a user's path to the site. If the session IDs vary on each visit, Google and most other search engines simply ignore the page, resulting in it not being indexed.

You can avoid this scenario by doing two things:

* If the request is made from a searchbot, you can have your web server serve pages without any session IDs, hence allowing the searchbot to navigate through your site without using any session IDs

Create a narrow targeted keywords list that you think identifies your site properly. Check Yahoo's Overture (searchmarketing.yahoo.com) or WordTracker (www.wordtracker.com) for ideas on selecting keywords. You can find out the effectiveness of your keywords. In WordTracker for instance, you can input your keyword to see how often people have searched for it. It also tells you how often a term is searched and how many pages appear for that term.

Once you identify the keywords, what do you do with them? One obvious thing to do is to add them inside the Meta Keywords tag. In addition, use the keywords generously throughout your page content. Search Engines love a site with fresh descriptive content filled with keywords. This means constantly updating your site with new, fresh content is vital to your overall SEO strategy.

One great way to generate traffic is to simply pay for it. Since Google pretty much dominates the PPC market, you want to focus your ad campaign effort on using Google AdWords. Google's AdWords Network not only includes Google's site, but also About.com, The New York Times, InfoSpace, Business.com, Lycos and a few others. So paying per click (PPC) on Google AdWords allows your ad to be featured on all the sites that are part of the Google network. Keep in mind that in most PPC systems, the top bid gets the top position. Be sure to use relevant keywords when associating with search engine ads.

Combining the steps outlined above and running ad campaigns on Google's AdWords Network will provide ultimate exposure to your site.

Measuring your returns on SEO investments is crucial. Google's PageRank feature in the toolbar can help estimate your site's importance in the Google index. You can perform a search on Google for the word "link:yoursite.com" to see how many back links your site has. This is a good indicator of how many sites are linked to your site.

One way to track the traffic to your site is to use Google Analytics. This tool allows you to see the traffic variables such as a) Absolute Unique Visitors, b) Page Views, c) Bounce Rates and d) Average Time Spent. In addition, you can also set conversion goals to determine how many of those leads converted to an effective sale (or some other action you describe), which is a key way to measure ROI. Tracking in helps you evaluate the efforts of your marketing strategy whether it is a PPC campaign, banner ads or natural SEO. Tracking also allows you to gain visibility into your end user's behavior and time spent on each page, which allows you to make a decision on where to place ads.

Like any other software solution implementation, SEO implementation needs to be constantly monitored and updated. A continuous enhancement to optimization techniques, tracking, keywords, content, blog entries and ad campaigns is necessary to keep your site rank high in the search results. To stay on top, you not only have to outdo your competition but also keep content fresh. This will not only bring new visitors to your site, but also the keep the visitors returning to your site.

To learn more about Search Engine Optimization and other topics around Search Marketing, please visit http://www.seosolutions.biz. Chan Komagan is a Digital Media Strategist and he provides consulting work to both profit and non-profit organizations in Search Marketing. You can reach him at chan@seosolutions.biz

The wild and often oddly mythical world of search engine optimization (SEO) is filled with old wives' tales, facts, and a mix of the two. Separating fact from fiction is often far more complicated than you might think possible but with a few cold and hard facts as well as the do's and don'ts of SEO, you will be well on your way to having a site and content that search engines like and that will receive highly targeted web traffic.

1. Keyword density is an important component for SEO. Although not the one nail on which to hang your hat, the more desirable keywords your article contains, the better off you will be and the more visitors search engines will send your way. In other words, if you are writing about the importance of SEO and do not use this term until your final sentence, the odds are good that you have missed the boat. On the other hand, overuse the keywords so as to goad search engines to send you visitors, and you will have web traffic that jumps ship as soon as they read the beginning of your articles and the impossible linking of a bunch of buzz words and key terms. The trick to keyword density is balance.

2. SEO requires competition and niche thinking. If you are writing about the DeBeers lawsuit, you can bet that there will be a plethora of articles and websites dedicated to the same topic. While you may have some strong competition for the most commonly used keywords and phrases, make sure you also bolster your article or site with some rarer ones that the majority of your competition will not think about: the niche words. Thus, address the needs of the commercial diamond users at least in passing while offering information to the private consumer front and center.

3. Without relevant keywords, your SEO attempts are in vain. Who has not received the spam emails that contain gibberish of highly sought after terms? Sure, they might have tricked your spam filter, but they probably also ticked you off and you won't be caught dead buying from those spammers. Turning this around, do not try to trick visitors to come to your site by enlisting much sought after keywords that have nothing to do with the site's actual content.

Of course, no amount of SEO tweaking can replace the unique content to a website that attracts new visitors, and the sticky content that keeps them coming back. Do's and don'ts of SEO may cover the nuts and bolts approaches possible, but even the most relevant and organized by the book website will fail to appeal to a visitor if it does not have that wow factor which will set it apart from all the other websites that have read the same manual. It is in this little wildcard that the true genius of SEO strategies is revealed: the marriage between abiding by rules through the following of algorithms and high level creativity born of an understanding of consumer behavior.

Given the importance of search engines in driving quality traffic to your site, it's no wonder that Search Engine Optimization or SEO is such a vital element to the success of any web site.

While there's loads of good SEO advice available for your use, there's plenty of bad advice too, which can actually do more harm than good.

The following are three SEO myths.

The old mantra "The more links the better" doesn't hold as much water as it used to. It may have worked earlier, when the Internet was more manageable. In keeping with an ever growing Internet and increasing misuse of link exchanges, search engines have now adopted different, varying criteria for ranking web sites.

Today, an over abundance of links from irrelevant, low-ranking sites and link farms could actually cause you more harm than good - getting your site penalized. While links continue to be vital to the success of your website, what is important for SEO purposes is that you use a wide variety of anchor text and seek out one way links only with sites that are relevant to yours.

There are numerous SEO companies that promise to get you ranked high with Google and other major search engines. They may make good on their promise and get you ranked in the top ten. But then what? Don't forget that every other web site owner is going to be trying the same strategy and the competition does not stop once you've positioned yourself on the first page.

In order to stay at the top, you will need to keep your web site continuously updated, employ innovative new methods to keep attracting visitors to your site, and try to keep getting a steady flow of one way links.

There are several ways to do this:

• Personalize your website with latest updates on lifestyle, technology or finance.

• Write articles and submit them to article directories.

• Join a blog that's relevant to your business and post valuable comments; don't forget to include a link with your signature.

• Write testimonials for other web sites in exchange for a one way link to your site.

We've all seen the Ask commercials demonstrating how much more user friendly their search is. But, a commercial is one thing and reality is another.

It's really a matter of optimizing for the big three (Google, Yahoo, and MSN) and letting everything else fall where it may.

If you have a website that is well designed and content rich, it is sure to please almost all major search engines. What's more, you are likely to build a significant portfolio of search terms where different terms attract traffic from different search engines.

But, spending your time trying to please every search engine is an exercise in futility. You're better off spending your time optimizing elsewhere.

Paul Majestyck is the publisher of EZ Affiliate Profits :Great Articles Top Notch Resources Free e-Courses Product Reviews & Videos To Help You Shorten The Online Learning-Curve And Start Generating Income visit=> http://ezaffiliateprofits.blogspot.com Also be sure to visit his Digital Webstore eNetMall :The #1 Digitital program and product store on the internet => http://www.enetmall.net

How to make a Logo

2008-03-10T12:21:00.000-07:00

So I'm continuing to learn about visual design and especially logo design so that I can make the logo for our web site. C is also coming up with stuff on his own and in an attempt to have us both learn more about this I googled logo designs tutorials and here's what I came up with... It's pretty good :) thanks Gary Simon...

- - - - - - - - - - - >

Adobe Photoshop

I will be using Adobe Photoshop CS2 to design this logo. Many swear by illustrator, but I believe for the purposes of making a tutorial, it'd be best to use photoshop as it will cater to a wider audience. More people have used photoshop than Illustrator. Besides, I've created 95% of all my logos in Photoshop, so take what you will.

Let's Start : The Project

A buddy of mine runs a gaming website, bluelaguna.net, and he has wanted a new logo for some time, so I agreed to do it for this tutorial. So let's take a look at the current logo:

(Note: The image above isn't a logo, it's an entire header. The actual name bluelaguna.net along with the slogan is the actual logo. I thought it would be a good idea to show the entire header though to see how it reacts with the overall design.)

One of the most important things this logo lacks is readability. When a user visits a web site, or visits any medium in which a logo is displayed, the first thing that hits them should be the logo. And for some reason or another, the first place us humans look is the upper left hand corner of a site. The current logo is placed in the middle of the header and the small font and the dark blue in "BLUE" is hard to read.

There's also nothing exciting with this logo. For a logo to be effective, it has to "brand" an image, it needs to stick in your head. All this logo is is times new roman on caps lock.

Now that we've gone over why their current logo is not suitable, let's begin with the actual tutorial.

Gathering Information

It's important to always know the specifics of what you or the client is looking for before you start. Generally for most projects, I only need to ask the client 5 questions:

	1. Name of the service/product:	BlueLaguna.Net
	2. Any slogans to use?:	"Your #1 Source for RPG Media"
	3. Any specific color schemes in mind?:	Match the current design
	4. What are you trying to convey through the logo?:	Serious game-related site.
	5. Any other specifics:	You don't have to use the current header design. Get crackin'

Pretty straight forward, now we know what we have to work with.

1. Setting up your Document in Photoshop

Once you have photoshop open, go to File -> New. Then specify the name of the logo, and a width of 600 and a height of 500.
Then click "OK" (Refer to the screenshot below).

After you click "OK" Your setup should look like this:

(I'm on a 1600x1200 resolution.) For the menus on the left, I have the layers view, and the Characters in view.)

2. Experiment with Font Selections

As a starting point, I always experiment with a font that I think will work well with the logo. You have to develop an eye for what font will or will not work, with the specifics of the project in mind. Since for bluelaguna we're trying to focus on a serious yet gamer'ish feel, a serious font selection might be the best bet. Having yourself an arsenal of fonts is very important. I have several thousand myself.

Select the Text Tool on the left menu: (As shown on the image to the right)
Adjust the settings on the Text Properties at the top to match these settings:
In the character window to the right, set AV to -60 as shown below: (This simply shortens the space between each separate character, I like starting out with this setting, I don't know why :)
Type "BLUE LAGUNA" in the document space (First, be sure that the background is white, you can use the fill tool for this. And I've decided to go with all caps to start out with, since all caps is generally deemed more serious).
With the type tool selected, and layer 1 selected, select the font list menu (where it says Arial):

You can do this next section in either three ways.
- Hit the "Down" arrow to change the font view of "BLUE LAGUNA".
- Hit the Down Arrow of the Font List to see the list of available fonts with a tiny preview of the font.
- Download a font viewing program.

I personally just use the first method, although I sometimes use a font viewing program. Our goal here is to find fonts that might work with the logo.
Once you come across a font that looks like it could work, you should Duplicate the layer in the Layers Window to the right, and then hide the previous layer (The layer you right clicked and selected "Duplicate" from. This way, you've saved that font selection (the hidden layer), and you have a new layer to find more fonts from):

3. Good and Bad Font Selections

Since our goal with this particular logo is to be serious, we need serious looking fonts. It simply takes time to develop an eye for what is serious and what isn't.

Here are a few examples of bad font selections for this project:

The first logo (the top), has a very laid back, fun / unprofessional tone to it.

The second logo is simply "goofy" looking, and it's generally always bad to select a logo that has an inherent shadow.

The third logo is way too "ragged" with its frills all over the place, definitely a no go.

Calligraphy logos are generally outdated, especially ones with weird "drops" coming from them.

The last logo you can hardly even read. Remember, a logo should be easily readable.

Here are a few examples of good font selections for this project:

All of these logos with the exception of 4 and 6 are pretty much similar.

#1, 2, 3 & 5 are all very simplistic and serious in appearance.

Logo 4 still appears "serious" even though it is significantly different from the rest. I chose this just in case I want to experiment with piecing together fonts for the word "Blue" and "Laguna".

Logo 6 is a very bold / italicized logo that says nothing but serious.

4. Finalizing a Font Selection

Once you have some possible font selections, each in their own layer, you further analyze them and see which works. With logos that have more than one word, most of the time it is good to separate the appearance of the words from each other. Since this particular project has two words, "Blue" and "Laguna", we're going to want to separate them by possibly choosing two different fonts. You can also separate words from each other by keeping the same font, but changing the color. So I'm going to experiment with the 6 good font selections above.

This is what I've come up with:

Although I didn't use one of the 6 fonts I selected initially for the word "blue", I simply used an unboldened version of "LAGUNA", which keeps a consistent feel but also allows for separation of the two words.

5. Adding in a symbol

Sometimes logos work well with only the use of fonts, but most times adding in a relevant symbol of some sort will really make a logo stand out. When I say "symbol", I mean any part of the logo which isn't actual text. So let's start with the first font selection from above:

Now here is where having an eye for design and experience is a really big help. We need to begin contemplating ideas of what exactly we can add to this logo to make it awesome. So, the first thing I do is just sit there and stare at the font selection and think of what exactly the product/service/site is all about. Well, BlueLaguna.Net is about gaming, more specifically speaking, it's a site that offers RPG media (Role Playing Game) media. Therefore, we have two things to work with: RPG and Media. What exactly can we associate with both RPG and Media? Well, we don't necessarily have to convey both RPG and Media through the logo (if you try to get too complex, the logo will become cluttered). We can choose one or the other if we want. I think it'd be most logical to focus on the whole RPG aspect, as you can find media all over the place and it isn't an entirely unique concept.

So let's do some research on Role Playing Games. We need to figure out a symbol which can really represent RPG. The current BlueLaguna.Net features a 3d female, perhaps that has something to do with RPG? Well, let me do a search on images.google.com for "RPG". The results turn back a few different female characters, Hmm! The first few results, keeping in mind the 3d female character on the current header of bluelaguna.net, seem to suggest that depicting a female in the logo might be the best bet. It also seems that weaponry / mystical environments are associated with RPG as well.

Now that I know what I can associate with RPG, I can come up with some possible ideas for a symbol. I think maybe featuring a face of one of these RPG'ish females with maybe a hint of mysticism.

The Pen Tool is your Friend

The most important tool when it comes to logo design is the pen tool. If there is one tool to thoroughly understand, it should be the pen tool. The pen tool allows you to create any shape(s) you want, and maintain vector format (which is very important if you ever want to size your logo up n' down (for professional print or whatever.)

It's always good to draw your logo by hand without copying over a picture (vector tracing), but if you aren't very talented and don't have much experience, it might be your only option. So for the sake of making the biggest impact on this tutorial, I will teach you all an awesome technique for creating great looking symbols for you logos.

Finding a suitable picture

If you're going to trace, I always suggest using a site like istockphoto.com to find the image and pay for it. This way you won't be using copyrighted images to trace over. Or taking your own picture to trace over. Unfortunately though, istockphoto has nothing with RPG or "anime". So I just went on images.google.com and found a picture which I think is suitable, here it is:

When I came across this picture, I got the idea that I can vector trace over her face and hair to create what I want, and then integrate it along with the font selection in some unique way.

So once you've found the picture you want to trace (if not the same one), save it to your hard drive, open it up in photoshop, CTRL-A, CTRL-C to select it and copy it, and go back to your main logo document and CTRL-V.

Now you've imported this picture into your logo document. Once you've imported it, with her layer selected, you can cut off the bottom half of her body. (Select the first tool in the upper left corner of the tools menu, Rectangular Marquee Tool), select the bottom half of her body and hit the delete key. Your screen should look something like this by now (You can hide the text layers behind it).

Vector Tracing

Now select the magnifying glass in the tools menu and select around the girl, it will look like this zoomed up to about 400%:

Now select the pen tool in the tools menu:

Make sure that the foreground color (the black square at the bottom of the pic to the upper right ---^) is the same dark blue color of the text we specified.

In the layers window to the right, select the little round circular > icon on the upper right corner of the window, and click on "Create New Layer" in the window that comes up. Hit "OK" and then in the layers window, with the new layer selected, change the Opacity to 0%. We do this because once we start tracing over the image, we don't want the dark blue color hiding the picture of the girl below.

And with the pen tool selected, click a point somewhere on the outline of the hair (at the top), and then click to make another point somewhere on the hairline where the line will begin to form. You can hold down and "direction" the angle of the line to create a certain type of curve. It takes awhile to get the hang of, but it's very easy once you get the hang of it. After plotting points of an entire section of hair, yours should look similar to this: (Note: I've lightened the opacity of the girl to illustrate what your lines should look like so far)

(opacity 100%)

It's not perfect, but for now it's a good start.

Now I'm simply going to continue creating more shapes, like the facial features. After 15-20 minutes or so of creating the different facial features and the face itself, here is what I have come up with:

As you can see, I specified a different color for the face (light blue). And by now I have around 15 different layers. There's a separate layer for the top portion of each eye, the bottom portion of each eye, the middle, and the small glare. There's also a layer for the face background, and the ear.

So let us continue and add some shading...

After about 20 more minutes of shading, this is what I've come up with:

There are a total of 3 different layers for the hair. It's somewhat of a tedious process to do hair shading simply because there's a lot of strands of hair! But you have to just condense them and get the general idea of the shading and it will work out well.

Then I did some light shading work on the face and the neck.

Now I consider the actual draft of the symbol complete. Let's make our initial text layer visible and see what we can do to integrate the symbol with the text.

First, you will want to select the very last to the very first vector layer that you created (you'll have a couple dozen or more), hold down the shift so you can select them all. Then in the layers window click the little circular round button and select "New Group From Layers". This will put all of the layers of the girl, into one easily manageable layer group. This way, you can move around the one group and it will keep all of their positions together so it won't break up her face.

Now this actually doesn't look too bad, in and of itself. But the proportion of the anime head is too big, in relation to BLUELAGUNA. So we will want to scale down the head. Let's try moving it over to the left, and adding the slogan + the ".net" text. This is what it looks like:

Now it looks pretty damn good eh? The only other thing I did, was with the pen tool, I added a white shape over the "B" in "BLUE" so that the face doesn't collide with the B.

Unfortunately I messed up and didn't design this over the dark blue'ish background that the bluelaguna.net has. So I'm going to change the colors of the logo to fit a background of an appropriate header for the site.

As you can see, simply changing colors around can really change the look and feel of a logo. I'd consider this logo a winner.

6. Conclusion

I can pretty much guarantee you that if you're a first time user of the pen tool or photoshop for that matter, it won't turn out so pretty like mine did. It takes some time and patience to really get the hang of it. It's all about getting a little creative and working at it for awhile.

CSS Centering

2007-11-29T13:03:00.000-08:00

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

Centering liquid layouts

Liquid layouts are easy to center using margins on each side of the containing box. The margins can be set with em, pixel or percentage units.

div#container { margin-left: 10%; margin-right: 10%; }

Centering fixed-width layouts

Theoretically, you should be able to apply auto margins to the left and right of the containing block and it should center on the page.

The W3C Visual formatting model states: "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block."

So, a containing block should be able to be centered using the following rules:

div#container { margin-left: auto; margin-right: auto; width: 50em; }

However, some browsers do not center the containing blocks using this method as they ignore the auto margins. These browsers include:

NN4 (Mac and Win)
Win/IE4
Win/IE5
Win/IE5.5
Win/IE6 (when in quirks-mode)

By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.

1. Center the body

While these browsers ignore auto margins, they will follow "text-align: center". If this is applied to the body, the containing block will center correctly. So, a new rule is added:

body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50em; }

2. Resetting text-align

The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set - "text-align: left". The final CSS code is:

body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: 50em; text-align: left; }

See the results

The first sample page shows a containing block that has been centered on the page using auto margins, but no centering on the body element.

The second sample page shows a containing block that has been centered on the page using auto margins, but also has centering on the body element, and "text-align: left" on the containing block.

Thank you Russ Weakly!

Pablo Otaola Web Design

Six Things to Keep in Mind when Designing a Logo

It All Starts With a Great Idea

Reproducibility

Reversals. What the heck are these?

Color Palette

Simple is good right?

Choosing a Typeface

Browser Size by Google

Network Folder Password Protection

SugarCRM Overview

Managing Leads

Qualifying & Converting Leads

Assigning the lead

Methods of Qualification

Managing Opportunities

Managing Activities

Management Reporting and Forecasting

Summary of the Benefits

Installing SugarCRM Upgrade

Hiding Pages in Wordpress

Installing Wordpress in GoDaddy.com

Why iWeb is not a Good Web Design Program

Tango Hosting Email Setup

How to copy files to a CD using Mac OSX

Google Ad Manager

Inventory

Placements

Orders

Orders -> Line Items

Orders -> Line Items -> Upload Creative

Generate HTML

Blackberry Storm 9530: Minute with Mike from Verizon Wireless

Fonts - Mac, PC, Ubuntu (linux)

About these tables

Serif

Sans Serif

Script/Handwriting

Monospace

Decorative

Symbol/Dingbat

Foreign Language

Notes:

Arial Unicode (installed with Office):

DejaVu (Unicode):

Gentium (Unicode):

Free Serif (Unicode):

Unified Canadian Aboriginal Syllabics:

Cherokee:

Western language variants:

Cryllic:

Thaana:

Cyrillic:

Armenian:

Lao:

References:

Using a Feed to Dynamically post a Blog on your own Web Site

Google's New Browser

Photoshop Fluffy Realistic Clouds

Flash Web Site About to Become Google / Yahoo Searchable!

ActionScript 3 Music for Web Site

CS4 Already????

Do's and Dont's of Amazing Web Design

Learn Programming in 10 Years

Why is everyone in such a rush?

Teach Yourself Programming in Ten Years

Seven Incredibly Useful Tools for Evaluating Your Web Design

Some things to consider:

1. ClickHeat

2. Crazy Egg

3. YSlow for Firebug

4. clickdensity

5. ClickTale

6. Clicky

7. Google Analytics

Some Basic Web Design Tips

Top Ten Mistakes in Web Design

1. Bad Search

2. PDF Files for Online Reading

3. Not Changing the Color of Visited Links