Find Web Developers
Find Web Developers

A Beginner’s Guide to Building and Hosting a Web Page

August 16th, 2018

A beginner’s guide to Building and Hosting a Web Page Web design and development is incredibly fun. For those just getting started, I’ve developed the following guide to take you through all of the steps necessary to successfully embark on your web design and development adventure!

A) Index:

PRE: The 3 D’s

1. Gathering
2. Concept
3. Photoshop
4. Client Approval #1
5. HTML (front-end)
6. Code (back-end)
7. Client Approval #2
8. Uploading & Testing

B) Tools Required: (I’ll go through all of these tools in detail below)

1. Pencil
2. Paper
3. Photoshop (or other design tool)
4. Dreamweaver (or other web-development tool)
5. Copies of all the common browsers (see below for more info)
6. Filezilla (or other FTP tool to communicate with your web server)
7. Domain Name (your www. address)
8. Web Host such as GoDaddy (or something similar)
9. A computer
10. A passion for being creative!

——————————————————————————–

A) Index:

PRE: The 3 D’s

All websites in the world require 3 things.

A Domain Name. Through companies like GoDaddy, you can purchase names for small fees per year. If the name you want is something popular, consider purchasing it at the beginning of your build-process, after all, it’s good for a year.

A Dedicated Host Once you’ve selected a hosting package, you’ll have to log in and set everything up. You’ll have to point, or park your domain name at your hosting setup as well. Once all of that’s done, setup your FTP program so you’re connections to your server are working.

A Designed, and Developed Web Site (your stuff!). This tutorial will cover off on this one!

1. Gathering

The type of site you use and the tools you’ll need will vary a lot depending on the requirements of your client. A website built to do nothing but show pictures will have significantly different technology in the back-end than a page built to allow for discussions. Likewise, a site built for security with employee data and a login system will look entirely different yet.

Knowing what your client needs is the first real step in the building process. Make yourself a checklist and take it with you when you speak with your clients. Over time develop the checklist into a comprehensive consultation document. Be prepared for additional chat though. The most critical component of early web building is proper communication to ensure you and your client remain on the same ‘design’ page. The last thing you want to do is misinterpret their interests and spend 5-6 hours building something they didn’t want in the first place.

2. Concept

You’ve got all of your initial information. Now it’s time to sketch our concept design. You DO NOT need to be an artist for this. The purpose of this concept phase is to remove the computer and other distractions so you can visualize the design in your head.

Throughout this stage, we’re looking for general themes. What colours will we use, what header / body / footer layout will we go for? 2 column vs 3 column? Fixed or Liquid layout? Will the news display over here, or over there? What kind of navigational menu do we want, image based or CSS based? Sketch until your pretty little fingers bleed. You want to have an actual design on paper, something you’re pleased with. It’s incredibly easy to start over while your using a pencil but 3 hours into a designing session in Photoshop is NOT where you want to be when you realize eggplant yellow and rounded corners weren’t the way to go…

3. Photoshop

So we’ve got our concept on paper, now it’s time to transfer this design into Photoshop (or other similar program).

This phase is critical to ensuring we have a flexible method through which to make changes later on. It’s also paramount in ensuring our web page is cross-browser compatible later.

I’ll assume you’re using Photoshop and I’ll also assume you know something about it, ie: what layers are the general process of creating a graphic by using multiple layers to keep elements separated. If you not familiar with this process, head on over to HERE and spend some time learning the ground-work.

Assuming all of that (I assume a lot, I know!) let’s begin…

Typically if I were to create a picture in Photoshop, of a house on a lake, with a sun overhead I would do the following:

1. Delete the background later.

2. Create a new later ‘page’ to hold everything.

3. Create a new layer ‘house’.

4. Create a new layer BELOW that ‘lake’.

5. Create a new layer BELOW both of those ‘sun’.

