[Quán bar] Skin mobile Forumvi sẽ ra sao nếu có đầy đủ chức năng.

  Bài viết hay nhất1
Mấy hôm nay mình bắt đầu nghiên cứu sâu hơn về skin mobile vừa mới update của fm. Mình rút ra được một số ưu điểm và khuyết điểm của nó. Giờ viết bài này để anh em có thể nghiên cứu nó xem có thể làm gì được hơn nữa. Đồng thời góp ý để phát triển để nó hoạt động tốt hơn.

1. Với html được rút gọn và nội dung sơ lượt khiến cho giao diện mobile có thể chạy nhanh hơn khi truy cập bằng mobile. Lúc trước do không thể sửa được template cho nên để thiết kế cho nó có phần hơi khó khăn vì chỉ được dùng css và js can thiệp vào mà thôi. Nhưng nay đã có thể sửa được template vấn đề này đã được giải quyết phần nào. Nhưng mặc nổi chỉ có thể dùng chung một css cùng với giao diện pc do đó cũng có phần hơi kém.

2. Các chức năng quá thiếu hụt như là có khung đăng nhập. Nhưng không có khung đăng ký. Muốn đăng ký phải chuyển qua giao diện pc mới đăng ký được. Quá tồi.

3. Không thể xem được lý lịch thành viên. Các chức năng như quote, edit và delete thậm chí đến cả vote cũng mất nốt chỉ có một cái form gửi bài hết sức khiêm tốn. Khiến cho việc chỉnh sửa và viết bài trên giao diện này rất là khó khăn.

4. Quảng cáo. Thường xuyên bị đưa vào các store với các app quảng cáo như là google play khiến việc trải nghiệm mất đi hứng thú của người dùng.

5. Thiếu last topic khiến người dùng khó khăn khi theo dõi bài viết mới. Các addon như chatbox cũng chả có. Với người rành rẽ về js thì có thể dùng iframe để nhúng chatbox vào nhưng nó không hỗ trợ reponsive nên sẽ gây ra lỗi vỡ khung.

Đó là những điều mà mình muốn chia sẽ. Với những ưu khuyết ở trên, cho nên mình đã dành thời gian nghiên cứu và thiết kế lại giao diện mobile theo ý muốn của mình. Và đây là thành quả.

Demo: http://viethoagame.forumvi.com/?mobile 




Demo trên chỉ nên xem bằng giao diện mobile nhé.

Các chức năng chính mà mình đã thiết kế:

1. Nav
Thanh nav trượt với các chức năng cơ bản như là đăng nhập, đăng ký, xem lý lịch, chuyên mục và bài viết mới.


Khung đăng nhập và đăng ký nhanh không chuyển trang dùng hiệu ứng trượt. Với chức năng này người dùng sẽ không cần phải vào giao diện pc để đăng ký nữa, rất thuận tiện.





Do mình không dùng recent topic. Vì vậy mình lấy các bài viết mới thông qua feed. Với cách làm này thời gian lấy dữ liệu sẽ rất nhanh. Nhưng feed cập nhật lại khá chậm do đó cũng là điểm yếu của nó.


Giao diện mobile của fm không có thanh Breadcrumb, vì thể để đi tới các chuyên mục có phần khá khó khăn. Vì thế mình làm thêm một tab chuyên mục đóng mở để thuận tiện hơn.


Về phần lý lịch thành viện, đây là ý thích cá nhân thôi. Thêm vào cho nó màu mè tí. Bạn có thể dùng các _userdata sẵn có của fm để làm phần này.


2. Index_body và Topic_list_box

Các nhóm chuyên mục ở giao diện mobile của fm khá là sơ sài, với các background ảnh không được đẹp cho lắm. Do đó mình đã thay đổi hoàn toàn bằng FontAwesome. Lợi dụng các class chuyên mục để làm. Khi có bài viết mới hoặc chủ đề nào hot nó sẽ tự động đổi màu cho nó sinh động hơn.



Ở giao diện mobile không có chatbox là một thiếu sót, do đó mình đã làm một mini chatbox hỗ trợ reponsive để có thể chat được khi onl bằng mobile. Chatbox này khá là đơn giản với các chức năng như tự đăng nhập, trả lời từ trên xuống. Rất là gọn nhẹ.


