Thử phân tích (về kỹ thuật) NhacSo.net

Sau bài viết "bình loạn" của tớ về hai dịch vụ nhac số của VN mới ra (Nhacso.net và NhacViet), tớ đã khá ngạc nhiên khi nhận được khá nhiều phản hồi của các bạn (hệ thống ghi nhận khoảng 30% số khách đến với nguoitapviet thời gian vừa qua là từ Google với cụm từ "nhacso"). Kể từ thời điểm đó đến nay, đã có nhiều thay đổi: dịch vụ NhacViet gần như vẫn dậm chân tại chỗ và có thể tạm thời "bỏ qua" không cần để ý (trừ khi VASC âm mưu chơi "cú lớn", mà theo tớ có lẽ là không), ngược lại NhacSo đã có những bước tiến lớn, nổi bật nhất là việc cho ra mắt phiên bản mới của Vietkar được tích hợp chặt chẽ với trang web Nhạc Số (điều này không có gì đáng ngạc nhiên bởi Phùng Tiến Công hiện đang làm cho FPT Music). Vietkar là một phần mềm tuyệt vời và rất có triển vọng, tuy nhiên sẽ cần có chiến lược cụ thể để giúp nó trở nên phổ biến - về chủ đề này tớ sẽ có một bài viết riêng trong mấy ngày tới, cộng với một số lỗi nhỏ tớ gặp phải khi sử dụng).

Nhưng Vietkar không phải là chủ đề của bài viết này. Nội dung bài viết này sẽ phân tích một số chi tiết về kỹ thuật, cũng như về mặt thiết kế giao diện web của dịch vụ NhacSo.net (không thèm nói gì thêm về NhacViet nữa, cho đến khi họ chịu thay đổi :)). Đọc bài viết này có thể bạn sẽ nói tớ là người "tủn mủn" hay "bới lông tìm vết" :), nhưng tớ nghĩ nếu đã muốn thành công thì phải chú ý từ những cái "tủn mủn" đó trước. Và nếu bạn sẵn sàng đọc những cái "tủn mủn" của tớ, xin mời tiếp tục…

Như đã nói trong bài viết trước, tốc độ truy cập vào cả 2 dịch vụ nhạc số này đều rất chậm (gần đây tốc độ của NhacSo đã được cải thiện đáng kể, tuy nhiên vẫn … có đẩy nó nhanh hơn như sẽ phân tích ở dưới). Một trong những nguyên nhân tớ nghĩ ra được lúc đó là do giới hạn băng thông (bandwidth) quốc tế của VN ra nước ngoài, nhưng có vẻ như lý do đó không được thuyết phục cho mấy bởi dù sao nó cũng chỉ là một trang web với vài hình ảnh và chữ; hơn nữa nếu để ý thì tốc độ của VnExpress.net (cũng của FPT) rất nhanh…

Để tìm câu trả lời, hôm nay tớ thử ngồi xem lại cấu trúc của NhacSo mới phát hiện thêm nhiều điểm thú vị, không chỉ về vấn đề tốc độ, mà còn về một số chi tiết kỹ thuật khác:

Làm nặng trang web một cách không cần thiết

Thử xem mã nguồn của trang chủ (và bất kỳ trang nào thuộc NhacSo). Chỉ riêng phần "keyword" thuộc phần "header" là cả một … "bài viết" (có thể hiểu phần "keyword" - từ khóa là nơi định nghĩa các từ khóa giúp cho Google và các cơ chế tìm kiếm khác phân loại trang web):

Có cần thiết vậy không? Biết là người thiết kế muốn NhacSo xuất hiện bất kể người dùng nhập từ nào thuộc danh sách trên (ngăn cách bằng dấu phẩy), nhưng thế này thì quả là … hơi quá đà. Chưa nói đến việc hiện nay Google gần như cũng chẳng xem trọng mấy phần này, nếu chịu khó đọc qua bạn sẽ không khỏi bật cười khi gặp một số từ khóa chẳng liên quan gì như "karaok", "free", "online", "internet", "plugins", "AXN" (bạn nào biết nó viết tắt của từ gì không?) hay "DFX" - chỉ mới là một số ít chọn ra :).

