D ream W eaver, incorporating special effects: dropdown menu, rollovers,
hotspots, and etc. •. Use PhotoShop for expert graphic/ photo editing and touch-
ups.
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 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: Subnet mask : Default gateway: Obtain DNS server address automatically Use the following DNS server addresses: Preferred DNS server: Alternate DNS server:
Advanced... OK
Cancel
Viewing TCP/IP Configuration 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
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
Sales Report
Q3 Sales by Region
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. This is bold. This is also bold. This is italics. This is also italics.
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 Heading Heading Heading Heading Heading Heading
1
Heading 4Heading 2Heading 5Heading 3Heading 6Heading
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 real- time • “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/