3. View Topic

Đây có lẽ là phần quan trọng nhất. Như các bạn biết phần view mặc định trên giao diện mobile được rút gọn một cách đáng thương. Với 3 phần chính.

- Tên người gửi và thời gian.
- Nội dung bài viết.
- Khung trả lời.

Quá sơ sài. Vì thế mình thiết kế lại với các chức năng chủ yếu của nó.

I. Profile.

Khung thông tin người gửi, với avata hiển thị và thông tin cá nhân được thu gọn chỉ hiện khi click.


II. Vote, Quote, Edit , Delete và Editor

Các chức năng này đã bị loại bỏ ở giao diện mobile. Và mình đã đưa nó trở lại với thao tác đơn giản hơn.

* Vote.

Ở forum mình sử dụng thank hiện người thank nên phần này rất quan trọng. Do đó mình ưu tiên nó trước.


* Quote

Như mình đã nói, chức năng này không có khi dùng mobile. Nếu bạn muốn vào một link như vậy /post?p=4182&mode=quote thì khi đó nó sẽ chuyển bạn đến giao diện pc. Vì thế mình đã tối ưu nó bằng cách dựa trên WYSIWYG sẵn có của editor Wysibb mà mình sẽ nói ở phía sau. Băng cách nhấp một phát sẽ tự động lấy nội dung bài viết và chèn trực tiếp vào khung soạn thảo. Không cần mất thời gian dùng ajax để lấy dữ liệu như trước đây nữa. Rất là thuận tiện.


* Edit

Cũng giống như quote việc chỉnh sửa bài viết cũng rất khó khăn khi dùng mobile. Mình đã khắc phục nó bằng cách chỉnh sửa trực tiếp ngay tại bài viết của thành viên. Nhấp vào nút sửa sẽ tự động lấy toàn bộ nội dung chèn vào editor ngay bài viết và trực tiếp chỉnh sửa tất cả chỉ cần một thao tác. Và lúc gửi sẽ không bị chuyển trang. Nội dung bài sửa sẽ tự động cập nhật ngay tức khắc.


* Delete

Về phần này thì quá đơn giản rồi. Cách làm tương tự như tut của huynh vong thôi. Không nói nhiều về phần này nha.

* Editor.

Editor mặc định trên giao diện mobile, hoàn toàn là một form trống. Mặc dù nó cũng hỗ trợ bbcode bình thường. Nhưng rất khó để nhớ các mã bbcode và khi viết lại càng dài dòng nữa. Vì thế ở đây mình dùng Wysibb hỗ trợ tốt cả WYSIWYG và BBcode.

Nếu các bạn muốn tìm hiểu về nó thì có thể ghé vào đây. http://www.wysibb.com/ .

Với giao diện được thiết kế sẵn có trên mobile nó quá tuyệt vời đề làm một editor cho giao diện mobile của mình.

Khi dùng WYSIWYG:


Khi dùng BBcode:


Bonus thêm một cái chức năng up ảnh mà mình làm nữa. Chức năng này có thể giúp thành viên up ảnh trực tiếp lên 5 server gồm Imgur  Flickr  Imageshack  Picasa  Postimage. Sau khi up xong sẽ tự đóng dấu ảnh vào hình vừa up và chèn trực tiếp vào bài viết luôn. Nó còn cho phép up được nhiều tấm ảnh nữa. Do nó dùng acc của mình nên việc quản lý và sửa ảnh rất dễ dàng.


Lời kết:

Có lẽ mình không phải là người đầu tiên nghiên cứu về giao diện mobile này. Nhưng mình hi vọng sắp tới sẽ càng có nhiều người cũng sẽ ra mắt một skin mobile theo phong cách riêng của mình để khoe với mọi người. Haha.

- Viết nhiều quá rồi, khoe cũng nhiều quá rồi ^^. Chỉ đến đây thôi. Ai có thắc mắc hoặc góp ý gì thì hãy gửi trả lời ở topic này nhé.
  Bài viết hay nhất2
