Trong những năm gần đây, trong giới phát triển Web, cụm từ “Web standards” được nhắc đến như một xu hướng thiết kế Web cho hiện tại và tương lai. Vậy Web standards thực chất là gì? Tại sao chúng ta phải quan tâm tới nó? Và liệu đó có phải là câu trả lời cuối cùng cho những vấn đề trong quá trình phát triển Web không? Với loạt bài viết về Web Standards, tôi hy vọng có thể phần nào giúp bạn tìm ra câu trả lời thích đáng.
1. Vấn đề của World Wide Web
Khi Tim Berners-Lee tạo ra World Wide Web, có lẽ ông cũng không tưởng tượng ra đến một ngày phát minh của ông lại có thể thay đổi cách nhân loại giao tiếp, kinh doanh, chia sẻ thông tin đến như vậy. Một thế giới (ảo) mới được tạo thành. Trong thế giới đó, mỗi một website, một trang web tùy theo mức độ lớn nhỏ có thể được xem như một thành phố, một khu vực hay một ngôi nhà trong thế giới thực. Các ngôi nhà mà chúng ta đang sống có thể rất khác nhau về phong cách, thiết kế, nhưng cơ bản đều được xây dựng dựa trên những nguyên tắc chung về kiến trúc. Ngay cả những bản vẽ cũng được thiết kế theo một chuẩn nhất định nhằm bảo đảm ý tưởng của kiến trúc sư được hiểu và thực thi chính xác bởi nhân viên thi công.
Thế giới Web cũng tương tự. Đã trong một thời gian khá dài, sự thiếu vắng một chuẩn thiết kế được chấp nhận rộng rãi trong cộng đồng phát triển Web đã dẫn đến nhiều vấn đề đau đầu cho các nhà thiết kế cũng như thiệt hại cho người dùng. Một số vấn đề “nổi cộm” bao gồm:
- Sự thiếu tương thích giữa các trình duyệt: Internet Explorer là một ví dụ tai tiếng về sự thiếu tôn trọng những chuẩn chung. Hậu quả là các trang web được thiết kế cho “đa số người dùng” sử dụng IE đã hiển thị sai lệch trong các trình duyệt khác. Một điểm đáng chú ý khác là thị phần của IE đã bị thu hẹp đáng kể trong năm nay (2006), còn khoảng hơn 80%.
- Lãng phí thời gian và tiền bạc cho việc thiết kế Web: để giải quyết vấn đề không tương thích, một số website lớn đã phải thiết kế nhiều phiên bản khác nhau cho nhiều trình duyệt. Thay vì tập trung sáng tạo cho trang web, việc kiểm tra, sửa lỗi không tương thích chiếm một phần lớn thời gian của designer. Tệ hơn, trong một số trường hợp để bảo đảm cho website của mình hiển thị đúng cho mọi trường hợp, designer đã phải sử dụng các thủ thuật (gọi là “hack”) trong thiết kế của mình, khiến việc duy trì website trong tương lai rất khó khăn. Nếu trình duyệt nâng cấp lên phiên bản mới, các “hack” đó rất có thể sẽ không còn hoạt động.
- Không tương thích với các thiết bị truy cập Web khác ngoài trình duyệt: Hiện tại người dùng không chỉ sử dụng trình duyệt để lướt web, họ còn dùng điện thoại di động, PDA, TV. Trong tương lai sẽ còn rất nhiều thiết bị khác được trang bị khả năng truy cập Web (Tủ lạnh, Đồng hồ, v.v…) Nếu mỗi thiết bị đó đều hiển thị website một cách khác nhau, thì sẽ gây phiền toái cho người dùng, cho chủ nhân của website và cho designer.
- Khó truy cập, khó sử dụng đối với người dùng: mỗi người đều có cách thức khác nhau để truy cập Web. Nếu website của bạn thiết kế không theo chuẩn, người dùng sẽ rất khó tùy biến chúng theo nhu cầu của mình. Ví dụ, những người cao tuổi hoặc cận thị rất cần sự hỗ trợ của trình duyệt hoặc trang web để có thể đọc được những văn bản với khổ chữ lớn hơn. Mặc dù đa số các trình duyệt đều hỗ trợ tính năng này, nhưng cách thức hỗ trợ không nhất quán (IE không hỗ trợ tính năng tăng cỡ chữ nếu website đặt font theo kiểu pixel). Vì vậy, website không thiết kế theo chuẩn sẽ loại bỏ tính năng này (và nhiều tính năng hữu ích khác) của IE và trình duyệt nói chung. Đó là chưa kể đến trường hợp những người khiếm thị sử dụng máy đọc để lướt Web (tôi không biết ở Việt Nam có ai sử dụng chưa).
2. Mục tiêu của Web Standards
Trước tình hình đó, năm 1998, W3C (World Wide Web Consortium), đã thành lập Dự án chuẩn hóa Web (The Web Standards Project – hay WaSP) nhằm thiết lập một số chuẩn chung nhất cho các công nghệ, ngôn ngữ sử dụng trong việc thiết kế Web. “Web Standards”, tên gọi chung của các chuẩn, được kỳ vọng sẽ giúp giảm thiểu tối đa chi phí và sự phức tạp trong phát triển Web đồng thời cũng mang lại lợi ích cho người dùng qua việc cải thiện khả năng truy cập (accessibility) của Website.
Ngoài lề
Nếu các bạn chú ý, sẽ thấy The Web Standard Project vẫn còn được gọi WaSP, chứ không phải WSP hay TWSP. Có thể giải thích như sau:
- Thứ nhất, WaSP là một chữ viết gọn (acronym) chứ không phải là chữ viết tắt (abbreviation) như WSP, vốn sử dụng các chữ cái đầu của một cụm từ riêng. Acronym được dùng như một từ với mục đích là khiến nó dễ đọc hơn (ví dụ: radar là acronym cho “radio dection and ranging”). WaSP được dùng cũng không ngoài mục đích dễ đọc dễ nhớ đó.
- Ngoài ra, đây còn là một cách chơi chữ viết tắt khá thú vị vì “wasp” tiếng Anh có nghĩa là con ong bắp cày, cũng chính là biểu tượng của The Web Standard Project.
3. Thành phần làm nên Web Standards
Vẫn có một số hiểu lầm rằng WaSP đã tạo ra các ngôn ngữ, công nghệ được khuyên dùng trong Web Standards. Trên thực tế, WaSP chỉ khuyến khích việc sử dụng các ngôn ngữ này (vốn được phát triển bởi W3C và các tổ chức khác) và làm thế nào sử dụng chúng một cách tối ưu nhất. Những chuẩn nền tảng nhất mà một Web developer cần phải biết bao gồm:
- HTML - HyperText Markup Language: Đây là ngôn ngữ lâu đời và (do đó) được sử dụng phổ biến nhất trên Web. Mục đích chính của HTML là thiết lập cấu trúc cho các tài liệu Web. Điểm yếu của ngôn ngữ lâu đời này thiếu đi tính nhất quán trong cú pháp (ví dụ: có thẻ mở mà không cần thẻ đóng), và trộn lẫn cả những yếu tố định dạng văn bản (màu sắc, kiểu chữ). Vì vậy, nó có xu hướng được thay thế dần bằng XHTML và CSS.
- XML - Extensible Markup Language: Cũng là một ngôn ngữ đánh dấu như HTML, nhưng thay vì chỉ có một số lượng thẻ nhất định, XML cho phép bạn tạo ra và định nghĩa thẻ của mình, hoặc dùng lại các thẻ của người khác. Đặc tính đó giúp XML uyển chuyển hơn HTML trong việc lưu trữ và tìm kiếm thông tin với khối lượng lớn. Tuy nhiên, vì sự hỗ trợ XML của các trình duyệt vẫn còn khá kém, nên hiện tại XML chủ yếu được dùng trong database và search engine. Để hiển thị thông tin cho người đọc, xHTML và CSS là lựa chọn tốt nhất ở thời điểm này.
- XHTML - Extensible HyperText Markup Language: XHTML là một sự kết hợp giữa sự chặt chẽ trong cấu trúc của XML và sự phổ biến của HTML. Tất cả các trình duyệt hiện tại đều hỗ trợ XHTML khá tốt, kể cả các trình duyệt của di động và PDA. Việc chuyển đổi thông tin từ XHTML sang các dạng khác (XML) cũng dễ dàng hơn so với HTML do cấu trúc logic của nó.
- CSS - Cascading Style Sheets: Một xu hướng quan trọng trong phát triển web hiện nay là sự tách biệt giữa cấu trúc, định dạng và hành vi. XHTML xây dựng nên cấu trúc, CSS giúp thay đổi “bề mặt” của website theo đúng ý tưởng thẩm mỹ của designer. Đây chính là “mảnh đất dụng võ” của designer. Trong trường hợp lý tưởng (designer hiểu và đánh giá cao lợi ích của Web Standards)tất cả những yếu tố liên quan đến design như màu sắc, font chữ, hình ảnh background đều được định dạng bằng CSS. Sử dụng CSS cũng giúp tiết kiệm thời gian và công sức của designer rất nhiều khi có thể kiểm soát được thiết kế của toàn bộ site. Ví dụ: nếu cần thay đổi một chi tiết nào đó, hoặc thậm chí thiết kế lại toàn bộ giao diện của site, designer chỉ đơn giản thay đổi các thuộc tính CSS mà không cần đụng chạm vào cấu trúc (X)HTML. Nếu file CSS được tách riêng thì designer chỉ cần sửa chữa trong file đó mà không phải sửa từng file (X)HTML một.
- DOM - Document Object Model: Có thể coi DOM như một công cụ giúp developer điều khiển đến tất cả đối tượng trên trang web, từ các thành phần cấu trúc đến định dạng và cả nội dung được tạo ra bởi (X)HTML và CSS. Nói một các chính xác, DOfM mô hình hóa tất cả các đối tượng (Object) của văn bản (Document) dưới dạng một mô hình cây phân nhánh (tưởng tượng như một sơ đồ tổ chức nhân sự của các cơ quan). Tóm lại, DOM cung cấp một cách thức đơn giản giúp developer “chộp” bất cứ thành phần nào trên trang web. Sau khi đã “chộp” được, designer có thể sử dụng và thao tác chúng bằng các ngôn ngữ khác, chẳng hạn như JavaScript, PHP hoặc XML.
- ECMA Standards: Có lẽ đây là một trong số những chuẩn mà bạn chưa từng nghe. Nhưng về bản chất, đó là một trong số những ngôn ngữ quen thuộc nhất của web developer: JavaScript. Sở dĩ có tên là ECMA vì European Computer Manufacturers Association đã kết hợp ngôn ngữ kịch bản JavaScript của Netscape và JScript của Microsoft lại thành một chuẩn thống nhất, gọi là ECMAScript. Tuy vậy, các developer trên thế giới vẫn gọi đó là JavaScript, vì cái tên đó đã trở nên quá quen thuộc với họ.Do vậy, kể từ nay trên SonnyMotives, chúng ta sẽ vẫn gọi JavaScript là… JavaScript. JavaScript được tạo ra nhằm làm cho trang Web “sống động” hơn. Vì JavaScript chạy trên máy khách, nó có thể tương tác tức thì với các hành vi của người dùng (click chuột, kéo và thả). Để làm được điều này, designer sử dụng JavaScript để điều khiển các đối tượng trên trang Web đã được xác định bởi DOM. Những đối tượng đó có thể bị dời đi, xóa, sửa và tạo mới tùy thích. Những ứng dụng phổ biến nhất của JavaScript là các hiệu ứng như chữ chạy lăng quăng trên trang web, thay đổi hình khi trỏ chuột vào (rollover), và nổi nhất gần đây là AJAX.
Trên đây chỉ là khái niệm sơ đẳng nhất về các thành phần quan trọng của Web Standards. Có thể nói mỗi thành phần lại là cả một thế giới riêng với vô số kỹ thuật, ứng dụng khác nhau. Nhưng tôi tin rằng, để trở thành một web designer thực sự, 4 thành phần quan trọng thiết yếu mà chúng ta cần phải biết, theo thứ tự ưu tiên là:
- XHTML: tạo cấu trúc văn bản.
- CSS: định dạng văn bản.
- DOM: mô hình của các đối tượng, tạo bởi XHTML và CSS. Sở dĩ tôi đặt DOM trước JavaScript là vì bạn có thể sử dụng DOM với các ngôn ngữ lập trình khác, PHP hay ASP đều được. Mặc khác, nếu bạn học JavaScript trước, rất có “nguy cơ” là bạn sẽ viết JavaScript một cách tùy tiện, gây khó khăn trong việc kiểm tra, sửa lỗi và phát triển sau này. Nếu các bạn chú ý, bất kỳ một cuốn sách về JavaScript “tử tế” nào đều dành một phần đáng kể để giới thiệu về DOM trước. Nhắc đến sách, cuốn sách hay nhất theo tôi về DOM và JavaScript là Dom Scripting của Jeremy Keith, người đã làm sống lại việc sử dụng DOM cũng như đưa ra ý tưởng tách biệt hành vi và cấu trúc trên trang Web.
- JavaScript: định nghĩa hành vi của các đối tượng trên trang web, giúp chúng tương tác với người dùng.
4. Lợi ích
Sau đây là một số lợi ích đáng kể của Web Standards, bạn cần thuộc lòng chúng phòng khi cãi nhau với các designer theo trường phái “truyền thống” và khi thuyết phục boss hoặc khách hàng về tính ưu việt của website do bạn thiết kế, dĩ nhiên trong trường hợp bạn thật sự thiết kế theo Web Standards:
- Hỗ trợ tốt cho search engine: chính cấu trúc chặt chẽ, không chen lẫn các thẻ định dạng đã giúp các search engine dễ dàng đọc, “hiểu” và đánh giá được nội dung trong những trang web theo chuẩn. Vì vậy, website theo chuẩn dễ được search engine xếp hạng cao hơn. Search engine trong chính website đó cũng được lợi tương tự, dẫn đến kết quả tìm kiếm chính xác hơn.
- Dung lượng các trang Web được thu nhỏ đáng kể, khiến thời gian tải xuống ngắn hơn (tránh cho người dùng dial-up ngồi … ngáp khi truy cập website của bạn) và tiết kiệm băng thông (tiền!)
- Tương thích với các trình duyệt tương lai: khi design của bạn sử dụng Web Standards, bạn có thể yên tâm rằng Website của bạn sẽ chạy tối với các bản nâng cấp trình duyệt, hoặc thậm chí một trình duyệt mới toanh nào đó trong tương lai.
- Tính tương thích ngược: Một điều mà chúng ta phải chấp nhận là các trình duyệt cũ không thể hiểu được những kỹ thuật của ngày nay. Tuy vậy, Web standards giúp các trình duyệt “cổ” đó hiển thị được đầy đủ những thông tin của website theo một cấu trúc cơ bản nhất mà người dùng có thể hiểu được. Hơn thế nữa, việc thiết kế theo chuẩn bảo đảm website của bạn sẽ tiếp tục hoạt động tốt trong tương lai bất chấp các công nghệ mới ra đời. Vì các chuẩn Web này sẽ luôn được cân nhắc kỹ lưỡng khi nâng cấp sao cho bản nâng cấp hay công nghệ mới phải tương thích với các thế hệ cũ hơn.
- Dễ dàng chuyển văn bản Web sang các dạng khác, chẳng hạn như database hay Word.
- Quá trình phát triển Web được rút ngắn và đơn giản hóa. Code trở nên logic hơn, dễ đọc và dễ hiểu.
- Dễ duy trì và sửa chữa: Một website có thể được thiết kế bởi nhiều designer khác nhau trong từng giai đoạn. Web standards thiết lập những luật chung mà bất cứ Web designer cũng có thể hiểu và áp dụng. Nên khi website được giao cho một designer mới, anh ta cũng có thể nhanh chóng tiếp tục những gì còn gì đang dang dở của người tiền nhiệm.
- Dễ truy cập (Accessibility): mang trang web của bạn tới mọi người, từ những người khuyết tật, phải sử dụng các thiết bị đọc Web đặc biệt tới người dùng sử dụng các thiết bị cầm tay.
5. Bất lợi
- Bất lợi lớn nhất của việc thiết kế theo Web Standards là bạn phải làm quen với một cách thiết kế hoàn toàn mới so với cách thiết kế dựa vào table (table-based) trước đây.
- Bên cạnh đó, một số trình duyệt xưa có thể không hiển thị đúng tuyệt đối layout mà bạn thiết kế.
- Cho đến thời điểm này, sự hỗ trợ thiếu đồng bộ giữa các trình duyệt về Web Standards cũng khiến việc test browser compatibility còn tương đối khó khăn. Nhưng trong vài năm tới, với việc ra đời của IE7 và lượng người sử dụng các trình duyệt cũ ngày càng giảm, mọi chuyện sẽ dễ dàng hơn.
6. Kết luận
Là một web developer/designer, chúng ta thường xuyên phải đối diện với vấn đề về sự không nhất quán trong việc hiển thị website ở các trình duyệt khác nhau. Web standards giúp giải quyết vấn đề đó đồng thời mang lại nhiều lợi ích khác cho cả nhà phát triển và người dùng. Kết quả là thời gian phát triển website được rút ngắn, duy trì dễ dàng. Việc tìm và sửa lỗi đơn giản hơn vì các dòng lệnh được viết theo chuẩn.
Do vậy, vấn đề của chúng ta, ở vị trí là một Web professional, không phải là việc quyết định có nên theo Web Standards hay không. Chưa kể đến nhiều ưu điểm kể trên, Web Standards đã là xu hướng tương lai của Web, bạn không có lựa chọn nào khác. Vấn đề của bạn là tận dụng những ưu điểm của Web Standards để tạo ra những website không những đẹp “trên cả tuyệt vời” mà còn dễ sử dụng, thân thiện với người dùng.
Cuối cùng, nếu bạn đã sử dụng hoặc đang tập sử dụng Web Standards, hãy tận dụng mọi cơ hội để nói về Web Standards cùng ưu điểm của nó với bạn bè, đồng nghiệp và mọi người. Vì suy cho cùng, bất cứ chuẩn nào cũng chỉ trở thành chuẩn thật sự khi mọi người đều sử dụng nó.
7. Tài liệu
Sau đây là một số tài liệu mà tôi cho là hữu ích đối với Web designer/developer ở bất kỳ trình độ nào. Thật ra điều này theo tôi là không cần thiết lắm, vì nếu bạn thật sự muốn tìm tòi, mọi thứ bạn cần đều đã ở trên Internet, google là ra ngay. Nhưng để giúp bạn dễ dàng hơn, sau đây là 3 nguồn tài liệu mà tôi cho là tốt nhất. Tại sao chỉ có 3? Đầu tiên, cái gì có sẵn sẽ không quí. Thứ hai, tôi không muốn “reinvent the wheel”, các tài liệu và “tập hợp các tài liệu” đã đầy dẫy trên mạng rồi. Yêu cầu: Anh văn và đam mê.
- A List Apart: tạp chí uy tín nhất về Web Standards. Nhiều ý tưởng, kỹ thuật trong thiết kế Web sử dụng ngày nay xuất phát từ các bài viết “chất lượng cao” ở đây.
- Web developer’s Handbook: Quyển sổ ghi chú đầy đủ nhất về các Website hữu ích cho một Web professional.
- Veerle’s interesting links: Cũng tương tự như Web developer’s Handbook, nhưng tập hợp các link của Veerle tập trung vào khía cạnh design (cụ thể là CSS design) hơn. Veerle là một designer tài năng, và cũng là CEO của một công ty phát triển Web nhỏ nhưng thành công. Blog này cũng là nơi cô chia sẻ kinh nghiệm của mình với cộng đồng phát triển Web.
Không có nhận xét nào:
Đăng nhận xét