Thiết kế và lập trình Web 1 - Bài 2: Tổng quan về thiết kế Web

Lập trình và Thiết kếWeb 1 © 2007 Khoa Công nghệ thông tin Khoa CNTT – ĐH.KHTN Bài 2 Tổng quan về Thiết kếWEB Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định mục đích – yêu cầu của Website ƒ Mục tiêu, yêu cầu cơ bản của WebSite ƒ Đối tượng phục vụ ƒ Chủ đề của WebSite Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Mục tiêu, yêu cầu cơ bản ƒ Đề ra mục tiêu khái quát, ngắn gọn, rõ ràng của Website cần thiết kế ƒ Là công cụ để đánh giá sự thành bại của một Website ƒ Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Đối tượng phục vụ ƒ Xác định loại đọc giả chính của Website ƒ Tìm hiểu về: – Sự hiểu biết – Trình độ – Sở thích – Kinh nghiệm duyệt Web … Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Đối tượng phục vụ (tt) Thiết kế tốt = thích hợp cho một dải rộng các loại đọc giả có trình độ và nhu cầu khách nhau Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website ƒ Giúp định hướng cho nhà thiết kế – Giáo dục – Huấn luyện (online trainning) – Tin tức – Giải trí – Diễn đàn trao đổi thảo luận – Mua bán, quản lý…. ƒ Xem ví dụ Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Diễn đàn Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Diễn đàn Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Đào tạo trực tuyến Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Tin tức online Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Mua bán trực tuyến Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Mua tên miền ƒ Tên miền = Tên website – Tên ngắn – Gợi nhớ – Dễ đọc, không gây nhầm lẫn – Thể hiện được tên công ty hoặc nhãn hiệu chính của công ty rosevilleelectric.com Roseville + Electric Roseville-electric.com Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Mua tên miền Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thuê chỗ hosting ƒ Hệ điều hành ƒ Dung lượng ƒ Băng thông ƒ Ngôn ngữ hỗ trợ ƒ Hệ quản trị CSDL hỗ trợ ƒ Email POP3 ƒ SSL ƒ … Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các thành phần cơ bản của Website ƒ Trang chủ (HomePage) ƒ Hệ thống Menu, Logo, định danh ƒ Các trang thành viên Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Trang chủ ƒ Mọi website đều được thiết lập quanh Homepage ƒ Điều kiện cơ bản để website thành công ƒ Lưu ý khi sử dụng hệ thống đồ họa Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Hệ thống menu, logo, định danh ƒ Hệ thống menu phải rõ ràng, đầy đủ sẽ giúp đọc giả hình dung được cấu trúc, tổ chức website. ƒ Cần quan tâm đến vị trí, các thể hiện (có hay không có hiệu ứng) ƒ Vị trí logo, định danh công ty phải cố định nhất quán Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các trang thành viên ƒ Xây dựng theo cấu trúc cơ bản của website ƒ Nhất quán, phù hợp với các thuộc tính đã định dạng trước Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện Website Menu Header Content Logo Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : 2x2 Layout Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 29 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 30 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 31 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN The inner table Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : Centered with three columns Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : Cấu trúc phức tạp Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định kiểu chữ, màu sắc ƒ Phông chữÆ phụ thuộc vào – Đặc điểm thông tin – Độc giả – Trình duyệt, độ phân giải – Ngôn ngữ sử dụng – Font có chân, không chân… ƒ Gam màuÆ thống nhất trong toàn bộWebsite ƒ Font tiếng Việt: VNI, TCVN3, Unicode… Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Cắt đoạn, tóm lược thông tin ƒ Luôn có một số lợi điểm: – Đọc giả có ít thời gian để đọc các tài liệu trên màn hình. – Luôn có nhu cầu muốn tìm phần thông tin chủ định, không nên chia cắt quá nhỏ, tóm lược quá ngắnÆ gây thất vọng – Hình thức và cách tổ chức đồng nhấtÆ kinh nghiệm tìm kiếm, khám phá. – Thông tin ngắn gọn, súc tích thích hợp với màn hình máy tính (bị giới hạn tầm nhìn). ƒ Việc áp dụng phải linh động, nhất quán. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định kích thước khung nhìn ƒ Phải làm cho đọc giả cảm nhận được kích thước của trang thông tin, biết họ đang ở đâu, có thể làm gì ? ƒ Lưu ý, hầu hết các trang web đều không vừa khớp với màn hình 14-15 inch. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite ƒ Hệ thống phân cấp ƒ Hệ thống các trang nối tiếp ƒ Ô Lưới ƒ Mạng nhện Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Phân cấp Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Phân cấp ƒ Dùng để tổ chức các khối thông tin phức hợp. ƒ Là hệ thống được dùng thông dụng nhất ƒ Gần với mô hình tổ chức thế giới thực ƒ Dễ hình dung tổ chức website Î Cái nhìn tổng quan từ trang chủ Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Nối tiếp ƒ Biểu diễn thông tin tuần tự, các bảng tường thuật nối tiếp theo thời gian ƒ Các thông tin tra cứu tham khảo: tự điển báck khoa, tự điển thuật ngữ ƒ Thích hợp cho hệ thống website nhỏ. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Ô lưới Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Ô lưới ƒ Danh sách khóa học, các biến cố, sự kiện ƒ Từng đơn vị trong cấu trúc phải có cùng cấu trúc cho các chủ đề lớn và nhỏ ƒ Khó hiểu đối với khi xác định mối liên quan giữa các loại thông tin. ƒ Rất tốt đối với những đọc giả có kinh nghiệm, có sẵn kiến thức về hệ thống, chủ đề trong hệ thống Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Ô lưới Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Mạng nhện Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Mạng nhện ƒ Tố chức ít hạn chế cho việc sử dụng mẫu thông tin ƒ Mô hình tự khám phá, khai thác triệt để ưu điểm của hyperlink ƒ Cấu trúc phi thực tế nhất, khó hiểu, khó dự đoán cho đọc giả ƒ Thích hợp với những site nhỏ, đọc giả chuyên nghiệp hoặc trình độ cao, tìm kiếm các kiến thức chuyên sâu Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Ví dụ : Cấu trúc website Mạng nhện Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Một số vấn đề liên quan đến việc thiết kế giao diện cơ bản ƒ Thiết kế hướng tới người sử dụng ƒ Các giúp đỡ định hướng rõ ràng ƒ Không có trang cuối cùng (dead-end) ƒ Băng thông và ảnh hưởng ƒ Đơn giản và tính nhất quán ƒ Tính ổn định của các trang Web ƒ Phản hồi và đối thoại ƒ Tính tương thích trên các trình duyệt khác nhau (thay thế) Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế hướng tới người sử dụng ƒ Người sử dụng là đối tượng chính quyết định sự thành bại của Website ƒ Xây dựng các kịch bản mẫu cho các loại đối tượng sử dụng khác nhau Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế hướng tới người sử dụng ƒ Yêu cầu mức độ hoàn hảo của thiết kế giao diện đồ họa ƒ Cách tốt nhất: thử nghiệmÆ nhận các phản hồi từ đọc giả. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các giúp đỡ định hướng rõ ràng ƒ Đọc giả có thể trả lời các câu hỏi: – Đang ở đâu ? – Có thể làm gì ? – Có thể đi tiếp tới đâu ? ƒ Biểu tượng nhất quán, dễ hiểu, theo chuẩn qui định Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Không có trang cuối cùng (dead-end) ƒ Mỗi trang có ít nhất một liên kết. Luôn có khả năng quay lại trang chủ, các trang chủ chốt trên Website ƒ Trang “dead-end” Æ thất vọng, mất khả năng đến với các trang khác. ƒ Nên để liên kết về trang chủ trong mọi trang. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Băng thông và ảnh hưởng ƒ Sự kiên nhẫn của đọc giả có giới hạn. ƒ Tốc độ đôi khi là yếu tố quyết định đến việc lựa chọn Website. ƒ Phân biệt giữa thiết kế cho Internet và Intranet Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thiết kế trang web cho mạng Intranet ƒ Một số site thiết kế riêng cho các tổ chức, sử dụng mạng LAN ƒ Mục tiêu : nâng cao thời gian truy cập, dẫn dắt vào sâu trong cấu trúc website Æ đòi hỏi thông tin phải hấp dẫn, có giá trị ƒ Đừng để ý tới băng thông và tốc độÆ chú trọng đến nội dung có giá trị và sự hấp dẫn cho website. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Đơn giản và tính nhất quán ƒ Tùy vào loại ứng dụng ƒ Đọc giả sẽ không ấn tượng và sự phức tạp không lý do. Đặc biệt là đọc giả phục thuộc vào thời gian và thông tin chính xác. ƒ Các biểu tượng đơn giản, quen thuộc, nhất quán trong tất cả các trang Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Tính ổn định của các trang Web ƒ Ổn định về cấu trúc và nội dung ƒ Cấu trúc: các thành phần được đặt đúng chỗ và hoạt động nhịp nhàng. ƒ Nội dung: – các mối liên kết luôn đảm bảo có đích đến – nội dung luôn đảm bảo thích hợp và phải cập nhật cho phù hợp với ngữ cảnh tại thời điểm đọc giả duyệt Web. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Phản hồi và đối thoại ƒ Chuẩn bị trước cho việc trả lời, đáp ứng các đòi hỏi, góp ý của đọc giả một cách nhanh nhất có thể. ƒ Luôn có cung cấp địa chỉ để liên kết với “Webmaster” ƒ Lên kế hoạch nhân sự phụ trách lâu dài Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Tính tương thích trên các trình duyệt khác nhau ƒ Không phải mọi trình duyệt đều hiển thị trang web của chúng ta giống nhau. ƒ Lưu ý khi có đọc giả sử dụng web browser không có khả năng hỗ trợ đồ họa (mobile, PDA, …). ƒ Sử dụng nhãn (tag) ALT trong HTML để thay thế Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Thời gian quản lý ƒ Website cần được cập nhật thông tin để đọc giả luôn cảm nhận được cái mới ƒ Nếu phần nào đó được cập nhậtÆ thêm ký hiệu “New” ƒ Ghi thời gian cập nhật, số người truy cập… ƒ Nếu website phức tạpÆ thêm một trang “What new ?” Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Liên kết trang web, quảng cáo ƒ Tạo liên kết đến các trang thông tin (đối tác, khách hàng…) Æ tăng uy tín ƒ Khi đã ổn địnhÆ chuyển đổi hình thức kinh doanh, thu phí: – Thuê đặt logo, quảng cáo – Thu phí thành viên – …. Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN Phụ lục, nguồn thông tin, các trang giúp đỡ, FAQ ƒ Thông tin báo cáo thường cô đọngÆ trên web có thêm các phụ lục ƒ FAQ (Frequently Answer Questions) lý tưởng cho việc thiết kế website hỗ trợ ƒ FAQ Æ giảm thiểu nhân sự và chi phí cho việc hỗ trợ, tư vấn khách hàng Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN LAB2 – Khảo sát các Website ƒ Khảo sát các trang Web và rút ra các nhận xét về cách thiết kế trang Web ƒ Làm quen với cách sử dụng một số công cụ tiện ích hỗ trợ trong quá trình thiết kếWeb – Swish – Frontpage – Dreamweaver Lập trình và Thiết kếWeb 1 – Bài 2 :Tổng quan về thiết kếWEB © 2007 Khoa CNTT - ĐHKHTN LAB2 - Khảo sát các Website ƒMột số trang web cung cấp hình ảnh làm web –www.clipart.com – ƒMột số trang web cung cấp các kiểu font chữ – ƒMột số trang web cung cấp mẫu thiết kế giao diện web –