Giáo trình Thiết kế và triển khai website: Phần 1

Giáo trình Thiết kế và triển khai website là tài liệu tham khảo phục vụ giảng dạy, học tập của sinh viên các chuyên ngành Quản trị Thương mại điện tử và Quản trị Hệ thống thông tin. Giáo trình được chia thành 4 chương, cuối mỗi chương đều có các câu hỏi ôn tập và thảo luận. Phần 1 này trình bày về: những khái niệm chung; tổng quan thiết kế website;... Mời các bạn cùng tham khảo!

1 Chủ biên: PGS.TS ĐÀM GIA MẠNH Tham gia biên soạn: Ths Nguyễn Quang Trung Ths Bùi Quang Trường Ths Trần Lê Kim Danh Ths Phan Đa Phúc Ths Lê Thị Thu LỜI NÓI ĐẦU Internet đem đến cho nhân loại cách mạng thực công nghệ thông tin - truyền thông Nhờ Internet mà tầm nhìn người rộng hơn, xa hơn, bao quát hơn, với khoảng cách địa lý giới dường thu hẹp lại, giới ngày “phẳng” Trong dịch vụ Internet, dịch vụ đóng vai trị then chốt World Wide Web (WWW), dịch vụ quan trọng để phát triển website Ngày nay, không đến thuật ngữ “Website”, “truy nhập Internet”, “lướt Web”, Chính nhờ có website Internet, ai, đâu, với máy tính kết nối mạng (hoặc công cụ điện tử điện thoại thông minh, ), với vài thao tác đơn giản có trước mắt “núi” thông tin cần thiết dạng khác (văn bản, đồ họa, ) Dịch vụ Web mang đến cho nhân loại bước tiến tất lĩnh vực, mang lại lợi ích to lớn cho tổ chức, doanh nghiệp Vì vậy, hiểu biết website, có kỹ thiết kế triển khai website điều thiếu nhà quản trị kinh doanh Giáo trình “Thiết kế triển khai website” biên soạn theo Đề cương học phần Hội đồng Khoa học - Đào tạo Trường Đại học Thương mại thông qua Hiệu trưởng phê duyệt làm tài liệu thức dùng cho giảng dạy, học tập Trường Đại học Thương mại từ năm 2005 Đối tượng phục vụ giáo trình sinh viên chuyên ngành Quản trị Thương mại điện tử Quản trị Hệ thống thông tin Trường Giáo trình gồm chương: Chương I Những khái niệm chung Chương II Tổng quan thiết kế website Chương III Một số công cụ thiết kế website Chương IV Triển khai website Cuối chương có câu hỏi ôn tập thảo luận Những câu hỏi này, đặc biệt tập thực hành để người học rèn luyện kỹ mình, số vấn đề cịn để ngỏ mà khn khổ giáo trình cịn chưa trình bày chi tiết Giáo trình PGS TS Đàm Gia Mạnh làm chủ biên, xây dựng đề cương chi tiết, biên soạn chỉnh sửa, ThS Nguyễn Quang Trung biên soạn chương ThS Bùi Quang Trường biên soạn chương ThS Trần Lê Kim Danh ThS Phan Đa Phúc biên soạn chương ThS Lê Thị Thu biên soạn chương Trong trình biên soạn, tác giả tham khảo nhiều tài liệu nhà khoa học nước, phải kể đến sách Thạc Bình Cường, Vũ Thị Hậu, Nguyễn Công Minh Tập thể tác giả nhận ý kiến đóng góp quí báu đồng nghiệp số nhà khoa học Trường Tập thể tác giả xin trân trọng cảm ơn, đặc biệt TS Nguyễn Trần Hưng, PGS TS Trần Văn Hòe cho ý kiến phản biện Trong trình biên soạn, có nhiều cố gắng, nhiên khó tránh khỏi hạn chế thiếu sót Tập thể tác giả mong tiếp tục nhận nhiều ý kiến đóng góp bạn đọc để giáo trình ngày hồn thiện Ý kiến đóng góp xin gửi theo địa chỉ: Bộ môn Công nghệ thông tin, Trường Đại học Thương mại, email: bmcntt@tmu.edu.vn Hà Nội, tháng 12 năm 2017 TẬP THỂ TÁC GIẢ MỤC LỤC Trang LỜI NÓI ĐẦU Danh mục hình vẽ, bảng, sơ đồ Danh mục từ thuật ngữ viết tắt 11 Chương I NHỮNG KHÁI NIỆM CHUNG 21 1.1 Internet giao thức 21 1.1.1 Internet 21 1.1.2 Các giao thức 29 1.2 Một số dịch vụ Internet 40 1.2.1 Mạng lưới toàn cầu 40 1.2.2 Dịch vụ tên miền 41 1.2.3 Dịch vụ tìm kiếm thông tin Internet 43 1.3 Một số khái niệm website 44 1.3.1 Webpage website 44 1.3.2 Website tĩnh website động 45 1.3.3 Web services, Web client/server 48 CÂU HỎI ÔN TẬP VÀ THẢO LUẬN 65 Chương II TỔNG QUAN VỀ THIẾT KẾ WEBSITE 67 2.1 Các bước thiết kế website 67 2.1.1 Khái quát chung 67 2.1.2 Thiết kế giao diện 77 2.1.3 Thiết kế nội dung 88 2.2 Các nguyên tắc thiết kế website 91 2.2.1 Các nguyên tắc tổ chức website 91 2.2.2 Nguyên tắc tổ chức thông tin website 93 2.3 Một số nguyên tắc khác thiết kế website 100 2.3.1 Nguyên tắc thiết kế website dễ truy cập 100 2.3.2 Nguyên tắc sử dụng màu sắc thiết kế website 101 CÂU HỎI ÔN TẬP VÀ THẢO LUẬN 104 Chương III MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE 105 3.1 Ngôn ngữ đánh dấu siêu văn (HTML) 105 3.1.1 Giới thiệu HTML 105 3.1.2 Cấu trúc tệp tin HTML 106 3.1.3 Các thẻ HTML 107 3.1.4 Định dạng website với CSS (cùng thẻ HTML) 129 3.2 Javascript 137 3.2.1 Giới thiệu 137 3.2.2 Nhúng JavaScript vào tệp HTML 137 3.2.3 Hiển thị dòng văn 140 3.2.4 Giao tiếp với người sử dụng 144 3.2.5 Biến phân loại biến 146 3.2.6 Kiểu liệu 147 3.2.7 Biểu thức phân loại biểu thức 149 3.2.8 Các toán tử JavaScript 150 3.2.9 Câu lệnh điều kiện 152 3.2.10 Câu lệnh lặp 153 3.2.11 Các hàm JavaScript 157 3.3 Php 163 3.3.1.Giới thiệu 163 3.3.2 Nhúng PHP vào website 164 3.3.3 Các kiểu liệu PHP 164 3.3.4 Các biến PHP 169 3.3.5 Các toán tử 172 3.3.6 Cấu trúc điều khiển 173 3.3.7 Hàm PHP 180 3.4 Ví dụ sử dụng php để xây dựng trang web 3.4.1 Xây dựng trang web hiển thị danh sách thành viên 181 182 3.4.2 Xây dựng chức thêm thành viên 184 CÂU HỎI ÔN TẬP, BÀI TẬP VÀ THẢO LUẬN 189 Chương IV TRIỂN KHAI WEBSITE 197 4.1 Xuất website 198 4.1.1 Mở đầu 198 4.1.2 Qui trình xuất website 201 4.1.3 Thực hành đăng ký tên miền máy chủ Web 205 4.2 Quản trị tên miền máy chủ web 208 4.2.1 Quản trị tên miền 208 4.2.2 Quản trị máy chủ Web 210 4.3 Quảng bá website 214 4.3.1 Một số phương pháp quảng bá Website 214 4.3.2 Phương pháp tối ưu hóa Website để có vị trí cao cơng cụ tìm kiếm 218 4.3.3 Phương pháp quảng bá Website thông qua mạng xã hội 234 CÂU HỎI ÔN TẬP VÀ THẢO LUẬN 242 TÀI LIỆU THAM KHẢO 245 DANH MỤC CÁC HÌNH VẼ, BẢNG, SƠ ĐỒ Hình 1.1 Các tệp tin cookie máy tính Hình 1.2 Các tệp tin vùng nhớ đệm Internet Cache Hình 1.3 Mơ hình HTTP đơn giản Hình 1.4 Mơ hình HTTP phức tạp Hình 1.5 Mơ hình HTTP phức tạp với nhớ Cache Hình 1.6 Hoạt động website tĩnh Hình 1.7 Hoạt động website động Hình 1.8 Kiến trúc dịch vụ Web Hình 1.9 Cấu trúc WSDL Hình 1.10 Cấu trúc message SOAP Hình 1.11 Các thành phần dịch vụ Web Bảng 2.1 Một số mục đích website Hình 2.1 Hình minh họa số thành phần điều khiển Hình 2.2 Vị trí liên kết website Hình 2.3 Liên kết khơng có trang cuối Hình 2.4 Hệ thống phân cấp website Hình 2.5 Cấu trúc liên kết không hợp lý hệ thống phân cấp thông tin Hình 2.6 Cấu trúc menu q nơng Hình 2.7 Cấu trúc menu cân Hình 2.8 Cấu trúc nối tiếp Hình 2.9 Cấu trúc phân cấp Hình 2.10 Cấu trúc lưới Hình 2.11 Cấu trúc mạng nhện Hình 2.12 Hệ màu LAB Hình 2.13 Màu nóng màu lạnh Hình 2.14 Màu tương đồng Hình 3.1 Biểu tượng file HTML hình Hình 4.1 Máy chủ tên miền ánh xạ địa IP thành tên miền tương ứng Hình 4.2 Mơ hình kết nối máy chủ tên miền với máy chủ Web 27 28 32 32 33 46 47 50 53 58 61 72 81 84 86 94 95 96 96 97 98 99 99 102 103 103 107 108 109 Hình 4.3 Sự phân cấp tên miền Hình 4.4 Ví dụ thơng tin đăng ký tên miền Hình 4.5 Thơng tin đăng ký hosting Hình 4.6 Kiểm tra tên miền website www.nhanhoa.com Hình 4.7 Đăng ký tên miền trực tuyến website www.nhanhoa.com Hình 4.8 Màn hình đăng nhập vào trang quản trị tên miền website www.domain.nhanhoa.com Hình 4.9 Trang quản trị tên miền website www.domain.nhanhoa.com Hình 4.10 Giao diện trang quản trị hosting qua Cpanel Hình 4.11 Quản lý tệp mã nguồn website đặt hosting Hình 4.12 Tạo sửa đổi sở liệu cho website Hình 4.13 Thơng tin sở liệu hệ quản trị sở liệu Hình 4.14 Trang quản lý email Hình 4.15 Trang quản lý tên miền Hình 4.16 Quảng cáo Google - Google Adwords Hình 4.17 Minh họa đặt banner quảng cáo Hình 4.18 Cơng cụ phân tích từ khóa Google Keyword Planner (1) Hình 4.19 Cơng cụ phân tích từ khóa Google Keyword Planner (2) Hình 4.20 Cơng cụ phân tích từ khóa Google Trend Hình 4.21 Cơng cụ phân tích từ khóa Google Global Market Finder Hình 4.22.Website giúp phân tích từ khóa Ubersuggest.org Hình 4.23 Cơng cụ phân tích từ khóa hiệu website Google Webmasters Hình 4.24 Cơng cụ thống kê website Google Analytics Hình 4.25 Cấu trúc tệp robots.txt Hình 4.26 Cấu trúc tệp sitemap.xml Bảng 4.1 Bảng so sánh Page Group Hình 4.27 Quảng cáo website Facebook giao diện Desktop Mobile Hình 4.28 Hình ảnh quảng cáo banner facebook Hình 4.29 Hình ảnh thơng tin gắn mục hồ sơ facebook Hình 4.30 Hình ảnh viết website đăng fanpage facebook 10 200 203 204 206 207 209 209 211 212 212 213 213 214 216 217 220 221 222 223 224 225 226 231 231 237 238 238 239 240 chức cho phép người xem từ chối nhận họ không muốn nhận tin - Thông báo, tin tức (News Feed): Trên website nên có chức đăng tải thông báo, tin tức nhất, hiển thị trang chủ để người xem nhìn thấy - Giỏ mua hàng (Shopping Cart): Là phần dành cho website trưng bày bán nhiều mặt hàng, nhằm phục vụ cho nhu cầu chọn lựa hàng hóa Nó mơ từ q trình mua bán siêu thị: khách hàng chọn hàng bỏ vào giỏ, thay đổi số lượng hàng, đổi ý khơng mua bỏ hàng khỏi giỏ, Cuối định tính tiền (Check-Out), chức giỏ mua hàng liệt kê “hóa đơn” hàng chọn mua, số lượng món, tổng giá trị, Bất kỳ website bán hàng trực tuyến cần phải có chức giỏ mua hàng - Download miễn phí: Để thu hút người xem, số website cịn cung cấp thơng tin, tệp, chương trình, cho người xem download miễn phí dùng, ví dụ trị chơi, sách điện tử (e-book), chương trình ứng dụng nhỏ, hình ảnh đẹp, Trên “vật phẩm” cho download miễn phí này, chủ sở hữu website khéo léo kèm theo thông tin giới thiệu website, để người download gửi tặng bạn bè, giúp marketing cho website - Thành viên (Member): Mục thành viên chủ yếu để thu thập thơng tin (email, giới tính, độ tuổi, khu vực sinh sống, sở thích, ) người tự nguyện đăng ký tham gia “câu lạc bộ” website để hưởng số quyền lợi định Thông tin thu thập dùng để marketing, nghiên cứu hành vi sở thích khách hàng, chí bán cho người cần thơng tin để phục vụ việc quảng cáo qua email hay mục đích kiếm lời Ngồi ra, mục thành viên dùng để phân loại nhóm người sử dụng miễn phí có trả tiền cho số dịch vụ cung cấp website 90 2.2 CÁC NGUYÊN TẮC THIẾT KẾ WEBSITE CƠ BẢN 2.2.1 Các nguyên tắc tổ chức website Tổ chức website cần tuân thủ số nguyên tắc: a) Tổ chức website chặt chẽ dễ sử dụng Website cần có cấu trúc logic, rõ ràng, thống dễ hiểu Điều quan trọng phải để độc giả thấy thông tin mà họ hi vọng thu từ website Mục đích cấu trúc website cần xác định rõ ràng, cụ thể từ bắt đầu thiết kế Với website có q nhiều thơng tin, làm cho trang chủ đơn giản cách thiết kế nội dung thành bảng, bảng nên làm đơn giản dễ sử dụng Đồng thời sử dụng từ đoạn văn ngắn gọn, dễ hiểu để thu hút người đọc b) Sử dụng ngôn từ thông dụng, dễ hiểu để tạo thân thiện với độc giả Độc giả theo dõi quảng cáo sản phẩm, dịch vụ website, chí khơng mua mặt hàng mà website cung cấp, họ hiểu thông tin mà website nói đến Việc sử dụng lời lẽ hoa mỹ để tán dương sản phẩm, dịch vụ dễ, điều quan trọng cần phải biết có người truy cập vào website nhu cầu họ Vì vậy, tổ chức website nên dùng thuật ngữ thông dụng, dễ hiểu để tạo thân thiện với người sử dụng thu hút họ đến với ý đồ c) Chú trọng đến thời gian tải trang Web Thời gian dành cho quan tâm độc giả website nhân tố vơ quan trọng, đóng góp vào thành công website Đừng để độc giả nhiều thời gian chờ đợi để tải trang Web Trong trường hợp đó, độc giả kiên nhẫn bỏ Vì thế, tổ chức website cần ý đến thời gian dành để tải trang Web, để giữ chân độc giả 91 Việc giảm thiểu thời gian tải website tăng tốc độ truyền trang Web thực cách: (1) Giảm kích cỡ đồ họa trang website; (2) Quy định cụ thể kích cỡ tệp đồ họa mã HTML để trình duyệt Web rút ngắn kích cỡ trang Web cần thiết, hiển thị văn để khoảng trống cho tệp đồ họa tải về; (3) Giảm số tệp trang website d) Chú trọng đến phần nội dung thơng tin khơng có hình ảnh Khơng hình ảnh đồ họa gây ý độc giả, mà nội dung dạng văn (text) người xem quan tâm có chất lượng viết tốt Một website đánh giá cao có nội dung (content) tốt Vì thế, cần đầu tư vào phần nội dung cách cẩn thận, đồng thời cần ý thêm vào điểm nhấn cho viết như: tiêu đề, hiệu ứng chữ viết, từ khóa, e) Theo dõi chặt chẽ "quá trình bán hàng" website thương mại Website thương mại (bán hàng) cần tạo điều kiện để khách hàng hiểu rõ lợi ích sản phẩm dịch vụ mà doanh nghiệp đem lại, cung cấp cho khách hàng phương thức đặt hàng, toán, cách thuận tiện Để thực điều cần lưu ý đến yếu tố sau: (1) Website tổ chức, xây dựng để tạo uy tín cho khách hàng trước họ đặt hàng; (2) Website tạo cho khách hàng yêu thích hứng thú trước mời họ đặt hàng chưa; (3) Website cung cấp cho khách hàng cách đặt hàng thuận tiện phương thức trực tuyến ngoại tuyến chưa; (4) Website hướng dẫn khách hàng tất bước cần thực chưa; f) Một số vấn đề quan trọng khác tổ chức thiết kế website Cần đọc kiểm tra cẩn thận tất nội dung hình thức website: Nếu không quan tâm tới việc kiểm tra lỗi tả, lỗi trình bày, độc giả bị phản cảm (khơng có cảm tình) lẽ đơn giản tổ chức, doanh nghiệp khơng tự kiểm sốt lỗi tả cho trang Web mình, tin tưởng quan hệ với họ 92 Trước đưa website vào hoạt động cần kiểm tra toàn website (các đường liên kết, thời gian tải, form bán hàng, ) cố gắng kiểm tra nhiều phương pháp khác để có kết khách quan 2.2.2 Nguyên tắc tổ chức thông tin website Điểm mạnh website tạo liên kết để kết nối khối thông tin lại với Các đoạn tin nhỏ khối thông tin lớn chia nhỏ gắn kết với thơng qua liên kết Chính đơn vị thông tin kiểu dễ tổ chức thành khối thông tin riêng để tạo nên hệ thống đồng nhất, hình thành nên sở liên kết hypertext Việc xác định xác ngữ cảnh tài liệu nội dung thông tin giúp việc phân chia trình bày đơn vị thơng tin website hợp lý 2.2.2.1 Quy trình tổ chức thông tin website Việc tổ chức thông tin website thực theo qui trình gồm bước theo thứ tự: a) Phân chia khối thông tin lớn thành đơn vị thông tin nhỏ, logic, thống Đa số thông tin World Wide Web giới thiệu ngắn, không cần xếp theo trình tự nối tiếp Các mẩu tin ngắn, riêng biệt ln thích hợp với liên kết Web Mặt khác, độc giả website thường muốn tìm thấy phần thông tin chủ định, tồn khối thơng tin đồ sộ để thời gian lọc tìm kiếm thơng tin cần Tuy nhiên, thơng tin bị chia cắt nhỏ thành vụn vặt làm độc giả thất vọng họ phải cơng tìm kiếm, lắp ghép xâu chuỗi thông tin Lưu ý rằng, thực tế, kiến trúc gồm từ đến ba trang (in) thông tin vừa đủ cho đoạn thông tin Web Cách thức tổ chức phân chia thông tin website phải thể linh động, quán xuyên suốt cho toàn website, đặc biệt 93 phải tạo thuận tiện cho đối tượng độc giả Cách tốt để phân chia tổ chức thông tin thực theo chất, chủ đề loại nội dung cụ thể Ngồi ra, đơi nên tạo tài liệu dài website tổng hợp đoạn thơng tin để độc giả lưu hay in chúng b) Thiết lập hệ thống phân cấp theo tầm quan trọng đơn vị thông tin Để tổ chức thông tin website, việc xác định cấu trúc định vị cho độc giả chưa đủ, mà cịn cần đến phân cấp thơng tin theo tầm quan trọng tính tổng quát loại thông tin Mọi "đoạn" thông tin nên xếp theo mức độ quan trọng, đồng thời hệ thống hóa theo mức độ quan hệ thành phần Khi xác định tính hợp lý mức ưu tiên, nên xây dựng hệ thống phân cấp từ mức ưu tiên cao (mức tổng quát) xuống đến mức thấp (mức chi tiết) Một hệ thống phân cấp thông tin tổ chức phân chia hợp lý thực cần thiết website, ý tưởng “trang chủ - liên kết” phụ thuộc vào phân cấp, từ nhìn khái qt tồn website (trang chủ), qua menu (trang liên kết) xuống đến trang nội dung ngày trở nên phổ biến Hình 2.4 Hệ thống phân cấp website (Nguồn: [1]) 94 c) Xây dựng cấu trúc liên kết hệ thống phân cấp thông tin Một hệ thống phân cấp thơng tin hồn hảo phải hệ thống có tính cân xứng đáp ứng mong muốn độc giả Hệ thống tổ chức hợp lý cho phép độc giả dự đoán vị trí họ tìm thấy thơng tin họ cần tìm Các đơn vị thơng tin website xếp hình ảnh, dán nhãn, nhóm phân loại quán cho phép độc giả mở rộng nhận biết từ trang xem vào trang họ Do vậy, tổ chức thông tin website sau: Hình 2.5 Cấu trúc liên kết không hợp lý hệ thống phân cấp thơng tin (Nguồn: [1]) Trong hình vẽ trên, thấy đơn vị thông tin không xếp theo trật tự, đồng thời liên kết chúng khơng thể rõ ràng, thế, độc giả khó để tìm vị trí thơng tin mà họ cần d) Đánh giá chức năng, tính thẩm mỹ hệ thống phân cấp thông tin Cần tổ chức thiết kế khối thông tin website cho phù hợp, cân cấu trúc quan hệ Menu hay trang chủ (Homepage) với trang nội dung độc lập, đồ hoạ liên kết tài liệu Mục tiêu tạo hệ thống phân cấp menu trang Web thật tự nhiên độc giả, không gây trở ngại làm họ lúng túng đọc website 95 Hình 2.6 Cấu trúc menu q nơng (Nguồn:[1]) Nếu website phát triển nhanh cân menu trang Web thực cần thiết Các phản hồi độc giả (thông qua phân tích việc sử dụng website) giúp xem xét cấu trúc website có cịn thích hợp khơng, hay có phần thiết kế khơng Các tài liệu phức tạp đòi hỏi phân bổ menu sâu, độc giả lại không muốn vào trang Web mà hệ thống menu khơng có khả truy cập trực tiếp, vậy, cần tạo website phân lớp thích hợp có khả truy cập thông tin nhanh giúp độc giả dễ dàng nhận biết thông tin tổ chức Hình 2.7 Cấu trúc menu cân (Nguồn:[1]) 96 2.2.2.2 Các kiểu cấu trúc thiết kế website a) Cấu trúc nối tiếp (Sequence) Đây cách đơn giản để trình bày thơng tin website Trong cấu trúc này, thơng tin bố trí theo dãy hiển thị cách Với cách tổ chức này, thông tin xếp theo thứ tự thời gian, theo thứ tự a, b, c, số, từ điển bách khoa, từ điển thuật ngữ Tuy nhiên, cách tổ chức thơng tin dựa cấu trúc thích hợp với website có dung lượng thơng tin nhỏ Trong thực tế, chuỗi thông tin ngày trở nên dài hơn, phức tạp theo thời gian, phải cần kiểu cấu trúc phù hợp mà giữ tính dễ theo dõi Hình 2.8 Cấu trúc nối tiếp (Nguồn:[1]) Nhiều website lớn sử dụng kiểu cấu trúc nối tiếp để tổ chức thơng tin, trang liên kết với trang khác website liên kết đến trang website khác b) Cấu trúc phân cấp (Hierarchy) Sử dụng cấu trúc phân cấp để tổ chức thông tin cách tốt để xếp khối thông tin phức hợp thành chuỗi liên quan mà không logic chúng Sắp xếp thông tin việc phân cấp chúng đặc biệt thích hợp cho website, hầu hết website thực theo cách rẽ nhánh từ trang chủ Một khối thông tin tổ chức phân cấp tốt tác động tốt đến nội dung website, phân cấp hoạt động hiệu website tổ chức hoàn hảo mặt nội dung Dễ dàng nhận thấy, biểu 97 đồ phân cấp thông tin website giống với cấu trúc tổ chức tổ chức, doanh nghiệp, nhờ độc giả dễ dàng hình dung mơ hình kiến trúc website, từ khám phá khai thác thơng tin website cách đơn giản, dễ dàng Hình 2.9 Cấu trúc phân cấp (Nguồn:[1]) c) Cấu trúc ô lưới (Grid) Tổ chức thông tin theo cấu trúc ô lưới phù hợp với thông tin có dạng hướng dẫn, danh sách giải nghĩa cho trường hợp kỹ thuật Đó phương thức tốt để tạo mối tương quan biến số với Để tổ chức thông tin theo kiến trúc thành công, đơn vị riêng biệt lưới định phải có cấu trúc cho chủ đề lớn nhỏ, chủ đề thường khơng có phân cấp mức quan trọng Ví dụ, để giới thiệu TCP/IP IPX/SPX: "TCP/IP" quan trọng không hơn, không so với "IPX/SPX", hai mơ tả nên có cấu trúc Như vậy, độc giả tiếp (dọc xuống lưới) để đọc diễn giải "TCP/IP", hay sang cạnh (đi ngang lưới) cách đọc phần "Packet" hai chủ đề TCP/IP IPX/SPX Tổ chức thơng tin kiểu cấu trúc lưới có nhược điểm tạo khó hiểu với độc giả chừng độc giả chưa xác định mối liên quan loại thơng tin Nhưng tốt với độc giả có kinh nghiệm, người có sẵn kiến thức chủ đề hệ thống 98 website, sơ đồ tổng qt hữu ích website kiểu lưới Hình 2.10 Cấu trúc lưới (Nguồn:[1]) d) Cấu trúc mạng nhện (Web) Tổ chức thông tin theo cấu trúc mạng nhện thường dùng cho ý tưởng liên kết giống tự do, nơi mà độc giả theo quan tâm họ mô hình tự khám phá, tự tưởng tượng độc giả đến website Mục đích khai thác triệt để lực website việc liên kết kết hợp, cấu trúc theo kiểu mạng nhện dễ bị biến thành mớ hỗn độn, lộn xộn khối thơng tin Hình 2.11 Cấu trúc mạng nhện (Nguồn:[1]) 99 Đa số website lớn sử dụng bốn kiểu cấu trúc thông tin Ngoại trừ website có yêu cầu khắt khe việc phải hỗ trợ trang hiển thị nối tiếp, độc giả thường thích sử dụng website theo kiểu tự "mạng nhện", đa số sách tra cứu hay kỹ thuật sử dụng 2.3 MỘT SỐ NGUYÊN TẮC KHÁC TRONG THIẾT KẾ WEBISTE 2.3.1 Nguyên tắc thiết kế website dễ truy cập 2.3.1.1 Nguyên tắc sử dụng thuật ngữ “Giáng cấp dễ chịu” Thuật ngữ Grateful Degradation (giáng cấp dễ chịu) áp dụng nhiều lĩnh vực đặc biệt học điện tử học Nguyên tắc việc sử dụng thuật ngữ việc làm sản phẩm tốt phổ thơng nhất, hay nói cách khác tập trung phát triển cho số đông trước quay lại hỗ trợ cho phần lại Trong lĩnh vực thiết kế website điều vận dụng cho website hiển thị tốt trình duyệt đại mà khơng mắc lỗi Ví dụ như, áp dụng khái niệm CSS3, HTML5 để cung cấp cho trình duyệt đại Chrome Safari Sau thiết kế tạo hiệu ứng mong muốn website, việc giáng cấp xảy trình duyệt cũ Ví dụ, áp dụng hiệu ứng bo trịn góc cho trình duyệt đại CSS3, sau quay lại dùng hình ảnh để tạo hiệu ứng tương tự với trình duyệt thấp Làm thế, người sử dụng trình duyệt đại hưởng lợi nhờ khả trình duyệt, nhiên với khơng biết khơng có khả sử dụng trình duyệt sử dụng website 2.3.1.2 Nguyên tắc sử dụng thuật ngữ “Nâng cao lũy tiến” Việc sử dụng thuật ngữ để thiết kế website giới thiệu vào khoảng năm 2003 Ngược với cách làm theo thuật ngữ Grateful Degradation trên, theo cách website xây dựng cho 100 trình duyệt hỗ trợ sau từ từ bổ sung tính cho trình duyệt đại Ví dụ, làm hệ thống menu trang Web sử dụng JavaScript để tạo hiệu ứng cho đẹp mắt hơn, trước thêm JavaScript, tạo hệ thống có mã HTML người khơng bật JavaScript CSS xem nội dung trang Web Sau sử dụng CSS để làm cho menu Dropdown FlyOut để người khơng có JavaScript xem Và cuối sử dụng JavaScript menu thêm hấp dẫn với nhóm người đọc cuối 2.3.2 Nguyên tắc sử dụng màu sắc thiết kế website Trong thiết kế nào, màu sắc phối màu tạo nên sức hút, tâm lý phong cách Đặc biệt thiết kế website, biết sử dụng màu sắc để nói lên ý tưởng mà khơng cần đến lời nói hay câu văn thành công lớn nhiều Việc sử dụng màu phối màu tác động mạnh ảnh hưởng lớn đến chất lượng website Một số hệ màu cần nhận biết cách sử dụng công việc thiết kế website sau: - Hệ màu RGB gồm màu là: Đỏ (Red), Xanh (Green) Xanh da trời (Blue) Đây hệ màu sử dụng nhiều hệ màu phổ biến thiết kế website chỉnh sửa hình ảnh Với màu phối thành nhiều màu khác, tùy vào mục đích sử dụng - Hệ màu CMYK: Hệ màu chủ yếu sử dụng in ấn sách báo, tạp chí, v.v Nó bao gồm màu Cyan (xanh lục), Magenta (đỏ tươi), Yellow (vàng) Black (đen) - Hệ màu LAB: Là không gian màu độc lập việc chỉnh sửa màu hệ thống màu công việc thú vị di chuyển nhẹ nhàng kênh “a” kênh “b” tạo thay đổi mạnh mẽ màu sắc LAB hệ màu thích hợp chỉnh sửa ảnh kỹ thuật số 101 Hình 2.12 Hệ màu LAB (Nguồn: http://designs.vn) - Hệ màu HSB: Bao gồm: H (Hue) liên quan đến màu sắc, S (Saturation - độ thấm qua) xác định độ bão hòa màu B (Brightness độ sáng) liên quan đến số lượng ánh sáng có màu sắc HSB thường dùng việc chỉnh sửa ảnh chân dung Bên cạnh hệ màu, việc nhận biết sử dụng gam màu sắc thiết kế tạo nhiều điểm nhấn website Các gam màu chia làm loại sau: - Màu nóng: Màu nóng tự mang lơi gây ý, có tính phản chiếu cao, tạo nên ý tưởng tươi vui, cởi mở, kích động, Nó có tác động mạnh mẽ đến khơng gian bố cục chung Màu nóng gồm màu đỏ vàng, ngồi màu tương cận chúng (như cam, hồng, tím, đỏ, vàng, xanh lục, ) - Màu lạnh: Là màu cho ta cảm giác mát mẻ, ví dụ như: xanh lam, xanh cây, đen, tím, Màu lạnh làm cho hình có cảm giác tươi tắn, toả sáng, gợi cảm giác mát mẻ, nhẹ nhàng Màu lạnh đối lập với màu nóng - Màu tương phản: Là đối lập màu nóng màu lạnh, tương phản với màu hệ thống màu gốc: Xanh,Vàng, Đỏ Nhờ có màu tương phản mà hình đạt rực rỡ Màu tương phản thường màu gốc có tính gốc cao Bản thân màu có 102 độ mạnh thị giác cao, nên đặt cạnh bố cục, màu tạo nên cảm giác mạnh Với màu nóng lạnh đứng cạnh nhau, tương phản dịu thay đổi độ sáng tối Hình 2.13 Màu nóng màu lạnh (Nguồn: http://designs.vn) - Màu tương đồng: Với màu gam nóng lạnh có tương quan định, chúng gọi màu tông, màu tương đồng Trong thực tế, màu tương đồng chứa lượng màu tương phản ngược lại, vấn đề phải xem xét lượng màu diện tích vai trị đến quan hệ hồ sắc Hình 2.14 Màu tương đồng (Nguồn: http://designs.vn) 103 - Màu vô sắc: Là màu mà ta hoà trộn chúng với khơng tạo nên màu Ví dụ đen, trắng thang độ xám hoà trộn - Màu bổ túc: Những cặp màu bổ túc cặp màu có tính tương phản mạnh, gồm có cặp màu sau đây: Đỏ - Xanh lục, Da cam - Xanh lam, Vàng - Tím Những màu gây cảm giác đồng thời người, chẳng hạn khơng thể có màu gọi “đỏ - lục” “vàng - tím” Điều tương tự cảm giác nhiệt độ, khơng có cảm giác gọi cảm giác “nóng - lạnh”, mà “nóng” “lạnh” - Màu sắc độ: Đây thuật ngữ để độ đậm nhạt loại màu Sự thay đổi phụ thuộc vào việc ta cộng thêm màu đen hay màu trắng cho màu gốc để tạo nên dải màu Màu trắng cho ta màu sáng màu đen ngược lại - Màu sắc điệu: Là khái niệm biến thiên màu sắc Sự kết hợp màu hữu sắc cho ta thấy điều Có thể dễ dàng hiểu hình “ngả vàng”, tơng xanh hay thiên đỏ, Đó hiệu kết hợp màu khác CÂU HỎI ÔN TẬP VÀ THẢO LUẬN Cần làm rõ vấn đề để xác định mục đích website cần thiết kế? Nêu vấn đề chiến lược thiết kế website? Trình bày nội dung việc thiết kế giao diện cho website? Trình bày nội dung chức website? Khi tổ chức website cần theo nguyên tắc nào? Trình bày quy trình tổ chức thông tin website? Thiết kế website bao gồm kiểu cấu trúc nào? Trình bày số nguyên tắc sử dụng màu sắc thiết kế website? 104 ... thành viên 18 1 18 2 3.4.2 Xây dựng chức thêm thành viên 18 4 CÂU HỎI ÔN TẬP, BÀI TẬP VÀ THẢO LUẬN 18 9 Chương IV TRIỂN KHAI WEBSITE 19 7 4 .1 Xuất website 19 8 4 .1. 1 Mở đầu 19 8 4 .1. 2 Qui trình xuất... 00000 011 00000 010 00000 011 =12 8.3.2.3 (lớp B) netid =12 8.3; hostid=2.3 11 000000 00000000 000000 01 111 111 11 =19 2.0 .1. 255 (lớp C) netid =19 2.0 .1; hostid=255 ->hướng tới tất host Cần lưu ý địa IP... chương giáo trình 1. 1 INTERNET VÀ CÁC GIAO THỨC 1. 1 .1 Internet 1. 1 .1. 1 Giới thiệu chung Mạng máy tính tập hợp máy tính thiết bị kết nối với nhờ đường truyền vật lý theo cách thức Khi tham gia vào