The WWW and Web Page Design - PowerPoint PPT Presentation


Title: The WWW and Web Page Design


1
The WWW and Web Page Design
  • Kin 260
  • Jackie Kiwata

2
Overview
  • The WWW
  • How it works
  • Terminology
  • Domains
  • Designing Websites
  • In general
  • WYSIWYG
  • Steps

3
What is the World Wide Web?
  • Internetwork that uses TCP and IP
  • From Intro Lecture
  • An architectural framework for accessing linked
    documents spread over millions of machines
  • Began in 1989 at CERN, the European center for
    nuclear research

4
How the Web Works
  1. User opens web browser and clicks on
    calstatela.edu hyperlink
  2. Browser follows the hyperlink by sending request
    to web server at calstatela.edu
  3. Web server returns requested page, which is
    displayed in clients browser

5
Terminology
  • Browser fetches page requested, interprets text
    and displays formatted page on the screen
  • Hyperlink A string of text that contains the
    address to another page
  • Also known as a Uniform Resource Locator (URL)
  • Web Server a computer running software that
    stores pages of a website and handles requests
    from clients

6
DNS
  • Domain Name System
  • Handles the naming of websites on the WWW
  • The network understands only numerical addresses
    in the form of xxx.xxx.xxx.xxx
  • Called an IP address
  • e.g. 128.66.721.24
  • But 12-number addresses are hard for people to
    remember, so use DNS to assign meaningful names
    and match to numerical address

7
Domain
  • A name that identifies a computer on the WWW
  • Every domain name ends in a Top-Level Domain
  • 3 or more character generic name or 2 character
    country code
  • e.g. .com, .org, .net, .jp, .au
  • Immediately to the left of the TLD is the
    Second-Level Domain
  • E.g. calstatela.edu, where calstatela is SLD
  • An address may also contain Subdomains, which are
    left of the SLD
  • e.g. get.calstatela.edu
  • Domain levels are always separated by periods

8
Anatomy of a URL
  • http//www.calstatela.edu/faculty/jkiwata2/index.h
    tml

second-level domain
Folder path
HTML page
Top-level domain
Example http//cs.ucla.edu/csd/people/graduates.h
tml
9
Website Design Basics
  • The Golden Rule Usability
  • Visitors are looking for answers
  • Design your website to give your visitors an
    answer quickly!
  • All other design elements are secondary
  • If a visitors needs are not filled quickly, they
    will look elsewhere

10
Creating Websites
  • Create in one of two ways
  • Code pages by hand
  • Use a What You See is What You Get (WYSIWYG)
    editor
  • Today, we will use a WYSIWYG (Google Sites)
  • Web authoring tool
  • a user interface that allows the user to view
    something very similar to the end result while
    the document is being created
  • e.g. a user can view on screen how a web page
    will look while it is being created in the
    WYSIWYG

11
Steps to creating a website
  • Plan site architecture
  • Plan page layout
  • Prepare content
  • Pick typography color schemes
  • Publish
  • Test
  • Well use the example of creating a personal
    website for professional use.

12
Site Architecture
  • How pages are linked relative to one another
    within a website
  • Needs of target audience should guide the
    organization of pages
  • Draw architecture by hand or in Word

13
Planning Page Layout
  • How navigation and content are arranged on a page
  • Organize layout so that
  • content is clearly communicated
  • navigation is thoughtful and intuitive
  • e.g. Navigation is traditionally located at the
    top of the page and/or on the left
  • If put elsewhere, users may get confused and
    frustrated

14
Prepare Content
  • Web design adage content is king
  • Website should clearly communicate content to
    target audience
  • Content should
  • Be appropriate for target audience
  • Focus on the core message
  • Content should not
  • Be cluttered
  • Be without purpose
  • Albert Einstein Everything should be as simple
    as possible, but no simpler
  • Communicate only as much to get the message
    across

15
Pick Text Color
  • Guidelines are similar to picking the design
    scheme for PowerPoint slides
  • Use simple, logical color palettes
  • No flashy graphics or annoying animations
  • Text should be easy to read

16
Testing
  • Proofread content for grammatical or spelling
    errors
  • Test all links to ensure integrity of site
    navigation and external links
  • Access site by typing in URL rather than viewing
    page through site editor

17
In short
  • According to http//www.webpagesthatsuck.com,
    dont commit the following mistakes
  • We've designed our site to meet our
    organization's needs (more sales/ contributions)
    rather than meeting the needs of our visitors.
  • It takes longer than four seconds for the man
    from Mars to understand what our site is about.
  • Our site looks like we've never seen another web
    site.
  • We use design elements that get in the way of our
    visitors.
  • Our site doesn't make us look like credible
    professionals.

18
Examples of websites that suck
  • http//www.alternativetransportservices.co.uk
  • http//www.tallyhouniforms.com/
  • http//www.kcthecatalog.com/
  • Can you figure out why?

