Về trang web đẹp Về trang web đẹp

Chúng tôi tự hào là công ty thiết kế trang web đẹp, chuyên nghiệp, ấn tượng được cộng đồng quốc tế công nhận tại TPHCM.

Thiết kế Website Thiết kế Website

Thiết kế website chuyên nghiệp ấn tượng Giao diện website không chỉ đẹp, chuẩn SEO mà còn là duy nhất với mỗi thiết kế

Xu hướng thiết kế Xu hướng thiết kế

TIn tức xu hướng thiết kế mới nhất. cẩm nang kiến thức lựa chọn dịch vụ thiết kế website đẹp chuyên nghiệp

Dự án tiêu biểu Dự án tiêu biểu

Các ý tưởng dự án thử nghiệm thiết kế Website chuyên nghiệp - Tự hào đồng hành cùng các doanh nghiệp.

Liên hệ Liên hệ

Liên hệ để chúng tôi được tư vấn hỗ trợ bạn miễn phí trước khi thiết kế để có website đẹp, chuyên nghiệp, ấn tượng.

gift

Xu hướng thiết kế

TIn tức xu hướng thiết kế mới nhất. cẩm nang kiến thức lựa chọn dịch vụ thiết kế website đẹp chuyên nghiệp

Trang chủ Xu hướng thiết kế Responsive Web Design
Responsive Web Design
September 11, 2015

Responsive Web Design

Line
  1. KHÁI QUÁT VỀ INTERNET:

Trước khi đi vào tìm hiểu xu hướng thiết kế Responsive web design thì ở đây chúng tôi xin đi ra bên ngoài một chút về Internet : Một trong những phát minh lớn nhất thời đại thuộc thế kỷ 20.

Tiền thân của Internet ngày nay của chúng ta là mạng ARPANET – Một hình thức mạng liên khu vực Wide Area Network xuất hiện vào năm 1974  với giao thức TCP/IP trở thành chuẩn của những máy tính thuộc mạng ARPANET và ngành quân sự của hợp chủng quốc Hoa Kỳ năm 1983. Giao thức TCP/IP  cho thấy các điểm mạnh vượt trội của nó mà trọng điểm nhất đó là khả năng liên kết các mạng khác với nhau thành một hệ thống một cách dễ dàng, cho phép các mạng nghiên cứu và thương mại khác kết nối với ARPANET, thúc đẩy việc tạo ra một siêu mạng liên kết vô cùng trên phạm vi cưc lớn.

Ta có thể nói mạng ARPANET chính là trục xương sống của Internet những năm đầu 80. Từ giữa những năm 1980 đánh dấu sự chuyển giao , là một trong những mốc lịch sử phát triển của Internet với sự ra đời của hệ thống mạng liên kết NFSNET và sự chuyển giao từ ARPANET sang NFSNET của nhiều DN, các mạng thương mại … để NFSNET  thay thế  vai trò  là mạng xương sống của Internet  và những mạng khác lấy làm tiền đề cho phát triển bùng nổ của Internet như hiện tại.

Internet trở thành một mạng lớn nhất trên thế giới, mạng của các mạng, xuất hiện trong mọi lĩnh vực của cuộc sống mở ra một thời kỳ mới : Thương mại điện tử. Và cũng vì thế gần như mọi mạng, mọi thiết bị di động,  không dây or có dây đều liên tục ra sản phẩm mới nhằm phục vụ lĩnh vực Internet.

trang web đẹp 02

 2. Responsive Web Design 

  A. KHÁI NIỆM, LÝ DO RA ĐỜI:

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 thành viên coder viết code SS 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.  Sau khi có cái nhìn sơ bộ ban đầu về nguyên nhân ra đời cùng với khái niệm chung thì chúng ta sẽ sang phần giới thiệu một cách đầy đủ các kỹ thuật trong Responsive Web Design.

 B.  Responsive Design Techniques:

(Những kỹ thuật thiết kế đáp ứng linh hoạt)

  • CSS3 Transitions & Media Queries:

