BÀI GIẢNG PHÁT TRIỂN ỨNG DỤNG WEB

Công Nghệ Thông Tin - Công nghệ thông tin - Công nghệ thông tin Bài giảng Phát triển ứng dụng web Lê Đình Thanh VNU-UET Email: thanhldvnu.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ụcdàn trang (layout)  Văn bản (typography)  Hình ảnh (image) 3 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Công nghệ cần thiết  Meta viewport  display  Positioning  Float  Flexbox  Grids  Conditional CSS  Responsive Images  Responsive Typography 4 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. CSS có điều kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. media truyvấnphươngtiện { Các bảng định dạng } import url("file.css") truyvấnphươngtiện; CSS có điều kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Cú pháp : notonly? () and () Ví dụ: media screen and (max-width: 500px) { .gridmenu { width:100; } .gridmain { width:100; } .gridright { width:100; } } CSS có điều kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. CSS có điều kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. CSS có điều kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Điều kiện hỗ trợ supports { 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 1 11 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 1 - Cấu trúc DOM  section  div  article  article  div  article 13 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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ỏ media (max-width:600px) { div { display:block; } } 14 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 1 - Hoàn thiện  Tham khảo  https:itest.com.vnlectswebappdevlayoutflexbox1.ht m  Chú ý thay đổi chiều rộng cửa sổ và quan sát 15 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Bài thực hành  Tạo trang tương tự như trang sau, sử dụng flexbox để layout  https:itest.com.vnlectswebappdevlayoutflexbox2.ht m  Chú ý thay đổi chiều rộng cửa sổ và quan sát 16 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 2 17 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 2 - DOM  .container  header  article  aside  footer  div 19 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 2 - CSS Khung nhìn lớn trước .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; } 20 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 2 - CSS Khung nhìn bé media (max-width:600px) { .container { display:block; } } 22 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 2 - Hoàn thiện  Tham khảo  https:itest.com.vnlectswebappdevlayoutgrid0.htm  Chú ý thay đổi chiều rộng cửa sổ và quan sát 23 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 3 24 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 3 - CSS div.main { grid-column: 17; grid-row: 25; } div.second { grid-column: 711; grid-row: 23; } 27 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 3 - CSS div.b1 { grid-column: 1 3; grid-row: 712; } div.b2 { grid-column: 3 5; grid-row: 612; } div.b3 { grid-column: 5 7; grid-row: 512; } div.b4 { grid-column: 7 9; grid-row: 412; } div.b5 { grid-column: 9 11; grid-row: 312; } div.b6 { grid-column: 11 13; grid-row: 212; } media (max-width:600px) { .container {display:block; } } 28 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ 3 - Hoàn thiện  Tham khảo  https:itest.com.vnlectswebappdevlayoutgrid1.htm  Chú ý thay đổi chiều rộng cửa sổ và quan sát 29 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ụcdàn trang (layout)  Text (typography)  Hình ảnh 30 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Typography Elements  Phông chữ (typeface, font-family)  Cỡ chữ (font-size)  Số ký tự trên một dòng (line length)  Giãnchiều cao dòng (line height)  Giãn cách ký tự trên dòng (character spacing) 32 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Phông chữ  Được khuyến cáo  Arial, Sans Serif, Serif (cho screens)  Times New Roman, Times (cho print) 33 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 () (base size)  vw 1vw = 1 chiều rộng viewport  vh 1vh = 1 chiều cao viewport 34 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Sử dụng đơn vị nào? 35 Đơn vị px, pt , em rem vh, vw Biết chính xác cỡ chữ là bao nhiêu x Zoom được x x x Tự thay đổi theo viewport x Tự thay đổi theo Preferencens của trình duyệt x x Theo toàn cục x x x Không quá ngưỡng (tonhỏ quá) x x x No one- size fit all Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Thực hành tốt nhất  rem  Có sẵn 4 ưu điểm  Khắc phục 2 hạn chế  Sử dụng media query để ấn định rem theo px khi viewport thay đổi 36 Đơn vị rem Biết chính xác cỡ chữ là bao nhiêu Zoom được x Tự thay đổi theo viewport Tự thay đổi theo Preferencens của trình duyệt x Theo toàn cục x Không quá ngưỡng (tonhỏ quá) x Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Thực hành tốt nhất 39 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 Kiểm soát cận trên (dài nhất) bằng chiều rộng vùng hiển thị. Chiều rộng vùng hiển thị thay đổi tỉ lệ thuận với cỡ chữ. Giãn dòng và Giãn cách ký tự Thay đổi tỉ lệ thuận theo cỡ chữ Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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.vnlectswebappdevtypotypo1.htm 41 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Mức 1 - Stepped Typography  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-hei...

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

CSS có điều kiện

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

<link rel="stylesheet" type="text/css" href="file.css"

CSS có điều kiện

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

CSS có điều kiện

Dàn trang đáp ứng

 Quan trọng nhất

Ví dụ 1

11

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

Ví dụ 1 - CSS

/* Khung nhìn lớn trước */

section, div {display:flex; }

div, article {flex:1}

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

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

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

Ví dụ 2

17

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

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

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

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

Ví dụ 3

Ví dụ 3 - CSS

div.b1 { grid-column: 1 / 3; grid-row: 7/12; }

div.b2 { grid-column: 3 / 5; grid-row: 6/12; }

div.b3 { grid-column: 5 / 7; grid-row: 5/12; }

div.b4 { grid-column: 7 / 9; grid-row: 4/12; }

div.b5 { grid-column: 9 / 11; grid-row: 3/12; }

div.b6 { grid-column: 11 / 13; grid-row: 2/12; }

@media (max-width:600px) {

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

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)

Phông chữ

 Được khuyến cáo

33

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

Tự thay đổi theo Preferencens

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

No size fit all

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

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

Tự thay đổi theo viewport

Tự thay đổi theo Preferencens

Mức 1 - Stepped Typography

 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;

Mức 1 - Stepped Typography

 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

Mức 2 - Fluid Typography

 Cải tiến Stepped Typography nhằm

 Tham khảo

 https://itest.com.vn/lects/webappdev/typo/typo2.htm

Mức 2 - Fluid Typography

 Với viewport width không thuộc Stepped

([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

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

Mức 2 - Fluid Typography

@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;}

}

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)

49

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

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)

trọng nào đó khi xem ở khung nhìn hẹp

<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

layout

<img> fit container

<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

<img srcset sizes>

 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?

Ví dụ <img srcset>, <picture>

 Tham khảo:

 and-embedding/responsive-images/responsive.html

https://mdn.github.io/learning-area/html/multimedia-<picture>

 Ưu điểm

 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?!

 1000 ảnh có khai báo sizes (CSS) như nhau?

 Không nên dùng <picture> trong hầu hết các tình

CSS image

 image-set

đủ

CSS image

 Ưu điểm

hướng lại)

 css-images/

https://cloudfour.com/thinks/responsive-images-101-part-8- Hạn chế

 Ít hoặc nhiều content image

 Dùng <img> fit container

63

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

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ụ

Bước 1 Khai báo img

div.image-box img {width:100%;}

65

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

Bước 2 Cho img container

responsive theo layout

Bước 2 Cho img container

responsive theo layout

 CSS (example)

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) {

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>

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]");

respimg.js

 Tải ảnh phù hợp nhất cho <img>

 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

 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

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

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;

-Hết -

73

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