Internet - UiTM Library

Transcription

Konsep Pembangunan &
Pengurusan Tapak &
Laman WEB
Oleh
Ahmad Faizar Jaafar
Jabatan Pengurusan Sistem & Teknologi Maklumat,
PTAR
Konsep Pembangunan serta
Pengurusan Tapak & Laman
WEB
Tahap
: Asas
Jangaka Masa Kursus : 3 hari
Objektif Kursus
Untuk mengetahui konsep-konsep asas
pembanguan sesebuah tapak & laman web
Menyediakan satu tapak & laman web
dengan menggunakan aplikasi web page
editor
W eb
D e sig n e r
S p ecia l
T ra in in g P rogra m
s ta r t d e s ig n in g P R O F E S S I O N A L
W E B S I T E S in 5 d a y s
I t ’s e a s y o n c e y o u k n o w h o w
5 d a y s t r a in in g
R M 1500
•
B e g i n w it h H T M L st a ti c p a g e s .
•
T h e n s e t u p y o u r w e b s i te u si n g
D re a m W e a v e r, in c o rp o ra t in g
s p e c i al e ffe c ts : d r o p d o w n m e n u ,
ro llo v e rs , h o t s p o t s, a n d e tc .
•
•
U s e P h o t o S h o p fo r
e x p e rt g r a p h i c /
p h o t o e d it in g a n d
t o u c h -u p s.
C re a t e m ult im e d ia
a n im a t io n s w it h
M a c ro m e d ia F la s h .
o n ly
c o u r s e m a te r ia l in c lu d e d
( n o r m a l p r ic e R M 1 9 5 0 )
C a ll u s to d a y to b o o k yo u r p la c e !
te l
5636 2080
o r e m a i l h e llo @ n o t a a s ia .c o m
M A C R O M E D IA
D R EA M W EA VE R 4
M A C R O M E DIA
FLASH 5
P H O TO SH O P 6
S u b - F r a n c h is e O f :
N o t a A s ia
N O T A A S IA (M ) S D N B H D (41308 1A )
C T 8 .0 1 L e ve l 8 , S u b a n g S q u a r e C o r p o r a t e To w e r , J al a n
S S 1 5 /4 G , 4 7 5 0 0 S u b a n g J a y a , S e l a n g o r .
Overview Of Internet
Classful
IP Addressing
Subnetting a Network
Planning IP Addressing
Assigning TCP/IP
Addresses
•Classful IP Addressing
IP
Addresses
IP Address Classes
IP Addresses
IP
Address
192.168.2.100
192.168.2.100
192.168.3.100
192.168.3.100
192.168.1.100
192.168.1.100
192.168.1.0
192.168.1.0
192.168.2.0
192.168.2.0
192.168.3.0
192.168.3.0
Network
Network ID
ID
192.168.1.100
192.168.1.100
192.168.2.101
192.168.2.101
Host
Host ID
ID
IP Address Classes
Class A
Class B
Host
Host ID
ID
Network
Network ID
ID
Network
Network ID
ID
Host
Host ID
ID
Network
Network ID
ID
Class C
w
x
Host
Host ID
ID
y
z
•Subnetting a Network
Subnets
Subnet
Masks
Determining Local and Remote
Hosts
Subnets
Subnet 1
Subnet 2
1
Hub
2
Router
Hub
Subnet Masks
IP
Subnet
IP
Address
Mask
Address
10.50.
10.
255.255.
10.50.100.
50.100.200
100.200
0.0200
Subnet
Subnet Mask
Mask
IP
Network
Address
ID
255.255.
255.
255.255.255.
192.168.
192.168.
10.50.
10.
Network ID
10.50.100.
0.0.0
0.0
0
2.200
0.0.0
0.0
Host ID 0
Network
ID
Determining Local and
Remote Hosts
Example
Example 21
11
Local Hosts
Remote
Hosts
AA
192.168.1.100
192.168.1.100
192.168.1.100
192.168.1.100
BB
22
D
192.168.2.100
192.168.2.100
E
E
192.168.2.100
192.168.2.100
Router
Router
CC
Subnet
Subnet
Mask
Mask
255.255.0.0
255.255.0.0
255.255.255.0
255.255.255.0
F
F
Lab A: Determining Class Addresses and Subnet Masks
•Planning IP Addressing
Addressing
Guidelines
Assigning Network IDs
Assigning Host IDs
Addressing
Guidelines
The
The First
First Number
Number in
in the
the Network
Network ID
ID Cannot
Cannot Be
Be 127
127
The
The Host
Host ID
ID Cannot
Cannot Be
Be All
All 255s
255s
The
The Host
Host ID
ID Cannot
Cannot Be
Be All
All Zeros
Zeros
The
The Host
Host ID
ID Must
Must Be
Be Unique
Unique to
to the
the Local
Local Network
Network ID
ID
Assigning Network IDs
1
2
Router
3
10.0.0.0
192.168.2.0
172.16.0.0
Assigning Host IDs
1
172.16.
172.16. 0.1
0.1
10.
10.0.0.1
0.0.1
2
Router
10
10.0.0.10
.0.0.10
172.16.
172.16. 0.10
0.10
192.168.2.
192.168.2.11
192.168.2
192.168.2.10
.10
10
10.0.0.11
.0.0.11
10
10.0.0.12
.0.0.12
10.0.0.0
172.16.
172.16. 0.11
0.11
192.168.2
192.168.2.11
.11
3
192.168.2.0
172.16.
172.16. 0.12
0.12
172.16.0.0
Lab B: Identifying Valid IP Addresses
•Assigning TCP/IP
Addresses
Static
IP Addressing
Automatic IP Addressing
Viewing TCP/IP Configuration
Viewing TCP/IP Configuration Using
Ipconfig
Static IP Addressing
Internet Protocol (TCP/IP) Properties
General
You can get IP settings assigned automatically if your
network supports this capability. Otherwise, you need to ask
your network administrator for the appropriate IP settings.
Obtain an IP address automatically
Use the following IP address:
IP address:
192 . 168 . 1 . 200
Subnet mask :
255 . 255 . 255. 0
Default gateway:
192. 168 . 1 . 1
Obtain DNS server address automatically
Use the following DNS server addresses:
Preferred DNS server:
Alternate DNS server:
Advanced...
OK
Cancel
Automatic IP Addressing
General
IP address:
Subnet mask :
Default gateway:
Advanced...
OK
Cancel
Viewing TCP/IP
Configuration
General
IP address:
192 . 168 . 1 . 200
Subnet mask :
255 . 255 . 255. 0
Default gateway:
192. 168 . 1 . 1
Advanced...
OK
Cancel
Viewing TCP/IP Configuration
Using c:\>ipconfig
Command Prompt
Microsoft Windows 2000 [version 5.00.2195]
(C) Copyright 1985-1999 Microsoft Corp.
C:\>ipconfig
Windows 2000 IP Configuration
Ethernet adapter Local Area Connection:
Connection-specific
IP Address. . . . .
Subnet Mask . . . .
Default Gateway . .
C:\>_
DNS
. .
. .
. .
Suffix
. . . .
. . . .
. . . .
.
.
.
.
:
: 192.168.1.200
: 255.255.255.0
: 192.168.1.1
Lab C: Examining the Configuration of TCP/IP
•Identifying Internet Concepts
The Internet
Internet Services
Intranets
Domain Naming