CSS ( Cascading Style Sheets) là file .css có tác dụng tách phần định dạng style ra khỏi nội dung HTML giúp dễ dàng quản lý được nội dung trong HTML.

Ở đây cái tên CSS3 Transitions & Media Queries  đã nói lên đặc tính của kỹ thuật này : CSS chuyển đổi với truy vấn, yêu cầu phương tiện truyền thông. Trong đó thiết kế cần tới CSS Media Queries để giúp website tự động thay đổi bố cục theo màn hình.( CSS3 Media Queries được phát triển lên từ Media Type CSS2). Tuy nhiên nếu chỉ có CSS Media Queries thì khi có sự thay đổi về kick cỡ trình duyệt thì một chuyển đổi rõ ràng và đột ngột giữa 2 style màn hình. Và sự kết hợp thêm CSS Transitions với các mã vô cùng đơn giản khiến sự chuyển đổi diễn ra mềm mại hơn rất nhiều, ví dụ như một đoạn sau:

             body {

responsive web design 05                        transition:all .3s linear;

                        -0-transition:all .3s linear

                        -moz-transition:all .3s linear

                        -webkit-transition:all:all .3s linear

                         }

 

Thêm đoạn mã  CSS Transition đơn giản này nhưng sự chuyển đổi sẽ diễn ra suôn sẻ hơn rất nhiều so với khi chỉ có CSS Media Queries.

  • Responsive Data Tables:

Tự động linh hoạt co giản thay đổi mọi hiển thị chỉ với một phiên bản web đáp ứng đòi hỏi của các thiết bị di động tablet có kết nối Internet

Đã lâu lắm rồi cái thời mà một ai đó trong lúc truy cạp thông tin internet thì thấy  hình ảnh bị vỡ layout,  thậm chí các phần tử cấu trúc cũng gây ra việc làm vỡ layout khi chúng bị đẩy ra.  Responsive Data Tables cho giải pháp tạo một định dạng linh hoạt với hình ảnh tự động điều chỉnh để không bị vỡ layout hay nói một cách khác chúng ta hiển thị dữ liệu thay thế cho dữ liệu chính bằng một bản mini-table với đầy đủ về nội dung như bản chính.

( *Layout : có thể hiểu là sự dàn trang định dạng bố cục theo design của người thiết kế )

  •  Responsive Navigation Menus: 

đây là kỹ thuật chuyển đổi Menu item chứa các trang chính của website ở dạng thông thường thành một Drop Down Menu – một dạng  trình đơn thả xuống danh sách các lựa chọn khi website truy cập với một dịnh dạng trình duyệt bị thu nhỏ. Drop Down Menu với khái niệm miêu tả ” A menu that drops from the menu bar when requested and remains open without further action until the user closes it or chooses a menu item” có thể hiểu cơ bản là một danh sách (thực đơn) lựa chọn sẽ được sổ ra khi yêu cầu và mở ra như thế cho đến khi người sử dụng đóng nó lại hoặc chọn một mục của danh sách đó. 

  • CSS Media Queries and Using Available Space:

Kỹ thuật này có thể được hiểu là sử dụng CSS để thực hiện những yêu cầu thay đổi bố trí của người dùng trên cả website  một cách tinh tế vơi không gian sẵn có. Tuy nhiên đây là một vấn đề khá lớn và chuyên sâu nên ở đây trangwebdep xin nêu lên ở một cấp độ thu hẹp hơn nhiều : ví dụ cú pháp  CSS Media Queries để truy vấn những yêu cầu thuộc tính của tất các thiêt bị đa phần là thuộc tinh “screen” và ” print “trong một khai báo duy nhất dạng như thế này:

và sau khi khai báo thì ta đưa trực tiếp vào file CSS dạng như :

@media screen

        { body {

                     width: 75%;

                      }

         }

@media print

{

           body {

                      width: 100%;

                       }

}

Đến đây xin phép cho trang web đẹp được dừng p1  bởi thời gian có để viết cũng có hạn do còn nhiều yêu cầu công việc khác và trangwebdep cam kết sẽ trở lại ngay sớm nhất có thể để bạn không phải chờ lâu.

Protected by Copyscape