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

BÀI MULTIMEDIA VÀ WEB ThS Phan Thanh Toàn TÌNH HUỐNG DẪN NHẬP Mạng internet ứng dụng thương mại điện tử phát triển mạnh mẽ  nhu cầu xây dựng ứng dụng Internet ngày có vai trị quan trọng Việc xây dựng ứng dụng web based có nhiều 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 thích ứng với số lớn lớp người dùng  Tìm hiểu số vấn đề liên quan đến Multimedia Web? MỤC TIÊU Trình bày tổng quan khái niệm công nghệ web Trình bày tiêu chí thiết kế đánh giá trang web Sử dụng phần mềm đồ họa phần mềm thiết kế vào thiết kế xây dựng website NỘI DUNG Tổng quan multimedia Các đặc điểm web Các tiêu chí thiết kế đánh giá trang web Thiết kế web Một số xu hướng TỔNG QUAN VỀ MULTIMEDIA • Web đời vào 1989 • Dựa 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 Ted Nielson đề xuất 1965, sau Tim Berbers Lee đưa vào thực tế năm 80 • Một hệ thống siêu văn bao gồm trang (page) siêu liên kết (Hyperlink) Các siêu liên kết cho phép tập hợp trang lại với • Các liên kết cho phép kết nối trang vào trang khác không phụ thuộc vào tính chất vật lý trang • Siêu văn khơng phải văn tuyến tính 5 TỔNG QUAN VỀ MULTIMEDIA (tiếp theo) ……… ……… ……… ……… Văn tuyến tính ……… -……… ……… ……… ……… ……… -……… Siêu văn TỔNG QUAN VỀ MULTIMEDIA (tiếp theo) • Một đặc trưng siêu văn tài liệu có chứa nhiều loại liệu khác như: văn bản, hình ảnh, âm thanh, video,….(media, hypermedia) • Đa phương tiện khơng dành cho ứng dụng web mà sử dụng cho nhiều ứng dụng khác Web: • • • • Web: ứng dụng chạy mạng Client-Server, khách chủ web liên lạc qua giao thức http (HyperText Transfer Protocol) Các web server cung cấp thông tin định dạng theo ngôn ngữ HTML Web Page: file văn chứa tag HTML đọan mã đặc biệt mà trình duyệt web hiểu thơng dịch được, file lưu với phần mở rộng html htm Website: Một tập hợp nhiều web page, thể thông tin tổ chức chủ đề Web Browser: trình duyệt Web Dùng để truy xuất tài liệu Web Server:  Internet Explorer  Nestcape • HTML (HyperText makup Language): gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web CÁC ĐẶC ĐIỂM CỦA WEB • Người dùng:  Đa dạng;  Số lượng lớn;  Người dùng không thích link bị vỡ (Linkrot), nhiên điều lại khó tránh khỏi;  Người dùng thường đọc lướt thơng tin web;  Người dùng thăm website qua nhiều đường • Thơng tin kiến trúc trang web:  Website chứa lượng thơng tin lớn khơng có cấu trúc;  Webpage thường phân bố nhiều site mạng Internet;  Thời gian truy tìm tải thơng tin web chậm;  Thông tin web đa dạng: text, picture, sound, … CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB • Để đánh giá trang web việc làm tương đối khó, cần có tiêu chí cụ thể • Có 10 lỗi thường gặp phải thiết kế web:  Thời gian tải lâu, web chứa nhiều hình ảnh;  Các thơng tin thường khơng cập nhật;  Vấn đề mầu sắc thống liên kết;  Thiếu hỗ trợ người dùng;  Trang web thường dài nhiều chữ;  Các trang web thường bị cô lập (orphan page);  Các liên kết, địa 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 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo) Các tiêu chí thiết kế đánh giá trang web • Muốn thiết kế trang web tốt cần phải đảm bảo chi tiết sau:  Thiết kế trực quan (Visual Design & Layout);  Sử dụng không gian hình ( Use of screen real estate);  Thời gian tải;  Các kỹ thuật HTML để thể giao diện;  Thao tá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ây phiền hà cung cấp phương tiện để người dùng duyệt trang Để thực tốt vấn đề cần ý:  Sự di chuyển mắt nhìn người dùng (eye flow): hạn chế di chuyển mắt người duyệt web, người dùng phải di chuyển mắt nhiều lượng tin thu  Người đọc có thói quen đọc từ trái qua phải, từ xuống 10 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo) A: -C: - E: G: - B: D: - F: -H: - Thiết kế A: B: - E: F: - C: D: - G: H: - Thiết kế không 11 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo) Việc sử dụng ô lưới làm giảm dịch chuyển mắt người duyệt web, thiết kế web nên bố trí phần tử theo trật tự, tạo đường ảo 12 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 trang web ảnh hưởng lớn đến khả thu nhận thông tin người duyệt web • Một số ngun tắc:  Dùng kích thước lớn hơn, đậm cho phần khác nhau;  Các phần tử quan trọng đặt đầu trang;  Sử dụng khoảng trắng bao quanh phần tử quan trọng để tạo cách biệt phần • Để thể liên hệ phần:  Bố trí đối tượng theo nhóm hợp lý;  Sử dụng mẫu, cách thể mầu sắc, phơng, cỡ chữ Sắp xếp văn hợp lý • Cần xếp văn cách hợp lý để người dùng dễ dàng lướt web • Cần lựa chọn font, size, lề,… 13 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, 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 đỏ ngược lại;  Các đối tượng có mầu sắc gần giống không nên đặt cạnh Cách thể khơng gian hình • Khơng gian hình phải sử dụng hợp lý phần, đặc biệt phần nội dung trang web • Phong cách thiết kế cần quan tâm • Bố cục phần trang web cần quan tâm 14 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 yếu tố quan trọng, người dùng ln muốn tăng tốc độ tải trang • Một số nhân tố thiết kế web ảnh hướng tới tốc độ:  Kích thước trang;  Cấu trúc bảng • Một số nguyên tắc thiết kế web: giảm bớt hòa trộn liệu, chia bảng lớn thành bảng • Cần sử dụng đồ họa multimedia hợp lý • Cần giới hạn kích thước trang web 15 CÁC TIÊU CHÍ THIẾT KẾ VÀ ĐÁNH GIÁ TRANG WEB (tiếp theo) Kỹ thuật HTML trang web • kỹ thuật quan trọng thiết kế web:  Stylesheet;  Frame;  Table • Bố trí chiều rộng trang web cần quan tâm theo cấu trúc cố định hay thay đổi tự động • Việc sử dụng trình duyệt người sử dụng, cần lựa chọn thiết kế thích hợp 16 CÂU HỎI THẢO LUẬN Web gì? 17 THIẾT KẾ WEB • Thiết kế hướng tới người sử dụng:  Giao diện đồ họa (GUI) 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 nhóm người dùng trước thiết kế giao diện  Nên tạo kịch 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 quán  Dễ hiểu  Các lược đồ đồ họa thống khái quát • Các qui tắc liên kết điều khiển:  Không có trang cuối (dead-end): trang web nên có trang liên kết  “Quay lại”, quay trang trước trang chủ: người dùng phải có khả quay lại trang chủ điểm chủ chốt trang web  Cho phép truy cập trực tiếp: cung cấp cho người sử dụng thông tin họ cần với bước thời gian ngắn 18 THIẾT KẾ WEB (tiếp theo) • Tạo ngữ cảnh:  Độc giả thường không ý thức họ đâu cấu trúc tổ chức thông tin website  Cần tạo ngữ cảnh vị trí người dùng họ lướt web • Dải thông ảnh hưởng:  Độc giả 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 quán:  Các biểu tượng nên đơn giản, dễ hiểu, quán  Tính quán cần áp dụng tất trang  Sử dụng quán tiêu đề  Các liên kết quan trọng nên đặt đầu trang  Nên có phong cách biên tập mơ hình tổ chức qn 19 THIẾT KẾ WEB (tiếp theo) • Tính ổn định thiết kế:  Tính ổn định chức thiết kế web có nghĩa giữ thành phần giao tiếp website làm việc ổn định  Tính ổn định chức có thành phần: •  Đặt vật chỗ từ đầu thiết kế;  Giữ chúng hoạt động nhịp nhàng suốt thời gian Phản hồi đối thoại:  Thiết kế website nên đưa khả xác định vị trí, lựa chọn độc giả  Phản hồi bước chuẩn bị cho việc trả lời, đáp ứng địi hỏi, góp ý độc giả Cần tạo 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 20 CÂU HỎI THẢO LUẬN Các vấn đề thiết kế web? 21 MỘT SỐ XU HƯỚNG HIỆN NAY • Tính độc lập thiết bị: Mọi thiết bị đảm bảo truy cập website cách suốt Các dịch vụ web truy cập từ thiết bị máy tính để bàn, máy xách tay, điện thoại di động, … 22 MỘT SỐ XU HƯỚNG HIỆN NAY (tiếp theo) • 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 qua nhiều phương thức khác nhau:  Giọng nói  Phím số  Chuột  Joystick  Màn hình cảm ứng  ………… • Đồng đa phương tiện: tập trung vào thiết kế ngôn ngữ cho kết hợp âm thanh, video, văn bản, đồ họa thời gian thực • Trình duyệt giọng nói: cho phép người sử dụng tương tác với trang web qua tiếng nói, nghe âm ghi lại, âm nhạc, tổng hợp giọng nói 23 TĨM LƯỢC CUỐI BÀI • Trình bày tổng quan khái niệm cơng nghệ web • Khái niệm đa phương tiện tiêu chí đánh giá trang web • Sử dụng phần đồ họa mềm thiết kế vào thiết kế xây dựng website 24