Thiết kế web cơ bản

Nội dung đã trình bày các vấn đề cơ bản về lĩnh vực website và thiết kế website, một số các nguyên lý và nguyên tắc trong thiết kế website đảm bảo khả năng sử dụng và thói quen người dùn

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

BÀI GIẢNG

THIẾT KẾ WEB CƠ BẢN

THIẾT KẾ VÀ SÁNG TẠO ĐA PHƯƠNG TIỆN

T C GIẢ THS BÙI THỊ THU HUẾ

Hà nội - 2014

PTIT

LỜI NÓI ĐẦU

Giáo trình “Thiết kế web cơ bản” dùng cho sinh viên tham khảo, thuộc lĩnh vực công nghệ Đa phương tiện, với hai đơn vị học trình Nội dung của tài liệu đề cập (i) Tổng quan về website và thiết kế website; (ii) Thiết kế giao diện website; và (iii) Công nghệ phát triển website

Trong vài năm lại đây, giáo trình về thiết kế web được trình bày cho sinh viên đại học

về công nghệ thông tin là chính Nội dung giáo trình này thì liên quan đến cả thiết kế tương tác, thiết kế giao diện và một phần đề cập đến kĩ thuật trong lĩnh vực thiết kế website

Tài liệu được đánh số chương mục theo chữ số Ả rập Một số hình vẽ và bảng biểu trong các chương có giá trị minh hoạ Một số hình vẽ được trích từ các tài liệu tham khảo, để tiện đối chiếu và có thông tin sâu hơn

Nội dung đã trình bày các vấn đề cơ bản về lĩnh vực website và thiết kế website, một số các nguyên lý và nguyên tắc trong thiết kế website đảm bảo khả năng sử dụng và thói quen người dùng Nội dung chính của tài liệu tập trung vào cơ sở lý thuyết về thiết kế giao diện website Do nội dung cần trình bày liên quan kĩ thuật về lập trình, và dành cho sinh viên trong chuyên ngành thiết kế, nên một số kiến thức về kỹ thuật mới chỉ dừng lại ở mức cơ bản nhất,

đủ để sinh viên có thể tạo lên website trên mã nguồn mở Trong các chương có những thuật ngữ được chú thích bằng Tiếng Anh giúp đọc giả hiểu rõ hơn về từ gốc được sử dụng

Nội dung về website, một sản phẩm đa phương tiện tương tác gắn liền với công nghệ Một số thông tin liên quan đến kĩ thuật, thiết bị chỉ có nghĩa thời đoạn, mang tính minh họa Sinh viên có thể sử dụng các thiết bị và phần mềm tương đương để thực hiện xử lí các dữ liệu

đa phương tiện

Tác giả xin chân thành cám ơn các cán bộ Viện Công nghệ thông tin và truyền thông CDIT, Học viện Công nghệ bưu chính viễn thông PTIT đã trợ giúp để hoàn thành tài liệu này

PTIT

MỤC LỤC

MỤC LỤC 2

DANH MỤC HÌNH VẼ 4

DANH MỤC BẢNG BIỂU 9

CHƯƠNG 1 TỔNG QUAN 10

1.1 Tổng quan về website và thiết kế website 10

1.1.1 Các thuật ngữ và khái niệm 10

1.1.2 Lịch sử hình thành và phát triển công nghệ web 11

1.1.3 Những công nghệ phát triển web 16

1.1.4 Phân loại website 23

1.1.5 Quy trình phát triển website 27

1.1.6 Những vấn đề liên quan đến thiết kế website 33

1.2 Các nguyên lý và nguyên tắc thiết kế giao diện website 35

1.2.1 Mục tiêu thiết kế giao diện website 35

1.2.2 Các nguyên lý và nguyên tắc đảm bảo khả năng sử dụng 36

1.2.3 Những hướng dẫn thiết kế website đảm bảo trải nghiệm người dùng 47

1.3 Đánh giá giao diện website 52

1.3.1 Mục đích của đánh giá 52

1.3.2 Các phương pháp đánh giá 52

1.4 Bài tập 60

CHƯƠNG 2 THIẾT KẾ GIAO DIỆN WEBSITE 61

2.1 Tổ chức và điều hướng website 61

2.1.1 Tổ chức website 61

2.1.2 Điều hướng website 72

2.1.3 Site map 90

2.2 Thiết kế giao diện Website 97

2.2.1 Trang 97

2.2.2 Dàn trang 105

2.2.3 Văn bản 116

2.2.4 Màu sắc 128

2.2.5 Hình ảnh 138

2.2.6 Các thành phần đa phương tiện khác 144

2.3 Bài tập 151

PTIT

CHƯƠNG 3 CÔNG NGHỆ PHÁT TRIỂN WEBSITE 152

3.1 Phát triển website với mã nguồn mở 152

3.1.1 Khái niệm về mã nguồn mở 152

3.1.2 Giới thiệu các mã nguồn mở cho phát triển website 152

3.1.3 Phát triển website với Wordpress 154

3.2 HTML 157

3.2.1 Tổng quan về HTML 157

3.2.2 Một số thẻ chính trong HTML 158

3.2.3 Danh sách và bảng trong HTML 160

3.2.4 Tạo liên kết trong HTML 168

3.2.5 Chèn các thành phần trang vào HTML 172

3.2.6 Giới thiệu về HTML5 175

3.3 CSS 176

3.3.1 Tổng quan về CSS 176

3.3.2 Các thành phần của CSS 176

3.3.3 Định dạng văn bản với CSS 183

3.3.4 Giới thiệu về CSS3 187

3.4 JavaScript 190

3.4.1 Cơ bản về JavaScript 190

3.4.2 Nhúng JavaScript vào trang web 191

3.4.3 Sự kiện với JavaScript 194

3.4.4 Xử lý với nhiều trình duyệt 194

3.5 Bài tập 196

TÀI LIỆU THAM KHẢO 197

PHỤ LỤC 1 198 PHỤ LỤC 2 209 PTIT

DANH MỤC HÌNH VẼ

Hình 1-1 Mô hình Client – Server của Website 17

Hình 1-2 Tài liệu mẫu về cấu trúc HTML 18

Hình 1-3 Ví dụ về CSS 19

Hình 1-4 Ví dụ về cấu trúc JavaScript trong HTML 19

Hình 1-5 Ví dụ về Plugin trong HTML 20

Hình 1-6 Tổng quan về CGI 21

Hình 1-7 Trang web hướng văn bản 24

Hình 1-8 Trang web thiết kế GUI 25

Hình 1-9 Thiết kế Web ẩn dụ 25

Hình 1-10 Trang web thực nghiệm 25

Hình 1-11 Sơ đồ cấu trúc website 30

Hình 1-12 Phác thảo khối trang chủ 31

Hình 1-13 Thiết kế trang chủ 32

Hình 1-14 Sắp xếp liệt kê 37

Hình 1-15 Hệ thống phân cấp hơi sâu, không đảm bảo nguyên tắc 3-CLICK 38

