Asking a web designer to start designing a website with no requirement is almost like asking a home builder to initiate construction without a plan. Wireframe is a visual model of a website and wireframes helps a web designer to stick to a structural idea for the web design. If you are building a website for your business for the first time before initiating analyze related business websites and suggest a wire frame or you can hand over everything from wireframe to your web design company. First step for your web design is not starting the design directly. Always, Analyze competitors and other related websites Create multiple structural wireframes Prepare text contents and photos Choose a color theme Start the design! A wireframe is similar to floor plan for a building. Choose the size for the building (choose dimension for website) Choose the location for each room based on construction standards(create room for each elements based on web standards) Create multiple plans and choose the best (create multiple wire frames and choose the best) Starting web design directly may go wrong many times as you do modifications and changes to structure the final copy will be a great mess and will not look good like your first copy design. Always, Start with wireframes Keep doing changes to selected wireframe Finalize and stick to a wireframe Start designing the website based on the wireframe Here you can see a simple wireframe for an idea:

Today, we have seen that ‘multiple file upload’ is becoming an essential part of Websites. There are lots of open source illustrations available for multiple upload by using Adobe Flash and Ajax concepts. The problem with these illustrations are they need Adobe Flash Plug-in (if Flash) and all the Browser needs to support the Ajax queries. Also, these illustrations will not provide any provision for ‘replacing’ or ‘deleting’ the uploaded files in the same window. So, we have developed the multiple file upload using an ‘iframe’ with ‘replace’ and ‘delete’ options.

New File Upload:
To start with, we need to have a HTML form with target to some iframe. The HTML form needs to have a file element (<input type=”file”>) with a submit button. Also have a separate DIV element for showing the uploaded files.

<br /> <form name="myUpload" method="post" enctype="multipart/form-data" target="upload_target" action="upload.php"> <input type="file" name="Attach" onChange="document.myUpload.submit();" /> <input type="submit" value="Submit" /> </form> <p><iframe name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe> <div id="upload_div"></div> <p>

On the onChange event of the file element, submit the form to the actual PHP file, where you can use the actual method for a file upload. After the file gets uploaded, pass the filename in a hidden array element and the uploaded filename to a JavaScript function, which will be located in the PARENT HTML file (i.e.) where the upload form has been located.

Here, $file denoted the uploaded filename.

