WEBSITE DEVELOPMENT

Websites Overview

Website is a location on web and is hosted on a web server. It is a set of related web pages. It is accessed using Internet address known as Uniform Resource Locator

Static Websites

Static websites are also known as flat or stationary websites. They are loaded on the client’s browser as exactly they are stored on the web server. Such websites contain only static information. User can only read the information but can’t do any modification or interact with the information.

Static websites are created using only HTML. Static websites are only used when the information is no more required to be modified.

Dynamic Websites

Dynamic websites shows different information at different point of time. It is possible to change a portion of a web page without loading the entire web page. It has been made possible using Ajax technology.

Server-side dynamic web page

It is created by using server-side scripting. There are server-side scripting parameters that determine how to assemble a new web page which also include setting up of more client-side processing.

Client-side dynamic web page

It is processed using client side scripting such as javascript. And then passed in to Document Object Model (DOM).

Websites Types

Internet Forums

An internet forum is message board where people can hold conversation by posting messages.

Key Points

• A forum can contain several sub forums.
• Each of sub forums may contain a number of topics.
• Within a forum’s topic, each new discussion started is called a thread.
• This thread can be replied by as many people as so wish.

Blog

The term Blog is taken from web log. It is a kind of web site that is updated regularly, with content about almost anything. In other words, blog is a Content Management System (CMS), an easy way of publishing articles on the internet.

Blogging Terminologies

BLOG

A type of website used to publish content on the internet.

BLOGGER

A person who writes for a blog.

BLOGGING

Writing for blogs is referred as blogging.

BLOGOSPHERE

A term is used to refer all the blogs on the web.

What to Blog about

Following discussion will help you to figure out what to write about and as well as what to name your blog.

• Write what you know about. For example, if you have good computer knowledge. You can write what you know about the subject.
• You can share your experience. You can also write what you gained from that experience, what you learned.
• Detail your personal research.
• Share your memory of someone.

E-commerce

E-Commerce or Electronics Commerce is a methodology of modern business which addresses the need of business organizations, vendors and customers to reduce cost and improve the quality of goods and services while increasing the speed of delivery. E-commerce refers to paperless exchange of business information using following ways.

• Electronic Data Exchange (EDI)
• Electronic Mail (e-mail)
• Electronic Bulletin Boards
• Electronic Fund Transfer (EFT)
• Other Network-based technologies

Features

E-Commerce provides following features:

NON-CASH PAYMENT

E-Commerce enables use of credit cards, debit cards, smart cards, electronic fund transfer via bank's website and other modes of electronics payment.

24X7 SERVICE AVAILABILITY

E-commerce automates business of enterprises and services provided by them to customers are available anytime, anywhere. Here 24x7 refers to 24 hours of each seven days of a week.

ADVERTISING / MARKETING

E-commerce increases the reach of advertising of products and services of businesses. It helps in better marketing management of products / services.

IMPROVED SALES

Using E-Commerce, orders for the products can be generated anytime, anywhere without any human intervention. By this way, dependencies to buy a product reduce at large and sales increases.

SUPPORT

E-Commerce provides various ways to provide pre sales and post sales assistance to provide better services to customers.

Portfolio

Online portfolio is collection of images, multimedia, emails, blog entries, and hyperlinks that are managed online. It can be seen as a kind of learning record that provides actual evidence of achievement.

Types

There are three types of online portfolio:

1. Developmental (e.g. working)
2. Reflective (e.g. learning)
3. Representational (e.g. showcase)

Developmental portfolio contains all the things that an individual has done over a period of time.

Reflective portfolio contains personal reflection on the content.

Representational online portfolio refers to learner’s achievement in a particular work.

Website Designing

Web designing has direct link to visual aspect of a web site. Effective web design is necessary to communicate ideas effectively.

Web desinging is subset of web development. However these terms are used interchangeably.

Key Points

Design Plan should include the following:

• Details about information architecture.
• Planned structure of site.
• A site map of pages

Wireframe

Wireframe refers to a visual guide to appearance of web pages. It helps to define structre of web site, linking between web pages and layout of visual elements.

Following things are included in a wireframe:

• Boxes of primary graphical elements
• Placement of headlines and sub headings
• Simple layout structure
• Calls to action
• Text blocks

Wireframe can be created using program like Visio but you can also use a pen and paper.

Web Designing Tools

Here is the list of tools that can be used to make effective web designs:

Coda 2
Coda 2 is a powerful web development & designing tool, comes with better user interface, text editing, file management, clips, sites, design and better Mysql support.OmniGraffle
OmmniGraffle is mainly used for wireframing. The downside of this tool is that It doesnot have interactive prototyping and It is available only for Mac.Pen and Paper
Pen and paper can be used to draw the appearance of the how the web site will look like.Vim
Vim is great web desiging tool.It supports full customizable auto-intending of code, multiple buffers for storing cut/copied code, and recording of actions for automated repetition.

