BÀI GIẢNG: MULTIMEDIA VÀ WEB. ThS. Phan Thanh Toàn

CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB• Để đánh giá một trang web là việc làm tương đối khó, cần có các tiêu chí cụ thể.. • Có 10 lỗi thường gặp phải khi thiết kế web:  Thời gian t

BÀI 6 MULTIMEDIA VÀ WEB

ThS Phan Thanh Toàn

Mạng internet và các ứng dụng thương mại điện tử đã phát triển khá mạnh mẽ  nhucầu xây dựng các ứng dụng trên nền Internet ngày càng có vai trò quan trọng Việc xâydựng các ứng dụng web based có khá nhiều các khác biệt so với ứng dụng desktop Cácứng dụng web based cần có giao diện đẹp, dễ sử dụng và thích ứng với một số lớn cáclớp người dùng.

TÌNH HUỐNG DẪN NHẬP

Tìm hiểu một số vấn đề liên quan đến Multimedia và Web?



MỤC TIÊU

Trình bày tổng quan các khái niệm cơ bản về công nghệ web

Trình bày các tiêu chí thiết kế và đánh giá trang web

Sử dụng các phần mềm đồ họa và phần mềm thiết kế vào thiết kế và xây

dựng một website

1 TỔNG QUAN VỀ MULTIMEDIA

• Web ra đời vào 1989

• Dựa trên nền tảng công nghệ HTML (HyperText Markup Language)

Siêu văn bản, siêu liên kết, multimedia:

• Ý tưởng siêu văn bản do Ted Nielson đề xuất 1965, sau đó Tim Berbers Lee đưa vàothực tế những năm 80

• Một hệ thống siêu văn bản bao gồm các trang (page) và các siêu liên kết(Hyperlink) Các siêu liên kết cho phép tập hợp các trang lại với nhau

• Các liên kết cho phép kết nối bất kỳ trang này vào một trang khác không phụ thuộcvào tính chất vật lý của trang

• Siêu văn bản không phải một văn bản tuyến tính

-

-………

-

-………

-

-………

-Văn bản tuyến tính

-………

-

-………

-

-………

-

-………

-

-………

-

-………

-

-………

-

-Siêu văn bản

1 TỔNG QUAN VỀ MULTIMEDIA (tiếp theo)

• Một đặc trưng của siêu văn bản là trong tài liệu có chứa nhiều loại dữ liệu khác nhaunhư: văn bản, hình ảnh, âm thanh, video,….(media, hypermedia).

• Đa phương tiện không chỉ dành cho ứng dụng web mà còn được sử dụng cho nhiềuứng dụng khác

Web:

• Web: là một ứng dụng chạy trên mạng Client-Server, khách và chủ web liên lạc qua

giao thức http (HyperText Transfer Protocol) Các web server cung cấp thông tinđược định dạng theo ngôn ngữ HTML

• Web Page: là một file văn bản chứa những tag HTML hoặc những đọan mã đặc

biệt mà trình duyệt web có thể hiểu và thông dịch được, file được lưu với phần mởrộng là html hoặc htm

• Website: Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức hoặc

• HTML (HyperText makup Language): gồm các đoạn mã chuẩn được quy ước

để thiết kế Web và được hiển thị bởi trình duyệt Web

1 TỔNG QUAN VỀ MULTIMEDIA (tiếp theo)

2 CÁC ĐẶC ĐIỂM CỦA WEB

 Người dùng thường chỉ đọc lướt các thông tin trên web;

 Người dùng có thể thăm các website qua nhiều con đường

• Thông tin và kiến trúc trang web:

 Website chứa một lượng thông tin rất lớn và không có cấu trúc;

 Webpage thường được phân bố trên nhiều site trên mạng Internet;

 Thời gian truy tìm và tải thông tin web chậm;

 Thông tin trên web rất đa dạng: text, picture, sound, …

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB

• Để đánh giá một trang web là việc làm tương đối khó, cần có các tiêu chí cụ thể

