1

Welcome,

Course 63 242 Web Site Development 1

Spring 2006

2

Today,

Introduction to the Course• The Syllabus• Course Schedule• This Course with relation to your Discipline?• What will you gain by the end of this Course?• Resources and Materials

Introducing the Instructor

Principles and Policies• Do’s and Don’ts of the Course• Grading Policy• Attendance Policy

Introducing the Common Tools

Final Project

Part 1: Introducing to the Course

3

Introducing the Instructor

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Don’ts of the ..•Grading Policy•Attendancy

Arzu IKINCI

Contact Info aikinci@bilkent.edu.trhttp://www.bim.bilkent.edu.tr/~ikinci orhttp://www.tourism.bilkent.edu.tr/~ikinci

office:RA 108

Hacettepe University, Faculty of Economy

Lectures PC Busines Applications I & IISelected Topics in Information ManagementWeb Site Design I & II

4

Introduction to the Course

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

Course 63 242

Page & Site Design

Client/Server Programming

Web Application

Network Technologies +

Protocols

Design+

Application

5

Introduction to the Course

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

The Syllabus

Week 1 Week 2 Week 3 Week 4

Week 5 Week 6 Week 7 Week 8 Midterm 1

Week 9MidSemester

Break

Week 10 Week 11 Week 12

Week 13 Week 14 Week 15 Midterm 2

Week 16Project

Presentation

Site Design &

Technical Attributes

Advanced Design

& Workshops

Quizes, HomeworksLab Assignments every week

2 Midterms2 Workshops (lab & home)

1 Final Project

6

Introduction to the CourseIntroducing

the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

Course Schedule

Monday Tuesday Wednesday Thursday Friday

63 242 –01

(10:40-12:30)

63 242 –02

(10:40-12:30)

63 242 –01

(12:40-14:30)

63 242 –02

(15:40-17:30)

Section 01 - 02 (After 5 April) Arzu İkinciSection 02 (Until 5 April) Rabia Üşenmez

7

Introduction to the Course

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

This Course with relation to your Discipline ???

BUSINESS

knowledge to improve your

business

manage the ways to

get information

INFORMATION MANAGEMENT

process of management

theories

• having an advanced information of building a web site?• only an additional experience added to CV?• or ...???

8

Introduction to the Course

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

What will you gain???

• Effective web skills for interpreting your information and solutions

• An ability to organise information through internet

• A creative approach to web solutions

• Use, implement, and manage technology in web based services

9

Introduction to the Course

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

Resources and Materials

• Internet

• Course Syllabus

• Course Web

• Lecture Notes/Slides

• Course Books: Web Design and Development for e-business by

Jensen J. Zaho (Prentice Hall) Even More Excellent HTML by Gottleber and

Trainor (Mc Graw-Hill) Step by Step FrontPage 2002 (microsoft press) The Web Collection: Adobe Photoshop by

Beskeen/Foley/Reding (Thomson Course T.)

10

Principles and Policies

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

Do’s

• Use templates, wizards, and

examples of the Development

Tool as a guide to start your

work.

• Examine the source codes of

the web pages, and try to learn

how they are constructed.

• Save and deploy your works to

your home directory on public

server.

Don’t s

• Turn in wizards, and examples of the Development Tool as your work.

• Turn in the web pages as your own work.

• Do not save your work on local machines.

11

Principles and Policies

Introducing the Instructor

Introduction to the Course

Principles and Policies

•Who is the Instructor?•Contact Info

•The Syllabus•Course Schedule•This Course with relation..•What will you gain..•Resıurces and Materials

•Do’s and Donn’ts fo the ..•Grading Policy•Attendancy

Grading Policy

Quizess

Midterm-I

Midterm-II

Final Project

InClass Attendance

InClass Participation

10 %

25 %

30%

5 + 20+10 = 35 %

+ 2 %

+ 2 %

12

Introducing the Common Tools

• Authoring tools for creating web pages, web graphics. • some third party tools, and programs. • Windows Explorer

It is the File Manager program for windows

• BrowsersInternet Explorer and Netscape

13

WinZip, WsFTP, AcdSee, PaintShopPro, Adobe Photoshop, Textpad, FrontPage.