S.N.	Tool Description
1.	Photoshop CC This is a great web designing tool provided by Adobe. The latest Photoshop CC 2014 supports many new features such as smart objects, layer comps, smart guides, Typekit integration, font search, and workflow enhancements.
2.	Illustrator CC Illustrator CC is also a web designing tool comes with powerful features like AutoCad libraries, white overprint, fill and stroke proxy swap for text, automatic corner generation, unembed images and touch type tools etc.
4.	Sublime Text Sublime Text is a source code editor with Python application programming interface. It's functionality can be extended using plugins.
5.	Imageoptim It is basically used for optimizing images on a website in order to load them faster by finding best compression parameters and by removing unnecessary comments.
6.	Sketch 3 Sketch 3 is a web desiging tool developed specifically for designing interfaces, websites, icons etc.
7.	Heroku It is also a great web development tool which supports Ruby, Node.js, Python, java and PHP.
8.	Axure It supports prototyping, documentation, and wireframing tools for making interactive website design.
9.	Hype 2 The Hype 2 offers: Easiest way to Animate & add interactivity, Hardness the power of HTML5, Mobile responsiveness, and WYSIWYG features.
10.	Image Alpha This tool helps to reduce file sizes of 24-bit PNG files. It does so by applying lossy compression and convert it to PNG8+alpha format which more efficient.
11.	Hammer This tool is suitable for non programmers and good only for small projects.
12.	JPEGmini Lite It is an image optimizing tool and supports photos in any resolution up to 28 Megapixels.
13.	BugHerd This tool helps to see how the projects is going and what everyone is working on. It also helps to identify issues in development.

A web site includes the following components:

Web Page Anatomy

Containing Block

Container can be in the form of page’s body tag, an all containing div tag. Without container there would be no place to put the contents of a web page.

Logo

Logo refers to the identity of a website and is used across a company’s various forms of marketing such as business cards, letterhead, brouchers and so on.

Naviagation

The site’s navigation system should be easy to find and use. Oftenly the anvigation is placed rigth at the top of the page.

Content

The content on a web site should be relevant to the purpose of the web site.

Footer

Footer is located at the bottom of the page. It usually contains copyright, contract and legal information as well as few links to the main sections of the site.

Whitespace

It is also called as negative space and refers to any area of page that is not covered by type or illustrations.

Web design Mistakes

One should be aware of the following common mistakes should always keep in mind:

• Website not working in any other browser other internet explorer.
• Using cutting edge technology for no good reason
• Sound or video that starts automatically
• Hidden or disguised navigation
• 100% flash content.

• Website Development

• Web development

  Web development refers to building website and deploying on the web. Web development requires use of scripting languages both at the server end as well as at client end.

  
  

  Before developing a web site once should keep several aspects in mind like:
• What to put on the web site?
• Who will host it?
• How to make it interactive?
• How to code it?
• How to create search engine friendly web site?
• How to secure the source code frequently?
• Will the web site design display well in different browsers?
• Will the navigation menus be easy to use?
• Will the web site loads quickly?
• How easily will the site pages print?
• How easily will visitors find important details specific to the web site?
• How effectively the style sheets be used on your web sites?

Web Development Process

Web development process includes all the steps that are good to take to build an attractive, effective and responsive website. These steps are shown in the following diagram:



Web development tools

Web development tools helps the developer to test and debug the web sites. Now a days the web development tooll come with the web browsers as add-ons. All web browsers have built in tools for this purpose.
Thsese tools allow the web developer to use HTML, CSS and JavaScript etc.. These are accessed by hovering over an item on a web page and selecting the “Inspect Element” from the context menu.

Featues

Following are the common featuers that every web development tool exhibits:

HTML AND THE DOM

HTML and DOM viewer allows you to see the DOM as it was rendered. It also allows to make changes to HTML and DOM and see the changes reflected in the page after the change is made.

WEB PAGE ASSESTS, RESOURCES, AND NETWORK INFORMATION

Web development tools also helps to inspect the resources that are loaded and available on the web page.

PROFIING AND AUDITING

Profiling refers to get information about the performance of a web page or web application and Auditing provides developers suggestions, after analyzing a page, for optimizations to decerease page load time and increase responsiveness.

Skills Required

For being a successful web developer, one should possess the following skills:
• Understanding of client and server side scripting.
• Creating, editing and modifying templates for a CMS or web development framework.
• Testing cross browser inconsistencies.
• Conducting observational user testing.
• Testing for compliance to specified standards such as accessibility standards in the client region.
• Programming interaction with javaScript, PHP, and Jquery etc.
• 
  

Websites Publishing

Website publishing is the process of uploading content on the internet. It includes:

