Phát triển ứng dụng web: Bài giảng

Bài giảng
Phát triển ứng dụng web
Lê Đình Thanh
VNU-UET
Email: thanhld@vnu.edu.vn
Mobile: 0987.257.504
Website: https://uet.vnu.edu.vn/~thanhld
1
RWD
Responsive Web Design
2
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Thiết kế đáp ứng
 Các thành phần đáp ứng
 Bố cục/dàn trang (layout)
 Văn bản (typography)
 Hình ảnh (image)
3
Công nghệ cần thiết
 Meta viewport
 display
 Positioning
 Float
 Flexbox
 Grids
 Conditional CSS
 Responsive Images
 Responsive Typography
4
CSS có điều kiện
<link rel="stylesheet" type="text/css" href="file.css"
media="truy_vấn_phương_tiện">
@media truy_vấn_phương_tiện {
Các bảng định dạng
}
@import url("file.css") truy_vấn_phương_tiện;

Cú pháp <truy_vấn_phương_tiện>:
[not|only]? <kiểu_phương_tiện> |
(<đặc_điểm_của_phương_tiện>) [and
(<đặc_điểm_của_phương_tiện>)]*
Ví dụ:
@media screen and (max-width: 500px) {
.gridmenu { width:100%; }
.gridmain { width:100%; }
.gridright { width:100%; }
}



• Điều kiện hỗ trợ
@supports <điều_kiện_hỗ_trợ> {
Các bảng định dạng
}
Ví dụ
@supports (display:flexbox) and (not (display:inline-grid))

{
div.box {display:flexbox;}
span {display:flexbox;}
}
Dàn trang đáp ứng
 Quan trọng nhất
10
Ví dụ 1
11
Ví dụ 1
 Nếu khung nhìn lớn thì ba đối tượng trên cùng hàng
với tỷ lệ là 1:2:3
 Nếu khung nhìn vừa thì HAI đối tượng đầu tiên trên
cùng hàng với tỷ lệ 1:2, đối tượng còn lại trên hàng
mới rộng 100%
 Nếu khung nhìn hẹp thì mỗi đối tượng trên một
hàng với độ rộng 100%
12
Ví dụ 1 - Cấu trúc DOM
 section
 div
 article
 article
 div
 article
13
Ví dụ 1 - CSS
/* Khung nhìn lớn trước */
section, div {display:flex; }
div, article {flex:1}
article:nth-of-type(2) { flex: 2;}
/* Tiếp theo là trung bình */

@media (max-width:767px) {
section {display:block; }
}
/* Cuối cùng là nhỏ */

div { display:block; }
}
14
Ví dụ 1 - Hoàn thiện
 Tham khảo
 https://itest.com.vn/lects/webappdev/layout/flexbox1.ht
m
 Chú ý thay đổi chiều rộng cửa sổ và quan sát
15
Bài thực hành
 Tạo trang tương tự như trang sau, sử dụng flexbox để
layout
 https://itest.com.vn/lects/webappdev/layout/flexbox2.ht
m
16
Ví dụ 2
17
Ví dụ 2
 Lưới gồm 3 hàng, 4 cột
 header: Toàn bộ hàng 1
 aside: 1 ô bên trái hàng 2
 article: 3 ô bên phải hàng 2
 footer: hàng 3
 nửa trái: 2 ô bên trái hàng 3
 nửa phải: 2 ô bên phải hàng 3
18
Ví dụ 2 - DOM
 .container
 header
 article
 aside
 footer
 div
19
Ví dụ 2 - CSS
/* Khung nhìn lớn trước */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
20
Ví dụ 2 - CSS
header { grid-column: 1 / 5; grid-row: 1;}
article { grid-column: 2 / 5; grid-row: 2; }
aside { grid-column: 1; grid-row: 2; }
footer { grid-column: 1 / 3; grid-row: 3; }
.container > div { grid-column: 3 / 5; grid-row: 3;}
21
Ví dụ 2 - CSS
/* Khung nhìn bé */
.container {
display:block;
}
}
22
 Tham khảo
 https://itest.com.vn/lects/webappdev/layout/grid0.htm