Overview
Identifying Internet Concepts
Using Client Technologies
Connecting to the Internet
Identifying Web Server Concepts

History of the Web History of
the Web
• Tim Berners- Lee “invented” the Web
in 1990 writing the first Web server
and browser.
• Marc Andreesen exposed the Web to
the masses with Mosaic the first GUI
Web browser in 1993.
• The rest is history...

History Internet & WWW
Sejarah Internet & WWW
http://www.netvalley.com/intval1.html
Bagaimana World Wide Web berfungsi
Methods to Use to Connect:
Home user – Direct Modem
Organization - LAN
Browser
Browser
Internet
InternetExplorer
Explorer
PC
PC
WWW
WWWServer
Server
Lab B: Identifying Web Concepts
Review
Identifying Internet Concepts
Using Client Technologies
Connecting to the Internet
Identifying Web Server Concepts

Hypertext Markup Language
<HTML>
<HEAD>
<TITLE>Sales Report</TITLE>
</HEAD>
<BODY>
<H2>Q3 Sales by Region</H2>
</BODY>
</HTML>
Hypertext Markup Language ( HTML )
Hypertext Markup Language

Generally text is unformatted in your Web
documents. However, to emphasize specific
letters, words, or phrases you can use some text
formatting options including boldfacing and
italicizing. Depending on your browser, you may
also be able to add underlining to emphasize
characters. The following examples show the
code for boldfacing and italicizing.
<B>This is bold.</B>
<STRONG>This is also bold.</STRONG>
<I>This is italics.</I>
<EM>This is also italics.</EM>
Heading Styles
Heading styles are used to emphasize different levels of information
in Web documents. Heading style level one (H1) is the largest.
The phrase "formatting basics" at the top of this page is an
example of heading one. Heading styles range from level one
(the largest) to the level six (the smallest). In addition to the
font size, heading styles also include boldfacing and/or italicizing
and some paragraph spacing.
Text Formatted as Heading Level with Code Sample
<H1>Heading
<H4>Heading
<H2>Heading
<H5>Heading
<H3>Heading
<H6>Heading
1</H1>Heading
4</H4>Heading
2</H2>Heading
5</H5>Heading
3</H3>Heading
6</H6>Heading
1
4
2
5
3
5
Static Static vs
Dynamic Web Site
Static Web Site
• HTML page content is
same for each request
• Change to content
requires HTML page edit
• No user interaction
• No access to live data
•“ Web Site”
Static Static vs
Dynamic Web Site
Dynamic Web Site
• HTML pages dynamically enerated for each request
• Content changes based on data, user login, etc.
• Allows user interaction
• Access to data realtime
• “Web Application”
Dynamic Web Sites
• Web server
• responds to HTTP requests and retrieves
resources
• Expand Web server capabilities by
providing a gateway between it and
external programs
• Common Gateway Interface (CGI)
• uses standard I/ O
• new process for each request
• slow and inefficient
Dynamic Web Sites cont.
•
•
•
•
NSAPI, ISAPI
Web Server API
runs in- process, making it faster than CGI
Java Servlets
The Internet
Server
Internet
Text, Audio, Video,
and Graphics Data
Connection Using
TCP/IP Protocol
Client
Internet Services
Electronic Mail (e-mail)
World Wide Web (WWW)
Chat
Internet News
File Transfer Protocol (FTP)
Telnet