<script language="javascript" type="text/javascript">window.top.window.stopUpload(' <input type="hidden" name="Attach[]" value="">Attachment: <a target="_blank" href="document/"></a>|’);</script>

In the stopUpload() JavaScript function on the parent HTML page:

» Split the hidden array element and the filename.
» Have the count of the total files by incrementing a variable.
» Create a new DIV element (for each upload) using the increment variable.
» Place the hidden array element and the filename with Replace and Delete links (for the display) in the newly created DIV element and APPEND this DIV content to the parent DIV, upload_div (since the parent DIV may contains any previous uploads).
» In order to replace or delete an uploaded file, you can call simple JavaScript functions with the increment value and the filename as arguments (filename is used to delete the particular file and the increment value is used to remove the corresponding DIV element) .
» Empty the file element value (to be blank and ready for next upload).

Here is a sample of the JavaScript function.

<script language="javascript"> var count=0; function stopUpload(upload) { var temp=upload.split("|"); //split up hidden element & filename hiddenval= temp[0]; //hidden element filename= temp[1]; //filename count++; //increment variable</p> <p> //calling functions for replace and delete upload = upload +”<a onClick='showReplace("+count+",\""+ filename+"\");'>Replace</font></a>“;</p> <p>upload = upload +”<a onClick='deleteFile("+count+",\""+ filename +"\");'>Delete</a><br />“;</p> <p>//creating new div upload =” <div id=upload"+count+"'>“+ upload +”</div> <p>“; document.myUpload.Attach.value=”"; //making empty of the file element</p> <p>//appending new upload values to the parent div, since it also contains previous uploads document.getElementById(’upload_div’).innerHTML = document.getElementById(’upload_div’).innerHTML + upload; return true; } </script>

Now the uploaded filename will be shown with download, replace and delete link to the user as shown below:
Attachment: document/sample1.doc Replace Delete

Attachment: document/sample2.doc Replace Delete

Replacing the Uploaded Files:
After upload, if you want the replace option, you have to do the following:

» Place a DIV inside the form with another file element and make the DIV hidden by default.
» Show this DIV if the user clicks the ‘Replace’ link.
» Have 2 hidden fields and assign the DIV ID (count) and filename to that by calling the JavaScript function showReplace(count,filename)
» On the onChange event of the file element, submit the form to the actual PHP file, where you can upload the file. Using the filename you can delete the old file. After the file gets uploaded, pass the new (replaced) filename in a hidden array element, replaced filename and the DIV ID to a JavaScript function, which will be located in the PARENT HTML file (i.e.) where the upload form has been located as in new upload.

<script language="javascript" type="text/javascript">window.top.window.stopUploadReplace(' <input type="hidden" name="Attach[]" value="">Attachment: <a target="_blank" href="document/"></a>||’);</script><br />

where, $_REQUEST['Id'] is the DIV ID.

Now, you can use a JavaScript function as stopUpload(). Here, you can remove the old filename by removing the corresponding DIV element using DIV ID and continue to use new DIV as in new upload.

Deleting the Uploaded Files:
After upload, you may want to delete that file. In order to do that:

» Using a JavaScript function deleteFile(count,filename), pass the filename to a PHP file in order to delete the file.
» Using DIV ID (count), you can remove the corresponding DIV element, which contains the filename.

Finally, you can get all the uploaded filenames (Attach[] array) and even other element values in the form by clicking the submit button. Change the action of the form to your wish and make the target to blank (since the previous target and action triggers the upload process) by using a JavaScript function.

Hope that you got some ideas on uploading multiple files with replace and delete enhancements. We will come back with a sample download in 2 or 3 days.

There have been thousands of Logo design guides and tutorials available in the web. In this tutorial I discuss about what makes a logo design good and what you need to consider before starting using the various toolbox.

What is a Logo? What it represents?

Before seeing how to make effective logo design we must understand what a Logo is ? what it represents and what it is supposed to do. A logo is not just a mark - a logo reflects a business’s commercial brand via the use of shape, fonts, colour, and / or images.

Paul Rand, one of the world’s greatest designers states that “a logo is a flag, a signature, an escutcheon, a street sign. A logo does not sell (directly), it identifies. A logo is rarely a description of a business. A logo derives meaning from the quality of the thing it symbolizes, not the other way around. A logo is less important than the product it signifies; what it represents is more important than what it looks like. The subject matter of a logo can be almost anything.”

The Principles of Effective Logo Design

Now lets see what are the rules / principles we should know to design a logo effectively. Please keep the following principles in mind while designing the logo,

1. Keep logo as simple as possible

Simplicity makes a logo design easily recognizable, versatile and memorable. Good logos feature something unexpected or unique, without being “overdrawn” . The main idea behind simplicity is that you want the logo to be able to hold up well at very tiny sizes. A good test is to create a 16×16 pixel of the logo and see how it looks. This is the smallest size the logo will probably ever be in.

2. A logo must be memorable

Following closely behind the principle of simplicity, is that of memorability. An effective logo design should be memorable and this is achieved by having a simple, yet, appropriate logo.

3. A logo must be effective without colour

An effective logo should be able to work across a variety of mediums and applications. For this reason a logo should be designed in vector format, to ensure that it can be scaled to any size. The logo must work in just one colour too so it can fit any background. For example consider the NIKE logo.

4. A logo must be relevant to the industry

The logo should reflect the industry or business for which you are designing. If you are designing the logo for Cargo Company the logo must be relevant to cargo but not of children play school.

Fix your own design process as of below,

1. Have a brief idea about the business for which you plan to have effective logo design. Collect more information by asking the client to give me details about what their company does and who their audience is.

2. After collecting the information do some research on requirement in detail. This will help you in conceptualising the logo.

3. Develop a prototype and concepts

4. Send the prototype for client review. The review will help you to understand the clients expectation.

5. Use the Most Professional Program - Although it can be tempting to use a program like Adobe Photoshop to design logos when starting out, mastering Adobe Illustrator and its pen tool will be essential if you are serious about logo design. Adobe Illustrator has a vector format that will allow your logo to be scaled up and down with no loss of quality.

We have seen about HTACCESS and how to use Mod_Rewrite using .HTACCESS in Part 1. In that I have explained the basic functionalities with simple examples. In this Article we can see HTACCESS rules in more detail.

Those who are new to HTACCESS, please have a look at the PART 1: Mod_Rewrite Tutorial for starters guide before reading this article.

Let see how to use HTACCESS for 1 or more than 1 Variable(s).

Case 1 with one variable: Imagine this, we have a PHP file, lets name it as index.php which allows us to retrieve values from the URL itself using $_GET function.

For Example:

http://yourdomainname.com/test.php?page=services.

$_GET['page'] would give the value of page in the above url.

http:// yourdomainname.com/test.php?page=mypagename&dropdown=firstservice.

We can have retrieve quite a lot of data from the URLs by using multiple $_GET functions. In the above URL we can have $_GET['page'] and $_GET['dropdown']
Our case is to make the following dynamic URL

http://yourdomainname.com/test.php?page= services

into SEO friendly URL like this,

http://yourdomainname.com/services.html

Solution,

Create .htaccess file with following codes and upload it in root directory

#.htaccess code
RewriteEngine On
RewriteRule ^(.*)\.html$ test.php?page=$1 [L]

Let us have a detailed look on what every line does.

RewriteEngine On

This tells to start the Rewrite Engine.

1.    RewriteRule ^(.*)\.html$ test.php?page=$1 [L]

2.    pattern is ^(.*)\.html$

() – Parentheses allow you to group several characters as a unit and also to capture the results of a match for later use. The ability to treat several characters as a unit is extremely useful in pattern matching.

(.*) – Matches anything.

Eg: http://yourdomainname.com/ services.html where (.*)\.html matches services.html

3.    target_url is test.php?page=$1

$1 is a variable where $1 = (.*) from the pattern.

4.    flag is [L].

There are various flags. [L] means, If there is a match with a particular rewrite rule, It has to be the last rewrite rule to be executed.
Now lets test run our script. If the dynamic link is like

http://yourdomainname.com/test.php?page= services

then your SEO friendly  link will be

http://yourdomainname.com/services.html

Similarly for page=aboutus the link will be aboutus.html , page=contactus the link will be contactus.html.

Case 2 with two variables:

Now in this case we have the dynamic URL as follows
http://yourdomainname.com/test.php?page= services&dropdown=firstservicename

For the above dynamic URL we want our static URL to look something like
http://yourdomainname.com/services/ firstservicename.html.

We want the first variable to act as a directory, while the second one should be the file name.
Note that in case 1 page=services  had become ‘services.html’ since there was just one variable. But now we have 2 variables (page= services&dropdown=firstservicename) so we the structure should be like ‘services/ firstservicename.html’
We have to write a new RewriteRule to support 2 variables.

Remember : As your variables increase, the new Rewrite rules come before the previous ones.

We are basically extending Method 1 by adding another RewriteRule to support 2 variables as input.

RewriteEngine On
RewriteRule ([^/]+)/(.*)\.html$ test.php?page=$1&dropdown=$2 [L]
RewriteRule ^(.*)\.html$ test.php?page=$1 [L]

Let me Explain what the new line does.

RewriteRule ([^/]+)/(.*)\.html$ test.php?page=$1& dropdown =$2 [L]

1.    pattern is ([^/]+)/(.*)\.html$
([^/]+) – Which has the effect of matching any characters up to a slash or the end of the string, whichever comes first.
(.*) – Matches anything
([^/]+)/(.*)\.html$ – characters up to slash ‘/’ any characters ‘.html’

Eg: services/ firstservicename.html where ([^/]+) matches services and (.*)\.html matches firstservicename.html

2.    target_url is test.php?page=$1&dropdown=$2

Every variable i.e $1 and $2 matches with the unit inside the paranthesis.
$1 = ([^/]+)
$2 = (.*)

3.    flag is [L].

There are various flags. [L] means, If there is a match with a particular rewrite rule, It has to be the last rewrite rule to be executed.
You can test it out

For all dynamic links like
http://yourdomainname.com/test.php?page= services&dropdown=firstservicename

will have static URL’s like
http://yourdomainname.com/services/ firstservicename.html

We have seen some websites using search engine friendly URLs, which helps out a lot with their rankings. Its known factor that the ? mark in a dynamic page’s url can sometimes throw a search engine off.  In these cases Mod_Rewrite using .HTACCESS file can really be a great help.

Mod_rewrite is Apache extension which allows you to “rewrite” the URLs of your web pages. If  your server supports this technology (most linux webhosts do nowadays) you are able to rewrite virtually any URL into anything you like. Most often it is used to rewrite the URLs of dynamically generated webpages. Let have a detailed look,

Mod_rewrite is useful for pages with dynamic content, such as those which rely on either POST or GET data to generate the content. A URL that looks something like

http://domainname.com/product.php?product_id=25

would be ideal to control using mod_rewrite. The main reasons being that:

1) The URL is referencing dynamic content (as the GET suggests in the URL).

2) The page, product.php, will remain the same - yet load different data based on the value of the GET variable ‘product_id’.

Lets discuss with some practical stuff

We need the following to use mod_rewrite

* The module ‘mod_rewrite’ enabled.

* Have the AllowOverride directive within the httpd.conf file set to allow rules for you to use mod_rewrite commands.

Most Apache web servers have the above enabled and ready to use. Let start with the simple example

First we need to create a file called .htaccess and place it exactly in the folder where you want the rewriting to take effect (it will also take effect over all subfolders). Make sure that the file should not have any extension ( only .htacess not as .htaccess.txt)

Insert the following text into your new .htaccess file:

Options +FollowSymLinks
Options +Indexes
RewriteEngine On

Now the rewrite engine is switched on.

Before adding rules let us check what happens when we upload .htaccess

Upload your .htaccess file to the root directory of your site, and load the index page (well, any valid page!).

If your requested page loads just fine proceed to adding rules.

If you get an Internal Server Error (500) then it looks like either mod_rewrite isn’t installed, or your httpd.conf file doesn’t allow the required AllowOverride directives. If this is the case, and you do have access to edit your httpd.conf file, open in a editor and set AllowOverride to ALL for your site root directory

Like this

<Directory “/var/www/sites/www.domainname.com”>
AllowOverride All
</Directory>

Save the file and check now, I hope it should work now.

You can now start adding as many rewrite rules as you want. The format is simple:

RewriteRule  rewrite_from rewrite_to

Here

“RewriteRule” is static text, i.e. you should not change.
“rewrite_from” is the address which will be typed in the browser
“rewrite_to” - which page the server will actually activate.

Let have a simple demonstration for this.

Required Case:

Let my domain be www.domainname.com and have following pages in it.

www.domainname.com/productone.html  (i.e. productone.html)
www.domainname.com/producttwo.html  (i.e. producttwo.html)

What I required is, I need to redirect the users who opens the page productone.html  to the page  producttwo.html

Solutions,

Open your .htaccess file, and if you don’t have the main opening lines:
Options +FollowSymLinks
Options +Indexes
RewriteEngine On

Add them now. On the next free line, add the following:

RewriteRule  ^productone.htm1$ producttwo.html [L]

Now, load productone.html. What do you see? Producttwo.html  hopefully. How?
Well, the RewriteRule breaks down like this:

RewriteRule [FIND THIS] [REPLACE WITH THIS] [FLAGS]

RewriteRules have 4 main parts to them.

The rewrite action:
RewriteRule
Then the FIND THIS part:

^productone.html$

This is a regular expression. Everything found in between the circumflex (^) and dollar sign ($) will be searched for and saved as a variable. If the FIND THIS value is found, it’ll be replaced with the third part of the RewriteRule - the REPLACE WITH THIS:

producttwo.html

The final part of the RewriteRule is the flags. You can put flags in between square brackets ([ ]) to control how mod_rewrite should deal with the rule itself.

[L]

In this rule I have used flag, ‘L’. This means that this is the last rule. As we only have one rule at the moment, using this flag seems appropriate, as it’s the only, and last, rule. You can use multiple flags, by comma delimiting them. There is a list of the flags at the end of this tutorial.

Rewriting Dynamic URLs

Let’s take the first URL mentioned in this tutorial as the example for this part of the tutorial:

http://domainname.com/product.php?product_id=25

Create a new PHP page called product.php. Add the following code between the tags:

<p>You are viewing product <?= $_REQUEST['product_id']; ?>.</p>
Save, and upload your file. You can view my example of product.php to see how the page changes with the dynamic content from the GET request.

Required Case

The dynamic URL should look like this
http://domainname.com/product/25/

Solutions,

This could be achieved by adding the following line to your .htaccess file:

RewriteRule  ^product/([0-9]+)/$ product.php?product_id=$1 [NC,L]

Lets break this as we did earlier and look in detail

RewriteRule
Here, we’re simply stating that we’re adding a new rule for mod_rewrite to use.

^product/([0-9]+)/$

As before, this is the FIND THIS value. We are looking for a string within the URL that contains product/[NUMERICAL VALUE]/ - that is, the word ‘product’, then a forward-slash (/), then a numerical value only, then a final forward slash. The magic here lies between the brackets ( ):

([0-9]+)

The brackets ( ) are telling mod_rewrite to store whatever it finds within the brackets in a variable. The [0-9]+ is a simple regular expression allowing only numbers 0 to 9, and the + sign means ‘any number of’. So we can have 99 or 123 for example, not just one number, such as a 9 or a 1.

we finally add a trailing slash (/) at the end to finish what we’re looking for (as our desired clean URL is product/[PRODUCT ID]/).

product.php?product_id=$1

The third part of our RewriteRule is the REPLACE WITH THIS part. Here you can see the actual page name, with the query string - but this time there’s something new. Where we used to have the product ID, we now have a variable $1. $1 will contain the value of the result of the regular expression found within the brackets in the FIND THIS part. Can you see it all falling into place now?

[NC,L]

Finally come the flags. I’ve used two flags here, NC meaning that the rule is case insensitive (it just protects us incase anyone uses http://domainname.com/Product/25/ for example), and L meaning it’s our last rule.

Mod_Rewrite Flags

C - Chain
E - Environmental Variable
F - Forbidden
G - 410 Gone
L - Last
N - Next (Round)
NC - No Case
NE - No Escape
NS - No SubRequest
P - Proxy
PT - Pass Through
QSA - Query String Append
R - Redirect
S - Skip
T - Type

Hope now you have a basic idea on Mod_Rewrite with HTACCESS

Part 2: HTACCESS Tutorial for Midlevel users.

Purpose
Purpose of building a website ranges from Personal Website, Informative Website, Company/Organization Website, Commercial Website, Entertainment Website, Non-profit Website, Social Networking Website, News Website, Product Review Website and Blog/forum.

Though it is not mandatory to have a purpose to own a website, you can just have a website!

Requirement Analysis
Got a purpose to start a website? Good! Now start analyzing requirements to get started.

If you are going to build a personal website you have to make sure website will be displaying information about you and about your profession or hobbies in an elegant way.

The requirement for a company website is to provide maximum information about the company, products, services, process and mainly the contact information. Website should be an easy tool for clients to communicate with the company so providing an enquiry form and displaying contact information is a must.

If it is going to be commercial websitethe main requirement is to drag more customers into your business. The website should be more user-friendly and it should be projecting products attractive to eyes. Ecommerce website’s main requirement is to sell products online so there should not be heavy graphics or animations diverting customer’s concentration from product sections.

Entertainment websites such as gaming websites, music websites and movie websites should look fantasized. They should make user to become regular visitors so the overall theme and content of the website should be revised often to make the visitors feel the website is updated regularly.

A Non-profit website should convey its motto and services to the visitors. The main requirement of the website is to make people involve in their services by either participating in their activities and to donate money. The website should clearly project their services, recent news and events on their homepage and an online payment system will be easier for them to gather donations worldwide.

The basic requirement of a social networking website is to form a network of humans depending on their hobbies, interests, professions, locations and many more. Website should be easier for a person to find another person who shares the same interest or hobby. The website should also very user friendly for updating and sharing contents.

News website’s main requirement is to get the latest news to the visitors. Users should have provision to get news based on their location, field or interest. Visitors should be provided provision to subscribe for news on their interest using RSS or email notifications.

Nowadays online shopping is getting familiar worldwide and also it is easy for people to compare and buy products. So here comes the requirement for product review websites which provide people information about pros and cons of a product and mainly price comparison of same product with various sellers. The reviews should be written by experts so when people find the reviews really help them great, they will come back to check reviews for other products.

Blogs and forums are getting popular as they allow people belonging to various locations, cultures, industries, ideas and interests to share information and to discuss on topics. The main requirement of a blog or a forum is to group data and easily searchable. The website should be clean and simple as most of the times text content is going to be prominent.

Content Development
Once the requirements are analyzed and finalized then its time to gather contents for the website.

Before starting the web design process you should have all contents ready such as company info, services list and details, product details, photos and all other required contents based on the website purpose.

It’s good to have all the text contents framed by a professional content writer as they will be aware of industry standards, recent activities and mainly SEO keywords. If you are capable of framing contents yourself it is better to review and revise few times.

Wire Frame
Got a purpose, requirement is clear and content is ready. Let’s initiate the design process!

You may have lot of ideas for logos and website design. Also you may get lot of ideas from your friends, colleagues, business mentors and from researching information like reviewing your competitor websites and other related product websites.

Make all ideas in to wire frame structures, decide how the logo should look like, decide color and theme of logo and website. Make discussions with your business development people or your colleagues and make revisions to the wire frames and ideas on logo and website. Finally choose logo and website wire frames and decide the color theme for both.

Web Design
Wire frame is ready and now it’s time to start logo and web design.

Logo design should be elegant and deliver the motto of your business. It should be unique and identical to customers. It should solve multi purpose like using on website, business card, brochures, hoarding and even in coffee mugs if needed. So while designing the logo all these should be kept in mind and this makes the designing process easy and provides quick deliverables.

Now the logo is ready and its turn to start website design. The wire frame of homepage was well revised and refined and so it will make the website design process easier. The color theme of the website will be dependant on the logo theme as the logo needs to fit perfect and it brings an overall elegant look to the website.

Web Development
The design is finalized and the website development process can be initiated.

While developing a static website it should be more optimized and HTML code should be of latest standard. This helps the promotion of website easy in the internet among many search engines.

While developing a commercial ecommerce website, if the requirement is more general, using open source systems such as OS Commerce, Joomla, Drupal or Zen cart will reduce the development time and also reduces the development cost. Also minimal testing is enough as the systems are being used worldwide and they are providing regular updates and enhancements to the users.

If the ecommerce website requirement is not general and has major difference from usual ecommerce websites it is good to go for a custom ecommerce system. At most cases open source systems cannot be customized to a certain limit so custom ecommerce system can help to provide solutions for all your requirements. Also many people may need a unique content management system or a ecommerce system and the only solution is going for a custom development.

Testing & Launch
What are you waiting for? Now you can publish your website on internet and spread the word to whole world.

Though the website was tested well before launch in a beta version now it’s time to check the website with real data and real visitors. Check for withstanding power of the website with more traffic and data manipulation.

SEO & promotion
Your website is launched and did the world know it?

The website was launched to make you or your business familiar and to attract more visitors and clients. This can be done by search engine optimization and promotion. Promotion can be done via internet and by local media by advertising, word of mouth and by sending timely newsletters.

SEO includes process such as adding meta tags, titles, keywords, optimizing contents and standardizing codes. Writing blogs about the company or product can take your website to top of search engines and also regularly updating the website is a must.

Analyze Customer/End User Feedback
Now everybody knows your website and you may receive lot of feedback and queries from them.

Take time to read and analyze all feedbacks and some may be really helpful to improve the website visually or functionally. If your website is commercial you should mainly focus on the visitor point of view about the website. The website should be appealing to the end users and you should be ready to do enhancements that may attract more visitors.

Enhancement
Your website is familiar and now you have to make it more familiar.

Regular enhancements need to be done on visual design, functionality of the ecommerce system and on search engine optimization methods. When the website remains with the same look and feel and content, after few visits visitor may get bored ith your website as the world always look for new things. So keep updating your website!