0% found this document useful (0 votes)
35 views

Website Design Part 1

Website Design
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
35 views

Website Design Part 1

Website Design
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 63

Deepak Raj Giri

System Administrator
Paschimanchal Campus
Course Co-ordinator
National Computer Center
What is a web site?
A website is an address (location) on the World Wide Web that
contains your web pages. Basically, a website is your personal
online communications connection to the rest of the world.
 A website is totally different from any other type of publishing,

advertising or communications media.

 The Design Process


Designing for the web requires the relevant content of a
brochure or magazine, the colorful look of high-quality print, and
the attention-grabbing impact of television advertising. Plus it
should offer a valuable product and/or information, be updated
frequently and stay current with changing technology
Once you have decided to establish a web site there are three
steps to getting it online.

1 - Get a domain name - This is your personal/private address on


the Web.

2 - Find a web hosting service- Here is where your website will


reside.
Free vs Private Web Hosting

3 - Design, build and upload your website - The process of


website creation.
 A static website is one that has web pages
stored on the server in the format that is sent
to a client web browser. It is primarily coded in
Hypertext Markup Language, HTML.
 Simple forms or marketing examples of
websites, such as classic website, a five-page
website or a brochure website are often static
websites, because they present pre-defined,
static information to the user. This may
include information about a company and its
products and services via text, photos,
animations, audio/video and interactive menus
and navigation.
 A dynamic website is one that changes or
customizes itself frequently and
automatically, based on certain criteria.

 Dynamic websites can have two types of


dynamic activity: Code and Content.
Dynamic code is invisible or behind the
scenes and dynamic content is visible or
fully displayed.
Asite, typically few in pages,
whose purpose is to sell a
third party's product. The
seller receives a commission
for facilitating the sale.
 E-commerce (electronic-commerce) refers
to business over the Internet. Web sites
such as Amazon.com, Buy.com, and eBay
are all e-commerce sites.
 Sites generally used to post online diaries
which may include discussion forums (e.g.,
blogger, Xanga, Wordpress). Many bloggers
use blogs like an editorial section of a
newspaper to express their ideas on
anything ranging from politics to religion to
video games to parenting, along with
anything in between. Some bloggers are
professional bloggers and they are paid to
blog about a certain subject, and they are
usually found on news sites.
 Similar to an information site, but dedicated
to Displaying news, politics, and
commentary.
 Most websites could fit in this type of
website to some extent many of them are
not necessarily for commercial purposes
(eg. Ask.com, wikipedia.org)
 A website that indexes material on the
internet or an intranet (and lately on
traditional media such as books and
newspapers)and provides links to
information as a response to a query.
HTML, JavaScript, Java Applets, and other
technologies can be executed on the client
side because it is viewed by your browser on
your computer.

For more information on Client Side vs. Server Side


Applications, read
http://www.developer.com/tech/article.php/923111
Applications on the World Wide Web that run on
the user’s server or computer and are executed by
the browser installed on the user’s computer.

Example: JavaScript scripts are client-side because


they are executed by the client’s browser.
A scripting language used to design interactive
Web sites.
JavaScript allows developers to create interactive objects such
as pop-up boxes, mouse-over buttons, image maps, animation,
and drop-down menus that display on the client-side.
A high-level programming language used to create
applications for Web sites.
Java: is an object oriented program language
used on server side applications for the web.
Java can stand on its own and is more complex
than JavaScript. Java must be compiled before it
can display properly on the web.

JavaScript :is an object oriented program


language used to create interactivity on the
client side of the web. JavaScript must be
placed inside an HTML document to function and
is displayed by the browser.
A grouping of technologies used to create dynamic
and interactive web content that loads and updates
at a faster rate of speed.
Web-based application that runs on the Web or
host server.

ASP, PHP, and other technologies can be


manipulated by the server side before
sending the web page to the client.
A third-party entity that manages and distributes
software-based services and solutions to customers
across a wide area network from a central data
center.
Cascading style sheets are used to format the
layout of Web pages. They can be used to define
web page elements such as text styles and tables.
A specification for transferring information
between a World Wide Web server and any
program on the client’s computer designed to
accept and return data.
A collection of information organized in to records
of information so a computer program can quickly
access and select desired pieces of data.
A free and open source JavaScript library that is
used by Web developers to navigate HTML
documents, handle events, perform animations
and add Ajax interactions to Web pages.
A program in which the source code is available to
the general public for use and/or modification
from its original design free of charge.
•Open source programs
•save money because they are free
•allow for security testing
•allow you to edit the programs to fit your needs
The authoring language used to create documents
on the World Wide Web

