Web design - Multi browser and device support (Giới thiệu hỗ trợ đã trình duyệt và thiết bị trong lập trình web). Blog: http://nguyencaotu.com

2. MULTI BROWSER SUPPORT
Hỗ trợ đa trình duyệt
Có rất nhiều trình duyệt khác nhau được người sử dụng truy cập vào các
website, các trình duyệt phổ biến như :chrome , firefox và internet explorer….
Mỗi trình duyệt do các công ty (tổ chức) khác nhau phát triển chính vì vậy chúng
cũng có sự khác biệt.
Để hỗ trợ tốt nhất trải nghiêm cho người dùng thì người thiết kế website cần phải
xử lý tốt trên các trình duyệt khác nhau, thay vì việc bắt buộc hay yêu cầu ngươi
sử dụng cài đặt mới trình duyệt khác…

3. MULTI BROWSER SUPPORT
Trên một website có rất nhiều các tính năng khác nhau, và bao gồm rất
nhiều tác vụ cần xử lý như hiển thị hình ảnh, chữ viết, video , flash hay
các tác vụ cao cấp hơn như java script được nhúng trên đó.
Các chuẩn thiết kế Website hiện tại
2.0 (HTML4 và CSS2)
3.0 (HTML5 và CSS3)
Chuẩn 3.0 vẫn đang được hoàn thiện nên nhóm sẽ nói kỹ hơn về 2.0
(hay còn gọi là web 2.0)

4. Ngay cả chính 1 trình duyệt của một công ty phát triển, ở các phiên bản
khác nhau những thuộc tính hỗ trợ tùy từng phiên bản cũng có sự khác
nhau.

5. INTERNET EXPLORER SUPPORT

6. VÍ DỤ XỬ LÝ TRONG CODE
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Demo

7. Đối với người lập trình cần phải kiểm tra trên tất cả các trình duyệt phổ
biến để chắc chắn rằng website được hiển thị và hoạt động tốt.
Đối với các thuộc tính không được trình duyệt hỗ trợ, người lập trinh
cập sử dụng một thuộc tính khác để quy định các thành phần trong
website đều được hiển thị tốt, mang lại trải nghiệm tốt hơn cho người
dùng.

8. MULTI DEVICE SUPPORT (RESPONSIVE)
Hiện tại với nhu cầu phát triển, người ta sử dụng rất nhiều thiết bị để truy
cập website khác nhau, ngay kể cả riêng với màn hình máy tính cũng có
những kích thước khác nhau như màn 15, 17, 20 inch tương ứng. Thậm
chí có nhiều người sử dụng cả màn hình tivi có kích thước lớn để hiển
thị website khác nhau.
Thời điểm hiện tại còn phát triển cả các thiết bị mới như điện thoại thông
minh (smart phone), máy tính bảng (ipad)… có những kích thước màn
hình khác nhau.
Bố cục của website hiển thị cho từng loại thiết bị sẽ phải thay đổi vì những
màn hình nhỏ như Iphone, ipad thì không thể có nhiều cột phức tạp….

9. RESPONSIVE WEB DESIGN

10. RESPONSIVE
Hiện tại để giải quết vấn đề này các nhà lập trình thế giới đã và hiện tại
đang phát triển nền tảng 3.0 bao gồm (HTML5 và CSS3) có thể tự động
xử lý vấn đề này.
Tuy nhiên với nền tảng 2.0 (HTML 4 và CSS 2) vẫn có thể xử lý được bằng
một số cách
- Thiết kế địa chỉ riêng để truy cập website với các thiết bị khác nhau
VD: vnexpresss.net (Cho máy tính) và m.vnexpress.net (cho điện thoại và
Ipad)
- Xử lý trên cùng một giao diện bằng cách thay đổi CSS.

11. THIẾT KẾ ĐỊA CHỈ TRUY CẬP RIÊNG
Người lập trình có thể thiết kế ra các địa chỉ đường dẫn riêng cho các
loại thiết bị khác nhau, bằng cách lập trình ra các website khác nhau, ở
đó có thể thêm, bớt , bố cục sao cho phù hợp với các trình duyệt khác
nhau.
Trên các đường dẫn khác nhau, họ sẽ dùng java script để kiểm tra xem
thiết bị của người sử dụng đang sử dụng loại nào và tự động di chuyển
(redirect) người sử dụng tới giao diện hiển thị tương ứng.

12. XỬ LÝ ĐÃ THIẾT BỊ VỚI CSS
Việc này là khá phức tạp cho người lập trình khi phải định nghĩa, quy định
cho các thuộc tính..
DEMO: http://shoptiptop.de/_css/styles.css

13. THIẾT KẾ VỚI FRAMEWORK
Việc tự code đôi khi trở nên khác phưc tạp và nhàm chán, vì vậy một
nhóm các nhà lập trình của twitter đã phát triển 1 bộ framework
“boostrap”
Bằng cách kết hợp Java script và CS, bootstrap cung cấp cho người lập
trình khả năng xử lý tùy biến với hiệu ứng đẹp mắt, đây hiện đang làm
framework được sử dụng rất phổ biến
Ưu điểm: Tất cả các loại thiết bị đều có thể hiển thị tốt.
Code nhất quán, tối ưu tốt cho 1 nhóm phát triển.
Hỗ trợ tối đa cho người lập trình

14. Thank for viewer !
My blog: Nguyencaotu.com
tucao@sudo.vn
f.nguyencaotu.com
g.nguyencaotu.com