Internet
Intranets
Intranet
Internet
Extranet
Domain Naming

Domain Name (istudent.uitm.edu.my)
• Top-level domain (edu)
• Second-level domain (uitm.edu)
• Subdomain (istudent.uitm.edu.my)
edu
edu
uitm.edu
uitm.edu
Istudent.uitm.edu.my
Istudent.uitm.edu.my
•Using Client Technologies
Newsreaders
Web Browsers
Internet Protocols
Uniform Resource Locator (URL)

Newsreaders
msnews.microsoft.com - Outlook Express
File Edit Tools Message Help
New Post Reply Group
Reply Forward
Print
Stop
Send/Recv
Addresses
Find
Newsgroups
msnews.microsoft.com
Folders
msnews.microsoft.com
microsoft.public.ddk.win2000.general (18)
microsoft.public.ddk.win2000.network
microsoft.public.ddk.win2000.setup (3)
microsoft.public.win2000.accessibility
microsoft.public.win2000.advancedserv
microsoft.public.win2000.announcemen
microsoft.public.win2000.app_deploy
microsoft.public.win2000.applications
microsoft.public.win2000.clusterservice
microsoft.public.win2000.networking
microsoft.public.win2000.outlook.expires
microsoft.public.win2000.printing
microsoft.public.win2000.radius
microsoft.public.win2000.ras_routing
microsoft.public.win2000.security
microsoft.public.win2000.setup
microsoft.public.win2000.setup.deploym
microsoft.public.win2000.setup.upgrade
microsoft.public.win2000.storage
microsoft.public.win2000.system_admin
microsoft.public.win2000.terminal_srv
microsoft.public.win2000.terminal_srv_h
microsoft.public.win2000.user_interface
Synchronization of Newsgroups on msnews.microsoft.com
To change offline settings, first select a newsgroup, then click Settings
Synchronize Account
Newsgroups...
Newsgroup
microsoft.public.ddk.win2000.general
microsoft.public.ddk.win2000.network
microsoft.public.ddk.win2000.setup
microsoft.public.win2000.accessibility
microsoft.public.win2000.advancedserver
microsoft.public.win2000.announcements
microsoft.public.win2000.applications
microsoft.public.win2000.app_deploy
microsoft.public.win2000.clusterservice
microsoft.public.win2000.networking
microsoft.public.win2000.outlook.express
microsoft.public.win2000.printing
microsoft.public.win2000.radius
microsoft.public.win2000.ras_routing
microsoft.public.win2000.security
microsoft.public.win2000.setup
microsoft.public.win2000.setup.deployment
microsoft.public.win2000.setup.upgrade
microsoft.public.win2000.storage
microsoft.public.win2000.system_admin
Settings
Unread
18
5
3
6
13
8
6
15
2
2163
11
21
13
8
4
7
1
4
10
2
Total
18
12
3
6
13
8
6
18
2
2164
14
21
13
8
4
10
5
4
10
2
Web Browsers
Browser
Browser
Internet
InternetExplorer
Explorer
Windows 2000 Server Overview - Microsoft Internet Explorer
File Edit View Favorites Tools Help
Back
Search Favorites History
Address
http://www.microsoft.com/windows2000/server/overview/default.asp
Go
All products Support
Search microsoft.com Guide
Windows Home Pages
Go
Windows 2000
Search for:
Home Page
Home Product Guide
With 2000
the Windows®
2000
Server operating system, Microsoft has accomplished
Windows
Server
Family
Product Guide
a goal rarely achieved in the software industry: delivered a product that is
Windows 2000
evolutionary and revolutionary at the same time. Evolutionary in that Windows
Platform
2000 builds on the great things about the Windows NT® Server 4.0 operating
Client
system. Revolutionary in that Windows 2000 Server sets a new standard for
Server
how well am operating system can be integrated with Web, application,
services. For
the first time,
you have anand
easy
choice to make about the next server
Technical
networking,
communication,
infrastructure
operating system you deploy - whatever your needs. Continued
Library
Server
Upgrading
Beta Users to
Browse the features that make the Windows 2000 Server Family the
Server
Window
leading solution for running more reliable and manageable file, print,
IT Pros 2000
Features
intranet, communications, e-commerce, and infrastructure server.
Developers
System
Find out what it takes to run Windows 2000 Server and Windows
Requirements 2000 Advanced Server.
What Others
Check out the buzz on Windows 2000 Server: reviews and
commentary from technology journalists and industry analysts.
are Saying
Comparisons See how Windows 2000 Server compares with other operating
systems.
Internet Protocols
HTTP
HTTPS
FTP
SMTP
NNTP
HTML
DHTML
Server