Hình 1-16 Ví dụ về quá trình tải trang web trên trình duyệt (Nguồn: Web Design: 40

Hình 1-17 Khoảng cách và độ rộng của mục tiêu 41

Hình 1-18 Mục tiêu bên trái yêu cầu nhấp chuột vào vị trí đặt liên kết (Firefox); Mục tiêu bên phải có không gian điểm ảnh có thể nhấp chuột lớn hơn (Apple) 42

Hình 1-19 Giao diện FreshBooks nhóm các đối tượng tương tự nhau vào một nhóm 43

Hình 1-20 Sự cố sẽ xảy ra nếu người dùng nhấn nhầm nút 43

Hình 1-21 Các điểm Magic pixel trên màn hình 44

Hình 1-22 Tương phản chữ và màu nền 44

Hình 1-23 Lựa chọn nền màu trắng để làm nổi bật nội dung chính 46

Hình 1-24 Kích thước hộp search trên Google 47

Hình 1-25 Kích thước hộp Search trên Apple 47

Hình 1-26 Laber được đặt ở phía trên 48

Hình 1-27 Ứng dụng chuyển động thị giác trong thiết kế 48

Hình 1-28 Giao diện người dùng đẹp tạo ấn tượng đầu tiên 49

Hình 1-29 Liên kết website luôn để màu xanh 50

Hình 1-30 Sử dụng không gian trắng trong thiết kế website 51

PTIT

Hình 1-31 Người dùng không quan tâm đến quảng cáo 51

Hình 1-32 Nhận dạng trang chủ 56

Hình 1-33 Lệnh Ping xác định đáp ứng của máy chủ 59

Hình 1-34 Báo cáo chất lượng của một website bằng công cụ đánh giá 59

Hình 2-1 Thuần tuyến tính 61

Hình 2-2 Thiết kế tương tác với hình thức thuần tuyến tính 62

Hình 2-3 Tuyến tính thay thế 62

Hình 2-4 Tuyến tính tùy chọn 62

Hình 2-5 Tuyến tính ngắn trang 63

Hình 2-6 Lưới 63

Hình 2-7 Sắp xếp các mặt hàng theo dạng lưới 64

Hình 2-8 Cấu trúc cây hẹp 64

Hình 2-9 Cấu trúc cây rộng 65

Hình 2-10 Cấu trúc cây yêu cầu tìm ngược 65

Hình 2-11 Cấu trúc phân cấp website đơn giản 66

Hình 2-12 Cấu trúc phân cấp website với các liên kết quay lại 67

Hình 2-13 Tổ chức lưới đầy đủ 67

Hình 2-14 Hình thức hỗn hợp 68

Hình 2-15 Tổ chức dạng cây kết hợp tuyến tính 68

Hình 2-16 Cấu trúc hub and spoke và cấu trúc cây gần giống nhau 69

Hình 2-17 Thuần web 69

Hình 2-18 Cấu trúc website từ viễn cảnh người dùng 70

Hình 2-19 Đường dẫn website thực tế có thể rất phức tạp 71

Hình 2-20 Phân loại điều hướng 73

Hình 2-21 Khu vực điều hướng chính trong trang chủ 74

Hình 2-22 Ba loại kết hợp giữa điều hướng chính và điều hướng vị trí 75

Hình 2-23 Điều hướng vị trí từ menu 75

Hình 2-24 Điều hướng nhúng thẳng đứng 76

Hình 2-25 Điều hướng theo ngữ cảnh 76

Hình 2-26 Điều hướng liên kết nhúng với một định dạng nội dung khác 77

Hình 2-27 Điều hướng liên kết nhúng với liên kết website khác 77

Hình 2-28 Điều hướng liên kết liên quan 78

PTIT

Hình 2-29 Liên kết nhanh đặt trong menu drop – down 79

Hình 2-30 Điều hướng footer 80

Hình 2-31 Điều hướng tiện ích trên trang Vitaminshoppe 81

Hình 2-32 Liên kết điều hướng ngoài trang trên Google 81

Hình 2-33 Điều hướng chính sử dụng liên kết logo trên website Apple.com 82

Hình 2-34 Lựa chọn quốc gia trên website 83

Hình 2-35 Lựa chọn quốc gia trên Google News 83

Hình 2-36 Điều hướng liên kết nội bộ trang 84

Hình 2-37 Xác định vị trí hiện tại của người dùng qua trang và nhãn 85

Hình 2-38 Ví dụ về thước đo độ sâu mô tả nhãn trang 86

Hình 2-39 Liên kết sao chép 88

Hình 2-40 Màn hình phân bố cho điều hướng trái 89

Hình 2-41 Điều hướng phải 89

Hình 2-42 Ví dụ về vị trí đặt điều hướng site map 91

Hình 2-43 Site map văn bản 91

Hình 2-44 Site map trình bày dạng bảng 92

Hình 2-45 Sử dụng các biểu tượng cho mô tả site map văn bản 92

Hình 2-46 Site map dạng Flowchart 93

Hình 2-47 Site map đồ họa sắp xếp dạng hình tròn 93

Hình 2-48 Site map đồ họa dạng 3D 94

Hình 2-49 Site map đồ họa ẩn dụ 94

Hình 2-50 Thiết kế site map dạng menu drop down 95

Hình 2-51 Site map có chức năng đánh dấu vị trí hiện tại của người dùng 95

Hình 2-52 Trình duyệt hiển thị tất cả các trùy chọn 97

Hình 2-53 Top 5 trình duyệt phổ biến ngày nay 98

Hình 2-54 Đo không gian Canvas 100

Hình 2-55 Trang chủ được thể hiện qua cấu trúc và layout 102

Hình 2-56 Các thành phần chính của trang web 104

Hình 2-57 Tỷ lệ vàng 106

Hình 2-58 Tỷ lệ vàng và mối quan hệ giữa 2 con số 106

Hình 2-59 Hình xoáy ốc trong tỷ lệ vàng 107

Hình 2-60 Trang twitter áp dụng tỷ lệ vàng trong thiết kế 107

PTIT

Hình 2-61 Tỷ lệ 1/3 trong thiết kế layout 108

Hình 2-62 Nguyên tắc tỷ lệ 1/3 áp dụng cho xác định vị trí đặt logo trên website 109

Hình 2-63 Looking room áp dụng hiệu quả trong thiết kế website 110

Hình 2-64 Looking room áp dụng không hiệu quả trong thiết kế website 110

Hình 2-65 Bố cục tam giác áp dụng vào thiết kế layout 111

Hình 2-66 Sắp xếp bố cục cân bằng đối xứng trên trang chủ 112

Hình 2-67 Cân bằng không đối xứng trong thiết kế layout 113

Hình 2-68 Hệ thống lưới 960 với 12 cột 114

Hình 2-69 Thiết kế hệ thống lưới 960, 12 cột cho trang web 114

Hình 2-70 Hệ thống lưới 960 với 16 cột 115

Hình 2-71 Khoảng trắng trong website 115

Hình 2-72 Khoảng trắng chủ động và bị động 116

Hình 2-73 Font chữ an toàn phù hợp với hệ điều hành Mac OS và Windows 117

Hình 2-74 Một số kiểu font chữ serif 118

Hình 2-75 Font chữ hiện đại được sử dụng làm tiêu đề trong tạp chí 119

Hình 2-76 Slab serif được sử dụng trên trang pallian creative 119

Hình 2-77 Phông chữ Sans serif và Serif được dùng cho nội dung văn bản 120

Hình 2-78 Trang web sử dụng sans serif cho tiêu đề và serif cho nội dung 120

Hình 2-79 Font chữ handwritten 121

Hình 2-80 Sử dụng phông chữ viết tay để gây sự chú ý 121

Hình 2-81 Font chữ Novelty 122

Hình 2-82 Thiết kế trang Hype nation 122

Hình 2-83 Các font chữ Dingbat 123

Hình 2-84 Kích thước của chữ 123

Hình 2-85 Trình bày cỡ chữ khác nhau trong trang web 124

Hình 2-86 Ví dụ về kerning 125

Hình 2-87 Ví dụ về letter spacing 125

Hình 2-88 Ví dụ leading 126

Hình 2-89 Một số lỗi khi sử dụng căn lề hai bên 126

Hình 2-90 Vòng tròn màu cơ bản 128

Hình 2-91 Sử dụng màu đỏ làm màu chủ đạo của trang web 131

Hình 2-92 Màu đỏ được sử dụng tạo điểm nhấn trên trang web 131

PTIT

Hình 2-93 Màu cam được sử dụng tạo sự chú ý trên trang web 132

Hình 2-94 Màu vàng được sử dụng website 132

Hình 2-95 Màu xanh được sử dụng trên trang web thể hiện sự tự nhiên 133

Hình 2-96 Sử dụng màu xanh dương trong thiết kế trang web 134

Hình 2-97 Màu tím được sử dụng là màu chủ đạo của trang web 134

Hình 2-98 Sử màu đen cho trang web 135

Hình 2-99 Màu trắng tạo hiệu quả tương phản tốt nhất trên trang web 135

Hình 2-100 Màu nền xám được sử dụng phổ biến trên website 136

Hình 2-101 Màu nâu sử dụng trong thiết kế web 137

Hình 2-102 Sự khác nhau giữa hình ảnh bipmat và vector 139

Hình 2-103 (a) Dạng gif hiển thị trong suốt, (b) Dạng gif hiển thị hình ảnh động 140

Hình 2-104 So sánh các định dạng hình ảnh 141

Hình 2-105 Website The Bam Creative 142

Hình 3-1 Thống kê các mã nguồn mở được sử dụng trong website 152

Hình 3-2 Giao diện DashBroad 155

Hình 3-3 Chú giải được định dạng như một danh sách định nghĩa trong HTML 162

Hình 3-4 Danh dách theo thứ tự với thẻ <OL> 163

Hình 3-5 Trang web minh họa danh sách những cách thức khác nhau 164

Hình 3-6 Bảng đơn giản – toàn bộ dữ liệu nằm trên một dòng 167

Hình 3-7 Dùng thẻ <th> để bổ sung tiêu đề bảng 168

Hình 3-8 Các site đơn vị của PTIT với những liên kết URL kèm theo 169

Hình 3-9 Danh sách nhảy trang nằm ở đầu trang sử dụng các liên kết đến các dấu neo đặt tên phía dưới hồ sơ 170

Hình 3-10 Trang web có chèn hình ảnh logo 174

Hình 3-11 Mô hình tổ chức liên kết với file CSS bên ngoài 180

Hình 3-12 Cấu trúc Media queries trong CSS3 187

Hình 3-13 Ví dụ nhúng JavaScript vào HTML 191

Hình 3-14 Nhúng JavaScript vào các trình xử lý sự kiện 193

PTIT

DANH MỤC BẢNG BIỂU

Bảng 1.1 Đo khả năng sử dụng 54

Bảng 2.1 Các vấn đề trong thiết kế website 96

Bảng 2.2 Không gian cavas nhỏ nhất cho các độ phân giải màn hình khác nhau 100

Bảng 2.3 Bit và số lượng màu 129

Bảng 2.4 Màu sắc trong HTML 130

Bảng 2.5 Gợi ý sử dụng định dạng Audio 147

Bảng 3.1 Bảng thuộc tính của thẻ BODY 159

Bảng 3.2 Bảng các thẻ định dạng văn bản 160

Bảng 3.3 Bảng các thẻ tạo bảng chính 165

Bảng 3.4 Ý nghĩa các tham số trong thẻ định dạng bảng biểu 166

Bảng 3.5 Ý nghĩa các tham số trong thẻ liên kết 169

Bảng 3.6 Thuộc tính thẻ <body> cho màu liên kết 172

Bảng 3.7 Tham số trong thẻ hình ảnh 173

Bảng 3.8 Đơn vị chiều dài CSS 178

Bảng 3.9 Đơn vị màu sắc CSS 179

Bảng 3.10 Bảng media type sử dụng trong CSS3 187

Bảng 3.11 Bảng media feature sử dụng trong CSS3 188

Bảng 3.12 Bảng thuộc tính và giá trị web fonts cho CSS3 189

Bảng 3.13 Danh sách những sự kiện JavaScript 194

PTIT

CHƯƠNG 1 TỔNG QUAN

Nội dung chương 1 sẽ cung cấp cho độc giả những kiến thức cơ bản liên quan đến lĩnh vực website và thiết kế website Qua đó người đọc sẽ có cái nhìn tổng quan nhất về lĩnh vực phát triển website, tầm quan trọng của thiết kế website và các vấn đề liên quan đến thiết kế website Thiết kế website không chỉ đơn thuần là việc tạo ra một trang web đẹp, người thiết

kế không chỉ đơn thuần có kiến thức về mỹ thuật và đồ họa Sản phẩm website là sản phẩm của đa phương tiện tương tác Do vậy thiết kế website cần đảm bảo những nguyên tắc và nguyên lý về khả năng sử dụng và thói quen người dùng Nội dung chương 1, tác giả cũng đưa ra những nguyên l cơ bản nhất được áp dụng vào thiết kế website Đánh giá website là công việc quan trọng trước khi đưa sản phẩm ra thị trường, để đảm bảo thiết kế đạt được mục tiêu đặt ra, website cần được đánh giá Tác giả đưa ra các phương pháp giúp người thiết kế có thể đánh giá được một website

1.1 Tổng quan về website và thiết kế website

1.1.1 Các thuật ngữ và khái niệm

Theo W3C: WWW (World wide web) là mạng lưới nguồn thông tin cho phép ta khai thác thông qua một số công cụ, chương trình hoạt động dưới các giao thức mạng WWW là công cụ, phương tiện hay đúng hơn là một dịch vụ của Internet Người ta thường gọi tắt là web Web cung cấp thông tin rất đa dạng, bao gồm văn bản, hình ảnh, âm thanh, video, Thông tin được biểu diễn bằng trang web (Web page)

Trang web là một văn bản được sử dụng trên mạng toàn cầu (World Wide Web) Văn bản này được viết bằng cách sử dụng định dạng HTML hay XHTML Các trang web liên kết với nhau bằng các siêu liên kết (Hyperlink) Trang web được hiển thị thông qua 1 trình duyệt web (Browser)

 Website

Website là một tập hợp các trang web bao gồm hình ảnh, file, âm thanh thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain) Một website phải được đặt trên ít nhất 1 máy chủ

 Trình duyệt (Browser)

Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trò chơi và các thông tin khác ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ Văn bản và hình ảnh trên một trang web có thể chứa siêu liên kết tới các trang web khác của cùng một địa chỉ web hoặc địa chỉ web khác Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các trang web một cách nhanh chóng và dễ dàng thông qua các liên kết đó Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau

Một số trình duyệt web hiện nay cho máy tính cá nhân bao gồm Internet Explorer, Mozilla Firefox, Safari, Opera, Avant Browser, Konqueror, Lynx, Google Chrome, Flock, Arachne, Epiphany, K-Meleon và AOL Explorer

PTIT

 URL (Uniform Resource Locator): Định vị tài nguyên thống nhất

URL được dùng để tham chiếu tới tài nguyên trên Internet URL mang lại khả năng siêu liên kết cho các trang web Các tài nguyên khác nhau được tham chiếu tới các địa chỉ, chính

là URL, còn được gọi là địa chỉ web hay là liên kết mạng (hay ngắn gọn là liên kết)

Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói cách khác, dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số được đánh địa chỉ bằng số Do tính chất chỉ có 1 và 1 duy nhất trên Internet nên không thể đăng k được Domain Name khi mà người khác đã là chủ sở hữu

Ví dụ: Trang web phổ biến nhất, Google.com có IP là 74.125.128.113

Người dùng không thể nhớ được chuỗi số địa chỉ IP mà họ chỉ nhớ địa chỉ

“google.com” Hệ thống phân giải tên miền DNS (Domain Name System ) sẽ làm công việc

“dịch” domain name thành IP tương ứng của Google, mang về các dữ liệu cần thiết và hiện

hình trang web tìm kiếm này

1.1.2 Lịch sử hình thành và phát triển công nghệ web

12/3/1989, Tim Berners-Lee, một nhà khoa học máy tính người Anh và cựu nhân viên của CERN, đã khai sinh ra Word Wide Web Ông thấy rằng các nhà khoa học đã có vấn đề chia sẻ thông tin trên toàn cầu bởi vì họ đã sử dụng rất nhiều máy tính khác nhau với các hệ thống điều hành khác nhau và các định dạng tài liệu khác nhau Ông đã nghĩ về siêu văn bản (nơi liên kết trong một tài liệu gọi đến các tài liệu khác) cho một dự án thông tin trước đó được gọi là Enquire Thực hiện siêu văn bản HTML (HyperText Markup Language) - một hệ thống gắn thẻ đơn giản lấy cảm hứng từ SGML - để làm nó dễ dàng cho mọi người tạo ra và các tài liệu lưu trữ Sau đó, ông nói thêm URL (Uniform Resource Locators) để trỏ đến tài liệu, và HTTP (HyperText Transport Protocol) để lấy chúng trên internet Cuối cùng, ông chỉ cần một trình duyệt để hiển thị các trang HTML Berners-Lee đã viết một ứng dụng trên máy tính NeXT của ông, và gọi nó là World Wide Web Đề xuất này được dành cho một hệ thống thông tin liên lạc hiệu quả hơn nhưng Berners-Lee cuối cùng nhận ra rằng nó có thể được thực hiện trên toàn thế giới

Timothy John Berners-Lee sinh ngày 8/6/1955 tại London, Anh

Ông là người cha đẻ của Word Wide Web