23
Ví dụ 3
24
Ví dụ 3 - DOM
 div.container
 header
 div.main
 div.second
 div.b1
 div.b2
 div.b3
 div.b4
 div.b5
 dib.b6
 footer
25
Ví dụ 3 - CSS
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}
header { grid-column: 1 / 13; grid-row: 1; }

footer { grid-column: 1 / 13; grid-row: 12; }
26
Ví dụ 3 - CSS
div.main {
grid-column: 1/7;
grid-row: 2/5;
}
div.second {
grid-column: 7/11;
grid-row: 2/3;
}
27
Ví dụ 3 - CSS
div.b1 { grid-column: 1 / 3; grid-row: 7/12; }
.container {display:block; }
}
28
 Tham khảo
 https://itest.com.vn/lects/webappdev/layout/grid1.htm
29
 Bố cục/dàn trang (layout)
 Text (typography)
 Hình ảnh
30
Typography
 Văn bản chiếm tỉ trọng cao trong nội dung website
 Văn bản dễ đọc (readability of text) là UX vô cùng cần
thiết
 Nội dung (từ vựng, cú pháp): ngoài phạm vi môn học
này
 Trình bày văn bản(typography): responsive
31
Typography Elements
 Phông chữ (typeface, font-family)
 Cỡ chữ (font-size)
 Số ký tự trên một dòng (line length)
 Giãn/chiều cao dòng (line height)
 Giãn cách ký tự trên dòng (character spacing)
32
Phông chữ
 Được khuyến cáo
 Arial, Sans Serif, Serif (cho screens)
 Times New Roman, Times (cho print)
33
Cỡ chữ
 Tuyệt đối
 px Pixel, dùng cho màn hình điện tử
 pt Point, dùng khi in
 Tương đối
 % Tỉ lệ theo cỡ chữ của đối tượng cha
 em Độ rộng ký tự M viết hoa theo cỡ chữ của đối tượng
cha
 rem Độ rộng ký tự M viết hoa theo cỡ chữ của đối tượng
gốc DOM (<html>) (base size)
 vw 1vw = 1% chiều rộng viewport
 vh 1vh = 1% chiều cao viewport
34
No one-
Sử dụng đơn vị nào? size fit

all
%, vh,
Đơn vị px, pt rem
em vw
Biết chính xác cỡ chữ là bao
x
nhiêu
Zoom được x x x
Tự thay đổi theo viewport x
Tự thay đổi theo Preferencens

x x
của trình duyệt
Theo toàn cục x x x
Không quá ngưỡng (to/nhỏ quá)

x x x 35
Thực hành tốt nhất
Đơn vị rem
Biết chính xác cỡ chữ là bao

 rem nhiêu
 Có sẵn 4 ưu điểm
 Khắc phục 2 hạn Zoom được x
chế
 Sử dụng media Tự thay đổi theo viewport
query để ấn định
rem theo px khi Tự thay đổi theo Preferencens
viewport thay đổi x
của trình duyệt
Theo toàn cục x
Không quá ngưỡng (to/nhỏ quá) x

36
Số ký tự trên một dòng
 Tối ưu 50-60 ký tự, bao gồm cả dấu trắng
(“Typographie”, E. Ruder)
 Có thể kiểm soát cận trên (dài nhất) bằng cách kiểm
soát độ rộng vùng hiển thị văn bản.
37
Giãn dòng và Giãn cách ký tự
 Gần quá hoặc xa quá đều khó đọc
 Có thể đặt độc lập với cỡ chữ
 Nhưng nên đặt tỉ lệ thuận với cỡ chữ để tạo nên sự
