thiet-ke-web-gia-re

Giới Thiệu Chi Tiết Về HTML5 Và CSS3

Trong những ngày sơ khai của Internet, các công cụ cho việc thiết kế một Web site chỉ là HTML và một số ít các công cụ khác. Nhưng việc thiết kế một trang Web chỉ với HTML thật tẻ nhạt và nhiều hạn chế. Đó là lí do chúng ta cần đến CSS.

Cơ bản về HTML và CSS

html5-css3_thumb

Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương – khuôn khổ cơ bản – của một trang web – trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép bạn kiểm soát phông chữ, màu chữ, kiểu nền…, của một trang HTML.

CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng hơn. Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web. Mặc dù đã có một số cách khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải thay đổi từng thành phần riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây.

HTML5 và CSS3

HTML5 và CSS3 là các chương trình mới nhất cho việc thiết kế Web. Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web – đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển Web.

Video và hiệu ứng Flash

HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight.

Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1 – đang trong phiên bản beta – có thể giúp giải quyết vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó.

Tính năng video mới này chắc chắn sẽ là một sự trợ giúp tuyệt vời cho những người sử dụng Apple iPhone bởi vì Apple phải từ chối khá nhiều để bất kỳ sự điều khiển của nó trên iPhone sẽ được chuyển giao tới cho một ứng dụng khác (dạng điều khiển này thường được biết đến như là một chế độ absolute monarchy). Nhưng cũng hy vọng HTML5 sẽ có lợi cho điện thoại Blackberry, loại điện thoại mà hầu hết là không có khả năng hỗ trợ flash. Trong thực tế, tính năng HTML5 video của Apple đã được khẳng định chắc chắn đến mức họ có hẳn một trang làm nổ bật cái gọi là các Website “iPad-ready”.

qtm_html2_thumb

 

Một điều quan trọng cần lưu ý về HTML5 video là nó vẫn còn thay đổi. Ví dụ, Safari, Chrome, và sắp tới là Internet Exporer 9 sẽ hỗ trợ HTML5 video sử dụng định dạng H.264. Firefox, mặt khác, hiện thời chỉ hỗ trợ HTML5 video sử dụng định dạng Ogg Vorbis, nhiều người sau khi dùng Firefox cho rằng mã nguồn đóng của H.264 có thể gây ra vấn đề về bản quyền trong tương lai, do đó nó có thể sẽ còn phải thay đổi.

Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Wed dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là Akihabra GamesStar Wars AT-AT Walker. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều hứa hẹn trong lĩnh vực này.

Kho lưu trữ Offline: Ứng dụng web tiến tới bước tiếp theo

Các ứng dụng web đang trở nên ngày càng tinh vi, và một số tính năng mới trong HTML5 sẽ giúp chúng tiếp tục được cải thiện. HTML5 cho phép các ứng dụng web có khả năng lưu trữ thông tin và tiện ích Internet để sử dụng khi bạn đang offline. Tính năng này sẽ cho phép lưu trữ và truy cập dữ liệu như e-mail, lịch, và các tiện ích khác thông qua các ứng dụng Web, ngay cả khi bạn đang offline, điều này làm cho các ứng dụng Web trở nên tốt hơn và hữu dụng hơn.

Khi bạn đăng nhập online trở lại các ứng dụng này sẽ được load nhanh hơn bởi vì cấu trúc của trang đã được đã được lưu trong bộ nhớ cache của trình duyệt. Về lý thuyết, bất kỳ thay đổi nào được thực hiện cho các ứng dụng Web trong khi offline vẫn được giữ nguyên khi bạn online trở lại.

Với tính năng lưu trữ offline bạn sẽ có thể xác định trong trình duyệt các trang hoặc các loại trang muốn trình duyệt tiếp tục lưu trữ mà không cần phải save riêng từng trang, nói cách khác, trước đây bạn phải thực hiện “File-Save As” bất kỳ trang nào muốn save trong khi offline, còn bây giờ khi sử dụng hệ thống mới, bạn sẽ có thể thiết lập trình duyệt của bạn tự động save một loạt những trang nhất định (ví dụ như tất cả những gì của thuộc về một Web site).

Điều này cũng sẽ tăng tốc độ load khi online bởi vì một phần của trang đã được lưu sẵn trong bộ nhớ, do đó bạn sẽ không phải chờ đợi load toàn bộ nội dung của trang khi refresh.

Theo như Google công bố thì HTML5 sẽ bắt đầu được sử dụng cho các ứng dụng Web vào tháng 12 năm nay thay vì chỉ sử dụng cho khuôn mẫu Google Gears của riêng nó.

Công cụ thiết kế mới

HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn.

Khả năng tương thích HTML5
Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web. Một số trình duyệt – như các phiên bản hiện hành của Safari và Chrome – đã thực hiện một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3. Và với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com, The New York Times, YouTube (trong phiên bản beta) và Vimeo.

Phiên bản hiện tại của Internet Explorer, trình duyệt IE 8, hỗ trợ HTML5 rất hạn chế, tuy nhiên, IE 9 sẽ hỗ trợ H264 video, âm thanh nhúng, đồ họa vector tỷ lệ và CSS3.

Không kể HTML5 vẫn còn đang trong giai đoạn “thử nghiệm” mà ngay cả một số công nghệ đang được áp dụng cho các trình duyệt và các trang Wed hiện nay vẫn chưa phải là đã kết thúc về mặt kỹ thuật.

HTML5 và CSS3 – được kết hợp với các công nghệ Web khác như JavaScript – có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang web nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa cách chúng ta lập trình và xem internet với các tính năng cải tiến all-in-one, có thể loại bỏ việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash).

Trên đây chỉ là một phần nhỏ của những gì mà HTML5 và CSS3 cung cấp. Để tìm hiểu thêm bạn có thể xem thêm các thông tin kỹ thuật chi tiết về HTML5 và CSS3.

Add Comment