Mở đầu về thiết kế web ppt

M
M
ở
ở
đ
đ
ầ
ầ
u
u
v
v
ề
ề
thi
thi
ế
ế
t
t
k
k
ế
ế
web
web
ThS
ThS
.
.
Nguy

Nguy
ễ
ễ
n
n
Duy
Duy
H
H
ả
ả
i
i
TT CNTT
TT CNTT
-
-
ĐHSP
ĐHSP
H
H
à
à
N
N
ộ
ộ
i
i
N

N
ộ
ộ
i
i
dung
dung
9 Nhắclạimộtsố khái niệm
9 Phân loạitrangweb
9 Mộtsố bước chính trong phát triển website
9 Công bố website trên internet
9 Mộtsố nguyên tắcquantrọng trong thiết
kế web
9 Cấu trúc website và bố cụctrangweb
9 Tiếng Việttrongtrangweb
Nh
Nh
ắ
ắ
c
c
l
l
ạ
ạ
i
i
m
m
ộ

ộ
t
t
s
s
ố
ố
kh
kh
á
á
i
i
ni
ni
ệ
ệ
m
m
M
M
ạ
ạ
ng
ng
,
,
giao
giao
th

th
ứ
ứ
c
c
9 Mạng máy tính: Computer
Network: Hệ thống các máy
tính đượckếtnốivới nhau
nhằmtraođổidữ liệu.
9 Giao thức: Protocol:
–Tậphợpcácquytắc đượcthống
nhấtgiữa các máy tính trong
mạng nhằmthựchiệntraođổidữ
liệu được chính xác
–Vídụ: TCP/IP, HTTP, FTP,…
Đ
Đ
ị
ị
a
a
ch
ch
ỉ
ỉ
IP: IP Address
IP: IP Address
9 Xác định một máy tính trong
mạng dựatrêngiaothức
TCP/IP. Hai máy tính trong

mạng có 2 địachỉ IP khác nhau
9 Có dạng x.y.z.t (0 ≤ x, y, z, t ≤
255)
9 Ví dụ: 203.162.18.59: địachỉ
máy chủ web của ĐHSP Hà Nội.
9 Đặcbiệt: địachỉ: 127.0.0.1 (địa
chỉ loopback) là địachỉ của
chính máy tính đang sử dụng
dùng để thử mạng
Tên
Tên
mi
mi
ề
ề
n
n
: Domain Name
: Domain Name
9 Là tên được“gắn” với1 địachỉ IP.
9 Máy chủ DNS thựchiệnviệc“gắn” (ánh
xạ)
9 Ở dạng vănbảnnênthânthiệnvớicon
người
9 Được chia thành nhiềucấp, phân biệtbởi
dấuchấm(.). Đánh số cấplầnlượttừ phải
sang trái bắt đầutừ 1.
9 Cấplớnhơnlàcon củacấpnhỏ hơn
9 Ví dụ: cntt.dhsphn.edu.vn gắnvới
203.162.18.59 trong đó:

– vn: NướcViệtNam (Cấp1)
– edu: Tổ chứcgiáodục(Cấp2)
– dhsphn: Tên cơ quan (Cấp3)
– cntt: đơnvị nhỏ trong cơ quan (Cấp4)
9 Đặcbiệt: Tên localhost đượcgắnvới
127.0.0.1
M
M
á
á
y
y
ch
ch
ủ
ủ
-
-
m
m
á
á
y
y
ph
ph
ụ
ụ
c
c

v
v
ụ
ụ
: Server
: Server
9 Là máy tính chuyên cung cấptài
nguyên, dịch vụ cho máy tính khác.
9 Thường được cài các phầnmềm
chuyên dụng để có khả năng cung
cấp
9 Mộtmáychủ có thể dùng cho một
hay nhiềumục đích. Tên máy chủ
thường gắnvớimục đích sử dụng. Ví
dụ:
– File server
– Application server
– Mail server
– Web server
9 Thựctế: các máy chủ có cấuhình
cao, khả năng hoạt động ổn định
M
M
á
á
y
y
kh
kh
á