WinZipA program to compress your files, folders

WsFTPA program to send and receive files, folders with other computers, or servers

AcdSeeA program to view and get the details about graphics, images

PaintShopPro and Adobe PhotoshopGraphic programs to edit images

TextPadMore skilled version of Notepad

FrontPageA web authoring tool to create web pages.

14

Brief History of the Internet and WWW

What Does a Web Developer Have to know?

Internet Navigation Technologies

Web Building Introduction

Web Development Tools

Web Authoring Tools

Web Graphic Tools

Web Programming Tools

Tool Selection Principle

Summary

References

Part 2: Web Technologies

15

Objectives

Describe the past and present of the Internet and Web as well as emerging technologies

Know various types of Web markup languages

Understand a variety of Web development tools and make appropriate choices

Convert text documents, presentation slides, and spreadsheet files into Web pages

16

A Brief History of the Internet and the WWW

in Early 1960’s J.C.R. Licklider (MIT, researcher) Interconnected set of computers

In 1962 Licklider first head of the computer research program at the US Defense Advanced Research Projects Agency (ARPA)

Ivan Sutherland (ARPA), Bob Taylor (ARPA), G.Roberts (MIT)

Better advantage of computing resources; networking concept

In late 1966 Roberts joined the ARPA

Published ARPANET

1969 first “network’s host” installed at UCLA (University of California at Los Angeles)

Overview:

17

A Brief History of the Internet and the WWW (cont.)

In the 1980s;ARPANET & NSFNET (National Science Foundation’s) & MILNET (military’s) & other networks (such as USERNET and BITNET)

adopted a network communication standard first developed by ARPANET ; Transmission Control Protocol/Internet Protocol (TCP/IP), and the INTERNET was born!

In 1989, Tim Barners-Lee (a graduate from Oxford, researcher at CERN- the European Particle Physics Laboratory in Geneva, Switzerland)

Proposed an idea: WWW, an Internet based hypertext project for global information sharing

First www server (httpd), client browser (“worldwideweb”), a WYSIWYG hypertext browser/editor (CERN, 90. Internet 91-93)

Initial Web design, Web Addresses, Protocols, coding language

joined MIT computer science laboratory (94)

Overview:

18

A Brief History of the Internet and the WWW (cont.)

The WWW Consortium (W3C)

developing protocols & standards

On October 24, 1995 The Federal Networking Council (FNC)

the Internet definition

“Internet” refers the global information system that-

is logically linked together by a globally unique address space based on the Internet Protocol (IP) or its subsequent extensions/follow-ons;

is able to support communications using the Transmission Control Protokol (TCP/IP) or its subsequent extensions/follow-ons, and/or other other IP-compatible protocols; and

Provides, uses or makes accessible, either publicly or privately, high level services layered on the communications and related infrastructure described herein.

Overview:

19

R.J. Licklider Tim Berner’s Lee

20

What does a Developer Need to Know? World Wide Web (WWW or W3)

WWW is often confused with the Internet. It is the another usage of the Internet. It is on the Internet and linked together through the use of links, or connections, in documents.

• The largest body of computerized data in the world.

• Any computer, any operating system an use it

• Anybody can do it

• Global, Interactive, Dynamic, Cross-platform, Distributed,

Graphical hypertext information system that runs over the

Internet.

21

World Wide Web (WWW or W3)

• Global, . Wherever you want, whatever you need

• Interactive, . Nature of the Web! Links and forms…. Create forms and get the best feedbacks

• Dynamic, . Keeps growing…. People can update information at any time

• Cross-platform, . Can easily access anytime, anywhere, and anyway

22

World Wide Web (WWW or W3)

• Distributed, . Information takes up an awful a lot space; but it can be distributed thousands of different sites…

• Graphical, . Fonts, styles, layouts, graphics and text together on the same screen with the interface easily navigable; jump from link to link

• Hypertext Information System . If you don’t know where you’re going go with

hypermedia links!

23

A URL is commonly associated with a Web Site.

www.bilkent.edu.tr is the URL for Bilkent University’s Web site.

Most commonly, these sites are located in directories of folders on the

server. Then within this main site, there may be several folders, which

