Trang web tĩnh cơ bản 02
Code trang LP (Landing page) tĩnh mentha-oil (Task03)
| Ước tính thời gian công việc | Thời gian làm việc (bao gồm cả hoàn thành chỉnh sửa) |
|---|
| - | 46h |
Files thiết kế
👉 mentha-oil
| PC | SP |
|---|
 |  |
Yêu cầu công việc
- Kiểm tra file thiết kế (PSD) và mark up bằng EJS/SCSS. Trang web tham khảo:
- Xuất file ảnh bằng cách lựa chọn định dạng phù hợp (JPEG/PNG/SVG).
- Đặt heading tag (h1, h2, h3, ... ) phù hợp.
- Phần Q&A sử dụng tag dl, dt, dd.
- Xử lý animation như trong file đính kèm.
Nhiệm vụ và điểm quan trọng
- Design SP được thiết kế ở kích thước 750px để có thể hỗ trợ màn hình Retina. Tất cả parameter phải được chia 2 khi hiển thị (kiểm tra perfect pixel ở màn hình 375px).
- Hiểu được chủng loại file ảnh và cách sử dụng của mỗi loại.
- Với những hình ảnh chứa nhiều nội dung như ảnh chụp thì nên chọn file JPEG với độ nén cao.
- Với những hình ảnh bitmap cần có độ xuyên thấu thì nên chọn file PNG.
- Với những hình ảnh vector chứa ít thông tin thì có thể sử dụng file SVG, tuy nhiên cần lưu ý đến xử lí trên IE11.
- Biết sử dụng tag h1~h6 một cách hợp lí
- Bất kể độ lớn theo design của một phần tử ra sao, nó vẫn phải nằm ở vị trí thích hợp khi xem HTML như một văn bản.
- Xét từ góc độ SEO thì trong văn bản chỉ được phép tồn tại 1 tag h1, trong khi những tag h khác có thể tồn tại ở số nhiều.
- Xét từ góc độ khả năng tiếp cận (accessibility) thì h1~h6 nên được sắp xếp theo thứ tự tăng dần.
- Đối với hình ảnh bo góc trên design thì ta sẽ không xuất file với góc bo mà sẽ chuyển nó thành ảnh có 4 góc vuông rồi thể hiện phần bo góc đó bằng CSS properties. - (Kích thước ảnh sẽ bị thu nhỏ khi tải trên màn hình smartphone. Khi đó, nếu sử dụng ảnh bo góc sẵn thì bán kính góc bo tròn cũng sẽ bị thu hẹp. Ngược lại, nếu làm bằng CSS properties thì ta sẽ có thể chỉ định bán kính góc bo theo chiều ngang ảnh. Đó là lí do ta phải chọn cách xử lí này.)
- Hiểu được cách cài đặt
font-family cho font chữ tiếng Nhật- Cũng giống như font chữ tiếng Anh, font tiếng Nhật cũng được chia ra thành serif và san-serif.
- Trên các thiết bị được sử dụng (bao gồm Windows, Mac, iPhone, Android) thì font serif, san-serif được cài đặt sẵn đếu khác nhau.
- Việc font có hiển thị chính xác hay không chịu ảnh hưởng bởi tên font được đăng kí trên thiết bị. Do vậy, có những trường hợp ta phải đăng kí nhiều tên cho cùng một font.
- Phần lớn các khoảng cách dòng, khoảng cách text được định sẵn giá trị bằng số trong file design đều có thể tái hiện bằng CSS, nhưng cũng có trường hợp phải tái hiện design một cách tỉ mỉ hơn bằng cách điều chỉnh các properties như line-height, letter-spacing.
- Đối với các object cần xê dịch thì hãy sử dụng chính xác position, transform, background-position, v.v...