Berners-Lee đã không cấp bằng sáng chế, giấy phép kinh doanh các trang web, để kiếm tiền từ nó Thay vào đó, ông mời những người khác để thiết lập các website và phát triển trình duyệt Tháng 6/1993, trình duyệt NCSA Mosaic xuất hiện (NCSA Mosaic được viết tại Trung

PTIT

tâm ứng dụng máy tính Quốc gia tại Đại học Illinois Urbana-Champaign Mosaic giới thiệu thẻ <img> HTML, để hình ảnh xuất hiện bên cạnh văn bản thay vì tải một cách riêng biệt Đó

là một sự thay đổi mới Các trang web đã có hình hài trông giống như tờ báo hoặc tạp chí Mosaic đã trở nên phổ biến với những người biết về Internet, nhưng Netscape Navigator

đã thành lập tưởng rằng các trang web là một cách làm giàu nhanh chóng Netscape đã được phát triển sau khi Jim Clarke, ông chủ cũ của Silicon Graphics, thuê một số các lập trình viên Mosaic và thành lập Mosaic Communications Họ nhanh chóng tạo ra một "đối thủ Mosaic" - Mozilla, dựa trên Mosaic và Godzilla - và đưa ra phiên bản 0.9 trong tháng 10 năm 1994 Nó

đã gần như trở thành đồng hành với các trang web Điều này đã cho nó sức mạnh để đổi mới,

và thêm các tính năng nó muốn Phát triển của nó bao gồm Frame, cookies, JavaScript (ban đầu LiveScript) và bảo mật thông tin SSL, mà chúng ta vẫn sử dụng ngày nay Tuy nhiên, Tim Berners-Lee đã thành lập World Wide Web Consortium (W3C) tại MIT, cũng trong tháng 10 năm 1994, với mục tiêu chỉ đạo và chuẩn hóa phát triển web

Sự bùng nổ thực sự bắt đầu vào năm 1995, nhờ vào Netscape ra mắt vào 9/8/1995 và Microsoft Windows 95 vào 24/8/1995 Netscape là một công ty dịch vụ máy tính ở Mỹ nổi tiếng với trình duyệt Netscap Navigation Đó là sự thành công ngoạn mục tại thời điểm đó Ngay sau đó, Windows 95 đã ra mắt phần mềm lớn nhất trong lịch sử Điều này đã giúp tăng doanh số bán hàng máy tính có thể lướt web Microsoft đã phát triển trình duyệt riêng của mình, Internet Explorer, sử dụng mã được cấp phép từ Mosaic Điều này đánh dấu sự bắt đầu của cuộc chiến trình duyệt đầy gay gắt

Hàng loạt các công ty ra đời các website: Amazon và eBay (1995), Craigslist và Hotmail (1996), Netflix và Google (1997), và PayPal (1999) Một số công ty mới mở đã được bán cho các công ty lớn hơn để phát triển nhanh hơn: Yahoo đã mua 18 công ty trước năm

2000, bao gồm Broadcast.com (radio internet, $5,7 tỷ) và GeoCities (web hosting, $3,6 tỷ) AOL đã mua 21 công ty, bao gồm cả Netscape ($4,2 tỷ) và MapQuest ($1,1 tỷ) Microsoft đã mua lại mạng Web TV ($ 425 triệu) và Hotmail ($ 400 triệu)

Các công ty mới làm việc trên web tự nhiên muốn thêm tính năng mới vào HTML, vốn

đã được tiêu chuẩn hóa HTML 2 vào năm 1994 Vì vậy, nhiều tính năng mới xuất hiện mà đã được soạn thảo HTML 3 chưa đầy một năm sau đó, và HTML 4 vào năm 1997

Microsoft dự định đánh bại Netscape, chủ yếu bằng cách sản xuất một trình duyệt tốt hơn Là công ty phần mềm 20 tuổi nhanh chóng tìm ra phiên bản đặc biệt cho IE Microsoft

đã ra phiên bản trình duyệt IE4 vào năm 1997, và IE5 vào năm 1999 Trong khi đó Netscape

đã không thể hoàn thành trình duyệt phiên bản 5 của mình và thị phần của nó đã giảm

Vào năm 1998, Netscape đã tạo ra mã nguồn mở của nó, và Mozilla Foundation đã viết lại nó Kết quả, cuối cùng, là Firefox: trình duyệt lớn duy nhất không chỉ dành riêng cho nhu cầu của người sử dụng, mà là nhu cầu của các công ty khổng lồ như Microsoft, Apple hay Google

PTIT

Netscape đã kiện với Bộ Tư pháp Mỹ rằng Microsoft đã có một lợi thế không công bằng bởi vì họ đã gán trình duyệt IE với hệ điều hành Windows, đã làm dấy lên một cuộc chiến chống độc quyền 1997-2000

Sự xuất hiện của mạng Wifi băng thông rộng cung cấp tốc độ truy cập nhanh hơn có thể đáp ứng được với các trang web phức tạp Trong giai đoạn này có một sự thay đổi lớn trong phong cách phát triển website đó là tính cá nhân và cộng tác Vào năm 2000, hơn một nửa số

hộ gia đình ở Mỹ có truy cập Internet (theo Nielsen), và người dùng không thụ động trong sử dụng website Chính người dùng trở thành những người đóng góp, và có tiếng nói Có một sự bùng nổ trong blog, podcast và chia sẽ tập tin peer-to-peer, và bắt đầu xuất hiện mạng xã hội

Ev Williams đã đưa ra Blogger vào năm 1999 Phần mềm viết blog miễn phí cho người dùng từ việc tạo ra các trang web: họ chỉ có thể đăng những suy nghĩ của mình bất cứ khi nào

họ cảm thấy thích nó Hơn nữa, các blog cho phép các người đọc cho kiến, tham gia vào bài viết trong khi kiểu web cũ không cho phép

Podcasting bắt đầu vào năm 2000 với một dịch vụ tin tức được gọi là MyAudio2Go.com, nhắm vào máy nghe nhạc MP3 cầm tay mới Người dùng muốn bắt đầu

"audioblogging", và phát triển phần mềm Dave Winer cho phép các bài hát và podcast được bao gồm trong các phiên bản của RSS (rich site syndication), phần mềm mà ông đã được phát triển để đi với phần mềm viết blog của mình, Radio Userland Với RSS, người dùng không cần phải truy cập vào một trang web để xem nếu có một bài đăng blog mới hoặc audioblog

Họ có thể đăng k vào nguồn cấp dữ liệu RSS và có nó được gửi

Nhưng Napster là trang web nổi tiếng nhất trong thời kỳ này Nó hoạt động từ tháng 6/1999 đến tháng 7/2001, và phổ biến rộng rãi các định dạng nhạc MP3 Napster sử dụng một

hệ thống peer-to-peer cho phép người dùng chia sẻ các tập tin mà không cần sử dụng một máy chủ tập tin trung tâm Đó là một minh hoạ tuyệt vời của sức mạnh của Internet phân phối, mặc

dù nó đã sớm đóng cửa bởi luật pháp quy định bản quyền âm nhạc Tuy nhiên, sau sự ra mắt của iPod của Apple trên ngày 23 tháng 10 năm 2001, đã có không thiếu các nhu cầu, và người

sử dụng nhanh chóng tìm thấy các nguồn khác cung cấp Chúng bao gồm BitTorrent (2001), KaZaA (2001), eMule (2002) và nhiều hơn nữa, mà đỉnh cao là một trang web torrent, The Pirate Bay (2003)

Mọi người cũng đã cộng tác trực tuyến bằng cách sử dụng phần mềm "wiki" được kích hoạt hàng trăm người đóng góp vào website duy nhất Chương trình wiki đầu tiên, WikiWikiWeb đã được đưa ra vào năm 1995, nhưng tưởng đạt đến một đối tượng rộng hơn sau khi Wikipedia được thành lập vào tháng 1 năm 2001 Wikipedia sử dụng phần mềm MediaWiki mã nguồn mở để tạo ra một bách khoa toàn thư dựa hoàn toàn trên nội dung do người dùng tạo ra Nhiều diễn đàn, các nhóm cộng đồng và các công ty thấy rằng họ có thể sử dụng wiki để nắm bắt và chia sẻ chuyên môn của họ, và nó khiến wiki trở nên phổ biến trên toàn cầu

Giai đoạn này cũng chứng kiến sự nảy mầm của các tưởng về mạng xã hội Người dùng đã bị xã hội hóa trực tuyến trên AOL và tiếp tục trên Slashdot (1997), Digg (2004) và Reddit (2005), và trong thế giới ảo như Second Life (2003) và World of Warcraft (2004) Mạng xã hội cho phép người thực sử dụng tên thật của họ để tương tác với bạn bè trực tuyến thực sự Mặc dù một vài mạng xã hội đã được đưa ra vào những năm 1990, Friendster

PTIT

(2002) là mạng xã hội đầu tiên gây sự chú Nó đã nhanh chóng theo sau MySpace và LinkedIn (2003), sau đó Orkut của Google và Facebook của Mark Zuckerberg (2004) Sớm

có trang web tương tự ở các nước khác, chẳng hạn như Nexopia ở Canada và VKontakte ở Nga

Các trang web cần được sử dụng trên máy tính như nền tảng ứng dụng Web 2.0 đã chính thức được xác định vào năm 2004 bởi Dale Dougherty, phó chủ tịch của O'Reilly Web 2.0 dựa trên web cộng tác, nhưng các công ty bây giờ phải cung cấp RIAs (Rick Internet Application) khuyến khích sự tham gia của người sử dụng Nội dung động, không tĩnh, vì vậy trình duyệt cần thiết để hỗ trợ một số dạng chương trình, và các web server cần thiết để có thể lấy thông tin từ các trang web khác nhau Điều này sẽ tạo một dịch vụ mà không một trang web nào có thể cung cấp

Web 2.0 còn được gọi web trí tuệ, người dùng làm trung tâm, trang web có sự tham gia đọc-ghi Các trang web có thể kết hợp dữ liệu từ nhiều nguồn khác nhau, đánh dấu một sự thay đổi từ các trang web với các dịch vụ web

Một số các công nghệ đã có trong khoảng thời gian này, nhưng tưởng phổ biến Web 2.0 cung cấp một khuôn khổ cho sự phát triển trong tương lai Phần lớn các trang web 2.0 không thành công, nhưng những website sống sót bao gồm Flickr (2004), YouTube (2005), Twitter (2006), Tumblr (2007), và Soundcloud (2008)

Năm 2006, John Markoff cho ra web 3.0 Ý tưởng cơ bản của Web 3.0 là để xác định cấu trúc dữ liệu và liên kết chúng hiệu quả hơn Web 3.0 cố gắng liên kết, tích hợp và phân tích dữ liệu từ các bộ dữ liệu khác nhau để được dòng thông tin mới Nó có thể cài thiện quản

l dữ liệu, hỗ trợ tiếp cận Internet di động, đổi mới sáng tạo và mô phỏng, khuyến khích các yếu tố của hiện tượng toàn cầu hóa, nâng cao sự hài lòng của khách hàng và giúp tổ chức hợp tác các trang web mạng xã hội Sự khác biệt chính giữa web 2.0 và web 3.0 là mục tiêu của web 2.0 là tạo ra nội dung của người dùng và nhà sản xuất, trong khi đó mục tiêu web 3.0 là liên kết các tập dữ liệu

Một trình duyệt web không thực sự được thiết kế để chạy các ứng dụng, và W3C hướng tới một XHTML mới Điều này nhằm mục đích tạo ra một "ngữ nghĩa web" Các nhà sản xuất trình duyệt không được điều khiển thị trường: Netscape đã hấp hối, sau khi kinh nghiệm của mình với các vụ kiện chống độc quyền ở Mỹ và châu Âu, Microsoft phát hành IE6 (2001) và sau đó bỏ rơi phát triển trình duyệt IE6 là tốt cho thời gian đó, nhưng nó đã không được thiết

kế để chạy JavaScript vào tốc độ yêu cầu bởi các ứng dụng dựa trên trình duyệt

Với sự ra đời của Adobe Flash, nếu người dùng thêm một plug-in Flash cho trình duyệt của họ, các trang web sẽ trở nên phong phú hơn bao gồm game video Hơn nữa, nó có cùng

mã làm việc cho dù người dùng sử dụng máy tính Windows hoặc Mac Nhưng Flash không phải là một tiêu chuẩn HTML mở, và một số người mong muốn các trình duyệt nên xử l video giống như cách họ xử l hình ảnh, với một từ khóa đơn giản

Trong năm 2008, W3C công bố bản dự thảo đầu tiên của HTML 5 Nó hội tụ các ngành công nghiệp web xung quanh một phiên bản của HTML có thể hỗ trợ lập trình trực tuyến tinh

PTIT

vi và chạy trên tất cả các loại thiết bị mà không cần plug-ins Nó cũng khởi động một kỷ nguyên mới, nơi mà ba công cụ trình duyệt chính - Trident của Microsoft, Gecko của Mozilla,

và WebKit hậu thuẫn của Apple/ Google- cạnh tranh để thực hiện tiêu chuẩn công nghiệp và chạy điểm chuẩn JavaScript

Trong thập kỷ đầu tiên của trang web đã bị giới hạn bởi việc sử dụng chậm và chi phí thực hiện cuộc gọi điện thoại Các hầu hết người dùng trực tuyến chỉ sử dụng trong thời gian ngắn Với băng thông rộng và Wi-Fi đã lan rộng đến các cửa hàng cà phê và các khu vực khác, họ đã nghĩ đến việc di chuyển trực tuyến Câu trả lời là điện thoại thông minh

Mọi thứ thay đổi vào năm 2007 khi Apple tung ra iPhone với những gì mà Steve Jobs gọi là "Lần đầu tiên trình duyệt hoàn toàn có thể sử dụng điện thoại di động" Ông nói:

“Internet nằm trong túi của bạn” Bây giờ, các nhà phát triển web sẽ có để sản xuất phiên bản đơn giản của trang web cho người dùng điện thoại di động: điện thoại thông minh có thể truy cập các trang web tương tự như máy tính, thường sử dụng các mạng Wi-Fi nhanh chóng Tại Anh, Apple đã không quảng cáo iPhone có thể truy cập "tất cả các phần của Internet", một phần vì nó không hỗ trợ Adobe Flash Apple cho rằng nó hỗ trợ các tiêu chuẩn web Sự thành công của iPhone, tiếp theo sự thành công của iPad trong năm 2010, giúp chống lại Flash và hướng tới HTML 5

Đầu tiên, vào năm 2008, Apple phát hành một bộ phát triển phần mềm cho phép các nhà phát triển tạo ra các ứng dụng cho iPhone và iPod Touch, và bán chúng thông qua cửa hàng trực tuyến của Apple Các nhà phát triển có thể kiếm nhiều tiền hơn từ các ứng dụng hơn từ các trang web miễn phí Sau đó Google và Microsoft tạo ra các cửa hàng ứng dụng cho Android và Windows Phone Thay vì tất cả mọi người tập trung vào các trang web mở, họ đã

có sự cạnh tranh giữa các hệ sinh thái của các ứng dụng khép kín

Thứ hai, sự phát triển nhanh chóng của điện thoại di động và truy cập máy tính bảng nhắc nhở các nhà phát triển web tập trung vào các trang web thân thiện trên điện thoại di động

và trong nhiều trường hợp người dùng máy tính sẽ kém hơn Máy tính vẫn giao phần lớn các lưu lượng truy cập, nhưng sự tăng trưởng nhanh chóng trong điện thoại di động đã làm cho nó quan trọng hơn, và nó dễ dàng hơn để kiếm tiền

Sự phát triển của các trang web trong giai đoạn này được đánh dấu bằng một sự gia tăng rất lớn trong việc theo dõi Trong một cuộc nói chuyện tại MIT vào năm 2013, chuyên gia bảo mật Bruce Schneier đã chỉ ra rằng: "Giám sát là mô hình kinh doanh của internet Chúng tôi

đã xây dựng được hệ thống do thám trên con người để thay đổi dịch vụ."

Điện thoại di động đã làm cho mọi việc tồi tệ hơn, bởi vì mạng lưới vận chuyển phải theo dõi điện thoại ở khắp mọi nơi Ngay cả các ứng dụng điện thoại đơn giản, chẳng hạn như đèn pin, thường yêu cầu truy cập vào vị trí và thông tin nhạy cảm khác, không phải vì các ứng dụng cần họ, nhưng vì mô hình quảng cáo đòi hỏi điều đó

Nhưng điện thoại thông minh cũng đã được giải thoát Người dùng có thể chia sẻ những

gì họ đang làm thông qua các dịch vụ như Facebook, Twitter và Instagram Hầu hết thông tin

đó là tầm thường, nhưng một số trong số đó là tin tức, như một chiếc máy bay đã bị rơi trên sông Hudson ở New York vào năm 2009 Những người biểu tình sử dụng điện thoại thông

PTIT

minh để chia sẻ thông tin của tình trạng bất ổn dân sự trong thời gian, ví dụ, mùa xuân Ả Rập

ở Ai Cập, Libya và Tunisia trong khi chính phủ cũng sử dụng các mạng lưới và dịch vụ tương tự để cố gắng theo dõi chúng xuống

Để giới hạn tất cả đó, vào năm 2013, Edward Snowden tiết lộ rằng Cơ quan An ninh Quốc gia Mỹ (NSA) và các tổ chức nhà nước tương tự đang chạy hoạt động giám sát lớn, một phần bằng cách chặn lưu lượng truy cập internet Điều này bao gồm một cơ sở dữ liệu hình ảnh không mong muốn, xâm phạm đời tư,… Một số người dùng đang thực hiện các bước để bảo vệ mình, và một số công ty sẽ di chuyển dữ liệu của họ cho các công ty và các quốc gia bảo vệ an ninh và sự riêng tư của họ Tuy nhiên, các trang web đã bùng nổ từ một website vào năm 1991 lên khoảng 180 triệu website ngày hôm nay, và hơn hai tỷ người đang online

1.1.3 Những công nghệ phát triển web

Các trang web hiện nay chủ yếu là một mô hình mạng client-server của website cơ bản với ba yếu tố phổ biến :

và xây dựng trong công nghệ Các công nghệ có thể từ các chương trình CGI đơn giản viết bằng PERL để nhiều tầng dựa trên ứng dụng Java phức tạp và bao gồm các công nghệ phụ trợ như các máy chủ cơ sở dữ liệu có thể hỗ trợ các trang web

 Client side: là liên quan với các trình duyệt web và công nghệ hỗ trợ nó chẳng hạn như HTML, CSS, JavaScript và các ngôn ngữ và các điều khiển ActiveX hoặc Netscape plug-in, mà được sử dụng để tạo ra các trình bày của một trang hoặc cung cấp các tính năng tương tác

người dùng Các yếu tố như vậy có thể là các mạng khác nhau trên mạng internet hoặc mạng nội bộ

PTIT

Người

dùng

Nhà phát triển

- Hệ điều hành

- Phần mềm Webserver

- Phần mềm Middleware

- Database Công nghệ

Nền tảng của bất kỳ trang web nào là markup Công nghệ Markup là HTML, XHTML,

và XML định nghĩa cấu trúc và nghĩa của nội dung trang Mặc dù Markup phổ biến trong trang web sử dụng HTML, tuy nhiên các trang hiển thị đặc biệt có thể sử dụng công nghệ khác HTML (HyperText Markup Language) là công nghệ đánh dấu chính được sử dụng trong các trang web HTML truyền thống được xác định bởi một SGML (Standardized General Markup Language) DTD (Document Type Definition) và có ba phiên bản chính (HTML 2, HTML 3.2 và HTML 4) HTML 4.01 là phiên bản mới của HTML (Ngày nay đã

ra phiên bản HTML 5) Cấu trúc mã lệnh HTML như Hình 1-2 Ngoài ra, HTML được sử dụng chủ yếu cho cấu trúc tài liệu, nhiều nhà phát triển sử dụng nó để định dạng văn bản cho màn hình hiển thị Sau này nhiệm vụ định dạng văn bản được thay thế bởi CSS (Cascading Style Sheet)

PTIT

Hình 1-2 Tài liệu mẫu về cấu trúc HTML

XHTML được cải thiện lại HTML sử dụng XML (ngôn ngữ đánh dấu mở rộng) XHTML giải quyết được hai vấn đề chính với HTML

 XHTML tiếp tục buộc các nhà thiết kế phân tách giao diện và cấu trúc của các tài liệu, bằng cách chú trọng nhiều hơn đến style sheet

Web

XML: Extensible Markup Language (XML) đang được quan tâm đến như một công nghệ đánh dấu sẽ thay đổi bộ mặt của Web XML là một hình thức của SGML sửa đổi cho Web; do đó, nó cho phép các nhà phát triển xác định ngôn ngữ đánh dấu riêng của họ YML (Your Markup Language) với XML

 Style Sheet Technologies

Ngôn ngữ đánh dấu như HTML không vượt trội về trình bày Đây không phải là một thiếu sót của công nghệ, chỉ đơn giản là HTML mà không được thiết kế cho nhiệm vụ này Trong thực tế, giao diện của các trang được kiểm soát bởi các yếu tố thiết kế được cung cấp bởi CSS (Cascading Style Sheet) Trong một số trường hợp, đặc biệt là khi sử dụng một ngôn ngữ XML, chuyển đổi đánh dấu cũng có thể được yêu cầu để tạo ra các định dạng trình bày phù hợp, vì vậy XSL (eXtensible Style Language) sẽ được sử dụng tốt

CSS (Cascading Style Sheets) được sử dụng để xác định giao diện của một trang web công nghệ này đã có mặt ít nhất là một phần trong các trình duyệt cũ như Internet Explorer 3.0, nhưng nó có từ lâu đã được sử dụng trong HTML cho thiết kế giao diện Sau này CSS dựa trên bố trí cho một loạt các lý do, bao gồm cả thiếu của trình duyệt phù hợp và công cụ hỗ trợ, cũng như sự thiếu hiểu biết phát triển đơn giản Với sự nổi lên của các thế hệ 6.x các trình duyệt, CSS cuối cùng đang trở thành một viễn cảnh khả thi cho bố trí trang

CSS dựa các quy tắc Style Sheet để xác định trình bày từng loại một như một nhóm, lớp, các thẻ hoặc từ khóa Quy tắc style sheet có thể được sử dụng để xác định một loạt các khía cạnh hình ảnh của đối tượng trang, bao gồm màu sắc, kích thước và vị trí Cấu trúc CSS như trong Hình 1-3

PTIT

Thông tin về ECMAScript và JavaScript có thể được tìm thấy tại các URL:

 Netscape Thông tin JavaScript: http://developer.netscape.com/javascript/

 Microsoft Scripting Thông tin: http://msdn.microsoft.com/scripting

Hình 1-4 Ví dụ về cấu trúc JavaScript trong HTML

Với sự gia tăng của tiêu chuẩn tài liệu mô hình đối tượng, JavaScript trở thành gần như

là quan trọng như HTML hoặc CSS cho các nhà phát triển web, bởi vì nó sẽ cung cấp khả năng điều khiển bất kỳ khía cạnh của một tài liệu HTML Trong quá khứ, trang thao tác được

có thể sử dụng đối tượng trình duyệt và tài liệu theo quy định của mỗi nhà cung cấp trình duyệt Sự khác biệt trình duyệt thực hiện tất cả các kịch bản đơn giản nhưng khó thực hiện Các đặc điểm kỹ thuật W3C DOM hứa hẹn sẽ giúp giảm bớt qua trình duyệt kịch bản vì nó

PTIT

xác định một giao diện ngôn ngữ trung lập cho phép các chương trình và kịch bản tự động truy cập và cập nhật nội dung, đánh dấu, và phong cách của tài liệu web Kể từ khi DOM được sử dụng thông qua JavaScript để thao tác các tài liệu HTML, cách sử dụng này thường được gọi là HTML động, hoặc DHTML (dynamic HTML) DOM có hai biến thể chính tại thời điểm này: DOM Level 1, cung cấp phương tiện truy cập và thao tác cơ bản để đánh dấu các yếu tố và các ràng buộc để thao tác các thẻ HTML, và DOM Mức 2, mở rộng giao diện để cho phép thao tác của thuộc tính CSS và cung cấp một giao diện với sự kiện phong phú hơn

Add-on (hoặc addon) là thuật ngữ chung cho những gì tăng cường một ứng dụng Nó bao gồm snap-in, plug-in, theme và skin Một phần mở rộng tiện ích các tính năng cốt lõi của một ứng dụng bằng cách thêm một mô-đun tùy chọn, trong khi một plug-in tiện ích sẽ chỉnh các lớp bên ngoài chức năng của một ứng dụng Một theme hay skin add-on là một gói phần mềm cài sẵn có bổ sung hoặc thay đổi các chi tiết xuất hiện đồ họa, đạt được bằng việc sử dụng một giao diện người dùng đồ họa (GUI) có thể được áp dụng cho phần mềm cụ thể và các trang web cho phù hợp với mục đích, chủ đề, hoặc thị hiếu người dùng khác nhau để tùy chỉnh giao diện của một phần mềm

Lợi ích chính của plug-in là chúng có thể được tích hợp tốt vào các trang Web Nó có thể bao gồm bằng cách sử dụng các <embed> hoặc thẻ <object>, mặc dù là <embed> Ví dụ,

để nhúng một bộ phim flash ngắn gọi là welcome.swf có thể được xem bởi một Flash player plug-in, bạn sẽ sử dụng HTML sau:

PTIT

vào và đầu ra cơ bản cho các chương trình phía máy chủ đưa ra bởi một máy chủ Web, như minh họa trong Hình 1-6

Thông tin về CGI có thể được tìm thấy tại các URL:

 CGI Overview and Documentation: http://hoohoo.ncsa.uiuc.edu/cgi/overview.html

 CGI Resource Index: http://cgi.resourceindex.com/

3 Chương trình CGI được khởi động qua server và môi trường dữ liệu

2 Yêu cầu HTTP Server

4 Chạy chương trình CGI

1 Nhập nội

dung đầu

vào

5 Kết quả HTTP header và HTML Markup bởi CGI

Chương trình CGI

Đầu vào: Dữ liệu được mã hóa và gửi đi qua các phương thức HTTP

Đầu ra: HTML hoặc nội dung thông qua giao thức HTTP

Định nghĩa đầu vào/đầu ra GCI cho chương trình web

Hình 1-6 Tổng quan về CGI

 Server-Side Scripting

Công nghệ Script phía server, chẳng hạn như Microsoft Active Server Pages (ASP) hoặc Macromedia ColdFusion, cho phép các trang động được tạo ra dễ dàng Tất cả các ngôn ngữ Script phía server phổ biến bao gồm ASP, ColdFusion, JSP, và ngôn ngữ PHP làm việc tương tự nhau Ý tưởng là mẫu script chứa HTML và ngôn ngữ script thực hiện phía server để xây dựng website Quá trình này là ngôn ngữ script phía server thường được sử dụng để xây dựng các trang động từ cơ sở dữ liệu, cá nhân hóa nội dung cho người dùng, hoặc tạo ra các thành phần tái sử dụng trong các trang

Máy chủ API (Application Programming Interfaces - giao diện lập trình ứng dụng) chương trình đặc biệt phía server, xây dựng để tương tác chặt chẽ với các máy chủ Web Một cách đơn giản để nghĩ về chương trình API phía Server là plugin vào máy chủ Web API phổ biến bao gồm ISAPI cho máy chủ Microsoft IIS, NSAPI cho máy chủ Netscape/ IPlanet/Sun, Apache module cho Apache, và Java servlet cho các máy chủ Web hỗ trợ Java Lợi ích của các chương trình máy chủ API là sự tương tác chặt chẽ với các máy chủ web thường với hiệu suất cao

1.1.3.3 Network

Các giao thức cơ bản của Web bao gồm giao thức mạng TCP/ IP Không phải là một giao thức duy nhất, nhưng một nhóm các giao thức TCP/IP là điều làm cho tất cả các dịch vụ

PTIT

trên Internet có thể thực hiện IP (Internet Protocol) cung cấp cơ bản giải quyết và định tuyến thông tin cần thiết để cung cấp dữ liệu qua Internet Tuy nhiên, TCP (Transport Control Protocol) cung cấp các cơ sở mà làm cho thông tin liên lạc đáng tin cậy, cũng như chỉnh sửa

và phát lại Kết hợp với các tên miền dịch vụ (hoặc DNS), đó là quá trình dịch tên miền đầy

đủ như www.webdesignref.com thành địa chỉ IP cơ bản (66.45.42.235) Kiến thức về các giao thức có vẻ không quan trọng đối với nhiều nhà thiết kế web, nhưng nó đặc biệt hữu ích để hiểu chi tiết mạng khi thiết kế trang web có khả năng mở rộng

 HTTP (Hypertext Transport Protocol)

Là giao thức cấp ứng dụng mà xử lý các thông tin giữa người dùng, nói chung là một trình duyệt web, và một máy chủ Web Giao thức đơn giản và xác định tám lệnh cơ bản (GET, POST, HEAD, PUT, DELETE, OPTION, TRACE, và CONNECT) có thể được thực hiện bởi một người dùng để yêu cầu hoặc thao tác dữ liệu Câu trả lời có thể chứa cả mã số và văn bản (ví dụ, 404 Not Found) và liên kết dữ liệu

Là được sử dụng bởi các trình duyệt để xác định loại dữ liệu mà họ đã nhận được từ một máy chủ Cụ thể, một HTTP header được gọi là kiểu nội dung chứa một giá trị MIME, đó là bằng một trình duyệt hiểu những gì loại dữ liệu mà nó nhận được và phải làm gì với nó Các máy chủ nối thêm loại MIME để tiêu đề HTTP hoặc bằng cách tạo ra chúng từ một chương trình hoặc bằng cách lập bản đồ một phần mở rộng tập tin (ví dụ, html.) đến một MIME thích hợp gõ (ví dụ text / html) MIME cho phép các trang web cung cấp bất kỳ loại dữ liệu, không chỉ các định dạng Web phổ biến như HTML

Những yêu cầu và liên kết đến trang Web cần thiết sử dụng một chương trình giải quyết Người sử dụng web đã quen thuộc với các URL (Uniform Resource Locator), như http://www.webdesignref.com/, trong đó có xác định giao thức và địa điểm Thông số kỹ thuật, URI (Uniform Resource Identifier) là thuật ngữ thường được chấp nhận cho tên ngắn hoặc các chuỗi địa chỉ đó đề cập đến một tài nguyên trên Web Tuy nhiên, bất cứ tên gì, URI hoặc URL không cung cấp tất cả những gì có thể được yêu cầu trên trang web trong tương lai,

kể từ khi nó xác định địa điểm duy nhất Uniform Resource Name (URN) và Uniform Resource Characteristics (URCs) cuối cùng có thể được thực hiện cung cấp thông tin không phụ thuộc vào vị trí và giải quyết thêm về nguồn lực tương ứng Tuy nhiên, đặc điểm tài nguyên được quy định thường được sử dụng hình thức meta data

PTIT

 Web service

Các khái niệm cơ bản Web service là các trang web có thể tương tác trực tiếp với nhau, trao đổi thông tin hoặc thậm chí chạy các chương trình từ xa Web service cho phép ứng dụng phức tạp được xây dựng bằng cách sử dụng mảnh của những trang web khác nhau Ví dụ, chạy một trang web du lịch nhỏ và cung cấp các chuyến bay, khách sạn, cho thuê xe và đặt phòng trực tiếp từ trang web của bạn thông qua trang web của đối tác du lịch lớn mà người dùng không nhận thức được Web service sẽ cung cấp phương tiện cho các trang web nói chuyện với những người khác và liên tục tạo ra một dịch vụ có thể

Chìa khóa để Web service là việc là sử dụng các định dạng bản tin chuẩn hóa, thường quy định trong XML Một giao thức được gọi là SOAP (Simple Object Access Protocol) xuất hiện là Web service Ngoài các giao thức bản tin web service cũng đòi hỏi một cơ sở cung cấp dịch vụ để mô tả được dịch vụ của họ, và cho người sử dụng để khám phá các dịch vụ họ yêu cầu Cho đến nay, mô tả dịch vụ đang được xử lý bởi một giao thức gọi là WSDL (Web Service Description Language), trong khi phát hiện dịch vụ được xử lý bởi UDDI (Universal Description, Discovery, and Integration)

1.1.4 Phân loại website

Có thể nhóm các website theo nội dung:

tổ chức Đây là những trang web phổ biến nhất trên Internet và thông tin được cung cấp theo thời gian

 Website giao dịch: Đây là loại trang web có thể được sử dụng để thực hiện một số giao dịch hoặc nhiệm vụ Các trang web thương mại điện tử là ví dụ về thể loại này

trung vào sự tương tác giữa các khách truy cập của trang web Dựa vào cộng đồng các trang web có xu hướng tập trung vào một chủ đề hay loại người cụ thể và khuyến khích tương tác giữa các cá nhân cùng một mục đích

tác thú vị, có thể bao gồm giao dịch, cộng đồng, và các yếu tố thông tin

các bản ghi web (còn gọi là blog) , và các trang web có thể không theo quy ước của Web phổ biến hoặc có một mục đích kinh tế được xác định rõ

Có thể nhóm các website dựa trên các tổ chức, trong phân loại này chúng ta có 5 nhóm chính:

cá nhân cho lợi ích thương mại, hoặc trực tiếp thông qua thương mại điện tử hoặc gián tiếp thông qua thúc đẩy cho một số dịch vụ mua hàng hóa

ứng một số nhu cầu xã hội và pháp lý

 Website giáo dục: là trang web của một số cơ sở giáo dục, và nó được sử dụng để hỗ trợ mục tiêu học tập hay nghiên cứu

PTIT

 Website phi lợi nhuận: là trang web từ thiện tồn tại để thúc đẩy các mục tiêu của một tổ chức phi lợi nhuận, các hoạt động từ thiện của một cá nhân hoặc tổ chức

thường là một cửa hàng sáng tạo, hình thức biểu hiện cá nhân

Việc phân loại này cũng chỉ là tương đối, tùy thuộc vào đặc tính sử dụng và mục đích

sử dụng có thể một trang web liên quan đến 2 hoặc 3 nhóm

Phân loại theo hình ảnh trực quan Chúng ta có thể thấy một số trang web tập trung nhiều vào vào văn bản, nhưng một số lại tập trung vào trình bày đồ họa hoặc hình ảnh Có 4 loại thiết kế phổ biến là:

vậy các trang web, như thể hiện trong Hình 1-7, tương đối nhẹ, tải nhanh, và tối giản trong thiết kế

 Phong cách GUI: là những trang web mà theo một số giao diện đồ họa người dùng (GUI) từ thiết kế phần mềm, chẳng hạn như thanh menu trên cùng định hướng, các biểu tượng, cửa sổ và pop-up Trang web này thêm vào đó là cách sử dụng văn bản hướng tới toàn diện về thiết kế giao diện người dùng Hình 1-8 cho thấy một số ví dụ về các trang web phong cách GUI

 Các trang web ẩn dụ: mượn tưởng từ "cuộc sống thực." Ví dụ, một trang web về xe hơi có thể sử dụng một bảng điều khiển và vô lăng trong thiết kế và chuyển hướng Một trang web được thiết kế ẩn dụ, như thể hiện trong Hình 1-9, có xu hướng sử dụng hình ảnh và tương tác

nhiên được sử dụng trong các trang web theo phong cách thiết kế thực nghiệm Hình 1-10

Hình 1-7 Trang web hướng văn bản

PTIT

Hình 1-8 Trang web thiết kế GUI

Hình 1-9 Thiết kế Web ẩn dụ

Hình 1-10 Trang web thực nghiệm

PTIT

Phân loại website theo dữ liệu

web này để thay đổi nội dung trên trang web người sở hữu phải truy cập trực tiếp vào các mã lệnh để thay đổi thông tin Không có cơ sở dữ liệu bên dưới hệ thống, không

có công cụ để điều khiển nội dung gián tiếp Dạng file của trang web tĩnh thường là

sự can thiệp của người lập trình web, không phải xử lý những mã lệnh phức tạp vì vậy việc thiết kế đặt để các đối tượng thoải mái và tự do sáng tạo của người thiết kế nên website tĩnh thường sở hữu được một hình thức hấp dẫn và bắt mắt Tuy nhiên vì không có hệ thống hỗ trợ thay đổi thông tin nên việc cập nhật thông website tốn nhiều chi phí và cần phải có người am hiểu kỹ thuật website thực hiện

hỗ trợ bởi các phần mềm phát triển web Với website động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy vấn tới một trang website Trang web được gửi tới trình duyệt gồm những câu chữ, hình ảnh, âm thanh hay những dữ liệu

số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa Chẳng hạn ứng dụng cơ sở của bạn có chức năng như một công cụ thương mại điện tử (một cửa hàng trực tuyến) trưng bày catalogue sản phẩm trên website hay theo dõi kho hàng, khi một mặt hàng được giao, ngay lập tức những trang có liên quan đến sản phẩm đó phản ánh sự thay đổi này Những website cơ sở dữ liệu còn có thể thực hiện những chức năng truyền

và xử lý thông tin giữa doanh nghiệp – doanh nghiệp Thông tin trên website động luôn luôn mới vì nó dễ dàng được người dùng cập nhật thông qua việc sử dụng các công cụ cập nhật của các phần mềm quản trị website Vì vậy website được hỗ trợ bởi

cơ sở dữ liệu là phương tiện trao đổi thông tin nhanh nhất với người dùng Internet Website động có tính tương tác với người sử dụng cao

Phân loại theo tương tác người dùng

 Web 1.0 là web thế hệ đầu tiên, website thường chỉ một chiều thông tin từ website đến người xem Người được ở vào thế bị động là tiếp nhận thông tin và không có sự phản hồi trực tiếp lên website

tham gia đang tải bài viết và tham gia xây dựng nội dung của website đó, dạng web này mang tính cộng đồng và tất cả các dữ liệu trên đây là dữ liệu mở được tất cả mọi người xem web cung cấp Chính vì thế dạng website này thân thiện với người đọc tạo cảm giác như người đọc cũng là người sở hữu website Nó cuốn hút mọi người cùng cung cấp thông tin, chia sẻ dữ liệu, tạo ra những nguồn dữ liệu khổng lồ trên internet Website dạng này đang được phát triển mạnh nhất trong các thể loại website tương tác

 Web 3.0: Đây sẽ là web thế hệ thứ 3, giai đoạn hiện nay dạng web này trong thời kỳ đang hình thành và vẫn còn nhiều khái niệm chưa thống nhất Tuy nhiên nếu nói một cách đơn giản dể hiểu thì Web 3.0 sẽ có vai trò giống như một trợ l biết được tất cả mọi điều về người dùng và thu thập được mọi thông tin trên Internet để trả lời tất cả những câu hỏi họ đưa ra

PTIT

1.1.5 Quy trình phát triển website

Để giảm bớt khó khăn trong việc xây dựng các trang web, cần xây dựng website theo quy trình Việc phát triển website theo quy trình sẽ giúp giải giảm thiểu nguy cơ thất bại dự

án, đối phó với những thay đổi trong dự án, và cung cấp các thông tin phản hồi đầy đủ cho quản lý trong suốt quá trình Quy trình thực hiện bắt đầu với một giai đoạn lập kế hoạch, giai đoạn thiết kế, thực hiện và thử nghiệm, và kết thúc với một giai đoạn bảo trì Trường hợp dự

án có những thay đổi thì các bước có thể được xem xét lại

Ở phương pháp thác nước, kế hoạch phát triển được lên từ trước Tuy nhiên nó cũng chính là điểm yếu lớn nhất Vì có rất nhiều điều chưa chắc chắn trong yêu cầu thực hiện một

dự án Website Cách tiếp cận mô hình thác nước có thể khá cứng nhắc và có thể yêu cầu các nhà phát triển dừng dự án và thực hiện lại nhiều bước nếu quá nhiều thay đổi xảy ra Mặc dù vậy, mô hình thác nước cho phát triển website là rất phổ biến vì nó là dễ hiểu và dễ làm theo

1.1.5.1 Xác định mục tiêu và yêu cầu website

Xác định các mục tiêu và mục đích của trang web, xây dựng một bản sắc trang web, xác định những nội dung cần có trên trang web, dự đoán yêu cầu của một website, và tìm ra cách

để thu hút người dùng vào trang web sau khi nó được công bố trên Internet

Nhiều dự án website cuối cùng thất bại bởi vì thiếu mục tiêu rõ ràng Trong những lần đầu tiên thiết kế website, nhiều trang web của công ty được xây dựng hoàn toàn chỉ là để cho thấy rằng các công ty đó có một trang web Đối thủ cạnh tranh với các trang web được coi là một mối đe dọa Nhiều trang web không thực sự được thiết kế để cung cấp cho bất cứ mục đích gì khác là sự hiện diện của công ty Ngày nay, mục tiêu thiết kế website đã trở nên quan trọng và thường được xác định rõ ràng đặt lên phía trước Đến với mục tiêu cho một trang web không phải là khó khăn, vấn đề là tinh chỉnh nó Tránh xác định với những mục tiêu mơ

hồ như "cung cấp dịch vụ khách hàng tốt hơn" hoặc "kiếm nhiều tiền hơn bằng cách mở ra một thị trường trực tuyến"

Chú ý rằng trong số các mục tiêu phát triển cần có mục tiêu đo lường được Điều này là rất quan trọng, vì nó sẽ cho thấy một cách rõ ràng sự thành công hay thất bại, cũng như xác định ngân sách thực tế cho dự án Ví dụ như tăng lượng khách truy cập lên bao nhiêu % hoặc doanh thu tăng %,…

 Brainstorming

Có rất nhiều mục tiêu, và khách hàng muốn mọi thứ trên trang web Cần lưu rằng, một website không không thể thỏa mãn được tất cả mọi thứ cho tất cả mọi người Để xác định mục tiêu, cần có một buổi brainstorming để đưa nhiều tưởng cho việc thực hiện trang web Trong trường hợp này, tốt nhất là tập trung nhóm bằng cách nói chuyện về các vấn đề trang web Cố gắng tìm ra triết lý thiết kế chung

 Thu hẹp mục tiêu

Trong phiên họp brainstorming, tất cả các tưởng tốt sẽ được lập ra một danh sách các mong muốn và nó sẽ tài liệu mô tả tất cả tưởng có thể đưa vào một trang web bất kể giá cả, tính khả thi, hoặc ứng dụng Tuy nhiên, cuối cùng danh sách đó sẽ được thu hẹp đến những gì

PTIT

là hợp lý và phù hợp cho trang web Ví dụ một trang web của công ty mà chứa thông tin sản phẩm, thông tin nhà đầu tư, thông cáo báo chí, thông tin việc làm, và phần hỗ trợ kỹ thuật Mỗi người có quyền sở hữu một phần đặc biệt và sẽ nghĩ rằng phần của mình là quan trọng nhất Tất cả mọi người nghĩa là muốn có một liên kết của mình ở một phần trên trang chủ Do vậy sự thỏa hiệp với rất nhiều bên liên quan sẽ là những thử thách Cần thu hẹp mục tiêu để chọn ra những tưởng quan trọng và cần thiết nhất cho trang web

Cách tốt nhất để thu hẹp mục tiêu là để đảm bảo rằng người dùng luôn luôn xem xét Những gì một nhóm brainstorming muốn và những gì người dùng muốn không luôn luôn tương ứng Điều đầu tiên cần làm là để mô tả chính xác đối tượng của website và lý do của họ cho ghé thăm trang web Hầu hết người dùng có một mục tiêu cụ thể trong suy nghĩ Xem xét yêu cầu với một số câu hỏi cơ bản về người sử dụng trang web, chẳng hạn như:

 Họ đang ở đâu?

 Họ bao nhiêu tuổi?

 Giới tính của họ là gì?

 Ngôn ngữ nào họ nói?

 Làm thế nào để họi sử dụng thành thạo về mặt kỹ thuật trang web?

 Những loại kết nối nó có Internet?

 Những loại máy tính mà họ sẽ sử dụng?

 Những loại trình duyệt họ sẽ có thể sử dụng?

Tiếp theo, hãy xem xét những gì người dùng đang làm tại trang web:

 Khi nào họ sẽ truy cập vào website?

 Họ sẽ ở lại bao lâu trong trang web?

 Từ trang nào họ sẽ rời khỏi Website? Vì những gì mà họ sẽ rời khỏi trang web?

 Khi nào họ sẽ trở lại website? ,

 Bao lâu họ lại quay lại website?

Trong khi mô tả cho người sử dụng từ những câu hỏi, cần nhanh chóng xác định rằng trang web sẽ không có duy nhất một người dùng với mục tiêu duy nhất Hầu hết các trang web, có rất nhiều loại người sử dụng với những đặc điểm và mục tiêu khác nhau

 Số liệu thống kê Logs

Nếu trang web đã được chạy trong một thời gian, chúng có một kho thông tin về người dùng, số liệu thống kê và các bản ghi Tìm kiếm các bản ghi có thể để xác định thông tin hữu ích, chẳng hạn như các loại trình duyệt thường truy cập vào các trang web, mô hình chung khi nào và như thế nào khách truy cập sử dụng trang web, lưu lượng hiện tại và yêu cầu máy chủ,

và một loạt các tưởng có giá trị khác Tất nhiên, số liệu thống kê các bản ghi sẽ không cho biết nhiều về sự hài lòng của người sử dụng và các chi tiết cụ thể của việc sử dụng trang web

PTIT

Cách tốt nhất để hiểu người dùng là nói chuyện với họ Phương pháp tốt nhất là phỏng vấn trực tiếp để giải quyết bất kỳ câu hỏi mà nào mong muốn về người dùng và đặc điểm của

họ Một cuộc khảo sát cũng có thể phù hợp, nhưng các cuộc phỏng vấn trực tiếp cung cấp khả năng để khám phá những tưởng vượt ra ngoài câu hỏi được xác định trước Tuy nhiên, phỏng vấn hoặc thậm chí khảo sát người dùng có thể rất tốn thời gian Từ các cuộc phỏng vấn người sử dụng và các cuộc điều tra hoặc thậm chí từ suy nghĩ về người dùng chung cần tạo ra

hồ sơ chi tiết của người sử dụng Xem xét phát triển ít nhất ba người sử dụng Đối với hầu hết các trang web, ba khuôn mẫu người sử dụng phải tương ứng với người dùng thiếu kinh nghiệm, người dùng web có kinh nghiệm nhưng không ghé thăm trang web của thường xuyên, và một người dùng hiểu được website và ghé thăm trang web của thường xuyên Xác định tỷ lệ % cho mỗi nhóm chung Sau đó thực hiện làm hồ sơ cụ thể cho từng người bằng cách sử dụng nhưng câu hỏi về người dùng như phần trên Lập kế hoạch kịch bản giúp tập trung vào những gì người dùng thực sự muốn làm Qua đó mục tiêu ban đầu có thể chưa phù hợp với những gì mà người dùng quan tâm Do đó cần phân tích rủi ro và sửa đổi lại mục tiêu ban đầu

 Yêu cầu website

Dựa trên các mục tiêu của trang web và những gì người dùng mong muốn của website Những yêu cầu này nên được tạm chia thành cùng hình ảnh, kỹ thuật, nội dung và yêu cầu chuyển giao Để xác định yêu cầu, bạn có thể hỏi những câu hỏi như thế này:

 Những loại nội dung sẽ được yêu cầu?

 Những loại nhìn nên có trên các trang web?

 Những loại chương trình sẽ phải được xây dựng?

 Những loại hạn chế website liên quan đến băng thông, kích thước màn hình, trình duyệt?

Yêu cầu này sẽ bắt đầu có chi phí website và các vấn đề tiềm năng thực hiện Những yêu cầu sẽ đề nghị cần bao nhiêu nhà phát triển và hiển thị những nội dung gì còn thiếu Nếu các yêu cầu vượt quá mức về tăng tiềm năng, thì cần xem lại giai đoạn mục tiêu hoặc đặt câu hỏi người dùng Những bước này có thể lặp đi lặp lại nhiều lần cho đến khi có một kế hoạch website hoặc đặc điểm kỹ thuật cụ thể

1.1.5.2 Xây dựng kế hoạch phát triển website

Khi một mục tiêu, đối tượng, và các yêu cầu trang web đã được thảo luận và xây dựng tài liệu, cần xây dựng kế hoạch phát triển website chính thức Kế hoạch phát triển website chứa các phần sau:

 Quyết định mục tiêu tổng quát website

 Thảo luận mục tiêu chi tiết và cung cấp các số liệu đo lường để xác minh lợi ích của website

 Thảo luận hồ sơ người dùng, xác định đối tượng và nhiệm vụ của người dùng khi truy cập vào website

 Thảo luận về các tình huống công việc khi người dùng sử dụng website

PTIT

 Yêu cầu nội dung cần đưa ra danh sách các nội dung về văn bản, hình ảnh và các

phương tiện cần thiết khác cho trang web

 Yêu cầu kỹ thuật: cung cấp một cái nhìn tổng quan của loại công nghệ sẽ sử dụng trong

dự án phát triển website, chẳng hạn như HTML, JavaScript, CGI, Java, plug-in Nó nên bao gồm cả những kỹ thuật khó thực hiện như yêu cầu bảo mật, đa thiết bị, và bất kỳ yêu cầu kỹ thuật khác có liên quan với khả năng của người truy cập

 Yêu cầu thị giác: nên phác thảo cơ bản cho thiết kế giao diện, cần phải nêu rõ những hạn chế sử dụng đồ họa và đa phương tiện, chẳng hạn như kích thước màn hình, băng thông, Có thể phác thảo một số chi tiết cụ thể, chẳng hạn như sử dụng logo của tổ chức, phông chữ cần thiết, hoặc sử dụng màu sắc

 Yêu cầu về lưu lượng: cần chỉ ra những yêu cầu về lưu lượng, đặc biệt là cân nhắc lưu trữ Xác định các yêu cầu cơ bản như có bao nhiêu người ghé thăm trang web, có bao nhiêu trang được sử dụng trong một ngày và kích thước của một trang điển hình? Mặc

dù chỉ là dự đoán nhưng nó có thể cung cấp ngắn gọi máy chủ và băng thông cần thiết

để cung cấp cho website

 Yêu cầu khác: Có thể có các yêu cầu khác mà cần phải được làm chi tiết trong kế hoạch website, chẳng hạn như yêu cầu ngôn ngữ, vấn đề pháp lý, tiêu chuẩn,…

lượng chi tiết các phần khác nhau trong một trang web Đặt tên thích hợp cho các bộ phận Thường là một sơ đồ website giống như trong Hình 1-11

 Nhân sự: Phần này xác định các chi tiết nguồn lực cần thiết để thực hiện dự án website Xác định khối lượng công viện cho từng người thuộc 4 lĩnh vực: nội dung, công nghệ, thiết kế, và quản lý

 Time line: thời gian sẽ hiển thị như thế nào khi tiến hành dự án

 Ngân sách: chủ yếu được xác định từ các yêu cầ và các vấn đề như chi phí tiếp thị, cấp giấy phép,… cũng được giải quyết trong ngân sách

Hãy nhớ rằng, mục đích của kế hoạch là để truyền đạt mục tiêu của trang web đến những người tham gia dự án khác nhau Không những vậy nó còn là hồ sơ dự thầu

Hình 1-11 Sơ đồ cấu trúc website

PTIT

1.1.5.3 Giai đoạn thiết kế

Giai đoạn thiết kế hoặc là thú vị nhất đối với hầu hết các nhà thiết kế web Trong giai đoạn này, cả kỹ thuật và hình ảnh cần được phát triển Tuy nhiên, trước khi bản thiết kế được xây dựng, cần thu thập nhiều nội dung càng tốt Nó sẽ ảnh hưởng đến hình thức các trang web Nếu nội dung được viết với văn phong nghiêm túc thì hình ảnh không thể thú vị và tự

do, trang web sẽ rất xa lạ đối với người sử dụng Nhìn vào nội dung cho phép thiết kế thích hợp nội dung Tuy nhiên trên thực tế việc thu thập nội dung thường không được chú trọng trước đó

Quy tắc: Thiết kế nên tiến hành từ trên xuống từ trang chủ, trang tiểu mục và cuối cùng

là các trang nội dung

Đầu tiên xem xét việc phác thảo trên giấy với các khối như trong Hình 1-12 Các khối cho phép các nhà thiết kế tập trung vào các loại đối tượng trong trang và tổ chức ở các vị trí

và bố cục trang

Hình 1-12 Phác thảo khối trang chủ

PTIT

 Thiết kế trên giấy và màn hình

Giai đoạn tiếp theo của thiết kế là giấy hoặc màn hình giai đoạn tạo mẫu Trong giai đoạn này, thiết kế có thể một trong hai phác thảo hoặc tạo ra thiết kế một kỹ thuật cho thấy một cái nhìn trực quan nhiều chi tiết hơn về một trang điển hình trong trang web Hãy chắc chắn rằng, cho dù thiết kế trên giấy hoặc màn hình, cửa sổ trình duyệt được giả định và kích thước màn hình được xem xét

Giai đoạn thiết kế cần sự sáng tạo, những yêu cầu hình ảnh được thể hiện trong đặc điểm thiết kế Xác định kích thước tập tin, màu sắc, hạn chế trình duyệt Một thiết kế điển hình được thể hiện trong Hình 1-13

Một khi các website giả lập chấp nhận được, đó là thời gian để thực hiện các trang web thực sự, nội dung thực phải được đặt trong trang, các thành phần phía sau và các yếu tố tương tác được tích hợp và các thiết kế trực quan Thực hiện công nghệ phát triển website cho dự án

1.1.5.5 Giai đoạn thử nghiệm

Kiểm tra thiết kế trên máy chủ thử nghiệm trong trình duyệt phổ biến nhất và các phiên bản trình duyệt trên máy Mac , PC, và Linux trong hầu hết các hệ điều hành phổ biến

PTIT

(Windows XP, Vista , Mac OS X ) tại một loạt các màn hình độ phân giải; xác nhận mã; kiểm tra lỗi chính tả; sửa chữa các lỗi mã hóa; và nếu không đảm bảo rằng mỗi khách truy cập có thể điều hướng thông qua các trang web không có vấn đề kỹ thuật

Trong giai đoạn này cũng cần thực hiện đánh giá website của từ thiết kế giao diện, nội dung, khả năng sử dụng, thói quen người dùng đến các vấn đề về kỹ thuật Sau khi tất cả các công việc đã hoàn thiện, sẵn sàng cho khởi chạy website

1.1.5.6 Ra mắt trang web và bảo trì

Kế hoạch bảo mật một tên miền và lưu trữ, tải lên các tập tin của trang web đến một máy chủ lưu trữ, kiểm tra lại các trang web, và sẵn sàng để duy trì trang web Đảm bảo rằng nội dung của trang web vẫn có liên quan và cập nhật bằng cách thêm mới và chỉnh sửa nội dung hiện có, cũng như cải tiến khác cho trang web

1.1.6 Những vấn đề liên quan đến thiết kế website

Có 5 khía cạnh liên quan đến thiết kế website

bày văn bản, tổ chức văn bản này

cạnh này là khía cạnh thể hiện rõ ràng nhất trong thiết kế web nhưng nó không phải là khía cạnh duy nhất, quan trọng nhất

nội bộ có liên quan đến phần cứng/ phần mềm của máy chủ sử dụng và kiến trúc mạng

sử dụng

 Mục đích: Lý do trang web tồn tại, thường liên quan đến một vấn đề kinh tế, là một phần quan trọng nhất của thiết kế web Yếu tố này cần được xem xét trong tất cả các quyết định liên quan đến các lĩnh vực khác

Mỗi khía cạnh của thiết kế website ảnh hưởng đến sự thay đổi theo loại website được xây dựng Một trang chủ cá nhân thường không có những cân nhắc kinh tế như một trang web mua sắm Một mạng nội bộ cho sản xuất công ty có thể không có những cân nhắc hình ảnh như một trang web giới thiệu phim Thiết kế website không chỉ là việc áp dụng các tưởng

cũ Đó là một cái gì hoàn toàn mới

Thiết kế web cần đảm bảo:

 Thiết kế phù hợp với nhu cầu của người sử dụng

 Sự cân bằng về hình thức và chức năng

 Chất lượng

 Sự phù hợp và đổi mới

1.1.6.1 Thiết kế phù hợp với nhu cầu của người sử dụng

Một mục tiêu cơ bản của thiết kế web là tập trung vào người sử dụng Một sai lầm thực

tế trong phát triển web là xây dựng cho nhu cầu và mong muốn của khách hàng hơn là cho người sử dụng trang web Cần nhớ nguyên tắc “Bạn không phải là người dùng” (YOU are NOT the USER) Những gì nhà thiết kế hiểu không phải là những gì người dùng sẽ hiểu Một

PTIT

nhà thiết kế có kiến thức về một trang web, hiểu thông tin, hiểu làm thế nào để cài đặt plug-in, hiểu tối ưu độ phân giải màn hình, thiết lập trình duyệt Khi họ xây dựng trang web xung quanh các đặc điểm hình ảnh của và trình độ kỹ năng riêng của mình, thường sẽ gây nhầm lẫn cho người sử dụng thực tế của trang web Cần phải chấp nhận thực tế là nhiều người dùng sẽ không nhất thiết phải có kiến thức về trang web Họ thậm chí có thể không có cùng sở thích với người thiết kế Do đó tầm quan trọng là thiết kế trang web theo mong muốn của người sử dụng

Một nguyên lý trong thiết kế web “NGƯỜI SỬ DỤNG KHÔNG phải là DESIGNERS” (USERS are NOT DESIGNERS) Không phải ai cũng là một nhà thiết kế web Không thể để khán giả làm đạo diễn một phim điện ảnh lớn dựa trên cơ sở là họ xem rất nhiều bộ phim, không nên mong đợi người dùng có thể thiết kế trang web chỉ vì họ đã duyệt vô số trang web Người dùng thường có yêu cầu và kỳ vọng không thực tế với trang web Họ không suy nghĩ cẩn thận về thành phần riêng lẻ của một trang web Tóm lại người dùng sẽ ko có sự hiểu biết tinh tế như một nhà thiết kế web Điều đó nói rằng, chìa khóa để thành công, có thể sử dụng

để thiết kế trang web là luôn luôn cố gắng suy nghĩ từ quan điểm của người sử dụng Thiết kế lấy người dùng làm trung tâm luôn luôn được đặt lên hàng đầu Nhưng cần lưu l không dễ dàng để có thể thỏa mãn được nhu cầu của nhiều người dùng khác nhau, do vậy cần thiết kế cho người sử dụng chung (Design for the common user)

1.1.6.2 Hình thức và chức năng

Một vấn đề quan trọng với thiết kế website là các trang web thường không cân đối hình thức và chức năng Dưới ảnh hưởng của chủ nghĩa hiện đại, nhiều nhà thiết kế đã từ lâu cho rằng hình thức là một cái gì đó nên thực hiện theo chức năng của nó Chức năng không có hình thức sẽ nhàm chán: trong khi các trang web có thể làm việc, nó sẽ không truyền cảm hứng cho người sử dụng Ngược lại, ngay cả khi các hình thức ấn tượng, nhưng chức năng bị hạn chế, người dùng sẽ phải thất vọng Cần có một mối quan hệ rõ ràng và liên tục giữa hình thức và chức năng Một cách đơn giản, hình thức của một trang web nên liên quan trực tiếp đến mục đích của nó Tất nhiên, việc xác định hình thức phù hợp cho một trang web yêu cầu các chức năng của trang web được xác định rõ ràng

1.1.6.3 Chất lƣợng

HTML, XML, CSS, JavaScript, Java, Flash, trình duyệt tương thích, công suất máy chủ,

và tất cả các thành phần khác của phát triển website là phần dễ thực hiện nhất của công việc thiết kế website Tuy nhiên, ngày nay các trang web gặp phải các vấn đề thực hiện, từ lỗi chính tả đơn giản để có khả năng tương thích kỹ thuật, phân phối, và các vấn đề khả năng sử dụng Một trang web chỉ nên được coi là tuyệt vời nếu nó là hữu ích, có thể sử dụng, chính xác và dễ chịu Ý nghĩa của mỗi người nhận xét có phần chủ quan, ngoại trừ trong trường hợp đúng đắn Cho một trang web được thiết kế tốt, thực hiện của nó phải là tuyệt vời HTML phải được chính xác và hình ảnh được lưu đúng cách như là các nhà thiết kế dự định Bất kỳ yếu tố tương tác, cho dù dưới hình thức kịch bản phía client trong JavaScript hoặc các chương trình CGI của server thực hiện, phải hoạt động đúng và không gây ra các thông báo lỗi Hiện nay các lĩnh vực thiết kế website đang được phát triển một cách tràn lan, vì đây là một ngành công nghiệp trẻ với các tiêu chuẩn thay đổi Hơn nữa, hầu hết các chuyên gia thiết

kế website thường không có nền tảng về khoa học máy tính, mạng, lý thuyết siêu văn bản,

PTIT

khoa học nhận thức, và tất cả các ngành khác có thể ảnh hưởng đến chất lượng của các trang web Một số nhà thiết kế thậm chí bỏ qua những khác biệt vốn có trong website bằng cách không giải quyết vấn đề của độ phân giải, màu sắc, giới hạn băng thông, Một nhà thiết kế website, không chỉ nhìn vào các loại đặc tính kỹ thuật như thiết kế in ấn mà phải biết quan tâm đến mọi thứ từ trình duyệt, băng thông, lập trình và các giao thức

1.2 Các nguyên lý và nguyên tắc thiết kế giao diện website

1.2.1 Mục tiêu thiết kế giao diện website

Trong quá trình tìm hiểu nhu cầu của người sử dụng, để thiết kế hệ thống tương tác tốt cần đảm bảo mục tiêu khả năng sử dụng (Usability) và mục tiêu thói quen người dùng (User Experience) Sự khác nhau của hai mục tiêu là cách thức vận hành, tức là làm thế nào có thể đáp ứng được nhu cầu người dùng Mục tiêu khả năng sử dụng có liên quan với đáp ứng tiêu chí cụ thể (ví dụ như hiệu quả - effectively, hiệu suất - efficiently, và sự thoải mái – satisfactorily), các mục tiêu thói quen người dùng chủ yếu liên quan đến giải thích chất lượng của trải nghiệm người dùng (ví dụ như sự vui vẻ, sự thoải mái,…)

và nhu cầu của người sử dụng Một số khả năng sử dụng được xác định bằng cách con người

xử lý thông tin, khả năng nhận thức, trí nhớ và khả năng tập trung của con người ảnh hưởng lớn tới sự tương tác

Khả năng sử dụng của một hệ thống tương tác có những đặc điểm sau:

 Đạt hiệu quả do chứa chức năng và thông tin thích hợp với nội dung, tổ chức

PTIT

 Dễ dàng cho việc học và nhớ các thao tác sau một thời gian sử dụng

 Có tính tiện ích cao, có thể thỏa mãn được mong muốn thực hiện của người dùng

1.2.1.2 Thói quen người dùng (User experience)

Thói quen người dùng được định nghĩa là "nhận thức của người dùng và phản ứng của người dùng từ việc sử dụng sản phẩm, hệ thống và dịch vụ” (ISO 9241-210)

Định nghĩa theo tiêu chuẩn ISO, UX bao gồm tất cả những cảm xúc của người sử dụng, niềm tin, sở thích, nhận thức, phản ứng thể chất và tâm lý, hành vi và thành tích xảy ra trước, trong và sau khi sử dụng ISO cũng liệt kê ba yếu tố ảnh hưởng trải nghiệm người dùng: hệ thống, người dùng và các ngữ cảnh sử dụng

Trong một trang web, mục đích của khả năng sử dụng là để làm cho trang web dễ sử dụng trong khi mục đích của thói quen người dùng là làm cho người sử dụng hài lòng trước, trong và sau khi sử dụng trang web đó Như vậy, khả năng sử dụng liên quan đến sự dễ dàng

mà người sử dụng có thể đạt được mục tiêu của mình trong khi tương tác với một trang web còn thói quen người dùng là quan tâm đến cách người dùng cảm nhận được sự tương tác của

họ với trang web Người ta coi khả năng sử dụng là khoa học còn thói quen người dùng là nghệ thuật Giao diện người dùng có thể sử dụng là trực quan, đơn giản hoặc dễ dàng học hỏi Một giao diện người dùng với mục đích để tạo ra một UX tích cực là sự hài lòng khi sử dụng Điều này không có nghĩa là khi tập trung vào kinh nghiệm người dùng, giao diện người dùng

là không thể sử dụng Ngược lại, các chuyên gia về UX thường bàn giao thiết kế của họ cho các chuyên gia khả năng sử dụng để họ có thể xác nhận chúng

1.2.2 Các nguyên lý và nguyên tắc đảm bảo khả năng sử dụng

Để trở thành một nhà phát triển website chuyên nghiệp, người thiết kế cần có sự hiểu biết về người dùng tốt, và chắc chắn rằng người dùng có thể tìm được thông tin mong muốn thông qua kiến trúc website phức tạp Do vậy người thiết kế website cần phải nắm vững các nguyên lý và nguyên tắc đảm bảo khả năng sử dụng để truyền đạt được tưởng một cách hiệu quả Dựa trên các những yếu tố đảm bảo nguyên tắc khả năng sử dụng, các nhà phát triển website đã đưa ra các một số nguyên lý và nguyên tắc thiết kế website

Nguyên tắc: Người sử dụng cố gắng tối đa hóa lợi ích và giảm thiểu việc thực hiện

Một khía cạnh khác của khả năng ghi nhớ quan trọng đối với khả năng sử dụng của các trang web là số lượng thông tin một người có thể nhớ lại từ trí nhớ ngắn hạn George A

PTIT

Miller nghiên cứu trí nhớ ngắn hạn của con người chỉ có thể có giữ lại khoảng 5-9 thứ cùng một lúc (7±2) Người dùng có thể ghi nhớ một cách nhanh chóng 7 ± 2 các mặt hàng trên thiết kế web

Trong trường hợp thiết kế website có một tập hợp các liên kết, có nên giới hạn các lựa chọn từ 5 – 9 hay không? Người thiết kế thì luôn muốn người dùng lựa chọn một cách công bằng giữa các mục Tuy nhiên nếu sắp xếp một cách ngẫu nhiên các liên kết, người dùng sẽ mất thời gian cho việc lựa chọn một trong số chúng Trong thực tế, có thể thấy điều này xảy

ra trên các trang web Ví dụ như Hình 1-14, một trang web âm nhạc lớn phải đối mặt với một vấn đề trong đó ban nhạc được liệt kê trong các trang web có tên bắt đầu với A hoặc Z đã có một tốc độ tải về cao hơn nhiều hơn Những gì đã xảy ra là người dùng có ít kiến thức về các ban nhạc, vì vậy họ sẽ quét các danh sách và họ có xu hướng chọn các mục đầu tiên hoặc cuối cùng của danh sách để xem những gì đã xảy ra Họ thực sự không thể nhớ tất cả tên của các ban nhạc hay khi nó đi cùng với cả một danh sách Nếu muốn người dùng dễ dàng lựa chọn từ một danh sách, nên hạn chế thiết lập lựa chọn từ 5 - 9 mục

Hình 1-14 Sắp xếp liệt kê

Tuy nhiên, không nên áp dụng quá cứng nhắc với quy tắc 7 ± 2 Nếu một trang web có nhiều nội dung, người dùng có thể tập trung dần dần từ các mục Có thể phân loại thành các cụm bằng các nhãn hoặc màu sắc khác nhau Với mỗi cụm có từ 5 – 9 liên kết

Theo quy tắc ngón tay cái cũng có thể được áp dụng cho số lần click chuột Người dùng

có thể nhớ về ba trang được trình bày theo tuần tự Bất cứ điều gì nhiều hơn thế và có xu hướng có những khoảng trống trong bộ nhớ Ví dụ, khi người dùng nhấp qua hàng chục trang,

họ có lẽ sẽ nhớ một loạt các trang nhưng không theo tuần tự Nếu muốn người dùng nhớ một con đường, họ có xu hướng nhớ chỉ có khoảng ba lượt xem tuần tự và có thể ít hơn nếu các

PTIT

trang trông gần giống hệt nhau Vì vậy, không nên mong đợi một người sử dụng để ghi nhớ một trình tự hoặc đường dẫn dài hơn ba lần click Vì những hạn chế bộ nhớ, cố gắng đạt được nội dung trong ba lần click chuột hoặc hoàn tất giao dịch trong vài màn hình thì càng tốt Theo quy tắc này người dùng ngừng sử dụng trang web nếu họ không thể tìm thấy thông tin hoặc truy cập vào tính năng trang web trong vòng 3 lần click chuột Nói cách khác, quy tắc nhấn mạnh tầm quan trọng của điều hướng rõ ràng, cơ cấu hợp lý và dễ dàng theo hệ thống phân cấp trang web

Ví dụ Hình 1-15 cho thấy hệ thống phân cấp hơi sâu Người dùng sẽ phải thực hiện lớn hơn 3 lần click chuột để tìm thấy thông tin mà họ mong muốn Tuy nhiên trong các tình huống số lần nhấp chuột cũng không quá quan trọng Những gì thực sự quan trọng là người dùng luôn luôn biết được họ là ai, họ đang ở đâu và khi nào họ cần đi tiếp Thậm chí 10 lần click nhấp chuột vẫn cho họ cảm giác thoải mái nếu người dùng thấy rằng họ có một sự hiểu biết đầy đủ về cách hệ thống hoạt động

Hình 1-15 Hệ thống phân cấp hơi sâu, không đảm bảo nguyên tắc 3-CLICK PTIT

1.2.2.2 Thời gian đáp ứng

Để tránh cảm giác không có tính liên tục khi tương tác với hệ thống của người dùng, thời gian đáp ứng của hệ thống trong tất cả các bước tương tác có ngưỡng liên quan đến cơ chế xử l thông tin của con người

 Một hệ thống có thời gian đáp ứng là 0,1s được cảm nhận là phản ứng trực tiếp

 Sau 8 – 10s, người dùng thường bắt đầu bận rộn với các hoạt động xung quanh

Cho các ứng dụng Web, giá trị ngưỡng là một thách thức lớn trong trường hợp không thể tính toán kỹ thuật của các kết nối Internet Vì l do này, nó được khuyến khích thiết kế trang "mỏng - slim" Chúng ta nên hạn chế số lượng hình ảnh chất lượng cao và khối lượng các yếu tố đa phương tiện khác trên mỗi trang, và phương pháp nén, giảm dung lượng, độ phân giải

Quy luật ngón tay cái, toàn bộ khối lượng của một trang không được vượt quá 50 Kbytes Đây là một phương pháp để đẩy nhanh việc tải một trang web xác định kích thước của hình ảnh trong trình duyệt cho một trang trước khi những hình ảnh được tải đầy đủ

Kết nối Internet chậm thông qua một modem có tốc độ truyền tối đa 56Kbits/s;

1Kbyte = 8Kbits

Để có thể đảm bảo quy tắc 8 giây, một trang không nên vượt quá kích thước sau

(trong điều kiện tối ưu,vv): 8 giây × (56 Kbits/8) = 56 Kbytes

Trong nhiều trường hợp, một trang web có thể chậm với một vài người sử dụng Người dùng có thể thiếu kiên nhẫn, cần phải đưa ra một dấu hiệu nhận biết về tiến độ thực hiện Thường nhiều trình duyệt cũng đã thể hiện dấu hiện này cho người dùng Trình duyệt sẽ thường chuyển đổi một con trỏ thành một timer, hoặc biểu tượng quay Thường thiết kế website sẽ thiết kế các trang cung cấp thông tin phản hồi Ví dụ họ sẽ xây dựng các trang để tải văn bản đầu tiên, chia nhỏ hình ảnh thành nhiều phần, tải từng phần sẽ khiến cho người dùng sẽ có cảm giác trang web đang được tải Ví dụ như Hình 1-16

Đối với tải trang mà mất 10-30 giây, phản hồi được đưa ra bởi trình duyệt là đủ để cho người dùng biết một cái gì đó đang xảy ra Tuy nhiên, khi tải mất nhiều thời gian, bạn nên cung cấp cho người sử dụng biết thêm thông tin

Ví dụ, nhiều trang web sử dụng công nghệ như Flash để tải trang hoàn chỉnh với một thanh trạng thái cho thấy tiến độ Tiến độ như vậy cũng có thể là tạo ra bằng cách sử dụng các công nghệ như JavaScript

Quy tắc: Khi thời gian đáp ứng như tải trang mất hơn 30 giây, cố gắng cung cấp thông tin phản hồi cho người sử dụng, chẳng hạn như một thanh tiến trình tải thời gian Nếu xây dựng một trang web tĩnh, có một số thủ thuật đơn giản để cho người dùng biết chờ đợi đối tượng Cho tải về hình ảnh rất lớn, bên cạnh việc xen kẽ hình ảnh hoặc nó hiển thị sắc nét dần dần, hoặc là có thể cho hiển thị thông báo trước

PTIT