Thứ sáu, ngày 28 tháng 8 năm 2009
Giới thiệu Người Tập Viết 6.0

Người Tập Viết 6 với chủ đề "Cherry Blossom"
Những ai theo dõi Người Tập Viết từ những năm đầu tiên đến nay có lẽ đều biết đến truyền thống giới thiệu giao diện mới mỗi năm của Người Tập Viết. Mặc dù mỗi lần thiết kế lại là một thử nghiệm thú vị về những gì tớ học được sau mỗi năm về thiết kế web, quá trình này đòi hỏi ngày càng nhiều sự đầu tư về thời gian – một điều mà khi còn là sinh viên không phải là một vấn đề lớn nhưng sẽ khó hơn trong tương lai.
Với suy nghĩ đó, dù chưa đến hẹn (phiên bản 5.0 chỉ mới được ra mắt cách đây gần 7 tháng), tranh thủ thời gian còn được nghỉ sau khi tốt nghiệp tớ quyết định một lần nữa thiết kế lại Người Tập Viết. Giao diện lần này được thiết kế với mục đích sử dụng trong một thời gian dài và vì vậy đã được tớ đầu tư khá kỹ lưỡng. Bên cạnh những thay đổi về giao diện, tớ cũng tái cấu trúc và đơn giản hóa hệ thống các phân mục bài viết với hi vọng sẽ giúp việc tìm các bài viết cũ dễ dàng hơn. Bài viết này sẽ giới thiệu về giao diện mới, cũng như về những thay đổi đó.
Chủ đề thiết kế mới: “Cherry Blossom”
Chủ đề của thiết kế lần này là hoa anh đào (một loài hoa rất thường thấy trong phim Hàn) với tông màu nhẹ nhàng và lãng mạn. Giao diện mới vẫn lấy bố cục 3 cột và theo mặc định được canh lề trái như trong phiên bản trước nhưng với hệ thống lưới được cải thiện đáng kể. Người Tập Viết 5.0 có thể nói là lần đầu tiên tớ thử ứng dụng hệ thống lưới vào thiết kế của mình, nhưng mặc dù nói là sử dụng hệ thống lưới, hiệu quả của ứng dụng đó vẫn không rõ ràng.
Hệ thống lưới là một công cụ hỗ trợ, nhưng nó không bảo đảm [một thiết kế sẽ thành công]. Nó cung cấp một số cách sử dụng nhất định mà mỗi người làm thiết kế có thể tìm cách sử dụng để phù hợp với phong cách riêng của anh ta. Một người thiết kế phải học cách để sử dụng hệ thống lưới; đó là một nghệ thuật đòi hỏi sự rèn luyện.
(Josef Muller-Brockmann1)
Trong khoảng thời gian từ đó đến nay, tớ đã đọc, tìm hiểu cũng như thử sử dụng hệ thống lưới này trong một vài thiết kế khác nhau và có thể nói cũng đã biết thêm được đôi điều để áp dụng trong thiết kế lần này. Chủ đề về thiết kế sử dụng hệ thống lưới quả thật nằm ngoài phạm vi của bài viết và một lần nữa tớ phải hẹn sẽ viết trong một dịp khác, nhưng các bạn có lẽ cũng sẽ cảm nhận được sự cân bằng trong thiết kế lần này (Bạn cũng có thể xem hệ thống lưới đằng sau giao diện lần này bằng cách nhấn tổ hợp phím Ctrl+G).
Trong thiết kế lần này tớ cũng thử ứng dụng tính năng mới của CSS 3 cho phép đính kèm font chữ tùy biến. Một trong những vấn đề trong lĩnh vực thiết kế web hiện tại là sự giới hạn của số lượng kiểu chữ được cài đặt sẵn trên các máy tính. Người thiết kế thường bị giới hạn trong một số font chữ được cài đặt mặc định theo các hệ điều hành (Windows/Mac) như Arial/Helvetica, Georgia, Times New Roman,…2. Những người làm thiết kế web Việt Nam còn gặp nhiều khó khăn hơn nữa khi số lượng font chữ Unicode hỗ trợ tiếng Việt chỉ có thể được đếm trên đầu ngón tay, bao gồm: Arial, Times New Roman, Verdana và Tahoma3. Phiên bản CSS 3 hỗ trợ thẻ font-face cho phép người thiết kế web có thể đưa font chữ mình muốn trực tiếp lên máy chủ và trình duyệt sẽ tải về máy người dùng kèm theo các trang web, giải phóng họ khỏi những giới hạn trên. Rất đáng tiếc, hiện tại chỉ có một vài trình duyệt mới nhất hỗ trợ tính năng này4. Nếu bạn sử dụng trình duyệt FF3.5 hoặc Safari 3.1 trở lên, bạn sẽ thấy nội dung Người Tập Viết với font chữ Chelthm như trong hình chụp ở dưới5.

Kiểu chữ Chelthm trên Mac OS X với Firefox 3.5
Cuối cùng, những ai sử dụng Firefox, Safari hay IE8 sẽ có thể chọn chế độ canh lề của khung nội dung.
Tái cấu trúc nội dung
Một mục tiêu khác của phiên bản lần này là tái cấu trúc lại nội dung. Kể từ khi Wordpress bắt đầu hỗ trợ tính năng sử dụng thẻ chủ đề (”tag”), việc sử dụng hệ thống phân mục và hệ thống thẻ trở nên rất khó để phân biệt. Nhân lần cập nhật này, tớ đã duyệt lại tất cả các bài viết, cập nhật lại thẻ chủ đề cho những bài viết cũ, đồng thời tinh giản hệ thống phân mục bài viết. Hệ thống lưu trữ bài viết cũng được cập nhật lại để giúp việc đọc các bài viết cũ được dễ dàng hơn theo phân mục, chủ đề hoặc thời gian (bạn có thể xem danh sách đầy đủ hoặc xem chi tiết). Và cuối cùng, để tiện cho những ai mới ghé thăm Người Tập Viết lần đầu tiên, trang Tìm Kiếm bài viết cũng bao gồm một danh sách những bài viết mà tớ cho là đáng chú ý mỗi năm.
Đợi phản hồi của các bạn
Như đã nói ở đầu bài viết, giao diện lần này được thiết kế với mục đích sử dụng lâu dài và sẽ tiếp tục được hoàn thiện thông qua những phản hồi của các bạn. Cá nhân tớ rất hài lòng với thiết kế mới và tớ hi vọng rằng các bạn cũng sẽ thích nó.
Chú thích trong bài:
- Josef Muller-Brockmann là một nhà thiết kế nổi tiếng người Thụy Sĩ, là tác giả của nhiều cuốn sách nổi tiếng về thiết kế sử dụng hệ thống lưới Grid Systems in Graphic Design [↩]
- danh sách các font chữ cài đặt mặc định trên các máy tính PC và Mac có thể tìm thấy ở đây [↩]
- thực tế là số lượng font chữ Unicode hỗ trợ tiếng Việt không thiếu, nhưng vấn đề là chúng không được cài đặt sẵn trên máy người sử dụng [↩]
- Danh sách các trình duyệt hỗ trợ thẻ font-face có thể tìm thấy ở đây [↩]
- Một điều khá thất vọng là vì công nghệ làm nét (”anti-alias”) của Windows không thật sự hoàn hảo nên font chữ nhìn không được sắt nét (trên Mac nhìn tuyệt). Mặc dù vậy, tớ vẫn muốn thử để xem mọi người thấy thế nào. [↩]



Sien
Ngày 8/28/2009 lúc 03h24
Giao diện này dễ nhìn đơn giản mà hay hơn giao diện trước :D
NAD
Ngày 8/28/2009 lúc 05h20
Mình ko chắc là giao diện mới này có hơn giao diện trước hay ko, nhưng mà có thể khẳng định là đẹp, dễ nhìn, cá tính và ấn tượng hơn tất cả các blog khác mà mình đã từng vào. Hầu như ngày nào mình cũng phải lượn qua đây ít nhất một lần :D
Văn Thanh
Ngày 8/28/2009 lúc 06h25
Giao diện của anh rất đẹp…
storyteller Nguyễn
Ngày 8/28/2009 lúc 07h30
Hơi lòe loẹt, nhìn thấy khó chịu hơn ver 5
Hỗn tạp
Ngày 8/28/2009 lúc 14h19
Chúc mừng NTV có giao diện mới. Giao diện này rất đẹp!
Mình chỉ góp ý 1 chút thôi: mình thấy font chữ NTV đang dùng thuộc dạng serif và để font nghiêng, mặc dù như thế trông khá đẹp, nhưng toàn bộ nội dung bài để font nghiêng thì ko hay lắm. Ngoài ra thì cách phối màu của NTV làm các mục ko được nổi bật do chọn màu chủ đạo là hồng và đỏ.
Rất mong NTV có nhiều bài viết về thiết kế web để mọi người và mình có thể học hỏi được thêm.
leduytien
Ngày 8/28/2009 lúc 14h37
@Hỗn Tạp: Tớ chắc chắn không hề để font chữ nghiêng (tớ đã kiểm tra trên IE 6,7,8 cũng như Firefox và Safari. Không biết vì sao bạn lại thấy toàn bộ bài viết để nghiêng nhỉ?
nguyenloi
Ngày 8/28/2009 lúc 21h34
không đẹp, đó là ý kiến của em… mấy cái đường kẻ thấy cứng cứng :D. còn 3 cái nút canh lề, anh để nhỏ xíu :D, không chú ý cũng chả biết nó là cái gì :D. nói chung là thua cái giao diện trước. thô quá ><!
Thái Sơn
Ngày 8/29/2009 lúc 02h37
mình thấy giao diện cũ đẹp hơn. cái này lòe loẹt và có phần khô cứng dù có chủ đề là hoa đào. font chữ hiển thị bị nhòe, không đẹp
manleviet
Ngày 8/29/2009 lúc 08h53
Chào Tiên,
Mình thích giao diện này ở những điểm sau:
+ Phông chữ Chelthm này rất đẹp. Phông chữ cho các tiêu đề cũng vậy.
+ Cành hoa đào và các họa tiết, icon cũng rất đẹp
+ Mình thích sự giản dị của mẫu design này.
Một số điểm không thích:
+ Phông chữ dòng “Phản hồi về bài viết” không đẹp và không hợp lý lắm
+ Đúng là, những đường kẻ khung làm cho mẫu trông hơi cứng hơn.
Mình thấy sự thay đổi về con người của Tiên qua mẫu này.
xuanlt
Ngày 8/29/2009 lúc 14h36
Hi anh !
So với NTV ver5 thì lần này cải thiện đáng kể về phần typo, anh sử dụng font chữ khá đẹp, có vẻ như font size to hơn và thoáng hơn, dễ đọc hơn nhiều không còn những đường kẻ giống như phiên bản trước.
Hệ thống gird như anh nói cải thiện đáng kể, dễ dàng tùy biến căn trái, giữa phải .. em rẩt thích cái này :D và cũng đang tìm hiểu .
Tuy nhiên em không thích quá nhiều những đường bo vd như cái form gửi phản hồi này chẳng hạn. rất là cứng và flat quá :)
Về màu sắc không thực sự ấn tượng hơn ver5. Cảm giác nó hơi đơn điệu, và nội dung các phần chưa thực sự nổi bật.
Chủ quan vẫn thích ver 5 hơn .
leduytien
Ngày 8/29/2009 lúc 16h58
@THÁI SƠN: Đúng là font chữ trên Windows không được hiển thị đẹp vì như có đề cập trong bài, công nghệ làm nét ClearType của Windows không thật sự tốt. Ngược lại, tớ lạ cho rằng phiên bản trước có thể còn “lòe loẹt” hơn thiết kế này vì nó sử dụng các màu có độ tương phản cao.
@XUANLT: các đường viền xung quanh form thật ra được thiết kế tròn khá dễ nhìn – nếu bạn xem trang web trên Firefox sẽ thấy đièu này. Sắp tới tớ sẽ cải thiện để hiệu ứng này hiển thị trên IE.
@MANLEVIET: Tức là con người tớ trở nên khô cứng hơn nhỉ? :)
Hỗn tạp
Ngày 8/30/2009 lúc 02h39
@LEDUYTIEN: Quả thật là rất ngộ :), typo thay đổi hoàn toàn khi test trên Opera. Mình dùng Opera 10 beta để xem NTV thì thấy toàn bộ font chuyển thành serif và nghiêng, còn xem trên Chrome 4.0 thì font dạng sans và đứng. Tiên nên để ý nó.
Lúc đầu ko để ý các border, do chỉ nhìn chủ yếu bên trên. Nhưng khi coi các comment và khi số lượng comment tăng lên thì các border của vùng comment quả thực ko đẹp. Kể cả tính chuyện bo góc cũng vậy.
Minh Hải
Ngày 8/30/2009 lúc 21h51
Mình vẫn thích giao diện của phiên bản 5 hơn, có cảm giác nó mềm mại và dễ nhìn hơn.
Font chữ ở bản này hiển thị khá khác nhau trên Firefox 3.5, Chrome 4 và IE8. Đặc biệt là trên FF, không được rõ nét lắm.
Phần để gửi phản hồi trông có vẻ giống một mẫu giấy kiểm tra (liên tưởng tới tờ giấy kiểm tra hồi còn đi học :D).
NAD
Ngày 8/31/2009 lúc 09h29
Mình có cảm giác phiên bản mới này load nhanh hơn.
leduytien
Ngày 8/31/2009 lúc 15h29
@NAD: sự kết hợp của gzip cấu hình trực tiếp trong Apache và “cache policy”.
Vĩ
Ngày 8/31/2009 lúc 19h49
Gởi Tiên,
Font chữ Chelthm rất đẹp. Tiên có biết thông tin gì về font chữ này không, như người sở hữu hay bản quyền font chữ? Liệu tôi có thể sử dụng nó thoải mái không :)?
Cảm ơn Tiên
leduytien
Ngày 9/1/2009 lúc 13h35
@VĨ: bạn có thể tải font chữ này theo liên kết trong ghi chú (3) ở cuối bài. Theo tìm hiểu, đây dường như là một font chữ tùy biến riêng bởi T.S. Nguyễn Văn Hiệp ở Đại Học Bách Khoa đã có trên mạng từ năm 2002, nhưng đáng tiếc tớ không thể truy được gốc của font chữ này là gì. Mặc dù vấn đề bản quyền vẫn rât mù mờ, nhưng font chữ này đã có để tải về trên mạng lâu nay nên hi vọng là không có vấn đề gì.
leduytien
Ngày 9/1/2009 lúc 14h01
@HỖN TẠP: Tớ đã khắc phục vấn đề font chữ xuất hiện nghiên trong Opera. Đó là một lỗi trong cách Opera đọc thẻ font-face (nếu 2 font-face của cùng một font-family xuất hiện trong file CSS, cái thứ hai dành cho kiểu chữ nghiên, thì cái đầu tiên sẽ bị bỏ qua).
Nguyễn Tiến Sĩ
Ngày 9/2/2009 lúc 23h32
Trang chủ của ngườitậpviết thì cột giữa tiêu đề viết thường, nhưng vào chi tiết lại viết hoa, hơi bị kì.
Kiên Phạm
Ngày 9/3/2009 lúc 08h58
Tớ thấy giờ giao diện của blog chả quan trọng nữa vì toàn đọc từ feedreader :D. Chỉ có vào đây comment rồi hít and run thôi :))
- Kiên
leduytien
Ngày 9/3/2009 lúc 13h36
@NGUYỄ TIẾN SĨ: thực ra đó là 2 kiểu nội dung khác nhau. Trên trang chủ, cột ở giữa giới thiệu những liên kết thú vị đến các trang web/bài viết khác, trong khi ở trang bài viết là *tiêu đề* của những bài viết mới nhất trên Người Tập Viết (không tính những ghi chép trong mục Ghi Chép & Suy Nghĩ).
Vũ Ngọc rân
Ngày 9/5/2009 lúc 05h59
Theo cảm nhận của mình thì về giao diện “nguoitapviet6.0″, Tiên muốn đặt tính sử dụng lên hàng đầu. Tức là cố gắng làm đơn giản mọi thứ, hoa văn để cho web nhẹ nhàng và tiện theo dõi các mục…!
Nhưng thực sự tó thấy thích “nguoitapviet5.0″ hơn.
Cảm nhận toàn site của Tiên ở NTV 6.0 thì mình thấy nổi lên và đập vào mắt là mắt hồng đỏ. Này này tó cũng không cho rằng nó là nhẹ nhàng và lãng mạn đâu. mà tớ thấy nó hơi nóng. và tạo cảm giác nhạt nhòa cho toàn site.
Và phần right menu cũng không thực sự dễ theo dõi bởi nó là cả dãy dọc màu đỏ hồng, theo dõi hơi bị lóa mắt Tiên ạ.
=== đó là cảm nhận phần nào của mình ===
Chúc Tiên Thành Công Với Những gì sẽ chọn sau tốt nghiêp!
Doraeminemon
Ngày 9/8/2009 lúc 03h54
Xảy ra hiện tượng lấp chữ như ở trên.
Ngoài ra theo e sắc đỏ cũng k thật sự phù hợp với một blog như thế này, cho dùng việc dùng sắc đỏ cũng rất nhẹ nhàng.
E cũng thấy anh cũng đã áp dụng nhiều thủ thuật mới nhất trong lập trình web ( bo tròn góc, font import, grid, chỉnh căn lề ) nhưng e nghĩ cách sử dụng màu sắc và kĩ thuật nên áp dụng vừa fải, có tác dụng hơn.
Ngoài ra e nghĩ nhiều người cũng rất thích việc có 1 trang dạng kéo dãn theo sở thích của người sử dụng ( độ dài tính theo %, thay vì chỉnh lề vốn k thật sự giá trị lắm )
Ngoài ra việc đặt logo bên fải cũng k fải là ý kiến hay, khi những “điểm vàng” của người đọc thường nằm bên trái và phía trên ( e nghĩ chắc anh cũng đọc bài đó rồi, tuy nhiên e k giữ link )
Y5Cafe
Ngày 9/8/2009 lúc 04h20
quả thật rất bất ngờ khi lần này ghé NTV lại được trải nghiệm một phiên bản hoàn toàn mới, và khác lạ so với tất các phiên bản trước đây.
Cảm nhận đầu tiên là một sắc xuân tràn ngập (thiếu mỗi dây pháo trên cành đào nữa là đủ bộ)
Tuy chưa nghiêng kỷ về phiên bản 6 này nhưng xin góp ý với anh vài dòng:
1. Phần kết thúc bài ở trang chủ anh nên hiển thị số comment, vì như thế phải đở mất công scroll lên để vào comment.
2. Phần phản hồi hình như có vấn đề ở các textfield, chữ chạy xuống phía dưới.
—–
Tạm thời thế, sẽ ý kiến tiếp sau khi đã nghiêng cứu kỷ :)
Minh Triết
Ngày 9/11/2009 lúc 06h22
không hiểu tại sao anh vẫn không thấy thích phong cách thiết kế của em ngoại trừ một điểm, đó là sự cẩn thận và chi tiết.
Phiên bản 5.0 là phiên bản NTV anh thích nhất. :)
Ếch Ngồi Đáy Giếng
Ngày 9/12/2009 lúc 22h16
Chào Người Tập Viết,
Mình rất đồng tình với quan điểm của bạn khi cho ra đời trang web cá nhân này. Mong rằng, đây luôn là diễn đàn để mọi người được tham gia chia sẻ quan điểm và thông tin của mình. Quan trọng hơn, bạn đang góp phần vào quá trình định hướng suy nghĩ, tính cách, quan điểm sống cho một bộ phận các bạn trẻ.
Tôi cũng muốn có cho riêng mình một trang web đại loại giống như của bạn để thể hiện quan điểm riêng của mình. Nhưng tôi lại không phải là dân tin học! Không biết gì về lập trình hay thiết kế! Bạn có thể mách nước về một giải pháp nào đó cho tôi được không?
Xin chân thành cảm ơn!
Ếch!
Mark66
Ngày 10/22/2009 lúc 08h10
Director of Graduate and Undergraduate programs Ask anything about students and teaching. ,
Pol55
Ngày 10/23/2009 lúc 05h55
A plasma is just a gas with electrons missing from the gas atoms, which can be easily arranged in a vacuum chamber. ,
Nguyễn Xuân Long
Ngày 11/4/2009 lúc 08h15
sao Long dùng Firefox 3.5.4 trên WinXP mà thấy giao diện hiển thị xấu mù à!
hình :
Giao diện Long nhìn thấy : http://img688.imageshack.us/img688/3388/nguoitapviet.jpg
Version Firefox: http://img688.imageshack.us/img688/9378/firefoxm.jpg
H4TLove
Ngày 12/21/2009 lúc 12h12
Khoong dep bang v5 !