Internet
Data
Connection Using an
Internet Protocol
Client
Uniform Resource Locator
(URL)

URL
(http://example.microsoft.com/tutorial/default.html)
• Protocol used (http://)
• DNS address (example.microsoft.com)
• Path on the server (/tutorial/default.html)
http://example.microsoft.com/tutorial/default.html
Lab A: Accessing an FTP Site by Using
Internet Explorer
•Connecting to the Internet
Network Address Translators
(NATs)
Proxy Servers
Firewalls
Microsoft Proxy Server

Network Address Translators
(NATs)
192.168.0.10
192.168.0.10
Web Server
w2.x2.y2.z2
w2.x2.y2.z2
Web Browser
w1.x1.y1.z1
w1.x1.y1.z1
Internet
NAT
Proxy Servers
Authorized
Web Site
LAN
Internet
LAN
Proxy Server
LAN
Restricted
Web Site
Firewalls
Authorized
User
LAN
Internet
LAN
Firewall
LAN
Unauthorized
User
Microsoft Proxy Server
Authorized
User or Web Site
LAN
Internet
LAN
Microsoft Proxy
Server
LAN
Unauthorized
User or Web Site
•Identifying Web Server
Concepts
Defining a Web Server
Microsoft Internet Information
Services (IIS)

Defining a Web Server
Client with
Web Browser
Internet
Internet
Explorer
Explorer
Web Server
HTTP
HTTP
HTTP
HTTP
IP
IP Address
Address
TCP/IP
TCP/IP
Network
Microsoft Internet
Information Services (IIS)
Features of IIS
Indexing Service
Internet
Secure Sockets Layer
Windows Media Services
Additional Developer Support
•
•
•
Active Server Pages
VBScript and JavaScript support
Remote administration
IIS
Big Picture
User
user
User Interface
User interface
Web server
application
server
Database
Keperluan host laman web

Perkakasan / Hardware
• Ada beberapa jenama

Perisian / Software
• Ada beberapa jenama
• http://www.serverwatch.com/stypes/
• http://search.about.com/fullsearch.htm
?terms=Internet%20%20HTTP%20%20
web%20%20server
Server Directory
ServerWatch breaks down the Internet servers we review into 14 categories. For more information about a
category, click on the server type for a comprehensive overview and a list of servers reviewed on the site.

web Servers
(See a detailed list of all Web servers.)
servers.)
At its core, a Web server serves static content to a Web browser by loading a file from a disk and
serving it across the network to a user's Web browser. This entire
entire exchange is mediated by the
browser and server talking to each other using Hypertext Transfer
Transfer Protocol (HTTP).
application Servers
(See a detailed list of all app servers.)
servers.)
Sometimes referred to as a type of middleware, application servers
servers occupy a large chunk of
computing territory between database servers and the end user, and
and they often connect the two.
proxy Servers
(See a detailed list of all proxy servers.)
servers.)
Proxy servers sit between a client program (typically a Web browser)
browser) and an external server
(typically another server on the Web) to filter requests, improve
improve performance, and share
connections.
FTP Servers
(See a detailed list of all FTP servers.)
servers.)
One of the oldest of the Internet services, File Transfer Protocol
Protocol makes it possible to move one or
more files securely between computers while providing file security
security and organization as well as
transfer control.
mail Servers
(See a detailed list of all mail servers.)
servers.)
Almost as ubiquitous and crucial as Web servers, mail servers move
move and store mail over corporate
networks (via LANs and WANs) and across the Internet.
list Servers
List servers offer a way to better manage mailing lists, whether they be interactive discussions
open to the public or oneone-way lists that deliver announcements, newsletters, or advertising.
advertising.
chat Servers
Chat servers enable a large number of users to exchange information
information in an environment similar to
Internet newsgroups that offers realtime
discussion
capabilities.
real
Server Directory

