Transcript Slide 1

Welcome,
Course 63 242
Web Site Development 1
Spring 2006
1
Today,
Part 1: Introducing to the Course
Introducing the Instructor
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
Principles and Policies
• Do’s and Don’ts of the Course
• Grading Policy
• Attendance Policy
Introducing the Common Tools
Final Project
2
Introducing the Instructor
Arzu IKINCI
Introducing
the Instructor
Hacettepe University, Faculty of Economy
•Who is the Instructor?
•Contact Info
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Principles and
Policies
•Do’s and Don’ts of the ..
•Grading Policy
•Attendancy
Lectures
PC Busines Applications I & II
Selected Topics in Information Management
Web Site Design I & II
Contact Info
[email protected]
http://www.bim.bilkent.edu.tr/~ikinci or
http://www.tourism.bilkent.edu.tr/~ikinci
office:RA 108
3
Introduction to the Course
Course 63 242
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
Web Application
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Page & Site
Design
Client/Server
Programming
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
Network Technologies
+
Protocols
Design
+
Application
4
Introduction to the Course
The Syllabus
Introducing
the Instructor
Week 1
Week 2
Week 3
Week 4
•Who is the Instructor?
•Contact Info
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
Week 5
Week 6
Week 7
Week 8
Midterm 1
Week
Week 10
Week 11
Week 12
9MidSemester
Break
Week 13
Week 14
Week 15
Midterm 2
Week 16
Project
Presentation
Quizes, Homeworks
Lab Assignments every week
2 Midterms
2 Workshops (lab & home)
1 Final Project
Site Design
&
Technical
Attributes
Advanced
Design
&
Workshops
5
Introduction to the Course
Course Schedule
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
Monday
Tuesday
Wednesday
Thursday
63 242 –01
(10:40-12:30)
63 242 –02
(10:40-12:30)
Friday
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
63 242 –01
(12:40-14:30)
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
63 242 –02
(15:40-17:30)
Section 01 - 02 (After 5 April)  Arzu İkinci
Section 02 (Until 5 April)  Rabia Üşenmez
6
Introduction to the Course
This Course with relation to your Discipline ???
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
• having an advanced information of building a web site?
• only an additional experience added to CV?
• or ...???
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
BUSINESS
INFORMATION
MANAGEMENT
knowledge to
improve your
business
manage
the ways to
get
information
process of
management
theories
7
Introduction to the Course
What will you gain???
Introducing
the Instructor
•Who is the Instructor
•Contact Info
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
•
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
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
8
Introduction to the Course
Resources and Materials
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
•
Internet
Introduction to
the Course
•
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.)
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
9
Principles and Policies
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
Do’s
Don’t s
• Use templates, wizards, and
examples of the Development
Tool as a guide to start your
work.
• Turn in wizards, and examples
of the Development Tool as your
work.
• Examine the source codes of
the web pages, and try to learn
how they are constructed.
• Turn in the web pages as your
own work.
• Save and deploy your works to
your home directory on public
server.
• Do not save your work on local
machines.
10
Principles and Policies
Introducing
the Instructor
•Who is the Instructor?
•Contact Info
Introduction to
the Course
•The Syllabus
•Course Schedule
•This Course with relation..
•What will you gain..
•Resıurces and Materials
Grading Policy
Quizess
Midterm-I
Midterm-II
Final Project
InClass Attendance
InClass Participation
10 %
25 %
30%
5 + 20+10 = 35 %
+2%
+2%
Principles and
Policies
•Do’s and Donn’ts fo the ..
•Grading Policy
•Attendancy
11
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
•
Browsers
Internet Explorer and Netscape
12
WinZip, WsFTP, AcdSee, PaintShopPro, Adobe
Photoshop, Textpad, FrontPage.
WinZip
A program to compress your files, folders
WsFTP
A program to send and receive files, folders with other computers,
or servers
AcdSee
A program to view and get the details about graphics, images
PaintShopPro and Adobe Photoshop
Graphic programs to edit images
TextPad
More skilled version of Notepad
FrontPage
A web authoring tool to create web pages.
13
Part 2: Web Technologies
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
14
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
15
Overview:
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)
16
Overview:
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)
17
Overview:
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.
18
R.J. Licklider
Tim Berner’s Lee
19
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.
20
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
21
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!
22
Web Sites
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.
23
Web Pages
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.
24
Web Browser
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::.
25
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 have
the files right here.
Web
browser
Web
Server
26
A Hint about a Server
We need to buy a new server.
I need to install a new Web
server.
Server: It can be a computer or software!...
27
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.
MIME
Grammer Instructor!
Web server
Web browser
They are
Talking!
28
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/).
29
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
30
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
31
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!
32
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
HTML
JavaScript
VBScript
DHTML
33
NEW NAVIGATION TECHNOLOGIES
• 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
34
WEB BUILDING INTRODUCTION
• 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>
</HEAD>
<BODY>
.....
</BODY>
</HTML>
</TITLE>
35
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
36
• 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>
37
• 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> .....
38
• 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
39
WEB DEVELOPMENT TOOLS
• Three categories:
– Web Authoring Tools
– Web Graphics Tools
– Web Programming Languages
40
WEB DEVELOPMENT TOOLS
Web Authoring Tools
• Features
– Design
– Production
– Management
• Examples
– Adobe GoLive
– Macromedia Dreamweaver
– Microsoft FrontPage
41
WEB DEVELOPMENT TOOLS
Web Graphics 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/products
http://www.jasc.com
http://www.macromedia.com/shockwave/download/
http://www.techsmith.com/products/camtasia/download.asp
42
WEB DEVELOPMENT TOOLS
Web Programming/Scripting Tools
Features
Develop dynamic, interactive, data-driven
Web applications
 Examples
– Visual Basic
CGI (Common Gateway Interface)
– VBScript
ASP / JSP (Active/Java Server Pages)
– Visual C++
CFML (ColdFusion Markup Language)
– C#
Java

–
–
–
–
– JavaScript
43
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
44
CONVERTING TO WEB PAGES
• Word
– File / Save as Web Page
• Excel
– File / Save as Web Page
• PowerPoint
– File / Save as Web Page
45
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
46
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
47
Project Subjects
Yyou 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
item
3. Your company/client produced a new spray equipment for painting.
4. Your company/client produces frozen food with soybean meal as an essential ingredient
5. 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 packaging
8. Your company/client produces refrigerator magnets
9. Your company/client produces souvenir pencils about leadership
1.
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
48
Thank You
49