Chapter 4 Web design tech in formation technology msc class .pdf

Wireless Application Protocol [ WAP ]
Chapter – 4
Web Site Designing Techniques
Introduction to Web Design

What is a Web site?
A web site is:
 a presentation tool;
 a way to communicate;
 a learning tool;
 a teaching tool;
 a marketing important tool;

3
Web Components
 Clientsand Servers
 Internet Service Providers [ISP ]
 Web Site Hosting Services
 DomainsNames, URL’sand IPs
 Registrars

4
Clients & Servers
Clients (Browser)
 Internet Explorer
 Firefox
 Mozilla
 Netscape
 Opera
 Amaya
 AOL
 MSN
Servers
 Apache
 Microsoft
 Netscape
 zeus
 AOLserver
 AV
 JavaWebServer
 Oracle

5
Web Components
 Internet Service Providers
 DomainsNames, URL’sand Ips
 Registrars

6
Internet Service Providers
 EthioTele
 Safaricom
 Phone Company
 AOL
 Earthlink
 Verizone
 NetZero
Basic internet connections
 Dialup/DSL/Cable/Sat
Connects the Clients with the Internet

7
Web Components
 Registrars

8
Web Hosting Services
 Computer (server) farm
 Web server software
 Firewall hardware and software
 IT services
 (Backup, troubleshooting, hardwarerepair)
 Disk space
 Bandwidth / connection to internet
 Routers and switchers
 Email server / storage
Connects the Web Sites to the Internet

9
Web Components
 DomainsNames, URL’sand IPs
 Registrars

Domain’s URL’s and IPs
 Domain name: The specificaddress of a computer on
the Internet
 microsoft.com , gmail.com, wsu.edu.et
 Uniform Resource Locator (URL):
 http://www.microsoft.com/faqs.html
 Internet protocol (IP) address
 192.168.1.1,8.8.8.8

11
Web Components
 Registrars

Domain Registrar
 A company that provides domain name registration
services for a fee.
 Maintain databasewhich maps domain names to IP’s
 Propagate new domain name/IP address information
across the internet

Steps to New Web Site Creation
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines

12 Principles of good web design
1. Visitor-centric, clear purpose
2. Progressive disclosure
3. Displays quickly
4. Browser compatible
5. Intuitive navigation
6. Spelling, grammar, writing
7. Secure (eCommerce)
8. Attractive design, easy to read
9. Cultural bias? (Regional? Domestic? International?)
10. No technical problems (broken links, buggy scripts)
11. Maintainable (separate content from style)
12. Search Engine Accessible

Step 1
 Think!
 Before you do anything , you need to spend time thinking
about the 4W’ s.
 What is the purpose of the web page/site?
 Who is your target audience?
 What will bring your audience back?
 Where will your audience be using the site?
Creating a Web Site

Step 2:Follow The Rules
 To createa web siteyou must followtheses rules:
 Rule 1: YOU are NOT the USER.
 Whatyou understand is not whata user will understand; ask the
users todesign the site the way theywant.
 Rule 2: USERS are NOT PROFESIONALS
 Users will not thinkcarefullyabout the new added features in the
Website withoutyourdirections.
 Rule 3: Give the common user a little control
 Allow the user some choices and the abilityto control colorand
themeson their accounts.

Step 2:Follow The Rules
 Rule 4: Make sure the visual contents of a site relates to its
function.
 A nice-lookingdesign must enforce the website functionality
 Rule 5: Respect GUI and Web interface conventions.
 Designers need to respect conventionsof navigationchoices,
navigation placement, colors, and so on.
 Rule 6: Know and respectthe Web and Internetmedium
constraints.
• Don’t ignorethe differences in the emerging Web medium,
color reproduction, bandwidth limitations, and so on.

Step 3 Go on a Roundup
 .
 Locate images, files, animations, etc. that you might use
and place them in your www directory. It is important
that all files be in the same folder.
 If you are going to work at home or some place other than
the university computer lab, create a www directory on the
hard drive, USB drive or whatever.

Step 4 Use Web Designing Tools
 Open Websitedesigning tools like Java NetBeans ,
Dreamweaver, FrontPage , SeaMonkey,…and start
designing your web pages.
 Save your work often!!!!!!!!
 Typically we name the home page in a web site “index.html”

