HVSC · 4 mảng độc lập
Mỗi mảng một đội riêng, đầu mối riêng
Anh chị đang xem Công nghệ. Cần việc khác, chọn đúng mảng để gặp đúng người.
● khach@hvsc:~/cong-nghe/thiet-ke-website$ build --mobile-first
Thiết kế website doanh nghiệp: bán hàng, công ty, thương mại điện tử, landing page chiến dịch. Chạy tốt trên điện thoại, bàn giao kèm trang quản trị và giao diện kéo thả để nhân viên tự cập nhật nội dung; có API nối hệ thống sẵn có.
// Khung minh hoạ: mỗi khối trên trang đều có lý do kỹ thuật để tồn tại.
01 Vấn đề thường gặp
Phần lớn website doanh nghiệp không hỏng hẳn, chỉ là không mang lại khách: chậm, khó tìm thấy trên Google, khó tự sửa. Trước khi bàn về màu sắc, HVSC hỏi website đang vướng ở chỗ nào.
// vuốt ngang để xem thêm →
#WEB-01 · tốc độmức: cao
Ảnh chụp đưa thẳng lên vài MB, giao diện nạp hàng chục tệp CSS, JS không dùng tới. Khách vào từ quảng cáo hay Zalo thoát trước khi trang hiện xong.
HVSC:ảnh WebP đúng kích thước, chỉ nạp mã cần cho từng trang, bộ nhớ đệm trang, đo lại bằng PageSpeed di động.
#WEB-02 · SEOmức: cao
Nhiều thẻ H1 trên một trang, đường dẫn có dấu, không có sitemap, trang dịch vụ chỉ là ảnh chụp bảng giá. Bot đọc được rất ít chữ.
HVSC:mỗi trang một H1, đường dẫn không dấu dễ đọc, sitemap, dữ liệu có cấu trúc, nội dung là chữ thật.
#WEB-03 · vận hànhmức: trung bình
Nội dung bị "đóng cứng" trong giao diện, trình kéo thả rối rắm, nhân viên sợ bấm nhầm làm vỡ trang.
HVSC:vùng nội dung tách khỏi giao diện, hướng dẫn trực tiếp người phụ trách kèm tài liệu ngắn có hình.
#WEB-04 · làm mớimức: cao
Đường dẫn đổi hết, trang cũ trả lỗi 404, những bài từng có người tìm thấy biến mất khỏi Google sau vài tuần.
HVSC:giữ đường dẫn cũ khi có thể, lập bảng chuyển hướng 301, theo dõi Search Console sau khi chuyển.
#WEB-05 · bảo mậtmức: trung bình
Mỗi tính năng nhỏ là một plugin, có cái tải từ nguồn không rõ. Càng nhiều plugin càng nhiều cửa cho kẻ tấn công.
HVSC:dùng ít plugin, chọn plugin còn được bảo trì, viết riêng phần đặc thù, chặn chạy mã trong thư mục tải lên.
#WEB-06 · pháp lýmức: hay bị quên
Website thu số điện thoại khách nhưng không có chính sách bảo mật dữ liệu cá nhân, chân trang thiếu mã số thuế, địa chỉ.
HVSC:dựng sẵn khung chính sách bảo mật, điều khoản sử dụng, thông tin doanh nghiệp ở chân trang.
02 Loại website
Mỗi loại có cấu trúc, chức năng và cách đo hiệu quả khác nhau. Ví dụ dưới đây là web do chính HVSC vận hành, anh chị mở ra xem được ngay.
// vuốt ngang để xem thêm →
bán hàng
Danh mục, giỏ hàng, mã QR chuyển khoản theo đơn, đối soát thanh toán qua dịch vụ ngân hàng kết nối, quản lý đơn và trạng thái giao hàng.
công ty
Giới thiệu, dịch vụ, dự án, tin tức, liên hệ, có thể đa ngôn ngữ. Mỗi dịch vụ một trang riêng để khách và Google cùng hiểu anh chị làm gì.
Ví dụ: hvsc.vn
thương mại điện tử
Bộ lọc, tìm kiếm, nhiều nhóm sản phẩm, nối thanh toán, vận chuyển và kho. Thiết kế để đặt hàng được bằng một tay trên điện thoại.
thương hiệu cá nhân
Câu chuyện, dịch vụ, sách, lịch hẹn, bài viết, liên hệ. Gọn, có cá tính riêng và dễ được tìm thấy theo tên người.
landing sự kiện
Dành cho sự kiện, ra mắt sản phẩm, đợt tuyển sinh. Một trang một mục tiêu, dựng nhanh, đo được số người gửi form, bàn giao cho bộ phận marketing tự chỉnh.
app, dự án nhỏ
Bảng điều khiển, công cụ tạo mã QR, ghép khung ảnh, tính toán. Ví dụ HVSC đang vận hành: vietqr.hvscweb.com ↗, avatar.hvscweb.com ↗.
03 Giao diện mẫu
Các thẻ dưới là khung minh hoạ cho từng loại web, chưa phải web của khách. Muốn xem bản demo chạy thật của loại nào, bấm vào thẻ để hỏi HVSC.
// vuốt ngang để xem thêm →
Danh mục, giỏ hàng, mã QR chuyển khoản theo đơn.
Hỏi bản demo loại này → Giao diện mẫuCông tyGiới thiệu, dịch vụ, dự án, tin tức, liên hệ.
Hỏi bản demo loại này → Giao diện mẫuThương mại điện tửBộ lọc, tìm kiếm, nhiều nhóm sản phẩm.
Hỏi bản demo loại này → Giao diện mẫuThương hiệu cá nhânCâu chuyện, dịch vụ, sách, lịch hẹn, liên hệ.
Hỏi bản demo loại này → Giao diện mẫuLanding sự kiệnMột trang một mục tiêu: đăng ký, tải tài liệu, đặt chỗ.
Hỏi bản demo loại này → Giao diện mẫuTin tứcChuyên mục, bài liên quan, tìm bài nhanh.
Hỏi bản demo loại này →// Hình trong thẻ là ảnh minh hoạ tự dựng, chưa phải giao diện hoàn chỉnh của khách hàng nào.
04 Nền chung
Đây là chỗ website hay hỏng sau khi bàn giao, nên HVSC làm kỹ từ đầu.
// vuốt ngang để xem thêm →
mobile, đa thiết bị
trang quản trị
API mở rộng
module + công cụ SEO
05 Giao diện kéo thả
Bàn giao xong, anh chị không phải gọi lại HVSC mỗi lần đổi một dòng giá hay thêm một ảnh. Kéo khối vào đúng chỗ, sửa chữ, bấm cập nhật. Khi chốt hợp đồng và bàn giao, HVSC gửi kèm bộ video hướng dẫn từng bước để nhân viên mới cũng làm theo được.
// Minh hoạ giao diện kéo thả. Trình soạn thật phụ thuộc nền tảng và được chốt trong đề xuất kỹ thuật của từng dự án.
Gửi website anh chị thích và website hiện tại (nếu có)// HVSC góp ý điểm nên giữ, điểm nên sửa và đề xuất phạm vi
06 Module tích hợp
Không phải lúc nào cũng cần làm lại web. HVSC viết module riêng và gắn vào website, CMS hoặc hệ thống anh chị đang dùng, thử trên bản sao rồi mới đưa vào bản đang chạy.
// vuốt ngang để xem thêm →
WordPress
Form đặt chỗ nhiều bước, bảng giá, bộ lọc, trang đối tác, khối kéo thả riêng cho nhân viên. Viết gọn, không kéo thêm bộ plugin nặng.
WooCommerce
Mã QR chuyển khoản theo đơn, đối soát thanh toán, trạng thái đơn, thông báo cho nhân viên phụ trách.
CMS khác
Với CMS không phải WordPress, kỹ thuật HVSC kiểm tra cấu trúc trước, nói rõ làm được gì và không làm được gì rồi mới báo giá.
API
REST API, webhook với CRM, kế toán, kho, Zalo. Tuỳ tài liệu và quyền truy cập của hệ thống kia.
Website có sẵn cần người trông coi thay vì thêm module? Xem quản trị website trọn gói.
07 Quản trị rủi ro, hậu mãi
Điểm riêng của HVSC: coi rủi ro là một phần của thiết kế web. Phòng thủ dựng từ đầu, dữ liệu có bản sao ở nơi khác, và có người trực khi sự cố.
// vuốt ngang để xem thêm →
bước 1 · phòng
Chặn chạy mã trong thư mục tải lên, giới hạn đăng nhập sai, tường lửa, quét mã độc, kiểm tra tệp lõi bị sửa.
bước 2 · giữ
Thử trên bản sao, sao lưu rồi mới cập nhật thật, có đường quay lại nếu lỗi.
bước 3 · sao lưu
Bản sao nằm ở máy chủ khác hẳn, nền tảng khác với nơi chạy website, để một sự cố không kéo theo cả hai.
bước 4 · lưu lâu
Giữ nhiều bản theo thời gian, quay về được bản trước lúc xảy ra sự cố.
hậu mãi
Web ngừng hoạt động, bị chèn mã độc hay lỗi giữa đêm: gọi hoặc nhắn Zalo 0939.502.093, đội kỹ thuật tiếp nhận và xử lý. Việc đầu tiên luôn là sao lưu hiện trạng.
hỗ trợ nhân viên khách
Nhân viên của anh chị gặp khó khi chỉnh web thì nhắn Zalo hoặc kênh hai bên đã thống nhất, kèm video hướng dẫn đã gửi khi bàn giao.
08 Chuẩn bàn giao
Đây là phần "không nhìn thấy" nhưng quyết định website có mang khách về hay không. HVSC kiểm từng mục trên bản chạy thật trước ngày bàn giao, ghi kết quả vào biên bản.
LCP · di động
≤ 2,5giây
Ngưỡng "Tốt" của Google cho nội dung lớn nhất ở màn hình đầu.
INP
≤ 200ms
Bấm nút, mở menu, gõ form phải có phản hồi gần như tức thì.
CLS
≤ 0,1
Ảnh có sẵn kích thước, phông chữ tải đúng cách để chữ không nhảy.
H1 / trang
= 1
Mỗi trang đúng một tiêu đề chính chứa từ khoá của trang.
// vuốt ngang để xem thêm →
tốc độ
nền tảng SEO
sẵn sàng cho AI
Schema Organization, FAQ, Breadcrumb; cho phép bot AI đọc nội dung công khai; tệp llms.txt mô tả website.
bảo mật cơ bản
Chặn chạy mã trong thư mục tải lên, giới hạn đăng nhập sai, plugin cập nhật, sao lưu bản đầu tiên.
pháp lý
Chính sách bảo mật dữ liệu cá nhân, điều khoản sử dụng, thông tin doanh nghiệp ở chân trang.
3 khổ màn hình
Chụp toàn trang ở ba khổ, soát từng chỗ: không tràn ngang, chữ không bị che hay chìm vào nền, nút đủ lớn để bấm bằng ngón tay, chữ không nhỏ hơn mức đọc thoải mái. Lỗi tìm được sửa trước khi anh chị nhìn thấy.
09 Bảng thông số gói
Tên gói chỉ để dễ hình dung. Báo giá cuối cùng dựa trên số trang, chức năng và nội dung anh chị đã có, cố định khi đã chốt phạm vi. Giá chưa gồm tên miền và hosting nếu anh chị đã có sẵn.
| Thông số | Khởi đầuwebsite giới thiệu | Doanh nghiệpnhiều chuyên mục | Bán hàngWooCommerce | Theo yêu cầuđặt lịch, cổng thành viên |
|---|---|---|---|---|
| Quy mô | vài trang chính | nhiều chuyên mục, tin tức | danh mục sản phẩm | theo đặc tả |
| Form liên hệ, báo về email | có | có | có | có |
| SEO nền tảng, sitemap, 301 | có | có | có | có |
| Schema FAQ, Breadcrumb, Organization | cơ bản | đầy đủ | + Product | đầy đủ |
| Đa ngôn ngữ | không | tuỳ chọn | tuỳ chọn | tuỳ chọn |
| Giỏ hàng, mã QR theo đơn | không | không | có | tuỳ chọn |
| Chức năng riêng, tích hợp phần mềm | không | không | một phần | có |
| Hướng dẫn, tài liệu | có | có | + quản lý đơn | có |
| Chi phí | Báo giá theo yêu cầu | Báo giá theo yêu cầu | Báo giá theo yêu cầu | Báo giá theo phạm vi |
Website bán hàng trực tuyến cần thực hiện thủ tục thông báo với Bộ Công Thương theo quy định; HVSC chuẩn bị sẵn các trang chính sách mà hồ sơ thường yêu cầu.
10 Quy trình
Anh chị luôn biết website đang ở bước nào và bước tiếp theo cần gì từ phía mình (nội dung, ảnh, thông tin doanh nghiệp).
// vuốt ngang để xem thêm →
Khảo sát
Website để bán, để tuyển dụng hay để khách tin? Khách tìm anh chị bằng từ gì?
→ sơ đồ trang
Nội dung
Chốt nội dung từng trang, ảnh cần có. Giữ danh sách đường dẫn cũ nếu làm lại.
→ bảng nội dung + 301
Thiết kế
Phác giao diện máy tính và điện thoại theo nhận diện thương hiệu sẵn có.
→ bản thiết kế duyệt
Dựng
Dựng website ở địa chỉ thử, anh chị xem và góp ý trực tiếp trên trang thật.
→ bản dùng thử
Kiểm tra
PageSpeed di động, 3 khổ màn hình, form gửi tới đúng người, chuyển hướng 301.
→ biên bản đo
Ra mắt
Trỏ tên miền vào giờ ít truy cập, gửi sitemap cho Google, hướng dẫn người phụ trách.
→ tài khoản + tài liệu
11 Cam kết
Tài khoản quản trị cao nhất, tên miền đứng tên doanh nghiệp, mã nguồn giao diện con và plugin viết riêng theo hợp đồng, tài liệu hướng dẫn có hình.
Lỗi từ phần HVSC làm được sửa trong thời hạn bảo hành ghi trong hợp đồng. Sau đó anh chị chọn gói quản trị website hoặc gọi khi cần.
Dữ liệu form, đơn hàng thuộc doanh nghiệp. HVSC không dùng và không chia sẻ cho bên thứ ba; website có khung chính sách bảo mật dữ liệu cá nhân.
Đọc thêm: Core Web Vitals cho website doanh nghiệp: LCP, INP, CLS và cách sửa thực tế · Tên miền .vn hay .com · Hosting, VPS có quản trị
12 Câu hỏi thường gặp
Các khối có sẵn được thiết kế để kéo thả an toàn, mỗi khối có giới hạn chỉnh sửa hợp lý. Phần nào nhạy cảm (mã, cấu trúc) chỉ tài khoản quản trị mới sửa. Bộ video hướng dẫn gửi khi bàn giao nói rõ việc nên làm và không nên làm.
Đăng nhập và làm quen màn hình quản trị; sửa chữ, thay ảnh, kéo thả khối; đăng bài, đổi giá, quản lý đơn hoặc form; việc nên làm mỗi tuần và khi cần gọi HVSC. Nội dung cụ thể theo web đã bàn giao.
Thường là có qua API và webhook: CRM, kế toán, ERP, kho, cổng thanh toán, Zalo. Phạm vi tuỳ tài liệu API và quyền truy cập của hệ thống kia; HVSC kiểm tra trước khi báo giá.
Phụ thuộc nội dung và số chức năng (đăng ký, tải tài liệu, nhiều ngôn ngữ). Landing gọn thường nhanh hơn nhiều so với website bán hàng; thời gian được ghi trong đề xuất và anh chị xem bản chạy thử sớm.
Có. HVSC thiết kế từ khổ điện thoại, kiểm bằng mắt ở ba khổ màn hình và đo PageSpeed di động trước khi bàn giao.
Phòng từ đầu: chặn chạy mã trong thư mục tải lên, giới hạn đăng nhập sai, tường lửa, quét mã độc, cập nhật có kiểm soát. Dữ liệu có bản sao ở máy chủ độc lập. Khi có sự cố, đội kỹ thuật trực cả ngày đêm.
$ hvsc --lien-he
Kèm vài dòng về mục tiêu: bán hàng, nhận đặt lịch hay giới thiệu năng lực. HVSC góp ý điểm nên giữ, điểm nên sửa và gửi đề xuất phạm vi kèm báo giá.
Checklist chuyển đổi sang phần mềm mã nguồn mở trong 30 ngày
Tuân thủ bản quyền phần mềm cho doanh nghiệp Việt Nam: bắt đầu từ đâu
ERP và kế toán mã nguồn mở: Odoo Community, ERPNext thay phần mềm trả phí
AutoCAD và lựa chọn mã nguồn mở FreeCAD, LibreCAD: thay được đến đâu
Chuyển từ Microsoft Office sang LibreOffice: hướng dẫn cho văn phòng doanh nghiệp