A set of tags that are used to mark up plain text so that a


browser application knows how to display the text.
The Web development language that establishes a
standard for defining mark-up languages. HTML is a
type of SGML.
A standardized query language for requesting
information from a database
A widely used, general-purpose scripting language
embedded into the HTML source document and
used to produce dynamic web pages.
PHP is the most popular language to create web sites. PHP is an
interpreted language and is executed on server side contrary to
scripts executed on client side (a JavaScript or a Java applet
executes on your computer)
A common web development language created by
W3C. A pared-down version of SGML designed
especially for Web documents.
For more information, visit http://www.w3.org/Consortium/
A hybrid between HTML and XML specifically
designed for Net device displays. XHTML is a
markup language written in XML and is a stricter
and cleaner version of HTML.
•Basic Software
•Notepad
•Front Page
•Photoshop
•FTP software (Flash Fxp, file Zilla and other)
•Advanced Software
•WAMP Server, XAMP Server, Easy PHP etc.
•Dreamweaver
• Photoshop
• Flash
• FTP software (Flash Fxp, file Zilla and other)
Open Source Web Development
Web development is the creation of a website for the
internet (world-wide web- www) or intranet (private network).
A large organization may require a large number of web
developers but a small one can do with a webmaster, graphic
designer and information systems technician.

Open Source Web Development is now possible free of


charge because costs are covered by advertisements,
sponsorship and donations.

Using the following frameworks


 Magento
 Drupal
 Animation Work
 Wordpress
 OsCommerce
 Joomla
 Opencart
Magento is a feature-rich e-Commerce platform built on open source
technology that enables merchant user to control the appearance,
content and functionality of his store. Through search engine
optimization and content management tools he can create websites
tailor-made to suit his business needs.

Drupal is a multi-user system that can promote content through Twitter


and Facebook. It can scale sites with a million pages and respond to
20,000 requests per second and is yet, highly secure.

Animation Work like 16 images per second can create the impression
of a moving image virtually undistinguishable from live motion.
Traditional picture animation or computer animation or their
combination can provide entertaining animation sequences.
Wordpress is the largest self-hosted blogging tool used on millions of
sites and seen by multitudes world over everyday. Smarty is arguably
one-up on PHP in separating presentation from business logic like in
situations where the roles of designers and developers are different.
When there are tens of thousands of templates and their efficient
management is crucial Smarty’s tag-based template syntax is definitely
preferred.

OsCommerce is a highly rated e-Commerce application for setting up


an online store for unlimited number of products. Payment and tax can
be collected, shipping arranged, and security of payment ensured.
Customers can view their order history, search for products and
customize product catalogue through OsCommerce.
Joomla is the dynamic portal engine and content management system(CMS).
With Joomla you can create websites with in a very short span of time. There is no
need to write code, only focus on your content.
OpenCart is free open source ecommerce platform for online merchants. OpenCart
provides a professional and reliable foundation from which to build a successful
online store.
Web Hosting
A web hosting company is one that rents out
space on their server for a monthly fee.

To run a web site you need access to a


server, and although you could operate your
own server, it is usually easier and more
convenient to use a third party.
There are three main categories of web
hosting: -

 Shared Hosting
 Dedicated Server Hosting
 Colocated Server Hosting
Your site is given a section of a server, which
is shared with other web sites. This is the
most common type of hosting, and the most
affordable.

It is often referred to as ‘virtual’ or ‘budget’


hosting.
The next stage up. You rent an entire server
for your site.

This gives you more control over your web


space. It also tends to be more reliable, holds
more content, and can handle more
bandwidth than shared hosting. Predictably,
it is also more expensive.
The most advanced level of hosting, this is
where you own the server and the hosting
company simply provides the maintenance
for it.

You have full and complete control of your


server.
Domain
A domain name is a sequence of letters and or numbers
separated by one or more periods (".") that act as a
pointer to a unique numerical address (IP) on a computer
network, such as the Internet. That address may host
publicly available content, or may be a private intranet.