• Có 10 lỗi thường gặp phải khi thiết kế web:

 Thời gian tải khá lâu, nhất là các web chứa nhiều hình ảnh;

 Các thông tin thường không được cập nhật;

 Vấn đề mầu sắc và sự thống nhất các liên kết;

 Thiếu sự hỗ trợ người dùng;

 Trang web thường quá dài và nhiều chữ;

 Các trang web thường bị cô lập (orphan page);

 Các liên kết, địa chỉ dài khó nhớ;

 Các hình động, phim làm rối mắt, chậm trang web;

 Hiện tượng chảy máu chất xám vô ích;

 Việc sử dụng khung không hiệu quả

Các tiêu chí thiết kế và đánh giá trang web

• Muốn thiết kế một trang web tốt cần phải đảm bảo các chi tiết sau:

 Thiết kế trực quan (Visual Design & Layout);

 Sử dụng không gian màn hình ( Use of screen real estate);

 Thời gian tải;

 Các kỹ thuật HTML để thể hiện giao diện;

 Thao tác giữa các phần hay môi trường người dùng

• Thiết kế trực quan

Các thiết kế web tốt phải hướng tới người dùng, đảm bảo tương tác tốt, tránh gâyphiền hà và cung cấp các phương tiện để người dùng duyệt trang Để thực hiện tốtcác vấn đề trên cần chú ý:

 Sự di chuyển mắt khi nhìn của người dùng (eye flow): hạn chế sự di chuyển

mắt của người duyệt web, người dùng càng phải di chuyển mắt nhiều thì lượngtin thu được càng ít

 Người đọc có thói quen đọc từ trái qua phải, từ trên xuống dưới

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

A: -

B: -C: -

D: -E: -

F: -G: -

H: -

A: -

B: -

C: -

D: -

E: -

F: -

G: -

H: -Thiết kế đúng Thiết kế không đúng

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

Việc sử dụng các ô lưới sẽ làm giảm sự dịch chuyển mắt của người duyệt web, do vậykhi thiết kế web nên bố trí các phần tử theo một trật tự, tạo ra các đường ảo.

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

Cấu trúc phân cấp trực quan

• Cấu trúc phân cấp của trang web ảnh hưởng rất lớn đến khả năng thu nhận thôngtin của người duyệt web

• Một số nguyên tắc:

 Dùng kích thước lớn hơn, đậm hơn cho các phần khác nhau;

 Các phần tử quan trọng đặt ở đầu trang;

 Sử dụng các khoảng trắng bao quanh các phần tử quan trọng để tạo sự cáchbiệt giữa các phần

• Để thể hiện sự liên hệ giữa các phần:

 Bố trí các đối tượng theo nhóm hợp lý;

 Sử dụng các mẫu, cách thể hiện mầu sắc, phông, cỡ chữ

Sắp xếp văn bản hợp lý

• Cần sắp xếp văn bản một cách hợp lý để người dùng dễ dàng khi lướt web

• Cần lựa chọn font, size, căn lề,…

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

Tính dễ xem

Các nhân tố tạo nên tính dễ xem gồm:

 Cỡ chữ, font chữ, mầu sắc, sự tương phản;

 Không nên sử dụng mầu chữ xanh hay đỏ;

 Không nên sử dụng chữ xanh trên nền đỏ và ngược lại;

 Các đối tượng có mầu sắc gần giống nhau không nên đặt cạnh nhau

Cách thể hiện không gian màn hình

• Không gian màn hình phải được sử dụng hợp lý giữa các phần, đặc biệt là phần nộidung trang web

• Phong cách thiết kế cũng cần được quan tâm

• Bố cục các phần trang web cần được quan tâm

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

Thời gian tải trang

• Thời gian tải trang là một yếu tố quan trọng, người dùng luôn muốn tăng tốc độ tảitrang

• Một số nhân tố khi thiết kế web ảnh hướng tới tốc độ:

• Cần giới hạn kích thước trang web

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

