Vous êtes sur la page 1sur 34

Faculty: Prof. (Dr.) J.R.

Arora
m 
'   (!) 

 
  
    

  
  

!
" 
# $% &
ë 
 ë assume you all know basic about Websites.
 ë assume you all Have functional knowlege of
websites.
 ë assume you will ask questions (ë will)
 ë assume we all (including me) will learn
something new today
 ë assume we all will enjoy this session
a 
a 

 asic understanding of web


programming
 Creativity
 Good writing skills
 Patience
!aë!

ahe exact process will vary slightly from


designer to designer, but the basics are
generally the same.
1. ënformation Gathering
2. Planning
3. Design
4. Development
5. aesting and Delivery
6. Maintenance
ë aë a ë 
 ët involves a solid understanding of the
company it is created for.
 ët involves a good understanding of —  -
what your business goals and dreams are.
 Certain things to consider are:
1. Purpose
2. Goals
3. aarget audience
4. content
ë

 ahis is the point where a site map is


developed.
 ahe site map cointains all main topic areas
of the site.
 Serves as a guide to what content will be
on site.
 What technologies should be implemented.
 Elements such as interactive forms,
ecommerce, flash, etc. are discussed when
planning your web site.
ë

 What is the goal of your website?


 What is the target audience of your
website?
 What content do you intend to offer?
 Which key data and metrics will you use to
determine your success?
Y!ë

 ët¶s time to determine the look and feel of


your site.
 aarget audience is one of the key factors
taken into consideration.
 Your web designer will create one or
more prototype designs for your web
site.
Y! 
 HaML Editors:
— WYSëWYG = What you see is what you get, no need to
use HaML, drag and drop, start typing words.
ż Dreamweaver*, Frontpage*, Microsoft Word (Save
As«HaML)
— HaML Code Editors = Notepad with helper functions, i.e.
Color coded, indents, shortcuts.
ż aextpad, Araneae
*Has both WYSëWYG and HaML code editor.
‡ How to choose:
http://webdesign.about.com/library/editorquiz/blsta
rt.htm
i  

 ën this phase, communication between


both you and your designer is crucial to
ensure that the final web site will match
your needs and taste.
 ët is important that you work closely with
your designer, exchanging ideas, until
you arrive at the final design for your
web site.
Y ë a
 the point where the web site itself is
created.
 ahis is typically done by first developing
the home page, followed by a ³shell´ for
the interior pages.
 Elements such as interactive contact
forms, flash animations or ecommerce
shopping carts are implemented and
made functional during this phase.
i aë Y
 During development phase there are 3 main
steps. ahey are:

1. Get a domain name: A domain name is your


address on the web. ët's the information that
customers type in to find your website. ët's
what comes after the www.
Y  

www.DomainName.com , www.DomainName.edu
, www.DomainName.net , etc«
http://www.google.com : Google.com is the domain
name.
http://www.uwest.edu/site/page.html : UWest.edu is
the domain name (the rest are just folders and
files. µsite¶ is a folder, page.html is the web page
file)
You need to µrent¶ this name by registering for it,
usually on a year by year basis.
Vendors: godaddy.com,networksolutions.com
http://www.godaddy.com
Y ! 
 General rules of thumb:
— .com = commercial
— .edu = educational institution
— .net = anything goes.
— .org = non-profit organization

 You can purchase a domain first, without buying hosting


service. Or you can purchase it as a package. Many
hosting companies offer the package.
 You will have to direct this domain to the ëP address
provided by your host.
 ët could take up to 24-48 hours to µresolve¶: to have all
computers online associate the domain name with the
host that has your files.
Y ë ai aë Y
2. Choose a web host :

 
  * +
 A web host stores the web site you create on
their servers and transmits it to the internet so
that when someone types in your domain
name, your web site appears. A server is just
a fancy computer that "serves up" your web
site to the internet.

2. Choose your Hosting Plan


 http://www.bluehost.com/tell_me_more.html
 http://www.hostgator.com/shared.shtml
 http://www.fortunecity.com/compare-hosting-plans.shtml
˜ i 

, -./! 0 - . $ $


— aells your internet browser what to do, where to get
pictures, where to display the links: layout and text.
— Open your ënternet browser, go to any website, right
click anywhere on the website and select ³View
Source´ to see that page¶s HaML code.
£ 
 —  
— A way to share control and layout of your entire site
without changing every single page.
˜  
— Small functions that detects input from the internet
user.
    

 aitle - title of the web page


 Web address - URL of the page shown at the browsers
address box
 Content - information on the page - text, graphics and other
media types
 Design - style of the page, font, color, background, visual
elements
 Structure - layout of the page, title, headings, tables,
frames, navigational tools, footers
 Hyperlinks - links to related resources
 
3   

  4".

( 
* $
 2$ 
 
 
# 3


m 
3
 *1

 2$  
! 

 

! 

5 
5  1
! $

a

 attend to the final details and test your


web site.
 aest things such as the complete
functionality of forms or other scripts, as
well last testing for last minute
compatibility issues .
i aë Y
 it is time to deliver the site. An FaP (File
aransfer Protocol) program is used to upload
the web site files to your server.
 the site should be put through one last run-
through. ahis is just precautionary, to confirm
that all files have been uploaded correctly, and
that the site continues to be fully functional.
 ahis marks the official launch of your site, as it
is now viewable to the public.

 ahe development of your web site is not
necessarily over, though.
 One way to bring repeat visitors to your site
is to offer new content or products on a
regular basis.
 CMS (Content Management System) can be
implemented to your web site. With a CMS,
You can utilize online software to develop a
database driven site for you.
i  
 Other maintenance type items include SEO
(Search Engine Optimization) and SES (Search
Engine Submission).
 ahis is the optimization of you web site with
elements such as title, description and keyword
tags which help your web site achieve higher
rankings in the search engines.
 ahere are a lot of details involved in optimizing and
submitting your web site to the search engines -
enough to warrant it¶s own Presentation. ahis is a
very important step, because even though you now
have a web site, you need to make sure that
people can find it!
! 


Do¶s in web page design


 Plan the web site structure and navigation
 Keep the layout simple and intuitive
 Use the same general style throughout
 Add standard navigation tools to each page
 ënclude copyright and contact information
on each page
29
! 

Do¶s in web page design
 Use original or free graphics
 Use images wisely and keep file size small
for fast download
 Respect copyright and intellectual property
rights
 Always state the source of all materials
used
 Spell check and proof-read each page

30
! 

Don¶t¶s in web page design
 6 3 %!  $ 7 *  3 0 /
$ 
3    3
 6 2  $ 
3 /    
 
*$$ 3
$!7  
 
  
3*   2 % 
! % 
 6  * 3$ 
 3 
  
    0    *
31
! 


Don¶t¶s in web page design


 Don¶t use blinking or glowing text for emphasis
 Don¶t use long paragraphs of text - divide them
into readable chunks
 Don¶t create dead end pages, which have no
links to any other local page in the site
 Don¶t design for a specific browser
32
! 

 ao setup a website:
— Find a hosting service, make sure the
specifications are what you need.
— Decide on a domain name, make sure it¶s
not already taken.
— Use a web editor (and a graphics
application) to design your website and
upload your files.
— Update as necessary.
a