Bài giảng Công nghệ Web - Bài 06: Thiết kế giao diện WEB - Lê Quang Lợi

Bài 06 Thiết kế giao diện WEB Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Bài 06 Thiết kế giao diện WEB » Một số chú ý xây dựng ứng dụng web » Thiết kế giao diện trang web » Lập trình phía máy khác Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 6.1 Một số chú ý khi xây dựng ứng dụng web » Nội dung quyết định tính sống còn ứng dụng » Chức năng: Thể hiện dịch vụ cung cấp cho người sử dụng » Giao diện: Thể hiện các bố trí (trình bày nội dung) . Hiển thị đúng các thông tin hiện có ? . Hiển thị như nhau trên tất cả trình duyệt? . Hiển thị phải rõ ràng, dễ nhìn, dễ quan sát (khoa học) » Khả năng sử dụng . Dễ sử dụng, dễ thao tác ? . Quy trình ngắn gọn ? . Đáp ứng đúng yêu cầu ? Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 6.1 Một số chú ý » Yếu tố tốc độ » Yếu tố bảo mật » Yếu tố bền vững » Yếu tố chạy trên nhiều môi trường » Kỹ thuật: . mở rộng ? . nâng cấp ? . sao lưu ? . chống chịu lỗi Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 6.2 Quy trình thiết kế giao diện trang WEB B01: Giác mẫu: (thiết kế đồ họa) file PSD . Thiết kế tổng thể giao diện trên Photoshop . Thiết kế giao diện các trang khác B02: Cắt CSS B2.1 Thiết kế trang khung (trang chủ/trang thành phần) . Tạo trang HTML . Tạo CSS kết hợp HTML dựa trên giao diện PSD B2.2: Thiết kế trang đầy đủ (giao diện) B2.3: Tích hợp mã javascript: kiểm tra tính hợp lệ dữ liệu (kiểm tra dữ liệu, tích hợp hiệu ứng) B2.4: Triển khai chạy thử ứng dụng trên trình duyệt Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 6.3 Ví dụ về thiết kế giao diện Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 6.3 Ví dụ về thiết kế giao diện Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY