CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 1. Công nghệ Responsive Web Design (RWD) 1. Lịch sử ra đời của RWD Responsive website đươ ̣c nhắ c đế n lầ n đầ u tiên vào từ năm 2010. Tuy nhiên, phải tới đầ u năm 2012 thı̀ khái niê ̣m mới này mới đươ ̣c để mắ t và tiế p câ ̣n.
Đó là những kỹ thuâ ̣t mới đươ ̣c quan tâm, ta ̣o ra một xu hướng và đã đươ ̣c rấ t nhiề u website thực hiê ̣n thành công. Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là một dạng chuẩn, một xu hướng thiết kế mới. Nguyên nhân xuất phát từ việc cùng với sự phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân giải…Và để đáp ứng việc thay vì không thể nào kịp với việc ứng với mỗi thiết bị di động có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó. Điều không thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện.
Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển thị với mọi chế độ. Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi để tương thích với những quy định đó tuy theo kích thước của trình duyệt. Responsive Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển website cũng như đối với doanh nghiệp. Một số khái niệm Responsive website có thể hiể u là khái niê ̣m về một website "phản hồ i", một website có khả năng "tự biế n đổ i" dựa trên môi trường hoa ̣t đô ̣ng của chúng.
Cùng một website, nhưng giao diê ̣n và phương thức tương tác của website đó có thể biế n đổ i khi truy câ ̣p website đó từ các thiế t bi kha ̣ ́ c nhau như điê ̣n thoa ̣i, ipad, tablet, laptop. Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi. ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 3 Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Những ưu thế của Responsive Web Design Thân thiện với người dùng Thiết kế đáp ứng rõ ràng sẽ khiến trang web trở nên thân thiện với người sử dụng bởi nó có thể “vừa vặn” với bất kỳ màn hình nào của hầu hết các thiết bị.
Ngày nay, công nghệ phát triển không ngừng, smartphone không hề xa lạ với con người. Vì vậy nếu có một trang web áp dụng giải pháp này, mọi người sẽ luôn có khả năng kết nối với trang web một các hiệu quả nhất. Với Responsive website sẽ được xử lý nhanh hơn khi người dung truy cập website những thiết bị di động. Giao diện website được thiết kế tập trung hiển thị cho người dùng những nội dung quan trọng nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ đây khách hàng truy cập website không phải mất thời gian để điều chỉnh kích thước, phóng to nội dung để có thể xem rõ hơn.
Có responsive website sẽ thật sự trở nên chuyên nghiệp và hiệu quả. Đối với website một cột hay nhiều cột thì Responsive Web Design hiển thị vô cùng ấn tượng. Và thiết kế hiện đại theo xu hướng 2014 và tương lai là flat và trải rộng full màn hình với các hiển thị theo từng dòng phẳng. Có lợi tại phân khúc dành cho điện thoại di động Nhờ có Responsive web design, có thể tính được toàn bộ số lượt người truy cập trong một trang web.
Có thể có được tất cả các thông tin cần thiết liên quan đến lượt người truy cập trang web bởi vì giờ đây người dùng trên di động cũng được tính lượt truy cập. Do đó, lượng người truy cập được tính toán chính xác sẽ rất hiệu quả cho việc phân tích, đánh giá chất lượng của trang web hoặc nâng cấp nó. Nâng cao khả năng chia sẻ Responsive web design cũng cho người chủ trang web cơ hội để thu thập tất cả những chia sẻ của các mạng xã hội chỉ với một đường dẫn URL. Nó sẽ cho phép chúng ta có những đóng góp hay hơn cho trang web, gần gũi hơn với người dùng.
+ Không phải lo về đổi hướng người dùng Các lập trình viên sẽ không phải tạo những liên kết ngược hay đổi hướng cho người dùng điện thoại nữa. Hẳn nhiên là trang web sẽ dễ dàng xuất hiện trên các công cụ tìm kiếm hơn. + Ít phải bảo dưỡng hơn Phát triển một trang web riêng cho điện thoại di động là thì chúng ta phải bỏ công duy trì cả hai trang web. Nhưng nếu chúng ta chọn Responsive web design, sự bảo hành cho ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 4 Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ trang web sẽ rất nhỏ vì chỉ có duy nhất một bản thiết kế cho mọi thiết bị.
Điều này sẽ làm giảm khối lượng cho công việc. Khả năng ứng dụng Responsive Web Design hiện nay Vài năm trở la ̣i đây, các ngôn ngữ lâ ̣p trıǹ h phu ̣c vu ̣ cho viê ̣c thiế t kế website cũng có những bước tiế n đáng nga ̣c nhiên. Các ngôn ngữ lâ ̣p trıǹ h câ ̣p nhâ ̣t phiên bản mới cho phép khai thác nhiề u tıń h năng hơn, cung cấ p nhiề u công cu ̣ hơn cho các lâ ̣p trıǹ h viên. HTML5, CSS3, PHP6.
ngày càng đươ ̣c ứng du ̣ng nhiề u hơn trên các website. Trước đây khoảng 2 năm, để thiế t kế một website, lập trình viên thường lựa cho ̣n màn hıǹ h tiêu chuẩ n 1024x768 (đô ̣ phân giải màn hıǹ h phổ biế n trước đây) cho máy tıń h thông thường hay 320x240 cho các điê ̣n thoa ̣i di đô ̣ng. Website cho máy tıń h thông thường đươ ̣c thiế t kế riêng, website cho điê ̣n thoa ̣i di đô ̣ng đươ ̣c thiế t kế riêng vı̀ những giới ha ̣n này. Mô ̣t số công ty cho ̣n giải pháp là viế t phầ n mề m cho các điê ̣n thoa ̣i di đô ̣ng chứ không thiế t kế website bởi sự bấ t tiê ̣n khi lướt web trên điê ̣n thoai di đô ̣ng.
Nhưng hiê ̣n nay, màn hı̀nh máy tı́nh thường là màn rộng lớn, với đô ̣ phân giải phổ biế n 1366x768, và đô ̣ phân giải này cũng đang có xu hướng nâng cao thêm. Các điê ̣n thoa ̣i cũng có đô ̣ phân giải rấ t lớn so với trước đây, và khá phong phú: 720x1280, 480x800. Các thiế t bi ̣ di đô ̣ng tablet mới cũng có đô ̣ phân giải không đồ ng đề u: 1024x600, 1024x768,2048×1536. Điề u này làm cho viê ̣c thiế t kế giao diê ̣n website trở nên khó khăn hơn, do rấ t khó để tım ̀ ra đươ ̣c một quy chuẩ n chung.
Chıń h điề u này cũng thôi thúc sự phát triể n của Responsive web design ta ̣o một website có thể thıć h ứng với tấ t cả các đô ̣ phân giải màn hıǹ h. Công nghê ̣ Responsive Web Design có thể nhâ ̣n diê ̣n đươ ̣c thiế t bi ̣ đang truy câ ̣p là máy tın ́ h bảng Ipad hay điê ̣n thoa ̣i di đô ̣ng thông du ̣ng và trả về giao diê ̣n tự đô ̣ng hơ ̣p lý và dễ sử du ̣ng nhấ t. Responsive Web Design còn có thể xác đinh ̣ đươ ̣c đô ̣ phân giải đưa ra giao diê ̣n và hın ̀ h ảnh không bi ̣ méo mó hay vỡ giao diê ̣n.Và có thể tự đô ̣ng loa ̣i bỏ những hıǹ h ảnh ,slide… đươ ̣c phép hiển thi ̣ hay không ?. Để thiế t bi ̣ có thể tải website nhanh nhấ t và dễ sử du ̣ng nhấ t trên những thiế t bi co ̣ ́ màn hı̀nh ha ̣n chế và tố c đô ̣ yế u.
Cơ chế hiển thị đáp ứng thiết bị người dùng Khi nhận một yêu cầu vào website do người dùng gửi tới, máy chủ chứa website sẽ phân tích xem người dùng đang sử dụng loại thiết bị gì và trình duyệt web gì và dựa vào đó gửi xuống một file trình bày kiểu (style sheet) tương ứng. File style sheet này sẽ quyết định việc hiển thị nội dung web theo cách phù hợp nhất với màn hình của thiết bị và khung nhìn khiến cho người dùng có được một trải nghiệm thân thiện nhất. Ta có thể minh họa như sau: ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 5 Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cụ thể để xác định tên, bộ nguồn dựng trang của chính nó.
Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web. Ví dụ, UserAgent của IE 10.0), còn của Safari trên iPad là: Mozilla/5. Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www.com/intl/en/chrome/browser/ bằng máy Macbook thì nút download là dành cho Macbook, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows).
Ngoài ra, việc nhận biết thiết bị còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng.