Archive for the ‘Tips’ Category

Password strength verification with jQuery

January 10th, 2012
Write comment

Many sites that require login credentials enforce a security setting often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken.

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Creating Flowcharts: Using Common Visio Shapes

March 10th, 2011
Write comment

Visio common ss
This article will focus on some common Visio Flowchart shapes and what kinds of uses you should put them to. You can find a detailed definition for a Flowchart from this link to the Wikipedia definition.

Here are the shapes we will be discussing:

Process Block – You can use this shape to describe “processes”, which can be defined for our purposes as a certain action being taken. Some examples of a process could be:
- Performing a calculation, such as “Calculate the average of all the sales”.
- A group taking an action, such as “The Product Test group validates the software modules”.
- A generic action, such as “Document is placed in the tray”.
These are normally the building blocks of your Visio diagrams.
Decision Symbol – As the name implies, you would use this symbol to branch out your diagram based on a decision that is made. You can think of this as an “If” statement (for those familiar with programming concepts).
There are two basic ways to use this symbol:
- Yes/No Path – This has two outcomes, Yes or No. An example would be “Is the average greater than 0?”. Based on the answer, you would either go down a “Yes” path or a “No” path.
- Multiple Path – The flow can go multiple ways based on the outcome. For example, if could you “Choose location to check”, and then each location could be a path.
The key here is to make sure you label each path, even if it is with a “Yes” or a “No”. Otherwise, you won’t be able to navigate your diagram.
Terminator Symbol – This is what you use when you want to end or start your diagram. Normally, you would have one at the beginning labeled “Beginning of (process)”, and one at the end labeled “End of (process)”. However, if your diagram can end in many places, you should have a terminator for each place it can end. This also works if you have multiple beginning points, but this is less common. Make sure to give them descriptive names instead of just “Begin” and “End”.
Document Symbol – Pretty obvious explanation here, but you might find yourself using it a lot. If you have any kind of document that you are trying to represent in your diagram, you should use this symbol. For instance, if the input to your process is a file, it would be represented by this symbol. Another example would be if the output of your process is a file.
On Page Reference – This should be used if you need to “jump” back to another part of your process in a different part of the diagram, but can’t connect them using a standard connector. Also, this can be used to modularize your diagram. For example, if you have a repeatable process (like a “Function” for those familiar with programming terms), you could reference that process by just using this symbol instead of repeating that part of the diagram multiple times. You should use this when what you are referencing is on the same page as this symbol.
Another important point is that these symbols work in pairs, like two ends of a connector. The key is to label them both the same thing so that you know which reference goes where. I use numbers, which seem to work fairly well for small diagrams. However, if your diagram is more complex I recommend using more descriptive text like “Determine customer payment information function”.
Off Page Reference – This has pretty similar uses to the On Page Reference, however the key difference is that you would use this when what you are referencing is on a different page than the symbol. Using an example above, if you were to have repeatable functions in your diagram, you might just have one page where the details for it reside and then use this reference when you want people to skip to it. This way you don’t have to repeat the same set of symbols multiple times in your diagram. This also creates a cleaner, less cluttered diagram.
Database Symbol – I think you would use this more when designing software processes, as it represents a connection to a database or more specifically a table in that database. For example, say part of your diagram writes a value to a table, then that table should be represented by this symbol. This symbol should be labeled with the name of the table if there is only one database, if there are multiple databases than the name of the database should preface the table name.

Shape Location

Shapes 1-6 are located on the Basic Flowchart Shapes menu, while Shape 7 is located on theMiscellaneous Flowchart Shapes menu. Both of these menus can be accessed by clicking on File -> Shapes (”Stencils” in some older versions of Visio) -> Flowchart.

These are just some of the more common shapes used when creating a Flowchart. As you design your diagram, explore the different shapes available to you in order to better tailor your diagram to your project’s needs.

Mediocrity vs. Excellence: What Separates Good From Great?

March 3rd, 2011
Write comment

As a designer, especially one without a lot of experience, it’s normal to look at the designs of others and think how great their work is compared to our own.

It’s a frustrating experience for many, especially when we can’t quite put our finger on why their design is so great when ours is merely good.

The thing about design, though, is that greatness is usually quantifiable.

Pay Attention to Small Details, the small details – an icon here, a border there – are the things that make a design great, instead of just good.

Unlike with more abstract and interpretable creative pursuits, there are definite elements that go into “great” designs.

The best part is that anyone who can create a good design can go on to create great designs with a bit of practice. Here’s what goes into great design and what you can do to improve your own designs.

Why Whitespace Matters

February 27th, 2011
Write comment

AppleHome 20110214 105751

Whitespace is a fundamental building block of good design. Its one of the first thing any visual designer is taught. However, to many website owners it is simply a waste of space that could be used to better promote their messages, services or products.

“Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design. Why then is it so important and how can we ensure it is maintained?”

In this post I aim to explain why whitespace matters and how to keep whitespace in a design without compromising business objectives. However, before I can do that we need to be clear what we mean by whitespace.

Learn more at Boagworld >

The Anatomy of a Perfect Login Page

February 16th, 2011
Write comment

What should a perfect login page or login form have?

Login forms are very simple in terms of the required elements. When it comes to forms, it doesn’t get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.

“Elements that could be valuable to your users are often neglected”

Let’s take a look at the necessary elements >

Eight Ways to Combine Typefaces

February 13th, 2011
Write comment

An otherwise-beautiful design can really suffer if the typography choices are wrong. But combining fonts beyond the basic serif/sans-serif pairing can be tricky and confusing to a lot of designers.

“Good typography is paramount to any good design.”

While a lot of what goes into good typography is subjective, there are some guidelines that can point you in the right direction. From there, it’s up to you to experiment and try out different things.

Learn more at Webdesigner Depot >

31 CSS Code Snippets To Make You A Better Coder

February 10th, 2011
Write comment

Here are some great cross-browser CSS hacks and tips

It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.

More at designyourway.net >

The inevitable decline due to clutter

December 3rd, 2010
Write comment

Digital media expands. It’s not like paper, it can get bigger.

As digital marketers seek to increase profits, they almost always make the same mistake. They continue to add more clutter, messaging and offers, because, hey, it’s free.

“More is not always better. In fact, more is almost never better.”

One more link, one more banner, one more side deal on the Groupon page.

Economics tells us that the right thing to do is run the factory until the last item produced is being sold at marginal cost. In other words, keep adding until it doesn’t work any more.

In fact, human behavior tells us that this is a more permanent effect than we realize. Once you overload the user, you train them not to pay attention. More clutter isn’t free. In fact, more clutter is a permanent shift, a desensitization toall the information, not just the last bit.

And it’s hard to go backward.

More is not always better. In fact, more is almost never better.

Follow Seth Godin’s personal blog >