á
ch
ch
: Client
: Client
9 Máy khai thác dịch vụ của
máy chủ
9 Vớimỗidịch vụ, thường có
các phầnmềm chuyên biệt
để khai thác
9 Một máy tính có thể vừalà
client vừalàserver
9 Một máy tính có thể khai
thác dịch vụ của chính nó.
C
C
ổ
ổ
ng
ng
d
d
ị
ị
ch
ch
v
v
ụ
ụ

: Service Port
: Service Port
–Làsố ∈ [0; 65535]
xác định dịch vụ của
máy chủ
–2 dịch vụ khác nhau
chiếmcáccổng khác
nhau
–Mỗidịch vụ thường
chiếmcáccổng xác
định, ví dụ:
• Web: 80
• FTP: 21
Chu
Chu
ỗ
ỗ
i
i
đ
đ
ị
ị
nh
nh
v
v
ị
ị
t

t
à
à
i
i
nguyên
nguyên
(
(
đ
đ
ị
ị
a
a
ch
ch
ỉ
ỉ
): URL
): URL
(Uniform Resource Locator)
(Uniform Resource Locator)
9 Tài nguyên: file trên mạng
9 URL: Xác định vị trívàcáchkhaithácfile
9 Cấutrúc:
giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file
9 Ví dụ: :80/html/test.htm
9 Trong trường hợpmặc định, nhiều thành phầncó
thể bỏ qua:

–Giaothức, cổng: Đượctrìnhduyệt đặtmặc định
– Tên file: đượcmáychủđặtmặc định
Trang
Trang
web, web site, World Wide Web
web, web site, World Wide Web
9 Trang web: Web page:
–Làmộttrangnội dung
–Cóthểđượcviếtbằng nhiềungônngữ khác
nhau nhưng kếtquả trả về client là HTML
9 Web site:
–Tậphợp các trang web có nội dung thống nhất
phụcvụ cho mộtmục đích nào đó
9 World Wide Web (WWW): Tậphợpcác
web site trên mạng internet.
Web server, Web browser
Web server, Web browser
9 Web server:
–Máyphụcvụ web
–Mộtsố phầnmềm web server chuyên
dụng:
•Apache: mãnguồnmở
• Internet Information Services (IIS):
SảnphẩmcủaMicrosoft
9 Web Browser:
–Phầnmềmchạy trên client để khai
thác dịch vụ web
–Mộtsố Web browser:
• Nescape
• Mozilla Firefox

• Internet Explorer (IE): tích hợpsẵn
trong windows
•
Phân
Phân
lo
lo
ạ
ạ
i
i
trang
trang
web
web
Phân
Phân
lo
lo
ạ
ạ
i
i
trang
trang
web
web
9 Dựa vào công nghệ phát triển, có 2 loại:
–Web tĩnh:
•Dễ phát triển

•Tương tác yếu
•Sử dụng HTML
•Người làm web tĩnh thường dùng các công cụ trực
quan để tạoratrangweb
–Web động:
• Khó phát triểnhơn
•Tương tác mạnh
•Sử dụng nhiềungônngữ khác nhau
•Thường phảiviết nhiềumãlệnh
M
M
ộ
ộ
t
t
s
s
ố
ố
bư
bư
ớ
ớ
c
c
ch
ch
í
í
nh

nh
trong
trong
ph
ph
á
á
t
t
tri
tri
ể
ể
n
n
website
website
C
C
á
á
c
c
bư
bư
ớ
ớ
c
c
9 Tương tự vớiphântíchvàthiếtkế hệ

thống.
– Đặctả
–Phântích
–Thiếtkế
–Lậptrình
–Kiểmthử
M
M
ộ
ộ
t
t
s
s
ố
ố
đi
đi
ề
ề
u
u
c
c
ầ
ầ
n
n
ch
ch