house other sections of the Web site.

For example www.bilkent.edu.tr/staff is the URL for Bilkent University’s

staff section.

Web Sites

24

When you visit a Web site, you look at pages on the site that contain all

the text, graphics, sound, and video content. Even though a Web page

isn’t the same size as format as a printed page!

The word “page” is used to help us differentiate between pages, folders,

and sites.

Just as many pages and chapters can be within a single book, many pages

and folders can also be within a Web site.

www.bilkent.edu.tr/staff/index.html is the URL for home (entry-splash)

page of Bilkent University’s staff section.

Web Pages

25

A Web browser is a piece of software that runs on your personal computer

and enables you to view Web Pages

They interpret the HTML code and provide a visual layout displayed on the

screen. Many browsers can also be used to check e-mail.

• Popular Browsers: MS Internet Explorer, Netscape Navigator, Mozilla

Firefox

• Each company updates its browsers regularly and you can download

from the company’s Web site.

• The importance of Testing: Most browsers can be easily customized by

users. User can change the preferred text size for Web pages, as well as

fonts and colors.

.::The success of your Web pages is to test, test, test::.

Web Browser

26

Web Server

Every Web site and Web page needs a Web server.

It is a computer running special software that enables it to host one or more Web sites.

It is always connected to the Internet.

I’d like to visit www.bilkent.edu.tr Please.

No problem. I havethe files right here.

Web browser

WebServer

27

A Hint about a Server

We need to buy a new server. I need to install a new Webserver.

Server: It can be a computer or software!...

28

HTTP: HyperText Transfer Protocol

The Web server “talks” with the Web browser through a process, or

protocol, called Hyper Text Transfer Protocol.

The server uses a system of Multipurpose Internet Mail Extension

(MIME) references to determine exactly how to display the content

through HTTP.

Web server

Web browser

MIME They are Talking!Grammer Instructor!

29

Commonly Used Web Servers

• Apache (httpd.apache.org) – since 1996

• Microsoft offers many different types (www.microsoft.com/server), but

the most popular Web server is Internet Information Server (IIS)

• Sun and Netscape has produced iPlanet, which boasts the third most

popular Web servers (www.iplanet.com/products/).

30

INTERNET NAVIGATION TECHNOLOGIES

First Generation• FTP

– File Transfer Protocol– Allows users to

• List files• Transfer files

– Does not allow users to• Run applications on a remote computer• Read files on a remote computer

– Viable method for file transfer and Web publishing

31

INTERNET NAVIGATION TECHNOLOGIES

Second Generation• Gopher

– Developed at University of Minnesota (1991)– Text-based interface– Organizes and displays files on Internet servers– Presents contents as a hierarchically structured list

of files– Many Gopher databases are being converted to Web

sites for easy access

32

INTERNET NAVIGATION TECHNOLOGIES

Third Generation• HTTP

– HyperText Transfer Protocol– Transfers files from Web server to browser– Works with HTML to display text, graphics and sound– HTML can only deliver information in a static

presentation without interactivity– Calculation– Pay bill

– Manage bank accounts are not possible!

33

NEW NAVIGATION TECHNOLOGIES

• DHTML

– Dynamic HyperText Transfer Protocol

– Combination of HTML and scripting languages– Enables Web pages to react to user input

– Reservations– Registrations– Shopping

HTMLHTML JavaScriptVBScript

JavaScriptVBScript DHTMLDHTML

34

• WAP– Wireless Application Protocol– Wireless Web Browsing and Business

transcation (Personal digital assistant-PDA and cell phone)

– Languages used to develop WAP applications

• XML – Extensible Markup Language– Allows communications across multiple

platforms

• WML – Wireless Markup Language– Subset of XML

NEW NAVIGATION TECHNOLOGIES

35

• HTML 4.01– HyperText Markup Language– Defines structure and layout of Web document by

using tags and attributes– View HTML source on your browser

• Click View / Page Source<tag> </tag>

<HTML><HEAD>

<TITLE> </TITLE></HEAD><BODY>.....</BODY></HTML>

WEB BUILDING INTRODUCTION

36

Cascading Style Sheets (CSS)

− Styles define how HTML elements are displayed