cân đối và dễ đọc
38
Thực hành tốt nhất
Cỡ chữ
Thành phần cơ sở, điều khiển
các thành phần còn lại
Số ký tự trên dòng Giãn dòng và

Kiểm soát cận trên (dài Giãn cách ký
nhất) bằng chiều rộng vùng
hiển thị. Chiều rộng vùng tự
hiển thị thay đổi tỉ lệ thuận Thay đổi tỉ lệ thuận
với cỡ chữ. theo cỡ chữ
39
Thực hành tốt nhất (tổng hợp)
1. Dùng rem và thay đổi rem theo
viewport
2. Giãn dòng, giãn cách ký tự, độ
dài dòng tối đa phụ thuộc rem
40
Mức 1 - Stepped Typography
 rem (cùng các thành phần phụ thuộc) thay đổi theo
bậc thang
 Mỗi bậc thang cho một viewport width
 Tham khảo
 https://itest.com.vn/lects/webappdev/typo/typo1.htm
41
 Dùng rem và thay đổi rem theo viewport
@media screen and (min-width:360px) { :root {font-size:
16px} }
@media screen and (min-width:768px) { :root {font-size:
18px;} }
div.page h1 {font-size: 1.5rem;}
 Giãn dòng, giãn cách ký tự, độ dài dòng tối đa phụ
thuộc rem
line-height: 1.5;
div.page {max-width:35rem;}
42
 Tạo các media query theo các breakpoints là chiều
rộng của các thiết bị hiện hành
 Galaxy S9: 360 x 740
 iPad: 768 x 1024
 Kindle: 800 x 1280
 Desktop: 1366 x 768
 ...
 Là giải pháp chấp nhận được
 Hơn nữa, tối ưu cho từng thiết bị đã biết
43
Mức 2 - Fluid Typography
 Cải tiến Stepped Typography nhằm
 Tối ưu cho từng thiết bị đã biết biết giống như Stepped
 Tối ưu cho cả thiết bị chưa biết/sẽ có trong tương lai
 Tham khảo
 https://itest.com.vn/lects/webappdev/typo/typo2.htm
44
 Với viewport width không thuộc Stepped
 Đặt rem nằm giữa nấc dưới và nấc trên
([step_i+1 size] - [step_i size]) * (100vw - [step_i viewport width])

rem = [step_i size] + -----------------------------------------------------------------------
([step_i+1 viewport width] - [setp_i viewport width])
45
@media screen and (min-width:768px) {
:root {font-size: calc(18px + 2 * ((100vw - 768px) / 598));}
}
@media screen and (min-width:1366px) {
:root {font-size:20px;}
}
46
 Bố cục (layout)
 Text (typography)
 Hình ảnh (image)
47
Responsive image
 Thay đổi kích thước
hiển thị (resizing)
một ảnh hoặc/và thay
một ảnh (source)
bằng ảnh khác tùy
theo đặc tính khung
hiển thị và tùy chọn
của người dùng thị
nhằm
 Tối ưu hóa trải
nghiệm người dùng
 Tối ưu hóa băng
thông
48
Case 1. Resolution Switching
 Thay đổi kích thước hiển thị (resizing) ảnh mà không
thay đổi nội dung hay tỉ lệ rộng/cao của ảnh (cùng
một ảnh, có thể /nên thay đổi nguồn/URL ảnh)
 Chiếm phần lớn các tình huống thực tế
49
Case 2. Art Direction
 Thay đổi nội dung và tỉ lệ cao/rộng của ảnh (ảnh khác,
thay đổi nguồn ảnh)
 Tập trung vào 1 chi tiết quan
trọng nào đó khi xem ở
khung nhìn hẹp.
50
Các giải pháp công nghệ
 <img> fit container
 <img srcset/sizes>
 <picture>
 CSS image
 JavaScript
 Bất kỳ giải pháp