Kỹ thuật HTML trong trang web

• 3 kỹ thuật quan trọng trong thiết kế web:

• Việc sử dụng trình duyệt là do người sử dụng, cần lựa chọn thiết kế thích hợp

3 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo)

CÂU HỎI THẢO LUẬN

Web là gì?

4 THIẾT KẾ WEB

• Thiết kế hướng tới người sử dụng:

 Giao diện đồ họa (GUI) được thiết kế nhằm tạo thuận lợi cho người dùng

 Cần khảo sát yêu cầu các nhóm người dùng trước khi thiết kế giao diện

 Nên tạo kịch bản mẫu cho người sử dụng dùng thử

• Các trợ giúp định hướng rõ ràng:

 Các biểu tượng cần nhất quán

 Dễ hiểu

 Các lược đồ đồ họa thống nhất và khái quát

• Các qui tắc liên kết và điều khiển:

 Không có trang cuối cùng (dead-end): mọi trang web nên có ít nhất một trangliên kết

 “Quay lại”, quay về trang trước và trang chủ: người dùng phải luôn có khả năngquay lại trang chủ và các điểm chủ chốt trên trang web

 Cho phép truy cập trực tiếp: cung cấp cho người sử dụng các thông tin họ cầnvới ít bước nhất và thời gian ngắn nhất

• Tạo ngữ cảnh:

 Độc giả thường không ý thức được họ đang ở đâu trong cấu trúc tổ chức thôngtin của website

 Cần tạo ra ngữ cảnh về vị trí của người dùng khi họ lướt web

• Dải thông và ảnh hưởng:

 Độc giả không thể chờ đợi với thời gian trễ lâu

 Cần tìm hiểu tốc độ truy cập mạng, cấu trúc thiết bị phần cứng, …

• Đơn giản và nhất quán:

 Các biểu tượng nên đơn giản, dễ hiểu, nhất quán

 Tính nhất quán cần được áp dụng trên tất cả các trang

 Sử dụng nhất quán các tiêu đề

 Các liên kết quan trọng nên đặt ở đầu trang

 Nên có một phong cách biên tập và mô hình tổ chức nhất quán

4 THIẾT KẾ WEB (tiếp theo)

• Tính ổn định thiết kế:

 Tính ổn định chức năng trong thiết kế web có nghĩa là giữ các thành phần giaotiếp của website làm việc ổn định

 Tính ổn định chức năng có 2 thành phần:

 Đặt các vật đúng chỗ ngay từ đầu thiết kế;

 Giữ chúng hoạt động nhịp nhàng trong suốt thời gian

• Phản hồi và đối thoại:

 Thiết kế website nên đưa ra khả năng xác định vị trí, lựa chọn của độc giả

 Phản hồi là bước chuẩn bị cho việc trả lời, đáp ứng các đòi hỏi, góp ý của độcgiả Cần tạo ra môi trường liên hệ trực tiếp với ban biên tập website

 Các thiết kế phản hồi, đối thoại cần đơn giản, đầy đủ, rõ ràng

4 THIẾT KẾ WEB (tiếp theo)

CÂU HỎI THẢO LUẬN

Các vấn đề cơ bản khi thiết kế web?

5 MỘT SỐ XU HƯỚNG HIỆN NAY

• Tính độc lập thiết bị:

Mọi thiết bị được đảm bảo truy cập website một cách trong suốt Các dịch vụ web cóthể truy cập được từ mọi thiết bị như máy tính để bàn, máy xách tay, điện thoại diđộng, …

• Tương tác đa phương tiện: mở rộng giao diện người dùng, cho phép tương tác quanhiều phương thức khác nhau:

TÓM LƯỢC CUỐI BÀI

• Trình bày tổng quan các khái niệm cơ bản về công nghệ web

• Khái niệm về đa phương tiện và tiêu chí đánh giá một trangweb

• Sử dụng các phần đồ họa và mềm thiết kế vào thiết kế vàxây dựng một website