• uploading files
• updating web pages
• posting blogs

Website is published by uploading files on the remote server which is provided by the hosting company.

Prerequisites for Website Publishing

In order to publish your site, you need the following things:

• Web development software
• Internet Connection
• Web Server

Web development software

It is used for building web pages for your web site. Dreamweaver and WordPress are example of web development softwares.

Internet Connection

Internet connection is required to connect to a remotely located web server.

Web Server

Web server is the actual location where your website resides on. A web server may host single or multiple sites depending on what hosting service you have paid for.

Websites URL Registration

A domain name is the part of your Internet address that comes after "www".For example, in www.tutorialspoint.com the domain name is tutorialspoint.com.

A domain name becomes your Business Address so care should be taken to select a domain name. Your domain name should be easy to remember and easy to type.

Domain Extensions

The final letter at end of internet address is known as top level domain names. They are called top level because they are read from right to left, and the part after the dot is the highest in a hierarchy.

The following table shows the Generic Top-Level Domain names:

Domain	Meaning
.com	Commercial Business
.edu	Education
.gov	U.S. government agency
.int	International Entity
.mil	U.S. military
.net	Networking organization
.org	Non profit organization

Websites Hosting

Overview

Web hosting is a service of providing online space for storage of web pages. These web pages are made available via World Wide Web. The companies which offer website hosting are known as Web hosts.

The servers on which web site is hosted remain switched on 24 x7. These servers are run by web hosting companies. Each server has its own IP address. Since IP addresses are difficult to remember therefore, webmaster points their domain name to the IP address of the server their website is stored on.

It is not possible to host your website on your local computer, to do so you would have to leave your computer on 24 hours a day. This is not practical and cheaper as well. This is where web hosting companies comes in.

Types of Hosting

The following table describes different types of hosting that can be availed as per the need:

S.N.	Hosting Description
1.	Shared Hosting In shared hosting, the hosting company puts thousand of website on the same physical server. Each customer has their own allocation of physical web space and a set of bandwidth limit. As all websites share same physical memory, MYSQL server and Apache server, one website on the server experiencing high traffic load will affect performance of all websites on the server.
2.	Virtual Private Server (VPS) It is also known as Virtual Dedicated Server. It is a server which is partitioned into smaller servers. In this customer is given their own partition, which is installed with its own operating system. Unlike shared hosting, VPS doesn’t share memory or processor time rather it allocates certain amount of memory and CPU to use which means that any problem on a VPS partition on the same drive will not affect other VPS customers.
3.	Dedicated Server In this kind of hosting, single dedicated server is setup for just one customer. It is commonly used by the businesses that need the power, control and security that a dedicated server offers.
4.	Reseller Hosting A reseller acts as a middle man and sells hosting space of someone else’s server.
5.	Grid Hosting Instead of utilizing one server, Grid Hosting spreads resources over a large number of servers. It is quite stable and flexible. The servers can be added or taken away from the grid without crashing the system.

Following are the several companies offering web hosting service:

Web Hosting Companies

S.N.	Hosting Company
1.	Blue Host
2.	Go Daddy
3.	Host Gator
4.	just Host
5.	Laughing Squid
6.	Hivelocity
7.	liquid Web
8.	Media TempleServInt
9.	Wired Tree
10.	Wild West Domains
11.	Wix
12.	WIPL
13.	Big Rock

Website Security Consideration

Websites are always to prone to security risks. Cyber crime impacts your business by hacking your website. Your website is then used for hacking assaults that install malicious software or malware on your visitor’s computer.

Hackers may also steal important customer data such as credit card information, destroy your business and propagate illegal content to your users.

Security Considerations

Updated Software

It is mandatory to keep you software updated. It plays vital role in keeping your website secure.

SQL Injection

It is an attempt by the hackers to manipulate your database. It is easy to insert rogue code into your query that can be used to manipulate your database such as change tables, get information or delete data.

Cross Site Scripting (XSS)

It allows the attackers to inject client side script into web pages. Therefore, while creating a form It is good to endure that you check the data being submitted and encode or strip out any HTML.

Error Messages

You need to be careful about how much information to be given in the error messages. For example, if the user fails to log in the error message should not let the user know which field is incorrect: username or password.

Validation of Data

The validation should be performed on both server side and client side.

Passwords

It is good to enforce password requirements such as of minimum of eight characters, including upper case, lower case and special character. It will help to protect user’s information in long run.

Upload files

The file uploaded by the user may contain a script that when executed on the server opens up your website.

SSL

It is good practice to use SSL protocol while passing personal information between website and web server or database.

Search Engine Optimization

What is SEO

Search Engine Optimization refers to set of activities that are performed to increase number of desirable visitors who come to your site via search engine. These activities may include thing you do to your site itself, such as making changes to your text and HTML code, formatting text or document to communicate directly to the search engine.