cũng cần <img>
51
<img> fit container
 Mỗi <img> có một nguồn/URL duy nhất
 Chỉ thay đổi kích thước hiển thị (resizing)
 Đặt <img> trong container
 img width = 100% (fit)
 container thay đổi vị trí và chiều rộng theo responsive
layout
 Ví dụ: https://alistapart.github.io/code-
samples/responsive-web-design/ex/ex-site-FINAL.html
52
<img> fit container
 Ưu điểm
 Ảnh được resize theo toàn cục của layout
 Hạn chế
 Không giải quyết vấn đề art direction
 Sử dụng ảnh lớn không cần thiết
 => Tốn băng thông và thời gian tải
53
<img srcset>
 Trình duyệt tự chọn nguồn ảnh phù hợp nhất với độ
phân giải (resolution) của màn hình.
54
<img srcset sizes>
 Trình duyệt tự chọn nguồn ảnh phù hợp nhất với độ
phân giải của màn hình và kích thước hiển thị.
55
<img srcset/sizes>
 Ưu điểm
 Cung cấp nguồn ành và miêu tả ảnh (x hoặc w) để trình
duyệt tự chọn ảnh phù hợp nhất (linh động)
 Hạn chế
 Không tách biệt nội dung với trình diễn
 sizes là danh sách các chuỗi truy vấn phương tiện(CSS)
 1000 ảnh có khai báo sizes (CSS) như nhau?
 Khó đặt sizes theo layout toàn cục
56
<picture>
 <source> cung cấp danh sách các nguồn và điều kiện
để chọn nguồn
57
Ví dụ <img srcset>, <picture>
 Tham khảo:
 https://mdn.github.io/learning-area/html/multimedia-
and-embedding/responsive-images/responsive.html
58
<picture>
 Ưu điểm
 Cung cấp nhiều cách chọn nguồn ảnh hơn
 Hạn chế
 srcset, sizes của <source> tương tự của <img>, cú pháp
<picture> gần giống <video>, <audio>, chức năng
<picture> như <img>: Reinvent the wheel?!
 Không tách biệt nội dung với trình diễn
 1000 ảnh có khai báo sizes (CSS) như nhau?
 Khó đặt sizes theo layout toàn cục
 Không nên dùng <picture> trong hầu hết các tình
huống
 https://cloudfour.com/thinks/dont-use-picture-most-of-
the-time/ 59
CSS image
 image-set
 Ra đời trước và là mô hình cho srcset
 Nhưng bị lãng quên, các trình duyệt chưa/không hỗ trợ đầy
đủ
60
CSS image
 Resolution media query
61
CSS image
 Ưu điểm
 Tách biệt nội dung với trình diễn
 Là tiếp cận đúng đắn cho responsive image (cần W3C định
hướng lại)
 https://cloudfour.com/thinks/responsive-images-101-part-8-
css-images/
 Hạn chế
 Bị lãng quên. Các trình duyệt hỗ trợ không đầy đủ
 Hiện tại chỉ làm tốt với ảnh nền nhưng phải giải quyết
vấn đề double loads
 https://timkadlec.com/2012/04/media-query-asset-
downloading-results/
62
Tiếp cận đúng
 Không nên dùng <picture> (vì tương lai của web).
 Ảnh nền
 Sử dụng CSS image
 Ít content image
 Có thể sử dụng <img srcset>
 Ít hoặc nhiều content image
 Dùng <img> fit container
 Sử dụng JavaScript để tự động tải ảnh phù hợp nhất.
63
Sử dụng img container
 Bước 1. Khai báo img container
 Bước 2. Cho img container responsive theo layout của
trang
 Bước 3. Bao hàm JavaScript tự động tải ảnh phù hợp
nhất vào các img container.
 Ví dụ
 https://itest.com.vn/lects/webappdev/responsive-image/
64
Bước 1. Khai báo img
container
 HMTL
 Container chứa danh sách các nguồn ảnh kèm width
descriptor
<div class="image-box">
<input type="hidden" value=" small.jpg 140, large.jpg 380 ">
</div>
 CSS
 Ảnh chiếm 100% width của container
