Công nghệ web - Bài 06: Thiết kế giao diện Web

Bài 06 Thiết kế giao diện WEB Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 Bài 06 Thiết kế giao diện WEB Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 ? 6.1 Một số chú ý khi xây dựng ứng dụng web Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY » 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 6.1 Một số chú ý 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