211 trang 4 lượt tải

Bài giảng môn Thiết kế Website cơ bản | Học viện Công Nghệ Bưu Chính Viễn Thông

8

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. Tài liệu được sưu tầm gồm 211 trang, giúp các bạn nắm vững kiến thức, rèn luyện kỹ năng và đạt được kết quả tốt trong học tập. Mời các bạn đón xem!

Môn: Thiết kế Website cơ bản (MUL13152) 11 tài liệu

Trường: Học viện Công Nghệ Bưu Chính Viễn Thông 1.2 K tài liệu

Tác giả:

Profile

My Lữ

5 ngày trước
Danh sách Quiz
/211
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 CDT1429
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
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.
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
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
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
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
26 Điều hướng liên kết nhúng với một định dạng nội dung khác ............................. 77
27 Điều hướng liên kết nhúng với liên kết website khác .......................................... 77
28 Điều hướng liên kết liên quan .............................................................................. 78
29 Liên kết nhanh đặt trong menu drop – down ....................................................... 79
30 Điều hướng footer ................................................................................................ 80
31 Điều hướng tiện ích trên trang Vitaminshoppe .................................................... 81
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
58 Tỷ lệ vàng và mối quan hệ giữa 2 con số ........................................................... 106
59 Hình xoáy ốc trong tỷ lệ vàng ............................................................................ 107
60 Trang twitter áp dụng tỷ lệ vàng trong thiết kế .................................................. 107
61 Tỷ lệ 1/3 trong thiết kế layout ............................................................................ 108
62 Nguyên tắc tỷ lệ 1/3 áp dụng cho xác định vị trí đặt logo trên website ............. 109
63 Looking room áp dụng hiệu quả trong thiết kế website. ................................... 110
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
90 Vòng tròn màu cơ bản ........................................................................................ 128
91 Sử dụng màu đỏ làm màu chủ đạo của trang web .............................................. 131
92 Màu đỏ được sử dụng tạo điểm nhấn trên trang web ......................................... 131
93 Màu cam được sử dụng tạo sự chú ý trên trang web .......................................... 132
94 Màu vàng được sử dụng website ........................................................................ 132
95 Màu xanh được sử dụng trên trang web thể hiện sự tự nhiên ............................ 133
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
DANH MỤC BẢNG BIỂU Bảng 1.1 Đo khả năng sử dụngError! Bookmark not defined.
Bảng 2.1. Các vấn đề trong thiết kế website ......................................................................... 93
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................. 97
Bảng 2.3 Bit và số lượng màu ............................................................................................. 126
Bảng 2.4 Màu sắc trong HTML .......................................................................................... 127
Bảng 2.5 Gợi ý sử dụng định dạng Audio ........................................................................... 143
Bảng 3.1 Bảng thuộc tính của thẻ BODY ........................................................................... 155
Bảng 3.2 Bảng các thẻ định dạng văn bản .......................................................................... 155
Bảng 3.3 Bảng các thẻ tạo bảng chính ................................................................................ 161
Bảng 3.4 Ý nghĩa các tham số trong thẻ định dạng bảng biểu ............................................ 162
Bảng 3.5 Ý nghĩa các tham số trong thẻ liên kết ................................................................ 164
Bảng 3.6 Thuộc tính thẻ <body> cho màu liên kết ............................................................. 167
Bảng 3.7 Tham số trong thẻ hình ảnh ................................................................................. 169
Bảng 3.8 Đơn vị chiều dài CSS .......................................................................................... 174
Bảng 3.9 Đơn vị màu sắc CSS ............................................................................................ 174
Bảng 3.10 Bảng media type sử dụng trong CSS3 ............................................................... 181
Bảng 3.11 Bảng media feature sử dụng trong CSS3 ........................................................... 182
Bảng 3.12 Bảng thuộc tính và giá trị web fonts cho CSS3 ................................................. 184
Bảng 3.13 Danh sách những sự kiện JavaScript ................................................................. 189
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
World wide web (www)
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 (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.
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).
Tên miền (Domain name)
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
1989–1995: Giai đoạn đầu phát triển 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.
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
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ẻ
Timothy John Berners
-
Lee sinh
ngày
8
/6/1955
Ông là người cha đẻ của Word Wide
Web
<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.
1995–2000: Sự bùng nổ của 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.
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.
2000–2004: Người dùng trở thành sức mạnh của website
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
(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.
2004–2007: Web 2.0 và Web 3.0
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.
2007–2010: Multimedia Mobile Web
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 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.
2010–2014: Tính bảo mật và Website
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 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 :
Server side: bao gồm phần cứng máy chủ web và phần mềm cũng như yếu tố lập trình 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.
Mạng lưới: mô tả các yếu tố kết nối khác nhau sử dụng để cung cấp các trang web cho 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ộ.
1.1.3.1 Client side
Ngôn ngữ đánh dấu (Markup Languages)
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ư . 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).
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.
• Thứ hai, XHTML mang lại thực thi chặt chẽ hơn cho các quy tắc đánh dấu các trang 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
.
<html>
<head>
<title>Ví dụ</title>
<style type=”text/css”>
body { background-color:#FFF }
p { color:#00F F00
}
</style>
</head>
<body> <p>Welcome To PTIT </p>
</body>
</html>
Cấu trúc CSS
Hình 1-3 Ví dụ về CSS
JavaScript
JavaScript là một ngôn ngữ kịch bản phía client cho biết thêm tương tác và hành vi cho
các trang web. Với JavaScript, bạn có thể làm những thứ như màn hình hiển thị thêm thông tin
về các liên kết, tạo ra hiệu ứng lăn chuột, thay đổi nội dung trang dựa trên điều kiện nhất định,
hiển thị ngẫu nhiên nội dung trên một trang, tải nội dung trong cửa sổ và khung trình duyệt mới
và khung, và di chuyển các yếu tố xung quanh trang (với sự giúp đỡ của CSS). Được phát triển
bởi Netscape cho Navigator 2.0, ngôn ngữ đã phát triển đáng kể trong những năm qua và được
hỗ trợ các trình duyệt lớn. Sự tương tác giữa HTML và JavaScript rất có ý nghĩa và quyền làm
chủ của ngôn ngữ đánh dấu là cần thiết để gặt hái những lợi ích từ công nghệ này.
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ó 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.
Plug-Ins
Trong máy tính, plug-in (hoặc plugin, hoặc add-on / addon) là một thành phần của phần
mềm có thêm một tính năng cụ thể cho một ứng dụng phần mềm hiện có. Khi một ứng dụng hỗ
trợ plug-in, nó cho phép tuỳ biến. Các ví dụ phổ biến là các plug-in được sử dụng trong các trình
duyệt web để thêm các tính năng mới như tìm kiếm tự động, quét virus, hoặc khả năng sử dụng
một loại tập tin mới như một định dạng video mới. phổ biến trình duyệt plug-in bao gồm Adobe
Flash Player, QuickTime Player, và Java plug-in.
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:
Hình 1-5 Ví dụ về Plugin trong HTML
1.1.3.2 Server side

Công nghệ lập trình lâu đời nhất phía máy chủ, CGI (Common Gateway Interface) chương
trình có thể được viết trong bất kỳ ngôn ngữ lập trình, mặc dù thường Perl được kết hợp với các

Tài liệu khác của Học viện Công Nghệ Bưu Chính Viễn Thông

Preview text:

cho màu liên kết ............................................................. 167
Bảng 3.7 Tham số trong thẻ hình ảnh ................................................................................. 169
Bảng 3.8 Đơn vị chiều dài CSS .......................................................................................... 174
Bảng 3.9 Đơn vị màu sắc CSS ............................................................................................ 174
Bảng 3.10 Bảng media type sử dụng trong CSS3 ............................................................... 181
Bảng 3.11 Bảng media feature sử dụng trong CSS3 ........................................................... 182
Bảng 3.12 Bảng thuộc tính và giá trị web fonts cho CSS3 ................................................. 184
Bảng 3.13 Danh sách những sự kiện JavaScript ................................................................. 189
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 World wide web (www)
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 (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.
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). Tên miền (Domain name)
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
1989–1995: Giai đoạn đầu phát triển 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
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ẻ
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.
1995–2000: Sự bùng nổ của 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.
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.
2000–2004: Người dùng trở thành sức mạnh của website
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
(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.
2004–2007: Web 2.0 và Web 3.0
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.
2007–2010: Multimedia Mobile Web
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 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.
2010–2014: Tính bảo mật và Website
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 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 :
Server side: bao gồm phần cứng máy chủ web và phần mềm cũng như yếu tố lập trình 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.
Mạng lưới: mô tả các yếu tố kết nối khác nhau sử dụng để cung cấp các trang web cho 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ộ. 1.1.3.1 Client side
Ngôn ngữ đánh dấu (Markup Languages)
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).
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.
• Thứ hai, XHTML mang lại thực thi chặt chẽ hơn cho các quy tắc đánh dấu các trang 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. Cấu trúc CSS Ví dụ

Welcome To PTIT

Tài liệu liên quan: