Blog cộng đồng về Công nghệ thông tin

Tỉ lệ

Có nhiều yếu tố ảnh hưởng đến cái đẹp của vật thể: màu sắc, kích thước, độ mịn, mùi vị, âm sắc v.v. Tuy nhiên trăm nghe không bằng một thấy, nên yếu tố thuộc về giác quan ảnh hưởng mạnh nhất.

Về mặt giác quan, yếu tố ảnh hưởng mạnh nhất là tỉ lệ (giữa chiều rộng/chiều cao v.v). Vấn đề tỉ lệ đã được nghiên cứu từ xưa, nhất là trong hội họa và kiến trúc. Ví dụ kim tự tháp Ai Cập, tranh của Leonardo Da Vinci, tượng của Michelangelo đều là các tác phẩm được cân nhắc tỉ lệ tỉ mỉ.

Trong hệ thống đẹp, các phần tử không khi nào nằm ở vị trí ngẫu nhiên, mà đều được cân nhắc sắp đặt cẩn thận. Cây cối hoa cỏ trong tự nhiên đều đẹp. Thế nhưng sinh vật phải tiến hóa cả triệu năm mới có được tỉ lệ đẹp như hiện nay. Stephen Hawking chẳng bảo "Chúa không chơi trò xúc sắc" là gì.

Ví dụ dễ hiểu hơn, rõ ràng 90-60-90 là tỉ lệ đẹp, còn 60-90-60 là tỉ lệ không đẹp rồi. Dù quan sát vào ban ngày hay ban đêm, màu sắc độ sáng tối thế nào đi nữa, thì 90-60-90 vẫn là tỉ lệ đẹp, điều này rất rõ ràng.

Tóm lại, nếu ai hỏi "Tại sao _ _ xấu?" thì hãy đáp ngay "Vì tỉ lệ của _ _ không đẹp". Trong mọi trường hợp, độ chính xác của câu trả lời này là quá cao.

Ô lưới (grid system)

OK lí thuyết đủ rồi. Làm sao áp dụng vào thiết kế web?

Trang web xấu thường do tỉ lệ không thống nhất, padding lúc thì 5px lúc thì 8px, div thì ngang 80px còn ảnh thì ngang 53px v.v. Do đó khi thiết kế web, cần dùng ô lưới để sắp đặt các phần tử một cách hài hòa.

[Phần này còn sơ khai, xin các bạn bổ sung.]

CSS framework

Ngay cả khi designer đã căn chỉnh cẩn thận, trang web khi xem trên nhiều trình duyệt khác nhau vẫn có thể trồi lên tụt xuống như thường. Trong đa số trường hợp, việc tỉ lệ nhảy nhót lung tung đều do lỗi của Bill Gate.

Lenin bảo "lũ chúng như những củ khoai sọ, nếu không dồn tất vào bao, chúng sẽ lăn tung toé". Designer cũng có nhu cầu dồn việc giải quyết vấn đề tương thích trình duyệt, vấn đề căn các phần tử vào ô lưới v.v. cho cái bao framework. Hiện có vài CSS framework miễn phí có tiếng:

• YUI: Do Yahoo phát triển, Yahoo thì quá có tiếng.
  
• Blueprint: Chủ yếu dựa trên ý tưởng của Khoi Vinh, ai chưa biết tiếng thần tượng Khoi Vinh của bạn tôi thì nên tìm hiểu thêm về giới thiết kế web chuyên nghiệp.
  

Framework gì đi nữa, đều có 3 thành phần cốt lõi sau:

• Reset: xóa toàn bộ thiết đặt về màu sắc, padding v.v. của trình duyệt.
  
• Font: thiết đặt font chữ, với web thì chữ viết là nội dung chủ yếu.
  
• Grid: thiết đặt ô lưới, thường cho phép designer sắp đặt thành phần ở vị trí chính xác chỉ theo tọa độ ngang, vì tùy theo độ dài của câu văn chiều cao của thành phần sẽ thay đổi.
  

Hãy xem Nate Koechley chuyên gia của Yahoo giảng về 3 thành phần trên.

Blueprint

Blueprint hỗ trợ plugin, cho phép sử dụng plugin do người khác viết rất dễ dàng. Đây là điểm mạnh của Blueprint, vì bất kì thứ gì đã gọi là framework cũng đều cần có hệ thống plugin.

• fancy-type: có sẵn trong file download, cung cấp vài class hiển thị chữ, ví dụ alt rất ấn tượng.
• buttons: có ở trang web của Blueprint, tham khảo ở đây.
• Silk Sprite: cho phép hiển thị rất nhiều icon đẹp.
• Silk Flags: cho phép hiển thị quốc kì các nước.

[Còn tiếp]