groupware Servers
In many ways, groupware is the clearest way to show the true power of the World
Wide Web
telnet Servers
A telnet server enables users to log on to a host computer and perform tasks as if
they're working on the remote computer itself.
fax Servers
A fax server is an ideal solution for organizations looking to reduce incoming and
outgoing telephone resources but that need to fax actual documents.
news Servers
News servers act as a distribution and delivery source for the thousands of public
news groups currently accessible over the Usenet news network.
A/V Servers
A/V servers bring multimedia capabilities to Web sites by enabling them to broadcast
streaming multimedia content.
IRC Servers
An option for those seeking real-time discussion capabilities, Internet Relay Chat
consists of various separate networks (or 'nets') of servers that allow users to
connect to each other via an IRC network.
Platforms/OSs
A term often used synonymously with 'operating system,' a platform is the
underlying hardware or software for a system and is thus the engine that drives the
server.
Server Attic Servers
In the fast-paced world of IT, servers come and go. This section is for those servers
that are no longer sold or supported but that an organization, for whatever reason,
may be interested in learning more about.
The Dream
We will enable Web professionals to
efficiently develop dynamic content and
applications delivered on multiple devices.

Design
Develop
Deliver
Display
Macromedia Products
Design
Dreamweaver
Fireworks
Flash
FreeHand
Develop
Deliver
Display
ColdFusion Studio ColdFusion Server
UltraDev
JRun Server
HomeSite
Generator
JRun Studio
Spectra
Director
Flash Player
Flash
Player
Shockwave
Player
Shockwave Player
WYSIWYG
WYSIWYG (What You See Is What You Get)
site building tool with an intuitive environment
for building cross-platform sites.
What I See
What I Get
Popular Tools
GoLive
Home Site
Front Page
Express
Net Object
Fusion
Dreamweaver
WEB CONTENT MANAGEMENT SYSTEM