− Saved in files external to HTML documents

− Changes appearence of the pages in your web

37

• XHTML 1.0 – Extensible HyperText Markup Language– Newer version of HTML recommended by W3C– Combines HTML and XML (multiplotform language)

• DHTML– Dynamic Hypertext Markup Language

– Transforms Web pages from static to interactive

– Allows scripting languages to be embedded into HTML files

– Enables a Web page to react to user input without sending requests to the Web server

<script language = javascript>

</script>

38

• XML– Extensible Markup Language– Similar to HTML– Cross-Platform (Hardware/Software Independent)

– Consists of rules:• tags to describe data• separate data from presentation layout• transform data into Web forms<?xml version = ‘1.0’?><?xml:stylesheet type =“text/xsl” href = “menu.xsl”?><breakfast menu>

<food><name>waffles</name><price>$3.95</price>

</food> .....

39

• Client-Side Scripting

- Programming the behavior of an Internet Browser- Delivers more dynamic content

• Server-Side Scripting

− Programming Internet Server− Delivers more dynamic content

• Managing Data with SQL

− The Structured Query Language (SQL): common standard to access Database

− Stores and Retrives data from a database

40

WEB DEVELOPMENT TOOLS

• Three categories:– Web Authoring Tools– Web Graphics Tools– Web Programming Languages

41

WEB DEVELOPMENT TOOLS

• Features– Design– Production– Management

• Examples– Adobe GoLive– Macromedia Dreamweaver– Microsoft FrontPage

Web Authoring Tools

42

WEB DEVELOPMENT TOOLS

• Features– Manipulate images– Transparency controls– Variety of graphics styles and effects

• Examples– Macromedia Flash– Adobe Photoshop– Jasc Paint Shop Pro

http://www.adobe.com/productshttp://www.jasc.comhttp://www.macromedia.com/shockwave/download/ http://www.techsmith.com/products/camtasia/download.asp

Web Graphics Tools

43

WEB DEVELOPMENT TOOLS

Web Programming/Scripting Tools

– CGI (Common Gateway Interface)

– ASP / JSP (Active/Java Server Pages)

– CFML (ColdFusion Markup Language)

– Java – JavaScript

– Visual Basic– VBScript– Visual C++– C#

FeaturesFeatures Develop dynamic, interactive, data-driven Web applications Examples

44

TOOL SELECTION PRINCIPLES

• Buy Low– Identify free-download Web servers

– Free-download development tools

– Trial versions, freeware, shareware

• Sell High– Develop advanced Internet/Web skills

– Sell those skills on the job market

45

CONVERTING TO WEB PAGES

• Word– File / Save as Web Page

• Excel– File / Save as Web Page

• PowerPoint– File / Save as Web Page

46

SUMMARY

• Described the past and present of the Internet and World Wide Web

• Identified emerging web building technologies

• Discussed Web development tools

• Converted Office documents into Web pages

47

REFERENCES

• “A Brief History of the Internet”

http://www.isoc.org/internet/history/brief.shtml

• “ FNC Resolution: Definition of ‘Internet’”.

http://www.itrd.gov

• Learned how to make appropriate tool choices

http://www.webopedia.com/

• Web Building Introduction

http://www.w3.schools.com

48

Project SubjectsYyou may select one of the following subject or you can offer your own idea to your instructor.1.      Your company/client is a major food processor. The company produces oil from corn and soybeans.2.      You have/your client has an electronic Manufacturing Company obtained a contract to produce a complicated item3.      Your company/client produced a new spray equipment for painting.4.      Your company/client produces frozen food with soybean meal as an essential ingredient5.      You have/your client has a merchandising house sells a private brand of sewing machines manufactured for the house.6.      You have/your client has an insurance company heavily involved in trusts and retirement funds.7.      Your client/your company manufactures cardboard containers for high-quality food packaging8.      Your company/client produces refrigerator magnets9.      Your company/client produces souvenir pencils about leadership1.   You are/Your client is a T-shirt producer . . Your company/Your client produces a special kind of tire.1. You have/ your client has a publication company and published a new food magazine.1.  You are / your client is a sport equipment producer designed a new sport equipment.1

49

Thank You