From 95b11a57506fe015a79a04eb2f760fda30b92bd1 Mon Sep 17 00:00:00 2001
From: Dao Duc
Date: Sat, 25 Mar 2023 12:09:04 +0700
Subject: [PATCH] Huong dan, Quy dinh du an
---
README.md | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 118 insertions(+)
create mode 100644 README.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..494e6d6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,118 @@
+Hướng dẫn các bước làm dự án mẫu
+
+Mô tả
+Là nơi tổng hợp các giao diện dự án của khách hàng.
+
+
+Hướng dẫn tạo dự án mẫu
+
+ Quy trình:
+
+ - Kéo tất cả file giao diện từ Repo về máy
+ - Tạo 1 folder dự án mẫu
+ - Upload code lên Repo (Hướng dẫn up code sử dụng git)
+ - Cắt giao diện
+ - Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó
+
+
+Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "ten-du-an" đã tạo ở trên (Download folder mẫu về, chỉnh sửa các thông tin theo quy định và cắt ghép).
+
+
+Hướng dẫn đặt tên
+Mỗi thư mục sẽ đặt tên theo quy định: ten-du-an. Mô tả của thư mục sẽ là URL dẫn đến giao diện đã được cắt ghép hoàn chỉnh
+VD: Giao diện mẹ và bé, mẫu 2
+
+
+
+Quy định cấu trúc
+Cấu trúc 1 dự án mẫu sẽ bao gồm các thư mục con:
+
+
+ -
+ images :
+
+ - Chứa tất cả ảnh sử dụng cho dự án. Quy định về ảnh: Tất cả các ảnh icons (icon search, icon menu,...)
+ - Kích thước mỗi ảnh icon khi export từ figma sẽ lấy kích thước x2 (Để khi sử dụng ở mobile không bị vỡ nét)
+ - Sau đó sẽ gộp chung các ảnh icon thành 1 ảnh lớn
+ -
+
Trong file CSS sẽ tạo 1 class chứa ảnh ở trên, background-size sẽ giảm 50% để hiển thị chính xác kích thước của icon. Khi sử dụng sẽ bắt theo tọa độ ảnh:
+ VD: ảnh có kích thước 500x500, vị trí hiển thị icon là: x = -200px, y = 0
+ .icons {background: url(../images/sprite.png) no-repeat;background-size: 250px 250px;}
+ .icons.icon-search{background-position: -200px 0;}
+
+
+
+
+
+ -
+ js:
+
+ - Chứa các file JS sử dụng cho dự án.
+ - Các plugin hiệu ứng, code js có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án (vd: tắt/bật xem thêm nội dung, tìm kiếm,....) sẽ gộp chung vào 1 file, đặt tên là library.js
+
+
+
+ -
+ scss :
+
+ - Chứa các file CSS sử dụng cho dự án.
+ - Sử dụng SASS để viết CSS
+ - Các style có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án sẽ gộp chung vào 1 file, đặt tên là library.css
+
+
+
+ -
+ index.html:
+
+ - Là file HTML
+ - Có thể chia nhỏ thành nhiều file sử dụng cho từng giao diện (VD: homepage.html, category.html,...) hoặc gộp chung tất cả code HTML vào 1 file
+
+
+
+
+Hướng dẫn đặt tên class
+Ở mỗi trang sẽ bọc 1 thẻ chứa class là tên gọi của trang đó. Style css sẽ bắt theo class bọc ngoài cùng để tránh lỗi giao diện ở các trang khác. Độ sâu tối đa của style từ 2 -> 3 cấp
+VD: Style menu ở header css sẽ viết theo => .global-header .menu {....}
+
+ - Header: class="global-header"
+ - Footer: class="global-footer"
+ - Trang chủ : class="homepage"
+ - Danh sách sản phẩm : class="product-page"
+ - Chi tiết sản phẩm : class="product-detail-page"
+ - Giỏ hàng : class="cart-page"
+ - Tin tức : class="article-page"
+ - Chi tiết tin tức : class="article-page article-detail-page"
+
+
+Hướng dẫn up code sử dụng git
+ Các bước up code:
+
+ - Lấy tất cả code từ git url về máy
+ - Kiểm tra trạng thái
+ - Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)
+ - Tạo ghi chú (Không viết tiếng việt có dấu)
+ - Upload code
+
+
+
+
+
+
+ - git pull (git URL) master: Lấy code về máy
+ - git status: Kiểm tra file nào có sự thay đổi
+ - git add 'tên file có sự thay đổi': Là file được báo đỏ ở git status
+ - git commit -m 'nội dung mô tả' : Comment nội dung
+ - git push origin master : Upload code
+
+
+VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git', Thêm/Sửa file README.md
+
+ - git pull https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git master
+ - git status
+ - git add 'README.md'
+ - git commit -m 'Huong dan, quy dinh'
+ - git push origin master
+
\ No newline at end of file