In this way, I’ll have automatically setup the depth of my picture. The sun will appear behind the lake, which will appear behind the house. I can then design within each layer to keep things organized.

When designing a web site, you follow these same principles, but in a much more complete way.

If we think of the typical web page as having 4 components, those components would be: PAGE (or WRAP) to hold everything, HEADER, BODY, FOOTER. Keeping this in mind, in photoshop we create ‘layer groups (or sets in older versions)’ which follow the same flow.

1. Create a new layer group called ‘page’.

2. Within that, create new layer groups called ‘header’, ‘body’, and ‘footer’.

3. Within each of those, create individual layers (not sets) to break apart the various design elements.

When you’re done in Photoshop, if you look on the right, you should literally have a collapsible hierarchy of design elements that all collapse up into one top-level

element called ‘page’. Clicking that one layer group should reveal 3 layer groups within called header, body and footer. I’ve left out navigation and sidebar etc but those would have their own layer sets as well if you are building them.

By following this method, you’ll have a very organized and clear layout. You can come back and edit specific sections later on without having to worry about layering, depth, or moving the wrong components etc.

4. Client Approval #1

It’s not time to show our client our Photoshop (or similar) design. At this point it’s a picture only. We should have placeholder text and links in though so it appears exactly as a full, written web page would look. Use fake pictures if you need to. We want this to represent the web page as closely as possible.

We’ll go back and forth in this phase until the client approves of our graphical design. Once that’s done – congratulations! The design work is complete!

5. HTML (front-end)

Open up Photoshop and ensure all of your individual layers are saved as .GIF or .JPG or .PNG, or whatever format you want to use. We’re going to need everything in that format for the web.

NOTE: When saving in Photoshop, ensure you choose ‘save for web or devices’ as this offers some additional compression options for low bandwidth environments.

Open Dreamweaver (I know, I know, you’re EXCITED!) and create a new XHTML page. Yes, I said XHTML, not HTML (though they can be labeled the same when picking from the Dreamweaver ‘new’ menu. If you’d like to know why, check out this article. In a nut shell, it’s better, cleaner, more proper, and will ensure your code is more functional and valid.

Your new blank web page will look something like this:

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </body> </html>

Start by creating our basic layout with DIV’s. It should look like this once complete.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </p> <div id="page"> <div id="header">This is the header!</div> <div id="body">This is the content!</div> <div id="footer">This is the footer!</div> </p></div> <p> </body> </html>

Once that’s complete, build your page, placing the design elements into their appropriate spots. Once you’ve got this single, XHTML page working, in multiple browsers, you can stop if you wish at this point. However, there are a few more steps we can take to further clean up our code.

Currently, this page is large and unwieldy. As we add content, it will become difficult to discern where on the page certain things begin and end. To combat this, we can use PHP files to store our content and simply include them in our index page. Note, to do this you’d need to change your index page from a XHTML page to a PHP page.

I won’t get into includes, but this is essentially what the page could look like after you’ve finished including everything.

<?php include('header.php');?> <?php include('navigation.php');?> </p> <div> This is the only actual content on our page. Everything else is being included using PHP. It doesn&#8217;t matter how large the other files are, this is all we&#8217;ll ever see when we&#8217;re working in development mode on this page. Clean eh!?! </div> <p> <?php include('sidebar.php');?> <?php include('footer.php');?>

REMEMBER: Nothing is dynamic at this point, we’re building a basic, static page, with default news, fake pictures, etc. Nothing is coded in the back-end at this point.

Regardless of how little or how much organization you work into your page layout, the goal of this entire phase is to have a STATIC page, that looks exactly like our photoshop page, that works in multiple browsers. If we’ve gotten this far, we’re almost there!

6. Code (back-end)

Aside from the navigation buttons working, everything else on the site is probably broken. We’ve manually written in all of our text, and none of our gadgets work.

At this point we want to start coding in the back end, gadget by gadget.

For example. If we have a news section on our page, right now in our static page we’ve simply written that news in there. Instead, we’d like that news to be automatically entered when we create a new article, with some automatic program that doesn’t involve opening Dreamweaver each time. This is what we call a ‘Content Management System’ or CMS.

There are various forms of it out there. I won’t get into it at all, but Joomla and WordPress are great ones to begin with.

Alternatively, if you’re like me and like learning how the gears work from the bottom up, you might challenge yourself to learn MYSQL and PHP more extensively and simply write a little news gadget that reads and writes to a databases – it’s completely up to you!

Either way, the important part of this phase is to leave the design alone and work on adding life to all the gadgets and widgets on your page. Create that login system, create that user system, how about a gallery, a calendar, a CMS, maybe a guest-book or a comments box… it’s completely up to you. Remember, for every gadget, you should have designed it FIRST so you have it in Photoshop as a design. That way the design component is gone and you’re just coding the back end.

If you get caught up trying to design, AND code something in at the same time, trust me… it can sap your days away as you struggle to fight with misaligning CSS boxes etc.

Design it, then Develop it. Rinse. Repeat. Success.

7. Client Approval #2

It’s time to go back to the client and show them the development work you’ve been doing. Show off your login system, show off your gallery. WOW them! If they aren’t WOW’d, go back and tweak some stuff, sometimes all the way back to the design phase.

Rinse and repeat until you, and your client, are comfortable and satisfied with the current site.

8. Uploading and Testing

Up to this point, you would have either built everything locally and uploaded it piece-wise to test on the web server, OR, you might have used a program like WAMP to run a local server.

If you’ve been uploading everything to the web server, you’re finished! The website will already be up there.

If you’ve been running everything locally and using something like localhost to test the site, you’ll now need to upload everything to your web server. Once that’s done, you have to test everything again. MYSQL databases will likely be broken and need re-pointing, likewise things might operate slightly differently on that server for whatever reason.

Go through and ensure everything works up on the server.

Once that’s done, you’re finished! Congratulations on building and uploading your first web page!

——————————————————————————–

B) Tools Required:

1. Pencil

A pencil or pen, it doesn’t really matter. You’re going to need something to do the conceptual design with.

2. Paper

To go with the pencil or pen

3. Photoshop (or other design tool)

You’ll need something to do the graphical design with. Photoshop it self is quite pricey. If that’s not an option for you, or if you don’t have access to it via some shared resource, then do some research and find some free or cheap alternatives. I won’t comment on those here as I personally use Photoshop.

4. Dreamweaver (or other web development tool)

This is your bread and butter. This is the tool you’ll spend most of your time in. This is the tool that allows you to actually build the web pages, to write the code, to create your functions, to tie your graphical genius in with your buttons, forms and dynamic content.

To be quite honest, Dreamweaver it self is the most complete and by survey, most popular tool for the job. If you’re planning on getting into design and development seriously, this is worth the money.

However, there are alternatives if you can’t afford that. Again, do some research and you’ll find some cheaper/free alternatives that will do the job as well.

5. Copies of all the common browsers

I’m not going to specifically reference the browsers you should code for. The intention of this article is to be valid for more than just the several months in which it was written.

That said, visit this WC3 resource to get a listing of the currently used browsers and their market share of the internet. The list as of today, looks like this:

2010 IE8 IE7 IE6 Firefox Chrome Safari Opera

April 16.2% 9.3% 7.9% 46.4% 13.6% 3.7% 2.2%

March 15.3% 10.7% 8.9% 46.2% 12.3% 3.7% 2.2%

February 14.7% 11.0% 9.6% 46.5% 11.6% 3.8% 2.1%

January 14.3% 11.7% 10.2% 46.3% 10.8% 3.7% 2.2%

