5. Ý nghĩa thực tiễn của đề tài
2.2 Lập trình và thiết kế giao diện website
2.2.3 HTML5 và reponsive trong thiết kế giao diện web
2.2.3.1 HTML5
HTML5 được nói đến như mợt chuẩn cơng nghệ cho phép viết ứng dụng đa nền tảng, đa thiết bị (PC, mobile), và giảm thiểu sự rối rắm, phân mảnh từ chuẩn tiền nhiệm HTML4. HTML5 cho phép đơn giản hóa việc chèn video, hình ảnh vào website mà không cần phải cài đặt thêm một plugin nào.
Mục tiêu của HTML5 là làm nhòa ranh giới giữa ứng dụng desktop, ứng dụng web và cả ứng dụng smartphone (iOS, Android, Windows Phone, BlackBerry, Symbian, Meego…).
Những điểm mới trong HTML5 bao gồm Các phần tử dạng khối(block elements)
- <header>, <footer> – Chúng ta sẽ khơng cịn cần thiết phải tạo các ID cho phần header và footer vì đã có các thẻ được định nghĩa trước này.
- <article> – Đánh dấu một bài viết, một comment hoặc một thông báo.
- <aside> – Đánh dấu nội dung ngồi lề của mợt trang web, ví dụ như mợt sidebar. - <nav> – Thanh điều hướng hoặc menu giờ có thể được đặt trong thẻ này, nó sẽ tự đợng tạo ra cho chúng ta một danh sách trông giống như một thanh điều hướng thực sự.
- <section> – Với cặp thẻ này, chúng ta có thể định nghĩa bất kỳ phân vùng nào trên trang web của mình. Nó cũng khá giống so với thẻ <div>.
Các phần tử nội tuyến (inline elements) - <mark>
- <time> - <meter> - <progress>
Các kiểu input trong form - Datetime - datetime-local - date - month - week - time - number - range - email - url
- <canvas> – Kết hợp với Javascript, tạo mợt vùng có thể vẽ đồ họa. - <video>, <audio> – Đính kèm video hoặc âm thanh.
2.2.3.2 Reponsive trong thiết kế giao diện web
Ngày này, hầu hết các doanh nghiệp mới đều muốn có mợt phiên bản di đợng cho trang web của họ. Đó là nhu cầu thực tế rất cần thiết vì rất nhiều khách hàng của họ sử dụng smartphone để truy cập Web và họ phải có mợt thiết kế cho nhiều loại thiết bị khác nhau như BlackBerry, iPhone, iPad, netbook, Kindle – và tất cả phải tương thích với đợ phân giải màn hình của các thiết bị đó. Tuy nhiên, khơng thể theo kịp với sự phát triển của các thiết bị di đợng để có thể từng loại thiết bị thiết kế riêng mợt trang web riêng cho thiết bị đó, cần mợt giải pháp tốt hơn để giải quyết triệt để vấn đề cho khách hàng có thể truy cập nợi dung trang web trên thiết bị của minh thoải
mái nhất. Đó là lý do xuất hiện khái niệm mới “Responsive Web Design” – thiết kế web đáp ứng.
Responsive Web Desgin là xu hướng mới theo đó quy trình thiết kế và phát triển website sẽ đáp ứng mọi thiết bị và môi trường người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó cần kết hợp sử dụng các kĩ thuật như flexible grid, responsive image và CSS media query. Khi người dùng chuyển trang web từ laptop sang iPad, iPhone hoặc các điện thoại di động, trang web sẽ tự động thay đổi các thành phần hiển thị trên website sao cho phù hợp với kích thước màn hình của thiết bị. Nói cách khác, trang web sẽ tự đợng đáp ứng, thay đổi cách bố trí theo thiết bị của người dùng. Điều này sẽ loại bỏ quá trình phải thiết kế lại website cho từng loại thiết bị khác nhau, chỉ cần 1 website là có thể đáp ứng mọi nhu cầu của khách hàng. [7]