The Internet, The World Wide Web and Website Design

10/22/2010Diploma in Education 2010

1950s –The threat of nuclear war, and the establishment of National Aeronautics and Space Administration (NASA) and Advanced Research Projects Agency (ARPA)

1960 – 1968 – Conducted research in the areas of human interaction, distributed communication networks, and information processing

1969 – The first network, formed between University of California (Los Angeles and Santa Barbara), Stanford, and University of Utah

The Opte Project - http://www.opte.org/maps/

A series of interconnected computer networks.

The Web, is a way of accessing information over the medium of the Internet.

It is an information-sharing model that is built on top of the Internet.

The Web uses the HTTP protocol, only one of the languages spoken over the Internet.

The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages that are linked to each other via hyperlinks. Web documents also contain graphics, sounds, text and video.

The Web is just one of the ways that information can be disseminated over the Internet.

The Internet, not the Web, is also used for e-mail, news groups, instant messaging and FTP. So the Web is just a portion of the Internet, albeit a large portion, but the two terms are not synonymous and should not be confused.

Your Computer

Web Page EditorFTP

Web Server/Host

Access website using the website address and browser (e.g., Internet Explorer)

Thanks Mrs Wood-Jackson for these photos and slide

The Internet does not have a central authority.

There are organizations which develop technical aspects of the network and set standards for creating applications on it, but no one governing body or government is in control.

Who Owns The Internet?

Computer hardware – A computer and a modem

Communications link – A phone line or cable (wireless router) and satellite dish.

An Internet Service Provider (ISP)

Computer software – an Internet browser

To connect to the Internet you need the following:

Also know as:

HTML Editor

WYSIWG (What You See Is What You Get)

No need to know HTML code

Works like a word processor

Software

Dreamweaver

FrontPage

Netscape Composer (now Sea Monkey)

Microsoft Word

Your Computer

Google pages, Word Press,

Blogger

Web Server/Host

Access website using the website address and browser (e.g., Internet Explorer)

http://sta.uwi.edu/fhe/soe/soe.htm

Hyper Text Transfer Protocol - Language

used by your browser to access interlinked

documents

Name of theweb server/host

Slash indicates you are requesting access

to a folder on the web server

Name of the file which may be followed by

an extension

.html – hypertext markup language (web page)

.org – organizational website

.gov – government agency

.mil – military agencies

.com – business

.edu – university

.net – network

.tt – Trinidad and Tobago

Internet Explorer

Mozilla Firefox (formerly Netscape)

Safari

Opera

Google Chrome

Accessing inappropriate materials Safety and privacy issues for studentsOnline predatorsMarketing to children Privacy issues

Fraud Computer viruses and hacking Email attachmentsDownloaded files and programmes with virusesMemory stick

Copyright and plagiarism

ACCESSING INAPPROPRIATE MATERIALS

SAFETY AND PRIVACY ISSUES

Firewalls Norton Internet Security

Spyware Doctor

Filtering software NetNanny

Cyber Sitter

Bookmarking From browser

Delicious

Web whacking

Teach the rules I will not give out personal

information (including pictures) I will inform an adult if I come

across anything that makes me feel uncomfortable

I will never meet someone I meet online without first clearing it with an adult

I will not respond to messages that are mean or make me feel uncomfortable

I will not give out any Internet passwords.

I will be a good online citizen and not do anything that hurts other people or is against the law

SAFETY AND PRIVACY ISSUES

COPYRIGHT AND PLAGIARISM

Manage Cookies

Viruses

Keep virus protection software up to date

Download only reputable sites

Never open e-mail attachments from unknown senders and/or until you have confirmed their intent

Teach the rules Request permission for

clearly copyrighted sites

Reference the site with URL and owner name for sites where the copyright is not clear

Use sites to check for and prevent plagiarism Turnitin.com

MyDropBox.com

Eduscapes - http://eduscapes.com/tap/topic32.htm

Authority – Who says? Know the author.

Objectivity – Is the information biased? Think about perspective.

Authenticity – Is the information authentic? Know the source.

