CCS PPT 10.pptx

2
Using the World Wide Web – What is
the Web?
Internet
• Internet is a vast collection of computers all over
the world that stores information and send it out.
• Internet Service Provider (ISP) gives access to
the internet.
– Examples of ISP are Comcast, AOL, MSN, Hotmail,
ATT, Earthlink, Compuserve, etc.
Modem
• Is a device which connects public internet with
your home computer.

3
the Web?
Browser
•
• A software which is used to see pages on the web. Example
Internet Explorer, Firefox, Mozilla, Safari, Konqueror, Opera,
Netscape, America Online.
Browser Statistics Month by Month -
http://www.w3schools.com/browsers/browsers_stats.asp
Web address or url (uniform resource locator)
•
•
Address of a webpage into a browser.
Example http://www.depaul.edu/admission/index.asp
– http:// hypertext terminal protocol tell the browser that it will look for a
webpage
– www World Wide Web tell the browser that
– depaul.edu is the domain name
– admission/index.asp is a path telling the browser where to find the
page

4
the Web?
Details of the domain name
• .biz – businesses
• .com – commercial sites
• .info – information sites similar to .com sites
• .org – organizations, usually non-profits
• .edu – educational, accredited post-secondary
institutions only
• .gov – government, United State government only

5
Using the World Wide Web – How to
search the internet
• There are two basic kinds of search tools
– Search engines: example Google, Yahoo, Ask
Jeeves, Altavista
– Directories: group web pages into subject
categories, example Yahoo directory, Google
directory

6
Making Webpages - What Are
Webpages Anyway?
• Is a representation of a document which resides
at a remote site
• Basic language to create a webpage is HTML
which stands for Hyper Text Markup Language
• Pages can be created using a web authoring
software packages
– Nvu
– Adobe GoLive
– Macromedia Dreamweaver
– NetObjects Fusion
– Microsoft Frontpage

7
Webpages Anyway?
• A webpage generally consists of the following:
– Text
– Color
• Background
• Text
– Links
• Internal Links
• External Links
• Email Links
• Anchors

8
Webpages Anyway?
– Graphics
– Tables
• Absolute table width: if you set it to 400 pixel, the
table size is fixed in the browser window
• Relative table width: table will resize according to
the size of the browser window
– Frames is a stationary part of a web page that
stays put while you scroll through another part
• Table vs Frames
– http://www.noipo.org/index.php?id=189
– http://
www.freewebmasterhelp.com/tutorials/framestables

9
Making Webpages – Things to Know
Before You Begin Your Site
Organizing your files
• Organizing by folders
– Most smaller sites can be contained in one folder
– Site with 30 or 40 files which graphics, sounds,
animation should have subfolders based on the
navigation and content
Naming your files
• Use all lowercase letters
• Use only letters or number no special characters
• Never use a space

10
• All webpage must end in extensions like *.htm, *.html,
*,asp, *.aspx
• Keep filename as short as possible
• Example
– Index.html
– Contact.html
Organizing by name
• Add a title to the start of each filename so that it can
describe its type
• Example
– workshop.html is a webpage
– worktitle.gif, workhead.gif,workbkg.gif are picture files

11
Saving and titling pages
• Save each page and assign it a name
example first page is saved as index.html
or default.html
• Assign a title to each page
– This is different from naming the page
– The title is the text which appears in the title
bar of the window

12
Server
•
•
Webpages are hosted (stored) in server
Server is a computer connected to the internet which
allows webpages to be viewed through a browser
Example
– Godaddy a webhosting company provides server space
– A domain name (web address) is bought by the company
example www.promoteeducation.com
– No account holders of the company can have the same domain
name. It is unique and cannot be duplicated
– Go to http://www.godaddy.com and type in a domain name
under “Domain Name Search" and then select the extension
example .com, .org etc
•

13
Planning Ahead
•
•
• Your web audience
– Who is the target audience
– What do I want the site to accomplish
Making an outline
– Write an outline of the site
– How does the client or you envision the site
Collecting and storing material
– Collect all the content
– Scan pictures, collect graphic files and text files
– Create folders and subfolders and label it according to the type
of the data. Example
• All images in a folder named images
• All the text files about About Us section in a folder name AboutUs

