ITEC 745

Instructional Web Authoring I

Week 1

• Required Entry Skills• Grading

– Homework + Midterm Exam + Final Project– No final exam

• Overview of Course Goals– Fluency with XHTML and CSS– Use of Adobe Dreamweaver (industry standard tool)– Using instructional design principles to craft

effective web sites to support the needs of learners, instructors, and instructional designers

• Academic Honesty

ITEC 715Overview

• No required textbook– The important Web

standards and documentation are all freely available online

• Recommended book– Sams Teach Yourself

Web Publishing with HTML and CSS in One Hour a Day by Laura Lemay and Rafe Colburn; Sams Publishing, 2006, ISBN: 0-672-32886-0

ITEC 715Overview (cont.)

• Each person, introduce yourself– Your name– How far along are you in your studies?– Any prior ID experience?– Any prior web authoring experience?– Any particular areas of interest?

• Take digital photos (we’ll need them for next week)

ITEC 715Introductions

• Instructor: Ray Cole• Some companies where I’ve helped to

create e-learning:

ITEC 715Who Am I?

Instructional Uses of the Web(examples)

Instructional Uses of the Web

Examples:• http://www.sfsu.edu/

– School presence: info, identity…

• http://webcast.berkeley.edu/– Course presence (ILT): syllabus, lectures, handouts,

supplementary materials…

• http://home.znet.com/ikorn/teaching.html– Instructor presence: Biography, CV (resume), courses taught,

contact info, special projects…

• http://www.ddiworld.com/WBT-course-demo/demo.html– Web-based training (WBT), also known as e-learning, or

sometimes online learning

Terminology: The Basics

What is a network?

What is an internet?

What is the Internet?

What is the WWW?

What is an intranet?Tim Berners-Lee: Invented the World Wide Web in 1989

What Is the World Wide Web?What is a network?

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

What is the WWW? network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

What is the WWW?A set of software services that run on the Internet (or any network that runs the appropriate networking software protocols).

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

What is the WWW?A set of software services that run on the Internet (or any network that runs the appropriate networking software protocols).

What is an intranet?

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

What is the WWW?A set of software services that run on the Internet (or any network that runs the appropriate networking software protocols).

What is an intranet?Just like the Internet, but private to an institution of limited set of users.

network internet

What Is the World Wide Web?What is a network?

Two or more computers connected by a wire (or, these days, by a radio wave or beam of light).

What is an internet?Two or more networks connected by a wire (or, these days, by a radio wave or beam of light).

What is the Internet?The worldwide, publicly accessible internet commonly used to carry email, web, and other data traffic.

What is the WWW?A set of software services that run on the Internet (or any network that runs the appropriate networking software protocols).

What is an intranet?Just like the Internet, but private to an institution of limited set of users.

network internet

A Quick History of the Internet and the World Wide Web

Internet History: The Beginning

1958 1969 1973

1. Bell Labs develops the Unix operating system.

2. ARPAnet's first four computers are put in place at university sites.

1. The network becomes international with the addition of sites in Norway and England.

President Eisenhower announces the creationof the Advanced ResearchProjects Agency (ARPA)under the umbrella of theUnited States Departmentof Defense.

Internet History: Early Years

1983 1984

1. TCP/IP becomes ARPAnet’s standard protocol.

2. UC Berkeley comes out with its own version of Unix which includes support for TCP/IP.

1986

1. The National Science Foundation (NSF) takes over administration of ARPAnet.

2. Host count climbs to over 1000.

The NSF createsNSFnet and linksfive supercomputingcenters with a 56 kbpsbackbone.

Internet History: Birth of the Web

1989

1. CERN makes the World Wide Web available.

2. NSFnet upgrades the internet backbone by installing T3 lines (44.736 Mbps).

3. Host count passes one million.

1992

1. Marc Andreesen, an undergrad at the University of Illinois, releases the first version of the Mosaic Web Browser.

2. Host count reaches two million.

1993

1. Berners-Lee founds the World Wide Web Consortium (W3C) to draft technical standards for web technologies.

2. Host count reaches 3.5 million.

1994

1. Tim Berners-Lee invents the world wide web while working as an independent contractor at the European Center for Nuclear Research (CERN).

Web Components

• Web Browsers– Firefox, Internet

Explorer, Safari, Opera, Netscape, etc.

• Web Servers– Apache, Microsoft

IIS, etc.

• Web Sites– Where all the content

is located

WWW: Pieces and Parts

Mosaic: The first popular graphical web browser, first released in 1993

What a web browser does (not a complete list):• Accepts a Uniform Resource Locator (URL) from the end-user• Based on the URL, sends requests for each web page and web page

component (e.g., any embedded graphics or multimedia components) to the appropriate web server

• Receives a copy of the requested document from the web server, along with some additional information, such as the document’s associated MIME type

• Decides, based on the Multipurpose Internet Mail Extension (MIME) type and “helper app” associations, whether to display the document directly, or to launch it into a helper application

• Renders the document if it decided to display it directly. It does this by interpreting the Hypertext Markup Language (HTML) or Extensible Hypertext Markup Language (XHTML) code in the document, and translating that into a particular way of displaying the document

• Keeps local copies of recently-viewed web pages in order to display them more quickly if accessed again in the near future (local files stored in the browser’s “cache”)

The Web Browser

• View Source See the code that makes the web page you are currently viewing

• Forced Reload Force the browser to reload the page from the web server, even if there is a recent copy of the page still in the browser’s cache– Mozilla/Firefox: Shift reload– Internet Explorer: Control refresh– Safari: Option refresh

Browser Tricks

• Clear Cache Empty the browser’s cache by deleting all files stored in it; this guarantees that the next page you load will not be from the local cache

• Open in New Window Leave the current web page open, but follow a link and load it into a new browser window (allows you to see two or more pages at once). Can be done programmatically, too

More Browser Tricks

• Browse the web and view the source for some of your favorite pages.

• You can prepare for next week by going to the class web site (http://www.oldkingcole.com/itec745/) and downloading and reviewing the Week 2 slides.

For Next Week