Reliability – Is this information accurate? Consider the origin of the information.

Timeliness – Is the information current? Consider the currency and timeliness of the information.

Relevance – Is the information helpful? Think about whether you need this information.

Efficiency – Is this information worth the effort? Think about the organization and speed of information access.

BIG 6 SUPER 3

The Big 6 - http://www.big6.com/

1. Task Definition

2. Information Seeking Strategies

3. Location and Access

4. Use of Information

5. Synthesis

6. Evaluation

1. Task Definition

2. Information Seeking Strategies

3. Location and Access

Boolean Terms And

Or

Not

Words in “quotes” – search for exact word/phrase

Wildcards * – smok* for smoke, smokers, smoking, smokes, smoked, smoking, etc.

Add “What is…?” for definition

Identify yourself Include a subject line Avoid sarcasm Respect others’ privacy Acknowledge and return messages promptly Copy with caution No spam/junk mail Be concise Use appropriate language Use appropriate emoticons Use appropriate intensifiers to help convey

meaning

Web Writing– Research

F-Shaped Pattern for Reading Web Content

Source: Jacob Nielsen, Ph. D.

http://www.useit.com/alertbox/reading_pattern.html

Differences between Age Groups

Animationand

sound effects

Mine sweepingfor links

Advertising Scrolling Reading

Kids

Teens

Adults

Source: Jacob Nielsen, Ph. D.

http://www.useit.com/alertbox/20050131.html

Web Writing Guidelines

Web content should be Scannable Structure informationUse the inverted pyramid model - Most important

information firstUse bullets, numbered lists, and tablesUse paragraph breaks

Add headlinesBreak up information on pages with more than 1 ½ screen

lengthsUse bold and colored headlines

Show numbers as numerals unless it is representing a specific fact

Inverted Pyramid Model

HeaderSubheader

Content

Small

Web Writing Guidelines

Web content should be Concise Cut out overly detailed information

Tighten language

Sentences should not exceed 17 words

Paragraphs should have 4-5 sentences

Web pages should stay between 5-8 screen lengths

Use bullets/lists

Web Writing Guidelines

Use humor carefully Graphics and text should complement each other Avoid jargon, abbreviations, and acronyms Remember writing conventions Grammar Spelling Punctuation Organization of ideas

Image types – .gif

Pronounced “giff” Graphic Interchange

Format Best for solid, flat colors 256 color limit (8-bit) Cross-platform Small file size which allows

for fast transmission and loading

Allows for portion of the image to be transparent displaying page background color

Can be animated (Adobe Image Ready)

Image types – .jpeg

Pronounced “jay peg” Joint Photographic

Experts Groups Larger than .gif files Best for photos or

illustrations with subtle color changes, depth, lighting effects

16.7 million colors (24-bit)

Cross-platform Transparency is not

possible Cannot be animated

Understanding File Sizes

bit – smallest unit of information

1 bit = 8 bytes

1024 bytes = 1 kilobyte

1024 kilobytes = 1 megabyte

Web graphics should be in kilobyte sized

Small graphics – byte sized

Free Image Websites

Free Educational Clip Art -http://www.theteachersguide.com/Freebies.html

Pics4Learning - http://pics.tech4learning.com/

Teacher Files -http://www.teacherfiles.com/clip_art.htm

PD Photo.org - http://pdphoto.org/

Wikimedia Commons -http://commons.wikimedia.org/wiki/Main_Page

Web Design Tips

Alignment – Left align text Proximity – keep related items in close proximity – use line breaks and

paragraph breaks where appropriate Repetition – repeat elements on your web pages to tie it all together Colors Styles Illustrations Format Layout Typography

Contrast elements on the page so readers will understand the hierarchy Create a focal point (usually banner)

Spell check

The Non-Designer's Web Book

Use Sans Serif Fonts

Arial

Verdana

Trebuchet

Calibri

Image taken from: http://en.wikipedia.org/wiki/Serif

Special Thanks to Mrs Wood-Jackson

•For the screen-captures and slides

•For the photos, and

•For her excellent guidance