Types of SEO

SEO can be classified into two types: White Hat SEO and Black Hat or Spamdexing

WHITE HAT SEO

An SEO tactic, technique or method is considered as White Hat if it follows the followings

• If it conforms to the search engine's guidelines.
• If it does not involves any deception.
• It ensures that the content a search engine indexes and subsequently ranks is the same content a user will see.
• It ensures that a Web Page content should have been created for the users and not just for the search engines.
• It ensures the good quality of the web pages.
• It ensures the useful content available on the web pages.

Always follow a White Hat SEO tactic and don't try to fool your site visitors. Be honest and definitely you will get something more.

BLACK HAT OR SPAMDEXING:

An SEO tactic, technique or method is considered as Black Hat or Spamdexing if it follows the followings:

• Try to improve rankings that are disapproved of by the search engines and/or involve deception.
• Redirecting users from a page that is built for search engines to one that is more human friendly.
• Redirecting users to a page that was different from the page the search engine ranked.
• Serving one version of a page to search engine spiders/bots and another version to human visitors. This is called Cloaking SEO tactic.
• Using Hidden or invisible text or with the page background color, using a tiny font size or hiding them within the HTML code such as "no frame" sections.
• Repeating keywords in the Meta tags, and using keywords that are unrelated to the site's content. This is called Meta tag stuffing.
• Calculated placement of keywords within a page to raise the keyword count, variety, and density of the page. This is called Keyword stuffing.
• Creating low-quality web pages that contain very little content but are instead stuffed with very similar key words and phrases. These pages are called Doorway or Gateway Pages
• Mirror web sites by hosting multiple web sites all with conceptually similar content but using different URLs.
• Mirror web sites by hosting multiple web sites all with conceptually similar content but using different URLs.
• Creating a rogue copy of a popular web site which shows contents similar to the original to a web crawler, but redirects web surfers to unrelated or malicious web sites. This is called Page hijacking.

Key Elements to ethical SEO

Keyword research

It allows you to see which keywords users actually employ to find products and services within your chosen market, instead of making guesses at the keywords you believe are the most popular.

Content development

Content development involves:

• Navigational flow and menu structure
• Site copy or articles
• Headings and sections

Web development

Web development involves:

• Text-based site development wherever possible.
• Clean and logical site structure.
• Proper markup of key page elements.

Link Building

Building links will make up about 60% of your work. There are ways to automate this process using shortcuts, workarounds, and submission services.

Internal linking is also very important. Treat the way you link to your own content same as you would link from an external site.

Webmaster Tools

Webmaster dashboard is provided by both Google and Bing that gives insight into activity by the search engine on any site that has been registered and verified via dashboard.

Dashboards offer a number of tools which allow us to understand how the search engine sees your site. These are the only way to identify crawling, indexing, and the ranking issue with your site.

SEO Do’s and Do’nts

DO's

There are various other tips which can help you to optimize your web site for many Search Engines:

• Create logs of pages and each page should however contain a minimum of about 200 visible words of text to maximize relevance with Google.
• Create a Sitemap, Help, FAQ, About Us, Link to Us, Copyright, Disclaimer, and Privacy Policy pages on mandatory basis.
• Create a home page link to each and every web page and provide easy navigation through all the pages.
• Pay attention to your dynamic page URLs. Google can crawl and index dynamic pages as long as you don't have more than 2 parameters in the URL.
• Check your complete site for broken links. Broken links will reduce your other pages rank as well.

Do'nts

Here is the list of Do'nts that one should keep in mind all the times:

• Don't keep hidden text on your web pages.
• Don't create alt image spamming by putting wrong keywords.
• Don't use Meta tags stuffing.
• Don't use frames and flash on your site.
• Don't exchange your links with black listed sites.
• Don't try to fool your site visitors by using miss spelled keywords.
• Don't send spam emails to thousand of email IDs.
• Don't use too much graphics on your site.
• Don't create too many doorway pages.
• Don't try to create duplicate content of pages.
• Don't submit your website many times in a single search engine.
• Don't use sub-directory depth more than 1-2.
• Don't create too many dynamic pages. Try to convert them into static pages.
• Don't bloat your pages with code.
• Don't nest your pages.

Website Monetization

Website monetization refers to making money from the website. It is done by converting existing traffic to a particular website into revenue.

Methods of Monetization

Display Advertising

It refers to the banners and text ads. This method is good for the websites that have significant traffic, valuable audience, relevant and active advertisers.

Affiliate Marketing

It refers to steering the visitors to products and services of a third party merchant. It is good for the websites that are product centric and have easy integration into content.

Lead generation

It refers to capturing the customer information and selling it to a third party.

Email rental

It refers to renting out your email lists to third parties. In this you will send an email on their behalf to your distribution list