Chưa hết, xem tiếp phần "title" (dòng chữ bạn thấy trên thanh tiêu đề của trình duyệt):

Không hiểu nổi người thiết kế định truyền tải thông tin gì với cái tiêu đề này? Mục đích của phần tiêu đề "Title" là để giúp người dùng có được khái niệm là mình đang xem trang web gì bằng cách lướt nhìn qua thanh tiêu đề của trình duyệt. Với đoạn văn này thì chẳng có thanh tiêu đề nào đủ rộng để hiển thị hết, chưa nói đến việc người dùng có đủ kiên nhẫn để đọc hết hay không. Có lẽ người này vẫn chưa tìm hiểu ý nghĩa mục đích của các thẻ trong phần header.

Tại sao tớ nêu 2 điểm này? Khoan nói về hiệu quả (nếu có) của việc sử dụng các "bài văn" này trong việc làm tăng thứ hạng của Nhacso trong danh sách tìm kiếm, mấy "đoạn văn" này có lẽ đã làm người xem đợi thêm vài giây mà chẳng được thêm chút xíu thông tin nào. Đã chậm, càng chậm hơn.

Sử dụng chuẩn XHTML

Đây là một điểm thú vị nhất và cũng đã được đề cập trong bài trước. Trong phần đầu của mã nguồn trang web (nhấn phải chuột vào trang web và chọn View source) có khai báo:

NhacSo là trang web lớn đầu tiên của Việt Nam tớ thấy bắt đầu sử dụng chuẩn này - một trào lưu mới trong giới thiết kế web ở các nước. Tầm quan trọng và lí do tại sao nên sử dụng chuẩn này thì quá nhiều để có thể đề cập trong bài viết này, nhưng có thể hiểu là việc tuân theo chuẩn này sẽ giúp cải thiện và hỗ trợ khả năng truy cập, ví dụ như từ các thiết bị di động. Đây là một bước di đúng bởi tương lai dịch vụ nhạc số có lẽ sẽ còn liên quan nhiều đến các thiết bị di động, việc áp dụng chuẩn này ngay từ đầu (nếu thật sự tuân thủ) sẽ giúp cho quá trình chuyển đổi sau này trở nên rất dễ dàng.

Điều khiến tớ băng khoăn là không biết liệu đây là chủ ý của người thiết kế, hay chỉ là một sự vô tình? (các phần mềm thiết kế web như Dreamweaver đều tự động chèn phần đầu như trên). Lý do? Kiểm tra cấu trúc của mã nguồn trang web so với những quy định của chuẩn XHTML-strict phát hiện đến 888 lỗi!, trong đó phần lớn là những lỗi khá "tầm phào" mà một người nếu đã biết và khai báo sử dụng chuẩn Strict này sẽ không bao giờ mắc phải (bạn có thể tự kiểm tra các lỗi và cách sửa  bằng cách nhấn vào liên kết này).

Thật đáng tiếc là có lẽ việc sử dụng khai báo trên chỉ là sự vô tình. Các bạn có thể nói vấn này có gì mà quan trong hóa? chỉ cần nó hiển thị đúng trên trình duyệt là đủ rồi chứ sao? Suy nghĩ của tớ là: Nếu đã không dùng thì thôi, nhưng nếu đã dùng thì phải theo; Chưa kể việc áp dụng chuẩn này sẽ có lợi ích rất nhiều về sau này (ví dụ: cho phép truy cập thông qua các máy di động như điện thoại di động, PDA, PocketPC và các thiết bị nhạc số trong tương lai khác,…). Vậy nên, theo tớ, hoặc là hãy xóa hẳn khai báo trên chờ khi nào hiểu rõ về nó rồi quay lại, hoặc là thực hiện sửa đổi ngay từ bây giờ (cá nhân tớ cho rằng nên chuyển sang chuẩn XHTML-Transitional và cố gắng theo chuẩn này trước, sau đó hãy tính sau bởi chuẩn Transitional "dễ dãi" hơn một chút) (những bạn bên NhacSo nếu đọc bài này có thể liên hệ với tớ nếu muốn :))