If I were building a site today for a client, I’d ensure it was compatible with Firefox, Chrome and IE 7+. That’s 85% of the market. Personally I don’t believe in backwards designing sites to reach back 3 browser revisions (IE 6). The types of hacks and fixes needed to get a site to operate correctly back that far are not worth the time. Shoot for 85% and you’ll be golden.

6. FileZilla (or other FTP tool)

You’ll need a tool like this to upload and download files from your web server. This is going to be a common task for you once you begin so find something you enjoy using and stick with it.

7. Domain Name (your www address)

Every site needs a registered name. I’ll get into the specifics more in the instructions but essentially, you will at some point need this before you can complete your client’s website.

8. Web Host (such as GoDaddy)

Every site needs physical space on the web somewhere. Hosting companies provide this. Companies like GoDaddy sell you space on one of their servers on which you can park your website files. For this you pay a small monthly fee.

Personally I’ve had incredible success with GoDaddy, but there are many out there to choose from.

9. A computer

Sorry folks, not optional. Laptops work great as well for you coffee-shop coders

10. A passion for being creative!

Corny, but true. This is NOT a business to get into simply because you want to pay the bills and have good computer skills. If you’re not really vested, and interested in the work your doing, it’ll show in the lackluster designs, rushed coding, and sloppy work you do.

Do yourself a favour, ask yourself this question: “Could I build websites as a hobby and enjoy it?” If you answered “yes” then this is a great business to get into.

Web Site Development – The Roles of Web Designers and Web Programmers

August 14th, 2018

A web site is a software package. By definition, a package is a ready-made program that is available to users for use to perform some tasks. These users include non-IT professionals. Thus, a web site qualifies to be a package like Microsoft Office, Peachtree Accounting packages.

Before the revolution of The Web (WWW), development of software package was the exclusive preserve of skillful programmers. Programmers or software developers develop the logic of programs which a package will eventually use to function. This logic building aspect of software development requires high level of intellect. This together with the intricacies of mastering programming languages made the development of packages uninteresting and unattractive to a large spectrum of people.

Following the revolution of The Web, it became possible for non-programmers to develop packages right from the inception. These are web-based packages and of course, web sites, requiring no programming skills. The result was the creation of a new type of profession called Web Design. A web designer is someone who organizes a web page by arranging texts, pictures, animations, forms etc on a page and formats them to produce good presentation. All he needs do is to make use of any of the appropriate web development tools like Macromedia Visual Studio and Microsoft FrontPage. Through the Design section of Macromedia Dreamweaver, for example, you can design a whole web page without using HTML codes. What you have is a web site. A web site is one or more web pages. These web development tools are the equivalent of what the popular package Adobe PageMaker does which is to organize and format pages of books, magazines, newspapers etc. No programming is required.

The limitation of web designing is the creation of static web sites which may be suitable for some applications but not all. They produce non-interactive and non-dynamic web sites that are unsuitable for certain applications and needs. For example, online registration. The role of a web designer stops at this point and that of a web programmer begins. As a result of the limitation of static web sites, the need to move further arose. People wanted sites where they could post forms for tasks like creating accounts online and authentication of passwords. This led to the development of web programming languages otherwise known as scripts. Examples are JavaScript, ASP, ASP.NET, JSP, PHP, ColdFusion etc. The result was the creation of the profession of web programming. A web programmer is someone who develops programs for the purpose of performing automated tasks on a web site. Some prefer to call them software developers. Example of such tasks are:

  1. Data validation.
  2. Form submission.
  3. Sign Up.
  4. Database search.

Thus, it became possible to develop dynamic and interactive web sites capable of doing what conventional software could do on stand-alone computer and network using non-internet technologies. Online banking, stock broking are examples. These functions can now be carried out entirely on internet. To develop functional scripts for such automated tasks, logic building and mastery of the programming language to use in terms of syntax are required. Most of the programs are written from scratch.