14
Design Issues on the Web - Basic
Design Principles for Nondesigners
Alignment
• Items on the page should be lined up with
each other
• Choose one alignment and use it on the
entire page
• Beginning designers should avoid
centering everything

Design Issues on the Web - Basic Design Principles
for Nondesigners
15

16
Proximity
• Refers to the relationships that items
develop when they are close together, in
close proximity
• Items physically far from each other do not
have a relationship
• Heading, pictures and text should be well
in proximity with each other

17

18
Repetition
• There are certain elements in websites
which are repeated. Example
– Navigation buttons, color, style illustration,
layout, typography which unifies the entire site
• The visitors do not have to learn their way
around on every new page

Design Issues on the Web - Basic Design
Principles for Nondesigners
19

20

21
Contrast
• Contrasts draws your eye into a page, it pulls
you
• Contrasting elements guide your eyes around
the page, create a hierarchy of information, and
enable you to skim through the vast array of
information and pick out what you need
• Create a focal point
– There must be a dominating force and the other
elements follow a hierarchy from that point down, this
focus is created through contrast
– Contrast helps to define what is important

22

23
Design Issues on the Web - Designing
the Interface and Navigation
Interface Design
• A good website design begins with a good site
plan
• For the initial phase keep the plan simple
• Plan to make a list of the information to be
included in the site
• Make sketches on paper and creates mock up of
how you want to organize the information
– Users do not like to scroll
• Create a site map / chart of the web pages

Design Issues on the Web - Designing the
Interface and Navigation
Home
Page 1 Page 2 Page 3
Page 1.1 Page 1.2
24

25
• Use horizontal format because most of the
monitors used are wider than they are tall
• Some of the display area is occupied by the
browser toolbar which mean that live area of a
web page is even more horizontal that the
monitor itself
• Set the resolution of the web site to be 800 x
600 so that all the users can view the
• Most commonly used layout are
– Two Column Layout
– Three Colum Layout

26

27
Navigation Design
• Design a navigation schema and keep it simple
– navigation bar across the top
– a navigation bar on the left (the two most common
styles),
– an image map (an image divided into separate links to
other pages)
• A user should be able to reach the desired page
within three clicks

• navigation bar across the top
• a navigation bar on the left (the two most
common styles)
28

• an image map (an image divided into separate
links to other pages)
29

• Create an index/site map of the website so that
people can find what they are looking for easily
on your web site
30

• Select navigation colors to match your website
but make sure to keep the text/icons consistent
and repeat it so that visitors do not get confuse
31

32
• Check your links and test the navigation
– Internal or local links within the site
• This applies when you have depth of information
within broader areas.
– External or remote links to someone else's
site

33
Recognize Good and Bad Design
Bad Design
• Check the links on your site, do not leave any
broken links
• Site should be viewable in standard browser, do
not ask the visitor to set pixel width or what font
size to set as text default
• Do not use big fonts, unattractive colors and big
buttons with long text
• Avoid using Pop Ups
• Do not use huge flash intro screen
• Horizontal scrolling annoys user

34
• Slow load time problems by not using too many
graphics, animations and pictures
• Poor spelling
• Avoid lots of moving things
– Banners flashing
– Graphics twirling
– Words scrolling, with a string of fireworks chasing
your mouse pointer
• Do not use plenty of music, it annoys the visitor
every time he visits
• The site should have contact information

35
Good Design
• Resolution
– A site should be viewable on all monitors. Keep the
site resolution to 800 x 600
• Font
– Size should be not bigger than 12
– Most commonly used fonts are
• Time New Romans
• Ariel
• Verdana

36
•
•
•
• Color
– The color contrast should not have more than 3 colors
– The font color should be consistent in the entire site and should
not be more than 2 colors
Ease of Navigation
– Should be consistent and obvious so that the visitors do not
have to spend much time to figure out the navigation
Load Time
– A page should load up in seconds. Do not use heavy graphics,
pictures and animation
Browser Compatible
– The site should be compatible in all mostly used browsers
– Most common browser are Internet Explorer and Firefox

