Tê iề DiN Tên miền: Domain Name
Là tên được “gắn” với 1 địa chỉIP.
Máy chủ DNSthực hiện việc “gắn” (ánh xạ)
Ởdạng văn bản nên thân thiện với con người
Được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Đánh sốcấp lần
lượt từphải sang trái bắt đầu từ1.
Cấp trái là con của cấp phải
Ví dụ: fit.sgu.edu.vngắn với
112.213.89.40trong đó:
vn: Nước Việt Nam (Cấp 1)
edu: Tổchức giáo dục (Cấp 2)
sgu: Tên cơquan (Cấp 3)
fit:đơnvị nhỏtrong cơquan (Cấp4)
fit: đơn vị nhỏ trong cơ quan (Cấp 4)
Đặc biệt: Tên localhostđược gắn với 127.0.0.1
91 trang |
Chia sẻ: maiphuongdc | Lượt xem: 1956 | Lượt tải: 4
Bạn đang xem trước 20 trang tài liệu Bài giảng Thiết kế web - Tổng quan, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Khái niệm cơ bản
Địa chỉ IP: IP Address
Xác định một máy tính trong mạng dựa
trên giao thức TCP/IP. Hai máy tính trong
mạng có 2 địa chỉ IP khác nhau
B
Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)
Ví dụ: 118.69.204.180: địa chỉ máy chủ
P
T
R
Ì
N
H
W
E web của Đại học Sài Gòn.
Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ
T
K
Ế
V
À
L
Ậ
P
loopback) là địa chỉ của chính máy tính
đang sử dụng dùng để thử mạng
T
H
I
Ế
T
4
2/16/2011
5
Khái niệm cơ bản
Tê iề D i Nn m n: oma n ame
Là tên được “gắn” với 1 địa chỉ IP.
Máy chủ DNS thực hiện việc “gắn”
(ánh xạ)
Ở dạng văn bản nên thân thiện với
con người
B
Được chia thành nhiều cấp, phân biệt
bởi dấu chấm (.). Đánh số cấp lần
lượt từ phải sang trái bắt đầu từ 1.
P
T
R
Ì
N
H
W
E Cấp trái là con của cấp phải
Ví dụ: fit.sgu.edu.vn gắn với
112.213.89.40 trong đó:
T
K
Ế
V
À
L
Ậ
P
vn: Nước Việt Nam (Cấp 1)
edu: Tổ chức giáo dục (Cấp 2)
sgu: Tên cơ quan (Cấp 3)
fit: đơn vị nhỏ trong cơ quan (Cấp 4)
T
H
I
Ế
T
5
Đặc biệt: Tên localhost được gắn
với 127.0.0.1
2/16/2011
6
Khái niệm cơ bản
Má hủ á h Sy c -m y p ục vụ: erver
Là máy tính chuyên cung cấp tài
nguyên, dịch vụ cho máy tính khác.
Thường được cài các phần mềm
chuyên dụng để có khả năng cung cấp
B
Một máy chủ có thể dùng cho một hay
nhiều mục đích. Tên máy chủ thường
gắn với mục đích sử dụng Ví dụ:
P
T
R
Ì
N
H
W
E
.
File server
Application server
Mail server
T
K
Ế
V
À
L
Ậ
P
Web server
Thực tế: các máy chủ có cấu hình cao,
khả năng hoạt động ổn định
T
H
I
Ế
T
6
2/16/2011
7
Khái niệm cơ bản
Má khá h Cliy c : ent
Máy khai thác dịch vụ của
á hủm y c
Với mỗi dịch vụ, thường có
các phần mềm chuyên biệt
B
để khai thác
Một máy tính có thể vừa là
P
T
R
Ì
N
H
W
E
client vừa là server
Một máy tính có thể khai thác
T
K
Ế
V
À
L
Ậ
P
dịch vụ của chính nó.
T
H
I
Ế
T
7
2/16/2011
8
Khái niệm cơ bản
Cổ dị h S i Png c vụ: erv ce ort
Là số [0; 65535] xác định dịch vụ của máy
hủc
2 dịch vụ khác nhau chiếm các cổng khác
nhau
B
Mỗi dịch vụ thường chiếm các cổng xác
định ví dụ:
P
T
R
Ì
N
H
W
E ,
Web: 80
FTP: 21
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
8
2/16/2011
9
Khái niệm cơ bản
Web là gì? Là các dịch vụ phân tán cung cấp
thông tin multimedia dựa trên hypertext
Phân tán: Thông tin được đặt trên nhiều
B
máy chủ khắp thế giới
Multimedia: thông tin bao gồm text
P
T
R
Ì
N
H
W
E ,
graphics, sound, video.
T
K
Ế
V
À
L
Ậ
P
Hypertext: là kỹ thuật được sử dụng để truy
ậ thô ti
T
H
I
Ế
T
9 9
c p ng n
2/16/2011
10
Khái niệm cơ bản
Web = protocol + language + naming infrastructure
HTTP -HyperText Transport Protocol
Là giao thức giao tiếp giữa WWW client and server
HTML -HyperText Markup Language
B
Ngôn ngữ biểu diễn các tài liệu WWW
URL-Uniform Resource Locator
P
T
R
Ì
N
H
W
E
Địa chỉ web(xác định duy nhất)
T
K
Ế
V
À
L
Ậ
P Client-script: VB script, Java script
Server-script: ASP, PHP, JSP, ASP.NET, ...
T
H
I
Ế
T
10
2/16/2011
11
W b h t độ thế à ?
Khái niệm cơ bản
e – oạ ng n o
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
11
2/16/2011
12
Các thành phần của website
URL
B Web
P
T
R
Ì
N
H
W
E
Browser
T
K
Ế
V
À
L
Ậ
P
Webpage
T
H
I
Ế
T
12
2/16/2011
13
Khái niệm chính Browser
Lấy hiển thị (nếu có thể) các tài nguyên khác
nhau
Khả năng hiển thị
Text-only
B
Graphic
ể
P
T
R
Ì
N
H
W
E Hi n thị được nhiều loại ảnh
TIFT, GIF, JPEG, sound, video, postscript, …
T
K
Ế
V
À
L
Ậ
P
Hỗ trợ nhiều giao thức: HTTP, FTP, SMTP, POP
Có thể “plug-in” các công cụ vào browser để
T
H
I
Ế
T
13
tăng tính năng (3D animation, SWF, …)
2/16/2011
14
URL định vị các tài nguyên trên Internet
URL là định danh duy nhất cho các tài nguyên
Internet
Chỉ ra:
Cách truy cập
B
Vị trí tài nguyên
P
T
R
Ì
N
H
W
E Cú pháp chung:
Protocol://host_name[:port_num][/path][/file_name]
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
14 URL không bao giờ chứa khoảng trắng
2/16/2011
15
Các giao tác chuẩn trên web
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
15
2/16/2011
16
World Wide Web www
Các dịch vụ trên web
-
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
16
2/16/2011
17
ệ ử
Các dịch vụ trên Internet
Thư đi n t - email (Electronic mail)
Là dịch vụ trao đổi các thông điểm qua mạng viễn
thông
Sử dụng giao thức SMTP/POP3 để gởi nhận email
B
Địa chỉ email có dạng: name@domain_name
P
T
R
Ì
N
H
W
E Được quản lý bởi Mail Server ( MailClient)
Truyền tải tập tin – FTP – File Transfer Protocol
T
K
Ế
V
À
L
Ậ
P
Là dịch vụ trao đổi các tập tin giữa các máy tính trên
Internet
T
H
I
Ế
T
17 Tán ngẫu – Chat – Yahoo Messenger / Google Talk
2/16/2011
18
Tra cứu thông tin trên Internet
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
18
2/16/2011
19
Một số công cụ khai thác tài nguyên
Internet
Download website offline
Cho phép download website về và truy cập offline
Teleport Pro –
Offline Explorer Enterprise:
B
Download file:
FlashGet www flashget com
P
T
R
Ì
N
H
W
E
– . .
Tìm kiếm:
ỗ ế
T
K
Ế
V
À
L
Ậ
P Copernic – www.copernic.com: h trợ tìm ki m thông minh
trên nhiều Search Engine cùng lúc, và loại bot kết quả trùng.
T
H
I
Ế
T
19
2/16/2011
20
Một số thuật ngữ thông dụng
Internet: Mạng máy tính toàn cầu kết nối các
mạng máy tính khắp nơi trên thế giới. Tập các
giao thức được dùng gọi chung là TCP/IP
Intranet: Mạng cục bộ có kiến trúc tương tự
B
mạng Internet.
Website: Tập hợp các trang web Website của các
P
T
R
Ì
N
H
W
E .
tổ chức hay cá nhân trên mạng bao gồm tập hợp
á ê ế ổ ứ à
T
K
Ế
V
À
L
Ậ
P c c trang web li n quan đ n t ch c n y.
Webpage: Là trang web. Có thể hiển thị các
T
H
I
Ế
T
20
thông tin dạng văn bản, hình ảnh, âm thanh …
2/16/2011
21
Một số thuật ngữ thông dụng
Web browser: Trình duyệt web, dùng để hiển thị các
trang web. Các web browser thông dụng hiện nay là IE và
Firefox
B
Homepage: Trang chủ. Thường là trang đầu tiên (mặc
định) khi truy cập một website.
P
T
R
Ì
N
H
W
E Hyperlink: siêu liên kết. Dùng để liên kết các trang web
và dịch vụ của các website trên Internet.
T
K
Ế
V
À
L
Ậ
P ISA (Internet Access Provider): Nhà cung cấp
đường truyền Internet..
T
H
I
Ế
T
21
2/16/2011
22
Một số thuật ngữ thông dụng
ISP (Internet Service Provider): Nhà cung cấp
dịch vụ Internet. Một số ISP hiện nay ở Việt Nam: VDC,
FPT, SaigonNet, VNPT, Viettel…
Search engines: Máy tìm kiếm Các công cụ tìm kiếm
B
hiện nay, Google, Wiki,….
HTTP, FTP, SMTP, POP3: Đây là các giao thức được
P
T
R
Ì
N
H
W
E
dùng cho các dịch vụ web ftp, email trên Internet ..
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
22
2/16/2011
23
Các bước thiết lập website
Xác định yêu cầu Website
Mua tên miền
ỗ
B
Thuê ch hosting
P
T
R
Ì
N
H
W
E Thiết kế Website
T
K
Ế
V
À
L
Ậ
P Đưa vào hoạt động
T
H
I
Ế
T
23
Duy trì thông tin, bảo dưỡng website
2/16/2011
24
Đại Học Sài Gòn – Khoa CNTT
Bài thực hành 1
B
P
T
R
Ì
N
H
W
E Thao tác và sử dụng
mạng Internet
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
24
2/16/2011
25
Bài thực hành 1
Đăng ký nhóm (file Excel)
Tì kiế thô ti ề F h tim m ng n v ree os ng
Đảm bảo mỗi người có Email
B
Khảo sát giao diện, tính năng của các
P
T
R
Ì
N
H
W
E
website hiện có trên Internet có liên quan
đến chủ đề đã chọn.
T
K
Ế
V
À
L
Ậ
P
Dùng FrontPage, Dreamweaver (MX, CS3),
Photoshop (v 7 CS3)
T
H
I
Ế
T
25
. ,
2/16/2011
26
Tổng kết
1. Khái niệm cơ bản và các thành phần
của website.
2 Nguyên tắc hoạt động cơ bản của
B
.
website.
P
T
R
Ì
N
H
W
E
3. Các dịch vụ trên Internet
T
K
Ế
V
À
L
Ậ
P
4. Các bước thiết lập website
T
H
I
Ế
T
26
5. Bài thực hành 1
2/16/2011
27
Đại Học Sài Gòn – Khoa CNTT
Tổng quan về lập trình
B
ứng dụng web
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
27
2/16/2011
28
Nội dung
1. Các bước thiết lập website
2. Thiết kế website
B
• Thiết kế giao diện
â ớ ó
P
T
R
Ì
N
H
W
E 3. X y dựng website dư i g c
hì ộ hĩ h
T
K
Ế
V
À
L
Ậ
P n n ng ng n
T
H
I
Ế
T
28
2/16/2011
29
Các bước thiết lập web
Xác định yêu cầu Website
Mua tên miền
ỗ
B
Thuê ch hosting
P
T
R
Ì
N
H
W
E Xây dựng Website
T
K
Ế
V
À
L
Ậ
P Đưa vào hoạt động
T
H
I
Ế
T
29
Duy trì thông tin, bảo dưỡng website
2/16/2011
30
Xác định yêu cầu
M tiê ê ầ ơ bả ủục u, y u c u c n c a
website
Đối tượng website phục vụ
B
Chủ đề website
P
T
R
Ì
N
H
W
E
Kết quả thu được sẽ là những thông
T
K
Ế
V
À
L
Ậ
P
tin quan trọng trong giai đoạn xây
T
H
I
Ế
T
30
dựng web (Planning).
2/16/2011
31
Mục tiêu yêu cầu cơ bản
Đề ra mục tiêu khái quát, ngắn gọn,
õ à ủ b it ầ thiết kế r r ng c a we s e c n
Mục đích lập website của bạn là gì?
B
Là công cụ để đánh giá sự thành bại
P
T
R
Ì
N
H
W
E
của một website
T
K
Ế
V
À
L
Ậ
P
Mục tiêu phải dài hạn, bao trùm
t à bộ kế h h hát t iể
T
H
I
Ế
T
31
o n oạc p r n
2/16/2011
32
Đối tượng phục vụ
Xác định loại đối tượng phục vụ chính
Tìm hiểu đối tượng phục vụ
Sự hiểu biết
B
Trình độ
Sở thích
P
T
R
Ì
N
H
W
E
Kinh nghiệm duyệt web ..
T
K
Ế
V
À
L
Ậ
P
Thiết kế tốt sẽ thích hợp cho nhiều dạng
đối tượng có trình độ nhu cầu khác nhau
T
H
I
Ế
T
32
2/16/2011
33
Chủ đề website
Giúp định hướng cho công việc thiết kế
Giới thiệu công ty tổ chức hàng hoá, , , …
Tuỳ thuộc ngành nghề: giáo dục, giải trí …
B
Diễn đàn trao đổi thảo luận
Diễn đàn trao đổi, mua bán, kinh doanh trực
P
T
R
Ì
N
H
W
E
tuyến
Hay cung cấp dịch vụ và thu lợi từ quảng cáo
T
K
Ế
V
À
L
Ậ
P ,
…
T
H
I
Ế
T
33
2/16/2011
34
Mua tên miền
ê ề ê bT n mi n = T n we site
Tên ngắn
Gợi nhớ
ễ ô â ầ ẫ
B
D đọc, kh ng g y nh m l n
Thể hiện được tên công ty hoặc nhãn
P
T
R
Ì
N
H
W
E
hiệu chính của công ty
Vd IBM
T
K
Ế
V
À
L
Ậ
P : .com
Lenovo.com
T
H
I
Ế
T
34
2/16/2011
35
Mua tên miền
Xác định tên
Tên tiếng Việt
Tên giao dịch tiếng Anh
Tên viết tắt
B
Xác định nơi đăng ký
ề ố
P
T
R
Ì
N
H
W
E Đăng ký tên mi n càng sớm càng t t
Thủ tục đơn giản, nhanh chóng
T
K
Ế
V
À
L
Ậ
P
Kinh phí rẻ
Việt Nam: 450.000+480.000/năm
T
H
I
Ế
T
35
Nước ngoài: 8 – 12USD
2/16/2011
36
Mua tên miền
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
36
2/16/2011
37
Thuê hosting
Hệ điều hành của máy chủ
Dung lượng
Băng thông
B
Ngôn ngữ hỗ trợ
P
T
R
Ì
N
H
W
E Hệ quản trị CSDL hỗ trợ
Email POP3
T
K
Ế
V
À
L
Ậ
P
SSL
T
H
I
Ế
T
37 …
2/16/2011
38
Thuê hosting
Xác định môi trường vận hành của website
Máy chủ Windows
Support ASP, PHP…, SQL Server, MySQL…
Đắt hơn máy chủ Linux
Máy chủ Linux
B
Support PHP, JSP…, MySQL…
Rẻ hơn máy chủ Windows
P
T
R
Ì
N
H
W
E Xác định dung lượng thực tế của website,
khả năng sẽ mở rộng
T
K
Ế
V
À
L
Ậ
P Xác định băng thông, các dịch vụ đảm bảo an
toàn, an ninh, backup dữ liệu…
T
H
I
Ế
T
38
2/16/2011
39
Thuê hosting
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
39
2/16/2011
40
Thuê hosting
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
40
2/16/2011
41
Thuê hosting
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
41
2/16/2011
42
Thuê hosting
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
42
2/16/2011
43
Thuê hosting
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
43
2/16/2011
44
Xây dựng website
Xác định yêu cầu (Planning)
Phân tích và thiết kế hệ thống
(Analysys & Design)
B
Thiết kế giao diện (Interface – GUI)
Lập trình (Code – Develop)
P
T
R
Ì
N
H
W
E
Kiểm tra (Test)
ể
T
K
Ế
V
À
L
Ậ
P Tri n khai (Deploy)
Nâng cấp (Upgrade)
T
H
I
Ế
T
44
2/16/2011
45
Xây dựng website
Thông tin “tĩnh” hay “động”
Web tĩnh
W b độe ng
Portal
Giá thành
B
Web tĩnh: Tính theo các kiểu trang
Trang đơn giản: 70 – 150.000đ/trang
Trang hiệu ứng hình ảnh tốt: 150 – 350 000đ/trang
P
T
R
Ì
N
H
W
E
.
Web động: Tính theo các mục, các khối chức năng
Thiết kế CSDL
Các chức năng phía user: đưa tin phân loại tìm kiếm
T
K
Ế
V
À
L
Ậ
P , , …
Các chức nă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óm lại: Từ 5 triệu trở lên (Thông dụng: 10-30 triệu)
T
H
I
Ế
T
45
.
2/16/2011
46
Các thành phần cơ bản trong thiết kế giao diện
Trang chủ (Homepage)
Hệ thống định hướng (navigation –
site map)
B
Các trang chức năng thành viên
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
Giao diện website
T
H
I
Ế
T
46
2/16/2011
47
Trang chủ
Toàn bộ website đều được thiết lập
quanh trang chủ.
Trang chủ xác định rõ chủ đề
B
website
P
T
R
Ì
N
H
W
E Trang chủ xác định phong cách thiết
kế của website
T
K
Ế
V
À
L
Ậ
P
Lưu ý khi sử dụng đồ hoạ
T
H
I
Ế
T
47
2/16/2011
48
Hệ thống menu, logo, định danh
Hệ thống định hướng (navigation –
site map)
Hệ thống menu, naviation đầy đủ,
B
rõ ràng.
P
T
R
Ì
N
H
W
E Vị trí nhất quán, logic (logo công ty)
Cần quan tâm đến việc sử dụng
T
K
Ế
V
À
L
Ậ
P
hiệu ứng.
T
H
I
Ế
T
48
2/16/2011
49
Các trang chức năng thành viên
Hiển thị nội dung
Một nhóm t ang thành iên 1 r v ~
chức năng
B
Xây dựng theo cấu trúc cơ bản
P
T
R
Ì
N
H
W
E Nhất quán, phù hợp với các thuộc
tính đã định dạng trước và phải
T
K
Ế
V
À
L
Ậ
P
theo phong cách của trang chủ
T
H
I
Ế
T
49
2/16/2011
50
Thiết kế giao diện web
HeaderLogo
C
B
Menu ontent 2 x 2
3 3
P
T
R
Ì
N
H
W
E x
Table
T
K
Ế
V
À
L
Ậ
P
Mixed style.
T
H
I
Ế
T
50
2/16/2011
51
Thiết kế giao diện: 2x2 layout
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
51
2/16/2011
52
Thiết kế giao diện: dạng 3 columns
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
52
2/16/2011
53
Thiết kế giao diện: Mixed style
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
53
2/16/2011
54
Xác định kiểu chữ, màu sắc
Font chữ phụ thuộc vào
Đặc điểm thông tin
Độc giả
Trình duyệt, độ phân giải
B
Ngôn ngữ sử dụng
Font có chân không chân
P
T
R
Ì
N
H
W
E , …
Gam màu: thống nhất trong toàn bộ Website
T
K
Ế
V
À
L
Ậ
P Font tiếng Việt: VNI, TCVN3, Unicode…
Cắt đoạn và tóm lược thông tin trong văn bản.
T
H
I
Ế
T
54
2/16/2011
55
Xác định kích thước khung nhìn
Người đọc phải cảm nhận được kích thước
của trang thông tin, biết họ đang ở đâu,
có thể làm gì
B
Hầu hết các trang web đều không vừa
khớp với màn hình 14-15’’
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
55
2/16/2011
56
How C.R.A.P is Your Site Design?
C.R.A.P. stands for Contrast Repetition Alignment
Proximity
Contrast: Elements that aren’t the same should be very
different so they stand out, making them “slightly different”
confuses the user into seeing a relation that doesn’t exist.
Repetition: Repeat styles down the page for a cohesive
B
feel, if you style related elements the same way in one
area, continue that trend for other areas for consistency.
Alignment: Everything on the page needs to be visually
P
T
R
Ì
N
H
W
E
connected to something else, nothing should be out of
place or distinct from all other design elements.
Proximity: Proximity creates related meaning: elements
T
K
Ế
V
À
L
Ậ
P
that are related should be grouped together, whereas
separate design elements should have enough space in
between to communicate they are different.
T
H
I
Ế
T
56
site-design/
2/16/2011
57
Xác định cấu trúc website
Hệ thống phân cấp
Hệ thống các trang tiếp nối
B
P
T
R
Ì
N
H
W
E
Ô lưới
T
K
Ế
V
À
L
Ậ
P
Mạng nhện.
T
H
I
Ế
T
57
2/16/2011
58
Xác định cấu trúc website: Phân Cấp
Tổ chức các khối thông tin phức tạp
Hệ thống được dùng thông dụng nhất
Gần với môi trường tổ chức thế giới thực
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
58
2/16/2011
59
Xác định cấu trúc website: Nối tiếp
Biểu diễn thông tin tuần tự, nối tiếp
th thời ieo g an
Các thông tin tra khảo dạng từ điển
B
Thích hợp cho hệ thống nhỏ
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
59
2/16/2011
60
Xác định cấu trúc website: Ô lưới
Danh sách khoa học, các biến cố sự
kiện
Mỗi thành viên phải có cùng cấu trúc
B
Khó hiểu, khó xác định mối liên quan
iữ á l i thô ti
P
T
R
Ì
N
H
W
E g c c oạ ng n
Thích hợp cho người sử dụng có kinh
T
K
Ế
V
À
L
Ậ
P
nghiệm
T
H
I
Ế
T
60
2/16/2011
61
Xác định cấu trúc website: Ô lưới
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
61
2/16/2011
62
Xác định cấu trúc website: Ô lưới
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
62
2/16/2011
63
Xác định cấu trúc website: Mạng nhện
Ít hạn chế cho việc sử dụng thông tin
Cấu trúc liên kết phức tạp nhưng khai,
thác triệt để ưu điểm hyperlink
B
Cấu trúc phi thực tế nhất, khó hiểu,
ó á
P
T
R
Ì
N
H
W
E kh dự đo n
Thích hợp với những site nhỏ, dành
T
K
Ế
V
À
L
Ậ
P
cho người sử dụng có nhiều kinh
T
H
I
Ế
T
63
nghiệm.
2/16/2011
64
Xác định cấu trúc website: mạng nhện
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
64
2/16/2011
65
Xác định cấu trúc website: mạng nhện
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
65
2/16/2011
66
Chú trọng vào nguyên tắc thiết kế
Thiết kế hướng người sử dụng
Các giúp đỡ định hướng rõ ràng
Không có trang cuối (dead-end)
B
Băng thông và các yếu tố phần cứng
Đơn giản, nhất quán và tính ổn định
P
T
R
Ì
N
H
W
E
Phản hồi đối thoại
T
K
Ế
V
À
L
Ậ
P Tính tương thích trên các trình duyệt
TK cho quản trị và cập nhật nội dung.
T
H
I
Ế
T
66
2/16/2011
67
Thiết kế hướng người sử dụng
Yêu cầu mức độ hoàn hảo của giao diện
Cách tốt nhất: thử nghiệm và nhận phản
hồi.
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
67
2/16/2011
68
Các giúp đỡ định hướng rõ ràng
Độc giả có thể trả lời các câu hỏi
Đ ở đâ ?ang u
Có thể làm gì ?
B
Có thể đi tiếp đến đâu ?
P
T
R
Ì
N
H
W
E
Biểu tượng nhất quán, dễ hiểu, theo
h ẩ i đị h
T
K
Ế
V
À
L
Ậ
P c u n qu n .
T
H
I
Ế
T
68
2/16/2011
69
Các giúp đỡ định hướng rõ ràng
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
69
2/16/2011
70
Không có trang cuối (dead-end)
Mỗi trang có ít nhất một liên kết. Luôn
có khả năng quay về trang chủ các,
trang chủ chốt trên trang
B
Trang dead-end: sẽ là trang không thể
đi đế ới á t thà h iê t
P
T
R
Ì
N
H
W
E n v c c rang n v n rong
website.
T
K
Ế
V
À
L
Ậ
P
Nên để liên kết về trang chủ cho tất cả
T
H
I
Ế
T
70
trang thành viên.
2/16/2011
71
Băng thông và ảnh hưởng
Sự kiên nhẫn của độc giả có giới
hạn
Tốc độ đôi khi là yếu tố quyết định
B
đến việc lựa chọn website.
P
T
R
Ì
N
H
W
E
Phân biệt giữa các thiết kế intranet
à i t t
T
K
Ế
V
À
L
Ậ
P v n erne
T
H
I
Ế
T
71
2/16/2011
72
Băng thông và ảnh hưởng
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
72
2/16/2011
73
Thiết kế trang web cho mạng Intranet
Một số site thiết kế riêng cho các tổ chức,
sử dụng mạng LAN
Mục tiêu: nâng cao thời gian truy cập,
ẫ
B
d n dắt vào sâu trong cấu trúc website
đòi hỏi thông tin phải hấp dẫn, có giá
P
T
R
Ì
N
H
W
E
trị
ể
T
K
Ế
V
À
L
Ậ
P Đừng đ ý tới băng thông và tốc độ
chú trọng đến nội dung có giá trị và sự
T
H
I
Ế
T
73
hấp dẫn cho website.
2/16/2011
74
Tính đơn giản và tính nhất quán
Tuỳ vào loại ứng dụng
Cái ời ầ là thời i àngư xem c n g an v
thông tin chính xác.
B
Đừng để ý tới băng thông và tốc độ
P
T
R
Ì
N
H
W
E
chú trọng đến nội dung có giá trị
à ự hấ dẫ h b it
T
K
Ế
V
À
L
Ậ
P v s p n c o we s e.
T
H
I
Ế
T
74
2/16/2011
75
Tính ổn định
Ổn định về cấu trúc và nội dung
Cấu trúc: các thành phần được đặt đúng
chỗ và hoạt động nhịp nhàng.
B
Nội dung:
Các mối liên kết luôn đảm bảo có đích đến
P
T
R
Ì
N
H
W
E
Nội dung luôn đảm bảo thích hợp và phải cập
nhật cho phù hợp với ngữ cảnh tại thời điểm
T
K
Ế
V
À
L
Ậ
P
đọc giả duyệt Web.
T
H
I
Ế
T
75
2/16/2011
76
Phản hồi và đối thoại
Chuẩn bị trước cho việc trả lời, đáp
ứng các đòi hỏi góp ý của người sử,
dụng một cách nhanh nhất có thể.
B
Luôn có cung cấp địa chỉ liên kết
P
T
R
Ì
N
H
W
E
với “Webmaster”.
Lên kế hoạch nhân sự phụ trách lâu
T
K
Ế
V
À
L
Ậ
P
dài.
T
H
I
Ế
T
76
2/16/2011
77
Tương thích trên các trình duyệt khác nhau
Không phải mọi trình duyệt đều hiển thị
trang web của chúng ta giống nhau
Lưu ý khi có người sử dụng web browser
B
không có khả năng hỗ trợ đồ hoạ
(mobile PDA )
P
T
R
Ì
N
H
W
E
, ,…
Sử dụng nhãn (tag) ALT trong HTML để
T
K
Ế
V
À
L
Ậ
P
thay thế.
T
H
I
Ế
T
77
2/16/2011
78
Thiết kế cho việc quản trị và cập nhật nội dung
B
P
T
R
Ì
N
H
W
E
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
78
2/16/2011
79
Đưa vào hoạt động – thời gian quản lý
Website cần được cập nhật thông tin.
Nếu phần nào đó được cập nhật
thêm ký hiệu “New”
B
Ghi thời gian cập nhật, số người truy
cập,…
P
T
R
Ì
N
H
W
E
Nếu website phức tạp thêm một trang
T
K
Ế
V
À
L
Ậ
P
“What new ?”
T
H
I
Ế
T
79
2/16/2011
80
Liên kết trang web, quảng cáo
Tạo liên kết đến các thông tin (đối
tác khách hàng ) tăng uy tín, ,…
Khi đã ổn định chuyển đổi hình
B
thức kinh doanh, thu phí:
P
T
R
Ì
N
H
W
E Thuê đặt logo quảng cáo
Thu phí thành viên
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
80
2/16/2011
81
Quảng bá website
Quảng bá Website
Đăng ký Website vào các máy tìm kiếm trong nước và thế
giới (search engine)
Vietnam Searchengine: Panvietnam, vinaseek…
Global Searchengine: google, altavista, hotboot…
B
Nâng cao vị trí của Website trong hệ thống xếp hạng
Website thế giới.
Google rank (the important of website: 1-10)
P
T
R
Ì
N
H
W
E
Alexa rank: Traffic ranking of website.
Nâng tầm phát triển Website
T
K
Ế
V
À
L
Ậ
P Tự động hoá dần các chức năng của Website.
Biến Website thành một môi trường kinh doanh thực sự
hiệu quả 24/24 trên Internet
T
H
I
Ế
T
81
.
2/16/2011
82
Phụ lục, nguồn thông tin, các trang giúp đỡ FAQ
Thông tin báo cáo thường cô đọng
trên web có thêm các phụ lục
FAQ (Frequently Answer Questions):
ỗ
B
Lý tưởng cho việc thiết kế website h
trợ.
P
T
R
Ì
N
H
W
E
Giảm thiểu nhân sự và chi phí cho
ỗ
T
K
Ế
V
À
L
Ậ
P
việc h trợ, tư vấn khách hàng.
T
H
I
Ế
T
82
2/16/2011
83
Duy trì website
Cập nhật thông tin
Web tĩnh:
Upload Webpage thông qua Web
Browser
B
Upload Webpage thông qua FTP
program (Cute FTP FTP Voyager )
P
T
R
Ì
N
H
W
E
, ,…
Web động
Form cập nhật CSDL nếu Site có kết
T
K
Ế
V
À
L
Ậ
P
nối CSDL
T
H
I
Ế
T
83
2/16/2011
84
Xây dựng website dưới góc nhìn ngộ nghĩnh
Nguồn từ:
T ần Thị Bích Hạnh (2007) Q á t ình âr , u r x y
dựng 1 website dưới góc nhìn ngộ
B
nghĩnh,
P
T
R
Ì
N
H
W
E Bài giảng môn: Lập trình và thiết kế
web, Khoa CNTT, ĐH KHTN
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
84
websitedevelopment-process/
2/16/2011
85
Đại Học Sài Gòn – Khoa CNTT
Bài thực hành 1
B Tổng quan về lập trình
P
T
R
Ì
N
H
W
E
ứng dụng web
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
85
2/16/2011
86
Khảo sát các website
Khảo sát các trang Web và rút ra các
nhận xét về cách thiết kế trang Web
Làm quen với cách sử dụng một số
B
công cụ tiện ích hỗ trợ trong quá
P
T
R
Ì
N
H
W
E
trình thiết kế Web
T
K
Ế
V
À
L
Ậ
P
Frontpage, Dreamweaver, …
T
H
I
Ế
T
86
Photoshop, Flash, …
2/16/2011
87
Khảo sát các website
Một số trang web cung cấp hình ảnh làm web
www.clipart.com
Một số trang web cung cấp các kiểu font chữ
B
Một số t ang eb c ng cấp mẫ thiết kế giao diện
P
T
R
Ì
N
H
W
E r w u u
web
T
K
Ế
V
À
L
Ậ
P
T
H
I
Ế
T
87
2/16/2011
88
Chuẩn bị chọn chủ đề đồ án
Hướng dẫn các hướng làm
website
B Th khả á b it
P
T
R
Ì
N
H
W
E am o c c we s e
T
K
Ế
V
À
L
Ậ
P
chọn website cho nhóm
T
Các file đính kèm theo tài liệu này:
- tkltweb_c01_tongquan_6505.pdf