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...