Color, Graphics and Type - Color
on the Web
The aesthetics of color
•
•
• The color chosen should create an
overall feeling and personality on
the site
Text should always have a good
contrast between the type color
and the background color
For a commercial site do not use
your competitors color schema
RGB Color
•
•
•
• RGB stands for Red, Green and
Blue.
Monitors create their images on
the screen by emitting red, green,
and blue light
Each color has a Hex value
Example Black has a Hex code of
00,00,00
37

38
Color, Graphics and Type – Graphics
Definition You Must Know
File Formats
• GIF – graphical interface format
– Cross platform meaning that all computers can view
them
– Are compressed make a file smaller in file size
– Best used for logos, text as graphics, cartoons etc
• JPEG – Joint Photographic Experts Group
– Like GIF they are cross platform and compressed
– But in the process of compression it removes data
from the graphic image to make the file size smaller
– Best used for photographs

39
Color, Graphics and Type –
Typography on the Web
Legibility
• The text, buttons, headlines, signs etc should be easy to
recognize
– Do not use all caps
– Use and design graphics which are easy to read
Readability
• The text should be readable, some guidelines
– Use a font which is easy to read like Sans Serif
– Font size should not be too big, not bigger than 14-18 points
– Font size should not be too small, not below 8-10 point size
– Never set large amount of text in bold, italic, all caps, small caps,
scripts etc.

40
– Avoid very long line of text, long lines make it difficult
for the reader’s eye to find the beginning of next line
on the screen
– Contrast between the text and the background, black
text on a white background is the best
Breaking typographic rules
• Be conscious
– If it is hard to read then change the font type
• Page text as a graphics
– Text as graphics is workable but is not traced by
search engines
– It is more time consuming to revise or update

41
• Use Cascading Style Sheet
– Style Sheets in any program allow you to
apply consistent formatting of text to the entire
web pages
– Cascading refers to how style sheets are
implemented

42
You're Done - Now What?
Test and Fix Your Website
• Site Management Software
– FrontPage
– Dream weaver
– Adobe Go Live
• Testing you site
– Before uploading the site to the world it is important to
check how the site works
– Open the first page and test the links to all the other
pages
– Check all the sites offline using a browser

43
You're Done - Now What?
– Watch someone else browse your site
– Different browsers will give different looks
• Fixing your site
– Different browsers and HTML authoring
software have different output
• Spacing problems
• Table are out of whack
• Graphics don’t appear
• Page links don’t work

44
You're Done - Now What? -
• Fix it tips
– Biggest problem is to add spaces where you
want it and in the amount you want
• Create a CSS file and specify how many pixels
you need between line
• Insert transparent gifs between two items, then
specify its width or height to the number of pixel
you want
– This tip is mostly used in website development
• Add extra characters like periods and then hide
them the same color as the background

45
You're Done - Now What? - How
to Upload and Update Your Site
• Gather all your files which will be send to
the service provider. Make sure to
remember the following points
– Send every file you site needs
– Don’t send any files your site doesn't need
– Make sure all your files are named properly
• Every file should have an extension
• Never use a space in a file or folder name

46
• Uploading files
– Get software for uploading files
– Ask your provider or hot for your FTP (File
transfer Protocol) information
• Host name – ftp.domain.com or string of numbers
• Host type – window or unix
• User id
• Password
• Directory path – where you site will be stored

47
• Test your site online as soon as it goes
online
– Make note of want went wrong in the browser
– Make changes to the file using a web
authoring software

48
and Why to Register Your Site
• Search Tools
– Pay a service on the web to enter your URL in
many search engines and directories at once
• Google
• Yahoo
• Beaucoup
• Search.com
– Go to Altavista: www.altavista.com and in the
edit box enter link:yourdomain.com

49
and Why to Register Your Site
• What search tools look for
– Title of your page
– First paragraph of your home page
– Meta tags

CCS PPT 10.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a CCS PPT 10.pptx

Semelhante a CCS PPT 10.pptx (20)

Mais de DrRavneetSingh

Mais de DrRavneetSingh (10)

Último

Último (20)

CCS PPT 10.pptx