Công cụ thành viên

Công cụ trang web


programming4:theme:items

Khác biệt

Đây là những khác biệt giữa hai phiên bản của trang.

Liên kết đến bản xem so sánh này

Phiên bản sau
Phiên bản trước
programming4:theme:items [2016/07/15 15:40] – được tạo ra hoaquynhtim99programming4:theme:items [2022/03/22 14:30] (hiện tại) – [5. Các layout thường sử dụng trong giao diện] laser
Dòng 1: Dòng 1:
-====== Danh sách các items (thành phần) cho mỗi page trên NukeViet 4.0 ====== +====== Các quy chuẩvề giao diện khi thiếkế ====== 
-===== Home page - trang chính ===== +\\ 
-Trang chính trong NukeViet sẽ lấy content từ một module. +Để có thể thiết kế đư1 giao diện các bcần phảbiết đư1 số định nghĩa cùng với các thành ph"**cần**" và "**có**" trong giao diện.\\
-===== Module News ===== +
-==== main page ==== +
-Các kiu trình bày bài viết trên trang chủ: +
-  * Danh sách bài viết (kiểu bài cũ/ mới trước) +
-  * Tiêu đề bài viết (kiểu bài cũ/ mới trưc+
-  * Dng lưới (kiểu bài cũ/ mớtrưc+
-  * Theo chuyên mục +
-    * Tin mới nhất nằm bên phải, các tin khác nằm bên trái +
-    * Tin mới nhất nằm bên trái, các tin khác nằm bên phải +
-    * Tin mới nhất nằm bên trên, các tin khác nằm bên dưới +
-    Chia thành 2 cột +
-  Không hiểthị tin lên trang chủ +
-[Ảnh phác thảo bố cục trang chính cho 1 kiểu trình bày]+
  
-=== Danh sách items ==+===== 1. Định nghĩa về giao diện (theme) =====
-  *  +
-==== catalog ==== +
-Các kiểu trình bày bài viết trong chuyên mục: +
-  * Danh sách bài viết (kiểu bài cũ/ mới trước) +
-  * Tiêu đề bài viết (kiểu bài cũ/ mới trước) +
-  * Dạng lưới (kiểu bài cũ/ mới trước) +
-[Ảnh phác thảo bố cục trang chuyên mục cho kiểu trình bày mặc định] +
-=== Danh sách items === +
-  * +
  
-==== topic ==== +Tham khảo [[nukeviet4:concepts:theme|Khái niệtheme]]
-[Ảnh phác thảo bố cục trang xem chi tiết bài viết] +
-=== Danh sách items === +
-  *  +
-==== content ==== +
-[Ảnh phác thảo bố cục trang thành viên đăng bài] +
-=== Danh sách items === +
-  *  +
-==== search ==== +
-[Ảnh phác thảo bố cục trang tìm kiếm] +
-=== Danh sách items === +
-  *  +
-===== Module About=====+
  
 +===== 2. Cấu trúc của giao diện =====
  
 +Giao diện được chia làm 3 phần **Header**, **Body** và **Footer**\\
 +
 +//Demo về dạng cấu trúc cơ bản của giao diện// 
 +{{ :nukeviet4:layout_l_b_r.jpg?nolink&800 |}}
 +
 +  * Header bao gồm: Logo , Banner , Menu , Search và Date.
 +  * Body bao gồm: những thành phần thuộc nhóm -> Block left , Content, Block right.
 +  * Footer bao gồm: những thành phần từ  List 2, ADS Product, Address trở xuống phía dưới.
 +
 +===== 3. Font sử dụng trong giao diện =====
 +
 +\\ Nukeviet thường sử dụng các dạng font sau : **tahoma, arial, vendara, awesome, roboto**... (Tùy vào từng loại giao diện mà người thiết kế có thể thay đổi dạng font cho phù hợp).\\
 +Ngoài ra thiết kế giao diện có thể kiếm thêm font để sử dụng tại : [[https://fonts.google.com/]] (đây là bộ font mà google đã chuyển đổi (nhớ chuyển language sang tiếng việt font hiển thị chính xác) và tích hợp. Các bạn có thể down về sử dụng). 
 +===== 4. Hình ảnh sử dụng trong giao diện =====
 +Ảnh hiển thị đóng góp 1 phần rất quan trọng đến giao diện và rất nhiều người thiết kế hiện nay đang sử dụng ảnh bị dính bản quyền tác giả mà không biết (khi bạn sử dụng ảnh bản quyền mà bị phát hiện thì rất có thể bạn sẽ bị kiện và trả một số tiền cực lớn cho việc này). Dưới đây là list các site download ảnh free mà thôi đã check và kiểm tra về quyền sử dụng các bức ảnh :
 +  *[[http://www.gratisography.com/]]
 +  *[[https://stocksnap.io/]]
 +  *[[https://unsplash.com/]]
 +  *[[http://negativespace.co/]]
 +  *[[http://www.lifeofpix.com/]]
 +  *[[http://freestocks.org/]]
 +  *[[http://jaymantri.com/]]
 +  *[[https://pixabay.com/]] - Trang tìm kiếm ảnh yêu thích của tôi
 +  *[[http://publicdomainarchive.com/]]
 +  *[[http://littlevisuals.co/]]
 +  *[[http://kaboompics.com/]]
 +  *[[https://www.pexels.com/]]
 +  *[[https://www.flickr.com/]] - Trang này có 1 một số quy định nên cần phải xem hướng dẫn tại đây
 +  *[[https://foodiesfeed.com/]] - Ko có giấy phép cc nhưng có quyền sử dụng hình ảnh (miễn là ko được đem nó ra bán - https://foodiesfeed.com/faq/)
 +
 +
 +Chú ý :
 +  * Tuy ở trên tôi đã kiểm tra về bản quyền ảnh nhưng để chắc chắn trước khi download bạn kiểm tra lại 1 lần nữa cho chắc ăn nhé
 +  * Các trang web trên có License là CC0 1.0
 +  * Tạm thời đối với những trang web có License CC thì người sử dụng có thể tìm kiếm, sử dụng hình ảnh tự do (tham  khảo về quyền sử dụng https://creativecommons.org/)
 +  * Với 1 số trang không có giấy phép CC thì cần phải xem kĩ điều kiện mà người quản trị đưa ra 
 +   
 +===== 5. Các layout thường sử dụng trong giao diện =====
 +Trong NukeViet thì các layout được biến đổi để phù hợp với từng giao diện sử dụng. NukeViet có những layout sau đây thường được sử dụng
 +
 +^ Layout (dạng body hiển thị của nukeviet)                ^ Col (số cột tương ứng với từng layout)         ^ Ảnh minh họa (Click vào link để xem ảnh to)   ^ Ví dụ minh họa trên NukeViet 4.0 |
 +| Left - Main           | 6 - 18       | {{ :nukeviet4:layout_l_b.jpg?200 |}} | {{ :programming4:theme:layout_left_main.png?200 |}} |
 +| Left - Main - Right   | 5 - 13 - 6   | {{ :nukeviet4:layout_l_b_r.jpg?200 |}} | {{ :programming4:theme:layout_left-main-right.png?200 |}} |
 +| Left - Right - Main   | 5 - 6 - 13   | {{ :nukeviet4:layout_l_r_b.jpg?200 |}} | {{ :programming4:theme:layout_left-right-main.png?200 |}} |
 +| Main                  | 24           | {{ :nukeviet4:layout_b.jpg?200 |}} | {{ :programming4:theme:layout_main.png?200 |}} |
 +| Main - Left - Right   | 13 - 6 - 5   | {{ :nukeviet4:layout_b_l_r.jpg?200 |}} | {{ :programming4:theme:layout_main-left-right.png?200 |}} |
 +| Main - Right          | 18 - 6       | {{ :nukeviet4:layout_b_r.jpg?200 |}} | {{ :programming4:theme:layout_main_right.png?200 |}} |
 +
 +
 + Chú ý 
 +  *    Main là cách gọi mới thay thế cho cách gọi cũ (body) để tránh sự nhầm lẫn.
 +  *    Giao diện được vẽ ra trước khi đổi tên nên phần main được thay bằng content để phân biệt)
 +
 +===== 6. Quy chuẩn trong giao diện =====
 +Trong nukeviet có một số thành phần được quy chuẩn mà thiết kế cần phải tránh hoặc cân nhắc (khi thay hoặc thêm vào) khi sử dụng cho giao diện.
 +
 +==== Quy chuẩn về icon ====
 +
 +Hầu hết các icon đều sử dụng font để hiển thị, lợi ích ở đây là nhẹ và không phải sử dụng nhiều hình ảnh do đó người thiết kế **nên hạn chế** thay đổi về mặt hình ảnh của những icon này.
 +=== Các icon nên ít chỉnh sửa ===
 +
 +Các icon này gần như cố định ít thay đổi nên người thiết kế cần hạn chế chỉnh sửa những icon này
 +     - Social icon: {{nukeviet4:socialicon.jpg?204x34}}
 +     - Icon User: {{nukeviet4:user.jpg?37x37}}
 +     - Icon Home: {{nukeviet4:home.jpg?37x37}}
 +     - Icon Search: {{nukeviet4:search.jpg?37x37}}
 +     - Icon Tin tức: {{nukeviet4:icontintuc.jpg?197x32}}
 +     - Icon Thống kê truy cập: {{nukeviet4:iconthongke.jpg?29x132}}
 +     - Icon Reponsive: {{nukeviet4:iconreponsive.jpg?136x49}}
 +     - Icon Back to top: {{nukeviet4:iconbtt.jpg?51x52}}
 +     - Icon Mail in save: (trong chi tiết của bài viết): {{nukeviet4:iconinsavemail.jpg?107x32}}
 +     - Icon tag (từ khóa: {{nukeviet4:tag.jpg?77x37}}
 +     - Icon Comment: {{nukeviet4:comment.jpg?121x31}}
 +     - Icon Qr code - view : {{nukeviet4:qrcode.jpg?224x50}}
 +
 +=== Các icon có thể chỉnh sửa ===
 +
 +Các icon này không cố định nên người thiết kế có thể thay đổi được
 +     - Icon Liên hệ (trên đầu trang): {{nukeviet4:iconcontact.jpg?584x34}}
 +     - Icon Title tin tức: {{nukeviet4:icontintuc2.jpg?79x30}}
 +     - Icon Xem tiếp: {{nukeviet4:icontintuc3.jpg?39x28}}
 +     - Icon link của tin tức: {{nukeviet4:icontintuc4.jpg?13x16}}
 +     - Icon Address(địa chỉ): {{nukeviet4:iconadd.jpg?91x158}}
 +
 +
 +==== Quy chuẩn về khoảng cách các khối ====
 +
 +Theo quy chuẩn thường thì các khối sẽ có 1 khoảng cách nhất định với nhau (khoảng cách trên dưới trái phải). Tất nhiên nó không ràng buộc quá chặt chẽ, người thiết kế có thể thò ra thụt vào tùy ý để website hấp dẫn hơn  nhưng cần chút hợp lí để không tạo sự hụt hẫng trong giao diện.
 +Ngoài ra việc quy chuẩn này áp dụng cho cả các trang trong vì vậy người thiết kế cần lưu ý khi thiết kế các trang này)\\
 +
 +Ví dụ như sau :
 +{{nukeviet4:khoangcach.jpg?1282x193}} 
 +
 +Ở đây chúng ta thấy phần khối block bên tay trái có khoảng cách với lề là 5px và khoảng cách với khối giữa là 5px (10px là tính cả khoảng cách của khối giữa - mỗi bên cách ra 5px), đây là khoảng cách mà nukeviet 4 thường sử dụng.
  
programming4/theme/items.1468572046.txt.gz · Sửa đổi lần cuối: 2016/07/15 15:40 bởi hoaquynhtim99