ú
ú
ý
ý
9 Đặctả:
–Web để làm gì?
– Ai dùng?
–Trìnhđộ người dùng?
–Nội dung, hình ảnh?
9 Phân tích
–Mốiliênquangiữacác
nội dung?
–Thứ tự các nội dung?
M
M
ộ
ộ
t
t
s
s
ố
ố
đi
đi
ề
ề
u
u
c

c
ầ
ầ
n
n
ch
ch
ú
ú
ý (
ý (
tt
tt
)
)
9 Thiếtkế
–Sơđồcấutrúcwebsite
–Giaodiện
–Tĩnh hay động
–CSDL
–Nội dung từng trang
– Liên kếtgiữa các trang
9 Xây dựng
–Cấutrúcthư mục
– Các modul dùng chung
–…
M
M
ộ
ộ

t
t
s
s
ố
ố
đi
đi
ề
ề
u
u
c
c
ầ
ầ
n
n
ch
ch
ú
ú
ý (
ý (
tt
tt
)
)
9 Kiểmthử
–Kiểm tra trên nhiều

trình duyệt
–Kiểm tra trên nhiều
loạimạng
–Kiểmtratốc độ
–Kiểm tra các liên kết
–Thử các lỗibảomật
–…
Công
Công
b
b
ố
ố
website
website
trên
trên
Internet
Internet
C
C
á
á
c
c
đi
đi
ề
ề
u

u
ki
ki
ệ
ệ
n
n
c
c
ầ
ầ
n
n
thi
thi
ế
ế
t
t
9 Xây dựng website
9 Quyềnsử dụng hợppháp
9 Domain
–Sử dụng tên miềncon miễnphí
– Đăng ký tên miền riêng
9 Hosting
–Sử dụng miễnphí
– Thuê không gian riêng
–Tự host website củamình
9 Duy trì và phát triểnvàquảng bá website
Xây

Xây
d
d
ự
ự
ng
ng
website
website
9 Thông tin “tĩnh” hay “động”
–Web tĩnh
–Web động
– Portal
9 Giá thành
–Web tĩnh: Tính theo các kiểutrang
•Trangđơngiản: 70 – 150.000đ/trang
• Trang hiệu ứng hình ảnh tốt: 150 – 350.000đ/trang
–Web động: Tính theo các mục, các khốichứcnăng
• Thiếtkế CSDL
•Cácchứcnăng phía user: đưatin, phânloại, tìm kiếm…
•Cácchứcnăng phía Admin: Đăng nhập, xem/thêm/sửa/xóa
tin bài, báo cáo, thống kê…
•Tómlại: Từ 5 triệutrở lên. (Thông dụng: 10-30 triệu)
Phân
Phân
t
t
í
í
ch

ch
9 Có nên đăng ký tên miền, thiếtkế và duy trì
website hay không?
9 Nếucó, đăng ký tên miềnvớitênthế nào, thể
loạigì, theohệ thống củaViệtNam hay theocác
hệ thống tên miềnbênngoài
9 Có tự Host website của mình không?
9 Để phụcvụ website, có các phương án dành cho?
–Nhânsự
–Kinhphí
–Cơ chế tổ chức, hoạt động
–Quytrìnhlàmviệc
Đăng
Đăng
ký
ký
tên
tên
mi
mi
ề
ề
n
n
9 Xác định tên
–Têntiếng Việt
–Têngiaodịch tiếng Anh
–Tênviếttắt
9 Xác định nơi đăng ký
9 Đăng ký tên miềncàngsớmcàngtốt

–Thủ tục đơngiản, nhanh chóng
–Kinhphírẻ
•Việt Nam: 450.000+480.000/năm
•Nước ngoài: 8 – 12USD
Hosting
Hosting
9 Xác định môi trường vậnhànhcủawebsite
–Máychủ Windows
• Support ASP, PHP…, SQL Server, MySQL…
• Đắthơnmáychủ Linux
–Máychủ Linux
• Support PHP, JSP…, MySQL…
•Rẻ hơnmáychủ Windows
9 Xác định dung lượng thựctế củawebsite, khả
năng sẽ mở rộng
9 Xác định băng thông, các dịch vụđảmbảoan
toàn, an ninh, backup dữ liệu…