Web Stardards: ước mơ chuẩn hóa thế giới Web (phần 3)
Đây là bài cuối cùng trong loạt bài tóm tắt về Web Standards. Trước khi bắt đầu, tôi hy vọng nó có ích cho bạn. Và cho dù bạn cảm thấy nó có hữu dụng hay không, rất có thể nó sẽ rất có ích cho ai đó. Vì vậy, nếu bạn có một người bạn nào học về IT hay làm những công việc liên quan tới Web (designer, programmer), hãy gửi bài này đến cho bạn ấy. “Tại sao?”, bạn hỏi.
- Chứng tỏ là bạn “care”.
- Đúng vậy, tôi đang marketing cho blog của mình.
Tại sao không? Tôi viết bài không ngoài mục đích mong muốn nó trở nên hữu ích cho càng nhiều người càng tốt mà. - Tất cả vì một thế giới … Web tươi đẹp hơn. Hãy vào đây xem, thế giới có biết bao nhiêu Website tuyệt vời. Tôi sẽ rất vui và tự hào khi thấy các Website “made in Vietnam” xuất hiện nơi đây.
OK, chúng ta tiếp tục với Web Standards.
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.
Đáng xem
19 phản hồi
1
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
NDLoc đã phản hồi:
Hi Sonny,
Nếu đọc bài Web Standard của bạn trước thì hay biết mấy. Lúc trước tớ làm website cũng sử dụng một layout chính là các table, các thẻ định dạng thì vẫn dùng css. Và khi thiết kế thì chủ yếu xài GUI của Frontpage hay Dreamweave
Sau này mới chuyển sang, sử dụng các thẻ chuẩn và việc thiết kế hoàn toàn làm trên code windowns.
Chuyển sang thiết kế theo standard đúng là một bước tiến dài, tớ cảm thấy kỹ năng web của mình nâng cao lên hẳn, việc thiết kế và code cũng khoa học hơn.
Việc sử dụng CSS rất là tiện lợi, đặc biệt là khi các bạn làm việc với web động như php, asp, jsp…khi đó có nhiều thẻ sinh ra trong quá trình chạy, các bạn không thể format sẵn trong quá trình thiết kế.
Sonny, bài viết rất bổ ích, thanks mate.
2
Min Tran đã phản hồi:
Very nice write-up
3
Sonny đã phản hồi:
Thanks. Rất vui khi thấy bài viết ít nhiều hữu dụng với các bạn.
4
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Ban đã phản hồi:
Hi Sơn,
Mình đã dành thời gian để đọc 3 bài viết của bạn. Chúng rất hay, rất bổ ích. 3 website bạn giới thiệu rất hay. Cảm ơn bạn nhiều!
5
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Nuyễn Tiến Sĩ đã phản hồi:
Bài viết khá hay, mình đã và đang tiến tới quá trình hoàn thiện và phát triển kỹ năng tk web. Và nhận thấy việc sử dụng XHTML+CSS để thể hiện cho web của mình là việc rất cần thiết…
Nên mình hy vọng dân DS VN sẽ tiến tới một chuẩn thiết kế Web mới,… Và bỏ đi cái table củ kỹ đó…
6
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Bin.Huy đã phản hồi:
Hi Son,
Mình có một thắc mắc nho nhỏ là thời gian thông thường cần bỏ ra để “luyện” web standards cho đến khi design được 1 website hoàn chỉnh là bao lâu nếu như điểm xuất phát chỉ là Core HTML + Javascript mà thôi :))
7
Sonny đã phản hồi:
Hi Bin Huy,
Thông thường, nếu bạn đã có căn bản về HTML thì việc code theo XHTML hầu như không gặp khó khăn gì. Cả 2 hoàn toàn giống nhau, chỉ có điều XHTML “nghiêm khắc” hơn. Ví dụ như có thẻ mở thì phải có thẻ đóng, phải khai báo Document Type (DTD) ở đầu mỗi trang. Tôi nghĩ chỉ cần bỏ 1 ngày là có thể nắm cơ bản về XHTML.
CSS thì hơi phức tạp hơn. Đặc biệt là nếu bạn đã quen với việc design dựa trên table. Đây là vấn đề ở thói quen và cả sự… “can đảm” nữa. Giống như khi bạn tập bơi lúc nhỏ vậy. Tôi nghĩ phải vài tháng thì bạn mới có thể thành thạo design hoàn toàn bằng CSS+XHTML. Nhưng đó chỉ là tương đối thôi, vì còn tuỳ vào thời gian và khả năng của mỗi người nữa.
DOM & JavaScript cũng tương tự. Có người thấy dễ, có người thấy khó và thời gian để “master” những thứ này cũng tuỳ vào đó mà thay đổi theo.
Tóm lại, nếu mục đích của bạn chỉ là design một website hoàn chỉnh theo Web Standards thì thời gian cần thiết có lẽ chỉ vài tháng. Nhưng website đó có đẹp, dễ sử dụng, có các tính năng hữu ích thì còn phụ thuộc vào rất nhiều yếu tố khác nữa, Web Standards chỉ là một phần trong số đó.
Nhưng nói vậy không nhất thiết là bạn phải biết tất cả những thứ đó. Ví dụ, chỉ cần bạn thông thạo XHTML+CSS là đủ để bạn trở thành một Web Standards expert rồi (về XHTML & CSS, dĩ nhiên!
)
8
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Pikachu đã phản hồi:
“CSS thì hơi phức tạp hơn. Đặc biệt là nếu bạn đã quen với việc design dựa trên table.”
Hic, đọc đoạn này tôi không hiểu lắm, CSS hình như là vết tắt của Cascading Style Sheets.
Nói không hiểu đoạn trên lắm bởi vì theo tôi thấy table-based vẫn dùng được CSS nhỉ?
9
Sonny đã phản hồi:
@Pikachu: à, có lẽ tôi nói hơi vắn tắt. CSS ở đây là CSS design, cũng đồng nghĩa với tableless design hay design theo Web Standards. Dĩ nhiên là table-based vẫn dùng được CSS và cách dùng phối hợp này thường gọi là hybrid layout. Tuy nhiên để có được sự uyển chuyển cao nhất trong design (và những lợi điểm khác tôi đã nêu trong bài) thì tableless layout vẫn là sự lựa chọn tốt nhất.
Thân.
10
Binpinpin đã phản hồi:
Hihi, nếu bạn là người quen dùng table để dựng layout thì chuyển qua dựng bằng css cũng có 1 chút khó khăn vì chưa quen thôi. Còn về sau, bổ tầm 2 - 3 trang là okie thui, vì về cơ bản chúng có cấu trúc giống nhau mà
dùng css sẽ giúp website của bạn hiển thị tốt hơn trên những trình duyệt khác nhau. Nhất là trong khi hiện nay FireFox đang lên ngôi mà một số coder chỉ quen với cách thể hiện của IE sẽ gặp nhiều trục trặc khi chuyển qua check với FF!
11
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
RTO đã phản hồi:
Mình chỉ là một người mới bắt đầu tham gia làm Web, được đọc Blog của bạn mình thấy thực sự rất bổ ích. Trước đến giờ mình chỉ làm những Web dưới dạng Table…nhưng sau khi được đọc những gì bạn viết về Web Standards, mình thấy đây thực sự là cái mình sẽ và phải hướng tới trong tương lai. Mong được bạn giúp đỡ nhiều!
12
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Con Gà đã phản hồi:
Mình gà quá, đọc mà không hiểu gì hết hiz hix
13
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
le hoang dieu đã phản hồi:
Thiết kế dạng table-based chuyển sang sd CSS vấn đề rất khó là sự tương thích giữa các trình duyệt. IE7, FF hiển thị rất tốt nhưng IE6 trở xuống thì…
14
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Habuon đã phản hồi:
Trước giờ em đã biết qua và thường sử dụng table-based trong việc design. Nay muốn nghiên cứu thêm về chuẩn mới trong việc thiết kế để vận dụng chúng trong công việc. Nhờ bài viết của anh, em đã có cái nhìn tổng quan hơn, sơ bộ hơn về web standard và CSS. Bài viết rất hay. Em cám ơn anh nhiều và mong được chỉ bảo thêm!!!
Thân ái !
15
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Teufel đã phản hồi:
Xin chào Sonny
mình đang co dự định đi theo về Web Desigs, sau khi đọc bài về Webstandard của bạn nói chung mình vẫn chua hiểu rõ lắm (thông cảm–>Newbie).
Bạn có thể cho mình vài lời khuyên dành cho người mới bắt đầu được không.
Ví dụ
Mình nên cần phải có những kiến thức cơ bản gì và phải học thêm những gì.
Và đối với những người mới bắt đầu thì nên làm những việc gì đầu tiên.
Cám ơn bạn.
16
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Cao Phong đã phản hồi:
bạn có biết chỗ nào cho down mấy cái sách ebook về CSS mà advance chút ko?
17
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Quizz đã phản hồi:
Bài viết rất hay! 3 trang web bạn giới thiệu thật bổ ích. Thanks!
18
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Khổ vì tìm việc đã phản hồi:
Có một thực tế ở Việt Nam như thế này, mình nghĩ đây cũng là lý dó chính mà các website của Việt Nam không standard. Đó là: Các công ty thiết kế web của Việt Nam đều chỉ có 2 bộ phận, thứ nhất là designer (Đa số là tốt nghiệp các trường Mỹ Thuật) vừa thiết kế vừa viết HTML và CSS, thứ 2 là bộ phận lập trình, bộ phận này nhận file HTML và CSS từ designer để code chức năng. Bộ phận nào cũng biết HTML và CSS nhưng chỉ biết một ít gọi là đủ dùng; điều này cho thấy các công ty sản xuất website rất coi thường khâu viết HTML và CSS. Mình nghĩ rằng nếu có một bộ phận ở giữa, bộ phận này chuyên nhận file ảnh (của designer) rồi cắt ra HTML và CSS, sau đó chuyển sang cho developer code chức năng thì chắc chắn website sẽ đẹp hơn, chuyên nghiệp hơn và chuẩn hóa hơn. Mình là người viết HTML, CSS rất tốt nhưng lại không biết tí gì về thiết kế, lập trình thì sơ sơ thôi cho nên không biết tìm việc ở đâu đây. Lên mạng search hoài không có. Có ai biết ở đâu tuyển không?
19
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
Warning: Missing argument 2 for httprequest() in /home/.bathsheba/sontran/sonnymotives.com/wp-content/plugins/gravatars2.php on line 320
someone đã phản hồi:
Bài viết hay quá, cảm ơn anh sonny