Profile trong view khi click ẩn/hiện bị lỗi, click hiện thì được mà click ẩn thì nó vẫn hiện :)
  Bài viết hay nhất3

Boom wrote:Profile trong view khi click ẩn/hiện bị lỗi, click hiện thì được mà click ẩn thì nó vẫn hiện :)

Cái này mình biết. Tại đang test trên ucweb nó chỉ hiện khi hover thôi. Nên mình để vậy,
  Bài viết hay nhất4
Mình vào xem thì chỉ thấy lỗi chỗ đó :3 còn lại thấy cũng ổn, đẹp, màu đen chủ đạo hợp cho xem ban đêm ko bị mỏi mắt (y)
  Bài viết hay nhất5
Tuyệt vời, còn đôi chỗ chưa tối ưu, nhưng nói chung là tuyệt vời :3
  Bài viết hay nhất6

Zzbaivong wrote:Tuyệt vời, còn đôi chỗ chưa tối ưu, nhưng nói chung là tuyệt vời :3


Góp ý đi. Chẳng hạn như gợi ý cho đệ một code chặn pop up quảng cảo ấy... Khà khà. Và điểm nào còn chưa tối ưu.
  Bài viết hay nhất7
Ở ngoài topic list box, chưa làm phần gửi bài viết.
CSS dùng trong mobile cũng không nhiều nên nhúng thẳng vào temp hoặc tạo file khác sẽ nhẹ hơn.
Script chỉ nên tải khi cần dùng, nhúng hết vào như vậy không tối ưu (mặc dù mình cũng thế ^^, chủ yếu là lười cập nhật).

Xóa quảng cáo dễ bị xóa forum lắm.
  Bài viết hay nhất8

Zzbaivong wrote:Ở ngoài topic list box, chưa làm phần gửi bài viết.
CSS dùng trong mobile cũng không nhiều nên nhúng thẳng vào temp hoặc tạo file khác sẽ nhẹ hơn.
Script chỉ nên tải khi cần dùng, nhúng hết vào như vậy không tối ưu (mặc dù mình cũng thế ^^, chủ yếu là lười cập nhật).

Xóa quảng cáo dễ bị xóa forum lắm.

Cái quảng cáo mà đệ nói là mấy cái popup vào store trên google cơ. Chứ quảng cáo thì để cũng chả sao. Còn mấy cái kia thì đệ xin tiếp thu. ^^

Phải rồi cái editor của huynh dùng mobile viết bài nó tự động kéo dài ra đó. Viết có mấy chữ mà nó kéo height tới hơn 600px và ko có dấu hiệu dừng lại luôn. Fix lại đi huynh ơi.
  Bài viết hay nhất9
Nếu thế cố định height lại là khỏi kéo, mà kệ tụi fm nó fix. Đằng nào lúc làm lại mình cũng vứt nó đi.
  Bài viết hay nhất10
Đẹp quá anh @markai30 ơi!
  Bài viết hay nhất11
Tuyệt vời. Phải nói là em phục bác rồi :))

Nhưng mà em chỉ hóng mỗi mấy cái thứ liên quan đến Editor thôi :v
  Bài viết hay nhất12
Nhìn nó đẹp nhưng đen quá, cho sáng sáng lên xíu sẽ đẹp hơn
  Bài viết hay nhất13
Thật không thể tin nổi, không thể tin được
Thật là tuyệt vời
  Bài viết hay nhất14
Cái Mobile version mặc định của Fm lúb mình kiểm tra tính thân thiện trên webmaster của google thì nó kêu là không thân thiện với mobile.
  Bài viết hay nhất15
đến Kazuto phục thì ko biết nói thế nào rồi :v
  Bài viết hay nhất16
em phục bác quá, nhưng bác có thể cung cấp code cho chúng em nghiên cứu ko
  Bài viết hay nhất17
Đào mộ spam vớ vẩn à
  Bài viết hay nhất18
thì mình muốn có 1 cái skin mobile mà, có gì lên forum của mình cho tiện, mà cái skin mobile của mình hiện tại rơm lắm, nếu có code thì bạn cho mình được không
@KTV2 : Đào mộ spam vớ vẩn à - Mình là con người của kí ức
You cannot reply to topics in this forum