19
Using Google Sites
20
1. Access
  • Log into Gmail account
  • Use top menu bar to access Sites

21
2. Create Site
  • Give your site a name
  • See the actual web address here
  • This section can be changed later

22
3. Managing your site
  • Home base looks like this

23
4. Adding pages
  • From the Site Manager, click on Create New Page

Select Web Page as type of page
We wont use the other 4 types of pages in the lab
24
4a. Assign folder path
  • Choose the directory according to site
    architecture
  • Notice the differences between the two

25
5. Navigation Layout
  • From the Site Manager, click on Site Settings gt
    Change Appearance

Get the Appearance page, where you can edit
Navigation, Layout, Colors and Themes
26
5a. Appearance
  • Site Layout
  • Navigation click edit to add links
  • Sidebar Items

27
5b. Navigation
  • Shows pages currently in navigation
  • Changes order displayed
  • Removes navigation link

Adds another navigation link
28
5c. Layout
  • Conventional layout as default
  • Modifies conventional layout

29
6. Creating content
  • From Site Manager,
  • 1. Click on page to edit
  • 2. Edit Page button

30
6a. Links
  • Four types
  • Internal Page
  • Your website pages
  • Link to these pages from your website navigation
    or from internal page links
  • External URL
  • Offsite web address
  • Email Address
  • Instead of http// , uses mailto
  • Uploaded File
  • Files without markup (non-html, -xhtml, -css
    files)
  • e.g. .doc, .pdf, .xls, .ppt

31
6b. Creating Links
  1. Highlight content
  2. Insert gt Link

32
6c. External vs. Internal Links
  • External Link options

Internal Link options
33
6d. Email Address
  • 1. Highlight text containing email address (must
    have _at_).
  • 2. Insert gt Link
  • 3. Editor will automatically create email address
    link

34
7. Colors Themes
  • Access from Appearance Menu

35
8. Testing
  • View website without editor by logging out and
    typing in web address

Editor
No Editor
36
References
  • WWW
  • Tanenbaum, A. S. (2003). Computer Networks. Upper
    Saddle River, NJ Prentice Hall
  • Web Design
  • Mumaw, S. (2002). Simple Websites. Gloucester,
    MA Rockport
  • Google Sites Help Files
  • http//sites.google.com/support/?hlen
View by Category
About This Presentation
Title:

The WWW and Web Page Design

Description:

The WWW and Web Page Design Kin 260 Jackie Kiwata Overview The WWW How it works Terminology Domains Designing Websites In general WYSIWYG Steps What is the World Wide ... – PowerPoint PPT presentation

Number of Views:78
Avg rating:3.0/5.0
Slides: 37
Provided by: Jackie163
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: The WWW and Web Page Design


1
The WWW and Web Page Design
  • Kin 260
  • Jackie Kiwata

2
Overview
  • The WWW
  • How it works
  • Terminology
  • Domains
  • Designing Websites
  • In general
  • WYSIWYG
  • Steps

3
What is the World Wide Web?
  • Internetwork that uses TCP and IP
  • From Intro Lecture
  • An architectural framework for accessing linked
    documents spread over millions of machines
  • Began in 1989 at CERN, the European center for
    nuclear research

4
How the Web Works
  1. User opens web browser and clicks on
    calstatela.edu hyperlink
  2. Browser follows the hyperlink by sending request
    to web server at calstatela.edu
  3. Web server returns requested page, which is
    displayed in clients browser

5
Terminology
  • Browser fetches page requested, interprets text
    and displays formatted page on the screen
  • Hyperlink A string of text that contains the
    address to another page
  • Also known as a Uniform Resource Locator (URL)
  • Web Server a computer running software that
    stores pages of a website and handles requests
    from clients

6
DNS
  • Domain Name System
  • Handles the naming of websites on the WWW
  • The network understands only numerical addresses
    in the form of xxx.xxx.xxx.xxx
  • Called an IP address
  • e.g. 128.66.721.24
  • But 12-number addresses are hard for people to
    remember, so use DNS to assign meaningful names
    and match to numerical address

7
Domain
  • A name that identifies a computer on the WWW
  • Every domain name ends in a Top-Level Domain
  • 3 or more character generic name or 2 character
    country code
  • e.g. .com, .org, .net, .jp, .au
  • Immediately to the left of the TLD is the
    Second-Level Domain
  • E.g. calstatela.edu, where calstatela is SLD
  • An address may also contain Subdomains, which are
    left of the SLD
  • e.g. get.calstatela.edu
  • Domain levels are always separated by periods

8
Anatomy of a URL
  • http//www.calstatela.edu/faculty/jkiwata2/index.h
    tml

second-level domain
Folder path
HTML page
Top-level domain
Example http//cs.ucla.edu/csd/people/graduates.h
tml
9
Website Design Basics
  • The Golden Rule Usability
  • Visitors are looking for answers
  • Design your website to give your visitors an
    answer quickly!
  • All other design elements are secondary
  • If a visitors needs are not filled quickly, they
    will look elsewhere

