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)

475
-1

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
475
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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)

  1. 1. 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…
  2. 2. 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)
  3. 3. 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.
  4. 4. INTERNET EXPLORER SUPPORT
  5. 5. 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
  6. 6. Đố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.
  7. 7. 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….
  8. 8. RESPONSIVE WEB DESIGN
  9. 9. 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.
  10. 10. 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.
  11. 11. 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
  12. 12. 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
  13. 13. Thank for viewer ! My blog: Nguyencaotu.com tucao@sudo.vn f.nguyencaotu.com g.nguyencaotu.com

×