Some Things to Remember
 You do not have the layout control in a web editor that you do
in Word or PowerPoint.
 Therefore, the web designers used tables to control the layout
out of their pages. If you set the borders of the table to 0 width,
you can't see the outline of the tables in the web browser.
You will get very frustrated if
you try to designa web page
without tables. Your graphics will
not appear whereyou wantthem.

Note: Naming Web Files:
 Use all lower case (it will be easier to communicate the URL to
others if it is all lower case).
 DO NOT have spaces in file names (some old browsers cannot
handle spaces. You should rename graphic files if they have
spaces)
 Try to keep file names as short as possible (this prevents errors
in typing in URLs)
 URL(Universal Resource Locator)= Site Address
ex: URL of hotmail is : www.hotmail.com

Types of Web Pages
Any web site composed from a set of web pages:
Some of those pages are static (abstract) pages whileother pages are dynamics
(proactive) pages.
A dynamic page that will
take user name and
password and check it to
allow login.
A static page with no
interaction that user will
only read and close if.

23
Web Development Languages & Tools
1. HTML/DHTML/XHTML
2. Java
3. Web Design Tools e.g. Frontpage, Dreamweaver , Net
beans ...etc
3. Scripting Languages
e.g. VBScript, Java script
4. Cascading Style Sheets
5. XML
6. …more!!!

24
What are the elements of a web page?
 Title – 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

25
Table /
Navigational tools
Elements of a web page
Document title
Address (URL)
Banner
Web page title
Footer /
Copyright
Graphic elements
Hyperlinks
Content
Search tool
Navigational
tools
Frames
Hyperlinks

26
Some tips in web page design
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
 Include copyright and contact information on each
page

27
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

28
Don'ts in web page design
 Don’t crowd your pages – balance text, graphics
and space
 Don’t overuse graphics, animations and other
bleeding edge technology – use them to support
and enhance but not to overpower your work
 Don’t use background that distracts the user or
makes text unreadable

29
Don'ts 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

30
How to evaluate web sites ?
 Accuracy – free from error and alteration
 Authority – credibility of author / publishing body
 Objectivity – creator’s point of view / bias
 Currency – timeliness of information
 Content – scope and depth of material
 Design – style, structure, and functionality
 Accessibility – availability of the resources

31
Accuracy
 How reliable is the information?
 Is it the original document?
 Are there any errors or alterations on the page?
 Is there a way to verify authenticity of the content?
Authority
 Who is the author?
 Is the author credible?
 Who is the publisherof the page?
 Is it a reputable publishing body?

32
How to evaluate web sites?
Objectivity
 From which point of view is the information
presented?
 Does it show a minimum of bias?
 Is it trying to sway opinion?
 Is it in line with the aims or purpose of the web site?
Currency
 Is the information dated?
 Is it timely?
 Is it up-to-date?
 Are the links current and still available?

33
Content
 What is the scope of the web site?
 How in-depth are the materials?
 Is it in line with the purposeof the web site?
 Does it provide meaningful and useful information?

34
Design
 Does it follow the design principles?
 Is the site easy to read and navigate?
 Is there a balance between style and functionality?
Accessibility
 Can it be viewed using different browsers?
 Does it require a special program to read the content?
 Is the information readilyavailableon the web site?

35

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

Five step process for effective website design
1. Analyse
• Info / content
• Target Audience
• Top 10 Checklist
2. Organise
• Navigation
• Content
• Page layout
• Page design
3. Develop
• Webpage layout
• Site layout
• Webpage construction
• Graphics techniques
4. Implement
• User Interaction
• Final Checklist
• FTP
• Fine Tune
5. Maintain
• Marketing
• Optimisation
• Traffic analysis

Chapter 4 Web design tech in formation technology msc class .pdf

Chapter 4 Web design tech in formation technology msc class .pdf

Recommended

Recommended

More Related Content

Similar to Chapter 4 Web design tech in formation technology msc class .pdf

Similar to Chapter 4 Web design tech in formation technology msc class .pdf (20)

Recently uploaded

Recently uploaded (20)

Chapter 4 Web design tech in formation technology msc class .pdf