10
Creating Websites
  • Create in one of two ways
  • Code pages by hand
  • Use a What You See is What You Get (WYSIWYG)
    editor
  • Today, we will use a WYSIWYG (Google Sites)
  • Web authoring tool
  • a user interface that allows the user to view
    something very similar to the end result while
    the document is being created
  • e.g. a user can view on screen how a web page
    will look while it is being created in the
    WYSIWYG

11
Steps to creating a website
  • Plan site architecture
  • Plan page layout
  • Prepare content
  • Pick typography color schemes
  • Publish
  • Test
  • Well use the example of creating a personal
    website for professional use.

12
Site Architecture
  • How pages are linked relative to one another
    within a website
  • Needs of target audience should guide the
    organization of pages
  • Draw architecture by hand or in Word

13
Planning Page Layout
  • How navigation and content are arranged on a page
  • Organize layout so that
  • content is clearly communicated
  • navigation is thoughtful and intuitive
  • e.g. Navigation is traditionally located at the
    top of the page and/or on the left
  • If put elsewhere, users may get confused and
    frustrated

14
Prepare Content
  • Web design adage content is king
  • Website should clearly communicate content to
    target audience
  • Content should
  • Be appropriate for target audience
  • Focus on the core message
  • Content should not
  • Be cluttered
  • Be without purpose
  • Albert Einstein Everything should be as simple
    as possible, but no simpler
  • Communicate only as much to get the message
    across

15
Pick Text Color
  • Guidelines are similar to picking the design
    scheme for PowerPoint slides
  • Use simple, logical color palettes
  • No flashy graphics or annoying animations
  • Text should be easy to read

16
Testing
  • Proofread content for grammatical or spelling
    errors
  • Test all links to ensure integrity of site
    navigation and external links
  • Access site by typing in URL rather than viewing
    page through site editor

17
In short
  • According to http//www.webpagesthatsuck.com,
    dont commit the following mistakes
  • We've designed our site to meet our
    organization's needs (more sales/ contributions)
    rather than meeting the needs of our visitors.
  • It takes longer than four seconds for the man
    from Mars to understand what our site is about.
  • Our site looks like we've never seen another web
    site.
  • We use design elements that get in the way of our
    visitors.
  • Our site doesn't make us look like credible
    professionals.

18
Examples of websites that suck
  • http//www.alternativetransportservices.co.uk
  • http//www.tallyhouniforms.com/
  • http//www.kcthecatalog.com/
  • Can you figure out why?

19
Using Google Sites
20
1. Access
  • Log into Gmail account
  • Use top menu bar to access Sites

21
2. Create Site
  • Give your site a name
  • See the actual web address here
  • This section can be changed later

22
3. Managing your site
  • Home base looks like this

23
4. Adding pages
  • From the Site Manager, click on Create New Page

Select Web Page as type of page
We wont use the other 4 types of pages in the lab
24
4a. Assign folder path
  • Choose the directory according to site
    architecture
  • Notice the differences between the two

25
5. Navigation Layout
  • From the Site Manager, click on Site Settings gt
    Change Appearance

Get the Appearance page, where you can edit
Navigation, Layout, Colors and Themes
26
5a. Appearance
  • Site Layout
  • Navigation click edit to add links
  • Sidebar Items

27
5b. Navigation
  • Shows pages currently in navigation
  • Changes order displayed
  • Removes navigation link

Adds another navigation link
28
5c. Layout
  • Conventional layout as default
  • Modifies conventional layout

29
6. Creating content
  • From Site Manager,
  • 1. Click on page to edit
  • 2. Edit Page button

30
6a. Links
  • Four types
  • Internal Page
  • Your website pages
  • Link to these pages from your website navigation
    or from internal page links
  • External URL
  • Offsite web address
  • Email Address
  • Instead of http// , uses mailto
  • Uploaded File
  • Files without markup (non-html, -xhtml, -css
    files)
  • e.g. .doc, .pdf, .xls, .ppt

31
6b. Creating Links
  1. Highlight content
  2. Insert gt Link

32
6c. External vs. Internal Links
  • External Link options

Internal Link options
33
6d. Email Address
  • 1. Highlight text containing email address (must
    have _at_).
  • 2. Insert gt Link
  • 3. Editor will automatically create email address
    link

34
7. Colors Themes
  • Access from Appearance Menu

35
8. Testing
  • View website without editor by logging out and
    typing in web address

Editor
No Editor
36
References
  • WWW
  • Tanenbaum, A. S. (2003). Computer Networks. Upper
    Saddle River, NJ Prentice Hall
  • Web Design
  • Mumaw, S. (2002). Simple Websites. Gloucester,
    MA Rockport
  • Google Sites Help Files
  • http//sites.google.com/support/?hlen
About PowerShow.com