Web content management system (WCMS or Web CMS) is content
management system (CMS) software, usually implemented as a Web application,
for creating and managing HTML content. It is used to manage and control a large,
dynamic collection of Web material (HTML documents and their associated images).
A WCMS facilitates content creation, content control, editing, and many essential
Web maintenance functions.
Usually the software provides authoring (and other) tools designed to allow users
with little or no knowledge of programming languages or markup languages to
create and manage content with relative ease of use.
Most systems use a database to store content, metadata, and/or artifacts that
might be needed by the system. Content is frequently, but not universally, stored
as XML, to facilitate reuse and enable flexible presentation options.[1][2]

A presentation layer displays the content to regular Web-site visitors based on a
set of templates. The templates are sometimes XSLT files.[3]

Administration is typically done through browser-based interfaces, but some
systems require the use of a fat client.

Unlike Web-site builders like Microsoft FrontPage or Adobe Dreamweaver, a WCMS
allows non-technical users to make changes to an existing website with little or no
training. A WCMS typically requires an experienced coder to set up and add
features, but is primarily a Web-site maintenance tool for non-technical
administrators.
http://www.opensourcecms.com/
WORKFLOW
Full Web Development Workflow
Asas Laman Web Berkualiti

Apa
Siapa
Dimana
Bagaimana
Bila
Temuramah
Perkara Yang Perlu Di Ambil Kira

Gaya Laman Web
Imbangan Grafik dan Teks
Susun Atur Laman Web
Jangka Masa Muat Turun
Mengimbang Setiap Laman Web
Konsisten dan Identiti
Isu Hakcipta
Prinsip Laman Web Dalam Konteks MAMPU
http://mcsl.mampu.gov.my/bm/gphtml/gpkand.html
Prinsip Laman Web Dalam
Konteks MAMPU
Perancangan Dan Struktur Pelaksanaan Laman Web
Persediaan Awal Pembangunan Laman Web
Pertimbangan Dalam Penyediaan Laman Web
Struktur Dan Persembahan Laman Web
Penyediaan Dokumen Dan Reka Bentuk Laman
Web
Menerbit, Mengelola Dan Mempromosi Laman
Web
Penyenggaraan Laman Web
Penyelarasan Dan Pemantauan
Penutup
Glosari
Case Study
University Library Web Site
Discover
http://www.loc.gov/
http://www.lib.cam.ac.uk/
http://www.natlib.govt.nz/
http://library.tamu.edu/
http://www.uwec.edu/Library/
http://www.lib.umich.edu/
http://libpweb.nus.edu.sg/
http://www.nls.uk/
http://www.uwec.edu/Library/about.htm
Web Development Prep
Purpose:
Your PC
Prepare material for web publishing
Text
Digitized pics
URLs
Web Server
Story board
Build Web Site
Publish
http://faizar.freehosting.net/
Text
Prepare in MS Word
Save it using short meaningful
file name in your web folder
(unitone)

Graphics

Digitize graphics - Digital Camera
Prepare graphics - crop, size in
Photoshop / Graphics program
Save it as a jpg/gif
file yourname.jpg
Save in images folder
Linked Resources
Write a short notation about
the site
Write the exact URL for the site

http://faizar.onestop.net
Checkout the Samples
Home Page
• Course Name
• TOC
• Samples - Portfolio Page / Tech Page
• Components of Culminating Product
• Samples -
Storyboard
Home Page
Portfolio
Humanities 101
TOC
Pics
TOC
Art Perspectives
Intro
Syllabus
Context
Forum
Pics
Intro
Unit
Resources
PD Goals
Portfolio
Context
Sample Work
Analysis, Concl
Next Steps
Implementation
Unit.doc
discuss.jpg
Pics
Pics
Present.jpg
Pics
NEXT STEP

Build Site
Publish Site
http://faizar.onestop.net
Buat Laman WEB
Rujuk Nota
http://faizar.onestop.net/courses.html or http://faizar.atspace.com/courses.html
Daftar laman web percuma
http://faizar.freehosting.net/
http://www.fjoomla.com/