div.image-box img {width:100%;}
65
Bước 2. Cho img container
responsive theo layout
 DOM (example)
 div.headline
 div.news
 div.image-box
 h3
 p
 div.news
 div.image-box
 h3
 p
 ...
66
Bước 2. Cho img container
responsive theo layout
 CSS (example)
 img container sẽ tự động thay đổi vị trí và resize theo
layout. <img> sẽ tự động resize 100% width theo img
container.
div.headline {display:flex; flex-wrap:wrap;}

div.news {flex:1 225px; max-width:600px;}
@media screen and (max-width:450px) {
div.headline {display:block;}
div.news {display:flex; flex-direction:column;}
}
67
Bước 3. Bao hàm JavaScript tự
động tải ảnh phù hợp nhất vào
các img container
 <script type="text/javascript"
src="respimg.js"></script>
68
respimg.js
 Tạo một đối tượng <img> trong mỗi img container
function createImg() {
let imgbox = document.querySelectorAll("div.image-box");
for (let i = 0; i < imgbox.length; i++) {
let img = document.createElement("img");
img.src = "";
imgbox[i].insertBefore(img, imgbox[i].firstChild);
}
}
69
respimg.js
 Lần lượt tải ảnh cho từng đối tượng <img>
function loadImg() {
let box = document.querySelectorAll("div.image-box");
let img = document.querySelectorAll("div.image-box img");
let src = document.querySelectorAll("div.image-box
input[type=hidden]");
for (let i = 0; i < box.length; i++) {
loadI(box[i], img[i], src[i].value);
}
}
70
respimg.js
 Tải ảnh phù hợp nhất cho <img>
 Input
 box là img container
 img là đối tượng <img> cần tải ảnh, đã được tạo và đưa vào img
container bằng creatImg()
 src là danh sách các nguồn ảnh
 Output
 img tải ảnh phù hợp nhất có nguồn có trong src
 Phù hợp nhất = tỉ lệ co giãn khi hiển thị nhỏ nhất
function loadI(box, img, src) { ... }

71
respimg.js
function loadI(box, img, src) {
if (box.clientWidth == 0) return;
let ret = ""; let ratio = 1000.0;
let s = src.replace(/\s\s[\s]*/g, " ").trim().split(",");
for (let i = 0; i < s.length; i++) {
let v = s[i].trim().split(" "); let r = 100.0;
if (v.length >= 2) r = 1.0 * Math.abs(parseInt(v[1]) -
box.clientWidth) / box.clientWidth;
if (r < ratio) { ratio = r; ret = v[0]; }
}
if (ret != "" && img.src.indexOf(ret) < 0) img.src = ret;
72
-----Hết-----
73

Phát triển ứng dụng web: Bài giảng

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Phát triển ứng dụng web: Bài giảng

Uploaded by

Copyright:

Available Formats

Bài giảng

Phát triển ứng dụng web

@import url("file.css") truy_vấn_phương_tiện;

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

@supports (display:flexbox) and (not (display:inline-grid))

 Quan trọng nhất

/* Tiếp theo là trung bình */

/* Cuối cùng là nhỏ */

header { grid-column: 1 / 13; grid-row: 1; }

 Trình bày văn bản(typography): responsive

Sử dụng đơn vị nào? size fit

Tự thay đổi theo viewport x

Tự thay đổi theo Preferencens

Theo toàn cục x x x

Không quá ngưỡng (to/nhỏ quá)

Biết chính xác cỡ chữ là bao

Theo toàn cục x

Không quá ngưỡng (to/nhỏ quá) x

Số ký tự trên dòng Giãn dòng và

([step_i+1 size] - [step_i size]) * (100vw - [step_i viewport width])

 Bất kỳ giải pháp

div.headline {display:flex; flex-wrap:wrap;}

function loadI(box, img, src) { ... }

You might also like