A domain name always ends with an extension of 2 or 3


characters. These characters can signify the country the
domain name is associated with or the type of
organization; but not always
 TLD - Top Level Domains

These are at the highest level in the DNS structure of the Internet.
There are several different types of TLD's, being:

 ccTLD - country code Top Level Domains

Two letter domains established for geographical locations; for


example; .np signifies Nepal. When originally designated, usually only
residents of a country could register their corresponding ccTLD; but
over the years quite a few countries have allowed parties outside their
shores to register names. An example of this is Tuvalu(Ellice Islands)
(.tv).

In the case of np domain names, registrants must still be Nepalese or


have registered business interests in Nepal. The strict registration
eligibility criteria for np names has meant .np is still strongly
associated with Nepal.
 gTLD - generic Top Level Domain
Generic TLD's include .com, .net, .biz, .org,.edu and .info - these can be
registered by anyone.

 IDN ccTLD - internationalised country code top-level domain


A top-level domain with a specially encoded format that allows it to be displayed
in a non-Latin character set.
Below the TLD's are various other levels:

 Second level

Directly below a TLD in the DNS hierarchy, e.g. google.com


 Third level

Directly below a second level domain in the DNS hierarchy. e.g. google.com.np

The difference between second and third level can be a little confusing. For
example, google.com is considered a second level domain, but google.com.np
would be classed as a third level domain name.
 Subdomain
Part of a higher ranked domain name in
DNS hierarchy; e.g. ncc.deepakgiri.com.np

Some services offer subdomain


"registration“ but this usually isn't ideal for
businesses and should probably be avoided.
1. Analyse 4. Implement
• Info / content • User Interaction
• Target Audience • Final Checklist
• Top 10 Checklist
• FTP
2. Organise
5. Maintain
• Navigation
• Marketing
• Content
• Optimisation
• Page layout
• Traffic analysis
• Page design
3. Develop
• Web page layout
• Site layout
• Web page construction
• Graphics techniques
The first question to ask yourself is do you really need a web
site? To help you decide, ask yourself the following questions:
Why do I want to create this web site?
◦ promote your ideas, hobbies, or beliefs
◦ To advertise your company or product
◦ Make loads of money really fast
◦ Provide customer services and support
◦ To keep your customer base informed
◦ Give or sell information
◦ Create an 'Extended Business Card' for your company
◦ Provide internal information and services for your company
Before you can start deciding what content the site is going to contain
you need to determine

◦ Who your target audience is.

◦ What age group are your users?

◦ What is there skill level with the Internet?

◦ How can I communicate effectively?

◦ You also need to determine the purpose of your site. What is the
site for?

Once you have determined these factors you can start to plan the
content your site will have. Remember who your target will be when
deciding on content:
Research WebSites

This is a very important part in the creation of a web site, and usually
very useful.

◦ Spend time looking at other internet sites, particularlly your


competitores

◦ See if you can get any ideas you can use and improve on

◦ Sites with lots of animation are not always the best.

◦ You must also keep in mind that not everyone has a fast Internet
connection.
What content (data, graphics, photos, etc.) will be included?
This is the ''big'' job...gathering all the content that you want to include on
your web site. Are you going to use photos? What kind of graphics do
you want? And what information or data are you putting online?
Make a list of the items you think you will want to have on your website.

Audience analysis
Audience analysis is the starting point for any project. You need to figure
out your audience's demographics:
◦ how old they are
◦ where they work
◦ what they earn
◦ where they live, anything that's appropriate
A checklist for type of Content you may wish to include on your
website
◦ Frequently updated information
◦ Product and Company articles
◦ Question and answers
◦ Guest book that your guests to your site can sign and add
their own comments
◦ Web site search  very useful for larger sites
◦ Weekly poll, to poll your visitors on a particular question
◦ Quizzes and sweep stakes, with prizes to promote your
products
◦ Free offers
◦ News
◦ Unique information
◦ Location maps
◦ Contact and Booking forms
Top 10 website design tips - checklist
1. Know your audience
2. Keep web pages short
3. Limit the amount of text
4. Avoid large images
5. Use web safe colours
6. Clearly identify all links
7. Check spelling
8. Use a site map or directory page
9. Update and check all links
10. Include contact information

You might also like