TỪ BỎ CẤU TRÚC TRANG WEB BẰNG BẢNG (TABLE)

Đây là một "điểm cộng" của thiết kế NhacSo, và là một lý do khiến tớ nghĩ, có thể, quả thật người thiết kế đã có tìm hiểu về chuẩn XHTML. 

Tất cả các trang web tiếng Việt hiện tại mà tớ thấy đều dùng một cách thức rất củ để cấu trúc trang web, bằng cách xắp xếp một loạt các bảng biểu để đạt được cấu trúc như ý. Tớ không thể đi chi tiết về điều này tại đây, hi vọng ảnh minh họa sau sẽ giúp bạn có được khái niệm:

Nhược điểm của cách này là: mỗi lần muốn thay đổi cấu trúc của trang là một lần … mất công thay đổi toàn bộ. Lí do thật đơn giản là vì bảng biểu được tạo ra không phải để thiết kế cấu trúc vị trí (mà là để trình bày dữ liệu). Những người xây dựng giao diện Nhacso đã sử dụng cách thức được khuyên dùng bởi W3C là sử dụng các thẻ <DIV>, kết hợp với bảng định nghĩa định dạng CSS (Cascading Style Sheets). Để dễ hiểu, các bạn cứ tưởng tượng là trên trang web, các bạn sẽ tạo ra các "cái hộp" chứa nội dung và trong file CSS, bạn sẽ quy định cách xắp xếp các "hộp" này trên trang web. Khi bạn muốn thay đổi cấu trúc, chỉ cần thay đổi bảng định nghĩa!

Việc sử dụng cặp thẻ <DIV> </DIV> để cấu trúc trang web không chỉ có ý nghĩa về mặt giúp quản lý giao diện dễ hơn mà nó còn là một bước tiến gần hơn đến chuẩn XHTML của W3C, mà ý nghĩa của việc sử dụng chuẩn này thì như đã nói ở trên.

Một vài lỗi thiết kế

Điểm đầu tiên và quan trọng nhất: giao diện trang nhacso không được trình bày đúng như ý muốn của người thiết kế trên Firefox. So sánh giao diện của Nhacso trên Internet Explorer và Firefox, bạn sẽ thấy trong Firefox, giao diện của NhacSo xuất hiện khá … lung tung (để ý hình ảnh album bị phá vỡ):

Lý do về những khác biệt này chính là do cách thức và mức độ tuân thủ theo các quy định của tổ chức W3C (trong đó bị chỉ trích chủ yếu trình duyệt IE của Microsoft). Đây cũng chính là một điểm khiến nhiều người thiết kế web cảm thấy ngán ngẩm bởi để trang web hiển thị đúng trên cả 2 trình duyệt, họ phải sử dụng một loạt các "mẹo" - mà điều này cần phải nghiên cứu kỹ cách thức mà IE và Firefox hiển thị thông tin từ bảng định nghĩa CSS. Cũng từ nguyên nhân này, phần cuối của giao diện NhacSo trong Firefox cũng bị bể một cách tương tự: độ cao 3 cột không giống nhau khiến phần màu nền đen bị hiện ra một cách không đẹp mắt:

Đây đã từng là một vấn đề đau đầu, nhưng giờ đây đã có một mẹo nhỏ giải quyết bằng cách sử dụng ảnh nền phía sau (có thể tìm đọc tại AListApart). Ảnh trên cũng minh họa một số điểm về thiết kế mà tớ cho là không hợp lý:

1) Tông màu: dễ nhận thấy người thiết kế nhacso đã lấy phần nền của một trong các mẫu giao diện của Blogger sử dụng cho nhacso. Đây là một màu đẹp và tớ không có ý kiến về việc sử dụng; nhưng nếu để ý, các bạn sẽ thấy toàn bộ phần chính của trang web là màu đen và xám. Màu đỏ tươi sáng, màu đen u ám. Cuối cùng thì Nhacso là dành cho giới trẻ, người già, hay là … người trung trung? :)

2) Điểm cần nhấn mạnh thì để dưới cùng: Tớ dám chắc Vietkar sẽ là một con át chủ bài của dịch vụ nhacso, một phần không thể thiếu của nhacso - nó sẽ giúp nhacso đứng tách biệt và có lợi thế rất to lớn nếu được phát triển và "tiếp thị" đúng hướng. Vậy tại sao lại để nó xuống dưới cùng của trang web, thậm chí còn sau cả bảng quảng cáo "to đùng" của một ca sĩ? Người thiết kế có thể thu nhỏ bảng quảng cáo Vietkar lại (hiện tại to một cách không cần thiết) nếu thấy không đủ không gian, nhưng nhất thiết phải đặt nó ở trên cùng hoặc ở vị trí nào dễ thấy nhất ngay khi vào trang web, không phải đợi đến khi cuộn xuống cuối màn hình…

3) Vị trí: Một số điểm nhỏ, nhưng không hợp lý cho lắm trong giao diện như nút "Xem tiếp" trong danh sách các ca sĩ tại trang chủ (đáng ra phải để ở cuối danh sách vì bản thân nghĩa chữ "xem tiếp" đã là vậy), hoặc như cách thức mà Nhacso tô đậm các liên kết mà người dùng đưa chuột vào (biết rằng người thiết kế muốn phân biệt giữa tên bài và ca sĩ, nhưng cách "highlight" như thế này trông chẳng đẹp chút nào). Tất nhiên, đây chỉ là ý kiến cá nhân :) Mỗi người có thể có một "khẩu vị" khác nhau.

Để kết bài phân tích "lê thê" này (ban đầu định viết vài dòng ngắn, cuối cùng…), có một điểm tớ hơi ngạc nhiên là giao diện và phong cách của NhacSo xuất hiện trong phần mềm Vietkar hoàn toàn khác (cả về tông màu) phiên bản mà bạn thấy qua trình duyệt. Có lẽ có 2 phiên bản NhacSo, một dành cho người xem qua trình duyệt bình thường và một dành cho người xem qua Vietkar, mà theo tớ đoán thì bản xuất hiện trong Vietkar chẳng qua chỉ là một phiên bản hoàn toàn khác của NhacSo (trừ khi những người thiết kế hệ thống nhacso đã lập trình để hệ thống tự động nhận dạng ra người dùng đang sử dụng phần mềm gì và sẽ cung cấp định dạng tương ứng? tớ không nghĩ vậy bởi chẳng qua phần duyệt web của Vietkar cũng chỉ là sử dụng cơ chế có sẵn của IE mà thôi).

Nếu quả thật như vậy thì việc quản lý 2 trang riêng có lẽ sẽ hơi mệt…

Mặt khác, tớ nhận thấy phần mềm Vietkar lấy tông màu chủ đạo là màu xanh nhạt. Rất đẹp - nhưng không thống nhất với trang chủ. Tạo thương hiệu theo tớ không chỉ có cái tên mà còn là màu sắc và biểu tượng. Cá nhân tớ thích màu xanh của giao diện NhacSo trong Vietkar hơn :)

Tái bút:

Và cũng xin nói thêm, tớ không có ý "chê" trình độ của những người thiết kế NhacSo. Họ có thể còn giỏi hơn tớ nhiều (ít ra thì họ cũng đã có một sản phẩm chính thức) và họ đã tính hết những điều tớ nói ở trên. Dù sao thì tớ chỉ muốn đóng góp một vài điều mà tớ nhận thấy mà thôi. Có thể nó hợp lý, hoặc không - tất cả tùy thuộc vào cách nhìn và phong cách của người thiết kế :)