Báo Cáo - Giao Tiếp Người Máy - Đề Tài - Responsive Web Design

BÁO CÁO GIỮA KÌ

GIAO TIẾP NGƯỜI MÁY
Tên đề tài: RESPONSIVE WEB DESIGN (RWD)


Giao diện “động”

Xu hướng “động”

Tương thích “động”







Flexible images
là một nguyên tắc
mà có thể nói là
một thành phần
không thể thiếu
và rất quan trọng trong
Responsive Wed Design


Vậy Flexible images là gì?
Khái niệm 1: Fluid Image là một quy

tắc thiết kế: “khơng cho hình ảnh vượt

q chiều rộng của container chứa nó
và hình ảnh có thể thay đổi theo kích
thước của container chứa nó”.
Khái niệm 2: Tạo ra những image tối

ưu hóa cho điện thoại di động với màn
hình nhỏ và sau đó phục vụ cho độ
phân giải cao hơn các phiên bản màn
hình lớn hơn


Vậy mục đích Flexible images là gì?
ngun tắc Fluid images cho phép
các nhà thiết kế có thể tạo ra các
layout với những hình ảnh đáp ứng
các kích thước với độ phân giải khác
nhau.
=> Nói một cách dể hiểu hơn thì
Flexible images giúp hình ảnh có thể
linh hoạt thích ứng với từng kích cở
màn hình to hoặc nhỏ mà khơng làm
mất đi chất lượng của nó


Nguyên lý thực hiện
Flexible images trong
Responsive Wed Design:
Hình ảnh được chia
thành 2 nhóm: một
nhóm có thể cắt bỏ đi

những phần khơng
quan trọng và nhóm
khác sẽ giữ ngun
ảnh nhưng sẽ bị zoom
nhỏ hoặc to lên.


Kỹ thuật để thưc hiện Flexible
images trong Responsive
Wed Design:
Sử dụng stylesheet với
img{max-width: 100%;}
Sử dụng phần tử
HTML5 và javascript
Sử dụng dịch vụ Cloud để
đáp ứng hình ảnh phù hợp
với từng thiết bị


Kỹ thuật để thưc hiện Flexible images
trong Responsive Wed Design phổ biến
nhất là: Sử dụng stylesheet với img{maxwidth: 100%;}
Quy tắc này lần đầu tiên được khám
phá bởi Richard Rutter.
Nó sẽ cho phép hình ảnh có thể
hiển thị tại bất cứ kích cỡ nào,
miễn là nó hẹp hơn so với
container chứa nó
Nếu như xảy ra việc hình ảnh lớn
hơn container chứa nó thì maxwidth: 100% sẽ cố định nó vào

đúng vị trí.


Nguyên lý của img {max-width:
100%; height: auto;} :
Thuộc tính max-width.
Thuộc tính height: auto.



Navigation: là những kỹ thuật giúp người truy cập có thể
thay đổi từ trang này đến trang khác trong một trang web


Menu


Tập hợp các đường link trong web


Cho phép tự động
điều chỉnh kích
thước cho phù hợp
với tất cả thiết bị,
màn hình khác
nhau


Giữ nguyên