5. Phân tích màn hình, tính năng được giao

Lấy thiết kế từ designer §

• Lấy bản thiết kế giao diện từ designer.

Phân tích giao diện: §

• Phân tích thiết kế: Xem xét các phần tử trong thiết kế, bao gồm các phần tử HTML như tiêu đề, nội dung, hình ảnh, liên kết và các phần tử CSS như màu sắc, font chữ, kích thước và vị trí.
• Cắt hình ảnh: Sử dụng các công cụ thiết kế để cắt các hình ảnh từ file thiết kế và xuất chúng dưới dạng các file hình ảnh (JPEG, PNG, GIF) để sử dụng trong mã HTML CSS.
• Viết mã HTML: Bắt đầu viết mã HTML sử dụng các thẻ và cấu trúc cho từng phần tử trong thiết kế. Bao gồm cả các thẻ HTML để định dạng nội dung, tạo ra các khối và sắp xếp các phần tử trên trang web.
• Viết mã CSS: Viết mã CSS để định dạng và tạo kiểu cho các phần tử trong trang web. Bao gồm các thuộc tính CSS như màu sắc, font chữ, kích thước, đường viền, độ rộng, độ cao và sắp xếp các phần tử.
• Liên kết CSS và HTML: Sử dụng thẻ link để liên kết file CSS với file HTML để áp dụng các kiểu được định nghĩa trong file CSS cho trang web.
• Kiểm tra và tối ưu: Kiểm tra trang web trên các trình duyệt khác nhau để đảm bảo hiển thị đúng cách. Tối ưu mã HTML và CSS để tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.

Phân tích tính năng: §

• Phân tích tính năng của từng thành phần trong giao diện: Xác định hành động của các nút, form điền thông tin, các hiệu ứng trên trang.
• Phân tích luồng hoạt động của tính năng: Xác định các hành động điều hướng trang như sau khi đăng nhập thành công, sau khi mua đơn hàng thành công, sau khi đặt hàng, v.v.
• Phân tích các ngoại lệ của luồng hoạt động: Xác định các hành động khi các ngoại lệ xảy ra như sau khi nhập mật khẩu sai nhiều lần, sau khi điền form thông tin thiếu/ sai nội dung, v.v.