Can you be a web designer and a web programmer? Yes, you can. There are people who double as web designer and web programmer but specialists are noted for doing better in their respective fields of specialization than non-specialists. Some sites do not require more than web designing but many sites nowadays require both web designing and web programming like the multi-tier applications that have presentation layer, the logic layer that interfaces the presentation layer with the database, and the data layer that contains the database. There are even database specialists who design database and write what is called stored procedures and triggers right inside the database. The use of stored procedures increases the overall efficiency of site execution as it minimizes the number of times SQL statements are parsed, compiled, and optimized during execution. You can see that site development is quite deep.

The roles of web designers and web programmers are complementary in the development of web site. You need to identify where your ability lies and allow that to inform your choice of area of specialization. If you know you have the ability to write programs, you can go beyond web designing and become a web programmer but if it is otherwise, stick to web designing and continue to grow and sharpen your skills. The truth of the matter is that programming is not for everybody.

If you are a conventional graphic artist, you will find it easy to crossover to web designing and if you are a conventional programmer, you can readily crossover to web programming. What I mean by conventional graphic artists are those who have the expertise in the use of tools like CorelDraw, Photoshop, and PageMaker to perform Desktop Publishing tasks. By conventional programmers, I mean the experts in programming languages like C++, FoxPro, COBOL, and Dbase.

As long as you can determine where your ability lies, you will surely overcome frustrations in your tasks of developing web sites and you will continue to enjoy what you are doing. If you are a web designer and you have a job that involves programming which you cannot handle, look for assistance from a web programmer. If you are a web programmer and you are having issues with web designing in your task, seek the assistance of a web designer. If you can handle both areas to a very large extent, well and good.

Choosing Professionals for Ecommerce Website Design and Development

August 13th, 2018

Today, technology is developing at an increasing pace and we are depending a lot upon its use. A very fine example is the ecommerce website with options for real-time shopping. Talk about purchasing accessories or booking travel tickets, most of us lay emphasis on using the Internet. Owing to this changing lifestyle, business enterprises now-a-days consider having ecommerce existence to sell their products and services. A number of ecommerce websites have come up in the market and it has become really tough to beat the competition. Are you among them, looking forward to have good number of online consumers for your products and services? Are you striving hard to get the best ecommerce website design and development services?

Many brain-storming questions might be revolving around your grey cell and you might be looking for best possible solutions. Well, the best option is to get in touch with some skilled web professionals who are able to provide quality ecommerce web design services as per your business requirements. However, the market is flooded with web development companies and you are likely to get confused in selecting the right kind of services. To make your search easy and reliable, take a look at the following tips for choosing professionals for ecommerce website design and development services:

• Select professionals who are well-versed with the different types of web programming languages.

• Consider choosing web developers who have up-to-date information about the latest technological development.

• Analyze, if the web application developers are able to develop usable online shopping cart for easy transaction over the ecommerce platforms.

• Before selecting web designers, take a look at the past project details undertaken by them.

• Consider choosing that web development team who are able to develop mini shopping cart which can be easily located in the web pages as per business requirement.

• Be sure, if the web designers/developers are able to distinguish the checkout procedures including sign in, billing, shipment, payment and verification.

• Consider choosing professionals who are certified and have years of experience in developing easy-to-understand ecommerce web applications.

• Look for those professionals who are able to develop online shopping carts keeping in mind the constraints of time and budget.

After going through the above mentioned consideration, you are sure to have bug-free ecommerce web design services for your website. To make your search easy, you can think about surfing the Internet. A few reputed companies operate their official websites; wherein you might find their contact details. Before contacting the professionals you can go through the services and products the company offers to their customers. Some credible web development companies provide assistance to IT-based organizations residing in different parts of the world. They have team of adept web applications developers, designers, content developers, SEO and lot more. They are known for using latest web-based technology to provide outstanding IT-services to their customers.

So, what makes to think so much? The competition over the market is raising high with the each passing time. Get set to contact proficient web developers and have quality business websites for better business potential.